From 5c398acfd30c2bf19343372838020195b6dc0979 Mon Sep 17 00:00:00 2001
From: Arjuna <arjunaragilputera@gmail.com>
Date: Sun, 8 Feb 2026 18:04:13 +0700
Subject: [PATCH 1/2] feat: fe integration with the creating table and adding
 col logic

---
 Internal/adapters/repository/dynamicDBRepo.go |   2 +-
 Internal/api/Routes/routev1.go                |   1 +
 Internal/api/handlers/dynamicDBHandler.go     |  43 ++-
 Internal/core/domain/projectdb.go             |  14 +-
 Internal/core/services/dynamicDBService.go    |  36 ++-
 .../project/components/ProjectSidebar.tsx     |   9 +
 .../project/pages/ProjectDatabase.tsx         | 270 ++++++++++++++++++
 .../project/services/dynamicDBService.ts      |  23 ++
 Lb-web/src/main.tsx                           |   5 +
 9 files changed, 390 insertions(+), 13 deletions(-)
 create mode 100644 Lb-web/src/features/project/pages/ProjectDatabase.tsx
 create mode 100644 Lb-web/src/features/project/services/dynamicDBService.ts

diff --git a/Internal/adapters/repository/dynamicDBRepo.go b/Internal/adapters/repository/dynamicDBRepo.go
index d7ae243..66cc15d 100644
--- a/Internal/adapters/repository/dynamicDBRepo.go
+++ b/Internal/adapters/repository/dynamicDBRepo.go
@@ -8,7 +8,7 @@ func NewDynamicDB(db *DBContainer) *DynamicDBRepo {
 	return &DynamicDBRepo{DB: db}
 }
 
-func (dr *DynamicDBRepo) CreateDynamicDB(query string) error {
+func (dr *DynamicDBRepo) RunDynamicQuery(query string) error {
 	_, err := dr.DB.Sqlx.Exec(query)
 	if err != nil {
 		return err
diff --git a/Internal/api/Routes/routev1.go b/Internal/api/Routes/routev1.go
index 7db3f07..b164423 100644
--- a/Internal/api/Routes/routev1.go
+++ b/Internal/api/Routes/routev1.go
@@ -59,6 +59,7 @@ func SetupRouterV1(r *gin.Engine, deps Deps) {
 					manage.POST("/invite/:projectid", deps.Project.InviteProjectHandler)
 					manage.DELETE("/remove/:projuserid", deps.Project.RemoveProjectUserHandler)
 					manage.POST("/create/table/:projectid", deps.DynamicDB.CreateDynamicDBHandler)
+					manage.POST("/create/col/:projectid", deps.DynamicDB.AddDynamicColHandler)
 				}
 			}
 		}
diff --git a/Internal/api/handlers/dynamicDBHandler.go b/Internal/api/handlers/dynamicDBHandler.go
index 42db287..ba1ad2d 100644
--- a/Internal/api/handlers/dynamicDBHandler.go
+++ b/Internal/api/handlers/dynamicDBHandler.go
@@ -25,24 +25,61 @@ func (dh *DynamicDBHandler) CreateDynamicDBHandler(c *gin.Context) {
 		})
 		return
 	}
