diff --git a/test/css/repo-home.css b/test/css/repo-home.css
index a142227..6e496de 100644
--- a/test/css/repo-home.css
+++ b/test/css/repo-home.css
@@ -86,6 +86,7 @@ header .header-section.header-right a:hover {
   padding: 0;
   display: flex;
   flex-direction: column;
+  max-height: 90vh;
 }
 .sidebar-right .repo-info {
   display: flex;
@@ -182,6 +183,7 @@ header .header-section.header-right a:hover {
 }
 .sidebar-right .repo-languages {
   padding: 8px 12px;
+  overflow-y: scroll;
 }
 .sidebar-right .repo-languages .repo-languages-title {
   width: 100%;
@@ -217,7 +219,19 @@ header .header-section.header-right a:hover {
   margin-right: 0;
 }
 .sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang1 {
-  background-color: #1b97ff;
+  background: linear-gradient(to left, rgb(188, 33, 21) 0%, rgb(188, 33, 21) 40%, rgba(0, 0, 0, 0) 0%);
+}
+.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang2 {
+  background: linear-gradient(to left, rgb(73, 103, 114) 0%, rgb(73, 103, 114) 10%, rgba(0, 0, 0, 0) 0%);
+}
+.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang3 {
+  background: linear-gradient(to left, rgb(194, 59, 59) 0%, rgb(194, 59, 59) 15%, rgba(0, 0, 0, 0) 0%);
+}
+.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang4 {
+  background: linear-gradient(to left, rgb(172, 58, 3) 0%, rgb(172, 58, 3) 20%, rgba(0, 0, 0, 0) 0%);
+}
+.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang5 {
+  background: linear-gradient(to left, rgb(84, 160, 74) 0%, rgb(84, 160, 74) 90%, rgba(0, 0, 0, 0) 0%);
 }
 .sidebar-right .settings-link {
   display: flex;
diff --git a/test/scss/repo-home/_sidebar-right.scss b/test/scss/repo-home/_sidebar-right.scss
index 06bcbe6..74c0c9e 100644
--- a/test/scss/repo-home/_sidebar-right.scss
+++ b/test/scss/repo-home/_sidebar-right.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 // Color Variables
 $sidebar-bg-color: #1a1a1a;
 $sidebar-text-color: #f0f0f0;
@@ -9,6 +11,22 @@ $stat-text-color: #f0f0f0;
 $stat-count-color: #f0f0f0;
 $settings-link-hover-bg-color: #333;
 
+@function random_col() {
+	$r: (random($limit: 128) + random($limit: 128));
+	$g: random($limit: (255 - $r));
+	$b: random($limit: (255 - math.max($r, $g)));
+	@return rgb($r, $g, $b);
+}
+
+@function lang_bg($col, $perc) {
+	@return linear-gradient(
+        to left,
+        $col 0%,
+        $col $perc,
+        rgba(0,0,0,0) 0%
+    );
+}
+
 @mixin sidbar-left-nav-links {
     display: flex;
     align-items: center;
@@ -39,6 +57,7 @@ $settings-link-hover-bg-color: #333;
     padding: 0;
     display: flex;
     flex-direction: column;
+	max-height: 90vh;
 
     .repo-info {
         display: flex;
@@ -144,12 +163,14 @@ $settings-link-hover-bg-color: #333;
     .repo-languages {
         //background-color: black;
         padding: 8px 12px;
+		overflow-y: scroll;
 
 		.repo-languages-title {
 			width: 100%;
 			font-size: 16px;
 			height: 1.7em;
 			display: block;
+			//position: absolute;
 		}
 
         .repo-lang-list {
@@ -182,7 +203,19 @@ $settings-link-hover-bg-color: #333;
                 }
 
 				&.lang1 {
-					background-color: #1b97ff;
+					background: lang_bg(random_col(), 40%);
+				}
+				&.lang2 {
+					background: lang_bg(random_col(), 10%);
+				}
+				&.lang3 {
+					background: lang_bg(random_col(), 15%);
+				}
+				&.lang4 {
+					background: lang_bg(random_col(), 20%);
+				}
+				&.lang5 {
+					background: lang_bg(random_col(), 90%);
 				}
             }
         }