diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
index 5a27a89..613db35 100644
--- a/node_modules/.package-lock.json
+++ b/node_modules/.package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "Shradha",
+  "name": "sandbox",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
diff --git a/package-lock.json b/package-lock.json
index 1e460d5..b30bba0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "Shradha",
+  "name": "sandbox",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
diff --git a/public/index.html b/public/index.html
index bcbf6b3..464d47f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,30 +3,154 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="./style.css" type="text/css" />
-    <title>Home Page</title>
+    <title>App Builder - Personal Assistant</title>
+    <link rel="stylesheet" href="./style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body>
-    <h1>Hi student, Welcome to XYZ University!</h1>
-    <p>You can sign up to the platform to access all important notes & lectures.</p>
-
-    <form action="/addUser" method="POST" target="_blank" id="signupForm">
-        <div class="field">
-            <label for="email">Email: </label>
-            <input type="text" placeholder="jane@email.com" name="email">
+    <!-- Header -->
+    <header class="header">
+        <div class="header-left">
+            <h1 class="logo">⚡ App Builder</h1>
+            <div class="project-info">
+                <input type="text" id="projectName" placeholder="Untitled Project" class="project-name-input">
+            </div>
+        </div>
+        <div class="header-right">
+            <button class="btn btn-secondary" id="saveBtn">💾 Save</button>
+            <button class="btn btn-secondary" id="loadBtn">📂 Load</button>
+            <button class="btn btn-primary" id="exportBtn">⬇️ Export</button>
         </div>
-        <div class="field">    
-        <label for="username">Username: </label>
-            <input type="text" placeholder="Jane Doe" name="username">
+    </header>
+
+    <!-- Main Container -->
+    <div class="main-container">
+        <!-- Sidebar - Component Library -->
+        <aside class="sidebar">
+            <h2 class="sidebar-title">Components</h2>
+            <div class="component-library">
+                <div class="component-category">
+                    <h3 class="category-title">Layout</h3>
+                    <div class="component-item" draggable="true" data-type="container">
+                        <span class="component-icon">📦</span>
+                        <span class="component-name">Container</span>
+                    </div>
+                    <div class="component-item" draggable="true" data-type="section">
+                        <span class="component-icon">📄</span>
+                        <span class="component-name">Section</span>
+                    </div>
+                </div>
+
+                <div class="component-category">
+                    <h3 class="category-title">Typography</h3>
+                    <div class="component-item" draggable="true" data-type="heading">
+                        <span class="component-icon">H</span>
+                        <span class="component-name">Heading</span>
+                    </div>
+                    <div class="component-item" draggable="true" data-type="text">
+                        <span class="component-icon">T</span>
+                        <span class="component-name">Text</span>
+                    </div>
+                </div>
+
+                <div class="component-category">
+                    <h3 class="category-title">Form Elements</h3>
+                    <div class="component-item" draggable="true" data-type="button">
+                        <span class="component-icon">🔘</span>
+                        <span class="component-name">Button</span>
+                    </div>
+                    <div class="component-item" draggable="true" data-type="input">
+                        <span class="component-icon">📝</span>
+                        <span class="component-name">Input</span>
+                    </div>
+                    <div class="component-item" draggable="true" data-type="textarea">
+                        <span class="component-icon">📋</span>
+                        <span class="component-name">Textarea</span>
+                    </div>
+                </div>
+
+                <div class="component-category">
+                    <h3 class="category-title">Media</h3>
+                    <div class="component-item" draggable="true" data-type="image">
+                        <span class="component-icon">🖼️</span>
+                        <span class="component-name">Image</span>
+                    </div>
+                    <div class="component-item" draggable="true" data-type="video">
+                        <span class="component-icon">🎥</span>
+                        <span class="component-name">Video</span>
+                    </div>
+                </div>
+            </div>
+        </aside>
+
+        <!-- Canvas Area -->
+        <main class="canvas-container">
+            <div class="canvas-toolbar">
+                <button class="toolbar-btn" id="desktopView" title="Desktop View">🖥️</button>
+                <button class="toolbar-btn" id="tabletView" title="Tablet View">📱</button>
+                <button class="toolbar-btn" id="mobileView" title="Mobile View">📱</button>
+                <div class="toolbar-divider"></div>
+                <button class="toolbar-btn" id="undoBtn" title="Undo">↶</button>
+                <button class="toolbar-btn" id="redoBtn" title="Redo">↷</button>
+                <button class="toolbar-btn" id="clearBtn" title="Clear Canvas">🗑️</button>
+            </div>
+            <div class="canvas" id="canvas">
+                <div class="canvas-placeholder">
+                    <div class="placeholder-content">
+                        <h2>👈 Drag components here to start building</h2>
+                        <p>Select components from the left sidebar and drop them on this canvas</p>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <!-- Properties Panel -->
+        <aside class="properties-panel">
+            <h2 class="panel-title">Properties</h2>
+            <div class="properties-content" id="propertiesContent">
+                <div class="no-selection">
+                    <p>Select a component to edit its properties</p>
+                </div>
+            </div>
+        </aside>
+    </div>
+
+    <!-- Modal for Loading Projects -->
+    <div class="modal" id="loadModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2>Load Project</h2>
+                <button class="modal-close" id="closeModal">&times;</button>
+            </div>
+            <div class="modal-body" id="projectsList">
+                <p class="loading">Loading projects...</p>
+            </div>
         </div>
