diff --git a/api/app/database/pg/graph_ops/graph_crud.py b/api/app/database/pg/graph_ops/graph_crud.py
index df566f46..8edfbe58 100644
--- a/api/app/database/pg/graph_ops/graph_crud.py
+++ b/api/app/database/pg/graph_ops/graph_crud.py
@@ -3,13 +3,13 @@
 from datetime import datetime, timedelta, timezone
 
 from database.neo4j.crud import update_neo4j_graph
-from database.pg.models import Edge, Folder, Graph, Node
+from database.pg.models import Edge, Folder, Graph, Node, Workspace
 from fastapi import HTTPException
 from models.usersDTO import SettingsDTO
 from neo4j import AsyncDriver
 from neo4j.exceptions import Neo4jError
 from pydantic import BaseModel
-from sqlalchemy import delete, func, select
+from sqlalchemy import delete, func, select, update
 from sqlalchemy.ext.asyncio import AsyncEngine as SQLAlchemyAsyncEngine
 from sqlalchemy.orm import selectinload
 from sqlmodel import and_
@@ -68,10 +68,16 @@ async def get_user_folders(engine: SQLAlchemyAsyncEngine, user_id: str) -> list[
         return list(result.scalars().all())
 
 
-async def create_folder(engine: SQLAlchemyAsyncEngine, user_id: str, name: str) -> Folder:
+async def create_folder(
+    engine: SQLAlchemyAsyncEngine, user_id: str, name: str, workspace_id: str | None = None
+) -> Folder:
     """Create a new folder."""
     async with AsyncSession(engine) as session:
-        folder = Folder(name=name, user_id=user_id)
+        folder = Folder(
+            name=name,
+            user_id=user_id,
+            workspace_id=uuid.UUID(workspace_id) if workspace_id else None,
+        )
         session.add(folder)
         await session.commit()
         await session.refresh(folder)
@@ -106,6 +112,35 @@ async def update_folder_color(engine: SQLAlchemyAsyncEngine, folder_id: str, col
         return folder
 
 
+async def update_folder_workspace(
+    engine: SQLAlchemyAsyncEngine, folder_id: str, workspace_id: str
+) -> Folder:
+    """
+    Move a folder to a different workspace.
+    This also updates all graphs contained in this folder to the new workspace.
+    """
+    async with AsyncSession(engine) as session:
+        async with session.begin():
+            folder = await session.get(Folder, folder_id)
+            if not folder:
+                raise HTTPException(status_code=404, detail="Folder not found")
+
+            new_ws_uuid = uuid.UUID(workspace_id)
+            folder.workspace_id = new_ws_uuid
+            session.add(folder)
+
+            # Update contained graphs
+            stmt = (
+                update(Graph)
+                .where(and_(Graph.folder_id == folder_id))
+                .values(workspace_id=new_ws_uuid)
+            )
+            await session.exec(stmt)  # type: ignore
+
+        await session.refresh(folder)
+        return folder
+
+
 async def delete_folder(engine: SQLAlchemyAsyncEngine, folder_id: str) -> None:
     """Delete a folder. Graphs inside will have folder_id set to NULL due to ON DELETE SET NULL."""
     async with AsyncSession(engine) as session:
@@ -119,7 +154,10 @@ async def delete_folder(engine: SQLAlchemyAsyncEngine, folder_id: str) -> None:
 async def move_graph_to_folder(
     engine: SQLAlchemyAsyncEngine, graph_id: str, folder_id: str | None
 ) -> Graph:
-    """Move a graph to a specific folder (or root if folder_id is None)."""
+    """
+    Move a graph to a specific folder (or root if folder_id is None).
+    If moved to a folder, it adopts the folder's workspace.
+    """
     async with AsyncSession(engine) as session:
         async with session.begin():
             stmt = select(Graph).where(and_(Graph.id == graph_id))
@@ -130,6 +168,13 @@ async def move_graph_to_folder(
                 raise HTTPException(status_code=404, detail="Graph not found")
 
             graph.folder_id = uuid.UUID(folder_id) if folder_id else None
+
+            # If moving to a folder, update workspace_id to match the folder's workspace
+            if folder_id:
+                folder = await session.get(Folder, folder_id)
+                if folder:
+                    graph.workspace_id = folder.workspace_id
+
             session.add(graph)
 
         await session.refresh(graph, attribute_names=["folder_id", "nodes"])
@@ -143,6 +188,32 @@ async def move_graph_to_folder(
         return graph
 
 
+async def move_graph_to_workspace(
+    engine: SQLAlchemyAsyncEngine, graph_id: str, workspace_id: str
+) -> Graph:
+    """Move a graph to a specific workspace. Removes it from any folder."""
+    async with AsyncSession(engine) as session:
+        async with session.begin():
+            graph = await session.get(Graph, graph_id)
+            if not graph:
+                raise HTTPException(status_code=404, detail="Graph not found")
+
+            graph.workspace_id = uuid.UUID(workspace_id)
+            graph.folder_id = None
+            session.add(graph)
+
+        await session.refresh(graph, attribute_names=["workspace_id", "folder_id", "nodes"])
+
+        if not isinstance(graph, Graph):
+            raise HTTPException(
+                status_code=500, detail="Unexpected error: Retrieved object is not of type Graph."
+            )
+
+        graph.node_count = len(graph.nodes)
+
+        return graph
+
+
 class CompleteGraph(BaseModel):
     graph: Graph
     nodes: list[Node]
@@ -183,7 +254,11 @@ async def get_graph_by_id(engine: SQLAlchemyAsyncEngine, graph_id: str) -> Compl
 
 
 async def create_empty_graph(
-    engine: SQLAlchemyAsyncEngine, user_id: str, user_config: SettingsDTO, temporary: bool
+    engine: SQLAlchemyAsyncEngine,
+    user_id: str,
+    user_config: SettingsDTO,
+    temporary: bool,
+    workspace_id: str | None = None,
 ) -> Graph:
     """
     Create an empty graph in the database.
@@ -199,10 +274,26 @@ async def create_empty_graph(
 
     async with AsyncSession(engine) as session:
         async with session.begin():
+            target_workspace_id = None
+            if workspace_id:
+                target_workspace_id = uuid.UUID(workspace_id)
+            else:
+                stmt = (
+                    select(Workspace)
+                    .where(and_(Workspace.user_id == user_id))
+                    .order_by(Workspace.created_at)  # type: ignore
+                    .limit(1)
+                )
+                result = await session.exec(stmt)  # type: ignore
+                default_ws = result.scalars().first()
+                if default_ws:
+                    target_workspace_id = default_ws.id
+
             graph = Graph(
                 name="New Canvas",
                 user_id=user_id,
                 temporary=temporary,
+                workspace_id=target_workspace_id,
                 custom_instructions=systemPromptSelected,
                 max_tokens=user_config.models.maxTokens,
                 temperature=user_config.models.temperature,
@@ -356,3 +447,113 @@ async def delete_old_temporary_graphs(
         f"Cron job: Successfully deleted {len(graph_ids_to_delete)} "
         f"temporary graphs from PostgreSQL."
     )
+
+
+async def get_user_workspaces(engine: SQLAlchemyAsyncEngine, user_id: str) -> list[Workspace]:
+    """Retrieve all workspaces for a user. Create default if none exist."""
+    async with AsyncSession(engine) as session:
+        stmt = (
+            select(Workspace)
+            .where(and_(Workspace.user_id == user_id))
+            .order_by(Workspace.created_at)  # type: ignore
+        )
+        result = await session.exec(stmt)  # type: ignore
+        workspaces = list(result.scalars().all())
+
+        return workspaces
+
+
+async def create_workspace(engine: SQLAlchemyAsyncEngine, user_id: str, name: str) -> Workspace:
+    async with AsyncSession(engine) as session:
+        ws = Workspace(name=name, user_id=user_id)
+        session.add(ws)
+        await session.commit()
+        await session.refresh(ws)
+        return ws
+
+
+async def update_workspace(
+    engine: SQLAlchemyAsyncEngine,
+    workspace_id: str,
+    user_id: str,
+    name: str,
+) -> Workspace:
+    async with AsyncSession(engine) as session:
+        stmt = select(Workspace).where(
+            and_(Workspace.id == workspace_id, Workspace.user_id == user_id)
+        )
+        result = await session.exec(stmt)  # type: ignore
+        ws = result.scalar_one_or_none()
+
+        if not ws:
+            raise HTTPException(status_code=404, detail="Workspace not found")
+
+        ws.name = name
+        session.add(ws)
+        await session.commit()
+        await session.refresh(ws)
+
+        if not isinstance(ws, Workspace):
+            raise HTTPException(
+                status_code=500,
+                detail="Unexpected error: Retrieved object is not of type Workspace.",
+            )
+
+        return ws
+
+
+async def delete_workspace(engine: SQLAlchemyAsyncEngine, workspace_id: str, user_id: str) -> None:
+    async with AsyncSession(engine) as session:
+        async with session.begin():
+            ws = await session.get(Workspace, workspace_id)
+            if not ws:
+                raise HTTPException(status_code=404, detail="Workspace not found")
+
+            if str(ws.user_id) != user_id:
+                raise HTTPException(
+                    status_code=403, detail="Not authorized to delete this workspace"
+                )
+
+            # Prevent deleting the last workspace
+            stmt_count = (
+                select(func.count())
+                .select_from(Workspace)
+                .where(and_(Workspace.user_id == user_id))
+            )
+            count = await session.scalar(stmt_count)
+            if count is None or count <= 1:
+                raise HTTPException(status_code=400, detail="Cannot delete the only workspace.")
+
+            # Identify Fallback Workspace (Oldest remaining that is not the target)
+            stmt_fallback = (
+                select(Workspace)
+                .where(and_(Workspace.user_id == user_id, Workspace.id != workspace_id))
+                .order_by(Workspace.created_at)  # type: ignore
+                .limit(1)
+            )
+            result_fallback = await session.exec(stmt_fallback)  # type: ignore
+            fallback_ws = result_fallback.scalar_one_or_none()
+
+            if not fallback_ws:
+                raise HTTPException(
+                    status_code=500, detail="Unable to identify fallback workspace."
+                )
+
+            # Migrate Folders to fallback workspace
+            stmt_folders = (
+                update(Folder)
+                .where(and_(Folder.workspace_id == workspace_id))
+                .values(workspace_id=fallback_ws.id)
+            )
+            await session.exec(stmt_folders)  # type: ignore
+
+            # Migrate Graphs to fallback workspace
+            stmt_graphs = (
+                update(Graph)
+                .where(and_(Graph.workspace_id == workspace_id))
+                .values(workspace_id=fallback_ws.id)
+            )
+            await session.exec(stmt_graphs)  # type: ignore
+
+            # Delete the workspace
+            await session.delete(ws)
diff --git a/api/app/database/pg/models.py b/api/app/database/pg/models.py
index 3dc111c6..fd0f12ca 100644
--- a/api/app/database/pg/models.py
+++ b/api/app/database/pg/models.py
@@ -52,6 +52,48 @@ class UserStorageUsage(SQLModel, table=True):
     )
 
 
+class Workspace(SQLModel, table=True):
+    __tablename__ = "workspaces"
+
+    id: Optional[uuid.UUID] = Field(
+        default=None,
+        sa_column=Column(
+            PG_UUID(as_uuid=True),
+            primary_key=True,
+            server_default=func.uuid_generate_v4(),
+            nullable=False,
+        ),
+    )
+    user_id: uuid.UUID = Field(
+        sa_column=Column(
+            PG_UUID(as_uuid=True),
+            ForeignKey("users.id", ondelete="CASCADE"),
+            nullable=False,
+        ),
+    )
+    name: str = Field(max_length=50, nullable=False)
+    created_at: Optional[datetime.datetime] = Field(
+        default=None,
+        sa_column=Column(
+            TIMESTAMP(timezone=True),
+            server_default=func.now(),
+            nullable=False,
+        ),
+    )
+    updated_at: Optional[datetime.datetime] = Field(
+        default=None,
+        sa_column=Column(
+            TIMESTAMP(timezone=True),
+            server_default=func.now(),
+            onupdate=func.now(),
+            nullable=False,
+        ),
+    )
+
+    graphs: list["Graph"] = Relationship(back_populates="workspace")
+    folders: list["Folder"] = Relationship(back_populates="workspace")
+
+
 class Folder(SQLModel, table=True):
     __tablename__ = "folders"
 
@@ -71,6 +113,14 @@ class Folder(SQLModel, table=True):
             nullable=False,
         ),
     )
+    workspace_id: Optional[uuid.UUID] = Field(
+        default=None,
+        sa_column=Column(
+            PG_UUID(as_uuid=True),
+            ForeignKey("workspaces.id", ondelete="CASCADE"),
+            nullable=True,
+        ),
+    )
     name: str = Field(max_length=255, nullable=False)
     color: Optional[str] = Field(default=None, max_length=50, nullable=True)
 
@@ -93,6 +143,7 @@ class Folder(SQLModel, table=True):
     )
 
     graphs: list["Graph"] = Relationship(back_populates="folder")
+    workspace: Optional[Workspace] = Relationship(back_populates="folders")
 
 
 class Graph(SQLModel, table=True):
@@ -123,6 +174,14 @@ class Graph(SQLModel, table=True):
             nullable=True,
         ),
     )
+    workspace_id: Optional[uuid.UUID] = Field(
+        default=None,
+        sa_column=Column(
+            PG_UUID(as_uuid=True),
+            ForeignKey("workspaces.id", ondelete="SET NULL"),
+            nullable=True,
+        ),
+    )
 
     name: str = Field(index=True, max_length=255, nullable=False)
     description: Optional[str] = Field(default=None, sa_column=Column(TEXT))  # not used
@@ -178,6 +237,7 @@ class Graph(SQLModel, table=True):
     edges: list["Edge"] = Relationship(back_populates="graph")
 
     folder: Optional[Folder] = Relationship(back_populates="graphs")
+    workspace: Optional[Workspace] = Relationship(back_populates="graphs")
 
     _node_count: Optional[int] = PrivateAttr(default=None)
 
diff --git a/api/app/database/pg/user_ops/user_crud.py b/api/app/database/pg/user_ops/user_crud.py
index 0683ba4d..d4bec055 100644
--- a/api/app/database/pg/user_ops/user_crud.py
+++ b/api/app/database/pg/user_ops/user_crud.py
@@ -1,6 +1,6 @@
 import logging
 
-from database.pg.models import User
+from database.pg.models import User, Workspace
 from fastapi import HTTPException
 from models.auth import ProviderEnum
 from pydantic import BaseModel, Field
@@ -28,6 +28,7 @@ async def create_user_from_provider(
 ) -> User:
     """
     Create a new user in the database from OAuth provider data.
+    Automatically creates a default 'Home' workspace.
 
     Args:
         pg_engine (SQLAlchemyAsyncEngine): The SQLAlchemy async engine instance.
@@ -58,8 +59,15 @@ async def create_user_from_provider(
                 oauth_id=str(payload.oauth_id),
             )
             session.add(user)
-            await session.commit()
-            return user
+
+            await session.flush()
+
+            # Create Default Workspace
+            workspace = Workspace(user_id=user.id, name="Default")
+            session.add(workspace)
+
+        await session.refresh(user)
+        return user
 
 
 async def create_user_with_password(
@@ -70,6 +78,7 @@ async def create_user_with_password(
 ) -> User:
     """
     Create a new user with a username and password (userpass provider).
+    Automatically creates a default 'Home' workspace.
 
     Args:
         pg_engine (SQLAlchemyAsyncEngine): The SQLAlchemy async engine.
@@ -84,37 +93,44 @@ async def create_user_with_password(
         HTTPException: If username or email is already taken.
     """
     async with AsyncSession(pg_engine, expire_on_commit=False) as session:
-        async with session.begin():
-            # Check for existing username or email
-            stmt = select(User).where(
-                or_(
-                    and_(User.username == username, User.oauth_provider == "userpass"),
-                    User.email == email,
+        try:
+            async with session.begin():
+                # Check for existing username or email
+                stmt = select(User).where(
+                    or_(
+                        and_(User.username == username, User.oauth_provider == "userpass"),
+                        User.email == email,
+                    )
                 )
-            )
-            result = await session.exec(stmt)  # type: ignore
-            existing_user_row = result.first()
+                result = await session.exec(stmt)  # type: ignore
+                existing_user_row = result.first()
+
+                if existing_user_row:
+                    existing_user = existing_user_row[0]
+                    if existing_user.email == email:
+                        raise HTTPException(status_code=409, detail="Email is already registered.")
+                    raise HTTPException(status_code=409, detail="Username is already taken.")
+
+                user = User(
+                    username=username,
+                    email=email,
+                    password=hashed_password,
+                    oauth_provider="userpass",
+                    plan_type="free",
+                )
+                session.add(user)
 
-            if existing_user_row:
-                existing_user = existing_user_row[0]
-                if existing_user.email == email:
-                    raise HTTPException(status_code=409, detail="Email is already registered.")
-                raise HTTPException(status_code=409, detail="Username is already taken.")
+                await session.flush()
 
-            user = User(
-                username=username,
-                email=email,
-                password=hashed_password,
-                oauth_provider="userpass",
-                plan_type="free",
-            )
-            session.add(user)
-            try:
-                await session.commit()
-            except IntegrityError:
-                await session.rollback()
-                raise HTTPException(status_code=409, detail="Username or Email already exists.")
-            return user
+                # Create Default Workspace
+                workspace = Workspace(user_id=user.id, name="Default")
+                session.add(workspace)
+
+        except IntegrityError:
+            raise HTTPException(status_code=409, detail="Username or Email already exists.")
+
+        await session.refresh(user)
+        return user
 
 
 async def get_user_by_provider_id(
diff --git a/api/app/routers/graph.py b/api/app/routers/graph.py
index 0b384b39..d4e857f0 100644
--- a/api/app/routers/graph.py
+++ b/api/app/routers/graph.py
@@ -8,18 +8,24 @@
     CompleteGraph,
     create_empty_graph,
     create_folder,
+    create_workspace,
     delete_folder,
     delete_graph,
+    delete_workspace,
     get_all_graphs,
     get_graph_by_id,
     get_user_folders,
+    get_user_workspaces,
     move_graph_to_folder,
+    move_graph_to_workspace,
     persist_temporary_graph,
     update_folder_color,
     update_folder_name,
+    update_folder_workspace,
+    update_workspace,
 )
 from database.pg.graph_ops.graph_node_crud import update_graph_with_nodes_and_edges
-from database.pg.models import Folder, Graph
+from database.pg.models import Folder, Graph, Workspace
 from database.pg.user_ops.usage_limits import check_free_tier_canvas_limit, validate_premium_nodes
 from fastapi import APIRouter, Depends, HTTPException, Request
 from models.graphDTO import NodeSearchRequest
@@ -73,6 +79,7 @@ async def route_get_graph_by_id(
 async def route_create_new_empty_graph(
     request: Request,
     temporary: bool = False,
+    workspace_id: str | None = None,
     user_id: str = Depends(get_current_user_id),
 ) -> Graph:
     """
@@ -89,7 +96,9 @@ async def route_create_new_empty_graph(
 
     user_settings = await get_user_settings(request.app.state.pg_engine, user_id)
 
-    return await create_empty_graph(request.app.state.pg_engine, user_id, user_settings, temporary)
+    return await create_empty_graph(
+        request.app.state.pg_engine, user_id, user_settings, temporary, workspace_id
+    )
 
 
 @router.post("/graph/{graph_id}/update")
@@ -345,9 +354,10 @@ async def route_get_folders(
 async def route_create_folder(
     request: Request,
     name: str,
+    workspace_id: str | None = None,
     user_id: str = Depends(get_current_user_id),
 ) -> Folder:
-    return await create_folder(request.app.state.pg_engine, user_id, name)
+    return await create_folder(request.app.state.pg_engine, user_id, name, workspace_id)
 
 
 @router.patch("/folders/{folder_id}")
@@ -356,12 +366,15 @@ async def route_update_folder(
     folder_id: str,
     name: str | None = None,
     color: str | None = None,
+    workspace_id: str | None = None,
     user_id: str = Depends(get_current_user_id),
 ) -> Folder:
     if name is not None:
         return await update_folder_name(request.app.state.pg_engine, folder_id, name)
     if color is not None:
         return await update_folder_color(request.app.state.pg_engine, folder_id, color)
+    if workspace_id is not None:
+        return await update_folder_workspace(request.app.state.pg_engine, folder_id, workspace_id)
     raise HTTPException(status_code=400, detail="No valid update parameters provided")
 
 
@@ -379,6 +392,59 @@ async def route_move_graph(
     request: Request,
     graph_id: str,
     folder_id: str | None = None,  # None means move to root
+    workspace_id: str | None = None,
     user_id: str = Depends(get_current_user_id),
 ) -> Graph:
-    return await move_graph_to_folder(request.app.state.pg_engine, graph_id, folder_id)
+    engine = request.app.state.pg_engine
+
+    # CASE 1: Move to specific folder
+    if folder_id:
+        if workspace_id:
+            pass
+        return await move_graph_to_folder(engine, graph_id, folder_id)
+
+    # CASE 2: Move to workspace root (removes from folder)
+    if workspace_id:
+        return await move_graph_to_workspace(engine, graph_id, workspace_id)
+
+    # CASE 3: Remove from folder (stay in current workspace root)
+    return await move_graph_to_folder(engine, graph_id, None)
+
+
+# --- Workspace Routes ---
+
+
+@router.get("/workspaces")
+async def route_get_workspaces(
+    request: Request,
+    user_id: str = Depends(get_current_user_id),
+) -> list[Workspace]:
+    return await get_user_workspaces(request.app.state.pg_engine, user_id)
+
+
+@router.post("/workspaces")
+async def route_create_workspace(
+    request: Request,
+    name: str,
+    user_id: str = Depends(get_current_user_id),
+) -> Workspace:
+    return await create_workspace(request.app.state.pg_engine, user_id, name)
+
+
+@router.patch("/workspaces/{workspace_id}")
+async def route_update_workspace(
+    request: Request,
+    workspace_id: str,
+    name: str,
+    user_id: str = Depends(get_current_user_id),
+) -> Workspace:
+    return await update_workspace(request.app.state.pg_engine, workspace_id, user_id, name)
+
+
+@router.delete("/workspaces/{workspace_id}")
+async def route_delete_workspace(
+    request: Request,
+    workspace_id: str,
+    user_id: str = Depends(get_current_user_id),
+) -> None:
+    await delete_workspace(request.app.state.pg_engine, workspace_id, user_id)
diff --git a/api/migrations/versions/fd447b227777_add_workspace_table.py b/api/migrations/versions/fd447b227777_add_workspace_table.py
new file mode 100644
index 00000000..e31e147f
--- /dev/null
+++ b/api/migrations/versions/fd447b227777_add_workspace_table.py
@@ -0,0 +1,116 @@
+# flake8: noqa
+"""add workspace table
+
+Revision ID: fd447b227777
+Revises: c8c2d84a3b86
+Create Date: 2026-01-02 17:26:53.779164
+
+"""
+
+import sqlalchemy as sa
+import sqlmodel
+from alembic import op
+from sqlalchemy.dialects import postgresql
+
+# revision identifiers, used by Alembic.
+revision = "fd447b227777"
+down_revision = "c8c2d84a3b86"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.execute('CREATE EXTENSION IF NOT EXISTS "uuid-ossp"')
+
+    # 1. Create workspaces table
+    op.create_table(
+        "workspaces",
+        sa.Column(
+            "id",
+            postgresql.UUID(as_uuid=True),
+            server_default=sa.text("uuid_generate_v4()"),
+            nullable=False,
+        ),
+        sa.Column("user_id", postgresql.UUID(as_uuid=True), nullable=False),
+        sa.Column("name", sqlmodel.sql.sqltypes.AutoString(length=50), nullable=False),
+        sa.Column(
+            "created_at",
+            sa.TIMESTAMP(timezone=True),
+            server_default=sa.text("now()"),
+            nullable=False,
+        ),
+        sa.Column(
+            "updated_at",
+            sa.TIMESTAMP(timezone=True),
+            server_default=sa.text("now()"),
+            nullable=False,
+        ),
+        sa.ForeignKeyConstraint(["user_id"], ["users.id"], ondelete="CASCADE"),
+        sa.PrimaryKeyConstraint("id"),
+    )
+
+    # 2. Add workspace_id to folders
+    op.add_column(
+        "folders", sa.Column("workspace_id", postgresql.UUID(as_uuid=True), nullable=True)
+    )
+    op.create_foreign_key(
+        "fk_folders_workspace_id",
+        "folders",
+        "workspaces",
+        ["workspace_id"],
+        ["id"],
+        ondelete="CASCADE",
+    )
+
+    # 3. Add workspace_id to graphs
+    op.add_column("graphs", sa.Column("workspace_id", postgresql.UUID(as_uuid=True), nullable=True))
+    op.create_foreign_key(
+        "fk_graphs_workspace_id",
+        "graphs",
+        "workspaces",
+        ["workspace_id"],
+        ["id"],
+        ondelete="SET NULL",
+    )
+
+    # 4. Data Migration
+    # Create default workspaces for all existing users
+    op.execute(
+        """
+        INSERT INTO workspaces (id, user_id, name, created_at, updated_at)
+        SELECT uuid_generate_v4(), id, 'Default', now(), now()
+        FROM users
+    """
+    )
+
+    # Link existing folders to the new default workspace of their owner
+    op.execute(
+        """
+        UPDATE folders f
+        SET workspace_id = w.id
+        FROM workspaces w
+        WHERE f.user_id = w.user_id
+    """
+    )
+
+    # Link existing graphs to the new default workspace of their owner
+    op.execute(
+        """
+        UPDATE graphs g
+        SET workspace_id = w.id
+        FROM workspaces w
+        WHERE g.user_id = w.user_id
+    """
+    )
+
+
+def downgrade() -> None:
+    # 1. Drop foreign keys and columns
+    op.drop_constraint("fk_graphs_workspace_id", "graphs", type_="foreignkey")
+    op.drop_column("graphs", "workspace_id")
+
+    op.drop_constraint("fk_folders_workspace_id", "folders", type_="foreignkey")
+    op.drop_column("folders", "workspace_id")
+
+    # 2. Drop workspaces table
+    op.drop_table("workspaces")
diff --git a/ui/app/assets/icons/MdiBriefcaseOutline.svg b/ui/app/assets/icons/MdiBriefcaseOutline.svg
new file mode 100644
index 00000000..0a2400f8
--- /dev/null
+++ b/ui/app/assets/icons/MdiBriefcaseOutline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Design Icons by Pictogrammers - https://github.com/Templarian/MaterialDesign/blob/master/LICENSE --><path fill="currentColor" d="M20 6c.58 0 1.05.2 1.42.59c.38.41.58.86.58 1.41v11c0 .55-.2 1-.58 1.41c-.37.39-.84.59-1.42.59H4c-.58 0-1.05-.2-1.42-.59C2.2 20 2 19.55 2 19V8c0-.55.2-1 .58-1.41C2.95 6.2 3.42 6 4 6h4V4c0-.58.2-1.05.58-1.42C8.95 2.2 9.42 2 10 2h4c.58 0 1.05.2 1.42.58c.38.37.58.84.58 1.42v2zM4 8v11h16V8zm10-2V4h-4v2z"/></svg>
\ No newline at end of file
diff --git a/ui/app/assets/icons/MdiFolderRemoveOutline.svg b/ui/app/assets/icons/MdiFolderRemoveOutline.svg
new file mode 100644
index 00000000..38be1ab6
--- /dev/null
+++ b/ui/app/assets/icons/MdiFolderRemoveOutline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Design Icons by Pictogrammers - https://github.com/Templarian/MaterialDesign/blob/master/LICENSE --><path fill="currentColor" d="M13 19c0 .34.04.67.09 1H4a2 2 0 0 1-2-2V6c0-1.11.89-2 2-2h6l2 2h8a2 2 0 0 1 2 2v5.81c-.61-.35-1.28-.59-2-.72V8H4v10h9.09c-.05.33-.09.66-.09 1m9.54-2.12l-1.42-1.41L19 17.59l-2.12-2.12l-1.41 1.41L17.59 19l-2.12 2.12l1.41 1.42L19 20.41l2.12 2.13l1.42-1.42L20.41 19z"/></svg>
\ No newline at end of file
diff --git a/ui/app/components/ui/home/recentCanvasSection.vue b/ui/app/components/ui/home/recentCanvasSection.vue
index 4c088fef..7ee958ca 100644
--- a/ui/app/components/ui/home/recentCanvasSection.vue
+++ b/ui/app/components/ui/home/recentCanvasSection.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import type { Graph, Folder } from '@/types/graph';
+import type { Graph, Folder, Workspace } from '@/types/graph';
+import UiUtilsSearchBar from '~/components/ui/utils/searchBar.vue';
 
 // --- Props ---
 const props = defineProps({
@@ -11,6 +12,10 @@ const props = defineProps({
         type: Array as PropType<Folder[]>,
         required: true,
     },
+    workspaces: {
+        type: Array as PropType<Workspace[]>,
+        default: () => [],
+    },
     isLoading: {
         type: Boolean,
         default: false,
@@ -22,10 +27,23 @@ const emit = defineEmits<{
     (e: 'delete', id: string, name: string): void;
 }>();
 
+// --- Composables ---
+const {
+    activeWorkspaceId,
+    activeWorkspace,
+    handleWheel: handleWorkspaceWheel,
+    initActiveWorkspace,
+} = useSidebarWorkspaces(
+    toRef(props, 'workspaces'),
+    toRef(props, 'graphs'),
+    toRef(props, 'folders'),
+);
+
 // --- Local State ---
 const searchQuery = ref('');
+const searchScope = ref<'workspace' | 'global'>('workspace');
 const currentFolderId = ref<string | null>(null);
-const searchInputRef = ref<HTMLInputElement | null>(null);
+const searchBarRef = ref<InstanceType<typeof UiUtilsSearchBar> | null>(null);
 const scrollContainer = ref<HTMLElement | null>(null);
 const isMac = ref(false);
 
@@ -37,24 +55,44 @@ const currentFolder = computed(() => {
 
 /**
  * Determines what items to display in the grid.
- * 1. If Searching: Show all matching graphs (flat list).
- * 2. If Folder Open: Show graphs inside that folder.
- * 3. If Root: Show Pinned Graphs -> Folders -> Loose Graphs.
+ * 1. If Searching: Show all matching graphs (flat list) respecting scope.
+ * 2. If Folder Open: Show graphs inside that folder (workspace bound).
+ * 3. If Root: Show Pinned Graphs -> Folders -> Loose Graphs (workspace bound).
  */
 const displayedItems = computed(() => {
-    // 1. Search Mode (Global)
+    // 1. Search Mode
     if (searchQuery.value) {
         const query = searchQuery.value.toLowerCase();
-        const matches = props.graphs
+        let sourceGraphs = props.graphs;
+
+        // Apply Scope Filtering
+        if (searchScope.value === 'workspace' && activeWorkspaceId.value) {
+            sourceGraphs = sourceGraphs.filter((g) => g.workspace_id === activeWorkspaceId.value);
+        }
+
+        const matches = sourceGraphs
             .filter((g) => g.name.toLowerCase().includes(query))
             .sort((a, b) => Number(b.pinned) - Number(a.pinned)); // Pinned first
 
         return matches.map((g) => ({ type: 'graph', data: g }));
     }
 
+    // If no workspace selected yet (and not global searching), return empty
+    if (!activeWorkspaceId.value) return [];
+
+    // Pre-filter by workspace for standard view
+    const workspaceGraphs = props.graphs.filter((g) => g.workspace_id === activeWorkspaceId.value);
+    const workspaceFolders = props.folders.filter(
+        (f) => f.workspace_id === activeWorkspaceId.value,
+    );
+
     // 2. Folder View
     if (currentFolderId.value) {
-        const folderGraphs = props.graphs
+        // Ensure folder belongs to current workspace
+        const folder = workspaceFolders.find((f) => f.id === currentFolderId.value);
+        if (!folder) return [];
+
+        const folderGraphs = workspaceGraphs
             .filter((g) => g.folder_id === currentFolderId.value)
             .sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime());
 
@@ -62,17 +100,17 @@ const displayedItems = computed(() => {
     }
 
     // 3. Root View
-    const pinned = props.graphs.filter((g) => g.pinned).map((g) => ({ type: 'graph', data: g }));
+    const pinned = workspaceGraphs.filter((g) => g.pinned).map((g) => ({ type: 'graph', data: g }));
 
     // Folders need to know how many items they contain for the UI
-    const folderItems = props.folders
+    const folderItems = workspaceFolders
         .map((f) => {
-            const count = props.graphs.filter((g) => g.folder_id === f.id).length;
+            const count = workspaceGraphs.filter((g) => g.folder_id === f.id).length;
             return { type: 'folder', data: f, count };
         })
         .sort((a, b) => a.data.name.localeCompare(b.data.name));
 
-    const loose = props.graphs
+    const loose = workspaceGraphs
         .filter((g) => !g.pinned && !g.folder_id)
         .sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
         .map((g) => ({ type: 'graph', data: g }));
@@ -81,14 +119,10 @@ const displayedItems = computed(() => {
 });
 
 // --- Methods ---
-const handleShiftSpace = () => {
-    document.execCommand('insertText', false, ' ');
-};
-
 const handleKeyDown = (event: KeyboardEvent) => {
     if ((event.key === 'k' || event.key === 'K') && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
-        searchInputRef.value?.focus();
+        searchBarRef.value?.focus();
     }
 };
 
@@ -102,6 +136,21 @@ const goBack = () => {
     searchQuery.value = '';
 };
 
+// --- Watchers ---
+watch(
+    () => props.workspaces,
+    () => {
+        initActiveWorkspace();
+    },
+    { immediate: true, deep: true },
+);
+
+// Reset folder view when workspace changes
+watch(activeWorkspaceId, () => {
+    currentFolderId.value = null;
+    searchQuery.value = '';
+});
+
 // --- Lifecycle ---
 onMounted(() => {
     isMac.value = /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
@@ -116,6 +165,7 @@ onBeforeUnmount(() => {
 // Expose the scroll container so the parent (index.vue) can attach the scroll animation listener
 defineExpose({
     scrollContainer,
+    handleWorkspaceWheel,
 });
 </script>
 
@@ -123,6 +173,38 @@ defineExpose({
     <div class="flex h-full w-full flex-col items-center">
         <!-- Header Section -->
         <div class="relative mb-8 flex w-full items-center justify-center">
+            <!-- Workspace Pagination & Name (Top Left) - Only in Root View -->
+            <div
+                v-if="!currentFolderId && workspaces.length > 1"
+                class="absolute left-0 flex flex-col items-start gap-1.5"
+            >
+                <!-- Pagination Dots -->
+                <div class="flex items-center gap-1.5">
+                    <button
+                        v-for="ws in workspaces"
+                        :key="ws.id"
+                        class="group relative flex h-4 w-4 shrink-0 items-center justify-center
+                            focus-visible:outline-none"
+                        :title="ws.name"
+                        @click="activeWorkspaceId = ws.id"
+                    >
+                        <div
+                            class="transition-all duration-300 ease-in-out"
+                            :class="[
+                                ws.id === activeWorkspaceId
+                                    ? 'bg-ember-glow h-2.5 w-2.5 rounded-full'
+                                    : `bg-stone-gray/30 group-hover:bg-stone-gray/60 h-2 w-2
+                                        rounded-full`,
+                            ]"
+                        />
+                    </button>
+                </div>
+                <!-- Workspace Name -->
+                <span class="text-stone-gray/50 pl-0.5 text-xs font-bold tracking-wider uppercase">
+                    {{ activeWorkspace?.name }}
+                </span>
+            </div>
+
             <!-- Back Button (only in folder view) -->
             <button
                 v-if="currentFolderId"
@@ -145,28 +227,13 @@ defineExpose({
 
             <!-- Search Input -->
             <div v-if="!isLoading && graphs.length > 0" class="absolute right-0 w-72">
-                <UiIcon
-                    name="MdiMagnify"
-                    class="text-stone-gray/50 pointer-events-none absolute top-1/2 left-3 h-5 w-5
-                        -translate-y-1/2"
-                />
-                <input
-                    ref="searchInputRef"
-                    v-model="searchQuery"
-                    type="text"
+                <UiUtilsSearchBar
+                    ref="searchBarRef"
+                    v-model:search-query="searchQuery"
+                    v-model:search-scope="searchScope"
+                    :is-mac="isMac"
                     placeholder="Search canvas..."
-                    class="dark:bg-stone-gray/25 bg-obsidian/50 placeholder:text-stone-gray/50
-                        text-stone-gray block h-9 w-full rounded-xl border-transparent px-3 py-2
-                        pr-16 pl-10 text-sm font-semibold focus:border-transparent focus:ring-0
-                        focus:outline-none"
-                    @keydown.space.shift.exact.prevent="handleShiftSpace"
                 />
-                <div
-                    class="text-stone-gray/30 absolute top-1/2 right-3 ml-auto -translate-y-1/2
-                        rounded-md border px-1 py-0.5 text-[10px] font-bold"
-                >
-                    {{ isMac ? '⌘ + K' : 'CTRL + K' }}
-                </div>
             </div>
         </div>
 
@@ -286,10 +353,12 @@ defineExpose({
             <span class="text-soft-silk/50">
                 {{
                     searchQuery
-                        ? 'No matching canvas found.'
+                        ? searchScope === 'workspace'
+                            ? 'No matching canvas found in this workspace.'
+                            : 'No matching canvas found.'
                         : currentFolderId
                           ? 'This folder is empty.'
-                          : 'No recent canvas found. Create a new one!'
+                          : 'No recent canvas found in this workspace.'
                 }}
             </span>
         </div>
diff --git a/ui/app/components/ui/sidebar-history/actions.vue b/ui/app/components/ui/sidebar-history/actions.vue
index 565ce12a..c0d04375 100644
--- a/ui/app/components/ui/sidebar-history/actions.vue
+++ b/ui/app/components/ui/sidebar-history/actions.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Graph, Folder } from '@/types/graph';
+import type { Graph, Folder, Workspace } from '@/types/graph';
 
 const props = defineProps({
     graph: {
@@ -14,33 +14,72 @@ const props = defineProps({
         type: Array as PropType<Folder[]>,
         default: () => [],
     },
+    workspaces: {
+        type: Array as PropType<Workspace[]>,
+        default: () => [],
+    },
 });
 
 const emit = defineEmits<{
     (e: 'rename' | 'download' | 'pin', graphId: string): void;
     (e: 'delete', graphId: string, graphName: string): void;
-    (e: 'move', graphId: string, folderId: string | null): void;
+    (e: 'move', graphId: string, folderId: string | null, workspaceId: string | null): void;
     (e: 'regenerateTitle', graphId: string, strategy: 'first' | 'all'): void;
 }>();
 
 const moveItems = computed(() => {
-    const items = [
-        {
-            label: 'No Folder',
-            action: () => emit('move', props.graph.id, null),
-            isActive: !props.graph.folder_id,
-        },
-    ];
-
-    if (props.folders.length > 0) {
-        props.folders.forEach((folder) => {
+    const items = [];
+
+    // Option to remove from folder
+    if (props.graph.folder_id) {
+        items.push({
+            label: 'Remove',
+            action: () => emit('move', props.graph.id, null, null),
+            icon: 'MdiFolderRemoveOutline',
+        });
+    }
+
+    // Folders in current workspace
+    const validFolders = props.folders.filter(
+        (f) => f.workspace_id === props.graph.workspace_id && f.id !== props.graph.folder_id,
+    );
+
+    if (validFolders.length > 0) {
+        items.push({
+            label: 'Folders',
+            isHeader: true,
+            icon: 'MdiFolderOutline',
+        });
+
+        const sortedFolders = [...validFolders].sort((a, b) => a.name.localeCompare(b.name));
+
+        sortedFolders.forEach((folder) => {
             items.push({
                 label: folder.name,
-                action: () => emit('move', props.graph.id, folder.id),
-                isActive: props.graph.folder_id === folder.id,
+                action: () => emit('move', props.graph.id, folder.id, null),
             });
         });
     }
+
+    // Workspaces
+    if (props.workspaces && props.workspaces.length > 1) {
+        // Divider
+        if (items.length > 0) {
+            items.push({ label: 'Workspaces', isHeader: true, icon: 'MdiBriefcaseOutline' });
+        }
+
+        const sortedWorkspaces = [...props.workspaces].sort((a, b) => a.name.localeCompare(b.name));
+
+        sortedWorkspaces.forEach((ws) => {
+            if (props.graph.workspace_id !== ws.id) {
+                items.push({
+                    label: ws.name,
+                    action: () => emit('move', props.graph.id, null, ws.id),
+                });
+            }
+        });
+    }
+
     return items;
 });
 
@@ -100,7 +139,7 @@ const calculatePosition = (event: MouseEvent) => {
                     openUpwards ? 'bottom-full mb-2 origin-bottom-right' : 'mt-2 origin-top-right',
                 ]"
             >
-                <!-- Move to Folder Submenu -->
+                <!-- Move to Folder/Workspace Submenu -->
                 <UiSidebarHistorySubmenu
                     title="Move to..."
                     icon="MdiFolderOutline"
diff --git a/ui/app/components/ui/sidebar-history/sidebarHistory.vue b/ui/app/components/ui/sidebar-history/sidebarHistory.vue
index c226cf01..a5f6a4e5 100644
--- a/ui/app/components/ui/sidebar-history/sidebarHistory.vue
+++ b/ui/app/components/ui/sidebar-history/sidebarHistory.vue
@@ -1,325 +1,100 @@
 <script lang="ts" setup>
-import type { Graph, Folder } from '@/types/graph';
-import { useResizeObserver, useDebounceFn } from '@vueuse/core';
+import { useResizeObserver, useMutationObserver } from '@vueuse/core';
 import UiSidebarHistorySearch from './sidebarHistorySearch.vue';
-import { PLAN_LIMITS } from '@/constants/limits';
-import type { User } from '@/types/user';
 
 // --- Stores ---
-const chatStore = useChatStore();
-const globalSettingsStore = useSettingsStore();
 const sidebarCanvasStore = useSidebarCanvasStore();
-const streamStore = useStreamStore();
-
-// --- State from Stores (Reactive Refs) ---
-const { upcomingModelData, lastOpenedChatId, openChatId } = storeToRefs(chatStore);
-const { modelsSettings } = storeToRefs(globalSettingsStore);
 const { isLeftOpen } = storeToRefs(sidebarCanvasStore);
-
-// --- Actions/Methods from Stores ---
-const { resetChatState } = chatStore;
 const { toggleLeftSidebar } = sidebarCanvasStore;
-const { regenerateTitle } = streamStore;
-
-// --- Routing ---
-const route = useRoute();
+const { updateGraphName } = useAPI();
 
 // --- Composables ---
 const {
-    getGraphs,
-    createGraph,
-    updateGraphName,
-    togglePin,
-    exportGraph,
-    importGraph,
-    getHistoryFolders,
-    createHistoryFolder,
-    updateHistoryFolder,
-    moveGraph,
-    deleteHistoryFolder,
-} = useAPI();
-
-const { user } = useUserSession();
-const graphEvents = useGraphEvents();
-const { error, success } = useToast();
+    graphs,
+    folders,
+    workspaces,
+    searchQuery,
+    searchScope,
+    searchWorkspaceId,
+    searchResults,
+    expandedFolders,
+    fetchData,
+    toggleFolder,
+    getOrganizedData,
+    initExpandedFolders,
+} = useSidebarData();
 
-// --- Local State ---
-const STORAGE_KEY = 'meridian_expanded_folders';
-const graphs = ref<Graph[]>([]);
-const folders = ref<Folder[]>([]);
-const expandedFolders = ref<Set<string>>(new Set());
-const searchQuery = ref('');
+const {
+    activeWorkspaceId,
+    activeWorkspace,
+    isEditingWorkspace,
+    workspaceNameInput,
+    workspaceInputRef,
+    initActiveWorkspace,
+    handleCreateWorkspace,
+    startEditingWorkspace,
+    saveWorkspaceName,
+    cancelWorkspaceEdit,
+    handleDeleteWorkspace,
+    handleWheel,
+} = useSidebarWorkspaces(workspaces, graphs, folders);
 
-const editingId = ref<string | null>(null);
-const editInputValue = ref<string>('');
-const inputRefs = ref(new Map<string, HTMLInputElement>());
+const {
+    editingId,
+    editInputValue,
+    createGraphHandler,
+    createTemporaryGraphHandler,
+    createFolderHandler,
+    handleStartRename,
+    confirmRename,
+    cancelRename,
+    handleMoveGraph,
+    handleMoveFolder,
+    handleDeleteFolder,
+    handleUpdateFolderColor,
+    handlePin,
+    handleRegenerateTitle,
+    handleImportGraph,
+    setInputRef,
+    navigateToGraph,
+    exportGraph,
+} = useSidebarActions(graphs, folders, activeWorkspace, expandedFolders, fetchData);
 
-const historyListRef: Ref<HTMLDivElement | null> = ref(null);
+const route = useRoute();
+const graphEvents = useGraphEvents();
+
+// --- Local Utils ---
+const historyListRef = ref<HTMLDivElement | null>(null) as Ref<HTMLDivElement | null>;
 const searchComponentRef = ref<InstanceType<typeof UiSidebarHistorySearch> | null>(null);
 const isOverflowing = ref(false);
 const isMac = ref(false);
 const isTemporaryOpen = computed(() => route.query.temporary === 'true');
 const currentGraphId = computed(() => route.params.id as string | undefined);
-const { handleDeleteGraph } = useGraphDeletion(graphs, currentGraphId);
-
-const isLimitReached = computed(() => {
-    if ((user.value as User)?.plan_type !== 'free') return false;
-    const nonTemporaryGraphs = graphs.value.filter((g) => !g.temporary);
-    return nonTemporaryGraphs.length >= PLAN_LIMITS.FREE.MAX_GRAPHS;
-});
-
-// --- Computed Properties ---
-const searchResults = computed(() => {
-    if (!searchQuery.value) return [];
-    return graphs.value
-        .filter((graph) => graph.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
-        .sort((a, b) => Number(b.pinned) - Number(a.pinned));
-});
-
-const organizedData = computed(() => {
-    if (searchQuery.value) return null;
-
-    const pinned = graphs.value.filter((g) => g.pinned);
-    const unpinned = graphs.value.filter((g) => !g.pinned);
-
-    const folderMap = folders.value
-        .map((folder) => ({
-            ...folder,
-            graphs: unpinned
-                .filter((g) => g.folder_id === folder.id)
-                .sort(
-                    (a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime(),
-                ),
-        }))
-        .sort((a, b) => a.name.localeCompare(b.name));
-
-    const loose = unpinned
-        .filter((g) => !g.folder_id)
-        .sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime());
-
-    return {
-        pinned,
-        folders: folderMap,
-        loose,
-    };
-});
-
-// --- Core Logic Functions ---
-const fetchData = async () => {
-    try {
-        const [graphsData, foldersData] = await Promise.all([getGraphs(), getHistoryFolders()]);
-        graphs.value = graphsData;
-        folders.value = foldersData;
-    } catch (err) {
-        console.error('Error fetching data:', err);
-        error('Failed to load history.', { title: 'Load Error' });
-    }
-};
-
-const createGraphHandler = async () => {
-    if (isLimitReached.value) {
-        error('You have reached the maximum number of canvases for the Free plan.', {
-            title: 'Limit Reached',
-        });
-        return;
-    }
-
-    try {
-        const newGraph = await createGraph(false);
-        if (newGraph) {
-            graphs.value.unshift(newGraph);
-            upcomingModelData.value.data.model = modelsSettings.value.defaultModel;
-            navigateToGraph(newGraph.id, false);
-        }
-    } catch (err: unknown) {
-        console.error('Failed to create graph from component:', err);
-        const detail =
-            (err as { data?: { detail?: string } })?.data?.detail ||
-            (err as { message?: string })?.message ||
-            '';
-        if (detail === 'FREE_TIER_CANVAS_LIMIT_REACHED') {
-            error('You have reached the maximum number of canvases for the Free plan.', {
-                title: 'Limit Reached',
-            });
-        } else {
-            error('Failed to create new canvas. Please try again.', {
-                title: 'Graph Creation Error',
-            });
-        }
-    }
-};
-
-const createTemporaryGraphHandler = async () => {
-    try {
-        const newGraph = await createGraph(true);
-        if (newGraph) {
-            upcomingModelData.value.data.model = modelsSettings.value.defaultModel;
-            navigateToGraph(newGraph.id, true);
-        }
-    } catch (err) {
-        console.error('Failed to create temporary graph from component:', err);
-        error('Failed to create new temporary canvas. Please try again.', {
-            title: 'Temporary Graph Creation Error',
-        });
-    }
-};
-
-const createFolderHandler = async () => {
-    try {
-        const newFolder = await createHistoryFolder('New Folder');
-        folders.value.push(newFolder);
-        expandedFolders.value.add(newFolder.id);
-        handleStartRename(newFolder.id, newFolder.name);
-    } catch (err) {
-        console.error('Failed to create folder from component:', err);
-        error('Failed to create new folder. Please try again.', {
-            title: 'Folder Creation Error',
-        });
-    }
-};
-
-const navigateToGraph = (id: string, temporary: boolean) => {
-    if (id === editingId.value) return;
-    resetChatState();
-    lastOpenedChatId.value = null;
-    openChatId.value = null;
-    navigateTo(`/graph/${id}?temporary=${temporary}`);
-};
-
-const toggleFolder = (folderId: string) => {
-    if (expandedFolders.value.has(folderId)) {
-        expandedFolders.value.delete(folderId);
-    } else {
-        expandedFolders.value.add(folderId);
-    }
-};
-
-const handleStartRename = async (id: string, currentName: string) => {
-    editingId.value = id;
-    editInputValue.value = currentName;
-    await nextTick();
-    const input = inputRefs.value.get(id);
-    if (input) {
-        input.focus();
-        input.select();
-    }
-};
-
-const confirmRename = async () => {
-    if (!editingId.value) return;
-    const id = editingId.value;
-    const newName = editInputValue.value.trim();
-    editingId.value = null;
-
-    // Check if it's a folder
-    const folderIndex = folders.value.findIndex((f) => f.id === id);
-    if (folderIndex !== -1) {
-        if (!newName || newName === folders.value[folderIndex].name) return;
-        const oldName = folders.value[folderIndex].name;
-        folders.value[folderIndex].name = newName;
-        try {
-            await updateHistoryFolder(id, newName, undefined);
-        } catch {
-            folders.value[folderIndex].name = oldName;
-            error('Failed to rename folder');
-        }
-        return;
-    }
-
-    // Check if it's a graph
-    const graphIndex = graphs.value.findIndex((g) => g.id === id);
-    if (graphIndex !== -1) {
-        if (!newName || newName === graphs.value[graphIndex].name) return;
-        const oldName = graphs.value[graphIndex].name;
-        graphs.value[graphIndex].name = newName;
-        try {
-            await updateGraphName(id, newName);
-        } catch (err) {
-            graphs.value[graphIndex].name = oldName;
-            console.error('Error updating graph name:', err);
-            error('Failed to update graph name. Please try again.', {
-                title: 'Graph Rename Error',
-            });
-        }
-    }
-};
-
-const cancelRename = () => {
-    editingId.value = null;
-    editInputValue.value = '';
-};
-
-const handleMoveGraph = async (graphId: string, folderId: string | null) => {
-    const graph = graphs.value.find((g) => g.id === graphId);
-    if (!graph) return;
-
-    const oldFolderId = graph.folder_id;
-    graph.folder_id = folderId;
 
-    try {
-        await moveGraph(graphId, folderId);
-    } catch {
-        graph.folder_id = oldFolderId;
-        error('Failed to move graph.');
-    }
-};
-
-const handleDeleteFolder = async (folderId: string) => {
-    if (!confirm('Delete this folder? Graphs inside will be moved to the root list.')) return;
-    try {
-        await deleteHistoryFolder(folderId);
-        folders.value = folders.value.filter((f) => f.id !== folderId);
-        graphs.value.forEach((g) => {
-            if (g.folder_id === folderId) g.folder_id = null;
-        });
-    } catch {
-        error('Failed to delete folder.');
-    }
-};
+// Use existing graph deletion composable
+const { handleDeleteGraph } = useGraphDeletion(graphs, currentGraphId);
 
-const debouncedUpdateFolder = useDebounceFn(async (folderId: string, color: string) => {
-    try {
-        await updateHistoryFolder(folderId, undefined, color);
-    } catch (err) {
-        console.error('Error updating folder color:', err);
-        error('Failed to update folder color.');
-    }
-}, 500);
+const organizedData = computed(() =>
+    getOrganizedData(activeWorkspaceId.value, graphs.value, folders.value),
+);
 
-const handleUpdateFolderColor = (folderId: string, color: string) => {
-    const folder = folders.value.find((f) => f.id === folderId);
-    if (folder) {
-        (folder as Folder).color = color;
+// --- Resize Logic ---
+const checkOverflow = () => {
+    if (historyListRef.value) {
+        const { scrollHeight, clientHeight } = historyListRef.value;
+        isOverflowing.value = scrollHeight > clientHeight + 1;
     }
-
-    debouncedUpdateFolder(folderId, color);
 };
 
-const handleImportGraph = async (files: FileList) => {
-    if (!files || files.length === 0) return;
-
-    try {
-        const fileData = await files[0].text();
-        const importedGraph = await importGraph(fileData);
-
-        if (importedGraph) {
-            await fetchData();
-            await nextTick();
-            success('Graph imported successfully!', {
-                title: 'Graph Import',
-            });
-            navigateToGraph(importedGraph.id, false);
-        } else {
-            console.warn('Import successful but no graph returned from API');
-        }
-    } catch (err) {
-        console.error('Error importing graph:', err);
-        error('Failed to import graph. Please ensure the file is valid.', {
-            title: 'Graph Import Error',
-        });
-    }
-};
+useResizeObserver(historyListRef, checkOverflow);
+useMutationObserver(historyListRef, checkOverflow, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ['style', 'class'],
+});
 
+// --- Key Bindings ---
 const handleKeyDown = (event: KeyboardEvent) => {
     if (
         ((event.key === 'N' || event.key === 'n') && event.altKey) ||
@@ -334,50 +109,8 @@ const handleKeyDown = (event: KeyboardEvent) => {
         searchComponentRef.value?.focus();
     }
 };
-const handlePin = (graphId: string) => {
-    const graph = graphs.value.find((g) => g.id === graphId);
-    if (graph) {
-        togglePin(graphId, !graph.pinned).catch((err) => {
-            console.error('Error toggling pin status:', err);
-            error('Failed to update pin status.', { title: 'Pin Toggle Error' });
-            return;
-        });
-        graph.pinned = !graph.pinned;
-    }
-};
-
-const handleRegenerateTitle = (graphId: string, strategy: 'first' | 'all') => {
-    graphEvents.emit('update-name', {
-        graphId: graphId,
-        name: '...',
-    });
-    regenerateTitle(graphId, strategy);
-};
-
-const setInputRef = (id: string, el: unknown) => {
-    if (el) inputRefs.value.set(id, el as HTMLInputElement);
-};
-
-const checkOverflow = () => {
-    if (historyListRef.value) {
-        isOverflowing.value = historyListRef.value.scrollHeight > historyListRef.value.clientHeight;
-    }
-};
-useResizeObserver(historyListRef, checkOverflow);
-
-watch(
-    expandedFolders,
-    (newFolders) => {
-        try {
-            localStorage.setItem(STORAGE_KEY, JSON.stringify(Array.from(newFolders)));
-        } catch (e) {
-            console.error('Failed to save expanded folders to localStorage', e);
-        }
-    },
-    { deep: true },
-);
-watch([graphs, folders], () => nextTick(checkOverflow), { deep: true });
 
+// --- Watchers ---
 watch(
     [graphs, currentGraphId],
     ([newGraphs, newGraphId]) => {
@@ -391,23 +124,18 @@ watch(
     { deep: true },
 );
 
+watch(
+    activeWorkspaceId,
+    (newId) => {
+        searchWorkspaceId.value = newId;
+    },
+    { immediate: true },
+);
+
+// --- Lifecycle ---
 onMounted(async () => {
     isMac.value = /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
-
-    // Load expanded folders from localStorage
-    try {
-        const storedFolders = localStorage.getItem(STORAGE_KEY);
-        if (storedFolders) {
-            const parsedFolders = JSON.parse(storedFolders);
-            if (Array.isArray(parsedFolders)) {
-                expandedFolders.value = new Set(parsedFolders);
-            }
-        }
-    } catch (e) {
-        console.error('Failed to load expanded folders from localStorage', e);
-        // Reset to default if storage is corrupted
-        localStorage.removeItem(STORAGE_KEY);
-    }
+    initExpandedFolders();
 
     const unsubscribeUpdateName = graphEvents.on('update-name', async ({ graphId, name }) => {
         const graphToUpdate = graphs.value.find((g) => g.id === graphId);
@@ -424,7 +152,8 @@ onMounted(async () => {
         document.removeEventListener('keydown', handleKeyDown);
     });
 
-    nextTick(() => fetchData());
+    await fetchData();
+    initActiveWorkspace();
     document.addEventListener('keydown', handleKeyDown);
 });
 </script>
@@ -439,6 +168,7 @@ onMounted(async () => {
             'pointer-events-auto w-[25rem]': isLeftOpen,
             'pointer-events-none w-[3rem]': !isLeftOpen,
         }"
+        @wheel="handleWheel"
     >
         <UiSidebarHistoryLogo class="hide-close" />
 
@@ -453,13 +183,58 @@ onMounted(async () => {
         <UiSidebarHistorySearch
             ref="searchComponentRef"
             v-model:search-query="searchQuery"
+            v-model:search-scope="searchScope"
             :is-mac="isMac"
             @import="handleImportGraph"
         />
 
+        <!-- Workspace Header -->
+        <div v-if="activeWorkspace" class="hide-close mt-2 flex items-center justify-between px-1">
+            <div class="flex flex-1 items-center">
+                <div v-if="isEditingWorkspace" class="w-full max-w-[150px]">
+                    <input
+                        ref="workspaceInputRef"
+                        v-model="workspaceNameInput"
+                        type="text"
+                        class="bg-anthracite/20 text-stone-gray w-full rounded px-1 text-sm
+                            font-bold outline-none"
+                        @blur="saveWorkspaceName"
+                        @keydown.enter="saveWorkspaceName"
+                        @keydown.esc="cancelWorkspaceEdit"
+                    />
+                </div>
+                <h2
+                    v-else
+                    class="text-stone-gray/50 hover:text-stone-gray cursor-pointer truncate text-sm
+                        font-bold transition-colors"
+                    title="Rename Workspace"
+                    @click="startEditingWorkspace"
+                >
+                    {{ activeWorkspace.name }}
+                </h2>
+            </div>
+
+            <button
+                v-if="workspaces.length > 1 && activeWorkspaceId !== workspaces[0].id"
+                class="text-stone-gray/50 hover:text-stone-gray mr-2 hover:cursor-pointer"
+                title="Delete workspace"
+                @click="handleDeleteWorkspace()"
+            >
+                <UiIcon name="MaterialSymbolsDeleteRounded" class="h-3 w-3" />
+            </button>
+
+            <button
+                class="text-stone-gray/50 hover:text-stone-gray hover:cursor-pointer"
+                title="Create new workspace"
+                @click="handleCreateWorkspace"
+            >
+                <UiIcon name="Fa6SolidPlus" class="h-3 w-3" />
+            </button>
+        </div>
+
         <div
             ref="historyListRef"
-            class="hide-close hide-scrollbar relative mt-4 flex grow flex-col space-y-2
+            class="hide-close hide-scrollbar relative mt-2 flex grow flex-col space-y-2
                 overflow-y-auto pb-2"
         >
             <div
@@ -484,6 +259,7 @@ onMounted(async () => {
                     :editing-id="editingId"
                     :edit-input-value="editInputValue"
                     :folders="folders"
+                    :workspaces="workspaces"
                     @navigate="navigateToGraph"
                     @start-rename="(graphId, graphName) => handleStartRename(graphId, graphName)"
                     @update:edit-input-value="(val) => (editInputValue = val)"
@@ -509,6 +285,7 @@ onMounted(async () => {
                         :editing-id="editingId"
                         :edit-input-value="editInputValue"
                         :folders="folders"
+                        :workspaces="workspaces"
                         @navigate="navigateToGraph"
                         @start-rename="
                             (graphId, graphName) => handleStartRename(graphId, graphName)
@@ -537,6 +314,7 @@ onMounted(async () => {
                     :edit-input-value="editInputValue"
                     :current-graph-id="currentGraphId"
                     :all-folders="folders"
+                    :workspaces="workspaces"
                     @toggle="toggleFolder"
                     @start-rename="handleStartRename"
                     @delete="handleDeleteFolder"
@@ -552,6 +330,7 @@ onMounted(async () => {
                     @download-graph="exportGraph"
                     @pin-graph="handlePin"
                     @move-graph="handleMoveGraph"
+                    @move-folder="handleMoveFolder"
                     @update-folder-color="handleUpdateFolderColor"
                     @regenerate-title="handleRegenerateTitle"
                 />
@@ -566,6 +345,7 @@ onMounted(async () => {
                         :editing-id="editingId"
                         :edit-input-value="editInputValue"
                         :folders="folders"
+                        :workspaces="workspaces"
                         @navigate="navigateToGraph"
                         @start-rename="
                             (graphId, graphName) => handleStartRename(graphId, graphName)
@@ -588,15 +368,23 @@ onMounted(async () => {
 
         <div
             v-show="isOverflowing"
-            class="hide-close pointer-events-none absolute bottom-[80px] left-0 h-10 w-full px-4"
+            class="hide-close pointer-events-none absolute bottom-[80px] left-0 h-12 w-full px-4"
         >
             <div
-                class="dark:from-anthracite/75 from-stone-gray/20 absolute z-10 h-10 w-[364px]
+                class="dark:from-anthracite/75 from-stone-gray/20 absolute z-10 h-12 w-[364px]
                     bg-gradient-to-t to-transparent"
             />
-            <div class="from-obsidian absolute h-10 w-[364px] bg-gradient-to-t to-transparent" />
+            <div class="from-obsidian absolute h-12 w-[364px] bg-gradient-to-t to-transparent" />
         </div>
 
+        <!-- Pagination -->
+        <UiSidebarHistoryWorkspacePagination
+            class="hide-close"
+            :workspaces="workspaces"
+            :active-id="activeWorkspaceId"
+            @select="(id) => (activeWorkspaceId = id)"
+        />
+
         <UiSidebarHistoryUserProfileCard class="hide-close" />
         <div
             class="bg-anthracite hover:bg-obsidian/20 border-stone-gray/10 pointer-events-auto
diff --git a/ui/app/components/ui/sidebar-history/sidebarHistoryFolder.vue b/ui/app/components/ui/sidebar-history/sidebarHistoryFolder.vue
index e8278666..f9b59a0e 100644
--- a/ui/app/components/ui/sidebar-history/sidebarHistoryFolder.vue
+++ b/ui/app/components/ui/sidebar-history/sidebarHistoryFolder.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Graph, Folder } from '@/types/graph';
+import type { Graph, Folder, Workspace } from '@/types/graph';
 import { ChromePicker } from 'vue-color';
 
 // --- Props ---
@@ -28,6 +28,10 @@ const props = defineProps({
         type: Array as PropType<Folder[]>,
         required: true,
     },
+    workspaces: {
+        type: Array as PropType<Workspace[]>,
+        default: () => [],
+    },
 });
 
 // --- Emits ---
@@ -42,6 +46,7 @@ const emit = defineEmits<{
         folderId: string,
         folderName: string,
     ): void;
+    (e: 'moveFolder', folderId: string, workspaceId: string): void;
 
     // Generic input/rename actions
     (e: 'confirmRename' | 'cancelRename'): void;
@@ -49,7 +54,7 @@ const emit = defineEmits<{
 
     // Bubbled events from child UiSidebarHistoryItem
     (e: 'navigate', graphId: string, temporary: boolean): void;
-    (e: 'moveGraph', graphId: string, folderId: string | null): void;
+    (e: 'moveGraph', graphId: string, folderId: string | null, workspaceId: string | null): void;
 
     (e: 'regenerateTitle', graphId: string, strategy: 'first' | 'all'): void;
 }>();
@@ -61,6 +66,26 @@ const color = ref(props.folder.color || 'rgba(255, 255, 255, 0.2)');
 // --- Computed ---
 const isEditing = computed(() => props.folder.id === props.editingId);
 
+const moveItems = computed(() => {
+    const items = [];
+
+    // Workspaces
+    if (props.workspaces && props.workspaces.length > 1) {
+        const sortedWorkspaces = [...props.workspaces].sort((a, b) => a.name.localeCompare(b.name));
+
+        sortedWorkspaces.forEach((ws) => {
+            if (props.folder.workspace_id !== ws.id) {
+                items.push({
+                    label: ws.name,
+                    action: () => emit('moveFolder', props.folder.id, ws.id),
+                });
+            }
+        });
+    }
+
+    return items;
+});
+
 // --- Handlers ---
 const onInput = (event: Event) => {
     emit('update:editInputValue', (event.target as HTMLInputElement).value);
@@ -161,10 +186,18 @@ watch(
                 >
                     <HeadlessMenuItems
                         class="dark:bg-stone-gray bg-anthracite dark:ring-anthracite/50
-                            ring-stone-gray/10 absolute right-0 z-30 mt-2 w-60 origin-top-right
+                            ring-stone-gray/10 absolute right-0 z-30 mt-2 w-48 origin-top-right
                             rounded-md p-1 shadow-lg ring-2 backdrop-blur-3xl focus:outline-none"
                         @click.stop
                     >
+                        <!-- Move to Workspace Submenu -->
+                        <UiSidebarHistorySubmenu
+                            v-if="moveItems.length > 0"
+                            title="Move to ..."
+                            icon="MdiBriefcaseOutline"
+                            :items="moveItems"
+                        />
+
                         <!-- Rename -->
                         <HeadlessMenuItem v-slot="{ active }">
                             <button
@@ -262,6 +295,7 @@ watch(
                 :editing-id="editingId"
                 :edit-input-value="editInputValue"
                 :folders="allFolders"
+                :workspaces="workspaces"
                 @navigate="(graphId, temp) => emit('navigate', graphId, temp)"
                 @start-rename="(graphId, graphName) => emit('startGraphRename', graphId, graphName)"
                 @update:edit-input-value="(val) => emit('update:editInputValue', val)"
@@ -271,7 +305,7 @@ watch(
                 @delete="(graphId, graphName) => emit('deleteGraph', graphId, graphName)"
                 @download="(graphId) => emit('downloadGraph', graphId)"
                 @pin="(graphId) => emit('pinGraph', graphId)"
-                @move="(graphId, folderId) => emit('moveGraph', graphId, folderId)"
+                @move="(graphId, folderId, wsId) => emit('moveGraph', graphId, folderId, wsId)"
                 @regenerate-title="
                     (graphId, strategy) => emit('regenerateTitle', graphId, strategy)
                 "
diff --git a/ui/app/components/ui/sidebar-history/sidebarHistoryItem.vue b/ui/app/components/ui/sidebar-history/sidebarHistoryItem.vue
index 172b5571..3d670f32 100644
--- a/ui/app/components/ui/sidebar-history/sidebarHistoryItem.vue
+++ b/ui/app/components/ui/sidebar-history/sidebarHistoryItem.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Graph, Folder } from '@/types/graph';
+import type { Graph, Folder, Workspace } from '@/types/graph';
 
 const props = defineProps({
     graph: {
@@ -22,6 +22,10 @@ const props = defineProps({
         type: Array as PropType<Folder[]>,
         required: true,
     },
+    workspaces: {
+        type: Array as PropType<Workspace[]>,
+        default: () => [],
+    },
 });
 
 const emit = defineEmits<{
@@ -29,7 +33,7 @@ const emit = defineEmits<{
     (e: 'startRename' | 'delete', graphId: string, graphName: string): void;
     (e: 'update:editInputValue' | 'pin' | 'download', value: string): void;
     (e: 'confirmRename' | 'cancelRename'): void;
-    (e: 'move', graphId: string, folderId: string | null): void;
+    (e: 'move', graphId: string, folderId: string | null, workspaceId: string | null): void;
     (e: 'regenerateTitle', graphId: string, strategy: 'first' | 'all'): void;
     (e: 'setInputRef', graphId: string, el: unknown): void;
 }>();
@@ -107,11 +111,15 @@ const handleKeyDown = (event: KeyboardEvent) => {
             :graph="graph"
             :current-graph-id="currentGraphId"
             :folders="folders"
+            :workspaces="workspaces"
             @rename="(id: string) => emit('startRename', id, graph.name)"
             @delete="(id: string, name: string) => emit('delete', id, name)"
             @download="(id: string) => emit('download', id)"
             @pin="(id: string) => emit('pin', id)"
-            @move="(graphId: string, folderId: string | null) => emit('move', graphId, folderId)"
+            @move="
+                (graphId: string, folderId: string | null, wsId: string | null) =>
+                    emit('move', graphId, folderId, wsId)
+            "
             @regenerate-title="
                 (graphId: string, strategy: 'first' | 'all') =>
                     emit('regenerateTitle', graphId, strategy)
diff --git a/ui/app/components/ui/sidebar-history/sidebarHistorySearch.vue b/ui/app/components/ui/sidebar-history/sidebarHistorySearch.vue
index 7756d158..42f4769b 100644
--- a/ui/app/components/ui/sidebar-history/sidebarHistorySearch.vue
+++ b/ui/app/components/ui/sidebar-history/sidebarHistorySearch.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import UiUtilsSearchBar from '~/components/ui/utils/searchBar.vue';
+
 // --- Props ---
 defineProps({
     isMac: {
@@ -15,52 +17,36 @@ const emit = defineEmits<{
 
 // --- Local State ---
 const searchQuery = defineModel<string>('searchQuery', { required: true });
-const searchInputRef = ref<HTMLInputElement | null>(null);
+const searchScope = defineModel<'workspace' | 'global'>('searchScope', {
+    required: true,
+    default: 'workspace',
+});
+const searchBarRef = ref<InstanceType<typeof UiUtilsSearchBar> | null>(null);
 
 // --- Handlers ---
-const handleShiftSpace = () => document.execCommand('insertText', false, ' ');
-
 const handleFileChange = (event: Event) => {
     const target = event.target as HTMLInputElement;
     if (target.files && target.files.length > 0) {
         emit('import', target.files);
-
         target.value = '';
     }
 };
 
 // Expose focus method for parent component
 defineExpose({
-    focus: () => searchInputRef.value?.focus(),
+    focus: () => searchBarRef.value?.focus(),
 });
 </script>
 
 <template>
     <div class="hide-close mt-2 flex items-center gap-2">
-        <div class="relative w-full">
-            <UiIcon
-                name="MdiMagnify"
-                class="text-stone-gray/50 pointer-events-none absolute top-1/2 left-3 h-5 w-5
-                    -translate-y-1/2"
-            />
-            <input
-                ref="searchInputRef"
-                v-model="searchQuery"
-                type="text"
-                placeholder="Search canvas..."
-                class="dark:bg-stone-gray/25 bg-obsidian/50 placeholder:text-stone-gray/50
-                    text-stone-gray block h-9 w-full rounded-xl border-transparent px-3 py-2 pr-16
-                    pl-10 text-sm font-semibold focus:border-transparent focus:ring-0
-                    focus:outline-none"
-                @keydown.space.shift.exact.prevent="handleShiftSpace"
-            />
-            <div
-                class="text-stone-gray/30 absolute top-1/2 right-3 ml-auto -translate-y-1/2
-                    rounded-md border px-1 py-0.5 text-[10px] font-bold"
-            >
-                {{ isMac ? '⌘ + K' : 'CTRL + K' }}
-            </div>
-        </div>
+        <UiUtilsSearchBar
+            ref="searchBarRef"
+            v-model:search-query="searchQuery"
+            v-model:search-scope="searchScope"
+            :is-mac="isMac"
+        />
+
         <label
             class="dark:bg-stone-gray/25 bg-obsidian/50 text-stone-gray font-outfit
                 dark:hover:bg-stone-gray/20 hover:bg-obsidian/75 flex h-9 w-14 shrink-0 items-center
diff --git a/ui/app/components/ui/sidebar-history/sidebarHistoryWorkspacePagination.vue b/ui/app/components/ui/sidebar-history/sidebarHistoryWorkspacePagination.vue
new file mode 100644
index 00000000..d1af7161
--- /dev/null
+++ b/ui/app/components/ui/sidebar-history/sidebarHistoryWorkspacePagination.vue
@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import type { Workspace } from '@/types/graph';
+
+const props = defineProps<{
+    workspaces: Workspace[];
+    activeId: string | null;
+}>();
+
+const emit = defineEmits<{
+    (e: 'select', id: string): void;
+}>();
+
+const containerRef = ref<HTMLElement | null>(null);
+
+const scrollToActive = async () => {
+    await nextTick();
+    if (!containerRef.value || !props.activeId) return;
+
+    const activeEl = containerRef.value.querySelector(`[data-id="${props.activeId}"]`);
+    if (activeEl) {
+        activeEl.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+    }
+};
+
+watch(() => props.activeId, scrollToActive);
+onMounted(scrollToActive);
+</script>
+
+<template>
+    <div
+        v-if="workspaces.length > 1"
+        class="absolute bottom-[4.2rem] left-0 z-10 flex h-8 w-full items-center justify-center
+            pb-2"
+    >
+        <div
+            ref="containerRef"
+            class="hide-scrollbar flex max-w-[80%] items-center space-x-1 overflow-x-auto px-2"
+            :class="[workspaces.length > 8 ? 'justify-start' : 'justify-center']"
+        >
+            <button
+                v-for="ws in workspaces"
+                :key="ws.id"
+                :data-id="ws.id"
+                class="group relative flex h-6 w-6 shrink-0 items-center justify-center focus-visible:outline-none"
+                :title="ws.name"
+                @click="emit('select', ws.id)"
+            >
+                <div
+                    class="transition-all duration-300 ease-in-out"
+                    :class="[
+                        ws.id === activeId
+                            ? 'bg-ember-glow h-2 w-2 rounded-full'
+                            : `bg-stone-gray/30 group-hover:bg-stone-gray/60 h-1.5 w-1.5
+                                rounded-full`,
+                    ]"
+                />
+            </button>
+        </div>
+    </div>
+</template>
+
+<style scoped></style>
diff --git a/ui/app/components/ui/sidebar-history/submenu.vue b/ui/app/components/ui/sidebar-history/submenu.vue
index 8c58b5f6..a3280104 100644
--- a/ui/app/components/ui/sidebar-history/submenu.vue
+++ b/ui/app/components/ui/sidebar-history/submenu.vue
@@ -5,78 +5,109 @@ defineProps<{
     items: {
         label: string;
         icon?: string;
-        action: () => void;
-        isActive?: boolean;
+        action?: () => void;
         class?: string;
+        isHeader?: boolean;
     }[];
 }>();
 
 const isOpen = ref(false);
+
+const executeAction = (action?: () => void) => {
+    if (action) action();
+};
 </script>
 
 <template>
     <div class="relative w-full" @mouseenter="isOpen = true" @mouseleave="isOpen = false">
         <button
-            class="hover:bg-obsidian/25 dark:text-obsidian text-soft-silk flex w-full items-center
-                justify-between rounded-md py-2 pr-1 pl-4 text-sm font-bold transition-colors
-                duration-200 ease-in-out"
-            :class="{ 'bg-obsidian/25': isOpen }"
+            class="group flex w-full items-center justify-between rounded-md px-2 py-2 text-sm
+                font-bold transition-colors duration-200 ease-in-out"
+            :class="[
+                isOpen
+                    ? 'bg-obsidian/25 dark:text-obsidian text-soft-silk'
+                    : 'dark:text-obsidian text-soft-silk hover:bg-obsidian/25',
+            ]"
             @click.stop
         >
-            <div class="flex items-center">
-                <UiIcon :name="icon" class="dark:text-obsidian text-soft-silk mr-2 h-4 w-4" />
-                {{ title }}
+            <div class="flex items-center gap-2">
+                <UiIcon :name="icon" class="h-4 w-4 opacity-70" />
+                <span>{{ title }}</span>
             </div>
-            <UiIcon name="FlowbiteChevronDownOutline" class="h-4 w-4 -rotate-90" />
+            <UiIcon
+                name="FlowbiteChevronDownOutline"
+                class="h-4 w-4 -rotate-90 opacity-50 transition-transform duration-200"
+                :class="{ '-rotate-180': isOpen }"
+            />
         </button>
 
+        <div v-if="isOpen">
+            <!-- Hover Bridge -->
+            <div
+                class="absolute top-10 -left-4 z-40 h-10 w-20"
+                style="clip-path: polygon(0 0, 100% 0, 0 100%)"
+            ></div>
+            <div class="absolute top-0 -left-4 z-40 h-10 w-20"></div>
+        </div>
+
         <transition
             enter-active-class="transition ease-out duration-100"
-            enter-from-class="transform opacity-0 translate-x-2"
+            enter-from-class="transform opacity-0 -translate-x-1"
             enter-to-class="transform opacity-100 translate-x-0"
             leave-active-class="transition ease-in duration-75"
             leave-from-class="transform opacity-100 translate-x-0"
-            leave-to-class="transform opacity-0 translate-x-2"
+            leave-to-class="transform opacity-0 -translate-x-1"
         >
             <div
                 v-show="isOpen"
                 class="dark:bg-stone-gray bg-anthracite dark:ring-anthracite/50 ring-stone-gray/10
-                    hide-scrollbar absolute top-0 right-full z-30 mr-1 max-h-60 w-40
-                    origin-top-right rounded-md p-1 shadow-lg ring-2 backdrop-blur-3xl
-                    focus:outline-none"
+                    hide-scrollbar absolute top-0 right-full z-30 mr-1 max-h-96 w-40
+                    origin-top-right overflow-y-auto rounded-md p-1 shadow-lg ring-2
+                    backdrop-blur-3xl focus:outline-none"
             >
-                <!-- Hover Bridge -->
-                <div
-                    class="absolute top-10 -right-16 h-10 w-20"
-                    style="clip-path: polygon(0 0, 100% 0, 0 100%)"
-                ></div>
-                <div class="absolute top-0 -right-16 h-10 w-20"></div>
+                <template v-for="(item, index) in items" :key="index">
+                    <!-- Header Item -->
+                    <div v-if="item.isHeader" class="px-2 pt-2 pb-1">
+                        <div
+                            class="dark:text-obsidian/50 text-soft-silk/50 flex items-center gap-1.5
+                                text-[10px] font-bold tracking-wider uppercase"
+                        >
+                            <UiIcon
+                                v-if="item.icon"
+                                :name="item.icon"
+                                class="h-4 w-4 shrink-0 opacity-70 transition-opacity
+                                    group-hover:opacity-100"
+                            />
+                            {{ item.label }}
+                        </div>
+                    </div>
 
-                <HeadlessMenuItem v-for="(item, index) in items" :key="index">
+                    <!-- Action Item -->
                     <button
-                        class="hover:bg-obsidian/25 dark:text-obsidian text-soft-silk flex w-full
-                            items-center rounded-md px-4 py-2 text-sm font-bold transition-colors
-                            duration-200 ease-in-out"
-                        :class="item.class"
-                        @click.stop="item.action"
+                        v-else
+                        class="group flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm
+                            font-bold transition-colors duration-200 ease-in-out"
+                        :class="[
+                            item.class,
+                            'hover:bg-obsidian/25 dark:text-obsidian text-soft-silk',
+                        ]"
+                        @click.stop="executeAction(item.action)"
                     >
                         <UiIcon
                             v-if="item.icon"
                             :name="item.icon"
-                            class="h-5 w-5 -translate-x-2 opacity-70"
-                        />
-
-                        <span class="truncate" :class="{ 'opacity-50': item.isActive === false }">
-                            {{ item.label }}
-                        </span>
-
-                        <UiIcon
-                            v-if="item.isActive"
-                            name="MaterialSymbolsCheckSmallRounded"
-                            class="ml-auto h-3 w-3"
+                            class="h-4 w-4 shrink-0 opacity-70 transition-opacity
+                                group-hover:opacity-100"
                         />
+                        <span class="truncate">{{ item.label }}</span>
                     </button>
-                </HeadlessMenuItem>
+                </template>
+
+                <div v-if="items.length === 0" class="p-2">
+                    <span class="dark:text-obsidian/50 text-soft-silk/50 text-sm font-bold">
+                        No items available.
+                    </span>
+                </div>
             </div>
         </transition>
     </div>
diff --git a/ui/app/components/ui/utils/searchBar.vue b/ui/app/components/ui/utils/searchBar.vue
new file mode 100644
index 00000000..a71bea84
--- /dev/null
+++ b/ui/app/components/ui/utils/searchBar.vue
@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+// --- Props ---
+defineProps({
+    isMac: {
+        type: Boolean,
+        required: true,
+    },
+    placeholder: {
+        type: String,
+        default: undefined,
+    },
+});
+
+// --- Models ---
+const searchQuery = defineModel<string>('searchQuery', { required: true });
+const searchScope = defineModel<'workspace' | 'global'>('searchScope', {
+    required: true,
+    default: 'workspace',
+});
+
+// --- Local State ---
+const inputRef = ref<HTMLInputElement | null>(null);
+
+// --- Handlers ---
+const handleShiftSpace = () => document.execCommand('insertText', false, ' ');
+
+const toggleScope = () => {
+    searchScope.value = searchScope.value === 'workspace' ? 'global' : 'workspace';
+};
+
+// Expose focus method
+defineExpose({
+    focus: () => inputRef.value?.focus(),
+});
+</script>
+
+<template>
+    <div class="relative w-full">
+        <UiIcon
+            name="MdiMagnify"
+            class="text-stone-gray/50 pointer-events-none absolute top-1/2 left-3 h-5 w-5
+                -translate-y-1/2"
+        />
+        <input
+            ref="inputRef"
+            v-model="searchQuery"
+            type="text"
+            :placeholder="
+                placeholder ||
+                (searchScope === 'workspace' ? 'Search in workspace...' : 'Search all canvas...')
+            "
+            class="dark:bg-stone-gray/25 bg-obsidian/50 placeholder:text-stone-gray/50
+                text-stone-gray block h-9 w-full rounded-xl border-transparent px-3 py-2 pr-24 pl-10
+                text-sm font-semibold focus:border-transparent focus:ring-0 focus:outline-none"
+            @keydown.space.shift.exact.prevent="handleShiftSpace"
+        />
+
+        <div class="absolute top-1/2 right-3 flex -translate-y-1/2 items-center gap-2">
+            <!-- Scope Toggle -->
+            <button
+                class="hover:bg-stone-gray/20 text-stone-gray/50 hover:text-stone-gray flex
+                    items-center justify-center rounded-md p-0.5 transition-colors"
+                :title="
+                    searchScope === 'workspace'
+                        ? 'Searching: Workspace Only'
+                        : 'Searching: All Canvas'
+                "
+                @click="toggleScope"
+            >
+                <UiIcon
+                    v-if="searchScope === 'workspace'"
+                    name="MdiBriefcaseOutline"
+                    class="h-4 w-4"
+                />
+                <UiIcon v-else name="MdiWeb" class="h-4 w-4" />
+            </button>
+
+            <!-- Shortcut Hint -->
+            <div class="text-stone-gray/30 rounded-md border px-1 py-0.5 text-[10px] font-bold">
+                {{ isMac ? '⌘ + K' : 'CTRL + K' }}
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/ui/app/composables/sidebar/useSidebarActions.ts b/ui/app/composables/sidebar/useSidebarActions.ts
new file mode 100644
index 00000000..b408165a
--- /dev/null
+++ b/ui/app/composables/sidebar/useSidebarActions.ts
@@ -0,0 +1,336 @@
+import type { Graph, Folder, Workspace } from '@/types/graph';
+import { useDebounceFn } from '@vueuse/core';
+import { PLAN_LIMITS } from '@/constants/limits';
+import type { User } from '@/types/user';
+
+export const useSidebarActions = (
+    graphs: Ref<Graph[]>,
+    folders: Ref<Folder[]>,
+    activeWorkspace: Ref<Workspace | undefined>,
+    expandedFolders: Ref<Set<string>>,
+    fetchData: () => Promise<void>,
+) => {
+    const {
+        createGraph,
+        createHistoryFolder,
+        updateGraphName,
+        updateHistoryFolder,
+        moveGraph,
+        deleteHistoryFolder,
+        togglePin,
+        importGraph,
+        exportGraph,
+    } = useAPI();
+
+    const { user } = useUserSession();
+    const { error, success } = useToast();
+    const chatStore = useChatStore();
+    const globalSettingsStore = useSettingsStore();
+    const streamStore = useStreamStore();
+    const graphEvents = useGraphEvents();
+    const { upcomingModelData, lastOpenedChatId, openChatId } = storeToRefs(chatStore);
+    const { modelsSettings } = storeToRefs(globalSettingsStore);
+    const { resetChatState } = chatStore;
+    const { regenerateTitle } = streamStore;
+
+    // --- Local State for Editing ---
+    const editingId = ref<string | null>(null);
+    const editInputValue = ref<string>('');
+    const inputRefs = ref(new Map<string, HTMLInputElement>());
+
+    // --- Helpers ---
+    const isLimitReached = computed(() => {
+        if ((user.value as User)?.plan_type !== 'free') return false;
+        const nonTemporaryGraphs = graphs.value.filter((g) => !g.temporary);
+        return nonTemporaryGraphs.length >= PLAN_LIMITS.FREE.MAX_GRAPHS;
+    });
+
+    const navigateToGraph = (id: string, temporary: boolean) => {
+        if (id === editingId.value) return;
+        resetChatState();
+        lastOpenedChatId.value = null;
+        openChatId.value = null;
+        navigateTo(`/graph/${id}?temporary=${temporary}`);
+    };
+
+    // --- Actions ---
+    const createGraphHandler = async () => {
+        if (isLimitReached.value) {
+            error('You have reached the maximum number of canvases for the Free plan.', {
+                title: 'Limit Reached',
+            });
+            return;
+        }
+
+        try {
+            const wsId = activeWorkspace.value?.id;
+            const newGraph = await createGraph(false, wsId);
+            if (newGraph) {
+                graphs.value.unshift(newGraph);
+                upcomingModelData.value.data.model = modelsSettings.value.defaultModel;
+                navigateToGraph(newGraph.id, false);
+            }
+        } catch (err: unknown) {
+            console.error('Failed to create graph:', err);
+            const detail =
+                (err as { data?: { detail?: string } })?.data?.detail ||
+                (err as { message?: string })?.message ||
+                '';
+            if (detail === 'FREE_TIER_CANVAS_LIMIT_REACHED') {
+                error('You have reached the maximum number of canvases for the Free plan.', {
+                    title: 'Limit Reached',
+                });
+            } else {
+                error('Failed to create new canvas. Please try again.', {
+                    title: 'Graph Creation Error',
+                });
+            }
+        }
+    };
+
+    const createTemporaryGraphHandler = async () => {
+        try {
+            const wsId = activeWorkspace.value?.id;
+            const newGraph = await createGraph(true, wsId);
+            if (newGraph) {
+                upcomingModelData.value.data.model = modelsSettings.value.defaultModel;
+                navigateToGraph(newGraph.id, true);
+            }
+        } catch (err) {
+            console.error('Failed to create temporary graph:', err);
+            error('Failed to create new temporary canvas. Please try again.', {
+                title: 'Temporary Graph Creation Error',
+            });
+        }
+    };
+
+    const createFolderHandler = async () => {
+        try {
+            const wsId = activeWorkspace.value?.id;
+            const newFolder = await createHistoryFolder('New Folder', wsId);
+            folders.value.push(newFolder);
+            expandedFolders.value.add(newFolder.id);
+            handleStartRename(newFolder.id, newFolder.name);
+        } catch (err) {
+            console.error('Failed to create folder:', err);
+            error('Failed to create new folder. Please try again.', {
+                title: 'Folder Creation Error',
+            });
+        }
+    };
+
+    const handleStartRename = async (id: string, currentName: string) => {
+        editingId.value = id;
+        editInputValue.value = currentName;
+        await nextTick();
+        const input = inputRefs.value.get(id);
+        if (input) {
+            input.focus();
+            input.select();
+        }
+    };
+
+    const confirmRename = async () => {
+        if (!editingId.value) return;
+        const id = editingId.value;
+        const newName = editInputValue.value.trim();
+        editingId.value = null;
+
+        // Check if it's a folder
+        const folderIndex = folders.value.findIndex((f) => f.id === id);
+        if (folderIndex !== -1) {
+            if (!newName || newName === folders.value[folderIndex].name) return;
+            const oldName = folders.value[folderIndex].name;
+            folders.value[folderIndex].name = newName;
+            try {
+                await updateHistoryFolder(id, newName, undefined);
+            } catch {
+                folders.value[folderIndex].name = oldName;
+                error('Failed to rename folder');
+            }
+            return;
+        }
+
+        // Check if it's a graph
+        const graphIndex = graphs.value.findIndex((g) => g.id === id);
+        if (graphIndex !== -1) {
+            if (!newName || newName === graphs.value[graphIndex].name) return;
+            const oldName = graphs.value[graphIndex].name;
+            graphs.value[graphIndex].name = newName;
+            try {
+                await updateGraphName(id, newName);
+            } catch (err) {
+                graphs.value[graphIndex].name = oldName;
+                console.error('Error updating graph name:', err);
+                error('Failed to update graph name. Please try again.', {
+                    title: 'Graph Rename Error',
+                });
+            }
+        }
+    };
+
+    const cancelRename = () => {
+        editingId.value = null;
+        editInputValue.value = '';
+    };
+
+    const handleMoveGraph = async (
+        graphId: string,
+        folderId: string | null,
+        workspaceId: string | null = null,
+    ) => {
+        const graph = graphs.value.find((g) => g.id === graphId);
+        if (!graph) return;
+
+        const oldFolderId = graph.folder_id;
+        const oldWorkspaceId = graph.workspace_id;
+
+        if (folderId) {
+            graph.folder_id = folderId;
+            const targetFolder = folders.value.find((f) => f.id === folderId);
+            if (targetFolder) {
+                graph.workspace_id = targetFolder.workspace_id;
+            }
+        } else if (workspaceId) {
+            graph.folder_id = null;
+            graph.workspace_id = workspaceId;
+        } else {
+            graph.folder_id = null;
+        }
+
+        try {
+            await moveGraph(graphId, folderId, workspaceId);
+            if (workspaceId) {
+                await fetchData();
+            }
+        } catch {
+            graph.folder_id = oldFolderId;
+            graph.workspace_id = oldWorkspaceId;
+            error('Failed to move graph.');
+        }
+    };
+
+    const handleMoveFolder = async (folderId: string, workspaceId: string) => {
+        const folder = folders.value.find((f) => f.id === folderId);
+        if (!folder) return;
+
+        const oldWorkspaceId = folder.workspace_id;
+
+        // Optimistic update
+        folder.workspace_id = workspaceId;
+
+        // Update all children graphs
+        const childrenGraphs = graphs.value.filter((g) => g.folder_id === folderId);
+        childrenGraphs.forEach((g) => {
+            g.workspace_id = workspaceId;
+        });
+
+        try {
+            await updateHistoryFolder(folderId, undefined, undefined, workspaceId);
+        } catch (err) {
+            console.error('Failed to move folder:', err);
+            // Revert state on error
+            folder.workspace_id = oldWorkspaceId;
+            childrenGraphs.forEach((g) => {
+                g.workspace_id = oldWorkspaceId;
+            });
+            error('Failed to move folder.');
+        }
+    };
+
+    const handleDeleteFolder = async (folderId: string) => {
+        if (!confirm('Delete this folder? Graphs inside will be moved to the root list.')) return;
+        try {
+            await deleteHistoryFolder(folderId);
+            folders.value = folders.value.filter((f) => f.id !== folderId);
+            graphs.value.forEach((g) => {
+                if (g.folder_id === folderId) g.folder_id = null;
+            });
+        } catch {
+            error('Failed to delete folder.');
+        }
+    };
+
+    const debouncedUpdateFolder = useDebounceFn(async (folderId: string, color: string) => {
+        try {
+            await updateHistoryFolder(folderId, undefined, color);
+        } catch (err) {
+            console.error('Error updating folder color:', err);
+            error('Failed to update folder color.');
+        }
+    }, 500);
+
+    const handleUpdateFolderColor = (folderId: string, color: string) => {
+        const folder = folders.value.find((f) => f.id === folderId);
+        if (folder) {
+            folder.color = color;
+        }
+        debouncedUpdateFolder(folderId, color);
+    };
+
+    const handlePin = (graphId: string) => {
+        const graph = graphs.value.find((g) => g.id === graphId);
+        if (graph) {
+            togglePin(graphId, !graph.pinned).catch((err) => {
+                console.error('Error toggling pin status:', err);
+                error('Failed to update pin status.', { title: 'Pin Toggle Error' });
+                return;
+            });
+            graph.pinned = !graph.pinned;
+        }
+    };
+
+    const handleRegenerateTitle = (graphId: string, strategy: 'first' | 'all') => {
+        graphEvents.emit('update-name', {
+            graphId: graphId,
+            name: '...',
+        });
+        regenerateTitle(graphId, strategy);
+    };
+
+    const handleImportGraph = async (files: FileList) => {
+        if (!files || files.length === 0) return;
+        try {
+            const fileData = await files[0].text();
+            const importedGraph = await importGraph(fileData);
+            if (importedGraph) {
+                await fetchData();
+                await nextTick();
+                success('Graph imported successfully!', { title: 'Graph Import' });
+                navigateToGraph(importedGraph.id, false);
+            } else {
+                console.warn('Import successful but no graph returned from API');
+            }
+        } catch (err) {
+            console.error('Error importing graph:', err);
+            error('Failed to import graph. Please ensure the file is valid.', {
+                title: 'Graph Import Error',
+            });
+        }
+    };
+
+    const setInputRef = (id: string, el: unknown) => {
+        if (el) inputRefs.value.set(id, el as HTMLInputElement);
+    };
+
+    return {
+        editingId,
+        editInputValue,
+        createGraphHandler,
+        createTemporaryGraphHandler,
+        createFolderHandler,
+        handleStartRename,
+        confirmRename,
+        cancelRename,
+        handleMoveGraph,
+        handleMoveFolder,
+        handleDeleteFolder,
+        handleUpdateFolderColor,
+        handlePin,
+        handleRegenerateTitle,
+        handleImportGraph,
+        setInputRef,
+        navigateToGraph,
+        exportGraph,
+    };
+};
diff --git a/ui/app/composables/sidebar/useSidebarData.ts b/ui/app/composables/sidebar/useSidebarData.ts
new file mode 100644
index 00000000..db58525f
--- /dev/null
+++ b/ui/app/composables/sidebar/useSidebarData.ts
@@ -0,0 +1,142 @@
+import type { Graph, Folder, Workspace } from '@/types/graph';
+
+export const useSidebarData = () => {
+    const { getGraphs, getHistoryFolders, getWorkspaces } = useAPI();
+    const { error } = useToast();
+
+    // --- State ---
+    const graphs = ref<Graph[]>([]);
+    const folders = ref<Folder[]>([]);
+    const workspaces = ref<Workspace[]>([]);
+    const searchQuery = ref('');
+    const searchScope = ref<'workspace' | 'global'>('workspace');
+    const searchWorkspaceId = ref<string | null>(null);
+    const expandedFolders = ref<Set<string>>(new Set());
+
+    // --- Local Storage Keys ---
+    const STORAGE_KEY = 'meridian_expanded_folders';
+
+    // --- Actions ---
+    const fetchData = async () => {
+        try {
+            const [graphsData, foldersData, workspacesData] = await Promise.all([
+                getGraphs(),
+                getHistoryFolders(),
+                getWorkspaces(),
+            ]);
+            graphs.value = graphsData;
+            folders.value = foldersData;
+            workspaces.value = workspacesData;
+        } catch (err: unknown) {
+            console.error('Error fetching data:', err);
+            error('Failed to load history.', { title: 'Load Error' });
+        }
+    };
+
+    const toggleFolder = (folderId: string) => {
+        if (expandedFolders.value.has(folderId)) {
+            expandedFolders.value.delete(folderId);
+        } else {
+            expandedFolders.value.add(folderId);
+        }
+    };
+
+    // --- Computed ---
+    const searchResults = computed(() => {
+        if (!searchQuery.value) return [];
+
+        let filteredGraphs = graphs.value;
+
+        // Apply Scope Filtering
+        if (searchScope.value === 'workspace' && searchWorkspaceId.value) {
+            filteredGraphs = filteredGraphs.filter(
+                (g) => g.workspace_id === searchWorkspaceId.value,
+            );
+        }
+
+        return filteredGraphs
+            .filter((graph) => graph.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
+            .sort((a, b) => Number(b.pinned) - Number(a.pinned));
+    });
+
+    const getOrganizedData = (
+        activeWorkspaceId: string | null,
+        currentGraphs: Graph[],
+        currentFolders: Folder[],
+    ) => {
+        if (searchQuery.value) return null;
+        if (!activeWorkspaceId) return null;
+
+        const wsFolders = currentFolders.filter((f) => f.workspace_id === activeWorkspaceId);
+        const wsGraphs = currentGraphs.filter((g) => g.workspace_id === activeWorkspaceId);
+
+        const pinned = wsGraphs.filter((g) => g.pinned);
+        const unpinned = wsGraphs.filter((g) => !g.pinned);
+
+        const folderMap = wsFolders
+            .map((folder) => ({
+                ...folder,
+                graphs: currentGraphs
+                    .filter((g) => g.folder_id === folder.id)
+                    .sort(
+                        (a, b) =>
+                            new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime(),
+                    ),
+            }))
+            .sort((a, b) => a.name.localeCompare(b.name));
+
+        const loose = unpinned
+            .filter((g) => !g.folder_id)
+            .sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime());
+
+        return {
+            pinned,
+            folders: folderMap,
+            loose,
+        };
+    };
+
+    // --- Watchers ---
+    watch(
+        expandedFolders,
+        (newFolders) => {
+            try {
+                localStorage.setItem(STORAGE_KEY, JSON.stringify(Array.from(newFolders)));
+            } catch (e) {
+                console.error('Failed to save expanded folders to localStorage', e);
+            }
+        },
+        { deep: true },
+    );
+
+    // --- Init ---
+    const initExpandedFolders = () => {
+        try {
+            const storedFolders = localStorage.getItem(STORAGE_KEY);
+            if (storedFolders) {
+                const parsedFolders = JSON.parse(storedFolders);
+                if (Array.isArray(parsedFolders)) {
+                    expandedFolders.value = new Set(parsedFolders);
+                }
+            }
+        } catch (e) {
+            console.error('Failed to load expanded folders from localStorage', e);
+            localStorage.removeItem(STORAGE_KEY);
+        }
+    };
+
+    return {
+        graphs,
+        folders,
+        workspaces,
+        searchQuery,
+        searchScope,
+        searchWorkspaceId,
+        searchResults,
+        expandedFolders,
+        fetchData,
+        toggleFolder,
+        getOrganizedData,
+        initExpandedFolders,
+    };
+};
diff --git a/ui/app/composables/sidebar/useSidebarWorkspaces.ts b/ui/app/composables/sidebar/useSidebarWorkspaces.ts
new file mode 100644
index 00000000..7311c46c
--- /dev/null
+++ b/ui/app/composables/sidebar/useSidebarWorkspaces.ts
@@ -0,0 +1,176 @@
+import type { Workspace, Graph, Folder } from '@/types/graph';
+import { useThrottleFn } from '@vueuse/core';
+
+export const useSidebarWorkspaces = (
+    workspaces: Ref<Workspace[]>,
+    graphs: Ref<Graph[]>,
+    folders: Ref<Folder[]>,
+) => {
+    const { createWorkspace, updateWorkspace, deleteWorkspace } = useAPI();
+    const { error } = useToast();
+
+    // --- State ---
+    const activeWorkspaceId = ref<string | null>(null);
+    const isEditingWorkspace = ref(false);
+    const workspaceNameInput = ref('');
+    const workspaceInputRef = ref<HTMLInputElement | null>(null);
+    const WORKSPACE_STORAGE_KEY = 'meridian_active_workspace';
+
+    // --- Computed ---
+    const activeWorkspace = computed(() =>
+        workspaces.value.find((w) => w.id === activeWorkspaceId.value),
+    );
+
+    // --- Actions ---
+    const initActiveWorkspace = () => {
+        if (workspaces.value.length > 0) {
+            const storedId = localStorage.getItem(WORKSPACE_STORAGE_KEY);
+            const exists = workspaces.value.find((w) => w.id === storedId);
+
+            if (exists) {
+                activeWorkspaceId.value = exists.id;
+            } else if (
+                !activeWorkspaceId.value ||
+                !workspaces.value.find((w) => w.id === activeWorkspaceId.value)
+            ) {
+                activeWorkspaceId.value = workspaces.value[0].id;
+            }
+        }
+    };
+
+    const handleCreateWorkspace = async () => {
+        try {
+            const newWs = await createWorkspace('New Workspace');
+            workspaces.value.push(newWs);
+            activeWorkspaceId.value = newWs.id;
+            await startEditingWorkspace();
+        } catch {
+            error('Failed to create workspace.');
+        }
+    };
+
+    const startEditingWorkspace = async () => {
+        if (!activeWorkspace.value) return;
+        workspaceNameInput.value = activeWorkspace.value.name;
+        isEditingWorkspace.value = true;
+        await nextTick();
+        workspaceInputRef.value?.focus();
+        workspaceInputRef.value?.select();
+    };
+
+    const saveWorkspaceName = async () => {
+        if (!isEditingWorkspace.value || !activeWorkspace.value) return;
+        const newName = workspaceNameInput.value.trim();
+        if (newName && newName !== activeWorkspace.value.name) {
+            try {
+                const updated = await updateWorkspace(activeWorkspace.value.id, newName);
+                activeWorkspace.value.name = updated.name;
+            } catch {
+                error('Failed to rename workspace.');
+            }
+        }
+        isEditingWorkspace.value = false;
+    };
+
+    const cancelWorkspaceEdit = () => {
+        isEditingWorkspace.value = false;
+    };
+
+    const handleDeleteWorkspace = async () => {
+        const ws = activeWorkspace.value;
+        if (!ws) return;
+        if (
+            !confirm(
+                `Delete workspace "${ws.name}"? Graphs inside will be moved to the "${workspaces.value[0].name}" workspace.`,
+            )
+        )
+            return;
+
+        if (workspaces.value.length <= 1) {
+            error('Cannot delete the only workspace.');
+            return;
+        }
+        if (ws.id === workspaces.value[0].id) {
+            error('Cannot delete the Default workspace.');
+            return;
+        }
+
+        try {
+            await deleteWorkspace(ws.id);
+            workspaces.value = workspaces.value.filter((w) => w.id !== ws.id);
+            const defaultId = workspaces.value[0].id;
+
+            graphs.value.forEach((g) => {
+                if (g.workspace_id === ws.id) g.workspace_id = defaultId;
+            });
+
+            folders.value.forEach((f) => {
+                if (f.workspace_id === ws.id) f.workspace_id = defaultId;
+            });
+
+            activeWorkspaceId.value = defaultId;
+        } catch {
+            error('Failed to delete workspace.');
+        }
+    };
+
+    const switchWorkspace = (direction: 'next' | 'prev') => {
+        if (workspaces.value.length <= 1) return;
+
+        const currentIndex = workspaces.value.findIndex((w) => w.id === activeWorkspaceId.value);
+        if (currentIndex === -1) return;
+
+        let newIndex = direction === 'next' ? currentIndex + 1 : currentIndex - 1;
+
+        // Clamp index
+        if (newIndex < 0) newIndex = 0;
+        if (newIndex >= workspaces.value.length) newIndex = workspaces.value.length - 1;
+
+        if (newIndex !== currentIndex) {
+            activeWorkspaceId.value = workspaces.value[newIndex].id;
+        }
+    };
+
+    const throttledSwitch = useThrottleFn((direction: 'next' | 'prev') => {
+        switchWorkspace(direction);
+    }, 300);
+
+    const handleWheel = (event: WheelEvent) => {
+        if (!event.shiftKey) return;
+        const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
+        if (Math.abs(delta) > 10) {
+            throttledSwitch(delta > 0 ? 'next' : 'prev');
+        }
+    };
+
+    // --- Watchers ---
+    watch(
+        activeWorkspaceId,
+        (newId) => {
+            if (newId) {
+                try {
+                    localStorage.setItem(WORKSPACE_STORAGE_KEY, newId);
+                } catch (e) {
+                    console.error('Failed to save active workspace to localStorage', e);
+                }
+            }
+        },
+        { immediate: false },
+    );
+
+    return {
+        activeWorkspaceId,
+        activeWorkspace,
+        isEditingWorkspace,
+        workspaceNameInput,
+        workspaceInputRef,
+        initActiveWorkspace,
+        handleCreateWorkspace,
+        startEditingWorkspace,
+        saveWorkspaceName,
+        cancelWorkspaceEdit,
+        handleDeleteWorkspace,
+        switchWorkspace,
+        handleWheel,
+    };
+};
diff --git a/ui/app/composables/useAPI.ts b/ui/app/composables/useAPI.ts
index f8b54604..74ee3fe6 100644
--- a/ui/app/composables/useAPI.ts
+++ b/ui/app/composables/useAPI.ts
@@ -1,6 +1,7 @@
 import type {
     Graph,
     Folder,
+    Workspace,
     CompleteGraph,
     CompleteGraphRequest,
     Message,
@@ -219,8 +220,12 @@ export const useAPI = () => {
     /**
      * Creates a new graph.
      */
-    const createGraph = async (temporary: boolean): Promise<Graph> => {
-        return apiFetch<Graph>(`/api/graph/create?temporary=${temporary}`, { method: 'POST' });
+    const createGraph = async (temporary: boolean, workspaceId?: string | null): Promise<Graph> => {
+        let url = `/api/graph/create?temporary=${temporary}`;
+        if (workspaceId) {
+            url += `&workspace_id=${workspaceId}`;
+        }
+        return apiFetch<Graph>(url, { method: 'POST' });
     };
 
     /**
@@ -620,8 +625,12 @@ export const useAPI = () => {
         });
     };
 
-    const createHistoryFolder = async (name: string) => {
-        return apiFetch<Folder>(`/api/folders?name=${encodeURIComponent(name)}`, {
+    const createHistoryFolder = async (name: string, workspaceId?: string | null) => {
+        let url = `/api/folders?name=${encodeURIComponent(name)}`;
+        if (workspaceId) {
+            url += `&workspace_id=${workspaceId}`;
+        }
+        return apiFetch<Folder>(url, {
             method: 'POST',
         });
     };
@@ -630,20 +639,29 @@ export const useAPI = () => {
         id: string,
         name: string | undefined,
         color: string | undefined,
+        workspaceId: string | undefined = undefined,
     ) => {
         const queryParams = new URLSearchParams();
         if (name) queryParams.append('name', name);
         if (color) queryParams.append('color', color);
+        if (workspaceId) queryParams.append('workspace_id', workspaceId);
         return apiFetch<Folder>(`/api/folders/${id}?${queryParams.toString()}`, {
             method: 'PATCH',
         });
     };
 
-    const moveGraph = async (graphId: string, folderId: string | null) => {
+    const moveGraph = async (
+        graphId: string,
+        folderId: string | null,
+        workspaceId: string | null = null,
+    ) => {
         if (!graphId) throw new Error('graphId is required');
-        let url = `/api/graph/${graphId}/move`;
+        let url = `/api/graph/${graphId}/move?`;
         if (folderId) {
-            url += `?folder_id=${folderId}`;
+            url += `folder_id=${folderId}`;
+        }
+        if (workspaceId) {
+            url += `&workspace_id=${workspaceId}`;
         }
         return apiFetch<Graph>(url, {
             method: 'POST',
@@ -662,6 +680,28 @@ export const useAPI = () => {
         await apiFetch<unknown>('/api/user/me', { method: 'DELETE' });
     };
 
+    // --- Workspace API ---
+
+    const getWorkspaces = async () => {
+        return apiFetch<Workspace[]>('/api/workspaces', { method: 'GET' });
+    };
+
+    const createWorkspace = async (name: string) => {
+        return apiFetch<Workspace>(`/api/workspaces?name=${encodeURIComponent(name)}`, {
+            method: 'POST',
+        });
+    };
+
+    const updateWorkspace = async (id: string, name: string) => {
+        return apiFetch<Workspace>(`/api/workspaces/${id}?name=${encodeURIComponent(name)}`, {
+            method: 'PATCH',
+        });
+    };
+
+    const deleteWorkspace = async (id: string) => {
+        return apiFetch<unknown>(`/api/workspaces/${id}`, { method: 'DELETE' });
+    };
+
     return {
         apiFetch,
         fetchWithRefresh,
@@ -711,5 +751,10 @@ export const useAPI = () => {
         getRepositoryCommitState,
         // --- Deprecated GitHub specific ---
         getUsage,
+        // --- Workspace ---
+        getWorkspaces,
+        createWorkspace,
+        updateWorkspace,
+        deleteWorkspace,
     };
 };
diff --git a/ui/app/pages/index.vue b/ui/app/pages/index.vue
index 7486a4bc..ac49f3fa 100644
--- a/ui/app/pages/index.vue
+++ b/ui/app/pages/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { DEFAULT_NODE_ID } from '@/constants';
 import { NodeTypeEnum, MessageRoleEnum, MessageContentTypeEnum } from '@/types/enums';
-import type { Graph, Folder, MessageContent, BlockDefinition } from '@/types/graph';
+import type { Graph, Folder, Workspace, MessageContent, BlockDefinition } from '@/types/graph';
 import type { User } from '@/types/user';
 import type HomeRecentCanvasSection from '~/components/ui/home/recentCanvasSection.vue';
 import { PLAN_LIMITS } from '@/constants/limits';
@@ -28,6 +28,7 @@ const { resetChatState, addMessage } = chatStore;
 // --- Local State ---
 const graphs = ref<Graph[]>([]);
 const folders = ref<Folder[]>([]);
+const workspaces = ref<Workspace[]>([]);
 const isLoading = ref(true);
 const animWords = ref(Array(10).fill(false));
 const pageRef = ref<HTMLElement | null>(null);
@@ -49,7 +50,7 @@ mainContentOpacity.on('change', (v) => (mainContentStyle.opacity = v));
 
 // --- Composables ---
 const { fileToMessageContent } = useFiles();
-const { getGraphs, getHistoryFolders, createGraph } = useAPI();
+const { getGraphs, getHistoryFolders, getWorkspaces, createGraph } = useAPI();
 const { generateId } = useUniqueId();
 const { user, fetch: fetchUserSession } = useUserSession();
 const { error } = useToast();
@@ -58,6 +59,12 @@ const { handleDeleteGraph } = useGraphDeletion(graphs, undefined);
 // --- Core Logic Functions ---
 
 const handleWheel = (event: WheelEvent) => {
+    // Workspace Switching (Shift + Wheel)
+    if (event.shiftKey) {
+        recentCanvasComponentRef.value?.handleWorkspaceWheel(event);
+        return;
+    }
+
     const currentHeight = recentCanvasHeight.get();
     const isScrollingDown = event.deltaY > 0;
     const isScrollingUp = event.deltaY < 0;
@@ -85,9 +92,14 @@ const handleWheel = (event: WheelEvent) => {
 
 const fetchData = async () => {
     try {
-        const [graphsData, foldersData] = await Promise.all([getGraphs(), getHistoryFolders()]);
+        const [graphsData, foldersData, workspacesData] = await Promise.all([
+            getGraphs(),
+            getHistoryFolders(),
+            getWorkspaces(),
+        ]);
         graphs.value = graphsData;
         folders.value = foldersData;
+        workspaces.value = workspacesData;
     } catch (err) {
         console.error('Error fetching data:', err);
         error('Failed to load history. Please try again.', { title: 'Load Error' });
@@ -364,6 +376,7 @@ onBeforeUnmount(() => {
                 ref="recentCanvasComponentRef"
                 :graphs="graphs"
                 :folders="folders"
+                :workspaces="workspaces"
                 :is-loading="isLoading"
                 @delete="(id, name) => handleDeleteGraph(id, name, false)"
             />
diff --git a/ui/app/types/graph.d.ts b/ui/app/types/graph.d.ts
index 08204fb9..f0f32662 100644
--- a/ui/app/types/graph.d.ts
+++ b/ui/app/types/graph.d.ts
@@ -9,6 +9,7 @@ interface Folder {
     color: string | null;
     created_at: string;
     updated_at: string;
+    workspace_id: string;
 }
 
 interface Graph {
@@ -30,6 +31,14 @@ interface Graph {
     repetition_penalty: number | null;
     reasoning_effort: ReasoningEffortEnum | null;
     node_count: number;
+    workspace_id: string; // UUID
+}
+
+export interface Workspace {
+    id: string;
+    name: string;
+    created_at: string;
+    updated_at: string;
 }
 
 interface CompleteGraph {