diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 17d1368f..efcc519b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,3 +1,19 @@
+
+import React, { useState, useEffect, useCallback } from "react";
+import axios from "axios";
+import "./index.css";
+import { AtsScore } from "./AtsScore";
+import { useAnalysisHistory, type AnalysisEntry } from "./hooks/useAnalysisHistory";
+import { HistorySidebar } from "./HistorySidebar";
+import { useAuth } from "./hooks/useAuth";
+import { AuthModal } from "./AuthModal";
+import { Footer } from "./Footer";
+import AnalysisSkeleton from "./components/AnalysisSkeleton/AnalysisSkeleton";
+import { InfoTooltip } from "./components/InfoTooltip";
+import { Button } from "./components/Button";
+import { Navbar } from "./components/Navbar";
+import EmptyState from "./components/EmptyState";
+import { OnboardingTour } from "./components/OnboardingTour";
 import React, { useState, useEffect, useCallback } from 'react'
 import { Routes, Route, useNavigate } from 'react-router-dom'
 import NotFound from './components/NotFound'
@@ -83,6 +99,8 @@ interface UndoState {
 const DEFAULT_TITLE = 'AI Resume Analyzer'
 const READY_TITLE = '✅ Analysis Ready — AI Resume Analyzer'
 
+
+type Theme = "light" | "dark";
 function getInitialTheme(): Theme {
   try {
     const saved = localStorage.getItem('theme')
@@ -997,6 +1015,11 @@ function App() {
   }
 
   const handleLogout = () => {
+
+    logout();
+    logout();           
+    clearHistory();
+  };
     logout()
     clearHistory()
   }
@@ -1021,7 +1044,33 @@ function App() {
         onCompare={() => setCompareOpen(true)}
       />
 
-      {compareOpen && (
+
+      <div className="container mt-5">
+        <div className="main-card text-center">
+          {/* Top Control Bar: Side-by-Side Theme & Auth Buttons */}
+          <div style={{ display: "flex", justifyContent: "center", alignItems: "center", gap: "12px", marginBottom: "24px" }}>
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={toggleTheme}
+              aria-label="Toggle theme"
+              aria-pressed={theme === "dark"}
+            >
+              {theme === "light" ? "🌙 Dark Mode" : "☀️ Light Mode"}
+            </Button>
+
+            <div className="auth-bar" style={{ margin: 0 }}>
+              {user ? (
+                <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
+                  <span className="auth-username" style={{ color: "#fff", fontSize: "var(--font-size-sm)" }}>👤 {user.username}</span>
+                  <Button variant="ghost" onClick={handleLogout}>Logout</Button>
+                </div>
+              ) : (
+                <Button variant="ghost" onClick={() => setShowAuthModal(true)}>🔐 Login / Sign Up</Button>
+              )}
+            </div>
+          </div>      
+          {compareOpen && (
         <CompareVersions
           entries={entries}
           token={user?.token}
@@ -1029,13 +1078,6 @@ function App() {
         />
       )}
 
-      {compareUploadsOpen && (
-        <CompareUploads
-          targetRole={targetRole}
-          jobDesc={jobDesc}
-          onClose={() => setCompareUploadsOpen(false)}
-        />
-      )}
 
       <Navbar
         theme={theme}
@@ -1063,13 +1105,178 @@ function App() {
                 />
               )}
 
-              {showProfileModal && user && (
-                <ProfileModal
-                  user={user}
-                  onClose={() => setShowProfileModal(false)}
-                  onAvatarUpdated={updateUserAvatar}
-                />
-              )}
+
+      <div className="container mt-5 px-3"> {/* Added padding safety track */}
+        <div className="main-card text-center mx-auto" style={{ width: "100%", maxWidth: "600px" }}>
+
+          {showAuthModal && (
+            <AuthModal
+              onSignup={signup}
+              onLogin={login}
+              onClose={() => setShowAuthModal(false)}
+            />
+          )}
+          <h1 className="mb-4">🚀 AI Resume Analyzer</h1>
+
+          {/* STEP 1: Role Selector Container */}
+          <div className="mb-5 p-3" style={{ background: "rgba(255, 255, 255, 0.02)", borderRadius: "var(--radius-md)", border: "1px solid rgba(255,255,255,0.05)" }}>
+            <label htmlFor="roleSelect" style={{ display: "block", marginBottom: "8px", fontWeight: "600", color: "#e2e8f0", fontSize: "var(--font-size-sm)" }}>
+              1️⃣ Choose your Target Career Track
+
+          <h1 className="mb-4">🚀 AI Resume Analyzer</h1>
+
+
+          {/* Role Selector Dropdown Container */}
+          <div className="mb-4">
+            <label htmlFor="roleSelect" style={{ marginRight: "10px", fontWeight: "600", color: "#fff" }}>
+
+          {/* Role Selector Container */}
+          <div className="mb-5 p-4" style={{ background: "rgba(255, 255, 255, 0.02)", borderRadius: "var(--radius-lg)", border: "1px solid rgba(255,255,255,0.04)" }}>
+            <label 
+              htmlFor="roleSelect" 
+              style={{ display: "block", marginBottom: "12px", fontWeight: "600", color: "#e2e8f0", fontSize: "var(--font-size-sm)" }}
+<h1 className="mb-4 app-main-title" style={{ fontSize: "calc(1.5rem + 1.5vw)", wordBreak: "break-word" }}>🚀 AI Resume Analyzer</h1>
+          {/* Role Selector Dropdown */}
+          <div className="mb-4 d-flex flex-column align-items-center flex-sm-row justify-content-center role-selector-container" style={{ gap: "8px" }}>
+            <label htmlFor="roleSelect" className="role-select-label" style={{ fontWeight: "600" }}>
+              Target Career Track:
+            </label>
+            <select
+              id="roleSelect"
+              className="role-select-dropdown"
+              value={targetRole}
+              onChange={(e) => setTargetRole(e.target.value)}
+
+              style={{ padding: "6px 12px", borderRadius: "var(--radius-sm)", border: "1px solid #ccc" }}
+
+              style={{ padding: "10px 16px", borderRadius: "var(--radius-sm)", border: "1px solid rgba(255,255,255,0.15)", width: "100%", maxWidth: "320px", background: "#1e1e2f", color: "#fff", fontSize: "var(--font-size-sm)" }}
+
+              style={{ padding: "6px 12px", borderRadius: "6px", width: "100%", maxWidth: "250px" }}
+            >
+              🎯 Target Career Track
+            </label>
+            <div className="custom-select-container">
+              <select
+                id="roleSelect"
+                value={targetRole}
+                onChange={(e) => setTargetRole(e.target.value)}
+                className="custom-select-element"
+              >
+                <option value="Frontend Developer">Frontend Developer</option>
+                <option value="Backend Developer">Backend Developer</option>
+                <option value="Data Analyst">Data Analyst</option>
+              </select>
+            </div>
+          </div>
+
+          {/* STEP 2: Enhanced Upload Container */}
+          <div className="mb-5">
+            <span style={{ display: "block", marginBottom: "12px", fontWeight: "600", color: "#e2e8f0", fontSize: "var(--font-size-sm)" }}>
+              2️⃣ Upload your Document
+            </span>
+            <div className="upload-box mb-3" style={{ padding: "32px 20px", border: "2px dashed var(--upload-border)", borderRadius: "var(--radius-lg)", background: "var(--upload-bg)", transition: "all 0.3s ease" }}>
+              <input
+                type="file"
+                id="fileUpload"
+                hidden
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  if (e.target.files) setFile(e.target.files[0]);
+                }}
+              />
+              <label htmlFor="fileUpload" className="upload-label" style={{ cursor: "pointer", display: "block", fontSize: "var(--font-size-base)" }}>
+                📄 {file ? <strong style={{ color: "#a5b4fc" }}>{file.name}</strong> : "Drag & Drop Resume or Click to Browse"}
+              </label>
+            </div>
+          </div>
+
+
+          <div className="upload-box mb-4">
+          {/* STEP 3: Prominent Call to Action Buttons */}
+          <div style={{ display: "flex", flexDirection: "column", gap: "12px", alignItems: "center", marginTop: "24px" }} className="mb-4">
+          <div className="upload-box mb-3" style={{ width: "100%", maxWidth: "100%" }}>
+            <input
+              type="file"
+              id="fileUpload"
+              hidden
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                if (e.target.files) setFile(e.target.files[0]);
+              }}
+            />
+            <label htmlFor="fileUpload" className="upload-label" style={{ display: "block", wordBreak: "break-all", padding: "15px" }}>
+              📄 {file ? file.name : "Drag & Drop Resume or Click to Upload"}
+            </label>
+          </div>
+
+          {/* Action Blocks: Primary Action stacked above Secondary Link */}
+          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }} className="mb-4">
+            <Button
+              variant="primary"
+
+          {/* FIXED: Added responsive flex-wrap and set width boundaries for smaller screens */}
+          <div style={{ display: "flex", flexWrap: "wrap", gap: "12px", justifyContent: "center", alignItems: "center" }} className="mb-3">
+            <button
+              className="analyze-btn"
+              onClick={uploadResume}
+              disabled={loading}
+              
+              style={{
+                padding: "12px 36px",
+                fontSize: "var(--font-size-base)",
+                fontWeight: "700",
+                letterSpacing: "0.5px",
+                backgroundColor: "#6366f1",
+                color: "#fff",
+                border: "none",
+                borderRadius: "var(--radius-md)",
+                cursor: "pointer",
+                boxShadow: "var(--shadow-card)",
+                transition: "transform 0.2s ease, background-color 0.2s ease",
+                width: "100%",
+                maxWidth: "280px"
+              }}
+            >
+              {loading && analysisSource === "upload" ? "⏳ Processing..." : "🚀 Analyze Resume"}
+              style={{ minHeight: "44px", flex: "1 1 200px", maxWidth: "100%" }}
+            >
+              {loading && analysisSource === "upload" ? "⏳ Extracting and analyzing resume text..." : "🚀 Analyze Resume"}
+            </Button>
+            
+            <Button
+              variant="secondary"
+              {loading && analysisSource === "upload" ? "⏳ Extracting..." : "🚀 Analyze Resume"}
+            </button>
+            
+            <button
+              className="secondary-btn"
+              onClick={handleSampleResume}
+              disabled={loading}
+              type="button"
+              
+              style={{
+                background: "transparent",
+                border: "none",
+                color: "var(--btn-secondary-text)",
+                fontSize: "var(--font-size-sm)",
+                textDecoration: "underline",
+                cursor: "pointer",
+                marginTop: "4px"
+              }}
+            >
+              {loading && analysisSource === "sample" ? "⏳ Loading..." : "Or try with a sample resume"}
+              style={{ minHeight: "44px", flex: "1 1 200px", maxWidth: "100%" }}
+            >
+              {loading && analysisSource === "sample" ? "⏳ Loading Sample..." : "Or try with a sample resume"}
+            </Button>
+              {loading && analysisSource === "sample" ? "⏳ Loading..." : "Try Sample Resume"}
+            </button>
+          </div>
+
+
+          {/* Loading skeleton — shown while the resume is being analyzed */}
+          {loading && <AnalysisSkeleton />}
+          {score === null && !loading && (
+  <EmptyState />
+)}
 
               <div className={score === null && !loading ? 'hero-container' : ''}>
                 <div className={score === null && !loading ? 'hero-left' : ''}>
