diff --git a/font/Comic-Code-Regular.otf b/css/fonts/Comic-Code-Regular.otf
similarity index 100%
rename from font/Comic-Code-Regular.otf
rename to css/fonts/Comic-Code-Regular.otf
diff --git a/font/Comic-Code-Regular.ttf b/css/fonts/Comic-Code-Regular.ttf
similarity index 100%
rename from font/Comic-Code-Regular.ttf
rename to css/fonts/Comic-Code-Regular.ttf
diff --git a/font/Comic-Code-Regular.woff b/css/fonts/Comic-Code-Regular.woff
similarity index 100%
rename from font/Comic-Code-Regular.woff
rename to css/fonts/Comic-Code-Regular.woff
diff --git a/xsl/princesspi-nmap.xsl b/css/fonts/princesspi-nmap.xsl
similarity index 98%
rename from xsl/princesspi-nmap.xsl
rename to css/fonts/princesspi-nmap.xsl
index f6d7bf9..6ba440f 100644
--- a/xsl/princesspi-nmap.xsl
+++ b/css/fonts/princesspi-nmap.xsl
@@ -68,9 +68,9 @@
 
 @font-face {
   font-family: "Comic-Code-Regular";
-  src: url("/nmaprincesspi/font/Comic-Code-Regular.ttf"),
-       url("/nmaprincesspi/font/Comic-Code-Regular.woff"),
-       url("/nmaprincesspi/font/Comic-Code-Regular.otf");
+  src: url("/nmaprincesspi/css/fonts/Comic-Code-Regular.ttf"),
+       url("/nmaprincesspi/css/fonts/Comic-Code-Regular.woff"),
+       url("/nmaprincesspi/css/fonts/Comic-Code-Regular.otf");
 }
 
 /* stylesheet print */
