diff --git a/source/Options/Options.module.scss b/source/Options/Options.module.scss
new file mode 100644
index 0000000..9e9d115
--- /dev/null
+++ b/source/Options/Options.module.scss
@@ -0,0 +1,124 @@
+@use "../styles/fonts";
+@use "../styles/reset";
+@use "../styles/variables";
+
+:global(body) {
+  color: variables.$black;
+  background: linear-gradient(180deg, variables.$greyWhite 0%, #eef2f7 100%);
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  padding: 50px 20px;
+  font-family: variables.$fontFamily;
+}
+
+.options {
+  width: 100%;
+  max-width: 480px;
+}
+
+.header {
+  margin-bottom: 32px;
+  text-align: center;
+
+  h1 {
+    font-size: 26px;
+    font-weight: variables.$bold;
+    margin-bottom: 10px;
+    background: linear-gradient(135deg, variables.$primary 0%, #8b5cf6 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  p {
+    color: variables.$skyBlue;
+    font-size: 14px;
+    font-weight: variables.$medium;
+  }
+}
+
+.form {
+  background: variables.$cardBg;
+  border-radius: variables.$radiusLg;
+  padding: 28px;
+  box-shadow: variables.$shadowLg;
+  border: 1px solid variables.$border;
+}
+
+.section {
+  margin-bottom: 24px;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-top: 28px;
+  padding-top: 24px;
+  border-top: 1px solid variables.$border;
+}
+
+.status {
+  font-size: 14px;
+  color: variables.$success;
+  font-weight: variables.$semibold;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  &::before {
+    content: "";
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background: variables.$success;
+    border-radius: 50%;
+    animation: pulse 1s ease-in-out;
+  }
+}
+
+.footer {
+  margin-top: 24px;
+  text-align: center;
+}
+
+.githubLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  font-size: 14px;
+  font-weight: variables.$medium;
+  color: variables.$skyBlue;
+  background: variables.$cardBg;
+  border: 1px solid variables.$border;
+  border-radius: variables.$radiusMd;
+  transition: all 0.2s ease;
+  text-decoration: none;
+
+  &:hover {
+    color: variables.$black;
+    border-color: #cbd5e1;
+    box-shadow: variables.$shadowSm;
+    transform: translateY(-1px);
+  }
+
+  svg {
+    flex-shrink: 0;
+  }
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
diff --git a/source/Options/Options.tsx b/source/Options/Options.tsx
index 3b7fcd1..da9c951 100644
--- a/source/Options/Options.tsx
+++ b/source/Options/Options.tsx
@@ -1,20 +1,20 @@
-import * as React from 'react';
-import {useEffect, useState} from 'react';
-import {getStorage, setStorage} from '../utils/storage';
+import * as React from "react";
+import { useEffect, useState } from "react";
+import type { FC } from "react";
+import { getStorage, setStorage } from "../utils/storage";
+import { Button } from "../components/Button/Button";
+import { Input } from "../components/Input/Input";
+import { Checkbox } from "../components/Checkbox/Checkbox";
+import { GitHubIcon } from "../components/icons/GitHubIcon";
+import styles from "./Options.module.scss";
 
-const GitHubIcon: React.FC = () => (
-  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
-  </svg>
-);
-
-const Options: React.FC = () => {
-  const [username, setUsername] = useState('');
+const Options: FC = () => {
+  const [username, setUsername] = useState("");
   const [enableLogging, setEnableLogging] = useState(false);
   const [saved, setSaved] = useState(false);
 
   useEffect(() => {
-    getStorage(['username', 'enableLogging']).then((result) => {
+    getStorage(["username", "enableLogging"]).then((result) => {
       setUsername(result.username);
       setEnableLogging(result.enableLogging);
     });
@@ -22,76 +22,58 @@ const Options: React.FC = () => {
 
   const handleSave = async (e: React.FormEvent): Promise<void> => {
     e.preventDefault();
-    await setStorage({username, enableLogging});
+    await setStorage({ username, enableLogging });
     setSaved(true);
     setTimeout(() => setSaved(false), 2000);
   };
 
   return (
-    <div className="options">
-      <header className="options__header">
+    <div className={styles.options}>
+      <header className={styles.header}>
         <h1>Extension Settings</h1>
         <p>Configure your extension preferences</p>
       </header>
 
-      <form onSubmit={handleSave} className="options__card">
-        <div className="options__section">
-          <label htmlFor="username" className="options__label">
-            Your Name
-          </label>
-          <input
-            type="text"
+      <form onSubmit={handleSave} className={styles.form}>
+        <div className={styles.section}>
+          <Input
+            label="Your Name"
             id="username"
             name="username"
-            className="options__input"
             placeholder="Enter your name"
-            spellCheck="false"
+            spellCheck={false}
             autoComplete="off"
             value={username}
             onChange={(e): void => setUsername(e.target.value)}
           />
         </div>
 
-        <div className="options__section">
-          <label
-            htmlFor="logging"
-            className="options__checkbox-wrapper"
-            onClick={(e): void => {
-              if ((e.target as HTMLElement).tagName !== 'INPUT') {
-                setEnableLogging(!enableLogging);
-              }
-            }}
-          >
-            <input
-              type="checkbox"
-              name="logging"
-              id="logging"
-              className="options__checkbox"
-              checked={enableLogging}
-              onChange={(e): void => setEnableLogging(e.target.checked)}
-            />
-            <span className="options__checkbox-text">
-              Show the features enabled on each page in the console
-            </span>
-          </label>
+        <div className={styles.section}>
+          <Checkbox
+            id="logging"
+            name="logging"
+            label="Show the features enabled on each page in the console"
+            checked={enableLogging}
+            onChange={(e): void => setEnableLogging(e.target.checked)}
+          />
         </div>
 
-        <div className="options__actions">
-          <button type="submit" className="options__button options__button--primary">
+        <div className={styles.actions}>
+          <Button type="submit" variant="primary" size="large">
             Save Settings
-          </button>
-          {saved && <span className="options__status">Settings saved</span>}
+          </Button>
+          {saved && <span className={styles.status}>Settings saved</span>}
         </div>
       </form>
 
-      <footer className="options__footer">
+      <footer className={styles.footer}>
         <a
           href="https://github.com/abhijithvijayan/web-extension-starter"
           target="_blank"
           rel="noopener noreferrer"
-          className="options__github-link"
+          className={styles.githubLink}
         >
-          <GitHubIcon />
+          <GitHubIcon size={18} />
           <span>View on GitHub</span>
         </a>
       </footer>
diff --git a/source/Options/index.tsx b/source/Options/index.tsx
index 14f267e..683da0c 100644
--- a/source/Options/index.tsx
+++ b/source/Options/index.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
+import * as React from 'react';
 import ReactDOM from 'react-dom/client';
 
 import Options from './Options';
-import './styles.scss';
 
 const container = document.getElementById('options-root');
 
diff --git a/source/Options/styles.scss b/source/Options/styles.scss
deleted file mode 100644
index 3348be2..0000000
--- a/source/Options/styles.scss
+++ /dev/null
@@ -1,219 +0,0 @@
-@use "../styles/fonts";
-@use "../styles/reset";
-@use "../styles/variables";
-
-body {
-  color: variables.$black;
-  background: linear-gradient(180deg, variables.$greyWhite 0%, #eef2f7 100%);
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  padding: 50px 20px;
-  font-family: variables.$fontFamily;
-}
-
-.options {
-  width: 100%;
-  max-width: 480px;
-
-  &__header {
-    margin-bottom: 32px;
-    text-align: center;
-
-    h1 {
-      font-size: 26px;
-      font-weight: variables.$bold;
-      margin-bottom: 10px;
-      background: linear-gradient(135deg, variables.$primary 0%, #8b5cf6 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-    }
-
-    p {
-      color: variables.$skyBlue;
-      font-size: 14px;
-      font-weight: variables.$medium;
-    }
-  }
-
-  &__card {
-    background: variables.$cardBg;
-    border-radius: variables.$radiusLg;
-    padding: 28px;
-    box-shadow: variables.$shadowLg;
-    border: 1px solid variables.$border;
-  }
-
-  &__section {
-    margin-bottom: 24px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  &__label {
-    display: block;
-    font-size: 13px;
-    font-weight: variables.$semibold;
-    margin-bottom: 10px;
-    color: variables.$black;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-  }
-
-  &__input {
-    width: 100%;
-    padding: 14px 16px;
-    font-size: 15px;
-    background-color: variables.$white;
-    color: variables.$black;
-    border: 2px solid variables.$border;
-    border-radius: variables.$radiusMd;
-    transition: all 0.2s ease;
-    box-sizing: border-box;
-
-    &:hover {
-      border-color: #cbd5e1;
-    }
-
-    &:focus {
-      outline: none;
-      border-color: variables.$primary;
-      box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
-    }
-
-    &::placeholder {
-      color: #94a3b8;
-    }
-  }
-
-  &__checkbox-wrapper {
-    display: flex;
-    align-items: flex-start;
-    gap: 14px;
-    padding: 16px;
-    background: variables.$greyWhite;
-    border-radius: variables.$radiusMd;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border: 2px solid transparent;
-
-    &:hover {
-      background: #eef2f7;
-      border-color: variables.$border;
-    }
-  }
-
-  &__checkbox {
-    width: 20px;
-    height: 20px;
-    margin-top: 2px;
-    cursor: pointer;
-    accent-color: variables.$primary;
-  }
-
-  &__checkbox-text {
-    font-size: 14px;
-    line-height: 1.5;
-    color: variables.$skyBlue;
-    font-weight: variables.$medium;
-  }
-
-  &__actions {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    margin-top: 28px;
-    padding-top: 24px;
-    border-top: 1px solid variables.$border;
-  }
-
-  &__button {
-    padding: 14px 28px;
-    font-size: 14px;
-    font-weight: variables.$semibold;
-    border: none;
-    border-radius: variables.$radiusMd;
-    cursor: pointer;
-    transition: all 0.2s ease;
-
-    &:hover {
-      transform: translateY(-2px);
-      box-shadow: variables.$shadowMd;
-    }
-
-    &:active {
-      transform: translateY(0);
-    }
-
-    &--primary {
-      background: linear-gradient(135deg, variables.$primary 0%, variables.$primaryDark 100%);
-      color: variables.$white;
-    }
-  }
-
-  &__status {
-    font-size: 14px;
-    color: variables.$success;
-    font-weight: variables.$semibold;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    &::before {
-      content: "";
-      display: inline-block;
-      width: 8px;
-      height: 8px;
-      background: variables.$success;
-      border-radius: 50%;
-      animation: pulse 1s ease-in-out;
-    }
-  }
-
-  &__footer {
-    margin-top: 24px;
-    text-align: center;
-  }
-
-  &__github-link {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 20px;
-    font-size: 14px;
-    font-weight: variables.$medium;
-    color: variables.$skyBlue;
-    background: variables.$cardBg;
-    border: 1px solid variables.$border;
-    border-radius: variables.$radiusMd;
-    transition: all 0.2s ease;
-
-    &:hover {
-      color: variables.$black;
-      border-color: #cbd5e1;
-      box-shadow: variables.$shadowSm;
-      transform: translateY(-1px);
-    }
-
-    svg {
-      flex-shrink: 0;
-    }
-  }
-}
-
-@keyframes pulse {
-  0% {
-    transform: scale(0);
-    opacity: 0;
-  }
-  50% {
-    transform: scale(1.2);
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
diff --git a/source/Popup/Popup.module.scss b/source/Popup/Popup.module.scss
new file mode 100644
index 0000000..9bba6a7
--- /dev/null
+++ b/source/Popup/Popup.module.scss
@@ -0,0 +1,44 @@
+@use "../styles/fonts";
+@use "../styles/reset";
+@use "../styles/variables";
+
+:global(body) {
+  color: variables.$black;
+  background: linear-gradient(180deg, variables.$greyWhite 0%, #eef2f7 100%);
+  width: 100%;
+  font-family: variables.$fontFamily;
+}
+
+.popup {
+  width: 380px;
+  padding: 20px;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid variables.$border;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: variables.$bold;
+  letter-spacing: -0.3px;
+  color: variables.$black;
+  background: linear-gradient(135deg, variables.$primary 0%, #8b5cf6 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.greeting {
+  font-size: 13px;
+  color: variables.$skyBlue;
+  margin-top: 6px;
+  font-weight: variables.$medium;
+}
+
+.tabCard {
+  margin-bottom: 14px;
+}
diff --git a/source/Popup/Popup.tsx b/source/Popup/Popup.tsx
index e323d22..fea676a 100644
--- a/source/Popup/Popup.tsx
+++ b/source/Popup/Popup.tsx
@@ -1,111 +1,83 @@
-import * as React from 'react';
-import {useEffect, useState} from 'react';
-import browser, {Tabs} from 'webextension-polyfill';
-import {getStorage} from '../utils/storage';
+import * as React from "react";
+import { useEffect, useState } from "react";
+import type { FC } from "react";
+import browser, { Tabs } from "webextension-polyfill";
+import { getStorage } from "../utils/storage";
+import { TabInfo } from "./components/TabInfo/TabInfo";
+import { FooterActions } from "./components/FooterActions/FooterActions";
+import styles from "./Popup.module.scss";
 
 function openWebPage(url: string): Promise<Tabs.Tab> {
-  return browser.tabs.create({url});
+  return browser.tabs.create({ url });
 }
 
-interface TabInfo {
+interface TabData {
   title: string;
   url: string;
   favIconUrl?: string;
 }
 
-const Popup: React.FC = () => {
-  const [tabInfo, setTabInfo] = useState<TabInfo | null>(null);
-  const [username, setUsername] = useState<string>('');
+const Popup: FC = () => {
+  const [tabInfo, setTabInfo] = useState<TabData | null>(null);
+  const [username, setUsername] = useState<string>("");
 
   useEffect(() => {
-    browser.tabs.query({active: true, currentWindow: true}).then((tabs) => {
+    browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
       const tab = tabs[0];
       if (tab) {
         setTabInfo({
-          title: tab.title || 'Unknown',
-          url: tab.url || 'Unknown',
+          title: tab.title || "Unknown",
+          url: tab.url || "Unknown",
           favIconUrl: tab.favIconUrl,
         });
       }
     });
 
-    getStorage(['username']).then(({username: storedUsername}) => {
+    getStorage(["username"]).then(({ username: storedUsername }) => {
       setUsername(storedUsername);
     });
   }, []);
 
   const handleReloadTab = async (): Promise<void> => {
-    const tabs = await browser.tabs.query({active: true, currentWindow: true});
+    const tabs = await browser.tabs.query({
+      active: true,
+      currentWindow: true,
+    });
     const tab = tabs[0];
     if (tab?.id) {
       await browser.tabs.reload(tab.id);
     }
   };
 
-  const getInitial = (title: string): string => {
-    return title.charAt(0).toUpperCase();
-  };
-
   return (
-    <section className="popup">
-      <header className="popup__header">
-        <h1 className="popup__title">Web Extension Starter</h1>
-        {username && <p className="popup__greeting">Hello, {username}!</p>}
+    <section className={styles.popup}>
+      <header className={styles.header}>
+        <h1 className={styles.title}>Web Extension Starter</h1>
+        {username && <p className={styles.greeting}>Hello, {username}!</p>}
       </header>
 
       {tabInfo && (
-        <div className="popup__card">
-          <div className="popup__card-header">
-            <span className="popup__card-title">Current Tab</span>
-          </div>
-          <div className="popup__tab-content">
-            {tabInfo.favIconUrl ? (
-              <img src={tabInfo.favIconUrl} alt="" className="popup__favicon" />
-            ) : (
-              <div className="popup__favicon-placeholder">{getInitial(tabInfo.title)}</div>
-            )}
-            <div className="popup__tab-details">
-              <p className="popup__tab-title">{tabInfo.title}</p>
-              <p className="popup__tab-url">{tabInfo.url}</p>
-            </div>
-          </div>
-          <button
-            type="button"
-            onClick={handleReloadTab}
-            className="popup__btn popup__btn--secondary"
-          >
-            Reload Tab
-          </button>
+        <div className={styles.tabCard}>
+          <TabInfo
+            title={tabInfo.title}
+            url={tabInfo.url}
+            favIconUrl={tabInfo.favIconUrl}
+            onReload={handleReloadTab}
+          />
         </div>
       )}
 
-      <div className="popup__footer">
-        <button
-          type="button"
-          className="popup__footer-btn popup__footer-btn--settings"
-          onClick={(): Promise<Tabs.Tab> => openWebPage('/Options/options.html')}
-        >
-          Settings
-        </button>
-        <button
-          type="button"
-          className="popup__footer-btn popup__footer-btn--github"
-          onClick={(): Promise<Tabs.Tab> =>
-            openWebPage('https://github.com/abhijithvijayan/web-extension-starter')
-          }
-        >
-          GitHub
-        </button>
-        <button
-          type="button"
-          className="popup__footer-btn popup__footer-btn--support"
-          onClick={(): Promise<Tabs.Tab> =>
-            openWebPage('https://www.buymeacoffee.com/abhijithvijayan')
-          }
-        >
-          Support
-        </button>
-      </div>
+      <FooterActions
+        onSettings={(): Promise<Tabs.Tab> =>
+          openWebPage("/Options/options.html")
+        }
+        onGitHub={(): Promise<Tabs.Tab> =>
+          openWebPage("https://github.com/abhijithvijayan/web-extension-starter")
+        }
+        onSupport={(): Promise<Tabs.Tab> =>
+          openWebPage("https://www.buymeacoffee.com/abhijithvijayan")
+        }
+      />
     </section>
   );
 };
diff --git a/source/Popup/components/FooterActions/FooterActions.module.scss b/source/Popup/components/FooterActions/FooterActions.module.scss
new file mode 100644
index 0000000..8946421
--- /dev/null
+++ b/source/Popup/components/FooterActions/FooterActions.module.scss
@@ -0,0 +1,10 @@
+@use "../../../styles/variables";
+
+.footer {
+  display: flex;
+  gap: 10px;
+}
+
+.button {
+  flex: 1;
+}
diff --git a/source/Popup/components/FooterActions/FooterActions.tsx b/source/Popup/components/FooterActions/FooterActions.tsx
new file mode 100644
index 0000000..fcfa362
--- /dev/null
+++ b/source/Popup/components/FooterActions/FooterActions.tsx
@@ -0,0 +1,51 @@
+import * as React from "react";
+import type { FC } from "react";
+import { Button } from "../../../components/Button/Button";
+import { SettingsIcon } from "../../../components/icons/SettingsIcon";
+import { GitHubIcon } from "../../../components/icons/GitHubIcon";
+import { HeartIcon } from "../../../components/icons/HeartIcon";
+import styles from "./FooterActions.module.scss";
+
+interface FooterActionsProps {
+  onSettings: () => void;
+  onGitHub: () => void;
+  onSupport: () => void;
+}
+
+export const FooterActions: FC<FooterActionsProps> = ({
+  onSettings,
+  onGitHub,
+  onSupport,
+}) => {
+  return (
+    <div className={styles.footer}>
+      <Button
+        variant="settings"
+        size="small"
+        className={styles.button}
+        onClick={onSettings}
+      >
+        <SettingsIcon />
+        <span>Settings</span>
+      </Button>
+      <Button
+        variant="github"
+        size="small"
+        className={styles.button}
+        onClick={onGitHub}
+      >
+        <GitHubIcon />
+        <span>GitHub</span>
+      </Button>
+      <Button
+        variant="support"
+        size="small"
+        className={styles.button}
+        onClick={onSupport}
+      >
+        <HeartIcon />
+        <span>Support</span>
+      </Button>
+    </div>
+  );
+};
diff --git a/source/Popup/components/TabInfo/TabInfo.module.scss b/source/Popup/components/TabInfo/TabInfo.module.scss
new file mode 100644
index 0000000..eda6134
--- /dev/null
+++ b/source/Popup/components/TabInfo/TabInfo.module.scss
@@ -0,0 +1,56 @@
+@use "../../../styles/variables";
+
+.content {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 16px;
+}
+
+.favicon {
+  width: 44px;
+  height: 44px;
+  border-radius: variables.$radiusMd;
+  flex-shrink: 0;
+  background: variables.$greyWhite;
+  object-fit: cover;
+  border: 1px solid variables.$border;
+}
+
+.faviconPlaceholder {
+  width: 44px;
+  height: 44px;
+  border-radius: variables.$radiusMd;
+  background: linear-gradient(135deg, variables.$primary 0%, #8b5cf6 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: variables.$white;
+  font-size: 18px;
+  font-weight: variables.$bold;
+  flex-shrink: 0;
+}
+
+.details {
+  flex: 1;
+  min-width: 0;
+}
+
+.title {
+  font-size: 14px;
+  font-weight: variables.$semibold;
+  color: variables.$black;
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.3;
+}
+
+.url {
+  font-size: 12px;
+  color: variables.$skyBlue;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/source/Popup/components/TabInfo/TabInfo.tsx b/source/Popup/components/TabInfo/TabInfo.tsx
new file mode 100644
index 0000000..0eeec3a
--- /dev/null
+++ b/source/Popup/components/TabInfo/TabInfo.tsx
@@ -0,0 +1,42 @@
+import * as React from "react";
+import type { FC } from "react";
+import { Card } from "../../../components/Card/Card";
+import { Button } from "../../../components/Button/Button";
+import styles from "./TabInfo.module.scss";
+
+interface TabInfoProps {
+  title: string;
+  url: string;
+  favIconUrl?: string;
+  onReload: () => void;
+}
+
+export const TabInfo: FC<TabInfoProps> = ({
+  title,
+  url,
+  favIconUrl,
+  onReload,
+}) => {
+  const getInitial = (text: string): string => {
+    return text.charAt(0).toUpperCase();
+  };
+
+  return (
+    <Card title="Current Tab">
+      <div className={styles.content}>
+        {favIconUrl ? (
+          <img src={favIconUrl} alt="" className={styles.favicon} />
+        ) : (
+          <div className={styles.faviconPlaceholder}>{getInitial(title)}</div>
+        )}
+        <div className={styles.details}>
+          <p className={styles.title}>{title}</p>
+          <p className={styles.url}>{url}</p>
+        </div>
+      </div>
+      <Button variant="secondary" fullWidth onClick={onReload}>
+        Reload Tab
+      </Button>
+    </Card>
+  );
+};
diff --git a/source/Popup/index.tsx b/source/Popup/index.tsx
index 9164558..d51b986 100644
--- a/source/Popup/index.tsx
+++ b/source/Popup/index.tsx
@@ -1,10 +1,8 @@
-import React from 'react';
+import * as React from 'react';
 import ReactDOM from 'react-dom/client';
 
 import Popup from './Popup';
 
-import './styles.scss';
-
 const container = document.getElementById('popup-root');
 
 if (!container) {
diff --git a/source/Popup/styles.scss b/source/Popup/styles.scss
deleted file mode 100644
index 6b4701e..0000000
--- a/source/Popup/styles.scss
+++ /dev/null
@@ -1,198 +0,0 @@
-@use "../styles/fonts";
-@use "../styles/reset";
-@use "../styles/variables";
-
-body {
-  color: variables.$black;
-  background: linear-gradient(180deg, variables.$greyWhite 0%, #eef2f7 100%);
-  width: 100%;
-  font-family: variables.$fontFamily;
-}
-
-.popup {
-  width: 380px;
-  padding: 20px;
-
-  &__header {
-    text-align: center;
-    margin-bottom: 20px;
-    padding-bottom: 16px;
-    border-bottom: 1px solid variables.$border;
-  }
-
-  &__title {
-    font-size: 18px;
-    font-weight: variables.$bold;
-    letter-spacing: -0.3px;
-    color: variables.$black;
-    background: linear-gradient(135deg, variables.$primary 0%, #8b5cf6 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-  }
-
-  &__greeting {
-    font-size: 13px;
-    color: variables.$skyBlue;
-    margin-top: 6px;
-    font-weight: variables.$medium;
-  }
-
-  &__card {
-    background: variables.$cardBg;
-    border-radius: variables.$radiusLg;
-    padding: 18px;
-    margin-bottom: 14px;
-    box-shadow: variables.$shadowMd;
-    border: 1px solid variables.$border;
-  }
-
-  &__card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 14px;
-  }
-
-  &__card-title {
-    font-size: 11px;
-    font-weight: variables.$bold;
-    text-transform: uppercase;
-    letter-spacing: 0.8px;
-    color: variables.$skyBlue;
-  }
-
-  &__tab-content {
-    display: flex;
-    align-items: center;
-    gap: 14px;
-    margin-bottom: 16px;
-  }
-
-  &__favicon {
-    width: 44px;
-    height: 44px;
-    border-radius: variables.$radiusMd;
-    flex-shrink: 0;
-    background: variables.$greyWhite;
-    object-fit: cover;
-    border: 1px solid variables.$border;
-  }
-
-  &__favicon-placeholder {
-    width: 44px;
-    height: 44px;
-    border-radius: variables.$radiusMd;
-    background: linear-gradient(135deg, variables.$primary 0%, #8b5cf6 100%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: variables.$white;
-    font-size: 18px;
-    font-weight: variables.$bold;
-    flex-shrink: 0;
-  }
-
-  &__tab-details {
-    flex: 1;
-    min-width: 0;
-  }
-
-  &__tab-title {
-    font-size: 14px;
-    font-weight: variables.$semibold;
-    color: variables.$black;
-    margin-bottom: 4px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    line-height: 1.3;
-  }
-
-  &__tab-url {
-    font-size: 12px;
-    color: variables.$skyBlue;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__btn {
-    width: 100%;
-    padding: 11px 16px;
-    font-size: 13px;
-    font-weight: variables.$semibold;
-    border: none;
-    border-radius: variables.$radiusMd;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-
-    &:hover {
-      transform: translateY(-2px);
-      box-shadow: variables.$shadowMd;
-    }
-
-    &:active {
-      transform: translateY(0);
-    }
-
-    &--primary {
-      background: linear-gradient(135deg, variables.$primary 0%, variables.$primaryDark 100%);
-      color: variables.$white;
-    }
-
-    &--secondary {
-      background: variables.$greyWhite;
-      color: variables.$black;
-      border: 1px solid variables.$border;
-
-      &:hover {
-        background: #eef2f7;
-      }
-    }
-  }
-
-  &__footer {
-    display: flex;
-    gap: 10px;
-  }
-
-  &__footer-btn {
-    flex: 1;
-    padding: 12px 10px;
-    font-size: 12px;
-    font-weight: variables.$semibold;
-    border: none;
-    border-radius: variables.$radiusMd;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-
-    &:hover {
-      transform: translateY(-2px);
-      box-shadow: variables.$shadowMd;
-    }
-
-    &--settings {
-      background: linear-gradient(135deg, variables.$primary 0%, #8b5cf6 100%);
-      color: variables.$white;
-    }
-
-    &--github {
-      background: linear-gradient(135deg, #24292e 0%, #1a1a1a 100%);
-      color: variables.$white;
-    }
-
-    &--support {
-      background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
-      color: variables.$white;
-    }
-  }
-}
diff --git a/source/components/Button/Button.module.scss b/source/components/Button/Button.module.scss
new file mode 100644
index 0000000..fdcba25
--- /dev/null
+++ b/source/components/Button/Button.module.scss
@@ -0,0 +1,74 @@
+@use "../../styles/variables";
+
+.button {
+  padding: 11px 16px;
+  font-size: 13px;
+  font-weight: variables.$semibold;
+  border: none;
+  border-radius: variables.$radiusMd;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: variables.$shadowMd;
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.primary {
+  background: linear-gradient(135deg, variables.$primary 0%, variables.$primaryDark 100%);
+  color: variables.$white;
+}
+
+.secondary {
+  background: variables.$greyWhite;
+  color: variables.$black;
+  border: 1px solid variables.$border;
+
+  &:hover {
+    background: #eef2f7;
+  }
+}
+
+.settings {
+  background: linear-gradient(135deg, variables.$primary 0%, #8b5cf6 100%);
+  color: variables.$white;
+}
+
+.github {
+  background: linear-gradient(135deg, #24292e 0%, #1a1a1a 100%);
+  color: variables.$white;
+}
+
+.support {
+  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
+  color: variables.$white;
+}
+
+.small {
+  padding: 12px 10px;
+  font-size: 12px;
+  gap: 6px;
+}
+
+.medium {
+  padding: 11px 16px;
+  font-size: 13px;
+}
+
+.large {
+  padding: 14px 28px;
+  font-size: 14px;
+}
diff --git a/source/components/Button/Button.tsx b/source/components/Button/Button.tsx
new file mode 100644
index 0000000..e494e8b
--- /dev/null
+++ b/source/components/Button/Button.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+import type { FC, ReactNode, ButtonHTMLAttributes } from "react";
+import styles from "./Button.module.scss";
+
+type ButtonVariant = "primary" | "secondary" | "settings" | "github" | "support";
+type ButtonSize = "small" | "medium" | "large";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  fullWidth?: boolean;
+  children: ReactNode;
+}
+
+export const Button: FC<ButtonProps> = ({
+  variant = "primary",
+  size = "medium",
+  fullWidth = false,
+  children,
+  className,
+  ...props
+}) => {
+  const classNames = [
+    styles.button,
+    styles[variant],
+    styles[size],
+    fullWidth && styles.fullWidth,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <button type="button" className={classNames} {...props}>
+      {children}
+    </button>
+  );
+};
diff --git a/source/components/Card/Card.module.scss b/source/components/Card/Card.module.scss
new file mode 100644
index 0000000..526d70c
--- /dev/null
+++ b/source/components/Card/Card.module.scss
@@ -0,0 +1,29 @@
+@use "../../styles/variables";
+
+.card {
+  background: variables.$cardBg;
+  border-radius: variables.$radiusLg;
+  padding: 18px;
+  box-shadow: variables.$shadowMd;
+  border: 1px solid variables.$border;
+}
+
+.large {
+  padding: 28px;
+  box-shadow: variables.$shadowLg;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 14px;
+}
+
+.title {
+  font-size: 11px;
+  font-weight: variables.$bold;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: variables.$skyBlue;
+}
diff --git a/source/components/Card/Card.tsx b/source/components/Card/Card.tsx
new file mode 100644
index 0000000..f084c69
--- /dev/null
+++ b/source/components/Card/Card.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+import type { FC, ReactNode } from "react";
+import styles from "./Card.module.scss";
+
+interface CardProps {
+  title?: string;
+  size?: "default" | "large";
+  children: ReactNode;
+  className?: string;
+}
+
+export const Card: FC<CardProps> = ({
+  title,
+  size = "default",
+  children,
+  className,
+}) => {
+  const classNames = [
+    styles.card,
+    size === "large" && styles.large,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div className={classNames}>
+      {title && (
+        <div className={styles.header}>
+          <span className={styles.title}>{title}</span>
+        </div>
+      )}
+      {children}
+    </div>
+  );
+};
diff --git a/source/components/Checkbox/Checkbox.module.scss b/source/components/Checkbox/Checkbox.module.scss
new file mode 100644
index 0000000..5af8abd
--- /dev/null
+++ b/source/components/Checkbox/Checkbox.module.scss
@@ -0,0 +1,33 @@
+@use "../../styles/variables";
+
+.wrapper {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  padding: 16px;
+  background: variables.$greyWhite;
+  border-radius: variables.$radiusMd;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 2px solid transparent;
+
+  &:hover {
+    background: #eef2f7;
+    border-color: variables.$border;
+  }
+}
+
+.checkbox {
+  width: 20px;
+  height: 20px;
+  margin-top: 2px;
+  cursor: pointer;
+  accent-color: variables.$primary;
+}
+
+.text {
+  font-size: 14px;
+  line-height: 1.5;
+  color: variables.$skyBlue;
+  font-weight: variables.$medium;
+}
diff --git a/source/components/Checkbox/Checkbox.tsx b/source/components/Checkbox/Checkbox.tsx
new file mode 100644
index 0000000..91dd745
--- /dev/null
+++ b/source/components/Checkbox/Checkbox.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+import type { FC, InputHTMLAttributes } from "react";
+import styles from "./Checkbox.module.scss";
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+  label: string;
+}
+
+export const Checkbox: FC<CheckboxProps> = ({
+  label,
+  id,
+  checked,
+  onChange,
+  ...props
+}) => {
+  const handleWrapperClick = (e: React.MouseEvent<HTMLLabelElement>): void => {
+    if ((e.target as HTMLElement).tagName !== "INPUT") {
+      const input = e.currentTarget.querySelector("input");
+      if (input) {
+        input.click();
+      }
+    }
+  };
+
+  return (
+    <label htmlFor={id} className={styles.wrapper} onClick={handleWrapperClick}>
+      <input
+        type="checkbox"
+        id={id}
+        className={styles.checkbox}
+        checked={checked}
+        onChange={onChange}
+        {...props}
+      />
+      <span className={styles.text}>{label}</span>
+    </label>
+  );
+};
diff --git a/source/components/Input/Input.module.scss b/source/components/Input/Input.module.scss
new file mode 100644
index 0000000..869fcf6
--- /dev/null
+++ b/source/components/Input/Input.module.scss
@@ -0,0 +1,41 @@
+@use "../../styles/variables";
+
+.wrapper {
+  margin-bottom: 24px;
+}
+
+.label {
+  display: block;
+  font-size: 13px;
+  font-weight: variables.$semibold;
+  margin-bottom: 10px;
+  color: variables.$black;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.input {
+  width: 100%;
+  padding: 14px 16px;
+  font-size: 15px;
+  background-color: variables.$white;
+  color: variables.$black;
+  border: 2px solid variables.$border;
+  border-radius: variables.$radiusMd;
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+
+  &:hover {
+    border-color: #cbd5e1;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: variables.$primary;
+    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
+  }
+
+  &::placeholder {
+    color: #94a3b8;
+  }
+}
diff --git a/source/components/Input/Input.tsx b/source/components/Input/Input.tsx
new file mode 100644
index 0000000..a720fe5
--- /dev/null
+++ b/source/components/Input/Input.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+import type { FC, InputHTMLAttributes } from "react";
+import styles from "./Input.module.scss";
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+}
+
+export const Input: FC<InputProps> = ({ label, id, className, ...props }) => {
+  return (
+    <div className={styles.wrapper}>
+      {label && (
+        <label htmlFor={id} className={styles.label}>
+          {label}
+        </label>
+      )}
+      <input
+        id={id}
+        className={`${styles.input} ${className || ""}`.trim()}
+        {...props}
+      />
+    </div>
+  );
+};
diff --git a/source/components/icons/GitHubIcon.tsx b/source/components/icons/GitHubIcon.tsx
new file mode 100644
index 0000000..0ec8e6c
--- /dev/null
+++ b/source/components/icons/GitHubIcon.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+import type { FC } from "react";
+
+interface IconProps {
+  size?: number;
+}
+
+export const GitHubIcon: FC<IconProps> = ({ size = 14 }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
+    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+  </svg>
+);
diff --git a/source/components/icons/HeartIcon.tsx b/source/components/icons/HeartIcon.tsx
new file mode 100644
index 0000000..deb5a9b
--- /dev/null
+++ b/source/components/icons/HeartIcon.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+import type { FC } from "react";
+
+interface IconProps {
+  size?: number;
+}
+
+export const HeartIcon: FC<IconProps> = ({ size = 14 }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
+    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+  </svg>
+);
diff --git a/source/components/icons/SettingsIcon.tsx b/source/components/icons/SettingsIcon.tsx
new file mode 100644
index 0000000..7335994
--- /dev/null
+++ b/source/components/icons/SettingsIcon.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import type { FC } from "react";
+
+interface IconProps {
+  size?: number;
+}
+
+export const SettingsIcon: FC<IconProps> = ({ size = 14 }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    <circle cx="12" cy="12" r="3" />
+    <path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72 1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+  </svg>
+);
diff --git a/source/globals.d.ts b/source/globals.d.ts
index 4c27915..2574e6c 100644
--- a/source/globals.d.ts
+++ b/source/globals.d.ts
@@ -1,2 +1,5 @@
 // https://www.typescriptlang.org/tsconfig/#noUncheckedSideEffectImports
-declare module "*.scss" {}
\ No newline at end of file
+declare module "*.scss" {
+  const content: { [className: string]: string };
+  export default content;
+}
\ No newline at end of file