diff --git a/backend/app/models/projects.py b/backend/app/models/projects.py
index 153651b..4297fa5 100644
--- a/backend/app/models/projects.py
+++ b/backend/app/models/projects.py
@@ -16,7 +16,9 @@ class Project(base):
     ceo_id = Column(Integer, ForeignKey("users.id"), nullable=True, server_default="1")
     is_opensource = Column(Boolean, nullable=True, default=True, server_default="TRUE")
     is_dead = Column(Boolean, nullable=True, default=False, server_default="FALSE")
-    tags = relationship("Tag", secondary="project_tags", back_populates="projects")
+    tags = relationship(
+        "Tag", secondary="project_tags", back_populates="projects", lazy="selectin"
+    )
 
     def __repr__(self):
         return f"<Project({', '.join(f'{k}={getattr(self, k)!r}' for k in self.__table__.columns.keys())})>"
diff --git a/backend/app/routes/api/project/__tests__/test_service.py b/backend/app/routes/api/project/__tests__/test_service.py
index f21551d..e4c8700 100644
--- a/backend/app/routes/api/project/__tests__/test_service.py
+++ b/backend/app/routes/api/project/__tests__/test_service.py
@@ -11,15 +11,19 @@ def mock_data_access():
     data_access = AsyncMock()
     return data_access
 
+@pytest.fixture
+def mock_ai_agent():
+    ai_agent = AsyncMock()
+    return ai_agent
 
 @pytest.fixture
-def project_service(mock_data_access):
-    return ProjectService(data_access=mock_data_access)
+def project_service(mock_data_access, mock_ai_agent):
+    return ProjectService(data_access=mock_data_access, ai_agent=mock_ai_agent)
 
 
 @pytest.fixture
 def user():
-    return User(username="testuser", role="VIEWER")
+    return User(username="testuser", role="VIEWER", id=1)
 
 
 @pytest.fixture
diff --git a/backend/app/routes/api/project/data_access.py b/backend/app/routes/api/project/data_access.py
index f32799d..eb23667 100644
--- a/backend/app/routes/api/project/data_access.py
+++ b/backend/app/routes/api/project/data_access.py
@@ -70,6 +70,7 @@ async def create_project(
         project.ceo_id = ceo_id
         self.db_session.add(project)
         await self.db_session.flush()
+        await self.db_session.refresh(project, ["tags"])
         return ProjectSchema.model_validate(project)
 
     async def get_project_applications(
@@ -159,5 +160,20 @@ async def delete_application(self, project_id: int, user_id: int) -> bool:
         res = await self.db_session.execute(query)
         return res.rowcount > 0
 
+    async def update_project(
+        self, project_id: int, brief_description: str, description: str | None = None
+    ) -> ProjectSchema:
+        query = (
+            update(Project)
+            .where(Project.id == project_id)
+            .values(brief_description=brief_description, description=description)
+            .returning(Project)
+        )
+        res = await self.db_session.execute(query)
+        project = res.scalars().first()
+        if not project:
+            raise ValueError(f"Project with ID {project_id} not found.")
+        return ProjectSchema.model_validate(project)
+
 
 ProjectsDataAccessDep = Annotated[ProjectsDataAccess, Depends(ProjectsDataAccess)]
diff --git a/backend/app/routes/api/project/router.py b/backend/app/routes/api/project/router.py
index fb08152..73633e5 100644
--- a/backend/app/routes/api/project/router.py
+++ b/backend/app/routes/api/project/router.py
@@ -8,6 +8,9 @@
     ApproveApplicationSchema,
     ProjectMemberSchema,
     ActionResponse,
+    UpdateProjectRequest,
+    EnhanceDescriptionRequest,
+    EnhanceDescriptionResponse,
 )
 from routes.api.project.service import ProjectServiceDep
 
@@ -97,3 +100,21 @@ async def delete_project(
     user: AuthUserDep,
 ) -> ActionResponse:
     return await service.delete_project(project_id, user)
+
+
+@router.post("/{project_id}/update")
+async def update_project(
+    project_id: int,
+    data: UpdateProjectRequest,
+    service: ProjectServiceDep,
+    user: AuthUserDep,
+) -> ProjectSchema:
+    return await service.update_project(project_id, data, user)
+
+@router.post('/enhance-description')
+async def enhance_project_description(
+    data: EnhanceDescriptionRequest,
+    service: ProjectServiceDep,
+    user: AuthUserDep,
+) -> EnhanceDescriptionResponse:
+    return await service.enhance_project_description(data)
\ No newline at end of file
diff --git a/backend/app/routes/api/project/schemas.py b/backend/app/routes/api/project/schemas.py
index b0b6ec0..6c4f440 100644
--- a/backend/app/routes/api/project/schemas.py
+++ b/backend/app/routes/api/project/schemas.py
@@ -57,3 +57,15 @@ class ProjectMemberSchema(BaseModel):
 
     class Config:
         from_attributes = True
+
+
+class UpdateProjectRequest(BaseModel):
+    brief_description: str
+    description: Optional[str] = None
+
+
+class EnhanceDescriptionRequest(BaseModel):
+    project_description: str
+
+class EnhanceDescriptionResponse(BaseModel):
+    enhanced_description: str
\ No newline at end of file
diff --git a/backend/app/routes/api/project/service.py b/backend/app/routes/api/project/service.py
index c1c5808..a04ed7a 100644
--- a/backend/app/routes/api/project/service.py
+++ b/backend/app/routes/api/project/service.py
@@ -1,8 +1,6 @@
-from email.message import Message
 from typing import Annotated
 from fastapi import Depends
 from fastapi.exceptions import HTTPException
-from pyexpat.errors import messages
 
 from models.users import UserRole
 from routes.api.project.data_access import ProjectsDataAccessDep
@@ -13,13 +11,18 @@
     ApplicationSchema,
     ApproveApplicationSchema,
     ActionResponse,
+    UpdateProjectRequest,
+    EnhanceDescriptionResponse,
+    EnhanceDescriptionRequest,
 )
 from schemas.user import UserInDB
+from services.ai_agent import AiAgentDep
 
 
 class ProjectService:
-    def __init__(self, data_access: ProjectsDataAccessDep):
+    def __init__(self, data_access: ProjectsDataAccessDep, ai_agent: AiAgentDep):
         self.data_access = data_access
+        self.ai_agent = ai_agent
 
     async def get_project_by_id(self, project_id: int) -> ProjectSchema:
         data = await self.data_access.get_project_by_id(project_id)
@@ -145,7 +148,7 @@ async def delete_project(self, project_id: int, user: UserInDB) -> ActionRespons
             )
         if project.ceo_id != user.id:
             raise HTTPException(
-                status_code=403, detail=f"Only the project CEO can delete."
+                status_code=403, detail="Only the project CEO can delete."
             )
         res = await self.data_access.delete_project(project_id)
         msg = "Project was successfully deleted" if res else "Project not found"
@@ -173,5 +176,32 @@ async def delete_application(self, project_id, user: UserInDB) -> ActionResponse
         )
         return ActionResponse(message=msg, success=res)
 
+    async def update_project(
+        self,
+        project_id: int,
+        data: UpdateProjectRequest,
+        user: UserInDB,
+    ) -> ProjectSchema:
+        project = await self.data_access.get_project_by_id(project_id)
+        if project is None:
+            raise HTTPException(
+                status_code=404, detail=f"Project with ID {project_id} not found."
+            )
+        if project.ceo_id != user.id:
+            raise HTTPException(
+                status_code=403, detail="Only the project CEO can update the project."
+            )
+        return await self.data_access.update_project(
+            project_id, data.brief_description, data.description
+        )
+
+    async def enhance_project_description(
+        self, data: EnhanceDescriptionRequest,
+    ) -> EnhanceDescriptionResponse:
+        res = await self.ai_agent.enhance_project_description(data.project_description)
+        return EnhanceDescriptionResponse(
+            enhanced_description=res
+        )
+
 
 ProjectServiceDep = Annotated[ProjectService, Depends(ProjectService)]
diff --git a/backend/app/routes/api/tag/data_access.py b/backend/app/routes/api/tag/data_access.py
index cee4f14..cc96908 100644
--- a/backend/app/routes/api/tag/data_access.py
+++ b/backend/app/routes/api/tag/data_access.py
@@ -4,6 +4,7 @@
 from sqlalchemy.dialects.postgresql import insert
 from typing import Annotated
 from fastapi import Depends
+from sqlalchemy import delete, select
 
 
 class TagDataAccess:
@@ -34,5 +35,17 @@ async def add_tags_to_project(
 
         return [TagSchema.model_validate(tag) for tag in tags]
 
+    async def remove_tags_from_project(self, project_id: int, tags: list[str]) -> int:
+        tags_subquery = select(Tag.id).where(Tag.name.in_(tags)).scalar_subquery()
+
+        delete_stmt = delete(ProjectTag).where(
+            ProjectTag.project_id == project_id,
+            ProjectTag.tag_id.in_(tags_subquery),
+        )
+
+        res = await self.db_session.execute(delete_stmt)
+
+        return res.rowcount
+
 
 TagDataAccessDep = Annotated[TagDataAccess, Depends(TagDataAccess)]
diff --git a/backend/app/routes/api/tag/router.py b/backend/app/routes/api/tag/router.py
index 9435be4..44fc62d 100644
--- a/backend/app/routes/api/tag/router.py
+++ b/backend/app/routes/api/tag/router.py
@@ -3,6 +3,7 @@
 from schemas.agent_response import GeneratedTagsResponse
 from dependencies.auth import AuthUserDep
 from routes.api.tag.schemas import TagSchema
+from schemas.generic import GenericResponse
 
 router = APIRouter(prefix="/tags", tags=["tags"])
 
@@ -19,3 +20,10 @@ async def add_project_tags(
     project_id: int, service: TagServiceDep, user: AuthUserDep, tags: list[TagSchema]
 ) -> list[TagSchema]:
     return await service.add_project_tags(project_id, tags, user)
+
+
+@router.delete("/remove/{project_id}")
+async def remove_project_tags(
+    project_id: int, service: TagServiceDep, user: AuthUserDep, tags: list[TagSchema]
+) -> GenericResponse:
+    return await service.remove_project_tags(project_id, tags, user)
diff --git a/backend/app/routes/api/tag/service.py b/backend/app/routes/api/tag/service.py
index a429e93..9b70faa 100644
--- a/backend/app/routes/api/tag/service.py
+++ b/backend/app/routes/api/tag/service.py
@@ -1,4 +1,5 @@
 from routes.api.project.data_access import ProjectsDataAccessDep
+from schemas.generic import GenericResponse
 from services.ai_agent import AiAgentDep
 from schemas.agent_response import GeneratedTagsResponse
 from fastapi import HTTPException, Depends
@@ -40,5 +41,27 @@ async def add_project_tags(
 
         return await self.tag_data_access.add_tags_to_project(project_id, tags)
 
+    async def remove_project_tags(
+        self, project_id: int, tags: list[TagSchema], user: UserInDB
+    ) -> GenericResponse:
+        project = await self.data_access.get_project_by_id(project_id)
+        if project is None:
+            raise HTTPException(status_code=404, detail="Project not found")
+        if user.id != project.ceo_id:
+            raise HTTPException(
+                status_code=403, detail="Only CEO can remove tags from the project"
+            )
+
+        res = await self.tag_data_access.remove_tags_from_project(
+            project_id, [tag.name for tag in tags]
+        )
+
+        return GenericResponse(
+            success=res > 0,
+            message=f"Removed {res} tags from the project"
+            if res > 0
+            else "No tags removed",
+        )
+
 
 TagServiceDep = Annotated[TagService, Depends(TagService)]
diff --git a/backend/app/routes/api/user/data_access.py b/backend/app/routes/api/user/data_access.py
index 80d8b7c..069e7e6 100644
--- a/backend/app/routes/api/user/data_access.py
+++ b/backend/app/routes/api/user/data_access.py
@@ -16,6 +16,10 @@ async def get_user_by_username(self, username: str) -> User | None:
         )
         return res.scalars().first()
 
+    async def get_user_by_id(self, user_id: int) -> User | None:
+        res = await self.db_session.execute(select(User).where(User.id == user_id))
+        return res.scalars().first()
+
     async def set_user_role(self, username: str, role: UserRole) -> None:
         await self.db_session.execute(
             update(User).where(User.username == username).values(role=role)
diff --git a/backend/app/routes/api/user/router.py b/backend/app/routes/api/user/router.py
index 1fb84fb..7595e0b 100644
--- a/backend/app/routes/api/user/router.py
+++ b/backend/app/routes/api/user/router.py
@@ -22,3 +22,12 @@ async def get_me(
     current_user=Depends(get_current_user),
 ) -> User:
     return current_user
+
+
+@router.get("/get-by-id/{user_id}")
+async def get_user_by_id(
+    user_id: int,
+    service: UserServiceDep,
+    current_user=Depends(get_current_user),
+) -> User:
+    return await service.get_user_by_id(user_id, current_user)
diff --git a/backend/app/routes/api/user/service.py b/backend/app/routes/api/user/service.py
index e4a6ad8..ce40d7d 100644
--- a/backend/app/routes/api/user/service.py
+++ b/backend/app/routes/api/user/service.py
@@ -1,7 +1,6 @@
 from typing import Annotated
 from fastapi import Depends, HTTPException
 
-from models.users import UserRole
 from routes.api.user.data_access import UserDataAccessDep, UserDataAccess
 from routes.api.user.schemas import SetUserRoleSchema
 from schemas.user import User
@@ -28,5 +27,14 @@ async def set_user_role(self, user_role: SetUserRoleSchema, current_user: User):
             "message": f"User '{user.username}' role set to {user_role.role.value}."
         }
 
+    async def get_user_by_id(self, user_id: int, current_user: User) -> User:
+        user = await self.user_repository.get_user_by_id(user_id)
+        if user is None:
+            raise HTTPException(
+                status_code=404,
+                detail=f"User with ID {user_id} not found.",
+            )
+        return user
+
 
 UserServiceDep = Annotated[UserService, Depends(UserService)]
diff --git a/backend/app/schemas/generic.py b/backend/app/schemas/generic.py
new file mode 100644
index 0000000..cbc6c9a
--- /dev/null
+++ b/backend/app/schemas/generic.py
@@ -0,0 +1,8 @@
+from typing import Optional
+
+from pydantic import Field, BaseModel
+
+
+class GenericResponse(BaseModel):
+    success: bool = Field(default=True)
+    message: Optional[str] = Field(default=None)
diff --git a/backend/app/schemas/user.py b/backend/app/schemas/user.py
index 991a94c..43946cc 100644
--- a/backend/app/schemas/user.py
+++ b/backend/app/schemas/user.py
@@ -5,6 +5,7 @@
 
 
 class User(BaseModel):
+    id: int
     username: str
     role: UserRole
 
diff --git a/backend/app/services/ai_agent.py b/backend/app/services/ai_agent.py
index 76cc6b6..24a7ef0 100644
--- a/backend/app/services/ai_agent.py
+++ b/backend/app/services/ai_agent.py
@@ -23,12 +23,25 @@ async def get_tags_by_description(
         tag_generator_agent = Agent(
             self.model,
             output_type=GeneratedTagsResponse,
-            system_prompt=f"You need to come up with a name for a tag based on the project description. You should provide 15 options. Write tags in English only",
+            system_prompt=f"You need to come up with a name for a tag based on the project description. Write tags in English only",
         )
 
         result = await tag_generator_agent.run(user_prompt=project_description)
 
         return result.output
 
+    async def enhance_project_description(
+        self, project_description: str
+    ) -> str:
+        description_enhancer_agent = Agent(
+            self.model,
+            output_type=str,
+            system_prompt=f"You need to enhance the given project description. Write in English only. Use markdown syntax for formatting.",
+        )
+
+        result = await description_enhancer_agent.run(user_prompt=project_description)
+
+        return result.output
+
 
 AiAgentDep = Annotated[AiAgent, Depends(AiAgent)]
diff --git a/frontend/jsrepo.json b/frontend/jsrepo.json
new file mode 100644
index 0000000..5f68b11
--- /dev/null
+++ b/frontend/jsrepo.json
@@ -0,0 +1,16 @@
+{
+	"$schema": "https://unpkg.com/jsrepo@2.4.3/schemas/project-config.json",
+	"repos": ["@ieedan/shadcn-svelte-extras"],
+	"includeTests": false,
+	"includeDocs": false,
+	"watermark": true,
+	"formatter": "prettier",
+	"configFiles": {},
+	"paths": {
+		"*": "$lib/blocks",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks",
+		"actions": "$lib/actions",
+		"utils": "$lib/utils"
+	}
+}
diff --git a/frontend/package.json b/frontend/package.json
index eb38cd1..482e876 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,6 +29,7 @@
 		"@tailwindcss/vite": "^4.0.0",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/svelte": "^5.2.8",
+		"@types/node": "^24.0.15",
 		"@vitest/coverage-v8": "^3.2.4",
 		"@vitest/ui": "^3.2.4",
 		"bits-ui": "^2.8.8",
@@ -65,6 +66,7 @@
 		"@tanstack/svelte-query": "^5.81.2",
 		"cobe": "^0.6.4",
 		"jwt-decode": "^4.0.0",
-		"openapi-fetch": "^0.14.0"
+		"openapi-fetch": "^0.14.0",
+		"svelte-markdown": "^0.4.1"
 	}
 }
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index e459fdc..6b98fd2 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -10,7 +10,7 @@ importers:
     dependencies:
       '@sveltejs/adapter-static':
         specifier: ^3.0.8
-        version: 3.0.8(@sveltejs/kit@2.21.4(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1)))
+        version: 3.0.8(@sveltejs/kit@2.21.4(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)))
       '@tanstack/svelte-query':
         specifier: ^5.81.2
         version: 5.81.2(svelte@5.33.19)
@@ -23,6 +23,9 @@ importers:
       openapi-fetch:
         specifier: ^0.14.0
         version: 0.14.0
+      svelte-markdown:
+        specifier: ^0.4.1
+        version: 0.4.1(svelte@5.33.19)
     devDependencies:
       '@eslint/compat':
         specifier: ^1.2.5
@@ -38,25 +41,28 @@ importers:
         version: 0.515.0(svelte@5.33.19)
       '@sveltejs/adapter-auto':
         specifier: ^6.0.0
-        version: 6.0.1(@sveltejs/kit@2.21.4(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1)))
+        version: 6.0.1(@sveltejs/kit@2.21.4(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)))
       '@sveltejs/kit':
         specifier: ^2.16.0
-        version: 2.21.4(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))
+        version: 2.21.4(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1))
       '@sveltejs/vite-plugin-svelte':
         specifier: ^5.0.0
-        version: 5.1.0(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))
+        version: 5.1.0(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1))
       '@tailwindcss/vite':
         specifier: ^4.0.0
-        version: 4.1.8(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))
+        version: 4.1.8(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1))
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.6.3
       '@testing-library/svelte':
         specifier: ^5.2.8
-        version: 5.2.8(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))(vitest@3.2.4(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1))
+        version: 5.2.8(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1))(vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.0.15)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1))
+      '@types/node':
+        specifier: ^24.0.15
+        version: 24.0.15
       '@vitest/coverage-v8':
         specifier: ^3.2.4
-        version: 3.2.4(vitest@3.2.4(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1))
+        version: 3.2.4(vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.0.15)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1))
       '@vitest/ui':
         specifier: ^3.2.4
         version: 3.2.4(vitest@3.2.4)
@@ -125,10 +131,10 @@ importers:
         version: 8.34.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
       vite:
         specifier: ^6.2.6
-        version: 6.3.5(jiti@2.4.2)(lightningcss@1.30.1)
+        version: 6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@24.0.15)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)
 
 packages:
 
@@ -762,6 +768,9 @@ packages:
   '@types/cookie@0.6.0':
     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
 
+  '@types/debug@4.1.12':
+    resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
+
   '@types/deep-eql@4.0.2':
     resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
 
