diff --git a/Cargo.lock b/Cargo.lock
index a3b8947..537a738 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -60,6 +60,12 @@ dependencies = [
  "tracing",
 ]
 
+[[package]]
+name = "bitflags"
+version = "2.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "812e12b5285cc515a9c72a5c1d3b6d46a19dac5acfef5265968c166106e31dd3"
+
 [[package]]
 name = "bytes"
 version = "1.11.0"
@@ -90,6 +96,12 @@ version = "0.3.31"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "05f29059c0c2090612e8d742178b0580d2dc940c837851ad723096f87af6663e"
 
+[[package]]
+name = "futures-sink"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e575fab7d1e0dcb8d0c7bcf9a63ee213816ab51902e6d244a95819acacf1d4f7"
+
 [[package]]
 name = "futures-task"
 version = "0.3.31"
@@ -108,6 +120,15 @@ dependencies = [
  "pin-utils",
 ]
 
+[[package]]
+name = "getopts"
+version = "0.2.24"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cfe4fbac503b8d1f88e6676011885f34b7174f46e59956bba534ba83abded4df"
+dependencies = [
+ "unicode-width",
+]
+
 [[package]]
 name = "http"
 version = "1.4.0"
@@ -141,6 +162,12 @@ dependencies = [
  "pin-project-lite",
 ]
 
+[[package]]
+name = "http-range-header"
+version = "0.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9171a2ea8a68358193d15dd5d70c1c10a2afc3e7e4c5bc92bc9f025cebd7359c"
+
 [[package]]
 name = "httparse"
 version = "1.10.1"
@@ -208,6 +235,15 @@ version = "0.4.29"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5e5032e24019045c762d3c0f28f5b6b8bbf38563a65908389bf7978758920897"
 
+[[package]]
+name = "markdown"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a5cab8f2cadc416a82d2e783a1946388b31654d391d1c7d92cc1f03e295b1deb"
+dependencies = [
+ "unicode-id",
+]
+
 [[package]]
 name = "matchit"
 version = "0.8.4"
@@ -226,6 +262,16 @@ version = "0.3.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6877bb514081ee2a7ff5ef9de3281f14a4dd4bceac4c09388074a6b5df8a139a"
 
+[[package]]
+name = "mime_guess"
+version = "2.0.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f7c44f8e672c00fe5308fa235f821cb4198414e1c77935c1ab6948d3fd78550e"
+dependencies = [
+ "mime",
+ "unicase",
+]
+
 [[package]]
 name = "mio"
 version = "1.1.1"
@@ -270,6 +316,25 @@ dependencies = [
  "unicode-ident",
 ]
 
+[[package]]
+name = "pulldown-cmark"
+version = "0.13.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e8bbe1a966bd2f362681a44f6edce3c2310ac21e4d5067a6e7ec396297a6ea0"
+dependencies = [
+ "bitflags",
+ "getopts",
+ "memchr",
+ "pulldown-cmark-escape",
+ "unicase",
+]
+
+[[package]]
+name = "pulldown-cmark-escape"
+version = "0.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "007d8adb5ddab6f8e3f491ac63566a7d5002cc7ed73901f72057943fa71ae1ae"
+
 [[package]]
 name = "quote"
 version = "1.0.43"
@@ -355,7 +420,10 @@ name = "site"
 version = "0.1.0"
 dependencies = [
  "axum",
+ "markdown",
+ "pulldown-cmark",
  "tokio",
+ "tower-http",
 ]
 
 [[package]]
@@ -397,6 +465,7 @@ version = "1.49.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "72a2903cd7736441aac9df9d7688bd0ce48edccaadf181c3b90be801e81d3d86"
 dependencies = [
+ "bytes",
  "libc",
  "mio",
  "pin-project-lite",
@@ -416,6 +485,19 @@ dependencies = [
  "syn",
 ]
 
+[[package]]
+name = "tokio-util"
+version = "0.7.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9ae9cec805b01e8fc3fd2fe289f89149a9b66dd16786abd8b19cfa7b48cb0098"
+dependencies = [
+ "bytes",
+ "futures-core",
+ "futures-sink",
+ "pin-project-lite",
+ "tokio",
+]
+
 [[package]]
 name = "tower"
 version = "0.5.3"
@@ -432,6 +514,31 @@ dependencies = [
  "tracing",
 ]
 
+[[package]]
+name = "tower-http"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e9cd434a998747dd2c4276bc96ee2e0c7a2eadf3cae88e52be55a05fa9053f5"
+dependencies = [
+ "bitflags",
+ "bytes",
+ "futures-util",
+ "http",
+ "http-body",
+ "http-body-util",
+ "http-range-header",
+ "httpdate",
+ "mime",
+ "mime_guess",
+ "percent-encoding",
+ "pin-project-lite",
+ "tokio",
+ "tokio-util",
+ "tower-layer",
+ "tower-service",
+ "tracing",
+]
+
 [[package]]
 name = "tower-layer"
 version = "0.3.3"
@@ -464,12 +571,30 @@ dependencies = [
  "once_cell",
 ]
 
+[[package]]
+name = "unicase"
+version = "2.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dbc4bc3a9f746d862c45cb89d705aa10f187bb96c76001afab07a0d35ce60142"
+
+[[package]]
+name = "unicode-id"
+version = "0.3.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "70ba288e709927c043cbe476718d37be306be53fb1fafecd0dbe36d072be2580"
+
 [[package]]
 name = "unicode-ident"
 version = "1.0.22"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9312f7c4f6ff9069b165498234ce8be658059c6728633667c526e27dc2cf1df5"
 
+[[package]]
+name = "unicode-width"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b4ac048d71ede7ee76d585517add45da530660ef4390e49b098733c6e897f254"
+
 [[package]]
 name = "wasi"
 version = "0.11.1+wasi-snapshot-preview1"
diff --git a/Cargo.toml b/Cargo.toml
index 136c00a..65c52f2 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -5,4 +5,7 @@ edition = "2024"
 
 [dependencies]
 axum = "0.8.8"
+markdown = "1.0.0"
+pulldown-cmark = "0.13.0"
 tokio = { version = "1.49.0", features = ["macros", "rt-multi-thread"] }
+tower-http = { version = "0.5", features = ["fs"] }
diff --git a/src/main.rs b/src/main.rs
index 23bfecc..2fd7a15 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -3,17 +3,20 @@ use axum::{
     Router,
     response::Html,
 };
+use tower_http::services::ServeDir;
 
 #[tokio::main]
 async fn main() {
-    let site = Router::new().route("/", get(root));
+    let site = Router::new()
+        .route("/", get(home))
+        .nest_service("/static", ServeDir::new("static"));
 
     let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();
     println!("Running on http://127.0.0.1:3000");
     axum::serve(listener, site).await.unwrap();
 }
 
-async fn root() -> Html<&'static str> {
-    const HTML: &str = include_str!("../static/root.html");
+async fn home() -> Html<&'static str> {
+    const HTML: &'static str = include_str!("../static/home.html");
     Html(HTML)
-}
\ No newline at end of file
+}
diff --git a/static/ethnocentric.otf b/static/ethnocentric.otf
new file mode 100644
index 0000000..c1dadc8
Binary files /dev/null and b/static/ethnocentric.otf differ
diff --git a/static/root.html b/static/home.html
similarity index 93%
rename from static/root.html
rename to static/home.html
index 52f55a5..57fe883 100644
--- a/static/root.html
+++ b/static/home.html
@@ -1,32 +1,50 @@
 <!doctype html>
 <html lang="en">
