diff --git a/login.php b/login.php
index cb6b6ff..a270858 100644
--- a/login.php
+++ b/login.php
@@ -41,68 +41,192 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login - My SaaS</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="assets/css/custom.css">
+    <title>Login - TAP2SKILL</title>
+    <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=Poppins:wght@400;600;700&family=Lato:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #2A9D8F;
+            --secondary-color: #E9C46A;
+            --background-color: #F4F4F4;
+            --surface-color: #FFFFFF;
+            --text-color: #264653;
+            --error-color: #e74c3c;
+            --success-color: #2ecc71;
+        }
+        body {
+            font-family: 'Lato', sans-serif;
+            margin: 0;
+            background-color: var(--background-color);
+            color: var(--text-color);
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 24px;
+        }
+        header {
+            background-color: var(--surface-color);
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            padding: 16px 0;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+        nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .logo {
+            font-family: 'Poppins', sans-serif;
+            font-size: 24px;
+            font-weight: 700;
+            color: var(--primary-color);
+            text-decoration: none;
+        }
+        nav ul {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            display: flex;
+        }
+        nav ul li {
+            margin-left: 32px;
+        }
+        nav ul li a {
+            text-decoration: none;
+            color: var(--text-color);
+            font-weight: 600;
+            transition: color 0.3s ease;
+        }
+        nav ul li a:hover {
+            color: var(--primary-color);
+        }
+        main {
+            flex-grow: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 80px 0;
+        }
+        .form-container {
+            background-color: var(--surface-color);
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            padding: 48px;
+            width: 100%;
+            max-width: 480px;
+        }
+        .form-title {
+            font-family: 'Poppins', sans-serif;
+            font-size: 32px;
+            text-align: center;
+            margin-bottom: 32px;
+        }
+        form input {
+            font-family: 'Lato', sans-serif;
+            padding: 16px;
+            margin-bottom: 16px;
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            font-size: 16px;
+            width: 100%;
+            box-sizing: border-box;
+        }
+        form button {
+            font-family: 'Poppins', sans-serif;
+            background-color: var(--primary-color);
+            color: white;
+            padding: 16px 32px;
+            border-radius: 8px;
+            border: none;
+            font-weight: 600;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+            width: 100%;
+            font-size: 16px;
+        }
+        form button:hover {
+            background-color: #228b80;
+        }
+        .alert-message {
+            color: white;
+            padding: 16px;
+            border-radius: 8px;
+            text-align: center;
+            margin-bottom: 16px;
+        }
+        .alert-message.error {
+            background-color: var(--error-color);
+        }
+        .alert-message.success {
+            background-color: var(--success-color);
+        }
+        .form-footer {
+            text-align: center;
+            margin-top: 24px;
+        }
+        .form-footer a {
+            color: var(--primary-color);
+            text-decoration: none;
+            font-weight: 600;
+        }
+        footer {
+            background-color: var(--text-color);
+            color: white;
+            text-align: center;
+            padding: 24px 0;
+        }
+    </style>
 </head>
 <body>
 
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
-    <div class="container">
-        <a class="navbar-brand" href="index.php">My SaaS</a>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarNav">
-            <ul class="navbar-nav ms-auto">
-                <li class="nav-item">
-                    <a class="nav-link" href="index.php">Home</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="register.php">Register</a>
-                </li>
+    <header>
+        <nav class="container">
+            <a href="index.php" class="logo">TAP2SKILL</a>
+            <ul>
+                <li><a href="index.php#about">About</a></li>
+                <li><a href="index.php#features">Features</a></li>
+                <li><a href="index.php#testimonials">Testimonials</a></li>
+                <li><a href="index.php#contact">Contact</a></li>
+                <li><a href="register.php">Register</a></li>
             </ul>
-        </div>
-    </div>
-</nav>
+        </nav>
+    </header>
 
-<div class="container mt-5">
-    <div class="row justify-content-center">
-        <div class="col-md-6">
-            <div class="card">
-                <div class="card-body">
-                    <h2 class="card-title text-center">Login</h2>
+    <main>
+        <div class="form-container">
+            <h2 class="form-title">Login</h2>
 
-                    <?php if (isset($_GET['registered'])): ?>
-                        <div class="alert alert-success">Registration successful! Please log in.</div>
-                    <?php endif; ?>
+            <?php if (isset($_GET['registered'])): ?>
+                <div class="alert-message success">Registration successful! Please log in.</div>
+            <?php endif; ?>
 
-                    <?php if ($error): ?>
-                        <div class="alert alert-danger"><?php echo htmlspecialchars($error); ?></div>
-                    <?php endif; ?>
+            <?php if ($error): ?>
+                <div class="alert-message error"><?php echo htmlspecialchars($error); ?></div>
+            <?php endif; ?>
 
-                    <form action="login.php" method="post">
-                        <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" class="btn btn-primary">Login</button>
-                        </div>
-                    </form>
-                </div>
-                <div class="card-footer text-center">
-                    <p>Don't have an account? <a href="register.php">Register here</a>.</p>
-                </div>
+            <form action="login.php" method="post">
+                <input type="email" name="email" placeholder="Email Address" required>
+                <input type="password" name="password" placeholder="Password" required>
+                <button type="submit">Login</button>
+            </form>
+            <div class="form-footer">
+                <p>Don't have an account? <a href="register.php">Register here</a>.</p>
             </div>
         </div>
-    </div>
-</div>
+    </main>
+
+    <footer>
+        <div class="container">
+            <p>&copy; 2025 TAP2SKILL. All Rights Reserved.</p>
+        </div>
+    </footer>
 
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/register.php b/register.php
index 2b251d7..d6eae0b 100644
--- a/register.php
+++ b/register.php
@@ -17,13 +17,11 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
         try {
             $pdo = db();
 
-            // Check for existing user
             $stmt = $pdo->prepare("SELECT * FROM users WHERE username = :username OR email = :email");
             $stmt->execute(['username' => $username, 'email' => $email]);
             if ($stmt->fetch()) {
                 $error = 'Username or email already exists.';
             } else {
-                // Insert new user
                 $hashed_password = password_hash($password, PASSWORD_DEFAULT);
                 $insert_stmt = $pdo->prepare("INSERT INTO users (username, email, password) VALUES (:username, :email, :password)");
                 $insert_stmt->execute([
@@ -46,68 +44,183 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Register - My SaaS</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="assets/css/custom.css">
+    <title>Register - TAP2SKILL</title>
+    <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=Poppins:wght@400;600;700&family=Lato:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #2A9D8F;
+            --secondary-color: #E9C46A;
+            --background-color: #F4F4F4;
+            --surface-color: #FFFFFF;
+            --text-color: #264653;
+            --error-color: #e74c3c;
+        }
+        body {
+            font-family: 'Lato', sans-serif;
+            margin: 0;
+            background-color: var(--background-color);
+            color: var(--text-color);
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 24px;
+        }
+        header {
+            background-color: var(--surface-color);
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            padding: 16px 0;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+        nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .logo {
+            font-family: 'Poppins', sans-serif;
+            font-size: 24px;
+            font-weight: 700;
+            color: var(--primary-color);
+            text-decoration: none;
+        }
+        nav ul {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            display: flex;
+        }
+        nav ul li {
+            margin-left: 32px;
+        }
+        nav ul li a {
+            text-decoration: none;
+            color: var(--text-color);
+            font-weight: 600;
+            transition: color 0.3s ease;
+        }
+        nav ul li a:hover {
+            color: var(--primary-color);
+        }
+        main {
+            flex-grow: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 80px 0;
+        }
+        .form-container {
+            background-color: var(--surface-color);
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            padding: 48px;
+            width: 100%;
+            max-width: 480px;
+        }
+        .form-title {
+            font-family: 'Poppins', sans-serif;
+            font-size: 32px;
+            text-align: center;
+            margin-bottom: 32px;
+        }
+        form input {
+            font-family: 'Lato', sans-serif;
+            padding: 16px;
+            margin-bottom: 16px;
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            font-size: 16px;
+            width: 100%;
+            box-sizing: border-box;
+        }
+        form button {
+            font-family: 'Poppins', sans-serif;
+            background-color: var(--primary-color);
+            color: white;
+            padding: 16px 32px;
+            border-radius: 8px;
+            border: none;
+            font-weight: 600;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+            width: 100%;
+            font-size: 16px;
+        }
+        form button:hover {
+            background-color: #228b80;
+        }
+        .error-message {
+            background-color: var(--error-color);
+            color: white;
+            padding: 16px;
+            border-radius: 8px;
+            text-align: center;
+            margin-bottom: 16px;
+        }
+        .form-footer {
+            text-align: center;
+            margin-top: 24px;
+        }
+        .form-footer a {
+            color: var(--primary-color);
+            text-decoration: none;
+            font-weight: 600;
+        }
+        footer {
+            background-color: var(--text-color);
+            color: white;
+            text-align: center;
+            padding: 24px 0;
+        }
+    </style>
 </head>
 <body>
 
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
-    <div class="container">
-        <a class="navbar-brand" href="index.php">My SaaS</a>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarNav">
-            <ul class="navbar-nav ms-auto">
-                <li class="nav-item">
-                    <a class="nav-link" href="index.php">Home</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="login.php">Login</a>
-                </li>
+    <header>
+        <nav class="container">
+            <a href="index.php" class="logo">TAP2SKILL</a>
+            <ul>
+                <li><a href="index.php#about">About</a></li>
+                <li><a href="index.php#features">Features</a></li>
+                <li><a href="index.php#testimonials">Testimonials</a></li>
+                <li><a href="index.php#contact">Contact</a></li>
+                <li><a href="login.php">Login</a></li>
             </ul>
-        </div>
-    </div>
-</nav>
+        </nav>
+    </header>
 
-<div class="container mt-5">
-    <div class="row justify-content-center">
-        <div class="col-md-6">
-            <div class="card">
-                <div class="card-body">
-                    <h2 class="card-title text-center">Create Account</h2>
-                    
-                    <?php if ($error): ?>
-                        <div class="alert alert-danger"><?php echo htmlspecialchars($error); ?></div>
-                    <?php endif; ?>
+    <main>
+        <div class="form-container">
+            <h2 class="form-title">Create Account</h2>
+            
+            <?php if ($error): ?>
+                <div class="error-message"><?php echo htmlspecialchars($error); ?></div>
+            <?php endif; ?>
 
-                    <form action="register.php" method="post">
-                        <div class="mb-3">
-                            <label for="username" class="form-label">Username</label>
-                            <input type="text" class="form-control" id="username" name="username" 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" class="btn btn-primary">Register</button>
-                        </div>
-                    </form>
-                </div>
-                <div class="card-footer text-center">
-                    <p>Already have an account? <a href="login.php">Login here</a>.</p>
-                </div>
+            <form action="register.php" method="post">
+                <input type="text" name="username" placeholder="Username" required>
+                <input type="email" name="email" placeholder="Email Address" required>
+                <input type="password" name="password" placeholder="Password" required>
+                <button type="submit">Register</button>
+            </form>
+            <div class="form-footer">
+                <p>Already have an account? <a href="login.php">Login here</a>.</p>
             </div>
         </div>
-    </div>
-</div>
+    </main>
+
+    <footer>
+        <div class="container">
+            <p>&copy; 2025 TAP2SKILL. All Rights Reserved.</p>
+        </div>
+    </footer>
 
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
