diff --git a/apps/web/app/admin/page.tsx b/apps/web/app/admin/page.tsx
index 23b827b..d306298 100644
--- a/apps/web/app/admin/page.tsx
+++ b/apps/web/app/admin/page.tsx
@@ -1,555 +1,869 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { useRouter } from "next/navigation";
 import { signOut } from "@/lib/auth-client";
 import { trpc } from "@/lib/trpc";
 import { PIN_CATEGORIES, getPinColor } from "@/data/pin-categories";
 import { useTheme } from "@/lib/ThemeContext";
+import Link from "next/link";
 
 export default function AdminDashboard() {
-    const router = useRouter();
-
-    const { data, isLoading } = trpc.user.getCurrent.useQuery();
-
-    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-    const { theme, toggleTheme } = useTheme();
-    const [activeSection, setActiveSection] = useState("overview");
-
-    useEffect(() => {
-        const observer = new IntersectionObserver(
-            (entries) => {
-                entries.forEach((entry) => {
-                    if (entry.isIntersecting) {
-                        setActiveSection(entry.target.id);
-                    }
-                });
-            },
-            {
-                root: document.querySelector('.content-area'),
-                rootMargin: "-10% 0px -70% 0px"
-            }
-        );
-
-        const sections = document.querySelectorAll(".dashboard-section");
-        sections.forEach((section) => observer.observe(section));
-
-        return () => observer.disconnect();
-    }, []);
-
-    const scrollToSection = (sectionId: string) => {
-        const element = document.getElementById(sectionId);
-        if (element) {
-            element.scrollIntoView({ behavior: 'smooth', block: 'start' });
-            setActiveSection(sectionId);
-            if (window.innerWidth <= 768) setIsSidebarOpen(false);
-        }
-    };
-
-    const goToMap = () => router.push("/");
-
-    const handleSignOut = async () => {
-        await signOut();
-        router.refresh();
-    };
-
-    const globalPinStats = {
-        totalPins: 1240,
-        verifiedPins: 1105,
-        pendingPins: 85,
-        rejectedPins: 50,
-        categoryBreakdown: {
-            academic: 450,
-            food: 320,
-            social: 150,
-            transit: 200,
-            utility: 120,
-        }
-    };
-
-    const globalVerificationRate = Math.round((globalPinStats.verifiedPins / globalPinStats.totalPins) * 100) || 0;
-
-    const globalUserStats = {
-        totalUsers: 342,
-        totalComments: 1840,
-        avgPins: 3.6,
-        avgComments: 5.3,
-        newUsers7Days: 14,
-        newUsers30Days: 45,
-    };
-
-    const globalPendingPins = [
-        { id: "gp1", title: "Palma Hall Annex", lat: 14.6534, lng: 121.0691, type: "academic", submittedBy: "u1" },
-        { id: "gp2", title: "KNL Tricycle Terminal", lat: 14.6552, lng: 121.0621, type: "transit", submittedBy: "u2" },
-        { id: "gp3", title: "Gyud Food", lat: 14.6542, lng: 121.0665, type: "food", submittedBy: "u3" },
-    ];
-
-    const globalVerifiedPins = [
-        { id: "v1", title: "Main Library", lat: 14.6540, lng: 121.0660, type: "academic", submittedBy: "u1" },
-        { id: "v2", title: "Area 2 Kiosk 4", lat: 14.6530, lng: 121.0685, type: "food", submittedBy: "u2" },
-        { id: "v3", title: "AS Parking", lat: 14.6538, lng: 121.0688, type: "utility", submittedBy: "u3" },
-    ];
-
-    const recentUsers = [
-        { id: "u1", name: "User 1", email: "user1@up.edu.ph", joinedAt: "2 hours ago" },
-        { id: "u2", name: "User 2", email: "user2@up.edu.ph", joinedAt: "5 hours ago" },
-        { id: "u3", name: "User 3", email: "user3@up.edu.ph", joinedAt: "1 day ago" },
-        { id: "u4", name: "User 4", email: "user4@up.edu.ph", joinedAt: "2 days ago" },
-    ];
-
-    const topUsers = [
-        { id: "u1", name: "User 1", pinCount: 142, rank: 1 },
-        { id: "u2", name: "User 2", pinCount: 89, rank: 2 },
-        { id: "u3", name: "User 3", pinCount: 75, rank: 3 },
-        { id: "u4", name: "User 4", pinCount: 60, rank: 4 },
-    ];
-
-    return (
-        <div className="dashboard-layout">
-            {/* --- MOBILE OVERLAY --- */}
-            {isSidebarOpen && (
-                <div
-                    className="mobile-overlay"
-                    onClick={() => setIsSidebarOpen(false)}
-                />
-            )}
-
-            {/* --- SIDEBAR --- */}
-            <aside className={`sidebar ${isSidebarOpen ? "open" : ""}`}>
-                <div className="sidebar-header">
-                    <h2 className="brand">UP WAYPOINT</h2>
-                </div>
-
-                <nav className="sidebar-nav custom-vertical-scrollbar">
-                    <div className="nav-group">
-                        <span className="nav-label">COMMAND CENTER</span>
-
-                        <button
-                            className={`nav-item ${activeSection === 'overview' ? 'active' : ''}`}
-                            onClick={() => scrollToSection('overview')}
-                        >
-                            OVERVIEW
-                        </button>
-
-                        <button
-                            className={`nav-item ${activeSection === 'pin-management' ? 'active' : ''}`}
-                            onClick={() => scrollToSection('pin-management')}
-                        >
-                            PIN MANAGEMENT
-                        </button>
-
-                        <button
-                            className={`nav-item ${activeSection === 'user-management' ? 'active' : ''}`}
-                            onClick={() => scrollToSection('user-management')}
-                        >
-                            USER MANAGEMENT
-                        </button>
-
-                        <button className="nav-item" onClick={goToMap}>RETURN TO MAP</button>
-                    </div>
-
-                    <div className="nav-group" style={{ marginTop: '24px' }}>
-                        <span className="nav-label">DISPLAY SETTINGS</span>
-                        <button
-                            className="nav-item theme-toggle-btn"
-                            onClick={toggleTheme}
-                        >
-                            <span>UI THEME</span>
-                            <div className="theme-status">
-                                {theme === "dark" ? (
-                                    <>
-                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--text-primary)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                                            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-                                        </svg>
-                                        <span style={{ color: "var(--neon-blue)" }}>NIGHT</span>
-                                    </>
-                                ) : (
-                                    <>
-                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--pin-transit)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                                            <circle cx="12" cy="12" r="5"></circle>
-                                            <line x1="12" y1="1" x2="12" y2="3"></line>
-                                            <line x1="12" y1="21" x2="12" y2="23"></line>
-                                            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
-                                            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
-                                            <line x1="1" y1="12" x2="3" y2="12"></line>
-                                            <line x1="21" y1="12" x2="23" y2="12"></line>
-                                            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
-                                            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
-                                        </svg>
-                                        <span style={{ color: "var(--pin-transit)" }}>DAY</span>
-                                    </>
-                                )}
-                            </div>
-                        </button>
-                    </div>
-                </nav>
-
-                <div className="sidebar-footer">
-                    <button className="sign-out-btn" onClick={handleSignOut}>
-                        SIGN OUT
-                    </button>
-                </div>
-            </aside>
-
-            <div className="main-wrapper">
-                {/* --- HEADER --- */}
-                <header className="dashboard-header">
-                    <div className="header-left">
-                        <button
-                            className="hamburger-btn"
-                            onClick={() => setIsSidebarOpen(true)}
-                        >
-                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                                <line x1="3" y1="12" x2="21" y2="12"></line>
-                                <line x1="3" y1="6" x2="21" y2="6"></line>
-                                <line x1="3" y1="18" x2="21" y2="18"></line>
-                            </svg>
-                        </button>
-                        <h1 className="header-title" style={{ color: '#ff4d4d' }}>Admin Dashboard</h1>
-                    </div>
-                </header>
-
-                {/* --- MAIN --- */}
-                <main className="content-area custom-vertical-scrollbar">
-                    <div className="content-container">
-                        <div className="greeting-section">
-                            <h2 className="greeting-title">
-                                {isLoading ? "LOADING..." : `Welcome, ${data?.name ? data.name.toUpperCase() : "ADMIN"}!`}
-                            </h2>
-                            <p className="greeting-subtitle">You have accessed the restricted area. 🚨</p>
-                        </div>
-
-                        <div className="dashboard-sections">
-                            <section id="overview" className="dashboard-section">
-                                <h2 className="section-title">OVERVIEW</h2>
-                                <div className="dashboard-grid">
-                                    <div className="module-card">
-                                        <div className="card-header">
-                                            <h3>OVERALL PIN STATISTICS</h3>
-                                        </div>
-                                        <div className="card-body telemetry-body">
-
-                                            {/* Top Stats Grid */}
-                                            <div className="telemetry-top-grid">
-                                                <div className="stat-block">
-                                                    <span className="stat-label">TOTAL PINS IN MAP</span>
-                                                    <span className="stat-value">{globalPinStats.totalPins}</span>
-                                                </div>
-                                                <div className="stat-block">
-                                                    <span className="stat-label">AWAITING ACTION</span>
-                                                    <span className="stat-value" style={{ color: 'var(--neon-yellow, #FFD700)' }}>
-                                                        {globalPinStats.pendingPins}
-                                                    </span>
-                                                </div>
-                                            </div>
-
-                                            <div className="integrity-section">
-                                                <div className="integrity-header">
-                                                    <span className="stat-label">GLOBAL VERIFICATION</span>
-                                                    <span className="integrity-percent" style={{ color: 'var(--pin-food)' }}>
-                                                        {globalVerificationRate}%
-                                                    </span>
-                                                </div>
-                                                <div className="progress-track">
-                                                    <div
-                                                        className="progress-fill"
-                                                        style={{
-                                                            width: `${globalVerificationRate}%`,
-                                                            background: 'var(--pin-food)',
-                                                            boxShadow: '0 0 10px color-mix(in srgb, var(--pin-food) 50%, transparent)'
-                                                        }}
-                                                    ></div>
-                                                </div>
-                                                <div className="integrity-details">
-                                                    <span className="detail-item verified">{globalPinStats.verifiedPins} VERIFIED</span>
-                                                    <span className="detail-item pending">{globalPinStats.pendingPins} PENDING</span>
-                                                    <span className="detail-item rejected">{globalPinStats.rejectedPins} REJECTED</span>
-                                                </div>
-                                            </div>
-
-                                            <div className="distribution-section">
-                                                <span className="stat-label">CATEGORY BREAKDOWN</span>
-                                                <div className="category-list">
-                                                    {PIN_CATEGORIES.map((category) => {
-                                                        const count = globalPinStats.categoryBreakdown[category.id as keyof typeof globalPinStats.categoryBreakdown] || 0;
-                                                        const percentage = globalPinStats.totalPins > 0 ? (count / globalPinStats.totalPins) * 100 : 0;
-
-                                                        return (
-                                                            <div key={category.id} className="category-row">
-                                                                <div className="cat-info">
-                                                                    <span className="cat-name" style={{ color: category.color }}>{category.label}</span>
-                                                                    <span className="cat-count">{count}</span>
-                                                                </div>
-                                                                <div className="cat-track">
-                                                                    <div
-                                                                        className="cat-fill"
-                                                                        style={{
-                                                                            width: `${percentage}%`,
-                                                                            backgroundColor: category.color,
-                                                                            boxShadow: `0 0 10px color-mix(in srgb, ${category.color} 50%, transparent)`
-                                                                        }}
-                                                                    ></div>
-                                                                </div>
-                                                            </div>
-                                                        );
-                                                    })}
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <div className="module-card">
-                                        <div className="card-header">
-                                            <h3>OVERALL USER STATISTICS</h3>
-                                        </div>
-
-                                        <div className="card-body telemetry-body">
-                                            <div className="telemetry-top-grid">
-                                                <div className="stat-block">
-                                                    <span className="stat-label">TOTAL USERS</span>
-                                                    <span className="stat-value">{globalUserStats.totalUsers}</span>
-                                                </div>
-                                                <div className="stat-block">
-                                                    <span className="stat-label">TOTAL COMMENTS</span>
-                                                    <span className="stat-value">{globalUserStats.totalComments}</span>
-                                                </div>
-                                                <div className="stat-block">
-                                                    <span className="stat-label">AVERAGE PINS / USER</span>
-                                                    <span className="stat-value" style={{ fontSize: '24px' }}>{globalUserStats.avgPins}</span>
-                                                </div>
-                                                <div className="stat-block">
-                                                    <span className="stat-label">AVERAGE COMMENTS / USER</span>
-                                                    <span className="stat-value" style={{ fontSize: '24px' }}>{globalUserStats.avgComments}</span>
-                                                </div>
-                                                <div className="stat-block">
-                                                    <span className="stat-label">NEW USERS FOR THE LAST WEEK</span>
-                                                    <span className="stat-value" style={{ fontSize: '24px' }}>{globalUserStats.newUsers7Days}</span>
-                                                </div>
-                                                <div className="stat-block">
-                                                    <span className="stat-label">NEW USERS FOR THE LAST MONTH</span>
-                                                    <span className="stat-value" style={{ fontSize: '24px' }}>{globalUserStats.newUsers30Days}</span>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </section>
-
-                            <section id="pin-management" className="dashboard-section">
-                                <h2 className="section-title">PIN MANAGEMENT</h2>
-                                <div className="dashboard-grid">
-                                    <div className="module-card">
-                                        <div className="card-header">
-                                            <h3>PENDING PIN VERIFICATIONS</h3>
-                                        </div>
-
-                                        <div className="card-body">
-                                            <div className="pin-list">
-                                                {globalPendingPins.map((pin) => {
-                                                    const color = getPinColor(pin.type);
-                                                    return (
-                                                        <div key={pin.id} className="pin-list-item">
-                                                            <div className="pin-info-group">
-                                                                <div
-                                                                    className="list-diamond"
-                                                                    style={{
-                                                                        borderColor: color,
-                                                                        backgroundColor: `color-mix(in srgb, ${color} 15%, transparent)`
-                                                                    }}
-                                                                >
-                                                                    <span style={{ color }}>{pin.title.charAt(0).toUpperCase()}</span>
-                                                                </div>
-
-                                                                <div className="pin-text">
-                                                                    <span className="pin-title">{pin.title}</span>
-                                                                    <span className="pin-coords">
-                                                                        By {pin.submittedBy} • {pin.lat.toFixed(4)}, {pin.lng.toFixed(4)}
-                                                                    </span>
-                                                                </div>
-                                                            </div>
-
-                                                            <div className="pin-actions" style={{ display: 'flex', gap: '8px' }}>
-                                                                <button
-                                                                    type="button"
-                                                                    className="locate-btn"
-                                                                    title="Locate on Map"
-                                                                    onClick={() => console.log("Locate pin:", pin.id)}
-                                                                >
-                                                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                                                                        <polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
-                                                                    </svg>
-                                                                </button>
-
-                                                                <button
-                                                                    type="button"
-                                                                    className="reject-btn"
-                                                                    title="Reject Pin"
-                                                                    onClick={() => console.log("Reject pin:", pin.id)}
-                                                                >
-                                                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                                                                        <line x1="18" y1="6" x2="6" y2="18"></line>
-                                                                        <line x1="6" y1="6" x2="18" y2="18"></line>
-                                                                    </svg>
-                                                                </button>
-
-                                                                <button
-                                                                    type="button"
-                                                                    className="approve-btn"
-                                                                    title="Verify & Approve Pin"
-                                                                    onClick={() => console.log("Approve pin:", pin.id)}
-                                                                >
-                                                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                                                                        <polyline points="20 6 9 17 4 12"></polyline>
-                                                                    </svg>
-                                                                </button>
-                                                            </div>
-
-                                                        </div>
-                                                    );
-                                                })}
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <div className="module-card">
-                                        <div className="card-header">
-                                            <h3>RECENTLY VERIFIED PINS</h3>
-                                        </div>
-
-                                        <div className="card-body">
-                                            <div className="pin-list">
-                                                {globalVerifiedPins.map((pin) => {
-                                                    const color = getPinColor(pin.type);
-                                                    return (
-                                                        <div key={pin.id} className="pin-list-item">
-                                                            <div className="pin-info-group">
-                                                                <div
-                                                                    className="list-diamond"
-                                                                    style={{
-                                                                        borderColor: color,
-                                                                        backgroundColor: `color-mix(in srgb, ${color} 15%, transparent)`
-                                                                    }}
-                                                                >
-                                                                    <span style={{ color }}>{pin.title.charAt(0).toUpperCase()}</span>
-                                                                </div>
-
-                                                                <div className="pin-text">
-                                                                    <span className="pin-title">{pin.title}</span>
-                                                                    <span className="pin-coords">
-                                                                        By {pin.submittedBy} • {pin.lat.toFixed(4)}, {pin.lng.toFixed(4)}
-                                                                    </span>
-                                                                </div>
-                                                            </div>
-
-                                                            <div className="pin-actions">
-                                                                <button
-                                                                    type="button"
-                                                                    className="locate-btn"
-                                                                    title="Locate on Map"
-                                                                    onClick={() => console.log("Locate verified pin:", pin.id)}
-                                                                >
-                                                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                                                                        <polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
-                                                                    </svg>
-                                                                </button>
-                                                            </div>
-                                                        </div>
-                                                    );
-                                                })}
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </section>
-
-                            <section id="user-management" className="dashboard-section">
-                                <h2 className="section-title">USER MANAGEMENT</h2>
-                                <div className="dashboard-grid">
-                                    <div className="module-card">
-                                        <div className="card-header">
-                                            <h3>NEWEST USERS</h3>
-                                        </div>
-                                        <div className="card-body">
-                                            <div className="user-list">
-                                                {recentUsers.map((user) => (
-                                                    <div key={user.id} className="user-list-item">
-                                                        <div className="user-info-group">
-                                                            <div className="user-avatar">
-                                                                {user.name.charAt(0).toUpperCase()}
-                                                            </div>
-                                                            <div className="user-text">
-                                                                <span className="user-name">{user.name}</span>
-                                                                <span className="user-meta">
-                                                                    {user.email} • {user.joinedAt}
-                                                                </span>
-                                                            </div>
-                                                        </div>
-
-                                                        <button
-                                                            type="button"
-                                                            className="view-user-btn"
-                                                            title="Access Operator Profile"
-                                                            onClick={() => console.log("View user:", user.id)}
-                                                        >
-                                                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                                                                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
-                                                                <circle cx="12" cy="7" r="4"></circle>
-                                                            </svg>
-                                                        </button>
-
-                                                    </div>
-                                                ))}
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <div className="module-card">
-                                        <div className="card-header">
-                                            <h3>TOP USERS BY PINS</h3>
-                                        </div>
-                                        <div className="card-body">
-                                            <div className="user-list">
-                                                {topUsers.map((user, index) => (
-                                                    <div key={user.id} className="user-list-item">
-
-                                                        <div className="user-info-group">
-                                                            <div
-                                                                className="user-avatar"
-                                                                style={{
-                                                                    borderColor: index === 0 ? 'var(--neon-yellow, #FFD700)' : 'var(--neon-blue)',
-                                                                    color: index === 0 ? 'var(--neon-yellow, #FFD700)' : 'var(--neon-blue)',
-                                                                    background: index === 0 ? 'color-mix(in srgb, var(--neon-yellow, #FFD700) 15%, transparent)' : 'color-mix(in srgb, var(--neon-blue) 15%, transparent)'
-                                                                }}
-                                                            >
-                                                                {user.name.charAt(0).toUpperCase()}
-                                                            </div>
-                                                            <div className="user-text">
-                                                                <span className="user-name">{user.name}</span>
-                                                                <span className="user-meta">Rank #{user.rank} Operator</span>
-                                                            </div>
-                                                        </div>
-
-                                                        <div className="pin-count-display">
-                                                            <span className="count-number" style={{ color: index === 0 ? 'var(--neon-yellow, #FFD700)' : 'var(--text-primary)' }}>
-                                                                {user.pinCount}
-                                                            </span>
-                                                            <span className="count-label">PINS</span>
-                                                        </div>
-
-                                                    </div>
-                                                ))}
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </section>
-
-                        </div>
-                    </div>
-                </main>
-            </div>
-
-            <style jsx>{`
+	const router = useRouter();
+
+	const { data, isLoading } = trpc.user.getCurrent.useQuery();
+
+	const { data: pinCounts } = trpc.pin.getStatusCounts.useQuery();
+	const { data: userCount } = trpc.user.getCount.useQuery();
+	const { data: commentCount } = trpc.comment.getCount.useQuery();
+	const { data: pendingPins } = trpc.pin.getAllAdmin.useQuery({
+		status: "PENDING_VERIFICATION",
+	});
+
+	const { data: activePins } = trpc.pin.getAllAdmin.useQuery({
+		status: "ACTIVE",
+		limit: 5,
+	});
+	const utils = trpc.useUtils();
+	const rejectPin = trpc.pin.reject.useMutation({
+		onSuccess: (output) => {
+			utils.pin.getAllAdmin.invalidate();
+		},
+	});
+	const approvePin = trpc.pin.approve.useMutation({
+		onSuccess: (output) => {
+			utils.pin.getAllAdmin.invalidate();
+		},
+	});
+
+	const deletePin = trpc.pin.adminDelete.useMutation({
+		onSuccess: (output) => {
+			utils.pin.getAllAdmin.invalidate();
+		},
+	});
+
+	const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+	const { theme, toggleTheme } = useTheme();
+	const [activeSection, setActiveSection] = useState("overview");
+
+	const [isDeletingPin, setIsDeletingPin] = useState(false);
+
+	useEffect(() => {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					if (entry.isIntersecting) {
+						setActiveSection(entry.target.id);
+					}
+				});
+			},
+			{
+				root: document.querySelector(".content-area"),
+				rootMargin: "-10% 0px -70% 0px",
+			},
+		);
+
+		const sections = document.querySelectorAll(".dashboard-section");
+		sections.forEach((section) => {
+			observer.observe(section);
+		});
+
+		return () => observer.disconnect();
+	}, []);
+
+	const scrollToSection = (sectionId: string) => {
+		const element = document.getElementById(sectionId);
+		if (element) {
+			element.scrollIntoView({ behavior: "smooth", block: "start" });
+			setActiveSection(sectionId);
+			if (window.innerWidth <= 768) setIsSidebarOpen(false);
+		}
+	};
+
+	const goToMap = () => router.push("/");
+
+	const handleSignOut = async () => {
+		await signOut();
+		router.refresh();
+	};
+
+	const activePinCount = pinCounts?.ACTIVE || 0;
+	const rejectedPinCount = pinCounts?.ARCHIVED || 0;
+	const pendingPinCount = pinCounts?.PENDING_VERIFICATION || 0;
+	const totalPins = activePinCount + rejectedPinCount + pendingPinCount;
+
+	const pinTagCounts = {
+		academic: 0,
+		food: 0,
+		transit: 0,
+		utility: 0,
+		social: 0,
+	};
+
+	const globalVerificationRate = useMemo(
+		() => Math.round((activePinCount / (totalPins || 1)) * 100) || 0,
+		[activePinCount, totalPins],
+	);
+
+	const globalUserStats = {
+		totalUsers: userCount,
+		totalComments: commentCount,
+		// avgPins: 3.6,
+		// avgComments: 5.3,
+		// newUsers7Days: 14,
+		// newUsers30Days: 45,
+	};
+
+	const recentUsers = [
+		{
+			id: "u1",
+			name: "User 1",
+			email: "user1@up.edu.ph",
+			joinedAt: "2 hours ago",
+		},
+		{
+			id: "u2",
+			name: "User 2",
+			email: "user2@up.edu.ph",
+			joinedAt: "5 hours ago",
+		},
+		{
+			id: "u3",
+			name: "User 3",
+			email: "user3@up.edu.ph",
+			joinedAt: "1 day ago",
+		},
+		{
+			id: "u4",
+			name: "User 4",
+			email: "user4@up.edu.ph",
+			joinedAt: "2 days ago",
+		},
+	];
+
+	const topUsers = [
+		{ id: "u1", name: "User 1", pinCount: 142, rank: 1 },
+		{ id: "u2", name: "User 2", pinCount: 89, rank: 2 },
+		{ id: "u3", name: "User 3", pinCount: 75, rank: 3 },
+		{ id: "u4", name: "User 4", pinCount: 60, rank: 4 },
+	];
+
+	return (
+		<div className="dashboard-layout">
+			{/* --- MOBILE OVERLAY --- */}
+			{isSidebarOpen && (
+				// biome-ignore lint/a11y/noStaticElementInteractions: <explanation>
+				// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+				<div
+					className="mobile-overlay"
+					onClick={() => setIsSidebarOpen(false)}
+				/>
+			)}
+
+			{/* --- SIDEBAR --- */}
+			<aside className={`sidebar ${isSidebarOpen ? "open" : ""}`}>
+				<div className="sidebar-header">
+					<h2 className="brand">UP WAYPOINT</h2>
+				</div>
+
+				<nav className="sidebar-nav custom-vertical-scrollbar">
+					<div className="nav-group">
+						<span className="nav-label">COMMAND CENTER</span>
+
+						<button
+							type="button"
+							className={`nav-item ${activeSection === "overview" ? "active" : ""}`}
+							onClick={() => scrollToSection("overview")}
+						>
+							OVERVIEW
+						</button>
+
+						<button
+							type="button"
+							className={`nav-item ${activeSection === "pin-management" ? "active" : ""}`}
+							onClick={() => scrollToSection("pin-management")}
+						>
+							PIN MANAGEMENT
+						</button>
+
+						{/* <button
+							type="button"
+							className={`nav-item ${activeSection === "user-management" ? "active" : ""}`}
+							onClick={() => scrollToSection("user-management")}
+						>
+							USER MANAGEMENT
+						</button> */}
+
+						<button type="button" className="nav-item" onClick={goToMap}>
+							RETURN TO MAP
+						</button>
+					</div>
+
+					<div className="nav-group" style={{ marginTop: "24px" }}>
+						<span className="nav-label">DISPLAY SETTINGS</span>
+						<button
+							type="button"
+							className="nav-item theme-toggle-btn"
+							onClick={toggleTheme}
+						>
+							<span>UI THEME</span>
+							<div className="theme-status">
+								{theme === "dark" ? (
+									<>
+										<svg
+											width="14"
+											height="14"
+											viewBox="0 0 24 24"
+											fill="none"
+											stroke="var(--text-primary)"
+											strokeWidth="2.5"
+											strokeLinecap="round"
+											strokeLinejoin="round"
+										>
+											<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+										</svg>
+										<span style={{ color: "var(--neon-blue)" }}>NIGHT</span>
+									</>
+								) : (
+									<>
+										<svg
+											width="14"
+											height="14"
+											viewBox="0 0 24 24"
+											fill="none"
+											stroke="var(--pin-transit)"
+											strokeWidth="2.5"
+											strokeLinecap="round"
+											strokeLinejoin="round"
+										>
+											<circle cx="12" cy="12" r="5"></circle>
+											<line x1="12" y1="1" x2="12" y2="3"></line>
+											<line x1="12" y1="21" x2="12" y2="23"></line>
+											<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+											<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+											<line x1="1" y1="12" x2="3" y2="12"></line>
+											<line x1="21" y1="12" x2="23" y2="12"></line>
+											<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+											<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+										</svg>
+										<span style={{ color: "var(--pin-transit)" }}>DAY</span>
+									</>
+								)}
+							</div>
+						</button>
+					</div>
+				</nav>
+
+				<div className="sidebar-footer">
+					<button
+						type="button"
+						className="sign-out-btn"
+						onClick={handleSignOut}
+					>
+						SIGN OUT
+					</button>
+				</div>
+			</aside>
+
+			<div className="main-wrapper">
+				{/* --- HEADER --- */}
+				<header className="dashboard-header">
+					<div className="header-left">
+						<button
+							type="button"
+							className="hamburger-btn"
+							onClick={() => setIsSidebarOpen(true)}
+						>
+							<svg
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="2.5"
+								strokeLinecap="round"
+								strokeLinejoin="round"
+							>
+								<line x1="3" y1="12" x2="21" y2="12"></line>
+								<line x1="3" y1="6" x2="21" y2="6"></line>
+								<line x1="3" y1="18" x2="21" y2="18"></line>
+							</svg>
+						</button>
+						<h1 className="header-title" style={{ color: "var(--pin-social)" }}>
+							Admin Dashboard
+						</h1>
+					</div>
+				</header>
+
+				{/* --- MAIN --- */}
+				<main className="content-area custom-vertical-scrollbar">
+					<div className="content-container">
+						<div className="greeting-section">
+							<h2 className="greeting-title">
+								{isLoading
+									? "LOADING..."
+									: `Welcome, ${data?.name ? data.name.toUpperCase() : "ADMIN"}!`}
+							</h2>
+							<p className="greeting-subtitle">
+								You have accessed the restricted area. 🚨
+							</p>
+						</div>
+
+						<div className="dashboard-sections">
+							<section id="overview" className="dashboard-section">
+								<h2 className="section-title">OVERVIEW</h2>
+								<div className="dashboard-grid">
+									<div className="module-card">
+										<div className="card-header">
+											<h3>OVERALL PIN STATISTICS</h3>
+										</div>
+										<div className="card-body telemetry-body">
+											{/* Top Stats Grid */}
+											<div className="telemetry-top-grid">
+												<div className="stat-block">
+													<span className="stat-label">TOTAL PINS</span>
+													<span className="stat-value">{totalPins}</span>
+												</div>
+												<div className="stat-block">
+													<span className="stat-label">AWAITING ACTION</span>
+													<span
+														className="stat-value"
+														style={{ color: "var(--neon-yellow, #FFD700)" }}
+													>
+														{pendingPinCount}
+													</span>
+												</div>
+											</div>
+
+											<div className="integrity-section">
+												<div className="integrity-header">
+													<span className="stat-label">
+														GLOBAL VERIFICATION
+													</span>
+													<span
+														className="integrity-percent"
+														style={{ color: "var(--pin-food)" }}
+													>
+														{globalVerificationRate}%
+													</span>
+												</div>
+												<div className="progress-track">
+													<div
+														className="progress-fill"
+														style={{
+															width: `${globalVerificationRate}%`,
+															background: "var(--pin-food)",
+															boxShadow:
+																"0 0 10px color-mix(in srgb, var(--pin-food) 50%, transparent)",
+														}}
+													></div>
+												</div>
+												<div className="integrity-details">
+													<span className="detail-item verified">
+														{activePinCount} VERIFIED
+													</span>
+													<span className="detail-item pending">
+														{pendingPinCount} PENDING
+													</span>
+													<span className="detail-item rejected">
+														{rejectedPinCount} REJECTED
+													</span>
+												</div>
+											</div>
+
+											<div className="distribution-section">
+												<span className="stat-label">CATEGORY BREAKDOWN</span>
+												<div className="category-list">
+													{PIN_CATEGORIES.map((category) => {
+														const count =
+															pinTagCounts[
+																category.id as keyof typeof pinTagCounts
+															] || 0;
+														const percentage =
+															totalPins > 0
+																? (count / (totalPins || 1)) * 100
+																: 0;
+
+														return (
+															<div key={category.id} className="category-row">
+																<div className="cat-info">
+																	<span
+																		className="cat-name"
+																		style={{ color: category.color }}
+																	>
+																		{category.label}
+																	</span>
+																	<span className="cat-count">{count}</span>
+																</div>
+																<div className="cat-track">
+																	<div
+																		className="cat-fill"
+																		style={{
+																			width: `${percentage}%`,
+																			backgroundColor: category.color,
+																			boxShadow: `0 0 10px color-mix(in srgb, ${category.color} 50%, transparent)`,
+																		}}
+																	></div>
+																</div>
+															</div>
+														);
+													})}
+												</div>
+											</div>
+										</div>
+									</div>
+
+									<div className="module-card">
+										<div className="card-header">
+											<h3>OVERALL USER STATISTICS</h3>
+										</div>
+
+										<div className="card-body telemetry-body">
+											<div className="telemetry-top-grid">
+												<div className="stat-block">
+													<span className="stat-label">TOTAL USERS</span>
+													<span className="stat-value">
+														{globalUserStats.totalUsers}
+													</span>
+												</div>
+												<div className="stat-block">
+													<span className="stat-label">TOTAL COMMENTS</span>
+													<span className="stat-value">
+														{globalUserStats.totalComments}
+													</span>
+												</div>
+												{/* <div className="stat-block">
+													<span className="stat-label">
+														AVERAGE PINS / USER
+													</span>
+													<span
+														className="stat-value"
+														style={{ fontSize: "24px" }}
+													>
+														{globalUserStats.avgPins}
+													</span>
+												</div>
+												<div className="stat-block">
+													<span className="stat-label">
+														AVERAGE COMMENTS / USER
+													</span>
+													<span
+														className="stat-value"
+														style={{ fontSize: "24px" }}
+													>
+														{globalUserStats.avgComments}
+													</span>
+												</div>
+												<div className="stat-block">
+													<span className="stat-label">
+														NEW USERS FOR THE LAST WEEK
+													</span>
+													<span
+														className="stat-value"
+														style={{ fontSize: "24px" }}
+													>
+														{globalUserStats.newUsers7Days}
+													</span>
+												</div>
+												<div className="stat-block">
+													<span className="stat-label">
+														NEW USERS FOR THE LAST MONTH
+													</span>
+													<span
+														className="stat-value"
+														style={{ fontSize: "24px" }}
+													>
+														{globalUserStats.newUsers30Days}
+													</span>
+												</div> */}
+											</div>
+										</div>
+									</div>
+								</div>
+							</section>
+
+							<section id="pin-management" className="dashboard-section">
+								<h2 className="section-title">PIN MANAGEMENT</h2>
+								<div className="dashboard-grid">
+									<div className="module-card">
+										<div className="card-header">
+											<h3>PENDING PIN VERIFICATIONS</h3>
+										</div>
+
+										<div className="card-body">
+											<div className="pin-list">
+												{pendingPins?.map((pin) => {
+													const color = getPinColor(
+														pin.pinTags?.[0]?.tag.title || "",
+													);
+													return (
+														<div key={pin.id} className="pin-list-item">
+															<div className="pin-info-group">
+																<div
+																	className="list-diamond"
+																	style={{
+																		borderColor: color,
+																		backgroundColor: `color-mix(in srgb, ${color} 15%, transparent)`,
+																	}}
+																>
+																	<span style={{ color }}>
+																		{pin.title.charAt(0).toUpperCase()}
+																	</span>
+																</div>
+
+																<div className="pin-text">
+																	<span className="pin-title">{pin.title}</span>
+																	<span className="pin-coords">
+																		By {pin.owner} • {pin.latitude.toFixed(4)},{" "}
+																		{pin.longitude.toFixed(4)}
+																	</span>
+																</div>
+															</div>
+
+															<div
+																className="pin-actions"
+																style={{ display: "flex", gap: "8px" }}
+															>
+																<Link
+																	className="locate-btn"
+																	style={{
+																		background: "transparent",
+																		border: "1px solid var(--border-color)",
+																		borderRadius: "8px",
+																		width: "36px",
+																		height: "36px",
+																		display: "flex",
+																		alignItems: "center",
+																		justifyContent: "center",
+																		color: "var(--text-secondary)",
+																		cursor: "pointer",
+																		transition: "all 0.2s",
+																		flexShrink: "0",
+																	}}
+																	href={`/?pin=${pin.id}`}
+																	target="_blank"
+																>
+																	<svg
+																		width="18"
+																		height="18"
+																		viewBox="0 0 24 24"
+																		fill="none"
+																		stroke="currentColor"
+																		strokeWidth="2.5"
+																	>
+																		<polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
+																	</svg>
+																</Link>
+
+																<button
+																	type="button"
+																	className="reject-btn"
+																	title="Reject Pin"
+																	onClick={() =>
+																		rejectPin.mutate({ id: pin.id })
+																	}
+																>
+																	<svg
+																		width="18"
+																		height="18"
+																		viewBox="0 0 24 24"
+																		fill="none"
+																		stroke="currentColor"
+																		strokeWidth="2.5"
+																		strokeLinecap="round"
+																		strokeLinejoin="round"
+																	>
+																		<line x1="18" y1="6" x2="6" y2="18"></line>
+																		<line x1="6" y1="6" x2="18" y2="18"></line>
+																	</svg>
+																</button>
+
+																<button
+																	type="button"
+																	className="approve-btn"
+																	title="Verify & Approve Pin"
+																	onClick={() =>
+																		approvePin.mutate({ id: pin.id })
+																	}
+																>
+																	<svg
+																		width="18"
+																		height="18"
+																		viewBox="0 0 24 24"
+																		fill="none"
+																		stroke="currentColor"
+																		strokeWidth="2.5"
+																		strokeLinecap="round"
+																		strokeLinejoin="round"
+																	>
+																		<polyline points="20 6 9 17 4 12"></polyline>
+																	</svg>
+																</button>
+															</div>
+														</div>
+													);
+												})}
+											</div>
+										</div>
+									</div>
+
+									<div className="module-card">
+										<div className="card-header">
+											<h3>RECENTLY VERIFIED PINS</h3>
+										</div>
+
+										<div className="card-body">
+											<div className="pin-list">
+												{activePins?.map((pin) => {
+													const color = getPinColor(
+														pin.pinTags?.[0]?.tag.title || "",
+													);
+													return (
+														<div key={pin.id} className="pin-list-item">
+															<div className="pin-info-group">
+																<div
+																	className="list-diamond"
+																	style={{
+																		borderColor: color,
+																		backgroundColor: `color-mix(in srgb, ${color} 15%, transparent)`,
+																	}}
+																>
+																	<span style={{ color }}>
+																		{pin.title.charAt(0).toUpperCase()}
+																	</span>
+																</div>
+
+																<div className="pin-text">
+																	<span className="pin-title">{pin.title}</span>
+																	<span className="pin-coords">
+																		By {pin.owner} • {pin.latitude.toFixed(4)},{" "}
+																		{pin.longitude.toFixed(4)}
+																	</span>
+																</div>
+															</div>
+
+															<div
+																className="pin-actions"
+																style={{ display: "flex", gap: "8px" }}
+															>
+																<Link
+																	className="locate-btn"
+																	style={{
+																		background: "transparent",
+																		border: "1px solid var(--border-color)",
+																		borderRadius: "8px",
+																		width: "36px",
+																		height: "36px",
+																		display: "flex",
+																		alignItems: "center",
+																		justifyContent: "center",
+																		color: "var(--text-secondary)",
+																		cursor: "pointer",
+																		transition: "all 0.2s",
+																		flexShrink: "0",
+																	}}
+																	href={`/?pin=${pin.id}`}
+																	target="_blank"
+																>
+																	<svg
+																		width="18"
+																		height="18"
+																		viewBox="0 0 24 24"
+																		fill="none"
+																		stroke="currentColor"
+																		strokeWidth="2.5"
+																	>
+																		<polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
+																	</svg>
+																</Link>
+																{isDeletingPin ? (
+																	<>
+																		<button
+																			type="button"
+																			className="reject-btn"
+																			title="Reject Pin"
+																			onClick={() => setIsDeletingPin(false)}
+																		>
+																			<svg
+																				width="18"
+																				height="18"
+																				viewBox="0 0 24 24"
+																				fill="none"
+																				stroke="currentColor"
+																				strokeWidth="2.5"
+																				strokeLinecap="round"
+																				strokeLinejoin="round"
+																			>
+																				<line
+																					x1="18"
+																					y1="6"
+																					x2="6"
+																					y2="18"
+																				></line>
+																				<line
+																					x1="6"
+																					y1="6"
+																					x2="18"
+																					y2="18"
+																				></line>
+																			</svg>
+																		</button>
+
+																		<button
+																			type="button"
+																			className="approve-btn"
+																			title="Verify & Approve Pin"
+																			onClick={() =>
+																				deletePin.mutate({ id: pin.id })
+																			}
+																		>
+																			<svg
+																				width="18"
+																				height="18"
+																				viewBox="0 0 24 24"
+																				fill="none"
+																				stroke="currentColor"
+																				strokeWidth="2.5"
+																				strokeLinecap="round"
+																				strokeLinejoin="round"
+																			>
+																				<polyline points="20 6 9 17 4 12"></polyline>
+																			</svg>
+																		</button>
+																	</>
+																) : (
+																	<button
+																		type="button"
+																		className="reject-btn"
+																		onClick={() => {
+																			setIsDeletingPin(true);
+																		}}
+																	>
+																		DELETE
+																	</button>
+																)}
+															</div>
+														</div>
+													);
+												})}
+											</div>
+										</div>
+									</div>
+								</div>
+							</section>
+
+							{/* <section id="user-management" className="dashboard-section">
+								<h2 className="section-title">USER MANAGEMENT</h2>
+								<div className="dashboard-grid">
+									<div className="module-card">
+										<div className="card-header">
+											<h3>NEWEST USERS</h3>
+										</div>
+										<div className="card-body">
+											<div className="user-list">
+												{recentUsers.map((user) => (
+													<div key={user.id} className="user-list-item">
+														<div className="user-info-group">
+															<div className="user-avatar">
+																{user.name.charAt(0).toUpperCase()}
+															</div>
+															<div className="user-text">
+																<span className="user-name">{user.name}</span>
+																<span className="user-meta">
+																	{user.email} • {user.joinedAt}
+																</span>
+															</div>
+														</div>
+
+														<button
+															type="button"
+															className="view-user-btn"
+															title="Access Operator Profile"
+															onClick={() => console.log("View user:", user.id)}
+														>
+															<svg
+																width="18"
+																height="18"
+																viewBox="0 0 24 24"
+																fill="none"
+																stroke="currentColor"
+																strokeWidth="2.5"
+																strokeLinecap="round"
+																strokeLinejoin="round"
+															>
+																<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+																<circle cx="12" cy="7" r="4"></circle>
+															</svg>
+														</button>
+													</div>
+												))}
+											</div>
+										</div>
+									</div>
+
+									<div className="module-card">
+										<div className="card-header">
+											<h3>TOP USERS BY PINS</h3>
+										</div>
+										<div className="card-body">
+											<div className="user-list">
+												{topUsers.map((user, index) => (
+													<div key={user.id} className="user-list-item">
+														<div className="user-info-group">
+															<div
+																className="user-avatar"
+																style={{
+																	borderColor:
+																		index === 0
+																			? "var(--neon-yellow, #FFD700)"
+																			: "var(--neon-blue)",
+																	color:
+																		index === 0
+																			? "var(--neon-yellow, #FFD700)"
+																			: "var(--neon-blue)",
+																	background:
+																		index === 0
+																			? "color-mix(in srgb, var(--neon-yellow, #FFD700) 15%, transparent)"
+																			: "color-mix(in srgb, var(--neon-blue) 15%, transparent)",
+																}}
+															>
+																{user.name.charAt(0).toUpperCase()}
+															</div>
+															<div className="user-text">
+																<span className="user-name">{user.name}</span>
+																<span className="user-meta">
+																	Rank #{user.rank} Operator
+																</span>
+															</div>
+														</div>
+
+														<div className="pin-count-display">
+															<span
+																className="count-number"
+																style={{
+																	color:
+																		index === 0
+																			? "var(--neon-yellow, #FFD700)"
+																			: "var(--text-primary)",
+																}}
+															>
+																{user.pinCount}
+															</span>
+															<span className="count-label">PINS</span>
+														</div>
+													</div>
+												))}
+											</div>
+										</div>
+									</div>
+								</div>
+							</section> */}
+						</div>
+					</div>
+				</main>
+			</div>
+
+			<style jsx>{`
         /* --- LAYOUT SHELL --- */
         .dashboard-layout {
           display: flex;
@@ -630,9 +944,9 @@ export default function AdminDashboard() {
         }
 
         .nav-item.active {
-          background: color-mix(in srgb, #ff4d4d 10%, transparent);
-          color: #ff4d4d;
-          border-left: 3px solid #ff4d4d;
+          background: color-mix(in srgb, var(--pin-social) 10%, transparent);
+          color: var(--pin-social);
+          border-left: 3px solid var(--pin-social);
           border-radius: 0 8px 8px 0;
         }
 
@@ -1014,9 +1328,9 @@ export default function AdminDashboard() {
         }
         
         .approve-btn:hover { 
-          background: color-mix(in srgb, var(--neon-green) 15%, transparent); 
-          border-color: var(--neon-green); 
-          color: var(--neon-green); 
+          background: color-mix(in srgb, var(--pin-food) 15%, transparent); 
+          border-color: var(--pin-food); 
+          color: var(--pin-food); 
           transform: scale(1.05); 
         }
         
@@ -1181,6 +1495,6 @@ export default function AdminDashboard() {
           .content-area { padding: 24px 16px; }
         }
       `}</style>
-        </div>
-    );
-}
\ No newline at end of file
+		</div>
+	);
+}
diff --git a/apps/web/app/dashboard/page.tsx b/apps/web/app/dashboard/page.tsx
index edf1f13..50afe41 100644
--- a/apps/web/app/dashboard/page.tsx
+++ b/apps/web/app/dashboard/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
 import { signOut } from "@/lib/auth-client";
 import { trpc } from "@/lib/trpc";
@@ -8,413 +8,591 @@ import { PIN_CATEGORIES, getPinColor } from "@/data/pin-categories";
 import { useTheme } from "@/lib/ThemeContext";
 
 export default function Dashboard() {
-  const router = useRouter();
-  const { data, isLoading } = trpc.user.getCurrent.useQuery();
-  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-
-  const [isEditingBio, setIsEditingBio] = useState(false);
-  const [bioInput, setBioInput] = useState("");
-  const { theme, toggleTheme } = useTheme();
-
-  const handleSaveBio = () => {
-    // TODO: Hook this up to trpc.user.updateBio.useMutation()
-    console.log("Saving new bio:", bioInput);
-    setIsEditingBio(false);
-  };
-
-  const goToMap = () => router.push("/");
-  const goToAdmin = () => router.push("/admin");
-  
-  const handleSignOut = async () => {
-    await signOut();
-    router.refresh();
-  };
-
-  const mockStats = {
-    totalPins: 42,
-    verifiedPins: 38,
-    pendingPins: 3,
-    rejectedPins: 1,
-    comments: 128,
-    categoryBreakdown: {
-      academic: 12,
-      food: 15,
-      social: 5,
-      transit: 8,
-      utility: 2,
-    },
-    pendingList: [
-      { id: "p1", title: "Quezon Hall", lat: 14.6549, lng: 121.0645, type: "academic" },
-      { id: "p2", title: "Area 2", lat: 14.6532, lng: 121.0681, type: "food" },
-      { id: "p3", title: "Sunken Garden", lat: 14.6544, lng: 121.0673, type: "social" },
-    ],
-    recentList: [
-      { id: "r1", title: "CS Library", lat: 14.6538, lng: 121.0694, type: "academic" },
-      { id: "r2", title: "TOKI Jeepney Stop", lat: 14.6551, lng: 121.0621, type: "transit" },
-    ]
-  };
-
-  const verificationRate = Math.round((mockStats.verifiedPins / mockStats.totalPins) * 100) || 0;
-
-  return (
-    <div className="dashboard-layout">
-      {/* --- MOBILE OVERLAY --- */}
-      {isSidebarOpen && (
-        <div 
-            className="mobile-overlay" 
-            onClick={() => setIsSidebarOpen(false)}
-        />
-      )}
-
-      {/* --- SIDEBAR --- */}
-      <aside className={`sidebar ${isSidebarOpen ? "open" : ""}`}>
-        <div className="sidebar-header">
-          <h2 className="brand">UP WAYPOINT</h2>
-        </div>
-        
-        <nav className="sidebar-nav">
-          <div className="nav-group">
-            <span className="nav-label">MAIN</span>
-            <button className="nav-item active">OVERVIEW</button>
-            {(data as any)?.userRole === "admin" && (
-              <button 
-                className="nav-item" 
-                onClick={goToAdmin}
-                style={{
-                  color: '#ff4d4d', 
-                  border: '1px solid color-mix(in srgb, #ff4d4d 30%, transparent)',
-                  background: 'color-mix(in srgb, #ff4d4d 5%, transparent)'
-                }}
-              >
-                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
-                    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
-                  </svg>
-                  GO TO ADMIN DASHBOARD
-                </div>
-              </button>
-            )}
-            <button className="nav-item" onClick={goToMap}>RETURN TO MAP</button>
-          </div>
-          <div className="nav-group" style={{ marginTop: '24px' }}>
-            <span className="nav-label">DISPLAY SETTINGS</span>
-            
-            <button 
-              className="nav-item theme-toggle-btn" 
-              onClick={toggleTheme}
-            >
-              <span>UI THEME</span>
-              <div className="theme-status">
-                {theme === "dark" ? (
-                  <>
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--text-primary)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-                    </svg>
-                    <span style={{ color: "var(--neon-blue)" }}>NIGHT</span>
-                  </>
-                ) : (
-                  <>
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--pin-transit)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                      <circle cx="12" cy="12" r="5"></circle>
-                      <line x1="12" y1="1" x2="12" y2="3"></line>
-                      <line x1="12" y1="21" x2="12" y2="23"></line>
-                      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
-                      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
-                      <line x1="1" y1="12" x2="3" y2="12"></line>
-                      <line x1="21" y1="12" x2="23" y2="12"></line>
-                      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
-                      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
-                    </svg>
-                    <span style={{ color: "var(--pin-transit)" }}>DAY</span>
-                  </>
-                )}
-              </div>
-            </button>
-          </div>
-        </nav>
-
-        <div className="sidebar-footer">
-          <button className="sign-out-btn" onClick={handleSignOut}>
-            SIGN OUT
-          </button>
-        </div>
-      </aside>
-
-      <div className="main-wrapper">
-        {/* --- HEADER --- */}
-        <header className="dashboard-header">
-          <div className="header-left">
-            <button 
-              className="hamburger-btn" 
-              onClick={() => setIsSidebarOpen(true)}
-            >
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                <line x1="3" y1="12" x2="21" y2="12"></line>
-                <line x1="3" y1="6" x2="21" y2="6"></line>
-                <line x1="3" y1="18" x2="21" y2="18"></line>
-              </svg>
-            </button>
-            <h1 className="header-title">User Dashboard</h1>
-          </div>
-        </header>
-
-        {/* --- MAIN --- */}
-        <main className="content-area custom-vertical-scrollbar">
-          <div className="content-container">
-            <div className="greeting-section">
-              <h2 className="greeting-title">
-                {isLoading ? "LOADING..." : `Welcome, ${data?.name ? data.name.toUpperCase() : "UNKNOWN"}!`}
-              </h2>
-              <p className="greeting-subtitle">You made it!</p>
-            </div>
-            
-            {/* --- DASHBOARD GRID --- */}
-            <div className="dashboard-grid">
-              
-              <div className="module-card operator-card">
-                <div className="card-header">
-                  <h3>YOUR PROFILE</h3>
-                  <span 
-                    className="status-badge" 
-                    style={{ 
-                      borderColor: 'var(--neon-green)', 
-                      color: 'var(--neon-green)', 
-                      background: 'color-mix(in srgb, var(--neon-green) 15%, transparent)' 
-                    }}
-                  >
-                    {(data as any)?.role === "ADMIN" ? "ADMIN" : "REGULAR USER"}
-                  </span>
-                </div>
-                
-                <div className="card-body operator-body">
-                  <div className="operator-profile">
-                    <div className="avatar-container">
-                      <div className="avatar-fallback">
-                        {data?.name ? data.name.charAt(0).toUpperCase() : "O"}
-                      </div>
-                    </div>
-                    <div className="operator-details">
-                      <span className="operator-name">{data?.name || "UNKNOWN NAME"}</span>
-                      <span className="operator-email">{(data as any)?.email || "UNKNOWN EMAIL"}</span>
-                    </div>
-                  </div>
-
-                  <div className="bio-section">
-                    <div className="bio-header">
-                      <span className="bio-label">BIO</span>
-                      {!isEditingBio && (
-                        <button 
-                          className="edit-bio-btn" 
-                          onClick={() => { 
-                            setBioInput((data as any)?.bio || ""); 
-                            setIsEditingBio(true); 
-                          }}
-                        >
-                          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
-                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
-                          </svg>
-                          EDIT
-                        </button>
-                      )}
-                    </div>
-
-                    {isEditingBio ? (
-                      <div className="bio-edit-mode">
-                        <textarea
-                          className="bio-input custom-vertical-scrollbar"
-                          value={bioInput}
-                          onChange={(e) => setBioInput(e.target.value)}
-                          maxLength={150}
-                          rows={3}
-                          placeholder="Enter your bio here..."
-                        />
-                        <div className="bio-actions">
-                          <button className="tactical-button-primary small-btn" onClick={handleSaveBio}>SAVE</button>
-                          <button className="tactical-button small-btn" onClick={() => setIsEditingBio(false)}>CANCEL</button>
-                        </div>
-                      </div>
-                    ) : (
-                      <p className="bio-text">
-                        {(data as any)?.bio || "No bio here. Click EDIT to add a short bio about yourself!"}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-
-              <div className="module-card telemetry-card">
-                <div className="card-header">
-                  <h3>YOUR STATISTICS</h3>
-                  <span className="status-badge" style={{ borderColor: 'var(--neon-blue)', color: 'var(--neon-blue)', background: 'color-mix(in srgb, var(--neon-blue) 15%, transparent)' }}>
-                    SYNCED
-                  </span>
-                </div>
-                
-                <div className="card-body telemetry-body">
-                  {/* Top Stats Grid */}
-                  <div className="telemetry-top-grid">
-                    <div className="stat-block">
-                      <span className="stat-label">TOTAL PINS ADDED</span>
-                      <span className="stat-value">{mockStats.totalPins}</span>
-                    </div>
-                    <div className="stat-block">
-                      <span className="stat-label">TOTAL COMMENTS</span>
-                      <span className="stat-value">{mockStats.comments}</span>
-                    </div>
-                  </div>
-
-                  {/* Verification Integrity Bar */}
-                  <div className="integrity-section">
-                    <div className="integrity-header">
-                      <span className="stat-label">VERIFICATIONS</span>
-                      <span className="integrity-percent">{verificationRate}%</span>
-                    </div>
-                    <div className="progress-track">
-                      <div className="progress-fill" style={{ width: `${verificationRate}%` }}></div>
-                    </div>
-                    <div className="integrity-details">
-                      <span className="detail-item verified">{mockStats.verifiedPins} VERIFIED</span>
-                      <span className="detail-item pending">{mockStats.pendingPins} PENDING</span>
-                      <span className="detail-item rejected">{mockStats.rejectedPins} REJECTED</span>
-                    </div>
-                  </div>
-
-                  {/* Category Distribution */}
-                  <div className="distribution-section">
-                    <span className="stat-label">CATEGORY DISTRIBUTION</span>
-                    <div className="category-list">
-                      {PIN_CATEGORIES.map((category) => {
-                        const count = mockStats.categoryBreakdown[category.id as keyof typeof mockStats.categoryBreakdown] || 0;
-                        const percentage = mockStats.totalPins > 0 ? (count / mockStats.totalPins) * 100 : 0;
-                        
-                        return (
-                          <div key={category.id} className="category-row">
-                            <div className="cat-info">
-                              <span className="cat-name" style={{ color: category.color }}>{category.label}</span>
-                              <span className="cat-count">{count}</span>
-                            </div>
-                            <div className="cat-track">
-                              <div 
-                                className="cat-fill" 
-                                style={{ 
-                                  width: `${percentage}%`, 
-                                  backgroundColor: category.color,
-                                  boxShadow: `0 0 10px color-mix(in srgb, ${category.color} 50%, transparent)`
-                                }}
-                              ></div>
-                            </div>
-                          </div>
-                        );
-                      })}
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className="module-card pending-card">
-                <div className="card-header">
-                  <h3>YOUR PENDING PINS</h3>
-                  <span className="count-badge">{mockStats.pendingList.length}</span>
-                </div>
-                <div className="card-body">
-                  <div className="pin-list">
-                    {mockStats.pendingList.map((pin) => {
-                      const color = getPinColor(pin.type);
-                      return (
-                        <div key={pin.id} className="pin-list-item">
-                          <div className="pin-info-group">
-                            <div 
-                              className="list-diamond" 
-                              style={{ 
-                                borderColor: color, 
-                                backgroundColor: `color-mix(in srgb, ${color} 15%, transparent)` 
-                              }}
-                            >
-                              <span style={{ color }}>{pin.title.charAt(0).toUpperCase()}</span>
-                            </div>
-                            
-                            <div className="pin-text">
-                              <span className="pin-title">{pin.title}</span>
-                              <span className="pin-coords">
-                                {pin.lat.toFixed(4)}, {pin.lng.toFixed(4)}
-                              </span>
-                            </div>
-                          </div>
-
-                          <button 
-                            type="button" 
-                            className="locate-btn"
-                            title="Locate on Map"
-                            onClick={() => console.log("Locate pin:", pin.id)}
-                          >
-                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                              <polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
-                            </svg>
-                          </button>
-                        </div>
-                      );
-                    })}
-                  </div>
-                </div>
-              </div>
-
-              <div className="module-card recent-card">
-                <div className="card-header">
-                  <h3>YOUR RECENT PINS</h3>
-                  <span className="count-badge" style={{ color: 'var(--text-secondary)', borderColor: 'var(--border-color)', background: 'transparent' }}>
-                    {mockStats.recentList.length}
-                  </span>
-                </div>
-                <div className="card-body">
-                  <div className="pin-list">
-                    {mockStats.recentList.map((pin) => {
-                      const color = getPinColor(pin.type);
-                      return (
-                        <div key={pin.id} className="pin-list-item">
-                          <div className="pin-info-group">
-                            <div 
-                              className="list-diamond" 
-                              style={{ 
-                                borderColor: color, 
-                                backgroundColor: `color-mix(in srgb, ${color} 15%, transparent)` 
-                              }}
-                            >
-                              <span style={{ color }}>{pin.title.charAt(0).toUpperCase()}</span>
-                            </div>
-                            
-                            <div className="pin-text">
-                              <span className="pin-title">{pin.title}</span>
-                              <span className="pin-coords">
-                                {pin.lat.toFixed(4)}, {pin.lng.toFixed(4)}
-                              </span>
-                            </div>
-                          </div>
-
-                          <button 
-                            type="button" 
-                            className="locate-btn"
-                            title="Locate on Map"
-                            onClick={() => console.log("Locate pin:", pin.id)}
-                          >
-                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                              <polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
-                            </svg>
-                          </button>
-                        </div>
-                      );
-                    })}
-                  </div>
-                </div>
-              </div>
-
-            </div>
-          </div>
-        </main>
-      </div>
-
-      <style jsx>{`
+	const router = useRouter();
+	const { data, isLoading } = trpc.user.getCurrent.useQuery();
+	const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+	const { data: userPins } = trpc.pin.getCurrentUsersPins.useQuery(undefined, {
+		refetchOnWindowFocus: false,
+	});
+
+	const { data: userComments } = trpc.comment.getCurrentUsersComments.useQuery(
+		undefined,
+		{
+			refetchOnWindowFocus: false,
+		},
+	);
+
+	// const [isEditingBio, setIsEditingBio] = useState(false);
+	// const [bioInput, setBioInput] = useState("");
+	const { theme, toggleTheme } = useTheme();
+
+	// const handleSaveBio = () => {
+	// 	// TODO: Hook this up to trpc.user.updateBio.useMutation()
+	// 	console.log("Saving new bio:", bioInput);
+	// 	setIsEditingBio(false);
+	// };
+
+	const goToMap = () => router.push("/");
+	const goToAdmin = () => router.push("/admin");
+
+	const handleSignOut = async () => {
+		await signOut();
+		router.refresh();
+	};
+	const stats = useMemo(() => {
+		return {
+			totalPins: userPins?.filter((p) => p.status !== "DELETED").length,
+			verifiedPins: userPins?.filter((p) => p.status === "ACTIVE").length,
+			pendingPins: userPins?.filter((p) => p.status === "PENDING_VERIFICATION")
+				.length,
+			rejectedPins: userPins?.filter((p) => p.status === "ARCHIVED").length,
+			comments: userComments?.length,
+			categoryBreakdown: {
+				academic: userPins?.filter(
+					(p) =>
+						p.pinTags.map((pt) => pt.tag.title).includes("academic") &&
+						p.status !== "DELETED",
+				).length,
+				food: userPins?.filter(
+					(p) =>
+						p.pinTags.map((pt) => pt.tag.title).includes("food") &&
+						p.status !== "DELETED",
+				).length,
+				social: userPins?.filter(
+					(p) =>
+						p.pinTags.map((pt) => pt.tag.title).includes("social") &&
+						p.status !== "DELETED",
+				).length,
+				utility: userPins?.filter(
+					(p) =>
+						p.pinTags.map((pt) => pt.tag.title).includes("utility") &&
+						p.status !== "DELETED",
+				).length,
+				transit: userPins?.filter(
+					(p) =>
+						p.pinTags.map((pt) => pt.tag.title).includes("transit") &&
+						p.status !== "DELETED",
+				).length,
+			},
+			pendingList: userPins
+				?.filter((p) => p.status === "PENDING_VERIFICATION")
+				.slice(0, 5),
+			recentList: userPins?.filter((p) => p.status === "ACTIVE").slice(0, 5),
+		};
+	}, [userPins, userComments]);
+
+	const verificationRate =
+		stats.verifiedPins && stats.totalPins
+			? Math.round((stats.verifiedPins / stats.totalPins) * 100)
+			: 0;
+
+	return (
+		<div className="dashboard-layout">
+			{/* --- MOBILE OVERLAY --- */}
+			{isSidebarOpen && (
+				// biome-ignore lint/a11y/noStaticElementInteractions: <explanation>
+				// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+				<div
+					className="mobile-overlay"
+					onClick={() => setIsSidebarOpen(false)}
+				/>
+			)}
+
+			{/* --- SIDEBAR --- */}
+			<aside className={`sidebar ${isSidebarOpen ? "open" : ""}`}>
+				<div className="sidebar-header">
+					<h2 className="brand">UP WAYPOINT</h2>
+				</div>
+
+				<nav className="sidebar-nav">
+					<div className="nav-group">
+						<span className="nav-label">MAIN</span>
+						<button type="button" className="nav-item active">
+							OVERVIEW
+						</button>
+						{data?.userRole === "admin" && (
+							<button
+								type="button"
+								className="nav-item"
+								onClick={goToAdmin}
+								style={{
+									color: "#ff4d4d",
+									border:
+										"1px solid color-mix(in srgb, #ff4d4d 30%, transparent)",
+									background: "color-mix(in srgb, #ff4d4d 5%, transparent)",
+								}}
+							>
+								<div
+									style={{ display: "flex", alignItems: "center", gap: "8px" }}
+								>
+									<svg
+										width="14"
+										height="14"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										strokeWidth="2.5"
+										strokeLinecap="round"
+										strokeLinejoin="round"
+									>
+										<rect
+											x="3"
+											y="11"
+											width="18"
+											height="11"
+											rx="2"
+											ry="2"
+										></rect>
+										<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+									</svg>
+									GO TO ADMIN DASHBOARD
+								</div>
+							</button>
+						)}
+						<button type="button" className="nav-item" onClick={goToMap}>
+							RETURN TO MAP
+						</button>
+					</div>
+					<div className="nav-group" style={{ marginTop: "24px" }}>
+						<span className="nav-label">DISPLAY SETTINGS</span>
+
+						<button
+							type="button"
+							className="nav-item theme-toggle-btn"
+							onClick={toggleTheme}
+						>
+							<span>UI THEME</span>
+							<div className="theme-status">
+								{theme === "dark" ? (
+									<>
+										<svg
+											width="14"
+											height="14"
+											viewBox="0 0 24 24"
+											fill="none"
+											stroke="var(--text-primary)"
+											strokeWidth="2.5"
+											strokeLinecap="round"
+											strokeLinejoin="round"
+										>
+											<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+										</svg>
+										<span style={{ color: "var(--neon-blue)" }}>NIGHT</span>
+									</>
+								) : (
+									<>
+										<svg
+											width="14"
+											height="14"
+											viewBox="0 0 24 24"
+											fill="none"
+											stroke="var(--pin-transit)"
+											strokeWidth="2.5"
+											strokeLinecap="round"
+											strokeLinejoin="round"
+										>
+											<circle cx="12" cy="12" r="5"></circle>
+											<line x1="12" y1="1" x2="12" y2="3"></line>
+											<line x1="12" y1="21" x2="12" y2="23"></line>
+											<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+											<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+											<line x1="1" y1="12" x2="3" y2="12"></line>
+											<line x1="21" y1="12" x2="23" y2="12"></line>
+											<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+											<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+										</svg>
+										<span style={{ color: "var(--pin-transit)" }}>DAY</span>
+									</>
+								)}
+							</div>
+						</button>
+					</div>
+				</nav>
+
+				<div className="sidebar-footer">
+					<button
+						type="button"
+						className="sign-out-btn"
+						onClick={handleSignOut}
+					>
+						SIGN OUT
+					</button>
+				</div>
+			</aside>
+
+			<div className="main-wrapper">
+				{/* --- HEADER --- */}
+				<header className="dashboard-header">
+					<div className="header-left">
+						<button
+							type="button"
+							className="hamburger-btn"
+							onClick={() => setIsSidebarOpen(true)}
+						>
+							<svg
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="2.5"
+								strokeLinecap="round"
+								strokeLinejoin="round"
+							>
+								<line x1="3" y1="12" x2="21" y2="12"></line>
+								<line x1="3" y1="6" x2="21" y2="6"></line>
+								<line x1="3" y1="18" x2="21" y2="18"></line>
+							</svg>
+						</button>
+						<h1 className="header-title">User Dashboard</h1>
+					</div>
+				</header>
+
+				{/* --- MAIN --- */}
+				<main className="content-area custom-vertical-scrollbar">
+					<div className="content-container">
+						<div className="greeting-section">
+							<h2 className="greeting-title">
+								{isLoading
+									? "LOADING..."
+									: `Welcome, ${data?.name ? data.name.toUpperCase() : "UNKNOWN"}!`}
+							</h2>
+							<p className="greeting-subtitle">You made it!</p>
+						</div>
+
+						{/* --- DASHBOARD GRID --- */}
+						<div className="dashboard-grid">
+							<div className="module-card operator-card">
+								<div className="card-header">
+									<h3>YOUR PROFILE</h3>
+									<span
+										className="status-badge"
+										style={{
+											borderColor: "var(--neon-green)",
+											color: "var(--neon-green)",
+											background:
+												"color-mix(in srgb, var(--neon-green) 15%, transparent)",
+										}}
+									>
+										{data?.userRole === "admin" ? "ADMIN" : "REGULAR USER"}
+									</span>
+								</div>
+
+								<div className="card-body operator-body">
+									<div className="operator-profile">
+										<div className="avatar-container">
+											<div className="avatar-fallback">
+												{data?.name ? data.name.charAt(0).toUpperCase() : "O"}
+											</div>
+										</div>
+										<div className="operator-details">
+											<span className="operator-name">
+												{data?.name || "UNKNOWN NAME"}
+											</span>
+											<span className="operator-email">
+												{(data as any)?.email || "UNKNOWN EMAIL"}
+											</span>
+										</div>
+									</div>
+
+									{/* <div className="bio-section">
+										<div className="bio-header">
+											<span className="bio-label">BIO</span>
+											{!isEditingBio && (
+												<button
+													className="edit-bio-btn"
+													onClick={() => {
+														setBioInput((data as any)?.bio || "");
+														setIsEditingBio(true);
+													}}
+												>
+													<svg
+														width="12"
+														height="12"
+														viewBox="0 0 24 24"
+														fill="none"
+														stroke="currentColor"
+														strokeWidth="2.5"
+														strokeLinecap="round"
+														strokeLinejoin="round"
+													>
+														<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+														<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+													</svg>
+													EDIT
+												</button>
+											)}
+										</div>
+
+										{isEditingBio ? (
+											<div className="bio-edit-mode">
+												<textarea
+													className="bio-input custom-vertical-scrollbar"
+													value={bioInput}
+													onChange={(e) => setBioInput(e.target.value)}
+													maxLength={150}
+													rows={3}
+													placeholder="Enter your bio here..."
+												/>
+												<div className="bio-actions">
+													<button
+														className="tactical-button-primary small-btn"
+														onClick={handleSaveBio}
+													>
+														SAVE
+													</button>
+													<button
+														className="tactical-button small-btn"
+														onClick={() => setIsEditingBio(false)}
+													>
+														CANCEL
+													</button>
+												</div>
+											</div>
+										) : (
+											<p className="bio-text">
+												{(data as any)?.bio ||
+													"No bio here. Click EDIT to add a short bio about yourself!"}
+											</p>
+										)}
+									</div> */}
+								</div>
+							</div>
+
+							<div className="module-card telemetry-card">
+								<div className="card-header">
+									<h3>YOUR STATISTICS</h3>
+									<span
+										className="status-badge"
+										style={{
+											borderColor: "var(--neon-blue)",
+											color: "var(--neon-blue)",
+											background:
+												"color-mix(in srgb, var(--neon-blue) 15%, transparent)",
+										}}
+									>
+										SUMMARIZED
+									</span>
+								</div>
+
+								<div className="card-body telemetry-body">
+									{/* Top Stats Grid */}
+									<div className="telemetry-top-grid">
+										<div className="stat-block">
+											<span className="stat-label">TOTAL PINS ADDED</span>
+											<span className="stat-value">{stats.totalPins}</span>
+										</div>
+										<div className="stat-block">
+											<span className="stat-label">TOTAL COMMENTS</span>
+											<span className="stat-value">{stats.comments}</span>
+										</div>
+									</div>
+
+									{/* Verification Integrity Bar */}
+									<div className="integrity-section">
+										<div className="integrity-header">
+											<span className="stat-label">VERIFICATIONS</span>
+											<span className="integrity-percent">
+												{verificationRate}%
+											</span>
+										</div>
+										<div className="progress-track">
+											<div
+												className="progress-fill"
+												style={{ width: `${verificationRate}%` }}
+											></div>
+										</div>
+										<div className="integrity-details">
+											<span className="detail-item verified">
+												{stats.verifiedPins} VERIFIED
+											</span>
+											<span className="detail-item pending">
+												{stats.pendingPins} PENDING
+											</span>
+											<span className="detail-item rejected">
+												{stats.rejectedPins} REJECTED
+											</span>
+										</div>
+									</div>
+
+									{/* Category Distribution */}
+									<div className="distribution-section">
+										<span className="stat-label">CATEGORY DISTRIBUTION</span>
+										<div className="category-list">
+											{PIN_CATEGORIES.map((category) => {
+												const count =
+													stats.categoryBreakdown[
+														category.id as keyof typeof stats.categoryBreakdown
+													] || 0;
+												const percentage =
+													stats.totalPins && stats.totalPins > 0
+														? (count / stats.totalPins) * 100
+														: 0;
+
+												return (
+													<div key={category.id} className="category-row">
+														<div className="cat-info">
+															<span
+																className="cat-name"
+																style={{ color: category.color }}
+															>
+																{category.label}
+															</span>
+															<span className="cat-count">{count}</span>
+														</div>
+														<div className="cat-track">
+															<div
+																className="cat-fill"
+																style={{
+																	width: `${percentage}%`,
+																	backgroundColor: category.color,
+																	boxShadow: `0 0 10px color-mix(in srgb, ${category.color} 50%, transparent)`,
+																}}
+															></div>
+														</div>
+													</div>
+												);
+											})}
+										</div>
+									</div>
+								</div>
+							</div>
+
+							<div className="module-card pending-card">
+								<div className="card-header">
+									<h3>YOUR PENDING PINS</h3>
+									<span className="count-badge">
+										{stats.pendingList?.length}
+									</span>
+								</div>
+								<div className="card-body">
+									<div className="pin-list">
+										{stats.pendingList?.map((pin) => {
+											const color = getPinColor(
+												pin.pinTags?.[0]?.tag.title || "",
+											);
+											return (
+												<div key={pin.id} className="pin-list-item">
+													<div className="pin-info-group">
+														<div
+															className="list-diamond"
+															style={{
+																borderColor: color,
+																backgroundColor: `color-mix(in srgb, ${color} 15%, transparent)`,
+															}}
+														>
+															<span style={{ color }}>
+																{pin.title.charAt(0).toUpperCase()}
+															</span>
+														</div>
+
+														<div className="pin-text">
+															<span className="pin-title">{pin.title}</span>
+															<span className="pin-coords">
+																{pin.latitude.toFixed(4)},{" "}
+																{pin.longitude.toFixed(4)}
+															</span>
+														</div>
+													</div>
+
+													<button
+														type="button"
+														className="locate-btn"
+														title="Locate on Map"
+														onClick={() => console.log("Locate pin:", pin.id)}
+													>
+														<svg
+															width="18"
+															height="18"
+															viewBox="0 0 24 24"
+															fill="none"
+															stroke="currentColor"
+															strokeWidth="2.5"
+														>
+															<polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
+														</svg>
+													</button>
+												</div>
+											);
+										})}
+									</div>
+								</div>
+							</div>
+
+							<div className="module-card recent-card">
+								<div className="card-header">
+									<h3>YOUR RECENT PINS</h3>
+									<span
+										className="count-badge"
+										style={{
+											color: "var(--text-secondary)",
+											borderColor: "var(--border-color)",
+											background: "transparent",
+										}}
+									>
+										{stats.recentList?.length}
+									</span>
+								</div>
+								<div className="card-body">
+									<div className="pin-list">
+										{stats.recentList?.map((pin) => {
+											const color = getPinColor(
+												pin.pinTags?.[0]?.tag.title || "",
+											);
+											return (
+												<div key={pin.id} className="pin-list-item">
+													<div className="pin-info-group">
+														<div
+															className="list-diamond"
+															style={{
+																borderColor: color,
+																backgroundColor: `color-mix(in srgb, ${color} 15%, transparent)`,
+															}}
+														>
+															<span style={{ color }}>
+																{pin.title.charAt(0).toUpperCase()}
+															</span>
+														</div>
+
+														<div className="pin-text">
+															<span className="pin-title">{pin.title}</span>
+															<span className="pin-coords">
+																{pin.latitude.toFixed(4)},{" "}
+																{pin.longitude.toFixed(4)}
+															</span>
+														</div>
+													</div>
+
+													<button
+														type="button"
+														className="locate-btn"
+														title="Locate on Map"
+														onClick={() => console.log("Locate pin:", pin.id)}
+													>
+														<svg
+															width="18"
+															height="18"
+															viewBox="0 0 24 24"
+															fill="none"
+															stroke="currentColor"
+															strokeWidth="2.5"
+														>
+															<polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
+														</svg>
+													</button>
+												</div>
+											);
+										})}
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</main>
+			</div>
+
+			<style jsx>{`
         /* --- LAYOUT SHELL --- */
         .dashboard-layout {
           display: flex;
@@ -1149,6 +1327,6 @@ export default function Dashboard() {
           }
         }
       `}</style>
-    </div>
-  );
-}
\ No newline at end of file
+		</div>
+	);
+}
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 4491f46..2b970b7 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -17,16 +17,30 @@ import { TargetLine } from "@/components/TargetLine";
 import { Polyline } from "@/components/Polyline";
 import { Polygon } from "@/components/Polygon";
 import { Sidebar } from "@/components/Sidebar";
