diff --git a/fclauncher/frontend/src/App.svelte b/fclauncher/frontend/src/App.svelte
index 34be3fa..837b587 100644
--- a/fclauncher/frontend/src/App.svelte
+++ b/fclauncher/frontend/src/App.svelte
@@ -4,7 +4,7 @@
 	import Loading from './Loading.svelte'
   import {CheckPrerequisites} from '../wailsjs/go/main/App.js'
 	import { onMount } from 'svelte'
-	import { loading, testPage } from './global'
+	import { loading, testPage, navMargin } from './global'
 	import { slide } from 'svelte/transition'
     import Navbar from './Navbar.svelte'
 	import Testpage from './Testpage.svelte'
diff --git a/fclauncher/frontend/src/Navbar.svelte b/fclauncher/frontend/src/Navbar.svelte
index 5ee9d3e..34b33f4 100644
--- a/fclauncher/frontend/src/Navbar.svelte
+++ b/fclauncher/frontend/src/Navbar.svelte
@@ -1,9 +1,18 @@
 <script lang="ts" src="https://kit.fontawesome.com/172593a6a5.js" crossorigin="anonymous">
-import {addingInstance, testPage} from './global'
+    import { main } from '../wailsjs/go/models';
+import {addingInstance, testPage, navMargin} from './global'
+
+function extend(){
+    $navMargin = 17;
+}
+
+function unextend(){
+    $navMargin = 6;
+}
 </script>
 
 <main>
-<nav class="navbar">
+<nav class="navbar" id="navbar" on:mouseover={extend} on:focus={extend} on:mouseleave={unextend}>
     <ul class="navbar-nav">
         <li class="logo">
             <a href="#" class="nav-link">
diff --git a/fclauncher/frontend/src/Testpage.svelte b/fclauncher/frontend/src/Testpage.svelte
index 6da8b94..d448518 100644
--- a/fclauncher/frontend/src/Testpage.svelte
+++ b/fclauncher/frontend/src/Testpage.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
 import {LaunchInstance} from '../wailsjs/go/main/InstanceManager';
-import {instances, loading} from './global'
+import {instances, loading, navMargin} from './global'
     var testArray = ["test","test2","test3"];
 
     let pack: string = "";
     let instance: string
     let radio: string = "";
+    let marginScale: string= $navMargin + "rem";
 
     function launchclick(event) {
 		$loading = true
@@ -17,7 +18,9 @@ import {instances, loading} from './global'
 </script>
 
 
-<main>
+<main style="margin-left: {marginScale};">
+    <div class="header">
+        <div>Instances</div>
     <div class="container">
         <div class="tile-group">
             {#each $instances as instance}
@@ -32,8 +35,9 @@ import {instances, loading} from './global'
             
         </div>
     </div>
+    </div>
     <div class="options-container">
-        <button class="launch-button" on:click={launchclick}>Launch {radio}</button>
+        <button class="launch-button" on:click={launchclick}>Launch {$navMargin}</button>
         </div>
 </main>
 <style>
@@ -51,31 +55,31 @@ body{
 main{
     display: flex;
     flex-direction: row;
-    justify-content: right;
+}
+
+.header{
+    flex: 3;
 }
 .options-container{
     display: flex;
     height: 100vh;
-    width: 20rem;
-    border: green 2px;
     justify-self: right;
     justify-content: center;
     align-items: center;
+    width: 15rem;
 }
 .launch-button{
     height: 3rem;
 }
 .container{
    display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  min-width: 70%;
+   min-height: fit-content;
 }
 .tile-group{
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
+    flex: 1;
+    flex-grow:1 ;
 }
 .input-container{
     position: relative;
diff --git a/fclauncher/frontend/src/global.ts b/fclauncher/frontend/src/global.ts
index 2bc5a2f..b37c60b 100644
--- a/fclauncher/frontend/src/global.ts
+++ b/fclauncher/frontend/src/global.ts
@@ -2,4 +2,5 @@ import { writable } from "svelte/store"
 export const loading = writable(true)
 export const addingInstance = writable(false)
 export const testPage = writable(false)
-export const instances = writable([])
\ No newline at end of file
+export const instances = writable([])
+export const navMargin = writable(3)
\ No newline at end of file