@@ -147,7 +147,7 @@
 {
   body {
     font-family: "Comic-Code-Regular", "Comic Sans MS", "Comic Sans", sans-serif;
-    background-image: url('/nmaprincesspi/img/princesspi-large-alpha-transparency-more-faded.png');
+    background-image: url('/nmaprincesspi/css/img/princesspi-large-alpha-transparency-more-faded.png');
     background-repeat: no-repeat;
     background-color: #FFDDDD;
     margin: 0;
@@ -338,7 +338,7 @@
 
   <title>Princess Pi's Magical Nmap Scan Report! - Scanned at <xsl:value-of select="$start" /></title>
 
-	<link rel="icon" type="image/x-icon" href="/nmaprincesspi/img/favicon.ico" />
+	<link rel="icon" type="image/x-icon" href="/nmaprincesspi/css/img/favicon.ico" />
    
     <script type="text/javascript">
      
diff --git a/css/img/favicon.ico b/css/img/favicon.ico
new file mode 100644
index 0000000..c8c90f4
Binary files /dev/null and b/css/img/favicon.ico differ
diff --git a/css/img/plot-icon-10.png b/css/img/plot-icon-10.png
new file mode 100644
index 0000000..b83a732
Binary files /dev/null and b/css/img/plot-icon-10.png differ
diff --git a/img/princesspi-large-alpha-transparency-more-faded.png b/css/img/princesspi-large-alpha-transparency-more-faded.png
similarity index 100%
rename from img/princesspi-large-alpha-transparency-more-faded.png
rename to css/img/princesspi-large-alpha-transparency-more-faded.png
diff --git a/css/princesspi-default-css.css b/css/princesspi-default-css.css
new file mode 100644
index 0000000..31c1c69
--- /dev/null
+++ b/css/princesspi-default-css.css
@@ -0,0 +1,132 @@
+/*
+    Princess Pi's Magical Standard Code!
+
+    colors:
+        pale pink background: #FFDDDD
+        slightly lighter pink background like on inputs #FFEEEE
+        dark purple like text: #800080
+        slightly darker than true pink like in input focus: #FFB4C0
+        true blue like on input focus and hover borders: #0000FF 
+*/
+
+@font-face {
+    font-family: 'Comic Code Regular';
+    src: url('fonts/ComicCodeRegular.otf');
+}
+
+body {
+    font-family: "Comic Code Regular", "Comic Sans MS", 'Courier New', Courier, monospace;
+    font-weight: bold;
+    color: #800080;
+
+    background-image: url('img/princesspi-large-alpha-transparency-more-faded.png');
+    background-color: #FFDDDD;
+    background-repeat: no-repeat;
+}
+
+h1.title {
+    color: #800080;
+	font-size: 3em;
+}
+
+img { border: 0; }
+
+.hidden { display: none; }
+
+input[type=text],textarea { 
+    background-color: #FFEEEE;
+    border: 2px solid #800080;
+}
+
+input[type=text]:focus,textarea:focus {
+    background-color: #FFB4C0;
+    border: 2px solid #0000FF;
+}
+
+select {
+    background-color: #FFEEEE;
+    border: 2px solid #800080;
+}
+
+select:focus {
+    background-color: #FFB4C0;
+    border: 2px solid #0000FF;
+}
+
+input[type=button],input[type=file],input[type=submit],button {
+    border: 2px solid #800080;
+    background-color: #FFEEEE;
+}
+
+input[type=button]:hover,input[type=file]:hover,input[type=submit]:hover,button:hover {
+    background-color: #FFAAAA;
+    border: 2px solid #0000FF
+}
+
+.fakelink {
+    color: #B56B93;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.fakelink:hover {
+    text-decoration: none;
+}
+
+/*structures*/
+#content {
+	width: 80%;
+	margin: auto;
+}
+
+.row {
+	clear: both;
+	margin: 0;
+	padding: 0;
+}
+
+a:link {
+	/*font-weight: bold;
+	font-size: 1.25em;*/
+	color: #B56B93;
+}
+
+a:hover {
+	text-decoration: none;
+}
+
+ul {
+	list-style-image: url('img/plot-icon-10.png');
+}
+
+.hidden {
+	display: none;
+}
+
+/*
+.bar {
+	width: 20%;
+	margin: 10px;
+	padding: 0;
+    float: left;
+}
+
+
+
+.bar ul li a:link {
+	font-weight: bold;
+	font-size: 1.25em;
+	color: #B56B93;
+}
+
+.bar ul li a:hover {
+	text-decoration: none;
+	letter-spacing: 1.35;
+}
+
+.bar ul li a.important {
+	font-size: 1.5em;
+	color: #F00;
+}
+
+*/
\ No newline at end of file
diff --git a/demo.html b/demo.html
new file mode 100644
index 0000000..fdf13d1
--- /dev/null
+++ b/demo.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/princesspi-default-css.css">
+    <link rel="icon" type="css/img/" href="css/img/favicon.ico">
+    <script src="js/princesspi-default-js.js"></script>
+    <title>Demo Page | Princess Pi's Magical Standard Code</title>
+</head>
+<body>
+    <h1>Demo Page~</h1>
+    <div>
+        <a href="#">real link</a>
+        <br>
+        <span class="fakelink">fakelink</span>
+        <br>
+        <textarea>(textarea)</textarea>
+        <br>
+        <input type="text" value="(text input)">
+        <br>
+        <input type="submit" value="go, baby, go (submit)">
+        <br>
+        <input type="button" value="go, baby, go (button)">
+        <br>
+        <button>go, baby, go (newbutton)</button>
+        <br>
+        <ul>
+            <li>unordered list</li>
+            <li>ul list</li>
+            <li>list element</li>
+        </ul>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/img/favicon.ico b/img/favicon.ico
deleted file mode 100644
index f99d89c..0000000
Binary files a/img/favicon.ico and /dev/null differ
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..1598507
--- /dev/null
+++ b/index.php
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/princesspi-default-css.css">
+    <link rel="icon" type="css/img/" href="css/img/favicon.ico">
+    <script src="js/princesspi-default-js.js"></script>
+    <title>Princess Pi's Magical Nmap Web Thingy!</title>
+</head>
+<body>
+    <h1>Princess Pi's Magical Nmap Web Thingy!</h1>    
+</body>
+</html>
\ No newline at end of file
diff --git a/js/princesspi-default-js.js b/js/princesspi-default-js.js
new file mode 100644
index 0000000..4a266bb
--- /dev/null
+++ b/js/princesspi-default-js.js
@@ -0,0 +1,61 @@
+/*
+    Princess Pi's Magical Standard Code!
+*/
+
+function getID(ID) {
+    return document.getElementById(ID);
+}
+
+function copyToClipboard(ID) {
+    let copyText = getID(ID);
+    copyText.select();
+    document.execCommand("copy");
+}
+
+function xhrSuccess(xhrRet) {
+    let xhrResponseText = xhrRet.target.responseText;
+}
+
+function xhr404(xhrRet) {
+    // console.log(xhrRet);
+}
+
+function xhrOther(xhrRet) {
+    // console.log(xhrRet.target);
+}
+
+function xhrLoadend(xhrRet) {
+    let xhrStatus = xhrRet.currentTarget.status;
+
+    switch(xhrStatus) {
+        case 404:
+            xhr404(xhrRet);
+            break;
+        case 200:
+            xhrSuccess(xhrRet);
+            break;
+        default:
+            xhrOther(xhrRet);
+    }
+}
+
+function doXhr(xhrFilePath, xhrMethod='GET', xhrPostData=null) {
+    const xhr = new XMLHttpRequest();
+    xhr.addEventListener("loadend", xhrLoadend);
+    xhr.open(xhrMethod, xhrFilePath);
+    xhr.send();
+}
+
+function changeFavIcon(icoFile) {
+    let icoLink = document.querySelector("link[rel~='icon']");
+    
+    if(icoLink) {
+        document.head.removeChild(icoLink);
+    }
+
+    icoLink = document.createElement('link');
+    icoLink.rel = 'icon';
+    document.head.appendChild(icoLink);
+
+    icoLink.href = icoFile;
+}   
\ No newline at end of file
diff --git a/nmap-script.sh b/nmap-script.sh
index 7ba2df2..8d37a90 100755
--- a/nmap-script.sh
+++ b/nmap-script.sh
@@ -3,7 +3,7 @@
 scansPath="/var/www/html/nmaprincesspi/scans"
 fileName="nmap-$(date +%Y%m%d-%H%M%S).xml"
 filePath="$scansPath/$fileName"
-webPath="http://10.0.0.51/nmap-scans/$fileName"
+webPath="http://10.0.0.51/nmaprincesspi/scans/$fileName"
 
 cmd="nmap -oX \"$filePath\" --stylesheet \"/nmaprincesspi/xsl/princesspi-nmap.xsl\" $*"