diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 633a5df..820becd 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,47 +1,135 @@
 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+    <ul style="padding-top:60px"class="vertical">
+        <li style="margin-top: 25px;" ><a href="#Messages"><item class="fa-solid fa-comment" style="font-size: 40px;" ></item>
+            <div class="text">Messages</div> </a></li>
+        <li ><a href="#Notifications"><item class="fa-solid fa-bell" style="font-size: 40px;" ></item>
+            <div class="text">Notifications</div></a></li>
+        <li ><a href="#Schedule"><item class="fa-solid fa-calendar-days" style="font-size: 40px;" ></item>
+            <div class="text">Schedules</div></a></li>
+        <li ><a href="#Forum"><item class="fa-solid fa-envelope" style="font-size: 40px;" ></item>
+            <div class="text">Forum</div></a></li>
+    </ul>
 
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+    <ul class="horizontal" style="box-shadow: 0px 3px 3px rgb(0, 0, 0);">
+        <li title="Home">
+            <a href="#home">
+                <img  src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
+            </a>
+        </li>
+        <li title="Home">
+            <a href="#home">
+                <item class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></item>
+            </a>
+        </li>
+        <li style="float: right;" title="Account">
+            <a href="#Account"> 
+                <item class="fa-solid fa-user"  style="margin-top: 7px; margin-bottom: 3px;"></item>
+            </a></li>
+        <li style="float: right;" title="Notifications">
+            <a href="#Notifications">
+                <item class="fa-solid fa-bell"  style="margin-top: 7px; margin-bottom: 3px;"></item>
+            </a></li>
+        <li style="float: right;" title="Options">
+            <a href="#Options">
+                <item  class="fa-solid fa-gear"  style="margin-top: 7px; margin-bottom: 3px;"></item>
+            </a></li>
+    </ul>
 </template>
 
 <style scoped>
-header {
-  line-height: 1.5;
-}
+	ul.vertical{
+		list-style-type: none;
+		margin: 0;
+		padding: 0;
+		width: 70px ;
+		background-color: rgb(53, 53, 53);
+		border-right:5px;
+		border-color:black;
+		height: 100%;
+		position: fixed;
+		overflow:auto;
+		transition-duration: .3s;
+	}
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
+	li a{
+		display: flex;
+		padding: 8px 16px;
+		color:rgb(255, 255, 255);
+		text-decoration: none;
+	}
 
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
+	ul.vertical li a:hover:not(.active) {
+		background-color: rgb(112, 112, 112);
+		border-radius:6px;
+		color: white;
+		
+		transform: translate(0px ,1px);
+	}
 
-  .logo {
-    margin: 0 2rem 0 0;
-  }
+	ul.vertical li a.active {
+		background-color: rgb(239, 60, 168);
+		border-radius:6px;
+	}
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
+	ul.horizontal li a.active {
+	  background-color: rgb(57, 57, 57);
+	  border-radius:6px;
+	}
+	ul.horizontal {
+		z-index: 101;
+		display: block ;
+		list-style-type:none;
+		margin:0;
+		padding: 0;
+		top: 0; 
+		position: fixed;
+		height:61px;
+		width: 100%;
+		overflow: hidden;
+		background-color: rgb(24, 24, 24);
+	}
+
+	ul.horizontal li {
+		font-size: 35px;
+		float: left;
+		align-items: center;
+	}
+
+
+	ul.horizontal li a:hover:not(.active){
+		background-color: black;
+		border-radius:6px;
+		color:white;
+		transform: translate(0px ,1px);
+		
+	}
+
+	  ul.vertical:hover {
+		z-index: 100;
+		width: 250px;
+		border-radius: 40px;
+		transition-duration: .3s;
+
+	  }
+
+	  .text {
+		position: absolute;
+		right: 0%;
+		width: 0%;
+		opacity: 0;
+		color: white;
+		font-size: 1.2em;
+		font-weight: 600;
+		transition-duration: .3s;
+	  }
+
+	  ul.vertical:hover .text {
+		opacity: 1;
+		width: 70%;
+		transition-duration: .3s;
+		padding-left: 5px;
+	  }
 </style>
diff --git a/frontend/src/assets/Clyde.png b/frontend/src/assets/Clyde.png
new file mode 100644
index 0000000..a8ac27f
Binary files /dev/null and b/frontend/src/assets/Clyde.png differ
diff --git a/frontend/src/assets/logo.svg b/frontend/src/assets/logo.svg
deleted file mode 100644
index 7565660..0000000
--- a/frontend/src/assets/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 36fb845..6a52f86 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -1,35 +1,5 @@
-@import './base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
+body {
+   background-color: rgb(53, 25, 60);
+   margin:0;
 }
 
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}