diff --git a/css/icons/available.png b/css/icons/available.png
new file mode 100644
index 0000000..1b57bfc
Binary files /dev/null and b/css/icons/available.png differ
diff --git a/css/icons/folder.png b/css/icons/folder.png
new file mode 100644
index 0000000..4b3af6c
Binary files /dev/null and b/css/icons/folder.png differ
diff --git a/css/icons/item.png b/css/icons/item.png
new file mode 100644
index 0000000..759c8f1
Binary files /dev/null and b/css/icons/item.png differ
diff --git a/html/base/index.html b/html/base/index.html
index 9867ff5..c6b13ea 100644
--- a/html/base/index.html
+++ b/html/base/index.html
@@ -5,10 +5,13 @@
   <style>
     body { font-family: Arial, sans-serif; margin: 20px; }
     h1 { color: #333; }
-    li { transition: font-size 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);}
-    li:hover { font-size: larger;} 
+    li { list-style: none; background: url("../../css/icons/item.png") no-repeat left center; background-size: 15px 20px; padding-left: 25px; transition: font-size 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); }
+    li:hover { font-size: larger; }
     #nojs { display: inline-block;color: red;transition: transform 0.7s cubic-bezier(0.215, 0.610, 0.355, 1); }
     #nojs:hover { transform: skewX(-12deg);}
+    #nonenormalul { list-style: disc inside; margin: 1em 0; padding-left: 40px; background: none; }
+    #nonenormalul li { list-style: inherit; margin: 0; padding: 0; background: none; transition: font-size 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); }
+    #nonenormalul li:hover { font-size: larger; }
   </style>
   <link rel="icon" type="image/x-icon" href="../../css/favicon/favicon.ico">
 </head>
@@ -17,7 +20,7 @@
         <h1 id="nojs">Please enable Javascript!</h1>
         <p>
            <i><strong> If you might be wondering, what does the Script do?</strong></i><br/>
-             <ul>
+             <ul id="nonenormalul">
                 <li>It strips the Links you see below from any .html extension</li>
                 <li>It is essential for themeswitching to work</li>
                 <li>it will definetly hak u >:3</li>
@@ -27,9 +30,13 @@
     <script>
         // we just repurpouse the nojs from css
         // much easier than adding a new element
-        document.write('<h1 id="nojs" style="color:black;">Index of PyPost</h1>');
+        console.log("javascript is enabled! good!")
+        document.write('<h1 id="nojs" style="color:black; display: flex; align-items: center;"><img src="../../css/icons/folder.png" width="45" height="45" style="vertical-align: middle; margin-right: 8px;" />Index of PyPost</h1>');
     </script>
-  <p>Available pages:</p>
+  <p>
+    <img src="../../css/icons/available.png" width="32" height="32" style="vertical-align: middle; display: inline; margin-right: 8px;" />
+    Available pages:
+  </p>
   <!-- CONTENT -->