diff --git a/apps/web/migrations/0001_small_sandman.sql b/apps/web/migrations/0001_small_sandman.sql
new file mode 100644
index 00000000..8e700869
--- /dev/null
+++ b/apps/web/migrations/0001_small_sandman.sql
@@ -0,0 +1 @@
+ALTER TABLE `project_settings` DROP COLUMN `updated_at`;
\ No newline at end of file
diff --git a/apps/web/migrations/meta/0001_snapshot.json b/apps/web/migrations/meta/0001_snapshot.json
new file mode 100644
index 00000000..0cae8705
--- /dev/null
+++ b/apps/web/migrations/meta/0001_snapshot.json
@@ -0,0 +1,888 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "607db8e6-13b2-4689-9b43-19cb098c9d46",
+  "prevId": "9d8306a6-bd63-4a9a-95ff-88847f376235",
+  "tables": {
+    "accounts": {
+      "name": "accounts",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "account_id": {
+          "name": "account_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider_id": {
+          "name": "provider_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "id_token": {
+          "name": "id_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "access_token_expires_at": {
+          "name": "access_token_expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "refresh_token_expires_at": {
+          "name": "refresh_token_expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "accounts_user_id_idx": {
+          "name": "accounts_user_id_idx",
+          "columns": [
+            "user_id"
+          ],
+          "isUnique": false
+        },
+        "provider_compound_idx": {
+          "name": "provider_compound_idx",
+          "columns": [
+            "provider_id",
+            "account_id"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "accounts_user_id_users_id_fk": {
+          "name": "accounts_user_id_users_id_fk",
+          "tableFrom": "accounts",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "invitations": {
+      "name": "invitations",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "organization_id": {
+          "name": "organization_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "role": {
+          "name": "role",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "status": {
+          "name": "status",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "inviter_id": {
+          "name": "inviter_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "org_email_idx": {
+          "name": "org_email_idx",
+          "columns": [
+            "organization_id",
+            "email"
+          ],
+          "isUnique": false
+        },
+        "invitations_expires_at_idx": {
+          "name": "invitations_expires_at_idx",
+          "columns": [
+            "expires_at"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "invitations_organization_id_organizations_id_fk": {
+          "name": "invitations_organization_id_organizations_id_fk",
+          "tableFrom": "invitations",
+          "tableTo": "organizations",
+          "columnsFrom": [
+            "organization_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "invitations_inviter_id_users_id_fk": {
+          "name": "invitations_inviter_id_users_id_fk",
+          "tableFrom": "invitations",
+          "tableTo": "users",
+          "columnsFrom": [
+            "inviter_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "members": {
+      "name": "members",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "organization_id": {
+          "name": "organization_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "role": {
+          "name": "role",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "org_user_idx": {
+          "name": "org_user_idx",
+          "columns": [
+            "organization_id",
+            "user_id"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "members_organization_id_organizations_id_fk": {
+          "name": "members_organization_id_organizations_id_fk",
+          "tableFrom": "members",
+          "tableTo": "organizations",
+          "columnsFrom": [
+            "organization_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "members_user_id_users_id_fk": {
+          "name": "members_user_id_users_id_fk",
+          "tableFrom": "members",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "organizations": {
+      "name": "organizations",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "slug": {
+          "name": "slug",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "logo": {
+          "name": "logo",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "plan": {
+          "name": "plan",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'free'"
+        },
+        "api_key": {
+          "name": "api_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "metadata": {
+          "name": "metadata",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "organizations_slug_unique": {
+          "name": "organizations_slug_unique",
+          "columns": [
+            "slug"
+          ],
+          "isUnique": true
+        },
+        "organizations_api_key_unique": {
+          "name": "organizations_api_key_unique",
+          "columns": [
+            "api_key"
+          ],
+          "isUnique": true
+        },
+        "slug_idx": {
+          "name": "slug_idx",
+          "columns": [
+            "slug"
+          ],
+          "isUnique": false
+        },
+        "org_api_key_idx": {
+          "name": "org_api_key_idx",
+          "columns": [
+            "api_key"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "project_settings": {
+      "name": "project_settings",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "project_id": {
+          "name": "project_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "cache": {
+          "name": "cache",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "context": {
+          "name": "context",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "temperature": {
+          "name": "temperature",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "instructions": {
+          "name": "instructions",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "memory": {
+          "name": "memory",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "grammar": {
+          "name": "grammar",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "project_idx": {
+          "name": "project_idx",
+          "columns": [
+            "project_id"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "project_settings_project_id_projects_id_fk": {
+          "name": "project_settings_project_id_projects_id_fk",
+          "tableFrom": "project_settings",
+          "tableTo": "projects",
+          "columnsFrom": [
+            "project_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "projects": {
+      "name": "projects",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "slug": {
+          "name": "slug",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "organization_id": {
+          "name": "organization_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "org_idx": {
+          "name": "org_idx",
+          "columns": [
+            "organization_id"
+          ],
+          "isUnique": false
+        },
+        "slug_org_idx": {
+          "name": "slug_org_idx",
+          "columns": [
+            "slug",
+            "organization_id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "projects_organization_id_organizations_id_fk": {
+          "name": "projects_organization_id_organizations_id_fk",
+          "tableFrom": "projects",
+          "tableTo": "organizations",
+          "columnsFrom": [
+            "organization_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "sessions": {
+      "name": "sessions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "ip_address": {
+          "name": "ip_address",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "user_agent": {
+          "name": "user_agent",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "active_organization_id": {
+          "name": "active_organization_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "sessions_token_unique": {
+          "name": "sessions_token_unique",
+          "columns": [
+            "token"
+          ],
+          "isUnique": true
+        },
+        "user_id_idx": {
+          "name": "user_id_idx",
+          "columns": [
+            "user_id"
+          ],
+          "isUnique": false
+        },
+        "token_idx": {
+          "name": "token_idx",
+          "columns": [
+            "token"
+          ],
+          "isUnique": false
+        },
+        "expires_at_idx": {
+          "name": "expires_at_idx",
+          "columns": [
+            "expires_at"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "sessions_user_id_users_id_fk": {
+          "name": "sessions_user_id_users_id_fk",
+          "tableFrom": "sessions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users": {
+      "name": "users",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email_verified": {
+          "name": "email_verified",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "api_key": {
+          "name": "api_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        },
+        "users_api_key_unique": {
+          "name": "users_api_key_unique",
+          "columns": [
+            "api_key"
+          ],
+          "isUnique": true
+        },
+        "email_idx": {
+          "name": "email_idx",
+          "columns": [
+            "email"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "verifications": {
+      "name": "verifications",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "identifier": {
+          "name": "identifier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "identifier_idx": {
+          "name": "identifier_idx",
+          "columns": [
+            "identifier"
+          ],
+          "isUnique": false
+        },
+        "verifications_expires_at_idx": {
+          "name": "verifications_expires_at_idx",
+          "columns": [
+            "expires_at"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}
\ No newline at end of file
diff --git a/apps/web/migrations/meta/_journal.json b/apps/web/migrations/meta/_journal.json
index 783e6737..fdbf5511 100644
--- a/apps/web/migrations/meta/_journal.json
+++ b/apps/web/migrations/meta/_journal.json
@@ -8,6 +8,13 @@
       "when": 1736332317965,
       "tag": "0000_sad_red_shift",
       "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "6",
+      "when": 1736414139537,
+      "tag": "0001_small_sandman",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/web/package.json b/apps/web/package.json
index 6a7e9375..2929a394 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -35,7 +35,7 @@
     "@radix-ui/react-tooltip": "^1.1.6",
     "@react-email/components": "0.0.32",
     "@react-email/font": "^0.0.9",
-    "@tanstack/react-query": "^5.62.16",
+    "@tanstack/react-query": "^5.63.0",
     "@trpc/client": "^11.0.0-rc.688",
     "@trpc/react-query": "^11.0.0-rc.688",
     "@trpc/server": "^11.0.0-rc.688",
@@ -47,7 +47,7 @@
     "drizzle-orm": "^0.38.3",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.469.0",
-    "motion": "^11.16.0",
+    "motion": "^11.16.1",
     "next": "15.1.4",
     "next-international": "^1.3.1",
     "next-safe-action": "^7.10.2",
@@ -66,7 +66,7 @@
     "zod": "^3.24.1"
   },
   "devDependencies": {
-    "@tanstack/react-query-devtools": "^5.62.16",
+    "@tanstack/react-query-devtools": "^5.63.0",
     "@types/node": "^22",
     "@types/react": "^19",
     "react-email": "3.0.5",
diff --git a/apps/web/src/app/[locale]/(dashboard)/(sidebar)/[team]/[project]/page.tsx b/apps/web/src/app/[locale]/(dashboard)/(sidebar)/[organization]/[project]/page.tsx
similarity index 66%
rename from apps/web/src/app/[locale]/(dashboard)/(sidebar)/[team]/[project]/page.tsx
rename to apps/web/src/app/[locale]/(dashboard)/(sidebar)/[organization]/[project]/page.tsx
index dc8b2421..82afcafb 100644
--- a/apps/web/src/app/[locale]/(dashboard)/(sidebar)/[team]/[project]/page.tsx
+++ b/apps/web/src/app/[locale]/(dashboard)/(sidebar)/[organization]/[project]/page.tsx
@@ -1,10 +1,10 @@
 import { Activity } from "@/components/activity";
-import { TranslationsChart } from "@/components/charts/translations";
+import { AnalyticsChart } from "@/components/charts/analytics";
 
 export default function Page() {
   return (
     <div>
-      <TranslationsChart />
+      <AnalyticsChart />
 
       <div className="h-10 mt-10 w-full bg-dotted" />
 
diff --git a/apps/web/src/app/[locale]/(dashboard)/(sidebar)/[organization]/[project]/settings/page.tsx b/apps/web/src/app/[locale]/(dashboard)/(sidebar)/[organization]/[project]/settings/page.tsx
new file mode 100644
index 00000000..457d352e
--- /dev/null
+++ b/apps/web/src/app/[locale]/(dashboard)/(sidebar)/[organization]/[project]/settings/page.tsx
@@ -0,0 +1,27 @@
+import { Settings } from "@/components/settings";
+import { HydrateClient, trpc } from "@/trpc/server";
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ organization: string; project: string }>;
+}) {
+  const { organization, project } = await params;
+
+  trpc.project.getBySlug.prefetch({
+    slug: project,
+    organizationId: organization,
+  });
+
+  trpc.user.me.prefetch();
+
+  trpc.organization.getById.prefetch({
+    organizationId: organization,
+  });
+
+  return (
+    <HydrateClient>
+      <Settings />
+    </HydrateClient>
+  );
+}
diff --git a/apps/web/src/app/[locale]/(dashboard)/(sidebar)/[team]/[project]/tuning/page.tsx b/apps/web/src/app/[locale]/(dashboard)/(sidebar)/[organization]/[project]/tuning/page.tsx
similarity index 100%
rename from apps/web/src/app/[locale]/(dashboard)/(sidebar)/[team]/[project]/tuning/page.tsx
rename to apps/web/src/app/[locale]/(dashboard)/(sidebar)/[organization]/[project]/tuning/page.tsx
diff --git a/apps/web/src/app/[locale]/(dashboard)/(sidebar)/[team]/[project]/settings/page.tsx b/apps/web/src/app/[locale]/(dashboard)/(sidebar)/[team]/[project]/settings/page.tsx
deleted file mode 100644
index 2d4849fa..00000000
--- a/apps/web/src/app/[locale]/(dashboard)/(sidebar)/[team]/[project]/settings/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Settings } from "@/components/settings";
-
-export default function Page() {
-  return <Settings />;
-}
diff --git a/apps/web/src/app/[locale]/(dashboard)/(sidebar)/[team]/team/page.tsx b/apps/web/src/app/[locale]/(dashboard)/(sidebar)/[team]/team/page.tsx
deleted file mode 100644
index d6726784..00000000
--- a/apps/web/src/app/[locale]/(dashboard)/(sidebar)/[team]/team/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import TeamManagement from "@/components/team-management";
-
-export default function Page() {
-  return <TeamManagement />;
-}
diff --git a/apps/web/src/app/[locale]/(dashboard)/(sidebar)/layout.tsx b/apps/web/src/app/[locale]/(dashboard)/(sidebar)/layout.tsx
index e870ad4d..e8d8da16 100644
--- a/apps/web/src/app/[locale]/(dashboard)/(sidebar)/layout.tsx
+++ b/apps/web/src/app/[locale]/(dashboard)/(sidebar)/layout.tsx
@@ -1,5 +1,6 @@
 import { ComingSoon } from "@/components/coming-soon";
 import { Header } from "@/components/dashboard/header";
+import { GlobalModals } from "@/components/modals";
 import { Sidebar } from "@/components/sidebar";
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 import { Toaster } from "@/components/ui/sonner";
@@ -33,11 +34,12 @@ export default async function Layout({
                 {children}
 
                 {process.env.NODE_ENV !== "development" && <ComingSoon />}
-                <Toaster position="bottom-left" />
+                <Toaster />
               </main>
             </SidebarInset>
           </div>
         </SidebarProvider>
+        <GlobalModals />
       </NuqsAdapter>
     </TRPCProvider>
   );
diff --git a/apps/web/src/app/[locale]/(dashboard)/invite/[invitationId]/page.tsx b/apps/web/src/app/[locale]/(dashboard)/invite/[invitationId]/page.tsx
new file mode 100644
index 00000000..c5094758
--- /dev/null
+++ b/apps/web/src/app/[locale]/(dashboard)/invite/[invitationId]/page.tsx
@@ -0,0 +1,56 @@
+import { acceptInvitation } from "@/lib/auth/queries";
+import { getSession } from "@/lib/session";
+import { trpc } from "@/trpc/server";
+import { redirect } from "next/navigation";
+
+/**
+ * Page component for handling team invitations
+ *
+ * Flow:
+ * 1. Validates invitation ID exists
+ * 2. Checks if user is logged in, redirects to login if not
+ * 3. Accepts the invitation
+ * 4. Redirects to organization dashboard if successful
+ */
+export default async function Page({
+  params,
+}: {
+  params: { invitationId: string };
+}) {
+  const { invitationId } = await params;
+
+  // Validate invitation ID exists
+  if (!invitationId) {
+    redirect("/login");
+  }
+
+  // Check if user is logged in
+  const session = await getSession();
+
+  if (!session) {
+    // Redirect to login with return URL to invitation page
+    redirect(
+      `/login?redirect=${encodeURIComponent(`/invite/${invitationId}`)}`,
+    );
+  }
+
+  // Accept the invitation
+  const invite = await acceptInvitation(invitationId);
+
+  if (!invite) {
+    redirect("/login");
+  }
+
+  // Get organization details
+  const organization = await trpc.organization.getById({
+    organizationId: invite.invitation.organizationId,
+  });
+
+  // Redirect to organization dashboard if found
+  if (organization) {
+    redirect(`/${organization.slug}/default`);
+  }
+
+  // Fallback redirect to login
+  redirect("/login");
+}
diff --git a/apps/web/src/app/[locale]/layout.tsx b/apps/web/src/app/[locale]/layout.tsx
index ce671889..20a382c6 100644
--- a/apps/web/src/app/[locale]/layout.tsx
+++ b/apps/web/src/app/[locale]/layout.tsx
@@ -1,9 +1,9 @@
 import "../globals.css";
 
-import { I18nProviderClient } from "@/locales/client";
 import { OpenPanelComponent } from "@openpanel/nextjs";
 import type { Metadata } from "next";
 import { Geist_Mono } from "next/font/google";
+import { Providers } from "./providers";
 
 const geistMono = Geist_Mono({
   variable: "--font-geist-mono",
@@ -27,14 +27,14 @@ export default async function RootLayout({
   return (
     <html lang={locale} className="dark bg-noise bg-background">
       <body className={`${geistMono.variable} antialiased`}>
+        <Providers locale={locale}>{children}</Providers>
+
         <OpenPanelComponent
           clientId={process.env.NEXT_PUBLIC_OPEN_PANEL_CLIENT_ID!}
           clientSecret={process.env.OPEN_PANEL_CLIENT_SECRET!}
           trackScreenViews={true}
           disabled={process.env.NODE_ENV !== "production"}
         />
-
-        <I18nProviderClient locale={locale}>{children}</I18nProviderClient>
       </body>
     </html>
   );
diff --git a/apps/web/src/app/[locale]/not-found.tsx b/apps/web/src/app/[locale]/not-found.tsx
new file mode 100644
index 00000000..04644546
--- /dev/null
+++ b/apps/web/src/app/[locale]/not-found.tsx
@@ -0,0 +1,13 @@
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <div className="h-screen flex flex-col items-center justify-center text-center text-sm text-secondary">
+      <h2 className="text-xl font-semibold mb-2">Not Found</h2>
+      <p className="mb-4">Could not find requested resource</p>
+      <Link href="/" className="underline">
+        Return Home
+      </Link>
+    </div>
+  );
+}
diff --git a/apps/web/src/app/[locale]/providers.tsx b/apps/web/src/app/[locale]/providers.tsx
new file mode 100644
index 00000000..90dc885a
--- /dev/null
+++ b/apps/web/src/app/[locale]/providers.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { I18nProviderClient } from "@/locales/client";
+import type { ReactNode } from "react";
+
+type ProviderProps = {
+  locale: string;
+  children: ReactNode;
+};
+
+export function Providers({ locale, children }: ProviderProps) {
+  return <I18nProviderClient locale={locale}>{children}</I18nProviderClient>;
+}
diff --git a/apps/web/src/app/api/trpc/[trpc] /route.ts b/apps/web/src/app/api/trpc/[trpc]/route.ts
similarity index 100%
rename from apps/web/src/app/api/trpc/[trpc] /route.ts
rename to apps/web/src/app/api/trpc/[trpc]/route.ts
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 1f3971e9..59ca767d 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -62,7 +62,7 @@ body {
     --muted-foreground: 0 0% 33.9%;
     --accent: 0 0% 14.9%;
     --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
+    --destructive: 359 100% 60%;
     --destructive-foreground: 0 0% 98%;
     --border: 0 0% 14.9%;
     --input: 0 0% 14.9%;
@@ -111,3 +111,7 @@ body {
 .scroll-smooth {
   scroll-behavior: smooth;
 }
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
diff --git a/apps/web/src/components/charts/translations.tsx b/apps/web/src/components/charts/analytics.tsx
similarity index 98%
rename from apps/web/src/components/charts/translations.tsx
rename to apps/web/src/components/charts/analytics.tsx
index 457ff013..a12df038 100644
--- a/apps/web/src/components/charts/translations.tsx
+++ b/apps/web/src/components/charts/analytics.tsx
@@ -31,7 +31,7 @@ const chartData = [
   { month: "Oct", value: 5000 },
 ];
 
-export function TranslationsChart() {
+export function AnalyticsChart() {
   const t = useI18n();
 
   return (
diff --git a/apps/web/src/components/copy-input.tsx b/apps/web/src/components/copy-input.tsx
index d8937cde..235be392 100644
--- a/apps/web/src/components/copy-input.tsx
+++ b/apps/web/src/components/copy-input.tsx
@@ -20,18 +20,17 @@ export function CopyInput({ value, className, ...props }: CopyInputProps) {
   };
 
   return (
-    <div className="relative flex items-center">
+    <div className="relative flex items-center cursor-pointer" onClick={onCopy}>
       <Input
         value={value}
-        readOnly
-        className={cn("pr-12", className)}
+        className={cn("pr-12 cursor-pointer", className)}
         {...props}
+        readOnly
       />
       <Button
-        onClick={onCopy}
         variant="ghost"
         size="icon"
-        className="absolute right-0 h-full px-3 transition-opacity hover:bg-transparent"
+        className="absolute right-0 h-full px-3 transition-opacity hover:bg-transparent pointer-events-none"
       >
         {copied ? (
           <Check className="h-4 w-4 text-green-500" />
diff --git a/apps/web/src/components/danger-zone.tsx b/apps/web/src/components/danger-zone.tsx
index 56da9cb0..cd3e3e8a 100644
--- a/apps/web/src/components/danger-zone.tsx
+++ b/apps/web/src/components/danger-zone.tsx
@@ -57,24 +57,32 @@ export function DangerZone({
               <Button variant="destructive">{buttonText}</Button>
             </DialogTrigger>
             <DialogContent>
-              <DialogHeader>
-                <DialogTitle>{t("dangerZone.dialog.title")}</DialogTitle>
+              <DialogHeader className="mb-4">
+                <DialogTitle className="mb-2">
+                  {t("dangerZone.dialog.title")}
+                </DialogTitle>
                 <DialogDescription>
                   {t("dangerZone.dialog.description")}
                 </DialogDescription>
               </DialogHeader>
+
               <Input
                 value={deleteText}
                 onChange={(e) => setDeleteText(e.target.value)}
                 placeholder={t("dangerZone.dialog.placeholder")}
               />
-              <Button
-                variant="destructive"
-                onClick={handleDelete}
-                disabled={deleteText !== "DELETE"}
-              >
-                {t("dangerZone.dialog.confirm")}
-              </Button>
+              <div className="flex gap-2 justify-end">
+                <Button variant="outline" onClick={() => setOpen(false)}>
+                  {t("dangerZone.dialog.cancel")}
+                </Button>
+                <Button
+                  variant="destructive"
+                  onClick={handleDelete}
+                  disabled={deleteText !== "DELETE"}
+                >
+                  {t("dangerZone.dialog.confirm")}
+                </Button>
+              </div>
             </DialogContent>
           </Dialog>
         </CardContent>
diff --git a/apps/web/src/components/modals/create-project.tsx b/apps/web/src/components/modals/create-project.tsx
new file mode 100644
index 00000000..287b7fa6
--- /dev/null
+++ b/apps/web/src/components/modals/create-project.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { useCreateProjectModal } from "@/hooks/use-create-project-modal";
+import { useI18n } from "@/locales/client";
+import { trpc } from "@/trpc/client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+const formSchema = z.object({
+  name: z.string().min(1, "Project name is required"),
+});
+
+export function CreateProjectModal() {
+  const t = useI18n();
+  const { open, setOpen } = useCreateProjectModal();
+  const params = useParams();
+  const organizationId = params.organization as string;
+  const utils = trpc.useUtils();
+  const router = useRouter();
+
+  const createProject = trpc.project.create.useMutation({
+    onSuccess: (project) => {
+      utils.project.invalidate();
+      utils.organization.invalidate();
+
+      router.replace(`/${organizationId}/${project.slug}`);
+    },
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: "",
+    },
+  });
+
+  useEffect(() => {
+    if (open) {
+      form.reset();
+    }
+  }, [open]);
+
+  async function onSubmit(values: z.infer<typeof formSchema>) {
+    try {
+      await createProject.mutateAsync({
+        name: values.name,
+        organizationId,
+      });
+
+      form.reset();
+    } catch (error) {
+      console.error("Failed to create project:", error);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t("createProject.createProjectTitle")}</DialogTitle>
+        </DialogHeader>
+        <p className="text-sm text-secondary">
+          {t("createProject.createProjectDescription")}
+        </p>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-4 py-4"
+          >
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Project Name</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t("createProject.projectNamePlaceholder")}
+                      {...field}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <div className="flex gap-2 pt-4 justify-end">
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => setOpen(false)}
+                type="button"
+              >
+                {t("createProject.cancel")}
+              </Button>
+              <Button type="submit" size="sm">
+                {t("createProject.createProjectButton")}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/components/modals/create-team.tsx b/apps/web/src/components/modals/create-team.tsx
new file mode 100644
index 00000000..fefdb46e
--- /dev/null
+++ b/apps/web/src/components/modals/create-team.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { useCreateTeamModal } from "@/hooks/use-create-team-modal";
+import { useI18n } from "@/locales/client";
+import { trpc } from "@/trpc/client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+const formSchema = z.object({
+  name: z.string().min(1, "Team name is required"),
+});
+
+export function CreateTeamModal() {
+  const t = useI18n();
+  const { open, setOpen } = useCreateTeamModal();
+  const router = useRouter();
+  const utils = trpc.useUtils();
+
+  const createTeam = trpc.organization.create.useMutation({
+    onSuccess: (team) => {
+      utils.organization.invalidate();
+      router.replace(`/${team.id}/default`);
+    },
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: "",
+    },
+  });
+
+  useEffect(() => {
+    if (open) {
+      form.reset();
+    }
+  }, [open]);
+
+  async function onSubmit(values: z.infer<typeof formSchema>) {
+    try {
+      await createTeam.mutateAsync({
+        name: values.name,
+      });
+      form.reset();
+    } catch (error) {
+      console.error("Failed to create team:", error);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t("teamSelector.createTeamTitle")}</DialogTitle>
+        </DialogHeader>
+        <p className="text-sm text-secondary">
+          {t("createTeam.createTeamDescription")}
+        </p>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-4 py-4"
+          >
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t("createTeam.teamName")}</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t("createTeam.teamNamePlaceholder")}
+                      {...field}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <div className="flex gap-2 pt-4 justify-end">
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => setOpen(false)}
+                type="button"
+              >
+                {t("createTeam.cancel")}
+              </Button>
+              <Button type="submit" size="sm">
+                {t("createTeam.createTeamButton")}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/components/modals/index.tsx b/apps/web/src/components/modals/index.tsx
new file mode 100644
index 00000000..5af94388
--- /dev/null
+++ b/apps/web/src/components/modals/index.tsx
@@ -0,0 +1,13 @@
+import { CreateProjectModal } from "./create-project";
+import { CreateTeamModal } from "./create-team";
+import { InviteModal } from "./invite";
+
+export function GlobalModals() {
+  return (
+    <>
+      <CreateProjectModal />
+      <CreateTeamModal />
+      <InviteModal />
+    </>
+  );
+}
diff --git a/apps/web/src/components/modals/invite.tsx b/apps/web/src/components/modals/invite.tsx
new file mode 100644
index 00000000..2c14bdc1
--- /dev/null
+++ b/apps/web/src/components/modals/invite.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/spinner";
+import { useInviteModal } from "@/hooks/use-invite-modal";
+import { authClient } from "@/lib/auth/client";
+import { useI18n } from "@/locales/client";
+import { trpc } from "@/trpc/client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+export function InviteModal() {
+  const t = useI18n();
+  const { open, setOpen } = useInviteModal();
+  const utils = trpc.useUtils();
+
+  const form = useForm<{ email: string }>({
+    resolver: zodResolver(
+      z.object({
+        email: z.string().email(t("invite.validation.invalidEmail")),
+      }),
+    ),
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  useEffect(() => {
+    if (open) {
+      form.reset();
+    }
+  }, [open]);
+
+  async function onSubmit(values: { email: string }) {
+    try {
+      await authClient.organization.inviteMember({
+        email: values.email,
+        role: "member",
+      });
+
+      utils.organization.getInvites.invalidate();
+      form.reset();
+      setOpen(false);
+      toast.success(t("invite.success.title"), {
+        description: t("invite.success.description", { email: values.email }),
+      });
+    } catch (error) {
+      console.error("Failed to invite member:", error);
+      toast.error(t("invite.error.title"), {
+        description: t("invite.error.description"),
+      });
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t("invite.inviteMember")}</DialogTitle>
+        </DialogHeader>
+        <p className="text-sm text-secondary">
+          {t("invite.inviteDescription")}
+        </p>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-4 py-4"
+          >
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t("invite.emailLabel")}</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="email"
+                      placeholder={t("invite.emailPlaceholder")}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <div className="flex gap-2 pt-4 justify-end">
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => setOpen(false)}
+                type="button"
+              >
+                {t("invite.cancel")}
+              </Button>
+              <Button
+                type="submit"
+                size="sm"
+                disabled={form.formState.isSubmitting}
+              >
+                {form.formState.isSubmitting ? (
+                  <Spinner className="mr-2 h-4 w-4" />
+                ) : (
+                  t("invite.sendInvite")
+                )}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/components/settings-card.tsx b/apps/web/src/components/settings-card.tsx
index 8405697d..0c62094e 100644
--- a/apps/web/src/components/settings-card.tsx
+++ b/apps/web/src/components/settings-card.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { CopyInput } from "@/components/copy-input";
+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import {
@@ -10,9 +11,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Spinner } from "@/components/ui/spinner";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
 import { useI18n } from "@/locales/client";
+import { useState } from "react";
 import { toast } from "sonner";
 
 export function SettingsTitle({ title }: { title: string }) {
@@ -31,22 +35,68 @@ export function SettingsCard({
   type = "input",
   value,
   onChange,
+  onSave,
   checked,
   onCheckedChange,
   options,
   placeholder,
+  isLoading,
+  validate,
 }: {
   title: string;
   description: string;
   type?: "input" | "textarea" | "switch" | "select" | "copy-input";
   value?: string;
   onChange?: (value: string) => void;
+  onSave?: (value: string) => void;
   checked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
   options?: { label: string; value: string }[];
   placeholder?: string;
+  isLoading?: boolean;
+  validate?: "email" | "url" | "number" | "password" | "text";
 }) {
   const t = useI18n();
+  const [isSaving, setIsSaving] = useState(false);
+  const [inputValue, setInputValue] = useState(value ?? "");
+
+  const handleSave = async () => {
+    try {
+      setIsSaving(true);
+      await onSave?.(inputValue);
+      toast.success(t("settings.saved"), {
+        description: t("settings.savedDescription"),
+      });
+    } catch (error) {
+      toast.error(t("settings.error"), {
+        description: t("settings.errorDescription"),
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="mb-8 max-w-screen-xl">
+        <Card className="w-full bg-noise">
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <div>
+                <Skeleton className="h-5 w-[200px] mb-2" />
+                <Skeleton className="h-4 w-[300px]" />
+              </div>
+              {type === "switch" && <Skeleton className="h-6 w-10" />}
+              {type === "select" && <Skeleton className="h-10 w-[240px]" />}
+            </div>
+          </CardHeader>
+          <CardContent>
+            <Skeleton className="h-10 w-full" />
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
 
   return (
     <div className="mb-8 max-w-screen-xl">
@@ -64,7 +114,7 @@ export function SettingsCard({
                 checked={checked}
                 onCheckedChange={() => {
                   onCheckedChange?.(!!checked);
-                  toast(t("settings.saved"), {
+                  toast.success(t("settings.saved"), {
                     description: t("settings.savedDescription"),
                   });
                 }}
@@ -91,11 +141,29 @@ export function SettingsCard({
         </CardHeader>
         <CardContent>
           {type === "input" && (
-            <Input
-              value={value}
-              onChange={(e) => onChange?.(e.target.value)}
-              placeholder={placeholder}
-            />
+            <form
+              className="flex gap-2"
+              onSubmit={(e) => {
+                e.preventDefault();
+                handleSave();
+              }}
+            >
+              <Input
+                value={inputValue}
+                onChange={(e) => setInputValue?.(e.target.value)}
+                placeholder={placeholder}
+                type={validate}
+                required
+              />
+              <Button
+                type="submit"
+                disabled={isSaving}
+                className="flex items-center gap-2"
+              >
+                {isSaving && <Spinner size="sm" />}
+                {t("settings.save")}
+              </Button>
+            </form>
           )}
           {type === "textarea" && (
             <Textarea
diff --git a/apps/web/src/components/settings.tsx b/apps/web/src/components/settings.tsx
index d737132c..79b8b8d8 100644
--- a/apps/web/src/components/settings.tsx
+++ b/apps/web/src/components/settings.tsx
@@ -2,84 +2,14 @@
 
 import { useI18n } from "@/locales/client";
 import { useQueryState } from "nuqs";
-import { Account } from "./account";
-import { DangerZone } from "./danger-zone";
-import { SettingsCard, SettingsSeparator } from "./settings-card";
-import TeamManagement from "./team-management";
+import { AccountSettings } from "./settings/account";
+import { ProjectSettings } from "./settings/project";
+import { TeamSettings } from "./settings/team";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
 
-function ProjectSettings() {
-  const t = useI18n();
-
-  return (
-    <div>
-      <SettingsCard
-        title={t("settings.project.name.title")}
-        description={t("settings.project.name.description")}
-        type="input"
-        placeholder={t("settings.project.name.placeholder")}
-      />
-
-      <SettingsCard
-        title={t("settings.project.id.title")}
-        description={t("settings.project.id.description")}
-        type="copy-input"
-        placeholder={t("settings.project.id.placeholder")}
-        value="1234567890"
-      />
-
-      <SettingsSeparator />
-
-      <DangerZone
-        title={t("settings.project.delete.title")}
-        description={t("settings.project.delete.description")}
-        buttonText={t("settings.project.delete.button")}
-        onDelete={() => {}}
-      />
-    </div>
-  );
-}
-
-function TeamSettings() {
-  const t = useI18n();
-
-  return (
-    <div>
-      <SettingsCard
-        title={t("settings.team.name.title")}
-        description={t("settings.team.name.description")}
-        type="input"
-        placeholder={t("settings.team.name.placeholder")}
-      />
-
-      <SettingsCard
-        title={t("settings.team.billing.title")}
-        description={t("settings.team.billing.description")}
-        type="select"
-        options={[
-          { label: t("settings.team.billing.free"), value: "free" },
-          { label: t("settings.team.billing.pro"), value: "pro" },
-        ]}
-        value="free"
-      />
-
-      <SettingsCard
-        title={t("settings.team.apiKey.title")}
-        description={t("settings.team.apiKey.description")}
-        type="copy-input"
-        placeholder={t("settings.team.apiKey.placeholder")}
-        value="api_1234567890"
-      />
-
-      <SettingsSeparator />
-
-      <TeamManagement />
-    </div>
-  );
-}
-
 export function Settings() {
   const t = useI18n();
+
   const [tab, setTab] = useQueryState("tab", {
     defaultValue: "project",
   });
@@ -89,38 +19,44 @@ export function Settings() {
       id: "project",
       title: t("settings.tabs.project"),
     },
-    {
-      id: "account",
-      title: t("settings.tabs.account"),
-    },
     {
       id: "team",
       title: t("settings.tabs.team"),
     },
+    {
+      id: "account",
+      title: t("settings.tabs.account"),
+    },
   ];
 
   return (
-    <Tabs value={tab} onValueChange={setTab} className="w-full px-8">
-      <TabsList className="w-full justify-start rounded-none h-auto p-0 bg-transparent space-x-6 mb-4 mt-5">
-        {tabs.map((tab) => (
-          <TabsTrigger
-            key={tab.id}
-            value={tab.id}
-            className="rounded-none border-b-2 border-transparent text-secondary data-[state=active]:border-white data-[state=active]:bg-transparent px-0 py-2"
-          >
-            {tab.title}
-          </TabsTrigger>
-        ))}
-      </TabsList>
-      <TabsContent value="project">
-        <ProjectSettings />
-      </TabsContent>
-      <TabsContent value="account">
-        <Account />
-      </TabsContent>
-      <TabsContent value="team">
-        <TeamSettings />
-      </TabsContent>
-    </Tabs>
+    <div className="w-full px-8">
+      <h2 className="text-lg p-8 pb-4 pl-0 pt-6 font-normal font-mono">
+        Settings
+      </h2>
+
+      <Tabs value={tab} onValueChange={setTab}>
+        <TabsList className="w-full justify-start rounded-none h-auto p-0 bg-transparent space-x-6 mb-4">
+          {tabs.map((tab) => (
+            <TabsTrigger
+              key={tab.id}
+              value={tab.id}
+              className="rounded-none border-b-2 border-transparent text-secondary data-[state=active]:border-white data-[state=active]:bg-transparent px-0 py-2"
+            >
+              {tab.title}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        <TabsContent value="project">
+          <ProjectSettings />
+        </TabsContent>
+        <TabsContent value="account">
+          <AccountSettings />
+        </TabsContent>
+        <TabsContent value="team">
+          <TeamSettings />
+        </TabsContent>
+      </Tabs>
+    </div>
   );
 }
diff --git a/apps/web/src/components/account.tsx b/apps/web/src/components/settings/account.tsx
similarity index 56%
rename from apps/web/src/components/account.tsx
rename to apps/web/src/components/settings/account.tsx
index b0087b15..a0d12006 100644
--- a/apps/web/src/components/account.tsx
+++ b/apps/web/src/components/settings/account.tsx
@@ -1,33 +1,48 @@
 "use client";
 
+import { DangerZone } from "@/components/danger-zone";
+import { SettingsCard, SettingsSeparator } from "@/components/settings-card";
 import { useI18n } from "@/locales/client";
-import { DangerZone } from "./danger-zone";
-import { SettingsCard, SettingsSeparator } from "./settings-card";
+import { trpc } from "@/trpc/client";
 
-export function Account() {
+export function AccountSettings() {
   const t = useI18n();
+  const [data] = trpc.user.me.useSuspenseQuery();
+  const updateUser = trpc.user.update.useMutation();
 
   return (
     <div>
       <SettingsCard
         title={t("account.fullName.title")}
         description={t("account.fullName.description")}
-        type="input"
         placeholder={t("account.fullName.placeholder")}
+        value={data?.name ?? ""}
+        onSave={async (value) => {
+          await updateUser.mutateAsync({
+            name: value,
+          });
+        }}
       />
 
       <SettingsCard
         title={t("account.email.title")}
         description={t("account.email.description")}
         type="input"
+        validate="email"
         placeholder={t("account.email.placeholder")}
+        value={data?.email ?? ""}
+        onSave={async (value) => {
+          await updateUser.mutateAsync({
+            email: value,
+          });
+        }}
       />
 
       <SettingsCard
         title={t("account.apiKey.title")}
         description={t("account.apiKey.description")}
         type="copy-input"
-        value="api_1234567890"
+        value={data?.apiKey ?? ""}
       />
 
       <SettingsSeparator />
diff --git a/apps/web/src/components/settings/index.tsx b/apps/web/src/components/settings/index.tsx
new file mode 100644
index 00000000..80581df5
--- /dev/null
+++ b/apps/web/src/components/settings/index.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useCreateProjectModal } from "@/hooks/use-create-project-modal";
+import { useCreateTeamModal } from "@/hooks/use-create-team-modal";
+import { useI18n } from "@/locales/client";
+import { useQueryState } from "nuqs";
+import { AccountSettings } from "./account";
+import { ProjectSettings } from "./project";
+import { TeamSettings } from "./team";
+
+export function Settings() {
+  const t = useI18n();
+  const { setOpen: setOpenProject } = useCreateProjectModal();
+  const { setOpen: setOpenTeam } = useCreateTeamModal();
+
+  const [tab, setTab] = useQueryState("tab", {
+    defaultValue: "project",
+  });
+
+  const tabs = [
+    {
+      id: "project",
+      title: t("settings.tabs.project"),
+    },
+    {
+      id: "team",
+      title: t("settings.tabs.team"),
+    },
+    {
+      id: "account",
+      title: t("settings.tabs.account"),
+    },
+  ];
+
+  return (
+    <Tabs value={tab} onValueChange={setTab} className="w-full px-8">
+      <div className="flex items-center justify-between mb-4 mt-5 max-w-screen-xl">
+        <TabsList className="justify-start rounded-none h-auto p-0 bg-transparent space-x-6">
+          {tabs.map((tab) => (
+            <TabsTrigger
+              key={tab.id}
+              value={tab.id}
+              className="rounded-none border-b-2 border-transparent text-secondary data-[state=active]:border-white data-[state=active]:bg-transparent px-0 py-2"
+            >
+              {tab.title}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        {tab === "project" && (
+          <Button size="sm" onClick={() => setOpenProject(true)}>
+            {t("settings.addProject")}
+          </Button>
+        )}
+        {tab === "team" && (
+          <Button size="sm" onClick={() => setOpenTeam(true)}>
+            {t("settings.addTeam")}
+          </Button>
+        )}
+      </div>
+      <TabsContent value="project">
+        <ProjectSettings />
+      </TabsContent>
+
+      <TabsContent value="team">
+        <TeamSettings />
+      </TabsContent>
+
+      <TabsContent value="account">
+        <AccountSettings />
+      </TabsContent>
+    </Tabs>
+  );
+}
diff --git a/apps/web/src/components/settings/project.tsx b/apps/web/src/components/settings/project.tsx
new file mode 100644
index 00000000..4f145869
--- /dev/null
+++ b/apps/web/src/components/settings/project.tsx
@@ -0,0 +1,77 @@
+import { DangerZone } from "@/components/danger-zone";
+import { SettingsCard, SettingsSeparator } from "@/components/settings-card";
+import { useI18n } from "@/locales/client";
+import { trpc } from "@/trpc/client";
+import { useParams, useRouter } from "next/navigation";
+
+export function ProjectSettings() {
+  const t = useI18n();
+  const router = useRouter();
+
+  const { organization, project } = useParams();
+
+  const trpcUtils = trpc.useUtils();
+
+  const [data] = trpc.project.getBySlug.useSuspenseQuery({
+    slug: project as string,
+    organizationId: organization as string,
+  });
+
+  const updateMutation = trpc.project.update.useMutation({
+    onSuccess: () => {
+      trpcUtils.organization.getAll.invalidate();
+    },
+  });
+
+  const deleteMutation = trpc.project.delete.useMutation({
+    onSuccess: () => {
+      trpcUtils.organization.getAll.invalidate();
+      router.replace(`/${organization}/default`);
+    },
+  });
+
+  return (
+    <div>
+      <SettingsCard
+        title={t("settings.project.name.title")}
+        description={t("settings.project.name.description")}
+        type="input"
+        placeholder={t("settings.project.name.placeholder")}
+        value={data?.name}
+        onSave={async (value) => {
+          const updated = await updateMutation.mutateAsync({
+            slug: project as string,
+            organizationId: organization as string,
+            name: value,
+          });
+          router.replace(`/${organization}/${updated.slug}/settings`);
+        }}
+      />
+
+      <SettingsCard
+        title={t("settings.project.id.title")}
+        description={t("settings.project.id.description")}
+        type="copy-input"
+        placeholder={t("settings.project.id.placeholder")}
+        value={data?.id}
+      />
+
+      {project !== "default" && (
+        <>
+          <SettingsSeparator />
+          <DangerZone
+            title={t("settings.project.delete.title")}
+            description={t("settings.project.delete.description")}
+            buttonText={t("settings.project.delete.button")}
+            onDelete={() => {
+              deleteMutation.mutate({
+                slug: project as string,
+                organizationId: organization as string,
+              });
+            }}
+          />
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/settings/team.tsx b/apps/web/src/components/settings/team.tsx
new file mode 100644
index 00000000..54a12dfd
--- /dev/null
+++ b/apps/web/src/components/settings/team.tsx
@@ -0,0 +1,73 @@
+import { DangerZone } from "@/components/danger-zone";
+import { SettingsCard, SettingsSeparator } from "@/components/settings-card";
+import { TeamManagement } from "@/components/team-management";
+import { useI18n } from "@/locales/client";
+import { trpc } from "@/trpc/client";
+import { useParams, useRouter } from "next/navigation";
+
+export function TeamSettings() {
+  const t = useI18n();
+  const { organization } = useParams();
+  const router = useRouter();
+
+  const utils = trpc.useUtils();
+
+  const [data] = trpc.organization.getById.useSuspenseQuery({
+    organizationId: organization as string,
+  });
+
+  const updateMutation = trpc.organization.update.useMutation({
+    onSuccess: () => {
+      utils.organization.getAll.invalidate();
+    },
+  });
+
+  const deleteMutation = trpc.organization.delete.useMutation({
+    onSuccess: () => {
+      router.replace("/");
+    },
+  });
+
+  return (
+    <div>
+      <SettingsCard
+        title={t("settings.team.name.title")}
+        description={t("settings.team.name.description")}
+        type="input"
+        placeholder={t("settings.team.name.placeholder")}
+        value={data?.name}
+        onSave={async (value) => {
+          await updateMutation.mutateAsync({
+            organizationId: organization as string,
+            name: value,
+          });
+        }}
+      />
+
+      <SettingsCard
+        title={t("settings.team.apiKey.title")}
+        description={t("settings.team.apiKey.description")}
+        type="copy-input"
+        placeholder={t("settings.team.apiKey.placeholder")}
+        value={data?.apiKey}
+      />
+
+      <SettingsSeparator />
+
+      <TeamManagement />
+
+      <SettingsSeparator />
+
+      <DangerZone
+        title="Delete Team"
+        description="Permanently delete this team and all its data"
+        buttonText="Delete Team"
+        onDelete={() => {
+          deleteMutation.mutate({
+            organizationId: organization as string,
+          });
+        }}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/src/components/sidebar.tsx b/apps/web/src/components/sidebar.tsx
index f4b5e62b..8cfc9f17 100644
--- a/apps/web/src/components/sidebar.tsx
+++ b/apps/web/src/components/sidebar.tsx
@@ -29,7 +29,7 @@ export function Sidebar() {
     {
       icon: MdOutlineStackedBarChart,
       path: "/",
-      isActive: pathname.endsWith(`/${params.team}/${params.project}`),
+      isActive: pathname.endsWith(`/${params.organization}/${params.project}`),
     },
     {
       icon: MdGraphicEq,
@@ -50,7 +50,7 @@ export function Sidebar() {
         className="border-r border-border bg-noise overflow-hidden"
       >
         <SidebarHeader className="flex justify-center items-center h-[70px] border-b">
-          <Link href={`/${params.team}/${params.project}`}>
+          <Link href={`/${params.organization}/${params.project}`}>
             <Logo />
           </Link>
         </SidebarHeader>
@@ -71,7 +71,7 @@ export function Sidebar() {
                       })}
                     >
                       <Link
-                        href={`/${params.team}/${params.project}${item.path}`}
+                        href={`/${params.organization}/${params.project}${item.path}`}
                         prefetch
                       >
                         <item.icon />
diff --git a/apps/web/src/components/team-management.tsx b/apps/web/src/components/team-management.tsx
index fcfc34b8..9daedc2a 100644
--- a/apps/web/src/components/team-management.tsx
+++ b/apps/web/src/components/team-management.tsx
@@ -1,31 +1,211 @@
 "use client";
 
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useInviteModal } from "@/hooks/use-invite-modal";
+import { useI18n } from "@/locales/client";
+import { trpc } from "@/trpc/client";
+import { MoreHorizontal, Search } from "lucide-react";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "./ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { useI18n } from "@/locales/client";
-import { ChevronDown, MoreHorizontal, Search } from "lucide-react";
-
-const members = [
-  {
-    id: 1,
-    name: "Pontus Abrahamsson",
-    email: "pontus@lostisland.co",
-    role: "Owner",
-    avatar: "/placeholder.svg",
-  },
-];
-
-export default function TeamManagement() {
+} from "./ui/dropdown-menu";
+import { Skeleton } from "./ui/skeleton";
+
+function Members({ searchQuery }: { searchQuery: string }) {
+  const t = useI18n();
+  const params = useParams();
+
+  const { data: members, isLoading: membersLoading } =
+    trpc.organization.getMembers.useQuery({
+      organizationId: params.organization as string,
+    });
+
+  const filteredMembers = members?.filter((member) => {
+    const searchLower = searchQuery.toLowerCase();
+    return (
+      member.user.name?.toLowerCase().includes(searchLower) ||
+      member.user.email?.toLowerCase().includes(searchLower)
+    );
+  });
+
+  if (membersLoading) {
+    return (
+      <div className="border border-border">
+        <div className="p-4 flex items-center gap-4">
+          <div className="flex items-center gap-3 flex-1">
+            <Skeleton className="h-10 w-10 rounded-full" />
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-[150px]" />
+              <Skeleton className="h-3 w-[200px]" />
+            </div>
+          </div>
+          <Skeleton className="h-4 w-[60px]" />
+          <Skeleton className="h-8 w-8" />
+        </div>
+      </div>
+    );
+  }
+
+  if (!filteredMembers?.length) {
+    return (
+      <div className="border border-border p-8 text-center min-h-[500px] flex flex-col items-center justify-center">
+        <h3 className="text-md mb-2 text-sm">
+          {t("settings.team.members.noResults")}
+        </h3>
+        <p className="text-secondary text-xs">
+          {t("settings.team.members.tryDifferentSearch")}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="border border-border">
+      {filteredMembers?.map((member) => (
+        <div key={member.id} className="p-4 flex items-center gap-4">
+          <div className="flex items-center gap-3 flex-1">
+            <Avatar>
+              <AvatarImage src={member.user.image || undefined} />
+              <AvatarFallback>{member.user.name}</AvatarFallback>
+            </Avatar>
+            <div>
+              <div className="text-sm">{member.user.name}</div>
+              <div className="text-xs text-secondary">{member.user.email}</div>
+            </div>
+          </div>
+          <div className="text-sm text-secondary">
+            {t(
+              // @ts-ignore
+              `settings.team.members.roles.${member.role?.toLowerCase() ?? "member"}`,
+            )}
+          </div>
+          <Button variant="ghost" size="icon">
+            <MoreHorizontal className="h-4 w-4" />
+          </Button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function Invites({ searchQuery }: { searchQuery: string }) {
+  const t = useI18n();
+  const params = useParams();
+  const utils = trpc.useUtils();
+
+  const { data: invites, isLoading: invitesLoading } =
+    trpc.organization.getInvites.useQuery({
+      organizationId: params.organization as string,
+    });
+
+  const deleteInviteMutation = trpc.organization.deleteInvite.useMutation({
+    onSuccess: () => {
+      utils.organization.getInvites.invalidate();
+
+      toast.success(t("settings.team.members.deleteInviteSuccess"));
+    },
+    onError: () => {
+      toast.error(t("settings.team.members.deleteInviteError"));
+    },
+  });
+
+  const filteredInvites = invites?.filter((invite) => {
+    const searchLower = searchQuery.toLowerCase();
+    return invite.email.toLowerCase().includes(searchLower);
+  });
+
+  if (invitesLoading) {
+    return (
+      <div className="border border-border">
+        <div className="p-4 flex items-center gap-4">
+          <div className="flex items-center gap-3 flex-1">
+            <Skeleton className="h-10 w-10 rounded-full" />
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-[150px]" />
+              <Skeleton className="h-3 w-[200px]" />
+            </div>
+          </div>
+          <Skeleton className="h-4 w-[60px]" />
+          <Skeleton className="h-8 w-8" />
+        </div>
+      </div>
+    );
+  }
+
+  if (!filteredInvites?.length) {
+    return (
+      <div className="border border-border p-8 text-center min-h-[500px] flex flex-col items-center justify-center">
+        <h3 className="text-md mb-2 text-sm">
+          {t("settings.team.members.noPendingInvitations")}
+        </h3>
+        <p className="text-secondary text-xs">
+          {t("settings.team.members.inviteMembers")}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="border border-border">
+      {filteredInvites?.map((invite) => (
+        <div key={invite.id} className="p-4 flex items-center gap-4">
+          <div className="flex items-center gap-3 flex-1">
+            <Avatar>
+              <AvatarFallback>{invite.email[0]}</AvatarFallback>
+            </Avatar>
+            <div>
+              <div className="text-sm">{invite.email}</div>
+              <div className="text-xs text-secondary">
+                {t("settings.team.members.invitedBy", {
+                  name: invite.inviter.name,
+                })}
+              </div>
+            </div>
+          </div>
+          <div className="text-sm text-secondary">
+            {t(
+              // @ts-ignore
+              `settings.team.members.roles.${invite.role?.toLowerCase() ?? "member"}`,
+            )}
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                className="text-destructive"
+                onClick={() => {
+                  deleteInviteMutation.mutate({
+                    organizationId: params.organization as string,
+                    inviteId: invite.id,
+                  });
+                }}
+              >
+                {t("settings.team.members.deleteInvite")}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function TeamManagement() {
   const t = useI18n();
+  const [searchQuery, setSearchQuery] = useState("");
+  const { setOpen } = useInviteModal();
 
   return (
     <div className="w-full space-y-4 max-w-screen-xl">
@@ -45,103 +225,27 @@ export default function TeamManagement() {
           </TabsTrigger>
         </TabsList>
 
-        <div className="flex gap-4 mt-4">
+        <div className="flex mt-4 justify-between gap-4">
           <div className="relative flex-1">
             <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
             <Input
               placeholder={t("settings.team.members.filterPlaceholder")}
               className="pl-9 bg-transparent border-border"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
             />
           </div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="outline"
-                className="bg-transparent border-border"
-              >
-                {t("settings.team.members.allRoles")}
-                <ChevronDown className="ml-2 h-4 w-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              <DropdownMenuItem>
-                {t("settings.team.members.roles.owner")}
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                {t("settings.team.members.roles.admin")}
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                {t("settings.team.members.roles.member")}
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="outline"
-                className="bg-transparent border-border"
-              >
-                {t("settings.team.members.date")}
-                <ChevronDown className="ml-2 h-4 w-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              <DropdownMenuItem>
-                {t("settings.team.members.dateSort.newest")}
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                {t("settings.team.members.dateSort.oldest")}
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+          <Button onClick={() => setOpen(true)} size="sm">
+            {t("settings.team.members.invite")}
+          </Button>
         </div>
 
         <TabsContent value="members" className="mt-4">
-          <div className="border border-border">
-            <div className="p-4 border-b border-border">
-              <div className="flex items-center gap-4">
-                <Checkbox className="border-border" />
-                <span className="text-sm text-secondary">
-                  {t("settings.team.members.selectAll", { count: 1 })}
-                </span>
-                <div className="ml-auto">
-                  <Button variant="ghost" size="icon">
-                    <MoreHorizontal className="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
-            </div>
-            {members.map((member) => (
-              <div key={member.id} className="p-4 flex items-center gap-4">
-                <Checkbox className="border-border" />
-                <div className="flex items-center gap-3 flex-1">
-                  <Avatar>
-                    <AvatarImage src={member.avatar} />
-                    <AvatarFallback>{member.name[0]}</AvatarFallback>
-                  </Avatar>
-                  <div>
-                    <div className="text-sm">{member.name}</div>
-                    <div className="text-xs text-secondary">{member.email}</div>
-                  </div>
-                </div>
-                <div className="text-sm text-secondary">{member.role}</div>
-                <Button variant="ghost" size="icon">
-                  <MoreHorizontal className="h-4 w-4" />
-                </Button>
-              </div>
-            ))}
-          </div>
+          <Members searchQuery={searchQuery} />
         </TabsContent>
 
         <TabsContent value="pending" className="mt-4">
-          <div className="border border-border p-8 text-center min-h-[500px] flex flex-col items-center justify-center">
-            <h3 className="text-md mb-2 text-sm">
-              {t("settings.team.members.noPendingInvitations")}
-            </h3>
-            <p className="text-secondary text-xs">
-              {t("settings.team.members.inviteMembers")}
-            </p>
-          </div>
+          <Invites searchQuery={searchQuery} />
         </TabsContent>
       </Tabs>
     </div>
diff --git a/apps/web/src/components/team-selector.tsx b/apps/web/src/components/team-selector.tsx
index fb9b1810..dca61c84 100644
--- a/apps/web/src/components/team-selector.tsx
+++ b/apps/web/src/components/team-selector.tsx
@@ -1,19 +1,12 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { useCreateProjectModal } from "@/hooks/use-create-project-modal";
+import { useCreateTeamModal } from "@/hooks/use-create-team-modal";
 import { useI18n } from "@/locales/client";
 import { trpc } from "@/trpc/client";
 import { Check, Plus, Settings } from "lucide-react";
@@ -25,13 +18,17 @@ export function TeamSelector() {
   const params = useParams();
   const router = useRouter();
 
+  const { setOpen: setCreateProjectModalOpen } = useCreateProjectModal();
+  const { setOpen: setCreateTeamModalOpen } = useCreateTeamModal();
+
   const [organizations] = trpc.organization.getAll.useSuspenseQuery();
 
-  const teamId = params.team;
+  const organizationId = params.organization;
   const projectSlug = params.project;
 
   const currentTeam = organizations
-    ? organizations.find((org) => org?.id === teamId) || organizations.at(0)
+    ? organizations.find((org) => org?.id === organizationId) ||
+      organizations.at(0)
     : null;
 
   const currentProject = currentTeam?.projects?.find(
@@ -39,8 +36,13 @@ export function TeamSelector() {
   );
 
   const [open, setOpen] = React.useState(false);
-  const [teamName, setTeamName] = React.useState("");
-  const [projectName, setProjectName] = React.useState("");
+
+  const handleSetActiveTeam = async (organizationId: string) => {
+    if (!organizationId) return;
+
+    router.push(`/${organizationId}/default`);
+    setOpen(false);
+  };
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -53,7 +55,7 @@ export function TeamSelector() {
             </div>
           </div>
           <span className="text-border text-xl">/</span>
-          <span>{currentProject?.name || t("teamSelector.project")}</span>
+          <span>{currentProject?.name}</span>
         </div>
       </PopoverTrigger>
       <PopoverContent className="w-[480px] h-[240px] p-0" sideOffset={10}>
@@ -62,82 +64,55 @@ export function TeamSelector() {
             <div className="p-4 text-xs font-medium text-secondary">
               {t("teamSelector.teams")}
             </div>
-            <div className="flex-1 overflow-y-auto">
+            <div className="flex-1 overflow-y-auto scrollbar-hide">
               {organizations.map((org) => (
                 <div
                   key={org?.id}
-                  className="group flex w-full items-center justify-between p-2 px-4 text-xs hover:bg-muted cursor-default"
+                  className="group flex w-full items-center justify-between p-2 px-4 text-xs hover:bg-muted cursor-default relative"
                   onClick={() => {
-                    router.push(`/${org?.id}/${projectSlug}`);
-                    setOpen(false);
+                    handleSetActiveTeam(org.id);
                   }}
                 >
                   <span>{org?.name}</span>
                   <div className="flex items-center gap-2">
                     <Settings
-                      className="h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 hover:text-foreground transition-opacity duration-100 absolute z-10 cursor-pointer"
+                      className="h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 hover:text-foreground transition-opacity duration-100 cursor-pointer"
                       onClick={(e) => {
                         e.stopPropagation();
                         setOpen(false);
                         router.push(
-                          `/${currentTeam?.id}/${projectSlug}/settings?tab=team`,
+                          `/${org?.id}/${projectSlug}/settings?tab=team`,
                         );
                       }}
                     />
                     {currentTeam?.id === org?.id && (
-                      <Check className="h-4 w-4 group-hover:opacity-0 transition-opacity duration-100" />
+                      <Check className="h-4 w-4 group-hover:hidden" />
                     )}
                   </div>
                 </div>
               ))}
             </div>
-            <Dialog>
-              <DialogTrigger asChild>
-                <button
-                  type="button"
-                  className="flex w-full items-center gap-2 p-2 pb-3 text-xs text-secondary hover:text-primary transition-colors duration-100 border-t border-border"
-                >
-                  <Plus className="h-4 w-4" />
-                  {t("teamSelector.createTeam")}
-                </button>
-              </DialogTrigger>
-              <DialogContent>
-                <DialogHeader>
-                  <DialogTitle>{t("teamSelector.createTeamTitle")}</DialogTitle>
-                </DialogHeader>
-                <div className="space-y-4 py-4">
-                  <div className="space-y-2">
-                    <Input
-                      placeholder={t("teamSelector.teamNamePlaceholder")}
-                      value={teamName}
-                      onChange={(e) => setTeamName(e.target.value)}
-                    />
-                  </div>
-                  <Button
-                    type="submit"
-                    onClick={() => {
-                      // Handle team creation
-                      setTeamName("");
-                      setOpen(false);
-                    }}
-                  >
-                    {t("teamSelector.createTeamButton")}
-                  </Button>
-                </div>
-              </DialogContent>
-            </Dialog>
+
+            <button
+              onClick={() => setCreateTeamModalOpen(true)}
+              type="button"
+              className="flex w-full items-center gap-2 p-2 pb-3 text-xs text-secondary hover:text-primary transition-colors duration-100 border-t border-border"
+            >
+              <Plus className="h-4 w-4" />
+              {t("teamSelector.createTeam")}
+            </button>
           </div>
 
           <div className="flex-1 flex flex-col">
             <div className="p-4 text-xs font-medium text-secondary">
               {t("teamSelector.project")}
             </div>
-            <div className="flex-1 overflow-y-auto">
+            <div className="flex-1 overflow-y-auto scrollbar-hide">
               {currentTeam?.projects.map((project) => (
                 <button
                   type="button"
                   key={project.id}
-                  className="group flex w-full items-center justify-between p-2 px-4 text-xs hover:bg-muted"
+                  className="group flex w-full items-center justify-between p-2 px-4 text-xs hover:bg-muted relative"
                   onClick={() => {
                     router.push(`/${currentTeam?.id}/${project.slug}`);
                     setOpen(false);
@@ -146,7 +121,7 @@ export function TeamSelector() {
                   <span>{project.name}</span>
                   <div className="flex items-center gap-2">
                     <Settings
-                      className="h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 hover:text-foreground transition-opacity duration-100 absolute z-10"
+                      className="h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 hover:text-foreground transition-opacity duration-100"
                       onClick={(e) => {
                         e.stopPropagation();
                         setOpen(false);
@@ -156,49 +131,21 @@ export function TeamSelector() {
                       }}
                     />
                     {projectSlug === project.slug && (
-                      <Check className="h-4 w-4 group-hover:opacity-0 transition-opacity duration-100" />
+                      <Check className="h-4 w-4 group-hover:hidden" />
                     )}
                   </div>
                 </button>
               ))}
             </div>
-            <Dialog>
-              <DialogTrigger asChild>
-                <button
-                  type="button"
-                  className="flex w-full items-center gap-2 p-2 pb-3 text-xs text-secondary hover:text-primary transition-colors duration-100 border-t border-border"
-                >
-                  <Plus className="h-4 w-4" />
-                  {t("teamSelector.addProject")}
-                </button>
-              </DialogTrigger>
-              <DialogContent>
-                <DialogHeader>
-                  <DialogTitle>
-                    {t("teamSelector.createProjectTitle")}
-                  </DialogTitle>
-                </DialogHeader>
-                <div className="space-y-4 py-4">
-                  <div className="space-y-2">
-                    <Input
-                      placeholder={t("teamSelector.projectNamePlaceholder")}
-                      value={projectName}
-                      onChange={(e) => setProjectName(e.target.value)}
-                    />
-                  </div>
-                  <Button
-                    type="submit"
-                    onClick={() => {
-                      // Handle project creation
-                      setProjectName("");
-                      setOpen(false);
-                    }}
-                  >
-                    {t("teamSelector.createProjectButton")}
-                  </Button>
-                </div>
-              </DialogContent>
-            </Dialog>
+
+            <button
+              onClick={() => setCreateProjectModalOpen(true)}
+              type="button"
+              className="flex w-full items-center gap-2 p-2 pb-3 text-xs text-secondary hover:text-primary transition-colors duration-100 border-t border-border"
+            >
+              <Plus className="h-4 w-4" />
+              {t("teamSelector.addProject")}
+            </button>
           </div>
         </div>
       </PopoverContent>
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index b5b7eb01..502385d1 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className,
     )}
     {...props}
@@ -38,13 +38,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-90 data-[state=open]:zoom-in-90 data-[state=closed]:slide-out-to-bottom-4 data-[state=open]:slide-in-from-bottom-4",
         className,
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index 46e5c22e..2839da62 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full border border-input bg-background px-3 py-2 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-10 w-full border border-input bg-transparent px-3 py-2 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className,
         )}
         ref={ref}
diff --git a/apps/web/src/components/ui/label.tsx b/apps/web/src/components/ui/label.tsx
index 663ca231..95f00aea 100644
--- a/apps/web/src/components/ui/label.tsx
+++ b/apps/web/src/components/ui/label.tsx
@@ -7,7 +7,7 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  "text-xs text-secondary leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 );
 
 const Label = React.forwardRef<
diff --git a/apps/web/src/components/ui/textarea.tsx b/apps/web/src/components/ui/textarea.tsx
index bd319c90..ae877e56 100644
--- a/apps/web/src/components/ui/textarea.tsx
+++ b/apps/web/src/components/ui/textarea.tsx
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<
   return (
     <textarea
       className={cn(
-        "flex min-h-[80px] w-full border border-border bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "flex min-h-[80px] w-full border border-border bg-transparent px-3 py-2 text-base placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className,
       )}
       ref={ref}
diff --git a/apps/web/src/components/user-menu.tsx b/apps/web/src/components/user-menu.tsx
index 3df0c4f1..dd7d4f3d 100644
--- a/apps/web/src/components/user-menu.tsx
+++ b/apps/web/src/components/user-menu.tsx
@@ -23,7 +23,7 @@ export function UserMenu() {
     await authClient.signOut({
       fetchOptions: {
         onSuccess: () => {
-          router.push("/");
+          router.push("/login");
         },
       },
     });
@@ -51,13 +51,15 @@ export function UserMenu() {
           <span className="text-xs">{session?.user?.email}</span>
         </div>
         <DropdownMenuSeparator />
-        <Link href={`/${params.team}/${params.project}/settings?tab=account`}>
+        <Link
+          href={`/${params.organization}/${params.project}/settings?tab=account`}
+        >
           <DropdownMenuItem className="text-sm">
             {t("userMenu.account")}
           </DropdownMenuItem>
         </Link>
         <Link
-          href={`/${params.team}/${params.project}/settings?tab=team`}
+          href={`/${params.organization}/${params.project}/settings?tab=team`}
           className="cursor-pointer"
         >
           <DropdownMenuItem className="text-sm">
diff --git a/apps/web/src/db/queries/delete.ts b/apps/web/src/db/queries/delete.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/apps/web/src/db/queries/insert.ts b/apps/web/src/db/queries/insert.ts
deleted file mode 100644
index 9f2534ec..00000000
--- a/apps/web/src/db/queries/insert.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { db } from "@/db";
-import { members, organizations, projects, sessions } from "@/db/schema";
-import { createId } from "@paralleldrive/cuid2";
-import { eq } from "drizzle-orm";
-import slugify from "slugify";
-
-export async function createDefaultOrganization(user: {
-  id: string;
-  name: string;
-}) {
-  // Create default organization for new user
-  const org = await db
-    .insert(organizations)
-    .values({
-      name: user.name,
-      slug: `${slugify(user.name, { lower: true })}-${createId().slice(0, 8)}`,
-    })
-    .returning()
-    .get();
-
-  // Add user as member of organization
-  await db.insert(members).values({
-    userId: user.id,
-    organizationId: org.id,
-    role: "owner",
-  });
-
-  // Create default project for new organization
-  await db.insert(projects).values({
-    name: "Default",
-    organizationId: org.id,
-    slug: "default",
-  });
-
-  // Set active organization for new user's session
-  await db
-    .update(sessions)
-    .set({ activeOrganizationId: org.id })
-    .where(eq(sessions.userId, user.id));
-
-  return org;
-}
diff --git a/apps/web/src/db/queries/organization.ts b/apps/web/src/db/queries/organization.ts
new file mode 100644
index 00000000..ca6661c9
--- /dev/null
+++ b/apps/web/src/db/queries/organization.ts
@@ -0,0 +1,202 @@
+import { db } from "@/db";
+import {
+  invitations,
+  members,
+  organizations,
+  projects,
+  sessions,
+  users,
+} from "@/db/schema";
+import { createId } from "@paralleldrive/cuid2";
+import { eq } from "drizzle-orm";
+import slugify from "slugify";
+
+export async function createDefaultOrganization(user: {
+  id: string;
+  name: string;
+}) {
+  // Create default organization for new user
+  const org = await db
+    .insert(organizations)
+    .values({
+      name: user.name,
+      slug: `${slugify(user.name, { lower: true })}-${createId().slice(0, 8)}`,
+    })
+    .returning()
+    .get();
+
+  // Add user as member of organization
+  await db.insert(members).values({
+    userId: user.id,
+    organizationId: org.id,
+    role: "owner",
+  });
+
+  // Create default project for new organization
+  await db.insert(projects).values({
+    name: "Default",
+    organizationId: org.id,
+    slug: "default",
+  });
+
+  // Set active organization for new user's session
+  await db
+    .update(sessions)
+    .set({ activeOrganizationId: org.id })
+    .where(eq(sessions.userId, user.id));
+
+  return org;
+}
+
+export const createOrganization = async ({
+  name,
+  userId,
+}: {
+  name: string;
+  userId: string;
+}) => {
+  const org = await db
+    .insert(organizations)
+    .values({
+      name,
+      slug: `${slugify(name, { lower: true })}-${createId().slice(0, 8)}`,
+    })
+    .returning()
+    .get();
+
+  if (org) {
+    await db.insert(members).values({
+      userId,
+      organizationId: org.id,
+      role: "owner",
+    });
+
+    await db.insert(projects).values({
+      name: "Default",
+      organizationId: org.id,
+      slug: "default",
+    });
+  }
+
+  return org;
+};
+
+export const deleteOrganization = async (id: string) => {
+  return db
+    .delete(organizations)
+    .where(eq(organizations.id, id))
+    .returning()
+    .get();
+};
+
+export const getDefaultOrganization = async (userId: string) => {
+  return db
+    .select()
+    .from(members)
+    .where(eq(members.userId, userId))
+    .leftJoin(organizations, eq(organizations.id, members.organizationId))
+    .limit(1)
+    .get();
+};
+
+export const getAllOrganizationsWithProjects = async (userId: string) => {
+  const orgs = await db
+    .select()
+    .from(organizations)
+    .leftJoin(members, eq(members.organizationId, organizations.id))
+    .where(eq(members.userId, userId))
+    .all();
+
+  const orgsWithProjects = await Promise.all(
+    orgs.map(async (org) => {
+      const orgProjects = await db
+        .select()
+        .from(projects)
+        .where(eq(projects.organizationId, org.organizations.id))
+        .all();
+
+      return {
+        ...org.organizations,
+        projects: orgProjects,
+      };
+    }),
+  );
+
+  return orgsWithProjects;
+};
+
+export const getOrganization = async (id: string) => {
+  return db.select().from(organizations).where(eq(organizations.id, id)).get();
+};
+
+export const getProjectById = async (projectId: string) => {
+  return db.select().from(projects).where(eq(projects.id, projectId)).get();
+};
+
+export const updateOrganization = async ({
+  id,
+  name,
+  logo,
+}: {
+  id: string;
+  name: string;
+  logo?: string;
+}) => {
+  return db
+    .update(organizations)
+    .set({
+      name,
+      logo,
+    })
+    .where(eq(organizations.id, id))
+    .returning()
+    .get();
+};
+
+export const getOrganizationMembers = async (organizationId: string) => {
+  return db
+    .select({
+      id: members.id,
+      role: members.role,
+      user: {
+        id: users.id,
+        name: users.name,
+        email: users.email,
+        image: users.image,
+      },
+    })
+    .from(members)
+    .innerJoin(users, eq(members.userId, users.id))
+    .where(eq(members.organizationId, organizationId))
+    .all();
+};
+
+export const getOrganizationInvites = async (organizationId: string) => {
+  return db
+    .select({
+      id: invitations.id,
+      email: invitations.email,
+      role: invitations.role,
+      status: invitations.status,
+      expiresAt: invitations.expiresAt,
+      inviter: {
+        id: users.id,
+        name: users.name,
+        email: users.email,
+        image: users.image,
+      },
+    })
+    .from(invitations)
+    .innerJoin(users, eq(invitations.inviterId, users.id))
+    .where(eq(invitations.organizationId, organizationId))
+    .all();
+};
+
+export const deleteOrganizationInvite = async (inviteId: string) => {
+  console.log("deleteOrganizationInvite", inviteId);
+  return db
+    .delete(invitations)
+    .where(eq(invitations.id, inviteId))
+    .returning()
+    .get();
+};
diff --git a/apps/web/src/db/queries/project-settings.ts b/apps/web/src/db/queries/project-settings.ts
new file mode 100644
index 00000000..149f401e
--- /dev/null
+++ b/apps/web/src/db/queries/project-settings.ts
@@ -0,0 +1,75 @@
+import { eq } from "drizzle-orm";
+import { db } from "..";
+import { projectSettings } from "../schema";
+
+export const getProjectSettings = async (projectId: string) => {
+  return db
+    .select()
+    .from(projectSettings)
+    .where(eq(projectSettings.projectId, projectId))
+    .get();
+};
+
+export const updateProjectSettings = async ({
+  projectId,
+  cache,
+  context,
+  temperature,
+  instructions,
+  memory,
+  grammar,
+}: {
+  projectId: string;
+  cache?: boolean;
+  context?: boolean;
+  temperature?: number;
+  instructions?: string;
+  memory?: boolean;
+  grammar?: boolean;
+}) => {
+  return db
+    .update(projectSettings)
+    .set({
+      cache,
+      context,
+      temperature,
+      instructions,
+      memory,
+      grammar,
+    })
+    .where(eq(projectSettings.projectId, projectId))
+    .returning()
+    .get();
+};
+
+export const createProjectSettings = async ({
+  projectId,
+  cache = true,
+  context = true,
+  temperature = 0,
+  instructions,
+  memory = true,
+  grammar = true,
+}: {
+  projectId: string;
+  cache?: boolean;
+  context?: boolean;
+  temperature?: number;
+  instructions?: string;
+  memory?: boolean;
+  grammar?: boolean;
+}) => {
+  return db
+    .insert(projectSettings)
+    .values({
+      projectId,
+      cache,
+      context,
+      temperature,
+      instructions,
+      memory,
+      grammar,
+    })
+    .returning()
+    .get();
+};
diff --git a/apps/web/src/db/queries/project.ts b/apps/web/src/db/queries/project.ts
new file mode 100644
index 00000000..fb9f7f28
--- /dev/null
+++ b/apps/web/src/db/queries/project.ts
@@ -0,0 +1,85 @@
+import { and, eq } from "drizzle-orm";
+import slugify from "slugify";
+import { db } from "..";
+import { projects } from "../schema";
+
+export const createProject = async ({
+  name,
+  organizationId,
+}: {
+  name: string;
+  organizationId: string;
+}) => {
+  return db
+    .insert(projects)
+    .values({
+      name,
+      organizationId,
+      slug: slugify(name, { lower: true }),
+    })
+    .returning()
+    .get();
+};
+
+export const updateProject = async ({
+  slug,
+  name,
+  organizationId,
+}: {
+  slug: string;
+  name: string;
+  organizationId: string;
+}) => {
+  return db
+    .update(projects)
+    .set({ name })
+    .where(
+      and(eq(projects.slug, slug), eq(projects.organizationId, organizationId)),
+    )
+    .returning()
+    .get();
+};
+
+export const deleteProject = async ({
+  slug,
+  organizationId,
+}: {
+  slug: string;
+  organizationId: string;
+}) => {
+  return db
+    .delete(projects)
+    .where(
+      and(eq(projects.slug, slug), eq(projects.organizationId, organizationId)),
+    )
+    .returning()
+    .get();
+};
+
+export const getProjectBySlug = async ({
+  slug,
+  organizationId,
+}: {
+  slug: string;
+  organizationId: string;
+}) => {
+  return db
+    .select()
+    .from(projects)
+    .where(
+      and(eq(projects.slug, slug), eq(projects.organizationId, organizationId)),
+    )
+    .get();
+};
+
+export const getProjectByOrganizationId = async ({
+  organizationId,
+}: {
+  organizationId: string;
+}) => {
+  return db
+    .select()
+    .from(projects)
+    .where(eq(projects.organizationId, organizationId))
+    .get();
+};
diff --git a/apps/web/src/db/queries/select.ts b/apps/web/src/db/queries/select.ts
deleted file mode 100644
index 34fb8f2a..00000000
--- a/apps/web/src/db/queries/select.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { db } from "@/db";
-import { eq } from "drizzle-orm";
-import { members, organizations, projects } from "../schema";
-
-export const getDefaultOrganization = async (userId: string) => {
-  return await db
-    .select()
-    .from(members)
-    .where(eq(members.userId, userId))
-    .leftJoin(organizations, eq(organizations.id, members.organizationId))
-    .limit(1)
-    .get();
-};
-
-export const getAllOrganizationsWithProjects = async (userId: string) => {
-  const orgs = await db
-    .select()
-    .from(organizations)
-    .leftJoin(members, eq(members.organizationId, organizations.id))
-    .where(eq(members.userId, userId))
-    .all();
-
-  const orgsWithProjects = await Promise.all(
-    orgs.map(async (org) => {
-      const orgProjects = await db
-        .select()
-        .from(projects)
-        .where(eq(projects.organizationId, org.organizations.id))
-        .all();
-
-      return {
-        ...org.organizations,
-        projects: orgProjects,
-      };
-    }),
-  );
-
-  return orgsWithProjects;
-};
diff --git a/apps/web/src/db/queries/update.ts b/apps/web/src/db/queries/update.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/apps/web/src/db/queries/user.ts b/apps/web/src/db/queries/user.ts
new file mode 100644
index 00000000..4e82b8d0
--- /dev/null
+++ b/apps/web/src/db/queries/user.ts
@@ -0,0 +1,32 @@
+import { eq } from "drizzle-orm";
+import { db } from "..";
+import { users } from "../schema";
+
+export const updateUser = async ({
+  id,
+  name,
+  email,
+}: {
+  id: string;
+  name?: string;
+  email?: string;
+}) => {
+  return db
+    .update(users)
+    .set({
+      ...(name && { name }),
+      ...(email && { email }),
+      updatedAt: new Date(),
+    })
+    .where(eq(users.id, id))
+    .returning()
+    .get();
+};
+
+export const deleteUser = async ({ id }: { id: string }) => {
+  return db.delete(users).where(eq(users.id, id)).returning().get();
+};
+
+export const getUserById = async ({ id }: { id: string }) => {
+  return db.select().from(users).where(eq(users.id, id)).get();
+};
diff --git a/apps/web/src/db/schema.ts b/apps/web/src/db/schema.ts
index e8f33501..be65d98a 100644
--- a/apps/web/src/db/schema.ts
+++ b/apps/web/src/db/schema.ts
@@ -27,9 +27,7 @@ export const users = sqliteTable(
       .$defaultFn(() => new Date()),
     updatedAt: integer("updated_at", { mode: "timestamp" }).notNull(),
   },
-  (table) => ({
-    emailIdx: index("email_idx").on(table.email),
-  }),
+  (table) => [index("email_idx").on(table.email)],
 );
 
 export const sessions = sqliteTable(
@@ -51,11 +49,11 @@ export const sessions = sqliteTable(
       .references(() => users.id, { onDelete: "cascade" }),
     activeOrganizationId: text("active_organization_id"),
   },
-  (table) => ({
-    userIdIdx: index("user_id_idx").on(table.userId),
-    tokenIdx: index("token_idx").on(table.token),
-    expiresAtIdx: index("expires_at_idx").on(table.expiresAt),
-  }),
+  (table) => [
+    index("user_id_idx").on(table.userId),
+    index("token_idx").on(table.token),
+    index("expires_at_idx").on(table.expiresAt),
+  ],
 );
 
 export const accounts = sqliteTable(
@@ -85,13 +83,10 @@ export const accounts = sqliteTable(
       .$defaultFn(() => new Date()),
     updatedAt: integer("updated_at", { mode: "timestamp" }).notNull(),
   },
-  (table) => ({
-    userIdIdx: index("accounts_user_id_idx").on(table.userId),
-    providerCompoundIdx: index("provider_compound_idx").on(
-      table.providerId,
-      table.accountId,
-    ),
-  }),
+  (table) => [
+    index("accounts_user_id_idx").on(table.userId),
+    index("provider_compound_idx").on(table.providerId, table.accountId),
+  ],
 );
 
 export const verifications = sqliteTable(
@@ -108,10 +103,10 @@ export const verifications = sqliteTable(
     ),
     updatedAt: integer("updated_at", { mode: "timestamp" }),
   },
-  (table) => ({
-    identifierIdx: index("identifier_idx").on(table.identifier),
-    expiresAtIdx: index("verifications_expires_at_idx").on(table.expiresAt),
-  }),
+  (table) => [
+    index("identifier_idx").on(table.identifier),
+    index("verifications_expires_at_idx").on(table.expiresAt),
+  ],
 );
 
 export const projects = sqliteTable(
@@ -131,13 +126,10 @@ export const projects = sqliteTable(
       .$defaultFn(() => new Date()),
     updatedAt: integer("updated_at", { mode: "timestamp" }),
   },
-  (table) => ({
-    orgIdx: index("org_idx").on(table.organizationId),
-    slugOrgIdx: uniqueIndex("slug_org_idx").on(
-      table.slug,
-      table.organizationId,
-    ),
-  }),
+  (table) => [
+    index("org_idx").on(table.organizationId),
+    uniqueIndex("slug_org_idx").on(table.slug, table.organizationId),
+  ],
 );
 
 export const organizations = sqliteTable(
@@ -161,10 +153,10 @@ export const organizations = sqliteTable(
       .$defaultFn(() => new Date()),
     metadata: text("metadata"),
   },
-  (table) => ({
-    slugIdx: index("slug_idx").on(table.slug),
-    apiKeyIdx: index("org_api_key_idx").on(table.apiKey),
-  }),
+  (table) => [
+    index("slug_idx").on(table.slug),
+    index("org_api_key_idx").on(table.apiKey),
+  ],
 );
 
 export const members = sqliteTable(
@@ -184,9 +176,7 @@ export const members = sqliteTable(
       .notNull()
       .$defaultFn(() => new Date()),
   },
-  (table) => ({
-    orgUserIdx: index("org_user_idx").on(table.organizationId, table.userId),
-  }),
+  (table) => [index("org_user_idx").on(table.organizationId, table.userId)],
 );
 
 export const invitations = sqliteTable(
@@ -206,10 +196,10 @@ export const invitations = sqliteTable(
       .notNull()
       .references(() => users.id, { onDelete: "cascade" }),
   },
-  (table) => ({
-    orgEmailIdx: index("org_email_idx").on(table.organizationId, table.email),
-    expiresAtIdx: index("invitations_expires_at_idx").on(table.expiresAt),
-  }),
+  (table) => [
+    index("org_email_idx").on(table.organizationId, table.email),
+    index("invitations_expires_at_idx").on(table.expiresAt),
+  ],
 );
 
 export const projectSettings = sqliteTable(
@@ -230,9 +220,6 @@ export const projectSettings = sqliteTable(
     createdAt: integer("created_at", { mode: "timestamp" })
       .notNull()
       .$defaultFn(() => new Date()),
-    updatedAt: integer("updated_at", { mode: "timestamp" }).notNull(),
   },
-  (table) => ({
-    projectIdx: index("project_idx").on(table.projectId),
-  }),
+  (table) => [index("project_idx").on(table.projectId)],
 );
diff --git a/apps/web/src/emails/templates/invite.tsx b/apps/web/src/emails/templates/invite.tsx
new file mode 100644
index 00000000..57e644ae
--- /dev/null
+++ b/apps/web/src/emails/templates/invite.tsx
@@ -0,0 +1,82 @@
+import { Footer } from "@/emails/components/footer";
+import { Logo } from "@/emails/components/logo";
+import { OutlineButton } from "@/emails/components/outline-button";
+import {
+  Body,
+  Container,
+  Font,
+  Head,
+  Html,
+  Link,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from "@react-email/components";
+
+export default function InviteEmail({
+  invitedByUsername = "Viktor",
+  invitedByEmail = "viktor@languine.ai",
+  teamName = "Languine",
+  inviteLink = "https://languine.ai/invite",
+}: {
+  invitedByUsername: string;
+  invitedByEmail: string;
+  teamName: string;
+  inviteLink: string;
+}) {
+  return (
+    <Html>
+      <Head>
+        <Font
+          fontFamily="Geist Mono"
+          fallbackFontFamily="Verdana"
+          webFont={{
+            url: "https://fonts.googleapis.com/css2?family=Geist+Mono:wght@500&display=swap",
+            format: "woff2",
+          }}
+          fontWeight={500}
+          fontStyle="normal"
+        />
+      </Head>
+      <Preview>You've been invited to join {teamName} on Languine</Preview>
+      <Tailwind>
+        <Body className="bg-white font-mono">
+          <Container className="mx-auto py-5 pb-12 max-w-[580px]">
+            <Logo />
+
+            <Text className="text-sm leading-7 mb-6 font-mono">
+              Hi there! {invitedByUsername} ({invitedByEmail}) has invited you
+              to join {teamName} on Languine.
+            </Text>
+
+            <Section className="mb-20 mt-8">
+              <OutlineButton
+                className="mr-6"
+                variant="default"
+                href={inviteLink}
+              >
+                Accept Invitation
+              </OutlineButton>
+            </Section>
+
+            <Section className="mt-8">
+              <Text className="text-sm leading-7 mb-6 font-mono text-[#707070]">
+                If you have any questions or didn't expect this invitation,
+                please contact{" "}
+                <Link
+                  href="mailto:support@languine.ai"
+                  className="underline text-black font-mono"
+                >
+                  support@languine.ai
+                </Link>
+              </Text>
+            </Section>
+
+            <Footer />
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+}
diff --git a/apps/web/src/hooks/use-create-project-modal.ts b/apps/web/src/hooks/use-create-project-modal.ts
new file mode 100644
index 00000000..a8a297d0
--- /dev/null
+++ b/apps/web/src/hooks/use-create-project-modal.ts
@@ -0,0 +1,13 @@
+import { parseAsBoolean, useQueryState } from "nuqs";
+
+export function useCreateProjectModal() {
+  const [open, setOpen] = useQueryState(
+    "create-project",
+    parseAsBoolean.withDefault(false),
+  );
+
+  return {
+    open,
+    setOpen,
+  };
+}
diff --git a/apps/web/src/hooks/use-create-team-modal.ts b/apps/web/src/hooks/use-create-team-modal.ts
new file mode 100644
index 00000000..2ee2b557
--- /dev/null
+++ b/apps/web/src/hooks/use-create-team-modal.ts
@@ -0,0 +1,13 @@
+import { parseAsBoolean, useQueryState } from "nuqs";
+
+export function useCreateTeamModal() {
+  const [open, setOpen] = useQueryState(
+    "create-team",
+    parseAsBoolean.withDefault(false),
+  );
+
+  return {
+    open,
+    setOpen,
+  };
+}
diff --git a/apps/web/src/hooks/use-invite-modal.ts b/apps/web/src/hooks/use-invite-modal.ts
new file mode 100644
index 00000000..565af196
--- /dev/null
+++ b/apps/web/src/hooks/use-invite-modal.ts
@@ -0,0 +1,13 @@
+import { parseAsBoolean, useQueryState } from "nuqs";
+
+export function useInviteModal() {
+  const [open, setOpen] = useQueryState(
+    "invite",
+    parseAsBoolean.withDefault(false),
+  );
+
+  return {
+    open,
+    setOpen,
+  };
+}
diff --git a/apps/web/src/hooks/use-mobile.ts b/apps/web/src/hooks/use-mobile.ts
new file mode 100644
index 00000000..a93d5839
--- /dev/null
+++ b/apps/web/src/hooks/use-mobile.ts
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}
diff --git a/apps/web/src/hooks/use-mobile.tsx b/apps/web/src/hooks/use-mobile.tsx
deleted file mode 100644
index 2b0fe1df..00000000
--- a/apps/web/src/hooks/use-mobile.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from "react"
-
-const MOBILE_BREAKPOINT = 768
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
-
-  return !!isMobile
-}
diff --git a/apps/web/src/lib/auth/middleware.ts b/apps/web/src/lib/auth/middleware.ts
index 93d0cf01..82ab363d 100644
--- a/apps/web/src/lib/auth/middleware.ts
+++ b/apps/web/src/lib/auth/middleware.ts
@@ -4,7 +4,7 @@ import { cache } from "react";
 
 type SessionData = {
   user: User;
-  session: Session;
+  session: Session & { activeOrganizationId: string };
 };
 
 export const getSessionFromRequest = cache(
@@ -18,6 +18,7 @@ export const getSessionFromRequest = cache(
       },
     ).then(async (res) => {
       if (!res.ok) return null;
+
       return res.json();
     });
   },
diff --git a/apps/web/src/lib/auth/queries.ts b/apps/web/src/lib/auth/queries.ts
new file mode 100644
index 00000000..6941c638
--- /dev/null
+++ b/apps/web/src/lib/auth/queries.ts
@@ -0,0 +1,15 @@
+import { headers } from "next/headers";
+import { authClient } from "./client";
+
+export async function acceptInvitation(invitationId: string) {
+  const { data } = await authClient.organization.acceptInvitation(
+    {
+      invitationId,
+    },
+    {
+      headers: await headers(),
+    },
+  );
+
+  return data;
+}
diff --git a/apps/web/src/lib/auth/server.ts b/apps/web/src/lib/auth/server.ts
index bd8ab57f..d90ab420 100644
--- a/apps/web/src/lib/auth/server.ts
+++ b/apps/web/src/lib/auth/server.ts
@@ -1,12 +1,16 @@
 import { db } from "@/db";
-import { createDefaultOrganization } from "@/db/queries/insert";
-import { getDefaultOrganization } from "@/db/queries/select";
+import {
+  createDefaultOrganization,
+  getDefaultOrganization,
+} from "@/db/queries/organization";
 import * as schema from "@/db/schema";
+import InviteEmail from "@/emails/templates/invite";
 import WelcomeEmail from "@/emails/templates/welcome";
 import { resend } from "@/lib/resend";
 import { betterAuth } from "better-auth";
 import { drizzleAdapter } from "better-auth/adapters/drizzle";
 import { organization } from "better-auth/plugins";
+import { getAppUrl } from "../url";
 
 export const auth = betterAuth({
   database: drizzleAdapter(db, {
@@ -30,7 +34,7 @@ export const auth = betterAuth({
     user: {
       create: {
         after: async (user) => {
-          const org = await createDefaultOrganization(user);
+          await createDefaultOrganization(user);
 
           // Send welcome email to new user
           try {
@@ -67,5 +71,27 @@ export const auth = betterAuth({
       maxAge: 5 * 60,
     },
   },
-  plugins: [organization()],
+  plugins: [
+    organization({
+      async sendInvitationEmail(data) {
+        const inviteLink = `${getAppUrl()}/invite/${data.id}`;
+
+        try {
+          await resend.emails.send({
+            from: "Languine <hello@emails.languine.ai>",
+            to: data.email,
+            subject: `You've been invited to join ${data.organization.name} on Languine`,
+            react: InviteEmail({
+              invitedByUsername: data.inviter.user.name,
+              invitedByEmail: data.inviter.user.email,
+              teamName: data.organization.name,
+              inviteLink,
+            }),
+          });
+        } catch (error) {
+          console.error("Error sending welcome email", error);
+        }
+      },
+    }),
+  ],
 });
diff --git a/apps/web/src/locales/en.ts b/apps/web/src/locales/en.ts
index cdbf71f3..30313fc5 100644
--- a/apps/web/src/locales/en.ts
+++ b/apps/web/src/locales/en.ts
@@ -98,7 +98,7 @@ export default {
     team: "Team Settings",
   },
   teamSelector: {
-    addProject: "Add project",
+    addProject: "Create project",
     createProjectTitle: "Create a new project",
     projectNamePlaceholder: "Project name",
     createProjectButton: "Create project",
@@ -147,6 +147,7 @@ export default {
         "This action cannot be undone. Please type DELETE to confirm.",
       placeholder: "Type DELETE to confirm",
       confirm: "Confirm Delete",
+      cancel: "Cancel",
     },
   },
   pipeline: {
@@ -158,11 +159,15 @@ export default {
   settings: {
     saved: "Settings saved",
     savedDescription: "Your changes have been saved successfully",
+    error: "Something went wrong",
+    errorDescription: "Please try again or contact support",
+    addTeam: "Create team",
     tabs: {
       project: "Project",
       account: "Account",
       team: "Team",
     },
+    addProject: "Create project",
     project: {
       name: {
         title: "Project Name",
@@ -180,6 +185,7 @@ export default {
         button: "Delete Project",
       },
     },
+    save: "Save",
     team: {
       name: {
         title: "Team Name",
@@ -198,6 +204,7 @@ export default {
         placeholder: "Team API Key",
       },
       members: {
+        invite: "Invite member",
         title: "Members",
         pendingInvitations: "Pending Invitations",
         filterPlaceholder: "Filter members...",
@@ -205,10 +212,16 @@ export default {
         date: "Date",
         selectAll: "{count} selected",
         noPendingInvitations: "No pending invitations",
-        inviteMembers: "Invite team members to collaborate",
+        noResults: "No members found",
+        tryDifferentSearch: "Try a different search",
+        inviteMembers: "Invite members to collaborate",
+        deleteInvite: "Delete Invite",
+        deleteInviteDescription: "Delete the invitation",
+        invitedBy: "Invited by {name}",
+        deleteInviteSuccess: "Invitation deleted",
+        deleteInviteError: "Failed to delete invitation",
         roles: {
           owner: "Owner",
-          admin: "Admin",
           member: "Member",
         },
         dateSort: {
@@ -302,4 +315,39 @@ export default {
     },
     cta: "Start automating",
   },
+  createTeam: {
+    teamName: "Team Name",
+    teamNamePlaceholder: "Enter team name",
+    createTeamButton: "Create team",
+    cancel: "Cancel",
+    createTeamDescription:
+      "Create a new team to manage your projects and collaborators.",
+  },
+  createProject: {
+    createProjectTitle: "Create a new project",
+    projectNamePlaceholder: "Enter project name",
+    createProjectButton: "Create project",
+    cancel: "Cancel",
+    createProjectDescription:
+      "Create a new project to start automating your localization.",
+  },
+  invite: {
+    inviteMember: "Invite member",
+    inviteDescription: "Invite a member to your team",
+    emailLabel: "Email",
+    emailPlaceholder: "Enter email",
+    cancel: "Cancel",
+    sendInvite: "Send invite",
+    success: {
+      title: "Invitation sent",
+      description: "Successfully sent invitation to {email}",
+    },
+    error: {
+      title: "Error",
+      description: "Failed to send invitation. Please try again.",
+    },
+    validation: {
+      invalidEmail: "Please enter a valid email",
+    },
+  },
 } as const;
diff --git a/apps/web/src/middleware.ts b/apps/web/src/middleware.ts
index 5b0797d0..d8e5a666 100644
--- a/apps/web/src/middleware.ts
+++ b/apps/web/src/middleware.ts
@@ -1,7 +1,7 @@
 import { createI18nMiddleware } from "next-international/middleware";
 import { type NextRequest, NextResponse } from "next/server";
 import languineConfig from "../languine.config";
-import { getDefaultOrganization } from "./db/queries/select";
+import { getProjectByOrganizationId } from "./db/queries/project";
 import { getSessionFromRequest } from "./lib/auth/middleware";
 
 const I18nMiddleware = createI18nMiddleware({
@@ -14,17 +14,22 @@ export async function middleware(request: NextRequest) {
 
   // Only proceed with organization check for login path
   if (request.nextUrl.pathname.includes("/login")) {
-    const session = await getSessionFromRequest();
+    const data = await getSessionFromRequest();
 
-    if (!session?.user.id) {
+    if (!data?.user.id) {
       return i18nResponse;
     }
 
-    const data = await getDefaultOrganization(session?.user.id);
+    if (data.session?.activeOrganizationId) {
+      const project = await getProjectByOrganizationId({
+        organizationId: data.session.activeOrganizationId,
+      });
 
-    if (data?.organizations) {
       return NextResponse.redirect(
-        new URL(`/${data.organizations.slug}/default`, request.url),
+        new URL(
+          `/${data.session.activeOrganizationId}/${project?.slug || "default"}`,
+          request.url,
+        ),
       );
     }
   }
diff --git a/apps/web/src/trpc/client.tsx b/apps/web/src/trpc/client.tsx
index 1a1914b7..0cd4bc4d 100644
--- a/apps/web/src/trpc/client.tsx
+++ b/apps/web/src/trpc/client.tsx
@@ -1,5 +1,5 @@
 "use client";
-// ^-- to make sure we can mount the Provider from a server component
+
 import type { QueryClient } from "@tanstack/react-query";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
@@ -35,6 +35,7 @@ function getUrl() {
     if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
     return "http://localhost:3000";
   })();
+
   return `${base}/api/trpc`;
 }
 
@@ -43,11 +44,8 @@ export function TRPCProvider(
     children: React.ReactNode;
   }>,
 ) {
-  // NOTE: Avoid useState when initializing the query client if you don't
-  //       have a suspense boundary between this and the code that may
-  //       suspend because React will throw away the client on the initial
-  //       render if it suspends and there is no boundary
   const queryClient = getQueryClient();
+
   const [trpcClient] = useState(() =>
     trpc.createClient({
       links: [
@@ -63,13 +61,10 @@ export function TRPCProvider(
             url: getUrl(),
           }),
         }),
-        // httpBatchLink({
-        //   transformer: superjson,
-        //   url: getUrl(),
-        // }),
       ],
     }),
   );
+
   return (
     <trpc.Provider client={trpcClient} queryClient={queryClient}>
       <QueryClientProvider client={queryClient}>
diff --git a/apps/web/src/trpc/init.ts b/apps/web/src/trpc/init.ts
index 09a61875..337ebdca 100644
--- a/apps/web/src/trpc/init.ts
+++ b/apps/web/src/trpc/init.ts
@@ -4,29 +4,31 @@ import { cache } from "react";
 import superjson from "superjson";
 
 export const createTRPCContext = cache(async () => {
-  return {};
+  const session = await getSession();
+
+  return {
+    user: session.data?.user,
+  };
 });
 
-const t = initTRPC.context<typeof createTRPCContext>().create({
+export const t = initTRPC.context<typeof createTRPCContext>().create({
   transformer: superjson,
 });
 
 export const createCallerFactory = t.createCallerFactory;
 
-// Base router and procedure helpers
 export const createTRPCRouter = t.router;
-export const baseProcedure = t.procedure;
 
 export const protectedProcedure = t.procedure.use(async (opts) => {
-  const session = await getSession();
+  const { user } = opts.ctx;
 
-  if (!session.data?.user) {
+  if (!user) {
     throw new TRPCError({ code: "UNAUTHORIZED" });
   }
 
   return opts.next({
     ctx: {
-      user: session.data.user,
+      user,
     },
   });
 });
diff --git a/apps/web/src/trpc/middleware/organization.ts b/apps/web/src/trpc/middleware/organization.ts
new file mode 100644
index 00000000..472a52c3
--- /dev/null
+++ b/apps/web/src/trpc/middleware/organization.ts
@@ -0,0 +1,49 @@
+import { db } from "@/db";
+import { members, organizations } from "@/db/schema";
+import { TRPCError } from "@trpc/server";
+import { and, eq } from "drizzle-orm";
+import { t } from "../init";
+
+export const isOrganizationMember = t.middleware(
+  async ({ ctx, next, input }) => {
+    if (!ctx.user) {
+      throw new TRPCError({
+        code: "UNAUTHORIZED",
+        message: "You must be logged in",
+      });
+    }
+
+    const typedInput = input as { organizationId: string };
+
+    const result = await db
+      .select({
+        member: members,
+      })
+      .from(organizations)
+      .leftJoin(
+        members,
+        and(
+          eq(members.organizationId, typedInput.organizationId),
+          eq(members.userId, ctx.user.id),
+        ),
+      )
+      .where(eq(organizations.id, typedInput.organizationId))
+      .get();
+
+    if (!result) {
+      throw new TRPCError({
+        code: "NOT_FOUND",
+        message: "Organization not found",
+      });
+    }
+
+    if (!result.member) {
+      throw new TRPCError({
+        code: "FORBIDDEN",
+        message: "You are not a member of this organization",
+      });
+    }
+
+    return next();
+  },
+);
diff --git a/apps/web/src/trpc/middleware/project.ts b/apps/web/src/trpc/middleware/project.ts
new file mode 100644
index 00000000..0e228165
--- /dev/null
+++ b/apps/web/src/trpc/middleware/project.ts
@@ -0,0 +1,54 @@
+import { db } from "@/db";
+import { members, organizations, projects } from "@/db/schema";
+import { TRPCError } from "@trpc/server";
+import { and, eq } from "drizzle-orm";
+import { t } from "../init";
+
+export const isProjectMember = t.middleware(async ({ ctx, next, input }) => {
+  if (!ctx.user) {
+    throw new TRPCError({
+      code: "UNAUTHORIZED",
+      message: "You must be logged in",
+    });
+  }
+
+  const typedInput = input as { slug: string; organizationId: string };
+
+  const result = await db
+    .select({
+      member: members,
+      project: projects,
+    })
+    .from(projects)
+    .innerJoin(organizations, eq(organizations.id, typedInput.organizationId))
+    .leftJoin(
+      members,
+      and(
+        eq(members.organizationId, typedInput.organizationId),
+        eq(members.userId, ctx.user.id),
+      ),
+    )
+    .where(
+      and(
+        eq(projects.slug, typedInput.slug),
+        eq(projects.organizationId, typedInput.organizationId),
+      ),
+    )
+    .get();
+
+  if (!result) {
+    throw new TRPCError({
+      code: "NOT_FOUND",
+      message: "Project not found",
+    });
+  }
+
+  if (!result.member) {
+    throw new TRPCError({
+      code: "FORBIDDEN",
+      message: "You don't have access to this project",
+    });
+  }
+
+  return next();
+});
diff --git a/apps/web/src/trpc/routers/_app.ts b/apps/web/src/trpc/routers/_app.ts
index 82577c9d..ec47be75 100644
--- a/apps/web/src/trpc/routers/_app.ts
+++ b/apps/web/src/trpc/routers/_app.ts
@@ -1,9 +1,13 @@
 import type { inferRouterOutputs } from "@trpc/server";
 import { createTRPCRouter } from "../init";
 import { organizationRouter } from "./organization";
+import { projectRouter } from "./project";
+import { userRouter } from "./user";
 
 export const appRouter = createTRPCRouter({
   organization: organizationRouter,
+  project: projectRouter,
+  user: userRouter,
 });
 
 // export type definition of API
diff --git a/apps/web/src/trpc/routers/organization.ts b/apps/web/src/trpc/routers/organization.ts
index 80f0e79f..e8e3a602 100644
--- a/apps/web/src/trpc/routers/organization.ts
+++ b/apps/web/src/trpc/routers/organization.ts
@@ -1,22 +1,24 @@
-import { db } from "@/db";
-import { getAllOrganizationsWithProjects } from "@/db/queries/select";
-import { members, organizations, projects } from "@/db/schema";
-import { createId } from "@paralleldrive/cuid2";
+import {
+  createOrganization,
+  deleteOrganization,
+  deleteOrganizationInvite,
+  getAllOrganizationsWithProjects,
+  getOrganization,
+  getOrganizationInvites,
+  getOrganizationMembers,
+  updateOrganization,
+} from "@/db/queries/organization";
 import { TRPCError } from "@trpc/server";
-import { eq } from "drizzle-orm";
-import slugify from "slugify";
 import { z } from "zod";
 import { createTRPCRouter, protectedProcedure } from "../init";
+import { isOrganizationMember } from "../middleware/organization";
 
 export const organizationRouter = createTRPCRouter({
   getById: protectedProcedure
-    .input(z.object({ id: z.string() }))
+    .input(z.object({ organizationId: z.string() }))
+    .use(isOrganizationMember)
     .query(async ({ input }) => {
-      const org = await db
-        .select()
-        .from(organizations)
-        .where(eq(organizations.id, input.id))
-        .get();
+      const org = await getOrganization(input.organizationId);
 
       if (!org) {
         throw new TRPCError({
@@ -32,22 +34,31 @@ export const organizationRouter = createTRPCRouter({
     return getAllOrganizationsWithProjects(ctx.user.id);
   }),
 
+  getMembers: protectedProcedure
+    .input(z.object({ organizationId: z.string() }))
+    .use(isOrganizationMember)
+    .query(async ({ input }) => {
+      return getOrganizationMembers(input.organizationId);
+    }),
+
+  getInvites: protectedProcedure
+    .input(z.object({ organizationId: z.string() }))
+    .use(isOrganizationMember)
+    .query(async ({ input }) => {
+      return getOrganizationInvites(input.organizationId);
+    }),
+
   create: protectedProcedure
     .input(
       z.object({
         name: z.string().min(1),
-        userId: z.string(),
       }),
     )
-    .mutation(async ({ input }) => {
-      const org = await db
-        .insert(organizations)
-        .values({
-          name: input.name,
-          slug: `${slugify(input.name, { lower: true })}-${createId().slice(0, 8)}`,
-        })
-        .returning()
-        .get();
+    .mutation(async ({ input, ctx }) => {
+      const org = await createOrganization({
+        name: input.name,
+        userId: ctx.user.id,
+      });
 
       if (!org) {
         throw new TRPCError({
@@ -56,39 +67,24 @@ export const organizationRouter = createTRPCRouter({
         });
       }
 
-      await db.insert(members).values({
-        userId: input.userId,
-        organizationId: org.id,
-        role: "owner",
-      });
-
-      await db.insert(projects).values({
-        name: "Default",
-        organizationId: org.id,
-        slug: "default",
-      });
-
       return org;
     }),
 
   update: protectedProcedure
     .input(
       z.object({
-        id: z.string(),
+        organizationId: z.string(),
         name: z.string().min(1),
         logo: z.string().optional(),
       }),
     )
+    .use(isOrganizationMember)
     .mutation(async ({ input }) => {
-      const org = await db
-        .update(organizations)
-        .set({
-          name: input.name,
-          logo: input.logo,
-        })
-        .where(eq(organizations.id, input.id))
-        .returning()
-        .get();
+      const org = await updateOrganization({
+        id: input.organizationId,
+        name: input.name,
+        logo: input.logo,
+      });
 
       if (!org) {
         throw new TRPCError({
@@ -101,13 +97,10 @@ export const organizationRouter = createTRPCRouter({
     }),
 
   delete: protectedProcedure
-    .input(z.object({ id: z.string() }))
+    .input(z.object({ organizationId: z.string() }))
+    .use(isOrganizationMember)
     .mutation(async ({ input }) => {
-      const org = await db
-        .delete(organizations)
-        .where(eq(organizations.id, input.id))
-        .returning()
-        .get();
+      const org = await deleteOrganization(input.organizationId);
 
       if (!org) {
         throw new TRPCError({
@@ -118,4 +111,25 @@ export const organizationRouter = createTRPCRouter({
 
       return org;
     }),
+
+  deleteInvite: protectedProcedure
+    .input(
+      z.object({
+        organizationId: z.string(),
+        inviteId: z.string(),
+      }),
+    )
+    .use(isOrganizationMember)
+    .mutation(async ({ input }) => {
+      const invite = await deleteOrganizationInvite(input.inviteId);
+
+      if (!invite) {
+        throw new TRPCError({
+          code: "INTERNAL_SERVER_ERROR",
+          message: "Failed to delete organization invite",
+        });
+      }
+
+      return invite;
+    }),
 });
diff --git a/apps/web/src/trpc/routers/project.ts b/apps/web/src/trpc/routers/project.ts
new file mode 100644
index 00000000..53543993
--- /dev/null
+++ b/apps/web/src/trpc/routers/project.ts
@@ -0,0 +1,96 @@
+import {
+  createProject,
+  deleteProject,
+  getProjectBySlug,
+  updateProject,
+} from "@/db/queries/project";
+import { TRPCError } from "@trpc/server";
+import { z } from "zod";
+import { createTRPCRouter, protectedProcedure } from "../init";
+import { isProjectMember } from "../middleware/project";
+
+export const projectRouter = createTRPCRouter({
+  getBySlug: protectedProcedure
+    .input(
+      z.object({
+        slug: z.string(),
+        organizationId: z.string(),
+      }),
+    )
+    .use(isProjectMember)
+    .query(async ({ input }) => {
+      const project = await getProjectBySlug(input);
+
+      if (!project) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Project not found",
+        });
+      }
+
+      return project;
+    }),
+
+  create: protectedProcedure
+    .input(
+      z.object({
+        name: z.string().min(1),
+        organizationId: z.string(),
+      }),
+    )
+    .mutation(async ({ input }) => {
+      const project = await createProject(input);
+
+      if (!project) {
+        throw new TRPCError({
+          code: "INTERNAL_SERVER_ERROR",
+          message: "Failed to create project",
+        });
+      }
+
+      return project;
+    }),
+
+  update: protectedProcedure
+    .input(
+      z.object({
+        slug: z.string(),
+        organizationId: z.string(),
+        name: z.string().min(1),
+      }),
+    )
+    .use(isProjectMember)
+    .mutation(async ({ input }) => {
+      const project = await updateProject(input);
+
+      if (!project) {
+        throw new TRPCError({
+          code: "INTERNAL_SERVER_ERROR",
+          message: "Failed to update project",
+        });
+      }
+
+      return project;
+    }),
+
+  delete: protectedProcedure
+    .input(
+      z.object({
+        slug: z.string(),
+        organizationId: z.string(),
+      }),
+    )
+    .use(isProjectMember)
+    .mutation(async ({ input }) => {
+      const project = await deleteProject(input);
+
+      if (!project) {
+        throw new TRPCError({
+          code: "INTERNAL_SERVER_ERROR",
+          message: "Failed to delete project",
+        });
+      }
+
+      return project;
+    }),
+});
diff --git a/apps/web/src/trpc/routers/user.ts b/apps/web/src/trpc/routers/user.ts
new file mode 100644
index 00000000..bee0714c
--- /dev/null
+++ b/apps/web/src/trpc/routers/user.ts
@@ -0,0 +1,19 @@
+import { getUserById, updateUser } from "@/db/queries/user";
+import { z } from "zod";
+import { createTRPCRouter, protectedProcedure } from "../init";
+
+export const userRouter = createTRPCRouter({
+  me: protectedProcedure.query(async ({ ctx }) => {
+    return getUserById({ id: ctx.user.id });
+  }),
+  update: protectedProcedure
+    .input(
+      z.object({
+        name: z.string().optional(),
+        email: z.string().email().optional(),
+      }),
+    )
+    .mutation(async ({ input, ctx }) => {
+      return updateUser({ id: ctx.user.id, ...input });
+    }),
+});
diff --git a/apps/web/src/trpc/server.ts b/apps/web/src/trpc/server.ts
index 8f91d8e0..460964af 100644
--- a/apps/web/src/trpc/server.ts
+++ b/apps/web/src/trpc/server.ts
@@ -1,4 +1,4 @@
-import "server-only"; // <-- ensure this file cannot be imported from the client
+import "server-only";
 
 import { createHydrationHelpers } from "@trpc/react-query/rsc";
 import { cache } from "react";
@@ -6,10 +6,10 @@ import { createCallerFactory, createTRPCContext } from "./init";
 import { makeQueryClient } from "./query-client";
 import { appRouter } from "./routers/_app";
 
-// IMPORTANT: Create a stable getter for the query client that
-//            will return the same client during the same request.
 export const getQueryClient = cache(makeQueryClient);
+
 const caller = createCallerFactory(appRouter)(createTRPCContext);
+
 export const { trpc, HydrateClient } = createHydrationHelpers<typeof appRouter>(
   caller,
   getQueryClient,
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index 7c75904c..bf890716 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -8,80 +8,80 @@ export default {
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
-  	fontFamily: {
-  		mono: 'var(--font-geist-mono)'
-  	},
-  	extend: {
-  		keyframes: {
-  			'caret-blink': {
-  				'0%,70%,100%': {
-  					opacity: '1'
-  				},
-  				'20%,50%': {
-  					opacity: '0'
-  				}
-  			}
-  		},
-  		animation: {
-  			'caret-blink': 'caret-blink 1.25s ease-out infinite'
-  		},
-  		colors: {
-  			background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			},
-  			popover: {
-  				DEFAULT: 'hsl(var(--popover))',
-  				foreground: 'hsl(var(--popover-foreground))'
-  			},
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			secondary: {
-  				DEFAULT: 'hsl(var(--secondary))',
-  				foreground: 'hsl(var(--secondary-foreground))'
-  			},
-  			muted: {
-  				DEFAULT: 'hsl(var(--muted))',
-  				foreground: 'hsl(var(--muted-foreground))'
-  			},
-  			accent: {
-  				DEFAULT: 'hsl(var(--accent))',
-  				foreground: 'hsl(var(--accent-foreground))'
-  			},
-  			destructive: {
-  				DEFAULT: 'hsl(var(--destructive))',
-  				foreground: 'hsl(var(--destructive-foreground))'
-  			},
-  			border: 'hsl(var(--border))',
-  			input: 'hsl(var(--input))',
-  			ring: 'hsl(var(--ring))',
-  			chart: {
-  				'1': 'hsl(var(--chart-1))',
-  				'2': 'hsl(var(--chart-2))',
-  				'3': 'hsl(var(--chart-3))',
-  				'4': 'hsl(var(--chart-4))',
-  				'5': 'hsl(var(--chart-5))'
-  			},
-  			sidebar: {
-  				DEFAULT: 'hsl(var(--sidebar-background))',
-  				foreground: 'hsl(var(--sidebar-foreground))',
-  				primary: 'hsl(var(--sidebar-primary))',
-  				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-  				accent: 'hsl(var(--sidebar-accent))',
-  				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-  				border: 'hsl(var(--sidebar-border))',
-  				ring: 'hsl(var(--sidebar-ring))'
-  			}
-  		},
-  		borderRadius: {
-  			lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
-  		}
-  	}
+    fontFamily: {
+      mono: "var(--font-geist-mono)",
+    },
+    extend: {
+      keyframes: {
+        "caret-blink": {
+          "0%,70%,100%": {
+            opacity: "1",
+          },
+          "20%,50%": {
+            opacity: "0",
+          },
+        },
+      },
+      animation: {
+        "caret-blink": "caret-blink 1.25s ease-out infinite",
+      },
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        chart: {
+          "1": "hsl(var(--chart-1))",
+          "2": "hsl(var(--chart-2))",
+          "3": "hsl(var(--chart-3))",
+          "4": "hsl(var(--chart-4))",
+          "5": "hsl(var(--chart-5))",
+        },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
   },
 } satisfies Config;
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index b47edf5b..5f60a542 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -20,9 +20,8 @@
     ],
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*", "../api/src/*"]
+      "@/*": ["src/*"]
     },
-    "types": ["@cloudflare/workers-types"]
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules", ".next"]
diff --git a/bun.lockb b/bun.lockb
index 7ae8c6ef..565b4a99 100755
Binary files a/bun.lockb and b/bun.lockb differ