diff --git a/src/components/Intro.astro b/src/components/Intro.astro
index c4f9d96..8736aac 100644
--- a/src/components/Intro.astro
+++ b/src/components/Intro.astro
@@ -9,7 +9,7 @@ import BoxLines from "./BoxLines.astro";
 	<div class="flex flex-col sm:min-h-[50vh]">
 		<div class="mb-14 w-full sm:mb-40">
 			<div
-				class="relative mb-2 flex flex-wrap border-divider [&_svg]:nk-transition sm:mb-8 [&_svg]:ml-[-1px] [&_svg]:mt-[-1px] [&_svg]:h-full [&_svg]:w-[calc(100vw-16px)] [&_svg]:stroke-[hsl(var(--border-divider))] [&_svg]:stroke-[0.5px] sm:[&_svg]:max-w-screen-sm md:[&_svg]:max-w-screen-md lg:[&_svg]:max-w-screen-lg xl:[&_svg]:max-w-screen-xl 2xl:[&_svg]:max-w-screen-2xl [&_svg_path]:animate-[dashForward_1.5s_cubic-bezier(0.55,0,1,0.45)_forwards] [&_svg_path]:[stroke-dasharray:1000] [&_svg_path]:[stroke-dashoffset:1000] hover:[&_svg_path]:animate-[flicker_0.3s_cubic-bezier(0.55,0,1,0.45)_forwards]"
+				class="relative mb-2 flex flex-wrap border-divider [&_svg]:nk-transition sm:mb-8 [&_svg]:ml-[-1px] [&_svg]:mt-[-1px] [&_svg]:h-full [&_svg]:w-[calc(100vw-16px)] [&_svg]:stroke-[hsl(var(--border-divider))] [&_svg]:stroke-[0.5px] sm:[&_svg]:max-w-screen-sm md:[&_svg]:max-w-screen-md lg:[&_svg]:max-w-screen-lg xl:[&_svg]:max-w-screen-xl 2xl:[&_svg]:max-w-screen-2xl [&_svg_path]:animate-[dashForward_1.5s_cubic-bezier(0.55,0,1,0.45)_forwards] [&_svg_path]:[stroke-dasharray:1000] [&_svg_path]:[stroke-dashoffset:1000]"
 			>
 				<div
 					class="relative mb-2 sm:mb-4 [&::after]:absolute [&::after]:bottom-[-1px] [&::after]:left-0 [&::after]:block [&::after]:h-[1px] [&::after]:w-full [&::after]:animate-[borderForward_.7s_cubic-bezier(0.55,0,1,0.45)_forwards] [&::after]:bg-divider [&::after]:content-[''] [&::before]:left-0 [&::before]:top-0 [&::before]:block [&::before]:h-[1px] [&::before]:w-full [&::before]:animate-[borderForward_.7s_cubic-bezier(0.55,0,1,0.45)_forwards] [&::before]:bg-divider [&::before]:content-['']"
diff --git a/src/components/Section.astro b/src/components/Section.astro
index 4c0f5b1..24f543a 100644
--- a/src/components/Section.astro
+++ b/src/components/Section.astro
@@ -8,19 +8,20 @@ import Contact from "@/assets/contact.svg?raw";
 ---
 
 <div
-	x-data="{ inview: false }"
+	x-data="{ inview: false, inscrollup: false }"
 	x-ref="sectionTitle"
 	class="nk-transition border-x"
 	{...rest}
-	@scroll.window=`inview = $refs.sectionTitle.getBoundingClientRect().top <= (window.innerHeight * 4/5) && $refs.sectionTitle.getBoundingClientRect().top >= 100`
-	x-init=`inview = $refs.sectionTitle.getBoundingClientRect().top <= (window.innerHeight * 3/4)`
+	@scroll.window=`inview = $refs.sectionTitle.getBoundingClientRect().top <= (window.innerHeight * 4/5) && $refs.sectionTitle.getBoundingClientRect().top >= 100, inscrollup = $refs.sectionTitle.getBoundingClientRect().top <= (window.innerHeight * 4/5)`
+	x-init=`inview = $refs.sectionTitle.getBoundingClientRect().top <= (window.innerHeight * 3/4), inscrollup = $refs.sectionTitle.getBoundingClientRect().top <= (window.innerHeight * 4/5)`
 >
 	<div class="nk-transition flex min-h-[50vh] flex-col" x-ref={title}>
 		<div class="relative w-max">
 			<BoxLines />
 			<div
-				class="nk-transition relative w-[fit-content] text-textProminent [&>svg]:h-8 sm:[&>svg]:h-14 md:[&>svg]:h-16 lg:[&>svg]:h-20 xl:[&>svg]:h-28 2xl:[&>svg]:h-32 [&_svg]:stroke-[hsl(var(--border-divider))] [&_svg]:stroke-[1px] [&_svg_path]:[stroke-dasharray:1000] [&_svg_path]:[stroke-dashoffset:1000]"
+				class="nk-transition relative w-[fit-content] text-textProminent opacity-0 [&>svg]:h-8 sm:[&>svg]:h-14 md:[&>svg]:h-16 lg:[&>svg]:h-20 xl:[&>svg]:h-28 2xl:[&>svg]:h-32 [&_svg]:stroke-[hsl(var(--border-divider))] [&_svg]:stroke-[1px] [&_svg_path]:opacity-0 [&_svg_path]:[stroke-dasharray:1000] [&_svg_path]:[stroke-dashoffset:1000]"
 				:class="inview ? '[&_svg_path]:animate-[dashForward_1s_cubic-bezier(0.55,0,1,0.45)_forwards]' : '[&_svg_path]:animate-[dashBackward_2s_cubic-bezier(0.55,0,1,0.45)_forwards]'"