@@ -774,6 +783,15 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/marked@5.0.2':
+    resolution: {integrity: sha512-OucS4KMHhFzhz27KxmWg7J+kIYqyqoW5kdIEI319hqARQQUTqhao3M/F+uFnDXD0Rg72iDDZxZNxq5gvctmLlg==}
+
+  '@types/ms@2.1.0':
+    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
+
+  '@types/node@24.0.15':
+    resolution: {integrity: sha512-oaeTSbCef7U/z7rDeJA138xpG3NuKc64/rZ2qmUFkFJmnMsAPaluIifqyWd8hSSMxyP9oie3dLAqYPblag9KgA==}
+
   '@typescript-eslint/eslint-plugin@8.34.0':
     resolution: {integrity: sha512-QXwAlHlbcAwNlEEMKQS2RCgJsgXrTJdjXT08xEgbPFa2yYQgVjBymxP5DrfrE7X7iodSzd9qBUHUycdyVJTW1w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1510,6 +1528,11 @@ packages:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
 
+  marked@5.1.2:
+    resolution: {integrity: sha512-ahRPGXJpjMjwSOlBoTMZAK7ATXkli5qCPxZ21TG44rx1KEo44bii4ekgTDQPNRQ4Kh7JMb9Ub1PVk1NxRSsorg==}
+    engines: {node: '>= 16'}
+    hasBin: true
+
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -1913,6 +1936,11 @@ packages:
       svelte:
         optional: true
 
+  svelte-markdown@0.4.1:
+    resolution: {integrity: sha512-pOlLY6EruKJaWI9my/2bKX8PdTeP5CM0s4VMmwmC2prlOkjAf+AOmTM4wW/l19Y6WZ87YmP8+ZCJCCwBChWjYw==}
+    peerDependencies:
+      svelte: ^4.0.0
+
   svelte-sonner@1.0.5:
     resolution: {integrity: sha512-9dpGPFqKb/QWudYqGnEz93vuY+NgCEvyNvxoCLMVGw6sDN/3oVeKV1xiEirW2E1N3vJEyj5imSBNOGltQHA7mg==}
     peerDependencies:
@@ -2044,6 +2072,9 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  undici-types@7.8.0:
+    resolution: {integrity: sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==}
+
   uri-js-replace@1.0.1:
     resolution: {integrity: sha512-W+C9NWNLFOoBI2QWDp4UT9pv65r2w5Cx+3sTYFvtMdDBxkKt1syCqsUdSFAChbEe1uK5TfS04wt/nGwmaeIQ0g==}
 
@@ -2568,18 +2599,18 @@ snapshots:
     dependencies:
       acorn: 8.15.0
 
-  '@sveltejs/adapter-auto@6.0.1(@sveltejs/kit@2.21.4(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1)))':
+  '@sveltejs/adapter-auto@6.0.1(@sveltejs/kit@2.21.4(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)))':
     dependencies:
-      '@sveltejs/kit': 2.21.4(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))
+      '@sveltejs/kit': 2.21.4(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1))
 
-  '@sveltejs/adapter-static@3.0.8(@sveltejs/kit@2.21.4(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1)))':
+  '@sveltejs/adapter-static@3.0.8(@sveltejs/kit@2.21.4(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)))':
     dependencies:
-      '@sveltejs/kit': 2.21.4(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))
+      '@sveltejs/kit': 2.21.4(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1))
 
-  '@sveltejs/kit@2.21.4(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))':
+  '@sveltejs/kit@2.21.4(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1))':
     dependencies:
       '@sveltejs/acorn-typescript': 1.0.5(acorn@8.15.0)
-      '@sveltejs/vite-plugin-svelte': 5.1.0(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))
+      '@sveltejs/vite-plugin-svelte': 5.1.0(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1))
       '@types/cookie': 0.6.0
       acorn: 8.15.0
       cookie: 0.6.0
@@ -2592,28 +2623,28 @@ snapshots:
       set-cookie-parser: 2.7.1
       sirv: 3.0.1
       svelte: 5.33.19
-      vite: 6.3.5(jiti@2.4.2)(lightningcss@1.30.1)
-      vitefu: 1.0.6(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))
+      vite: 6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)
+      vitefu: 1.0.6(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1))
 
-  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 5.1.0(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))
+      '@sveltejs/vite-plugin-svelte': 5.1.0(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1))
       debug: 4.4.1(supports-color@10.0.0)
       svelte: 5.33.19
-      vite: 6.3.5(jiti@2.4.2)(lightningcss@1.30.1)
+      vite: 6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))':
+  '@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1))
       debug: 4.4.1(supports-color@10.0.0)
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.17
       svelte: 5.33.19
-      vite: 6.3.5(jiti@2.4.2)(lightningcss@1.30.1)
-      vitefu: 1.0.6(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))
+      vite: 6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)
+      vitefu: 1.0.6(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1))
     transitivePeerDependencies:
       - supports-color
 
@@ -2685,12 +2716,12 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.1.8
       '@tailwindcss/oxide-win32-x64-msvc': 4.1.8
 
-  '@tailwindcss/vite@4.1.8(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))':
+  '@tailwindcss/vite@4.1.8(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1))':
     dependencies:
       '@tailwindcss/node': 4.1.8
       '@tailwindcss/oxide': 4.1.8
       tailwindcss: 4.1.8
-      vite: 6.3.5(jiti@2.4.2)(lightningcss@1.30.1)
+      vite: 6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)
 
   '@tanstack/query-core@5.81.2': {}
 
@@ -2720,13 +2751,13 @@ snapshots:
       lodash: 4.17.21
       redent: 3.0.0
 
-  '@testing-library/svelte@5.2.8(svelte@5.33.19)(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))(vitest@3.2.4(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1))':
+  '@testing-library/svelte@5.2.8(svelte@5.33.19)(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1))(vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.0.15)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1))':
     dependencies:
       '@testing-library/dom': 10.4.0
       svelte: 5.33.19
     optionalDependencies:
-      vite: 6.3.5(jiti@2.4.2)(lightningcss@1.30.1)
-      vitest: 3.2.4(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)
+      vite: 6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@24.0.15)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)
 
   '@types/aria-query@5.0.4': {}
 
@@ -2736,6 +2767,11 @@ snapshots:
 
   '@types/cookie@0.6.0': {}
 
+  '@types/debug@4.1.12':
+    dependencies:
+      '@types/ms': 2.1.0
+    optional: true
+
   '@types/deep-eql@4.0.2': {}
 
   '@types/estree@1.0.7': {}
@@ -2744,6 +2780,15 @@ snapshots:
 
   '@types/json-schema@7.0.15': {}
 
+  '@types/marked@5.0.2': {}
+
+  '@types/ms@2.1.0':
+    optional: true
+
+  '@types/node@24.0.15':
+    dependencies:
+      undici-types: 7.8.0
+
   '@typescript-eslint/eslint-plugin@8.34.0(@typescript-eslint/parser@8.34.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
@@ -2836,7 +2881,7 @@ snapshots:
       '@typescript-eslint/types': 8.34.0
       eslint-visitor-keys: 4.2.1
 
-  '@vitest/coverage-v8@3.2.4(vitest@3.2.4(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1))':
+  '@vitest/coverage-v8@3.2.4(vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.0.15)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1))':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@bcoe/v8-coverage': 1.0.2
@@ -2851,7 +2896,7 @@ snapshots:
       std-env: 3.9.0
       test-exclude: 7.0.1
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@24.0.15)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -2863,13 +2908,13 @@ snapshots:
       chai: 5.2.0
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.2.4(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))':
+  '@vitest/mocker@3.2.4(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      vite: 6.3.5(jiti@2.4.2)(lightningcss@1.30.1)
+      vite: 6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)
 
   '@vitest/pretty-format@3.2.4':
     dependencies:
@@ -2900,7 +2945,7 @@ snapshots:
       sirv: 3.0.1
       tinyglobby: 0.2.14
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@24.0.15)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)
 
   '@vitest/utils@3.2.4':
     dependencies:
@@ -3527,6 +3572,8 @@ snapshots:
     dependencies:
       semver: 7.7.2
 
+  marked@5.1.2: {}
+
   merge2@1.4.1: {}
 
   micromatch@4.0.8:
@@ -3858,6 +3905,12 @@ snapshots:
     optionalDependencies:
       svelte: 5.33.19
 
+  svelte-markdown@0.4.1(svelte@5.33.19):
+    dependencies:
+      '@types/marked': 5.0.2
+      marked: 5.1.2
+      svelte: 5.33.19
+
   svelte-sonner@1.0.5(svelte@5.33.19):
     dependencies:
       runed: 0.28.0(svelte@5.33.19)
@@ -3987,6 +4040,8 @@ snapshots:
 
   typescript@5.8.3: {}
 
+  undici-types@7.8.0: {}
+
   uri-js-replace@1.0.1: {}
 
   uri-js@4.4.1:
@@ -3995,13 +4050,13 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
-  vite-node@3.2.4(jiti@2.4.2)(lightningcss@1.30.1):
+  vite-node@3.2.4(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.1(supports-color@10.0.0)
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 6.3.5(jiti@2.4.2)(lightningcss@1.30.1)
+      vite: 6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -4016,7 +4071,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1):
+  vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1):
     dependencies:
       esbuild: 0.25.5
       fdir: 6.4.6(picomatch@4.0.2)
@@ -4025,19 +4080,20 @@ snapshots:
       rollup: 4.43.0
       tinyglobby: 0.2.14
     optionalDependencies:
+      '@types/node': 24.0.15
       fsevents: 2.3.3
       jiti: 2.4.2
       lightningcss: 1.30.1
 
-  vitefu@1.0.6(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1)):
+  vitefu@1.0.6(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)):
     optionalDependencies:
-      vite: 6.3.5(jiti@2.4.2)(lightningcss@1.30.1)
+      vite: 6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)
 
-  vitest@3.2.4(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1):
+  vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.0.15)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1):
     dependencies:
       '@types/chai': 5.2.2
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))
+      '@vitest/mocker': 3.2.4(vite@6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4
@@ -4055,10 +4111,12 @@ snapshots:
       tinyglobby: 0.2.14
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 6.3.5(jiti@2.4.2)(lightningcss@1.30.1)
-      vite-node: 3.2.4(jiti@2.4.2)(lightningcss@1.30.1)
+      vite: 6.3.5(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)
+      vite-node: 3.2.4(@types/node@24.0.15)(jiti@2.4.2)(lightningcss@1.30.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
+      '@types/debug': 4.1.12
+      '@types/node': 24.0.15
       '@vitest/ui': 3.2.4(vitest@3.2.4)
       jsdom: 26.1.0
     transitivePeerDependencies:
diff --git a/frontend/src/app.css b/frontend/src/app.css
index 43cee97..95c4775 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -4,6 +4,8 @@
 
 @custom-variant dark (&:is(.dark *));
 
+@config "../tailwind.config.ts";
+
 :root {
 	--radius: 0.625rem;
 	--background: oklch(1 0 0);
@@ -37,6 +39,11 @@
 	--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
 	--sidebar-border: oklch(0.92 0.004 286.32);
 	--sidebar-ring: oklch(0.705 0.015 286.067);
+	--color-1: 0 100% 63%;
+	--color-2: 270 100% 63%;
+	--color-3: 210 100% 63%;
+	--color-4: 195 100% 63%;
+	--color-5: 90 100% 63%;
 }
 
 .dark {
@@ -71,6 +78,11 @@
 	--sidebar-accent-foreground: oklch(0.985 0 0);
 	--sidebar-border: oklch(1 0 0 / 10%);
 	--sidebar-ring: oklch(0.552 0.016 285.938);
+	--color-1: 0 100% 63%;
+	--color-2: 270 100% 63%;
+	--color-3: 210 100% 63%;
+	--color-4: 195 100% 63%;
+	--color-5: 90 100% 63%;
 }
 
 @theme inline {
@@ -115,6 +127,7 @@
 	* {
 		@apply border-border outline-ring/50;
 	}
+
 	body {
 		@apply bg-background text-foreground;
 	}
@@ -127,16 +140,29 @@
 		-webkit-box-orient: vertical;
 		-webkit-line-clamp: 1;
 	}
+
 	.line-clamp-2 {
 		overflow: hidden;
 		display: -webkit-box;
 		-webkit-box-orient: vertical;
 		-webkit-line-clamp: 2;
 	}
+
 	.line-clamp-3 {
 		overflow: hidden;
 		display: -webkit-box;
 		-webkit-box-orient: vertical;
 		-webkit-line-clamp: 3;
 	}
+
+	/* Hide scrollbar for Chrome, Safari and Opera */
+	.no-scrollbar::-webkit-scrollbar {
+		display: none;
+	}
+
+	/* Hide scrollbar for IE, Edge and Firefox */
+	.no-scrollbar {
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
+	}
 }
diff --git a/frontend/src/lib/api/v1.d.ts b/frontend/src/lib/api/v1.d.ts
index cad8302..bcf045e 100644
--- a/frontend/src/lib/api/v1.d.ts
+++ b/frontend/src/lib/api/v1.d.ts
@@ -39,6 +39,23 @@ export interface paths {
 		patch?: never;
 		trace?: never;
 	};
+	'/api/projects/all-applications': {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		/** Get User Applications */
+		get: operations['get_user_applications_api_projects_all_applications_get'];
+		put?: never;
+		post?: never;
+		delete?: never;
+		options?: never;
+		head?: never;
+		patch?: never;
+		trace?: never;
+	};
 	'/api/projects/{project_id}': {
 		parameters: {
 			query?: never;
@@ -50,7 +67,8 @@ export interface paths {
 		get: operations['get_project_by_id_api_projects__project_id__get'];
 		put?: never;
 		post?: never;
-		delete?: never;
+		/** Delete Project */
+		delete: operations['delete_project_api_projects__project_id__delete'];
 		options?: never;
 		head?: never;
 		patch?: never;
@@ -124,6 +142,57 @@ export interface paths {
 		patch: operations['approve_application_api_projects__project_id__applications_approve_patch'];
 		trace?: never;
 	};
+	'/api/projects/{project_id}/applications/cancel': {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		get?: never;
+		put?: never;
+		post?: never;
+		/** Delete Application */
+		delete: operations['delete_application_api_projects__project_id__applications_cancel_delete'];
+		options?: never;
+		head?: never;
+		patch?: never;
+		trace?: never;
+	};
+	'/api/projects/{project_id}/update': {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		get?: never;
+		put?: never;
+		/** Update Project */
+		post: operations['update_project_api_projects__project_id__update_post'];
+		delete?: never;
+		options?: never;
+		head?: never;
+		patch?: never;
+		trace?: never;
+	};
+	'/api/projects/enhance-description': {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		get?: never;
+		put?: never;
+		/** Enhance Project Description */
+		post: operations['enhance_project_description_api_projects_enhance_description_post'];
+		delete?: never;
+		options?: never;
+		head?: never;
+		patch?: never;
+		trace?: never;
+	};
 	'/api/auth/token': {
 		parameters: {
 			query?: never;
@@ -192,10 +261,85 @@ export interface paths {
 		patch?: never;
 		trace?: never;
 	};
+	'/api/user/get-by-id/{user_id}': {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		/** Get User By Id */
+		get: operations['get_user_by_id_api_user_get_by_id__user_id__get'];
+		put?: never;
+		post?: never;
+		delete?: never;
+		options?: never;
+		head?: never;
+		patch?: never;
+		trace?: never;
+	};
+	'/api/tags/generate/{project_id}': {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		/** Get Tags By Description */
+		get: operations['get_tags_by_description_api_tags_generate__project_id__get'];
+		put?: never;
+		post?: never;
+		delete?: never;
+		options?: never;
+		head?: never;
+		patch?: never;
+		trace?: never;
+	};
+	'/api/tags/add/{project_id}': {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		get?: never;
+		put?: never;
+		/** Add Project Tags */
+		post: operations['add_project_tags_api_tags_add__project_id__post'];
+		delete?: never;
+		options?: never;
+		head?: never;
+		patch?: never;
+		trace?: never;
+	};
+	'/api/tags/remove/{project_id}': {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		get?: never;
+		put?: never;
+		post?: never;
+		/** Remove Project Tags */
+		delete: operations['remove_project_tags_api_tags_remove__project_id__delete'];
+		options?: never;
+		head?: never;
+		patch?: never;
+		trace?: never;
+	};
 }
 export type webhooks = Record<string, never>;
 export interface components {
 	schemas: {
+		/** ActionResponse */
+		ActionResponse: {
+			/** Message */
+			message: string;
+			/** Success */
+			success: boolean;
+		};
 		/** ApplicationSchema */
 		ApplicationSchema: {
 			/** Project Id */
@@ -209,6 +353,8 @@ export interface components {
 			 * Format: date-time
 			 */
 			created_at: string;
+			/** Feedback */
+			feedback: string | null;
 		};
 		/** ApproveApplicationSchema */
 		ApproveApplicationSchema: {
@@ -216,6 +362,8 @@ export interface components {
 			is_approved: boolean;
 			/** User Id */
 			user_id: number;
+			/** Feedback */
+			feedback: string | null;
 		};
 		/** Body_login_for_access_token_api_auth_token_post */
 		Body_login_for_access_token_api_auth_token_post: {
@@ -235,6 +383,31 @@ export interface components {
 			/** Client Secret */
 			client_secret?: string | null;
 		};
+		/** EnhanceDescriptionRequest */
+		EnhanceDescriptionRequest: {
+			/** Project Description */
+			project_description: string;
+		};
+		/** EnhanceDescriptionResponse */
+		EnhanceDescriptionResponse: {
+			/** Enhanced Description */
+			enhanced_description: string;
+		};
+		/** GeneratedTagsResponse */
+		GeneratedTagsResponse: {
+			/** Tags */
+			tags: string[];
+		};
+		/** GenericResponse */
+		GenericResponse: {
+			/**
+			 * Success
+			 * @default true
+			 */
+			success: boolean;
+			/** Message */
+			message?: string | null;
+		};
 		/** HTTPValidationError */
 		HTTPValidationError: {
 			/** Detail */
@@ -244,6 +417,8 @@ export interface components {
 		NewProjectSchema: {
 			/** Title */
 			title: string;
+			/** Brief Description */
+			brief_description: string;
 			/** Description */
 			description: string | null;
 			/** Is Public */
@@ -264,6 +439,8 @@ export interface components {
 		ProjectSchema: {
 			/** Title */
 			title: string;
+			/** Brief Description */
+			brief_description: string;
 			/** Description */
 			description: string | null;
 			/** Is Public */
@@ -281,11 +458,23 @@ export interface components {
 			created_at: string;
 			/** Ceo Id */
 			ceo_id: number | null;
+			/** Tags */
+			tags?: components['schemas']['Tag'][] | null;
 		};
 		/** SetUserRoleSchema */
 		SetUserRoleSchema: {
 			role: components['schemas']['UserRole'];
 		};
+		/** Tag */
+		Tag: {
+			/** Name */
+			name: string;
+		};
+		/** TagSchema */
+		TagSchema: {
+			/** Name */
+			name: string;
+		};
 		/** Token */
 		Token: {
 			/** Access Token */
@@ -293,8 +482,17 @@ export interface components {
 			/** Token Type */
 			token_type: string;
 		};
+		/** UpdateProjectRequest */
+		UpdateProjectRequest: {
+			/** Brief Description */
+			brief_description: string;
+			/** Description */
+			description?: string | null;
+		};
 		/** User */
 		User: {
+			/** Id */
+			id: number;
 			/** Username */
 			username: string;
 			role: components['schemas']['UserRole'];
@@ -402,6 +600,26 @@ export interface operations {
 			};
 		};
 	};
+	get_user_applications_api_projects_all_applications_get: {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		requestBody?: never;
+		responses: {
+			/** @description Successful Response */
+			200: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['ApplicationSchema'][];
+				};
+			};
+		};
+	};
 	get_project_by_id_api_projects__project_id__get: {
 		parameters: {
 			query?: never;
@@ -433,6 +651,37 @@ export interface operations {
 			};
 		};
 	};
+	delete_project_api_projects__project_id__delete: {
+		parameters: {
+			query?: never;
+			header?: never;
+			path: {
+				project_id: number;
+			};
+			cookie?: never;
+		};
+		requestBody?: never;
+		responses: {
+			/** @description Successful Response */
+			200: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['ActionResponse'];
+				};
+			};
+			/** @description Validation Error */
+			422: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['HTTPValidationError'];
+				};
+			};
+		};
+	};
 	apply_to_project_api_projects__project_id__apply_post: {
 		parameters: {
 			query?: never;
@@ -561,6 +810,105 @@ export interface operations {
 			};
 		};
 	};
+	delete_application_api_projects__project_id__applications_cancel_delete: {
+		parameters: {
+			query?: never;
+			header?: never;
+			path: {
+				project_id: number;
+			};
+			cookie?: never;
+		};
+		requestBody?: never;
+		responses: {
+			/** @description Successful Response */
+			200: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['ActionResponse'];
+				};
+			};
+			/** @description Validation Error */
+			422: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['HTTPValidationError'];
+				};
+			};
+		};
+	};
+	update_project_api_projects__project_id__update_post: {
+		parameters: {
+			query?: never;
+			header?: never;
+			path: {
+				project_id: number;
+			};
+			cookie?: never;
+		};
+		requestBody: {
+			content: {
+				'application/json': components['schemas']['UpdateProjectRequest'];
+			};
+		};
+		responses: {
+			/** @description Successful Response */
+			200: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['ProjectSchema'];
+				};
+			};
+			/** @description Validation Error */
+			422: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['HTTPValidationError'];
+				};
+			};
+		};
+	};
+	enhance_project_description_api_projects_enhance_description_post: {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		requestBody: {
+			content: {
+				'application/json': components['schemas']['EnhanceDescriptionRequest'];
+			};
+		};
+		responses: {
+			/** @description Successful Response */
+			200: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['EnhanceDescriptionResponse'];
+				};
+			};
+			/** @description Validation Error */
+			422: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['HTTPValidationError'];
+				};
+			};
+		};
+	};
 	login_for_access_token_api_auth_token_post: {
 		parameters: {
 			query?: never;
@@ -682,4 +1030,136 @@ export interface operations {
 			};
 		};
 	};
