diff --git a/app/www/courses.html b/app/www/courses.html
index 7a6679ea2..682490b68 100644
--- a/app/www/courses.html
+++ b/app/www/courses.html
@@ -11,7 +11,7 @@
     <body>
         <div class="grid">
             <header class="header">
-                <nav class="horizontal">
+                <nav>
                     <ul class="flat">
                         <li><a href="/">Startseite</a></li>
                         <li><a href="/courses.html">Kurse</a></li>
@@ -153,7 +153,7 @@
             </section>
 
             <footer class="footer">
-                <nav class="thirdary">
+                <nav>
                     <ul class="flat">
                         <li><a href="">Impressum</a></li>
                         <li><a href="">Kontakt</a></li>
diff --git a/app/www/index.html b/app/www/index.html
index 16e054251..232eca5e5 100644
--- a/app/www/index.html
+++ b/app/www/index.html
@@ -11,7 +11,7 @@
     <body>
         <div class="grid">
             <header class="header">
-                <nav class="horizontal">
+                <nav>
                     <ul class="flat">
                         <li><a href="/">Startseite</a></li>
                         <li><a href="/courses.html">Kurse</a></li>
@@ -54,7 +54,7 @@
             </section>
 
             <footer class="footer">
-                <nav class="thirdary">
+                <nav>
                     <ul class="flat">
                         <li><a href="#">Impressum</a></li>
                         <li><a href="#">Kontakt</a></li>
diff --git a/app/www/src/css/main.css b/app/www/src/css/main.css
index 023c46d6d..1ce14a15b 100644
--- a/app/www/src/css/main.css
+++ b/app/www/src/css/main.css
@@ -1,7 +1,7 @@
 .grid {
   display: grid;
   height: 100%;
-  grid-template-columns: repeat(12, 1fr);
+  grid-template-columns: [grid-col-start] repeat(12, 1fr) [grid-col-end];
   grid-template-rows: var(--header-height) auto var(--footer-height);
   grid-gap: 20px;
 }
@@ -22,7 +22,7 @@
 }
 
 .grid > section {
-  grid-column: 4 / span 8;
+  grid-column: 4/span 8;
   grid-row-start: 2;
 }
 
@@ -31,11 +31,65 @@
   grid-row-start: 3;
 }
 
+@media (max-width: 1000px) {
+  .grid {
+    grid-template-columns: [grid-col-start] repeat(8, 1fr) [grid-col-end];
+    grid-gap: 10px;
+  }
+  .grid > header {
+    grid-column: span 8;
+  }
+  .grid > .sidebar {
+    grid-column: grid-col-start / span 2;
+    grid-row-start: 2;
+  }
+  .grid > section {
+    grid-column: 3 / span 6;
+    grid-row-start: 2;
+  }
+  .grid > footer {
+    grid-column: span 8;
+    grid-row-start: 3;
+  }
+}
+
+@media (max-width: 800px) {
+  .grid {
+    grid-template-columns: [grid-col-start] repeat(4, 1fr) [grid-col-end];
+  }
+  .grid > header, .grid > .sidebar, .grid > section, .grid > footer {
+    grid-column: span 4;
+  }
+  .grid > section {
+    grid-row-start: 2;
+  }
+  .grid > .sidebar {
+    grid-row-start: 3;
+  }
+  .grid > footer {
+    grid-row-start: 4;
+  }
+}
+
+@media (max-width: 600px) {
+  .grid {
+    grid-template-columns: [grid-col-start] repeat(2, 1fr) [grid-col-end];
+  }
+  .grid > header, .grid > .sidebar, .grid > section, .grid > footer {
+    grid-column: span 2;
+  }
+}
+
 .box {
   position: relative;
   padding: 13px 24px;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
   margin-bottom: 20px;
   font-size: 16px;
 }
@@ -50,8 +104,8 @@
 }
 
 .course-box {
-  border-left: 1px solid #afb5df;
-  padding: 4px 20px;
+  border-left: 1px solid #ccb3e6;
+  padding: 0 20px;
   position: relative;
 }
 
@@ -100,7 +154,8 @@
 }
 
 * {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   padding: 0;
   margin: 0;
 }
