diff --git a/frontend/frontend_gameplan.md b/frontend/frontend_gameplan.md
index e69de29..25fbaf1 100644
--- a/frontend/frontend_gameplan.md
+++ b/frontend/frontend_gameplan.md
@@ -0,0 +1,489 @@
+Based on the PDF requirements, I need to update the frontend completion plan to include the additional features and phases mentioned. Here's the updated comprehensive plan:
+
+# SmartQuery Frontend Completion Plan (Updated)
+
+## Current State Analysis
+
+The frontend is currently in a **basic starter state** with:
+- ✅ Next.js 14 with TypeScript setup
+- ✅ Tailwind CSS + DaisyUI for styling
+- ✅ Zustand for state management
+- ✅ Recharts for data visualization
+- ✅ Basic example components (counter, sample chart)
+- ❌ **No authentication system**
+- ❌ **No project management UI**
+- ❌ **No chat/query interface**
+- ❌ **No file upload functionality**
+- ❌ **No dashboard or navigation**
+- ❌ **No vector search integration**
+- ❌ **No monitoring/analytics**
+
+## Complete Frontend Implementation Plan
+
+### Phase 1: Core Infrastructure & Authentication (Priority: High)
+
+#### 1.1 API Client Setup
+**Files to create:**
+- `frontend/src/lib/api.ts` - Central API client with all endpoints
+- `frontend/src/lib/auth.ts` - Authentication utilities and token management
+- `frontend/src/lib/types.ts` - TypeScript types from API contract
+- `frontend/src/lib/retry.ts` - Retry and timeout handling utilities
+
+**Implementation:**
+- HTTP client with interceptors for auth tokens
+- Automatic token refresh handling
+- **Retry logic with exponential backoff**
+- **Timeout handling for long-running queries**
+- Type-safe API calls using the contract
+- **Consistent API response handling**
+
+#### 1.2 Authentication System
+**Files to create:**
+- `frontend/src/components/auth/LoginButton.tsx` - Google OAuth login
+- `frontend/src/components/auth/AuthProvider.tsx` - Auth context provider
+- `frontend/src/components/auth/ProtectedRoute.tsx` - Route protection
+- `frontend/src/app/login/page.tsx` - Login page
+- `frontend/src/lib/store/auth.ts` - Auth state management
+
+**Features:**
+- Google OAuth integration
+- JWT token management
+- Automatic token refresh
+- Protected routes
+- User session persistence
+
+
+
+
+– need to do everything below this–
+
+#### 1.3 Navigation & Layout
+**Files to create:**
+- `frontend/src/components/layout/Navbar.tsx` - Main navigation
+- `frontend/src/components/layout/Sidebar.tsx` - Project sidebar
+- `frontend/src/components/layout/Footer.tsx` - Footer component
+- `frontend/src/app/layout.tsx` - Enhanced root layout
+
+**Features:**
+- Responsive navigation
+- User profile dropdown
+- Project navigation
+- Breadcrumb navigation
+
+### Phase 2: Project Management (Priority: High)
+
+#### 2.1 Project Dashboard
+**Files to create:**
+- `frontend/src/app/dashboard/page.tsx` - Main dashboard
+- `frontend/src/components/dashboard/ProjectList.tsx` - Project grid/list
+- `frontend/src/components/dashboard/ProjectCard.tsx` - Individual project card
+- `frontend/src/components/dashboard/CreateProjectModal.tsx` - New project modal
+- `frontend/src/components/dashboard/DashboardStats.tsx` - Statistics overview
+
+**Features:**
+- Project listing with pagination
+- Project creation with file upload
+- Project status indicators
+- Quick actions (view, delete, analyze)
+- Search and filtering
+
+#### 2.2 Project Details
+**Files to create:**
+- `frontend/src/app/projects/[id]/page.tsx` - Project detail page
+- `frontend/src/components/projects/ProjectHeader.tsx` - Project info header
+- `frontend/src/components/projects/ProjectMetadata.tsx` - Schema/metadata display
+- `frontend/src/components/projects/FileUpload.tsx` - File upload component
+- `frontend/src/components/projects/DeleteProjectModal.tsx` - Delete confirmation
+
+**Features:**
+- Project metadata display
+- CSV schema visualization
+- File upload with progress
+- Project settings and management
+- Data preview capabilities
+
+### Phase 3: Chat & Query Interface (Priority: High)
+
+#### 3.1 Chat Interface
+**Files to create:**
+- `frontend/src/app/projects/[id]/chat/page.tsx` - Chat page
+- `frontend/src/components/chat/ChatInterface.tsx` - Main chat component
+- `frontend/src/components/chat/MessageList.tsx` - Message history
+- `frontend/src/components/chat/MessageInput.tsx` - Message input
+- `frontend/src/components/chat/QuerySuggestions.tsx` - Suggested queries
+- `frontend/src/components/chat/QueryHistory.tsx` - Query history tracking
+
+**Features:**
+- Real-time chat interface
+- Message history with pagination
+- Query suggestions by category
+- Message status indicators
+- Context-aware suggestions
+- **Query history and favorites**
+
+#### 3.2 Query Results Display
+**Files to create:**
+- `frontend/src/components/results/ResultDisplay.tsx` - Main result component
+- `frontend/src/components/results/DataTable.tsx` - Tabular data display
+- `frontend/src/components/results/ChartDisplay.tsx` - Chart visualization
+- `frontend/src/components/results/SummaryDisplay.tsx` - Text summary display
+- `frontend/src/components/results/ExportOptions.tsx` - Data export
+- `frontend/src/components/results/QueryMetrics.tsx` - Query performance metrics
+
+**Features:**
+- Dynamic result rendering (table/chart/summary)
+- Interactive charts with Recharts
+- Data export (CSV, JSON)
+- Result sharing capabilities
+- Query history tracking
+- **Query performance metrics (latency, duration)**
+- **Consistent API response handling**
+
+### Phase 4: Vector Search & Advanced Analytics (Priority: High)
+
+#### 4.1 Vector Search Integration
+**Files to create:**
+- `frontend/src/components/search/SemanticSearch.tsx` - Semantic search interface
+- `frontend/src/components/search/SearchResults.tsx` - Search results display
+- `frontend/src/components/search/SearchFilters.tsx` - Search filters
+- `frontend/src/lib/vector-search.ts` - Vector search utilities
+
+**Features:**
+- **Semantic search across project data**
+- **Column-level search capabilities**
+- **Search result highlighting**
+- **Search history and suggestions**
+- **Integration with Pinecone/Weaviate**
+
+#### 4.2 Advanced Charts & Analytics
+**Files to create:**
+- `frontend/src/components/charts/ChartBuilder.tsx` - Chart configuration
+- `frontend/src/components/charts/ChartTypes.tsx` - Chart type selector
+- `frontend/src/components/charts/ChartCustomization.tsx` - Chart options
+- `frontend/src/components/charts/ChartExport.tsx` - Chart export
+- `frontend/src/components/analytics/DataInsights.tsx` - Data insights panel
+- `frontend/src/components/analytics/ColumnAnalysis.tsx` - Column statistics
+
+**Features:**
+- Multiple chart types (bar, line, pie, scatter, histogram)
+- Chart customization options
+- Interactive chart elements
+- Chart export (PNG, SVG, PDF)
+- **Data quality indicators**
+- **Statistical summaries**
+- **Correlation analysis**
+
+### Phase 5: Monitoring & Analytics (Priority: Medium)
+
+#### 5.1 Error Handling & Loading States
+**Files to create:**
+- `frontend/src/components/ui/LoadingSpinner.tsx` - Loading indicators
+- `frontend/src/components/ui/ErrorBoundary.tsx` - Error boundaries
+- `frontend/src/components/ui/Toast.tsx` - Toast notifications
+- `frontend/src/components/ui/EmptyState.tsx` - Empty state components
+- `frontend/src/components/ui/LatencyIndicator.tsx` - Query latency display
+
+**Features:**
+- Comprehensive error handling
+- Loading states for all async operations
+- User-friendly error messages
+- Toast notifications for actions
+- Empty states for new users
+- **Query latency monitoring**
+
+#### 5.2 Analytics & Monitoring Integration
+**Files to create:**
+- `frontend/src/lib/analytics.ts` - Analytics utilities
+- `frontend/src/lib/monitoring.ts` - Monitoring utilities
+- `frontend/src/components/monitoring/PerformanceMetrics.tsx` - Performance display
+- `frontend/src/hooks/useAnalytics.ts` - Analytics hooks
+
+**Features:**
+- **Sentry integration for error tracking**
+- **PostHog integration for user analytics**
+- **Track file uploads, chat messages, chart interactions**
+- **Performance monitoring**
+- **User behavior analytics**
+
+### Phase 6: Testing & Documentation (Priority: Medium)
+
+#### 6.1 Unit Testing
+**Files to create:**
+- `frontend/src/__tests__/components/` - Component tests
+- `frontend/src/__tests__/hooks/` - Hook tests
+- `frontend/src/__tests__/lib/` - Utility tests
+- `frontend/src/__tests__/integration/` - Integration tests
+
+**Testing Coverage:**
+- **Unit test components with Vitest + React Testing Library**
+- **Hook testing with @testing-library/react-hooks**
+- **API client testing**
+- **State management testing**
+
+#### 6.2 End-to-End Testing
+**Files to create:**
+- `frontend/e2e/` - E2E test directory
+- `frontend/e2e/auth.spec.ts` - Authentication flow tests
+- `frontend/e2e/project.spec.ts` - Project management tests
+- `frontend/e2e/chat.spec.ts` - Chat interface tests
+
+**E2E Testing:**
+- **E2E test login → project → chat using Playwright**
+- **File upload flow testing**
+- **Query processing flow testing**
+- **Cross-browser compatibility testing**
+
+### Phase 7: DevOps & Deployment (Priority: Low)
+
+#### 7.1 Docker & Local Development
+**Files to create:**
+- `frontend/Dockerfile` - Frontend Dockerfile
+- `docker-compose.dev.yml` - Local development setup
+- `frontend/.dockerignore` - Docker ignore file
+
+**Features:**
+- **Docker containerization**
+- **Local development environment**
+- **Hot reloading in containers**
+- **Environment-specific configurations**
+
+#### 7.2 Production Deployment
+**Files to create:**
+- `frontend/.github/workflows/deploy.yml` - Deployment workflow
+- `frontend/vercel.json` - Vercel configuration
+- `frontend/railway.json` - Railway configuration
+
+**Deployment Options:**
+- **Vercel deployment**
+- **Railway deployment**
+- **Fly.io deployment**
+- **GKE deployment**
+
+### Phase 8: Documentation & User Experience (Priority: Low)
+
+#### 8.1 Documentation
+**Files to create:**
+- `frontend/README.md` - Development setup guide
+- `frontend/docs/ARCHITECTURE.md` - Architecture documentation
+- `frontend/docs/USER_GUIDE.md` - End-user walkthrough
+- `frontend/docs/API_REFERENCE.md` - Frontend API reference
+
+**Documentation:**
+- **README.md for dev setup**
+- **/docs/ARCHITECTURE.md with diagram**
+- **Usage walkthrough for end-users**
+- **Component documentation**
+
+#### 8.2 User Experience Polish
+**Files to create:**
+- `frontend/src/components/ui/ResponsiveWrapper.tsx` - Responsive containers
+- `frontend/src/components/ui/Accessibility.tsx` - Accessibility helpers
+- `frontend/src/styles/responsive.css` - Responsive utilities
+- `frontend/src/components/ui/Onboarding.tsx` - User onboarding
+
+**Features:**
+- Mobile-first responsive design
+- Keyboard navigation support
+- Screen reader compatibility
+- High contrast mode support
+- Touch-friendly interfaces
+- **User onboarding flow**
+
+## Implementation Priority & Timeline
+
+### Week 1: Core Infrastructure
+1. **API Client Setup** (2 days)
+   - Implement central API client with retry/timeout
+   - Add authentication utilities
+   - Setup type definitions
+
+2. **Authentication System** (3 days)
+   - Google OAuth integration
+   - JWT token management
+   - Protected routes
+
+### Week 2: Project Management
+1. **Dashboard & Navigation** (2 days)
+   - Main dashboard layout
+   - Navigation components
+   - Project listing
+
+2. **Project CRUD Operations** (3 days)
+   - Project creation with file upload
+   - Project details and management
+   - Delete and update operations
+
+### Week 3: Chat & Query Interface
+1. **Chat Interface** (3 days)
+   - Real-time chat component
+   - Message handling
+   - Query suggestions
+
+2. **Results Display** (2 days)
+   - Dynamic result rendering
+   - Chart visualization
+   - Data export
+
+### Week 4: Vector Search & Analytics
+1. **Vector Search Integration** (3 days)
+   - Semantic search interface
+   - Search results display
+   - Column-level search
+
+2. **Advanced Analytics** (2 days)
+   - Data insights panel
+   - Performance metrics
+   - Chart customization
+
+### Week 5: Testing & Monitoring
+1. **Unit Testing** (3 days)
+   - Component tests with Vitest
+   - Hook testing
+   - API client testing
+
+2. **Monitoring Integration** (2 days)
+   - Sentry error tracking
+   - PostHog analytics
+   - Performance monitoring
+
+### Week 6: E2E Testing & Documentation
+1. **E2E Testing** (3 days)
+   - Playwright test setup
+   - Authentication flow tests
+   - Project management tests
+
+2. **Documentation** (2 days)
+   - Architecture documentation
+   - User guides
+   - API reference
+
+## Technical Requirements
+
+### Dependencies to Add
+```json
+{
+  "dependencies": {
+    "@google-cloud/local-auth": "^2.1.0",
+    "axios": "^1.6.0",
+    "react-query": "^3.39.0",
+    "react-hook-form": "^7.48.0",
+    "react-dropzone": "^14.2.0",
+    "date-fns": "^2.30.0",
+    "clsx": "^2.0.0",
+    "lucide-react": "^0.294.0",
+    "@sentry/nextjs": "^7.0.0",
+    "posthog-js": "^1.100.0",
+    "playwright": "^1.40.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.40.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "vitest": "^1.0.0",
+    "@vitest/ui": "^1.0.0"
+  }
+}
+```
+
+### Environment Variables
+```env
+NEXT_PUBLIC_API_URL=http://localhost:8000
+NEXT_PUBLIC_GOOGLE_CLIENT_ID=your_google_client_id
+NEXT_PUBLIC_APP_NAME=SmartQuery
+NEXT_PUBLIC_SENTRY_DSN=your_sentry_dsn
+NEXT_PUBLIC_POSTHOG_KEY=your_posthog_key
+NEXT_PUBLIC_POSTHOG_HOST=https://app.posthog.com
+```
+
+### File Structure
+```
+frontend/src/
+├── app/
+│   ├── dashboard/
+│   ├── login/
+│   ├── projects/[id]/
+│   │   ├── chat/
+│   │   └── settings/
+│   └── settings/
+├── components/
+│   ├── auth/
+│   ├── chat/
+│   ├── dashboard/
+│   ├── layout/
+│   ├── projects/
+│   ├── results/
+│   ├── search/
+│   ├── analytics/
+│   ├── monitoring/
+│   └── ui/
+├── lib/
+│   ├── api.ts
+│   ├── auth.ts
+│   ├── types.ts
+│   ├── retry.ts
+│   ├── analytics.ts
+│   ├── monitoring.ts
+│   ├── vector-search.ts
+│   └── store/
+├── hooks/
+│   ├── useAnalytics.ts
+│   └── useVectorSearch.ts
+├── styles/
+└── __tests__/
+    ├── components/
+    ├── hooks/
+    ├── lib/
+    └── integration/
+```
+
+## Success Criteria
+
+### MVP Features (Must Have)
+- ✅ User authentication with Google OAuth
+- ✅ Project creation and management
+- ✅ File upload with progress tracking
+- ✅ Natural language query interface
+- ✅ Results display (table/chart/summary)
+- ✅ Responsive design for mobile/desktop
+- ✅ **Vector search capabilities**
+- ✅ **Query performance monitoring**
+
+### Enhanced Features (Should Have)
+- ✅ Advanced chart customization
+- ✅ Data export capabilities
+- ✅ Query suggestions and history
+- ✅ Error handling and loading states
+- ✅ User preferences and settings
+- ✅ **Analytics and monitoring**
+- ✅ **E2E testing coverage**
+
+### Future Features (Could Have)
+- ✅ Project sharing and collaboration
+- ✅ Advanced analytics and insights
+- ✅ API key management
+- ✅ Data quality indicators
+- ✅ Real-time collaboration
+- ✅ **Production deployment automation**
+- ✅ **Comprehensive documentation**
+
+## Additional Considerations
+
+### Feature Branch Strategy
+- Use feature branches for each major component
+- Tag team members for code reviews
+- Maintain TODO.md for tracking progress
+- Keep /tests/coverage-report/ updated
+
+### Interlock Points
+- **API Contract Consistency**: Ensure frontend matches backend API responses
+- **Vector Search Integration**: Coordinate with backend Pinecone/Weaviate setup
+- **Monitoring Setup**: Align Sentry and PostHog configurations
+- **Testing Strategy**: Coordinate E2E test scenarios
+
+### Performance Monitoring
+- **Prompt latency tracking**
+- **DuckDB query duration monitoring**
+- **Frontend performance metrics**
+- **User interaction analytics**
+
+This updated plan now fully aligns with the PDF requirements and includes all the additional features like vector search, monitoring, comprehensive testing, and deployment automation.
+
diff --git a/index.html b/index.html
index 9f52b6e..f2e616a 100644
--- a/index.html
+++ b/index.html
@@ -1,65 +1,201 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>SmartQuery – Coming Soon</title>
-  <link rel="icon" href="/frontend/public/smartquery-logo.svg">
-  <link rel="stylesheet" href="style.css">
-  <meta name="description" content="SmartQuery: Transform your CSV data into insights with natural language queries. Coming soon!">
-</head>
-<body>
-  <div class="background-gradient"></div>
-  <main class="center-container">
-    <section class="card">
-      <div class="logo-title">
-        <img src="/frontend/public/smartquery-logo.svg" alt="SmartQuery Logo" class="logo">
-        <h1 class="project-name">SmartQuery</h1>
-      </div>
-      <h2 class="tagline">Query your data, naturally.</h2>
-      <p class="subtitle">Upload CSV files and analyze them in plain English. Get instant answers, charts, and insights! All with no SQL or coding required.</p>
-      <div class="under-construction">
-        <span class="uc-icon" aria-label="construction">🚧</span>
-        <span class="uc-text">We're working hard to bring you an amazing experience. SmartQuery will be available soon!</span>
-      </div>
-      <div class="features">
-        <h3>What you'll be able to do:</h3>
-        <ul>
-          <li><span class="icon">📤</span> Upload CSVs Instantly</li>
-          <li><span class="icon">💬</span> Ask Data Questions</li>
-          <li><span class="icon">🤖</span> AI-Powered Insights</li>
-          <li><span class="icon">📊</span> Visualize Results</li>
-          <li><span class="icon">🔒</span> Secure & Private</li>
-          <li><span class="icon">🧮</span> No SQL Needed</li>
-        </ul>
-      </div>
-      <div class="soc2-note">
-        <span>SmartQuery will be <strong>SOC2 compliant</strong> to ensure the highest standards of security and privacy for your sensitive data.</span>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="SmartQuery: Instantly analyze CSV data with natural language queries. AI-powered insights, visualizations, and SOC2 compliance."
+    />
+    <meta name="robots" content="index, follow" />
+    <title>SmartQuery – Coming Soon</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      rel="icon"
+      href="./frontend/public/smartquery-logo.svg"
+      type="image/svg+xml"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+    <script defer src="script.js"></script>
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        "name": "SmartQuery",
+        "url": "https://smartquery.ai",
+        "description": "Query your CSV data in plain English. AI-powered insights, visualizations, and SOC2 compliance."
+      }
+    </script>
+  </head>
+  <body>
+    <div class="container">
+      <!-- Left Side - Content -->
+      <div class="left-side fade-in-left">
+        <div class="content-wrapper">
+          <header class="hero-header">
+            <div class="brand-container">
+              <img
+                src="./frontend/public/smartquery-logo.svg"
+                alt="SmartQuery Logo"
+                width="80"
+                height="80"
+                class="logo"
+              />
+              <div class="brand-text">
+                <h1 class="brand">SmartQuery</h1>
+                <p class="tagline">Query your data, naturally</p>
+              </div>
+            </div>
+          </header>
+
+          <div class="main-content">
+            <h2 class="coming-soon-title">Coming Soon...</h2>
+            <p class="subtitle">Stay Connected, Stay Updated!</p>
+            <p class="value-prop">
+              Upload CSV files and analyze them in plain English. Get instant
+              answers, charts, and insights! All with no SQL or coding required.
+            </p>
+
+            <div class="under-construction">
+              <span class="construction-emoji">🚧</span>
+              <span
+                >We're working hard to bring you an amazing experience!</span
+              >
+            </div>
+
+            <div class="features-section">
+              <h3 class="features-title">What you'll be able to do:</h3>
+              <ul class="feature-grid">
+                <li class="feature-item">
+                  <span class="icon">📤</span> Upload CSVs Instantly
+                </li>
+                <li class="feature-item">
+                  <span class="icon">💬</span> Ask Data Questions
+                </li>
+                <li class="feature-item">
+                  <span class="icon">🤖</span> AI-Powered Insights
+                </li>
+                <li class="feature-item">
+                  <span class="icon">📊</span> Visualize Results
+                </li>
+                <li class="feature-item">
+                  <span class="icon">🔒</span> Secure & Private
+                </li>
+                <li class="feature-item">
+                  <span class="icon">🧮</span> No SQL Needed
+                </li>
+              </ul>
+            </div>
+
+            <div class="soc2-note">
+              SmartQuery will be <strong>SOC2 compliant</strong> to ensure the
+              highest standards of security and privacy for your sensitive data.
+            </div>
+          </div>
+
+          <footer class="left-footer">
+            <div class="credits">
+              Built by
+              <a
+                href="https://github.com/sarthaksethi"
+                target="_blank"
+                rel="noopener"
+                >Sarthak Sethi</a
+              >
+              &
+              <a
+                href="https://github.com/tanzilahmed"
+                target="_blank"
+                rel="noopener"
+                >Tanzil Ahmed</a
+              >
+            </div>
+          </footer>
+        </div>
       </div>
