diff --git a/_auth.php b/_auth.php
new file mode 100644
index 0000000..deba92a
--- /dev/null
+++ b/_auth.php
@@ -0,0 +1,28 @@
+<?php
+session_start();
+
+// This is a simulation. In a real app, you'd validate against a database.
+function login($email) {
+    $_SESSION['user'] = ['email' => $email];
+    header('Location: index.php');
+    exit();
+}
+
+function logout() {
+    session_destroy();
+    header('Location: login.php');
+    exit();
+}
+
+function check_auth() {
+    if (!isset($_SESSION['user'])) {
+        header('Location: login.php');
+        exit();
+    }
+}
+
+
+
+if (isset($_GET['logout'])) {
+    logout();
+}
diff --git a/_partials/footer.php b/_partials/footer.php
new file mode 100644
index 0000000..142f3b9
--- /dev/null
+++ b/_partials/footer.php
@@ -0,0 +1,4 @@
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
+</body>
+</html>
diff --git a/_partials/header.php b/_partials/header.php
new file mode 100644
index 0000000..e1da3c0
--- /dev/null
+++ b/_partials/header.php
@@ -0,0 +1,20 @@
+<?php require_once __DIR__ . '/../_auth.php'; ?>
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Reachly</title>
+    <meta name="description" content="Built with Flatlogic Generator">
+    <meta name="keywords" content="user management, admin dashboard, crm, saas, project management, analytics, flatlogic generator, php application">
+    <meta property="og:title" content="Reachly">
+    <meta property="og:description" content="Built with Flatlogic Generator">
+    <meta property="og:image" content="">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:image" content="">
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+</head>
+<body>
diff --git a/_partials/sidebar.php b/_partials/sidebar.php
new file mode 100644
index 0000000..7316d46
--- /dev/null
+++ b/_partials/sidebar.php
@@ -0,0 +1,51 @@
+<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
+    <div class="sidebar-sticky pt-3">
+        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
+            <span>Menu</span>
+        </h6>
+        <ul class="nav flex-column">
+            <li class="nav-item">
+                <a class="nav-link active" aria-current="page" href="index.php">
+                    <i class="bi bi-house-door"></i>
+                    Dashboard
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">
+                    <i class="bi bi-people"></i>
+                    Users
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">
+                    <i class="bi bi-bar-chart"></i>
+                    Analytics
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">
+                    <i class="bi bi-send"></i>
+                    Campaigns
+                </a>
+            </li>
+        </ul>
+
+        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
+            <span>Account</span>
+        </h6>
+        <ul class="nav flex-column mb-2">
+            <li class="nav-item">
+                <a class="nav-link" href="#">
+                    <i class="bi bi-person-circle"></i>
+                    Profile
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="?logout=true">
+                    <i class="bi bi-box-arrow-right"></i>
+                    Sign out
+                </a>
+            </li>
+        </ul>
+    </div>
+</nav>
diff --git a/assets/css/custom.css b/assets/css/custom.css
new file mode 100644
index 0000000..e48ce5a
--- /dev/null
+++ b/assets/css/custom.css
@@ -0,0 +1,62 @@
+body {
+    background-color: #f8f9fa;
+}
+
+.auth-card {
+    max-width: 450px;
+    margin: 5rem auto;
+}
+
+.sidebar {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 100;
+    padding: 48px 0 0;
+    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+}
+
+.sidebar-sticky {
+    position: relative;
+    top: 0;
+    height: calc(100vh - 48px);
+    padding-top: .5rem;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.main-content {
+    margin-left: 240px;
+}
+
+.navbar-brand {
+    padding-top: .75rem;
+    padding-bottom: .75rem;
+    font-size: 1rem;
+    background-color: rgba(0, 0, 0, .25);
+    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
+}
+
+.navbar .form-control {
+    padding: .75rem 1rem;
+    border-width: 0;
+    border-radius: 0;
+}
+
+@media (max-width: 767.98px) {
+    .main-content {
+        margin-left: 0;
+    }
+    .sidebar {
+        width: 100%;
+        height: auto;
+        position: relative;
+        box-shadow: none;
+        padding-top: 0;
+    }
+    .sidebar-sticky {
+        height: auto;
+        padding-top: 0;
+    }
+}
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..b9c977a
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1 @@
+// Add any custom JS here in the future
diff --git a/index.php b/index.php
index 7205f3d..e1e0e9f 100644
--- a/index.php
+++ b/index.php
@@ -1,150 +1,54 @@
 <?php
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
+require_once '_partials/header.php';
+check_auth();
+?>
 
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
-?>
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
-<?php
-// Read project preview data from environment
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
-?>
-<?php if ($projectDescription): ?>
-  <!-- Meta description -->
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
-  <!-- Open Graph meta tags -->
-  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-  <!-- Twitter meta tags -->
-  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-<?php endif; ?>
-<?php if ($projectImageUrl): ?>
-  <!-- Open Graph image -->
-  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-  <!-- Twitter image -->
-  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-<?php endif; ?>
-  <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;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --bg-color-start: #6a11cb;
-      --bg-color-end: #2575fc;
-      --text-color: #ffffff;
-      --card-bg-color: rgba(255, 255, 255, 0.01);
-      --card-border-color: rgba(255, 255, 255, 0.1);
-    }
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
-</head>
-<body>
-  <main>
-    <div class="card">
-      <h1>Analyzing your requirements and generating your website…</h1>
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-        <span class="sr-only">Loading…</span>
-      </div>
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
+<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
+    <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">Reachly</a>
+    <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    <input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search">
+    <div class="navbar-nav">
+        <div class="nav-item text-nowrap">
+            <a class="nav-link px-3" href="?logout=true">Sign out</a>
+        </div>
     </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
