diff --git a/src/components/BottomLabel.css b/src/components/BottomLabel.css
index c68a113..f2cb1ae 100644
--- a/src/components/BottomLabel.css
+++ b/src/components/BottomLabel.css
@@ -1,6 +1,6 @@
 .bottom-label {
   position: absolute;
-  bottom: .5rem;
+  bottom: .25rem;
   display: flex;
   align-items: center;
   gap: .5rem;
@@ -12,4 +12,5 @@
   width: 2px;
   height: 2px;
   background: currentColor;
+  border-radius: 100px;
 }
\ No newline at end of file
diff --git a/src/components/DisabledScreen.css b/src/components/DisabledScreen.css
new file mode 100644
index 0000000..15648a7
--- /dev/null
+++ b/src/components/DisabledScreen.css
@@ -0,0 +1,22 @@
+.disabled {
+  color: white;
+  text-align: center;
+  max-width: 230px;
+  font-size: 16px;
+}
+
+.disabled svg {
+  display: block;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin: 0 auto;
+  color: #B44868;
+}
+
+.disabled p {
+  color: #4A4864;
+}
+
+.disabled strong {
+  color: white;
+}
\ No newline at end of file
diff --git a/src/components/DisabledScreen.tsx b/src/components/DisabledScreen.tsx
new file mode 100644
index 0000000..426e113
--- /dev/null
+++ b/src/components/DisabledScreen.tsx
@@ -0,0 +1,13 @@
+import './DisabledScreen.css';
+import { Icon } from './Icon';
+
+export function DisabledScreen() {
+  return (
+    <div className="disabled">
+      <Icon name="warningCircle" />
+      <p>
+        The <strong>movie-web extension</strong> can not be used on this page
+      </p>
+    </div>
+  );
+}
diff --git a/src/components/Frame.css b/src/components/Frame.css
index 2b02f34..100be9b 100644
--- a/src/components/Frame.css
+++ b/src/components/Frame.css
@@ -1,4 +1,4 @@
 .frame {
-  background-color: #171720;
-  background-image: radial-gradient(271.48% 132.05% at 136.13% 65.62%, rgba(37, 26, 60, 0.50) 0%, rgba(28, 28, 44, 0.00) 100%), radial-gradient(671.15% 123.02% at 76.68% -34.38%, #2E2E5B 0%, rgba(23, 23, 32, 0.00) 100%);
+  background-color: #0a080e;
+  background-image: radial-gradient(271.48% 132.05% at 136.13% 65.62%, #271945b3 0%, #1c1c2c00 100%), radial-gradient(671.15% 123.02% at 76.68% -34.38%, #272753 0%, #17172000 100%);
 }
\ No newline at end of file
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index a7011fe..c3fa918 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -1,5 +1,6 @@
 const icons = {
   power: `<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#filter0_i_1153_291)"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.4375 2.875C16.4375 2.36114 16.2334 1.86833 15.87 1.50498C15.5067 1.14163 15.0139 0.9375 14.5 0.9375C13.9861 0.9375 13.4933 1.14163 13.13 1.50498C12.7666 1.86833 12.5625 2.36114 12.5625 2.875V15.7917C12.5625 16.3055 12.7666 16.7983 13.13 17.1617C13.4933 17.525 13.9861 17.7292 14.5 17.7292C15.0139 17.7292 15.5067 17.525 15.87 17.1617C16.2334 16.7983 16.4375 16.3055 16.4375 15.7917V2.875ZM9.14475 6.42708C9.35678 6.28621 9.53899 6.10495 9.68097 5.89366C9.82295 5.68237 9.92192 5.44519 9.97224 5.19565C10.0226 4.94611 10.0232 4.6891 9.97422 4.4393C9.92521 4.1895 9.82748 3.9518 9.68661 3.73977C9.54574 3.52774 9.36448 3.34553 9.15319 3.20355C8.9419 3.06157 8.70471 2.9626 8.45517 2.91228C8.20563 2.86197 7.94863 2.86129 7.69883 2.9103C7.44903 2.95931 7.21132 3.05704 6.99929 3.19792C5.13427 4.43483 3.60458 6.11435 2.54683 8.08651C1.48907 10.0587 0.936176 12.2621 0.937502 14.5C0.937502 21.9904 7.00963 28.0625 14.5 28.0625C21.9904 28.0625 28.0625 21.9904 28.0625 14.5C28.0625 9.78025 25.651 5.62625 22.0007 3.19792C21.5725 2.91358 21.0489 2.811 20.545 2.91274C20.0412 3.01448 19.5984 3.3122 19.314 3.74042C19.0297 4.16863 18.9271 4.69226 19.0289 5.19611C19.1306 5.69995 19.4283 6.14275 19.8565 6.42708C21.5907 7.5775 22.9083 9.25578 23.6143 11.2134C24.3203 13.1711 24.3771 15.3041 23.7763 17.2965C23.1755 19.289 21.9491 21.035 20.2786 22.2761C18.6081 23.5172 16.5824 24.1873 14.5013 24.1873C12.4202 24.1873 10.3945 23.5172 8.72399 22.2761C7.05349 21.035 5.82705 19.289 5.22627 17.2965C4.62548 15.3041 4.68228 13.1711 5.38826 11.2134C6.09424 9.25578 7.41057 7.5775 9.14475 6.42708Z" fill="currentColor" /></g><defs><filter id="filter0_i_1153_291" x="0.9375" y="0.9375" width="27.125" height="27.125"filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix" /><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" /><feOffset /><feGaussianBlur stdDeviation="2" /><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" /><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" /><feBlend mode="normal" in2="shape" result="effect1_innerShadow_1153_291" /></filter></defs></svg>`,
+  warningCircle: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>`,
 };
 export type Icons = keyof typeof icons;
 
diff --git a/src/components/ToggleButton.css b/src/components/ToggleButton.css
index 41656ae..eba4415 100644
--- a/src/components/ToggleButton.css
+++ b/src/components/ToggleButton.css
@@ -54,18 +54,17 @@
   border-radius: 1000px;
   box-sizing: border-box;
   border-color: rgba(96, 66, 166, 0.50);
-  background-image: linear-gradient(180deg, #463177 0%, #2D1C54 100%);
-  border: 1px solid #322E48;
   transition: opacity 300ms ease;
-}
-
-.actual-button-style.active {
-  z-index: 1;
-  border-color: #322E48;
+  border: 1px solid #322E48;
   background-image: linear-gradient(180deg, #232236 0%, #0E0D15 100%);
 }
 
-.toggle-button .glow-thingie, .toggle-button svg {
+.actual-button-style.active {
+  border-color: #48307F;
+  background-image: linear-gradient(180deg, #463177 0%, #2D1C54 100%);
+}
+
+.toggle-button .inside-glow, .toggle-button svg {
   position: absolute;
   left: 50%;
   top: 50%;
@@ -73,7 +72,7 @@
   transition: color 300ms;
 }
 
-.toggle-button .glow-thingie {
+.toggle-button .inside-glow {
   position: absolute;
   width: 90%;
   height: 90%;
diff --git a/src/components/ToggleButton.tsx b/src/components/ToggleButton.tsx
index 0c64599..5135a8f 100644
--- a/src/components/ToggleButton.tsx
+++ b/src/components/ToggleButton.tsx
@@ -8,7 +8,7 @@ export interface ToggleButtonProps {
 
 export function ToggleButton(props: ToggleButtonProps) {
   const opacityStyle = {
-    opacity: props.active ? 0 : 1,
+    opacity: props.active ? 1 : 0,
   };
 
   return (
@@ -27,7 +27,7 @@ export function ToggleButton(props: ToggleButtonProps) {
           <div className="actual-button-style active" style={opacityStyle} />
           <Icon name="power" />
           <div
-            className="glow-thingie"
+            className="inside-glow"
             style={{
               backgroundColor: props.active ? '#452D7C' : '#181724',
             }}
diff --git a/src/popup.tsx b/src/popup.tsx
index 2a37f8b..8669fd9 100644
--- a/src/popup.tsx
+++ b/src/popup.tsx
@@ -1,4 +1,5 @@
 import { BottomLabel } from '~components/BottomLabel';
+import { DisabledScreen } from '~components/DisabledScreen';
 import { Frame } from '~components/Frame';
 import { ToggleButton } from '~components/ToggleButton';
 import { useDomain } from '~hooks/useDomain';
@@ -12,8 +13,7 @@ function IndexPopup() {
   return (
     <Frame>
       <div className="popup">
-        <ToggleButton active={isWhitelisted} onClick={toggle} />
-        {!domain ? <p>The movie-web extension can not be used on this page</p> : null}
+        {!domain ? <DisabledScreen /> : <ToggleButton active={isWhitelisted} onClick={toggle} />}
         <BottomLabel />
       </div>
     </Frame>