+				:style="inscrollup && { opacity: 1 }"
 			>
 				<Fragment
 					set:html={title === "about"
diff --git a/src/components/Settings.astro b/src/components/Settings.astro
index 74a935b..5856ebe 100644
--- a/src/components/Settings.astro
+++ b/src/components/Settings.astro
@@ -19,10 +19,10 @@ import ThemeToggle from "./ThemeToggle.astro";
 	:class="{ 'translate-x-0': $store.settings.open, 'translate-x-[100%]': !$store.settings.open }"
 >
 	<div class="flex h-full flex-col">
-		<div class="[&::after]:bg-bgDivider relative flex h-6 justify-between border-b sm:h-8">
+		<div class="[&::after]:bg-bgDivider relative flex h-6 justify-between border-y px-2 sm:h-8">
 			<h3 class="text-textProminent">Settings</h3>
 			<button
-				class="relative flex h-5 items-center justify-center text-textProminent sm:h-8 sm:w-8"
+				class="relative flex h-full items-center justify-center text-textProminent"
 				type="button"
 				@click="$store.settings.toggle()"
 			>
@@ -34,9 +34,9 @@ import ThemeToggle from "./ThemeToggle.astro";
 				<!-- <p class="text-textProminent">Theme</p> -->
 				<ThemeToggle />
 			</div>
-			<div class="flex items-center justify-between pb-2">
+			<div class="flex items-center justify-between px-2 pb-2">
 				<button
-					class="disabled relative flex h-5 w-full items-center justify-between text-textProminent line-through sm:h-7 sm:w-full"
+					class="disabled relative flex h-full w-full items-center justify-between text-textProminent line-through"
 					type="button"
 					@click=""
 					disabled
@@ -44,7 +44,7 @@ import ThemeToggle from "./ThemeToggle.astro";
 					<p class="text-textProminent">Party Mode (Coming soon)</p>
 					<Icon
 						aria-hidden="true"
-						class="mr-1 h-5 w-5 sm:h-7 sm:w-7"
+						class="h-5 w-5 sm:h-7 sm:w-7"
 						focusable="false"
 						name="mdi:party-popper"
 					/>
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index cd7fc10..393327e 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -1,5 +1,5 @@
 <button
-	class="relative flex h-7 w-full items-center justify-between text-textProminent"
+	class="relative flex h-7 w-full items-center justify-between px-2 text-textProminent"
 	type="button"
 	x-data
 	@click="$store.theme.toggleMode()"
@@ -8,7 +8,7 @@
 	<p class="text-textProminent dark:hidden">Dark</p>
 	<svg
 		aria-hidden="true"
-		class="mr-1 h-5 w-5 duration-0 dark:hidden sm:h-6 sm:w-6"
+		class="h-5 w-5 duration-0 dark:hidden sm:h-6 sm:w-6"
 		fill="none"
 		focusable="false"
 		id="sun-svg"
diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro
index 9e940d4..95e684c 100644
--- a/src/components/layout/Header.astro
+++ b/src/components/layout/Header.astro
@@ -21,7 +21,7 @@ import NK from "@/assets/nk.svg?raw";
 		<!-- <ThemeToggle /> -->
 		<div class="animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_1s_forwards] bg-bgColor opacity-0">
 			<button
-				class="relative flex h-full w-full items-center justify-center text-textProminent sm:h-[2rem-2px] sm:w-[2rem-2px]"
+				class="relative flex h-full w-full items-center justify-center text-textProminent"
 				type="button"
 				x-data
 				@click="$store.settings.toggle()"
diff --git a/tailwind.config.ts b/tailwind.config.ts
index e38975d..e9b3d79 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -60,7 +60,7 @@ export default {
 				"button:not(.disabled)": {
 					"@apply redact": {},
 					"&::after": {
-						"@apply translate-x-[100%] w-[calc(100%+8px)] h-[calc(100%+16px)] w-full h-full top-0 left-0 duration-300": {},
+						"@apply translate-x-[100%] w-[calc(100%+8px)] h-[calc(100%+16px)] w-full h-full top-0 left-0 duration-300 scale-x-0": {},
 					},
 					"&:hover::after": {
 						"@apply md:scale-x-100 md:translate-x-0": {},
@@ -108,33 +108,39 @@ export default {
 					"50%": {
 						strokeDashoffset: "0",
 						stroke: "hsl(var(--border-divider) / 1)",
-						color: "transparent"
+						color: "transparent",
+						opacity: "1",
 					},
 					"80%": {
 						strokeDashoffset: "0",
 						stroke: "hsl(var(--border-divider) / 1)",
-						color: "transparent"
+						color: "transparent",
+						opacity: "1",
 					},
 					"100%": {
 						strokeDashoffset: "0",
 						stroke: "transparent",
-						color: "hsl(var(--text-prominent) / 1)"
+						color: "hsl(var(--text-prominent) / 1)",
+						opacity: "1",
 					},
 				},
 				dashBackward: {
 					"0%": {
 						strokeDashoffset: "0",
 						stroke: "transparent",
-						color: "hsl(var(--text-prominent) / 1)"
+						color: "hsl(var(--text-prominent) / 1)",
+						opacity: "1",
 					},
 					"20%": {
 						stroke: "hsl(var(--border-divider) / 1)",
-						color: "transparent"
+						color: "transparent",
+						opacity: "1",
 					},
 					"100%": {
 						strokeDashoffset: "1000",
 						stroke: "hsl(var(--border-divider) / 1)",
 						color: "transparent",
+						opacity: "1",
 					},
 				},
 				flicker: {