@@ -120,11 +175,12 @@ a:link {
   color: inherit;
   text-decoration: none;
   font-weight: 600;
+  -webkit-transition: color .2s ease, background-color .2s ease;
   transition: color .2s ease, background-color .2s ease;
 }
 
 a:hover {
-  color: #38428a;
+  color: rebeccapurple;
 }
 
 ul {
@@ -141,12 +197,12 @@ h1, h2, h3, h4, h5 {
 
 h1 {
   font-size: 32px;
-  margin: 20px 0 5px;
+  margin: 20px 0 10px;
 }
 
 h2 {
   font-size: 24px;
-  margin: 10px 0 0;
+  margin: 10px 0 5px;
 }
 
 h3 {
@@ -162,7 +218,7 @@ h4 {
 th, td {
   text-align: left;
   padding: 0 2px 0 4px;
-  border-left: 1px solid #38428a;
+  border-left: 1px solid rebeccapurple;
 }
 
 th:first-of-type, td:first-of-type {
@@ -171,60 +227,70 @@ th:first-of-type, td:first-of-type {
 
 .header {
   position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
   padding: 0 24px;
-  height: var(--header-height);
-  line-height: var(--header-height);
-  background-color: #38428a;
+  height: 60px;
+  line-height: 60px;
+  background-color: rebeccapurple;
   width: 100%;
   text-align: right;
   overflow: hidden;
   z-index: 100;
-  transition: height .2s ease, line-height .2s ease;
 }
 
-.header.sticky {
-  position: fixed;
-  top: 0;
-}
-
-.header.collapsed {
-  height: var(--header-height-collapsed);
-  line-height: var(--header-height-collapsed);
-}
-
-.header.collapsed:before {
-  height: 30px;
-}
-
-.header .horizontal {
+.header > nav {
   width: 100%;
 }
 
-.header > nav.horizontal li a {
-  padding: 13px;
-  position: relative;
-  height: 100%;
-  display: inline-block;
-  color: #eaf2ff;
+.has-sticky-nav {
+  padding-top: 60px;
 }
 
-.header > nav.horizontal li a:hover {
-  background-color: #2e3671;
+.has-sticky-nav .header {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  -webkit-transition: height .2s ease, line-height .2s ease;
+  transition: height .2s ease, line-height .2s ease;
 }
 
 .main-content {
   font-size: 16px;
 }
 
+ul.flat > li > a {
+  padding: 0 13px;
+  position: relative;
+  height: 100%;
+  display: inline-block;
+  color: #eaf2ff;
+}
+
+ul.flat > li > a:hover {
+  background-color: #542a7e;
+}
+
 .footer {
   text-align: right;
+  height: 50px;
+  line-height: 50px;
   padding: 7px 24px;
   overflow: hidden;
-  background-color: #38428a;
+  background-color: rebeccapurple;
   color: #eaf2ff;
 }
 
@@ -233,19 +299,29 @@ th:first-of-type, td:first-of-type {
 }
 
 .button, .event-registration {
-  background-color: #38428a;
+  background-color: rebeccapurple;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   padding: 3px 13px;
   cursor: pointer;
   font-weight: 600;
+  -webkit-transition: background-color .2s ease, -webkit-transform .1s;
+  transition: background-color .2s ease, -webkit-transform .1s;
   transition: transform .1s, background-color .2s ease;
+  transition: transform .1s, background-color .2s ease, -webkit-transform .1s;
 }
 
 .button:hover, .event-registration:hover {
-  background-color: #293166;
-  transform: scale(1.01);
+  background-color: #4d2673;
+  -webkit-transform: scale(1.01);
+          transform: scale(1.01);
 }
 
 .hidden {
diff --git a/app/www/src/css/main.css.map b/app/www/src/css/main.css.map
index 8fce36b37..7dbceaa71 100644
--- a/app/www/src/css/main.css.map
+++ b/app/www/src/css/main.css.map
@@ -1,10 +1,11 @@
 {
     "version": 3,
-    "mappings": "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",
+    "mappings": "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",
     "sources": [
         "../scss/main.scss",
         "../scss/_grid.scss",
         "../scss/_colors.scss",
+        "../scss/_dimensions.scss",
         "../scss/modules/_box.scss",
         "../scss/_colors.scss"
     ],
diff --git a/app/www/src/js/helper/sticky_menu.js b/app/www/src/js/helper/sticky_menu.js
index 7e88791ac..4a39d159c 100644
--- a/app/www/src/js/helper/sticky_menu.js
+++ b/app/www/src/js/helper/sticky_menu.js
@@ -4,6 +4,8 @@ define(function (require) {
         init: function() {
             var last_known_scroll_position = 0;
             var ticking = false;
+            var grid = document.querySelector('.grid');
+            var nav = document.querySelector('.header');
     
             window.addEventListener('scroll', function(e) {
                 if (!ticking) {
@@ -12,13 +14,14 @@ define(function (require) {
                     });
                     ticking = true;
                 }
-            });
+            }, false);
             
+            // checks scroll direction and shows/hides navbar accordingly
             function checkScroll() {
-                var collapsed = (window.scrollY > 0 && last_known_scroll_position <= window.scrollY)
+                // var collapsed = (window.scrollY > 0 && last_known_scroll_position <= window.scrollY)
                 var sticky = window.scrollY > 0;
-                document.querySelector('header').classList.toggle('collapsed', collapsed);
-                document.querySelector('header').classList.toggle('sticky', sticky);
+                grid.classList.toggle('has-sticky-nav', sticky);
+                // nav.classList.toggle('collapsed', collapsed);
                 ticking = false;
                 last_known_scroll_position = window.scrollY;
             }
diff --git a/app/www/src/scss/_colors.scss b/app/www/src/scss/_colors.scss
index 0c5869c2e..42237f156 100644
--- a/app/www/src/scss/_colors.scss
+++ b/app/www/src/scss/_colors.scss
@@ -10,3 +10,5 @@ $base-bg-color: #ffffff;
 $base-font-color: rgb(53, 53, 53);
 $sec-font-color: #eaf2ff;
 $box-bg-color: #dddddd;
+// THEME 3
+$base00: rebeccapurple;
\ No newline at end of file
diff --git a/app/www/src/scss/_dimensions.scss b/app/www/src/scss/_dimensions.scss
new file mode 100644
index 000000000..e6d80f30c
--- /dev/null
+++ b/app/www/src/scss/_dimensions.scss
@@ -0,0 +1,3 @@
+$header-height: 60px;
+$header-height-collapsed: 40px;
+$footer-height: 50px;
\ No newline at end of file
diff --git a/app/www/src/scss/_grid.scss b/app/www/src/scss/_grid.scss
index 0ff293d1b..d2c5bd793 100644
--- a/app/www/src/scss/_grid.scss
+++ b/app/www/src/scss/_grid.scss
@@ -1,12 +1,27 @@
+$l-cols: 12;
+$m-cols: 8;
+$s-cols: 4;
+$xs-cols: 2;
+
+$l-grid: "[grid-col-start] repeat(#{$l-cols}, 1fr) [grid-col-end]";
+$m-grid: "[grid-col-start] repeat(#{$m-cols}, 1fr) [grid-col-end]";
+$s-grid: "[grid-col-start] repeat(#{$s-cols}, 1fr) [grid-col-end]";
+$xs-grid: "[grid-col-start] repeat(#{$xs-cols}, 1fr) [grid-col-end]";
+
+$l-breakpoint: 1000px;
+$m-breakpoint: 800px;
+$s-breakpoint: 600px;
+$xs-breakpoint: 400px;
+
 .grid {
     display: grid;
     height: 100%;
-    grid-template-columns: repeat(12, 1fr);
+    grid-template-columns: #{$l-grid};
     grid-template-rows: var(--header-height) auto var(--footer-height);
     grid-gap: 20px;
 
     > header {
-        grid-column: span 12;
+        grid-column: span $l-cols;
     }
 
     > .sidebar {
@@ -21,12 +36,71 @@
     }
 
     > section {
-        grid-column: 4 / span 8;
+        grid-column: 4 / span ($l-cols - 4);
         grid-row-start: 2;
     }
 
     > footer {
-        grid-column: span 12;
+        grid-column: span $l-cols;
         grid-row-start: 3;
     }
+}
+
+@media (max-width: $l-breakpoint) {
+    .grid {
+        grid-template-columns: #{$m-grid};
+        grid-gap: 10px;
+        
+
+        > header {
+            grid-column: span $m-cols;
+        }
+
+        > .sidebar {
+            grid-column: grid-col-start / span 2;
+            grid-row-start: 2;
+        }
+
+        > section {
+            grid-column: 3 / span 6;
+            grid-row-start: 2;
+        }
+
+        > footer {
+            grid-column: span $m-cols;
+            grid-row-start: 3;
+        }
+    }
+}
+
+@media (max-width: $m-breakpoint) {
+    .grid {
+        grid-template-columns: #{$s-grid};
+
+        > header, > .sidebar, > section, > footer {
+            grid-column: span $s-cols;
+        }
+
+        > section {
+            grid-row-start: 2;
+        }
+
+        > .sidebar {
+            grid-row-start: 3;
+        }
+
+        > footer {
+            grid-row-start: 4;
+        }
+    }
+}
+
+@media (max-width: $s-breakpoint) {
+    .grid {
+        grid-template-columns: #{$xs-grid};
+
+        > header, > .sidebar, > section, > footer {
+            grid-column: span $xs-cols;
+        }
+    }
 }
\ No newline at end of file
diff --git a/app/www/src/scss/main.scss b/app/www/src/scss/main.scss
index 0053a4c24..e463d8803 100644
--- a/app/www/src/scss/main.scss
+++ b/app/www/src/scss/main.scss
@@ -1,5 +1,6 @@
 @import 'grid';
 @import 'colors';
+@import 'dimensions';
 
 // modules
 @import 'modules/box';
@@ -44,11 +45,11 @@ h1, h2, h3, h4, h5 {
 }
 h1 {
     font-size: 32px;
-    margin: 20px 0 5px;
+    margin: 20px 0 10px;
 }
 h2 {
     font-size: 24px;
-    margin: 10px 0 0;
+    margin: 10px 0 5px;
 }
 h3 {
     font-size: 20px;
@@ -78,36 +79,40 @@ th, td {
     align-items: center;
     justify-content: space-between;
     padding: 0 24px;
-    height: var(--header-height);
-    line-height: var(--header-height);
+    height: $header-height;
+    line-height: $header-height;
     background-color: $base00;
     width: 100%;
     text-align: right;
     overflow: hidden;
     z-index: 100;
-    // box-shadow: 0 0 40px 40px rgba(0, 0, 0, 0.1);
-    transition: height .2s ease, line-height .2s ease;
 
-    &.sticky {
-        position: fixed;
-        top: 0;
-    }
-
-    &.collapsed {
-        height: var(--header-height-collapsed);
-        line-height: var(--header-height-collapsed);
-
-        &:before {
-            height: 30px;
-        }
-    }
-
-    .horizontal {
+    > nav {
         width: 100%;
     }
+}
 
-    > nav.horizontal li a {
-        padding: 13px;
+.has-sticky-nav {
+    padding-top: $header-height;
+}
+
+.has-sticky-nav .header {
+    height: $header-height-collapsed;
+    line-height: $header-height-collapsed;
+    position: fixed;
+    top: 0;
+    left: 0;
+    transition: height .2s ease, line-height .2s ease;
+}
+
+.main-content {
+    font-size: 16px;
+}
+
+ul.flat {
+    
+    > li > a {
+        padding: 0 13px;
         position: relative;
         height: 100%;
         display: inline-block;
@@ -119,12 +124,10 @@ th, td {
     }
 }
 
-.main-content {
-    font-size: 16px;
-}
-
 .footer {
     text-align: right;
+    height: $footer-height;
+    line-height: $footer-height;
     padding: 7px 24px;
     overflow: hidden;
     background-color: $base00;
diff --git a/app/www/src/scss/modules/_box.scss b/app/www/src/scss/modules/_box.scss
index 563d97133..db1753fd7 100644
--- a/app/www/src/scss/modules/_box.scss
+++ b/app/www/src/scss/modules/_box.scss
@@ -22,7 +22,7 @@
 // COURSE BOX
 .course-box {
     border-left: 1px solid lighten($base00, 40%);
-    padding: 4px 20px;
+    padding: 0 20px;
     position: relative;
 
     li {
