diff --git a/public/img/logo-dark.svg b/public/img/logo-dark.svg
index e500b44aa6..115df44e7d 100644
--- a/public/img/logo-dark.svg
+++ b/public/img/logo-dark.svg
@@ -1,3 +1,3 @@
 <svg width="75" height="100" viewBox="0 0 75 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M65.625 50H59.375C54.1973 50 50 45.8027 50 40.625V34.375C50 29.1973 54.1973 25 59.375 25H65.625C70.8027 25 75 20.8027 75 15.625V9.375C75 4.19733 70.8027 0 65.625 0H59.375C54.1973 0 50 4.19733 50 9.375V15.625C50 20.8027 45.8027 25 40.625 25H34.375C29.1973 25 25 29.1973 25 34.375V40.625C25 45.8027 20.8027 50 15.625 50H9.375C4.19733 50 0 54.1973 0 59.375V65.625C0 70.8027 4.19733 75 9.375 75H40.625C45.8027 75 50 79.1973 50 84.375V90.625C50 95.8027 54.1973 100 59.375 100H65.625C70.8027 100 75 95.8027 75 90.625V59.375C75 54.1973 70.8027 50 65.625 50Z" fill="#90BA1D"/>
+<path d="M65.625 50H59.375C54.1973 50 50 45.8027 50 40.625V34.375C50 29.1973 54.1973 25 59.375 25H65.625C70.8027 25 75 20.8027 75 15.625V9.375C75 4.19733 70.8027 0 65.625 0H59.375C54.1973 0 50 4.19733 50 9.375V15.625C50 20.8027 45.8027 25 40.625 25H34.375C29.1973 25 25 29.1973 25 34.375V40.625C25 45.8027 20.8027 50 15.625 50H9.375C4.19733 50 0 54.1973 0 59.375V65.625C0 70.8027 4.19733 75 9.375 75H40.625C45.8027 75 50 79.1973 50 84.375V90.625C50 95.8027 54.1973 100 59.375 100H65.625C70.8027 100 75 95.8027 75 90.625V59.375C75 54.1973 70.8027 50 65.625 50Z" fill="#78de13"/>
 </svg>
diff --git a/public/img/logo-light.svg b/public/img/logo-light.svg
index faef5d032c..c9b5c4225d 100644
--- a/public/img/logo-light.svg
+++ b/public/img/logo-light.svg
@@ -1,3 +1,3 @@
 <svg width="75" height="100" viewBox="0 0 75 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M65.625 50H59.375C54.1973 50 50 45.8027 50 40.625V34.375C50 29.1973 54.1973 25 59.375 25H65.625C70.8027 25 75 20.8027 75 15.625V9.375C75 4.19733 70.8027 0 65.625 0H59.375C54.1973 0 50 4.19733 50 9.375V15.625C50 20.8027 45.8027 25 40.625 25H34.375C29.1973 25 25 29.1973 25 34.375V40.625C25 45.8027 20.8027 50 15.625 50H9.375C4.19733 50 0 54.1973 0 59.375V65.625C0 70.8027 4.19733 75 9.375 75H40.625C45.8027 75 50 79.1973 50 84.375V90.625C50 95.8027 54.1973 100 59.375 100H65.625C70.8027 100 75 95.8027 75 90.625V59.375C75 54.1973 70.8027 50 65.625 50Z" fill="#80A41A"/>
+<path d="M65.625 50H59.375C54.1973 50 50 45.8027 50 40.625V34.375C50 29.1973 54.1973 25 59.375 25H65.625C70.8027 25 75 20.8027 75 15.625V9.375C75 4.19733 70.8027 0 65.625 0H59.375C54.1973 0 50 4.19733 50 9.375V15.625C50 20.8027 45.8027 25 40.625 25H34.375C29.1973 25 25 29.1973 25 34.375V40.625C25 45.8027 20.8027 50 15.625 50H9.375C4.19733 50 0 54.1973 0 59.375V65.625C0 70.8027 4.19733 75 9.375 75H40.625C45.8027 75 50 79.1973 50 84.375V90.625C50 95.8027 54.1973 100 59.375 100H65.625C70.8027 100 75 95.8027 75 90.625V59.375C75 54.1973 70.8027 50 65.625 50Z" fill="#00a538"/>
 </svg>
diff --git a/resources/sass/pages/_homepage.scss b/resources/sass/pages/_homepage.scss
index 90d4a161c6..a20a5817f2 100644
--- a/resources/sass/pages/_homepage.scss
+++ b/resources/sass/pages/_homepage.scss
@@ -3,7 +3,56 @@
 @import "../../feature/theme/theme";
 @import "bootstrap/scss/mixins/breakpoints";
 