-import { JEEPNEY_ROUTES, CAMPUS_ZONES, ZONE_CATEGORIES } from "@/data/map-layers";
+import {
+	JEEPNEY_ROUTES,
+	CAMPUS_ZONES,
+	ZONE_CATEGORIES,
+} from "@/data/map-layers";
 import { useState, useEffect, useRef, useMemo, useCallback } from "react";
 import { useTheme } from "@/lib/ThemeContext";
 import { trpc } from "@/lib/trpc";
+import { useSearchParams } from "next/navigation";
+import { useSession } from "@/lib/auth-client";
+import { skipToken } from "@tanstack/react-query";
 
 export default function Home() {
+	const session = useSession();
+	const params = useSearchParams();
+
 	const { data: pins } = trpc.pin.getAll.useQuery(undefined, {
 		refetchOnWindowFocus: false,
 	});
 
+	const { data: currentUser } = trpc.user.getCurrent.useQuery(
+		session ? undefined : skipToken,
+	);
+
 	const {
 		mode,
 		selectedPinId,
@@ -42,33 +56,37 @@ export default function Home() {
 
 	const [activeRoutes, setActiveRoutes] = useState<string[]>([]);
 
-    const handleToggleRoute = (routeId: string) => {
-        setActiveRoutes((prev) => 
-            prev.includes(routeId) 
-                ? prev.filter(id => id !== routeId)
-                : [...prev, routeId]
-        );
-    };
+	const handleToggleRoute = (routeId: string) => {
+		setActiveRoutes((prev) =>
+			prev.includes(routeId)
+				? prev.filter((id) => id !== routeId)
+				: [...prev, routeId],
+		);
+	};
 
-	const [activeZoneCategories, setActiveZoneCategories] = useState<string[]>([]);
+	const [activeZoneCategories, setActiveZoneCategories] = useState<string[]>(
+		[],
+	);
 
-    const handleToggleZoneCategory = (categoryId: string) => {
-        setActiveZoneCategories((prev) => 
-            prev.includes(categoryId) ? prev.filter(id => id !== categoryId) : [...prev, categoryId]
-        );
-    };
+	const handleToggleZoneCategory = (categoryId: string) => {
+		setActiveZoneCategories((prev) =>
+			prev.includes(categoryId)
+				? prev.filter((id) => id !== categoryId)
+				: [...prev, categoryId],
+		);
+	};
 
 	const [cameraProps, setCameraProps] = useState({
-        center: { lat: 14.6549, lng: 121.0645 },
-        zoom: 19,
-    });
+		center: { lat: 14.6549, lng: 121.0645 },
+		zoom: 19,
+	});
 
-    const handleCameraChange = useCallback((ev: MapCameraChangedEvent) => {
-        setCameraProps({
-            center: ev.detail.center,
-            zoom: ev.detail.zoom,
-        });
-    }, []);
+	const handleCameraChange = useCallback((ev: MapCameraChangedEvent) => {
+		setCameraProps({
+			center: ev.detail.center,
+			zoom: ev.detail.zoom,
+		});
+	}, []);
 
 	const mockUserLocation = { lat: 14.6549, lng: 121.0645 };
 	const mockHeading = 45;
@@ -90,8 +108,8 @@ export default function Home() {
 	}, [pins]);
 
 	const activePinObj = useMemo(() => {
-        return pinsParsed.find((p) => p.id === selectedPinId);
-    }, [pinsParsed, selectedPinId]);
+		return pinsParsed.find((p) => p.id === selectedPinId);
+	}, [pinsParsed, selectedPinId]);
 
 	useEffect(() => {
 		if (!isAddingPin) return;
@@ -106,6 +124,13 @@ export default function Home() {
 		return () => window.removeEventListener("mousemove", handleMouseMove);
 	}, [isAddingPin]);
 
+	useEffect(() => {
+		if (params.has("pin")) {
+			const preselectedPin = params.get("pin") as string;
+			selectPin(preselectedPin);
+		}
+	}, [params, selectPin]);
+
 	return (
 		<APIProvider apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY || ""}>
 			<main
@@ -118,8 +143,8 @@ export default function Home() {
 				{/* MAP LAYER */}
 				<GoogleMap
 					center={cameraProps.center}
-                    zoom={cameraProps.zoom}
-                    onCameraChanged={handleCameraChange}
+					zoom={cameraProps.zoom}
+					onCameraChanged={handleCameraChange}
 					minZoom={17}
 					mapId={process.env.NEXT_PUBLIC_MAP_ID || "71238adec955b8c6d66f595a"}
 					colorScheme={theme === "dark" ? ColorScheme.DARK : ColorScheme.LIGHT}
@@ -160,11 +185,11 @@ export default function Home() {
 								?.toLowerCase()
 								.includes(searchQuery.toLowerCase());
 
-						const isVisible = !!(
-							matchesCategory &&
-							matchesSearch &&
-							pinData.status !== "DELETED"
-						);
+						const isVisible =
+							!!(matchesCategory && matchesSearch) &&
+							(currentUser?.userRole === "admin"
+								? pinData.status !== "DELETED"
+								: pinData.status === "ACTIVE");
 
 						return (
 							<AdvancedMarker
@@ -183,64 +208,66 @@ export default function Home() {
 						);
 					})}
 
-                    <AdvancedMarker position={mockUserLocation} zIndex={50}>
-                        <MapCursor heading={mockHeading} />
-                    </AdvancedMarker>
-					
-                    {activePinObj && (
-                        <TargetLine
-                            start={mockUserLocation}
-                            end={{ lat: activePinObj.latitude, lng: activePinObj.longitude }}
-                            color="#00E5FF"
-                        />
-                    )}
+					<AdvancedMarker position={mockUserLocation} zIndex={50}>
+						<MapCursor heading={mockHeading} />
+					</AdvancedMarker>
+
+					{activePinObj && (
+						<TargetLine
+							start={mockUserLocation}
+							end={{ lat: activePinObj.latitude, lng: activePinObj.longitude }}
+							color="#00E5FF"
+						/>
+					)}
 
 					{CAMPUS_ZONES.map((zone) => {
-                        if (!activeZoneCategories.includes(zone.categoryId)) return null;
-
-                        const categoryDef = ZONE_CATEGORIES.find(c => c.id === zone.categoryId);
-                        const zoneColor = categoryDef ? categoryDef.color : "#FFFFFF";
-
-                        return (
-                            <Polygon 
-                                key={zone.id} 
-                                paths={zone.paths} 
-                                fillColor={zoneColor} 
-                                strokeColor={zoneColor}
-                                isPulsating={true} 
-                            />
-                        );
-                    })}
+						if (!activeZoneCategories.includes(zone.categoryId)) return null;
+
+						const categoryDef = ZONE_CATEGORIES.find(
+							(c) => c.id === zone.categoryId,
+						);
+						const zoneColor = categoryDef ? categoryDef.color : "#FFFFFF";
+
+						return (
+							<Polygon
+								key={zone.id}
+								paths={zone.paths}
+								fillColor={zoneColor}
+								strokeColor={zoneColor}
+								isPulsating={true}
+							/>
+						);
+					})}
 
 					{JEEPNEY_ROUTES.map((route) => {
-                        if (!activeRoutes.includes(route.id)) return null;
-
-                        return (
-                            <Polyline 
-                                key={route.id} 
-                                path={route.path} 
-                                color={route.color} 
-                                weight={10}
-                                animateDirection="forward"
-                            />
-                        );
-                    })}
+						if (!activeRoutes.includes(route.id)) return null;
+
+						return (
+							<Polyline
+								key={route.id}
+								path={route.path}
+								color={route.color}
+								weight={10}
+								animateDirection="forward"
+							/>
+						);
+					})}
 				</GoogleMap>
 
 				{/* TOP BAR */}
 				<TopBar
