diff --git a/app/Domain/Icon/FontAwesomeFree.php b/app/Domain/Icon/FontAwesomeFree.php
index fb42b7229..56e72d237 100644
--- a/app/Domain/Icon/FontAwesomeFree.php
+++ b/app/Domain/Icon/FontAwesomeFree.php
@@ -29,9 +29,6 @@ public function icons(): array
             'loginGithub'                               => 'fab fa-github',
 
             // homepage
-            'microblogsPopular'                         => 'far fa-comments',
-            'reputationRanking'                         => 'fas fa-star',
-            'forumNews'                                 => 'fas fa-star',
             'viewersOnlineLocal'                        => 'fas fa-eye',
             'viewersOnlineGlobal'                       => 'fas fa-users',
             'homepageActivityMicroblog'                 => 'far fa-person',
diff --git a/app/Services/Session/Renderer.php b/app/Services/Session/Renderer.php
index 5cd5a63a4..9c1f6af99 100644
--- a/app/Services/Session/Renderer.php
+++ b/app/Services/Session/Renderer.php
@@ -1,7 +1,7 @@
 <?php
 namespace Coyote\Services\Session;
 
-use Coyote\Domain\Online\SessionRepository;
+use Coyote\Domain\Online\FakeSessionRepository;
 use Coyote\Domain\Online\Viewers;
 use Coyote\Domain\Online\ViewersStore;
 use Coyote\Domain\Spacer;
@@ -13,9 +13,9 @@ class Renderer
     private Spacer $spacer;
 
     public function __construct(
-        private SessionRepository $session,
-        private ViewersStore      $store,
-        private Request           $request,
+        private FakeSessionRepository $session,
+        private ViewersStore          $store,
+        private Request               $request,
     )
     {
         $this->spacer = new Spacer(8);
diff --git a/public/img/stream-last-feed.png b/public/img/stream-last-feed.png
deleted file mode 100644
index 1bc235130..000000000
Binary files a/public/img/stream-last-feed.png and /dev/null differ
diff --git a/resources/feature/theme/theme.scss b/resources/feature/theme/theme.scss
index 5fa39cdb4..930f6cb18 100644
--- a/resources/feature/theme/theme.scss
+++ b/resources/feature/theme/theme.scss
@@ -21,3 +21,17 @@
     }
   }
 }
+
+@mixin theme {
+  /**
+   * The dark() and light() mixins increase selector specificity.
+   * In some cases, it's necessary to apply a common style to both
+   * themes, overriding a previously defined style. 
+   * To achieve this, we need to artificially elevate the specificity 
+   * of the style.
+   */
+  body.theme-light &,
+  body.theme-dark & {
+    @content;
+  }
+}
diff --git a/resources/js/components/microblog/comment.vue b/resources/js/components/microblog/comment.vue
index 293ab662f..0a4aae7c7 100644
--- a/resources/js/components/microblog/comment.vue
+++ b/resources/js/components/microblog/comment.vue
@@ -27,26 +27,25 @@
             </a>
           </li>
           <li class="list-inline-item">
-            <a
+            <span
               @click="checkAuth(vote, comment)"
               @mouseenter.once="loadVoters(comment)"
               :aria-label="commentVoters"
               :class="{'vote-active': comment.is_voted}"
-              href="javascript:"
               data-balloon-pos="up"
               data-balloon-break>
               {{ commentLabel }}
-            </a>
+            </span>
           </li>
           <li class="list-inline-item">
-            <a @click="checkAuth(reply)" href="javascript:">
+            <span @click="checkAuth(reply)">
               Odpowiedz
-            </a>
+            </span>
           </li>
           <li v-if="isAuthorized" class="list-inline-item">
-            <a href="javascript:" :data-metadata="comment.metadata" :data-url="comment.url">
+            <span :data-metadata="comment.metadata" :data-url="comment.url">
               Zgłoś
-            </a>
+            </span>
           </li>
         </ul>
 
diff --git a/resources/sass/core.scss b/resources/sass/core.scss
index 1ea46079a..1158b9d95 100644
--- a/resources/sass/core.scss
+++ b/resources/sass/core.scss
@@ -47,7 +47,6 @@
 @import "core/dark_flash";
 @import "core/dark_footer";
 @import "core/dark_header";
-@import "core/dark_homepage";
 @import "core/dark_input";
 @import "core/dark_job";
 @import "core/dark_job_offers";
