diff --git a/WORKFLOW.md b/WORKFLOW.md
new file mode 100644
index 0000000..2cd49f6
--- /dev/null
+++ b/WORKFLOW.md
@@ -0,0 +1,121 @@
+# Website File Management Workflow
+
+## 📁 Directory Structure
+
+```
+/media/pts/Website/SkyArtShop/          ← Your git repository (EDIT HERE)
+├── website/
+│   ├── public/          ← Public website files (shop.html, home.html, etc.)
+│   ├── admin/           ← Admin panel files
+│   └── assets/          ← CSS, JS, images
+├── backend/             ← Node.js backend server
+├── deploy-website.sh    ← Deployment script
+└── local-commit.sh      ← Git commit helper
+
+/var/www/skyartshop/                    ← Live website (DEPLOYED TO)
+├── public/
+├── admin/
+└── assets/
+```
+
+## ✅ How to Edit Website Files
+
+### 1. Edit files in the git repository:
+```bash
+cd /media/pts/Website/SkyArtShop/website/
+```
+
+Open any file:
+- `website/public/shop.html`
+- `website/public/home.html`
+- `website/admin/dashboard.html`
+- `website/assets/css/main.css`
+- etc.
+
+### 2. Deploy your changes:
+```bash
+cd /media/pts/Website/SkyArtShop
+./deploy-website.sh
+```
+
+This will copy your files to `/var/www/skyartshop/` and make them live!
+
+### 3. Commit your changes to git:
+```bash
+./local-commit.sh
+# Or manually:
+git add .
+git commit -m "Updated shop page"
+```
+
+## 🚀 Quick Workflow Example
+
+```bash
+# 1. Navigate to repository
+cd /media/pts/Website/SkyArtShop
+
+# 2. Edit a file (use VS Code or any editor)
+code website/public/shop.html
+
+# 3. Deploy the changes
+./deploy-website.sh
+
+# 4. Test in browser
+# Visit: https://skyarts.ddns.net
+
+# 5. If it looks good, commit
+./local-commit.sh
+```
+
+## 📝 Important Rules
+
+✅ **DO:**
+- Edit files in `/media/pts/Website/SkyArtShop/website/`
+- Run `./deploy-website.sh` after making changes
+- Commit your work regularly with `./local-commit.sh`
+
+❌ **DON'T:**
+- Edit files directly in `/var/www/skyartshop/` (they'll be overwritten on next deploy)
+- Forget to deploy after editing
+- Forget to commit your changes
+
+## 🔄 Deployment Script Details
+
+**What it does:**
+1. Copies files from `website/` → `/var/www/skyartshop/`
+2. Sets proper permissions
+3. Keeps your changes safe in git
+
+**When to run it:**
+- After editing any HTML, CSS, or JS files
+- When you want to see your changes live
+- Before committing (to ensure everything works)
+
+## 💡 Tips
+
+- **Always work in**: `/media/pts/Website/SkyArtShop/website/`
+- **VS Code workspace**: Open `/media/pts/Website/SkyArtShop/` as your workspace
+- **Test locally**: Make changes → Deploy → Test → Commit
+- **Version control**: All changes are tracked in git (locally only, no GitHub sync)
+
+## 🆘 If You Get File Save Errors in VS Code
+
+If VS Code shows "Unable to save" or asks to overwrite:
+
+1. **Close the file** without saving
+2. **Open the file from the correct location**: `/media/pts/Website/SkyArtShop/website/public/shop.html`
+3. Make your edits
+4. Save normally
+5. Run `./deploy-website.sh` to push to live site
+
+## 📍 Current Setup
+
+- **Git Repository**: `/media/pts/Website/SkyArtShop/` (branch: pts/updateweb)
+- **Live Website**: `/var/www/skyartshop/`
+- **Backend Server**: Running on port 5000 (managed by PM2)
+- **Website URL**: https://skyarts.ddns.net
+- **Admin URL**: https://skyarts.ddns.net/admin
+
+---
+
+**Remember:** Edit in git repo → Deploy → Test → Commit
diff --git a/deploy-website.sh b/deploy-website.sh
new file mode 100755
index 0000000..bd31605
--- /dev/null
+++ b/deploy-website.sh
@@ -0,0 +1,82 @@
+#!/bin/bash
+# Website Deployment Script
+# Syncs files from git repository to /var/www/skyartshop/
+
+set -e  # Exit on error
+
+REPO_DIR="/media/pts/Website/SkyArtShop"
+DEPLOY_DIR="/var/www/skyartshop"
+
+echo "========================================="
+echo "  SkyArtShop Website Deployment"
+echo "========================================="
+echo ""
+echo "📁 Repository: $REPO_DIR"
+echo "🌐 Deploy to:  $DEPLOY_DIR"
+echo ""
+
+# Check if we're in the repo directory
+if [ ! -d "$REPO_DIR/.git" ]; then
+    echo "❌ Error: Not in git repository"
+    exit 1
+fi
+
+cd "$REPO_DIR"
+
+# Show current branch
+CURRENT_BRANCH=$(git branch --show-current)
+echo "🔀 Current branch: $CURRENT_BRANCH"
+echo ""
+
+# Copy/sync website files
+echo "📦 Deploying website files..."
+
+# Create website directory structure in repo if it doesn't exist
+mkdir -p website/public
+mkdir -p website/admin
+mkdir -p website/assets
+mkdir -p website/uploads
+
+# Copy current live files to repo for version control (first time setup)
+if [ ! -f "website/public/shop.html" ]; then
+    echo "📥 First time setup - copying live files to repository..."
+    cp -r $DEPLOY_DIR/public/* website/public/ 2>/dev/null || true
+    cp -r $DEPLOY_DIR/admin/* website/admin/ 2>/dev/null || true
+    cp -r $DEPLOY_DIR/assets/* website/assets/ 2>/dev/null || true
+    echo "✅ Files copied to repository"
+    echo ""
+    echo "⚠️  Please commit these files to git:"
+    echo "   git add website/"
+    echo "   git commit -m 'Add website files to repository'"
+    echo ""
+fi
+
+# Deploy from repository to live site
+echo "🚀 Deploying to live site..."
+
+# Sync public files
+rsync -av --delete website/public/ $DEPLOY_DIR/public/ 2>/dev/null || cp -r website/public/* $DEPLOY_DIR/public/
+
+# Sync admin files
+rsync -av --delete website/admin/ $DEPLOY_DIR/admin/ 2>/dev/null || cp -r website/admin/* $DEPLOY_DIR/admin/
+
+# Sync assets (but don't delete to preserve any user uploads)
+rsync -av website/assets/ $DEPLOY_DIR/assets/ 2>/dev/null || cp -r website/assets/* $DEPLOY_DIR/assets/
+
+# Fix permissions
+chown -R pts:pts $DEPLOY_DIR/public $DEPLOY_DIR/admin $DEPLOY_DIR/assets 2>/dev/null || true
+chmod -R 644 $DEPLOY_DIR/public/*.html $DEPLOY_DIR/admin/*.html 2>/dev/null || true
+
+echo ""
+echo "========================================="
+echo "✅ Deployment Complete!"
+echo "========================================="
+echo ""
+echo "🌐 Website: https://skyarts.ddns.net"
+echo "🔐 Admin:   https://skyarts.ddns.net/admin"
+echo ""
+echo "📝 Next steps:"
+echo "   1. Edit files in: $REPO_DIR/website/"
+echo "   2. Run this script to deploy"
+echo "   3. Commit changes: git add . && git commit -m 'Update website'"
+echo ""
diff --git a/website/admin/dashboard.html b/website/admin/dashboard.html
new file mode 100644
index 0000000..bc6b7b0
--- /dev/null
+++ b/website/admin/dashboard.html
@@ -0,0 +1,334 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Admin Dashboard - Sky Art Shop</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/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"
+    />
+    <style>
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          "Helvetica Neue", Arial, sans-serif;
+        background-color: #f8f9fa;
+      }
+      .sidebar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100vh;
+        width: 250px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        padding: 20px;
+        color: white;
+        overflow-y: auto;
+      }
+      .sidebar-brand {
+        font-size: 1.5rem;
+        font-weight: 700;
+        margin-bottom: 30px;
+        text-align: center;
+      }
+      .sidebar-menu {
+        list-style: none;
+        padding: 0;
+      }
+      .sidebar-menu li {
+        margin-bottom: 10px;
+      }
+      .sidebar-menu a {
+        color: white;
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+        padding: 12px 15px;
+        border-radius: 8px;
+        transition: background 0.3s;
+      }
+      .sidebar-menu a:hover,
+      .sidebar-menu a.active {
+        background: rgba(255, 255, 255, 0.2);
+      }
+      .sidebar-menu i {
+        margin-right: 10px;
+        font-size: 1.2rem;
+      }
+      .main-content {
+        margin-left: 250px;
+        padding: 30px;
+      }
+      .top-bar {
+        background: white;
+        padding: 20px;
+        border-radius: 10px;
+        margin-bottom: 30px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .stat-card {
+        background: white;
+        border-radius: 10px;
+        padding: 25px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        transition: transform 0.2s;
+        cursor: pointer;
+        text-decoration: none;
+        color: inherit;
+        display: block;
+      }
+      .stat-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+      }
+      .stat-card h6 {
+        color: #6c757d;
+        margin-bottom: 10px;
+      }
+      .stat-card h2 {
+        color: #2c3e50;
+        margin: 0;
+      }
+      .stat-link {
+        color: #667eea;
+        font-size: 0.9rem;
+        margin-top: 10px;
+        display: inline-block;
+      }
+      .action-card {
+        background: white;
+        border-radius: 10px;
+        padding: 30px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        text-align: center;
+        transition: transform 0.2s;
+        cursor: pointer;
+      }
+      .action-card:hover {
+        transform: translateY(-5px);
+      }
+      .action-card i {
+        font-size: 3rem;
+        margin-bottom: 15px;
+      }
+      .btn-view-site {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border: none;
+        padding: 10px 25px;
+        border-radius: 8px;
+        text-decoration: none;
+        display: inline-block;
+      }
+      .btn-logout {
+        background: #dc3545;
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 8px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Sidebar -->
+    <div class="sidebar">
+      <div class="sidebar-brand">🛍️ Sky Art Shop</div>
+      <ul class="sidebar-menu">
+        <li>
+          <a href="/admin/dashboard.html" class="active"
+            ><i class="bi bi-speedometer2"></i> Dashboard</a
+          >
+        </li>
+        <li>
+          <a href="/admin/homepage.html"
+            ><i class="bi bi-house"></i> Homepage Editor</a
+          >
+        </li>
+        <li>
+          <a href="/admin/products.html"><i class="bi bi-box"></i> Products</a>
+        </li>
+        <li>
+          <a href="/admin/portfolio.html"
+            ><i class="bi bi-easel"></i> Portfolio</a
+          >
+        </li>
+        <li>
+          <a href="/admin/blog.html"><i class="bi bi-newspaper"></i> Blog</a>
+        </li>
+        <li>
+          <a href="/admin/pages.html"><i class="bi bi-file-text"></i> Pages</a>
+        </li>
+        <li>
+          <a href="/admin/menu.html"><i class="bi bi-list"></i> Menu</a>
+        </li>
+        <li>
+          <a href="/admin/settings.html"><i class="bi bi-gear"></i> Settings</a>
+        </li>
+        <li>
+          <a href="/admin/users.html"><i class="bi bi-people"></i> Users</a>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Main Content -->
+    <div class="main-content">
+      <!-- Top Bar -->
+      <div class="top-bar">
+        <div>
+          <h3>Welcome, <span id="userName">Admin</span></h3>
+          <p class="mb-0 text-muted">Manage your online shop</p>
+        </div>
+        <div>
+          <a href="/index.html" target="_blank" class="btn-view-site me-2"
+            ><i class="bi bi-eye"></i> View Site</a
+          >
+          <button class="btn-logout" onclick="logout()">
+            <i class="bi bi-box-arrow-right"></i> Logout
+          </button>
+        </div>
+      </div>
+
+      <!-- Stats Cards -->
+      <div class="row">
+        <div class="col-md-3 mb-4">
+          <a href="/admin/products.html" class="stat-card">
+            <h6>Total Products</h6>
+            <h2 id="productCount">-</h2>
+            <span class="stat-link">Manage →</span>
+          </a>
+        </div>
+        <div class="col-md-3 mb-4">
+          <a href="/admin/portfolio.html" class="stat-card">
+            <h6>Portfolio Projects</h6>
+            <h2 id="projectCount">-</h2>
+            <span class="stat-link">Manage →</span>
+          </a>
+        </div>
+        <div class="col-md-3 mb-4">
+          <a href="/admin/blog.html" class="stat-card">
+            <h6>Blog Posts</h6>
+            <h2 id="blogCount">-</h2>
+            <span class="stat-link">Manage →</span>
+          </a>
+        </div>
+        <div class="col-md-3 mb-4">
+          <a href="/admin/pages.html" class="stat-card">
+            <h6>Custom Pages</h6>
+            <h2 id="pageCount">-</h2>
+            <span class="stat-link">Manage →</span>
+          </a>
+        </div>
+      </div>
+
+      <!-- Quick Actions -->
+      <h4 class="mt-5 mb-4">Quick Actions</h4>
+      <div class="row">
+        <div class="col-md-3 mb-4">
+          <a href="/admin/homepage.html" class="text-decoration-none">
+            <div class="action-card">
+              <i class="bi bi-house-fill text-success"></i>
+              <h6>Homepage Editor</h6>
+            </div>
+          </a>
+        </div>
+        <div class="col-md-3 mb-4">
+          <a
+            href="/admin/products.html?action=create"
+            class="text-decoration-none"
+          >
+            <div class="action-card">
+              <i class="bi bi-plus-circle text-primary"></i>
+              <h6>Add New Product</h6>
+            </div>
+          </a>
+        </div>
+        <div class="col-md-3 mb-4">
+          <a href="/admin/blog.html?action=create" class="text-decoration-none">
+            <div class="action-card">
+              <i class="bi bi-plus-circle text-info"></i>
+              <h6>Create Blog Post</h6>
+            </div>
+          </a>
+        </div>
+        <div class="col-md-3 mb-4">
+          <a
+            href="/admin/portfolio.html?action=create"
+            class="text-decoration-none"
+          >
+            <div class="action-card">
+              <i class="bi bi-plus-circle text-warning"></i>
+              <h6>Add Portfolio Project</h6>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+      // Check authentication
+      async function checkAuth() {
+        try {
+          const response = await fetch("/api/admin/session");
+              credentials: "include",
+          if (!response.ok) {
+            window.location.href = "/admin/login.html";
+            return;
+          }
+          const data = await response.json();
+          if (!data.authenticated) {
+            window.location.href = "/admin/login.html";
+            return;
+          }
+          document.getElementById("userName").textContent =
+            data.user.name || data.user.email;
+          loadDashboardStats();
+        } catch (error) {
+          window.location.href = "/admin/login.html";
+        }
+      }
+
+      // Load dashboard statistics
+      async function loadDashboardStats() {
+        try {
+          const response = await fetch("/api/admin/dashboard/stats");
+              credentials: "include",
+          const data = await response.json();
+          if (data.success) {
+            document.getElementById("productCount").textContent =
+              data.stats.products;
+            document.getElementById("projectCount").textContent =
+              data.stats.projects;
+            document.getElementById("blogCount").textContent = data.stats.blog;
+            document.getElementById("pageCount").textContent = data.stats.pages;
+          }
+        } catch (error) {
+          console.error("Failed to load stats:", error);
+        }
+      }
+
+      // Logout function
+      async function logout() {
+        try {
+          const response = await fetch("/api/admin/logout", { method: "POST" });
+              credentials: "include",
+          if (response.ok) {
+            window.location.href = "/admin/login.html";
+          }
+        } catch (error) {
+          console.error("Logout failed:", error);
+        }
+      }
+
+      // Initialize
+      checkAuth();
+    </script>
+  </body>
+</html>
diff --git a/website/admin/login.html b/website/admin/login.html
new file mode 100644
index 0000000..a64fc4f
--- /dev/null
+++ b/website/admin/login.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Admin Login - Sky Art Shop</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
+    <style>
+      body {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          "Helvetica Neue", Arial, sans-serif;
+      }
+      .login-card {
+        background: white;
+        border-radius: 16px;
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+        padding: 40px;
+        max-width: 400px;
+        width: 100%;
+      }
+      .login-header {
+        text-align: center;
+        margin-bottom: 30px;
+      }
+      .login-header h1 {
+        color: #2c3e50;
+        font-size: 28px;
+        margin-bottom: 10px;
+      }
+      .login-header p {
+        color: #7f8c8d;
+        margin: 0;
+      }
+      .form-control {
+        border-radius: 8px;
+        padding: 12px;
+        border: 2px solid #e0e0e0;
+      }
+      .form-control:focus {
+        border-color: #667eea;
+        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
+      }
+      .btn-login {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border: none;
+        border-radius: 8px;
+        padding: 12px;
+        color: white;
+        font-weight: 600;
+        width: 100%;
+        transition: transform 0.2s;
+      }
+      .btn-login:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+      }
+      .btn-login:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+      .alert {
+        border-radius: 8px;
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="login-card">
+      <div class="login-header">
+        <h1>🛍️ Sky Art Shop</h1>
+        <p>Admin Panel Login</p>
+      </div>
+
+      <div class="alert alert-danger" role="alert" id="errorAlert"></div>
+
+      <form id="loginForm">
+        <div class="mb-3">
+          <label for="email" class="form-label">Email Address</label>
+          <input
+            type="email"
+            class="form-control"
+            id="email"
+            name="email"
+            required
+            placeholder="admin@example.com"
+            autocomplete="username"
+          />
+        </div>
+        <div class="mb-4">
+          <label for="password" class="form-label">Password</label>
+          <input
+            type="password"
+            class="form-control"
+            id="password"
+            name="password"
+            required
+            placeholder="Enter your password"
+            autocomplete="current-password"
+          />
+        </div>
+        <button type="submit" class="btn btn-login" id="loginBtn">Sign In</button>
+      </form>
+
+      <div class="text-center mt-4">
+        <a
+          href="/home.html"
+          class="text-decoration-none"
+          style="color: #667eea"
+          >← Back to Website</a
+        >
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+      document
+        .getElementById("loginForm")
+        .addEventListener("submit", async function (e) {
+          e.preventDefault();
+
+          const email = document.getElementById("email").value;
+          const password = document.getElementById("password").value;
+          const errorAlert = document.getElementById("errorAlert");
+          const loginBtn = document.getElementById("loginBtn");
+
+          // Disable button during login
+          loginBtn.disabled = true;
+          loginBtn.textContent = "Signing in...";
+          errorAlert.style.display = "none";
+
+          try {
+            const response = await fetch("/api/admin/login", {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              credentials: "include",
+              body: JSON.stringify({ email, password }),
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+              // Login successful - redirect to dashboard
+              window.location.href = "/admin/dashboard.html";
+            } else {
+              // Show error
+              errorAlert.textContent = data.message || "Invalid credentials";
+              errorAlert.style.display = "block";
+              loginBtn.disabled = false;
+              loginBtn.textContent = "Sign In";
+            }
+          } catch (error) {
+            console.error("Login error:", error);
+            errorAlert.textContent = "Login failed. Please try again.";
+            errorAlert.style.display = "block";
+            loginBtn.disabled = false;
+            loginBtn.textContent = "Sign In";
+          }
+        });
+    </script>
+  </body>
+</html>
diff --git a/website/admin/login.html.bak b/website/admin/login.html.bak
new file mode 100644
index 0000000..42b10cf
--- /dev/null
+++ b/website/admin/login.html.bak
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Admin Login - Sky Art Shop</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
+    <style>
+      body {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          "Helvetica Neue", Arial, sans-serif;
+      }
+      .login-card {
+        background: white;
+        border-radius: 16px;
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+        padding: 40px;
+        max-width: 400px;
+        width: 100%;
+      }
+      .login-header {
+        text-align: center;
+        margin-bottom: 30px;
+      }
+      .login-header h1 {
+        color: #2c3e50;
+        font-size: 28px;
+        margin-bottom: 10px;
+      }
+      .login-header p {
+        color: #7f8c8d;
+        margin: 0;
+      }
+      .form-control {
+        border-radius: 8px;
+        padding: 12px;
+        border: 2px solid #e0e0e0;
+      }
+      .form-control:focus {
+        border-color: #667eea;
+        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
+      }
+      .btn-login {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border: none;
+        border-radius: 8px;
+        padding: 12px;
+        color: white;
+        font-weight: 600;
+        width: 100%;
+        transition: transform 0.2s;
+      }
+      .btn-login:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+      }
+      .alert {
+        border-radius: 8px;
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="login-card">
+      <div class="login-header">
+        <h1>🛍️ Sky Art Shop</h1>
+        <p>Admin Panel Login</p>
+      </div>
+
+      <div class="alert alert-danger" role="alert" id="errorAlert"></div>
+
+      <form id="loginForm">
+        <div class="mb-3">
+          <label for="email" class="form-label">Email Address</label>
+          <input
+            type="email"
+            class="form-control"
+            id="email"
+            name="email"
+            required
+            placeholder="admin@skyartshop.com"
+          />
+        </div>
+        <div class="mb-4">
+          <label for="password" class="form-label">Password</label>
+          <input
+            type="password"
+            class="form-control"
+            id="password"
+            name="password"
+            required
+            placeholder="Enter your password"
+          />
+        </div>
+        <button type="submit" class="btn btn-login">Sign In</button>
+      </form>
+
+      <div class="text-center mt-4">
+        <a
+          href="/index.html"
+          class="text-decoration-none"
+          style="color: #667eea"
+          >← Back to Website</a
+        >
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+      document
+        .getElementById("loginForm")
+        .addEventListener("submit", async function (e) {
+          e.preventDefault();
+
+          const email = document.getElementById("email").value;
+          const password = document.getElementById("password").value;
+          const errorAlert = document.getElementById("errorAlert");
+
+          try {
+            const response = await fetch("/api/admin/login", {
+              credentials: "include",
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              credentials: "include",
+              body: JSON.stringify({ email, password }),
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+              window.location.href = "/admin/dashboard.html";
+            } else {
+              errorAlert.textContent = data.message || "Invalid credentials";
+              errorAlert.style.display = "block";
+            }
+          } catch (error) {
+            errorAlert.textContent = "Login failed. Please try again.";
+            errorAlert.style.display = "block";
+          }
+        });
+    </script>
+  </body>
+</html>
diff --git a/website/admin/users.html b/website/admin/users.html
new file mode 100644
index 0000000..0b792a1
--- /dev/null
+++ b/website/admin/users.html
@@ -0,0 +1,647 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>User Management - Sky Art Shop Admin</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=Roboto:wght@300;400;500;600;700&display=swap" 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/main.css" />
+  <style>
+    body {
+      font-family: 'Roboto', sans-serif;
+      background: #f5f7fa;
+      margin: 0;
+      padding: 0;
+    }
+    .admin-header {
+      background: white;
+      padding: 16px 32px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .admin-header h1 {
+      margin: 0;
+      font-size: 24px;
+      color: #1a1a1a;
+    }
+    .container {
+      max-width: 1400px;
+      margin: 32px auto;
+      padding: 0 32px;
+    }
+    .action-bar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 24px;
+    }
+    .btn {
+      padding: 10px 20px;
+      border: none;
+      border-radius: 6px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s;
+      text-decoration: none;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .btn-primary {
+      background: #6b46c1;
+      color: white;
+    }
+    .btn-primary:hover {
+      background: #5936a3;
+    }
+    .btn-secondary {
+      background: #e5e7eb;
+      color: #374151;
+    }
+    .btn-secondary:hover {
+      background: #d1d5db;
+    }
+    .btn-danger {
+      background: #dc2626;
+      color: white;
+    }
+    .btn-danger:hover {
+      background: #b91c1c;
+    }
+    .btn-success {
+      background: #10b981;
+      color: white;
+    }
+    .btn-success:hover {
+      background: #059669;
+    }
+    .users-table {
+      background: white;
+      border-radius: 8px;
+      overflow: hidden;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+    thead {
+      background: #f9fafb;
+    }
+    th {
+      padding: 16px;
+      text-align: left;
+      font-weight: 600;
+      color: #6b7280;
+      font-size: 13px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    td {
+      padding: 16px;
+      border-top: 1px solid #e5e7eb;
+      color: #374151;
+    }
+    tbody tr:hover {
+      background: #f9fafb;
+    }
+    .status-badge {
+      display: inline-block;
+      padding: 4px 12px;
+      border-radius: 12px;
+      font-size: 12px;
+      font-weight: 600;
+    }
+    .status-active {
+      background: #d1fae5;
+      color: #065f46;
+    }
+    .status-inactive {
+      background: #fee2e2;
+      color: #991b1b;
+    }
+    .role-badge {
+      display: inline-block;
+      padding: 4px 12px;
+      border-radius: 6px;
+      font-size: 13px;
+      font-weight: 500;
+      background: #e0e7ff;
+      color: #3730a3;
+    }
+    .btn-group {
+      display: flex;
+      gap: 8px;
+    }
+    .btn-icon {
+      width: 32px;
+      height: 32px;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 6px;
+      font-size: 16px;
+    }
+    .modal {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0,0,0,0.5);
+      z-index: 1000;
+      align-items: center;
+      justify-content: center;
+    }
+    .modal.active {
+      display: flex;
+    }
+    .modal-content {
+      background: white;
+      border-radius: 12px;
+      padding: 32px;
+      max-width: 500px;
+      width: 90%;
+      max-height: 90vh;
+      overflow-y: auto;
+    }
+    .modal-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 24px;
+    }
+    .modal-header h2 {
+      margin: 0;
+      font-size: 24px;
+      color: #1a1a1a;
+    }
+    .form-group {
+      margin-bottom: 20px;
+    }
+    .form-group label {
+      display: block;
+      margin-bottom: 8px;
+      font-weight: 500;
+      color: #374151;
+    }
+    .form-group input,
+    .form-group select {
+      width: 100%;
+      padding: 10px 14px;
+      border: 1px solid #d1d5db;
+      border-radius: 6px;
+      font-size: 14px;
+      font-family: 'Roboto', sans-serif;
+    }
+    .form-group input:focus,
+    .form-group select:focus {
+      outline: none;
+      border-color: #6b46c1;
+      box-shadow: 0 0 0 3px rgba(107, 70, 193, 0.1);
+    }
+    .checkbox-group {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .checkbox-group input[type="checkbox"] {
+      width: auto;
+    }
+    .alert {
+      padding: 12px 16px;
+      border-radius: 6px;
+      margin-bottom: 20px;
+      display: none;
+    }
+    .alert.active {
+      display: block;
+    }
+    .alert-success {
+      background: #d1fae5;
+      color: #065f46;
+    }
+    .alert-error {
+      background: #fee2e2;
+      color: #991b1b;
+    }
+  </style>
+</head>
+<body>
+  <div class="admin-header">
+    <h1><i class="bi bi-people"></i> User Management</h1>
+    <a href="/admin/dashboard.html" class="btn btn-secondary">
+      <i class="bi bi-arrow-left"></i> Back to Dashboard
+    </a>
+  </div>
+
+  <div class="container">
+    <div class="action-bar">
+      <h2 style="margin: 0; font-size: 20px; color: #374151;">All Users</h2>
+      <button class="btn btn-primary" onclick="openCreateUserModal()">
+        <i class="bi bi-person-plus"></i> Create New User
+      </button>
+    </div>
+
+    <div id="alert" class="alert"></div>
+
+    <div class="users-table">
+      <table>
+        <thead>
+          <tr>
+            <th>Username</th>
+            <th>Email</th>
+            <th>Role</th>
+            <th>Status</th>
+            <th>Last Login</th>
+            <th>Password</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody id="usersTableBody">
+          <tr>
+            <td colspan="7" style="text-align: center; padding: 40px;">
+              Loading users...
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <!-- Create/Edit User Modal -->
+  <div id="userModal" class="modal">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2 id="modalTitle">Create New User</h2>
+        <button class="btn-icon btn-secondary" onclick="closeUserModal()">
+          <i class="bi bi-x-lg"></i>
+        </button>
+      </div>
+      <form id="userForm">
+        <input type="hidden" id="userId" />
+        <div class="form-group">
+          <label for="username">Username *</label>
+          <input type="text" id="username" required />
+        </div>
+        <div class="form-group">
+          <label for="email">Email *</label>
+          <input type="email" id="email" required />
+        </div>
+        <div class="form-group" id="passwordGroup">
+          <label for="password">Password *</label>
+          <input type="password" id="password" minlength="6" />
+          <small style="color: #6b7280;">Minimum 6 characters</small>
+        </div>
+        <div class="form-group">
+          <label for="role_id">Role *</label>
+          <select id="role_id" required>
+            <option value="">Select a role...</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <div class="checkbox-group">
+            <input type="checkbox" id="password_never_expires" />
+            <label for="password_never_expires" style="margin: 0;">Password never expires</label>
+          </div>
+          <small style="color: #6b7280; display: block; margin-top: 4px;">
+            If unchecked, password will expire after 90 days
+          </small>
+        </div>
+        <div style="display: flex; gap: 12px; margin-top: 24px;">
+          <button type="submit" class="btn btn-primary" style="flex: 1;">
+            <i class="bi bi-check-lg"></i> Save User
+          </button>
+          <button type="button" class="btn btn-secondary" onclick="closeUserModal()">
+            Cancel
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <!-- Reset Password Modal -->
+  <div id="resetPasswordModal" class="modal">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2>Reset Password</h2>
+        <button class="btn-icon btn-secondary" onclick="closeResetPasswordModal()">
+          <i class="bi bi-x-lg"></i>
+        </button>
+      </div>
+      <form id="resetPasswordForm">
+        <input type="hidden" id="resetUserId" />
+        <p style="color: #6b7280; margin-bottom: 20px;">
+          Enter a new password for <strong id="resetUsername"></strong>
+        </p>
+        <div class="form-group">
+          <label for="new_password">New Password *</label>
+          <input type="password" id="new_password" minlength="6" required />
+          <small style="color: #6b7280;">Minimum 6 characters</small>
+        </div>
+        <div class="form-group">
+          <label for="confirm_password">Confirm Password *</label>
+          <input type="password" id="confirm_password" minlength="6" required />
+        </div>
+        <div style="display: flex; gap: 12px; margin-top: 24px;">
+          <button type="submit" class="btn btn-primary" style="flex: 1;">
+            <i class="bi bi-key"></i> Reset Password
+          </button>
+          <button type="button" class="btn btn-secondary" onclick="closeResetPasswordModal()">
+            Cancel
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <script>
+    let users = [];
+    let roles = [];
+    let editingUserId = null;
+
+    // Check authentication
+    async function checkAuth() {
+      try {
+        const response = await fetch('/api/admin/session');
+        const data = await response.json();
+        if (!data.authenticated) {
+          window.location.href = '/admin/login.html';
+        }
+      } catch (error) {
+        window.location.href = '/admin/login.html';
+      }
+    }
+
+    // Load roles
+    async function loadRoles() {
+      try {
+        const response = await fetch('/api/admin/users/roles');
+        const data = await response.json();
+        if (data.success) {
+          roles = data.roles;
+          const select = document.getElementById('role_id');
+          select.innerHTML = '<option value="">Select a role...</option>' +
+            roles.map(role => \`<option value="\${role.id}">\${role.name} - \${role.description}</option>\`).join('');
+        }
+      } catch (error) {
+        console.error('Error loading roles:', error);
+      }
+    }
+
+    // Load users
+    async function loadUsers() {
+      try {
+        const response = await fetch('/api/admin/users');
+        const data = await response.json();
+        if (data.success) {
+          users = data.users;
+          renderUsers();
+        }
+      } catch (error) {
+        console.error('Error loading users:', error);
+        showAlert('Error loading users', 'error');
+      }
+    }
+
+    // Render users table
+    function renderUsers() {
+      const tbody = document.getElementById('usersTableBody');
+      if (users.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="7" style="text-align: center; padding: 40px; color: #9ca3af;">No users found</td></tr>';
+        return;
+      }
+
+      tbody.innerHTML = users.map(user => \`
+        <tr>
+          <td style="font-weight: 500;">\${user.username}</td>
+          <td>\${user.email}</td>
+          <td><span class="role-badge">\${user.role_name || 'Unknown'}</span></td>
+          <td>
+            <span class="status-badge \${user.isactive ? 'status-active' : 'status-inactive'}">
+              \${user.isactive ? 'Active' : 'Inactive'}
+            </span>
+          </td>
+          <td>\${user.last_login ? new Date(user.last_login).toLocaleDateString() : 'Never'}</td>
+          <td>
+            \${user.password_never_expires ? 
+              '<span style="color: #10b981;">Never expires</span>' : 
+              '<span style="color: #f59e0b;">Expires in 90 days</span>'
+            }
+          </td>
+          <td>
+            <div class="btn-group">
+              <button class="btn-icon btn-secondary" onclick="editUser('\${user.id}')" title="Edit">
+                <i class="bi bi-pencil"></i>
+              </button>
+              <button class="btn-icon btn-primary" onclick="resetPassword('\${user.id}', '\${user.username}')" title="Reset Password">
+                <i class="bi bi-key"></i>
+              </button>
+              <button class="btn-icon \${user.isactive ? 'btn-secondary' : 'btn-success'}" 
+                      onclick="toggleStatus('\${user.id}')" 
+                      title="\${user.isactive ? 'Deactivate' : 'Activate'}">
+                <i class="bi bi-\${user.isactive ? 'pause' : 'play'}-circle"></i>
+              </button>
+              <button class="btn-icon btn-danger" onclick="deleteUser('\${user.id}')" title="Delete">
+                <i class="bi bi-trash"></i>
+              </button>
+            </div>
+          </td>
+        </tr>
+      \`).join('');
+    }
+
+    // Open create user modal
+    function openCreateUserModal() {
+      editingUserId = null;
+      document.getElementById('modalTitle').textContent = 'Create New User';
+      document.getElementById('userId').value = '';
+      document.getElementById('userForm').reset();
+      document.getElementById('passwordGroup').style.display = 'block';
+      document.getElementById('password').required = true;
+      document.getElementById('userModal').classList.add('active');
+    }
+
+    // Edit user
+    function editUser(id) {
+      const user = users.find(u => u.id === id);
+      if (!user) return;
+
+      editingUserId = id;
+      document.getElementById('modalTitle').textContent = 'Edit User';
+      document.getElementById('userId').value = user.id;
+      document.getElementById('username').value = user.username;
+      document.getElementById('email').value = user.email;
+      document.getElementById('role_id').value = user.role_id;
+      document.getElementById('password_never_expires').checked = user.password_never_expires;
+      document.getElementById('passwordGroup').style.display = 'none';
+      document.getElementById('password').required = false;
+      document.getElementById('userModal').classList.add('active');
+    }
+
+    // Close user modal
+    function closeUserModal() {
+      document.getElementById('userModal').classList.remove('active');
+      document.getElementById('userForm').reset();
+      editingUserId = null;
+    }
+
+    // Submit user form
+    document.getElementById('userForm').addEventListener('submit', async (e) => {
+      e.preventDefault();
+
+      const formData = {
+        username: document.getElementById('username').value,
+        email: document.getElementById('email').value,
+        role_id: document.getElementById('role_id').value,
+        password_never_expires: document.getElementById('password_never_expires').checked
+      };
+
+      if (!editingUserId) {
+        formData.password = document.getElementById('password').value;
+      }
+
+      try {
+        const url = editingUserId ? \`/api/admin/users/\${editingUserId}\` : '/api/admin/users';
+        const method = editingUserId ? 'PUT' : 'POST';
+
+        const response = await fetch(url, {
+          method,
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(formData)
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+          showAlert(data.message, 'success');
+          closeUserModal();
+          loadUsers();
+        } else {
+          showAlert(data.message, 'error');
+        }
+      } catch (error) {
+        console.error('Error saving user:', error);
+        showAlert('Error saving user', 'error');
+      }
+    });
+
+    // Reset password
+    function resetPassword(id, username) {
+      document.getElementById('resetUserId').value = id;
+      document.getElementById('resetUsername').textContent = username;
+      document.getElementById('resetPasswordForm').reset();
+      document.getElementById('resetPasswordModal').classList.add('active');
+    }
+
+    // Close reset password modal
+    function closeResetPasswordModal() {
+      document.getElementById('resetPasswordModal').classList.remove('active');
+      document.getElementById('resetPasswordForm').reset();
+    }
+
+    // Submit reset password form
+    document.getElementById('resetPasswordForm').addEventListener('submit', async (e) => {
+      e.preventDefault();
+
+      const newPassword = document.getElementById('new_password').value;
+      const confirmPassword = document.getElementById('confirm_password').value;
+
+      if (newPassword !== confirmPassword) {
+        showAlert('Passwords do not match', 'error');
+        return;
+      }
+
+      const userId = document.getElementById('resetUserId').value;
+
+      try {
+        const response = await fetch(\`/api/admin/users/\${userId}/reset-password\`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ new_password: newPassword })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+          showAlert(data.message, 'success');
+          closeResetPasswordModal();
+        } else {
+          showAlert(data.message, 'error');
+        }
+      } catch (error) {
+        console.error('Error resetting password:', error);
+        showAlert('Error resetting password', 'error');
+      }
+    });
+
+    // Toggle user status
+    async function toggleStatus(id) {
+      if (!confirm('Are you sure you want to change this user\'s status?')) return;
+
+      try {
+        const response = await fetch(\`/api/admin/users/\${id}/toggle-status\`, {
+          method: 'POST'
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+          showAlert(data.message, 'success');
+          loadUsers();
+        } else {
+          showAlert(data.message, 'error');
+        }
+      } catch (error) {
+        console.error('Error toggling status:', error);
+        showAlert('Error toggling status', 'error');
+      }
+    }
+
+    // Delete user
+    async function deleteUser(id) {
+      if (!confirm('Are you sure you want to delete this user? This action cannot be undone.')) return;
+
+      try {
+        const response = await fetch(\`/api/admin/users/\${id}\`, {
+          method: 'DELETE'
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+          showAlert(data.message, 'success');
+          loadUsers();
+        } else {
+          showAlert(data.message, 'error');
+        }
+      } catch (error) {
+        console.error('Error deleting user:', error);
+        showAlert('Error deleting user', 'error');
+      }
+    }
+
+    // Show alert
+    function showAlert(message, type) {
+      const alert = document.getElementById('alert');
+      alert.textContent = message;
+      alert.className = \`alert alert-\${type} active\`;
+      setTimeout(() => {
+        alert.classList.remove('active');
+      }, 5000);
+    }
+
+    // Initialize
+    checkAuth();
+    loadRoles();
+    loadUsers();
+  </script>
+</body>
+</html>
diff --git a/website/assets/css/main.css b/website/assets/css/main.css
new file mode 100644
index 0000000..85970dd
--- /dev/null
+++ b/website/assets/css/main.css
@@ -0,0 +1,3130 @@
+/* ====================================
+   Notification Animations
+   ==================================== */
+@keyframes slideInFromTop {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes slideOut {
+    from {
+        opacity: 1;
+        transform: translateY(0);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+}
+
+/* ====================================
+   Product Detail - Modern
+   ==================================== */
+.product-detail-modern {
+    padding: 40px 0;
+}
+.gallery {
+    background: #fff;
+    padding: 16px;
+    display: flex;
+    gap: 16px;
+}
+.gallery-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+.gallery-main {
+    position: relative;
+    background: #fafafa;
+    border: 1px solid #e5e5e5;
+    border-radius: 8px;
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 560px;
+    flex: 1;
+    overflow: hidden;
+    cursor: pointer;
+}
+.gallery-main img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+    transition: opacity 200ms ease;
+}
+.gallery-main img.fade-out { opacity: 0; }
+.gallery-main .nav {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: rgba(0,0,0,0.5);
+    color: #fff;
+    border: none;
+    width: 36px;
+    height: 36px;
+    border-radius: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background 0.2s ease;
+}
+.gallery-main .nav:hover {
+    background: rgba(0,0,0,0.7);
+}
+.gallery-main .prev { left: 8px; }
+.gallery-main .next { right: 8px; }
+.gallery-thumbs {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+.gallery-thumbs .thumb {
+    width: 70px;
+    height: 70px;
+    border: 2px solid #e5e5e5;
+    border-radius: 6px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background: #fff;
+    flex-shrink: 0;
+}
+.gallery-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; }
+.gallery-thumbs .thumb:hover { border-color: #6B4E9B; }
+.gallery-thumbs .thumb.active { border-color: #6B4E9B; box-shadow: 0 0 0 3px rgba(107,78,155,0.2); }
+.zoom-hint { text-align: left; color: #777; font-size: 0.8rem; width: 70px; line-height: 1.3; margin-top: 4px; }
+
+/* Disable zoom cursor/animations on touch devices */
+@media (pointer: coarse) {
+    .gallery-main { cursor: default; }
+    .gallery-main img { transition: opacity 200ms ease; }
+}
+
+/* Product split layout */
+.product-detail-modern .product-split {
+    display: flex;
+    gap: 24px;
+    align-items: flex-start;
+}
+.product-detail-modern .image-pane {
+    flex: 0 0 625px;
+    max-width: 625px;
+}
+.product-detail-modern .info-pane {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+@media (max-width: 991.98px) {
+    .product-detail-modern .product-split { flex-direction: column; }
+    .product-detail-modern .image-pane { max-width: 100%; }
+}
+
+/* Mobile button stack */
+@media (max-width: 576px) {
+    .actions { flex-direction: column; }
+    .actions .cta { width: 100%; }
+}
+
+/* =============================
+     Lightbox Viewer
+     ============================= */
+.lightbox {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.85);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 1050;
+}
+.lightbox.open { display: flex; }
+.lightbox-content {
+    position: relative;
+    max-width: 92vw;
+    max-height: 92vh;
+}
+.lightbox-content img {
+    max-width: 92vw;
+    max-height: 92vh;
+    object-fit: contain;
+    background: #111;
+    border-radius: 8px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+}
+.lightbox .lb-close {
+    position: absolute;
+    top: -40px;
+    right: -10px;
+    color: #fff;
+    font-size: 1.8rem;
+    background: transparent;
+}
+.lightbox .lb-nav {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: rgba(0,0,0,0.5);
+    color: #fff;
+    width: 44px;
+    height: 44px;
+    border-radius: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.lightbox .lb-prev { left: -56px; }
+.lightbox .lb-next { right: -56px; }
+
+@media (max-width: 768px) {
+    .lightbox .lb-prev { left: -36px; }
+    .lightbox .lb-next { right: -36px; }
+    .lightbox .lb-close { top: -36px; right: 0; }
+}
+
+.details { padding: 10px 24px; }
+.details .title { font-size: 2rem; font-weight: 700; color: #333; margin-bottom: 12px; }
+.details .meta { display:flex; align-items:center; justify-content: space-between; border-bottom: 1px solid #e5e5e5; padding-bottom: 12px; margin-bottom: 16px; }
+.details .meta-left { display:flex; flex-direction:column; gap:6px; }
+.details .sku { color:#666; font-size:0.9rem; }
+.details .stars { color:#FFB800; font-size:1rem; display:flex; align-items:center; gap:2px; }
+.details .stars .rating-text { color:#666; font-size:0.85rem; margin-left:6px; }
+.details .units-sold { background:#f0f8ff; color:#4169E1; padding:4px 10px; border-radius:12px; font-size:0.85rem; font-weight:600; }
+.color-section { margin:16px 0 12px; }
+.color-row { display:flex; align-items:center; gap:10px; padding:10px 12px; background:#f8f8f8; border-radius:6px; cursor:pointer; transition: background 0.2s ease; position:relative; }
+.color-row:hover { background:#f0f0f0; }
+.color-row .label { font-weight:600; color:#333; font-size:0.95rem; }
+.color-row .value { color:#6B4E9B; font-weight:600; flex:1; }
+.color-row .color-arrow { color:#666; font-size:0.9rem; transition: transform 0.3s ease; }
+.color-section:hover .color-arrow { transform: rotate(180deg); }
+.color-section.show .color-arrow { transform: rotate(180deg); }
+.swatches { display:grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap:8px; background:#fafafa; border:1px solid #e5e5e5; border-radius:6px; padding:10px; margin-top:8px; max-height:0; overflow:hidden; opacity:0; transition: all 0.3s ease; }
+.color-section:hover .swatches { max-height:500px; opacity:1; }
+.color-section.show .swatches { max-height:500px; opacity:1; }
+.swatch { display:flex; align-items:center; gap:6px; padding:6px 10px; border:2px solid #e0e0e0; border-radius:20px; background:#fff; cursor:pointer; transition: all 0.2s ease; }
+.swatch:hover { border-color:#6B4E9B; transform:translateY(-1px); }
+.swatch.active { border-color:#6B4E9B; box-shadow:0 0 0 2px rgba(107,78,155,0.15); background:#f4effa; }
+.swatch .dot { width:16px; height:16px; border-radius:50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
+.swatch .name { font-size:0.85rem; color:#333; font-weight:500; }
+.price-row { display:flex; align-items:baseline; gap:8px; border-top:1px solid #e5e5e5; padding-top:16px; margin-top:6px; margin-bottom:4px; }
+.price-row .label { color:#555; font-size:1rem; font-weight:600; text-transform: uppercase; letter-spacing: 0.5px; }
+.price-row .price { font-size:1.8rem; font-weight:700; color:#2C2C2C; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }
+.stock-row { margin:10px 0 14px; }
+.stock { font-size:1rem; font-weight:500; display:flex; align-items:center; gap:8px; }
+.stock.ok { color:#28a745; }
+.stock.bad { color:#dc3545; }
+.stock-bar { height:6px; border-radius:3px; width:100%; }
+.stock-bar.green { background:#28a745; }
+.stock-bar.red { background:#dc3545; }
+.qty-row { margin:16px 0 20px; }
+.qty-row .qty-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
+.qty-row .label { font-weight:600; color:#333; font-size:0.95rem; }
+.qty-row .stock-count { font-size:0.85rem; color:#666; font-weight:500; }
+.qty { display:inline-flex; align-items:center; border:2px solid #d0d0d0; border-radius:6px; overflow:hidden; background:#fff; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
+.qty .qty-btn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-size:1rem; color:#333; background:#f8f8f8; border:none; cursor:pointer; transition: all 0.2s ease; }
+.qty .qty-btn:hover:not(:disabled) { background:#e8e8e8; color:#000; }
+.qty .qty-btn:disabled { opacity:0.4; cursor:not-allowed; }
+.qty .qty-btn i { line-height:1; }
+.qty input { width:60px; height:36px; text-align:center; border:none; border-left:1px solid #d0d0d0; border-right:1px solid #d0d0d0; font-weight:600; font-size:1rem; color:#333; background:#fff; }
+.actions { display:flex; gap:12px; margin-top:14px; }
+.actions .cta { flex:1; padding:14px 26px; border:none; border-radius:6px; font-weight:700; background:#2C2C2C; color:#fff; display:inline-flex; align-items:center; justify-content:center; gap:10px; box-shadow: var(--shadow-sm); transition: var(--transition); }
+.actions .cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
+.actions .cta.alt { background:#5D7B86; }
+.actions .cta.alt:hover { filter: brightness(1.05); }
+.actions .cta i { font-size:1.05rem; }
+.short { margin-top:16px; padding:16px 18px; background:#f8f9fa; border-left:4px solid #6B4E9B; border-radius:6px; font-family: 'Roboto', 'Segoe UI', sans-serif; font-size:0.95rem; color:#555; line-height:1.6; }
+.desc-block { margin-top:32px; padding:0; background:transparent; border:none; border-radius:0; }
+.desc-block h3 { font-size:1.5rem; font-weight:600; color:#2C2C2C; margin-bottom:16px; padding-bottom:12px; border-bottom:2px solid #e8e8e8; font-family: 'Roboto', 'Segoe UI', sans-serif; letter-spacing:-0.5px; }
+.desc-block .content { color:#4a4a4a; line-height:1.8; font-family: 'Roboto', 'Segoe UI', sans-serif; font-size:1rem; padding:8px 0; }
+.desc-block .content p { margin-bottom:14px; }
+.desc-block .content h4 { font-size:1.15rem; font-weight:600; color:#333; margin:20px 0 10px; }
+.desc-block .content ul, .desc-block .content ol { padding-left:24px; margin-bottom:14px; }
+.desc-block .content li { margin-bottom:8px; }
+
+/* Related Products Cards - Matches Shop Page Style */
+.product-link { text-decoration:none; color:inherit; display:block; }
+/* ====================================
+   Sky Art Shop - Main Stylesheet
+   ==================================== */
+
+/* ====================================
+   CSS Variables
+   ==================================== */
+:root {
+    --primary-color: #6B4E9B;
+    --primary-dark: #563D7C;
+    --secondary-color: #E91E63;
+    --accent-color: #FF9800;
+    --text-color: #2C3E50;
+    --text-light: #5A6C7D;
+    --bg-color: #FFFFFF;
+    --bg-light: #F8F9FA;
+    --bg-dark: #2C2C2C;
+    --border-color: #E1E8ED;
+    --success-color: #4CAF50;
+    --error-color: #F44336;
+
+    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+    --font-heading: 'Georgia', 'Times New Roman', serif;
+
+    --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
+    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
+    --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);
+    --shadow-hover: 0 8px 24px rgba(0,0,0,0.15);
+
+    --container-width: 1200px;
+    --spacing-xs: 0.5rem;
+    --spacing-sm: 1rem;
+    --spacing-md: 2rem;
+    --spacing-lg: 3rem;
+    --spacing-xl: 4rem;
+}
+
+/* ====================================
+   Reset & Base Styles
+   ==================================== */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 16px;
+    scroll-behavior: smooth;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+    font-family: var(--font-primary);
+    color: var(--text-color);
+    background-color: var(--bg-color);
+    line-height: 1.7;
+    font-size: 16px;
+    font-weight: 400;
+    letter-spacing: 0.01em;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+    transition: var(--transition-fast);
+}
+
+a:hover {
+    opacity: 0.85;
+}
+
+ul {
+    list-style: none;
+}
+
+button {
+    cursor: pointer;
+    border: none;
+    background: none;
+    font-family: inherit;
+    transition: var(--transition-fast);
+}
+
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+textarea:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+    border-radius: 4px;
+}
+
+/* ====================================
+   Typography
+   ==================================== */
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-heading);
+    line-height: 1.2;
+    margin-bottom: var(--spacing-sm);
+    font-weight: 600;
+}
+
+h1 {
+    font-size: 2.5rem;
+}
+
+h2 {
+    font-size: 2rem;
+}
+
+h3 {
+    font-size: 1.5rem;
+}
+
+p {
+    margin-bottom: var(--spacing-sm);
+}
+
+/* ====================================
+   Container & Layout
+   ==================================== */
+.container {
+    max-width: var(--container-width);
+    margin: 0 auto;
+    padding: 0 var(--spacing-md);
+}
+
+/* ====================================
+   Navigation Bar
+   ==================================== */
+.navbar {
+    background-color: var(--bg-color);
+    box-shadow: var(--shadow-sm);
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+}
+
+.navbar-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 2rem;
+    position: relative;
+}
+
+.nav-brand {
+    flex-shrink: 0;
+}
+
+.nav-brand a {
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.logo-image {
+    width: 50px;
+    height: 50px;
+    object-fit: cover;
+    border-radius: 50%;
+}
+
+.nav-brand h1 {
+    font-size: 1.8rem;
+    color: var(--primary-color);
+    margin: 0;
+}
+
+.nav-center {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    pointer-events: none;
+}
+
+.nav-center .nav-menu {
+    pointer-events: auto;
+}
+
+.nav-menu {
+    display: flex;
+    gap: 2rem;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.nav-menu li {
+    margin: 0;
+    padding: 0;
+}
+
+.nav-menu a {
+    color: var(--text-color);
+    font-weight: 500;
+    transition: var(--transition);
+    position: relative;
+    white-space: nowrap;
+    text-decoration: none;
+    padding: 0.5rem 0;
+    display: block;
+}
+
+.nav-menu a:hover,
+.nav-menu a.active {
+    color: var(--primary-color);
+}
+
+.nav-menu a.active::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: var(--primary-color);
+}
+
+.nav-icons {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex-shrink: 0;
+}
+
+.nav-icon {
+    position: relative;
+    color: var(--text-color);
+    font-size: 1.5rem;
+    transition: var(--transition);
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+}
+
+.nav-icon:hover {
+    color: var(--primary-color);
+}
+
+.nav-icon .badge {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    background-color: var(--primary-color);
+    color: white;
+    font-size: 0.7rem;
+    font-weight: 600;
+    padding: 2px 6px;
+    border-radius: 10px;
+    min-width: 18px;
+    text-align: center;
+    line-height: 1;
+    display: none;
+}
+
+/* Cart and Wishlist Dropdown */
+.dropdown-container {
+    position: relative;
+}
+
+.icon-dropdown {
+    display: none;
+    position: absolute;
+    top: calc(100% + 15px);
+    right: 0;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    width: 350px;
+    max-height: 450px;
+    z-index: 1002;
+    animation: dropdownFadeIn 0.2s ease;
+}
+
+.icon-dropdown.show {
+    display: block;
+}
+
+@keyframes dropdownFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.dropdown-header {
+    padding: 15px 20px;
+    border-bottom: 1px solid #eee;
+}
+
+.dropdown-header h4 {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-color);
+}
+
+.dropdown-items {
+    max-height: 300px;
+    overflow-y: auto;
+    padding: 10px 0;
+}
+
+.dropdown-items .empty-message {
+    padding: 40px 20px;
+    text-align: center;
+    color: #999;
+    font-size: 0.9rem;
+}
+
+.dropdown-item {
+    display: flex;
+    gap: 12px;
+    padding: 12px 20px;
+    border-bottom: 1px solid #f5f5f5;
+    transition: background 0.2s;
+}
+
+.dropdown-item:hover {
+    background: #fafafa;
+}
+
+.dropdown-item:last-child {
+    border-bottom: none;
+}
+
+.dropdown-item-image {
+    width: 60px;
+    height: 60px;
+    object-fit: cover;
+    border-radius: 6px;
+    flex-shrink: 0;
+}
+
+.dropdown-item-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.dropdown-item-name {
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--text-color);
+    margin-bottom: 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.dropdown-item-details {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.85rem;
+    color: #666;
+}
+
+.dropdown-item-quantity {
+    color: #999;
+}
+
+.dropdown-item-price {
+    font-weight: 600;
+    color: var(--primary-color);
+}
+
+.dropdown-item-remove {
+    background: none;
+    border: none;
+    color: #999;
+    cursor: pointer;
+    padding: 4px;
+    font-size: 1.2rem;
+    line-height: 1;
+    transition: color 0.2s;
+}
+
+.dropdown-item-remove:hover {
+    color: #e74c3c;
+}
+
+.dropdown-footer {
+    padding: 15px 20px;
+    border-top: 1px solid #eee;
+}
+
+.dropdown-total {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 600;
+    font-size: 1rem;
+    margin-bottom: 12px;
+    color: var(--text-color);
+}
+
+.dropdown-total span:last-child {
+    color: var(--primary-color);
+    font-size: 1.1rem;
+}
+
+.btn-checkout,
+.btn-view-all {
+    display: block;
+    width: 100%;
+    padding: 10px;
+    text-align: center;
+    background: var(--primary-color) !important;
+    color: white !important;
+    text-decoration: none !important;
+    border-radius: 6px;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    transform: scale(1);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.btn-checkout:hover,
+.btn-view-all:hover {
+    background: var(--primary-color) !important;
+    color: white !important;
+    text-decoration: none !important;
+    transform: scale(1.05);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.btn-checkout:focus,
+.btn-view-all:focus,
+.btn-checkout:active,
+.btn-view-all:active,
+.btn-checkout:visited,
+.btn-view-all:visited {
+    background: var(--primary-color) !important;
+    color: white !important;
+    text-decoration: none !important;
+}
+
+.nav-toggle {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 10px;
+    flex-shrink: 0;
+}
+
+.nav-toggle span {
+    width: 25px;
+    height: 3px;
+    background-color: var(--text-color);
+    transition: var(--transition);
+}
+
+.nav-toggle:hover span {
+    background-color: var(--primary-color);
+}
+
+.nav-dropdown {
+    display: none;
+    position: absolute;
+    top: 100%;
+    right: 2rem;
+    background-color: white;
+    box-shadow: var(--shadow-md);
+    border-radius: 8px;
+    min-width: 250px;
+    z-index: 1001;
+    margin-top: 0;
+}
+
+.nav-dropdown.active {
+    display: block;
+}
+
+.nav-dropdown .nav-menu {
+    flex-direction: column;
+    padding: var(--spacing-sm);
+    gap: 0;
+}
+
+.nav-dropdown .nav-menu li {
+    width: 100%;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.nav-dropdown .nav-menu li:last-child {
+    border-bottom: none;
+}
+
+.nav-dropdown .nav-menu a {
+    display: block;
+    padding: 12px 16px;
+    width: 100%;
+    text-align: left;
+}
+
+.nav-dropdown .nav-menu a:hover {
+    background-color: #f5f5f5;
+}
+
+.nav-dropdown .nav-menu a.active::after {
+    display: none;
+}
+
+/* ====================================
+   Hero Section
+   ==================================== */
+.hero {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--spacing-lg);
+    align-items: center;
+    padding: var(--spacing-xl) 0;
+    background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
+}
+
+.hero-content {
+    padding: 0 var(--spacing-md);
+}
+
+.hero-content h2 {
+    font-size: 3rem;
+    color: var(--primary-color);
+    margin-bottom: var(--spacing-md);
+}
+
+.hero-content p {
+    font-size: 1.2rem;
+    color: var(--text-light);
+    margin-bottom: var(--spacing-md);
+}
+
+.hero-content .hero-description {
+    font-size: 1rem;
+    color: var(--text-color);
+    margin-bottom: var(--spacing-md);
+    line-height: 1.8;
+}
+
+.hero-content .hero-description p {
+    margin-bottom: 1rem;
+}
+
+.hero-content .hero-description ul,
+.hero-content .hero-description ol {
+    margin-left: 1.5rem;
+    margin-bottom: 1rem;
+}
+
+.hero-content .hero-description h1,
+.hero-content .hero-description h2,
+.hero-content .hero-description h3 {
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
+}
+
+.hero-image {
+    position: relative;
+    overflow: hidden;
+    border-radius: 10px;
+    padding-right: 2rem;
+}
+
+.hero-image img {
+    width: 100%;
+    height: 500px;
+    object-fit: cover;
+    transition: transform 0.5s ease;
+}
+
+.hero-image:hover img {
+    transform: scale(1.05);
+}
+
+/* ====================================
+   Buttons
+   ==================================== */
+.btn {
+    display: inline-block;
+    padding: 12px 30px;
+    border-radius: 8px;
+    font-weight: 600;
+    text-align: center;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+    border: none;
+    font-family: var(--font-primary);
+    letter-spacing: 0.02em;
+}
+
+.btn-primary {
+    background-color: var(--primary-color);
+    color: white;
+    box-shadow: 0 2px 8px rgba(107, 78, 155, 0.2);
+}
+
+.btn-primary:hover {
+    background-color: var(--primary-dark);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(107, 78, 155, 0.3);
+}
+
+.btn-secondary {
+    background-color: var(--secondary-color);
+    color: white;
+}
+
+.btn-secondary:hover {
+    background-color: #c2185b;
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.btn-small {
+    padding: 8px 20px;
+    font-size: 0.9rem;
+}
+
+.btn-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 10px 16px;
+}
+
+.btn-icon svg {
+    pointer-events: none;
+    flex-shrink: 0;
+}
+
+/* ====================================
+   Sections
+   ==================================== */
+section {
+    padding: var(--spacing-xl) 0;
+}
+
+.section-subtitle {
+    text-align: center;
+    font-size: 1.1rem;
+    color: var(--text-light);
+    margin-bottom: var(--spacing-lg);
+}
+
+/* ====================================
+   Inspiration Section
+   ==================================== */
+.inspiration {
+    background-color: var(--bg-light);
+}
+
+.inspiration h2 {
+    text-align: center;
+    color: var(--primary-color);
+    margin-bottom: var(--spacing-lg);
+}
+
+.inspiration-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--spacing-lg);
+    align-items: center;
+}
+
+.inspiration-text p {
+    font-size: 1.1rem;
+    line-height: 1.8;
+}
+
+.inspiration-image {
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: var(--shadow-md);
+}
+
+.inspiration-image img {
+    width: 100%;
+    height: 400px;
+    object-fit: cover;
+}
+
+/* ====================================
+   Collection Section
+   ==================================== */
+.collection {
+    text-align: center;
+}
+
+.collection h2 {
+    color: var(--primary-color);
+    margin-bottom: var(--spacing-sm);
+}
+
+.collection-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--spacing-md);
+    margin: var(--spacing-lg) 0;
+}
+
+.collection-item {
+    background-color: white;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: var(--shadow-sm);
+    transition: var(--transition);
+    cursor: pointer;
+}
+
+.collection-item:hover {
+    transform: translateY(-10px);
+    box-shadow: var(--shadow-lg);
+}
+
+.collection-item img {
+    width: 100%;
+    height: 250px;
+    object-fit: cover;
+}
+
+.collection-item h3 {
+    padding: var(--spacing-sm);
+    color: var(--text-color);
+}
+
+/* ====================================
+   Promotion Section
+   ==================================== */
+.promotion {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+    color: white;
+}
+
+.promotion .container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: var(--spacing-md);
+}
+
+.promo-card {
+    background-color: rgba(255, 255, 255, 0.1);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    padding: var(--spacing-lg);
+    border-radius: 10px;
+    text-align: center;
+    transition: var(--transition);
+}
+
+.promo-card:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+    transform: translateY(-5px);
+}
+
+.promo-card h2 {
+    color: white;
+    margin-bottom: var(--spacing-md);
+}
+
+.promo-description {
+    font-size: 1.1rem;
+    margin-bottom: var(--spacing-md);
+}
+
+.promo-card.featured {
+    background: linear-gradient(135deg, rgba(255, 152, 0, 0.3), rgba(255, 193, 7, 0.3));
+}
+
+/* ====================================
+   Products Grid
+   ==================================== */
+.products-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: var(--spacing-md);
+    margin-top: var(--spacing-lg);
+}
+
+.product-card {
+    background-color: white;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: var(--shadow-sm);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    border: 1px solid var(--border-color);
+}
+
+.product-card:hover {
+    box-shadow: var(--shadow-hover);
+    transform: translateY(-8px);
+    border-color: var(--primary-color);
+}
+
+.product-image {
+    position: relative;
+    overflow: hidden;
+    height: 180px;
+}
+
+.product-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.5s ease;
+}
+
+.product-card:hover .product-image img {
+    transform: scale(1.1);
+}
+
+.product-card h3 {
+    padding: var(--spacing-sm);
+    font-size: 1.1rem;
+}
+
+.product-color-badge {
+    display: inline-block;
+    margin: 0 var(--spacing-sm) var(--spacing-xs);
+    padding: 0.25rem 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    background: var(--primary-color);
+    color: white;
+    border-radius: 12px;
+    letter-spacing: 0.5px;
+}
+
+.product-description {
+    padding: 0 var(--spacing-sm);
+    font-size: 0.9rem;
+    color: var(--text-light);
+    margin-bottom: var(--spacing-xs);
+    line-height: 1.6;
+}
+
+/* Product Description Rich Text Styles */
+.product-description p {
+    margin-bottom: 0.5em;
+}
+
+.product-description strong,
+.product-description b {
+    font-weight: bold;
+    color: var(--text-color);
+}
+
+.product-description em,
+.product-description i {
+    font-style: italic;
+}
+
+.product-description u {
+    text-decoration: underline;
+}
+
+.product-description ul,
+.product-description ol {
+    margin: 0.5em 0 0.5em 1.2em;
+    padding-left: 0;
+}
+
+.product-description li {
+    margin-bottom: 0.3em;
+}
+
+.price {
+    padding: 0 var(--spacing-sm);
+    font-size: 1.3rem;
+    font-weight: 700;
+    color: var(--primary-color);
+    margin-bottom: var(--spacing-sm);
+}
+
+.product-card .btn {
+    width: calc(100% - var(--spacing-md));
+    margin: 0 var(--spacing-sm) var(--spacing-sm);
+}
+
+/* ====================================
+   Portfolio Section
+   ==================================== */
+.portfolio-hero,
+.shop-hero,
+.about-hero,
+.contact-hero,
+.category-hero {
+    text-align: center;
+    padding: var(--spacing-xl) 0;
+    background: linear-gradient(135deg, #EDAEF9 0%, #81B1FA 100%);
+}
+
+.portfolio-hero h1,
+.shop-hero h1,
+.about-hero h1,
+.contact-hero h1,
+.category-hero h1 {
+    color: #ffffff;
+    font-size: 3rem;
+    margin-bottom: var(--spacing-sm);
+}
+
+.hero-subtitle {
+    font-size: 1.2rem;
+    color: rgba(255, 255, 255, 0.95);
+    max-width: 700px;
+    margin: 0 auto;
+}
+
+.portfolio-gallery {
+    padding: var(--spacing-xl) 0;
+}
+
+.portfolio-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: var(--spacing-lg);
+}
+
+.portfolio-category {
+    position: relative;
+    overflow: hidden;
+    border-radius: 10px;
+    box-shadow: var(--shadow-md);
+    height: 400px;
+}
+
+.category-link {
+    display: block;
+    height: 100%;
+}
+
+.category-image {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+}
+
+.category-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.5s ease;
+}
+
+.category-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
+    padding: var(--spacing-md);
+    color: white;
+    transition: var(--transition);
+}
+
+.category-overlay h2 {
+    color: white;
+    margin: 0;
+}
+
+.portfolio-category:hover .category-image img {
+    transform: scale(1.1);
+}
+
+.portfolio-category:hover .category-overlay {
+    background: linear-gradient(to top, rgba(107, 78, 155, 0.9), transparent);
+}
+
+/* ====================================
+   Breadcrumb
+   ==================================== */
+.breadcrumb {
+    padding: var(--spacing-sm) 0;
+    background-color: var(--bg-light);
+    font-size: 0.9rem;
+}
+
+.breadcrumb a {
+    color: var(--primary-color);
+    transition: var(--transition);
+}
+
+.breadcrumb a:hover {
+    text-decoration: underline;
+}
+
+.breadcrumb span {
+    color: var(--text-light);
+}
+
+/* ====================================
+   Projects Gallery
+   ==================================== */
+.projects-gallery {
+    padding: var(--spacing-xl) 0;
+}
+
+.projects-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: var(--spacing-lg);
+}
+
+.project-card {
+    background-color: white;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: var(--shadow-sm);
+    transition: var(--transition);
+}
+
+.project-card:hover {
+    box-shadow: var(--shadow-lg);
+    transform: translateY(-5px);
+}
+
+.project-image {
+    height: 300px;
+    overflow: hidden;
+}
+
+.project-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.5s ease;
+}
+
+.project-card:hover .project-image img {
+    transform: scale(1.1);
+}
+
+.project-info {
+    padding: var(--spacing-md);
+}
+
+.project-info h3 {
+    color: var(--primary-color);
+    margin-bottom: var(--spacing-xs);
+}
+
+.project-date {
+    color: var(--text-light);
+    font-size: 0.9rem;
+}
+
+/* ====================================
+   Shop Page
+   ==================================== */
+.shop-filters {
+    background-color: var(--bg-light);
+    padding: var(--spacing-md) 0;
+}
+
+.filter-bar {
+    display: flex;
+    gap: var(--spacing-md);
+    flex-wrap: wrap;
+}
+
+.filter-group {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+}
+
+.filter-group label {
+    font-weight: 600;
+}
+
+.filter-group select {
+    padding: 8px 15px;
+    border: 1px solid var(--border-color);
+    border-radius: 5px;
+    font-family: inherit;
+    cursor: pointer;
+}
+
+.shop-products {
+    padding: var(--spacing-xl) 0;
+}
+
+/* ====================================
+   About Page
+   ==================================== */
+.about-content {
+    padding: var(--spacing-xl) 0;
+}
+
+.about-layout {
+    display: grid;
+    grid-template-columns: 1fr 350px;
+    gap: var(--spacing-xl);
+}
+
+.about-main-content {
+    min-width: 0;
+}
+
+.content-wrapper {
+    max-width: 100%;
+}
+
+.content-wrapper h2 {
+    color: var(--primary-color);
+    margin-top: var(--spacing-md);
+    margin-bottom: var(--spacing-sm);
+    font-size: 2rem;
+}
+
+.content-wrapper h3 {
+    color: var(--text-color);
+    margin-top: var(--spacing-md);
+    margin-bottom: var(--spacing-sm);
+    font-size: 1.5rem;
+}
+
+.content-wrapper p {
+    margin-bottom: var(--spacing-md);
+    line-height: 1.8;
+}
+
+.content-wrapper ul {
+    list-style: disc;
+    padding-left: var(--spacing-md);
+    margin-bottom: var(--spacing-md);
+}
+
+.content-wrapper ol {
+    list-style: decimal;
+    padding-left: var(--spacing-md);
+    margin-bottom: var(--spacing-md);
+}
+
+.content-wrapper li {
+    margin-bottom: var(--spacing-xs);
+    line-height: 1.7;
+}
+
+.content-wrapper img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 10px;
+    box-shadow: var(--shadow-md);
+    margin: var(--spacing-md) 0;
+}
+
+/* About Sidebar Image Gallery */
+.about-sidebar {
+    position: sticky;
+    top: 100px;
+    height: fit-content;
+}
+
+.sidebar-images {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+}
+
+.sidebar-image-item {
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: var(--shadow-md);
+    transition: var(--transition);
+}
+
+.sidebar-image-item:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-hover);
+}
+
+.sidebar-image-item img {
+    width: 100%;
+    height: auto;
+    display: block;
+    object-fit: cover;
+}
+
+/* Team Section */
+.team-section {
+    padding: var(--spacing-xl) 0;
+    background: var(--bg-light);
+}
+
+.section-header h2 {
+    color: var(--primary-color);
+    font-size: 2.5rem;
+    margin-bottom: var(--spacing-sm);
+}
+
+.section-header .lead {
+    color: var(--text-muted);
+    font-size: 1.2rem;
+}
+
+.team-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
+    gap: var(--spacing-lg);
+    justify-content: center;
+}
+
+.team-member-card {
+    background: white;
+    border-radius: 12px;
+    padding: var(--spacing-lg);
+    text-align: center;
+    box-shadow: var(--shadow-md);
+    transition: var(--transition);
+    display: flex;
+    flex-direction: column;
+}
+
+.team-member-card:hover {
+    transform: translateY(-8px);
+    box-shadow: var(--shadow-hover);
+}
+
+.team-member-info {
+    padding: 0 var(--spacing-sm);
+    margin-bottom: var(--spacing-xl);
+    flex-grow: 1;
+}
+
+.member-name {
+    font-size: 1.5rem;
+    color: var(--text-color);
+    margin-bottom: var(--spacing-xs);
+    font-weight: 600;
+}
+
+.member-role {
+    font-size: 1rem;
+    color: var(--primary-color);
+    font-weight: 500;
+    margin-bottom: var(--spacing-sm);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.member-bio {
+    font-size: 0.95rem;
+    color: var(--text-muted);
+    line-height: 1.6;
+    margin-bottom: var(--spacing-md);
+}
+
+.team-member-photo {
+    margin-top: auto;
+    display: flex;
+    justify-content: center;
+}
+
+.team-member-photo img {
+    width: 180px;
+    height: 180px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 4px solid var(--primary-color);
+    box-shadow: 0 4px 12px rgba(107, 78, 155, 0.2);
+    transition: var(--transition);
+}
+
+.team-member-card:hover .team-member-photo img {
+    border-color: var(--primary-dark);
+    box-shadow: 0 8px 20px rgba(107, 78, 155, 0.3);
+    transform: scale(1.05);
+}
+
+/* Legacy styles for fallback */
+.about-grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: var(--spacing-lg);
+}
+
+.about-text h2 {
+    color: var(--primary-color);
+    margin-top: var(--spacing-md);
+    margin-bottom: var(--spacing-sm);
+}
+
+.about-text ul {
+    list-style: disc;
+    padding-left: var(--spacing-md);
+    margin-bottom: var(--spacing-md);
+}
+
+.about-text li {
+    margin-bottom: var(--spacing-xs);
+}
+
+.about-images {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+}
+
+.about-images img {
+    width: 100%;
+    border-radius: 10px;
+    box-shadow: var(--shadow-md);
+}
+
+/* Responsive Design */
+@media (max-width: 992px) {
+    .about-layout {
+        grid-template-columns: 1fr;
+    }
+
+    .about-sidebar {
+        position: relative;
+        top: 0;
+    }
+
+    .sidebar-images {
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: var(--spacing-sm);
+    }
+
+    .sidebar-image-item {
+        flex: 1 1 calc(50% - var(--spacing-sm));
+        min-width: 200px;
+    }
+
+    .team-grid {
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    }
+}
+
+/* ====================================
+   Contact Page
+   ==================================== */
+.contact-form-section {
+    padding: var(--spacing-xl) 0;
+}
+
+.contact-grid {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: var(--spacing-lg);
+}
+
+.contact-info {
+    background-color: var(--bg-light);
+    padding: var(--spacing-lg);
+    border-radius: 10px;
+}
+
+.contact-info h2 {
+    color: var(--primary-color);
+    margin-bottom: var(--spacing-md);
+}
+
+.contact-item {
+    margin-bottom: var(--spacing-md);
+}
+
+.contact-item h3 {
+    font-size: 1.1rem;
+    margin-bottom: var(--spacing-xs);
+    color: var(--primary-color);
+}
+
+.contact-item a {
+    color: var(--text-color);
+}
+
+.contact-item a:hover {
+    color: var(--primary-color);
+}
+
+.contact-form {
+    background-color: white;
+    padding: var(--spacing-lg);
+    border-radius: 10px;
+    box-shadow: var(--shadow-sm);
+}
+
+.contact-form h2 {
+    color: var(--primary-color);
+    margin-bottom: var(--spacing-md);
+}
+
+.form-group {
+    margin-bottom: var(--spacing-md);
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: var(--spacing-xs);
+    font-weight: 600;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 5px;
+    font-family: inherit;
+    font-size: 1rem;
+    transition: var(--transition);
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(107, 78, 155, 0.1);
+}
+
+/* ====================================
+   Footer
+   ==================================== */
+.footer {
+    background-color: var(--bg-dark);
+    color: white;
+    padding: var(--spacing-xl) 0 var(--spacing-md);
+}
+
+.footer-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--spacing-lg);
+    margin-bottom: var(--spacing-lg);
+}
+
+.footer-brand h2 {
+    color: white;
+    margin-bottom: var(--spacing-sm);
+}
+
+.footer-brand p {
+    margin-bottom: var(--spacing-sm);
+}
+
+.social-links {
+    display: flex;
+    gap: var(--spacing-sm);
+}
+
+.social-links a {
+    color: white;
+    transition: var(--transition);
+}
+
+.social-links a:hover {
+    color: var(--accent-color);
+    transform: translateY(-3px);
+}
+
+.footer-links h3 {
+    color: white;
+    margin-bottom: var(--spacing-md);
+}
+
+.footer-links ul li {
+    margin-bottom: var(--spacing-xs);
+}
+
+.footer-links a {
+    color: #CCCCCC;
+    transition: var(--transition);
+}
+
+.footer-links a:hover {
+    color: white;
+}
+
+.footer-bottom {
+    text-align: center;
+    padding-top: var(--spacing-md);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    color: #CCCCCC;
+    font-size: 0.9rem;
+}
+
+/* ====================================
+   Responsive Design
+   ==================================== */
+
+/* Tablet */
+@media (max-width: 768px) {
+    h1 {
+        font-size: 2rem;
+    }
+
+    h2 {
+        font-size: 1.5rem;
+    }
+
+    .nav-brand h1 {
+        font-size: 1.5rem;
+    }
+
+    .nav-center {
+        display: none;
+    }
+
+    .nav-dropdown {
+        display: none;
+        position: fixed;
+        left: 0;
+        top: 60px;
+        background-color: white;
+        width: 100%;
+        box-shadow: var(--shadow-md);
+        z-index: 999;
+        max-height: calc(100vh - 60px);
+        overflow-y: auto;
+        border-radius: 0;
+        margin-top: 0;
+    }
+
+    .nav-dropdown.active {
+        display: block;
+    }
+
+    .nav-dropdown .nav-menu {
+        padding: var(--spacing-md) var(--spacing-sm);
+    }
+
+    .hero {
+        grid-template-columns: 1fr;
+    }
+
+    .hero-content h2 {
+        font-size: 2rem;
+    }
+
+    .inspiration-content {
+        grid-template-columns: 1fr;
+    }
+
+    .collection-grid {
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    }
+
+    .portfolio-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .products-grid {
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    }
+
+    .about-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .contact-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .footer-content {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Mobile */
+@media (max-width: 480px) {
+    :root {
+        --spacing-md: 1rem;
+        --spacing-lg: 2rem;
+        --spacing-xl: 2.5rem;
+    }
+
+    .container {
+        padding: 0 var(--spacing-sm);
+    }
+
+    h1 {
+        font-size: 1.8rem;
+    }
+
+    .hero-content h2 {
+        font-size: 1.6rem;
+    }
+
+    .portfolio-hero h1,
+    .shop-hero h1,
+    .about-hero h1,
+    .contact-hero h1,
+    .category-hero h1 {
+        font-size: 2rem;
+    }
+
+    .collection-grid,
+    .products-grid,
+    .projects-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .filter-bar {
+        flex-direction: column;
+    }
+
+    .filter-group {
+        width: 100%;
+    }
+
+    .filter-group select {
+        width: 100%;
+    }
+
+    .page-hero h1 {
+        font-size: 2.2rem !important;
+    }
+
+    .hero-subtitle {
+        font-size: 1.2rem !important;
+    }
+
+    .content-wrapper {
+        font-size: 1rem;
+    }
+
+    .content-wrapper h1 { font-size: 1.8rem !important; }
+    .content-wrapper h2 { font-size: 1.5rem !important; }
+    .content-wrapper h3 { font-size: 1.3rem !important; }
+    .content-wrapper h4 { font-size: 1.1rem !important; }
+    .content-wrapper p { font-size: 1rem !important; }
+}
+
+/* ====================================
+   Page Content Styles
+   ==================================== */
+.page-hero {
+    background: linear-gradient(135deg, #EDAEF9 0%, #81B1FA 100%);
+    padding: 4rem 0 3rem;
+    text-align: center;
+    margin-bottom: 3rem;
+}
+
+.page-hero h1 {
+    font-size: 3.5rem;
+    font-family: var(--font-heading);
+    margin-bottom: 1rem;
+    font-weight: 700;
+    color: #ffffff !important;
+    letter-spacing: 0.5px;
+}
+
+.hero-subtitle {
+    font-size: 1.5rem;
+    color: #ffffff !important;
+    opacity: 0.95;
+    font-weight: 400;
+    line-height: 1.6;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
+}
+
+.page-content {
+    padding: 2rem 0 4rem;
+}
+
+.content-wrapper {
+    max-width: 900px;
+    margin: 0 auto;
+    line-height: 1.8;
+    color: var(--text-color);
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+/* Rich Text Editor Content Styles */
+.content-wrapper h1,
+.content-wrapper h2,
+.content-wrapper h3,
+.content-wrapper h4,
+.content-wrapper h5,
+.content-wrapper h6 {
+    margin-top: 1.5em;
+    margin-bottom: 0.75em;
+    line-height: 1.3;
+    color: var(--primary-color);
+}
+
+.content-wrapper h1 { font-size: 2.5rem; font-weight: 700; }
+.content-wrapper h2 { font-size: 2rem; font-weight: 600; }
+.content-wrapper h3 { font-size: 1.7rem; font-weight: 600; }
+.content-wrapper h4 { font-size: 1.4rem; font-weight: 600; }
+.content-wrapper h5 { font-size: 1.2rem; font-weight: 600; }
+.content-wrapper h6 { font-size: 1.1rem; font-weight: 600; }
+
+.content-wrapper p {
+    margin-bottom: 1.2em;
+    font-size: 1.1rem;
+    line-height: 1.8;
+}
+
+.content-wrapper ul,
+.content-wrapper ol {
+    margin: 1em 0 1.5em 2em;
+    padding-left: 0;
+}
+
+/* Preserve inline styles from pasted content */
+.content-wrapper [style*=\"font-weight\"],
+.content-wrapper [style*=\"font-style\"],
+.content-wrapper [style*=\"text-decoration\"],
+.content-wrapper [style*=\"color\"],
+.content-wrapper [style*=\"background\"],
+.content-wrapper [style*=\"font-size\"],
+.content-wrapper [style*=\"text-align\"],
+.content-wrapper [style*=\"margin\"],
+.content-wrapper [style*=\"padding\"] {
+    /* Inline styles preserved */
+}
+
+.content-wrapper strong,
+.content-wrapper b {
+    font-weight: bold;
+}
+
+.content-wrapper em,
+.content-wrapper i {
+    font-style: italic;
+}
+
+.content-wrapper u {
+    text-decoration: underline;
+}
+
+.content-wrapper s,
+.content-wrapper strike {
+    text-decoration: line-through;
+}
+
+.content-wrapper br {
+    display: block;
+    margin: 0.5em 0;
+    content: \"\";
+}
+
+.content-wrapper div,
+.content-wrapper span {
+    display: inline;
+}
+
+.content-wrapper div {
+    display: block;
+}
+
+.content-wrapper li {
+    margin-bottom: 0.5em;
+    line-height: 1.6;
+}
+
+.content-wrapper blockquote {
+    margin: 1.5em 0;
+    padding: 1em 1.5em;
+    background: var(--bg-light);
+    border-left: 4px solid var(--primary-color);
+    font-style: italic;
+    color: var(--text-light);
+}
+
+.content-wrapper img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 1.5em auto;
+    border-radius: 8px;
+    box-shadow: var(--shadow-md);
+}
+
+.content-wrapper a {
+    color: var(--primary-color);
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: var(--transition);
+}
+
+.content-wrapper a:hover {
+    border-bottom-color: var(--primary-color);
+}
+
+.content-wrapper table {
+    width: 100%;
+    margin: 1.5em 0;
+    border-collapse: collapse;
+    box-shadow: var(--shadow-sm);
+}
+
+.content-wrapper table th,
+.content-wrapper table td {
+    padding: 0.75em;
+    border: 1px solid var(--border-color);
+    text-align: left;
+}
+
+.content-wrapper table th {
+    background: var(--primary-color);
+    color: white;
+    font-weight: 600;
+}
+
+.content-wrapper table tr:nth-child(even) {
+    background: var(--bg-light);
+}
+
+.content-wrapper pre {
+    background: var(--bg-dark);
+    color: #f8f8f2;
+    padding: 1em;
+    border-radius: 4px;
+    overflow-x: auto;
+    margin: 1.5em 0;
+    font-family: 'Courier New', monospace;
+    font-size: 0.9em;
+}
+
+.content-wrapper code {
+    background: var(--bg-light);
+    padding: 0.2em 0.4em;
+    border-radius: 3px;
+    font-family: 'Courier New', monospace;
+    font-size: 0.9em;
+}
+
+.content-wrapper pre code {
+    background: none;
+    padding: 0;
+    color: inherit;
+}
+
+.content-wrapper hr {
+    margin: 2em 0;
+    border: none;
+    border-top: 2px solid var(--border-color);
+}
+
+/* ====================================
+   Utility Classes
+   ==================================== */
+.text-center {
+    text-align: center;
+}
+
+.mt-1 { margin-top: var(--spacing-xs); }
+.mt-2 { margin-top: var(--spacing-sm); }
+.mt-3 { margin-top: var(--spacing-md); }
+.mt-4 { margin-top: var(--spacing-lg); }
+
+.mb-1 { margin-bottom: var(--spacing-xs); }
+.mb-2 { margin-bottom: var(--spacing-sm); }
+.mb-3 { margin-bottom: var(--spacing-md); }
+.mb-4 { margin-bottom: var(--spacing-lg); }
+
+/* ====================================
+   Dynamic Homepage Sections
+   ==================================== */
+.custom-section {
+    padding: 60px 0;
+    background: var(--bg-light);
+}
+
+.custom-section h2 {
+    font-size: 2.5rem;
+    color: var(--primary-color);
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+.custom-section .section-subtitle {
+    font-size: 1.2rem;
+    color: var(--text-light);
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.custom-section .img-fluid {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    box-shadow: var(--shadow-md);
+}
+
+/* Dynamic section content styling */
+.inspiration-text p,
+.custom-section p {
+    margin-bottom: 15px;
+    line-height: 1.8;
+}
+
+.inspiration-text ul,
+.custom-section ul {
+    margin-left: 20px;
+    margin-bottom: 15px;
+}
+
+.inspiration-text li,
+.custom-section li {
+    margin-bottom: 8px;
+}
+
+/* ====================================
+   Product Detail Page
+   ==================================== */
+.product-detail {
+    padding: var(--spacing-xl) 0;
+    background: #fff;
+}
+
+/* ====================================
+   PRODUCT DETAIL PAGE - CLEAN LAYOUT
+   ==================================== */
+
+.product-detail-page {
+    padding: 40px 0;
+    background: #fff;
+}
+
+/* LEFT COLUMN: Product Images Section (40%) */
+.product-image-section {
+    background: white;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.main-image-wrapper {
+    background: #fafafa;
+    border: 1px solid #e5e5e5;
+    border-radius: 8px;
+    padding: 20px 30px; /* slightly bigger: 20px vertical, 30px horizontal */
+    margin-bottom: 20px;
+    display: inline-block;
+    width: auto;
+    max-width: 100%;
+}
+
+.main-product-img {
+    max-width: 100%;
+    max-height: 300px; /* increase from 280px */
+    height: auto;
+    display: block;
+    object-fit: contain;
+}
+
+/* Thumbnail Gallery - Horizontal below */
+.thumbnail-gallery {
+    display: flex;
+    gap: 8px;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-bottom: 15px;
+}
+
+.thumbnail-item-gallery {
+    width: 60px;
+    height: 60px;
+    border: 2px solid #e5e5e5;
+    border-radius: 6px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background: white;
+}
+
+.thumbnail-item-gallery img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.thumbnail-item-gallery:hover {
+    border-color: #6B4E9B;
+    transform: translateY(-2px);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+}
+
+.thumbnail-item-gallery.active {
+    border-color: #6B4E9B;
+    box-shadow: 0 0 0 3px rgba(107, 78, 155, 0.2);
+}
+
+/* Zoom Tooltip */
+.zoom-tooltip {
+    font-size: 0.85rem;
+    color: #777;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    margin-bottom: 20px;
+}
+
+.zoom-tooltip i {
+    font-size: 1rem;
+}
+
+/* Description Section Below Images */
+.description-section {
+    background: #f9f9f9;
+    border: 1px solid #e5e5e5;
+    border-radius: 8px;
+    padding: 25px;
+    margin-top: 25px;
+    text-align: left;
+}
+
+.description-title {
+    font-size: 1.3rem;
+    font-weight: 700;
+    color: #333;
+    margin-bottom: 15px;
+    padding-bottom: 10px;
+    border-bottom: 2px solid #6B4E9B;
+}
+
+.description-content {
+    color: #555;
+    line-height: 1.8;
+    font-size: 0.95rem;
+}
+
+.description-content p {
+    margin-bottom: 12px;
+}
+
+.description-content ul,
+.description-content ol {
+    margin-left: 25px;
+    margin-bottom: 12px;
+}
+
+.description-content li {
+    margin-bottom: 8px;
+}
+
+/* RIGHT COLUMN: Product Details Section (60%) */
+.product-details-section {
+    padding: 20px 30px;
+}
+
+/* A. Product Title */
+.product-title-main {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #333;
+    margin-bottom: 20px;
+    line-height: 1.3;
+}
+
+/* B. SKU + Rating */
+.product-sku-rating {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 20px;
+    margin-bottom: 20px;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+.sku-badge {
+    font-size: 0.9rem;
+    color: #666;
+    font-weight: 500;
+}
+
+.rating-display {
+    color: #FFB800;
+    font-size: 1.1rem;
+}
+
+.rating-display i {
+    margin-left: 2px;
+}
+
+/* C. Color Label */
+.color-label-section {
+    margin-bottom: 15px;
+}
+
+.color-title {
+    font-size: 1rem;
+    color: #333;
+    font-weight: 500;
+}
+
+.color-title strong {
+    color: #6B4E9B;
+    font-weight: 700;
+}
+
+/* D. Color Selection Grid */
+.color-selection-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
+    gap: 12px;
+    margin-bottom: 30px;
+    padding: 20px;
+    background: #fafafa;
+    border: 1px solid #e5e5e5;
+    border-radius: 8px;
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.color-swatch {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 14px;
+    background: white;
+    border: 2px solid #e0e0e0;
+    border-radius: 25px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.color-swatch:hover:not(.inactive-swatch) {
+    border-color: #6B4E9B;
+    box-shadow: 0 2px 8px rgba(107, 78, 155, 0.2);
+    transform: translateY(-2px);
+}
+
+.color-swatch.active-swatch {
+    border-color: #6B4E9B;
+    background: #f0ebf7;
+    box-shadow: 0 0 0 3px rgba(107, 78, 155, 0.15);
+}
+
+.color-swatch.inactive-swatch {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.color-circle {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    display: inline-block;
+    flex-shrink: 0;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+}
+
+.color-name-text {
+    font-size: 0.9rem;
+    color: #333;
+    font-weight: 500;
+}
+
+/* E. Price Section */
+.price-section-block {
+    padding: 20px 0;
+    margin-bottom: 20px;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+.price-label {
+    font-size: 1rem;
+    color: #666;
+    font-weight: 500;
+    display: block;
+    margin-bottom: 8px;
+}
+
+.price-amount {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: #4169E1;
+}
+
+/* F. Stock Indicator */
+.stock-indicator-section {
+    margin-bottom: 25px;
+}
+
+.stock-text {
+    font-size: 1rem;
+    color: #28a745;
+    font-weight: 500;
+    margin-bottom: 10px;
+}
+
+.stock-text.out-of-stock {
+    color: #dc3545;
+}
+
+.stock-bar-green {
+    height: 6px;
+    background: #28a745;
+    border-radius: 3px;
+    width: 100%;
+}
+
+.stock-bar-red {
+    height: 6px;
+    background: #dc3545;
+    border-radius: 3px;
+    width: 100%;
+}
+
+/* G. Quantity Selector */
+.quantity-selector-section {
+    margin-bottom: 25px;
+}
+
+.qty-label {
+    font-size: 1rem;
+    font-weight: 600;
+    color: #333;
+    display: block;
+    margin-bottom: 12px;
+}
+
+.qty-selector-wrapper {
+    display: inline-flex;
+    align-items: center;
+    border: 2px solid #e0e0e0;
+    border-radius: 6px;
+    overflow: hidden;
+    background: white;
+}
+
+.qty-minus-btn,
+.qty-plus-btn {
+    background: white;
+    border: none;
+    width: 45px;
+    height: 45px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.3rem;
+    color: #555;
+    transition: all 0.3s ease;
+}
+
+.qty-minus-btn:hover:not(:disabled),
+.qty-plus-btn:hover:not(:disabled) {
+    background: #f5f5f5;
+    color: #6B4E9B;
+}
+
+.qty-minus-btn:disabled,
+.qty-plus-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+}
+
+.qty-number {
+    width: 70px;
+    height: 45px;
+    border: none;
+    border-left: 1px solid #e0e0e0;
+    border-right: 1px solid #e0e0e0;
+    text-align: center;
+    font-size: 1.1rem;
+    font-weight: 600;
+    background: white;
+    color: #333;
+}
+
+/* H. Buttons Section */
+.action-buttons-section {
+    display: flex;
+    gap: 15px;
+    margin-bottom: 30px;
+}
+
+.btn-add-cart {
+    flex: 1;
+    padding: 16px 30px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    border: none;
+    border-radius: 6px;
+    background: #2C2C2C;
+    color: white;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.btn-add-cart:hover:not(:disabled) {
+    background: #1a1a1a;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}
+
+.btn-add-cart:disabled {
+    background: #ccc;
+    cursor: not-allowed;
+}
+
+.btn-add-wishlist {
+    flex: 1;
+    padding: 16px 30px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    border: none;
+    border-radius: 6px;
+    background: #2C2C2C;
+    color: white;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.btn-add-wishlist:hover {
+    background: #1a1a1a;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}
+
+/* Short Description Box */
+.short-description-box {
+    padding: 20px;
+    background: #f9f9f9;
+    border: 1px solid #e5e5e5;
+    border-radius: 6px;
+    color: #555;
+    line-height: 1.7;
+}
+
+.short-description-box p {
+    margin: 0;
+}
+
+.product-meta {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
+.sku-label {
+    font-size: 0.85rem;
+    color: #777;
+}
+
+.sku-label strong {
+    color: #333;
+    font-weight: 600;
+}
+
+.rating-stars {
+    color: #FFB800;
+    font-size: 1rem;
+}
+
+.rating-stars i {
+    margin-right: 2px;
+}
+
+/* New Compact Product Layout Styles */
+.product-meta-compact {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 20px;
+    padding-bottom: 15px;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.sku-text {
+    font-size: 0.9rem;
+    color: #777;
+}
+
+.sku-text strong {
+    color: #333;
+    font-weight: 600;
+}
+
+.rating-stars-compact {
+    color: #FFB800;
+    font-size: 1rem;
+}
+
+.rating-stars-compact i {
+    margin-right: 2px;
+}
+
+.product-price-large {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: #6B4E9B;
+    margin-bottom: 15px;
+}
+
+.product-stock-info {
+    margin-bottom: 20px;
+}
+
+.stock-available {
+    color: #28a745;
+    font-weight: 500;
+    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.stock-available i {
+    font-size: 1.2rem;
+}
+
+.stock-unavailable {
+    color: #dc3545;
+    font-weight: 500;
+    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.stock-unavailable i {
+    font-size: 1.2rem;
+}
+
+.product-quantity-section {
+    margin-bottom: 25px;
+}
+
+.quantity-label {
+    font-size: 1rem;
+    font-weight: 600;
+    color: #333;
+    display: block;
+    margin-bottom: 10px;
+}
+
+.quantity-controls {
+    display: inline-flex;
+    align-items: center;
+    border: 2px solid #e0e0e0;
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+.qty-btn {
+    background: white;
+    border: none;
+    width: 45px;
+    height: 45px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.3rem;
+    color: #555;
+    transition: all 0.3s ease;
+}
+
+.qty-btn:hover:not(:disabled) {
+    background: #f0f0f0;
+    color: #6B4E9B;
+}
+
+.qty-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+}
+
+.qty-input {
+    width: 70px;
+    height: 45px;
+    border: none;
+    border-left: 1px solid #e0e0e0;
+    border-right: 1px solid #e0e0e0;
+    text-align: center;
+    font-size: 1.1rem;
+    font-weight: 600;
+    background: white;
+    color: #333;
+}
+
+.product-actions {
+    display: flex;
+    gap: 15px;
+    margin-bottom: 25px;
+}
+
+.btn-cart-main {
+    flex: 1;
+    padding: 15px 30px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    border: none;
+    border-radius: 6px;
+    background: #6B4E9B;
+    color: white;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.btn-cart-main:hover:not(:disabled) {
+    background: #5a3e82;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(107, 78, 155, 0.3);
+}
+
+.btn-cart-main:disabled {
+    background: #ccc;
+    cursor: not-allowed;
+}
+
+.btn-wishlist-icon {
+    width: 55px;
+    height: 55px;
+    border: 2px solid #e0e0e0;
+    border-radius: 6px;
+    background: white;
+    color: #666;
+    font-size: 1.5rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn-wishlist-icon:hover {
+    border-color: #E91E63;
+    color: #E91E63;
+    background: #fff5f8;
+}
+
+.product-color-info {
+    margin-bottom: 20px;
+    padding: 15px;
+    background: #f8f9fa;
+    border-radius: 6px;
+}
+
+.color-label {
+    font-weight: 600;
+    color: #333;
+    margin-right: 10px;
+}
+
+.color-value-badge {
+    display: inline-block;
+    padding: 5px 15px;
+    background: #6B4E9B;
+    color: white;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    font-weight: 500;
+}
+
+.product-short-desc {
+    padding: 15px;
+    background: #f8f9fa;
+    border-radius: 6px;
+    color: #555;
+    line-height: 1.6;
+}
+
+.product-short-desc p {
+    margin: 0;
+}
+
+/* Section Labels */
+.section-label {
+    font-size: 0.9rem;
+    font-weight: 700;
+    color: #333;
+    display: block;
+    margin-bottom: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.color-value {
+    font-weight: 500;
+    color: var(--primary-color);
+}
+
+/* Color Grid Selection */
+.color-selection-section {
+    border-top: 1px solid #e5e5e5;
+    padding-top: 20px;
+}
+
+.color-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
+    gap: 10px;
+    margin-top: 12px;
+}
+
+.color-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 12px;
+    border: 1.5px solid #ddd;
+    border-radius: 20px;
+    cursor: pointer;
+    transition: all 0.25s ease;
+    background: white;
+    font-size: 0.9rem;
+}
+
+.color-option:hover:not(.unavailable) {
+    border-color: var(--primary-color);
+    box-shadow: 0 2px 8px rgba(107, 78, 155, 0.15);
+}
+
+.color-option.active {
+    border-color: #6B4E9B;
+    background: #f8f6fb;
+    box-shadow: 0 0 0 2px rgba(107, 78, 155, 0.15);
+    font-weight: 600;
+}
+
+.color-circle-btn {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    display: inline-block;
+    flex-shrink: 0;
+}
+
+.color-name {
+    font-size: 0.85rem;
+    color: #4A5F66;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Price Section */
+.price-section {
+    border-top: 1px solid #e5e5e5;
+    padding-top: 20px;
+}
+
+.price-display {
+    font-size: 2rem;
+    color: var(--primary-color);
+    font-weight: 700;
+    margin-top: 5px;
+}
+
+/* Stock Section */
+.stock-section {
+    border-top: 1px solid #e5e5e5;
+    padding-top: 20px;
+}
+
+.stock-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.95rem;
+    margin-top: 5px;
+}
+
+.stock-info.available {
+    color: #28a745;
+}
+
+.stock-info.available i {
+    font-size: 1.2rem;
+}
+
+.stock-info.unavailable {
+    color: #dc3545;
+}
+
+.stock-info.unavailable i {
+    font-size: 1.2rem;
+}
+
+/* Quantity Controls */
+.quantity-section {
+    border-top: 1px solid #e5e5e5;
+    padding-top: 20px;
+}
+
+.quantity-wrapper {
+    display: inline-flex;
+    align-items: center;
+    border: 2px solid #e5e5e5;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-top: 5px;
+}
+
+.qty-control-btn {
+    background: white;
+    border: none;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    color: #4A5F66;
+    transition: all 0.3s ease;
+}
+
+.qty-control-btn:hover:not(:disabled) {
+    background: #f5f5f5;
+    color: var(--primary-color);
+}
+
+.qty-control-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+}
+
+.qty-display {
+    width: 60px;
+    height: 40px;
+    border: none;
+    border-left: 1px solid #e5e5e5;
+    border-right: 1px solid #e5e5e5;
+    text-align: center;
+    font-size: 1rem;
+    font-weight: 600;
+    background: white;
+    color: #4A5F66;
+}
+
+/* Action Buttons */
+.action-buttons-wrapper {
+    display: flex;
+    gap: 15px;
+    margin-top: 30px;
+}
+
+.btn-add-to-cart {
+    flex: 1;
+    padding: 14px 30px;
+    font-size: 1rem;
+    font-weight: 600;
+    border: none;
+    border-radius: 4px;
+    background: #2D5F6D;
+    color: white;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.btn-add-to-cart:hover:not(:disabled) {
+    background: #1E4555;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(45, 95, 109, 0.3);
+}
+
+.btn-add-to-wishlist {
+    flex: 1;
+    padding: 14px 30px;
+    font-size: 1rem;
+    font-weight: 600;
+    border: none;
+    border-radius: 4px;
+    background: #5D7B86;
+    color: white;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.btn-add-to-wishlist:hover {
+    background: #4A6370;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(93, 123, 134, 0.3);
+}
+
+/* Description Section */
+.product-description-tabs {
+    border-top: 1px solid #e5e5e5;
+    padding-top: 30px;
+}
+
+.description-title {
+    font-size: 1.5rem;
+    color: #4A5F66;
+    font-weight: 600;
+    margin-bottom: 20px;
+}
+
+.description-content {
+    color: #666;
+    line-height: 1.8;
+    font-size: 0.95rem;
+}
+
+.product-description-section {
+    background: var(--bg-light);
+    padding: var(--spacing-lg);
+    border-radius: 8px;
+}
+
+.product-description-section .section-title {
+    font-size: 2rem;
+    color: var(--text-color);
+    border-bottom: 3px solid var(--primary-color);
+    padding-bottom: 10px;
+}
+
+.product-full-description {
+    font-size: 1rem;
+    line-height: 1.8;
+    color: var(--text-color);
+}
+
+.product-full-description p {
+    margin-bottom: 1rem;
+}
+
+.product-full-description ul,
+.product-full-description ol {
+    margin-left: 1.5rem;
+    margin-bottom: 1rem;
+}
+
+.product-full-description li {
+    margin-bottom: 0.5rem;
+}
+
+.product-full-description h1,
+.product-full-description h2,
+.product-full-description h3 {
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
+    color: var(--primary-color);
+}
+
+/* Product Card Link Styling */
+.product-card .product-link {
+    text-decoration: none;
+    color: inherit;
+    display: block;
+}
+
+.product-card .product-link:hover h3 {
+    color: var(--primary-color);
+}
+
diff --git a/website/assets/css/navbar.css b/website/assets/css/navbar.css
new file mode 100644
index 0000000..a02df19
--- /dev/null
+++ b/website/assets/css/navbar.css
@@ -0,0 +1,422 @@
+/* Modern Navbar Styles */
+.modern-navbar {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  background: #ffffff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  font-family: 'Roboto', sans-serif;
+}
+
+.navbar-wrapper {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 72px;
+}
+
+/* Logo Section */
+.navbar-brand {
+  flex-shrink: 0;
+}
+
+.brand-link {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  text-decoration: none;
+  transition: opacity 0.2s;
+}
+
+.brand-link:hover {
+  opacity: 0.8;
+}
+
+.brand-logo {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+  border-radius: 8px;
+}
+
+.brand-name {
+  font-size: 20px;
+  font-weight: 600;
+  color: #1a1a1a;
+  letter-spacing: 0.3px;
+  white-space: nowrap;
+}
+
+/* Main Navigation */
+.navbar-menu {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  padding: 0 32px;
+}
+
+.nav-menu-list {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav-item {
+  margin: 0;
+}
+
+.nav-link {
+  display: block;
+  padding: 10px 20px;
+  font-size: 15px;
+  font-weight: 500;
+  color: #4a4a4a;
+  text-decoration: none;
+  border-radius: 6px;
+  transition: all 0.2s;
+  letter-spacing: 0.3px;
+}
+
+.nav-link:hover,
+.nav-link.active {
+  color: #6b46c1;
+  background: #f3f0ff;
+}
+
+/* Right Actions */
+.navbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.action-item {
+  position: relative;
+}
+
+.action-btn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border: none;
+  background: transparent;
+  color: #4a4a4a;
+  font-size: 22px;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.action-btn:hover {
+  background: #f5f5f5;
+  color: #6b46c1;
+}
+
+.action-badge {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  background: #dc2626;
+  color: white;
+  font-size: 11px;
+  font-weight: 600;
+  border-radius: 9px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.action-badge.show {
+  display: flex;
+}
+
+/* Dropdown Styles */
+.action-dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  width: 380px;
+  max-height: 500px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  display: none;
+  flex-direction: column;
+  z-index: 1001;
+}
+
+.action-dropdown.active {
+  display: flex;
+}
+
+.dropdown-head {
+  padding: 20px;
+  border-bottom: 1px solid #e5e5e5;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dropdown-head h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.dropdown-close {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  color: #6b7280;
+  font-size: 18px;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.dropdown-close:hover {
+  background: #f3f4f6;
+  color: #1a1a1a;
+}
+
+.dropdown-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  max-height: 350px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 40px 20px;
+  color: #9ca3af;
+  font-size: 15px;
+}
+
+.dropdown-foot {
+  padding: 16px 20px;
+  border-top: 1px solid #e5e5e5;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.cart-summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+}
+
+.summary-label {
+  font-size: 15px;
+  font-weight: 500;
+  color: #6b7280;
+}
+
+.summary-value {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1a1a1a;
+}
+
+/* Buttons */
+.btn-primary-full,
+.btn-outline,
+.btn-text {
+  display: block;
+  text-align: center;
+  padding: 12px 20px;
+  font-size: 15px;
+  font-weight: 500;
+  text-decoration: none;
+  border-radius: 8px;
+  transition: all 0.2s;
+  border: none;
+  cursor: pointer;
+}
+
+.btn-primary-full {
+  background: #6b46c1;
+  color: white;
+}
+
+.btn-primary-full:hover {
+  background: #5936a3;
+}
+
+.btn-outline {
+  background: transparent;
+  color: #6b46c1;
+  border: 1px solid #6b46c1;
+}
+
+.btn-outline:hover {
+  background: #f3f0ff;
+}
+
+.btn-text {
+  background: transparent;
+  color: #6b7280;
+  padding: 8px;
+}
+
+.btn-text:hover {
+  color: #1a1a1a;
+}
+
+/* Mobile Toggle */
+.mobile-toggle {
+  display: none;
+  flex-direction: column;
+  gap: 5px;
+  width: 44px;
+  height: 44px;
+  padding: 10px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background 0.2s;
+}
+
+.mobile-toggle:hover {
+  background: #f5f5f5;
+}
+
+.toggle-line {
+  width: 100%;
+  height: 2px;
+  background: #4a4a4a;
+  border-radius: 2px;
+  transition: all 0.3s;
+}
+
+/* Mobile Menu */
+.mobile-menu {
+  position: fixed;
+  top: 0;
+  right: -100%;
+  width: 320px;
+  height: 100vh;
+  background: white;
+  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
+  z-index: 1002;
+  transition: right 0.3s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.mobile-menu.active {
+  right: 0;
+}
+
+.mobile-menu-header {
+  padding: 24px;
+  border-bottom: 1px solid #e5e5e5;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.mobile-brand {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.mobile-close {
+  width: 36px;
+  height: 36px;
+  border: none;
+  background: transparent;
+  color: #6b7280;
+  font-size: 20px;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mobile-close:hover {
+  background: #f3f4f6;
+}
+
+.mobile-menu-list {
+  list-style: none;
+  margin: 0;
+  padding: 16px;
+}
+
+.mobile-menu-list li {
+  margin-bottom: 4px;
+}
+
+.mobile-link {
+  display: block;
+  padding: 14px 16px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #4a4a4a;
+  text-decoration: none;
+  border-radius: 8px;
+  transition: all 0.2s;
+}
+
+.mobile-link:hover,
+.mobile-link.active {
+  color: #6b46c1;
+  background: #f3f0ff;
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .navbar-menu {
+    display: none;
+  }
+
+  .mobile-toggle {
+    display: flex;
+  }
+}
+
+@media (max-width: 640px) {
+  .navbar-wrapper {
+    padding: 0 16px;
+    height: 64px;
+  }
+
+  .brand-name {
+    font-size: 18px;
+  }
+
+  .brand-logo {
+    width: 40px;
+    height: 40px;
+  }
+
+  .action-dropdown {
+    width: 100vw;
+    max-width: 380px;
+    right: -16px;
+  }
+}
diff --git a/website/assets/css/shopping.css b/website/assets/css/shopping.css
new file mode 100644
index 0000000..a2802fe
--- /dev/null
+++ b/website/assets/css/shopping.css
@@ -0,0 +1,299 @@
+/* Cart and Wishlist Item Styles */
+
+/* Cart Items */
+.cart-item {
+  display: flex;
+  gap: 12px;
+  padding: 16px;
+  background: #fafafa;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  transition: all 0.2s;
+}
+
+.cart-item:hover {
+  background: #f5f5f5;
+}
+
+.cart-item-image {
+  flex-shrink: 0;
+  width: 80px;
+  height: 80px;
+  border-radius: 6px;
+  overflow: hidden;
+  background: white;
+}
+
+.cart-item-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cart-item-details {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.cart-item-name {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #1a1a1a;
+  line-height: 1.4;
+}
+
+.cart-item-price {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 700;
+  color: #6b46c1;
+}
+
+.cart-item-quantity {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.qty-btn {
+  width: 28px;
+  height: 28px;
+  border: 1px solid #d1d5db;
+  background: white;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: #6b7280;
+}
+
+.qty-btn:hover {
+  border-color: #6b46c1;
+  color: #6b46c1;
+  background: #f3f0ff;
+}
+
+.qty-value {
+  min-width: 32px;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.cart-item-actions {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+
+.cart-item-remove {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  color: #9ca3af;
+  font-size: 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.cart-item-remove:hover {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+.cart-item-total {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  color: #1a1a1a;
+}
+
+/* Wishlist Items */
+.wishlist-item {
+  display: flex;
+  gap: 12px;
+  padding: 16px;
+  background: #fafafa;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  position: relative;
+  transition: all 0.2s;
+}
+
+.wishlist-item:hover {
+  background: #f5f5f5;
+}
+
+.wishlist-item-image {
+  flex-shrink: 0;
+  width: 80px;
+  height: 80px;
+  border-radius: 6px;
+  overflow: hidden;
+  background: white;
+}
+
+.wishlist-item-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.wishlist-item-details {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.wishlist-item-name {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #1a1a1a;
+  line-height: 1.4;
+  padding-right: 24px;
+}
+
+.wishlist-item-price {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 700;
+  color: #6b46c1;
+}
+
+.btn-move-to-cart {
+  align-self: flex-start;
+  padding: 6px 14px;
+  border: 1px solid #6b46c1;
+  background: transparent;
+  color: #6b46c1;
+  font-size: 13px;
+  font-weight: 500;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: all 0.2s;
+}
+
+.btn-move-to-cart:hover {
+  background: #6b46c1;
+  color: white;
+}
+
+.wishlist-item-remove {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  color: #9ca3af;
+  font-size: 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.wishlist-item-remove:hover {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+/* Notifications */
+.notification {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  min-width: 280px;
+  padding: 16px 20px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  z-index: 10000;
+  transform: translateY(100px);
+  opacity: 0;
+  transition: all 0.3s ease;
+  font-family: 'Roboto', sans-serif;
+}
+
+.notification.show {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.notification i {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.notification-success {
+  border-left: 4px solid #10b981;
+}
+
+.notification-success i {
+  color: #10b981;
+}
+
+.notification-info {
+  border-left: 4px solid #3b82f6;
+}
+
+.notification-info i {
+  color: #3b82f6;
+}
+
+.notification span {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 500;
+  color: #1a1a1a;
+}
+
+/* Mobile Responsive */
+@media (max-width: 640px) {
+  .cart-item,
+  .wishlist-item {
+    padding: 12px;
+  }
+
+  .cart-item-image,
+  .wishlist-item-image {
+    width: 64px;
+    height: 64px;
+  }
+
+  .cart-item-name,
+  .wishlist-item-name {
+    font-size: 13px;
+  }
+
+  .notification {
+    right: 16px;
+    left: 16px;
+    min-width: auto;
+  }
+}
diff --git a/website/assets/images/about-1.jpg b/website/assets/images/about-1.jpg
new file mode 100644
index 0000000..4db8af9
Binary files /dev/null and b/website/assets/images/about-1.jpg differ
diff --git a/website/assets/images/about-2.jpg b/website/assets/images/about-2.jpg
new file mode 100644
index 0000000..4db8af9
Binary files /dev/null and b/website/assets/images/about-2.jpg differ
diff --git a/website/assets/images/cardmaking.jpg b/website/assets/images/cardmaking.jpg
new file mode 100644
index 0000000..4db8af9
Binary files /dev/null and b/website/assets/images/cardmaking.jpg differ
diff --git a/website/assets/images/craft-supplies.jpg b/website/assets/images/craft-supplies.jpg
new file mode 100644
index 0000000..4db8af9
Binary files /dev/null and b/website/assets/images/craft-supplies.jpg differ
diff --git a/website/assets/images/hero-craft.jpg b/website/assets/images/hero-craft.jpg
new file mode 100644
index 0000000..4db8af9
Binary files /dev/null and b/website/assets/images/hero-craft.jpg differ
diff --git a/website/assets/images/journals.jpg b/website/assets/images/journals.jpg
new file mode 100644
index 0000000..4db8af9
Binary files /dev/null and b/website/assets/images/journals.jpg differ
diff --git a/website/assets/images/products/placeholder.jpg b/website/assets/images/products/placeholder.jpg
new file mode 100644
index 0000000..4db8af9
Binary files /dev/null and b/website/assets/images/products/placeholder.jpg differ
diff --git a/website/assets/images/products/product-1.jpg b/website/assets/images/products/product-1.jpg
new file mode 100644
index 0000000..4db8af9
Binary files /dev/null and b/website/assets/images/products/product-1.jpg differ
diff --git a/website/assets/images/products/product-2.jpg b/website/assets/images/products/product-2.jpg
new file mode 100644
index 0000000..4db8af9
Binary files /dev/null and b/website/assets/images/products/product-2.jpg differ
diff --git a/website/assets/images/products/product-3.jpg b/website/assets/images/products/product-3.jpg
new file mode 100644
index 0000000..4db8af9
Binary files /dev/null and b/website/assets/images/products/product-3.jpg differ
diff --git a/website/assets/images/products/product-4.jpg b/website/assets/images/products/product-4.jpg
new file mode 100644
index 0000000..4db8af9
Binary files /dev/null and b/website/assets/images/products/product-4.jpg differ
diff --git a/website/assets/images/stickers.jpg b/website/assets/images/stickers.jpg
new file mode 100644
index 0000000..4db8af9
Binary files /dev/null and b/website/assets/images/stickers.jpg differ
diff --git a/website/assets/images/washi-tape.jpg b/website/assets/images/washi-tape.jpg
new file mode 100644
index 0000000..4db8af9
Binary files /dev/null and b/website/assets/images/washi-tape.jpg differ
diff --git a/website/assets/js/admin.js b/website/assets/js/admin.js
new file mode 100644
index 0000000..eaa8e73
--- /dev/null
+++ b/website/assets/js/admin.js
@@ -0,0 +1,155 @@
+// Sky Art Shop - Admin Panel Functions
+
+// Delete confirmation with fetch
+function deleteWithConfirmation(url, itemName, redirectUrl) {
+  if (!confirm(`Are you sure you want to delete ${itemName}?`)) {
+    return false;
+  }
+
+  fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  })
+    .then((response) => {
+      if (response.ok) {
+        window.location.href = redirectUrl || window.location.href;
+      } else {
+        alert("Delete failed. Please try again.");
+      }
+    })
+    .catch((error) => {
+      alert("Error: " + error.message);
+    });
+
+  return false;
+}
+
+// Image upload with preview
+function uploadImageWithPreview(fileInputId, previewId, urlInputId) {
+  const input = document.getElementById(fileInputId);
+  const file = input.files[0];
+
+  if (!file) {
+    alert("Please select a file");
+    return;
+  }
+
+  const formData = new FormData();
+  formData.append("file", file);
+
+  fetch("/admin/upload/image", {
+    method: "POST",
+    body: formData,
+  })
+    .then((response) => response.json())
+    .then((result) => {
+      if (result.success) {
+        document.getElementById(urlInputId).value = result.url;
+        const preview = document.getElementById(previewId);
+        if (preview) {
+          preview.src = result.url;
+          preview.style.display = "block";
+        }
+        showAdminNotification("Image uploaded successfully!", "success");
+      } else {
+        showAdminNotification("Upload failed: " + result.message, "error");
+      }
+    })
+    .catch((error) => {
+      showAdminNotification("Upload error: " + error.message, "error");
+    });
+}
+
+// Show admin notification
+function showAdminNotification(message, type = "success") {
+  const notification = document.createElement("div");
+  notification.className = `alert alert-${
+    type === "success" ? "success" : "danger"
+  } alert-dismissible fade show`;
+  notification.style.cssText =
+    "position: fixed; top: 20px; right: 20px; z-index: 9999; min-width: 300px;";
+  notification.innerHTML = `
+        ${message}
+        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+    `;
+
+  document.body.appendChild(notification);
+
+  setTimeout(() => {
+    notification.classList.remove("show");
+    setTimeout(() => notification.remove(), 150);
+  }, 3000);
+}
+
+// Copy to clipboard
+function copyToClipboard(text) {
+  navigator.clipboard
+    .writeText(text)
+    .then(() => {
+      showAdminNotification("Copied to clipboard!", "success");
+    })
+    .catch(() => {
+      showAdminNotification("Failed to copy", "error");
+    });
+}
+
+// Auto-generate slug from title
+function generateSlugFromTitle(titleInputId, slugInputId) {
+  const titleInput = document.getElementById(titleInputId);
+  const slugInput = document.getElementById(slugInputId);
+
+  if (titleInput && slugInput) {
+    titleInput.addEventListener("input", function () {
+      if (slugInput.value === "" || slugInput.dataset.auto === "true") {
+        slugInput.value = titleInput.value
+          .toLowerCase()
+          .replace(/[^a-z0-9]+/g, "-")
+          .replace(/(^-|-$)/g, "");
+        slugInput.dataset.auto = "true";
+      }
+    });
+
+    slugInput.addEventListener("input", function () {
+      slugInput.dataset.auto = "false";
+    });
+  }
+}
+
+// Form validation helper
+function validateForm(formId) {
+  const form = document.getElementById(formId);
+  if (!form) return true;
+
+  const requiredFields = form.querySelectorAll("[required]");
+  let isValid = true;
+
+  requiredFields.forEach((field) => {
+    if (!field.value.trim()) {
+      field.classList.add("is-invalid");
+      isValid = false;
+    } else {
+      field.classList.remove("is-invalid");
+    }
+  });
+
+  if (!isValid) {
+    showAdminNotification("Please fill in all required fields", "error");
+  }
+
+  return isValid;
+}
+
+// Initialize tooltips
+document.addEventListener("DOMContentLoaded", function () {
+  // Bootstrap tooltips
+  var tooltipTriggerList = [].slice.call(
+    document.querySelectorAll('[data-bs-toggle="tooltip"]')
+  );
+  if (typeof bootstrap !== "undefined") {
+    tooltipTriggerList.map(function (tooltipTriggerEl) {
+      return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+  }
+});
diff --git a/website/assets/js/cart.js b/website/assets/js/cart.js
new file mode 100644
index 0000000..c6bd3bc
--- /dev/null
+++ b/website/assets/js/cart.js
@@ -0,0 +1,378 @@
+// Sky Art Shop - Shopping Cart Functions
+
+// Add item to cart
+function addToCart(id, name, price, imageUrl = null) {
+  // Get existing cart from localStorage
+  let cart = JSON.parse(localStorage.getItem("cart") || "[]");
+
+  // Check if item already exists
+  const existingItem = cart.find((item) => item.id === id);
+
+  if (existingItem) {
+    existingItem.quantity++;
+    // Update imageUrl if it was null before
+    if (!existingItem.imageUrl && imageUrl) {
+      existingItem.imageUrl = imageUrl;
+    }
+  } else {
+    cart.push({ id, name, price, quantity: 1, imageUrl });
+  }
+
+  // Save cart
+  localStorage.setItem("cart", JSON.stringify(cart));
+  console.log("Cart updated:", cart);
+
+  // Show confirmation
+  showCartNotification(`${name} added to cart!`);
+  updateCartCount();
+}
+
+// Remove item from cart
+function removeFromCart(id) {
+  let cart = JSON.parse(localStorage.getItem("cart") || "[]");
+  cart = cart.filter((item) => item.id !== id);
+  localStorage.setItem("cart", JSON.stringify(cart));
+  updateCartCount();
+}
+
+// Update cart item quantity
+function updateCartQuantity(id, quantity) {
+  let cart = JSON.parse(localStorage.getItem("cart") || "[]");
+  const item = cart.find((item) => item.id === id);
+  if (item) {
+    item.quantity = quantity;
+    if (quantity <= 0) {
+      cart = cart.filter((item) => item.id !== id);
+    }
+  }
+  localStorage.setItem("cart", JSON.stringify(cart));
+  updateCartCount();
+}
+
+// Get cart items
+function getCart() {
+  return JSON.parse(localStorage.getItem("cart") || "[]");
+}
+
+// Get cart total
+function getCartTotal() {
+  const cart = getCart();
+  return cart.reduce((total, item) => total + item.price * item.quantity, 0);
+}
+
+// Update cart count badge
+function updateCartCount() {
+  const cart = getCart();
+  const count = cart.reduce((total, item) => total + item.quantity, 0);
+
+  // Update old badge (if exists)
+  const badge = document.getElementById("cart-count");
+  if (badge) {
+    badge.textContent = count;
+    badge.style.display = count > 0 ? "inline" : "none";
+  }
+
+  // Update navbar cart badge
+  const navCartBadge = document.querySelector("#cartBtn .badge");
+  if (navCartBadge) {
+    navCartBadge.textContent = count;
+    navCartBadge.style.display = count > 0 ? "block" : "none";
+  }
+}
+
+// Show cart notification
+function showCartNotification(message) {
+  const notification = document.createElement("div");
+  notification.className = "cart-notification";
+  notification.textContent = message;
+  notification.style.cssText = `
+        position: fixed;
+        top: 80px;
+        right: 20px;
+        background: #4CAF50;
+        color: white;
+        padding: 15px 25px;
+        border-radius: 5px;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.2);
+        z-index: 10000;
+        animation: slideInFromTop 0.3s ease;
+    `;
+
+  document.body.appendChild(notification);
+
+  setTimeout(() => {
+    notification.style.animation = "slideOut 0.3s ease";
+    setTimeout(() => notification.remove(), 300);
+  }, 3000);
+}
+
+// Clear entire cart
+function clearCart() {
+  localStorage.removeItem("cart");
+  updateCartCount();
+}
+
+// ====================================
+// Wishlist Functions
+// ====================================
+
+// Add item to wishlist
+function addToWishlist(id, name, price, imageUrl) {
+  let wishlist = JSON.parse(localStorage.getItem("wishlist") || "[]");
+
+  const existingItem = wishlist.find((item) => item.id === id);
+
+  if (existingItem) {
+    showWishlistNotification(`${name} is already in your wishlist!`);
+    return;
+  }
+
+  wishlist.push({ id, name, price, imageUrl });
+  localStorage.setItem("wishlist", JSON.stringify(wishlist));
+  console.log("Wishlist updated:", wishlist);
+
+  showWishlistNotification(`${name} added to wishlist!`);
+  updateWishlistCount();
+}
+
+// Remove item from wishlist
+function removeFromWishlist(id) {
+  let wishlist = JSON.parse(localStorage.getItem("wishlist") || "[]");
+  wishlist = wishlist.filter((item) => item.id !== id);
+  localStorage.setItem("wishlist", JSON.stringify(wishlist));
+  updateWishlistCount();
+}
+
+// Get wishlist items
+function getWishlist() {
+  return JSON.parse(localStorage.getItem("wishlist") || "[]");
+}
+
+// Update wishlist count badge
+function updateWishlistCount() {
+  const wishlist = getWishlist();
+  const count = wishlist.length;
+
+  const navWishlistBadge = document.querySelector("#wishlistBtn .badge");
+  const wishlistIcon = document.querySelector("#wishlistBtn i");
+
+  if (navWishlistBadge) {
+    navWishlistBadge.textContent = count;
+    navWishlistBadge.style.display = count > 0 ? "block" : "none";
+  }
+
+  // Change heart icon based on wishlist status
+  if (wishlistIcon) {
+    if (count > 0) {
+      wishlistIcon.className = "bi bi-heart-fill";
+      wishlistIcon.style.color = "#e74c3c";
+    } else {
+      wishlistIcon.className = "bi bi-heart";
+      wishlistIcon.style.color = "";
+    }
+  }
+}
+
+// Show wishlist notification
+function showWishlistNotification(message) {
+  const notification = document.createElement("div");
+  notification.className = "wishlist-notification";
+  notification.textContent = message;
+  notification.style.cssText = `
+        position: fixed;
+        top: 80px;
+        right: 20px;
+        background: #E91E63;
+        color: white;
+        padding: 15px 25px;
+        border-radius: 5px;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.2);
+        z-index: 10000;
+        animation: slideInFromTop 0.3s ease;
+    `;
+
+  document.body.appendChild(notification);
+
+  setTimeout(() => {
+    notification.style.animation = "slideOut 0.3s ease";
+    setTimeout(() => notification.remove(), 300);
+  }, 3000);
+}
+
+// Clear entire wishlist
+function clearWishlist() {
+  localStorage.removeItem("wishlist");
+  updateWishlistCount();
+}
+
+// ====================================
+// Dropdown Functions
+// ====================================
+// Render cart dropdown
+function renderCartDropdown() {
+  const cart = getCart();
+  const cartItems = document.getElementById("cartItems");
+  const cartTotal = document.getElementById("cartTotal");
+
+  if (!cartItems) return;
+
+  if (cart.length === 0) {
+    cartItems.innerHTML = '<p class="empty-message">Your cart is empty</p>';
+    if (cartTotal) cartTotal.textContent = "$0.00";
+    return;
+  }
+
+  console.log("Rendering cart:", cart);
+
+  cartItems.innerHTML = cart
+    .map((item) => {
+      const imgSrc = item.imageUrl || "/assets/images/placeholder.jpg";
+      console.log("Cart item image URL:", imgSrc);
+      return `
+        <div class="dropdown-item">
+            <img src="${imgSrc}" alt="${
+        item.name
+      }" class="dropdown-item-image" onerror="this.src='/assets/images/placeholder.jpg'">
+            <div class="dropdown-item-info">
+                <div class="dropdown-item-name">${item.name}</div>
+                <div class="dropdown-item-details">
+                    <span class="dropdown-item-quantity">Qty: ${
+                      item.quantity
+                    }</span>
+                    <span class="dropdown-item-price">$${(
+                      item.price * item.quantity
+                    ).toFixed(2)}</span>
+                </div>
+            </div>
+            <button class="dropdown-item-remove" onclick="removeFromCartDropdown('${
+              item.id
+            }')">
+                <i class="bi bi-x"></i>
+            </button>
+        </div>
+    `;
+    })
+    .join("");
+
+  if (cartTotal) {
+    const total = getCartTotal();
+    cartTotal.textContent = `$${total.toFixed(2)}`;
+  }
+}
+
+// Render wishlist dropdown
+function renderWishlistDropdown() {
+  const wishlist = getWishlist();
+  const wishlistItems = document.getElementById("wishlistItems");
+
+  if (!wishlistItems) return;
+
+  if (wishlist.length === 0) {
+    wishlistItems.innerHTML =
+      '<p class="empty-message">Your wishlist is empty</p>';
+    return;
+  }
+
+  console.log("Rendering wishlist:", wishlist);
+
+  wishlistItems.innerHTML = wishlist
+    .map((item) => {
+      const imgSrc = item.imageUrl || "/assets/images/placeholder.jpg";
+      console.log("Wishlist item image URL:", imgSrc);
+      return `
+        <div class="dropdown-item">
+            <img src="${imgSrc}" alt="${
+        item.name
+      }" class="dropdown-item-image" onerror="this.src='/assets/images/placeholder.jpg'">
+            <div class="dropdown-item-info">
+                <div class="dropdown-item-name">${item.name}</div>
+                <div class="dropdown-item-details">
+                    <span class="dropdown-item-price">$${item.price.toFixed(
+                      2
+                    )}</span>
+                </div>
+            </div>
+            <button class="dropdown-item-remove" onclick="removeFromWishlistDropdown('${
+              item.id
+            }')">
+                <i class="bi bi-x"></i>
+            </button>
+        </div>
+    `;
+    })
+    .join("");
+}
+
+// Remove from cart via dropdown
+function removeFromCartDropdown(id) {
+  removeFromCart(id);
+  renderCartDropdown();
+  updateCartCount();
+}
+
+// Remove from wishlist via dropdown
+function removeFromWishlistDropdown(id) {
+  removeFromWishlist(id);
+  renderWishlistDropdown();
+  updateWishlistCount();
+}
+
+// Toggle dropdown visibility
+function toggleDropdown(dropdownId) {
+  const dropdown = document.getElementById(dropdownId);
+  if (!dropdown) return;
+
+  // Close other dropdowns
+  document.querySelectorAll(".icon-dropdown").forEach((d) => {
+    if (d.id !== dropdownId) {
+      d.classList.remove("show");
+    }
+  });
+
+  dropdown.classList.toggle("show");
+
+  // Render content when opening
+  if (dropdown.classList.contains("show")) {
+    if (dropdownId === "cartDropdown") {
+      renderCartDropdown();
+    } else if (dropdownId === "wishlistDropdown") {
+      renderWishlistDropdown();
+    }
+  }
+}
+
+// Close cart/wishlist dropdowns when clicking outside
+document.addEventListener("click", function (e) {
+  if (
+    !e.target.closest(".dropdown-container") &&
+    !e.target.closest(".nav-toggle")
+  ) {
+    document.querySelectorAll(".icon-dropdown").forEach((d) => {
+      d.classList.remove("show");
+    });
+  }
+});
+
+// Initialize cart and wishlist count on page load
+document.addEventListener("DOMContentLoaded", function () {
+  updateCartCount();
+  updateWishlistCount();
+
+  // Add click handlers for dropdown toggles
+  const cartBtn = document.getElementById("cartBtn");
+  const wishlistBtn = document.getElementById("wishlistBtn");
+
+  if (cartBtn) {
+    cartBtn.addEventListener("click", function (e) {
+      e.preventDefault();
+      toggleDropdown("cartDropdown");
+    });
+  }
+
+  if (wishlistBtn) {
+    wishlistBtn.addEventListener("click", function (e) {
+      e.preventDefault();
+      toggleDropdown("wishlistDropdown");
+    });
+  }
+});
diff --git a/website/assets/js/main.js b/website/assets/js/main.js
new file mode 100644
index 0000000..46e3c4a
--- /dev/null
+++ b/website/assets/js/main.js
@@ -0,0 +1,427 @@
+// Sky Art Shop - Main JavaScript File
+
+// ====================================
+// Mobile Navigation Toggle
+// ====================================
+document.addEventListener("DOMContentLoaded", function () {
+  const navToggle = document.querySelector(".nav-toggle");
+  const navMenu = document.querySelector("#navDropdown");
+
+  if (navToggle && navMenu) {
+    // Hover to open dropdown
+    navToggle.addEventListener("mouseenter", function () {
+      navMenu.classList.add("active");
+      this.setAttribute("aria-expanded", "true");
+
+      const spans = this.querySelectorAll("span");
+      spans[0].style.transform = "rotate(45deg) translate(7px, 7px)";
+      spans[1].style.opacity = "0";
+      spans[2].style.transform = "rotate(-45deg) translate(7px, -7px)";
+    });
+
+    // Keep dropdown open when hovering over it
+    navMenu.addEventListener("mouseenter", function () {
+      this.classList.add("active");
+    });
+
+    // Close when mouse leaves both hamburger and dropdown
+    navToggle.addEventListener("mouseleave", function (e) {
+      // Delay closing to allow moving to dropdown
+      setTimeout(() => {
+        if (!navMenu.matches(":hover") && !navToggle.matches(":hover")) {
+          navMenu.classList.remove("active");
+          navToggle.setAttribute("aria-expanded", "false");
+
+          const spans = navToggle.querySelectorAll("span");
+          spans[0].style.transform = "none";
+          spans[1].style.opacity = "1";
+          spans[2].style.transform = "none";
+        }
+      }, 200);
+    });
+
+    navMenu.addEventListener("mouseleave", function () {
+      setTimeout(() => {
+        if (!navMenu.matches(":hover") && !navToggle.matches(":hover")) {
+          navMenu.classList.remove("active");
+          navToggle.setAttribute("aria-expanded", "false");
+
+          const spans = navToggle.querySelectorAll("span");
+          spans[0].style.transform = "none";
+          spans[1].style.opacity = "1";
+          spans[2].style.transform = "none";
+        }
+      }, 200);
+    });
+
+    // Click to toggle (for mobile/touch)
+    navToggle.addEventListener("click", function (e) {
+      e.stopPropagation();
+      const isActive = navMenu.classList.toggle("active");
+      this.setAttribute("aria-expanded", isActive ? "true" : "false");
+
+      // Animate hamburger menu
+      const spans = this.querySelectorAll("span");
+      if (isActive) {
+        spans[0].style.transform = "rotate(45deg) translate(7px, 7px)";
+        spans[1].style.opacity = "0";
+        spans[2].style.transform = "rotate(-45deg) translate(7px, -7px)";
+      } else {
+        spans[0].style.transform = "none";
+        spans[1].style.opacity = "1";
+        spans[2].style.transform = "none";
+      }
+    });
+
+    // Close dropdown when clicking on a link
+    const dropdownLinks = navMenu.querySelectorAll("a");
+    dropdownLinks.forEach((link) => {
+      link.addEventListener("click", function () {
+        navMenu.classList.remove("active");
+        navToggle.setAttribute("aria-expanded", "false");
+        const spans = navToggle.querySelectorAll("span");
+        spans[0].style.transform = "none";
+        spans[1].style.opacity = "1";
+        spans[2].style.transform = "none";
+      });
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener("click", function (event) {
+      // Don't close if clicking on cart/wishlist dropdowns
+      if (
+        event.target.closest(".dropdown-container") ||
+        event.target.closest(".icon-dropdown")
+      ) {
+        return;
+      }
+
+      const isClickInside =
+        navToggle.contains(event.target) || navMenu.contains(event.target);
+      if (!isClickInside && navMenu.classList.contains("active")) {
+        navMenu.classList.remove("active");
+        navToggle.setAttribute("aria-expanded", "false");
+        const spans = navToggle.querySelectorAll("span");
+        spans[0].style.transform = "none";
+        spans[1].style.opacity = "1";
+        spans[2].style.transform = "none";
+      }
+    });
+  }
+});
+
+// ====================================
+// Smooth Scrolling for Anchor Links
+// ====================================
+document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
+  anchor.addEventListener("click", function (e) {
+    const href = this.getAttribute("href");
+    if (href !== "#" && href !== "#instagram" && href !== "#wishlist") {
+      e.preventDefault();
+      const target = document.querySelector(href);
+      if (target) {
+        target.scrollIntoView({
+          behavior: "smooth",
+          block: "start",
+        });
+      }
+    }
+  });
+});
+
+// ====================================
+// Shop Page Filtering
+// ====================================
+const categoryFilter = document.getElementById("category-filter");
+const sortFilter = document.getElementById("sort-filter");
+
+if (categoryFilter) {
+  categoryFilter.addEventListener("change", function () {
+    const selectedCategory = this.value;
+    const productCards = document.querySelectorAll(".product-card");
+
+    productCards.forEach((card) => {
+      if (selectedCategory === "all") {
+        card.style.display = "block";
+      } else {
+        const cardCategory = card.getAttribute("data-category");
+        if (cardCategory === selectedCategory) {
+          card.style.display = "block";
+        } else {
+          card.style.display = "none";
+        }
+      }
+    });
+  });
+}
+
+if (sortFilter) {
+  sortFilter.addEventListener("change", function () {
+    const sortValue = this.value;
+    const productsGrid = document.querySelector(".products-grid");
+    const productCards = Array.from(document.querySelectorAll(".product-card"));
+
+    if (sortValue === "price-low") {
+      productCards.sort((a, b) => {
+        const priceA = parseFloat(
+          a.querySelector(".price").textContent.replace("$", "")
+        );
+        const priceB = parseFloat(
+          b.querySelector(".price").textContent.replace("$", "")
+        );
+        return priceA - priceB;
+      });
+    } else if (sortValue === "price-high") {
+      productCards.sort((a, b) => {
+        const priceA = parseFloat(
+          a.querySelector(".price").textContent.replace("$", "")
+        );
+        const priceB = parseFloat(
+          b.querySelector(".price").textContent.replace("$", "")
+        );
+        return priceB - priceA;
+      });
+    }
+
+    // Re-append sorted cards
+    productCards.forEach((card) => {
+      productsGrid.appendChild(card);
+    });
+  });
+}
+
+// ====================================
+// Add to Cart Functionality (Basic)
+// ====================================
+document.querySelectorAll(".product-card .btn").forEach((button) => {
+  button.addEventListener("click", function (e) {
+    e.preventDefault();
+
+    // Get product details
+    const productCard = this.closest(".product-card");
+    const productName = productCard.querySelector("h3").textContent;
+    const productPrice = productCard.querySelector(".price").textContent;
+
+    // Show notification
+    showNotification(`${productName} added to cart!`);
+
+    // You can expand this to actually store cart items
+    // For example, using localStorage or sending to a server
+  });
+});
+
+// ====================================
+// Contact Form Handling
+// ====================================
+const contactForm = document.getElementById("contactForm");
+
+if (contactForm) {
+  contactForm.addEventListener("submit", function (e) {
+    e.preventDefault();
+
+    // Get form values
+    const name = document.getElementById("name").value;
+    const email = document.getElementById("email").value;
+    const phone = document.getElementById("phone").value;
+    const subject = document.getElementById("subject").value;
+    const message = document.getElementById("message").value;
+
+    // Basic validation
+    if (!name || !email || !subject || !message) {
+      showNotification("Please fill in all required fields!", "error");
+      return;
+    }
+
+    // Email validation
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) {
+      showNotification("Please enter a valid email address!", "error");
+      return;
+    }
+
+    // Here you would typically send the form data to a server
+    // For now, we'll just show a success message
+    showNotification(
+      "Thank you! Your message has been sent. We'll get back to you soon.",
+      "success"
+    );
+
+    // Reset form
+    contactForm.reset();
+  });
+}
+
+// ====================================
+// Notification System
+// ====================================
+function showNotification(message, type = "success") {
+  // Create notification element
+  const notification = document.createElement("div");
+  notification.className = `notification notification-${type}`;
+  notification.textContent = message;
+
+  // Style the notification
+  notification.style.cssText = `
+        position: fixed;
+        top: 100px;
+        right: 20px;
+        background-color: ${type === "success" ? "#4CAF50" : "#F44336"};
+        color: white;
+        padding: 15px 25px;
+        border-radius: 5px;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        z-index: 10000;
+        animation: slideIn 0.3s ease-out;
+    `;
+
+  // Add animation
+  const style = document.createElement("style");
+  style.textContent = `
+        @keyframes slideIn {
+            from {
+                transform: translateX(400px);
+                opacity: 0;
+            }
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+        @keyframes slideOut {
+            from {
+                transform: translateX(0);
+                opacity: 1;
+            }
+            to {
+                transform: translateX(400px);
+                opacity: 0;
+            }
+        }
+    `;
+  document.head.appendChild(style);
+
+  // Add to page
+  document.body.appendChild(notification);
+
+  // Remove after 3 seconds
+  setTimeout(() => {
+    notification.style.animation = "slideOut 0.3s ease-out";
+    setTimeout(() => {
+      notification.remove();
+    }, 300);
+  }, 3000);
+}
+
+// ====================================
+// Image Lazy Loading (Optional Enhancement)
+// ====================================
+if ("IntersectionObserver" in window) {
+  const imageObserver = new IntersectionObserver((entries, observer) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        const img = entry.target;
+        img.src = img.dataset.src || img.src;
+        img.classList.add("loaded");
+        observer.unobserve(img);
+      }
+    });
+  });
+
+  document.querySelectorAll("img").forEach((img) => {
+    imageObserver.observe(img);
+  });
+}
+
+// ====================================
+// Scroll to Top Button
+// ====================================
+function createScrollToTopButton() {
+  const button = document.createElement("button");
+  button.innerHTML = "↑";
+  button.className = "scroll-to-top";
+  button.style.cssText = `
+        position: fixed;
+        bottom: 30px;
+        right: 30px;
+        width: 50px;
+        height: 50px;
+        background-color: #6B4E9B;
+        color: white;
+        border: none;
+        border-radius: 50%;
+        font-size: 24px;
+        cursor: pointer;
+        display: none;
+        z-index: 1000;
+        transition: all 0.3s ease;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    `;
+
+  document.body.appendChild(button);
+
+  // Show/hide button based on scroll position
+  window.addEventListener("scroll", () => {
+    if (window.pageYOffset > 300) {
+      button.style.display = "block";
+    } else {
+      button.style.display = "none";
+    }
+  });
+
+  // Scroll to top when clicked
+  button.addEventListener("click", () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  });
+
+  // Hover effect
+  button.addEventListener("mouseenter", () => {
+    button.style.backgroundColor = "#5a3e82";
+    button.style.transform = "translateY(-3px)";
+  });
+
+  button.addEventListener("mouseleave", () => {
+    button.style.backgroundColor = "#6B4E9B";
+    button.style.transform = "translateY(0)";
+  });
+}
+
+// Initialize scroll to top button
+createScrollToTopButton();
+
+// ====================================
+// Portfolio Gallery Hover Effects
+// ====================================
+document.querySelectorAll(".portfolio-category").forEach((category) => {
+  category.addEventListener("mouseenter", function () {
+    this.style.transition = "all 0.3s ease";
+  });
+});
+
+// ====================================
+// Active Navigation Link Highlighting
+// ====================================
+function highlightActiveNavLink() {
+  const currentPage = window.location.pathname.split("/").pop() || "index.html";
+  const navLinks = document.querySelectorAll(".nav-menu a");
+
+  navLinks.forEach((link) => {
+    const linkPage = link.getAttribute("href").split("/").pop().split("#")[0];
+    if (linkPage === currentPage) {
+      link.classList.add("active");
+    }
+  });
+}
+
+highlightActiveNavLink();
+
+// ====================================
+// Print console message
+// ====================================
+console.log(
+  "%c Sky Art Shop Website ",
+  "background: #6B4E9B; color: white; font-size: 20px; padding: 10px;"
+);
+console.log("Welcome to Sky Art Shop! 🎨");
diff --git a/website/assets/js/shopping.js b/website/assets/js/shopping.js
new file mode 100644
index 0000000..00c1e36
--- /dev/null
+++ b/website/assets/js/shopping.js
@@ -0,0 +1,376 @@
+/**
+ * Enhanced Cart and Wishlist Management System
+ * Amazon/eBay-style product display with images and details
+ */
+
+class ShoppingManager {
+  constructor() {
+    this.cart = this.loadFromStorage("skyart_cart") || [];
+    this.wishlist = this.loadFromStorage("skyart_wishlist") || [];
+    this.init();
+  }
+
+  init() {
+    this.updateAllBadges();
+    this.setupEventListeners();
+    this.renderCart();
+    this.renderWishlist();
+  }
+
+  loadFromStorage(key) {
+    try {
+      const data = localStorage.getItem(key);
+      return data ? JSON.parse(data) : null;
+    } catch (e) {
+      console.error("Error loading from storage:", e);
+      return null;
+    }
+  }
+
+  saveToStorage(key, data) {
+    try {
+      localStorage.setItem(key, JSON.stringify(data));
+    } catch (e) {
+      console.error("Error saving to storage:", e);
+    }
+  }
+
+  setupEventListeners() {
+    // Cart toggle
+    const cartToggle = document.getElementById("cartToggle");
+    const cartPanel = document.getElementById("cartPanel");
+    const cartClose = document.getElementById("cartClose");
+
+    if (cartToggle) {
+      cartToggle.addEventListener("click", (e) => {
+        e.stopPropagation();
+        cartPanel?.classList.toggle("active");
+        document.getElementById("wishlistPanel")?.classList.remove("active");
+      });
+    }
+
+    if (cartClose) {
+      cartClose.addEventListener("click", (e) => {
+        e.stopPropagation();
+        cartPanel?.classList.remove("active");
+      });
+    }
+
+    // Wishlist toggle
+    const wishlistToggle = document.getElementById("wishlistToggle");
+    const wishlistPanel = document.getElementById("wishlistPanel");
+    const wishlistClose = document.getElementById("wishlistClose");
+
+    if (wishlistToggle) {
+      wishlistToggle.addEventListener("click", (e) => {
+        e.stopPropagation();
+        wishlistPanel?.classList.toggle("active");
+        cartPanel?.classList.remove("active");
+      });
+    }
+
+    if (wishlistClose) {
+      wishlistClose.addEventListener("click", (e) => {
+        e.stopPropagation();
+        wishlistPanel?.classList.remove("active");
+      });
+    }
+
+    // Mobile menu
+    const mobileToggle = document.getElementById("mobileMenuToggle");
+    const mobileMenu = document.getElementById("mobileMenu");
+    const mobileClose = document.getElementById("mobileMenuClose");
+
+    if (mobileToggle) {
+      mobileToggle.addEventListener("click", () => {
+        mobileMenu?.classList.toggle("active");
+        document.body.style.overflow = mobileMenu?.classList.contains("active")
+          ? "hidden"
+          : "";
+      });
+    }
+
+    if (mobileClose) {
+      mobileClose.addEventListener("click", () => {
+        mobileMenu?.classList.remove("active");
+        document.body.style.overflow = "";
+      });
+    }
+
+    // Close dropdowns on outside click
+    document.addEventListener("click", (e) => {
+      if (!e.target.closest(".cart-dropdown-wrapper")) {
+        cartPanel?.classList.remove("active");
+      }
+      if (!e.target.closest(".wishlist-dropdown-wrapper")) {
+        wishlistPanel?.classList.remove("active");
+      }
+    });
+  }
+
+  // Add to Cart
+  addToCart(product, quantity = 1) {
+    const existingItem = this.cart.find((item) => item.id === product.id);
+
+    if (existingItem) {
+      existingItem.quantity += quantity;
+    } else {
+      this.cart.push({
+        id: product.id,
+        name: product.name,
+        price: parseFloat(product.price),
+        imageurl: product.imageurl,
+        quantity: quantity,
+        addedAt: new Date().toISOString(),
+      });
+    }
+
+    this.saveToStorage("skyart_cart", this.cart);
+    this.updateAllBadges();
+    this.renderCart();
+    this.showNotification(`${product.name} added to cart!`, "success");
+  }
+
+  // Remove from Cart
+  removeFromCart(productId) {
+    this.cart = this.cart.filter((item) => item.id !== productId);
+    this.saveToStorage("skyart_cart", this.cart);
+    this.updateAllBadges();
+    this.renderCart();
+    this.showNotification("Item removed from cart", "info");
+  }
+
+  // Update Cart Quantity
+  updateCartQuantity(productId, quantity) {
+    const item = this.cart.find((item) => item.id === productId);
+    if (item) {
+      if (quantity <= 0) {
+        this.removeFromCart(productId);
+      } else {
+        item.quantity = quantity;
+        this.saveToStorage("skyart_cart", this.cart);
+        this.updateAllBadges();
+        this.renderCart();
+      }
+    }
+  }
+
+  // Add to Wishlist
+  addToWishlist(product) {
+    const exists = this.wishlist.find((item) => item.id === product.id);
+
+    if (!exists) {
+      this.wishlist.push({
+        id: product.id,
+        name: product.name,
+        price: parseFloat(product.price),
+        imageurl: product.imageurl,
+        addedAt: new Date().toISOString(),
+      });
+
+      this.saveToStorage("skyart_wishlist", this.wishlist);
+      this.updateAllBadges();
+      this.renderWishlist();
+      this.showNotification(`${product.name} added to wishlist!`, "success");
+    } else {
+      this.showNotification("Already in wishlist", "info");
+    }
+  }
+
+  // Remove from Wishlist
+  removeFromWishlist(productId) {
+    this.wishlist = this.wishlist.filter((item) => item.id !== productId);
+    this.saveToStorage("skyart_wishlist", this.wishlist);
+    this.updateAllBadges();
+    this.renderWishlist();
+    this.showNotification("Item removed from wishlist", "info");
+  }
+
+  // Move from Wishlist to Cart
+  moveToCart(productId) {
+    const item = this.wishlist.find((item) => item.id === productId);
+    if (item) {
+      this.addToCart(item, 1);
+      this.removeFromWishlist(productId);
+    }
+  }
+
+  // Update All Badges
+  updateAllBadges() {
+    const cartCount = this.cart.reduce((sum, item) => sum + item.quantity, 0);
+    const wishlistCount = this.wishlist.length;
+
+    const cartBadge = document.getElementById("cartCount");
+    const wishlistBadge = document.getElementById("wishlistCount");
+
+    if (cartBadge) {
+      cartBadge.textContent = cartCount;
+      cartBadge.style.display = cartCount > 0 ? "flex" : "none";
+    }
+
+    if (wishlistBadge) {
+      wishlistBadge.textContent = wishlistCount;
+      wishlistBadge.style.display = wishlistCount > 0 ? "flex" : "none";
+    }
+  }
+
+  // Render Cart
+  renderCart() {
+    const cartContent = document.getElementById("cartContent");
+    const cartSubtotal = document.getElementById("cartSubtotal");
+
+    if (!cartContent) return;
+
+    if (this.cart.length === 0) {
+      cartContent.innerHTML = '<p class="empty-state">Your cart is empty</p>';
+      if (cartSubtotal) cartSubtotal.textContent = "$0.00";
+      return;
+    }
+
+    const subtotal = this.cart.reduce(
+      (sum, item) => sum + item.price * item.quantity,
+      0
+    );
+
+    cartContent.innerHTML = this.cart
+      .map(
+        (item) => `
+      <div class="cart-item" data-product-id="${item.id}">
+        <div class="cart-item-image">
+          <img src="${item.imageurl || "/assets/images/placeholder.jpg"}" 
+               alt="${item.name}"
+               onerror="this.src='/assets/images/placeholder.jpg'" />
+        </div>
+        <div class="cart-item-details">
+          <h4 class="cart-item-name">${item.name}</h4>
+          <p class="cart-item-price">$${item.price.toFixed(2)}</p>
+          <div class="cart-item-quantity">
+            <button class="qty-btn" onclick="shoppingManager.updateCartQuantity('${
+              item.id
+            }', ${item.quantity - 1})">
+              <i class="bi bi-dash"></i>
+            </button>
+            <span class="qty-value">${item.quantity}</span>
+            <button class="qty-btn" onclick="shoppingManager.updateCartQuantity('${
+              item.id
+            }', ${item.quantity + 1})">
+              <i class="bi bi-plus"></i>
+            </button>
+          </div>
+        </div>
+        <div class="cart-item-actions">
+          <button class="cart-item-remove" onclick="shoppingManager.removeFromCart('${
+            item.id
+          }')" title="Remove">
+            <i class="bi bi-trash"></i>
+          </button>
+          <p class="cart-item-total">$${(item.price * item.quantity).toFixed(
+            2
+          )}</p>
+        </div>
+      </div>
+    `
+      )
+      .join("");
+
+    if (cartSubtotal) {
+      cartSubtotal.textContent = `$${subtotal.toFixed(2)}`;
+    }
+  }
+
+  // Render Wishlist
+  renderWishlist() {
+    const wishlistContent = document.getElementById("wishlistContent");
+
+    if (!wishlistContent) return;
+
+    if (this.wishlist.length === 0) {
+      wishlistContent.innerHTML =
+        '<p class="empty-state">Your wishlist is empty</p>';
+      return;
+    }
+
+    wishlistContent.innerHTML = this.wishlist
+      .map(
+        (item) => `
+      <div class="wishlist-item" data-product-id="${item.id}">
+        <div class="wishlist-item-image">
+          <img src="${item.imageurl || "/assets/images/placeholder.jpg"}" 
+               alt="${item.name}"
+               onerror="this.src='/assets/images/placeholder.jpg'" />
+        </div>
+        <div class="wishlist-item-details">
+          <h4 class="wishlist-item-name">${item.name}</h4>
+          <p class="wishlist-item-price">$${item.price.toFixed(2)}</p>
+          <button class="btn-move-to-cart" onclick="shoppingManager.moveToCart('${
+            item.id
+          }')">
+            <i class="bi bi-cart-plus"></i> Add to Cart
+          </button>
+        </div>
+        <button class="wishlist-item-remove" onclick="shoppingManager.removeFromWishlist('${
+          item.id
+        }')" title="Remove">
+          <i class="bi bi-x-lg"></i>
+        </button>
+      </div>
+    `
+      )
+      .join("");
+  }
+
+  // Show Notification
+  showNotification(message, type = "info") {
+    const notification = document.createElement("div");
+    notification.className = `notification notification-${type}`;
+    notification.innerHTML = `
+      <i class="bi bi-${
+        type === "success" ? "check-circle" : "info-circle"
+      }"></i>
+      <span>${message}</span>
+    `;
+
+    document.body.appendChild(notification);
+
+    setTimeout(() => notification.classList.add("show"), 10);
+    setTimeout(() => {
+      notification.classList.remove("show");
+      setTimeout(() => notification.remove(), 300);
+    }, 3000);
+  }
+
+  // Get Cart Total
+  getCartTotal() {
+    return this.cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
+  }
+
+  // Get Cart Count
+  getCartCount() {
+    return this.cart.reduce((sum, item) => sum + item.quantity, 0);
+  }
+
+  // Clear Cart
+  clearCart() {
+    this.cart = [];
+    this.saveToStorage("skyart_cart", this.cart);
+    this.updateAllBadges();
+    this.renderCart();
+  }
+}
+
+// Initialize Shopping Manager
+const shoppingManager = new ShoppingManager();
+
+// Make it globally available
+window.shoppingManager = shoppingManager;
+
+// Navigation active state
+document.addEventListener("DOMContentLoaded", () => {
+  const currentPage = window.location.pathname.split("/").pop() || "home.html";
+  document.querySelectorAll(".nav-link, .mobile-link").forEach((link) => {
+    const linkPage = link.getAttribute("href")?.split("/").pop();
+    if (linkPage === currentPage) {
+      link.classList.add("active");
+    }
+  });
+});
diff --git a/website/public/about.html b/website/public/about.html
new file mode 100644
index 0000000..e34b4d2
--- /dev/null
+++ b/website/public/about.html
@@ -0,0 +1,255 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About - Sky Art Shop</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" 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/main.css" />
+    <link rel="stylesheet" href="/assets/css/navbar.css" />
+    <link rel="stylesheet" href="/assets/css/shopping.css" />
+</head>
+  <body>
+    <!-- Modern Navigation -->
+    <nav class="modern-navbar">
+      <div class="navbar-wrapper">
+        <div class="navbar-brand">
+          <a href="/home.html" class="brand-link">
+            <img src="/uploads/images/8ba675b9-c4e6-41e6-8f14-382b9ee1d019.jpg" alt="Sky Art Shop Logo" class="brand-logo" />
+            <span class="brand-name">Sky Art Shop</span>
+          </a>
+        </div>
+        
+        <div class="navbar-menu">
+          <ul class="nav-menu-list">
+            <li class="nav-item"><a href="/home.html" class="nav-link">Home</a></li>
+            <li class="nav-item"><a href="/shop.html" class="nav-link">Shop</a></li>
+            <li class="nav-item"><a href="/portfolio.html" class="nav-link">Portfolio</a></li>
+            <li class="nav-item"><a href="/about.html" class="nav-link active">About</a></li>
+            <li class="nav-item"><a href="/blog.html" class="nav-link">Blog</a></li>
+            <li class="nav-item"><a href="/contact.html" class="nav-link">Contact</a></li>
+          </ul>
+        </div>
+        
+        <div class="navbar-actions">
+          <div class="action-item wishlist-dropdown-wrapper">
+            <button class="action-btn" id="wishlistToggle" aria-label="Wishlist">
+              <i class="bi bi-heart"></i>
+              <span class="action-badge" id="wishlistCount">0</span>
+            </button>
+            <div class="action-dropdown wishlist-dropdown" id="wishlistPanel">
+              <div class="dropdown-head">
+                <h3>My Wishlist</h3>
+                <button class="dropdown-close" id="wishlistClose"><i class="bi bi-x-lg"></i></button>
+              </div>
+              <div class="dropdown-body" id="wishlistContent">
+                <p class="empty-state">Your wishlist is empty</p>
+              </div>
+              <div class="dropdown-foot">
+                <a href="/shop.html" class="btn-outline">Continue Shopping</a>
+              </div>
+            </div>
+          </div>
+          
+          <div class="action-item cart-dropdown-wrapper">
+            <button class="action-btn" id="cartToggle" aria-label="Shopping Cart">
+              <i class="bi bi-cart3"></i>
+              <span class="action-badge" id="cartCount">0</span>
+            </button>
+            <div class="action-dropdown cart-dropdown" id="cartPanel">
+              <div class="dropdown-head">
+                <h3>Shopping Cart</h3>
+                <button class="dropdown-close" id="cartClose"><i class="bi bi-x-lg"></i></button>
+              </div>
+              <div class="dropdown-body" id="cartContent">
+                <p class="empty-state">Your cart is empty</p>
+              </div>
+              <div class="dropdown-foot">
+                <div class="cart-summary">
+                  <span class="summary-label">Subtotal:</span>
+                  <span class="summary-value" id="cartSubtotal">$0.00</span>
+                </div>
+                <a href="/checkout.html" class="btn-primary-full">Proceed to Checkout</a>
+                <a href="/shop.html" class="btn-text">Continue Shopping</a>
+              </div>
+            </div>
+          </div>
+          
+          <button class="mobile-toggle" id="mobileMenuToggle" aria-label="Menu">
+            <span class="toggle-line"></span>
+            <span class="toggle-line"></span>
+            <span class="toggle-line"></span>
+          </button>
+        </div>
+      </div>
+      
+      <div class="mobile-menu" id="mobileMenu">
+        <div class="mobile-menu-header">
+          <span class="mobile-brand">Sky Art Shop</span>
+          <button class="mobile-close" id="mobileMenuClose"><i class="bi bi-x-lg"></i></button>
+        </div>
+        <ul class="mobile-menu-list">
+          <li><a href="/home.html" class="mobile-link">Home</a></li>
+          <li><a href="/shop.html" class="mobile-link">Shop</a></li>
+          <li><a href="/portfolio.html" class="mobile-link">Portfolio</a></li>
+          <li><a href="/about.html" class="mobile-link">About</a></li>
+          <li><a href="/blog.html" class="mobile-link">Blog</a></li>
+          <li><a href="/contact.html" class="mobile-link">Contact</a></li>
+        </ul>
+      </div>
+    </nav>
+  <nav class="modern-navbar">
+    <div class="navbar-wrapper">
+      <div class="navbar-brand">
+        <a href="/home.html" class="brand-link">
+          <img src="/uploads/images/8ba675b9-c4e6-41e6-8f14-382b9ee1d019.jpg" alt="Sky Art Shop Logo" class="brand-logo" />
+          <span class="brand-name">Sky Art Shop</span>
+        </a>
+      </div>
+      
+      <div class="navbar-menu">
+        <ul class="nav-menu-list">
+          <li class="nav-item"><a href="/home.html" class="nav-link">Home</a></li>
+          <li class="nav-item"><a href="/shop.html" class="nav-link">Shop</a></li>
+          <li class="nav-item"><a href="/portfolio.html" class="nav-link">Portfolio</a></li>
+          <li class="nav-item"><a href="/about.html" class="nav-link">About</a></li>
+          <li class="nav-item"><a href="/blog.html" class="nav-link">Blog</a></li>
+          <li class="nav-item"><a href="/contact.html" class="nav-link">Contact</a></li>
+        </ul>
+      </div>
+      
+      <div class="navbar-actions">
+        <div class="action-item wishlist-dropdown-wrapper">
+          <button class="action-btn" id="wishlistToggle" aria-label="Wishlist">
+            <i class="bi bi-heart"></i>
+            <span class="action-badge" id="wishlistCount">0</span>
+          </button>
+          <div class="action-dropdown wishlist-dropdown" id="wishlistPanel">
+            <div class="dropdown-head">
+              <h3>My Wishlist</h3>
+              <button class="dropdown-close" id="wishlistClose"><i class="bi bi-x-lg"></i></button>
+            </div>
+            <div class="dropdown-body" id="wishlistContent">
+              <p class="empty-state">Your wishlist is empty</p>
+            </div>
+            <div class="dropdown-foot">
+              <a href="/shop.html" class="btn-outline">Continue Shopping</a>
+            </div>
+          </div>
+        </div>
+        
+        <div class="action-item cart-dropdown-wrapper">
+          <button class="action-btn" id="cartToggle" aria-label="Shopping Cart">
+            <i class="bi bi-cart3"></i>
+            <span class="action-badge" id="cartCount">0</span>
+          </button>
+          <div class="action-dropdown cart-dropdown" id="cartPanel">
+            <div class="dropdown-head">
+              <h3>Shopping Cart</h3>
+              <button class="dropdown-close" id="cartClose"><i class="bi bi-x-lg"></i></button>
+            </div>
+            <div class="dropdown-body" id="cartContent">
+              <p class="empty-state">Your cart is empty</p>
+            </div>
+            <div class="dropdown-foot">
+              <div class="cart-summary">
+                <span class="summary-label">Subtotal:</span>
+                <span class="summary-value" id="cartSubtotal">$0.00</span>
+              </div>
+              <a href="/checkout.html" class="btn-primary-full">Proceed to Checkout</a>
+              <a href="/shop.html" class="btn-text">Continue Shopping</a>
+            </div>
+          </div>
+        </div>
+        
+        <button class="mobile-toggle" id="mobileMenuToggle" aria-label="Menu">
+          <span class="toggle-line"></span>
+          <span class="toggle-line"></span>
+          <span class="toggle-line"></span>
+        </button>
+      </div>
+    </div>
+    
+    <div class="mobile-menu" id="mobileMenu">
+      <div class="mobile-menu-header">
+        <span class="mobile-brand">Sky Art Shop</span>
+        <button class="mobile-close" id="mobileMenuClose"><i class="bi bi-x-lg"></i></button>
+      </div>
+      <ul class="mobile-menu-list">
+        <li><a href="/home.html" class="mobile-link">Home</a></li>
+        <li><a href="/shop.html" class="mobile-link">Shop</a></li>
+        <li><a href="/portfolio.html" class="mobile-link">Portfolio</a></li>
+        <li><a href="/about.html" class="mobile-link">About</a></li>
+        <li><a href="/blog.html" class="mobile-link">Blog</a></li>
+        <li><a href="/contact.html" class="mobile-link">Contact</a></li>
+      </ul>
+    </div>
+  </nav>
+
+    <section class="about-hero">
+        <div class="container">
+            <h1>About Sky Art Shop</h1>
+            <p class="hero-subtitle">Your creative journey starts here</p>
+        </div>
+    </section>
+
+    <section class="about-content">
+        <div class="container">
+            <div class="about-layout">
+                <div class="about-main-content">
+                    <div class="about-text">
+                        <h2>Our Story</h2>
+                        <p>Sky Art Shop specializes in scrapbooking, journaling, cardmaking, and collaging stationery. We are passionate about helping people express their creativity and preserve their memories.</p>
+                        <p>Our mission is to promote mental health and wellness through creative art activities. We believe that crafting is more than just a hobby—it's a therapeutic journey that brings joy, mindfulness, and self-expression.</p>
+
+                        <h2>What We Offer</h2>
+                        <p>Our carefully curated collection includes:</p>
+                        <ul>
+                            <li>Washi tape in various designs and patterns</li>
+                            <li>Unique stickers for journaling and scrapbooking</li>
+                            <li>High-quality journals and notebooks</li>
+                            <li>Card making supplies and kits</li>
+                            <li>Collage materials and ephemera</li>
+                            <li>Creative tools and accessories</li>
+                        </ul>
+
+                        <h2>Why Choose Us</h2>
+                        <p>We hand-select every item in our store to ensure the highest quality and uniqueness. Whether you're a seasoned crafter or just starting your creative journey, we have something special for everyone.</p>
+                        <p>Join our community of creative minds and let your imagination soar!</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-brand">
+                    <h2>Sky Art Shop</h2>
+                    <p>Follow Us</p>
+                    <div class="social-links">
+                        <a href="#instagram" aria-label="Instagram"><i class="bi bi-instagram"></i></a>
+                    </div>
+                </div>
+                <div class="footer-links">
+                    <h3>Quick Links</h3>
+                    <ul>
+                        <li><a href="/shop.html">Shop</a></li>
+                        <li><a href="/about.html">About</a></li>
+                        <li><a href="/contact.html">Contact</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>© 2025 by Sky Art Shop. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="/assets/js/main.js"></script>
+    <script src="/assets/js/cart.js"></script>
+  <script src="/assets/js/shopping.js"></script>
+</body>
+</html>
diff --git a/website/public/blog.html b/website/public/blog.html
new file mode 100644
index 0000000..a7b876a
--- /dev/null
+++ b/website/public/blog.html
@@ -0,0 +1,255 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About - Sky Art Shop</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" 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/main.css" />
+    <link rel="stylesheet" href="/assets/css/navbar.css" />
+    <link rel="stylesheet" href="/assets/css/shopping.css" />
+</head>
+  <body>
+    <!-- Modern Navigation -->
+    <nav class="modern-navbar">
+      <div class="navbar-wrapper">
+        <div class="navbar-brand">
+          <a href="/home.html" class="brand-link">
+            <img src="/uploads/images/8ba675b9-c4e6-41e6-8f14-382b9ee1d019.jpg" alt="Sky Art Shop Logo" class="brand-logo" />
+            <span class="brand-name">Sky Art Shop</span>
+          </a>
+        </div>
+        
+        <div class="navbar-menu">
+          <ul class="nav-menu-list">
+            <li class="nav-item"><a href="/home.html" class="nav-link">Home</a></li>
+            <li class="nav-item"><a href="/shop.html" class="nav-link">Shop</a></li>
+            <li class="nav-item"><a href="/portfolio.html" class="nav-link">Portfolio</a></li>
+            <li class="nav-item"><a href="/about.html" class="nav-link">About</a></li>
+            <li class="nav-item"><a href="/blog.html" class="nav-link active">Blog</a></li>
+            <li class="nav-item"><a href="/contact.html" class="nav-link">Contact</a></li>
+          </ul>
+        </div>
+        
+        <div class="navbar-actions">
+          <div class="action-item wishlist-dropdown-wrapper">
+            <button class="action-btn" id="wishlistToggle" aria-label="Wishlist">
+              <i class="bi bi-heart"></i>
+              <span class="action-badge" id="wishlistCount">0</span>
+            </button>
+            <div class="action-dropdown wishlist-dropdown" id="wishlistPanel">
+              <div class="dropdown-head">
+                <h3>My Wishlist</h3>
+                <button class="dropdown-close" id="wishlistClose"><i class="bi bi-x-lg"></i></button>
+              </div>
+              <div class="dropdown-body" id="wishlistContent">
+                <p class="empty-state">Your wishlist is empty</p>
+              </div>
+              <div class="dropdown-foot">
+                <a href="/shop.html" class="btn-outline">Continue Shopping</a>
+              </div>
+            </div>
+          </div>
+          
+          <div class="action-item cart-dropdown-wrapper">
+            <button class="action-btn" id="cartToggle" aria-label="Shopping Cart">
+              <i class="bi bi-cart3"></i>
+              <span class="action-badge" id="cartCount">0</span>
+            </button>
+            <div class="action-dropdown cart-dropdown" id="cartPanel">
+              <div class="dropdown-head">
+                <h3>Shopping Cart</h3>
+                <button class="dropdown-close" id="cartClose"><i class="bi bi-x-lg"></i></button>
+              </div>
+              <div class="dropdown-body" id="cartContent">
+                <p class="empty-state">Your cart is empty</p>
+              </div>
+              <div class="dropdown-foot">
+                <div class="cart-summary">
+                  <span class="summary-label">Subtotal:</span>
+                  <span class="summary-value" id="cartSubtotal">$0.00</span>
+                </div>
+                <a href="/checkout.html" class="btn-primary-full">Proceed to Checkout</a>
+                <a href="/shop.html" class="btn-text">Continue Shopping</a>
+              </div>
+            </div>
+          </div>
+          
+          <button class="mobile-toggle" id="mobileMenuToggle" aria-label="Menu">
+            <span class="toggle-line"></span>
+            <span class="toggle-line"></span>
+            <span class="toggle-line"></span>
+          </button>
+        </div>
+      </div>
+      
+      <div class="mobile-menu" id="mobileMenu">
+        <div class="mobile-menu-header">
+          <span class="mobile-brand">Sky Art Shop</span>
+          <button class="mobile-close" id="mobileMenuClose"><i class="bi bi-x-lg"></i></button>
+        </div>
+        <ul class="mobile-menu-list">
+          <li><a href="/home.html" class="mobile-link">Home</a></li>
+          <li><a href="/shop.html" class="mobile-link">Shop</a></li>
+          <li><a href="/portfolio.html" class="mobile-link">Portfolio</a></li>
+          <li><a href="/about.html" class="mobile-link">About</a></li>
+          <li><a href="/blog.html" class="mobile-link">Blog</a></li>
+          <li><a href="/contact.html" class="mobile-link">Contact</a></li>
+        </ul>
+      </div>
+    </nav>
+  <nav class="modern-navbar">
+    <div class="navbar-wrapper">
+      <div class="navbar-brand">
+        <a href="/home.html" class="brand-link">
+          <img src="/uploads/images/8ba675b9-c4e6-41e6-8f14-382b9ee1d019.jpg" alt="Sky Art Shop Logo" class="brand-logo" />
+          <span class="brand-name">Sky Art Shop</span>
+        </a>
+      </div>
+      
+      <div class="navbar-menu">
+        <ul class="nav-menu-list">
+          <li class="nav-item"><a href="/home.html" class="nav-link">Home</a></li>
+          <li class="nav-item"><a href="/shop.html" class="nav-link">Shop</a></li>
+          <li class="nav-item"><a href="/portfolio.html" class="nav-link">Portfolio</a></li>
+          <li class="nav-item"><a href="/about.html" class="nav-link">About</a></li>
+          <li class="nav-item"><a href="/blog.html" class="nav-link">Blog</a></li>
+          <li class="nav-item"><a href="/contact.html" class="nav-link">Contact</a></li>
+        </ul>
+      </div>
+      
+      <div class="navbar-actions">
+        <div class="action-item wishlist-dropdown-wrapper">
+          <button class="action-btn" id="wishlistToggle" aria-label="Wishlist">
+            <i class="bi bi-heart"></i>
+            <span class="action-badge" id="wishlistCount">0</span>
+          </button>
+          <div class="action-dropdown wishlist-dropdown" id="wishlistPanel">
+            <div class="dropdown-head">
+              <h3>My Wishlist</h3>
+              <button class="dropdown-close" id="wishlistClose"><i class="bi bi-x-lg"></i></button>
+            </div>
+            <div class="dropdown-body" id="wishlistContent">
+              <p class="empty-state">Your wishlist is empty</p>
+            </div>
+            <div class="dropdown-foot">
+              <a href="/shop.html" class="btn-outline">Continue Shopping</a>
+            </div>
+          </div>
+        </div>
+        
+        <div class="action-item cart-dropdown-wrapper">
+          <button class="action-btn" id="cartToggle" aria-label="Shopping Cart">
+            <i class="bi bi-cart3"></i>
+            <span class="action-badge" id="cartCount">0</span>
+          </button>
+          <div class="action-dropdown cart-dropdown" id="cartPanel">
+            <div class="dropdown-head">
+              <h3>Shopping Cart</h3>
+              <button class="dropdown-close" id="cartClose"><i class="bi bi-x-lg"></i></button>
+            </div>
+            <div class="dropdown-body" id="cartContent">
+              <p class="empty-state">Your cart is empty</p>
+            </div>
+            <div class="dropdown-foot">
+              <div class="cart-summary">
+                <span class="summary-label">Subtotal:</span>
+                <span class="summary-value" id="cartSubtotal">$0.00</span>
+              </div>
+              <a href="/checkout.html" class="btn-primary-full">Proceed to Checkout</a>
+              <a href="/shop.html" class="btn-text">Continue Shopping</a>
+            </div>
+          </div>
+        </div>
+        
+        <button class="mobile-toggle" id="mobileMenuToggle" aria-label="Menu">
+          <span class="toggle-line"></span>
+          <span class="toggle-line"></span>
+          <span class="toggle-line"></span>
+        </button>
+      </div>
+    </div>
+    
+    <div class="mobile-menu" id="mobileMenu">
+      <div class="mobile-menu-header">
+        <span class="mobile-brand">Sky Art Shop</span>
+        <button class="mobile-close" id="mobileMenuClose"><i class="bi bi-x-lg"></i></button>
+      </div>
+      <ul class="mobile-menu-list">
+        <li><a href="/home.html" class="mobile-link">Home</a></li>
+        <li><a href="/shop.html" class="mobile-link">Shop</a></li>
+        <li><a href="/portfolio.html" class="mobile-link">Portfolio</a></li>
+        <li><a href="/about.html" class="mobile-link">About</a></li>
+        <li><a href="/blog.html" class="mobile-link">Blog</a></li>
+        <li><a href="/contact.html" class="mobile-link">Contact</a></li>
+      </ul>
+    </div>
+  </nav>
+
+    <section class="about-hero">
+        <div class="container">
+            <h1>About Sky Art Shop</h1>
+            <p class="hero-subtitle">Your creative journey starts here</p>
+        </div>
+    </section>
+
+    <section class="about-content">
+        <div class="container">
+            <div class="about-layout">
+                <div class="about-main-content">
+                    <div class="about-text">
+                        <h2>Our Story</h2>
+                        <p>Sky Art Shop specializes in scrapbooking, journaling, cardmaking, and collaging stationery. We are passionate about helping people express their creativity and preserve their memories.</p>
+                        <p>Our mission is to promote mental health and wellness through creative art activities. We believe that crafting is more than just a hobby—it's a therapeutic journey that brings joy, mindfulness, and self-expression.</p>
+
+                        <h2>What We Offer</h2>
+                        <p>Our carefully curated collection includes:</p>
+                        <ul>
+                            <li>Washi tape in various designs and patterns</li>
+                            <li>Unique stickers for journaling and scrapbooking</li>
+                            <li>High-quality journals and notebooks</li>
+                            <li>Card making supplies and kits</li>
+                            <li>Collage materials and ephemera</li>
+                            <li>Creative tools and accessories</li>
+                        </ul>
+
+                        <h2>Why Choose Us</h2>
+                        <p>We hand-select every item in our store to ensure the highest quality and uniqueness. Whether you're a seasoned crafter or just starting your creative journey, we have something special for everyone.</p>
+                        <p>Join our community of creative minds and let your imagination soar!</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-brand">
+                    <h2>Sky Art Shop</h2>
+                    <p>Follow Us</p>
+                    <div class="social-links">
+                        <a href="#instagram" aria-label="Instagram"><i class="bi bi-instagram"></i></a>
+                    </div>
+                </div>
+                <div class="footer-links">
+                    <h3>Quick Links</h3>
+                    <ul>
+                        <li><a href="/shop.html">Shop</a></li>
+                        <li><a href="/about.html">About</a></li>
+                        <li><a href="/contact.html">Contact</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>© 2025 by Sky Art Shop. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="/assets/js/main.js"></script>
+    <script src="/assets/js/cart.js"></script>
+  <script src="/assets/js/shopping.js"></script>
+</body>
+</html>
diff --git a/website/public/contact.html b/website/public/contact.html
new file mode 100644
index 0000000..39928ba
--- /dev/null
+++ b/website/public/contact.html
@@ -0,0 +1,255 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About - Sky Art Shop</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" 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/main.css" />
+    <link rel="stylesheet" href="/assets/css/navbar.css" />
+    <link rel="stylesheet" href="/assets/css/shopping.css" />
+</head>
+  <body>
+    <!-- Modern Navigation -->
+    <nav class="modern-navbar">
+      <div class="navbar-wrapper">
+        <div class="navbar-brand">
+          <a href="/home.html" class="brand-link">
+            <img src="/uploads/images/8ba675b9-c4e6-41e6-8f14-382b9ee1d019.jpg" alt="Sky Art Shop Logo" class="brand-logo" />
+            <span class="brand-name">Sky Art Shop</span>
+          </a>
+        </div>
+        
+        <div class="navbar-menu">
+          <ul class="nav-menu-list">
+            <li class="nav-item"><a href="/home.html" class="nav-link">Home</a></li>
+            <li class="nav-item"><a href="/shop.html" class="nav-link">Shop</a></li>
+            <li class="nav-item"><a href="/portfolio.html" class="nav-link">Portfolio</a></li>
+            <li class="nav-item"><a href="/about.html" class="nav-link">About</a></li>
+            <li class="nav-item"><a href="/blog.html" class="nav-link">Blog</a></li>
+            <li class="nav-item"><a href="/contact.html" class="nav-link active">Contact</a></li>
+          </ul>
+        </div>
+        
+        <div class="navbar-actions">
+          <div class="action-item wishlist-dropdown-wrapper">
+            <button class="action-btn" id="wishlistToggle" aria-label="Wishlist">
+              <i class="bi bi-heart"></i>
+              <span class="action-badge" id="wishlistCount">0</span>
+            </button>
+            <div class="action-dropdown wishlist-dropdown" id="wishlistPanel">
+              <div class="dropdown-head">
+                <h3>My Wishlist</h3>
+                <button class="dropdown-close" id="wishlistClose"><i class="bi bi-x-lg"></i></button>
+              </div>
+              <div class="dropdown-body" id="wishlistContent">
+                <p class="empty-state">Your wishlist is empty</p>
+              </div>
+              <div class="dropdown-foot">
+                <a href="/shop.html" class="btn-outline">Continue Shopping</a>
+              </div>
+            </div>
+          </div>
+          
+          <div class="action-item cart-dropdown-wrapper">
+            <button class="action-btn" id="cartToggle" aria-label="Shopping Cart">
+              <i class="bi bi-cart3"></i>
+              <span class="action-badge" id="cartCount">0</span>
+            </button>
+            <div class="action-dropdown cart-dropdown" id="cartPanel">
+              <div class="dropdown-head">
+                <h3>Shopping Cart</h3>
+                <button class="dropdown-close" id="cartClose"><i class="bi bi-x-lg"></i></button>
+              </div>
+              <div class="dropdown-body" id="cartContent">
+                <p class="empty-state">Your cart is empty</p>
+              </div>
+              <div class="dropdown-foot">
+                <div class="cart-summary">
+                  <span class="summary-label">Subtotal:</span>
+                  <span class="summary-value" id="cartSubtotal">$0.00</span>
+                </div>
+                <a href="/checkout.html" class="btn-primary-full">Proceed to Checkout</a>
+                <a href="/shop.html" class="btn-text">Continue Shopping</a>
+              </div>
+            </div>
+          </div>
+          
+          <button class="mobile-toggle" id="mobileMenuToggle" aria-label="Menu">
+            <span class="toggle-line"></span>
+            <span class="toggle-line"></span>
+            <span class="toggle-line"></span>
+          </button>
+        </div>
+      </div>
+      
+      <div class="mobile-menu" id="mobileMenu">
+        <div class="mobile-menu-header">
+          <span class="mobile-brand">Sky Art Shop</span>
+          <button class="mobile-close" id="mobileMenuClose"><i class="bi bi-x-lg"></i></button>
+        </div>
+        <ul class="mobile-menu-list">
+          <li><a href="/home.html" class="mobile-link">Home</a></li>
+          <li><a href="/shop.html" class="mobile-link">Shop</a></li>
+          <li><a href="/portfolio.html" class="mobile-link">Portfolio</a></li>
+          <li><a href="/about.html" class="mobile-link">About</a></li>
+          <li><a href="/blog.html" class="mobile-link">Blog</a></li>
+          <li><a href="/contact.html" class="mobile-link">Contact</a></li>
+        </ul>
+      </div>
+    </nav>
+  <nav class="modern-navbar">
+    <div class="navbar-wrapper">
+      <div class="navbar-brand">
+        <a href="/home.html" class="brand-link">
+          <img src="/uploads/images/8ba675b9-c4e6-41e6-8f14-382b9ee1d019.jpg" alt="Sky Art Shop Logo" class="brand-logo" />
+          <span class="brand-name">Sky Art Shop</span>
+        </a>
+      </div>
+      
+      <div class="navbar-menu">
+        <ul class="nav-menu-list">
+          <li class="nav-item"><a href="/home.html" class="nav-link">Home</a></li>
+          <li class="nav-item"><a href="/shop.html" class="nav-link">Shop</a></li>
+          <li class="nav-item"><a href="/portfolio.html" class="nav-link">Portfolio</a></li>
+          <li class="nav-item"><a href="/about.html" class="nav-link">About</a></li>
+          <li class="nav-item"><a href="/blog.html" class="nav-link">Blog</a></li>
+          <li class="nav-item"><a href="/contact.html" class="nav-link">Contact</a></li>
+        </ul>
+      </div>
+      
+      <div class="navbar-actions">
+        <div class="action-item wishlist-dropdown-wrapper">
+          <button class="action-btn" id="wishlistToggle" aria-label="Wishlist">
+            <i class="bi bi-heart"></i>
+            <span class="action-badge" id="wishlistCount">0</span>
+          </button>
+          <div class="action-dropdown wishlist-dropdown" id="wishlistPanel">
+            <div class="dropdown-head">
+              <h3>My Wishlist</h3>
+              <button class="dropdown-close" id="wishlistClose"><i class="bi bi-x-lg"></i></button>
+            </div>
+            <div class="dropdown-body" id="wishlistContent">
+              <p class="empty-state">Your wishlist is empty</p>
+            </div>
+            <div class="dropdown-foot">
+              <a href="/shop.html" class="btn-outline">Continue Shopping</a>
+            </div>
+          </div>
+        </div>
+        
+        <div class="action-item cart-dropdown-wrapper">
+          <button class="action-btn" id="cartToggle" aria-label="Shopping Cart">
+            <i class="bi bi-cart3"></i>
+            <span class="action-badge" id="cartCount">0</span>
+          </button>
+          <div class="action-dropdown cart-dropdown" id="cartPanel">
+            <div class="dropdown-head">
+              <h3>Shopping Cart</h3>
+              <button class="dropdown-close" id="cartClose"><i class="bi bi-x-lg"></i></button>
+            </div>
+            <div class="dropdown-body" id="cartContent">
+              <p class="empty-state">Your cart is empty</p>
+            </div>
+            <div class="dropdown-foot">
+              <div class="cart-summary">
+                <span class="summary-label">Subtotal:</span>
+                <span class="summary-value" id="cartSubtotal">$0.00</span>
+              </div>
+              <a href="/checkout.html" class="btn-primary-full">Proceed to Checkout</a>
+              <a href="/shop.html" class="btn-text">Continue Shopping</a>
+            </div>
+          </div>
+        </div>
+        
+        <button class="mobile-toggle" id="mobileMenuToggle" aria-label="Menu">
+          <span class="toggle-line"></span>
+          <span class="toggle-line"></span>
+          <span class="toggle-line"></span>
+        </button>
+      </div>
+    </div>
+    
+    <div class="mobile-menu" id="mobileMenu">
+      <div class="mobile-menu-header">
+        <span class="mobile-brand">Sky Art Shop</span>
+        <button class="mobile-close" id="mobileMenuClose"><i class="bi bi-x-lg"></i></button>
+      </div>
+      <ul class="mobile-menu-list">
+        <li><a href="/home.html" class="mobile-link">Home</a></li>
+        <li><a href="/shop.html" class="mobile-link">Shop</a></li>
+        <li><a href="/portfolio.html" class="mobile-link">Portfolio</a></li>
+        <li><a href="/about.html" class="mobile-link">About</a></li>
+        <li><a href="/blog.html" class="mobile-link">Blog</a></li>
+        <li><a href="/contact.html" class="mobile-link">Contact</a></li>
+      </ul>
+    </div>
+  </nav>
+
+    <section class="about-hero">
+        <div class="container">
+            <h1>About Sky Art Shop</h1>
+            <p class="hero-subtitle">Your creative journey starts here</p>
+        </div>
+    </section>
+
+    <section class="about-content">
+        <div class="container">
+            <div class="about-layout">
+                <div class="about-main-content">
+                    <div class="about-text">
+                        <h2>Our Story</h2>
+                        <p>Sky Art Shop specializes in scrapbooking, journaling, cardmaking, and collaging stationery. We are passionate about helping people express their creativity and preserve their memories.</p>
+                        <p>Our mission is to promote mental health and wellness through creative art activities. We believe that crafting is more than just a hobby—it's a therapeutic journey that brings joy, mindfulness, and self-expression.</p>
+
+                        <h2>What We Offer</h2>
+                        <p>Our carefully curated collection includes:</p>
+                        <ul>
+                            <li>Washi tape in various designs and patterns</li>
+                            <li>Unique stickers for journaling and scrapbooking</li>
+                            <li>High-quality journals and notebooks</li>
+                            <li>Card making supplies and kits</li>
+                            <li>Collage materials and ephemera</li>
+                            <li>Creative tools and accessories</li>
+                        </ul>
+
+                        <h2>Why Choose Us</h2>
+                        <p>We hand-select every item in our store to ensure the highest quality and uniqueness. Whether you're a seasoned crafter or just starting your creative journey, we have something special for everyone.</p>
+                        <p>Join our community of creative minds and let your imagination soar!</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-brand">
+                    <h2>Sky Art Shop</h2>
+                    <p>Follow Us</p>
+                    <div class="social-links">
+                        <a href="#instagram" aria-label="Instagram"><i class="bi bi-instagram"></i></a>
+                    </div>
+                </div>
+                <div class="footer-links">
+                    <h3>Quick Links</h3>
+                    <ul>
+                        <li><a href="/shop.html">Shop</a></li>
+                        <li><a href="/about.html">About</a></li>
+                        <li><a href="/contact.html">Contact</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>© 2025 by Sky Art Shop. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="/assets/js/main.js"></script>
+    <script src="/assets/js/cart.js"></script>
+  <script src="/assets/js/shopping.js"></script>
+</body>
+</html>
diff --git a/website/public/home-new.html b/website/public/home-new.html
new file mode 100644
index 0000000..815cfc4
--- /dev/null
+++ b/website/public/home-new.html
@@ -0,0 +1,208 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="Sky Art Shop - Scrapbooking, journaling, cardmaking, and collaging stationery." />
+  <title>Home - Sky Art Shop</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=Roboto:wght@300;400;500;600;700&display=swap" 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/main.css" />
+  <link rel="stylesheet" href="/assets/css/shopping.css" />
+  <style>
+    /* Include navbar styles inline for now */
+    <?php include '/var/www/skyartshop/components/navbar.html'; ?>
+  </style>
+</head>
+<body>
+  <!-- Modern Navigation -->
+  <nav class="modern-navbar">
+    <div class="navbar-wrapper">
+      <div class="navbar-brand">
+        <a href="/home.html" class="brand-link">
+          <img src="/uploads/images/8ba675b9-c4e6-41e6-8f14-382b9ee1d019.jpg" alt="Sky Art Shop Logo" class="brand-logo" />
+          <span class="brand-name">Sky Art Shop</span>
+        </a>
+      </div>
+      
+      <div class="navbar-menu">
+        <ul class="nav-menu-list">
+          <li class="nav-item"><a href="/home.html" class="nav-link active">Home</a></li>
+          <li class="nav-item"><a href="/shop.html" class="nav-link">Shop</a></li>
+          <li class="nav-item"><a href="/portfolio.html" class="nav-link">Portfolio</a></li>
+          <li class="nav-item"><a href="/about.html" class="nav-link">About</a></li>
+          <li class="nav-item"><a href="/blog.html" class="nav-link">Blog</a></li>
+          <li class="nav-item"><a href="/contact.html" class="nav-link">Contact</a></li>
+        </ul>
+      </div>
+      
+      <div class="navbar-actions">
+        <div class="action-item wishlist-dropdown-wrapper">
+          <button class="action-btn" id="wishlistToggle" aria-label="Wishlist">
+            <i class="bi bi-heart"></i>
+            <span class="action-badge" id="wishlistCount">0</span>
+          </button>
+          <div class="action-dropdown wishlist-dropdown" id="wishlistPanel">
+            <div class="dropdown-head">
+              <h3>My Wishlist</h3>
+              <button class="dropdown-close" id="wishlistClose"><i class="bi bi-x-lg"></i></button>
+            </div>
+            <div class="dropdown-body" id="wishlistContent">
+              <p class="empty-state">Your wishlist is empty</p>
+            </div>
+            <div class="dropdown-foot">
+              <a href="/shop.html" class="btn-outline">Continue Shopping</a>
+            </div>
+          </div>
+        </div>
+        
+        <div class="action-item cart-dropdown-wrapper">
+          <button class="action-btn" id="cartToggle" aria-label="Shopping Cart">
+            <i class="bi bi-cart3"></i>
+            <span class="action-badge" id="cartCount">0</span>
+          </button>
+          <div class="action-dropdown cart-dropdown" id="cartPanel">
+            <div class="dropdown-head">
+              <h3>Shopping Cart</h3>
+              <button class="dropdown-close" id="cartClose"><i class="bi bi-x-lg"></i></button>
+            </div>
+            <div class="dropdown-body" id="cartContent">
+              <p class="empty-state">Your cart is empty</p>
+            </div>
+            <div class="dropdown-foot">
+              <div class="cart-summary">
+                <span class="summary-label">Subtotal:</span>
+                <span class="summary-value" id="cartSubtotal">$0.00</span>
+              </div>
+              <a href="/checkout.html" class="btn-primary-full">Proceed to Checkout</a>
+              <a href="/shop.html" class="btn-text">Continue Shopping</a>
+            </div>
+          </div>
+        </div>
+        
+        <button class="mobile-toggle" id="mobileMenuToggle" aria-label="Menu">
+          <span class="toggle-line"></span>
+          <span class="toggle-line"></span>
+          <span class="toggle-line"></span>
+        </button>
+      </div>
+    </div>
+    
+    <div class="mobile-menu" id="mobileMenu">
+      <div class="mobile-menu-header">
+        <span class="mobile-brand">Sky Art Shop</span>
+        <button class="mobile-close" id="mobileMenuClose"><i class="bi bi-x-lg"></i></button>
+      </div>
+      <ul class="mobile-menu-list">
+        <li><a href="/home.html" class="mobile-link">Home</a></li>
+        <li><a href="/shop.html" class="mobile-link">Shop</a></li>
+        <li><a href="/portfolio.html" class="mobile-link">Portfolio</a></li>
+        <li><a href="/about.html" class="mobile-link">About</a></li>
+        <li><a href="/blog.html" class="mobile-link">Blog</a></li>
+        <li><a href="/contact.html" class="mobile-link">Contact</a></li>
+      </ul>
+    </div>
+  </nav>
+
+  <!-- Hero Section -->
+  <section class="hero" style="padding: 80px 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-align: center;">
+    <div class="hero-content" style="max-width: 800px; margin: 0 auto;">
+      <h2 style="font-size: 48px; font-weight: 700; margin-bottom: 16px; line-height: 1.2;">Welcome to Sky Art Shop</h2>
+      <p style="font-size: 20px; margin-bottom: 24px; opacity: 0.95;">Your destination for creative stationery and supplies</p>
+      <div class="hero-description" style="margin-bottom: 32px;">
+        <p style="font-size: 16px; opacity: 0.9; line-height: 1.6;">
+          Discover our curated collection of scrapbooking, journaling, cardmaking, and collaging supplies. 
+          Express your creativity and bring your artistic vision to life.
+        </p>
+      </div>
+      <a href="/shop.html" class="btn" style="display: inline-block; padding: 14px 32px; background: white; color: #667eea; font-weight: 600; border-radius: 8px; text-decoration: none; transition: transform 0.2s;">Shop Now</a>
+    </div>
+  </section>
+
+  <!-- Featured Products Section -->
+  <section class="collection" style="padding: 80px 24px; background: #f9fafb;">
+    <div class="container" style="max-width: 1200px; margin: 0 auto;">
+      <h2 style="text-align: center; font-size: 36px; font-weight: 700; color: #1a1a1a; margin-bottom: 12px;">Featured Products</h2>
+      <p style="text-align: center; color: #6b7280; margin-bottom: 48px; font-size: 16px;">Discover our most popular items</p>
+      <div class="products-grid" id="featuredProducts" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-bottom: 48px;">
+        <div style="text-align: center; padding: 40px; color: #9ca3af;">Loading products...</div>
+      </div>
+      <div style="text-align: center;">
+        <a href="/shop.html" class="btn" style="display: inline-block; padding: 12px 28px; background: #6b46c1; color: white; font-weight: 600; border-radius: 8px; text-decoration: none;">View All Products</a>
+      </div>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer style="padding: 40px 24px; background: #1f2937; color: white; text-align: center;">
+    <div style="max-width: 1200px; margin: 0 auto;">
+      <h3 style="font-size: 24px; font-weight: 600; margin-bottom: 16px;">Sky Art Shop</h3>
+      <p style="margin-bottom: 20px; color: #9ca3af;">Follow Us</p>
+      <div style="display: flex; gap: 16px; justify-content: center; margin-bottom: 24px;">
+        <a href="#" style="color: white; font-size: 24px;"><i class="bi bi-instagram"></i></a>
+        <a href="#" style="color: white; font-size: 24px;"><i class="bi bi-facebook"></i></a>
+        <a href="#" style="color: white; font-size: 24px;"><i class="bi bi-twitter"></i></a>
+      </div>
+      <p style="color: #9ca3af; font-size: 14px;">&copy; 2025 Sky Art Shop. All rights reserved.</p>
+    </div>
+  </footer>
+
+  <!-- Load Navbar Styles -->
+  <script>
+    // Inject navbar styles
+    const navStyles = document.createElement('style');
+    navStyles.textContent = `
+      ${document.querySelector('style').textContent}
+    `;
+  </script>
+
+  <script src="/assets/js/shopping.js"></script>
+  <script>
+    // Load featured products
+    async function loadFeaturedProducts() {
+      try {
+        const response = await fetch('/api/products/featured?limit=4');
+        const data = await response.json();
+        
+        const container = document.getElementById('featuredProducts');
+        if (data.success && data.products && data.products.length > 0) {
+          container.innerHTML = data.products.map(product => `
+            <div class="product-card" style="background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: transform 0.2s, box-shadow 0.2s;">
+              <div class="product-image" style="position: relative; padding-top: 100%; overflow: hidden; background: #f3f4f6;">
+                <img src="${product.imageurl || '/assets/images/placeholder.jpg'}" 
+                     alt="${product.name}"
+                     style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;"
+                     onerror="this.src='/assets/images/placeholder.jpg'" />
+              </div>
+              <div style="padding: 20px;">
+                <h3 style="font-size: 16px; font-weight: 600; color: #1a1a1a; margin: 0 0 8px 0; line-height: 1.4;">${product.name}</h3>
+                <p style="font-size: 20px; font-weight: 700; color: #6b46c1; margin: 0 0 16px 0;">$${parseFloat(product.price).toFixed(2)}</p>
+                <div style="display: flex; gap: 8px;">
+                  <button onclick='shoppingManager.addToCart(${JSON.stringify(product)})' 
+                          style="flex: 1; padding: 10px; background: #6b46c1; color: white; border: none; border-radius: 6px; font-weight: 500; cursor: pointer; transition: background 0.2s;">
+                    <i class="bi bi-cart-plus"></i> Add to Cart
+                  </button>
+                  <button onclick='shoppingManager.addToWishlist(${JSON.stringify(product)})' 
+                          style="width: 44px; padding: 10px; background: transparent; color: #6b46c1; border: 1px solid #6b46c1; border-radius: 6px; cursor: pointer; transition: all 0.2s;">
+                    <i class="bi bi-heart"></i>
+                  </button>
+                </div>
+              </div>
+            </div>
+          `).join('');
+        } else {
+          container.innerHTML = '<p style="text-align: center; color: #9ca3af; padding: 40px;">No products available</p>';
+        }
+      } catch (error) {
+        console.error('Error loading products:', error);
+        document.getElementById('featuredProducts').innerHTML = '<p style="text-align: center; color: #ef4444; padding: 40px;">Error loading products</p>';
+      }
+    }
+    
+    // Load products on page load
+    loadFeaturedProducts();
+  </script>
+</body>
+</html>
diff --git a/website/public/home.html b/website/public/home.html
new file mode 100644
index 0000000..126e7d6
--- /dev/null
+++ b/website/public/home.html
@@ -0,0 +1,313 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Sky Art Shop - Scrapbooking, journaling, cardmaking, and collaging stationery."
+    />
+    <title>Home - Sky Art Shop</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=Roboto:wght@300;400;500;600;700&display=swap"
+      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/main.css" />
+    <link rel="stylesheet" href="/assets/css/navbar.css" />
+    <link rel="stylesheet" href="/assets/css/shopping.css" />
+  </head>
+  <body>  <!-- Modern Navigation -->
+  <nav class="modern-navbar">
+    <div class="navbar-wrapper">
+      <div class="navbar-brand">
+        <a href="/home.html" class="brand-link">
+          <img src="/uploads/images/8ba675b9-c4e6-41e6-8f14-382b9ee1d019.jpg" alt="Sky Art Shop Logo" class="brand-logo" />
+          <span class="brand-name">Sky Art Shop</span>
+        </a>
+      </div>
+      
+      <div class="navbar-menu">
+        <ul class="nav-menu-list">
+          <li class="nav-item"><a href="/home.html" class="nav-link">Home</a></li>
+          <li class="nav-item"><a href="/shop.html" class="nav-link">Shop</a></li>
+          <li class="nav-item"><a href="/portfolio.html" class="nav-link">Portfolio</a></li>
+          <li class="nav-item"><a href="/about.html" class="nav-link">About</a></li>
+          <li class="nav-item"><a href="/blog.html" class="nav-link">Blog</a></li>
+          <li class="nav-item"><a href="/contact.html" class="nav-link">Contact</a></li>
+        </ul>
+      </div>
+      
+      <div class="navbar-actions">
+        <div class="action-item wishlist-dropdown-wrapper">
+          <button class="action-btn" id="wishlistToggle" aria-label="Wishlist">
+            <i class="bi bi-heart"></i>
+            <span class="action-badge" id="wishlistCount">0</span>
+          </button>
+          <div class="action-dropdown wishlist-dropdown" id="wishlistPanel">
+            <div class="dropdown-head">
+              <h3>My Wishlist</h3>
+              <button class="dropdown-close" id="wishlistClose"><i class="bi bi-x-lg"></i></button>
+            </div>
+            <div class="dropdown-body" id="wishlistContent">
+              <p class="empty-state">Your wishlist is empty</p>
+            </div>
+            <div class="dropdown-foot">
+              <a href="/shop.html" class="btn-outline">Continue Shopping</a>
+            </div>
+          </div>
+        </div>
+        
+        <div class="action-item cart-dropdown-wrapper">
+          <button class="action-btn" id="cartToggle" aria-label="Shopping Cart">
+            <i class="bi bi-cart3"></i>
+            <span class="action-badge" id="cartCount">0</span>
+          </button>
+          <div class="action-dropdown cart-dropdown" id="cartPanel">
+            <div class="dropdown-head">
+              <h3>Shopping Cart</h3>
+              <button class="dropdown-close" id="cartClose"><i class="bi bi-x-lg"></i></button>
+            </div>
+            <div class="dropdown-body" id="cartContent">
+              <p class="empty-state">Your cart is empty</p>
+            </div>
+            <div class="dropdown-foot">
+              <div class="cart-summary">
+                <span class="summary-label">Subtotal:</span>
+                <span class="summary-value" id="cartSubtotal">$0.00</span>
+              </div>
+              <a href="/checkout.html" class="btn-primary-full">Proceed to Checkout</a>
+              <a href="/shop.html" class="btn-text">Continue Shopping</a>
+            </div>
+          </div>
+        </div>
+        
+        <button class="mobile-toggle" id="mobileMenuToggle" aria-label="Menu">
+          <span class="toggle-line"></span>
+          <span class="toggle-line"></span>
+          <span class="toggle-line"></span>
+        </button>
+      </div>
+    </div>
+    
+    <div class="mobile-menu" id="mobileMenu">
+      <div class="mobile-menu-header">
+        <span class="mobile-brand">Sky Art Shop</span>
+        <button class="mobile-close" id="mobileMenuClose"><i class="bi bi-x-lg"></i></button>
+      </div>
+      <ul class="mobile-menu-list">
+        <li><a href="/home.html" class="mobile-link">Home</a></li>
+        <li><a href="/shop.html" class="mobile-link">Shop</a></li>
+        <li><a href="/portfolio.html" class="mobile-link">Portfolio</a></li>
+        <li><a href="/about.html" class="mobile-link">About</a></li>
+        <li><a href="/blog.html" class="mobile-link">Blog</a></li>
+        <li><a href="/contact.html" class="mobile-link">Contact</a></li>
+      </ul>
+    </div>
+  </nav>
+
+    <!-- Hero Section -->
+    <section class="hero">
+      <div class="hero-content">
+        <h2>Welcome to Sky Art Shop</h2>
+        <p>Your destination for creative stationery and supplies</p>
+        <div class="hero-description">
+          <p>
+            Discover our curated collection of scrapbooking, journaling,
+            cardmaking, and collaging supplies. Express your creativity and
+            bring your artistic vision to life.
+          </p>
+        </div>
+        <a href="/shop.html" class="btn btn-primary">Shop Now</a>
+      </div>
+      <div class="hero-image">
+        <img
+          src="/assets/images/hero-image.jpg"
+          alt="Sky Art Shop"
+          loading="lazy"
+          onerror="this.style.display='none'"
+        />
+      </div>
+    </section>
+
+    <!-- Inspiration Section -->
+    <section class="inspiration">
+      <div class="container">
+        <h2>Get Inspired</h2>
+        <div class="inspiration-content">
+          <div class="inspiration-text">
+            <p>
+              At Sky Art Shop, we believe in the power of creativity to
+              transform and inspire. Whether you're an experienced crafter or
+              just beginning your creative journey, we have everything you need
+              to bring your ideas to life.
+            </p>
+            <p>
+              Explore our collection of washi tapes, stickers, stamps, and more.
+              Each item is carefully selected to help you create something
+              beautiful and meaningful.
+            </p>
+          </div>
+          <div class="inspiration-image">
+            <img
+              src="/assets/images/inspiration.jpg"
+              alt="Creative Inspiration"
+              loading="lazy"
+              onerror="this.style.display='none'"
+            />
+          </div>
+        </div>
+        <a href="/portfolio.html" class="btn btn-secondary">View Portfolio</a>
+      </div>
+    </section>
+
+    <!-- Featured Products Section -->
+    <section class="collection">
+      <div class="container">
+        <h2>Featured Products</h2>
+        <p class="section-subtitle">Discover our most popular items</p>
+        <div class="products-grid" id="featuredProducts">
+          <div class="product-card">
+            <div class="product-image">
+              <img
+                src="/assets/images/placeholder.jpg"
+                alt="Product"
+                loading="lazy"
+              />
+            </div>
+            <h3>Loading products...</h3>
+          </div>
+        </div>
+        <a href="/shop.html" class="btn btn-secondary">View All Products</a>
+      </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+      <div class="container">
+        <div class="footer-content">
+          <div class="footer-brand">
+            <h2 id="footerSiteName">Sky Art Shop</h2>
+            <p>Follow Us</p>
+            <div class="social-links">
+              <a href="#instagram" aria-label="Instagram">
+                <svg
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                >
+                  <path
+                    d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"
+                  />
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div class="footer-links">
+            <h3>Quick Links</h3>
+            <ul>
+              <li><a href="/shop.html">Shop</a></li>
+              <li><a href="/about.html">About</a></li>
+              <li><a href="/contact.html">Contact</a></li>
+              <li><a href="/admin/login.html">Admin</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="footer-bottom">
+          <p id="footerText">© 2025 by Sky Art Shop. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+
+    <script src="/assets/js/main.js"></script>
+    <script src="/assets/js/cart.js"></script>
+    <script>
+      // Load site settings
+      async function loadSiteSettings() {
+        try {
+          const response = await fetch("/api/settings");
+          if (response.ok) {
+            const data = await response.json();
+            if (data.settings) {
+              document.getElementById("siteName").textContent =
+                data.settings.sitename || "Sky Art Shop";
+              document.getElementById("footerSiteName").textContent =
+                data.settings.sitename || "Sky Art Shop";
+              document.getElementById("footerText").textContent =
+                data.settings.footertext ||
+                "© 2025 by Sky Art Shop. All rights reserved.";
+            }
+          }
+        } catch (error) {
+          console.log("Using default site settings");
+        }
+      }
+
+      // Load featured products
+      async function loadFeaturedProducts() {
+        try {
+          const response = await fetch("/api/products/featured?limit=4");
+          if (response.ok) {
+            const data = await response.json();
+            if (data.products && data.products.length > 0) {
+              const container = document.getElementById("featuredProducts");
+              container.innerHTML = data.products
+                .map(
+                  (product) => `
+                            <div class="product-card">
+                                <a href="/product.html?id=${
+                                  product.id
+                                }" class="product-link">
+                                    <div class="product-image">
+                                        <img src="${
+                                          product.imageurl ||
+                                          "/assets/images/placeholder.jpg"
+                                        }" alt="${
+                    product.name
+                  }" loading="lazy" />
+                                    </div>
+                                    <h3>${product.name}</h3>
+                                    <p class="price">$${parseFloat(
+                                      product.price
+                                    ).toFixed(2)}</p>
+                                </a>
+                                <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
+                                    <button class="btn btn-small btn-icon" onclick="addToWishlist('${
+                                      product.id
+                                    }', '${product.name}', ${product.price}, '${
+                    product.imageurl || ""
+                  }')" aria-label="Add to wishlist">
+                                        <i class="bi bi-heart"></i>
+                                    </button>
+                                    <button class="btn btn-small btn-icon" onclick="addToCart('${
+                                      product.id
+                                    }', '${product.name}', ${product.price}, '${
+                    product.imageurl || ""
+                  }')" aria-label="Add to cart">
+                                        <i class="bi bi-cart-plus"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        `
+                )
+                .join("");
+            }
+          }
+        } catch (error) {
+          console.log("Could not load featured products");
+        }
+      }
+
+      // Initialize
+      loadSiteSettings();
+      loadFeaturedProducts();
+    </script>
+    <script src="/assets/js/shopping.js"></script>
+</body>
+</html>
diff --git a/website/public/index.html b/website/public/index.html
new file mode 100644
index 0000000..e673a44
--- /dev/null
+++ b/website/public/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sky Art Shop</title>
+    <script>
+        // Redirect to home page
+        window.location.href = '/home.html';
+    </script>
+</head>
+<body>
+    <p>Loading Sky Art Shop...</p>
+</body>
+</html>
diff --git a/website/public/portfolio.html b/website/public/portfolio.html
new file mode 100644
index 0000000..e2809fa
--- /dev/null
+++ b/website/public/portfolio.html
@@ -0,0 +1,255 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About - Sky Art Shop</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" 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/main.css" />
+    <link rel="stylesheet" href="/assets/css/navbar.css" />
+    <link rel="stylesheet" href="/assets/css/shopping.css" />
+</head>
+  <body>
+    <!-- Modern Navigation -->
+    <nav class="modern-navbar">
+      <div class="navbar-wrapper">
+        <div class="navbar-brand">
+          <a href="/home.html" class="brand-link">
+            <img src="/uploads/images/8ba675b9-c4e6-41e6-8f14-382b9ee1d019.jpg" alt="Sky Art Shop Logo" class="brand-logo" />
+            <span class="brand-name">Sky Art Shop</span>
+          </a>
+        </div>
+        
+        <div class="navbar-menu">
+          <ul class="nav-menu-list">
+            <li class="nav-item"><a href="/home.html" class="nav-link">Home</a></li>
+            <li class="nav-item"><a href="/shop.html" class="nav-link">Shop</a></li>
+            <li class="nav-item"><a href="/portfolio.html" class="nav-link active">Portfolio</a></li>
+            <li class="nav-item"><a href="/about.html" class="nav-link">About</a></li>
+            <li class="nav-item"><a href="/blog.html" class="nav-link">Blog</a></li>
+            <li class="nav-item"><a href="/contact.html" class="nav-link">Contact</a></li>
+          </ul>
+        </div>
+        
+        <div class="navbar-actions">
+          <div class="action-item wishlist-dropdown-wrapper">
+            <button class="action-btn" id="wishlistToggle" aria-label="Wishlist">
+              <i class="bi bi-heart"></i>
+              <span class="action-badge" id="wishlistCount">0</span>
+            </button>
+            <div class="action-dropdown wishlist-dropdown" id="wishlistPanel">
+              <div class="dropdown-head">
+                <h3>My Wishlist</h3>
+                <button class="dropdown-close" id="wishlistClose"><i class="bi bi-x-lg"></i></button>
+              </div>
+              <div class="dropdown-body" id="wishlistContent">
+                <p class="empty-state">Your wishlist is empty</p>
+              </div>
+              <div class="dropdown-foot">
+                <a href="/shop.html" class="btn-outline">Continue Shopping</a>
+              </div>
+            </div>
+          </div>
+          
+          <div class="action-item cart-dropdown-wrapper">
+            <button class="action-btn" id="cartToggle" aria-label="Shopping Cart">
+              <i class="bi bi-cart3"></i>
+              <span class="action-badge" id="cartCount">0</span>
+            </button>
+            <div class="action-dropdown cart-dropdown" id="cartPanel">
+              <div class="dropdown-head">
+                <h3>Shopping Cart</h3>
+                <button class="dropdown-close" id="cartClose"><i class="bi bi-x-lg"></i></button>
+              </div>
+              <div class="dropdown-body" id="cartContent">
+                <p class="empty-state">Your cart is empty</p>
+              </div>
+              <div class="dropdown-foot">
+                <div class="cart-summary">
+                  <span class="summary-label">Subtotal:</span>
+                  <span class="summary-value" id="cartSubtotal">$0.00</span>
+                </div>
+                <a href="/checkout.html" class="btn-primary-full">Proceed to Checkout</a>
+                <a href="/shop.html" class="btn-text">Continue Shopping</a>
+              </div>
+            </div>
+          </div>
+          
+          <button class="mobile-toggle" id="mobileMenuToggle" aria-label="Menu">
+            <span class="toggle-line"></span>
+            <span class="toggle-line"></span>
+            <span class="toggle-line"></span>
+          </button>
+        </div>
+      </div>
+      
+      <div class="mobile-menu" id="mobileMenu">
+        <div class="mobile-menu-header">
+          <span class="mobile-brand">Sky Art Shop</span>
+          <button class="mobile-close" id="mobileMenuClose"><i class="bi bi-x-lg"></i></button>
+        </div>
+        <ul class="mobile-menu-list">
+          <li><a href="/home.html" class="mobile-link">Home</a></li>
+          <li><a href="/shop.html" class="mobile-link">Shop</a></li>
+          <li><a href="/portfolio.html" class="mobile-link">Portfolio</a></li>
+          <li><a href="/about.html" class="mobile-link">About</a></li>
+          <li><a href="/blog.html" class="mobile-link">Blog</a></li>
+          <li><a href="/contact.html" class="mobile-link">Contact</a></li>
+        </ul>
+      </div>
+    </nav>
+  <nav class="modern-navbar">
+    <div class="navbar-wrapper">
+      <div class="navbar-brand">
+        <a href="/home.html" class="brand-link">
+          <img src="/uploads/images/8ba675b9-c4e6-41e6-8f14-382b9ee1d019.jpg" alt="Sky Art Shop Logo" class="brand-logo" />
+          <span class="brand-name">Sky Art Shop</span>
+        </a>
+      </div>
+      
+      <div class="navbar-menu">
+        <ul class="nav-menu-list">
+          <li class="nav-item"><a href="/home.html" class="nav-link">Home</a></li>
+          <li class="nav-item"><a href="/shop.html" class="nav-link">Shop</a></li>
+          <li class="nav-item"><a href="/portfolio.html" class="nav-link">Portfolio</a></li>
+          <li class="nav-item"><a href="/about.html" class="nav-link">About</a></li>
+          <li class="nav-item"><a href="/blog.html" class="nav-link">Blog</a></li>
+          <li class="nav-item"><a href="/contact.html" class="nav-link">Contact</a></li>
+        </ul>
+      </div>
+      
+      <div class="navbar-actions">
+        <div class="action-item wishlist-dropdown-wrapper">
+          <button class="action-btn" id="wishlistToggle" aria-label="Wishlist">
+            <i class="bi bi-heart"></i>
+            <span class="action-badge" id="wishlistCount">0</span>
+          </button>
+          <div class="action-dropdown wishlist-dropdown" id="wishlistPanel">
+            <div class="dropdown-head">
+              <h3>My Wishlist</h3>
+              <button class="dropdown-close" id="wishlistClose"><i class="bi bi-x-lg"></i></button>
+            </div>
+            <div class="dropdown-body" id="wishlistContent">
+              <p class="empty-state">Your wishlist is empty</p>
+            </div>
+            <div class="dropdown-foot">
+              <a href="/shop.html" class="btn-outline">Continue Shopping</a>
+            </div>
+          </div>
+        </div>
+        
+        <div class="action-item cart-dropdown-wrapper">
+          <button class="action-btn" id="cartToggle" aria-label="Shopping Cart">
+            <i class="bi bi-cart3"></i>
+            <span class="action-badge" id="cartCount">0</span>
+          </button>
+          <div class="action-dropdown cart-dropdown" id="cartPanel">
+            <div class="dropdown-head">
+              <h3>Shopping Cart</h3>
+              <button class="dropdown-close" id="cartClose"><i class="bi bi-x-lg"></i></button>
+            </div>
+            <div class="dropdown-body" id="cartContent">
+              <p class="empty-state">Your cart is empty</p>
+            </div>
+            <div class="dropdown-foot">
+              <div class="cart-summary">
+                <span class="summary-label">Subtotal:</span>
+                <span class="summary-value" id="cartSubtotal">$0.00</span>
+              </div>
+              <a href="/checkout.html" class="btn-primary-full">Proceed to Checkout</a>
+              <a href="/shop.html" class="btn-text">Continue Shopping</a>
+            </div>
+          </div>
+        </div>
+        
+        <button class="mobile-toggle" id="mobileMenuToggle" aria-label="Menu">
+          <span class="toggle-line"></span>
+          <span class="toggle-line"></span>
+          <span class="toggle-line"></span>
+        </button>
+      </div>
+    </div>
+    
+    <div class="mobile-menu" id="mobileMenu">
+      <div class="mobile-menu-header">
+        <span class="mobile-brand">Sky Art Shop</span>
+        <button class="mobile-close" id="mobileMenuClose"><i class="bi bi-x-lg"></i></button>
+      </div>
+      <ul class="mobile-menu-list">
+        <li><a href="/home.html" class="mobile-link">Home</a></li>
+        <li><a href="/shop.html" class="mobile-link">Shop</a></li>
+        <li><a href="/portfolio.html" class="mobile-link">Portfolio</a></li>
+        <li><a href="/about.html" class="mobile-link">About</a></li>
+        <li><a href="/blog.html" class="mobile-link">Blog</a></li>
+        <li><a href="/contact.html" class="mobile-link">Contact</a></li>
+      </ul>
+    </div>
+  </nav>
+
+    <section class="about-hero">
+        <div class="container">
+            <h1>About Sky Art Shop</h1>
+            <p class="hero-subtitle">Your creative journey starts here</p>
+        </div>
+    </section>
+
+    <section class="about-content">
+        <div class="container">
+            <div class="about-layout">
+                <div class="about-main-content">
+                    <div class="about-text">
+                        <h2>Our Story</h2>
+                        <p>Sky Art Shop specializes in scrapbooking, journaling, cardmaking, and collaging stationery. We are passionate about helping people express their creativity and preserve their memories.</p>
+                        <p>Our mission is to promote mental health and wellness through creative art activities. We believe that crafting is more than just a hobby—it's a therapeutic journey that brings joy, mindfulness, and self-expression.</p>
+
+                        <h2>What We Offer</h2>
+                        <p>Our carefully curated collection includes:</p>
+                        <ul>
+                            <li>Washi tape in various designs and patterns</li>
+                            <li>Unique stickers for journaling and scrapbooking</li>
+                            <li>High-quality journals and notebooks</li>
+                            <li>Card making supplies and kits</li>
+                            <li>Collage materials and ephemera</li>
+                            <li>Creative tools and accessories</li>
+                        </ul>
+
+                        <h2>Why Choose Us</h2>
+                        <p>We hand-select every item in our store to ensure the highest quality and uniqueness. Whether you're a seasoned crafter or just starting your creative journey, we have something special for everyone.</p>
+                        <p>Join our community of creative minds and let your imagination soar!</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-brand">
+                    <h2>Sky Art Shop</h2>
+                    <p>Follow Us</p>
+                    <div class="social-links">
+                        <a href="#instagram" aria-label="Instagram"><i class="bi bi-instagram"></i></a>
+                    </div>
+                </div>
+                <div class="footer-links">
+                    <h3>Quick Links</h3>
+                    <ul>
+                        <li><a href="/shop.html">Shop</a></li>
+                        <li><a href="/about.html">About</a></li>
+                        <li><a href="/contact.html">Contact</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>© 2025 by Sky Art Shop. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="/assets/js/main.js"></script>
+    <script src="/assets/js/cart.js"></script>
+  <script src="/assets/js/shopping.js"></script>
+</body>
+</html>
diff --git a/website/public/product.html b/website/public/product.html
new file mode 100644
index 0000000..f7a9bbd
--- /dev/null
+++ b/website/public/product.html
@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Product Details - Sky Art Shop</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=Roboto:wght@300;400;500;600;700&display=swap" 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/main.css" />
+    <link rel="stylesheet" href="/assets/css/navbar.css" />
+    <link rel="stylesheet" href="/assets/css/shopping.css" />
+  <link rel="stylesheet" href="/assets/css/shopping.css" />
+</head>
+  <body>
+    <!-- Modern Navigation -->
+    <nav class="modern-navbar">
+      <div class="navbar-wrapper">
+        <div class="navbar-brand">
+          <a href="/home.html" class="brand-link">
+            <img src="/uploads/images/8ba675b9-c4e6-41e6-8f14-382b9ee1d019.jpg" alt="Sky Art Shop Logo" class="brand-logo" />
+            <span class="brand-name">Sky Art Shop</span>
+          </a>
+        </div>
+        
+        <div class="navbar-menu">
+          <ul class="nav-menu-list">
+            <li class="nav-item"><a href="/home.html" class="nav-link">Home</a></li>
+            <li class="nav-item"><a href="/shop.html" class="nav-link">Shop</a></li>
+            <li class="nav-item"><a href="/portfolio.html" class="nav-link">Portfolio</a></li>
+            <li class="nav-item"><a href="/about.html" class="nav-link">About</a></li>
+            <li class="nav-item"><a href="/blog.html" class="nav-link">Blog</a></li>
+            <li class="nav-item"><a href="/contact.html" class="nav-link">Contact</a></li>
+          </ul>
+        </div>
+        
+        <div class="navbar-actions">
+          <div class="action-item wishlist-dropdown-wrapper">
+            <button class="action-btn" id="wishlistToggle" aria-label="Wishlist">
+              <i class="bi bi-heart"></i>
+              <span class="action-badge" id="wishlistCount">0</span>
+            </button>
+            <div class="action-dropdown wishlist-dropdown" id="wishlistPanel">
+              <div class="dropdown-head">
+                <h3>My Wishlist</h3>
+                <button class="dropdown-close" id="wishlistClose"><i class="bi bi-x-lg"></i></button>
+              </div>
+              <div class="dropdown-body" id="wishlistContent">
+                <p class="empty-state">Your wishlist is empty</p>
+              </div>
+              <div class="dropdown-foot">
+                <a href="/shop.html" class="btn-outline">Continue Shopping</a>
+              </div>
+            </div>
+          </div>
+          
+          <div class="action-item cart-dropdown-wrapper">
+            <button class="action-btn" id="cartToggle" aria-label="Shopping Cart">
+              <i class="bi bi-cart3"></i>
+              <span class="action-badge" id="cartCount">0</span>
+            </button>
+            <div class="action-dropdown cart-dropdown" id="cartPanel">
+              <div class="dropdown-head">
+                <h3>Shopping Cart</h3>
+                <button class="dropdown-close" id="cartClose"><i class="bi bi-x-lg"></i></button>
+              </div>
+              <div class="dropdown-body" id="cartContent">
+                <p class="empty-state">Your cart is empty</p>
+              </div>
+              <div class="dropdown-foot">
+                <div class="cart-summary">
+                  <span class="summary-label">Subtotal:</span>
+                  <span class="summary-value" id="cartSubtotal">$0.00</span>
+                </div>
+                <a href="/checkout.html" class="btn-primary-full">Proceed to Checkout</a>
+                <a href="/shop.html" class="btn-text">Continue Shopping</a>
+              </div>
+            </div>
+          </div>
+          
+          <button class="mobile-toggle" id="mobileMenuToggle" aria-label="Menu">
+            <span class="toggle-line"></span>
+            <span class="toggle-line"></span>
+            <span class="toggle-line"></span>
+          </button>
+        </div>
+      </div>
+      
+      <div class="mobile-menu" id="mobileMenu">
+        <div class="mobile-menu-header">
+          <span class="mobile-brand">Sky Art Shop</span>
+          <button class="mobile-close" id="mobileMenuClose"><i class="bi bi-x-lg"></i></button>
+        </div>
+        <ul class="mobile-menu-list">
+          <li><a href="/home.html" class="mobile-link">Home</a></li>
+          <li><a href="/shop.html" class="mobile-link">Shop</a></li>
+          <li><a href="/portfolio.html" class="mobile-link">Portfolio</a></li>
+          <li><a href="/about.html" class="mobile-link">About</a></li>
+          <li><a href="/blog.html" class="mobile-link">Blog</a></li>
+          <li><a href="/contact.html" class="mobile-link">Contact</a></li>
+        </ul>
+      </div>
+    </nav>
+  <div id="loading" style="text-align: center; padding: 100px 20px; font-size: 18px; color: #6b7280;">
+    <i class="bi bi-hourglass-split" style="font-size: 48px; display: block; margin-bottom: 20px;"></i>
+    Loading product...
+  </div>
+  
+  <div id="productDetail" style="display: none;"></div>
+  
+  <script src="/assets/js/shopping.js"></script>
+  <script>
+    async function loadProduct() {
+      const params = new URLSearchParams(window.location.search);
+      const productId = params.get('id');
+      
+      if (!productId) {
+        document.getElementById('loading').innerHTML = '<p>Product not found</p><a href="/shop.html">Back to Shop</a>';
+        return;
+      }
+      
+      try {
+        const response = await fetch(\`/api/products/\${productId}\`);
+        const data = await response.json();
+        
+        if (!data.success || !data.product) {
+          throw new Error('Product not found');
+        }
+        
+        const product = data.product;
+        document.title = \`\${product.name} - Sky Art Shop\`;
+        
+        document.getElementById('productDetail').innerHTML = \`
+          <div style="font-family: 'Roboto', sans-serif;">
+            <nav style="background: white; padding: 16px 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
+              <div style="max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 20px;">
+                <a href="/home.html" style="font-size: 20px; font-weight: 600; color: #1a1a1a; text-decoration: none;">Sky Art Shop</a>
+                <span style="color: #d1d5db;">/</span>
+                <a href="/shop.html" style="color: #6b7280; text-decoration: none;">Shop</a>
+                <span style="color: #d1d5db;">/</span>
+                <span style="color: #6b7280;">\${product.name}</span>
+              </div>
+            </nav>
+            
+            <div style="max-width: 1200px; margin: 40px auto; padding: 0 24px;">
+              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 60px;">
+                <div>
+                  <div style="background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
+                    <img src="\${product.imageurl || '/assets/images/placeholder.jpg'}" 
+                         alt="\${product.name}"
+                         style="width: 100%; height: auto; display: block;"
+                         onerror="this.src='/assets/images/placeholder.jpg'" />
+                  </div>
+                </div>
+                
+                <div style="padding: 20px 0;">
+                  <h1 style="font-size: 36px; font-weight: 700; color: #1a1a1a; margin: 0 0 16px 0; line-height: 1.2;">\${product.name}</h1>
+                  
+                  <div style="display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px;">
+                    <p style="font-size: 36px; font-weight: 700; color: #6b46c1; margin: 0;">$\${parseFloat(product.price).toFixed(2)}</p>
+                    \${product.stockquantity > 0 ? 
+                      \`<span style="color: #10b981; font-weight: 500;">In Stock (\${product.stockquantity} available)</span>\` : 
+                      \`<span style="color: #ef4444; font-weight: 500;">Out of Stock</span>\`
+                    }
+                  </div>
+                  
+                  \${product.shortdescription ? \`
+                    <p style="font-size: 18px; color: #4b5563; line-height: 1.6; margin-bottom: 24px;">\${product.shortdescription}</p>
+                  \` : ''}
+                  
+                  \${product.description ? \`
+                    <div style="margin-bottom: 32px;">
+                      <h3 style="font-size: 18px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px;">Description</h3>
+                      <p style="color: #6b7280; line-height: 1.7;">\${product.description}</p>
+                    </div>
+                  \` : ''}
+                  
+                  \${product.category ? \`
+                    <p style="margin-bottom: 16px;">
+                      <span style="font-weight: 500; color: #6b7280;">Category:</span>
+                      <span style="display: inline-block; margin-left: 8px; padding: 4px 12px; background: #f3f4f6; border-radius: 6px; font-size: 14px;">\${product.category}</span>
+                    </p>
+                  \` : ''}
+                  
+                  \${product.color ? \`
+                    <p style="margin-bottom: 24px;">
+                      <span style="font-weight: 500; color: #6b7280;">Color:</span>
+                      <span style="margin-left: 8px;">\${product.color}</span>
+                    </p>
+                  \` : ''}
+                  
+                  <div style="display: flex; gap: 12px; margin-top: 32px;">
+                    <button onclick="addToCart()" 
+                            style="flex: 1; padding: 16px 32px; background: #6b46c1; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px;"
+                            onmouseover="this.style.background='#5936a3'" 
+                            onmouseout="this.style.background='#6b46c1'">
+                      <i class="bi bi-cart-plus" style="font-size: 20px;"></i>
+                      Add to Cart
+                    </button>
+                    <button onclick="addToWishlist()" 
+                            style="width: 56px; padding: 16px; background: transparent; color: #6b46c1; border: 2px solid #6b46c1; border-radius: 8px; font-size: 20px; cursor: pointer; transition: all 0.2s;"
+                            onmouseover="this.style.background='#f3f0ff'" 
+                            onmouseout="this.style.background='transparent'">
+                      <i class="bi bi-heart"></i>
+                    </button>
+                  </div>
+                  
+                  <a href="/shop.html" style="display: inline-block; margin-top: 24px; color: #6b46c1; text-decoration: none; font-weight: 500;">
+                    <i class="bi bi-arrow-left"></i> Back to Shop
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        \`;
+        
+        document.getElementById('loading').style.display = 'none';
+        document.getElementById('productDetail').style.display = 'block';
+        
+        // Store product data
+        window.currentProduct = product;
+        
+      } catch (error) {
+        console.error('Error loading product:', error);
+        document.getElementById('loading').innerHTML = '<p style="color: #ef4444;">Error loading product</p><a href="/shop.html" style="color: #6b46c1; text-decoration: none; font-weight: 500;">Back to Shop</a>';
+      }
+    }
+    
+    function addToCart() {
+      if (window.currentProduct && window.shoppingManager) {
+        shoppingManager.addToCart(window.currentProduct, 1);
+      }
+    }
+    
+    function addToWishlist() {
+      if (window.currentProduct && window.shoppingManager) {
+        shoppingManager.addToWishlist(window.currentProduct);
+      }
+    }
+    
+    loadProduct();
+  </script>
+</body>
+</html>
diff --git a/website/public/shop.html b/website/public/shop.html
new file mode 100644
index 0000000..54a8543
--- /dev/null
+++ b/website/public/shop.html
@@ -0,0 +1,362 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Shop all products - Sky Art Shop" />
+    <title>Shop - Sky Art Shop</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=Roboto:wght@300;400;500;600;700&display=swap"
+      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/main.css" />
+    <link rel="stylesheet" href="/assets/css/navbar.css" />
+    <link rel="stylesheet" href="/assets/css/shopping.css" />
+  </head>
+  <body>  <!-- Modern Navigation -->
+  <nav class="modern-navbar">
+    <div class="navbar-wrapper">
+      <div class="navbar-brand">
+        <a href="/home.html" class="brand-link">
+          <img src="/uploads/images/8ba675b9-c4e6-41e6-8f14-382b9ee1d019.jpg" alt="Sky Art Shop Logo" class="brand-logo" />
+          <span class="brand-name">Sky Art Shop</span>
+        </a>
+      </div>
+      
+      <div class="navbar-menu">
+        <ul class="nav-menu-list">
+          <li class="nav-item"><a href="/home.html" class="nav-link">Home</a></li>
+          <li class="nav-item"><a href="/shop.html" class="nav-link">Shop</a></li>
+          <li class="nav-item"><a href="/portfolio.html" class="nav-link">Portfolio</a></li>
+          <li class="nav-item"><a href="/about.html" class="nav-link">About</a></li>
+          <li class="nav-item"><a href="/blog.html" class="nav-link">Blog</a></li>
+          <li class="nav-item"><a href="/contact.html" class="nav-link">Contact</a></li>
+        </ul>
+      </div>
+      
+      <div class="navbar-actions">
+        <div class="action-item wishlist-dropdown-wrapper">
+          <button class="action-btn" id="wishlistToggle" aria-label="Wishlist">
+            <i class="bi bi-heart"></i>
+            <span class="action-badge" id="wishlistCount">0</span>
+          </button>
+          <div class="action-dropdown wishlist-dropdown" id="wishlistPanel">
+            <div class="dropdown-head">
+              <h3>My Wishlist</h3>
+              <button class="dropdown-close" id="wishlistClose"><i class="bi bi-x-lg"></i></button>
+            </div>
+            <div class="dropdown-body" id="wishlistContent">
+              <p class="empty-state">Your wishlist is empty</p>
+            </div>
+            <div class="dropdown-foot">
+              <a href="/shop.html" class="btn-outline">Continue Shopping</a>
+            </div>
+          </div>
+        </div>
+        
+        <div class="action-item cart-dropdown-wrapper">
+          <button class="action-btn" id="cartToggle" aria-label="Shopping Cart">
+            <i class="bi bi-cart3"></i>
+            <span class="action-badge" id="cartCount">0</span>
+          </button>
+          <div class="action-dropdown cart-dropdown" id="cartPanel">
+            <div class="dropdown-head">
+              <h3>Shopping Cart</h3>
+              <button class="dropdown-close" id="cartClose"><i class="bi bi-x-lg"></i></button>
+            </div>
+            <div class="dropdown-body" id="cartContent">
+              <p class="empty-state">Your cart is empty</p>
+            </div>
+            <div class="dropdown-foot">
+              <div class="cart-summary">
+                <span class="summary-label">Subtotal:</span>
+                <span class="summary-value" id="cartSubtotal">$0.00</span>
+              </div>
+              <a href="/checkout.html" class="btn-primary-full">Proceed to Checkout</a>
+              <a href="/shop.html" class="btn-text">Continue Shopping</a>
+            </div>
+          </div>
+        </div>
+        
+        <button class="mobile-toggle" id="mobileMenuToggle" aria-label="Menu">
+          <span class="toggle-line"></span>
+          <span class="toggle-line"></span>
+          <span class="toggle-line"></span>
+        </button>
+      </div>
+    </div>
+    
+    <div class="mobile-menu" id="mobileMenu">
+      <div class="mobile-menu-header">
+        <span class="mobile-brand">Sky Art Shop</span>
+        <button class="mobile-close" id="mobileMenuClose"><i class="bi bi-x-lg"></i></button>
+      </div>
+      <ul class="mobile-menu-list">
+        <li><a href="/home.html" class="mobile-link">Home</a></li>
+        <li><a href="/shop.html" class="mobile-link">Shop</a></li>
+        <li><a href="/portfolio.html" class="mobile-link">Portfolio</a></li>
+        <li><a href="/about.html" class="mobile-link">About</a></li>
+        <li><a href="/blog.html" class="mobile-link">Blog</a></li>
+        <li><a href="/contact.html" class="mobile-link">Contact</a></li>
+      </ul>
+    </div>
+  </nav>
+
+    <!-- Shop Hero -->
+    <section class="shop-hero">
+      <div class="container">
+        <h1>Shop All Products</h1>
+        <p class="hero-subtitle">
+          Find everything you need for your creative projects
+        </p>
+      </div>
+    </section>
+
+    <!-- Shop Filters -->
+    <section class="shop-filters">
+      <div class="container">
+        <div class="filter-bar">
+          <div class="filter-group">
+            <label for="category-filter">Category:</label>
+            <select id="category-filter">
+              <option value="">All Products</option>
+            </select>
+          </div>
+          <div class="filter-group">
+            <label for="sort-filter">Sort By:</label>
+            <select id="sort-filter">
+              <option value="name">Name</option>
+              <option value="price-low">Price: Low to High</option>
+              <option value="price-high">Price: High to Low</option>
+              <option value="newest">Newest First</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Products Grid -->
+    <section class="shop-products">
+      <div class="container">
+        <div id="loadingMessage" style="text-align: center; padding: 40px">
+          <p>Loading products...</p>
+        </div>
+        <div class="products-grid" id="productsGrid"></div>
+        <div
+          id="noProducts"
+          style="display: none; text-align: center; padding: 40px"
+        >
+          <p>No products found.</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+      <div class="container">
+        <div class="footer-content">
+          <div class="footer-brand">
+            <h2>Sky Art Shop</h2>
+            <p>Follow Us</p>
+            <div class="social-links">
+              <a href="#instagram" aria-label="Instagram">
+                <svg
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                >
+                  <path
+                    d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"
+                  />
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div class="footer-links">
+            <h3>Quick Links</h3>
+            <ul>
+              <li><a href="/shop.html">Shop</a></li>
+              <li><a href="/about.html">About</a></li>
+              <li><a href="/contact.html">Contact</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="footer-bottom">
+          <p>© 2025 by Sky Art Shop. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+
+    <script src="/assets/js/main.js"></script>
+    <script src="/assets/js/cart.js"></script>
+    <script>
+      let allProducts = [];
+      let categories = [];
+
+      // Load products from API
+      async function loadProducts() {
+        try {
+          const response = await fetch("/api/products");
+          if (response.ok) {
+            const data = await response.json();
+            allProducts = data.products || [];
+
+            // Extract unique categories
+            categories = [
+              ...new Set(allProducts.map((p) => p.category).filter((c) => c)),
+            ];
+
+            // Populate category filter
+            const categoryFilter = document.getElementById("category-filter");
+            categories.forEach((cat) => {
+              const option = document.createElement("option");
+              option.value = cat;
+              option.textContent = cat;
+              categoryFilter.appendChild(option);
+            });
+
+            // Display products
+            displayProducts(allProducts);
+          } else {
+            document.getElementById("loadingMessage").style.display = "none";
+            document.getElementById("noProducts").style.display = "block";
+          }
+        } catch (error) {
+          console.error("Error loading products:", error);
+          document.getElementById("loadingMessage").innerHTML =
+            "<p>Error loading products. Please try again later.</p>";
+        }
+      }
+
+      // Display products
+      function displayProducts(products) {
+        const grid = document.getElementById("productsGrid");
+        const loading = document.getElementById("loadingMessage");
+        const noProducts = document.getElementById("noProducts");
+
+        loading.style.display = "none";
+
+        if (products.length === 0) {
+          grid.innerHTML = "";
+          noProducts.style.display = "block";
+          return;
+        }
+
+        noProducts.style.display = "none";
+
+        grid.innerHTML = products
+          .map((product) => {
+            const imageUrl =
+              product.imageurl ||
+              product.images?.[0] ||
+              "/assets/images/placeholder.jpg";
+            const price = parseFloat(product.price || 0).toFixed(2);
+
+            return `
+                    <div class="product-card">
+                        <a href="/product.html?id=${
+                          product.id
+                        }" class="product-link">
+                            <div class="product-image">
+                                <img src="${imageUrl}" alt="${
+              product.name
+            }" loading="lazy" onerror="this.src='/assets/images/placeholder.jpg'" />
+                            </div>
+                            <h3>${product.name}</h3>
+                            ${
+                              product.color
+                                ? `<span class="product-color-badge">${product.color}</span>`
+                                : ""
+                            }
+                            ${
+                              product.shortdescription || product.description
+                                ? `<div class="product-description">${
+                                    product.shortdescription ||
+                                    product.description.substring(0, 100) +
+                                      "..."
+                                  }</div>`
+                                : ""
+                            }
+                            <p class="price">$${price}</p>
+                        </a>
+                        <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
+                            <button class="btn btn-small btn-icon"
+                                onclick="addToWishlist('${
+                                  product.id
+                                }', '${product.name.replace(/'/g, "\\'")}', ${
+              product.price
+            }, '${imageUrl}')"
+                                aria-label="Add to wishlist">
+                                <i class="bi bi-heart"></i>
+                            </button>
+                            <button class="btn btn-small btn-icon"
+                                onclick="addToCart('${
+                                  product.id
+                                }', '${product.name.replace(/'/g, "\\'")}', ${
+              product.price
+            }, '${imageUrl}')"
+                                aria-label="Add to cart">
+                                <i class="bi bi-cart-plus"></i>
+                            </button>
+                        </div>
+                    </div>
+                `;
+          })
+          .join("");
+      }
+
+      // Filter and sort products
+      function filterAndSortProducts() {
+        const categoryFilter = document.getElementById("category-filter").value;
+        const sortFilter = document.getElementById("sort-filter").value;
+
+        let filtered = allProducts;
+
+        // Apply category filter
+        if (categoryFilter) {
+          filtered = filtered.filter((p) => p.category === categoryFilter);
+        }
+
+        // Apply sorting
+        filtered = [...filtered]; // Create copy
+        switch (sortFilter) {
+          case "name":
+            filtered.sort((a, b) => a.name.localeCompare(b.name));
+            break;
+          case "price-low":
+            filtered.sort((a, b) => parseFloat(a.price) - parseFloat(b.price));
+            break;
+          case "price-high":
+            filtered.sort((a, b) => parseFloat(b.price) - parseFloat(a.price));
+            break;
+          case "newest":
+            filtered.sort(
+              (a, b) => new Date(b.createdat) - new Date(a.createdat)
+            );
+            break;
+        }
+
+        displayProducts(filtered);
+      }
+
+      // Event listeners
+      document
+        .getElementById("category-filter")
+        .addEventListener("change", filterAndSortProducts);
+      document
+        .getElementById("sort-filter")
+        .addEventListener("change", filterAndSortProducts);
+
+      // Initialize
+      loadProducts();
+    </script>
+    <script src="/assets/js/shopping.js"></script>
+</body>
+</html>