diff --git a/assets/active.png b/assets/active.png
new file mode 100644
index 0000000..3a50ad1
Binary files /dev/null and b/assets/active.png differ
diff --git a/assets/inactive.png b/assets/inactive.png
new file mode 100644
index 0000000..2a86647
Binary files /dev/null and b/assets/inactive.png differ
diff --git a/package.json b/package.json
index 68cbd9f..6e65f3f 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,17 @@
       "gecko": {
         "id": "{3fd86354-c73f-4395-9e26-2c5c984579bf}"
       }
-    }
+    },
+    "web_accessible_resources": [
+      {
+        "resources": [
+          "assets/active.png",
+          "assets/inactive.png"
+        ],
+        "matches": [
+          "<all_urls>"
+        ]
+      }
+    ]
   }
 }
diff --git a/src/components/ToggleButton.tsx b/src/components/ToggleButton.tsx
index 3a9f771..1d9481b 100644
--- a/src/components/ToggleButton.tsx
+++ b/src/components/ToggleButton.tsx
@@ -36,7 +36,7 @@ export function ToggleButton(props: ToggleButtonProps) {
         </button>
       </div>
       <p>
-        Extension {props.active ? 'enabled' : 'disabled'} <br /> on <strong>{props.domain}</strong>
+        Extension <strong>{props.active ? 'enabled' : 'disabled'}</strong> <br /> on <strong>{props.domain}</strong>
       </p>
     </div>
   );
diff --git a/src/hooks/useDomainWhitelist.ts b/src/hooks/useDomainWhitelist.ts
index 73b8e51..a7cc42c 100644
--- a/src/hooks/useDomainWhitelist.ts
+++ b/src/hooks/useDomainWhitelist.ts
@@ -27,6 +27,11 @@ export function useToggleWhitelistDomain(domain: string) {
   const { domainWhitelist, addDomain, removeDomain } = useDomainWhitelist();
   const isWhitelisted = domainWhitelist.includes(domain);
   const { grantPermission } = usePermission();
+  const iconPath = (chrome || browser).runtime.getURL(isWhitelisted ? 'assets/active.png' : 'assets/inactive.png');
+
+  (chrome || browser).action.setIcon({
+    path: iconPath,
+  });
 
   const toggle = useCallback(() => {
     if (!isWhitelisted) {