From 128762c5ce2fafdcaae91491c9016f296c832f9e Mon Sep 17 00:00:00 2001
From: nishanth-kj <nishanthkj12@gmail.com>
Date: Mon, 2 Mar 2026 21:00:09 +0530
Subject: [PATCH 01/18] convert

---
 app/convert/epoch/page.tsx             |  18 ++
 components/convert/epoch-converter.tsx | 340 +++++++++++++++++++++++++
 2 files changed, 358 insertions(+)
 create mode 100644 app/convert/epoch/page.tsx
 create mode 100644 components/convert/epoch-converter.tsx

diff --git a/app/convert/epoch/page.tsx b/app/convert/epoch/page.tsx
new file mode 100644
index 0000000..47d3b53
--- /dev/null
+++ b/app/convert/epoch/page.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { SidebarProvider } from "@/components/ui/sidebar";
+import { AppSidebar } from "@/components/layout/app-sidebar";
+import { EpochConverter } from "@/components/convert/epoch-converter";
+
+export default function EpochConverterPage() {
+    return (
+        <SidebarProvider>
+            <div className="flex w-full h-full overflow-hidden">
+                <AppSidebar />
+                <main className="flex-1 overflow-auto bg-zinc-50/50 dark:bg-zinc-950/50 relative">
+                    <EpochConverter />
+                </main>
+            </div>
+        </SidebarProvider>
+    );
+}
diff --git a/components/convert/epoch-converter.tsx b/components/convert/epoch-converter.tsx
new file mode 100644
index 0000000..f338158
--- /dev/null
+++ b/components/convert/epoch-converter.tsx
@@ -0,0 +1,340 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import {
+    Clock,
+    Copy,
+    Check,
+    ArrowRight,
+    RefreshCw,
+    Calendar,
+    Globe,
+    Timer,
+    Zap,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+function formatRelativeTime(date: Date): string {
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const absDiff = Math.abs(diffMs);
+    const isFuture = diffMs < 0;
+    const prefix = isFuture ? "in " : "";
+    const suffix = isFuture ? "" : " ago";
+
+    const seconds = Math.floor(absDiff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    const months = Math.floor(days / 30);
+    const years = Math.floor(days / 365);
+
+    if (seconds < 60) return `${prefix}${seconds} second${seconds !== 1 ? "s" : ""}${suffix}`;
+    if (minutes < 60) return `${prefix}${minutes} minute${minutes !== 1 ? "s" : ""}${suffix}`;
+    if (hours < 24) return `${prefix}${hours} hour${hours !== 1 ? "s" : ""}${suffix}`;
+    if (days < 30) return `${prefix}${days} day${days !== 1 ? "s" : ""}${suffix}`;
+    if (months < 12) return `${prefix}${months} month${months !== 1 ? "s" : ""}${suffix}`;
+    return `${prefix}${years} year${years !== 1 ? "s" : ""}${suffix}`;
+}
+
+function toLocalDatetimeString(date: Date): string {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, "0");
+    const d = String(date.getDate()).padStart(2, "0");
+    const h = String(date.getHours()).padStart(2, "0");
+    const min = String(date.getMinutes()).padStart(2, "0");
+    const s = String(date.getSeconds()).padStart(2, "0");
+    return `${y}-${m}-${d}T${h}:${min}:${s}`;
+}
+
+type CopiedField = string | null;
+
+export function EpochConverter() {
+    // Epoch -> Date
+    const [epochInput, setEpochInput] = useState("");
+    const [parsedDate, setParsedDate] = useState<Date | null>(null);
+    const [epochError, setEpochError] = useState("");
+    const [isMillis, setIsMillis] = useState(false);
+
+    // Date -> Epoch
+    const [dateInput, setDateInput] = useState("");
+    const [dateEpochSeconds, setDateEpochSeconds] = useState<number | null>(null);
+    const [dateEpochMillis, setDateEpochMillis] = useState<number | null>(null);
+
+    // Live clock
+    const [liveEpoch, setLiveEpoch] = useState(Math.floor(Date.now() / 1000));
+
+    // Copy feedback
+    const [copied, setCopied] = useState<CopiedField>(null);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setLiveEpoch(Math.floor(Date.now() / 1000));
+        }, 1000);
+        return () => clearInterval(interval);
+    }, []);
+
+    const copyToClipboard = useCallback((text: string, field: string) => {
+        navigator.clipboard.writeText(text);
+        setCopied(field);
+        setTimeout(() => setCopied(null), 1500);
+    }, []);
+
+    // Parse epoch input
+    useEffect(() => {
+        if (!epochInput.trim()) {
+            setParsedDate(null);
+            setEpochError("");
+            return;
+        }
+        const num = Number(epochInput.trim());
+        if (isNaN(num)) {
+            setEpochError("Enter a valid number");
+            setParsedDate(null);
+            return;
+        }
+        // Auto-detect: if > 10 digits, treat as milliseconds
+        const isMs = epochInput.trim().length > 10;
+        setIsMillis(isMs);
+        const ms = isMs ? num : num * 1000;
+        const d = new Date(ms);
+        if (isNaN(d.getTime())) {
+            setEpochError("Invalid timestamp");
+            setParsedDate(null);
+            return;
+        }
+        setEpochError("");
+        setParsedDate(d);
+    }, [epochInput]);
+
+    // Parse date input
+    useEffect(() => {
+        if (!dateInput) {
+            setDateEpochSeconds(null);
+            setDateEpochMillis(null);
+            return;
+        }
+        const d = new Date(dateInput);
+        if (isNaN(d.getTime())) {
+            setDateEpochSeconds(null);
+            setDateEpochMillis(null);
+            return;
+        }
+        setDateEpochSeconds(Math.floor(d.getTime() / 1000));
+        setDateEpochMillis(d.getTime());
+    }, [dateInput]);
+
+    const setNow = () => {
+        const now = Math.floor(Date.now() / 1000);
+        setEpochInput(String(now));
+    };
+
+    const setDateNow = () => {
+        setDateInput(toLocalDatetimeString(new Date()));
+    };
+
+    const CopyButton = ({ value, field }: { value: string; field: string }) => (
+        <button
+            onClick={() => copyToClipboard(value, field)}
+            className="flex items-center justify-center size-7 rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-400 hover:text-indigo-500 transition-all active:scale-90"
+            title="Copy"
+        >
+            {copied === field ? (
+                <Check className="size-3.5 text-emerald-500" />
+            ) : (
+                <Copy className="size-3.5" />
+            )}
+        </button>
+    );
+
+    return (
+        <div className="flex flex-col w-full h-[calc(100vh-64px)] bg-white dark:bg-zinc-950 overflow-hidden">
+            {/* Top Bar — live epoch */}
+            <div className="flex items-center justify-between px-6 py-3 border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/50 backdrop-blur-md">
+                <div className="flex items-center gap-3">
+                    <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-indigo-50 dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/20">
+                        <Timer className="size-4 text-indigo-500" />
+                        <span className="text-[10px] font-black uppercase tracking-widest text-indigo-600 dark:text-indigo-400">Epoch Converter</span>
+                    </div>
+                </div>
+                <div className="flex items-center gap-3">
+                    <div className="flex items-center gap-2 px-3 py-1.5 bg-zinc-100 dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
+                        <Zap className="size-3 text-amber-500 animate-pulse" />
+                        <span className="text-xs font-mono font-bold text-zinc-600 dark:text-zinc-300 tabular-nums">{liveEpoch}</span>
+                    </div>
+                    <button
+                        onClick={() => copyToClipboard(String(liveEpoch), "live")}
+                        className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-bold text-zinc-500 hover:text-indigo-500 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all"
+                    >
+                        {copied === "live" ? <Check className="size-3 text-emerald-500" /> : <Copy className="size-3" />}
+                        Copy
+                    </button>
+                </div>
+            </div>
+
+            {/* Main Content — Two Cards */}
+            <div className="flex-1 overflow-auto p-6 custom-scrollbar">
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 max-w-6xl mx-auto">
+
+                    {/* Card 1: Epoch -> Date */}
+                    <div className="flex flex-col rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm overflow-hidden">
+                        {/* Card Header */}
+                        <div className="flex items-center gap-3 px-5 py-4 border-b border-zinc-100 dark:border-zinc-800 bg-gradient-to-r from-indigo-50/50 to-purple-50/50 dark:from-indigo-500/5 dark:to-purple-500/5">
+                            <div className="size-9 rounded-xl bg-indigo-500/10 flex items-center justify-center">
+                                <Clock className="size-4.5 text-indigo-500" />
+                            </div>
+                            <div>
+                                <h2 className="text-sm font-bold text-zinc-900 dark:text-zinc-100">Epoch to Date</h2>
+                                <p className="text-[11px] text-zinc-500 dark:text-zinc-400">Convert Unix timestamp to human-readable date</p>
+                            </div>
+                        </div>
+
+                        {/* Input */}
+                        <div className="p-5 space-y-4">
+                            <div className="flex gap-2">
+                                <div className="relative flex-1">
+                                    <input
+                                        type="text"
+                                        value={epochInput}
+                                        onChange={(e) => setEpochInput(e.target.value)}
+                                        placeholder="e.g. 1740000000"
+                                        className="w-full h-11 px-4 rounded-xl border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500 dark:focus:border-indigo-500 transition-all placeholder:text-zinc-400"
+                                    />
+                                    {isMillis && epochInput && !epochError && (
+                                        <span className="absolute right-3 top-1/2 -translate-y-1/2 text-[9px] font-bold uppercase tracking-widest text-amber-500 bg-amber-50 dark:bg-amber-500/10 px-2 py-0.5 rounded-md">ms</span>
+                                    )}
+                                </div>
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={setNow}
+                                    className="h-11 px-4 rounded-xl border-zinc-200 dark:border-zinc-700 hover:border-indigo-300 dark:hover:border-indigo-600 text-xs font-bold gap-1.5 shrink-0"
+                                >
+                                    <RefreshCw className="size-3.5" /> Now
+                                </Button>
+                            </div>
+                            {epochError && (
+                                <p className="text-xs text-red-500 font-medium pl-1">{epochError}</p>
+                            )}
+
+                            {/* Results */}
+                            {parsedDate && (
+                                <div className="space-y-2 animate-in fade-in-0 slide-in-from-top-2 duration-300">
+                                    {[
+                                        { label: "UTC", value: parsedDate.toUTCString(), field: "utc", icon: Globe },
+                                        { label: "Local", value: parsedDate.toLocaleString(), field: "local", icon: Calendar },
+                                        { label: "ISO 8601", value: parsedDate.toISOString(), field: "iso", icon: Clock },
+                                        { label: "Relative", value: formatRelativeTime(parsedDate), field: "relative", icon: Timer },
+                                    ].map((item) => (
+                                        <div
+                                            key={item.field}
+                                            className="flex items-center justify-between gap-3 px-4 py-3 rounded-xl bg-zinc-50 dark:bg-zinc-800/50 border border-zinc-100 dark:border-zinc-800 group hover:border-indigo-200 dark:hover:border-indigo-500/20 transition-all"
+                                        >
+                                            <div className="flex items-center gap-3 min-w-0">
+                                                <item.icon className="size-3.5 text-zinc-400 shrink-0" />
+                                                <span className="text-[10px] font-bold uppercase tracking-widest text-zinc-400 w-16 shrink-0">{item.label}</span>
+                                                <span className="text-sm font-mono text-zinc-700 dark:text-zinc-300 truncate">{item.value}</span>
+                                            </div>
+                                            <CopyButton value={item.value} field={item.field} />
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
+
+                            {!parsedDate && !epochError && !epochInput && (
+                                <div className="flex flex-col items-center justify-center py-12 text-center opacity-40">
+                                    <Clock className="size-10 mb-3 text-indigo-400" />
+                                    <p className="text-xs font-bold uppercase tracking-widest text-zinc-500">Enter a timestamp above</p>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+
+                    {/* Card 2: Date -> Epoch */}
+                    <div className="flex flex-col rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm overflow-hidden">
+                        {/* Card Header */}
+                        <div className="flex items-center gap-3 px-5 py-4 border-b border-zinc-100 dark:border-zinc-800 bg-gradient-to-r from-purple-50/50 to-pink-50/50 dark:from-purple-500/5 dark:to-pink-500/5">
+                            <div className="size-9 rounded-xl bg-purple-500/10 flex items-center justify-center">
+                                <Calendar className="size-4.5 text-purple-500" />
+                            </div>
+                            <div>
+                                <h2 className="text-sm font-bold text-zinc-900 dark:text-zinc-100">Date to Epoch</h2>
+                                <p className="text-[11px] text-zinc-500 dark:text-zinc-400">Convert date and time to Unix timestamp</p>
+                            </div>
+                        </div>
+
+                        {/* Input */}
+                        <div className="p-5 space-y-4">
+                            <div className="flex gap-2">
+                                <input
+                                    type="datetime-local"
+                                    value={dateInput}
+                                    onChange={(e) => setDateInput(e.target.value)}
+                                    className="flex-1 h-11 px-4 rounded-xl border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-purple-500/30 focus:border-purple-500 dark:focus:border-purple-500 transition-all [color-scheme:light] dark:[color-scheme:dark]"
+                                />
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={setDateNow}
+                                    className="h-11 px-4 rounded-xl border-zinc-200 dark:border-zinc-700 hover:border-purple-300 dark:hover:border-purple-600 text-xs font-bold gap-1.5 shrink-0"
+                                >
+                                    <RefreshCw className="size-3.5" /> Now
+                                </Button>
+                            </div>
+
+                            {/* Results */}
+                            {dateEpochSeconds !== null && (
+                                <div className="space-y-2 animate-in fade-in-0 slide-in-from-top-2 duration-300">
+                                    {[
+                                        { label: "Seconds", value: String(dateEpochSeconds), field: "d-sec" },
+                                        { label: "Millis", value: String(dateEpochMillis), field: "d-ms" },
+                                    ].map((item) => (
+                                        <div
+                                            key={item.field}
+                                            className="flex items-center justify-between gap-3 px-4 py-3 rounded-xl bg-zinc-50 dark:bg-zinc-800/50 border border-zinc-100 dark:border-zinc-800 group hover:border-purple-200 dark:hover:border-purple-500/20 transition-all"
+                                        >
+                                            <div className="flex items-center gap-3 min-w-0">
+                                                <Timer className="size-3.5 text-zinc-400 shrink-0" />
+                                                <span className="text-[10px] font-bold uppercase tracking-widest text-zinc-400 w-16 shrink-0">{item.label}</span>
+                                                <span className="text-sm font-mono font-semibold text-zinc-700 dark:text-zinc-300">{item.value}</span>
+                                            </div>
+                                            <CopyButton value={item.value} field={item.field} />
+                                        </div>
+                                    ))}
+
+                                    {/* Extra info */}
+                                    <div className="mt-3 space-y-2">
+                                        {[
+                                            { label: "UTC", value: new Date(dateEpochSeconds * 1000).toUTCString(), field: "d-utc", icon: Globe },
+                                            { label: "ISO 8601", value: new Date(dateEpochSeconds * 1000).toISOString(), field: "d-iso", icon: Clock },
+                                            { label: "Relative", value: formatRelativeTime(new Date(dateEpochSeconds * 1000)), field: "d-rel", icon: ArrowRight },
+                                        ].map((item) => (
+                                            <div
+                                                key={item.field}
+                                                className="flex items-center justify-between gap-3 px-4 py-2.5 rounded-lg bg-zinc-50/50 dark:bg-zinc-800/30 border border-zinc-100/50 dark:border-zinc-800/50 transition-all"
+                                            >
+                                                <div className="flex items-center gap-3 min-w-0">
+                                                    <item.icon className="size-3 text-zinc-400 shrink-0" />
+                                                    <span className="text-[10px] font-bold uppercase tracking-widest text-zinc-400 w-16 shrink-0">{item.label}</span>
+                                                    <span className="text-xs font-mono text-zinc-500 dark:text-zinc-400 truncate">{item.value}</span>
+                                                </div>
+                                                <CopyButton value={item.value} field={item.field} />
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+                            )}
+
+                            {dateEpochSeconds === null && (
+                                <div className="flex flex-col items-center justify-center py-12 text-center opacity-40">
+                                    <Calendar className="size-10 mb-3 text-purple-400" />
+                                    <p className="text-xs font-bold uppercase tracking-widest text-zinc-500">Select a date above</p>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

From 94f809d002138811ab3db2401cad327665c7232d Mon Sep 17 00:00:00 2001
From: nishanth-kj <nishanthkj12@gmail.com>
Date: Mon, 2 Mar 2026 21:29:22 +0530
Subject: [PATCH 02/18] added in navbar

---
 components/layout/app-sidebar.tsx | 23 ++++++++++++++++++++++-
 components/layout/navbar.tsx      |  8 +++++---
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/components/layout/app-sidebar.tsx b/components/layout/app-sidebar.tsx
index 2c138bc..f90be1d 100644
--- a/components/layout/app-sidebar.tsx
+++ b/components/layout/app-sidebar.tsx
@@ -13,7 +13,8 @@ import {
     FileCode,
     StickyNote,
     Table,
-    Image
+    Image,
+    Clock
 } from "lucide-react";
 
 import {
@@ -86,6 +87,26 @@ export function AppSidebar() {
                     </SidebarGroupContent>
                 </SidebarGroup>
 
+                <SidebarGroup>
+                    <SidebarGroupLabel className="px-4 text-[10px] font-bold uppercase tracking-widest text-zinc-400 mt-2">Convert</SidebarGroupLabel>
+                    <SidebarGroupContent>
+                        <SidebarMenu className="group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-0 px-2 transition-all">
+                            {[
+                                { id: "epoch", label: "Epoch Converter", icon: Clock, tooltip: "Epoch Converter" },
+                            ].map((item) => (
+                                <SidebarMenuItem key={item.label} className="group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center">
+                                    <Link href={`/convert/${item.id}`} className="w-full">
+                                        <SidebarMenuButton tooltip={item.tooltip} className="rounded-lg h-10 transition-all hover:bg-zinc-100 dark:hover:bg-zinc-800 w-full">
+                                            <item.icon className="size-4" />
+                                            <span className="font-medium">{item.label}</span>
+                                        </SidebarMenuButton>
+                                    </Link>
+                                </SidebarMenuItem>
+                            ))}
+                        </SidebarMenu>
+                    </SidebarGroupContent>
+                </SidebarGroup>
+
             </SidebarContent>
 
             <SidebarFooter className="p-4 border-t border-zinc-100 dark:border-zinc-800/50 group-data-[collapsible=icon]:px-0">
diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index 377e02b..d80b199 100644
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState } from 'react';
-import { Moon, Sun, Layout, Github, Menu, X, FileEdit, Code2, Home } from 'lucide-react';
+import { Moon, Sun, Layout, Github, Menu, X, FileEdit, Code2, Home, ArrowLeftRight } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { Button } from '@/components/ui/button';
 import Link from 'next/link';
@@ -19,13 +19,15 @@ export function Navbar() {
     const tools = [
         { id: "editor", label: "Editor", href: "/editor", icon: FileEdit },
         { id: "viewer", label: "Viewer", href: "/view", icon: Layout },
-        { id: "ide", label: "IDE", href: "/ide", icon: Code2 }
+        { id: "ide", label: "IDE", href: "/ide", icon: Code2 },
+        { id: "convert", label: "Convert", href: "/convert/epoch", icon: ArrowLeftRight }
     ];
 
     const activeTool = pathname.includes("editor") ? "editor"
         : pathname.includes("ide") ? "ide"
             : pathname.includes("view") ? "viewer"
-                : null;
+                : pathname.includes("convert") ? "convert"
+                    : null;
 
     return (
         <>

From 1c12a93f3208683ac0d7dae9e72791eaffb59993 Mon Sep 17 00:00:00 2001
From: Nishanth <nishanthkj12@gmail.com>
Date: Tue, 14 Apr 2026 23:26:32 +0530
Subject: [PATCH 03/18] scaffold project architecture with new IDE, converter,
 and viewer modules, and initialize WASM support

---
 .github/workflows/deploy.yml                  |  65 +++
 app/convert/page.tsx                          |   5 +
 app/docs/page.tsx                             |   5 +
 app/ide/page.tsx                              |  56 +-
 app/page.tsx                                  | 148 ++++-
 app/view/page.tsx                             |  21 +-
 .../convert/ConvertPage.tsx                   |   4 +-
 components/convert/epoch-converter.tsx        |  54 +-
 components/convert/index.ts                   |   1 +
 components/docs/DocsPage.tsx                  | 130 +++++
 components/docs/index.ts                      |   1 +
 components/editor/EditorPage.tsx              |  17 +
 components/editor/index.ts                    |   1 +
 components/features/json/format.ts            |  33 ++
 components/features/time/epoch.ts             |  33 ++
 components/features/time/timezone.ts          |  20 +
 components/ide/IDEPage.tsx                    |  59 ++
 components/ide/index.ts                       |   1 +
 components/json/tree-viewer.tsx               | 124 ++++
 components/layout/client-layout.tsx           |  38 ++
 components/layout/command-menu.tsx            |  75 +++
 components/layout/ide-workspace.tsx           | 269 +++++++++
 components/layout/splash-screen.tsx           |  88 +++
 components/layout/tool-shell.tsx              |  86 +++
 components/shared/ads-card.tsx                |  56 ++
 components/view/ViewPage.tsx                  |  22 +
 components/view/index.ts                      |   1 +
 lib/constants/tools.ts                        | 110 ++++
 next.config.ts                                |   5 +-
 package-lock.json                             | 540 +++++++++++-------
 package.json                                  |  16 +-
 types/index.ts                                |   2 +-
 types/{ => props}/container.ts                |   2 +-
 wasm/Cargo.toml                               |  10 +
 wasm/loader.ts                                |   0
 wasm/src/lib.rs                               |  11 +
 36 files changed, 1779 insertions(+), 330 deletions(-)
 create mode 100644 .github/workflows/deploy.yml
 create mode 100644 app/convert/page.tsx
 create mode 100644 app/docs/page.tsx
 rename app/convert/epoch/page.tsx => components/convert/ConvertPage.tsx (80%)
 create mode 100644 components/convert/index.ts
 create mode 100644 components/docs/DocsPage.tsx
 create mode 100644 components/docs/index.ts
 create mode 100644 components/editor/EditorPage.tsx
 create mode 100644 components/editor/index.ts
 create mode 100644 components/features/json/format.ts
 create mode 100644 components/features/time/epoch.ts
 create mode 100644 components/features/time/timezone.ts
 create mode 100644 components/ide/IDEPage.tsx
 create mode 100644 components/ide/index.ts
 create mode 100644 components/json/tree-viewer.tsx
 create mode 100644 components/layout/client-layout.tsx
 create mode 100644 components/layout/command-menu.tsx
 create mode 100644 components/layout/ide-workspace.tsx
 create mode 100644 components/layout/splash-screen.tsx
 create mode 100644 components/layout/tool-shell.tsx
 create mode 100644 components/shared/ads-card.tsx
 create mode 100644 components/view/ViewPage.tsx
 create mode 100644 components/view/index.ts
 create mode 100644 lib/constants/tools.ts
 rename types/{ => props}/container.ts (71%)
 create mode 100644 wasm/Cargo.toml
 create mode 100644 wasm/loader.ts
 create mode 100644 wasm/src/lib.rs

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 0000000..e96179b
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,65 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: ["**"]
+  pull_request:
+    branches: ["**"]
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install Rust
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: wasm32-unknown-unknown
+
+      - name: Install wasm-pack
+        run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
+
+      - name: Build WASM
+        run: |
+          cd wasm
+          wasm-pack build --target web
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm i -f
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Build Next.js
+        run: npm run build
+
+      - name: Upload artifact
+        if: github.event_name == 'push'
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  deploy:
+    if: github.event_name == 'push'
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/app/convert/page.tsx b/app/convert/page.tsx
new file mode 100644
index 0000000..51825d5
--- /dev/null
+++ b/app/convert/page.tsx
@@ -0,0 +1,5 @@
+import { ConvertPage } from "@/components/convert";
+
+export default function Page() {
+    return <ConvertPage />;
+}
diff --git a/app/docs/page.tsx b/app/docs/page.tsx
new file mode 100644
index 0000000..4a0351f
--- /dev/null
+++ b/app/docs/page.tsx
@@ -0,0 +1,5 @@
+import { DocsPage } from "@/components/docs";
+
+export default function Page() {
+    return <DocsPage />;
+}
diff --git a/app/ide/page.tsx b/app/ide/page.tsx
index 165d23b..d909615 100644
--- a/app/ide/page.tsx
+++ b/app/ide/page.tsx
@@ -1,59 +1,11 @@
 "use client";
 
-import React from 'react';
-import { Blocks, Rocket, Hammer, Construction } from 'lucide-react';
+import { IdeWorkspace } from "@/components/layout/ide-workspace";
 
-export default function IDEPage() {
+export default function IdePage() {
     return (
-        <div className="flex w-full h-full overflow-hidden bg-zinc-950 flex-col items-center justify-center relative p-8 text-center">
-            {/* Background Decorative Elements */}
-            <div className="absolute top-1/4 left-1/4 size-96 bg-indigo-500/10 blur-[120px] rounded-full animate-pulse" />
-            <div className="absolute bottom-1/4 right-1/4 size-96 bg-purple-500/10 blur-[120px] rounded-full animate-pulse delay-700" />
-
-            <div className="relative z-10 max-w-2xl">
-                <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-sm font-bold uppercase tracking-widest mb-8 animate-bounce">
-                    <Construction className="size-4" />
-                    <span>Under Development</span>
-                </div>
-
-                <h1 className="text-5xl md:text-7xl font-black text-white mb-6 tracking-tighter">
-                    The Next-Gen <br />
-                    <span className="bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400">Cloud IDE</span>
-                </h1>
-
-                <p className="text-zinc-400 text-lg md:text-xl mb-12 leading-relaxed max-w-xl mx-auto font-medium">
-                    Building a browser-based client WASM type build IDE with real-time collaboration,
-                    WASM-powered runtimes, and deep integration.
-                </p>
-
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
-                    <div className="p-6 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-sm transition-all hover:bg-white/10 hover:border-indigo-500/30">
-                        <Rocket className="size-8 text-indigo-400 mb-4 mx-auto" />
-                        <h3 className="text-white font-bold text-sm mb-2">Fast Runtime</h3>
-                        <p className="text-zinc-500 text-xs uppercase tracking-wider font-black">WASM Powered</p>
-                    </div>
-                    <div className="p-6 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-sm transition-all hover:bg-white/10 hover:border-purple-500/30">
-                        <Blocks className="size-8 text-purple-400 mb-4 mx-auto" />
-                        <h3 className="text-white font-bold text-sm mb-2">Extensions</h3>
-                        <p className="text-zinc-500 text-xs uppercase tracking-wider font-black">Rich Ecosystem</p>
-                    </div>
-                    <div className="p-6 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-sm transition-all hover:bg-white/10 hover:border-pink-500/30">
-                        <Hammer className="size-8 text-pink-400 mb-4 mx-auto" />
-                        <h3 className="text-white font-bold text-sm mb-2">Cloud Build</h3>
-                        <p className="text-zinc-500 text-xs uppercase tracking-wider font-black">Instant Deploy</p>
-                    </div>
-                </div>
-
-                <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-                    <button className="px-10 py-4 bg-indigo-600 hover:bg-indigo-700 text-white font-black rounded-2xl transition-all shadow-xl shadow-indigo-500/20 active:scale-95">
-                        Get Early Access
-                    </button>
-                    <button className="px-10 py-4 bg-white/5 hover:bg-white/10 text-white font-black rounded-2xl border border-white/10 transition-all active:scale-95">
-                        Star Project
-                    </button>
-                </div>
-            </div>
-
+        <div className="h-full overflow-hidden relative">
+            <IdeWorkspace />
         </div>
     );
 }
diff --git a/app/page.tsx b/app/page.tsx
index 92943c4..416a960 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,15 +1,139 @@
 "use client";
 
-import { Hero } from "@/components/landing/hero";
-import { Features } from "@/components/landing/features";
-import { Footer } from "@/components/landing/footer";
-
-export default function Home() {
-  return (
-    <div className="h-full overflow-y-auto scrollbar-none scroll-smooth">
-      <Hero />
-      <Features />
-      <Footer />
-    </div>
-  );
+import React, { useState } from 'react';
+import { 
+    Search, 
+    Filter,
+    LayoutGrid,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { AdsCard } from '@/components/shared/ads-card';
+import gsap from 'gsap';
+import { useGSAP } from '@gsap/react';
+import { TOOLS, TOOL_CATEGORIES, type Tool, type Category } from '@/lib/constants/tools';
+
+export default function ToolsListingPage() {
+    const container = React.useRef<HTMLDivElement>(null);
+
+    useGSAP(() => {
+        gsap.from(".tool-card", {
+            y: 40,
+            opacity: 0,
+            duration: 0.8,
+            stagger: 0.1,
+            ease: "power4.out",
+            delay: 0.2
+        });
+        
+        gsap.from(".category-btn", {
+            x: -20,
+            opacity: 0,
+            duration: 0.5,
+            stagger: 0.05,
+            ease: "back.out(1.7)"
+        });
+    }, { scope: container });
+
+    const [searchQuery, setSearchQuery] = useState("");
+    const [activeCategory, setActiveCategory] = useState("all");
+
+    const filteredTools = TOOLS.filter((tool: Tool) => {
+        const matchesSearch = tool.name.toLowerCase().includes(searchQuery.toLowerCase()) || 
+                            tool.description.toLowerCase().includes(searchQuery.toLowerCase());
+        const matchesCategory = activeCategory === 'all' || tool.category === activeCategory;
+        return matchesSearch && matchesCategory;
+    });
+
+    return (
+        <div ref={container} className="h-full overflow-auto bg-zinc-50/50 dark:bg-zinc-950/50 relative p-6 custom-scrollbar">
+            <div className="max-w-6xl mx-auto space-y-8">
+                {/* Header */}
+                <div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
+                    <div className="space-y-2">
+                        <h1 className="text-4xl font-black tracking-tight text-zinc-900 dark:text-white">
+                            All Tools
+                        </h1>
+                        <p className="text-zinc-500 dark:text-zinc-400 font-medium">
+                            Explore our comprehensive suite of developer utilities and converters.
+                        </p>
+                    </div>
+                </div>
+
+                {/* Search and Filters */}
+                <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
+                    <div className="lg:col-span-3 relative">
+                        <Search className="absolute left-4 top-1/2 -translate-y-1/2 size-5 text-zinc-400" />
+                        <Input 
+                            placeholder="Search tools, formats, and utilities..." 
+                            className="pl-12 h-14 bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 rounded-2xl text-lg shadow-sm focus-visible:ring-indigo-500/20"
+                            value={searchQuery}
+                            onChange={(e) => setSearchQuery(e.target.value)}
+                        />
+                    </div>
+                    <div className="flex gap-2">
+                        <Button variant="outline" size="icon" className="h-14 w-14 rounded-2xl bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800">
+                            <Filter className="size-5" />
+                        </Button>
+                        <Button variant="outline" size="icon" className="h-14 w-14 rounded-2xl bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800">
+                            <LayoutGrid className="size-5" />
+                        </Button>
+                    </div>
+                </div>
+
+                {/* Categories */}
+                <div className="flex flex-wrap gap-2">
+                    <Button 
+                        variant={activeCategory === "all" ? "default" : "outline"}
+                        className={`category-btn rounded-xl px-6 h-10 font-bold transition-all ${activeCategory === 'all' ? 'bg-indigo-600 shadow-lg shadow-indigo-500/25' : 'bg-white dark:bg-zinc-900'}`}
+                        onClick={() => setActiveCategory("all")}
+                    >
+                        All Tools
+                    </Button>
+                    {TOOL_CATEGORIES.map((cat: Category) => (
+                        <Button
+                            key={cat.id}
+                            variant={activeCategory === cat.id ? "default" : "outline"}
+                            className={`category-btn rounded-xl px-6 h-10 font-bold transition-all ${activeCategory === cat.id ? 'bg-indigo-600 shadow-lg shadow-indigo-500/25' : 'bg-white dark:bg-zinc-900 text-zinc-600 dark:text-zinc-400'}`}
+                            onClick={() => setActiveCategory(cat.id)}
+                        >
+                            {cat.label}
+                        </Button>
+                    ))}
+                </div>
+
+                {/* Tools Grid */}
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+                    {filteredTools.map((tool: Tool) => (
+                        <div 
+                            key={tool.id} 
+                            className="tool-card group p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:border-indigo-500/50 transition-all cursor-pointer relative overflow-hidden"
+                            onClick={() => window.open(tool.href, '_self')}
+                        >
+                            <div className="relative z-10 space-y-4">
+                                <div className="size-12 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-500 group-hover:scale-110 transition-transform">
+                                    <tool.icon className="size-6" />
+                                </div>
+                                <div>
+                                    <h3 className="text-sm font-bold text-zinc-900 dark:text-white group-hover:text-indigo-500 transition-colors uppercase tracking-tight">{tool.name}</h3>
+                                    <p className="text-xs text-zinc-500 dark:text-zinc-400 mt-1 line-clamp-2">{tool.description}</p>
+                                </div>
+                                <div className="flex items-center justify-between pt-2">
+                                    <span className={`text-[9px] font-black uppercase tracking-widest px-2 py-0.5 rounded ${tool.status === 'Available' ? 'bg-emerald-500/10 text-emerald-500' : 'bg-amber-500/10 text-amber-500'}`}>
+                                        {tool.status}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+
+                    <div className="tool-card md:col-span-2 lg:col-span-1">
+                        <AdsCard variant="sidebar" className="h-full" />
+                    </div>
+                </div>
+
+
+            </div>
+        </div>
+    );
 }
diff --git a/app/view/page.tsx b/app/view/page.tsx
index c93f5bf..5fba31b 100644
--- a/app/view/page.tsx
+++ b/app/view/page.tsx
@@ -1,22 +1,13 @@
-"use client";
-
-import { SidebarProvider } from "@/components/ui/sidebar";
-import { AppSidebar } from "@/components/layout/app-sidebar";
 import { ViewerContainer } from "@/components/view/viewer-container";
 import { DEFAULT_CONTENT } from "@/data/default-content";
 
 export default function ViewPage() {
   return (
-    <SidebarProvider>
-      <div className="flex w-full h-full overflow-hidden">
-        <AppSidebar />
-        <main className="flex-1 overflow-auto bg-zinc-50/50 dark:bg-zinc-950/50 relative">
-          <ViewerContainer
-            initialContent={DEFAULT_CONTENT.html}
-            initialFormat="html"
-          />
-        </main>
-      </div>
-    </SidebarProvider>
+    <div className="h-full overflow-auto bg-zinc-50/50 dark:bg-zinc-950/50 relative">
+      <ViewerContainer
+        initialContent={DEFAULT_CONTENT.html}
+        initialFormat="html"
+      />
+    </div>
   );
 }
diff --git a/app/convert/epoch/page.tsx b/components/convert/ConvertPage.tsx
similarity index 80%
rename from app/convert/epoch/page.tsx
rename to components/convert/ConvertPage.tsx
index 47d3b53..3a9d76c 100644
--- a/app/convert/epoch/page.tsx
+++ b/components/convert/ConvertPage.tsx
@@ -2,9 +2,9 @@
 
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { AppSidebar } from "@/components/layout/app-sidebar";
-import { EpochConverter } from "@/components/convert/epoch-converter";
+import { EpochConverter } from "./epoch-converter";
 
-export default function EpochConverterPage() {
+export function ConvertPage() {
     return (
         <SidebarProvider>
             <div className="flex w-full h-full overflow-hidden">
diff --git a/components/convert/epoch-converter.tsx b/components/convert/epoch-converter.tsx
index f338158..fd46eee 100644
--- a/components/convert/epoch-converter.tsx
+++ b/components/convert/epoch-converter.tsx
@@ -50,23 +50,13 @@ function toLocalDatetimeString(date: Date): string {
 type CopiedField = string | null;
 
 export function EpochConverter() {
-    // Epoch -> Date
+    // State
     const [epochInput, setEpochInput] = useState("");
-    const [parsedDate, setParsedDate] = useState<Date | null>(null);
-    const [epochError, setEpochError] = useState("");
-    const [isMillis, setIsMillis] = useState(false);
-
-    // Date -> Epoch
     const [dateInput, setDateInput] = useState("");
-    const [dateEpochSeconds, setDateEpochSeconds] = useState<number | null>(null);
-    const [dateEpochMillis, setDateEpochMillis] = useState<number | null>(null);
-
-    // Live clock
-    const [liveEpoch, setLiveEpoch] = useState(Math.floor(Date.now() / 1000));
-
-    // Copy feedback
+    const [liveEpoch, setLiveEpoch] = useState(() => Math.floor(Date.now() / 1000));
     const [copied, setCopied] = useState<CopiedField>(null);
 
+    // Live clock effect
     useEffect(() => {
         const interval = setInterval(() => {
             setLiveEpoch(Math.floor(Date.now() / 1000));
@@ -80,48 +70,38 @@ export function EpochConverter() {
         setTimeout(() => setCopied(null), 1500);
     }, []);
 
-    // Parse epoch input
-    useEffect(() => {
+    // Derived from epochInput
+    const { parsedDate, epochError, isMillis } = React.useMemo(() => {
         if (!epochInput.trim()) {
-            setParsedDate(null);
-            setEpochError("");
-            return;
+            return { parsedDate: null, epochError: "", isMillis: false };
         }
         const num = Number(epochInput.trim());
         if (isNaN(num)) {
-            setEpochError("Enter a valid number");
-            setParsedDate(null);
-            return;
+            return { parsedDate: null, epochError: "Enter a valid number", isMillis: false };
         }
         // Auto-detect: if > 10 digits, treat as milliseconds
         const isMs = epochInput.trim().length > 10;
-        setIsMillis(isMs);
         const ms = isMs ? num : num * 1000;
         const d = new Date(ms);
         if (isNaN(d.getTime())) {
-            setEpochError("Invalid timestamp");
-            setParsedDate(null);
-            return;
+            return { parsedDate: null, epochError: "Invalid timestamp", isMillis: isMs };
         }
-        setEpochError("");
-        setParsedDate(d);
+        return { parsedDate: d, epochError: "", isMillis: isMs };
     }, [epochInput]);
 
-    // Parse date input
-    useEffect(() => {
+    // Derived from dateInput
+    const { dateEpochSeconds, dateEpochMillis } = React.useMemo(() => {
         if (!dateInput) {
-            setDateEpochSeconds(null);
-            setDateEpochMillis(null);
-            return;
+            return { dateEpochSeconds: null, dateEpochMillis: null };
         }
         const d = new Date(dateInput);
         if (isNaN(d.getTime())) {
-            setDateEpochSeconds(null);
-            setDateEpochMillis(null);
-            return;
+            return { dateEpochSeconds: null, dateEpochMillis: null };
         }
-        setDateEpochSeconds(Math.floor(d.getTime() / 1000));
-        setDateEpochMillis(d.getTime());
+        return { 
+            dateEpochSeconds: Math.floor(d.getTime() / 1000), 
+            dateEpochMillis: d.getTime() 
+        };
     }, [dateInput]);
 
     const setNow = () => {
diff --git a/components/convert/index.ts b/components/convert/index.ts
new file mode 100644
index 0000000..1573b8a
--- /dev/null
+++ b/components/convert/index.ts
@@ -0,0 +1 @@
+export * from "./ConvertPage";
diff --git a/components/docs/DocsPage.tsx b/components/docs/DocsPage.tsx
new file mode 100644
index 0000000..8c62af0
--- /dev/null
+++ b/components/docs/DocsPage.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import React from 'react';
+import {
+    Book,
+    Zap,
+    Shield,
+    Globe,
+    Braces,
+    Box,
+    Terminal,
+    Cpu
+} from 'lucide-react';
+
+import { Footer } from "@/components/landing/footer";
+
+const DOCS_SECTIONS = [
+    {
+        title: "Getting Started",
+        items: [
+            {
+                icon: Zap,
+                label: "Introduction",
+                content: "Web Utils is a high-performance, universal file editor and code previewer designed for modern developers. It allows you to instantly edit, visualize, and format multiple data structures with zero setup."
+            },
+            {
+                icon: Terminal,
+                label: "Quick Start",
+                content: "Navigate to the /view route, paste your code into the editor, and watch as it instantly renders in the preview pane. Use the sidebar to switch between output formats."
+            }
+        ]
+    },
+    {
+        title: "Supported Formats",
+        items: [
+            {
+                icon: Globe,
+                label: "HTML & Bootstrap",
+                content: "Full support for HTML5 and Bootstrap 5.3. Renders code in a safe, sandboxed iframe environment."
+            },
+            {
+                icon: Braces,
+                label: "JSON & YAML",
+                content: "Automatic syntax validation and beautification for structured data. Error highlighting for invalid syntax."
+            },
+            {
+                icon: Box,
+                label: "React (JSX/TSX)",
+                content: "Premium syntax highlighting for React components. Perfect for reviewing component structures."
+            }
+        ]
+    },
+    {
+        title: "Advanced Features",
+        items: [
+            {
+                icon: Cpu,
+                label: "Performance",
+                content: "Built on Next.js 15 for lightning-fast route transitions and optimized rendering cycles."
+            },
+            {
+                icon: Shield,
+                label: "Security",
+                content: "All previews are sandboxed to prevent script execution from impacting the main application window."
+            }
+        ]
+    }
+];
+
+export function DocsPage() {
+    return (
+        <div className="h-full overflow-y-auto bg-white dark:bg-zinc-950 px-4 py-20 scrollbar-none">
+            <div className="max-w-4xl mx-auto">
+                <header className="mb-20 text-center">
+                    <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-500 text-xs font-bold uppercase tracking-widest mb-6">
+                        < Book className="size-3" />
+                        <span>Documentation</span>
+                    </div>
+                    <h1 className="text-4xl md:text-5xl font-extrabold tracking-tight mb-6 bg-clip-text text-transparent bg-gradient-to-br from-zinc-900 via-zinc-700 to-zinc-500 dark:from-white dark:via-zinc-300 dark:to-zinc-500">
+                        Everything you need to <br /> scale your workflow.
+                    </h1>
+                    <p className="text-lg text-zinc-600 dark:text-zinc-400">
+                        A comprehensive guide to using and extending the Web Utils platform.
+                    </p>
+                </header>
+
+                <div className="space-y-20">
+                    {DOCS_SECTIONS.map((section) => (
+                        <section key={section.title}>
+                            <h2 className="text-xl font-bold mb-8 border-b border-zinc-100 dark:border-zinc-800 pb-4 flex items-center gap-3">
+                                <span className="size-1.5 rounded-full bg-indigo-500" />
+                                {section.title}
+                            </h2>
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                                {section.items.map((item) => (
+                                    <div key={item.label} className="group p-6 rounded-2xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50/30 dark:bg-zinc-900/10 hover:bg-white dark:hover:bg-zinc-900 hover:shadow-xl transition-all duration-300">
+                                        <div className="size-10 rounded-xl bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 flex items-center justify-center text-zinc-900 dark:text-white mb-5 transition-transform group-hover:scale-110 shadow-sm">
+                                            <item.icon className="size-5" />
+                                        </div>
+                                        <h3 className="font-bold text-lg mb-3 dark:text-zinc-100">{item.label}</h3>
+                                        <p className="text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed">
+                                            {item.content}
+                                        </p>
+                                    </div>
+                                ))}
+                            </div>
+                        </section>
+                    ))}
+                </div>
+
+                {/* Footer info */}
+                <div className="mt-32 p-8 rounded-3xl bg-gradient-to-br from-indigo-600 to-purple-700 text-white text-center shadow-2xl shadow-indigo-500/20 mb-20">
+                    <h2 className="text-2xl font-bold mb-4">Ready to get started?</h2>
+                    <p className="text-indigo-100 mb-8 max-w-lg mx-auto">
+                        Join thousands of developers using Web Utils to edit and preview their code more efficiently.
+                    </p>
+                    <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+                        <button className="px-8 py-3 bg-white text-indigo-600 font-bold rounded-xl hover:bg-indigo-50 transition-colors shadow-lg">
+                            Launch App
+                        </button>
+                        <button className="px-8 py-3 bg-indigo-500/20 text-white border border-white/20 font-bold rounded-xl hover:bg-indigo-500/30 transition-colors">
+                            Star on GitHub
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <Footer />
+        </div>
+    );
+}
diff --git a/components/docs/index.ts b/components/docs/index.ts
new file mode 100644
index 0000000..bf3ef9b
--- /dev/null
+++ b/components/docs/index.ts
@@ -0,0 +1 @@
+export * from "./DocsPage";
diff --git a/components/editor/EditorPage.tsx b/components/editor/EditorPage.tsx
new file mode 100644
index 0000000..166a4df
--- /dev/null
+++ b/components/editor/EditorPage.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { EditorContainer } from "./editor-container";
+import { DEFAULT_CONTENT } from "@/data/default-content";
+
+export function EditorPage() {
+    return (
+        <div className="flex w-full h-full overflow-hidden bg-background">
+            <main className="flex-1 overflow-hidden relative">
+                <EditorContainer
+                    initialContent={DEFAULT_CONTENT.html}
+                    initialFormat="html"
+                />
+            </main>
+        </div>
+    );
+}
diff --git a/components/editor/index.ts b/components/editor/index.ts
new file mode 100644
index 0000000..5d49c4a
--- /dev/null
+++ b/components/editor/index.ts
@@ -0,0 +1 @@
+export * from "./EditorPage";
diff --git a/components/features/json/format.ts b/components/features/json/format.ts
new file mode 100644
index 0000000..501465f
--- /dev/null
+++ b/components/features/json/format.ts
@@ -0,0 +1,33 @@
+/**
+ * JSON formatting and validation logic
+ */
+
+export function formatJson(jsonString: string, tabSize: number = 2): string {
+    try {
+        const obj = JSON.parse(jsonString);
+        return JSON.stringify(obj, null, tabSize);
+    } catch (error) {
+        console.error(`Error`,error);
+        throw new Error("Invalid JSON string");
+    }
+}
+
+export function validateJson(jsonString: string): { isValid: boolean; error?: string } {
+    try {
+        JSON.parse(jsonString);
+        return { isValid: true };
+    } catch (error) {
+        console.error(`Error`,error);
+        return { isValid: false, error: error instanceof Error ? error.message : "Unknown error" };
+    }
+}
+
+export function minifyJson(jsonString: string): string {
+    try {
+        const obj = JSON.parse(jsonString);
+        return JSON.stringify(obj);
+    } catch (error : unknown) {
+        console.error(`Error`,error);
+        throw new Error("Invalid JSON string");
+    }
+}
diff --git a/components/features/time/epoch.ts b/components/features/time/epoch.ts
new file mode 100644
index 0000000..8b9de9c
--- /dev/null
+++ b/components/features/time/epoch.ts
@@ -0,0 +1,33 @@
+/**
+ * Epoch and Date conversion logic
+ */
+
+export function epochToDate(epoch: number): Date {
+    // Detect if seconds or milliseconds
+    const ms = epoch < 10000000000 ? epoch * 1000 : epoch;
+    return new Date(ms);
+}
+
+export function dateToEpoch(date: Date, unit: 's' | 'ms' = 's'): number {
+    const ms = date.getTime();
+    return unit === 's' ? Math.floor(ms / 1000) : ms;
+}
+
+export function formatRelative(date: Date): string {
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    const seconds = Math.floor(diff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+
+    if (days > 0) return `${days} day${days > 1 ? 's' : ''} ago`;
+    if (hours > 0) return `${hours} hour${hours > 1 ? 's' : ''} ago`;
+    if (minutes > 0) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
+    return "just now";
+}
+
+export function isValidEpoch(val: unknown): boolean {
+    const num = Number(val);
+    return !isNaN(num) && num > 0;
+}
diff --git a/components/features/time/timezone.ts b/components/features/time/timezone.ts
new file mode 100644
index 0000000..660ef8d
--- /dev/null
+++ b/components/features/time/timezone.ts
@@ -0,0 +1,20 @@
+/**
+ * Timezone conversion logic
+ */
+
+export function convertTimezone(date: Date, toTz: string): string {
+    return date.toLocaleString('en-US', { timeZone: toTz });
+}
+
+export const COMMON_TIMEZONES = [
+    { label: "UTC", value: "UTC" },
+    { label: "India (IST)", value: "Asia/Kolkata" },
+    { label: "New York (EST/EDT)", value: "America/New_York" },
+    { label: "London (GMT/BST)", value: "Europe/London" },
+    { label: "Tokyo (JST)", value: "Asia/Tokyo" },
+    { label: "Pacific (PST/PDT)", value: "America/Los_Angeles" }
+];
+
+export function getSystemTimezone(): string {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone;
+}
diff --git a/components/ide/IDEPage.tsx b/components/ide/IDEPage.tsx
new file mode 100644
index 0000000..88cd5c3
--- /dev/null
+++ b/components/ide/IDEPage.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import React from 'react';
+import { Blocks, Rocket, Hammer, Construction } from 'lucide-react';
+
+export function IDEPage() {
+    return (
+        <div className="flex w-full h-full overflow-hidden bg-zinc-950 flex-col items-center justify-center relative p-8 text-center">
+            {/* Background Decorative Elements */}
+            <div className="absolute top-1/4 left-1/4 size-96 bg-indigo-500/10 blur-[120px] rounded-full animate-pulse" />
+            <div className="absolute bottom-1/4 right-1/4 size-96 bg-purple-500/10 blur-[120px] rounded-full animate-pulse delay-700" />
+
+            <div className="relative z-10 max-w-2xl">
+                <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-sm font-bold uppercase tracking-widest mb-8 animate-bounce">
+                    <Construction className="size-4" />
+                    <span>Under Development</span>
+                </div>
+
+                <h1 className="text-5xl md:text-7xl font-black text-white mb-6 tracking-tighter">
+                    The Next-Gen <br />
+                    <span className="bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400">Cloud IDE</span>
+                </h1>
+
+                <p className="text-zinc-400 text-lg md:text-xl mb-12 leading-relaxed max-w-xl mx-auto font-medium">
+                    Building a browser-based client WASM type build IDE with real-time collaboration,
+                    WASM-powered runtimes, and deep integration.
+                </p>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+                    <div className="p-6 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-sm transition-all hover:bg-white/10 hover:border-indigo-500/30">
+                        <Rocket className="size-8 text-indigo-400 mb-4 mx-auto" />
+                        <h3 className="text-white font-bold text-sm mb-2">Fast Runtime</h3>
+                        <p className="text-zinc-500 text-xs uppercase tracking-wider font-black">WASM Powered</p>
+                    </div>
+                    <div className="p-6 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-sm transition-all hover:bg-white/10 hover:border-purple-500/30">
+                        <Blocks className="size-8 text-purple-400 mb-4 mx-auto" />
+                        <h3 className="text-white font-bold text-sm mb-2">Extensions</h3>
+                        <p className="text-zinc-500 text-xs uppercase tracking-wider font-black">Rich Ecosystem</p>
+                    </div>
+                    <div className="p-6 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-sm transition-all hover:bg-white/10 hover:border-pink-500/30">
+                        <Hammer className="size-8 text-pink-400 mb-4 mx-auto" />
+                        <h3 className="text-white font-bold text-sm mb-2">Cloud Build</h3>
+                        <p className="text-zinc-500 text-xs uppercase tracking-wider font-black">Instant Deploy</p>
+                    </div>
+                </div>
+
+                <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+                    <button className="px-10 py-4 bg-indigo-600 hover:bg-indigo-700 text-white font-black rounded-2xl transition-all shadow-xl shadow-indigo-500/20 active:scale-95">
+                        Get Early Access
+                    </button>
+                    <button className="px-10 py-4 bg-white/5 hover:bg-white/10 text-white font-black rounded-2xl border border-white/10 transition-all active:scale-95">
+                        Star Project
+                    </button>
+                </div>
+            </div>
+
+        </div>
+    );
+}
diff --git a/components/ide/index.ts b/components/ide/index.ts
new file mode 100644
index 0000000..a406606
--- /dev/null
+++ b/components/ide/index.ts
@@ -0,0 +1 @@
+export * from "./IDEPage";
diff --git a/components/json/tree-viewer.tsx b/components/json/tree-viewer.tsx
new file mode 100644
index 0000000..58963f1
--- /dev/null
+++ b/components/json/tree-viewer.tsx
@@ -0,0 +1,124 @@
+ "use client";
+
+import React, { useState } from 'react';
+import { 
+    ChevronRight, 
+    ChevronDown, 
+    Copy,
+} from 'lucide-react';
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { toast } from "sonner";
+
+const JsonNode = ({ data, depth = 0, path = "", label }: { data: unknown, depth?: number, path: string, label?: string }) => {
+    const [isExpanded, setIsExpanded] = useState(depth < 2);
+    const type = typeof data;
+    const isObject = data !== null && type === 'object';
+    const isArray = Array.isArray(data);
+
+    const toggle = () => setIsExpanded(!isExpanded);
+
+    const copyPath = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        navigator.clipboard.writeText(path);
+        toast.success(`Path copied: ${path}`);
+    };
+
+    if (isObject) {
+        const objData = data as Record<string, unknown>;
+        const keys = Object.keys(objData);
+        const isEmpty = keys.length === 0;
+
+        return (
+            <div className="space-y-1">
+                <div 
+                    className="flex items-center gap-1.5 group cursor-pointer hover:bg-zinc-100 dark:hover:bg-white/5 px-2 py-0.5 rounded transition-colors"
+                    onClick={toggle}
+                >
+                    <div className="flex items-center gap-0.5">
+                        {!isEmpty && (
+                            isExpanded ? <ChevronDown className="size-3.5 text-zinc-400" /> : <ChevronRight className="size-3.5 text-zinc-400" />
+                        )}
+                        {isEmpty && <div className="size-3.5" />}
+                    </div>
+                    
+                    {label && (
+                        <span className="text-indigo-600 dark:text-indigo-400 font-bold text-xs">{label}:</span>
+                    )}
+                    
+                    <span className="text-zinc-400 text-[10px] font-mono">
+                        {isArray ? `Array[${keys.length}]` : `Object{${keys.length}}`}
+                    </span>
+
+                    <button 
+                        onClick={copyPath}
+                        className="opacity-0 group-hover:opacity-100 p-1 hover:text-indigo-500 transition-opacity"
+                        title="Copy property path"
+                    >
+                        <Copy className="size-3" />
+                    </button>
+                </div>
+
+                {isExpanded && !isEmpty && (
+                    <div className="ml-4 pl-3 border-l border-zinc-200 dark:border-zinc-800 space-y-1">
+                        {keys.map(key => (
+                            <JsonNode 
+                                key={key} 
+                                data={objData[key]} 
+                                depth={depth + 1} 
+                                path={path ? `${path}.${key}` : key} 
+                                label={key}
+                            />
+                        ))}
+                    </div>
+                )}
+            </div>
+        );
+    }
+
+    const numValue = Number(data);
+
+    // Primitive values
+    return (
+        <div className="flex items-center gap-2 px-2 py-0.5 group hover:bg-zinc-100 dark:hover:bg-white/5 rounded transition-colors">
+            <div className="size-3.5" />
+            {label && (
+                <span className="text-zinc-900 dark:text-zinc-200 font-medium text-xs">{label}:</span>
+            )}
+            <span className={cn(
+                "text-xs font-mono break-all",
+                type === 'string' ? "text-emerald-600 dark:text-emerald-400" :
+                type === 'number' ? "text-blue-600 dark:text-blue-400" :
+                type === 'boolean' ? "text-amber-600 dark:text-amber-400" :
+                "text-zinc-500"
+            )}>
+                {type === 'string' ? `"${data}"` : String(data)}
+            </span>
+            
+            {/* Special "Smart Detection" for timestamps (Epoch) */}
+            {type === 'number' && numValue > 1000000000 && numValue < 3000000000 && (
+                <Badge variant="outline" className="text-[9px] bg-indigo-500/10 text-indigo-500 border-indigo-500/20 py-0 h-4 px-1.5 animate-pulse cursor-pointer">
+                    Epoch Detected
+                </Badge>
+            )}
+
+            <button 
+                onClick={copyPath}
+                className="opacity-0 group-hover:opacity-100 p-1 hover:text-indigo-500 transition-opacity"
+                title="Copy property path"
+            >
+                <Copy className="size-3" />
+            </button>
+        </div>
+    );
+};
+
+export function JsonTreeViewer({ data }: { data: unknown }) {
+    if (!data) return <div className="p-8 text-center text-zinc-500">No JSON data to display</div>;
+
+    return (
+        <div className="p-4 font-mono select-text bg-white dark:bg-zinc-950 rounded-2xl border border-zinc-200 dark:border-zinc-800">
+            <JsonNode data={data} path="" />
+        </div>
+    );
+}
diff --git a/components/layout/client-layout.tsx b/components/layout/client-layout.tsx
new file mode 100644
index 0000000..9b1df9a
--- /dev/null
+++ b/components/layout/client-layout.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import React, { useState } from "react";
+import { SidebarProvider } from "@/components/ui/sidebar";
+import { AppSidebar } from "@/components/layout/app-sidebar";
+import { SplashScreen } from "@/components/layout/splash-screen";
+import { CommandMenu } from "@/components/layout/command-menu";
+import { Navbar } from "@/components/layout/navbar";
+
+export function ClientLayout({ children }: { children: React.ReactNode }) {
+  const [showSplash, setShowSplash] = useState(() => {
+    if (typeof window !== "undefined") {
+      return !localStorage.getItem("hasSeenSplash_v1");
+    }
+    return true;
+  });
+
+  const handleSplashComplete = () => {
+    setShowSplash(false);
+    localStorage.setItem("hasSeenSplash_v1", "true");
+  };
+
+  return (
+    <SidebarProvider>
+      {showSplash && <SplashScreen onComplete={handleSplashComplete} />}
+      <div className={`transition-opacity duration-1000 flex flex-col h-screen overflow-hidden bg-background ${showSplash ? "opacity-0" : "opacity-100"}`}>
+        <Navbar />
+        <CommandMenu />
+        <div className="flex flex-1 pt-12 overflow-hidden overflow-x-visible">
+          <AppSidebar />
+          <div className="flex-1 h-full overflow-hidden relative">
+            {children}
+          </div>
+        </div>
+      </div>
+    </SidebarProvider>
+  );
+}
diff --git a/components/layout/command-menu.tsx b/components/layout/command-menu.tsx
new file mode 100644
index 0000000..64440ea
--- /dev/null
+++ b/components/layout/command-menu.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import * as React from "react";
+import {
+    Settings,
+    User,
+} from "lucide-react";
+import { useRouter } from "next/navigation";
+
+import {
+    CommandDialog,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+    CommandSeparator,
+    CommandShortcut,
+} from "@/components/ui/command";
+import { TOOLS, type Tool } from "@/lib/constants/tools";
+
+export function CommandMenu() {
+    const [open, setOpen] = React.useState(false);
+    const router = useRouter();
+
+    React.useEffect(() => {
+        const down = (e: KeyboardEvent) => {
+            if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                setOpen((open) => !open);
+            }
+        };
+
+        document.addEventListener("keydown", down);
+        return () => document.removeEventListener("keydown", down);
+    }, []);
+
+    const runCommand = React.useCallback((command: () => void) => {
+        setOpen(false);
+        command();
+    }, []);
+
+    return (
+        <CommandDialog open={open} onOpenChange={setOpen}>
+            <CommandInput placeholder="Type a command or search tools..." />
+            <CommandList>
+                <CommandEmpty>No results found.</CommandEmpty>
+                <CommandGroup heading="Tools">
+                    {TOOLS.map((tool: Tool) => (
+                        <CommandItem
+                            key={tool.id}
+                            onSelect={() => runCommand(() => router.push(tool.href))}
+                        >
+                            <tool.icon className="mr-2 h-4 w-4" />
+                            <span>{tool.name}</span>
+                        </CommandItem>
+                    ))}
+                </CommandGroup>
+                <CommandSeparator />
+                <CommandGroup heading="Settings">
+                    <CommandItem onSelect={() => runCommand(() => {})}>
+                        <User className="mr-2 h-4 w-4" />
+                        <span>Profile</span>
+                        <CommandShortcut>⌘P</CommandShortcut>
+                    </CommandItem>
+                    <CommandItem onSelect={() => runCommand(() => {})}>
+                        <Settings className="mr-2 h-4 w-4" />
+                        <span>Settings</span>
+                        <CommandShortcut>⌘S</CommandShortcut>
+                    </CommandItem>
+                </CommandGroup>
+            </CommandList>
+        </CommandDialog>
+    );
+}
diff --git a/components/layout/ide-workspace.tsx b/components/layout/ide-workspace.tsx
new file mode 100644
index 0000000..f2dc342
--- /dev/null
+++ b/components/layout/ide-workspace.tsx
@@ -0,0 +1,269 @@
+"use client";
+
+import React, { useState } from 'react';
+import Editor from '@monaco-editor/react';
+import { 
+    Panel, 
+    Group as PanelGroup, 
+    Separator as PanelResizeHandle 
+} from 'react-resizable-panels';
+import { 
+    Play, 
+    Save, 
+    RotateCcw, 
+    Eye, 
+    Braces, 
+    Clock, 
+    Terminal as TerminalIcon,
+    Globe
+} from 'lucide-react';
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { JsonTreeViewer } from "@/components/json/tree-viewer";
+import { useTheme } from "next-themes";
+
+export function IdeWorkspace() {
+    const [code, setCode] = useState('{\n  "name": "Web Utils Pro",\n  "status": "Ready",\n  "timestamp": 1711206600\n}');
+    const [language, setLanguage] = useState('json');
+    const { theme } = useTheme();
+
+    const [terminalInput, setTerminalInput] = useState('');
+    const [terminalOutput, setTerminalOutput] = useState<string[]>([
+        'system: ide workspace activated',
+        'system: terminal ready'
+    ]);
+
+    const handleTerminalSubmit = () => {
+        if (!terminalInput.trim()) return;
+        
+        const cmd = terminalInput.toLowerCase();
+        const newOutput = [...terminalOutput, `$${terminalInput}`];
+
+        switch(cmd) {
+            case 'help':
+                newOutput.push('available commands:');
+                newOutput.push(' - clear: clear the terminal');
+                newOutput.push(' - json-format: format the editor content');
+                newOutput.push(' - time: show current epoch');
+                newOutput.push(' - build: simulate build process');
+                break;
+            case 'clear':
+                setTerminalOutput([]);
+                setTerminalInput('');
+                return;
+            case 'json-format':
+                try {
+                    const formatted = JSON.stringify(JSON.parse(code), null, 2);
+                    setCode(formatted);
+                    newOutput.push('success: json formatted');
+                } catch(e: unknown) {
+                    console.error('Error : ', e);
+                    newOutput.push(`error: invalid json `);
+                }
+                break;
+            case 'time':
+                newOutput.push(`current epoch: ${Math.floor(Date.now() / 1000)}`);
+                break;
+            case 'build':
+                newOutput.push('build: starting optimization...');
+                newOutput.push('build: generated 18 static pages');
+                newOutput.push('build: success in 234ms');
+                break;
+            default:
+                newOutput.push(`error: command not found: ${cmd}`);
+        }
+
+        setTerminalOutput(newOutput);
+        setTerminalInput('');
+    };
+
+    const handleEditorChange = (value: string | undefined) => {
+        if (value) setCode(value);
+    };
+
+    let parsedJson = null;
+    try {
+        parsedJson = JSON.parse(code);
+    } catch (e: unknown) {
+        console.error('Error : ', e);
+    }
+
+    return (
+        <div className="h-full flex flex-col bg-zinc-50 dark:bg-zinc-950 overflow-hidden">
+            {/* IDE Toolbar */}
+            <div className="h-12 border-b border-zinc-200 dark:border-zinc-800 flex items-center justify-between px-4 bg-white dark:bg-zinc-900/50 backdrop-blur-md">
+                <div className="flex items-center gap-4">
+                    <div className="flex items-center gap-2 px-3 py-1 bg-zinc-100 dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
+                        <select 
+                            value={language} 
+                            onChange={(e) => setLanguage(e.target.value)}
+                            className="bg-transparent text-xs font-bold text-indigo-600 dark:text-indigo-400 outline-none cursor-pointer"
+                        >
+                            <option value="json">scratchpad.json</option>
+                            <option value="html">index.html</option>
+                            <option value="javascript">main.js</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                    <Button variant="ghost" size="sm" className="gap-2 text-xs font-bold">
+                        <RotateCcw className="size-3.5" /> Reset
+                    </Button>
+                    <Button size="sm" className="gap-2 text-xs font-bold bg-indigo-600 hover:bg-indigo-700 shadow-lg shadow-indigo-500/20">
+                        <Save className="size-3.5" /> Save
+                    </Button>
+                    <Button size="sm" variant="outline" className="gap-2 text-xs font-bold border-emerald-500/30 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/10">
+                        <Play className="size-3.5" /> Run
+                    </Button>
+                </div>
+            </div>
+
+            {/* Main Workspace */}
+            <PanelGroup orientation="horizontal" className="flex-1">
+                {/* Editor Panel */}
+                <Panel defaultSize={60} minSize={30}>
+                    <div className="h-full relative group">
+                        <Editor
+                            height="100%"
+                            language={language}
+                            value={code}
+                            theme={theme === 'dark' ? 'vs-dark' : 'light'}
+                            onChange={handleEditorChange}
+                            options={{
+                                minimap: { enabled: false },
+                                fontSize: 14,
+                                fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
+                                fontWeight: "500",
+                                padding: { top: 20 },
+                                roundedSelection: true,
+                                cursorSmoothCaretAnimation: "on",
+                                smoothScrolling: true,
+                                contextmenu: true,
+                                scrollBeyondLastLine: false,
+                                automaticLayout: true,
+                            }}
+                        />
+                    </div>
+                </Panel>
+
+                <PanelResizeHandle className="w-1.5 bg-zinc-100 dark:bg-zinc-900 hover:bg-indigo-500/20 transition-colors border-x border-zinc-200 dark:border-zinc-800" />
+
+                {/* Right Panel (Tools & Preview) */}
+                <Panel defaultSize={40} minSize={20}>
+                    <div className="h-full bg-white dark:bg-zinc-900 flex flex-col overflow-hidden">
+                        <Tabs defaultValue="preview" className="h-full flex flex-col">
+                            <div className="px-2 border-b border-zinc-100 dark:border-zinc-800/50 bg-zinc-50/50 dark:bg-zinc-950/20">
+                                <TabsList className="bg-transparent h-12 w-full justify-start gap-2 p-0">
+                                    <TabsTrigger value="preview" className="data-[state=active]:bg-transparent data-[state=active]:border-indigo-600 border-b-2 border-transparent rounded-none h-12 px-4 gap-2 font-bold text-xs uppercase tracking-wider transition-all">
+                                        <Eye className="size-3.5" /> Preview
+                                    </TabsTrigger>
+                                    <TabsTrigger value="json" className="data-[state=active]:bg-transparent data-[state=active]:border-indigo-600 border-b-2 border-transparent rounded-none h-12 px-4 gap-2 font-bold text-xs uppercase tracking-wider transition-all">
+                                        <Braces className="size-3.5" /> JSON Tree
+                                    </TabsTrigger>
+                                    <TabsTrigger value="time" className="data-[state=active]:bg-transparent data-[state=active]:border-indigo-600 border-b-2 border-transparent rounded-none h-12 px-4 gap-2 font-bold text-xs uppercase tracking-wider transition-all">
+                                        <Clock className="size-3.5" /> Time
+                                    </TabsTrigger>
+                                    <TabsTrigger value="terminal" className="data-[state=active]:bg-transparent data-[state=active]:border-indigo-600 border-b-2 border-transparent rounded-none h-12 px-4 gap-2 font-bold text-xs uppercase tracking-wider transition-all">
+                                        <TerminalIcon className="size-3.5" /> Terminal
+                                    </TabsTrigger>
+                                    <TabsTrigger value="console" className="ml-auto data-[state=active]:bg-transparent data-[state=active]:border-indigo-600 border-b-2 border-transparent rounded-none h-12 px-4 gap-2 font-bold text-xs uppercase tracking-wider transition-all">
+                                        <Eye className="size-3.5" /> Console
+                                    </TabsTrigger>
+                                </TabsList>
+                            </div>
+
+                            <div className="flex-1 overflow-auto p-4 custom-scrollbar">
+                                <TabsContent value="preview" className="h-full m-0">
+                                    {language === 'html' ? (
+                                        <div className="h-full rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white overflow-hidden shadow-sm">
+                                            <iframe 
+                                                title="Preview"
+                                                srcDoc={code}
+                                                className="w-full h-full border-none"
+                                                sandbox="allow-scripts"
+                                            />
+                                        </div>
+                                    ) : (
+                                        <div className="h-full rounded-2xl border-2 border-dashed border-zinc-100 dark:border-zinc-800 flex items-center justify-center text-zinc-400 font-medium bg-zinc-50/50 dark:bg-zinc-950/50">
+                                            <div className="flex flex-col items-center gap-2">
+                                                <Globe className="size-8 opacity-20" />
+                                                <span>HTML Preview Available</span>
+                                            </div>
+                                        </div>
+                                    )}
+                                </TabsContent>
+                                <TabsContent value="json" className="h-full m-0">
+                                    <JsonTreeViewer data={parsedJson} />
+                                </TabsContent>
+                                <TabsContent value="time" className="h-full m-0">
+                                    <div className="p-4 space-y-4">
+                                        <div className="p-4 rounded-xl bg-indigo-500/5 border border-indigo-500/10 space-y-2">
+                                            <h4 className="text-[10px] font-black uppercase text-indigo-500 tracking-widest">Selected Timestamp</h4>
+                                            <p className="text-2xl font-black text-zinc-900 dark:text-white">1711206600</p>
+                                            <div className="h-px bg-indigo-500/10 my-2" />
+                                            <div className="grid grid-cols-2 gap-4">
+                                                <div>
+                                                    <span className="text-[9px] font-bold text-zinc-400 uppercase">Local Time</span>
+                                                    <p className="text-xs font-bold text-zinc-600 dark:text-zinc-300">2024-03-23 20:30:00</p>
+                                                </div>
+                                                <div>
+                                                    <span className="text-[9px] font-bold text-zinc-400 uppercase">UTC Time</span>
+                                                    <p className="text-xs font-bold text-zinc-600 dark:text-zinc-300">2024-03-23 15:00:00</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </TabsContent>
+                                <TabsContent value="terminal" className="h-full m-0 bg-zinc-950 rounded-xl overflow-hidden border border-zinc-800">
+                                    <div className="p-4 font-mono text-[13px] h-full flex flex-col gap-1 lowercase">
+                                        <div className="flex items-center gap-2 text-emerald-500 font-bold mb-2">
+                                            <div className="size-2 rounded-full bg-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.5)]" />
+                                            <span>web-utils-shell v1.0</span>
+                                        </div>
+                                        <p className="text-zinc-500 pb-2 border-b border-zinc-900 mb-2 tracking-tighter">type &apos;help&apos; to see available commands</p>
+                                        
+                                        <div className="flex-1 overflow-auto space-y-1 custom-scrollbar">
+                                            {terminalOutput.map((line, i) => (
+                                                <p key={i} className="text-zinc-400 break-all leading-tight">
+                                                    {line.startsWith('>') ? (
+                                                        <span className="text-indigo-400 font-bold mr-2 tracking-widest">{line.substring(0, 1)}</span>
+                                                    ) : line.startsWith('$') ? (
+                                                        <span className="text-emerald-500 font-bold mr-2">$</span>
+                                                    ) : null}
+                                                    {line.startsWith('>') || line.startsWith('$') ? line.substring(1) : line}
+                                                </p>
+                                            ))}
+                                        </div>
+
+                                        <div className="mt-2 flex items-center gap-2">
+                                            <span className="text-indigo-500 font-black">$</span>
+                                            <input 
+                                                className="bg-transparent border-none outline-none text-zinc-100 w-full" 
+                                                autoFocus 
+                                                spellCheck={false}
+                                                value={terminalInput}
+                                                onChange={(e) => setTerminalInput(e.target.value)}
+                                                onKeyDown={(e) => {
+                                                    if (e.key === 'Enter') handleTerminalSubmit();
+                                                }}
+                                                placeholder="run command..."
+                                            />
+                                        </div>
+                                    </div>
+                                </TabsContent>
+                                <TabsContent value="console" className="h-full m-0">
+                                    <div className="p-4 font-mono text-[11px] space-y-2 text-zinc-500">
+                                        <p><span className="text-emerald-500">[System]</span> Workspace initialized successfully.</p>
+                                        <p><span className="text-indigo-500">[Info]</span> Loaded language: {language}</p>
+                                        <p className="animate-pulse"><span className="text-zinc-400">_</span></p>
+                                    </div>
+                                </TabsContent>
+                            </div>
+                        </Tabs>
+                    </div>
+                </Panel>
+            </PanelGroup>
+        </div>
+    );
+}
diff --git a/components/layout/splash-screen.tsx b/components/layout/splash-screen.tsx
new file mode 100644
index 0000000..3c747a4
--- /dev/null
+++ b/components/layout/splash-screen.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import React from 'react';
+import { Layout, Zap } from 'lucide-react';
+import gsap from 'gsap';
+import { useGSAP } from '@gsap/react';
+
+export function SplashScreen({ onComplete }: { onComplete: () => void }) {
+    const container = React.useRef<HTMLDivElement>(null);
+    const logoRef = React.useRef<HTMLDivElement>(null);
+    const textRef = React.useRef<HTMLDivElement>(null);
+
+    useGSAP(() => {
+        const tl = gsap.timeline({
+            onComplete: () => {
+                gsap.to(container.current, {
+                    opacity: 0,
+                    duration: 0.8,
+                    ease: "power2.inOut",
+                    onComplete
+                });
+            }
+        });
+
+        tl.from(logoRef.current, {
+            scale: 0.5,
+            opacity: 0,
+            duration: 1,
+            ease: "back.out(1.7)"
+        })
+        .from(textRef.current, {
+            y: 20,
+            opacity: 0,
+            duration: 0.8,
+            ease: "power3.out"
+        }, "-=0.5")
+        .to(logoRef.current, {
+            rotation: 360,
+            duration: 2,
+            ease: "power1.inOut"
+        }, "-=0.2")
+        .to(container.current, {
+            delay: 0.5,
+            duration: 0.5
+        });
+
+    }, { scope: container });
+
+    return (
+        <div 
+            ref={container}
+            className="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-zinc-950 text-white select-none overflow-hidden"
+        >
+            <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-indigo-500/10 via-transparent to-transparent opacity-50" />
+            
+            <div className="relative flex flex-col items-center gap-6" style={{ perspective: "1000px" }}>
+                <div 
+                    ref={logoRef}
+                    className="size-24 rounded-3xl bg-indigo-600 flex items-center justify-center shadow-[0_0_50px_rgba(79,70,229,0.3)] border border-indigo-400/20"
+                >
+                    <Layout className="size-12" />
+                </div>
+                
+                <div ref={textRef} className="text-center space-y-2">
+                    <h1 className="text-4xl font-black tracking-tighter flex items-center gap-2">
+                        WEB UTILS <span className="text-indigo-500 italic">PRO</span>
+                        <Zap className="size-6 text-indigo-400 animate-pulse" />
+                    </h1>
+                    <p className="text-zinc-500 text-sm font-medium tracking-widest uppercase">
+                        The Ultimate Developer Workspace
+                    </p>
+                </div>
+            </div>
+
+            {/* Progress bar simulation */}
+            <div className="absolute bottom-20 w-48 h-1 bg-zinc-800 rounded-full overflow-hidden">
+                <style dangerouslySetInnerHTML={{ __html: `
+                    @keyframes loading {
+                        0% { width: 0%; transform: translateX(-100%); }
+                        50% { width: 50%; transform: translateX(0%); }
+                        100% { width: 100%; transform: translateX(100%); }
+                    }
+                ` }} />
+                <div className="h-full bg-indigo-600" style={{ animation: "loading 3s ease-in-out infinite" }} />
+            </div>
+        </div>
+    );
+}
diff --git a/components/layout/tool-shell.tsx b/components/layout/tool-shell.tsx
new file mode 100644
index 0000000..23fa0ad
--- /dev/null
+++ b/components/layout/tool-shell.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import React from 'react';
+import Link from 'next/link';
+import { 
+    ChevronRight, 
+    Home,
+} from "lucide-react";
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+
+interface ToolShellProps {
+    title: string;
+    description: string;
+    breadcrumbs: BreadcrumbItem[];
+    children: React.ReactNode;
+    sidebar?: React.ReactNode;
+}
+
+export function ToolShell({ 
+    title, 
+    description, 
+    breadcrumbs, 
+    children, 
+    sidebar 
+}: ToolShellProps) {
+    return (
+        <div className="flex flex-col h-full bg-zinc-50/50 dark:bg-zinc-950/50">
+            {/* Tool Header & Breadcrumbs */}
+            <div className="px-6 py-8 md:px-12 md:py-10 border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900/50 backdrop-blur-md">
+                <div className="max-w-7xl mx-auto space-y-6">
+                    {/* Breadcrumbs */}
+                    <nav className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-zinc-400">
+                        <Link href="/" className="hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors flex items-center gap-1">
+                            <Home className="size-3" /> Home
+                        </Link>
+                        {breadcrumbs.map((item, i) => (
+                            <React.Fragment key={i}>
+                                <ChevronRight className="size-3" />
+                                {item.href ? (
+                                    <Link href={item.href} className="hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors">
+                                        {item.label}
+                                    </Link>
+                                ) : (
+                                    <span className="text-zinc-600 dark:text-zinc-300">{item.label}</span>
+                                )}
+                            </React.Fragment>
+                        ))}
+                    </nav>
+
+                    {/* Title Area */}
+                    <div className="space-y-2">
+                        <h1 className="text-4xl md:text-5xl font-black tracking-tighter text-zinc-900 dark:text-white">
+                            {title}
+                        </h1>
+                        <p className="text-zinc-500 dark:text-zinc-400 font-medium max-w-3xl leading-relaxed">
+                            {description}
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            {/* Main Layout Area */}
+            <div className="flex-1 overflow-hidden relative">
+                <div className="h-full flex flex-col md:flex-row max-w-[1600px] mx-auto">
+                    {/* Parameters Sidebar (Optional) */}
+                    {sidebar && (
+                        <aside className="w-full md:w-80 border-r border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 overflow-y-auto p-6">
+                            {sidebar}
+                        </aside>
+                    )}
+
+                    {/* Content Canvas */}
+                    <main className="flex-1 overflow-auto p-6 md:p-10">
+                        <div className="max-w-6xl mx-auto">
+                            {children}
+                        </div>
+                    </main>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/components/shared/ads-card.tsx b/components/shared/ads-card.tsx
new file mode 100644
index 0000000..510728a
--- /dev/null
+++ b/components/shared/ads-card.tsx
@@ -0,0 +1,56 @@
+ "use client";
+
+import React from 'react';
+import { ExternalLink, Sparkles } from 'lucide-react';
+import { cn } from "@/lib/utils";
+
+interface AdsCardProps {
+    variant?: 'sidebar' | 'horizontal' | 'native';
+    className?: string;
+}
+
+export function AdsCard({ variant = 'sidebar', className }: AdsCardProps) {
+    return (
+        <div className={cn(
+            "relative overflow-hidden rounded-2xl border transition-all duration-300 group cursor-pointer",
+            variant === 'sidebar' ? "p-4 bg-zinc-50 dark:bg-zinc-900/50 border-zinc-200 dark:border-zinc-800 hover:border-indigo-500/30" :
+            variant === 'horizontal' ? "p-6 bg-gradient-to-r from-indigo-600 to-violet-600 text-white border-transparent shadow-xl shadow-indigo-500/20" :
+            "p-3 bg-white dark:bg-zinc-950 border-zinc-100 dark:border-zinc-900",
+            className
+        )}>
+            {/* Glossy overlay */}
+            <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
+            
+            <div className="relative flex flex-col gap-3">
+                <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border border-indigo-500/20">
+                        <Sparkles className="size-3" />
+                        <span className="text-[10px] font-black uppercase tracking-wider">Sponsor</span>
+                    </div>
+                    <ExternalLink className="size-3 text-zinc-400 group-hover:text-indigo-500 transition-colors" />
+                </div>
+
+                <div className="space-y-1">
+                    <h4 className={cn(
+                        "font-bold text-sm tracking-tight leading-tight",
+                        variant === 'horizontal' ? "text-white text-lg" : "text-zinc-900 dark:text-zinc-100"
+                    )}>
+                        {variant === 'horizontal' ? "Level up your workflow with Pro Features" : "Turbocharge your IDE"}
+                    </h4>
+                    <p className={cn(
+                        "text-xs line-clamp-2 leading-relaxed",
+                        variant === 'horizontal' ? "text-indigo-100" : "text-zinc-500 dark:text-zinc-400"
+                    )}>
+                        Join 10k+ developers using our advanced toolchain every day.
+                    </p>
+                </div>
+
+                {variant === 'horizontal' && (
+                    <button className="mt-2 px-6 py-2 bg-white text-indigo-600 rounded-xl font-black text-xs uppercase tracking-widest hover:scale-105 transition-transform active:scale-95">
+                        Upgrade Now
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/components/view/ViewPage.tsx b/components/view/ViewPage.tsx
new file mode 100644
index 0000000..726ecb7
--- /dev/null
+++ b/components/view/ViewPage.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { SidebarProvider } from "@/components/ui/sidebar";
+import { AppSidebar } from "@/components/layout/app-sidebar";
+import { ViewerContainer } from "./viewer-container";
+import { DEFAULT_CONTENT } from "@/data/default-content";
+
+export function ViewPage() {
+  return (
+    <SidebarProvider>
+      <div className="flex w-full h-full overflow-hidden">
+        <AppSidebar />
+        <main className="flex-1 overflow-auto bg-zinc-50/50 dark:bg-zinc-950/50 relative">
+          <ViewerContainer
+            initialContent={DEFAULT_CONTENT.html}
+            initialFormat="html"
+          />
+        </main>
+      </div>
+    </SidebarProvider>
+  );
+}
diff --git a/components/view/index.ts b/components/view/index.ts
new file mode 100644
index 0000000..8db8c1c
--- /dev/null
+++ b/components/view/index.ts
@@ -0,0 +1 @@
+export * from "./ViewPage";
diff --git a/lib/constants/tools.ts b/lib/constants/tools.ts
new file mode 100644
index 0000000..079f5d7
--- /dev/null
+++ b/lib/constants/tools.ts
@@ -0,0 +1,110 @@
+import { 
+    FileCode, 
+    Search, 
+    Rocket, 
+    Zap, 
+    Shield, 
+    Braces,
+    type LucideIcon
+} from 'lucide-react';
+
+export interface Tool {
+    id: string;
+    name: string;
+    description: string;
+    href: string;
+    category: string;
+    status: 'Available' | 'Coming Soon' | 'Beta';
+    icon: LucideIcon;
+}
+
+export interface Category {
+    id: string;
+    label: string;
+    description: string;
+}
+
+export const TOOL_CATEGORIES: Category[] = [
+    {
+        id: "core",
+        label: "Core Workspace",
+        description: "Primary development environments for coding and previewing"
+    },
+    {
+        id: "json",
+        label: "JSON Suite",
+        description: "A comprehensive set of tools to manipulate and format JSON data"
+    },
+    {
+        id: "time",
+        label: "Time & Date",
+        description: "Comprehensive epoch, timezone, and duration utilities"
+    },
+    {
+        id: "crypto",
+        label: "Cryptography",
+        description: "Hashing, encryption, and secure text processing"
+    },
+    {
+        id: "media",
+        label: "Media & Assets",
+        description: "Converters and optimizers for images, videos, and fonts"
+    }
+];
+
+export const TOOLS: Tool[] = [
+    {
+        id: "editor",
+        name: "Code Editor",
+        description: "Professional Monaco-based editor with syntax highlighting, auto-save, and formatting",
+        href: "/editor",
+        category: "core",
+        status: "Available",
+        icon: FileCode
+    },
+    {
+        id: "viewer",
+        name: "Universal Viewer",
+        description: "Multi-format previewer for HTML, JSON, YAML, and Markdown files",
+        href: "/view",
+        category: "core",
+        status: "Available",
+        icon: Search
+    },
+    {
+        id: "ide",
+        name: "Power IDE",
+        description: "Integrated development environment with real-time feedback and advanced debugging",
+        href: "/ide",
+        category: "core",
+        status: "Available",
+        icon: Rocket
+    },
+    {
+        id: "json-formatter",
+        name: "JSON Formatter",
+        description: "Clean up and validate messy JSON strings instantly",
+        href: "/view",
+        category: "json",
+        status: "Available",
+        icon: Braces
+    },
+    {
+        id: "epoch-converter",
+        name: "Epoch Converter",
+        description: "Convert between Unix timestamps and human-readable dates",
+        href: "/convert",
+        category: "time",
+        status: "Available",
+        icon: Zap
+    },
+    {
+        id: "uuid-generator",
+        name: "UUID Generator",
+        description: "Generate v4 UUIDs for your applications and tests",
+        href: "/crypto",
+        category: "crypto",
+        status: "Coming Soon",
+        icon: Shield
+    }
+];
diff --git a/next.config.ts b/next.config.ts
index e9ffa30..e5540e8 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,7 +1,10 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+    output: 'export',
+    images: {
+        unoptimized: true,
+    },
 };
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index d0ebea6..147759b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,9 @@
       "name": "web-utils",
       "version": "0.1.0",
       "dependencies": {
+        "@gsap/react": "^2.1.2",
         "@hookform/resolvers": "^5.2.2",
+        "@monaco-editor/react": "^4.7.0",
         "@radix-ui/react-accordion": "^1.2.12",
         "@radix-ui/react-alert-dialog": "^1.1.15",
         "@radix-ui/react-aspect-ratio": "^1.1.8",
@@ -42,10 +44,11 @@
         "cmdk": "^1.1.1",
         "date-fns": "^4.1.0",
         "embla-carousel-react": "^8.6.0",
+        "gsap": "^3.15.0",
         "input-otp": "^1.4.2",
         "js-yaml": "^4.1.1",
         "lucide-react": "^0.563.0",
-        "next": "16.1.4",
+        "next": "^16.2.3",
         "next-themes": "^0.4.6",
         "prettier": "^3.8.1",
         "react": "19.2.3",
@@ -64,15 +67,20 @@
         "zod": "^4.3.6"
       },
       "devDependencies": {
+        "@eslint/js": "^10.0.1",
         "@tailwindcss/postcss": "^4",
+        "@types/hast": "^3.0.4",
+        "@types/mdast": "^4.0.4",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
-        "eslint": "^9",
-        "eslint-config-next": "16.1.4",
+        "@types/unist": "^3.0.3",
+        "eslint": "^9.39.4",
+        "eslint-config-next": "^16.1.4",
         "tailwindcss": "^4",
         "tw-animate-css": "^1.4.0",
-        "typescript": "^5"
+        "typescript": "^5.9.3",
+        "typescript-eslint": "^8.58.2"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -119,7 +127,6 @@
       "integrity": "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.28.6",
         "@babel/generator": "^7.28.6",
@@ -420,15 +427,15 @@
       }
     },
     "node_modules/@eslint/config-array": {
-      "version": "0.21.1",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
-      "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.2.tgz",
+      "integrity": "sha512-nJl2KGTlrf9GjLimgIru+V/mzgSK0ABCDQRvxw5BjURL7WfH5uoWmizbH7QB6MmnMBd8cIC9uceWnezL1VZWWw==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@eslint/object-schema": "^2.1.7",
         "debug": "^4.3.1",
-        "minimatch": "^3.1.2"
+        "minimatch": "^3.1.5"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -461,20 +468,20 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.3.tgz",
-      "integrity": "sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==",
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.5.tgz",
+      "integrity": "sha512-4IlJx0X0qftVsN5E+/vGujTRIFtwuLbNsVUe7TO6zYPDR1O6nFwvwhIKEKSrl6dZchmYBITazxKoUYOjdtjlRg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "ajv": "^6.12.4",
+        "ajv": "^6.14.0",
         "debug": "^4.3.2",
         "espree": "^10.0.1",
         "globals": "^14.0.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
         "js-yaml": "^4.1.1",
-        "minimatch": "^3.1.2",
+        "minimatch": "^3.1.5",
         "strip-json-comments": "^3.1.1"
       },
       "engines": {
@@ -485,16 +492,24 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.39.2",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.2.tgz",
-      "integrity": "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==",
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-10.0.1.tgz",
+      "integrity": "sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
       },
       "funding": {
         "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "eslint": "^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
       }
     },
     "node_modules/@eslint/object-schema": {
@@ -559,6 +574,16 @@
       "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
       "license": "MIT"
     },
+    "node_modules/@gsap/react": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@gsap/react/-/react-2.1.2.tgz",
+      "integrity": "sha512-JqliybO1837UcgH2hVOM4VO+38APk3ECNrsuSM4MuXp+rbf+/2IG2K1YJiqfTcXQHH7XlA0m3ykniFYstfq0Iw==",
+      "license": "SEE LICENSE AT https://gsap.com/standard-license",
+      "peerDependencies": {
+        "gsap": "^3.12.5",
+        "react": ">=17"
+      }
+    },
     "node_modules/@hookform/resolvers": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.2.2.tgz",
@@ -1139,6 +1164,29 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.7.0.tgz",
+      "integrity": "sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==",
+      "license": "MIT",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz",
+      "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.5.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "0.2.12",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
@@ -1153,9 +1201,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.1.4.tgz",
-      "integrity": "sha512-gkrXnZyxPUy0Gg6SrPQPccbNVLSP3vmW8LU5dwEttEEC1RwDivk8w4O+sZIjFvPrSICXyhQDCG+y3VmjlJf+9A==",
+      "version": "16.2.3",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.2.3.tgz",
+      "integrity": "sha512-ZWXyj4uNu4GCWQw9cjRxWlbD+33mcDszIo9iQxFnBX3Wmgq9ulaSJcl6VhuWx5pCWqqD+9W6Wfz7N0lM5lYPMA==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
@@ -1169,9 +1217,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.1.4.tgz",
-      "integrity": "sha512-T8atLKuvk13XQUdVLCv1ZzMPgLPW0+DWWbHSQXs0/3TjPrKNxTmUIhOEaoEyl3Z82k8h/gEtqyuoZGv6+Ugawg==",
+      "version": "16.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.2.3.tgz",
+      "integrity": "sha512-u37KDKTKQ+OQLvY+z7SNXixwo4Q2/IAJFDzU1fYe66IbCE51aDSAzkNDkWmLN0yjTUh4BKBd+hb69jYn6qqqSg==",
       "cpu": [
         "arm64"
       ],
@@ -1185,9 +1233,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.1.4.tgz",
-      "integrity": "sha512-AKC/qVjUGUQDSPI6gESTx0xOnOPQ5gttogNS3o6bA83yiaSZJek0Am5yXy82F1KcZCx3DdOwdGPZpQCluonuxg==",
+      "version": "16.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.2.3.tgz",
+      "integrity": "sha512-gHjL/qy6Q6CG3176FWbAKyKh9IfntKZTB3RY/YOJdDFpHGsUDXVH38U4mMNpHVGXmeYW4wj22dMp1lTfmu/bTQ==",
       "cpu": [
         "x64"
       ],
@@ -1201,9 +1249,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.1.4.tgz",
-      "integrity": "sha512-POQ65+pnYOkZNdngWfMEt7r53bzWiKkVNbjpmCt1Zb3V6lxJNXSsjwRuTQ8P/kguxDC8LRkqaL3vvsFrce4dMQ==",
+      "version": "16.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.2.3.tgz",
+      "integrity": "sha512-U6vtblPtU/P14Y/b/n9ZY0GOxbbIhTFuaFR7F4/uMBidCi2nSdaOFhA0Go81L61Zd6527+yvuX44T4ksnf8T+Q==",
       "cpu": [
         "arm64"
       ],
@@ -1217,9 +1265,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.1.4.tgz",
-      "integrity": "sha512-3Wm0zGYVCs6qDFAiSSDL+Z+r46EdtCv/2l+UlIdMbAq9hPJBvGu/rZOeuvCaIUjbArkmXac8HnTyQPJFzFWA0Q==",
+      "version": "16.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.2.3.tgz",
+      "integrity": "sha512-/YV0LgjHUmfhQpn9bVoGc4x4nan64pkhWR5wyEV8yCOfwwrH630KpvRg86olQHTwHIn1z59uh6JwKvHq1h4QEw==",
       "cpu": [
         "arm64"
       ],
@@ -1233,9 +1281,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.1.4.tgz",
-      "integrity": "sha512-lWAYAezFinaJiD5Gv8HDidtsZdT3CDaCeqoPoJjeB57OqzvMajpIhlZFce5sCAH6VuX4mdkxCRqecCJFwfm2nQ==",
+      "version": "16.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.2.3.tgz",
+      "integrity": "sha512-/HiWEcp+WMZ7VajuiMEFGZ6cg0+aYZPqCJD3YJEfpVWQsKYSjXQG06vJP6F1rdA03COD9Fef4aODs3YxKx+RDQ==",
       "cpu": [
         "x64"
       ],
@@ -1249,9 +1297,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.1.4.tgz",
-      "integrity": "sha512-fHaIpT7x4gA6VQbdEpYUXRGyge/YbRrkG6DXM60XiBqDM2g2NcrsQaIuj375egnGFkJow4RHacgBOEsHfGbiUw==",
+      "version": "16.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.2.3.tgz",
+      "integrity": "sha512-Kt44hGJfZSefebhk/7nIdivoDr3Ugp5+oNz9VvF3GUtfxutucUIHfIO0ZYO8QlOPDQloUVQn4NVC/9JvHRk9hw==",
       "cpu": [
         "x64"
       ],
@@ -1265,9 +1313,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.1.4.tgz",
-      "integrity": "sha512-MCrXxrTSE7jPN1NyXJr39E+aNFBrQZtO154LoCz7n99FuKqJDekgxipoodLNWdQP7/DZ5tKMc/efybx1l159hw==",
+      "version": "16.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.2.3.tgz",
+      "integrity": "sha512-O2NZ9ie3Tq6xj5Z5CSwBT3+aWAMW2PIZ4egUi9MaWLkwaehgtB7YZjPm+UpcNpKOme0IQuqDcor7BsW6QBiQBw==",
       "cpu": [
         "arm64"
       ],
@@ -1281,9 +1329,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.4.tgz",
-      "integrity": "sha512-JSVlm9MDhmTXw/sO2PE/MRj+G6XOSMZB+BcZ0a7d6KwVFZVpkHcb2okyoYFBaco6LeiL53BBklRlOrDDbOeE5w==",
+      "version": "16.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.2.3.tgz",
+      "integrity": "sha512-Ibm29/GgB/ab5n7XKqlStkm54qqZE8v2FnijUPBgrd67FWrac45o/RsNlaOWjme/B5UqeWt/8KM4aWBwA1D2Kw==",
       "cpu": [
         "x64"
       ],
@@ -3409,7 +3457,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.9.tgz",
       "integrity": "sha512-Lpo8kgb/igvMIPeNV2rsYKTgaORYdO1XGVZ4Qz3akwOj0ySGYMPlQWa8BaLn0G63D1aSaAQ5ldR06wCpChQCjA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -3420,7 +3467,6 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -3434,6 +3480,14 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -3441,20 +3495,20 @@
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.53.1.tgz",
-      "integrity": "sha512-cFYYFZ+oQFi6hUnBTbLRXfTJiaQtYE3t4O692agbBl+2Zy+eqSKWtPjhPXJu1G7j4RLjKgeJPDdq3EqOwmX5Ag==",
+      "version": "8.58.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.58.2.tgz",
+      "integrity": "sha512-aC2qc5thQahutKjP+cl8cgN9DWe3ZUqVko30CMSZHnFEHyhOYoZSzkGtAI2mcwZ38xeImDucI4dnqsHiOYuuCw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.12.2",
-        "@typescript-eslint/scope-manager": "8.53.1",
-        "@typescript-eslint/type-utils": "8.53.1",
-        "@typescript-eslint/utils": "8.53.1",
-        "@typescript-eslint/visitor-keys": "8.53.1",
+        "@typescript-eslint/scope-manager": "8.58.2",
+        "@typescript-eslint/type-utils": "8.58.2",
+        "@typescript-eslint/utils": "8.58.2",
+        "@typescript-eslint/visitor-keys": "8.58.2",
         "ignore": "^7.0.5",
         "natural-compare": "^1.4.0",
-        "ts-api-utils": "^2.4.0"
+        "ts-api-utils": "^2.5.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3464,9 +3518,9 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.53.1",
-        "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <6.0.0"
+        "@typescript-eslint/parser": "^8.58.2",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
@@ -3480,17 +3534,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.53.1.tgz",
-      "integrity": "sha512-nm3cvFN9SqZGXjmw5bZ6cGmvJSyJPn0wU9gHAZZHDnZl2wF9PhHv78Xf06E0MaNk4zLVHL8hb2/c32XvyJOLQg==",
+      "version": "8.58.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.58.2.tgz",
+      "integrity": "sha512-/Zb/xaIDfxeJnvishjGdcR4jmr7S+bda8PKNhRGdljDM+elXhlvN0FyPSsMnLmJUrVG9aPO6dof80wjMawsASg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.53.1",
-        "@typescript-eslint/types": "8.53.1",
-        "@typescript-eslint/typescript-estree": "8.53.1",
-        "@typescript-eslint/visitor-keys": "8.53.1",
+        "@typescript-eslint/scope-manager": "8.58.2",
+        "@typescript-eslint/types": "8.58.2",
+        "@typescript-eslint/typescript-estree": "8.58.2",
+        "@typescript-eslint/visitor-keys": "8.58.2",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -3501,19 +3554,19 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <6.0.0"
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.53.1.tgz",
-      "integrity": "sha512-WYC4FB5Ra0xidsmlPb+1SsnaSKPmS3gsjIARwbEkHkoWloQmuzcfypljaJcR78uyLA1h8sHdWWPHSLDI+MtNog==",
+      "version": "8.58.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.58.2.tgz",
+      "integrity": "sha512-Cq6UfpZZk15+r87BkIh5rDpi38W4b+Sjnb8wQCPPDDweS/LRCFjCyViEbzHk5Ck3f2QDfgmlxqSa7S7clDtlfg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.53.1",
-        "@typescript-eslint/types": "^8.53.1",
+        "@typescript-eslint/tsconfig-utils": "^8.58.2",
+        "@typescript-eslint/types": "^8.58.2",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -3524,18 +3577,18 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "typescript": ">=4.8.4 <6.0.0"
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.53.1.tgz",
-      "integrity": "sha512-Lu23yw1uJMFY8cUeq7JlrizAgeQvWugNQzJp8C3x8Eo5Jw5Q2ykMdiiTB9vBVOOUBysMzmRRmUfwFrZuI2C4SQ==",
+      "version": "8.58.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.58.2.tgz",
+      "integrity": "sha512-SgmyvDPexWETQek+qzZnrG6844IaO02UVyOLhI4wpo82dpZJY9+6YZCKAMFzXb7qhx37mFK1QcPQ18tud+vo6Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.53.1",
-        "@typescript-eslint/visitor-keys": "8.53.1"
+        "@typescript-eslint/types": "8.58.2",
+        "@typescript-eslint/visitor-keys": "8.58.2"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3546,9 +3599,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.53.1.tgz",
-      "integrity": "sha512-qfvLXS6F6b1y43pnf0pPbXJ+YoXIC7HKg0UGZ27uMIemKMKA6XH2DTxsEDdpdN29D+vHV07x/pnlPNVLhdhWiA==",
+      "version": "8.58.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.58.2.tgz",
+      "integrity": "sha512-3SR+RukipDvkkKp/d0jP0dyzuls3DbGmwDpVEc5wqk5f38KFThakqAAO0XMirWAE+kT00oTauTbzMFGPoAzB0A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3559,21 +3612,21 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "typescript": ">=4.8.4 <6.0.0"
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.53.1.tgz",
-      "integrity": "sha512-MOrdtNvyhy0rHyv0ENzub1d4wQYKb2NmIqG7qEqPWFW7Mpy2jzFC3pQ2yKDvirZB7jypm5uGjF2Qqs6OIqu47w==",
+      "version": "8.58.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.58.2.tgz",
+      "integrity": "sha512-Z7EloNR/B389FvabdGeTo2XMs4W9TjtPiO9DAsmT0yom0bwlPyRjkJ1uCdW1DvrrrYP50AJZ9Xc3sByZA9+dcg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.53.1",
-        "@typescript-eslint/typescript-estree": "8.53.1",
-        "@typescript-eslint/utils": "8.53.1",
+        "@typescript-eslint/types": "8.58.2",
+        "@typescript-eslint/typescript-estree": "8.58.2",
+        "@typescript-eslint/utils": "8.58.2",
         "debug": "^4.4.3",
-        "ts-api-utils": "^2.4.0"
+        "ts-api-utils": "^2.5.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3583,14 +3636,14 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <6.0.0"
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.53.1.tgz",
-      "integrity": "sha512-jr/swrr2aRmUAUjW5/zQHbMaui//vQlsZcJKijZf3M26bnmLj8LyZUpj8/Rd6uzaek06OWsqdofN/Thenm5O8A==",
+      "version": "8.58.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.58.2.tgz",
+      "integrity": "sha512-9TukXyATBQf/Jq9AMQXfvurk+G5R2MwfqQGDR2GzGz28HvY/lXNKGhkY+6IOubwcquikWk5cjlgPvD2uAA7htQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3602,21 +3655,21 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.53.1.tgz",
-      "integrity": "sha512-RGlVipGhQAG4GxV1s34O91cxQ/vWiHJTDHbXRr0li2q/BGg3RR/7NM8QDWgkEgrwQYCvmJV9ichIwyoKCQ+DTg==",
+      "version": "8.58.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.58.2.tgz",
+      "integrity": "sha512-ELGuoofuhhoCvNbQjFFiobFcGgcDCEm0ThWdmO4Z0UzLqPXS3KFvnEZ+SHewwOYHjM09tkzOWXNTv9u6Gqtyuw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.53.1",
-        "@typescript-eslint/tsconfig-utils": "8.53.1",
-        "@typescript-eslint/types": "8.53.1",
-        "@typescript-eslint/visitor-keys": "8.53.1",
+        "@typescript-eslint/project-service": "8.58.2",
+        "@typescript-eslint/tsconfig-utils": "8.58.2",
+        "@typescript-eslint/types": "8.58.2",
+        "@typescript-eslint/visitor-keys": "8.58.2",
         "debug": "^4.4.3",
-        "minimatch": "^9.0.5",
+        "minimatch": "^10.2.2",
         "semver": "^7.7.3",
         "tinyglobby": "^0.2.15",
-        "ts-api-utils": "^2.4.0"
+        "ts-api-utils": "^2.5.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3626,39 +3679,52 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "typescript": ">=4.8.4 <6.0.0"
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
+      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "balanced-match": "^1.0.0"
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
       "dev": true,
-      "license": "ISC",
+      "license": "BlueOak-1.0.0",
       "dependencies": {
-        "brace-expansion": "^2.0.1"
+        "brace-expansion": "^5.0.5"
       },
       "engines": {
-        "node": ">=16 || 14 >=14.17"
+        "node": "18 || 20 || >=22"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -3669,16 +3735,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.53.1.tgz",
-      "integrity": "sha512-c4bMvGVWW4hv6JmDUEG7fSYlWOl3II2I4ylt0NM+seinYQlZMQIaKaXIIVJWt9Ofh6whrpM+EdDQXKXjNovvrg==",
+      "version": "8.58.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.58.2.tgz",
+      "integrity": "sha512-QZfjHNEzPY8+l0+fIXMvuQ2sJlplB4zgDZvA+NmvZsZv3EQwOcc1DuIU1VJUTWZ/RKouBMhDyNaBMx4sWvrzRA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.9.1",
-        "@typescript-eslint/scope-manager": "8.53.1",
-        "@typescript-eslint/types": "8.53.1",
-        "@typescript-eslint/typescript-estree": "8.53.1"
+        "@typescript-eslint/scope-manager": "8.58.2",
+        "@typescript-eslint/types": "8.58.2",
+        "@typescript-eslint/typescript-estree": "8.58.2"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3688,19 +3754,19 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <6.0.0"
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.53.1.tgz",
-      "integrity": "sha512-oy+wV7xDKFPRyNggmXuZQSBzvoLnpmJs+GhzRhPjrxl2b/jIlyjVokzm47CZCDUdXKr2zd7ZLodPfOBpOPyPlg==",
+      "version": "8.58.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.58.2.tgz",
+      "integrity": "sha512-f1WO2Lx8a9t8DARmcWAUPJbu0G20bJlj8L4z72K00TMeJAoyLr/tHhI/pzYBLrR4dXWkcxO1cWYZEOX8DKHTqA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.53.1",
-        "eslint-visitor-keys": "^4.2.1"
+        "@typescript-eslint/types": "8.58.2",
+        "eslint-visitor-keys": "^5.0.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3710,6 +3776,19 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
@@ -3986,12 +4065,11 @@
       ]
     },
     "node_modules/acorn": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
-      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4010,9 +4088,9 @@
       }
     },
     "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4301,18 +4379,21 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.9.18",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.18.tgz",
-      "integrity": "sha512-e23vBV1ZLfjb9apvfPk4rHVu2ry6RIr2Wfs+O324okSidrX7pTAnEJPCh/O5BtRlr7QtZI7ktOP3vsqr7Z5XoA==",
+      "version": "2.10.19",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.19.tgz",
+      "integrity": "sha512-qCkNLi2sfBOn8XhZQ0FXsT1Ki/Yo5P90hrkRamVFRS7/KV9hpfA4HkoWNU152+8w0zPjnxo5psx5NL3PSGgv5g==",
       "license": "Apache-2.0",
       "bin": {
-        "baseline-browser-mapping": "dist/cli.js"
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
       }
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
+      "integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4353,7 +4434,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -4973,6 +5053,16 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
+      "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "peer": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -4999,8 +5089,7 @@
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
       "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/embla-carousel-react": {
       "version": "8.6.0",
@@ -5246,26 +5335,25 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.39.2",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
-      "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
+      "version": "9.39.4",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.4.tgz",
+      "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
-        "@eslint/config-array": "^0.21.1",
+        "@eslint/config-array": "^0.21.2",
         "@eslint/config-helpers": "^0.4.2",
         "@eslint/core": "^0.17.0",
-        "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.39.2",
+        "@eslint/eslintrc": "^3.3.5",
+        "@eslint/js": "9.39.4",
         "@eslint/plugin-kit": "^0.4.1",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@humanwhocodes/retry": "^0.4.2",
         "@types/estree": "^1.0.6",
-        "ajv": "^6.12.4",
+        "ajv": "^6.14.0",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.6",
         "debug": "^4.3.2",
@@ -5284,7 +5372,7 @@
         "is-glob": "^4.0.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "lodash.merge": "^4.6.2",
-        "minimatch": "^3.1.2",
+        "minimatch": "^3.1.5",
         "natural-compare": "^1.4.0",
         "optionator": "^0.9.3"
       },
@@ -5437,7 +5525,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -5607,6 +5694,19 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint/node_modules/@eslint/js": {
+      "version": "9.39.4",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.4.tgz",
+      "integrity": "sha512-nE7DEIchvtiFTwBw4Lfbu59PG+kCofhjsKaCWzxTpt4lfRjRMqG6uMBzKXuEcyXhOHoUp9riAm7/aWYGhXZ9cw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
     "node_modules/espree": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
@@ -5834,9 +5934,9 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
-      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
       "dev": true,
       "license": "ISC"
     },
@@ -6067,6 +6167,12 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/gsap": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.15.0.tgz",
+      "integrity": "sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
+    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -7266,9 +7372,9 @@
       }
     },
     "node_modules/lodash": {
-      "version": "4.17.23",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
-      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
       "license": "MIT"
     },
     "node_modules/lodash.merge": {
@@ -7353,6 +7459,19 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/marked": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
+      "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -8233,9 +8352,9 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -8255,6 +8374,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.55.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz",
+      "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "dompurify": "3.2.7",
+        "marked": "14.0.0"
+      }
+    },
     "node_modules/moo": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
@@ -8331,14 +8461,14 @@
       }
     },
     "node_modules/next": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/next/-/next-16.1.4.tgz",
-      "integrity": "sha512-gKSecROqisnV7Buen5BfjmXAm7Xlpx9o2ueVQRo5DxQcjC8d330dOM1xiGWc2k3Dcnz0In3VybyRPOsudwgiqQ==",
+      "version": "16.2.3",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.2.3.tgz",
+      "integrity": "sha512-9V3zV4oZFza3PVev5/poB9g0dEafVcgNyQ8eTRop8GvxZjV2G15FC5ARuG1eFD42QgeYkzJBJzHghNP8Ad9xtA==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "16.1.4",
+        "@next/env": "16.2.3",
         "@swc/helpers": "0.5.15",
-        "baseline-browser-mapping": "^2.8.3",
+        "baseline-browser-mapping": "^2.9.19",
         "caniuse-lite": "^1.0.30001579",
         "postcss": "8.4.31",
         "styled-jsx": "5.1.6"
@@ -8350,15 +8480,15 @@
         "node": ">=20.9.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "16.1.4",
-        "@next/swc-darwin-x64": "16.1.4",
-        "@next/swc-linux-arm64-gnu": "16.1.4",
-        "@next/swc-linux-arm64-musl": "16.1.4",
-        "@next/swc-linux-x64-gnu": "16.1.4",
-        "@next/swc-linux-x64-musl": "16.1.4",
-        "@next/swc-win32-arm64-msvc": "16.1.4",
-        "@next/swc-win32-x64-msvc": "16.1.4",
-        "sharp": "^0.34.4"
+        "@next/swc-darwin-arm64": "16.2.3",
+        "@next/swc-darwin-x64": "16.2.3",
+        "@next/swc-linux-arm64-gnu": "16.2.3",
+        "@next/swc-linux-arm64-musl": "16.2.3",
+        "@next/swc-linux-x64-gnu": "16.2.3",
+        "@next/swc-linux-x64-musl": "16.2.3",
+        "@next/swc-win32-arm64-msvc": "16.2.3",
+        "@next/swc-win32-x64-msvc": "16.2.3",
+        "sharp": "^0.34.5"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -8690,9 +8820,9 @@
       "license": "ISC"
     },
     "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -8851,7 +8981,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8882,7 +9011,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -8895,7 +9023,6 @@
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.71.1.tgz",
       "integrity": "sha512-9SUJKCGKo8HUSsCO+y0CtqkqI5nNuaDqTxyqPsZPqIwudpj4rCrAz/jZV+jn57bx5gtZKOh3neQu94DXMc+w5w==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18.0.0"
       },
@@ -9645,6 +9772,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
+      "license": "MIT"
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
@@ -9949,12 +10082,11 @@
       }
     },
     "node_modules/tinyglobby/node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -9996,9 +10128,9 @@
       }
     },
     "node_modules/ts-api-utils": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz",
-      "integrity": "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
+      "integrity": "sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -10147,7 +10279,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -10157,16 +10288,16 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.53.1.tgz",
-      "integrity": "sha512-gB+EVQfP5RDElh9ittfXlhZJdjSU4jUSTyE2+ia8CYyNvet4ElfaLlAIqDvQV9JPknKx0jQH1racTYe/4LaLSg==",
+      "version": "8.58.2",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.58.2.tgz",
+      "integrity": "sha512-V8iSng9mRbdZjl54VJ9NKr6ZB+dW0J3TzRXRGcSbLIej9jV86ZRtlYeTKDR/QLxXykocJ5icNzbsl2+5TzIvcQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.53.1",
-        "@typescript-eslint/parser": "8.53.1",
-        "@typescript-eslint/typescript-estree": "8.53.1",
-        "@typescript-eslint/utils": "8.53.1"
+        "@typescript-eslint/eslint-plugin": "8.58.2",
+        "@typescript-eslint/parser": "8.58.2",
+        "@typescript-eslint/typescript-estree": "8.58.2",
+        "@typescript-eslint/utils": "8.58.2"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -10176,8 +10307,8 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <6.0.0"
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
     "node_modules/unbox-primitive": {
@@ -10624,7 +10755,6 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/package.json b/package.json
index e27390e..20e087b 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,9 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@gsap/react": "^2.1.2",
     "@hookform/resolvers": "^5.2.2",
+    "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.1.8",
@@ -43,10 +45,11 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
+    "gsap": "^3.15.0",
     "input-otp": "^1.4.2",
     "js-yaml": "^4.1.1",
     "lucide-react": "^0.563.0",
-    "next": "16.1.4",
+    "next": "^16.2.3",
     "next-themes": "^0.4.6",
     "prettier": "^3.8.1",
     "react": "19.2.3",
@@ -65,14 +68,19 @@
     "zod": "^4.3.6"
   },
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
     "@tailwindcss/postcss": "^4",
+    "@types/hast": "^3.0.4",
+    "@types/mdast": "^4.0.4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "16.1.4",
+    "@types/unist": "^3.0.3",
+    "eslint": "^9.39.4",
+    "eslint-config-next": "^16.1.4",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^5"
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.58.2"
   }
 }
diff --git a/types/index.ts b/types/index.ts
index 1c52358..b0aa013 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -1,2 +1,2 @@
 export * from "./format";
-export * from "./container";
+export * from "./props/container";
diff --git a/types/container.ts b/types/props/container.ts
similarity index 71%
rename from types/container.ts
rename to types/props/container.ts
index ec612e1..3ea674b 100644
--- a/types/container.ts
+++ b/types/props/container.ts
@@ -1,4 +1,4 @@
-import { Format } from "./format";
+import { Format } from "../format";
 
 export interface ContainerProps {
     initialContent: string;
diff --git a/wasm/Cargo.toml b/wasm/Cargo.toml
new file mode 100644
index 0000000..154f739
--- /dev/null
+++ b/wasm/Cargo.toml
@@ -0,0 +1,10 @@
+[package]
+name = "wasm"
+version = "0.1.0"
+edition = "2024"
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+wasm-bindgen = "0.2"
diff --git a/wasm/loader.ts b/wasm/loader.ts
new file mode 100644
index 0000000..e69de29
diff --git a/wasm/src/lib.rs b/wasm/src/lib.rs
new file mode 100644
index 0000000..f3bb77c
--- /dev/null
+++ b/wasm/src/lib.rs
@@ -0,0 +1,11 @@
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+pub fn greet(name: &str) -> String {
+    format!("Hello, {}! This is from WASM.", name)
+}
+
+#[wasm_bindgen]
+pub fn add(a: i32, b: i32) -> i32 {
+    a + b
+}

From 1d9e288e0580c9a00d4fd9f89831a439b45e5887 Mon Sep 17 00:00:00 2001
From: Nishanth <nishanthkj12@gmail.com>
Date: Wed, 15 Apr 2026 00:06:54 +0530
Subject: [PATCH 04/18] feat: implement core IDE infrastructure including
 editor container, global styling, and workspace layout components

---
 app/editor/page.tsx                          |   9 +-
 app/globals.css                              |  23 +-
 app/ide/page.tsx                             |   6 +-
 app/page.tsx                                 | 122 ++---
 components/editor/editor-container.tsx       | 464 ++++++----------
 components/layout/navbar.tsx                 | 145 ++---
 components/shared/code-viewer.tsx            |  60 +--
 components/ui/resizable.tsx                  |  13 +-
 components/view/viewer-container.tsx         | 526 ++++++++-----------
 components/workspace/workspace-container.tsx | 386 ++++++++++++++
 lib/hooks/use-editor.ts                      |  56 ++
 scratch/check-panels.ts                      |   2 +
 12 files changed, 980 insertions(+), 832 deletions(-)
 create mode 100644 components/workspace/workspace-container.tsx
 create mode 100644 lib/hooks/use-editor.ts
 create mode 100644 scratch/check-panels.ts

diff --git a/app/editor/page.tsx b/app/editor/page.tsx
index 6fb6743..66a53ee 100644
--- a/app/editor/page.tsx
+++ b/app/editor/page.tsx
@@ -1,15 +1,14 @@
 "use client";
 
-import { EditorContainer } from "@/components/editor/editor-container";
-import { DEFAULT_CONTENT } from "@/data/default-content";
+import { WorkspaceContainer } from "@/components/workspace/workspace-container";
 
 export default function EditorPage() {
     return (
         <div className="flex w-full h-full overflow-hidden bg-background">
             <main className="flex-1 overflow-hidden relative">
-                <EditorContainer
-                    initialContent={DEFAULT_CONTENT.html}
-                    initialFormat="html"
+                <WorkspaceContainer 
+                    initialContent='{\n  "name": "Web Utils Workspace",\n  "status": "Ready"\n}' 
+                    initialFormat="json" 
                 />
             </main>
         </div>
diff --git a/app/globals.css b/app/globals.css
index 170a52e..4d0a255 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -135,18 +135,33 @@
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.05);
+  background: rgba(0, 0, 0, 0.03);
   border-radius: 10px;
 }
 
 .dark .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.05);
+  background: rgba(255, 255, 255, 0.03);
 }
 
 .custom-scrollbar:hover::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.1);
+  background: rgba(0, 0, 0, 0.08);
 }
 
 .dark .custom-scrollbar:hover::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.08);
 }
+
+/* Global Smooth Transitions */
+.smooth-layout {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Monaco Editor Overrides */
+.monaco-editor, .monaco-editor .margin, .monaco-editor-background {
+  background-color: transparent !important;
+}
+
+.monaco-editor {
+  padding-top: 8px;
+}
+
diff --git a/app/ide/page.tsx b/app/ide/page.tsx
index d909615..d5ec12d 100644
--- a/app/ide/page.tsx
+++ b/app/ide/page.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { IdeWorkspace } from "@/components/layout/ide-workspace";
+import { WorkspaceContainer } from "@/components/workspace/workspace-container";
 
 export default function IdePage() {
     return (
-        <div className="h-full overflow-hidden relative">
-            <IdeWorkspace />
+        <div className="h-full overflow-hidden">
+            <WorkspaceContainer initialContent='// Unified Workspace Active\nconsole.log("Ready");' initialFormat="javascript" />
         </div>
     );
 }
diff --git a/app/page.tsx b/app/page.tsx
index 416a960..e973a8a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,38 +3,14 @@
 import React, { useState } from 'react';
 import { 
     Search, 
-    Filter,
-    LayoutGrid,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { AdsCard } from '@/components/shared/ads-card';
-import gsap from 'gsap';
-import { useGSAP } from '@gsap/react';
 import { TOOLS, TOOL_CATEGORIES, type Tool, type Category } from '@/lib/constants/tools';
+import { Card, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 
 export default function ToolsListingPage() {
-    const container = React.useRef<HTMLDivElement>(null);
-
-    useGSAP(() => {
-        gsap.from(".tool-card", {
-            y: 40,
-            opacity: 0,
-            duration: 0.8,
-            stagger: 0.1,
-            ease: "power4.out",
-            delay: 0.2
-        });
-        
-        gsap.from(".category-btn", {
-            x: -20,
-            opacity: 0,
-            duration: 0.5,
-            stagger: 0.05,
-            ease: "back.out(1.7)"
-        });
-    }, { scope: container });
-
     const [searchQuery, setSearchQuery] = useState("");
     const [activeCategory, setActiveCategory] = useState("all");
 
@@ -46,93 +22,69 @@ export default function ToolsListingPage() {
     });
 
     return (
-        <div ref={container} className="h-full overflow-auto bg-zinc-50/50 dark:bg-zinc-950/50 relative p-6 custom-scrollbar">
+        <div className="h-full overflow-auto bg-background p-6 custom-scrollbar">
             <div className="max-w-6xl mx-auto space-y-8">
                 {/* Header */}
-                <div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
-                    <div className="space-y-2">
-                        <h1 className="text-4xl font-black tracking-tight text-zinc-900 dark:text-white">
-                            All Tools
-                        </h1>
-                        <p className="text-zinc-500 dark:text-zinc-400 font-medium">
-                            Explore our comprehensive suite of developer utilities and converters.
-                        </p>
-                    </div>
+                <div className="space-y-2">
+                    <h1 className="text-3xl font-bold tracking-tight text-foreground">
+                        Web Utils
+                    </h1>
+                    <p className="text-muted-foreground">
+                        A clean, minimalist suite of developer utilities and converters.
+                    </p>
                 </div>
 
                 {/* Search and Filters */}
-                <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
-                    <div className="lg:col-span-3 relative">
-                        <Search className="absolute left-4 top-1/2 -translate-y-1/2 size-5 text-zinc-400" />
+                <div className="flex flex-col md:flex-row gap-4">
+                    <div className="flex-1 relative">
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
                         <Input 
-                            placeholder="Search tools, formats, and utilities..." 
-                            className="pl-12 h-14 bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 rounded-2xl text-lg shadow-sm focus-visible:ring-indigo-500/20"
+                            placeholder="Search tools..." 
+                            className="pl-9 h-10 bg-background border-input"
                             value={searchQuery}
                             onChange={(e) => setSearchQuery(e.target.value)}
                         />
                     </div>
                     <div className="flex gap-2">
-                        <Button variant="outline" size="icon" className="h-14 w-14 rounded-2xl bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800">
-                            <Filter className="size-5" />
-                        </Button>
-                        <Button variant="outline" size="icon" className="h-14 w-14 rounded-2xl bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800">
-                            <LayoutGrid className="size-5" />
-                        </Button>
+                        {TOOL_CATEGORIES.map((cat: Category) => (
+                            <Button
+                                key={cat.id}
+                                variant={activeCategory === cat.id ? "secondary" : "ghost"}
+                                size="sm"
+                                className="h-10 px-4 font-semibold"
+                                onClick={() => setActiveCategory(cat.id)}
+                            >
+                                {cat.label}
+                            </Button>
+                        ))}
                     </div>
                 </div>
 
-                {/* Categories */}
-                <div className="flex flex-wrap gap-2">
-                    <Button 
-                        variant={activeCategory === "all" ? "default" : "outline"}
-                        className={`category-btn rounded-xl px-6 h-10 font-bold transition-all ${activeCategory === 'all' ? 'bg-indigo-600 shadow-lg shadow-indigo-500/25' : 'bg-white dark:bg-zinc-900'}`}
-                        onClick={() => setActiveCategory("all")}
-                    >
-                        All Tools
-                    </Button>
-                    {TOOL_CATEGORIES.map((cat: Category) => (
-                        <Button
-                            key={cat.id}
-                            variant={activeCategory === cat.id ? "default" : "outline"}
-                            className={`category-btn rounded-xl px-6 h-10 font-bold transition-all ${activeCategory === cat.id ? 'bg-indigo-600 shadow-lg shadow-indigo-500/25' : 'bg-white dark:bg-zinc-900 text-zinc-600 dark:text-zinc-400'}`}
-                            onClick={() => setActiveCategory(cat.id)}
-                        >
-                            {cat.label}
-                        </Button>
-                    ))}
-                </div>
-
                 {/* Tools Grid */}
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                     {filteredTools.map((tool: Tool) => (
-                        <div 
+                        <Card 
                             key={tool.id} 
-                            className="tool-card group p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:border-indigo-500/50 transition-all cursor-pointer relative overflow-hidden"
+                            className="group hover:border-primary/50 transition-colors cursor-pointer"
                             onClick={() => window.open(tool.href, '_self')}
                         >
-                            <div className="relative z-10 space-y-4">
-                                <div className="size-12 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-500 group-hover:scale-110 transition-transform">
-                                    <tool.icon className="size-6" />
-                                </div>
-                                <div>
-                                    <h3 className="text-sm font-bold text-zinc-900 dark:text-white group-hover:text-indigo-500 transition-colors uppercase tracking-tight">{tool.name}</h3>
-                                    <p className="text-xs text-zinc-500 dark:text-zinc-400 mt-1 line-clamp-2">{tool.description}</p>
+                            <CardHeader className="p-5">
+                                <div className="size-10 rounded-lg bg-muted flex items-center justify-center text-primary mb-3">
+                                    <tool.icon className="size-5" />
                                 </div>
-                                <div className="flex items-center justify-between pt-2">
+                                <CardTitle className="text-base font-bold uppercase tracking-tight">{tool.name}</CardTitle>
+                                <CardDescription className="text-xs line-clamp-2 mt-1">{tool.description}</CardDescription>
+                                <div className="pt-2">
                                     <span className={`text-[9px] font-black uppercase tracking-widest px-2 py-0.5 rounded ${tool.status === 'Available' ? 'bg-emerald-500/10 text-emerald-500' : 'bg-amber-500/10 text-amber-500'}`}>
                                         {tool.status}
                                     </span>
                                 </div>
-                            </div>
-                        </div>
+                            </CardHeader>
+                        </Card>
                     ))}
 
-                    <div className="tool-card md:col-span-2 lg:col-span-1">
-                        <AdsCard variant="sidebar" className="h-full" />
-                    </div>
+                    <AdsCard variant="sidebar" className="h-full min-h-[160px]" />
                 </div>
-
-
             </div>
         </div>
     );
diff --git a/components/editor/editor-container.tsx b/components/editor/editor-container.tsx
index 2d53167..718c933 100644
--- a/components/editor/editor-container.tsx
+++ b/components/editor/editor-container.tsx
@@ -1,28 +1,24 @@
 "use client";
 
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
 import { Button } from "@/components/ui/button";
+import Editor, { OnMount } from '@monaco-editor/react';
+import { useTheme } from 'next-themes';
 import {
     Save,
-    Check,
     FileEdit,
-    RotateCcw,
-    FileType,
-
-    Download,
     Terminal,
     Plus,
     Table as TableIcon,
     Code,
-    ChevronDown,
     Trash,
     Eye,
-
+    Copy as CopyIcon,
+    Check
 } from "lucide-react";
-import { CodeViewer } from '@/components/shared/code-viewer';
 import { TableViewer } from '@/components/shared/table-viewer';
-import { Format, ContainerProps } from '@/types';
+import { ContainerProps, Format } from '@/types';
 import yaml from 'js-yaml';
 import {
     DropdownMenu,
@@ -34,60 +30,40 @@ import {
     DropdownMenuRadioGroup,
     DropdownMenuRadioItem,
 } from "@/components/ui/dropdown-menu";
-
+import { useEditor } from '@/lib/hooks/use-editor';
 import { PREVIEWABLE_FORMATS, ALL_FORMATS, getLanguage } from '@/lib/formats';
+import { Separator } from '@/components/ui/separator';
 
 export function EditorContainer({ initialContent, initialFormat }: ContainerProps) {
     const router = useRouter();
-    const [content, setContent] = useState(initialContent);
-    const [format, setFormat] = useState<Format>(initialFormat);
+    const { resolvedTheme } = useTheme();
+    const { content, setContent, format, setFormat, isSaved, setIsSaved } = useEditor({
+        initialContent,
+        initialFormat,
+    });
+
     const [fileName, setFileName] = useState(`index.${getLanguage(initialFormat)}`);
-    const [isSaved, setIsSaved] = useState(true);
     const [copied, setCopied] = useState(false);
-    const [wordWrap, setWordWrap] = useState(true);
-    const [autoFormat, setAutoFormat] = useState(false);
+    const [wordWrap, setWordWrap] = useState<"on" | "off">("on");
     const [viewMode, setViewMode] = useState<'code' | 'table'>('code');
     const [cursorPos, setCursorPos] = useState({ line: 1, col: 1 });
-    const codeViewerRef = useRef<HTMLDivElement>(null);
-
-    const handleScroll = (e: React.UIEvent<HTMLTextAreaElement>) => {
-        if (codeViewerRef.current) {
-            codeViewerRef.current.scrollTop = e.currentTarget.scrollTop;
-            codeViewerRef.current.scrollLeft = e.currentTarget.scrollLeft;
-        }
-    };
-
-    const updateCursorPosition = (e: React.UIEvent<HTMLTextAreaElement> | React.KeyboardEvent<HTMLTextAreaElement>) => {
-        const target = e.currentTarget as HTMLTextAreaElement;
-        const textBeforeCursor = target.value.substring(0, target.selectionStart);
-        const lines = textBeforeCursor.split("\n");
-        setCursorPos({
-            line: lines.length,
-            col: lines[lines.length - 1].length + 1
+    const editorRef = useRef<any>(null); // eslint-disable-line @typescript-eslint/no-explicit-any
+
+    const handleEditorDidMount: OnMount = (editor) => {
+        editorRef.current = editor;
+        editor.onDidChangeCursorPosition((e) => {
+            setCursorPos({
+                line: e.position.lineNumber,
+                col: e.position.column
+            });
         });
     };
 
-    const [prevInitialContent, setPrevInitialContent] = useState(initialContent);
-    const [prevInitialFormat, setPrevInitialFormat] = useState(initialFormat);
-
-    // Sync to sessionStorage automatically for the Viewer to pick up
-    React.useEffect(() => {
-        if (typeof window !== 'undefined') {
-            sessionStorage.setItem(`web-viewer-content-${format}`, content);
-        }
-    }, [content, format]);
-
-    if (initialContent !== prevInitialContent || initialFormat !== prevInitialFormat) {
-        setPrevInitialContent(initialContent);
-        setPrevInitialFormat(initialFormat);
-        setContent(initialContent);
-        setFormat(initialFormat);
-
-        if (initialFormat !== prevInitialFormat) {
-            const namePart = fileName.substring(0, fileName.lastIndexOf('.')) || fileName;
-            setFileName(`${namePart}.${getLanguage(initialFormat)}`);
-        }
-    }
+    const handleFormatChange = (newFormat: Format) => {
+        setFormat(newFormat);
+        const namePart = fileName.substring(0, fileName.lastIndexOf('.')) || fileName;
+        setFileName(`${namePart}.${getLanguage(newFormat)}`);
+    };
 
     const handleCopy = () => {
         navigator.clipboard.writeText(content);
@@ -95,7 +71,7 @@ export function EditorContainer({ initialContent, initialFormat }: ContainerProp
         setTimeout(() => setCopied(false), 2000);
     };
 
-    const handleFormat = () => {
+    const handleAutoFormat = async () => {
         try {
             if (format === 'json') {
                 const parsed = JSON.parse(content);
@@ -104,7 +80,7 @@ export function EditorContainer({ initialContent, initialFormat }: ContainerProp
                 const parsed = yaml.load(content);
                 setContent(yaml.dump(parsed));
             }
-            setIsSaved(false);
+            setIsSaved(true);
         } catch (e) {
             console.error(e);
         }
@@ -115,7 +91,6 @@ export function EditorContainer({ initialContent, initialFormat }: ContainerProp
         const element = document.createElement("a");
         const file = new Blob([content], { type: 'text/plain' });
         element.href = URL.createObjectURL(file);
-        // If fileName already has an extension, use it; otherwise append current format
         const finalName = fileName.includes('.') ? fileName : `${fileName}.${getLanguage(format)}`;
         element.download = finalName;
         document.body.appendChild(element);
@@ -125,7 +100,7 @@ export function EditorContainer({ initialContent, initialFormat }: ContainerProp
 
     const handleNewFile = () => {
         setContent("");
-        setFileName("untitled");
+        setFileName("untitled.txt");
         setIsSaved(true);
         setViewMode('code');
     };
@@ -142,282 +117,181 @@ export function EditorContainer({ initialContent, initialFormat }: ContainerProp
         setViewMode('table');
     };
 
-    const handleTableDataChange = (newData: Record<string, string>[]) => {
-        setContent(JSON.stringify(newData, null, 2));
-        setIsSaved(false);
-    };
-
-    const isTabularData = () => {
+    const isTabularData = useMemo(() => {
         try {
             const parsed = JSON.parse(content);
             return Array.isArray(parsed) && parsed.length > 0 && typeof parsed[0] === 'object';
         } catch {
             return false;
         }
-    };
+    }, [content]);
 
     const isPreviewable = PREVIEWABLE_FORMATS.includes(format.toLowerCase() as Format);
 
-    const handlePreview = () => {
-        if (isPreviewable) {
-            router.push(`/view/${format}`);
-        }
-    };
-
     return (
-        <div className="flex flex-col h-full bg-white dark:bg-zinc-950 font-sans border-t border-zinc-200 dark:border-zinc-800">
-            {/* Notepad-style Ribbon Toolbar */}
-            <div className="flex flex-col border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/50">
-                {/* Menu Bar */}
-                <div className="flex items-center px-1 py-0.5 gap-1 border-b border-zinc-200/50 dark:border-zinc-800/50">
-                    <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                            <Button variant="ghost" size="sm" className="h-7 px-3 text-[11px] font-medium hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-none">
-                                File
-                            </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="start" className="rounded-none min-w-[180px]">
-                            <DropdownMenuItem onClick={handleNewFile} className="gap-2 text-xs">
-                                <Plus className="size-3.5" /> New File
-                            </DropdownMenuItem>
-                            <DropdownMenuItem onClick={handleNewTable} className="gap-2 text-xs">
-                                <TableIcon className="size-3.5" /> New Table
-                            </DropdownMenuItem>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem onClick={handleSave} className="gap-2 text-xs">
-                                <Save className="size-3.5" /> Save to System
-                            </DropdownMenuItem>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem onClick={() => setContent("")} className="gap-2 text-xs text-red-500">
-                                <Trash className="size-3.5" /> Clear Content
-                            </DropdownMenuItem>
-                        </DropdownMenuContent>
-                    </DropdownMenu>
-
-                    <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                            <Button variant="ghost" size="sm" className="h-7 px-3 text-[11px] font-medium hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-none">
-                                Options
-                            </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="start" className="rounded-none min-w-[200px]">
-                            <DropdownMenuLabel className="text-[10px] uppercase font-bold text-zinc-400">Editor Settings</DropdownMenuLabel>
-                            <DropdownMenuItem onClick={() => setWordWrap(!wordWrap)} className="justify-between text-xs">
-                                Word Wrap
-                                <span className="text-[10px] text-zinc-400 font-mono">{wordWrap ? "ON" : "OFF"}</span>
-                            </DropdownMenuItem>
-                            <DropdownMenuItem onClick={() => setAutoFormat(!autoFormat)} className="justify-between text-xs">
-                                Auto-Format
-                                <span className="text-[10px] text-zinc-400 font-mono">{autoFormat ? "ON" : "OFF"}</span>
-                            </DropdownMenuItem>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuLabel className="text-[10px] uppercase font-bold text-zinc-400">Language / Format</DropdownMenuLabel>
-                            <DropdownMenuRadioGroup value={format} onValueChange={(v) => {
-                                setFormat(v as Format);
-                                const namePart = fileName.substring(0, fileName.lastIndexOf('.')) || fileName;
-                                setFileName(`${namePart}.${getLanguage(v as string)}`);
-                            }}>
-                                {ALL_FORMATS.slice(0, 10).map((fmt) => (
-                                    <DropdownMenuRadioItem key={fmt} value={fmt} className="text-xs uppercase">
-                                        {fmt}
-                                    </DropdownMenuRadioItem>
-                                ))}
-                            </DropdownMenuRadioGroup>
-                            <DropdownMenuSeparator />
-                            <div className="p-2">
-                                <DropdownMenuLabel className="text-[10px] uppercase font-bold text-zinc-400 mb-1 text-left">Custom Format</DropdownMenuLabel>
-                                <input
-                                    type="text"
-                                    placeholder="e.g. cpp, rust"
-                                    className="w-full h-7 px-2 text-xs border rounded bg-zinc-50 dark:bg-zinc-800 outline-none focus:ring-1 ring-indigo-500"
-                                    defaultValue={format}
-                                    onBlur={(e) => {
-                                        if (e.target.value) setFormat(e.target.value.toLowerCase() as Format);
-                                    }}
-                                    onKeyDown={(e) => {
-                                        if (e.key === 'Enter') setFormat(e.currentTarget.value.toLowerCase() as Format);
-                                    }}
-                                />
-                            </div>
-                        </DropdownMenuContent>
-                    </DropdownMenu>
-
-                    <Button variant="ghost" size="sm" onClick={handleFormat} className="h-7 px-3 text-[11px] font-medium hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-none">
-                        Format Code
-                    </Button>
-                    <Button variant="ghost" size="sm" onClick={handleCopy} className="h-7 px-3 text-[11px] font-medium hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-none gap-2">
-                        {copied ? <Check className="size-3 text-green-500" /> : null}
-                        {copied ? "Copied" : "Copy"}
-                    </Button>
-
-                    {isPreviewable && (
-                        <Button variant="ghost" size="sm" onClick={handlePreview} className="h-7 px-3 text-[11px] font-medium hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-none text-indigo-600 dark:text-indigo-400 gap-1.5 transition-all">
-                            <Eye className="size-3" /> View in Viewer
-                        </Button>
-                    )}
-                </div>
-
-                {/* Quick Actions Toolbar */}
-                <div className="flex items-center justify-between px-4 py-2 bg-white dark:bg-zinc-900 shadow-sm">
-                    <div className="flex items-center gap-4">
-                        <div className="flex items-center gap-2 group">
-                            <div className="p-1.5 bg-indigo-500/10 rounded-md">
-                                <FileEdit className="size-4 text-indigo-500" />
-                            </div>
-                            <div className="flex items-center gap-1 border-b border-transparent hover:border-zinc-300 dark:hover:border-zinc-700 transition-colors py-1">
-                                <input
-                                    type="text"
-                                    value={fileName}
-                                    onChange={(e) => setFileName(e.target.value)}
-                                    className="bg-transparent border-none outline-none text-sm font-bold text-zinc-700 dark:text-zinc-200 w-auto min-w-[120px]"
-                                    style={{ width: `${Math.max(fileName.length, 10)}ch` }}
-                                    spellCheck={false}
-                                />
-                            </div>
-                            {!isSaved && <div className="size-2 rounded-full bg-amber-500 animate-pulse" />}
+        <div className="flex flex-col h-full bg-background font-sans border-t">
+            {/* Header / Standard Toolbar */}
+            <div className="flex items-center justify-between px-4 h-14 border-b bg-muted/20">
+                <div className="flex items-center gap-4">
+                    <div className="flex items-center gap-2">
+                        <div className="p-1.5 bg-primary/10 rounded-md">
+                            <FileEdit className="size-4 text-primary" />
                         </div>
+                        <input
+                            type="text"
+                            value={fileName}
+                            onChange={(e) => setFileName(e.target.value)}
+                            className="bg-transparent border-none outline-none text-sm font-semibold text-foreground min-w-[120px]"
+                            spellCheck={false}
+                        />
+                        {!isSaved && <div className="size-2 rounded-full bg-amber-500 animate-pulse" />}
+                    </div>
 
-                        {isTabularData() && (
-                            <div className="flex items-center bg-zinc-100 dark:bg-zinc-800 rounded-lg p-1 gap-1">
-                                <Button
-                                    variant={viewMode === 'code' ? 'secondary' : 'ghost'}
-                                    size="sm"
-                                    onClick={() => setViewMode('code')}
-                                    className={`h-7 px-3 rounded-md text-[11px] gap-1.5 transition-all ${viewMode === 'code' ? 'bg-white dark:bg-zinc-700 shadow-sm text-indigo-600' : 'text-zinc-500'}`}
-                                >
-                                    <Code className="size-3.5" /> Code
+                    <Separator orientation="vertical" className="h-6" />
+
+                    <div className="flex items-center gap-1">
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button variant="ghost" size="sm" className="h-8 text-xs font-medium">
+                                    File
                                 </Button>
-                                <Button
-                                    variant={viewMode === 'table' ? 'secondary' : 'ghost'}
-                                    size="sm"
-                                    onClick={() => setViewMode('table')}
-                                    className={`h-7 px-3 rounded-md text-[11px] gap-1.5 transition-all ${viewMode === 'table' ? 'bg-white dark:bg-zinc-700 shadow-sm text-indigo-600' : 'text-zinc-500'}`}
-                                >
-                                    <TableIcon className="size-3.5" /> Table
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="start" className="w-[180px]">
+                                <DropdownMenuItem onClick={handleNewFile} className="gap-2">
+                                    <Plus className="size-3.5" /> New File
+                                </DropdownMenuItem>
+                                <DropdownMenuItem onClick={handleNewTable} className="gap-2">
+                                    <TableIcon className="size-3.5" /> New Table
+                                </DropdownMenuItem>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuItem onClick={handleSave} className="gap-2">
+                                    <Save className="size-3.5" /> Save
+                                </DropdownMenuItem>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuItem onClick={() => setContent("")} className="gap-2 text-destructive">
+                                    <Trash className="size-3.5" /> Clear
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button variant="ghost" size="sm" className="h-8 text-xs font-medium">
+                                    Format
                                 </Button>
-                            </div>
-                        )}
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="start" className="w-[180px]">
+                                <DropdownMenuLabel className="text-[10px] uppercase font-bold text-muted-foreground">Select Language</DropdownMenuLabel>
+                                <DropdownMenuRadioGroup value={format} onValueChange={(v) => handleFormatChange(v as Format)}>
+                                    {ALL_FORMATS.slice(0, 10).map((fmt) => (
+                                        <DropdownMenuRadioItem key={fmt} value={fmt} className="text-xs uppercase">
+                                            {fmt}
+                                        </DropdownMenuRadioItem>
+                                    ))}
+                                </DropdownMenuRadioGroup>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+
+                        <Button variant="ghost" size="sm" onClick={() => setWordWrap(wordWrap === "on" ? "off" : "on")} className="h-8 text-xs font-medium">
+                            Wrap: {wordWrap.toUpperCase()}
+                        </Button>
                     </div>
 
-                    <div className="flex items-center gap-2">
-                        {isPreviewable && (
+                    <Separator orientation="vertical" className="h-6" />
+
+                    <div className="flex items-center bg-muted rounded-md p-1 gap-1">
+                        <Button
+                            variant={viewMode === 'code' ? 'secondary' : 'ghost'}
+                            size="sm"
+                            onClick={() => setViewMode('code')}
+                            className="h-7 px-3 text-xs"
+                        >
+                            <Code className="size-3.5 mr-1.5" /> Source
+                        </Button>
+                        {isTabularData && (
                             <Button
-                                variant="outline"
+                                variant={viewMode === 'table' ? 'secondary' : 'ghost'}
                                 size="sm"
-                                onClick={handlePreview}
-                                className="h-8 border-indigo-200 dark:border-indigo-900 text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-950/20 gap-2 font-bold px-4 rounded-md text-xs transition-all"
+                                onClick={() => setViewMode('table')}
+                                className="h-7 px-3 text-xs"
                             >
-                                <Eye className="size-3.5" /> Preview
+                                <TableIcon className="size-3.5 mr-1.5" /> Table
                             </Button>
                         )}
-                        <Button onClick={handleSave} size="sm" className="h-8 bg-indigo-600 hover:bg-indigo-700 text-white gap-2 font-bold px-4 rounded-md text-xs shadow-md shadow-indigo-500/20 active:scale-95 transition-all">
-                            <Download className="size-3.5" /> Download
-                        </Button>
                     </div>
                 </div>
-            </div>
-
-            {/* Main Editor Area */}
-            <div className="flex-1 flex overflow-hidden">
-                <div className="flex-1 relative overflow-hidden">
-                    {viewMode === 'code' ? (
-                        <>
-                            {/* Line Numbers Column */}
-                            <div className="absolute top-0 left-0 w-12 h-full bg-zinc-50/50 dark:bg-zinc-900/20 border-r border-zinc-200 dark:border-zinc-800 flex flex-col items-end pr-3 pt-4 text-[11px] font-mono text-zinc-400 select-none overflow-hidden z-20">
-                                {content.split('\n').map((_: string, i: number) => (
-                                    <div key={i} className="h-[21px] flex items-center shrink-0">{i + 1}</div>
-                                ))}
-                            </div>
 
-                            <div className="absolute inset-0 left-12">
-                                <CodeViewer
-                                    ref={codeViewerRef}
-                                    content={content}
-                                    language={getLanguage(format)}
-                                    className="editor-code-view absolute inset-0 pointer-events-none p-4 font-mono text-[14px] leading-[21px] border-none rounded-none overflow-hidden opacity-100 bg-transparent"
-                                    showLineNumbers={false}
-                                    wrapLines={wordWrap}
-                                />
-                                <textarea
-                                    className={`absolute inset-0 w-full h-full p-4 font-mono text-[14px] bg-transparent resize-none outline-none focus:ring-0 text-transparent caret-zinc-800 dark:caret-zinc-100 leading-[21px] z-10 custom-scrollbar selection:bg-indigo-500/30 ${wordWrap ? 'whitespace-pre-wrap' : 'whitespace-pre'}`}
-                                    value={content}
-                                    onChange={(e) => {
-                                        setContent(e.target.value);
-                                        setIsSaved(false);
-                                    }}
-                                    onScroll={handleScroll}
-                                    onSelect={updateCursorPosition}
-                                    onKeyUp={updateCursorPosition}
-                                    onClick={updateCursorPosition}
-                                    spellCheck={false}
-                                    autoCapitalize="off"
-                                    autoComplete="off"
-                                    autoCorrect="off"
-                                />
-                            </div>
-                        </>
-                    ) : (
-                        <div className="p-8 h-full overflow-auto custom-scrollbar bg-white dark:bg-zinc-950">
-                            <TableViewer
-                                data={JSON.parse(content)}
-                                onDataChange={handleTableDataChange}
-                            />
-                        </div>
+                <div className="flex items-center gap-2">
+                    <Button variant="outline" size="sm" onClick={handleAutoFormat} className="h-8 text-xs font-semibold gap-2">
+                        Format Code
+                    </Button>
+                    <Button variant="outline" size="sm" onClick={handleCopy} className="h-8 text-xs font-semibold gap-2">
+                        {copied ? <Check className="size-3.5" /> : <CopyIcon className="size-3.5" />}
+                        {copied ? "Copied" : "Copy"}
+                    </Button>
+                    {isPreviewable && (
+                        <Button
+                            variant="default"
+                            size="sm"
+                            onClick={() => router.push(`/view/${format}`)}
+                            className="h-8 text-xs font-semibold gap-2 bg-indigo-600 hover:bg-indigo-700"
+                        >
+                            <Eye className="size-3.5" /> Preview
+                        </Button>
                     )}
                 </div>
             </div>
 
-            {/* Editor Footer / Status Bar */}
-            <div className="h-6 border-t border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900 flex items-center justify-between px-3 text-[10px] font-medium text-zinc-500 uppercase tracking-wider">
-                <div className="flex items-center gap-4">
-                    <div className="flex items-center gap-1.5">
-                        <FileType className="size-3" />
-                        <span>UTF-8</span>
+            {/* Main Editor Canvas */}
+            <div className="flex-1 flex overflow-hidden">
+                {viewMode === 'code' ? (
+                    <Editor
+                        height="100%"
+                        language={getLanguage(format)}
+                        value={content}
+                        onChange={(value) => setContent(value || "")}
+                        onMount={handleEditorDidMount}
+                        theme={resolvedTheme === 'dark' ? 'vs-dark' : 'light'}
+                        options={{
+                            minimap: { enabled: false },
+                            fontSize: 14,
+                            wordWrap: wordWrap,
+                            automaticLayout: true,
+                            padding: { top: 16 },
+                            lineNumbersMinChars: 3,
+                            scrollBeyondLastLine: false,
+                        }}
+                    />
+                ) : (
+                    <div className="flex-1 p-8 overflow-auto bg-background">
+                        <TableViewer
+                            data={JSON.parse(content)}
+                            onDataChange={(newData) => {
+                                setContent(JSON.stringify(newData, null, 2));
+                                setIsSaved(false);
+                            }}
+                        />
                     </div>
-                    <span>Spaces: 4</span>
-                    <div className="w-px h-2.5 bg-zinc-300 dark:bg-zinc-700" />
-
-                    <DropdownMenu>
-                        <DropdownMenuTrigger className="flex items-center gap-1 hover:text-indigo-500 transition-colors uppercase font-bold text-indigo-600 outline-none">
-                            {format} <ChevronDown className="size-2.5" />
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end" className="rounded-none min-w-[120px]">
-                            {ALL_FORMATS.slice(0, 10).map((fmt) => (
-                                <DropdownMenuItem key={fmt} onClick={() => setFormat(fmt)} className="text-[10px] uppercase font-bold">
-                                    {fmt}
-                                </DropdownMenuItem>
-                            ))}
-                        </DropdownMenuContent>
-                    </DropdownMenu>
+                )}
+            </div>
 
-                    <div className="w-px h-2.5 bg-zinc-300 dark:border-zinc-700" />
-                    <div className="flex items-center gap-1 text-green-500 font-bold">
+            {/* Sub-Footer Status Bar */}
+            <div className="h-6 border-t bg-muted/40 flex items-center justify-between px-3 text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
+                <div className="flex items-center gap-4">
+                    <div className="flex items-center gap-1.5 uppercase font-bold text-primary">
+                        {format}
+                    </div>
+                    <span>UTF-8</span>
+                    <div className="flex items-center gap-1">
                         <Terminal className="size-3" />
                         <span>{content.length} characters</span>
-                        <div className="ml-2 w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" title="In Sync" />
                     </div>
                 </div>
                 <div className="flex items-center gap-4">
                     <span>Line {cursorPos.line}, Col {cursorPos.col}</span>
-                    <div className="flex items-center gap-1.5 text-zinc-400">
-                        <RotateCcw className="size-3" />
-                        <span>Notepad+ v1.0</span>
-                    </div>
+                    <span>Monaco Editor</span>
                 </div>
             </div>
-
-            <style dangerouslySetInnerHTML={{
-                __html: `
-                .custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
-                .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
-                .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(161, 161, 170, 0.2); border-radius: 4px; }
-                .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(161, 161, 170, 0.4); }
-                textarea { scrollbar-width: thin; scrollbar-color: rgba(161, 161, 170, 0.2) transparent; font-family: 'Menlo', 'Monaco', 'Courier New', monospace !important; font-variant-ligatures: none; letter-spacing: normal; tab-size: 4; }
-                .editor-code-view { font-family: 'Menlo', 'Monaco', 'Courier New', monospace !important; scrollbar-gutter: stable; font-variant-ligatures: none; letter-spacing: normal; tab-size: 4; }
-                .editor-code-view code, .editor-code-view pre { font-family: 'Menlo', 'Monaco', 'Courier New', monospace !important; tab-size: 4; }
-                /* Ensure CodeViewer matches textarea width minus scrollbar */
-                textarea { scrollbar-gutter: stable; }
-            `}} />
         </div>
     );
 }
diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index d80b199..e1ef6c3 100644
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState } from 'react';
-import { Moon, Sun, Layout, Github, Menu, X, FileEdit, Code2, Home, ArrowLeftRight } from 'lucide-react';
+import { Moon, Sun, Github, Menu, X, Home, FileEdit } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { Button } from '@/components/ui/button';
 import Link from 'next/link';
@@ -11,136 +11,79 @@ export function Navbar() {
     const { theme, setTheme } = useTheme();
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const pathname = usePathname();
+    
     const navLinks = [
         { href: "/", label: "Home", icon: Home },
-        { href: "/documentation", label: "Docs" },
+        { href: "/editor", label: "Workspace", icon: FileEdit },
     ];
 
-    const tools = [
-        { id: "editor", label: "Editor", href: "/editor", icon: FileEdit },
-        { id: "viewer", label: "Viewer", href: "/view", icon: Layout },
-        { id: "ide", label: "IDE", href: "/ide", icon: Code2 },
-        { id: "convert", label: "Convert", href: "/convert/epoch", icon: ArrowLeftRight }
-    ];
-
-    const activeTool = pathname.includes("editor") ? "editor"
-        : pathname.includes("ide") ? "ide"
-            : pathname.includes("view") ? "viewer"
-                : pathname.includes("convert") ? "convert"
-                    : null;
-
     return (
-        <>
-            <nav className="fixed top-0 w-full z-[100] border-b border-zinc-200/80 dark:border-zinc-800/50 bg-white/80 dark:bg-zinc-950/80 backdrop-blur-xl transition-all duration-300">
-                <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
-                    <Link href="/" className="flex items-center gap-2 group">
-                        <div className="size-8 rounded-lg bg-indigo-600 flex items-center justify-center text-white shadow-lg shadow-indigo-500/20 group-hover:scale-110 transition-transform">
-                            <Layout className="size-5" />
-                        </div>
-                        <span className="font-bold text-xl tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-zinc-900 to-zinc-500 dark:from-white dark:to-zinc-400">
-                            Web Utils
-                        </span>
+        <nav className="fixed top-0 w-full z-[100] border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+            <div className="container flex h-14 items-center justify-between">
+                <div className="flex items-center gap-8">
+                    <Link href="/" className="flex items-center space-x-2">
+                        <span className="font-bold text-lg tracking-tight">Web Utils</span>
                     </Link>
-
-                    {/* Desktop Menu */}
-                    <div className="hidden md:flex items-center gap-4">
+                    <nav className="hidden md:flex items-center space-x-6 text-sm font-medium">
                         {navLinks.map((link) => (
                             <Link
                                 key={link.href}
                                 href={link.href}
-                                className="text-sm font-medium text-zinc-600 dark:text-zinc-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
+                                className={`transition-colors hover:text-foreground/80 ${pathname === link.href ? "text-foreground" : "text-foreground/60"}`}
                             >
                                 {link.label}
                             </Link>
                         ))}
-                        <a
-                            href="https://github.com/nishanth-kj/Web-Utils"
-                            target="_blank"
-                            rel="noreferrer"
-                            className="text-zinc-500 hover:text-zinc-900 dark:hover:text-white transition-colors mr-2"
-                        >
-                            <Github className="size-5" />
-                        </a>
+                    </nav>
+                </div>
 
-                        <div className="flex bg-zinc-100 dark:bg-zinc-800 p-1.5 rounded-xl border border-zinc-200 dark:border-zinc-700/50 shadow-inner">
-                            {tools.map((tool) => (
-                                <Link key={tool.id} href={tool.href}>
-                                    <button
-                                        className={`px-4 py-2 flex items-center gap-2 rounded-lg text-xs font-bold transition-all duration-200 ${activeTool === tool.id
-                                            ? "bg-white dark:bg-zinc-700 text-indigo-600 dark:text-white shadow-md scale-[1.02]"
-                                            : "text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-300"
-                                            }`}
-                                    >
-                                        <tool.icon className={`size-4 ${activeTool === tool.id ? "text-indigo-500" : ""}`} />
-                                        <span>{tool.label}</span>
-                                    </button>
-                                </Link>
-                            ))}
-                        </div>
-                        <div className="h-4 w-px bg-zinc-200 dark:bg-zinc-800 mx-2" />
+                <div className="flex items-center gap-2">
+                    <nav className="flex items-center gap-1">
+                        <a href="https://github.com/nishanth-kj/Web-Utils" target="_blank" rel="noreferrer" className="hidden sm:inline-block">
+                            <Button variant="ghost" size="icon" className="size-8">
+                                <Github className="size-4" />
+                                <span className="sr-only">GitHub</span>
+                            </Button>
+                        </a>
                         <Button
                             variant="ghost"
                             size="icon"
+                            className="size-8"
                             onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
-                            className="rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800"
                         >
-                            <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-                            <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                            <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                            <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
                             <span className="sr-only">Toggle theme</span>
                         </Button>
-                    </div>
-
-                    {/* Mobile Controls */}
-                    <div className="flex md:hidden items-center gap-2">
-                        <Button
-                            variant="ghost"
-                            size="icon"
-                            onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
-                            className="rounded-full"
-                        >
-                            <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-                            <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-                        </Button>
+                        
                         <Button
                             variant="ghost"
                             size="icon"
+                            className="size-8 md:hidden"
                             onClick={() => setIsMenuOpen(!isMenuOpen)}
-                            className="text-zinc-600 dark:text-zinc-400"
                         >
-                            {isMenuOpen ? <X className="size-6" /> : <Menu className="size-6" />}
+                            {isMenuOpen ? <X className="size-4" /> : <Menu className="size-4" />}
                         </Button>
-                    </div>
+                    </nav>
                 </div>
+            </div>
 
-                {/* Mobile Menu Dropdown */}
-                {isMenuOpen && (
-                    <div className="md:hidden absolute top-16 left-0 w-full bg-white dark:bg-zinc-950 border-b border-zinc-200 dark:border-zinc-800 py-4 px-4 flex flex-col gap-4 animate-in slide-in-from-top-2 duration-200">
-                        {tools.map((tool) => (
-                            <Link
-                                key={tool.id}
-                                href={tool.href}
-                                onClick={() => setIsMenuOpen(false)}
-                                className={`flex items-center gap-3 p-3 rounded-xl text-base font-semibold transition-colors ${activeTool === tool.id
-                                    ? "bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400"
-                                    : "text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-900"
-                                    }`}
-                            >
-                                <tool.icon className="size-5" />
-                                <span>{tool.label}</span>
-                            </Link>
-                        ))}
-                        <a
-                            href="https://github.com/nishanth-kj/Web-Utils"
-                            target="_blank"
-                            rel="noreferrer"
-                            className="flex items-center gap-2 text-base font-semibold text-zinc-600 dark:text-zinc-400 hover:text-indigo-600 transition-colors"
+            {/* Mobile Menu */}
+            {isMenuOpen && (
+                <div className="md:hidden border-t bg-background p-4 flex flex-col gap-2">
+                    {navLinks.map((link) => (
+                        <Link
+                            key={link.href}
+                            href={link.href}
+                            onClick={() => setIsMenuOpen(false)}
+                            className={`flex items-center gap-2 p-2 rounded-md text-sm font-medium ${pathname === link.href ? "bg-secondary" : "hover:bg-accent"}`}
                         >
-                            <Github className="size-5" />
-                            <span>GitHub</span>
-                        </a>
-                    </div>
-                )}
-            </nav>
-        </>
+                            <link.icon className="size-4" />
+                            <span>{link.label}</span>
+                        </Link>
+                    ))}
+                </div>
+            )}
+        </nav>
     );
 }
diff --git a/components/shared/code-viewer.tsx b/components/shared/code-viewer.tsx
index 7cdd434..d9f3c4f 100644
--- a/components/shared/code-viewer.tsx
+++ b/components/shared/code-viewer.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import React, { forwardRef } from 'react';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import Editor from '@monaco-editor/react';
+import { useTheme } from 'next-themes';
 
 interface CodeViewerProps {
     content: string;
@@ -12,39 +12,35 @@ interface CodeViewerProps {
     wrapLines?: boolean;
 }
 
-export const CodeViewer = forwardRef<HTMLDivElement, CodeViewerProps>(({ content, language, className, showLineNumbers = true, wrapLines = true }, ref) => {
+export const CodeViewer = forwardRef<HTMLDivElement, CodeViewerProps>(({ content, language, className, wrapLines = true }, ref) => {
+    const { resolvedTheme } = useTheme();
+
     return (
-        <div ref={ref} className={className}>
-            <SyntaxHighlighter
+        <div ref={ref} className={`h-full w-full ${className}`}>
+            <Editor
+                height="100%"
                 language={language}
-                style={atomDark}
-                wrapLines={wrapLines}
-                lineProps={{
-                    style: {
-                        wordBreak: 'break-all',
-                        whiteSpace: wrapLines ? 'pre-wrap' : 'pre',
-                    }
-                }}
-                customStyle={{
-                    margin: 0,
-                    padding: 0,
-                    background: 'transparent',
-                    fontFamily: 'inherit',
-                    fontSize: 'inherit',
-                    lineHeight: 'inherit',
-                }}
-                showLineNumbers={showLineNumbers}
-                lineNumberStyle={{
-                    minWidth: '3em',
-                    paddingRight: '1em',
-                    color: '#636e7b',
-                    textAlign: 'right',
-                    userSelect: 'none',
-                    opacity: 0.5
+                value={content}
+                theme={resolvedTheme === 'dark' ? 'vs-dark' : 'light'}
+                options={{
+                    readOnly: true,
+                    minimap: { enabled: false },
+                    fontSize: 13,
+                    wordWrap: wrapLines ? "on" : "off",
+                    automaticLayout: true,
+                    scrollBeyondLastLine: false,
+                    lineNumbers: "on",
+                    renderLineHighlight: "none",
+                    scrollbar: {
+                        vertical: "hidden",
+                        horizontal: "hidden"
+                    },
+                    overviewRulerLanes: 0,
+                    hideCursorInOverviewRuler: true,
+                    contextmenu: false,
+                    padding: { top: 8 }
                 }}
-            >
-                {content}
-            </SyntaxHighlighter>
+            />
         </div>
     );
 });
diff --git a/components/ui/resizable.tsx b/components/ui/resizable.tsx
index 29c67a0..af76aa6 100644
--- a/components/ui/resizable.tsx
+++ b/components/ui/resizable.tsx
@@ -6,10 +6,15 @@ import { Group, Panel, Separator } from "react-resizable-panels"
 
 import { cn } from "@/lib/utils"
 
+export interface ResizablePanelGroupProps extends React.ComponentProps<typeof Group> {
+  className?: string
+  direction: "horizontal" | "vertical"
+}
+
 function ResizablePanelGroup({
   className,
   ...props
-}: React.ComponentProps<typeof Group>) {
+}: ResizablePanelGroupProps) {
   return (
     <Group
       data-slot="resizable-panel-group"
@@ -22,10 +27,14 @@ function ResizablePanelGroup({
   )
 }
 
+export interface ResizablePanelProps extends React.ComponentProps<typeof Panel> {
+  className?: string
+}
+
 function ResizablePanel({
   className,
   ...props
-}: React.ComponentProps<typeof Panel>) {
+}: ResizablePanelProps) {
   return (
     <Panel
       data-slot="resizable-panel"
diff --git a/components/view/viewer-container.tsx b/components/view/viewer-container.tsx
index 5c0416e..6375fe8 100644
--- a/components/view/viewer-container.tsx
+++ b/components/view/viewer-container.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import React, { useState, useRef } from 'react';
+import React, { useState, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
 import { HTMLViewer } from '@/components/shared/html-viewer';
 import { CodeViewer } from '@/components/shared/code-viewer';
 import { TableViewer } from '@/components/shared/table-viewer';
-import { Format, ContainerProps } from '@/types';
+import { ContainerProps } from '@/types';
 import yaml from 'js-yaml';
 import * as prettier from 'prettier/standalone';
 import * as prettierPluginHtml from 'prettier/plugins/html';
@@ -15,10 +15,11 @@ import * as prettierPluginEstree from 'prettier/plugins/estree';
 import * as prettierPluginMarkdown from 'prettier/plugins/markdown';
 import { format as formatSql } from 'sql-formatter';
 import { Button } from "@/components/ui/button";
+import Editor from '@monaco-editor/react';
+import { useTheme } from 'next-themes';
 import {
     Code2,
     Eye,
-    Layout,
     Table as TableIcon,
     Maximize2,
     ExternalLink,
@@ -28,12 +29,10 @@ import {
     Copy,
     FileEdit,
     ChevronDown,
-    Zap,
-    Layers,
     Download,
     Trash2,
-    ListOrdered,
-    Type
+    Type,
+    Layout as LayoutIcon
 } from "lucide-react";
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -43,58 +42,30 @@ import {
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-
+import {
+    ResizableHandle,
+    ResizablePanel,
+    ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { useEditor } from '@/lib/hooks/use-editor';
 import { ALL_FORMATS, PREVIEWABLE_FORMATS, getLanguage } from '@/lib/formats';
+import { Separator } from '@/components/ui/separator';
 
 export function ViewerContainer({ initialContent, initialFormat }: ContainerProps) {
     const router = useRouter();
-    const [content, setContent] = useState(initialContent);
-    const [format, setFormat] = useState<Format>(initialFormat);
+    const { resolvedTheme } = useTheme();
+    const { content, setContent, format, setFormat } = useEditor({
+        initialContent,
+        initialFormat,
+    });
+
     const [activeTab, setActiveTab] = useState("preview");
     const [isFullscreen, setIsFullscreen] = useState(false);
     const [useBootstrap, setUseBootstrap] = useState(true);
     const [useTailwind, setUseTailwind] = useState(true);
-    const [enableJS, setEnableJS] = useState(true);
     const [showEditor, setShowEditor] = useState(true);
-    const [showLineNumbers, setShowLineNumbers] = useState(true);
-    const [wordWrap, setWordWrap] = useState(false);
-    const codeViewerRef = useRef<HTMLDivElement>(null);
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-    const [prevInitialContent, setPrevInitialContent] = useState(initialContent);
-    const [prevInitialFormat, setPrevInitialFormat] = useState(initialFormat);
-
-    React.useEffect(() => {
-        if (typeof window !== 'undefined') {
-            const saved = sessionStorage.getItem(`web-viewer-content-${format}`);
-            if (saved) {
-                setContent(saved);
-            }
-        }
-    }, [format]);
-
-    if (initialContent !== prevInitialContent || initialFormat !== prevInitialFormat) {
-        setPrevInitialContent(initialContent);
-        setPrevInitialFormat(initialFormat);
-
-        // Only update content from props if we don't have something in sessionStorage for this format
-        let hasSaved = false;
-        if (typeof window !== 'undefined') {
-            hasSaved = !!sessionStorage.getItem(`web-viewer-content-${initialFormat}`);
-        }
-
-        if (!hasSaved) {
-            setContent(initialContent);
-        }
-        setFormat(initialFormat);
-    }
-
-    const handleScroll = (e: React.UIEvent<HTMLTextAreaElement>) => {
-        if (codeViewerRef.current) {
-            codeViewerRef.current.scrollTop = e.currentTarget.scrollTop;
-            codeViewerRef.current.scrollLeft = e.currentTarget.scrollLeft;
-        }
-    };
+    const [wordWrap, setWordWrap] = useState<"on" | "off">("off");
 
     const handleClear = () => {
         if (confirm("Are you sure you want to clear the editor?")) {
@@ -133,7 +104,7 @@ export function ViewerContainer({ initialContent, initialFormat }: ContainerProp
                     'typescript': 'babel-ts',
                     'react': 'babel-ts',
                     'markdown': 'markdown',
-                    'xml': 'html', // Prettier doesn't have a native XML plugin without extra deps, but HTML often works for basics
+                    'xml': 'html',
                 };
 
                 const parser = parserMap[format];
@@ -159,52 +130,46 @@ export function ViewerContainer({ initialContent, initialFormat }: ContainerProp
         }
     };
 
-    let formattedContent = content;
-    try {
-        if (format === 'json') formattedContent = JSON.stringify(JSON.parse(content), null, 2);
-        else if (format === 'yaml') formattedContent = yaml.dump(yaml.load(content));
-    } catch (e) {
-        console.error(e);
-        formattedContent = content;
-    }
-
-    let tableData: Record<string, string>[] | null = null;
-    try {
-        if (format === 'json') {
-            const parsed = JSON.parse(content);
-            tableData = Array.isArray(parsed) ? parsed : null;
+    const formattedContent = useMemo(() => {
+        try {
+            if (format === 'json') return JSON.stringify(JSON.parse(content), null, 2);
+            if (format === 'yaml') return yaml.dump(yaml.load(content));
+        } catch {
+            return content;
         }
-        if (format === 'csv') {
-            const lines = content.trim().split('\n');
-            if (lines.length >= 2) {
-                const headers = lines[0].split(',');
-                tableData = lines.slice(1).map((line: string) => {
-                    const values = line.split(',');
-                    return headers.reduce((acc: Record<string, string>, header: string, i: number) => ({ ...acc, [header]: values[i] }), {});
-                });
+        return content;
+    }, [content, format]);
+
+    const tableData = useMemo(() => {
+        try {
+            if (format === 'json') {
+                const parsed = JSON.parse(content);
+                return Array.isArray(parsed) ? parsed : null;
+            }
+            if (format === 'csv') {
+                const lines = content.trim().split('\n');
+                if (lines.length >= 2) {
+                    const headers = lines[0].split(',');
+                    return lines.slice(1).map((line: string) => {
+                        const values = line.split(',');
+                        return headers.reduce((acc: Record<string, string>, header: string, i: number) => ({ ...acc, [header]: values[i] }), {});
+                    });
+                }
             }
+        } catch {
+            return null;
         }
-    } catch (e) {
-        console.error(e);
-        tableData = null;
-    }
+        return null;
+    }, [content, format]);
 
-    const handleTableDataChange = (newData: Record<string, string>[]) => {
-        if (format === 'json') setContent(JSON.stringify(newData, null, 2));
-        else if (format === 'csv' && newData.length > 0) {
-            const headers = Object.keys(newData[0]);
-            setContent([headers.join(','), ...newData.map(row => headers.map(h => row[h]).join(','))].join('\n'));
-        }
-    };
-
-    const canEditTable = (format === 'json' && Array.isArray(tableData)) || format === 'csv';
+    const canPreviewTable = (format === 'json' && Array.isArray(tableData)) || format === 'csv';
 
     const openFullPage = () => {
         const htmlContent = `
             <!DOCTYPE html>
             <html>
                 <head>
-                    <title>Preview - Web Utils Pro</title>
+                    <title>Preview - Web Utils</title>
                     <meta charset="utf-8">
                     <meta name="viewport" content="width=device-width, initial-scale=1">
                     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
@@ -222,239 +187,190 @@ export function ViewerContainer({ initialContent, initialFormat }: ContainerProp
         window.open(url, '_blank');
     };
 
-    const jumpToEditor = () => {
-        router.push('/editor');
-    };
-
     return (
-        <div className={`flex flex-col w-full bg-white dark:bg-zinc-950 transition-all duration-300 ${isFullscreen ? "fixed inset-0 z-[200] h-screen" : "h-[calc(100vh-64px)]"}`}>
-            {/* Top Toolbar */}
-            <div className="flex flex-col border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/50 backdrop-blur-md">
-                <div className="flex items-center justify-between px-6 py-2 gap-4">
-                    <div className="flex items-center gap-4">
-                        <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" className="h-8 px-3 text-[10px] font-black uppercase tracking-widest text-zinc-500 gap-2">
-                                    <span className="text-zinc-600 dark:text-zinc-300">{format}</span>
-                                    <ChevronDown className="size-3" />
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="start" className="min-w-[150px] rounded-lg">
-                                {ALL_FORMATS.slice(0, 10).map((fmt) => (
-                                    <DropdownMenuItem key={fmt} onClick={() => setFormat(fmt)} className="text-[10px] font-bold uppercase tracking-wider">
-                                        {fmt}
-                                    </DropdownMenuItem>
-                                ))}
-                            </DropdownMenuContent>
-                        </DropdownMenu>
+        <div className={`flex flex-col w-full bg-background transition-all duration-300 ${isFullscreen ? "fixed inset-0 z-[200] h-screen" : "h-[calc(100vh-64px)]"}`}>
+            {/* Minimalist Top Toolbar */}
+            <div className="flex items-center justify-between px-6 h-14 border-b bg-muted/20 backdrop-blur-md">
+                <div className="flex items-center gap-4">
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" size="sm" className="h-8 px-3 text-xs font-bold uppercase tracking-widest text-muted-foreground gap-2">
+                                <span className="text-foreground">{format}</span>
+                                <ChevronDown className="size-3" />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start" className="min-w-[150px]">
+                            {ALL_FORMATS.slice(0, 10).map((fmt) => (
+                                <DropdownMenuItem key={fmt} onClick={() => setFormat(fmt)} className="text-[10px] font-bold uppercase">
+                                    {fmt}
+                                </DropdownMenuItem>
+                            ))}
+                        </DropdownMenuContent>
+                    </DropdownMenu>
 
-                        <div className="h-4 w-px bg-zinc-200 dark:bg-zinc-800" />
+                    <Separator orientation="vertical" className="h-4" />
 
-                        <Button
-                            variant="outline"
-                            size="sm"
-                            onClick={jumpToEditor}
-                            className="h-8 border-transparent hover:border-zinc-200 dark:hover:border-zinc-700 bg-white dark:bg-zinc-800 shadow-sm text-xs font-bold gap-2"
-                        >
-                            <FileEdit className="size-3.5" /> Jump to Editor
-                        </Button>
-                    </div>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => router.push('/editor')}
+                        className="h-8 text-xs font-semibold gap-2"
+                    >
+                        <FileEdit className="size-3.5" /> Open in Editor
+                    </Button>
+                </div>
 
-                    <div className="flex items-center gap-2">
-                        <Button
-                            variant="ghost"
-                            size="icon"
-                            className="size-8 rounded-lg text-zinc-500"
-                            onClick={() => setShowEditor(!showEditor)}
-                            title={showEditor ? "Close Source Code" : "Open Source Code"}
-                        >
-                            {showEditor ? <PanelLeftClose className="size-4" /> : <PanelLeftOpen className="size-4" />}
-                        </Button>
-                        <Button variant="ghost" size="icon" className="size-8 rounded-lg text-zinc-500" onClick={() => setIsFullscreen(!isFullscreen)}>
-                            <Maximize2 className="size-4" />
-                        </Button>
-                    </div>
+                <div className="flex items-center gap-2">
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        className="size-8 rounded-md text-muted-foreground"
+                        onClick={() => setShowEditor(!showEditor)}
+                    >
+                        {showEditor ? <PanelLeftClose className="size-4" /> : <PanelLeftOpen className="size-4" />}
+                    </Button>
+                    <Button variant="ghost" size="icon" className="size-8 rounded-md text-muted-foreground" onClick={() => setIsFullscreen(!isFullscreen)}>
+                        <Maximize2 className="size-4" />
+                    </Button>
                 </div>
             </div>
 
-            {/* Split Editor/Preview */}
+            {/* Split UI with Resizable Panels */}
             <div className="flex-1 flex overflow-hidden">
-                {/* Left: Syntax Highlighted Editor */}
-                {showEditor && (
-                    <div className="flex-1 flex flex-col border-r border-zinc-200 dark:border-zinc-800 bg-zinc-50/20 dark:bg-zinc-900/10 transition-all duration-300">
-                        <div className="flex items-center justify-between px-4 py-2 border-b border-zinc-200 dark:border-zinc-800 bg-white/50 dark:bg-zinc-900/50">
-                            <div className="flex items-center gap-2">
-                                <Code2 className="size-4 text-indigo-500" />
-                                <span className="text-[10px] font-black uppercase tracking-widest text-zinc-400">Live Editor</span>
-                            </div>
-                            <div className="flex items-center gap-3">
-                                {format === 'html' && (
-                                    <div className="flex items-center gap-2">
-                                        <button
-                                            onClick={() => setUseBootstrap(!useBootstrap)}
-                                            className={`flex items-center gap-1.5 px-2 py-1 rounded-md text-[10px] font-bold uppercase tracking-wider transition-all border ${useBootstrap ? "bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 border-indigo-200 dark:border-indigo-800" : "text-zinc-400 border-transparent hover:bg-zinc-100 dark:hover:bg-zinc-800"}`}
-                                        >
-                                            <Layers className="size-3" /> Bootstrap
-                                        </button>
-                                        <button
-                                            onClick={() => setUseTailwind(!useTailwind)}
-                                            className={`flex items-center gap-1.5 px-2 py-1 rounded-md text-[10px] font-bold uppercase tracking-wider transition-all border ${useTailwind ? "bg-cyan-50 dark:bg-cyan-900/20 text-cyan-600 border-cyan-200 dark:border-cyan-800" : "text-zinc-400 border-transparent hover:bg-zinc-100 dark:hover:bg-zinc-800"}`}
-                                        >
-                                            <Zap className="size-3" /> Tailwind
-                                        </button>
-                                        <div className="h-3 w-px bg-zinc-200 dark:bg-zinc-800 mx-1" />
-                                        <button
-                                            onClick={() => setEnableJS(!enableJS)}
-                                            className={`flex items-center gap-1.5 px-2 py-1 rounded-md text-[10px] font-bold uppercase tracking-wider transition-all border ${enableJS ? "bg-yellow-50 dark:bg-yellow-900/20 text-yellow-600 border-yellow-200 dark:border-yellow-800" : "text-zinc-400 border-transparent hover:bg-zinc-100 dark:hover:bg-zinc-800"}`}
-                                        >
-                                            <Code2 className="size-3" /> JavaScript
-                                        </button>
+                <ResizablePanelGroup direction="horizontal">
+                    {showEditor && (
+                        <>
+                            <ResizablePanel defaultSize={40} minSize={20}>
+                                <div className="flex flex-col h-full border-r bg-muted/5">
+                                    <div className="flex items-center justify-between px-4 h-11 border-b bg-muted/10">
+                                        <div className="flex items-center gap-2">
+                                            <Code2 className="size-4 text-primary" />
+                                            <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">Source</span>
+                                        </div>
+                                        <div className="flex items-center gap-1">
+                                            <Button variant="ghost" size="icon" onClick={handleFormat} className="size-7" title="Format">
+                                                <AlignLeft className="size-3.5" />
+                                            </Button>
+                                            <Button variant="ghost" size="icon" onClick={() => setWordWrap(wordWrap === "on" ? "off" : "on")} className="size-7" title="Wrap">
+                                                <Type className="size-3.5" />
+                                            </Button>
+                                            <Separator orientation="vertical" className="h-4 mx-1" />
+                                            <Button variant="ghost" size="icon" onClick={() => navigator.clipboard.writeText(content)} className="size-7">
+                                                <Copy className="size-3.5" />
+                                            </Button>
+                                            <Button variant="ghost" size="icon" onClick={handleDownload} className="size-7">
+                                                <Download className="size-3.5" />
+                                            </Button>
+                                            <Button variant="ghost" size="icon" onClick={handleClear} className="size-7 text-destructive">
+                                                <Trash2 className="size-3.5" />
+                                            </Button>
+                                        </div>
+                                    </div>
+                                    <div className="flex-1 relative overflow-hidden">
+                                        <Editor
+                                            height="100%"
+                                            language={getLanguage(format)}
+                                            value={content}
+                                            onChange={(value) => setContent(value || "")}
+                                            theme={resolvedTheme === 'dark' ? 'vs-dark' : 'light'}
+                                            options={{
+                                                minimap: { enabled: false },
+                                                fontSize: 13,
+                                                wordWrap: wordWrap,
+                                                automaticLayout: true,
+                                                padding: { top: 16 },
+                                                lineNumbersMinChars: 3,
+                                                scrollBeyondLastLine: false,
+                                            }}
+                                        />
                                     </div>
-                                )}
-                                <div className="h-3 w-px bg-zinc-200 dark:bg-zinc-800" />
-                                <div className="flex items-center gap-2">
-                                    <button
-                                        onClick={() => setShowLineNumbers(!showLineNumbers)}
-                                        className={`flex items-center gap-1.5 px-2 py-1 rounded-md text-[10px] font-bold uppercase tracking-wider transition-all border ${showLineNumbers ? "bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 border-indigo-200 dark:border-indigo-800" : "text-zinc-400 border-transparent hover:bg-zinc-100 dark:hover:bg-zinc-800"}`}
-                                        title="Toggle Line Numbers"
-                                    >
-                                        <ListOrdered className="size-3" /> Lines
-                                    </button>
-                                    <button
-                                        onClick={() => setWordWrap(!wordWrap)}
-                                        className={`flex items-center gap-1.5 px-2 py-1 rounded-md text-[10px] font-bold uppercase tracking-wider transition-all border ${wordWrap ? "bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 border-indigo-200 dark:border-indigo-800" : "text-zinc-400 border-transparent hover:bg-zinc-100 dark:hover:bg-zinc-800"}`}
-                                        title="Toggle Word Wrap"
-                                    >
-                                        <Type className="size-3" /> Wrap
-                                    </button>
-                                </div>
-                                <div className="h-3 w-px bg-zinc-200 dark:bg-zinc-800" />
-                                <div className="flex items-center gap-2">
-                                    <button
-                                        onClick={handleFormat}
-                                        className="flex items-center gap-1 px-2 py-1 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded text-zinc-400 hover:text-indigo-500 transition-colors"
-                                        title="Format Code"
-                                    >
-                                        <AlignLeft className="size-3" />
-                                        <span className="text-[10px] font-bold">Format</span>
-                                    </button>
-                                    <button
-                                        onClick={() => navigator.clipboard.writeText(content)}
-                                        className="flex items-center gap-1 px-2 py-1 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded text-zinc-400 hover:text-indigo-500 transition-colors"
-                                        title="Copy Code"
-                                    >
-                                        <Copy className="size-3" />
-                                        <span className="text-[10px] font-bold">Copy</span>
-                                    </button>
-                                    <button
-                                        onClick={handleDownload}
-                                        className="flex items-center gap-1 px-2 py-1 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded text-zinc-400 hover:text-indigo-500 transition-colors"
-                                        title="Download File"
-                                    >
-                                        <Download className="size-3" />
-                                        <span className="text-[10px] font-bold">Save</span>
-                                    </button>
-                                    <button
-                                        onClick={handleClear}
-                                        className="flex items-center gap-1 px-2 py-1 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded text-zinc-400 hover:text-red-500 transition-colors"
-                                        title="Clear Editor"
-                                    >
-                                        <Trash2 className="size-3" />
-                                        <span className="text-[10px] font-bold">Clear</span>
-                                    </button>
                                 </div>
-                            </div>
-                        </div>
-
-                        <div className="flex-1 relative overflow-hidden custom-scrollbar">
-                            <CodeViewer
-                                ref={codeViewerRef}
-                                content={content}
-                                language={getLanguage(format)}
-                                className={`viewer-code-view absolute inset-0 pointer-events-none p-6 font-mono text-sm leading-[1.5] border-none rounded-none overflow-hidden ${showLineNumbers ? "" : "pl-6"}`}
-                                showLineNumbers={showLineNumbers}
-                                wrapLines={wordWrap}
-                            />
-                            <textarea
-                                ref={textareaRef}
-                                className={`absolute inset-0 w-full h-full p-6 font-mono text-sm bg-transparent resize-none outline-none focus:ring-0 text-transparent caret-zinc-800 dark:caret-zinc-200 leading-[1.5] custom-scrollbar z-10 ${wordWrap ? "whitespace-pre-wrap break-all" : "whitespace-pre"} ${showLineNumbers ? "pl-[calc(3em+2.5rem)]" : "pl-6"}`}
-                                value={content}
-                                onChange={(e) => setContent(e.target.value)}
-                                onScroll={handleScroll}
-                                placeholder={`Paste ${format.toUpperCase()}...`}
-                                spellCheck={false}
-                                autoCapitalize="off"
-                                autoComplete="off"
-                                autoCorrect="off"
-                            />
-                        </div>
-                    </div>
-                )}
+                            </ResizablePanel>
+                            <ResizableHandle withHandle />
+                        </>
+                    )}
 
-                {/* Right: Correct Preview */}
-                <div className="flex-1 flex flex-col overflow-hidden bg-white dark:bg-zinc-950">
-                    <div className="flex items-center justify-between px-4 py-2 border-b border-zinc-200 dark:border-zinc-800 bg-white/50 dark:bg-zinc-900/50">
-                        <div className="flex gap-1 p-1 bg-zinc-100 dark:bg-zinc-800 rounded-lg">
-                            <button onClick={() => setActiveTab("preview")} className={`px-4 py-1.5 rounded-md text-[10px] font-bold uppercase tracking-wider transition-all flex items-center gap-2 ${activeTab === "preview" ? "bg-white dark:bg-zinc-700 text-indigo-600 shadow-sm" : "text-zinc-500"}`}>
-                                <Eye className="size-3.5" /> Preview
-                            </button>
+                    <ResizablePanel defaultSize={showEditor ? 60 : 100}>
+                        <div className="flex flex-col h-full bg-background">
+                            <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col overflow-hidden">
+                                <div className="flex items-center justify-between px-4 h-11 border-b bg-muted/10">
+                                    <TabsList className="h-8 bg-muted/50">
+                                        <TabsTrigger value="preview" className="text-[10px] font-bold uppercase py-1.5 h-7">
+                                            <Eye className="size-3 mr-2" /> Preview
+                                        </TabsTrigger>
+                                        {canPreviewTable && (
+                                            <TabsTrigger value="table" className="text-[10px] font-bold uppercase py-1.5 h-7">
+                                                <TableIcon className="size-3 mr-2" /> Data
+                                            </TabsTrigger>
+                                        )}
+                                    </TabsList>
+                                    
+                                    <div className="flex items-center gap-2">
+                                        {format === 'html' && (
+                                            <div className="flex items-center gap-1">
+                                                <Button 
+                                                    variant={useBootstrap ? "secondary" : "ghost"} 
+                                                    size="sm" 
+                                                    className="h-7 text-[10px] uppercase px-2 font-bold"
+                                                    onClick={() => setUseBootstrap(!useBootstrap)}
+                                                >
+                                                    BS
+                                                </Button>
+                                                <Button 
+                                                    variant={useTailwind ? "secondary" : "ghost"} 
+                                                    size="sm" 
+                                                    className="h-7 text-[10px] uppercase px-2 font-bold"
+                                                    onClick={() => setUseTailwind(!useTailwind)}
+                                                >
+                                                    TW
+                                                </Button>
+                                            </div>
+                                        )}
+                                        <Button variant="outline" size="sm" className="h-7 text-[10px] font-bold uppercase rounded-md px-3" onClick={openFullPage}>
+                                            <ExternalLink className="size-3 mr-2" /> Full Page
+                                        </Button>
+                                    </div>
+                                </div>
 
-                            {canEditTable && (
-                                <button onClick={() => setActiveTab("interactive")} className={`px-4 py-1.5 rounded-md text-[10px] font-bold uppercase tracking-wider transition-all flex items-center gap-2 ${activeTab === "interactive" ? "bg-white dark:bg-zinc-700 text-indigo-600 shadow-sm" : "text-zinc-500"}`}>
-                                    <TableIcon className="size-3.5" /> Data Table
-                                </button>
-                            )}
-                        </div>
-                        <div className="flex items-center gap-2">
-                            <Button variant="outline" size="sm" className="h-7 text-[10px] font-bold gap-1 rounded-md px-2" onClick={openFullPage}>
-                                <ExternalLink className="size-3" /> Full Page
-                            </Button>
-                        </div>
-                    </div>
+                                <TabsContent value="preview" className="flex-1 relative overflow-auto m-0 p-0 border-none">
+                                    <div className="absolute inset-0">
+                                        {format === 'html' && <HTMLViewer content={content} useBootstrap={useBootstrap} useTailwind={useTailwind} enableJS={true} />}
+                                        {format === 'json' && <div className="p-4 bg-background h-full overflow-auto"><CodeViewer content={formattedContent} language="json" /></div>}
+                                        {format === 'markdown' && (
+                                            <div className="prose prose-zinc dark:prose-invert max-w-none bg-background p-8 min-h-full">
+                                                <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+                                            </div>
+                                        )}
+                                        {format === 'svg' && (
+                                            <div className="flex items-center justify-center p-8 bg-background min-h-full" dangerouslySetInnerHTML={{ __html: content }} />
+                                        )}
+                                        {format === 'csv' && <div className="p-4 bg-background min-h-full"><TableViewer data={tableData || []} onDataChange={(newData) => {
+                                            const headers = Object.keys(newData[0]);
+                                            setContent([headers.join(','), ...newData.map(row => headers.map(h => row[h]).join(','))].join('\n'));
+                                        }} /></div>}
+                                        {!PREVIEWABLE_FORMATS.includes(format) && (
+                                            <div className="flex flex-col items-center justify-center text-center h-full p-20 opacity-30">
+                                                <LayoutIcon className="size-16 mb-4 text-primary" />
+                                                <p className="text-sm font-bold uppercase tracking-widest">No Live Preview</p>
+                                            </div>
+                                        )}
+                                    </div>
+                                </TabsContent>
 
-                    <div className="flex-1 overflow-auto bg-zinc-50/30 dark:bg-transparent custom-scrollbar relative">
-                        <div className="absolute inset-0">
-                            {activeTab === "preview" && (
-                                <div className="p-0 h-full flex flex-col">
-                                    {format === 'html' && <HTMLViewer content={content} useBootstrap={useBootstrap} useTailwind={useTailwind} enableJS={enableJS} />}
-                                    {format === 'json' && <div className="p-4 bg-white dark:bg-zinc-900 border-none shadow-sm h-full overflow-auto"><CodeViewer content={formattedContent} language="json" /></div>}
-                                    {format === 'markdown' && (
-                                        <div className="prose prose-zinc dark:prose-invert max-w-none bg-white dark:bg-zinc-900 p-8 border-none min-h-full shadow-sm">
-                                            <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
-                                        </div>
-                                    )}
-                                    {format === 'svg' && (
-                                        <div className="flex items-center justify-center p-8 bg-white dark:bg-zinc-900 border-none min-h-full shadow-sm" dangerouslySetInnerHTML={{ __html: content }} />
-                                    )}
-                                    {format === 'csv' && <div className="p-4"><TableViewer data={tableData || []} onDataChange={handleTableDataChange} /></div>}
-                                    {!PREVIEWABLE_FORMATS.includes(format) && (
-                                        <div className="flex flex-col items-center justify-center text-center h-full p-20 opacity-40">
-                                            <Layout className="size-16 mb-4 text-indigo-500" />
-                                            <p className="text-sm font-bold uppercase tracking-widest">No Preview Format Available</p>
-                                        </div>
-                                    )}
-                                </div>
-                            )}
-                            {activeTab === "interactive" && <div className="p-8"><TableViewer data={tableData || []} onDataChange={handleTableDataChange} /></div>}
+                                <TabsContent value="table" className="flex-1 overflow-auto m-0 p-8 border-none bg-background">
+                                    <TableViewer data={tableData || []} onDataChange={(newData) => {
+                                        if (format === 'json') setContent(JSON.stringify(newData, null, 2));
+                                        else if (format === 'csv') {
+                                            const headers = Object.keys(newData[0]);
+                                            setContent([headers.join(','), ...newData.map(row => headers.map(h => row[h]).join(','))].join('\n'));
+                                        }
+                                    }} />
+                                </TabsContent>
+                            </Tabs>
                         </div>
-                    </div>
-                </div>
+                    </ResizablePanel>
+                </ResizablePanelGroup>
             </div>
-
-            <style jsx global>{`
-                .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
-                .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
-                .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(161, 161, 170, 0.2); border-radius: 10px; }
-                .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(161, 161, 170, 0.4); }
-                
-                /* Editor Typography Alignment */
-                textarea { font-family: 'Menlo', 'Monaco', 'Courier New', monospace !important; font-variant-ligatures: none; letter-spacing: normal; tab-size: 4; }
-                .viewer-code-view { font-family: 'Menlo', 'Monaco', 'Courier New', monospace !important; scrollbar-gutter: stable; font-variant-ligatures: none; letter-spacing: normal; tab-size: 4; }
-                .viewer-code-view code, .viewer-code-view pre { font-family: 'Menlo', 'Monaco', 'Courier New', monospace !important; tab-size: 4; }
-                
-                /* Match textarea scrollbar behavior */
-                textarea { scrollbar-gutter: stable; }
-            `}</style>
         </div>
     );
 }
diff --git a/components/workspace/workspace-container.tsx b/components/workspace/workspace-container.tsx
new file mode 100644
index 0000000..f893888
--- /dev/null
+++ b/components/workspace/workspace-container.tsx
@@ -0,0 +1,386 @@
+"use client";
+
+import React, { useState, useRef, useMemo } from 'react';
+import { useRouter } from 'next/navigation';
+import { Button } from "@/components/ui/button";
+import Editor, { OnMount } from '@monaco-editor/react';
+import { useTheme } from 'next-themes';
+import {
+    FileEdit,
+    Terminal as TerminalIcon,
+    Table as TableIcon,
+    Code,
+    Eye,
+    Copy as CopyIcon,
+    Check,
+    Braces,
+    Layout,
+    ChevronDown,
+    Maximize2,
+    PanelLeftClose,
+    PanelLeftOpen,
+} from "lucide-react";
+import { TableViewer } from '@/components/shared/table-viewer';
+import { HTMLViewer } from '@/components/shared/html-viewer';
+import { CodeViewer } from '@/components/shared/code-viewer';
+import { JsonTreeViewer } from '@/components/json/tree-viewer';
+import { ContainerProps, Format } from '@/types';
+import yaml from 'js-yaml';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+    ResizableHandle,
+    ResizablePanel,
+    ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { useEditor } from '@/lib/hooks/use-editor';
+import { PREVIEWABLE_FORMATS, ALL_FORMATS, getLanguage } from '@/lib/formats';
+import { Separator } from '@/components/ui/separator';
+import { format as formatSql } from 'sql-formatter';
+import * as prettier from 'prettier/standalone';
+import * as prettierPluginHtml from 'prettier/plugins/html';
+import * as prettierPluginPostcss from 'prettier/plugins/postcss';
+import * as prettierPluginBabel from 'prettier/plugins/babel';
+import * as prettierPluginEstree from 'prettier/plugins/estree';
+import * as prettierPluginMarkdown from 'prettier/plugins/markdown';
+
+export function WorkspaceContainer({ initialContent, initialFormat }: ContainerProps) {
+    const { resolvedTheme } = useTheme();
+    const { content, setContent, format, setFormat, isSaved, setIsSaved } = useEditor({
+        initialContent,
+        initialFormat,
+    });
+
+    // Shell State
+    const [terminalInput, setTerminalInput] = useState('');
+    const [terminalOutput, setTerminalOutput] = useState<string[]>([
+        'system: workspace activated',
+        'system: terminal ready'
+    ]);
+
+    // UI State
+    const [fileName, setFileName] = useState(`index.${getLanguage(initialFormat)}`);
+    const [copied, setCopied] = useState(false);
+    const [wordWrap, setWordWrap] = useState<"on" | "off">("on");
+    const [showEditor, setShowEditor] = useState(true);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [activeTab, setActiveTab] = useState("preview");
+    const [cursorPos, setCursorPos] = useState({ line: 1, col: 1 });
+    const editorRef = useRef<any>(null); // eslint-disable-line @typescript-eslint/no-explicit-any
+
+    // Preview Settings
+    const [useBootstrap] = useState(true);
+    const [useTailwind] = useState(true);
+
+    const handleEditorDidMount: OnMount = (editor) => {
+        editorRef.current = editor;
+        editor.onDidChangeCursorPosition((e) => {
+            setCursorPos({
+                line: e.position.lineNumber,
+                col: e.position.column
+            });
+        });
+    };
+
+    const handleFormatChange = (newFormat: Format) => {
+        setFormat(newFormat);
+        const namePart = fileName.substring(0, fileName.lastIndexOf('.')) || fileName;
+        setFileName(`${namePart}.${getLanguage(newFormat)}`);
+    };
+
+    const handleCopy = () => {
+        navigator.clipboard.writeText(content);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+
+    const handleAutoFormat = async () => {
+        try {
+            if (format === 'json') {
+                const parsed = JSON.parse(content);
+                setContent(JSON.stringify(parsed, null, 2));
+            } else if (format === 'yaml') {
+                const parsed = yaml.load(content);
+                setContent(yaml.dump(parsed));
+            } else if (format === 'sql') {
+                setContent(formatSql(content));
+            } else {
+                const parserMap: Record<string, string> = {
+                    'html': 'html',
+                    'css': 'css',
+                    'javascript': 'babel',
+                    'typescript': 'babel-ts',
+                    'react': 'babel-ts',
+                    'markdown': 'markdown',
+                    'xml': 'html',
+                };
+                const parser = parserMap[format];
+                if (parser) {
+                    const formatted = await prettier.format(content, {
+                        parser,
+                        plugins: [
+                            prettierPluginHtml,
+                            prettierPluginPostcss,
+                            prettierPluginBabel,
+                            prettierPluginEstree,
+                            prettierPluginMarkdown
+                        ],
+                        semi: true,
+                        singleQuote: true,
+                        tabWidth: 2,
+                    });
+                    setContent(formatted);
+                }
+            }
+            setIsSaved(true);
+            setTerminalOutput(prev => [...prev, 'system: code formatted successfully']);
+        } catch (e) {
+            console.error(e);
+            setTerminalOutput(prev => [...prev, `error: format failed - ${e instanceof Error ? e.message : 'unknown'}`]);
+        }
+    };
+
+    const handleTerminalSubmit = () => {
+        if (!terminalInput.trim()) return;
+        const cmd = terminalInput.toLowerCase().trim();
+        const newOutput = [...terminalOutput, `$ ${terminalInput}`];
+
+        switch(cmd) {
+            case 'help':
+                newOutput.push('available commands: clear, format, time, stats, info');
+                break;
+            case 'clear':
+                setTerminalOutput([]);
+                setTerminalInput('');
+                return;
+            case 'format':
+                handleAutoFormat();
+                break;
+            case 'time':
+                newOutput.push(`epoch: ${Math.floor(Date.now() / 1000)}`);
+                break;
+            case 'stats':
+                newOutput.push(`chars: ${content.length}`);
+                newOutput.push(`lines: ${content.split('\n').length}`);
+                break;
+            case 'info':
+                newOutput.push(`format: ${format}`);
+                newOutput.push(`file: ${fileName}`);
+                break;
+            default:
+                newOutput.push(`error: command not found: ${cmd}`);
+        }
+        setTerminalOutput(newOutput);
+        setTerminalInput('');
+    };
+
+    const isTabularData = useMemo(() => {
+        try {
+            const parsed = JSON.parse(content);
+            return Array.isArray(parsed) && parsed.length > 0 && typeof parsed[0] === 'object';
+        } catch {
+            return false;
+        }
+    }, [content]);
+
+    const parsedJson = useMemo(() => {
+        try { return JSON.parse(content); } catch { return null; }
+    }, [content]);
+
+    return (
+        <div className={`flex flex-col w-full bg-background transition-all duration-300 ${isFullscreen ? "fixed inset-0 z-[200] h-screen" : "h-[calc(100vh-56px)]"}`}>
+            {/* Unified Workspace Toolbar */}
+            <div className="flex items-center justify-between px-4 h-14 border-b bg-muted/20 backdrop-blur-md">
+                <div className="flex items-center gap-4">
+                    <div className="flex items-center gap-2">
+                        <div className="p-1.5 bg-primary/10 rounded-md">
+                            <FileEdit className="size-4 text-primary" />
+                        </div>
+                        <input
+                            type="text"
+                            value={fileName}
+                            onChange={(e) => setFileName(e.target.value)}
+                            className="bg-transparent border-none outline-none text-sm font-semibold text-foreground min-w-[140px]"
+                            spellCheck={false}
+                        />
+                        {!isSaved && <div className="size-2 rounded-full bg-amber-500 animate-pulse" />}
+                    </div>
+
+                    <Separator orientation="vertical" className="h-6" />
+
+                    <div className="flex items-center gap-1">
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button variant="ghost" size="sm" className="h-8 text-xs font-medium uppercase tracking-widest text-muted-foreground gap-2">
+                                    <span className="text-foreground">{format}</span>
+                                    <ChevronDown className="size-3" />
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="start" className="w-[180px]">
+                                {ALL_FORMATS.slice(0, 10).map((fmt) => (
+                                    <DropdownMenuItem key={fmt} onClick={() => handleFormatChange(fmt as Format)} className="text-xs uppercase">
+                                        {fmt}
+                                    </DropdownMenuItem>
+                                ))}
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                        
+                        <Button variant="ghost" size="sm" onClick={() => setWordWrap(wordWrap === "on" ? "off" : "on")} className="h-8 text-[10px] font-bold uppercase text-muted-foreground">
+                            Wrap: {wordWrap}
+                        </Button>
+                    </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                    <Button variant="outline" size="sm" onClick={handleAutoFormat} className="h-8 text-xs font-semibold gap-2">
+                        Format
+                    </Button>
+                    <Button variant="outline" size="sm" onClick={handleCopy} className="h-8 text-xs font-semibold gap-2">
+                        {copied ? <Check className="size-3.5" /> : <CopyIcon className="size-3.5" />}
+                        {copied ? "Copied" : "Copy"}
+                    </Button>
+                    <Separator orientation="vertical" className="h-6 mx-1" />
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        className="size-8 rounded-md text-muted-foreground"
+                        onClick={() => setShowEditor(!showEditor)}
+                    >
+                        {showEditor ? <PanelLeftClose className="size-4" /> : <PanelLeftOpen className="size-4" />}
+                    </Button>
+                    <Button variant="ghost" size="icon" className="size-8 rounded-md text-muted-foreground" onClick={() => setIsFullscreen(!isFullscreen)}>
+                        <Maximize2 className="size-4" />
+                    </Button>
+                </div>
+            </div>
+
+            {/* Main Split Canvas */}
+            <div className="flex-1 flex overflow-hidden">
+                <ResizablePanelGroup direction="horizontal">
+                    {showEditor && (
+                        <>
+                            <ResizablePanel defaultSize={50} minSize={20}>
+                                <div className="flex flex-col h-full relative">
+                                    <Editor
+                                        height="100%"
+                                        language={getLanguage(format)}
+                                        value={content}
+                                        onChange={(value) => setContent(value || "")}
+                                        onMount={handleEditorDidMount}
+                                        theme={resolvedTheme === 'dark' ? 'vs-dark' : 'light'}
+                                        options={{
+                                            minimap: { enabled: false },
+                                            fontSize: 14,
+                                            wordWrap: wordWrap,
+                                            automaticLayout: true,
+                                            padding: { top: 16 },
+                                            lineNumbersMinChars: 3,
+                                            scrollBeyondLastLine: false,
+                                        }}
+                                    />
+                                    {/* Subtle Editor Footer */}
+                                    <div className="absolute bottom-0 right-4 h-6 flex items-center gap-4 text-[10px] font-bold text-muted-foreground/40 uppercase z-10 pointer-events-none">
+                                        <span>Line {cursorPos.line}, Col {cursorPos.col}</span>
+                                        <span>{content.length} characters</span>
+                                    </div>
+                                </div>
+                            </ResizablePanel>
+                            <ResizableHandle withHandle />
+                        </>
+                    )}
+
+                    <ResizablePanel defaultSize={showEditor ? 50 : 100}>
+                        <div className="flex flex-col h-full bg-background border-l">
+                            <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col overflow-hidden">
+                                <div className="flex items-center justify-between px-4 h-11 border-b bg-muted/10">
+                                    <TabsList className="h-8 bg-muted/50">
+                                        <TabsTrigger value="preview" className="text-[10px] font-bold uppercase py-1.5 h-7">
+                                            <Eye className="size-3 mr-2" /> Preview
+                                        </TabsTrigger>
+                                        <TabsTrigger value="viewer" className="text-[10px] font-bold uppercase py-1.5 h-7">
+                                            <Code className="size-3 mr-2" /> Source
+                                        </TabsTrigger>
+                                        {isTabularData && (
+                                            <TabsTrigger value="table" className="text-[10px] font-bold uppercase py-1.5 h-7">
+                                                <TableIcon className="size-3 mr-2" /> Data
+                                            </TabsTrigger>
+                                        )}
+                                        {format === 'json' && (
+                                            <TabsTrigger value="tree" className="text-[10px] font-bold uppercase py-1.5 h-7">
+                                                <Braces className="size-3 mr-2" /> Tree
+                                            </TabsTrigger>
+                                        )}
+                                        <TabsTrigger value="terminal" className="text-[10px] font-bold uppercase py-1.5 h-7">
+                                            <TerminalIcon className="size-3 mr-2" /> Shell
+                                        </TabsTrigger>
+                                    </TabsList>
+                                </div>
+
+                                <div className="flex-1 relative overflow-hidden">
+                                    <TabsContent value="preview" className="h-full m-0 p-0 border-none transition-all">
+                                        {format === 'html' ? (
+                                            <HTMLViewer content={content} useBootstrap={useBootstrap} useTailwind={useTailwind} enableJS={true} />
+                                        ) : format === 'markdown' ? (
+                                            <div className="prose prose-zinc dark:prose-invert max-w-none bg-background p-8 min-h-full">
+                                                <CodeViewer content={content} language="markdown" wrapLines={true} />
+                                            </div>
+                                        ) : format === 'svg' ? (
+                                            <div className="flex items-center justify-center p-8 bg-background h-full overflow-auto" dangerouslySetInnerHTML={{ __html: content }} />
+                                        ) : (
+                                            <div className="flex flex-col items-center justify-center text-center h-full p-20 opacity-30">
+                                                <Layout className="size-16 mb-4 text-primary" />
+                                                <p className="text-sm font-bold uppercase tracking-widest">No Live Preview</p>
+                                            </div>
+                                        )}
+                                    </TabsContent>
+
+                                    <TabsContent value="viewer" className="h-full m-0 p-0 bg-background">
+                                        <CodeViewer content={content} language={getLanguage(format)} wrapLines={wordWrap === 'on'} />
+                                    </TabsContent>
+
+                                    <TabsContent value="table" className="h-full m-0 p-8 overflow-auto">
+                                        <TableViewer data={parsedJson || []} onDataChange={(newData) => {
+                                            setContent(JSON.stringify(newData, null, 2));
+                                            setIsSaved(false);
+                                        }} />
+                                    </TabsContent>
+
+                                    <TabsContent value="tree" className="h-full m-0 p-4 overflow-auto">
+                                        <JsonTreeViewer data={parsedJson} />
+                                    </TabsContent>
+
+                                    <TabsContent value="terminal" className="h-full m-0 bg-zinc-950 p-6 flex flex-col font-mono text-sm lowercase">
+                                        <div className="flex-1 overflow-auto space-y-1 mb-4 custom-scrollbar">
+                                            {terminalOutput.map((line, i) => (
+                                                <div key={i} className={line.startsWith('$') ? "text-primary font-bold" : "text-muted-foreground"}>
+                                                    {line}
+                                                </div>
+                                            ))}
+                                        </div>
+                                        <div className="flex items-center gap-2 border-t border-zinc-900 pt-4">
+                                            <span className="text-primary font-black">$</span>
+                                            <input
+                                                className="bg-transparent border-none outline-none text-zinc-100 flex-1"
+                                                autoFocus
+                                                spellCheck={false}
+                                                value={terminalInput}
+                                                onChange={(e) => setTerminalInput(e.target.value)}
+                                                onKeyDown={(e) => e.key === 'Enter' && handleTerminalSubmit()}
+                                                placeholder="type 'help'..."
+                                            />
+                                        </div>
+                                    </TabsContent>
+                                </div>
+                            </Tabs>
+                        </div>
+                    </ResizablePanel>
+                </ResizablePanelGroup>
+            </div>
+        </div>
+    );
+}
diff --git a/lib/hooks/use-editor.ts b/lib/hooks/use-editor.ts
new file mode 100644
index 0000000..650c372
--- /dev/null
+++ b/lib/hooks/use-editor.ts
@@ -0,0 +1,56 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Format } from '@/types';
+
+interface UseEditorOptions {
+    initialContent: string;
+    initialFormat: Format;
+    debounceMs?: number;
+}
+
+export function useEditor({ initialContent, initialFormat, debounceMs = 500 }: UseEditorOptions) {
+    const [content, setContent] = useState(initialContent);
+    const [format, setFormat] = useState<Format>(initialFormat);
+    const [isSaved, setIsSaved] = useState(true);
+    
+    // Sync to props without useEffect to avoid cascading renders
+    const [prevInitialContent, setPrevInitialContent] = useState(initialContent);
+    const [prevInitialFormat, setPrevInitialFormat] = useState(initialFormat);
+
+    if (initialContent !== prevInitialContent || initialFormat !== prevInitialFormat) {
+        setPrevInitialContent(initialContent);
+        setPrevInitialFormat(initialFormat);
+        setContent(initialContent);
+        setFormat(initialFormat);
+        setIsSaved(true);
+    }
+
+    // Debounced sessionStorage persistence
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+
+        const timer = setTimeout(() => {
+            sessionStorage.setItem(`web-viewer-content-${format}`, content);
+        }, debounceMs);
+
+        return () => clearTimeout(timer);
+    }, [content, format, debounceMs]);
+
+    const updateContent = useCallback((newContent: string) => {
+        setContent(newContent);
+        setIsSaved(false);
+    }, []);
+
+    const updateFormat = useCallback((newFormat: Format) => {
+        setFormat(newFormat);
+        setIsSaved(false);
+    }, []);
+
+    return {
+        content,
+        setContent: updateContent,
+        format,
+        setFormat: updateFormat,
+        isSaved,
+        setIsSaved
+    };
+}
diff --git a/scratch/check-panels.ts b/scratch/check-panels.ts
new file mode 100644
index 0000000..f6b9b9e
--- /dev/null
+++ b/scratch/check-panels.ts
@@ -0,0 +1,2 @@
+import * as panels from 'react-resizable-panels';
+console.log(Object.keys(panels));

From 9d518c3d3c29b293ae1049b961d25cc414dc4668 Mon Sep 17 00:00:00 2001
From: Nishanth <nishanthkj12@gmail.com>
Date: Thu, 30 Apr 2026 22:12:10 +0530
Subject: [PATCH 05/18] feat: implement layout system with splash screen,
 persistent navigation, and footer

---
 app/documentation/page.tsx          | 204 ++++++++++++----------------
 app/layout.tsx                      |  29 ++--
 app/page.tsx                        |  34 +++--
 app/settings/page.tsx               |  92 +++++++++++++
 app/view/[type]/page.tsx            |  27 ++--
 components/common/Footer.tsx        |  22 +++
 components/common/Navbar.tsx        |  30 ++++
 components/landing/hero.tsx         |  17 ++-
 components/layout/app-sidebar.tsx   | 157 ++++++++++++---------
 components/layout/client-layout.tsx |  68 +++++++---
 components/layout/navbar.tsx        |  74 +++-------
 components/layout/splash-screen.tsx |   8 +-
 lib/constants/tools.ts              | 100 +++++++++++---
 13 files changed, 532 insertions(+), 330 deletions(-)
 create mode 100644 app/settings/page.tsx
 create mode 100644 components/common/Footer.tsx
 create mode 100644 components/common/Navbar.tsx

diff --git a/app/documentation/page.tsx b/app/documentation/page.tsx
index 68f70e7..ccb8731 100644
--- a/app/documentation/page.tsx
+++ b/app/documentation/page.tsx
@@ -1,130 +1,102 @@
 "use client";
 
 import React from 'react';
-import {
-    Book,
-    Zap,
-    Shield,
-    Globe,
-    Braces,
-    Box,
-    Terminal,
-    Cpu
-} from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { HelpCircle, Book, Code, Sparkles, Terminal } from 'lucide-react';
+import Footer from "@/components/common/Footer";
 
-import { Footer } from "@/components/landing/footer";
-
-const DOCS_SECTIONS = [
-    {
-        title: "Getting Started",
-        items: [
-            {
-                icon: Zap,
-                label: "Introduction",
-                content: "Web Utils is a high-performance, universal file editor and code previewer designed for modern developers. It allows you to instantly edit, visualize, and format multiple data structures with zero setup."
-            },
-            {
-                icon: Terminal,
-                label: "Quick Start",
-                content: "Navigate to the /view route, paste your code into the editor, and watch as it instantly renders in the preview pane. Use the sidebar to switch between output formats."
-            }
-        ]
-    },
-    {
-        title: "Supported Formats",
-        items: [
-            {
-                icon: Globe,
-                label: "HTML & Bootstrap",
-                content: "Full support for HTML5 and Bootstrap 5.3. Renders code in a safe, sandboxed iframe environment."
-            },
-            {
-                icon: Braces,
-                label: "JSON & YAML",
-                content: "Automatic syntax validation and beautification for structured data. Error highlighting for invalid syntax."
-            },
-            {
-                icon: Box,
-                label: "React (JSX/TSX)",
-                content: "Premium syntax highlighting for React components. Perfect for reviewing component structures."
-            }
-        ]
-    },
-    {
-        title: "Advanced Features",
-        items: [
-            {
-                icon: Cpu,
-                label: "Performance",
-                content: "Built on Next.js 15 for lightning-fast route transitions and optimized rendering cycles."
-            },
-            {
-                icon: Shield,
-                label: "Security",
-                content: "All previews are sandboxed to prevent script execution from impacting the main application window."
-            }
-        ]
-    }
-];
-
-export default function DocsPage() {
+export default function DocumentationPage() {
     return (
-        <div className="h-full overflow-y-auto bg-white dark:bg-zinc-950 px-4 py-20 scrollbar-none">
-            <div className="max-w-4xl mx-auto">
-                <header className="mb-20 text-center">
-                    <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-500 text-xs font-bold uppercase tracking-widest mb-6">
-                        <Book className="size-3" />
-                        <span>Documentation</span>
-                    </div>
-                    <h1 className="text-4xl md:text-5xl font-extrabold tracking-tight mb-6 bg-clip-text text-transparent bg-gradient-to-br from-zinc-900 via-zinc-700 to-zinc-500 dark:from-white dark:via-zinc-300 dark:to-zinc-500">
-                        Everything you need to <br /> scale your workflow.
+        <div className="h-full overflow-auto bg-background p-6 custom-scrollbar w-full">
+            <div className="max-w-4xl mx-auto space-y-8">
+                {/* Header */}
+                <div className="space-y-2">
+                    <h1 className="text-3xl font-bold tracking-tight text-foreground flex items-center gap-3">
+                        <HelpCircle className="size-8 text-indigo-500" />
+                        Documentation
                     </h1>
-                    <p className="text-lg text-zinc-600 dark:text-zinc-400">
-                        A comprehensive guide to using and extending the Web Utils platform.
+                    <p className="text-muted-foreground">
+                        Learn how to use Web Utils to supercharge your developer workflow.
                     </p>
-                </header>
-
-                <div className="space-y-20">
-                    {DOCS_SECTIONS.map((section) => (
-                        <section key={section.title}>
-                            <h2 className="text-xl font-bold mb-8 border-b border-zinc-100 dark:border-zinc-800 pb-4 flex items-center gap-3">
-                                <span className="size-1.5 rounded-full bg-indigo-500" />
-                                {section.title}
-                            </h2>
-                            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-                                {section.items.map((item) => (
-                                    <div key={item.label} className="group p-6 rounded-2xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50/30 dark:bg-zinc-900/10 hover:bg-white dark:hover:bg-zinc-900 hover:shadow-xl transition-all duration-300">
-                                        <div className="size-10 rounded-xl bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 flex items-center justify-center text-zinc-900 dark:text-white mb-5 transition-transform group-hover:scale-110 shadow-sm">
-                                            <item.icon className="size-5" />
-                                        </div>
-                                        <h3 className="font-bold text-lg mb-3 dark:text-zinc-100">{item.label}</h3>
-                                        <p className="text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed">
-                                            {item.content}
-                                        </p>
-                                    </div>
-                                ))}
-                            </div>
-                        </section>
-                    ))}
                 </div>
 
-                {/* Footer info */}
-                <div className="mt-32 p-8 rounded-3xl bg-gradient-to-br from-indigo-600 to-purple-700 text-white text-center shadow-2xl shadow-indigo-500/20 mb-20">
-                    <h2 className="text-2xl font-bold mb-4">Ready to get started?</h2>
-                    <p className="text-indigo-100 mb-8 max-w-lg mx-auto">
-                        Join thousands of developers using Web Utils to edit and preview their code more efficiently.
-                    </p>
-                    <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-                        <button className="px-8 py-3 bg-white text-indigo-600 font-bold rounded-xl hover:bg-indigo-50 transition-colors shadow-lg">
-                            Launch App
-                        </button>
-                        <button className="px-8 py-3 bg-indigo-500/20 text-white border border-white/20 font-bold rounded-xl hover:bg-indigo-500/30 transition-colors">
-                            Star on GitHub
-                        </button>
-                    </div>
+                <div className="grid gap-6 md:grid-cols-2">
+                    <Card className="border-border/50 shadow-sm">
+                        <CardHeader>
+                            <CardTitle className="text-lg flex items-center gap-2">
+                                <Book className="size-5 text-indigo-500" /> Getting Started
+                            </CardTitle>
+                        </CardHeader>
+                        <CardContent className="space-y-4 text-sm text-muted-foreground">
+                            <p>
+                                Web Utils is a suite of carefully crafted utilities running entirely in your browser. No data is sent to external servers, ensuring complete privacy and security for your sensitive code and tokens.
+                            </p>
+                            <p>
+                                Simply select a tool from the sidebar to begin.
+                            </p>
+                        </CardContent>
+                    </Card>
+
+                    <Card className="border-border/50 shadow-sm">
+                        <CardHeader>
+                            <CardTitle className="text-lg flex items-center gap-2">
+                                <Code className="size-5 text-indigo-500" /> Code Editors
+                            </CardTitle>
+                        </CardHeader>
+                        <CardContent className="space-y-4 text-sm text-muted-foreground">
+                            <p>
+                                All text-based tools use the Monaco Editor (the core of VS Code). This provides you with powerful features like:
+                            </p>
+                            <ul className="list-disc pl-5 space-y-1">
+                                <li>Syntax highlighting & validation</li>
+                                <li>Minimap for large files</li>
+                                <li>Multiple cursors</li>
+                                <li>Command Palette (F1)</li>
+                            </ul>
+                        </CardContent>
+                    </Card>
+
+                    <Card className="border-border/50 shadow-sm">
+                        <CardHeader>
+                            <CardTitle className="text-lg flex items-center gap-2">
+                                <Sparkles className="size-5 text-indigo-500" /> Formatting
+                            </CardTitle>
+                        </CardHeader>
+                        <CardContent className="space-y-4 text-sm text-muted-foreground">
+                            <p>
+                                Need to format an ugly JSON or un-minified HTML block? Most editors have a "Format" button near the top right, or you can right-click anywhere in the editor and select <strong>"Format Document"</strong>.
+                            </p>
+                        </CardContent>
+                    </Card>
+
+                    <Card className="border-border/50 shadow-sm">
+                        <CardHeader>
+                            <CardTitle className="text-lg flex items-center gap-2">
+                                <Terminal className="size-5 text-indigo-500" /> Keyboard Shortcuts
+                            </CardTitle>
+                        </CardHeader>
+                        <CardContent className="space-y-4 text-sm text-muted-foreground">
+                            <ul className="space-y-2">
+                                <li className="flex justify-between items-center">
+                                    <span>Command Palette</span>
+                                    <kbd className="px-2 py-1 bg-muted rounded text-xs font-mono font-bold">Ctrl + K</kbd>
+                                </li>
+                                <li className="flex justify-between items-center">
+                                    <span>Toggle Sidebar</span>
+                                    <kbd className="px-2 py-1 bg-muted rounded text-xs font-mono font-bold">Ctrl + B</kbd>
+                                </li>
+                                <li className="flex justify-between items-center">
+                                    <span>Format Document</span>
+                                    <kbd className="px-2 py-1 bg-muted rounded text-xs font-mono font-bold">Shift + Alt + F</kbd>
+                                </li>
+                            </ul>
+                        </CardContent>
+                    </Card>
                 </div>
             </div>
-            <Footer />
+            <div className="mt-16">
+                <Footer />
+            </div>
         </div>
     );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index db3e5c8..638866f 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,8 +1,8 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import type {Metadata} from "next";
+import {Geist, Geist_Mono} from "next/font/google";
 import "./globals.css";
-import { ThemeProvider } from "@/components/layout/theme-provider";
-import { Navbar } from "@/components/layout/navbar";
+import {ThemeProvider} from "@/components/layout/theme-provider";
+import {ClientLayout} from "@/components/layout/client-layout";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -16,31 +16,30 @@ const geistMono = Geist_Mono({
 
 export const metadata: Metadata = {
   title: "Web Utils | Universal Code Previewer",
-  description: "A professional tool for editing and previewing HTML, JSON, YAML, and React code with ease.",
+    description:
+        "A professional tool for editing and previewing HTML, JSON, YAML, and React code with ease.",
 };
 
 export default function RootLayout({
   children,
-}: Readonly<{
+                                   }: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
     <html lang="en" suppressHydrationWarning className="h-full">
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased h-full overflow-hidden`}>
+    <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased h-full overflow-hidden`}
+    >
         <ThemeProvider
           attribute="class"
           defaultTheme="system"
           enableSystem
           disableTransitionOnChange
         >
-          <div className="flex flex-col h-screen overflow-hidden bg-background">
-            <Navbar />
-            <div className="flex-1 overflow-hidden relative pt-16">
-              {children}
-            </div>
-          </div>
+            {/* CLIENT PART MOVED HERE */}
+            <ClientLayout>{children}</ClientLayout>
         </ThemeProvider>
       </body>
     </html>
   );
-}
+}
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index e973a8a..b594b5a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,14 +1,13 @@
 "use client";
 
-import React, { useState } from 'react';
-import { 
-    Search, 
-} from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { AdsCard } from '@/components/shared/ads-card';
-import { TOOLS, TOOL_CATEGORIES, type Tool, type Category } from '@/lib/constants/tools';
-import { Card, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import React, {useState} from 'react';
+import {Search,} from 'lucide-react';
+import {Button} from '@/components/ui/button';
+import {Input} from '@/components/ui/input';
+import {AdsCard} from '@/components/shared/ads-card';
+import {type Category, type Tool, TOOL_CATEGORIES, TOOLS} from '@/lib/constants/tools';
+import {Card, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
+import Footer from "@/components/common/Footer";
 
 export default function ToolsListingPage() {
     const [searchQuery, setSearchQuery] = useState("");
@@ -27,7 +26,7 @@ export default function ToolsListingPage() {
                 {/* Header */}
                 <div className="space-y-2">
                     <h1 className="text-3xl font-bold tracking-tight text-foreground">
-                        Web Utils
+                        Developer Tools
                     </h1>
                     <p className="text-muted-foreground">
                         A clean, minimalist suite of developer utilities and converters.
@@ -45,7 +44,15 @@ export default function ToolsListingPage() {
                             onChange={(e) => setSearchQuery(e.target.value)}
                         />
                     </div>
-                    <div className="flex gap-2">
+                    <div className="flex flex-wrap gap-2">
+                        <Button
+                            variant={activeCategory === 'all' ? "secondary" : "ghost"}
+                            size="sm"
+                            className="h-10 px-4 font-semibold"
+                            onClick={() => setActiveCategory('all')}
+                        >
+                            All
+                        </Button>
                         {TOOL_CATEGORIES.map((cat: Category) => (
                             <Button
                                 key={cat.id}
@@ -83,9 +90,12 @@ export default function ToolsListingPage() {
                         </Card>
                     ))}
 
-                    <AdsCard variant="sidebar" className="h-full min-h-[160px]" />
+                    <AdsCard variant="horizontal" className="col-span-1 md:col-span-2 lg:col-span-3 mt-2" />
                 </div>
             </div>
+            <div className="mt-16">
+                <Footer />
+            </div>
         </div>
     );
 }
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
new file mode 100644
index 0000000..aafe315
--- /dev/null
+++ b/app/settings/page.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import React from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Settings, Moon, Sun, Monitor, Type, Code } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Separator } from '@/components/ui/separator';
+import Footer from "@/components/common/Footer";
+
+export default function SettingsPage() {
+    const { theme, setTheme } = useTheme();
+
+    return (
+        <div className="h-full overflow-auto bg-background p-6 custom-scrollbar w-full">
+            <div className="max-w-4xl mx-auto space-y-8">
+                {/* Header */}
+                <div className="space-y-2">
+                    <h1 className="text-3xl font-bold tracking-tight text-foreground flex items-center gap-3">
+                        <Settings className="size-8 text-indigo-500" />
+                        Settings
+                    </h1>
+                    <p className="text-muted-foreground">
+                        Manage your preferences, workspace configuration, and themes.
+                    </p>
+                </div>
+
+                <div className="grid gap-6 md:grid-cols-2">
+                    {/* Appearance */}
+                    <Card className="border-border/50 shadow-sm">
+                        <CardHeader>
+                            <CardTitle className="text-lg">Appearance</CardTitle>
+                            <CardDescription>Customize the look and feel of Web Utils.</CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-4">
+                            <div className="flex items-center gap-2">
+                                <Button 
+                                    variant={theme === 'light' ? 'default' : 'outline'} 
+                                    className={`flex-1 gap-2 transition-all ${theme === 'light' ? 'bg-indigo-600 hover:bg-indigo-700' : ''}`} 
+                                    onClick={() => setTheme('light')}
+                                >
+                                    <Sun className="size-4" /> Light
+                                </Button>
+                                <Button 
+                                    variant={theme === 'dark' ? 'default' : 'outline'} 
+                                    className={`flex-1 gap-2 transition-all ${theme === 'dark' ? 'bg-indigo-600 hover:bg-indigo-700' : ''}`}
+                                    onClick={() => setTheme('dark')}
+                                >
+                                    <Moon className="size-4" /> Dark
+                                </Button>
+                                <Button 
+                                    variant={theme === 'system' ? 'default' : 'outline'} 
+                                    className={`flex-1 gap-2 transition-all ${theme === 'system' ? 'bg-indigo-600 hover:bg-indigo-700' : ''}`}
+                                    onClick={() => setTheme('system')}
+                                >
+                                    <Monitor className="size-4" /> System
+                                </Button>
+                            </div>
+                        </CardContent>
+                    </Card>
+
+                    {/* Editor Preferences */}
+                    <Card className="border-border/50 shadow-sm">
+                        <CardHeader>
+                            <CardTitle className="text-lg">Editor Configuration</CardTitle>
+                            <CardDescription>Default settings for Monaco Editor workspaces.</CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-6">
+                            <div className="space-y-2">
+                                <label className="text-sm font-medium flex items-center gap-2">
+                                    <Type className="size-4 text-muted-foreground" /> Default Font Size
+                                </label>
+                                <Input type="number" defaultValue={14} className="w-full bg-muted/50 border-transparent focus-visible:ring-indigo-500" />
+                            </div>
+                            <Separator className="bg-border/50" />
+                            <div className="space-y-2">
+                                <label className="text-sm font-medium flex items-center gap-2">
+                                    <Code className="size-4 text-muted-foreground" /> Tab Size
+                                </label>
+                                <Input type="number" defaultValue={4} className="w-full bg-muted/50 border-transparent focus-visible:ring-indigo-500" />
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+            </div>
+            <div className="mt-16">
+                <Footer />
+            </div>
+        </div>
+    );
+}
diff --git a/app/view/[type]/page.tsx b/app/view/[type]/page.tsx
index 2685141..24657ce 100644
--- a/app/view/[type]/page.tsx
+++ b/app/view/[type]/page.tsx
@@ -1,8 +1,6 @@
-import { SidebarProvider } from "@/components/ui/sidebar";
-import { AppSidebar } from "@/components/layout/app-sidebar";
-import { ViewerContainer } from "@/components/view/viewer-container";
-import { Format } from "@/types";
-import { DEFAULT_CONTENT } from "@/data/default-content";
+import {ViewerContainer} from "@/components/view/viewer-container";
+import {Format} from "@/types";
+import {DEFAULT_CONTENT} from "@/data/default-content";
 
 export function generateStaticParams() {
     return [
@@ -23,16 +21,13 @@ export default async function ViewPage({ params }: { params: Promise<{ type: str
     const content = (DEFAULT_CONTENT as Record<string, string>)[format] || "";
 
     return (
-        <SidebarProvider>
-            <div className="flex w-full h-full overflow-hidden">
-                <AppSidebar />
-                <main className="flex-1 overflow-auto bg-zinc-50/50 dark:bg-zinc-950/50 relative">
-                    <ViewerContainer
-                        initialContent={content}
-                        initialFormat={format}
-                    />
-                </main>
-            </div>
-        </SidebarProvider>
+        <div className="flex w-full h-full overflow-hidden">
+            <main className="flex-1 overflow-auto bg-zinc-50/50 dark:bg-zinc-950/50 relative">
+                <ViewerContainer
+                    initialContent={content}
+                    initialFormat={format}
+                />
+            </main>
+        </div>
     );
 }
diff --git a/components/common/Footer.tsx b/components/common/Footer.tsx
new file mode 100644
index 0000000..a245e3f
--- /dev/null
+++ b/components/common/Footer.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Github } from 'lucide-react';
+import Link from 'next/link';
+
+export default function Footer() {
+  return (
+    <footer className="w-full border-t bg-background/80 backdrop-blur-md py-3 z-50">
+      <div className="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-3 px-4 md:px-6 text-sm text-muted-foreground font-medium">
+        <div className="flex items-center gap-1.5">
+          <span>&copy; {new Date().getFullYear()} Web Utils</span>
+        </div>
+        <div className="flex items-center gap-6">
+          <Link href="/" className="hover:text-indigo-500 transition-colors">Documentation</Link>
+          <Link href="/" className="hover:text-indigo-500 transition-colors">Privacy</Link>
+          <a href="https://github.com/nishanth-kj/Web-Utils" target="_blank" rel="noreferrer" className="hover:text-foreground transition-colors">
+            <Github className="size-4" />
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+}
\ No newline at end of file
diff --git a/components/common/Navbar.tsx b/components/common/Navbar.tsx
new file mode 100644
index 0000000..bf48733
--- /dev/null
+++ b/components/common/Navbar.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { Button } from "@/components/ui/button";
+
+function Navbar() {
+  return (
+    <nav className="border-b bg-background">
+      <div className="container flex h-16 items-center justify-between">
+        
+        {/* Left section */}
+        <div className="flex flex-col">
+          <h1 className="text-lg font-semibold leading-none">
+            Web Utils
+          </h1>
+          <span className="text-xs text-muted-foreground">
+            Developer utilities & converters
+          </span>
+        </div>
+
+        {/* Right section */}
+        <div className="flex items-center gap-2">
+          <Button variant="ghost">Docs</Button>
+          <Button variant="outline">GitHub</Button>
+        </div>
+
+      </div>
+    </nav>
+  );
+}
+
+export default Navbar;
\ No newline at end of file
diff --git a/components/landing/hero.tsx b/components/landing/hero.tsx
index daeef00..a9696e7 100644
--- a/components/landing/hero.tsx
+++ b/components/landing/hero.tsx
@@ -2,14 +2,15 @@
 
 import React from 'react';
 import Link from "next/link";
-import { Button } from "@/components/ui/button";
-import { ArrowRight, Zap } from "lucide-react";
+import {Button} from "@/components/ui/button";
+import {ArrowRight, Zap} from "lucide-react";
 
 export function Hero() {
     return (
         <section className="relative pt-20 pb-20 px-4 md:pt-40 md:pb-32 overflow-hidden">
             {/* Background Glows */}
-            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[500px] bg-gradient-to-b from-indigo-500/10 via-transparent to-transparent blur-3xl -z-10" />
+            <div
+                className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-500px bg-linear-to-b from-indigo-500/10 via-transparent to-transparent blur-3xl -z-10"/>
 
             <div className="max-w-7xl mx-auto text-center relative z-10">
                 <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-indigo-500/10 text-indigo-500 text-[10px] font-black uppercase tracking-[0.2em] mb-10 animate-in fade-in slide-in-from-bottom-4 duration-700">
@@ -17,7 +18,7 @@ export function Hero() {
                     <span>The next-gen code toolkit</span>
                 </div>
 
-                <h1 className="text-5xl md:text-[5.5rem] font-black tracking-tight mb-10 leading-[1.05] bg-clip-text text-transparent bg-gradient-to-br from-zinc-950 via-zinc-800 to-zinc-600 dark:from-white dark:via-zinc-200 dark:to-zinc-500">
+                <h1 className="text-5xl md:text-[5.5rem] font-black tracking-tight mb-10 leading-[1.05] bg-clip-text text-transparent bg-linear-to-br from-zinc-950 via-zinc-800 to-zinc-600 dark:from-white dark:via-zinc-200 dark:to-zinc-500">
                     Precision Editing. <br className="hidden md:block" />
                     <span className="text-indigo-600 dark:text-indigo-400">Instant Visualization.</span>
                 </h1>
@@ -43,9 +44,11 @@ export function Hero() {
             {/* Hero Visual - Professional Code Preview */}
             <div className="max-w-5xl mx-auto mt-24 px-4 animate-in fade-in zoom-in-95 duration-1000 delay-300">
                 <div className="relative group">
-                    <div className="absolute -inset-1 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-[2.5rem] blur opacity-25 group-hover:opacity-50 transition duration-1000"></div>
+                    <div
+                        className="absolute -inset-1 bg-linear-to-r from-indigo-500 to-purple-600 rounded-[2.5rem] blur opacity-25 group-hover:opacity-50 transition duration-1000"></div>
                     <div className="relative aspect-video rounded-[2.5rem] bg-zinc-900 border border-white/10 shadow-2xl overflow-hidden">
-                        <div className="absolute inset-0 bg-gradient-to-tr from-indigo-500/5 via-transparent to-purple-500/5" />
+                        <div
+                            className="absolute inset-0 bg-linear-to-tr from-indigo-500/5 via-transparent to-purple-500/5"/>
 
                         {/* Fake Browser Toolbar */}
                         <div className="flex items-center justify-between px-6 py-4 border-b border-white/10 bg-zinc-900/50 backdrop-blur-md">
@@ -60,7 +63,7 @@ export function Hero() {
                             <div className="size-3" />
                         </div>
 
-                        <div className="absolute inset-0 top-[60px] flex p-8 gap-8">
+                        <div className="absolute inset-0 top-60px flex p-8 gap-8">
                             {/* Editor Side */}
                             <div className="flex-1 rounded-2xl bg-zinc-950 border border-white/5 p-6 font-mono text-sm leading-relaxed overflow-hidden">
                                 <div className="flex items-center gap-3 mb-6 pb-4 border-b border-white/5">
diff --git a/components/layout/app-sidebar.tsx b/components/layout/app-sidebar.tsx
index f90be1d..b31fa0e 100644
--- a/components/layout/app-sidebar.tsx
+++ b/components/layout/app-sidebar.tsx
@@ -6,21 +6,16 @@ import {
     HelpCircle,
     ChevronLeft,
     ChevronRight,
-    FileEdit,
-    Braces,
-    Globe,
-    Box,
-    FileCode,
-    StickyNote,
-    Table,
-    Image,
-    Clock
+    Command,
+    Home,
+    Search
 } from "lucide-react";
 
 import {
     Sidebar,
     SidebarContent,
     SidebarFooter,
+    SidebarHeader,
     SidebarMenu,
     SidebarMenuButton,
     SidebarMenuItem,
@@ -30,21 +25,26 @@ import {
     useSidebar,
 } from "@/components/ui/sidebar";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { TOOLS, TOOL_CATEGORIES, type Tool, type Category } from "@/lib/constants/tools";
 
 export function AppSidebar() {
+    const pathname = usePathname();
     const { toggleSidebar, state } = useSidebar();
+    const [searchQuery, setSearchQuery] = React.useState("");
     const isCollapsed = state === "collapsed";
 
     return (
         <Sidebar
             side="left"
-            collapsible="icon"
-            className="fixed top-16 left-0 h-[calc(100vh-64px)] border-r border-sidebar-border transition-all duration-500 ease-in-out group/sidebar [&_[data-sidebar=sidebar]]:overflow-visible [&_[data-sidebar=sidebar]]:bg-sidebar/80 [&_[data-sidebar=sidebar]]:backdrop-blur-xl"
+            collapsible="offcanvas"
+            className="fixed top-0 left-0 h-screen border-r border-sidebar-border transition-all duration-500 ease-in-out group/sidebar [&_[data-sidebar=sidebar]]:overflow-visible [&_[data-sidebar=sidebar]]:bg-sidebar/80 [&_[data-sidebar=sidebar]]:backdrop-blur-xl"
         >
 
             {/* Toggle Button "On the Line" - Placed Between Header and Content */}
-            <div className="absolute right-0 top-[40px] -translate-y-1/2 translate-x-1/2 z-[100] transition-all duration-500">
+            <div className={`absolute right-0 bottom-12 z-[100] transition-all duration-500 ${isCollapsed ? 'translate-x-full' : 'translate-x-1/2'}`}>
                 <Button
                     variant="ghost"
                     size="icon"
@@ -59,71 +59,94 @@ export function AppSidebar() {
                 </Button>
             </div>
 
+            <SidebarHeader className="border-b border-sidebar-border px-4 py-4 flex flex-col gap-4">
+                <div className="flex flex-col gap-3">
+                    <Link href="/" className="flex items-center space-x-2.5">
+                        <div className="size-7 rounded bg-indigo-500/10 flex items-center justify-center text-indigo-500">
+                            <Command className="size-4" />
+                        </div>
+                        <span className="font-bold text-xl tracking-tight">Web Utils</span>
+                    </Link>
+                    <Link href="/" className="flex items-center gap-2 text-sm font-semibold text-muted-foreground hover:text-foreground transition-colors ml-1">
+                        <Home className="size-4" />
+                        <span>Home</span>
+                    </Link>
+                </div>
+                <div className="relative">
+                    <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground" />
+                    <Input 
+                        placeholder="Search tools..." 
+                        className="pl-8 h-8 text-xs bg-muted/50 border-transparent focus-visible:ring-1 focus-visible:ring-indigo-500"
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                    />
+                </div>
+            </SidebarHeader>
+
             <SidebarContent className="flex-1 overflow-y-auto overflow-x-visible pt-2 custom-scrollbar">
-                <SidebarGroup>
-                    <SidebarGroupLabel className="px-4 text-[10px] font-bold uppercase tracking-widest text-zinc-400 mt-2">Formats</SidebarGroupLabel>
-                    <SidebarGroupContent>
-                        <SidebarMenu className="group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-0 px-2 transition-all">
-                            {[
-                                { id: "html", label: "HTML Preview", icon: Globe, tooltip: "HTML View" },
-                                { id: "json", label: "JSON Tool", icon: Braces, tooltip: "JSON View" },
-                                { id: "yaml", label: "YAML View", icon: StickyNote, tooltip: "YAML View" },
-                                { id: "react", label: "React Code", icon: Box, tooltip: "React Code" },
-                                { id: "markdown", label: "Markdown View", icon: FileEdit, tooltip: "Markdown View" },
-                                { id: "xml", label: "XML Viewer", icon: FileCode, tooltip: "XML View" },
-                                { id: "svg", label: "SVG Render", icon: Image, tooltip: "SVG Render" },
-                                { id: "csv", label: "CSV Viewer", icon: Table, tooltip: "CSV View" },
-                            ].map((item) => (
-                                <SidebarMenuItem key={item.label} className="group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center">
-                                    <Link href={`/view/${item.id}`} className="w-full">
-                                        <SidebarMenuButton tooltip={item.tooltip} className="rounded-lg h-10 transition-all hover:bg-zinc-100 dark:hover:bg-zinc-800 w-full">
-                                            <item.icon className="size-4" />
-                                            <span className="font-medium">{item.label}</span>
-                                        </SidebarMenuButton>
-                                    </Link>
-                                </SidebarMenuItem>
-                            ))}
-                        </SidebarMenu>
-                    </SidebarGroupContent>
-                </SidebarGroup>
+                {TOOL_CATEGORIES.map((cat: Category) => {
+                    const categoryTools = TOOLS.filter(
+                        (tool: Tool) => 
+                            tool.category === cat.id &&
+                            (tool.name.toLowerCase().includes(searchQuery.toLowerCase()) || 
+                             tool.description.toLowerCase().includes(searchQuery.toLowerCase()))
+                    );
 
-                <SidebarGroup>
-                    <SidebarGroupLabel className="px-4 text-[10px] font-bold uppercase tracking-widest text-zinc-400 mt-2">Convert</SidebarGroupLabel>
-                    <SidebarGroupContent>
-                        <SidebarMenu className="group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-0 px-2 transition-all">
-                            {[
-                                { id: "epoch", label: "Epoch Converter", icon: Clock, tooltip: "Epoch Converter" },
-                            ].map((item) => (
-                                <SidebarMenuItem key={item.label} className="group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center">
-                                    <Link href={`/convert/${item.id}`} className="w-full">
-                                        <SidebarMenuButton tooltip={item.tooltip} className="rounded-lg h-10 transition-all hover:bg-zinc-100 dark:hover:bg-zinc-800 w-full">
-                                            <item.icon className="size-4" />
-                                            <span className="font-medium">{item.label}</span>
-                                        </SidebarMenuButton>
-                                    </Link>
-                                </SidebarMenuItem>
-                            ))}
-                        </SidebarMenu>
-                    </SidebarGroupContent>
-                </SidebarGroup>
+                    if (categoryTools.length === 0) return null;
 
+                    return (
+                        <SidebarGroup key={cat.id}>
+                            <SidebarGroupLabel className="px-4 text-[10px] font-bold uppercase tracking-widest text-zinc-400 mt-2">
+                                {cat.label}
+                            </SidebarGroupLabel>
+                            <SidebarGroupContent>
+                                <SidebarMenu className="px-2 transition-all">
+                                    {categoryTools.map((tool: Tool) => (
+                                        <SidebarMenuItem key={tool.name}>
+                                            <Link href={tool.href} className="w-full">
+                                                <SidebarMenuButton 
+                                                    tooltip={tool.name} 
+                                                    isActive={pathname === tool.href}
+                                                    className={`rounded-lg h-10 transition-all w-full ${pathname === tool.href ? 'bg-indigo-500/10 text-indigo-500 font-bold hover:bg-indigo-500/20' : 'hover:bg-zinc-100 dark:hover:bg-zinc-800'}`}
+                                                >
+                                                    <tool.icon className={`size-4 ${pathname === tool.href ? 'text-indigo-500' : 'text-muted-foreground'}`} />
+                                                    <span className={`text-sm ${pathname === tool.href ? 'font-bold' : 'font-medium'}`}>{tool.name}</span>
+                                                </SidebarMenuButton>
+                                            </Link>
+                                        </SidebarMenuItem>
+                                    ))}
+                                </SidebarMenu>
+                            </SidebarGroupContent>
+                        </SidebarGroup>
+                    );
+                })}
             </SidebarContent>
 
-            <SidebarFooter className="p-4 border-t border-zinc-100 dark:border-zinc-800/50 group-data-[collapsible=icon]:px-0">
-                <SidebarMenu className="group-data-[collapsible=icon]:items-center">
-                    <SidebarMenuItem className="group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center">
+            <SidebarFooter className="p-4 border-t border-sidebar-border">
+                <SidebarMenu>
+                    <SidebarMenuItem>
                         <Link href="/documentation" className="w-full">
-                            <SidebarMenuButton tooltip="Docs" className="rounded-lg h-10">
-                                <HelpCircle className="size-4" />
+                            <SidebarMenuButton 
+                                tooltip="Docs" 
+                                isActive={pathname === '/documentation'}
+                                className={`rounded-lg h-10 transition-all ${pathname === '/documentation' ? 'bg-indigo-500/10 text-indigo-500 font-bold hover:bg-indigo-500/20' : 'hover:bg-zinc-100 dark:hover:bg-zinc-800'}`}
+                            >
+                                <HelpCircle className={`size-4 ${pathname === '/documentation' ? 'text-indigo-500' : ''}`} />
                                 <span className="font-medium">Documentation</span>
                             </SidebarMenuButton>
                         </Link>
                     </SidebarMenuItem>
-                    <SidebarMenuItem className="group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center">
-                        <SidebarMenuButton tooltip="Settings" className="rounded-lg h-10">
-                            <Settings className="size-4" />
-                            <span className="font-medium">Settings</span>
-                        </SidebarMenuButton>
+                    <SidebarMenuItem>
+                        <Link href="/settings" className="w-full">
+                            <SidebarMenuButton 
+                                tooltip="Settings" 
+                                isActive={pathname === '/settings'}
+                                className={`rounded-lg h-10 transition-all ${pathname === '/settings' ? 'bg-indigo-500/10 text-indigo-500 font-bold hover:bg-indigo-500/20' : 'hover:bg-zinc-100 dark:hover:bg-zinc-800'}`}
+                            >
+                                <Settings className={`size-4 ${pathname === '/settings' ? 'text-indigo-500' : ''}`} />
+                                <span className="font-medium">Settings</span>
+                            </SidebarMenuButton>
+                        </Link>
                     </SidebarMenuItem>
                 </SidebarMenu>
             </SidebarFooter>
diff --git a/components/layout/client-layout.tsx b/components/layout/client-layout.tsx
index 9b1df9a..198e971 100644
--- a/components/layout/client-layout.tsx
+++ b/components/layout/client-layout.tsx
@@ -1,38 +1,64 @@
 "use client";
 
-import React, { useState } from "react";
-import { SidebarProvider } from "@/components/ui/sidebar";
-import { AppSidebar } from "@/components/layout/app-sidebar";
-import { SplashScreen } from "@/components/layout/splash-screen";
-import { CommandMenu } from "@/components/layout/command-menu";
-import { Navbar } from "@/components/layout/navbar";
+import React, { useState, useEffect } from "react";
+import { usePathname } from "next/navigation";
+import {SidebarProvider} from "@/components/ui/sidebar";
+import {SplashScreen} from "@/components/layout/splash-screen";
+import {CommandMenu} from "@/components/layout/command-menu";
+import {Navbar} from "@/components/layout/navbar";
+import Footer from "@/components/common/Footer";
+import {AppSidebar} from "@/components/layout/app-sidebar";
 
 export function ClientLayout({ children }: { children: React.ReactNode }) {
-  const [showSplash, setShowSplash] = useState(() => {
-    if (typeof window !== "undefined") {
-      return !localStorage.getItem("hasSeenSplash_v1");
+  const pathname = usePathname();
+  const isToolPage = pathname !== "/";
+  const [showSplash, setShowSplash] = useState(true);
+
+  useEffect(() => {
+    if (typeof window !== "undefined" && localStorage.getItem("hasSeenSplash_v1")) {
+      setShowSplash(false);
     }
-    return true;
-  });
+  }, []);
+
+    const [searchQuery, setSearchQuery] = useState("");
+    const [activeCategory, setActiveCategory] = useState("all");
 
-  const handleSplashComplete = () => {
+    const handleSplashComplete = () => {
     setShowSplash(false);
     localStorage.setItem("hasSeenSplash_v1", "true");
   };
 
   return (
     <SidebarProvider>
-      {showSplash && <SplashScreen onComplete={handleSplashComplete} />}
-      <div className={`transition-opacity duration-1000 flex flex-col h-screen overflow-hidden bg-background ${showSplash ? "opacity-0" : "opacity-100"}`}>
-        <Navbar />
-        <CommandMenu />
-        <div className="flex flex-1 pt-12 overflow-hidden overflow-x-visible">
-          <AppSidebar />
-          <div className="flex-1 h-full overflow-hidden relative">
-            {children}
+      {showSplash && <SplashScreen onCompleteAction={handleSplashComplete} />}
+
+      {isToolPage && <AppSidebar />}
+
+        <div
+            className={`transition-opacity duration-1000 flex flex-col flex-1 min-w-0 h-screen overflow-hidden bg-background ${
+                showSplash ? "opacity-0" : "opacity-100"
+            }`}
+        >
+
+            {!isToolPage && (
+                <Navbar
+                    searchQuery={searchQuery}
+                    setSearchQuery={setSearchQuery}
+                    activeCategory={activeCategory}
+                    setActiveCategory={setActiveCategory}
+                />
+            )}
+
+            <CommandMenu />
+
+            <div className={`flex flex-1 ${isToolPage ? 'pt-0' : 'pt-16'} overflow-hidden w-full`}>
+          <div className="flex-1 h-full overflow-hidden relative flex flex-col">
+            <div className="flex-1 relative overflow-hidden">
+              {children}
+            </div>
           </div>
         </div>
       </div>
     </SidebarProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index e1ef6c3..0c09398 100644
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -1,45 +1,37 @@
 "use client";
 
-import React, { useState } from 'react';
-import { Moon, Sun, Github, Menu, X, Home, FileEdit } from 'lucide-react';
-import { useTheme } from 'next-themes';
-import { Button } from '@/components/ui/button';
+import React from 'react';
+import {Github, Moon, Sun, Command} from 'lucide-react';
+import {useTheme} from 'next-themes';
+import {Button} from '@/components/ui/button';
 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
 
-export function Navbar() {
+interface NavbarProps {
+    searchQuery?: string;
+    setSearchQuery?: (query: string) => void;
+    activeCategory?: string;
+    setActiveCategory?: (category: string) => void;
+}
+
+export function Navbar({searchQuery, setSearchQuery, activeCategory, setActiveCategory}: NavbarProps = {}) {
     const { theme, setTheme } = useTheme();
-    const [isMenuOpen, setIsMenuOpen] = useState(false);
-    const pathname = usePathname();
-    
-    const navLinks = [
-        { href: "/", label: "Home", icon: Home },
-        { href: "/editor", label: "Workspace", icon: FileEdit },
-    ];
 
     return (
         <nav className="fixed top-0 w-full z-[100] border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-            <div className="container flex h-14 items-center justify-between">
+            <div className="max-w-6xl mx-auto flex h-16 items-center justify-between px-4 md:px-6">
                 <div className="flex items-center gap-8">
-                    <Link href="/" className="flex items-center space-x-2">
-                        <span className="font-bold text-lg tracking-tight">Web Utils</span>
+                    <Link href="/" className="flex items-center space-x-2.5">
+                        <div className="size-7 rounded bg-primary/10 flex items-center justify-center text-primary">
+                            <Command className="size-4" />
+                        </div>
+                        <span className="font-bold text-xl tracking-tight">Web Utils</span>
                     </Link>
-                    <nav className="hidden md:flex items-center space-x-6 text-sm font-medium">
-                        {navLinks.map((link) => (
-                            <Link
-                                key={link.href}
-                                href={link.href}
-                                className={`transition-colors hover:text-foreground/80 ${pathname === link.href ? "text-foreground" : "text-foreground/60"}`}
-                            >
-                                {link.label}
-                            </Link>
-                        ))}
-                    </nav>
+
                 </div>
 
                 <div className="flex items-center gap-2">
                     <nav className="flex items-center gap-1">
-                        <a href="https://github.com/nishanth-kj/Web-Utils" target="_blank" rel="noreferrer" className="hidden sm:inline-block">
+                        <a href="https://github.com/nishanth-kj/Web-Utils" target="_blank" rel="noreferrer" className="inline-block">
                             <Button variant="ghost" size="icon" className="size-8">
                                 <Github className="size-4" />
                                 <span className="sr-only">GitHub</span>
@@ -55,35 +47,9 @@ export function Navbar() {
                             <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
                             <span className="sr-only">Toggle theme</span>
                         </Button>
-                        
-                        <Button
-                            variant="ghost"
-                            size="icon"
-                            className="size-8 md:hidden"
-                            onClick={() => setIsMenuOpen(!isMenuOpen)}
-                        >
-                            {isMenuOpen ? <X className="size-4" /> : <Menu className="size-4" />}
-                        </Button>
                     </nav>
                 </div>
             </div>
-
-            {/* Mobile Menu */}
-            {isMenuOpen && (
-                <div className="md:hidden border-t bg-background p-4 flex flex-col gap-2">
-                    {navLinks.map((link) => (
-                        <Link
-                            key={link.href}
-                            href={link.href}
-                            onClick={() => setIsMenuOpen(false)}
-                            className={`flex items-center gap-2 p-2 rounded-md text-sm font-medium ${pathname === link.href ? "bg-secondary" : "hover:bg-accent"}`}
-                        >
-                            <link.icon className="size-4" />
-                            <span>{link.label}</span>
-                        </Link>
-                    ))}
-                </div>
-            )}
         </nav>
     );
 }
diff --git a/components/layout/splash-screen.tsx b/components/layout/splash-screen.tsx
index 3c747a4..afbc4e9 100644
--- a/components/layout/splash-screen.tsx
+++ b/components/layout/splash-screen.tsx
@@ -1,11 +1,11 @@
 "use client";
 
 import React from 'react';
-import { Layout, Zap } from 'lucide-react';
+import {Layout, Zap} from 'lucide-react';
 import gsap from 'gsap';
-import { useGSAP } from '@gsap/react';
+import {useGSAP} from '@gsap/react';
 
-export function SplashScreen({ onComplete }: { onComplete: () => void }) {
+export function SplashScreen({ onCompleteAction }: { onCompleteAction: () => void }) {
     const container = React.useRef<HTMLDivElement>(null);
     const logoRef = React.useRef<HTMLDivElement>(null);
     const textRef = React.useRef<HTMLDivElement>(null);
@@ -17,7 +17,7 @@ export function SplashScreen({ onComplete }: { onComplete: () => void }) {
                     opacity: 0,
                     duration: 0.8,
                     ease: "power2.inOut",
-                    onComplete
+                    onComplete: onCompleteAction
                 });
             }
         });
diff --git a/lib/constants/tools.ts b/lib/constants/tools.ts
index 079f5d7..9cd6aa8 100644
--- a/lib/constants/tools.ts
+++ b/lib/constants/tools.ts
@@ -1,11 +1,16 @@
-import { 
-    FileCode, 
-    Search, 
-    Rocket, 
-    Zap, 
-    Shield, 
+import {
+    Box,
     Braces,
-    type LucideIcon
+    Clock,
+    FileCode,
+    FileEdit,
+    Globe,
+    Image,
+    type LucideIcon,
+    Rocket,
+    Shield,
+    StickyNote,
+    Table
 } from 'lucide-react';
 
 export interface Tool {
@@ -35,6 +40,11 @@ export const TOOL_CATEGORIES: Category[] = [
         label: "JSON Suite",
         description: "A comprehensive set of tools to manipulate and format JSON data"
     },
+    {
+        id: "formats",
+        label: "Document Formats",
+        description: "Format-specific viewers for HTML, XML, CSV, etc."
+    },
     {
         id: "time",
         label: "Time & Date",
@@ -62,15 +72,6 @@ export const TOOLS: Tool[] = [
         status: "Available",
         icon: FileCode
     },
-    {
-        id: "viewer",
-        name: "Universal Viewer",
-        description: "Multi-format previewer for HTML, JSON, YAML, and Markdown files",
-        href: "/view",
-        category: "core",
-        status: "Available",
-        icon: Search
-    },
     {
         id: "ide",
         name: "Power IDE",
@@ -80,15 +81,78 @@ export const TOOLS: Tool[] = [
         status: "Available",
         icon: Rocket
     },
+    {
+        id: "html-preview",
+        name: "HTML Preview",
+        description: "Live preview and editor for HTML documents",
+        href: "/view/html",
+        category: "formats",
+        status: "Available",
+        icon: Globe
+    },
     {
         id: "json-formatter",
         name: "JSON Formatter",
         description: "Clean up and validate messy JSON strings instantly",
-        href: "/view",
+        href: "/view/json",
         category: "json",
         status: "Available",
         icon: Braces
     },
+    {
+        id: "yaml-view",
+        name: "YAML Viewer",
+        description: "Validate and visualize YAML configuration files",
+        href: "/view/yaml",
+        category: "formats",
+        status: "Available",
+        icon: StickyNote
+    },
+    {
+        id: "react-code",
+        name: "React Playground",
+        description: "Write and preview React components in the browser",
+        href: "/view/react",
+        category: "core",
+        status: "Available",
+        icon: Box
+    },
+    {
+        id: "markdown-view",
+        name: "Markdown Editor",
+        description: "Write and preview Markdown with GitHub-flavored support",
+        href: "/view/markdown",
+        category: "formats",
+        status: "Available",
+        icon: FileEdit
+    },
+    {
+        id: "xml-viewer",
+        name: "XML Viewer",
+        description: "Format and inspect XML documents",
+        href: "/view/xml",
+        category: "formats",
+        status: "Available",
+        icon: FileCode
+    },
+    {
+        id: "svg-render",
+        name: "SVG Renderer",
+        description: "Live preview for SVG graphics and icons",
+        href: "/view/svg",
+        category: "media",
+        status: "Available",
+        icon: Image
+    },
+    {
+        id: "csv-viewer",
+        name: "CSV Viewer",
+        description: "View and filter comma-separated values as tables",
+        href: "/view/csv",
+        category: "formats",
+        status: "Available",
+        icon: Table
+    },
     {
         id: "epoch-converter",
         name: "Epoch Converter",
@@ -96,7 +160,7 @@ export const TOOLS: Tool[] = [
         href: "/convert",
         category: "time",
         status: "Available",
-        icon: Zap
+        icon: Clock
     },
     {
         id: "uuid-generator",

From 81ed196ff9c71aa450a8d91530cab069fa4cbebd Mon Sep 17 00:00:00 2001
From: Nishanth <nishanthkj12@gmail.com>
Date: Thu, 30 Apr 2026 22:43:56 +0530
Subject: [PATCH 06/18] feat: implement initial splash screen, main layout
 shell, and tool listing page

---
 app/convert/page.tsx                         |   5 -
 app/documentation/page.tsx                   |   6 +-
 app/page.tsx                                 |  85 ++++-
 app/settings/page.tsx                        | 165 ++++++++-
 app/time/page.tsx                            |   5 +
 components/convert/ConvertPage.tsx           |  18 -
 components/convert/epoch-converter.tsx       | 320 ----------------
 components/convert/index.ts                  |   1 -
 components/editor/editor-container.tsx       | 309 +++++++++++-----
 components/layout/app-sidebar.tsx            |  58 ++-
 components/layout/client-layout.tsx          |   3 -
 components/layout/splash-screen.tsx          |  63 ++--
 components/shared/code-viewer.tsx            |   6 +-
 components/time/TimePage.tsx                 |  13 +
 components/time/epoch-converter.tsx          | 364 +++++++++++++++++++
 components/time/index.ts                     |   1 +
 components/view/viewer-container.tsx         |  73 +++-
 components/workspace/workspace-container.tsx |  75 +++-
 hooks/use-local-storage.ts                   |  37 ++
 lib/constants/tools.ts                       |   2 +-
 lib/time-utils.ts                            |  47 +++
 21 files changed, 1129 insertions(+), 527 deletions(-)
 delete mode 100644 app/convert/page.tsx
 create mode 100644 app/time/page.tsx
 delete mode 100644 components/convert/ConvertPage.tsx
 delete mode 100644 components/convert/epoch-converter.tsx
 delete mode 100644 components/convert/index.ts
 create mode 100644 components/time/TimePage.tsx
 create mode 100644 components/time/epoch-converter.tsx
 create mode 100644 components/time/index.ts
 create mode 100644 hooks/use-local-storage.ts
 create mode 100644 lib/time-utils.ts

diff --git a/app/convert/page.tsx b/app/convert/page.tsx
deleted file mode 100644
index 51825d5..0000000
--- a/app/convert/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { ConvertPage } from "@/components/convert";
-
-export default function Page() {
-    return <ConvertPage />;
-}
diff --git a/app/documentation/page.tsx b/app/documentation/page.tsx
index ccb8731..e6e1a40 100644
--- a/app/documentation/page.tsx
+++ b/app/documentation/page.tsx
@@ -7,8 +7,8 @@ import Footer from "@/components/common/Footer";
 
 export default function DocumentationPage() {
     return (
-        <div className="h-full overflow-auto bg-background p-6 custom-scrollbar w-full">
-            <div className="max-w-4xl mx-auto space-y-8">
+        <div className="h-full overflow-auto bg-background custom-scrollbar w-full flex flex-col">
+            <div className="max-w-4xl mx-auto space-y-8 flex-1 w-full p-6">
                 {/* Header */}
                 <div className="space-y-2">
                     <h1 className="text-3xl font-bold tracking-tight text-foreground flex items-center gap-3">
@@ -94,7 +94,7 @@ export default function DocumentationPage() {
                     </Card>
                 </div>
             </div>
-            <div className="mt-16">
+            <div className="mt-auto">
                 <Footer />
             </div>
         </div>
diff --git a/app/page.tsx b/app/page.tsx
index b594b5a..1eb5bfd 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import React, {useState} from 'react';
-import {Search,} from 'lucide-react';
+import React, {useState, useEffect, useRef} from 'react';
+import {Search, Clock, Copy, Check} from 'lucide-react';
 import {Button} from '@/components/ui/button';
 import {Input} from '@/components/ui/input';
 import {AdsCard} from '@/components/shared/ads-card';
@@ -12,37 +12,92 @@ import Footer from "@/components/common/Footer";
 export default function ToolsListingPage() {
     const [searchQuery, setSearchQuery] = useState("");
     const [activeCategory, setActiveCategory] = useState("all");
+    const [liveEpoch, setLiveEpoch] = useState(() => Math.floor(Date.now() / 1000));
+    const [copied, setCopied] = useState(false);
+    const searchInputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setLiveEpoch(Math.floor(Date.now() / 1000));
+        }, 1000);
+        return () => clearInterval(interval);
+    }, []);
+
+    useEffect(() => {
+        const down = (e: KeyboardEvent) => {
+            if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                searchInputRef.current?.focus();
+            }
+        };
+        document.addEventListener("keydown", down);
+        return () => document.removeEventListener("keydown", down);
+    }, []);
+
 
     const filteredTools = TOOLS.filter((tool: Tool) => {
         const matchesSearch = tool.name.toLowerCase().includes(searchQuery.toLowerCase()) || 
-                            tool.description.toLowerCase().includes(searchQuery.toLowerCase());
+                             tool.description.toLowerCase().includes(searchQuery.toLowerCase());
         const matchesCategory = activeCategory === 'all' || tool.category === activeCategory;
         return matchesSearch && matchesCategory;
     });
 
+    const handleCopyEpoch = () => {
+        navigator.clipboard.writeText(String(liveEpoch));
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+
     return (
-        <div className="h-full overflow-auto bg-background p-6 custom-scrollbar">
-            <div className="max-w-6xl mx-auto space-y-8">
+        <div className="h-full overflow-auto bg-background custom-scrollbar flex flex-col">
+            <div className="max-w-6xl mx-auto space-y-8 flex-1 w-full p-6">
                 {/* Header */}
-                <div className="space-y-2">
-                    <h1 className="text-3xl font-bold tracking-tight text-foreground">
-                        Developer Tools
-                    </h1>
-                    <p className="text-muted-foreground">
-                        A clean, minimalist suite of developer utilities and converters.
-                    </p>
+                <div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
+                    <div className="space-y-2">
+                        <h1 className="text-3xl font-bold tracking-tight text-foreground">
+                            Developer Tools
+                        </h1>
+                        <p className="text-muted-foreground">
+                            A clean, minimalist suite of developer utilities and converters.
+                        </p>
+                    </div>
+
+                    <div 
+                        className="flex items-center gap-2 px-2 py-1 cursor-pointer hover:bg-muted/30 rounded-lg transition-all group animate-in fade-in slide-in-from-right-4 duration-700"
+                        onClick={handleCopyEpoch}
+                        title="Click to copy epoch"
+                    >
+                        <div className="size-1.5 rounded-full bg-primary animate-pulse" />
+                        <div className="flex flex-col items-end">
+                            <span className="font-mono text-sm font-bold text-foreground tabular-nums">
+                                {liveEpoch}
+                            </span>
+                            <span className="text-[9px] text-muted-foreground font-medium uppercase tracking-tighter">
+                                {new Date(liveEpoch * 1000).toUTCString().split(' ').slice(0, 5).join(' ')} UTC
+                            </span>
+                        </div>
+                        <div className="flex items-center justify-center">
+                            {copied ? <Check className="size-3 text-emerald-500" /> : <Copy className="size-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />}
+                        </div>
+                    </div>
                 </div>
 
                 {/* Search and Filters */}
                 <div className="flex flex-col md:flex-row gap-4">
-                    <div className="flex-1 relative">
+                    <div className="flex-1 relative group">
                         <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
                         <Input 
+                            ref={searchInputRef}
                             placeholder="Search tools..." 
-                            className="pl-9 h-10 bg-background border-input"
+                            className="pl-9 pr-12 h-10 bg-background border-input"
                             value={searchQuery}
                             onChange={(e) => setSearchQuery(e.target.value)}
                         />
+                        <div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center">
+                            <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100 transition-opacity group-focus-within:opacity-0">
+                                <span className="text-xs">⌘</span>K
+                            </kbd>
+                        </div>
                     </div>
                     <div className="flex flex-wrap gap-2">
                         <Button
@@ -93,7 +148,7 @@ export default function ToolsListingPage() {
                     <AdsCard variant="horizontal" className="col-span-1 md:col-span-2 lg:col-span-3 mt-2" />
                 </div>
             </div>
-            <div className="mt-16">
+            <div className="mt-auto">
                 <Footer />
             </div>
         </div>
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index aafe315..35007c3 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -2,19 +2,26 @@
 
 import React from 'react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Settings, Moon, Sun, Monitor, Type, Code } from 'lucide-react';
+import { Settings, Moon, Sun, Monitor, Type, Code, Clock, Globe, Timer } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Separator } from '@/components/ui/separator';
 import Footer from "@/components/common/Footer";
 
+import { useLocalStorage } from '@/hooks/use-local-storage';
+
 export default function SettingsPage() {
     const { theme, setTheme } = useTheme();
+    const [fontSize, setFontSize] = useLocalStorage('editorFontSize', 14);
+    const [tabSize, setTabSize] = useLocalStorage('editorTabSize', 4);
+    const [wordWrap, setWordWrap] = useLocalStorage('editorWordWrap', 'on');
+    const [timeZone, setTimeZone] = useLocalStorage('timeZone', 'UTC');
+    const [timeFormat, setTimeFormat] = useLocalStorage('timeFormat', 'seconds');
 
     return (
-        <div className="h-full overflow-auto bg-background p-6 custom-scrollbar w-full">
-            <div className="max-w-4xl mx-auto space-y-8">
+        <div className="h-full overflow-auto bg-background custom-scrollbar w-full flex flex-col">
+            <div className="max-w-4xl mx-auto space-y-8 flex-1 w-full p-6">
                 {/* Header */}
                 <div className="space-y-2">
                     <h1 className="text-3xl font-bold tracking-tight text-foreground flex items-center gap-3">
@@ -71,20 +78,166 @@ export default function SettingsPage() {
                                 <label className="text-sm font-medium flex items-center gap-2">
                                     <Type className="size-4 text-muted-foreground" /> Default Font Size
                                 </label>
-                                <Input type="number" defaultValue={14} className="w-full bg-muted/50 border-transparent focus-visible:ring-indigo-500" />
+                                <Input 
+                                    type="number" 
+                                    value={fontSize} 
+                                    onChange={(e) => setFontSize(Number(e.target.value))}
+                                    className="w-full bg-muted/50 border-transparent focus-visible:ring-indigo-500" 
+                                />
                             </div>
                             <Separator className="bg-border/50" />
                             <div className="space-y-2">
                                 <label className="text-sm font-medium flex items-center gap-2">
                                     <Code className="size-4 text-muted-foreground" /> Tab Size
                                 </label>
-                                <Input type="number" defaultValue={4} className="w-full bg-muted/50 border-transparent focus-visible:ring-indigo-500" />
+                                <Input 
+                                    type="number" 
+                                    value={tabSize} 
+                                    onChange={(e) => setTabSize(Number(e.target.value))}
+                                    className="w-full bg-muted/50 border-transparent focus-visible:ring-indigo-500" 
+                                />
+                            </div>
+                        </CardContent>
+                    </Card>
+
+                    {/* Time & Date Preferences */}
+                    <Card className="border-border/50 shadow-sm md:col-span-2">
+                        <CardHeader>
+                            <CardTitle className="text-lg flex items-center gap-2">
+                                <Clock className="size-5 text-emerald-500" />
+                                Time & Date Configuration
+                            </CardTitle>
+                            <CardDescription>Default preferences for epoch conversion and time display.</CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-6">
+                            <div className="grid md:grid-cols-2 gap-8">
+                                <div className="space-y-3">
+                                    <label className="text-sm font-semibold flex items-center gap-2">
+                                        <Globe className="size-4 text-muted-foreground" /> Default Time Zone
+                                    </label>
+                                    <div className="flex gap-2 p-1 bg-muted/30 rounded-lg w-fit">
+                                        <Button 
+                                            variant={timeZone === 'UTC' ? 'secondary' : 'ghost'} 
+                                            size="sm" 
+                                            className="h-8 text-xs font-bold"
+                                            onClick={() => setTimeZone('UTC')}
+                                        >
+                                            UTC / GMT
+                                        </Button>
+                                        <Button 
+                                            variant={timeZone === 'Local' ? 'secondary' : 'ghost'} 
+                                            size="sm" 
+                                            className="h-8 text-xs font-bold"
+                                            onClick={() => setTimeZone('Local')}
+                                        >
+                                            Local Time
+                                        </Button>
+                                    </div>
+                                    <p className="text-[10px] text-muted-foreground">Sets the primary display format for human-readable dates.</p>
+                                </div>
+
+                                <div className="space-y-3">
+                                    <label className="text-sm font-semibold flex items-center gap-2">
+                                        <Timer className="size-4 text-muted-foreground" /> Default Epoch Format
+                                    </label>
+                                    <div className="flex gap-2 p-1 bg-muted/30 rounded-lg w-fit">
+                                        <Button 
+                                            variant={timeFormat === 'seconds' ? 'secondary' : 'ghost'} 
+                                            size="sm" 
+                                            className="h-8 text-xs font-bold"
+                                            onClick={() => setTimeFormat('seconds')}
+                                        >
+                                            Seconds (10 digits)
+                                        </Button>
+                                        <Button 
+                                            variant={timeFormat === 'millis' ? 'secondary' : 'ghost'} 
+                                            size="sm" 
+                                            className="h-8 text-xs font-bold"
+                                            onClick={() => setTimeFormat('millis')}
+                                        >
+                                            Millis (13 digits)
+                                        </Button>
+                                    </div>
+                                    <p className="text-[10px] text-muted-foreground">Default precision when using "Now" or generating timestamps.</p>
+                                </div>
                             </div>
                         </CardContent>
                     </Card>
+
+                    {/* Data Management */}
+                    <Card className="border-border/50 shadow-sm md:col-span-2">
+                        <CardHeader>
+                            <CardTitle className="text-lg">Data Management</CardTitle>
+                            <CardDescription>Export or import your application settings and workspace data.</CardDescription>
+                        </CardHeader>
+                        <CardContent className="flex flex-wrap gap-4">
+                            <Button 
+                                variant="secondary" 
+                                className="gap-2"
+                                onClick={() => {
+                                    const data = { ...localStorage };
+                                    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+                                    const url = URL.createObjectURL(blob);
+                                    const a = document.createElement('a');
+                                    a.href = url;
+                                    a.download = `web-utils-settings-${new Date().toISOString().split('T')[0]}.json`;
+                                    a.click();
+                                }}
+                            >
+                                <Code className="size-4" /> Export Settings
+                            </Button>
+                            
+                            <div className="relative">
+                                <Input 
+                                    type="file" 
+                                    accept=".json"
+                                    className="hidden" 
+                                    id="import-settings"
+                                    onChange={(e) => {
+                                        const file = e.target.files?.[0];
+                                        if (file) {
+                                            const reader = new FileReader();
+                                            reader.onload = (event) => {
+                                                try {
+                                                    const data = JSON.parse(event.target?.result as string);
+                                                    Object.entries(data).forEach(([key, value]) => {
+                                                        localStorage.setItem(key, value as string);
+                                                    });
+                                                    window.location.reload();
+                                                } catch (err) {
+                                                    alert('Invalid settings file');
+                                                }
+                                            };
+                                            reader.readAsText(file);
+                                        }
+                                    }}
+                                />
+                                <Button 
+                                    variant="outline" 
+                                    className="gap-2"
+                                    onClick={() => document.getElementById('import-settings')?.click()}
+                                >
+                                    <Monitor className="size-4" /> Import Settings
+                                </Button>
+                            </div>
+
+                            <Button 
+                                variant="destructive" 
+                                className="gap-2"
+                                onClick={() => {
+                                    if (confirm('Are you sure you want to reset all settings? This will reload the page.')) {
+                                        localStorage.clear();
+                                        window.location.reload();
+                                    }
+                                }}
+                            >
+                                <Settings className="size-4" /> Reset All
+                            </Button>
+                        </CardContent>
+                    </Card>
                 </div>
             </div>
-            <div className="mt-16">
+            <div className="mt-auto">
                 <Footer />
             </div>
         </div>
diff --git a/app/time/page.tsx b/app/time/page.tsx
new file mode 100644
index 0000000..d2653d7
--- /dev/null
+++ b/app/time/page.tsx
@@ -0,0 +1,5 @@
+import { TimePage } from "@/components/time";
+
+export default function Page() {
+    return <TimePage />;
+}
diff --git a/components/convert/ConvertPage.tsx b/components/convert/ConvertPage.tsx
deleted file mode 100644
index 3a9d76c..0000000
--- a/components/convert/ConvertPage.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-"use client";
-
-import { SidebarProvider } from "@/components/ui/sidebar";
-import { AppSidebar } from "@/components/layout/app-sidebar";
-import { EpochConverter } from "./epoch-converter";
-
-export function ConvertPage() {
-    return (
-        <SidebarProvider>
-            <div className="flex w-full h-full overflow-hidden">
-                <AppSidebar />
-                <main className="flex-1 overflow-auto bg-zinc-50/50 dark:bg-zinc-950/50 relative">
-                    <EpochConverter />
-                </main>
-            </div>
-        </SidebarProvider>
-    );
-}
diff --git a/components/convert/epoch-converter.tsx b/components/convert/epoch-converter.tsx
deleted file mode 100644
index fd46eee..0000000
--- a/components/convert/epoch-converter.tsx
+++ /dev/null
@@ -1,320 +0,0 @@
-"use client";
-
-import React, { useState, useEffect, useCallback } from "react";
-import {
-    Clock,
-    Copy,
-    Check,
-    ArrowRight,
-    RefreshCw,
-    Calendar,
-    Globe,
-    Timer,
-    Zap,
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-
-function formatRelativeTime(date: Date): string {
-    const now = new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const absDiff = Math.abs(diffMs);
-    const isFuture = diffMs < 0;
-    const prefix = isFuture ? "in " : "";
-    const suffix = isFuture ? "" : " ago";
-
-    const seconds = Math.floor(absDiff / 1000);
-    const minutes = Math.floor(seconds / 60);
-    const hours = Math.floor(minutes / 60);
-    const days = Math.floor(hours / 24);
-    const months = Math.floor(days / 30);
-    const years = Math.floor(days / 365);
-
-    if (seconds < 60) return `${prefix}${seconds} second${seconds !== 1 ? "s" : ""}${suffix}`;
-    if (minutes < 60) return `${prefix}${minutes} minute${minutes !== 1 ? "s" : ""}${suffix}`;
-    if (hours < 24) return `${prefix}${hours} hour${hours !== 1 ? "s" : ""}${suffix}`;
-    if (days < 30) return `${prefix}${days} day${days !== 1 ? "s" : ""}${suffix}`;
-    if (months < 12) return `${prefix}${months} month${months !== 1 ? "s" : ""}${suffix}`;
-    return `${prefix}${years} year${years !== 1 ? "s" : ""}${suffix}`;
-}
-
-function toLocalDatetimeString(date: Date): string {
-    const y = date.getFullYear();
-    const m = String(date.getMonth() + 1).padStart(2, "0");
-    const d = String(date.getDate()).padStart(2, "0");
-    const h = String(date.getHours()).padStart(2, "0");
-    const min = String(date.getMinutes()).padStart(2, "0");
-    const s = String(date.getSeconds()).padStart(2, "0");
-    return `${y}-${m}-${d}T${h}:${min}:${s}`;
-}
-
-type CopiedField = string | null;
-
-export function EpochConverter() {
-    // State
-    const [epochInput, setEpochInput] = useState("");
-    const [dateInput, setDateInput] = useState("");
-    const [liveEpoch, setLiveEpoch] = useState(() => Math.floor(Date.now() / 1000));
-    const [copied, setCopied] = useState<CopiedField>(null);
-
-    // Live clock effect
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setLiveEpoch(Math.floor(Date.now() / 1000));
-        }, 1000);
-        return () => clearInterval(interval);
-    }, []);
-
-    const copyToClipboard = useCallback((text: string, field: string) => {
-        navigator.clipboard.writeText(text);
-        setCopied(field);
-        setTimeout(() => setCopied(null), 1500);
-    }, []);
-
-    // Derived from epochInput
-    const { parsedDate, epochError, isMillis } = React.useMemo(() => {
-        if (!epochInput.trim()) {
-            return { parsedDate: null, epochError: "", isMillis: false };
-        }
-        const num = Number(epochInput.trim());
-        if (isNaN(num)) {
-            return { parsedDate: null, epochError: "Enter a valid number", isMillis: false };
-        }
-        // Auto-detect: if > 10 digits, treat as milliseconds
-        const isMs = epochInput.trim().length > 10;
-        const ms = isMs ? num : num * 1000;
-        const d = new Date(ms);
-        if (isNaN(d.getTime())) {
-            return { parsedDate: null, epochError: "Invalid timestamp", isMillis: isMs };
-        }
-        return { parsedDate: d, epochError: "", isMillis: isMs };
-    }, [epochInput]);
-
-    // Derived from dateInput
-    const { dateEpochSeconds, dateEpochMillis } = React.useMemo(() => {
-        if (!dateInput) {
-            return { dateEpochSeconds: null, dateEpochMillis: null };
-        }
-        const d = new Date(dateInput);
-        if (isNaN(d.getTime())) {
-            return { dateEpochSeconds: null, dateEpochMillis: null };
-        }
-        return { 
-            dateEpochSeconds: Math.floor(d.getTime() / 1000), 
-            dateEpochMillis: d.getTime() 
-        };
-    }, [dateInput]);
-
-    const setNow = () => {
-        const now = Math.floor(Date.now() / 1000);
-        setEpochInput(String(now));
-    };
-
-    const setDateNow = () => {
-        setDateInput(toLocalDatetimeString(new Date()));
-    };
-
-    const CopyButton = ({ value, field }: { value: string; field: string }) => (
-        <button
-            onClick={() => copyToClipboard(value, field)}
-            className="flex items-center justify-center size-7 rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-400 hover:text-indigo-500 transition-all active:scale-90"
-            title="Copy"
-        >
-            {copied === field ? (
-                <Check className="size-3.5 text-emerald-500" />
-            ) : (
-                <Copy className="size-3.5" />
-            )}
-        </button>
-    );
-
-    return (
-        <div className="flex flex-col w-full h-[calc(100vh-64px)] bg-white dark:bg-zinc-950 overflow-hidden">
-            {/* Top Bar — live epoch */}
-            <div className="flex items-center justify-between px-6 py-3 border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/50 backdrop-blur-md">
-                <div className="flex items-center gap-3">
-                    <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-indigo-50 dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/20">
-                        <Timer className="size-4 text-indigo-500" />
-                        <span className="text-[10px] font-black uppercase tracking-widest text-indigo-600 dark:text-indigo-400">Epoch Converter</span>
-                    </div>
-                </div>
-                <div className="flex items-center gap-3">
-                    <div className="flex items-center gap-2 px-3 py-1.5 bg-zinc-100 dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
-                        <Zap className="size-3 text-amber-500 animate-pulse" />
-                        <span className="text-xs font-mono font-bold text-zinc-600 dark:text-zinc-300 tabular-nums">{liveEpoch}</span>
-                    </div>
-                    <button
-                        onClick={() => copyToClipboard(String(liveEpoch), "live")}
-                        className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-bold text-zinc-500 hover:text-indigo-500 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all"
-                    >
-                        {copied === "live" ? <Check className="size-3 text-emerald-500" /> : <Copy className="size-3" />}
-                        Copy
-                    </button>
-                </div>
-            </div>
-
-            {/* Main Content — Two Cards */}
-            <div className="flex-1 overflow-auto p-6 custom-scrollbar">
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 max-w-6xl mx-auto">
-
-                    {/* Card 1: Epoch -> Date */}
-                    <div className="flex flex-col rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm overflow-hidden">
-                        {/* Card Header */}
-                        <div className="flex items-center gap-3 px-5 py-4 border-b border-zinc-100 dark:border-zinc-800 bg-gradient-to-r from-indigo-50/50 to-purple-50/50 dark:from-indigo-500/5 dark:to-purple-500/5">
-                            <div className="size-9 rounded-xl bg-indigo-500/10 flex items-center justify-center">
-                                <Clock className="size-4.5 text-indigo-500" />
-                            </div>
-                            <div>
-                                <h2 className="text-sm font-bold text-zinc-900 dark:text-zinc-100">Epoch to Date</h2>
-                                <p className="text-[11px] text-zinc-500 dark:text-zinc-400">Convert Unix timestamp to human-readable date</p>
-                            </div>
-                        </div>
-
-                        {/* Input */}
-                        <div className="p-5 space-y-4">
-                            <div className="flex gap-2">
-                                <div className="relative flex-1">
-                                    <input
-                                        type="text"
-                                        value={epochInput}
-                                        onChange={(e) => setEpochInput(e.target.value)}
-                                        placeholder="e.g. 1740000000"
-                                        className="w-full h-11 px-4 rounded-xl border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500 dark:focus:border-indigo-500 transition-all placeholder:text-zinc-400"
-                                    />
-                                    {isMillis && epochInput && !epochError && (
-                                        <span className="absolute right-3 top-1/2 -translate-y-1/2 text-[9px] font-bold uppercase tracking-widest text-amber-500 bg-amber-50 dark:bg-amber-500/10 px-2 py-0.5 rounded-md">ms</span>
-                                    )}
-                                </div>
-                                <Button
-                                    variant="outline"
-                                    size="sm"
-                                    onClick={setNow}
-                                    className="h-11 px-4 rounded-xl border-zinc-200 dark:border-zinc-700 hover:border-indigo-300 dark:hover:border-indigo-600 text-xs font-bold gap-1.5 shrink-0"
-                                >
-                                    <RefreshCw className="size-3.5" /> Now
-                                </Button>
-                            </div>
-                            {epochError && (
-                                <p className="text-xs text-red-500 font-medium pl-1">{epochError}</p>
-                            )}
-
-                            {/* Results */}
-                            {parsedDate && (
-                                <div className="space-y-2 animate-in fade-in-0 slide-in-from-top-2 duration-300">
-                                    {[
-                                        { label: "UTC", value: parsedDate.toUTCString(), field: "utc", icon: Globe },
-                                        { label: "Local", value: parsedDate.toLocaleString(), field: "local", icon: Calendar },
-                                        { label: "ISO 8601", value: parsedDate.toISOString(), field: "iso", icon: Clock },
-                                        { label: "Relative", value: formatRelativeTime(parsedDate), field: "relative", icon: Timer },
-                                    ].map((item) => (
-                                        <div
-                                            key={item.field}
-                                            className="flex items-center justify-between gap-3 px-4 py-3 rounded-xl bg-zinc-50 dark:bg-zinc-800/50 border border-zinc-100 dark:border-zinc-800 group hover:border-indigo-200 dark:hover:border-indigo-500/20 transition-all"
-                                        >
-                                            <div className="flex items-center gap-3 min-w-0">
-                                                <item.icon className="size-3.5 text-zinc-400 shrink-0" />
-                                                <span className="text-[10px] font-bold uppercase tracking-widest text-zinc-400 w-16 shrink-0">{item.label}</span>
-                                                <span className="text-sm font-mono text-zinc-700 dark:text-zinc-300 truncate">{item.value}</span>
-                                            </div>
-                                            <CopyButton value={item.value} field={item.field} />
-                                        </div>
-                                    ))}
-                                </div>
-                            )}
-
-                            {!parsedDate && !epochError && !epochInput && (
-                                <div className="flex flex-col items-center justify-center py-12 text-center opacity-40">
-                                    <Clock className="size-10 mb-3 text-indigo-400" />
-                                    <p className="text-xs font-bold uppercase tracking-widest text-zinc-500">Enter a timestamp above</p>
-                                </div>
-                            )}
-                        </div>
-                    </div>
-
-                    {/* Card 2: Date -> Epoch */}
-                    <div className="flex flex-col rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm overflow-hidden">
-                        {/* Card Header */}
-                        <div className="flex items-center gap-3 px-5 py-4 border-b border-zinc-100 dark:border-zinc-800 bg-gradient-to-r from-purple-50/50 to-pink-50/50 dark:from-purple-500/5 dark:to-pink-500/5">
-                            <div className="size-9 rounded-xl bg-purple-500/10 flex items-center justify-center">
-                                <Calendar className="size-4.5 text-purple-500" />
-                            </div>
-                            <div>
-                                <h2 className="text-sm font-bold text-zinc-900 dark:text-zinc-100">Date to Epoch</h2>
-                                <p className="text-[11px] text-zinc-500 dark:text-zinc-400">Convert date and time to Unix timestamp</p>
-                            </div>
-                        </div>
-
-                        {/* Input */}
-                        <div className="p-5 space-y-4">
-                            <div className="flex gap-2">
-                                <input
-                                    type="datetime-local"
-                                    value={dateInput}
-                                    onChange={(e) => setDateInput(e.target.value)}
-                                    className="flex-1 h-11 px-4 rounded-xl border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-purple-500/30 focus:border-purple-500 dark:focus:border-purple-500 transition-all [color-scheme:light] dark:[color-scheme:dark]"
-                                />
-                                <Button
-                                    variant="outline"
-                                    size="sm"
-                                    onClick={setDateNow}
-                                    className="h-11 px-4 rounded-xl border-zinc-200 dark:border-zinc-700 hover:border-purple-300 dark:hover:border-purple-600 text-xs font-bold gap-1.5 shrink-0"
-                                >
-                                    <RefreshCw className="size-3.5" /> Now
-                                </Button>
-                            </div>
-
-                            {/* Results */}
-                            {dateEpochSeconds !== null && (
-                                <div className="space-y-2 animate-in fade-in-0 slide-in-from-top-2 duration-300">
-                                    {[
-                                        { label: "Seconds", value: String(dateEpochSeconds), field: "d-sec" },
-                                        { label: "Millis", value: String(dateEpochMillis), field: "d-ms" },
-                                    ].map((item) => (
-                                        <div
-                                            key={item.field}
-                                            className="flex items-center justify-between gap-3 px-4 py-3 rounded-xl bg-zinc-50 dark:bg-zinc-800/50 border border-zinc-100 dark:border-zinc-800 group hover:border-purple-200 dark:hover:border-purple-500/20 transition-all"
-                                        >
-                                            <div className="flex items-center gap-3 min-w-0">
-                                                <Timer className="size-3.5 text-zinc-400 shrink-0" />
-                                                <span className="text-[10px] font-bold uppercase tracking-widest text-zinc-400 w-16 shrink-0">{item.label}</span>
-                                                <span className="text-sm font-mono font-semibold text-zinc-700 dark:text-zinc-300">{item.value}</span>
-                                            </div>
-                                            <CopyButton value={item.value} field={item.field} />
-                                        </div>
-                                    ))}
-
-                                    {/* Extra info */}
-                                    <div className="mt-3 space-y-2">
-                                        {[
-                                            { label: "UTC", value: new Date(dateEpochSeconds * 1000).toUTCString(), field: "d-utc", icon: Globe },
-                                            { label: "ISO 8601", value: new Date(dateEpochSeconds * 1000).toISOString(), field: "d-iso", icon: Clock },
-                                            { label: "Relative", value: formatRelativeTime(new Date(dateEpochSeconds * 1000)), field: "d-rel", icon: ArrowRight },
-                                        ].map((item) => (
-                                            <div
-                                                key={item.field}
-                                                className="flex items-center justify-between gap-3 px-4 py-2.5 rounded-lg bg-zinc-50/50 dark:bg-zinc-800/30 border border-zinc-100/50 dark:border-zinc-800/50 transition-all"
-                                            >
-                                                <div className="flex items-center gap-3 min-w-0">
-                                                    <item.icon className="size-3 text-zinc-400 shrink-0" />
-                                                    <span className="text-[10px] font-bold uppercase tracking-widest text-zinc-400 w-16 shrink-0">{item.label}</span>
-                                                    <span className="text-xs font-mono text-zinc-500 dark:text-zinc-400 truncate">{item.value}</span>
-                                                </div>
-                                                <CopyButton value={item.value} field={item.field} />
-                                            </div>
-                                        ))}
-                                    </div>
-                                </div>
-                            )}
-
-                            {dateEpochSeconds === null && (
-                                <div className="flex flex-col items-center justify-center py-12 text-center opacity-40">
-                                    <Calendar className="size-10 mb-3 text-purple-400" />
-                                    <p className="text-xs font-bold uppercase tracking-widest text-zinc-500">Select a date above</p>
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
diff --git a/components/convert/index.ts b/components/convert/index.ts
deleted file mode 100644
index 1573b8a..0000000
--- a/components/convert/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./ConvertPage";
diff --git a/components/editor/editor-container.tsx b/components/editor/editor-container.tsx
index 718c933..9481d1a 100644
--- a/components/editor/editor-container.tsx
+++ b/components/editor/editor-container.tsx
@@ -15,7 +15,16 @@ import {
     Trash,
     Eye,
     Copy as CopyIcon,
-    Check
+    Check,
+    Settings,
+    Type as TypeIcon,
+    Code2,
+    PanelLeftClose,
+    PanelLeftOpen,
+    Maximize2,
+    ChevronDown,
+    Layout as LayoutIcon,
+    AlignLeft
 } from "lucide-react";
 import { TableViewer } from '@/components/shared/table-viewer';
 import { ContainerProps, Format } from '@/types';
@@ -31,8 +40,17 @@ import {
     DropdownMenuRadioItem,
 } from "@/components/ui/dropdown-menu";
 import { useEditor } from '@/lib/hooks/use-editor';
+import { useLocalStorage } from '@/hooks/use-local-storage';
 import { PREVIEWABLE_FORMATS, ALL_FORMATS, getLanguage } from '@/lib/formats';
 import { Separator } from '@/components/ui/separator';
+import {
+    ResizableHandle,
+    ResizablePanel,
+    ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { HTMLViewer } from '@/components/shared/html-viewer';
+import { CodeViewer } from '@/components/shared/code-viewer';
 
 export function EditorContainer({ initialContent, initialFormat }: ContainerProps) {
     const router = useRouter();
@@ -44,9 +62,30 @@ export function EditorContainer({ initialContent, initialFormat }: ContainerProp
 
     const [fileName, setFileName] = useState(`index.${getLanguage(initialFormat)}`);
     const [copied, setCopied] = useState(false);
-    const [wordWrap, setWordWrap] = useState<"on" | "off">("on");
+    
+    // Editor Settings from LocalStorage
+    const [prefFontSize, setPrefFontSize] = useLocalStorage('editorFontSize', 14);
+    const [prefTabSize, setPrefTabSize] = useLocalStorage('editorTabSize', 4);
+    const [prefWordWrap, setPrefWordWrap] = useLocalStorage('editorWordWrap', 'on');
+    
+    const [wordWrap, setWordWrap] = useState<"on" | "off">(prefWordWrap as "on" | "off");
+
+    // Sync local wordWrap with preference when preference changes
+    React.useEffect(() => {
+        setWordWrap(prefWordWrap as "on" | "off");
+    }, [prefWordWrap]);
+
+    const handleWordWrapToggle = () => {
+        const newVal = wordWrap === "on" ? "off" : "on";
+        setWordWrap(newVal);
+        setPrefWordWrap(newVal);
+    };
+
     const [viewMode, setViewMode] = useState<'code' | 'table'>('code');
     const [cursorPos, setCursorPos] = useState({ line: 1, col: 1 });
+    const [showPreview, setShowPreview] = useState(true);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [activeTab, setActiveTab] = useState("preview");
     const editorRef = useRef<any>(null); // eslint-disable-line @typescript-eslint/no-explicit-any
 
     const handleEditorDidMount: OnMount = (editor) => {
@@ -129,9 +168,9 @@ export function EditorContainer({ initialContent, initialFormat }: ContainerProp
     const isPreviewable = PREVIEWABLE_FORMATS.includes(format.toLowerCase() as Format);
 
     return (
-        <div className="flex flex-col h-full bg-background font-sans border-t">
+        <div className={`flex flex-col w-full bg-background transition-all duration-300 ${isFullscreen ? "fixed inset-0 z-[200] h-screen" : "h-full border-t"}`}>
             {/* Header / Standard Toolbar */}
-            <div className="flex items-center justify-between px-4 h-14 border-b bg-muted/20">
+            <div className="flex items-center justify-between px-4 h-14 border-b bg-muted/20 backdrop-blur-md">
                 <div className="flex items-center gap-4">
                     <div className="flex items-center gap-2">
                         <div className="p-1.5 bg-primary/10 rounded-md">
@@ -152,127 +191,196 @@ export function EditorContainer({ initialContent, initialFormat }: ContainerProp
                     <div className="flex items-center gap-1">
                         <DropdownMenu>
                             <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" size="sm" className="h-8 text-xs font-medium">
-                                    File
+                                <Button variant="ghost" size="sm" className="h-8 text-xs font-medium uppercase tracking-widest text-muted-foreground gap-2">
+                                    <span className="text-foreground">{format}</span>
+                                    <ChevronDown className="size-3" />
                                 </Button>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="start" className="w-[180px]">
-                                <DropdownMenuItem onClick={handleNewFile} className="gap-2">
-                                    <Plus className="size-3.5" /> New File
-                                </DropdownMenuItem>
-                                <DropdownMenuItem onClick={handleNewTable} className="gap-2">
-                                    <TableIcon className="size-3.5" /> New Table
-                                </DropdownMenuItem>
-                                <DropdownMenuSeparator />
-                                <DropdownMenuItem onClick={handleSave} className="gap-2">
-                                    <Save className="size-3.5" /> Save
-                                </DropdownMenuItem>
-                                <DropdownMenuSeparator />
-                                <DropdownMenuItem onClick={() => setContent("")} className="gap-2 text-destructive">
-                                    <Trash className="size-3.5" /> Clear
-                                </DropdownMenuItem>
+                                {ALL_FORMATS.slice(0, 10).map((fmt) => (
+                                    <DropdownMenuItem key={fmt} onClick={() => handleFormatChange(fmt as Format)} className="text-xs uppercase">
+                                        {fmt}
+                                    </DropdownMenuItem>
+                                ))}
                             </DropdownMenuContent>
                         </DropdownMenu>
 
+                        <Button variant="ghost" size="sm" onClick={handleWordWrapToggle} className="h-8 text-[10px] font-bold uppercase text-muted-foreground">
+                            Wrap: {wordWrap}
+                        </Button>
+
                         <DropdownMenu>
                             <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" size="sm" className="h-8 text-xs font-medium">
-                                    Format
+                                <Button variant="ghost" size="icon" className="size-8 rounded-md text-muted-foreground">
+                                    <Settings className="size-4" />
                                 </Button>
                             </DropdownMenuTrigger>
-                            <DropdownMenuContent align="start" className="w-[180px]">
-                                <DropdownMenuLabel className="text-[10px] uppercase font-bold text-muted-foreground">Select Language</DropdownMenuLabel>
-                                <DropdownMenuRadioGroup value={format} onValueChange={(v) => handleFormatChange(v as Format)}>
-                                    {ALL_FORMATS.slice(0, 10).map((fmt) => (
-                                        <DropdownMenuRadioItem key={fmt} value={fmt} className="text-xs uppercase">
-                                            {fmt}
-                                        </DropdownMenuRadioItem>
-                                    ))}
-                                </DropdownMenuRadioGroup>
+                            <DropdownMenuContent align="end" className="w-[200px] p-3 space-y-4">
+                                <div className="space-y-1.5">
+                                    <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
+                                        <TypeIcon className="size-3" /> Font Size
+                                    </label>
+                                    <div className="flex items-center gap-2">
+                                        <input 
+                                            type="range" 
+                                            min="10" 
+                                            max="24" 
+                                            value={prefFontSize} 
+                                            onChange={(e) => setPrefFontSize(Number(e.target.value))}
+                                            className="flex-1 h-1 bg-muted rounded-full appearance-none cursor-pointer accent-primary"
+                                        />
+                                        <span className="text-[10px] font-bold tabular-nums w-4 text-center">{prefFontSize}</span>
+                                    </div>
+                                </div>
+                                <div className="space-y-1.5">
+                                    <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
+                                        <Code2 className="size-3" /> Tab Size
+                                    </label>
+                                    <div className="flex gap-2">
+                                        {[2, 4, 8].map(size => (
+                                            <Button 
+                                                key={size}
+                                                variant={prefTabSize === size ? "secondary" : "ghost"}
+                                                size="sm"
+                                                className="h-7 flex-1 text-[10px] font-bold"
+                                                onClick={() => setPrefTabSize(size)}
+                                            >
+                                                {size}
+                                            </Button>
+                                        ))}
+                                    </div>
+                                </div>
+                                <DropdownMenuSeparator />
+                                <div className="space-y-1.5 pt-1">
+                                    <Button variant="ghost" size="sm" onClick={handleNewFile} className="w-full justify-start h-8 text-[10px] font-bold uppercase gap-2">
+                                        <Plus className="size-3.5" /> New File
+                                    </Button>
+                                    <Button variant="ghost" size="sm" onClick={handleNewTable} className="w-full justify-start h-8 text-[10px] font-bold uppercase gap-2">
+                                        <TableIcon className="size-3.5" /> New Table
+                                    </Button>
+                                    <Button variant="ghost" size="sm" onClick={handleSave} className="w-full justify-start h-8 text-[10px] font-bold uppercase gap-2 text-primary">
+                                        <Save className="size-3.5" /> Save
+                                    </Button>
+                                    <Button variant="ghost" size="sm" onClick={() => setContent("")} className="w-full justify-start h-8 text-[10px] font-bold uppercase gap-2 text-destructive">
+                                        <Trash className="size-3.5" /> Clear
+                                    </Button>
+                                </div>
                             </DropdownMenuContent>
                         </DropdownMenu>
-
-                        <Button variant="ghost" size="sm" onClick={() => setWordWrap(wordWrap === "on" ? "off" : "on")} className="h-8 text-xs font-medium">
-                            Wrap: {wordWrap.toUpperCase()}
-                        </Button>
-                    </div>
-
-                    <Separator orientation="vertical" className="h-6" />
-
-                    <div className="flex items-center bg-muted rounded-md p-1 gap-1">
-                        <Button
-                            variant={viewMode === 'code' ? 'secondary' : 'ghost'}
-                            size="sm"
-                            onClick={() => setViewMode('code')}
-                            className="h-7 px-3 text-xs"
-                        >
-                            <Code className="size-3.5 mr-1.5" /> Source
-                        </Button>
-                        {isTabularData && (
-                            <Button
-                                variant={viewMode === 'table' ? 'secondary' : 'ghost'}
-                                size="sm"
-                                onClick={() => setViewMode('table')}
-                                className="h-7 px-3 text-xs"
-                            >
-                                <TableIcon className="size-3.5 mr-1.5" /> Table
-                            </Button>
-                        )}
                     </div>
                 </div>
 
                 <div className="flex items-center gap-2">
                     <Button variant="outline" size="sm" onClick={handleAutoFormat} className="h-8 text-xs font-semibold gap-2">
-                        Format Code
+                        <AlignLeft className="size-3.5" /> Format
                     </Button>
                     <Button variant="outline" size="sm" onClick={handleCopy} className="h-8 text-xs font-semibold gap-2">
                         {copied ? <Check className="size-3.5" /> : <CopyIcon className="size-3.5" />}
                         {copied ? "Copied" : "Copy"}
                     </Button>
-                    {isPreviewable && (
-                        <Button
-                            variant="default"
-                            size="sm"
-                            onClick={() => router.push(`/view/${format}`)}
-                            className="h-8 text-xs font-semibold gap-2 bg-indigo-600 hover:bg-indigo-700"
-                        >
-                            <Eye className="size-3.5" /> Preview
-                        </Button>
-                    )}
+                    <Separator orientation="vertical" className="h-6 mx-1" />
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        className="size-8 rounded-md text-muted-foreground"
+                        onClick={() => setShowPreview(!showPreview)}
+                    >
+                        {showPreview ? <PanelLeftClose className="size-4" /> : <PanelLeftOpen className="size-4" />}
+                    </Button>
+                    <Button variant="ghost" size="icon" className="size-8 rounded-md text-muted-foreground" onClick={() => setIsFullscreen(!isFullscreen)}>
+                        <Maximize2 className="size-4" />
+                    </Button>
                 </div>
             </div>
 
-            {/* Main Editor Canvas */}
+            {/* Main Split Canvas */}
             <div className="flex-1 flex overflow-hidden">
-                {viewMode === 'code' ? (
-                    <Editor
-                        height="100%"
-                        language={getLanguage(format)}
-                        value={content}
-                        onChange={(value) => setContent(value || "")}
-                        onMount={handleEditorDidMount}
-                        theme={resolvedTheme === 'dark' ? 'vs-dark' : 'light'}
-                        options={{
-                            minimap: { enabled: false },
-                            fontSize: 14,
-                            wordWrap: wordWrap,
-                            automaticLayout: true,
-                            padding: { top: 16 },
-                            lineNumbersMinChars: 3,
-                            scrollBeyondLastLine: false,
-                        }}
-                    />
-                ) : (
-                    <div className="flex-1 p-8 overflow-auto bg-background">
-                        <TableViewer
-                            data={JSON.parse(content)}
-                            onDataChange={(newData) => {
-                                setContent(JSON.stringify(newData, null, 2));
-                                setIsSaved(false);
-                            }}
-                        />
-                    </div>
-                )}
+                <ResizablePanelGroup direction="horizontal">
+                    <ResizablePanel defaultSize={showPreview ? 50 : 100} minSize={20}>
+                        <div className="flex flex-col h-full relative">
+                            <Editor
+                                height="100%"
+                                language={getLanguage(format)}
+                                value={content}
+                                onChange={(value) => setContent(value || "")}
+                                onMount={handleEditorDidMount}
+                                theme={resolvedTheme === 'dark' ? 'vs-dark' : 'light'}
+                                options={{
+                                    minimap: { enabled: false },
+                                    fontSize: prefFontSize,
+                                    tabSize: prefTabSize,
+                                    wordWrap: wordWrap,
+                                    automaticLayout: true,
+                                    padding: { top: 16 },
+                                    lineNumbersMinChars: 3,
+                                    scrollBeyondLastLine: false,
+                                }}
+                            />
+                            {/* Subtle Editor Footer */}
+                            <div className="absolute bottom-0 right-4 h-6 flex items-center gap-4 text-[10px] font-bold text-muted-foreground/40 uppercase z-10 pointer-events-none">
+                                <span>Line {cursorPos.line}, Col {cursorPos.col}</span>
+                                <span>{content.length} chars</span>
+                            </div>
+                        </div>
+                    </ResizablePanel>
+
+                    {showPreview && (
+                        <>
+                            <ResizableHandle withHandle />
+                            <ResizablePanel defaultSize={50} minSize={20}>
+                                <div className="flex flex-col h-full bg-background border-l">
+                                    <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col overflow-hidden">
+                                        <div className="flex items-center justify-between px-4 h-11 border-b bg-muted/10">
+                                            <TabsList className="h-8 bg-muted/50">
+                                                <TabsTrigger value="preview" className="text-[10px] font-bold uppercase py-1.5 h-7">
+                                                    <Eye className="size-3 mr-2" /> Preview
+                                                </TabsTrigger>
+                                                <TabsTrigger value="viewer" className="text-[10px] font-bold uppercase py-1.5 h-7">
+                                                    <Code className="size-3 mr-2" /> Source
+                                                </TabsTrigger>
+                                                {isTabularData && (
+                                                    <TabsTrigger value="table" className="text-[10px] font-bold uppercase py-1.5 h-7">
+                                                        <TableIcon className="size-3 mr-2" /> Data
+                                                    </TabsTrigger>
+                                                )}
+                                            </TabsList>
+                                        </div>
+
+                                        <div className="flex-1 relative overflow-hidden">
+                                            <TabsContent value="preview" className="h-full m-0 p-0 border-none transition-all">
+                                                {format === 'html' ? (
+                                                    <HTMLViewer content={content} useBootstrap={true} useTailwind={true} enableJS={true} />
+                                                ) : format === 'markdown' ? (
+                                                    <div className="prose prose-zinc dark:prose-invert max-w-none bg-background p-8 min-h-full">
+                                                        <CodeViewer content={content} language="markdown" wrapLines={true} />
+                                                    </div>
+                                                ) : format === 'svg' ? (
+                                                    <div className="flex items-center justify-center p-8 bg-background h-full overflow-auto" dangerouslySetInnerHTML={{ __html: content }} />
+                                                ) : (
+                                                    <div className="flex flex-col items-center justify-center text-center h-full p-20 opacity-30">
+                                                        <LayoutIcon className="size-16 mb-4 text-primary" />
+                                                        <p className="text-sm font-bold uppercase tracking-widest">No Live Preview</p>
+                                                    </div>
+                                                )}
+                                            </TabsContent>
+
+                                            <TabsContent value="viewer" className="h-full m-0 p-0 bg-background">
+                                                <CodeViewer content={content} language={getLanguage(format)} wrapLines={wordWrap === 'on'} />
+                                            </TabsContent>
+
+                                            <TabsContent value="table" className="h-full m-0 p-8 overflow-auto">
+                                                <TableViewer data={JSON.parse(content || '[]')} onDataChange={(newData) => {
+                                                    setContent(JSON.stringify(newData, null, 2));
+                                                    setIsSaved(false);
+                                                }} />
+                                            </TabsContent>
+                                        </div>
+                                    </Tabs>
+                                </div>
+                            </ResizablePanel>
+                        </>
+                    )}
+                </ResizablePanelGroup>
             </div>
 
             {/* Sub-Footer Status Bar */}
@@ -288,10 +396,11 @@ export function EditorContainer({ initialContent, initialFormat }: ContainerProp
                     </div>
                 </div>
                 <div className="flex items-center gap-4">
-                    <span>Line {cursorPos.line}, Col {cursorPos.col}</span>
+                    <span>{isSaved ? "Saved" : "Modified"}</span>
                     <span>Monaco Editor</span>
                 </div>
             </div>
         </div>
     );
+
 }
diff --git a/components/layout/app-sidebar.tsx b/components/layout/app-sidebar.tsx
index b31fa0e..6fd0b38 100644
--- a/components/layout/app-sidebar.tsx
+++ b/components/layout/app-sidebar.tsx
@@ -26,6 +26,7 @@ import {
 } from "@/components/ui/sidebar";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { TOOLS, TOOL_CATEGORIES, type Tool, type Category } from "@/lib/constants/tools";
@@ -34,6 +35,19 @@ export function AppSidebar() {
     const pathname = usePathname();
     const { toggleSidebar, state } = useSidebar();
     const [searchQuery, setSearchQuery] = React.useState("");
+    const searchInputRef = React.useRef<HTMLInputElement>(null);
+
+    React.useEffect(() => {
+        const down = (e: KeyboardEvent) => {
+            if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                searchInputRef.current?.focus();
+            }
+        };
+        document.addEventListener("keydown", down);
+        return () => document.removeEventListener("keydown", down);
+    }, []);
+
     const isCollapsed = state === "collapsed";
 
     return (
@@ -45,18 +59,28 @@ export function AppSidebar() {
 
             {/* Toggle Button "On the Line" - Placed Between Header and Content */}
             <div className={`absolute right-0 bottom-12 z-[100] transition-all duration-500 ${isCollapsed ? 'translate-x-full' : 'translate-x-1/2'}`}>
-                <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={toggleSidebar}
-                    className="size-8 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-full shadow-xl text-zinc-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all duration-300 hover:scale-110 active:scale-95 flex items-center justify-center cursor-pointer shadow-indigo-500/10"
-                >
-                    {isCollapsed ? (
-                        <ChevronRight className="size-4" />
-                    ) : (
-                        <ChevronLeft className="size-4" />
-                    )}
-                </Button>
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={toggleSidebar}
+                            className="size-8 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-full shadow-xl text-zinc-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all duration-300 hover:scale-110 active:scale-95 flex items-center justify-center cursor-pointer shadow-indigo-500/10"
+                        >
+                            {isCollapsed ? (
+                                <ChevronRight className="size-4" />
+                            ) : (
+                                <ChevronLeft className="size-4" />
+                            )}
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent side={isCollapsed ? "right" : "left"} className="flex items-center gap-2">
+                        <span>Toggle Sidebar</span>
+                        <kbd className="inline-flex h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
+                            <span className="text-xs">⌘</span>B
+                        </kbd>
+                    </TooltipContent>
+                </Tooltip>
             </div>
 
             <SidebarHeader className="border-b border-sidebar-border px-4 py-4 flex flex-col gap-4">
@@ -72,14 +96,20 @@ export function AppSidebar() {
                         <span>Home</span>
                     </Link>
                 </div>
-                <div className="relative">
+                <div className="relative group">
                     <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground" />
                     <Input 
+                        ref={searchInputRef}
                         placeholder="Search tools..." 
-                        className="pl-8 h-8 text-xs bg-muted/50 border-transparent focus-visible:ring-1 focus-visible:ring-indigo-500"
+                        className="pl-8 pr-8 h-8 text-xs bg-muted/50 border-transparent focus-visible:ring-1 focus-visible:ring-indigo-500"
                         value={searchQuery}
                         onChange={(e) => setSearchQuery(e.target.value)}
                     />
+                    <div className="absolute right-1.5 top-1/2 -translate-y-1/2 flex items-center">
+                        <kbd className="pointer-events-none inline-flex h-4 select-none items-center gap-1 rounded border bg-background px-1 font-mono text-[9px] font-medium text-muted-foreground opacity-100 transition-opacity group-focus-within:opacity-0">
+                            <span className="text-[10px]">⌘</span>K
+                        </kbd>
+                    </div>
                 </div>
             </SidebarHeader>
 
diff --git a/components/layout/client-layout.tsx b/components/layout/client-layout.tsx
index 198e971..5d033fd 100644
--- a/components/layout/client-layout.tsx
+++ b/components/layout/client-layout.tsx
@@ -4,7 +4,6 @@ import React, { useState, useEffect } from "react";
 import { usePathname } from "next/navigation";
 import {SidebarProvider} from "@/components/ui/sidebar";
 import {SplashScreen} from "@/components/layout/splash-screen";
-import {CommandMenu} from "@/components/layout/command-menu";
 import {Navbar} from "@/components/layout/navbar";
 import Footer from "@/components/common/Footer";
 import {AppSidebar} from "@/components/layout/app-sidebar";
@@ -49,8 +48,6 @@ export function ClientLayout({ children }: { children: React.ReactNode }) {
                 />
             )}
 
-            <CommandMenu />
-
             <div className={`flex flex-1 ${isToolPage ? 'pt-0' : 'pt-16'} overflow-hidden w-full`}>
           <div className="flex-1 h-full overflow-hidden relative flex flex-col">
             <div className="flex-1 relative overflow-hidden">
diff --git a/components/layout/splash-screen.tsx b/components/layout/splash-screen.tsx
index afbc4e9..31815fb 100644
--- a/components/layout/splash-screen.tsx
+++ b/components/layout/splash-screen.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from 'react';
-import {Layout, Zap} from 'lucide-react';
+import {Command} from 'lucide-react';
 import gsap from 'gsap';
 import {useGSAP} from '@gsap/react';
 
@@ -15,7 +15,7 @@ export function SplashScreen({ onCompleteAction }: { onCompleteAction: () => voi
             onComplete: () => {
                 gsap.to(container.current, {
                     opacity: 0,
-                    duration: 0.8,
+                    duration: 0.3,
                     ease: "power2.inOut",
                     onComplete: onCompleteAction
                 });
@@ -25,23 +25,23 @@ export function SplashScreen({ onCompleteAction }: { onCompleteAction: () => voi
         tl.from(logoRef.current, {
             scale: 0.5,
             opacity: 0,
-            duration: 1,
+            duration: 0.4,
             ease: "back.out(1.7)"
         })
         .from(textRef.current, {
             y: 20,
             opacity: 0,
-            duration: 0.8,
+            duration: 0.3,
             ease: "power3.out"
-        }, "-=0.5")
+        }, "-=0.2")
         .to(logoRef.current, {
             rotation: 360,
-            duration: 2,
+            duration: 0.6,
             ease: "power1.inOut"
-        }, "-=0.2")
+        }, "-=0.1")
         .to(container.current, {
-            delay: 0.5,
-            duration: 0.5
+            delay: 0.1,
+            duration: 0.2
         });
 
     }, { scope: container });
@@ -49,39 +49,38 @@ export function SplashScreen({ onCompleteAction }: { onCompleteAction: () => voi
     return (
         <div 
             ref={container}
-            className="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-zinc-950 text-white select-none overflow-hidden"
+            className="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-background text-foreground select-none overflow-hidden"
         >
-            <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-indigo-500/10 via-transparent to-transparent opacity-50" />
+            <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-foreground/5 via-transparent to-transparent opacity-100" />
             
-            <div className="relative flex flex-col items-center gap-6" style={{ perspective: "1000px" }}>
+            <div className="relative flex flex-col items-center gap-8" style={{ perspective: "1000px" }}>
                 <div 
                     ref={logoRef}
-                    className="size-24 rounded-3xl bg-indigo-600 flex items-center justify-center shadow-[0_0_50px_rgba(79,70,229,0.3)] border border-indigo-400/20"
+                    className="size-20 rounded-2xl bg-secondary flex items-center justify-center shadow-xl border border-border"
                 >
-                    <Layout className="size-12" />
+                    <Command className="size-10 text-foreground" />
                 </div>
                 
-                <div ref={textRef} className="text-center space-y-2">
-                    <h1 className="text-4xl font-black tracking-tighter flex items-center gap-2">
-                        WEB UTILS <span className="text-indigo-500 italic">PRO</span>
-                        <Zap className="size-6 text-indigo-400 animate-pulse" />
+                <div ref={textRef} className="text-center flex flex-col items-center">
+                    <h1 className="text-4xl font-bold tracking-tight text-foreground">
+                        Web Utils
                     </h1>
-                    <p className="text-zinc-500 text-sm font-medium tracking-widest uppercase">
-                        The Ultimate Developer Workspace
+                    <p className="text-muted-foreground text-sm font-medium tracking-wide mt-2">
+                        The Developer Workspace
                     </p>
-                </div>
-            </div>
 
-            {/* Progress bar simulation */}
-            <div className="absolute bottom-20 w-48 h-1 bg-zinc-800 rounded-full overflow-hidden">
-                <style dangerouslySetInnerHTML={{ __html: `
-                    @keyframes loading {
-                        0% { width: 0%; transform: translateX(-100%); }
-                        50% { width: 50%; transform: translateX(0%); }
-                        100% { width: 100%; transform: translateX(100%); }
-                    }
-                ` }} />
-                <div className="h-full bg-indigo-600" style={{ animation: "loading 3s ease-in-out infinite" }} />
+                    {/* Progress bar simulation correctly placed under text */}
+                    <div className="w-48 h-1 bg-muted rounded-full overflow-hidden mt-8 relative">
+                        <style dangerouslySetInnerHTML={{ __html: `
+                            @keyframes loading {
+                                0% { left: -100%; width: 100%; }
+                                50% { left: 0%; width: 50%; }
+                                100% { left: 100%; width: 100%; }
+                            }
+                        ` }} />
+                        <div className="absolute top-0 bottom-0 bg-foreground rounded-full" style={{ animation: "loading 0.8s ease-in-out infinite" }} />
+                    </div>
+                </div>
             </div>
         </div>
     );
diff --git a/components/shared/code-viewer.tsx b/components/shared/code-viewer.tsx
index d9f3c4f..1ccd705 100644
--- a/components/shared/code-viewer.tsx
+++ b/components/shared/code-viewer.tsx
@@ -3,6 +3,7 @@
 import React, { forwardRef } from 'react';
 import Editor from '@monaco-editor/react';
 import { useTheme } from 'next-themes';
+import { useLocalStorage } from '@/hooks/use-local-storage';
 
 interface CodeViewerProps {
     content: string;
@@ -14,6 +15,8 @@ interface CodeViewerProps {
 
 export const CodeViewer = forwardRef<HTMLDivElement, CodeViewerProps>(({ content, language, className, wrapLines = true }, ref) => {
     const { resolvedTheme } = useTheme();
+    const [prefFontSize] = useLocalStorage('editorFontSize', 14);
+    const [prefTabSize] = useLocalStorage('editorTabSize', 4);
 
     return (
         <div ref={ref} className={`h-full w-full ${className}`}>
@@ -25,7 +28,8 @@ export const CodeViewer = forwardRef<HTMLDivElement, CodeViewerProps>(({ content
                 options={{
                     readOnly: true,
                     minimap: { enabled: false },
-                    fontSize: 13,
+                    fontSize: prefFontSize,
+                    tabSize: prefTabSize,
                     wordWrap: wrapLines ? "on" : "off",
                     automaticLayout: true,
                     scrollBeyondLastLine: false,
diff --git a/components/time/TimePage.tsx b/components/time/TimePage.tsx
new file mode 100644
index 0000000..381ba70
--- /dev/null
+++ b/components/time/TimePage.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { SidebarProvider } from "@/components/ui/sidebar";
+import { AppSidebar } from "@/components/layout/app-sidebar";
+import { EpochConverter } from "./epoch-converter";
+
+export function TimePage() {
+    return (
+        <main className="w-full h-full overflow-auto custom-scrollbar">
+            <EpochConverter />
+        </main>
+    );
+}
diff --git a/components/time/epoch-converter.tsx b/components/time/epoch-converter.tsx
new file mode 100644
index 0000000..ff143a4
--- /dev/null
+++ b/components/time/epoch-converter.tsx
@@ -0,0 +1,364 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { 
+    Clock, 
+    Calendar, 
+    Timer, 
+    Globe, 
+    Copy, 
+    Check, 
+    RefreshCw, 
+    Zap, 
+    LayoutGrid, 
+    Table as TableIcon, 
+    ArrowRight 
+} from "lucide-react";
+import { 
+    ResizableHandle, 
+    ResizablePanel, 
+    ResizablePanelGroup 
+} from "@/components/ui/resizable";
+import { Button } from "@/components/ui/button";
+import { 
+    formatRelativeTime, 
+    getDayOfYear, 
+    getWeekNumber, 
+    toLocalDatetimeString 
+} from "@/lib/time-utils";
+import { cn } from "@/lib/utils";
+import { useLocalStorage } from "@/hooks/use-local-storage";
+
+type CopiedField = string | null;
+
+export function EpochConverter() {
+    // Settings
+    const [prefTimeZone] = useLocalStorage('timeZone', 'UTC');
+    const [prefTimeFormat] = useLocalStorage('timeFormat', 'seconds');
+
+    // State
+    const [epochInput, setEpochInput] = useState("");
+    const [dateInput, setDateInput] = useState("");
+    const [liveEpoch, setLiveEpoch] = useState(() => Math.floor(Date.now() / 1000));
+    const [copied, setCopied] = useState<CopiedField>(null);
+
+    // Live clock effect
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setLiveEpoch(Math.floor(Date.now() / 1000));
+        }, 1000);
+        return () => clearInterval(interval);
+    }, []);
+
+    const copyToClipboard = useCallback((text: string, field: string) => {
+        navigator.clipboard.writeText(text);
+        setCopied(field);
+        setTimeout(() => setCopied(null), 1500);
+    }, []);
+
+    const copyAsTable = (date: Date, field: string) => {
+        const table = `| Format | Value |\n| --- | --- |\n| GMT / UTC | ${date.toUTCString()} |\n| Local Time | ${date.toLocaleString()} |\n| ISO 8601 | ${date.toISOString()} |\n| Relative | ${formatRelativeTime(date)} |`;
+        navigator.clipboard.writeText(table);
+        setCopied(field);
+        setTimeout(() => setCopied(null), 1500);
+    };
+
+    // Derived from epochInput
+    const { parsedDate, epochError, isMillis } = React.useMemo(() => {
+        if (!epochInput.trim()) {
+            return { parsedDate: null, epochError: "", isMillis: false };
+        }
+        const num = Number(epochInput.trim());
+        if (isNaN(num)) {
+            return { parsedDate: null, epochError: "Enter a valid number", isMillis: false };
+        }
+        const isMs = epochInput.trim().length > 10;
+        const ms = isMs ? num : num * 1000;
+        const d = new Date(ms);
+        if (isNaN(d.getTime())) {
+            return { parsedDate: null, epochError: "Invalid timestamp", isMillis: isMs };
+        }
+        return { parsedDate: d, epochError: "", isMillis: isMs };
+    }, [epochInput]);
+
+    // Derived from dateInput
+    const { dateEpochSeconds, dateEpochMillis } = React.useMemo(() => {
+        if (!dateInput) {
+            return { dateEpochSeconds: null, dateEpochMillis: null };
+        }
+        const d = new Date(dateInput);
+        if (isNaN(d.getTime())) {
+            return { dateEpochSeconds: null, dateEpochMillis: null };
+        }
+        return { 
+            dateEpochSeconds: Math.floor(d.getTime() / 1000), 
+            dateEpochMillis: d.getTime() 
+        };
+    }, [dateInput]);
+
+    const setNow = () => {
+        const now = Date.now();
+        const value = prefTimeFormat === 'millis' ? now : Math.floor(now / 1000);
+        setEpochInput(String(value));
+    };
+
+    const setDateNow = () => {
+        setDateInput(toLocalDatetimeString(new Date()));
+    };
+
+    const CopyButton = ({ value, field, className }: { value: string; field: string; className?: string }) => (
+        <button
+            onClick={() => copyToClipboard(value, field)}
+            className={cn("flex items-center justify-center size-8 rounded-lg hover:bg-zinc-200 dark:hover:bg-zinc-800 text-zinc-400 hover:text-primary transition-all active:scale-90", className)}
+            title="Copy"
+        >
+            {copied === field ? (
+                <Check className="size-4 text-emerald-500" />
+            ) : (
+                <Copy className="size-4" />
+            )}
+        </button>
+    );
+
+    const TableRow = ({ icon: Icon, label, value, field, mono = true, isPreferred = false }: any) => (
+        <tr className={cn(
+            "border-b border-muted/30 group hover:bg-muted/5 transition-colors",
+            isPreferred && "bg-primary/[0.03] border-l-2 border-l-primary"
+        )}>
+            <td className="py-3 pl-4 pr-2">
+                <div className="flex items-center gap-3">
+                    <Icon className={cn("size-3.5 transition-colors", isPreferred ? "text-primary" : "text-muted-foreground group-hover:text-primary")} />
+                    <span className={cn("text-[10px] font-bold uppercase tracking-wider", isPreferred ? "text-primary" : "text-muted-foreground")}>{label}</span>
+                </div>
+            </td>
+            <td className={cn("py-3 px-4 text-sm font-medium tabular-nums truncate", mono ? "font-mono" : "text-foreground", isPreferred && "text-primary font-bold")}>
+                {value}
+            </td>
+            <td className="py-3 pl-2 pr-4 text-right">
+                <CopyButton value={value} field={field} />
+            </td>
+        </tr>
+    );
+
+    return (
+        <div className="flex flex-col w-full h-full bg-background text-foreground overflow-hidden">
+            {/* Header section with Live Epoch */}
+            <div className="relative border-b bg-muted/5 px-8 py-4">
+                <div className="max-w-6xl mx-auto flex flex-col md:flex-row md:items-center justify-between gap-6">
+                    <div>
+                        <div className="flex items-center gap-2 mb-0.5">
+                            <Clock className="size-4 text-primary" />
+                            <h1 className="text-xl font-bold tracking-tight">Time & Date</h1>
+                        </div>
+                        <p className="text-muted-foreground text-[11px]">Professional epoch converter and time utility</p>
+                    </div>
+
+                    <div className="flex items-center gap-4">
+                        <div 
+                            className="flex items-center gap-3 bg-muted/20 px-3 py-1.5 rounded-lg group cursor-pointer hover:bg-muted/30 transition-all border border-transparent hover:border-primary/20" 
+                            onClick={() => copyToClipboard(String(liveEpoch), "live")}
+                        >
+                            <div className="size-1.5 rounded-full bg-primary animate-pulse" />
+                            <div className="flex flex-col">
+                                <span className="font-mono text-sm font-bold tabular-nums text-foreground">
+                                    {liveEpoch}
+                                </span>
+                                <span className="text-[9px] text-muted-foreground font-medium uppercase tracking-tighter">
+                                    {new Date(liveEpoch * 1000).toUTCString().split(' ').slice(0, 5).join(' ')} UTC
+                                </span>
+                            </div>
+                            <div className="flex items-center justify-center ml-2">
+                                {copied === "live" ? <Check className="size-3.5 text-emerald-500" /> : <Copy className="size-3.5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="flex-1 overflow-hidden">
+                <div className="h-full max-w-7xl mx-auto px-6 py-6">
+                    <ResizablePanelGroup direction="horizontal" className="h-full gap-4">
+                        {/* Epoch to Date */}
+                        <ResizablePanel defaultSize={50} minSize={30}>
+                            <div className="h-full overflow-auto custom-scrollbar pr-2">
+                                <div className="space-y-4">
+                                    <div className="bg-card rounded-xl overflow-hidden border border-border/50 shadow-sm">
+                                        <div className="p-5 border-b bg-muted/5 flex items-center justify-between gap-3">
+                                            <div className="flex items-center gap-3">
+                                                <div className="size-8 rounded-lg bg-indigo-500/10 flex items-center justify-center">
+                                                    <Timer className="size-4 text-indigo-500" />
+                                                </div>
+                                                <h3 className="font-bold text-sm">Epoch to Date</h3>
+                                            </div>
+                                            
+                                            {parsedDate && (
+                                                <Button 
+                                                    variant="ghost" 
+                                                    size="sm" 
+                                                    className="h-7 text-[9px] font-bold uppercase tracking-widest text-muted-foreground hover:text-primary gap-1.5"
+                                                    onClick={() => copyAsTable(parsedDate, "table-epoch")}
+                                                >
+                                                    {copied === "table-epoch" ? <Check className="size-3" /> : <TableIcon className="size-3" />}
+                                                    Copy Table
+                                                </Button>
+                                            )}
+                                        </div>
+                                        <div className="p-5 space-y-4">
+                                            <div className="flex gap-2">
+                                                <div className="relative flex-1">
+                                                    <input
+                                                        type="text"
+                                                        value={epochInput}
+                                                        onChange={(e) => setEpochInput(e.target.value)}
+                                                        placeholder="Enter epoch (e.g. 1711206600)"
+                                                        className="w-full h-10 px-4 rounded-lg bg-muted/20 border border-transparent focus:border-primary/30 outline-none transition-all font-mono text-xs placeholder:text-muted-foreground/40 shadow-inner"
+                                                    />
+                                                    {isMillis && epochInput && !epochError && (
+                                                        <div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1 px-1.5 py-0.5 rounded-md bg-amber-500/10 border border-amber-500/20">
+                                                            <Zap className="size-2.5 text-amber-500" />
+                                                            <span className="text-[8px] font-bold text-amber-600">MS</span>
+                                                        </div>
+                                                    )}
+                                                </div>
+                                                <Button onClick={setNow} variant="secondary" size="sm" className="h-10 rounded-lg px-4 font-bold text-xs">
+                                                    Now
+                                                </Button>
+                                            </div>
+                                            {epochError && <p className="text-[10px] text-destructive font-semibold px-1">{epochError}</p>}
+
+                                            {parsedDate ? (
+                                                <div className="rounded-lg border border-muted/50 overflow-hidden animate-in fade-in slide-in-from-top-2 duration-300">
+                                                    <table className="w-full text-left border-collapse">
+                                                        <tbody>
+                                                            <TableRow icon={Globe} label="GMT / UTC" value={parsedDate.toUTCString()} field="utc" isPreferred={prefTimeZone === 'UTC'} />
+                                                            <TableRow icon={Calendar} label="Local Time" value={parsedDate.toLocaleString()} field="local" isPreferred={prefTimeZone === 'Local'} />
+                                                            <TableRow icon={Clock} label="ISO 8601" value={parsedDate.toISOString()} field="iso" />
+                                                            <TableRow icon={Timer} label="Relative" value={formatRelativeTime(parsedDate)} field="rel" mono={false} />
+                                                        </tbody>
+                                                    </table>
+                                                    <div className="grid grid-cols-2 border-t border-muted/50 divide-x divide-muted/50 bg-muted/5">
+                                                        <div className="p-3 flex flex-col items-center justify-center">
+                                                            <span className="text-[8px] font-black uppercase tracking-widest text-muted-foreground mb-1">Day of Year</span>
+                                                            <span className="text-sm font-bold text-primary">{getDayOfYear(parsedDate)}</span>
+                                                        </div>
+                                                        <div className="p-3 flex flex-col items-center justify-center">
+                                                            <span className="text-[8px] font-black uppercase tracking-widest text-muted-foreground mb-1">Week Number</span>
+                                                            <span className="text-sm font-bold text-primary">{getWeekNumber(parsedDate)}</span>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            ) : (
+                                                <div className="flex flex-col items-center justify-center py-10 rounded-lg border border-dashed border-muted/50 bg-muted/5 text-muted-foreground/30">
+                                                    <Clock className="size-10 mb-2 stroke-[1]" />
+                                                    <p className="text-[10px] font-bold uppercase tracking-widest">Waiting for input</p>
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </ResizablePanel>
+
+                        <ResizableHandle withHandle className="bg-border/50" />
+
+                        {/* Date to Epoch */}
+                        <ResizablePanel defaultSize={50} minSize={30}>
+                            <div className="h-full overflow-auto custom-scrollbar pl-2">
+                                <div className="space-y-4">
+                                    <div className="bg-card rounded-xl overflow-hidden border border-border/50 shadow-sm">
+                                        <div className="p-5 border-b bg-muted/5 flex items-center justify-between gap-3">
+                                            <div className="flex items-center gap-3">
+                                                <div className="size-8 rounded-lg bg-purple-500/10 flex items-center justify-center">
+                                                    <Calendar className="size-4 text-purple-500" />
+                                                </div>
+                                                <h3 className="font-bold text-sm">Date to Epoch</h3>
+                                            </div>
+
+                                            {dateEpochSeconds && (
+                                                <Button 
+                                                    variant="ghost" 
+                                                    size="sm" 
+                                                    className="h-7 text-[9px] font-bold uppercase tracking-widest text-muted-foreground hover:text-primary gap-1.5"
+                                                    onClick={() => copyAsTable(new Date(dateEpochSeconds * 1000), "table-date")}
+                                                >
+                                                    {copied === "table-date" ? <Check className="size-3" /> : <TableIcon className="size-3" />}
+                                                    Copy Table
+                                                </Button>
+                                            )}
+                                        </div>
+                                        <div className="p-5 space-y-4">
+                                            <div className="flex gap-2">
+                                                <input
+                                                    type="datetime-local"
+                                                    value={dateInput}
+                                                    onChange={(e) => setDateInput(e.target.value)}
+                                                    className="flex-1 h-10 px-4 rounded-lg bg-muted/20 border border-transparent focus:border-primary/30 outline-none transition-all font-mono text-xs [color-scheme:light] dark:[color-scheme:dark] shadow-inner"
+                                                />
+                                                <Button onClick={setDateNow} variant="secondary" size="sm" className="h-10 rounded-lg px-4 font-bold text-xs">
+                                                    Now
+                                                </Button>
+                                            </div>
+
+                                            {dateEpochSeconds ? (
+                                                <div className="space-y-4 animate-in fade-in slide-in-from-top-2 duration-300">
+                                                    <div className="rounded-lg border border-muted/50 overflow-hidden">
+                                                        <table className="w-full text-left border-collapse">
+                                                            <tbody>
+                                                                <TableRow icon={RefreshCw} label="Unix Seconds" value={String(dateEpochSeconds)} field="d-sec" isPreferred={prefTimeFormat === 'seconds'} />
+                                                                <TableRow icon={Zap} label="Unix Millis" value={String(dateEpochMillis)} field="d-ms" isPreferred={prefTimeFormat === 'millis'} />
+                                                            </tbody>
+                                                        </table>
+                                                    </div>
+                                                    
+                                                    <div className="pt-4 border-t border-dashed border-muted">
+                                                        <div className="flex items-center gap-2 mb-3">
+                                                            <Globe className="size-3 text-muted-foreground" />
+                                                            <span className="text-[9px] font-bold uppercase tracking-widest text-muted-foreground">Verification</span>
+                                                        </div>
+                                                        <div className="grid grid-cols-1 gap-1.5">
+                                                            <div className="flex items-center justify-between text-[10px] px-3 py-1.5 rounded-md bg-muted/10">
+                                                                <span className="text-muted-foreground">UTC Date</span>
+                                                                <span className="font-mono font-medium text-foreground">{new Date(dateEpochSeconds * 1000).toUTCString()}</span>
+                                                            </div>
+                                                            <div className="flex items-center justify-between text-[10px] px-3 py-1.5 rounded-md bg-muted/10">
+                                                                <span className="text-muted-foreground">ISO Format</span>
+                                                                <span className="font-mono font-medium text-foreground">{new Date(dateEpochSeconds * 1000).toISOString()}</span>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            ) : (
+                                                <div className="flex flex-col items-center justify-center py-10 rounded-lg border border-dashed border-muted/50 bg-muted/5 text-muted-foreground/30">
+                                                    <Calendar className="size-10 mb-2 stroke-[1]" />
+                                                    <p className="text-[10px] font-bold uppercase tracking-widest">Select a date</p>
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+
+                                    {/* Extra Utilities Box */}
+                                    <div className="p-5 bg-muted/5 border border-muted/50 rounded-xl">
+                                        <h4 className="font-bold text-[10px] uppercase tracking-widest mb-3 flex items-center gap-2 text-primary">
+                                            <ArrowRight className="size-3" />
+                                            Quick Tips
+                                        </h4>
+                                        <ul className="space-y-2 text-[10px] text-muted-foreground leading-relaxed">
+                                            <li className="flex gap-2">
+                                                <span className="text-primary font-bold">•</span>
+                                                Automatic millisecond detection for inputs &gt; 10 digits.
+                                            </li>
+                                            <li className="flex gap-2">
+                                                <span className="text-primary font-bold">•</span>
+                                                Epoch time starts from January 1st, 1970 (UTC).
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </ResizablePanel>
+                    </ResizablePanelGroup>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/components/time/index.ts b/components/time/index.ts
new file mode 100644
index 0000000..fd93f64
--- /dev/null
+++ b/components/time/index.ts
@@ -0,0 +1 @@
+export * from "./TimePage";
diff --git a/components/view/viewer-container.tsx b/components/view/viewer-container.tsx
index 6375fe8..fd52633 100644
--- a/components/view/viewer-container.tsx
+++ b/components/view/viewer-container.tsx
@@ -25,6 +25,7 @@ import {
     ExternalLink,
     PanelLeftClose,
     PanelLeftOpen,
+    Settings,
     AlignLeft,
     Copy,
     FileEdit,
@@ -49,6 +50,7 @@ import {
 } from "@/components/ui/resizable";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { useEditor } from '@/lib/hooks/use-editor';
+import { useLocalStorage } from '@/hooks/use-local-storage';
 import { ALL_FORMATS, PREVIEWABLE_FORMATS, getLanguage } from '@/lib/formats';
 import { Separator } from '@/components/ui/separator';
 
@@ -65,7 +67,24 @@ export function ViewerContainer({ initialContent, initialFormat }: ContainerProp
     const [useBootstrap, setUseBootstrap] = useState(true);
     const [useTailwind, setUseTailwind] = useState(true);
     const [showEditor, setShowEditor] = useState(true);
-    const [wordWrap, setWordWrap] = useState<"on" | "off">("off");
+    
+    // Editor Settings from LocalStorage
+    const [prefFontSize, setPrefFontSize] = useLocalStorage('editorFontSize', 14);
+    const [prefTabSize, setPrefTabSize] = useLocalStorage('editorTabSize', 4);
+    const [prefWordWrap, setPrefWordWrap] = useLocalStorage('editorWordWrap', 'off');
+    
+    const [wordWrap, setWordWrap] = useState<"on" | "off">(prefWordWrap as "on" | "off");
+
+    // Sync local wordWrap with preference when preference changes
+    React.useEffect(() => {
+        setWordWrap(prefWordWrap as "on" | "off");
+    }, [prefWordWrap]);
+
+    const handleWordWrapToggle = () => {
+        const newVal = wordWrap === "on" ? "off" : "on";
+        setWordWrap(newVal);
+        setPrefWordWrap(newVal);
+    };
 
     const handleClear = () => {
         if (confirm("Are you sure you want to clear the editor?")) {
@@ -188,7 +207,7 @@ export function ViewerContainer({ initialContent, initialFormat }: ContainerProp
     };
 
     return (
-        <div className={`flex flex-col w-full bg-background transition-all duration-300 ${isFullscreen ? "fixed inset-0 z-[200] h-screen" : "h-[calc(100vh-64px)]"}`}>
+        <div className={`flex flex-col w-full bg-background transition-all duration-300 ${isFullscreen ? "fixed inset-0 z-[200] h-screen" : "h-full"}`}>
             {/* Minimalist Top Toolbar */}
             <div className="flex items-center justify-between px-6 h-14 border-b bg-muted/20 backdrop-blur-md">
                 <div className="flex items-center gap-4">
@@ -229,6 +248,51 @@ export function ViewerContainer({ initialContent, initialFormat }: ContainerProp
                     >
                         {showEditor ? <PanelLeftClose className="size-4" /> : <PanelLeftOpen className="size-4" />}
                     </Button>
+                    
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" size="icon" className="size-8 rounded-md text-muted-foreground">
+                                <Settings className="size-4" />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end" className="w-[200px] p-3 space-y-4">
+                            <div className="space-y-1.5">
+                                <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
+                                    <Type className="size-3" /> Font Size
+                                </label>
+                                <div className="flex items-center gap-2">
+                                    <input 
+                                        type="range" 
+                                        min="10" 
+                                        max="24" 
+                                        value={prefFontSize} 
+                                        onChange={(e) => setPrefFontSize(Number(e.target.value))}
+                                        className="flex-1 h-1 bg-muted rounded-full appearance-none cursor-pointer accent-primary"
+                                    />
+                                    <span className="text-[10px] font-bold tabular-nums w-4 text-center">{prefFontSize}</span>
+                                </div>
+                            </div>
+                            <div className="space-y-1.5">
+                                <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
+                                    <Code2 className="size-3" /> Tab Size
+                                </label>
+                                <div className="flex gap-2">
+                                    {[2, 4, 8].map(size => (
+                                        <Button 
+                                            key={size}
+                                            variant={prefTabSize === size ? "secondary" : "ghost"}
+                                            size="sm"
+                                            className="h-7 flex-1 text-[10px] font-bold"
+                                            onClick={() => setPrefTabSize(size)}
+                                        >
+                                            {size}
+                                        </Button>
+                                    ))}
+                                </div>
+                            </div>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+
                     <Button variant="ghost" size="icon" className="size-8 rounded-md text-muted-foreground" onClick={() => setIsFullscreen(!isFullscreen)}>
                         <Maximize2 className="size-4" />
                     </Button>
@@ -251,7 +315,7 @@ export function ViewerContainer({ initialContent, initialFormat }: ContainerProp
                                             <Button variant="ghost" size="icon" onClick={handleFormat} className="size-7" title="Format">
                                                 <AlignLeft className="size-3.5" />
                                             </Button>
-                                            <Button variant="ghost" size="icon" onClick={() => setWordWrap(wordWrap === "on" ? "off" : "on")} className="size-7" title="Wrap">
+                                            <Button variant="ghost" size="icon" onClick={handleWordWrapToggle} className="size-7" title="Wrap">
                                                 <Type className="size-3.5" />
                                             </Button>
                                             <Separator orientation="vertical" className="h-4 mx-1" />
@@ -275,7 +339,8 @@ export function ViewerContainer({ initialContent, initialFormat }: ContainerProp
                                             theme={resolvedTheme === 'dark' ? 'vs-dark' : 'light'}
                                             options={{
                                                 minimap: { enabled: false },
-                                                fontSize: 13,
+                                                fontSize: prefFontSize,
+                                                tabSize: prefTabSize,
                                                 wordWrap: wordWrap,
                                                 automaticLayout: true,
                                                 padding: { top: 16 },
diff --git a/components/workspace/workspace-container.tsx b/components/workspace/workspace-container.tsx
index f893888..9280e94 100644
--- a/components/workspace/workspace-container.tsx
+++ b/components/workspace/workspace-container.tsx
@@ -19,6 +19,9 @@ import {
     Maximize2,
     PanelLeftClose,
     PanelLeftOpen,
+    Settings,
+    Type as TypeIcon,
+    Code2
 } from "lucide-react";
 import { TableViewer } from '@/components/shared/table-viewer';
 import { HTMLViewer } from '@/components/shared/html-viewer';
@@ -39,6 +42,7 @@ import {
 } from "@/components/ui/resizable";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { useEditor } from '@/lib/hooks/use-editor';
+import { useLocalStorage } from '@/hooks/use-local-storage';
 import { PREVIEWABLE_FORMATS, ALL_FORMATS, getLanguage } from '@/lib/formats';
 import { Separator } from '@/components/ui/separator';
 import { format as formatSql } from 'sql-formatter';
@@ -66,7 +70,25 @@ export function WorkspaceContainer({ initialContent, initialFormat }: ContainerP
     // UI State
     const [fileName, setFileName] = useState(`index.${getLanguage(initialFormat)}`);
     const [copied, setCopied] = useState(false);
-    const [wordWrap, setWordWrap] = useState<"on" | "off">("on");
+    
+    // Editor Settings from LocalStorage
+    const [prefFontSize, setPrefFontSize] = useLocalStorage('editorFontSize', 14);
+    const [prefTabSize, setPrefTabSize] = useLocalStorage('editorTabSize', 4);
+    const [prefWordWrap, setPrefWordWrap] = useLocalStorage('editorWordWrap', 'on');
+    
+    const [wordWrap, setWordWrap] = useState<"on" | "off">(prefWordWrap as "on" | "off");
+    
+    // Sync local wordWrap with preference when preference changes
+    React.useEffect(() => {
+        setWordWrap(prefWordWrap as "on" | "off");
+    }, [prefWordWrap]);
+
+    const handleWordWrapToggle = () => {
+        const newVal = wordWrap === "on" ? "off" : "on";
+        setWordWrap(newVal);
+        setPrefWordWrap(newVal);
+    };
+
     const [showEditor, setShowEditor] = useState(true);
     const [isFullscreen, setIsFullscreen] = useState(false);
     const [activeTab, setActiveTab] = useState("preview");
@@ -193,7 +215,7 @@ export function WorkspaceContainer({ initialContent, initialFormat }: ContainerP
     }, [content]);
 
     return (
-        <div className={`flex flex-col w-full bg-background transition-all duration-300 ${isFullscreen ? "fixed inset-0 z-[200] h-screen" : "h-[calc(100vh-56px)]"}`}>
+        <div className={`flex flex-col w-full bg-background transition-all duration-300 ${isFullscreen ? "fixed inset-0 z-[200] h-screen" : "h-full"}`}>
             {/* Unified Workspace Toolbar */}
             <div className="flex items-center justify-between px-4 h-14 border-b bg-muted/20 backdrop-blur-md">
                 <div className="flex items-center gap-4">
@@ -230,9 +252,53 @@ export function WorkspaceContainer({ initialContent, initialFormat }: ContainerP
                             </DropdownMenuContent>
                         </DropdownMenu>
                         
-                        <Button variant="ghost" size="sm" onClick={() => setWordWrap(wordWrap === "on" ? "off" : "on")} className="h-8 text-[10px] font-bold uppercase text-muted-foreground">
+                        <Button variant="ghost" size="sm" onClick={handleWordWrapToggle} className="h-8 text-[10px] font-bold uppercase text-muted-foreground">
                             Wrap: {wordWrap}
                         </Button>
+
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button variant="ghost" size="icon" className="size-8 rounded-md text-muted-foreground">
+                                    <Settings className="size-4" />
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end" className="w-[200px] p-3 space-y-4">
+                                <div className="space-y-1.5">
+                                    <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
+                                        <TypeIcon className="size-3" /> Font Size
+                                    </label>
+                                    <div className="flex items-center gap-2">
+                                        <input 
+                                            type="range" 
+                                            min="10" 
+                                            max="24" 
+                                            value={prefFontSize} 
+                                            onChange={(e) => setPrefFontSize(Number(e.target.value))}
+                                            className="flex-1 h-1 bg-muted rounded-full appearance-none cursor-pointer accent-primary"
+                                        />
+                                        <span className="text-[10px] font-bold tabular-nums w-4 text-center">{prefFontSize}</span>
+                                    </div>
+                                </div>
+                                <div className="space-y-1.5">
+                                    <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
+                                        <Code2 className="size-3" /> Tab Size
+                                    </label>
+                                    <div className="flex gap-2">
+                                        {[2, 4, 8].map(size => (
+                                            <Button 
+                                                key={size}
+                                                variant={prefTabSize === size ? "secondary" : "ghost"}
+                                                size="sm"
+                                                className="h-7 flex-1 text-[10px] font-bold"
+                                                onClick={() => setPrefTabSize(size)}
+                                            >
+                                                {size}
+                                            </Button>
+                                        ))}
+                                    </div>
+                                </div>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
                     </div>
                 </div>
 
@@ -275,7 +341,8 @@ export function WorkspaceContainer({ initialContent, initialFormat }: ContainerP
                                         theme={resolvedTheme === 'dark' ? 'vs-dark' : 'light'}
                                         options={{
                                             minimap: { enabled: false },
-                                            fontSize: 14,
+                                            fontSize: prefFontSize,
+                                            tabSize: prefTabSize,
                                             wordWrap: wordWrap,
                                             automaticLayout: true,
                                             padding: { top: 16 },
diff --git a/hooks/use-local-storage.ts b/hooks/use-local-storage.ts
new file mode 100644
index 0000000..b2e7ace
--- /dev/null
+++ b/hooks/use-local-storage.ts
@@ -0,0 +1,37 @@
+import { useState, useEffect } from "react";
+
+export function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((val: T) => T)) => void] {
+    // State to store our value
+    // Pass initial state function to useState so logic is only executed once
+    const [storedValue, setStoredValue] = useState<T>(() => {
+        if (typeof window === "undefined") {
+            return initialValue;
+        }
+        try {
+            const item = window.localStorage.getItem(key);
+            return item ? JSON.parse(item) : initialValue;
+        } catch (error) {
+            console.error(error);
+            return initialValue;
+        }
+    });
+
+    // Return a wrapped version of useState's setter function that
+    // persists the new value to localStorage.
+    const setValue = (value: T | ((val: T) => T)) => {
+        try {
+            // Allow value to be a function so we have same API as useState
+            const valueToStore = value instanceof Function ? value(storedValue) : value;
+            // Save state
+            setStoredValue(valueToStore);
+            // Save to local storage
+            if (typeof window !== "undefined") {
+                window.localStorage.setItem(key, JSON.stringify(valueToStore));
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
+    return [storedValue, setValue];
+}
diff --git a/lib/constants/tools.ts b/lib/constants/tools.ts
index 9cd6aa8..d2f6696 100644
--- a/lib/constants/tools.ts
+++ b/lib/constants/tools.ts
@@ -157,7 +157,7 @@ export const TOOLS: Tool[] = [
         id: "epoch-converter",
         name: "Epoch Converter",
         description: "Convert between Unix timestamps and human-readable dates",
-        href: "/convert",
+        href: "/time",
         category: "time",
         status: "Available",
         icon: Clock
diff --git a/lib/time-utils.ts b/lib/time-utils.ts
new file mode 100644
index 0000000..c7798d4
--- /dev/null
+++ b/lib/time-utils.ts
@@ -0,0 +1,47 @@
+export function formatRelativeTime(date: Date): string {
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const absDiff = Math.abs(diffMs);
+    const isFuture = diffMs < 0;
+    const prefix = isFuture ? "in " : "";
+    const suffix = isFuture ? "" : " ago";
+
+    const seconds = Math.floor(absDiff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    const months = Math.floor(days / 30);
+    const years = Math.floor(days / 365);
+
+    if (seconds < 60) return `${prefix}${seconds} second${seconds !== 1 ? "s" : ""}${suffix}`;
+    if (minutes < 60) return `${prefix}${minutes} minute${minutes !== 1 ? "s" : ""}${suffix}`;
+    if (hours < 24) return `${prefix}${hours} hour${hours !== 1 ? "s" : ""}${suffix}`;
+    if (days < 30) return `${prefix}${days} day${days !== 1 ? "s" : ""}${suffix}`;
+    if (months < 12) return `${prefix}${months} month${months !== 1 ? "s" : ""}${suffix}`;
+    return `${prefix}${years} year${years !== 1 ? "s" : ""}${suffix}`;
+}
+
+export function getDayOfYear(date: Date): number {
+    const start = new Date(date.getFullYear(), 0, 0);
+    const diff = date.getTime() - start.getTime();
+    const oneDay = 1000 * 60 * 60 * 24;
+    return Math.floor(diff / oneDay);
+}
+
+export function getWeekNumber(date: Date): number {
+    const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+    const dayNum = d.getUTCDay() || 7;
+    d.setUTCDate(d.getUTCDate() + 4 - dayNum);
+    const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+    return Math.ceil((((d.getTime() - yearStart.getTime()) / 86400000) + 1) / 7);
+}
+
+export function toLocalDatetimeString(date: Date): string {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, "0");
+    const d = String(date.getDate()).padStart(2, "0");
+    const h = String(date.getHours()).padStart(2, "0");
+    const min = String(date.getMinutes()).padStart(2, "0");
+    const s = String(date.getSeconds()).padStart(2, "0");
+    return `${y}-${m}-${d}T${h}:${min}:${s}`;
+}

From 2d91a02f7158b5c2bdec1b48b5798aff10fd9dcf Mon Sep 17 00:00:00 2001
From: Nishanth <nishanthkj12@gmail.com>
Date: Thu, 30 Apr 2026 23:04:10 +0530
Subject: [PATCH 07/18] feat: implement tools registry and core components for
 blockchain, crypto, dummy, and drawing utilities

---
 app/crypto/blockchain/page.tsx               |   5 +
 app/crypto/page.tsx                          |   5 +
 app/documentation/page.tsx                   |  40 +++
 app/draw/page.tsx                            |   5 +
 app/dummy/page.tsx                           |   5 +
 components/crypto/blockchain-page.tsx        | 190 +++++++++++
 components/crypto/uuid-page.tsx              | 132 ++++++++
 components/draw/draw-page.tsx                | 231 +++++++++++++
 components/dummy/dummy-page.tsx              | 170 ++++++++++
 components/editor/editor-container.tsx       | 336 ++++++++++---------
 components/shared/html-viewer.tsx            |   6 +-
 components/view/viewer-container.tsx         |  40 ++-
 components/workspace/workspace-container.tsx | 180 +++++-----
 lib/constants/tools.ts                       |  34 +-
 14 files changed, 1129 insertions(+), 250 deletions(-)
 create mode 100644 app/crypto/blockchain/page.tsx
 create mode 100644 app/crypto/page.tsx
 create mode 100644 app/draw/page.tsx
 create mode 100644 app/dummy/page.tsx
 create mode 100644 components/crypto/blockchain-page.tsx
 create mode 100644 components/crypto/uuid-page.tsx
 create mode 100644 components/draw/draw-page.tsx
 create mode 100644 components/dummy/dummy-page.tsx

diff --git a/app/crypto/blockchain/page.tsx b/app/crypto/blockchain/page.tsx
new file mode 100644
index 0000000..fc5f95d
--- /dev/null
+++ b/app/crypto/blockchain/page.tsx
@@ -0,0 +1,5 @@
+import { BlockchainPage } from "@/components/crypto/blockchain-page";
+
+export default function Page() {
+    return <BlockchainPage />;
+}
diff --git a/app/crypto/page.tsx b/app/crypto/page.tsx
new file mode 100644
index 0000000..1434cf3
--- /dev/null
+++ b/app/crypto/page.tsx
@@ -0,0 +1,5 @@
+import { UuidPage } from "@/components/crypto/uuid-page";
+
+export default function Page() {
+    return <UuidPage />;
+}
diff --git a/app/documentation/page.tsx b/app/documentation/page.tsx
index e6e1a40..0c0c726 100644
--- a/app/documentation/page.tsx
+++ b/app/documentation/page.tsx
@@ -93,6 +93,46 @@ export default function DocumentationPage() {
                         </CardContent>
                     </Card>
                 </div>
+
+                {/* Learn Section */}
+                <div className="space-y-6 pt-8">
+                    <h2 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-3">
+                        <Sparkles className="size-6 text-amber-500" />
+                        How Things Work
+                    </h2>
+                    
+                    <div className="grid gap-6 md:grid-cols-1">
+                        <Card className="border-amber-500/20 bg-amber-500/5 shadow-sm">
+                            <CardHeader>
+                                <CardTitle className="text-lg flex items-center gap-2">
+                                    <Book className="size-5 text-amber-500" /> Blockchain Technology
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent className="space-y-4 text-sm text-muted-foreground leading-relaxed">
+                                <p>
+                                    At its core, a blockchain is a <strong>distributed ledger</strong>. Imagine a digital spreadsheet that is copied thousands of times across a network of computers. This network is designed to regularly update this spreadsheet.
+                                </p>
+                                <div className="grid md:grid-cols-3 gap-4 py-2">
+                                    <div className="space-y-1">
+                                        <div className="font-bold text-foreground">1. Blocks</div>
+                                        <p className="text-xs">Data is bundled into blocks. Each block has a unique hash and the hash of the previous block.</p>
+                                    </div>
+                                    <div className="space-y-1">
+                                        <div className="font-bold text-foreground">2. Hashing</div>
+                                        <p className="text-xs">A cryptographic fingerprint. If any data in the block changes, the hash changes completely.</p>
+                                    </div>
+                                    <div className="space-y-1">
+                                        <div className="font-bold text-foreground">3. Consensus</div>
+                                        <p className="text-xs">The network must agree on the validity of a block before it is added to the chain.</p>
+                                    </div>
+                                </div>
+                                <p>
+                                    This structure makes the blockchain <strong>immutable</strong>—once a block is added, it cannot be changed without changing all subsequent blocks, which would require the consensus of the entire network.
+                                </p>
+                            </CardContent>
+                        </Card>
+                    </div>
+                </div>
             </div>
             <div className="mt-auto">
                 <Footer />
diff --git a/app/draw/page.tsx b/app/draw/page.tsx
new file mode 100644
index 0000000..5b79415
--- /dev/null
+++ b/app/draw/page.tsx
@@ -0,0 +1,5 @@
+import { DrawPage } from "@/components/draw/draw-page";
+
+export default function Page() {
+    return <DrawPage />;
+}
diff --git a/app/dummy/page.tsx b/app/dummy/page.tsx
new file mode 100644
index 0000000..2a391d0
--- /dev/null
+++ b/app/dummy/page.tsx
@@ -0,0 +1,5 @@
+import { DummyFilePage } from "@/components/dummy/dummy-page";
+
+export default function Page() {
+    return <DummyFilePage />;
+}
diff --git a/components/crypto/blockchain-page.tsx b/components/crypto/blockchain-page.tsx
new file mode 100644
index 0000000..7420b0d
--- /dev/null
+++ b/components/crypto/blockchain-page.tsx
@@ -0,0 +1,190 @@
+"use client";
+
+import React, { useState } from 'react';
+import { 
+    Bitcoin, 
+    Search, 
+    ArrowUpRight, 
+    ArrowDownLeft, 
+    Blocks, 
+    Wallet, 
+    Activity,
+    ExternalLink,
+    Copy,
+    Check,
+    Cpu,
+    Globe,
+    Zap
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+
+export function BlockchainPage() {
+    const [query, setQuery] = useState('');
+    const [isSearching, setIsSearching] = useState(false);
+    const [result, setResult] = useState<any>(null);
+
+    const handleSearch = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!query.trim()) return;
+        
+        setIsSearching(true);
+        // Simulate API call
+        setTimeout(() => {
+            setResult({
+                type: query.length > 42 ? 'transaction' : 'address',
+                hash: query,
+                balance: '1.245 BTC',
+                value: '$78,452.12',
+                transactions: [
+                    { id: '0x7d...f2a', type: 'in', amount: '0.05 BTC', date: '2 mins ago', status: 'Confirmed' },
+                    { id: '0x4b...e91', type: 'out', amount: '1.12 BTC', date: '5 hours ago', status: 'Confirmed' },
+                    { id: '0x1c...a3d', type: 'in', amount: '0.32 BTC', date: '1 day ago', status: 'Confirmed' },
+                ]
+            });
+            setIsSearching(false);
+        }, 800);
+    };
+
+    return (
+        <div className="h-full overflow-auto bg-background custom-scrollbar w-full flex flex-col">
+            <div className="max-w-6xl mx-auto space-y-8 flex-1 w-full p-6">
+                {/* Header Section */}
+                <div className="flex flex-col md:flex-row md:items-center justify-between gap-8 py-4">
+                    <div className="space-y-3">
+                        <div className="flex items-center gap-3">
+                            <div className="p-2 bg-amber-500/10 rounded-xl">
+                                <Bitcoin className="size-8 text-amber-500" />
+                            </div>
+                            <h1 className="text-4xl font-black tracking-tighter text-foreground uppercase">
+                                Blockchain Inspector
+                            </h1>
+                        </div>
+                        <p className="text-muted-foreground text-sm font-medium max-w-xl">
+                            Real-time on-chain analytics and address tracking. Explore transactions, blocks, and wallet histories across multiple networks.
+                        </p>
+                    </div>
+
+                    <div className="flex gap-4">
+                        <div className="px-4 py-2 bg-muted/30 rounded-lg border border-border/50">
+                            <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground block">BTC Price</span>
+                            <span className="text-sm font-mono font-bold">$63,412.00</span>
+                        </div>
+                        <div className="px-4 py-2 bg-muted/30 rounded-lg border border-border/50">
+                            <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground block">Gas Fee</span>
+                            <span className="text-sm font-mono font-bold">12 Gwei</span>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Search Box */}
+                <form onSubmit={handleSearch} className="relative group">
+                    <div className="absolute inset-0 bg-primary/5 blur-xl group-focus-within:bg-primary/10 transition-all rounded-2xl" />
+                    <div className="relative flex items-center gap-3 p-2 bg-background border-2 border-border/50 rounded-2xl shadow-xl focus-within:border-primary/50 transition-all">
+                        <Search className="size-6 text-muted-foreground ml-4" />
+                        <input 
+                            value={query}
+                            onChange={(e) => setQuery(e.target.value)}
+                            placeholder="Search by Address / Tx Hash / Block..." 
+                            className="flex-1 bg-transparent border-none outline-none text-lg font-medium py-3 placeholder:text-muted-foreground/30"
+                        />
+                        <Button 
+                            type="submit"
+                            size="lg"
+                            className="rounded-xl px-8 font-black uppercase tracking-widest h-12"
+                            disabled={isSearching}
+                        >
+                            {isSearching ? <Cpu className="size-5 animate-spin" /> : 'Inspect'}
+                        </Button>
+                    </div>
+                </form>
+
+                {/* Quick Stats Grid */}
+                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                    {[
+                        { label: 'Total Supply', value: '19.6M BTC', icon: Blocks },
+                        { label: 'Active Wallets', value: '842K', icon: Wallet },
+                        { label: 'TPS', value: '7.42', icon: Activity },
+                        { label: 'Nodes', value: '12,412', icon: Globe },
+                    ].map((stat, i) => (
+                        <Card key={i} className="border-border/50 bg-muted/5 hover:bg-muted/10 transition-colors">
+                            <CardHeader className="p-4 flex flex-row items-center justify-between space-y-0">
+                                <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">{stat.label}</span>
+                                <stat.icon className="size-4 text-primary opacity-50" />
+                            </CardHeader>
+                            <CardContent className="p-4 pt-0">
+                                <div className="text-xl font-mono font-bold">{stat.value}</div>
+                            </CardContent>
+                        </Card>
+                    ))}
+                </div>
+
+                {/* Results Section */}
+                {result && (
+                    <div className="grid gap-6 md:grid-cols-3 animate-in fade-in slide-in-from-bottom-4 duration-500">
+                        <Card className="md:col-span-1 border-primary/20 bg-primary/5 shadow-lg">
+                            <CardHeader>
+                                <CardTitle className="text-sm font-black uppercase tracking-widest text-primary flex items-center gap-2">
+                                    <Wallet className="size-4" /> Wallet Summary
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent className="space-y-6">
+                                <div>
+                                    <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground block mb-1">Final Balance</span>
+                                    <div className="text-3xl font-mono font-bold text-foreground">{result.balance}</div>
+                                    <div className="text-sm font-medium text-muted-foreground">{result.value} USD</div>
+                                </div>
+                                <Separator />
+                                <div className="space-y-3">
+                                    <div className="flex justify-between items-center">
+                                        <span className="text-xs font-bold text-muted-foreground">Type</span>
+                                        <Badge variant="secondary" className="uppercase text-[9px] font-black">{result.type}</Badge>
+                                    </div>
+                                    <div className="flex justify-between items-center">
+                                        <span className="text-xs font-bold text-muted-foreground">Hash</span>
+                                        <span className="text-xs font-mono text-primary cursor-pointer hover:underline">0x...{result.hash.slice(-6)}</span>
+                                    </div>
+                                </div>
+                                <Button variant="outline" className="w-full text-[10px] font-black uppercase tracking-widest gap-2">
+                                    <ExternalLink className="size-3" /> View on Explorer
+                                </Button>
+                            </CardContent>
+                        </Card>
+
+                        <Card className="md:col-span-2 border-border/50">
+                            <CardHeader className="border-b bg-muted/10">
+                                <CardTitle className="text-sm font-black uppercase tracking-widest flex items-center gap-2">
+                                    <Zap className="size-4 text-amber-500" /> Recent Transactions
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent className="p-0">
+                                <div className="divide-y divide-border">
+                                    {result.transactions.map((tx: any, i: number) => (
+                                        <div key={i} className="flex items-center justify-between p-4 hover:bg-muted/20 transition-colors">
+                                            <div className="flex items-center gap-4">
+                                                <div className={`p-2 rounded-lg ${tx.type === 'in' ? 'bg-emerald-500/10 text-emerald-500' : 'bg-amber-500/10 text-amber-500'}`}>
+                                                    {tx.type === 'in' ? <ArrowDownLeft className="size-4" /> : <ArrowUpRight className="size-4" />}
+                                                </div>
+                                                <div>
+                                                    <div className="text-xs font-mono font-bold">{tx.id}</div>
+                                                    <div className="text-[10px] font-medium text-muted-foreground">{tx.date}</div>
+                                                </div>
+                                            </div>
+                                            <div className="text-right">
+                                                <div className="text-sm font-mono font-black">{tx.amount}</div>
+                                                <div className="text-[9px] font-black uppercase text-emerald-500">{tx.status}</div>
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            </CardContent>
+                        </Card>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/components/crypto/uuid-page.tsx b/components/crypto/uuid-page.tsx
new file mode 100644
index 0000000..606fc36
--- /dev/null
+++ b/components/crypto/uuid-page.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { 
+    Shield, 
+    RefreshCw, 
+    Copy, 
+    Check, 
+    Settings2, 
+    Zap,
+    Hash,
+    Binary
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+
+export function UuidPage() {
+    const [uuids, setUuids] = useState<string[]>([]);
+    const [count, setCount] = useState(5);
+    const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
+
+    const generateUuids = () => {
+        const newUuids = Array.from({ length: count }, () => {
+            if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+                return crypto.randomUUID();
+            }
+            // Fallback for older browsers
+            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+                const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
+                return v.toString(16);
+            });
+        });
+        setUuids(newUuids);
+    };
+
+    useEffect(() => {
+        generateUuids();
+    }, []);
+
+    const handleCopy = (text: string, index: number) => {
+        navigator.clipboard.writeText(text);
+        setCopiedIndex(index);
+        setTimeout(() => setCopiedIndex(null), 2000);
+    };
+
+    return (
+        <div className="h-full overflow-auto bg-background custom-scrollbar w-full flex flex-col">
+            <div className="max-w-4xl mx-auto space-y-8 flex-1 w-full p-6">
+                {/* Header */}
+                <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 py-4">
+                    <div className="space-y-2">
+                        <h1 className="text-3xl font-black tracking-tight text-foreground flex items-center gap-3">
+                            <Shield className="size-8 text-primary" />
+                            UUID v4 Generator
+                        </h1>
+                        <p className="text-muted-foreground text-sm">
+                            Generate cryptographically strong unique identifiers instantly.
+                        </p>
+                    </div>
+                    <Button onClick={generateUuids} size="lg" className="h-12 px-6 font-black uppercase tracking-widest gap-2 shadow-lg shadow-primary/20">
+                        <RefreshCw className="size-4" /> Generate New
+                    </Button>
+                </div>
+
+                <div className="grid gap-6 md:grid-cols-3">
+                    {/* Controls */}
+                    <Card className="md:col-span-1 border-border/50 bg-muted/5 h-fit">
+                        <CardHeader>
+                            <CardTitle className="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
+                                <Settings2 className="size-3" /> Configuration
+                            </CardTitle>
+                        </CardHeader>
+                        <CardContent className="space-y-4">
+                            <div className="space-y-2">
+                                <label className="text-[10px] font-bold text-muted-foreground uppercase">Batch Size</label>
+                                <div className="grid grid-cols-3 gap-2">
+                                    {[1, 5, 10, 20, 50].map(n => (
+                                        <Button 
+                                            key={n} 
+                                            variant={count === n ? "secondary" : "outline"} 
+                                            className="h-8 text-xs font-bold"
+                                            onClick={() => setCount(n)}
+                                        >
+                                            {n}
+                                        </Button>
+                                    ))}
+                                </div>
+                            </div>
+                            <Separator />
+                            <div className="space-y-3">
+                                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                                    <Zap className="size-3 text-amber-500" />
+                                    <span>V4 (Random) Algorithm</span>
+                                </div>
+                                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                                    <Hash className="size-3 text-primary" />
+                                    <span>128-bit identifiers</span>
+                                </div>
+                                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                                    <Binary className="size-3 text-primary" />
+                                    <span>36 characters total</span>
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+
+                    {/* Results List */}
+                    <Card className="md:col-span-2 border-border/50 shadow-md overflow-hidden">
+                        <div className="divide-y divide-border">
+                            {uuids.map((uuid, i) => (
+                                <div key={i} className="flex items-center justify-between p-4 hover:bg-muted/30 transition-all group">
+                                    <code className="text-sm font-mono font-bold text-primary select-all">
+                                        {uuid}
+                                    </code>
+                                    <Button 
+                                        variant="ghost" 
+                                        size="icon" 
+                                        className="size-8 opacity-0 group-hover:opacity-100 transition-opacity"
+                                        onClick={() => handleCopy(uuid, i)}
+                                    >
+                                        {copiedIndex === i ? <Check className="size-4 text-emerald-500" /> : <Copy className="size-4" />}
+                                    </Button>
+                                </div>
+                            ))}
+                        </div>
+                    </Card>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/components/draw/draw-page.tsx b/components/draw/draw-page.tsx
new file mode 100644
index 0000000..cfad093
--- /dev/null
+++ b/components/draw/draw-page.tsx
@@ -0,0 +1,231 @@
+"use client";
+
+import React, { useRef, useState, useEffect } from 'react';
+import { 
+    Eraser, 
+    Square, 
+    Circle, 
+    Minus, 
+    Download, 
+    Trash2, 
+    Undo2, 
+    Type,
+    MousePointer2,
+    Palette,
+    PenTool
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+
+export function DrawPage() {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const [isDrawing, setIsDrawing] = useState(false);
+    const [color, setColor] = useState('#3b82f6');
+    const [brushSize, setBrushSize] = useState(5);
+    const [tool, setTool] = useState<'brush' | 'eraser' | 'rect' | 'circle'>('brush');
+    const [history, setHistory] = useState<string[]>([]);
+    const [startPos, setStartPos] = useState({ x: 0, y: 0 });
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+
+        // Set canvas size
+        const updateSize = () => {
+            const parent = canvas.parentElement;
+            if (parent) {
+                const tempImage = canvas.toDataURL();
+                canvas.width = parent.clientWidth;
+                canvas.height = parent.clientHeight;
+                const img = new Image();
+                img.src = tempImage;
+                img.onload = () => ctx.drawImage(img, 0, 0);
+            }
+        };
+
+        updateSize();
+        window.addEventListener('resize', updateSize);
+        return () => window.removeEventListener('resize', updateSize);
+    }, []);
+
+    const saveToHistory = () => {
+        const canvas = canvasRef.current;
+        if (canvas) {
+            setHistory(prev => [...prev, canvas.toDataURL()].slice(-20));
+        }
+    };
+
+    const startDrawing = (e: React.MouseEvent | React.TouchEvent) => {
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+
+        const rect = canvas.getBoundingClientRect();
+        const x = ('touches' in e) ? e.touches[0].clientX - rect.left : e.nativeEvent.offsetX;
+        const y = ('touches' in e) ? e.touches[0].clientY - rect.top : e.nativeEvent.offsetY;
+
+        setIsDrawing(true);
+        setStartPos({ x, y });
+        saveToHistory();
+
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+        ctx.strokeStyle = tool === 'eraser' ? '#ffffff' : color;
+        ctx.lineWidth = brushSize;
+    };
+
+    const draw = (e: React.MouseEvent | React.TouchEvent) => {
+        if (!isDrawing) return;
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+
+        const rect = canvas.getBoundingClientRect();
+        const x = ('touches' in e) ? e.touches[0].clientX - rect.left : e.nativeEvent.offsetX;
+        const y = ('touches' in e) ? e.touches[0].clientY - rect.top : e.nativeEvent.offsetY;
+
+        if (tool === 'brush' || tool === 'eraser') {
+            ctx.lineTo(x, y);
+            ctx.stroke();
+        } else {
+            // Shapes handling (preview would be better but let's keep it simple)
+        }
+    };
+
+    const stopDrawing = () => {
+        setIsDrawing(false);
+    };
+
+    const handleClear = () => {
+        const canvas = canvasRef.current;
+        if (canvas) {
+            const ctx = canvas.getContext('2d');
+            ctx?.clearRect(0, 0, canvas.width, canvas.height);
+            saveToHistory();
+        }
+    };
+
+    const handleDownload = () => {
+        const canvas = canvasRef.current;
+        if (canvas) {
+            const link = document.createElement('a');
+            link.download = 'quick-draw.png';
+            link.href = canvas.toDataURL();
+            link.click();
+        }
+    };
+
+    const handleUndo = () => {
+        if (history.length === 0) return;
+        const last = history[history.length - 1];
+        const newHistory = history.slice(0, -1);
+        setHistory(newHistory);
+
+        const canvas = canvasRef.current;
+        if (canvas) {
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                const img = new Image();
+                img.src = last;
+                img.onload = () => ctx.drawImage(img, 0, 0);
+            }
+        }
+    };
+
+    return (
+        <div className="flex flex-col h-full bg-background overflow-hidden">
+            {/* Toolbar */}
+            <div className="flex items-center justify-between px-6 h-14 border-b bg-muted/20 backdrop-blur-md z-10">
+                <div className="flex items-center gap-4">
+                    <div className="flex items-center gap-2">
+                        <div className="p-1.5 bg-primary/10 rounded-md">
+                            <PenTool className="size-4 text-primary" />
+                        </div>
+                        <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">Quick Draw</span>
+                    </div>
+                    
+                    <Separator orientation="vertical" className="h-6 mx-2" />
+                    
+                    <div className="flex items-center gap-1 bg-muted/40 p-1 rounded-lg">
+                        <Button 
+                            variant={tool === 'brush' ? "secondary" : "ghost"} 
+                            size="icon" 
+                            className="size-8"
+                            onClick={() => setTool('brush')}
+                        >
+                            <MousePointer2 className="size-4" />
+                        </Button>
+                        <Button 
+                            variant={tool === 'eraser' ? "secondary" : "ghost"} 
+                            size="icon" 
+                            className="size-8"
+                            onClick={() => setTool('eraser')}
+                        >
+                            <Eraser className="size-4" />
+                        </Button>
+                    </div>
+
+                    <Separator orientation="vertical" className="h-6 mx-2" />
+
+                    <div className="flex items-center gap-3 px-3">
+                        <input 
+                            type="color" 
+                            value={color} 
+                            onChange={(e) => setColor(e.target.value)}
+                            className="size-6 rounded-full overflow-hidden border-none cursor-pointer bg-transparent"
+                        />
+                        <div className="flex items-center gap-2">
+                            <span className="text-[10px] font-bold text-muted-foreground uppercase">Size</span>
+                            <input 
+                                type="range" 
+                                min="1" 
+                                max="50" 
+                                value={brushSize} 
+                                onChange={(e) => setBrushSize(parseInt(e.target.value))}
+                                className="w-24 h-1 bg-muted rounded-full appearance-none cursor-pointer accent-primary"
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                    <Button variant="ghost" size="icon" className="size-8" onClick={handleUndo} disabled={history.length === 0}>
+                        <Undo2 className="size-4" />
+                    </Button>
+                    <Separator orientation="vertical" className="h-6 mx-1" />
+                    <Button variant="ghost" size="icon" className="size-8 text-destructive hover:bg-destructive/10" onClick={handleClear}>
+                        <Trash2 className="size-4" />
+                    </Button>
+                    <Button variant="default" size="sm" className="h-8 gap-2 font-bold uppercase tracking-widest text-[10px]" onClick={handleDownload}>
+                        <Download className="size-3" /> Save Image
+                    </Button>
+                </div>
+            </div>
+
+            {/* Canvas Area */}
+            <div className="flex-1 relative bg-[#f8fafc] dark:bg-zinc-950 overflow-hidden cursor-crosshair">
+                <canvas
+                    ref={canvasRef}
+                    onMouseDown={startDrawing}
+                    onMouseMove={draw}
+                    onMouseUp={stopDrawing}
+                    onMouseLeave={stopDrawing}
+                    onTouchStart={startDrawing}
+                    onTouchMove={draw}
+                    onTouchEnd={stopDrawing}
+                    className="absolute inset-0 w-full h-full touch-none"
+                />
+            </div>
+        </div>
+    );
+}
diff --git a/components/dummy/dummy-page.tsx b/components/dummy/dummy-page.tsx
new file mode 100644
index 0000000..ec3ba38
--- /dev/null
+++ b/components/dummy/dummy-page.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import React, { useState } from 'react';
+import { 
+    FilePlus, 
+    Download, 
+    Info, 
+    FileText, 
+    Binary, 
+    Type,
+    FileBox,
+    Database,
+    Cpu
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Separator } from '@/components/ui/separator';
+
+export function DummyFilePage() {
+    const [size, setSize] = useState(1);
+    const [unit, setUnit] = useState<'KB' | 'MB' | 'GB'>('MB');
+    const [extension, setExtension] = useState('bin');
+    const [fileName, setFileName] = useState('test-file');
+    const [isGenerating, setIsGenerating] = useState(false);
+
+    const generateFile = () => {
+        setIsGenerating(true);
+        setTimeout(() => {
+            const multiplier = unit === 'KB' ? 1024 : unit === 'MB' ? 1024 * 1024 : 1024 * 1024 * 1024;
+            const byteSize = size * multiplier;
+            
+            // For large files, we use a more efficient way if possible, 
+            // but for browser-side, we'll create a blob from an arraybuffer
+            try {
+                const buffer = new Uint8Array(byteSize);
+                const blob = new Blob([buffer], { type: 'application/octet-stream' });
+                const url = URL.createObjectURL(blob);
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = `${fileName}.${extension}`;
+                link.click();
+                URL.revokeObjectURL(url);
+            } catch (e) {
+                alert("File too large for browser memory. Try a smaller size.");
+            }
+            setIsGenerating(false);
+        }, 500);
+    };
+
+    return (
+        <div className="h-full overflow-auto bg-background custom-scrollbar w-full flex flex-col">
+            <div className="max-w-4xl mx-auto space-y-8 flex-1 w-full p-6">
+                {/* Header */}
+                <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
+                    <div className="space-y-2">
+                        <h1 className="text-3xl font-bold tracking-tight text-foreground flex items-center gap-3">
+                            <FilePlus className="size-8 text-primary" />
+                            Dummy File Generator
+                        </h1>
+                        <p className="text-muted-foreground">
+                            Create placeholder files for testing uploads, storage, or network performance.
+                        </p>
+                    </div>
+                </div>
+
+                <div className="grid gap-6 md:grid-cols-3">
+                    <Card className="md:col-span-2 border-border/50 shadow-md bg-muted/5">
+                        <CardHeader>
+                            <CardTitle className="text-sm font-black uppercase tracking-widest text-muted-foreground">Configuration</CardTitle>
+                        </CardHeader>
+                        <CardContent className="space-y-6">
+                            <div className="grid gap-4 md:grid-cols-2">
+                                <div className="space-y-2">
+                                    <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">File Name</label>
+                                    <Input 
+                                        value={fileName}
+                                        onChange={(e) => setFileName(e.target.value)}
+                                        placeholder="test-file"
+                                        className="h-10 font-bold"
+                                    />
+                                </div>
+                                <div className="space-y-2">
+                                    <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">Extension</label>
+                                    <Input 
+                                        value={extension}
+                                        onChange={(e) => setExtension(e.target.value)}
+                                        placeholder="bin"
+                                        className="h-10 font-bold"
+                                    />
+                                </div>
+                            </div>
+
+                            <div className="space-y-3">
+                                <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground block">File Size</label>
+                                <div className="flex gap-4">
+                                    <Input 
+                                        type="number"
+                                        min="1"
+                                        value={size}
+                                        onChange={(e) => setSize(parseInt(e.target.value) || 1)}
+                                        className="h-12 text-lg font-bold w-32"
+                                    />
+                                    <div className="flex-1 flex gap-1 bg-muted/50 p-1 rounded-lg">
+                                        {(['KB', 'MB', 'GB'] as const).map((u) => (
+                                            <Button
+                                                key={u}
+                                                variant={unit === u ? "secondary" : "ghost"}
+                                                className="flex-1 h-10 font-black text-xs"
+                                                onClick={() => setUnit(u)}
+                                            >
+                                                {u}
+                                            </Button>
+                                        ))}
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="pt-4">
+                                <Button 
+                                    className="w-full h-14 text-sm font-black uppercase tracking-widest gap-3 shadow-lg shadow-primary/20"
+                                    onClick={generateFile}
+                                    disabled={isGenerating || size <= 0}
+                                >
+                                    {isGenerating ? (
+                                        <Cpu className="size-5 animate-spin" />
+                                    ) : (
+                                        <Download className="size-5" />
+                                    )}
+                                    {isGenerating ? 'Generating...' : 'Generate & Download'}
+                                </Button>
+                            </div>
+                        </CardContent>
+                    </Card>
+
+                    <Card className="border-border/50 shadow-sm bg-muted/20">
+                        <CardHeader>
+                            <CardTitle className="text-sm font-black uppercase tracking-widest flex items-center gap-2">
+                                <Info className="size-4 text-primary" /> Info
+                            </CardTitle>
+                        </CardHeader>
+                        <CardContent className="space-y-4 text-xs text-muted-foreground leading-relaxed">
+                            <p>
+                                This tool creates a file of the specified size filled with null bytes (0x00).
+                            </p>
+                            <div className="space-y-2 pt-2">
+                                <div className="flex items-center gap-2">
+                                    <FileText className="size-3 text-primary" />
+                                    <span>Simulate log files</span>
+                                </div>
+                                <div className="flex items-center gap-2">
+                                    <Binary className="size-3 text-primary" />
+                                    <span>Test binary uploads</span>
+                                </div>
+                                <div className="flex items-center gap-2">
+                                    <Database className="size-3 text-primary" />
+                                    <span>Stress test storage</span>
+                                </div>
+                            </div>
+                            <Separator className="my-4" />
+                            <p className="italic">
+                                Note: Generating very large files (GB+) may cause your browser to hang temporarily as it allocates memory.
+                            </p>
+                        </CardContent>
+                    </Card>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/components/editor/editor-container.tsx b/components/editor/editor-container.tsx
index 9481d1a..d26708c 100644
--- a/components/editor/editor-container.tsx
+++ b/components/editor/editor-container.tsx
@@ -24,8 +24,11 @@ import {
     Maximize2,
     ChevronDown,
     Layout as LayoutIcon,
-    AlignLeft
+    AlignLeft,
+    Download
 } from "lucide-react";
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 import { TableViewer } from '@/components/shared/table-viewer';
 import { ContainerProps, Format } from '@/types';
 import yaml from 'js-yaml';
@@ -86,6 +89,8 @@ export function EditorContainer({ initialContent, initialFormat }: ContainerProp
     const [showPreview, setShowPreview] = useState(true);
     const [isFullscreen, setIsFullscreen] = useState(false);
     const [activeTab, setActiveTab] = useState("preview");
+    const [useBootstrap, setUseBootstrap] = useState(false);
+    const [useTailwind, setUseTailwind] = useState(false);
     const editorRef = useRef<any>(null); // eslint-disable-line @typescript-eslint/no-explicit-any
 
     const handleEditorDidMount: OnMount = (editor) => {
@@ -170,115 +175,42 @@ export function EditorContainer({ initialContent, initialFormat }: ContainerProp
     return (
         <div className={`flex flex-col w-full bg-background transition-all duration-300 ${isFullscreen ? "fixed inset-0 z-[200] h-screen" : "h-full border-t"}`}>
             {/* Header / Standard Toolbar */}
-            <div className="flex items-center justify-between px-4 h-14 border-b bg-muted/20 backdrop-blur-md">
+            <div className="flex items-center justify-between px-6 h-14 border-b bg-muted/20 backdrop-blur-md">
                 <div className="flex items-center gap-4">
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" size="sm" className="h-8 px-3 text-xs font-bold uppercase tracking-widest text-muted-foreground gap-2">
+                                <span className="text-foreground">{format}</span>
+                                <ChevronDown className="size-3" />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start" className="min-w-[150px]">
+                            {ALL_FORMATS.slice(0, 10).map((fmt) => (
+                                <DropdownMenuItem key={fmt} onClick={() => handleFormatChange(fmt as Format)} className="text-[10px] font-bold uppercase">
+                                    {fmt}
+                                </DropdownMenuItem>
+                            ))}
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+
+                    <Separator orientation="vertical" className="h-4" />
+
                     <div className="flex items-center gap-2">
-                        <div className="p-1.5 bg-primary/10 rounded-md">
-                            <FileEdit className="size-4 text-primary" />
+                        <div className="p-1 bg-primary/10 rounded-md">
+                            <FileEdit className="size-3.5 text-primary" />
                         </div>
                         <input
                             type="text"
                             value={fileName}
                             onChange={(e) => setFileName(e.target.value)}
-                            className="bg-transparent border-none outline-none text-sm font-semibold text-foreground min-w-[120px]"
+                            className="bg-transparent border-none outline-none text-[11px] font-bold text-foreground min-w-[120px] placeholder:text-muted-foreground/50"
                             spellCheck={false}
                         />
-                        {!isSaved && <div className="size-2 rounded-full bg-amber-500 animate-pulse" />}
-                    </div>
-
-                    <Separator orientation="vertical" className="h-6" />
-
-                    <div className="flex items-center gap-1">
-                        <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" size="sm" className="h-8 text-xs font-medium uppercase tracking-widest text-muted-foreground gap-2">
-                                    <span className="text-foreground">{format}</span>
-                                    <ChevronDown className="size-3" />
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="start" className="w-[180px]">
-                                {ALL_FORMATS.slice(0, 10).map((fmt) => (
-                                    <DropdownMenuItem key={fmt} onClick={() => handleFormatChange(fmt as Format)} className="text-xs uppercase">
-                                        {fmt}
-                                    </DropdownMenuItem>
-                                ))}
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-
-                        <Button variant="ghost" size="sm" onClick={handleWordWrapToggle} className="h-8 text-[10px] font-bold uppercase text-muted-foreground">
-                            Wrap: {wordWrap}
-                        </Button>
-
-                        <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" size="icon" className="size-8 rounded-md text-muted-foreground">
-                                    <Settings className="size-4" />
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end" className="w-[200px] p-3 space-y-4">
-                                <div className="space-y-1.5">
-                                    <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
-                                        <TypeIcon className="size-3" /> Font Size
-                                    </label>
-                                    <div className="flex items-center gap-2">
-                                        <input 
-                                            type="range" 
-                                            min="10" 
-                                            max="24" 
-                                            value={prefFontSize} 
-                                            onChange={(e) => setPrefFontSize(Number(e.target.value))}
-                                            className="flex-1 h-1 bg-muted rounded-full appearance-none cursor-pointer accent-primary"
-                                        />
-                                        <span className="text-[10px] font-bold tabular-nums w-4 text-center">{prefFontSize}</span>
-                                    </div>
-                                </div>
-                                <div className="space-y-1.5">
-                                    <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
-                                        <Code2 className="size-3" /> Tab Size
-                                    </label>
-                                    <div className="flex gap-2">
-                                        {[2, 4, 8].map(size => (
-                                            <Button 
-                                                key={size}
-                                                variant={prefTabSize === size ? "secondary" : "ghost"}
-                                                size="sm"
-                                                className="h-7 flex-1 text-[10px] font-bold"
-                                                onClick={() => setPrefTabSize(size)}
-                                            >
-                                                {size}
-                                            </Button>
-                                        ))}
-                                    </div>
-                                </div>
-                                <DropdownMenuSeparator />
-                                <div className="space-y-1.5 pt-1">
-                                    <Button variant="ghost" size="sm" onClick={handleNewFile} className="w-full justify-start h-8 text-[10px] font-bold uppercase gap-2">
-                                        <Plus className="size-3.5" /> New File
-                                    </Button>
-                                    <Button variant="ghost" size="sm" onClick={handleNewTable} className="w-full justify-start h-8 text-[10px] font-bold uppercase gap-2">
-                                        <TableIcon className="size-3.5" /> New Table
-                                    </Button>
-                                    <Button variant="ghost" size="sm" onClick={handleSave} className="w-full justify-start h-8 text-[10px] font-bold uppercase gap-2 text-primary">
-                                        <Save className="size-3.5" /> Save
-                                    </Button>
-                                    <Button variant="ghost" size="sm" onClick={() => setContent("")} className="w-full justify-start h-8 text-[10px] font-bold uppercase gap-2 text-destructive">
-                                        <Trash className="size-3.5" /> Clear
-                                    </Button>
-                                </div>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
+                        {!isSaved && <div className="size-1.5 rounded-full bg-amber-500 animate-pulse" />}
                     </div>
                 </div>
 
                 <div className="flex items-center gap-2">
-                    <Button variant="outline" size="sm" onClick={handleAutoFormat} className="h-8 text-xs font-semibold gap-2">
-                        <AlignLeft className="size-3.5" /> Format
-                    </Button>
-                    <Button variant="outline" size="sm" onClick={handleCopy} className="h-8 text-xs font-semibold gap-2">
-                        {copied ? <Check className="size-3.5" /> : <CopyIcon className="size-3.5" />}
-                        {copied ? "Copied" : "Copy"}
-                    </Button>
-                    <Separator orientation="vertical" className="h-6 mx-1" />
                     <Button
                         variant="ghost"
                         size="icon"
@@ -290,36 +222,123 @@ export function EditorContainer({ initialContent, initialFormat }: ContainerProp
                     <Button variant="ghost" size="icon" className="size-8 rounded-md text-muted-foreground" onClick={() => setIsFullscreen(!isFullscreen)}>
                         <Maximize2 className="size-4" />
                     </Button>
+
+                    <Separator orientation="vertical" className="h-6 mx-1" />
+
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" size="icon" className="size-8 rounded-md text-muted-foreground">
+                                <Settings className="size-4" />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end" className="w-[200px] p-3 space-y-4">
+                            <div className="space-y-1.5">
+                                <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
+                                    <TypeIcon className="size-3" /> Font Size
+                                </label>
+                                <div className="flex items-center gap-2">
+                                    <input 
+                                        type="range" 
+                                        min="10" 
+                                        max="24" 
+                                        value={prefFontSize} 
+                                        onChange={(e) => setPrefFontSize(Number(e.target.value))}
+                                        className="flex-1 h-1 bg-muted rounded-full appearance-none cursor-pointer accent-primary"
+                                    />
+                                    <span className="text-[10px] font-bold tabular-nums w-4 text-center">{prefFontSize}</span>
+                                </div>
+                            </div>
+                            <div className="space-y-1.5">
+                                <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
+                                    <Code2 className="size-3" /> Tab Size
+                                </label>
+                                <div className="flex gap-2">
+                                    {[2, 4, 8].map(size => (
+                                        <Button 
+                                            key={size}
+                                            variant={prefTabSize === size ? "secondary" : "ghost"}
+                                            size="sm"
+                                            className="h-7 flex-1 text-[10px] font-bold"
+                                            onClick={() => setPrefTabSize(size)}
+                                        >
+                                            {size}
+                                        </Button>
+                                    ))}
+                                </div>
+                            </div>
+                            <DropdownMenuSeparator />
+                            <div className="space-y-1.5 pt-1">
+                                <Button variant="ghost" size="sm" onClick={handleNewFile} className="w-full justify-start h-8 text-[10px] font-bold uppercase gap-2">
+                                    <Plus className="size-3.5" /> New File
+                                </Button>
+                                <Button variant="ghost" size="sm" onClick={handleNewTable} className="w-full justify-start h-8 text-[10px] font-bold uppercase gap-2">
+                                    <TableIcon className="size-3.5" /> New Table
+                                </Button>
+                                <Button variant="ghost" size="sm" onClick={handleSave} className="w-full justify-start h-8 text-[10px] font-bold uppercase gap-2 text-primary">
+                                    <Save className="size-3.5" /> Save
+                                </Button>
+                                <Button variant="ghost" size="sm" onClick={() => setContent("")} className="w-full justify-start h-8 text-[10px] font-bold uppercase gap-2 text-destructive">
+                                    <Trash className="size-3.5" /> Clear
+                                </Button>
+                            </div>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
                 </div>
             </div>
 
             {/* Main Split Canvas */}
             <div className="flex-1 flex overflow-hidden">
                 <ResizablePanelGroup direction="horizontal">
-                    <ResizablePanel defaultSize={showPreview ? 50 : 100} minSize={20}>
-                        <div className="flex flex-col h-full relative">
-                            <Editor
-                                height="100%"
-                                language={getLanguage(format)}
-                                value={content}
-                                onChange={(value) => setContent(value || "")}
-                                onMount={handleEditorDidMount}
-                                theme={resolvedTheme === 'dark' ? 'vs-dark' : 'light'}
-                                options={{
-                                    minimap: { enabled: false },
-                                    fontSize: prefFontSize,
-                                    tabSize: prefTabSize,
-                                    wordWrap: wordWrap,
-                                    automaticLayout: true,
-                                    padding: { top: 16 },
-                                    lineNumbersMinChars: 3,
-                                    scrollBeyondLastLine: false,
-                                }}
-                            />
-                            {/* Subtle Editor Footer */}
-                            <div className="absolute bottom-0 right-4 h-6 flex items-center gap-4 text-[10px] font-bold text-muted-foreground/40 uppercase z-10 pointer-events-none">
-                                <span>Line {cursorPos.line}, Col {cursorPos.col}</span>
-                                <span>{content.length} chars</span>
+                    <ResizablePanel defaultSize={showPreview ? 40 : 100} minSize={20}>
+                        <div className="flex flex-col h-full border-r bg-muted/5">
+                            <div className="flex items-center justify-between px-4 h-11 border-b bg-muted/10">
+                                <div className="flex items-center gap-2">
+                                    <Code2 className="size-4 text-primary" />
+                                    <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">Source</span>
+                                </div>
+                                <div className="flex items-center gap-1">
+                                    <Button variant="ghost" size="icon" onClick={handleAutoFormat} className="size-7 text-muted-foreground hover:text-foreground" title="Format">
+                                        <AlignLeft className="size-3.5" />
+                                    </Button>
+                                    <Button variant="ghost" size="icon" onClick={handleWordWrapToggle} className="size-7 text-muted-foreground hover:text-foreground" title="Wrap">
+                                        <TypeIcon className="size-3.5" />
+                                    </Button>
+                                    <Separator orientation="vertical" className="h-4 mx-1" />
+                                    <Button variant="ghost" size="icon" onClick={handleCopy} className="size-7 text-muted-foreground hover:text-foreground" title="Copy">
+                                        <CopyIcon className="size-3.5" />
+                                    </Button>
+                                    <Button variant="ghost" size="icon" onClick={handleSave} className="size-7 text-muted-foreground hover:text-primary" title="Save">
+                                        <Download className="size-3.5" />
+                                    </Button>
+                                    <Button variant="ghost" size="icon" onClick={() => setContent("")} className="size-7 text-muted-foreground hover:text-destructive" title="Clear">
+                                        <Trash className="size-3.5" />
+                                    </Button>
+                                </div>
+                            </div>
+                            <div className="flex-1 relative overflow-hidden">
+                                <Editor
+                                    height="100%"
+                                    language={getLanguage(format)}
+                                    value={content}
+                                    onChange={(value) => setContent(value || "")}
+                                    onMount={handleEditorDidMount}
+                                    theme={resolvedTheme === 'dark' ? 'vs-dark' : 'light'}
+                                    options={{
+                                        minimap: { enabled: false },
+                                        fontSize: prefFontSize,
+                                        tabSize: prefTabSize,
+                                        wordWrap: wordWrap,
+                                        automaticLayout: true,
+                                        padding: { top: 16 },
+                                        lineNumbersMinChars: 3,
+                                        scrollBeyondLastLine: false,
+                                    }}
+                                />
+                                {/* Subtle Editor Footer */}
+                                <div className="absolute bottom-0 right-4 h-6 flex items-center gap-4 text-[10px] font-bold text-muted-foreground/40 uppercase z-10 pointer-events-none">
+                                    <span>Line {cursorPos.line}, Col {cursorPos.col}</span>
+                                    <span>{content.length} chars</span>
+                                </div>
                             </div>
                         </div>
                     </ResizablePanel>
@@ -344,24 +363,51 @@ export function EditorContainer({ initialContent, initialFormat }: ContainerProp
                                                     </TabsTrigger>
                                                 )}
                                             </TabsList>
-                                        </div>
 
-                                        <div className="flex-1 relative overflow-hidden">
-                                            <TabsContent value="preview" className="h-full m-0 p-0 border-none transition-all">
-                                                {format === 'html' ? (
-                                                    <HTMLViewer content={content} useBootstrap={true} useTailwind={true} enableJS={true} />
-                                                ) : format === 'markdown' ? (
-                                                    <div className="prose prose-zinc dark:prose-invert max-w-none bg-background p-8 min-h-full">
-                                                        <CodeViewer content={content} language="markdown" wrapLines={true} />
-                                                    </div>
-                                                ) : format === 'svg' ? (
-                                                    <div className="flex items-center justify-center p-8 bg-background h-full overflow-auto" dangerouslySetInnerHTML={{ __html: content }} />
-                                                ) : (
-                                                    <div className="flex flex-col items-center justify-center text-center h-full p-20 opacity-30">
-                                                        <LayoutIcon className="size-16 mb-4 text-primary" />
-                                                        <p className="text-sm font-bold uppercase tracking-widest">No Live Preview</p>
+                                            <div className="flex items-center gap-2">
+                                                {format === 'html' && (
+                                                    <div className="flex items-center gap-1">
+                                                        <Button 
+                                                            variant={useBootstrap ? "secondary" : "ghost"} 
+                                                            size="sm" 
+                                                            className="h-7 text-[10px] uppercase px-2 font-bold"
+                                                            onClick={() => setUseBootstrap(!useBootstrap)}
+                                                        >
+                                                            BS
+                                                        </Button>
+                                                        <Button 
+                                                            variant={useTailwind ? "secondary" : "ghost"} 
+                                                            size="sm" 
+                                                            className="h-7 text-[10px] uppercase px-2 font-bold"
+                                                            onClick={() => setUseTailwind(!useTailwind)}
+                                                        >
+                                                            TW
+                                                        </Button>
                                                     </div>
                                                 )}
+                                            </div>
+                                        </div>
+
+                                        <div className="flex-1 relative overflow-hidden">
+                                            <TabsContent value="preview" className="flex-1 relative overflow-auto m-0 p-0 border-none">
+                                                <div className="absolute inset-0">
+                                                    {format === 'html' && <HTMLViewer content={content} useBootstrap={useBootstrap} useTailwind={useTailwind} enableJS={true} />}
+                                                    {format === 'markdown' && (
+                                                        <div className="prose prose-zinc dark:prose-invert max-w-none bg-background p-8 min-h-full">
+                                                            <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+                                                        </div>
+                                                    )}
+                                                    {format === 'svg' && <div className="flex items-center justify-center p-8 bg-background h-full overflow-auto" dangerouslySetInnerHTML={{ __html: content }} />}
+                                                    {['json', 'xml', 'yaml', 'css', 'js'].includes(format) && (
+                                                        <CodeViewer content={content} language={getLanguage(format)} wrapLines={true} />
+                                                    )}
+                                                    {!['html', 'markdown', 'svg', 'json', 'xml', 'yaml', 'css', 'js'].includes(format) && (
+                                                        <div className="flex flex-col items-center justify-center text-center h-full p-20 opacity-30">
+                                                            <LayoutIcon className="size-16 mb-4 text-primary" />
+                                                            <p className="text-sm font-bold uppercase tracking-widest">No Live Preview</p>
+                                                        </div>
+                                                    )}
+                                                </div>
                                             </TabsContent>
 
                                             <TabsContent value="viewer" className="h-full m-0 p-0 bg-background">
@@ -383,24 +429,6 @@ export function EditorContainer({ initialContent, initialFormat }: ContainerProp
                 </ResizablePanelGroup>
             </div>
 
-            {/* Sub-Footer Status Bar */}
-            <div className="h-6 border-t bg-muted/40 flex items-center justify-between px-3 text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
-                <div className="flex items-center gap-4">
-                    <div className="flex items-center gap-1.5 uppercase font-bold text-primary">
-                        {format}
-                    </div>
-                    <span>UTF-8</span>
-                    <div className="flex items-center gap-1">
-                        <Terminal className="size-3" />
-                        <span>{content.length} characters</span>
-                    </div>
-                </div>
-                <div className="flex items-center gap-4">
-                    <span>{isSaved ? "Saved" : "Modified"}</span>
-                    <span>Monaco Editor</span>
-                </div>
-            </div>
         </div>
     );
-
 }
diff --git a/components/shared/html-viewer.tsx b/components/shared/html-viewer.tsx
index 1f948b2..df5e0cf 100644
--- a/components/shared/html-viewer.tsx
+++ b/components/shared/html-viewer.tsx
@@ -9,7 +9,7 @@ interface HTMLViewerProps {
   enableJS?: boolean;
 }
 
-export function HTMLViewer({ content, useBootstrap = true, useTailwind = true, enableJS = true }: HTMLViewerProps) {
+export function HTMLViewer({ content, useBootstrap = false, useTailwind = false, enableJS = true }: HTMLViewerProps) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
   useEffect(() => {
@@ -26,7 +26,7 @@ export function HTMLViewer({ content, useBootstrap = true, useTailwind = true, e
               ${useBootstrap ? '<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">' : ''}
               ${useTailwind ? '<script src="https://cdn.tailwindcss.com"></script>' : ''}
               <style>
-                body { padding: 20px; background-color: transparent !important; }
+                body { margin: 0; padding: 0; background-color: transparent !important; }
               </style>
             </head>
             <body>
@@ -43,7 +43,7 @@ export function HTMLViewer({ content, useBootstrap = true, useTailwind = true, e
   return (
     <iframe
       ref={iframeRef}
-      className="w-full h-full min-h-[500px] border bg-white"
+      className="w-full h-full min-h-[500px] border-none"
       title="HTML Viewer"
       sandbox={`allow-same-origin allow-popups ${enableJS ? 'allow-scripts' : ''}`}
     />
diff --git a/components/view/viewer-container.tsx b/components/view/viewer-container.tsx
index fd52633..e441c94 100644
--- a/components/view/viewer-container.tsx
+++ b/components/view/viewer-container.tsx
@@ -33,7 +33,8 @@ import {
     Download,
     Trash2,
     Type,
-    Layout as LayoutIcon
+    Layout as LayoutIcon,
+    Braces
 } from "lucide-react";
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -74,6 +75,7 @@ export function ViewerContainer({ initialContent, initialFormat }: ContainerProp
     const [prefWordWrap, setPrefWordWrap] = useLocalStorage('editorWordWrap', 'off');
     
     const [wordWrap, setWordWrap] = useState<"on" | "off">(prefWordWrap as "on" | "off");
+    const [fileName, setFileName] = useState(`view.${getLanguage(initialFormat)}`);
 
     // Sync local wordWrap with preference when preference changes
     React.useEffect(() => {
@@ -93,19 +95,18 @@ export function ViewerContainer({ initialContent, initialFormat }: ContainerProp
     };
 
     const handleDownload = () => {
-        const extension = format === 'react' ? 'tsx' : format;
         const blob = new Blob([content], { type: 'text/plain' });
         const url = URL.createObjectURL(blob);
         const a = document.createElement('a');
         a.href = url;
-        a.download = `file.${extension}`;
+        a.download = fileName;
         document.body.appendChild(a);
         a.click();
         document.body.removeChild(a);
         URL.revokeObjectURL(url);
     };
 
-    const handleFormat = async () => {
+    const handleAutoFormat = async () => {
         try {
             if (format === 'json') {
                 const parsed = JSON.parse(content);
@@ -122,10 +123,9 @@ export function ViewerContainer({ initialContent, initialFormat }: ContainerProp
                     'javascript': 'babel',
                     'typescript': 'babel-ts',
                     'react': 'babel-ts',
-                    'markdown': 'markdown',
+                    'markdown': 'babel',
                     'xml': 'html',
                 };
-
                 const parser = parserMap[format];
                 if (parser) {
                     const formatted = await prettier.format(content, {
@@ -145,7 +145,7 @@ export function ViewerContainer({ initialContent, initialFormat }: ContainerProp
                 }
             }
         } catch (e) {
-            console.error('Formatting error:', e);
+            console.error(e);
         }
     };
 
@@ -229,14 +229,18 @@ export function ViewerContainer({ initialContent, initialFormat }: ContainerProp
 
                     <Separator orientation="vertical" className="h-4" />
 
-                    <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => router.push('/editor')}
-                        className="h-8 text-xs font-semibold gap-2"
-                    >
-                        <FileEdit className="size-3.5" /> Open in Editor
-                    </Button>
+                    <div className="flex items-center gap-2">
+                        <div className="p-1 bg-primary/10 rounded-md">
+                            <Eye className="size-3.5 text-primary" />
+                        </div>
+                        <input
+                            type="text"
+                            value={fileName}
+                            onChange={(e) => setFileName(e.target.value)}
+                            className="bg-transparent border-none outline-none text-[11px] font-bold text-foreground min-w-[120px] placeholder:text-muted-foreground/50"
+                            spellCheck={false}
+                        />
+                    </div>
                 </div>
 
                 <div className="flex items-center gap-2">
@@ -312,7 +316,11 @@ export function ViewerContainer({ initialContent, initialFormat }: ContainerProp
                                             <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">Source</span>
                                         </div>
                                         <div className="flex items-center gap-1">
-                                            <Button variant="ghost" size="icon" onClick={handleFormat} className="size-7" title="Format">
+                                            <Button variant="ghost" size="icon" onClick={() => router.push('/editor')} className="size-7" title="Open in Editor">
+                                                <FileEdit className="size-3.5" />
+                                            </Button>
+                                            <Separator orientation="vertical" className="h-4 mx-1" />
+                                            <Button variant="ghost" size="icon" onClick={handleAutoFormat} className="size-7" title="Format">
                                                 <AlignLeft className="size-3.5" />
                                             </Button>
                                             <Button variant="ghost" size="icon" onClick={handleWordWrapToggle} className="size-7" title="Wrap">
diff --git a/components/workspace/workspace-container.tsx b/components/workspace/workspace-container.tsx
index 9280e94..9b354a9 100644
--- a/components/workspace/workspace-container.tsx
+++ b/components/workspace/workspace-container.tsx
@@ -21,7 +21,10 @@ import {
     PanelLeftOpen,
     Settings,
     Type as TypeIcon,
-    Code2
+    Code2,
+    Download,
+    Trash,
+    Type
 } from "lucide-react";
 import { TableViewer } from '@/components/shared/table-viewer';
 import { HTMLViewer } from '@/components/shared/html-viewer';
@@ -115,6 +118,19 @@ export function WorkspaceContainer({ initialContent, initialFormat }: ContainerP
         setFileName(`${namePart}.${getLanguage(newFormat)}`);
     };
 
+    const handleSave = () => {
+        const blob = new Blob([content], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = fileName;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        setIsSaved?.(true);
+    };
+
     const handleCopy = () => {
         navigator.clipboard.writeText(content);
         setCopied(true);
@@ -235,82 +251,24 @@ export function WorkspaceContainer({ initialContent, initialFormat }: ContainerP
 
                     <Separator orientation="vertical" className="h-6" />
 
-                    <div className="flex items-center gap-1">
-                        <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" size="sm" className="h-8 text-xs font-medium uppercase tracking-widest text-muted-foreground gap-2">
-                                    <span className="text-foreground">{format}</span>
-                                    <ChevronDown className="size-3" />
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="start" className="w-[180px]">
-                                {ALL_FORMATS.slice(0, 10).map((fmt) => (
-                                    <DropdownMenuItem key={fmt} onClick={() => handleFormatChange(fmt as Format)} className="text-xs uppercase">
-                                        {fmt}
-                                    </DropdownMenuItem>
-                                ))}
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                        
-                        <Button variant="ghost" size="sm" onClick={handleWordWrapToggle} className="h-8 text-[10px] font-bold uppercase text-muted-foreground">
-                            Wrap: {wordWrap}
-                        </Button>
-
-                        <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" size="icon" className="size-8 rounded-md text-muted-foreground">
-                                    <Settings className="size-4" />
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end" className="w-[200px] p-3 space-y-4">
-                                <div className="space-y-1.5">
-                                    <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
-                                        <TypeIcon className="size-3" /> Font Size
-                                    </label>
-                                    <div className="flex items-center gap-2">
-                                        <input 
-                                            type="range" 
-                                            min="10" 
-                                            max="24" 
-                                            value={prefFontSize} 
-                                            onChange={(e) => setPrefFontSize(Number(e.target.value))}
-                                            className="flex-1 h-1 bg-muted rounded-full appearance-none cursor-pointer accent-primary"
-                                        />
-                                        <span className="text-[10px] font-bold tabular-nums w-4 text-center">{prefFontSize}</span>
-                                    </div>
-                                </div>
-                                <div className="space-y-1.5">
-                                    <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
-                                        <Code2 className="size-3" /> Tab Size
-                                    </label>
-                                    <div className="flex gap-2">
-                                        {[2, 4, 8].map(size => (
-                                            <Button 
-                                                key={size}
-                                                variant={prefTabSize === size ? "secondary" : "ghost"}
-                                                size="sm"
-                                                className="h-7 flex-1 text-[10px] font-bold"
-                                                onClick={() => setPrefTabSize(size)}
-                                            >
-                                                {size}
-                                            </Button>
-                                        ))}
-                                    </div>
-                                </div>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                    </div>
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" size="sm" className="h-8 text-xs font-medium uppercase tracking-widest text-muted-foreground gap-2">
+                                <span className="text-foreground">{format}</span>
+                                <ChevronDown className="size-3" />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start" className="w-[180px]">
+                            {ALL_FORMATS.slice(0, 10).map((fmt) => (
+                                <DropdownMenuItem key={fmt} onClick={() => handleFormatChange(fmt as Format)} className="text-xs uppercase">
+                                    {fmt}
+                                </DropdownMenuItem>
+                            ))}
+                        </DropdownMenuContent>
+                    </DropdownMenu>
                 </div>
 
                 <div className="flex items-center gap-2">
-                    <Button variant="outline" size="sm" onClick={handleAutoFormat} className="h-8 text-xs font-semibold gap-2">
-                        Format
-                    </Button>
-                    <Button variant="outline" size="sm" onClick={handleCopy} className="h-8 text-xs font-semibold gap-2">
-                        {copied ? <Check className="size-3.5" /> : <CopyIcon className="size-3.5" />}
-                        {copied ? "Copied" : "Copy"}
-                    </Button>
-                    <Separator orientation="vertical" className="h-6 mx-1" />
                     <Button
                         variant="ghost"
                         size="icon"
@@ -322,6 +280,52 @@ export function WorkspaceContainer({ initialContent, initialFormat }: ContainerP
                     <Button variant="ghost" size="icon" className="size-8 rounded-md text-muted-foreground" onClick={() => setIsFullscreen(!isFullscreen)}>
                         <Maximize2 className="size-4" />
                     </Button>
+
+                    <Separator orientation="vertical" className="h-6 mx-1" />
+
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" size="icon" className="size-8 rounded-md text-muted-foreground">
+                                <Settings className="size-4" />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end" className="w-[200px] p-3 space-y-4">
+                            <div className="space-y-1.5">
+                                <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
+                                    <TypeIcon className="size-3" /> Font Size
+                                </label>
+                                <div className="flex items-center gap-2">
+                                    <input 
+                                        type="range" 
+                                        min="10" 
+                                        max="24" 
+                                        value={prefFontSize} 
+                                        onChange={(e) => setPrefFontSize(Number(e.target.value))}
+                                        className="flex-1 h-1 bg-muted rounded-full appearance-none cursor-pointer accent-primary"
+                                    />
+                                    <span className="text-[10px] font-bold tabular-nums w-4 text-center">{prefFontSize}</span>
+                                </div>
+                            </div>
+                            <div className="space-y-1.5">
+                                <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
+                                    <Code2 className="size-3" /> Tab Size
+                                </label>
+                                <div className="flex gap-2">
+                                    {[2, 4, 8].map(size => (
+                                        <Button 
+                                            key={size}
+                                            variant={prefTabSize === size ? "secondary" : "ghost"}
+                                            size="sm"
+                                            className="h-7 flex-1 text-[10px] font-bold"
+                                            onClick={() => setPrefTabSize(size)}
+                                        >
+                                            {size}
+                                        </Button>
+                                    ))}
+                                </div>
+                            </div>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
                 </div>
             </div>
 
@@ -331,7 +335,32 @@ export function WorkspaceContainer({ initialContent, initialFormat }: ContainerP
                     {showEditor && (
                         <>
                             <ResizablePanel defaultSize={50} minSize={20}>
-                                <div className="flex flex-col h-full relative">
+                                <div className="flex flex-col h-full border-r bg-muted/5">
+                                    <div className="flex items-center justify-between px-4 h-11 border-b bg-muted/10">
+                                        <div className="flex items-center gap-2">
+                                            <Code2 className="size-4 text-primary" />
+                                            <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">Source</span>
+                                        </div>
+                                        <div className="flex items-center gap-1">
+                                            <Button variant="ghost" size="icon" onClick={handleAutoFormat} className="size-7 text-muted-foreground hover:text-foreground" title="Format">
+                                                <Braces className="size-3.5" />
+                                            </Button>
+                                            <Button variant="ghost" size="icon" onClick={handleWordWrapToggle} className="size-7 text-muted-foreground hover:text-foreground" title="Wrap">
+                                                <TypeIcon className="size-3.5" />
+                                            </Button>
+                                            <Separator orientation="vertical" className="h-4 mx-1" />
+                                            <Button variant="ghost" size="icon" onClick={handleCopy} className="size-7 text-muted-foreground hover:text-foreground" title="Copy">
+                                                <CopyIcon className="size-3.5" />
+                                            </Button>
+                                            <Button variant="ghost" size="icon" onClick={handleSave} className="size-7 text-muted-foreground hover:text-primary" title="Save">
+                                                <Download className="size-3.5" />
+                                            </Button>
+                                            <Button variant="ghost" size="icon" onClick={() => setContent("")} className="size-7 text-muted-foreground hover:text-destructive" title="Clear">
+                                                <Trash className="size-3.5" />
+                                            </Button>
+                                        </div>
+                                    </div>
+                                    <div className="flex-1 relative overflow-hidden">
                                     <Editor
                                         height="100%"
                                         language={getLanguage(format)}
@@ -355,6 +384,7 @@ export function WorkspaceContainer({ initialContent, initialFormat }: ContainerP
                                         <span>Line {cursorPos.line}, Col {cursorPos.col}</span>
                                         <span>{content.length} characters</span>
                                     </div>
+                                    </div>
                                 </div>
                             </ResizablePanel>
                             <ResizableHandle withHandle />
diff --git a/lib/constants/tools.ts b/lib/constants/tools.ts
index d2f6696..1528dd7 100644
--- a/lib/constants/tools.ts
+++ b/lib/constants/tools.ts
@@ -10,7 +10,10 @@ import {
     Rocket,
     Shield,
     StickyNote,
-    Table
+    Table,
+    PenTool,
+    FilePlus,
+    Bitcoin
 } from 'lucide-react';
 
 export interface Tool {
@@ -168,7 +171,34 @@ export const TOOLS: Tool[] = [
         description: "Generate v4 UUIDs for your applications and tests",
         href: "/crypto",
         category: "crypto",
-        status: "Coming Soon",
+        status: "Available",
         icon: Shield
+    },
+    {
+        id: "draw-tool",
+        name: "Quick Draw",
+        description: "Simple canvas-based sketching and drawing tool for quick ideas",
+        href: "/draw",
+        category: "media",
+        status: "Available",
+        icon: PenTool
+    },
+    {
+        id: "dummy-file",
+        name: "Dummy File Generator",
+        description: "Create placeholder files of any size or type for testing",
+        href: "/dummy",
+        category: "core",
+        status: "Available",
+        icon: FilePlus
+    },
+    {
+        id: "blockchain-tool",
+        name: "Blockchain Inspector",
+        description: "Analyze wallet addresses, transactions, and block data across major chains",
+        href: "/crypto/blockchain",
+        category: "crypto",
+        status: "Available",
+        icon: Bitcoin
     }
 ];

From 2145b413e8ddafbd4a3d25a689f53d7812d732d5 Mon Sep 17 00:00:00 2001
From: Nishanth <nishanthkj12@gmail.com>
Date: Thu, 30 Apr 2026 23:08:39 +0530
Subject: [PATCH 08/18] feat: add new canvas-based drawing tool and dummy file
 generator with layout components

---
 components/crypto/blockchain-page.tsx | 51 ++++++++++++---------------
 components/draw/draw-page.tsx         | 28 +++++++--------
 components/dummy/dummy-page.tsx       | 24 ++++++-------
 components/layout/app-sidebar.tsx     | 13 +++----
 components/layout/client-layout.tsx   |  8 ++---
 5 files changed, 58 insertions(+), 66 deletions(-)

diff --git a/components/crypto/blockchain-page.tsx b/components/crypto/blockchain-page.tsx
index 7420b0d..00a8c98 100644
--- a/components/crypto/blockchain-page.tsx
+++ b/components/crypto/blockchain-page.tsx
@@ -53,51 +53,46 @@ export function BlockchainPage() {
         <div className="h-full overflow-auto bg-background custom-scrollbar w-full flex flex-col">
             <div className="max-w-6xl mx-auto space-y-8 flex-1 w-full p-6">
                 {/* Header Section */}
-                <div className="flex flex-col md:flex-row md:items-center justify-between gap-8 py-4">
-                    <div className="space-y-3">
-                        <div className="flex items-center gap-3">
-                            <div className="p-2 bg-amber-500/10 rounded-xl">
-                                <Bitcoin className="size-8 text-amber-500" />
-                            </div>
-                            <h1 className="text-4xl font-black tracking-tighter text-foreground uppercase">
-                                Blockchain Inspector
-                            </h1>
-                        </div>
-                        <p className="text-muted-foreground text-sm font-medium max-w-xl">
-                            Real-time on-chain analytics and address tracking. Explore transactions, blocks, and wallet histories across multiple networks.
+                <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 py-6">
+                    <div className="space-y-1">
+                        <h1 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-3 uppercase">
+                            <Bitcoin className="size-6 text-amber-500" />
+                            Blockchain Inspector
+                        </h1>
+                        <p className="text-muted-foreground text-xs font-medium">
+                            On-chain analytics and address tracking.
                         </p>
                     </div>
 
-                    <div className="flex gap-4">
-                        <div className="px-4 py-2 bg-muted/30 rounded-lg border border-border/50">
-                            <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground block">BTC Price</span>
-                            <span className="text-sm font-mono font-bold">$63,412.00</span>
+                    <div className="flex gap-2">
+                        <div className="px-3 py-1.5 bg-muted/20 rounded-md border border-border/50">
+                            <span className="text-[9px] font-black uppercase tracking-widest text-muted-foreground block">BTC</span>
+                            <span className="text-xs font-mono font-bold">$63,412.00</span>
                         </div>
-                        <div className="px-4 py-2 bg-muted/30 rounded-lg border border-border/50">
-                            <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground block">Gas Fee</span>
-                            <span className="text-sm font-mono font-bold">12 Gwei</span>
+                        <div className="px-3 py-1.5 bg-muted/20 rounded-md border border-border/50">
+                            <span className="text-[9px] font-black uppercase tracking-widest text-muted-foreground block">Gas</span>
+                            <span className="text-xs font-mono font-bold">12 Gwei</span>
                         </div>
                     </div>
                 </div>
 
                 {/* Search Box */}
-                <form onSubmit={handleSearch} className="relative group">
-                    <div className="absolute inset-0 bg-primary/5 blur-xl group-focus-within:bg-primary/10 transition-all rounded-2xl" />
-                    <div className="relative flex items-center gap-3 p-2 bg-background border-2 border-border/50 rounded-2xl shadow-xl focus-within:border-primary/50 transition-all">
-                        <Search className="size-6 text-muted-foreground ml-4" />
+                <form onSubmit={handleSearch} className="relative">
+                    <div className="relative flex items-center gap-2 p-1.5 bg-background border rounded-lg shadow-sm focus-within:ring-2 ring-primary/20 transition-all">
+                        <Search className="size-5 text-muted-foreground ml-3" />
                         <input 
                             value={query}
                             onChange={(e) => setQuery(e.target.value)}
-                            placeholder="Search by Address / Tx Hash / Block..." 
-                            className="flex-1 bg-transparent border-none outline-none text-lg font-medium py-3 placeholder:text-muted-foreground/30"
+                            placeholder="Address / Tx Hash / Block..." 
+                            className="flex-1 bg-transparent border-none outline-none text-sm py-2 placeholder:text-muted-foreground/50"
                         />
                         <Button 
                             type="submit"
-                            size="lg"
-                            className="rounded-xl px-8 font-black uppercase tracking-widest h-12"
+                            size="sm"
+                            className="rounded-md px-6 font-bold uppercase tracking-widest h-9"
                             disabled={isSearching}
                         >
-                            {isSearching ? <Cpu className="size-5 animate-spin" /> : 'Inspect'}
+                            {isSearching ? <Cpu className="size-4 animate-spin" /> : 'Inspect'}
                         </Button>
                     </div>
                 </form>
diff --git a/components/draw/draw-page.tsx b/components/draw/draw-page.tsx
index cfad093..ad63f3d 100644
--- a/components/draw/draw-page.tsx
+++ b/components/draw/draw-page.tsx
@@ -16,6 +16,7 @@ import {
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 
 export function DrawPage() {
     const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -156,24 +157,19 @@ export function DrawPage() {
                     
                     <Separator orientation="vertical" className="h-6 mx-2" />
                     
-                    <div className="flex items-center gap-1 bg-muted/40 p-1 rounded-lg">
-                        <Button 
-                            variant={tool === 'brush' ? "secondary" : "ghost"} 
-                            size="icon" 
-                            className="size-8"
-                            onClick={() => setTool('brush')}
-                        >
+                    <ToggleGroup 
+                        type="single" 
+                        value={tool} 
+                        onValueChange={(v) => v && setTool(v as any)}
+                        className="bg-muted/40 p-1 rounded-lg"
+                    >
+                        <ToggleGroupItem value="brush" className="size-8 rounded-md" aria-label="Brush">
                             <MousePointer2 className="size-4" />
-                        </Button>
-                        <Button 
-                            variant={tool === 'eraser' ? "secondary" : "ghost"} 
-                            size="icon" 
-                            className="size-8"
-                            onClick={() => setTool('eraser')}
-                        >
+                        </ToggleGroupItem>
+                        <ToggleGroupItem value="eraser" className="size-8 rounded-md" aria-label="Eraser">
                             <Eraser className="size-4" />
-                        </Button>
-                    </div>
+                        </ToggleGroupItem>
+                    </ToggleGroup>
 
                     <Separator orientation="vertical" className="h-6 mx-2" />
 
diff --git a/components/dummy/dummy-page.tsx b/components/dummy/dummy-page.tsx
index ec3ba38..7169dfe 100644
--- a/components/dummy/dummy-page.tsx
+++ b/components/dummy/dummy-page.tsx
@@ -16,6 +16,7 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Separator } from '@/components/ui/separator';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 
 export function DummyFilePage() {
     const [size, setSize] = useState(1);
@@ -101,18 +102,17 @@ export function DummyFilePage() {
                                         onChange={(e) => setSize(parseInt(e.target.value) || 1)}
                                         className="h-12 text-lg font-bold w-32"
                                     />
-                                    <div className="flex-1 flex gap-1 bg-muted/50 p-1 rounded-lg">
-                                        {(['KB', 'MB', 'GB'] as const).map((u) => (
-                                            <Button
-                                                key={u}
-                                                variant={unit === u ? "secondary" : "ghost"}
-                                                className="flex-1 h-10 font-black text-xs"
-                                                onClick={() => setUnit(u)}
-                                            >
-                                                {u}
-                                            </Button>
-                                        ))}
-                                    </div>
+                                    <Tabs 
+                                        value={unit} 
+                                        onValueChange={(v) => setUnit(v as any)} 
+                                        className="flex-1"
+                                    >
+                                        <TabsList className="grid w-full grid-cols-3 h-12 bg-muted/50">
+                                            <TabsTrigger value="KB" className="font-black text-xs">KB</TabsTrigger>
+                                            <TabsTrigger value="MB" className="font-black text-xs">MB</TabsTrigger>
+                                            <TabsTrigger value="GB" className="font-black text-xs">GB</TabsTrigger>
+                                        </TabsList>
+                                    </Tabs>
                                 </div>
                             </div>
 
diff --git a/components/layout/app-sidebar.tsx b/components/layout/app-sidebar.tsx
index 6fd0b38..7f814cf 100644
--- a/components/layout/app-sidebar.tsx
+++ b/components/layout/app-sidebar.tsx
@@ -89,11 +89,7 @@ export function AppSidebar() {
                         <div className="size-7 rounded bg-indigo-500/10 flex items-center justify-center text-indigo-500">
                             <Command className="size-4" />
                         </div>
-                        <span className="font-bold text-xl tracking-tight">Web Utils</span>
-                    </Link>
-                    <Link href="/" className="flex items-center gap-2 text-sm font-semibold text-muted-foreground hover:text-foreground transition-colors ml-1">
-                        <Home className="size-4" />
-                        <span>Home</span>
+                        <span className="font-black text-lg uppercase tracking-widest text-foreground">Web Utils</span>
                     </Link>
                 </div>
                 <div className="relative group">
@@ -140,7 +136,12 @@ export function AppSidebar() {
                                                     className={`rounded-lg h-10 transition-all w-full ${pathname === tool.href ? 'bg-indigo-500/10 text-indigo-500 font-bold hover:bg-indigo-500/20' : 'hover:bg-zinc-100 dark:hover:bg-zinc-800'}`}
                                                 >
                                                     <tool.icon className={`size-4 ${pathname === tool.href ? 'text-indigo-500' : 'text-muted-foreground'}`} />
-                                                    <span className={`text-sm ${pathname === tool.href ? 'font-bold' : 'font-medium'}`}>{tool.name}</span>
+                                                    <div className="flex items-center justify-between flex-1">
+                                                        <span className={`text-sm ${pathname === tool.href ? 'font-bold' : 'font-medium'}`}>{tool.name}</span>
+                                                        {['draw-tool', 'dummy-file', 'blockchain-tool', 'uuid-generator'].includes(tool.id) && (
+                                                            <span className="text-[7px] font-black bg-indigo-500 text-white px-1 rounded-sm leading-none py-0.5 ml-auto">NEW</span>
+                                                        )}
+                                                    </div>
                                                 </SidebarMenuButton>
                                             </Link>
                                         </SidebarMenuItem>
diff --git a/components/layout/client-layout.tsx b/components/layout/client-layout.tsx
index 5d033fd..a51fa4d 100644
--- a/components/layout/client-layout.tsx
+++ b/components/layout/client-layout.tsx
@@ -10,7 +10,7 @@ import {AppSidebar} from "@/components/layout/app-sidebar";
 
 export function ClientLayout({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
-  const isToolPage = pathname !== "/";
+  const isHomePage = pathname === "/";
   const [showSplash, setShowSplash] = useState(true);
 
   useEffect(() => {
@@ -31,7 +31,7 @@ export function ClientLayout({ children }: { children: React.ReactNode }) {
     <SidebarProvider>
       {showSplash && <SplashScreen onCompleteAction={handleSplashComplete} />}
 
-      {isToolPage && <AppSidebar />}
+      <AppSidebar />
 
         <div
             className={`transition-opacity duration-1000 flex flex-col flex-1 min-w-0 h-screen overflow-hidden bg-background ${
@@ -39,7 +39,7 @@ export function ClientLayout({ children }: { children: React.ReactNode }) {
             }`}
         >
 
-            {!isToolPage && (
+            {isHomePage && (
                 <Navbar
                     searchQuery={searchQuery}
                     setSearchQuery={setSearchQuery}
@@ -48,7 +48,7 @@ export function ClientLayout({ children }: { children: React.ReactNode }) {
                 />
             )}
 
-            <div className={`flex flex-1 ${isToolPage ? 'pt-0' : 'pt-16'} overflow-hidden w-full`}>
+            <div className={`flex flex-1 ${isHomePage ? 'pt-16' : 'pt-0'} overflow-hidden w-full`}>
           <div className="flex-1 h-full overflow-hidden relative flex flex-col">
             <div className="flex-1 relative overflow-hidden">
               {children}

From 76f59e55403d03a6c82f7838c48976c34454181c Mon Sep 17 00:00:00 2001
From: Nishanth <nishanthkj12@gmail.com>
Date: Thu, 30 Apr 2026 23:12:59 +0530
Subject: [PATCH 09/18] feat: implement main tools landing page and navigation
 header component

---
 app/page.tsx                 | 7 +++----
 components/layout/navbar.tsx | 5 ++++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 1eb5bfd..3fb4d2e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -122,8 +122,8 @@ export default function ToolsListingPage() {
                     </div>
                 </div>
 
-                {/* Tools Grid */}
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {/* Unified Tools Grid */}
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pb-20">
                     {filteredTools.map((tool: Tool) => (
                         <Card 
                             key={tool.id} 
@@ -144,9 +144,8 @@ export default function ToolsListingPage() {
                             </CardHeader>
                         </Card>
                     ))}
-
-                    <AdsCard variant="horizontal" className="col-span-1 md:col-span-2 lg:col-span-3 mt-2" />
                 </div>
+                <AdsCard variant="horizontal" className="mt-8 mb-12" />
             </div>
             <div className="mt-auto">
                 <Footer />
diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index 0c09398..4578509 100644
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -6,6 +6,8 @@ import {useTheme} from 'next-themes';
 import {Button} from '@/components/ui/button';
 import Link from 'next/link';
 
+import { useSidebar } from "@/components/ui/sidebar";
+
 interface NavbarProps {
     searchQuery?: string;
     setSearchQuery?: (query: string) => void;
@@ -15,9 +17,10 @@ interface NavbarProps {
 
 export function Navbar({searchQuery, setSearchQuery, activeCategory, setActiveCategory}: NavbarProps = {}) {
     const { theme, setTheme } = useTheme();
+    const { open, state } = useSidebar();
 
     return (
-        <nav className="fixed top-0 w-full z-[100] border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <nav className={`fixed top-0 right-0 z-[100] border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 transition-all duration-300 ease-in-out ${state === 'collapsed' ? 'left-0' : 'left-[var(--sidebar-width)]'}`}>
             <div className="max-w-6xl mx-auto flex h-16 items-center justify-between px-4 md:px-6">
                 <div className="flex items-center gap-8">
                     <Link href="/" className="flex items-center space-x-2.5">

From 47564214669b1fdafab3387713349a52f9246a06 Mon Sep 17 00:00:00 2001
From: Nishanth <nishanthkj12@gmail.com>
Date: Thu, 30 Apr 2026 23:20:20 +0530
Subject: [PATCH 10/18] feat: implement whiteboard drawing component with
 RoughJS integration for shape and freehand rendering

---
 components/draw/action-menu.tsx   |  45 ++++
 components/draw/draw-page.tsx     | 404 ++++++++++++++++++------------
 components/draw/style-panel.tsx   |  79 ++++++
 components/draw/toolbar.tsx       | 174 +++++++++++++
 components/draw/types.ts          |  21 ++
 components/draw/zoom-controls.tsx |  45 ++++
 6 files changed, 603 insertions(+), 165 deletions(-)
 create mode 100644 components/draw/action-menu.tsx
 create mode 100644 components/draw/style-panel.tsx
 create mode 100644 components/draw/toolbar.tsx
 create mode 100644 components/draw/types.ts
 create mode 100644 components/draw/zoom-controls.tsx

diff --git a/components/draw/action-menu.tsx b/components/draw/action-menu.tsx
new file mode 100644
index 0000000..215e1f6
--- /dev/null
+++ b/components/draw/action-menu.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import React from 'react';
+import { MoreHorizontal, Save, FileDown, Share2, Settings } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { 
+    DropdownMenu, 
+    DropdownMenuContent, 
+    DropdownMenuItem, 
+    DropdownMenuTrigger 
+} from '@/components/ui/dropdown-menu';
+
+interface ActionMenuProps {
+    handleDownload: () => void;
+}
+
+export function ActionMenu({ handleDownload }: ActionMenuProps) {
+    return (
+        <div className="absolute top-4 left-4 z-50">
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="icon" className="bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 shadow-sm rounded-lg size-10">
+                        <MoreHorizontal className="size-5" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start" className="w-56 p-1 rounded-xl shadow-2xl">
+                    <DropdownMenuItem className="gap-2 h-10 rounded-lg cursor-pointer" onClick={handleDownload}>
+                        <Save className="size-4" /> Save to...
+                    </DropdownMenuItem>
+                    <DropdownMenuItem className="gap-2 h-10 rounded-lg cursor-pointer" onClick={handleDownload}>
+                        <FileDown className="size-4" /> Export image... <span className="ml-auto text-[10px] text-muted-foreground">Ctrl+Shift+E</span>
+                    </DropdownMenuItem>
+                    <Separator className="my-1" />
+                    <DropdownMenuItem className="gap-2 h-10 rounded-lg cursor-pointer">
+                        <Share2 className="size-4" /> Live collaboration...
+                    </DropdownMenuItem>
+                    <DropdownMenuItem className="gap-2 h-10 rounded-lg cursor-pointer">
+                        <Settings className="size-4" /> Help & Settings
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+    );
+}
diff --git a/components/draw/draw-page.tsx b/components/draw/draw-page.tsx
index ad63f3d..430e419 100644
--- a/components/draw/draw-page.tsx
+++ b/components/draw/draw-page.tsx
@@ -1,225 +1,299 @@
 "use client";
 
-import React, { useRef, useState, useEffect } from 'react';
-import { 
-    Eraser, 
-    Square, 
-    Circle, 
-    Minus, 
-    Download, 
-    Trash2, 
-    Undo2, 
-    Type,
-    MousePointer2,
-    Palette,
-    PenTool
-} from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Separator } from '@/components/ui/separator';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import React, { useRef, useState, useEffect, useLayoutEffect } from 'react';
+import Script from 'next/script';
+
+import { Element, ElementType } from './types';
+import { Toolbar } from './toolbar';
+import { StylePanel } from './style-panel';
+import { ZoomControls } from './zoom-controls';
+import { ActionMenu } from './action-menu';
 
 export function DrawPage() {
     const canvasRef = useRef<HTMLCanvasElement>(null);
-    const [isDrawing, setIsDrawing] = useState(false);
-    const [color, setColor] = useState('#3b82f6');
-    const [brushSize, setBrushSize] = useState(5);
-    const [tool, setTool] = useState<'brush' | 'eraser' | 'rect' | 'circle'>('brush');
-    const [history, setHistory] = useState<string[]>([]);
-    const [startPos, setStartPos] = useState({ x: 0, y: 0 });
+    const [elements, setElements] = useState<Element[]>([]);
+    const [action, setAction] = useState<'none' | 'drawing' | 'moving' | 'resizing' | 'panning'>('none');
+    const [tool, setTool] = useState<ElementType>('freehand');
+    const [color, setColor] = useState('#1e1e1e');
+    const [strokeWidth, setStrokeWidth] = useState(2);
+    const [roughCanvas, setRoughCanvas] = useState<any>(null);
+    const [history, setHistory] = useState<Element[][]>([]);
+    const [redoStack, setRedoStack] = useState<Element[][]>([]);
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+    const [scale, setScale] = useState(1);
+    const [startPanPos, setStartPanPos] = useState({ x: 0, y: 0 });
+    const [isLocked, setIsLocked] = useState(false);
 
-    useEffect(() => {
+    // Initialize RoughJS
+    const onScriptLoad = () => {
+        if (typeof window !== 'undefined' && (window as any).rough) {
+            const canvas = canvasRef.current;
+            if (canvas) {
+                setRoughCanvas((window as any).rough.canvas(canvas));
+            }
+        }
+    };
+
+    useLayoutEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;
 
         const ctx = canvas.getContext('2d');
         if (!ctx) return;
 
-        // Set canvas size
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        if (!roughCanvas) return;
+
+        ctx.save();
+        ctx.translate(offset.x, offset.y);
+        ctx.scale(scale, scale);
+
+        elements.forEach((element) => {
+            drawElement(roughCanvas, ctx, element);
+        });
+
+        ctx.restore();
+    }, [elements, roughCanvas, offset, scale]);
+
+    useEffect(() => {
         const updateSize = () => {
-            const parent = canvas.parentElement;
-            if (parent) {
-                const tempImage = canvas.toDataURL();
-                canvas.width = parent.clientWidth;
-                canvas.height = parent.clientHeight;
-                const img = new Image();
-                img.src = tempImage;
-                img.onload = () => ctx.drawImage(img, 0, 0);
+            const canvas = canvasRef.current;
+            if (canvas && canvas.parentElement) {
+                canvas.width = canvas.parentElement.clientWidth;
+                canvas.height = canvas.parentElement.clientHeight;
             }
         };
-
         updateSize();
         window.addEventListener('resize', updateSize);
         return () => window.removeEventListener('resize', updateSize);
     }, []);
 
-    const saveToHistory = () => {
-        const canvas = canvasRef.current;
-        if (canvas) {
-            setHistory(prev => [...prev, canvas.toDataURL()].slice(-20));
+    const drawElement = (rc: any, ctx: CanvasRenderingContext2D, element: Element) => {
+        const generator = rc.generator;
+        const options = {
+            stroke: element.color,
+            strokeWidth: element.strokeWidth,
+            roughness: 1.2,
+            bowing: 1.5,
+            seed: element.id + 1,
+        };
+
+        switch (element.type) {
+            case 'line':
+                rc.draw(generator.line(element.x1, element.y1, element.x2, element.y2, options));
+                break;
+            case 'rectangle':
+                rc.draw(generator.rectangle(element.x1, element.y1, element.x2 - element.x1, element.y2 - element.y1, options));
+                break;
+            case 'diamond':
+                const midX = (element.x1 + element.x2) / 2;
+                const midY = (element.y1 + element.y2) / 2;
+                rc.draw(generator.polygon([
+                    [midX, element.y1],
+                    [element.x2, midY],
+                    [midX, element.y2],
+                    [element.x1, midY]
+                ], options));
+                break;
+            case 'circle':
+                const width = element.x2 - element.x1;
+                const height = element.y2 - element.y1;
+                rc.draw(generator.ellipse(element.x1 + width / 2, element.y1 + height / 2, width, height, options));
+                break;
+            case 'arrow':
+                const headlen = 15;
+                const angle = Math.atan2(element.y2 - element.y1, element.x2 - element.x1);
+                rc.draw(generator.line(element.x1, element.y1, element.x2, element.y2, options));
+                rc.draw(generator.line(element.x2, element.y2, element.x2 - headlen * Math.cos(angle - Math.PI / 6), element.y2 - headlen * Math.sin(angle - Math.PI / 6), options));
+                rc.draw(generator.line(element.x2, element.y2, element.x2 - headlen * Math.cos(angle + Math.PI / 6), element.y2 - headlen * Math.sin(angle + Math.PI / 6), options));
+                break;
+            case 'freehand':
+                if (element.points && element.points.length > 1) {
+                    const stroke = element.points.map(p => [p.x, p.y] as [number, number]);
+                    rc.draw(generator.curve(stroke, options));
+                }
+                break;
         }
     };
 
-    const startDrawing = (e: React.MouseEvent | React.TouchEvent) => {
-        const canvas = canvasRef.current;
-        if (!canvas) return;
+    const getMousePos = (e: React.MouseEvent) => {
+        const rect = canvasRef.current!.getBoundingClientRect();
+        return {
+            x: (e.clientX - rect.left - offset.x) / scale,
+            y: (e.clientY - rect.top - offset.y) / scale
+        };
+    };
 
-        const ctx = canvas.getContext('2d');
-        if (!ctx) return;
+    const handleMouseDown = (e: React.MouseEvent) => {
+        if (!roughCanvas) return;
+        
+        if (e.button === 1 || tool === 'hand') {
+            setAction('panning');
+            setStartPanPos({ x: e.clientX, y: e.clientY });
+            return;
+        }
 
-        const rect = canvas.getBoundingClientRect();
-        const x = ('touches' in e) ? e.touches[0].clientX - rect.left : e.nativeEvent.offsetX;
-        const y = ('touches' in e) ? e.touches[0].clientY - rect.top : e.nativeEvent.offsetY;
+        const { x, y } = getMousePos(e);
 
-        setIsDrawing(true);
-        setStartPos({ x, y });
-        saveToHistory();
+        if (tool === 'selection') return;
 
-        ctx.beginPath();
-        ctx.moveTo(x, y);
-        ctx.lineCap = 'round';
-        ctx.lineJoin = 'round';
-        ctx.strokeStyle = tool === 'eraser' ? '#ffffff' : color;
-        ctx.lineWidth = brushSize;
+        setAction('drawing');
+        const id = Date.now();
+        const newElement: Element = { 
+            id, 
+            x1: x, 
+            y1: y, 
+            x2: x, 
+            y2: y, 
+            type: tool, 
+            color, 
+            strokeWidth, 
+            points: tool === 'freehand' ? [{x, y}] : undefined 
+        };
+        setElements(prev => [...prev, newElement]);
+        setHistory(prev => [...prev, elements]);
+        setRedoStack([]);
     };
 
-    const draw = (e: React.MouseEvent | React.TouchEvent) => {
-        if (!isDrawing) return;
-        const canvas = canvasRef.current;
-        if (!canvas) return;
+    const handleMouseMove = (e: React.MouseEvent) => {
+        if (action === 'none') return;
 
-        const ctx = canvas.getContext('2d');
-        if (!ctx) return;
+        if (action === 'panning') {
+            setOffset(prev => ({
+                x: prev.x + (e.clientX - startPanPos.x),
+                y: prev.y + (e.clientY - startPanPos.y)
+            }));
+            setStartPanPos({ x: e.clientX, y: e.clientY });
+            return;
+        }
 
-        const rect = canvas.getBoundingClientRect();
-        const x = ('touches' in e) ? e.touches[0].clientX - rect.left : e.nativeEvent.offsetX;
-        const y = ('touches' in e) ? e.touches[0].clientY - rect.top : e.nativeEvent.offsetY;
+        const { x, y } = getMousePos(e);
 
-        if (tool === 'brush' || tool === 'eraser') {
-            ctx.lineTo(x, y);
-            ctx.stroke();
-        } else {
-            // Shapes handling (preview would be better but let's keep it simple)
+        if (action === 'drawing') {
+            const elementsCopy = [...elements];
+            const index = elementsCopy.length - 1;
+            const current = elementsCopy[index];
+            
+            if (current.type === 'freehand') {
+                current.points = [...(current.points || []), { x, y }];
+            } else {
+                current.x2 = x;
+                current.y2 = y;
+            }
+            setElements(elementsCopy);
         }
     };
 
-    const stopDrawing = () => {
-        setIsDrawing(false);
+    const handleMouseUp = () => {
+        setAction('none');
     };
 
-    const handleClear = () => {
-        const canvas = canvasRef.current;
-        if (canvas) {
-            const ctx = canvas.getContext('2d');
-            ctx?.clearRect(0, 0, canvas.width, canvas.height);
-            saveToHistory();
+    const handleWheel = (e: React.WheelEvent) => {
+        if (e.ctrlKey || e.metaKey) {
+            e.preventDefault();
+            const delta = e.deltaY > 0 ? 0.9 : 1.1;
+            setScale(prev => Math.max(0.1, Math.min(10, prev * delta)));
+        } else {
+            setOffset(prev => ({
+                x: prev.x - e.deltaX,
+                y: prev.y - e.deltaY
+            }));
         }
     };
 
+    const handleUndo = () => {
+        if (history.length === 0) return;
+        const prev = history[history.length - 1];
+        setRedoStack(prevStack => [...prevStack, elements]);
+        setElements(prev);
+        setHistory(prevHistory => prevHistory.slice(0, -1));
+    };
+
+    const handleRedo = () => {
+        if (redoStack.length === 0) return;
+        const next = redoStack[redoStack.length - 1];
+        setHistory(prevHistory => [...prevHistory, elements]);
+        setElements(next);
+        setRedoStack(prevStack => prevStack.slice(0, -1));
+    };
+
     const handleDownload = () => {
         const canvas = canvasRef.current;
         if (canvas) {
             const link = document.createElement('a');
-            link.download = 'quick-draw.png';
+            link.download = 'sketch.png';
             link.href = canvas.toDataURL();
             link.click();
         }
     };
 
-    const handleUndo = () => {
-        if (history.length === 0) return;
-        const last = history[history.length - 1];
-        const newHistory = history.slice(0, -1);
-        setHistory(newHistory);
-
-        const canvas = canvasRef.current;
-        if (canvas) {
-            const ctx = canvas.getContext('2d');
-            if (ctx) {
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
-                const img = new Image();
-                img.src = last;
-                img.onload = () => ctx.drawImage(img, 0, 0);
-            }
-        }
+    const handleClear = () => {
+        setHistory(prev => [...prev, elements]);
+        setElements([]);
     };
 
+    const zoomIn = () => setScale(prev => Math.min(10, prev + 0.1));
+    const zoomOut = () => setScale(prev => Math.max(0.1, prev - 0.1));
+    const resetZoom = () => setScale(1);
+
     return (
-        <div className="flex flex-col h-full bg-background overflow-hidden">
-            {/* Toolbar */}
-            <div className="flex items-center justify-between px-6 h-14 border-b bg-muted/20 backdrop-blur-md z-10">
-                <div className="flex items-center gap-4">
-                    <div className="flex items-center gap-2">
-                        <div className="p-1.5 bg-primary/10 rounded-md">
-                            <PenTool className="size-4 text-primary" />
-                        </div>
-                        <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">Quick Draw</span>
-                    </div>
-                    
-                    <Separator orientation="vertical" className="h-6 mx-2" />
-                    
-                    <ToggleGroup 
-                        type="single" 
-                        value={tool} 
-                        onValueChange={(v) => v && setTool(v as any)}
-                        className="bg-muted/40 p-1 rounded-lg"
-                    >
-                        <ToggleGroupItem value="brush" className="size-8 rounded-md" aria-label="Brush">
-                            <MousePointer2 className="size-4" />
-                        </ToggleGroupItem>
-                        <ToggleGroupItem value="eraser" className="size-8 rounded-md" aria-label="Eraser">
-                            <Eraser className="size-4" />
-                        </ToggleGroupItem>
-                    </ToggleGroup>
-
-                    <Separator orientation="vertical" className="h-6 mx-2" />
-
-                    <div className="flex items-center gap-3 px-3">
-                        <input 
-                            type="color" 
-                            value={color} 
-                            onChange={(e) => setColor(e.target.value)}
-                            className="size-6 rounded-full overflow-hidden border-none cursor-pointer bg-transparent"
-                        />
-                        <div className="flex items-center gap-2">
-                            <span className="text-[10px] font-bold text-muted-foreground uppercase">Size</span>
-                            <input 
-                                type="range" 
-                                min="1" 
-                                max="50" 
-                                value={brushSize} 
-                                onChange={(e) => setBrushSize(parseInt(e.target.value))}
-                                className="w-24 h-1 bg-muted rounded-full appearance-none cursor-pointer accent-primary"
-                            />
-                        </div>
-                    </div>
-                </div>
-
-                <div className="flex items-center gap-2">
-                    <Button variant="ghost" size="icon" className="size-8" onClick={handleUndo} disabled={history.length === 0}>
-                        <Undo2 className="size-4" />
-                    </Button>
-                    <Separator orientation="vertical" className="h-6 mx-1" />
-                    <Button variant="ghost" size="icon" className="size-8 text-destructive hover:bg-destructive/10" onClick={handleClear}>
-                        <Trash2 className="size-4" />
-                    </Button>
-                    <Button variant="default" size="sm" className="h-8 gap-2 font-bold uppercase tracking-widest text-[10px]" onClick={handleDownload}>
-                        <Download className="size-3" /> Save Image
-                    </Button>
-                </div>
+        <div className="flex flex-col h-full bg-[#f9f9fb] dark:bg-zinc-950 overflow-hidden font-sans select-none relative">
+            <Script 
+                src="https://cdn.jsdelivr.net/npm/roughjs@4.5.2/bundled/rough.js" 
+                onLoad={onScriptLoad}
+            />
+
+            <ActionMenu handleDownload={handleDownload} />
+            
+            <Toolbar 
+                tool={tool} 
+                setTool={setTool} 
+                isLocked={isLocked} 
+                setIsLocked={setIsLocked} 
+            />
+
+            {/* Canvas Instructions (Bottom Center) */}
+            <div className="absolute top-16 left-1/2 -translate-x-1/2 z-40 text-[11px] font-medium text-zinc-400">
+                To move canvas, hold <span className="border px-1 rounded-sm bg-zinc-50 dark:bg-zinc-800">Scroll wheel</span> or <span className="border px-1 rounded-sm bg-zinc-50 dark:bg-zinc-800">Space</span> while dragging, or use the hand tool
             </div>
 
+            <ZoomControls 
+                scale={scale}
+                zoomIn={zoomIn}
+                zoomOut={zoomOut}
+                resetZoom={resetZoom}
+                handleUndo={handleUndo}
+                handleRedo={handleRedo}
+                canUndo={history.length > 0}
+                canRedo={redoStack.length > 0}
+            />
+
+            <StylePanel 
+                color={color}
+                setColor={setColor}
+                strokeWidth={strokeWidth}
+                setStrokeWidth={setStrokeWidth}
+                handleClear={handleClear}
+            />
+
             {/* Canvas Area */}
-            <div className="flex-1 relative bg-[#f8fafc] dark:bg-zinc-950 overflow-hidden cursor-crosshair">
+            <div className="flex-1 relative overflow-hidden bg-white dark:bg-zinc-950">
+                <div className="absolute inset-0 opacity-[0.03] dark:opacity-[0.05] pointer-events-none" 
+                     style={{ 
+                         backgroundImage: 'radial-gradient(circle, currentColor 1px, transparent 1px)', 
+                         backgroundSize: `${20 * scale}px ${20 * scale}px`,
+                         backgroundPosition: `${offset.x}px ${offset.y}px`
+                     }} 
+                />
+                
                 <canvas
                     ref={canvasRef}
-                    onMouseDown={startDrawing}
-                    onMouseMove={draw}
-                    onMouseUp={stopDrawing}
-                    onMouseLeave={stopDrawing}
-                    onTouchStart={startDrawing}
-                    onTouchMove={draw}
-                    onTouchEnd={stopDrawing}
-                    className="absolute inset-0 w-full h-full touch-none"
+                    onMouseDown={handleMouseDown}
+                    onMouseMove={handleMouseMove}
+                    onMouseUp={handleMouseUp}
+                    onWheel={handleWheel}
+                    className={`absolute inset-0 w-full h-full touch-none ${tool === 'hand' || action === 'panning' ? 'cursor-grab active:cursor-grabbing' : 'cursor-crosshair'}`}
                 />
             </div>
         </div>
diff --git a/components/draw/style-panel.tsx b/components/draw/style-panel.tsx
new file mode 100644
index 0000000..12fe678
--- /dev/null
+++ b/components/draw/style-panel.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import React from 'react';
+import { Palette, Trash2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+
+interface StylePanelProps {
+    color: string;
+    setColor: (color: string) => void;
+    strokeWidth: number;
+    setStrokeWidth: (width: number) => void;
+    handleClear: () => void;
+}
+
+export function StylePanel({ color, setColor, strokeWidth, setStrokeWidth, handleClear }: StylePanelProps) {
+    return (
+        <div 
+            className="absolute top-24 right-6 z-50 flex flex-col gap-4 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 p-5 rounded-2xl shadow-2xl w-52 animate-in slide-in-from-right-4 duration-500 cursor-default active:cursor-grabbing"
+            onMouseDown={(e) => {
+                if (e.target instanceof HTMLButtonElement) return;
+                const el = e.currentTarget;
+                const startX = e.clientX - el.offsetLeft;
+                const startY = e.clientY - el.offsetTop;
+                
+                const onMouseMove = (moveEvent: MouseEvent) => {
+                    el.style.left = `${moveEvent.clientX - startX}px`;
+                    el.style.top = `${moveEvent.clientY - startY}px`;
+                    el.style.right = 'auto';
+                };
+                
+                const onMouseUp = () => {
+                    document.removeEventListener('mousemove', onMouseMove);
+                    document.removeEventListener('mouseup', onMouseUp);
+                };
+                
+                document.addEventListener('mousemove', onMouseMove);
+                document.addEventListener('mouseup', onMouseUp);
+            }}
+        >
+            <div className="space-y-3">
+                <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
+                    <Palette className="size-3" /> Stroke Color
+                </label>
+                <div className="grid grid-cols-5 gap-2">
+                    {['#1e1e1e', '#ff4d4d', '#4dff4d', '#4d4dff', '#ffff4d'].map(c => (
+                        <button 
+                            key={c}
+                            className={`size-6 rounded-md border-2 transition-all ${color === c ? 'border-primary scale-110 shadow-md' : 'border-transparent hover:border-zinc-200'}`}
+                            style={{ backgroundColor: c }}
+                            onClick={() => setColor(c)}
+                        />
+                    ))}
+                </div>
+            </div>
+
+            <div className="space-y-3">
+                <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">Stroke Width</label>
+                <div className="flex flex-col gap-1.5 bg-zinc-100 dark:bg-zinc-800 p-1 rounded-lg">
+                    {[1, 2, 4].map(w => (
+                        <button 
+                            key={w}
+                            className={`w-full h-8 text-[10px] font-bold rounded-md transition-all ${strokeWidth === w ? 'bg-white dark:bg-zinc-700 shadow-sm text-primary' : 'text-muted-foreground hover:text-foreground'}`}
+                            onClick={() => setStrokeWidth(w)}
+                        >
+                            {w === 1 ? 'Thin' : w === 2 ? 'Bold' : 'Extra'}
+                        </button>
+                    ))}
+                </div>
+            </div>
+
+            <Separator />
+
+            <Button variant="ghost" size="sm" className="justify-start gap-2 h-9 text-xs font-medium text-destructive hover:bg-destructive/10" onClick={handleClear}>
+                <Trash2 className="size-3.5" /> Clear Canvas
+            </Button>
+        </div>
+    );
+}
diff --git a/components/draw/toolbar.tsx b/components/draw/toolbar.tsx
new file mode 100644
index 0000000..8e2f96e
--- /dev/null
+++ b/components/draw/toolbar.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+import React from 'react';
+import { 
+    Eraser, 
+    Square, 
+    Circle, 
+    Minus, 
+    MousePointer2,
+    PenTool,
+    ArrowRight,
+    Diamond,
+    Hand,
+    Type,
+    Image as ImageIcon,
+    Lock,
+    Unlock,
+    PlusCircle
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { ElementType } from './types';
+
+interface ToolbarProps {
+    tool: ElementType;
+    setTool: (tool: ElementType) => void;
+    isLocked: boolean;
+    setIsLocked: (locked: boolean) => void;
+}
+
+export function Toolbar({ tool, setTool, isLocked, setIsLocked }: ToolbarProps) {
+    return (
+        <div className="absolute top-4 left-1/2 -translate-x-1/2 z-50 flex items-center bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 p-1 rounded-xl shadow-xl animate-in fade-in slide-in-from-top-2 duration-500">
+            <div className="flex items-center px-1">
+                <Button 
+                    variant="ghost" 
+                    size="icon" 
+                    className="size-9 rounded-lg"
+                    onClick={() => setIsLocked(!isLocked)}
+                >
+                    {isLocked ? <Lock className="size-4" /> : <Unlock className="size-4" />}
+                </Button>
+            </div>
+            
+            <Separator orientation="vertical" className="h-6 mx-1" />
+
+            <ToggleGroup 
+                type="single" 
+                value={tool} 
+                onValueChange={(v) => v && setTool(v as any)}
+                className="flex items-center gap-0.5"
+            >
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <ToggleGroupItem value="hand" className="size-9 rounded-lg relative" aria-label="Hand">
+                            <Hand className="size-4" />
+                        </ToggleGroupItem>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">Hand (H)</TooltipContent>
+                </Tooltip>
+
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <ToggleGroupItem value="selection" className="size-9 rounded-lg relative" aria-label="Selection">
+                            <MousePointer2 className="size-4" />
+                            <span className="absolute bottom-0.5 right-0.5 text-[7px] text-muted-foreground opacity-50">1</span>
+                        </ToggleGroupItem>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">Selection (V)</TooltipContent>
+                </Tooltip>
+
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <ToggleGroupItem value="rectangle" className="size-9 rounded-lg relative" aria-label="Rectangle">
+                            <Square className="size-4" />
+                            <span className="absolute bottom-0.5 right-0.5 text-[7px] text-muted-foreground opacity-50">2</span>
+                        </ToggleGroupItem>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">Rectangle (R)</TooltipContent>
+                </Tooltip>
+
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <ToggleGroupItem value="diamond" className="size-9 rounded-lg relative" aria-label="Diamond">
+                            <Diamond className="size-4" />
+                            <span className="absolute bottom-0.5 right-0.5 text-[7px] text-muted-foreground opacity-50">3</span>
+                        </ToggleGroupItem>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">Diamond (D)</TooltipContent>
+                </Tooltip>
+
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <ToggleGroupItem value="circle" className="size-9 rounded-lg relative" aria-label="Circle">
+                            <Circle className="size-4" />
+                            <span className="absolute bottom-0.5 right-0.5 text-[7px] text-muted-foreground opacity-50">4</span>
+                        </ToggleGroupItem>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">Circle (O)</TooltipContent>
+                </Tooltip>
+
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <ToggleGroupItem value="arrow" className="size-9 rounded-lg relative" aria-label="Arrow">
+                            <ArrowRight className="size-4" />
+                            <span className="absolute bottom-0.5 right-0.5 text-[7px] text-muted-foreground opacity-50">5</span>
+                        </ToggleGroupItem>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">Arrow (A)</TooltipContent>
+                </Tooltip>
+
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <ToggleGroupItem value="line" className="size-9 rounded-lg relative" aria-label="Line">
+                            <Minus className="size-4" />
+                            <span className="absolute bottom-0.5 right-0.5 text-[7px] text-muted-foreground opacity-50">6</span>
+                        </ToggleGroupItem>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">Line (L)</TooltipContent>
+                </Tooltip>
+
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <ToggleGroupItem value="freehand" className="size-9 rounded-lg relative" aria-label="Freehand">
+                            <PenTool className="size-4" />
+                            <span className="absolute bottom-0.5 right-0.5 text-[7px] text-muted-foreground opacity-50">7</span>
+                        </ToggleGroupItem>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">Draw (P)</TooltipContent>
+                </Tooltip>
+
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <ToggleGroupItem value="text" className="size-9 rounded-lg relative" aria-label="Text">
+                            <Type className="size-4" />
+                            <span className="absolute bottom-0.5 right-0.5 text-[7px] text-muted-foreground opacity-50">8</span>
+                        </ToggleGroupItem>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">Text (T)</TooltipContent>
+                </Tooltip>
+
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <ToggleGroupItem value="selection" className="size-9 rounded-lg relative opacity-50" aria-label="Image">
+                            <ImageIcon className="size-4" />
+                            <span className="absolute bottom-0.5 right-0.5 text-[7px] text-muted-foreground opacity-50">9</span>
+                        </ToggleGroupItem>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">Image</TooltipContent>
+                </Tooltip>
+
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <ToggleGroupItem value="eraser" className="size-9 rounded-lg relative" aria-label="Eraser">
+                            <Eraser className="size-4" />
+                            <span className="absolute bottom-0.5 right-0.5 text-[7px] text-muted-foreground opacity-50">0</span>
+                        </ToggleGroupItem>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">Eraser (E)</TooltipContent>
+                </Tooltip>
+            </ToggleGroup>
+
+            <Separator orientation="vertical" className="h-6 mx-1" />
+
+            <div className="flex items-center px-1">
+                <Button variant="ghost" size="icon" className="size-9 rounded-lg">
+                    <PlusCircle className="size-4" />
+                </Button>
+            </div>
+        </div>
+    );
+}
diff --git a/components/draw/types.ts b/components/draw/types.ts
new file mode 100644
index 0000000..21778b3
--- /dev/null
+++ b/components/draw/types.ts
@@ -0,0 +1,21 @@
+import { LucideIcon } from "lucide-react";
+
+export type ElementType = 'selection' | 'hand' | 'rectangle' | 'diamond' | 'circle' | 'arrow' | 'line' | 'freehand' | 'eraser' | 'text';
+
+export interface Element {
+    id: number;
+    type: ElementType;
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    points?: { x: number, y: number }[];
+    color: string;
+    strokeWidth: number;
+    text?: string;
+}
+
+export interface Point {
+    x: number;
+    y: number;
+}
diff --git a/components/draw/zoom-controls.tsx b/components/draw/zoom-controls.tsx
new file mode 100644
index 0000000..1101c09
--- /dev/null
+++ b/components/draw/zoom-controls.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import React from 'react';
+import { MinusCircle, Plus, Undo2, Redo2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface ZoomControlsProps {
+    scale: number;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetZoom: () => void;
+    handleUndo: () => void;
+    handleRedo: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
+}
+
+export function ZoomControls({ 
+    scale, zoomIn, zoomOut, resetZoom, handleUndo, handleRedo, canUndo, canRedo 
+}: ZoomControlsProps) {
+    return (
+        <div className="absolute bottom-6 left-6 z-50 flex items-center gap-3">
+            <div className="flex items-center bg-[#ecedf5] dark:bg-zinc-900 border border-transparent rounded-xl p-1 shadow-sm h-10">
+                <Button variant="ghost" size="icon" className="size-8 rounded-lg hover:bg-white/50" onClick={zoomOut}>
+                    <MinusCircle className="size-4" />
+                </Button>
+                <Button variant="ghost" className="h-8 px-2 text-xs font-bold w-12 hover:bg-white/50" onClick={resetZoom}>
+                    {Math.round(scale * 100)}%
+                </Button>
+                <Button variant="ghost" size="icon" className="size-8 rounded-lg hover:bg-white/50" onClick={zoomIn}>
+                    <Plus className="size-4" />
+                </Button>
+            </div>
+
+            <div className="flex items-center bg-[#ecedf5] dark:bg-zinc-900 border border-transparent rounded-xl p-1 shadow-sm h-10">
+                <Button variant="ghost" size="icon" className="size-8 rounded-lg hover:bg-white/50" onClick={handleUndo} disabled={!canUndo}>
+                    <Undo2 className="size-4" />
+                </Button>
+                <Button variant="ghost" size="icon" className="size-8 rounded-lg hover:bg-white/50" onClick={handleRedo} disabled={!canRedo}>
+                    <Redo2 className="size-4" />
+                </Button>
+            </div>
+        </div>
+    );
+}

From fb1ef677c959b71c429470fdbf7c8a0fa32f25dc Mon Sep 17 00:00:00 2001
From: Nishanth <nishanthkj12@gmail.com>
Date: Thu, 30 Apr 2026 23:31:02 +0530
Subject: [PATCH 11/18] feat: implement whiteboard drawing component with
 RoughJS rendering and element manipulation

---
 components/draw/draw-page.tsx   | 279 +++++++++++++++-----------------
 components/draw/style-panel.tsx | 150 ++++++++++++-----
 components/draw/types.ts        |   1 +
 3 files changed, 239 insertions(+), 191 deletions(-)

diff --git a/components/draw/draw-page.tsx b/components/draw/draw-page.tsx
index 430e419..1775f06 100644
--- a/components/draw/draw-page.tsx
+++ b/components/draw/draw-page.tsx
@@ -19,42 +19,64 @@ export function DrawPage() {
     const [roughCanvas, setRoughCanvas] = useState<any>(null);
     const [history, setHistory] = useState<Element[][]>([]);
     const [redoStack, setRedoStack] = useState<Element[][]>([]);
+    const [selectedElements, setSelectedElements] = useState<Element[]>([]);
     const [offset, setOffset] = useState({ x: 0, y: 0 });
     const [scale, setScale] = useState(1);
     const [startPanPos, setStartPanPos] = useState({ x: 0, y: 0 });
     const [isLocked, setIsLocked] = useState(false);
 
+    const getMousePos = (e: React.MouseEvent) => {
+        const rect = canvasRef.current!.getBoundingClientRect();
+        return {
+            x: (e.clientX - rect.left - offset.x) / scale,
+            y: (e.clientY - rect.top - offset.y) / scale
+        };
+    };
+
     // Initialize RoughJS
+    useEffect(() => {
+        if (typeof window !== 'undefined' && (window as any).rough && canvasRef.current && !roughCanvas) {
+            setRoughCanvas((window as any).rough.canvas(canvasRef.current));
+        }
+    }, [roughCanvas]);
+
     const onScriptLoad = () => {
         if (typeof window !== 'undefined' && (window as any).rough) {
             const canvas = canvasRef.current;
-            if (canvas) {
-                setRoughCanvas((window as any).rough.canvas(canvas));
-            }
+            if (canvas) setRoughCanvas((window as any).rough.canvas(canvas));
         }
     };
 
     useLayoutEffect(() => {
         const canvas = canvasRef.current;
-        if (!canvas) return;
+        if (!canvas || !roughCanvas) return;
 
         const ctx = canvas.getContext('2d');
         if (!ctx) return;
 
         ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-        if (!roughCanvas) return;
-
         ctx.save();
         ctx.translate(offset.x, offset.y);
         ctx.scale(scale, scale);
 
-        elements.forEach((element) => {
+        [...elements].sort((a, b) => a.zIndex - b.zIndex).forEach((element) => {
             drawElement(roughCanvas, ctx, element);
         });
 
+        selectedElements.forEach((element) => {
+            ctx.strokeStyle = '#3b82f6';
+            ctx.setLineDash([5, 5]);
+            ctx.lineWidth = 1;
+            const minX = Math.min(element.x1, element.x2) - 5;
+            const maxX = Math.max(element.x1, element.x2) + 5;
+            const minY = Math.min(element.y1, element.y2) - 5;
+            const maxY = Math.max(element.y1, element.y2) + 5;
+            ctx.strokeRect(minX, minY, maxX - minX, maxY - minY);
+            ctx.setLineDash([]);
+        });
+
         ctx.restore();
-    }, [elements, roughCanvas, offset, scale]);
+    }, [elements, roughCanvas, offset, scale, selectedElements]);
 
     useEffect(() => {
         const updateSize = () => {
@@ -80,21 +102,12 @@ export function DrawPage() {
         };
 
         switch (element.type) {
-            case 'line':
-                rc.draw(generator.line(element.x1, element.y1, element.x2, element.y2, options));
-                break;
-            case 'rectangle':
-                rc.draw(generator.rectangle(element.x1, element.y1, element.x2 - element.x1, element.y2 - element.y1, options));
-                break;
+            case 'line': rc.draw(generator.line(element.x1, element.y1, element.x2, element.y2, options)); break;
+            case 'rectangle': rc.draw(generator.rectangle(element.x1, element.y1, element.x2 - element.x1, element.y2 - element.y1, options)); break;
             case 'diamond':
                 const midX = (element.x1 + element.x2) / 2;
                 const midY = (element.y1 + element.y2) / 2;
-                rc.draw(generator.polygon([
-                    [midX, element.y1],
-                    [element.x2, midY],
-                    [midX, element.y2],
-                    [element.x1, midY]
-                ], options));
+                rc.draw(generator.polygon([[midX, element.y1], [element.x2, midY], [midX, element.y2], [element.x1, midY]], options));
                 break;
             case 'circle':
                 const width = element.x2 - element.x1;
@@ -114,187 +127,149 @@ export function DrawPage() {
                     rc.draw(generator.curve(stroke, options));
                 }
                 break;
+            case 'text':
+                ctx.font = `${20 * element.strokeWidth}px 'Outfit', sans-serif`;
+                ctx.fillStyle = element.color;
+                ctx.textBaseline = 'top';
+                ctx.fillText(element.text || '', element.x1, element.y1);
+                break;
         }
     };
 
-    const getMousePos = (e: React.MouseEvent) => {
-        const rect = canvasRef.current!.getBoundingClientRect();
-        return {
-            x: (e.clientX - rect.left - offset.x) / scale,
-            y: (e.clientY - rect.top - offset.y) / scale
-        };
+    const distance = (a: {x: number, y: number}, b: {x: number, y: number}) => Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
+
+    const getElementAtPosition = (x: number, y: number, elements: Element[]) => {
+        return [...elements].sort((a, b) => a.zIndex - b.zIndex).findLast(element => {
+            if (element.type === 'rectangle' || element.type === 'diamond') {
+                const minX = Math.min(element.x1, element.x2);
+                const maxX = Math.max(element.x1, element.x2);
+                const minY = Math.min(element.y1, element.y2);
+                const maxY = Math.max(element.y1, element.y2);
+                return x >= minX && x <= maxX && y >= minY && y <= maxY;
+            } else if (element.type === 'circle') {
+                const center = { x: (element.x1 + element.x2) / 2, y: (element.y1 + element.y2) / 2 };
+                const rx = Math.abs(element.x2 - element.x1) / 2;
+                const ry = Math.abs(element.y2 - element.y1) / 2;
+                const dx = (x - center.x) / rx;
+                const dy = (y - center.y) / ry;
+                return (dx * dx + dy * dy) <= 1;
+            } else if (element.type === 'line' || element.type === 'arrow') {
+                const a = { x: element.x1, y: element.y1 };
+                const b = { x: element.x2, y: element.y2 };
+                const offset = distance(a, b);
+                const dist = distance(a, {x, y}) + distance(b, {x, y});
+                return Math.abs(dist - offset) < 1;
+            } else if (element.type === 'freehand') {
+                return element.points?.some(p => distance(p, {x, y}) < 5);
+            } else if (element.type === 'text') {
+                return x >= element.x1 && x <= element.x1 + 100 && y >= element.y1 && y <= element.y1 + 30;
+            }
+            return false;
+        });
     };
 
     const handleMouseDown = (e: React.MouseEvent) => {
         if (!roughCanvas) return;
-        
+        const { x, y } = getMousePos(e);
+
         if (e.button === 1 || tool === 'hand') {
             setAction('panning');
             setStartPanPos({ x: e.clientX, y: e.clientY });
             return;
         }
 
-        const { x, y } = getMousePos(e);
+        if (tool === 'selection') {
+            const element = getElementAtPosition(x, y, elements);
+            if (element) {
+                setSelectedElements(e.shiftKey ? [...selectedElements, element] : [element]);
+                setAction('moving');
+                setStartPanPos({ x: e.clientX, y: e.clientY });
+            } else {
+                setSelectedElements([]);
+            }
+            return;
+        }
 
-        if (tool === 'selection') return;
+        if (tool === 'text') {
+            const text = prompt('Enter text:');
+            if (text) {
+                const newEl: Element = { id: Date.now(), x1: x, y1: y, x2: x, y2: y, type: 'text', color, strokeWidth, zIndex: elements.length, text };
+                setElements(prev => [...prev, newEl]);
+                setHistory(prev => [...prev, elements]);
+            }
+            return;
+        }
 
         setAction('drawing');
-        const id = Date.now();
-        const newElement: Element = { 
-            id, 
-            x1: x, 
-            y1: y, 
-            x2: x, 
-            y2: y, 
-            type: tool, 
-            color, 
-            strokeWidth, 
+        const newEl: Element = { 
+            id: Date.now(), x1: x, y1: y, x2: x, y2: y, type: tool, color, strokeWidth, zIndex: elements.length,
             points: tool === 'freehand' ? [{x, y}] : undefined 
         };
-        setElements(prev => [...prev, newElement]);
+        setElements(prev => [...prev, newEl]);
         setHistory(prev => [...prev, elements]);
         setRedoStack([]);
     };
 
     const handleMouseMove = (e: React.MouseEvent) => {
         if (action === 'none') return;
+        const { x, y } = getMousePos(e);
 
         if (action === 'panning') {
-            setOffset(prev => ({
-                x: prev.x + (e.clientX - startPanPos.x),
-                y: prev.y + (e.clientY - startPanPos.y)
-            }));
+            setOffset(prev => ({ x: prev.x + (e.clientX - startPanPos.x), y: prev.y + (e.clientY - startPanPos.y) }));
             setStartPanPos({ x: e.clientX, y: e.clientY });
             return;
         }
 
-        const { x, y } = getMousePos(e);
+        if (action === 'moving' && selectedElements.length > 0) {
+            const dx = (e.clientX - startPanPos.x) / scale;
+            const dy = (e.clientY - startPanPos.y) / scale;
+            const ids = selectedElements.map(el => el.id);
+            setElements(prev => prev.map(el => ids.includes(el.id) ? { ...el, x1: el.x1 + dx, y1: el.y1 + dy, x2: el.x2 + dx, y2: el.y2 + dy, points: el.points?.map(p => ({ x: p.x + dx, y: p.y + dy })) } : el));
+            setStartPanPos({ x: e.clientX, y: e.clientY });
+            return;
+        }
 
         if (action === 'drawing') {
-            const elementsCopy = [...elements];
-            const index = elementsCopy.length - 1;
-            const current = elementsCopy[index];
-            
-            if (current.type === 'freehand') {
-                current.points = [...(current.points || []), { x, y }];
-            } else {
-                current.x2 = x;
-                current.y2 = y;
-            }
-            setElements(elementsCopy);
+            const copy = [...elements];
+            const current = copy[copy.length - 1];
+            if (current.type === 'freehand') current.points = [...(current.points || []), { x, y }];
+            else { current.x2 = x; current.y2 = y; }
+            setElements(copy);
         }
     };
 
-    const handleMouseUp = () => {
-        setAction('none');
-    };
-
+    const handleMouseUp = () => setAction('none');
     const handleWheel = (e: React.WheelEvent) => {
-        if (e.ctrlKey || e.metaKey) {
+        if (e.ctrlKey) {
             e.preventDefault();
             const delta = e.deltaY > 0 ? 0.9 : 1.1;
             setScale(prev => Math.max(0.1, Math.min(10, prev * delta)));
         } else {
-            setOffset(prev => ({
-                x: prev.x - e.deltaX,
-                y: prev.y - e.deltaY
-            }));
+            setOffset(prev => ({ x: prev.x - e.deltaX, y: prev.y - e.deltaY }));
         }
     };
 
-    const handleUndo = () => {
-        if (history.length === 0) return;
-        const prev = history[history.length - 1];
-        setRedoStack(prevStack => [...prevStack, elements]);
-        setElements(prev);
-        setHistory(prevHistory => prevHistory.slice(0, -1));
-    };
-
-    const handleRedo = () => {
-        if (redoStack.length === 0) return;
-        const next = redoStack[redoStack.length - 1];
-        setHistory(prevHistory => [...prevHistory, elements]);
-        setElements(next);
-        setRedoStack(prevStack => prevStack.slice(0, -1));
-    };
-
-    const handleDownload = () => {
-        const canvas = canvasRef.current;
-        if (canvas) {
-            const link = document.createElement('a');
-            link.download = 'sketch.png';
-            link.href = canvas.toDataURL();
-            link.click();
-        }
-    };
-
-    const handleClear = () => {
-        setHistory(prev => [...prev, elements]);
-        setElements([]);
-    };
+    const handleUndo = () => { if (history.length) { setRedoStack(p => [...p, elements]); setElements(history[history.length - 1]); setHistory(h => h.slice(0, -1)); } };
+    const handleRedo = () => { if (redoStack.length) { setHistory(h => [...h, elements]); setElements(redoStack[redoStack.length - 1]); setRedoStack(r => r.slice(0, -1)); } };
+    const handleDownload = () => { const canvas = canvasRef.current; if (canvas) { const a = document.createElement('a'); a.download = 'sketch.png'; a.href = canvas.toDataURL(); a.click(); } };
+    const bringToFront = () => { const maxZ = Math.max(...elements.map(e => e.zIndex), 0); const ids = selectedElements.map(e => e.id); setElements(prev => prev.map(e => ids.includes(e.id) ? { ...e, zIndex: maxZ + 1 } : e)); };
+    const sendToBack = () => { const minZ = Math.min(...elements.map(e => e.zIndex), 0); const ids = selectedElements.map(e => e.id); setElements(prev => prev.map(e => ids.includes(e.id) ? { ...e, zIndex: minZ - 1 } : e)); };
+    const handleClear = () => { setHistory(h => [...h, elements]); setElements([]); };
 
-    const zoomIn = () => setScale(prev => Math.min(10, prev + 0.1));
-    const zoomOut = () => setScale(prev => Math.max(0.1, prev - 0.1));
+    const zoomIn = () => setScale(s => Math.min(10, s + 0.1));
+    const zoomOut = () => setScale(s => Math.max(0.1, s - 0.1));
     const resetZoom = () => setScale(1);
 
     return (
         <div className="flex flex-col h-full bg-[#f9f9fb] dark:bg-zinc-950 overflow-hidden font-sans select-none relative">
-            <Script 
-                src="https://cdn.jsdelivr.net/npm/roughjs@4.5.2/bundled/rough.js" 
-                onLoad={onScriptLoad}
-            />
-
+            <Script src="https://cdn.jsdelivr.net/npm/roughjs@4.5.2/bundled/rough.js" onLoad={onScriptLoad} />
             <ActionMenu handleDownload={handleDownload} />
-            
-            <Toolbar 
-                tool={tool} 
-                setTool={setTool} 
-                isLocked={isLocked} 
-                setIsLocked={setIsLocked} 
-            />
-
-            {/* Canvas Instructions (Bottom Center) */}
-            <div className="absolute top-16 left-1/2 -translate-x-1/2 z-40 text-[11px] font-medium text-zinc-400">
-                To move canvas, hold <span className="border px-1 rounded-sm bg-zinc-50 dark:bg-zinc-800">Scroll wheel</span> or <span className="border px-1 rounded-sm bg-zinc-50 dark:bg-zinc-800">Space</span> while dragging, or use the hand tool
-            </div>
-
-            <ZoomControls 
-                scale={scale}
-                zoomIn={zoomIn}
-                zoomOut={zoomOut}
-                resetZoom={resetZoom}
-                handleUndo={handleUndo}
-                handleRedo={handleRedo}
-                canUndo={history.length > 0}
-                canRedo={redoStack.length > 0}
-            />
-
-            <StylePanel 
-                color={color}
-                setColor={setColor}
-                strokeWidth={strokeWidth}
-                setStrokeWidth={setStrokeWidth}
-                handleClear={handleClear}
-            />
-
-            {/* Canvas Area */}
+            <Toolbar tool={tool} setTool={setTool} isLocked={isLocked} setIsLocked={setIsLocked} />
+            <ZoomControls scale={scale} zoomIn={zoomIn} zoomOut={zoomOut} resetZoom={resetZoom} handleUndo={handleUndo} handleRedo={handleRedo} canUndo={history.length > 0} canRedo={redoStack.length > 0} />
+            <StylePanel elements={elements} selectedElements={selectedElements} setSelectedElements={setSelectedElements} color={color} setColor={setColor} strokeWidth={strokeWidth} setStrokeWidth={setStrokeWidth} handleClear={handleClear} bringToFront={bringToFront} sendToBack={sendToBack} />
             <div className="flex-1 relative overflow-hidden bg-white dark:bg-zinc-950">
-                <div className="absolute inset-0 opacity-[0.03] dark:opacity-[0.05] pointer-events-none" 
-                     style={{ 
-                         backgroundImage: 'radial-gradient(circle, currentColor 1px, transparent 1px)', 
-                         backgroundSize: `${20 * scale}px ${20 * scale}px`,
-                         backgroundPosition: `${offset.x}px ${offset.y}px`
-                     }} 
-                />
-                
-                <canvas
-                    ref={canvasRef}
-                    onMouseDown={handleMouseDown}
-                    onMouseMove={handleMouseMove}
-                    onMouseUp={handleMouseUp}
-                    onWheel={handleWheel}
-                    className={`absolute inset-0 w-full h-full touch-none ${tool === 'hand' || action === 'panning' ? 'cursor-grab active:cursor-grabbing' : 'cursor-crosshair'}`}
-                />
+                <div className="absolute inset-0 opacity-[0.03] dark:opacity-[0.05] pointer-events-none" style={{ backgroundImage: 'radial-gradient(circle, currentColor 1px, transparent 1px)', backgroundSize: `${20 * scale}px ${20 * scale}px`, backgroundPosition: `${offset.x}px ${offset.y}px` }} />
+                <canvas ref={canvasRef} onMouseDown={handleMouseDown} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} onWheel={handleWheel} className={`absolute inset-0 w-full h-full touch-none ${tool === 'hand' || action === 'panning' ? 'cursor-grab active:cursor-grabbing' : 'cursor-crosshair'}`} />
             </div>
         </div>
     );
diff --git a/components/draw/style-panel.tsx b/components/draw/style-panel.tsx
index 12fe678..24eef4d 100644
--- a/components/draw/style-panel.tsx
+++ b/components/draw/style-panel.tsx
@@ -1,78 +1,150 @@
 "use client";
 
-import React from 'react';
-import { Palette, Trash2 } from 'lucide-react';
+import React, { useRef } from 'react';
+import { Palette, Trash2, ArrowUp, ArrowDown, Plus, Layers, MousePointer2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
+import { Input } from '@/components/ui/input';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Element } from './types';
 
-interface StylePanelProps {
+export interface StylePanelProps {
+    elements: Element[];
+    selectedElements: Element[];
+    setSelectedElements: (elements: Element[]) => void;
     color: string;
     setColor: (color: string) => void;
     strokeWidth: number;
     setStrokeWidth: (width: number) => void;
     handleClear: () => void;
+    bringToFront: () => void;
+    sendToBack: () => void;
 }
 
-export function StylePanel({ color, setColor, strokeWidth, setStrokeWidth, handleClear }: StylePanelProps) {
+const DEFAULT_COLORS = [
+    { name: 'Black', value: '#1e1e1e' },
+    { name: 'Red', value: '#ff4d4d' },
+    { name: 'Green', value: '#4dff4d' },
+    { name: 'Blue', value: '#4d4dff' },
+    { name: 'Yellow', value: '#ffff4d' },
+    { name: 'Purple', value: '#800080' },
+    { name: 'Cyan', value: '#00ffff' },
+];
+
+export function StylePanel({ 
+    elements, selectedElements, setSelectedElements, color, setColor, strokeWidth, setStrokeWidth, handleClear, bringToFront, sendToBack 
+}: StylePanelProps) {
+    const colorInputRef = useRef<HTMLInputElement>(null);
+    const isCustomColor = !DEFAULT_COLORS.some(c => c.value === color);
+
+    const handleDragStart = (e: React.MouseEvent) => {
+        if (e.target instanceof HTMLButtonElement || e.target instanceof HTMLInputElement || (e.target as any).closest('button')) return;
+        const el = e.currentTarget as HTMLElement;
+        const startX = e.clientX - el.offsetLeft;
+        const startY = e.clientY - el.offsetTop;
+        const onMouseMove = (moveEvent: MouseEvent) => {
+            const newLeft = moveEvent.clientX - startX;
+            const newTop = moveEvent.clientY - startY;
+            el.style.left = `${Math.max(0, Math.min(window.innerWidth - el.offsetWidth, newLeft))}px`;
+            el.style.top = `${Math.max(0, Math.min(window.innerHeight - el.offsetHeight, newTop))}px`;
+            el.style.right = 'auto';
+        };
+        const onMouseUp = () => {
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        };
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    };
+
+    const isSelected = (id: number) => selectedElements.some(el => el.id === id);
+    
     return (
         <div 
-            className="absolute top-24 right-6 z-50 flex flex-col gap-4 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 p-5 rounded-2xl shadow-2xl w-52 animate-in slide-in-from-right-4 duration-500 cursor-default active:cursor-grabbing"
-            onMouseDown={(e) => {
-                if (e.target instanceof HTMLButtonElement) return;
-                const el = e.currentTarget;
-                const startX = e.clientX - el.offsetLeft;
-                const startY = e.clientY - el.offsetTop;
-                
-                const onMouseMove = (moveEvent: MouseEvent) => {
-                    el.style.left = `${moveEvent.clientX - startX}px`;
-                    el.style.top = `${moveEvent.clientY - startY}px`;
-                    el.style.right = 'auto';
-                };
-                
-                const onMouseUp = () => {
-                    document.removeEventListener('mousemove', onMouseMove);
-                    document.removeEventListener('mouseup', onMouseUp);
-                };
-                
-                document.addEventListener('mousemove', onMouseMove);
-                document.addEventListener('mouseup', onMouseUp);
-            }}
+            className="absolute top-24 right-4 z-50 flex flex-col gap-4 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 p-3 rounded-2xl shadow-2xl w-52 animate-in slide-in-from-right-2 max-h-[85vh] overflow-y-auto"
+            onMouseDown={handleDragStart}
         >
             <div className="space-y-3">
                 <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
-                    <Palette className="size-3" /> Stroke Color
+                    <Palette className="size-3" /> Color
                 </label>
-                <div className="grid grid-cols-5 gap-2">
-                    {['#1e1e1e', '#ff4d4d', '#4dff4d', '#4d4dff', '#ffff4d'].map(c => (
+                <div className="grid grid-cols-4 gap-2">
+                    {DEFAULT_COLORS.map(c => (
                         <button 
-                            key={c}
-                            className={`size-6 rounded-md border-2 transition-all ${color === c ? 'border-primary scale-110 shadow-md' : 'border-transparent hover:border-zinc-200'}`}
-                            style={{ backgroundColor: c }}
-                            onClick={() => setColor(c)}
+                            key={c.value}
+                            className={`size-8 rounded-lg border-2 transition-all ${color === c.value ? 'border-primary scale-110 shadow-md' : 'border-transparent hover:border-zinc-200'}`}
+                            style={{ backgroundColor: c.value }}
+                            onClick={() => setColor(c.value)}
                         />
                     ))}
+                    <div className="relative size-8">
+                        <button 
+                            className={`size-full rounded-lg border-2 flex items-center justify-center transition-all ${isCustomColor ? 'border-primary scale-110 shadow-md' : 'border-transparent hover:border-zinc-200'}`}
+                            style={{ backgroundColor: isCustomColor ? color : '#f4f4f5' }}
+                            onClick={() => colorInputRef.current?.click()}
+                        >
+                            {isCustomColor ? null : <Plus className="size-4 text-zinc-400" />}
+                        </button>
+                        <input 
+                            ref={colorInputRef}
+                            type="color" 
+                            className="absolute inset-0 opacity-0 cursor-pointer w-full h-full" 
+                            value={color}
+                            onChange={(e) => setColor(e.target.value)}
+                        />
+                    </div>
                 </div>
             </div>
 
+            <Separator />
+
             <div className="space-y-3">
-                <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">Stroke Width</label>
-                <div className="flex flex-col gap-1.5 bg-zinc-100 dark:bg-zinc-800 p-1 rounded-lg">
+                <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">Thickness</label>
+                <div className="flex gap-2">
                     {[1, 2, 4].map(w => (
-                        <button 
+                        <Button 
                             key={w}
-                            className={`w-full h-8 text-[10px] font-bold rounded-md transition-all ${strokeWidth === w ? 'bg-white dark:bg-zinc-700 shadow-sm text-primary' : 'text-muted-foreground hover:text-foreground'}`}
+                            variant={strokeWidth === w ? "default" : "outline"}
+                            size="sm"
+                            className="flex-1 h-8 text-[10px]"
                             onClick={() => setStrokeWidth(w)}
                         >
                             {w === 1 ? 'Thin' : w === 2 ? 'Bold' : 'Extra'}
-                        </button>
+                        </Button>
                     ))}
                 </div>
             </div>
 
             <Separator />
 
-            <Button variant="ghost" size="sm" className="justify-start gap-2 h-9 text-xs font-medium text-destructive hover:bg-destructive/10" onClick={handleClear}>
-                <Trash2 className="size-3.5" /> Clear Canvas
+            <div className="space-y-3">
+                <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">Nodes ({elements.length})</label>
+                <ScrollArea className="h-32 border rounded-lg bg-zinc-50 dark:bg-zinc-950 p-1">
+                    <div className="flex flex-col gap-1">
+                        {[...elements].reverse().map(el => (
+                            <button
+                                key={el.id}
+                                onClick={() => setSelectedElements(isSelected(el.id) ? selectedElements.filter(s => s.id !== el.id) : [...selectedElements, el])}
+                                className={`flex items-center gap-2 px-2 py-1.5 rounded-md text-[10px] transition-all ${isSelected(el.id) ? 'bg-primary text-white' : 'hover:bg-zinc-200 dark:hover:bg-zinc-800'}`}
+                            >
+                                <span className="truncate flex-1 text-left">{el.type}</span>
+                                {isSelected(el.id) && <MousePointer2 className="size-2.5" />}
+                            </button>
+                        ))}
+                    </div>
+                </ScrollArea>
+            </div>
+
+            <Separator />
+
+            <div className="flex gap-2">
+                <Button variant="outline" size="sm" className="flex-1 text-[10px]" onClick={sendToBack} disabled={selectedElements.length === 0}>Back</Button>
+                <Button variant="outline" size="sm" className="flex-1 text-[10px]" onClick={bringToFront} disabled={selectedElements.length === 0}>Front</Button>
+            </div>
+
+            <Button variant="ghost" size="sm" className="w-full text-destructive text-[10px] hover:bg-destructive/10" onClick={handleClear}>
+                <Trash2 className="size-3.5 mr-2" /> Clear All
             </Button>
         </div>
     );
diff --git a/components/draw/types.ts b/components/draw/types.ts
index 21778b3..0634fc4 100644
--- a/components/draw/types.ts
+++ b/components/draw/types.ts
@@ -12,6 +12,7 @@ export interface Element {
     points?: { x: number, y: number }[];
     color: string;
     strokeWidth: number;
+    zIndex: number;
     text?: string;
 }
 

From 0166fdf53cf21d7714e44857e9b44aeacd3a4ee7 Mon Sep 17 00:00:00 2001
From: Nishanth <nishanthkj12@gmail.com>
Date: Thu, 30 Apr 2026 23:32:43 +0530
Subject: [PATCH 12/18] feat: implement canvas drawing component with toolbar
 and style configuration support

---
 components/draw/draw-page.tsx   | 82 ++++++++++++++++++++-------------
 components/draw/style-panel.tsx | 32 ++++++++-----
 2 files changed, 71 insertions(+), 43 deletions(-)

diff --git a/components/draw/draw-page.tsx b/components/draw/draw-page.tsx
index 1775f06..1076703 100644
--- a/components/draw/draw-page.tsx
+++ b/components/draw/draw-page.tsx
@@ -19,7 +19,7 @@ export function DrawPage() {
     const [roughCanvas, setRoughCanvas] = useState<any>(null);
     const [history, setHistory] = useState<Element[][]>([]);
     const [redoStack, setRedoStack] = useState<Element[][]>([]);
-    const [selectedElements, setSelectedElements] = useState<Element[]>([]);
+    const [selectedElementIds, setSelectedElementIds] = useState<number[]>([]);
     const [offset, setOffset] = useState({ x: 0, y: 0 });
     const [scale, setScale] = useState(1);
     const [startPanPos, setStartPanPos] = useState({ x: 0, y: 0 });
@@ -33,13 +33,6 @@ export function DrawPage() {
         };
     };
 
-    // Initialize RoughJS
-    useEffect(() => {
-        if (typeof window !== 'undefined' && (window as any).rough && canvasRef.current && !roughCanvas) {
-            setRoughCanvas((window as any).rough.canvas(canvasRef.current));
-        }
-    }, [roughCanvas]);
-
     const onScriptLoad = () => {
         if (typeof window !== 'undefined' && (window as any).rough) {
             const canvas = canvasRef.current;
@@ -47,6 +40,12 @@ export function DrawPage() {
         }
     };
 
+    useEffect(() => {
+        if (typeof window !== 'undefined' && (window as any).rough && canvasRef.current && !roughCanvas) {
+            setRoughCanvas((window as any).rough.canvas(canvasRef.current));
+        }
+    }, [roughCanvas]);
+
     useLayoutEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas || !roughCanvas) return;
@@ -59,24 +58,25 @@ export function DrawPage() {
         ctx.translate(offset.x, offset.y);
         ctx.scale(scale, scale);
 
-        [...elements].sort((a, b) => a.zIndex - b.zIndex).forEach((element) => {
+        const sortedElements = [...elements].sort((a, b) => a.zIndex - b.zIndex);
+        sortedElements.forEach((element) => {
             drawElement(roughCanvas, ctx, element);
-        });
-
-        selectedElements.forEach((element) => {
-            ctx.strokeStyle = '#3b82f6';
-            ctx.setLineDash([5, 5]);
-            ctx.lineWidth = 1;
-            const minX = Math.min(element.x1, element.x2) - 5;
-            const maxX = Math.max(element.x1, element.x2) + 5;
-            const minY = Math.min(element.y1, element.y2) - 5;
-            const maxY = Math.max(element.y1, element.y2) + 5;
-            ctx.strokeRect(minX, minY, maxX - minX, maxY - minY);
-            ctx.setLineDash([]);
+            
+            if (selectedElementIds.includes(element.id)) {
+                ctx.strokeStyle = '#3b82f6';
+                ctx.setLineDash([5, 5]);
+                ctx.lineWidth = 1;
+                const minX = Math.min(element.x1, element.x2) - 5;
+                const maxX = Math.max(element.x1, element.x2) + 5;
+                const minY = Math.min(element.y1, element.y2) - 5;
+                const maxY = Math.max(element.y1, element.y2) + 5;
+                ctx.strokeRect(minX, minY, maxX - minX, maxY - minY);
+                ctx.setLineDash([]);
+            }
         });
 
         ctx.restore();
-    }, [elements, roughCanvas, offset, scale, selectedElements]);
+    }, [elements, roughCanvas, offset, scale, selectedElementIds]);
 
     useEffect(() => {
         const updateSize = () => {
@@ -181,11 +181,11 @@ export function DrawPage() {
         if (tool === 'selection') {
             const element = getElementAtPosition(x, y, elements);
             if (element) {
-                setSelectedElements(e.shiftKey ? [...selectedElements, element] : [element]);
+                setSelectedElementIds(e.shiftKey ? [...selectedElementIds, element.id] : [element.id]);
                 setAction('moving');
                 setStartPanPos({ x: e.clientX, y: e.clientY });
             } else {
-                setSelectedElements([]);
+                setSelectedElementIds([]);
             }
             return;
         }
@@ -220,11 +220,10 @@ export function DrawPage() {
             return;
         }
 
-        if (action === 'moving' && selectedElements.length > 0) {
+        if (action === 'moving' && selectedElementIds.length > 0) {
             const dx = (e.clientX - startPanPos.x) / scale;
             const dy = (e.clientY - startPanPos.y) / scale;
-            const ids = selectedElements.map(el => el.id);
-            setElements(prev => prev.map(el => ids.includes(el.id) ? { ...el, x1: el.x1 + dx, y1: el.y1 + dy, x2: el.x2 + dx, y2: el.y2 + dy, points: el.points?.map(p => ({ x: p.x + dx, y: p.y + dy })) } : el));
+            setElements(prev => prev.map(el => selectedElementIds.includes(el.id) ? { ...el, x1: el.x1 + dx, y1: el.y1 + dy, x2: el.x2 + dx, y2: el.y2 + dy, points: el.points?.map(p => ({ x: p.x + dx, y: p.y + dy })) } : el));
             setStartPanPos({ x: e.clientX, y: e.clientY });
             return;
         }
@@ -252,10 +251,18 @@ export function DrawPage() {
     const handleUndo = () => { if (history.length) { setRedoStack(p => [...p, elements]); setElements(history[history.length - 1]); setHistory(h => h.slice(0, -1)); } };
     const handleRedo = () => { if (redoStack.length) { setHistory(h => [...h, elements]); setElements(redoStack[redoStack.length - 1]); setRedoStack(r => r.slice(0, -1)); } };
     const handleDownload = () => { const canvas = canvasRef.current; if (canvas) { const a = document.createElement('a'); a.download = 'sketch.png'; a.href = canvas.toDataURL(); a.click(); } };
-    const bringToFront = () => { const maxZ = Math.max(...elements.map(e => e.zIndex), 0); const ids = selectedElements.map(e => e.id); setElements(prev => prev.map(e => ids.includes(e.id) ? { ...e, zIndex: maxZ + 1 } : e)); };
-    const sendToBack = () => { const minZ = Math.min(...elements.map(e => e.zIndex), 0); const ids = selectedElements.map(e => e.id); setElements(prev => prev.map(e => ids.includes(e.id) ? { ...e, zIndex: minZ - 1 } : e)); };
-    const handleClear = () => { setHistory(h => [...h, elements]); setElements([]); };
+    
+    const bringToFront = () => { 
+        const maxZ = Math.max(...elements.map(e => e.zIndex), 0); 
+        setElements(prev => prev.map(e => selectedElementIds.includes(e.id) ? { ...e, zIndex: maxZ + 1 } : e)); 
+    };
+    
+    const sendToBack = () => { 
+        const minZ = Math.min(...elements.map(e => e.zIndex), 0); 
+        setElements(prev => prev.map(e => selectedElementIds.includes(e.id) ? { ...e, zIndex: minZ - 1 } : e)); 
+    };
 
+    const handleClear = () => { setHistory(h => [...h, elements]); setElements([]); };
     const zoomIn = () => setScale(s => Math.min(10, s + 0.1));
     const zoomOut = () => setScale(s => Math.max(0.1, s - 0.1));
     const resetZoom = () => setScale(1);
@@ -266,7 +273,20 @@ export function DrawPage() {
             <ActionMenu handleDownload={handleDownload} />
             <Toolbar tool={tool} setTool={setTool} isLocked={isLocked} setIsLocked={setIsLocked} />
             <ZoomControls scale={scale} zoomIn={zoomIn} zoomOut={zoomOut} resetZoom={resetZoom} handleUndo={handleUndo} handleRedo={handleRedo} canUndo={history.length > 0} canRedo={redoStack.length > 0} />
-            <StylePanel elements={elements} selectedElements={selectedElements} setSelectedElements={setSelectedElements} color={color} setColor={setColor} strokeWidth={strokeWidth} setStrokeWidth={setStrokeWidth} handleClear={handleClear} bringToFront={bringToFront} sendToBack={sendToBack} />
+            
+            <StylePanel 
+                elements={elements} 
+                selectedElementIds={selectedElementIds} 
+                setSelectedElementIds={setSelectedElementIds} 
+                color={color} 
+                setColor={setColor} 
+                strokeWidth={strokeWidth} 
+                setStrokeWidth={setStrokeWidth} 
+                handleClear={handleClear} 
+                bringToFront={bringToFront} 
+                sendToBack={sendToBack} 
+            />
+
             <div className="flex-1 relative overflow-hidden bg-white dark:bg-zinc-950">
                 <div className="absolute inset-0 opacity-[0.03] dark:opacity-[0.05] pointer-events-none" style={{ backgroundImage: 'radial-gradient(circle, currentColor 1px, transparent 1px)', backgroundSize: `${20 * scale}px ${20 * scale}px`, backgroundPosition: `${offset.x}px ${offset.y}px` }} />
                 <canvas ref={canvasRef} onMouseDown={handleMouseDown} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} onWheel={handleWheel} className={`absolute inset-0 w-full h-full touch-none ${tool === 'hand' || action === 'panning' ? 'cursor-grab active:cursor-grabbing' : 'cursor-crosshair'}`} />
diff --git a/components/draw/style-panel.tsx b/components/draw/style-panel.tsx
index 24eef4d..bde55f6 100644
--- a/components/draw/style-panel.tsx
+++ b/components/draw/style-panel.tsx
@@ -11,8 +11,8 @@ import { Element } from './types';
 
 export interface StylePanelProps {
     elements: Element[];
-    selectedElements: Element[];
-    setSelectedElements: (elements: Element[]) => void;
+    selectedElementIds: number[];
+    setSelectedElementIds: (ids: number[]) => void;
     color: string;
     setColor: (color: string) => void;
     strokeWidth: number;
@@ -33,7 +33,7 @@ const DEFAULT_COLORS = [
 ];
 
 export function StylePanel({ 
-    elements, selectedElements, setSelectedElements, color, setColor, strokeWidth, setStrokeWidth, handleClear, bringToFront, sendToBack 
+    elements, selectedElementIds, setSelectedElementIds, color, setColor, strokeWidth, setStrokeWidth, handleClear, bringToFront, sendToBack 
 }: StylePanelProps) {
     const colorInputRef = useRef<HTMLInputElement>(null);
     const isCustomColor = !DEFAULT_COLORS.some(c => c.value === color);
@@ -58,13 +58,14 @@ export function StylePanel({
         document.addEventListener('mouseup', onMouseUp);
     };
 
-    const isSelected = (id: number) => selectedElements.some(el => el.id === id);
+    const isSelected = (id: number) => selectedElementIds.includes(id);
     
     return (
         <div 
             className="absolute top-24 right-4 z-50 flex flex-col gap-4 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 p-3 rounded-2xl shadow-2xl w-52 animate-in slide-in-from-right-2 max-h-[85vh] overflow-y-auto"
             onMouseDown={handleDragStart}
         >
+            {/* Color Palette */}
             <div className="space-y-3">
                 <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
                     <Palette className="size-3" /> Color
@@ -99,6 +100,7 @@ export function StylePanel({
 
             <Separator />
 
+            {/* Thickness */}
             <div className="space-y-3">
                 <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">Thickness</label>
                 <div className="flex gap-2">
@@ -118,32 +120,38 @@ export function StylePanel({
 
             <Separator />
 
+            {/* Elements List */}
             <div className="space-y-3">
-                <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">Nodes ({elements.length})</label>
-                <ScrollArea className="h-32 border rounded-lg bg-zinc-50 dark:bg-zinc-950 p-1">
+                <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
+                    <Layers className="size-3" /> Nodes ({elements.length})
+                </label>
+                <ScrollArea className="h-40 border rounded-lg bg-zinc-50 dark:bg-zinc-950 p-1">
                     <div className="flex flex-col gap-1">
                         {[...elements].reverse().map(el => (
                             <button
                                 key={el.id}
-                                onClick={() => setSelectedElements(isSelected(el.id) ? selectedElements.filter(s => s.id !== el.id) : [...selectedElements, el])}
-                                className={`flex items-center gap-2 px-2 py-1.5 rounded-md text-[10px] transition-all ${isSelected(el.id) ? 'bg-primary text-white' : 'hover:bg-zinc-200 dark:hover:bg-zinc-800'}`}
+                                onClick={() => setSelectedElementIds(isSelected(el.id) ? selectedElementIds.filter(id => id !== el.id) : [...selectedElementIds, el.id])}
+                                className={`flex items-center gap-2 px-2 py-1.5 rounded-md text-[10px] transition-all ${isSelected(el.id) ? 'bg-primary text-white' : 'hover:bg-zinc-200 dark:hover:bg-zinc-800 text-muted-foreground'}`}
                             >
-                                <span className="truncate flex-1 text-left">{el.type}</span>
+                                <div className="size-2 rounded-full shrink-0" style={{ backgroundColor: el.color }} />
+                                <span className="truncate flex-1 text-left capitalize">{el.type}</span>
                                 {isSelected(el.id) && <MousePointer2 className="size-2.5" />}
                             </button>
                         ))}
+                        {elements.length === 0 && <div className="text-[9px] text-center py-4 text-zinc-400 italic">Canvas is empty</div>}
                     </div>
                 </ScrollArea>
             </div>
 
             <Separator />
 
+            {/* Layering */}
             <div className="flex gap-2">
-                <Button variant="outline" size="sm" className="flex-1 text-[10px]" onClick={sendToBack} disabled={selectedElements.length === 0}>Back</Button>
-                <Button variant="outline" size="sm" className="flex-1 text-[10px]" onClick={bringToFront} disabled={selectedElements.length === 0}>Front</Button>
+                <Button variant="outline" size="sm" className="flex-1 text-[10px] h-8" onClick={sendToBack} disabled={selectedElementIds.length === 0}>Send Back</Button>
+                <Button variant="outline" size="sm" className="flex-1 text-[10px] h-8" onClick={bringToFront} disabled={selectedElementIds.length === 0}>Bring Front</Button>
             </div>
 
-            <Button variant="ghost" size="sm" className="w-full text-destructive text-[10px] hover:bg-destructive/10" onClick={handleClear}>
+            <Button variant="ghost" size="sm" className="w-full text-destructive text-[10px] hover:bg-destructive/10 h-9" onClick={handleClear}>
                 <Trash2 className="size-3.5 mr-2" /> Clear All
             </Button>
         </div>

From 20938e15a3077e29cc53e45dfbb8fa2e88706ed5 Mon Sep 17 00:00:00 2001
From: Nishanth <nishanthkj12@gmail.com>
Date: Thu, 30 Apr 2026 23:44:26 +0530
Subject: [PATCH 13/18] feat: implement core drawing canvas functionality with
 toolbar and style configuration support

---
 components/draw/draw-page.tsx   | 151 +++++++++++++++++++++++++++++---
 components/draw/style-panel.tsx |  16 +++-
 2 files changed, 149 insertions(+), 18 deletions(-)

diff --git a/components/draw/draw-page.tsx b/components/draw/draw-page.tsx
index 1076703..9bc5763 100644
--- a/components/draw/draw-page.tsx
+++ b/components/draw/draw-page.tsx
@@ -12,7 +12,7 @@ import { ActionMenu } from './action-menu';
 export function DrawPage() {
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const [elements, setElements] = useState<Element[]>([]);
-    const [action, setAction] = useState<'none' | 'drawing' | 'moving' | 'resizing' | 'panning'>('none');
+    const [action, setAction] = useState<'none' | 'drawing' | 'moving' | 'resizing' | 'panning' | 'selecting'>('none');
     const [tool, setTool] = useState<ElementType>('freehand');
     const [color, setColor] = useState('#1e1e1e');
     const [strokeWidth, setStrokeWidth] = useState(2);
@@ -23,7 +23,9 @@ export function DrawPage() {
     const [offset, setOffset] = useState({ x: 0, y: 0 });
     const [scale, setScale] = useState(1);
     const [startPanPos, setStartPanPos] = useState({ x: 0, y: 0 });
+    const [selectionBox, setSelectionBox] = useState<{ x1: number, y1: number, x2: number, y2: number } | null>(null);
     const [isLocked, setIsLocked] = useState(false);
+    const [editingElement, setEditingElement] = useState<Element | null>(null);
 
     const getMousePos = (e: React.MouseEvent) => {
         const rect = canvasRef.current!.getBoundingClientRect();
@@ -75,8 +77,20 @@ export function DrawPage() {
             }
         });
 
+        if (selectionBox) {
+            ctx.strokeStyle = '#3b82f6';
+            ctx.fillStyle = 'rgba(59, 130, 246, 0.1)';
+            ctx.lineWidth = 1;
+            const x = Math.min(selectionBox.x1, selectionBox.x2);
+            const y = Math.min(selectionBox.y1, selectionBox.y2);
+            const width = Math.abs(selectionBox.x2 - selectionBox.x1);
+            const height = Math.abs(selectionBox.y2 - selectionBox.y1);
+            ctx.fillRect(x, y, width, height);
+            ctx.strokeRect(x, y, width, height);
+        }
+
         ctx.restore();
-    }, [elements, roughCanvas, offset, scale, selectedElementIds]);
+    }, [elements, roughCanvas, offset, scale, selectedElementIds, selectionBox]);
 
     useEffect(() => {
         const updateSize = () => {
@@ -131,7 +145,10 @@ export function DrawPage() {
                 ctx.font = `${20 * element.strokeWidth}px 'Outfit', sans-serif`;
                 ctx.fillStyle = element.color;
                 ctx.textBaseline = 'top';
-                ctx.fillText(element.text || '', element.x1, element.y1);
+                const lines = (element.text || '').split('\n');
+                lines.forEach((line, i) => {
+                    ctx.fillText(line, element.x1, element.y1 + i * (24 * element.strokeWidth));
+                });
                 break;
         }
     };
@@ -162,7 +179,9 @@ export function DrawPage() {
             } else if (element.type === 'freehand') {
                 return element.points?.some(p => distance(p, {x, y}) < 5);
             } else if (element.type === 'text') {
-                return x >= element.x1 && x <= element.x1 + 100 && y >= element.y1 && y <= element.y1 + 30;
+                const width = (element.text?.length || 0) * 10 * element.strokeWidth;
+                const height = 24 * element.strokeWidth;
+                return x >= element.x1 && x <= element.x1 + width && y >= element.y1 && y <= element.y1 + height;
             }
             return false;
         });
@@ -181,22 +200,31 @@ export function DrawPage() {
         if (tool === 'selection') {
             const element = getElementAtPosition(x, y, elements);
             if (element) {
-                setSelectedElementIds(e.shiftKey ? [...selectedElementIds, element.id] : [element.id]);
+                const isAlreadySelected = selectedElementIds.includes(element.id);
+                if (!isAlreadySelected && !e.shiftKey) {
+                    setSelectedElementIds([element.id]);
+                } else if (!isAlreadySelected && e.shiftKey) {
+                    setSelectedElementIds(prev => [...prev, element.id]);
+                }
                 setAction('moving');
                 setStartPanPos({ x: e.clientX, y: e.clientY });
             } else {
                 setSelectedElementIds([]);
+                setAction('selecting');
+                setSelectionBox({ x1: x, y1: y, x2: x, y2: y });
             }
             return;
         }
 
         if (tool === 'text') {
-            const text = prompt('Enter text:');
-            if (text) {
-                const newEl: Element = { id: Date.now(), x1: x, y1: y, x2: x, y2: y, type: 'text', color, strokeWidth, zIndex: elements.length, text };
-                setElements(prev => [...prev, newEl]);
-                setHistory(prev => [...prev, elements]);
-            }
+            const id = Date.now();
+            const newEl: Element = { 
+                id, x1: x, y1: y, x2: x, y2: y, 
+                type: 'text', color, strokeWidth, zIndex: elements.length, text: '' 
+            };
+            setElements(prev => [...prev, newEl]);
+            setEditingElement(newEl);
+            setAction('none');
             return;
         }
 
@@ -220,6 +248,11 @@ export function DrawPage() {
             return;
         }
 
+        if (action === 'selecting' && selectionBox) {
+            setSelectionBox({ ...selectionBox, x2: x, y2: y });
+            return;
+        }
+
         if (action === 'moving' && selectedElementIds.length > 0) {
             const dx = (e.clientX - startPanPos.x) / scale;
             const dy = (e.clientY - startPanPos.y) / scale;
@@ -237,9 +270,36 @@ export function DrawPage() {
         }
     };
 
-    const handleMouseUp = () => setAction('none');
+    const handleDoubleClick = (e: React.MouseEvent) => {
+        const { x, y } = getMousePos(e);
+        const element = getElementAtPosition(x, y, elements);
+        if (element && element.type === 'text') {
+            setEditingElement(element);
+            setSelectedElementIds([]);
+        }
+    };
+
+    const handleMouseUp = () => {
+        if (action === 'selecting' && selectionBox) {
+            const minX = Math.min(selectionBox.x1, selectionBox.x2);
+            const maxX = Math.max(selectionBox.x1, selectionBox.x2);
+            const minY = Math.min(selectionBox.y1, selectionBox.y2);
+            const maxY = Math.max(selectionBox.y1, selectionBox.y2);
+
+            const newlySelected = elements.filter(el => {
+                const elMinX = Math.min(el.x1, el.x2);
+                const elMaxX = Math.max(el.x1, el.x2);
+                const elMinY = Math.min(el.y1, el.y2);
+                const elMaxY = Math.max(el.y1, el.y2);
+                return elMinX >= minX && elMaxX <= maxX && elMinY >= minY && elMaxY <= maxY;
+            });
+            setSelectedElementIds(newlySelected.map(el => el.id));
+        }
+        setAction('none');
+        setSelectionBox(null);
+    };
     const handleWheel = (e: React.WheelEvent) => {
-        if (e.ctrlKey) {
+        if (e.ctrlKey || e.shiftKey) {
             e.preventDefault();
             const delta = e.deltaY > 0 ? 0.9 : 1.1;
             setScale(prev => Math.max(0.1, Math.min(10, prev * delta)));
@@ -263,6 +323,23 @@ export function DrawPage() {
     };
 
     const handleClear = () => { setHistory(h => [...h, elements]); setElements([]); };
+
+    const deleteSelected = () => {
+        if (selectedElementIds.length === 0) return;
+        setHistory(prev => [...prev, elements]);
+        setElements(prev => prev.filter(el => !selectedElementIds.includes(el.id)));
+        setSelectedElementIds([]);
+    };
+
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if ((e.key === 'Delete' || e.key === 'Backspace') && !editingElement) {
+                deleteSelected();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [selectedElementIds, editingElement, elements]);
     const zoomIn = () => setScale(s => Math.min(10, s + 0.1));
     const zoomOut = () => setScale(s => Math.max(0.1, s - 0.1));
     const resetZoom = () => setScale(1);
@@ -283,13 +360,59 @@ export function DrawPage() {
                 strokeWidth={strokeWidth} 
                 setStrokeWidth={setStrokeWidth} 
                 handleClear={handleClear} 
+                deleteSelected={deleteSelected}
                 bringToFront={bringToFront} 
                 sendToBack={sendToBack} 
             />
 
             <div className="flex-1 relative overflow-hidden bg-white dark:bg-zinc-950">
                 <div className="absolute inset-0 opacity-[0.03] dark:opacity-[0.05] pointer-events-none" style={{ backgroundImage: 'radial-gradient(circle, currentColor 1px, transparent 1px)', backgroundSize: `${20 * scale}px ${20 * scale}px`, backgroundPosition: `${offset.x}px ${offset.y}px` }} />
-                <canvas ref={canvasRef} onMouseDown={handleMouseDown} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} onWheel={handleWheel} className={`absolute inset-0 w-full h-full touch-none ${tool === 'hand' || action === 'panning' ? 'cursor-grab active:cursor-grabbing' : 'cursor-crosshair'}`} />
+                <canvas 
+                    ref={canvasRef} 
+                    onMouseDown={handleMouseDown} 
+                    onMouseMove={handleMouseMove} 
+                    onMouseUp={handleMouseUp} 
+                    onWheel={handleWheel}
+                    onDoubleClick={handleDoubleClick}
+                    className={`absolute inset-0 w-full h-full touch-none ${tool === 'hand' || action === 'panning' ? 'cursor-grab active:cursor-grabbing' : 'cursor-crosshair'}`} 
+                />
+
+                {editingElement && (() => {
+                    const currentEl = elements.find(el => el.id === editingElement.id);
+                    if (!currentEl) return null;
+                    return (
+                        <textarea
+                            autoFocus
+                            className="absolute z-[100] bg-white/90 dark:bg-zinc-800/90 border-2 border-primary/40 rounded-md shadow-2xl p-2 m-0 resize-none overflow-hidden whitespace-pre-wrap font-sans backdrop-blur-md transition-all pointer-events-auto"
+                            style={{
+                                left: currentEl.x1 * scale + offset.x - 8,
+                                top: currentEl.y1 * scale + offset.y - 8,
+                                minWidth: '150px',
+                                width: `${Math.max(150, (currentEl.text?.length || 0) * 12 * scale)}px`,
+                                height: 'auto',
+                                minHeight: '50px',
+                                fontSize: `${22 * currentEl.strokeWidth * scale}px`,
+                                color: currentEl.color,
+                            }}
+                            value={currentEl.text || ''}
+                            onChange={(e) => {
+                                const newText = e.target.value;
+                                setElements(prev => prev.map(el => 
+                                    el.id === currentEl.id ? { ...el, text: newText } : el
+                                ));
+                                e.target.style.height = 'auto';
+                                e.target.style.height = e.target.scrollHeight + 'px';
+                            }}
+                            onBlur={() => setEditingElement(null)}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter' && !e.shiftKey) {
+                                    e.preventDefault();
+                                    setEditingElement(null);
+                                }
+                            }}
+                        />
+                    );
+                })()}
             </div>
         </div>
     );
diff --git a/components/draw/style-panel.tsx b/components/draw/style-panel.tsx
index bde55f6..6ae6985 100644
--- a/components/draw/style-panel.tsx
+++ b/components/draw/style-panel.tsx
@@ -18,6 +18,7 @@ export interface StylePanelProps {
     strokeWidth: number;
     setStrokeWidth: (width: number) => void;
     handleClear: () => void;
+    deleteSelected: () => void;
     bringToFront: () => void;
     sendToBack: () => void;
 }
@@ -33,7 +34,7 @@ const DEFAULT_COLORS = [
 ];
 
 export function StylePanel({ 
-    elements, selectedElementIds, setSelectedElementIds, color, setColor, strokeWidth, setStrokeWidth, handleClear, bringToFront, sendToBack 
+    elements, selectedElementIds, setSelectedElementIds, color, setColor, strokeWidth, setStrokeWidth, handleClear, deleteSelected, bringToFront, sendToBack 
 }: StylePanelProps) {
     const colorInputRef = useRef<HTMLInputElement>(null);
     const isCustomColor = !DEFAULT_COLORS.some(c => c.value === color);
@@ -151,9 +152,16 @@ export function StylePanel({
                 <Button variant="outline" size="sm" className="flex-1 text-[10px] h-8" onClick={bringToFront} disabled={selectedElementIds.length === 0}>Bring Front</Button>
             </div>
 
-            <Button variant="ghost" size="sm" className="w-full text-destructive text-[10px] hover:bg-destructive/10 h-9" onClick={handleClear}>
-                <Trash2 className="size-3.5 mr-2" /> Clear All
-            </Button>
+            {/* Actions */}
+            <div className="flex flex-col gap-2">
+                <Button variant="ghost" size="sm" className="w-full text-destructive text-[10px] hover:bg-destructive/10 h-9" onClick={deleteSelected} disabled={selectedElementIds.length === 0}>
+                    <Trash2 className="size-3.5 mr-2" /> Delete Selected
+                </Button>
+
+                <Button variant="ghost" size="sm" className="w-full text-zinc-400 text-[10px] hover:bg-zinc-100 dark:hover:bg-zinc-800 h-9" onClick={handleClear}>
+                    Clear All
+                </Button>
+            </div>
         </div>
     );
 }

From 732b8bcb426be94954666cd941718fa28699370c Mon Sep 17 00:00:00 2001
From: Nishanth <nishanthkj12@gmail.com>
Date: Thu, 30 Apr 2026 23:57:50 +0530
Subject: [PATCH 14/18] feat: implement canvas-based drawing page with element
 selection, manipulation, and rendering support

---
 components/draw/draw-page.tsx   | 181 +++++++++++++++++++++++---------
 components/draw/style-panel.tsx |  25 ++++-
 components/draw/types.ts        |   2 +-
 3 files changed, 154 insertions(+), 54 deletions(-)

diff --git a/components/draw/draw-page.tsx b/components/draw/draw-page.tsx
index 9bc5763..78030ab 100644
--- a/components/draw/draw-page.tsx
+++ b/components/draw/draw-page.tsx
@@ -24,6 +24,7 @@ export function DrawPage() {
     const [scale, setScale] = useState(1);
     const [startPanPos, setStartPanPos] = useState({ x: 0, y: 0 });
     const [selectionBox, setSelectionBox] = useState<{ x1: number, y1: number, x2: number, y2: number } | null>(null);
+    const [resizeHandle, setResizeHandle] = useState<{ id: number, type: string } | null>(null);
     const [isLocked, setIsLocked] = useState(false);
     const [editingElement, setEditingElement] = useState<Element | null>(null);
 
@@ -65,15 +66,32 @@ export function DrawPage() {
             drawElement(roughCanvas, ctx, element);
             
             if (selectedElementIds.includes(element.id)) {
+                const minX = Math.min(element.x1, element.x2);
+                const maxX = Math.max(element.x1, element.x2);
+                const minY = Math.min(element.y1, element.y2);
+                const maxY = Math.max(element.y1, element.y2);
+                
                 ctx.strokeStyle = '#3b82f6';
                 ctx.setLineDash([5, 5]);
                 ctx.lineWidth = 1;
-                const minX = Math.min(element.x1, element.x2) - 5;
-                const maxX = Math.max(element.x1, element.x2) + 5;
-                const minY = Math.min(element.y1, element.y2) - 5;
-                const maxY = Math.max(element.y1, element.y2) + 5;
-                ctx.strokeRect(minX, minY, maxX - minX, maxY - minY);
+                ctx.strokeRect(minX - 5, minY - 5, (maxX - minX) + 10, (maxY - minY) + 10);
                 ctx.setLineDash([]);
+
+                // Draw handles
+                ctx.fillStyle = 'white';
+                ctx.strokeStyle = '#3b82f6';
+                ctx.lineWidth = 1.5;
+                const handleSize = 8 / scale;
+                const handles = [
+                    { x: minX, y: minY }, { x: maxX, y: minY },
+                    { x: minX, y: maxY }, { x: maxX, y: maxY },
+                    { x: (minX + maxX) / 2, y: minY }, { x: (minX + maxX) / 2, y: maxY },
+                    { x: minX, y: (minY + maxY) / 2 }, { x: maxX, y: (minY + maxY) / 2 },
+                ];
+                handles.forEach(h => {
+                    ctx.fillRect(h.x - handleSize / 2, h.y - handleSize / 2, handleSize, handleSize);
+                    ctx.strokeRect(h.x - handleSize / 2, h.y - handleSize / 2, handleSize, handleSize);
+                });
             }
         });
 
@@ -142,12 +160,12 @@ export function DrawPage() {
                 }
                 break;
             case 'text':
-                ctx.font = `${20 * element.strokeWidth}px 'Outfit', sans-serif`;
+                ctx.font = `${32 * element.strokeWidth}px 'Outfit', sans-serif`;
                 ctx.fillStyle = element.color;
                 ctx.textBaseline = 'top';
                 const lines = (element.text || '').split('\n');
                 lines.forEach((line, i) => {
-                    ctx.fillText(line, element.x1, element.y1 + i * (24 * element.strokeWidth));
+                    ctx.fillText(line, element.x1, element.y1 + i * (38 * element.strokeWidth));
                 });
                 break;
         }
@@ -155,6 +173,36 @@ export function DrawPage() {
 
     const distance = (a: {x: number, y: number}, b: {x: number, y: number}) => Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
 
+    const getHandleAtPosition = (x: number, y: number, elements: Element[]) => {
+        for (const id of selectedElementIds) {
+            const el = elements.find(e => e.id === id);
+            if (!el) continue;
+
+            const minX = Math.min(el.x1, el.x2);
+            const maxX = Math.max(el.x1, el.x2);
+            const minY = Math.min(el.y1, el.y2);
+            const maxY = Math.max(el.y1, el.y2);
+
+            const handles = [
+                { x: minX, y: minY, type: 'nw' },
+                { x: maxX, y: minY, type: 'ne' },
+                { x: minX, y: maxY, type: 'sw' },
+                { x: maxX, y: maxY, type: 'se' },
+                { x: (minX + maxX) / 2, y: minY, type: 'n' },
+                { x: (minX + maxX) / 2, y: maxY, type: 's' },
+                { x: minX, y: (minY + maxY) / 2, type: 'w' },
+                { x: maxX, y: (minY + maxY) / 2, type: 'e' },
+            ];
+
+            for (const h of handles) {
+                if (Math.abs(x - h.x) < 8 / scale && Math.abs(y - h.y) < 8 / scale) {
+                    return { id, type: h.type };
+                }
+            }
+        }
+        return null;
+    };
+
     const getElementAtPosition = (x: number, y: number, elements: Element[]) => {
         return [...elements].sort((a, b) => a.zIndex - b.zIndex).findLast(element => {
             if (element.type === 'rectangle' || element.type === 'diamond') {
@@ -179,8 +227,8 @@ export function DrawPage() {
             } else if (element.type === 'freehand') {
                 return element.points?.some(p => distance(p, {x, y}) < 5);
             } else if (element.type === 'text') {
-                const width = (element.text?.length || 0) * 10 * element.strokeWidth;
-                const height = 24 * element.strokeWidth;
+                const width = Math.max(50, (element.text?.length || 0) * 12 * element.strokeWidth);
+                const height = 30 * element.strokeWidth;
                 return x >= element.x1 && x <= element.x1 + width && y >= element.y1 && y <= element.y1 + height;
             }
             return false;
@@ -188,7 +236,6 @@ export function DrawPage() {
     };
 
     const handleMouseDown = (e: React.MouseEvent) => {
-        if (!roughCanvas) return;
         const { x, y } = getMousePos(e);
 
         if (e.button === 1 || tool === 'hand') {
@@ -197,45 +244,58 @@ export function DrawPage() {
             return;
         }
 
-        if (tool === 'selection') {
-            const element = getElementAtPosition(x, y, elements);
-            if (element) {
-                const isAlreadySelected = selectedElementIds.includes(element.id);
-                if (!isAlreadySelected && !e.shiftKey) {
-                    setSelectedElementIds([element.id]);
-                } else if (!isAlreadySelected && e.shiftKey) {
-                    setSelectedElementIds(prev => [...prev, element.id]);
+        switch (tool) {
+            case 'selection': {
+                const handle = getHandleAtPosition(x, y, elements);
+                if (handle) {
+                    setResizeHandle(handle);
+                    setAction('resizing');
+                    setStartPanPos({ x: e.clientX, y: e.clientY });
+                    return;
                 }
-                setAction('moving');
-                setStartPanPos({ x: e.clientX, y: e.clientY });
-            } else {
-                setSelectedElementIds([]);
-                setAction('selecting');
-                setSelectionBox({ x1: x, y1: y, x2: x, y2: y });
-            }
-            return;
-        }
 
-        if (tool === 'text') {
-            const id = Date.now();
-            const newEl: Element = { 
-                id, x1: x, y1: y, x2: x, y2: y, 
-                type: 'text', color, strokeWidth, zIndex: elements.length, text: '' 
-            };
-            setElements(prev => [...prev, newEl]);
-            setEditingElement(newEl);
-            setAction('none');
-            return;
+                const element = getElementAtPosition(x, y, elements);
+                if (element) {
+                    const isAlreadySelected = selectedElementIds.includes(element.id);
+                    if (!isAlreadySelected && !e.shiftKey) {
+                        setSelectedElementIds([element.id]);
+                    } else if (!isAlreadySelected && e.shiftKey) {
+                        setSelectedElementIds(prev => [...prev, element.id]);
+                    }
+                    setAction('moving');
+                    setStartPanPos({ x: e.clientX, y: e.clientY });
+                } else {
+                    setSelectedElementIds([]);
+                    setAction('selecting');
+                    setSelectionBox({ x1: x, y1: y, x2: x, y2: y });
+                }
+                break;
+            }
+            case 'text': {
+                const id = Date.now();
+                const newEl: Element = { 
+                    id, x1: x, y1: y, x2: x + 100, y2: y + 40, 
+                    type: 'text', color, strokeWidth, zIndex: elements.length, text: '' 
+                };
+                setElements(prev => [...prev, newEl]);
+                setEditingElement(newEl);
+                setAction('none');
+                break;
+            }
+            default: {
+                if (!roughCanvas) return;
+                setAction('drawing');
+                const id = Date.now();
+                const newEl: Element = { 
+                    id, x1: x, y1: y, x2: x, y2: y, type: tool, color, strokeWidth, zIndex: elements.length,
+                    points: tool === 'freehand' ? [{x, y}] : undefined 
+                };
+                setElements(prev => [...prev, newEl]);
+                setHistory(prev => [...prev, elements]);
+                setRedoStack([]);
+                break;
+            }
         }
-
-        setAction('drawing');
-        const newEl: Element = { 
-            id: Date.now(), x1: x, y1: y, x2: x, y2: y, type: tool, color, strokeWidth, zIndex: elements.length,
-            points: tool === 'freehand' ? [{x, y}] : undefined 
-        };
-        setElements(prev => [...prev, newEl]);
-        setHistory(prev => [...prev, elements]);
-        setRedoStack([]);
     };
 
     const handleMouseMove = (e: React.MouseEvent) => {
@@ -253,6 +313,19 @@ export function DrawPage() {
             return;
         }
 
+        if (action === 'resizing' && resizeHandle) {
+            setElements(prev => prev.map(e => {
+                if (e.id !== resizeHandle.id) return e;
+                const newEl = { ...e };
+                if (resizeHandle.type.includes('e')) newEl.x2 = x;
+                if (resizeHandle.type.includes('w')) newEl.x1 = x;
+                if (resizeHandle.type.includes('s')) newEl.y2 = y;
+                if (resizeHandle.type.includes('n')) newEl.y1 = y;
+                return newEl;
+            }));
+            return;
+        }
+
         if (action === 'moving' && selectedElementIds.length > 0) {
             const dx = (e.clientX - startPanPos.x) / scale;
             const dy = (e.clientY - startPanPos.y) / scale;
@@ -297,7 +370,9 @@ export function DrawPage() {
         }
         setAction('none');
         setSelectionBox(null);
+        setResizeHandle(null);
     };
+
     const handleWheel = (e: React.WheelEvent) => {
         if (e.ctrlKey || e.shiftKey) {
             e.preventDefault();
@@ -312,6 +387,10 @@ export function DrawPage() {
     const handleRedo = () => { if (redoStack.length) { setHistory(h => [...h, elements]); setElements(redoStack[redoStack.length - 1]); setRedoStack(r => r.slice(0, -1)); } };
     const handleDownload = () => { const canvas = canvasRef.current; if (canvas) { const a = document.createElement('a'); a.download = 'sketch.png'; a.href = canvas.toDataURL(); a.click(); } };
     
+    const updateElement = (id: number, updates: Partial<Element>) => {
+        setElements(prev => prev.map(el => el.id === id ? { ...el, ...updates } : el));
+    };
+
     const bringToFront = () => { 
         const maxZ = Math.max(...elements.map(e => e.zIndex), 0); 
         setElements(prev => prev.map(e => selectedElementIds.includes(e.id) ? { ...e, zIndex: maxZ + 1 } : e)); 
@@ -340,6 +419,7 @@ export function DrawPage() {
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
     }, [selectedElementIds, editingElement, elements]);
+
     const zoomIn = () => setScale(s => Math.min(10, s + 0.1));
     const zoomOut = () => setScale(s => Math.max(0.1, s - 0.1));
     const resetZoom = () => setScale(1);
@@ -360,6 +440,7 @@ export function DrawPage() {
                 strokeWidth={strokeWidth} 
                 setStrokeWidth={setStrokeWidth} 
                 handleClear={handleClear} 
+                updateElement={updateElement}
                 deleteSelected={deleteSelected}
                 bringToFront={bringToFront} 
                 sendToBack={sendToBack} 
@@ -387,11 +468,11 @@ export function DrawPage() {
                             style={{
                                 left: currentEl.x1 * scale + offset.x - 8,
                                 top: currentEl.y1 * scale + offset.y - 8,
-                                minWidth: '150px',
-                                width: `${Math.max(150, (currentEl.text?.length || 0) * 12 * scale)}px`,
+                                minWidth: '200px',
+                                width: `${Math.max(200, (currentEl.text?.length || 0) * 18 * scale)}px`,
                                 height: 'auto',
-                                minHeight: '50px',
-                                fontSize: `${22 * currentEl.strokeWidth * scale}px`,
+                                minHeight: '60px',
+                                fontSize: `${32 * currentEl.strokeWidth * scale}px`,
                                 color: currentEl.color,
                             }}
                             value={currentEl.text || ''}
diff --git a/components/draw/style-panel.tsx b/components/draw/style-panel.tsx
index 6ae6985..24adfd0 100644
--- a/components/draw/style-panel.tsx
+++ b/components/draw/style-panel.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useRef } from 'react';
-import { Palette, Trash2, ArrowUp, ArrowDown, Plus, Layers, MousePointer2 } from 'lucide-react';
+import { Palette, Trash2, ArrowUp, ArrowDown, Plus, Layers, MousePointer2, Type } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
 import { Input } from '@/components/ui/input';
@@ -18,6 +18,7 @@ export interface StylePanelProps {
     strokeWidth: number;
     setStrokeWidth: (width: number) => void;
     handleClear: () => void;
+    updateElement: (id: number, updates: Partial<Element>) => void;
     deleteSelected: () => void;
     bringToFront: () => void;
     sendToBack: () => void;
@@ -34,7 +35,7 @@ const DEFAULT_COLORS = [
 ];
 
 export function StylePanel({ 
-    elements, selectedElementIds, setSelectedElementIds, color, setColor, strokeWidth, setStrokeWidth, handleClear, deleteSelected, bringToFront, sendToBack 
+    elements, selectedElementIds, setSelectedElementIds, color, setColor, strokeWidth, setStrokeWidth, handleClear, updateElement, deleteSelected, bringToFront, sendToBack 
 }: StylePanelProps) {
     const colorInputRef = useRef<HTMLInputElement>(null);
     const isCustomColor = !DEFAULT_COLORS.some(c => c.value === color);
@@ -60,10 +61,11 @@ export function StylePanel({
     };
 
     const isSelected = (id: number) => selectedElementIds.includes(id);
+    const selectedEl = selectedElementIds.length === 1 ? elements.find(el => el.id === selectedElementIds[0]) : null;
     
     return (
         <div 
-            className="absolute top-24 right-4 z-50 flex flex-col gap-4 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 p-3 rounded-2xl shadow-2xl w-52 animate-in slide-in-from-right-2 max-h-[85vh] overflow-y-auto"
+            className="absolute top-24 right-2 z-50 flex flex-col gap-4 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 p-3 rounded-2xl shadow-2xl w-52 animate-in slide-in-from-right-2 max-h-[85vh] overflow-y-auto"
             onMouseDown={handleDragStart}
         >
             {/* Color Palette */}
@@ -121,6 +123,23 @@ export function StylePanel({
 
             <Separator />
 
+            {/* Text Editor (Visible when one text node is selected) */}
+            {selectedEl?.type === 'text' && (
+                <div className="space-y-3">
+                    <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
+                        <Type className="size-3" /> Text Content
+                    </label>
+                    <textarea 
+                        className="w-full h-20 bg-zinc-50 dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-lg p-2 text-[11px] resize-none focus:ring-1 focus:ring-primary outline-none"
+                        value={selectedEl.text || ''}
+                        onChange={(e) => updateElement(selectedEl.id, { text: e.target.value })}
+                        placeholder="Type something..."
+                    />
+                </div>
+            )}
+
+            <Separator />
+
             {/* Elements List */}
             <div className="space-y-3">
                 <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
diff --git a/components/draw/types.ts b/components/draw/types.ts
index 0634fc4..b6a78c6 100644
--- a/components/draw/types.ts
+++ b/components/draw/types.ts
@@ -1,6 +1,6 @@
 import { LucideIcon } from "lucide-react";
 
-export type ElementType = 'selection' | 'hand' | 'rectangle' | 'diamond' | 'circle' | 'arrow' | 'line' | 'freehand' | 'eraser' | 'text';
+export type ElementType = 'selection' | 'hand' | 'rectangle' | 'diamond' | 'circle' | 'arrow' | 'line' | 'freehand' | 'eraser' | 'text' | 'image';
 
 export interface Element {
     id: number;

From d94cf661bb85bd81f2bf762a38ce38f2e518c3eb Mon Sep 17 00:00:00 2001
From: Nishanth <nishanthkj12@gmail.com>
Date: Fri, 1 May 2026 00:01:17 +0530
Subject: [PATCH 15/18] feat: implement initial canvas drawing component with
 element rendering and selection support

---
 components/draw/draw-page.tsx | 54 +++++++++++++++++++++++++++++------
 1 file changed, 46 insertions(+), 8 deletions(-)

diff --git a/components/draw/draw-page.tsx b/components/draw/draw-page.tsx
index 78030ab..c649f3f 100644
--- a/components/draw/draw-page.tsx
+++ b/components/draw/draw-page.tsx
@@ -66,10 +66,17 @@ export function DrawPage() {
             drawElement(roughCanvas, ctx, element);
             
             if (selectedElementIds.includes(element.id)) {
-                const minX = Math.min(element.x1, element.x2);
-                const maxX = Math.max(element.x1, element.x2);
-                const minY = Math.min(element.y1, element.y2);
-                const maxY = Math.max(element.y1, element.y2);
+                let minX = Math.min(element.x1, element.x2);
+                let maxX = Math.max(element.x1, element.x2);
+                let minY = Math.min(element.y1, element.y2);
+                let maxY = Math.max(element.y1, element.y2);
+
+                if (element.type === 'freehand' && element.points && element.points.length > 0) {
+                    minX = Math.min(...element.points.map(p => p.x));
+                    maxX = Math.max(...element.points.map(p => p.x));
+                    minY = Math.min(...element.points.map(p => p.y));
+                    maxY = Math.max(...element.points.map(p => p.y));
+                }
                 
                 ctx.strokeStyle = '#3b82f6';
                 ctx.setLineDash([5, 5]);
@@ -317,10 +324,41 @@ export function DrawPage() {
             setElements(prev => prev.map(e => {
                 if (e.id !== resizeHandle.id) return e;
                 const newEl = { ...e };
-                if (resizeHandle.type.includes('e')) newEl.x2 = x;
-                if (resizeHandle.type.includes('w')) newEl.x1 = x;
-                if (resizeHandle.type.includes('s')) newEl.y2 = y;
-                if (resizeHandle.type.includes('n')) newEl.y1 = y;
+                
+                // For freehand, we need to scale all points
+                if (e.type === 'freehand' && e.points) {
+                    const minX = Math.min(...e.points.map(p => p.x));
+                    const maxX = Math.max(...e.points.map(p => p.x));
+                    const minY = Math.min(...e.points.map(p => p.y));
+                    const maxY = Math.max(...e.points.map(p => p.y));
+                    const oldWidth = maxX - minX || 1;
+                    const oldHeight = maxY - minY || 1;
+
+                    let newMinX = minX, newMaxX = maxX, newMinY = minY, newMaxY = maxY;
+                    if (resizeHandle.type.includes('e')) newMaxX = x;
+                    if (resizeHandle.type.includes('w')) newMinX = x;
+                    if (resizeHandle.type.includes('s')) newMaxY = y;
+                    if (resizeHandle.type.includes('n')) newMinY = y;
+
+                    const scaleX = (newMaxX - newMinX) / oldWidth;
+                    const scaleY = (newMaxY - newMinY) / oldHeight;
+
+                    newEl.points = e.points.map(p => ({
+                        x: newMinX + (p.x - minX) * scaleX,
+                        y: newMinY + (p.y - minY) * scaleY
+                    }));
+                    
+                    // Update bounding box for selection highlight
+                    newEl.x1 = newMinX;
+                    newEl.y1 = newMinY;
+                    newEl.x2 = newMaxX;
+                    newEl.y2 = newMaxY;
+                } else {
+                    if (resizeHandle.type.includes('e')) newEl.x2 = x;
+                    if (resizeHandle.type.includes('w')) newEl.x1 = x;
+                    if (resizeHandle.type.includes('s')) newEl.y2 = y;
+                    if (resizeHandle.type.includes('n')) newEl.y1 = y;
+                }
                 return newEl;
             }));
             return;

From c9091bbd7f53f7bf899efd67b5f3c57ad75451d5 Mon Sep 17 00:00:00 2001
From: Nishanth <nishanthkj12@gmail.com>
Date: Fri, 1 May 2026 00:38:46 +0530
Subject: [PATCH 16/18] lint

---
 app/documentation/page.tsx                   |   2 +-
 app/page.tsx                                 |   2 +-
 app/settings/page.tsx                        |   5 +-
 components/crypto/blockchain-page.tsx        | 203 ++++---
 components/crypto/uuid-page.tsx              |  14 +-
 components/draw/draw-page.tsx                | 586 +++++++++----------
 components/draw/style-panel.tsx              |   6 +-
 components/draw/toolbar.tsx                  |   2 +-
 components/draw/types.ts                     |  23 +-
 components/dummy/dummy-page.tsx              |   8 +-
 components/editor/editor-container.tsx       | 310 +++++-----
 components/layout/app-sidebar.tsx            |   1 -
 components/layout/client-layout.tsx          |  24 +-
 components/layout/navbar.tsx                 |  11 +-
 components/time/TimePage.tsx                 |   3 +-
 components/time/epoch-converter.tsx          | 100 ++--
 components/view/viewer-container.tsx         |  27 +-
 components/workspace/workspace-container.tsx |  11 +-
 hooks/use-local-storage.ts                   |   2 +-
 19 files changed, 684 insertions(+), 656 deletions(-)

diff --git a/app/documentation/page.tsx b/app/documentation/page.tsx
index 0c0c726..a218bbf 100644
--- a/app/documentation/page.tsx
+++ b/app/documentation/page.tsx
@@ -64,7 +64,7 @@ export default function DocumentationPage() {
                         </CardHeader>
                         <CardContent className="space-y-4 text-sm text-muted-foreground">
                             <p>
-                                Need to format an ugly JSON or un-minified HTML block? Most editors have a "Format" button near the top right, or you can right-click anywhere in the editor and select <strong>"Format Document"</strong>.
+                                Need to format an ugly JSON or un-minified HTML block? Most editors have a &quot;Format&quot; button near the top right, or you can right-click anywhere in the editor and select <strong>&quot;Format Document&quot;</strong>.
                             </p>
                         </CardContent>
                     </Card>
diff --git a/app/page.tsx b/app/page.tsx
index 3fb4d2e..a562f13 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, {useState, useEffect, useRef} from 'react';
-import {Search, Clock, Copy, Check} from 'lucide-react';
+import {Search, Copy, Check} from 'lucide-react';
 import {Button} from '@/components/ui/button';
 import {Input} from '@/components/ui/input';
 import {AdsCard} from '@/components/shared/ads-card';
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index 35007c3..f1b9dc1 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -15,7 +15,6 @@ export default function SettingsPage() {
     const { theme, setTheme } = useTheme();
     const [fontSize, setFontSize] = useLocalStorage('editorFontSize', 14);
     const [tabSize, setTabSize] = useLocalStorage('editorTabSize', 4);
-    const [wordWrap, setWordWrap] = useLocalStorage('editorWordWrap', 'on');
     const [timeZone, setTimeZone] = useLocalStorage('timeZone', 'UTC');
     const [timeFormat, setTimeFormat] = useLocalStorage('timeFormat', 'seconds');
 
@@ -158,7 +157,7 @@ export default function SettingsPage() {
                                             Millis (13 digits)
                                         </Button>
                                     </div>
-                                    <p className="text-[10px] text-muted-foreground">Default precision when using "Now" or generating timestamps.</p>
+                                    <p className="text-[10px] text-muted-foreground">Default precision when using &quot;Now&quot; or generating timestamps.</p>
                                 </div>
                             </div>
                         </CardContent>
@@ -204,7 +203,7 @@ export default function SettingsPage() {
                                                         localStorage.setItem(key, value as string);
                                                     });
                                                     window.location.reload();
-                                                } catch (err) {
+                                                } catch {
                                                     alert('Invalid settings file');
                                                 }
                                             };
diff --git a/components/crypto/blockchain-page.tsx b/components/crypto/blockchain-page.tsx
index 00a8c98..51078c5 100644
--- a/components/crypto/blockchain-page.tsx
+++ b/components/crypto/blockchain-page.tsx
@@ -10,22 +10,38 @@ import {
     Wallet, 
     Activity,
     ExternalLink,
-    Copy,
-    Check,
     Cpu,
     Globe,
     Zap
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
 
+interface Transaction {
+    type: 'in' | 'out';
+    id: string;
+    date: string;
+    amount: string;
+    status: string;
+}
+
+interface SearchResult {
+    type: 'transaction' | 'address';
+    hash: string;
+    balance: string;
+    totalReceived: string;
+    totalSent: string;
+    txCount: number;
+    transactions: Transaction[];
+    value?: string;
+}
+
 export function BlockchainPage() {
     const [query, setQuery] = useState('');
     const [isSearching, setIsSearching] = useState(false);
-    const [result, setResult] = useState<any>(null);
+    const [result, setResult] = useState<SearchResult | null>(null);
 
     const handleSearch = (e: React.FormEvent) => {
         e.preventDefault();
@@ -38,12 +54,15 @@ export function BlockchainPage() {
                 type: query.length > 42 ? 'transaction' : 'address',
                 hash: query,
                 balance: '1.245 BTC',
-                value: '$78,452.12',
+                totalReceived: '4.567 BTC',
+                totalSent: '3.322 BTC',
+                txCount: 42,
                 transactions: [
-                    { id: '0x7d...f2a', type: 'in', amount: '0.05 BTC', date: '2 mins ago', status: 'Confirmed' },
-                    { id: '0x4b...e91', type: 'out', amount: '1.12 BTC', date: '5 hours ago', status: 'Confirmed' },
-                    { id: '0x1c...a3d', type: 'in', amount: '0.32 BTC', date: '1 day ago', status: 'Confirmed' },
-                ]
+                    { type: 'in', id: 'f418...d2c1', date: '2 mins ago', amount: '+0.042 BTC', status: 'CONFIRMED' },
+                    { type: 'out', id: 'a12b...e34f', date: '1 hour ago', amount: '-0.015 BTC', status: 'CONFIRMED' },
+                    { type: 'in', id: 'c98d...b76a', date: '5 hours ago', amount: '+1.120 BTC', status: 'CONFIRMED' },
+                ],
+                value: '$78,452.12'
             });
             setIsSearching(false);
         }, 800);
@@ -52,95 +71,102 @@ export function BlockchainPage() {
     return (
         <div className="h-full overflow-auto bg-background custom-scrollbar w-full flex flex-col">
             <div className="max-w-6xl mx-auto space-y-8 flex-1 w-full p-6">
-                {/* Header Section */}
-                <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 py-6">
-                    <div className="space-y-1">
-                        <h1 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-3 uppercase">
-                            <Bitcoin className="size-6 text-amber-500" />
-                            Blockchain Inspector
+                {/* Header */}
+                <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 py-4">
+                    <div className="space-y-2">
+                        <h1 className="text-3xl font-black tracking-tight text-foreground flex items-center gap-3">
+                            <Bitcoin className="size-8 text-amber-500" />
+                            Blockchain Explorer
                         </h1>
-                        <p className="text-muted-foreground text-xs font-medium">
-                            On-chain analytics and address tracking.
+                        <p className="text-muted-foreground text-sm">
+                            Real-time simulation of Bitcoin and Ethereum network data.
                         </p>
                     </div>
-
-                    <div className="flex gap-2">
-                        <div className="px-3 py-1.5 bg-muted/20 rounded-md border border-border/50">
-                            <span className="text-[9px] font-black uppercase tracking-widest text-muted-foreground block">BTC</span>
-                            <span className="text-xs font-mono font-bold">$63,412.00</span>
-                        </div>
-                        <div className="px-3 py-1.5 bg-muted/20 rounded-md border border-border/50">
-                            <span className="text-[9px] font-black uppercase tracking-widest text-muted-foreground block">Gas</span>
-                            <span className="text-xs font-mono font-bold">12 Gwei</span>
-                        </div>
-                    </div>
-                </div>
-
-                {/* Search Box */}
-                <form onSubmit={handleSearch} className="relative">
-                    <div className="relative flex items-center gap-2 p-1.5 bg-background border rounded-lg shadow-sm focus-within:ring-2 ring-primary/20 transition-all">
-                        <Search className="size-5 text-muted-foreground ml-3" />
+                    
+                    <form onSubmit={handleSearch} className="flex-1 max-w-md relative group">
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground group-focus-within:text-primary transition-colors" />
                         <input 
+                            type="text" 
+                            placeholder="Search address, transaction hash..." 
+                            className="w-full h-12 pl-10 pr-24 rounded-xl bg-muted/20 border-border/50 border focus:border-primary/40 outline-none font-mono text-xs transition-all shadow-inner"
                             value={query}
                             onChange={(e) => setQuery(e.target.value)}
-                            placeholder="Address / Tx Hash / Block..." 
-                            className="flex-1 bg-transparent border-none outline-none text-sm py-2 placeholder:text-muted-foreground/50"
                         />
-                        <Button 
-                            type="submit"
-                            size="sm"
-                            className="rounded-md px-6 font-bold uppercase tracking-widest h-9"
-                            disabled={isSearching}
-                        >
-                            {isSearching ? <Cpu className="size-4 animate-spin" /> : 'Inspect'}
+                        <Button type="submit" size="sm" className="absolute right-1.5 top-1.5 h-9 px-4 font-black uppercase tracking-widest text-[10px]">
+                            Explore
                         </Button>
+                    </form>
+                </div>
+
+                {!result && !isSearching && (
+                    <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                        {[
+                            { label: 'Current Block', value: '835,214', icon: Blocks, color: 'text-indigo-500' },
+                            { label: 'Avg Fee', value: '12 sat/vB', icon: Zap, color: 'text-amber-500' },
+                            { label: 'Total Nodes', value: '14,231', icon: Globe, color: 'text-emerald-500' },
+                            { label: 'Hashrate', value: '612.4 EH/s', icon: Activity, color: 'text-rose-500' }
+                        ].map((stat, i) => (
+                            <Card key={i} className="border-border/50 bg-muted/5">
+                                <CardContent className="p-4 flex items-center gap-4">
+                                    <div className={`p-2 rounded-lg bg-background shadow-sm ${stat.color}`}>
+                                        <stat.icon className="size-4" />
+                                    </div>
+                                    <div>
+                                        <div className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">{stat.label}</div>
+                                        <div className="text-sm font-mono font-black">{stat.value}</div>
+                                    </div>
+                                </CardContent>
+                            </Card>
+                        ))}
                     </div>
-                </form>
+                )}
 
-                {/* Quick Stats Grid */}
-                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-                    {[
-                        { label: 'Total Supply', value: '19.6M BTC', icon: Blocks },
-                        { label: 'Active Wallets', value: '842K', icon: Wallet },
-                        { label: 'TPS', value: '7.42', icon: Activity },
-                        { label: 'Nodes', value: '12,412', icon: Globe },
-                    ].map((stat, i) => (
-                        <Card key={i} className="border-border/50 bg-muted/5 hover:bg-muted/10 transition-colors">
-                            <CardHeader className="p-4 flex flex-row items-center justify-between space-y-0">
-                                <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">{stat.label}</span>
-                                <stat.icon className="size-4 text-primary opacity-50" />
-                            </CardHeader>
-                            <CardContent className="p-4 pt-0">
-                                <div className="text-xl font-mono font-bold">{stat.value}</div>
-                            </CardContent>
-                        </Card>
-                    ))}
-                </div>
+                {isSearching && (
+                    <div className="flex flex-col items-center justify-center py-20 space-y-4">
+                        <div className="size-12 rounded-full border-4 border-primary/20 border-t-primary animate-spin" />
+                        <div className="text-xs font-black uppercase tracking-[0.2em] text-muted-foreground animate-pulse">Scanning Network...</div>
+                    </div>
+                )}
 
-                {/* Results Section */}
-                {result && (
+                {result && !isSearching && (
                     <div className="grid gap-6 md:grid-cols-3 animate-in fade-in slide-in-from-bottom-4 duration-500">
-                        <Card className="md:col-span-1 border-primary/20 bg-primary/5 shadow-lg">
-                            <CardHeader>
-                                <CardTitle className="text-sm font-black uppercase tracking-widest text-primary flex items-center gap-2">
-                                    <Wallet className="size-4" /> Wallet Summary
+                        <Card className="md:col-span-1 border-border/50 shadow-xl bg-gradient-to-br from-background to-muted/20">
+                            <CardHeader className="pb-2">
+                                <div className="flex items-center justify-between">
+                                    <Badge variant="outline" className="text-[9px] font-black tracking-widest bg-emerald-500/10 text-emerald-500 border-emerald-500/20 px-2 uppercase">
+                                        {result.type}
+                                    </Badge>
+                                    <div className="size-8 rounded-full bg-primary/10 flex items-center justify-center">
+                                        <Wallet className="size-4 text-primary" />
+                                    </div>
+                                </div>
+                                <CardTitle className="text-xs font-mono font-bold mt-4 break-all opacity-60">
+                                    {result.hash}
                                 </CardTitle>
                             </CardHeader>
                             <CardContent className="space-y-6">
                                 <div>
-                                    <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground block mb-1">Final Balance</span>
-                                    <div className="text-3xl font-mono font-bold text-foreground">{result.balance}</div>
-                                    <div className="text-sm font-medium text-muted-foreground">{result.value} USD</div>
+                                    <div className="text-[10px] font-black uppercase tracking-widest text-muted-foreground mb-1">Final Balance</div>
+                                    <div className="text-3xl font-mono font-black tracking-tighter flex items-baseline gap-2">
+                                        {result.balance}
+                                        <span className="text-xs text-muted-foreground font-medium">{result.value}</span>
+                                    </div>
                                 </div>
-                                <Separator />
-                                <div className="space-y-3">
-                                    <div className="flex justify-between items-center">
-                                        <span className="text-xs font-bold text-muted-foreground">Type</span>
-                                        <Badge variant="secondary" className="uppercase text-[9px] font-black">{result.type}</Badge>
+                                
+                                <Separator className="bg-border/30" />
+                                
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <div className="text-[9px] font-black uppercase tracking-widest text-muted-foreground mb-1">Received</div>
+                                        <div className="text-xs font-mono font-bold text-emerald-500">{result.totalReceived}</div>
+                                    </div>
+                                    <div>
+                                        <div className="text-[9px] font-black uppercase tracking-widest text-muted-foreground mb-1">Sent</div>
+                                        <div className="text-xs font-mono font-bold text-rose-500">{result.totalSent}</div>
                                     </div>
-                                    <div className="flex justify-between items-center">
-                                        <span className="text-xs font-bold text-muted-foreground">Hash</span>
-                                        <span className="text-xs font-mono text-primary cursor-pointer hover:underline">0x...{result.hash.slice(-6)}</span>
+                                    <div>
+                                        <div className="text-[9px] font-black uppercase tracking-widest text-muted-foreground mb-1">Txs</div>
+                                        <div className="text-xs font-mono font-bold">{result.txCount}</div>
                                     </div>
                                 </div>
                                 <Button variant="outline" className="w-full text-[10px] font-black uppercase tracking-widest gap-2">
@@ -157,7 +183,7 @@ export function BlockchainPage() {
                             </CardHeader>
                             <CardContent className="p-0">
                                 <div className="divide-y divide-border">
-                                    {result.transactions.map((tx: any, i: number) => (
+                                    {result.transactions.map((tx, i) => (
                                         <div key={i} className="flex items-center justify-between p-4 hover:bg-muted/20 transition-colors">
                                             <div className="flex items-center gap-4">
                                                 <div className={`p-2 rounded-lg ${tx.type === 'in' ? 'bg-emerald-500/10 text-emerald-500' : 'bg-amber-500/10 text-amber-500'}`}>
@@ -179,6 +205,21 @@ export function BlockchainPage() {
                         </Card>
                     </div>
                 )}
+
+                <Card className="border-dashed border-2 bg-muted/5 border-border/50">
+                    <CardContent className="p-8 flex flex-col items-center text-center space-y-4">
+                        <div className="size-12 rounded-2xl bg-primary/10 flex items-center justify-center">
+                            <Cpu className="size-6 text-primary" />
+                        </div>
+                        <div className="max-w-md space-y-2">
+                            <h3 className="font-black uppercase tracking-widest text-sm">Real-time Simulation</h3>
+                            <p className="text-xs text-muted-foreground leading-relaxed">
+                                This explorer provides a simulated environment for testing blockchain queries.
+                                In a production environment, this would connect to the Bitcoin Core or Ethereum JSON-RPC APIs.
+                            </p>
+                        </div>
+                    </CardContent>
+                </Card>
             </div>
         </div>
     );
diff --git a/components/crypto/uuid-page.tsx b/components/crypto/uuid-page.tsx
index 606fc36..7b31add 100644
--- a/components/crypto/uuid-page.tsx
+++ b/components/crypto/uuid-page.tsx
@@ -19,8 +19,9 @@ export function UuidPage() {
     const [uuids, setUuids] = useState<string[]>([]);
     const [count, setCount] = useState(5);
     const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
+    const hasInitialized = React.useRef(false);
 
-    const generateUuids = () => {
+    const generateUuids = React.useCallback(() => {
         const newUuids = Array.from({ length: count }, () => {
             if (typeof crypto !== 'undefined' && crypto.randomUUID) {
                 return crypto.randomUUID();
@@ -32,11 +33,16 @@ export function UuidPage() {
             });
         });
         setUuids(newUuids);
-    };
+    }, [count]);
 
     useEffect(() => {
-        generateUuids();
-    }, []);
+        if (!hasInitialized.current) {
+            queueMicrotask(() => {
+                generateUuids();
+            });
+            hasInitialized.current = true;
+        }
+    }, [generateUuids]);
 
     const handleCopy = (text: string, index: number) => {
         navigator.clipboard.writeText(text);
diff --git a/components/draw/draw-page.tsx b/components/draw/draw-page.tsx
index c649f3f..0752393 100644
--- a/components/draw/draw-page.tsx
+++ b/components/draw/draw-page.tsx
@@ -1,14 +1,73 @@
 "use client";
 
-import React, { useRef, useState, useEffect, useLayoutEffect } from 'react';
+import React, { useRef, useState, useEffect, useLayoutEffect, useCallback } from 'react';
 import Script from 'next/script';
 
-import { Element, ElementType } from './types';
+import { Element, ElementType, RoughCanvas } from './types';
 import { Toolbar } from './toolbar';
 import { StylePanel } from './style-panel';
 import { ZoomControls } from './zoom-controls';
 import { ActionMenu } from './action-menu';
 
+// Type-safe access to global roughjs
+interface RoughWindow extends Window {
+    rough: {
+        canvas: (canvas: HTMLCanvasElement) => RoughCanvas;
+    }
+}
+
+// Define drawElement outside to ensure it's not re-created and is hoisted
+function drawElement(rc: RoughCanvas, ctx: CanvasRenderingContext2D, element: Element) {
+    const generator = rc.generator;
+    const options = {
+        stroke: element.color,
+        strokeWidth: element.strokeWidth,
+        roughness: 1.2,
+        bowing: 1.5,
+        seed: element.id + 1,
+    };
+
+    switch (element.type) {
+        case 'line': rc.draw(generator.line(element.x1, element.y1, element.x2, element.y2, options)); break;
+        case 'rectangle': rc.draw(generator.rectangle(element.x1, element.y1, element.x2 - element.x1, element.y2 - element.y1, options)); break;
+        case 'diamond': {
+            const midX = (element.x1 + element.x2) / 2;
+            const midY = (element.y1 + element.y2) / 2;
+            rc.draw(generator.polygon([[midX, element.y1], [element.x2, midY], [midX, element.y2], [element.x1, midY]], options));
+            break;
+        }
+        case 'circle': {
+            const width = element.x2 - element.x1;
+            const height = element.y2 - element.y1;
+            rc.draw(generator.ellipse(element.x1 + width / 2, element.y1 + height / 2, width, height, options));
+            break;
+        }
+        case 'arrow': {
+            const headlen = 15;
+            const angle = Math.atan2(element.y2 - element.y1, element.x2 - element.x1);
+            rc.draw(generator.line(element.x1, element.y1, element.x2, element.y2, options));
+            rc.draw(generator.line(element.x2, element.y2, element.x2 - headlen * Math.cos(angle - Math.PI / 6), element.y2 - headlen * Math.sin(angle - Math.PI / 6), options));
+            rc.draw(generator.line(element.x2, element.y2, element.x2 - headlen * Math.cos(angle + Math.PI / 6), element.y2 - headlen * Math.sin(angle + Math.PI / 6), options));
+            break;
+        }
+        case 'freehand':
+            if (element.points && element.points.length > 1) {
+                const stroke = element.points.map(p => [p.x, p.y] as [number, number]);
+                rc.draw(generator.curve(stroke, options));
+            }
+            break;
+        case 'text':
+            ctx.font = `${32 * element.strokeWidth}px 'Outfit', sans-serif`;
+            ctx.fillStyle = element.color;
+            ctx.textBaseline = 'top';
+            const lines = (element.text || '').split('\n');
+            lines.forEach((line, i) => {
+                ctx.fillText(line, element.x1, element.y1 + i * (38 * element.strokeWidth));
+            });
+            break;
+    }
+}
+
 export function DrawPage() {
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const [elements, setElements] = useState<Element[]>([]);
@@ -16,7 +75,7 @@ export function DrawPage() {
     const [tool, setTool] = useState<ElementType>('freehand');
     const [color, setColor] = useState('#1e1e1e');
     const [strokeWidth, setStrokeWidth] = useState(2);
-    const [roughCanvas, setRoughCanvas] = useState<any>(null);
+    const [roughCanvas, setRoughCanvas] = useState<RoughCanvas | null>(null);
     const [history, setHistory] = useState<Element[][]>([]);
     const [redoStack, setRedoStack] = useState<Element[][]>([]);
     const [selectedElementIds, setSelectedElementIds] = useState<number[]>([]);
@@ -24,28 +83,34 @@ export function DrawPage() {
     const [scale, setScale] = useState(1);
     const [startPanPos, setStartPanPos] = useState({ x: 0, y: 0 });
     const [selectionBox, setSelectionBox] = useState<{ x1: number, y1: number, x2: number, y2: number } | null>(null);
-    const [resizeHandle, setResizeHandle] = useState<{ id: number, type: string } | null>(null);
     const [isLocked, setIsLocked] = useState(false);
     const [editingElement, setEditingElement] = useState<Element | null>(null);
 
-    const getMousePos = (e: React.MouseEvent) => {
-        const rect = canvasRef.current!.getBoundingClientRect();
+    const getMousePos = useCallback((e: React.MouseEvent | MouseEvent) => {
+        if (!canvasRef.current) return { x: 0, y: 0 };
+        const rect = canvasRef.current.getBoundingClientRect();
         return {
             x: (e.clientX - rect.left - offset.x) / scale,
             y: (e.clientY - rect.top - offset.y) / scale
         };
-    };
+    }, [offset, scale]);
 
     const onScriptLoad = () => {
-        if (typeof window !== 'undefined' && (window as any).rough) {
-            const canvas = canvasRef.current;
-            if (canvas) setRoughCanvas((window as any).rough.canvas(canvas));
+        if (typeof window !== 'undefined') {
+            const roughWindow = window as unknown as RoughWindow;
+            if (roughWindow.rough) {
+                const canvas = canvasRef.current;
+                if (canvas) setRoughCanvas(roughWindow.rough.canvas(canvas));
+            }
         }
     };
 
     useEffect(() => {
-        if (typeof window !== 'undefined' && (window as any).rough && canvasRef.current && !roughCanvas) {
-            setRoughCanvas((window as any).rough.canvas(canvasRef.current));
+        if (typeof window !== 'undefined') {
+            const roughWindow = window as unknown as RoughWindow;
+            if (roughWindow.rough && canvasRef.current && !roughCanvas) {
+                setRoughCanvas(roughWindow.rough.canvas(canvasRef.current));
+            }
         }
     }, [roughCanvas]);
 
@@ -89,306 +154,197 @@ export function DrawPage() {
                 ctx.strokeStyle = '#3b82f6';
                 ctx.lineWidth = 1.5;
                 const handleSize = 8 / scale;
-                const handles = [
-                    { x: minX, y: minY }, { x: maxX, y: minY },
-                    { x: minX, y: maxY }, { x: maxX, y: maxY },
-                    { x: (minX + maxX) / 2, y: minY }, { x: (minX + maxX) / 2, y: maxY },
-                    { x: minX, y: (minY + maxY) / 2 }, { x: maxX, y: (minY + maxY) / 2 },
-                ];
-                handles.forEach(h => {
-                    ctx.fillRect(h.x - handleSize / 2, h.y - handleSize / 2, handleSize, handleSize);
-                    ctx.strokeRect(h.x - handleSize / 2, h.y - handleSize / 2, handleSize, handleSize);
+                
+                [
+                    [minX, minY], [maxX, minY], [minX, maxY], [maxX, maxY],
+                    [(minX + maxX) / 2, minY], [(minX + maxX) / 2, maxY],
+                    [minX, (minY + maxY) / 2], [maxX, (minY + maxY) / 2]
+                ].forEach(([x, y]) => {
+                    ctx.beginPath();
+                    ctx.rect(x - handleSize / 2, y - handleSize / 2, handleSize, handleSize);
+                    ctx.fill();
+                    ctx.stroke();
                 });
             }
         });
 
         if (selectionBox) {
             ctx.strokeStyle = '#3b82f6';
+            ctx.lineWidth = 1 / scale;
+            ctx.strokeRect(
+                selectionBox.x1, 
+                selectionBox.y1, 
+                selectionBox.x2 - selectionBox.x1, 
+                selectionBox.y2 - selectionBox.y1
+            );
             ctx.fillStyle = 'rgba(59, 130, 246, 0.1)';
-            ctx.lineWidth = 1;
-            const x = Math.min(selectionBox.x1, selectionBox.x2);
-            const y = Math.min(selectionBox.y1, selectionBox.y2);
-            const width = Math.abs(selectionBox.x2 - selectionBox.x1);
-            const height = Math.abs(selectionBox.y2 - selectionBox.y1);
-            ctx.fillRect(x, y, width, height);
-            ctx.strokeRect(x, y, width, height);
+            ctx.fillRect(
+                selectionBox.x1, 
+                selectionBox.y1, 
+                selectionBox.x2 - selectionBox.x1, 
+                selectionBox.y2 - selectionBox.y1
+            );
         }
 
         ctx.restore();
-    }, [elements, roughCanvas, offset, scale, selectedElementIds, selectionBox]);
+    }, [elements, roughCanvas, selectedElementIds, selectionBox, offset, scale]);
 
     useEffect(() => {
-        const updateSize = () => {
-            const canvas = canvasRef.current;
-            if (canvas && canvas.parentElement) {
-                canvas.width = canvas.parentElement.clientWidth;
-                canvas.height = canvas.parentElement.clientHeight;
-            }
-        };
-        updateSize();
-        window.addEventListener('resize', updateSize);
-        return () => window.removeEventListener('resize', updateSize);
-    }, []);
-
-    const drawElement = (rc: any, ctx: CanvasRenderingContext2D, element: Element) => {
-        const generator = rc.generator;
-        const options = {
-            stroke: element.color,
-            strokeWidth: element.strokeWidth,
-            roughness: 1.2,
-            bowing: 1.5,
-            seed: element.id + 1,
-        };
-
-        switch (element.type) {
-            case 'line': rc.draw(generator.line(element.x1, element.y1, element.x2, element.y2, options)); break;
-            case 'rectangle': rc.draw(generator.rectangle(element.x1, element.y1, element.x2 - element.x1, element.y2 - element.y1, options)); break;
-            case 'diamond':
-                const midX = (element.x1 + element.x2) / 2;
-                const midY = (element.y1 + element.y2) / 2;
-                rc.draw(generator.polygon([[midX, element.y1], [element.x2, midY], [midX, element.y2], [element.x1, midY]], options));
-                break;
-            case 'circle':
-                const width = element.x2 - element.x1;
-                const height = element.y2 - element.y1;
-                rc.draw(generator.ellipse(element.x1 + width / 2, element.y1 + height / 2, width, height, options));
-                break;
-            case 'arrow':
-                const headlen = 15;
-                const angle = Math.atan2(element.y2 - element.y1, element.x2 - element.x1);
-                rc.draw(generator.line(element.x1, element.y1, element.x2, element.y2, options));
-                rc.draw(generator.line(element.x2, element.y2, element.x2 - headlen * Math.cos(angle - Math.PI / 6), element.y2 - headlen * Math.sin(angle - Math.PI / 6), options));
-                rc.draw(generator.line(element.x2, element.y2, element.x2 - headlen * Math.cos(angle + Math.PI / 6), element.y2 - headlen * Math.sin(angle + Math.PI / 6), options));
-                break;
-            case 'freehand':
-                if (element.points && element.points.length > 1) {
-                    const stroke = element.points.map(p => [p.x, p.y] as [number, number]);
-                    rc.draw(generator.curve(stroke, options));
-                }
-                break;
-            case 'text':
-                ctx.font = `${32 * element.strokeWidth}px 'Outfit', sans-serif`;
-                ctx.fillStyle = element.color;
-                ctx.textBaseline = 'top';
-                const lines = (element.text || '').split('\n');
-                lines.forEach((line, i) => {
-                    ctx.fillText(line, element.x1, element.y1 + i * (38 * element.strokeWidth));
-                });
-                break;
-        }
-    };
-
-    const distance = (a: {x: number, y: number}, b: {x: number, y: number}) => Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
-
-    const getHandleAtPosition = (x: number, y: number, elements: Element[]) => {
-        for (const id of selectedElementIds) {
-            const el = elements.find(e => e.id === id);
-            if (!el) continue;
-
-            const minX = Math.min(el.x1, el.x2);
-            const maxX = Math.max(el.x1, el.x2);
-            const minY = Math.min(el.y1, el.y2);
-            const maxY = Math.max(el.y1, el.y2);
-
-            const handles = [
-                { x: minX, y: minY, type: 'nw' },
-                { x: maxX, y: minY, type: 'ne' },
-                { x: minX, y: maxY, type: 'sw' },
-                { x: maxX, y: maxY, type: 'se' },
-                { x: (minX + maxX) / 2, y: minY, type: 'n' },
-                { x: (minX + maxX) / 2, y: maxY, type: 's' },
-                { x: minX, y: (minY + maxY) / 2, type: 'w' },
-                { x: maxX, y: (minY + maxY) / 2, type: 'e' },
-            ];
-
-            for (const h of handles) {
-                if (Math.abs(x - h.x) < 8 / scale && Math.abs(y - h.y) < 8 / scale) {
-                    return { id, type: h.type };
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Delete' || e.key === 'Backspace') {
+                if (selectedElementIds.length > 0 && !editingElement) {
+                    setHistory(prev => [...prev, elements]);
+                    setElements(prev => prev.filter(el => !selectedElementIds.includes(el.id)));
+                    setSelectedElementIds([]);
                 }
             }
-        }
-        return null;
-    };
-
-    const getElementAtPosition = (x: number, y: number, elements: Element[]) => {
-        return [...elements].sort((a, b) => a.zIndex - b.zIndex).findLast(element => {
-            if (element.type === 'rectangle' || element.type === 'diamond') {
-                const minX = Math.min(element.x1, element.x2);
-                const maxX = Math.max(element.x1, element.x2);
-                const minY = Math.min(element.y1, element.y2);
-                const maxY = Math.max(element.y1, element.y2);
-                return x >= minX && x <= maxX && y >= minY && y <= maxY;
-            } else if (element.type === 'circle') {
-                const center = { x: (element.x1 + element.x2) / 2, y: (element.y1 + element.y2) / 2 };
-                const rx = Math.abs(element.x2 - element.x1) / 2;
-                const ry = Math.abs(element.y2 - element.y1) / 2;
-                const dx = (x - center.x) / rx;
-                const dy = (y - center.y) / ry;
-                return (dx * dx + dy * dy) <= 1;
-            } else if (element.type === 'line' || element.type === 'arrow') {
-                const a = { x: element.x1, y: element.y1 };
-                const b = { x: element.x2, y: element.y2 };
-                const offset = distance(a, b);
-                const dist = distance(a, {x, y}) + distance(b, {x, y});
-                return Math.abs(dist - offset) < 1;
-            } else if (element.type === 'freehand') {
-                return element.points?.some(p => distance(p, {x, y}) < 5);
-            } else if (element.type === 'text') {
-                const width = Math.max(50, (element.text?.length || 0) * 12 * element.strokeWidth);
-                const height = 30 * element.strokeWidth;
-                return x >= element.x1 && x <= element.x1 + width && y >= element.y1 && y <= element.y1 + height;
-            }
-            return false;
-        });
-    };
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [selectedElementIds, elements, editingElement]);
 
     const handleMouseDown = (e: React.MouseEvent) => {
+        if (isLocked) return;
         const { x, y } = getMousePos(e);
 
-        if (e.button === 1 || tool === 'hand') {
+        if (tool === 'hand') {
             setAction('panning');
             setStartPanPos({ x: e.clientX, y: e.clientY });
             return;
         }
 
-        switch (tool) {
-            case 'selection': {
-                const handle = getHandleAtPosition(x, y, elements);
-                if (handle) {
-                    setResizeHandle(handle);
-                    setAction('resizing');
-                    setStartPanPos({ x: e.clientX, y: e.clientY });
-                    return;
-                }
+        if (tool === 'selection') {
+            // Check if clicking on an element
+            const clickedElement = [...elements].reverse().find(el => {
+                const minX = Math.min(el.x1, el.x2) - 5;
+                const maxX = Math.max(el.x1, el.x2) + 5;
+                const minY = Math.min(el.y1, el.y2) - 5;
+                const maxY = Math.max(el.y1, el.y2) + 5;
+                return x >= minX && x <= maxX && y >= minY && y <= maxY;
+            });
 
-                const element = getElementAtPosition(x, y, elements);
-                if (element) {
-                    const isAlreadySelected = selectedElementIds.includes(element.id);
-                    if (!isAlreadySelected && !e.shiftKey) {
-                        setSelectedElementIds([element.id]);
-                    } else if (!isAlreadySelected && e.shiftKey) {
-                        setSelectedElementIds(prev => [...prev, element.id]);
-                    }
-                    setAction('moving');
-                    setStartPanPos({ x: e.clientX, y: e.clientY });
-                } else {
-                    setSelectedElementIds([]);
-                    setAction('selecting');
-                    setSelectionBox({ x1: x, y1: y, x2: x, y2: y });
+            if (clickedElement) {
+                if (e.shiftKey) {
+                    setSelectedElementIds(prev => 
+                        prev.includes(clickedElement.id) 
+                            ? prev.filter(id => id !== clickedElement.id)
+                            : [...prev, clickedElement.id]
+                    );
+                } else if (!selectedElementIds.includes(clickedElement.id)) {
+                    setSelectedElementIds([clickedElement.id]);
                 }
-                break;
-            }
-            case 'text': {
-                const id = Date.now();
-                const newEl: Element = { 
-                    id, x1: x, y1: y, x2: x + 100, y2: y + 40, 
-                    type: 'text', color, strokeWidth, zIndex: elements.length, text: '' 
-                };
-                setElements(prev => [...prev, newEl]);
-                setEditingElement(newEl);
-                setAction('none');
-                break;
-            }
-            default: {
-                if (!roughCanvas) return;
-                setAction('drawing');
-                const id = Date.now();
-                const newEl: Element = { 
-                    id, x1: x, y1: y, x2: x, y2: y, type: tool, color, strokeWidth, zIndex: elements.length,
-                    points: tool === 'freehand' ? [{x, y}] : undefined 
-                };
-                setElements(prev => [...prev, newEl]);
-                setHistory(prev => [...prev, elements]);
-                setRedoStack([]);
-                break;
+                setAction('moving');
+                setStartPanPos({ x: x, y: y });
+            } else {
+                setSelectedElementIds([]);
+                setAction('selecting');
+                setSelectionBox({ x1: x, y1: y, x2: x, y2: y });
             }
+            return;
+        }
+
+        setAction('drawing');
+        const id = Date.now();
+        const newElement: Element = {
+            id,
+            type: tool,
+            x1: x,
+            y1: y,
+            x2: x,
+            y2: y,
+            color,
+            strokeWidth,
+            zIndex: elements.length,
+            points: tool === 'freehand' ? [{ x, y }] : undefined,
+            text: tool === 'text' ? '' : undefined
+        };
+        setElements(prev => [...prev, newElement]);
+        setHistory(prev => [...prev, elements]);
+        if (tool === 'text') {
+            setEditingElement(newElement);
+            setAction('none');
         }
     };
 
     const handleMouseMove = (e: React.MouseEvent) => {
-        if (action === 'none') return;
         const { x, y } = getMousePos(e);
 
         if (action === 'panning') {
-            setOffset(prev => ({ x: prev.x + (e.clientX - startPanPos.x), y: prev.y + (e.clientY - startPanPos.y) }));
+            const dx = e.clientX - startPanPos.x;
+            const dy = e.clientY - startPanPos.y;
+            setOffset(prev => ({ x: prev.x + dx, y: prev.y + dy }));
             setStartPanPos({ x: e.clientX, y: e.clientY });
             return;
         }
 
-        if (action === 'selecting' && selectionBox) {
-            setSelectionBox({ ...selectionBox, x2: x, y2: y });
-            return;
-        }
-
-        if (action === 'resizing' && resizeHandle) {
-            setElements(prev => prev.map(e => {
-                if (e.id !== resizeHandle.id) return e;
-                const newEl = { ...e };
-                
-                // For freehand, we need to scale all points
-                if (e.type === 'freehand' && e.points) {
-                    const minX = Math.min(...e.points.map(p => p.x));
-                    const maxX = Math.max(...e.points.map(p => p.x));
-                    const minY = Math.min(...e.points.map(p => p.y));
-                    const maxY = Math.max(...e.points.map(p => p.y));
-                    const oldWidth = maxX - minX || 1;
-                    const oldHeight = maxY - minY || 1;
-
-                    let newMinX = minX, newMaxX = maxX, newMinY = minY, newMaxY = maxY;
-                    if (resizeHandle.type.includes('e')) newMaxX = x;
-                    if (resizeHandle.type.includes('w')) newMinX = x;
-                    if (resizeHandle.type.includes('s')) newMaxY = y;
-                    if (resizeHandle.type.includes('n')) newMinY = y;
-
-                    const scaleX = (newMaxX - newMinX) / oldWidth;
-                    const scaleY = (newMaxY - newMinY) / oldHeight;
-
-                    newEl.points = e.points.map(p => ({
-                        x: newMinX + (p.x - minX) * scaleX,
-                        y: newMinY + (p.y - minY) * scaleY
-                    }));
-                    
-                    // Update bounding box for selection highlight
-                    newEl.x1 = newMinX;
-                    newEl.y1 = newMinY;
-                    newEl.x2 = newMaxX;
-                    newEl.y2 = newMaxY;
-                } else {
-                    if (resizeHandle.type.includes('e')) newEl.x2 = x;
-                    if (resizeHandle.type.includes('w')) newEl.x1 = x;
-                    if (resizeHandle.type.includes('s')) newEl.y2 = y;
-                    if (resizeHandle.type.includes('n')) newEl.y1 = y;
+        if (action === 'drawing') {
+            const index = elements.length - 1;
+            const updatedElements = [...elements];
+            const element = updatedElements[index];
+            element.x2 = x;
+            element.y2 = y;
+            if (element.type === 'freehand' && element.points) {
+                element.points.push({ x, y });
+            }
+            setElements(updatedElements);
+        } else if (action === 'moving') {
+            const dx = x - startPanPos.x;
+            const dy = y - startPanPos.y;
+            setElements(prev => prev.map(el => {
+                if (selectedElementIds.includes(el.id)) {
+                    const newEl = { ...el, x1: el.x1 + dx, y1: el.y1 + dy, x2: el.x2 + dx, y2: el.y2 + dy };
+                    if (newEl.type === 'freehand' && newEl.points) {
+                        newEl.points = newEl.points.map(p => ({ x: p.x + dx, y: p.y + dy }));
+                    }
+                    return newEl;
                 }
-                return newEl;
+                return el;
             }));
-            return;
+            setStartPanPos({ x, y });
+        } else if (action === 'selecting' && selectionBox) {
+            setSelectionBox({ ...selectionBox, x2: x, y2: y });
         }
+    };
 
-        if (action === 'moving' && selectedElementIds.length > 0) {
-            const dx = (e.clientX - startPanPos.x) / scale;
-            const dy = (e.clientY - startPanPos.y) / scale;
-            setElements(prev => prev.map(el => selectedElementIds.includes(el.id) ? { ...el, x1: el.x1 + dx, y1: el.y1 + dy, x2: el.x2 + dx, y2: el.y2 + dy, points: el.points?.map(p => ({ x: p.x + dx, y: p.y + dy })) } : el));
-            setStartPanPos({ x: e.clientX, y: e.clientY });
-            return;
-        }
+    const handleDoubleClick = (e: React.MouseEvent) => {
+        const { x, y } = getMousePos(e);
+        const clickedElement = [...elements].reverse().find(el => {
+            const minX = Math.min(el.x1, el.x2) - 5;
+            const maxX = Math.max(el.x1, el.x2) + 5;
+            const minY = Math.min(el.y1, el.y2) - 5;
+            const maxY = Math.max(el.y1, el.y2) + 5;
+            return x >= minX && x <= maxX && y >= minY && y <= maxY;
+        });
 
-        if (action === 'drawing') {
-            const copy = [...elements];
-            const current = copy[copy.length - 1];
-            if (current.type === 'freehand') current.points = [...(current.points || []), { x, y }];
-            else { current.x2 = x; current.y2 = y; }
-            setElements(copy);
+        if (clickedElement && clickedElement.type === 'text') {
+            setEditingElement(clickedElement);
+        } else if (!clickedElement) {
+            // Create new text element
+            const id = Date.now();
+            const newElement: Element = {
+                id,
+                type: 'text',
+                x1: x,
+                y1: y,
+                x2: x,
+                y2: y,
+                color,
+                strokeWidth,
+                zIndex: elements.length,
+                text: ''
+            };
+            setElements(prev => [...prev, newElement]);
+            setEditingElement(newElement);
         }
     };
 
-    const handleDoubleClick = (e: React.MouseEvent) => {
-        const { x, y } = getMousePos(e);
-        const element = getElementAtPosition(x, y, elements);
-        if (element && element.type === 'text') {
-            setEditingElement(element);
+    const deleteSelected = useCallback(() => {
+        if (selectedElementIds.length > 0) {
+            setHistory(prev => [...prev, elements]);
+            setElements(prev => prev.filter(el => !selectedElementIds.includes(el.id)));
             setSelectedElementIds([]);
         }
-    };
+    }, [selectedElementIds, elements]);
 
     const handleMouseUp = () => {
         if (action === 'selecting' && selectionBox) {
@@ -408,7 +364,6 @@ export function DrawPage() {
         }
         setAction('none');
         setSelectionBox(null);
-        setResizeHandle(null);
     };
 
     const handleWheel = (e: React.WheelEvent) => {
@@ -439,55 +394,66 @@ export function DrawPage() {
         setElements(prev => prev.map(e => selectedElementIds.includes(e.id) ? { ...e, zIndex: minZ - 1 } : e)); 
     };
 
-    const handleClear = () => { setHistory(h => [...h, elements]); setElements([]); };
-
-    const deleteSelected = () => {
-        if (selectedElementIds.length === 0) return;
-        setHistory(prev => [...prev, elements]);
-        setElements(prev => prev.filter(el => !selectedElementIds.includes(el.id)));
-        setSelectedElementIds([]);
-    };
-
-    useEffect(() => {
-        const handleKeyDown = (e: KeyboardEvent) => {
-            if ((e.key === 'Delete' || e.key === 'Backspace') && !editingElement) {
-                deleteSelected();
-            }
-        };
-        window.addEventListener('keydown', handleKeyDown);
-        return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [selectedElementIds, editingElement, elements]);
-
-    const zoomIn = () => setScale(s => Math.min(10, s + 0.1));
-    const zoomOut = () => setScale(s => Math.max(0.1, s - 0.1));
-    const resetZoom = () => setScale(1);
-
     return (
-        <div className="flex flex-col h-full bg-[#f9f9fb] dark:bg-zinc-950 overflow-hidden font-sans select-none relative">
-            <Script src="https://cdn.jsdelivr.net/npm/roughjs@4.5.2/bundled/rough.js" onLoad={onScriptLoad} />
-            <ActionMenu handleDownload={handleDownload} />
-            <Toolbar tool={tool} setTool={setTool} isLocked={isLocked} setIsLocked={setIsLocked} />
-            <ZoomControls scale={scale} zoomIn={zoomIn} zoomOut={zoomOut} resetZoom={resetZoom} handleUndo={handleUndo} handleRedo={handleRedo} canUndo={history.length > 0} canRedo={redoStack.length > 0} />
-            
-            <StylePanel 
-                elements={elements} 
-                selectedElementIds={selectedElementIds} 
-                setSelectedElementIds={setSelectedElementIds} 
-                color={color} 
-                setColor={setColor} 
-                strokeWidth={strokeWidth} 
-                setStrokeWidth={setStrokeWidth} 
-                handleClear={handleClear} 
-                updateElement={updateElement}
-                deleteSelected={deleteSelected}
-                bringToFront={bringToFront} 
-                sendToBack={sendToBack} 
+        <div className="relative w-full h-screen overflow-hidden bg-[#fafafa] dark:bg-[#09090b]">
+            <Script 
+                src="https://cdn.jsdelivr.net/npm/roughjs@4.5.2/bundled/rough.js" 
+                onLoad={onScriptLoad}
             />
+            
+            <div className="absolute top-6 left-1/2 -translate-x-1/2 z-50">
+                <Toolbar tool={tool} setTool={setTool} isLocked={isLocked} setIsLocked={setIsLocked} />
+            </div>
+
+            <div className="absolute top-6 right-6 z-50">
+                <ActionMenu 
+                    handleDownload={handleDownload} 
+                />
+            </div>
+
+            <div className="absolute bottom-6 left-6 z-50">
+                <ZoomControls 
+                    scale={scale} 
+                    zoomIn={() => setScale(s => Math.min(10, s * 1.1))} 
+                    zoomOut={() => setScale(s => Math.max(0.1, s * 0.9))} 
+                    resetZoom={() => { setScale(1); setOffset({ x: 0, y: 0 }); }}
+                    handleUndo={handleUndo}
+                    handleRedo={handleRedo}
+                    canUndo={history.length > 0}
+                    canRedo={redoStack.length > 0}
+                />
+            </div>
 
-            <div className="flex-1 relative overflow-hidden bg-white dark:bg-zinc-950">
-                <div className="absolute inset-0 opacity-[0.03] dark:opacity-[0.05] pointer-events-none" style={{ backgroundImage: 'radial-gradient(circle, currentColor 1px, transparent 1px)', backgroundSize: `${20 * scale}px ${20 * scale}px`, backgroundPosition: `${offset.x}px ${offset.y}px` }} />
+            {selectedElementIds.length > 0 && (
+                <div className="absolute top-24 right-6 z-50">
+                    <StylePanel 
+                        elements={elements}
+                        selectedElementIds={selectedElementIds}
+                        setSelectedElementIds={setSelectedElementIds}
+                        color={color} 
+                        setColor={(c) => {
+                            setColor(c);
+                            selectedElementIds.forEach(id => updateElement(id, { color: c }));
+                        }} 
+                        strokeWidth={strokeWidth} 
+                        setStrokeWidth={(w) => {
+                            setStrokeWidth(w);
+                            selectedElementIds.forEach(id => updateElement(id, { strokeWidth: w }));
+                        }}
+                        handleClear={() => { setElements([]); setHistory([]); setRedoStack([]); }}
+                        updateElement={updateElement}
+                        deleteSelected={deleteSelected}
+                        bringToFront={bringToFront}
+                        sendToBack={sendToBack}
+                    />
+                </div>
+            )}
+
+            <div className="w-full h-full cursor-crosshair overflow-hidden">
                 <canvas 
                     ref={canvasRef} 
+                    width={typeof window !== 'undefined' ? window.innerWidth : 1920}
+                    height={typeof window !== 'undefined' ? window.innerHeight : 1080}
                     onMouseDown={handleMouseDown} 
                     onMouseMove={handleMouseMove} 
                     onMouseUp={handleMouseUp} 
diff --git a/components/draw/style-panel.tsx b/components/draw/style-panel.tsx
index 24adfd0..4953cf2 100644
--- a/components/draw/style-panel.tsx
+++ b/components/draw/style-panel.tsx
@@ -1,11 +1,9 @@
 "use client";
 
 import React, { useRef } from 'react';
-import { Palette, Trash2, ArrowUp, ArrowDown, Plus, Layers, MousePointer2, Type } from 'lucide-react';
+import { Palette, Trash2, Plus, Layers, MousePointer2, Type } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
-import { Input } from '@/components/ui/input';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Element } from './types';
 
@@ -41,7 +39,7 @@ export function StylePanel({
     const isCustomColor = !DEFAULT_COLORS.some(c => c.value === color);
 
     const handleDragStart = (e: React.MouseEvent) => {
-        if (e.target instanceof HTMLButtonElement || e.target instanceof HTMLInputElement || (e.target as any).closest('button')) return;
+        if (e.target instanceof HTMLButtonElement || e.target instanceof HTMLInputElement || (e.target as HTMLElement).closest('button')) return;
         const el = e.currentTarget as HTMLElement;
         const startX = e.clientX - el.offsetLeft;
         const startY = e.clientY - el.offsetTop;
diff --git a/components/draw/toolbar.tsx b/components/draw/toolbar.tsx
index 8e2f96e..8c06a24 100644
--- a/components/draw/toolbar.tsx
+++ b/components/draw/toolbar.tsx
@@ -49,7 +49,7 @@ export function Toolbar({ tool, setTool, isLocked, setIsLocked }: ToolbarProps)
             <ToggleGroup 
                 type="single" 
                 value={tool} 
-                onValueChange={(v) => v && setTool(v as any)}
+                onValueChange={(v) => v && setTool(v as ElementType)}
                 className="flex items-center gap-0.5"
             >
                 <Tooltip>
diff --git a/components/draw/types.ts b/components/draw/types.ts
index b6a78c6..b76c0ba 100644
--- a/components/draw/types.ts
+++ b/components/draw/types.ts
@@ -1,4 +1,4 @@
-import { LucideIcon } from "lucide-react";
+
 
 export type ElementType = 'selection' | 'hand' | 'rectangle' | 'diamond' | 'circle' | 'arrow' | 'line' | 'freehand' | 'eraser' | 'text' | 'image';
 
@@ -20,3 +20,24 @@ export interface Point {
     x: number;
     y: number;
 }
+
+export interface RoughOptions {
+    stroke?: string;
+    strokeWidth?: number;
+    roughness?: number;
+    bowing?: number;
+    seed?: number;
+}
+
+export interface RoughGenerator {
+    line: (x1: number, y1: number, x2: number, y2: number, options: RoughOptions) => unknown;
+    rectangle: (x: number, y: number, width: number, height: number, options: RoughOptions) => unknown;
+    polygon: (pts: [number, number][], options: RoughOptions) => unknown;
+    ellipse: (x: number, y: number, width: number, height: number, options: RoughOptions) => unknown;
+    curve: (pts: [number, number][], options: RoughOptions) => unknown;
+}
+
+export interface RoughCanvas {
+    draw: (drawable: unknown) => void;
+    generator: RoughGenerator;
+}
diff --git a/components/dummy/dummy-page.tsx b/components/dummy/dummy-page.tsx
index 7169dfe..14d7138 100644
--- a/components/dummy/dummy-page.tsx
+++ b/components/dummy/dummy-page.tsx
@@ -7,13 +7,11 @@ import {
     Info, 
     FileText, 
     Binary, 
-    Type,
-    FileBox,
     Database,
     Cpu
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Separator } from '@/components/ui/separator';
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -42,7 +40,7 @@ export function DummyFilePage() {
                 link.download = `${fileName}.${extension}`;
                 link.click();
                 URL.revokeObjectURL(url);
-            } catch (e) {
+            } catch {
                 alert("File too large for browser memory. Try a smaller size.");
             }
             setIsGenerating(false);
@@ -104,7 +102,7 @@ export function DummyFilePage() {
                                     />
                                     <Tabs 
                                         value={unit} 
-                                        onValueChange={(v) => setUnit(v as any)} 
+                                        onValueChange={(v) => setUnit(v as 'KB' | 'MB' | 'GB')} 
                                         className="flex-1"
                                     >
                                         <TabsList className="grid w-full grid-cols-3 h-12 bg-muted/50">
diff --git a/components/editor/editor-container.tsx b/components/editor/editor-container.tsx
index d26708c..b0a5234 100644
--- a/components/editor/editor-container.tsx
+++ b/components/editor/editor-container.tsx
@@ -1,21 +1,16 @@
 "use client";
 
 import React, { useState, useRef, useMemo } from 'react';
-import { useRouter } from 'next/navigation';
 import { Button } from "@/components/ui/button";
 import Editor, { OnMount } from '@monaco-editor/react';
 import { useTheme } from 'next-themes';
 import {
     Save,
     FileEdit,
-    Terminal,
     Plus,
     Table as TableIcon,
-    Code,
     Trash,
-    Eye,
     Copy as CopyIcon,
-    Check,
     Settings,
     Type as TypeIcon,
     Code2,
@@ -38,13 +33,10 @@ import {
     DropdownMenuItem,
     DropdownMenuTrigger,
     DropdownMenuSeparator,
-    DropdownMenuLabel,
-    DropdownMenuRadioGroup,
-    DropdownMenuRadioItem,
 } from "@/components/ui/dropdown-menu";
 import { useEditor } from '@/lib/hooks/use-editor';
 import { useLocalStorage } from '@/hooks/use-local-storage';
-import { PREVIEWABLE_FORMATS, ALL_FORMATS, getLanguage } from '@/lib/formats';
+import { ALL_FORMATS, getLanguage } from '@/lib/formats';
 import { Separator } from '@/components/ui/separator';
 import {
     ResizableHandle,
@@ -56,7 +48,6 @@ import { HTMLViewer } from '@/components/shared/html-viewer';
 import { CodeViewer } from '@/components/shared/code-viewer';
 
 export function EditorContainer({ initialContent, initialFormat }: ContainerProps) {
-    const router = useRouter();
     const { resolvedTheme } = useTheme();
     const { content, setContent, format, setFormat, isSaved, setIsSaved } = useEditor({
         initialContent,
@@ -64,119 +55,126 @@ export function EditorContainer({ initialContent, initialFormat }: ContainerProp
     });
 
     const [fileName, setFileName] = useState(`index.${getLanguage(initialFormat)}`);
-    const [copied, setCopied] = useState(false);
     
     // Editor Settings from LocalStorage
     const [prefFontSize, setPrefFontSize] = useLocalStorage('editorFontSize', 14);
     const [prefTabSize, setPrefTabSize] = useLocalStorage('editorTabSize', 4);
     const [prefWordWrap, setPrefWordWrap] = useLocalStorage('editorWordWrap', 'on');
     
-    const [wordWrap, setWordWrap] = useState<"on" | "off">(prefWordWrap as "on" | "off");
-
-    // Sync local wordWrap with preference when preference changes
-    React.useEffect(() => {
-        setWordWrap(prefWordWrap as "on" | "off");
-    }, [prefWordWrap]);
-
     const handleWordWrapToggle = () => {
-        const newVal = wordWrap === "on" ? "off" : "on";
-        setWordWrap(newVal);
+        const newVal = prefWordWrap === 'on' ? 'off' : 'on';
         setPrefWordWrap(newVal);
     };
 
-    const [viewMode, setViewMode] = useState<'code' | 'table'>('code');
     const [cursorPos, setCursorPos] = useState({ line: 1, col: 1 });
     const [showPreview, setShowPreview] = useState(true);
     const [isFullscreen, setIsFullscreen] = useState(false);
-    const [activeTab, setActiveTab] = useState("preview");
-    const [useBootstrap, setUseBootstrap] = useState(false);
-    const [useTailwind, setUseTailwind] = useState(false);
     const editorRef = useRef<any>(null); // eslint-disable-line @typescript-eslint/no-explicit-any
 
     const handleEditorDidMount: OnMount = (editor) => {
         editorRef.current = editor;
         editor.onDidChangeCursorPosition((e) => {
-            setCursorPos({
-                line: e.position.lineNumber,
-                col: e.position.column
-            });
+            setCursorPos({ line: e.position.lineNumber, col: e.position.column });
         });
     };
 
-    const handleFormatChange = (newFormat: Format) => {
-        setFormat(newFormat);
-        const namePart = fileName.substring(0, fileName.lastIndexOf('.')) || fileName;
-        setFileName(`${namePart}.${getLanguage(newFormat)}`);
+    const handleSave = () => {
+        const blob = new Blob([content], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = fileName;
+        link.click();
+        URL.revokeObjectURL(url);
+        setIsSaved(true);
     };
 
     const handleCopy = () => {
         navigator.clipboard.writeText(content);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
+    };
+
+    const handleFormatChange = (newFormat: Format) => {
+        setFormat(newFormat);
+        setFileName(prev => {
+            const parts = prev.split('.');
+            if (parts.length > 1) parts.pop();
+            return [...parts, getLanguage(newFormat)].join('.');
+        });
     };
 
     const handleAutoFormat = async () => {
         try {
             if (format === 'json') {
-                const parsed = JSON.parse(content);
-                setContent(JSON.stringify(parsed, null, 2));
+                setContent(JSON.stringify(JSON.parse(content), null, prefTabSize));
             } else if (format === 'yaml') {
-                const parsed = yaml.load(content);
-                setContent(yaml.dump(parsed));
+                setContent(yaml.dump(yaml.load(content)));
             }
-            setIsSaved(true);
-        } catch (e) {
-            console.error(e);
+        } catch {
+            console.error("Format error");
         }
     };
 
-    const handleSave = () => {
-        setIsSaved(true);
-        const element = document.createElement("a");
-        const file = new Blob([content], { type: 'text/plain' });
-        element.href = URL.createObjectURL(file);
-        const finalName = fileName.includes('.') ? fileName : `${fileName}.${getLanguage(format)}`;
-        element.download = finalName;
-        document.body.appendChild(element);
-        element.click();
-        document.body.removeChild(element);
-    };
-
     const handleNewFile = () => {
         setContent("");
-        setFileName("untitled.txt");
         setIsSaved(true);
-        setViewMode('code');
     };
 
     const handleNewTable = () => {
-        const defaultTable = JSON.stringify([
-            { id: "1", name: "Sample Item", price: "$10.00" },
-            { id: "2", name: "Another Item", price: "$20.00" }
-        ], null, 2);
-        setContent(defaultTable);
-        setFormat('json');
-        setFileName("table.json");
-        setIsSaved(false);
-        setViewMode('table');
+        const csvHeader = "id,name,value\n1,example,data";
+        setContent(csvHeader);
+        setFormat("csv");
+        setFileName("table.csv");
     };
 
-    const isTabularData = useMemo(() => {
-        try {
-            const parsed = JSON.parse(content);
-            return Array.isArray(parsed) && parsed.length > 0 && typeof parsed[0] === 'object';
-        } catch {
-            return false;
+    const tableRows = useMemo<Record<string, string>[] | null>(() => {
+        if (format === 'csv' || format === 'json' || format === 'yaml') {
+            try {
+                if (format === 'csv') {
+                    const lines = content.trim().split('\n');
+                    if (lines.length < 2) return null;
+                    const headers = lines[0].split(',');
+                    return lines.slice(1).map(line => {
+                        const values = line.split(',');
+                        return headers.reduce((obj, header, i) => {
+                            obj[header.trim()] = values[i]?.trim();
+                            return obj;
+                        }, {} as Record<string, string>);
+                    });
+                }
+                if (format === 'json') {
+                    const data = JSON.parse(content);
+                    if (Array.isArray(data) && data.length > 0) {
+                        return data as Record<string, string>[];
+                    }
+                }
+            } catch {
+                return null;
+            }
         }
-    }, [content]);
+        return null;
+    }, [content, format]);
 
-    const isPreviewable = PREVIEWABLE_FORMATS.includes(format.toLowerCase() as Format);
+    const handleTableDataChange = (newData: Record<string, string>[]) => {
+        if (format === 'csv') {
+            if (newData.length === 0) return;
+            const headers = Object.keys(newData[0]);
+            const csv = [
+                headers.join(','),
+                ...newData.map(row => headers.map(h => row[h]).join(','))
+            ].join('\n');
+            setContent(csv);
+        } else if (format === 'json') {
+            setContent(JSON.stringify(newData, null, prefTabSize));
+        }
+    };
+
+    const monacoWordWrap = (prefWordWrap === 'on' || prefWordWrap === 'off') ? prefWordWrap : 'off';
 
     return (
         <div className={`flex flex-col w-full bg-background transition-all duration-300 ${isFullscreen ? "fixed inset-0 z-[200] h-screen" : "h-full border-t"}`}>
             {/* Header / Standard Toolbar */}
-            <div className="flex items-center justify-between px-6 h-14 border-b bg-muted/20 backdrop-blur-md">
-                <div className="flex items-center gap-4">
+            <div className="flex h-11 items-center justify-between px-3 border-b bg-muted/30">
+                <div className="flex items-center gap-3">
                     <DropdownMenu>
                         <DropdownMenuTrigger asChild>
                             <Button variant="ghost" size="sm" className="h-8 px-3 text-xs font-bold uppercase tracking-widest text-muted-foreground gap-2">
@@ -266,6 +264,19 @@ export function EditorContainer({ initialContent, initialFormat }: ContainerProp
                                     ))}
                                 </div>
                             </div>
+                            <div className="space-y-1.5 pt-1">
+                                <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
+                                    <AlignLeft className="size-3" /> Word Wrap
+                                </label>
+                                <Button 
+                                    variant={prefWordWrap === 'on' ? 'secondary' : 'ghost'} 
+                                    size="sm" 
+                                    className="h-7 w-full text-[10px] font-bold"
+                                    onClick={handleWordWrapToggle}
+                                >
+                                    {prefWordWrap === 'on' ? 'Enabled' : 'Disabled'}
+                                </Button>
+                            </div>
                             <DropdownMenuSeparator />
                             <div className="space-y-1.5 pt-1">
                                 <Button variant="ghost" size="sm" onClick={handleNewFile} className="w-full justify-start h-8 text-[10px] font-bold uppercase gap-2">
@@ -319,25 +330,29 @@ export function EditorContainer({ initialContent, initialFormat }: ContainerProp
                                 <Editor
                                     height="100%"
                                     language={getLanguage(format)}
+                                    theme={resolvedTheme === 'dark' ? 'vs-dark' : 'light'}
                                     value={content}
-                                    onChange={(value) => setContent(value || "")}
+                                    onChange={(val) => setContent(val || "")}
                                     onMount={handleEditorDidMount}
-                                    theme={resolvedTheme === 'dark' ? 'vs-dark' : 'light'}
                                     options={{
-                                        minimap: { enabled: false },
                                         fontSize: prefFontSize,
                                         tabSize: prefTabSize,
-                                        wordWrap: wordWrap,
+                                        wordWrap: monacoWordWrap,
+                                        minimap: { enabled: false },
+                                        scrollBeyondLastLine: false,
                                         automaticLayout: true,
-                                        padding: { top: 16 },
+                                        lineNumbers: 'on',
+                                        glyphMargin: false,
+                                        folding: true,
+                                        lineDecorationsWidth: 10,
                                         lineNumbersMinChars: 3,
-                                        scrollBeyondLastLine: false,
+                                        padding: { top: 10, bottom: 10 },
+                                        fontFamily: "'Fira Code', 'JetBrains Mono', monospace",
+                                        fontLigatures: true,
                                     }}
                                 />
-                                {/* Subtle Editor Footer */}
-                                <div className="absolute bottom-0 right-4 h-6 flex items-center gap-4 text-[10px] font-bold text-muted-foreground/40 uppercase z-10 pointer-events-none">
-                                    <span>Line {cursorPos.line}, Col {cursorPos.col}</span>
-                                    <span>{content.length} chars</span>
+                                <div className="absolute bottom-4 right-6 px-2 py-1 bg-background/50 backdrop-blur-sm border rounded text-[9px] font-bold tabular-nums text-muted-foreground select-none pointer-events-none">
+                                    LN {cursorPos.line}, COL {cursorPos.col}
                                 </div>
                             </div>
                         </div>
@@ -345,83 +360,50 @@ export function EditorContainer({ initialContent, initialFormat }: ContainerProp
 
                     {showPreview && (
                         <>
-                            <ResizableHandle withHandle />
-                            <ResizablePanel defaultSize={50} minSize={20}>
-                                <div className="flex flex-col h-full bg-background border-l">
-                                    <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col overflow-hidden">
-                                        <div className="flex items-center justify-between px-4 h-11 border-b bg-muted/10">
-                                            <TabsList className="h-8 bg-muted/50">
-                                                <TabsTrigger value="preview" className="text-[10px] font-bold uppercase py-1.5 h-7">
-                                                    <Eye className="size-3 mr-2" /> Preview
-                                                </TabsTrigger>
-                                                <TabsTrigger value="viewer" className="text-[10px] font-bold uppercase py-1.5 h-7">
-                                                    <Code className="size-3 mr-2" /> Source
-                                                </TabsTrigger>
-                                                {isTabularData && (
-                                                    <TabsTrigger value="table" className="text-[10px] font-bold uppercase py-1.5 h-7">
-                                                        <TableIcon className="size-3 mr-2" /> Data
-                                                    </TabsTrigger>
-                                                )}
-                                            </TabsList>
-
-                                            <div className="flex items-center gap-2">
-                                                {format === 'html' && (
-                                                    <div className="flex items-center gap-1">
-                                                        <Button 
-                                                            variant={useBootstrap ? "secondary" : "ghost"} 
-                                                            size="sm" 
-                                                            className="h-7 text-[10px] uppercase px-2 font-bold"
-                                                            onClick={() => setUseBootstrap(!useBootstrap)}
-                                                        >
-                                                            BS
-                                                        </Button>
-                                                        <Button 
-                                                            variant={useTailwind ? "secondary" : "ghost"} 
-                                                            size="sm" 
-                                                            className="h-7 text-[10px] uppercase px-2 font-bold"
-                                                            onClick={() => setUseTailwind(!useTailwind)}
-                                                        >
-                                                            TW
-                                                        </Button>
-                                                    </div>
-                                                )}
-                                            </div>
+                            <ResizableHandle withHandle className="bg-border/50" />
+                            <ResizablePanel defaultSize={60} minSize={20}>
+                                <div className="h-full bg-background flex flex-col">
+                                    <div className="flex items-center justify-between px-4 h-11 border-b bg-muted/5">
+                                        <div className="flex items-center gap-2">
+                                            <LayoutIcon className="size-4 text-primary" />
+                                            <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">Preview</span>
                                         </div>
+                                    </div>
+                                    <div className="flex-1 overflow-auto custom-scrollbar p-0">
+                                        <Tabs defaultValue="preview" className="h-full flex flex-col">
+                                            <div className="px-4 border-b bg-muted/5">
+                                                <TabsList className="h-9 bg-transparent p-0 gap-4">
+                                                    <TabsTrigger value="preview" className="h-9 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-[10px] font-bold uppercase tracking-widest">Live View</TabsTrigger>
+                                                    {tableRows && <TabsTrigger value="table" className="h-9 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-[10px] font-bold uppercase tracking-widest">Table View</TabsTrigger>}
+                                                    <TabsTrigger value="raw" className="h-9 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-[10px] font-bold uppercase tracking-widest">Raw Output</TabsTrigger>
+                                                </TabsList>
+                                            </div>
 
-                                        <div className="flex-1 relative overflow-hidden">
-                                            <TabsContent value="preview" className="flex-1 relative overflow-auto m-0 p-0 border-none">
-                                                <div className="absolute inset-0">
-                                                    {format === 'html' && <HTMLViewer content={content} useBootstrap={useBootstrap} useTailwind={useTailwind} enableJS={true} />}
-                                                    {format === 'markdown' && (
-                                                        <div className="prose prose-zinc dark:prose-invert max-w-none bg-background p-8 min-h-full">
+                                            <div className="flex-1 overflow-hidden">
+                                                <TabsContent value="preview" className="h-full m-0 p-0 border-none outline-none overflow-auto">
+                                                    {format === 'html' ? (
+                                                        <HTMLViewer content={content} />
+                                                    ) : format === 'markdown' ? (
+                                                        <div className="p-8 max-w-4xl mx-auto prose dark:prose-invert">
                                                             <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
                                                         </div>
+                                                    ) : (
+                                                        <CodeViewer content={content} language={getLanguage(format)} />
                                                     )}
-                                                    {format === 'svg' && <div className="flex items-center justify-center p-8 bg-background h-full overflow-auto" dangerouslySetInnerHTML={{ __html: content }} />}
-                                                    {['json', 'xml', 'yaml', 'css', 'js'].includes(format) && (
-                                                        <CodeViewer content={content} language={getLanguage(format)} wrapLines={true} />
-                                                    )}
-                                                    {!['html', 'markdown', 'svg', 'json', 'xml', 'yaml', 'css', 'js'].includes(format) && (
-                                                        <div className="flex flex-col items-center justify-center text-center h-full p-20 opacity-30">
-                                                            <LayoutIcon className="size-16 mb-4 text-primary" />
-                                                            <p className="text-sm font-bold uppercase tracking-widest">No Live Preview</p>
-                                                        </div>
-                                                    )}
-                                                </div>
-                                            </TabsContent>
-
-                                            <TabsContent value="viewer" className="h-full m-0 p-0 bg-background">
-                                                <CodeViewer content={content} language={getLanguage(format)} wrapLines={wordWrap === 'on'} />
-                                            </TabsContent>
-
-                                            <TabsContent value="table" className="h-full m-0 p-8 overflow-auto">
-                                                <TableViewer data={JSON.parse(content || '[]')} onDataChange={(newData) => {
-                                                    setContent(JSON.stringify(newData, null, 2));
-                                                    setIsSaved(false);
-                                                }} />
-                                            </TabsContent>
-                                        </div>
-                                    </Tabs>
+                                                </TabsContent>
+                                                {tableRows && (
+                                                    <TabsContent value="table" className="h-full m-0 p-0 border-none outline-none overflow-auto p-6">
+                                                        <TableViewer data={tableRows} onDataChange={handleTableDataChange} />
+                                                    </TabsContent>
+                                                )}
+                                                <TabsContent value="raw" className="h-full m-0 p-0 border-none outline-none">
+                                                    <pre className="p-4 text-xs font-mono whitespace-pre-wrap break-all h-full overflow-auto bg-muted/5">
+                                                        {content}
+                                                    </pre>
+                                                </TabsContent>
+                                            </div>
+                                        </Tabs>
+                                    </div>
                                 </div>
                             </ResizablePanel>
                         </>
@@ -429,6 +411,22 @@ export function EditorContainer({ initialContent, initialFormat }: ContainerProp
                 </ResizablePanelGroup>
             </div>
 
+            {/* Footer / Status Bar */}
+            <div className="h-7 border-t bg-muted/30 px-3 flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                    <div className="flex items-center gap-1.5">
+                        <div className={`size-1.5 rounded-full ${isSaved ? 'bg-emerald-500' : 'bg-amber-500'}`} />
+                        <span className="text-[9px] font-bold uppercase tracking-tight text-muted-foreground">{isSaved ? 'Synced' : 'Modified'}</span>
+                    </div>
+                    <Separator orientation="vertical" className="h-3" />
+                    <span className="text-[9px] font-bold text-muted-foreground">{content.length} characters</span>
+                </div>
+                <div className="flex items-center gap-3">
+                    <span className="text-[9px] font-bold text-muted-foreground uppercase tracking-widest">{format}</span>
+                    <Separator orientation="vertical" className="h-3" />
+                    <span className="text-[9px] font-bold text-muted-foreground tabular-nums">UTF-8</span>
+                </div>
+            </div>
         </div>
     );
 }
diff --git a/components/layout/app-sidebar.tsx b/components/layout/app-sidebar.tsx
index 7f814cf..b822f76 100644
--- a/components/layout/app-sidebar.tsx
+++ b/components/layout/app-sidebar.tsx
@@ -7,7 +7,6 @@ import {
     ChevronLeft,
     ChevronRight,
     Command,
-    Home,
     Search
 } from "lucide-react";
 
diff --git a/components/layout/client-layout.tsx b/components/layout/client-layout.tsx
index a51fa4d..9ba7b0b 100644
--- a/components/layout/client-layout.tsx
+++ b/components/layout/client-layout.tsx
@@ -1,26 +1,21 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { usePathname } from "next/navigation";
 import {SidebarProvider} from "@/components/ui/sidebar";
 import {SplashScreen} from "@/components/layout/splash-screen";
 import {Navbar} from "@/components/layout/navbar";
-import Footer from "@/components/common/Footer";
 import {AppSidebar} from "@/components/layout/app-sidebar";
 
 export function ClientLayout({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
   const isHomePage = pathname === "/";
-  const [showSplash, setShowSplash] = useState(true);
-
-  useEffect(() => {
-    if (typeof window !== "undefined" && localStorage.getItem("hasSeenSplash_v1")) {
-      setShowSplash(false);
+  const [showSplash, setShowSplash] = useState(() => {
+    if (typeof window !== "undefined") {
+      return !localStorage.getItem("hasSeenSplash_v1");
     }
-  }, []);
-
-    const [searchQuery, setSearchQuery] = useState("");
-    const [activeCategory, setActiveCategory] = useState("all");
+    return true;
+  });
 
     const handleSplashComplete = () => {
     setShowSplash(false);
@@ -40,12 +35,7 @@ export function ClientLayout({ children }: { children: React.ReactNode }) {
         >
 
             {isHomePage && (
-                <Navbar
-                    searchQuery={searchQuery}
-                    setSearchQuery={setSearchQuery}
-                    activeCategory={activeCategory}
-                    setActiveCategory={setActiveCategory}
-                />
+                <Navbar />
             )}
 
             <div className={`flex flex-1 ${isHomePage ? 'pt-16' : 'pt-0'} overflow-hidden w-full`}>
diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index 4578509..38f3f83 100644
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -8,16 +8,9 @@ import Link from 'next/link';
 
 import { useSidebar } from "@/components/ui/sidebar";
 
-interface NavbarProps {
-    searchQuery?: string;
-    setSearchQuery?: (query: string) => void;
-    activeCategory?: string;
-    setActiveCategory?: (category: string) => void;
-}
-
-export function Navbar({searchQuery, setSearchQuery, activeCategory, setActiveCategory}: NavbarProps = {}) {
+export function Navbar() {
     const { theme, setTheme } = useTheme();
-    const { open, state } = useSidebar();
+    const { state } = useSidebar();
 
     return (
         <nav className={`fixed top-0 right-0 z-[100] border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 transition-all duration-300 ease-in-out ${state === 'collapsed' ? 'left-0' : 'left-[var(--sidebar-width)]'}`}>
diff --git a/components/time/TimePage.tsx b/components/time/TimePage.tsx
index 381ba70..a97061a 100644
--- a/components/time/TimePage.tsx
+++ b/components/time/TimePage.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import { SidebarProvider } from "@/components/ui/sidebar";
-import { AppSidebar } from "@/components/layout/app-sidebar";
+
 import { EpochConverter } from "./epoch-converter";
 
 export function TimePage() {
diff --git a/components/time/epoch-converter.tsx b/components/time/epoch-converter.tsx
index ff143a4..fd743a0 100644
--- a/components/time/epoch-converter.tsx
+++ b/components/time/epoch-converter.tsx
@@ -10,7 +10,6 @@ import {
     Check, 
     RefreshCw, 
     Zap, 
-    LayoutGrid, 
     Table as TableIcon, 
     ArrowRight 
 } from "lucide-react";
@@ -31,6 +30,60 @@ import { useLocalStorage } from "@/hooks/use-local-storage";
 
 type CopiedField = string | null;
 
+interface CopyButtonProps {
+    value: string;
+    field: string;
+    className?: string;
+    copied: string | null;
+    onCopy: (text: string, field: string) => void;
+}
+
+const CopyButton = ({ value, field, className, copied, onCopy }: CopyButtonProps) => (
+    <button
+        onClick={() => onCopy(value, field)}
+        className={cn("flex items-center justify-center size-8 rounded-lg hover:bg-zinc-200 dark:hover:bg-zinc-800 text-zinc-400 hover:text-primary transition-all active:scale-90", className)}
+        title="Copy"
+    >
+        {copied === field ? (
+            <Check className="size-4 text-emerald-500" />
+        ) : (
+            <Copy className="size-4" />
+        )}
+    </button>
+);
+
+interface TableRowProps {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    icon: any;
+    label: string;
+    value: string;
+    field: string;
+    mono?: boolean;
+    isPreferred?: boolean;
+    copied: string | null;
+    onCopy: (text: string, field: string) => void;
+}
+
+const TableRow = ({ icon: Icon, label, value, field, mono = true, isPreferred = false, copied, onCopy }: TableRowProps) => (
+    <tr className={cn(
+        "border-b border-muted/30 group hover:bg-muted/5 transition-colors",
+        isPreferred && "bg-primary/[0.03] border-l-2 border-l-primary"
+    )}>
+        <td className="py-3 pl-4 pr-2">
+            <div className="flex items-center gap-3">
+                <Icon className={cn("size-3.5 transition-colors", isPreferred ? "text-primary" : "text-muted-foreground group-hover:text-primary")} />
+                <span className={cn("text-[10px] font-bold uppercase tracking-wider", isPreferred ? "text-primary" : "text-muted-foreground")}>{label}</span>
+            </div>
+        </td>
+        <td className={cn("py-3 px-4 text-sm font-medium tabular-nums truncate", mono ? "font-mono" : "text-foreground", isPreferred && "text-primary font-bold")}>
+            {value}
+        </td>
+        <td className="py-3 pl-2 pr-4 text-right">
+            <CopyButton value={value} field={field} copied={copied} onCopy={onCopy} />
+        </td>
+    </tr>
+);
+
 export function EpochConverter() {
     // Settings
     const [prefTimeZone] = useLocalStorage('timeZone', 'UTC');
@@ -106,39 +159,6 @@ export function EpochConverter() {
         setDateInput(toLocalDatetimeString(new Date()));
     };
 
-    const CopyButton = ({ value, field, className }: { value: string; field: string; className?: string }) => (
-        <button
-            onClick={() => copyToClipboard(value, field)}
-            className={cn("flex items-center justify-center size-8 rounded-lg hover:bg-zinc-200 dark:hover:bg-zinc-800 text-zinc-400 hover:text-primary transition-all active:scale-90", className)}
-            title="Copy"
-        >
-            {copied === field ? (
-                <Check className="size-4 text-emerald-500" />
-            ) : (
-                <Copy className="size-4" />
-            )}
-        </button>
-    );
-
-    const TableRow = ({ icon: Icon, label, value, field, mono = true, isPreferred = false }: any) => (
-        <tr className={cn(
-            "border-b border-muted/30 group hover:bg-muted/5 transition-colors",
-            isPreferred && "bg-primary/[0.03] border-l-2 border-l-primary"
-        )}>
-            <td className="py-3 pl-4 pr-2">
-                <div className="flex items-center gap-3">
-                    <Icon className={cn("size-3.5 transition-colors", isPreferred ? "text-primary" : "text-muted-foreground group-hover:text-primary")} />
-                    <span className={cn("text-[10px] font-bold uppercase tracking-wider", isPreferred ? "text-primary" : "text-muted-foreground")}>{label}</span>
-                </div>
-            </td>
-            <td className={cn("py-3 px-4 text-sm font-medium tabular-nums truncate", mono ? "font-mono" : "text-foreground", isPreferred && "text-primary font-bold")}>
-                {value}
-            </td>
-            <td className="py-3 pl-2 pr-4 text-right">
-                <CopyButton value={value} field={field} />
-            </td>
-        </tr>
-    );
 
     return (
         <div className="flex flex-col w-full h-full bg-background text-foreground overflow-hidden">
@@ -230,10 +250,10 @@ export function EpochConverter() {
                                                 <div className="rounded-lg border border-muted/50 overflow-hidden animate-in fade-in slide-in-from-top-2 duration-300">
                                                     <table className="w-full text-left border-collapse">
                                                         <tbody>
-                                                            <TableRow icon={Globe} label="GMT / UTC" value={parsedDate.toUTCString()} field="utc" isPreferred={prefTimeZone === 'UTC'} />
-                                                            <TableRow icon={Calendar} label="Local Time" value={parsedDate.toLocaleString()} field="local" isPreferred={prefTimeZone === 'Local'} />
-                                                            <TableRow icon={Clock} label="ISO 8601" value={parsedDate.toISOString()} field="iso" />
-                                                            <TableRow icon={Timer} label="Relative" value={formatRelativeTime(parsedDate)} field="rel" mono={false} />
+                                                            <TableRow icon={Globe} label="GMT / UTC" value={parsedDate.toUTCString()} field="utc" isPreferred={prefTimeZone === 'UTC'} copied={copied} onCopy={copyToClipboard} />
+                                                            <TableRow icon={Calendar} label="Local Time" value={parsedDate.toLocaleString()} field="local" isPreferred={prefTimeZone === 'Local'} copied={copied} onCopy={copyToClipboard} />
+                                                            <TableRow icon={Clock} label="ISO 8601" value={parsedDate.toISOString()} field="iso" copied={copied} onCopy={copyToClipboard} />
+                                                            <TableRow icon={Timer} label="Relative" value={formatRelativeTime(parsedDate)} field="rel" mono={false} copied={copied} onCopy={copyToClipboard} />
                                                         </tbody>
                                                     </table>
                                                     <div className="grid grid-cols-2 border-t border-muted/50 divide-x divide-muted/50 bg-muted/5">
@@ -304,8 +324,8 @@ export function EpochConverter() {
                                                     <div className="rounded-lg border border-muted/50 overflow-hidden">
                                                         <table className="w-full text-left border-collapse">
                                                             <tbody>
-                                                                <TableRow icon={RefreshCw} label="Unix Seconds" value={String(dateEpochSeconds)} field="d-sec" isPreferred={prefTimeFormat === 'seconds'} />
-                                                                <TableRow icon={Zap} label="Unix Millis" value={String(dateEpochMillis)} field="d-ms" isPreferred={prefTimeFormat === 'millis'} />
+                                                                <TableRow icon={RefreshCw} label="Unix Seconds" value={String(dateEpochSeconds)} field="d-sec" isPreferred={prefTimeFormat === 'seconds'} copied={copied} onCopy={copyToClipboard} />
+                                                                <TableRow icon={Zap} label="Unix Millis" value={String(dateEpochMillis)} field="d-ms" isPreferred={prefTimeFormat === 'millis'} copied={copied} onCopy={copyToClipboard} />
                                                             </tbody>
                                                         </table>
                                                     </div>
diff --git a/components/view/viewer-container.tsx b/components/view/viewer-container.tsx
index e441c94..1aacf3a 100644
--- a/components/view/viewer-container.tsx
+++ b/components/view/viewer-container.tsx
@@ -33,8 +33,7 @@ import {
     Download,
     Trash2,
     Type,
-    Layout as LayoutIcon,
-    Braces
+    Layout as LayoutIcon
 } from "lucide-react";
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -74,17 +73,10 @@ export function ViewerContainer({ initialContent, initialFormat }: ContainerProp
     const [prefTabSize, setPrefTabSize] = useLocalStorage('editorTabSize', 4);
     const [prefWordWrap, setPrefWordWrap] = useLocalStorage('editorWordWrap', 'off');
     
-    const [wordWrap, setWordWrap] = useState<"on" | "off">(prefWordWrap as "on" | "off");
     const [fileName, setFileName] = useState(`view.${getLanguage(initialFormat)}`);
 
-    // Sync local wordWrap with preference when preference changes
-    React.useEffect(() => {
-        setWordWrap(prefWordWrap as "on" | "off");
-    }, [prefWordWrap]);
-
     const handleWordWrapToggle = () => {
-        const newVal = wordWrap === "on" ? "off" : "on";
-        setWordWrap(newVal);
+        const newVal = prefWordWrap === "on" ? "off" : "on";
         setPrefWordWrap(newVal);
     };
 
@@ -294,6 +286,19 @@ export function ViewerContainer({ initialContent, initialFormat }: ContainerProp
                                     ))}
                                 </div>
                             </div>
+                            <div className="space-y-1.5 pt-1">
+                                <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
+                                    <AlignLeft className="size-3" /> Word Wrap
+                                </label>
+                                <Button 
+                                    variant={prefWordWrap === 'on' ? 'secondary' : 'ghost'} 
+                                    size="sm" 
+                                    className="h-7 w-full text-[10px] font-bold"
+                                    onClick={handleWordWrapToggle}
+                                >
+                                    {prefWordWrap === 'on' ? 'Enabled' : 'Disabled'}
+                                </Button>
+                            </div>
                         </DropdownMenuContent>
                     </DropdownMenu>
 
@@ -349,7 +354,7 @@ export function ViewerContainer({ initialContent, initialFormat }: ContainerProp
                                                 minimap: { enabled: false },
                                                 fontSize: prefFontSize,
                                                 tabSize: prefTabSize,
-                                                wordWrap: wordWrap,
+                                                wordWrap: prefWordWrap as "on" | "off",
                                                 automaticLayout: true,
                                                 padding: { top: 16 },
                                                 lineNumbersMinChars: 3,
diff --git a/components/workspace/workspace-container.tsx b/components/workspace/workspace-container.tsx
index 9b354a9..5cf9d6f 100644
--- a/components/workspace/workspace-container.tsx
+++ b/components/workspace/workspace-container.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import React, { useState, useRef, useMemo } from 'react';
-import { useRouter } from 'next/navigation';
 import { Button } from "@/components/ui/button";
 import Editor, { OnMount } from '@monaco-editor/react';
 import { useTheme } from 'next-themes';
@@ -12,7 +11,6 @@ import {
     Code,
     Eye,
     Copy as CopyIcon,
-    Check,
     Braces,
     Layout,
     ChevronDown,
@@ -23,8 +21,7 @@ import {
     Type as TypeIcon,
     Code2,
     Download,
-    Trash,
-    Type
+    Trash
 } from "lucide-react";
 import { TableViewer } from '@/components/shared/table-viewer';
 import { HTMLViewer } from '@/components/shared/html-viewer';
@@ -46,7 +43,7 @@ import {
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { useEditor } from '@/lib/hooks/use-editor';
 import { useLocalStorage } from '@/hooks/use-local-storage';
-import { PREVIEWABLE_FORMATS, ALL_FORMATS, getLanguage } from '@/lib/formats';
+import {  ALL_FORMATS, getLanguage } from '@/lib/formats';
 import { Separator } from '@/components/ui/separator';
 import { format as formatSql } from 'sql-formatter';
 import * as prettier from 'prettier/standalone';
@@ -72,7 +69,7 @@ export function WorkspaceContainer({ initialContent, initialFormat }: ContainerP
 
     // UI State
     const [fileName, setFileName] = useState(`index.${getLanguage(initialFormat)}`);
-    const [copied, setCopied] = useState(false);
+
     
     // Editor Settings from LocalStorage
     const [prefFontSize, setPrefFontSize] = useLocalStorage('editorFontSize', 14);
@@ -133,8 +130,6 @@ export function WorkspaceContainer({ initialContent, initialFormat }: ContainerP
 
     const handleCopy = () => {
         navigator.clipboard.writeText(content);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
     };
 
     const handleAutoFormat = async () => {
diff --git a/hooks/use-local-storage.ts b/hooks/use-local-storage.ts
index b2e7ace..64fbe4b 100644
--- a/hooks/use-local-storage.ts
+++ b/hooks/use-local-storage.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 
 export function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((val: T) => T)) => void] {
     // State to store our value

From b3c4517cc5e49cbc7a56e2edd6df79377990ea6a Mon Sep 17 00:00:00 2001
From: Nishanth <nishanthkj12@gmail.com>
Date: Fri, 1 May 2026 00:43:59 +0530
Subject: [PATCH 17/18] chore: remove obsolete or unused files

---
 .github/workflows/deploy.yml | 65 ------------------------------------
 1 file changed, 65 deletions(-)
 delete mode 100644 .github/workflows/deploy.yml

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
deleted file mode 100644
index e96179b..0000000
--- a/.github/workflows/deploy.yml
+++ /dev/null
@@ -1,65 +0,0 @@
-name: Deploy to GitHub Pages
-
-on:
-  push:
-    branches: ["**"]
-  pull_request:
-    branches: ["**"]
-
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Install Rust
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          targets: wasm32-unknown-unknown
-
-      - name: Install wasm-pack
-        run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
-
-      - name: Build WASM
-        run: |
-          cd wasm
-          wasm-pack build --target web
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: "20"
-          cache: "npm"
-
-      - name: Install dependencies
-        run: npm i -f
-
-      - name: Lint
-        run: npm run lint
-
-      - name: Build Next.js
-        run: npm run build
-
-      - name: Upload artifact
-        if: github.event_name == 'push'
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: ./out
-
-  deploy:
-    if: github.event_name == 'push'
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    needs: build
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4

From e4c286aa031a840fc269624b6ea1afa59d6d0d85 Mon Sep 17 00:00:00 2001
From: Nishanth <nishanthkj12@gmail.com>
Date: Fri, 1 May 2026 00:52:40 +0530
Subject: [PATCH 18/18] chore: downgrade @eslint/js and eslint to version
 9.21.0

---
 package-lock.json | 33 ++++++---------------------------
 package.json      |  4 ++--
 2 files changed, 8 insertions(+), 29 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 147759b..1a89663 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -67,7 +67,7 @@
         "zod": "^4.3.6"
       },
       "devDependencies": {
-        "@eslint/js": "^10.0.1",
+        "@eslint/js": "^9.21.0",
         "@tailwindcss/postcss": "^4",
         "@types/hast": "^3.0.4",
         "@types/mdast": "^4.0.4",
@@ -75,7 +75,7 @@
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "@types/unist": "^3.0.3",
-        "eslint": "^9.39.4",
+        "eslint": "^9.21.0",
         "eslint-config-next": "^16.1.4",
         "tailwindcss": "^4",
         "tw-animate-css": "^1.4.0",
@@ -492,24 +492,16 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-10.0.1.tgz",
-      "integrity": "sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==",
+      "version": "9.39.4",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.4.tgz",
+      "integrity": "sha512-nE7DEIchvtiFTwBw4Lfbu59PG+kCofhjsKaCWzxTpt4lfRjRMqG6uMBzKXuEcyXhOHoUp9riAm7/aWYGhXZ9cw==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": "^20.19.0 || ^22.13.0 || >=24"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "url": "https://eslint.org/donate"
-      },
-      "peerDependencies": {
-        "eslint": "^10.0.0"
-      },
-      "peerDependenciesMeta": {
-        "eslint": {
-          "optional": true
-        }
       }
     },
     "node_modules/@eslint/object-schema": {
@@ -5694,19 +5686,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint/node_modules/@eslint/js": {
-      "version": "9.39.4",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.4.tgz",
-      "integrity": "sha512-nE7DEIchvtiFTwBw4Lfbu59PG+kCofhjsKaCWzxTpt4lfRjRMqG6uMBzKXuEcyXhOHoUp9riAm7/aWYGhXZ9cw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "url": "https://eslint.org/donate"
-      }
-    },
     "node_modules/espree": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
diff --git a/package.json b/package.json
index 20e087b..c14965f 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
     "zod": "^4.3.6"
   },
   "devDependencies": {
-    "@eslint/js": "^10.0.1",
+    "@eslint/js": "^9.21.0",
     "@tailwindcss/postcss": "^4",
     "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.4",
@@ -76,7 +76,7 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/unist": "^3.0.3",
-    "eslint": "^9.39.4",
+    "eslint": "^9.21.0",
     "eslint-config-next": "^16.1.4",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.4.0",