-      <form class="waitlist-form" id="waitlistForm" autocomplete="off">
-        <label for="waitlistEmail" class="waitlist-label">Join the waitlist:</label>
-        <div class="waitlist-row">
-          <input type="email" id="waitlistEmail" name="email" class="waitlist-input" placeholder="Your email address" required />
-          <button type="submit" class="waitlist-btn">Notify Me</button>
+
+      <!-- Right Side - Countdown & Signup -->
+      <div class="right-side fade-in-right">
+        <div class="right-content">
+          <div class="countdown-section">
+            <div class="countdown-timer">
+              <div class="time-unit">
+                <span class="time-value" id="days">10</span>
+                <span class="time-label">DAYS</span>
+              </div>
+              <div class="time-unit">
+                <span class="time-value" id="hours">18</span>
+                <span class="time-label">HOURS</span>
+              </div>
+              <div class="time-unit">
+                <span class="time-value" id="minutes">36</span>
+                <span class="time-label">MINUTES</span>
+              </div>
+              <div class="time-unit">
+                <span class="time-value" id="seconds">48</span>
+                <span class="time-label">SECONDS</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="signup-section">
+            <h3 class="signup-title">Get Updates!</h3>
+            <form
+              class="waitlist-form"
+              aria-label="Waitlist Signup"
+              autocomplete="off"
+              novalidate
+            >
+              <div class="input-group">
+                <label for="email" class="visually-hidden">Email address</label>
+                <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  placeholder="Email Address"
+                  required
+                  aria-required="true"
+                  aria-label="Email address"
+                />
+                <button type="submit" class="notify-btn" aria-label="Send Now">
+                  Send Now
+                </button>
+              </div>
+              <div class="form-message" aria-live="polite"></div>
+            </form>
+          </div>
+
+          <div class="social-links">
+            <a
+              href="https://github.com/sarthaksethi/SmartQuery"
+              target="_blank"
+              rel="noopener"
+              aria-label="GitHub"
+              class="social-link"
+            >
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+              >
+                <path
+                  d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+                />
+              </svg>
+            </a>
+          </div>
+
+          <div class="copyright">
+            &copy; <span id="year"></span> SmartQuery. All rights reserved.
+          </div>
         </div>