-</body>
-</html>
+</header>
+
+<div class="container-fluid">
+    <div class="row">
+        <?php require_once '_partials/sidebar.php'; ?>
+
+        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 main-content">
+            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+                <h1 class="h2">Dashboard</h1>
+                <div class="btn-toolbar mb-2 mb-md-0">
+                    <div class="btn-group me-2">
+                        <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
+                        <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
+                    </div>
+                    <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
+                        <i class="bi bi-calendar3"></i>
+                        This week
+                    </button>
+                </div>
+            </div>
+
+            <div class="alert alert-success" role="alert">
+                Welcome to your application! This is a visual prototype.
+            </div>
+
+            <div class="row">
+                <div class="col-md-12">
+                    <h2>Welcome, <?php echo htmlspecialchars($_SESSION['user']['email']); ?>!</h2>
+                    <p>This is the main dashboard area. You can customize this page with your application's content, such as charts, tables, and other components.</p>
+                    <p>The navigation on the left provides the structure for your application, and the pages are currently placeholders. In the next steps, we will build out the functionality for user management, analytics, and campaigns.</p>
+                </div>
+            </div>
+
+        </main>
+    </div>
+</div>
+
+<?php require_once '_partials/footer.php'; ?>
\ No newline at end of file
diff --git a/login.php b/login.php
new file mode 100644
index 0000000..a083c2b
--- /dev/null
+++ b/login.php
@@ -0,0 +1,43 @@
+<?php
+require_once '_auth.php';
+
+// Handle login submission
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['login'])) {
+    login($_POST['email']);
+}
+
+require_once '_partials/header.php';
+?>
+
+<div class="container">
+    <div class="card auth-card">
+        <div class="card-body p-5">
+            <h3 class="card-title text-center mb-4">Sign In</h3>
+            <form method="POST" action="login.php">
+                <div class="mb-3">
+                    <label for="email" class="form-label">Email address</label>
+                    <input type="email" class="form-control" id="email" name="email" required>
+                </div>
+                <div class="mb-3">
+                    <label for="password" class="form-label">Password</label>
+                    <input type="password" class="form-control" id="password" name="password" required>
+                </div>
+                <div class="d-flex justify-content-between align-items-center mb-3">
+                    <div class="form-check">
+                        <input type="checkbox" class="form-check-input" id="rememberMe">
+                        <label class="form-check-label" for="rememberMe">Remember me</label>
+                    </div>
+                    <a href="#" class="form-text">Forgot password?</a>
+                </div>
+                <div class="d-grid">
+                    <button type="submit" name="login" class="btn btn-primary">Sign In</button>
+                </div>
+            </form>
+            <p class="text-center mt-4 form-text">
+                Don't have an account? <a href="signup.php">Sign up</a>
+            </p>
+        </div>
+    </div>
+</div>
+
+<?php require_once '_partials/footer.php'; ?>
diff --git a/signup.php b/signup.php
new file mode 100644
index 0000000..f167e1f
--- /dev/null
+++ b/signup.php
@@ -0,0 +1,40 @@
+<?php
+require_once '_auth.php';
+
+// Handle signup submission
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['signup'])) {
+    login($_POST['email']);
+}
+
+require_once '_partials/header.php';
+?>
+
+<div class="container">
+    <div class="card auth-card">
+        <div class="card-body p-5">
+            <h3 class="card-title text-center mb-4">Create Account</h3>
+            <form method="POST" action="signup.php">
+                <div class="mb-3">
+                    <label for="name" class="form-label">Full Name</label>
+                    <input type="text" class="form-control" id="name" name="name" required>
+                </div>
+                <div class="mb-3">
+                    <label for="email" class="form-label">Email address</label>
+                    <input type="email" class="form-control" id="email" name="email" required>
+                </div>
+                <div class="mb-3">
+                    <label for="password" class="form-label">Password</label>
+                    <input type="password" class="form-control" id="password" name="password" required>
+                </div>
+                <div class="d-grid">
+                    <button type="submit" name="signup" class="btn btn-primary">Sign Up</button>
+                </div>
+            </form>
+            <p class="text-center mt-4 form-text">
+                Already have an account? <a href="login.php">Sign in</a>
+            </p>
+        </div>
+    </div>
+</div>
+
+<?php require_once '_partials/footer.php'; ?>
