diff --git a/Internal/adapters/repository/dynamicDBRepo.go b/Internal/adapters/repository/dynamicDBRepo.go
new file mode 100644
index 0000000..36f0081
--- /dev/null
+++ b/Internal/adapters/repository/dynamicDBRepo.go
@@ -0,0 +1,45 @@
+package repository
+
+import (
+	"github.com/Arjuna-Ragil/Localbase/Internal/core/domain"
+	"gorm.io/gorm"
+)
+
+type DynamicDBRepo struct {
+	DB *DBContainer
+}
+
+func NewDynamicDB(db *DBContainer) *DynamicDBRepo {
+	return &DynamicDBRepo{DB: db}
+}
+
+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 e1974f5..3ba08a8 100644
--- a/Internal/adapters/repository/postgres.go
+++ b/Internal/adapters/repository/postgres.go
@@ -41,6 +41,10 @@ func (db *DBContainer) Migrate() error {
 	err := db.Gorm.AutoMigrate(
 		&domain.User{},
 		&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/adapters/repository/projectRepo.go b/Internal/adapters/repository/projectRepo.go
new file mode 100644
index 0000000..15d8a51
--- /dev/null
+++ b/Internal/adapters/repository/projectRepo.go
@@ -0,0 +1,58 @@
+package repository
+
+import (
+	"github.com/Arjuna-Ragil/Localbase/Internal/core/domain"
+)
+
+type ProjectRepo struct {
+	DB *DBContainer
+}
+
+func NewProjectRepo(db *DBContainer) *ProjectRepo {
+	return &ProjectRepo{DB: db}
+}
+
+func (pr *ProjectRepo) CreateProject(project *domain.Project) (*domain.Project, error) {
+	if err := pr.DB.Gorm.Create(project).Error; err != nil {
+		return nil, err
+	}
+	return project, nil
+}
+
+func (pr *ProjectRepo) FetchProjects(projects []domain.Project) ([]domain.Project, error) {
+	if err := pr.DB.Gorm.Find(&projects).Error; err != nil {
+		return nil, err
+	}
+	return projects, nil
+}
+
+func (pr *ProjectRepo) ProjectById(id string) (*domain.Project, error) {
+	var project domain.Project
+	if err := pr.DB.Gorm.Preload("ProjectUsers.User").First(&project, id).Error; err != nil {
+		return nil, err
+	}
+	return &project, nil
+}
+
+func (pr *ProjectRepo) InviteProject(projectuser *domain.ProjectUser) (*domain.ProjectUser, error) {
+	if err := pr.DB.Gorm.Create(projectuser).Error; err != nil {
+		return nil, err
+	}
+	return projectuser, nil
+}
+
+func (pr *ProjectRepo) ProjectUserCheck(userID uint) (*domain.ProjectUser, error) {
+	var projectuser domain.ProjectUser
+	if err := pr.DB.Gorm.First(&projectuser, userID).Error; err != nil {
+		return nil, err
+	}
+	return &projectuser, nil
+}
+
+func (pr *ProjectRepo) RemoveProjectUser(id uint) error {
+	var projectuser domain.ProjectUser
+	if err := pr.DB.Gorm.Delete(&projectuser, id).Error; err != nil {
+		return err
+	}
+	return nil
+}
diff --git a/Internal/adapters/repository/userRepo.go b/Internal/adapters/repository/userRepo.go
index e965fbd..0015945 100644
--- a/Internal/adapters/repository/userRepo.go
+++ b/Internal/adapters/repository/userRepo.go
@@ -17,12 +17,21 @@ func NewUserRepository(db *DBContainer) *UserRepository {
 // Query
 
 func (ur *UserRepository) save(user *domain.User) error {
+
 	return ur.db.Gorm.Create(user).Error
 }
 
 func (ur *UserRepository) FindById(id uint) (*domain.User, error) {
 	var user domain.User
-	err := ur.db.Gorm.First(&user, id).Error
+	if err := ur.db.Gorm.Preload("Projects.Project").First(&user, id).Error; err != nil {
+		return nil, err
+	}
+	return &user, nil
+}
+
+func (ur *UserRepository) FindByEmail(email string) (*domain.User, error) {
+	var user domain.User
+	err := ur.db.Gorm.Where("email = ?", email).First(&user).Error
 	if err != nil {
 		return nil, err
 	}
diff --git a/Internal/api/Routes/routev1.go b/Internal/api/Routes/routev1.go
index 2a50cb8..d1e070f 100644
--- a/Internal/api/Routes/routev1.go
+++ b/Internal/api/Routes/routev1.go
@@ -9,11 +9,13 @@ import (
 )
 
 type Deps struct {
-	User     *handlers.UserHandler
-	Auth     *handlers.AuthHandler
-	System   *handlers.SystemHandler
-	UserRepo *repository.UserRepository
-	Config   *config.Config
+	User      *handlers.UserHandler
+	Auth      *handlers.AuthHandler
+	System    *handlers.SystemHandler
+	Project   *handlers.ProjectHandler
+	DynamicDB *handlers.DynamicDBHandler
+	UserRepo  *repository.UserRepository
+	Config    *config.Config
 }
 
 func SetupRouterV1(r *gin.Engine, deps Deps) {
@@ -45,6 +47,21 @@ func SetupRouterV1(r *gin.Engine, deps Deps) {
 				admin.POST("/invite", deps.Auth.CreateInviteHandler)
 				admin.GET("/alluser", deps.User.AllUserHandler)
 				admin.PUT("/updaterole", deps.User.UpdateRoleHandler)
+				admin.POST("/createproject", deps.Project.CreateProjectHandler)
+			}
+			project := protected.Group("/project")
+			{
+				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/:tableid", deps.DynamicDB.AddDynamicColHandler)
+				}
 			}
 		}
 	}
diff --git a/Internal/api/handlers/dynamicDBHandler.go b/Internal/api/handlers/dynamicDBHandler.go
new file mode 100644
index 0000000..493999a
--- /dev/null
+++ b/Internal/api/handlers/dynamicDBHandler.go
@@ -0,0 +1,119 @@
+package handlers
+
+import (
+	"strconv"
+
+	"github.com/Arjuna-Ragil/Localbase/Internal/core/services"
+	"github.com/gin-gonic/gin"
+)
+
+type DynamicDBHandler struct {
+	Serv *services.DynamicDBService
+}
+
+func NewDynamicDBHandler(serv *services.DynamicDBService) *DynamicDBHandler {
+	return &DynamicDBHandler{Serv: serv}
+}
+
+func (dh *DynamicDBHandler) CreateDynamicDBHandler(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
+	}
+	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(DynTable.ID, 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
+	}
+	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{
+			"message": "Invalid json body",
+			"error":   err.Error(),
+		})
+		return
+	}
+	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(),
+		})
+		return
+	}
+	c.JSON(200, gin.H{
+		"message": "Successfully added dynamic col",
+		"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/api/handlers/projectHandler.go b/Internal/api/handlers/projectHandler.go
new file mode 100644
index 0000000..e302d32
--- /dev/null
+++ b/Internal/api/handlers/projectHandler.go
@@ -0,0 +1,140 @@
+package handlers
+
+import (
+	"strconv"
+
+	"github.com/Arjuna-Ragil/Localbase/Internal/core/services"
+	"github.com/gin-gonic/gin"
+)
+
+type ProjectHandler struct {
+	ProjectService *services.ProjectService
+}
+
+func NewProjectHandler(projectService *services.ProjectService) *ProjectHandler {
+	return &ProjectHandler{ProjectService: projectService}
+}
+
+func (ph *ProjectHandler) CreateProjectHandler(c *gin.Context) {
+	var input services.CreateInput
+	userRole, _ := c.Get("userRole")
+	if userRole != "admin" {
+		c.JSON(401, gin.H{
+			"message": "You are not authorized to perform this action",
+			"data":    nil,
+		})
+		return
+	}
+	err := c.ShouldBindJSON(&input)
+	if err != nil {
+		c.JSON(400, gin.H{
+			"message": "Invalid input",
+			"data":    err.Error(),
+		})
+		return
+	}
+
+	project, err := ph.ProjectService.CreateProject(&input)
+	if err != nil {
+		c.JSON(500, gin.H{
+			"message": "failed to create project",
+			"data":    err.Error(),
+		})
+		return
+	}
+	c.JSON(200, gin.H{
+		"message": "successfully created project",
+		"data":    project,
+	})
+}
+
+func (ph *ProjectHandler) GetAllProjectHandler(c *gin.Context) {
+	userRole := c.GetString("userRole")
+	projects, err := ph.ProjectService.GetProjects(userRole)
+	if err != nil {
+		c.JSON(500, gin.H{
+			"message": "failed to get projects",
+			"data":    err.Error(),
+		})
+		return
+	}
+	c.JSON(200, gin.H{
+		"message": "got all projects",
+		"data":    projects,
+	})
+}
+
+func (ph *ProjectHandler) GetProjectHandler(c *gin.Context) {
+	projectId := c.Param("projectid")
+	project, err := ph.ProjectService.GetProjectById(projectId)
+	if err != nil {
+		c.JSON(500, gin.H{
+			"message": "failed to get project",
+			"data":    err.Error(),
+		})
+		return
+	}
+	c.JSON(200, gin.H{
+		"message": "success in fetching project",
+		"data":    project,
+	})
+}
+
+func (ph *ProjectHandler) InviteProjectHandler(c *gin.Context) {
+	projectIDStr := c.Param("projectid")
+	projectID, err := strconv.Atoi(projectIDStr)
+	if err != nil {
+		c.JSON(400, gin.H{
+			"message": "Invalid Project ID",
+			"error":   err.Error(),
+		})
+		return
+	}
+	userRole := c.GetString("userRole")
+	userID := c.GetUint("userId")
+	var input services.InviteProjectInput
+	if err := c.ShouldBindJSON(&input); err != nil {
+		c.JSON(400, gin.H{
+			"message": "Invalid input",
+			"data":    err.Error(),
+		})
+		return
+	}
+	invite, err := ph.ProjectService.InviteProject(&input, userRole, userID, uint(projectID))
+	if err != nil {
+		c.JSON(500, gin.H{
+			"message": "failed to invite project",
+			"data":    err.Error(),
+		})
+		return
+	}
+	c.JSON(200, gin.H{
+		"message": "successfully invited project",
+		"data":    invite,
+	})
+}
+
+func (ph *ProjectHandler) RemoveProjectUserHandler(c *gin.Context) {
+	projectUserSTR := c.Param("projuserid")
+	projectUserID, err := strconv.Atoi(projectUserSTR)
+	if err != nil {
+		c.JSON(400, gin.H{
+			"message": "Invalid Project ID",
+			"error":   err.Error(),
+		})
+		return
+	}
+	userRole := c.GetString("userRole")
+	userID := c.GetUint("userId")
+	if err := ph.ProjectService.DeleteProjectUser(uint(projectUserID), userRole, userID); err != nil {
+		c.JSON(500, gin.H{
+			"message": "failed to remove project user",
+			"data":    err.Error(),
+		})
+		return
+	}
+	c.JSON(200, gin.H{
+		"message": "successfully removed project user",
+		"data":    nil,
+	})
+}
diff --git a/Internal/api/handlers/userHandler.go b/Internal/api/handlers/userHandler.go
index 26fb067..679ebf8 100644
--- a/Internal/api/handlers/userHandler.go
+++ b/Internal/api/handlers/userHandler.go
@@ -60,14 +60,14 @@ func (uh *UserHandler) AllUserHandler(c *gin.Context) {
 
 func (uh *UserHandler) UpdateRoleHandler(c *gin.Context) {
 	var input services.RoleInput
-	//userRole, _ := c.Get("userRole")
-	//if userRole != "admin" {
-	//	c.JSON(400, gin.H{
-	//		"message": "Not allowed to update role",
-	//		"data":    false,
-	//	})
-	//	return
-	//}
+	userRole, _ := c.Get("userRole")
+	if userRole != "admin" {
+		c.JSON(400, gin.H{
+			"message": "Not allowed to update role",
+			"data":    false,
+		})
+		return
+	}
 	if err := c.ShouldBindJSON(&input); err != nil {
 		c.JSON(400, gin.H{
 			"message": "input not valid",
diff --git a/Internal/api/middleware/auth.go b/Internal/api/middleware/auth.go
index d9a6038..e77d2e4 100644
--- a/Internal/api/middleware/auth.go
+++ b/Internal/api/middleware/auth.go
@@ -14,7 +14,8 @@ import (
 func AuthMiddleware(userRepo *repository.UserRepository, cfg *config.Config) gin.HandlerFunc {
 	return func(c *gin.Context) {
 		if cfg.AuthMode == "false" {
-			c.Set("userID", 1)
+			c.Set("userID", uint(1))
+			c.Set("userRole", "admin")
 			c.Next()
 			return
 		}
@@ -26,6 +27,7 @@ func AuthMiddleware(userRepo *repository.UserRepository, cfg *config.Config) gin
 					"message": "Authorization header not found",
 					"data":    err.Error(),
 				})
+				c.Abort()
 				return
 			}
 			parts := strings.Split(authHeader, " ")
@@ -69,7 +71,7 @@ func AuthMiddleware(userRepo *repository.UserRepository, cfg *config.Config) gin
 				return
 			}
 
-			c.Set("userID", user.Id)
+			c.Set("userID", user.ID)
 			c.Set("userRole", user.Role)
 			c.Next()
 
diff --git a/Internal/core/domain/projectdb.go b/Internal/core/domain/projectdb.go
new file mode 100644
index 0000000..081e42d
--- /dev/null
+++ b/Internal/core/domain/projectdb.go
@@ -0,0 +1,37 @@
+package domain
+
+import "time"
+
+type Project struct {
+	ID           uint          `gorm:"primaryKey;autoIncrement" json:"id"`
+	Name         string        `gorm:"size:255;not null" json:"name"`
+	Desc         string        `gorm:"size:255;" json:"desc"`
+	AdminID      uint          `json:"admin_id"`
+	ProjectUsers []ProjectUser `json:"project_users,omitempty"`
+	CreatedAt    time.Time     `gorm:"default:CURRENT_TIMESTAMP" json:"created_at"`
+}
+
+type ProjectUser struct {
+	ID        uint      `gorm:"primaryKey;autoIncrement" json:"id"`
+	ProjectID uint      `json:"project_id"`
+	UserID    uint      `json:"user_id"`
+	Project   *Project  `json:"project,omitempty"`
+	User      *User     `json:"user,omitempty"`
+	Role      string    `gorm:"size:255;not null" json:"role"`
+	CreatedAt time.Time `gorm:"default:CURRENT_TIMESTAMP" json:"created_at"`
+}
+
+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"`
+	Columns   []DynColDef `gorm:"foreignKey:DynTableDefID" json:"columns"`
+}
+
+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/domain/userdb.go b/Internal/core/domain/userdb.go
index 110598d..e117373 100644
--- a/Internal/core/domain/userdb.go
+++ b/Internal/core/domain/userdb.go
@@ -8,15 +8,18 @@ import (
 )
 
 type User struct {
-	Id        uint      `gorm:"primary_key;AUTO_INCREMENT" json:"id"`
-	Email     string    `gorm:"size:255;unique;not null" json:"email"`
-	Password  string    `json:"-"`
-	Username  string    `gorm:"size:255;unique;not null" json:"username"`
-	Role      string    `gorm:"size:255;not null" json:"role"`
-	CreatedAt time.Time `gorm:"default:CURRENT_TIMESTAMP" json:"created_at"`
-	UpdatedAt time.Time `gorm:"default:CURRENT_TIMESTAMP" json:"updated_at"`
+	ID        uint          `gorm:"primaryKey;autoIncrement" json:"id"`
+	Email     string        `gorm:"size:255;unique;not null" json:"email"`
+	Password  string        `json:"-"`
+	Username  string        `gorm:"size:255;unique;not null" json:"username"`
+	Role      string        `gorm:"size:255;not null" json:"role"`
+	Projects  []ProjectUser `json:"projects"`
+	CreatedAt time.Time     `gorm:"default:CURRENT_TIMESTAMP" json:"created_at"`
+	UpdatedAt time.Time     `gorm:"default:CURRENT_TIMESTAMP" json:"updated_at"`
 }
 
+//last chnages savepoint
+
 func (u *User) BeforeCreate(tx *gorm.DB) (err error) {
 	if len(u.Password) < 50 {
 		hashed, err := bcrypt.GenerateFromPassword([]byte(u.Password), bcrypt.DefaultCost)
diff --git a/Internal/core/services/authService.go b/Internal/core/services/authService.go
index 8c7145f..17506d2 100644
--- a/Internal/core/services/authService.go
+++ b/Internal/core/services/authService.go
@@ -95,7 +95,7 @@ func (as *AuthService) LoginService(input *LoginInput) (string, error) {
 		return "", err
 	}
 	token := jwt.NewWithClaims(jwt.SigningMethodHS256, jwt.MapClaims{
-		"sub": user.Id,
+		"sub": user.ID,
 		"exp": time.Now().Add(time.Hour * 48).Unix(),
 	})
 	tokenString, err := token.SignedString([]byte(cfg.SecretKey))
diff --git a/Internal/core/services/dynamicDBService.go b/Internal/core/services/dynamicDBService.go
new file mode 100644
index 0000000..f0f8166
--- /dev/null
+++ b/Internal/core/services/dynamicDBService.go
@@ -0,0 +1,128 @@
+package services
+
+import (
+	"fmt"
+	"regexp"
+	"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, db *repository.DBContainer) *DynamicDBService {
+	return &DynamicDBService{Repo: repo, DB: db}
+}
+
+type ColumnReq struct {
+	Name string `json:"name"`
+	Type string `json:"type"`
+}
+
+type DDLTableReq struct {
+	TableName string      `json:"table_name"`
+	Columns   []ColumnReq `json:"columns"`
+}
+
+func sanitizeInput(input string) string {
+	result := strings.ToLower(input)
+	result = strings.ReplaceAll(result, " ", "_")
+	reg := regexp.MustCompile("[^a-z0-9_]+")
+	result = reg.ReplaceAllString(result, "")
+	return result
+}
+
+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, ")
+	queryBuilder.WriteString("created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, ")
+
+	query := queryBuilder.String()
+	query = strings.TrimSuffix(query, ", ")
+	query += ");"
+
+	fmt.Println(query)
+	if err = ds.Repo.RunDynamicQuery(tx, query); err != nil {
+		tx.Rollback()
+		return nil, err
+	}
+	return DynTable, tx.Commit().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 {
+		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)
+		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(", ")
+		}
+	}
+	queryBuilder.WriteString(";")
+	query := queryBuilder.String()
+
+	if err := ds.Repo.RunDynamicQuery(tx, query); err != nil {
+		return err
+	}
+	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/Internal/core/services/projectService.go b/Internal/core/services/projectService.go
new file mode 100644
index 0000000..aec2a14
--- /dev/null
+++ b/Internal/core/services/projectService.go
@@ -0,0 +1,103 @@
+package services
+
+import (
+	"errors"
+
+	"github.com/Arjuna-Ragil/Localbase/Internal/adapters/repository"
+	"github.com/Arjuna-Ragil/Localbase/Internal/core/domain"
+)
+
+type ProjectService struct {
+	ProjectRepo *repository.ProjectRepo
+	UserRepo    *repository.UserRepository
+}
+
+func NewProjectService(project *repository.ProjectRepo, user *repository.UserRepository) *ProjectService {
+	return &ProjectService{ProjectRepo: project, UserRepo: user}
+}
+
+type CreateInput struct {
+	Name    string `json:"name"`
+	Desc    string `json:"desc"`
+	AdminID uint   `json:"admin_id"`
+}
+
+type InviteProjectInput struct {
+	Email string `json:"email"`
+	Role  string `json:"role"`
+}
+
+func (ps *ProjectService) CreateProject(input *CreateInput) (*domain.Project, error) {
+	projectInfo := domain.Project{
+		Name:    input.Name,
+		Desc:    input.Desc,
+		AdminID: input.AdminID,
+	}
+	project, err := ps.ProjectRepo.CreateProject(&projectInfo)
+	if err != nil {
+		return nil, err
+	}
+	return project, nil
+}
+
+func (ps *ProjectService) GetProjects(Role string) ([]domain.Project, error) {
+	if Role != "admin" {
+		return nil, errors.New("permission denied")
+	}
+	var projects []domain.Project
+	project, err := ps.ProjectRepo.FetchProjects(projects)
+	if err != nil {
+		return nil, err
+	}
+	return project, nil
+}
+
+func (ps *ProjectService) GetProjectById(id string) (*domain.Project, error) {
+	project, err := ps.ProjectRepo.ProjectById(id)
+	if err != nil {
+		return nil, err
+	}
+	return project, nil
+}
+
+func (ps *ProjectService) InviteProject(input *InviteProjectInput, Role string, userID uint, projectID uint) (*domain.ProjectUser, error) {
+	if Role != "admin" {
+		prorole, err := ps.ProjectRepo.ProjectUserCheck(userID)
+		if err != nil {
+			return nil, errors.New("user is not part of project")
+		}
+		if prorole.Role != "lead" {
+			return nil, errors.New("permission denied")
+		}
+	}
+	user, err := ps.UserRepo.FindByEmail(input.Email)
+	if err != nil {
+		return nil, err
+	}
+	var inviteInfo = domain.ProjectUser{
+		ProjectID: projectID,
+		UserID:    user.ID,
+		Role:      input.Role,
+	}
+	project, err := ps.ProjectRepo.InviteProject(&inviteInfo)
+	if err != nil {
+		return nil, err
+	}
+	return project, nil
+}
+
+func (ps *ProjectService) DeleteProjectUser(id uint, Role string, userID uint) error {
+	if Role != "admin" {
+		prorole, err := ps.ProjectRepo.ProjectUserCheck(userID)
+		if err != nil {
+			return errors.New("user is not part of project")
+		}
+		if prorole.Role != "lead" {
+			return errors.New("permission denied")
+		}
+	}
+	if err := ps.ProjectRepo.RemoveProjectUser(id); err != nil {
+		return err
+	}
+	return nil
+}
diff --git a/Lb-web/src/components/ui/textarea.tsx b/Lb-web/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..87c2072
--- /dev/null
+++ b/Lb-web/src/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+    extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { }
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+    ({ className, ...props }, ref) => {
+        return (
+            <textarea
+                className={cn(
+                    "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                    className
+                )}
+                ref={ref}
+                {...props}
+            />
+        )
+    }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/Lb-web/src/features/Login/context/AuthContext.tsx b/Lb-web/src/features/Login/context/AuthContext.tsx
index f083f77..e42c51d 100644
--- a/Lb-web/src/features/Login/context/AuthContext.tsx
+++ b/Lb-web/src/features/Login/context/AuthContext.tsx
@@ -1,8 +1,27 @@
 import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
 import api from "@/services/api";
 
+interface User {
+    id: number;
+    username: string;
+    email: string;
+    role: string;
+    projects?: {
+        id: number;
+        project_id: number;
+        role: string;
+        project?: {
+            id: number;
+            name: string;
+            desc: string;
+            created_at: string;
+        };
+    }[];
+}
+
 interface AuthContextType {
     isAuthenticated: boolean | null;
+    user: User | null;
     role: string | null;
     loading: boolean;
     login: () => void; // call this after successful login to update state
@@ -13,6 +32,7 @@ const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
 export function AuthProvider({ children }: { children: ReactNode }) {
     const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
+    const [user, setUser] = useState<User | null>(null);
     const [role, setRole] = useState<string | null>(null);
     const [loading, setLoading] = useState(true);
 
@@ -20,9 +40,11 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         try {
             const response = await api.get('/protected/user/me');
             setIsAuthenticated(true);
+            setUser(response.data.data);
             setRole(response.data.data.role);
         } catch {
             setIsAuthenticated(false);
+            setUser(null);
             setRole(null);
         } finally {
             setLoading(false);
@@ -45,12 +67,13 @@ export function AuthProvider({ children }: { children: ReactNode }) {
             console.error("Logout failed", error);
         } finally {
             setIsAuthenticated(false);
+            setUser(null);
             setRole(null);
         }
     };
 
     return (
-        <AuthContext.Provider value={{ isAuthenticated, role, loading, login, logout }}>
+        <AuthContext.Provider value={{ isAuthenticated, user, role, loading, login, logout }}>
             {children}
         </AuthContext.Provider>
     );
diff --git a/Lb-web/src/features/project/components/CreateProjectModal.tsx b/Lb-web/src/features/project/components/CreateProjectModal.tsx
new file mode 100644
index 0000000..c127db2
--- /dev/null
+++ b/Lb-web/src/features/project/components/CreateProjectModal.tsx
@@ -0,0 +1,109 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "../../../components/ui/textarea";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { useAuth } from "@/features/Login/context/AuthContext";
+import { projectService } from "@/features/project/services/projectService";
+import { Loader2 } from "lucide-react";
+
+interface CreateProjectModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSuccess: () => void;
+}
+
+export function CreateProjectModal({ isOpen, onClose, onSuccess }: CreateProjectModalProps) {
+    const { user } = useAuth();
+    const [name, setName] = useState("");
+    const [desc, setDesc] = useState("");
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError(null);
+
+        if (!user) {
+            setError("User not found");
+            return;
+        }
+
+        setIsLoading(true);
+
+        try {
+            await projectService.createProject({
+                name,
+                desc,
+                admin_id: user.id
+            });
+            onSuccess();
+            onClose();
+            // Reset form
+            setName("");
+            setDesc("");
+        } catch (err: any) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            setError((err as any).response?.data?.message || "Failed to create project");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <Dialog open={isOpen} onOpenChange={onClose}>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>Create New Project</DialogTitle>
+                    <DialogDescription>
+                        Enter the details for your new project. Click create when you're done.
+                    </DialogDescription>
+                </DialogHeader>
+                <form onSubmit={handleSubmit}>
+                    <div className="grid gap-4 py-4">
+                        <div className="grid grid-cols-4 items-center gap-4">
+                            <Label htmlFor="name" className="text-right">
+                                Name
+                            </Label>
+                            <Input
+                                id="name"
+                                value={name}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
+                                className="col-span-3"
+                                placeholder="My Awesome Project"
+                                required
+                            />
+                        </div>
+                        <div className="grid grid-cols-4 items-center gap-4">
+                            <Label htmlFor="desc" className="text-right">
+                                Description
+                            </Label>
+                            <Textarea
+                                id="desc"
+                                value={desc}
+                                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setDesc(e.target.value)}
+                                className="col-span-3"
+                                placeholder="A brief description..."
+                            />
+                        </div>
+                        {error && (
+                            <div className="text-red-500 text-sm text-center">
+                                {error}
+                            </div>
+                        )}
+                    </div>
+                    <DialogFooter>
+                        <Button type="button" variant="outline" onClick={onClose} disabled={isLoading}>
+                            Cancel
+                        </Button>
+                        <Button type="submit" disabled={isLoading}>
+                            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                            Create Project
+                        </Button>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/Lb-web/src/features/project/components/ProjectSidebar.tsx b/Lb-web/src/features/project/components/ProjectSidebar.tsx
new file mode 100644
index 0000000..6f804bc
--- /dev/null
+++ b/Lb-web/src/features/project/components/ProjectSidebar.tsx
@@ -0,0 +1,81 @@
+import { Link, useLocation } from "react-router";
+import { Button } from "@/components/ui/button";
+import { LayoutDashboard, Settings, ArrowLeft, Database } from "lucide-react";
+
+interface ProjectSidebarProps {
+    project: {
+        id: number;
+        name: string;
+    };
+}
+
+export function ProjectSidebar({ project }: ProjectSidebarProps) {
+    const location = useLocation();
+
+    const isActive = (path: string, exact = false) => {
+        if (exact) {
+            return location.pathname === path;
+        }
+        return location.pathname === path || location.pathname.startsWith(`${path}/`);
+    };
+
+    return (
+        <aside className="w-64 border-r border-sky-100 bg-white/50 backdrop-blur-md flex flex-col h-full z-20">
+            {/* Project Header */}
+            <div className="p-6 border-b border-sky-100">
+                <div className="flex items-center space-x-3 mb-1">
+                    <div className="h-10 w-10 bg-sky-100 rounded-lg flex items-center justify-center text-sky-600">
+                        <Database className="h-6 w-6" />
+                    </div>
+                    <div>
+                        <h2 className="font-bold text-sky-900 truncate max-w-[140px]" title={project.name}>
+                            {project.name}
+                        </h2>
+                        <span className="text-xs text-sky-500 font-medium">Project</span>
+                    </div>
+                </div>
+            </div>
+
+            {/* Navigation */}
+            <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
+                <Link to={`/project/${project.id}`}>
+                    <Button
+                        variant="ghost"
+                        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
+                    </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"
+                        className={`w-full justify-start ${isActive(`/project/${project.id}/settings/members`) ? 'bg-sky-100 text-sky-900' : 'text-sky-700 hover:text-sky-900 hover:bg-sky-50'}`}
+                    >
+                        <Settings className="mr-3 h-4 w-4" />
+                        Members
+                    </Button>
+                </Link>
+            </nav>
+
+            {/* Footer */}
+            <div className="p-4 border-t border-sky-100">
+                <Link to="/">
+                    <Button variant="ghost" className="w-full justify-start text-sky-600 hover:text-sky-800 hover:bg-sky-50">
+                        <ArrowLeft className="mr-3 h-4 w-4" />
+                        Back to Home
+                    </Button>
+                </Link>
+            </div>
+        </aside>
+    );
+}
diff --git a/Lb-web/src/features/project/pages/ProjectDashboard.tsx b/Lb-web/src/features/project/pages/ProjectDashboard.tsx
new file mode 100644
index 0000000..19456e2
--- /dev/null
+++ b/Lb-web/src/features/project/pages/ProjectDashboard.tsx
@@ -0,0 +1,100 @@
+import { useEffect, useState } from "react";
+import { useParams, Link } from "react-router";
+import { projectService } from "../services/projectService";
+import { ProjectSidebar } from "../components/ProjectSidebar";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+
+
+export default function ProjectDashboard() {
+    const { id } = useParams<{ id: string }>();
+    const [project, setProject] = useState<{ id: number; name: string; desc: string; created_at: string } | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        const fetchProject = async () => {
+            if (!id) return;
+            setIsLoading(true);
+            try {
+                const data = await projectService.getProjectById(id);
+                setProject(data);
+            } catch (err: any) { // eslint-disable-line @typescript-eslint/no-explicit-any
+                setError("Failed to load project details.");
+                console.error(err);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchProject();
+    }, [id]);
+
+    if (isLoading) {
+        return (
+            <div className="flex items-center justify-center h-screen bg-slate-50">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-sky-600"></div>
+            </div>
+        );
+    }
+
+    if (error || !project) {
+        return (
+            <div className="flex flex-col items-center justify-center h-screen bg-slate-50">
+                <h2 className="text-2xl font-bold text-sky-900 mb-4">{error || "Project not found"}</h2>
+                <Link to="/">
+                    <Button variant="outline">
+                        <ArrowLeft className="mr-2 h-4 w-4" />
+                        Back to Home
+                    </Button>
+                </Link>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex w-full h-screen bg-slate-50 relative overflow-hidden">
+            {/* Subtle Background */}
+            <div className="absolute inset-0 bg-[linear-gradient(to_right,#e0f2fe_1px,transparent_1px),linear-gradient(to_bottom,#e0f2fe_1px,transparent_1px)] bg-size-[24px_24px] mask-[radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] opacity-90 pointer-events-none z-0"></div>
+
+            <ProjectSidebar project={project} />
+
+            <main className="flex-1 flex flex-col h-full z-10 overflow-hidden">
+                {/* Top Bar / Header (Optional, maybe just for user profile or breadcrumbs) */}
+                <header className="flex items-center justify-end px-6 py-4 bg-white/30 backdrop-blur-md border-b border-sky-100 z-10 shrink-0">
+                    {/* Can add User Profile dropdown here if needed, keeping it simple for now */}
+                    <div className="text-sm text-sky-600 italic">
+                        Dashboard
+                    </div>
+                </header>
+
+                <div className="flex-1 overflow-y-auto p-8">
+                    <div className="max-w-5xl mx-auto">
+                        <div className="bg-white/60 backdrop-blur-sm p-8 rounded-2xl shadow-sm border border-sky-100 mb-8">
+                            <h2 className="text-2xl font-semibold text-sky-900 mb-4">Welcome to {project.name}</h2>
+                            <p className="text-sky-700/80 leading-relaxed mb-6">
+                                {project.desc || "No description provided for this project."}
+                            </p>
+                            <div className="flex items-center space-x-4 text-sm text-sky-500">
+                                <span>Created on {new Date(project.created_at).toLocaleDateString()}</span>
+                            </div>
+                        </div>
+
+                        {/* Placeholder for future dashboard widgets */}
+                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                            <div className="bg-white/40 backdrop-blur-sm p-6 rounded-xl border border-sky-100 h-48 flex items-center justify-center text-sky-300">
+                                Widget Placeholder
+                            </div>
+                            <div className="bg-white/40 backdrop-blur-sm p-6 rounded-xl border border-sky-100 h-48 flex items-center justify-center text-sky-300">
+                                Widget Placeholder
+                            </div>
+                            <div className="bg-white/40 backdrop-blur-sm p-6 rounded-xl border border-sky-100 h-48 flex items-center justify-center text-sky-300">
+                                Widget Placeholder
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    );
+}
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..b13b072
--- /dev/null
+++ b/Lb-web/src/features/project/pages/ProjectDatabase.tsx
@@ -0,0 +1,466 @@
+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, DynTableDef } 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, ChevronDown, ChevronRight, Columns } 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);
+
+    // Tables State
+    const [tables, setTables] = useState<DynTableDef[]>([]);
+    const [loadingTables, setLoadingTables] = useState(false);
+
+    // 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);
+
+    // 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(() => {
+        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)" }]);
+    };
+
+    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
+            });
+
+            setCreateDialogOpen(false);
+            setTableName("");
+            setNewColumns([]);
+            fetchTables(); // Refresh list
+        } catch (err: any) {
+            console.error("Failed to create table", err);
+            setCreateError(err.response?.data?.message || err.message || "Failed to create table");
+        } finally {
+            setCreateLoading(false);
+        }
+    };
+
+    // --- 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>;
+    }
+
+    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"
+                                                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>
+
+                            {/* 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>
+                                    </div>
+                                    <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>
+                                ))}
+                            </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>
+                        )}
+
+                        {/* 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/pages/ProjectUserManagement.tsx b/Lb-web/src/features/project/pages/ProjectUserManagement.tsx
new file mode 100644
index 0000000..fb2e94e
--- /dev/null
+++ b/Lb-web/src/features/project/pages/ProjectUserManagement.tsx
@@ -0,0 +1,321 @@
+import { Button } from "@/components/ui/button";
+import { Plus, Loader2, Trash2 } from "lucide-react";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { useState, useEffect } from "react";
+import { useParams } from "react-router";
+import { projectService } from "../services/projectService";
+import { Label } from "@/components/ui/label";
+import { ProjectSidebar } from "../components/ProjectSidebar";
+
+
+
+export default function ProjectUserManagement() {
+    const { id } = useParams<{ id: string }>();
+    const projectId = id ? parseInt(id) : 0;
+
+    // We need to fetch basic project info for the sidebar
+    // Ideally this should be context or passed down, but for now fetching again or assuming cached
+    const [project, setProject] = useState<{
+        id: number;
+        name: string;
+        project_users?: {
+            id: number;
+            user_id: number;
+            role: string;
+            created_at: string;
+            user?: {
+                id: number;
+                username: string;
+                email: string;
+                role: string;
+            }
+        }[]
+    } | null>(null);
+
+    const [email, setEmail] = useState("");
+    const [role, setRole] = useState("staff");
+    const [open, setOpen] = useState(false);
+
+    // Invite loading state
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    // User list state
+    const [fetchingUsers, setFetchingUsers] = useState(true);
+
+    // Delete Modal State
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+    const [userToDelete, setUserToDelete] = useState<{ id: number; username: string; project_user_id: number } | null>(null);
+    const [deleteLoading, setDeleteLoading] = useState(false);
+
+    // Derived users list
+    const users = project?.project_users?.map(pu => ({
+        id: pu.user?.id || pu.user_id,
+        username: pu.user?.username || "Unknown",
+        email: pu.user?.email || "Unknown",
+        role: pu.role,
+        joined_at: pu.created_at,
+        project_user_id: pu.id
+    })) || [];
+
+    const handleDeleteClick = (user: { id: number; username: string; project_user_id: number }) => {
+        setUserToDelete(user);
+        setDeleteDialogOpen(true);
+    };
+
+    const confirmDelete = async () => {
+        if (!userToDelete) return;
+        setDeleteLoading(true);
+        try {
+            await projectService.removeProjectUser(userToDelete.project_user_id);
+            setDeleteDialogOpen(false);
+            setUserToDelete(null);
+            fetchProjectInfo();
+        } catch (error) {
+            console.error("Failed to remove user:", error);
+        } finally {
+            setDeleteLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        if (projectId) {
+            fetchProjectInfo();
+        }
+    }, [projectId]);
+
+    const fetchProjectInfo = async () => {
+        setFetchingUsers(true);
+        try {
+            if (!id) return;
+            const data = await projectService.getProjectById(id);
+            setProject(data);
+        } catch (e) {
+            console.error(e);
+        } finally {
+            setFetchingUsers(false);
+        }
+    }
+
+
+
+    const handleInvite = async () => {
+        if (!email || !projectId) return;
+
+        setLoading(true);
+        setError(null);
+        try {
+            await projectService.inviteUser(projectId, email, role);
+
+            setOpen(false);
+            resetForm();
+            fetchProjectInfo(); // Refresh to show new member
+            // Show success toast?
+        } catch (err) {
+            console.error("Failed to invite user:", err);
+            setError("Failed to invite user. Please try again.");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const resetForm = () => {
+        setEmail("");
+        setRole("user");
+        setError(null);
+        setLoading(false);
+    };
+
+    if (!project) {
+        return <div className="flex items-center justify-center h-screen"><Loader2 className="animate-spin" /></div>;
+    }
+
+    return (
+        <div className="flex w-full h-screen bg-slate-50 relative overflow-hidden">
+            {/* Reuse Sidebar Layout */}
+            <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-5xl mx-auto space-y-8">
+                        <div className="flex items-center justify-between">
+                            <div>
+                                <h2 className="text-2xl font-bold text-sky-900 tracking-tight">Project Members</h2>
+                                <p className="text-sky-600">Manage users who have access to this project.</p>
+                            </div>
+
+                            <Dialog open={open} onOpenChange={(val) => {
+                                setOpen(val);
+                                if (!val) resetForm();
+                            }}>
+                                <DialogTrigger asChild>
+                                    <Button className="bg-sky-600 hover:bg-sky-700 text-white shadow-sm">
+                                        <Plus className="mr-2 h-4 w-4" />
+                                        Invite Member
+                                    </Button>
+                                </DialogTrigger>
+                                <DialogContent className="sm:max-w-[425px]">
+                                    <DialogHeader>
+                                        <DialogTitle className="text-sky-900">Invite to Project</DialogTitle>
+                                        <DialogDescription>
+                                            Send an invitation to add a user to this project.
+                                        </DialogDescription>
+                                    </DialogHeader>
+
+                                    <div className="grid gap-4 py-4">
+                                        <div className="space-y-2">
+                                            <Label htmlFor="email">Email address</Label>
+                                            <Input
+                                                id="email"
+                                                placeholder="user@example.com"
+                                                className="w-full border-sky-200 focus-visible:ring-sky-400"
+                                                value={email}
+                                                onChange={(e) => setEmail(e.target.value)}
+                                            />
+                                        </div>
+                                        <div className="space-y-2">
+                                            <Label htmlFor="role">Role</Label>
+                                            <select
+                                                id="role"
+                                                className="w-full rounded-md border border-sky-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-offset-2"
+                                                value={role}
+                                                onChange={(e) => setRole(e.target.value)}
+                                            >
+                                                <option value="lead">Lead</option>
+                                                <option value="staff">Staff</option>
+                                            </select>
+                                        </div>
+                                        {error && <p className="text-sm text-red-500">{error}</p>}
+                                    </div>
+
+                                    <DialogFooter>
+                                        <Button
+                                            type="submit"
+                                            className="bg-sky-600 hover:bg-sky-700 text-white"
+                                            onClick={handleInvite}
+                                            disabled={loading || !email}
+                                        >
+                                            {loading ? (
+                                                <>
+                                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                                    Sending...
+                                                </>
+                                            ) : (
+                                                "Send Invitation"
+                                            )}
+                                        </Button>
+                                    </DialogFooter>
+                                </DialogContent>
+                            </Dialog>
+
+                            <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+                                <DialogContent className="sm:max-w-[425px]">
+                                    <DialogHeader>
+                                        <DialogTitle className="text-red-600">Remove User</DialogTitle>
+                                        <DialogDescription>
+                                            Are you sure you want to remove <span className="font-semibold text-sky-900">{userToDelete?.username}</span> from this project? This action cannot be undone.
+                                        </DialogDescription>
+                                    </DialogHeader>
+                                    <DialogFooter>
+                                        <Button
+                                            variant="outline"
+                                            onClick={() => setDeleteDialogOpen(false)}
+                                            disabled={deleteLoading}
+                                        >
+                                            Cancel
+                                        </Button>
+                                        <Button
+                                            variant="destructive"
+                                            onClick={confirmDelete}
+                                            disabled={deleteLoading}
+                                        >
+                                            {deleteLoading ? (
+                                                <>
+                                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                                    Removing...
+                                                </>
+                                            ) : (
+                                                "Remove User"
+                                            )}
+                                        </Button>
+                                    </DialogFooter>
+                                </DialogContent>
+                            </Dialog>
+                        </div>
+
+                        {fetchingUsers ? (
+                            <div className="flex justify-center p-12">
+                                <Loader2 className="h-8 w-8 animate-spin text-sky-600" />
+                            </div>
+                        ) : users.length === 0 ? (
+                            <div className="bg-white rounded-xl border border-sky-100 shadow-sm p-6 flex flex-col items-center justify-center min-h-[400px] text-center space-y-4">
+                                <div className="p-4 bg-sky-50 rounded-full">
+                                    <Plus className="h-8 w-8 text-sky-400" />
+                                </div>
+                                <h3 className="text-lg font-medium text-sky-900">No members yet</h3>
+                                <p className="text-sky-500 max-w-sm">
+                                    Start by inviting users to collaborate on this project.
+                                </p>
+                            </div>
+                        ) : (
+                            <div className="bg-white rounded-xl border border-sky-100 shadow-sm overflow-hidden">
+                                <div className="overflow-x-auto">
+                                    <table className="w-full text-sm text-left">
+                                        <thead className="bg-sky-50 text-sky-900 font-medium border-b border-sky-100">
+                                            <tr>
+                                                <th className="px-6 py-4">Username</th>
+                                                <th className="px-6 py-4">Email</th>
+                                                <th className="px-6 py-4">Role</th>
+                                                <th className="px-6 py-4">Joined</th>
+                                                <th className="px-6 py-4 text-right">Actions</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody className="divide-y divide-sky-100">
+                                            {users.map((user) => (
+                                                <tr key={user.id} className="hover:bg-sky-50/50 transition-colors">
+                                                    <td className="px-6 py-4 font-medium text-sky-900">{user.username}</td>
+                                                    <td className="px-6 py-4 text-sky-600">{user.email}</td>
+                                                    <td className="px-6 py-4">
+                                                        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium capitalize ${user.role === 'admin'
+                                                            ? 'bg-purple-100 text-purple-800'
+                                                            : 'bg-sky-100 text-sky-800'
+                                                            }`}>
+                                                            {user.role}
+                                                        </span>
+                                                    </td>
+                                                    <td className="px-6 py-4 text-sky-600">
+                                                        {new Date(user.joined_at).toLocaleDateString()}
+                                                    </td>
+                                                    <td className="px-6 py-4 text-right">
+                                                        <Button
+                                                            variant="ghost"
+                                                            size="sm"
+                                                            className="h-8 w-8 p-0 text-red-600 hover:text-red-900 hover:bg-red-50"
+                                                            onClick={() => handleDeleteClick(user)}
+                                                        >
+                                                            <Trash2 className="h-4 w-4" />
+                                                            <span className="sr-only">Remove</span>
+                                                        </Button>
+                                                    </td>
+                                                </tr>
+                                            ))}
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </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..c317213
--- /dev/null
+++ b/Lb-web/src/features/project/services/dynamicDBService.ts
@@ -0,0 +1,43 @@
+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, 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/Lb-web/src/features/project/services/projectService.ts b/Lb-web/src/features/project/services/projectService.ts
new file mode 100644
index 0000000..338e54f
--- /dev/null
+++ b/Lb-web/src/features/project/services/projectService.ts
@@ -0,0 +1,54 @@
+import api from "@/services/api";
+
+interface CreateProjectInput {
+    name: string;
+    desc: string;
+    admin_id: number;
+}
+
+interface ProjectUser {
+    id: number;
+    project_id: number;
+    user_id: number;
+    role: string;
+    created_at: string;
+    user?: {
+        id: number;
+        username: string;
+        email: string;
+        role: string;
+    };
+}
+
+interface Project {
+    id: number;
+    name: string;
+    desc: string;
+    admin_id: number;
+    project_users?: ProjectUser[];
+    created_at: string;
+    updated_at: string;
+}
+
+export const projectService = {
+    createProject: async (data: CreateProjectInput): Promise<Project> => {
+        const response = await api.post('/protected/admin/createproject', data);
+        return response.data.data;
+    },
+    getProjects: async (): Promise<Project[]> => {
+        const response = await api.get('/protected/project/projects');
+        return response.data.data;
+    },
+    getProjectById: async (id: string): Promise<Project> => {
+        const response = await api.get(`/protected/project/${id}`);
+        return response.data.data;
+    },
+    inviteUser: async (projectId: number, email: string, role: string) => {
+        const response = await api.post(`/protected/project/manage/invite/${projectId}`, { email, role });
+        return response.data;
+    },
+    removeProjectUser: async (projectUserId: number) => {
+        const response = await api.delete(`/protected/project/manage/remove/${projectUserId}`);
+        return response.data;
+    }
+};
diff --git a/Lb-web/src/main.tsx b/Lb-web/src/main.tsx
index e120bda..fdc13bb 100644
--- a/Lb-web/src/main.tsx
+++ b/Lb-web/src/main.tsx
@@ -11,6 +11,9 @@ import { ProtectedRoute, PublicRoute, AdminRoute } from './features/Login/compon
 import SettingsLayout from './features/admin-setting/layout/SettingsLayout.tsx'
 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([
   {
@@ -60,6 +63,23 @@ const router = createBrowserRouter([
             element: <Navigate to="appearance" replace />
           }
         ]
+      },
+      {
+        path: 'project/:id',
+        children: [
+          {
+            index: true,
+            element: <ProjectDashboard />
+          },
+          {
+            path: 'settings/members',
+            element: <ProjectUserManagement />
+          },
+          {
+            path: 'database',
+            element: <ProjectDatabase />
+          }
+        ]
       }
     ]
   }
diff --git a/Lb-web/src/pages/Home.tsx b/Lb-web/src/pages/Home.tsx
index a6d446c..5c8c18b 100644
--- a/Lb-web/src/pages/Home.tsx
+++ b/Lb-web/src/pages/Home.tsx
@@ -1,17 +1,72 @@
 import { Button } from "@/components/ui/button";
 import { User, Settings, Plus, LogOut } from "lucide-react";
 import { Link } from "react-router";
-import { useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { useAuth } from "@/features/Login/context/AuthContext";
+import { CreateProjectModal } from "@/features/project/components/CreateProjectModal";
+import { projectService } from "@/features/project/services/projectService";
 
 export default function Home() {
-    const { logout } = useAuth();
+    const { logout, role, user } = useAuth();
     const [isProfileOpen, setIsProfileOpen] = useState(false);
 
+    const [isCreateProjectOpen, setIsCreateProjectOpen] = useState(false);
+
+    const [projects, setProjects] = useState<{ id: number; name: string; desc: string; created_at: string }[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const isAdmin = role === 'admin';
+
+    const fetchProjects = useCallback(async () => {
+        if (!isAdmin) return;
+        setIsLoading(true);
+        try {
+            const data = await projectService.getProjects();
+            setProjects(data);
+        } catch (error) {
+            console.error("Failed to fetch projects", error);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [isAdmin]);
+
+    useEffect(() => {
+        console.log("EFFECT RUNNING. Admin:", isAdmin, "User:", user);
+        if (isAdmin) {
+            fetchProjects();
+        } else if (user?.projects) {
+            console.log("USER PROJECTS FOUND:", user.projects);
+            // Map user's projects (from Preload) to the dashboard format
+            const userProjects = user.projects
+                .map(p => {
+                    if (!p.project) return null;
+                    return {
+                        id: p.project.id,
+                        name: p.project.name,
+                        desc: p.project.desc,
+                        // If created_at is missing in the nested project, fallback or use current date? 
+                        // Backend likely sends it.
+                        created_at: p.project.created_at || new Date().toISOString()
+                    };
+                })
+                .filter((p): p is { id: number; name: string; desc: string; created_at: string } => p !== null);
+
+            console.log("PROJECTS SET:", userProjects);
+            setProjects(userProjects);
+        } else {
+            console.log("NO PROJECTS IN USER OBJECT");
+        }
+    }, [isAdmin, fetchProjects, user]);
+
     const handleLogout = async () => {
         await logout();
     };
 
+    const handleCreateSuccess = () => {
+        fetchProjects();
+        console.log("Project created!");
+    };
+
     return (
         <div className="flex flex-col h-screen bg-slate-50 relative overflow-hidden">
             {/* Subtle Grid & Gradient Background */}
@@ -69,21 +124,79 @@ export default function Home() {
             </header>
 
             {/* Main Content */}
-            <main className="flex-1 flex flex-col items-center justify-center p-6 z-10">
-                <div className="text-center space-y-6 max-w-md">
-                    <div className="bg-white/60 backdrop-blur-sm p-8 rounded-2xl shadow-sm border border-sky-100">
-                        <div className="w-16 h-16 bg-sky-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                            <Plus className="h-8 w-8 text-sky-600" />
+            <main className="flex-1 flex flex-col p-6 z-10 overflow-y-auto">
+                {isLoading ? (
+                    <div className="flex-1 flex flex-col items-center justify-center">
+                        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-sky-600"></div>
+                    </div>
+                ) : projects.length > 0 ? (
+                    <div className="max-w-7xl mx-auto w-full">
+                        <div className="flex justify-between items-center mb-8">
+                            <h2 className="text-3xl font-bold text-sky-900">Your Projects</h2>
+                            {isAdmin && (
+                                <Button
+                                    className="bg-sky-600 hover:bg-sky-700 text-white shadow-md transition-all hover:shadow-lg"
+                                    onClick={() => setIsCreateProjectOpen(true)}
+                                >
+                                    <Plus className="mr-2 h-4 w-4" />
+                                    New Project
+                                </Button>
+                            )}
+                        </div>
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                            {projects.map((project: { id: number; name: string; desc: string; created_at: string }) => (
+                                <Link to={`/project/${project.id}`} key={project.id}>
+                                    <div className="bg-white/60 backdrop-blur-sm p-6 rounded-2xl shadow-sm border border-sky-100 hover:shadow-md transition-all cursor-pointer group h-full">
+                                        <div className="h-12 w-12 bg-sky-100 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-200">
+                                            <div className="text-sky-600 font-bold text-xl">
+                                                {project.name.charAt(0).toUpperCase()}
+                                            </div>
+                                        </div>
+                                        <h3 className="text-xl font-semibold text-sky-900 mb-2 truncate">{project.name}</h3>
+                                        <p className="text-sky-600/80 mb-4 line-clamp-2 h-12 text-sm">
+                                            {project.desc || "No description provided."}
+                                        </p>
+                                        <div className="text-xs text-sky-400 font-medium">
+                                            Created {new Date(project.created_at).toLocaleDateString()}
+                                        </div>
+                                    </div>
+                                </Link>
+                            ))}
                         </div>
-                        <h2 className="text-2xl font-semibold text-sky-900 mb-2">There is no Project yet</h2>
-                        <p className="text-sky-600 mb-6">Create your first project to get started with Localbase.</p>
-                        <Button className="w-full bg-sky-600 hover:bg-sky-700 text-white shadow-md transition-all hover:shadow-lg">
-                            <Plus className="mr-2 h-4 w-4" />
-                            Create now
-                        </Button>
                     </div>
-                </div>
+                ) : (
+                    <div className="flex-1 flex flex-col items-center justify-center">
+                        <div className="text-center space-y-6 max-w-md">
+                            <div className="bg-white/60 backdrop-blur-sm p-8 rounded-2xl shadow-sm border border-sky-100">
+                                <div className="w-16 h-16 bg-sky-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                                    <Plus className="h-8 w-8 text-sky-600" />
+                                </div>
+                                <h2 className="text-2xl font-semibold text-sky-900 mb-2">There is no Project yet</h2>
+                                <p className="text-sky-600 mb-6">
+                                    {isAdmin
+                                        ? "Create your first project to get started with Localbase."
+                                        : "Please wait for admin to invite you."}
+                                </p>
+                                {isAdmin && (
+                                    <Button
+                                        className="w-full bg-sky-600 hover:bg-sky-700 text-white shadow-md transition-all hover:shadow-lg"
+                                        onClick={() => setIsCreateProjectOpen(true)}
+                                    >
+                                        <Plus className="mr-2 h-4 w-4" />
+                                        Create now
+                                    </Button>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                )}
             </main>
+
+            <CreateProjectModal
+                isOpen={isCreateProjectOpen}
+                onClose={() => setIsCreateProjectOpen(false)}
+                onSuccess={handleCreateSuccess}
+            />
         </div>
     );
 }
diff --git a/cmd/server/main.go b/cmd/server/main.go
index e5025f8..c363732 100644
--- a/cmd/server/main.go
+++ b/cmd/server/main.go
@@ -60,11 +60,21 @@ func SetupApp(db *repository.DBContainer, cfg *config.Config) Routes.Deps {
 	authService := services.NewAuthService(authRepo, systemRepo)
 	authHandler := handlers.NewAuthHandler(authService)
 
+	projectRepo := repository.NewProjectRepo(db)
+	projectService := services.NewProjectService(projectRepo, userRepo)
+	projectHandler := handlers.NewProjectHandler(projectService)
+
+	dynamicDBRepo := repository.NewDynamicDB(db)
+	dynamicDBService := services.NewDynamicDBService(dynamicDBRepo, db)
+	dynamicDBHandler := handlers.NewDynamicDBHandler(dynamicDBService)
+
 	return Routes.Deps{
-		User:     userHandler,
-		Auth:     authHandler,
-		System:   systemHandler,
-		UserRepo: userRepo,
-		Config:   cfg,
+		User:      userHandler,
+		Auth:      authHandler,
+		System:    systemHandler,
+		Project:   projectHandler,
+		DynamicDB: dynamicDBHandler,
+		UserRepo:  userRepo,
+		Config:    cfg,
 	}
 }