diff --git a/assets/scss/home.scss b/assets/scss/home.scss
index 51abe43..1be1398 100644
--- a/assets/scss/home.scss
+++ b/assets/scss/home.scss
@@ -19,7 +19,8 @@
     font-family: "playfair";
     font-size: 2rem;
     height: 100vh;
-    color: var(--text-accent);
+    color: var(--vriish-gradient-text);
+    mask: var(--vriish-waves);
     h1 {
         letter-spacing: 0.5rem;
         font-size: 7rem;
diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss
index 2d62fc2..ce15797 100644
--- a/assets/scss/partials/sidebar.scss
+++ b/assets/scss/partials/sidebar.scss
@@ -17,6 +17,18 @@
 	border-radius: 0 2rem 2rem 0;
 	border: 1px solid var(--sidebar-border);
 	border-left: 0;
+	overflow: hidden;
+	@media (max-width: 1040px) {
+		top: auto;
+		bottom: 0;
+		border-radius: 2rem 2rem 0 0;
+		flex-direction: row;
+		width: calc(100vw - 1rem);
+		height: 5rem;
+		margin: 0 0.5rem;
+		overflow-y: hidden;
+		overflow-x: scroll;
+	}
 	header {
 		text-align: center;
 		user-select: none;
@@ -37,6 +49,11 @@
 			list-style: none;
 			padding: 0;
 			margin: 0;
+			@media (max-width: 1040px) {
+				display: flex;
+				flex-direction: row;
+				height: 100%;
+			}
 		}
 		li {
 			border-radius: 0.5em;
@@ -49,13 +66,16 @@
 			align-items: center;
 			justify-content: center;
 			transition: background-color 0.2s linear;
+			@media (max-width: 1040px) {
+				margin: 0 0.5rem;
+			}
 			a {
 				display: block;
 				padding: .25em .5em;
 				line-height: 4rem;
 			}
 			&::after {
-				background-color: var(--sidebar-accent);
+				background-color: var(--sidebar-accent-1);
 				bottom: 0;
 				content: "";
 				height: 100%;
@@ -69,12 +89,12 @@
 				transition: left 0.5s ease-out, opacity 0.5s ease-out, background-color 0.2s linear;
 			}
 			&.active {
-				background-color: var(--sidebar-accent);
+				background-color: var(--sidebar-accent-1);
 				&:hover {
-					background-color: var(--sidebar-accented);
+					background-color: var(--sidebar-accent-2);
 				}
 				&:active {
-					background-color: var(--sidebar-accentest);
+					background-color: var(--sidebar-accent-3);
 				}
 			}
 			&:hover {
@@ -85,7 +105,7 @@
 			}
 			&:active {
 				&::after {
-					background-color: var(--sidebar-accented);
+					background-color: var(--sidebar-accent-2);
 				}
 			}
 		}
@@ -123,7 +143,6 @@
 			pointer-events: none;
 			&:hover {
 				#languages {
-					//display: block;
 					bottom: 2em;
 					opacity: 100%;
 					pointer-events: all;
@@ -145,7 +164,6 @@
 				padding: 0;
 				user-select: none;
 				position: absolute;
-				//display: none;
 				bottom: 1em;
 				opacity: 0%;
 				transition: bottom .5s, opacity .5s;
diff --git a/assets/scss/shortcodes/verticalposts.scss b/assets/scss/shortcodes/verticalposts.scss
index 79aaf62..dd2a8c9 100644
--- a/assets/scss/shortcodes/verticalposts.scss
+++ b/assets/scss/shortcodes/verticalposts.scss
@@ -9,6 +9,7 @@
         overflow-x: scroll;
         scroll-snap-type: x proximity;
         .post-group {
+            color: var(--vriish-gradient-text);
             background: var(--vriish-gradient);
             border-radius: .5em;
             display: flex;
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index b034045..92aacf5 100644
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -3,7 +3,7 @@
 		$counter: $i * 50;
 		$saturation: 20% + $i * 2.5%;
 		$lightness: $i * 5%;
-		--primary-dark-#{$counter}: hsl(275, #{$saturation}, #{$lightness});
+		--primary-dark-#{$counter}: hsl(320, #{$saturation}, #{$lightness});
 	}
 
 	@for $i from 1 to 20 {
@@ -17,15 +17,15 @@
 	--border: var(--primary-dark-200);
 	
 	--text: var(--primary-light-950);
-	--text-accent: var(--primary-light-900);
-	--text-accented: var(--primary-light-850);
-	--text-accentest: var(--primary-light-800);
+	--text-accent-1: var(--primary-light-900);
+	--text-accent-2: var(--primary-light-850);
+	--text-accent-3: var(--primary-light-800);
 
 	--sidebar-background: var(--primary-dark-100);
 	--sidebar-border: var(--primary-dark-150);
-	--sidebar-accent: var(--primary-dark-150);
-	--sidebar-accented: var(--primary-dark-200);
-	--sidebar-accentest: var(--primary-dark-350);
+	--sidebar-accent-1: var(--primary-dark-150);
+	--sidebar-accent-2: var(--primary-dark-200);
+	--sidebar-accent-3: var(--primary-dark-350);
 	
 	--vriish-rose: hsl(0, 100%, 75%);
 	--orange: hsl(25, 100%, 75%);
@@ -35,8 +35,13 @@
 	--purpur: hsl(275, 100%, 75%);
 	--white: hsl(360, 100%, 100%);
 
-	--vriish-gradient: linear-gradient(55deg, var(--primary-light-300) -50%, var(--primary-dark-300) 150%);
+	--vriish-gradient: linear-gradient(-35deg, var(--primary-light-300) -50%, var(--primary-dark-300) 150%);
 	--vriish-gradient-shadow: 2px 2px 10px var(--background);
+	--vriish-gradient-text: var(--primary-light-950);
+
+	--vriish-waves: 
+		radial-gradient(2.64rem at 50% calc(100% - 3.67rem),#000 99%,#0000 101%) calc(50% - 3rem) 0/6rem 100%,
+		radial-gradient(2.64rem at 50% calc(100% + 2.17rem),#0000 99%,#000 101%) 50% calc(100% - 1.5rem)/6rem 100% repeat-x;
 }
 @media (prefers-color-scheme: light) {
 	:root {
@@ -44,16 +49,16 @@
 		--border: var(--primary-dark-800);
 
 		--text: var(--primary-dark-50);
-		--text-accent: var(--primary-dark-100);
-		--text-accented: var(--primary-dark-150);
-		--text-accentest: var(--primary-dark-200);
+		--text-accent-1: var(--primary-dark-100);
+		--text-accent-2: var(--primary-dark-150);
+		--text-accent-3: var(--primary-dark-200);
 
 		--sidebar-background: var(--primary-light-900);
 		--sidebar-border: var(--primary-light-850);
-		--sidebar-accent: var(--primary-light-850);
-		--sidebar-accented: var(--primary-light-800);
-		--sidebar-accentest: var(--primary-light-750);
+		--sidebar-accent-1: var(--primary-light-850);
+		--sidebar-accent-2: var(--primary-light-800);
+		--sidebar-accent-3: var(--primary-light-750);
 
-		--vriish-gradient: linear-gradient(55deg, var(--primary-light-700) -50%, var(--primary-dark-700) 150%);
+		--vriish-gradient: linear-gradient(-35deg, var(--primary-light-700) -50%, var(--primary-dark-700) 150%);
 	}
 }
\ No newline at end of file