diff --git a/apps/client/src/components/aside/aside.tsx b/apps/client/src/components/layouts/dashboard/aside/aside.tsx
similarity index 100%
rename from apps/client/src/components/aside/aside.tsx
rename to apps/client/src/components/layouts/dashboard/aside/aside.tsx
diff --git a/apps/client/src/components/layouts/header.tsx b/apps/client/src/components/layouts/dashboard/header.tsx
similarity index 100%
rename from apps/client/src/components/layouts/header.tsx
rename to apps/client/src/components/layouts/dashboard/header.tsx
diff --git a/apps/client/src/components/layouts/shell.module.css b/apps/client/src/components/layouts/dashboard/shell.module.css
similarity index 100%
rename from apps/client/src/components/layouts/shell.module.css
rename to apps/client/src/components/layouts/dashboard/shell.module.css
diff --git a/apps/client/src/components/layouts/shell.tsx b/apps/client/src/components/layouts/dashboard/shell.tsx
similarity index 100%
rename from apps/client/src/components/layouts/shell.tsx
rename to apps/client/src/components/layouts/dashboard/shell.tsx
diff --git a/apps/client/src/components/emoji-picker.tsx b/apps/client/src/components/ui/emoji-picker.tsx
similarity index 92%
rename from apps/client/src/components/emoji-picker.tsx
rename to apps/client/src/components/ui/emoji-picker.tsx
index 5011bc3..8c81a87 100644
--- a/apps/client/src/components/emoji-picker.tsx
+++ b/apps/client/src/components/ui/emoji-picker.tsx
@@ -32,7 +32,7 @@ function EmojiPicker({ onEmojiSelect, icon, removeEmojiAction }: EmojiPickerInte
       position="bottom"
     >
       <Popover.Target>
-        <ActionIcon color="gray" variant="transparent" onClick={handlers.toggle}>
+        <ActionIcon c="gray" variant="transparent" onClick={handlers.toggle}>
           {icon}
         </ActionIcon>
       </Popover.Target>
@@ -42,7 +42,7 @@ function EmojiPicker({ onEmojiSelect, icon, removeEmojiAction }: EmojiPickerInte
                 skinTonePosition='search'
                 theme={colorScheme}
         />
-        <Button variant="default" color="gray"
+        <Button variant="default" c="gray"
                 size="xs"
                 style={{ position: 'absolute', zIndex: 2, bottom: '1rem', right: '1rem'}}
                 onClick={handleRemoveEmoji}>
diff --git a/apps/client/src/features/settings/account/settings/account-settings.tsx b/apps/client/src/features/settings/account/settings/account-settings.tsx
deleted file mode 100644
index fd133d1..0000000
--- a/apps/client/src/features/settings/account/settings/account-settings.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-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';
-import AccountAvatar from '@/features/settings/account/settings/components/account-avatar';
-
-export default function AccountSettings() {
-
-  return (
-    <>
-
-      <AccountAvatar />
-
-      <AccountNameForm />
-
-      <Divider my="lg" />
-
-      <ChangeEmail />
-
-      <Divider my="lg" />
-
-      <ChangePassword />
-    </>);
-}
diff --git a/apps/client/src/features/settings/account/settings/components/account-avatar.tsx b/apps/client/src/features/settings/account/settings/components/account-avatar.tsx
deleted file mode 100644
index 89e8087..0000000
--- a/apps/client/src/features/settings/account/settings/components/account-avatar.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { focusAtom } from 'jotai-optics';
-import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
-import { useState } from 'react';
-import { useAtom } from 'jotai';
-import { UserAvatar } from '@/components/ui/user-avatar';
-import { FileButton, Button, Text, Popover, Tooltip } from '@mantine/core';
-import { uploadAvatar } from '@/features/user/services/user-service';
-
-const userAtom = focusAtom(currentUserAtom, (optic) => optic.prop('user'));
-
-export default function AccountAvatar() {
-  const [isLoading, setIsLoading] = useState(false);
-  const [currentUser] = useAtom(currentUserAtom);
-  const [, setUser] = useAtom(userAtom);
-  const [file, setFile] = useState<File | null>(null);
-  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
-
-  const handleFileChange = async (selectedFile: File) => {
-    if (!selectedFile) {
-      return;
-    }
-
-    if (previewUrl) {
-      URL.revokeObjectURL(previewUrl);
-    }
-
-    setFile(selectedFile);
-    setPreviewUrl(URL.createObjectURL(selectedFile));
-
-    try {
-      setIsLoading(true);
-      const upload = await uploadAvatar(selectedFile);
-      console.log(upload);
-    } catch (err) {
-      console.log(err);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-
-  return (
-    <>
-      <FileButton onChange={handleFileChange} accept="image/png,image/jpeg">
-        {(props) => (
-          <Tooltip label="Change photo"
-                   position="bottom"
-          >
-            <UserAvatar
-              {...props}
-              component="button"
-              radius="xl"
-              size="60px"
-              avatarUrl={previewUrl || currentUser.user.avatarUrl}
-              name={currentUser.user.name}
-              style={{ cursor: 'pointer' }}
-            />
-          </Tooltip>
-        )}
-      </FileButton>
-
-    </>
-  );
-}
diff --git a/apps/client/src/features/settings/account/settings/components/account-name-form.tsx b/apps/client/src/features/settings/account/settings/components/account-name-form.tsx
deleted file mode 100644
index f9171d8..0000000
--- a/apps/client/src/features/settings/account/settings/components/account-name-form.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-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 { TextInput, Button } from '@mantine/core';
-import { notifications } from '@mantine/notifications';
-
-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);
-      notifications.show({
-        message: 'Updated successfully',
-      });
-    } catch (err) {
-      console.log(err);
-      notifications.show({
-        message: 'Failed to update data',
-        color: 'red',
-      });
-    }
-
-    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>
-  );
-}
-
diff --git a/apps/client/src/features/settings/account/settings/components/change-email.tsx b/apps/client/src/features/settings/account/settings/components/change-email.tsx
deleted file mode 100644
index e10d481..0000000
--- a/apps/client/src/features/settings/account/settings/components/change-email.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-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>
-  );
-}
diff --git a/apps/client/src/features/settings/account/settings/components/change-password.tsx b/apps/client/src/features/settings/account/settings/components/change-password.tsx
deleted file mode 100644
index 30534f6..0000000
--- a/apps/client/src/features/settings/account/settings/components/change-password.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-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 current password"
-        variant="filled"
-        mb="md"
-        {...form.getInputProps('current')}
-      />
-
-      <PasswordInput
-        label="New password"
-        placeholder="Enter your new password"
-        variant="filled"
-        mb="md"
-        {...form.getInputProps('password')}
-      />
-
-      <Button type="submit" disabled={isLoading} loading={isLoading}>
-        Change password
-      </Button>
-    </form>
-  );
-}
diff --git a/apps/client/src/features/settings/workspace/members/components/workspace-invite-section.tsx b/apps/client/src/features/settings/workspace/members/components/workspace-invite-section.tsx
deleted file mode 100644
index d357631..0000000
--- a/apps/client/src/features/settings/workspace/members/components/workspace-invite-section.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-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>
-        }
-      />
-
-
-    </>
-  );
-}
diff --git a/apps/client/src/features/settings/workspace/members/components/workspace-members-table.tsx b/apps/client/src/features/settings/workspace/members/components/workspace-members-table.tsx
deleted file mode 100644
index 3c38d8e..0000000
--- a/apps/client/src/features/settings/workspace/members/components/workspace-members-table.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-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>
-      }
-    </>
-  );
-}
diff --git a/apps/client/src/features/settings/workspace/members/workspace-members.tsx b/apps/client/src/features/settings/workspace/members/workspace-members.tsx
deleted file mode 100644
index 5be83fa..0000000
--- a/apps/client/src/features/settings/workspace/members/workspace-members.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-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 />
-
-    </>
-  );
-}
diff --git a/apps/client/src/features/settings/workspace/settings/components/workspace-name-form.tsx b/apps/client/src/features/settings/workspace/settings/components/workspace-name-form.tsx
deleted file mode 100644
index 7649d85..0000000
--- a/apps/client/src/features/settings/workspace/settings/components/workspace-name-form.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
-import { useAtom } from 'jotai';
-import * as z from 'zod';
-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';
-import { notifications } from '@mantine/notifications';
-
-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);
-      notifications.show({ message: 'Updated successfully' });
-    } catch (err) {
-      console.log(err);
-      notifications.show({
-        message: 'Failed to update data',
-        color: 'red',
-      });
-    }
-    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>
-  );
-}
diff --git a/apps/client/src/features/settings/workspace/settings/workspace-settings.tsx b/apps/client/src/features/settings/workspace/settings/workspace-settings.tsx
deleted file mode 100644
index 1c80cb1..0000000
--- a/apps/client/src/features/settings/workspace/settings/workspace-settings.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import WorkspaceNameForm from '@/features/settings/workspace/settings/components/workspace-name-form';
-
-export default function WorkspaceSettings() {
-
-  return (<WorkspaceNameForm />);
-}
diff --git a/apps/client/src/features/settings/workspace/members/components/workspace-invite-form.tsx b/apps/client/src/features/workspace/components/members/components/workspace-invite-form.tsx
similarity index 71%
rename from apps/client/src/features/settings/workspace/members/components/workspace-invite-form.tsx
rename to apps/client/src/features/workspace/components/members/components/workspace-invite-form.tsx
index 0080916..0e6e612 100644
--- a/apps/client/src/features/settings/workspace/members/components/workspace-invite-form.tsx
+++ b/apps/client/src/features/workspace/components/members/components/workspace-invite-form.tsx
@@ -1,23 +1,14 @@
-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';
+import { Group, Box, 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',
+  OWNER = "Owner",
+  ADMIN = "Admin",
+  MEMBER = "Member",
 }
 