+header nav.navbar {
+  .logo {
+    height: 30px;
+  }
+}
+
 body.lookAndFeelModern {
+  $primary-color-light: #00a538;
+  $primary-color-dark: #78de13;
+
+  .text-primary {
+    @include light {
+      color: $primary-color-light !important;
+    }
+    @include dark {
+      color: $primary-color-dark !important;
+    }
+  }
+
+  .is-online {
+    width: 13px;
+    height: 13px;
+    border: none;
+    @include light {
+      background-color: $primary-color-light;
+    }
+    @include dark {
+      background-color: $primary-color-dark;
+    }
+  }
+
+  header nav.navbar {
+    .logo {
+      width: 15px;
+      height: 20px;
+    }
+
+    .btn-register {
+      @include light {
+        background: $primary-color-light;
+        border-color: $primary-color-light;
+
+      }
+      @include dark {
+        background: $primary-color-dark;
+        border-color: $primary-color-dark;
+      }
+    }
+  }
+
   @mixin size($size) {
     @if ($size == 'intermediate') {
       @include media-breakpoint-only(sm) {
@@ -29,126 +78,124 @@ body.lookAndFeelModern {
     background: #0f0f0f;
   }
 
-  .scope-homepage {
-    h2 {
-      font-size: 0.9em;
-      color: inherit;
-    }
+  h2 {
+    font-size: 0.9em;
+    color: inherit;
+  }
 
-    h4.heading {
-      font-size: 0.9em;
-      color: inherit;
-      @include theme { // this just overrides previous dark theme
-        border: none;
-      }
+  h4.heading {
+    font-size: 0.9em;
+    color: inherit;
+    @include theme { // this just overrides previous dark theme
+      border: none;
+    }
 
-      i {
-        display: none;
-      }
+    i {
+      display: none;
     }
+  }
 
-    a {
-      @include light {
-        color: #005b12;
-      }
-      @include dark {
-        color: #bdd5c3;
-      }
+  a {
+    @include light {
+      color: #005b12;
+    }
+    @include dark {
+      color: #bdd5c3;
     }
+  }
 
-    .nav-pills {
-      .nav-link {
-        transition: none;
-      }
+  .nav-pills {
+    .nav-link {
+      transition: none;
+    }
 
-      .nav-link[href] {
-        cursor: pointer;
-      }
+    .nav-link[href] {
+      cursor: pointer;
+    }
 
-      @include theme {
-        .nav-link {
-          color: #777777;
+    @include theme {
+      .nav-link {
+        color: #777777;
 
-          &.active {
-            color: black;
-          }
+        &.active {
+          color: black;
         }
       }
+    }
 
-      .nav-link.active {
-        @include light {
-          border-bottom-color: #00a538;
-        }
-        @include dark {
-          border-bottom-color: #78de13;
-        }
+    .nav-link.active {
+      @include light {
+        border-bottom-color: $primary-color-light;
+      }
+      @include dark {
+        border-bottom-color: $primary-color-dark;
       }
     }
+  }
 
-    .microblog {
-      .media > .media-body {
-        .media-heading a {
-          @include dark {
-            color: #bdd5c3;
-          }
-        }
-
-        .microblog-comments .media a.username {
-          @include dark {
-            color: #bdd5c3;
-          }
+  .microblog {
+    .media > .media-body {
+      .media-heading a {
+        @include dark {
+          color: #bdd5c3;
         }
       }
 
-      .microblog-actions .btn {
-        @include light {
-          color: #777777;
-        }
+      .microblog-comments .media a.username {
         @include dark {
-          color: #8f9ba5;
+          color: #bdd5c3;
         }
       }
     }
 
-    .default-avatar {
+    .microblog-actions .btn {
       @include light {
-        color: #00a538;
-        background: #e7f7e6;
+        color: #777777;
       }
       @include dark {
-        color: #78de13;
-        background: #0a1203;
+        color: #8f9ba5;
       }
     }
+  }
 
-    .card {
-      border: none;
-      box-shadow: none;
-      border-radius: 8px;
+  .default-avatar {
+    @include light {
+      color: $primary-color-light;
+      background: #e7f7e6;
+    }
+    @include dark {
+      color: $primary-color-dark;
+      background: #0a1203;
     }
+  }
 
-    .card-tile {
-      border-radius: 6px;
-      @include light {
-        background: #eaecf1;
-      }
-      @include dark {
-        background: transparent;
-      }
+  .card {
+    border: none;
+    box-shadow: none;
+    border-radius: 8px;
+  }
+
+  .card-tile {
+    border-radius: 6px;
+    @include light {
+      background: #eaecf1;
     }
+    @include dark {
+      background: transparent;
+    }
+  }
 
-    @include theme {
-      .viewers-online {
-        .viewer-pill {
-          border: none;
-        }
+  @include theme {
+    .viewers-online {
+      .viewer-pill {
+        border: none;
+      }
 
-        .viewers-users .circle {
-          border: 2px solid white;
+      .viewers-users .circle {
+        border: 2px solid white;
 
-          &.circle-number {
-            line-height: 32px;
-          }
+        &.circle-number {
+          line-height: 32px;
         }
       }
     }
@@ -188,7 +235,7 @@ body.lookAndFeelModern {
         height: 3px;
         border-radius: 3px;
         @include light {
-          background: linear-gradient(270deg, #00a538 0%, #ffffff 100%);
+          background: linear-gradient(270deg, $primary-color-light 0%, #ffffff 100%);
         }
 
         @include dark {
diff --git a/resources/views/home.twig b/resources/views/home.twig
index d0e315bbc0..650acb763d 100644
--- a/resources/views/home.twig
+++ b/resources/views/home.twig
@@ -8,7 +8,7 @@
 {% block container %}
   {{ render_block('homepage_banner') }}
 
-  <div class="row scope-homepage">
+  <div class="row">
     <main class="col-md-8">
       <section id="box-forum" class="mt-4">
         <h2>
diff --git a/resources/views/layout.twig b/resources/views/layout.twig
index fc3ac4bc32..a53df49b73 100644
--- a/resources/views/layout.twig
+++ b/resources/views/layout.twig
@@ -70,7 +70,6 @@
           <img
               class="logo"
               alt="4programmers.net"
-              style="height:30px;"
               data-src-light="{{ cdn('img/logo-light.svg') }}"
               data-src-dark="{{ cdn('img/logo-dark.svg') }}"
               src="{{ __dark_theme ? cdn('img/logo-dark.svg') : cdn('img/logo-light.svg') }}"