added tailwind design classes, and installed tailwindcss properly.

frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.11",
     "js-cookie": "^3.0.5",
     "jscookie": "^1.1.0",
     "react": "^19.1.0",

frontend/src/Layout/Layout.tsx

@@ -8,10 +8,15 @@ type LayoutProps = {
 
 const Layout: React.FC<LayoutProps> = ({ children }) => {
   return (
-    <div>
+    <div className="min-h-screen bg-gradient-to-br from-blue-100 to-blue-300 flex flex-col">
       <Header />
-      <ToastContainer />
+      <ToastContainer
-      <main>{children}</main>
+        position="top-right"
+        autoClose={3000}
+        hideProgressBar
+        theme="colored"
+      />
+      <main className="flex-1 container mx-auto px-4 py-8">{children}</main>
     </div>
   );
 };

frontend/src/components/ChangeAPI.tsx

@@ -9,11 +9,15 @@ function ChangeAPI({ currentAPIKey }: Props) {
   const [apiKey, setApiKey] = useState(currentAPIKey);
 
   return (
-    <div>
+    <div className="w-full">
-      <h2>Change API Key</h2>
+      <h2 className="text-2xl font-bold mb-2 text-blue-700">Change API Key</h2>
-      <p>Update your API key to fetch weather data.</p>
+      <p className="mb-6 text-gray-600">
-      <form>
+        Update your API key to fetch weather data.
-        <label htmlFor="apiKey">API Key:</label>
+      </p>
+      <form className="flex flex-col gap-4">
+        <label htmlFor="apiKey" className="font-medium text-gray-700">
+          API Key:
+        </label>
         <input
           type="text"
           id="apiKey"
@@ -22,8 +26,13 @@ function ChangeAPI({ currentAPIKey }: Props) {
           value={apiKey}
           onChange={(e) => setApiKey(e.target.value)}
           required
+          className="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
         />
-        <button type="button" onClick={() => changeAPIcookie(apiKey)}>
+        <button
+          type="button"
+          className="bg-blue-600 text-white font-semibold px-4 py-2 rounded-lg shadow hover:bg-blue-700 transition"
+          onClick={() => changeAPIcookie(apiKey)}
+        >
           Update API Key
         </button>
       </form>

frontend/src/components/Header.tsx

@@ -9,11 +9,31 @@ const Header: React.FC = () => {
 
   return (
     <>
-      <header>
+      <header className="bg-blue-600 text-white shadow-md py-6 px-4 flex items-center justify-between">
-        <h1>Weather App</h1>
+        <h1 className="text-3xl font-bold tracking-wide drop-shadow">
-        <button onClick={() => setApiCard(true)}>Set API Key</button>
+          Weather App
+        </h1>
+        <button
+          className="bg-white text-blue-600 font-semibold px-4 py-2 rounded-lg shadow hover:bg-blue-100 transition"
+          onClick={() => setApiCard(true)}
+        >
+          Set API Key
+        </button>
       </header>
-      {apiCard && <ChangeAPI currentAPIKey={apiKey} />}
+      {apiCard && (
+        <div className="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50">
+          <div className="bg-white rounded-xl shadow-lg p-8 w-full max-w-md relative">
+            <button
+              className="absolute top-4 right-4 text-gray-400 hover:text-blue-600 text-xl"
+              onClick={() => setApiCard(false)}
+              aria-label="Close"
+            >
+              &times;
+            </button>
+            <ChangeAPI currentAPIKey={apiKey} />
+          </div>
+        </div>
+      )}
     </>
   );
 };

frontend/tailwind.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    // add other paths if needed
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

frontend/vite.config.ts

@@ -1,7 +1,5 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from "vite";
-import react from '@vitejs/plugin-react'
+import tailwindcss from "@tailwindcss/vite";
-
-// https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [tailwindcss()],
-})
+});