diff --git a/assets/components/LogViewer/LogContainer.vue b/assets/components/LogViewer/LogContainer.vue
index d0685acd..92a9250a 100644
--- a/assets/components/LogViewer/LogContainer.vue
+++ b/assets/components/LogViewer/LogContainer.vue
@@ -1,7 +1,7 @@
 <template>
   <scrollable-view :scrollable="scrollable" v-if="container">
     <template #header v-if="showTitle">
-      <div class="mr-0 columns is-vcentered is-marginless is-hidden-mobile">
+      <div class="mr-0 columns is-vcentered is-marginless is-hidden-mobile has-boxshadow">
         <div class="column is-clipped is-paddingless">
           <container-title @close="$emit('close')" />
         </div>
diff --git a/assets/components/LogViewer/LogDate.vue b/assets/components/LogViewer/LogDate.vue
index 7f94b51f..17eb7218 100644
--- a/assets/components/LogViewer/LogDate.vue
+++ b/assets/components/LogViewer/LogDate.vue
@@ -13,33 +13,7 @@ defineProps<{
   padding-right: 5px;
   border-radius: 3px;
   white-space: nowrap;
-}
-
-@media (prefers-color-scheme: dark) {
-  .date {
-    background-color: #262626;
-    color: #258ccd;
-  }
-}
-
-[data-theme="dark"] {
-  .date {
-    background-color: #262626;
-    color: #258ccd;
-  }
-}
-
-@media (prefers-color-scheme: light) {
-  .date {
-    background-color: #f0f0f0;
-    color: #009900;
-  }
-}
-
-[data-theme="light"] {
-  .date {
-    background-color: #f0f0f0;
-    color: #009900;
-  }
+  background-color: var(--scheme-main-ter);
+  color: #258ccd;
 }
 </style>
diff --git a/assets/components/LogViewer/StatMonitor.vue b/assets/components/LogViewer/StatMonitor.vue
index 696834e3..ddf36671 100644
--- a/assets/components/LogViewer/StatMonitor.vue
+++ b/assets/components/LogViewer/StatMonitor.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="has-text-centered is-relative host" @mouseenter="mouseOver = true" @mouseleave="mouseOver = false">
-    <div class="has-border">
+    <div class="has-border has-boxshadow">
       <stat-sparkline :data="data" @selected-point="onSelectedPoint"></stat-sparkline>
     </div>
     <div class="has-background-body-color is-top-left">
diff --git a/assets/components/ScrollableView.vue b/assets/components/ScrollableView.vue
index dc9b369c..104ce350 100644
--- a/assets/components/ScrollableView.vue
+++ b/assets/components/ScrollableView.vue
@@ -16,7 +16,12 @@
 
     <div class="is-scrollbar-notification">
       <transition name="fade">
-        <button class="button" :class="hasMore ? 'has-more' : ''" @click="scrollToBottom()" v-show="paused">
+        <button
+          class="button has-boxshadow"
+          :class="hasMore ? 'has-more' : ''"
+          @click="scrollToBottom()"
+          v-show="paused"
+        >
           <mdi-light-chevron-double-down />
         </button>
       </transition>
@@ -109,18 +114,18 @@ section {
     button {
       position: fixed;
       bottom: 30px;
-      background-color: var(--secondary-color);
-      transition: background-color 1s ease-out;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+      background-color: var(--primary-color);
+      transition: background-color 0.24s ease-out;
       border: none !important;
-      color: #222;
+      color: #eee;
 
       &.has-more {
-        background-color: var(--primary-color);
+        background-color: var(--secondary-color);
         animation-name: bounce;
         animation-duration: 1000ms;
         animation-fill-mode: both;
-        color: #fff;
+
+        color: #222;
       }
     }
   }
diff --git a/assets/styles.scss b/assets/styles.scss
index b44b3f71..6232ed0e 100644
--- a/assets/styles.scss
+++ b/assets/styles.scss
@@ -75,10 +75,10 @@ $light-toolbar-color: rgba($grey-darker, 0.7);
 
   --border-color: #{$grey-lighter};
   --border-hover-color: var(--secondary-color);
-  --logo-color: #{$grey-darker};
+  --logo-color: var(--secondary-color);
 
   --primary-color: #{$turquoise};
-  --secondary-color: #d8f0ca;
+  --secondary-color: rgb(249 115 22);
 
   --body-background-color: #{$white-bis};
   --action-toolbar-background-color: #{$light-toolbar-color};
@@ -183,6 +183,14 @@ html.has-custom-scrollbars {
   display: contents;
 }
 
+.has-dropshadow {
+  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+}
+
+.has-boxshadow {
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
+
 mark {
   border-radius: 2px;
   background-color: var(--secondary-color);
diff --git a/e2e/cypress/e2e/__image_snapshots__/Dozzle dark mode home screen #0.png b/e2e/cypress/e2e/__image_snapshots__/Dozzle dark mode home screen #0.png
index 2f3f19e7..4af8a2ae 100644
Binary files a/e2e/cypress/e2e/__image_snapshots__/Dozzle dark mode home screen #0.png and b/e2e/cypress/e2e/__image_snapshots__/Dozzle dark mode home screen #0.png differ
diff --git a/e2e/cypress/e2e/__image_snapshots__/Dozzle default mode home screen #0.png b/e2e/cypress/e2e/__image_snapshots__/Dozzle default mode home screen #0.png
index 00a71899..83d55c12 100644
Binary files a/e2e/cypress/e2e/__image_snapshots__/Dozzle default mode home screen #0.png and b/e2e/cypress/e2e/__image_snapshots__/Dozzle default mode home screen #0.png differ