+	get_user_by_id_api_user_get_by_id__user_id__get: {
+		parameters: {
+			query?: never;
+			header?: never;
+			path: {
+				user_id: number;
+			};
+			cookie?: never;
+		};
+		requestBody?: never;
+		responses: {
+			/** @description Successful Response */
+			200: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['User'];
+				};
+			};
+			/** @description Validation Error */
+			422: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['HTTPValidationError'];
+				};
+			};
+		};
+	};
+	get_tags_by_description_api_tags_generate__project_id__get: {
+		parameters: {
+			query?: never;
+			header?: never;
+			path: {
+				project_id: number;
+			};
+			cookie?: never;
+		};
+		requestBody?: never;
+		responses: {
+			/** @description Successful Response */
+			200: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['GeneratedTagsResponse'];
+				};
+			};
+			/** @description Validation Error */
+			422: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['HTTPValidationError'];
+				};
+			};
+		};
+	};
+	add_project_tags_api_tags_add__project_id__post: {
+		parameters: {
+			query?: never;
+			header?: never;
+			path: {
+				project_id: number;
+			};
+			cookie?: never;
+		};
+		requestBody: {
+			content: {
+				'application/json': components['schemas']['TagSchema'][];
+			};
+		};
+		responses: {
+			/** @description Successful Response */
+			200: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['TagSchema'][];
+				};
+			};
+			/** @description Validation Error */
+			422: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['HTTPValidationError'];
+				};
+			};
+		};
+	};
+	remove_project_tags_api_tags_remove__project_id__delete: {
+		parameters: {
+			query?: never;
+			header?: never;
+			path: {
+				project_id: number;
+			};
+			cookie?: never;
+		};
+		requestBody: {
+			content: {
+				'application/json': components['schemas']['TagSchema'][];
+			};
+		};
+		responses: {
+			/** @description Successful Response */
+			200: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['GenericResponse'];
+				};
+			};
+			/** @description Validation Error */
+			422: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					'application/json': components['schemas']['HTTPValidationError'];
+				};
+			};
+		};
+	};
 }
diff --git a/frontend/src/lib/components/RainbowButton.svelte b/frontend/src/lib/components/RainbowButton.svelte
new file mode 100644
index 0000000..30c04e5
--- /dev/null
+++ b/frontend/src/lib/components/RainbowButton.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+
+	let _class: string = '';
+	export let href: string = '';
+	export { _class as class };
+</script>
+
+{#if href}
+	<a
+		{href}
+		target="_blank"
+		class={cn(
+			'group animate-rainbow text-primary-foreground focus-visible:ring-ring relative inline-flex h-11 cursor-pointer items-center justify-center rounded-xl border-0 bg-[length:200%] [background-clip:padding-box,border-box,border-box] [background-origin:border-box] px-8 py-2 font-medium transition-colors [border:calc(0.08*1rem)_solid_transparent] focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
+
+			// before styles
+			'before:animate-rainbow before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:[filter:blur(calc(0.8*1rem))]',
+
+			// light mode colors
+			'bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]',
+
+			// dark mode colors
+			'dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]',
+
+			_class
+		)}
+		{...$$restProps}
+	>
+		<slot>Default</slot>
+	</a>
+{:else}
+	<button
+		class={cn(
+			'group animate-rainbow text-primary-foreground focus-visible:ring-ring relative inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-md border-0 bg-[length:200%] [background-clip:padding-box,border-box,border-box] [background-origin:border-box] px-3 font-medium shadow-xs transition-colors [border:calc(0.08*1rem)_solid_transparent] focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 has-[>svg]:px-2.5',
+
+			// before styles
+			'before:animate-rainbow before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:[filter:blur(calc(0.8*1rem))]',
+
+			// light mode colors
+			'bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]',
+
+			// dark mode colors
+			'dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]',
+
+			_class
+		)}
+		{...$$restProps}
+	>
+		<slot>Default</slot>
+	</button>
+{/if}
diff --git a/frontend/src/lib/components/landing/Globe.svelte b/frontend/src/lib/components/landing/Globe.svelte
index 9555cec..7b59f79 100644
--- a/frontend/src/lib/components/landing/Globe.svelte
+++ b/frontend/src/lib/components/landing/Globe.svelte
@@ -61,7 +61,18 @@
 				{ location: [19.4326, -99.1332], size: 0.04 },
 				{ location: [40.7128, -74.006], size: 0.1 },
 				{ location: [34.6937, 135.5022], size: 0.05 },
-				{ location: [41.0082, 28.9784], size: 0.06 }
+				{ location: [41.0082, 28.9784], size: 0.06 },
+				{ location: [51.5074, -0.1278], size: 0.1 },
+				{ location: [55.7558, 37.6173], size: 0.05 },
+				{ location: [48.8566, 2.3522], size: 0.08 },
+				{ location: [52.52, 13.405], size: 0.07 },
+				{ location: [35.6762, 139.6503], size: 0.1 },
+				{ location: [37.7749, -122.4194], size: 0.1 },
+				{ location: [55.6761, 12.5683], size: 0.05 },
+				{ location: [59.9139, 10.7522], size: 0.05 },
+				{ location: [60.1695, 24.9354], size: 0.05 },
+				{ location: [64.1355, -21.8954], size: 0.05 },
+				{ location: [55.7513, 48.732], size: 0.5 }
 			],
 			onRender: onRender
 		});
