diff --git a/fclauncher/frontend/src/App.svelte b/fclauncher/frontend/src/App.svelte
index 3fa73fe..b11c1f4 100644
--- a/fclauncher/frontend/src/App.svelte
+++ b/fclauncher/frontend/src/App.svelte
@@ -6,6 +6,7 @@
 	import { onMount } from 'svelte'
 	import { loading } from './global.ts'
 	import { slide } from 'svelte/transition'
+    import Navbar from './Navbar.svelte';
 
 	let width: int = 10
 	 	
@@ -17,7 +18,11 @@
 </script>
 
 <main>
-  <img alt="Wails logo" id="logo" src="{logo}">
+  <div>
+	<Navbar />
+  </div>
+  <body>
+	<img alt="Wails logo" id="logo" src="{logo}">
 	{#if $loading}
 		<div transition:slide="{{duration:100}}">
 			<Loading />
@@ -27,9 +32,17 @@
   		<Instances />
 		</div>
 	{/if}
+  	</body>	
 </main>
 
 <style>
+	:root{
+		font-size: 16px;
+		--text-primary: #b6b6b6;
+		--text-secondary: #ececec;
+		--bg-primary: #23232e;
+		--bg-secondary: #141418;
+	}
 
   #logo {
     display: block;
@@ -43,4 +56,14 @@
     background-origin: content-box;
   }
 
+  body{
+	margin-left: 5rem;
+  }
+
+  main{
+	
+  }
+
+
+
 </style>
diff --git a/fclauncher/frontend/src/Navbar.svelte b/fclauncher/frontend/src/Navbar.svelte
index e69de29..0a73f27 100644
--- a/fclauncher/frontend/src/Navbar.svelte
+++ b/fclauncher/frontend/src/Navbar.svelte
@@ -0,0 +1,35 @@
+<script>
+
+</script>
+
+<main>
+<nav class="navbar">
+    <ul class="navbar-nav">
+        <li class="nav-item">
+            <a href="#" class="nav-link">
+                
+                <span class="link-text">Test</span>
+            </a>
+
+        </li>
+
+    </ul>
+</nav>
+</main>
+
+<style>
+    :root{
+		font-size: 16px;
+		--text-primary: #b6b6b6;
+		--text-secondary: #ececec;
+		--bg-primary: #23232e;
+		--bg-secondary: #141418;
+	}
+
+    .navbar {
+        width: 5rem;
+        height: 100vh;
+        position: fixed;
+        background-color: var(--bg-primary);
+    }
+</style>
\ No newline at end of file