-    <head>
+<head>
+	<link rel="stylesheet" href="/static/style.css"
+	<meta charset="utf-8"/>
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
 
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="stylesheet" href="style.css"
-    </head>
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap" rel="stylesheet">
+</head>
 <body>
-<div class="align-right card">
-	<p id="HeyIm">Hey! My name is</p>
-	<span use:animateTyping={["Jeremy Janella  "]} id="jeremymaxxing"></span>
-	<p style="padding: 12px;">
-		An experienced cybersecurity analyst and full stack developer with a
-		certificate in penetration testing.
-		<span style="color: orangered;">Co-Op Computer Science Student</span> at
-		the <span style="color: orangered;"> University of Toronto</span> specializing
-		in Software Engineering, with a major in statistics and minor in astrophysics.
-		Active in CTFs, hackathons, programming competitions, and developing a videogame.
-	</p>
-	<p>
-		This site is still being ported! More of my projects are listed on my <a
-			href="./resume.pdf">resume</a
-		>
-	</p>
-	<!-- <p>Computer nerd, gamer, mountain biker, adventurer, hard sci-fi enjoyer, ethics enjoyer, swimmer, jumper</p> -->
-</div>
+	<header>
+		<nav>
+			<ul>
+				<li>Posts</li>
+				<li>Contact</li>
+			</ul>
+		</nav>
+  	</header>
+	<div>
+		<p id="name">Jeremy Janella</p>
+		<h3>About me</h3>
+		<!-- <p>Computers, mountain bikes, adventurer, hard sci-fi enjoyer, ethics, swimming, jumper</p> -->
+	</div>
+</body>
+</html>
 
-<div id="Game" class="align-left card">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<!-- <div id="Game" class="align-left card">
 	<h1>Game Development</h1>
 	<div style="float: right; padding: 20px; width: 10vw;">
 		<img
@@ -356,6 +374,4 @@
 		students, as well as providing direction for first year students within
 		the programs.
 	</p>
-</div>
-</body>
-</html>
\ No newline at end of file
+</div> -->
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..6869cfc
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,59 @@
+@font-face {
+  font-family: 'Ethnocentric';
+  src: url('/static/ethnocentric.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap; /* Shows fallback font until custom font loads */
+}
+
+
+header {
+  background-color: transparent; /* Light grey background */
+  border-bottom: 1px solid #ddd;
+  padding: 1rem 1rem;
+}
+
+nav {
+  display: flex; /* Aligns logo and menu horizontally */
+  justify-content: space-between; /* Pushes logo to left, menu to right */
+  align-items: center;
+  max-width: 1000px;
+  margin: 0 auto; /* Centers the header content */
+}
+
+nav ul {
+  list-style: none; /* Removes bullet points */
+  display: flex;
+  gap: 20px; /* Space between links */
+  margin: 0;
+  padding: 0;
+}
+
+#name {
+    font-size: 3rem;
+    margin: 20px;
+    padding: 0px;
+    text-shadow:
+        1px 1px orangered,
+        2px 2px yellow,
+        3px 3px green,
+        4px 4px cornflowerblue;
+    letter-spacing: 2px;
+    width: fit-content;
+    color: whitesmoke;
+    font-family: "Ethnocentric", sans-serif;
+}
+
+nav a {
+  text-decoration: none;
+  color: #333;
+  font-family: sans-serif;
+}
+
+nav a:hover {
+  color: #007bff; /* Changes color when you hover */
+}
+
+body {
+    background-color: #111;
+}