-        <div class="field">
-            <label for="password">Password: </label>
-            <input type="password" placeholder="password" name="password">
+    </div>
+
+    <!-- Modal for Export -->
+    <div class="modal" id="exportModal">
+        <div class="modal-content modal-large">
+            <div class="modal-header">
+                <h2>Export Code</h2>
+                <button class="modal-close" id="closeExportModal">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div class="code-tabs">
+                    <button class="code-tab active" data-tab="html">HTML</button>
+                    <button class="code-tab" data-tab="css">CSS</button>
+                    <button class="code-tab" data-tab="js">JavaScript</button>
+                </div>
+                <div class="code-container">
+                    <pre id="codeOutput"><code>// Your generated code will appear here</code></pre>
+                </div>
+                <button class="btn btn-primary" id="copyCodeBtn">📋 Copy Code</button>
+            </div>
         </div>
-        
-        <button id="formBtn">Create Account</button>
-        
-    </form>
-</body>
+    </div>
 
-</html>
\ No newline at end of file
+    <script src="./app.js"></script>
+</body>
+</html>
diff --git a/public/style.css b/public/style.css
index fa694af..6d1a173 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,25 +1,332 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 body {
+    font-family: 'Cormorant Garamond', serif;
+    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 2rem;
+    position: relative;
+    overflow-x: hidden;
+}
+
+.background-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: 
+        radial-gradient(circle at 20% 50%, rgba(218, 165, 32, 0.05) 0%, transparent 50%),
+        radial-gradient(circle at 80% 80%, rgba(255, 192, 203, 0.05) 0%, transparent 50%);
+    pointer-events: none;
+    z-index: 0;
+}
+
+.wedding-card {
+    background: white;
+    max-width: 700px;
+    width: 100%;
+    border-radius: 20px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+    position: relative;
+    z-index: 1;
+    animation: fadeInUp 1s ease-out;
+    border: 1px solid rgba(218, 165, 32, 0.2);
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.decorative-top,
+.decorative-bottom {
     text-align: center;
+    padding: 1.5rem;
+    background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
 }
-#formBtn {
-    color: white;
-    background-color:coral;
-    border: none;
-    border-radius: 2px;
-    padding: 0.25rem 1rem;
-    margin-top: 1rem;
-    cursor: pointer;
+
+.decorative-top {
+    border-radius: 20px 20px 0 0;
+    border-bottom: 2px solid rgba(218, 165, 32, 0.3);
+}
+
+.decorative-bottom {
+    border-radius: 0 0 20px 20px;
+    border-top: 2px solid rgba(218, 165, 32, 0.3);
+}
+
+.heart {
+    font-size: 2rem;
+    color: #DAA520;
+    animation: heartbeat 2s ease-in-out infinite;
+}
+
+@keyframes heartbeat {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.1);
+    }
+}
+
+.card-content {
+    padding: 3rem 2.5rem;
+}
+
+.invitation-header {
+    text-align: center;
+    margin-bottom: 1.5rem;
+}
+
+.together {
     font-size: 1rem;
+    color: #666;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    font-weight: 300;
 }
 