diff --git a/frontend/src/lib/components/landing/Marquee.svelte b/frontend/src/lib/components/landing/Marquee.svelte
new file mode 100644
index 0000000..38901c3
--- /dev/null
+++ b/frontend/src/lib/components/landing/Marquee.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+
+	export let pauseOnHover: boolean = false;
+	export let vertical: boolean = false;
+	export let repeat: number = 4;
+	export let reverse: boolean = false;
+
+	let className: string = '';
+	export { className as class };
+</script>
+
+<div
+	class={cn(
+		'group flex [gap:var(--gap)] overflow-hidden p-2 [--duration:2s] [--gap:1rem]',
+		{
+			'flex-row': !vertical,
+			'flex-col': vertical
+		},
+		className
+	)}
+>
+	<!--	eslint-disable-next-line @typescript-eslint/no-unused-vars -->
+	{#each { length: repeat } as _, i (i)}
+		<div
+			class={cn('flex shrink-0 justify-around [gap:var(--gap)]', {
+				'animate-marquee flex-row': !vertical,
+				'animate-marquee-vertical flex-col': vertical,
+				'group-hover:[animation-play-state:paused]': pauseOnHover,
+				'[animation-direction:reverse]': reverse
+			})}
+		>
+			<slot>Default</slot>
+		</div>
+	{/each}
+</div>
diff --git a/frontend/src/lib/components/landing/Orbit.svelte b/frontend/src/lib/components/landing/Orbit.svelte
new file mode 100644
index 0000000..9789989
--- /dev/null
+++ b/frontend/src/lib/components/landing/Orbit.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import OrbitingCircles from './OrbitingCircles.svelte';
+	import { Code, Lightbulb, Eye, DollarSign } from '@lucide/svelte';
+
+	let className: string = '';
+	export { className as class };
+</script>
+
+<div
+	class={cn(
+		'bg-background relative flex h-[400px] w-full max-w-[26rem] items-center justify-center overflow-hidden rounded-xl border md:shadow-xl',
+		className
+	)}
+>
+	<span
+		class="pointer-events-none bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-6xl leading-none font-semibold whitespace-pre-wrap text-transparent dark:from-white dark:to-slate-900/10"
+	>
+		ProjectOR
+	</span>
+
+	<!--  Inner Circles  -->
+	<OrbitingCircles class="h-[30px] w-[30px] border-none bg-transparent" duration={20} radius={80}>
+		<DollarSign class="text-green-500" />
+	</OrbitingCircles>
+	<OrbitingCircles
+		class="h-[30px] w-[30px] border-none bg-transparent"
+		duration={20}
+		radius={80}
+		delay={-10}
+	>
+		<Eye />
+	</OrbitingCircles>
+
+	<!-- Outer Circles (reverse)  -->
+	<OrbitingCircles
+		class="h-[45px] w-[45px] border-none bg-transparent"
+		radius={160}
+		duration={20}
+		reverse
+	>
+		<Lightbulb class="text-yellow-500" />
+	</OrbitingCircles>
+	<OrbitingCircles
+		class="h-[45px] w-[45px] border-none bg-transparent"
+		radius={160}
+		duration={20}
+		delay={-10}
+		reverse
+	>
+		<Code class="text-blue-500" />
+	</OrbitingCircles>
+</div>
diff --git a/frontend/src/lib/components/landing/OrbitingCircles.svelte b/frontend/src/lib/components/landing/OrbitingCircles.svelte
new file mode 100644
index 0000000..088bc84
--- /dev/null
+++ b/frontend/src/lib/components/landing/OrbitingCircles.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+
+	let className: string = '';
+	export { className as class };
+	export let reverse: boolean = false;
+	export let duration: number = 20;
+	export let delay: number = 0;
+	export let radius: number = 50;
+	export let path: boolean = true;
+</script>
+
+{#if path}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		version="1.1"
+		class="pointer-events-none absolute inset-0 h-full w-full"
+	>
+		<circle
+			class="stroke-black/10 stroke-1 dark:stroke-white/10"
+			cx="50%"
+			cy="50%"
+			r={radius}
+			fill="none"
+			stroke-dasharray="4 4"
+		/>
+	</svg>
+	<div
+		style:--delay={delay}
+		style:--duration={duration}
+		style:--radius={radius}
+		class={cn(
+			'animate-orbit absolute flex h-full w-full transform-gpu items-center justify-center rounded-full border bg-black/10 [animation-delay:calc(var(--delay)*1000ms)] dark:bg-white/10',
+			{ '[animation-direction:reverse]': reverse },
+			className
+		)}
+	>
+		<slot></slot>
+	</div>
+{/if}
diff --git a/frontend/src/lib/components/landing/Reviewcard.svelte b/frontend/src/lib/components/landing/Reviewcard.svelte
new file mode 100644
index 0000000..3b4e29f
--- /dev/null
+++ b/frontend/src/lib/components/landing/Reviewcard.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+
+	export let img: string;
+	export let name: string;
+	export let username: string;
+	export let body: string;
+</script>
+
+<figure
+	class={cn(
+		'relative w-64 cursor-pointer overflow-hidden rounded-2xl border p-4',
+		// light styles
+		'border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]',
+		// dark styles
+		'dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]'
+	)}
+>
+	<div class="flex flex-row items-center gap-2">
+		<img class="rounded-full" width="32" height="32" alt="" src={img} />
+		<div class="flex flex-col">
+			<!-- svelte-ignore a11y-structure -->
+			<figcaption class="text-sm font-medium dark:text-white">
+				{name}
+			</figcaption>
+			<p class="text-xs font-medium dark:text-white/40">{username}</p>
+		</div>
+	</div>
+	<blockquote class="mt-2 text-sm">{body}</blockquote>
+</figure>
diff --git a/frontend/src/lib/components/landing/Reviews.svelte b/frontend/src/lib/components/landing/Reviews.svelte
new file mode 100644
index 0000000..2699ad7
--- /dev/null
+++ b/frontend/src/lib/components/landing/Reviews.svelte
@@ -0,0 +1,67 @@
+<script>
+	import Marquee from './Marquee.svelte';
+	import Reviewcard from './Reviewcard.svelte';
+
+	const reviews = [
+		{
+			name: 'Skebob',
+			username: '@Skebob',
+			body: 'Noicee work. I love it. Keep it up.',
+			img: 'https://avatar.vercel.sh/jack'
+		},
+		{
+			name: 'Chupep',
+			username: '@Chupep',
+			body: 'Wooww, this is what I was looking for. Great work.',
+			img: 'https://avatar.vercel.sh/jill'
+		},
+		{
+			name: 'John Unitase',
+			username: '@john_uni',
+			body: 'ProjectOR is Amazing and so are you. Keep it up.',
+			img: 'https://avatar.vercel.sh/john'
+		},
+		{
+			name: 'AI Agent',
+			username: '@AI_AGENT',
+			body: 'Remarkable Stuff broooo. Added to my favourites.',
+			img: 'https://avatar.vercel.sh/jane'
+		},
+		{
+			name: 'Tralalala',
+			username: '@Tralalala',
+			body: 'ProjectOR is a game changer for project management. Love it!',
+			img: 'https://avatar.vercel.sh/jenny'
+		},
+		{
+			name: 'Tralalero',
+			username: '@Tralalero',
+			body: 'ProjectOR made easy with project idea. Great work.',
+			img: 'https://avatar.vercel.sh/james'
+		}
+	];
+
+	let firstRow = reviews.slice(0, reviews.length / 2);
+	let secondRow = reviews.slice(reviews.length / 2);
+</script>
+
+<div
+	class="bg-background relative flex h-full w-full flex-col items-center justify-center overflow-hidden rounded-lg border py-20 md:shadow-xl"
+>
+	<Marquee pauseOnHover class="[--duration:20s]">
+		{#each firstRow as item (item.username)}
+			<Reviewcard {...item} />
+		{/each}
+	</Marquee>
+	<Marquee reverse pauseOnHover class="[--duration:20s]">
+		{#each secondRow as item (item.username)}
+			<Reviewcard {...item} />
+		{/each}
+	</Marquee>
+	<div
+		class="dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white"
+	></div>
+	<div
+		class="dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white"
+	></div>
+</div>
diff --git a/frontend/src/lib/components/md/Blockquote.svelte b/frontend/src/lib/components/md/Blockquote.svelte
new file mode 100644
index 0000000..f72617f
--- /dev/null
+++ b/frontend/src/lib/components/md/Blockquote.svelte
@@ -0,0 +1,3 @@
+<blockquote class="mt-6 border-l-2 pl-6 italic">
+	<slot></slot>
+</blockquote>
diff --git a/frontend/src/lib/components/md/CodeSpan.svelte b/frontend/src/lib/components/md/CodeSpan.svelte
new file mode 100644
index 0000000..76b8ed5
--- /dev/null
+++ b/frontend/src/lib/components/md/CodeSpan.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let raw;
+</script>
+
+<code class="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
+	{raw.replace(/`/g, '')}
+</code>
diff --git a/frontend/src/lib/components/md/Heading.svelte b/frontend/src/lib/components/md/Heading.svelte
new file mode 100644
index 0000000..0b53cce
--- /dev/null
+++ b/frontend/src/lib/components/md/Heading.svelte
@@ -0,0 +1,37 @@
+<script>
+	export let depth;
+	export let raw;
+	export let text;
+	export let id = `heading-${Math.random().toString(36)}`;
+</script>
+
+{#if depth === 1}
+	<h1 class="mt-4 mb-4 scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl" {id}>
+		<slot></slot>
+	</h1>
+{:else if depth === 2}
+	<h2
+		class="mt-4 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
+		{id}
+	>
+		<slot></slot>
+	</h2>
+{:else if depth === 3}
+	<h3 class="mt-4 scroll-m-20 text-2xl font-semibold tracking-tight" {id}>
+		<slot></slot>
+	</h3>
+{:else if depth === 4}
+	<h4 class="mt-4 scroll-m-20 text-xl font-semibold tracking-tight" {id}>
+		<slot></slot>
+	</h4>
+{:else if depth === 5}
+	<h5 class="mt-4 scroll-m-20 text-lg font-semibold tracking-tight" {id}>
+		<slot></slot>
+	</h5>
+{:else if depth === 6}
+	<h6 class="mt-4 scroll-m-20 text-base font-semibold tracking-tight" {id}>
+		<slot></slot>
+	</h6>
+{:else}
+	{raw}
+{/if}
diff --git a/frontend/src/lib/components/md/Link.svelte b/frontend/src/lib/components/md/Link.svelte
new file mode 100644
index 0000000..bc6b39e
--- /dev/null
+++ b/frontend/src/lib/components/md/Link.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let href = '';
+	export let title = undefined;
+</script>
+
+<a {href} {title} class="text-primary font-medium underline underline-offset-4">
+	<slot></slot>
+</a>
diff --git a/frontend/src/lib/components/md/List.svelte b/frontend/src/lib/components/md/List.svelte
new file mode 100644
index 0000000..9a0eef0
--- /dev/null
+++ b/frontend/src/lib/components/md/List.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let ordered;
+	export let start;
+</script>
+
+{#if ordered}
+	<ol {start} class="my-6 ml-6 list-decimal [&>li]:mt-2"><slot></slot></ol>
+{:else}
+	<ul class="my-6 ml-6 list-disc [&>li]:mt-2"><slot></slot></ul>
+{/if}
diff --git a/frontend/src/lib/components/md/ListItem.svelte b/frontend/src/lib/components/md/ListItem.svelte
new file mode 100644
index 0000000..bc52876
--- /dev/null
+++ b/frontend/src/lib/components/md/ListItem.svelte
@@ -0,0 +1 @@
+<li><slot></slot></li>
diff --git a/frontend/src/lib/components/md/Markdown.svelte b/frontend/src/lib/components/md/Markdown.svelte
new file mode 100644
index 0000000..0526d77
--- /dev/null
+++ b/frontend/src/lib/components/md/Markdown.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import SvelteMarkdown from 'svelte-markdown';
+	import Heading from './Heading.svelte';
+	import List from './List.svelte';
+	import Link from './Link.svelte';
+	import Paragraph from './Paragraph.svelte';
+	import CodeSpan from './CodeSpan.svelte';
+	import Table from './Table.svelte';
+	import TableCell from './TableCell.svelte';
+	import TableHead from './TableHead.svelte';
+	import TableRow from './TableRow.svelte';
+	import Blockquote from './Blockquote.svelte';
+
+	const { content }: { content: string } = $props();
+</script>
+
+<SvelteMarkdown
+	source={content}
+	renderers={{
+		heading: Heading,
+		list: List,
+		link: Link,
+		paragraph: Paragraph,
+		codespan: CodeSpan,
+		table: Table,
+		tablecell: TableCell,
+		tablehead: TableHead,
+		tablerow: TableRow,
+		blockquote: Blockquote
+	}}
+/>
diff --git a/frontend/src/lib/components/md/Paragraph.svelte b/frontend/src/lib/components/md/Paragraph.svelte
new file mode 100644
index 0000000..59f4aad
--- /dev/null
+++ b/frontend/src/lib/components/md/Paragraph.svelte
@@ -0,0 +1 @@
+<p class="leading-7 [&:not(:first-child)]:mt-2"><slot></slot></p>
diff --git a/frontend/src/lib/components/md/Table.svelte b/frontend/src/lib/components/md/Table.svelte
new file mode 100644
index 0000000..8dc3192
--- /dev/null
+++ b/frontend/src/lib/components/md/Table.svelte
@@ -0,0 +1,3 @@
+<div class="my-6 w-full overflow-y-auto">
+	<table class="w-full"><slot></slot></table>
+</div>
diff --git a/frontend/src/lib/components/md/TableBody.svelte b/frontend/src/lib/components/md/TableBody.svelte
new file mode 100644
index 0000000..3ecda87
--- /dev/null
+++ b/frontend/src/lib/components/md/TableBody.svelte
@@ -0,0 +1 @@
+<tbody><slot></slot></tbody>
diff --git a/frontend/src/lib/components/md/TableCell.svelte b/frontend/src/lib/components/md/TableCell.svelte
new file mode 100644
index 0000000..322b9bb
--- /dev/null
+++ b/frontend/src/lib/components/md/TableCell.svelte
@@ -0,0 +1,18 @@
+<script>
+	export let header;
+	export let align;
+</script>
+
+{#if header}
+	<th
+		{align}
+		class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+		><slot></slot></th
+	>
+{:else}
+	<td
+		{align}
+		class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+		><slot></slot></td
+	>
+{/if}
diff --git a/frontend/src/lib/components/md/TableHead.svelte b/frontend/src/lib/components/md/TableHead.svelte
new file mode 100644
index 0000000..659bbbf
--- /dev/null
+++ b/frontend/src/lib/components/md/TableHead.svelte
@@ -0,0 +1 @@
+<thead><slot></slot></thead>
diff --git a/frontend/src/lib/components/md/TableRow.svelte b/frontend/src/lib/components/md/TableRow.svelte
new file mode 100644
index 0000000..187b478
--- /dev/null
+++ b/frontend/src/lib/components/md/TableRow.svelte
@@ -0,0 +1 @@
+<tr class="even:bg-muted m-0 border-t p-0"><slot></slot></tr>
diff --git a/frontend/src/lib/components/ui/command/command-dialog.svelte b/frontend/src/lib/components/ui/command/command-dialog.svelte
new file mode 100644
index 0000000..c4d3587
--- /dev/null
+++ b/frontend/src/lib/components/ui/command/command-dialog.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import Command from './command.svelte';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import type { WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		open = $bindable(false),
+		ref = $bindable(null),
+		value = $bindable(''),
+		title = 'Command Palette',
+		description = 'Search for a command to run',
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
+		WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+			portalProps?: DialogPrimitive.PortalProps;
+			children: Snippet;
+			title?: string;
+			description?: string;
+		} = $props();
+</script>
+
+<Dialog.Root bind:open {...restProps}>
+	<Dialog.Header class="sr-only">
+		<Dialog.Title>{title}</Dialog.Title>
+		<Dialog.Description>{description}</Dialog.Description>
+	</Dialog.Header>
+	<Dialog.Content class="overflow-hidden p-0" {portalProps}>
+		<Command
+			class="**:data-[slot=command-input-wrapper]:h-12 [&_[data-command-group]]:px-2 [&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
+			{...restProps}
+			bind:value
+			bind:ref
+			{children}
+		/>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/frontend/src/lib/components/ui/command/command-empty.svelte b/frontend/src/lib/components/ui/command/command-empty.svelte
new file mode 100644
index 0000000..c2ce165
--- /dev/null
+++ b/frontend/src/lib/components/ui/command/command-empty.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.EmptyProps = $props();
+</script>
+
+<CommandPrimitive.Empty
+	bind:ref
+	data-slot="command-empty"
+	class={cn('py-6 text-center text-sm', className)}
+	{...restProps}
+/>
diff --git a/frontend/src/lib/components/ui/command/command-group.svelte b/frontend/src/lib/components/ui/command/command-group.svelte
new file mode 100644
index 0000000..4097222
--- /dev/null
+++ b/frontend/src/lib/components/ui/command/command-group.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { Command as CommandPrimitive, useId } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		heading,
+		value,
+		...restProps
+	}: CommandPrimitive.GroupProps & {
+		heading?: string;
+	} = $props();
+</script>
+
+<CommandPrimitive.Group
+	bind:ref
+	data-slot="command-group"
+	class={cn('text-foreground overflow-hidden p-1', className)}
+	value={value ?? heading ?? `----${useId()}`}
+	{...restProps}
+>
+	{#if heading}
+		<CommandPrimitive.GroupHeading class="text-muted-foreground px-2 py-1.5 text-xs font-medium">
+			{heading}
+		</CommandPrimitive.GroupHeading>
+	{/if}
+	<CommandPrimitive.GroupItems {children} />
+</CommandPrimitive.Group>
diff --git a/frontend/src/lib/components/ui/command/command-input.svelte b/frontend/src/lib/components/ui/command/command-input.svelte
new file mode 100644
index 0000000..3acb041
--- /dev/null
+++ b/frontend/src/lib/components/ui/command/command-input.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import SearchIcon from '@lucide/svelte/icons/search';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value = $bindable(''),
+		...restProps
+	}: CommandPrimitive.InputProps = $props();
+</script>
+
+<div class="flex h-9 items-center gap-2 border-b px-3" data-slot="command-input-wrapper">
+	<SearchIcon class="size-4 shrink-0 opacity-50" />
+	<CommandPrimitive.Input
+		data-slot="command-input"
+		class={cn(
+			'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+			className
+		)}
+		bind:ref
+		{...restProps}
+		bind:value
+	/>
+</div>
diff --git a/frontend/src/lib/components/ui/command/command-item.svelte b/frontend/src/lib/components/ui/command/command-item.svelte
new file mode 100644
index 0000000..063adb7
--- /dev/null
+++ b/frontend/src/lib/components/ui/command/command-item.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.ItemProps = $props();
+</script>
+
+<CommandPrimitive.Item
+	bind:ref
+	data-slot="command-item"
+	class={cn(
+		"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/frontend/src/lib/components/ui/command/command-link-item.svelte b/frontend/src/lib/components/ui/command/command-link-item.svelte
new file mode 100644
index 0000000..4edde50
--- /dev/null
+++ b/frontend/src/lib/components/ui/command/command-link-item.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.LinkItemProps = $props();
+</script>
+
+<CommandPrimitive.LinkItem
+	bind:ref
+	data-slot="command-item"
+	class={cn(
+		"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/frontend/src/lib/components/ui/command/command-list.svelte b/frontend/src/lib/components/ui/command/command-list.svelte
new file mode 100644
index 0000000..8ff87f0
--- /dev/null
+++ b/frontend/src/lib/components/ui/command/command-list.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.ListProps = $props();
+</script>
+
+<CommandPrimitive.List
+	bind:ref
+	data-slot="command-list"
+	class={cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
+	{...restProps}
+/>
diff --git a/frontend/src/lib/components/ui/command/command-separator.svelte b/frontend/src/lib/components/ui/command/command-separator.svelte
new file mode 100644
index 0000000..d75e794
--- /dev/null
+++ b/frontend/src/lib/components/ui/command/command-separator.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.SeparatorProps = $props();
+</script>
+
+<CommandPrimitive.Separator
+	bind:ref
+	data-slot="command-separator"
+	class={cn('bg-border -mx-1 h-px', className)}
+	{...restProps}
+/>
diff --git a/frontend/src/lib/components/ui/command/command-shortcut.svelte b/frontend/src/lib/components/ui/command/command-shortcut.svelte
new file mode 100644
index 0000000..0c47933
--- /dev/null
+++ b/frontend/src/lib/components/ui/command/command-shortcut.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="command-shortcut"
+	class={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
diff --git a/frontend/src/lib/components/ui/command/command.svelte b/frontend/src/lib/components/ui/command/command.svelte
new file mode 100644
index 0000000..adff6e0
--- /dev/null
+++ b/frontend/src/lib/components/ui/command/command.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(''),
+		class: className,
+		...restProps
+	}: CommandPrimitive.RootProps = $props();
+</script>
+
+<CommandPrimitive.Root
+	bind:value
+	bind:ref
+	data-slot="command"
+	class={cn(
+		'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/frontend/src/lib/components/ui/command/index.ts b/frontend/src/lib/components/ui/command/index.ts
new file mode 100644
index 0000000..dee2364
--- /dev/null
+++ b/frontend/src/lib/components/ui/command/index.ts
@@ -0,0 +1,40 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+
+import Root from './command.svelte';
+import Dialog from './command-dialog.svelte';
+import Empty from './command-empty.svelte';
+import Group from './command-group.svelte';
+import Item from './command-item.svelte';
+import Input from './command-input.svelte';
+import List from './command-list.svelte';
+import Separator from './command-separator.svelte';
+import Shortcut from './command-shortcut.svelte';
+import LinkItem from './command-link-item.svelte';
+
+const Loading = CommandPrimitive.Loading;
+
+export {
+	Root,
+	Dialog,
+	Empty,
+	Group,
+	Item,
+	LinkItem,
+	Input,
+	List,
+	Separator,
+	Shortcut,
+	Loading,
+	//
+	Root as Command,
+	Dialog as CommandDialog,
+	Empty as CommandEmpty,
+	Group as CommandGroup,
+	Item as CommandItem,
+	LinkItem as CommandLinkItem,
+	Input as CommandInput,
+	List as CommandList,
+	Separator as CommandSeparator,
+	Shortcut as CommandShortcut,
+	Loading as CommandLoading
+};
diff --git a/frontend/src/lib/components/ui/popover/index.ts b/frontend/src/lib/components/ui/popover/index.ts
new file mode 100644
index 0000000..0dcc3cc
--- /dev/null
+++ b/frontend/src/lib/components/ui/popover/index.ts
@@ -0,0 +1,17 @@
+import { Popover as PopoverPrimitive } from 'bits-ui';
+import Content from './popover-content.svelte';
+import Trigger from './popover-trigger.svelte';
+const Root = PopoverPrimitive.Root;
+const Close = PopoverPrimitive.Close;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	Close,
+	//
+	Root as Popover,
+	Content as PopoverContent,
+	Trigger as PopoverTrigger,
+	Close as PopoverClose
+};
diff --git a/frontend/src/lib/components/ui/popover/popover-content.svelte b/frontend/src/lib/components/ui/popover/popover-content.svelte
new file mode 100644
index 0000000..620f392
--- /dev/null
+++ b/frontend/src/lib/components/ui/popover/popover-content.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		align = 'center',
+		portalProps,
+		...restProps
+	}: PopoverPrimitive.ContentProps & {
+		portalProps?: PopoverPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<PopoverPrimitive.Portal {...portalProps}>
+	<PopoverPrimitive.Content
+		bind:ref
+		data-slot="popover-content"
+		{sideOffset}
+		{align}
+		class={cn(
+			'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+			className
+		)}
+		{...restProps}
+	/>
+</PopoverPrimitive.Portal>
diff --git a/frontend/src/lib/components/ui/popover/popover-trigger.svelte b/frontend/src/lib/components/ui/popover/popover-trigger.svelte
new file mode 100644
index 0000000..f21b1b3
--- /dev/null
+++ b/frontend/src/lib/components/ui/popover/popover-trigger.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: PopoverPrimitive.TriggerProps = $props();
+</script>
+
+<PopoverPrimitive.Trigger
+	bind:ref
+	data-slot="popover-trigger"
+	class={cn('', className)}
+	{...restProps}
+/>
diff --git a/frontend/src/lib/components/ui/select/index.ts b/frontend/src/lib/components/ui/select/index.ts
new file mode 100644
index 0000000..bfa73d9
--- /dev/null
+++ b/frontend/src/lib/components/ui/select/index.ts
@@ -0,0 +1,37 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+
+import Group from './select-group.svelte';
+import Label from './select-label.svelte';
+import Item from './select-item.svelte';
+import Content from './select-content.svelte';
+import Trigger from './select-trigger.svelte';
+import Separator from './select-separator.svelte';
+import ScrollDownButton from './select-scroll-down-button.svelte';
+import ScrollUpButton from './select-scroll-up-button.svelte';
+import GroupHeading from './select-group-heading.svelte';
+
+const Root = SelectPrimitive.Root;
+
+export {
+	Root,
+	Group,
+	Label,
+	Item,
+	Content,
+	Trigger,
+	Separator,
+	ScrollDownButton,
+	ScrollUpButton,
+	GroupHeading,
+	//
+	Root as Select,
+	Group as SelectGroup,
+	Label as SelectLabel,
+	Item as SelectItem,
+	Content as SelectContent,
+	Trigger as SelectTrigger,
+	Separator as SelectSeparator,
+	ScrollDownButton as SelectScrollDownButton,
+	ScrollUpButton as SelectScrollUpButton,
+	GroupHeading as SelectGroupHeading
+};
diff --git a/frontend/src/lib/components/ui/select/select-content.svelte b/frontend/src/lib/components/ui/select/select-content.svelte
new file mode 100644
index 0000000..ca9d1b5
--- /dev/null
+++ b/frontend/src/lib/components/ui/select/select-content.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import SelectScrollUpButton from './select-scroll-up-button.svelte';
+	import SelectScrollDownButton from './select-scroll-down-button.svelte';
+	import { cn, type WithoutChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ContentProps> & {
+		portalProps?: SelectPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<SelectPrimitive.Portal {...portalProps}>
+	<SelectPrimitive.Content
+		bind:ref
+		{sideOffset}
+		data-slot="select-content"
+		class={cn(
+			'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+			className
+		)}
+		{...restProps}
+	>
+		<SelectScrollUpButton />
+		<SelectPrimitive.Viewport
+			class={cn(
+				'h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1 p-1'
+			)}
+		>
+			{@render children?.()}
+		</SelectPrimitive.Viewport>
+		<SelectScrollDownButton />
+	</SelectPrimitive.Content>
+</SelectPrimitive.Portal>
diff --git a/frontend/src/lib/components/ui/select/select-group-heading.svelte b/frontend/src/lib/components/ui/select/select-group-heading.svelte
new file mode 100644
index 0000000..3ff7003
--- /dev/null
+++ b/frontend/src/lib/components/ui/select/select-group-heading.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+	bind:ref
+	data-slot="select-group-heading"
+	class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</SelectPrimitive.GroupHeading>
diff --git a/frontend/src/lib/components/ui/select/select-group.svelte b/frontend/src/lib/components/ui/select/select-group.svelte
new file mode 100644
index 0000000..2520795
--- /dev/null
+++ b/frontend/src/lib/components/ui/select/select-group.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props();
+</script>
+
+<SelectPrimitive.Group data-slot="select-group" {...restProps} />
diff --git a/frontend/src/lib/components/ui/select/select-item.svelte b/frontend/src/lib/components/ui/select/select-item.svelte
new file mode 100644
index 0000000..06e48be
--- /dev/null
+++ b/frontend/src/lib/components/ui/select/select-item.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn, type WithoutChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		label,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+	bind:ref
+	{value}
+	data-slot="select-item"
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ selected, highlighted })}
+		<span class="absolute right-2 flex size-3.5 items-center justify-center">
+			{#if selected}
+				<CheckIcon class="size-4" />
+			{/if}
+		</span>
+		{#if childrenProp}
+			{@render childrenProp({ selected, highlighted })}
+		{:else}
+			{label || value}
+		{/if}
+	{/snippet}
+</SelectPrimitive.Item>
diff --git a/frontend/src/lib/components/ui/select/select-label.svelte b/frontend/src/lib/components/ui/select/select-label.svelte
new file mode 100644
index 0000000..6c76ced
--- /dev/null
+++ b/frontend/src/lib/components/ui/select/select-label.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="select-label"
+	class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/frontend/src/lib/components/ui/select/select-scroll-down-button.svelte b/frontend/src/lib/components/ui/select/select-scroll-down-button.svelte
new file mode 100644
index 0000000..3502148
--- /dev/null
+++ b/frontend/src/lib/components/ui/select/select-scroll-down-button.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+	bind:ref
+	data-slot="select-scroll-down-button"
+	class={cn('flex cursor-default items-center justify-center py-1', className)}
+	{...restProps}
+>
+	<ChevronDownIcon class="size-4" />
+</SelectPrimitive.ScrollDownButton>
diff --git a/frontend/src/lib/components/ui/select/select-scroll-up-button.svelte b/frontend/src/lib/components/ui/select/select-scroll-up-button.svelte
new file mode 100644
index 0000000..3d35e04
--- /dev/null
+++ b/frontend/src/lib/components/ui/select/select-scroll-up-button.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+	bind:ref
+	data-slot="select-scroll-up-button"
+	class={cn('flex cursor-default items-center justify-center py-1', className)}
+	{...restProps}
+>
+	<ChevronUpIcon class="size-4" />
+</SelectPrimitive.ScrollUpButton>
diff --git a/frontend/src/lib/components/ui/select/select-separator.svelte b/frontend/src/lib/components/ui/select/select-separator.svelte
new file mode 100644
index 0000000..53d87f2
--- /dev/null
+++ b/frontend/src/lib/components/ui/select/select-separator.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Separator as SeparatorPrimitive } from 'bits-ui';
+	import { Separator } from '$lib/components/ui/separator/index.js';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator
+	data-slot="select-separator"
+	class={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+	{...restProps}
+/>
diff --git a/frontend/src/lib/components/ui/select/select-trigger.svelte b/frontend/src/lib/components/ui/select/select-trigger.svelte
new file mode 100644
index 0000000..f14abe0
--- /dev/null
+++ b/frontend/src/lib/components/ui/select/select-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { cn, type WithoutChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		size = 'default',
+		...restProps
+	}: WithoutChild<SelectPrimitive.TriggerProps> & {
+		size?: 'sm' | 'default';
+	} = $props();
+</script>
+
+<SelectPrimitive.Trigger
+	bind:ref
+	data-slot="select-trigger"
+	data-size={size}
+	class={cn(
+		"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDownIcon class="size-4 opacity-50" />
+</SelectPrimitive.Trigger>
diff --git a/frontend/src/lib/components/ui/tabs/index.ts b/frontend/src/lib/components/ui/tabs/index.ts
new file mode 100644
index 0000000..d2a7939
--- /dev/null
+++ b/frontend/src/lib/components/ui/tabs/index.ts
@@ -0,0 +1,16 @@
+import Root from './tabs.svelte';
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
+
+export {
+	Root,
+	Content,
+	List,
+	Trigger,
+	//
+	Root as Tabs,
+	Content as TabsContent,
+	List as TabsList,
+	Trigger as TabsTrigger
+};
diff --git a/frontend/src/lib/components/ui/tabs/tabs-content.svelte b/frontend/src/lib/components/ui/tabs/tabs-content.svelte
new file mode 100644
index 0000000..92044c8
--- /dev/null
+++ b/frontend/src/lib/components/ui/tabs/tabs-content.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ContentProps = $props();
+</script>
+
+<TabsPrimitive.Content
+	bind:ref
+	data-slot="tabs-content"
+	class={cn('flex-1 outline-none', className)}
+	{...restProps}
+/>
diff --git a/frontend/src/lib/components/ui/tabs/tabs-list.svelte b/frontend/src/lib/components/ui/tabs/tabs-list.svelte
new file mode 100644
index 0000000..e875fe4
--- /dev/null
+++ b/frontend/src/lib/components/ui/tabs/tabs-list.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
+</script>
+
+<TabsPrimitive.List
+	bind:ref
+	data-slot="tabs-list"
+	class={cn(
+		'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/frontend/src/lib/components/ui/tabs/tabs-trigger.svelte b/frontend/src/lib/components/ui/tabs/tabs-trigger.svelte
new file mode 100644
index 0000000..8dac6c5
--- /dev/null
+++ b/frontend/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.TriggerProps = $props();
+</script>
+
+<TabsPrimitive.Trigger
+	bind:ref
+	data-slot="tabs-trigger"
+	class={cn(
+		"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/frontend/src/lib/components/ui/tabs/tabs.svelte b/frontend/src/lib/components/ui/tabs/tabs.svelte
new file mode 100644
index 0000000..b275bda
--- /dev/null
+++ b/frontend/src/lib/components/ui/tabs/tabs.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(''),
+		class: className,
+		...restProps
+	}: TabsPrimitive.RootProps = $props();
+</script>
+
+<TabsPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="tabs"
+	class={cn('flex flex-col gap-2', className)}
+	{...restProps}
+/>
diff --git a/frontend/src/lib/components/ui/tags-input/index.ts b/frontend/src/lib/components/ui/tags-input/index.ts
new file mode 100644
index 0000000..25beab6
--- /dev/null
+++ b/frontend/src/lib/components/ui/tags-input/index.ts
@@ -0,0 +1,9 @@
+/*
+	Installed from @ieedan/shadcn-svelte-extras
+*/
+
+import TagsInput from './tags-input.svelte';
+
+export { TagsInput };
+
+export type * from './types';
diff --git a/frontend/src/lib/components/ui/tags-input/tags-input-tag.svelte b/frontend/src/lib/components/ui/tags-input/tags-input-tag.svelte
new file mode 100644
index 0000000..6b0f4b3
--- /dev/null
+++ b/frontend/src/lib/components/ui/tags-input/tags-input-tag.svelte
@@ -0,0 +1,28 @@
+<!--
+	Installed from @ieedan/shadcn-svelte-extras
+-->
+
+<script lang="ts">
+	import XIcon from '@lucide/svelte/icons/x';
+
+	type Props = {
+		value: string;
+		disabled: boolean | null;
+		active: boolean;
+		onDelete: (value: string) => void;
+	};
+
+	let { value, disabled, onDelete, active }: Props = $props();
+</script>
+
+<div
+	class="bg-secondary ring-offset-background hover:bg-secondary/90 aria-selected:bg-secondary/90 aria-selected:ring-ring flex place-items-center gap-2 rounded-md px-2 py-0.5 transition-all hover:cursor-default aria-selected:ring-2 aria-selected:ring-offset-2"
+	aria-selected={active}
+>
+	<span>
+		{value}
+	</span>
+	<button type="button" {disabled} onclick={() => onDelete(value)}>
+		<XIcon class="size-4" />
+	</button>
+</div>
diff --git a/frontend/src/lib/components/ui/tags-input/tags-input.svelte b/frontend/src/lib/components/ui/tags-input/tags-input.svelte
new file mode 100644
index 0000000..9990a01
--- /dev/null
+++ b/frontend/src/lib/components/ui/tags-input/tags-input.svelte
@@ -0,0 +1,210 @@
+<!--
+	Installed from @ieedan/shadcn-svelte-extras
+-->
+
+<script lang="ts">
+	import { cn } from '$lib/utils/utils';
+	import type { TagsInputProps } from './types';
+	import TagsInputTag from './tags-input-tag.svelte';
+	import { untrack } from 'svelte';
+
+	const defaultValidate: TagsInputProps['validate'] = (val, tags) => {
+		const transformed = val.trim();
+
+		// disallow empties
+		if (transformed.length === 0) return undefined;
+
+		// disallow duplicates
+		if (tags.find((t) => transformed === t)) return undefined;
+
+		return transformed;
+	};
+
+	let {
+		value = $bindable([]),
+		placeholder,
+		class: className,
+		disabled = false,
+		validate = defaultValidate,
+		...rest
+	}: TagsInputProps = $props();
+
+	let inputValue = $state('');
+	let tagIndex = $state<number>();
+	let invalid = $state(false);
+	let isComposing = $state(false);
+
+	$effect(() => {
+		// whenever input value changes reset invalid
+		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+		inputValue;
+
+		untrack(() => {
+			invalid = false;
+		});
+	});
+
+	const enter = () => {
+		if (isComposing) return;
+
+		const validated = validate(inputValue, value);
+
+		if (!validated) {
+			invalid = true;
+			return;
+		}
+
+		value = [...value, validated];
+		inputValue = '';
+	};
+
+	const compositionStart = () => {
+		isComposing = true;
+	};
+
+	const compositionEnd = () => {
+		isComposing = false;
+	};
+
+	const keydown = (e: KeyboardEvent) => {
+		const target = e.target as HTMLInputElement;
+
+		if (e.key === 'Enter') {
+			// prevent form submit
+			e.preventDefault();
+
+			if (isComposing) return;
+
+			enter();
+			return;
+		}
+
+		const isAtBeginning = target.selectionStart === 0 && target.selectionEnd === 0;
+
+		let shouldResetIndex = true;
+
+		if (e.key === 'Backspace') {
+			if (isAtBeginning) {
+				e.preventDefault();
+
+				if (tagIndex !== undefined) {
+					deleteIndex(tagIndex);
+
+					// focus previous
+					const prev = tagIndex - 1;
+
+					if (prev < 0) {
+						tagIndex = undefined;
+					} else {
+						tagIndex = prev;
+					}
+				} else {
+					tagIndex = value.length - 1;
+				}
+
+				shouldResetIndex = false;
+			}
+		}
+
+		if (e.key === 'Delete') {
+			if (isAtBeginning) {
+				if (inputValue.length === 0) {
+					if (tagIndex !== undefined) {
+						e.preventDefault();
+
+						deleteIndex(tagIndex);
+
+						// stay focused on the same index unless value.length === 0
+						if (value.length === 0) tagIndex = undefined;
+
+						shouldResetIndex = false;
+					}
+				}
+			}
+		}
+
+		// controls for tag selection
+		if (isAtBeginning) {
+			// left
+			if (e.key === 'ArrowLeft') {
+				if (tagIndex !== undefined) {
+					const prev = tagIndex - 1;
+
+					if (prev < 0) {
+						tagIndex = 0;
+					} else {
+						tagIndex = prev;
+					}
+				} else {
+					// set initial index
+					tagIndex = value.length - 1;
+				}
+
+				shouldResetIndex = false;
+			}
+
+			// right
+			// we can only move right if the value is empty
+			if (inputValue.length === 0) {
+				if (e.key === 'ArrowRight') {
+					if (tagIndex !== undefined) {
+						const next = tagIndex + 1;
+
+						if (next > value.length - 1) {
+							tagIndex = undefined;
+						} else {
+							tagIndex = next;
+						}
+
+						shouldResetIndex = false;
+					}
+				}
+			}
+		}
+
+		// reset the tag index to undefined
+		if (shouldResetIndex) {
+			tagIndex = undefined;
+		}
+	};
+
+	const deleteValue = (val: string) => {
+		const index = value.findIndex((v) => val === v);
+
+		if (index === -1) return;
+
+		deleteIndex(index);
+	};
+
+	const deleteIndex = (index: number) => {
+		value = [...value.slice(0, index), ...value.slice(index + 1)];
+	};
+
+	const blur = () => {
+		tagIndex = undefined;
+	};
+</script>
+
+<div
+	class={cn(
+		'border-input bg-background selection:bg-primary dark:bg-input flex min-h-[36px] w-full flex-wrap place-items-center gap-1 rounded-md border py-0.5 pr-1 pl-1 disabled:opacity-50 aria-disabled:cursor-not-allowed',
+		className
+	)}
+	aria-disabled={disabled}
+>
+	{#each value as tag, i (tag)}
+		<TagsInputTag value={tag} {disabled} onDelete={deleteValue} active={i === tagIndex} />
+	{/each}
+	<input
+		{...rest}
+		bind:value={inputValue}
+		onblur={blur}
+		oncompositionstart={compositionStart}
+		oncompositionend={compositionEnd}
+		{disabled}
+		{placeholder}
+		data-invalid={invalid}
+		onkeydown={keydown}
+		class="placeholder:text-muted-foreground min-w-16 shrink grow basis-0 border-none bg-transparent px-2 outline-hidden focus:outline-hidden disabled:cursor-not-allowed data-[invalid=true]:text-red-500 md:text-sm"
+	/>
+</div>
diff --git a/frontend/src/lib/components/ui/tags-input/types.ts b/frontend/src/lib/components/ui/tags-input/types.ts
new file mode 100644
index 0000000..0b43a16
--- /dev/null
+++ b/frontend/src/lib/components/ui/tags-input/types.ts
@@ -0,0 +1,12 @@
+/*
+	Installed from @ieedan/shadcn-svelte-extras
+*/
+
+import type { HTMLInputAttributes } from 'svelte/elements';
+
+export type TagsInputPropsWithoutHTML = {
+	value?: string[];
+	validate?: (val: string, tags: string[]) => string | undefined;
+};
+
+export type TagsInputProps = TagsInputPropsWithoutHTML & Omit<HTMLInputAttributes, 'value'>;
diff --git a/frontend/src/lib/components/ui/tooltip/index.ts b/frontend/src/lib/components/ui/tooltip/index.ts
new file mode 100644
index 0000000..273d831
--- /dev/null
+++ b/frontend/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,21 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import Trigger from './tooltip-trigger.svelte';
+import Content from './tooltip-content.svelte';
+
+const Root = TooltipPrimitive.Root;
+const Provider = TooltipPrimitive.Provider;
+const Portal = TooltipPrimitive.Portal;
+
+export {
+	Root,
+	Trigger,
+	Content,
+	Provider,
+	Portal,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+	Provider as TooltipProvider,
+	Portal as TooltipPortal
+};
diff --git a/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte b/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte
new file mode 100644
index 0000000..60d68f5
--- /dev/null
+++ b/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 0,
+		side = 'top',
+		children,
+		arrowClasses,
+		...restProps
+	}: TooltipPrimitive.ContentProps & {
+		arrowClasses?: string;
+	} = $props();
+</script>
+
+<TooltipPrimitive.Portal>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={cn(
+			'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--bits-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<TooltipPrimitive.Arrow>
+			{#snippet child({ props })}
+				<div
+					class={cn(
+						'bg-primary z-50 size-2.5 rotate-45 rounded-[2px]',
+						'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]',
+						'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]',
+						'data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2',
+						'data-[side=left]:-translate-y-[calc(50%_-_3px)]',
+						arrowClasses
+					)}
+					{...props}
+				></div>
+			{/snippet}
+		</TooltipPrimitive.Arrow>
+	</TooltipPrimitive.Content>
+</TooltipPrimitive.Portal>
diff --git a/frontend/src/lib/components/ui/tooltip/tooltip-trigger.svelte b/frontend/src/lib/components/ui/tooltip/tooltip-trigger.svelte
new file mode 100644
index 0000000..5631d1b
--- /dev/null
+++ b/frontend/src/lib/components/ui/tooltip/tooltip-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />
diff --git a/frontend/src/lib/constants/userRoles.ts b/frontend/src/lib/constants/userRoles.ts
new file mode 100644
index 0000000..aaf6290
--- /dev/null
+++ b/frontend/src/lib/constants/userRoles.ts
@@ -0,0 +1,31 @@
+import { View, CodeXml, Crown, CircleDollarSign, type Icon } from '@lucide/svelte';
+import type { Component } from 'svelte';
+
+export const USER_ROLES: {
+	[key: string]: {
+		label: string;
+		description: string;
+		icon: Component<Icon>;
+	};
+} = {
+	VIEWER: {
+		label: 'Viewer',
+		description: 'Can view projects and data, but cannot make changes.',
+		icon: View
+	},
+	FOUNDER: {
+		label: 'Founder',
+		description: 'Can create and manage projects',
+		icon: Crown
+	},
+	DEVELOPER: {
+		label: 'Developer',
+		description: 'Can contribute to projects and manage code.',
+		icon: CodeXml
+	},
+	INVESTOR: {
+		label: 'Investor',
+		description: 'Can financially support projects.',
+		icon: CircleDollarSign
+	}
+};
diff --git a/frontend/src/lib/utils/utils.ts b/frontend/src/lib/utils/utils.ts
new file mode 100644
index 0000000..85bb323
--- /dev/null
+++ b/frontend/src/lib/utils/utils.ts
@@ -0,0 +1,17 @@
+/*
+	Installed from @ieedan/shadcn-svelte-extras
+*/
+
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChild<T> = T extends { child?: any } ? Omit<T, 'child'> : T;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, 'children'> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index c8e5cc3..fad8025 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -2,7 +2,6 @@
 	import { Button } from '@/components/ui/button';
 	import * as Card from '@/components/ui/card';
 	import { Badge } from '@/components/ui/badge';
-	import placeholder from '@/assets/placeholder.svg';
 	import {
 		Lightbulb,
 		Code,
@@ -18,6 +17,8 @@
 		Github
 	} from '@lucide/svelte';
 	import GlobeCard from '@/components/landing/GlobeCard.svelte';
+	import Orbit from '@/components/landing/Orbit.svelte';
+	import Reviews from '@/components/landing/Reviews.svelte';
 </script>
 
 <div class="flex min-h-screen flex-col">
@@ -84,13 +85,6 @@
 					</div>
 					<div class="flex items-center justify-center">
 						<div class="relative">
-							<!--							<img-->
-							<!--								src={placeholder}-->
-							<!--								width="600"-->
-							<!--								height="400"-->
-							<!--								alt="Platform Dashboard"-->
-							<!--								class="aspect-video overflow-hidden rounded-xl object-cover shadow-2xl"-->
-							<!--							/>-->
 							<GlobeCard />
 							<div
 								class="from-background/20 absolute inset-0 rounded-xl bg-gradient-to-t to-transparent"
@@ -207,7 +201,7 @@
 				<div class="flex flex-col items-center justify-center space-y-4 text-center">
 					<div class="space-y-2">
 						<Badge variant="secondary">For Everyone</Badge>
-						<h2 class="text-3xl font-bold tracking-tighter sm:text-5xl">
+						<h2 class="text-3xl font-bold tracking-tight sm:text-5xl">
 							Built for every role in the startup ecosystem
 						</h2>
 					</div>
@@ -264,13 +258,7 @@
 						</Card.Root>
 					</div>
 					<div class="flex items-center justify-center">
-						<img
-							src={placeholder}
-							width="500"
-							height="400"
-							alt="Team Collaboration"
-							class="aspect-square overflow-hidden rounded-xl object-cover"
-						/>
+						<Orbit />
 					</div>
 				</div>
 			</div>
@@ -313,16 +301,12 @@
 								</div>
 							</div>
 						</div>
-						<Button variant="outline" class="w-fit bg-transparent">Explore Graveyard</Button>
+						<Button variant="outline" class="w-fit bg-transparent" href="/app"
+							>Explore Graveyard</Button
+						>
 					</div>
 					<div class="flex items-center justify-center">
-						<img
-							src={placeholder}
-							width="600"
-							height="400"
-							alt="Startup Graveyard Analytics"
-							class="aspect-video overflow-hidden rounded-xl object-cover shadow-lg"
-						/>
+						<Reviews />
 					</div>
 				</div>
 			</div>
diff --git a/frontend/src/routes/app/(components)/ChooseRoleDialog.svelte b/frontend/src/routes/app/(components)/ChooseRoleDialog.svelte
index c866635..e48a334 100644
--- a/frontend/src/routes/app/(components)/ChooseRoleDialog.svelte
+++ b/frontend/src/routes/app/(components)/ChooseRoleDialog.svelte
@@ -46,7 +46,8 @@
 		}
 	];
 
-	let { open = $bindable(false) }: { open: boolean } = $props();
+	let { open = $bindable(false), dismissable = false }: { open: boolean; dismissable?: boolean } =
+		$props();
 	let selectedRole: UserRole | null = $state(null);
 
 	const setRoleMutation = createMutation({
@@ -63,7 +64,7 @@
 </script>
 
 <Dialog.Root bind:open>
-	<Dialog.Content class="sm:max-w-md" interactOutsideBehavior="ignore">
+	<Dialog.Content class="sm:max-w-md" interactOutsideBehavior={dismissable ? 'close' : 'ignore'}>
 		<Dialog.Header class="text-center">
 			<Dialog.Title class="text-2xl font-semibold">Choose Your Role</Dialog.Title>
 			<Dialog.Description class="text-muted-foreground">
diff --git a/frontend/src/routes/app/(components)/CreateProjectDialog.svelte b/frontend/src/routes/app/(components)/CreateProjectDialog.svelte
index 2b79615..5ae77df 100644
--- a/frontend/src/routes/app/(components)/CreateProjectDialog.svelte
+++ b/frontend/src/routes/app/(components)/CreateProjectDialog.svelte
@@ -9,6 +9,7 @@
 	import { toast } from 'svelte-sonner';
 	import { createProject } from './dataLoaders';
 	import { LoaderCircle } from '@lucide/svelte';
+	import { goto } from '$app/navigation';
 
 	let name = $state('');
 	let description = $state('');
@@ -32,7 +33,7 @@
 			isOpensource: boolean;
 			isDead: boolean;
 		}) => await createProject(title, description, isOpensource, isDead),
-		onSuccess: () => {
+		onSuccess: (data) => {
 			queryClient.invalidateQueries({ queryKey: ['projects'] });
 			toast.success('Project created successfully');
 			open = false;
@@ -40,6 +41,9 @@
 			description = '';
 			isOpensource = false;
 			isDead = false;
+			goto(`/app/projects/${data.id}`, {
+				replaceState: true
+			});
 		},
 		onError: (error) => {
 			toast.error(`Failed to create project: ${error.message}`);
@@ -59,12 +63,13 @@
 				<Input bind:value={name} id="name-{id}" class="col-span-3" />
 			</div>
 			<div class="grid grid-cols-4 items-center gap-4">
-				<Label for="username-{id}" class="text-right">Description</Label>
+				<Label for="username-{id}" class="text-right">Brief Description</Label>
 				<Textarea
 					bind:value={description}
 					id="username-{id}"
 					class="col-span-3 max-h-40"
 					placeholder="Enter a brief description of the project"
+					maxlength={100}
 				/>
 			</div>
 			<div class="grid grid-cols-4 items-center gap-4">
@@ -83,7 +88,17 @@
 			</div>
 		</div>
 		<Dialog.Footer>
-			<Button type="submit" disabled={!name || !description || $createProjectMutation.isPending}>
+			<Button
+				type="submit"
+				disabled={!name || !description || $createProjectMutation.isPending}
+				onclick={() =>
+					$createProjectMutation.mutate({
+						title: name,
+						description,
+						isOpensource,
+						isDead
+					})}
+			>
 				{#if $createProjectMutation.isPending}
 					<LoaderCircle class="animate-spin" />
 					Loading...
diff --git a/frontend/src/routes/app/(components)/dataLoaders.ts b/frontend/src/routes/app/(components)/dataLoaders.ts
index d7ca1f5..04fc066 100644
--- a/frontend/src/routes/app/(components)/dataLoaders.ts
+++ b/frontend/src/routes/app/(components)/dataLoaders.ts
@@ -3,14 +3,15 @@ import type { components } from '@/api/v1';
 
 export const createProject = async (
 	title: string,
-	description: string,
+	brief_description: string,
 	isOpensource: boolean,
 	isDead: boolean
 ) => {
 	const { data, error } = await client.POST('/api/projects/', {
 		body: {
 			title,
-			description,
+			brief_description,
+			description: '',
 			is_public: true,
 			is_opensource: isOpensource,
 			is_dead: isDead
diff --git a/frontend/src/routes/app/+layout.svelte b/frontend/src/routes/app/+layout.svelte
index 62a17f1..ed28c3d 100644
--- a/frontend/src/routes/app/+layout.svelte
+++ b/frontend/src/routes/app/+layout.svelte
@@ -1,17 +1,18 @@
-<script>
+<script lang="ts">
 	import { Button } from '$lib/components/ui/button';
 	import projector_logo from '$lib/assets/projector_logo.jpg';
 	import CircleUserRound from '@lucide/svelte/icons/circle-user-round';
 	import Plus from '@lucide/svelte/icons/plus';
 	import SquareChartGantt from '@lucide/svelte/icons/square-chart-gantt';
-	import { Input } from '@/components/ui/input';
 	import { onMount } from 'svelte';
 	import { userState } from '@/api/user.svelte.js';
 	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import { API_BASE_URL } from '@/api/client';
-	import { Github, DoorClosed, Webhook, User, Settings } from '@lucide/svelte';
+	import { Github, DoorClosed, Webhook, User, Settings, Globe, SunMoon } from '@lucide/svelte';
 	import CreateProjectDialog from './(components)/CreateProjectDialog.svelte';
+	import { toggleMode } from 'mode-watcher';
 
 	const { children } = $props();
 
@@ -22,6 +23,13 @@
 			goto('/auth/login');
 		}
 	});
+
+	const PAGE_HEADERS: { [index: string]: string } = {
+		'/app/explore': 'Explore Projects',
+		'/app/profile': 'Profile',
+		'/app/settings': 'Settings',
+		'/app/projects': 'My Projects'
+	};
 </script>
 
 <CreateProjectDialog bind:open={isCreateProjectDialogOpen} />
@@ -32,26 +40,22 @@
 		class="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)"
 	>
 		<div class="flex w-full items-center justify-between gap-1 px-4 lg:gap-2 lg:px-6">
-			<div class="flex items-center gap-2">
-				<img src={projector_logo} alt="ProjectOR Logo" class="h-8 w-8 rounded-full" />
-				<h1 class="text-base font-medium">Explore Projects</h1>
-			</div>
-			<div class="ml-auto w-full max-w-xs items-center lg:max-w-sm">
-				<Input
-					type="search"
-					placeholder="Search projects..."
-					aria-label="Search projects"
-					class="w-full max-w-xs lg:max-w-sm"
-				/>
-			</div>
+			<a href="/app">
+				<div class="flex items-center gap-2">
+					<img src={projector_logo} alt="ProjectOR Logo" class="h-8 w-8 rounded-full dark:invert" />
+					<h1 class="text-base font-medium">
+						{PAGE_HEADERS[page.url.pathname] || 'ProjectOR'}
+					</h1>
+				</div>
+			</a>
 			<div class="ml-auto flex items-center gap-2">
 				<Button variant="default" onclick={() => (isCreateProjectDialogOpen = true)}>
 					<Plus />
 					Create Project
 				</Button>
-				<Button variant="outline">
+				<Button variant="outline" onclick={() => goto('/app/applications')}>
 					<SquareChartGantt />
-					My Projects
+					Applications
 				</Button>
 				<DropdownMenu.Root>
 					<DropdownMenu.Trigger>
@@ -73,6 +77,14 @@
 								<Settings />
 								Settings
 							</DropdownMenu.Item>
+							<DropdownMenu.Item onclick={() => goto('/app/explore')}>
+								<Globe />
+								Explore
+							</DropdownMenu.Item>
+							<DropdownMenu.Item onclick={toggleMode}>
+								<SunMoon />
+								Toggle Theme
+							</DropdownMenu.Item>
 						</DropdownMenu.Group>
 						<DropdownMenu.Separator />
 						<DropdownMenu.Item
diff --git a/frontend/src/routes/app/applications/(components)/dataLoaders.ts b/frontend/src/routes/app/applications/(components)/dataLoaders.ts
new file mode 100644
index 0000000..19cefd7
--- /dev/null
+++ b/frontend/src/routes/app/applications/(components)/dataLoaders.ts
@@ -0,0 +1,37 @@
+import { client } from '$lib/api/client';
+
+export const getApplications = async () => {
+	const { data, error } = await client.GET('/api/projects/all-applications');
+
+	if (error || !data) {
+		console.error('Error fetching applications:', error);
+		throw new Error('Failed to fetch applications');
+	}
+	return data;
+};
+
+export const getUserById = async (userId: number) => {
+	const { data, error } = await client.GET('/api/user/get-by-id/{user_id}', {
+		params: { path: { user_id: userId } }
+	});
+
+	if (error || !data) {
+		console.error('Error fetching user:', error);
+		throw new Error(JSON.stringify(error?.detail ?? 'Failed to fetch user'));
+	}
+
+	return data;
+};
+
+export const getProjectById = async (projectId: number) => {
+	const { data, error } = await client.GET('/api/projects/{project_id}', {
+		params: { path: { project_id: projectId } }
+	});
+
+	if (error || !data) {
+		console.error('Error fetching project:', error);
+		throw new Error(JSON.stringify(error?.detail ?? 'Failed to fetch project'));
+	}
+
+	return data;
+};
diff --git a/frontend/src/routes/app/applications/+page.svelte b/frontend/src/routes/app/applications/+page.svelte
new file mode 100644
index 0000000..7f856af
--- /dev/null
+++ b/frontend/src/routes/app/applications/+page.svelte
@@ -0,0 +1,152 @@
+<script lang="ts">
+	import { getApplications, getProjectById } from './(components)/dataLoaders';
+	import { createQuery } from '@tanstack/svelte-query';
+	import * as Card from '$lib/components/ui/card';
+	import { Badge } from '$lib/components/ui/badge';
+	import { Button } from '$lib/components/ui/button';
+	import { Separator } from '$lib/components/ui/separator';
+	import ErrorAlert from '$lib/components/ErrorAlert.svelte';
+	import {
+		LoaderCircle,
+		Clock,
+		CheckCircle2,
+		XCircle,
+		Calendar,
+		ArrowRight,
+		Building
+	} from '@lucide/svelte';
+	import { goto } from '$app/navigation';
+
+	// Query to fetch user applications
+	const applicationsQuery = createQuery({
+		queryKey: ['userApplications'],
+		queryFn: () => getApplications()
+	});
+
+	// Format date helper
+	function formatDate(dateString?: string) {
+		if (!dateString) return 'Recently';
+		try {
+			return new Date(dateString).toLocaleDateString('en-US', {
+				year: 'numeric',
+				month: 'short',
+				day: 'numeric'
+			});
+		} catch {
+			return 'Recently';
+		}
+	}
+
+	// Get status badge variant
+	function getStatusVariant(isApproved: boolean | null) {
+		if (isApproved === null) return 'outline';
+		return isApproved ? 'default' : 'destructive';
+	}
+
+	// Get status text
+	function getStatusText(isApproved: boolean | null) {
+		if (isApproved === null) return 'Pending';
+		return isApproved ? 'Approved' : 'Declined';
+	}
+
+	// Get status icon
+	function getStatusIcon(isApproved: boolean | null) {
+		if (isApproved === null) return Clock;
+		return isApproved ? CheckCircle2 : XCircle;
+	}
+</script>
+
+<div class="container mx-auto max-w-5xl space-y-6 px-4 py-6">
+	<div class="flex flex-col gap-2">
+		<h1 class="text-3xl font-bold tracking-tight">My Applications</h1>
+		<p class="text-muted-foreground">
+			Review all the projects you've applied to and their current status
+		</p>
+	</div>
+
+	<Separator />
+
+	<div class="space-y-6">
+		{#if $applicationsQuery.isPending}
+			<div class="flex justify-center py-12">
+				<LoaderCircle class="h-8 w-8 animate-spin" />
+			</div>
+		{:else if $applicationsQuery.isError}
+			<div class="flex justify-center py-8">
+				<ErrorAlert text={$applicationsQuery.error.message} />
+			</div>
+		{:else if $applicationsQuery.data.length === 0}
+			<div class="flex flex-col items-center justify-center py-16 text-center">
+				<div class="bg-muted mb-4 rounded-full p-6">
+					<Building class="text-muted-foreground h-10 w-10" />
+				</div>
+				<h3 class="mb-2 text-2xl font-semibold">No applications yet</h3>
+				<p class="text-muted-foreground mb-6 max-w-md">
+					You haven't applied to any projects yet. Explore projects and start contributing!
+				</p>
+				<Button onclick={() => goto('/app/explore')}>Explore Projects</Button>
+			</div>
+		{:else}
+			<div class="grid gap-4 md:grid-cols-2">
+				{#each $applicationsQuery.data as application (application)}
+					{#await getProjectById(application.project_id)}
+						<div class="bg-muted h-40 w-full animate-pulse rounded"></div>
+					{:then project}
+						<Card.Root>
+							<Card.Header>
+								<div class="flex items-start justify-between">
+									<div>
+										<Card.Title>{project.title}</Card.Title>
+										<Card.Description class="mt-1">
+											<div class="flex items-center gap-2">
+												<Calendar class="h-3 w-3" />
+												<span>Applied on {formatDate(application.created_at)}</span>
+											</div>
+										</Card.Description>
+									</div>
+									<Badge
+										variant={getStatusVariant(application.is_approved)}
+										class="flex items-center gap-1"
+									>
+										<svelte:component
+											this={getStatusIcon(application.is_approved)}
+											class="h-3 w-3"
+										/>
+										{getStatusText(application.is_approved)}
+									</Badge>
+								</div>
+							</Card.Header>
+							<Card.Content class="space-y-3">
+								{#if application.feedback}
+									<div class="mt-2">
+										<p class="text-muted-foreground mb-1 text-xs font-medium">
+											Feedback from project owner:
+										</p>
+										<div class="bg-muted rounded p-2 text-sm">
+											{application.feedback}
+										</div>
+									</div>
+								{/if}
+							</Card.Content>
+							<Card.Footer>
+								<div class="flex w-full justify-end">
+									<Button
+										variant="outline"
+										size="sm"
+										class="w-full sm:w-auto"
+										onclick={() => goto(`/app/projects/${application.project_id}`)}
+									>
+										View Project
+										<ArrowRight class="ml-2 h-4 w-4" />
+									</Button>
+								</div>
+							</Card.Footer>
+						</Card.Root>
+					{:catch error}
+						<div class="text-destructive">Failed to load project: {error.message}</div>
+					{/await}
+				{/each}
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/frontend/src/routes/app/explore/(components)/ProjectCard.svelte b/frontend/src/routes/app/explore/(components)/ProjectCard.svelte
index 48f11bc..834a573 100644
--- a/frontend/src/routes/app/explore/(components)/ProjectCard.svelte
+++ b/frontend/src/routes/app/explore/(components)/ProjectCard.svelte
@@ -3,14 +3,14 @@
 	import { Button } from '$lib/components/ui/button';
 	import { type components } from '@/api/v1';
 	import { Badge } from '$lib/components/ui/badge';
-	import { Eye, Lock, Globe, Calendar, User } from '@lucide/svelte';
+	import { Eye, Globe, Calendar, OctagonX, Code } from '@lucide/svelte';
 	import { goto } from '$app/navigation';
 
 	const {
 		project,
 		viewMode = 'grid'
 	}: {
-		project: components['schemas']['ProjectSchema'] & { id: number };
+		project: components['schemas']['ProjectSchema'];
 		viewMode?: 'grid' | 'list';
 	} = $props();
 
@@ -40,36 +40,51 @@
 				>
 					{project.title}
 				</Card.Title>
-				<Badge variant={project.is_public ? 'secondary' : 'outline'} class="ml-2 shrink-0">
-					{#if project.is_public}
-						<Globe class="mr-1 h-3 w-3" />
-						Public
-					{:else}
-						<Lock class="mr-1 h-3 w-3" />
-						Private
+				<div class="flex flex-row gap-2">
+					<Badge variant={project.is_dead ? 'secondary' : 'outline'} class="ml-2 shrink-0">
+						{#if project.is_dead}
+							<OctagonX />
+							Graveyard
+						{:else}
+							<Globe class="mr-1 h-3 w-3" />
+							Public
+						{/if}
+					</Badge>
+					{#if project.is_opensource}
+						<Badge variant="outline" class="shrink-0">
+							<Code class="mr-1 h-3 w-3" />
+							Open Source
+						</Badge>
 					{/if}
-				</Badge>
+				</div>
 			</div>
 		</Card.Header>
 
 		<Card.Content class="space-y-4">
 			<p class="text-muted-foreground line-clamp-3 min-h-[3rem] text-sm">
-				{project.description || 'No description available.'}
+				{project.brief_description || 'No description available.'}
 			</p>
 
 			<div class="text-muted-foreground flex items-center justify-between text-xs">
-				<div class="flex items-center gap-1">
-					<User class="h-3 w-3" />
-					<span>Project Owner</span>
-				</div>
+				<!--				<div class="flex items-center gap-1">-->
+				<!--					<User class="h-3 w-3" />-->
+				<!--					<span>Project Owner</span>-->
+				<!--				</div>-->
 				<div class="flex items-center gap-1">
 					<Calendar class="h-3 w-3" />
-					<span>{formatDate()}</span>
+					<span>{formatDate(project.created_at)}</span>
 				</div>
 			</div>
+			<div class="no-scrollbar flex w-full flex-row gap-2 overflow-x-auto">
+				{#each project.tags ?? [] as tag (tag.name)}
+					<Badge variant="default" class="shrink-0">
+						{tag.name}
+					</Badge>
+				{/each}
+			</div>
 		</Card.Content>
 
-		<Card.Footer class="pt-4">
+		<Card.Footer>
 			<Button
 				variant="default"
 				size="sm"
@@ -90,36 +105,51 @@
 		class="group cursor-pointer transition-all duration-200 hover:shadow-md"
 		onclick={handleViewProject}
 	>
-		<Card.Content class="p-6">
+		<Card.Content>
 			<div class="flex items-center justify-between">
 				<div class="min-w-0 flex-1">
 					<div class="mb-2 flex items-center gap-3">
 						<h3 class="group-hover:text-primary truncate text-lg font-semibold transition-colors">
 							{project.title}
 						</h3>
-						<Badge variant={project.is_public ? 'secondary' : 'outline'}>
-							{#if project.is_public}
-								<Globe class="mr-1 h-3 w-3" />
-								Public
-							{:else}
-								<Lock class="mr-1 h-3 w-3" />
-								Private
+						<div class="flex flex-row gap-2">
+							<Badge variant={project.is_dead ? 'secondary' : 'outline'} class="ml-2 shrink-0">
+								{#if project.is_dead}
+									<OctagonX />
+									Graveyard
+								{:else}
+									<Globe class="mr-1 h-3 w-3" />
+									Public
+								{/if}
+							</Badge>
+							{#if project.is_opensource}
+								<Badge variant="outline" class="shrink-0">
+									<Code class="mr-1 h-3 w-3" />
+									Open Source
+								</Badge>
 							{/if}
-						</Badge>
+						</div>
 					</div>
 					<p class="text-muted-foreground mb-3 line-clamp-2 text-sm">
-						{project.description || 'No description available.'}
+						{project.brief_description || 'No description available.'}
 					</p>
 					<div class="text-muted-foreground flex items-center gap-4 text-xs">
-						<div class="flex items-center gap-1">
-							<User class="h-3 w-3" />
-							<span>Project Owner</span>
-						</div>
+						<!--						<div class="flex items-center gap-1">-->
+						<!--							<User class="h-3 w-3" />-->
+						<!--							<span>Project Owner</span>-->
+						<!--						</div>-->
 						<div class="flex items-center gap-1">
 							<Calendar class="h-3 w-3" />
-							<span>{formatDate()}</span>
+							<span>{formatDate(project.created_at)}</span>
 						</div>
 					</div>
+					<div class="no-scrollbar flex w-full flex-row gap-2 overflow-x-auto pt-2">
+						{#each project.tags ?? [] as tag (tag.name)}
+							<Badge variant="default" class="shrink-0">
+								{tag.name}
+							</Badge>
+						{/each}
+					</div>
 				</div>
 				<div class="ml-4 flex items-center gap-2">
 					<Button
diff --git a/frontend/src/routes/app/explore/+page.svelte b/frontend/src/routes/app/explore/+page.svelte
index a5e1cf5..83466ff 100644
--- a/frontend/src/routes/app/explore/+page.svelte
+++ b/frontend/src/routes/app/explore/+page.svelte
@@ -7,24 +7,32 @@
 	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
 	import * as Card from '$lib/components/ui/card';
-	import { Search, Filter, Grid3X3, List } from '@lucide/svelte';
-	import { type components } from '@/api/v1';
+	import * as Popover from '$lib/components/ui/popover';
+	import * as Command from '$lib/components/ui/command';
+	import { Search, Filter, Grid3X3, List, ChevronsUpDownIcon, CheckIcon } from '@lucide/svelte';
+	import { type components } from '$lib/api/v1';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import { Label } from '$lib/components/ui/label';
+	import { slide } from 'svelte/transition';
+	import { cn } from '$lib/utils';
+	import { Badge } from '@/components/ui/badge';
 
 	type Project = components['schemas']['ProjectSchema'];
 
+	const { data } = $props();
+
+	let showFilters = $state(false);
 	let searchTerm = $state('');
-	let showPublicOnly = $state(false);
-	let viewMode = $state<'grid' | 'list'>('grid');
+	let showGraveyardOnly = $state(false);
+	let myProjectsOnly = $state(false);
+	let selectedTags: string[] = $state([]);
+	let viewMode: 'grid' | 'list' = $state('grid');
 
 	const projectsQuery = createQuery({
 		queryKey: ['projects'],
 		queryFn: async () => await getProjects()
 	});
 
-	$effect(() => {
-		// You can add search logic here if needed
-	});
-
 	const filteredProjects = $derived(() => {
 		if (!$projectsQuery.data) return [];
 		let filtered = $projectsQuery.data;
@@ -38,8 +46,18 @@
 			);
 		}
 
-		if (showPublicOnly) {
-			filtered = filtered.filter((project: Project) => project.is_public);
+		if (showGraveyardOnly) {
+			filtered = filtered.filter((project: Project) => project.is_dead);
+		}
+
+		if (myProjectsOnly) {
+			filtered = filtered.filter((project: Project) => project.ceo_id === data.user?.id);
+		}
+
+		if (selectedTags.length > 0) {
+			filtered = filtered.filter((project: Project) =>
+				project.tags?.some((tag) => selectedTags.includes(tag.name))
+			);
 		}
 
 		return filtered;
@@ -85,15 +103,90 @@
 				</div>
 				<div class="flex items-center gap-4">
 					<label class="flex items-center gap-2 text-sm">
-						<input type="checkbox" bind:checked={showPublicOnly} class="rounded" />
-						Public only
+						<Checkbox bind:checked={myProjectsOnly} />
+						My Projects Only
 					</label>
-					<Button variant="outline" size="sm">
+					<Button variant="outline" size="sm" onclick={() => (showFilters = !showFilters)}>
 						<Filter class="mr-2 h-4 w-4" />
 						Filters
 					</Button>
 				</div>
 			</div>
+			{#if showFilters}
+				<div class="space-y-4" transition:slide={{ duration: 300 }}>
+					<div class="items center flex gap-2">
+						<Checkbox bind:checked={showGraveyardOnly} />
+						<Label>Show Graveyard Projects</Label>
+					</div>
+					<div class="flex items-center gap-2">
+						<Popover.Root>
+							<Popover.Trigger>
+								{#snippet child({ props })}
+									<Button
+										{...props}
+										variant="outline"
+										role="combobox"
+										class="no-scrollbar w-full overflow-x-scroll"
+									>
+										{#if selectedTags.length > 0}
+											{#each selectedTags as tag (tag)}
+												<Badge variant="outline">{tag}</Badge>
+											{/each}
+										{:else}
+											Select tags
+										{/if}
+										<ChevronsUpDownIcon class="opacity-50" />
+									</Button>
+								{/snippet}
+							</Popover.Trigger>
+							<Popover.Content class="w-full" align="start">
+								<Command.Root>
+									<Command.Input placeholder="Search tags..." />
+									<Command.List>
+										<Command.Empty>No tags found.</Command.Empty>
+										<Command.Group value="tags">
+											{#if $projectsQuery.data}
+												{#each $projectsQuery.data
+													.map((project) => project.tags ?? [])
+													.flat()
+													.filter((tag, index, self) => self.indexOf(tag) === index)
+													.sort((a, b) => a.name.localeCompare(b.name)) as tag (tag)}
+													<Command.Item
+														value={tag.name}
+														onSelect={() => {
+															if (selectedTags.includes(tag.name)) {
+																selectedTags = selectedTags.filter((t) => t !== tag.name);
+															} else {
+																selectedTags = [...selectedTags, tag.name];
+															}
+														}}
+													>
+														<CheckIcon
+															class={cn(!selectedTags.includes(tag.name) && 'text-transparent')}
+														/>
+														{tag.name}
+													</Command.Item>
+												{/each}
+											{/if}
+										</Command.Group>
+									</Command.List>
+								</Command.Root>
+							</Popover.Content>
+						</Popover.Root>
+					</div>
+					<Button
+						variant="outline"
+						onclick={() => {
+							searchTerm = '';
+							showGraveyardOnly = false;
+							selectedTags = [];
+							myProjectsOnly = false;
+						}}
+					>
+						Clear filters
+					</Button>
+				</div>
+			{/if}
 		</Card.Root>
 	</div>
 
@@ -132,7 +225,9 @@
 						variant="outline"
 						onclick={() => {
 							searchTerm = '';
-							showPublicOnly = false;
+							showGraveyardOnly = false;
+							selectedTags = [];
+							myProjectsOnly = false;
 						}}
 					>
 						Clear filters
diff --git a/frontend/src/routes/app/profile/(components)/dataLoaders.ts b/frontend/src/routes/app/profile/(components)/dataLoaders.ts
new file mode 100644
index 0000000..95fd0cd
--- /dev/null
+++ b/frontend/src/routes/app/profile/(components)/dataLoaders.ts
@@ -0,0 +1,10 @@
+import { client } from '$lib/api/client';
+
+export const getMe = async () => {
+	const { data, error } = await client.POST('/api/user/get-me');
+	if (error || !data) {
+		console.error('Error fetching user profile:', error);
+		throw new Error(JSON.stringify(error ?? 'Failed to fetch user profile'));
+	}
+	return data;
+};
diff --git a/frontend/src/routes/app/profile/+page.svelte b/frontend/src/routes/app/profile/+page.svelte
index 9474015..883f18d 100644
--- a/frontend/src/routes/app/profile/+page.svelte
+++ b/frontend/src/routes/app/profile/+page.svelte
@@ -5,6 +5,7 @@
 	import { Textarea } from '$lib/components/ui/textarea';
 	import * as Card from '$lib/components/ui/card';
 	import * as Avatar from '$lib/components/ui/avatar';
+	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { Badge } from '$lib/components/ui/badge';
 	import { Separator } from '$lib/components/ui/separator';
 	import { userState } from '@/api/user.svelte';
@@ -18,10 +19,16 @@
 		X,
 		Camera,
 		Key,
-		Shield,
-		Bell
+		Bell,
+		Contact
 	} from '@lucide/svelte';
 	import { toast } from 'svelte-sonner';
+	import { getMe } from './(components)/dataLoaders';
+	import { createQuery } from '@tanstack/svelte-query';
+	import { Checkbox } from '@/components/ui/checkbox';
+	import { USER_ROLES } from '@/constants/userRoles';
+	import { Skeleton } from '@/components/ui/skeleton';
+	import ChooseRoleDialog from '../(components)/ChooseRoleDialog.svelte';
 
 	let isEditing = $state(false);
 	let editedProfile = $state({
@@ -31,6 +38,7 @@
 		location: '',
 		website: ''
 	});
+	let isChooseRoleDialogOpen = $state(false);
 
 	function handleEdit() {
 		isEditing = true;
@@ -67,8 +75,14 @@
 			day: 'numeric'
 		});
 	}
+
+	const meQuery = createQuery({
+		queryKey: ['me'],
+		queryFn: async () => await getMe()
+	});
 </script>
 
+<ChooseRoleDialog bind:open={isChooseRoleDialogOpen} dismissable />
 <div class="container mx-auto max-w-4xl space-y-6 px-4 py-6">
 	<!-- Header -->
 	<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
@@ -88,15 +102,15 @@
 		<!-- Profile Card -->
 		<div class="lg:col-span-1">
 			<Card.Root>
-				<Card.Content class="p-6 text-center">
+				<Card.Content class="text-center">
 					<div class="relative mb-4">
 						<Avatar.Root class="mx-auto h-24 w-24">
-							<Avatar.Image
-								src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=face"
-								alt="Profile"
-							/>
 							<Avatar.Fallback class="text-lg">
-								{userState.user?.username?.[0]?.toUpperCase() || 'U'}
+								{#if !$meQuery.data}
+									{userState.user?.username?.[0]?.toUpperCase() || 'U'}
+								{:else}
+									{$meQuery.data.username.slice(0, 2).toUpperCase()}
+								{/if}
 							</Avatar.Fallback>
 						</Avatar.Root>
 						{#if isEditing}
@@ -113,15 +127,30 @@
 					<h2 class="mb-1 text-xl font-semibold">
 						{userState.user?.username || 'Username'}
 					</h2>
-					<p class="text-muted-foreground mb-4 text-sm">
-						{editedProfile.email || 'email@example.com'}
-					</p>
 
-					<Badge variant="secondary" class="mb-4">
-						<Shield class="mr-1 h-3 w-3" />
-						Active User
-					</Badge>
+					<!--					<Badge variant="secondary" class="mb-4">-->
+					<!--						<Shield class="mr-1 h-3 w-3" />-->
+					<!--						Active User-->
+					<!--					</Badge>-->
+					{#if !$meQuery.data}
+						<Skeleton class="mb-2 h-4 w-24" />
+					{:else}
+						{@const role = USER_ROLES[$meQuery.data.role ?? 'VIEWER']}
 
+						<Tooltip.Provider>
+							<Tooltip.Root>
+								<Tooltip.Trigger>
+									<Badge variant="secondary" class="mb-8">
+										<role.icon />
+										{role.label}
+									</Badge>
+								</Tooltip.Trigger>
+								<Tooltip.Content>
+									<p>{role.description}</p>
+								</Tooltip.Content>
+							</Tooltip.Root>
+						</Tooltip.Provider>
+					{/if}
 					<div class="text-muted-foreground flex items-center justify-center gap-1 text-xs">
 						<Calendar class="h-3 w-3" />
 						<span>Joined {formatDate(new Date())}</span>
@@ -130,7 +159,18 @@
 			</Card.Root>
 
 			<!-- Quick Stats -->
-			<Card.Root class="mt-4">
+			<div class="flex items-center justify-center px-2 py-4">
+				<Button
+					class="w-full"
+					onclick={() => {
+						isChooseRoleDialogOpen = true;
+					}}
+				>
+					<Contact />
+					Change Role
+				</Button>
+			</div>
+			<Card.Root>
 				<Card.Header>
 					<Card.Title class="text-sm">Quick Stats</Card.Title>
 				</Card.Header>
@@ -276,7 +316,7 @@
 							</Label>
 							<p class="text-muted-foreground text-sm">Update your account password</p>
 						</div>
-						<Button variant="outline" size="sm">Change</Button>
+						<Button variant="outline" size="sm" disabled>Change</Button>
 					</div>
 
 					<Separator />
@@ -289,7 +329,7 @@
 							</Label>
 							<p class="text-muted-foreground text-sm">Receive notifications about your projects</p>
 						</div>
-						<input type="checkbox" checked class="rounded" />
+						<Checkbox checked class="rounded" disabled />
 					</div>
 
 					<Separator />
@@ -304,7 +344,7 @@
 								Permanently delete your account and all data
 							</p>
 						</div>
-						<Button variant="destructive" size="sm">Delete</Button>
+						<Button variant="destructive" size="sm" disabled>Delete</Button>
 					</div>
 				</Card.Content>
 			</Card.Root>
diff --git a/frontend/src/routes/app/profile/+page.ts b/frontend/src/routes/app/profile/+page.ts
new file mode 100644
index 0000000..f788a7e
--- /dev/null
+++ b/frontend/src/routes/app/profile/+page.ts
@@ -0,0 +1,10 @@
+import { getMe } from './(components)/dataLoaders';
+
+export const load = async ({ parent }) => {
+	const { queryClient } = await parent();
+
+	await queryClient.prefetchQuery({
+		queryKey: ['me'],
+		queryFn: async () => await getMe()
+	});
+};
diff --git a/frontend/src/routes/app/projects/(components)/ProjectContributors.svelte b/frontend/src/routes/app/projects/(components)/ProjectContributors.svelte
new file mode 100644
index 0000000..f85d9ed
--- /dev/null
+++ b/frontend/src/routes/app/projects/(components)/ProjectContributors.svelte
@@ -0,0 +1,241 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { createQuery, createMutation, useQueryClient } from '@tanstack/svelte-query';
+	import { Button } from '$lib/components/ui/button';
+	import { Label } from '$lib/components/ui/label';
+	import { Textarea } from '$lib/components/ui/textarea';
+	import { getProjectApplications, approveApplication, getUserById } from './dataLoaders';
+	import { toast } from 'svelte-sonner';
+	import { LoaderCircle, UserCheck, UserX, MessageSquare } from '@lucide/svelte';
+	import { Badge } from '$lib/components/ui/badge';
+	import ErrorAlert from '$lib/components/ErrorAlert.svelte';
+	import type { components } from '$lib/api/v1';
+
+	// Props
+	let { open = $bindable(false), projectId } = $props<{ open: boolean; projectId: number }>();
+
+	// State variables
+	let selectedApplication = $state<components['schemas']['ApplicationSchema'] | null>(null);
+	let feedbackText = $state('');
+	let showFeedbackDialog = $state(false);
+	let currentAction = $state<'approve' | 'decline' | null>(null);
+
+	const queryClient = useQueryClient();
+
+	// Query to fetch project applications
+	const applicationsQuery = createQuery({
+		queryKey: ['projectApplications', projectId],
+		queryFn: () => getProjectApplications(projectId),
+		enabled: !!projectId
+	});
+
+	// Mutation for approving or declining applications
+	const applicationMutation = createMutation({
+		mutationFn: ({
+			projectId,
+			isApproved,
+			userId,
+			feedback
+		}: {
+			projectId: number;
+			isApproved: boolean;
+			userId: number;
+			feedback: string;
+		}) => approveApplication(projectId, isApproved, userId, feedback),
+		onSuccess: () => {
+			// Invalidate and refetch project applications
+			queryClient.invalidateQueries({ queryKey: ['projectApplications', projectId] });
+			toast.success(
+				`Application ${currentAction === 'approve' ? 'approved' : 'declined'} successfully`
+			);
+			// Reset state
+			showFeedbackDialog = false;
+			selectedApplication = null;
+			feedbackText = '';
+			currentAction = null;
+		},
+		onError: (error) => {
+			toast.error(`Failed to ${currentAction} application: ${error.message}`);
+		}
+	});
+
+	// Function to handle application action (approve/decline)
+	function handleApplicationAction(
+		application: components['schemas']['ApplicationSchema'],
+		action: 'approve' | 'decline'
+	) {
+		selectedApplication = application;
+		currentAction = action;
+		showFeedbackDialog = true;
+	}
+
+	// Function to submit the application decision
+	function submitApplicationDecision() {
+		if (!selectedApplication) return;
+
+		$applicationMutation.mutate({
+			projectId,
+			isApproved: currentAction === 'approve',
+			userId: selectedApplication.user_id,
+			feedback: feedbackText
+		});
+	}
+</script>
+
+<!-- Main Dialog for Project Contributors -->
+<Dialog.Root bind:open>
+	<Dialog.Content class="sm:max-w-3xl">
+		<Dialog.Header>
+			<Dialog.Title>Project Applications</Dialog.Title>
+			<Dialog.Description>Review and manage applications for your project.</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="max-h-[60vh] overflow-y-auto py-4">
+			{#if $applicationsQuery.isPending}
+				<div class="flex items-center justify-center py-8">
+					<LoaderCircle class="h-8 w-8 animate-spin" />
+				</div>
+			{:else if $applicationsQuery.isError}
+				<ErrorAlert text={$applicationsQuery.error.message} />
+			{:else if $applicationsQuery.data.length === 0}
+				<div class="text-muted-foreground py-8 text-center">
+					No applications have been submitted for this project yet.
+				</div>
+			{:else}
+				<div class="space-y-6">
+					{#each $applicationsQuery.data as application ([application.user_id, application.project_id])}
+						<div class="rounded-lg border p-4">
+							<div class="flex items-start justify-between">
+								<div>
+									{#await getUserById(application.user_id)}
+										<div class="bg-muted h-5 w-32 animate-pulse rounded"></div>
+									{:then user}
+										<h3 class="text-lg font-medium">{user.username}</h3>
+									{:catch error}
+										<div class="text-destructive">Failed to load user: {error.message}</div>
+									{/await}
+
+									<div class="mt-2">
+										<Badge
+											variant={application.is_approved === null
+												? 'outline'
+												: application.is_approved
+													? 'default'
+													: 'destructive'}
+										>
+											{#if application.is_approved === null}
+												Pending
+											{:else if application.is_approved}
+												Approved
+											{:else}
+												Declined
+											{/if}
+										</Badge>
+										{#if application.created_at}
+											<span class="text-muted-foreground ml-2 text-xs">
+												Applied on {new Date(application.created_at).toLocaleDateString()}
+											</span>
+										{/if}
+									</div>
+								</div>
+
+								{#if application.is_approved === null}
+									<div class="flex gap-2">
+										<Button
+											size="sm"
+											variant="default"
+											onclick={() => handleApplicationAction(application, 'approve')}
+										>
+											<UserCheck class="mr-1 h-4 w-4" />
+											Approve
+										</Button>
+										<Button
+											size="sm"
+											variant="destructive"
+											onclick={() => handleApplicationAction(application, 'decline')}
+										>
+											<UserX class="mr-1 h-4 w-4" />
+											Decline
+										</Button>
+									</div>
+								{/if}
+							</div>
+
+							{#if application.feedback}
+								<div class="mt-3">
+									<p class="mb-1 text-sm font-medium">Your feedback:</p>
+									<p class="bg-muted rounded p-3 text-sm">{application.feedback}</p>
+								</div>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+
+		<Dialog.Footer>
+			<Dialog.Close>
+				<Button variant="outline">Close</Button>
+			</Dialog.Close>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
+
+<!-- Feedback Dialog -->
+<Dialog.Root bind:open={showFeedbackDialog}>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>
+				{currentAction === 'approve' ? 'Approve' : 'Decline'} Application
+			</Dialog.Title>
+			<Dialog.Description>
+				{#if currentAction === 'approve'}
+					Provide feedback for the applicant about their acceptance.
+				{:else}
+					Please explain why you're declining this application.
+				{/if}
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="space-y-4 py-4">
+			<div class="space-y-2">
+				<Label for="feedback">Feedback</Label>
+				<Textarea
+					id="feedback"
+					bind:value={feedbackText}
+					placeholder={currentAction === 'approve'
+						? 'Welcome to the team! Please provide any onboarding details...'
+						: 'Thank you for your application, however...'}
+					rows={5}
+				/>
+			</div>
+		</div>
+
+		<Dialog.Footer>
+			<Button
+				variant="outline"
+				onclick={() => {
+					showFeedbackDialog = false;
+					selectedApplication = null;
+					feedbackText = '';
+					currentAction = null;
+				}}
+			>
+				Cancel
+			</Button>
+			<Button
+				variant={currentAction === 'approve' ? 'default' : 'destructive'}
+				onclick={submitApplicationDecision}
+				disabled={$applicationMutation.isPending}
+			>
+				{#if $applicationMutation.isPending}
+					<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
+					Processing...
+				{:else}
+					<MessageSquare class="mr-2 h-4 w-4" />
+					Send {currentAction === 'approve' ? 'Approval' : 'Rejection'}
+				{/if}
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/frontend/src/routes/app/projects/(components)/dataLoaders.ts b/frontend/src/routes/app/projects/(components)/dataLoaders.ts
index 15c2014..fa40f9f 100644
--- a/frontend/src/routes/app/projects/(components)/dataLoaders.ts
+++ b/frontend/src/routes/app/projects/(components)/dataLoaders.ts
@@ -11,7 +11,142 @@ export const getProjectById = async (projectId: number) => {
 
 	if (error || !data) {
 		console.error('Error fetching project:', error);
-		throw new Error(JSON.stringify(error ?? 'Failed to fetch project'));
+		throw new Error(JSON.stringify(error?.detail ?? 'Failed to fetch project'));
+	}
+
+	return data;
+};
+
+export const updateProject = async (
+	projectId: number,
+	brief_description: string,
+	description: string
+) => {
+	const { data, error } = await client.POST('/api/projects/{project_id}/update', {
+		params: { path: { project_id: projectId } },
+		body: {
+			brief_description,
+			description
+		}
+	});
+	if (error || !data) {
+		console.error('Error updating project:', error);
+		throw new Error(JSON.stringify(error?.detail ?? 'Failed to update project'));
+	}
+	return data;
+};
+
+export const generateTags = async (projectId: number) => {
+	const { data, error } = await client.GET('/api/tags/generate/{project_id}', {
+		params: { path: { project_id: projectId } }
+	});
+
+	if (error || !data) {
+		console.error('Error generating tags:', error);
+		throw new Error(JSON.stringify(error?.detail ?? 'Failed to generate tags'));
+	}
+
+	return data;
+};
+
+export const addProjectTags = async (projectId: number, tags: string[]) => {
+	const { data, error } = await client.POST('/api/tags/add/{project_id}', {
+		params: { path: { project_id: projectId } },
+		body: tags.map((tag) => ({ name: tag }))
+	});
+
+	if (error || !data) {
+		console.error('Error adding tags to project:', error);
+		throw new Error(JSON.stringify(error?.detail ?? 'Failed to add tags to project'));
+	}
+
+	return data;
+};
+
+export const removeProjectTags = async (projectId: number, tags: string[]) => {
+	const { data, error } = await client.DELETE('/api/tags/remove/{project_id}', {
+		params: { path: { project_id: projectId } },
+		body: tags.map((tag) => ({ name: tag }))
+	});
+
+	if (error || !data) {
+		console.error('Error removing tags from project:', error);
+		throw new Error(JSON.stringify(error?.detail ?? 'Failed to remove tags from project'));
+	}
+
+	return data;
+};
+
+export const applyToProject = async (projectId: number) => {
+	const { data, error } = await client.POST('/api/projects/{project_id}/apply', {
+		params: { path: { project_id: projectId } }
+	});
+
+	if (error || !data) {
+		console.error('Error applying to project:', error);
+		throw new Error(JSON.stringify(error?.detail ?? 'Failed to apply to project'));
+	}
+
+	return data;
+};
+
+export const getUserById = async (userId: number) => {
+	const { data, error } = await client.GET('/api/user/get-by-id/{user_id}', {
+		params: { path: { user_id: userId } }
+	});
+
+	if (error || !data) {
+		console.error('Error fetching user:', error);
+		throw new Error(JSON.stringify(error?.detail ?? 'Failed to fetch user'));
+	}
+
+	return data;
+};
+
+export const getProjectApplications = async (projectId: number) => {
+	const { data, error } = await client.GET('/api/projects/{project_id}/applications', {
+		params: { path: { project_id: projectId } }
+	});
+
+	if (error || !data) {
+		console.error('Error fetching project applications:', error);
+		throw new Error(JSON.stringify(error?.detail ?? 'Failed to fetch project applications'));
+	}
+
+	return data;
+};
+
+export const approveApplication = async (
+	projectId: number,
+	isApproved: boolean,
+	userId: number,
+	feedback: string
+) => {
+	const { data, error } = await client.PATCH('/api/projects/{project_id}/applications/approve', {
+		params: { path: { project_id: projectId } },
+		body: {
+			is_approved: isApproved,
+			user_id: userId,
+			feedback
+		}
+	});
+
+	if (error || !data) {
+		console.error('Error approving application:', error);
+		throw new Error(JSON.stringify(error?.detail ?? 'Failed to approve application'));
+	}
+
+	return data;
+};
+
+export const enhanceProjectDescription = async (description: string) => {
+	const { data, error } = await client.POST('/api/projects/enhance-description', {
+		body: { project_description: description }
+	});
+
+	if (error || !data) {
+		console.error('Error enhancing project description:', error);
+		throw new Error(JSON.stringify(error?.detail ?? 'Failed to enhance project description'));
 	}
 
 	return data;
diff --git a/frontend/src/routes/app/projects/[slug]/+page.svelte b/frontend/src/routes/app/projects/[slug]/+page.svelte
index c66279e..89aa091 100644
--- a/frontend/src/routes/app/projects/[slug]/+page.svelte
+++ b/frontend/src/routes/app/projects/[slug]/+page.svelte
@@ -1,27 +1,69 @@
 <script lang="ts">
-	import { createQuery } from '@tanstack/svelte-query';
+	import { createQuery, createMutation, useQueryClient } from '@tanstack/svelte-query';
 	import * as Card from '$lib/components/ui/card';
+	import * as Tabs from '$lib/components/ui/tabs';
 	import { Badge } from '$lib/components/ui/badge';
 	import { Button } from '$lib/components/ui/button';
 	import { Separator } from '$lib/components/ui/separator';
+	import { Input } from '$lib/components/ui/input';
+	import { Textarea } from '$lib/components/ui/textarea';
 	import ErrorAlert from '$lib/components/ErrorAlert.svelte';
-	import { getProjectById } from '../(components)/dataLoaders';
+	import {
+		getProjectById,
+		updateProject,
+		generateTags,
+		addProjectTags,
+		removeProjectTags,
+		applyToProject,
+		getUserById,
+		enhanceProjectDescription
+	} from '../(components)/dataLoaders';
 	import { goto } from '$app/navigation';
 	import {
 		ArrowLeft,
 		Globe,
-		Lock,
 		Calendar,
 		User,
 		Edit3,
 		Share2,
 		Bookmark,
-		GitBranch,
+		Github,
+		Send,
+		MailPlus,
+		X,
 		Code,
-		FileText
+		Save,
+		LoaderCircle,
+		FileText,
+		OctagonX,
+		WandSparkles,
+		Users
 	} from '@lucide/svelte';
+	import Markdown from '$lib/components/md/Markdown.svelte';
+	import { toast } from 'svelte-sonner';
+	import { TagsInput } from '$lib/components/ui/tags-input';
+	import type { components } from '@/api/v1';
+	import RainbowButton from '@/components/RainbowButton.svelte';
+	import { Skeleton } from '@/components/ui/skeleton';
+	import ProjectContributors from '../(components)/ProjectContributors.svelte';
 
 	let { data } = $props();
+	let isEditing = $state(false);
+	let {
+		editDescription,
+		editBriefDescription
+	}: {
+		editDescription: string;
+		editBriefDescription: string;
+	} = $state({
+		editDescription: '',
+		editBriefDescription: ''
+	});
+	let editTags: string[] = $state([]);
+	let showContributorsDialog = $state(false);
+
+	const queryClient = useQueryClient();
+
 	const projectId = data.projectId;
 
 	const projectQuery = createQuery({
@@ -41,6 +83,118 @@
 			return 'Recently';
 		}
 	}
+
+	const handleSave = (project: components['schemas']['ProjectSchema']) => {
+		if (!editBriefDescription || !editDescription) {
+			toast.error('Please fill in all fields before saving.');
+			return;
+		}
+		if (
+			editBriefDescription === project.brief_description &&
+			editDescription === project.description &&
+			JSON.stringify(editTags) === JSON.stringify(project.tags?.map((tag) => tag.name) || [])
+		) {
+			isEditing = false;
+			return;
+		}
+		$updateProjectMutation.mutate();
+		let tagsToAdd = editTags.filter((tag) => !project.tags?.some((t) => t.name === tag));
+		let tagsToRemove =
+			project.tags?.filter((t) => !editTags.includes(t.name)).map((t) => t.name) || [];
+		if (tagsToAdd.length > 0) {
+			$addProjectTagsMutation.mutate({ projectId, tags: tagsToAdd });
+		}
+		if (tagsToRemove.length > 0) {
+			$removeProjectTagsMutation.mutate({ projectId, tags: tagsToRemove });
+		}
+	};
+
+	const updateProjectMutation = createMutation({
+		mutationFn: async () => await updateProject(projectId, editBriefDescription, editDescription),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ['project', projectId] });
+			isEditing = false;
+			toast.success('Project updated successfully');
+		},
+		onError: (error) => {
+			console.error('Error updating project:', error);
+			toast.error(`Failed to update project: ${error.message}`);
+		}
+	});
+
+	const generateTagsMutation = createMutation({
+		mutationFn: async (projectId: number) => await generateTags(projectId),
+		onSuccess: (data) => {
+			for (const tag of data.tags) {
+				if (!editTags.includes(tag)) {
+					editTags.push(tag);
+				}
+			}
+			toast.success('Tags generated successfully');
+		},
+		onError: (error) => {
+			console.error('Error generating tags:', error);
+			toast.error(`Failed to generate tags: ${error.message}`);
+		}
+	});
+
+	const addProjectTagsMutation = createMutation({
+		mutationFn: async ({ projectId, tags }: { projectId: number; tags: string[] }) =>
+			await addProjectTags(projectId, tags),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ['project', projectId] });
+			toast.success('Tags added successfully');
+		},
+		onError: (error) => {
+			console.error('Error adding tags:', error);
+			toast.error(`Failed to add tags: ${error.message}`);
+		}
+	});
+
+	const removeProjectTagsMutation = createMutation({
+		mutationFn: async ({ projectId, tags }: { projectId: number; tags: string[] }) =>
+			await removeProjectTags(projectId, tags),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ['project', projectId] });
+			toast.success('Tags removed successfully');
+		},
+		onError: (error) => {
+			console.error('Error removing tags:', error);
+			toast.error(`Failed to remove tags: ${error.message}`);
+		}
+	});
+
+	const applyToProjectMutation = createMutation({
+		mutationFn: async (projectId: number) => await applyToProject(projectId),
+		onSuccess: () => {
+			toast.success('Application submitted successfully');
+		},
+		onError: (error) => {
+			console.error('Error applying to project:', error);
+			toast.error(`Failed to apply to project: ${error.message}`);
+		}
+	});
+
+	const projectOwnerQuery = createQuery({
+		queryKey: ['projectOwner', data.projectId],
+		queryFn: async () => {
+			if (!$projectQuery.data?.ceo_id) return null;
+			return await getUserById($projectQuery.data.ceo_id);
+		},
+		enabled: !!$projectQuery.data?.ceo_id
+	});
+
+	const enhanceDescriptionMutation = createMutation({
+		mutationFn: async (description: string) => await enhanceProjectDescription(description),
+		onSuccess: (data) => {
+			editDescription = data.enhanced_description;
+			toast.success('✨ Description enhanced successfully');
+		},
+		onError: (error) => {
+			console.error('Error enhancing description:', error);
+			toast.error(`Failed to enhance description: ${error.message}`);
+		}
+	});
 </script>
 
 <div class="container mx-auto max-w-6xl space-y-6 px-4 py-6">
@@ -73,33 +227,115 @@
 							<div class="space-y-2">
 								<div class="flex items-center gap-3">
 									<h1 class="text-3xl font-bold tracking-tight">{project.title}</h1>
-									<Badge variant={project.is_public ? 'secondary' : 'outline'}>
-										{#if project.is_public}
-											<Globe class="mr-1 h-3 w-3" />
-											Public
-										{:else}
-											<Lock class="mr-1 h-3 w-3" />
-											Private
+									<div class="flex flex-row gap-2">
+										<Badge
+											variant={project.is_dead ? 'secondary' : 'outline'}
+											class="ml-2 shrink-0"
+										>
+											{#if project.is_dead}
+												<OctagonX />
+												Graveyard
+											{:else}
+												<Globe class="mr-1 h-3 w-3" />
+												Public
+											{/if}
+										</Badge>
+										{#if project.is_opensource}
+											<Badge variant="outline" class="shrink-0">
+												<Code class="mr-1 h-3 w-3" />
+												Open Source
+											</Badge>
 										{/if}
-									</Badge>
+									</div>
 								</div>
-								<p class="text-muted-foreground">Project ID: #{project.id}</p>
 							</div>
 							<div class="flex items-center gap-2">
-								<Button size="sm">
-									<Bookmark class="mr-2 h-4 w-4" />
-									Bookmark
-								</Button>
-								<Button size="sm" variant="outline">
-									<Share2 class="mr-2 h-4 w-4" />
-									Share
-								</Button>
-								<Button size="sm" variant="outline">
-									<Edit3 class="mr-2 h-4 w-4" />
-									Edit
-								</Button>
+								{#if !isEditing}
+									<Button size="sm">
+										<Bookmark class="mr-2 h-4 w-4" />
+										Bookmark
+									</Button>
+									<Button
+										size="sm"
+										variant="outline"
+										onclick={() => {
+											navigator
+												.share({
+													title: project.title,
+													text: project.brief_description || 'Check out this project!',
+													url: window.location.href
+												})
+												.catch((err) => console.error('Error sharing:', err));
+										}}
+									>
+										<Share2 class="mr-2 h-4 w-4" />
+										Share
+									</Button>
+								{/if}
+								{#if project.ceo_id === data.user?.id}
+									<Button
+										size="sm"
+										variant="outline"
+										onclick={() => {
+											editDescription = project.description || '';
+											editBriefDescription = project.brief_description || '';
+											editTags = project.tags?.map((tag) => tag.name) || [];
+											isEditing = !isEditing;
+										}}
+									>
+										{#if isEditing}
+											<X class="mr-2 h-4 w-4" />
+											Cancel
+										{:else}
+											<Edit3 class="mr-2 h-4 w-4" />
+											Edit
+										{/if}
+									</Button>
+									{#if isEditing}
+										<Button
+											size="sm"
+											variant="default"
+											onclick={() => handleSave(project)}
+											disabled={$updateProjectMutation.isPending ||
+												$addProjectTagsMutation.isPending ||
+												$removeProjectTagsMutation.isPending}
+										>
+											{#if $updateProjectMutation.isPending || $addProjectTagsMutation.isPending || $removeProjectTagsMutation.isPending}
+												<LoaderCircle class="animate-spin" />
+												Saving...
+											{:else}
+												<Save class="mr-2 h-4 w-4" />
+												Save Changes
+											{/if}
+										</Button>
+									{/if}
+								{/if}
 							</div>
 						</div>
+						<div class="flex w-full flex-row flex-wrap gap-2">
+							{#if !isEditing}
+								{#each project.tags ?? [] as tag (tag.name)}
+									<Badge variant="default" class="shrink-0">
+										{tag.name}
+									</Badge>
+								{/each}
+							{:else}
+								<TagsInput bind:value={editTags} placeholder="Add a tag" />
+								<RainbowButton
+									onclick={() => $generateTagsMutation.mutate(project.id)}
+									disabled={$generateTagsMutation.isPending}
+									class="h-8"
+								>
+									{#if $generateTagsMutation.isPending}
+										<LoaderCircle class="animate-spin" />
+										Generating...
+									{:else}
+										<WandSparkles class="size-4" />
+										Generate
+									{/if}
+								</RainbowButton>
+							{/if}
+						</div>
 
 						<Separator />
 
@@ -107,11 +343,15 @@
 						<div class="text-muted-foreground flex items-center gap-6 text-sm">
 							<div class="flex items-center gap-1">
 								<User class="h-4 w-4" />
-								<span>Project Owner</span>
+								{#if !$projectOwnerQuery.data}
+									<Skeleton class="h-4 w-24" />
+								{:else}
+									<span>{$projectOwnerQuery.data.username}</span>
+								{/if}
 							</div>
 							<div class="flex items-center gap-1">
 								<Calendar class="h-4 w-4" />
-								<span>Created {formatDate()}</span>
+								<span>Created {formatDate(project.created_at)}</span>
 							</div>
 							<div class="flex items-center gap-1">
 								<Calendar class="h-4 w-4" />
@@ -125,9 +365,17 @@
 							<!-- Description -->
 							<div>
 								<h2 class="mb-3 text-lg font-semibold">About this project</h2>
-								<p class="text-muted-foreground leading-relaxed">
-									{project.description || 'No description provided for this project.'}
-								</p>
+								{#if isEditing}
+									<Input
+										bind:value={editBriefDescription}
+										placeholder="Enter a brief description of the project"
+										class="mb-2"
+									/>
+								{:else}
+									<p class="text-muted-foreground leading-relaxed">
+										{project.brief_description || 'No description provided for this project.'}
+									</p>
+								{/if}
 							</div>
 
 							<Separator />
@@ -138,19 +386,19 @@
 								<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
 									<div class="bg-muted rounded-lg p-4 text-center">
 										<div class="text-2xl font-bold">15</div>
-										<div class="text-muted-foreground text-sm">Files</div>
+										<div class="text-muted-foreground text-sm">Team Size</div>
 									</div>
 									<div class="bg-muted rounded-lg p-4 text-center">
 										<div class="text-2xl font-bold">3</div>
 										<div class="text-muted-foreground text-sm">Contributors</div>
 									</div>
 									<div class="bg-muted rounded-lg p-4 text-center">
-										<div class="text-2xl font-bold">42</div>
-										<div class="text-muted-foreground text-sm">Commits</div>
+										<div class="text-2xl font-bold">$42.000</div>
+										<div class="text-muted-foreground text-sm">Raised</div>
 									</div>
 									<div class="bg-muted rounded-lg p-4 text-center">
-										<div class="text-2xl font-bold">7</div>
-										<div class="text-muted-foreground text-sm">Branches</div>
+										<div class="text-2xl font-bold">2025</div>
+										<div class="text-muted-foreground text-sm">Founded</div>
 									</div>
 								</div>
 							</div>
@@ -158,38 +406,49 @@
 					</Card.Content>
 				</Card.Root>
 
-				<!-- Project Files/Content -->
+				<!-- Project Markdown Description -->
 				<Card.Root>
 					<Card.Header>
 						<Card.Title class="flex items-center gap-2">
 							<FileText class="h-5 w-5" />
-							Project Files
+							Detailed Information
 						</Card.Title>
 					</Card.Header>
 					<Card.Content>
-						<div class="space-y-2">
-							<div
-								class="bg-muted hover:bg-muted/80 flex cursor-pointer items-center gap-3 rounded-lg p-3 transition-colors"
-							>
-								<Code class="text-muted-foreground h-4 w-4" />
-								<span class="font-medium">src/</span>
-								<span class="text-muted-foreground ml-auto text-sm">Source code</span>
-							</div>
-							<div
-								class="bg-muted hover:bg-muted/80 flex cursor-pointer items-center gap-3 rounded-lg p-3 transition-colors"
-							>
-								<FileText class="text-muted-foreground h-4 w-4" />
-								<span class="font-medium">README.md</span>
-								<span class="text-muted-foreground ml-auto text-sm">Project documentation</span>
-							</div>
-							<div
-								class="bg-muted hover:bg-muted/80 flex cursor-pointer items-center gap-3 rounded-lg p-3 transition-colors"
+						{#if isEditing}
+							<RainbowButton
+								onclick={() => $enhanceDescriptionMutation.mutate(editDescription)}
+								disabled={$enhanceDescriptionMutation.isPending || !editDescription}
+								class="mb-4 h-8"
 							>
-								<Code class="text-muted-foreground h-4 w-4" />
-								<span class="font-medium">package.json</span>
-								<span class="text-muted-foreground ml-auto text-sm">Dependencies</span>
-							</div>
-						</div>
+								{#if $enhanceDescriptionMutation.isPending}
+									<LoaderCircle class="animate-spin" />
+									Generating...
+								{:else}
+									<WandSparkles class="size-4" />
+									Enhance Description
+								{/if}
+							</RainbowButton>
+							<Tabs.Root value="edit" class="w-full">
+								<Tabs.List>
+									<Tabs.Trigger value="edit">Edit</Tabs.Trigger>
+									<Tabs.Trigger value="preview">Preview</Tabs.Trigger>
+								</Tabs.List>
+								<Tabs.Content value="edit">
+									<Textarea
+										bind:value={editDescription}
+										placeholder="Enter detailed project description"
+										class="h-64"
+										disabled={$enhanceDescriptionMutation.isPending}
+									/>
+								</Tabs.Content>
+								<Tabs.Content value="preview">
+									<Markdown content={editDescription} />
+								</Tabs.Content>
+							</Tabs.Root>
+						{:else}
+							<Markdown content={project.description ?? 'No information provided'} />
+						{/if}
 					</Card.Content>
 				</Card.Root>
 			</div>
@@ -199,65 +458,136 @@
 				<!-- Quick Actions -->
 				<Card.Root>
 					<Card.Header>
-						<Card.Title class="text-sm">Quick Actions</Card.Title>
+						<Card.Title class="text-sm">Social Links</Card.Title>
 					</Card.Header>
 					<Card.Content class="space-y-2">
-						<Button variant="outline" size="sm" class="w-full justify-start">
-							<GitBranch class="mr-2 h-4 w-4" />
-							Create Branch
+						<Button
+							variant="outline"
+							size="sm"
+							class="w-full justify-start"
+							href="https://google.com"
+							target="_blank"
+						>
+							<Globe class="mr-2 h-4 w-4" />
+							Website
 						</Button>
-						<Button variant="outline" size="sm" class="w-full justify-start">
-							<Code class="mr-2 h-4 w-4" />
-							Clone Repository
+						<Button
+							variant="outline"
+							size="sm"
+							class="w-full justify-start"
+							href="https://t.me"
+							target="_blank"
+						>
+							<Send class="mr-2 h-4 w-4" />
+							Telegram
 						</Button>
-						<Button variant="outline" size="sm" class="w-full justify-start">
-							<FileText class="mr-2 h-4 w-4" />
-							Download ZIP
+						<Button
+							variant="outline"
+							size="sm"
+							class="w-full justify-start"
+							href="https://github.com"
+							target="_blank"
+						>
+							<Github class="mr-2 h-4 w-4" />
+							GitHub
 						</Button>
 					</Card.Content>
 				</Card.Root>
-
-				<!-- Recent Activity -->
+				<!-- Contributors -->
 				<Card.Root>
 					<Card.Header>
-						<Card.Title class="text-sm">Recent Activity</Card.Title>
+						<Card.Title class="text-sm">Contributors</Card.Title>
 					</Card.Header>
 					<Card.Content class="space-y-3">
-						<div class="text-sm">
-							<div class="font-medium">Initial commit</div>
-							<div class="text-muted-foreground text-xs">2 hours ago</div>
+						<div class="flex items-center gap-3">
+							{#if !$projectOwnerQuery.data}
+								<Skeleton class="h-8 w-24" />
+							{:else}
+								<div
+									class="bg-primary text-primary-foreground flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium"
+								>
+									{$projectOwnerQuery.data.username.slice(0, 1).toUpperCase()}
+								</div>
+								<div class="min-w-0 flex-1">
+									<div class="text-sm font-medium">{$projectOwnerQuery.data.username}</div>
+									<div class="text-muted-foreground text-xs">Owner</div>
+								</div>
+							{/if}
 						</div>
-						<div class="text-sm">
-							<div class="font-medium">Added README</div>
-							<div class="text-muted-foreground text-xs">1 day ago</div>
+						<div class="flex items-center gap-3">
+							<div
+								class="bg-primary text-primary-foreground flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium"
+							>
+								C
+							</div>
+							<div class="min-w-0 flex-1">
+								<div class="text-sm font-medium">Jane Smith</div>
+								<div class="text-muted-foreground text-xs">Co-Founder</div>
+							</div>
 						</div>
-						<div class="text-sm">
-							<div class="font-medium">Project created</div>
-							<div class="text-muted-foreground text-xs">3 days ago</div>
+						<div class="flex items-center gap-3">
+							<div
+								class="bg-primary text-primary-foreground flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium"
+							>
+								D
+							</div>
+							<div class="min-w-0 flex-1">
+								<div class="text-sm font-medium">David Johnson</div>
+								<div class="text-muted-foreground text-xs">Developer</div>
+							</div>
 						</div>
+						<Card.Footer class="pt-2">
+							{#if project.ceo_id === data.user?.id}
+								<Button
+									variant="default"
+									size="sm"
+									class="w-full justify-center"
+									onclick={() => (showContributorsDialog = true)}
+								>
+									<Users class="mr-2 h-4 w-4" />
+									Manage Applications
+								</Button>
+							{:else}
+								<Button
+									variant="default"
+									size="sm"
+									class="w-full justify-center"
+									onclick={() => $applyToProjectMutation.mutate(project.id)}
+								>
+									<MailPlus />
+									Apply to Contribute
+								</Button>
+							{/if}
+						</Card.Footer>
 					</Card.Content>
 				</Card.Root>
 
-				<!-- Contributors -->
+				<!-- Recent Activity -->
 				<Card.Root>
 					<Card.Header>
-						<Card.Title class="text-sm">Contributors</Card.Title>
+						<Card.Title class="text-sm">Recent Activity</Card.Title>
 					</Card.Header>
 					<Card.Content class="space-y-3">
-						<div class="flex items-center gap-3">
-							<div
-								class="bg-primary text-primary-foreground flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium"
-							>
-								U
-							</div>
-							<div class="min-w-0 flex-1">
-								<div class="text-sm font-medium">Project Owner</div>
-								<div class="text-muted-foreground text-xs">Owner</div>
-							</div>
+						<div class="text-sm">
+							<div class="font-medium">Description updated</div>
+							<div class="text-muted-foreground text-xs">1 hours ago</div>
+						</div>
+						<div class="text-sm">
+							<div class="font-medium">New contributor applied</div>
+							<div class="text-muted-foreground text-xs">2 day ago</div>
+						</div>
+						<div class="text-sm">
+							<div class="font-medium">Project created</div>
+							<div class="text-muted-foreground text-xs">3 days ago</div>
 						</div>
 					</Card.Content>
 				</Card.Root>
 			</div>
 		</div>
+
+		<!-- Contributors Dialog -->
+		{#if showContributorsDialog}
+			<ProjectContributors {projectId} bind:open={showContributorsDialog} />
+		{/if}
 	{/if}
 </div>
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
new file mode 100644
index 0000000..9c9a513
--- /dev/null
+++ b/frontend/tailwind.config.ts
@@ -0,0 +1,42 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	theme: {
+		extend: {
+			colors: {
+				'color-1': 'hsl(var(--color-1))',
+				'color-2': 'hsl(var(--color-2))',
+				'color-3': 'hsl(var(--color-3))',
+				'color-4': 'hsl(var(--color-4))',
+				'color-5': 'hsl(var(--color-5))'
+			},
+			animation: {
+				rainbow: 'rainbow var(--speed, 2s) infinite linear',
+				orbit: 'orbit calc(var(--duration)*1s) linear infinite',
+				marquee: 'marquee var(--duration) linear infinite',
+				'marquee-vertical': 'marquee-vertical var(--duration) linear infinite'
+			},
+			keyframes: {
+				rainbow: {
+					'0%': { 'background-position': '0%' },
+					'100%': { 'background-position': '200%' }
+				},
+				orbit: {
+					'0%': {
+						transform: 'rotate(0deg) translateY(calc(var(--radius) * 1px)) rotate(0deg)'
+					},
+					'100%': {
+						transform: 'rotate(360deg) translateY(calc(var(--radius) * 1px)) rotate(-360deg)'
+					}
+				},
+				marquee: {
+					from: { transform: 'translateX(0)' },
+					to: { transform: 'translateX(calc(-100% - var(--gap)))' }
+				},
+				'marquee-vertical': {
+					from: { transform: 'translateY(0)' },
+					to: { transform: 'translateY(calc(-100% - var(--gap)))' }
+				}
+			}
+		}
+	}
+};