diff --git a/resources/sass/core/_dark_homepage.scss b/resources/sass/core/_dark_homepage.scss
deleted file mode 100644
index f3136a332..000000000
--- a/resources/sass/core/_dark_homepage.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-body.theme-dark {
-  #box-forum {
-    .card.card-forum {
-      .nav.nav-forum {
-        border-bottom: 1px solid #2f2f2f;
-
-        .nav-item .nav-link {
-          color: #acacac;
-
-          &:hover {
-            border-color: #404040;
-          }
-
-          &.active {
-            color: #dedede;
-            border-bottom: 2px solid #d7661c;
-          }
-        }
-      }
-
-      #box-forum-headline {
-        .tab-content .tab-pane {
-          .row {
-            border-bottom: 1px solid #2f2f2f;
-
-            &:nth-child(even) {
-              background-color: unset;
-            }
-          }
-
-          a.title {
-            color: #acacac;
-          }
-
-          small {
-            color: #7d7d7d;
-          }
-        }
-      }
-
-      #stream-wrapper {
-        .media {
-          .media-object {
-            border: 1px solid #242a30;
-            background: #121212;
-          }
-
-          .homepage-activity.post,
-          .homepage-activity.comment {
-            color: #acacac;
-            border-color: #2f2f2f;
-            background: #121212;
-            box-shadow: 0 1px 2px 0 #121212;
-
-            &:after {
-              color: inherit;
-            }
-          }
-        }
-
-        .overview {
-          border-left-color: #242a30;
-        }
-
-        small {
-          color: #7d7d7d;
-        }
-
-        strong {
-          border-left-color: #2f2f2f;
-        }
-      }
-    }
-  }
-
-  h2.h4,
-  h4 {
-    color: #c8c8c8;
-  }
-
-  .microblog-wrap {
-    &:after {
-      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #1a1a1a 65%);
-    }
-  }
-}
diff --git a/resources/sass/core/_panels.scss b/resources/sass/core/_panels.scss
index fb7a35fee..b5a27a5c5 100644
--- a/resources/sass/core/_panels.scss
+++ b/resources/sass/core/_panels.scss
@@ -6,10 +6,6 @@
   margin-bottom: 18px; // backward compatibility. in bootstrap 3 panel have margin-bottom
 }
 
-.card-default {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
-}
-
 .box {
   > h4 {
     position: relative;
diff --git a/resources/sass/pages/_homepage.scss b/resources/sass/pages/_homepage.scss
index 185af9237..865df0a42 100644
--- a/resources/sass/pages/_homepage.scss
+++ b/resources/sass/pages/_homepage.scss
@@ -18,24 +18,117 @@
   }
 }
 