-form {
-    border: 2px solid grey;
-    display: inline-block;
+.couple-names {
+    text-align: center;
+    margin: 2rem 0;
+}
+
+.bride-name,
+.groom-name {
+    font-family: 'Great Vibes', cursive;
+    font-size: 3.5rem;
+    color: #2c3e50;
+    margin: 0.5rem 0;
+    font-weight: 400;
+    animation: fadeIn 1.5s ease-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.ampersand {
+    font-family: 'Playfair Display', serif;
+    font-size: 2.5rem;
+    color: #DAA520;
+    margin: 1rem 0;
+    font-weight: 300;
+}
+
+.invitation-text {
+    text-align: center;
+    margin: 2rem 0;
+}
+
+.invite-line {
+    font-size: 1.1rem;
+    color: #555;
+    margin: 0.5rem 0;
+    font-weight: 300;
+    letter-spacing: 0.5px;
+}
+
+.wedding-details {
+    margin: 3rem 0;
     padding: 2rem;
-    border-radius: 0.5rem;
-    text-align: left;
+    background: linear-gradient(135deg, #fdfbfb 0%, #f8f9fa 100%);
+    border-radius: 15px;
+    border: 1px solid rgba(218, 165, 32, 0.2);
+}
+
+.detail-item {
+    text-align: center;
+    margin: 1.5rem 0;
+}
+
+.detail-label {
+    font-family: 'Playfair Display', serif;
+    font-size: 0.9rem;
+    color: #DAA520;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+}
+
+.detail-value {
+    font-size: 1.3rem;
+    color: #2c3e50;
+    font-weight: 600;
+    margin: 0.3rem 0;
+}
+
+.detail-address {
+    font-size: 1rem;
+    color: #666;
+    font-weight: 300;
+    margin-top: 0.3rem;
+}
+
+.divider {
+    text-align: center;
+    margin: 3rem 0;
+}
+
+.divider-ornament {
+    font-size: 2rem;
+    color: #DAA520;
+    opacity: 0.6;
+}
+
+.rsvp-section {
+    margin-top: 3rem;
+}
+
+.rsvp-title {
+    font-family: 'Playfair Display', serif;
+    font-size: 2rem;
+    color: #2c3e50;
+    text-align: center;
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+}
+
+.rsvp-subtitle {
+    text-align: center;
+    color: #666;
+    font-size: 1rem;
+    margin-bottom: 2rem;
+    font-style: italic;
+}
+
+form {
+    display: block;
+    width: 100%;
 }
 
 .field {
+    margin-bottom: 1.5rem;
+}
+
+.field label {
+    display: block;
+    font-family: 'Playfair Display', serif;
+    font-size: 0.95rem;
+    color: #2c3e50;
     margin-bottom: 0.5rem;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+}
+
+.field input,
+.field select,
+.field textarea {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    font-family: 'Cormorant Garamond', serif;
+    font-size: 1rem;
+    color: #2c3e50;
+    transition: all 0.3s ease;
+    background: white;
+}
+
+.field input:focus,
+.field select:focus,
+.field textarea:focus {
+    outline: none;
+    border-color: #DAA520;
+    box-shadow: 0 0 0 3px rgba(218, 165, 32, 0.1);
+}
+
+.field textarea {
+    resize: vertical;
+    min-height: 80px;
+}
+
+#formBtn {
+    width: 100%;
+    padding: 1rem 2rem;
+    background: linear-gradient(135deg, #DAA520 0%, #B8860B 100%);
+    color: white;
+    border: none;
+    border-radius: 10px;
+    font-family: 'Playfair Display', serif;
+    font-size: 1.1rem;
+    font-weight: 600;
+    letter-spacing: 1px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-top: 1rem;
+    box-shadow: 0 4px 15px rgba(218, 165, 32, 0.3);
+}
+
+#formBtn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(218, 165, 32, 0.4);
+    background: linear-gradient(135deg, #B8860B 0%, #DAA520 100%);
+}
+
+#formBtn:active {
+    transform: translateY(0);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    body {
+        padding: 1rem;
+    }
+    
+    .card-content {
+        padding: 2rem 1.5rem;
+    }
+    
+    .bride-name,
+    .groom-name {
+        font-size: 2.5rem;
+    }
+    
+    .ampersand {
+        font-size: 2rem;
+    }
+    
+    .rsvp-title {
+        font-size: 1.5rem;
+    }
+    
+    .wedding-details {
+        padding: 1.5rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .bride-name,
+    .groom-name {
+        font-size: 2rem;
+    }
+    
+    .detail-value {
+        font-size: 1.1rem;
+    }
+    
+    .card-content {
+        padding: 1.5rem 1rem;
+    }
 }
\ No newline at end of file
diff --git a/server.js b/server.js
index d869597..a10a3e3 100644
--- a/server.js
+++ b/server.js
@@ -2,41 +2,295 @@ const express = require("express");
 const app = express();
 const path = require("path");
 const MongoClient = require("mongodb").MongoClient;
+const { ObjectId } = require("mongodb");
 
 const PORT = 5050;
 app.use(express.urlencoded({ extended: true }));
+app.use(express.json());
 app.use(express.static("public"));
 
 const MONGO_URL = "mongodb://admin:qwerty@localhost:27017";
 const client = new MongoClient(MONGO_URL);
 
-//GET all users
-app.get("/getUsers", async (req, res) => {
-    await client.connect(URL);
-    console.log('Connected successfully to server');
+// ============================================
+// APP BUILDER API ENDPOINTS
+// ============================================
 
-    const db = client.db("apnacollege-db");
-    const data = await db.collection('users').find({}).toArray();
+// GET all projects
+app.get("/api/projects", async (req, res) => {
+    try {
+        await client.connect();
+        const db = client.db("app-builder-db");
+        const projects = await db.collection('projects').find({}).toArray();
+        
+        res.json({
+            success: true,
+            count: projects.length,
+            projects: projects
+        });
+    } catch (error) {
+        console.error('Error fetching projects:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error fetching projects'
+        });
+    } finally {
+        await client.close();
+    }
+});
+
+// GET single project by ID
+app.get("/api/projects/:id", async (req, res) => {
+    try {
+        await client.connect();
+        const db = client.db("app-builder-db");
+        const project = await db.collection('projects').findOne({ 
+            _id: new ObjectId(req.params.id) 
+        });
+        
+        if (!project) {
+            return res.status(404).json({
+                success: false,
+                message: 'Project not found'
+            });
+        }
+        
+        res.json({
+            success: true,
+            project: project
+        });
+    } catch (error) {
+        console.error('Error fetching project:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error fetching project'
+        });
+    } finally {
+        await client.close();
+    }
+});
+
+// POST create new project
+app.post("/api/projects", async (req, res) => {
+    const projectData = {
+        name: req.body.name || 'Untitled Project',
+        description: req.body.description || '',
+        components: req.body.components || [],
+        styles: req.body.styles || {},
+        createdAt: new Date(),
+        updatedAt: new Date()
+    };
+    
+    try {
+        await client.connect();
+        const db = client.db("app-builder-db");
+        const result = await db.collection('projects').insertOne(projectData);
+        
+        res.status(201).json({
+            success: true,
+            message: 'Project created successfully',
+            projectId: result.insertedId,
+            project: { ...projectData, _id: result.insertedId }
+        });
+    } catch (error) {
+        console.error('Error creating project:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error creating project'
+        });
+    } finally {
+        await client.close();
+    }
+});
+
+// PUT update existing project
+app.put("/api/projects/:id", async (req, res) => {
+    const updateData = {
+        name: req.body.name,
+        description: req.body.description,
+        components: req.body.components,
+        styles: req.body.styles,
+        updatedAt: new Date()
+    };
     
-    client.close();
-    res.send(data);
+    try {
+        await client.connect();
+        const db = client.db("app-builder-db");
+        const result = await db.collection('projects').updateOne(
+            { _id: new ObjectId(req.params.id) },
+            { $set: updateData }
+        );
+        
+        if (result.matchedCount === 0) {
+            return res.status(404).json({
+                success: false,
+                message: 'Project not found'
+            });
+        }
+        
+        res.json({
+            success: true,
+            message: 'Project updated successfully'
+        });
+    } catch (error) {
+        console.error('Error updating project:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error updating project'
+        });
+    } finally {
+        await client.close();
+    }
 });
 
-//POST new user
-app.post("/addUser", async (req, res) => {
-    const userObj = req.body;
-    console.log(req.body);
-    await client.connect(URL);
-    console.log('Connected successfully to server');
-
-    const db = client.db("apnacollege-db");
-    const data = await db.collection('users').insertOne(userObj);
-    console.log(data);
-    console.log("data inserted in DB");
-    client.close();
+// DELETE project
+app.delete("/api/projects/:id", async (req, res) => {
+    try {
+        await client.connect();
+        const db = client.db("app-builder-db");
+        const result = await db.collection('projects').deleteOne({ 
+            _id: new ObjectId(req.params.id) 
+        });
+        
+        if (result.deletedCount === 0) {
+            return res.status(404).json({
+                success: false,
+                message: 'Project not found'
+            });
+        }
+        
+        res.json({
+            success: true,
+            message: 'Project deleted successfully'
+        });
+    } catch (error) {
+        console.error('Error deleting project:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error deleting project'
+        });
+    } finally {
+        await client.close();
+    }
 });
 
+// POST generate code from project
+app.post("/api/generate-code/:id", async (req, res) => {
+    try {
+        await client.connect();
+        const db = client.db("app-builder-db");
+        const project = await db.collection('projects').findOne({ 
+            _id: new ObjectId(req.params.id) 
+        });
+        
+        if (!project) {
+            return res.status(404).json({
+                success: false,
+                message: 'Project not found'
+            });
+        }
+        
+        // Generate HTML, CSS, and JS code
+        const generatedCode = generateCode(project);
+        
+        res.json({
+            success: true,
+            code: generatedCode
+        });
+    } catch (error) {
+        console.error('Error generating code:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error generating code'
+        });
+    } finally {
+        await client.close();
+    }
+});
+
+// Code generation helper function
+function generateCode(project) {
+    let html = '<!DOCTYPE html>\n<html lang="en">\n<head>\n';
+    html += '    <meta charset="UTF-8">\n';
+    html += '    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n';
+    html += `    <title>${project.name}</title>\n`;
+    html += '    <style>\n';
+    
+    // Generate CSS
+    let css = '        * { margin: 0; padding: 0; box-sizing: border-box; }\n';
+    css += '        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }\n';
+    
+    // Add component styles
+    if (project.components && project.components.length > 0) {
+        project.components.forEach((component, index) => {
+            css += `        #component-${index} {\n`;
+            if (component.styles) {
+                Object.entries(component.styles).forEach(([key, value]) => {
+                    const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+                    css += `            ${cssKey}: ${value};\n`;
+                });
+            }
+            css += '        }\n';
+        });
+    }
+    
+    html += css;
+    html += '    </style>\n';
+    html += '</head>\n<body>\n';
+    
+    // Generate HTML body
+    if (project.components && project.components.length > 0) {
+        project.components.forEach((component, index) => {
+            html += generateComponentHTML(component, index);
+        });
+    }
+    
+    html += '</body>\n</html>';
+    
+    return {
+        html: html,
+        css: css,
+        js: ''
+    };
+}
+
+function generateComponentHTML(component, index) {
+    let html = '';
+    const id = `component-${index}`;
+    
+    switch (component.type) {
+        case 'heading':
+            html += `    <h${component.level || 1} id="${id}">${component.text || 'Heading'}</h${component.level || 1}>\n`;
+            break;
+        case 'text':
+            html += `    <p id="${id}">${component.text || 'Text content'}</p>\n`;
+            break;
+        case 'button':
+            html += `    <button id="${id}">${component.text || 'Button'}</button>\n`;
+            break;
+        case 'input':
+            html += `    <input type="${component.inputType || 'text'}" id="${id}" placeholder="${component.placeholder || ''}">\n`;
+            break;
+        case 'image':
+            html += `    <img id="${id}" src="${component.src || 'https://via.placeholder.com/300'}" alt="${component.alt || 'Image'}">\n`;
+            break;
+        case 'container':
+            html += `    <div id="${id}">\n`;
+            if (component.children && component.children.length > 0) {
+                component.children.forEach((child, childIndex) => {
+                    html += generateComponentHTML(child, `${index}-${childIndex}`);
+                });
+            }
+            html += `    </div>\n`;
+            break;
+        default:
+            html += `    <div id="${id}">${component.text || ''}</div>\n`;
+    }
+    
+    return html;
+}
 
 app.listen(PORT, () => {
-    console.log(`server running on port ${PORT}`);
-});
\ No newline at end of file
+    console.log(`🚀 App Builder Server running on port ${PORT}`);
+    console.log(`📱 Visit http://localhost:${PORT} to start building apps`);
+});
diff --git a/videos/89dc35be959b4fc7c4939002824202e4.webm b/videos/89dc35be959b4fc7c4939002824202e4.webm
new file mode 100644
index 0000000..c166f0e
Binary files /dev/null and b/videos/89dc35be959b4fc7c4939002824202e4.webm differ
