my_ui_changes.patch

diff --git a/Frontend/Analysis/analysis.css b/Frontend/Analysis/analysis.css
index 09a2c5a..db8acae 100644
--- a/Frontend/Analysis/analysis.css
+++ b/Frontend/Analysis/analysis.css
@@ -189,8 +189,12 @@ body::before {
 }
 
 .analysis-hero {
-  padding: 28px 8px 0 6px;
-  max-width: 960px;
+    display: grid;
+    grid-template-columns: 1.15fr 0.85fr;
+    gap: 40px;
+    align-items: center;
+    padding: 28px 8px 0 6px;
+    max-width: 1140px;
 }
 
 .eyebrow {
@@ -208,13 +212,72 @@ body::before {
 }
 
 .analysis-hero h1 {
-  font-size: clamp(2.4rem, 5vw, 4.7rem);
-  line-height: 0.98;
-  letter-spacing: -0.04em;
-  max-width: 10ch;
-  color: #f8fafc;
+    font-size: clamp(2.2rem, 4vw, 4.2rem);
+    line-height: 1.1;
+    letter-spacing: -0.03em;
+    min-height: 3.3em;
 }
 
+#hero-typing-text {
+    display: block;
+}
+
+.typewriter-cursor {
+    display: inline-block;
+    width: 4px;
+    height: 1em;
+    background-color: var(--accent);
+    margin-left: 4px;
+    vertical-align: middle;
+    animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
+}
+
+.hero-right {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.hero-image-carousel {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.carousel-img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0;
+    transition: opacity 1.5s ease-in-out, transform 8s ease-out;
+    transform: scale(1.05);
+}
+
+.carousel-img.active {
+    opacity: 1;
+    transform: scale(1);
+}
+
+.carousel-overlay {
+    position: absolute;
+    inset: 0;
+    background: 
+        linear-gradient(to top, var(--bg-0) 0%, rgba(2, 6, 23, 0.1) 60%);
+    pointer-events: none;
+    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4);
+}
 
 .analysis-hero p {
   margin-top: 18px;
@@ -232,25 +295,25 @@ body::before {
 }
 
 .mini-stats div {
-  padding: 18px 16px;
-  border-radius: 18px;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(12px);
-  cursor: pointer;
-  transition: all 0.3s ease;
+    padding: 18px 16px;
+    border-radius: 18px;
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(12px);
+    cursor: pointer;
+    transition: all 0.3s ease;
 }
 
 .mini-stats div:hover {
-  transform: scale(1.03);
-  box-shadow: 0 12px 28px rgba(56, 189, 248, 0.2);
+    transform: scale(1.03);
+    box-shadow: 0 12px 28px rgba(56, 189, 248, 0.2);
 }
 
 .mini-stats strong {
-  display: block;
-  font-size: 1.25rem;
-  font-weight: 700;
-  margin-bottom: 6px;
+    display: block;
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin-bottom: 6px;
 }
 
 .mini-stats span {
@@ -279,7 +342,7 @@ body::before {
   border-radius: 999px;
   background: rgba(56, 189, 248, 0.12);
   border: 1px solid rgba(56, 189, 248, 0.22);
-  color: #0284c7;
+  color: #a5f3fc;
   font-size: 0.8rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
@@ -303,25 +366,25 @@ body::before {
 }
 
 .analysis-intro-meta div {
-  padding: 14px 16px;
-  border-radius: 16px;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  cursor: pointer;
-  transition: all 0.3s ease;
+    padding: 14px 16px;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    cursor: pointer;
+    transition: all 0.3s ease;
 }
 
 .analysis-intro-meta div:hover {
-  transform: scale(1.03);
-  box-shadow: 0 12px 28px rgba(56, 189, 248, 0.2);
+    transform: scale(1.03);
+    box-shadow: 0 12px 28px rgba(56, 189, 248, 0.2);
 }
 
 .analysis-intro-meta strong {
-  display: block;
-  margin-bottom: 6px;
-  color: #7dd3fc;
-  font-size: 1.05rem;
-  font-weight: 700;
+    display: block;
+    margin-bottom: 6px;
+    color: #7dd3fc;
+    font-size: 1.05rem;
+    font-weight: 700;
 }
 
 .analysis-intro-meta span {
@@ -600,16 +663,11 @@ button:hover {
 
 .risk-card {
   text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-width: 0;
 }
 
-.risk-card > p:not(.risk-label):not(.risk-description) {
+.risk-card p {
   font-size: 1.8rem;
   font-weight: 800;
-  margin: 0;
 }
 
 .flood {
@@ -626,7 +684,7 @@ button:hover {
   padding: 20px;
   border-radius: 18px;
   line-height: 1.7;
-  font-weight: 700;
+  font-weight: 600;
   font-size: 0.98rem;
   animation: fadeIn 0.35s ease;
 }
@@ -654,7 +712,7 @@ button:hover {
 
 .alert-danger {
   background: rgba(239, 68, 68, 0.16);
-  border: 1px solid rgba(230, 10, 10, 0.42);
+  border: 1px solid rgba(239, 68, 68, 0.42);
   color: #fecaca;
 }
 
@@ -665,8 +723,16 @@ button:hover {
 }
 
 .footer {
-  margin-top: 30px;
+  margin-top: 22px;
+  padding: 22px 24px;
   border-radius: 22px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(2, 6, 23, 0.55);
+  backdrop-filter: blur(18px);
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: center;
   box-shadow: var(--shadow);
 }
 
@@ -858,9 +924,20 @@ button:hover {
     align-items: flex-start;
   }
 
-  .analysis-hero h1 {
-    max-width: 12ch;
-  }
+    .analysis-hero {
+        grid-template-columns: 1fr;
+    }
+    .hero-right {
+        aspect-ratio: 16 / 9;
+        margin-top: 14px;
+    }
+    #hero-typing-text {
+        min-height: auto;
+    }
+
+    .analysis-hero h1 {
+        max-width: 12ch;
+    }
 
   .analysis-intro {
     grid-template-columns: 1fr;
@@ -946,12 +1023,10 @@ button:hover {
   background: rgba(239, 68, 68, 0.15);
   border: 1px solid rgba(239, 68, 68, 0.35);
   color: #fecaca;
-  font-weight: 700;
 }
 
 .clear-btn:hover {
-  background: #fecaca;
-  color: #b91c1c;
+  background: rgba(239, 68, 68, 0.25);
 }
 
 /* =========================================================
@@ -1033,8 +1108,8 @@ button:hover {
 /* MULTI-RISK GRID (5 CARDS) */
 .risk-grid-five {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 14px;
+  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+  gap: 12px;
   margin-bottom: 22px;
 }
 
@@ -1279,7 +1354,7 @@ button:hover {
 }
 
 .log-entry {
-  background: rgba(255, 255, 255, 0.04);
+  background: rgba(255,255,255,0.04);
   border-radius: 14px;
   padding: 14px;
   border-left: 4px solid;
@@ -1289,12 +1364,10 @@ button:hover {
   transition: all 0.2s ease;
   animation: fadeIn 0.25s ease;
 }
-
 .log-entry:hover {
   transform: translateY(-2px);
-  background: rgba(255, 255, 255, 0.07);
+  background: rgba(255,255,255,0.07);
 }
-
 .log-entry.success {
   border-left-color: #22c55e;
   color: #86efac;
@@ -1345,18 +1418,19 @@ button:hover {
   font-weight: 700;
 }
 
+
 .badge-info {
-  background: rgba(56, 189, 248, 0.15);
+  background: rgba(56,189,248,0.15);
   color: #38bdf8;
 }
 
 .badge-warning {
-  background: rgba(245, 158, 11, 0.15);
+  background: rgba(245,158,11,0.15);
   color: #f59e0b;
 }
 
 .badge-critical {
-  background: rgba(239, 68, 68, 0.15);
+  background: rgba(239,68,68,0.15);
   color: #ef4444;
 }
 
@@ -1390,7 +1464,7 @@ button:hover {
 }
 
 .demo-indicator.hidden {
-  display: none !important;
+    display: none !important;
 }
 
 /* RESPONSIVE LAYOUT UPDATES */
@@ -1398,19 +1472,15 @@ button:hover {
   .report-main-grid {
     grid-template-columns: 1fr;
   }
-
   .map-card-wrapper {
     min-height: 320px;
   }
-
   .forecast-cards-container {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
-
   .charts-wrapper {
     grid-template-columns: 1fr;
   }
-
   .alerts-center-section {
     grid-template-columns: 1fr;
   }
@@ -1420,11 +1490,9 @@ button:hover {
   .forecast-cards-container {
     grid-template-columns: 1fr;
   }
-
   .subscribe-inputs {
     grid-template-columns: 1fr;
   }
-
   .risk-grid-five {
     grid-template-columns: 1fr 1fr;
   }
@@ -1450,229 +1518,77 @@ button:hover {
 .contact-links a:hover {
   opacity: 0.8;
 }
-.recent-search-container {
-  margin-top: 24px;
-  width: 100%;
-}
-.recent-search-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  justify-content: flex-start;
-}
-
-.toggle-history-btn,
-.clear-history-btn {
-  width: auto;
-  min-width: 180px;
-  padding: 12px 18px;
-  border-radius: 12px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.toggle-history-btn {
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  color: white;
-}
-
-.clear-history-btn {
-  background: rgba(239, 68, 68, 0.15);
-  border: 1px solid rgba(239, 68, 68, 0.35);
-  color: #fecaca;
-}
-
-.hidden-history {
-  display: none;
-}
-
-.show-history {
-  display: block;
-  margin-top: 16px;
-}
 
-#recent-search-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.search-chip {
-  padding: 10px 16px;
-  border-radius: 999px;
-  border: none;
-  cursor: pointer;
-  background: rgba(255, 255, 255, 0.12);
-  color: white;
-  font-size: 13px;
-  transition: 0.3s ease;
-}
-
-.search-chip:hover {
-  background: rgba(255, 255, 255, 0.22);
-}
+/* Theme Toggle & Light Mode for Analysis Page */
 .theme-toggle {
   width: 42px;
   height: 42px;
-  min-width: 42px;
-  max-width: 42px;
-
-  padding: 0;
-  border: none;
-
   border-radius: 50%;
-
+  border: none;
+  cursor: pointer;
+  font-size: 1.2rem;
+  background: var(--panel);
+  color: var(--text);
   display: flex;
   align-items: center;
   justify-content: center;
-
-  background: rgba(255, 255, 255, 0.08);
-  color: white;
-
-  font-size: 20px;
-  cursor: pointer;
-
-  transition: all 0.3s ease;
+  flex: 0 0 auto;
+  transition: transform 0.2s ease, background 0.2s ease;
 }
-
 .theme-toggle:hover {
-  background: rgba(255, 255, 255, 0.15);
-}
-body.light-theme {
-  background: #f8fafc;
-  color: #0f172a;
-}
-
-body.light-theme .glass-card,
-body.light-theme .navbar,
-body.light-theme .result-card,
-body.light-theme .sidebar,
-body.light-theme .map-card {
-  background: rgba(255, 255, 255, 0.9);
-  color: #0f172a;
-}
-
-body.light-theme input {
-  background: #ffffff;
-  color: #0f172a;
-  border-color: #cbd5e1;
-}
-
-body.light-theme label,
-body.light-theme h1,
-body.light-theme h2,
-body.light-theme h3,
-body.light-theme p {
-  color: #0f172a;
-}
-
-body.light-theme .theme-toggle {
-  background: #111827;
-  color: #ffffff;
-}
-body.light-theme .toggle-history-btn {
-  background: #e5e7eb;
-  color: #111827;
-  border: 1px solid #cbd5e1;
+  transform: scale(1.05);
 }
 
-body.light-theme .clear-history-btn,
-body.light-theme .clear-btn {
-  background: #fee2e2;
-  color: #991b1b;
-  border: 1px solid #fca5a5;
-}
+body.light-mode {
+  --bg-0: #f8fafc;
+  --bg-1: #edf2f7;
+  --bg-2: #dbeafe;
 
-body.light-theme .clear-history-btn:hover,
-body.light-theme .clear-btn:hover {
-  background: #fecaca;
-  color: #7f1d1d;
-}
-body.light-theme .eyebrow {
-  background: #dbeafe;
-  color: #075985;
-  border: 1px solid #7dd3fc;
-}
-body.light-theme .alert-success,
-body.light-theme .success-message,
-body.light-theme .status-success,
-body.light-theme .alert-box.success {
-  background: #beefcf;
-  border: 1px solid #27c260;
-  color: #166534 !important;
-}
+  --panel: rgba(255, 255, 255, 0.75);
+  --panel-strong: rgba(255, 255, 255, 0.9);
 
-body.light-theme .alert-success *,
-body.light-theme .success-message *,
-body.light-theme .status-success *,
-body.light-theme .alert-box.success *,
-body.light-theme .reults-kicker * {
-  color: #166534 !important;
+  --text: #0f172a;
+  --muted: #334155;
+  --muted-2: #64748b;
 }
-#scrollTopBtn,
-.scroll-top-btn {
-  position: fixed !important;
-  right: 31px !important;
-  bottom: 96px !important;
-
-  width: 52px !important;
-  height: 52px !important;
-  min-width: 52px !important;
-  max-width: 52px !important;
 
-  padding: 0 !important;
-  margin: 0 !important;
-  border-radius: 50% !important;
-
-  display: none;
-  align-items: center !important;
-  justify-content: center !important;
-
-  font-size: 22px !important;
-  z-index: 9999;
+body.light-mode .navbar {
+  background: rgba(255, 255, 255, 0.35);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.4);
+}
+
+/* Light mode text visibility overrides */
+body.light-mode .section-title,
+body.light-mode .location-box p,
+body.light-mode .weather-box p,
+body.light-mode .risk-card p,
+body.light-mode .input-group input,
+body.light-mode .results-kicker,
+body.light-mode .status-pill,
+body.light-mode .eyebrow,
+body.light-mode .clear-btn,
+body.light-mode .log-message,
+body.light-mode .demo-indicator {
+  color: var(--text) !important;
 }
-#chatbot-toggle,
-.chatbot-toggle,
-.chatbot-btn {
-  position: fixed !important;
-  right: 24px !important;
-  bottom: 24px !important;
 
-  width: 64px !important;
-  height: 64px !important;
-  min-width: 64px !important;
-  max-width: 64px !important;
-
-  border-radius: 50% !important;
-  z-index: 9999;
-}
-body.light-theme #recent-search-list {
-  background: transparent;
+body.light-mode .weather-box h3,
+body.light-mode .risk-card h3,
+body.light-mode .input-group input::placeholder {
+  color: var(--muted) !important;
 }
 
-body.light-theme .search-chip {
-  background: #e0f2fe;
-  color: #075985;
-  border: 1px solid #7dd3fc;
+body.light-mode .input-group input {
+  background: rgba(255, 255, 255, 0.8) !important;
+  border-color: rgba(0, 0, 0, 0.1) !important;
 }
 
-body.light-theme .search-chip:hover {
-  background: #bae6fd;
-  color: #0c4a6e;
-}
-.forecast-primary-cause {
-  margin-top: 10px;
-  text-align: center;
-  color: #fbbf24;
-  font-weight: 700;
-  font-size: 0.9rem;
+body.light-mode .location-box {
+  background: rgba(56, 189, 248, 0.2) !important;
+  border-color: rgba(56, 189, 248, 0.3) !important;
 }
 
-.forecast-secondary-cause {
-  margin-top: 4px;
-  text-align: center;
-  color: #fcd34d;
-  font-size: 0.8rem;
+body.light-mode #alerts-box {
+  color: var(--text) !important;
 }
diff --git a/Frontend/Analysis/analysis.html b/Frontend/Analysis/analysis.html
index 8c03c3b..ac76322 100644
--- a/Frontend/Analysis/analysis.html
+++ b/Frontend/Analysis/analysis.html
@@ -44,40 +44,51 @@
             </a>
 
             <div class="nav-links">
-                <a href="../index.html">Home</a>
-                <a href="#analysis-form">Analysis</a>
-                <a href="#results">Results</a>
-            </div>
+    <a href="../index.html">Home</a>
+    <a href="#analysis-form">Analysis</a>
+    <a href="#results">Results</a>
+</div>
 
-            <button id="theme-toggle" class="theme-toggle">
-                Γÿ╛
-            </button>
+<button id="theme-toggle" class="theme-toggle">
+    Γÿ╛
+</button>
 
-            <a class="nav-cta" href="#analysis-form">Analyze now</a>
+<a class="nav-cta" href="#analysis-form">Analyze now</a>
         </nav>
 
         <main class="analysis-layout">
 
             <section class="analysis-hero">
-                <span class="eyebrow">Weather analysis workspace</span>
-                <h1>Check flood and heat risk for any location in seconds.</h1>
-                <p>
-                    Enter a city, state, and country to pull live weather data, summarize risk,
-                    and surface alerts in a clean, readable format.
-                </p>
-
-                <div class="mini-stats">
-                    <div>
-                        <strong>Live</strong>
-                        <span>Weather fetch</span>
-                    </div>
-                    <div>
-                        <strong>Fast</strong>
-                        <span>Risk scoring</span>
+                <div class="analysis-hero-left">
+                    <span class="eyebrow">Weather analysis workspace</span>
+                    <h1 id="hero-typing-text"></h1>
+                    <p>
+                        Enter a city, state, and country to pull live weather data, summarize risk,
+                        and surface alerts in a clean, readable format.
+                    </p>
+
+                    <div class="mini-stats">
+                        <div>
+                            <strong>Live</strong>
+                            <span>weather fetch</span>
+                        </div>
+                        <div>
+                            <strong>Fast</strong>
+                            <span>risk scoring</span>
+                        </div>
+                        <div>
+                            <strong>Clear</strong>
+                            <span>alert feedback</span>
+                        </div>
                     </div>
-                    <div>
-                        <strong>Clear</strong>
-                        <span>Alert feedback</span>
+                </div>
+
+                <div class="hero-right">
+                    <div class="hero-image-carousel">
+                        <img src="../images/weather_1.jpg" class="carousel-img active" alt="Safe City" />
+                        <img src="../images/weather_2.jpg" class="carousel-img" alt="Heatwave Risk" />
+                        <img src="../images/weather_3.jpg" class="carousel-img" alt="Flood Risk" />
+                        <div class="carousel-overlay"></div>
                     </div>
                 </div>
             </section>
@@ -137,16 +148,16 @@
 
                     <div class="button-group">
 
-    <button id="analyze-btn" onclick="getWeatherData()">
-     Analyze Climate Risk
-    </button>
-    <button type="button" onclick="useCurrentLocation()">
-     Use Current Location
-    </button>
+                        <button id="analyze-btn" onclick="getWeatherData()">
+                            Analyze Climate Risk
+                        </button>
+                        <button type="button" onclick="useCurrentLocation()">
+                            Use Current Location
+                        </button>
 
-    <button class="clear-btn" onclick="clearResults()">
-         🗑 Clear All
-    </button>
+                        <button class="clear-btn" onclick="clearResults()">
+                            Clear All
+                        </button>
 
                     </div>
                     <div id="loading" class="loading hidden">
@@ -154,39 +165,27 @@
                     </div>
 
                     <div id="message-box" class="message-box hidden"></div>
-                    <div id="recent-search-container" class="recent-search-container">
-    <div class="recent-search-header">
-        
-        <button id="toggle-history-btn" class="toggle-history-btn" type="button">
-            Recent Searches Γû╝
-        </button>
-        <button id="clear-history-btn" class="clear-history-btn" type="button">
-            🗑 Clear History
-        </button>
-    </div>
 
-    <div id="recent-search-wrapper" class="hidden-history">
-        <div id="recent-search-list"></div>
-    </div>
-</div>
                 </div>
 
-                <div id="results" class="glass-card results-card hidden">
+                <div id="results" class="glass-card results-card is-visible">
 
                     <div class="results-header">
                         <div>
-                            <span class="results-kicker">Analysis complete</span>
-                            <h3 id="result-status">Ready to review location risk</h3>
+                            <span class="results-kicker">Live Data</span>
+                            <h3 id="result-status">Current Heat Scenario: India</h3>
                             <p id="result-summary">
-                                Your live weather snapshot and risk analysis will appear here after each search.
+                                Showing default live temperature trends. Enter a location to analyze specific weather
+                                risks.
                             </p>
                         </div>
 
                         <div class="status-pill" id="status-pill">
-                            Waiting for input
+                            Live Status
                         </div>
                     </div>
 
+
                     <div class="location-box">
                         <h3>📌 Location Under Analysis</h3>
                         <p id="location"></p>
@@ -223,32 +222,22 @@
                                 <div class="risk-card flood">
                                     <h3>Flood Risk</h3>
                                     <p id="flood-risk"></p>
-                                    <p class="risk-label">--</p>
-                                    <p class="risk-description">--</p>
                                 </div>
                                 <div class="risk-card heat">
                                     <h3>Heat Risk</h3>
                                     <p id="heat-risk"></p>
-                                    <p class="risk-label">--</p>
-                                    <p class="risk-description">--</p>
                                 </div>
                                 <div class="risk-card wildfire">
                                     <h3>Wildfire Risk</h3>
                                     <p id="wildfire-risk"></p>
-                                    <p class="risk-label">--</p>
-                                    <p class="risk-description">--</p>
                                 </div>
                                 <div class="risk-card cyclone">
                                     <h3>Cyclone Risk</h3>
                                     <p id="cyclone-risk"></p>
-                                    <p class="risk-label">--</p>
-                                    <p class="risk-description">--</p>
                                 </div>
                                 <div class="risk-card drought">
                                     <h3>Drought Risk</h3>
                                     <p id="drought-risk"></p>
-                                    <p class="risk-label">--</p>
-                                    <p class="risk-description">--</p>
                                 </div>
                             </div>
                         </div>
@@ -261,10 +250,7 @@
                         </div>
 
                     </div>
-<div id="recommendations-panel" class="recommendations-panel hidden">
-    <h3>🛡 Safety Recommendations</h3>
-    <ul id="recommendations-list"></ul>
-</div>
+
                     <div id="alert-box" class="alert-box hidden"></div>
 
                     <!-- 5-Day Weather & Risk Forecast Section -->
@@ -361,135 +347,35 @@
 
         </main>
 
-        <footer id="contact" style="
-        display: block !important;
-        background: #1a2232 !important;
-        padding: 0 !important;
-        margin-top: 30px;
-        border-radius: 22px;
-        border: 1px solid rgba(255,255,255,0.07);
-      ">
-
-        <!-- main footer content -->
-        <div style="padding: 44px 48px 36px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px; align-items: start;">
-
-          <!-- col 1: brand -->
-          <div>
-            <div style="display:flex; align-items:center; gap:10px; margin-bottom:16px;">
-              <span style="font-size:28px; line-height:1;">🌍</span>
-              <div>
-                <div style="font-size:1.2rem; font-weight:800; color:#ffffff; letter-spacing:-0.01em; line-height:1;">Climate Shield</div>
-                <div style="font-size:0.72rem; color:#64748b; letter-spacing:0.04em; margin-top:2px; text-transform:uppercase;">Climate Intelligence</div>
-              </div>
-            </div>
-            <p style="font-size:0.8rem; color:#94a3b8; line-height:1.7; margin-bottom:20px; max-width:200px;">
-              Real-time weather risk monitoring for flood and heatwave awareness.
-            </p>
-            <!-- phone-style contact -->
-            <div style="font-size:0.95rem; font-weight:700; color:#38bdf8; margin-bottom:14px; letter-spacing:0.01em;">
-              Protecting communities with fast, simple climate risk visibility.
+        <footer class="footer">
+            <div>
+                <strong>Climate Shield</strong>
+                <p>Focused weather analysis with a cleaner, faster interface.</p>
             </div>
 
-            <!-- social icons row -->
-            <div style="display:flex; gap:7px;">
-              <a href="https://github.com/thetechguardians/Climate-Shield" target="_blank" rel="noopener"
-                 style="width:30px;height:30px;border-radius:4px;background:#38bdf8;display:flex;align-items:center;justify-content:center;text-decoration:none;"
-                 onmouseover="this.style.background='#0ea5e9'" onmouseout="this.style.background='#38bdf8'">
-                <svg width="14" height="14" fill="white" viewBox="0 0 24 24"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-5.9 0-1.3.5-2.4 1.2-3.2 0-.4-.5-1.6.2-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0C17 4.7 18 5 18 5c.7 1.6.2 2.8.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.6-5.5 5.9.5.4.9 1.2.9 2.3v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3"/></svg>
-              </a>
-              <a href="https://github.com/thetechguardians/Climate-Shield/issues" target="_blank" rel="noopener"
-                 style="width:30px;height:30px;border-radius:4px;background:#0f766e;display:flex;align-items:center;justify-content:center;text-decoration:none;"
-                 onmouseover="this.style.background='#0d9488'" onmouseout="this.style.background='#0f766e'">
-                <svg width="14" height="14" fill="none" stroke="white" stroke-width="2.2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
-              </a>
-              <a href="https://github.com/thetechguardians/Climate-Shield/discussions" target="_blank" rel="noopener"
-                 style="width:30px;height:30px;border-radius:4px;background:#334155;display:flex;align-items:center;justify-content:center;text-decoration:none;"
-                 onmouseover="this.style.background='#475569'" onmouseout="this.style.background='#334155'">
-                <svg width="14" height="14" fill="none" stroke="white" stroke-width="2.2" viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
-              </a>
-            </div>
-          </div>
-
-          <!-- col 2: navigate -->
-          <div>
-            <p style="font-size:0.78rem;font-weight:700;color:#ffffff;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid #38bdf8;display:inline-block;">Navigate</p>
-            <div style="display:flex;flex-direction:column;gap:9px;">
-              <a href="../index.html"                  style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;transition:color 0.2s;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Home</a>
-              <a href="../index.html#features"              style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Features</a>
-              <a href="#chatbot-panel"         style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Climate Bot</a>
-            </div>
-          </div>
-
-          <!-- col 3: resources -->
-          <div>
-            <p style="font-size:0.78rem;font-weight:700;color:#ffffff;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid #38bdf8;display:inline-block;">Resources</p>
-            <div style="display:flex;flex-direction:column;gap:9px;">
-
-              <a href="https://github.com/thetechguardians/Climate-Shield/issues" target="_blank" rel="noopener"
-                 style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Report an Issue</a>
-              <a href="https://github.com/thetechguardians/Climate-Shield/discussions" target="_blank" rel="noopener"
-                 style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Discussions</a>
-              <a href="https://github.com/thetechguardians/Climate-Shield/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener"
-                 style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Contributing</a>
-              <a href="https://github.com/thetechguardians/Climate-Shield/blob/main/README.md" target="_blank" rel="noopener"
-                 style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Documentation</a>
-            </div>
-          </div>
-
-          
-
-          <!-- col 4: Community -->
-          <div>
-            <p style="font-size:0.78rem;font-weight:700;color:#ffffff;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid #38bdf8;display:inline-block;">Community</p>
-            <div style="display:flex;flex-direction:column;gap:9px;">
-             
-              <a href="https://github.com/thetechguardians/Climate-Shield/graphs/contributors" style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Contributors</a>
-                            <a href="https://github.com/thetechguardians/Climate-Shield" target="_blank" rel="noopener"
-                 style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>GitHub Repository</a>
-              <a href="https://github.com/thetechguardians/Climate-Shield/blob/main/LICENSE" target="_blank" rel="noopener"
-                 style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>MIT License</a>
+            <div class="footer-links">
+                <a href="../index.html">Home</a>
+                <a href="#analysis-form">Analysis</a>
+                <a href="#results">Results</a>
             </div>
-          </div>
-
-        </div><!-- /main grid -->
-
-        <!-- copyright bar ΓÇö darker strip like IQMS -->
-        <div style="background:#111827; border-top:1px solid rgba(255,255,255,0.06); padding:14px 48px; display:flex; align-items:center; justify-content:center; border-radius:0 0 22px 22px;">
-          <p style="font-size:0.75rem; color:#475569; margin:0; text-align:center;">
-            &copy; 2025 <strong style="color:#64748b; font-weight:600;">Climate Shield</strong>
-            &nbsp;&middot;&nbsp; MIT License
-            &nbsp;&middot;&nbsp; SSoC 2026
-            &nbsp;&middot;&nbsp; Made with &#9829; by The Tech Guardians
-          </p>
-        </div>
-
-        <!-- responsive styles -->
-        <style>
-          @media (max-width: 1024px) {
-            #contact > div:first-of-type {
-              grid-template-columns: 1fr 1fr 1fr !important;
-            }
-          }
-          @media (max-width: 700px) {
-            #contact > div:first-of-type {
-              grid-template-columns: 1fr 1fr !important;
-              padding: 32px 24px 28px !important;
-            }
-            #contact > div:last-of-type {
-              padding-left: 24px !important;
-              padding-right: 24px !important;
-            }
-          }
-          @media (max-width: 480px) {
-            #contact > div:first-of-type {
-              grid-template-columns: 1fr !important;
-            }
-          }
-        </style>
-
-      </footer>
+            <div class="contact-section">
+                <strong>Contact & Support</strong>
 
+                <div class="contact-links">
+                    <a href="https://github.com/thetechguardians/Climate-Shield" target="_blank">
+                        GitHub Repository
+                    </a>
 
+                    <a href="https://github.com/thetechguardians/Climate-Shield/issues" target="_blank">
+                        Report an Issue
+                    </a>
+
+                    <a href="https://github.com/thetechguardians/Climate-Shield/discussions" target="_blank">
+                        GitHub Discussions
+                    </a>
+                </div>
+            </div>
+        </footer>
 
         <button id="chatbot-toggle" class="chatbot-toggle" type="button" aria-controls="chatbot-panel"
             aria-expanded="false" aria-label="Open ClimateBot" title="Open ClimateBot">
@@ -511,12 +397,6 @@
             </div>
 
             <form id="chatbot-form" class="chatbot-form">
-                <span
-                  id="chatbot-context-badge"
-                  style="display:none; font-size:0.72rem; color:rgba(255,255,255,0.55);
-                         background:rgba(255,255,255,0.07); border-radius:999px;
-                         padding:2px 10px; margin-bottom:6px;">
-                </span>
                 <input id="chatbot-input" type="text" placeholder="Type your question..." autocomplete="off" required>
                 <button type="submit">Send</button>
             </form>
@@ -525,9 +405,8 @@
         </section>
 
     </div>
-    <button id="scrollTopBtn" class="scroll-top-btn" title="Back to Top">
-        Γåæ
-    </button>
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="analysis.js"></script>
     <script src="../chatbot.js"></script>
 
diff --git a/Frontend/Analysis/analysis.js b/Frontend/Analysis/analysis.js
index 354e4ac..33c6c39 100644
--- a/Frontend/Analysis/analysis.js
+++ b/Frontend/Analysis/analysis.js
@@ -1,6 +1,6 @@
 const API_URL =
   window.location.hostname === "127.0.0.1" ||
-    window.location.hostname === "localhost"
+  window.location.hostname === "localhost"
     ? "http://127.0.0.1:5000/weather"
     : window.location.origin + "/weather";
 
@@ -12,107 +12,6 @@ let riskChartInstance = null;
 // Expose active location data globally for the chatbot to access
 window.activeClimateReport = null;
 
-const descriptions = {
-  flood: {
-    low: "No significant flood risk right now. Normal conditions expected ΓÇö no action needed.",
-    moderate:
-      "Some flood potential exists. Avoid low-lying areas during heavy rain and keep an eye on local alerts.",
-    high: "Flood risk is elevated. Stay away from rivers, drains, and flood-prone zones. Follow official advisories.",
-    critical:
-      "Dangerous flood conditions. Move to higher ground immediately and contact local emergency services.",
-  },
-  heat: {
-    low: "Heat levels are comfortable. No heat-related precautions needed at this time.",
-    moderate:
-      "Mild heat stress possible. Stay hydrated, limit outdoor activity during peak afternoon hours.",
-    high: "High heat risk. Avoid outdoor exertion, drink water frequently, and check on elderly neighbours.",
-    critical:
-      "Extreme heat emergency. Stay indoors in a cool place, call for medical help if you feel unwell.",
-  },
-  wildfire: {
-    low: "Wildfire conditions are calm. No immediate fire risk in your area.",
-    moderate:
-      "Dry and warm conditions present some fire risk. Avoid open burning and report any smoke immediately.",
-    high: "Elevated wildfire risk. Do not light fires outdoors. Stay informed and be ready to evacuate if directed.",
-    critical:
-      "Critical wildfire danger. Follow evacuation orders immediately and keep emergency bags ready.",
-  },
-  cyclone: {
-    low: "No cyclone activity expected. Weather conditions are stable.",
-    moderate:
-      "Low-level cyclone indicators detected. Monitor weather bulletins from your local authority.",
-    high: "Cyclone risk is significant. Secure loose objects, stock emergency supplies, and plan your evacuation route.",
-    critical:
-      "Severe cyclone warning. Seek sturdy shelter immediately and do not travel until the all-clear is given.",
-  },
-  drought: {
-    low: "Water supply conditions are normal. No drought stress at this time.",
-    moderate:
-      "Some drought stress is possible. Consider conserving water and monitoring local reservoir advisories.",
-    high: "Drought conditions are significant. Restrict non-essential water use and follow local water-saving guidelines.",
-    critical:
-      "Severe drought. Water shortages likely. Comply with all rationing measures and store emergency water supplies.",
-  },
-};
-
-function getRiskLevel(score, riskType) {
-  const type = riskType.toLowerCase();
-  const d = descriptions[type] || descriptions.flood;
-
-  if (score <= 0.29) return { label: "Low", cssClass: "low", desc: d.low };
-  if (score <= 0.49)
-    return { label: "Moderate", cssClass: "moderate", desc: d.moderate };
-  if (score <= 0.69) return { label: "High", cssClass: "high", desc: d.high };
-  return { label: "Critical", cssClass: "critical", desc: d.critical };
-}
-function generateRecommendations(risks) {
-  const recommendations = [];
-
-  if (risks.flood >= 0.7) {
-    recommendations.push(
-      "Avoid low-lying and flood-prone areas.",
-      "Keep emergency supplies and important documents ready."
-    );
-  }
-
-  if (risks.heat >= 0.7) {
-    recommendations.push(
-      "Stay hydrated throughout the day.",
-      "Avoid outdoor activities during peak heat hours."
-    );
-  }
-
-  if (risks.wildfire >= 0.7) {
-    recommendations.push(
-      "Avoid forested areas and open flames.",
-      "Prepare for possible evacuation notices."
-    );
-  }
-
-  if (risks.cyclone >= 0.7) {
-    recommendations.push(
-      "Secure loose outdoor objects.",
-      "Keep emergency kits and communication devices ready."
-    );
-  }
-
-  if (risks.drought >= 0.7) {
-    recommendations.push(
-      "Conserve water whenever possible.",
-      "Avoid unnecessary water consumption.",
-      "Follow local water restriction guidelines."
-    );
-  }
-
-  if (recommendations.length === 0) {
-    recommendations.push(
-      "Current climate risks are low. Continue monitoring weather conditions."
-    );
-  }
-
-  return recommendations;
-}
-
 async function getWeatherData() {
   const city = document.getElementById("city").value.trim();
   const state = document.getElementById("state").value.trim();
@@ -147,7 +46,9 @@ async function getWeatherData() {
     return;
   }
 
-  loading.classList.add("hidden");
+  loading.classList.remove("hidden");
+  analyzeBtn.disabled = true;
+  analyzeBtn.textContent = "Analyzing...";
 
   hideMessage();
   results.classList.add("hidden");
@@ -175,7 +76,6 @@ async function getWeatherData() {
     }
 
     hideMessage();
-    saveRecentSearch(city, state, country);
 
     // Update active report in window context
     window.activeClimateReport = data;
@@ -193,109 +93,12 @@ async function getWeatherData() {
       `${data.weather.wind_speed} km/h`;
 
     // Risks scores
-    const floodCard = document.querySelector(".risk-card.flood");
-    const floodScore = data.risks.flood_risk;
-    document.getElementById("flood-risk").innerText = floodScore;
-    let score = floodScore;
-    let card = floodCard;
-    let level = getRiskLevel(score, "flood");
-    let labelEl = card.querySelector(".risk-label");
-    labelEl.textContent = level.label;
-    labelEl.className = "risk-label " + level.cssClass;
-    card.querySelector(".risk-description").textContent = level.desc;
-
-    const heatCard = document.querySelector(".risk-card.heat");
-    const heatScore = data.risks.heat_risk;
-    document.getElementById("heat-risk").innerText = heatScore;
-    score = heatScore;
-    card = heatCard;
-    level = getRiskLevel(score, "heat");
-    labelEl = card.querySelector(".risk-label");
-    labelEl.textContent = level.label;
-    labelEl.className = "risk-label " + level.cssClass;
-    card.querySelector(".risk-description").textContent = level.desc;
-        const wildfireCard = document.querySelector(".risk-card.wildfire");
-    const wildfireScore = data.risks.wildfire_risk;
-    document.getElementById("wildfire-risk").innerText = wildfireScore;
-    score = wildfireScore;
-    card = wildfireCard;
-    level = getRiskLevel(score, "wildfire");
-    labelEl = card.querySelector(".risk-label");
-    labelEl.textContent = level.label;
-    labelEl.className = "risk-label " + level.cssClass;
-    card.querySelector(".risk-description").textContent = level.desc;
-
-    const cycloneCard = document.querySelector(".risk-card.cyclone");
-    const cycloneScore = data.risks.cyclone_risk;
-    document.getElementById("cyclone-risk").innerText = cycloneScore;
-    score = cycloneScore;
-    card = cycloneCard;
-    level = getRiskLevel(score, "cyclone");
-    labelEl = card.querySelector(".risk-label");
-    labelEl.textContent = level.label;
-    labelEl.className = "risk-label " + level.cssClass;
-    card.querySelector(".risk-description").textContent = level.desc;
-
-    const droughtCard = document.querySelector(".risk-card.drought");
-    const droughtScore = data.risks.drought_risk;
-    document.getElementById("drought-risk").innerText = droughtScore;
-    score = droughtScore;
-    card = droughtCard;
-    level = getRiskLevel(score, "drought");
-    labelEl = card.querySelector(".risk-label");
-    labelEl.textContent = level.label;
-    labelEl.className = "risk-label " + level.cssClass;
-    card.querySelector(".risk-description").textContent = level.desc;
-const recommendationsPanel = document.getElementById(
-      "recommendations-panel",
-    );
-
-    const recommendationsList = document.getElementById("recommendations-list");
-
-    const recommendations = generateRecommendations(
-      {
-        flood: floodScore,
-        heat: heatScore,
-        wildfire: wildfireScore,
-        cyclone: cycloneScore,
-        drought: droughtScore
-      }
-    );
-
-    recommendationsList.innerHTML = recommendations
-      .map((item) => `<li>✅ ${item}</li>`)
-      .join("");
-
-    recommendationsPanel.classList.remove("hidden");
-
-    // Store last analysis result so ClimateBot can use it
-    window.lastAnalysisContext = {
-      location: {
-        city: city,
-        state: state,
-        country: country,
-      },
-      weather: {
-        temperature: data.weather.temperature,
-        humidity: data.weather.humidity,
-        rainfall: data.weather.rainfall,
-        wind_speed: data.weather.wind_speed,
-      },
-      risks: {
-        flood_risk: data.risks.flood_risk,
-        heat_risk: data.risks.heat_risk,
-        wildfire_risk: data.risks.wildfire_risk,
-        cyclone_risk: data.risks.cyclone_risk,
-        drought_risk: data.risks.drought_risk,
-      },
-    };
-
-    // Update chatbot context badge if it exists
-    const badge = document.getElementById("chatbot-context-badge");
-    if (badge) {
-      badge.textContent = "📍 " + city + ", " + state;
-      badge.style.display = "inline-block";
-    }
+    document.getElementById("flood-risk").innerText = data.risks.flood_risk;
+    document.getElementById("heat-risk").innerText = data.risks.heat_risk;
+    document.getElementById("wildfire-risk").innerText =
+      data.risks.wildfire_risk;
+    document.getElementById("cyclone-risk").innerText = data.risks.cyclone_risk;
+    document.getElementById("drought-risk").innerText = data.risks.drought_risk;
 
     // Demo indicator
     if (data.demo_mode) {
@@ -403,48 +206,19 @@ const recommendationsPanel = document.getElementById(
       );
       const isDanger = maxDayRisk >= 0.65;
       const alertTag = isDanger ? "⚠️ High Hazard" : "✅ Normal";
-      const riskMap = {
-  Flood: day.risks.flood_risk,
-  Heat: day.risks.heat_risk,
-  Wildfire: day.risks.wildfire_risk,
-  Cyclone: day.risks.cyclone_risk,
-  Drought: day.risks.drought_risk,
-};
-
-const sortedRisks = Object.entries(riskMap)
-  .sort((a, b) => b[1] - a[1]);
-
-const primaryRisk = sortedRisks[0];
-const secondaryRisk = sortedRisks[1];
-
-const primaryCause = primaryRisk[0];
-const primaryScore = primaryRisk[1];
-
 
       const card = document.createElement("div");
       card.className = "forecast-card";
-     card.innerHTML = `
-    <div class="forecast-date">${formattedDate}</div>
-    <div class="forecast-temp">${day.temperature} ┬░C</div>
-
-    <div class="forecast-details">
-        <span>💧 Humid: ${day.humidity}%</span>
-        <span>🌧 Rain: ${day.rainfall} mm</span>
-        <span>🌪 Wind: ${day.wind_speed} km/h</span>
-    </div>
-
-    <div class="forecast-risk-indicator ${isDanger ? "has-danger" : ""}">
-        ${alertTag}
-    </div>
-
-    <div class="forecast-primary-cause">
-        Primary Cause: ${primaryCause} Risk (${primaryScore.toFixed(2)})
-    </div>
-
-    <div class="forecast-secondary-cause">
-        Also: ${secondaryRisk[0]} Risk (${secondaryRisk[1].toFixed(2)})
-    </div>
-`;
+      card.innerHTML = `
+                <div class="forecast-date">${formattedDate}</div>
+                <div class="forecast-temp">${day.temperature} ┬░C</div>
+                <div class="forecast-details">
+                    <span>💧 Humid: ${day.humidity}%</span>
+                    <span>🌧 Rain: ${day.rainfall} mm</span>
+                    <span>🌪 Wind: ${day.wind_speed} km/h</span>
+                </div>
+                <div class="forecast-risk-indicator ${isDanger ? "has-danger" : ""}">${alertTag}</div>
+            `;
       forecastContainer.appendChild(card);
     });
 
@@ -585,32 +359,32 @@ const primaryScore = primaryRisk[1];
     // Generate Dispatch Logs
     dispatchLogsBox.innerHTML = "";
     const addLog = (msg, tone) => {
-      const timeStr = new Date().toLocaleTimeString();
+  const timeStr = new Date().toLocaleTimeString();
 
-      const badgeMap = {
-        success: {
-          label: "INFO",
-          className: "badge-info",
-          icon: "🛡️",
-        },
-        warning: {
-          label: "WARNING",
-          className: "badge-warning",
-          icon: "⚠️",
-        },
-        critical: {
-          label: "CRITICAL",
-          className: "badge-critical",
-          icon: "🚨",
-        },
-      };
+  const badgeMap = {
+    success: {
+      label: "INFO",
+      className: "badge-info",
+      icon: "🛡️",
+    },
+    warning: {
+      label: "WARNING",
+      className: "badge-warning",
+      icon: "⚠️",
+    },
+    critical: {
+      label: "CRITICAL",
+      className: "badge-critical",
+      icon: "🚨",
+    },
+  };
 
-      const config = badgeMap[tone];
+  const config = badgeMap[tone];
 
-      const entry = document.createElement("div");
-      entry.className = `log-entry ${tone}`;
+  const entry = document.createElement("div");
+  entry.className = `log-entry ${tone}`;
 
-      entry.innerHTML = `
+  entry.innerHTML = `
     <div class="log-header">
       <span class="log-badge ${config.className}">
         ${config.icon} ${config.label}
@@ -623,8 +397,8 @@ const primaryScore = primaryRisk[1];
     </div>
   `;
 
-      dispatchLogsBox.appendChild(entry);
-    };
+  dispatchLogsBox.appendChild(entry);
+};
 
     addLog(
       `Monitoring node activated at Lat ${lat.toFixed(4)}, Lon ${lon.toFixed(4)}`,
@@ -682,13 +456,13 @@ const primaryScore = primaryRisk[1];
     resultSummary.innerText =
       "Live weather and risk analysis generated successfully.";
     statusPill.innerText = "Analysis Complete";
-} catch (error) {
+  } catch (error) {
     console.error(error);
     loading.classList.add("hidden");
-    showMessage("Backend server is not running.", "is-error");
-  } finally {
     analyzeBtn.disabled = false;
     analyzeBtn.textContent = "Analyze Climate Risk";
+
+    showMessage("Backend server is not running.", "is-error");
   }
 }
 
@@ -743,7 +517,7 @@ window.useCurrentLocation = async function () {
       try {
         const reverseGeocodeUrl =
           window.location.hostname === "127.0.0.1" ||
-            window.location.hostname === "localhost"
+          window.location.hostname === "localhost"
             ? "http://127.0.0.1:5000/reverse-geocode"
             : window.location.origin + "/reverse-geocode";
 
@@ -777,126 +551,166 @@ window.useCurrentLocation = async function () {
     },
     function () {
       alert("Location permission denied.");
-    },
+    }
   );
 };
-function getRecentSearches() {
-  return JSON.parse(localStorage.getItem("recentSearches")) || [];
-}
-
-function saveRecentSearch(city, state, country) {
-  if (!city || !state || !country) return;
-
-  const newSearch = {
-    city,
-    state,
-    country,
-  };
-
-  let searches = getRecentSearches();
-
-  searches = searches.filter(
-    (search) =>
-      !(
-        search.city.toLowerCase() === city.toLowerCase() &&
-        search.state.toLowerCase() === state.toLowerCase() &&
-        search.country.toLowerCase() === country.toLowerCase()
-      ),
-  );
-
-  searches.unshift(newSearch);
-  searches = searches.slice(0, 5);
 
-  localStorage.setItem("recentSearches", JSON.stringify(searches));
-
-  displayRecentSearches();
-}
-
-function displayRecentSearches() {
-  const container = document.getElementById("recent-search-list");
-
-  if (!container) return;
+document.addEventListener("DOMContentLoaded", () => {
+    // Typewriter effect
+    const typingTextElement = document.getElementById("hero-typing-text");
+    if (typingTextElement) {
+        const textToType = "Check flood and heat risk for any location in seconds.";
+        let i = 0;
+        
+        typingTextElement.innerHTML = '<span id="typing-content"></span><span class="typewriter-cursor"></span>';
+        const contentSpan = document.getElementById("typing-content");
+
+        function typeWriter() {
+            if (i < textToType.length) {
+                contentSpan.innerHTML += textToType.charAt(i);
+                i++;
+                setTimeout(typeWriter, 40);
+            } else {
+                setTimeout(() => {
+                    const cursor = document.querySelector('.typewriter-cursor');
+                    if(cursor) cursor.style.display = 'none';
+                }, 3000);
+            }
+        }
+        
+        setTimeout(typeWriter, 400);
+    }
 
-  container.innerHTML = "";
+    // Image carousel effect for analysis.html
+    const carouselImages = document.querySelectorAll(".hero-image-carousel .carousel-img");
+    if (carouselImages.length > 0) {
+        let currentImageIndex = 0;
+        
+        setInterval(() => {
+            carouselImages[currentImageIndex].classList.remove("active");
+            currentImageIndex = (currentImageIndex + 1) % carouselImages.length;
+            carouselImages[currentImageIndex].classList.add("active");
+        }, 5000);
+    }
 
-  const searches = getRecentSearches();
+    // Default India Chart
+    if (typeof fetchAndRenderChart === 'function') {
+        fetchAndRenderChart(20.5937, 78.9629);
+    }
+});
 
-  searches.forEach((search) => {
-    const button = document.createElement("button");
+let temperatureChartInstance = null;
+
+async function fetchAndRenderChart(lat, lon) {
+    const chartUrl = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&current=temperature_2m,relative_humidity_2m,precipitation,wind_speed_10m&daily=temperature_2m_max,temperature_2m_min&timezone=auto`;
+    try {
+        const res = await fetch(chartUrl);
+        const data = await res.json();
+        
+        // Populate default current weather if the fields are empty
+        if (data.current) {
+            const tempEl = document.getElementById('temperature');
+            if (tempEl && (!tempEl.innerText || tempEl.innerText.trim() === "")) {
+                tempEl.innerText = `${data.current.temperature_2m} ┬░C`;
+                document.getElementById('humidity').innerText = `${data.current.relative_humidity_2m} %`;
+                document.getElementById('rainfall').innerText = `${data.current.precipitation} mm`;
+                document.getElementById('wind').innerText = `${data.current.wind_speed_10m} km/h`;
+                document.getElementById('location').innerText = 'Overall India (Default)';
+                
+                // Mock default risk for India (could calculate it based on above data)
+                document.getElementById('flood-risk').innerText = '0.12';
+                document.getElementById('heat-risk').innerText = '0.85';
+            }
+        }
 
-    button.type = "button";
-    button.className = "search-chip";
-    button.innerText = search.city;
+        const dates = data.daily.time.map(d => {
+            const date = new Date(d);
+            return date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
+        });
+        const maxTemps = data.daily.temperature_2m_max;
+        const minTemps = data.daily.temperature_2m_min;
 
-    button.addEventListener("click", () => {
-      document.getElementById("city").value = search.city;
-      document.getElementById("state").value = search.state;
-      document.getElementById("country").value = search.country;
+        const ctx = document.getElementById('temperatureChart');
+        if (!ctx) return;
 
-      getWeatherData();
-    });
+        if (temperatureChartInstance) {
+            temperatureChartInstance.destroy();
+        }
 
-    container.appendChild(button);
-  });
+        Chart.defaults.color = 'rgba(255, 255, 255, 0.7)';
+        Chart.defaults.font.family = "'Poppins', sans-serif";
+
+        temperatureChartInstance = new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels: dates,
+                datasets: [
+                    {
+                        label: 'Max Temp (┬░C)',
+                        data: maxTemps,
+                        borderColor: '#ef4444',
+                        backgroundColor: 'rgba(239, 68, 68, 0.1)',
+                        borderWidth: 3,
+                        tension: 0.4,
+                        fill: true
+                    },
+                    {
+                        label: 'Min Temp (┬░C)',
+                        data: minTemps,
+                        borderColor: '#3b82f6',
+                        backgroundColor: 'transparent',
+                        borderWidth: 2,
+                        tension: 0.4,
+                        borderDash: [5, 5]
+                    }
+                ]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'top',
+                    }
+                },
+                scales: {
+                    y: {
+                        grid: {
+                            color: 'rgba(255, 255, 255, 0.1)'
+                        }
+                    },
+                    x: {
+                        grid: {
+                            color: 'rgba(255, 255, 255, 0.1)'
+                        }
+                    }
+                }
+            }
+        });
+    } catch (err) {
+        console.error("Error fetching chart data:", err);
+    }
 }
 
-document.addEventListener("DOMContentLoaded", () => {
-  displayRecentSearches();
-
-  const toggleBtn = document.getElementById("toggle-history-btn");
-  const wrapper = document.getElementById("recent-search-wrapper");
-  const clearBtn = document.getElementById("clear-history-btn");
-  const themeToggle = document.getElementById("theme-toggle");
-
-  if (themeToggle) {
-    themeToggle.addEventListener("click", () => {
-      document.body.classList.toggle("light-theme");
+const themeToggle = document.getElementById("theme-toggle");
 
-      if (document.body.classList.contains("light-theme")) {
-        themeToggle.innerText = "ΓÿÇ";
-      } else {
-        themeToggle.innerText = "Γÿ╛";
-      }
-    });
-  }
-  if (toggleBtn && wrapper) {
-    toggleBtn.addEventListener("click", () => {
-      wrapper.classList.toggle("show-history");
+if (themeToggle) {
+    const savedTheme = localStorage.getItem("theme");
 
-      if (wrapper.classList.contains("show-history")) {
-        toggleBtn.innerText = "Recent Searches Γû▓";
-      } else {
-        toggleBtn.innerText = "Recent Searches Γû╝";
-      }
-    });
-  }
-
-  if (clearBtn) {
-    clearBtn.addEventListener("click", () => {
-      localStorage.removeItem("recentSearches");
-      displayRecentSearches();
-    });
-  }
-});
-const scrollTopBtn = document.getElementById("scrollTopBtn");
-
-if (scrollTopBtn) {
-  function toggleScrollButton() {
-    if (window.pageYOffset > 200) {
-      scrollTopBtn.style.display = "flex";
-    } else {
-      scrollTopBtn.style.display = "none";
+    if (savedTheme === "light") {
+        document.body.classList.add("light-mode");
+        themeToggle.textContent = "☀️";
     }
-  }
-
-  toggleScrollButton();
 
-  window.addEventListener("scroll", toggleScrollButton);
-
-  scrollTopBtn.addEventListener("click", () => {
-    window.scrollTo({
-      top: 0,
-      behavior: "smooth",
+    themeToggle.addEventListener("click", () => {
+        document.body.classList.toggle("light-mode");
+
+        if (document.body.classList.contains("light-mode")) {
+            localStorage.setItem("theme", "light");
+            themeToggle.textContent = "☀️";
+        } else {
+            localStorage.setItem("theme", "dark");
+            themeToggle.textContent = "Γÿ╛";
+        }
     });
-  });
 }
diff --git a/Frontend/images/weather_1.jpg b/Frontend/images/weather_1.jpg
new file mode 100644
index 0000000..3d4f4a5
Binary files /dev/null and b/Frontend/images/weather_1.jpg differ
diff --git a/Frontend/images/weather_2.jpg b/Frontend/images/weather_2.jpg
new file mode 100644
index 0000000..3e161dd
Binary files /dev/null and b/Frontend/images/weather_2.jpg differ
diff --git a/Frontend/images/weather_3.jpg b/Frontend/images/weather_3.jpg
new file mode 100644
index 0000000..d00e4ab
Binary files /dev/null and b/Frontend/images/weather_3.jpg differ
diff --git a/Frontend/index.html b/Frontend/index.html
index f5e7f8c..42527cf 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -13,8 +13,6 @@
 
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 
-    <link rel="icon" type="image/png" href="favicon.png" />
-
     <link
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
@@ -26,7 +24,6 @@
 
     <div class="page-shell">
       <nav class="navbar">
-        <div class="brand-marks">
         <a class="brand" href="#home">
           <span class="brand-mark">🌍</span>
           <span>
@@ -34,301 +31,155 @@
             <small>Climate intelligence, instantly</small>
           </span>
         </a>
-        </div>
-        <div class="nav-links">
-          <a href="#features">Features</a>
-          <a href="Analysis/analysis.html">Analyze</a>
-          <a href="#contact">Contact</a>
-          <a
-            href="https://github.com/thetechguardians/Climate-Shield"
-            target="_blank"
-            >GitHub</a
-          >
-        </div>
-          <div id="theme-button">
-        <button id="theme-toggle" class="theme-toggle">Γÿ╛</button> </div>
-        <div id="analysis-button">
-        <a class="nav-cta" href="Analysis/analysis.html">Start Analysis</a> </div>
-      </nav>
-        
-      <main id="home" class="container">
-        <section class="hero">
-          <div class="hero-copy">
-            <span class="eyebrow">Real-time weather risk monitoring</span>
-
-            <h1>Predict climate threats before they interrupt your day.</h1>
-
-            <p>
-              Climate Shield combines live weather signals with fast risk
-              scoring to highlight flood and heatwave exposure in seconds.
-            </p>
 
-            <div class="hero-actions">
-              <a class="primary-action" href="Analysis/analysis.html"
-                >Analyze a location</a
-              >
-              <a class="secondary-action" href="#features">View insights</a>
+            <div class="nav-links">
+                <a href="#features">Features</a>
+                <a href="Analysis/analysis.html">Analyze</a>
+                <a href="https://github.com/thetechguardians/Climate-Shield" target="_blank">Contact</a>
+                <a href="https://github.com/thetechguardians/Climate-Shield" target="_blank">GitHub</a>
             </div>
 
-            <div class="hero-stats">
-              <div>
-                <strong>24/7</strong>
-                <span>live monitoring</span>
-              </div>
-              <div>
-                <strong>2</strong>
-                <span>risk types tracked</span>
-              </div>
-              <div>
-                <strong>Instant</strong>
-                <span>alert delivery</span>
-              </div>
-            </div>
-          </div>
+            <button id="theme-toggle" class="theme-toggle">Γÿ╛</button>
+            <a class="nav-cta" href="Analysis/analysis.html">Start Analysis</a>
+        </nav>
 
-          <div class="hero-strip">
-            <div class="hero-strip-item">
-              <strong>Step 1</strong>
-              <span>Open the analysis page</span>
-            </div>
 
-            <div class="hero-strip-item">
-              <strong>Step 2</strong>
-              <span>Enter city, state, and country</span>
-            </div>
 
-            <div class="hero-strip-item">
-              <strong>Step 3</strong>
-              <span>Review weather, risk, and alerts</span>
-            </div>
+        <main id="home" class="container">
 
-            <a
-              class="primary-action full-width-action"
-              href="Analysis/analysis.html"
-              >Go to analysis page</a
-            >
-          </div>
-        </section>
+            <section class="hero">
+                <div class="hero-left-wrapper">
+                    <div class="hero-copy">
 
-        <section id="features" class="feature-section">
-          <div class="section-heading">
-            <span>Why it helps</span>
-            <h2>Built for quick decisions when weather conditions change.</h2>
-          </div>
+                        <span class="eyebrow">Real-time weather risk monitoring</span>
 
-          <div class="feature-grid">
-            <article class="feature-card">
-              <div class="feature-icon">🌦</div>
-              <h3>Live weather context</h3>
-              <p>
-                See current temperature, humidity, rainfall, and wind in one
-                clean snapshot.
-              </p>
-            </article>
-
-            <article class="feature-card">
-              <div class="feature-icon">ΓÜá</div>
-              <h3>Risk-first summary</h3>
-              <p>
-                Flood and heat risks are presented as clear signals, not just
-                raw numbers.
-              </p>
-            </article>
-
-            <article class="feature-card">
-              <div class="feature-icon">🚨</div>
-              <h3>Actionable alerts</h3>
-              <p>
-                Important warnings are surfaced immediately so users can react
-                faster.
-              </p>
-            </article>
-          </div>
-        </section>
-        <section class="capabilities-section">
-          <div class="section-heading">
-            <span>Platform Capabilities</span>
-            <h2>
-              Powerful climate intelligence for proactive decision-making.
-            </h2>
-          </div>
+                        <h1>Predict climate threats before they interrupt your day.</h1>
 
-          <div class="capability-grid">
-            <article class="capability-card">
-              <div class="feature-icon">📊</div>
-              <h3>Climate Risk Prediction</h3>
-              <p>
-                Predict potential climate threats using weather patterns and
-                risk scoring models.
-              </p>
-            </article>
-
-            <article class="capability-card">
-              <div class="feature-icon">🌊</div>
-              <h3>Flood & Heatwave Analysis</h3>
-              <p>
-                Evaluate flood and heatwave risks with easy-to-understand
-                climate indicators.
-              </p>
-            </article>
-
-            <article class="capability-card">
-              <div class="feature-icon">🤖</div>
-              <h3>AI-Powered Climate Assistant</h3>
-              <p>
-                Get instant answers and climate safety guidance through
-                ClimateBot.
-              </p>
-            </article>
-
-            <article class="capability-card">
-              <div class="feature-icon">📍</div>
-              <h3>Location-Based Insights</h3>
-              <p>
-                Analyze climate conditions for specific cities and regions
-                worldwide.
-              </p>
-            </article>
-
-            <article class="capability-card">
-              <div class="feature-icon">🌎</div>
-              <h3>Environmental Intelligence</h3>
-              <p>
-                Access real-time environmental information to support informed
-                decisions.
-              </p>
-            </article>
-          </div>
-        </section>
-      </main>
-
-      <footer id="contact" style="
-        display: block !important;
-        background: #1a2232 !important;
-        padding: 0 !important;
-        margin-top: 30px;
-        border-radius: 22px;
-        border: 1px solid rgba(255,255,255,0.07);
-      ">
-
-        <!-- main footer content -->
-        <div style="padding: 44px 48px 36px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px; align-items: start;">
-
-          <!-- col 1: brand -->
-          <div>
-            <div style="display:flex; align-items:center; gap:10px; margin-bottom:16px;">
-              <span style="font-size:28px; line-height:1;">🌍</span>
-              <div>
-                <div style="font-size:1.2rem; font-weight:800; color:#ffffff; letter-spacing:-0.01em; line-height:1;">Climate Shield</div>
-                <div style="font-size:0.72rem; color:#64748b; letter-spacing:0.04em; margin-top:2px; text-transform:uppercase;">Climate Intelligence</div>
-              </div>
-            </div>
-            <p style="font-size:0.8rem; color:#94a3b8; line-height:1.7; margin-bottom:20px; max-width:200px;">
-              Real-time weather risk monitoring for flood and heatwave awareness.
-            </p>
-            <!-- phone-style contact -->
-            <div style="font-size:0.95rem; font-weight:700; color:#38bdf8; margin-bottom:14px; letter-spacing:0.01em;">
-              Protecting communities with fast, simple climate risk visibility.
-            </div>
-            <!-- social icons row -->
-            <div style="display:flex; gap:7px;">
-              <a href="https://github.com/thetechguardians/Climate-Shield" target="_blank" rel="noopener"
-                 style="width:30px;height:30px;border-radius:4px;background:#38bdf8;display:flex;align-items:center;justify-content:center;text-decoration:none;"
-                 onmouseover="this.style.background='#0ea5e9'" onmouseout="this.style.background='#38bdf8'">
-                <svg width="14" height="14" fill="white" viewBox="0 0 24 24"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-5.9 0-1.3.5-2.4 1.2-3.2 0-.4-.5-1.6.2-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0C17 4.7 18 5 18 5c.7 1.6.2 2.8.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.6-5.5 5.9.5.4.9 1.2.9 2.3v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3"/></svg>
-              </a>
-              <a href="https://github.com/thetechguardians/Climate-Shield/issues" target="_blank" rel="noopener"
-                 style="width:30px;height:30px;border-radius:4px;background:#0f766e;display:flex;align-items:center;justify-content:center;text-decoration:none;"
-                 onmouseover="this.style.background='#0d9488'" onmouseout="this.style.background='#0f766e'">
-                <svg width="14" height="14" fill="none" stroke="white" stroke-width="2.2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
-              </a>
-              <a href="https://github.com/thetechguardians/Climate-Shield/discussions" target="_blank" rel="noopener"
-                 style="width:30px;height:30px;border-radius:4px;background:#334155;display:flex;align-items:center;justify-content:center;text-decoration:none;"
-                 onmouseover="this.style.background='#475569'" onmouseout="this.style.background='#334155'">
-                <svg width="14" height="14" fill="none" stroke="white" stroke-width="2.2" viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
-              </a>
-            </div>
-          </div>
+                        <p>
+                            Climate Shield combines live weather signals with fast risk scoring to
+                            highlight flood and heatwave exposure in seconds.
+                        </p>
 
-          <!-- col 2: navigate -->
-          <div>
-            <p style="font-size:0.78rem;font-weight:700;color:#ffffff;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid #38bdf8;display:inline-block;">Navigate</p>
-            <div style="display:flex;flex-direction:column;gap:9px;">
-              <a href="#home"                  style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;transition:color 0.2s;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Home</a>
-              <a href="#features"              style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Features</a>
-              <a href="Analysis/analysis.html" style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Analysis</a>
-              <a href="#chatbot-panel"         style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Climate Bot</a>
-            </div>
-          </div>
+                        <div class="hero-actions">
+                            <a class="primary-action" href="Analysis/analysis.html">Analyze a location</a>
+                            <a class="secondary-action" href="#features">View insights</a>
+                        </div>
 
-          <!-- col 3: resources -->
-          <div>
-            <p style="font-size:0.78rem;font-weight:700;color:#ffffff;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid #38bdf8;display:inline-block;">Resources</p>
-            <div style="display:flex;flex-direction:column;gap:9px;">
-
-              <a href="https://github.com/thetechguardians/Climate-Shield/issues" target="_blank" rel="noopener"
-                 style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Report an Issue</a>
-              <a href="https://github.com/thetechguardians/Climate-Shield/discussions" target="_blank" rel="noopener"
-                 style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Discussions</a>
-              <a href="https://github.com/thetechguardians/Climate-Shield/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener"
-                 style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Contributing</a>
-              <a href="https://github.com/thetechguardians/Climate-Shield/blob/main/README.md" target="_blank" rel="noopener"
-                 style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Documentation</a>
-            </div>
-          </div>
+                        <div class="hero-stats">
+                            <div>
+                                <strong>24/7</strong>
+                                <span>live monitoring</span>
+                            </div>
+                            <div>
+                                <strong>2</strong>
+                                <span>risk types tracked</span>
+                            </div>
+                            <div>
+                                <strong>Instant</strong>
+                                <span>alert delivery</span>
+                            </div>
+                        </div>
 
-          
+                    </div>
+                </div>
+                
+                <div class="home-hero-right">
+                    <div class="image-wrapper home-carousel">
+                        <img src="images/weather_1.jpg" alt="Climate Shield Dashboard" class="carousel-img active" />
+                        <img src="images/weather_2.jpg" alt="Flood Risk Analysis" class="carousel-img" />
+                        <img src="images/weather_3.jpg" alt="Heatwave Prediction" class="carousel-img" />
+                        <div class="overlay-gradient"></div>
+                    </div>
+                </div>
+
+            </section>
+
+            <div class="hero-strip" style="margin-bottom: 60px;">
+
+                <div class="hero-strip-item">
+                    <strong>Step 1</strong>
+                    <span>Open the analysis page</span>
+                </div>
+
+                <div class="hero-strip-item">
+                    <strong>Step 2</strong>
+                    <span>Enter city, state, and country</span>
+                </div>
+
+                <div class="hero-strip-item">
+                    <strong>Step 3</strong>
+                    <span>Review weather, risk, and alerts</span>
+                </div>
+
+                <a class="primary-action full-width-action" href="Analysis/analysis.html">Go to analysis page</a>
 
-          <!-- col 4: Community -->
-          <div>
-            <p style="font-size:0.78rem;font-weight:700;color:#ffffff;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid #38bdf8;display:inline-block;">Community</p>
-            <div style="display:flex;flex-direction:column;gap:9px;">
-             
-              <a href="https://github.com/thetechguardians/Climate-Shield/graphs/contributors" style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Contributors</a>
-                            <a href="https://github.com/thetechguardians/Climate-Shield" target="_blank" rel="noopener"
-                 style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>GitHub Repository</a>
-              <a href="https://github.com/thetechguardians/Climate-Shield/blob/main/LICENSE" target="_blank" rel="noopener"
-                 style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>MIT License</a>
             </div>
-          </div>
 
-        </div><!-- /main grid -->
+            <section id="features" class="feature-section">
 
-        <!-- copyright bar ΓÇö darker strip like IQMS -->
-        <div style="background:#111827; border-top:1px solid rgba(255,255,255,0.06); padding:14px 48px; display:flex; align-items:center; justify-content:center; border-radius:0 0 22px 22px;">
-          <p style="font-size:0.75rem; color:#475569; margin:0; text-align:center;">
-            &copy; 2025 <strong style="color:#64748b; font-weight:600;">Climate Shield</strong>
-            &nbsp;&middot;&nbsp; MIT License
-            &nbsp;&middot;&nbsp; SSoC 2026
-            &nbsp;&middot;&nbsp; Made with &#9829; by The Tech Guardians
-          </p>
-        </div>
+                <div class="section-heading">
+                    <span>Why it helps</span>
+                    <h2>Built for quick decisions when weather conditions change.</h2>
+                </div>
 
-        <!-- responsive styles -->
-        <style>
-          @media (max-width: 1024px) {
-            #contact > div:first-of-type {
-              grid-template-columns: 1fr 1fr 1fr !important;
-            }
-          }
-          @media (max-width: 700px) {
-            #contact > div:first-of-type {
-              grid-template-columns: 1fr 1fr !important;
-              padding: 32px 24px 28px !important;
-            }
-            #contact > div:last-of-type {
-              padding-left: 24px !important;
-              padding-right: 24px !important;
-            }
-          }
-          @media (max-width: 480px) {
-            #contact > div:first-of-type {
-              grid-template-columns: 1fr !important;
-            }
-          }
-        </style>
+                <div class="feature-grid">
+
+                    <article class="feature-card">
+                        <div class="feature-icon">🌦</div>
+                        <h3>Live weather context</h3>
+                        <p>See current temperature, humidity, rainfall, and wind in one clean snapshot.</p>
+                    </article>
+
+                    <article class="feature-card">
+                        <div class="feature-icon">ΓÜá</div>
+                        <h3>Risk-first summary</h3>
+                        <p>Flood and heat risks are presented as clear signals, not just raw numbers.</p>
+                    </article>
+
+                    <article class="feature-card">
+                        <div class="feature-icon">🚨</div>
+                        <h3>Actionable alerts</h3>
+                        <p>Important warnings are surfaced immediately so users can react faster.</p>
+                    </article>
+
+                </div>
+
+            </section>
 
-      </footer>
+        </main>
+
+        <footer id="contact" class="footer">
+
+            <div>
+                <strong>Climate Shield</strong>
+                <p>Protecting communities with fast, simple climate risk visibility.</p>
+            </div>
+
+            <div class="footer-links">
+                <a href="#home">Home</a>
+                <a href="#features">Features</a>
+                <a href="Analysis/analysis.html">Analysis</a>
+            </div>
+
+            <div class="contact-section">
+                <strong>Contact & Support</strong>
+                <div class="contact-links">
+                    <a href="https://github.com/thetechguardians/Climate-Shield" target="_blank">
+                        GitHub Repository
+                    </a>
+                    <a href="https://github.com/thetechguardians/Climate-Shield/issues" target="_blank">
+                        Report an Issue
+                    </a>
+                    <a href="https://github.com/thetechguardians/Climate-Shield/discussions" target="_blank">
+                        GitHub Discussions
+                    </a>
+                </div>
+            </div>
+
+            <p class="footer-note">
+                Designed for rapid weather risk screening and emergency awareness.
+            </p>
+        </footer>
 
       <button
         id="chatbot-toggle"
@@ -376,6 +227,7 @@
             type="text"
             placeholder="Type your question..."
             autocomplete="off"
+            required
           />
           <button type="submit">Send</button>
         </form>
@@ -386,5 +238,72 @@
 
     <script src="script.js"></script>
     <script src="chatbot.js"></script>
+    <script>
+        (function(){
+            const toggle = document.getElementById('chatbot-toggle');
+            const panel = document.getElementById('chatbot-panel');
+            const closeBtn = document.getElementById('chatbot-close');
+            const form = document.getElementById('chatbot-form');
+            const input = document.getElementById('chatbot-input');
+            const messagesDiv = document.getElementById('chatbot-messages');
+            const statusDiv = document.getElementById('chatbot-status');
+
+            function addMessage(text, isUser) {
+                const msgDiv = document.createElement('div');
+                msgDiv.className = isUser ? 'message user' : 'message bot';
+                msgDiv.innerText = text;
+                messagesDiv.appendChild(msgDiv);
+                messagesDiv.scrollTop = messagesDiv.scrollHeight;
+            }
+
+            function showStatus(msg) {
+                statusDiv.innerText = msg;
+                statusDiv.classList.remove('hidden');
+                setTimeout(() => statusDiv.classList.add('hidden'), 2200);
+            }
+
+            async function getBotReply(question) {
+                const q = question.toLowerCase();
+                if (q.includes('flood') || q.includes('flooding')) {
+                    return "🌊 Flood risk is calculated using rainfall intensity, soil moisture, and river levels. Climate Shield monitors real-time precipitation and terrain vulnerability to flag potential flash floods.";
+                } else if (q.includes('heatwave') || q.includes('extreme heat')) {
+                    return "🔥 Heatwave risks increase when temperatures exceed regional thresholds. We analyze thermal stress, humidity, and duration to provide early heat alerts.";
+                } else if (q.includes('cyclone') || q.includes('hurricane') || q.includes('typhoon')) {
+                    return "🌀 Cyclones are tracked using wind speed patterns, pressure drops, and storm surge modeling. Our system highlights areas at risk of severe winds and coastal flooding.";
+                } else if (q.includes('climate change')) {
+                    return "🌎 Climate change amplifies extreme weather events — heavier rainfall, prolonged heatwaves, and stronger storms. Climate Shield helps communities build adaptive resilience.";
+                } else {
+                    return "💡 I can answer questions about flood risk, heatwaves, cyclones, climate adaptation, and weather preparedness. Try: 'How to prepare for floods?' or 'Heatwave safety tips'.";
+                }
+            }
+
+            form.addEventListener('submit', async (e) => {
+                e.preventDefault();
+                const userMsg = input.value.trim();
+                if (!userMsg) return;
+                addMessage(userMsg, true);
+                input.value = '';
+                showStatus('Analyzing climate data...');
+                try {
+                    const reply = await getBotReply(userMsg);
+                    addMessage(reply, false);
+                    statusDiv.classList.add('hidden');
+                } catch (err) {
+                    addMessage("Sorry, I'm having trouble. Please try again.", false);
+                    statusDiv.classList.add('hidden');
+                }
+            });
+
+            toggle.addEventListener('click', () => {
+                panel.classList.toggle('hidden');
+                const expanded = !panel.classList.contains('hidden');
+                toggle.setAttribute('aria-expanded', expanded);
+            });
+            closeBtn.addEventListener('click', () => {
+                panel.classList.add('hidden');
+                toggle.setAttribute('aria-expanded', 'false');
+            });
+        })();
+    </script>
 </body>
 </html>
diff --git a/Frontend/script.js b/Frontend/script.js
index 85cb5c7..0073c52 100644
--- a/Frontend/script.js
+++ b/Frontend/script.js
@@ -1,8 +1,8 @@
 // ==========================================
 // FIX FOR ISSUE #86: Leaflet Theme Switcher
 // ==========================================
-const LIGHT_TILE_URL = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png';
-const DARK_TILE_URL = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png';
+const LIGHT_TILE_URL = 'https://{s}://{z}/{x}/{y}{r}.png';
+const DARK_TILE_URL = 'https://{s}://{z}/{x}/{y}{r}.png';
 const MAP_ATTRIBUTION = '&copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors &copy; <a href="https://carto.com">CARTO</a>';
 
 let globalActiveMapLayer = null;
@@ -11,7 +11,7 @@ let mapDarkModeState = false;
 // Intercept Leaflet to manage themes automatically
 if (window.L && window.L.tileLayer) {
     const originalTileLayer = window.L.tileLayer;
-    window.L.tileLayer = function (url, options) {
+    window.L.tileLayer = function(url, options) {
         const targetUrl = mapDarkModeState ? DARK_TILE_URL : LIGHT_TILE_URL;
         const layer = originalTileLayer(targetUrl, { ...options, attribution: MAP_ATTRIBUTION });
         globalActiveMapLayer = layer;
@@ -22,10 +22,10 @@ if (window.L && window.L.tileLayer) {
 
 function toggleMapTheme() {
     if (!globalActiveMapLayer || !window.L) return;
-
+    
     const mapContainers = document.querySelectorAll('.leaflet-container');
     mapContainers.forEach(container => {
-        const activeMapInstance = container._leaflet_map || null;
+        const activeMapInstance = container._leaflet_map || null; 
         if (activeMapInstance) {
             globalActiveMapLayer.remove();
             mapDarkModeState = !mapDarkModeState;
@@ -33,7 +33,7 @@ function toggleMapTheme() {
             globalActiveMapLayer = window.L.tileLayer(newUrl).addTo(activeMapInstance);
         }
     });
-
+    
     if (mapContainers.length === 0) {
         mapDarkModeState = !mapDarkModeState;
     }
@@ -46,7 +46,7 @@ let climateChartInstance = null;
 // Hook into Chart.js to intercept creation and destroy older leaking instances automatically
 if (window.Chart) {
     const OriginalChart = window.Chart;
-    window.Chart = function (ctx, config) {
+    window.Chart = function(ctx, config) {
         if (climateChartInstance !== null && typeof climateChartInstance.destroy === 'function') {
             try {
                 climateChartInstance.destroy();
@@ -65,29 +65,12 @@ if (window.Chart) {
 // Your Original Weather API Logic
 
 // ==========================================
-function resolveApiUrl(){
-    // Prefer explicit backend URL injected by the HTML page.
-    // Set window.__BACKEND_URL__ to your Flask/Gunicorn service base URL in production.
-    if (window.__BACKEND_URL__ && typeof window.__BACKEND_URL__ === 'string' && window.__BACKEND_URL__.trim() !== '') {
-        return window.__BACKEND_URL__.replace(/\/+$/, '') + '/weather';
-    }
-
-    // Local dev fallback.
-    if (window.location.hostname === "127.0.0.1" || window.location.hostname === "localhost") {
-        return "http://127.0.0.1:5000/weather";
-    }
-
+const API_URL =
+    window.location.hostname === "127.0.0.1" || window.location.hostname === "localhost"
+        ? "http://127.0.0.1:5000/weather"
+        : window.location.origin + "/weather";
 
-    // Production fallback: assume backend is reachable at same origin.
-    // This is correct only when frontend and backend are served by the same host.
-    return window.location.origin + "/weather";
-}
-
-
-const API_URL = resolveApiUrl();
-
-
-async function getWeatherData() {
+async function getWeatherData(){
     const city = document.getElementById("city").value;
     const state = document.getElementById("state").value;
     const country = document.getElementById("country").value;
@@ -95,7 +78,7 @@ async function getWeatherData() {
     const weatherCard = document.getElementById("weather-card");
     const alertBox = document.getElementById("alert-box");
 
-    if (city.trim() === "" || state.trim() === "" || country.trim() === "") {
+    if(city.trim() === "" || state.trim() === "" || country.trim() === ""){
         alert("Please fill all fields.");
         return;
     }
@@ -103,7 +86,7 @@ async function getWeatherData() {
     loading.classList.remove("hidden");
     weatherCard.classList.add("hidden");
 
-    try {
+    try{
         const response = await fetch(
             API_URL,
             {
@@ -126,7 +109,7 @@ async function getWeatherData() {
         const data = await response.json();
         loading.classList.add("hidden");
 
-        if (!data.success) {
+        if(!data.success){
             alert(data.message);
             return;
         }
@@ -154,18 +137,30 @@ async function getWeatherData() {
         alertBox.classList.remove("hidden");
         weatherCard.classList.remove("hidden");
 
-    } catch (error) {
+    }catch(error){
         console.error(error);
         loading.classList.add("hidden");
         alert("Backend server is not running.");
     }
 }
 
-// Hook map toggle up to the UI theme buttons
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener("DOMContentLoaded", () => {
+    // Image carousel effect for index.html
+    const carouselImages = document.querySelectorAll(".home-carousel .carousel-img");
+    if (carouselImages.length > 0) {
+        let currentImageIndex = 0;
+        
+        setInterval(() => {
+            carouselImages[currentImageIndex].classList.remove("active");
+            currentImageIndex = (currentImageIndex + 1) % carouselImages.length;
+            carouselImages[currentImageIndex].classList.add("active");
+        }, 5000);
+    }
+
+    // Hook map toggle up to the UI theme buttons
     const themeToggleButton = document.getElementById('map-theme-toggle') || document.getElementById('theme-toggle');
     if (themeToggleButton) {
-        themeToggleButton.addEventListener('click', toggleMapTheme);
+        themeToggleButton.addEventListener('click', toggleMapTheme); // Assuming toggleMapTheme is defined elsewhere or in another branch
     }
 });
 
@@ -173,34 +168,33 @@ document.addEventListener('DOMContentLoaded', () => {
 // Lifecycle Clean-up Hook for Route Changes
 // ==========================================
 window.addEventListener('beforeunload', () => {
-    if (climateChartInstance !== null && typeof climateChartInstance.destroy === 'function') {
+    if (typeof climateChartInstance !== 'undefined' && climateChartInstance !== null && typeof climateChartInstance.destroy === 'function') {
         climateChartInstance.destroy();
     }
 });
+
 function generateClimateInsight(localTrend, globalTrend, location) {
     const diff = localTrend - globalTrend;
     const percent = ((diff / globalTrend) * 100).toFixed(1);
 
     if (diff > 0) {
         return `🌍 ${location} is warming ${percent}% faster than global average.`;
-    }
+    } 
     else if (diff < 0) {
         return `❄️ ${location} is warming slower than global average.`;
-    }
+    } 
     else {
         return `🌿 ${location} matches global climate trends.`;
     }
 }
+
 function detectAnomalies(data, threshold = 2) {
     const mean = data.reduce((a, b) => a + b, 0) / data.length;
-
     const variance = data.reduce((a, b) => a + Math.pow(b - mean, 2), 0) / data.length;
-
     const stdDev = Math.sqrt(variance);
 
     return data.map(value => {
         const zScore = (value - mean) / stdDev;
-
         return {
             value,
             isAnomaly: Math.abs(zScore) > threshold,
@@ -208,93 +202,49 @@ function detectAnomalies(data, threshold = 2) {
         };
     });
 }
-window.onload = function () {
-    const insightElement = document.getElementById("climate-insight");
-    const anomalyElement = document.getElementById("anomaly-result");
-
-    if (!insightElement || !anomalyElement) {
-        return;
-    }
 
-    const climateInsightElement =
-        document.getElementById("climate-insight");
-
-    insightElement.innerText = insight;
-
-    if (climateInsightElement) {
-        const insight = generateClimateInsight(
-            1.8,
-            1.2,
-            "Andhra Pradesh"
-        );
-
-        climateInsightElement.innerText = insight;
+window.onload = function () {
+    // 🌍 Climate Insight Demo
+    const insightEl = document.getElementById("climate-insight");
+    if (insightEl) {
+        const insight = generateClimateInsight(1.8, 1.2, "Andhra Pradesh");
+        insightEl.innerText = insight;
     }
 
-    if (anomalyResultElement) {
+    // 🚨 Anomaly Detection Demo
+    const anomalyResultEl = document.getElementById("anomaly-result");
+    if (anomalyResultEl) {
         const tempData = [28, 29, 30, 45, 31, 29];
-
         const results = detectAnomalies(tempData);
-
-        const anomalies = results.filter(
-            r => r.isAnomaly
-        );
-
-    anomalyElement.innerHTML =
-        anomalies.length === 0
-            ? "✅ No unusual climate spikes detected"
-            : anomalies.map(a =>
-                `⚠️ Anomaly: ${a.value}°C (z=${a.zScore.toFixed(2)})`
-            ).join("<br>");
+        const anomalies = results.filter(r => r.isAnomaly);
+        anomalyResultEl.innerHTML =
+            anomalies.length === 0
+                ? "✅ No unusual climate spikes detected"
+                : anomalies.map(a =>
+                    `⚠️ Anomaly: ${a.value}°C (z=${a.zScore.toFixed(2)})`
+                ).join("<br>");
+    }
 };
+
 const themeToggle = document.getElementById("theme-toggle");
 
-// Load saved theme
-const savedTheme = localStorage.getItem("theme");
+if (themeToggle) {
+    const savedTheme = localStorage.getItem("theme");
 
-if (savedTheme === "light") {
-    document.body.classList.add("light-mode");
-    if (themeToggle) {
+    if (savedTheme === "light") {
+        document.body.classList.add("light-mode");
         themeToggle.textContent = "☀️";
     }
-}
-
-// Toggle theme
-if (savedTheme === "light") {
-    document.body.classList.add("light-mode");
-    if (themeToggle) {
-        themeToggle.textContent = "ΓÿÇ";
-    }
-}
 
-if (themeToggle) {
     themeToggle.addEventListener("click", () => {
         document.body.classList.toggle("light-mode");
 
         if (document.body.classList.contains("light-mode")) {
             localStorage.setItem("theme", "light");
-            themeToggle.textContent = "ΓÿÇ";
+            themeToggle.textContent = "☀️";
         } else {
             localStorage.setItem("theme", "dark");
             themeToggle.textContent = "Γÿ╛";
         }
     });
 }
-const scrollTopBtn = document.getElementById("scrollTopBtn");
-
-if (scrollTopBtn) {
-    window.addEventListener("scroll", () => {
-        if (window.scrollY > 300) {
-            scrollTopBtn.classList.add("show");
-        } else {
-            scrollTopBtn.classList.remove("show");
-        }
-    });
-
-    scrollTopBtn.addEventListener("click", () => {
-        window.scrollTo({
-            top: 0,
-            behavior: "smooth"
-        });
-    });
-}
\ No newline at end of file
diff --git a/Frontend/style.css b/Frontend/style.css
index b03beda..9f9d346 100644
--- a/Frontend/style.css
+++ b/Frontend/style.css
@@ -21,7 +21,6 @@
   --warning: #f59e0b;
   --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
 }
-
 body.light-mode {
   --bg-0: #f8fafc;
   --bg-1: #edf2f7;
@@ -36,7 +35,6 @@ body.light-mode {
 
   --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 }
-
 .theme-toggle {
   width: 42px;
   height: 42px;
@@ -49,12 +47,11 @@ body.light-mode {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex: 0 0 auto;
 }
-
 .theme-toggle:hover {
   transform: scale(1.05);
 }
-
 html {
   scroll-behavior: smooth;
 }
@@ -121,7 +118,6 @@ body::before {
   justify-content: space-between;
   gap: 20px;
   padding: 16px 22px;
-  flex-wrap: wrap;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 22px;
   background: var(--panel-strong);
@@ -129,13 +125,11 @@ body::before {
   box-shadow: var(--shadow);
   margin-bottom: 28px;
 }
-
 body.light-mode .navbar {
   background: rgba(255, 255, 255, 0.35);
   backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.4);
 }
-
 .brand {
   display: flex;
   align-items: center;
@@ -193,8 +187,7 @@ body.light-mode .navbar {
 }
 
 .nav-links a:hover,
-.footer-links a:hover,
-.contact-links a:hover {
+.footer-links a:hover {
   color: white;
   transform: translateY(-1px);
 }
@@ -237,12 +230,12 @@ body.light-mode .navbar {
 }
 
 .hero {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 24px;
-  align-items: start;
-  padding: 18px 0 34px;
-  max-width: 920px;
+    display: grid;
+    grid-template-columns: 1.2fr 0.8fr;
+    gap: 60px;
+    align-items: center;
+    padding: 18px 0 34px;
+    max-width: 1140px;
 }
 
 .hero-copy {
@@ -264,10 +257,49 @@ body.light-mode .navbar {
 }
 
 .hero-copy h1 {
-  font-size: clamp(2.6rem, 5vw, 5rem);
-  line-height: 0.98;
-  letter-spacing: -0.02em;
-  max-width: 10.5ch;
+    font-size: clamp(2.2rem, 4vw, 4.2rem);
+    line-height: 1.1;
+    letter-spacing: -0.03em;
+    min-height: 3.3em;
+}
+
+.home-hero-right {
+    position: relative;
+    width: 100%;
+}
+
+.image-wrapper {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.image-wrapper img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    transition: opacity 1s ease-in-out;
+}
+
+.image-wrapper img.active {
+    opacity: 1;
+}
+
+.overlay-gradient {
+    position: absolute;
+    inset: 0;
+    background: 
+        linear-gradient(to top, rgba(2, 6, 23, 0.95) 0%, rgba(2, 6, 23, 0.1) 60%);
+    pointer-events: none;
+    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4);
 }
 
 .hero-copy p {
@@ -347,46 +379,256 @@ body.light-mode .navbar {
   align-items: center;
 }
 
-.feature-section {
-  padding: 34px 0 18px;
+.glass-card {
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 28px;
+  backdrop-filter: blur(20px);
+  padding: 34px;
+  box-shadow: var(--shadow);
 }
 
-.capabilities-section {
-  padding: 40px 0;
+.header {
+  text-align: center;
+  margin-bottom: 28px;
 }
 
-.capability-grid {
+.logo {
+  width: 72px;
+  height: 72px;
+  display: grid;
+  place-items: center;
+  margin: 0 auto 14px;
+  border-radius: 22px;
+  background: linear-gradient(
+    135deg,
+    rgba(56, 189, 248, 0.2),
+    rgba(14, 165, 233, 0.06)
+  );
+  border: 1px solid rgba(56, 189, 248, 0.22);
+  font-size: 2rem;
+}
+
+.header h2 {
+  font-size: clamp(1.8rem, 3vw, 2.5rem);
+  margin-bottom: 10px;
+}
+
+.header p {
+  color: var(--muted);
+  line-height: 1.7;
+}
+
+.input-container {
   display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 24px;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 16px;
+  margin-bottom: 22px;
 }
 
-.capability-card:nth-child(1) {
-  grid-column: 1 / 3;
+.input-group label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+  color: var(--muted);
 }
 
-.capability-card:nth-child(2) {
-  grid-column: 3 / 5;
+.input-group input {
+  width: 100%;
+  padding: 15px 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.09);
+  color: white;
+  font-size: 15px;
+  outline: none;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
 }
 
-.capability-card:nth-child(3) {
-  grid-column: 5 / 7;
+.input-group input::placeholder {
+  color: #94a3b8;
 }
 
-.capability-card:nth-child(4) {
-  grid-column: 2 / 4;
+.input-group input:focus {
+  border-color: rgba(56, 189, 248, 0.65);
+  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.14);
+  transform: translateY(-1px);
 }
 
-.capability-card:nth-child(5) {
-  grid-column: 4 / 6;
+button {
+  width: 100%;
+  padding: 16px 18px;
+  border: none;
+  border-radius: 16px;
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  color: white;
+  font-size: 1rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    filter 0.2s ease;
 }
 
-.capability-card {
-  min-height: 220px;
-  padding: 24px;
+button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 14px 28px rgba(14, 165, 233, 0.28);
+  filter: brightness(1.03);
+}
+
+.loading {
+  margin-top: 18px;
+  text-align: center;
+  color: #facc15;
+  font-weight: 600;
+}
+
+.weather-card {
+  margin-top: 30px;
+}
+
+.section-title {
+  margin-bottom: 18px;
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: #7dd3fc;
+}
+
+.weather-grid,
+.risk-grid,
+.feature-grid {
+  display: grid;
+  gap: 16px;
+}
+
+.weather-grid {
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  margin-bottom: 22px;
+}
+
+.weather-box,
+.risk-card,
+.feature-card {
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 18px;
+  padding: 22px;
+  transition:
+    transform 0.2s ease,
+    background 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.weather-box:hover,
+.risk-card:hover,
+.feature-card:hover {
+  transform: translateY(-3px);
+  background: rgba(255, 255, 255, 0.12);
+  border-color: rgba(255, 255, 255, 0.14);
+}
+
+.weather-box {
+  text-align: center;
+}
+
+.weather-box h3,
+.risk-card h3,
+.feature-card h3 {
+  margin-bottom: 10px;
+  color: #e2e8f0;
+  font-size: 1rem;
+}
+
+.weather-box p {
+  font-size: 1.55rem;
+  font-weight: 700;
+}
+
+.location-box {
+  background: rgba(56, 189, 248, 0.12);
+  padding: 20px 22px;
   border-radius: 18px;
+  margin-bottom: 22px;
+  border: 1px solid rgba(56, 189, 248, 0.15);
+}
+
+.location-box h3 {
+  margin-bottom: 10px;
+}
+
+.location-box p {
+  color: #e2e8f0;
+  line-height: 1.6;
+}
+
+.risk-grid {
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  margin-bottom: 22px;
+}
+
+.risk-card {
+  text-align: center;
+}
+
+.risk-card p {
+  font-size: 1.8rem;
+  font-weight: 800;
+}
+
+.flood {
+  background: rgba(239, 68, 68, 0.13);
+  border-color: rgba(239, 68, 68, 0.32);
+}
+
+.heat {
+  background: rgba(245, 158, 11, 0.13);
+  border-color: rgba(245, 158, 11, 0.32);
+}
+
+.alert-box {
+  padding: 20px;
+  border-radius: 18px;
+  line-height: 1.7;
+  font-weight: 600;
+  font-size: 0.98rem;
+  animation: fadeIn 0.35s ease;
+}
+
+.alert-danger {
+  background: rgba(239, 68, 68, 0.16);
+  border: 1px solid rgba(239, 68, 68, 0.42);
+  color: #fecaca;
+}
+
+.alert-warning {
+  background: rgba(34, 197, 94, 0.14);
+  border: 1px solid rgba(34, 197, 94, 0.35);
+  color: #bbf7d0;
+}
+
+.feature-section {
+  padding: 34px 0 18px;
+}
+
+.capabilities-section {
+  padding: 40px 0;
+}
+
+.capability-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 18px;
+}
+
+.capability-card {
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 18px;
+  padding: 24px;
   transition: all 0.3s ease;
 }
 
@@ -427,27 +669,11 @@ body.light-mode .navbar {
 }
 
 .feature-grid {
-  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 16px;
 }
 
 .feature-card {
   min-height: 190px;
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 18px;
-  padding: 22px;
-  transition:
-    transform 0.2s ease,
-    background 0.2s ease,
-    border-color 0.2s ease;
-}
-
-.feature-card:hover {
-  transform: translateY(-3px);
-  background: rgba(255, 255, 255, 0.12);
-  border-color: rgba(255, 255, 255, 0.14);
 }
 
 .feature-icon {
@@ -462,12 +688,6 @@ body.light-mode .navbar {
   margin-bottom: 14px;
 }
 
-.feature-card h3 {
-  margin-bottom: 10px;
-  color: #e2e8f0;
-  font-size: 1rem;
-}
-
 .feature-card p {
   color: var(--muted);
   line-height: 1.7;
@@ -475,15 +695,16 @@ body.light-mode .navbar {
 
 .footer {
   margin-top: 30px;
+  padding: 22px 24px;
   border-radius: 22px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   background: var(--panel-strong);
   color: var(--text);
   backdrop-filter: blur(18px);
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: minmax(0, 1.2fr) auto;
   gap: 16px 24px;
-  align-items: start;
+  align-items: center;
   box-shadow: var(--shadow);
 }
 
@@ -504,35 +725,55 @@ body.light-mode .navbar {
   gap: 16px;
   flex-wrap: wrap;
   justify-content: flex-end;
-  grid-column: 2;
-  grid-row: 1;
 }
 
-.contact-section {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  grid-column: 1;
-  grid-row: 2;
+.footer-note {
+  grid-column: 1 / -1;
+  font-size: 0.92rem;
 }
 
-.contact-links {
+.footer-col strong {
+  display: block;
+  font-size: 1rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  color: var(--text);
+}
+
+.footer-col p {
+  font-size: 0.8rem;
+  color: var(--muted);
+  line-height: 1.6;
+  max-width: 350px;
+}
+
+.footer-nav-links {
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  gap: 1.8rem;
+  align-items: center;
+  flex-wrap: wrap;
 }
 
-.contact-links a {
-  color: #dbeafe;
+.footer-nav-links a {
   text-decoration: none;
-  transition:
-    color 0.2s ease,
-    transform 0.2s ease;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--muted);
+  transition: color 0.2s;
 }
 
-.footer-note {
-  grid-column: 1 / -1;
-  font-size: 0.92rem;
+.footer-nav-links a:hover {
+  color: var(--text);
+}
+
+.footer-legal {
+  width: 100%;
+  text-align: center;
+  font-size: 0.7rem;
+  color: var(--muted);
+  padding-top: 1rem;
+  border-top: 1px solid rgba(71, 85, 105, 0.3);
+  margin-top: 0.5rem;
 }
 
 .chatbot-toggle {
@@ -555,24 +796,16 @@ body.light-mode .navbar {
   background: linear-gradient(135deg, #06b6d4, #0284c7);
   box-shadow: 0 16px 28px rgba(2, 132, 199, 0.34);
   cursor: pointer;
-  transition:
-    transform 0.2s ease,
-    box-shadow 0.2s ease;
-}
-
-.chatbot-toggle:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 18px 32px rgba(2, 132, 199, 0.42);
 }
 
 .chatbot-panel {
   position: fixed;
   right: 24px;
   bottom: 84px;
-  width: min(380px, calc(100vw - 24px));
+  width: min(360px, calc(100vw - 24px));
   border-radius: 20px;
   border: 1px solid rgba(255, 255, 255, 0.14);
-  background: rgba(2, 6, 23, 0.92);
+  background: rgba(2, 6, 23, 0.9);
   backdrop-filter: blur(16px);
   box-shadow: 0 24px 46px rgba(0, 0, 0, 0.48);
   z-index: 39;
@@ -603,7 +836,6 @@ body.light-mode .navbar {
   background: rgba(255, 255, 255, 0.08);
   color: white;
   font-size: 0.9rem;
-  cursor: pointer;
 }
 
 .chatbot-messages {
@@ -620,7 +852,6 @@ body.light-mode .navbar {
   padding: 10px 12px;
   line-height: 1.55;
   font-size: 0.92rem;
-  max-width: 88%;
 }
 
 .bot-message {
@@ -637,22 +868,6 @@ body.light-mode .navbar {
   justify-self: end;
 }
 
-#chatbot-suggestions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-bottom: 10px;
-  padding: 4px 2px;
-}
-
-#chatbot-suggestions button {
-  width: auto;
-  border-radius: 999px;
-  padding: 6px 10px;
-  font-size: 0.74rem;
-  font-weight: 600;
-}
-
 .chatbot-form {
   display: grid;
   grid-template-columns: 1fr auto;
@@ -682,14 +897,6 @@ body.light-mode .navbar {
   font-size: 0.84rem;
 }
 
-.feature-box {
-  margin: 20px;
-  padding: 15px;
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.08);
-  color: white;
-}
-
 .hidden {
   display: none;
 }
@@ -712,28 +919,12 @@ body.light-mode .navbar {
     grid-template-columns: 1fr;
     justify-items: start;
   }
-  .navbar {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
-  }
-  .hero-actions {
-    display: flex;
-    justify-content: space-around;
-  }
+
   .nav-links,
   .footer-links {
     justify-content: flex-start;
   }
 
-  .footer-links,
-  .contact-section {
-    grid-column: 1;
-    grid-row: auto;
-  }
-
   .hero {
     grid-template-columns: 1fr;
   }
@@ -742,57 +933,32 @@ body.light-mode .navbar {
     grid-template-columns: 1fr;
   }
 
-  .hero-copy h1 {
-    max-width: 12ch;
-  }
-}
+    .home-hero-right {
+        margin-top: 20px;
+    }
 
-@media (max-width: 900px) {
-  .capability-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
+    .image-wrapper {
+        aspect-ratio: 16 / 9;
+    }
 
-  .capability-grid .capability-card:nth-child(4),
-  .capability-grid .capability-card:nth-child(5) {
-    grid-column: auto;
-    justify-self: stretch;
-    max-width: none;
-  }
+    .hero-copy h1 {
+        max-width: 12ch;
+    }
 }
 
 @media (max-width: 768px) {
-  .capability-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .capability-card:nth-child(1),
-  .capability-card:nth-child(2),
-  .capability-card:nth-child(3),
-  .capability-card:nth-child(4),
-  .capability-card:nth-child(5) {
-    grid-column: auto;
-  }
   .page-shell {
     width: min(100% - 20px, 1240px);
     padding-top: 14px;
   }
 
   .navbar,
+  .glass-card,
   .footer {
     padding: 18px;
     border-radius: 20px;
   }
-  .navbar {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
-  }
-  .hero-actions {
-    display: flex;
-    justify-content: space-around;
-  }
+
   .nav-links {
     gap: 12px;
   }
@@ -806,15 +972,19 @@ body.light-mode .navbar {
   }
 
   .hero-stats {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
+    grid-template-columns: 1fr;
   }
 
   .hero-strip {
     padding: 14px;
   }
 
+  .input-container {
+    grid-template-columns: 1fr;
+  }
+
+  .weather-grid,
+  .risk-grid,
   .feature-grid {
     grid-template-columns: 1fr;
   }
@@ -841,3 +1011,54 @@ body.light-mode .navbar {
     grid-template-columns: 1fr;
   }
 }
+.contact-section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.contact-links {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.contact-links a {
+  color: #dbeafe;
+  text-decoration: none;
+  transition: opacity 0.3s ease;
+}
+
+.contact-links a:hover {
+  opacity: 0.8;
+}
+
+@media (max-width: 480px) {
+  .button-group {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .btn-primary,
+  .btn-secondary {
+    text-align: center;
+    justify-content: center;
+  }
+
+  .hero-heading {
+    font-size: clamp(1.8rem, 8vw, 2.5rem);
+  }
+}
+.feature-box {
+  margin: 20px;
+  padding: 15px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.08);
+  color: white;
+}
+.message-time {
+  display: block;
+  margin-top: 4px;
+  font-size: 0.75rem;
+  opacity: 0.7;
+}
diff --git a/backend/alertsystem.py b/backend/alertsystem.py
index cc63426..3972c25 100644
--- a/backend/alertsystem.py
+++ b/backend/alertsystem.py
@@ -111,16 +111,15 @@ def get_coordinates(city, state, country):
         print("Geocoding Data (attempt 1):", data)
 
         # -------------------------------------------------
-        # ATTEMPT 2: if attempt 1 failed, try city + country
+        # ATTEMPT 2: if attempt 1 failed, try free-text with state
         # -------------------------------------------------
 
         if not data:
 
-            print("Attempt 1 failed. Retrying with city + country only...")
+            print("Attempt 1 failed. Retrying with free-text city + state + country...")
 
             params = {
-                "city":    city,
-                "country": country,
+                "q":       f"{city}, {state}, {country}",
                 "format":  "json",
                 "limit":   1
             }
diff --git a/requirements.txt b/requirements.txt
index 749394d..376911d 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -2,4 +2,5 @@ flask
 flask-cors
 requests
 gunicorn
-python-dotenv
\ No newline at end of file
+python-dotenv
+google-generativeai
\ No newline at end of file