diff --git a/packages/extensions/src/components/Popup.tsx b/packages/extensions/src/components/Popup.tsx
deleted file mode 100644
index dcc0302..0000000
--- a/packages/extensions/src/components/Popup.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from 'react';
-import { browser, Tabs } from 'webextension-polyfill-ts';
-
-function openWebPage(url: string): Promise<Tabs.Tab> {
-  return browser.tabs.create({ url });
-}
-
-function login() {
-  return openWebPage(`${process.env.WEB_URL ?? 'http://localhost:3000'}/login`);
-}
-
-function Popup(): React.ReactElement {
-  return (
-    <section className="flex flex-col w-72 h-96 font-light bg-white text-black dark:bg-black dark:text-white p-4">
-      <header>
-        <h1>maildog</h1>
-      </header>
-      <main className="flex flex-grow items-center">
-        <button
-          type="button"
-          className="border border-white dark:border-black hover:border-black dark:hover:border-white p-2 w-full"
-          onClick={login}
-        >
-          Login with GitHub
-        </button>
-      </main>
-    </section>
-  );
-}
-
-export default Popup;
diff --git a/packages/extensions/src/manifest.json b/packages/extensions/src/manifest.json
index 44624ff..0eb9113 100644
--- a/packages/extensions/src/manifest.json
+++ b/packages/extensions/src/manifest.json
@@ -13,7 +13,12 @@
   "homepage_url": "https://maildog.dev",
   "short_name": "maildog",
 
-  "permissions": ["activeTab", "storage", "http://*/*", "https://*/*"],
+  "permissions": [
+    "activeTab",
+    "storage",
+    "https://maildog.dev/*",
+    "http://localhost:3000/*"
+  ],
 
   "content_security_policy": "script-src 'self'; object-src 'self'",
 
diff --git a/packages/extensions/src/popup.tsx b/packages/extensions/src/popup.tsx
deleted file mode 100644
index f25ed67..0000000
--- a/packages/extensions/src/popup.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-
-import Popup from './components/Popup';
-import './style.css';
-
-ReactDOM.render(<Popup />, document.getElementById('popup-root'));
diff --git a/packages/extensions/src/popup/LoginScreen.tsx b/packages/extensions/src/popup/LoginScreen.tsx
new file mode 100644
index 0000000..5cf9789
--- /dev/null
+++ b/packages/extensions/src/popup/LoginScreen.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+interface Props {
+  isLoading: boolean;
+  onLogin: () => void;
+  onLearnMore: () => void;
+}
+
+function LoginScreen({
+  isLoading,
+  onLogin,
+  onLearnMore,
+}: Props): React.ReactElement {
+  return (
+    <main className="flex flex-col items-center w-72 h-96 bg-primary">
+      <figure className="flex-grow flex items-center">
+        <img
+          className={`w-32 h-32 text-secondary ${
+            isLoading ? 'animate-spin' : ''
+          }`}
+          src="./assets/logo.svg"
+          alt="logo"
+        />
+        <figcaption className="hidden">maildog</figcaption>
+      </figure>
+      <footer className={`w-full py-2 text-sm ${isLoading ? 'invisible' : ''}`}>
+        <div className="py-1 px-4">
+          <button
+            className="w-full p-2 rounded text-primary bg-white focus:outline-white"
+            type="button"
+            onClick={onLogin}
+          >
+            Login with GitHub
+          </button>
+        </div>
+        <div className="py-1 px-4">
+          <button
+            className="w-full p-2 text-white focus:outline-white"
+            type="button"
+            onClick={onLearnMore}
+          >
+            Learn more
+          </button>
+        </div>
+      </footer>
+    </main>
+  );
+}
+
+export default LoginScreen;
diff --git a/packages/extensions/src/popup/Popup.tsx b/packages/extensions/src/popup/Popup.tsx
new file mode 100644
index 0000000..8fd06e1
--- /dev/null
+++ b/packages/extensions/src/popup/Popup.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { browser, Tabs } from 'webextension-polyfill-ts';
+import LoginScreen from './LoginScreen';
+
+async function showOfficialWebsite(): Promise<void> {
+  await browser.tabs.create({ url: 'https://github.com/edmundhung/maildog' });
+}
+
+function Popup(): React.ReactElement {
+  return (
+    <LoginScreen
+      isLoading={false}
+      onLogin={() => {}}
+      onLearnMore={showOfficialWebsite}
+    />
+  );
+}
+
+export default Popup;
diff --git a/packages/extensions/src/popup/index.tsx b/packages/extensions/src/popup/index.tsx
new file mode 100644
index 0000000..fd53abc
--- /dev/null
+++ b/packages/extensions/src/popup/index.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { QueryClientProvider, QueryClient } from 'react-query';
+import { persistQueryClient } from 'react-query/persistQueryClient-experimental';
+import { createAsyncStoragePersistor } from 'react-query/createAsyncStoragePersistor-experimental';
+import { browser } from 'webextension-polyfill-ts';
+import Popup from './Popup';
+import '../style.css';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+const persistor = createAsyncStoragePersistor({
+  storage: {
+    getItem: async (key: string): Promise<string | null> => {
+      const item = await browser.storage.local.get(key);
+
+      if (typeof item?.[key] === 'undefined') {
+        return null;
+      }
+
+      return item?.[key];
+    },
+    setItem: async (key: string, value: string): Promise<void> => {
+      await browser.storage.local.set({
+        [key]: value,
+      });
+    },
+    removeItem: async (key: string): Promise<void> => {
+      await browser.storage.local.remove(key);
+    },
+  },
+});
+
+const popup = (
+  <QueryClientProvider client={queryClient}>
+    <Popup />
+  </QueryClientProvider>
+);
+
+persistQueryClient({ queryClient, persistor });
+ReactDOM.render(popup, document.getElementById('popup-root'));
diff --git a/packages/extensions/tailwind.config.js b/packages/extensions/tailwind.config.js
index fdc6435..0e91502 100644
--- a/packages/extensions/tailwind.config.js
+++ b/packages/extensions/tailwind.config.js
@@ -1,11 +1,14 @@
 module.exports = {
   purge: ['./public/*.html', './src/**/*.ts', './src/**/*.tsx'],
-  darkMode: 'media',
-  theme: {},
-  variants: {
+  darkMode: false,
+  theme: {
     extend: {
-      borderColor: ['dark'],
+      colors: {
+        primary: '#537780',
+        secondary: '#fffcca',
+      },
     },
   },
+  variants: {},
   plugins: [],
 };
diff --git a/packages/extensions/webpack.config.js b/packages/extensions/webpack.config.js
index 9da4d6a..c1049c2 100644
--- a/packages/extensions/webpack.config.js
+++ b/packages/extensions/webpack.config.js
@@ -92,7 +92,7 @@ module.exports = {
   entry: {
     manifest: path.join(sourcePath, 'manifest.json'),
     background: path.join(sourcePath, 'background.ts'),
-    popup: path.join(sourcePath, 'popup.tsx'),
+    popup: path.join(sourcePath, 'popup', 'index.tsx'),
   },
 
   output: {