-	var input services.CreateTableReq
-	if err := c.ShouldBindJSON(&input); err != nil {
+	var input services.DDLTableReq
+	if err = c.ShouldBindJSON(&input); err != nil {
 		c.JSON(400, gin.H{
 			"message": "Invalid json body",
 			"error":   err.Error(),
 		})
 		return
 	}
-	if err := dh.Serv.CreateDynamicTable(uint(projectID), input); nil != err {
+	if err = dh.Serv.CreateDynamicTable(uint(projectID), input); nil != err {
 		c.JSON(500, gin.H{
 			"message": "Failed to create dynamic table",
 			"error":   err.Error(),
 		})
 		return
 	}
+	if err = dh.Serv.CreateDynamicCols(uint(projectID), input); nil != err {
+		c.JSON(500, gin.H{
+			"message": "Failed to create dynamic cols",
+			"error":   err.Error(),
+		})
+		return
+	}
 	c.JSON(200, gin.H{
 		"message": "Successfully created dynamic table",
 		"data":    nil,
 	})
+}
 
+func (dh *DynamicDBHandler) AddDynamicColHandler(c *gin.Context) {
+	projectIDStr := c.Param("projectid")
+	projectID, err := strconv.Atoi(projectIDStr)
+	if err != nil {
+		c.JSON(400, gin.H{
+			"message": "Project ID not valid",
+			"error":   err.Error(),
+		})
+		return
+	}
+	var input services.DDLTableReq
+	if err = c.ShouldBindJSON(&input); err != nil {
+		c.JSON(400, gin.H{
+			"message": "Invalid json body",
+			"error":   err.Error(),
+		})
+		return
+	}
+	if err = dh.Serv.CreateDynamicCols(uint(projectID), input); nil != err {
+		c.JSON(500, gin.H{
+			"message": "Failed to create dynamic cols",
+			"error":   err.Error(),
+		})
+		return
+	}
+	c.JSON(200, gin.H{
+		"message": "Successfully added dynamic col",
+		"data":    nil,
+	})
 }
diff --git a/Internal/core/domain/projectdb.go b/Internal/core/domain/projectdb.go
index cd6be9e..d0c1679 100644
--- a/Internal/core/domain/projectdb.go
+++ b/Internal/core/domain/projectdb.go
@@ -21,4 +21,16 @@ type ProjectUser struct {
 	CreatedAt time.Time `gorm:"default:CURRENT_TIMESTAMP" json:"created_at"`
 }
 
-//Changes last savepoint
+type DynTableDef struct {
+	ID        uint   `gorm:"primaryKey;autoIncrement" json:"id"`
+	ProjectID uint   `gorm:"not null" json:"project_id"`
+	Name      string `gorm:"size:255;not null" json:"name"`
+	Alias     string `gorm:"size:255;not null" json:"alias"`
+}
+
+type DynColDef struct {
+	ID            uint   `gorm:"primaryKey;autoIncrement" json:"id"`
+	DynTableDefID uint   `gorm:"not null" json:"dyn_table_def_id"`
+	Name          string `gorm:"size:255;not null" json:"name"`
+	DataType      string `gorm:"size:255;not null" json:"data_type"`
+}
diff --git a/Internal/core/services/dynamicDBService.go b/Internal/core/services/dynamicDBService.go
index 364301c..06a10ef 100644
--- a/Internal/core/services/dynamicDBService.go
+++ b/Internal/core/services/dynamicDBService.go
@@ -21,7 +21,7 @@ type ColumnReq struct {
 	Type string `json:"type"`
 }
 
-type CreateTableReq struct {
+type DDLTableReq struct {
 	TableName string      `json:"table_name"`
 	Columns   []ColumnReq `json:"columns"`
 }
@@ -34,7 +34,7 @@ func sanitizeInput(input string) string {
 	return result
 }
 
-func (ds *DynamicDBService) CreateDynamicTable(projectID uint, req CreateTableReq) error {
+func (ds *DynamicDBService) CreateDynamicTable(projectID uint, req DDLTableReq) error {
 	safeTableName := fmt.Sprintf("proj_%d_%s", projectID, sanitizeInput(req.TableName))
 
 	var queryBuilder strings.Builder
@@ -42,17 +42,37 @@ func (ds *DynamicDBService) CreateDynamicTable(projectID uint, req CreateTableRe
 	queryBuilder.WriteString("id SERIAL PRIMARY KEY, ")
 	queryBuilder.WriteString("created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, ")
 
-	for _, col := range req.Columns {
-		safeColName := sanitizeInput(col.Name)
-		queryBuilder.WriteString(fmt.Sprintf("%s %s, ", safeColName, col.Type))
-	}
-
 	query := queryBuilder.String()
 	query = strings.TrimSuffix(query, ", ")
 	query += ");"
 
 	fmt.Println(query)
-	if err := ds.Repo.CreateDynamicDB(query); err != nil {
+	if err := ds.Repo.RunDynamicQuery(query); err != nil {
+		return err
+	}
+	return nil
+}
+
+func (ds *DynamicDBService) CreateDynamicCols(projectID uint, req DDLTableReq) error {
+	safeTableName := fmt.Sprintf("proj_%d_%s", projectID, sanitizeInput(req.TableName))
+
+	if len(req.Columns) == 0 {
+		return fmt.Errorf("no columns specified")
+	}
+	var queryBuilder strings.Builder
+	queryBuilder.WriteString(fmt.Sprintf("ALTER TABLE %s ", safeTableName))
+
+	for i, col := range req.Columns {
+		safeColName := sanitizeInput(col.Name)
+		queryBuilder.WriteString(fmt.Sprintf("ADD COLUMN %s %s", safeColName, col.Type))
+		if i != len(req.Columns)-1 {
+			queryBuilder.WriteString(", ")
+		}
+	}
+	queryBuilder.WriteString(";")
+	query := queryBuilder.String()
+
+	if err := ds.Repo.RunDynamicQuery(query); err != nil {
 		return err
 	}
 	return nil
diff --git a/Lb-web/src/features/project/components/ProjectSidebar.tsx b/Lb-web/src/features/project/components/ProjectSidebar.tsx
index 45916ea..87b7878 100644
--- a/Lb-web/src/features/project/components/ProjectSidebar.tsx
+++ b/Lb-web/src/features/project/components/ProjectSidebar.tsx
@@ -44,6 +44,15 @@ export function ProjectSidebar({ project }: ProjectSidebarProps) {
                         Dashboard
                     </Button>
                 </Link>
+                <Link to={`/project/${project.id}/database`}>
+                    <Button
+                        variant="ghost"
+                        className={`w-full justify-start ${isActive(`/project/${project.id}/database`) ? 'bg-sky-100 text-sky-900' : 'text-sky-700 hover:text-sky-900 hover:bg-sky-50'}`}
+                    >
+                        <Database className="mr-3 h-4 w-4" />
+                        Database
+                    </Button>
+                </Link>
                 <Link to={`/project/${project.id}/settings/members`}>
                     <Button
                         variant="ghost"
diff --git a/Lb-web/src/features/project/pages/ProjectDatabase.tsx b/Lb-web/src/features/project/pages/ProjectDatabase.tsx
new file mode 100644
index 0000000..0b52703
--- /dev/null
+++ b/Lb-web/src/features/project/pages/ProjectDatabase.tsx
@@ -0,0 +1,270 @@
+import { useState, useEffect } from "react";
+import { useParams } from "react-router";
+import { ProjectSidebar } from "../components/ProjectSidebar";
+import { projectService } from "../services/projectService";
+import { dynamicDBService } from "../services/dynamicDBService";
+import type { ColumnReq } from "../services/dynamicDBService";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog";
+import { Plus, Loader2, Database, Table as TableIcon, Trash2 } from "lucide-react";
+
+
+export default function ProjectDatabase() {
+    const { id } = useParams<{ id: string }>();
+    const projectId = id ? parseInt(id) : 0;
+
+    const [project, setProject] = useState<{ id: number; name: string } | null>(null);
+    const [loadingProject, setLoadingProject] = useState(true);
+
+    // Create Table State
+    const [createDialogOpen, setCreateDialogOpen] = useState(false);
+    const [tableName, setTableName] = useState("");
+
+    // Backend Implementation of CreateDynamicTable adds: id SERIAL PRIMARY KEY, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    // So ID and Created_At are automatic. The user just defines *additional* columns.
+
+    const [newColumns, setNewColumns] = useState<ColumnReq[]>([]);
+    const [createLoading, setCreateLoading] = useState(false);
+    const [createError, setCreateError] = useState<string | null>(null);
+
+    // Mock Data for Tables (since we don't have a ListTables endpoint yet?)
+    const [tables, setTables] = useState<string[]>([]);
+
+
+    useEffect(() => {
+        const fetchProject = async () => {
+            if (!projectId) return;
+            try {
+                const data = await projectService.getProjectById(id!);
+                setProject(data);
+            } catch (error) {
+                console.error("Failed to fetch project", error);
+            } finally {
+                setLoadingProject(false);
+            }
+        };
+        fetchProject();
+    }, [projectId, id]);
+
+    const handleAddColumnSlot = () => {
+        setNewColumns([...newColumns, { name: "", type: "VARCHAR(255)" }]);
+    };
+
+    const handleRemoveColumnSlot = (index: number) => {
+        const updated = [...newColumns];
+        updated.splice(index, 1);
+        setNewColumns(updated);
+    };
+
+    const handleColumnChange = (index: number, field: keyof ColumnReq, value: string) => {
+        const updated = [...newColumns];
+        updated[index] = { ...updated[index], [field]: value };
+        setNewColumns(updated);
+    };
+
+    const handleCreateTable = async () => {
+        if (!tableName) {
+            setCreateError("Table name is required");
+            return;
+        }
+        setCreateLoading(true);
+        setCreateError(null);
+
+        try {
+            await dynamicDBService.createTable(projectId, {
+                table_name: tableName,
+                columns: newColumns
+            });
+
+            setTables([...tables, tableName]);
+            setCreateDialogOpen(false);
+            setTableName("");
+            setNewColumns([]);
+            // Success notification?
+        } catch (err: any) {
+            console.error("Failed to create table", err);
+            setCreateError(err.response?.data?.message || err.message || "Failed to create table");
+        } finally {
+            setCreateLoading(false);
+        }
+    };
+
+
+    if (loadingProject) {
+        return <div className="flex h-screen items-center justify-center bg-slate-50"><Loader2 className="animate-spin text-sky-600" /></div>;
+    }
+
+    if (!project) return <div>Project not found</div>;
+
+    return (
+        <div className="flex w-full h-screen bg-slate-50 relative overflow-hidden">
+            <ProjectSidebar project={project} />
+
+            <main className="flex-1 flex flex-col h-full z-10 overflow-hidden">
+                <div className="flex-1 overflow-y-auto p-8">
+                    <div className="max-w-6xl mx-auto space-y-8">
+                        <div className="flex items-center justify-between">
+                            <div>
+                                <h2 className="text-2xl font-bold text-sky-900 tracking-tight flex items-center gap-2">
+                                    <Database className="h-6 w-6 text-sky-600" />
+                                    Database
+                                </h2>
+                                <p className="text-sky-600">Manage your project's database tables and schema.</p>
+                            </div>
+
+                            <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
+                                <DialogTrigger asChild>
+                                    <Button className="bg-sky-600 hover:bg-sky-700 text-white shadow-sm">
+                                        <Plus className="mr-2 h-4 w-4" />
+                                        Create Table
+                                    </Button>
+                                </DialogTrigger>
+                                <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
+                                    <DialogHeader>
+                                        <DialogTitle className="text-sky-900">Create New Table</DialogTitle>
+                                        <DialogDescription>
+                                            Define the table name and its initial columns. ID and Created_At are added automatically.
+                                        </DialogDescription>
+                                    </DialogHeader>
+
+                                    <div className="grid gap-6 py-4">
+                                        <div className="space-y-2">
+                                            <Label htmlFor="tableName">Table Name</Label>
+                                            <Input
+                                                id="tableName"
+                                                placeholder="e.g., users, posts, comments"
+                                                value={tableName}
+                                                onChange={(e) => setTableName(e.target.value)}
+                                                className="border-sky-200 focus-visible:ring-sky-400"
+                                            />
+                                        </div>
+
+                                        <div className="space-y-4">
+                                            <div className="flex items-center justify-between">
+                                                <Label>Columns</Label>
+                                                <Button type="button" variant="outline" size="sm" onClick={handleAddColumnSlot} className="text-sky-600 border-sky-200 hover:bg-sky-50">
+                                                    <Plus className="h-3 w-3 mr-1" /> Add Column
+                                                </Button>
+                                            </div>
+
+                                            {newColumns.length === 0 && (
+                                                <div className="text-sm text-slate-500 italic text-center py-4 border border-dashed border-slate-200 rounded-lg">
+                                                    No additional columns. Table will only have 'id' and 'created_at'.
+                                                </div>
+                                            )}
+
+                                            {newColumns.map((col, idx) => (
+                                                <div key={idx} className="flex gap-3 items-end p-3 bg-slate-50 rounded-lg border border-slate-100">
+                                                    <div className="flex-1 space-y-1">
+                                                        <Label className="text-xs">Name</Label>
+                                                        <Input
+                                                            value={col.name}
+                                                            onChange={(e) => handleColumnChange(idx, "name", e.target.value)}
+                                                            placeholder="col_name"
+                                                            className="h-8 text-sm"
+                                                        />
+                                                    </div>
+                                                    <div className="w-[180px] space-y-1">
+                                                        <Label className="text-xs">Type</Label>
+                                                        <select
+                                                            className="h-8 text-sm w-full rounded-md border border-input bg-background px-3 py-1 ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                                                            value={col.type}
+                                                            onChange={(e) => handleColumnChange(idx, "type", e.target.value)}
+                                                        >
+                                                            <option value="VARCHAR(255)">VARCHAR(255)</option>
+                                                            <option value="TEXT">TEXT</option>
+                                                            <option value="INT">INT</option>
+                                                            <option value="BOOLEAN">BOOLEAN</option>
+                                                            <option value="TIMESTAMP">TIMESTAMP</option>
+                                                            <option value="DECIMAL(10,2)">DECIMAL</option>
+                                                        </select>
+                                                    </div>
+                                                    <Button
+                                                        type="button"
+                                                        variant="ghost"
+                                                        size="icon"
+                                                        className="h-8 w-8 text-red-500 hover:bg-red-50"
+                                                        onClick={() => handleRemoveColumnSlot(idx)}
+                                                    >
+                                                        <Trash2 className="h-4 w-4" />
+                                                    </Button>
+                                                </div>
+                                            ))}
+                                        </div>
+
+                                        {createError && (
+                                            <div className="p-3 bg-red-50 text-red-600 text-sm rounded-md">
+                                                {createError}
+                                            </div>
+                                        )}
+                                    </div>
+
+                                    <DialogFooter>
+                                        <Button
+                                            onClick={handleCreateTable}
+                                            disabled={createLoading}
+                                            className="bg-sky-600 hover:bg-sky-700 text-white"
+                                        >
+                                            {createLoading ? (
+                                                <>
+                                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                                    Creating...
+                                                </>
+                                            ) : (
+                                                "Create Table"
+                                            )}
+                                        </Button>
+                                    </DialogFooter>
+                                </DialogContent>
+                            </Dialog>
+                        </div>
+
+                        {/* Tables List / Grid */}
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                            {tables.length > 0 ? (
+                                tables.map((t, i) => (
+                                    <div key={i} className="bg-white rounded-xl border border-sky-100 shadow-sm p-6 hover:shadow-md transition-shadow cursor-pointer group">
+                                        <div className="flex items-center justify-between mb-4">
+                                            <div className="p-3 bg-sky-50 rounded-lg group-hover:bg-sky-100 transition-colors">
+                                                <TableIcon className="h-6 w-6 text-sky-600" />
+                                            </div>
+                                        </div>
+                                        <h3 className="text-lg font-semibold text-sky-900 mb-2">{t}</h3>
+                                        <p className="text-sm text-sky-500">
+                                            Click to manage columns and data (Coming Soon)
+                                        </p>
+                                    </div>
+                                ))
+                            ) : (
+                                <div className="col-span-full flex flex-col items-center justify-center p-12 bg-white/50 backdrop-blur-sm rounded-xl border border-sky-100 border-dashed">
+                                    <div className="p-4 bg-slate-50 rounded-full mb-4">
+                                        <Database className="h-12 w-12 text-slate-300" />
+                                    </div>
+                                    <h3 className="text-lg font-medium text-slate-900">No tables found</h3>
+                                    <p className="text-slate-500 max-w-sm text-center">
+                                        Create your first table to start storing data in your project.
+                                    </p>
+                                </div>
+                            )}
+                        </div>
+
+                        {/* Info Note */}
+                        <div className="bg-blue-50 border border-blue-100 rounded-lg p-4 text-sm text-blue-700">
+                            <strong>Note:</strong> Table management is currently in beta. You can create tables and add columns.
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    );
+}
diff --git a/Lb-web/src/features/project/services/dynamicDBService.ts b/Lb-web/src/features/project/services/dynamicDBService.ts
new file mode 100644
index 0000000..25805a0
--- /dev/null
+++ b/Lb-web/src/features/project/services/dynamicDBService.ts
@@ -0,0 +1,23 @@
+import api from "@/services/api";
+
+export interface ColumnReq {
+    name: string;
+    type: string;
+}
+
+export interface DDLTableReq {
+    table_name: string;
+    columns: ColumnReq[];
+}
+
+export const dynamicDBService = {
+    createTable: async (projectId: number, data: DDLTableReq) => {
+        const response = await api.post(`/protected/project/manage/create/table/${projectId}`, data);
+        return response.data;
+    },
+
+    addColumn: async (projectId: number, data: DDLTableReq) => {
+        const response = await api.post(`/protected/project/manage/create/col/${projectId}`, data);
+        return response.data;
+    }
+};
diff --git a/Lb-web/src/main.tsx b/Lb-web/src/main.tsx
index b901da2..fdc13bb 100644
--- a/Lb-web/src/main.tsx
+++ b/Lb-web/src/main.tsx
@@ -13,6 +13,7 @@ import UserManagement from './features/admin-setting/pages/UserManagement.tsx'
 import Appearance from './features/admin-setting/pages/Appearance.tsx'
 import ProjectDashboard from './features/project/pages/ProjectDashboard.tsx'
 import ProjectUserManagement from './features/project/pages/ProjectUserManagement.tsx'
+import ProjectDatabase from './features/project/pages/ProjectDatabase.tsx'
 
 const router = createBrowserRouter([
   {
@@ -73,6 +74,10 @@ const router = createBrowserRouter([
           {
             path: 'settings/members',
             element: <ProjectUserManagement />
+          },
+          {
+            path: 'database',
+            element: <ProjectDatabase />
           }
         ]
       }

From dc6a1f7756c1e465ceb5607ee79b630bff8c6e64 Mon Sep 17 00:00:00 2001
From: Arjuna <arjunaragilputera@gmail.com>
Date: Sun, 8 Feb 2026 22:16:54 +0700
Subject: [PATCH 2/2] feat: database ddl complete with fe integration

---
 Internal/adapters/repository/dynamicDBRepo.go |  34 ++-
 Internal/adapters/repository/postgres.go      |   2 +
 Internal/api/Routes/routev1.go                |   3 +-
 Internal/api/handlers/dynamicDBHandler.go     |  40 ++-
 Internal/core/domain/projectdb.go             |   9 +-
 Internal/core/services/dynamicDBService.go    |  67 ++++-
 .../project/components/ProjectSidebar.tsx     |   7 +-
 .../project/pages/ProjectDatabase.tsx         | 282 +++++++++++++++---
 .../project/services/dynamicDBService.ts      |  24 +-
 cmd/server/main.go                            |   2 +-
 10 files changed, 402 insertions(+), 68 deletions(-)

diff --git a/Internal/adapters/repository/dynamicDBRepo.go b/Internal/adapters/repository/dynamicDBRepo.go
index 66cc15d..36f0081 100644
--- a/Internal/adapters/repository/dynamicDBRepo.go
+++ b/Internal/adapters/repository/dynamicDBRepo.go
@@ -1,5 +1,10 @@
 package repository
 
+import (
+	"github.com/Arjuna-Ragil/Localbase/Internal/core/domain"
+	"gorm.io/gorm"
+)
+
 type DynamicDBRepo struct {
 	DB *DBContainer
 }
@@ -8,10 +13,33 @@ func NewDynamicDB(db *DBContainer) *DynamicDBRepo {
 	return &DynamicDBRepo{DB: db}
 }
 
-func (dr *DynamicDBRepo) RunDynamicQuery(query string) error {
-	_, err := dr.DB.Sqlx.Exec(query)
-	if err != nil {
+func (dr *DynamicDBRepo) RunDynamicQuery(tx *gorm.DB, query string) error {
+	if err := tx.Exec(query).Error; err != nil {
 		return err
 	}
 	return nil
 }
+
+// Dynamic database note
+
+func (dr *DynamicDBRepo) CreateDynTable(tx *gorm.DB, dynTable *domain.DynTableDef) (*domain.DynTableDef, error) {
+	if err := tx.Create(&dynTable).Error; err != nil {
+		return nil, err
+	}
+	return dynTable, nil
+}
+
+func (dr *DynamicDBRepo) CreateDynCol(tx *gorm.DB, dynCol *domain.DynColDef) error {
+	if err := tx.Create(&dynCol).Error; err != nil {
+		return err
+	}
+	return nil
+}
+
+func (dr *DynamicDBRepo) GetTables(projectID uint) ([]domain.DynTableDef, error) {
+	var tables []domain.DynTableDef
+	if err := dr.DB.Gorm.Preload("Columns").Where("project_id = ?", projectID).Find(&tables).Error; err != nil {
+		return nil, err
+	}
+	return tables, nil
+}
diff --git a/Internal/adapters/repository/postgres.go b/Internal/adapters/repository/postgres.go
index a6a2f28..3ba08a8 100644
--- a/Internal/adapters/repository/postgres.go
+++ b/Internal/adapters/repository/postgres.go
@@ -43,6 +43,8 @@ func (db *DBContainer) Migrate() error {
 		&domain.Invitation{},
 		&domain.Project{},
 		&domain.ProjectUser{},
+		&domain.DynTableDef{},
+		&domain.DynColDef{},
 	)
 	if err != nil {
 		log.Fatalf("Failed to migrate users: %v", err)
diff --git a/Internal/api/Routes/routev1.go b/Internal/api/Routes/routev1.go
index b164423..d1e070f 100644
--- a/Internal/api/Routes/routev1.go
+++ b/Internal/api/Routes/routev1.go
@@ -53,13 +53,14 @@ func SetupRouterV1(r *gin.Engine, deps Deps) {
 			{
 				project.GET("/projects", deps.Project.GetAllProjectHandler)
 				project.GET("/:projectid", deps.Project.GetProjectHandler)
+				project.GET("/:projectid/tables", deps.DynamicDB.GetDynTablesHandler)
 
 				manage := project.Group("/manage")
 				{
 					manage.POST("/invite/:projectid", deps.Project.InviteProjectHandler)
 					manage.DELETE("/remove/:projuserid", deps.Project.RemoveProjectUserHandler)
 					manage.POST("/create/table/:projectid", deps.DynamicDB.CreateDynamicDBHandler)
-					manage.POST("/create/col/:projectid", deps.DynamicDB.AddDynamicColHandler)
+					manage.POST("/create/col/:projectid/:tableid", deps.DynamicDB.AddDynamicColHandler)
 				}
 			}
 		}
diff --git a/Internal/api/handlers/dynamicDBHandler.go b/Internal/api/handlers/dynamicDBHandler.go
index ba1ad2d..493999a 100644
--- a/Internal/api/handlers/dynamicDBHandler.go
+++ b/Internal/api/handlers/dynamicDBHandler.go
@@ -33,14 +33,15 @@ func (dh *DynamicDBHandler) CreateDynamicDBHandler(c *gin.Context) {
 		})
 		return
 	}
-	if err = dh.Serv.CreateDynamicTable(uint(projectID), input); nil != err {
+	DynTable, err := dh.Serv.CreateDynamicTable(uint(projectID), input)
+	if nil != err {
 		c.JSON(500, gin.H{
 			"message": "Failed to create dynamic table",
 			"error":   err.Error(),
 		})
 		return
 	}
-	if err = dh.Serv.CreateDynamicCols(uint(projectID), input); nil != err {
+	if err = dh.Serv.CreateDynamicCols(DynTable.ID, uint(projectID), input); nil != err {
 		c.JSON(500, gin.H{
 			"message": "Failed to create dynamic cols",
 			"error":   err.Error(),
@@ -63,6 +64,15 @@ func (dh *DynamicDBHandler) AddDynamicColHandler(c *gin.Context) {
 		})
 		return
 	}
+	tableIDStr := c.Param("tableid")
+	tableID, err := strconv.Atoi(tableIDStr)
+	if err != nil {
+		c.JSON(400, gin.H{
+			"message": "Table ID not valid",
+			"error":   err.Error(),
+		})
+		return
+	}
 	var input services.DDLTableReq
 	if err = c.ShouldBindJSON(&input); err != nil {
 		c.JSON(400, gin.H{
@@ -71,7 +81,7 @@ func (dh *DynamicDBHandler) AddDynamicColHandler(c *gin.Context) {
 		})
 		return
 	}
-	if err = dh.Serv.CreateDynamicCols(uint(projectID), input); nil != err {
+	if err = dh.Serv.CreateDynamicCols(uint(tableID), uint(projectID), input); nil != err {
 		c.JSON(500, gin.H{
 			"message": "Failed to create dynamic cols",
 			"error":   err.Error(),
@@ -83,3 +93,27 @@ func (dh *DynamicDBHandler) AddDynamicColHandler(c *gin.Context) {
 		"data":    nil,
 	})
 }
+
+func (dh *DynamicDBHandler) GetDynTablesHandler(c *gin.Context) {
+	projectIDStr := c.Param("projectid")
+	projectID, err := strconv.Atoi(projectIDStr)
+	if err != nil {
+		c.JSON(400, gin.H{
+			"message": "Project ID not valid",
+			"error":   err.Error(),
+		})
+		return
+	}
+	tables, err := dh.Serv.GetDynamicTables(uint(projectID))
+	if err != nil {
+		c.JSON(500, gin.H{
+			"message": "Failed to get dynamic table",
+			"error":   err.Error(),
+		})
+		return
+	}
+	c.JSON(200, gin.H{
+		"message": "Successfully get dynamic table",
+		"data":    tables,
+	})
+}
diff --git a/Internal/core/domain/projectdb.go b/Internal/core/domain/projectdb.go
index d0c1679..081e42d 100644
--- a/Internal/core/domain/projectdb.go
+++ b/Internal/core/domain/projectdb.go
@@ -22,10 +22,11 @@ type ProjectUser struct {
 }
 
 type DynTableDef struct {
-	ID        uint   `gorm:"primaryKey;autoIncrement" json:"id"`
-	ProjectID uint   `gorm:"not null" json:"project_id"`
-	Name      string `gorm:"size:255;not null" json:"name"`
-	Alias     string `gorm:"size:255;not null" json:"alias"`
+	ID        uint        `gorm:"primaryKey;autoIncrement" json:"id"`
+	ProjectID uint        `gorm:"not null" json:"project_id"`
+	Name      string      `gorm:"size:255;not null" json:"name"`
+	Alias     string      `gorm:"size:255;not null" json:"alias"`
+	Columns   []DynColDef `gorm:"foreignKey:DynTableDefID" json:"columns"`
 }
 
 type DynColDef struct {
diff --git a/Internal/core/services/dynamicDBService.go b/Internal/core/services/dynamicDBService.go
index 06a10ef..f0f8166 100644
--- a/Internal/core/services/dynamicDBService.go
+++ b/Internal/core/services/dynamicDBService.go
@@ -6,14 +6,16 @@ import (
 	"strings"
 
 	"github.com/Arjuna-Ragil/Localbase/Internal/adapters/repository"
+	"github.com/Arjuna-Ragil/Localbase/Internal/core/domain"
 )
 
 type DynamicDBService struct {
 	Repo *repository.DynamicDBRepo
+	DB   *repository.DBContainer
 }
 
-func NewDynamicDBService(repo *repository.DynamicDBRepo) *DynamicDBService {
-	return &DynamicDBService{Repo: repo}
+func NewDynamicDBService(repo *repository.DynamicDBRepo, db *repository.DBContainer) *DynamicDBService {
+	return &DynamicDBService{Repo: repo, DB: db}
 }
 
 type ColumnReq struct {
@@ -34,9 +36,29 @@ func sanitizeInput(input string) string {
 	return result
 }
 
-func (ds *DynamicDBService) CreateDynamicTable(projectID uint, req DDLTableReq) error {
+func (ds *DynamicDBService) CreateDynamicTable(projectID uint, req DDLTableReq) (*domain.DynTableDef, error) {
+	tx := ds.DB.Gorm.Begin()
+
+	defer func() {
+		if r := recover(); r != nil {
+			tx.Rollback()
+		}
+	}()
+
 	safeTableName := fmt.Sprintf("proj_%d_%s", projectID, sanitizeInput(req.TableName))
 
+	tableDef := domain.DynTableDef{
+		ProjectID: projectID,
+		Name:      safeTableName,
+		Alias:     req.TableName,
+	}
+
+	DynTable, err := ds.Repo.CreateDynTable(tx, &tableDef)
+	if err != nil {
+		tx.Rollback()
+		return nil, err
+	}
+
 	var queryBuilder strings.Builder
 	queryBuilder.WriteString(fmt.Sprintf("CREATE TABLE %s (", safeTableName))
 	queryBuilder.WriteString("id SERIAL PRIMARY KEY, ")
@@ -47,13 +69,22 @@ func (ds *DynamicDBService) CreateDynamicTable(projectID uint, req DDLTableReq)
 	query += ");"
 
 	fmt.Println(query)
-	if err := ds.Repo.RunDynamicQuery(query); err != nil {
-		return err
+	if err = ds.Repo.RunDynamicQuery(tx, query); err != nil {
+		tx.Rollback()
+		return nil, err
 	}
-	return nil
+	return DynTable, tx.Commit().Error
 }
 
-func (ds *DynamicDBService) CreateDynamicCols(projectID uint, req DDLTableReq) error {
+func (ds *DynamicDBService) CreateDynamicCols(tableID uint, projectID uint, req DDLTableReq) error {
+	tx := ds.DB.Gorm.Begin()
+
+	defer func() {
+		if r := recover(); r != nil {
+			tx.Rollback()
+		}
+	}()
+
 	safeTableName := fmt.Sprintf("proj_%d_%s", projectID, sanitizeInput(req.TableName))
 
 	if len(req.Columns) == 0 {
@@ -64,6 +95,16 @@ func (ds *DynamicDBService) CreateDynamicCols(projectID uint, req DDLTableReq) e
 
 	for i, col := range req.Columns {
 		safeColName := sanitizeInput(col.Name)
+		coldef := domain.DynColDef{
+			DynTableDefID: tableID,
+			Name:          col.Name,
+			DataType:      col.Type,
+		}
+		if err := ds.Repo.CreateDynCol(tx, &coldef); err != nil {
+			tx.Rollback()
+			return err
+		}
+
 		queryBuilder.WriteString(fmt.Sprintf("ADD COLUMN %s %s", safeColName, col.Type))
 		if i != len(req.Columns)-1 {
 			queryBuilder.WriteString(", ")
@@ -72,8 +113,16 @@ func (ds *DynamicDBService) CreateDynamicCols(projectID uint, req DDLTableReq) e
 	queryBuilder.WriteString(";")
 	query := queryBuilder.String()
 
-	if err := ds.Repo.RunDynamicQuery(query); err != nil {
+	if err := ds.Repo.RunDynamicQuery(tx, query); err != nil {
 		return err
 	}
-	return nil
+	return tx.Commit().Error
+}
+
+func (ds *DynamicDBService) GetDynamicTables(projectID uint) ([]domain.DynTableDef, error) {
+	tables, err := ds.Repo.GetTables(projectID)
+	if err != nil {
+		return nil, err
+	}
+	return tables, nil
 }
diff --git a/Lb-web/src/features/project/components/ProjectSidebar.tsx b/Lb-web/src/features/project/components/ProjectSidebar.tsx
index 87b7878..6f804bc 100644
--- a/Lb-web/src/features/project/components/ProjectSidebar.tsx
+++ b/Lb-web/src/features/project/components/ProjectSidebar.tsx
@@ -12,7 +12,10 @@ interface ProjectSidebarProps {
 export function ProjectSidebar({ project }: ProjectSidebarProps) {
     const location = useLocation();
 
-    const isActive = (path: string) => {
+    const isActive = (path: string, exact = false) => {
+        if (exact) {
+            return location.pathname === path;
+        }
         return location.pathname === path || location.pathname.startsWith(`${path}/`);
     };
 
@@ -38,7 +41,7 @@ export function ProjectSidebar({ project }: ProjectSidebarProps) {
                 <Link to={`/project/${project.id}`}>
                     <Button
                         variant="ghost"
-                        className={`w-full justify-start ${isActive(`/project/${project.id}`) && !location.pathname.includes('settings') ? 'bg-sky-100 text-sky-900' : 'text-sky-700 hover:text-sky-900 hover:bg-sky-50'}`}
+                        className={`w-full justify-start ${isActive(`/project/${project.id}`, true) ? 'bg-sky-100 text-sky-900' : 'text-sky-700 hover:text-sky-900 hover:bg-sky-50'}`}
                     >
                         <LayoutDashboard className="mr-3 h-4 w-4" />
                         Dashboard
diff --git a/Lb-web/src/features/project/pages/ProjectDatabase.tsx b/Lb-web/src/features/project/pages/ProjectDatabase.tsx
index 0b52703..b13b072 100644
--- a/Lb-web/src/features/project/pages/ProjectDatabase.tsx
+++ b/Lb-web/src/features/project/pages/ProjectDatabase.tsx
@@ -3,7 +3,7 @@ import { useParams } from "react-router";
 import { ProjectSidebar } from "../components/ProjectSidebar";
 import { projectService } from "../services/projectService";
 import { dynamicDBService } from "../services/dynamicDBService";
-import type { ColumnReq } from "../services/dynamicDBService";
+import type { ColumnReq, DynTableDef } from "../services/dynamicDBService";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -16,7 +16,7 @@ import {
     DialogTitle,
     DialogTrigger,
 } from "@/components/ui/dialog";
-import { Plus, Loader2, Database, Table as TableIcon, Trash2 } from "lucide-react";
+import { Plus, Loader2, Database, Table as TableIcon, Trash2, ChevronDown, ChevronRight, Columns } from "lucide-react";
 
 
 export default function ProjectDatabase() {
@@ -26,6 +26,10 @@ export default function ProjectDatabase() {
     const [project, setProject] = useState<{ id: number; name: string } | null>(null);
     const [loadingProject, setLoadingProject] = useState(true);
 
+    // Tables State
+    const [tables, setTables] = useState<DynTableDef[]>([]);
+    const [loadingTables, setLoadingTables] = useState(false);
+
     // Create Table State
     const [createDialogOpen, setCreateDialogOpen] = useState(false);
     const [tableName, setTableName] = useState("");
@@ -37,25 +41,52 @@ export default function ProjectDatabase() {
     const [createLoading, setCreateLoading] = useState(false);
     const [createError, setCreateError] = useState<string | null>(null);
 
-    // Mock Data for Tables (since we don't have a ListTables endpoint yet?)
-    const [tables, setTables] = useState<string[]>([]);
+    // Add Column State
+    const [addColDialogOpen, setAddColDialogOpen] = useState(false);
+    const [selectedTable, setSelectedTable] = useState<DynTableDef | null>(null);
+    const [colsToAdd, setColsToAdd] = useState<ColumnReq[]>([]);
+    const [addColLoading, setAddColLoading] = useState(false);
+
+    // Expand/Collapse State
+    const [expandedTables, setExpandedTables] = useState<Record<number, boolean>>({});
 
 
     useEffect(() => {
-        const fetchProject = async () => {
-            if (!projectId) return;
-            try {
-                const data = await projectService.getProjectById(id!);
-                setProject(data);
-            } catch (error) {
-                console.error("Failed to fetch project", error);
-            } finally {
-                setLoadingProject(false);
-            }
-        };
-        fetchProject();
+        if (projectId) {
+            fetchProject();
+            fetchTables();
+        }
     }, [projectId, id]);
 
+    const fetchProject = async () => {
+        try {
+            const data = await projectService.getProjectById(id!);
+            setProject(data);
+        } catch (error) {
+            console.error("Failed to fetch project", error);
+        } finally {
+            setLoadingProject(false);
+        }
+    };
+
+    const fetchTables = async () => {
+        setLoadingTables(true);
+        try {
+            const data = await dynamicDBService.getTables(projectId);
+            setTables(data);
+        } catch (error) {
+            console.error("Failed to fetch tables", error);
+        } finally {
+            setLoadingTables(false);
+        }
+    };
+
+    const toggleTableExpand = (tableId: number) => {
+        setExpandedTables(prev => ({ ...prev, [tableId]: !prev[tableId] }));
+    };
+
+    // --- Create Table Handlers ---
+
     const handleAddColumnSlot = () => {
         setNewColumns([...newColumns, { name: "", type: "VARCHAR(255)" }]);
     };
@@ -86,11 +117,10 @@ export default function ProjectDatabase() {
                 columns: newColumns
             });
 
-            setTables([...tables, tableName]);
             setCreateDialogOpen(false);
             setTableName("");
             setNewColumns([]);
-            // Success notification?
+            fetchTables(); // Refresh list
         } catch (err: any) {
             console.error("Failed to create table", err);
             setCreateError(err.response?.data?.message || err.message || "Failed to create table");
@@ -99,6 +129,56 @@ export default function ProjectDatabase() {
         }
     };
 
+    // --- Add Column Handlers ---
+
+    const openAddColDialog = (table: DynTableDef) => {
+        setSelectedTable(table);
+        setColsToAdd([{ name: "", type: "VARCHAR(255)" }]);
+        setAddColDialogOpen(true);
+    };
+
+    const handleAddColSlot_Add = () => {
+        setColsToAdd([...colsToAdd, { name: "", type: "VARCHAR(255)" }]);
+    };
+
+    const handleRemoveColSlot_Add = (index: number) => {
+        const updated = [...colsToAdd];
+        updated.splice(index, 1);
+        setColsToAdd(updated);
+    };
+
+    const handleColChange_Add = (index: number, field: keyof ColumnReq, value: string) => {
+        const updated = [...colsToAdd];
+        updated[index] = { ...updated[index], [field]: value };
+        setColsToAdd(updated);
+    };
+
+    const handleAddColumns = async () => {
+        if (!selectedTable) return;
+
+        // Validate
+        if (colsToAdd.some(c => !c.name)) {
+            // simple validation
+            return;
+        }
+
+        setAddColLoading(true);
+        try {
+            await dynamicDBService.addColumn(projectId, selectedTable.id, {
+                table_name: selectedTable.alias, // actually wrapper ignores this for add col usually, but good to have
+                columns: colsToAdd
+            });
+            setAddColDialogOpen(false);
+            setColsToAdd([]);
+            setSelectedTable(null);
+            fetchTables();
+        } catch (err) {
+            console.error("Failed to add columns", err);
+        } finally {
+            setAddColLoading(false);
+        }
+    };
+
 
     if (loadingProject) {
         return <div className="flex h-screen items-center justify-center bg-slate-50"><Loader2 className="animate-spin text-sky-600" /></div>;
@@ -142,7 +222,7 @@ export default function ProjectDatabase() {
                                             <Label htmlFor="tableName">Table Name</Label>
                                             <Input
                                                 id="tableName"
-                                                placeholder="e.g., users, posts, comments"
+                                                placeholder="e.g., users"
                                                 value={tableName}
                                                 onChange={(e) => setTableName(e.target.value)}
                                                 className="border-sky-200 focus-visible:ring-sky-400"
@@ -227,36 +307,152 @@ export default function ProjectDatabase() {
                                     </DialogFooter>
                                 </DialogContent>
                             </Dialog>
-                        </div>
 
-                        {/* Tables List / Grid */}
-                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                            {tables.length > 0 ? (
-                                tables.map((t, i) => (
-                                    <div key={i} className="bg-white rounded-xl border border-sky-100 shadow-sm p-6 hover:shadow-md transition-shadow cursor-pointer group">
-                                        <div className="flex items-center justify-between mb-4">
-                                            <div className="p-3 bg-sky-50 rounded-lg group-hover:bg-sky-100 transition-colors">
-                                                <TableIcon className="h-6 w-6 text-sky-600" />
+                            {/* Add Column Dialog */}
+                            <Dialog open={addColDialogOpen} onOpenChange={setAddColDialogOpen}>
+                                <DialogContent className="sm:max-w-[600px]">
+                                    <DialogHeader>
+                                        <DialogTitle className="text-sky-900">Add Columns to {selectedTable?.alias}</DialogTitle>
+                                        <DialogDescription>
+                                            Add new columns to this table.
+                                        </DialogDescription>
+                                    </DialogHeader>
+                                    <div className="grid gap-6 py-4">
+                                        <div className="space-y-4">
+                                            <div className="flex items-center justify-between">
+                                                <Label>Columns</Label>
+                                                <Button type="button" variant="outline" size="sm" onClick={handleAddColSlot_Add} className="text-sky-600 border-sky-200 hover:bg-sky-50">
+                                                    <Plus className="h-3 w-3 mr-1" /> Add Column
+                                                </Button>
                                             </div>
+
+                                            {colsToAdd.map((col, idx) => (
+                                                <div key={idx} className="flex gap-3 items-end p-3 bg-slate-50 rounded-lg border border-slate-100">
+                                                    <div className="flex-1 space-y-1">
+                                                        <Label className="text-xs">Name</Label>
+                                                        <Input
+                                                            value={col.name}
+                                                            onChange={(e) => handleColChange_Add(idx, "name", e.target.value)}
+                                                            placeholder="col_name"
+                                                            className="h-8 text-sm"
+                                                        />
+                                                    </div>
+                                                    <div className="w-[180px] space-y-1">
+                                                        <Label className="text-xs">Type</Label>
+                                                        <select
+                                                            className="h-8 text-sm w-full rounded-md border border-input bg-background px-3 py-1 ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                                                            value={col.type}
+                                                            onChange={(e) => handleColChange_Add(idx, "type", e.target.value)}
+                                                        >
+                                                            <option value="VARCHAR(255)">VARCHAR(255)</option>
+                                                            <option value="TEXT">TEXT</option>
+                                                            <option value="INT">INT</option>
+                                                            <option value="BOOLEAN">BOOLEAN</option>
+                                                            <option value="TIMESTAMP">TIMESTAMP</option>
+                                                            <option value="DECIMAL(10,2)">DECIMAL</option>
+                                                        </select>
+                                                    </div>
+                                                    <Button
+                                                        type="button"
+                                                        variant="ghost"
+                                                        size="icon"
+                                                        className="h-8 w-8 text-red-500 hover:bg-red-50"
+                                                        onClick={() => handleRemoveColSlot_Add(idx)}
+                                                    >
+                                                        <Trash2 className="h-4 w-4" />
+                                                    </Button>
+                                                </div>
+                                            ))}
                                         </div>
-                                        <h3 className="text-lg font-semibold text-sky-900 mb-2">{t}</h3>
-                                        <p className="text-sm text-sky-500">
-                                            Click to manage columns and data (Coming Soon)
-                                        </p>
                                     </div>
-                                ))
-                            ) : (
-                                <div className="col-span-full flex flex-col items-center justify-center p-12 bg-white/50 backdrop-blur-sm rounded-xl border border-sky-100 border-dashed">
-                                    <div className="p-4 bg-slate-50 rounded-full mb-4">
-                                        <Database className="h-12 w-12 text-slate-300" />
+                                    <DialogFooter>
+                                        <Button
+                                            onClick={handleAddColumns}
+                                            disabled={addColLoading}
+                                            className="bg-sky-600 hover:bg-sky-700 text-white"
+                                        >
+                                            {addColLoading ? (
+                                                <>
+                                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                                    Adding...
+                                                </>
+                                            ) : (
+                                                "Add Columns"
+                                            )}
+                                        </Button>
+                                    </DialogFooter>
+                                </DialogContent>
+                            </Dialog>
+                        </div>
+
+                        {/* Tables List */}
+                        {loadingTables ? (
+                            <div className="flex justify-center p-12">
+                                <Loader2 className="h-8 w-8 animate-spin text-sky-600" />
+                            </div>
+                        ) : tables.length > 0 ? (
+                            <div className="grid gap-4">
+                                {tables.map((t) => (
+                                    <div key={t.id} className="bg-white rounded-xl border border-sky-100 shadow-sm overflow-hidden animate-in fade-in slide-in-from-bottom-2 duration-300">
+                                        <div
+                                            className="p-4 flex items-center justify-between bg-sky-50/50 hover:bg-sky-50 transition-colors cursor-pointer"
+                                            onClick={() => toggleTableExpand(t.id)}
+                                        >
+                                            <div className="flex items-center space-x-3">
+                                                <div className="p-2 bg-sky-100/50 rounded-lg text-sky-600">
+                                                    <TableIcon className="h-5 w-5" />
+                                                </div>
+                                                <div>
+                                                    <h3 className="font-semibold text-sky-900">{t.alias}</h3>
+                                                    <p className="text-xs text-sky-500 font-mono">{t.name}</p>
+                                                </div>
+                                            </div>
+                                            <div className="flex items-center space-x-2">
+                                                <Button size="sm" variant="ghost" className="text-sky-600" onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    openAddColDialog(t);
+                                                }}>
+                                                    <Plus className="h-4 w-4 mr-1" /> Add Column
+                                                </Button>
+                                                {expandedTables[t.id] ? <ChevronDown className="h-5 w-5 text-sky-400" /> : <ChevronRight className="h-5 w-5 text-sky-400" />}
+                                            </div>
+                                        </div>
+
+                                        {/* Columns View */}
+                                        {expandedTables[t.id] && (
+                                            <div className="p-4 border-t border-sky-100 bg-slate-50/50">
+                                                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+                                                    {t.columns?.map((col) => (
+                                                        <div key={col.id} className="bg-white p-3 rounded-lg border border-sky-100 flex items-center justify-between group hover:border-sky-300 transition-colors">
+                                                            <div className="flex items-center space-x-2 truncate">
+                                                                <Columns className="h-4 w-4 text-slate-400" />
+                                                                <span className="text-sm font-medium text-slate-700 truncate" title={col.name}>{col.name}</span>
+                                                            </div>
+                                                            <span className="text-xs px-2 py-1 bg-slate-100 text-slate-500 rounded-md font-mono">{col.data_type}</span>
+                                                        </div>
+                                                    ))}
+                                                    {(!t.columns || t.columns.length === 0) && (
+                                                        <div className="col-span-full text-sm text-slate-400 italic text-center py-2">
+                                                            No custom columns defined.
+                                                        </div>
+                                                    )}
+                                                </div>
+                                            </div>
+                                        )}
                                     </div>
-                                    <h3 className="text-lg font-medium text-slate-900">No tables found</h3>
-                                    <p className="text-slate-500 max-w-sm text-center">
-                                        Create your first table to start storing data in your project.
-                                    </p>
+                                ))}
+                            </div>
+                        ) : (
+                            <div className="col-span-full flex flex-col items-center justify-center p-12 bg-white/50 backdrop-blur-sm rounded-xl border border-sky-100 border-dashed">
+                                <div className="p-4 bg-slate-50 rounded-full mb-4">
+                                    <Database className="h-12 w-12 text-slate-300" />
                                 </div>
-                            )}
-                        </div>
+                                <h3 className="text-lg font-medium text-slate-900">No tables found</h3>
+                                <p className="text-slate-500 max-w-sm text-center">
+                                    Create your first table to start storing data in your project.
+                                </p>
+                            </div>
+                        )}
 
                         {/* Info Note */}
                         <div className="bg-blue-50 border border-blue-100 rounded-lg p-4 text-sm text-blue-700">
diff --git a/Lb-web/src/features/project/services/dynamicDBService.ts b/Lb-web/src/features/project/services/dynamicDBService.ts
index 25805a0..c317213 100644
--- a/Lb-web/src/features/project/services/dynamicDBService.ts
+++ b/Lb-web/src/features/project/services/dynamicDBService.ts
@@ -16,8 +16,28 @@ export const dynamicDBService = {
         return response.data;
     },
 
-    addColumn: async (projectId: number, data: DDLTableReq) => {
-        const response = await api.post(`/protected/project/manage/create/col/${projectId}`, data);
+    addColumn: async (projectId: number, tableId: number, data: DDLTableReq) => {
+        const response = await api.post(`/protected/project/manage/create/col/${projectId}/${tableId}`, data);
         return response.data;
+    },
+
+    getTables: async (projectId: number): Promise<DynTableDef[]> => {
+        const response = await api.get(`/protected/project/${projectId}/tables`);
+        return response.data.data;
     }
 };
+
+export interface DynColDef {
+    id: number;
+    dyn_table_def_id: number;
+    name: string;
+    data_type: string;
+}
+
+export interface DynTableDef {
+    id: number;
+    project_id: number;
+    name: string;
+    alias: string;
+    columns: DynColDef[];
+}
diff --git a/cmd/server/main.go b/cmd/server/main.go
index b6393a4..c363732 100644
--- a/cmd/server/main.go
+++ b/cmd/server/main.go
@@ -65,7 +65,7 @@ func SetupApp(db *repository.DBContainer, cfg *config.Config) Routes.Deps {
 	projectHandler := handlers.NewProjectHandler(projectService)
 
 	dynamicDBRepo := repository.NewDynamicDB(db)
-	dynamicDBService := services.NewDynamicDBService(dynamicDBRepo)
+	dynamicDBService := services.NewDynamicDBService(dynamicDBRepo, db)
 	dynamicDBHandler := handlers.NewDynamicDBHandler(dynamicDBService)
 
 	return Routes.Deps{