diff --git a/dev/fonts/Lilex-Bold.ttf b/dev/fonts/Lilex-Bold.ttf
new file mode 100644
index 0000000..d428f8e
Binary files /dev/null and b/dev/fonts/Lilex-Bold.ttf differ
diff --git a/dev/fonts/Lilex-ExtraLight.ttf b/dev/fonts/Lilex-ExtraLight.ttf
new file mode 100644
index 0000000..791f036
Binary files /dev/null and b/dev/fonts/Lilex-ExtraLight.ttf differ
diff --git a/dev/fonts/Lilex-Medium.ttf b/dev/fonts/Lilex-Medium.ttf
new file mode 100644
index 0000000..9b6e276
Binary files /dev/null and b/dev/fonts/Lilex-Medium.ttf differ
diff --git a/dev/fonts/Lilex-Regular.ttf b/dev/fonts/Lilex-Regular.ttf
new file mode 100644
index 0000000..847047e
Binary files /dev/null and b/dev/fonts/Lilex-Regular.ttf differ
diff --git a/dev/fonts/Lilex-Thin.ttf b/dev/fonts/Lilex-Thin.ttf
new file mode 100644
index 0000000..54e1a6f
Binary files /dev/null and b/dev/fonts/Lilex-Thin.ttf differ
diff --git a/dev/icon.jpg b/dev/icon.jpg
new file mode 100644
index 0000000..8756542
Binary files /dev/null and b/dev/icon.jpg differ
diff --git a/dev/index.html b/dev/index.html
index cecbb23..bf267eb 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -1,15 +1,30 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>jabuxas main page</title>
-    <link href="css/style.css" rel="stylesheet">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>jabuxas directions</title>
+    <link href="style.css" rel="stylesheet" />
 </head>
 
 <body>
-    <h1>hello world</h1>
+    <div class="container">
+        <div class="top-level">
+            <div>
+                <img src="./icon.jpg" alt="jabuxas' icon" />
+                <h2>jabuxas</h2>
+            </div>
+            <h2>====================</h2>
+        </div>
+        <div class="bottom-level">
+            <div>email</div>
+            <div>github</div>
+            <div>selfhosted gitea instance</div>
+            <div>paste</div>
+            <div>linkedin</div>
+        </div>
+    </div>
 </body>
 
 </html>
diff --git a/dev/style.css b/dev/style.css
new file mode 100644
index 0000000..16ef03a
--- /dev/null
+++ b/dev/style.css
@@ -0,0 +1,30 @@
+@font-face {
+    font-family: Lilex;
+    src: url(./fonts/Lilex-Regular.ttf);
+}
+
+body {
+    font-family: Lilex;
+    margin: 0;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+}
+
+img {
+    width: 150px;
+    border-radius: 50px;
+}
+
+.top-level div {
+    display: flex;
+    align-items: center;
+    gap: 2em;
+}
