diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index e69de29..ad2a1c8 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -0,0 +1,73 @@
+---
+const backgroundColor = "#ffd4de";
+const transPrideBlue =  "#5bcefa";
+const transPridePink =  "#f5a9b8";
+const transPrideWhite = "#ffffff";
+---
+
+<nav>
+	<h3>life of emma</h3>
+	<ul>
+		<li>
+			<a href="/life/self" target="_blank">
+				emma's self
+			</a>
+		</li>
+		<li>
+			<a href="/life/interests" target="_blank">
+				emma's interests
+			</a>
+		</li>
+		<li>
+			<a href="/life/sunshine" target="_blank">
+				emma's rays of sunshine
+			</a>
+		</li>
+	</ul>
+	<h3>site information</h3>
+	<ul>
+		<li><a href="/index">home</a></li>
+		<li><a href="/site/about" target="_blank">about</a></li>
+		<li><a href="/site/why" target="_blank">why</a></li>
+		<li><a href="/site/who" target="_blank">who</a></li>
+		<li><a href="/site/other" target="_blank">other emma things</a></li>
+		<li><a href="/site/contact" target="_blank">contact</a></li>
+		<li><a href="/site/changelog" target="_blank">changelog</a></li>
+	</ul>
+</nav>
+
+<style define:vars={{backgroundColor, transPrideBlue, transPridePink, transPrideWhite}}>
+    nav {
+        background-color: var(--backgroundColor);
+        grid-row: 2/3;
+        grid-column: 1/2;
+        justify-self: end;
+        align-self: end;
+        width: 20vw;
+        height: 85vh;
+        font-family: system-ui;
+        letter-spacing: 0.05rem;
+        padding-top: 0.75rem;
+        padding-left: 1.5rem;
+        padding-bottom: 0.5rem;
+        border-right: 10px solid;
+        border-image-slice: 1;
+        border-width: 5px;
+        border-image-source: linear-gradient(
+            to bottom,
+            var(--transPrideBlue) 0 20%,
+            var(--transPridePink) 20% 40%,
+            var(--transPrideWhite) 40% 60%,
+            var(--transPridePink) 60% 80%,
+            var(--transPrideBlue) 80%
+        );
+    }
+
+    nav ul li {
+        padding-bottom: 0.5rem;
+    }
+
+    nav ul li a {
+        font-size: 1rem;
+    }
+</style>
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
index 9685d1a..31b1725 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -27,9 +27,6 @@
   --disability-pride-white-light: #e8e8e8;
   --disability-pride-blue-light: #7bc2e0;
   --disability-pride-green-light: #3bb07d;
-  --trans-pride-blue-light: #5bcefa;
-  --trans-pride-pink-light: #f5a9b8;
-  --trans-pride-white-light: #ffffff;
 }
 
 *,
@@ -72,18 +69,14 @@ details {
   margin: 0.5rem;
 }
 
-main,
-nav {
-  padding-bottom: 0.5rem;
-  font-family: system-ui;
-  letter-spacing: 0.05rem;
-}
-
 main {
   background-color: var(--background-color);
   height: 85vh;
   width: 60vw;
   padding-left: 2.5rem;
+  padding-bottom: 0.5rem;
+  font-family: system-ui;
+  letter-spacing: 0.05rem;
   overflow: auto;
   scrollbar-width: thin;
   scrollbar-color: var(--scroll-gutter) var(--scroll-bar);
@@ -149,29 +142,6 @@ footer {
   gap: 0.75rem;
 }
 
-nav {
-  background-color: var(--background-color);
-  grid-row: 2/3;
-  grid-column: 1/2;
-  justify-self: end;
-  align-self: end;
-  width: 20vw;
-  height: 85vh;
-  padding-top: 0.75rem;
-  padding-left: 1.5rem;
-  border-right: 10px solid;
-  border-image-slice: 1;
-  border-width: 5px;
-  border-image-source: linear-gradient(
-    to bottom,
-    var(--trans-pride-blue-light) 0 20%,
-    var(--trans-pride-pink-light) 20% 40%,
-    var(--trans-pride-white-light) 40% 60%,
-    var(--trans-pride-pink-light) 60% 80%,
-    var(--trans-pride-blue-light) 80%
-  );
-}
-
 section {
   width: 55vw;
 }