diff --git a/packages/learn/src/layouts/global.css b/packages/learn/src/layouts/global.css
index f77b7f7b65..9eec9f48b8 100644
--- a/packages/learn/src/layouts/global.css
+++ b/packages/learn/src/layouts/global.css
@@ -9,6 +9,7 @@ body {
 html, body, .full-height {
   min-height: 100% !important;
   height: 100%;
+  max-height: calc(100vh);
 }
 article,
 aside,
diff --git a/packages/learn/src/layouts/layout.css b/packages/learn/src/layouts/layout.css
index 5c39e60fc6..b6f096d290 100644
--- a/packages/learn/src/layouts/layout.css
+++ b/packages/learn/src/layouts/layout.css
@@ -1,5 +1,5 @@
 .app-wrapper {
-  min-height: calc(100vh - (45px + 1.45rem));
+  max-height: calc(100vh - (45px + 1.45rem));
 }
 
 main {
@@ -14,12 +14,12 @@ main {
   height: auto;
 }
 
-.reflex-layout.vertical > .reflex-splitter:hover {
- border-left: 2px solid #ccc !important;
- border-right: 2px solid #ccc !important;
+.reflex-layout.vertical .reflex-splitter:hover {
+ border-left: 2px solid #006400 !important;
+ border-right: 2px solid #006400 !important;
+ background-color: #006400;
 }
 
-.reflex-layout.vertical > .reflex-splitter,  {
-  border-left: 2px solid #c6c6c6;
-  border-right: 2px solid #c6c6c6;
+.reflex-layout.vertical > .reflex-splitter{
+  width: 5px;
 }
\ No newline at end of file
diff --git a/packages/learn/src/templates/Challenges/views/components/preview.css b/packages/learn/src/templates/Challenges/views/components/preview.css
index 020fa5f831..74e98b86f9 100644
--- a/packages/learn/src/templates/Challenges/views/components/preview.css
+++ b/packages/learn/src/templates/Challenges/views/components/preview.css
@@ -1,3 +1,10 @@
 .hide-test-frame {
   display: none;
+}
+
+.challenge-preview, .challenge-preview-frame {
+  height: calc(100vh - (45px + 1.45rem));
+  width: 100%;
+  padding: 0;
+  margin: 0;
 }
\ No newline at end of file