diff --git a/styles/Components/navbar.module.css b/styles/Components/navbar.module.css
index 88aa580..ecbf786 100644
--- a/styles/Components/navbar.module.css
+++ b/styles/Components/navbar.module.css
@@ -1,134 +1,45 @@
-.container {
-    display: flex;
-    flex-direction: column;
-    justify-content: top;
-    align-items: center;
+.icon {
+    height: 32px;
+    margin: 0;
+    padding: 0;
+    width: 32px;
+}
 
+.container {
     position: fixed;
     top: 0;
-    left: 0;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    flex-direction: row;
+    gap: 10px;
+
+    height: 42px;
+    padding: 5px;
+    padding-left: 25px;
+
+    z-index: 69;
+}
+
+.divider {
+    height: 100%;
+    width: 3px;
+    border-radius: 100vh;
+    background-color: #424242;
+}
+
+.skipNav {
+    width: 0%;
     overflow: hidden;
-    margin: 20px;
-
-    width: 64px;
-    max-height: 64px;
-    padding-bottom: -1px;
-    height: auto;
-
-    border-radius: 32px;
-    transition: 0.5s ease-in-out;
-}
-.group {
-    display: flex;
-    flex-direction: column;
-    justify-content: top;
-    align-items: center;
-
-    background-color: var(--theme-ui-colors-cardBackground);
-    transition: background-color 0.3s ease-in-out;
-    backdrop-filter: blur(2px);
-    border-radius: 32px;
-
-    width: 64px;
-    margin-bottom: 20px;
-    padding-top: 7px;
+    color: white;
+    max-lines: 1;
+    text-overflow: clip;
+    -webkit-line-clamp: 1;
+    height: 20px;
+    transition: width 0.3s ease-in-out;
 }
 
-.headerIcon {
-    height: 64px;
-    width: 64px;
-    margin-bottom: 20px;
-    margin-right: 0;
-    margin-top: -7px;
-    border-radius: 50vw;
-
-    cursor: pointer;
-}
-
-.icon {
-    height: 50px;
-    width: 50px;
-    border-radius: 50vw;
-    margin-bottom: 5px;
-    cursor: pointer;
-    display: block;
-}
-
-.ThemeChangeButton {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.containerOpen {
-    max-height: 460px;
-}
-
-.containerDesktop {
-    animation-name: containerCloseOnStart;
-    animation-duration: 0.5s;
-    animation-direction: forwards;
-    animation-timing-function: ease-in-out;
-}
-
-@keyframes containerCloseOnStart {
-    from { max-height: 460px; }
-    to { max-height: 64px ; }
-}
-
-.containerDesktop:hover {
-    max-height: 460px;
-    animation-name: none;
-}
-
-@media screen and (min-width: 450px) {
-    .container {
-        flex-direction: row;
-        justify-content: left;
-
-        margin: 20px;
-
-        height: 64px;
-        max-width: 64px;
-        width: auto;
-        border-radius: 32px;
-
-        border-radius: 32px;
-        transition: 0.5s ease-in-out;
-    }
-    .group {
-        flex-direction: row;
-        justify-content: left;
-
-        height: 64px;
-        width: auto;
-        padding-right: 7px;
-        margin-bottom: 0;
-        padding-top: 7px;
-        margin-right: 20px;
-        padding-left: 3px;
-    }
-    .headerIcon {
-        height: 64px;
-        width: 64px;
-        margin-top: 12px;
-        margin-left: -3px;
-    }
-    .containerOpen {
-        max-width: 460px;
-        max-height: 64px;
-    }
-    .containerDesktop:hover {
-        max-width: 460px;
-        max-height: 64px;
-    }
-    .icon {
-        height: 50px;
-        width: 50px;
-        margin-left: 5px;
-    }
-    @keyframes containerCloseOnStart {
-        from { max-width: 460px; }
-        to { max-width: 64px ; }
-    }
-}
+.skipNav:focus {
+    width: 100%;
+    overflow: auto;
+}
\ No newline at end of file