-
 export function WorkspaceInviteForm() {
-
   function handleSubmit(data) {
     console.log(data);
   }
@@ -25,7 +16,6 @@ export function WorkspaceInviteForm() {
   return (
     <>
       <Box maw="500" mx="auto">
-
         <WorkspaceInviteSection />
 
         <Space h="md" />
@@ -35,7 +25,7 @@ export function WorkspaceInviteForm() {
           label="Invite from email"
           placeholder="enter valid emails addresses"
           variant="filled"
-          splitChars={[',', ' ']}
+          splitChars={[",", " "]}
           maxDropdownHeight={200}
           maxTags={50}
         />
@@ -54,12 +44,9 @@ export function WorkspaceInviteForm() {
         />
 
         <Group justify="center" mt="md">
-          <Button>Send invitation
-          </Button>
+          <Button>Send invitation</Button>
         </Group>
-
       </Box>
     </>
   );
-
 }
diff --git a/apps/client/src/features/settings/workspace/members/components/workspace-invite-modal.tsx b/apps/client/src/features/workspace/components/members/components/workspace-invite-modal.tsx
similarity index 71%
rename from apps/client/src/features/settings/workspace/members/components/workspace-invite-modal.tsx
rename to apps/client/src/features/workspace/components/members/components/workspace-invite-modal.tsx
index 623be3a..20f4cf6 100644
--- a/apps/client/src/features/settings/workspace/members/components/workspace-invite-modal.tsx
+++ b/apps/client/src/features/workspace/components/members/components/workspace-invite-modal.tsx
@@ -1,6 +1,5 @@
-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 { Button, Divider, Modal, ScrollArea } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 
 export default function WorkspaceInviteModal() {
@@ -8,8 +7,8 @@ export default function WorkspaceInviteModal() {
 
   return (
     <>
-      <Button onClick={open} leftSection={<IconUserPlus size={18} />}>
-        Invite Members
+      <Button onClick={open}>
+        Invite members
       </Button>
 
       <Modal size="600" opened={opened} onClose={close} title="Invite new members" centered>
diff --git a/apps/client/src/features/workspace/components/members/components/workspace-invite-section.tsx b/apps/client/src/features/workspace/components/members/components/workspace-invite-section.tsx
new file mode 100644
index 0000000..bc694a5
--- /dev/null
+++ b/apps/client/src/features/workspace/components/members/components/workspace-invite-section.tsx
@@ -0,0 +1,41 @@
+import { useAtom } from "jotai";
+import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
+import { useEffect, useState } from "react";
+import { Button, CopyButton, Group, 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>
+
+      <Group>
+        <div style={{ flex: 1 }}>
+          <TextInput variant="filled" value={inviteLink} readOnly />
+        </div>
+        <CopyButton value={inviteLink}>
+          {({ copied, copy }) => (
+            <Button color={copied ? "teal" : ""} onClick={copy}>
+              {copied ? "Copied" : "Copy"}
+            </Button>
+          )}
+        </CopyButton>
+      </Group>
+    </>
+  );
+}
diff --git a/apps/client/src/features/workspace/components/members/components/workspace-members-table.tsx b/apps/client/src/features/workspace/components/members/components/workspace-members-table.tsx
new file mode 100644
index 0000000..d85da11
--- /dev/null
+++ b/apps/client/src/features/workspace/components/members/components/workspace-members-table.tsx
@@ -0,0 +1,50 @@
+import { Group, Table, Avatar, Text, Badge } from "@mantine/core";
+import { useWorkspaceMembersQuery } from "@/features/workspace/queries/workspace-query";
+import { UserAvatar } from "@/components/ui/user-avatar.tsx";
+import React from "react";
+
+export default function WorkspaceMembersTable() {
+  const { data, isLoading } = useWorkspaceMembersQuery();
+
+  return (
+    <>
+      {data && (
+        <Table verticalSpacing="sm">
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>User</Table.Th>
+              <Table.Th>Status</Table.Th>
+              <Table.Th>Role</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+
+          <Table.Tbody>
+            {data?.items.map((user, index) => (
+              <Table.Tr key={index}>
+                <Table.Td>
+                  <Group gap="sm">
+                    <UserAvatar avatarUrl={user.avatarUrl} name={user.name} />
+                    <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.role}</Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.Tbody>
+        </Table>
+      )}
+    </>
+  );
+}
diff --git a/apps/client/src/features/workspace/components/settings/components/workspace-name-form.tsx b/apps/client/src/features/workspace/components/settings/components/workspace-name-form.tsx
new file mode 100644
index 0000000..ce06b4a
--- /dev/null
+++ b/apps/client/src/features/workspace/components/settings/components/workspace-name-form.tsx
@@ -0,0 +1,65 @@
+import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
+import { useAtom } from "jotai";
+import * as z from "zod";
+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";
+import { notifications } from "@mantine/notifications";
+
+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);
+      notifications.show({ message: "Updated successfully" });
+    } catch (err) {
+      console.log(err);
+      notifications.show({
+        message: "Failed to update data",
+        color: "red",
+      });
+    }
+    setIsLoading(false);
+  }
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <TextInput
+        id="name"
+        label="Name"
+        placeholder="e.g ACME"
+        variant="filled"
+        {...form.getInputProps("name")}
+      />
+      <Button mt="sm" type="submit" disabled={isLoading} loading={isLoading}>
+        Save
+      </Button>
+    </form>
+  );
+}