-        <div class="waitlist-success" id="waitlistSuccess" style="display:none;">Thank you! You'll be the first to know when we launch 🚀</div>
-      </form>
-      <div class="credits">
-        <span>Built by </span>
-        <a href="https://github.com/1300Sarthak" target="_blank" rel="noopener">Sarthak Sethi</a>
-        <span>&amp;</span>
-        <a href="https://github.com/tanzilahmed0" target="_blank" rel="noopener">Tanzil Ahmed</a>
       </div>
-    </section>
-  </main>
-  <footer class="footer">&copy; 2024 SmartQuery. All rights reserved.</footer>
-  <script>
-    document.getElementById('waitlistForm').addEventListener('submit', function(e) {
-      e.preventDefault();
-      document.getElementById('waitlistEmail').style.display = 'none';
-      document.querySelector('.waitlist-btn').style.display = 'none';
-      document.getElementById('waitlistSuccess').style.display = 'block';
-    });
-  </script>
-</body>
-</html> 
\ No newline at end of file
+    </div>
+  </body>
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..8ac99ae
--- /dev/null
+++ b/script.js
@@ -0,0 +1,200 @@
+document.addEventListener("DOMContentLoaded", function () {
+  // Initialize countdown timer
+  initCountdownTimer();
+
+  // Initialize form handling
+  initWaitlistForm();
+
+  // Set dynamic year
+  document.getElementById("year").textContent = new Date().getFullYear();
+
+  // Add smooth scroll behavior for footer links
+  initSmoothScroll();
+});
+
+function initCountdownTimer() {
+  // Set target date (10 days from now for demo)
+  const targetDate = new Date();
+  targetDate.setDate(targetDate.getDate() + 10);
+  targetDate.setHours(0, 0, 0, 0);
+
+  const daysEl = document.getElementById("days");
+  const hoursEl = document.getElementById("hours");
+  const minutesEl = document.getElementById("minutes");
+  const secondsEl = document.getElementById("seconds");
+
+  function updateCountdown() {
+    const now = new Date().getTime();
+    const timeLeft = targetDate.getTime() - now;
+
+    if (timeLeft > 0) {
+      const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
+      const hours = Math.floor(
+        (timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+      );
+      const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
+      const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
+
+      // Animate number changes
+      animateNumberChange(daysEl, days);
+      animateNumberChange(hoursEl, hours);
+      animateNumberChange(minutesEl, minutes);
+      animateNumberChange(secondsEl, seconds);
+    } else {
+      // Countdown finished
+      daysEl.textContent = "00";
+      hoursEl.textContent = "00";
+      minutesEl.textContent = "00";
+      secondsEl.textContent = "00";
+    }
+  }
+
+  function animateNumberChange(element, newValue) {
+    const currentValue = parseInt(element.textContent);
+    const formattedValue = newValue.toString().padStart(2, "0");
+
+    if (currentValue !== newValue) {
+      element.style.transform = "scale(1.1)";
+      element.style.color = "#fbbf24";
+
+      setTimeout(() => {
+        element.textContent = formattedValue;
+        element.style.transform = "scale(1)";
+        element.style.color = "white";
+      }, 150);
+    }
+  }
+
+  // Update countdown immediately and then every second
+  updateCountdown();
+  setInterval(updateCountdown, 1000);
+}
+
+function initWaitlistForm() {
+  const form = document.querySelector(".waitlist-form");
+  const emailInput = document.getElementById("email");
+  const formMessage = document.querySelector(".form-message");
+  const submitBtn = form.querySelector(".notify-btn");
+
+  // Restore email from localStorage if present
+  if (window.localStorage) {
+    const savedEmail = localStorage.getItem("smartquery_waitlist_email");
+    if (savedEmail) {
+      emailInput.value = savedEmail;
+    }
+  }
+
+  form.addEventListener("submit", function (e) {
+    e.preventDefault();
+
+    const email = emailInput.value.trim();
+
+    if (!validateEmail(email)) {
+      showMessage("Please enter a valid email address.", "error");
+      return;
+    }
+
+    // Show loading state
+    submitBtn.textContent = "Sending...";
+    submitBtn.disabled = true;
+
+    // Save to localStorage
+    if (window.localStorage) {
+      localStorage.setItem("smartquery_waitlist_email", email);
+    }
+
+    // Simulate API call
+    setTimeout(() => {
+      showMessage(
+        "🎉 You're on the waitlist! We'll notify you when we launch.",
+        "success"
+      );
+
+      // Disable form after success
+      emailInput.disabled = true;
+      submitBtn.textContent = "Subscribed!";
+      submitBtn.style.background = "rgba(34, 197, 94, 0.3)";
+      submitBtn.style.borderColor = "rgba(34, 197, 94, 0.5)";
+
+      // Add success animation to the entire right side
+      document.querySelector(".right-side").classList.add("success-pulse");
+    }, 1500);
+  });
+
+  function showMessage(msg, type) {
+    formMessage.textContent = msg;
+    formMessage.className = "form-message " + type;
+    formMessage.setAttribute("aria-live", "polite");
+  }
+
+  function validateEmail(email) {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+  }
+
+  // Add input focus effects
+  emailInput.addEventListener("focus", function () {
+    this.parentElement.classList.add("focused");
+  });
+
+  emailInput.addEventListener("blur", function () {
+    this.parentElement.classList.remove("focused");
+  });
+}
+
+function initSmoothScroll() {
+  document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
+    anchor.addEventListener("click", function (e) {
+      e.preventDefault();
+      const target = document.querySelector(this.getAttribute("href"));
+      if (target) {
+        target.scrollIntoView({
+          behavior: "smooth",
+          block: "start",
+        });
+      }
+    });
+  });
+}
+
+// Add some interactive hover effects
+document.addEventListener("mousemove", function (e) {
+  const rightSide = document.querySelector(".right-side");
+  const rect = rightSide.getBoundingClientRect();
+
+  if (
+    e.clientX >= rect.left &&
+    e.clientX <= rect.right &&
+    e.clientY >= rect.top &&
+    e.clientY <= rect.bottom
+  ) {
+    const x = ((e.clientX - rect.left) / rect.width - 0.5) * 20;
+    const y = ((e.clientY - rect.top) / rect.height - 0.5) * 20;
+
+    rightSide.style.transform = `perspective(1000px) rotateY(${
+      x * 0.1
+    }deg) rotateX(${-y * 0.1}deg)`;
+  } else {
+    rightSide.style.transform =
+      "perspective(1000px) rotateY(0deg) rotateX(0deg)";
+  }
+});
+
+// Add CSS for success pulse animation
+const style = document.createElement("style");
+style.textContent = `
+  .success-pulse {
+    animation: success-pulse 2s ease-out;
+  }
+  
+  @keyframes success-pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.02); box-shadow: 0 0 30px rgba(34, 197, 94, 0.3); }
+    100% { transform: scale(1); }
+  }
+  
+  .input-group.focused input {
+    transform: scale(1.02);
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
+  }
+`;
+document.head.appendChild(style);
diff --git a/style.css b/style.css
index e793d7c..abd4114 100644
--- a/style.css
+++ b/style.css
@@ -1,301 +1,561 @@
-html, body {
-  height: 100%;
-  overflow: hidden;
+/* Reset & base styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
+
+html,
 body {
+  height: 100%;
+  font-family: "Inter", "Segoe UI", Arial, sans-serif;
+  overflow-x: hidden;
+  color: #1e293b;
   margin: 0;
   padding: 0;
-  min-height: 100vh;
-  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
-  color: #232946;
-  position: relative;
-  background: transparent;
-}
-.background-gradient {
-  position: fixed;
-  top: 0; left: 0; right: 0; bottom: 0;
-  z-index: 0;
-  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 40%, #818cf8 100%);
-  width: 100vw;
-  height: 100vh;
 }
-.center-container {
-  min-height: 100vh;
+
+.container {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  z-index: 1;
-}
-.card {
-  background: #fff;
-  border-radius: 2rem;
-  box-shadow: 0 8px 32px rgba(60, 60, 120, 0.12), 0 1.5px 6px rgba(60, 60, 120, 0.08);
-  border: 1.5px solid #c7d2fe;
-  padding: 2.5rem 2rem 2rem 2rem;
-  max-width: 420px;
+  height: 100vh;
   width: 100%;
+  overflow: hidden;
+}
+
+/* Left Side - Content */
+.left-side {
+  flex: 1;
+  background: #ffffff;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 1.2rem;
+  padding: 2rem;
+  opacity: 0;
+  transform: translateX(-50px);
+  animation: fade-slide-left 1s ease-out 0.2s forwards;
 }
-.logo-title {
+
+@keyframes fade-slide-left {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.content-wrapper {
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+/* Hero Header */
+.hero-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.brand-container {
+  display: flex;
   align-items: center;
-  gap: 0.5rem;
+  justify-content: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
 }
+
 .logo {
-  width: 64px;
-  height: 64px;
-  margin-bottom: 0.2rem;
+  width: 80px;
+  height: 80px;
+  filter: drop-shadow(0 4px 12px rgba(99, 102, 241, 0.15));
+  flex-shrink: 0;
 }
-.project-name {
-  font-size: 2.1rem;
+
+.brand {
+  font-size: 3rem;
   font-weight: 800;
-  color: #4338ca;
-  letter-spacing: -1px;
+  color: #4f46e5;
+  letter-spacing: -2px;
   margin: 0;
 }
+
 .tagline {
-  font-size: 1.3rem;
+  font-size: 1.25rem;
+  font-weight: 500;
+  color: #6366f1;
+  margin: 0.25rem 0 0 0;
+}
+
+/* Main Content */
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.coming-soon-title {
+  font-size: 2.5rem;
   font-weight: 700;
-  color: #232946;
-  margin: 0.2rem 0 0.1rem 0;
+  color: #6366f1;
+  text-align: center;
+  margin-bottom: 0.5rem;
 }
+
 .subtitle {
-  font-size: 1rem;
-  color: #4b5563;
-  margin: 0 0 0.5rem 0;
+  font-size: 1.125rem;
+  color: #64748b;
+  text-align: center;
+  margin-bottom: 1rem;
 }
+
+.value-prop {
+  font-size: 1.125rem;
+  color: #475569;
+  text-align: center;
+  line-height: 1.6;
+  margin-bottom: 1.5rem;
+}
+
 .under-construction {
+  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+  border: 2px solid #e2e8f0;
+  border-radius: 1rem;
+  padding: 1rem 1.5rem;
+  text-align: center;
   display: flex;
   align-items: center;
-  gap: 0.7rem;
-  background: #eef2ff;
-  border: 1px solid #c7d2fe;
-  border-radius: 1rem;
-  padding: 0.7rem 1rem;
-  font-size: 1.08rem;
-  color: #4338ca;
+  justify-content: center;
+  gap: 0.75rem;
   font-weight: 600;
-  margin-bottom: 0.2rem;
+  color: #475569;
 }
-.uc-icon {
+
+.construction-emoji {
   font-size: 1.5rem;
 }
-.features {
-  width: 100%;
-  margin-top: 0.2rem;
+
+/* Features Section */
+.features-section {
+  margin: 1.5rem 0;
 }
-.features h3 {
-  font-size: 1.08rem;
-  color: #4338ca;
+
+.features-title {
+  font-size: 1.25rem;
   font-weight: 700;
-  margin-bottom: 0.5rem;
-  text-align: left;
+  color: #374151;
+  margin-bottom: 1rem;
+  text-align: center;
 }
-.features ul {
+
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
   list-style: none;
   padding: 0;
-  margin: 0;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.5rem 0.7rem;
 }
-.features li {
+
+.feature-item {
   display: flex;
   align-items: center;
-  font-size: 1rem;
-  color: #4338ca;
+  gap: 0.75rem;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.75rem;
+  padding: 1rem;
   font-weight: 500;
-  gap: 0.5rem;
-  background: #f5f7ff;
-  border-radius: 0.7rem;
-  padding: 0.4rem 0.7rem;
+  color: #374151;
+  transition: all 0.3s ease;
+  opacity: 0;
+  transform: translateY(20px);
+  animation: feature-fade-in 0.6s ease-out forwards;
 }
-.icon {
-  font-size: 1.2rem;
-  display: inline-block;
+
+.feature-item:nth-child(1) {
+  animation-delay: 0.4s;
 }
-.soc2-note {
-  margin-top: 0.7rem;
-  margin-bottom: 0.7rem;
+.feature-item:nth-child(2) {
+  animation-delay: 0.5s;
+}
+.feature-item:nth-child(3) {
+  animation-delay: 0.6s;
+}
+.feature-item:nth-child(4) {
+  animation-delay: 0.7s;
+}
+.feature-item:nth-child(5) {
+  animation-delay: 0.8s;
+}
+.feature-item:nth-child(6) {
+  animation-delay: 0.9s;
+}
+
+@keyframes feature-fade-in {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.feature-item:hover {
   background: #e0e7ff;
-  color: #4338ca;
-  border-radius: 0.7rem;
-  padding: 0.5rem 1rem;
-  font-size: 0.98rem;
+  border-color: #c7d2fe;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
+}
+
+.feature-item .icon {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+
+.soc2-note {
+  background: #f0f9ff;
+  border: 1px solid #bae6fd;
+  border-left: 4px solid #0ea5e9;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  font-size: 0.95rem;
+  color: #0c4a6e;
   text-align: center;
+}
+
+/* Left Footer */
+.left-footer {
+  margin-top: 2rem;
+  text-align: center;
+}
+
+.footer-nav {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  margin-bottom: 1rem;
+}
+
+.footer-nav a {
+  color: #64748b;
+  text-decoration: none;
   font-weight: 500;
-  box-shadow: 0 1px 4px rgba(67,56,202,0.07);
+  transition: color 0.3s ease;
+}
+
+.footer-nav a:hover {
+  color: #4f46e5;
 }
+
 .credits {
-  display: flex;
-  align-items: center;
-  gap: 0.7rem;
-  font-size: 0.98rem;
+  font-size: 1.1rem;
   color: #64748b;
-  margin-top: 0.7rem;
-  flex-wrap: wrap;
-  justify-content: center;
 }
+
 .credits a {
-  display: flex;
-  align-items: center;
-  gap: 0.3rem;
-  color: #4338ca;
+  color: #4f46e5;
   text-decoration: none;
   font-weight: 600;
-  transition: color 0.2s;
 }
+
 .credits a:hover {
-  color: #6366f1;
   text-decoration: underline;
 }
-.avatar {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  border: 1px solid #cbd5e1;
+
+/* Right Side - Countdown & Signup */
+.right-side {
+  flex: 1;
+  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6366f1 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  opacity: 0;
+  transform: translateX(50px);
+  animation: fade-slide-right 1s ease-out 0.4s forwards;
 }
-.footer {
-  width: 100%;
-  text-align: center;
-  color: #4338ca;
-  font-size: 0.95rem;
-  background: rgba(255,255,255,0.85);
-  border-top: 1px solid #c7d2fe;
-  padding: 1rem 0 0.7rem 0;
-  position: relative;
-  z-index: 2;
+
+@keyframes fade-slide-right {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
-.waitlist-form {
+
+.right-content {
+  text-align: center;
+  color: white;
   width: 100%;
-  margin: 0.7rem 0 0.7rem 0;
+  max-width: 400px;
+}
+
+/* Countdown Timer */
+.countdown-section {
+  margin-bottom: 3rem;
+}
+
+.countdown-timer {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.time-unit {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.3rem;
 }
-.waitlist-label {
-  font-size: 1rem;
-  color: #4338ca;
+
+.time-value {
+  font-size: 3rem;
+  font-weight: 800;
+  color: white;
+  line-height: 1;
+  margin-bottom: 0.5rem;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.time-label {
+  font-size: 0.75rem;
   font-weight: 600;
-  margin-bottom: 0.2rem;
+  color: rgba(255, 255, 255, 0.8);
+  letter-spacing: 1px;
+  text-transform: uppercase;
 }
-.waitlist-row {
-  display: flex;
+
+/* Signup Section */
+.signup-section {
+  margin-bottom: 3rem;
+}
+
+.signup-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: white;
+  margin-bottom: 1.5rem;
+}
+
+.waitlist-form {
   width: 100%;
+}
+
+.input-group {
+  display: flex;
   gap: 0.5rem;
-  justify-content: center;
+  margin-bottom: 1rem;
+  position: relative;
 }
-.waitlist-input {
-  flex: 1 1 0;
-  min-width: 0;
-  padding: 0.5rem 0.9rem;
-  border: 1.5px solid #c7d2fe;
-  border-radius: 0.7rem;
+
+.waitlist-form input[type="email"] {
+  flex: 1;
+  padding: 0.875rem 1rem;
+  border: none;
+  border-radius: 0.75rem;
   font-size: 1rem;
+  background: rgba(255, 255, 255, 0.9);
+  color: #374151;
   outline: none;
-  color: #232946;
-  background: #f5f7ff;
-  transition: border 0.2s;
+  transition: all 0.3s ease;
 }
-.waitlist-input:focus {
-  border-color: #4338ca;
+
+.waitlist-form input[type="email"]:focus {
+  background: white;
+  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
 }
-.waitlist-btn {
-  padding: 0.5rem 1.1rem;
-  background: #4338ca;
-  color: #fff;
-  border: none;
-  border-radius: 0.7rem;
+
+.notify-btn {
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 0.75rem;
+  padding: 0.875rem 1.5rem;
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
-  transition: background 0.2s;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
 }
-.waitlist-btn:hover {
-  background: #6366f1;
+
+.notify-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+  border-color: rgba(255, 255, 255, 0.5);
+  transform: translateY(-1px);
 }
-.waitlist-success {
+
+.form-message {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
   margin-top: 0.5rem;
-  color: #16a34a;
-  background: #dcfce7;
-  border-radius: 0.7rem;
-  padding: 0.5rem 1rem;
-  font-size: 1rem;
+  padding: 0.75rem;
+  border-radius: 0.5rem;
   font-weight: 500;
-  text-align: center;
-  box-shadow: 0 1px 4px rgba(22,163,74,0.07);
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: all 0.3s ease;
+}
+
+.form-message.success {
+  background: rgba(34, 197, 94, 0.9);
+  color: white;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.form-message.error {
+  background: rgba(239, 68, 68, 0.9);
+  color: white;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Social Links */
+.social-links {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  margin-bottom: 2rem;
 }
-@media (max-width: 600px) {
-  html, body {
+
+.social-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  color: white;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+}
+
+.social-link:hover {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.4);
+  transform: translateY(-2px);
+}
+
+.copyright {
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap;
+  border: 0;
+  padding: 0;
+  margin: -1px;
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .container {
+    flex-direction: column;
+    height: 100vh;
     overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
   }
-  .card {
-    padding: 1.2rem 0.5rem 1.2rem 0.5rem;
-    max-width: 98vw;
-    border-radius: 1.2rem;
-    margin: 1.5rem 0.5rem 1.5rem 0.5rem;
-    box-sizing: border-box;
+
+  .left-side,
+  .right-side {
+    flex: none;
   }
-  .features ul {
-    grid-template-columns: 1fr;
+
+  .left-side {
+    min-height: 60vh;
+    padding: 1.5rem;
   }
-  .logo {
-    width: 48px;
-    height: 48px;
+
+  .right-side {
+    min-height: 40vh;
+    padding: 1.5rem;
   }
-  .project-name {
-    font-size: 1.4rem;
+
+  .brand {
+    font-size: 2.5rem;
   }
-  .tagline {
-    font-size: 1.1rem;
+
+  .coming-soon-title {
+    font-size: 2rem;
   }
-  .subtitle {
-    font-size: 0.95rem;
+
+  .countdown-timer {
+    gap: 1rem;
   }
-  .features h3 {
-    font-size: 1rem;
+
+  .time-value {
+    font-size: 2.5rem;
   }
-  .features li {
-    font-size: 0.95rem;
-    padding: 0.35rem 0.6rem;
+}
+
+@media (max-width: 768px) {
+  .left-side {
+    padding: 1rem;
+  }
+
+  .right-side {
+    padding: 1rem;
+  }
+
+  .feature-grid {
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
   }
-  .waitlist-row {
+
+  .footer-nav {
+    gap: 1rem;
+  }
+
+  .countdown-timer {
+    gap: 0.75rem;
+  }
+
+  .time-value {
+    font-size: 2rem;
+  }
+
+  .time-label {
+    font-size: 0.625rem;
+  }
+
+  .input-group {
     flex-direction: column;
-    gap: 0.4rem;
-    width: 100%;
+    gap: 0.75rem;
   }
-  .waitlist-input, .waitlist-btn {
+
+  .notify-btn {
     width: 100%;
-    box-sizing: border-box;
-    font-size: 1rem;
   }
-  .waitlist-label {
-    font-size: 0.98rem;
+}
+
+@media (max-width: 480px) {
+  .brand {
+    font-size: 2rem;
   }
-  .waitlist-success {
-    font-size: 0.98rem;
+
+  .coming-soon-title {
+    font-size: 1.75rem;
   }
-  .soc2-note {
-    font-size: 0.95rem;
-    padding: 0.45rem 0.7rem;
+
+  .logo {
+    width: 60px;
+    height: 60px;
   }
-  .credits {
-    font-size: 0.95rem;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    margin-top: 0.5rem;
+
+  .countdown-timer {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
   }
-  .footer {
-    font-size: 0.92rem;
-    padding: 0.7rem 0 0.5rem 0;
-    margin-bottom: 0.2rem;
+
+  .time-value {
+    font-size: 1.75rem;
   }
-} 
\ No newline at end of file
+}