@@ -1201,141 +1408,66 @@ function App() {
 
                   {(loading || score !== null) && <StepProgress currentStep={currentStep} />}
 
-                  <section className="analyzer-form-section" aria-label="Resume Analyzer Form">
-                    {/* Active Flow Switcher Tabs */}
-                    {score === null && !loading && (
+
+
+                  {/* STEP 1: Target Career Track */}
+                  <div
+                    className="mb-4 p-4 role-selector-container"
+                    style={{
+                      background: 'rgba(255, 255, 255, 0.02)',
+                      borderRadius: 'var(--radius-lg)',
+                      border: '1px solid rgba(255,255,255,0.04)',
+                    }}
+                  >
+                    <label
+                      htmlFor="roleSelect"
+                      style={{
+                        display: 'block',
+                        marginBottom: '12px',
+                        fontWeight: '600',
+                        color: '#e2e8f0',
+                        fontSize: 'var(--font-size-sm)',
+                      }}
+                    >
+                      🎯 Target Career Track
+                    </label>
+                    <div className="custom-select-container">
+                      <select
+                        id="roleSelect"
+                        value={targetRole}
+                        onChange={(e) => {
+                          setTargetRole(e.target.value)
+                          if (e.target.value.trim() !== '') setRoleError(null)
+                        }}
+                        className="custom-select-element"
+                      >
+                        <option value="Frontend Developer">Frontend Developer</option>
+                        <option value="Backend Developer">Backend Developer</option>
+                        <option value="Data Analyst">Data Analyst</option>
+                      </select>
+                    </div>
+                    {roleError && (
                       <div
                         style={{
-                          display: 'flex',
-                          gap: '12px',
-                          justifyContent: 'center',
-                          marginBottom: '24px',
-                          borderBottom: '1px solid rgba(255, 255, 255, 0.08)',
-                          paddingBottom: '12px',
+                          color: '#ef4444',
+                          fontSize: '13px',
+                          marginTop: '8px',
+                          fontWeight: '500',
+                          textAlign: 'center',
                         }}
                       >
-                        <button
-                          type="button"
-                          onClick={() => {
-                            setActiveFlow('resume')
-                            setJdKeywords([])
-                          }}
-                          style={{
-                            padding: '8px 20px',
-                            borderRadius: 'var(--radius-md)',
-                            fontSize: '0.95rem',
-                            fontWeight: '600',
-                            cursor: 'pointer',
-                            background:
-                              activeFlow === 'resume'
-                                ? 'var(--color-primary, #6366f1)'
-                                : 'rgba(255, 255, 255, 0.05)',
-                            color: '#fff',
-                            border: '1px solid rgba(255, 255, 255, 0.15)',
-                            transition: 'all 0.2s ease',
-                          }}
-                        >
-                          📄 Optimize Resume
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() => {
-                            setActiveFlow('jd')
-                          }}
-                          style={{
-                            padding: '8px 20px',
-                            borderRadius: 'var(--radius-md)',
-                            fontSize: '0.95rem',
-                            fontWeight: '600',
-                            cursor: 'pointer',
-                            background:
-                              activeFlow === 'jd'
-                                ? 'var(--color-primary, #6366f1)'
-                                : 'rgba(255, 255, 255, 0.05)',
-                            color: '#fff',
-                            border: '1px solid rgba(255, 255, 255, 0.15)',
-                            transition: 'all 0.2s ease',
-                          }}
-                        >
-                          💼 Analyze Job Description
-                        </button>
+                        ⚠️ {roleError}
                       </div>
                     )}
+                  </div>
+
+                  {/* STEP 2: Upload File / Link & Job Description */}
+                  <div className="mb-5">
+                    {/* Mode Switcher Tabs */}
+
+                  <section className="analyzer-form-section" aria-label="Resume Analyzer Form">
+                    {/* STEP 1: Target Career Track */}
 
-                    {activeFlow === 'jd' && jdKeywords.length > 0 ? (
-                      <JdVisualizerPanel
-                        keywords={jdKeywords}
-                        onBack={() => {
-                          setJdKeywords([])
-                          setJdInputText('')
-                        }}
-                      />
-                    ) : activeFlow === 'jd' ? (
-                      <div className="animate-fade-in">
-                        <div
-                          className="mb-4 p-4"
-                          style={{
-                            background: 'rgba(255, 255, 255, 0.02)',
-                            borderRadius: 'var(--radius-lg)',
-                            border: '1px solid rgba(255,255,255,0.04)',
-                            textAlign: 'left'
-                          }}
-                        >
-                          <label
-                            htmlFor="jdTextInput"
-                            style={{
-                              color: theme === 'light' ? '#000000' : '#ffffff',
-                              display: 'block',
-                              marginBottom: '12px',
-                              fontWeight: '600',
-                              fontSize: 'var(--font-size-sm)',
-                            }}
-                          >
-                            📝 Paste the Job Description to extract and visualize key terms:
-                          </label>
-                          <textarea
-                            id="jdTextInput"
-                            rows={8}
-                            value={jdInputText}
-                            onChange={(e) => {
-                              setJdInputText(e.target.value)
-                              if (e.target.value.trim() !== '') setJdError(null)
-                            }}
-                            placeholder="Paste job description here..."
-                            style={{
-                              width: '100%',
-                              padding: '12px',
-                              borderRadius: 'var(--radius-md)',
-                              border: '1px solid rgba(255,255,255,0.1)',
-                              background: 'rgba(0,0,0,0.2)',
-                              color: '#fff',
-                              outline: 'none',
-                              fontSize: '0.92rem',
-                              lineHeight: '1.5',
-                              resize: 'vertical'
-                            }}
-                          />
-                          {jdError && (
-                            <div style={{ color: '#ef4444', fontSize: '13px', marginTop: '8px', fontWeight: '500' }}>
-                              ⚠️ {jdError}
-                            </div>
-                          )}
-                          <div style={{ display: 'flex', justifyContent: 'center', marginTop: '16px' }}>
-                            <button
-                              type="button"
-                              className="analyze-btn"
-                              onClick={runJdAnalysis}
-                              disabled={jdLoading}
-                              style={{ width: 'auto', minWidth: '200px' }}
-                            >
-                              {jdLoading ? '⏳ Analyzing Keywords...' : '🔍 Analyze JD Keywords'}
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-                    ) : (
-                      <>
-                        {/* STEP 1: Target Career Track */}
                     <div
                       className="mb-4 p-4 role-selector-container"
                       style={{
diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx
new file mode 100644
index 00000000..158173ec
--- /dev/null
+++ b/frontend/src/components/Button.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "ghost";
+  children: React.ReactNode;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  variant = "primary",
+  children,
+  className = "",
+  style,
+  disabled,
+  ...props
+}) => {
+  // Base structural styles shared across all buttons
+  const baseStyle: React.CSSProperties = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontWeight: "600",
+    border: "none",
+    cursor: disabled ? "not-allowed" : "pointer",
+    transition: "all 0.2s ease",
+    opacity: disabled ? 0.6 : 1,
+  };
+
+  // Variant-specific styles mapping to our new scale and system tokens
+const variantStyles: Record<string, React.CSSProperties> = {
+    primary: {
+      padding: "12px 36px",
+      fontSize: "var(--font-size-base)",
+      backgroundColor: "#6366f1",
+      color: "#fff",
+      borderRadius: "9999px", 
+      boxShadow: "var(--shadow-card)",
+      width: "100%",
+      maxWidth: "280px"
+    },
+    secondary: {
+      background: "transparent",
+      color: "var(--btn-secondary-text)",
+      fontSize: "var(--font-size-sm)",
+      textDecoration: "underline",
+      marginTop: "8px",
+    },
+    ghost: {
+      padding: "8px 20px",
+      fontSize: "var(--font-size-sm)",
+      background: "rgba(255, 255, 255, 0.15)",
+      color: "#ffffff",
+      borderRadius: "9999px", /* Makes it a pill / capsule shape */
+      border: "1px solid rgba(255, 255, 255, 0.2)",
+    },
+  };
+
+  const combinedStyle = {
+    ...baseStyle,
+    ...variantStyles[variant],
+    ...style,
+  };
+
+ return (
+    <button
+      className={`app-btn-custom app-btn-custom--${variant} ${className}`}
+      style={combinedStyle}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 8ff86e3f..f3e2df0c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1991,6 +1991,24 @@ input {
   padding: 16px 0;
 }
 
+/* Interactive states for our reusable Button component */
+.app-btn-custom:not(:disabled):hover {
+  filter: brightness(1.1);
+  transform: translateY(-1px);
+}
+
+.app-btn-custom:not(:disabled):active {
+  transform: translateY(0);
+}
+
+.app-btn-custom--secondary:hover {
+  color: #fff !important;
+  text-decoration: none !important;
+
+/* Custom Styled Select Dropdown Container */
+.custom-select-container {
+
+
 .wordcloud-fallback-word {
   font-size: var(--text-lg);
   font-weight: 700;