diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5da8f52..4f8ccaf 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,12 +8,15 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "js-cookie": "^3.0.5",
+        "jscookie": "^1.1.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "toastify": "^2.0.1"
       },
       "devDependencies": {
         "@eslint/js": "^9.30.1",
+        "@types/js-cookie": "^3.0.6",
         "@types/react": "^19.1.8",
         "@types/react-dom": "^19.1.6",
         "@vitejs/plugin-react": "^4.6.0",
@@ -1403,6 +1406,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -2550,6 +2560,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2570,6 +2589,12 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jscookie": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/jscookie/-/jscookie-1.1.0.tgz",
+      "integrity": "sha512-gicBA4BI3iVGPRTtRfWJE+20Oc+JzMR7oP2YiLjbvtDXOlihD5qM7l5hUopvdmqqgMhEuvDa3fsLd+SyGf2/hA==",
+      "license": "ISC"
+    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index fa34aca..08a6b75 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,12 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "js-cookie": "^3.0.5",
+    "jscookie": "^1.1.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "toastify": "^2.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",
+    "@types/js-cookie": "^3.0.6",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "^4.6.0",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index bcffb8e..50ce098 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,7 +1,14 @@
 import "./App.css";
+import Layout from "./Layout/Layout.tsx";
+import WeatherCard from "./components/WeatherCard";
 
 function App() {
-  return <></>;
+  return (
+    <Layout>
+      <WeatherCard />
+    </Layout>
+  );
 }
 
+
 export default App;
diff --git a/frontend/src/Layout/Layout.tsx b/frontend/src/Layout/Layout.tsx
new file mode 100644
index 0000000..0a3d02a
--- /dev/null
+++ b/frontend/src/Layout/Layout.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import Header from "../components/Header";
+
+type LayoutProps = {
+  children: React.ReactNode;
+};
+
+const Layout: React.FC<LayoutProps> = ({ children }) => {
+  return (
+    <div className="flex flex-col min-h-screen bg-gradient-to-br from-blue-50 via-blue-100 to-blue-200 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900">
+      <Header />
+      <main>{children}</main>
+    </div>
+  );
+};
+
+export default Layout;
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
new file mode 100644
index 0000000..434b391
--- /dev/null
+++ b/frontend/src/components/Header.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import Cookies from "js-cookie";
+
+const Header: React.FC = () => {
+  const setApiKey = () => {
+    const apiKey = prompt("Enter your API key:");
+    if (apiKey) {
+      Cookies.set("apiKey", apiKey);
+    }
+  };
+  return (
+    <header>
+      <h1>Weather App</h1>
+      <button onClick={() => setApiKey()}>Set API Key</button>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/frontend/src/components/WeatherCard.tsx b/frontend/src/components/WeatherCard.tsx
new file mode 100644
index 0000000..71ae0b3
--- /dev/null
+++ b/frontend/src/components/WeatherCard.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+const WeaatherCard: React.FC = () => {
+  return (
+    <div>
+      <h2>Weather Card</h2>
+      <p>Current Weather will be displayed here</p>
+      <form action="" method="post">
+        <label htmlFor="city">Enter City:</label>
+        <input type="text" id="city" name="city" placeholder="City Name" />
+        <button type="submit">Get Weather</button>
+      </form>
+    </div>
+  );
+};
+
+export default WeaatherCard;