diff --git a/dir.php b/dir.php
index 4cec535..b388284 100644
--- a/dir.php
+++ b/dir.php
@@ -348,9 +348,10 @@
 		#footer a:hover {
 			color: #999999;
 		}
-
 	</style>
 
+    <link rel="stylesheet" href="/ls.css">
+
 </head>
 <body <?php if ($alignment == 'left') echo 'id="left"' ?>>
 
diff --git a/index.php b/index.php
index 026083d..0ebbff3 100644
--- a/index.php
+++ b/index.php
@@ -11,7 +11,7 @@
 <body>
 		<div class="content">
 				<h2>Hello there!</h2>
-                        <p>Hello, I'm speedie and this is my personal website and blog. I'm a free software enthusiast, technology minimalist and creator of projects like <a href="https://speedwm.speedie.site">speedwm</a>, <a href="/projects/spmenu.php">spmenu</a>, <a href="https://github.com/ForwarderFactory">Forwarder Factory</a> and <a href="/projects/project081.php">Project 081</a>. I'm a GNU/Linux user, it's what I know best. Take a look around!</p>
+                        <p>Hello, I'm speedie and this is my personal website and blog. I'm a free software enthusiast, tech minimalist and creator of projects like <a href="https://speedwm.speedie.site">speedwm</a>, <a href="/projects/spmenu.php">spmenu</a>, <a href="https://github.com/ForwarderFactory">Forwarder Factory</a> and <a href="/projects/project081.php">Project 081</a>. Take a look around!</p>
 						<ul>
 							<li><a href="blog.php">Blog</a></li>
                                 <p>My blog, usually about free software or personal interests.</p>
diff --git a/ls.css b/ls.css
new file mode 100644
index 0000000..9184524
--- /dev/null
+++ b/ls.css
@@ -0,0 +1,166 @@
+* {
+	margin: 0;
+	padding: 0;
+	border: none;
+}
+
+body {
+	text-align: center;
+	font-family: monospace;
+	font-size: 8px;
+	color: #ffffff;
+    background-color: #212121;
+}
+
+#wrapper {
+	max-width: 600px;
+	*width: 600px;
+	margin: 0 auto;
+	text-align: left;
+}
+
+body#left {
+	text-align: left;
+}
+
+body#left #wrapper {
+	margin: 0 20px;
+}
+
+h1 {
+	font-size: 10px;
+	padding: 0 10px;
+	margin: 0px 0 0;
+    background-color: #363636;
+    position: sticky;
+    top: 0;
+	font-weight: bold;
+}
+
+h2 {
+	font-size: 8px;
+	padding: 0 10px;
+	margin: 10px 0 0;
+	color: #ccccff;
+	font-weight: normal;
+}
+
+a {
+	color: #89bfff;
+	text-decoration: none;
+}
+
+a:hover {
+	color: #89bfff;
+	text-decoration: underline;
+}
+
+ul#header {
+	margin-top: 20px;
+}
+
+ul li {
+	display: block;
+	list-style-type: none;
+	overflow: hidden;
+	padding: 10px;
+}
+
+ul li:hover {
+	background-color: #222222;
+}
+
+ul li .date {
+	text-align: center;
+	width: 120px;
+}
+
+ul li .size {
+	text-align: right;
+	width: 90px;
+}
+
+ul li .date, ul li .size {
+	float: right;
+	font-size: 8px;
+	display: block;
+	color: #ccccff;
+}
+
+ul#header li {
+	font-size: 8px;
+	font-weight: bold;
+	border-bottom: 1px solid #cccccc;
+}
+
+ul#header li:hover {
+	background-color: transparent;
+}
+
+ul#header li * {
+	color: #777777;
+	font-size: 8px;
+}
+
+ul#header li a:hover {
+	color: #ffffff;
+}
+
+ul#header li .asc span, ul#header li .desc span {
+	padding-right: 15px;
+	background-position: right center;
+	background-repeat: no-repeat;
+    color: #ffffff;
+}
+
+ul#header li .asc span {
+	background-image: url('<?php echo $_self ?>?i=asc');
+}
+
+ul#header li .desc span {
+	background-image: url('<?php echo $_self ?>?i=desc');
+}
+
+ul li.item {
+	border-top: 1px solid #f3f3f3;
+}
+
+ul li.item:first-child {
+	border-top: none;
+}
+
+ul li.item .name {
+	font-weight: bold;
+}
+
+ul li.item .directory, ul li.item .file {
+	padding-left: 20px;
+	background-position: left center;
+	background-repeat: no-repeat;
+}
+
+ul li.item .directory {
+	background-image: url('<?php echo $_self ?>?i=directory');
+}
+
+ul li.item .file {
+	background-image: url('<?php echo $_self ?>?i=file');
+}
+
+#footer {
+	color: #cccccc;
+	font-size: 10px;
+	margin-top: 40px;
+	margin-bottom: 20px;
+	padding: 0 10px;
+	text-align: left;
+}
+
+#footer a {
+	color: #cccccc;
+	font-weight: bold;
+}
+
+#footer a:hover {
+	color: #999999;
+}
