vite

* replace next with vite * disable strictmode (it interferes with collaboration in dev mode)
2025-11-16 04:41:12 +10:00 · 2023-10-20 17:12:08 +01:00
parent a86991e3d7
commit 9b682c8af5
96 changed files with 645 additions and 505 deletions
--- a/client/.env.example
+++ b/client/.env.example
@ -0,0 +1,2 @@
+VITE_BACKEND_API_URL=http://localhost:3001
+VITE_COLLABORATION_URL=
--- a/client/.eslintrc.cjs
+++ b/client/.eslintrc.cjs
@ -0,0 +1,19 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    '@typescript-eslint/no-explicit-any': 'off',
+  },
+}
--- a/client/.gitignore
+++ b/client/.gitignore
@ -0,0 +1,27 @@
+.env
+package-lock.json
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/client/README.md
+++ b/client/README.md
@ -0,0 +1,27 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+   parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+   },
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
--- a/client/index.html
+++ b/client/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/client/package.json
+++ b/client/package.json
@ -0,0 +1,71 @@
+{
+  "name": "client",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite --port 3000",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview --port 3000"
+  },
+  "dependencies": {
+    "@hocuspocus/provider": "^2.7.0",
+    "@mantine/core": "^7.1.5",
+    "@mantine/form": "^7.1.5",
+    "@mantine/hooks": "^7.1.5",
+    "@mantine/spotlight": "^7.1.5",
+    "@mantine/tiptap": "^7.1.5",
+    "@tabler/icons-react": "^2.39.0",
+    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-table": "^8.10.7",
+    "@tiptap/extension-collaboration": "^2.1.12",
+    "@tiptap/extension-collaboration-cursor": "^2.1.12",
+    "@tiptap/extension-document": "^2.1.12",
+    "@tiptap/extension-heading": "^2.1.12",
+    "@tiptap/extension-highlight": "^2.1.12",
+    "@tiptap/extension-link": "^2.1.12",
+    "@tiptap/extension-placeholder": "^2.1.12",
+    "@tiptap/extension-subscript": "^2.1.12",
+    "@tiptap/extension-superscript": "^2.1.12",
+    "@tiptap/extension-text-align": "^2.1.12",
+    "@tiptap/extension-underline": "^2.1.12",
+    "@tiptap/pm": "^2.1.12",
+    "@tiptap/react": "^2.1.12",
+    "@tiptap/starter-kit": "^2.1.12",
+    "axios": "^1.5.1",
+    "clsx": "^2.0.0",
+    "jotai": "^2.4.3",
+    "jotai-optics": "^0.3.1",
+    "js-cookie": "^3.0.5",
+    "react": "^18.2.0",
+    "react-arborist": "^3.2.0",
+    "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
+    "react-router-dom": "^6.17.0",
+    "socket.io-client": "^4.7.2",
+    "uuid": "^9.0.1",
+    "y-indexeddb": "^9.0.11",
+    "yjs": "^13.6.8",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@types/js-cookie": "^3.0.4",
+    "@types/node": "20.8.6",
+    "@types/react": "^18.2.29",
+    "@types/react-dom": "^18.2.14",
+    "@types/uuid": "^9.0.6",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.51.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "optics-ts": "^2.4.1",
+    "postcss": "^8.4.31",
+    "postcss-preset-mantine": "^1.9.0",
+    "postcss-simple-vars": "^7.0.1",
+    "prettier": "^3.0.3",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.5"
+  }
+}
--- a/client/postcss.config.js
+++ b/client/postcss.config.js
@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    "postcss-preset-mantine": {},
+    "postcss-simple-vars": {
+      variables: {
+        "mantine-breakpoint-xs": "36em",
+        "mantine-breakpoint-sm": "48em",
+        "mantine-breakpoint-md": "62em",
+        "mantine-breakpoint-lg": "75em",
+        "mantine-breakpoint-xl": "88em",
+      },
+    },
+  },
+};
--- a/client/public/vite.svg
+++ b/client/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@ -0,0 +1,26 @@
+import { Route, Routes } from 'react-router-dom';
+import { Welcome } from '@/pages/welcome';
+import SignUpPage from '@/pages/auth/signup';
+import LoginPage from '@/pages/auth/login';
+import DashboardLayout from '@/components/layouts/layout';
+import Home from '@/pages/dashboard/home';
+import Page from '@/pages/page/page';
+
+export default function App() {
+
+  return (
+    <>
+      <Routes>
+        <Route index element={<Welcome />} />
+        <Route path={'/login'} element={<LoginPage />} />
+        <Route path={'/signup'} element={<SignUpPage />} />
+
+        <Route element={<DashboardLayout />}>
+          <Route path={'/home'} element={<Home />} />
+          <Route path={'/p/:pageId'} element={<Page />} />
+        </Route>
+
+      </Routes>
+    </>
+  );
+}
--- a/client/src/assets/react.svg
+++ b/client/src/assets/react.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/client/src/components/layouts/layout.tsx
+++ b/client/src/components/layouts/layout.tsx
@ -0,0 +1,14 @@
+import { UserProvider } from '@/features/user/user-provider';
+import Shell from './shell';
+import { Outlet } from 'react-router-dom';
+
+export default function DashboardLayout() {
+
+  return (
+    <UserProvider>
+      <Shell>
+        <Outlet />
+      </Shell>
+    </UserProvider>
+  );
+}
--- a/client/src/components/layouts/shell.tsx
+++ b/client/src/components/layouts/shell.tsx
@ -0,0 +1,51 @@
+import { desktopSidebarAtom } from '@/components/navbar/atoms/sidebar-atom';
+import { useToggleSidebar } from '@/components/navbar/hooks/use-toggle-sidebar';
+import { Navbar } from '@/components/navbar/navbar';
+import { AppShell, Burger, Group } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { useAtom } from 'jotai';
+
+export default function Shell({ children }: { children: React.ReactNode }) {
+  const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
+  const [desktopOpened] = useAtom(desktopSidebarAtom);
+  const toggleDesktop = useToggleSidebar(desktopSidebarAtom);
+
+  return (
+    <AppShell
+      layout="alt"
+      header={{ height: 45 }}
+      navbar={{
+        width: 300,
+        breakpoint: 'sm',
+        collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
+      }}
+      padding="md"
+    >
+      <AppShell.Header>
+        <Group h="100%" px="md">
+          <Burger
+            opened={mobileOpened}
+            onClick={toggleMobile}
+            hiddenFrom="sm"
+            size="sm"
+          />
+          <Burger
+            opened={desktopOpened}
+            onClick={toggleDesktop}
+            visibleFrom="sm"
+            size="sm"
+          />
+
+          Header
+
+        </Group>
+      </AppShell.Header>
+
+      <AppShell.Navbar>
+        <Navbar />
+      </AppShell.Navbar>
+
+      <AppShell.Main>{children}</AppShell.Main>
+    </AppShell>
+  );
+}
--- a/client/src/components/navbar/atoms/sidebar-atom.ts
+++ b/client/src/components/navbar/atoms/sidebar-atom.ts
@ -0,0 +1,3 @@
+import { atomWithWebStorage } from "@/lib/jotai-helper";
+
+export const desktopSidebarAtom = atomWithWebStorage('showSidebar',true);
--- a/client/src/components/navbar/hooks/use-toggle-sidebar.ts
+++ b/client/src/components/navbar/hooks/use-toggle-sidebar.ts
@ -0,0 +1,8 @@
+import { useAtom } from "jotai";
+
+export function useToggleSidebar(sidebarAtom: any) {
+  const [sidebarState, setSidebarState] = useAtom(sidebarAtom);
+  return () => {
+    setSidebarState(!sidebarState);
+  }
+}
--- a/client/src/components/navbar/navbar.module.css
+++ b/client/src/components/navbar/navbar.module.css
@ -0,0 +1,88 @@
+.navbar {
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
+    height: 100%;
+    width: 100%;
+    padding: var(--mantine-spacing-md);
+    padding-top: 0;
+    display: flex;
+    flex-direction: column;
+    /*border-right: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));*/
+}
+
+.section {
+    margin-left: calc(var(--mantine-spacing-md) * -1);
+    margin-right: calc(var(--mantine-spacing-md) * -1);
+    margin-bottom: var(--mantine-spacing-md);
+
+    &:not(:last-of-type) {
+        border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+    }
+}
+
+.searchCode {
+    font-weight: 700;
+    font-size: rem(10px);
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
+    border: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-7));
+}
+
+.menuItems {
+    padding-left: calc(var(--mantine-spacing-md) - var(--mantine-spacing-xs));
+    padding-right: calc(var(--mantine-spacing-md) - var(--mantine-spacing-xs));
+    padding-bottom: var(--mantine-spacing-md);
+}
+
+.menu {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    font-size: var(--mantine-font-size-sm);
+    padding: rem(8px) var(--mantine-spacing-xs);
+    border-radius: var(--mantine-radius-sm);
+    font-weight: 500;
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+
+    &:hover {
+        background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6));
+        color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+    }
+}
+
+.menuItemInner {
+    display: flex;
+    align-items: center;
+    flex: 1;
+}
+
+.menuItemIcon {
+    margin-right: var(--mantine-spacing-sm);
+    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+}
+
+.pages {
+    padding-left: calc(var(--mantine-spacing-md) - rem(6px));
+    padding-right: calc(var(--mantine-spacing-md) - rem(6px));
+    padding-bottom: var(--mantine-spacing-md);
+}
+
+.pagesHeader {
+    padding-left: calc(var(--mantine-spacing-md) + rem(2px));
+    padding-right: var(--mantine-spacing-md);
+    margin-bottom: rem(5px);
+}
+
+.pageLink {
+    display: block;
+    padding: rem(8px) var(--mantine-spacing-xs);
+    text-decoration: none;
+    border-radius: var(--mantine-radius-sm);
+    font-size: var(--mantine-font-size-xs);
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+    line-height: 1;
+    font-weight: 500;
+
+    &:hover {
+        background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+        color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+    }
+}
--- a/client/src/components/navbar/navbar.tsx
+++ b/client/src/components/navbar/navbar.tsx
@ -0,0 +1,116 @@
+import {
+  UnstyledButton,
+  Text,
+  Group,
+  ActionIcon,
+  Tooltip,
+  rem,
+} from '@mantine/core';
+import { spotlight } from '@mantine/spotlight';
+import {
+  IconSearch,
+  IconPlus,
+  IconSettings,
+  IconFilePlus,
+} from '@tabler/icons-react';
+
+import classes from './navbar.module.css';
+import { UserButton } from './user-button';
+import React from 'react';
+import { useAtom } from 'jotai';
+import { settingsModalAtom } from '@/features/settings/modal/atoms/settings-modal-atom';
+import SettingsModal from '@/features/settings/modal/settings-modal';
+import { SearchSpotlight } from '@/features/search/search-spotlight';
+import { treeApiAtom } from '@/features/page/tree/atoms/tree-api-atom';
+import PageTree from '@/features/page/tree/page-tree';
+
+interface PrimaryMenuItem {
+  icon: React.ElementType;
+  label: string;
+  onClick?: () => void;
+}
+
+const primaryMenu: PrimaryMenuItem[] = [
+  { icon: IconSearch, label: 'Search' },
+  { icon: IconSettings, label: 'Settings' },
+  { icon: IconFilePlus, label: 'New Page' },
+];
+
+export function Navbar() {
+  const [, setSettingsModalOpen] = useAtom(settingsModalAtom);
+  const [tree] = useAtom(treeApiAtom);
+
+  const handleMenuItemClick = (label: string) => {
+    if (label === 'Search') {
+      spotlight.open();
+    }
+
+    if (label === 'Settings') {
+      setSettingsModalOpen(true);
+    }
+  };
+
+  function handleCreatePage() {
+    tree?.create({ parentId: null, type: 'internal', index: 0 });
+  }
+
+  const primaryMenuItems = primaryMenu.map((menuItem) => (
+    <UnstyledButton
+      key={menuItem.label}
+      className={classes.menu}
+      onClick={() => handleMenuItemClick(menuItem.label)}
+    >
+      <div className={classes.menuItemInner}>
+        <menuItem.icon
+          size={20}
+          className={classes.menuItemIcon}
+          stroke={1.5}
+        />
+        <span>{menuItem.label}</span>
+      </div>
+    </UnstyledButton>
+  ));
+
+  return (
+    <>
+      <nav className={classes.navbar}>
+        <div className={classes.section}>
+          <UserButton />
+        </div>
+
+        <div className={classes.section}>
+          <div className={classes.menuItems}>{primaryMenuItems}</div>
+        </div>
+
+        <div className={classes.section}>
+          <Group className={classes.pagesHeader} justify="space-between">
+            <Text size="xs" fw={500} c="dimmed">
+              Pages
+            </Text>
+
+            <Tooltip label="Create page" withArrow position="right">
+              <ActionIcon
+                variant="default"
+                size={18}
+                onClick={handleCreatePage}
+              >
+                <IconPlus
+                  style={{ width: rem(12), height: rem(12) }}
+                  stroke={1.5}
+                />
+              </ActionIcon>
+            </Tooltip>
+          </Group>
+
+          <div className={classes.pages}>
+            <PageTree />
+          </div>
+
+        </div>
+      </nav>
+
+      <SearchSpotlight />
+      <SettingsModal />
+    </>
+  );
+}
--- a/client/src/components/navbar/user-button.module.css
+++ b/client/src/components/navbar/user-button.module.css
@ -0,0 +1,10 @@
+.user {
+    display: block;
+    width: 100%;
+    padding: var(--mantine-spacing-md);
+    color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
+  
+    @mixin hover {
+      background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
+    }
+  }
--- a/client/src/components/navbar/user-button.tsx
+++ b/client/src/components/navbar/user-button.tsx
@ -0,0 +1,28 @@
+import { UnstyledButton, Group, Avatar, Text, rem } from '@mantine/core';
+import { IconChevronRight } from '@tabler/icons-react';
+import classes from './user-button.module.css';
+
+export function UserButton() {
+  return (
+    <UnstyledButton className={classes.user}>
+      <Group>
+        <Avatar
+          src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=255&q=80"
+          radius="xl"
+        />
+
+        <div style={{ flex: 1 }}>
+          <Text size="sm" fw={500}>
+            Harriette Spoonlicker
+          </Text>
+
+          <Text c="dimmed" size="xs">
+            hspoonlicker@outlook.com
+          </Text>
+        </div>
+
+        <IconChevronRight style={{ width: rem(14), height: rem(14) }} stroke={1.5} />
+      </Group>
+    </UnstyledButton>
+  );
+}
--- a/client/src/components/providers/tanstack-provider.tsx
+++ b/client/src/components/providers/tanstack-provider.tsx
@ -0,0 +1,19 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React from 'react';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+export function TanstackProvider({ children }: React.PropsWithChildren) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+    </QueryClientProvider>
+  );
+}
--- a/client/src/components/theme-toggle.tsx
+++ b/client/src/components/theme-toggle.tsx
@ -0,0 +1,13 @@
+import { Button, Group, useMantineColorScheme } from '@mantine/core';
+
+export function ThemeToggle() {
+    const { setColorScheme } = useMantineColorScheme();
+
+    return (
+      <Group justify="center" mt="xl">
+          <Button onClick={() => setColorScheme('light')}>Light</Button>
+          <Button onClick={() => setColorScheme('dark')}>Dark</Button>
+          <Button onClick={() => setColorScheme('auto')}>Auto</Button>
+      </Group>
+    );
+}
--- a/client/src/components/ui/custom-toaster.tsx
+++ b/client/src/components/ui/custom-toaster.tsx
@ -0,0 +1,19 @@
+import t, { Toaster, useToasterStore } from "react-hot-toast";
+import { useEffect, useState } from "react";
+
+export default function CustomToaster() {
+  const { toasts } = useToasterStore();
+  const TOAST_LIMIT = 3;
+  const [toastLimit, setToastLimit] = useState<number>(TOAST_LIMIT);
+
+  useEffect(() => {
+    toasts
+      .filter((tt) => tt.visible)
+      .filter((_, i) => i >= toastLimit)
+      .forEach((tt) => {
+        t.dismiss(tt.id);
+      });
+  }, [toastLimit, toasts]);
+
+  return <Toaster position={"top-right"}/>;
+}
--- a/client/src/features/auth/atoms/auth-tokens-atom.ts
+++ b/client/src/features/auth/atoms/auth-tokens-atom.ts
@ -0,0 +1,14 @@
+import Cookies from "js-cookie";
+import { createJSONStorage, atomWithStorage } from "jotai/utils";
+import { ITokens } from '../types/auth.types';
+
+
+const cookieStorage = createJSONStorage<ITokens>(() => {
+  return {
+    getItem: () => Cookies.get("authTokens"),
+    setItem: (key, value) => Cookies.set(key, value),
+    removeItem: (key) => Cookies.remove(key),
+  };
+});
+
+export const authTokensAtom = atomWithStorage<ITokens | null>("authTokens", null, cookieStorage);
--- a/client/src/features/auth/components/login-form.tsx
+++ b/client/src/features/auth/components/login-form.tsx
@ -0,0 +1,78 @@
+import * as React from 'react';
+import * as z from 'zod';
+
+import { useForm, zodResolver } from '@mantine/form';
+import useAuth from '@/features/auth/hooks/use-auth';
+import { ILogin } from '@/features/auth/types/auth.types';
+import {
+  Container,
+  Title,
+  Anchor,
+  Paper,
+  TextInput,
+  Button,
+  Text,
+  PasswordInput,
+} from '@mantine/core';
+import { Link } from 'react-router-dom';
+
+const formSchema = z.object({
+  email: z
+    .string({ required_error: 'email is required' })
+    .email({ message: 'Invalid email address' }),
+  password: z.string({ required_error: 'password is required' }),
+});
+
+export function LoginForm() {
+  const { signIn, isLoading } = useAuth();
+
+  const form = useForm<ILogin>({
+    validate: zodResolver(formSchema),
+    initialValues: {
+      email: '',
+      password: '',
+    },
+  });
+
+  async function onSubmit(data: ILogin) {
+    await signIn(data);
+  }
+
+  return (
+    <Container size={420} my={40}>
+      <Title ta="center" fw={800}>
+        Login
+      </Title>
+      <Text c="dimmed" size="sm" ta="center" mt={5}>
+        Don't have an account yet?{' '}
+        <Anchor size="sm" component={Link} to="/signup">
+          Create account
+        </Anchor>
+      </Text>
+
+      <Paper withBorder shadow="md" p={30} mt={30} radius="md">
+        <form onSubmit={form.onSubmit(onSubmit)}>
+          <TextInput
+            id="email"
+            type="email"
+            label="Email"
+            placeholder="email@example.com"
+            required
+            {...form.getInputProps('email')}
+          />
+
+          <PasswordInput
+            label="Password"
+            placeholder="Your password"
+            required
+            mt="md"
+            {...form.getInputProps('password')}
+          />
+          <Button type="submit" fullWidth mt="xl" loading={isLoading}>
+            Sign In
+          </Button>
+        </form>
+      </Paper>
+    </Container>
+  );
+}
--- a/client/src/features/auth/components/sign-up-form.tsx
+++ b/client/src/features/auth/components/sign-up-form.tsx
@ -0,0 +1,78 @@
+import * as React from 'react';
+import * as z from 'zod';
+
+import { useForm, zodResolver } from '@mantine/form';
+import {
+  Container,
+  Title,
+  Anchor,
+  Paper,
+  TextInput,
+  Button,
+  Text,
+  PasswordInput,
+} from '@mantine/core';
+import { Link } from 'react-router-dom';
+import { IRegister } from '@/features/auth/types/auth.types';
+import useAuth from '@/features/auth/hooks/use-auth';
+
+const formSchema = z.object({
+  email: z
+    .string({ required_error: 'email is required' })
+    .email({ message: 'Invalid email address' }),
+  password: z.string({ required_error: 'password is required' }),
+});
+
+export function SignUpForm() {
+  const { signUp, isLoading } = useAuth();
+
+  const form = useForm<IRegister>({
+    validate: zodResolver(formSchema),
+    initialValues: {
+      email: '',
+      password: '',
+    },
+  });
+
+  async function onSubmit(data: IRegister) {
+    await signUp(data);
+  }
+
+  return (
+    <Container size={420} my={40}>
+      <Title ta="center" fw={800}>
+        Create an account
+      </Title>
+      <Text c="dimmed" size="sm" ta="center" mt={5}>
+        Already have an account?{' '}
+        <Anchor size="sm" component={Link} to="/login">
+          Login
+        </Anchor>
+      </Text>
+
+      <Paper withBorder shadow="md" p={30} mt={30} radius="md">
+        <form onSubmit={form.onSubmit(onSubmit)}>
+          <TextInput
+            id="email"
+            type="email"
+            label="Email"
+            placeholder="email@example.com"
+            required
+            {...form.getInputProps('email')}
+          />
+
+          <PasswordInput
+            label="Password"
+            placeholder="Your password"
+            required
+            mt="md"
+            {...form.getInputProps('password')}
+          />
+          <Button type="submit" fullWidth mt="xl" loading={isLoading}>
+            Sign Up
+          </Button>
+        </form>
+      </Paper>
+    </Container>
+  );
+}
--- a/client/src/features/auth/hooks/use-auth.ts
+++ b/client/src/features/auth/hooks/use-auth.ts
@ -0,0 +1,58 @@
+import { useState } from "react";
+import { login, register } from "@/features/auth/services/auth-service";
+import { useNavigate } from "react-router-dom";
+import { useAtom } from "jotai";
+import { authTokensAtom } from "@/features/auth/atoms/auth-tokens-atom";
+import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
+import { ILogin, IRegister } from "@/features/auth/types/auth.types";
+import toast from "react-hot-toast";
+
+export default function useAuth() {
+  const [isLoading, setIsLoading] = useState(false);
+  const navigate = useNavigate();
+
+  const [, setCurrentUser] = useAtom(currentUserAtom);
+  const [authToken, setAuthToken] = useAtom(authTokensAtom);
+
+  const handleSignIn = async (data: ILogin) => {
+    setIsLoading(true);
+
+    try {
+      const res = await login(data);
+      setIsLoading(false);
+      setAuthToken(res.tokens);
+
+      navigate("/home");
+    } catch (err) {
+      setIsLoading(false);
+      toast.error(err.response?.data.message)
+    }
+  };
+
+  const handleSignUp = async (data: IRegister) => {
+    setIsLoading(true);
+
+    try {
+      const res = await register(data);
+      setIsLoading(false);
+
+      setAuthToken(res.tokens);
+
+      navigate("/home");
+    } catch (err) {
+      setIsLoading(false);
+      toast.error(err.response?.data.message)
+    }
+  };
+
+  const hasTokens = () => {
+    return !!authToken;
+  };
+
+  const handleLogout = async () => {
+    setAuthToken(null);
+    setCurrentUser(null);
+  }
+
+  return { signIn: handleSignIn, signUp: handleSignUp, isLoading, hasTokens };
+}
--- a/client/src/features/auth/services/auth-service.ts
+++ b/client/src/features/auth/services/auth-service.ts
@ -0,0 +1,12 @@
+import api from "@/lib/api-client";
+import { ILogin, IRegister, ITokenResponse } from "@/features/auth/types/auth.types";
+
+export async function login(data: ILogin): Promise<ITokenResponse>{
+  const req = await api.post<ITokenResponse>("/auth/login", data);
+  return req.data as ITokenResponse;
+}
+
+export async function register(data: IRegister): Promise<ITokenResponse>{
+  const req = await api.post<ITokenResponse>("/auth/register", data);
+  return req.data as ITokenResponse;
+}
--- a/client/src/features/auth/types/auth.types.ts
+++ b/client/src/features/auth/types/auth.types.ts
@ -0,0 +1,18 @@
+export interface ILogin {
+  email: string,
+  password: string
+}
+
+export interface IRegister {
+  email: string,
+  password: string
+}
+
+export interface ITokens {
+  accessToken: string,
+  refreshToken: string
+}
+
+export interface ITokenResponse {
+  tokens: ITokens
+}
--- a/client/src/features/editor/editor.tsx
+++ b/client/src/features/editor/editor.tsx
@ -0,0 +1,161 @@
+import '@/features/editor/styles/editor.css';
+
+import { HocuspocusProvider } from '@hocuspocus/provider';
+import * as Y from 'yjs';
+import { EditorContent, useEditor } from '@tiptap/react';
+import { StarterKit } from '@tiptap/starter-kit';
+import { Placeholder } from '@tiptap/extension-placeholder';
+import { Collaboration } from '@tiptap/extension-collaboration';
+import { CollaborationCursor } from '@tiptap/extension-collaboration-cursor';
+import { useEffect, useLayoutEffect, useState } from 'react';
+import { useAtom } from 'jotai';
+import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
+import { authTokensAtom } from '@/features/auth/atoms/auth-tokens-atom';
+import useCollaborationUrl from '@/features/editor/hooks/use-collaboration-url';
+import { IndexeddbPersistence } from 'y-indexeddb';
+import { RichTextEditor } from '@mantine/tiptap';
+import { TextAlign } from '@tiptap/extension-text-align';
+import { Highlight } from '@tiptap/extension-highlight';
+import { Superscript } from '@tiptap/extension-superscript';
+import SubScript from '@tiptap/extension-subscript';
+import { Link } from '@tiptap/extension-link';
+import { Underline } from '@tiptap/extension-underline';
+
+interface EditorProps {
+  pageId: string,
+  token?: string,
+}
+
+const colors = ['#958DF1', '#F98181', '#FBBC88', '#FAF594', '#70CFF8', '#94FADB', '#B9F18D'];
+const getRandomElement = list => list[Math.floor(Math.random() * list.length)];
+const getRandomColor = () => getRandomElement(colors);
+
+export default function Editor({ pageId }: EditorProps) {
+  const [token] = useAtom(authTokensAtom);
+  const collaborationURL = useCollaborationUrl();
+  const [provider, setProvider] = useState<any>();
+  const [yDoc] = useState(() => new Y.Doc());
+
+
+  useEffect(() => {
+    if (token) {
+      const indexeddbProvider = new IndexeddbPersistence(pageId, yDoc)
+      const provider = new HocuspocusProvider({
+        url: collaborationURL,
+        name: pageId,
+        document: yDoc,
+        token: token.accessToken,
+      });
+
+      setProvider(provider);
+
+      return () => {
+        provider.destroy();
+        setProvider(null);
+        indexeddbProvider.destroy();
+      };
+    }
+  }, [pageId, token]);
+
+  if (!provider) {
+    return null;
+  }
+
+  return (
+    <TiptapEditor ydoc={yDoc} provider={provider} />
+  );
+}
+
+interface TiptapEditorProps {
+  ydoc: Y.Doc,
+  provider: HocuspocusProvider
+}
+
+function TiptapEditor({ ydoc, provider }: TiptapEditorProps) {
+  const [currentUser] = useAtom(currentUserAtom);
+
+  const extensions = [
+    StarterKit.configure({
+      history: false,
+    }),
+    Placeholder.configure({
+      placeholder: 'Write here',
+    }),
+    Collaboration.configure({
+      document: ydoc,
+    }),
+    CollaborationCursor.configure({
+      provider,
+    }),
+    Underline,
+    Link,
+    Superscript,
+    SubScript,
+    Highlight,
+    TextAlign.configure({ types: ['heading', 'paragraph'] }),
+  ];
+
+  const editor = useEditor({
+    extensions: extensions,
+  });
+
+  useEffect(() => {
+    if (editor && currentUser.user) {
+      editor.chain().focus().updateUser({ ...currentUser.user, color: getRandomColor() }).run();
+    }
+  }, [editor, currentUser.user]);
+
+  useEffect(() => {
+    provider.on('status', event => {
+      console.log(event);
+    });
+
+  }, [provider]);
+
+
+  return (
+    <RichTextEditor editor={editor}>
+      <RichTextEditor.Toolbar sticky stickyOffset={60}>
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Bold />
+          <RichTextEditor.Italic />
+          <RichTextEditor.Underline />
+          <RichTextEditor.Strikethrough />
+          <RichTextEditor.ClearFormatting />
+          <RichTextEditor.Highlight />
+          <RichTextEditor.Code />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.H1 />
+          <RichTextEditor.H2 />
+          <RichTextEditor.H3 />
+          <RichTextEditor.H4 />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Blockquote />
+          <RichTextEditor.Hr />
+          <RichTextEditor.BulletList />
+          <RichTextEditor.OrderedList />
+          <RichTextEditor.Subscript />
+          <RichTextEditor.Superscript />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Link />
+          <RichTextEditor.Unlink />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.AlignLeft />
+          <RichTextEditor.AlignCenter />
+          <RichTextEditor.AlignJustify />
+          <RichTextEditor.AlignRight />
+        </RichTextEditor.ControlsGroup>
+      </RichTextEditor.Toolbar>
+
+      <RichTextEditor.Content />
+    </RichTextEditor>
+  );
+}
--- a/client/src/features/editor/hooks/use-collaboration-url.ts
+++ b/client/src/features/editor/hooks/use-collaboration-url.ts
@ -0,0 +1,17 @@
+const useCollaborationURL = (): string => {
+  const PATH = "/collaboration";
+
+  if (import.meta.env.VITE_COLLABORATION_URL) {
+    return import.meta.env.VITE_COLLABORATION_URL + PATH;
+  }
+
+  const API_URL = import.meta.env.VITE_BACKEND_API_URL;
+  if (!API_URL) {
+    throw new Error("Backend API URL is not defined");
+  }
+
+  const wsProtocol = API_URL.startsWith('https') ? 'wss' : 'ws';
+  return `${wsProtocol}://${API_URL.split('://')[1]}${PATH}`;
+};
+
+export default useCollaborationURL;
--- a/client/src/features/editor/styles/editor.css
+++ b/client/src/features/editor/styles/editor.css
@ -0,0 +1,199 @@
+/* Basic editor styles */
+.tiptap {
+    > * + * {
+        margin-top: 0.75em;
+    }
+
+    ul,
+    ol {
+        padding: 0 1rem;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        line-height: 1.1;
+    }
+
+    code {
+        background-color: rgba(#616161, 0.1);
+        color: #616161;
+    }
+
+    pre {
+        background: #0d0d0d;
+        border-radius: 0.5rem;
+        color: #fff;
+        font-family: "JetBrainsMono", monospace;
+        padding: 0.75rem 1rem;
+
+        code {
+            background: none;
+            color: inherit;
+            font-size: 0.8rem;
+            padding: 0;
+        }
+    }
+
+    mark {
+        background-color: #faf594;
+    }
+
+    img {
+        height: auto;
+        max-width: 100%;
+    }
+
+    hr {
+        margin: 1rem 0;
+    }
+
+    blockquote {
+        border-left: 2px solid rgba(#0d0d0d, 0.1);
+        padding-left: 1rem;
+    }
+
+    hr {
+        border: none;
+        border-top: 2px solid rgba(#0d0d0d, 0.1);
+        margin: 2rem 0;
+    }
+
+    ul[data-type="taskList"] {
+        list-style: none;
+        padding: 0;
+
+        li {
+            align-items: center;
+            display: flex;
+
+            > label {
+                flex: 0 0 auto;
+                margin-right: 0.5rem;
+                user-select: none;
+            }
+
+            > div {
+                flex: 1 1 auto;
+            }
+        }
+    }
+}
+
+.editor {
+    background-color: #fff;
+    border: 2px solid #0d0d0d;
+    border-radius: 0.75rem;
+    box-shadow: 5px 5px #000;
+    color: #0d0d0d;
+    display: flex;
+    flex-direction: column;
+    max-height: 26rem;
+
+    &__header {
+        align-items: center;
+        border-bottom: 2px solid #0d0d0d;
+        border-top-left-radius: 0.25rem;
+        border-top-right-radius: 0.25rem;
+        display: flex;
+        justify-content: space-between;
+        padding: 0.5rem 1rem;
+    }
+
+    &__users {
+        color: rgba(#000, 0.8);
+        display: flex;
+        font-size: 0.85rem;
+        gap: 1rem;
+    }
+
+    &__content {
+        flex: 1 1 auto;
+        overflow-x: hidden;
+        overflow-y: auto;
+        padding: 1.25rem 1rem;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    /* Some information about the status */
+    &__status {
+        align-items: center;
+        border-radius: 5px;
+        display: flex;
+
+        &::before {
+            background: rgba(#0d0d0d, 0.5);
+            border-radius: 50%;
+            content: " ";
+            display: inline-block;
+            flex: 0 0 auto;
+            height: 0.5rem;
+            margin-right: 0.5rem;
+            width: 0.5rem;
+        }
+
+        &--connecting::before {
+            background: #616161;
+        }
+
+        &--connected::before {
+            background: #b9f18d;
+        }
+    }
+
+    &__name button {
+        appearance: none;
+        background: transparent;
+        border: none;
+        color: inherit;
+        cursor: pointer;
+        font: inherit;
+        line-height: normal;
+        margin: 0;
+        padding: 0;
+        overflow: visible;
+        width: auto;
+    }
+}
+
+/* Give a remote user a caret */
+.collaboration-cursor__caret {
+    border-left: 1px solid #0d0d0d;
+    border-right: 1px solid #0d0d0d;
+    margin-left: -1px;
+    margin-right: -1px;
+    pointer-events: none;
+    position: relative;
+    word-break: normal;
+}
+
+/* Render the username above the caret */
+.collaboration-cursor__label {
+    border-radius: 3px 3px 3px 0;
+    color: #0d0d0d;
+    font-size: 0.75rem;
+    font-style: normal;
+    font-weight: 600;
+    left: -1px;
+    line-height: normal;
+    padding: 0.1rem 0.3rem;
+    position: absolute;
+    top: -1.4em;
+    user-select: none;
+    white-space: nowrap;
+}
+
+.dots {
+    display: flex;
+    gap: 6px;
+}
+
+.dot {
+    background: #000;
+    border-radius: 100%;
+    height: 0.625rem;
+    width: 0.625rem;
+}
--- a/client/src/features/page/hooks/usePage.ts
+++ b/client/src/features/page/hooks/usePage.ts
@ -0,0 +1,34 @@
+import { useMutation, useQuery, UseQueryResult } from '@tanstack/react-query';
+import { ICurrentUserResponse } from '@/features/user/types/user.types';
+import { getUserInfo } from '@/features/user/services/user-service';
+import { createPage, deletePage, getPageById, updatePage } from '@/features/page/services/page-service';
+import { IPage } from '@/features/page/types/page.types';
+
+
+export default function usePage() {
+
+  const createMutation = useMutation(
+    (data: Partial<IPage>) => createPage(data),
+  );
+
+  const getPageByIdQuery = (id: string) => ({
+    queryKey: ['page', id],
+    queryFn: async () => getPageById(id),
+  });
+
+  const updateMutation = useMutation(
+    (data: Partial<IPage>) => updatePage(data),
+  );
+
+
+  const deleteMutation = useMutation(
+    (id: string) => deletePage(id),
+  );
+
+  return {
+    create: createMutation.mutate,
+    getPageById: getPageByIdQuery,
+    update: updateMutation.mutate,
+    delete: deleteMutation.mutate,
+  };
+}
--- a/client/src/features/page/services/page-service.ts
+++ b/client/src/features/page/services/page-service.ts
@ -0,0 +1,35 @@
+import api from '@/lib/api-client';
+import { IMovePage, IPage, IWorkspacePageOrder } from '@/features/page/types/page.types';
+
+export async function createPage(data: Partial<IPage>): Promise<IPage> {
+  const req = await api.post<IPage>('/page/create', data);
+  return req.data as IPage;
+}
+
+export async function getPageById(id: string): Promise<IPage> {
+  const req = await api.post<IPage>('/page/details', { id });
+  return req.data as IPage;
+}
+
+export async function getPages(): Promise<IPage[]> {
+  const req = await api.post<IPage[]>('/page/list');
+  return req.data as IPage[];
+}
+
+export async function getWorkspacePageOrder(): Promise<IWorkspacePageOrder[]> {
+  const req = await api.post<IWorkspacePageOrder[]>('/page/list/order');
+  return req.data as IWorkspacePageOrder[];
+}
+
+export async function updatePage(data: Partial<IPage>): Promise<IPage> {
+  const req = await api.post<IPage>(`/page/update`, data);
+  return req.data as IPage;
+}
+
+export async function movePage(data: IMovePage): Promise<void> {
+  await api.post<IMovePage>('/page/move', data);
+}
+
+export async function deletePage(id: string): Promise<void> {
+  await api.post('/page/delete', { id });
+}
--- a/client/src/features/page/tree/atoms/tree-api-atom.ts
+++ b/client/src/features/page/tree/atoms/tree-api-atom.ts
@ -0,0 +1,5 @@
+import { atom } from "jotai";
+import { TreeApi } from 'react-arborist';
+import { TreeNode } from "../types";
+
+export const treeApiAtom = atom<TreeApi<TreeNode> | null>(null);
--- a/client/src/features/page/tree/atoms/tree-data-atom.ts
+++ b/client/src/features/page/tree/atoms/tree-data-atom.ts
@ -0,0 +1,4 @@
+import { atom } from "jotai";
+import { TreeNode } from '@/features/page/tree/types';
+
+export const treeDataAtom = atom<TreeNode[]>([]);
--- a/client/src/features/page/tree/atoms/workspace-page-order-atom.ts
+++ b/client/src/features/page/tree/atoms/workspace-page-order-atom.ts
@ -0,0 +1,4 @@
+import { atomWithStorage } from "jotai/utils";
+import { IWorkspacePageOrder } from '@/features/page/types/page.types';
+
+export const workspacePageOrderAtom = atomWithStorage<IWorkspacePageOrder | null>("workspace-page-order", null);
--- a/client/src/features/page/tree/components/fill-flex-parent.tsx
+++ b/client/src/features/page/tree/components/fill-flex-parent.tsx
@ -0,0 +1,28 @@
+import React, { ReactElement } from 'react';
+import { useElementSize } from '@mantine/hooks';
+import { useMergedRef } from '@mantine/hooks';
+
+type Props = {
+  children: (dimens: { width: number; height: number }) => ReactElement;
+};
+
+const style = {
+  flex: 1,
+  width: '100%',
+  height: '100%',
+  minHeight: 0,
+  minWidth: 0,
+};
+
+export const FillFlexParent = React.forwardRef(function FillFlexParent(
+  props: Props,
+  forwardRef
+) {
+  const { ref, width, height } = useElementSize();
+  const mergedRef = useMergedRef(ref, forwardRef);
+  return (
+    <div style={style} ref={mergedRef}>
+      {width && height ? props.children({ width, height }) : null}
+    </div>
+  );
+});
--- a/client/src/features/page/tree/hooks/use-persistence.ts
+++ b/client/src/features/page/tree/hooks/use-persistence.ts
@ -0,0 +1,101 @@
+import { useMemo } from 'react';
+import {
+  CreateHandler,
+  DeleteHandler,
+  MoveHandler,
+  RenameHandler,
+  SimpleTree,
+} from 'react-arborist';
+import { useAtom } from 'jotai';
+import { treeDataAtom } from '@/features/page/tree/atoms/tree-data-atom';
+import { createPage, deletePage, movePage, updatePage } from '@/features/page/services/page-service';
+import { v4 as uuidv4 } from 'uuid';
+import { IMovePage } from '@/features/page/types/page.types';
+import { useNavigate} from 'react-router-dom';
+import { TreeNode } from '@/features/page/tree/types';
+
+
+export function usePersistence<T>() {
+  const [data, setData] = useAtom(treeDataAtom);
+  const navigate = useNavigate();
+
+  const tree = useMemo(() => new SimpleTree<TreeNode>(data), [data]);
+
+
+  const onMove: MoveHandler<T> = (args: { parentId, index, parentNode, dragNodes, dragIds }) => {
+    for (const id of args.dragIds) {
+      tree.move({ id, parentId: args.parentId, index: args.index });
+    }
+    setData(tree.data);
+
+    const newDragIndex = tree.find(args.dragIds[0])?.childIndex;
+
+    const currentTreeData = args.parentId ? tree.find(args.parentId).children : tree.data;
+    const afterId = currentTreeData[newDragIndex - 1]?.id || null;
+    const beforeId = !afterId && currentTreeData[newDragIndex + 1]?.id || null;
+
+    const params: IMovePage= {
+      id: args.dragIds[0],
+      after: afterId,
+      before: beforeId,
+      parentId: args.parentId || null,
+    };
+
+    const payload = Object.fromEntries(
+      Object.entries(params).filter(([key, value]) => value !== null && value !== undefined)
+    );
+
+    try {
+      movePage(payload as IMovePage);
+    } catch (error) {
+      console.error('Error moving page:', error);
+    }
+  };
+
+  const onRename: RenameHandler<T> = ({ name, id }) => {
+    tree.update({ id, changes: { name } as any });
+    setData(tree.data);
+
+    try {
+      updatePage({ id, title: name });
+    } catch (error) {
+      console.error('Error updating page title:', error);
+    }
+  };
+
+  const onCreate: CreateHandler<T> = async ({ parentId, index, type }) => {
+    const data = { id: uuidv4(), name: '' } as any;
+    data.children = [];
+    tree.create({ parentId, index, data });
+    setData(tree.data);
+
+    const payload: { id: string; parentPageId?: string } = { id: data.id };
+    if (parentId) {
+      payload.parentPageId = parentId;
+    }
+
+    try {
+      await createPage(payload);
+      navigate(`/p/${payload.id}`);
+    } catch (error) {
+      console.error('Error creating the page:', error);
+    }
+
+    return data;
+  };
+
+  const onDelete: DeleteHandler<T> = async (args: { ids: string[] }) => {
+    args.ids.forEach((id) => tree.drop({ id }));
+    setData(tree.data);
+
+    try {
+      await deletePage(args.ids[0]);
+    } catch (error) {
+      console.error('Error deleting page:', error);
+    }
+  };
+
+  const controllers = { onMove, onRename, onCreate, onDelete };
+
+  return { data, setData, controllers } as const;
+}
--- a/client/src/features/page/tree/hooks/use-workspace-page-order.ts
+++ b/client/src/features/page/tree/hooks/use-workspace-page-order.ts
@ -0,0 +1,12 @@
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { IWorkspacePageOrder } from '@/features/page/types/page.types';
+import { getWorkspacePageOrder } from '@/features/page/services/page-service';
+
+export default function useWorkspacePageOrder(): UseQueryResult<IWorkspacePageOrder> {
+  return useQuery({
+    queryKey: ["workspace-page-order"],
+    queryFn: async () => {
+      return await getWorkspacePageOrder();
+    },
+  });
+}
--- a/client/src/features/page/tree/page-tree.tsx
+++ b/client/src/features/page/tree/page-tree.tsx
@ -0,0 +1,279 @@
+import { NodeApi, NodeRendererProps, Tree, TreeApi } from 'react-arborist';
+import {
+  IconArrowsLeftRight,
+  IconChevronDown,
+  IconChevronRight,
+  IconCornerRightUp,
+  IconDotsVertical,
+  IconEdit,
+  IconFileDescription,
+  IconLink,
+  IconPlus,
+  IconStar,
+  IconTrash,
+} from '@tabler/icons-react';
+
+import { useEffect } from 'react';
+import clsx from 'clsx';
+
+import styles from './styles/tree.module.css';
+import { ActionIcon, Menu, rem } from '@mantine/core';
+import { useAtom } from 'jotai';
+import { FillFlexParent } from './components/fill-flex-parent';
+import { TreeNode } from './types';
+import { treeApiAtom } from './atoms/tree-api-atom';
+import { usePersistence } from '@/features/page/tree/hooks/use-persistence';
+import { IPage } from '@/features/page/types/page.types';
+import { getPages } from '@/features/page/services/page-service';
+import useWorkspacePageOrder from '@/features/page/tree/hooks/use-workspace-page-order';
+import { useLocation, useNavigate} from 'react-router-dom';
+
+export default function PageTree() {
+  const { data, setData, controllers } = usePersistence<TreeApi<TreeNode>>();
+  const [tree, setTree] = useAtom<TreeApi<TreeNode>>(treeApiAtom);
+  const { data: pageOrderData } = useWorkspacePageOrder();
+  const location = useLocation();
+
+  const fetchAndSetTreeData = async () => {
+    if (pageOrderData?.childrenIds) {
+      try {
+        const pages = await getPages();
+        const treeData = convertToTree(pages, pageOrderData.childrenIds);
+        setData(treeData);
+      } catch (err) {
+        console.error('Error fetching tree data: ', err);
+      }
+    }
+  };
+
+  useEffect(() => {
+    fetchAndSetTreeData();
+  }, [pageOrderData?.childrenIds]);
+
+  useEffect(() => {
+    const pageId = location.pathname.split('/')[2];
+      setTimeout(() => {
+        tree?.select(pageId);
+      }, 100);
+  }, [tree, location.pathname]);
+
+  return (
+    <div className={styles.treeContainer}>
+      <FillFlexParent>
+        {(dimens) => (
+          <Tree
+            data={data}
+            {...controllers}
+            {...dimens}
+            // @ts-ignore
+            ref={(t) => setTree(t)}
+            openByDefault={false}
+            disableMultiSelection={true}
+            className={styles.tree}
+            rowClassName={styles.row}
+            padding={15}
+            rowHeight={30}
+            overscanCount={5}
+          >
+            {Node}
+          </Tree>
+        )}
+      </FillFlexParent>
+    </div>
+  );
+}
+
+function Node({ node, style, dragHandle }: NodeRendererProps<any>) {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate(`/p/${node.id}`);
+  }
+
+  if (node.willReceiveDrop && node.isClosed){
+    setTimeout(() => {
+      if (node.state.willReceiveDrop) node.open();
+    }, 650);
+  }
+
+  return (
+    <>
+      <div
+        style={style}
+        className={clsx(styles.node, node.state)}
+        ref={dragHandle}
+        onClick={handleClick}
+      >
+        <PageArrow node={node} />
+
+        <IconFileDescription size="18px" style={{ marginRight: '4px' }} />
+
+        <span className={styles.text}>
+          {node.isEditing ? (
+            <Input node={node} />
+          ) : (
+            node.data.name || 'untitled'
+          )}
+        </span>
+
+        <div className={styles.actions}>
+          <NodeMenu node={node} />
+          <CreateNode node={node} />
+        </div>
+      </div>
+    </>
+  );
+}
+
+function CreateNode({ node }: { node: NodeApi<TreeNode> }) {
+  const [tree] = useAtom(treeApiAtom);
+
+  function handleCreate() {
+    tree?.create({ type: 'internal', parentId: node.id, index: 0 });
+  }
+
+  return (
+    <ActionIcon variant="transparent" color="gray" onClick={handleCreate}>
+      <IconPlus style={{ width: rem(20), height: rem(20) }} stroke={2} />
+    </ActionIcon>
+  );
+}
+
+function NodeMenu({ node }: { node: NodeApi<TreeNode> }) {
+  const [tree] = useAtom(treeApiAtom);
+
+  function handleDelete() {
+    tree?.delete(node);
+  }
+
+  return (
+    <Menu shadow="md" width={200}>
+      <Menu.Target>
+        <ActionIcon variant="transparent" color="gray">
+          <IconDotsVertical
+            style={{ width: rem(20), height: rem(20) }}
+            stroke={2}
+          />
+        </ActionIcon>
+      </Menu.Target>
+
+      <Menu.Dropdown>
+        <Menu.Item
+          leftSection={<IconEdit style={{ width: rem(14), height: rem(14) }} />}
+          onClick={() => node.edit()}
+        >
+          Rename
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconStar style={{ width: rem(14), height: rem(14) }} />}
+        >
+          Favorite
+        </Menu.Item>
+
+        <Menu.Divider />
+
+        <Menu.Item
+          leftSection={<IconLink style={{ width: rem(14), height: rem(14) }} />}
+        >
+          Copy link
+        </Menu.Item>
+
+        <Menu.Item
+          leftSection={
+            <IconCornerRightUp style={{ width: rem(14), height: rem(14) }} />
+          }
+        >
+          Move
+        </Menu.Item>
+
+        <Menu.Divider />
+        <Menu.Item
+          leftSection={
+            <IconArrowsLeftRight style={{ width: rem(14), height: rem(14) }} />
+          }
+        >
+          Archive
+        </Menu.Item>
+        <Menu.Item
+          color="red"
+          leftSection={
+            <IconTrash style={{ width: rem(14), height: rem(14) }} />
+          }
+          onClick={() => handleDelete()}
+        >
+          Delete
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+}
+
+function PageArrow({ node }: { node: NodeApi<TreeNode> }) {
+  return (
+    <span onClick={(e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      node.toggle();
+    }}>
+
+      {node.isInternal ? (
+        node.children && node.children.length > 0 ? (
+          node.isOpen ? (
+            <IconChevronDown size={18} />
+          ) : (
+            <IconChevronRight size={18} />
+          )
+        ) : (
+          <IconChevronRight size={18} style={{ visibility: 'hidden' }} />
+        )
+      ) : null}
+    </span>
+  );
+}
+
+function Input({ node }: { node: NodeApi<TreeNode> }) {
+  return (
+    <input
+      autoFocus
+      name="name"
+      type="text"
+      placeholder="untitled"
+      defaultValue={node.data.name}
+      onFocus={(e) => e.currentTarget.select()}
+      onBlur={() => node.reset()}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') node.reset();
+        if (e.key === 'Enter') node.submit(e.currentTarget.value);
+      }}
+    />
+  );
+}
+
+function convertToTree(pages: IPage[], pageOrder: string[]): TreeNode[] {
+  const pageMap: { [id: string]: IPage } = {};
+  pages.forEach(page => {
+    pageMap[page.id] = page;
+  });
+
+  function buildTreeNode(id: string): TreeNode | undefined {
+    const page = pageMap[id];
+    if (!page) return;
+
+    const node: TreeNode = {
+      id: page.id,
+      name: page.title,
+      children: [],
+    };
+
+    if (page.icon) node.icon = page.icon;
+
+    if (page.childrenIds && page.childrenIds.length > 0) {
+      node.children = page.childrenIds.map(childId => buildTreeNode(childId)).filter(Boolean) as TreeNode[];
+    }
+
+    return node;
+  }
+
+  return pageOrder.map(id => buildTreeNode(id)).filter(Boolean) as TreeNode[];
+}
+
--- a/client/src/features/page/tree/styles/tree.module.css
+++ b/client/src/features/page/tree/styles/tree.module.css
@ -0,0 +1,99 @@
+.tree {
+     border-radius: 0px;
+}
+
+.treeContainer {
+    display: flex;
+    height: 60vh;
+    flex: 1;
+    min-width: 0;
+}
+
+.node {
+    position: relative;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+
+    &:hover {
+        background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+     }
+
+
+    .actions {
+        visibility: hidden;
+        position: absolute;
+        height: 100%;
+        top: 0;
+        right: 0;
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+        background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-6));
+    }
+
+      &:hover .actions {
+       visibility: visible;
+    }
+
+}
+
+.node:global(.willReceiveDrop) {
+    background-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-gray-7));
+}
+
+.node:global(.isSelected) {
+    border-radius: 0;
+
+    background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-6));
+/*
+    color: white;
+
+ // background-color: light-dark(
+  //  var(--mantine-color-gray-0),
+   // var(--mantine-color-dark-6)
+  //);
+  //background: rgb(20, 127, 250, 0.5);*/
+}
+
+.node:global(.isSelectedStart.isSelectedEnd) {
+    border-radius: 4px;
+}
+
+.row:focus .node:global(.isSelected) {
+    background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-6));
+}
+
+.row {
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.row:focus {
+    outline: none;
+}
+
+.row:focus .node {
+    /** come back to this **/
+    background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+}
+
+.icon {
+    margin: 0 rem(10px);
+    flex-shrink: 0;
+}
+
+.text {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: rem(14px);
+    font-weight: 500;
+}
+
+.arrow {
+    display: flex;
+}
--- a/client/src/features/page/tree/types.ts
+++ b/client/src/features/page/tree/types.ts
@ -0,0 +1,7 @@
+export type TreeNode = {
+    id: string
+    name: string
+    icon?: string
+    slug?: string
+    children: TreeNode[]
+}
--- a/client/src/features/page/types/page.types.ts
+++ b/client/src/features/page/types/page.types.ts
@ -0,0 +1,35 @@
+export interface IPage {
+  id: string;
+  title: string;
+  content: string;
+  html: string;
+  slug: string;
+  icon: string;
+  coverPhoto: string;
+  editor: string;
+  shareId: string;
+  parentPageId: string;
+  creatorId: string;
+  workspaceId: string;
+  children:[]
+  childrenIds:[]
+  isLocked: boolean;
+  status: string;
+  publishedAt: Date;
+  createdAt: Date;
+  updatedAt: Date;
+  deletedAt: Date;
+}
+
+export interface IMovePage {
+  id: string;
+  after?: string;
+  before?: string;
+  parentId?: string;
+}
+
+export interface IWorkspacePageOrder {
+  id: string;
+  childrenIds: string[];
+  workspaceId: string;
+}
--- a/client/src/features/search/search-spotlight.tsx
+++ b/client/src/features/search/search-spotlight.tsx
@ -0,0 +1,43 @@
+import { rem } from '@mantine/core';
+import { Spotlight, SpotlightActionData } from '@mantine/spotlight';
+import { IconHome, IconDashboard, IconSettings, IconSearch } from '@tabler/icons-react';
+
+const actions: SpotlightActionData[] = [
+  {
+    id: 'home',
+    label: 'Home',
+    description: 'Get to home page',
+    onClick: () => console.log('Home'),
+    leftSection: <IconHome style={{ width: rem(24), height: rem(24) }} stroke={1.5} />,
+  },
+  {
+    id: 'dashboard',
+    label: 'Dashboard',
+    description: 'Get full information about current system status',
+    onClick: () => console.log('Dashboard'),
+    leftSection: <IconDashboard style={{ width: rem(24), height: rem(24) }} stroke={1.5} />,
+  },
+  {
+    id: 'settings',
+    label: 'Settings',
+    description: 'Account settings and workspace management',
+    onClick: () => console.log('Settings'),
+    leftSection: <IconSettings style={{ width: rem(24), height: rem(24) }} stroke={1.5} />,
+  },
+];
+
+export function SearchSpotlight() {
+  return (
+    <>
+      <Spotlight
+        actions={actions}
+        nothingFound="Nothing found..."
+        highlightQuery
+        searchProps={{
+          leftSection: <IconSearch style={{ width: rem(20), height: rem(20) }} stroke={1.5} />,
+          placeholder: 'Search...',
+        }}
+      />
+    </>
+  );
+}
--- a/client/src/features/settings/account/settings/account-settings.tsx
+++ b/client/src/features/settings/account/settings/account-settings.tsx
@ -0,0 +1,21 @@
+import React from "react";
+import AccountNameForm from '@/features/settings/account/settings/components/account-name-form';
+import ChangeEmail from '@/features/settings/account/settings/components/change-email';
+import ChangePassword from '@/features/settings/account/settings/components/change-password';
+import { Divider } from '@mantine/core';
+
+export default function AccountSettings() {
+
+  return (
+    <>
+      <AccountNameForm />
+
+      <Divider my="lg" />
+
+      <ChangeEmail />
+
+      <Divider my="lg" />
+
+      <ChangePassword />
+    </>);
+}
--- a/client/src/features/settings/account/settings/components/account-name-form.tsx
+++ b/client/src/features/settings/account/settings/components/account-name-form.tsx
@ -0,0 +1,64 @@
+import { useAtom } from 'jotai';
+import { focusAtom } from 'jotai-optics';
+import * as z from 'zod';
+import { useForm, zodResolver } from '@mantine/form';
+import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
+import { updateUser } from '@/features/user/services/user-service';
+import { IUser } from '@/features/user/types/user.types';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { TextInput, Button } from '@mantine/core';
+
+const formSchema = z.object({
+  name: z.string().min(2).max(40).nonempty('Your name cannot be blank'),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+const userAtom = focusAtom(currentUserAtom, (optic) => optic.prop('user'));
+
+export default function AccountNameForm() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentUser] = useAtom(currentUserAtom);
+  const [, setUser] = useAtom(userAtom);
+
+  const form = useForm<FormValues>({
+    validate: zodResolver(formSchema),
+    initialValues: {
+      name: currentUser?.user?.name,
+    },
+  });
+
+  async function handleSubmit(data: Partial<IUser>) {
+    setIsLoading(true);
+
+    try {
+      const updatedUser = await updateUser(data);
+      setUser(updatedUser);
+      toast.success('Updated successfully');
+    } catch (err) {
+      console.log(err);
+      toast.error('Failed to update data.');
+    }
+
+    setIsLoading(false);
+  }
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <TextInput
+        id="name"
+        label="Name"
+        placeholder="Your name"
+        variant="filled"
+        {...form.getInputProps('name')}
+        rightSection={
+        <Button type="submit" disabled={isLoading} loading={isLoading}>
+          Save
+        </Button>
+      }
+      />
+    </form>
+  );
+}
+
--- a/client/src/features/settings/account/settings/components/change-email.tsx
+++ b/client/src/features/settings/account/settings/components/change-email.tsx
@ -0,0 +1,83 @@
+import { Modal, TextInput, Button, Text, Group, PasswordInput } from '@mantine/core';
+import * as z from 'zod';
+import { useState } from 'react';
+import { useAtom } from 'jotai';
+import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
+import { useDisclosure } from '@mantine/hooks';
+import * as React from 'react';
+import { useForm, zodResolver } from '@mantine/form';
+
+
+export default function ChangeEmail() {
+  const [currentUser] = useAtom(currentUserAtom);
+  const [opened, { open, close }] = useDisclosure(false);
+
+  return (
+    <Group justify="space-between" wrap="nowrap" gap="xl">
+      <div>
+        <Text size="md">Email</Text>
+        <Text size="sm" c="dimmed">
+          {currentUser.user.email}
+        </Text>
+      </div>
+
+      <Button onClick={open} variant="default">Change email</Button>
+
+      <Modal opened={opened} onClose={close} title="Change email" centered>
+        <Text mb="md">To change your email, you have to enter your password and new email.</Text>
+        <ChangePasswordForm />
+      </Modal>
+    </Group>
+  );
+}
+
+const formSchema = z.object({
+  email: z.string({ required_error: 'New email is required' }).email(),
+  password: z.string({ required_error: 'your current password is required' }).min(8),
+});
+
+type FormValues = z.infer<typeof formSchema>
+
+function ChangePasswordForm() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const form = useForm<FormValues>({
+    validate: zodResolver(formSchema),
+    initialValues: {
+      password: '',
+      email: '',
+    },
+  });
+
+  function handleSubmit(data: FormValues) {
+    setIsLoading(true);
+    console.log(data);
+  }
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+
+      <PasswordInput
+        label="Password"
+        placeholder="Enter your password"
+        variant="filled"
+        mb="md"
+        {...form.getInputProps('password')}
+      />
+
+      <TextInput
+        id="email"
+        label="Email"
+        description="Enter your new preferred email"
+        placeholder="New email"
+        variant="filled"
+        mb="md"
+        {...form.getInputProps('email')}
+      />
+
+      <Button type="submit" disabled={isLoading} loading={isLoading}>
+        Change email
+      </Button>
+    </form>
+  );
+}
--- a/client/src/features/settings/account/settings/components/change-password.tsx
+++ b/client/src/features/settings/account/settings/components/change-password.tsx
@ -0,0 +1,85 @@
+import { Button, Group, Text, Modal, PasswordInput } from '@mantine/core';
+import * as z from 'zod';
+import { useState } from 'react';
+import { useDisclosure } from '@mantine/hooks';
+import * as React from 'react';
+import { useForm, zodResolver } from '@mantine/form';
+
+
+export default function ChangePassword() {
+  const [opened, { open, close }] = useDisclosure(false);
+
+  return (
+    <Group justify="space-between" wrap="nowrap" gap="xl">
+      <div>
+        <Text size="md">Password</Text>
+        <Text size="sm" c="dimmed">
+          You can change your password here.
+        </Text>
+      </div>
+
+      <Button onClick={open} variant="default">Change password</Button>
+
+      <Modal opened={opened} onClose={close} title="Change password" centered>
+        <Text mb="md">Your password must be a minimum of 8 characters.</Text>
+        <ChangePasswordForm />
+
+      </Modal>
+    </Group>
+  );
+}
+
+const formSchema = z.object({
+  current: z.string({ required_error: 'your current password is required' }).min(1),
+  password: z.string({ required_error: 'New password is required' }).min(8),
+  confirm_password: z.string({ required_error: 'Password confirmation is required' }).min(8),
+}).refine(data => data.password === data.confirm_password, {
+  message: 'Your new password and confirmation does not match.',
+  path: ['confirm_password'],
+});
+
+type FormValues = z.infer<typeof formSchema>
+
+function ChangePasswordForm() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const form = useForm<FormValues>({
+    validate: zodResolver(formSchema),
+    initialValues: {
+      current: '',
+      password: '',
+      confirm_password: '',
+    },
+  });
+
+  function handleSubmit(data: FormValues) {
+    setIsLoading(true);
+    console.log(data);
+  }
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+
+      <PasswordInput
+        label="Current password"
+        name="current"
+        placeholder="Enter your password"
+        variant="filled"
+        mb="md"
+        {...form.getInputProps('password')}
+      />
+
+      <PasswordInput
+        label="New password"
+        placeholder="Enter your password"
+        variant="filled"
+        mb="md"
+        {...form.getInputProps('password')}
+      />
+
+      <Button type="submit" disabled={isLoading} loading={isLoading}>
+        Change password
+      </Button>
+    </form>
+  );
+}
--- a/client/src/features/settings/modal/atoms/settings-modal-atom.ts
+++ b/client/src/features/settings/modal/atoms/settings-modal-atom.ts
@ -0,0 +1,3 @@
+import { atom } from "jotai";
+
+export const settingsModalAtom = atom<boolean>(false);
--- a/client/src/features/settings/modal/modal.module.css
+++ b/client/src/features/settings/modal/modal.module.css
@ -0,0 +1,76 @@
+.sidebar {
+  max-height: rem(700px);
+  width: rem(180px);
+  padding: var(--mantine-spacing-sm);
+  display: flex;
+  flex-direction: column;
+  border-right: rem(1px) solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.sidebarFlex {
+  display: flex;
+}
+
+.sidebarMain {
+  flex: 1;
+}
+
+.sidebarRightSection {
+  flex: 1;
+  padding: rem(16px) rem(40px);
+}
+
+.sidebarItemHeader {
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.sidebarItem {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+  border-radius: var(--mantine-radius-sm);
+  font-weight: 500;
+  user-select: none;
+
+  @mixin hover {
+    background-color: light-dark(
+      var(--mantine-color-gray-1),
+      var(--mantine-color-dark-6)
+    );
+    color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+
+    .sidebarItemIcon {
+      color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+    }
+  }
+
+  &[data-active] {
+    &,
+    & :hover {
+      background-color: var(--mantine-color-blue-light);
+      color: var(--mantine-color-blue-light-color);
+
+      .sidebarItemIcon {
+        color: var(--mantine-color-blue-light-color);
+      }
+    }
+  }
+}
+
+.sidebarItemIcon {
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  margin-right: var(--mantine-spacing-sm);
+  width: rem(20px);
+  height: rem(20px);
+}
--- a/client/src/features/settings/modal/settings-modal.tsx
+++ b/client/src/features/settings/modal/settings-modal.tsx
@ -0,0 +1,30 @@
+import { Modal, Text } from '@mantine/core';
+import React from 'react';
+import SettingsSidebar from '@/features/settings/modal/settings-sidebar';
+import { useAtom } from 'jotai';
+import { settingsModalAtom } from '@/features/settings/modal/atoms/settings-modal-atom';
+
+export default function SettingsModal() {
+  const [isModalOpen, setModalOpen] = useAtom(settingsModalAtom);
+
+  return (
+    <>
+      <Modal.Root size={1000} opened={isModalOpen} onClose={() => setModalOpen(false)}>
+        <Modal.Overlay />
+        <Modal.Content>
+          <Modal.Header>
+            <Modal.Title>
+              <Text size="xl" fw={500}>Settings</Text>
+            </Modal.Title>
+            <Modal.CloseButton />
+          </Modal.Header>
+          <Modal.Body>
+
+            <SettingsSidebar />
+
+          </Modal.Body>
+        </Modal.Content>
+      </Modal.Root>
+    </>
+  );
+}
--- a/client/src/features/settings/modal/settings-sidebar.tsx
+++ b/client/src/features/settings/modal/settings-sidebar.tsx
@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import classes from '@/features/settings/modal/modal.module.css';
+import { IconBell, IconFingerprint, IconReceipt, IconSettingsCog, IconUser, IconUsers } from '@tabler/icons-react';
+import { Loader, ScrollArea, Text } from '@mantine/core';
+
+const AccountSettings = React.lazy(() => import('@/features/settings/account/settings/account-settings'));
+const WorkspaceSettings = React.lazy(() => import('@/features/settings/workspace/settings/workspace-settings'));
+const WorkspaceMembers = React.lazy(() => import('@/features/settings/workspace/members/workspace-members'));
+
+interface DataItem {
+  label: string;
+  icon: React.ElementType;
+}
+
+interface DataGroup {
+  heading: string;
+  items: DataItem[];
+}
+
+const groupedData: DataGroup[] = [
+  {
+    heading: 'Account',
+    items: [
+      { label: 'Account', icon: IconUser },
+      { label: 'Notifications', icon: IconBell },
+    ],
+  },
+  {
+    heading: 'Workspace',
+    items: [
+      { label: 'General', icon: IconSettingsCog },
+      { label: 'Members', icon: IconUsers },
+      { label: 'Security', icon: IconFingerprint },
+      { label: 'Billing', icon: IconReceipt },
+    ],
+  },
+];
+
+export default function SettingsSidebar() {
+  const [active, setActive] = useState('Account');
+
+  const menu = groupedData.map((group) => (
+    <div key={group.heading}>
+      <Text c="dimmed" className={classes.sidebarItemHeader}>{group.heading}</Text>
+      {group.items.map((item) => (
+        <div
+          className={classes.sidebarItem}
+          data-active={item.label === active || undefined}
+          key={item.label}
+          onClick={(event) => {
+            event.preventDefault();
+            setActive(item.label);
+          }}
+        >
+          <item.icon className={classes.sidebarItemIcon} stroke={1.5} />
+          <span>{item.label}</span>
+        </div>
+      ))}
+    </div>
+  ));
+
+  let ActiveComponent;
+
+  switch (active) {
+    case 'Account':
+      ActiveComponent = AccountSettings;
+      break;
+    case 'General':
+      ActiveComponent = WorkspaceSettings;
+      break;
+    case 'Members':
+      ActiveComponent = WorkspaceMembers;
+      break;
+    default:
+      ActiveComponent = null;
+  }
+
+  return (
+    <div className={classes.sidebarFlex}>
+      <nav className={classes.sidebar}>
+        <div className={classes.sidebarMain}>
+          {menu}
+        </div>
+      </nav>
+
+
+      <ScrollArea h="650" w="100%" scrollbarSize={4}>
+
+        <div className={classes.sidebarRightSection}>
+
+          <React.Suspense fallback={<Loader size="sm" color="gray" />}>
+            {ActiveComponent && <ActiveComponent />}
+          </React.Suspense>
+
+        </div>
+      </ScrollArea>
+
+
+    </div>
+  );
+}
--- a/client/src/features/settings/workspace/members/components/workspace-invite-form.tsx
+++ b/client/src/features/settings/workspace/members/components/workspace-invite-form.tsx
@ -0,0 +1,65 @@
+import {
+  Group,
+  Box,
+  Text,
+  Button,
+  TagsInput,
+  Space, Select,
+} from '@mantine/core';
+import WorkspaceInviteSection from '@/features/settings/workspace/members/components/workspace-invite-section';
+import React from 'react';
+
+enum UserRole {
+  GUEST = 'Guest',
+  MEMBER = 'Member',
+  OWNER = 'Owner',
+}
+
+
+export function WorkspaceInviteForm() {
+
+  function handleSubmit(data) {
+    console.log(data);
+  }
+
+  return (
+    <>
+      <Box maw="500" mx="auto">
+
+        <WorkspaceInviteSection />
+
+        <Space h="md" />
+
+        <TagsInput
+          description="Enter valid email addresses separated by comma or space"
+          label="Invite from email"
+          placeholder="enter valid emails addresses"
+          variant="filled"
+          splitChars={[',', ' ']}
+          maxDropdownHeight={200}
+          maxTags={50}
+        />
+
+        <Space h="md" />
+
+        <Select
+          description="Select role to assign to all invited members"
+          label="Select role"
+          placeholder="Pick a role"
+          variant="filled"
+          data={Object.values(UserRole)}
+          defaultValue={UserRole.MEMBER}
+          allowDeselect={false}
+          checkIconPosition="right"
+        />
+
+        <Group justify="center" mt="md">
+          <Button>Send invitation
+          </Button>
+        </Group>
+
+      </Box>
+    </>
+  );
+
+}
--- a/client/src/features/settings/workspace/members/components/workspace-invite-modal.tsx
+++ b/client/src/features/settings/workspace/members/components/workspace-invite-modal.tsx
@ -0,0 +1,28 @@
+import { IconUserPlus } from '@tabler/icons-react';
+import { WorkspaceInviteForm } from '@/features/settings/workspace/members/components/workspace-invite-form';
+import { Button, Divider, Modal, ScrollArea, Text } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+
+export default function WorkspaceInviteModal() {
+  const [opened, { open, close }] = useDisclosure(false);
+
+  return (
+    <>
+      <Button onClick={open} leftSection={<IconUserPlus size={18} />}>
+        Invite Members
+      </Button>
+
+      <Modal size="600" opened={opened} onClose={close} title="Invite new members" centered>
+
+        <Divider size="xs" mb="xs"/>
+
+        <ScrollArea h="80%">
+
+          <WorkspaceInviteForm />
+
+        </ScrollArea>
+      </Modal>
+
+    </>
+  );
+}
--- a/client/src/features/settings/workspace/members/components/workspace-invite-section.tsx
+++ b/client/src/features/settings/workspace/members/components/workspace-invite-section.tsx
@ -0,0 +1,41 @@
+import { useAtom } from 'jotai';
+import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
+import React, { useEffect, useState } from 'react';
+import { Button, CopyButton, Text, TextInput } from '@mantine/core';
+
+export default function WorkspaceInviteSection() {
+  const [currentUser] = useAtom(currentUserAtom);
+  const [inviteLink, setInviteLink] = useState<string>('');
+
+  useEffect(() => {
+    setInviteLink(`${window.location.origin}/invite/${currentUser.workspace.inviteCode}`);
+  }, [currentUser.workspace.inviteCode]);
+
+  return (
+    <>
+      <div>
+        <Text fw={500} mb="sm">Invite link</Text>
+        <Text c="dimmed" mb="sm">
+          Anyone with this link can join this workspace.
+        </Text>
+      </div>
+
+      <TextInput
+        variant="filled"
+        value={inviteLink}
+        readOnly
+        rightSection={
+          <CopyButton value={inviteLink}>
+            {({ copied, copy }) => (
+              <Button color={copied ? 'teal' : ''} onClick={copy}>
+                {copied ? 'Copied' : 'Copy'}
+              </Button>
+            )}
+          </CopyButton>
+        }
+      />
+
+
+    </>
+  );
+}
--- a/client/src/features/settings/workspace/members/components/workspace-members-table.tsx
+++ b/client/src/features/settings/workspace/members/components/workspace-members-table.tsx
@ -0,0 +1,68 @@
+import { useAtom } from 'jotai';
+import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
+import { useQuery } from '@tanstack/react-query';
+import { getWorkspaceUsers } from '@/features/workspace/services/workspace-service';
+import { Group, Table, Avatar, Text, Badge } from '@mantine/core';
+
+export default function WorkspaceMembersTable() {
+  const [currentUser] = useAtom(currentUserAtom);
+
+  const workspaceUsers = useQuery({
+    queryKey: ['workspaceUsers', currentUser.workspace.id],
+    queryFn: async () => {
+      return await getWorkspaceUsers();
+    },
+  });
+
+  const { data, isLoading, isSuccess } = workspaceUsers;
+
+  return (
+    <>
+      {isSuccess &&
+
+        <Table verticalSpacing="sm">
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Name</Table.Th>
+              <Table.Th>Status</Table.Th>
+              <Table.Th>Role</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+
+          <Table.Tbody>
+
+            {
+              data['users']?.map((user, index) => (
+                <Table.Tr key={index}>
+
+                  <Table.Td>
+                    <Group gap="sm">
+                      <Avatar size={40} src={user.name} radius={40} />
+                      <div>
+                        <Text fz="sm" fw={500}>
+                          {user.name}
+                        </Text>
+                        <Text fz="xs" c="dimmed">
+                          {user.email}
+                        </Text>
+                      </div>
+                    </Group>
+                  </Table.Td>
+
+                  <Table.Td>
+                    <Badge variant="light">
+                      Active
+                    </Badge>
+                  </Table.Td>
+
+                  <Table.Td>{user.workspaceRole}</Table.Td>
+                </Table.Tr>
+              ))
+            }
+
+          </Table.Tbody>
+        </Table>
+      }
+    </>
+  );
+}
--- a/client/src/features/settings/workspace/members/workspace-members.tsx
+++ b/client/src/features/settings/workspace/members/workspace-members.tsx
@ -0,0 +1,28 @@
+import WorkspaceInviteSection from '@/features/settings/workspace/members/components/workspace-invite-section';
+import React from 'react';
+import WorkspaceInviteModal from '@/features/settings/workspace/members/components/workspace-invite-modal';
+import { Divider, Group, Space, Text } from '@mantine/core';
+
+const WorkspaceMembersTable = React.lazy(() => import('@/features/settings/workspace/members/components/workspace-members-table'));
+
+export default function WorkspaceMembers() {
+  return (
+    <>
+      <WorkspaceInviteSection />
+
+      <Divider my="lg" />
+
+      <Group justify="space-between">
+        <Text fw={500}>Members</Text>
+
+        <WorkspaceInviteModal />
+
+      </Group>
+
+      <Space h="lg" />
+
+      <WorkspaceMembersTable />
+
+    </>
+  );
+}
--- a/client/src/features/settings/workspace/settings/components/workspace-name-form.tsx
+++ b/client/src/features/settings/workspace/settings/components/workspace-name-form.tsx
@ -0,0 +1,64 @@
+import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
+import { useAtom } from 'jotai';
+import * as z from 'zod';
+import toast from 'react-hot-toast';
+import { useState } from 'react';
+import { focusAtom } from 'jotai-optics';
+import { updateWorkspace } from '@/features/workspace/services/workspace-service';
+import { IWorkspace } from '@/features/workspace/types/workspace.types';
+import { TextInput, Button } from '@mantine/core';
+import { useForm, zodResolver } from '@mantine/form';
+
+const formSchema = z.object({
+  name: z.string().nonempty('Workspace name cannot be blank'),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+const workspaceAtom = focusAtom(currentUserAtom, (optic) => optic.prop('workspace'));
+
+export default function WorkspaceNameForm() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentUser] = useAtom(currentUserAtom);
+  const [, setWorkspace] = useAtom(workspaceAtom);
+
+  const form = useForm<FormValues>({
+    validate: zodResolver(formSchema),
+    initialValues: {
+      name: currentUser?.workspace?.name,
+    },
+  });
+
+  async function handleSubmit(data: Partial<IWorkspace>) {
+    setIsLoading(true);
+
+    try {
+      const updatedWorkspace = await updateWorkspace(data);
+      setWorkspace(updatedWorkspace);
+      toast.success('Updated successfully');
+    } catch (err) {
+      console.log(err);
+      toast.error('Failed to update data.');
+    }
+
+    setIsLoading(false);
+
+  }
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <TextInput
+        id="name"
+        label="Name"
+        placeholder="e.g ACME"
+        variant="filled"
+        {...form.getInputProps('name')}
+        rightSection={
+          <Button type="submit" disabled={isLoading} loading={isLoading}>
+            Save
+          </Button>
+        }
+      />
+    </form>
+  );
+}
--- a/client/src/features/settings/workspace/settings/workspace-settings.tsx
+++ b/client/src/features/settings/workspace/settings/workspace-settings.tsx
@ -0,0 +1,6 @@
+import WorkspaceNameForm from '@/features/settings/workspace/settings/components/workspace-name-form';
+
+export default function WorkspaceSettings() {
+
+  return (<WorkspaceNameForm />);
+}
--- a/client/src/features/user/atoms/current-user-atom.ts
+++ b/client/src/features/user/atoms/current-user-atom.ts
@ -0,0 +1,5 @@
+import { atomWithStorage } from "jotai/utils";
+
+import { ICurrentUserResponse } from "@/features/user/types/user.types";
+
+export const currentUserAtom = atomWithStorage<ICurrentUserResponse | null>("currentUser", null);
--- a/client/src/features/user/hooks/use-current-user.ts
+++ b/client/src/features/user/hooks/use-current-user.ts
@ -0,0 +1,12 @@
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { getUserInfo } from "@/features/user/services/user-service";
+import { ICurrentUserResponse } from "@/features/user/types/user.types";
+
+export default function useCurrentUser(): UseQueryResult<ICurrentUserResponse> {
+  return useQuery({
+    queryKey: ["currentUser"],
+    queryFn: async () => {
+      return await getUserInfo();
+    },
+  });
+}
--- a/client/src/features/user/services/user-service.ts
+++ b/client/src/features/user/services/user-service.ts
@ -0,0 +1,18 @@
+import api from '@/lib/api-client';
+import { ICurrentUserResponse, IUser } from '@/features/user/types/user.types';
+
+export async function getMe(): Promise<IUser> {
+  const req = await api.get<IUser>('/user/me');
+  return req.data as IUser;
+}
+
+export async function getUserInfo(): Promise<ICurrentUserResponse> {
+  const req = await api.get<ICurrentUserResponse>('/user/info');
+  return req.data as ICurrentUserResponse;
+}
+
+export async function updateUser(data: Partial<IUser>) {
+  const req = await api.post<IUser>('/user/update', data);
+
+  return req.data as IUser;
+}
--- a/client/src/features/user/types/user.types.ts
+++ b/client/src/features/user/types/user.types.ts
@ -0,0 +1,21 @@
+import { IWorkspace } from "@/features/workspace/types/workspace.types";
+
+export interface IUser {
+  id: string;
+  name: string;
+  email: string;
+  emailVerifiedAt: Date;
+  avatarUrl: string;
+  timezone: string;
+  settings: any;
+  lastLoginAt: string;
+  lastLoginIp: string;
+  createdAt: Date;
+  updatedAt: Date;
+  workspaceRole?: string;
+}
+
+export interface ICurrentUserResponse {
+  user: IUser,
+  workspace: IWorkspace
+}
--- a/client/src/features/user/user-provider.tsx
+++ b/client/src/features/user/user-provider.tsx
@ -0,0 +1,23 @@
+import { useAtom } from 'jotai';
+import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
+import React, { useEffect } from 'react';
+import useCurrentUser from '@/features/user/hooks/use-current-user';
+
+export function UserProvider({ children }: React.PropsWithChildren) {
+  const [, setCurrentUser] = useAtom(currentUserAtom);
+  const { data, isLoading, error } = useCurrentUser();
+
+  useEffect(() => {
+    if (data && data.user) {
+      setCurrentUser(data);
+    }
+  }, [data, isLoading, setCurrentUser]);
+
+  if (isLoading) return <></>;
+
+  if (error) {
+    return <>an error occurred</>;
+  }
+
+  return <>{children}</>;
+}
--- a/client/src/features/workspace/services/workspace-service.ts
+++ b/client/src/features/workspace/services/workspace-service.ts
@ -0,0 +1,19 @@
+import api from '@/lib/api-client';
+import { ICurrentUserResponse, IUser } from '@/features/user/types/user.types';
+import { IWorkspace } from '../types/workspace.types';
+
+export async function getWorkspace(): Promise<IWorkspace> {
+  const req = await api.get<IWorkspace>('/workspace');
+  return req.data as IWorkspace;
+}
+
+export async function getWorkspaceUsers(): Promise<IUser[]> {
+  const req = await api.get<IUser[]>('/workspace/members');
+  return req.data as IUser[];
+}
+
+export async function updateWorkspace(data: Partial<IWorkspace>) {
+  const req = await api.post<IWorkspace>('/workspace/update', data);
+
+  return req.data as IWorkspace;
+}
--- a/client/src/features/workspace/types/workspace.types.ts
+++ b/client/src/features/workspace/types/workspace.types.ts
@ -0,0 +1,15 @@
+export interface IWorkspace {
+  id: string;
+  name: string;
+  description: string;
+  logo: string;
+  hostname: string;
+  customDomain: string;
+  enableInvite: boolean;
+  inviteCode: string;
+  settings: any;
+  creatorId: string;
+  pageOrder?:[]
+  createdAt: Date;
+  updatedAt: Date;
+}
--- a/client/src/lib/api-client.ts
+++ b/client/src/lib/api-client.ts
@ -0,0 +1,53 @@
+import axios, { AxiosInstance } from "axios";
+import Cookies from "js-cookie";
+import Routes from "@/lib/routes";
+
+const api: AxiosInstance = axios.create({
+  baseURL: import.meta.env.VITE_BACKEND_API_URL
+});
+
+api.interceptors.request.use(config => {
+    const tokenData = Cookies.get("authTokens");
+    const accessToken = tokenData && JSON.parse(tokenData)?.accessToken;
+
+    if (accessToken) {
+      config.headers.Authorization = `Bearer ${accessToken}`;
+    }
+    return config;
+  },
+  error => {
+    return Promise.reject(error);
+  },
+);
+
+api.interceptors.response.use(
+  response => {
+    return response.data;
+  },
+  error => {
+    if (error.response) {
+      switch (error.response.status) {
+        case 401:
+          // Handle unauthorized error
+          if (window.location.pathname != Routes.AUTH.LOGIN){
+            window.location.href = Routes.AUTH.LOGIN;
+         }
+          break;
+        case 403:
+          // Handle forbidden error
+          break;
+        case 404:
+          // Handle not found error
+          break;
+        case 500:
+          // Handle internal server error
+          break;
+        default:
+          break;
+      }
+    }
+    return Promise.reject(error);
+  },
+);
+
+export default api;
--- a/client/src/lib/jotai-helper.ts
+++ b/client/src/lib/jotai-helper.ts
@ -0,0 +1,17 @@
+import { atom } from "jotai";
+
+export function atomWithWebStorage<Value>(key: string, initialValue: Value, storage = localStorage) {
+  const storedValue = localStorage.getItem(key);
+  const isString = typeof initialValue === "string";
+
+  const storageValue = storedValue ? isString ? storedValue : storedValue === "true" : undefined;
+
+  const baseAtom = atom(storageValue ?? initialValue);
+  return atom(
+    get => get(baseAtom) as Value,
+    (_get, set, nextValue: Value) => {
+      set(baseAtom, nextValue);
+      storage.setItem(key, nextValue!.toString());
+    },
+  );
+}
--- a/client/src/lib/routes.ts
+++ b/client/src/lib/routes.ts
@ -0,0 +1,9 @@
+const ROUTES = {
+  HOME: '/home',
+  AUTH: {
+    LOGIN: '/login',
+    SIGNUP: '/signup',
+  },
+};
+
+export default ROUTES;
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@ -0,0 +1,29 @@
+import '@mantine/core/styles.css';
+import '@mantine/spotlight/styles.css';
+import '@mantine/tiptap/styles.css';
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import { theme } from '@/theme';
+import { MantineProvider } from '@mantine/core';
+import { TanstackProvider } from '@/components/providers/tanstack-provider';
+import CustomToaster from '@/components/ui/custom-toaster';
+import { BrowserRouter } from 'react-router-dom';
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+
+root.render(
+  <BrowserRouter>
+    <MantineProvider theme={theme}>
+      <TanstackProvider>
+        <App />
+        <CustomToaster />
+      </TanstackProvider>
+    </MantineProvider>
+  </BrowserRouter>,
+);
+
+
+
+
--- a/client/src/pages/auth/layout.tsx
+++ b/client/src/pages/auth/layout.tsx
@ -0,0 +1,7 @@
+interface AuthLayoutProps {
+    children: React.ReactNode
+}
+
+export default function AuthLayout({ children }: AuthLayoutProps) {
+    return <div>{children}</div>
+}
--- a/client/src/pages/auth/login.tsx
+++ b/client/src/pages/auth/login.tsx
@ -0,0 +1,5 @@
+import { LoginForm } from '@/features/auth/components/login-form';
+
+export default function LoginPage() {
+  return <LoginForm />;
+}
--- a/client/src/pages/auth/signup.tsx
+++ b/client/src/pages/auth/signup.tsx
@ -0,0 +1,5 @@
+import { SignUpForm } from '@/features/auth/components/sign-up-form';
+
+export default function SignUpPage() {
+  return <SignUpForm />;
+}
--- a/client/src/pages/dashboard/home.tsx
+++ b/client/src/pages/dashboard/home.tsx
@ -0,0 +1,12 @@
+import { useAtom } from 'jotai';
+import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
+
+export default function Home() {
+  const [currentUser] = useAtom(currentUserAtom);
+
+  return (
+    <>
+      Hello {currentUser && currentUser.user.name}!
+    </>
+  );
+}
--- a/client/src/pages/page/page.tsx
+++ b/client/src/pages/page/page.tsx
@ -0,0 +1,8 @@
+import { useParams } from 'react-router-dom';
+import Editor from '@/features/editor/editor';
+
+export default function Page() {
+  const { pageId } = useParams();
+
+  return <Editor key={pageId} pageId={pageId}  />;
+}
--- a/client/src/pages/welcome.tsx
+++ b/client/src/pages/welcome.tsx
@ -0,0 +1,23 @@
+import { Title, Text } from '@mantine/core';
+import { ThemeToggle } from '@/components/theme-toggle';
+
+export function Welcome() {
+  return (
+    <>
+      <Title ta="center" mt={100}>
+        <Text
+          inherit
+          variant="gradient"
+          component="span"
+          gradient={{ from: 'pink', to: 'yellow' }}
+        >
+          Welcome
+        </Text>
+      </Title>
+      <Text ta="center" size="lg" maw={580} mx="auto" mt="xl">
+        Welcome to something new and interesting.
+      </Text>
+      <ThemeToggle />
+    </>
+  );
+}
--- a/client/src/theme.ts
+++ b/client/src/theme.ts
@ -0,0 +1,5 @@
+import { createTheme } from '@mantine/core';
+
+export const theme = createTheme({
+
+});
--- a/client/src/vite-env.d.ts
+++ b/client/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": false,
+    "strictNullChecks": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true,
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/client/tsconfig.node.json
+++ b/client/tsconfig.node.json
@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': '/src'
+    }
+  }
+})
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>