diff --git a/src/app/assets/icons/tab/square.svg b/src/app/assets/icons/tab/square.svg
new file mode 100644
index 000000000..66a08238e
--- /dev/null
+++ b/src/app/assets/icons/tab/square.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96z"/></svg>
\ No newline at end of file
diff --git a/src/app/workspace/screen/tabs.less b/src/app/workspace/screen/tabs.less
index b0ce7f5b1..60d25ff60 100644
--- a/src/app/workspace/screen/tabs.less
+++ b/src/app/workspace/screen/tabs.less
@@ -1,126 +1,75 @@
 @import "../../../index.less";
 
 #main .screen-tabs .screen-tab {
-    &.color-default {
+    &.is-active {
         color: @tab-white-text;
-        &.is-active {
-            color: @tab-white-text;
-            border-radius: 12px 0px 0px 0px;
-            border-top: 1px solid #58c142;
-            background: linear-gradient(
-                180deg,
-                rgba(88, 193, 66, 0.2) 9.34%,
-                rgba(88, 193, 66, 0.03) 44.16%,
-                rgba(88, 193, 66, 0) 86.79%
-            );
+        border-radius: 12px 0px 0px 0px;
+        border-top: 1px solid #58c142;
+        background: linear-gradient(
+            180deg,
+            rgba(88, 193, 66, 0.2) 9.34%,
+            rgba(88, 193, 66, 0.03) 44.16%,
+            rgba(88, 193, 66, 0) 86.79%
+        );
+    }
+    
+    &.color-default {
+        svg.left-icon path {
+            fill: @tab-green;
         }
     }
 
     &.color-green {
-        color: @tab-white-text;
-        background-color: desaturate(@tab-green, 50%);
-        &:hover {
-            background-color: @tab-green;
-        }
-        &.is-active {
-            color: @term-white;
-            background-color: @tab-green;
+        svg.left-icon path {
+            fill: @tab-green;
         }
     }
 
     &.color-orange {
-        color: @tab-black-text;
-        background-color: desaturate(@tab-orange, 30%);
-        &:hover {
-            background-color: @tab-orange;
-        }
-        &.is-active {
-            color: @term-black;
-            background-color: @tab-orange;
+        svg.left-icon path {
+            fill: @tab-orange;
         }
     }
 
     &.color-red {
-        color: @tab-white-text;
-        background-color: desaturate(@tab-red, 40%);
-        &:hover {
-            background-color: @tab-red;
-        }
-        &.is-active {
-            color: @term-white;
-            background-color: @tab-red;
+        svg.left-icon path {
+            fill: @tab-red;
         }
     }
 
     &.color-yellow {
-        color: @tab-black-text;
-        background-color: desaturate(@tab-yellow, 40%);
-        &:hover {
-            background-color: @tab-yellow;
-        }
-        &.is-active {
-            background-color: @tab-yellow;
-            color: @term-black;
+        svg.left-icon path {
+            fill: @tab-yellow;
         }
     }
 
     &.color-blue {
-        color: @tab-white-text;
-        background-color: desaturate(@tab-blue, 50%);
-        &:hover {
-            background-color: @tab-blue;
-        }
-        &.is-active {
-            color: @term-white;
-            background-color: @tab-blue;
+        svg.left-icon path {
+            fill: @tab-blue;
         }
     }
 
     &.color-magenta {
-        color: @tab-white-text;
-        background-color: desaturate(@tab-magenta, 20%);
-        &:hover {
-            background-color: @tab-magenta;
-        }
-        &.is-active {
-            color: @term-white;
-            background-color: @tab-magenta;
+        svg.left-icon path {
+            fill: @tab-magenta;
         }
     }
 
     &.color-cyan {
-        color: @tab-black-text;
-        background-color: desaturate(@tab-cyan, 20%);
-        &:hover {
-            background-color: @tab-cyan;
-        }
-        &.is-active {
-            color: @term-black;
-            background-color: @tab-cyan;
+        svg.left-icon path {
+            fill: @tab-cyan;
         }
     }
 
     &.color-white {
-        color: @tab-black-text;
-        background-color: @term-white;
-        &:hover {
-            background-color: @tab-white;
-        }
-        &.is-active {
-            color: @term-black;
-            background-color: @tab-white;
+        svg.left-icon path {
+            fill: @tab-white;
         }
     }
 
     &.color-black {
-        color: @tab-white-text;
-        background-color: lighten(@tab-black, 20%);
-        &:hover {
-            background-color: @tab-black;
-        }
-        &.is-active {
-            color: @term-white;
-            background-color: @tab-black;
+        svg.left-icon path {
+            fill: @tab-black;
         }
     }
 
diff --git a/src/app/workspace/screen/tabs.tsx b/src/app/workspace/screen/tabs.tsx
index a00d7d4b0..f316f055c 100644
--- a/src/app/workspace/screen/tabs.tsx
+++ b/src/app/workspace/screen/tabs.tsx
@@ -10,6 +10,7 @@ import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import { GlobalModel, GlobalCommandRunner, Session, ScreenLines, Screen } from "../../../model/model";
 import { renderCmdText } from "../../common/common";
+import { ReactComponent as SquareIcon } from "../../assets/icons/tab/square.svg";
 import { ReactComponent as SparkleIcon } from "../../assets/icons/tab/sparkle.svg";
 import { ReactComponent as ActionsIcon } from "../../assets/icons/tab/actions.svg";
 import { ReactComponent as AddIcon } from "../../assets/icons/add.svg";
@@ -128,7 +129,7 @@ class ScreenTabs extends React.Component<{ session: Session }, {}> {
                 onClick={() => this.handleSwitchScreen(screen.screenId)}
                 onContextMenu={(event) => this.openScreenSettings(event, screen)}
             >
-                <SparkleIcon className="icon" />
+                <SquareIcon className="icon left-icon"/>
                 <div className="tab-name truncate">
                     {archived}
                     {webShared}
diff --git a/src/index.less b/src/index.less
index a7db506c2..9cd55830b 100644
--- a/src/index.less
+++ b/src/index.less
@@ -25,7 +25,7 @@
 @term-bright-cyan: #34e2e2;
 @term-bright-white: #ffffff;
 
-@tab-black: rgb(0, 0, 0);
+@tab-black: rgb(50, 50, 50);
 @tab-red: rgb(205, 49, 49);
 @tab-green: rgb(0, 128, 0);
 @tab-orange: rgb(255, 199, 6);