diff --git a/client/src/components/layouts/learn.css b/client/src/components/layouts/learn.css
index 121807eee3..d1c2e8067d 100644
--- a/client/src/components/layouts/learn.css
+++ b/client/src/components/layouts/learn.css
@@ -2,22 +2,21 @@
   height: calc(100vh - var(--header-height));
 }
 
-#learn-app-wrapper .reflex-container.vertical .reflex-splitter:hover {
-  background-color: var(--tertiary-color);
+#learn-app-wrapper .reflex-container.vertical > .reflex-splitter,
+#learn-app-wrapper .reflex-container.horizontal > .reflex-splitter {
+  background-color: var(--quaternary-background);
+  border: none;
+}
+
+#learn-app-wrapper .reflex-container.vertical > .reflex-splitter:hover,
+#learn-app-wrapper .reflex-container.horizontal > .reflex-splitter:hover {
+  background-color: var(--quaternary-color);
 }
 
 #learn-app-wrapper .reflex-container.vertical > .reflex-splitter {
   width: 5px;
 }
 
-#learn-app-wrapper .reflex-container.horizontal .reflex-splitter:hover {
-  background-color: var(--quaternary-background);
-  width: 5px;
-  border: none;
-}
-
 #learn-app-wrapper .reflex-container.horizontal > .reflex-splitter {
   height: 5px;
-  background-color: var(--quaternary-background);
-  border: none;
 }