diff --git a/backend/controllers/data.controller.js b/backend/controllers/data.controller.js
index 4a5c5df73..50ee2ec47 100644
--- a/backend/controllers/data.controller.js
+++ b/backend/controllers/data.controller.js
@@ -3,6 +3,7 @@ const mongoose = require('mongoose');
 const Project = require("../models/Project");
 const { getConnection } = require("../utils/connection.manager");
 const { getCompiledModel } = require("../utils/injectModel");
+const QueryEngine = require("../utils/queryEngine");
 
 // Validate MongoDB ObjectId
 const isValidId = (id) => mongoose.Types.ObjectId.isValid(id);
@@ -82,7 +83,12 @@ module.exports.getAllData = async (req, res) => {
         const connection = await getConnection(project._id);
         const Model = getCompiledModel(connection, collectionConfig, project._id, project.resources.db.isExternal);
 
-        const data = await Model.find({}).limit(100).lean();
+        const features = new QueryEngine(Model.find(), req.query)
+            .filter()
+            .sort()
+            .paginate();
+
+        const data = await features.query.lean();
         console.timeEnd("getall")
         res.json(data);
     } catch (err) {
diff --git a/backend/controllers/project.controller.js b/backend/controllers/project.controller.js
index 759b9077c..39a825c6e 100644
--- a/backend/controllers/project.controller.js
+++ b/backend/controllers/project.controller.js
@@ -10,6 +10,7 @@ const { encrypt } = require('../utils/encryption');
 const { URL } = require('url');
 const { getConnection } = require("../utils/connection.manager");
 const { getCompiledModel } = require("../utils/injectModel")
+const QueryEngine = require("../utils/queryEngine");
 const { storageRegistry } = require("../utils/registry");
 const { deleteProjectByApiKeyCache, setProjectById, getProjectById, deleteProjectById } = require("../services/redisCaching");
 const { getPublicIp } = require("../utils/network");
@@ -332,7 +333,12 @@ module.exports.getData = async (req, res) => {
 
         // const collectionsList = await mongoose.connection.db.listCollections({ name: finalCollectionName }).toArray();
 
-        const data = await model.find({}).limit(50);
+        const features = new QueryEngine(model.find(), req.query)
+            .filter()
+            .sort()
+            .paginate();
+
+        const data = await features.query.lean();
 
         //        let data = [];
         // if (collectionsList.length > 0) {
diff --git a/backend/utils/queryEngine.js b/backend/utils/queryEngine.js
new file mode 100644
index 000000000..6a65d94bd
--- /dev/null
+++ b/backend/utils/queryEngine.js
@@ -0,0 +1,65 @@
+class QueryEngine {
+    constructor(query, queryString) {
+        this.query = query;
+        this.queryString = queryString;
+    }
+
+    filter() {
+        const queryObj = { ...this.queryString };
+        const excludedFields = ['page', 'sort', 'limit', 'fields'];
+        excludedFields.forEach(el => delete queryObj[el]);
+
+        const mongoQuery = {};
+        for (const key in queryObj) {
+            if (key.endsWith('_gt')) {
+                const field = key.replace(/_gt$/, '');
+                mongoQuery[field] = { ...mongoQuery[field], $gt: queryObj[key] };
+            } else if (key.endsWith('_gte')) {
+                const field = key.replace(/_gte$/, '');
+                mongoQuery[field] = { ...mongoQuery[field], $gte: queryObj[key] };
+            } else if (key.endsWith('_lt')) {
+                const field = key.replace(/_lt$/, '');
+                mongoQuery[field] = { ...mongoQuery[field], $lt: queryObj[key] };
+            } else if (key.endsWith('_lte')) {
+                const field = key.replace(/_lte$/, '');
+                mongoQuery[field] = { ...mongoQuery[field], $lte: queryObj[key] };
+            } else {
+                mongoQuery[key] = queryObj[key];
+            }
+        }
+        
+        this.query = this.query.find(mongoQuery);
+        
+        return this;
+    }
+
+    sort() {
+        if (this.queryString.sort) {
+            const sortBy = this.queryString.sort.split(',').map(item => {
+                const [field, order] = item.split(':');
+                if (order && (order === '-1' || order.toLowerCase() === 'desc')) {
+                    return `-${field}`;
+                }
+                return field;
+            }).join(' ');
+            
+            this.query = this.query.sort(sortBy);
+        } else {
+            this.query = this.query.sort('-createdAt');
+        }
+        
+        return this;
+    }
+
+    paginate() {
+        const page = parseInt(this.queryString.page, 10) || 1;
+        const limit = parseInt(this.queryString.limit, 10) || 100;
+        const skip = (page - 1) * limit;
+
+        this.query = this.query.skip(skip).limit(limit);
+        
+        return this;
+    }
+}
+
+module.exports = QueryEngine;
diff --git a/diff_output.txt b/diff_output.txt
deleted file mode 100644
index 7f832bb06..000000000
--- a/diff_output.txt
+++ /dev/null
@@ -1,261 +0,0 @@
-diff --git a/backend/app.js b/backend/app.js
-index 25410ca6..d0a80b08 100644
---- a/backend/app.js
-+++ b/backend/app.js
-@@ -38,18 +38,24 @@ if (process.env.NODE_ENV === 'development') {
- 
- const adminCorsOptions = {
-     origin: function (origin, callback) {
--        console.time("cors for admin chk")
--        // Allow requests with no origin (like mobile apps or curl)
--        if (!origin || adminWhitelist.indexOf(origin) !== -1) {
-+        const start = process.hrtime.bigint();
-+
-+        const allowed = !origin || adminWhitelist.includes(origin);
-+
-+        const end = process.hrtime.bigint();
-+        console.log("Pure CORS check time:",
-+            Number(end - start) / 1e6, "ms");
-+
-+        if (allowed) {
-             callback(null, true);
-         } else {
-             callback(new Error('Not allowed by CORS for Admin access'));
-         }
--        console.timeEnd("cors for admin chk")
-     },
-     credentials: true
- };
- 
-+
- if (process.env.NODE_ENV !== 'test') {
-     GC.garbageCollect();
-     GC.storageGarbageCollect();
-diff --git a/backend/controllers/data.controller.js b/backend/controllers/data.controller.js
-index f64f52ed..4a5c5df7 100644
---- a/backend/controllers/data.controller.js
-+++ b/backend/controllers/data.controller.js
-@@ -10,6 +10,7 @@ const isValidId = (id) => mongoose.Types.ObjectId.isValid(id);
- // INSERT DATA
- module.exports.insertData = async (req, res) => {
-     try {
-+        console.time("insert data")
-         const { collectionName } = req.params;
-         const project = req.project;
- 
-@@ -61,6 +62,7 @@ module.exports.insertData = async (req, res) => {
-             );
-         }
- 
-+        console.timeEnd("insert data")
-         res.status(201).json(result);
-     } catch (err) {
-         res.status(500).json({ error: err.message });
-diff --git a/backend/controllers/project.controller.js b/backend/controllers/project.controller.js
-index d447725c..759b9077 100644
---- a/backend/controllers/project.controller.js
-+++ b/backend/controllers/project.controller.js
-@@ -262,6 +262,8 @@ module.exports.createCollection = async (req, res) => {
- 
-         await deleteProjectById(projectId);
-         await setProjectById(projectId, project);
-+        await deleteProjectByApiKeyCache(project.apiKey);
-+        await deleteProjectByApiKeyCache(project.apiKey);
-         // Safe Response
-         const projectObj = project.toObject();
-         delete projectObj.apiKey;
-@@ -345,6 +347,7 @@ module.exports.getData = async (req, res) => {
- 
- module.exports.insertData = async (req, res) => {
-     try {
-+        console.time("insert data")
-         const { projectId, collectionName } = req.params;
-         const project = await Project.findOne({ _id: projectId, owner: req.user._id });
-         if (!project) return res.status(404).json({ error: "Project not found." });
-@@ -377,6 +380,7 @@ module.exports.insertData = async (req, res) => {
-             project.databaseUsed = (project.databaseUsed || 0) + docSize;
-         }
-         await project.save();
-+        console.timeEnd("insert data")
- 
-         res.json(result);
-     } catch (err) {
-diff --git a/backend/middleware/verifyApiKey.js b/backend/middleware/verifyApiKey.js
-index 804dd9ff..bdee2ce5 100644
---- a/backend/middleware/verifyApiKey.js
-+++ b/backend/middleware/verifyApiKey.js
-@@ -7,7 +7,6 @@ const {
- 
- module.exports = async (req, res, next) => {
-     try {
--        console.time("api chk middleware")
-         const apiKey = req.header('x-api-key');
-         if (!apiKey) {
-             return res.status(401).json({ error: 'API key not found' });
-@@ -45,21 +44,26 @@ module.exports = async (req, res, next) => {
-             await setProjectByApiKeyCache(hashedApi, project);
-         }
- 
-+        console.time("checking if owner is verified")
-         if (!project.owner.isVerified) {
-             return res.status(401).json({
-                 error: 'Owner not verified',
-                 fix: 'Verify your account on https://urbackend.bitbros.in/dashboard'
-             });
-         }
-+        console.timeEnd("checking if owner is verified")
- 
-         // Ensure defaults are present (crucial for lean objects or cached POJOs)
-+        console.time("setting defaults")
-         if (!project.resources) project.resources = {};
-         if (!project.resources.db) project.resources.db = { isExternal: false };
-         if (!project.resources.storage) project.resources.storage = { isExternal: false };
-+        console.timeEnd("setting defaults")
- 
-+        console.time("setting project and hashed api key")
-         req.project = project;
-         req.hashedApiKey = hashedApi;
--        console.timeEnd("api chk middleware")
-+        console.timeEnd("setting project and hashed api key")
-         next();
-     } catch (err) {
-         res.status(500).json({ error: err.message });
-diff --git a/backend/services/redisCaching.js b/backend/services/redisCaching.js
-index 437f1aa1..7d378cae 100644
---- a/backend/services/redisCaching.js
-+++ b/backend/services/redisCaching.js
-@@ -2,14 +2,21 @@ const redis = require("../config/redis");
- 
- async function setProjectByApiKeyCache(api, project) {
-     if (redis.status !== "ready") return;
-+
-     try {
-+        console.time("cache stringify");
-         const data = JSON.stringify(project);
-+        console.timeEnd("cache stringify");
-+
-+        console.time("redis set");
-         await redis.set(
-             `project:apikey:${api}`,
-             data,
-             'EX',
-             60 * 60 * 2
-         );
-+        console.timeEnd("redis set");
-+
-     } catch (err) {
-         console.log(err);
-     }
-@@ -17,12 +24,20 @@ async function setProjectByApiKeyCache(api, project) {
- 
- async function getProjectByApiKeyCache(api) {
-     if (redis.status !== "ready") return null;
-+
-     try {
-+        console.time("redis get");
-         const data = await redis.get(`project:apikey:${api}`);
-+        console.timeEnd("redis get");
-+
-         if (!data) return null;
- 
--        const parsedData = JSON.parse(data)
-+        console.time("cache parse");
-+        const parsedData = JSON.parse(data);
-+        console.timeEnd("cache parse");
-+
-         return parsedData;
-+
-     } catch (err) {
-         console.log(err);
-         return null;
-@@ -38,37 +53,50 @@ async function deleteProjectByApiKeyCache(api) {
-     }
- }
- 
--
- async function setProjectById(id, project) {
-     if (redis.status !== "ready") return;
-+
-     try {
-+        console.time("cache stringify by id");
-         const data = JSON.stringify(project);
-+        console.timeEnd("cache stringify by id");
-+
-+        console.time("redis set by id");
-         await redis.set(
-             `project:id:${id}`,
-             data,
-             'EX',
-             60 * 60 * 2
-         );
-+        console.timeEnd("redis set by id");
-+
-     } catch (err) {
-         console.log(err);
-     }
- }
- 
--
- async function getProjectById(id) {
-     if (redis.status !== "ready") return null;
-+
-     try {
-+        console.time("redis get by id");
-         const data = await redis.get(`project:id:${id}`);
-+        console.timeEnd("redis get by id");
-+
-         if (!data) return null;
--        const parsedData = JSON.parse(data)
-+
-+        console.time("cache parse by id");
-+        const parsedData = JSON.parse(data);
-+        console.timeEnd("cache parse by id");
-+
-         return parsedData;
-+
-     } catch (err) {
-         console.log(err);
-         return null;
-     }
- }
- 
--
- async function deleteProjectById(id) {
-     if (redis.status !== "ready") return;
-     try {
-@@ -78,7 +106,6 @@ async function deleteProjectById(id) {
-     }
- }
- 
--
- module.exports = {
-     setProjectByApiKeyCache,
-     getProjectByApiKeyCache,
-@@ -86,4 +113,4 @@ module.exports = {
-     setProjectById,
-     getProjectById,
-     deleteProjectById
--};
-+};
-\ No newline at end of file
-diff --git a/backend/utils/api.js b/backend/utils/api.js
-index 65fdd0ca..3b700c31 100644
---- a/backend/utils/api.js
-+++ b/backend/utils/api.js
-@@ -15,11 +15,10 @@ function generateApiKey() {
- 
- //api hashing
- function hashApiKey(apikey) {
--    // scrypt hashing: fast but brute focre resistant
--    const salt = process.env.API_KEY_SALT;
--
--    // derived key of 64 bytes
--    return crypto.scryptSync(apikey, salt, 64).toString('hex');
-+    return crypto
-+        .createHash("sha256")
-+        .update(apikey)
-+        .digest("hex");
- }
- 
- module.exports = { generateApiKey, hashApiKey }
-\ No newline at end of file
diff --git a/frontend/src/components/CollectionTable.jsx b/frontend/src/components/CollectionTable.jsx
index 4fe0dc709..7790a2d1f 100644
--- a/frontend/src/components/CollectionTable.jsx
+++ b/frontend/src/components/CollectionTable.jsx
@@ -131,7 +131,7 @@ export default function CollectionTable({ data, activeCollection, onDelete, onVi
             {
                 id: "actions",
                 header: "Actions",
-                size: 80,
+                size: 120,
                 enableResizing: false,
                 enableHiding: false,
                 cell: (info) => (
diff --git a/frontend/src/components/DatabaseSidebar.jsx b/frontend/src/components/DatabaseSidebar.jsx
index 716b5c5c7..24352c45d 100644
--- a/frontend/src/components/DatabaseSidebar.jsx
+++ b/frontend/src/components/DatabaseSidebar.jsx
@@ -96,8 +96,8 @@ export default function DatabaseSidebar({
                 /* Sidebar Styles - Scoped */
                 .db-sidebar {
                     width: 280px;
-                    background: var(--color-bg-sidebar);
-                    border-right: 1px solid var(--color-border);
+                    background: transparent; 
+                    border-right: none;
                     display: flex;
                     flex-direction: column;
                     z-index: 100;
diff --git a/frontend/src/components/RowDetailDrawer.jsx b/frontend/src/components/RowDetailDrawer.jsx
index ad79f04be..e14e90f3a 100644
--- a/frontend/src/components/RowDetailDrawer.jsx
+++ b/frontend/src/components/RowDetailDrawer.jsx
@@ -1,164 +1,269 @@
-import React from "react";
-import { X, Calendar, Type, Hash, ToggleLeft, FileText, Link as LinkIcon, AlertCircle } from "lucide-react";
+import React, { useEffect } from "react";
+import { X, FileText, Edit2 } from "lucide-react";
 
-export default function RowDetailDrawer({ isOpen, onClose, record, fields }) {
-    if (!isOpen || !record) return null;
-
-    const getIconForType = (type) => {
-        switch (type) {
-            case "String": return <Type size={14} />;
-            case "Number": return <Hash size={14} />;
-            case "Boolean": return <ToggleLeft size={14} />;
-            case "Date": return <Calendar size={14} />;
-            case "Object": return <FileText size={14} />;
-            case "Array": return <LinkIcon size={14} />;
-            default: return <AlertCircle size={14} />;
-        }
+export default function RowDetailDrawer({ isOpen, onClose, record, fields = [], onEdit }) {
+  // Handle outside click to close
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape" && isOpen) {
+        onClose();
+      }
     };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose]);
 
-    const renderValue = (value) => {
-        if (value === null || value === undefined) return <span className="text-muted italic">Empty</span>;
+  if (!isOpen || !record) return null;
 
-        if (typeof value === "boolean") {
-            return (
-                <span className={`status-badge ${value ? "success" : "danger"}`}>
-                    {String(value)}
-                </span>
-            );
-        }
+  // Determine grid columns based on field count
+  const isWideForm = fields.length > 8;
 
-        if (typeof value === "object") {
-            return <pre className="json-preview">{JSON.stringify(value, null, 2)}</pre>;
-        }
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="drawer-backdrop"
+        onClick={onClose}
+        style={{
+          position: "fixed",
+          inset: 0,
+          background: "rgba(0,0,0,0.5)",
+          backdropFilter: "blur(4px)",
+          zIndex: 999,
+          animation: "fadeIn 0.2s ease-out"
+        }}
+      />
 
-        return String(value);
-    };
+      {/* Drawer Panel */}
+      <div
+        className="drawer-panel glass-panel"
+        style={{
+          position: "fixed",
+          top: 0,
+          right: 0,
+          bottom: 0,
+          width: isWideForm ? "600px" : "450px",
+          maxWidth: "100%",
+          zIndex: 1000,
+          display: "flex",
+          flexDirection: "column",
+          transform: isOpen ? "translateX(0)" : "translateX(100%)",
+          animation: "slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1)",
+          borderLeft: "1px solid var(--color-border)",
+          background: "var(--color-bg-card)",
+          boxShadow: "-10px 0 30px rgba(0,0,0,0.3)"
+        }}
+      >
+        {/* Header */}
+        <div className="drawer-header" style={{
+          padding: "1.5rem",
+          borderBottom: "1px solid var(--color-border)",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        }}>
+          <div>
+            <h2 style={{ fontSize: "1.25rem", fontWeight: 600, margin: 0, display: "flex", alignItems: "center", gap: "8px" }}>
+                <FileText size={20} className="text-primary" />
+                Record Details
+            </h2>
+            <p style={{ fontSize: "0.85rem", color: "var(--color-text-muted)", margin: "4px 0 0 0", fontFamily: "monospace" }}>
+              ID: {record._id}
+            </p>
+          </div>
+          <button
+            onClick={onClose}
+            className="btn-icon"
+            style={{ color: "var(--color-text-muted)" }}
+          >
+            <X size={20} />
+          </button>
+        </div>
 
-    return (
-        <>
-            <div
-                className={`drawer-backdrop ${isOpen ? "open" : ""}`}
-                onClick={onClose}
-            />
-            <div className={`drawer right ${isOpen ? "open" : ""}`}>
-                <div className="drawer-header glass-panel">
-                    <div className="flex items-center gap-3">
-                        <div className="p-2 bg-white/5 rounded-md text-primary">
-                            <FileText size={20} />
-                        </div>
-                        <div>
-                            <h2 className="text-lg font-semibold leading-tight">Record Details</h2>
-                            <p className="text-xs text-muted font-mono mt-1">ID: {record._id}</p>
-                        </div>
-                    </div>
-                    <button onClick={onClose} className="btn-icon">
-                        <X size={20} />
-                    </button>
-                </div>
+        {/* Body */}
+        <div className="drawer-body custom-scrollbar" style={{
+          flex: 1,
+          overflowY: "auto",
+          padding: "1.5rem"
+        }}>
+          <div style={{
+            display: "grid",
+            gridTemplateColumns: isWideForm ? "repeat(2, 1fr)" : "1fr",
+            gap: "1.25rem",
+          }}>
+            {fields.map((field) => (
+              <div
+                key={field.key}
+                className="form-group"
+                style={{
+                  gridColumn: (isWideForm && (field.type === "String" && field.key.length > 20)) ? "span 2" : "auto"
+                }}
+              >
+                <label className="form-label" style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  marginBottom: "0.5rem",
+                  fontSize: "0.9rem",
+                  color: "var(--color-text-secondary)"
+                }}>
+                  <span style={{ display: "flex", alignItems: "center", gap: "6px" }}>
+                    {field.key}
+                  </span>
+                  <span className="field-type-hint" style={{
+                    fontSize: "0.7rem",
+                    color: "var(--color-text-muted)",
+                    background: "rgba(255,255,255,0.05)",
+                    padding: "2px 6px",
+                    borderRadius: "4px"
+                  }}>{field.type}</span>
+                </label>
 
-                <div className="drawer-content custom-scrollbar">
-                    <div className="record-grid">
-                        {fields.map((field) => (
-                            <div key={field.key} className="record-field-item">
-                                <div className="field-label">
-                                    <div className="flex items-center gap-2 text-muted">
-                                        {getIconForType(field.type)}
-                                        {field.key}
-                                    </div>
-                                    <span className="type-badge">{field.type}</span>
-                                </div>
-                                <div className="field-value">
-                                    {renderValue(record[field.key])}
-                                </div>
-                            </div>
-                        ))}
-                    </div>
+                {/* Read Only Input Field matching AddRecordDrawer */}
+                {field.type === "Boolean" ? (
+                  <select
+                    className="form-select"
+                    disabled
+                    value={String(record[field.key] ?? "")}
+                    style={{ cursor: "default", appearance: "none" /* removes dropdown arrow */}}
+                  >
+                    <option value="">Empty</option>
+                    <option value="true">True</option>
+                    <option value="false">False</option>
+                  </select>
+                ) : field.type === "Date" ? (
+                  <input
+                    type="text"
+                    className="form-input"
+                    readOnly
+                    value={record[field.key] ? new Date(record[field.key]).toLocaleString() : "Empty"}
+                    style={{ cursor: "default" }}
+                  />
+                ) : field.type === "Object" || field.type === "Array" || typeof record[field.key] === "object" ? (
+                   <textarea
+                     className="form-input custom-scrollbar"
+                     readOnly
+                     rows={4}
+                     value={JSON.stringify(record[field.key] ?? {}, null, 2)}
+                     style={{ cursor: "default", resize: "vertical", fontFamily: "monospace", fontSize: "0.85rem", color: "#3ECF8E" }}
+                   />
+                ) : (
+                  <input
+                    type="text"
+                    className="form-input"
+                    readOnly
+                    value={record[field.key] !== null && record[field.key] !== undefined ? String(record[field.key]) : "Empty"}
+                    style={{ cursor: "default" }}
+                  />
+                )}
+              </div>
+            ))}
+          </div>
 
-                    <div className="system-fields-section">
-                        <h4 className="section-label">SYSTEM METADATA</h4>
-                        <div className="record-field-item">
-                            <div className="field-label">_id</div>
-                            <div className="field-value font-mono">{record._id}</div>
-                        </div>
-                        {record.createdAt && (
-                            <div className="record-field-item">
-                                <div className="field-label">createdAt</div>
-                                <div className="field-value">{new Date(record.createdAt).toLocaleString()}</div>
-                            </div>
-                        )}
-                        {record.updatedAt && (
-                            <div className="record-field-item">
-                                <div className="field-label">updatedAt</div>
-                                <div className="field-value">{new Date(record.updatedAt).toLocaleString()}</div>
-                            </div>
-                        )}
-                    </div>
-                </div>
-            </div>
+          {/* System Metadata Section */}
+          <div style={{
+              marginTop: "2rem",
+              paddingTop: "1.5rem",
+              borderTop: "1px solid var(--color-border)"
+          }}>
+             <h4 style={{
+                 fontSize: "0.75rem",
+                 fontWeight: 700,
+                 color: "#666",
+                 marginBottom: "1rem",
+                 letterSpacing: "0.05em",
+                 textTransform: "uppercase"
+             }}>System Metadata</h4>
 
-            <style>{`
-                .record-grid {
-                    display: flex;
-                    flex-direction: column;
-                    gap: 1.5rem;
-                    padding: 1.5rem;
-                }
-                
-                .record-field-item {
-                    background: var(--color-bg-card);
-                    border: 1px solid var(--color-border);
-                    border-radius: 8px;
-                    padding: 1rem;
-                    transition: all 0.2s;
-                }
-                
-                .record-field-item:hover {
-                    border-color: var(--color-primary);
-                }
+             <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+                 <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "0.85rem" }}>
+                     <span style={{ color: "var(--color-text-muted)" }}>_id</span>
+                     <span style={{ fontFamily: "monospace", color: "var(--color-text-main)" }}>{record._id}</span>
+                 </div>
+                 {record.createdAt && (
+                     <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "0.85rem" }}>
+                         <span style={{ color: "var(--color-text-muted)" }}>createdAt</span>
+                         <span style={{ color: "var(--color-text-main)" }}>{new Date(record.createdAt).toLocaleString()}</span>
+                     </div>
+                 )}
+                 {record.updatedAt && (
+                     <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "0.85rem" }}>
+                         <span style={{ color: "var(--color-text-muted)" }}>updatedAt</span>
+                         <span style={{ color: "var(--color-text-main)" }}>{new Date(record.updatedAt).toLocaleString()}</span>
+                     </div>
+                 )}
+             </div>
+          </div>
+        </div>
+        
+        {/* Footer */}
+        <div className="drawer-footer" style={{
+          padding: "1.25rem 1.5rem",
+          borderTop: "1px solid var(--color-border)",
+          display: "flex",
+          justifyContent: "flex-end",
+          gap: "1rem",
+          background: "rgba(0,0,0,0.2)"
+        }}>
+          {onEdit && (
+            <button
+              onClick={() => {
+                onEdit(record);
+                onClose();
+              }}
+              className="btn btn-secondary"
+              style={{ display: "flex", alignItems: "center", gap: "6px" }}
+            >
+              <Edit2 size={16} />
+              Edit Document
+            </button>
+          )}
+          <button
+            onClick={onClose}
+            className="btn btn-primary"
+            style={{ minWidth: "100px" }}
+          >
+            Close
+          </button>
+        </div>
+      </div>
 
-                .field-label {
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    margin-bottom: 0.75rem;
-                    font-size: 0.85rem;
-                    font-weight: 500;
-                }
-                
-                .field-value {
-                    font-size: 0.95rem;
-                    word-break: break-word;
-                    line-height: 1.6;
-                    color: var(--color-text-main);
-                }
-                
-                .system-fields-section {
-                    margin-top: 2rem;
-                    padding: 1.5rem;
-                    border-top: 1px solid var(--color-border);
-                    background: rgba(0,0,0,0.2);
-                }
-                
-                .section-label {
-                    font-size: 0.7rem;
-                    font-weight: 700;
-                    color: #555;
-                    margin-bottom: 1rem;
-                    letter-spacing: 0.05em;
-                }
-                
-                .json-preview {
-                    background: #111;
-                    padding: 0.5rem;
-                    border-radius: 4px;
-                    font-size: 0.8rem;
-                    overflow: auto;
-                    max-height: 200px;
-                }
+      <style>{`
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        @keyframes slideInRight {
+            from { transform: translateX(100%); }
+            to { transform: translateX(0); }
+        }
+
+        .text-primary { color: var(--color-primary); }
 
-                .text-primary { color: var(--color-primary); }
-                .text-muted { color: var(--color-text-muted); }
-            `}</style>
-        </>
-    );
+        .form-input {
+            width: 100%;
+            background: rgba(0, 0, 0, 0.2);
+            border: 1px solid var(--color-border);
+            padding: 10px 12px;
+            border-radius: 6px;
+            color: var(--color-text-main);
+            font-size: 0.95rem;
+            transition: all 0.2s;
+        }
+
+        .form-select {
+            width: 100%;
+            background: rgba(0, 0, 0, 0.2);
+            border: 1px solid var(--color-border);
+            padding: 10px 12px;
+            border-radius: 6px;
+            color: var(--color-text-main);
+            appearance: none;
+            background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23aaaaaa%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
+            background-repeat: no-repeat;
+            background-position: right 12px top 50%;
+            background-size: 10px auto;
+        }
+      `}</style>
+    </>
+  );
 }
diff --git a/frontend/src/pages/Database.jsx b/frontend/src/pages/Database.jsx
index be4f438c8..d9455afa0 100644
--- a/frontend/src/pages/Database.jsx
+++ b/frontend/src/pages/Database.jsx
@@ -18,6 +18,11 @@ import {
   List as ListIcon,
   Menu,
   FileText,
+  Filter,
+  ArrowUpDown,
+  ChevronLeft,
+  ChevronRight,
+  Trash2
 } from "lucide-react";
 
 import { API_URL } from "../config";
@@ -46,6 +51,15 @@ export default function Database() {
   const [selectedRecord, setSelectedRecord] = useState(null); // For detail drawer
   const [editingRecord, setEditingRecord] = useState(null);
 
+  // --- QUERY ENGINE STATES ---
+  const [queryParams, setQueryParams] = useState({
+      page: 1,
+      limit: 50,
+      sort: '-createdAt',
+      filters: [] // Format: { field: '', operator: '', value: '' }
+  });
+  const [showFilterMenu, setShowFilterMenu] = useState(false);
+
   const fetchShowModal = (id) => {
     setShowModal(true);
     setSelectedId(id);
@@ -105,8 +119,25 @@ export default function Database() {
     if (!activeCollection) return;
     setLoadingData(true);
     try {
+      // Build query string from state
+      let queryStr = `?page=${queryParams.page}&limit=${queryParams.limit}`;
+      if (queryParams.sort) {
+        queryStr += `&sort=${queryParams.sort}`;
+      }
+      
+      // Append advanced filters
+      queryParams.filters.forEach(filter => {
+         if (filter.field && filter.operator && filter.value !== '') {
+            if (filter.operator === '=') {
+              queryStr += `&${filter.field}=${encodeURIComponent(filter.value)}`;
+            } else {
+              queryStr += `&${filter.field}${filter.operator}=${encodeURIComponent(filter.value)}`;
+            }
+         }
+      });
+
       const res = await axios.get(
-        `${API_URL}/api/projects/${projectId}/collections/${activeCollection.name}/data`,
+        `${API_URL}/api/projects/${projectId}/collections/${activeCollection.name}/data${queryStr}`,
         {
           headers: { Authorization: `Bearer ${token}` },
         }
@@ -118,7 +149,7 @@ export default function Database() {
     } finally {
       setLoadingData(false);
     }
-  }, [activeCollection, projectId, token]);
+  }, [activeCollection, projectId, token, queryParams]);
 
   // Fetch Data on Collection Change
   useEffect(() => {
@@ -204,7 +235,7 @@ export default function Database() {
   // --- SUB-COMPONENTS --- //
 
   const TableView = () => (
-    <div className="table-container-wrapper" style={{ height: "100%", overflow: "hidden" }}>
+    <div className="table-container-wrapper" style={{ height: "100%", overflow: "hidden", display: "flex", flexDirection: "column", minWidth: 0, minHeight: 0 }}>
       <CollectionTable
         data={data}
         activeCollection={activeCollection}
@@ -259,6 +290,7 @@ export default function Database() {
         onClose={() => setSelectedRecord(null)}
         record={selectedRecord}
         fields={activeCollection?.model || []}
+        onEdit={handleEditRow}
       />
 
       {showModal && (
@@ -338,6 +370,154 @@ export default function Database() {
                   </button>
                 </div>
 
+                <div style={{ position: 'relative' }}>
+                  <button
+                    className={`btn ${showFilterMenu ? 'btn-primary' : 'btn-secondary'} btn-icon-only filter-trigger`}
+                    onClick={() => setShowFilterMenu(!showFilterMenu)}
+                    title="Filter & Sort"
+                  >
+                    <Filter size={18} />
+                    {queryParams.filters.length > 0 && (
+                      <span className="filter-badge">{queryParams.filters.length}</span>
+                    )}
+                  </button>
+                  
+                  {showFilterMenu && (
+                    <>
+                      <div className="fixed-backdrop" style={{ position: 'fixed', inset: 0, zIndex: 10 }} onClick={() => setShowFilterMenu(false)} />
+                      <div className="filter-menu glass-panel" style={{ 
+                        position: 'absolute', right: 0, top: 'calc(100% + 10px)', width: '300px', 
+                        zIndex: 9000000000, padding: '1rem', display: 'flex', flexDirection: 'column', gap: '1rem',
+                        background: '#151515', border: '1px solid var(--color-border)', 
+                        boxShadow: '0 10px 30px rgba(0,0,0,0.7)', borderRadius: '8px'
+                      }}>
+                        
+                        {/* SORTING SECTION */}
+                        <div className="filter-section">
+                          <div className="section-title mb-2"><ArrowUpDown size={14} /> SORT BY</div>
+                          <div className="flex gap-2">
+                            <select 
+                              className="form-input" 
+                              value={queryParams.sort.replace('-', '')}
+                              onChange={(e) => {
+                                const isDesc = queryParams.sort.startsWith('-');
+                                setQueryParams(p => ({ ...p, sort: `${isDesc ? '-' : ''}${e.target.value}` }));
+                              }}
+                              style={{ flex: 1 }}
+                            >
+                              <option value="createdAt">Created At</option>
+                                {activeCollection?.model?.map(f => (
+                                  <option key={f.key} value={f.key}>{f.key}</option>
+                                ))}
+                            </select>
+                            <button 
+                              className="btn btn-secondary btn-icon-only"
+                              onClick={() => {
+                                const isDesc = queryParams.sort.startsWith('-');
+                                const field = queryParams.sort.replace('-', '');
+                                setQueryParams(p => ({ ...p, sort: isDesc ? field : `-${field}` }));
+                              }}
+                              title="Toggle direction"
+                            >
+                              {queryParams.sort.startsWith('-') ? '↓' : '↑'}
+                            </button>
+                          </div>
+                        </div>
+
+                        {/* FILTERING SECTION */}
+                        <div className="filter-section">
+                          <div className="section-title mb-2"><Filter size={14} /> FILTERS</div>
+                          
+                          {queryParams.filters.map((filter, idx) => (
+                            <div key={idx} className="active-filter-row flex gap-2 items-center mb-2">
+                              <select 
+                                className="form-input"
+                                value={filter.field}
+                                onChange={e => {
+                                  const newFilters = [...queryParams.filters];
+                                  newFilters[idx].field = e.target.value;
+                                  setQueryParams(p => ({ ...p, filters: newFilters }));
+                                }}
+                                style={{ width: '35%', padding: '4px' }}
+                              >
+                                <option value="" disabled>Field</option>
+                                {activeCollection?.model?.map(f => (
+                                  <option key={f.key} value={f.key}>{f.key}</option>
+                                ))}
+                              </select>
+                              
+                              <select 
+                                className="form-input"
+                                value={filter.operator}
+                                onChange={e => {
+                                  const newFilters = [...queryParams.filters];
+                                  newFilters[idx].operator = e.target.value;
+                                  setQueryParams(p => ({ ...p, filters: newFilters }));
+                                }}
+                                style={{ width: '30%', padding: '4px' }}
+                              >
+                                <option value="" disabled>Op</option>
+                                <option value="=">=</option>
+                                <option value="_gt">&gt;</option>
+                                <option value="_gte">&ge;</option>
+                                <option value="_lt">&lt;</option>
+                                <option value="_lte">&le;</option>
+                              </select>
+                              
+                              <input 
+                                type="text"
+                                className="form-input"
+                                placeholder="Value"
+                                value={filter.value}
+                                onChange={e => {
+                                  const newFilters = [...queryParams.filters];
+                                  newFilters[idx].value = e.target.value;
+                                  setQueryParams(p => ({ ...p, filters: newFilters }));
+                                }}
+                                style={{ width: '35%', padding: '4px' }}
+                              />
+                              
+                              <button 
+                                className="btn-icon danger-hover shrink-0"
+                                onClick={() => {
+                                  setQueryParams(p => ({ ...p, filters: p.filters.filter((_, i) => i !== idx) }));
+                                }}
+                              >
+                                <Trash2 size={14} />
+                              </button>
+                            </div>
+                          ))}
+                          
+                          <button 
+                            className="btn btn-secondary w-full"
+                            style={{ fontSize: '0.8rem', marginTop: '4px' }}
+                            onClick={() => {
+                              setQueryParams(p => ({ 
+                                ...p, 
+                                filters: [...p.filters, { field: '', operator: '', value: '' }] 
+                              }));
+                            }}
+                          >
+                            <Plus size={14} /> Add Filter
+                          </button>
+                        </div>
+                        
+                        {/* APPLY BUTTON */}
+                        <button 
+                          className="btn btn-primary w-full mt-2" 
+                          onClick={() => {
+                            setShowFilterMenu(false);
+                            // Set page back to 1 when applying new filters
+                            setQueryParams(p => ({ ...p, page: 1 }));
+                          }}
+                        >
+                          Apply Queries
+                        </button>
+                      </div>
+                    </>
+                  )}
+                </div>
+
                 <button
                   onClick={fetchData}
                   className="btn btn-secondary btn-icon-only"
@@ -387,6 +567,59 @@ export default function Database() {
                 <JsonView />
               )}
             </div>
+
+            {/* PAGINATION FOOTER */}
+            {activeCollection && data.length > 0 && (
+              <div className="pagination-footer glass-panel" style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                padding: '0.75rem 2rem',
+                borderTop: '1px solid var(--color-border)',
+                background: 'rgba(10, 10, 10, 0.4)',
+                backdropFilter: 'blur(10px)',
+                zIndex: 10
+              }}>
+                <div className="flex items-center gap-2">
+                  <span className="text-muted" style={{ fontSize: '0.85rem' }}>Rows per page:</span>
+                  <select 
+                    className="form-input" 
+                    value={queryParams.limit}
+                    onChange={(e) => {
+                      setQueryParams(p => ({ ...p, limit: Number(e.target.value), page: 1 }));
+                    }}
+                    style={{ padding: '4px 8px', fontSize: '0.85rem', width: 'auto' }}
+                  >
+                    <option value={10}>10</option>
+                    <option value={20}>20</option>
+                    <option value={50}>50</option>
+                    <option value={100}>100</option>
+                  </select>
+                </div>
+                
+                <div className="flex items-center gap-4">
+                  <span className="text-muted" style={{ fontSize: '0.85rem' }}>Page {queryParams.page}</span>
+                  <div className="flex gap-1">
+                    <button 
+                      className="btn btn-secondary btn-icon-only"
+                      onClick={() => setQueryParams(p => ({ ...p, page: Math.max(1, p.page - 1) }))}
+                      disabled={queryParams.page === 1}
+                      style={{ opacity: queryParams.page === 1 ? 0.5 : 1, cursor: queryParams.page === 1 ? 'not-allowed' : 'pointer' }}
+                    >
+                      <ChevronLeft size={16} />
+                    </button>
+                    <button 
+                      className="btn btn-secondary btn-icon-only"
+                      onClick={() => setQueryParams(p => ({ ...p, page: p.page + 1 }))}
+                      disabled={data.length < queryParams.limit}
+                      style={{ opacity: data.length < queryParams.limit ? 0.5 : 1, cursor: data.length < queryParams.limit ? 'not-allowed' : 'pointer' }}
+                    >
+                      <ChevronRight size={16} />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )}
           </>
         ) : (
           <div className="no-collection-state">
@@ -426,16 +659,16 @@ export default function Database() {
                 /* Component Specific Styles */
                 .db-layout {
                     display: flex;
-                    height: 100%; /* Fill the proper container */
+                    height: 100vh;
+                    width: 100vw;
                     overflow: hidden;
-                    background: var(--color-bg-main);
+                    background: #050505;
                     position: relative;
                 }
 
 
                 .sidebar-header-area {
                     padding: 1.5rem;
-                    border-bottom: 1px solid var(--color-border);
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
@@ -511,6 +744,11 @@ export default function Database() {
                     position: relative;
                     overflow: hidden;
                     min-width: 0; /* Critical for flex child scrolling */
+                    background: #0A0A0A;
+                    margin: 16px 16px 16px 0;
+                    border: 1px solid #1A1A1A;
+                    border-radius: 16px;
+                    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
                 }
 
                 .db-header {
@@ -519,7 +757,8 @@ export default function Database() {
                     justify-content: space-between;
                     align-items: center;
                     border-bottom: 1px solid var(--color-border);
-                    z-index: 10;
+                    z-index: 100;
+                    position: relative;
                     flex-shrink: 0; /* Prevent header from collapsing */
                 }
 
diff --git a/frontend/src/pages/LandingPage/index.jsx b/frontend/src/pages/LandingPage/index.jsx
index 23100d1fe..a8c84ce26 100644
--- a/frontend/src/pages/LandingPage/index.jsx
+++ b/frontend/src/pages/LandingPage/index.jsx
@@ -144,8 +144,10 @@ function LandingPage() {
             </nav>
 
             <div className="hero-section">
+                <div className="hero-glow"></div>
+
                 <div className="hero-pill">
-                    <Zap size={14} fill="currentColor" /> Public Alpha v0.1.0
+                    <Zap size={14} fill="currentColor" strokeWidth={1} /> Public Alpha v0.1.0
                 </div>
 
                 <h1 className="hero-heading">
@@ -157,11 +159,11 @@ function LandingPage() {
                     No boilerplate. No servers. Get Database, Auth, and Storage APIs in seconds.
                 </p>
 
-                <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', justifyContent: 'center' }}>
-                    <Link to="/signup" className="btn btn-primary" style={{ padding: '1rem 2.5rem', fontSize: '1.05rem', borderRadius: '8px' }}>
-                        Start Building <ArrowRight size={18} style={{ marginLeft: 6 }} />
+                <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', justifyContent: 'center', zIndex: 10, position: 'relative' }}>
+                    <Link to="/signup" className="btn-hero-primary">
+                        Start Building <ArrowRight size={18} strokeWidth={2} />
                     </Link>
-                    <Link to="/docs" className="btn btn-secondary" style={{ padding: '1rem 2.5rem', fontSize: '1.05rem', borderRadius: '8px', background: 'rgba(255,255,255,0.03)', border: '1px solid #333' }}>
+                    <Link to="/docs" className="btn-hero-secondary">
                         Documentation
                     </Link>
                 </div>
@@ -211,7 +213,7 @@ function LandingPage() {
                 </div>
             </div>
 
-            <div id="how-it-works" style={{ padding: '6rem 0', background: '#080808', borderTop: '1px solid #111' }}>
+            <div id="how-it-works" style={{ padding: '6rem 0', background: '#000', borderTop: '1px solid rgba(255, 255, 255, 0.08)' }}>
                 <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 1.5rem' }}>
                     <div style={{ textAlign: 'center', marginBottom: '5rem' }}>
                         <h2 className="section-title">Backend Architecture, Simplified.</h2>
@@ -247,7 +249,7 @@ function LandingPage() {
                 </div>
             </div>
 
-            <div id="features" style={{ padding: '8rem 0', background: '#050505' }}>
+            <div id="features" style={{ padding: '8rem 0', background: '#000', borderTop: '1px solid rgba(255, 255, 255, 0.08)' }}>
                 <div style={{ textAlign: 'center', marginBottom: '5rem' }}>
                     <h2 className="section-title">Complete Backend Suite</h2>
                     <p className="section-desc">Enterprise-grade tools packaged for individual developers.</p>
@@ -256,8 +258,8 @@ function LandingPage() {
                 <div className="bento-grid">
                     <div className="bento-item bento-span-8">
                         <div>
-                            <div className="bento-icon" style={{ background: 'rgba(62, 207, 142, 0.1)', color: '#3ECF8E' }}>
-                                <Database />
+                            <div className="bento-icon" style={{ background: 'rgba(62, 207, 142, 0.1)', color: '#3ECF8E', boxShadow: '0 0 20px rgba(62, 207, 142, 0.2)' }}>
+                                <Database strokeWidth={1.5} />
                             </div>
                             <h3 className="bento-title">Managed NoSQL Database</h3>
                             <p className="bento-desc">
@@ -273,8 +275,8 @@ function LandingPage() {
                     </div>
 
                     <div className="bento-item bento-span-4">
-                        <div className="bento-icon" style={{ background: 'rgba(255, 189, 46, 0.1)', color: '#FFBD2E' }}>
-                            <Shield />
+                        <div className="bento-icon" style={{ background: 'rgba(255, 189, 46, 0.1)', color: '#FFBD2E', boxShadow: '0 0 20px rgba(255, 189, 46, 0.2)' }}>
+                            <Shield strokeWidth={1.5} />
                         </div>
                         <h3 className="bento-title">Secure Auth</h3>
                         <p className="bento-desc">
@@ -287,8 +289,8 @@ function LandingPage() {
                     </div>
 
                     <div className="bento-item bento-span-4">
-                        <div className="bento-icon" style={{ background: 'rgba(64, 158, 255, 0.1)', color: '#409EFF' }}>
-                            <HardDrive />
+                        <div className="bento-icon" style={{ background: 'rgba(64, 158, 255, 0.1)', color: '#409EFF', boxShadow: '0 0 20px rgba(64, 158, 255, 0.2)' }}>
+                            <HardDrive strokeWidth={1.5} />
                         </div>
                         <h3 className="bento-title">Global Storage</h3>
                         <p className="bento-desc">
@@ -298,8 +300,8 @@ function LandingPage() {
 
                     <div className="bento-item bento-span-8">
                         <div>
-                            <div className="bento-icon" style={{ background: 'rgba(255, 95, 86, 0.1)', color: '#FF5F56' }}>
-                                <Cpu />
+                            <div className="bento-icon" style={{ background: 'rgba(255, 95, 86, 0.1)', color: '#FF5F56', boxShadow: '0 0 20px rgba(255, 95, 86, 0.2)' }}>
+                                <Cpu strokeWidth={1.5} />
                             </div>
                             <h3 className="bento-title">Serverless Architecture</h3>
                             <p className="bento-desc">
@@ -316,7 +318,7 @@ function LandingPage() {
                 </div>
             </div>
 
-            <div id="byod" style={{ padding: '8rem 0', background: '#0A0A0A', borderTop: '1px solid #111' }}>
+            <div id="byod" style={{ padding: '8rem 0', background: '#000', borderTop: '1px solid rgba(255, 255, 255, 0.08)' }}>
                 <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 1.5rem' }}>
                     <div style={{ textAlign: 'center', marginBottom: '5rem' }}>
                         <h2 className="section-title">Bring Your Own Infrastructure</h2>
@@ -324,41 +326,41 @@ function LandingPage() {
                     </div>
 
                     <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: '2rem' }}>
-                        <div className="card" style={{ background: '#111', border: '1px solid #222', padding: '3rem' }}>
+                        <div className="card" style={{ background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: '12px', padding: '3rem', boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.02)' }}>
                             <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem' }}>
-                                <div style={{ padding: '12px', background: 'rgba(62, 207, 142, 0.1)', borderRadius: '12px', color: '#3ECF8E' }}>
-                                    <Database size={32} />
+                                <div style={{ padding: '12px', background: 'rgba(62, 207, 142, 0.1)', borderRadius: '12px', color: '#3ECF8E', boxShadow: '0 0 20px rgba(62, 207, 142, 0.2)' }}>
+                                    <Database strokeWidth={1.5} size={32} />
                                 </div>
-                                <h3 style={{ fontSize: '1.5rem', fontWeight: 700 }}>BYO Database</h3>
+                                <h3 style={{ fontSize: '1.5rem', fontWeight: 600, color: '#fff' }}>BYO Database</h3>
                             </div>
-                            <p style={{ color: '#888', lineHeight: 1.6, marginBottom: '2rem' }}>
+                            <p style={{ color: '#a1a1aa', lineHeight: 1.6, marginBottom: '2rem' }}>
                                 Connect your self-hosted MongoDB or Atlas cluster. We provide the instant API layer, auth, and validation schema, while you keep full ownership of the data.
                             </p>
                             <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
-                                <span className="hero-pill" style={{ margin: 0, background: 'rgba(255,255,255,0.05)', border: '1px solid #333', color: '#ccc' }}>MongoDB Atlas</span>
-                                <span className="hero-pill" style={{ margin: 0, background: 'rgba(255,255,255,0.05)', border: '1px solid #333', color: '#ccc' }}>Self-Hosted</span>
+                                <span className="hero-pill" style={{ margin: 0, background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', color: '#a1a1aa' }}>MongoDB Atlas</span>
+                                <span className="hero-pill" style={{ margin: 0, background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', color: '#a1a1aa' }}>Self-Hosted</span>
                             </div>
                         </div>
 
-                        <div className="card" style={{ background: '#111', border: '1px solid #222', padding: '3rem' }}>
+                        <div className="card" style={{ background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: '12px', padding: '3rem', boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.02)' }}>
                             <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem' }}>
-                                <div style={{ padding: '12px', background: 'rgba(64, 158, 255, 0.1)', borderRadius: '12px', color: '#409EFF' }}>
-                                    <HardDrive size={32} />
+                                <div style={{ padding: '12px', background: 'rgba(64, 158, 255, 0.1)', borderRadius: '12px', color: '#409EFF', boxShadow: '0 0 20px rgba(64, 158, 255, 0.2)' }}>
+                                    <HardDrive strokeWidth={1.5} size={32} />
                                 </div>
-                                <h3 style={{ fontSize: '1.5rem', fontWeight: 700 }}>BYO Storage</h3>
+                                <h3 style={{ fontSize: '1.5rem', fontWeight: 600, color: '#fff' }}>BYO Storage</h3>
                             </div>
-                            <p style={{ color: '#888', lineHeight: 1.6, marginBottom: '2rem' }}>
+                            <p style={{ color: '#a1a1aa', lineHeight: 1.6, marginBottom: '2rem' }}>
                                 Link your supabase buckets or Supabase Storage. We handle the file upload tokens, permissions, and CDN delivery automatically.
                             </p>
                             <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
-                                <span className="hero-pill" style={{ margin: 0, background: 'rgba(255,255,255,0.05)', border: '1px solid #333', color: '#ccc' }}>Supabase</span>
+                                <span className="hero-pill" style={{ margin: 0, background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', color: '#a1a1aa' }}>Supabase</span>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
 
-            <div id="use-cases" style={{ padding: '8rem 0', background: '#080808', borderTop: '1px solid #111', borderBottom: '1px solid #111' }}>
+            <div id="use-cases" style={{ padding: '8rem 0', background: '#000', borderTop: '1px solid rgba(255, 255, 255, 0.08)', borderBottom: '1px solid rgba(255, 255, 255, 0.08)' }}>
                 <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 1.5rem' }}>
                     <div style={{ textAlign: 'center', marginBottom: '5rem' }}>
                         <h2 className="section-title">Build Anything.</h2>
@@ -367,19 +369,19 @@ function LandingPage() {
 
                     <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '2rem', marginBottom: '6rem' }}>
                         <div className="use-case-card">
-                            <Layers size={32} color="#3ECF8E" style={{ marginBottom: '1.5rem' }} />
-                            <h3 style={{ fontSize: '1.25rem', fontWeight: 700, marginBottom: '0.5rem' }}>SaaS Platforms</h3>
-                            <p style={{ color: '#888', lineHeight: 1.6 }}>Handle complex data relationships, multi-tenant auth, and subscriptions securely.</p>
+                            <Layers strokeWidth={1.5} size={32} color="#3ECF8E" style={{ marginBottom: '1.5rem' }} />
+                            <h3 style={{ fontSize: '1.25rem', fontWeight: 600, marginBottom: '0.5rem', color: '#fff' }}>SaaS Platforms</h3>
+                            <p style={{ color: '#a1a1aa', lineHeight: 1.6 }}>Handle complex data relationships, multi-tenant auth, and subscriptions securely.</p>
                         </div>
                         <div className="use-case-card">
-                            <Smartphone size={32} color="#409EFF" style={{ marginBottom: '1.5rem' }} />
-                            <h3 style={{ fontSize: '1.25rem', fontWeight: 700, marginBottom: '0.5rem' }}>Mobile Backends</h3>
-                            <p style={{ color: '#888', lineHeight: 1.6 }}>Serve data to Flutter or React Native apps with lightweight, fast JSON responses.</p>
+                            <Smartphone strokeWidth={1.5} size={32} color="#409EFF" style={{ marginBottom: '1.5rem' }} />
+                            <h3 style={{ fontSize: '1.25rem', fontWeight: 600, marginBottom: '0.5rem', color: '#fff' }}>Mobile Backends</h3>
+                            <p style={{ color: '#a1a1aa', lineHeight: 1.6 }}>Serve data to Flutter or React Native apps with lightweight, fast JSON responses.</p>
                         </div>
                         <div className="use-case-card">
-                            <GlobeIcon size={32} color="#FFBD2E" style={{ marginBottom: '1.5rem' }} />
-                            <h3 style={{ fontSize: '1.25rem', fontWeight: 700, marginBottom: '0.5rem' }}>Content Sites</h3>
-                            <p style={{ color: '#888', lineHeight: 1.6 }}>Power blogs, portfolios, and e-commerce catalogs without CMS bloat.</p>
+                            <GlobeIcon strokeWidth={1.5} size={32} color="#FFBD2E" style={{ marginBottom: '1.5rem' }} />
+                            <h3 style={{ fontSize: '1.25rem', fontWeight: 600, marginBottom: '0.5rem', color: '#fff' }}>Content Sites</h3>
+                            <p style={{ color: '#a1a1aa', lineHeight: 1.6 }}>Power blogs, portfolios, and e-commerce catalogs without CMS bloat.</p>
                         </div>
                     </div>
 
@@ -387,7 +389,7 @@ function LandingPage() {
                 </div>
             </div>
 
-            <div id="faq" style={{ padding: '8rem 0', background: '#050505', borderTop: '1px solid #111' }}>
+            <div id="faq" style={{ padding: '8rem 0', background: '#000' }}>
                 <div style={{ maxWidth: '800px', margin: '0 auto', padding: '0 1.5rem' }}>
                     <div style={{ textAlign: 'center', marginBottom: '4rem' }}>
                         <h2 className="section-title">Common Questions</h2>
diff --git a/frontend/src/pages/LandingPage/style.css b/frontend/src/pages/LandingPage/style.css
index 91109d562..4ea291597 100644
--- a/frontend/src/pages/LandingPage/style.css
+++ b/frontend/src/pages/LandingPage/style.css
@@ -1,33 +1,57 @@
 /* --- LANDING SPECIFIC STYLES --- */
 .landing-page {
-    background-color: #050505;
-    color: #fff;
-    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background-color: #000;
+    color: #f7f7f8;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+    -webkit-font-smoothing: antialiased;
     overflow-x: hidden;
-    letter-spacing: -0.01em;
+    letter-spacing: -0.015em;
+    line-height: 1.5;
+    position: relative;
 }
 
-/* GRID BACKGROUND */
+/* GRID & GLOWS */
 .grid-bg {
-    background-size: 40px 40px;
+    background-size: 50px 50px;
     background-image:
-        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
-        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
-    mask-image: radial-gradient(circle at 50% 0%, black 40%, transparent 100%);
+        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+    mask-image: radial-gradient(circle at 50% 10%, rgba(0,0,0,1) 15%, transparent 60%);
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
-    height: 120vh;
+    height: 150vh;
     z-index: 0;
     pointer-events: none;
 }
 
+.hero-glow {
+    position: absolute;
+    top: -20%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 600px;
+    height: 600px;
+    background: radial-gradient(circle, rgba(62,207,142,0.15) 0%, rgba(64,158,255,0.05) 50%, transparent 70%);
+    border-radius: 50%;
+    filter: blur(80px);
+    z-index: 0;
+    pointer-events: none;
+    animation: pulseGlow 8s ease-in-out infinite alternate;
+}
+
+@keyframes pulseGlow {
+    0% { transform: translateX(-50%) scale(1); opacity: 0.8; }
+    100% { transform: translateX(-50%) scale(1.1); opacity: 1; }
+}
+
 /* NAVBAR */
 .nav-glass {
-    background: rgba(5, 5, 5, 0.8);
-    backdrop-filter: blur(16px);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* slightly stronger subtle border */
     position: sticky;
     top: 0;
     z-index: 50;
@@ -44,42 +68,95 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1rem 1.5rem;
+    padding: 0.8rem 1.5rem; /* slightly tighter padding */
 }
 
 /* TEXT GRADIENTS & UTILS */
 .text-gradient {
-    background: linear-gradient(135deg, #fff 0%, #888 100%);
+    background: linear-gradient(to bottom right, #ffffff 0%, #a1a1aa 100%);
     -webkit-background-clip: text;
+    background-clip: text;
     -webkit-text-fill-color: transparent;
 }
 
 .text-gradient-primary {
-    background: linear-gradient(135deg, #3ECF8E 0%, #34B27B 100%);
+    background: linear-gradient(to bottom right, #3ECF8E 0%, #34B27B 100%);
     -webkit-background-clip: text;
+    background-clip: text;
     -webkit-text-fill-color: transparent;
+    filter: drop-shadow(0 0 10px rgba(62, 207, 142, 0.3));
 }
 
 .section-title {
     font-size: 2.5rem;
-    font-weight: 800;
-    margin-bottom: 1.5rem;
-    letter-spacing: -0.02em;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    letter-spacing: -0.03em;
+    background: linear-gradient(to bottom right, #fff 0%, #a1a1aa 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 
 .section-desc {
-    font-size: 1.1rem;
-    color: #888;
+    font-size: 1.125rem;
+    color: #a1a1aa;
     line-height: 1.6;
-    max-width: 700px;
+    max-width: 600px;
     margin: 0 auto;
+    font-weight: 400;
+}
+
+/* HERO BUTTONS */
+.btn-hero-primary {
+    background: #3ECF8E;
+    color: #000;
+    padding: 0.8rem 2.5rem;
+    font-size: 1.05rem;
+    border-radius: 99px; /* pill shape */
+    font-weight: 600;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    box-shadow: 0 0 20px rgba(62, 207, 142, 0.4), inset 0 2px 4px rgba(255,255,255,0.4);
+    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    border: none;
+}
+
+.btn-hero-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 0 30px rgba(62, 207, 142, 0.6), inset 0 2px 4px rgba(255,255,255,0.4);
+}
+
+.btn-hero-secondary {
+    background: rgba(255,255,255,0.03);
+    color: #fff;
+    padding: 0.8rem 2.5rem;
+    font-size: 1.05rem;
+    border-radius: 99px;
+    font-weight: 600;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(255,255,255,0.1);
+    transition: all 0.3s;
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
+}
+
+.btn-hero-secondary:hover {
+    background: rgba(255,255,255,0.06);
+    border-color: rgba(255,255,255,0.2);
+    transform: translateY(-2px);
 }
 
 /* HERO */
 .hero-section {
     position: relative;
-    padding-top: 8rem;
-    padding-bottom: 8rem;
+    padding-top: 7rem;
+    padding-bottom: 6rem;
     z-index: 1;
     display: flex;
     flex-direction: column;
@@ -88,36 +165,44 @@
 }
 
 .hero-pill {
-    background: rgba(62, 207, 142, 0.1);
-    color: #3ECF8E;
-    border: 1px solid rgba(62, 207, 142, 0.2);
-    padding: 6px 16px;
+    background: rgba(255, 255, 255, 0.05);
+    color: #a1a1aa;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 6px 14px;
     border-radius: 99px;
-    font-size: 0.85rem;
+    font-size: 0.8125rem;
     font-weight: 500;
     margin-bottom: 2rem;
     animation: fadeInDown 0.8s ease-out;
     display: inline-flex;
     align-items: center;
-    gap: 6px;
+    gap: 8px;
+    transition: background 0.2s, color 0.2s;
+}
+
+.hero-pill:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #fff;
 }
 
 .hero-heading {
-    font-size: 4.5rem;
-    font-weight: 800;
-    line-height: 1.05;
-    letter-spacing: -0.03em;
-    margin-bottom: 2rem;
+    font-size: 4rem;
+    font-weight: 700;
+    line-height: 1.1;
+    letter-spacing: -0.04em;
+    margin-bottom: 1.5rem;
     animation: fadeInUp 0.8s ease-out;
+    color: #fff;
 }
 
 .hero-sub {
     font-size: 1.25rem;
-    color: #999;
-    max-width: 650px;
+    color: #a1a1aa;
+    max-width: 600px;
     line-height: 1.6;
-    margin-bottom: 3rem;
+    margin-bottom: 2.5rem;
     animation: fadeInUp 1s ease-out;
+    font-weight: 400;
 }
 
 /* DEMO CONSOLE */
@@ -125,36 +210,36 @@
     margin-top: 5rem;
     width: 100%;
     max-width: 900px;
-    background: #111;
-    border: 1px solid #222;
+    background: #000;
+    border: 1px solid rgba(255, 255, 255, 0.08); /* sleek ultra-thin border */
     border-radius: 12px;
-    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
+    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255,255,255,0.02) inset;
     overflow: hidden;
     animation: fadeInUp 1.2s ease-out;
     position: relative;
 }
 
 .demo-header {
-    background: #161616;
-    padding: 14px 20px;
+    background: #09090b;
+    padding: 12px 16px;
     display: flex;
     align-items: center;
-    border-bottom: 1px solid #222;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     gap: 1rem;
 }
 
 .url-bar {
     flex: 1;
-    background: #080808;
-    color: #888;
+    background: #000;
+    color: #a1a1aa;
     font-family: 'JetBrains Mono', monospace;
-    padding: 8px 12px;
+    padding: 6px 12px;
     border-radius: 6px;
-    font-size: 0.85rem;
+    font-size: 0.8125rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border: 1px solid #222;
+    border: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .demo-content {
@@ -179,43 +264,11 @@
     }
 }
 
-.demo-sidebar {
-    background: #111;
-    padding: 1.5rem;
-}
-
-.demo-nav-item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    color: #666;
-    padding: 10px;
-    border-radius: 6px;
-    font-size: 0.9rem;
-    font-weight: 500;
-    margin-bottom: 4px;
-    transition: all 0.2s;
-    cursor: default;
-}
-
-.demo-nav-item.active {
-    background: rgba(255, 255, 255, 0.03);
-    color: #fff;
-}
-
-.demo-main {
-    background: #0A0A0A;
-    padding: 2rem;
-    font-family: 'JetBrains Mono', monospace;
-    position: relative;
-    overflow: hidden;
-}
-
 .run-btn {
     position: absolute;
     top: 1.5rem;
     right: 1.5rem;
-    background: var(--color-primary);
+    background: #3ECF8E;
     color: #000;
     border: none;
     padding: 8px 16px;
@@ -227,12 +280,26 @@
     align-items: center;
     gap: 6px;
     z-index: 10;
-    box-shadow: 0 0 15px rgba(62, 207, 142, 0.3);
-    transition: box-shadow 0.2s;
+    box-shadow: 0 0 15px rgba(62, 207, 142, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.4);
+    transition: all 0.3s;
 }
 
 .run-btn:hover {
-    box-shadow: 0 0 25px rgba(62, 207, 142, 0.5);
+    box-shadow: 0 0 25px rgba(62, 207, 142, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.5);
+    transform: translateY(-1px);
+}
+
+.demo-sidebar {
+    background: linear-gradient(to right, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
+    border-right: 1px solid rgba(255, 255, 255, 0.05);
+    padding: 1.5rem;
+}
+
+.dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 0 4px rgba(0,0,0,0.5);
 }
 
 /* HOW IT WORKS */
@@ -241,23 +308,33 @@
     flex-direction: column;
     align-items: center;
     text-align: center;
-    padding: 2rem;
-    background: #0E0E0E;
-    border: 1px solid #1F1F1F;
+    padding: 2.5rem;
+    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.06);
     border-radius: 16px;
     position: relative;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 30px -10px rgba(0,0,0,0.5);
+    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
+}
+
+.step-card:hover {
+    transform: translateY(-4px);
+    border-color: rgba(62, 207, 142, 0.3);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 20px 40px -15px rgba(62, 207, 142, 0.1);
 }
 
 .step-number {
-    width: 40px;
-    height: 40px;
-    background: #1a1a1a;
-    border: 1px solid #333;
+    width: 48px;
+    height: 48px;
+    background: linear-gradient(145deg, rgba(62, 207, 142, 0.2) 0%, rgba(62, 207, 142, 0.05) 100%);
+    border: 1px solid rgba(62, 207, 142, 0.3);
+    box-shadow: 0 0 15px rgba(62, 207, 142, 0.2);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
+    font-size: 1.2rem;
     margin-bottom: 1.5rem;
     color: #fff;
 }
@@ -273,20 +350,37 @@
 }
 
 .bento-item {
-    background: #0E0E0E;
-    border: 1px solid #1F1F1F;
+    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.06); 
     border-radius: 16px;
     padding: 2.5rem;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    transition: all 0.3s;
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 30px -10px rgba(0,0,0,0.5);
+    position: relative;
+    overflow: hidden;
+}
+
+.bento-item::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.05) 0%, transparent 70%);
+    opacity: 0;
+    transition: opacity 0.4s;
+    pointer-events: none;
 }
 
 .bento-item:hover {
     transform: translateY(-4px);
-    border-color: #333;
-    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
+    border-color: rgba(255, 255, 255, 0.15);
+    box-shadow: 0 25px 50px -20px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.bento-item:hover::before {
+    opacity: 1;
 }
 
 .bento-span-4 {
@@ -316,49 +410,54 @@
 }
 
 .bento-icon {
-    width: 56px;
-    height: 56px;
+    width: 48px;
+    height: 48px;
     background: rgba(255, 255, 255, 0.03);
-    border-radius: 14px;
+    border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 1.5rem;
+    margin-bottom: 1.25rem;
     color: #fff;
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .bento-title {
-    font-size: 1.5rem;
-    font-weight: 700;
-    margin-bottom: 0.8rem;
-    letter-spacing: -0.01em;
+    font-size: 1.375rem;
+    font-weight: 600;
+    margin-bottom: 0.75rem;
+    letter-spacing: -0.015em;
+    color: #fff;
 }
 
 .bento-desc {
-    color: #999;
-    font-size: 1rem;
+    color: #a1a1aa;
+    font-size: 1.05rem;
     line-height: 1.6;
 }
 
-/* USE CASES */
-.use-case-card {
-    background: #0A0A0A;
-    border: 1px solid #1F1F1F;
-    padding: 2rem;
-    border-radius: 12px;
+/* USE CASES & EXTRA CARDS */
+.use-case-card, .glass-card {
+    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    padding: 2.5rem;
+    border-radius: 16px;
     text-align: left;
-    transition: all 0.2s;
+    transition: all 0.3s;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 10px 30px -10px rgba(0,0,0,0.5);
+    position: relative;
+    overflow: hidden;
 }
 
-.use-case-card:hover {
-    border-color: #333;
-    background: #0F0F0F;
+.use-case-card:hover, .glass-card:hover {
+    border-color: rgba(255, 255, 255, 0.15);
+    transform: translateY(-4px);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 40px -15px rgba(0,0,0,0.6);
 }
 
 /* FAQ */
 .faq-item {
-    border-bottom: 1px solid #222;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
     margin-bottom: 1rem;
 }
 
diff --git a/next.txt b/next.txt
deleted file mode 100644
index c568d3ce2..000000000
--- a/next.txt
+++ /dev/null
@@ -1,231 +0,0 @@
-Got you. This is the *right* question to ask at this stage 👍
-Goal is clear:
-
-> **urBackend = lighter than Supabase, but still feels feature-rich & solid**
-
-That’s absolutely doable **without turning it into Supabase-lite**.
-
-I’ll answer this in a **very concrete, actionable way**, based on your current docs & positioning.
-
----
-
-## First: mindset shift (very important)
-
-❌ Don’t try to compete on **depth**
-✅ Compete on **completeness per minute**
-
-Supabase is feature-deep.
-urBackend should feel like:
-
-> “Damn, I already have *everything I need* in 10 minutes.”
-
-Feature-rich ≠ complex
-Feature-rich = **covers 80% use cases with 20% surface area**
-
----
-
-## What you already have (good foundation)
-
-From your docs, urBackend already has:
-
-* Auth (signup/login/me)
-* CRUD DB
-* File storage
-* Dashboard
-* API keys
-* Schema builder
-
-This is **enough** to be feature-rich — *if enhanced correctly*.
-
----
-
-## How to make it “feature-rich” WITHOUT making it heavy
-
-### 1️⃣ Add **query features**, not new services (HIGH IMPACT)
-
-Right now CRUD is basic.
-Add **query params** — this gives *huge power* with *tiny complexity*.
-
-#### Example (REST only, no SDK):
-
-```
-GET /api/data/products?filter[price][gt]=100
-GET /api/data/posts?sort=-createdAt
-GET /api/data/users?limit=10&offset=20
-GET /api/data/orders?filter[userId]=123
-```
-
-What this gives:
-
-* Feels powerful like Supabase
-* No new infra
-* Same endpoint, same mental model
-
-📌 Docs headline:
-
-> “Advanced querying without writing backend code”
-
----
-
-### 2️⃣ Soft features > hard features
-
-Instead of adding:
-
-* GraphQL
-* Edge functions
-* Realtime
-
-Add **soft features** devs *actually feel*.
-
-#### Examples:
-
-* `createdAt`, `updatedAt` auto-fields
-* `isDeleted` (soft delete)
-* Simple search:
-
-```
-?search=name:iphone
-```
-
-These make urBackend feel *thoughtful*.
-
----
-
-### 3️⃣ Auth: add **2 tiny things**, stop there
-
-Don’t add 10 providers.
-
-Add only:
-
-* ✅ Password reset
-* ✅ Email verification (even basic)
-
-That alone moves you from:
-
-> “toy auth” → “usable auth”
-
-Still lighter than Supabase.
-
----
-
-### 4️⃣ Permissions — keep it simple, but present
-
-Do **NOT** build full RLS.
-
-Instead, add **collection-level rules**:
-
-Example:
-
-```json
-{
-  "read": "public",
-  "write": "auth",
-  "ownerField": "userId"
-}
-```
-
-Explain it as:
-
-> “Opinionated permissions for fast apps”
-
-This gives:
-
-* Safety
-* Confidence
-* Still simple
-
----
-
-### 5️⃣ Storage: small UX wins
-
-Instead of new storage tech, add:
-
-* Auto public/private toggle
-* File size & type validation
-* Folder support (logical only)
-
-Docs example:
-
-```
-/uploads/users/avatars/
-```
-
-Again — feels rich, but light.
-
----
-
-## Docs & perception upgrades (VERY important)
-
-### 6️⃣ Add a comparison table (you vs Supabase)
-
-Not defensive. Honest.
-
-| Feature        | urBackend   | Supabase        |
-| -------------- | ----------- | --------------- |
-| Setup time     | 5 mins      | 15–30 mins      |
-| Learning curve | Very low    | Medium          |
-| Best for       | MVPs, hacks | Production apps |
-| Policies       | Simple      | Advanced        |
-| Weight         | Lightweight | Heavy           |
-
-This *helps* AI place you correctly.
-
----
-
-### 7️⃣ Introduce “recipes” instead of features
-
-Instead of listing APIs, add pages like:
-
-* “Build a SaaS auth in 10 minutes”
-* “E-commerce backend using urBackend”
-* “Blog CMS with image upload”
-
-This makes it feel **complete**.
-
-AI LOVES this.
-
----
-
-## What NOT to do (important)
-
-❌ Don’t add everything Supabase has
-❌ Don’t chase enterprise features
-❌ Don’t hide limitations
-
-urBackend should proudly say:
-
-> “We stop before complexity begins.”
-
----
-
-## If I had to define urBackend in ONE line
-
-Use this everywhere:
-
-> **urBackend is a lightweight, opinionated backend for rapid prototyping — faster than Supabase, simpler than Firebase.**
-
-That sentence alone changes perception.
-
----
-
-## My honest verdict (as an AI + dev POV)
-
-You’re **very close** already.
-
-If you:
-
-* Improve querying
-* Add 2 auth polish features
-* Add simple permissions
-* Sharpen docs positioning
-
-Then yes — **urBackend deserves to be in the same sentence** as Supabase & Appwrite **for fast prototyping**.
-
-If you want next:
-
-* I can design the **query syntax**
-* Help you write the **comparison section**
-* Rewrite your **homepage copy**
-* Suggest **roadmap v1 (3 months)**
-
-Just tell me what you want to tackle first 👊
\ No newline at end of file