diff --git a/README.md b/README.md
index 73d2f912..f0a9c8e0 100644
--- a/README.md
+++ b/README.md
@@ -9,16 +9,17 @@ features it has right now:
 2. each project can have many todo categores (with add/edit/delete)
 3. each category can have many todo item (with add/edit/delete)
 4. each category can be shared among diffrent projects (with detach/attach)
-5. each project can be shared with other users (with detach/attach)
+5. each project can be shared with other users (with detach/attach, only owners can share with other users)
 6. each todo can have many comments (with add/edit/delete)
 7. you can sort todo categories or todo items in any arbitrary order and it will be saved on your user account (I'm storing this using linked list)
 8. each todo can have multiple tags (with add/edit/delete)
 9. you can search (all projects/project specific) by tag
 10. adding todo dependencies which also works across projects (with add/delete) - for instance you can't mark a todo as `Done` unless all of its dependencies or dependencies of those dependencies are marked as `Done`
 11. creating projects from a default template
-12. adding rules to todo categories (currently we only support `MARK_AS_DONE` action meaning when you move a todo item to a todo category, it will be automatically marked as `Done`)
+12. adding rules to todo categories (currently we only support `MARK_AS_DONE` and `MARK_AS_UNDONE` action meaning when you move a todo item to a todo category, it will be automatically marked as `Done` or `Undone` depending on what you chose)
 13. setting due dates for each todoitem (with add/edit/remove)
-14. setting custom permissions per user (PENDING FEATURE: update these permissions, currenly you have to detach and ask the OWNER to invite you with the new permissions)
+14. setting custom permissions per user 
+15. changing project permissions in project settings page (only owners can change permissions)
 
 # demo
 
@@ -30,9 +31,8 @@ You can find the demo at [this](https://todos-fohoov.vercel.app/) url (it might
 2. goto the frontend project and follow the steps of its README.md
 
 # known bugs
-1. conditional rendering (affects NavbarItems but I fixed it with a work around for now): https://github.com/sveltejs/svelte/issues/10321
-2. animation bugs(this bug basically destroys my UX but whatever :D): https://github.com/sveltejs/svelte/issues/10493
-3. reassignment not causing rerender (affects Alert component dismiss functionality): https://github.com/sveltejs/svelte/issues/10593
+1. animation bugs(this bug basically destroys my UX but whatever :D): https://github.com/sveltejs/svelte/issues/10493
+2. reassignment not causing rerender (affects Alert component dismiss functionality): https://github.com/sveltejs/svelte/issues/10593
 # important
 
 you might need to delete the database after an update. I'll not implement migrations until I'm completely happy with the project. If you are required to delete the db after an update I'll mention it in the release notes (_/ω＼_)
diff --git a/backend/api/__init__.py b/backend/api/__init__.py
index eb04d5c9..96f0c04f 100644
--- a/backend/api/__init__.py
+++ b/backend/api/__init__.py
@@ -1,5 +1,6 @@
 from re import I
-from fastapi import FastAPI, Request
+import typing
+from fastapi import FastAPI, HTTPException, Request
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import JSONResponse
 from fastapi.routing import APIRoute
@@ -16,10 +17,13 @@
 from error.exceptions import UserFriendlyError
 
 
-def db_excepted_exception_handler(request: Request, ex: UserFriendlyError):
+def db_excepted_exception_handler(request: Request, ex: Exception):
     return JSONResponse(
         status_code=400,
-        content={"code": ex.code, "message": ex.description},
+        content={
+            "code": typing.cast(UserFriendlyError, ex).code,
+            "message": typing.cast(UserFriendlyError, ex).description,
+        },
     )
 
 
diff --git a/backend/api/conftest.py b/backend/api/conftest.py
index 5bbedfb0..1ddc715d 100644
--- a/backend/api/conftest.py
+++ b/backend/api/conftest.py
@@ -1,77 +1,77 @@
 from typing import List, TypedDict
 
+
+from fastapi import FastAPI
 from fastapi.testclient import TestClient
 import pytest
 from api import create_app
 from api.dependencies.db import get_db
-from api.dependencies.db_test import get_test_db
-from db.schemas.user import UserCreate
-from db.test import init_db
 
-from db.utils.user_crud import create_user
+from db.schemas.user import User
+from db.test import init_db, SessionLocalTest
 
 
-TestUserType = TypedDict("TestUserType", {"username": str, "password": str})
+TestUserType = TypedDict("TestUserType", {"id": int, "username": str, "password": str})
 
 _TEST_USERS: List[TestUserType] = [
-    {"username": "test_username1", "password": "test_password1"},
-    {"username": "test_username2", "password": "test_password2"},
-    {"username": "test_username3", "password": "test_password3"},
+    {"id": -1, "username": "test_username1", "password": "test_password1"},
+    {"id": -1, "username": "test_username2", "password": "test_password2"},
+    {"id": -1, "username": "test_username3", "password": "test_password3"},
 ]
 
 
 @pytest.fixture(scope="session")
-def test_app():
-    """Create and return a test FastAPI application."""
-    app = create_app()
-    app.dependency_overrides[get_db] = get_test_db
-    return app
-
-
-@pytest.fixture(scope="session")
-def test_client(test_app):
+def test_client(test_app: FastAPI):
     """Create a TestClient using the test FastAPI application."""
     with TestClient(test_app) as client:
         yield client
 
 
 @pytest.fixture(scope="session")
-def test_db():
-    """Fixture to provide a database session for testing."""
+def test_app():
+    """Create and return a test FastAPI application."""
     init_db()  # Ensure the database is initialized
-    db = next(
-        get_test_db()
-    )  # Manually get the first (and only) yield which is the session object
-    try:
-        yield db
-    finally:
-        db.close()  # Ensure the session is closed after the test(s)
+    app = create_app()
+
+    def get_test_db():
+        db = SessionLocalTest()
+        try:
+            yield db
+        finally:
+            db.close()
+
+    app.dependency_overrides[get_db] = get_test_db
+    return app
 
 
 @pytest.fixture(scope="session", autouse=True)
-def test_users(test_db):
+def test_users(test_client: TestClient, test_app: FastAPI):
     """Create test users in the database, ensuring each user is created only once."""
     for user in _TEST_USERS:
-        create_user(
-            test_db,
-            UserCreate.model_validate(
-                {
-                    "username": user["username"],
-                    "password": user["password"],
-                    "confirm_password": user["password"],
-                }
-            ),
+        response = test_client.post(
+            "/user/signup",
+            json={
+                "username": user["username"],
+                "password": user["password"],
+                "confirm_password": user["password"],
+            },
         )
+
+        assert response.status_code == 200
+
+        parsed_user = User.model_validate(response.json(), strict=True)
+        user["id"] = parsed_user.id
+
     return _TEST_USERS
 
 
 @pytest.fixture(scope="function")
-def access_token_factory(test_app):
+def access_token_factory(test_client: TestClient):
 
     def _get_access_token(
         user: TestUserType,
     ) -> str:
-        response = TestClient(test_app).post(
+        response = test_client.post(
             "/oauth/token",
             headers={"Content-Type": "application/x-www-form-urlencoded"},
             data={
diff --git a/backend/api/dependencies/db_test.py b/backend/api/dependencies/db_test.py
deleted file mode 100644
index 171fd9b6..00000000
--- a/backend/api/dependencies/db_test.py
+++ /dev/null
@@ -1,9 +0,0 @@
-from db.test import SessionLocalTest
-
-
-def get_test_db():
-    db = SessionLocalTest()
-    try:
-        yield db
-    finally:
-        db.close()
diff --git a/backend/api/routes/conftest.py b/backend/api/routes/conftest.py
index 3bfa57ec..6c050cf1 100644
--- a/backend/api/routes/conftest.py
+++ b/backend/api/routes/conftest.py
@@ -4,7 +4,11 @@
 
 from api.conftest import TestUserType
 from db.models.user_project_permission import Permission
-from db.schemas.project import Project
+from db.schemas.project import (
+    Project,
+    ProjectAttachAssociation,
+    ProjectAttachAssociationResponse,
+)
 from db.schemas.todo_category import TodoCategory
 from db.schemas.todo_item import TodoItem
 
@@ -56,6 +60,11 @@ def _create_category(user: TestUserType, project_id: int):
                 "project_id": project_id,
             },
         )
+
+        assert (
+            response.status_code == 200
+        ), "category should be created with status = 200"
+
         category = TodoCategory.model_validate(response.json(), strict=True)
         return category
 
@@ -105,4 +114,8 @@ def _attach_to_user(
             attach_to_user_response.status_code == 200
         ), "Sharing project with permissions failed"
 
+        return ProjectAttachAssociationResponse.model_validate(
+            attach_to_user_response.json(), strict=True
+        )
+
     return _attach_to_user
diff --git a/backend/api/routes/project/project.py b/backend/api/routes/project/project.py
index e14db71d..b25baab0 100644
--- a/backend/api/routes/project/project.py
+++ b/backend/api/routes/project/project.py
@@ -1,3 +1,4 @@
+import builtins
 from typing import Annotated
 from fastapi import APIRouter, Depends, Response
 from starlette.status import HTTP_200_OK
@@ -6,6 +7,7 @@
 from api.dependencies.oauth import get_current_user
 from db.models.user import User
 from db.schemas.project import (
+    PartialUserWithPermission,
     Project,
     ProjectAttachAssociationResponse,
     ProjectCreate,
@@ -13,6 +15,7 @@
     ProjectRead,
     ProjectAttachAssociation,
     ProjectUpdate,
+    ProjectUpdateUserPermissions,
 )
 from db.utils import project_crud
 
@@ -57,6 +60,26 @@ def detach_from_user(
     return Response(status_code=HTTP_200_OK)
 
 
+@router.patch(path="/update-user-permissions", response_model=PartialUserWithPermission)
+def update_permissions(
+    current_user: Annotated[User, Depends(get_current_user)],
+    permissions: ProjectUpdateUserPermissions,
+    db: Session = Depends(get_db),
+):
+    updated_project = project_crud.update_user_permissions(
+        db, permissions, current_user.id
+    )
+
+    user = builtins.list(
+        filter(
+            lambda user: user.id == permissions.user_id,
+            Project.model_validate(updated_project).users,
+        )
+    )[0]
+
+    return user
+
+
 @router.get("/search", response_model=Project)
 def search(
     current_user: Annotated[User, Depends(get_current_user)],
diff --git a/backend/api/routes/project/test_project.py b/backend/api/routes/project/test_project.py
index a1b82a3d..31d5bfd7 100644
--- a/backend/api/routes/project/test_project.py
+++ b/backend/api/routes/project/test_project.py
@@ -1,3 +1,4 @@
+from tkinter import ALL
 from typing import Callable, Dict
 import pytest
 from fastapi.testclient import TestClient
@@ -6,8 +7,15 @@
     TestUserType,
 )
 from api.routes.error import UserFriendlyErrorSchema
+from api.routes.user import test_user
 from db.models.user_project_permission import Permission
-from db.schemas.project import Project
+from db.schemas.project import (
+    PartialUserWithPermission,
+    Project,
+    ProjectAttachAssociation,
+    ProjectAttachAssociationResponse,
+)
+from db.schemas.todo_category import TodoCategory
 from error.exceptions import ErrorCode
 
 
@@ -33,6 +41,7 @@ def test_create_project(
     )
 
     assert response.status_code == 200
+
     project = Project.model_validate(response.json(), strict=True)
 
     # Common assertions for both cases
@@ -106,6 +115,74 @@ def test_project_accessibility(
     ), "user B should be able to see user A's project after it was shared"
 
 
+def test_owner_detaching_projects(
+    auth_header_factory: Callable[[TestUserType], Dict[str, str]],
+    test_project_factory: Callable[[TestUserType], Project],
+    test_attach_project_to_user: Callable[
+        [TestUserType, TestUserType, int, list[Permission]],
+        ProjectAttachAssociationResponse,
+    ],
+    test_users: list[TestUserType],
+    test_client: TestClient,
+):
+
+    # Project creation by user A
+    user_a = test_users[0]
+    user_b = test_users[1]
+    project = test_project_factory(user_a)
+
+    attach_response = test_attach_project_to_user(
+        user_a, user_b, project.id, [Permission.CREATE_COMMENT]
+    )
+
+    detach_by_owner_response_json = test_client.request(
+        method="delete",
+        url="/project/detach-from-user",
+        headers=auth_header_factory(user_a),
+        json={
+            "project_id": project.id,
+            "user_id": attach_response.user_id,
+        },
+    )
+
+    assert (
+        detach_by_owner_response_json.status_code == 200
+    ), "owner should be detach from other users"
+
+    test_attach_project_to_user(user_a, user_b, project.id, [Permission.CREATE_COMMENT])
+
+    attach_to_user_c_response = test_attach_project_to_user(
+        user_a, test_users[2], project.id, [Permission.CREATE_COMMENT]
+    )
+
+    detach_by_user_response_json = test_client.request(
+        method="delete",
+        url="/project/detach-from-user",
+        headers=auth_header_factory(user_b),
+        json={
+            "project_id": project.id,
+            "user_id": attach_to_user_c_response.user_id,
+        },
+    )
+
+    assert (
+        detach_by_user_response_json.status_code == 400
+    ), "none-owner shouldn't be able to detach projects from other users"
+
+    detach_by_owner_response_json = test_client.request(
+        method="delete",
+        url="/project/detach-from-user",
+        headers=auth_header_factory(user_a),
+        json={
+            "project_id": project.id,
+            "user_id": attach_to_user_c_response.user_id,
+        },
+    )
+    assert (
+        detach_by_owner_response_json.status_code == 200
+    ), "owner should be able to detach projects from other users"
+
+
 def test_cannot_share_project_to_same_user_multiple_times(
     auth_header_factory: Callable[[TestUserType], Dict[str, str]],
     test_project_factory: Callable[[TestUserType], Project],
@@ -137,7 +214,6 @@ def test_cannot_share_project_to_same_user_multiple_times(
         project,
         [
             Permission.ALL,
-            Permission.CREATE_TODO_ITEM,
         ],
     )
     _reattach_project_to_user(
@@ -147,11 +223,219 @@ def test_cannot_share_project_to_same_user_multiple_times(
         project,
         [
             Permission.ALL,
-            Permission.UPDATE_TODO_CATEGORY,
         ],
     )
 
 
+def test_user_permissions_per_project(
+    auth_header_factory: Callable[[TestUserType], Dict[str, str]],
+    test_project_factory: Callable[[TestUserType], Project],
+    test_attach_project_to_user: Callable[
+        [TestUserType, TestUserType, int, list[Permission]], None
+    ],
+    test_users: list[TestUserType],
+    test_client: TestClient,
+):
+    user_a = test_users[0]  # Owner
+    user_b = test_users[1]  # Shared user with permission
+
+    # Create the projects
+    project_one = test_project_factory(user_a)
+    project_two = test_project_factory(
+        user_b
+    )  # just created this project because this should leak into project one permissions list
+
+    # Share project_two with user_a with CREATE_TODO_CATEGORY permission just make sure permissions don't leak to other projects
+    test_attach_project_to_user(
+        user_b, user_a, project_two.id, [Permission.CREATE_TODO_CATEGORY]
+    )
+
+    # Share project_one with user_b with UPDATE_TODO_CATEGORY permission
+    test_attach_project_to_user(
+        user_a, user_b, project_one.id, [Permission.UPDATE_TODO_CATEGORY]
+    )
+
+    projects_json = test_client.get(
+        "/project/list", headers=auth_header_factory(user_a)
+    ).json()
+    parsed_projects = [Project.model_validate(x, strict=True) for x in projects_json]
+    assert len(parsed_projects) >= 2, "at least two projects should exist"
+
+    parsed_project_one = list(
+        filter(lambda project: project.id == project_one.id, parsed_projects)
+    )[0]
+    assert parsed_project_one is not None
+
+    parsed_project_two = list(
+        filter(lambda project: project.id == project_two.id, parsed_projects)
+    )[0]
+    assert parsed_project_two is not None
+
+    assert (
+        len(parsed_project_one.users) == 2
+    ), "project one should be associated with two users"
+
+    assert parsed_project_one.users[0].username == user_a["username"]
+    assert parsed_project_one.users[1].username == user_b["username"]
+    assert parsed_project_one.users[0].permissions == [Permission.ALL]
+    assert parsed_project_one.users[1].permissions == [Permission.UPDATE_TODO_CATEGORY]
+
+    assert parsed_project_two.users[0].username == user_a["username"]
+    assert parsed_project_two.users[1].username == user_b["username"]
+    assert parsed_project_two.users[0].permissions == [Permission.CREATE_TODO_CATEGORY]
+    assert parsed_project_two.users[1].permissions == [Permission.ALL]
+
+
+@pytest.mark.parametrize("values", [[], "", None])
+def test_cannot_pass_empty_permissions_to_attach_association(
+    auth_header_factory: Callable[[TestUserType], Dict[str, str]],
+    test_project_factory: Callable[[TestUserType], Project],
+    test_users: list[TestUserType],
+    test_client: TestClient,
+    values: str | list | None,
+):
+    p1 = test_project_factory(test_users[0])
+    response = test_client.post(
+        "/project/attach-to-user",
+        headers=auth_header_factory(test_users[0]),
+        json={
+            "project_id": p1.id,
+            "username": test_users[1],
+            "permissions": values,
+        },
+    )
+
+    assert (
+        response.status_code == 422
+    ), "we shouldn't be able to pass empty permissions lists to this service"
+
+
+def test_updating_user_permissions(
+    auth_header_factory: Callable[[TestUserType], Dict[str, str]],
+    test_project_factory: Callable[[TestUserType], Project],
+    test_attach_project_to_user: Callable[
+        [TestUserType, TestUserType, int, list[Permission]], None
+    ],
+    test_users: list[TestUserType],
+    test_client: TestClient,
+):
+    user_a = test_users[0]  # Owner
+    user_b = test_users[1]  # Shared user with permission
+
+    # Create the projects
+    project_one = test_project_factory(user_a)
+    project_two = test_project_factory(
+        user_b
+    )  # just created this project because this should leak into project one permissions list
+
+    # Share project_two with user_a with CREATE_TODO_CATEGORY permission just make sure permissions don't leak to other projects
+    test_attach_project_to_user(
+        user_b, user_a, project_two.id, [Permission.CREATE_TODO_CATEGORY]
+    )
+
+    # Share project_one with user_b with UPDATE_TODO_CATEGORY permission
+    test_attach_project_to_user(
+        user_a, user_b, project_one.id, [Permission.UPDATE_TODO_CATEGORY]
+    )
+
+    user_no_access_response = test_client.patch(
+        "/project/update-user-permissions",
+        headers=auth_header_factory(user_a),
+        json={
+            "project_id": project_one.id,
+            "user_id": test_users[2]["id"],
+            "permissions": [Permission.ALL],
+        },
+    )
+
+    assert user_no_access_response.status_code == 400
+    assert (
+        UserFriendlyErrorSchema.model_validate(user_no_access_response.json()).code
+        == ErrorCode.USER_DOESNT_HAVE_ACCESS_TO_PROJECT
+    )
+
+    change_user_b_permissions = test_client.patch(
+        "/project/update-user-permissions",
+        headers=auth_header_factory(user_a),
+        json={
+            "project_id": project_one.id,
+            "user_id": user_b["id"],
+            "permissions": [Permission.ALL],
+        },
+    )
+    assert change_user_b_permissions.status_code == 200
+    assert PartialUserWithPermission.model_validate(
+        change_user_b_permissions.json()
+    ).permissions == [Permission.ALL]
+
+    change_user_a_permissions = test_client.patch(
+        "/project/update-user-permissions",
+        headers=auth_header_factory(user_b),
+        json={
+            "project_id": project_one.id,
+            "user_id": user_a["id"],
+            "permissions": [Permission.DELETE_COMMENT, Permission.DELETE_TODO_ITEM],
+        },
+    )
+
+    assert change_user_a_permissions.status_code == 200
+    assert (
+        PartialUserWithPermission.model_validate(
+            change_user_a_permissions.json()
+        ).permissions.sort()
+        == [Permission.DELETE_COMMENT, Permission.DELETE_TODO_ITEM].sort()
+    )
+
+    searched_project = Project.model_validate(
+        test_client.get(
+            "/project/search",
+            headers=auth_header_factory(user_a),
+            params={"project_id": project_one.id},
+        ).json()
+    )
+
+    assert len(searched_project.users) == 2
+
+    user_a_permissions = next(
+        filter(lambda user: user.id == user_a["id"], searched_project.users)
+    )
+    user_b_permissions = next(
+        filter(lambda user: user.id == user_b["id"], searched_project.users)
+    )
+
+    assert (
+        user_a_permissions.permissions.sort()
+        == [Permission.DELETE_COMMENT, Permission.DELETE_TODO_ITEM].sort()
+    )
+    assert user_b_permissions.permissions == [Permission.ALL]
+
+
+def test_cannot_set_all_with_other_permissions(
+    auth_header_factory: Callable[[TestUserType], Dict[str, str]],
+    test_project_factory: Callable[[TestUserType], Project],
+    test_users: list[TestUserType],
+    test_client: TestClient,
+):
+    user_a = test_users[0]  # Owner
+
+    # Create the projects
+    project_one = test_project_factory(user_a)
+
+    attach_to_user_response = test_client.post(
+        "/project/attach-to-user",
+        headers=auth_header_factory(user_a),
+        json={
+            "project_id": project_one.id,
+            "username": test_users[1]["username"],
+            "permissions": [Permission.ALL, Permission.CREATE_COMMENT],
+        },
+    )
+
+    assert (
+        attach_to_user_response.status_code == 422
+    ), "shouldn't be able to set ALL permission alongside other permissions to one user"
+
+
 def _reattach_project_to_user(
     auth_header_factory: Callable[[TestUserType], dict[str, str]],
     test_users: list[TestUserType],
diff --git a/backend/api/routes/tag/test_tag.py b/backend/api/routes/tag/test_tag.py
index cd655bc6..5ba23dae 100644
--- a/backend/api/routes/tag/test_tag.py
+++ b/backend/api/routes/tag/test_tag.py
@@ -39,7 +39,7 @@ def test_todo_tag_permissions(
         user_a,
         user_b,
         project_two.id,
-        [Permission.ALL, Permission.DELETE_TODO_CATEGORY],
+        [Permission.ALL],
     )
 
     # Create a todo item under project_one
diff --git a/backend/api/routes/todo_category/test_todo_category.py b/backend/api/routes/todo_category/test_todo_category.py
index a6bcff13..173952c1 100644
--- a/backend/api/routes/todo_category/test_todo_category.py
+++ b/backend/api/routes/todo_category/test_todo_category.py
@@ -8,6 +8,28 @@
 from db.schemas.todo_category import TodoCategory
 
 
+def test_todo_category_create(
+    test_project_factory: Callable[[TestUserType], Project],
+    test_category_factory: Callable[[TestUserType, int], TodoCategory],
+    test_attach_project_to_user: Callable[
+        [TestUserType, TestUserType, int, list[Permission]], None
+    ],
+    test_users: list[TestUserType],
+):
+    user_a = test_users[0]  # Owner
+    user_b = test_users[1]  # Shared user with permission
+
+    # Create a project
+    project_one = test_project_factory(user_a)
+
+    # Share project_one with user_b with UPDATE_TODO_CATEGORY permission
+    test_attach_project_to_user(
+        user_a, user_b, project_one.id, [Permission.CREATE_TODO_CATEGORY]
+    )
+
+    test_category_factory(user_b, project_one.id)
+
+
 def test_todo_category_permissions(
     auth_header_factory: Callable[[TestUserType], Dict[str, str]],
     test_project_factory: Callable[[TestUserType], Project],
@@ -37,7 +59,7 @@ def test_todo_category_permissions(
         user_a,
         user_b,
         project_two.id,
-        [Permission.ALL, Permission.DELETE_TODO_CATEGORY],
+        [Permission.ALL],
     )
 
     # Try updating a category by user_c (should fail)
diff --git a/backend/api/routes/todo_item/test_todo_item.py b/backend/api/routes/todo_item/test_todo_item.py
index fda9b0ce..414f7c75 100644
--- a/backend/api/routes/todo_item/test_todo_item.py
+++ b/backend/api/routes/todo_item/test_todo_item.py
@@ -203,7 +203,7 @@ def test_todo_item_permissions(
         user_a,
         user_b,
         project_two.id,
-        [Permission.ALL, Permission.DELETE_TODO_CATEGORY],
+        [Permission.ALL],
     )
 
     # Create a todo item in project_one's category
diff --git a/backend/api/routes/todo_item_comment/test_todo_item_comment.py b/backend/api/routes/todo_item_comment/test_todo_item_comment.py
index 6804867c..2a2a66e1 100644
--- a/backend/api/routes/todo_item_comment/test_todo_item_comment.py
+++ b/backend/api/routes/todo_item_comment/test_todo_item_comment.py
@@ -39,8 +39,6 @@ def test_todo_comment_permissions(
         test_users[1],
         project_two.id,
         [
-            Permission.CREATE_COMMENT,
-            Permission.DELETE_COMMENT,
             Permission.ALL,
         ],
     )
diff --git a/backend/db/models/project.py b/backend/db/models/project.py
index 35585d09..c7a2ee89 100644
--- a/backend/db/models/project.py
+++ b/backend/db/models/project.py
@@ -1,4 +1,4 @@
-from typing import List
+from typing import TYPE_CHECKING, List
 from sqlalchemy import String, func, select
 from sqlalchemy.orm import Mapped
 from sqlalchemy.orm import mapped_column
@@ -7,27 +7,35 @@
 from sqlalchemy.ext.hybrid import hybrid_property
 
 
+if TYPE_CHECKING:
+    from db.models.tag import Tag
+    from db.models.todo_category import TodoCategory
+    from db.models.user import User
+    from db.models.project_user_association import ProjectUserAssociation
+
+
 class Project(BasesWithCreatedDate):
     __tablename__ = "project"
 
     id: Mapped[int] = mapped_column(primary_key=True, autoincrement=True)
     title: Mapped[str] = mapped_column(String())
     description: Mapped[str] = mapped_column(String())
-    users: Mapped[List["User"]] = relationship(  # type: ignore
-        "User", secondary="project_user_association", back_populates="projects"
+    users: Mapped[List["User"]] = relationship(
+        secondary="project_user_association", back_populates="projects"
     )
-    todo_categories: Mapped[List["TodoCategory"]] = relationship(  # type: ignore
-        argument="TodoCategory",
+    todo_categories: Mapped[List["TodoCategory"]] = relationship(
         secondary="todo_category_project_association",
         back_populates="projects",
         order_by="desc(TodoCategory.id)",
     )
-    tags: Mapped[List["Tag"]] = relationship(  # type: ignore
-        "Tag",
+    tags: Mapped[List["Tag"]] = relationship(
         back_populates="project",
         cascade="all, delete-orphan",
         order_by="desc(Tag.id)",
     )
+    associations: Mapped[List["ProjectUserAssociation"]] = relationship(
+        back_populates="project", viewonly=True
+    )
 
     # TODO: i dont know about the performance implications of these hybrid queries... like does sqlalchemy remove the need to query the db again if the object is already there?
     @hybrid_property
@@ -57,7 +65,10 @@ def pending_todos_count(self):  # type: ignore
         for todo_category in self.todo_categories:
             pending_todos += len(
                 list(
-                    filter(lambda todo_item: todo_item.is_done == False, todo_category.items)  # type: ignore
+                    filter(
+                        lambda todo_item: todo_item.is_done == False,
+                        todo_category.items,
+                    )
                 )
             )
         return pending_todos
diff --git a/backend/db/models/project_user_association.py b/backend/db/models/project_user_association.py
index 1f48caf8..06c20836 100644
--- a/backend/db/models/project_user_association.py
+++ b/backend/db/models/project_user_association.py
@@ -1,22 +1,39 @@
-from typing import List
+from __future__ import annotations
+
+
+from typing import TYPE_CHECKING, List
 from sqlalchemy import ForeignKey, UniqueConstraint
 from sqlalchemy.orm import Mapped, relationship
 from sqlalchemy.orm import mapped_column
 from db.models.base import BasesWithCreatedDate
 
 
+if TYPE_CHECKING:
+    from db.models.project import Project
+    from db.models.user import User
+    from db.models.user_project_permission import UserProjectPermission
+
+
 class ProjectUserAssociation(BasesWithCreatedDate):
     __tablename__ = "project_user_association"
 
     id: Mapped[int] = mapped_column(primary_key=True, autoincrement=True)
-    user_id: Mapped[int] = mapped_column(ForeignKey("user.id", ondelete="CASCADE"))
+    user_id: Mapped[int] = mapped_column(
+        ForeignKey("user.id", ondelete="CASCADE"), nullable=False
+    )
     project_id: Mapped[int] = mapped_column(
-        ForeignKey("project.id", ondelete="CASCADE")
+        ForeignKey("project.id", ondelete="CASCADE"), nullable=False
     )
-    permissions: Mapped[List["UserProjectPermission"]] = relationship(  # type: ignore
-        "UserProjectPermission",
+    permissions: Mapped[List["UserProjectPermission"]] = relationship(
         back_populates="project_user_association",
         cascade="all, delete-orphan",
     )
 
+    project: Mapped["Project"] = relationship(
+        foreign_keys=[project_id], back_populates="associations", viewonly=True
+    )
+    user: Mapped["User"] = relationship(
+        foreign_keys=[user_id], back_populates="associations", viewonly=True
+    )
+
     __table_args__ = (UniqueConstraint("user_id", "project_id"),)
diff --git a/backend/db/models/tag.py b/backend/db/models/tag.py
index 9979098f..390e99bf 100644
--- a/backend/db/models/tag.py
+++ b/backend/db/models/tag.py
@@ -1,10 +1,14 @@
-from typing import List
+from typing import TYPE_CHECKING, List
 from sqlalchemy import CheckConstraint, ForeignKey, String, UniqueConstraint
 from sqlalchemy.orm import Mapped
 from sqlalchemy.orm import mapped_column
 from sqlalchemy.orm import relationship
 from db.models.base import BasesWithCreatedDate
 
+if TYPE_CHECKING:
+    from db.models.project import Project
+    from db.models.todo_item import TodoItem
+
 
 class Tag(BasesWithCreatedDate):
     __tablename__ = "tag"
@@ -14,11 +18,10 @@ class Tag(BasesWithCreatedDate):
     project_id: Mapped[int] = mapped_column(
         ForeignKey("project.id", ondelete="CASCADE")
     )
-    project: Mapped[List["Project"]] = relationship(  # type: ignore
-        "Project", back_populates="tags", single_parent=True
+    project: Mapped[List["Project"]] = relationship(
+        back_populates="tags", single_parent=True
     )
-    todos: Mapped[List["TodoItem"]] = relationship(  # type: ignore
-        "TodoItem",
+    todos: Mapped[List["TodoItem"]] = relationship(
         secondary="todo_item_tag_association",
         back_populates="tags",
         order_by="desc(TodoItem.id)",
diff --git a/backend/db/models/todo_category.py b/backend/db/models/todo_category.py
index dfebc006..c679292f 100644
--- a/backend/db/models/todo_category.py
+++ b/backend/db/models/todo_category.py
@@ -1,4 +1,4 @@
-from typing import List
+from typing import TYPE_CHECKING, List
 from sqlalchemy import String
 from sqlalchemy.orm import Mapped
 from sqlalchemy.orm import mapped_column
@@ -6,6 +6,11 @@
 from db.models.base import BasesWithCreatedDate
 from db.models.todo_category_order import TodoCategoryOrder
 
+if TYPE_CHECKING:
+    from db.models.todo_item import TodoItem
+    from db.models.project import Project
+    from db.models.todo_category_action import TodoCategoryAction
+
 
 class TodoCategory(BasesWithCreatedDate):
     __tablename__ = "todo_category"
@@ -13,25 +18,21 @@ class TodoCategory(BasesWithCreatedDate):
     id: Mapped[int] = mapped_column(primary_key=True, autoincrement=True)
     title: Mapped[str] = mapped_column(String())
     description: Mapped[str] = mapped_column(String())
-    items: Mapped[List["TodoItem"]] = relationship(  # type: ignore
-        "TodoItem",
+    items: Mapped[List["TodoItem"]] = relationship(
         back_populates="category",
         cascade="all, delete-orphan",
         order_by="desc(TodoItem.id), desc(TodoItem.is_done)",
     )
-    actions: Mapped[List["TodoCategoryAction"]] = relationship(  # type: ignore
-        "TodoCategoryAction",
+    actions: Mapped[List["TodoCategoryAction"]] = relationship(
         back_populates="category",
         cascade="all, delete-orphan",
     )
-    projects: Mapped[List["Project"]] = relationship(  # type: ignore
-        "Project",
+    projects: Mapped[List["Project"]] = relationship(
         secondary="todo_category_project_association",
         back_populates="todo_categories",
         order_by="desc(Project.id)",
     )
     orders: Mapped[List[TodoCategoryOrder]] = relationship(
-        "TodoCategoryOrder",
         foreign_keys=[TodoCategoryOrder.category_id],
         cascade="all, delete-orphan",
         back_populates="category",
diff --git a/backend/db/models/todo_category_action.py b/backend/db/models/todo_category_action.py
index d97c6468..3c6ecde5 100644
--- a/backend/db/models/todo_category_action.py
+++ b/backend/db/models/todo_category_action.py
@@ -1,4 +1,5 @@
 import enum
+from typing import TYPE_CHECKING
 from sqlalchemy import (
     Enum,
     ForeignKey,
@@ -10,6 +11,10 @@
 from db.models.base import BasesWithCreatedDate
 
 
+if TYPE_CHECKING:
+    from db.models.todo_category import TodoCategory
+
+
 class Action(enum.StrEnum):
     AUTO_MARK_AS_DONE = enum.auto()
     AUTO_MARK_AS_UNDONE = enum.auto()
@@ -23,8 +28,7 @@ class TodoCategoryAction(BasesWithCreatedDate):
         ForeignKey("todo_category.id", ondelete="CASCADE")
     )
     action: Mapped[Action] = mapped_column(Enum(Action, validate_strings=True))
-    category: Mapped["TodoCategory"] = relationship(  # type: ignore
-        "TodoCategory",
+    category: Mapped["TodoCategory"] = relationship(
         back_populates="actions",
         single_parent=True,
     )
diff --git a/backend/db/models/todo_category_order.py b/backend/db/models/todo_category_order.py
index d9271250..7dc6687e 100644
--- a/backend/db/models/todo_category_order.py
+++ b/backend/db/models/todo_category_order.py
@@ -1,9 +1,13 @@
+from typing import TYPE_CHECKING
 from sqlalchemy import CheckConstraint, Connection, ForeignKey, UniqueConstraint, event
 from sqlalchemy.orm import Mapped, Session, Mapper
 from sqlalchemy.orm import mapped_column
 from sqlalchemy.orm import relationship
 from db.models.base import BaseOrderedItem, BasesWithCreatedDate
 
+if TYPE_CHECKING:
+    from db.models.todo_category import TodoCategory
+
 
 class TodoCategoryOrder(BasesWithCreatedDate, BaseOrderedItem):
     __tablename__ = "todo_category_order"
@@ -21,7 +25,7 @@ class TodoCategoryOrder(BasesWithCreatedDate, BaseOrderedItem):
     right_id: Mapped[int | None] = mapped_column(
         ForeignKey("todo_category.id", ondelete="CASCADE"), nullable=True
     )
-    category: Mapped["TodoCategory"] = relationship(  # type: ignore
+    category: Mapped["TodoCategory"] = relationship(
         foreign_keys=[category_id], single_parent=True, back_populates="orders"
     )
 
diff --git a/backend/db/models/todo_item.py b/backend/db/models/todo_item.py
index 55690bae..82840966 100644
--- a/backend/db/models/todo_item.py
+++ b/backend/db/models/todo_item.py
@@ -8,7 +8,13 @@
 from db.models.todo_item_dependency import TodoItemDependency
 from db.models.todo_item_order import TodoItemOrder
 from sqlalchemy.ext.hybrid import hybrid_property
-from typing import List, Optional
+from typing import TYPE_CHECKING, List, Optional
+
+
+if TYPE_CHECKING:
+    from db.models.user import User
+    from db.models.tag import Tag
+    from db.models.todo_category import TodoCategory
 
 
 class TodoItem(BasesWithCreatedDate):
@@ -22,8 +28,7 @@ class TodoItem(BasesWithCreatedDate):
         ForeignKey("todo_category.id", ondelete="CASCADE")
     )
     due_date: Mapped[datetime | None] = mapped_column(DateTime(), nullable=True)
-    category: Mapped["TodoCategory"] = relationship(  # type: ignore
-        "TodoCategory",
+    category: Mapped["TodoCategory"] = relationship(
         back_populates="items",
         single_parent=True,
         cascade="all, delete-orphan",
@@ -32,29 +37,26 @@ class TodoItem(BasesWithCreatedDate):
         ForeignKey("user.id"), nullable=True
     )
     comments: Mapped[List[TodoItemComment]] = relationship(
-        "TodoItemComment",
         foreign_keys=[TodoItemComment.todo_id],
         back_populates="todo",
         cascade="all, delete-orphan",
     )
-    tags: Mapped[List["Tag"]] = relationship(  # type: ignore
+    tags: Mapped[List["Tag"]] = relationship(
         secondary="todo_item_tag_association", back_populates="todos"
     )
-    dependencies: Mapped[List["TodoItemDependency"]] = relationship(  # type: ignore
+    dependencies: Mapped[List["TodoItemDependency"]] = relationship(
         foreign_keys=[TodoItemDependency.todo_id],
         back_populates="todo",
         cascade="all, delete-orphan",
     )
     order: Mapped[TodoItemOrder | None] = relationship(
-        "TodoItemOrder",
         foreign_keys=[TodoItemOrder.todo_id],
         uselist=False,
         back_populates="todo",
         cascade="all, delete-orphan",
     )
 
-    marked_as_done_by: Mapped[Optional["User"]] = relationship(  # type: ignore
-        "User",
+    marked_as_done_by: Mapped[Optional["User"]] = relationship(
         uselist=False,
         back_populates="done_todos",
     )
diff --git a/backend/db/models/todo_item_comments.py b/backend/db/models/todo_item_comments.py
index 8631917e..e237c01e 100644
--- a/backend/db/models/todo_item_comments.py
+++ b/backend/db/models/todo_item_comments.py
@@ -1,9 +1,13 @@
+from typing import TYPE_CHECKING
 from sqlalchemy import ForeignKey, Text
 from sqlalchemy.orm import Mapped
 from sqlalchemy.orm import mapped_column
 from sqlalchemy.orm import relationship
 from db.models.base import BasesWithCreatedDate
 
+if TYPE_CHECKING:
+    from db.models.todo_item import TodoItem
+
 
 class TodoItemComment(BasesWithCreatedDate):
     __tablename__ = "todo_item_comment"
@@ -11,6 +15,6 @@ class TodoItemComment(BasesWithCreatedDate):
     id: Mapped[int] = mapped_column(primary_key=True, autoincrement=True)
     todo_id: Mapped[int] = mapped_column(ForeignKey("todo_item.id", ondelete="CASCADE"))
     message: Mapped[str] = mapped_column(Text(), nullable=False)
-    todo: Mapped["TodoItem"] = relationship(  # type: ignore
+    todo: Mapped["TodoItem"] = relationship(
         foreign_keys=[todo_id], single_parent=True, back_populates="comments"
     )
diff --git a/backend/db/models/todo_item_dependency.py b/backend/db/models/todo_item_dependency.py
index eac29398..238c320e 100644
--- a/backend/db/models/todo_item_dependency.py
+++ b/backend/db/models/todo_item_dependency.py
@@ -1,3 +1,4 @@
+from typing import TYPE_CHECKING
 from sqlalchemy import ForeignKey, UniqueConstraint, func, select
 from sqlalchemy.orm import Mapped
 from sqlalchemy.orm import mapped_column
@@ -5,6 +6,9 @@
 from db.models.base import BasesWithCreatedDate
 from sqlalchemy.ext.hybrid import hybrid_property
 
+if TYPE_CHECKING:
+    from db.models.todo_item import TodoItem
+
 
 class TodoItemDependency(BasesWithCreatedDate):
     __tablename__ = "todo_item_dependency"
@@ -15,15 +19,14 @@ class TodoItemDependency(BasesWithCreatedDate):
         ForeignKey("todo_item.id", ondelete="CASCADE")
     )
 
-    todo: Mapped["TodoItem"] = relationship(  # type: ignore
-        "TodoItem",
+    todo: Mapped["TodoItem"] = relationship(
         back_populates="dependencies",
         foreign_keys=[todo_id],
         single_parent=True,
     )
 
-    dependant_todo: Mapped["TodoItem"] = relationship(  # type: ignore
-        "TodoItem", foreign_keys=[dependant_todo_id], single_parent=True
+    dependant_todo: Mapped["TodoItem"] = relationship(
+        foreign_keys=[dependant_todo_id], single_parent=True
     )
 
     __table_args__ = (UniqueConstraint("todo_id", "dependant_todo_id"),)
diff --git a/backend/db/models/todo_item_order.py b/backend/db/models/todo_item_order.py
index 8f15d46c..6d28fd7b 100644
--- a/backend/db/models/todo_item_order.py
+++ b/backend/db/models/todo_item_order.py
@@ -1,9 +1,13 @@
-from sqlalchemy import CheckConstraint, Connection, ForeignKey, event
-from sqlalchemy.orm import Mapped, Session, Mapper
+from typing import TYPE_CHECKING
+from sqlalchemy import CheckConstraint, ForeignKey
+from sqlalchemy.orm import Mapped
 from sqlalchemy.orm import mapped_column
 from sqlalchemy.orm import relationship
 from db.models.base import BaseOrderedItem, BasesWithCreatedDate
 
+if TYPE_CHECKING:
+    from db.models.todo_item import TodoItem
+
 
 class TodoItemOrder(BasesWithCreatedDate, BaseOrderedItem):
     __tablename__ = "todo_item_order"
@@ -18,7 +22,7 @@ class TodoItemOrder(BasesWithCreatedDate, BaseOrderedItem):
     right_id: Mapped[int | None] = mapped_column(
         ForeignKey("todo_item.id", ondelete="CASCADE"), nullable=True, unique=True
     )
-    todo: Mapped["TodoItem"] = relationship(  # type: ignore
+    todo: Mapped["TodoItem"] = relationship(
         foreign_keys=[todo_id], single_parent=True, back_populates="order"
     )
 
diff --git a/backend/db/models/user.py b/backend/db/models/user.py
index 158d1aa8..7bc4fdd2 100644
--- a/backend/db/models/user.py
+++ b/backend/db/models/user.py
@@ -1,4 +1,4 @@
-from typing import List
+from typing import TYPE_CHECKING, List
 from sqlalchemy import String
 from sqlalchemy.orm import Mapped
 from sqlalchemy.orm import mapped_column
@@ -7,14 +7,24 @@
 from db.models.base import BasesWithCreatedDate
 
 
+if TYPE_CHECKING:
+    from db.models.project import Project
+    from db.models.todo_item import TodoItem
+    from db.models.project_user_association import ProjectUserAssociation
+
+
 class User(BasesWithCreatedDate):
     __tablename__ = "user"
     id: Mapped[int] = mapped_column(primary_key=True, autoincrement=True)
     username: Mapped[str] = mapped_column(String(30))
     password: Mapped[str] = mapped_column(String())
-    projects: Mapped[List["Project"]] = relationship(  # type: ignore
-        "Project", secondary="project_user_association", back_populates="users"
+    projects: Mapped[List["Project"]] = relationship(
+        secondary="project_user_association", back_populates="users"
     )
-    done_todos: Mapped[list["TodoItem"]] = relationship(  # type: ignore
-        "TodoItem", back_populates="marked_as_done_by"
+    done_todos: Mapped[List["TodoItem"]] = relationship(
+        back_populates="marked_as_done_by"
+    )
+
+    associations: Mapped[List["ProjectUserAssociation"]] = relationship(
+        back_populates="user", viewonly=True
     )
diff --git a/backend/db/models/user_project_permission.py b/backend/db/models/user_project_permission.py
index c59cbb6b..88104cbf 100644
--- a/backend/db/models/user_project_permission.py
+++ b/backend/db/models/user_project_permission.py
@@ -1,17 +1,21 @@
+from __future__ import annotations
+
+
 import enum
-from db.models.base import Base, BasesWithCreatedDate
+from typing import TYPE_CHECKING
+from db.models.base import Base
 from sqlalchemy import (
-    CheckConstraint,
-    Connection,
     Enum,
     ForeignKey,
     UniqueConstraint,
-    event,
 )
-from sqlalchemy.orm import Mapped, Session, Mapper
+from sqlalchemy.orm import Mapped
 from sqlalchemy.orm import mapped_column
 from sqlalchemy.orm import relationship
-from db.models.base import BaseOrderedItem, BasesWithCreatedDate
+
+
+if TYPE_CHECKING:
+    from db.models.project_user_association import ProjectUserAssociation
 
 
 class Permission(enum.StrEnum):
@@ -45,13 +49,12 @@ class UserProjectPermission(Base):
 
     id: Mapped[int] = mapped_column(primary_key=True, autoincrement=True)
     project_user_association_id: Mapped[int] = mapped_column(
-        ForeignKey("project_user_association.id", ondelete="CASCADE")
+        ForeignKey("project_user_association.id", ondelete="CASCADE"), nullable=False
     )
     permission: Mapped[Permission] = mapped_column(
         Enum(Permission, validate_strings=True)
     )
-    project_user_association: Mapped["ProjectUserAssociation"] = relationship(  # type: ignore
-        "ProjectUserAssociation",
+    project_user_association: Mapped["ProjectUserAssociation"] = relationship(
         back_populates="permissions",
         single_parent=True,
         cascade="all, delete-orphan",
diff --git a/backend/db/schemas/project.py b/backend/db/schemas/project.py
index ef4ba20a..b7cc1b57 100644
--- a/backend/db/schemas/project.py
+++ b/backend/db/schemas/project.py
@@ -1,7 +1,14 @@
 from dataclasses import dataclass
 import json
-from pydantic import BaseModel, ConfigDict, Field, field_validator
-
+from pydantic import (
+    BaseModel,
+    ConfigDict,
+    Field,
+    field_validator,
+    computed_field,
+)
+
+from db.models.base import Base
 from db.models.user_project_permission import Permission
 
 
@@ -36,12 +43,11 @@ class ProjectUpdate(ProjectCreate):
 
 class ProjectDetachAssociation(ProjectBase):
     project_id: int
+    user_id: int | None = Field(default=None)
 
 
-class ProjectAttachAssociation(ProjectBase):
-    project_id: int
-    username: str = Field(min_length=3, max_length=100)
-    permissions: list[Permission]
+class _Permissions(BaseModel):
+    permissions: list[Permission] = Field(min_length=1)
 
     @field_validator("permissions")
     @classmethod
@@ -54,15 +60,61 @@ def permissions_length(cls, permissions: list[Permission]) -> list[Permission]:
         if len(set(permissions)) != len(permissions):
             raise ValueError("repetitive values in permissions list is not allowed")
 
+        return list(set(permissions))
+
+    @field_validator("permissions", mode="after")
+    @classmethod
+    def has_other_permissions_with_owner_permission(
+        cls, permissions: list[Permission]
+    ) -> list[Permission]:
+        if (
+            len(list(filter(lambda perm: perm == Permission.ALL, permissions))) == 1
+            and len(permissions) > 1
+        ):
+            raise ValueError(
+                "if a user has the `ALL` permission then setting other permissions to them is not allowed"
+            )
         return permissions
 
 
+class ProjectAttachAssociation(ProjectBase, _Permissions):
+    project_id: int
+    username: str = Field(min_length=3, max_length=100)
+
+
 class ProjectAttachAssociationResponse(ProjectBase):
     project_id: int
     user_id: int
 
 
-class PartialUser(BaseModel):
+class ProjectUpdateUserPermissions(ProjectBase, _Permissions):
+    project_id: int
+    user_id: int
+
+
+class _UserProjectPermission(BaseModel):
+    permission: Permission
+
+    model_config = ConfigDict(from_attributes=True)
+
+
+class _ProjectUserAssociation(BaseModel):
+    user_id: int
+    project_id: int
+    permissions: list[_UserProjectPermission]
+
+    model_config = ConfigDict(from_attributes=True)
+
+
+class _PartialUser(BaseModel):
+    id: int
+    username: str
+    associations: list[_ProjectUserAssociation]
+
+    model_config = ConfigDict(from_attributes=True)
+
+
+class PartialUserWithPermission(_Permissions):
     id: int
     username: str
 
@@ -79,13 +131,68 @@ class ProjectPartialTag(BaseModel):
     id: int
     name: str
 
+    model_config = ConfigDict(from_attributes=True)
+
 
 class Project(ProjectBase):
     id: int
     title: str
     description: str
-    users: list[PartialUser]
     todo_categories: list[PartialTodoCategory]
     tags: list[ProjectPartialTag]
     done_todos_count: int
     pending_todos_count: int
+
+    users_: list[_PartialUser] = Field(exclude=True, default=[], alias="users")
+
+    @computed_field
+    @property
+    def users(self) -> list[PartialUserWithPermission]:
+        # TODO: think of another way, this way sux ass also is shitty performance wise,
+        # new solution should follow these:
+        # 1- for each project's user's permissions we should NOT perform a new query to the database (if user has 10000 associations then 9999 of them could be redundant :}) because accessing project.users[x].association is a new query then association.permissions is also another query
+        # 2- it should be universal, whenever I return a project schema, the permissions should be there per user (even in create we return the project which should contain the user who created it with the associated permission)
+        # (preferred) 3- removes the associations as a relationship property on User and Project models
+        return [
+            PartialUserWithPermission(
+                **user.model_dump(),
+                permissions=[
+                    perm.permission
+                    for association in filter(
+                        lambda association: association.project_id == self.id,
+                        user.associations,
+                    )
+                    for perm in association.permissions
+                ],
+            )
+            for user in self.users_
+        ]
+
+    @field_validator("users_", mode="before")
+    @classmethod
+    def ignore_if_users_provided(cls, value, validation_data):
+        if (
+            isinstance(value, list)
+            and len(value) > 0
+            and not isinstance(value[0], Base)
+        ):
+            return [
+                {
+                    "id": user["id"],
+                    "username": user["username"],
+                    "associations": [
+                        {
+                            "user_id": user["id"],
+                            "project_id": validation_data.data["id"],
+                            "permissions": [
+                                {"permission": Permission(perm)}
+                                for perm in user["permissions"]
+                            ],
+                        }
+                    ],
+                }
+                for user in value
+            ]
+        return value
+
+    model_config = ConfigDict(from_attributes=True)
diff --git a/backend/db/utils/project_crud.py b/backend/db/utils/project_crud.py
index 35e6bde2..0453f160 100644
--- a/backend/db/utils/project_crud.py
+++ b/backend/db/utils/project_crud.py
@@ -1,3 +1,4 @@
+import typing
 from sqlalchemy import func
 from sqlalchemy.exc import IntegrityError
 from db.models.project import Project
@@ -11,10 +12,15 @@
     ProjectDetachAssociation,
     ProjectRead,
     ProjectUpdate,
+    ProjectUpdateUserPermissions,
 )
 from sqlalchemy.orm import Session
 from db.schemas.todo_category import TodoCategoryCreate
-from db.utils.shared.permission_query import join_with_permission_query_if_required
+from db.utils.shared.permission_query import (
+    join_with_permission_query_if_required,
+    PermissionsType,
+    validate_item_exists_with_permissions,
+)
 from error.exceptions import ErrorCode, UserFriendlyError
 from db.models.todo_category import TodoCategory
 
@@ -60,6 +66,53 @@ def update(db: Session, project: ProjectUpdate, user_id: int):
     return db_item
 
 
+def update_user_permissions(
+    db: Session, permissions: ProjectUpdateUserPermissions, user_id: int
+):
+    # check if current user is owner
+    validate_project_belongs_to_user(
+        db, permissions.project_id, user_id, [Permission.ALL]
+    )
+
+    # check if the user we are changing has access to this project
+    try:
+        validate_project_belongs_to_user(
+            db, permissions.project_id, permissions.user_id, None
+        )
+    except UserFriendlyError as ex:
+        raise UserFriendlyError(
+            ErrorCode.USER_DOESNT_HAVE_ACCESS_TO_PROJECT,
+            "The user that you are trying to update doesn't have access to this project or doesn't exist",
+        )
+
+    association = (
+        db.query(ProjectUserAssociation)
+        .filter(
+            ProjectUserAssociation.project_id == permissions.project_id,
+            ProjectUserAssociation.user_id == permissions.user_id,
+        )
+        .first()
+    )
+
+    if association is None:
+        raise  # not possible, just to mute type-hints
+
+    db.query(UserProjectPermission).filter(
+        UserProjectPermission.project_user_association_id == association.id
+    ).delete()
+
+    for permission in permissions.permissions:
+        db.add(
+            UserProjectPermission(
+                project_user_association_id=association.id, permission=permission
+            )
+        )
+
+    db.commit()
+
+    return get_project(db, ProjectRead(project_id=permissions.project_id), user_id)
+
+
 def attach_to_user(db: Session, association: ProjectAttachAssociation, user_id: int):
     user = db.query(User).filter(User.username == association.username).first()
     if user is None:
@@ -106,12 +159,19 @@ def detach_from_user(db: Session, association: ProjectDetachAssociation, user_id
         db,
         association.project_id,
         user_id,
-        None,
+        [Permission.ALL] if association.user_id is not None else None,
     )
 
+    target_user_id = association.user_id if association.user_id is not None else user_id
+
+    if target_user_id != user_id:
+        validate_project_belongs_to_user(
+            db, association.project_id, target_user_id, None
+        )
+
     db.query(ProjectUserAssociation).filter(
         ProjectUserAssociation.project_id == association.project_id,
-        ProjectUserAssociation.user_id == user_id,
+        ProjectUserAssociation.user_id == target_user_id,
     ).delete()
 
     if (
@@ -157,33 +217,24 @@ def delete_project(db: Session, project_id: int):
 
 
 def get_project(db: Session, project: ProjectRead, user_id: int):
-    result = (
-        db.query(Project)
-        .filter(Project.id == project.project_id)
-        .join(Project.users)
-        .filter(User.id == user_id)
-        .first()
-    )
+    result = get_projects(db, user_id, project.project_id)
 
-    if result is None:
+    if len(result) == 0:
         raise UserFriendlyError(
             ErrorCode.PROJECT_NOT_FOUND,
             "project doesn't exist or doesn't belong to current user",
         )
 
-    return result
+    return result[0]
 
 
-def get_projects(db: Session, user_id: int):
-    result = (
-        db.query(Project)
-        .join(Project.users)
-        .filter(User.id == user_id)
-        .order_by(Project.id.asc())
-        .all()
-    )
+def get_projects(db: Session, user_id: int, project_id: int | None = None):
+    query = db.query(Project).join(Project.users).filter(User.id == user_id)
 
-    return result
+    if project_id is not None:
+        query = query.filter(Project.id == project_id)
+
+    return query.order_by(Project.id.asc()).all()
 
 
 def add_default_template_categories(db, project_id: int, user_id: int):
@@ -208,7 +259,7 @@ def validate_project_belongs_to_user(
     db: Session,
     project_id: int,
     user_id: int,
-    permissions: list[Permission] | None,
+    permissions: PermissionsType,
 ):
     query = (
         db.query(Project)
@@ -219,8 +270,9 @@ def validate_project_belongs_to_user(
 
     query = join_with_permission_query_if_required(query, permissions)
 
-    if query.count() < (len(permissions) if permissions is not None else 1):
-        raise UserFriendlyError(
-            ErrorCode.PROJECT_NOT_FOUND,
-            "project doesn't exist or doesn't belong to user or you don't have the permission to perform the requested action",
-        )
+    validate_item_exists_with_permissions(
+        query,
+        permissions,
+        ErrorCode.PROJECT_NOT_FOUND,
+        "project doesn't exist or doesn't belong to user or you don't have the permission to perform the requested action",
+    )
diff --git a/backend/db/utils/shared/permission_query.py b/backend/db/utils/shared/permission_query.py
index a995831c..80e4c76c 100644
--- a/backend/db/utils/shared/permission_query.py
+++ b/backend/db/utils/shared/permission_query.py
@@ -1,3 +1,4 @@
+import typing
 from sqlalchemy import and_
 from db.models.base import Base
 from db.models.project import Project
@@ -5,24 +6,43 @@
 from db.models.user_project_permission import Permission, UserProjectPermission
 from sqlalchemy.orm import Query
 
+from error.exceptions import ErrorCode, UserFriendlyError
+
+PermissionsType = typing.Sequence[Permission | set[Permission]] | None
+
 
 def join_with_permission_query_if_required[
     T: Base
-](query: Query[T], permissions: list[Permission] | None):
+](query: Query[T], permissions: PermissionsType):
+    """join the the current query with a permissions query
+
+    :param permissions: takes an array of permissions, for example: 1- has A and B = [A, B], 2- has (A or B) and C = [{A, B}, C]
+    Return: a new query with permissions query joined with it
+    """
+
     if permissions is None:
         return query
 
-    if len(permissions) == 0:
-        raise Exception("permissions length cannot be empty, did meant to pass None?")
+    expanded_permissions: list[Permission] = []
+    for permission in permissions:
+        if isinstance(permission, Permission):
+            expanded_permissions.append(permission)
+            continue
+        expanded_permissions.extend(typing.cast(tuple[Permission], permission))
 
-    if any(permission == Permission.ALL for permission in permissions):
-        permissions = [Permission.ALL]
+    if len(expanded_permissions) == 0:
+        raise Exception(
+            "expanded_permissions length cannot be empty, did meant to pass None?"
+        )
 
-    if any(permission != Permission.ALL for permission in permissions):
-        permissions = permissions + [Permission.ALL]
+    if any(permission == Permission.ALL for permission in expanded_permissions):
+        expanded_permissions = [Permission.ALL]
+
+    if any(permission != Permission.ALL for permission in expanded_permissions):
+        expanded_permissions = expanded_permissions + [Permission.ALL]
 
     # TODO: THERE SHOULD BE A BETTER WAY, but the purpose is that the query should already be joined with Projects table
-    # because if its not we are not sure whose permissions we are checking
+    # because if its not we are not sure whose expanded_permissions we are checking
     if not any(joins[0].parent.entity == Project for joins in query._setup_joins):  # type: ignore
         raise Exception("query should be already joined with Project table")
 
@@ -34,7 +54,20 @@ def join_with_permission_query_if_required[
         raise Exception("query is already joined with UserProjectPermission")
 
     query = query.join(ProjectUserAssociation.permissions).filter(
-        UserProjectPermission.permission.in_(permissions)
+        UserProjectPermission.permission.in_(expanded_permissions)
     )
 
     return query
+
+
+def validate_item_exists_with_permissions(
+    query: Query,
+    permissions: PermissionsType,
+    error_code: ErrorCode,
+    error_message: str,
+):
+    if query.count() < (len(permissions) if permissions is not None else 1):
+        raise UserFriendlyError(
+            error_code,
+            error_message,
+        )
diff --git a/backend/db/utils/tag_crud.py b/backend/db/utils/tag_crud.py
index b0c74bc5..0e09dee5 100644
--- a/backend/db/utils/tag_crud.py
+++ b/backend/db/utils/tag_crud.py
@@ -1,3 +1,4 @@
+import typing
 from sqlalchemy import and_
 from sqlalchemy.orm import Session
 from db.models.project import Project
@@ -16,7 +17,11 @@
     TagSearch,
     TagUpdate,
 )
-from db.utils.shared.permission_query import join_with_permission_query_if_required
+from db.utils.shared.permission_query import (
+    join_with_permission_query_if_required,
+    PermissionsType,
+    validate_item_exists_with_permissions,
+)
 from error.exceptions import ErrorCode, UserFriendlyError
 from db.utils.project_crud import (
     validate_project_belongs_to_user,
@@ -196,7 +201,7 @@ def validate_tag_belongs_to_user_by_name(
     tag_name: str,
     project_id: int | None,
     user_id: int,
-    permissions: list[Permission] | None,
+    permissions: PermissionsType,
 ):
     query = (
         db.query(Tag)
@@ -211,18 +216,19 @@ def validate_tag_belongs_to_user_by_name(
 
     query = join_with_permission_query_if_required(query, permissions)
 
-    if query.count() < (len(permissions) if permissions is not None else 1):
-        raise UserFriendlyError(
-            ErrorCode.TAG_NOT_FOUND,
-            "tag not found or doesn't belong to user or you don't have the permission to perform the requested action",
-        )
+    validate_item_exists_with_permissions(
+        query,
+        permissions,
+        ErrorCode.TAG_NOT_FOUND,
+        "tag not found or doesn't belong to user or you don't have the permission to perform the requested action",
+    )
 
 
 def validate_tag_belongs_to_user_by_id(
     db: Session,
     tag_id: int,
     user_id: int,
-    permissions: list[Permission] | None,
+    permissions: PermissionsType,
 ):
     query = (
         db.query(Tag)
@@ -233,8 +239,9 @@ def validate_tag_belongs_to_user_by_id(
     )
     query = join_with_permission_query_if_required(query, permissions)
 
-    if query.count() < (len(permissions) if permissions is not None else 1):
-        raise UserFriendlyError(
-            ErrorCode.TAG_NOT_FOUND,
-            "tag not found or doesn't belong to user or you don't have the permission to perform the requested action",
-        )
+    validate_item_exists_with_permissions(
+        query,
+        permissions,
+        ErrorCode.TAG_NOT_FOUND,
+        "tag not found or doesn't belong to user or you don't have the permission to perform the requested action",
+    )
diff --git a/backend/db/utils/todo_category_crud.py b/backend/db/utils/todo_category_crud.py
index 7ef0aa99..d237e8d8 100644
--- a/backend/db/utils/todo_category_crud.py
+++ b/backend/db/utils/todo_category_crud.py
@@ -1,3 +1,4 @@
+import typing
 from sqlalchemy import and_
 from db.models.project_user_association import ProjectUserAssociation
 from db.models.todo_category_action import Action, TodoCategoryAction
@@ -22,7 +23,11 @@
     TodoCategoryUpdateItem,
     TodoCategoryUpdateOrder,
 )
-from db.utils.shared.permission_query import join_with_permission_query_if_required
+from db.utils.shared.permission_query import (
+    join_with_permission_query_if_required,
+    PermissionsType,
+    validate_item_exists_with_permissions,
+)
 from error.exceptions import ErrorCode, UserFriendlyError
 from db.utils.project_crud import validate_project_belongs_to_user
 
@@ -118,25 +123,29 @@ def update_item(db: Session, category: TodoCategoryUpdateItem, user_id: int):
 
 
 def update_order(db: Session, moving_item: TodoCategoryUpdateOrder, user_id: int):
+    required_permissions = [
+        {Permission.UPDATE_TODO_CATEGORY, Permission.CREATE_TODO_CATEGORY}
+    ]
+
     validate_todo_category_belongs_to_user(
         db,
         moving_item.id,
         user_id,
-        [Permission.UPDATE_TODO_CATEGORY],
+        required_permissions,
     )
     if moving_item.left_id is not None:
         validate_todo_category_belongs_to_user(
-            db, moving_item.left_id, user_id, [Permission.UPDATE_TODO_CATEGORY]
+            db, moving_item.left_id, user_id, required_permissions
         )
     if moving_item.right_id is not None:
         validate_todo_category_belongs_to_user(
-            db, moving_item.right_id, user_id, [Permission.UPDATE_TODO_CATEGORY]
+            db, moving_item.right_id, user_id, required_permissions
         )
     validate_project_belongs_to_user(
         db,
         moving_item.project_id,
         user_id,
-        [Permission.UPDATE_TODO_CATEGORY],
+        required_permissions,
     )
 
     def create_order(id: int, left_id: int | None, right_id: int | None):
@@ -257,7 +266,10 @@ def detach_from_project(
 
 
 def validate_todo_category_belongs_to_user(
-    db: Session, category_id: int, user_id: int, permissions: list[Permission] | None
+    db: Session,
+    category_id: int,
+    user_id: int,
+    permissions: PermissionsType,
 ):
     query = (
         db.query(TodoCategory)
@@ -269,11 +281,12 @@ def validate_todo_category_belongs_to_user(
 
     query = join_with_permission_query_if_required(query, permissions)
 
-    if query.count() < (len(permissions) if permissions is not None else 1):
-        raise UserFriendlyError(
-            ErrorCode.TODO_CATEGORY_NOT_FOUND,
-            "todo category doesn't exist or doesn't belong to user or you don't have the permission to perform the requested action",
-        )
+    validate_item_exists_with_permissions(
+        query,
+        permissions,
+        ErrorCode.TODO_CATEGORY_NOT_FOUND,
+        "todo category doesn't exist or doesn't belong to user or you don't have the permission to perform the requested action",
+    )
 
 
 def _update_actions(
diff --git a/backend/db/utils/todo_item_comment_crud.py b/backend/db/utils/todo_item_comment_crud.py
index 9648b37f..c025fb18 100644
--- a/backend/db/utils/todo_item_comment_crud.py
+++ b/backend/db/utils/todo_item_comment_crud.py
@@ -1,3 +1,4 @@
+import typing
 import builtins
 from sqlalchemy.orm import Session
 from db.models.todo_item import TodoItem
@@ -9,6 +10,7 @@
     TodoCommentSearch,
     TodoCommentUpdate,
 )
+from db.utils.shared.permission_query import PermissionsType
 from error.exceptions import ErrorCode, UserFriendlyError
 from db.utils.todo_item_crud import validate_todo_item_belongs_to_user
 
@@ -68,7 +70,7 @@ def validate_todo_comment_belongs_to_user(
     db: Session,
     todo_comment_id: int,
     user_id: int,
-    permissions: builtins.list[Permission] | None,
+    permissions: PermissionsType,
 ):
     todo_comment = (
         db.query(TodoItemComment).filter(TodoItemComment.id == todo_comment_id).first()
@@ -87,4 +89,4 @@ def validate_todo_comment_belongs_to_user(
             db, todo_comment.todo_id, user_id, permissions
         )
     except UserFriendlyError:
-        raise error
+        raise
diff --git a/backend/db/utils/todo_item_crud.py b/backend/db/utils/todo_item_crud.py
index a1c989b3..b5432fd1 100644
--- a/backend/db/utils/todo_item_crud.py
+++ b/backend/db/utils/todo_item_crud.py
@@ -1,3 +1,4 @@
+import typing
 import datetime
 from types import NoneType
 from typing import List
@@ -29,7 +30,11 @@
     SearchTodoItemParams,
     TodoItemUpdateOrder,
 )
-from db.utils.shared.permission_query import join_with_permission_query_if_required
+from db.utils.shared.permission_query import (
+    PermissionsType,
+    join_with_permission_query_if_required,
+    validate_item_exists_with_permissions,
+)
 from error.exceptions import ErrorCode, UserFriendlyError
 from db.utils.project_crud import validate_project_belongs_to_user
 from db.utils.todo_category_crud import validate_todo_category_belongs_to_user
@@ -316,7 +321,10 @@ def remove_todo_dependency(
 
 
 def validate_todo_item_belongs_to_user(
-    db: Session, todo_id: int, user_id: int, permissions: list[Permission] | None
+    db: Session,
+    todo_id: int,
+    user_id: int,
+    permissions: PermissionsType,
 ):
     query = (
         db.query(TodoItem)
@@ -329,11 +337,12 @@ def validate_todo_item_belongs_to_user(
 
     query = join_with_permission_query_if_required(query, permissions)
 
-    if query.count() < (len(permissions) if permissions is not None else 1):
-        raise UserFriendlyError(
-            ErrorCode.TODO_NOT_FOUND,
-            "todo item doesn't exist or doesn't belong to user or you don't have the permission to perform the requested action",
-        )
+    validate_item_exists_with_permissions(
+        query,
+        permissions,
+        ErrorCode.TODO_NOT_FOUND,
+        "todo item doesn't exist or doesn't belong to user or you don't have the permission to perform the requested action",
+    )
 
 
 def _perform_actions(
@@ -399,7 +408,10 @@ def _update_done_status(
 
 
 def _validate_dependencies_are_resolved(
-    db: Session, todo: TodoItem, user_id: int, permissions: list[Permission]
+    db: Session,
+    todo: TodoItem,
+    user_id: int,
+    permissions: PermissionsType,
 ):
     for dependency in todo.dependencies:
         try:
diff --git a/backend/error/exceptions.py b/backend/error/exceptions.py
index 1b30e40c..09f63a43 100644
--- a/backend/error/exceptions.py
+++ b/backend/error/exceptions.py
@@ -23,6 +23,7 @@ class ErrorCode(StrEnum):
     CANT_CHANGE_ACTION = auto()
     ACTION_PREVENTED_TODO_UPDATE = auto()
     PERMISSION_DENIED = auto()
+    USER_DOESNT_HAVE_ACCESS_TO_PROJECT = auto()
 
 
 class UserFriendlyError(Exception):
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
index c60a8c10..8bc6e864 100644
--- a/frontend/.prettierrc
+++ b/frontend/.prettierrc
@@ -4,6 +4,5 @@
 	"trailingComma": "none",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
-	"pluginSearchDirs": ["."],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }
diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
index 814ba098..f9b6f53c 100644
--- a/frontend/.vscode/settings.json
+++ b/frontend/.vscode/settings.json
@@ -6,8 +6,10 @@
 		"felteerror",
 		"feltesuccess",
 		"fortawesome",
+		"Fwal",
 		"submitclienterror",
 		"submitended",
+		"submitfailed",
 		"submitredirected",
 		"submitstarted",
 		"submitsucceeded",
diff --git a/frontend/package.json b/frontend/package.json
index e13ad8f0..43454f7f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -45,7 +45,7 @@
 		"prettier": "^3.0.3",
 		"prettier-plugin-svelte": "^3.1.2",
 		"prettier-plugin-tailwindcss": "^0.5.5",
-		"svelte": "^5.0.0-next.76",
+		"svelte": "^5.0.0-next.80",
 		"svelte-check": "^3.6.7",
 		"svelte-fa": "^4.0.2",
 		"tailwindcss": "^3.3.3",
diff --git a/frontend/src/lib/actions/form/submit-types.ts b/frontend/src/lib/actions/form/submit-types.ts
index 1092ca22..8b729494 100644
--- a/frontend/src/lib/actions/form/submit-types.ts
+++ b/frontend/src/lib/actions/form/submit-types.ts
@@ -1,11 +1,16 @@
 import type { SubmitFunction } from '@sveltejs/kit';
 import type { z } from 'zod';
 import type { ValidatorOptions } from './validator-types';
-import type { StandardFormActionNames } from './utils';
+import type {
+	ParsedFormData,
+	StandardFormActionError,
+	StandardFormActionNames,
+	getFormErrors
+} from './utils';
 
 export type EnhanceOptions<
 	TSchema extends z.ZodTypeAny,
-	TFormAction,
+	TFormAction extends StandardFormActionError,
 	TKey extends StandardFormActionNames<TFormAction> = never
 > = {
 	form: TFormAction;
@@ -23,7 +28,7 @@ export type EnhanceOptions<
 };
 
 export type FormActionResultType<
-	TFormAction,
+	TFormAction extends StandardFormActionError,
 	TKey extends StandardFormActionNames<TFormAction> = never
 > = TFormAction extends { response: infer TResult }
 	? Extract<TFormAction, { response: TResult }>['response']
@@ -33,13 +38,16 @@ export type FormActionResultType<
 
 export type SubmitEvents<
 	TSchema extends z.ZodTypeAny,
-	TFormAction,
+	TFormAction extends StandardFormActionError,
 	TKey extends StandardFormActionNames<TFormAction> = never
 > = {
 	'on:submitstarted'?: (e: SubmitStartEventType) => void;
 	'on:submitended'?: (e: SubmitEndedEventType) => void;
 	'on:submitredirected'?: (e: SubmitRedirectedEventType<TSchema>) => void;
 	'on:submitsucceeded'?: (e: SubmitSucceededEventType<TSchema, TFormAction, TKey>) => void;
+	'on:submitfailed'?: (
+		e: SubmitFailedEventType<TFormAction>
+	) => void /*** called on both client-side and server-side errors*/;
 };
 
 export type SubmitStartEventType = CustomEvent<void>;
@@ -48,14 +56,20 @@ export type SubmitEndedEventType = CustomEvent<void>;
 
 export type SubmitRedirectedEventType<TSchema extends z.ZodTypeAny> = CustomEvent<{
 	redirectUrl: URL;
-	formData: z.infer<TSchema>;
+	formData: ParsedFormData;
 }>;
 
 export type SubmitSucceededEventType<
 	TSchema extends z.ZodTypeAny,
-	TFormAction,
+	TFormAction extends StandardFormActionError,
 	TKey extends StandardFormActionNames<TFormAction> = never
 > = CustomEvent<{
 	response: FormActionResultType<TFormAction, TKey>;
-	formData: z.infer<TSchema>;
+	formData: ParsedFormData;
+	parsedFormData: z.infer<TSchema>;
+}>;
+
+export type SubmitFailedEventType<TFormAction extends StandardFormActionError> = CustomEvent<{
+	formData: ParsedFormData;
+	error: ReturnType<typeof getFormErrors<TFormAction>>;
 }>;
diff --git a/frontend/src/lib/actions/form/submit.ts b/frontend/src/lib/actions/form/submit.ts
index 9dae08f1..8384f20f 100644
--- a/frontend/src/lib/actions/form/submit.ts
+++ b/frontend/src/lib/actions/form/submit.ts
@@ -10,11 +10,17 @@ import type {
 	SubmitRedirectedEventType,
 	SubmitStartEventType,
 	SubmitEndedEventType,
-	SubmitSucceededEventType
+	SubmitSucceededEventType,
+	SubmitFailedEventType
 } from './submit-types';
 import { validate } from './validator';
-import type { ValidatorErrorEvent } from './validator-types';
-import type { StandardFormActionNames } from './utils';
+import type { SubmitClientErrorEventType, ValidatorErrorEvents } from './validator-types';
+import {
+	convertFormDataToObject,
+	getFormErrors,
+	type StandardFormActionError,
+	type StandardFormActionNames
+} from './utils';
 import { invalidateAll } from '$app/navigation';
 
 export function superEnhance(
@@ -25,20 +31,24 @@ export function superEnhance(
 >;
 export function superEnhance<
 	TSchema extends z.ZodTypeAny,
-	TFormAction,
+	TFormAction extends StandardFormActionError,
 	TKey extends StandardFormActionNames<TFormAction> = never
 >(
 	node: HTMLFormElement,
 	options: EnhanceOptions<TSchema, TFormAction, TKey>
 ): ActionReturn<
 	EnhanceOptions<TSchema, TFormAction, TKey>,
-	ValidatorErrorEvent<TSchema> & SubmitEvents<TSchema, TFormAction, TKey>
+	ValidatorErrorEvents<TSchema> & SubmitEvents<TSchema, TFormAction, TKey>
 >;
 export function superEnhance<
 	TSchema extends z.ZodTypeAny,
-	TFormAction = never,
+	TFormAction extends StandardFormActionError = never,
 	TKey extends StandardFormActionNames<TFormAction> = never
 >(node: HTMLFormElement, options?: Partial<EnhanceOptions<TSchema, TFormAction, TKey>>) {
+	if (options?.action && !node.action.endsWith(`?/${options.action.toString()}`)) {
+		throw new Error('form.action should end with the passed action in enhancer options');
+	}
+
 	const handleSubmit =
 		options?.submit ?? _defaultSubmitHandler<TSchema, TFormAction, TKey>(node, options);
 
@@ -46,18 +56,25 @@ export function superEnhance<
 	const enhancer = enhance(node, handleSubmit);
 	node.addEventListener('reset', _superResetHandler);
 
+	function _handleClientSideError(event: Event) {
+		_fireSubmitFailureForClientSideError(node, event as SubmitClientErrorEventType<TSchema>);
+	}
+
+	node.addEventListener('submitclienterror', _handleClientSideError);
+
 	return {
 		destroy() {
 			validator?.destroy && validator.destroy();
 			enhancer.destroy();
 			node.removeEventListener('reset', _superResetHandler);
+			node.removeEventListener('submitclienterror', _handleClientSideError);
 		}
 	};
 }
 
 function _defaultSubmitHandler<
 	TSchema extends z.ZodTypeAny,
-	TFormAction,
+	TFormAction extends StandardFormActionError,
 	TKey extends StandardFormActionNames<TFormAction> = never
 >(
 	node: HTMLFormElement,
@@ -74,11 +91,23 @@ function _defaultSubmitHandler<
 				console.debug('s-form-result');
 				console.debug(_getResultFromFormAction(result.data, options));
 				console.debug('e-form-result');
+
+				const parsedFormData = await options?.validator?.schema.safeParseAsync(
+					convertFormDataToObject(formData)
+				);
+
+				if (parsedFormData && !parsedFormData?.success) {
+					throw new Error(
+						"for some reason server-side validations succeeded but the client-side validations didn't, OR the client data changed since the form has been submitted"
+					);
+				}
+
 				node.dispatchEvent(
 					new CustomEvent('submitsucceeded', {
 						detail: {
 							response: _getResultFromFormAction(result.data, options),
-							formData: Object.fromEntries(formData) as z.infer<TSchema>
+							formData: convertFormDataToObject(formData),
+							parsedFormData: parsedFormData?.data
 						}
 					}) satisfies SubmitSucceededEventType<TSchema, TFormAction, TKey>
 				);
@@ -89,10 +118,28 @@ function _defaultSubmitHandler<
 							redirectUrl: result.location.startsWith('/')
 								? new URL(location.origin + result.location)
 								: new URL(result.location),
-							formData: Object.fromEntries(formData)
+							formData: convertFormDataToObject(formData)
 						}
 					}) satisfies SubmitRedirectedEventType<TSchema>
 				);
+			} else if (result.type == 'error') {
+				node.dispatchEvent(
+					new CustomEvent('submitfailed', {
+						detail: {
+							error: getFormErrors(result),
+							formData: convertFormDataToObject(formData)
+						}
+					}) satisfies SubmitFailedEventType<TFormAction>
+				);
+			} else if (result.type == 'failure') {
+				node.dispatchEvent(
+					new CustomEvent('submitfailed', {
+						detail: {
+							error: getFormErrors(result.data as any),
+							formData: convertFormDataToObject(formData)
+						}
+					}) satisfies SubmitFailedEventType<TFormAction>
+				);
 			}
 
 			if (options?.ignoreSamePageConstraint) {
@@ -120,7 +167,7 @@ function _defaultSubmitHandler<
 
 function _getResultFromFormAction<
 	TSchema extends z.ZodTypeAny,
-	TFormAction,
+	TFormAction extends StandardFormActionError,
 	TKey extends StandardFormActionNames<TFormAction> = never
 >(
 	data: Record<string, any> | undefined,
@@ -137,6 +184,23 @@ function _getResultFromFormAction<
 	return data[options.action as string]['response'];
 }
 
+function _fireSubmitFailureForClientSideError<
+	TSchema extends z.ZodTypeAny,
+	TFormAction extends StandardFormActionError
+>(node: HTMLFormElement, event: SubmitClientErrorEventType<TSchema>) {
+	node.dispatchEvent(
+		new CustomEvent('submitfailed', {
+			detail: {
+				error: {
+					errors: event.detail.errors as any,
+					message: 'Invalid form, please review your inputs'
+				},
+				formData: event.detail.formData
+			}
+		}) satisfies SubmitFailedEventType<TFormAction>
+	);
+}
+
 function _superResetHandler(event: Event) {
 	const node = event.target as HTMLFormElement;
 	_focusOnFirstVisibleInput(node);
diff --git a/frontend/src/lib/actions/form/validator-types.ts b/frontend/src/lib/actions/form/validator-types.ts
index 73f88d9c..b5877df1 100644
--- a/frontend/src/lib/actions/form/validator-types.ts
+++ b/frontend/src/lib/actions/form/validator-types.ts
@@ -1,3 +1,4 @@
+import type { ParsedFormData } from '$lib/actions/form/utils';
 import type { z } from 'zod';
 
 export type ValidatorErrorsType<T extends z.ZodTypeAny> = z.typeToFlattenedError<
@@ -8,10 +9,11 @@ export type ValidatorOptions<TSchema extends z.ZodTypeAny> = {
 	schema: TSchema;
 };
 
-export type ValidatorErrorEvent<TSchema extends z.ZodTypeAny> = {
-	'on:submitclienterror': (e: CustomEvent<ValidatorErrorsType<TSchema>>) => void;
+export type ValidatorErrorEvents<TSchema extends z.ZodTypeAny> = {
+	'on:submitclienterror': (e: SubmitClientErrorEventType<TSchema>) => void;
 };
 
-export type SubmitClientErrorEventType<TSchema extends z.ZodTypeAny> = CustomEvent<
-	ValidatorErrorsType<TSchema>
->;
+export type SubmitClientErrorEventType<TSchema extends z.ZodTypeAny> = CustomEvent<{
+	errors: ValidatorErrorsType<TSchema>;
+	formData: ParsedFormData;
+}>;
diff --git a/frontend/src/lib/actions/form/validator.ts b/frontend/src/lib/actions/form/validator.ts
index e1da9470..0295f546 100644
--- a/frontend/src/lib/actions/form/validator.ts
+++ b/frontend/src/lib/actions/form/validator.ts
@@ -3,7 +3,7 @@ import type { z } from 'zod';
 import { convertFormDataToObject } from './utils';
 import type {
 	ValidatorOptions,
-	ValidatorErrorEvent,
+	ValidatorErrorEvents,
 	ValidatorErrorsType,
 	SubmitClientErrorEventType
 } from './validator-types';
@@ -11,7 +11,7 @@ import type {
 export function validate<TSchema extends z.ZodTypeAny>(
 	node: HTMLFormElement,
 	options: ValidatorOptions<TSchema>
-): ActionReturn<ValidatorOptions<TSchema>, ValidatorErrorEvent<TSchema>> {
+): ActionReturn<ValidatorOptions<TSchema>, ValidatorErrorEvents<TSchema>> {
 	const formClientSideValidateHandler = async (event: SubmitEvent) => {
 		if (!options) {
 			return;
@@ -27,7 +27,7 @@ export function validate<TSchema extends z.ZodTypeAny>(
 		event.stopImmediatePropagation();
 		node.dispatchEvent(
 			new CustomEvent('submitclienterror', {
-				detail: errors
+				detail: { errors, formData: convertFormDataToObject(new FormData(node)) }
 			}) satisfies SubmitClientErrorEventType<TSchema>
 		);
 	};
diff --git a/frontend/src/lib/components/Confirm.svelte b/frontend/src/lib/components/Confirm.svelte
index e1d9cf6f..a7782e39 100644
--- a/frontend/src/lib/components/Confirm.svelte
+++ b/frontend/src/lib/components/Confirm.svelte
@@ -1,4 +1,6 @@
 <script lang="ts" context="module">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
 	export type Events = {
 		onConfirmed?: () => void;
 		onCanceled?: () => void;
@@ -7,6 +9,7 @@
 	export type Props = {
 		confirmText?: string;
 		cancelText?: string;
+		confirmButtonType?: HTMLButtonAttributes['type'];
 	} & Events;
 </script>
 
@@ -14,6 +17,7 @@
 	const {
 		confirmText = 'confirm',
 		cancelText = 'cancel',
+		confirmButtonType = 'button',
 		onConfirmed,
 		onCanceled
 	}: Props = $props();
@@ -30,7 +34,7 @@
 </script>
 
 <div
-	class="glass absolute left-0 top-0 z-10 flex h-full w-full items-center justify-center gap-2 rounded-2xl bg-base-300"
+	class="glass absolute left-0 top-0 z-20 flex h-full w-full items-center justify-center gap-2 rounded-2xl bg-base-300"
 	class:hidden={!visible}
 	data-testid="confirm-wrapper"
 >
@@ -40,6 +44,7 @@
 			hide();
 			onCanceled?.();
 		}}
+		type="button"
 		data-testid="confirm-cancel"
 	>
 		{cancelText}
@@ -51,6 +56,7 @@
 			hide();
 			onConfirmed?.();
 		}}
+		type={confirmButtonType}
 		data-testid="confirm-accept"
 	>
 		{confirmText}
diff --git a/frontend/src/lib/components/DarkModeSwitch.svelte b/frontend/src/lib/components/DarkModeSwitch.svelte
index 19eeaa69..d941a0f3 100644
--- a/frontend/src/lib/components/DarkModeSwitch.svelte
+++ b/frontend/src/lib/components/DarkModeSwitch.svelte
@@ -14,13 +14,13 @@
 
 <label class="swap swap-rotate">
 	<!-- this hidden checkbox controls the state -->
-	<input type="checkbox" />
+	<input type="checkbox" class="theme-controller" />
 
 	<span class="swap-on" data-key="theme" data-set-theme="dark">
-		<Fa icon={faSun} class="h-5 w-10 fill-current" />
+		<Fa icon={faSun} class="w-10 fill-current" />
 	</span>
 
 	<span class="swap-off fill-current" data-key="theme" data-set-theme="light">
-		<Fa icon={faMoon} class="h-5 w-10 fill-current" />
+		<Fa icon={faMoon} class="w-10 fill-current" />
 	</span>
 </label>
diff --git a/frontend/src/lib/components/Drawer.svelte b/frontend/src/lib/components/Drawer.svelte
index 1276f4ee..ec8deff5 100644
--- a/frontend/src/lib/components/Drawer.svelte
+++ b/frontend/src/lib/components/Drawer.svelte
@@ -3,9 +3,10 @@
 	import Fa from 'svelte-fa';
 
 	import { faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
+	import { drawer } from '$lib/stores/drawer';
 	import type { Snippet } from 'svelte';
 
-	type SnippetParams = [{ closeDrawer: () => void }];
+	export type SnippetParams = [{ closeDrawer: () => void }];
 
 	export type Props = {
 		id: string;
@@ -60,6 +61,9 @@
 			{/snippet}
 
 			{#snippet end()}
+				{#each drawer.navbar.end as snippet}
+					{@render snippet({ closeDrawer })}
+				{/each}
 				{#if navbarEnd}
 					{@render navbarEnd({ closeDrawer })}
 				{/if}
diff --git a/frontend/src/lib/components/Fragment.svelte b/frontend/src/lib/components/Fragment.svelte
deleted file mode 100644
index 4fa864ce..00000000
--- a/frontend/src/lib/components/Fragment.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<slot />
diff --git a/frontend/src/lib/components/Spinner.svelte b/frontend/src/lib/components/Spinner.svelte
index fd8b94fd..6c89fe61 100644
--- a/frontend/src/lib/components/Spinner.svelte
+++ b/frontend/src/lib/components/Spinner.svelte
@@ -5,13 +5,32 @@
 </script>
 
 <script lang="ts">
-	const { visible = false }: Props = $props();
+	import { untrack } from 'svelte';
+
 	// it will position absolutely to the nearest position: relative parent.
+	const { visible = false }: Props = $props();
+
+	let _internalVisible = $state(visible);
+
+	$effect(() => {
+		visible;
+		untrack(() => {
+			_internalVisible = visible;
+		});
+	});
+
+	export function show() {
+		_internalVisible = true;
+	}
+
+	export function hide() {
+		_internalVisible = false;
+	}
 </script>
 
 <div
 	class="align-center glass absolute left-0 top-0 z-10 flex h-full w-full justify-center rounded-lg bg-base-300 opacity-80"
-	class:hidden={!visible}
+	class:hidden={!_internalVisible}
 	data-testid="spinner-loading-state"
 >
 	<span class="loading loading-spinner loading-md dark:text-black" />
diff --git a/frontend/src/lib/components/buttons/LoadingButton.svelte b/frontend/src/lib/components/buttons/LoadingButton.svelte
index 9b6667d5..0ccd6f17 100644
--- a/frontend/src/lib/components/buttons/LoadingButton.svelte
+++ b/frontend/src/lib/components/buttons/LoadingButton.svelte
@@ -1,17 +1,29 @@
 <script lang="ts" context="module">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
 	export type Props = {
 		text: string;
 		loading?: boolean;
-		type?: 'submit' | 'button';
-		class?: string;
-	};
+	} & Partial<Exclude<HTMLButtonAttributes, 'text'>>;
 </script>
 
 <script lang="ts">
-	const { text, loading = false, type = 'button', class: className = '' }: Props = $props();
+	const {
+		text,
+		loading = false,
+		type = 'button',
+		class: className = '',
+		...restProps
+	}: Props = $props();
 </script>
 
-<button on:click class="btn disabled:cursor-not-allowed {className}" disabled={loading} {type}>
+<button
+	on:click
+	class="btn disabled:cursor-not-allowed {className}"
+	disabled={loading}
+	{type}
+	{...restProps}
+>
 	{#if loading}
 		<span class="loading loading-dots loading-sm" />
 	{:else}
diff --git a/frontend/src/lib/components/forms/EnhancedForm.svelte b/frontend/src/lib/components/forms/EnhancedForm.svelte
index 294202ce..24e246a9 100644
--- a/frontend/src/lib/components/forms/EnhancedForm.svelte
+++ b/frontend/src/lib/components/forms/EnhancedForm.svelte
@@ -6,6 +6,7 @@
 		EnhanceOptions,
 		StandardFormActionError,
 		StandardFormActionNames,
+		SubmitFailedEventType,
 		SubmitRedirectedEventType,
 		SubmitStartEventType,
 		SubmitSucceededEventType,
@@ -13,7 +14,6 @@
 	} from '$lib';
 	import { z } from 'zod';
 	import { getFormErrors, superEnhance } from '$lib/actions/form';
-	import { untrack } from 'svelte';
 	import type { Snippet } from 'svelte';
 
 	type ComponentStates = 'submitting' | 'submit-successful' | 'none';
@@ -26,6 +26,10 @@
 		onSubmitSucceeded?: (
 			event: SubmitSucceededEventType<TSchema, TFormAction, TKey>['detail']
 		) => void;
+		/**
+		 * called on both client-side and server-side errors
+		 */
+		onSubmitFailed?: (event: SubmitFailedEventType<TFormAction>['detail']) => void;
 		onSubmitStarted?: (event: SubmitStartEventType['detail']) => void;
 		onRedirected?: (event: SubmitRedirectedEventType<TSchema>['detail']) => void;
 		onClientSideValidationErrors?: (event: ValidatorErrorsType<TSchema>) => void;
@@ -40,11 +44,12 @@
 		enhancerConfig: EnhanceOptions<TSchema, TFormAction, TKey>;
 		actions: Snippet<[{ loading: boolean; reset: () => void }]>;
 		inputs: Snippet<
-			[{ formErrors: ReturnType<typeof getFormErrors<TFormAction>>; reset: () => void }]
+			[{ formErrors: ReturnType<typeof getFormErrors<TFormAction>> | undefined; reset: () => void }]
 		>;
 		defaultActions?: Snippet<[{ reset: () => void }]>;
 		footer?: Snippet;
 		method?: 'post' | 'get';
+		showErrors?: boolean;
 		successfulMessage?: string;
 		showResetButton?: boolean;
 		formWrapperClasses?: string;
@@ -62,11 +67,13 @@
 		enhancerConfig,
 		successfulMessage = '',
 		method = 'post',
+		showErrors = true,
 		showResetButton = true,
 		formWrapperClasses = '',
 		inputsWrapperClasses = '',
 		actionsWrapperClasses = '',
 		onSubmitSucceeded,
+		onSubmitFailed,
 		onSubmitStarted,
 		onClientSideValidationErrors,
 		onRedirected,
@@ -77,14 +84,7 @@
 
 	let formElement = $state<HTMLFormElement | null>(null);
 	let componentState = $state<ComponentStates>('none');
-	let formErrors = $state(getFormErrors(enhancerConfig.form));
-
-	$effect(() => {
-		enhancerConfig.form;
-		untrack(() => {
-			formErrors = getFormErrors(enhancerConfig.form);
-		});
-	});
+	let formErrors = $state<ReturnType<typeof getFormErrors<TFormAction>>>();
 
 	export function resetForm() {
 		enhancerConfig.resetOnSubmit !== false && formElement?.reset();
@@ -101,12 +101,7 @@
 	{action}
 	use:superEnhance={enhancerConfig}
 	on:submitclienterror={(e) => {
-		formErrors = {
-			errors: e.detail as any,
-			message: 'Invalid form, please review your inputs'
-		};
-		componentState = 'none';
-		onClientSideValidationErrors?.(e.detail);
+		onClientSideValidationErrors?.(e.detail.errors);
 	}}
 	on:submitstarted={(e) => {
 		componentState = 'submitting';
@@ -123,6 +118,11 @@
 	on:submitredirected={async (e) => {
 		onRedirected?.(e.detail);
 	}}
+	on:submitfailed={async (e) => {
+		componentState = 'none';
+		formErrors = e.detail.error;
+		onSubmitFailed?.(e.detail);
+	}}
 	bind:this={formElement}
 	{method}
 	class="w-full {formWrapperClasses}"
@@ -133,7 +133,8 @@
 			type="success"
 			message={componentState == 'submit-successful' ? successfulMessage : ''}
 		/>
-		<Alert class="mb-1" type="error" message={formErrors?.message} />
+		<Alert class="mb-1" type="error" message={showErrors ? formErrors?.message : null} />
+
 		{@render inputs({ formErrors: formErrors, reset: resetForm })}
 		<div class="mt-1 flex w-full flex-wrap items-start justify-end gap-2 {actionsWrapperClasses}">
 			{#if showResetButton}
diff --git a/frontend/src/lib/components/forms/FormInput.svelte b/frontend/src/lib/components/forms/FormInput.svelte
index 815117df..4fba2fd2 100644
--- a/frontend/src/lib/components/forms/FormInput.svelte
+++ b/frontend/src/lib/components/forms/FormInput.svelte
@@ -77,7 +77,7 @@
 		class="flex items-start {labelClasses} {type == 'checkbox' || type == 'toggle'
 			? 'max-w-full cursor-pointer flex-row items-center justify-between gap-2 rounded-md p-2'
 			: 'flex-col'}"
-		for={restProps.id ?? name}
+		for={restProps.id}
 	>
 		{#if !hideLabel}
 			<p class="label label-text">{label}</p>
@@ -85,7 +85,7 @@
 		{#if type == 'text-area'}
 			<textarea
 				bind:this={input}
-				id={restProps.id ?? name}
+				id={restProps.id}
 				{name}
 				placeholder={label}
 				class="{defaultInputClasses} {inputClasses}"
@@ -96,7 +96,7 @@
 			<input
 				bind:this={input}
 				type={type == 'toggle' ? 'checkbox' : type}
-				id={restProps.id ?? name}
+				id={restProps.id}
 				{name}
 				placeholder={label}
 				class="{defaultInputClasses} {inputClasses}"
diff --git a/frontend/src/lib/components/navbar/Navbar.svelte b/frontend/src/lib/components/navbar/Navbar.svelte
index ea18950a..c7d0865d 100644
--- a/frontend/src/lib/components/navbar/Navbar.svelte
+++ b/frontend/src/lib/components/navbar/Navbar.svelte
@@ -1,5 +1,4 @@
 <script lang="ts" context="module">
-	import DarkModeSwitch from '$components/DarkModeSwitch.svelte';
 	import type { Snippet } from 'svelte';
 
 	export type Props = {
@@ -34,8 +33,7 @@
 			</ul>
 		</div>
 		<div class="navbar-end">
-			<DarkModeSwitch />
-			<ul class="menu px-1">
+			<ul class="menu menu-horizontal flex-nowrap items-center px-1">
 				{#if end}
 					{@render end()}
 				{/if}
diff --git a/frontend/src/lib/components/popups/Fwal.svelte b/frontend/src/lib/components/popups/Fwal.svelte
new file mode 100644
index 00000000..192f75ad
--- /dev/null
+++ b/frontend/src/lib/components/popups/Fwal.svelte
@@ -0,0 +1,11 @@
+<script lang="ts" context="module">
+	export type Props = {
+		message: string;
+	};
+</script>
+
+<script lang="ts">
+	const { message }: Props = $props();
+</script>
+
+<p class="text font-bold">{message}</p>
diff --git a/frontend/src/lib/components/popups/Modal.svelte b/frontend/src/lib/components/popups/Modal.svelte
index caede977..2c6c289c 100644
--- a/frontend/src/lib/components/popups/Modal.svelte
+++ b/frontend/src/lib/components/popups/Modal.svelte
@@ -1,4 +1,5 @@
 <script lang="ts" context="module">
+	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	export type Events = {
@@ -6,12 +7,18 @@
 		onOpened?: () => void;
 	};
 
+	export type Slots = {
+		body?: Snippet<[{ show: () => void; close: () => void }]>;
+		actions?: Snippet;
+	};
+
 	export type Props = {
 		title?: string;
 		dialogProps?: Partial<HTMLAttributes<HTMLDialogElement>>;
 		wrapperClasses?: string;
 		class?: string;
-	} & Events;
+	} & Slots &
+		Events;
 </script>
 
 <script lang="ts">
@@ -20,6 +27,8 @@
 		dialogProps = {},
 		wrapperClasses = '',
 		class: modalBodyClasses = '',
+		actions,
+		body,
 		onOpened,
 		onClosed
 	}: Props = $props();
@@ -55,12 +64,17 @@
 >
 	<div class="modal-box {modalBodyClasses}">
 		<h3 class="mb-3 text-lg font-bold">{title}</h3>
-		<slot name="body" {show} {close} />
+		{#if body}
+			{@render body({ show, close })}
+		{/if}
 		<div class="modal-action">
 			<form method="dialog">
-				<slot name="actions" />
-				<!-- if there is a button in form, it will close the modal -->
-				<button class="btn btn-neutral">Close</button>
+				{#if actions}
+					{@render actions()}
+				{:else}
+					<!-- if there is a button in form, it will close the modal -->
+					<button class="btn btn-neutral">Close</button>
+				{/if}
 			</form>
 		</div>
 	</div>
diff --git a/frontend/src/lib/components/popups/MultiModal.svelte b/frontend/src/lib/components/popups/MultiStepModal.svelte
similarity index 61%
rename from frontend/src/lib/components/popups/MultiModal.svelte
rename to frontend/src/lib/components/popups/MultiStepModal.svelte
index 07debdba..6c3ec81a 100644
--- a/frontend/src/lib/components/popups/MultiModal.svelte
+++ b/frontend/src/lib/components/popups/MultiStepModal.svelte
@@ -4,11 +4,12 @@
 
 	export type Props = {
 		class?: string;
+		closeButtonText?: string;
 	};
 </script>
 
 <script lang="ts">
-	const { class: className = '' }: Props = $props();
+	const { class: className = '', closeButtonText = 'close' }: Props = $props();
 
 	let modal = $state<Modal | null>(null);
 	const currentStep = $derived(
@@ -33,16 +34,19 @@
 </script>
 
 <Modal title={currentStep?.title} class={className} onClosed={handleClose} bind:this={modal}>
-	<svelte:component this={currentStep?.component} slot="body" {...componentProps}
-	></svelte:component>
-
-	<button
-		slot="actions"
-		type="button"
-		class="btn btn-neutral m-auto"
-		class:hidden={!showGoBackButton}
-		on:click={handleGoBack}
-	>
-		go back
-	</button>
+	{#snippet body({ show, close })}
+		<svelte:component this={currentStep?.component} {...componentProps}></svelte:component>
+	{/snippet}
+
+	{#snippet actions()}
+		<button
+			type="button"
+			class="btn btn-neutral m-auto"
+			class:hidden={!showGoBackButton}
+			on:click={handleGoBack}
+		>
+			go back
+		</button>
+		<button class="btn btn-neutral">{currentStep?.closeModalButtonText ?? 'close'}</button>
+	{/snippet}
 </Modal>
diff --git a/frontend/src/lib/components/popups/utils.ts b/frontend/src/lib/components/popups/utils.ts
new file mode 100644
index 00000000..2bfe66c5
--- /dev/null
+++ b/frontend/src/lib/components/popups/utils.ts
@@ -0,0 +1,15 @@
+import Fwal from '$components/popups/Fwal.svelte';
+import { multiStepModal } from '$lib/stores/multi-step-modal';
+
+export function popup(message: string) {
+	multiStepModal.add({
+		component: Fwal,
+		props: () => {
+			return {
+				message: message
+			};
+		},
+		title: '',
+		closeModalButtonText: 'ok'
+	});
+}
diff --git a/frontend/src/lib/components/project/Project.svelte b/frontend/src/lib/components/project/Project.svelte
index 498075e1..e1ff53ce 100644
--- a/frontend/src/lib/components/project/Project.svelte
+++ b/frontend/src/lib/components/project/Project.svelte
@@ -8,7 +8,7 @@
 	import { ProjectClient } from '$lib/client-wrapper/clients';
 	import type { Project } from '$lib/generated-client/models';
 	import { faEdit, faTasks, faUser } from '@fortawesome/free-solid-svg-icons';
-	import { generateTodoListUrl } from '$lib/utils/params/route';
+	import { generateTodoListItemsUrl } from '$lib/utils/params/route';
 	import Confirm from '$components/Confirm.svelte';
 	import type { CommonComponentStates } from '$lib';
 	import { getProjectsStoreFromContext } from '$components/project/utils';
@@ -52,6 +52,7 @@
 
 <div
 	class="card relative border border-transparent border-opacity-10 bg-base-300 text-base-content transition-colors hover:border-primary"
+	data-testid="project-item-wrapper"
 >
 	<div class="card-body">
 		<Alert type="error" message={apiErrorTitle} />
@@ -96,24 +97,30 @@
 			</div>
 		</div>
 
-		<div class="card-actions justify-end pt-3">
-			<button
-				class="btn btn-success flex-1"
-				on:click={() => onAttachToUser?.(project)}
-				class:hidden={!onAttachToUser}
-			>
-				Share access
-			</button>
-			<button class="btn btn-error flex-1" on:click={() => confirmDetachProject?.show()}>
-				{#if project.users.length == 1}
-					Delete
-				{:else}
-					Detach
-				{/if}
-			</button>
-			<a class="btn btn-info flex-1" href={generateTodoListUrl(project.title, project.id)}>
-				Show todos
-			</a>
+		<div class="card-actions pt-3">
+			<div class="grid w-full grid-cols-2 gap-2 sm:grid-cols-3">
+				<button
+					class="btn btn-success"
+					on:click={() => onAttachToUser?.(project)}
+					class:hidden={!onAttachToUser}
+					data-testid="share-project-access"
+				>
+					Share access
+				</button>
+				<button class="btn btn-error" on:click={() => confirmDetachProject?.show()}>
+					{#if project.users.length == 1}
+						Delete
+					{:else}
+						Detach
+					{/if}
+				</button>
+				<a
+					class="btn btn-info col-span-2 sm:col-span-1"
+					href={generateTodoListItemsUrl(project.title, project.id)}
+				>
+					Show todos
+				</a>
+			</div>
 		</div>
 	</div>
 </div>
diff --git a/frontend/src/lib/components/project/ProjectPermissions.svelte b/frontend/src/lib/components/project/ProjectPermissions.svelte
new file mode 100644
index 00000000..ecc81f1c
--- /dev/null
+++ b/frontend/src/lib/components/project/ProjectPermissions.svelte
@@ -0,0 +1,84 @@
+<script lang="ts" context="module">
+	import FormInput from '$components/forms/FormInput.svelte';
+
+	import { Permission } from '$lib';
+	import { onMount } from 'svelte';
+
+	import { Set } from 'svelte/reactivity';
+
+	export type Events = {
+		onChange?: (permissions: Set<Permission>) => void;
+	};
+
+	export type Props = {
+		preCheckedPermissions?: Permission[];
+	} & Events;
+</script>
+
+<script lang="ts">
+	const { preCheckedPermissions, onChange }: Props = $props();
+
+	let allowAllAccessRights = $state<boolean>();
+	let allowedPermissions = $state<Set<Permission>>(new Set());
+
+	export const selectedPermissions = $derived(allowedPermissions);
+
+	export function reset() {
+		setInitValues();
+	}
+
+	function setInitValues() {
+		allowAllAccessRights = preCheckedPermissions?.indexOf(Permission.All) != -1 ? true : false;
+		allowedPermissions = preCheckedPermissions
+			? new Set(preCheckedPermissions)
+			: null ?? new Set([Permission.All]);
+	}
+
+	onMount(() => {
+		setInitValues();
+	});
+</script>
+
+<FormInput
+	name="permissions[]"
+	value={Permission.All}
+	checked={allowAllAccessRights}
+	label="Allow all permissions"
+	type="toggle"
+	wrapperClasses="mb-2"
+	inputClasses="toggle toggle-success"
+	labelClasses="border border-info"
+	onchange={(e)=>{
+        allowAllAccessRights = (e.target as HTMLInputElement).checked;
+		if (allowAllAccessRights) {
+			allowedPermissions = new Set([Permission.All]);
+		} else {
+			allowedPermissions.delete(Permission.All);
+		}
+		onChange?.(allowedPermissions);
+    }}
+></FormInput>
+<div class="grid grid-cols-1 gap-2 lg:grid-cols-2" class:hidden={allowAllAccessRights}>
+	{#key allowedPermissions}
+		{#each Object.values(Permission).filter((value) => value !== Permission.All) as permission}
+			<FormInput
+				name="permissions[]"
+				value={permission}
+				label={permission.replaceAll('_', ' ')}
+				type="checkbox"
+				disabled={allowAllAccessRights ? true : null}
+				inputClasses="checkbox-warning"
+				labelClasses="border border-info"
+				onchange={(e)=>{
+					if ((e.target as HTMLInputElement).checked) {
+						allowedPermissions.add(permission)
+					} else {
+						allowedPermissions.delete(permission);
+					}
+					onChange?.(allowedPermissions);
+				}}
+				checked={allowedPermissions.has(permission) ? true : null}
+			></FormInput>
+		{/each}
+	{/key}
+</div>
diff --git a/frontend/src/lib/components/todos/todo-list/TodoList.svelte b/frontend/src/lib/components/todos/todo-list/TodoList.svelte
index d653f6f4..492deac5 100644
--- a/frontend/src/lib/components/todos/todo-list/TodoList.svelte
+++ b/frontend/src/lib/components/todos/todo-list/TodoList.svelte
@@ -41,7 +41,7 @@
 </script>
 
 <script lang="ts">
-	const { category, projectId, draggable = true, class: className, ...restProps }:Props = $props();
+	const { category, projectId, draggable = true, class: className, ...restProps }: Props = $props();
 
 	let componentState = $state<CommonComponentStates>('none');
 	let apiErrorTitle = $state<string | null>(null);
@@ -148,7 +148,7 @@
 					</span>
 				</div>
 			</div>
-			<div class="mt-2 flex w-full gap-2">
+			<div class="mt-2 grid w-full grid-cols-1 gap-2 sm:grid-cols-2">
 				<button
 					class="btn btn-success flex-1"
 					class:hidden={!restProps.onCreateTodoItem}
diff --git a/frontend/src/lib/stores/drawer/drawer.svelte.ts b/frontend/src/lib/stores/drawer/drawer.svelte.ts
new file mode 100644
index 00000000..30de2ab1
--- /dev/null
+++ b/frontend/src/lib/stores/drawer/drawer.svelte.ts
@@ -0,0 +1,34 @@
+import type { Snippet } from 'svelte';
+import type { SnippetParams } from '$components/Drawer.svelte';
+
+type NavbarPosition = 'start' | 'end' | 'center';
+class Navbar {
+	public end: Snippet<SnippetParams>[] = $state([]);
+
+	remove(from: NavbarPosition, snippet: Snippet<SnippetParams>) {
+		switch (from) {
+			case 'start': {
+				throw new Error('not implemented');
+				break;
+			}
+			case 'center': {
+				throw new Error('not implemented');
+				break;
+			}
+			case 'end': {
+				this.end = this.end.filter((value) => value != snippet);
+				break;
+			}
+		}
+	}
+}
+
+class Drawer {
+	public readonly navbar: Navbar;
+
+	constructor() {
+		this.navbar = new Navbar();
+	}
+}
+
+export const drawer = new Drawer();
diff --git a/frontend/src/lib/stores/drawer/index.ts b/frontend/src/lib/stores/drawer/index.ts
new file mode 100644
index 00000000..7c740990
--- /dev/null
+++ b/frontend/src/lib/stores/drawer/index.ts
@@ -0,0 +1 @@
+export * from './drawer.svelte';
diff --git a/frontend/src/lib/stores/multi-step-modal/index.ts b/frontend/src/lib/stores/multi-step-modal/index.ts
index c8999ac1..a19b7fc9 100644
--- a/frontend/src/lib/stores/multi-step-modal/index.ts
+++ b/frontend/src/lib/stores/multi-step-modal/index.ts
@@ -1,6 +1 @@
-// import * as multiModal from './multi-modal';
-// import * as multiStepModal from "./multi-step-modal-runes.svelte";
-
-// export default { ...multiStepModal.default };
-
 export * from './multi-step-modal.svelte';
diff --git a/frontend/src/lib/stores/multi-step-modal/multi-step-modal.svelte.ts b/frontend/src/lib/stores/multi-step-modal/multi-step-modal.svelte.ts
index 96c9efc2..14bc0ba0 100644
--- a/frontend/src/lib/stores/multi-step-modal/multi-step-modal.svelte.ts
+++ b/frontend/src/lib/stores/multi-step-modal/multi-step-modal.svelte.ts
@@ -7,6 +7,7 @@ type ModalStep<TComponent extends SvelteComponent> = {
 	component: SvelteComponentClass<TComponent>;
 	props: ComponentPropsGenerator<TComponent>;
 	title: string;
+	closeModalButtonText?: string;
 };
 
 class MultiStepModal {
diff --git a/frontend/src/lib/stores/projects/projects.svelte.ts b/frontend/src/lib/stores/projects/projects.svelte.ts
index 88d641e0..cd25fd01 100644
--- a/frontend/src/lib/stores/projects/projects.svelte.ts
+++ b/frontend/src/lib/stores/projects/projects.svelte.ts
@@ -1,4 +1,4 @@
-import type { PartialUser, Project } from '$lib/generated-client/models';
+import type { PartialUserWithPermission, Project } from '$lib/generated-client/models';
 import { sortByIdInPlace } from '../todos/sort';
 
 export class Projects {
@@ -32,7 +32,7 @@ export class Projects {
 		this._projects = this._projects.filter((value) => value.id != project.id);
 	}
 
-	addAssociation(project: Project, newUser: PartialUser) {
+	addAssociation(project: Project, newUser: PartialUserWithPermission) {
 		const target = this._projects.find((value) => value.id == project.id);
 		if (!target) {
 			throw new Error('project not found in the store');
diff --git a/frontend/src/lib/utils/params/route.ts b/frontend/src/lib/utils/params/route.ts
index 0aa90891..d0ed03dd 100644
--- a/frontend/src/lib/utils/params/route.ts
+++ b/frontend/src/lib/utils/params/route.ts
@@ -1,3 +1,14 @@
-export function generateTodoListUrl(projectTitle: string, projectId: number | string): string {
-	return `/user/${projectTitle.replaceAll(' ', '')}-${projectId}/todos`;
+export function generateBaseTodoListUrl(projectName: string, projectId: number | string): string {
+	return `/user/${projectName.replaceAll(' ', '')}-${projectId}`;
+}
+
+export function generateTodoListItemsUrl(projectName: string, projectId: number | string): string {
+	return `${generateBaseTodoListUrl(projectName, projectId)}/todos`;
+}
+
+export function generateTodoListSettingsUrl(
+	projectName: string,
+	projectId: number | string
+): string {
+	return `${generateBaseTodoListUrl(projectName, projectId)}/settings`;
 }
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 4e767fc4..92740926 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,8 +1,9 @@
 <script lang="ts" context="module">
 	import NavbarItem from '$lib/components/navbar/NavbarItem.svelte';
-	import MultiModal from '$components/popups/MultiModal.svelte';
+	import MultiStepModal from '$components/popups/MultiStepModal.svelte';
 	import Drawer from '$components/Drawer.svelte';
 	import Toasts from '$components/popups/Toasts.svelte';
+	import DarkModeSwitch from '$components/DarkModeSwitch.svelte';
 
 	import '../app.css';
 
@@ -14,7 +15,7 @@
 		faSearch
 	} from '@fortawesome/free-solid-svg-icons';
 
-	import { generateTodoListUrl } from '$lib/utils/params/route';
+	import { generateTodoListItemsUrl } from '$lib/utils/params/route';
 	import { setProjectsStoreToContext } from '$components/project/utils';
 	import { Projects } from '$lib/stores/projects';
 	import { createRootContextManager } from '$lib/stores/context-manager';
@@ -55,7 +56,7 @@
 					{#each projectsStore.current as project (project.id)}
 						<NavbarItem
 							icon={faArrowRight}
-							href={generateTodoListUrl(project.title, project.id)}
+							href={generateTodoListItemsUrl(project.title, project.id)}
 							name={project.title + ' (' + '#' + project.id + ')'}
 							on:click={closeDrawer}
 						/>
@@ -72,6 +73,7 @@
 	{/snippet}
 
 	{#snippet navbarEnd()}
+		<DarkModeSwitch />
 		{#if $page.data.token}
 			<NavbarItem href="/user/logout" name="logout" setActiveClassOnClick={false} />
 		{:else}
@@ -80,7 +82,7 @@
 	{/snippet}
 
 	{#snippet content()}
-		<div class="grid h-full overflow-hidden">
+		<div class="relative grid h-full overflow-hidden">
 			<div class="flex-1 overflow-auto px-6 py-4 lg:px-2 lg:py-1.5">
 				{#if $navigating}
 					<span
@@ -90,7 +92,7 @@
 					<div class="mx-auto h-full overflow-y-auto">
 						{@render children()}
 						<Toasts></Toasts>
-						<MultiModal class="border border-success border-opacity-20"></MultiModal>
+						<MultiStepModal class="border border-success border-opacity-20"></MultiStepModal>
 					</div>
 				{/if}
 			</div>
diff --git a/frontend/src/routes/user/[project_name]-[project_id=integer]/+layout.ts b/frontend/src/routes/user/[project_name]-[project_id=integer]/+layout.ts
new file mode 100644
index 00000000..fd6d6b67
--- /dev/null
+++ b/frontend/src/routes/user/[project_name]-[project_id=integer]/+layout.ts
@@ -0,0 +1,18 @@
+import { error } from '@sveltejs/kit';
+import type { LayoutLoad } from './$types';
+
+export const load = (async ({ parent, params }) => {
+	const data = await parent();
+
+	const currentProject = data.projects.find((value) => {
+		return value.id.toString() === params.project_id;
+	});
+
+	if (!currentProject) {
+		error(404, 'project not found');
+	}
+
+	return {
+		currentProject
+	};
+}) satisfies LayoutLoad;
diff --git a/frontend/src/routes/user/[project_name]-[project_id=integer]/settings/+page.server.ts b/frontend/src/routes/user/[project_name]-[project_id=integer]/settings/+page.server.ts
new file mode 100644
index 00000000..b2365e44
--- /dev/null
+++ b/frontend/src/routes/user/[project_name]-[project_id=integer]/settings/+page.server.ts
@@ -0,0 +1,54 @@
+import { validateFormActionRequest, namedActionResult } from '$lib';
+import { ProjectClient } from '$lib/client-wrapper/clients';
+import { callServiceInFormActions } from '$lib/client-wrapper/wrapper.server';
+import {
+	ProjectDetachAssociation,
+	ProjectUpdateUserPermissions
+} from '$lib/generated-client/zod/schemas';
+import type { Actions } from './$types';
+import { detachSchema, updateUserPermissionsSchema } from './validator';
+
+export const actions: Actions = {
+	detach: async ({ request, locals }) => {
+		const validation = await validateFormActionRequest(request, detachSchema);
+
+		if (!validation.success) {
+			return validation.failure;
+		}
+
+		const result = await callServiceInFormActions({
+			call: async () => {
+				return await ProjectClient({
+					token: locals.token,
+					fetchApi: fetch
+				}).detachFromUserProject({
+					...validation.data
+				});
+			},
+			errorSchema: ProjectDetachAssociation
+		});
+
+		return namedActionResult(result, 'detach');
+	},
+	updatePermissions: async ({ request, locals }) => {
+		const validation = await validateFormActionRequest(request, updateUserPermissionsSchema);
+
+		if (!validation.success) {
+			return validation.failure;
+		}
+
+		const result = await callServiceInFormActions({
+			call: async () => {
+				return await ProjectClient({
+					token: locals.token,
+					fetchApi: fetch
+				}).updatePermissionsProject({
+					...validation.data
+				});
+			},
+			errorSchema: ProjectUpdateUserPermissions
+		});
+
+		return namedActionResult(result, 'updatePermissions');
+	}
+} satisfies Actions;
diff --git a/frontend/src/routes/user/[project_name]-[project_id=integer]/settings/+page.svelte b/frontend/src/routes/user/[project_name]-[project_id=integer]/settings/+page.svelte
new file mode 100644
index 00000000..7191e59b
--- /dev/null
+++ b/frontend/src/routes/user/[project_name]-[project_id=integer]/settings/+page.svelte
@@ -0,0 +1,218 @@
+<script lang="ts" context="module">
+	import Confirm from '$components/Confirm.svelte';
+	import NavbarItem from '$components/navbar/NavbarItem.svelte';
+	import ProjectPermissions from '$components/project/ProjectPermissions.svelte';
+	import EnhancedForm from '$components/forms/EnhancedForm.svelte';
+	import FormInput from '$components/forms/FormInput.svelte';
+	import Spinner from '$components/Spinner.svelte';
+
+	import type { SnippetParams as DrawerSnippetParams } from '$components/Drawer.svelte';
+
+	import { drawer } from '$lib/stores/drawer';
+	import { toasts } from '$lib/stores/toasts';
+
+	import { Permission } from '$lib';
+	import { generateTodoListSettingsUrl, generateTodoListItemsUrl } from '$lib/utils/params/route';
+	import {
+		detachSchema,
+		updateUserPermissionsSchema
+	} from '$routes/user/[project_name]-[project_id=integer]/settings/validator.js';
+	import { faClose } from '@fortawesome/free-solid-svg-icons';
+	import { onMount } from 'svelte';
+</script>
+
+<script lang="ts">
+	const { data, form } = $props();
+
+	let showConfirmChanges = $state<boolean[]>(
+		new Array<boolean>(data.currentProject.users.length).fill(false)
+	);
+	let projectPermissionsRefs = $state<ProjectPermissions[]>([]);
+	let changePermissionsConfirmRefs = $state<Confirm[]>([]);
+	let detachProjectConfirmRefs = $state<Confirm[]>([]);
+
+	onMount(() => {
+		drawer.navbar.end.push(closeSettings);
+
+		return () => {
+			drawer.navbar.remove('end', closeSettings);
+		};
+	});
+</script>
+
+<svelte:head>
+	<title>todos settings</title>
+</svelte:head>
+
+{#snippet closeSettings({ closeDrawer }: DrawerSnippetParams[0])}
+	<NavbarItem
+		href={generateTodoListItemsUrl(data.currentProject.title, data.currentProject.id)}
+		name=""
+		icon={faClose}
+	/>
+{/snippet}
+
+<div class="rounded-sm p-1">
+	<h1 class="mb-5 text-lg text-info">Accessibility</h1>
+	{#each data.currentProject.users as user, i}
+		<div
+			class="collapse relative mb-2 bg-base-200 shadow-sm"
+			data-testid="user-permissions-wrapper"
+		>
+			<input type="checkbox" class="peer" />
+			<div
+				class="collapse-title static flex flex-col justify-between gap-3 pe-4 sm:flex-row sm:items-center sm:gap-0"
+			>
+				<div class="flex items-center gap-1">
+					<span class="text-sm"> username: </span>
+					<span class="font-bold">
+						{user.username}
+					</span>
+					{#if user.permissions.indexOf(Permission.All) != -1}
+						<span class="text-sm text-success">(owner)</span>
+					{/if}
+				</div>
+				<div class="z-10 flex gap-2">
+					{#if showConfirmChanges[i]}
+						<EnhancedForm
+							action="{generateTodoListSettingsUrl(
+								data.currentProject.title,
+								data.currentProject.id
+							)}?/updatePermissions"
+							enhancerConfig={{
+								form: form,
+								validator: { schema: updateUserPermissionsSchema },
+								action: 'updatePermissions'
+							}}
+							onSubmitSucceeded={() => {
+								toasts.addToast({
+									message: 'project permissions updated',
+									type: 'success',
+									time: 5000
+								});
+							}}
+							onSubmitFailed={(e) => {
+								toasts.addToast({
+									message: e.error.message ?? 'some errors occurred',
+									type: 'error',
+									time: 5000
+								});
+							}}
+							successfulMessage=""
+							showResetButton={false}
+							showErrors={false}
+						>
+							{#snippet inputs()}
+								<FormInput
+									type="hidden"
+									wrapperClasses="hidden"
+									name="project_id"
+									value={data.currentProject.id}
+								></FormInput>
+								<FormInput type="hidden" wrapperClasses="hidden" name="user_id" value={user.id}
+								></FormInput>
+								{#each projectPermissionsRefs[i].selectedPermissions as permission}
+									<FormInput
+										name="permissions[]"
+										value={permission}
+										type="hidden"
+										wrapperClasses="hidden"
+									></FormInput>
+								{/each}
+							{/snippet}
+							{#snippet actions({ loading })}
+								<Spinner visible={loading}></Spinner>
+								<button
+									class="btn btn-warning flex-1"
+									onclick={(e) => {
+										projectPermissionsRefs[i].reset();
+										showConfirmChanges[i] = false;
+									}}
+									type="button"
+								>
+									cancel
+								</button>
+								<button
+									type="button"
+									class="btn btn-success flex-1"
+									onclick={() => {
+										changePermissionsConfirmRefs[i].show();
+									}}
+								>
+									save changes
+								</button>
+								<Confirm bind:this={changePermissionsConfirmRefs[i]} confirmButtonType="submit"
+								></Confirm>
+							{/snippet}
+						</EnhancedForm>
+					{:else}
+						<EnhancedForm
+							action="{generateTodoListSettingsUrl(
+								data.currentProject.title,
+								data.currentProject.id
+							)}?/detach"
+							enhancerConfig={{
+								form: form,
+								validator: { schema: detachSchema },
+								action: 'detach'
+							}}
+							onSubmitSucceeded={() => {
+								toasts.addToast({
+									message: 'project detached from user',
+									type: 'success',
+									time: 5000
+								});
+							}}
+							onSubmitFailed={(e) => {
+								toasts.addToast({
+									message: e.error.message ?? 'some errors occurred',
+									type: 'error',
+									time: 5000
+								});
+							}}
+							successfulMessage=""
+							showResetButton={false}
+							showErrors={false}
+						>
+							{#snippet inputs()}
+								<FormInput
+									type="hidden"
+									wrapperClasses="hidden"
+									name="project_id"
+									value={data.currentProject.id}
+								></FormInput>
+								<FormInput type="hidden" wrapperClasses="hidden" name="user_id" value={user.id}
+								></FormInput>
+							{/snippet}
+							{#snippet actions({ loading })}
+								<Spinner visible={loading}></Spinner>
+								<button
+									class="btn btn-error"
+									type="button"
+									onclick={() => {
+										detachProjectConfirmRefs[i].show();
+									}}
+								>
+									detach
+								</button>
+								<Confirm bind:this={detachProjectConfirmRefs[i]} confirmButtonType="submit"
+								></Confirm>
+							{/snippet}
+						</EnhancedForm>
+					{/if}
+				</div>
+			</div>
+			<div class="collapse-content z-auto">
+				<ProjectPermissions
+					bind:this={projectPermissionsRefs[i]}
+					preCheckedPermissions={user.permissions}
+					onChange={(permissions) => {
+						showConfirmChanges[i] =
+							permissions.size !== user.permissions.length ||
+							![...permissions].every((iv) => user.permissions.includes(iv));
+					}}
+				></ProjectPermissions>
+			</div>
+		</div>
+	{/each}
+</div>
diff --git a/frontend/src/routes/user/[project_name]-[project_id=integer]/settings/+page.ts b/frontend/src/routes/user/[project_name]-[project_id=integer]/settings/+page.ts
new file mode 100644
index 00000000..721729c2
--- /dev/null
+++ b/frontend/src/routes/user/[project_name]-[project_id=integer]/settings/+page.ts
@@ -0,0 +1,5 @@
+import type { PageLoad } from './$types';
+
+export const load = (async () => {
+	return {};
+}) satisfies PageLoad;
diff --git a/frontend/src/routes/user/[project_name]-[project_id=integer]/settings/validator.ts b/frontend/src/routes/user/[project_name]-[project_id=integer]/settings/validator.ts
new file mode 100644
index 00000000..80c70d19
--- /dev/null
+++ b/frontend/src/routes/user/[project_name]-[project_id=integer]/settings/validator.ts
@@ -0,0 +1,21 @@
+import { z } from 'zod';
+import {
+	Permission,
+	type ProjectDetachAssociation,
+	type ProjectUpdateUserPermissions
+} from '$lib/generated-client/models';
+
+export const detachSchema = z.object({
+	user_id: z.number({ coerce: true }),
+	project_id: z.number({ coerce: true })
+});
+
+({}) as z.infer<typeof detachSchema> satisfies ProjectDetachAssociation;
+
+export const updateUserPermissionsSchema = z.object({
+	user_id: z.number({ coerce: true }),
+	project_id: z.number({ coerce: true }),
+	permissions: z.array(z.nativeEnum(Permission))
+});
+
+({}) as z.infer<typeof updateUserPermissionsSchema> satisfies ProjectUpdateUserPermissions;
diff --git a/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/+page.svelte b/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/+page.svelte
index fae62e37..cbd40897 100644
--- a/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/+page.svelte
+++ b/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/+page.svelte
@@ -12,9 +12,12 @@
 	import Empty from '$components/Empty.svelte';
 	import TodoList from '$components/todos/todo-list/TodoList.svelte';
 	import CreateTodoItem from './CreateTodoItem.svelte';
+	import NavbarItem from '$components/navbar/NavbarItem.svelte';
+
+	import type { SnippetParams as DrawerSnippetParams } from '$components/Drawer.svelte';
 
 	import { flip } from 'svelte/animate';
-	import { faPlus } from '@fortawesome/free-solid-svg-icons';
+	import { faGear, faPlus } from '@fortawesome/free-solid-svg-icons';
 	import { page } from '$app/stores';
 	import { onMount, untrack } from 'svelte';
 
@@ -30,6 +33,8 @@
 	import { TodoCategories } from '$lib/stores/todos';
 	import { TodoComments } from '$lib/stores/todo-comments';
 	import { setTodosStoreToContext } from '$components/todos/utils';
+	import { drawer } from '$lib/stores/drawer';
+	import { generateTodoListSettingsUrl } from '$lib/utils/params/route';
 </script>
 
 <script lang="ts">
@@ -183,6 +188,11 @@
 
 	onMount(() => {
 		componentState = 'none';
+		drawer.navbar.end.push(settings);
+
+		return () => {
+			drawer.navbar.remove('end', settings);
+		};
 	});
 </script>
 
@@ -190,6 +200,14 @@
 	<title>todos</title>
 </svelte:head>
 
+{#snippet settings({ closeDrawer }: DrawerSnippetParams[0])}
+	<NavbarItem
+		href={generateTodoListSettingsUrl(data.currentProject.title, data.currentProject.id)}
+		name=""
+		icon={faGear}
+	/>
+{/snippet}
+
 {#if componentState === 'loading'}
 	<span class="loading loading-ring m-auto block" />
 {:else}
diff --git a/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/AddTag.svelte b/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/AddTag.svelte
index fa76ecc7..234ad4e4 100644
--- a/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/AddTag.svelte
+++ b/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/AddTag.svelte
@@ -6,7 +6,7 @@
 	import type { ActionData } from './$types';
 	import { addTagSchema } from './validator';
 	import { page } from '$app/stores';
-	import { generateTodoListUrl } from '$lib/utils/params/route';
+	import { generateTodoListItemsUrl } from '$lib/utils/params/route';
 	import { getTodosStoreFromContext } from '$components/todos/utils';
 
 	export type Props = {
@@ -21,7 +21,7 @@
 </script>
 
 <EnhancedForm
-	action="{generateTodoListUrl($page.params.project_name, $page.params.project_id)}?/addTag"
+	action="{generateTodoListItemsUrl($page.params.project_name, $page.params.project_id)}?/addTag"
 	enhancerConfig={{
 		validator: { schema: addTagSchema },
 		form: form,
@@ -55,7 +55,7 @@
 			label="name"
 			wrapperClasses="w-full"
 			autofocus={true}
-			errors={formErrors.errors?.name}
+			errors={formErrors?.errors?.name}
 		/>
 	{/snippet}
 
diff --git a/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/AddTodoItemDependency.svelte b/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/AddTodoItemDependency.svelte
index f9649580..92f1354d 100644
--- a/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/AddTodoItemDependency.svelte
+++ b/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/AddTodoItemDependency.svelte
@@ -6,7 +6,7 @@
 	import type { ActionData } from './$types';
 	import { addTodoItemDependencySchema } from './validator';
 	import { page } from '$app/stores';
-	import { generateTodoListUrl } from '$lib/utils/params/route';
+	import { generateTodoListItemsUrl } from '$lib/utils/params/route';
 	import type { TodoCategoryPartialTodoItem } from '$lib/generated-client/models';
 	import { getTodosStoreFromContext } from '$components/todos/utils';
 
@@ -22,7 +22,7 @@
 </script>
 
 <EnhancedForm
-	action="{generateTodoListUrl(
+	action="{generateTodoListItemsUrl(
 		$page.params.project_name,
 		$page.params.project_id
 	)}?/addTodoItemDependency"
@@ -51,7 +51,7 @@
 			label="depends on (todo id)"
 			wrapperClasses="w-full"
 			autofocus={true}
-			errors={formErrors.errors?.dependant_todo_id?.toString()}
+			errors={formErrors?.errors?.dependant_todo_id?.toString()}
 		/>
 	{/snippet}
 
diff --git a/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/AttachToProject.svelte b/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/AttachToProject.svelte
index 8a990b03..a0999c84 100644
--- a/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/AttachToProject.svelte
+++ b/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/AttachToProject.svelte
@@ -7,7 +7,7 @@
 	import { attachToProjectSchema } from './validator';
 	import { invalidate } from '$app/navigation';
 	import { page } from '$app/stores';
-	import { generateTodoListUrl } from '$lib/utils/params/route';
+	import { generateTodoListItemsUrl } from '$lib/utils/params/route';
 
 	export type Props = {
 		form: ActionData;
@@ -20,7 +20,7 @@
 </script>
 
 <EnhancedForm
-	action="{generateTodoListUrl(
+	action="{generateTodoListItemsUrl(
 		$page.params.project_name,
 		$page.params.project_id
 	)}?/attachToProject"
@@ -31,7 +31,9 @@
 		invalidateAllAfterSubmit: false
 	}}
 	onSubmitSucceeded={async (event) => {
-		await invalidate(`${generateTodoListUrl($page.params.project_name, $page.params.project_id)}`);
+		await invalidate(
+			`${generateTodoListItemsUrl($page.params.project_name, $page.params.project_id)}`
+		);
 	}}
 	successfulMessage="Todo category is now shared with the specified project"
 >
diff --git a/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/CreateTodoCategory.svelte b/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/CreateTodoCategory.svelte
index 30003353..f5fbd1b0 100644
--- a/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/CreateTodoCategory.svelte
+++ b/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/CreateTodoCategory.svelte
@@ -6,7 +6,7 @@
 	import type { ActionData } from './$types';
 	import { createTodoCategorySchema } from './validator';
 	import { page } from '$app/stores';
-	import { generateTodoListUrl } from '$lib/utils/params/route';
+	import { generateTodoListItemsUrl } from '$lib/utils/params/route';
 	import { getTodosStoreFromContext } from '$components/todos/utils';
 
 	export type Props = {
@@ -20,7 +20,10 @@
 </script>
 
 <EnhancedForm
-	action="{generateTodoListUrl($page.params.project_name, $page.params.project_id)}?/createCategory"
+	action="{generateTodoListItemsUrl(
+		$page.params.project_name,
+		$page.params.project_id
+	)}?/createCategory"
 	enhancerConfig={{
 		validator: { schema: createTodoCategorySchema },
 		form: form,
diff --git a/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/CreateTodoComment.svelte b/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/CreateTodoComment.svelte
index edd5b311..2ed30cfe 100644
--- a/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/CreateTodoComment.svelte
+++ b/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/CreateTodoComment.svelte
@@ -7,7 +7,7 @@
 	import { createTodoCommentSchema } from './validator';
 	import { page } from '$app/stores';
 	import { TodoComments } from '$lib/stores/todo-comments';
-	import { generateTodoListUrl } from '$lib/utils/params/route';
+	import { generateTodoListItemsUrl } from '$lib/utils/params/route';
 
 	export type Props = {
 		form: ActionData;
@@ -21,7 +21,7 @@
 </script>
 
 <EnhancedForm
-	action="{generateTodoListUrl(
+	action="{generateTodoListItemsUrl(
 		$page.params.project_name,
 		$page.params.project_id
 	)}?/createTodoComment"
diff --git a/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/CreateTodoItem.svelte b/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/CreateTodoItem.svelte
index 702ec16e..a8c4019f 100644
--- a/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/CreateTodoItem.svelte
+++ b/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/CreateTodoItem.svelte
@@ -6,7 +6,7 @@
 	import type { ActionData } from './$types';
 	import { createTodoItemSchema } from './validator';
 	import { page } from '$app/stores';
-	import { generateTodoListUrl } from '$lib/utils/params/route';
+	import { generateTodoListItemsUrl } from '$lib/utils/params/route';
 	import { getTodosStoreFromContext } from '$components/todos/utils';
 
 	export type Props = {
@@ -21,7 +21,7 @@
 </script>
 
 <EnhancedForm
-	action="{generateTodoListUrl($page.params.project_name, $page.params.project_id)}?/addTodo"
+	action="{generateTodoListItemsUrl($page.params.project_name, $page.params.project_id)}?/addTodo"
 	enhancerConfig={{
 		validator: { schema: createTodoItemSchema },
 		form: form,
diff --git a/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/EditTag.svelte b/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/EditTag.svelte
index e2a8fa7c..b6a3986f 100644
--- a/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/EditTag.svelte
+++ b/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/EditTag.svelte
@@ -6,7 +6,7 @@
 	import type { ActionData } from './$types';
 	import { page } from '$app/stores';
 	import type { TodoItemPartialTag } from '$lib/generated-client/models';
-	import { generateTodoListUrl } from '$lib/utils/params/route';
+	import { generateTodoListItemsUrl } from '$lib/utils/params/route';
 	import { editTagSchema } from '$routes/user/[project_name]-[project_id=integer]/todos/validator';
 	import { getTodosStoreFromContext } from '$components/todos/utils';
 
@@ -22,7 +22,7 @@
 </script>
 
 <EnhancedForm
-	action="{generateTodoListUrl($page.params.project_name, $page.params.project_id)}?/editTag"
+	action="{generateTodoListItemsUrl($page.params.project_name, $page.params.project_id)}?/editTag"
 	enhancerConfig={{
 		validator: { schema: editTagSchema },
 		form: form,
diff --git a/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/EditTodoCategory.svelte b/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/EditTodoCategory.svelte
index 9d034562..b55c32f4 100644
--- a/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/EditTodoCategory.svelte
+++ b/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/EditTodoCategory.svelte
@@ -6,7 +6,7 @@
 	import type { ActionData } from './$types';
 	import { editTodoCategorySchema } from './validator';
 	import { page } from '$app/stores';
-	import { generateTodoListUrl } from '$lib/utils/params/route';
+	import { generateTodoListItemsUrl } from '$lib/utils/params/route';
 	import type { TodoCategory } from '$lib/generated-client/models';
 	import { getTodosStoreFromContext } from '$components/todos/utils';
 
@@ -22,7 +22,7 @@
 </script>
 
 <EnhancedForm
-	action="{generateTodoListUrl(
+	action="{generateTodoListItemsUrl(
 		$page.params.project_name,
 		$page.params.project_id
 	)}?/editTodoCategory"
diff --git a/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/EditTodoComment.svelte b/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/EditTodoComment.svelte
index f64350e4..958f802b 100644
--- a/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/EditTodoComment.svelte
+++ b/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/EditTodoComment.svelte
@@ -7,7 +7,7 @@
 	import { editTodoCommentSchema } from './validator';
 	import { page } from '$app/stores';
 	import type { TodoComment } from '$lib/generated-client/models';
-	import { generateTodoListUrl } from '$lib/utils/params/route';
+	import { generateTodoListItemsUrl } from '$lib/utils/params/route';
 	import { TodoComments } from '$lib/stores/todo-comments';
 
 	export type Props = {
@@ -22,7 +22,7 @@
 </script>
 
 <EnhancedForm
-	action="{generateTodoListUrl(
+	action="{generateTodoListItemsUrl(
 		$page.params.project_name,
 		$page.params.project_id
 	)}?/editTodoComment"
diff --git a/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/EditTodoItem.svelte b/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/EditTodoItem.svelte
index 55dc9424..b4f1fd9a 100644
--- a/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/EditTodoItem.svelte
+++ b/frontend/src/routes/user/[project_name]-[project_id=integer]/todos/EditTodoItem.svelte
@@ -7,7 +7,7 @@
 	import type { TodoCategories } from '$lib/stores/todos/todos.svelte';
 	import { editTodoItemSchema } from './validator';
 	import { page } from '$app/stores';
-	import { generateTodoListUrl } from '$lib/utils/params/route';
+	import { generateTodoListItemsUrl } from '$lib/utils/params/route';
 	import type { TodoCategoryPartialTodoItem } from '$lib/generated-client/models';
 	import { getTodosStoreFromContext } from '$components/todos/utils';
 
@@ -23,7 +23,10 @@
 </script>
 
 <EnhancedForm
-	action="{generateTodoListUrl($page.params.project_name, $page.params.project_id)}?/editTodoItem"
+	action="{generateTodoListItemsUrl(
+		$page.params.project_name,
+		$page.params.project_id
+	)}?/editTodoItem"
 	enhancerConfig={{
 		validator: { schema: editTodoItemSchema },
 		form: form,
diff --git a/frontend/src/routes/user/logout/+page.svelte b/frontend/src/routes/user/logout/+page.svelte
index 5310da94..dec68383 100644
--- a/frontend/src/routes/user/logout/+page.svelte
+++ b/frontend/src/routes/user/logout/+page.svelte
@@ -28,6 +28,7 @@
 			text="Yes 👋🏾"
 			loading={status === 'submitting'}
 			type="submit"
+			data-testid="logout-btn"
 		/>
 	</form>
 </div>
diff --git a/frontend/src/routes/user/projects/AttachToUser.svelte b/frontend/src/routes/user/projects/AttachToUser.svelte
index b75d81c4..ad70ef91 100644
--- a/frontend/src/routes/user/projects/AttachToUser.svelte
+++ b/frontend/src/routes/user/projects/AttachToUser.svelte
@@ -2,10 +2,11 @@
 	import FormInput from '$lib/components/forms/FormInput.svelte';
 	import LoadingButton from '$lib/components/buttons/LoadingButton.svelte';
 	import EnhancedForm from '$components/forms/EnhancedForm.svelte';
+	import ProjectPermissions from '$components/project/ProjectPermissions.svelte';
 
 	import type { ActionData } from './$types';
 	import { attachProjectSchema } from './validator';
-	import { Permission, type Project } from '$lib/generated-client/models';
+	import { type Project } from '$lib/generated-client/models';
 	import { getProjectsStoreFromContext } from '$components/project/utils';
 
 	export type Props = {
@@ -18,7 +19,6 @@
 	const { form, project }: Props = $props();
 
 	const projectsStore = getProjectsStoreFromContext();
-	let allowAllAccessRights = $state<boolean>(true);
 </script>
 
 <EnhancedForm
@@ -32,42 +32,16 @@
 	}}
 	onSubmitSucceeded={async (event) => {
 		projectsStore?.addAssociation(project, {
-			username: event.formData.username,
+			username: event.parsedFormData.username,
+			permissions: event.parsedFormData.permissions,
 			id: event.response.user_id
 		});
-		allowAllAccessRights = true;
 	}}
 	successfulMessage="Project is now shared with the specified user"
 >
 	{#snippet inputs({ formErrors })}
 		<span> permissions </span>
-		<FormInput
-			id="permissions:{Permission.All}"
-			name="permissions[]"
-			value={Permission.All}
-			checked={allowAllAccessRights}
-			label="Allow all permissions"
-			type="toggle"
-			inputClasses="toggle toggle-success"
-			labelClasses="border border-info"
-			onchange={(e)=>{
-				allowAllAccessRights = (e.target as HTMLInputElement).checked;
-			}}
-		></FormInput>
-		<div class="grid grid-cols-1 gap-2 lg:grid-cols-2" class:hidden={allowAllAccessRights}>
-			{#each Object.values(Permission).filter((value) => value !== Permission.All) as permission}
-				<FormInput
-					id="permissions:{permission}"
-					name="permissions[]"
-					value={permission}
-					label={permission.replaceAll('_', ' ')}
-					type="checkbox"
-					disabled={allowAllAccessRights}
-					inputClasses="checkbox-warning"
-					labelClasses="border border-info"
-				></FormInput>
-			{/each}
-		</div>
+		<ProjectPermissions></ProjectPermissions>
 
 		<FormInput
 			name="project_id"
diff --git a/frontend/src/routes/user/projects/CreateProject.svelte b/frontend/src/routes/user/projects/CreateProject.svelte
index 15e99daf..b559296e 100644
--- a/frontend/src/routes/user/projects/CreateProject.svelte
+++ b/frontend/src/routes/user/projects/CreateProject.svelte
@@ -51,7 +51,7 @@
 			value={true}
 			wrapperClasses="w-full !flex-row items-center !justify-start gap-3"
 			inputClasses="!checkbox !btn-square !checkbox-success"
-			errors={formErrors.errors?.create_from_default_template?.toString()}
+			errors={formErrors?.errors?.create_from_default_template?.toString()}
 		/>
 	{/snippet}
 
diff --git a/frontend/src/routes/user/search-tags/+page.svelte b/frontend/src/routes/user/search-tags/+page.svelte
index 329c9c10..8ac6940d 100644
--- a/frontend/src/routes/user/search-tags/+page.svelte
+++ b/frontend/src/routes/user/search-tags/+page.svelte
@@ -65,13 +65,13 @@
 	showResetButton={false}
 >
 	{#snippet inputs({ formErrors })}
-		<FormInput type="text" label="tag name" name="name" errors={formErrors.errors?.name}
+		<FormInput type="text" label="tag name" name="name" errors={formErrors?.errors?.name}
 		></FormInput>
 		<FormInput
 			type="text"
 			label="project id (Optional)"
 			name="projectId"
-			errors={formErrors.errors?.projectId?.toString()}
+			errors={formErrors?.errors?.projectId?.toString()}
 		></FormInput>
 	{/snippet}
 
diff --git a/frontend/tests/common-locators/project-permissions.ts b/frontend/tests/common-locators/project-permissions.ts
new file mode 100644
index 00000000..b7a77a1a
--- /dev/null
+++ b/frontend/tests/common-locators/project-permissions.ts
@@ -0,0 +1,66 @@
+import { expect, type Locator } from '@playwright/test';
+import { Permission } from '../../src/lib/generated-client';
+
+export async function getCheckBoxes(locator: Locator) {
+	const checkboxesQuery = locator.locator('input[type="checkbox"][name="permissions[]"]');
+	await checkboxesQuery.first().waitFor({ state: 'visible', timeout: 1000 });
+	const checkboxes = await checkboxesQuery.all();
+	expect(checkboxes.length).toBeGreaterThanOrEqual(1);
+	return checkboxes;
+}
+
+export async function toggleAllPermissions(locator: Locator, on: boolean) {
+	const checkboxes = await getCheckBoxes(locator);
+	const allPermissions = (
+		await Promise.all(
+			checkboxes.map(async (checkbox) =>
+				(await checkbox.getAttribute('value')) == Permission.All ? checkbox : null
+			)
+		)
+	).filter((checkbox) => checkbox !== null);
+
+	expect(allPermissions.length).toEqual(1);
+	expect(allPermissions[0]).not.toBeNull();
+	await allPermissions[0]!.setChecked(on);
+}
+
+export async function setPermissions(locator: Locator, permissions: Permission[]) {
+	const checkboxes = await getCheckBoxes(locator);
+
+	if (permissions.length == 1 && permissions[0] == Permission.All) {
+		await toggleAllPermissions(locator, true);
+		return;
+	}
+
+	await toggleAllPermissions(locator, false);
+
+	await Promise.all(
+		checkboxes.map(async (checkbox) => {
+			const value = await checkbox.getAttribute('value');
+			if (permissions.some((permission) => permission == value)) {
+				await checkbox.setChecked(true);
+			}
+		})
+	);
+
+	await expectPermissionsToBeEqual(locator, permissions);
+}
+
+export async function getPermissions(locator: Locator): Promise<Permission[]> {
+	const checkboxes = await getCheckBoxes(locator);
+	const result: Permission[] = [];
+	await Promise.all(
+		checkboxes.map(async (checkbox) => {
+			if (!(await checkbox.isChecked())) {
+				return;
+			}
+			const value = await checkbox.getAttribute('value');
+			result.push(value as Permission);
+		})
+	);
+	return result;
+}
+
+export async function expectPermissionsToBeEqual(locator: Locator, permissions: Permission[]) {
+	expect((await getPermissions(locator)).sort()).toEqual(permissions.sort());
+}
diff --git a/frontend/tests/common-locators/toast.ts b/frontend/tests/common-locators/toast.ts
new file mode 100644
index 00000000..6f5e7e9c
--- /dev/null
+++ b/frontend/tests/common-locators/toast.ts
@@ -0,0 +1,13 @@
+import type { Page } from '@playwright/test';
+import type { Toast } from '../../src/lib/stores/toasts';
+
+/**
+ * @param timeout - timeout in ms
+ */
+export async function waitForToastMessage(page: Page, message: string, timeout?: number) {
+	await page.locator('.toast', { hasText: message }).waitFor({ state: 'visible', timeout });
+}
+
+export async function waitForToastType(page: Page, type: Toast['type'], timeout?: number) {
+	await page.locator(`.toast .alert-${type}`).waitFor({ state: 'visible', timeout });
+}
diff --git a/frontend/tests/fixtures/access-token.ts b/frontend/tests/fixtures/access-token.ts
deleted file mode 100644
index bcdb1667..00000000
--- a/frontend/tests/fixtures/access-token.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { test as baseTest } from './enhanced-page';
-import { expect } from '@playwright/test';
-import crypto from 'crypto'; // TODO: idk why I need to import this, on windows it works without importing it but on linux it doesnt
-
-// Define a fixture for creating a new user and logging in to capture the access token
-export const test = baseTest.extend<{
-	auth: { accessToken: string; username: string; password: string };
-}>({
-	auth: async ({ enhancedPage }, use) => {
-		// Generate new user credentials
-		const username = 'test' + crypto.getRandomValues(new Uint32Array(1)).join('');
-		const password = username;
-
-		// Navigate to the signup page and create a new account
-		await enhancedPage.goto('/signup');
-		await enhancedPage.locator('input[name="username"]').fill(username);
-		await enhancedPage.locator('input[name="password"]').fill(password);
-		await enhancedPage.locator('input[name="confirm_password"]').fill(password);
-		await enhancedPage.getByRole('button', { name: 'signup' }).click();
-
-		await expect(
-			enhancedPage.locator("form div[role='alert'].alert-error"),
-			'not errors should have occurred when signing up'
-		).not.toBeVisible();
-
-		// Verify redirection to login page after account creation
-		await enhancedPage.waitForURL('/login');
-		await expect(enhancedPage).toHaveURL('/login');
-
-		// Perform login
-		await enhancedPage.locator('input[name="username"]').fill(username);
-		await enhancedPage.locator('input[name="password"]').fill(password);
-		await enhancedPage.getByRole('button', { name: 'login' }).click();
-
-		await expect(
-			enhancedPage.locator("form div[role='alert'].alert-error"),
-			'not errors should have occurred when logging in'
-		).not.toBeVisible();
-
-		// Verify redirection to projects page after account creation
-		await enhancedPage.waitForURL('/user/projects');
-		await expect(enhancedPage).toHaveURL('/user/projects');
-
-		// Capture the access_token from cookies
-		const cookies = await enhancedPage.context().cookies();
-		const accessTokenCookie = cookies.find((cookie) => cookie.name === 'token');
-
-		expect(accessTokenCookie, 'token cookie should be present').toBeTruthy();
-
-		const accessToken = JSON.parse(decodeURIComponent(accessTokenCookie!.value))?.access_token;
-
-		expect(accessToken, 'token cookie should have an access_token property').toBeTruthy();
-
-		// Use the access token for subsequent tests
-		await use({ accessToken: accessToken!, username, password });
-	}
-});
diff --git a/frontend/tests/fixtures/auth.ts b/frontend/tests/fixtures/auth.ts
new file mode 100644
index 00000000..22bc338f
--- /dev/null
+++ b/frontend/tests/fixtures/auth.ts
@@ -0,0 +1,92 @@
+import { test as baseTest, type EnhancedPage } from './enhanced-page';
+import { expect } from '@playwright/test';
+import crypto from 'crypto'; // TODO: idk why I need to import this, on windows it works without importing it but on linux it doesnt
+
+export class Auth {
+	#enhancedPage: EnhancedPage;
+	#currentLoggedInUser:
+		| {
+				accessToken: string;
+				username: string;
+				password: string;
+		  }
+		| undefined;
+
+	constructor(enhancedPage: EnhancedPage) {
+		this.#enhancedPage = enhancedPage;
+	}
+
+	async login() {
+		// Generate new user credentials
+		const username = 'test' + crypto.getRandomValues(new Uint32Array(1)).join('');
+		const password = username;
+
+		// Navigate to the signup page and create a new account
+		await this.#enhancedPage.goto('/signup');
+		await this.#enhancedPage.locator('input[name="username"]').fill(username);
+		await this.#enhancedPage.locator('input[name="password"]').fill(password);
+		await this.#enhancedPage.locator('input[name="confirm_password"]').fill(password);
+		await this.#enhancedPage.getByRole('button', { name: 'signup' }).click();
+
+		await expect(
+			this.#enhancedPage.locator("form div[role='alert'].alert-error"),
+			'not errors should have occurred when signing up'
+		).not.toBeVisible();
+
+		// Verify redirection to login page after account creation
+		await this.#enhancedPage.waitForURL('/login');
+		await expect(this.#enhancedPage).toHaveURL('/login');
+
+		// Perform login
+		await this.#enhancedPage.locator('input[name="username"]').fill(username);
+		await this.#enhancedPage.locator('input[name="password"]').fill(password);
+		await this.#enhancedPage.getByRole('button', { name: 'login' }).click();
+
+		await expect(
+			this.#enhancedPage.locator("form div[role='alert'].alert-error"),
+			'not errors should have occurred when logging in'
+		).not.toBeVisible();
+
+		// Verify redirection to projects page after account creation
+		await this.#enhancedPage.waitForURL('/user/projects');
+		await expect(this.#enhancedPage).toHaveURL('/user/projects');
+
+		// Capture the access_token from cookies
+		const cookies = await this.#enhancedPage.context().cookies();
+		const accessTokenCookie = cookies.find((cookie) => cookie.name === 'token');
+
+		expect(accessTokenCookie, 'token cookie should be present').not.toBeNull();
+
+		const accessToken = JSON.parse(decodeURIComponent(accessTokenCookie!.value))?.access_token;
+
+		expect(accessToken, 'token cookie should have an access_token property').not.toBeNull();
+
+		this.#currentLoggedInUser = {
+			accessToken: accessToken as string,
+			username,
+			password
+		};
+		return this.#currentLoggedInUser;
+	}
+
+	async logout() {
+		await this.#enhancedPage.goto('/user/logout');
+		await expect(this.#enhancedPage.getByTestId('logout-btn')).toBeVisible();
+		await this.#enhancedPage.getByTestId('logout-btn').click();
+		await expect(this.#enhancedPage).toHaveURL('/login');
+		this.#currentLoggedInUser = undefined;
+	}
+
+	get currentLoggedInUser() {
+		return this.#currentLoggedInUser;
+	}
+}
+
+// Define a fixture for creating a new user and logging in to capture the access token
+export const test = baseTest.extend<{
+	authUtils: Auth;
+}>({
+	authUtils: async ({ enhancedPage }, use) => {
+		await use(new Auth(enhancedPage));
+	}
+});
diff --git a/frontend/tests/fixtures/project-settings.ts b/frontend/tests/fixtures/project-settings.ts
new file mode 100644
index 00000000..7f496515
--- /dev/null
+++ b/frontend/tests/fixtures/project-settings.ts
@@ -0,0 +1,64 @@
+import { test as projectTest } from './project';
+import { expect, type Locator } from '@playwright/test';
+import { type IPage } from './IPage';
+import { type EnhancedPage } from './enhanced-page';
+import type { Permission } from '../../src/lib/generated-client';
+import { setPermissions } from '../common-locators/project-permissions';
+import { generateTodoListSettingsUrl } from '../../src/lib/utils/params/route';
+import { waitForSpinnerStateToBeIdle } from '../common-locators/spinner';
+import { waitForToastMessage, waitForToastType } from '../common-locators/toast';
+import { getConfirmAcceptButton } from '../common-locators/confirm';
+
+export class ProjectSettingsPage implements IPage {
+	#enhancedPage: EnhancedPage;
+
+	constructor(enhancedPage: EnhancedPage) {
+		this.#enhancedPage = enhancedPage;
+	}
+
+	async goto(projectTitle: string, projectId: number | string) {
+		await this.#enhancedPage.goto(generateTodoListSettingsUrl(projectTitle, projectId));
+	}
+
+	async changePermissions({
+		username,
+		permissions,
+		expectError = false
+	}: {
+		username: string;
+		permissions: Permission[];
+		expectError?: boolean;
+	}) {
+		const row = await this.getUserPermissionsRowLocator(username);
+		await row.click();
+
+		await setPermissions(row, permissions);
+		await row.getByRole('button', { name: 'save changes' }).click();
+		await getConfirmAcceptButton(row).click();
+		await waitForSpinnerStateToBeIdle(row);
+
+		if (expectError) {
+			await waitForToastType(this.#enhancedPage, 'error', 1000);
+		} else {
+			await waitForToastMessage(this.#enhancedPage, 'project permissions updated', 1000);
+		}
+	}
+
+	async getUserPermissionsRowLocator(username: string) {
+		const row = this.#enhancedPage
+			.getByTestId('user-permissions-wrapper')
+			.filter({ hasText: `username: ${username}` });
+		await expect(row).toBeAttached();
+		return row;
+	}
+
+	async isOwner(locator: Locator) {
+		return (await locator.textContent())?.includes('(owner)');
+	}
+}
+
+export const test = projectTest.extend<{ projectSettings: { page: ProjectSettingsPage } }>({
+	projectSettings: async ({ enhancedPage }, use) => {
+		await use({ page: new ProjectSettingsPage(enhancedPage) });
+	}
+});
diff --git a/frontend/tests/fixtures/project.ts b/frontend/tests/fixtures/project.ts
index 867f95c7..ebd29aed 100644
--- a/frontend/tests/fixtures/project.ts
+++ b/frontend/tests/fixtures/project.ts
@@ -1,9 +1,11 @@
-import { test as auth } from './access-token';
+import { test as auth } from './auth';
 import { expect } from '@playwright/test';
 import { getModal, closeModal } from '../common-locators/modal';
 import { getFloatingBtn } from '../common-locators/floating-btn';
 import { type IPage } from './IPage';
 import { type EnhancedPage } from './enhanced-page';
+import type { Permission } from '../../src/lib/generated-client';
+import { getPermissions, setPermissions } from '../common-locators/project-permissions';
 
 export class ProjectsPage implements IPage {
 	#enhancedPage: EnhancedPage;
@@ -57,12 +59,61 @@ export class ProjectsPage implements IPage {
 			projectId: parseInt((await createdProject.innerText()).split('#')[1])
 		};
 	}
+
+	async attachToUser({
+		projectId,
+		username,
+		permissions
+	}: {
+		projectId: number | string;
+		username: string;
+		permissions: Permission[];
+	}) {
+		(await this.getShareAccessButtonLocator(projectId)).click();
+		const modal = await getModal(this.#enhancedPage);
+
+		await setPermissions(modal, permissions);
+
+		// fill the data
+		await modal.getByPlaceholder('username').fill(username);
+		await modal.getByPlaceholder('username').press('Tab');
+		await modal.getByRole('button', { name: 'reset' }).press('Tab');
+		await modal.getByRole('button', { name: 'share' }).press('Enter');
+		await expect(modal.getByText('Project is now shared with the specified user')).toHaveCount(1);
+
+		// close the modal
+		await closeModal(modal);
+
+		await expect(await this.getProjectWrapperById(projectId)).toContainText(username);
+	}
+
+	getResultsWrapperLocator() {
+		return this.#enhancedPage.getByTestId('project-item-wrapper');
+	}
+
+	async getShareAccessButtonLocator(projectId: string | number) {
+		return (await this.getProjectWrapperById(projectId)).getByTestId('share-project-access');
+	}
+	async getProjectWrapperById(id: string | number) {
+		const project = await this.#enhancedPage
+			.locator("div[data-testid='project-item-wrapper']", {
+				has: this.#enhancedPage.locator("div[data-tip='project id'] span.text-info", {
+					hasText: `#${id}`
+				})
+			})
+			.all();
+
+		expect(project, 'only one project with this id should exist on the page').toHaveLength(1);
+
+		return project[0];
+	}
 }
 
 export const test = auth.extend<{ projectUtils: { page: ProjectsPage } }>({
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	projectUtils: async ({ enhancedPage, auth }, use) => {
+	projectUtils: async ({ enhancedPage, authUtils }, use) => {
 		// I have to include auth because we need to be authenticated to use this page
+		await authUtils.login();
 		await use({ page: new ProjectsPage(enhancedPage) });
 	}
 });
diff --git a/frontend/tests/fixtures/search-tags.ts b/frontend/tests/fixtures/search-tags.ts
index 2d368899..b1460aed 100644
--- a/frontend/tests/fixtures/search-tags.ts
+++ b/frontend/tests/fixtures/search-tags.ts
@@ -42,7 +42,8 @@ export const test = todoItemTest.extend<{
 	searchTagsUtils: SearchTagsUtils;
 }>({
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	searchTagsUtils: async ({ enhancedPage, auth }, use) => {
+	searchTagsUtils: async ({ enhancedPage, authUtils }, use) => {
+		await authUtils.login();
 		// I have to include auth because we need to be authenticated to use this page
 		const searchTags = new SearchTagsPage(enhancedPage);
 		await use({
diff --git a/frontend/tests/fixtures/todo-category.ts b/frontend/tests/fixtures/todo-category.ts
index dd7bfc8d..29e16bcc 100644
--- a/frontend/tests/fixtures/todo-category.ts
+++ b/frontend/tests/fixtures/todo-category.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
 import type { IPage } from './IPage';
-import { generateTodoListUrl } from '../../src/lib/utils/params/route';
+import { generateTodoListItemsUrl } from '../../src/lib/utils/params/route';
 import { ProjectsPage, test as projects } from './project';
 import { getModal, closeModal } from '../common-locators/modal';
 import { getFloatingBtn } from '../common-locators/floating-btn';
@@ -19,7 +19,9 @@ export class TodoCategoryPage implements IPage {
 	}
 
 	async goto(projectTitle: string, projectId: number, projectShouldExist = true) {
-		const response = await this.#enhancedPage.goto(generateTodoListUrl(projectTitle, projectId));
+		const response = await this.#enhancedPage.goto(
+			generateTodoListItemsUrl(projectTitle, projectId)
+		);
 		if (projectShouldExist) {
 			expect(response, 'response should exist').toBeTruthy();
 			expect(response!.status() == 200, 'todo category page should exist').toBeTruthy();
diff --git a/frontend/tests/fixtures/todo-item/todo-item.ts b/frontend/tests/fixtures/todo-item/todo-item.ts
index 8da1776b..885e1880 100644
--- a/frontend/tests/fixtures/todo-item/todo-item.ts
+++ b/frontend/tests/fixtures/todo-item/todo-item.ts
@@ -349,7 +349,7 @@ export const test = todoCategoriesTest.extend<{
 	todoItemUtils: TodoItemUtils;
 }>({
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	todoItemUtils: async ({ enhancedPage, todoCategoryUtils, auth }, use) => {
+	todoItemUtils: async ({ enhancedPage, todoCategoryUtils, authUtils }, use) => {
 		// I have to include auth because we need to be authenticated to use this page
 		const todoItemPage = new TodoItemPage(enhancedPage, todoCategoryUtils);
 		await use({
diff --git a/frontend/tests/routes/user/[project_name]-[project_id=integer]/settings/settings.spec.ts b/frontend/tests/routes/user/[project_name]-[project_id=integer]/settings/settings.spec.ts
new file mode 100644
index 00000000..a771e64a
--- /dev/null
+++ b/frontend/tests/routes/user/[project_name]-[project_id=integer]/settings/settings.spec.ts
@@ -0,0 +1,71 @@
+import { test } from '../../../../fixtures/project-settings';
+import { Permission } from '../../../../../src/lib/generated-client';
+import {
+	expectPermissionsToBeEqual,
+	setPermissions
+} from '../../../../common-locators/project-permissions';
+
+test('test change permissions', async ({ projectUtils, projectSettings, authUtils }) => {
+	const lastUser = authUtils.currentLoggedInUser!;
+
+	await authUtils.logout();
+	await authUtils.login();
+
+	await projectUtils.page.goto();
+
+	const projectTitle = 'test';
+	const project = await projectUtils.page.create({
+		title: projectTitle,
+		description: 'test'
+	});
+
+	await projectUtils.page.attachToUser({
+		projectId: project.projectId,
+		username: lastUser.username,
+		permissions: [Permission.CreateTag]
+	});
+
+	await projectSettings.page.goto(projectTitle, project.projectId);
+
+	await projectSettings.page.changePermissions({
+		username: lastUser.username,
+		permissions: [Permission.All]
+	});
+
+	await projectSettings.page.changePermissions({
+		username: authUtils.currentLoggedInUser?.username!,
+		permissions: [Permission.CreateComment]
+	});
+
+	await projectSettings.page.changePermissions({
+		username: authUtils.currentLoggedInUser?.username!,
+		permissions: [Permission.All],
+		expectError: true
+	});
+});
+
+test('canceling the change should reset back to default permissions', async ({
+	projectUtils,
+	projectSettings,
+	authUtils
+}) => {
+	await projectUtils.page.goto();
+
+	const projectTitle = 'test';
+	const project = await projectUtils.page.create({
+		title: projectTitle,
+		description: 'test'
+	});
+
+	await projectSettings.page.goto(projectTitle, project.projectId);
+
+	const row = await projectSettings.page.getUserPermissionsRowLocator(
+		authUtils.currentLoggedInUser?.username!
+	);
+	await row.click();
+
+	await setPermissions(row, [Permission.CreateTodoCategory]);
+	await row.getByRole('button', { name: 'cancel' }).click();
+
+	await expectPermissionsToBeEqual(row, [Permission.All]);
+});
diff --git a/frontend/tests/routes/user/[project_name]-[project_id=integer]/todo-category.spec.ts b/frontend/tests/routes/user/[project_name]-[project_id=integer]/todos/todo-category.spec.ts
similarity index 98%
rename from frontend/tests/routes/user/[project_name]-[project_id=integer]/todo-category.spec.ts
rename to frontend/tests/routes/user/[project_name]-[project_id=integer]/todos/todo-category.spec.ts
index 453fb15f..3c2b1c36 100644
--- a/frontend/tests/routes/user/[project_name]-[project_id=integer]/todo-category.spec.ts
+++ b/frontend/tests/routes/user/[project_name]-[project_id=integer]/todos/todo-category.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { test } from '../../../fixtures/todo-category';
+import { test } from '../../../../fixtures/todo-category';
 
 test('create todo category', async ({ projectUtils, todoCategoryUtils }) => {
 	await projectUtils.page.goto();
diff --git a/frontend/tests/routes/user/[project_name]-[project_id=integer]/todo-comments.spec.ts b/frontend/tests/routes/user/[project_name]-[project_id=integer]/todos/todo-comments.spec.ts
similarity index 93%
rename from frontend/tests/routes/user/[project_name]-[project_id=integer]/todo-comments.spec.ts
rename to frontend/tests/routes/user/[project_name]-[project_id=integer]/todos/todo-comments.spec.ts
index 52485036..b04ea467 100644
--- a/frontend/tests/routes/user/[project_name]-[project_id=integer]/todo-comments.spec.ts
+++ b/frontend/tests/routes/user/[project_name]-[project_id=integer]/todos/todo-comments.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import { getModal } from '../../../common-locators/modal';
-import { test } from '../../../fixtures/todo-item/todo-item';
+import { getModal } from '../../../../common-locators/modal';
+import { test } from '../../../../fixtures/todo-item/todo-item';
 
 test('create a comment', async ({ enhancedPage, todoItemUtils }) => {
 	const t1 = await todoItemUtils.helpers.createTodoItem();
diff --git a/frontend/tests/routes/user/[project_name]-[project_id=integer]/todo-dependency.spec.ts b/frontend/tests/routes/user/[project_name]-[project_id=integer]/todos/todo-dependency.spec.ts
similarity index 94%
rename from frontend/tests/routes/user/[project_name]-[project_id=integer]/todo-dependency.spec.ts
rename to frontend/tests/routes/user/[project_name]-[project_id=integer]/todos/todo-dependency.spec.ts
index c76ce333..aa4d7e10 100644
--- a/frontend/tests/routes/user/[project_name]-[project_id=integer]/todo-dependency.spec.ts
+++ b/frontend/tests/routes/user/[project_name]-[project_id=integer]/todos/todo-dependency.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import { getModal } from '../../../common-locators/modal';
-import { test } from '../../../fixtures/todo-item/todo-item';
+import { getModal } from '../../../../common-locators/modal';
+import { test } from '../../../../fixtures/todo-item/todo-item';
 
 test('create a dependency', async ({ enhancedPage, todoItemUtils }) => {
 	const t1 = await todoItemUtils.helpers.createTodoItem();
diff --git a/frontend/tests/routes/user/[project_name]-[project_id=integer]/todo-item.spec.ts b/frontend/tests/routes/user/[project_name]-[project_id=integer]/todos/todo-item.spec.ts
similarity index 98%
rename from frontend/tests/routes/user/[project_name]-[project_id=integer]/todo-item.spec.ts
rename to frontend/tests/routes/user/[project_name]-[project_id=integer]/todos/todo-item.spec.ts
index a0224b82..7553b764 100644
--- a/frontend/tests/routes/user/[project_name]-[project_id=integer]/todo-item.spec.ts
+++ b/frontend/tests/routes/user/[project_name]-[project_id=integer]/todos/todo-item.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { test } from '../../../fixtures/todo-item/todo-item';
+import { test } from '../../../../fixtures/todo-item/todo-item';
 
 test('creating todo items', async ({ todoItemUtils, todoCategoryUtils }) => {
 	const category = await todoCategoryUtils.helpers.createCategory();
diff --git a/frontend/tests/routes/user/[project_name]-[project_id=integer]/todo-tags.spec.ts b/frontend/tests/routes/user/[project_name]-[project_id=integer]/todos/todo-tags.spec.ts
similarity index 93%
rename from frontend/tests/routes/user/[project_name]-[project_id=integer]/todo-tags.spec.ts
rename to frontend/tests/routes/user/[project_name]-[project_id=integer]/todos/todo-tags.spec.ts
index bd3c580d..8c024bf9 100644
--- a/frontend/tests/routes/user/[project_name]-[project_id=integer]/todo-tags.spec.ts
+++ b/frontend/tests/routes/user/[project_name]-[project_id=integer]/todos/todo-tags.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import { getModal } from '../../../common-locators/modal';
-import { test } from '../../../fixtures/todo-item/todo-item';
+import { getModal } from '../../../../common-locators/modal';
+import { test } from '../../../../fixtures/todo-item/todo-item';
 
 test('create a tag', async ({ enhancedPage, todoItemUtils }) => {
 	const t1 = await todoItemUtils.helpers.createTodoItem();
diff --git a/todos.code-workspace b/todos.code-workspace
index d9d26a67..82853849 100644
--- a/todos.code-workspace
+++ b/todos.code-workspace
@@ -13,6 +13,7 @@
     "[postcss]": {
       "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
-    "cSpell.words": ["testid"]
+    "cSpell.words": ["autouse", "testid"],
+    "svelte.enable-ts-plugin": true
   }
 }