-                    onMenuClick={toggleMenu}
-                    activeFilter={activeFilter}
-                    onFilterChange={setActiveFilter}
-                    searchQuery={searchQuery}
-                    onSearchChange={setSearchQuery}
-                    activeRoutes={activeRoutes}
-                    onToggleRoute={handleToggleRoute}
-                    activeZoneCategories={activeZoneCategories}
-                    onToggleZoneCategory={handleToggleZoneCategory}
-                    userLocation={mockUserLocation}
+					onMenuClick={toggleMenu}
+					activeFilter={activeFilter}
+					onFilterChange={setActiveFilter}
+					searchQuery={searchQuery}
+					onSearchChange={setSearchQuery}
+					activeRoutes={activeRoutes}
+					onToggleRoute={handleToggleRoute}
+					activeZoneCategories={activeZoneCategories}
+					onToggleZoneCategory={handleToggleZoneCategory}
+					userLocation={mockUserLocation}
 					hideControls={!!selectedPinId}
-                />
+				/>
 
 				{/* TARGETING CROSSHAIR (Only visible when armed) */}
 				{isAddingPin && (
@@ -293,10 +320,7 @@ export default function Home() {
 					}}
 				/>
 
-				<Sidebar 
-                    isOpen={mode === "MENU"} 
-                    onClose={toggleMenu} 
-                />
+				<Sidebar isOpen={mode === "MENU"} onClose={toggleMenu} />
 
 				{pendingPinCoords && (
 					<AddPinModal
diff --git a/apps/web/components/AddPinModal.tsx b/apps/web/components/AddPinModal.tsx
index 1fac01a..e0e3c49 100644
--- a/apps/web/components/AddPinModal.tsx
+++ b/apps/web/components/AddPinModal.tsx
@@ -130,40 +130,41 @@ export function AddPinModal({ coords, onSave, onCancel }: AddPinModalProps) {
 					</div>
 
 					<div className="input-group">
-                        <span>PIN TYPES (select all that apply)</span>
-                        <div className="type-selector">
-                            {tagsData?.map((t) => {
-                                const isActive = tags.includes(t.id);
-                                const tagColor = getPinColor(t.title);
-
-                                return (
-                                    <button
-                                        key={t.id}
-                                        type="button"
-                                        className="type-btn"
-                                        onClick={() => {
-                                            if (isActive) {
-                                                formMethods.setValue(
-                                                    "tags",
-                                                    tags.filter((tag) => tag !== t.id),
-                                                );
-                                            } else {
-                                                formMethods.setValue("tags", [...tags, t.id]);
-                                            }
-                                        }}
-                                        style={isActive ? {
-                                            backgroundColor: `color-mix(in srgb, ${tagColor} 25%, transparent)`, 
-                                            borderColor: tagColor,
-                                            color: tagColor,
-                                            boxShadow: `inset 0 0 10px color-mix(in srgb, ${tagColor} 40%, transparent)`
-                                        } : {}}
-                                    >
-                                        {t.title.toUpperCase()}
-                                    </button>
-                                );
-                            })}
-                        </div>
-                    </div>
+						<span>PIN TYPE</span>
+						<div className="type-selector">
+							{tagsData?.map((t) => {
+								const isActive = tags.includes(t.id);
+								const tagColor = getPinColor(t.title);
+
+								return (
+									<button
+										key={t.id}
+										type="button"
+										className="type-btn"
+										onClick={() => {
+											if (isActive) {
+												formMethods.setValue("tags", []);
+											} else {
+												formMethods.setValue("tags", [t.id]);
+											}
+										}}
+										style={
+											isActive
+												? {
+														backgroundColor: `color-mix(in srgb, ${tagColor} 25%, transparent)`,
+														borderColor: tagColor,
+														color: tagColor,
+														boxShadow: `inset 0 0 10px color-mix(in srgb, ${tagColor} 40%, transparent)`,
+													}
+												: {}
+										}
+									>
+										{t.title.toUpperCase()}
+									</button>
+								);
+							})}
+						</div>
+					</div>
 
 					<input
 						type="file"
@@ -173,7 +174,11 @@ export function AddPinModal({ coords, onSave, onCancel }: AddPinModalProps) {
 					/>
 
 					<div className="action-row">
-						<button type="button" className="tactical-button" onClick={handleCancel}>
+						<button
+							type="button"
+							className="tactical-button"
+							onClick={handleCancel}
+						>
 							CANCEL
 						</button>
 						<button type="submit" className="tactical-button-primary save-btn">
@@ -306,4 +311,4 @@ export function AddPinModal({ coords, onSave, onCancel }: AddPinModalProps) {
       `}</style>
 		</div>
 	);
-}
\ No newline at end of file
+}
diff --git a/apps/web/components/EditPinModal.tsx b/apps/web/components/EditPinModal.tsx
new file mode 100644
index 0000000..41773a4
--- /dev/null
+++ b/apps/web/components/EditPinModal.tsx
@@ -0,0 +1,321 @@
+"use client";
+
+import { trpc } from "@/lib/trpc";
+import type { PinRouterInputs, PinRouterOutputs } from "@repo/api";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
+import z from "zod";
+import { fileSchema } from "@repo/api/schemas";
+import { getPinColor } from "@/data/pin-categories";
+type Pin = {
+	id?: string | undefined;
+	createdAt?: string | undefined;
+	updatedAt?: string | undefined;
+	title?: string | undefined;
+	pinTags?:
+		| {
+				createdAt: string;
+				updatedAt: string;
+				tag: {
+					id: string;
+					createdAt: string;
+					updatedAt: string;
+					title: string;
+					color: string | null;
+				};
+				pinId: string;
+				tagId: string;
+		  }[]
+		| undefined;
+	status?: string | undefined;
+	latitude?: number | undefined;
+	longitude?: number | undefined;
+	description?: string | null;
+	ownerId?: string | undefined;
+};
+
+type UpdatePin = PinRouterInputs["update"];
+
+interface IEditPinModalProps {
+	onSave: (pinId: string) => void;
+	onCancel: () => void;
+	pin: Pin;
+}
+
+export function EditPinModal({ onSave, onCancel, pin }: IEditPinModalProps) {
+	const pinCreationSchema = z.object({
+		title: z.string().min(1).optional(),
+		description: z.string().optional(),
+		tags: z.array(z.string()).optional(),
+	});
+
+	type pinCreationSchemaType = z.infer<typeof pinCreationSchema>;
+
+	const updatePin = trpc.pin.update.useMutation({
+		onSuccess: (newPin) => {
+			if (!newPin) return;
+			onSave(newPin.id);
+		},
+	});
+	const { data: tagsData } = trpc.tag.getAll.useQuery();
+
+	const formMethods = useForm({
+		defaultValues: {
+			tags: pin.pinTags?.map((pt) => pt.tagId),
+			title: pin.title,
+			description: pin.description || "",
+		},
+		resolver: zodResolver(pinCreationSchema),
+	});
+
+	const onSubmit = async (data: pinCreationSchemaType) => {
+		if (!pin.id) {
+			handleCancel();
+			return;
+		}
+
+		const dirtyFields = Object.keys(formMethods.formState.dirtyFields);
+		console.log(dirtyFields);
+
+		updatePin.mutate({
+			id: pin.id,
+			title: dirtyFields.includes("title") ? data.title : undefined,
+			description: dirtyFields.includes("description")
+				? data.description
+				: undefined,
+			tags: dirtyFields.includes("tags") ? data.tags || [] : [],
+		});
+	};
+
+	const handleCancel = () => {
+		formMethods.clearErrors();
+		formMethods.reset();
+		onCancel();
+	};
+
+	const tags = formMethods.watch("tags");
+
+	return (
+		<div className="modal-overlay">
+			<div className="modal-card tactical-panel">
+				<div className="modal-header">
+					<svg
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="var(--neon-blue, #00E5FF)"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<line x1="12" y1="5" x2="12" y2="19"></line>
+						<line x1="5" y1="12" x2="19" y2="12"></line>
+					</svg>
+					<h2 className="modal-title">EDIT PIN</h2>
+					<span>{formMethods.formState.errors.tags?.message}</span>
+				</div>
+
+				<form
+					onSubmit={formMethods.handleSubmit(onSubmit)}
+					className="modal-form"
+				>
+					<div className="input-group">
+						<span>PIN TITLE</span>
+						<input
+							type="text"
+							placeholder="e.g. Quezon Hall"
+							required
+							{...formMethods.register("title")}
+						/>
+					</div>
+
+					<div className="input-group">
+						<span>DESCRIPTION</span>
+						<textarea
+							placeholder="Enter description..."
+							rows={3}
+							{...formMethods.register("description")}
+						/>
+					</div>
+
+					<div className="input-group">
+						<span>PIN TYPE</span>
+						<div className="type-selector">
+							{tagsData?.map((t) => {
+								const isActive = tags?.includes(t.id);
+								const tagColor = getPinColor(t.title);
+
+								return (
+									<button
+										key={t.id}
+										type="button"
+										className="type-btn"
+										onClick={() => {
+											if (isActive) {
+												formMethods.setValue("tags", [], { shouldDirty: true });
+											} else {
+												formMethods.setValue("tags", [t.id], {
+													shouldDirty: true,
+												});
+											}
+										}}
+										style={
+											isActive
+												? {
+														backgroundColor: `color-mix(in srgb, ${tagColor} 25%, transparent)`,
+														borderColor: tagColor,
+														color: tagColor,
+														boxShadow: `inset 0 0 10px color-mix(in srgb, ${tagColor} 40%, transparent)`,
+													}
+												: {}
+										}
+									>
+										{t.title.toUpperCase()}
+									</button>
+								);
+							})}
+						</div>
+					</div>
+
+					<div className="action-row">
+						<button
+							type="button"
+							className="tactical-button"
+							onClick={handleCancel}
+						>
+							CANCEL
+						</button>
+						<button type="submit" className="tactical-button-primary save-btn">
+							CONFIRM
+						</button>
+					</div>
+				</form>
+			</div>
+
+			<style jsx>{`
+        .modal-overlay {
+          position: fixed;
+          top: 0; left: 0; width: 100vw; height: 100vh;
+          background: rgba(0, 0, 0, 0.7);
+          backdrop-filter: blur(8px);
+          -webkit-backdrop-filter: blur(8px);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 200;
+          padding: 20px;
+        }
+
+        .modal-card {
+          width: 100%;
+          max-width: 400px;
+          padding: 24px;
+          animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+					background-color: black;
+        }
+
+        .modal-header {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          margin-bottom: 24px;
+          border-bottom: 1px solid var(--border-color);
+          padding-bottom: 16px;
+        }
+
+        .modal-title {
+          font-family: var(--font-cubao-wide), sans-serif;
+          color: var(--text-primary);
+          font-size: 20px;
+          margin: 0;
+          letter-spacing: 0.05em;
+        }
+
+        .modal-form {
+          display: flex;
+          flex-direction: column;
+          gap: 20px;
+        }
+
+        .input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+        }
+
+        .input-group span {
+          font-family: var(--font-chakra), sans-serif;
+          font-size: 12px;
+          color: var(--neon-blue, #00E5FF);
+          letter-spacing: 0.1em;
+          font-weight: 700;
+        }
+
+        input, textarea {
+          background: var(--bg-base);
+          border: 1px solid var(--border-color);
+          border-radius: 8px;
+          padding: 12px;
+          color: var(--text-primary);
+          font-family: var(--font-nunito), sans-serif;
+          font-size: 14px;
+          outline: none;
+          transition: all 0.2s;
+        }
+
+        input:focus, textarea:focus {
+          border-color: var(--neon-blue, #00E5FF);
+          box-shadow: 0 0 10px var(--shadow-glow);
+        }
+
+        .type-selector {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 8px;
+        }
+
+        .type-btn {
+          background: transparent;
+          border: 1px solid var(--border-color);
+          color: var(--text-secondary);
+          padding: 10px;
+          border-radius: 6px;
+          font-family: var(--font-chakra), sans-serif;
+          font-size: 11px;
+          cursor: pointer;
+          transition: all 0.2s;
+        }
+
+        .type-btn:hover {
+          background: var(--bg-panel-hover);
+          color: var(--text-primary);
+        }
+
+        .action-row {
+          display: flex;
+          gap: 12px;
+          margin-top: 12px;
+        }
+
+        .action-row button {
+          flex: 1;
+          padding: 14px;
+          font-size: 13px;
+          letter-spacing: 0.05em;
+        }
+
+        .save-btn:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        @keyframes slideUp {
+          from { opacity: 0; transform: translateY(20px) scale(0.95); }
+          to { opacity: 1; transform: translateY(0) scale(1); }
+        }
+      `}</style>
+		</div>
+	);
+}
diff --git a/apps/web/components/ExpandedPinView.tsx b/apps/web/components/ExpandedPinView.tsx
index 71d233a..efd43e1 100644
--- a/apps/web/components/ExpandedPinView.tsx
+++ b/apps/web/components/ExpandedPinView.tsx
@@ -8,105 +8,115 @@ import Image from "next/image";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import z from "zod";
+import { EditPinModal } from "./EditPinModal";
 
 interface ExpandedPinViewProps {
-    pinId: string;
-    onClose: () => void;
+	pinId: string;
+	onClose: () => void;
 }
 
 type Comment = {
-    id: string;
-    createdAt: string;
-    updatedAt: string;
-    ownerId: string;
-    pinId: string;
-    message: string;
-    parentId: string | null;
-    deletedAt: string | null;
-    replies: Comment[];
-    authorName: string;
+	id: string;
+	createdAt: string;
+	updatedAt: string;
+	ownerId: string;
+	pinId: string;
+	message: string;
+	parentId: string | null;
+	deletedAt: string | null;
+	replies: Comment[];
+	authorName: string;
 };
 
 const commentSchema = z.object({
-    message: z.string(),
+	message: z.string(),
 });
 
 type commentSchemaType = z.infer<typeof commentSchema>;
 
 const CommentNode = ({
-    comment,
-    depth = 0,
+	comment,
+	depth = 0,
 }: {
-    comment: Comment;
-    depth: number;
+	comment: Comment;
+	depth: number;
 }) => {
-    const { data: sessionData } = useSession();
-    const utils = trpc.useUtils();
-    const createComment = trpc.comment.create.useMutation({
-        onSuccess(output) {
-            utils.pin.getById.invalidate();
-            setIsReplying(false);
-        },
-    });
-    const formMethods = useForm({ resolver: zodResolver(commentSchema) });
-    const [isReplying, setIsReplying] = useState(false);
-    if (depth > 3) return null;
-
-    function onSubmit(data: commentSchemaType) {
-        createComment.mutate({
-            message: data.message,
-            pinId: comment.pinId,
-            parentId: comment.id,
-        });
-    }
-
-    return (
-        <div className={`comment-node ${depth > 0 ? "is-reply" : ""}`}>
-            <div className="comment-header">
-                <span className="comment-author">{comment.authorName}</span>
-                <span className="comment-time">
-                    {new Date(comment.createdAt).toLocaleString("default")}
-                </span>
-            </div>
-
-            <p className="comment-text">{comment.message}</p>
-
-            <div className="comment-actions">
-                {!isReplying ? (
-                    sessionData &&
-                    depth < 3 && (
-                        <button
-                            type="button"
-                            className="action-btn"
-                            onClick={() => setIsReplying(true)}
-                        >
-                            REPLY
-                        </button>
-                    )
-                ) : (
-                    <form onSubmit={formMethods.handleSubmit(onSubmit)} className="reply-form">
-                        <input 
-                            {...formMethods.register("message")} 
-                            placeholder="Write a reply..."
-                            className="reply-input"
-                        />
-                        <button type="submit" className="tactical-button-primary form-btn">Send</button>
-                        <button type="button" className="tactical-button form-btn" onClick={() => setIsReplying(false)}>
-                            Cancel
-                        </button>
-                    </form>
-                )}
-            </div>
-
-            {comment.replies && comment.replies.length > 0 && (
-                <div className="replies-container">
-                    {comment.replies.map((reply) => (
-                        <CommentNode key={reply.id} comment={reply} depth={depth + 1} />
-                    ))}
-                </div>
-            )}
-
-            <style jsx>{`
+	const { data: sessionData } = useSession();
+	const utils = trpc.useUtils();
+	const createComment = trpc.comment.create.useMutation({
+		onSuccess(output) {
+			utils.pin.getById.invalidate();
+			setIsReplying(false);
+		},
+	});
+	const formMethods = useForm({ resolver: zodResolver(commentSchema) });
+	const [isReplying, setIsReplying] = useState(false);
+	if (depth > 3) return null;
+
+	function onSubmit(data: commentSchemaType) {
+		createComment.mutate({
+			message: data.message,
+			pinId: comment.pinId,
+			parentId: comment.id,
+		});
+	}
+
+	return (
+		<div className={`comment-node ${depth > 0 ? "is-reply" : ""}`}>
+			<div className="comment-header">
+				<span className="comment-author">{comment.authorName}</span>
+				<span className="comment-time">
+					{new Date(comment.createdAt).toLocaleString("default")}
+				</span>
+			</div>
+
+			<p className="comment-text">{comment.message}</p>
+
+			<div className="comment-actions">
+				{!isReplying ? (
+					sessionData &&
+					depth < 3 && (
+						<button
+							type="button"
+							className="action-btn"
+							onClick={() => setIsReplying(true)}
+						>
+							REPLY
+						</button>
+					)
+				) : (
+					<form
+						onSubmit={formMethods.handleSubmit(onSubmit)}
+						className="reply-form"
+					>
+						<input
+							{...formMethods.register("message")}
+							placeholder="Write a reply..."
+							className="reply-input"
+						/>
+						<button type="submit" className="tactical-button-primary form-btn">
+							Send
+						</button>
+						<button
+							type="button"
+							className="tactical-button form-btn"
+							onClick={() => setIsReplying(false)}
+						>
+							Cancel
+						</button>
+					</form>
+				)}
+			</div>
+
+			{comment.replies && comment.replies.length > 0 && (
+				<div className="replies-container">
+					{comment.replies.map((reply) => (
+						<CommentNode key={reply.id} comment={reply} depth={depth + 1} />
+					))}
+				</div>
+			)}
+
+			<style jsx>{`
         .comment-node { margin-top: 16px; }
         .comment-node.is-reply {
           margin-left: 16px; 
@@ -141,308 +151,157 @@ const CommentNode = ({
         .reply-input:focus { border-color: var(--neon-blue, #00E5FF); }
         .form-btn { padding: 6px 12px; font-size: 11px; border-radius: 6px; }
       `}</style>
-        </div>
-    );
+		</div>
+	);
 };
 
 export function ExpandedPinView({ pinId, onClose }: ExpandedPinViewProps) {
-    const utils = trpc.useUtils();
-    const { data: sessionData } = useSession();
-    const { data: pin } = trpc.pin.getById.useQuery(
-        { id: pinId },
-        { refetchOnWindowFocus: false },
-    );
-
-    const createComment = trpc.comment.create.useMutation({
-        onSuccess(output) {
-            utils.pin.getById.invalidate();
-            setIsReplying(false);
-        },
-    });
-    const deletePin = trpc.pin.userDelete.useMutation({
-        onSuccess(output) {
-            utils.pin.getAll.invalidate();
-            onClose();
-        },
-    });
-
-    const formMethods = useForm({ resolver: zodResolver(commentSchema) });
-    const [isReplying, setIsReplying] = useState(false);
-
-    function onSubmit(data: commentSchemaType) {
-        createComment.mutate({
-            message: data.message,
-            pinId: pinId,
-        });
-    }
-
-    const [isDeleting, setIsDeleting] = useState(false);
-
-    function onDelete() {
-        deletePin.mutate({ id: pinId });
-    }
-
-    const color = getPinColor(
-        pin?.pinTags ? pin.pinTags[0]?.tag.title || "" : "",
-    );
-
-    const getStatusDisplay = (status: string | undefined) => {
-        switch (status) {
-            case "VERIFIED":
-                return {
-                    text: "VERIFIED",
-                    // color: "var(--neon-green, #00FF99)",
-                    icon: (
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
-                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
-                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
-                        </svg>
-                    )
-                };
-            case "PENDING_VERIFICATION":
-                return {
-                    text: "PENDING",
-                    // color: "var(--neon-yellow, #FFD700)",
-                    icon: (
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
-                            <circle cx="12" cy="12" r="10"></circle>
-                            <polyline points="12 6 12 12 16 14"></polyline>
-                        </svg>
-                    )
-                };
-            case "REJECTED":
-                return {
-                    text: "REJECTED",
-                    // color: "#ff4d4d",
-                    icon: (
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
-                            <circle cx="12" cy="12" r="10"></circle>
-                            <line x1="15" y1="9" x2="9" y2="15"></line>
-                            <line x1="9" y1="9" x2="15" y2="15"></line>
-                        </svg>
-                    )
-                };
-            default:
-                return {
-                    text: status || "UNKNOWN",
-                    color: "var(--text-secondary)",
-                    icon: (
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
-                            <circle cx="12" cy="12" r="10"></circle>
-                            <line x1="12" y1="8" x2="12" y2="12"></line>
-                            <line x1="12" y1="16" x2="12.01" y2="16"></line>
-                        </svg>
-                    )
-                };
-        }
-    };
-
-    const statusData = getStatusDisplay(pin?.status);
-
-    return (
-        <div className="modal-overlay" onClick={onClose}>
-            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
-                <div className="scroll-area custom-vertical-scrollbar">
-                    {/* HEADER */}
-                    <div className="modal-header">
-                        <div>
-                            <span className="badge" style={{ color }}>
-                                {pin?.pinTags?.map((pt) => pt.tag.title).join(", ")}
-                            </span>
-                            <h2>{pin?.title}</h2>
-                        </div>
-                        
-                        <div className="header-actions">
-                            {sessionData?.user?.id === pin?.ownerId && (
-                                <button 
-                                    type="button" 
-                                    className="edit-btn" 
-                                    onClick={() => {
-                                        // TODO: Wire up to Edit Form Modal
-                                        console.log("Edit Pin:", pinId);
-                                    }}
-                                    title="Edit Waypoint"
-                                >
-                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
-                                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
-                                    </svg>
-                                </button>
-                            )}
-                            
-                            <button type="button" className="close-btn" onClick={onClose} title="Close Terminal">
-                                <svg
-                                    width="28"
-                                    height="28"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    strokeWidth="2.5"
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                >
-                                    <line x1="18" y1="6" x2="6" y2="18"></line>
-                                    <line x1="6" y1="6" x2="18" y2="18"></line>
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-
-                    {/* HORIZONTAL BENTO GALLERY OR FALLBACK */}
-                    {pin?.images && pin.images.length > 0 ? (
-                        <div className="photo-gallery custom-scrollbar">
-                            {pin.images.map((img) => (
-                                <div key={img.id} className={`photo-placeholder large`}>
-                                    <Image alt="" src={`${img.url}`} fill objectFit="cover" />
-                                </div>
-                            ))}
-                        </div>
-                    ) : (
-                        <div className="no-photo-placeholder">
-                            <svg 
-                                width="32" 
-                                height="32" 
-                                viewBox="0 0 24 24" 
-                                fill="none" 
-                                stroke="currentColor" 
-                                strokeWidth="1.5" 
-                                strokeLinecap="round" 
-                                strokeLinejoin="round"
-                                style={{ opacity: 0.5, marginBottom: '8px' }}
-                            >
-                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                                <circle cx="8.5" cy="8.5" r="1.5"></circle>
-                                <polyline points="21 15 16 10 5 21"></polyline>
-                                <line x1="3" y1="3" x2="21" y2="21"></line>
-                            </svg>
-                            <span>NO IMAGES AVAILABLE</span>
-                        </div>
-                    )}
-
-                    {/* BODY: INTEL DASHBOARD */}
-                    <div className="modal-body">
-                        <p className="description">{pin?.description}</p>
-
-                        <div className="meta-grid">
-                            {/* PIN ID */}
-                            <div className="meta-item">
-                                <span className="meta-label">PIN ID</span>
-                                <span className="meta-value font-mono">
-                                    {pin?.id?.padStart(7, "0")}
-                                </span>
-                            </div>
-
-                            {/* OWNER */}
-                            <div className="meta-item">
-                                <span className="meta-label">OWNED BY</span>
-                                <span className="meta-value text-muted">{pin?.ownerId}</span>
-                            </div>
-
-                            {/* COORDINATES */}
-                            <div className="meta-item col-span-2">
-                                <span className="meta-label">COORDINATES (LAT, LNG)</span>
-                                <span className="meta-value font-mono">
-                                    {pin?.latitude?.toFixed(6)}, {pin?.longitude?.toFixed(6)}
-                                </span>
-                            </div>
-
-                            {/* STATUS */}
-                            <div className="meta-item">
-                                <span className="meta-label">STATUS</span>
-                                <span 
-                                    className="meta-value font-mono status-badge"
-                                    style={{ 
-                                        color: statusData.color, 
-                                        textShadow: `0 0 10px ${statusData.color}40` 
-                                    }}
-                                >
-                                    {statusData.icon}
-                                    {statusData.text}
-                                </span>
-                            </div>
-
-                            {/* TIMESTAMPS */}
-                            <div className="meta-item">
-                                <span className="meta-label">CREATED AT</span>
-                                <span className="meta-value">
-                                    {new Date(pin?.createdAt || "").toLocaleString("default", {
-                                        month: "long",
-                                        year: "numeric",
-                                        day: "2-digit",
-                                    })}
-                                </span>
-                            </div>
-                            <div className="meta-item">
-                                <span className="meta-label">LAST UPDATED</span>
-                                <span className="meta-value">
-                                    {new Date(pin?.updatedAt || "").toLocaleString("default", {
-                                        month: "long",
-                                        year: "numeric",
-                                        day: "2-digit",
-                                    })}
-                                </span>
-                            </div>
-                        </div>
-
-                        {/* OWNER ACTIONS */}
-                        {!isDeleting && sessionData?.user.id === pin?.ownerId && (
-                            <button type="button" className="tactical-button danger-btn" onClick={() => setIsDeleting(true)}>
-                                DELETE PIN
-                            </button>
-                        )}
-
-                        {isDeleting && (
-                            <div className="delete-confirm-box">
-                                <p>Are you sure you want to permanently delete this pin?</p>
-                                <div className="delete-actions">
-                                    <button type="button" className="tactical-button-primary danger-btn-solid" onClick={onDelete}>
-                                        CONFIRM DELETE
-                                    </button>
-                                    <button type="button" className="tactical-button" onClick={() => setIsDeleting(false)}>
-                                        CANCEL
-                                    </button>
-                                </div>
-                            </div>
-                        )}
-
-                        <div className="forum-section">
-                            <h3 className="section-title">FORUM</h3>
-                            {!isReplying ? (
-                                sessionData && (
-                                    <button
-                                        type="button"
-                                        className="action-btn"
-                                        onClick={() => setIsReplying(true)}
-                                    >
-                                        + ADD COMMENT
-                                    </button>
-                                )
-                            ) : (
-                                <form onSubmit={formMethods.handleSubmit(onSubmit)} className="reply-form">
-                                    <input 
-                                        {...formMethods.register("message")} 
-                                        placeholder="Write a comment..."
-                                        className="reply-input"
-                                    />
-                                    <button type="submit" className="tactical-button-primary form-btn">POST</button>
-                                    <button type="button" className="tactical-button form-btn" onClick={() => setIsReplying(false)}>
-                                        CANCEL
-                                    </button>
-                                </form>
-                            )}
-                            <div className="forum-threads">
-                                {pin?.comments?.map((thread) => (
-                                    <CommentNode key={thread.id} comment={thread} depth={0} />
-                                ))}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div className="bottom-fade"></div>
-            </div>
-
-            <style jsx>{`
+	const utils = trpc.useUtils();
+	const { data: sessionData } = useSession();
+	const { data: pin, isLoading: isPinLoading } = trpc.pin.getById.useQuery(
+		{ id: pinId },
+		{ refetchOnWindowFocus: false },
+	);
+
+	const createComment = trpc.comment.create.useMutation({
+		onSuccess(output) {
+			utils.pin.getById.invalidate();
+			setIsReplying(false);
+		},
+	});
+	const deletePin = trpc.pin.userDelete.useMutation({
+		onSuccess(output) {
+			utils.pin.getAll.invalidate();
+			onClose();
+		},
+	});
+
+	const formMethods = useForm({ resolver: zodResolver(commentSchema) });
+	const [isReplying, setIsReplying] = useState(false);
+
+	function onSubmit(data: commentSchemaType) {
+		createComment.mutate({
+			message: data.message,
+			pinId: pinId,
+		});
+	}
+
+	const [isDeleting, setIsDeleting] = useState(false);
+
+	function onDelete() {
+		deletePin.mutate({ id: pinId });
+	}
+
+	const color = getPinColor(
+		pin?.pinTags ? pin.pinTags[0]?.tag.title || "" : "",
+	);
+
+	const getStatusDisplay = (status: string | undefined) => {
+		switch (status) {
+			case "VERIFIED":
+				return {
+					text: "VERIFIED",
+					// color: "var(--neon-green, #00FF99)",
+					icon: (
+						<svg
+							width="14"
+							height="14"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth="3"
+							strokeLinecap="round"
+							strokeLinejoin="round"
+						>
+							<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+							<polyline points="22 4 12 14.01 9 11.01"></polyline>
+						</svg>
+					),
+				};
+			case "PENDING_VERIFICATION":
+				return {
+					text: "PENDING",
+					// color: "var(--neon-yellow, #FFD700)",
+					icon: (
+						<svg
+							width="14"
+							height="14"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth="3"
+							strokeLinecap="round"
+							strokeLinejoin="round"
+						>
+							<circle cx="12" cy="12" r="10"></circle>
+							<polyline points="12 6 12 12 16 14"></polyline>
+						</svg>
+					),
+				};
+			case "REJECTED":
+				return {
+					text: "REJECTED",
+					// color: "#ff4d4d",
+					icon: (
+						<svg
+							width="14"
+							height="14"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth="3"
+							strokeLinecap="round"
+							strokeLinejoin="round"
+						>
+							<circle cx="12" cy="12" r="10"></circle>
+							<line x1="15" y1="9" x2="9" y2="15"></line>
+							<line x1="9" y1="9" x2="15" y2="15"></line>
+						</svg>
+					),
+				};
+			default:
+				return {
+					text: status || "UNKNOWN",
+					color: "var(--text-secondary)",
+					icon: (
+						<svg
+							width="14"
+							height="14"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth="3"
+							strokeLinecap="round"
+							strokeLinejoin="round"
+						>
+							<circle cx="12" cy="12" r="10"></circle>
+							<line x1="12" y1="8" x2="12" y2="12"></line>
+							<line x1="12" y1="16" x2="12.01" y2="16"></line>
+						</svg>
+					),
+				};
+		}
+	};
+
+	const statusData = getStatusDisplay(pin?.status);
+
+	const [isEditing, setIsEditing] = useState(false);
+
+	if (isPinLoading || !pin)
+		return (
+			// biome-ignore lint/a11y/noStaticElementInteractions: <explanation>
+			// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+			<div className="modal-overlay" onClick={onClose}>
+				<div
+					className="modal-content"
+					style={{
+						borderTop: "3px solid black",
+						animation:
+							"slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), pulse 1s ease-in-out infinite",
+						minHeight: "156px",
+					}}
+				></div>
+				<style jsx>{`
             .modal-overlay {
                 position: fixed; inset: 0; 
                 background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px);
@@ -466,6 +325,296 @@ export function ExpandedPinView({ pinId, onClose }: ExpandedPinViewProps) {
                 position: relative;
                 padding: 0; 
             }
+      `}</style>
+			</div>
+		);
+
+	return (
+		// biome-ignore lint/a11y/noStaticElementInteractions: <explanation>
+		// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+		<div className="modal-overlay" onClick={onClose}>
+			{/** biome-ignore lint/a11y/noStaticElementInteractions: <explanation> */}
+			{/** biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
+			<div className="modal-content" onClick={(e) => e.stopPropagation()}>
+				{isEditing && (
+					<EditPinModal
+						onSave={() => {
+							setIsEditing(false);
+						}}
+						onCancel={() => {
+							setIsEditing(false);
+						}}
+						pin={pin}
+					/>
+				)}
+				<div className="scroll-area custom-vertical-scrollbar">
+					{/* HEADER */}
+					<div className="modal-header">
+						<div>
+							<span className="badge" style={{ color }}>
+								{pin?.pinTags?.map((pt) => pt.tag.title).join(", ")}
+							</span>
+							<h2>{pin?.title}</h2>
+						</div>
+
+						<div className="header-actions">
+							{sessionData?.user?.id === pin?.ownerId && (
+								<button
+									type="button"
+									className="edit-btn"
+									onClick={() => {
+										setIsEditing(true);
+									}}
+									title="Edit Waypoint"
+								>
+									<svg
+										width="20"
+										height="20"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										strokeWidth="2.5"
+										strokeLinecap="round"
+										strokeLinejoin="round"
+									>
+										<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+										<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+									</svg>
+								</button>
+							)}
+
+							<button
+								type="button"
+								className="close-btn"
+								onClick={onClose}
+								title="Close Terminal"
+							>
+								<svg
+									width="28"
+									height="28"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									strokeWidth="2.5"
+									strokeLinecap="round"
+									strokeLinejoin="round"
+								>
+									<line x1="18" y1="6" x2="6" y2="18"></line>
+									<line x1="6" y1="6" x2="18" y2="18"></line>
+								</svg>
+							</button>
+						</div>
+					</div>
+
+					{/* HORIZONTAL BENTO GALLERY OR FALLBACK */}
+					{pin?.images && pin.images.length > 0 ? (
+						<div className="photo-gallery custom-scrollbar">
+							{pin.images.map((img) => (
+								<div key={img.id} className={`photo-placeholder large`}>
+									<Image alt="" src={`${img.url}`} fill objectFit="cover" />
+								</div>
+							))}
+						</div>
+					) : (
+						<div className="no-photo-placeholder">
+							<svg
+								width="32"
+								height="32"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="1.5"
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								style={{ opacity: 0.5, marginBottom: "8px" }}
+							>
+								<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+								<circle cx="8.5" cy="8.5" r="1.5"></circle>
+								<polyline points="21 15 16 10 5 21"></polyline>
+								<line x1="3" y1="3" x2="21" y2="21"></line>
+							</svg>
+							<span>NO IMAGES AVAILABLE</span>
+						</div>
+					)}
+
+					{/* BODY: INTEL DASHBOARD */}
+					<div className="modal-body">
+						<p className="description">{pin?.description}</p>
+
+						<div className="meta-grid">
+							{/* PIN ID */}
+							<div className="meta-item">
+								<span className="meta-label">PIN ID</span>
+								<span className="meta-value font-mono">
+									{pin?.id?.padStart(7, "0")}
+								</span>
+							</div>
+							{/* OWNER */}
+							<div className="meta-item">
+								<span className="meta-label">CREATED BY</span>
+								<span className="meta-value">{pin?.owner}</span>
+							</div>
+							{/* COORDINATES */}
+							<div className="meta-item col-span-2">
+								<span className="meta-label">COORDINATES (LAT, LNG)</span>
+								<span className="meta-value font-mono">
+									{pin?.latitude?.toFixed(6)}, {pin?.longitude?.toFixed(6)}
+								</span>
+							</div>
+							{/* STATUS */}
+							<div className="meta-item">
+								<span className="meta-label">STATUS</span>
+								<span
+									className="meta-value font-mono status-badge"
+									style={{
+										color: statusData.color,
+										textShadow: `0 0 10px ${statusData.color}40`,
+									}}
+								>
+									{statusData.icon}
+									{statusData.text}
+								</span>
+							</div>
+							{/* TIMESTAMPS */}
+							<div className="meta-item">
+								<span className="meta-label">CREATED AT</span>
+								<span className="meta-value">
+									{new Date(pin?.createdAt || "").toLocaleString("default", {
+										month: "long",
+										year: "numeric",
+										day: "2-digit",
+									})}
+								</span>
+							</div>
+
+							{pin.modifications.filter((m) => m.status === "APPLIED").length >
+								0 && (
+								<div className="meta-item">
+									<span className="meta-label">LAST UPDATED</span>
+
+									<span className="meta-value">
+										{new Date(pin?.updatedAt || "").toLocaleString("default", {
+											month: "long",
+											year: "numeric",
+											day: "2-digit",
+										})}{" "}
+										by {pin.modifications[0]?.user.name}
+									</span>
+								</div>
+							)}
+						</div>
+
+						{/* OWNER ACTIONS */}
+						{!isDeleting && sessionData?.user.id === pin?.ownerId && (
+							<button
+								type="button"
+								className="tactical-button danger-btn"
+								onClick={() => setIsDeleting(true)}
+							>
+								DELETE PIN
+							</button>
+						)}
+
+						{isDeleting && (
+							<div className="delete-confirm-box">
+								<p>Are you sure you want to permanently delete this pin?</p>
+								<div className="delete-actions">
+									<button
+										type="button"
+										className="tactical-button-primary danger-btn-solid"
+										onClick={onDelete}
+									>
+										CONFIRM DELETE
+									</button>
+									<button
+										type="button"
+										className="tactical-button"
+										onClick={() => setIsDeleting(false)}
+									>
+										CANCEL
+									</button>
+								</div>
+							</div>
+						)}
+
+						<div className="forum-section">
+							<h3 className="section-title">FORUM</h3>
+							{!isReplying ? (
+								sessionData && (
+									<button
+										type="button"
+										className="action-btn"
+										onClick={() => setIsReplying(true)}
+									>
+										+ ADD COMMENT
+									</button>
+								)
+							) : (
+								<form
+									onSubmit={formMethods.handleSubmit(onSubmit)}
+									className="reply-form"
+								>
+									<input
+										{...formMethods.register("message")}
+										placeholder="Write a comment..."
+										className="reply-input"
+									/>
+									<button
+										type="submit"
+										className="tactical-button-primary form-btn"
+									>
+										POST
+									</button>
+									<button
+										type="button"
+										className="tactical-button form-btn"
+										onClick={() => setIsReplying(false)}
+									>
+										CANCEL
+									</button>
+								</form>
+							)}
+							<div className="forum-threads">
+								{pin?.comments?.map((thread) => (
+									<CommentNode key={thread.id} comment={thread} depth={0} />
+								))}
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div className="bottom-fade"></div>
+			</div>
+
+			<style jsx>{`
+            .modal-overlay {
+							position: fixed;
+							top: 0; left: 0; width: 100vw; height: 100vh;
+							background: rgba(0, 0, 0, 0.7);
+							backdrop-filter: blur(8px);
+							-webkit-backdrop-filter: blur(8px);
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							z-index: 200;
+							padding: 20px;
+						}
+
+            .modal-content {
+                background: var(--bg-panel);
+                border: 1px solid var(--border-color);
+                border-top: 4px solid ${color}; 
+                border-radius: 24px;
+                width: 100%; 
+                max-width: 500px; 
+                height: 70vh; 
+                display: flex; 
+                flex-direction: column;
+                box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
+                overflow: hidden; 
+                position: relative;
+                padding: 0; 
+            }
 
             .scroll-area {
                 flex: 1;
@@ -645,6 +794,7 @@ export function ExpandedPinView({ pinId, onClose }: ExpandedPinViewProps) {
                 margin-top: 8px;
                 border-top: 1px solid var(--border-color);
                 padding-top: 24px;
+								padding-bottom: 100px;
             }
             .section-title {
                 font-family: var(--font-chakra); font-size: 12px; font-weight: 900;
@@ -678,6 +828,6 @@ export function ExpandedPinView({ pinId, onClose }: ExpandedPinViewProps) {
                 }
             }
       `}</style>
-        </div>
-    );
-}
\ No newline at end of file
+		</div>
+	);
+}
diff --git a/apps/web/components/PinDetailsCard.tsx b/apps/web/components/PinDetailsCard.tsx
index de6e01e..796c75f 100644
--- a/apps/web/components/PinDetailsCard.tsx
+++ b/apps/web/components/PinDetailsCard.tsx
@@ -18,13 +18,27 @@ export function PinDetailsCard({
 	onClose,
 	onExpand,
 }: PinDetailsCardProps) {
-	const { data: pin } = trpc.pin.getById.useQuery(
-		{ id: pinId },
-		{ refetchOnWindowFocus: false },
-	);
+	const { data: pin, isLoading: isPinLoading } =
+		trpc.pin.getSimpleById.useQuery(
+			{ id: pinId },
+			{ refetchOnWindowFocus: false },
+		);
 	const color = getPinColor(
-      pin?.pinTags ? pin?.pinTags[0]?.tag.title || "" : "",
-  );
+		pin?.pinTags ? pin?.pinTags[0]?.tag.title || "" : "",
+	);
+
+	if (isPinLoading)
+		return (
+			<div
+				className="details-card"
+				style={{
+					borderTop: "3px solid black",
+					animation:
+						"slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), pulse 1s ease-in-out infinite",
+					minHeight: "156px",
+				}}
+			></div>
+		);
 
 	return (
 		<div className="details-card">
@@ -94,8 +108,6 @@ export function PinDetailsCard({
           display: flex;
           flex-direction: column;
           gap: 16px;
-          animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-          pointer-events: auto; 
         }
 
         .card-header {
@@ -191,4 +203,4 @@ export function PinDetailsCard({
       `}</style>
 		</div>
 	);
-}
\ No newline at end of file
+}
diff --git a/apps/web/components/TopBar.tsx b/apps/web/components/TopBar.tsx
index e697a04..af610fa 100644
--- a/apps/web/components/TopBar.tsx
+++ b/apps/web/components/TopBar.tsx
@@ -2,12 +2,15 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { trpc } from "@/lib/trpc";
 import { useTheme } from "@/lib/ThemeContext";
 import { useSession } from "@/lib/auth-client";
 import { useMap } from "@vis.gl/react-google-maps";
 import { JEEPNEY_ROUTES, ZONE_CATEGORIES } from "@/data/map-layers";
-import { PIN_CATEGORIES, type FilterType, getPinColor } from "@/data/pin-categories";
+import {
+	PIN_CATEGORIES,
+	type FilterType,
+	getPinColor,
+} from "@/data/pin-categories";
 
 interface TopBarProps {
 	onMenuClick: () => void;
@@ -15,12 +18,12 @@ interface TopBarProps {
 	onFilterChange: (filter: FilterType) => void;
 	searchQuery: string;
 	onSearchChange: (query: string) => void;
-	activeRoutes?: string[]; 
-    onToggleRoute?: (routeId: string) => void;
+	activeRoutes?: string[];
+	onToggleRoute?: (routeId: string) => void;
 	activeZoneCategories?: string[];
-    onToggleZoneCategory?: (categoryId: string) => void;
+	onToggleZoneCategory?: (categoryId: string) => void;
 	userLocation?: { lat: number; lng: number };
-    hideControls?: boolean;
+	hideControls?: boolean;
 }
 
 export type { FilterType };
@@ -32,11 +35,11 @@ export function TopBar({
 	searchQuery,
 	onSearchChange,
 	activeRoutes = [],
-    onToggleRoute = () => {},
+	onToggleRoute = () => {},
 	activeZoneCategories = [],
-    onToggleZoneCategory = () => {},
+	onToggleZoneCategory = () => {},
 	userLocation = { lat: 14.6549, lng: 121.0645 },
-    hideControls = false,
+	hideControls = false,
 }: TopBarProps) {
 	const router = useRouter();
 	const { data: sessionData } = useSession();
@@ -46,26 +49,26 @@ export function TopBar({
 
 	const map = useMap();
 
-    const handleCenterMap = () => {
-        if (map && userLocation) {
-            map.panTo(userLocation);
-            map.setZoom(19);
-        }
-    };
+	const handleCenterMap = () => {
+		if (map && userLocation) {
+			map.panTo(userLocation);
+			map.setZoom(19);
+		}
+	};
 
-    const handleZoomIn = () => {
-        if (map) {
-            const currentZoom = map.getZoom() || 19;
-            map.setZoom(currentZoom + 1);
-        }
-    };
+	const handleZoomIn = () => {
+		if (map) {
+			const currentZoom = map.getZoom() || 19;
+			map.setZoom(currentZoom + 1);
+		}
+	};
 
-    const handleZoomOut = () => {
-        if (map) {
-            const currentZoom = map.getZoom() || 19;
-            map.setZoom(currentZoom - 1);
-        }
-    };
+	const handleZoomOut = () => {
+		if (map) {
+			const currentZoom = map.getZoom() || 19;
+			map.setZoom(currentZoom - 1);
+		}
+	};
 
 	const handleProfileClick = () => {
 		if (sessionData?.user) {
@@ -75,123 +78,155 @@ export function TopBar({
 		}
 	};
 
-	const filters: FilterType[] = ["all", ...PIN_CATEGORIES.map(c => c.id as FilterType)];
+	const filters: FilterType[] = [
+		"all",
+		...PIN_CATEGORIES.map((c) => c.id as FilterType),
+	];
 
 	return (
 		<div className="ui-layer">
 			{/* === LEFT ZONE === */}
-            <div 
-                className="zone-left"
-                style={{
-                    opacity: hideControls ? 0 : 1,
-                    pointerEvents: hideControls ? "none" : "auto",
-                    transition: "opacity 0.3s ease",
-                }}
-            >
-                <button type="button" onClick={onMenuClick} className="icon-button">
-                    <svg
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2.5"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                    >
-                        <line x1="3" y1="12" x2="21" y2="12"></line>
-                        <line x1="3" y1="6" x2="21" y2="6"></line>
-                        <line x1="3" y1="18" x2="21" y2="18"></line>
-                    </svg>
-                </button>
+			<div
+				className="zone-left"
+				style={{
+					opacity: hideControls ? 0 : 1,
+					pointerEvents: hideControls ? "none" : "auto",
+					transition: "opacity 0.3s ease",
+				}}
+			>
+				<button type="button" onClick={onMenuClick} className="icon-button">
+					<svg
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth="2.5"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<line x1="3" y1="12" x2="21" y2="12"></line>
+						<line x1="3" y1="6" x2="21" y2="6"></line>
+						<line x1="3" y1="18" x2="21" y2="18"></line>
+					</svg>
+				</button>
 
-                <div className="transit-system-container">
-                    <button 
-                        type="button" 
-                        className={`icon-button transit-btn ${isTransitMenuOpen ? 'active' : ''}`}
-                        title="Toggle Transit Routes"
-                        onClick={() => setIsTransitMenuOpen(!isTransitMenuOpen)}
-                    >
-                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                            <rect x="4" y="3" width="16" height="16" rx="2" ry="2"></rect>
-                            <path d="M4 11h16"></path>
-                            <path d="M8 15h.01"></path>
-                            <path d="M16 15h.01"></path>
-                            <path d="M6 19v2"></path>
-                            <path d="M18 19v2"></path>
-                        </svg>
-                    </button>
+				<div className="transit-system-container">
+					<button
+						type="button"
+						className={`icon-button transit-btn ${isTransitMenuOpen ? "active" : ""}`}
+						title="Toggle Transit Routes"
+						onClick={() => setIsTransitMenuOpen(!isTransitMenuOpen)}
+					>
+						<svg
+							width="22"
+							height="22"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth="2.5"
+							strokeLinecap="round"
+							strokeLinejoin="round"
+						>
+							<rect x="4" y="3" width="16" height="16" rx="2" ry="2"></rect>
+							<path d="M4 11h16"></path>
+							<path d="M8 15h.01"></path>
+							<path d="M16 15h.01"></path>
+							<path d="M6 19v2"></path>
+							<path d="M18 19v2"></path>
+						</svg>
+					</button>
 
-                    {/* Extruding Route Nodes */}
-                    {isTransitMenuOpen && (
-                        <div className="extruded-menu">
-                            {JEEPNEY_ROUTES.map((route) => {
-                                const isActive = activeRoutes.includes(route.id);
-                                const initial = route.name.replace("UP ", "").charAt(0).toUpperCase();
+					{/* Extruding Route Nodes */}
+					{isTransitMenuOpen && (
+						<div className="extruded-menu">
+							{JEEPNEY_ROUTES.map((route) => {
+								const isActive = activeRoutes.includes(route.id);
+								const initial = route.name
+									.replace("UP ", "")
+									.charAt(0)
+									.toUpperCase();
 
-                                return (
-                                    <button
-                                        key={route.id}
-                                        type="button"
-                                        onClick={() => onToggleRoute(route.id)}
-                                        className="route-node"
-                                        title={route.name}
-                                        style={{
-                                            backgroundColor: isActive ? `${route.color}20` : 'var(--bg-panel-hover)',
-                                            color: isActive ? route.color : '#aaa',
-                                            borderColor: isActive ? route.color : 'transparent',
-                                            boxShadow: isActive ? `0 0 10px ${route.color}40` : 'none',
-                                        }}
-                                    >
-                                        {initial}
-                                    </button>
-                                );
-                            })}
-                        </div>
-                    )}
-                </div>
+								return (
+									<button
+										key={route.id}
+										type="button"
+										onClick={() => onToggleRoute(route.id)}
+										className="route-node"
+										title={route.name}
+										style={{
+											backgroundColor: isActive
+												? `${route.color}20`
+												: "var(--bg-panel-hover)",
+											color: isActive ? route.color : "#aaa",
+											borderColor: isActive ? route.color : "transparent",
+											boxShadow: isActive
+												? `0 0 10px ${route.color}40`
+												: "none",
+										}}
+									>
+										{initial}
+									</button>
+								);
+							})}
+						</div>
+					)}
+				</div>
 
 				<div className="transit-system-container">
-                    <button 
-                        type="button" 
-                        className={`icon-button transit-btn ${isZoneMenuOpen ? 'active' : ''}`}
-                        title="Toggle Zone Layers"
-                        onClick={() => {
-                            setIsZoneMenuOpen(!isZoneMenuOpen);
-                        }}
-                    >
-                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                            <polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"></polygon>
-                        </svg>
-                    </button>
+					<button
+						type="button"
+						className={`icon-button transit-btn ${isZoneMenuOpen ? "active" : ""}`}
+						title="Toggle Zone Layers"
+						onClick={() => {
+							setIsZoneMenuOpen(!isZoneMenuOpen);
+						}}
+					>
+						<svg
+							width="22"
+							height="22"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth="2.5"
+							strokeLinecap="round"
+							strokeLinejoin="round"
+						>
+							<polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"></polygon>
+						</svg>
+					</button>
 
-                    {isZoneMenuOpen && (
-                        <div className="extruded-menu">
-                            {ZONE_CATEGORIES.map((category) => {
-                                const isActive = activeZoneCategories.includes(category.id);
+					{isZoneMenuOpen && (
+						<div className="extruded-menu">
+							{ZONE_CATEGORIES.map((category) => {
+								const isActive = activeZoneCategories.includes(category.id);
 
-                                return (
-                                    <button
-                                        key={category.id}
-                                        type="button"
-                                        onClick={() => onToggleZoneCategory(category.id)}
-                                        className="route-node"
-                                        title={category.label}
-                                        style={{
-                                            backgroundColor: isActive ? `${category.color}20` : 'var(--bg-panel-hover)',
-                                            color: isActive ? category.color : '#aaa',
-                                            borderColor: isActive ? category.color : 'transparent',
-                                            boxShadow: isActive ? `0 0 10px ${category.color}40` : 'none',
-                                        }}
-                                    >
-                                        {category.initial} 
-                                    </button>
-                                );
-                            })}
-                        </div>
-                    )}
-                </div>
-            </div>
+								return (
+									<button
+										key={category.id}
+										type="button"
+										onClick={() => onToggleZoneCategory(category.id)}
+										className="route-node"
+										title={category.label}
+										style={{
+											backgroundColor: isActive
+												? `${category.color}20`
+												: "var(--bg-panel-hover)",
+											color: isActive ? category.color : "#aaa",
+											borderColor: isActive ? category.color : "transparent",
+											boxShadow: isActive
+												? `0 0 10px ${category.color}40`
+												: "none",
+										}}
+									>
+										{category.initial}
+									</button>
+								);
+							})}
+						</div>
+					)}
+				</div>
+			</div>
 
 			{/* === CENTER ZONE (Search + Filters) === */}
 			<div className="zone-center">
@@ -221,27 +256,27 @@ export function TopBar({
 				</div>
 
 				<div className="filter-row no-scrollbar">
-                    {filters.map((filter) => {
-                        const color = getPinColor(filter);
-                        const isActive = activeFilter === filter;
-                        return (
-                            <button
-                                type="button"
-                                key={filter}
-                                onClick={() => onFilterChange(filter)}
-                                className={`filter-chip ${isActive ? "active" : ""}`}
-                                style={{
-                                    borderColor: isActive ? color : "var(--border-color)",
-                                    color: isActive ? "var(--bg-base)" : color,
-                                    backgroundColor: isActive ? color : "var(--bg-panel)",
-                                    transform: isActive ? "scale(1.1)" : "scale(1)",
-                                }}
-                            >
-                                {filter.toUpperCase()}
-                            </button>
-                        );
-                    })}
-                </div>
+					{filters.map((filter) => {
+						const color = getPinColor(filter);
+						const isActive = activeFilter === filter;
+						return (
+							<button
+								type="button"
+								key={filter}
+								onClick={() => onFilterChange(filter)}
+								className={`filter-chip ${isActive ? "active" : ""}`}
+								style={{
+									borderColor: isActive ? color : "var(--border-color)",
+									color: isActive ? "var(--bg-base)" : color,
+									backgroundColor: isActive ? color : "var(--bg-panel)",
+									transform: isActive ? "scale(1.1)" : "scale(1)",
+								}}
+							>
+								{filter.toUpperCase()}
+							</button>
+						);
+					})}
+				</div>
 			</div>
 
 			{/* === RIGHT ZONE (Full Height Tool Stack) === */}
@@ -270,13 +305,35 @@ export function TopBar({
 							<circle cx="12" cy="7" r="4"></circle>
 						</svg>
 					</button>
-					<button onClick={toggleTheme} className="icon-button theme-toggle">
+					<button
+						type="button"
+						onClick={toggleTheme}
+						className="icon-button theme-toggle"
+					>
 						{theme === "dark" ? (
-							<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+							<svg
+								width="20"
+								height="20"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="2.5"
+								strokeLinecap="round"
+								strokeLinejoin="round"
+							>
 								<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
 							</svg>
 						) : (
-							<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+							<svg
+								width="20"
+								height="20"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="2.5"
+								strokeLinecap="round"
+								strokeLinejoin="round"
+							>
 								<circle cx="12" cy="12" r="5"></circle>
 								<line x1="12" y1="1" x2="12" y2="3"></line>
 								<line x1="12" y1="21" x2="12" y2="23"></line>
@@ -293,50 +350,71 @@ export function TopBar({
 
 				{/* Bottom Group */}
 				<div
-                    className="tool-group bottom-align"
-                    style={{
-                        opacity: hideControls ? 0 : 1,
-                        pointerEvents: hideControls ? "none" : "auto",
-                        transition: "opacity 0.3s ease",
-                    }}
-                >
-                    <button 
-                        type="button" 
-                        className="icon-button gps-btn"
-                        onClick={handleCenterMap}
-                        title="Center on Current Location"
-                    >
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                            <polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
-                        </svg>
-                    </button>
+					className="tool-group bottom-align"
+					style={{
+						opacity: hideControls ? 0 : 1,
+						pointerEvents: hideControls ? "none" : "auto",
+						transition: "opacity 0.3s ease",
+					}}
+				>
+					<button
+						type="button"
+						className="icon-button gps-btn"
+						onClick={handleCenterMap}
+						title="Center on Current Location"
+					>
+						<svg
+							width="20"
+							height="20"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth="2.5"
+						>
+							<polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
+						</svg>
+					</button>
 
-                    <div className="zoom-stack">
-                        <button 
-                            type="button" 
-                            className="control-button zoom-in"
-                            onClick={handleZoomIn}
-                            title="Zoom In"
-                        >
-                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
-                                <line x1="12" y1="5" x2="12" y2="19"></line>
-                                <line x1="5" y1="12" x2="19" y2="12"></line>
-                            </svg>
-                        </button>
-                        <div className="divider"></div>
-                        <button 
-                            type="button" 
-                            className="control-button zoom-out"
-                            onClick={handleZoomOut}
-                            title="Zoom Out"
-                        >
-                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
-                                <line x1="5" y1="12" x2="19" y2="12"></line>
-                            </svg>
-                        </button>
-                    </div>
-                </div>
+					<div className="zoom-stack">
+						<button
+							type="button"
+							className="control-button zoom-in"
+							onClick={handleZoomIn}
+							title="Zoom In"
+						>
+							<svg
+								width="20"
+								height="20"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="3"
+							>
+								<line x1="12" y1="5" x2="12" y2="19"></line>
+								<line x1="5" y1="12" x2="19" y2="12"></line>
+							</svg>
+						</button>
+						<div className="divider"></div>
+						<button
+							type="button"
+							className="control-button zoom-out"
+							onClick={handleZoomOut}
+							title="Zoom Out"
+						>
+							<svg
+								width="20"
+								height="20"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="3"
+							>
+								<line x1="5" y1="12" x2="19" y2="12"></line>
+							</svg>
+						</button>
+					</div>
+				</div>
 			</div>
 		</div>
 	);
-}
\ No newline at end of file
+}
diff --git a/packages/api/src/routers/comment.router.ts b/packages/api/src/routers/comment.router.ts
index 8f542c1..38d3001 100644
--- a/packages/api/src/routers/comment.router.ts
+++ b/packages/api/src/routers/comment.router.ts
@@ -1,5 +1,5 @@
 import type { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
-import { router, userProcedure } from "../trpc";
+import { adminProcedure, router, userProcedure } from "../trpc";
 import z from "zod";
 
 export const commentRouter = router({
@@ -12,11 +12,18 @@ export const commentRouter = router({
 			}),
 		)
 		.mutation(async ({ ctx, input }) => {
-			return ctx.services.comment.create({
+			return await ctx.services.comment.create({
 				...input,
 				ownerId: ctx.user.id,
 			});
 		}),
+	getCurrentUsersComments: userProcedure.query(async ({ ctx }) => {
+		return await ctx.services.comment.getByUserId(ctx.user.id);
+	}),
+
+	getCount: adminProcedure.query(async ({ ctx }) => {
+		return await ctx.services.comment.getCount();
+	}),
 });
 
 type CommentRouter = typeof commentRouter;
diff --git a/packages/api/src/routers/pins.router.ts b/packages/api/src/routers/pins.router.ts
index cf11cea..e853d76 100644
--- a/packages/api/src/routers/pins.router.ts
+++ b/packages/api/src/routers/pins.router.ts
@@ -1,4 +1,4 @@
-import { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
+import { inferRouterInputs, inferRouterOutputs, TRPCError } from "@trpc/server";
 import {
 	adminProcedure,
 	publicProcedure,
@@ -40,12 +40,16 @@ export const pinRouter = router({
 			return ctx.services.pin.getById(input.id);
 		}),
 
-	getByOwnerId: publicProcedure
-		.input(z.object({ ownerId: z.string() }))
+	getSimpleById: publicProcedure
+		.input(z.object({ id: z.string() }))
 		.query(async ({ ctx, input }) => {
-			return ctx.services.pin.getByOwnerId(input.ownerId);
+			return ctx.services.pin.getSimpleById(input.id);
 		}),
 
+	getCurrentUsersPins: userProcedure.query(async ({ ctx }) => {
+		return ctx.services.pin.getByOwnerId(ctx.user.id);
+	}),
+
 	getByStatus: publicProcedure
 		.input(z.object({ status: PinStatus }))
 		.query(async ({ ctx, input }) => {
@@ -86,14 +90,34 @@ export const pinRouter = router({
 				id: z.string(),
 				title: z.string().min(1).optional(),
 				description: z.string().optional(),
-				latitude: z.number().min(-90).max(90).optional(),
-				longitude: z.number().min(-180).max(180).optional(),
-				status: PinStatus.optional(),
+				tags: z.array(z.string()),
 			}),
 		)
 		.mutation(async ({ ctx, input }) => {
-			const { id, ...data } = input;
-			return ctx.services.pin.update(id, data);
+			const { id, tags, ...data } = input;
+			return ctx.services.pin.requestUpdate(id, ctx.user.id, data, tags);
+		}),
+
+	applyUpdate: adminProcedure
+		.input(
+			z.object({
+				id: z.string(),
+			}),
+		)
+		.mutation(async ({ ctx, input }) => {
+			const { id } = input;
+			return ctx.services.pin.applyUpdate(id, ctx.user.id);
+		}),
+
+	rejectUpdate: adminProcedure
+		.input(
+			z.object({
+				id: z.string(),
+			}),
+		)
+		.mutation(async ({ ctx, input }) => {
+			const { id } = input;
+			return ctx.services.pin.rejectUpdate(id, ctx.user.id);
 		}),
 
 	userDelete: userProcedure
@@ -133,22 +157,16 @@ export const pinRouter = router({
 		return ctx.services.pin.getStatusCounts();
 	}),
 
-	getByIdAdmin: adminProcedure
-		.input(z.object({ id: z.string() }))
-		.query(async ({ ctx, input }) => {
-			return ctx.services.pin.getByIdWithOwner(input.id);
-		}),
-
 	approve: adminProcedure
 		.input(z.object({ id: z.string() }))
 		.mutation(async ({ ctx, input }) => {
-			return ctx.services.pin.approvePin(input.id);
+			return ctx.services.pin.approvePin(input.id, ctx.user.id);
 		}),
 
 	reject: adminProcedure
 		.input(z.object({ id: z.string() }))
 		.mutation(async ({ ctx, input }) => {
-			return ctx.services.pin.rejectPin(input.id);
+			return ctx.services.pin.rejectPin(input.id, ctx.user.id);
 		}),
 
 	// Admin update - can update any pin
@@ -165,7 +183,7 @@ export const pinRouter = router({
 		)
 		.mutation(async ({ ctx, input }) => {
 			const { id, ...data } = input;
-			return ctx.services.pin.update(id, data);
+			return ctx.services.pin.adminUpdate(id, ctx.user.id, data);
 		}),
 });
 
diff --git a/packages/api/src/services/comment.service.ts b/packages/api/src/services/comment.service.ts
index 14e2d8d..6c95735 100644
--- a/packages/api/src/services/comment.service.ts
+++ b/packages/api/src/services/comment.service.ts
@@ -41,9 +41,19 @@ export function makeCommentService(
 		return await repositories.comment.create(data);
 	}
 
+	async function getByUserId(id: string) {
+		return await repositories.comment.getByUserId(id);
+	}
+
+	async function getCount() {
+		return await repositories.comment.getCount();
+	}
+
 	return {
 		create,
 		getByPinId,
+		getByUserId,
+		getCount,
 	};
 }
 
diff --git a/packages/api/src/services/pins.service.ts b/packages/api/src/services/pins.service.ts
index 2a7bdce..e2f0e0d 100644
--- a/packages/api/src/services/pins.service.ts
+++ b/packages/api/src/services/pins.service.ts
@@ -6,7 +6,8 @@ import type {
 	PinTagsRepository,
 	GetAllPinsAdminOptions,
 	GetPinCountOptions,
-	PinStatus,
+	ModificationRepository,
+	UpdatePin,
 } from "@repo/db";
 import { TRPCError } from "@trpc/server";
 import type { CommentService } from "./comment.service";
@@ -16,6 +17,7 @@ export function makePinService(
 		pin: PinRepository;
 		pinTags: PinTagsRepository;
 		pinImages: PinImagesRepository;
+		modification: ModificationRepository;
 	},
 	services: { comment: CommentService },
 	db: Database,
@@ -27,7 +29,13 @@ export function makePinService(
 	async function getById(id: string) {
 		const pin = await repositories.pin.getById(id);
 		const comments = await services.comment.getByPinId(id);
-		return { ...pin, comments: comments };
+		const modifications = await repositories.modification.getByPinId(id);
+		return { ...pin, comments: comments, modifications: modifications };
+	}
+
+	async function getSimpleById(id: string) {
+		const pin = await repositories.pin.getSimpleById(id);
+		return pin;
 	}
 
 	async function getByOwnerId(ownerId: string) {
@@ -47,6 +55,13 @@ export function makePinService(
 				code: "BAD_REQUEST",
 			});
 
+		await repositories.modification.create({
+			userId: data.ownerId,
+			pinId: res.id,
+			after: { data: data, tags: tags },
+			status: data.status === "ACTIVE" ? "APPLIED" : "PENDING",
+		});
+
 		imageURLs.forEach(
 			async (url) => await repositories.pinImages.create(url, res.id),
 		);
@@ -61,11 +76,82 @@ export function makePinService(
 		return res;
 	}
 
-	async function update(
+	async function adminUpdate(id: string, userId: string, data: UpdatePin) {
+		const exists = await repositories.pin.getById(id);
+
+		if (!exists)
+			throw new TRPCError({
+				message: "Pin does not exist",
+				code: "NOT_FOUND",
+			});
+
+		const updatedPin = await repositories.pin.update(id, data);
+
+		await repositories.modification.create({
+			pinId: id,
+			userId,
+			after: { data: data },
+			status: "APPLIED",
+		});
+
+		return updatedPin;
+	}
+
+	async function requestUpdate(
 		id: string,
-		data: Parameters<typeof repositories.pin.update>[1],
+		userId: string,
+		data: UpdatePin,
+		tags: string[],
 	) {
-		return await repositories.pin.update(id, data);
+		const exists = await repositories.pin.getById(id);
+
+		if (!exists)
+			throw new TRPCError({
+				message: "Pin does not exist",
+				code: "NOT_FOUND",
+			});
+
+		return await repositories.modification.create({
+			pinId: id,
+			userId,
+			after: { data: data, tags: tags },
+		});
+	}
+
+	async function applyUpdate(id: string, adminId: string) {
+		const pendingModification = await repositories.modification.getById(id);
+		if (!pendingModification)
+			throw new TRPCError({
+				message: "Modification does not exist",
+				code: "NOT_FOUND",
+			});
+		const after = pendingModification.after as {
+			data: UpdatePin;
+			tags: string[];
+		};
+
+		const updatedPin = await repositories.pin.update(id, after.data);
+
+		if (after.tags.length > 0) {
+			await repositories.pinTags.deleteTagByPinId(id);
+			await repositories.pinTags.create({ pinId: id, tagId: after.tags[0]! }); // change this to handle multiple tags in the future
+		}
+
+		await repositories.modification.applyModification(id, adminId);
+
+		return updatedPin;
+	}
+
+	async function rejectUpdate(id: string, adminId: string) {
+		const pendingModification = await repositories.modification.getById(id);
+
+		if (!pendingModification)
+			throw new TRPCError({
+				message: "Modification does not exist",
+				code: "NOT_FOUND",
+			});
+
+		return await repositories.modification.rejectModification(id, adminId);
 	}
 
 	async function userDeleteById(id: string, userId: string) {
@@ -95,27 +181,44 @@ export function makePinService(
 		return await repositories.pin.getStatusCounts();
 	}
 
-	async function getByIdWithOwner(id: string) {
-		return await repositories.pin.getByIdWithOwner(id);
-	}
-
-	async function approvePin(id: string) {
+	async function approvePin(id: string, adminId: string) {
 		const result = await repositories.pin.update(id, { status: "ACTIVE" });
 		if (!result)
 			throw new TRPCError({
 				message: "Failed to approve pin",
 				code: "NOT_FOUND",
 			});
+
+		const initialMod = await repositories.modification.getByUserPinId(
+			result.ownerId,
+			id,
+		);
+
+		if (initialMod)
+			await repositories.modification.applyModification(initialMod.id, adminId);
+
 		return result;
 	}
 
-	async function rejectPin(id: string) {
+	async function rejectPin(id: string, adminId: string) {
 		const result = await repositories.pin.update(id, { status: "ARCHIVED" });
 		if (!result)
 			throw new TRPCError({
 				message: "Failed to reject pin",
 				code: "NOT_FOUND",
 			});
+
+		const initialMod = await repositories.modification.getByUserPinId(
+			result.ownerId,
+			id,
+		);
+
+		if (initialMod)
+			await repositories.modification.rejectModification(
+				initialMod.id,
+				adminId,
+			);
+
 		return result;
 	}
 
@@ -125,15 +228,18 @@ export function makePinService(
 		getByOwnerId,
 		getByStatus,
 		create,
-		update,
+		requestUpdate,
+		rejectUpdate,
+		applyUpdate,
 		userDeleteById,
 		adminDeleteById,
 		getAllAdmin,
 		getCount,
 		getStatusCounts,
-		getByIdWithOwner,
 		approvePin,
 		rejectPin,
+		getSimpleById,
+		adminUpdate,
 	};
 }
 
diff --git a/packages/db/drizzle/0005_true_loners.sql b/packages/db/drizzle/0005_true_loners.sql
new file mode 100644
index 0000000..1677189
--- /dev/null
+++ b/packages/db/drizzle/0005_true_loners.sql
@@ -0,0 +1,14 @@
+CREATE TABLE "modification" (
+	"id" text PRIMARY KEY NOT NULL,
+	"pin_id" text NOT NULL,
+	"user_id" text NOT NULL,
+	"difference" jsonb NOT NULL,
+	"status" text DEFAULT 'PENDING' NOT NULL,
+	"reviewed_by" text,
+	"reviewed_at" timestamp,
+	"created_at" timestamp DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+ALTER TABLE "modification" ADD CONSTRAINT "modification_pin_id_pin_id_fk" FOREIGN KEY ("pin_id") REFERENCES "public"."pin"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "modification" ADD CONSTRAINT "modification_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "modification" ADD CONSTRAINT "modification_reviewed_by_user_id_fk" FOREIGN KEY ("reviewed_by") REFERENCES "public"."user"("id") ON DELETE no action ON UPDATE no action;
\ No newline at end of file
diff --git a/packages/db/drizzle/meta/0005_snapshot.json b/packages/db/drizzle/meta/0005_snapshot.json
new file mode 100644
index 0000000..8db5d35
--- /dev/null
+++ b/packages/db/drizzle/meta/0005_snapshot.json
@@ -0,0 +1,840 @@
+{
+  "id": "885e4cdb-1a83-4272-a398-c206822f841d",
+  "prevId": "9c23bce8-9563-4e58-80f0-bc34391a646a",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.account": {
+      "name": "account",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "account_id": {
+          "name": "account_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "provider_id": {
+          "name": "provider_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "id_token": {
+          "name": "id_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "access_token_expires_at": {
+          "name": "access_token_expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "refresh_token_expires_at": {
+          "name": "refresh_token_expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "account_userId_idx": {
+          "name": "account_userId_idx",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "account_user_id_user_id_fk": {
+          "name": "account_user_id_user_id_fk",
+          "tableFrom": "account",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.comment": {
+      "name": "comment",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "message": {
+          "name": "message",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "parent_id": {
+          "name": "parent_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "pin_id": {
+          "name": "pin_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "deleted_at": {
+          "name": "deleted_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "comment_owner_id_user_id_fk": {
+          "name": "comment_owner_id_user_id_fk",
+          "tableFrom": "comment",
+          "tableTo": "user",
+          "columnsFrom": [
+            "owner_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "comment_pin_id_pin_id_fk": {
+          "name": "comment_pin_id_pin_id_fk",
+          "tableFrom": "comment",
+          "tableTo": "pin",
+          "columnsFrom": [
+            "pin_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.modification": {
+      "name": "modification",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "pin_id": {
+          "name": "pin_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "difference": {
+          "name": "difference",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "status": {
+          "name": "status",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'PENDING'"
+        },
+        "reviewed_by": {
+          "name": "reviewed_by",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "reviewed_at": {
+          "name": "reviewed_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "modification_pin_id_pin_id_fk": {
+          "name": "modification_pin_id_pin_id_fk",
+          "tableFrom": "modification",
+          "tableTo": "pin",
+          "columnsFrom": [
+            "pin_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "modification_user_id_user_id_fk": {
+          "name": "modification_user_id_user_id_fk",
+          "tableFrom": "modification",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "modification_reviewed_by_user_id_fk": {
+          "name": "modification_reviewed_by_user_id_fk",
+          "tableFrom": "modification",
+          "tableTo": "user",
+          "columnsFrom": [
+            "reviewed_by"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.pin": {
+      "name": "pin",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "status": {
+          "name": "status",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'PENDING_VERIFICATION'"
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "latitude": {
+          "name": "latitude",
+          "type": "double precision",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "longitude": {
+          "name": "longitude",
+          "type": "double precision",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "pin_owner_id_user_id_fk": {
+          "name": "pin_owner_id_user_id_fk",
+          "tableFrom": "pin",
+          "tableTo": "user",
+          "columnsFrom": [
+            "owner_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.pin_images": {
+      "name": "pin_images",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "pin_id": {
+          "name": "pin_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "pin_images_pin_id_pin_id_fk": {
+          "name": "pin_images_pin_id_pin_id_fk",
+          "tableFrom": "pin_images",
+          "tableTo": "pin",
+          "columnsFrom": [
+            "pin_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.pin_tags": {
+      "name": "pin_tags",
+      "schema": "",
+      "columns": {
+        "pin_id": {
+          "name": "pin_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "tag_id": {
+          "name": "tag_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "pin_tags_pin_id_pin_id_fk": {
+          "name": "pin_tags_pin_id_pin_id_fk",
+          "tableFrom": "pin_tags",
+          "tableTo": "pin",
+          "columnsFrom": [
+            "pin_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "pin_tags_tag_id_tag_id_fk": {
+          "name": "pin_tags_tag_id_tag_id_fk",
+          "tableFrom": "pin_tags",
+          "tableTo": "tag",
+          "columnsFrom": [
+            "tag_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "pin_tags_pin_id_tag_id_pk": {
+          "name": "pin_tags_pin_id_tag_id_pk",
+          "columns": [
+            "pin_id",
+            "tag_id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.session": {
+      "name": "session",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "ip_address": {
+          "name": "ip_address",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "user_agent": {
+          "name": "user_agent",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "session_userId_idx": {
+          "name": "session_userId_idx",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "session_user_id_user_id_fk": {
+          "name": "session_user_id_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "session_token_unique": {
+          "name": "session_token_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "token"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.tag": {
+      "name": "tag",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "color": {
+          "name": "color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "'#ffffff'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.user": {
+      "name": "user",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "email_verified": {
+          "name": "email_verified",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "userRole": {
+          "name": "userRole",
+          "type": "user_role",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "'user'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "user_email_unique": {
+          "name": "user_email_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "email"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.verification": {
+      "name": "verification",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "identifier": {
+          "name": "identifier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "verification_identifier_idx": {
+          "name": "verification_identifier_idx",
+          "columns": [
+            {
+              "expression": "identifier",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {
+    "public.user_role": {
+      "name": "user_role",
+      "schema": "public",
+      "values": [
+        "user",
+        "admin"
+      ]
+    }
+  },
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}
\ No newline at end of file
diff --git a/packages/db/drizzle/meta/_journal.json b/packages/db/drizzle/meta/_journal.json
index 1bc8178..f752ea2 100644
--- a/packages/db/drizzle/meta/_journal.json
+++ b/packages/db/drizzle/meta/_journal.json
@@ -36,6 +36,13 @@
       "when": 1773235656634,
       "tag": "0004_parched_the_hand",
       "breakpoints": true
+    },
+    {
+      "idx": 5,
+      "version": "7",
+      "when": 1774431874894,
+      "tag": "0005_true_loners",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file
diff --git a/packages/db/src/db/schema.ts b/packages/db/src/db/schema.ts
index 62c5cb0..aac26c4 100644
--- a/packages/db/src/db/schema.ts
+++ b/packages/db/src/db/schema.ts
@@ -8,9 +8,9 @@ import {
 	index,
 	doublePrecision,
 	primaryKey,
-	integer,
 } from "drizzle-orm/pg-core";
 import { randomUUID } from "crypto";
+import { jsonb } from "drizzle-orm/pg-core";
 
 export const userRoleEnum = pgEnum("user_role", ["user", "admin"]);
 
@@ -168,11 +168,29 @@ export const comment = pgTable("comment", {
 	deletedAt: timestamp("deleted_at"),
 });
 
+export const modification = pgTable("modification", {
+	id: text("id")
+		.primaryKey()
+		.$defaultFn(() => randomUUID()),
+	pinId: text("pin_id")
+		.notNull()
+		.references(() => pin.id, { onDelete: "cascade" }),
+	userId: text("user_id")
+		.notNull()
+		.references(() => user.id, { onDelete: "cascade" }),
+	after: jsonb("difference").notNull(),
+	status: text("status").notNull().default("PENDING"),
+	reviewedBy: text("reviewed_by").references(() => user.id),
+	reviewedAt: timestamp("reviewed_at"),
+	createdAt: timestamp("created_at").defaultNow().notNull(),
+});
+
 export const userRelations = relations(user, ({ many }) => ({
 	sessions: many(session),
 	accounts: many(account),
 	pins: many(pin),
 	comments: many(comment),
+	modifications: many(modification),
 }));
 
 export const sessionRelations = relations(session, ({ one }) => ({
@@ -197,6 +215,8 @@ export const pinRelations = relations(pin, ({ one, many }) => ({
 	pinTags: many(pinTags),
 	images: many(pinImages),
 	comments: many(comment),
+	modifications: many(modification, { relationName: "modification_user" }),
+	reviews: many(modification, { relationName: "modification_reviewer" }),
 }));
 
 export const tagRelations = relations(tag, ({ many }) => ({
@@ -221,3 +241,17 @@ export const commentRelations = relations(comment, ({ one, many }) => ({
 	}),
 	replies: many(comment),
 }));
+
+export const modificationRelations = relations(modification, ({ one }) => ({
+	pin: one(pin, { fields: [modification.pinId], references: [pin.id] }),
+	user: one(user, {
+		fields: [modification.userId],
+		references: [user.id],
+		relationName: "modification_user",
+	}),
+	reviewer: one(user, {
+		fields: [modification.reviewedBy],
+		references: [user.id],
+		relationName: "modification_reviewer",
+	}),
+}));
diff --git a/packages/db/src/db/types.ts b/packages/db/src/db/types.ts
index 890b65b..b8d87aa 100644
--- a/packages/db/src/db/types.ts
+++ b/packages/db/src/db/types.ts
@@ -9,6 +9,7 @@ import type {
 	tag,
 	pinImages,
 	comment,
+	modification,
 } from "./schema";
 
 export type Session = InferSelectModel<typeof session>;
@@ -25,6 +26,8 @@ export type CommentWithReplies = Comment & {
 
 export type PinTags = InferSelectModel<typeof pinTags>;
 export type PinImages = InferSelectModel<typeof pinImages>;
+export type Modification = InferSelectModel<typeof modification>;
+export type CreateModification = InferInsertModel<typeof modification>;
 export type Pin = InferSelectModel<typeof pin>;
 
 export type CreatePin = InferInsertModel<typeof pin>;
@@ -57,6 +60,11 @@ export type PinWithTags =
 	| undefined;
 
 export type PinDetails =
-	| (Pin & { pinTags: (PinTags & { tag: Tag })[]; images: PinImages[] })
+	| (Pin & {
+			pinTags: (PinTags & { tag: Tag })[];
+			images: PinImages[];
+			owner: string;
+	  })
 	| undefined;
+export type PinDetailsSimple = Pin & { pinTags: (PinTags & { tag: Tag })[] };
 export type CreatePinTags = InferInsertModel<typeof pinTags>;
diff --git a/packages/db/src/index.ts b/packages/db/src/index.ts
index d928020..96b7e4e 100644
--- a/packages/db/src/index.ts
+++ b/packages/db/src/index.ts
@@ -5,8 +5,9 @@ import {
 	makeTagRepository,
 	makePinImagesRepository,
 	makeCommentRepository,
+	makeModificationRepository,
+	makePinTagsRepository,
 } from "./repositories";
-import { makePinTagsRepository } from "./repositories/pinTags.repository";
 
 export const repositories = {
 	user: makeUserRepository(db),
@@ -15,6 +16,7 @@ export const repositories = {
 	tag: makeTagRepository(db),
 	pinImages: makePinImagesRepository(db),
 	comment: makeCommentRepository(db),
+	modification: makeModificationRepository(db),
 };
 
 export * from "./db/database";
diff --git a/packages/db/src/repositories/comment.repository.ts b/packages/db/src/repositories/comment.repository.ts
index 9a467ba..d877797 100644
--- a/packages/db/src/repositories/comment.repository.ts
+++ b/packages/db/src/repositories/comment.repository.ts
@@ -1,4 +1,4 @@
-import { sql } from "drizzle-orm";
+import { count, eq, sql } from "drizzle-orm";
 import type { Database } from "../db/database";
 import type { Comment, CreateComment } from "../db/types";
 import { comment } from "../db/schema";
@@ -9,6 +9,14 @@ export function makeCommentRepository(db: Database) {
 		return c;
 	}
 
+	async function getByUserId(id: string) {
+		const query = await db.query.comment.findMany({
+			where: eq(comment.ownerId, id),
+		});
+
+		return query;
+	}
+
 	async function getByPinId(
 		pinId: string,
 		maxDepth: number = 3,
@@ -59,9 +67,17 @@ export function makeCommentRepository(db: Database) {
 			throw e;
 		}
 	}
+
+	async function getCount(): Promise<number> {
+		const result = await db.select({ count: count() }).from(comment);
+		return result[0]?.count ?? 0;
+	}
+
 	return {
 		create,
 		getByPinId,
+		getByUserId,
+		getCount,
 	};
 }
 
diff --git a/packages/db/src/repositories/index.ts b/packages/db/src/repositories/index.ts
index 7c933a1..4301ce2 100644
--- a/packages/db/src/repositories/index.ts
+++ b/packages/db/src/repositories/index.ts
@@ -4,3 +4,4 @@ export * from "./pinTags.repository";
 export * from "./tag.repository";
 export * from "./pinImages.repository";
 export * from "./comment.repository";
+export * from "./modification.repository";
diff --git a/packages/db/src/repositories/modification.repository.ts b/packages/db/src/repositories/modification.repository.ts
new file mode 100644
index 0000000..b156d0a
--- /dev/null
+++ b/packages/db/src/repositories/modification.repository.ts
@@ -0,0 +1,78 @@
+import { and, desc, eq } from "drizzle-orm";
+import type { Database } from "../db/database";
+import { modification } from "../db/schema";
+import type { Modification, CreateModification } from "../db/types";
+
+export function makeModificationRepository(db: Database) {
+	async function create(
+		details: CreateModification,
+	): Promise<Modification | undefined> {
+		const [m] = await db.insert(modification).values(details).returning();
+		return m;
+	}
+
+	async function getPending() {
+		return await db.query.modification.findMany({
+			where: eq(modification.status, "PENDING"),
+		});
+	}
+
+	async function getById(id: string) {
+		return await db.query.modification.findFirst({
+			where: eq(modification.id, id),
+		});
+	}
+
+	async function getByPinId(id: string) {
+		const query = await db.query.modification.findMany({
+			where: and(eq(modification.pinId, id)),
+			orderBy: desc(modification.createdAt),
+			with: {
+				user: true,
+				reviewer: true,
+			},
+		});
+
+		return query.map((q) => {
+			return { ...q, owner: q.user.name, reviewer: q.reviewer?.name };
+		});
+	}
+
+	async function getByUserPinId(userId: string, pinId: string) {
+		return await db.query.modification.findFirst({
+			where: and(
+				eq(modification.pinId, pinId),
+				eq(modification.userId, userId),
+			),
+			orderBy: desc(modification.createdAt),
+		});
+	}
+
+	async function applyModification(id: string, adminId: string) {
+		return await db
+			.update(modification)
+			.set({ status: "APPLIED", reviewedBy: adminId, reviewedAt: new Date() })
+			.where(eq(modification.id, id));
+	}
+
+	async function rejectModification(id: string, adminId: string) {
+		return await db
+			.update(modification)
+			.set({ status: "REJECTED", reviewedBy: adminId, reviewedAt: new Date() })
+			.where(eq(modification.id, id));
+	}
+
+	return {
+		create,
+		getPending,
+		getById,
+		applyModification,
+		rejectModification,
+		getByUserPinId,
+		getByPinId,
+	};
+}
+
+export type ModificationRepository = ReturnType<
+	typeof makeModificationRepository
+>;
diff --git a/packages/db/src/repositories/pinTags.repository.ts b/packages/db/src/repositories/pinTags.repository.ts
index 1d5de51..1870cca 100644
--- a/packages/db/src/repositories/pinTags.repository.ts
+++ b/packages/db/src/repositories/pinTags.repository.ts
@@ -1,3 +1,4 @@
+import { and, eq } from "drizzle-orm";
 import type { Database } from "../db/database";
 import { pinTags } from "../db/schema";
 import type { CreatePinTags, PinTags } from "../db/types";
@@ -8,8 +9,13 @@ export function makePinTagsRepository(db: Database) {
 		return p;
 	}
 
+	async function deleteTagByPinId(id: string) {
+		await db.delete(pinTags).where(eq(pinTags.pinId, id));
+	}
+
 	return {
 		create,
+		deleteTagByPinId,
 	};
 }
 
diff --git a/packages/db/src/repositories/pins.repository.ts b/packages/db/src/repositories/pins.repository.ts
index 466f38a..6d4e86a 100644
--- a/packages/db/src/repositories/pins.repository.ts
+++ b/packages/db/src/repositories/pins.repository.ts
@@ -7,9 +7,16 @@ import type {
 	PinWithTags,
 	PinDetails,
 	UpdatePin,
+	PinDetailsSimple,
+	PinTags,
+	Tag,
 } from "../db/types";
 
-export type PinStatus = "PENDING_VERIFICATION" | "ACTIVE" | "ARCHIVED" | "DELETED";
+export type PinStatus =
+	| "PENDING_VERIFICATION"
+	| "ACTIVE"
+	| "ARCHIVED"
+	| "DELETED";
 
 export interface GetAllPinsAdminOptions {
 	limit?: number;
@@ -41,18 +48,46 @@ export function makePinRepository(db: Database) {
 					},
 				},
 				images: true,
+				owner: true,
+			},
+		});
+
+		if (!query) return;
+
+		return { ...query, owner: query?.owner.name ?? "Unknown" };
+	}
+
+	async function getSimpleById(
+		id: string,
+	): Promise<PinDetailsSimple | undefined> {
+		const query = await db.query.pin.findFirst({
+			where: eq(pin.id, id),
+			with: {
+				pinTags: {
+					with: {
+						tag: true,
+					},
+				},
 			},
 		});
 
 		return query;
 	}
 
-	async function getByOwnerId(ownerId: string): Promise<Pin[]> {
-		const query = await db
-			.select()
-			.from(pin)
-			.where(eq(pin.ownerId, ownerId))
-			.orderBy(desc(pin.createdAt));
+	async function getByOwnerId(
+		ownerId: string,
+	): Promise<(Pin & { pinTags: (PinTags & { tag: Tag })[] })[]> {
+		const query = await db.query.pin.findMany({
+			where: eq(pin.ownerId, ownerId),
+			orderBy: desc(pin.createdAt),
+			with: {
+				pinTags: {
+					with: {
+						tag: true,
+					},
+				},
+			},
+		});
 		return query;
 	}
 
@@ -82,7 +117,7 @@ export function makePinRepository(db: Database) {
 	async function userDeleteById(id: string): Promise<boolean> {
 		const [deleted] = await db
 			.update(pin)
-			.set({ status: "DELETED",updatedAt: new Date()})
+			.set({ status: "DELETED", updatedAt: new Date() })
 			.where(eq(pin.id, id))
 			.returning();
 		return !!deleted;
@@ -93,7 +128,9 @@ export function makePinRepository(db: Database) {
 		return !!deleted;
 	}
 
-	async function getAllAdmin(options?: GetAllPinsAdminOptions): Promise<Pin[]> {
+	async function getAllAdmin(
+		options?: GetAllPinsAdminOptions,
+	): Promise<(Pin & { pinTags: (PinTags & { tag: Tag })[]; owner: string })[]> {
 		const limit = options?.limit ?? 50;
 		const offset = options?.offset ?? 0;
 
@@ -114,14 +151,24 @@ export function makePinRepository(db: Database) {
 			}
 		}
 
-		const query = await db
-			.select()
-			.from(pin)
-			.where(whereClause)
-			.orderBy(desc(pin.createdAt))
-			.limit(limit)
-			.offset(offset);
-		return query;
+		const query = await db.query.pin.findMany({
+			where: whereClause,
+			orderBy: desc(pin.createdAt),
+			limit: limit,
+			offset: offset,
+			with: {
+				pinTags: {
+					with: {
+						tag: true,
+					},
+				},
+				owner: true,
+			},
+		});
+
+		return query.map((q) => {
+			return { ...q, owner: q.owner.name };
+		});
 	}
 
 	async function getCount(options?: GetPinCountOptions): Promise<number> {
@@ -133,7 +180,12 @@ export function makePinRepository(db: Database) {
 	}
 
 	async function getStatusCounts(): Promise<Record<PinStatus, number>> {
-		const statuses: PinStatus[] = ["PENDING_VERIFICATION", "ACTIVE", "ARCHIVED", "DELETED"];
+		const statuses: PinStatus[] = [
+			"PENDING_VERIFICATION",
+			"ACTIVE",
+			"ARCHIVED",
+			"DELETED",
+		];
 		const result: Record<PinStatus, number> = {
 			PENDING_VERIFICATION: 0,
 			ACTIVE: 0,
@@ -152,30 +204,6 @@ export function makePinRepository(db: Database) {
 		return result;
 	}
 
-	async function getByIdWithOwner(id: string): Promise<(Pin & { ownerName: string }) | undefined> {
-		const query = await db.query.pin.findFirst({
-			where: eq(pin.id, id),
-			with: {
-				pinTags: {
-					with: {
-						tag: true,
-					},
-				},
-				images: true,
-			},
-		});
-
-		if (!query) return undefined;
-
-		
-		const ownerQuery = await db
-			.select({ name: user.name })
-			.from(user)
-			.where(eq(user.id, query.ownerId));
-
-		return { ...query, ownerName: ownerQuery[0]?.name ?? "Unknown" };
-	}
-
 	return {
 		getAll,
 		getById,
@@ -188,7 +216,7 @@ export function makePinRepository(db: Database) {
 		getAllAdmin,
 		getCount,
 		getStatusCounts,
-		getByIdWithOwner,
+		getSimpleById,
 	};
 }