diff --git a/DuckDuckGo/Assets.xcassets/Colors/MutedTabIconColor.colorset/Contents.json b/DuckDuckGo/Assets.xcassets/Colors/MutedTabIconColor.colorset/Contents.json
new file mode 100644
index 0000000000..3fe9b59242
--- /dev/null
+++ b/DuckDuckGo/Assets.xcassets/Colors/MutedTabIconColor.colorset/Contents.json
@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x00",
+          "green" : "0x00",
+          "red" : "0x00"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xFF",
+          "green" : "0xFF",
+          "red" : "0xFE"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/DuckDuckGo/Assets.xcassets/Colors/PinnedTabMuteStateCircleColor.colorset/Contents.json b/DuckDuckGo/Assets.xcassets/Colors/PinnedTabMuteStateCircleColor.colorset/Contents.json
new file mode 100644
index 0000000000..802fa68a4c
--- /dev/null
+++ b/DuckDuckGo/Assets.xcassets/Colors/PinnedTabMuteStateCircleColor.colorset/Contents.json
@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xFF",
+          "green" : "0xFF",
+          "red" : "0xFE"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x00",
+          "green" : "0x00",
+          "red" : "0x00"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/DuckDuckGo/PinnedTabs/View/PinnedTabView.swift b/DuckDuckGo/PinnedTabs/View/PinnedTabView.swift
index a877386433..170ab3092c 100644
--- a/DuckDuckGo/PinnedTabs/View/PinnedTabView.swift
+++ b/DuckDuckGo/PinnedTabs/View/PinnedTabView.swift
@@ -205,7 +205,7 @@ struct PinnedTabInnerView: View {
             ZStack {
                 Circle()
                     .stroke(Color.gray.opacity(0.5), lineWidth: 0.5)
-                    .background(Circle().foregroundColor(colorScheme == .dark ? Color.black : Color.white))
+                    .background(Circle().foregroundColor(Color("PinnedTabMuteStateCircleColor")))
                     .frame(width: 14, height: 14)
                 Image("Audio-Mute")
                     .resizable()
diff --git a/DuckDuckGo/TabBar/View/TabBarViewItem.swift b/DuckDuckGo/TabBar/View/TabBarViewItem.swift
index 62cb475990..2db24aaf81 100644
--- a/DuckDuckGo/TabBar/View/TabBarViewItem.swift
+++ b/DuckDuckGo/TabBar/View/TabBarViewItem.swift
@@ -55,8 +55,7 @@ final class TabBarViewItem: NSCollectionViewItem {
     enum Constants {
         static let textFieldPadding: CGFloat = 32
         static let textFieldPaddingNoFavicon: CGFloat = 12
-        static let textFieldTrailingNoMuteIcon: CGFloat = 8
-        static let textFieldTrailingMuteIconPresent: CGFloat = 32
+        static let textFieldPaddingMuteIconPresent: CGFloat = 56
     }
 
     var widthStage: WidthStage {
@@ -98,7 +97,6 @@ final class TabBarViewItem: NSCollectionViewItem {
 
     @IBOutlet weak var titleTextField: NSTextField!
     @IBOutlet weak var titleTextFieldLeadingConstraint: NSLayoutConstraint!
-    @IBOutlet weak var titleTextFieldTrailingConstraint: NSLayoutConstraint!
     @IBOutlet weak var closeButton: MouseOverButton!
     @IBOutlet weak var rightSeparatorView: ColorView!
     @IBOutlet weak var mouseOverView: MouseOverView!
@@ -127,7 +125,6 @@ final class TabBarViewItem: NSCollectionViewItem {
         setupMenu()
         updateTitleTextFieldMask()
         closeButton.isHidden = true
-        setupMuteOrUnmutedIcon()
     }
 
     override func viewDidLayout() {
@@ -135,7 +132,6 @@ final class TabBarViewItem: NSCollectionViewItem {
 
         updateSubviews()
         updateTitleTextFieldMask()
-        setupMuteOrUnmutedIcon()
     }
 
     override func viewWillDisappear() {
@@ -349,6 +345,7 @@ final class TabBarViewItem: NSCollectionViewItem {
             mouseOverView.mouseOverColor = isSelected || isDragged ? NSColor.clear : NSColor.tabMouseOverColor
         }
 
+        setupMuteOrUnmutedIcon()
         let showCloseButton = (isMouseOver && !widthStage.isCloseButtonHidden) || isSelected
         closeButton.isHidden = !showCloseButton
         updateSeparatorView()
@@ -432,16 +429,32 @@ final class TabBarViewItem: NSCollectionViewItem {
     }
 
     private func setupMuteOrUnmutedIcon() {
+        setupMutedTabIconVisibility()
+        setupMutedTabIconColor()
+        setupMutedTabIconPosition()
+    }
+
+    private func setupMutedTabIconVisibility() {
         switch delegate?.tabBarViewItemAudioState(self) {
         case .muted:
             mutedTabIcon.isHidden = false
         default:
             mutedTabIcon.isHidden = true
         }
+    }
 
-        titleTextFieldTrailingConstraint.constant = mutedTabIcon.isHidden ? Constants.textFieldTrailingNoMuteIcon : Constants.textFieldTrailingMuteIconPresent
+    private func setupMutedTabIconColor() {
+        mutedTabIcon.image?.isTemplate = true
+        mutedTabIcon.contentTintColor = NSColor(named: "MutedTabIconColor")
     }
 
+    private func setupMutedTabIconPosition() {
+        if !mutedTabIcon.isHidden {
+            titleTextFieldLeadingConstraint.constant = Constants.textFieldPaddingMuteIconPresent
+        } else {
+            titleTextFieldLeadingConstraint.constant = faviconWrapperView.isHidden ? Constants.textFieldPaddingNoFavicon : Constants.textFieldPadding
+        }
+    }
 }
 
 extension TabBarViewItem: NSMenuDelegate {
diff --git a/DuckDuckGo/TabBar/View/TabBarViewItem.xib b/DuckDuckGo/TabBar/View/TabBarViewItem.xib
index 1e9d4995ac..97b8979631 100644
--- a/DuckDuckGo/TabBar/View/TabBarViewItem.xib
+++ b/DuckDuckGo/TabBar/View/TabBarViewItem.xib
@@ -14,12 +14,12 @@
             <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
             <subviews>
                 <imageView hidden="YES" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="Dwg-SU-uiu" userLabel="Muted Tab Icon">
-                    <rect key="frame" x="255" y="3" width="16.5" height="27"/>
+                    <rect key="frame" x="36" y="9" width="16" height="16"/>
                     <constraints>
                         <constraint firstAttribute="height" constant="16" id="ILs-aB-D7E"/>
                         <constraint firstAttribute="width" constant="16" id="Qyf-Aw-VnE"/>
                     </constraints>
-                    <imageCell key="cell" refusesFirstResponder="YES" alignment="left" imageScaling="proportionallyDown" image="NSTouchBarAudioOutputMuteTemplate" id="nSg-1b-1pf"/>
+                    <imageCell key="cell" refusesFirstResponder="YES" alignment="left" imageScaling="proportionallyDown" image="Audio-Mute" id="nSg-1b-1pf"/>
                 </imageView>
                 <customView translatesAutoresizingMaskIntoConstraints="NO" id="jlg-2n-tzm" customClass="MouseOverView" customModule="DuckDuckGo_Privacy_Browser" customModuleProvider="target">
                     <rect key="frame" x="0.0" y="1" width="300" height="33"/>
@@ -29,7 +29,7 @@
                         </userDefinedRuntimeAttribute>
                     </userDefinedRuntimeAttributes>
                 </customView>
-                <textField wantsLayer="YES" horizontalHuggingPriority="251" verticalHuggingPriority="750" translatesAutoresizingMaskIntoConstraints="NO" id="DFD-8r-YGx" userLabel="Title Text Field">
+                <textField wantsLayer="YES" focusRingType="none" horizontalHuggingPriority="251" verticalHuggingPriority="750" translatesAutoresizingMaskIntoConstraints="NO" id="DFD-8r-YGx" userLabel="Title Text Field">
                     <rect key="frame" x="30" y="9" width="264" height="16"/>
                     <constraints>
                         <constraint firstAttribute="height" constant="16" id="vWW-sG-CAf"/>
@@ -133,7 +133,6 @@
             <constraints>
                 <constraint firstAttribute="trailing" secondItem="jlg-2n-tzm" secondAttribute="trailing" id="0eL-gX-odc"/>
                 <constraint firstItem="DFD-8r-YGx" firstAttribute="leading" secondItem="Hz6-mo-xeY" secondAttribute="leading" constant="32" id="4P8-mH-XGb"/>
-                <constraint firstItem="Dwg-SU-uiu" firstAttribute="leading" relation="greaterThanOrEqual" secondItem="A6g-eG-dOW" secondAttribute="leading" constant="4" id="6RL-TB-P8q"/>
                 <constraint firstItem="XdB-Qn-iD9" firstAttribute="centerY" secondItem="Hz6-mo-xeY" secondAttribute="centerY" id="6wl-2B-Woa"/>
                 <constraint firstAttribute="trailing" secondItem="XdB-Qn-iD9" secondAttribute="trailing" priority="900" constant="8" id="BAO-r4-OkC"/>
                 <constraint firstItem="jlg-2n-tzm" firstAttribute="leading" secondItem="Hz6-mo-xeY" secondAttribute="leading" id="DOd-Y3-APh"/>
@@ -147,9 +146,9 @@
                 <constraint firstAttribute="bottom" secondItem="vuD-rY-Vzl" secondAttribute="bottom" constant="8" id="Pgs-Ex-Cp9"/>
                 <constraint firstItem="A6g-eG-dOW" firstAttribute="leading" secondItem="Hz6-mo-xeY" secondAttribute="leading" constant="8" id="TSx-41-S2A"/>
                 <constraint firstAttribute="trailing" secondItem="opQ-Od-dCO" secondAttribute="trailing" id="WPC-fb-K22"/>
-                <constraint firstItem="vuD-rY-Vzl" firstAttribute="leading" secondItem="Dwg-SU-uiu" secondAttribute="trailing" constant="4" id="XaB-33-dqa"/>
                 <constraint firstItem="A6g-eG-dOW" firstAttribute="centerY" secondItem="Hz6-mo-xeY" secondAttribute="centerY" id="aQg-CK-diJ"/>
                 <constraint firstItem="890-3t-v5O" firstAttribute="top" secondItem="Hz6-mo-xeY" secondAttribute="top" id="giH-0s-4s4"/>
+                <constraint firstItem="Dwg-SU-uiu" firstAttribute="leading" secondItem="A6g-eG-dOW" secondAttribute="trailing" constant="4" id="h0G-ek-exQ"/>
                 <constraint firstItem="vuD-rY-Vzl" firstAttribute="leading" secondItem="XdB-Qn-iD9" secondAttribute="trailing" constant="4" id="lqC-R5-KOi"/>
                 <constraint firstItem="DFD-8r-YGx" firstAttribute="centerY" secondItem="Hz6-mo-xeY" secondAttribute="centerY" id="oUc-dt-omj"/>
                 <constraint firstAttribute="trailing" secondItem="890-3t-v5O" secondAttribute="trailing" id="pJ6-DF-7Q7"/>
@@ -176,15 +175,14 @@
                 <outlet property="tabLoadingPermissionLeadingConstraint" destination="uNR-JN-6RT" id="r7F-38-4Nx"/>
                 <outlet property="titleTextField" destination="DFD-8r-YGx" id="6mj-b0-Oq3"/>
                 <outlet property="titleTextFieldLeadingConstraint" destination="4P8-mH-XGb" id="mKz-Wl-mQJ"/>
-                <outlet property="titleTextFieldTrailingConstraint" destination="L7J-mr-jLh" id="EfM-60-PKT"/>
                 <outlet property="view" destination="Hz6-mo-xeY" id="DwG-v1-cn3"/>
             </connections>
         </collectionViewItem>
     </objects>
     <resources>
+        <image name="Audio-Mute" width="12" height="12"/>
         <image name="Camera-Tab-Active" width="16" height="12"/>
         <image name="Close" width="16" height="16"/>
-        <image name="NSTouchBarAudioOutputMuteTemplate" width="17" height="20"/>
         <namedColor name="ButtonColor">
             <color red="0.28627450980392155" green="0.28627450980392155" blue="0.28627450980392155" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
         </namedColor>