diff --git a/ui/StatusQ/sandbox/Layout.qml b/ui/StatusQ/sandbox/Layout.qml
index baeec06eac..dcb7fcf852 100644
--- a/ui/StatusQ/sandbox/Layout.qml
+++ b/ui/StatusQ/sandbox/Layout.qml
@@ -28,6 +28,8 @@ GridLayout {
             icon.name: "chat"
             badge.value: 33
             badge.visible: true
+            badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+            badge.border.width: 2
             tooltip.text: "Chat"
         }
     }
@@ -37,6 +39,8 @@ GridLayout {
             icon.name: "chat"
             badge.value: 33
             badge.visible: true
+            badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+            badge.border.width: 2
             tooltip.text: "Chat"
         }
 
@@ -72,7 +76,7 @@ GridLayout {
                 badge.visible: true
                 badge.anchors.rightMargin: 4
                 badge.anchors.topMargin: 5
-                badge.border.color: Theme.palette.statusAppNavBar.backgroundColor
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                 badge.border.width: 2
 
                 tooltip.text: "Profile"
@@ -85,6 +89,8 @@ GridLayout {
             icon.name: "chat"
             badge.value: 33
             badge.visible: true
+            badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+            badge.border.width: 2
             tooltip.text: "Chat"
         }
 
@@ -118,6 +124,8 @@ GridLayout {
             icon.name: "chat"
             badge.value: 33
             badge.visible: true
+            badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+            badge.border.width: 2
             tooltip.text: "Chat"
         }
 
@@ -166,7 +174,7 @@ GridLayout {
                 badge.visible: true
                 badge.anchors.rightMargin: 4
                 badge.anchors.topMargin: 5
-                badge.border.color: Theme.palette.statusAppNavBar.backgroundColor
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                 badge.border.width: 2
 
                 tooltip.text: "Profile"
@@ -180,6 +188,8 @@ GridLayout {
             icon.name: "chat"
             badge.value: 33
             badge.visible: true
+            badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+            badge.border.width: 2
             tooltip.text: "Chat"
         }
 
@@ -247,7 +257,7 @@ GridLayout {
                 badge.visible: true
                 badge.anchors.rightMargin: 4
                 badge.anchors.topMargin: 5
-                badge.border.color: Theme.palette.statusAppNavBar.backgroundColor
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                 badge.border.width: 2
 
                 tooltip.text: "Profile"
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
index 3300436bcc..ee5708dc77 100644
--- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
+++ b/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
@@ -139,6 +139,8 @@ ThemePalette {
 
     property QtObject statusBadge: QtObject {
         property color foregroundColor: baseColor3
+        property color borderColor: baseColor5
+        property color hoverBorderColor: "#353A4D"
     }
 }
 
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
index dad070a505..a347aa5c23 100644
--- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
+++ b/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
@@ -139,6 +139,8 @@ ThemePalette {
 
     property QtObject statusBadge: QtObject {
         property color foregroundColor: white
+        property color borderColor: baseColor4
+        property color hoverBorderColor: "#DDE3F3"
     }
 }
 
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml b/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
index df9f15bd8d..ba0d4a5643 100644
--- a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
+++ b/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
@@ -100,6 +100,8 @@ QtObject {
 
     property QtObject statusBadge: QtObject {
         property color foregroundColor
+        property color borderColor
+        property color hoverBorderColor
     }
 
     function alphaColor(color, alpha) {