+@include light {
+  color: #646466;
+  background: #f0f2f5;
+}
+
+@include dark {
+  color: #c8c8c8;
+  background: #0f0f0f;
+}
+
 .scope-homepage {
+  h2 {
+    font-size: 1.1em;
+  }
+
   h4.heading {
-    border: none;
+    @include theme { // this just overrides previous dark theme
+      border: none;
+    }
   }
 
-  @include light {
-    .default-avatar {
-      color: #00a538;
-      background: #e7f7e6;
+  a {
+    @include light {
+      color: #005b12;
+    }
+    @include dark {
+      color: #bdd5c3;
     }
   }
 
-  @include dark {
-    .default-avatar {
+  .nav-pills {
+    .nav-link {
+      transition: none;
+    }
+
+    .nav-link[href] {
+      cursor: pointer;
+    }
+
+    @include theme {
+      .nav-link {
+        color: #777777;
+
+        &.active {
+          color: black;
+        }
+      }
+    }
+
+    .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-comments .media a.username {
+        @include dark {
+          color: #bdd5c3;
+        }
+      }
+    }
+
+    .microblog-actions .btn {
+      @include light {
+        color: #777777;
+      }
+      @include dark {
+        color: #8f9ba5;
+      }
+    }
+  }
+
+  .default-avatar {
+    @include light {
+      color: #00a538;
+      background: #e7f7e6;
+    }
+    @include dark {
       color: #78de13;
       background: #0a1203;
     }
   }
+
+  .card {
+    border: none;
+    box-shadow: none;
+  }
+
+  .card-tile {
+    border-radius: 6px;
+    @include light {
+      background: #eaecf1;
+      border: 1px solid #dde3ee;
+    }
+    @include dark {
+      background: transparent;
+      border: 1px solid transparent;
+    }
+  }
 }
 
 .card-reputation {
@@ -71,7 +164,7 @@
       @include light {
         background: linear-gradient(270deg, #00a538 0%, #ffffff 100%);
       }
-      
+
       @include dark {
         background: linear-gradient(270deg, #80ff00 0%, #1a1a1a 100%);
       }
@@ -125,24 +218,106 @@
 
 #box-forum {
   #stream-wrapper {
-    background: url('/img/stream-last-feed.png') no-repeat;
-    padding-top: 25px;
     padding-left: 2px;
 
     @include media-breakpoint-down(xl) {
-      margin-top: 20px;
       background-position-x: 10px;
       padding-left: 15px;
     }
-  }
 
-  #stream {
-    height: 365px;
-    position: relative;
-    overflow: hidden;
+    #stream {
+      height: 365px;
+      position: relative;
+      overflow: hidden;
 
-    @include media-breakpoint-down(md) {
-      padding-left: 15px;
+      @include media-breakpoint-down(md) {
+        padding-left: 15px;
+      }
+
+      .media {
+        padding: 0 0 0 20px;
+        font-size: 11px;
+        position: relative;
+        overflow: visible;
+
+        @include media-breakpoint-down(md) {
+          padding: 0;
+        }
+
+        &:not(:first-child) {
+          margin-top: 15px;
+        }
+
+        .homepage-activity {
+          border-radius: 50%;
+          position: absolute;
+          width: 20px;
+          height: 20px;
+          left: -11px;
+          top: 8px;
+
+          .activity-icon {
+            margin-top: 2px;
+            text-align: center;
+          }
+
+          @include light {
+            border: 1px solid $card-border-color;
+            background: #fff;
+          }
+          @include dark {
+            border: 1px solid #2f2f2f;
+            background: #121212;
+          }
+        }
+
+        .media-object {
+          border: 1px solid #d0d0d0;
+          width: 42px;
+          background: #fff;
+          padding: 2px;
+          border-radius: 3px;
+
+          img, svg {
+            max-width: 100%;
+          }
+
+          @include dark {
+            border: 1px solid #242a30;
+            background: #121212;
+          }
+        }
+
+        .media-body {
+          min-width: 0; // makes flex children not exceed parent width
+
+          p {
+            margin: 0;
+            @include text-truncate;
+          }
+
+          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;
+          }
+        }
+      }
     }
   }
 
@@ -150,10 +325,17 @@
     margin-top: 20px;
 
     .row {
-      border-bottom: 1px solid #e6e6e6;
       padding: 4px 0 4px 0;
       margin: 0;
 
+      @include light {
+        border-bottom: 1px solid #e6e6e6;
+      }
+
+      @include dark {
+        border-bottom: 1px solid #181818;;
+      }
+
       .display-count {
         strong {
           display: block;
@@ -168,16 +350,17 @@
           font-size: 10px;
         }
       }
-
-      &:nth-child(even) {
-        background-color: #f8f8f8;
-      }
     }
 
     a.title {
-      color: $gray;
       display: block;
-      @include text-truncate();
+      @include light {
+        color: #555555;
+      }
+      @include dark {
+        color: #acacac;
+      }
+      @include text-truncate;
     }
 
     a.category {
@@ -191,88 +374,26 @@
   }
 
   .overview {
-    border-left: 1px solid $card-border-color;
     margin: 10px 0 0 10px;
 
-    @include media-breakpoint-down(md) {
-      border-left: none;
-      margin-left: 0;
+    @include light {
+      border-left: 1px solid #dddddd;
     }
-  }
-
-  .media {
-    padding: 0 0 0 20px;
-    font-size: 11px;
-    position: relative;
-    overflow: visible;
-
-    &:not(:first-child) {
-      margin-top: 15px;
-    }
-
-    .homepage-activity {
-      box-shadow: 0 1px 2px #ccc;
-      border-radius: 50%;
-      border: 1px solid $card-border-color;
-      background: #fff;
-      position: absolute;
-      width: 20px;
-      height: 20px;
-      left: -11px;
-      top: 8px;
-
-      .activity-icon {
-        margin-top: 2px;
-        text-align: center;
-        color: $gray-light;
-      }
-
-      &::selection {
-        text-shadow: none;
-      }
+    @include dark {
+      border-left: 1px solid #242a30;
     }
 
     @include media-breakpoint-down(md) {
-      padding: 0;
-    }
-
-    .default-avatar {
-      svg {
-        width: 38px;
-        height: 38px;
-      }
-    }
-  }
-
-  .media-body {
-    min-width: 0; // makes flex children not exceed parent width
-
-    p {
-      margin: 0;
-      @include text-truncate();
-    }
-
-    strong {
-      font-weight: normal;
-      border-left: 1px solid $card-border-color;
-      padding: 0 0 0 10px;
-      margin: 10px 0 0 1px;
-      display: block;
-      font-family: "Open Sans", sans-serif;
+      border-left: none;
+      margin-left: 0;
     }
   }
+}
 
-  .media-object {
-    border: 1px solid #d0d0d0;
-    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
-    width: 42px;
-    background: #fff;
-    padding: 2px;
-    border-radius: 3px;
-
-    img, svg {
-      max-width: 100%;
+@include dark {
+  .microblog-wrap {
+    &:after {
+      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #1a1a1a 65%);
     }
   }
 }
-
diff --git a/resources/views/home.twig b/resources/views/home.twig
index 7f0430960..c177ab1d4 100644
--- a/resources/views/home.twig
+++ b/resources/views/home.twig
@@ -10,30 +10,32 @@
 
   <div class="row scope-homepage">
     <main class="col-md-8">
-      <section id="box-forum" class="box mt-4">
+      <section id="box-forum" class="mt-4">
         <h2 class="h4">
-          {{ icon('forumNews') }}
           Co nowego na forum?
         </h2>
-        <div class="card card-forum">
+        <div class="card card-tile">
           <div class="card-body">
             <div class="row">
               <div class="col-lg-6">
                 <ul id="forum-tabs" class="nav nav-pills nav-forum">
                   <li class="nav-item">
-                    <a class="nav-link {{ settings.topicMode == 'interesting' ? 'active' }}"
-                       title="Zobacz najciekawsze wątki na forum"
-                       href="#interesting"
-                       role="tab" data-bs-toggle="tab">
+                    <span
+                        class="nav-link {{ settings.topicMode == 'interesting' ? 'active' }}"
+                        title="Zobacz najciekawsze wątki na forum"
+                        href="#interesting"
+                        data-bs-toggle="tab">
                       Najciekawsze
-                    </a>
+                    </span>
                   </li>
                   <li class="nav-item">
-                    <a class="nav-link {{ settings.topicMode == 'newest' ? 'active' }}"
-                       title="Lista najnowszych wątków na forum" href="#newest"
-                       role="tab" data-bs-toggle="tab">
+                    <span
+                        class="nav-link {{ settings.topicMode == 'newest' ? 'active' }}"
+                        title="Lista najnowszych wątków na forum"
+                        href="#newest"
+                        data-bs-toggle="tab">
                       Nowe wątki
-                    </a>
+                    </span>
                   </li>
                 </ul>
 
@@ -97,6 +99,13 @@
               </div>
 
               <div id="stream-wrapper" class="col-lg-6">
+                <ul class="nav nav-pills ">
+                  <li class="nav-item">
+                    <span class="nav-link">
+                      Ostatnia aktywność
+                    </span>
+                  </li>
+                </ul>
                 <div id="stream">
                   <div class="overview">
                     {% for activity in activities %}
@@ -137,10 +146,7 @@
       </section>
 
       <section id="js-microblog" class="box">
-        <h4>
-          {{ icon('microblogsPopular') }}
-          Popularne wpisy na mikroblogu
-        </h4>
+        <h4>Popularne wpisy na mikroblogu</h4>
         <vue-microblog
             v-for="microblog in microblogs" :key="microblog.id" :microblog="microblog"
             :wrap="true"></vue-microblog>
@@ -165,11 +171,7 @@
         </div>
 
         <section class="box mt-4">
-          <h4 class="heading">
-            {{ icon('reputationRanking') }}
-            Reputacja użytkowników
-          </h4>
-
+          <h4 class="heading">Reputacja użytkowników</h4>
           <div class="card card-default card-reputation tab-content">
             <div class="pt-2 px-3">
               <div id="reputation-tabs" class="nav nav-pills">
@@ -195,16 +197,17 @@
                     <a href="{{ route('profile', [user.id]) }}">
                       {{ user_avatar(user.photo, user.name) }}
                     </a>
-                    <div class="flex-grow-1 ms-3">
+                    <div class="flex-grow-1 ms-4">
                       <a class="ranking-username" data-user-id="{{ user.id }}" href="{{ route('profile', [user.id]) }}">
                         {{ user.name }}
                       </a>
                       <div class="mt-1 d-flex align-items-center">
-                        <span class="flex-shrink-0">
+                        <span class="flex-shrink-0 me-4">
                           <strong>{{ user.reputation }}</strong> pkt
                         </span>
-                        <div class="flex-grow-1 me-4 pe-2">
-                          <div class="ranking-percentage-ray" style="width:{{ user.percentage|round }}%;"></div>
+                        <div class="flex-grow-1 me-4 pe-4">
+                          <div class="ranking-percentage-ray"
+                               style="width:{{ user.percentage|round }}%; max-width:100%;"></div>
                         </div>
                       </div>
                     </div>