diff --git a/styles/Components/card.module.css b/styles/Components/card.module.css
index 775be5c..5b269fa 100644
--- a/styles/Components/card.module.css
+++ b/styles/Components/card.module.css
@@ -33,11 +33,9 @@
 	margin: 100px;
 	transition: filter 0.3s ease-in-out;
 	transition: transform 0.15s ease-in-out;
-
-	transition: all 10s ease-in-out;
 }
 .card:hover {
-	transform: scale(1.025);
+	transform: translateY(-5px);
 	cursor: pointer;
 }
 
@@ -121,9 +119,6 @@
 }
 
 @media (max-width: 500px) {
-	.card {
-		height: 254px;
-	}
 }
 
 
diff --git a/styles/Components/header.module.css b/styles/Components/header.module.css
index d37417d..e37ea1c 100644
--- a/styles/Components/header.module.css
+++ b/styles/Components/header.module.css
@@ -1,11 +1,13 @@
 .backgroundImage {
 	position: absolute;
-	bottom: -10px;
-	width: calc(100% + 6px);
-	border-radius: 0 0 16.5px 16.5px;
+	bottom: 0;
+	/* bottom: 50vh;
+	transform: translateY(50%); */
+	width: 100%;
 	filter: var(--theme-ui-colors-cardFilter);
 	transition: filter 0.3s ease-in-out;
 }
+
 .backgroundGradient {
 	position: absolute;
 	bottom: 0;
@@ -53,6 +55,7 @@
     color: var(--theme-ui-colors-text);
 	transition: color 0.3s ease-in-out;
 	word-break: break-word;
+	font-variant-ligatures: none;
 }
 
 .subtext {
@@ -70,52 +73,33 @@
     margin-bottom: 40px;
 }
 
-@keyframes arrow-slide {
-    0% {
-        -webkit-transform: translateY(0);
-                transform: translateY(0);
-    }
-    50% {
-        -webkit-transform: translateY(-1em);
-                transform: translateY(-1em);
-    }
-    100% {
-        -webkit-transform: translateY(0);
-                transform: translateY(0);
-    }
-}
-.arrow {
-    -webkit-animation: arrow-slide 2s ease-in-out infinite both;
-            animation: arrow-slide 2s ease-in-out infinite both;
-}
-
-.arrowSpan {
-    position: absolute;
-    bottom: min(10vh, 1em);
-    width: 100%;
-    text-align: center;
-}
-
-.arrowHidden {
-    display: none;
-}
-
 .buttonLayout {
 	display: flex;
 	flex-direction: row;
+	justify-content: flex-start;
+	align-items: center;
+	flex-wrap: nowrap;
+	height: fit-content;
+}
+.buttonOverflow {
+	display: flex;
+	flex-direction: row;
 	justify-content: flex-end;
 	align-items: center;
-	flex-wrap: wrap;
-	padding: 0px;
+	overflow-x: hidden;
+	flex-wrap: nowrap;
 	position: absolute;
 	bottom: 5px;
 	right: 5px;
+	width: calc(100% - 10px);
+	height: auto;
+	border-radius: 10px;
 }
 
 .button {
 	display: flex;
 	flex-direction: row;
-	align-items: flex-start;
+	align-items: flex-end;
 	justify-content: right;
 	position: static;
 	flex: none;
@@ -126,3 +110,35 @@
 	padding: 5px 10px;
 	border-radius: 8px;
 }
+
+.titleContainer {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	flex-wrap: wrap;
+	padding: 0px;
+}
+
+.headerImage {
+	width: auto;
+	height: 64px;
+	object-fit: cover;
+	object-position: center;
+	transition: filter 0.3s ease-in-out;
+	margin-bottom: 20px;
+}
+
+.indicator {
+	height: auto;
+	width: 24px;
+	margin-inline: 5px;
+	padding: 0;
+}
+
+.leftArrow {
+	transform: rotate(90deg);
+}
+.rightArrow {
+	transform: rotate(270deg);
+}
\ No newline at end of file
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
diff --git a/styles/Components/panels.module.css b/styles/Components/panels.module.css
index 2229866..35096b2 100644
--- a/styles/Components/panels.module.css
+++ b/styles/Components/panels.module.css
@@ -12,8 +12,6 @@
 
     background-color: var(--theme-ui-colors-panelColor);
     border-radius: 20px;
-    transition: background-color 0.3s ease-in-out;
-
 }
 
 .doublePanel {
@@ -51,7 +49,7 @@
 
 .title {
     width: 100%;
-    font-size: max(2em, 3.25vw);
+    font-size: min(max(2em, 3.25vw), 4em);
     margin: 0;
     color: var(--theme-ui-colors-text);
     transition: color 0.3s ease-in-out;
diff --git a/styles/Components/texttools.module.css b/styles/Components/texttools.module.css
index b07fd6d..76857b9 100644
--- a/styles/Components/texttools.module.css
+++ b/styles/Components/texttools.module.css
@@ -3,7 +3,7 @@
     width: 15px !important;
     position: relative;
     border-radius: 5px;
-    border: solid 4px #000;
+    border: solid 3px #000;
 }
 
 .list {