diff --git a/src/app/magiclayout.ts b/src/app/magiclayout.ts
index 76d73dc9..81528911 100644
--- a/src/app/magiclayout.ts
+++ b/src/app/magiclayout.ts
@@ -20,7 +20,7 @@ let MagicLayout = {
 
     TermWidthBuffer: 15,
 
-    TabWidth: 154,
+    TabWidth: 155,
 
     ScreenSidebarWidthPadding: 5,
     ScreenSidebarMinWidth: 200,
diff --git a/src/app/root.less b/src/app/root.less
index 9295a7c6..3c43c934 100644
--- a/src/app/root.less
+++ b/src/app/root.less
@@ -27,6 +27,7 @@
     --screentabs-font-size: 12.5px;
     --screentabs-font-weight: 300;
     --screentabs-selected-font-weight: 300;
+    --screen-tab-width: 11.4em;
 
     // floating logo settings
     --floating-logo-width-darwin: 110px;
diff --git a/src/app/workspace/screen/tab.tsx b/src/app/workspace/screen/tab.tsx
index 1b65cfb7..0dacc3af 100644
--- a/src/app/workspace/screen/tab.tsx
+++ b/src/app/workspace/screen/tab.tsx
@@ -85,17 +85,21 @@ class ScreenTab extends React.Component<
                 onContextMenu={(event) => this.openScreenSettings(event, screen)}
                 onDragEnd={this.handleDragEnd}
             >
-                <CenteredIcon className="front-icon">
-                    <TabIcon icon={screen.getTabIcon()} color={screen.getTabColor()} />
-                </CenteredIcon>
-                <div className="tab-name truncate">
-                    {archived}
-                    {screen.name.get()}
-                </div>
-                <div className="end-icons">
-                    <StatusIndicator level={statusIndicatorLevel} runningCommands={runningCommands} />
-                    <ActionsIcon onClick={(e) => this.openScreenSettings(e, screen)} />
+                <div className="background"></div>
+                <div className="screen-tab-inner">
+                    <CenteredIcon className="front-icon">
+                        <TabIcon icon={screen.getTabIcon()} color={screen.getTabColor()} />
+                    </CenteredIcon>
+                    <div className="tab-name truncate">
+                        {archived}
+                        {screen.name.get()}
+                    </div>
+                    <div className="end-icons">
+                        <StatusIndicator level={statusIndicatorLevel} runningCommands={runningCommands} />
+                        <ActionsIcon onClick={(e) => this.openScreenSettings(e, screen)} />
+                    </div>
                 </div>
+                <div className="vertical-line"></div>
             </Reorder.Item>
         );
     }
diff --git a/src/app/workspace/screen/tabs.less b/src/app/workspace/screen/tabs.less
index 236ccf7f..4b05c3f7 100644
--- a/src/app/workspace/screen/tabs.less
+++ b/src/app/workspace/screen/tabs.less
@@ -1,19 +1,16 @@
 @import "@/common/icons/icons.less";
 
+// Theming values
 #main .screen-tabs .screen-tab {
-    border-top: 1px solid transparent;
     font-size: var(--screentabs-font-size);
     line-height: var(--screentabs-line-height);
     font-family: var(--label-font-family);
     font-weight: var(--screentabs-font-weight);
 
-    &:not(:hover) .status-indicator {
-        .status-indicator-visible;
-    }
-
-    &:hover {
-        .actions {
-            .positional-icon-visible;
+    &.is-active {
+        .background {
+            border-top: 1px solid var(--tab-color);
+            background-color: var(--tab-color);
         }
     }
 
@@ -25,17 +22,6 @@
         color: var(--tab-color);
     }
 
-    &.is-active {
-        border-top: 1px solid var(--tab-color);
-        background-color: var(--tab-color);
-        background-image: linear-gradient(
-            rgba(0, 0, 0, 0),
-            rgba(0, 0, 0, 0.5) 15%,
-            rgba(0, 0, 0, 0.7) 30%,
-            rgba(0, 0, 0, 1) 100%
-        );
-    }
-
     &.color-green,
     &.color-default {
         --tab-color: var(--tab-green);
@@ -76,15 +62,9 @@
     &.color-pink {
         --tab-color: var(--tab-pink);
     }
-
-    .web-share-icon {
-        position: relative;
-        top: 1px;
-        margin-right: 3px;
-    }
 }
 
-// #main for selectivity
+// Layout values
 #main .screen-tabs-container {
     display: flex;
     position: relative;
@@ -113,44 +93,74 @@
     .screen-tabs {
         display: flex;
         flex-direction: row;
-        align-items: center;
-
+        height: 100%;
         .screen-tab {
             display: flex;
             flex-direction: row;
-            min-width: 13.6em;
-            max-width: 13.6em;
-            align-items: center;
-            cursor: pointer;
-            padding: 8px 8px 4px 8px; // extra 4px of tab padding to account for horizontal scrollbar (to make tab text look centered)
-
-            .front-icon {
-                .positional-icon-visible;
+            position: relative;
+            .background {
+                // This applies a transparency mask to the background color, as set above, so that it will blend with whatever the theme's background color is.
+                z-index: 1;
+                width: var(--screen-tab-width);
+                mask-image: linear-gradient(
+                    rgba(0, 0, 0, 1),
+                    rgba(0, 0, 0, 0.7) 15%,
+                    rgba(0, 0, 0, 0.5) 30%,
+                    rgba(0, 0, 0, 0) 100%
+                );
             }
+            .screen-tab-inner {
+                display: flex;
+                flex-direction: row;
+                position: absolute;
+                z-index: 2;
+                min-width: var(--screen-tab-width);
+                max-width: var(--screen-tab-width);
+                align-items: center;
+                cursor: pointer;
+                padding: 8px 8px 4px 8px; // extra 4px of tab padding to account for horizontal scrollbar (to make tab text look centered)
+                .front-icon {
+                    .positional-icon-visible;
+                }
 
-            .tab-name {
-                flex-grow: 1;
-            }
+                .tab-name {
+                    flex-grow: 1;
+                }
 
-            &.is-active {
-                border-top: none;
-                opacity: 1;
-                font-weight: var(--screentabs-selected-font-weight);
-            }
+                &.is-active {
+                    border-top: none;
+                    opacity: 1;
+                    font-weight: var(--screentabs-selected-font-weight);
+                }
 
-            &.is-archived {
-                .fa.fa-archive {
-                    margin-right: 4px;
+                &.is-archived {
+                    .fa.fa-archive {
+                        margin-right: 4px;
+                    }
+                }
+
+                // Only one of these will be visible at a time
+                .end-icons {
+                    // This adjusts the position of the icon to account for the default 8px margin on the parent. We want the positional calculations for this icon to assume it is flush with the edge of the screen tab.
+                    margin: 0 -5px 0 0;
+                    line-height: normal;
+                    .tab-index {
+                        font-size: 12.5px;
+                    }
                 }
             }
+            .vertical-line {
+                border-left: 1px solid var(--app-border-color);
+                margin: 10px 0 8px 0;
+            }
 
-            // Only one of these will be visible at a time
-            .end-icons {
-                // This adjusts the position of the icon to account for the default 8px margin on the parent. We want the positional calculations for this icon to assume it is flush with the edge of the screen tab.
-                margin: 0 -8px 0 0;
-                line-height: normal;
-                .tab-index {
-                    font-size: 12.5px;
+            &:not(:hover) .status-indicator {
+                .status-indicator-visible;
+            }
+
+            &:hover {
+                .actions {
+                    .positional-icon-visible;
                 }
             }
         }