diff --git a/src/pages/popup/Popup.tsx b/src/pages/popup/Popup.tsx
index 742b18c6a..f43bf6e6b 100644
--- a/src/pages/popup/Popup.tsx
+++ b/src/pages/popup/Popup.tsx
@@ -10,21 +10,31 @@ const Popup = () => {
   const theme = useStorage(exampleThemeStorage);
 
   return (
-    <div className="App">
-      <header className="App-header">
+    <div
+      className="App"
+      style={{
+        backgroundColor: theme === 'light' ? '#fff' : '#000',
+      }}>
+      <header className="App-header" style={{ color: theme === 'light' ? '#000' : '#fff' }}>
         <img src={logo} className="App-logo" alt="logo" />
         <p className="">
           Edit <code>src/pages/popup/Popup.tsx</code> and save to reload.
         </p>
-        <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{ color: theme === 'light' && '#0281dc', marginBottom: '10px' }}>
           Learn React!
         </a>
         <button
           style={{
-            color: theme === 'light' ? '#fff' : '#000',
+            backgroundColor: theme === 'light' ? '#fff' : '#000',
+            color: theme === 'light' ? '#000' : '#fff',
           }}
           onClick={exampleThemeStorage.toggle}>
-          Toggle theme: [{theme}]
+          Toggle theme
         </button>
       </header>
     </div>