diff --git a/public/themes/default.css b/public/themes/default.css
index 731ca04de..a7c1ceb58 100644
--- a/public/themes/default.css
+++ b/public/themes/default.css
@@ -51,7 +51,7 @@
     /* global colors */
     --app-bg-color: black;
     --app-accent-color: rgb(88, 193, 66);
-    --app-accent-bg-color: rgba(88, 193, 66, 0.2);
+    --app-accent-bg-color: rgba(88, 193, 66, 0.25);
     --app-error-color: rgb(229, 77, 46);
     --app-warning-color: rgb(224, 185, 86);
     --app-success-color: rgb(78, 154, 6);
@@ -222,5 +222,5 @@
     --modal-bg-color: var(--app-bg-color);
     --modal-header-bottom-border-color: rgba(241, 246, 243, 0.15);
 
-    --logo-button-hover-bg-color: #1e1e1e;
+    --logo-button-hover-bg-color: var(--app-accent-bg-color);
 }
diff --git a/public/themes/light.css b/public/themes/light.css
index d6b22832a..70179e148 100644
--- a/public/themes/light.css
+++ b/public/themes/light.css
@@ -23,6 +23,7 @@
 
     /* tab color */
     --tab-white: rgb(0, 0, 0, 0.6);
+    --tab-mint: rgb(70, 235, 156);
 
     /* button colors */
     --button-text-color: rgb(50, 50, 50); /* Dark gray for light theme */
@@ -72,6 +73,4 @@
 
     /* toggle colors */
     --toggle-thumb-color: var(--app-bg-color);
-
-    --logo-button-hover-bg-color: #f0f0f0;
 }
diff --git a/src/app/common/elements/mainview.less b/src/app/common/elements/mainview.less
index 224c6a2d4..e5ff15b7c 100644
--- a/src/app/common/elements/mainview.less
+++ b/src/app/common/elements/mainview.less
@@ -9,6 +9,10 @@
         display: none;
     }
 
+    .header-container {
+        border-bottom: 1px solid var(--app-border-color);
+    }
+
     .header {
         -webkit-app-region: drag;
         display: flex;
@@ -18,7 +22,6 @@
         vertical-align: middle;
         padding: 0 10px 0 10px;
         margin: 0;
-        border-bottom: 1px solid var(--app-border-color);
 
         .title {
             font-size: var(--title-font-size);
@@ -42,10 +45,10 @@
 
 // This ensures the tab bar does not collide with the floating logo. The floating logo sits above the sidebar when it is not collapsed, so no additional margin is needed in that case.
 // More margin is given on macOS to account for the traffic light buttons
-#main.platform-darwin.mainsidebar-collapsed .header {
-    margin-left: var(--floating-logo-width-darwin);
+#main.platform-darwin.mainsidebar-collapsed .header-container {
+    padding-left: var(--floating-logo-width-darwin);
 }
 
-#main:not(.platform-darwin).mainsidebar-collapsed .header {
-    margin-left: var(--floating-logo-width);
+#main:not(.platform-darwin).mainsidebar-collapsed .header-container {
+    padding-left: var(--floating-logo-width);
 }
diff --git a/src/app/common/elements/mainview.tsx b/src/app/common/elements/mainview.tsx
index aa6ae65c4..65a3ef65a 100644
--- a/src/app/common/elements/mainview.tsx
+++ b/src/app/common/elements/mainview.tsx
@@ -23,7 +23,7 @@ class MainView extends React.Component<{
                 className={cn("mainview", this.props.className)}
                 style={{ maxWidth: `calc(100vw - ${maxWidthSubtractor}px)` }}
             >
-                <div className="header-container bottom-border">
+                <div className="header-container">
                     <header className="header">
                         <div className="title text-primary">{this.props.title}</div>
                         <div className="close-div hoverEffect" title="Close (Escape)" onClick={this.props.onClose}>