diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
index ad7c358b61..94c166f358 100644
--- a/app/Http/Controllers/HomeController.php
+++ b/app/Http/Controllers/HomeController.php
@@ -59,6 +59,7 @@ public function index(): View
             ),
 
             'globalViewers' => $this->globalViewers(),
+            'lookAndFeel'   => 'lookAndFeelModern',
         ])
             ->with('settings', $this->getSettings());
     }
diff --git a/resources/sass/pages/_homepage.scss b/resources/sass/pages/_homepage.scss
index da1422911a..90d4a161c6 100644
--- a/resources/sass/pages/_homepage.scss
+++ b/resources/sass/pages/_homepage.scss
@@ -3,416 +3,418 @@
 @import "../../feature/theme/theme";
 @import "bootstrap/scss/mixins/breakpoints";
 
-@mixin size($size) {
-  @if ($size == 'intermediate') {
-    @include media-breakpoint-only(sm) {
-      @content;
-    }
-    @include media-breakpoint-up(xxl) {
-      @content;
-    }
-  } @else {
-    @include media-breakpoint-up($size) {
-      @content;
+body.lookAndFeelModern {
+  @mixin size($size) {
+    @if ($size == 'intermediate') {
+      @include media-breakpoint-only(sm) {
+        @content;
+      }
+      @include media-breakpoint-up(xxl) {
+        @content;
+      }
+    } @else {
+      @include media-breakpoint-up($size) {
+        @content;
+      }
     }
   }
-}
 
-@include light {
-  color: #646466;
-  background: #f0f2f5;
-}
-
-@include dark {
-  color: #c8c8c8;
-  background: #0f0f0f;
-}
-
-.scope-homepage {
-  h2 {
-    font-size: 0.9em;
-    color: inherit;
+  @include light {
+    color: #646466;
+    background: #f0f2f5;
   }
 
-  h4.heading {
-    font-size: 0.9em;
-    color: inherit;
-    @include theme { // this just overrides previous dark theme
-      border: none;
-    }
-
-    i {
-      display: none;
-    }
+  @include dark {
+    color: #c8c8c8;
+    background: #0f0f0f;
   }
 
-  a {
-    @include light {
-      color: #005b12;
+  .scope-homepage {
+    h2 {
+      font-size: 0.9em;
+      color: inherit;
     }
-    @include dark {
-      color: #bdd5c3;
-    }
-  }
 
-  .nav-pills {
-    .nav-link {
-      transition: none;
+    h4.heading {
+      font-size: 0.9em;
+      color: inherit;
+      @include theme { // this just overrides previous dark theme
+        border: none;
+      }
+
+      i {
+        display: none;
+      }
     }
 
-    .nav-link[href] {
-      cursor: pointer;
+    a {
+      @include light {
+        color: #005b12;
+      }
+      @include dark {
+        color: #bdd5c3;
+      }
     }
 
-    @include theme {
+    .nav-pills {
       .nav-link {
-        color: #777777;
+        transition: none;
+      }
 
-        &.active {
-          color: black;
-        }
+      .nav-link[href] {
+        cursor: pointer;
       }
-    }
 
-    .nav-link.active {
-      @include light {
-        border-bottom-color: #00a538;
+      @include theme {
+        .nav-link {
+          color: #777777;
+
+          &.active {
+            color: black;
+          }
+        }
       }
-      @include dark {
-        border-bottom-color: #78de13;
+
+      .nav-link.active {
+        @include light {
+          border-bottom-color: #00a538;
+        }
+        @include dark {
+          border-bottom-color: #78de13;
+        }
       }
     }
-  }
 
-  .microblog {
-    .media > .media-body {
-      .media-heading a {
-        @include dark {
-          color: #bdd5c3;
+    .microblog {
+      .media > .media-body {
+        .media-heading a {
+          @include dark {
+            color: #bdd5c3;
+          }
+        }
+
+        .microblog-comments .media a.username {
+          @include dark {
+            color: #bdd5c3;
+          }
         }
       }
 
-      .microblog-comments .media a.username {
+      .microblog-actions .btn {
+        @include light {
+          color: #777777;
+        }
         @include dark {
-          color: #bdd5c3;
+          color: #8f9ba5;
         }
       }
     }
 
-    .microblog-actions .btn {
+    .default-avatar {
       @include light {
-        color: #777777;
+        color: #00a538;
+        background: #e7f7e6;
       }
       @include dark {
-        color: #8f9ba5;
+        color: #78de13;
+        background: #0a1203;
       }
     }
-  }
 
-  .default-avatar {
-    @include light {
-      color: #00a538;
-      background: #e7f7e6;
-    }
-    @include dark {
-      color: #78de13;
-      background: #0a1203;
+    .card {
+      border: none;
+      box-shadow: none;
+      border-radius: 8px;
     }
-  }
-
-  .card {
-    border: none;
-    box-shadow: none;
-    border-radius: 8px;
-  }
 
-  .card-tile {
-    border-radius: 6px;
-    @include light {
-      background: #eaecf1;
-    }
-    @include dark {
-      background: transparent;
+    .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;
+          }
         }
       }
     }
   }
-}
-
-.card-reputation {
-  img, svg {
-    width: 40px;
-    height: 40px;
-  }
-
-  .progress {
-    width: 70%;
-  }
-
-  .ranking-row {
-    counter-increment: rank;
 
-    .ranking-row-avatar {
-      border-radius: 4px;
-      overflow: hidden;
+  .card-reputation {
+    img, svg {
+      width: 40px;
+      height: 40px;
     }
 
-    &:last-child {
-      border-bottom: none;
+    .progress {
+      width: 70%;
     }
 
-    .counter {
-      align-self: center;
-
-      &:after {
-        content: counter(rank);
-      }
-    }
+    .ranking-row {
+      counter-increment: rank;
 
-    .ranking-percentage-ray {
-      height: 3px;
-      border-radius: 3px;
-      @include light {
-        background: linear-gradient(270deg, #00a538 0%, #ffffff 100%);
+      .ranking-row-avatar {
+        border-radius: 4px;
+        overflow: hidden;
       }
 
-      @include dark {
-        background: linear-gradient(270deg, #80ff00 0%, #1a1a1a 100%);
+      &:last-child {
+        border-bottom: none;
       }
-    }
-  }
 
-  @include light {
-    .ranking-row {
       .counter {
-        color: #dddddd;
-      }
+        align-self: center;
 
-      a.ranking-username {
-        color: #646466;
+        &:after {
+          content: counter(rank);
+        }
       }
-    }
-  }
 
-  @include dark {
-    background-color: #1a1a1a;
+      .ranking-percentage-ray {
+        height: 3px;
+        border-radius: 3px;
+        @include light {
+          background: linear-gradient(270deg, #00a538 0%, #ffffff 100%);
+        }
 
-    .ranking-row {
-      .counter {
-        color: #acacac;
+        @include dark {
+          background: linear-gradient(270deg, #80ff00 0%, #1a1a1a 100%);
+        }
       }
+    }
 
-      a.ranking-username {
-        color: #acacac;
+    @include light {
+      .ranking-row {
+        .counter {
+          color: #dddddd;
+        }
+
+        a.ranking-username {
+          color: #646466;
+        }
       }
     }
-  }
 
-  .long-name {
-    display: none;
-    @include size(intermediate) {
-      display: initial;
+    @include dark {
+      background-color: #1a1a1a;
+
+      .ranking-row {
+        .counter {
+          color: #acacac;
+        }
+
+        a.ranking-username {
+          color: #acacac;
+        }
+      }
     }
-  }
 
-  .short-name {
-    display: initial;
-    @include size(intermediate) {
+    .long-name {
       display: none;
+      @include size(intermediate) {
+        display: initial;
+      }
     }
-  }
-}
-
-#box-forum {
-  #stream-wrapper {
-    padding-left: 2px;
 
-    @include media-breakpoint-down(xl) {
-      background-position-x: 10px;
-      padding-left: 15px;
+    .short-name {
+      display: initial;
+      @include size(intermediate) {
+        display: none;
+      }
     }
+  }
 
-    #stream {
-      height: 365px;
-      position: relative;
-      overflow: hidden;
+  #box-forum {
+    #stream-wrapper {
+      padding-left: 2px;
 
-      @include media-breakpoint-down(md) {
+      @include media-breakpoint-down(xl) {
+        background-position-x: 10px;
         padding-left: 15px;
       }
 
-      .media {
-        padding: 0 0 0 20px;
-        font-size: 11px;
+      #stream {
+        height: 365px;
         position: relative;
-        overflow: visible;
+        overflow: hidden;
 
         @include media-breakpoint-down(md) {
-          padding: 0;
-        }
-
-        &:not(:first-child) {
-          margin-top: 15px;
+          padding-left: 15px;
         }
 
-        .homepage-activity {
-          border-radius: 50%;
-          position: absolute;
-          width: 20px;
-          height: 20px;
-          left: -11px;
-          top: 8px;
-          color: #777777;
-          justify-content: center;
-          align-items: center;
+        .media {
+          padding: 0 0 0 20px;
+          font-size: 11px;
+          position: relative;
+          overflow: visible;
 
-          @include light {
-            border: 1px solid $card-border-color;
-            background: #fff;
+          @include media-breakpoint-down(md) {
+            padding: 0;
           }
-          @include dark {
-            border: 1px solid #2f2f2f;
-            background: #121212;
+
+          &:not(:first-child) {
+            margin-top: 15px;
           }
-        }
 
-        .media-object {
-          width: 42px;
-          background: #fff;
-          padding: 2px;
-          border-radius: 7px;
+          .homepage-activity {
+            border-radius: 50%;
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            left: -11px;
+            top: 8px;
+            color: #777777;
+            justify-content: center;
+            align-items: center;
 
-          .user-avatar {
-            max-width: 100%;
-            border-radius: 4px;
+            @include light {
+              border: 1px solid $card-border-color;
+              background: #fff;
+            }
+            @include dark {
+              border: 1px solid #2f2f2f;
+              background: #121212;
+            }
           }
 
-          @include dark {
-            border: 1px solid #242a30;
-            background: #121212;
-          }
-        }
+          .media-object {
+            width: 42px;
+            background: #fff;
+            padding: 2px;
+            border-radius: 7px;
 
-        .media-body {
-          min-width: 0; // makes flex children not exceed parent width
+            .user-avatar {
+              max-width: 100%;
+              border-radius: 4px;
+            }
 
-          p {
-            margin: 0;
-            @include text-truncate;
+            @include dark {
+              border: 1px solid #242a30;
+              background: #121212;
+            }
           }
 
-          strong {
-            display: block;
-            font-weight: normal;
-            padding: 0 0 0 10px;
-            margin: 10px 0 0 1px;
-            font-family: "Open Sans", sans-serif;
-            @include light {
-              border-left: 1px solid #dddddd;
+          .media-body {
+            min-width: 0; // makes flex children not exceed parent width
+
+            p {
+              margin: 0;
+              @include text-truncate;
             }
-            @include dark {
-              border-left: 1px solid #2f2f2f;
+
+            strong {
+              display: block;
+              font-weight: normal;
+              padding: 0 0 0 10px;
+              margin: 10px 0 0 1px;
+              font-family: "Open Sans", sans-serif;
+              @include light {
+                border-left: 1px solid #dddddd;
+              }
+              @include dark {
+                border-left: 1px solid #2f2f2f;
+              }
             }
           }
-        }
 
-        .default-avatar {
-          img, svg {
-            width: 38px;
-            height: 38px;
+          .default-avatar {
+            img, svg {
+              width: 38px;
+              height: 38px;
+            }
           }
         }
       }
     }
-  }
-
-  #box-forum-headline {
-    margin-top: 20px;
 
-    .row {
-      padding: 4px 0 4px 0;
-      margin: 0;
+    #box-forum-headline {
+      margin-top: 20px;
 
-      @include light {
-        border-bottom: 1px solid #e6e6e6;
-      }
+      .row {
+        padding: 4px 0 4px 0;
+        margin: 0;
 
-      @include dark {
-        border-bottom: 1px solid #181818;;
-      }
+        @include light {
+          border-bottom: 1px solid #e6e6e6;
+        }
 
-      .display-count {
-        strong {
-          display: block;
-          text-align: center;
-          font-size: 16px;
+        @include dark {
+          border-bottom: 1px solid #181818;;
         }
 
-        small {
-          display: block;
-          color: #7d7d7d;
-          text-align: center;
-          font-size: 10px;
+        .display-count {
+          strong {
+            display: block;
+            text-align: center;
+            font-size: 16px;
+          }
+
+          small {
+            display: block;
+            color: #7d7d7d;
+            text-align: center;
+            font-size: 10px;
+          }
         }
       }
-    }
 
-    a.title {
-      display: block;
-      @include light {
-        color: #555555;
-      }
-      @include dark {
-        color: #acacac;
+      a.title {
+        display: block;
+        @include light {
+          color: #555555;
+        }
+        @include dark {
+          color: #acacac;
+        }
+        @include text-truncate;
       }
-      @include text-truncate;
-    }
 
-    a.category {
-      font-size: 11px;
-    }
+      a.category {
+        font-size: 11px;
+      }
 
-    .float-end {
-      color: $gray-light;
-      font-size: 10px;
+      .float-end {
+        color: $gray-light;
+        font-size: 10px;
+      }
     }
-  }
 
-  .overview {
-    margin: 10px 0 0 10px;
+    .overview {
+      margin: 10px 0 0 10px;
 
-    @include light {
-      border-left: 1px solid #dddddd;
-    }
-    @include dark {
-      border-left: 1px solid #242a30;
-    }
+      @include light {
+        border-left: 1px solid #dddddd;
+      }
+      @include dark {
+        border-left: 1px solid #242a30;
+      }
 
-    @include media-breakpoint-down(md) {
-      border-left: none;
-      margin-left: 0;
+      @include media-breakpoint-down(md) {
+        border-left: none;
+        margin-left: 0;
+      }
     }
   }
-}
 
-@include dark {
-  .microblog-wrap {
-    &:after {
-      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #1a1a1a 65%);
+  @include dark {
+    .microblog-wrap {
+      &:after {
+        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #1a1a1a 65%);
+      }
     }
   }
 }
diff --git a/resources/views/layout.twig b/resources/views/layout.twig
index eee7e7de2f..fc3ac4bc32 100644
--- a/resources/views/layout.twig
+++ b/resources/views/layout.twig
@@ -46,7 +46,7 @@
   <link rel="preload" href="/fonts/font-awesome/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="preload" href="/fonts/font-awesome/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin>
 </head>
-<body class="{{ auth_guest() or user('allow_sticky_header') ? 'padding-top' }} {{ __dark_theme ? 'theme-dark' : 'theme-light' }}" data-color-scheme="{{ __color_scheme }}">
+<body class="{{ auth_guest() or user('allow_sticky_header') ? 'padding-top' }} {{ __dark_theme ? 'theme-dark' : 'theme-light' }} {{ lookAndFeel }}" data-color-scheme="{{ __color_scheme }}">
 {{ render_region('body') }}
 
 {% block body %}