diff --git a/src/components/forms/signin.tsx b/src/components/forms/signin.tsx
new file mode 100644
index 00000000..13c63cf5
--- /dev/null
+++ b/src/components/forms/signin.tsx
@@ -0,0 +1,82 @@
+import { useState } from "react";
+import logo from "@assets/img/128_keri_logo.png";
+
+export function Signin(): JSX.Element {
+  const [vendorUrl, setVendorUrl] = useState("");
+  const [passcode, setPasscode] = useState("");
+
+  const handleConnection = async () => {
+    const resp = await chrome.runtime.sendMessage({
+      type: "authentication",
+      subtype: "persist-token",
+      message: "passcode generated",
+      passcode,
+      vendorUrl,
+    });
+    console.log("res in signin", resp);
+  };
+
+  return (
+    <div className="grid grid-cols-1 gap-2">
+      <div className="flex flex-row justify-between">
+        <p>KERI</p>
+        <div>Settings Icons</div>
+      </div>
+      <div className="flex flex-row justify-center">
+        <img src={logo} className="w-32 h-32" alt="logo" />
+      </div>
+      <div>
+        <input
+          type="text"
+          id="vendor_url"
+          className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          placeholder="Enter Keria url"
+          required
+          onChange={(e) => setVendorUrl(e.target.value)}
+        />
+      </div>
+      <div>
+        <input
+          type="password"
+          id="passcode"
+          className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          placeholder="Enter your passcode"
+          required
+          onChange={(e) => setPasscode(e.target.value)}
+        />
+      </div>
+      <div>
+        <button
+          type="button"
+          onClick={handleConnection}
+          className="text-white bg-green-700 hover:bg-green-800 focus:outline-none focus:ring-4 focus:ring-green-300 font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"
+        >
+          Connect
+        </button>
+      </div>
+      <div>
+        <a
+          href="#"
+          className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
+        >
+          Don't have account?
+        </a>
+      </div>
+      <div className="flex flex-row justify-center">
+        <a
+          href="#"
+          className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
+        >
+          docs
+        </a>
+        <strong>|</strong>
+        <a
+          href="#"
+          className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
+        >
+          support
+        </a>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/main.tsx b/src/components/main.tsx
new file mode 100644
index 00000000..5d485a88
--- /dev/null
+++ b/src/components/main.tsx
@@ -0,0 +1,79 @@
+import { userService } from "@pages/background/services/user";
+
+export function Main(): JSX.Element {
+  const handleLogout = async () => {
+    await userService.removeToken();
+  };
+  return (
+    <main>
+      <aside
+        id="default-sidebar"
+        className="fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0"
+        aria-label="Sidebar"
+      >
+        <div className="h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800">
+          <ul className="space-y-2 font-medium">
+            <li>
+              <a
+                href="#"
+                className="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"
+              >
+                <svg
+                  className="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 22 21"
+                >
+                  <path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
+                  <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
+                </svg>
+                <span className="ms-3">Identifiers</span>
+              </a>
+            </li>
+            <li>
+              <a
+                href="#"
+                className="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"
+              >
+                <svg
+                  className="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 18 18"
+                >
+                  <path d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z" />
+                </svg>
+                <span className="ms-3 whitespace-nowrap">Credentials</span>
+              </a>
+            </li>
+            <li>
+              <a
+                href="#"
+                className="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"
+              >
+                <svg
+                  className="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path d="m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z" />
+                </svg>
+                <span className="ms-3 whitespace-nowrap">Sign in</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </aside>
+      <div className="p-4 sm:ml-64">
+        <button onClick={handleLogout}>Logout</button>
+        <div className="p-4 border-2 border-gray-200 border-dashed rounded-lg dark:border-gray-700">
+          <div className="grid grid-cols-3 gap-4 mb-4">Hello World</div>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 6369be41..c09f6182 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,12 +1,23 @@
 module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
+    colors: {
+      blue: "#1fb6ff",
+      purple: "#7e5bef",
+      pink: "#ff49db",
+      orange: "#ff7849",
+      green: "#13ce66",
+      yellow: "#ffc82c",
+      "gray-dark": "#273444",
+      gray: "#8492a6",
+      "gray-light": "#d3dce6",
+    },
     extend: {
       animation: {
-        'spin-slow': 'spin 20s linear infinite',
-      }
+        "spin-slow": "spin 20s linear infinite",
+      },
     },
   },
-  prefix: '',
+  prefix: "",
   plugins: [],
-}
+};
diff --git a/tsconfig.json b/tsconfig.json
index fe6f0e5b..b1e8cae3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,7 +19,8 @@
     "paths": {
       "@src/*": ["src/*"],
       "@assets/*": ["src/assets/*"],
-      "@pages/*": ["src/pages/*"]
+      "@pages/*": ["src/pages/*"],
+      "@components/*": ["src/components/*"]
     }
   },
   "include": ["src",
diff --git a/vite.config.ts b/vite.config.ts
index 1ed8cf8a..6feec579 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,6 +12,7 @@ import pkg from './package.json';
 const root = resolve(__dirname, 'src');
 const pagesDir = resolve(root, 'pages');
 const assetsDir = resolve(root, 'assets');
+const componentsDir = resolve(root, 'components');
 const outDir = resolve(__dirname, 'dist');
 const publicDir = resolve(__dirname, 'public');
 
@@ -31,6 +32,7 @@ export default defineConfig({
       '@src': root,
       '@assets': assetsDir,
       '@pages': pagesDir,
+      '@components': componentsDir,
     },
   },
   plugins: [