diff --git a/client/src/components/fakestackoverflow.tsx b/client/src/components/fakestackoverflow.tsx
index 8701b23..efde8aa 100644
--- a/client/src/components/fakestackoverflow.tsx
+++ b/client/src/components/fakestackoverflow.tsx
@@ -17,6 +17,7 @@ import UsersListPage from './main/usersListPage';
 import ProfileSettings from './profileSettings';
 import AllGamesPage from './main/games/allGamesPage';
 import GamePage from './main/games/gamePage';
+import AllCommunitiesPage from './main/communities/allCommunitiesPage';
 
 const ProtectedRoute = ({
   user,
@@ -66,6 +67,7 @@ const FakeStackOverflow = ({ socket }: { socket: FakeSOSocket | null }) => {
             <Route path='/user/:username' element={<ProfileSettings />} />
             <Route path='/games' element={<AllGamesPage />} />
             <Route path='/games/:gameID' element={<GamePage />} />
+            <Route path='/communities' element={<AllCommunitiesPage />} />
           </Route>
         }
       </Routes>
diff --git a/client/src/components/main/communities/addCommunityForm/index.css b/client/src/components/main/communities/addCommunityForm/index.css
new file mode 100644
index 0000000..5b80768
--- /dev/null
+++ b/client/src/components/main/communities/addCommunityForm/index.css
@@ -0,0 +1,79 @@
+.add-community-form {
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    padding: 20px;
+    border-radius: 12px;
+    max-width: 400px;
+    margin: 20px auto;
+  }
+  
+  .add-community-form h2 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    text-align: center;
+  }
+  
+  .add-community-form label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: bold;
+  }
+  
+  .add-community-form input,
+  .add-community-form textarea {
+    width: 100%;
+    padding: 8px 10px;
+    margin-bottom: 1rem;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    font-size: 1rem;
+  }
+  
+  .add-community-form textarea {
+    resize: vertical;
+    min-height: 80px;
+  }
+  
+  .add-community-form .form-actions {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+  }
+  
+  .add-community-form button {
+    flex: 1;
+    padding: 10px;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    cursor: pointer;
+  }
+  
+  .add-community-form .visibility-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  
+  .add-community-form .visibility-checkbox label {
+    margin-bottom: 0;
+    font-weight: normal;
+    display: flex;
+    align-items: center;
+  }
+  
+  
+  .add-community-form button.submit {
+    background-color: #4caf50 !important;
+    color: white !important;
+  }
+  
+  .add-community-form button.cancel {
+    background-color: #f44336 !important;
+    color: white !important;
+  }
+  
+  .add-community-form button:hover {
+    opacity: 0.9;
+  }
+  
\ No newline at end of file
diff --git a/client/src/components/main/communities/addCommunityForm/index.tsx b/client/src/components/main/communities/addCommunityForm/index.tsx
new file mode 100644
index 0000000..a40311d
--- /dev/null
+++ b/client/src/components/main/communities/addCommunityForm/index.tsx
@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import './index.css';
+
+interface AddCommunityFormProps {
+  onSubmit: (data: { name: string; description: string; visibility: 'public' | 'private' }) => void;
+  onCancel: () => void;
+  errorMessage: string;
+  setErrorMessage: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const AddCommunityForm: React.FC<AddCommunityFormProps> = ({
+  onSubmit,
+  onCancel,
+  errorMessage,
+  setErrorMessage,
+}) => {
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    visibility: 'public' as 'public' | 'private',
+  });
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData(prev => ({
+      ...prev,
+      visibility: e.target.checked ? 'private' : 'public',
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (errorMessage) {
+      setErrorMessage('');
+    }
+
+    onSubmit(formData);
+    setFormData({ name: '', description: '', visibility: 'public' });
+  };
+  return (
+    <form onSubmit={handleSubmit} className='add-community-form'>
+      <input
+        type='text'
+        name='name'
+        placeholder='Community Name'
+        value={formData.name}
+        onChange={handleChange}
+        required
+      />
+      {errorMessage && <div style={{ color: 'red', marginTop: '5px' }}>{errorMessage}</div>}
+      <textarea
+        name='description'
+        placeholder='Description'
+        value={formData.description}
+        onChange={handleChange}
+      />
+      <div className='visibility-checkbox'>
+        <label>
+          <input
+            type='checkbox'
+            checked={formData.visibility === 'private'}
+            onChange={handleCheckboxChange}
+          />
+          Private Community
+        </label>
+      </div>
+
+      <div className='form-actions'>
+        <button type='submit' className='submit'>
+          Create
+        </button>
+        <button type='button' className='cancel' onClick={onCancel}>
+          Cancel
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default AddCommunityForm;
diff --git a/client/src/components/main/communities/allCommunitiesPage/index.css b/client/src/components/main/communities/allCommunitiesPage/index.css
new file mode 100644
index 0000000..e3e0f42
--- /dev/null
+++ b/client/src/components/main/communities/allCommunitiesPage/index.css
@@ -0,0 +1,53 @@
+/* styling for all communities page */
+
+.all-communities-container {
+  padding: 20px;
+}
+
+.space_between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.right_padding {
+  padding-right: 20px;
+}
+
+.bold_title {
+  font-weight: bold;
+  font-size: 24px;
+}
+
+.create-community-button {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+}
+
+.create-community-button button {
+  background-color: #4caf50; 
+  color: white;
+  padding: 10px 16px;
+  font-size: 16px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.create-community-button button:hover {
+  background-color: #45a049;
+}
+
+
+.community-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
+}
+
+.community-card {
+  border: 1px solid #ccc;  /* Add a border for debugging */
+  padding: 20px;
+  background-color: white;
+}
diff --git a/client/src/components/main/communities/allCommunitiesPage/index.tsx b/client/src/components/main/communities/allCommunitiesPage/index.tsx
new file mode 100644
index 0000000..634477b
--- /dev/null
+++ b/client/src/components/main/communities/allCommunitiesPage/index.tsx
@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import './index.css';
+import useAllCommunitiesPage from '../../../../hooks/communities/useAllCommunitiesPage';
+import AddCommunityForm from '../addCommunityForm';
+import useUserContext from '../../../../hooks/useUserContext';
+import CommunityView from '../communityView';
+
+/**
+ * Represents the CommunityPage component which displays a list of communities
+ * and provides functionality to handle community clicks and ask a new question.
+ */
+const AllCommunitiesPage = () => {
+  const {
+    communities,
+    handleCommunityClick,
+    handleJoin,
+    handleAddCommunity,
+    errorMessage,
+    setErrorMessage,
+  } = useAllCommunitiesPage();
+  const [showForm, setShowForm] = useState(false);
+  const { user } = useUserContext();
+
+  return (
+    <div className='all-communities-container' style={{ position: 'relative' }}>
+      <div className='space_between right_padding'>
+        <div className='bold_title'>All Communities</div>
+      </div>
+      {/* button for form */}
+      <div className='create-community-button'>
+        {/* <button onClick={() => setShowForm(prev => !prev)}>
+        {showForm ? 'Cancel' : 'Create Community'}
+      </button> */}
+        <button onClick={() => setShowForm(true)}>Create Community</button>
+      </div>
+      {/* render form */}
+      {showForm && (
+        <AddCommunityForm
+          onSubmit={data => {
+            handleAddCommunity({
+              name: data.name,
+              description: data.description,
+              visibility: 'public',
+              members: [],
+              moderators: [],
+              owner: user?.username || 'unknown',
+              memberRequests: [],
+              questions: [],
+            });
+            setShowForm(false);
+          }}
+          onCancel={() => setShowForm(false)}
+          errorMessage={errorMessage}
+          setErrorMessage={setErrorMessage}
+        />
+      )}
+      {/* community grid */}
+      <div className='community-grid'>
+        {communities.length === 0 ? (
+          <p>No communities available.</p>
+        ) : (
+          communities.map(community => (
+            <CommunityView
+              key={community._id.toString()}
+              c={community}
+              clickCommunity={handleCommunityClick}
+              handleJoin={handleJoin}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AllCommunitiesPage;
diff --git a/client/src/components/main/communities/communityView/index.css b/client/src/components/main/communities/communityView/index.css
new file mode 100644
index 0000000..e8ef4f5
--- /dev/null
+++ b/client/src/components/main/communities/communityView/index.css
@@ -0,0 +1,51 @@
+/* styling for community view page */
+
+.community-card {
+    background: #fff;
+    padding: 20px;
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    cursor: pointer;
+  }
+  
+  .community-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+  
+  .community-name {
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+  
+  .community-description {
+    font-size: 14px;
+    color: #555;
+    margin-bottom: 15px;
+  }
+  
+  .community-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .community-meta button {
+    padding: 6px 12px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  
+  .community-meta button:hover {
+    background-color: #0056b3;
+  }
+  
+  .community-meta .icon {
+    font-size: 18px;
+  }
+  
\ No newline at end of file
diff --git a/client/src/components/main/communities/communityView/index.tsx b/client/src/components/main/communities/communityView/index.tsx
new file mode 100644
index 0000000..a1988fa
--- /dev/null
+++ b/client/src/components/main/communities/communityView/index.tsx
@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react';
+import { getAllCommunities } from '../../../../services/communityService';
+import { Community } from '../../../../types/types';
+import './index.css';
+
+/**
+ * Props for Community View component
+ *
+ * c - the community object
+ * clickCommunity - Function to handle the community click
+ * handleJoin -
+ */
+interface CommunityProps {
+  c: Community;
+  clickCommunity: (communityName: string) => void;
+  handleJoin: (communityName: string) => void;
+}
+
+const CommunityView = ({ c, clickCommunity, handleJoin }: CommunityProps) => (
+  <div className='community-card' onClick={() => clickCommunity(c.name)}>
+    <div className='community-header'>
+      <div className='community-name'>{c.name}</div>
+    </div>
+    <div className='community-description'>{c.description}</div>
+    <div className='community-footer'>
+      <button
+        onClick={e => {
+          e.stopPropagation();
+          handleJoin(c.name);
+        }}>
+        Join
+      </button>
+    </div>
+  </div>
+);
+
+export default CommunityView;
diff --git a/client/src/components/main/sideBarNav/index.tsx b/client/src/components/main/sideBarNav/index.tsx
index 4a5d1af..ac3d1cc 100644
--- a/client/src/components/main/sideBarNav/index.tsx
+++ b/client/src/components/main/sideBarNav/index.tsx
@@ -65,6 +65,12 @@ const SideBarNav = () => {
         className={({ isActive }) => `menu_button ${isActive ? 'menu_selected' : ''}`}>
         Games
       </NavLink>
+      <NavLink
+        to='/communities'
+        id='menu_community'
+        className={({ isActive }) => `menu_button ${isActive ? 'menu_selected' : ''}`}>
+        Communities
+      </NavLink>
     </div>
   );
 };
diff --git a/client/src/hooks/communities/useAllCommunitiesPage.ts b/client/src/hooks/communities/useAllCommunitiesPage.ts
new file mode 100644
index 0000000..2631fb4
--- /dev/null
+++ b/client/src/hooks/communities/useAllCommunitiesPage.ts
@@ -0,0 +1,150 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import useUserContext from '../useUserContext';
+import { getAllCommunities, addMember, addCommunity } from '../../services/communityService';
+import { PopulatedDatabaseCommunity, Community } from '../../types/types';
+
+/**
+ * Custom hook for managing the All Communities page state and interactions.
+ *
+ * @returns communities - An array of all communities
+ * @returns handleCommunityClick - Navigates to a specific community's page
+ * @returns handleJoin - Joins a community (if user is logged in)
+ */
+const useAllCommunitiesPage = () => {
+  const navigate = useNavigate();
+  const { user, socket } = useUserContext();
+
+  const [communities, setCommunities] = useState<PopulatedDatabaseCommunity[]>([]);
+  const [errorMessage, setErrorMessage] = useState<string>('');
+
+  useEffect(() => {
+    const fetchCommunities = async () => {
+      try {
+        const allCommunities = await getAllCommunities();
+        console.log('fetched communities', allCommunities);
+        setCommunities(allCommunities);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Error fetching communities:', error);
+      }
+    };
+
+    fetchCommunities();
+
+    const handleCommunityUpdate = (data: {
+      community: PopulatedDatabaseCommunity;
+      type: string;
+    }) => {
+      const { community, type } = data;
+
+      setCommunities(prev => {
+        const exists = prev.some(c => c.name === community.name);
+        if (!exists && type === 'created') {
+          return [community, ...prev];
+        }
+        if (exists) {
+          return prev.map(c => (c.name === community.name ? community : c));
+        }
+        return prev;
+      });
+    };
+
+    socket?.on('communityUpdate', handleCommunityUpdate);
+
+    return () => {
+      socket?.off('communityUpdate', handleCommunityUpdate);
+    };
+  }, [socket]);
+
+  /**
+   * Navigates to the community's detail page.
+   *
+   * @param communityId - The ID of the community to view.
+   */
+  const handleCommunityClick = (communityId: string) => {
+    navigate(`/communities/${communityId}`);
+  };
+
+  /**
+   * Joins a community if the user is logged in.
+   *
+   * @param communityId - The ID of the community to join.
+   */
+  const handleJoin = async (communityId: string) => {
+    try {
+      if (!user?.username) {
+        // eslint-disable-next-line no-console
+        console.warn('User not logged in. Redirecting to login page...');
+        navigate('/login');
+        return;
+      }
+
+      await addMember(communityId, user.username);
+
+      setCommunities(prev =>
+        prev.map(c =>
+          c.name === communityId ? { ...c, members: [...c.members, user.username] } : c,
+        ),
+      );
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Error joining community:', error);
+    }
+  };
+
+  /**
+   * Creates a new community.
+   *
+   * @param communityData - The new community data (should include at least name, visibility, and optionally description).
+   */
+  const handleAddCommunity = async (communityData: Community) => {
+    try {
+      if (!user?.username) {
+        // eslint-disable-next-line no-console
+        console.warn('User not logged in. Redirecting to login page...');
+        navigate('/login');
+        return;
+      }
+
+      if (!communityData.owner) {
+        communityData.owner = user.username;
+      }
+
+      const duplicateName = communities.some(c => c.name === communityData.name);
+      if (duplicateName) {
+        setErrorMessage('Community name already exists');
+        return;
+      }
+
+      setErrorMessage('');
+
+      const newCommunity = await addCommunity(communityData);
+
+      setCommunities(prev => {
+        const communityExists = prev.some(c => c._id === newCommunity._id);
+        if (communityExists) {
+          console.log('Community already exists');
+          return prev;
+        }
+        return [newCommunity, ...prev];
+      });
+
+      // setCommunities(prev => [newCommunity, ...prev]);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Error adding community:', error);
+    }
+  };
+
+  return {
+    communities,
+    handleCommunityClick,
+    handleJoin,
+    handleAddCommunity,
+    errorMessage,
+    setErrorMessage,
+  };
+};
+
+export default useAllCommunitiesPage;
diff --git a/client/src/index.tsx b/client/src/index.tsx
index 1872729..2cdbfeb 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { ChakraProvider, ChakraProviderProps } from '@chakra-ui/react';
 import './index.css';
 import { io } from 'socket.io-client';
 import { useEffect, useState } from 'react';
@@ -30,9 +31,11 @@ const App = () => {
   }, [socket, serverURL]);
 
   return (
-    <Router>
-      <FakeStackOverflow socket={socket} />
-    </Router>
+    <ChakraProvider {...({} as ChakraProviderProps)}>
+      <Router>
+        <FakeStackOverflow socket={socket} />
+      </Router>
+    </ChakraProvider>
   );
 };
 
diff --git a/client/src/services/communityService.ts b/client/src/services/communityService.ts
new file mode 100644
index 0000000..edf7e60
--- /dev/null
+++ b/client/src/services/communityService.ts
@@ -0,0 +1,259 @@
+import { Community, PopulatedDatabaseCommunity } from '../types/types';
+import api from './config';
+
+const COMMUNITY_API_URL = `${process.env.REACT_APP_SERVER_URL}/community`;
+
+/**
+ * Creates a new community.
+ *
+ * @param community - The community object to create.
+ * @throws Error if there is an issue creating the community.
+ * @returns The created community.
+ */
+const addCommunity = async (community: Community): Promise<PopulatedDatabaseCommunity> => {
+  const res = await api.post(`${COMMUNITY_API_URL}/addCommunity`, community);
+  if (res.status !== 200) {
+    throw new Error('Error while creating a new community');
+  }
+  return res.data;
+};
+
+/**
+ * Function to get a community by its ID.
+ *
+ * @param communityId - The ID of the community to retrieve.
+ * @throws Error if there is an issue fetching the community by ID.
+ * @returns The community.
+ */
+const getCommunityById = async (communityId: string): Promise<PopulatedDatabaseCommunity> => {
+  const res = await api.get(`${COMMUNITY_API_URL}/getCommunity/${communityId}`);
+  if (res.status !== 200) {
+    throw new Error(`Error when fetching community by ID: ${communityId}`);
+  }
+  return res.data;
+};
+
+/**
+ * Retrieves all communities.
+ *
+ * @throws Error if there is an issue fetching communities.
+ * @returns An array of communities.
+ */
+const getAllCommunities = async (): Promise<PopulatedDatabaseCommunity[]> => {
+  const res = await api.get(`${COMMUNITY_API_URL}/getAllCommunities`);
+  if (res.status !== 200) {
+    throw new Error('Error when fetching communities');
+  }
+  return res.data;
+};
+
+/**
+ * Function to get all communities a user is a member of.
+ *
+ * @param userId - The ID of the user.
+ * @throws Error if there is an issue fetching the communities.
+ * @returns An array of communities the user is a member of.
+ */
+const getCommunitiesByMember = async (userId: string): Promise<PopulatedDatabaseCommunity[]> => {
+  const res = await api.get(`${COMMUNITY_API_URL}/getCommunitiesByMember/${userId}`);
+  if (res.status !== 200) {
+    throw new Error(`Error fetching communities for user ID: ${userId}`);
+  }
+  return res.data;
+};
+
+/**
+ * Function to add a new member to a community.
+ *
+ * @param communityId - The ID of the community.
+ * @param userId - The ID of the user to add.
+ * @throws Error if there is an issue adding the member.
+ * @returns The updated community.
+ */
+const addMember = async (
+  communityId: string,
+  userId: string,
+): Promise<PopulatedDatabaseCommunity> => {
+  const res = await api.post(`${COMMUNITY_API_URL}/addMember/${communityId}`, { userId });
+  if (res.status !== 200) {
+    throw new Error('Error when adding member to community');
+  }
+  return res.data;
+};
+
+/**
+ * Adds a moderator to a community.
+ *
+ * @param communityId - The ID of the community.
+ * @param userId - The user ID to add as a moderator.
+ * @throws Error if there is an issue adding the moderator.
+ * @returns The updated community.
+ */
+const addModerator = async (
+  communityId: string,
+  userId: string,
+): Promise<PopulatedDatabaseCommunity> => {
+  const res = await api.post(`${COMMUNITY_API_URL}/addModerator/${communityId}`, { userId });
+  if (res.status !== 200) {
+    throw new Error('Error while adding moderator to community');
+  }
+  return res.data;
+};
+
+/**
+ * Adds a member request to a private community.
+ *
+ * @param communityId - The ID of the community.
+ * @param userId - The user ID requesting membership.
+ * @throws Error if there is an issue with the member request.
+ * @returns The updated community.
+ */
+const addMemberRequest = async (
+  communityId: string,
+  userId: string,
+): Promise<PopulatedDatabaseCommunity> => {
+  const res = await api.post(`${COMMUNITY_API_URL}/addMemberRequest/${communityId}`, { userId });
+  if (res.status !== 200) {
+    throw new Error('Error while adding member request');
+  }
+  return res.data;
+};
+
+/**
+ * Approves a member request for a community.
+ *
+ * @param communityId - The ID of the community.
+ * @param userId - The user ID whose request is approved.
+ * @throws Error if there is an issue approving the request.
+ * @returns The updated community.
+ */
+const approveMemberRequest = async (
+  communityId: string,
+  userId: string,
+): Promise<PopulatedDatabaseCommunity> => {
+  const res = await api.post(`${COMMUNITY_API_URL}/approveMemberRequest/${communityId}`, {
+    userId,
+  });
+  if (res.status !== 200) {
+    throw new Error('Error while approving member request');
+  }
+  return res.data;
+};
+
+/**
+ * Rejects a member request for a community.
+ *
+ * @param communityId - The ID of the community.
+ * @param userId - The user ID whose request is rejected.
+ * @throws Error if there is an issue rejecting the request.
+ * @returns The updated community.
+ */
+const rejectMemberRequest = async (
+  communityId: string,
+  userId: string,
+): Promise<PopulatedDatabaseCommunity> => {
+  const res = await api.delete(`${COMMUNITY_API_URL}/rejectMemberRequest/${communityId}`, {
+    data: { userId },
+  });
+  if (res.status !== 200) {
+    throw new Error('Error while rejecting member request');
+  }
+  return res.data;
+};
+
+/**
+ * Function to remove a member from a community.
+ *
+ * @param communityId - The ID of the community.
+ * @param userId - The ID of the user to remove.
+ * @throws Error if there is an issue removing the member.
+ * @returns The updated community.
+ */
+const removeMember = async (
+  communityId: string,
+  userId: string,
+): Promise<PopulatedDatabaseCommunity> => {
+  const res = await api.delete(`${COMMUNITY_API_URL}/removeMember/${communityId}`, {
+    data: { userId },
+  });
+  if (res.status !== 200) {
+    throw new Error('Error when removing member from community');
+  }
+  return res.data;
+};
+
+/**
+ * Removes a moderator from a community.
+ *
+ * @param communityId - The ID of the community.
+ * @param userId - The user ID to remove from moderators.
+ * @throws Error if there is an issue removing the moderator.
+ * @returns The updated community.
+ */
+const removeModerator = async (
+  communityId: string,
+  userId: string,
+): Promise<PopulatedDatabaseCommunity> => {
+  const res = await api.delete(`${COMMUNITY_API_URL}/removeModerator/${communityId}`, {
+    data: { userId },
+  });
+  if (res.status !== 200) {
+    throw new Error('Error while removing moderator from community');
+  }
+  return res.data;
+};
+
+/**
+ * Function to update the community name.
+ *
+ * @param communityId - The ID of the community.
+ * @param name - The new name for the community.
+ * @throws Error if there is an issue updating the name.
+ * @returns The updated community.
+ */
+const updateCommunityName = async (
+  communityId: string,
+  name: string,
+): Promise<PopulatedDatabaseCommunity> => {
+  const res = await api.patch(`${COMMUNITY_API_URL}/updateName/${communityId}`, { name });
+  if (res.status !== 200) {
+    throw new Error('Error when updating community name');
+  }
+  return res.data;
+};
+
+/**
+ * Function to update the community description.
+ *
+ * @param communityId - The ID of the community.
+ * @param description - The new description for the community.
+ * @throws Error if there is an issue updating the description.
+ */
+const updateCommunityDescription = async (
+  communityId: string,
+  description: string,
+): Promise<PopulatedDatabaseCommunity> => {
+  const res = await api.patch(`${COMMUNITY_API_URL}/updateDescription/${communityId}`, {
+    description,
+  });
+  if (res.status !== 200) {
+    throw new Error('Error when updating community description');
+  }
+  return res.data;
+};
+
+export {
+  addCommunity,
+  getCommunityById,
+  getAllCommunities,
+  getCommunitiesByMember,
+  addMember,
+  addModerator,
+  addMemberRequest,
+  approveMemberRequest,
+  rejectMemberRequest,
+  removeMember,
+  removeModerator,
+  updateCommunityName,
+  updateCommunityDescription,
+};
diff --git a/client/tsconfig.json b/client/tsconfig.json
index fe2b43e..d060935 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -9,12 +9,15 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["./src"]
 }
diff --git a/package-lock.json b/package-lock.json
index 99585ab..3d407db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,15 @@
         "client",
         "server",
         "shared"
-      ]
+      ],
+      "dependencies": {
+        "@chakra-ui/react": "^3.14.2",
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
+        "framer-motion": "^12.6.2",
+        "next-themes": "^0.4.6",
+        "react-icons": "^5.5.0"
+      }
     },
     "client": {
       "name": "@fake-stack-overflow/client",
@@ -131,6 +139,72 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@ark-ui/react": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/@ark-ui/react/-/react-5.3.1.tgz",
+      "integrity": "sha512-kayabYf6TFFCcwiE0IxBcz4M7rLu1l8bVu9Xk41XYNCn98NW8bh9BMkasFxcaJshtiKCOXs5S1CaSwfxeyRsJg==",
+      "license": "MIT",
+      "dependencies": {
+        "@internationalized/date": "3.7.0",
+        "@zag-js/accordion": "1.6.0",
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/auto-resize": "1.6.0",
+        "@zag-js/avatar": "1.6.0",
+        "@zag-js/carousel": "1.6.0",
+        "@zag-js/checkbox": "1.6.0",
+        "@zag-js/clipboard": "1.6.0",
+        "@zag-js/collapsible": "1.6.0",
+        "@zag-js/collection": "1.6.0",
+        "@zag-js/color-picker": "1.6.0",
+        "@zag-js/color-utils": "1.6.0",
+        "@zag-js/combobox": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/date-picker": "1.6.0",
+        "@zag-js/date-utils": "1.6.0",
+        "@zag-js/dialog": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/editable": "1.6.0",
+        "@zag-js/file-upload": "1.6.0",
+        "@zag-js/file-utils": "1.6.0",
+        "@zag-js/focus-trap": "1.6.0",
+        "@zag-js/highlight-word": "1.6.0",
+        "@zag-js/hover-card": "1.6.0",
+        "@zag-js/i18n-utils": "1.6.0",
+        "@zag-js/menu": "1.6.0",
+        "@zag-js/number-input": "1.6.0",
+        "@zag-js/pagination": "1.6.0",
+        "@zag-js/pin-input": "1.6.0",
+        "@zag-js/popover": "1.6.0",
+        "@zag-js/presence": "1.6.0",
+        "@zag-js/progress": "1.6.0",
+        "@zag-js/qr-code": "1.6.0",
+        "@zag-js/radio-group": "1.6.0",
+        "@zag-js/rating-group": "1.6.0",
+        "@zag-js/react": "1.6.0",
+        "@zag-js/select": "1.6.0",
+        "@zag-js/signature-pad": "1.6.0",
+        "@zag-js/slider": "1.6.0",
+        "@zag-js/splitter": "1.6.0",
+        "@zag-js/steps": "1.6.0",
+        "@zag-js/switch": "1.6.0",
+        "@zag-js/tabs": "1.6.0",
+        "@zag-js/tags-input": "1.6.0",
+        "@zag-js/time-picker": "1.6.0",
+        "@zag-js/timer": "1.6.0",
+        "@zag-js/toast": "1.6.0",
+        "@zag-js/toggle": "1.6.0",
+        "@zag-js/toggle-group": "1.6.0",
+        "@zag-js/tooltip": "1.6.0",
+        "@zag-js/tour": "1.6.0",
+        "@zag-js/tree-view": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      },
+      "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.26.2",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
@@ -2153,11 +2227,32 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "license": "MIT"
     },
+    "node_modules/@chakra-ui/react": {
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/react/-/react-3.14.2.tgz",
+      "integrity": "sha512-lCEEx7F2pfq0SoxuWA/t8uJwfCrEnzP0N0auuPH0mv+dZZ9Z2rArpgttg0qWCU5FpT5CN5cqx9scnPV/PnQt5A==",
+      "license": "MIT",
+      "dependencies": {
+        "@ark-ui/react": "5.3.1",
+        "@emotion/is-prop-valid": "1.3.1",
+        "@emotion/serialize": "1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "1.2.0",
+        "@emotion/utils": "1.4.2",
+        "@pandacss/is-valid-prop": "0.41.0",
+        "csstype": "3.1.3",
+        "fast-safe-stringify": "2.1.1"
+      },
+      "peerDependencies": {
+        "@emotion/react": ">=11",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
       "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/trace-mapping": "0.3.9"
@@ -2170,7 +2265,7 @@
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
       "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
@@ -2498,6 +2593,167 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "license": "MIT"
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
+      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.3.3",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
+      "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz",
+      "integrity": "sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
+      "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/cache": "^11.14.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.10.0",
+        "@emotion/utils": "^1.4.2",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.0.tgz",
+      "integrity": "sha512-XxfOnXFffatap2IyCeJyNov3kiDQWoR08gPUQxvbL7fxKryGBKUZUkG6Hz48DZwVrJSVh9sJboyV1Ds4OW6SgA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/is-prop-valid": "^1.3.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
+      "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
+      "license": "MIT"
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz",
@@ -2583,6 +2839,31 @@
       "resolved": "shared",
       "link": true
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
+      "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.13",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
+      "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
+      "license": "MIT"
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -2839,6 +3120,24 @@
         "node": ">=18"
       }
     },
+    "node_modules/@internationalized/date": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.7.0.tgz",
+      "integrity": "sha512-VJ5WS3fcVx0bejE/YHfbDKR/yawZgKqn/if+oEeLqNwBtPzVB06olkfcnojTmEMX+gTpH+FlQ69SHNitJ8/erQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/number": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.6.0.tgz",
+      "integrity": "sha512-PtrRcJVy7nw++wn4W2OuePQQfTqDzfusSuY1QTtui4wa7r+rGVtR75pO8CyKvHvzyQYi3Q1uO5sY0AsB4e65Bw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -3315,7 +3614,7 @@
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
       "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@sinclair/typebox": "^0.27.8"
@@ -3469,7 +3768,7 @@
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.3.tgz",
       "integrity": "sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jest/schemas": "^29.6.3",
@@ -3487,7 +3786,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -3503,7 +3802,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.1.0",
@@ -3655,6 +3954,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@pandacss/is-valid-prop": {
+      "version": "0.41.0",
+      "resolved": "https://registry.npmjs.org/@pandacss/is-valid-prop/-/is-valid-prop-0.41.0.tgz",
+      "integrity": "sha512-BE6h6CsJk14ugIRrsazJtN3fcg+KDFRat1Bs93YFKH6jd4DOb1yUyVvC70jKqPVvg70zEcV8acZ7VdcU5TLu+w=="
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -3837,7 +4141,7 @@
       "version": "0.27.8",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
       "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@sindresorhus/merge-streams": {
@@ -4391,6 +4695,21 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@swc/helpers/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -4413,28 +4732,28 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
       "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@tsconfig/node12": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
       "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@tsconfig/node14": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
       "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@tsconfig/node16": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/babel__core": {
@@ -4889,7 +5208,7 @@
       "version": "17.0.33",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
       "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/yargs-parser": "*"
@@ -5286,169 +5605,959 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@ungap/structured-clone": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
-      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
-      "license": "ISC"
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
+      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
+      "license": "ISC"
+    },
+    "node_modules/@webassemblyjs/ast": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
+      "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/helper-numbers": "1.13.2",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
+      "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-api-error": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
+      "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-buffer": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
+      "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-numbers": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
+      "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/floating-point-hex-parser": "1.13.2",
+        "@webassemblyjs/helper-api-error": "1.13.2",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
+      "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-wasm-section": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
+      "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/wasm-gen": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/ieee754": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
+      "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
+      "license": "MIT",
+      "dependencies": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "node_modules/@webassemblyjs/leb128": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
+      "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/utf8": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
+      "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/wasm-edit": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
+      "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/helper-wasm-section": "1.14.1",
+        "@webassemblyjs/wasm-gen": "1.14.1",
+        "@webassemblyjs/wasm-opt": "1.14.1",
+        "@webassemblyjs/wasm-parser": "1.14.1",
+        "@webassemblyjs/wast-printer": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-gen": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
+      "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/ieee754": "1.13.2",
+        "@webassemblyjs/leb128": "1.13.2",
+        "@webassemblyjs/utf8": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-opt": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
+      "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/wasm-gen": "1.14.1",
+        "@webassemblyjs/wasm-parser": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-parser": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
+      "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-api-error": "1.13.2",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/ieee754": "1.13.2",
+        "@webassemblyjs/leb128": "1.13.2",
+        "@webassemblyjs/utf8": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/wast-printer": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
+      "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@zag-js/accordion": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/accordion/-/accordion-1.6.0.tgz",
+      "integrity": "sha512-WJLkCnty+ZdVHI0HTnpaVpAZq+2FQ5xcxfTWaaviX7nYuor1IyiE26Cd2+xTDiY4UUXw9Up5b9T/+qS/THRhGA==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/anatomy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/anatomy/-/anatomy-1.6.0.tgz",
+      "integrity": "sha512-ZsYKPtKgQEIc7VcyTBMDGLnEFJztAvkcUKb/+yDxWZWpfk+eh63QUpDUfQqcwdfP1iB3mrDmw/0ZVxjweMh9Lg==",
+      "license": "MIT"
+    },
+    "node_modules/@zag-js/aria-hidden": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/aria-hidden/-/aria-hidden-1.6.0.tgz",
+      "integrity": "sha512-x8vsYqJzH2zkY7qqBMCCBgfeYqMZQgLDWaObNQfw8BGQLlm3bBEPj0Va0U+JSYciXQ+X5CNjMrrBk0vTBANR9Q==",
+      "license": "MIT"
+    },
+    "node_modules/@zag-js/auto-resize": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/auto-resize/-/auto-resize-1.6.0.tgz",
+      "integrity": "sha512-WUDBWgYkCAtWagNejAPILV1t2UqXrauohjQdT0vTIOgbb/MzGU8y+KcNvFYQEVuRq+xjJxpDW1QFcRM6WwTjng==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/dom-query": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/avatar": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/avatar/-/avatar-1.6.0.tgz",
+      "integrity": "sha512-NOZWGif0qtBoRft87TSSJcq3KW7hoJjwRgLL68THFrmmf2wDyEGhRM/Rfpwv3I6C9B3bMt0PBEeasKqPK2WefA==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/carousel": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/carousel/-/carousel-1.6.0.tgz",
+      "integrity": "sha512-DZryIh1gtrex3rAfKfroq6eAzAuR2mQcq1hNTITIHvIYKyQ8GtwtTq2cd0xx4ERWKnCgNOrDb/rHgRZz4CHffA==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/scroll-snap": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/checkbox": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/checkbox/-/checkbox-1.6.0.tgz",
+      "integrity": "sha512-dbN0M+ZHuszSw2JbUUj9rJdZX2DGyxhkQ2e/KclgYeJK15TC2vDwdMkdCkJJWxH6kchZHRMk4lodnvd/rAfSLA==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/focus-visible": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/clipboard": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/clipboard/-/clipboard-1.6.0.tgz",
+      "integrity": "sha512-4B8O/MmsNBMZyFPFwQQ3eHKtcZx2bn6CXRB4PX5euPvdOPkkdhyQEloNfJR4aTGWohd3TCRfOH1eM4jWfQkFGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/collapsible": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/collapsible/-/collapsible-1.6.0.tgz",
+      "integrity": "sha512-zp9haZOtPm4ik569qfTWtm5FJfLF8X++MwffMOmHSAAQPe28NOsxQzmC9+gmMh/0Fp9zfchHyH5aMwTWNgwXMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/collection": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/collection/-/collection-1.6.0.tgz",
+      "integrity": "sha512-hEQawRhXtbvjj1YCni2Rn9xz3WGnEd2xvv9OEBUtB5J7iZpStNLNd9yChyvbJdb/kg2iudvQmYC1Pu1YQXMjGA==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/color-picker": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/color-picker/-/color-picker-1.6.0.tgz",
+      "integrity": "sha512-4t1XiVVaIMjw5m1I5ZuZv6XIv9QmAYzGFUaiPLXhbY506ufa4TmGMeRkAJUfuPgeN9+4xH8yWoxAzPFgkLzm1w==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/color-utils": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dismissable": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/popper": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/color-utils": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/color-utils/-/color-utils-1.6.0.tgz",
+      "integrity": "sha512-Duqv039YX6om0cxWo/0WAUlxgBMK6TII8ViltgbUHlVknvIF4TiETdxxHCNo6qV7rSqxjs1sYN7tsfk5qUx/Tg==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/combobox": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/combobox/-/combobox-1.6.0.tgz",
+      "integrity": "sha512-IDCtyrjIldyBsr/TgDbvy+B+m0QscEHbQKYmDzlE27CYK/cPuatAaADg09+owkcQw2hhZoNQ75U0dEMZmkkHqA==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/aria-hidden": "1.6.0",
+        "@zag-js/collection": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dismissable": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/popper": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/core": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/core/-/core-1.6.0.tgz",
+      "integrity": "sha512-DAALW0TZ9cFGq9AmH75cxhwR6+bwVCQaB56yEDoPwwqyxYZZlaYSo4AV3zCYEDt855VNfB1WXWSLHyZ4sqiS0w==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/date-picker": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/date-picker/-/date-picker-1.6.0.tgz",
+      "integrity": "sha512-YeY3FAITZxe4ZchdzFLLl8AiU43B6ObmORqDKGdhP22+Jt1vHzysA3zhBjfzvyna5PksM70rTf58bi7wUMOi0w==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/date-utils": "1.6.0",
+        "@zag-js/dismissable": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/live-region": "1.6.0",
+        "@zag-js/popper": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      },
+      "peerDependencies": {
+        "@internationalized/date": ">=3.0.0"
+      }
+    },
+    "node_modules/@zag-js/date-utils": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/date-utils/-/date-utils-1.6.0.tgz",
+      "integrity": "sha512-LN5t+7FYxgXylUirRxLr2kvgYd6DJUtX5j89FpdTdf5VjqDCie7j1JG87o8OtICq7gu7iumAmVsGHOkrOSNJUg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@internationalized/date": ">=3.0.0"
+      }
+    },
+    "node_modules/@zag-js/dialog": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/dialog/-/dialog-1.6.0.tgz",
+      "integrity": "sha512-rurjndH+S7UIpJ4aQ1H1vpwgg2/euU95VbPKDQOG/SayCGT7jLxFZ0uVSOQyzAAzXV83mKHTya5DnV1uAZQ16Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/aria-hidden": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dismissable": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/focus-trap": "1.6.0",
+        "@zag-js/remove-scroll": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/dismissable": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/dismissable/-/dismissable-1.6.0.tgz",
+      "integrity": "sha512-Q+ICGTSq5MKXbBn8xIxF3aMRZNreVtpnjFZJUR/uFOfuL70SNSAmYwaLUHj1lErBsBEefELClsvIJQg0Cd721Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/interact-outside": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/dom-query": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/dom-query/-/dom-query-1.6.0.tgz",
+      "integrity": "sha512-6YiIr/jQV0k+9muCTI00qMAOe2l8Jt7FMJ+J+NCZjVHS2P1OsFLslmicqxr5K4wOBBu0AFxaNMAQ7NsotlyH9w==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/types": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/editable": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/editable/-/editable-1.6.0.tgz",
+      "integrity": "sha512-G0ZCsZiiScBRmz8ejvqYnbDo+1R9uXssn74hLlLD4OEQdBg+xbJTPNltJBsMt8BnpmTKaiDmFHjX7BjCVRcypQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/interact-outside": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/element-rect": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/element-rect/-/element-rect-1.6.0.tgz",
+      "integrity": "sha512-Gr3vQpJv8wZhlf7sH9wWOsQfupt8/Ae6dX5b/5CH7Oq8g7AXiVrI7IKKLY610mDN6LUHrk0iR5AXNnacu3WDYw==",
+      "license": "MIT"
+    },
+    "node_modules/@zag-js/element-size": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/element-size/-/element-size-1.6.0.tgz",
+      "integrity": "sha512-A/1CCFxXyT8lK0uPBX98eBcMAyxOf8PrJLURv0E0/vhnvzF84tSjoQczWZSBCgpnCy0su7nwfebeHlg7oqKLbg==",
+      "license": "MIT"
+    },
+    "node_modules/@zag-js/file-upload": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/file-upload/-/file-upload-1.6.0.tgz",
+      "integrity": "sha512-DcYlRSv+r22X0ap48t9bWrmGCL23UZCtMjPqesgGMwuX+WfbgKxgYv92WuCwW0LyXI7gO02KV77eMm5N4zkvPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/file-utils": "1.6.0",
+        "@zag-js/i18n-utils": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/file-utils": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/file-utils/-/file-utils-1.6.0.tgz",
+      "integrity": "sha512-JZ0nsj+YJT1fawz4A6GBkktHNX/3ou+Aybu6iqGaIPnRrvEv+/Tek+cH7evodmjUfjMBIErvYdBNDcp64qyC2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/i18n-utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/focus-trap": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/focus-trap/-/focus-trap-1.6.0.tgz",
+      "integrity": "sha512-p7zibXT+Ws2egT8vzllQD4XBQ+LhvAlKT53fFU9UWLUV9BZvTiHpm1I18R8RlfVpzcUtnq6uFU7Sg1Myr9J8yA==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/dom-query": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/focus-visible": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/focus-visible/-/focus-visible-1.6.0.tgz",
+      "integrity": "sha512-PLnzY5muAfp6qhdHJd5zMBoA4H/w1luRK1lQYxjyFCwCYtwCCbaVT3+2XHKs/Q/cMQypNKyBDyOf6ILplz63pA==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/dom-query": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/highlight-word": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/highlight-word/-/highlight-word-1.6.0.tgz",
+      "integrity": "sha512-RLNBAMAkBWsjRmMruF+BsRKEIPe4I8t2CYxgKi6QdrU42g6y43UthOpp5mIgfs0R27VCk+zdu//nc6Ee5lVVUA==",
+      "license": "MIT"
+    },
+    "node_modules/@zag-js/hover-card": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/hover-card/-/hover-card-1.6.0.tgz",
+      "integrity": "sha512-AchVWYIcV8yZO7aKB3rdTbvYxCALDIwlywhoql08pn7huYa0sHdG1KeQeGalteXjx1uiH8E89VwnmjvGuy5uWg==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dismissable": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/popper": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/i18n-utils": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/i18n-utils/-/i18n-utils-1.6.0.tgz",
+      "integrity": "sha512-77z5Y/7E2WraUHp5cyW64pvRnu57Zm9Xti/OcYVwbH9mYK9YMgLWqosh2GZcKpFyReVmoMH0y8iH9lpMLsWPGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/dom-query": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/interact-outside": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/interact-outside/-/interact-outside-1.6.0.tgz",
+      "integrity": "sha512-4aX2M0g8TPxuxlFh3h4KwNPBDilNTtefHCp2uGhmR6ao6aQeGBVvtW4ThzaBZW6mktyIradStTXU2KfWbzP9hg==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/live-region": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/live-region/-/live-region-1.6.0.tgz",
+      "integrity": "sha512-4l9ybfmuCfNMScmCMdjT9Q/GAkwjhVx7ndEhdl2Nb3YJIMhiTw/PTnStBKpXAyCxlV1g65PXrR02lXABUV1onA==",
+      "license": "MIT"
+    },
+    "node_modules/@zag-js/menu": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/menu/-/menu-1.6.0.tgz",
+      "integrity": "sha512-9ghxRJN0FkiYPbli2hSagkIdQLXI/IyykJxuZume42rbjzGQO3yQ9mzPEET+zLGZFQxbjvzRBLAVdbuB9I0hog==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dismissable": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/popper": "1.6.0",
+        "@zag-js/rect-utils": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/number-input": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/number-input/-/number-input-1.6.0.tgz",
+      "integrity": "sha512-CeMl/yvxEyReEhhRTApvbg4XUZjwcU7oKHyyEmZMzsd/CSYwQur3SGKtJpc5BVkbBDEIJX9dk2OFwhb1zsNg/A==",
+      "license": "MIT",
+      "dependencies": {
+        "@internationalized/number": "3.6.0",
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/pagination": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/pagination/-/pagination-1.6.0.tgz",
+      "integrity": "sha512-ZE6TprBChhP3AxOqixMr/1plu2VEZMZXsjul04hTI4ag6Iws5QLiQFB9370RPC0eoWuM+gw7zQMA2i3LJnAJvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/pin-input": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/pin-input/-/pin-input-1.6.0.tgz",
+      "integrity": "sha512-KKaDaEfZVVO/OpegG31KKjglNWfdT8cgplulfkxqmsp6SiQS/opl0TZtYuvRjMp5vtrJH4dHre9Xi4Q9u6ysOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/popover": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/popover/-/popover-1.6.0.tgz",
+      "integrity": "sha512-j+G/8e4g3DMgKQoW3whoTmf1QvVmh9XDYU3D+1e71C/czPNjz8FmkfEOzq0p6SiNXSyBqDlYAbKw6Eg3x7hGQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/aria-hidden": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dismissable": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/focus-trap": "1.6.0",
+        "@zag-js/popper": "1.6.0",
+        "@zag-js/remove-scroll": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/popper": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/popper/-/popper-1.6.0.tgz",
+      "integrity": "sha512-Gql3j5Czs6W0nqSromAN7Re1hEBETTnGHcD1xbcTdSKXXCt7BxeDXrXruBBbplNCzJSWEObLFnZB729TkX041Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "1.6.13",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/presence": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/presence/-/presence-1.6.0.tgz",
+      "integrity": "sha512-D9vTfpfbe7oUaKlWE70KyMX2/nGSVjxuGgoiNCATFDc+SfvycyrEeBQJM0q/K7Qz3rsqJGoxAQ2ggEIiF+dDGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/types": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/progress": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/progress/-/progress-1.6.0.tgz",
+      "integrity": "sha512-Fpmr433pqwXdlPyDMK64MT81s7k7TdZJeMuMBATJ5MjYXAtqBR0TJFl215z8ptFu67iXQbfln9/p0xFrMSDqTg==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/qr-code": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/qr-code/-/qr-code-1.6.0.tgz",
+      "integrity": "sha512-jMJP8sty6GTPCDc1BFwHJYeIo97Vfk0hEcMMZBJTCKrRINt9Fl++NddeCautjIeDYq4bXwX6iyKN3iwOKuKQGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0",
+        "proxy-memoize": "3.0.1",
+        "uqr": "0.1.2"
+      }
+    },
+    "node_modules/@zag-js/radio-group": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/radio-group/-/radio-group-1.6.0.tgz",
+      "integrity": "sha512-qURcr879H7RE8KbKjUBjsUrUIAlaIi5n78bAZq8nnsM/UuF/K4yc0Sa0mrF/q2nF/NKP4yjjWN2lxAUdLun1bQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/element-rect": "1.6.0",
+        "@zag-js/focus-visible": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/rating-group": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/rating-group/-/rating-group-1.6.0.tgz",
+      "integrity": "sha512-sGfTtty/drByelgr47irJNNQe94p81AciMJTf/D0XwA2V01SZHEQI1K9tT84EZJss7h2jZc0C1xUOGTECWZ48A==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/react": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/react/-/react-1.6.0.tgz",
+      "integrity": "sha512-A8J2sXg2x5wwMx0rapHBrbKyswIq6YifTyX5563ZTbdNUPmfTvs2PBQ0oFrVkZpAXNWgQHzM/Z5pL7gEAwF0ig==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/core": "1.6.0",
+        "@zag-js/store": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      },
+      "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+      }
+    },
+    "node_modules/@zag-js/rect-utils": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/rect-utils/-/rect-utils-1.6.0.tgz",
+      "integrity": "sha512-+mUUjQfAXuQtjvkKsgWkzpHsW3VUbNwXdfUkByFhyt1tngm8jBB0rYN3ttADc7I/VBIfF1nLSP8DPOJEkQ8ntg==",
+      "license": "MIT"
+    },
+    "node_modules/@zag-js/remove-scroll": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/remove-scroll/-/remove-scroll-1.6.0.tgz",
+      "integrity": "sha512-wHu6qZwUpD7rIKFmbJuzpBpeyZeAp8TddSUH6Ap3ck5YwQkZHF8EN2wu8KTEG2dh+6klecIn472eUFHZBLPtZw==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/dom-query": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/scroll-snap": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/scroll-snap/-/scroll-snap-1.6.0.tgz",
+      "integrity": "sha512-RhIEX9t5Ve3bLtmG3n3DlYPyGL9eD9Ix90E+W/3TMhtg73XuRIuNfAUmxpsakDkSWSM+Li/UxEo3D4MXHgqxPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/dom-query": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/select": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/select/-/select-1.6.0.tgz",
+      "integrity": "sha512-0SytjP7twmF9196ya8XN49gcZ46UMRKmFV2/9j3zL6/eLCxuLdbYh7AnaTwlH6uBr8bOkztrr7jHDjq7jYk9bQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/collection": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dismissable": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/popper": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
+    },
+    "node_modules/@zag-js/signature-pad": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/signature-pad/-/signature-pad-1.6.0.tgz",
+      "integrity": "sha512-MpU7m1rTgwJtTyNUyPAC3L5cyT22eU+AKJUjU55ag5qageTXunWoMew8T0B4XgyEWk5TVrl1zkduYOEOZ1WI4A==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0",
+        "perfect-freehand": "^1.2.2"
+      }
     },
-    "node_modules/@webassemblyjs/ast": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
-      "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
+    "node_modules/@zag-js/slider": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/slider/-/slider-1.6.0.tgz",
+      "integrity": "sha512-DjPwdn9uCMxVBaKzFlC2ozPHbyTUI1npJnin3g98CTG9dfOPxcydhD9YbltrKvuU8YuBtct3lVqsjNA/69kirg==",
       "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/helper-numbers": "1.13.2",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/element-size": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
       }
     },
-    "node_modules/@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
-      "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
-      "license": "MIT"
+    "node_modules/@zag-js/splitter": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/splitter/-/splitter-1.6.0.tgz",
+      "integrity": "sha512-o6iVlHR4PkUhIUjRt87CrcLUj8uhy3gU93tIuXeA1o+YyZ6eB99Dfr12wFZXBPqfAR61NGgYFiE2dYgQB/huTg==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
     },
-    "node_modules/@webassemblyjs/helper-api-error": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
-      "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
-      "license": "MIT"
+    "node_modules/@zag-js/steps": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/steps/-/steps-1.6.0.tgz",
+      "integrity": "sha512-MRXTE5zdjIjRdRDDDRA5+HAbx/M6PYU/rg5O0EZnFXgcp+OdNkmDcEi6cZq0Vwppphgad6s/TC71Gj+6tPwG6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
     },
-    "node_modules/@webassemblyjs/helper-buffer": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
-      "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
-      "license": "MIT"
+    "node_modules/@zag-js/store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/store/-/store-1.6.0.tgz",
+      "integrity": "sha512-/uDu4MRwZsrA+yrqDa55tTmPu50FZevromWyvZdCpov0thQqNhIGyOJZIVNzPIfyWo6VaRqspWP3dgXEKqBxAw==",
+      "license": "MIT",
+      "dependencies": {
+        "proxy-compare": "3.0.1"
+      }
     },
-    "node_modules/@webassemblyjs/helper-numbers": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
-      "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
+    "node_modules/@zag-js/switch": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/switch/-/switch-1.6.0.tgz",
+      "integrity": "sha512-4XcGOKKCG4xZb/dkNRQ1D83ryVldpdHfSX5pTQvYPlqxU8T2g0q4OvI50T+vmrcOk/2IAvwuAF2PJT5GAe+mEQ==",
       "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/floating-point-hex-parser": "1.13.2",
-        "@webassemblyjs/helper-api-error": "1.13.2",
-        "@xtuc/long": "4.2.2"
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/focus-visible": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
       }
     },
-    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
-      "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
-      "license": "MIT"
+    "node_modules/@zag-js/tabs": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/tabs/-/tabs-1.6.0.tgz",
+      "integrity": "sha512-OXxzicnp3CQnF+cY5sy/akmHEj5QNIDjkQ27p1PL6HYJhLTsUcifJJ0Z3O+sKwgIDCul9mXDVTK7Ofv1bSX5Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/element-rect": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
     },
-    "node_modules/@webassemblyjs/helper-wasm-section": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
-      "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
+    "node_modules/@zag-js/tags-input": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/tags-input/-/tags-input-1.6.0.tgz",
+      "integrity": "sha512-NKxhnCSQub31M2N6js9te7jmOyJT/mWrNCSdhSVK1ZUIrhpv4aKV6+VtFSkqsZD45S9x2lIiRIfU0RLsWVA4Yw==",
       "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-buffer": "1.14.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/wasm-gen": "1.14.1"
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/auto-resize": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/interact-outside": "1.6.0",
+        "@zag-js/live-region": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
       }
     },
-    "node_modules/@webassemblyjs/ieee754": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
-      "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
+    "node_modules/@zag-js/time-picker": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/time-picker/-/time-picker-1.6.0.tgz",
+      "integrity": "sha512-kdfCk2sc+ZmFVi9Hxjd3fGcozBrbVxsABK1gh3AutfmxE3TpGu3TAePeAXKSbdwpQFIlH3FpkGcZvatmTXN8tg==",
       "license": "MIT",
       "dependencies": {
-        "@xtuc/ieee754": "^1.2.0"
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dismissable": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/popper": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      },
+      "peerDependencies": {
+        "@internationalized/date": ">=3.0.0"
       }
     },
-    "node_modules/@webassemblyjs/leb128": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
-      "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
-      "license": "Apache-2.0",
+    "node_modules/@zag-js/timer": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/timer/-/timer-1.6.0.tgz",
+      "integrity": "sha512-SWOGifeDLG/4I54+wEbVuDMWryRNvmX7EjwHbsInlvGX6kXEgZxvvx2Y+cC/s88EbGQSKX3M+EeDyzzVQdrEHg==",
+      "license": "MIT",
       "dependencies": {
-        "@xtuc/long": "4.2.2"
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
       }
     },
-    "node_modules/@webassemblyjs/utf8": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
-      "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
-      "license": "MIT"
+    "node_modules/@zag-js/toast": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/toast/-/toast-1.6.0.tgz",
+      "integrity": "sha512-Esm34eA2H1KSrctHvVoqxskXqaO0U2i1H5D8K46HAFTCW1mPStYoPhisEtr3vFs8EGCU4Ycle4Aqs+FZCrUPLw==",
+      "license": "MIT",
+      "dependencies": {
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dismissable": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
+      }
     },
-    "node_modules/@webassemblyjs/wasm-edit": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
-      "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
+    "node_modules/@zag-js/toggle": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/toggle/-/toggle-1.6.0.tgz",
+      "integrity": "sha512-JdSMsJiB0BWOlsFR9xdLBdRnDQddJTpVtYQLHGjTNsRNOXGDLNRcbFmrMHdGHBU2ilK20B7i7YpdCvV9sBqTkA==",
       "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-buffer": "1.14.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/helper-wasm-section": "1.14.1",
-        "@webassemblyjs/wasm-gen": "1.14.1",
-        "@webassemblyjs/wasm-opt": "1.14.1",
-        "@webassemblyjs/wasm-parser": "1.14.1",
-        "@webassemblyjs/wast-printer": "1.14.1"
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
       }
     },
-    "node_modules/@webassemblyjs/wasm-gen": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
-      "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
+    "node_modules/@zag-js/toggle-group": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/toggle-group/-/toggle-group-1.6.0.tgz",
+      "integrity": "sha512-+V1qnVavd8eb1ERnFFnJemM0IE4P+ZT3TJFyLDEX/6DpL1nTL1M5dbp9az4jliJW2roIOqkYAWuIZgnFR6ucpw==",
       "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/ieee754": "1.13.2",
-        "@webassemblyjs/leb128": "1.13.2",
-        "@webassemblyjs/utf8": "1.13.2"
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
       }
     },
-    "node_modules/@webassemblyjs/wasm-opt": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
-      "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
+    "node_modules/@zag-js/tooltip": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/tooltip/-/tooltip-1.6.0.tgz",
+      "integrity": "sha512-vIz9UzQ8wFlNhCktSIkzfcT43jaqrw5marOA+Wy5SqSDmtTVhmFkjq44Yz8gdsgnMmvAlOjTUJ2mrC3n1+wi1Q==",
       "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-buffer": "1.14.1",
-        "@webassemblyjs/wasm-gen": "1.14.1",
-        "@webassemblyjs/wasm-parser": "1.14.1"
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/focus-visible": "1.6.0",
+        "@zag-js/popper": "1.6.0",
+        "@zag-js/store": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
       }
     },
-    "node_modules/@webassemblyjs/wasm-parser": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
-      "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
+    "node_modules/@zag-js/tour": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/tour/-/tour-1.6.0.tgz",
+      "integrity": "sha512-PRSBlRRL9/CdLrVvjxOLdBz9vFvqiVqeq438z7y4unuqEdvu2kMkrPfqqzbcS6FJUYb8eTmDhF3Lm8QLY5UvAg==",
       "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-api-error": "1.13.2",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/ieee754": "1.13.2",
-        "@webassemblyjs/leb128": "1.13.2",
-        "@webassemblyjs/utf8": "1.13.2"
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dismissable": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/focus-trap": "1.6.0",
+        "@zag-js/interact-outside": "1.6.0",
+        "@zag-js/popper": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
       }
     },
-    "node_modules/@webassemblyjs/wast-printer": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
-      "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
+    "node_modules/@zag-js/tree-view": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/tree-view/-/tree-view-1.6.0.tgz",
+      "integrity": "sha512-7heNL3PGxoKUucztjN/o7MYjls9xyFU+MArhBB13pRF+/puYR8akaPdnlzo99REAwEYp4Kg1cSQkdhQ6T+OXzw==",
       "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@xtuc/long": "4.2.2"
+        "@zag-js/anatomy": "1.6.0",
+        "@zag-js/collection": "1.6.0",
+        "@zag-js/core": "1.6.0",
+        "@zag-js/dom-query": "1.6.0",
+        "@zag-js/types": "1.6.0",
+        "@zag-js/utils": "1.6.0"
       }
     },
-    "node_modules/@xtuc/ieee754": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "license": "BSD-3-Clause"
+    "node_modules/@zag-js/types": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/types/-/types-1.6.0.tgz",
+      "integrity": "sha512-QU8ZhMdwqOwjMDndHiJmzxkXYIO/EBCJTBW43meRUUvzpw3JOIsesVPIbRgpNkh4YO5oIVIfwHePx2AN7BUhOg==",
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "3.1.3"
+      }
     },
-    "node_modules/@xtuc/long": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "license": "Apache-2.0"
+    "node_modules/@zag-js/utils": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@zag-js/utils/-/utils-1.6.0.tgz",
+      "integrity": "sha512-lBfOxQe+VakCa74nGG8t6Wz/nJXHyVapmRccg5xyT4+3KJHsWS5MLX2GUfljeSGGEtVzudh1GG6gT0hRM1uo5w==",
+      "license": "MIT"
     },
     "node_modules/abab": {
       "version": "2.0.6",
@@ -5526,7 +6635,7 @@
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
       "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "acorn": "^8.11.0"
@@ -7338,7 +8447,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/cross-spawn": {
@@ -7778,7 +8887,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -8185,7 +9293,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
       "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-      "devOptional": true,
+      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.3.1"
@@ -10200,7 +11308,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz",
       "integrity": "sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-uri": {
@@ -10444,6 +11551,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "license": "MIT"
+    },
     "node_modules/find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -10729,6 +11842,33 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.6.2",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.6.2.tgz",
+      "integrity": "sha512-7LgPRlPs5aG8UxeZiMCMZz8firC53+2+9TnWV22tuSi38D3IFRxHRUqOREKckAkt6ztX+Dn6weLcatQilJTMcg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.6.1",
+        "motion-utils": "^12.5.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -11203,6 +12343,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -13017,7 +14172,7 @@
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.6.3.tgz",
       "integrity": "sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
@@ -13027,7 +14182,7 @@
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-29.7.0.tgz",
       "integrity": "sha512-fP8u2pyfqx0K1rGn1R9pyE0/KTn+G7PxktWidOBTqFPLYX0b9ksaMFkhK5vrS3DVun09pckLdlx90QthlW7AmA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jest/types": "^29.6.3",
@@ -13914,7 +15069,7 @@
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-29.6.3.tgz",
       "integrity": "sha512-KJJBsRCyyLNWCNBOvZyRDnAIfUiRJ8v+hOBQYGn8gDyF3UegwiP4gwRR3/SDa42g1YbVycTidUF3rKjyLFDWbg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
@@ -13924,7 +15079,7 @@
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-29.7.0.tgz",
       "integrity": "sha512-IOVhZSrg+UvVAshDSDtHyFCCBUl/Q3AAJv8iZ6ZjnZ74xzvwuzLXid9IIIPgTnY62SJjfuupMKZsZQRsCvxEgA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "chalk": "^4.0.0",
@@ -13959,7 +15114,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -13975,7 +15130,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.1.0",
@@ -14216,7 +15371,7 @@
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
       "integrity": "sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jest/types": "^29.6.3",
@@ -14234,7 +15389,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -14250,7 +15405,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.1.0",
@@ -14267,7 +15422,7 @@
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-29.7.0.tgz",
       "integrity": "sha512-ZB7wHqaRGVw/9hST/OuFUReG7M8vKeq0/J2egIGLdvjHCmYqGARhzXmtgi+gVeZ5uXFF219aOc3Ls2yLg27tkw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jest/types": "^29.6.3",
@@ -14285,7 +15440,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -14301,7 +15456,7 @@
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
       "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -14314,7 +15469,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.1.0",
@@ -14384,7 +15539,7 @@
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-29.7.0.tgz",
       "integrity": "sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/node": "*",
@@ -14400,7 +15555,7 @@
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-flag": "^4.0.0"
@@ -14966,7 +16121,7 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "devOptional": true,
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/makeerror": {
@@ -15267,6 +16422,21 @@
         "url": "https://opencollective.com/mongoose"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.6.1",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.6.1.tgz",
+      "integrity": "sha512-8XVsriTUEVOepoIDgE/LDGdg7qaKXWdt+wQA/8z0p8YzJDLYL8gbimZ3YkCLlj7bB2i/4UBD/g+VO7y9ZY0zHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.5.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.5.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.5.0.tgz",
+      "integrity": "sha512-+hFFzvimn0sBMP9iPxBa9OtRX35ZQ3py0UHnb8U29VD+d8lQ8zH3dTygJWqK7av2v6yhg7scj9iZuvTS0f4+SA==",
+      "license": "MIT"
+    },
     "node_modules/mpath": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/mpath/-/mpath-0.9.0.tgz",
@@ -15397,6 +16567,16 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "license": "MIT"
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/no-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
@@ -18508,6 +19688,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/perfect-freehand": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/perfect-freehand/-/perfect-freehand-1.2.2.tgz",
+      "integrity": "sha512-eh31l019WICQ03pkF3FSzHxB8n07ItqIQ++G5UV8JX0zVOXzgTGCqnRR0jJ2h9U8/2uW4W4mtGJELt9kEV0CFQ==",
+      "license": "MIT"
+    },
     "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -20029,7 +21215,7 @@
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
       "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jest/schemas": "^29.6.3",
@@ -20124,12 +21310,27 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-compare": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-3.0.1.tgz",
+      "integrity": "sha512-V9plBAt3qjMlS1+nC8771KNf6oJ12gExvaxnNzN/9yVRLdTv/lc+oJlnSzrdYDAvBfTStPCoiaCOTmTs0adv7Q==",
+      "license": "MIT"
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "license": "MIT"
     },
+    "node_modules/proxy-memoize": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/proxy-memoize/-/proxy-memoize-3.0.1.tgz",
+      "integrity": "sha512-VDdG/VYtOgdGkWJx7y0o7p+zArSf2383Isci8C+BP3YXgMYDoPd3cCBjw0JdWb6YBb9sFiOPbAADDVTPJnh+9g==",
+      "license": "MIT",
+      "dependencies": {
+        "proxy-compare": "^3.0.0"
+      }
+    },
     "node_modules/psl": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
@@ -20444,11 +21645,20 @@
       "integrity": "sha512-SN/U6Ytxf1QGkw/9ve5Y+NxBbZM6Ht95tuXNMKs8EJyFa/Vy/+Co3stop3KBHARfn/giv+Lj1uUnTfOJ3moFEQ==",
       "license": "MIT"
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/react-refresh": {
@@ -22432,7 +23642,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.3.tgz",
       "integrity": "sha512-OcXjMsGdhL4XnbShKpAcSqPMzQoYkYyhbEaeSko47MjRP9NfEQMhZkXL1DoFlt9LWQn4YttrdnV6X2OiyzBi+A==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -23758,6 +24968,12 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "license": "MIT"
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -24611,7 +25827,7 @@
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
@@ -24655,7 +25871,7 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
       "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/tsconfig-paths": {
@@ -24884,20 +26100,6 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "node_modules/typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "license": "Apache-2.0",
-      "peer": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=4.2.0"
-      }
-    },
     "node_modules/unbox-primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
@@ -25064,6 +26266,12 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/uqr": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/uqr/-/uqr-0.1.2.tgz",
+      "integrity": "sha512-MJu7ypHq6QasgF5YRTjqscSzQp/W11zoUk6kvmlH+fmWEs63Y0Eib13hYFwAzagRJcVY8WVnlV+eBDUGMJ5IbA==",
+      "license": "MIT"
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -25132,7 +26340,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/v8-to-istanbul": {
@@ -26111,7 +27319,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
diff --git a/package.json b/package.json
index 68a2152..4e34452 100644
--- a/package.json
+++ b/package.json
@@ -6,5 +6,13 @@
     "client",
     "server",
     "shared"
-  ]
+  ],
+  "dependencies": {
+    "@chakra-ui/react": "^3.14.2",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "framer-motion": "^12.6.2",
+    "next-themes": "^0.4.6",
+    "react-icons": "^5.5.0"
+  }
 }
diff --git a/server/app.ts b/server/app.ts
index 46c8019..b488a6c 100644
--- a/server/app.ts
+++ b/server/app.ts
@@ -18,6 +18,7 @@ import userController from './controllers/user.controller';
 import messageController from './controllers/message.controller';
 import chatController from './controllers/chat.controller';
 import gameController from './controllers/game.controller';
+import communityController from './controllers/community.controller';
 import contributionsController from './controllers/contribution.controller';
 
 dotenv.config();
@@ -83,6 +84,7 @@ app.use('/messaging', messageController(socket));
 app.use('/user', userController(socket));
 app.use('/chat', chatController(socket));
 app.use('/games', gameController(socket));
+app.use('/community', communityController(socket));
 app.use('/contributions', contributionsController());
 
 // Export the app instance
diff --git a/server/controllers/community.controller.ts b/server/controllers/community.controller.ts
new file mode 100644
index 0000000..6e04e87
--- /dev/null
+++ b/server/controllers/community.controller.ts
@@ -0,0 +1,476 @@
+import express, { Request, Response } from 'express';
+import { ObjectId } from 'mongodb';
+import {
+  Community,
+  CommunityResponse,
+  CreateCommunityRequest,
+  CommunityIdRequest,
+  FakeSOSocket,
+  PopulatedDatabaseCommunity,
+} from '../types/types';
+import {
+  saveCommunity,
+  getCommunity,
+  getCommunities,
+  getCommunitiesByUserId,
+  addMemberToCommunity,
+  addModeratorToCommunity,
+  addMemberRequest,
+  approveMemberRequest,
+  rejectMemberRequest,
+  removeMemberFromCommunity,
+  removeModeratorFromCommunity,
+  updateCommunityName,
+  updateCommunityDescription,
+} from '../services/community.service';
+import { populateDocument } from '../utils/database.util';
+
+const communityController = (socket: FakeSOSocket) => {
+  const router = express.Router();
+
+  /**
+   * Validates the community object to ensure it contains all the necessary fields.
+   *
+   * @param community The community object to validate.
+   *
+   * @returns `true` if the community is valid, otherwise `false`.
+   */
+  const isCommunityBodyValid = (community: Community): boolean =>
+    community.name !== undefined &&
+    community.name.trim() !== '' &&
+    community.owner !== undefined &&
+    community.owner.trim() !== '' &&
+    community.visibility !== undefined &&
+    (community.visibility === 'public' || community.visibility === 'private');
+
+  /**
+   * Creates a new community.
+   *
+   * @param {CreateCommunityRequest} req - The request object containing the community data in its body.
+   * @param {Response} res - The response object used to send back the result.
+   * @returns {Promise<void>} A promise that resolves once the community is created or an error is sent.
+   */
+  const addCommunity = async (req: CreateCommunityRequest, res: Response): Promise<void> => {
+    const community: Community = req.body;
+    if (!isCommunityBodyValid(community)) {
+      res.status(400).send('Invalid community data');
+      return;
+    }
+
+    try {
+      const result: CommunityResponse = await saveCommunity(community);
+      if ('error' in result) {
+        throw new Error(result.error);
+      }
+      const populatedCommunity = await populateDocument(result._id.toString(), 'community');
+      if ('error' in populatedCommunity) {
+        throw new Error(populatedCommunity.error);
+      }
+      socket.emit('communityUpdate', {
+        community: populatedCommunity as PopulatedDatabaseCommunity,
+        type: 'created',
+      });
+      res.json(result);
+    } catch (err: unknown) {
+      const errorMsg = err instanceof Error ? err.message : 'Error when saving community';
+      res.status(500).send(errorMsg);
+    }
+  };
+
+  /**
+   * Retrieves a community by its ID.
+   *
+   * @param {CommunityIdRequest} req - The request object with the communityId in its params.
+   * @param {Response} res - The response object used to send back the found community.
+   * @returns {Promise<void>} A promise that resolves once the community is retrieved or an error is sent.
+   */
+  const getCommunityById = async (req: CommunityIdRequest, res: Response): Promise<void> => {
+    const { communityId } = req.params;
+    if (!ObjectId.isValid(communityId)) {
+      res.status(400).send('Invalid community ID format');
+      return;
+    }
+    try {
+      const community: CommunityResponse = await getCommunity(communityId);
+      if ('error' in community) {
+        throw new Error(community.error);
+      }
+      res.json(community);
+    } catch (err: unknown) {
+      const errorMsg = err instanceof Error ? err.message : 'Error retrieving community';
+      res.status(500).send(errorMsg);
+    }
+  };
+
+  /**
+   * Retrieves all communities.
+   *
+   * @param _ - The request object (not used).
+   * @param res - The response object used to send back the communities.
+   * @returns {Promise<void>} A promise that resolves once the communities are retrieved or an error is sent.
+   */
+  const getAllCommunities = async (_: Request, res: Response): Promise<void> => {
+    try {
+      const communities = await getCommunities();
+      console.log('fetched communities', communities); // debugging
+      if ('error' in communities) {
+        throw new Error(communities.error);
+      }
+      res.json(communities);
+    } catch (err: unknown) {
+      const errorMsg = err instanceof Error ? err.message : 'Error retrieving communities';
+      res.status(500).send(errorMsg);
+    }
+  };
+
+  /**
+   * Retrieves all communities for a given member.
+   *
+   * @param _ - The request object (not used).
+   * @param res - The response object used to send back the communities.
+   * @returns {Promise<void>} A promise that resolves once the communities are retrieved or an error is sent.
+   */
+  const getAllCommunitiesByUserId = async (req: Request, res: Response): Promise<void> => {
+    const { userId } = req.params;
+    if (!userId) {
+      res.status(400).send('Missing user ID');
+      return;
+    }
+    try {
+      const communities = await getCommunitiesByUserId(userId);
+      if ('error' in communities) {
+        throw new Error(communities.error);
+      }
+      res.json(communities);
+    } catch (err: unknown) {
+      const errorMsg = err instanceof Error ? err.message : 'Error retrieving user communities';
+      res.status(500).send(errorMsg);
+    }
+  };
+  
+  
+  /**
+   * Adds a member to a community.
+   *
+   * @param {CommunityIdRequest} req - The request object with the communityId in params and userId in the body.
+   * @param {Response} res - The response object used to send back the updated community.
+   * @returns {Promise<void>} A promise that resolves once the member is added or an error is sent.
+   */
+  const addMember = async (req: CommunityIdRequest, res: Response): Promise<void> => {
+    const { communityId } = req.params;
+    const { userId } = req.body;
+    if (!userId) {
+      res.status(400).send('Missing userId');
+      return;
+    }
+    try {
+      const result: CommunityResponse = await addMemberToCommunity(communityId, userId);
+      if ('error' in result) {
+        throw new Error(result.error);
+      }
+      const populatedCommunity = await populateDocument(result._id.toString(), 'community');
+      if ('error' in populatedCommunity) {
+        throw new Error(populatedCommunity.error);
+      }
+      socket.emit('communityUpdate', {
+        community: populatedCommunity as PopulatedDatabaseCommunity,
+        type: 'memberAdded',
+      });
+      res.json(result);
+    } catch (err: unknown) {
+      const errorMsg = err instanceof Error ? err.message : 'Error adding member to community';
+      res.status(500).send(errorMsg);
+    }
+  };
+
+  /**
+   * Adds a moderator to a community.
+   *
+   * @param {CommunityIdRequest} req - The request object with the communityId in params and userId in the body.
+   * @param {Response} res - The response object used to send back the updated community.
+   * @returns {Promise<void>} A promise that resolves once the moderator is added or an error is sent.
+   */
+  const addModerator = async (req: CommunityIdRequest, res: Response): Promise<void> => {
+    const { communityId } = req.params;
+    const { userId } = req.body;
+    if (!userId) {
+      res.status(400).send('Missing userId');
+      return;
+    }
+    try {
+      const result: CommunityResponse = await addModeratorToCommunity(communityId, userId);
+      if ('error' in result) {
+        throw new Error(result.error);
+      }
+      const populatedCommunity = await populateDocument(result._id.toString(), 'community');
+      if ('error' in populatedCommunity) {
+        throw new Error(populatedCommunity.error);
+      }
+      socket.emit('communityUpdate', {
+        community: populatedCommunity as PopulatedDatabaseCommunity,
+        type: 'moderatorAdded',
+      });
+      res.json(result);
+    } catch (err: unknown) {
+      const errorMsg = err instanceof Error ? err.message : 'Error adding moderator to community';
+      res.status(500).send(errorMsg);
+    }
+  };
+
+  /**
+   * Adds a member request for a private community.
+   *
+   * @param {CommunityIdRequest} req - The request object with the communityId in params and userId in the body.
+   * @param {Response} res - The response object used to send back the updated community.
+   * @returns {Promise<void>} A promise that resolves once the member request is added or an error is sent.
+   */
+  const addRequest = async (req: CommunityIdRequest, res: Response): Promise<void> => {
+    const { communityId } = req.params;
+    const { userId } = req.body;
+    if (!userId) {
+      res.status(400).send('Missing userId');
+      return;
+    }
+    try {
+      const result: CommunityResponse = await addMemberRequest(communityId, userId);
+      if ('error' in result) {
+        throw new Error(result.error);
+      }
+      const populatedCommunity = await populateDocument(result._id.toString(), 'community');
+      if ('error' in populatedCommunity) {
+        throw new Error(populatedCommunity.error);
+      }
+      socket.emit('communityUpdate', {
+        community: populatedCommunity as PopulatedDatabaseCommunity,
+        type: 'memberRequestAdded',
+      });
+      res.json(result);
+    } catch (err: unknown) {
+      const errorMsg = err instanceof Error ? err.message : 'Error adding member request';
+      res.status(500).send(errorMsg);
+    }
+  };
+
+  /**
+   * Approves a member request.
+   *
+   * @param {CommunityIdRequest} req - The request object with the communityId in params and userId in the body.
+   * @param {Response} res - The response object used to send back the updated community.
+   * @returns {Promise<void>} A promise that resolves once the member request is approved or an error is sent.
+   */
+  const approveRequest = async (req: CommunityIdRequest, res: Response): Promise<void> => {
+    const { communityId } = req.params;
+    const { userId } = req.body;
+    if (!userId) {
+      res.status(400).send('Missing userId');
+      return;
+    }
+    try {
+      const result: CommunityResponse = await approveMemberRequest(communityId, userId);
+      if ('error' in result) {
+        throw new Error(result.error);
+      }
+      const populatedCommunity = await populateDocument(result._id.toString(), 'community');
+      if ('error' in populatedCommunity) {
+        throw new Error(populatedCommunity.error);
+      }
+      socket.emit('communityUpdate', {
+        community: populatedCommunity as PopulatedDatabaseCommunity,
+        type: 'memberRequestApproved',
+      });
+      res.json(result);
+    } catch (err: unknown) {
+      const errorMsg = err instanceof Error ? err.message : 'Error approving member request';
+      res.status(500).send(errorMsg);
+    }
+  };
+
+  /**
+   * Rejects a member request.
+   *
+   * @param {CommunityIdRequest} req - The request object with the communityId in params and userId in the body.
+   * @param {Response} res - The response object used to send back the updated community.
+   * @returns {Promise<void>} A promise that resolves once the member request is rejected or an error is sent.
+   */
+  const rejectRequest = async (req: CommunityIdRequest, res: Response): Promise<void> => {
+    const { communityId } = req.params;
+    const { userId } = req.body;
+    if (!userId) {
+      res.status(400).send('Missing userId');
+      return;
+    }
+    try {
+      const result: CommunityResponse = await rejectMemberRequest(communityId, userId);
+      if ('error' in result) {
+        throw new Error(result.error);
+      }
+      const populatedCommunity = await populateDocument(result._id.toString(), 'community');
+      if ('error' in populatedCommunity) {
+        throw new Error(populatedCommunity.error);
+      }
+      socket.emit('communityUpdate', {
+        community: populatedCommunity as PopulatedDatabaseCommunity,
+        type: 'memberRequestRejected',
+      });
+      res.json(result);
+    } catch (err: unknown) {
+      const errorMsg = err instanceof Error ? err.message : 'Error rejecting member request';
+      res.status(500).send(errorMsg);
+    }
+  };
+
+  /**
+   * Removes a member from a community.
+   *
+   * @param {CommunityIdRequest} req - The request object with the communityId in params and userId in the body.
+   * @param {Response} res - The response object used to send back the updated community.
+   * @returns {Promise<void>} A promise that resolves once the member is removed or an error is sent.
+   */
+  const removeMember = async (req: CommunityIdRequest, res: Response): Promise<void> => {
+    const { communityId } = req.params;
+    const { userId } = req.body;
+    if (!userId) {
+      res.status(400).send('Missing userId');
+      return;
+    }
+    try {
+      const result: CommunityResponse = await removeMemberFromCommunity(communityId, userId);
+      if ('error' in result) {
+        throw new Error(result.error);
+      }
+      const populatedCommunity = await populateDocument(result._id.toString(), 'community');
+      if ('error' in populatedCommunity) {
+        throw new Error(populatedCommunity.error);
+      }
+      socket.emit('communityUpdate', {
+        community: populatedCommunity as PopulatedDatabaseCommunity,
+        type: 'memberRemoved',
+      });
+      res.json(result);
+    } catch (err: unknown) {
+      const errorMsg = err instanceof Error ? err.message : 'Error removing member from community';
+      res.status(500).send(errorMsg);
+    }
+  };
+
+  /**
+   * Removes a moderator from a community.
+   *
+   * @param {CommunityIdRequest} req - The request object with the communityId in params and userId in the body.
+   * @param {Response} res - The response object used to send back the updated community.
+   * @returns {Promise<void>} A promise that resolves once the moderator is removed or an error is sent.
+   */
+  const removeModerator = async (req: CommunityIdRequest, res: Response): Promise<void> => {
+    const { communityId } = req.params;
+    const { userId } = req.body;
+    if (!userId) {
+      res.status(400).send('Missing userId');
+      return;
+    }
+    try {
+      const result: CommunityResponse = await removeModeratorFromCommunity(communityId, userId);
+      if ('error' in result) {
+        throw new Error(result.error);
+      }
+      const populatedCommunity = await populateDocument(result._id.toString(), 'community');
+      if ('error' in populatedCommunity) {
+        throw new Error(populatedCommunity.error);
+      }
+      socket.emit('communityUpdate', {
+        community: populatedCommunity as PopulatedDatabaseCommunity,
+        type: 'moderatorRemoved',
+      });
+      res.json(result);
+    } catch (err: unknown) {
+      const errorMsg =
+        err instanceof Error ? err.message : 'Error removing moderator from community';
+      res.status(500).send(errorMsg);
+    }
+  };
+
+  /**
+   * Updates the name of a community.
+   *
+   * @param {CommunityIdRequest} req - The request object with the communityId in params and new name in the body.
+   * @param {Response} res - The response object used to send back the updated community.
+   * @returns {Promise<void>} A promise that resolves once the community name is updated or an error is sent.
+   */
+  const updateName = async (req: CommunityIdRequest, res: Response): Promise<void> => {
+    const { communityId } = req.params;
+    const { name } = req.body;
+    if (!name) {
+      res.status(400).send('Missing name');
+      return;
+    }
+    try {
+      const result: CommunityResponse = await updateCommunityName(communityId, name);
+      if ('error' in result) {
+        throw new Error(result.error);
+      }
+      const populatedCommunity = await populateDocument(result._id.toString(), 'community');
+      if ('error' in populatedCommunity) {
+        throw new Error(populatedCommunity.error);
+      }
+      socket.emit('communityUpdate', {
+        community: populatedCommunity as PopulatedDatabaseCommunity,
+        type: 'nameUpdated',
+      });
+      res.json(result);
+    } catch (err: unknown) {
+      const errorMsg = err instanceof Error ? err.message : 'Error updating community name';
+      res.status(500).send(errorMsg);
+    }
+  };
+
+  /**
+   * Updates the description (biography) of a community.
+   *
+   * @param {CommunityIdRequest} req - The request object with the communityId in params and new description in the body.
+   * @param {Response} res - The response object used to send back the updated community.
+   * @returns {Promise<void>} A promise that resolves once the community description is updated or an error is sent.
+   */
+  const updateDescription = async (req: CommunityIdRequest, res: Response): Promise<void> => {
+    const { communityId } = req.params;
+    const { description } = req.body;
+    if (!description) {
+      res.status(400).send('Missing description');
+      return;
+    }
+    try {
+      const result: CommunityResponse = await updateCommunityDescription(communityId, description);
+      if ('error' in result) {
+        throw new Error(result.error);
+      }
+      const populatedCommunity = await populateDocument(result._id.toString(), 'community');
+      if ('error' in populatedCommunity) {
+        throw new Error(populatedCommunity.error);
+      }
+      socket.emit('communityUpdate', {
+        community: populatedCommunity as PopulatedDatabaseCommunity,
+        type: 'descriptionUpdated',
+      });
+      res.json(result);
+    } catch (err: unknown) {
+      const errorMsg = err instanceof Error ? err.message : 'Error updating community description';
+      res.status(500).send(errorMsg);
+    }
+  };
+
+  router.post('/addCommunity', addCommunity);
+  router.get('/getCommunity/:communityId', getCommunityById);
+  router.get('/getAllCommunities', getAllCommunities);
+  router.get('/getCommunitiesByUser/:userId', getAllCommunitiesByUserId);
+  router.post('/addMember/:communityId', addMember);
+  router.post('/addModerator/:communityId', addModerator);
+  router.post('/addMemberRequest/:communityId', addRequest);
+  router.post('/approveMemberRequest/:communityId', approveRequest);
+  router.delete('/rejectMemberRequest/:communityId', rejectRequest);
+  router.delete('/removeMember/:communityId', removeMember);
+  router.delete('/removeModerator/:communityId', removeModerator);
+  router.patch('/updateName/:communityId', updateName);
+  router.patch('/updateDescription/:communityId', updateDescription);
+
+  return router;
+};
+
+export default communityController;
diff --git a/server/models/community.model.ts b/server/models/community.model.ts
new file mode 100644
index 0000000..3d843b7
--- /dev/null
+++ b/server/models/community.model.ts
@@ -0,0 +1,13 @@
+import mongoose, { Model } from 'mongoose';
+import communitySchema from './schema/community.schema';
+import { DatabaseCommunity } from '../types/types';
+
+/**
+ * Mongoose model for the Community collection.
+ */
+const CommunityModel: Model<DatabaseCommunity> = mongoose.model<DatabaseCommunity>(
+  'Community',
+  communitySchema,
+);
+
+export default CommunityModel;
diff --git a/server/models/schema/community.schema.ts b/server/models/schema/community.schema.ts
new file mode 100644
index 0000000..1f87314
--- /dev/null
+++ b/server/models/schema/community.schema.ts
@@ -0,0 +1,69 @@
+import { Schema } from 'mongoose';
+/**
+ * Mongoose schema for the Community collection.
+ *
+ * This schema defines the structure for storing communities in the database.
+ * Each answer includes the following fields:
+ * - `name`: The name of the community.
+ * - `description`: A description of the community.
+ * - `members`: An array of strings of the userIDs of the members.
+ * - `moderators`: An array of strings of the userIDs of the moderators.
+ * - `owner`: The userID of the owner of the community.
+ * - `visibility`: The visibility of the community, either 'public' or 'private'.
+ * - `memberRequests`: An array of objects containing the userID of the user who requested to join the community and the date and time of the request.
+ * - `questions`: An array of question IDs that belong to the community.
+ */
+const communitySchema: Schema = new Schema(
+  {
+    name: {
+      type: String,
+      required: true,
+      unique: true,
+    },
+    description: {
+      type: String,
+    },
+    members: [
+      {
+        type: String,
+        required: true,
+      },
+    ],
+    moderators: [
+      {
+        type: String,
+        required: true,
+      },
+    ],
+    owner: {
+      type: String,
+      required: true,
+    },
+    visibility: {
+      type: String,
+      enum: ['public', 'private'],
+      required: true,
+    },
+    memberRequests: [
+      {
+        userId: {
+          type: String,
+          required: true,
+        },
+        requestedDateTime: {
+          type: Date,
+          required: true,
+        },
+      },
+    ],
+    questions: [
+      {
+        type: Schema.Types.ObjectId,
+        ref: 'Question',
+      },
+    ],
+  },
+  { collection: 'Community' },
+);
+
+export default communitySchema;
diff --git a/server/services/community.service.ts b/server/services/community.service.ts
new file mode 100644
index 0000000..7319940
--- /dev/null
+++ b/server/services/community.service.ts
@@ -0,0 +1,347 @@
+import CommunityModel from '../models/community.model';
+import UserModel from '../models/users.model';
+import { Community, CommunityResponse, DatabaseCommunity } from '../types/types';
+
+/**
+ * Saves a new community to the database.
+ * @param communityPayload - The community object containing members, moderators, owner, visibility, and optional memberRequests.
+ * @returns {Promise<CommunityResponse>} - The saved community or an error message.
+ */
+export const saveCommunity = async (communityPayload: Community): Promise<CommunityResponse> => {
+  try {
+    const result = await CommunityModel.create(communityPayload);
+    return result;
+  } catch (error) {
+    return { error: `Error saving community: ${(error as Error).message}` };
+  }
+};
+
+/**
+ * Retrieves a community document by its ID.
+ * @param communityId - The ID of the community to retrieve.
+ * @returns {Promise<CommunityResponse>} - The community or an error message.
+ */
+export const getCommunity = async (communityId: string): Promise<CommunityResponse> => {
+  try {
+    const community: DatabaseCommunity | null = await CommunityModel.findById(communityId);
+    if (!community) {
+      throw new Error('Community not found');
+    }
+    return community;
+  } catch (error) {
+    return { error: `Error retrieving community: ${(error as Error).message}` };
+  }
+};
+
+/**
+ * Retrieves all communities from the database.
+ * @returns {Promise<CommunityResponse[]>} - An array of communities or an error message.
+ */
+export const getCommunities = async (): Promise<CommunityResponse[] | { error: string }> => {
+  try {
+    const communities: DatabaseCommunity[] = await CommunityModel.find({});
+    return communities;
+  } catch (error) {
+    return [{ error: `Error retrieving communities: ${(error as Error).message}` }];
+  }
+};
+
+/**
+ * Function to get all communities a user is a member of.
+ * @returns {Promise<CommunityResponse[]>} - An array of communities or an error message.
+ */
+export const getCommunitiesByUserId = async (
+  userId: string,
+): Promise<CommunityResponse[] | { error: string }> => {
+  try {
+    const communities: DatabaseCommunity[] = await CommunityModel.find({ members: userId });
+    return communities;
+  } catch (error) {
+    return { error: `Error retrieving communities: ${(error as Error).message}` };
+  }
+};
+
+/**
+ * Function to get all communities a user manages.
+ * @param userId - the ID of the user on this page
+ * @returns {Promise<CommunityResponse[]>} - An array of communities or an error message.
+ */
+export const getManagedCommunitiesByUserId = async (
+  userId: string,
+): Promise<CommunityResponse[] | { error: string }> => {
+  try {
+    const managedCommunities: DatabaseCommunity[] = await CommunityModel.find({ owner: userId });
+    return managedCommunities;
+  } catch (error) {
+    return { error: `Error retrieving managed communities: ${(error as Error).message}` };
+  }
+};
+
+/**
+ * Adds a member to a community.
+ * @param communityId - The ID of the community.
+ * @param userId - The user ID to add as a member.
+ * @returns {Promise<CommunityResponse>} - The updated community or an error message.
+ */
+export const addMemberToCommunity = async (
+  communityId: string,
+  userId: string,
+): Promise<CommunityResponse> => {
+  try {
+    const userExists = await UserModel.findById(userId);
+    if (!userExists) {
+      throw new Error('User does not exist.');
+    }
+
+    const updatedCommunity: DatabaseCommunity | null = await CommunityModel.findOneAndUpdate(
+      { _id: communityId, members: { $ne: userId } },
+      { $push: { members: userId } },
+      { new: true },
+    );
+
+    if (!updatedCommunity) {
+      throw new Error('Community not found or user already a member.');
+    }
+    return updatedCommunity;
+  } catch (error) {
+    return { error: `Error adding member to community: ${(error as Error).message}` };
+  }
+};
+
+/**
+ * Adds a moderator to a community.
+ * @param communityId - The ID of the community.
+ * @param userId - The user ID to add as a moderator.
+ * @returns {Promise<CommunityResponse>} - The updated community or an error message.
+ */
+export const addModeratorToCommunity = async (
+  communityId: string,
+  userId: string,
+): Promise<CommunityResponse> => {
+  try {
+    const userExists = await UserModel.findById(userId);
+    if (!userExists) {
+      throw new Error('User does not exist.');
+    }
+
+    const community = await CommunityModel.findById(communityId);
+    if (!community) {
+      throw new Error('Community not found.');
+    }
+
+    if (!community.members.includes(userId)) {
+      throw new Error('User must be a member before being promoted to moderator.');
+    }
+
+    const updatedCommunity: DatabaseCommunity | null = await CommunityModel.findOneAndUpdate(
+      { _id: communityId, moderators: { $ne: userId } },
+      { $push: { moderators: userId } },
+      { new: true },
+    );
+
+    if (!updatedCommunity) {
+      throw new Error('User is already a moderator.');
+    }
+    return updatedCommunity;
+  } catch (error) {
+    return { error: `Error adding moderator to community: ${(error as Error).message}` };
+  }
+};
+
+/**
+ * Adds a member request to a community.
+ * @param communityId - The ID of the community.
+ * @param userId - The user ID requesting to join.
+ * @returns {Promise<CommunityResponse>} - The updated community or an error message.
+ */
+export const addMemberRequest = async (
+  communityId: string,
+  userId: string,
+): Promise<CommunityResponse> => {
+  try {
+    const community = await CommunityModel.findById(communityId);
+    if (!community) {
+      throw new Error('Community not found');
+    }
+    if (community.visibility !== 'private') {
+      throw new Error('Community is public');
+    }
+
+    const userExists = await UserModel.findById(userId);
+    if (!userExists) {
+      throw new Error('User does not exist.');
+    }
+
+    const updatedCommunity: DatabaseCommunity | null = await CommunityModel.findOneAndUpdate(
+      { '_id': communityId, 'memberRequests.userId': { $ne: userId } },
+      { $push: { memberRequests: { userId, requestedAt: new Date() } } },
+      { new: true },
+    );
+
+    if (!updatedCommunity) {
+      throw new Error('Community not found or request already exists.');
+    }
+    return updatedCommunity;
+  } catch (error) {
+    return { error: `Error adding member request: ${(error as Error).message}` };
+  }
+};
+
+/**
+ * Approves a member request for a community.
+ * Moves the user from the memberRequests list to the members list.
+ * @param communityId - The ID of the community.
+ * @param userId - The user ID whose request is being approved.
+ * @returns {Promise<CommunityResponse>} - The updated community or an error message.
+ */
+export const approveMemberRequest = async (
+  communityId: string,
+  userId: string,
+): Promise<CommunityResponse> => {
+  try {
+    const updatedCommunity: DatabaseCommunity | null = await CommunityModel.findOneAndUpdate(
+      { '_id': communityId, 'memberRequests.userId': userId },
+      {
+        $pull: { memberRequests: { userId } },
+        $push: { members: userId },
+      },
+      { new: true },
+    );
+
+    if (!updatedCommunity) {
+      throw new Error('Community not found or no pending member request for this user.');
+    }
+    return updatedCommunity;
+  } catch (error) {
+    return { error: `Error approving member request: ${(error as Error).message}` };
+  }
+};
+
+/**
+ * Rejects a member request for a community.
+ * Removes the user from the memberRequests list.
+ * @param communityId - The ID of the community.
+ * @param userId - The user ID whose request is being rejected.
+ * @returns {Promise<CommunityResponse>} - The updated community or an error message.
+ */
+export const rejectMemberRequest = async (
+  communityId: string,
+  userId: string,
+): Promise<CommunityResponse> => {
+  try {
+    const updatedCommunity: DatabaseCommunity | null = await CommunityModel.findOneAndUpdate(
+      { '_id': communityId, 'memberRequests.userId': userId },
+      { $pull: { memberRequests: { userId } } },
+      { new: true },
+    );
+
+    if (!updatedCommunity) {
+      throw new Error('Community not found or no pending member request for this user.');
+    }
+    return updatedCommunity;
+  } catch (error) {
+    return { error: `Error rejecting member request: ${(error as Error).message}` };
+  }
+};
+
+/**
+ * Removes a member from a community.
+ * @param communityId - The ID of the community.
+ * @param userId - The user ID to remove from members.
+ * @returns {Promise<CommunityResponse>} - The updated community or an error message.
+ */
+export const removeMemberFromCommunity = async (
+  communityId: string,
+  userId: string,
+): Promise<CommunityResponse> => {
+  try {
+    const updatedCommunity: DatabaseCommunity | null = await CommunityModel.findOneAndUpdate(
+      { _id: communityId },
+      { $pull: { members: userId } },
+      { new: true },
+    );
+
+    if (!updatedCommunity) {
+      throw new Error('Community not found.');
+    }
+    return updatedCommunity;
+  } catch (error) {
+    return { error: `Error removing member from community: ${(error as Error).message}` };
+  }
+};
+
+/**
+ * Removes a moderator from a community.
+ * @param communityId - The ID of the community.
+ * @param userId - The user ID to remove from moderators.
+ * @returns {Promise<CommunityResponse>} - The updated community or an error message.
+ */
+export const removeModeratorFromCommunity = async (
+  communityId: string,
+  userId: string,
+): Promise<CommunityResponse> => {
+  try {
+    const updatedCommunity: DatabaseCommunity | null = await CommunityModel.findOneAndUpdate(
+      { _id: communityId },
+      { $pull: { moderators: userId } },
+      { new: true },
+    );
+
+    if (!updatedCommunity) {
+      throw new Error('Community not found.');
+    }
+    return updatedCommunity;
+  } catch (error) {
+    return { error: `Error removing moderator from community: ${(error as Error).message}` };
+  }
+};
+
+/**
+ * Updates the name of a community.
+ * @param communityId - The ID of the community to update.
+ * @param name - The new name for the community.
+ * @returns {Promise<CommunityResponse>} - The updated community or an error message.
+ */
+export const updateCommunityName = async (
+  communityId: string,
+  name: string,
+): Promise<CommunityResponse> => {
+  try {
+    const updatedCommunity: DatabaseCommunity | null = await CommunityModel.findOneAndUpdate(
+      { _id: communityId },
+      { $set: { name } },
+      { new: true },
+    );
+    if (!updatedCommunity) {
+      throw new Error('Community not found.');
+    }
+    return updatedCommunity;
+  } catch (error) {
+    return { error: `Error updating community name: ${(error as Error).message}` };
+  }
+};
+
+/**
+ * Updates the description of a community.
+ * @param communityId - The ID of the community to update.
+ * @param description - The new description for the community.
+ * @returns {Promise<CommunityResponse>} - The updated community or an error message.
+ */
+export const updateCommunityDescription = async (
+  communityId: string,
+  description: string,
+): Promise<CommunityResponse> => {
+  try {
+    const updatedCommunity: DatabaseCommunity | null = await CommunityModel.findOneAndUpdate(
+      { _id: communityId },
+      { $set: { description } },
+      { new: true },
+    );
+    if (!updatedCommunity) {
+      throw new Error('Community not found.');
+    }
+    return updatedCommunity;
+  } catch (error) {
+    return { error: `Error updating community description: ${(error as Error).message}` };
+  }
+};
diff --git a/server/tests/controllers/community.controller.spec.ts b/server/tests/controllers/community.controller.spec.ts
new file mode 100644
index 0000000..ef2a947
--- /dev/null
+++ b/server/tests/controllers/community.controller.spec.ts
@@ -0,0 +1,814 @@
+import mongoose from 'mongoose';
+import supertest from 'supertest';
+import express, { Express } from 'express';
+import communityController from '../../controllers/community.controller';
+import {
+  Community,
+  DatabaseCommunity,
+  PopulatedDatabaseCommunity,
+  FakeSOSocket,
+} from '../../types/types';
+import * as communityService from '../../services/community.service';
+import * as databaseUtil from '../../utils/database.util';
+
+const fakeSocket = {
+  emit: jest.fn(),
+} as Partial<FakeSOSocket> as FakeSOSocket;
+
+describe('Community Controller', () => {
+  let app: Express;
+  beforeAll(() => {
+    app = express();
+    app.use(express.json());
+    app.use('/community', communityController(fakeSocket));
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('POST /community/addCommunity', () => {
+    const validCommunityPayload: Community = {
+      name: 'Software Lovers',
+      description: 'We love software',
+      members: [],
+      moderators: [],
+      owner: 'Janie',
+      visibility: 'public',
+      memberRequests: [],
+      questions: [],
+    };
+
+    it('should create a new community and emit a "created" update', async () => {
+      const createdCommunity: DatabaseCommunity = {
+        _id: new mongoose.Types.ObjectId(),
+        name: validCommunityPayload.name,
+        description: validCommunityPayload.description,
+        members: validCommunityPayload.members,
+        moderators: validCommunityPayload.moderators,
+        owner: validCommunityPayload.owner,
+        visibility: validCommunityPayload.visibility,
+        memberRequests: validCommunityPayload.memberRequests,
+        questions: validCommunityPayload.questions,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      };
+
+      const populatedCommunity: PopulatedDatabaseCommunity = {
+        ...createdCommunity,
+        memberRequests: [],
+        questions: [],
+      };
+
+      jest.spyOn(communityService, 'saveCommunity').mockResolvedValue(createdCommunity);
+      jest.spyOn(databaseUtil, 'populateDocument').mockResolvedValue(populatedCommunity);
+
+      const response = await supertest(app)
+        .post('/community/addCommunity')
+        .send(validCommunityPayload);
+
+      expect(response.status).toBe(200);
+      expect(response.body).toMatchObject({
+        _id: createdCommunity._id.toString(),
+        name: validCommunityPayload.name,
+        description: validCommunityPayload.description,
+        owner: validCommunityPayload.owner,
+        visibility: validCommunityPayload.visibility,
+      });
+      expect(fakeSocket.emit).toHaveBeenCalledWith('communityUpdate', {
+        community: populatedCommunity,
+        type: 'created',
+      });
+    });
+
+    it('should return 400 for invalid community data', async () => {
+      const invalidPayload = { members: [], moderators: [] };
+      const response = await supertest(app).post('/community/addCommunity').send(invalidPayload);
+      expect(response.status).toBe(400);
+      expect(response.text).toBe('Invalid community data');
+    });
+
+    it('should return 500 if saveCommunity returns an error', async () => {
+      jest.spyOn(communityService, 'saveCommunity').mockResolvedValue({ error: 'Service error' });
+      const response = await supertest(app)
+        .post('/community/addCommunity')
+        .send(validCommunityPayload);
+      expect(response.status).toBe(500);
+      expect(response.text).toContain('Service error');
+    });
+
+    it('should return 500 if populateDocument returns an error', async () => {
+      const createdCommunity: DatabaseCommunity = {
+        _id: new mongoose.Types.ObjectId(),
+        name: validCommunityPayload.name,
+        description: validCommunityPayload.description,
+        members: validCommunityPayload.members,
+        moderators: validCommunityPayload.moderators,
+        owner: validCommunityPayload.owner,
+        visibility: validCommunityPayload.visibility,
+        memberRequests: validCommunityPayload.memberRequests,
+        questions: validCommunityPayload.questions,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      };
+      jest.spyOn(communityService, 'saveCommunity').mockResolvedValue(createdCommunity);
+      jest.spyOn(databaseUtil, 'populateDocument').mockResolvedValue({ error: 'Population error' });
+      const response = await supertest(app)
+        .post('/community/addCommunity')
+        .send(validCommunityPayload);
+      expect(response.status).toBe(500);
+      expect(response.text).toContain('Population error');
+    });
+  });
+
+  describe('GET /community/getCommunity/:communityId', () => {
+    it('should return community if valid ID is provided', async () => {
+      const communityId = new mongoose.Types.ObjectId().toString();
+      const communityData: DatabaseCommunity = {
+        _id: new mongoose.Types.ObjectId(communityId),
+        name: 'Software Lovers',
+        description: 'We love software',
+        members: ['member1'],
+        moderators: ['mod1'],
+        owner: 'Janie',
+        visibility: 'private',
+        memberRequests: [],
+        questions: [],
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      };
+      jest.spyOn(communityService, 'getCommunity').mockResolvedValue(communityData);
+
+      const response = await supertest(app).get(`/community/getCommunity/${communityId}`);
+      expect(response.status).toBe(200);
+      expect(response.body._id).toBe(communityData._id.toString());
+    });
+
+    it('should return 400 if invalid community ID format', async () => {
+      const response = await supertest(app).get('/community/getCommunity/invalidID');
+      expect(response.status).toBe(400);
+      expect(response.text).toBe('Invalid community ID format');
+    });
+
+    it('should return 500 if getCommunity returns an error', async () => {
+      const communityId = new mongoose.Types.ObjectId().toString();
+      jest.spyOn(communityService, 'getCommunity').mockResolvedValue({ error: 'Not found error' });
+      const response = await supertest(app).get(`/community/getCommunity/${communityId}`);
+      expect(response.status).toBe(500);
+      expect(response.text).toContain('Not found error');
+    });
+  });
+
+  describe('GET /community/getAllCommunities', () => {
+    it('should return an array of communities if found', async () => {
+      const communities = [
+        {
+          _id: new mongoose.Types.ObjectId(),
+          name: 'Software Lovers',
+          description: 'We love software',
+          members: [],
+          moderators: [],
+          owner: 'Janie',
+          visibility: 'public',
+          memberRequests: [],
+          questions: [],
+          createdAt: new Date(),
+          updatedAt: new Date(),
+        },
+        {
+          _id: new mongoose.Types.ObjectId(),
+          name: 'Hardware Lovers',
+          description: 'We love hardware',
+          members: [],
+          moderators: [],
+          owner: 'Aaron',
+          visibility: 'private',
+          memberRequests: [],
+          questions: [],
+          createdAt: new Date(),
+          updatedAt: new Date(),
+        },
+      ] as DatabaseCommunity[];
+
+      jest.spyOn(communityService, 'getCommunities').mockResolvedValue(communities);
+
+      const response = await supertest(app).get('/community/getAllCommunities');
+      expect(response.status).toBe(200);
+      expect(response.body).toEqual(
+        communities.map(c => ({
+          ...c,
+          _id: c._id.toString(),
+          createdAt: c.createdAt.toISOString(),
+          updatedAt: c.updatedAt.toISOString(),
+        })),
+      );
+    });
+
+    it('should return 500 if getCommunities returns an error', async () => {
+      jest.spyOn(communityService, 'getCommunities').mockResolvedValue({ error: 'Service error' });
+      const response = await supertest(app).get('/community/getAllCommunities');
+      expect(response.status).toBe(500);
+      expect(response.text).toContain('Service error');
+    });
+
+    it('should return an error message if find fails', async () => {
+      jest.spyOn(communityService, 'getCommunities').mockRejectedValue(new Error('DB error'));
+      const response = await supertest(app).get('/community/getAllCommunities');
+      expect(response.status).toBe(500);
+      expect(response.text).toContain('DB error');
+    });
+  });
+
+  describe('POST /community/addMember/:communityId', () => {
+    const communityId = new mongoose.Types.ObjectId().toString();
+    const userId = 'Aaron';
+    const baseCommunity: DatabaseCommunity = {
+      _id: new mongoose.Types.ObjectId(communityId),
+      name: 'Software Lovers',
+      description: 'We love software',
+      members: [],
+      moderators: [],
+      memberRequests: [],
+      owner: 'Janie',
+      visibility: 'public',
+      questions: [],
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+    const populatedCommunity: PopulatedDatabaseCommunity = {
+      ...baseCommunity,
+      memberRequests: [],
+      questions: [],
+    };
+
+    it('should add a member and emit a "memberAdded" update', async () => {
+      jest.spyOn(communityService, 'addMemberToCommunity').mockResolvedValue(baseCommunity);
+      jest.spyOn(databaseUtil, 'populateDocument').mockResolvedValue(populatedCommunity);
+
+      const response = await supertest(app)
+        .post(`/community/addMember/${communityId}`)
+        .send({ userId });
+      expect(response.status).toBe(200);
+      expect(response.body._id).toBe(baseCommunity._id.toString());
+      expect(fakeSocket.emit).toHaveBeenCalledWith('communityUpdate', {
+        community: populatedCommunity,
+        type: 'memberAdded',
+      });
+    });
+
+    it('should return 400 if userId is missing', async () => {
+      const response = await supertest(app).post(`/community/addMember/${communityId}`).send({});
+      expect(response.status).toBe(400);
+      expect(response.text).toBe('Missing userId');
+    });
+
+    it('should return 500 if addMemberToCommunity returns an error', async () => {
+      jest
+        .spyOn(communityService, 'addMemberToCommunity')
+        .mockResolvedValue({ error: 'Add member error' });
+      const response = await supertest(app)
+        .post(`/community/addMember/${communityId}`)
+        .send({ userId });
+      expect(response.status).toBe(500);
+      expect(response.text).toContain('Add member error');
+    });
+
+    it('should return 500 if populateDocument returns an error', async () => {
+      jest.spyOn(communityService, 'addMemberToCommunity').mockResolvedValue(baseCommunity);
+      jest.spyOn(databaseUtil, 'populateDocument').mockResolvedValue({ error: 'Population error' });
+      const response = await supertest(app)
+        .post(`/community/addMember/${communityId}`)
+        .send({ userId });
+      expect(response.status).toBe(500);
+      expect(response.text).toContain('Population error');
+    });
+  });
+
+  describe('POST /community/addModerator/:communityId', () => {
+    const communityId = new mongoose.Types.ObjectId().toString();
+    const userId = 'Aaron';
+    const baseCommunity: DatabaseCommunity = {
+      _id: new mongoose.Types.ObjectId(communityId),
+      name: 'Software Lovers',
+      description: 'We love software',
+      members: [],
+      moderators: [],
+      memberRequests: [],
+      owner: 'Janie',
+      visibility: 'public',
+      questions: [],
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+    const populatedCommunity: PopulatedDatabaseCommunity = {
+      ...baseCommunity,
+      memberRequests: [],
+      questions: [],
+    };
+
+    it('should add a moderator and emit a "moderatorAdded" update', async () => {
+      jest.spyOn(communityService, 'addModeratorToCommunity').mockResolvedValue(baseCommunity);
+      jest.spyOn(databaseUtil, 'populateDocument').mockResolvedValue(populatedCommunity);
+
+      const response = await supertest(app)
+        .post(`/community/addModerator/${communityId}`)
+        .send({ userId });
+      expect(response.status).toBe(200);
+      expect(fakeSocket.emit).toHaveBeenCalledWith('communityUpdate', {
+        community: populatedCommunity,
+        type: 'moderatorAdded',
+      });
+    });
+
+    it('should return 400 if userId is missing', async () => {
+      const response = await supertest(app).post(`/community/addModerator/${communityId}`).send({});
+      expect(response.status).toBe(400);
+      expect(response.text).toBe('Missing userId');
+    });
+
+    it('should return 500 if addModeratorToCommunity returns an error', async () => {
+      jest
+        .spyOn(communityService, 'addModeratorToCommunity')
+        .mockResolvedValue({ error: 'Add moderator error' });
+      const response = await supertest(app)
+        .post(`/community/addModerator/${communityId}`)
+        .send({ userId });
+      expect(response.status).toBe(500);
+      expect(response.text).toContain('Add moderator error');
+    });
+
+    it('should return 500 if populateDocument returns an error', async () => {
+      jest.spyOn(communityService, 'addModeratorToCommunity').mockResolvedValue(baseCommunity);
+      jest.spyOn(databaseUtil, 'populateDocument').mockResolvedValue({ error: 'Population error' });
+      const response = await supertest(app)
+        .post(`/community/addModerator/${communityId}`)
+        .send({ userId });
+      expect(response.status).toBe(500);
+      expect(response.text).toContain('Population error');
+    });
+  });
+
+  describe('POST /community/addMemberRequest/:communityId', () => {
+    const communityId = new mongoose.Types.ObjectId().toString();
+    const userId = 'Aaron';
+    const baseCommunity: DatabaseCommunity = {
+      _id: new mongoose.Types.ObjectId(communityId),
+      name: 'Software Lovers',
+      description: 'We love software',
+      members: [],
+      moderators: [],
+      memberRequests: [],
+      owner: 'Janie',
+      visibility: 'private',
+      questions: [],
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+    const populatedCommunity: PopulatedDatabaseCommunity = {
+      ...baseCommunity,
+      memberRequests: [
+        {
+          userId,
+          requestedAt: new Date(),
+          user: { _id: new mongoose.Types.ObjectId(), username: 'Aaron' },
+        },
+      ],
+    };
+
+    it('should add a member request and emit "memberRequestAdded"', async () => {
+      jest.spyOn(communityService, 'addMemberRequest').mockResolvedValue(baseCommunity);
+      jest.spyOn(databaseUtil, 'populateDocument').mockResolvedValue(populatedCommunity);
+
+      const response = await supertest(app)
+        .post(`/community/addMemberRequest/${communityId}`)
+        .send({ userId });
+      expect(response.status).toBe(200);
+      expect(fakeSocket.emit).toHaveBeenCalledWith('communityUpdate', {
+        community: populatedCommunity,
+        type: 'memberRequestAdded',
+      });
+    });
+
+    it('should return 400 if userId is missing', async () => {
+      const response = await supertest(app)
+        .post(`/community/addMemberRequest/${communityId}`)
+        .send({});
+      expect(response.status).toBe(400);
+      expect(response.text).toBe('Missing userId');
+    });
+
+    it('should return 500 if addMemberRequest returns an error', async () => {
+      jest
+        .spyOn(communityService, 'addMemberRequest')
+        .mockResolvedValue({ error: 'Member request error' });
+      const response = await supertest(app)
+        .post(`/community/addMemberRequest/${communityId}`)
+        .send({ userId });
+      expect(response.status).toBe(500);
+      expect(response.text).toContain('Member request error');
+    });
+
+    it('should return 500 if populateDocument returns an error', async () => {
+      jest.spyOn(communityService, 'addMemberRequest').mockResolvedValue(baseCommunity);
+      jest.spyOn(databaseUtil, 'populateDocument').mockResolvedValue({ error: 'Population error' });
+      const response = await supertest(app)
+        .post(`/community/addMemberRequest/${communityId}`)
+        .send({ userId });
+      expect(response.status).toBe(500);
+      expect(response.text).toContain('Population error');
+    });
+  });
+
+  describe('POST /community/approveMemberRequest/:communityId', () => {
+    const communityId = new mongoose.Types.ObjectId().toString();
+    const userId = 'Aaron';
+    const baseCommunity: DatabaseCommunity = {
+      _id: new mongoose.Types.ObjectId(communityId),
+      name: 'Software Lovers',
+      description: 'We love software',
+      members: [],
+      moderators: [],
+      memberRequests: [{ userId, requestedAt: new Date() }],
+      owner: 'Janie',
+      visibility: 'private',
+      questions: [],
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+    const populatedCommunity: PopulatedDatabaseCommunity = {
+      ...baseCommunity,
+      memberRequests: [],
+      members: [userId],
+    };
+
+    it('should approve a member request and emit "memberRequestApproved"', async () => {
+      jest.spyOn(communityService, 'approveMemberRequest').mockResolvedValue(baseCommunity);
+      jest.spyOn(databaseUtil, 'populateDocument').mockResolvedValue(populatedCommunity);
+
+      const response = await supertest(app)
+        .post(`/community/approveMemberRequest/${communityId}`)
+        .send({ userId });
+      expect(response.status).toBe(200);
+      expect(fakeSocket.emit).toHaveBeenCalledWith('communityUpdate', {
+        community: populatedCommunity,
+        type: 'memberRequestApproved',
+      });
+    });
+
+    it('should return 400 if userId is missing', async () => {
+      const response = await supertest(app)
+        .post(`/community/approveMemberRequest/${communityId}`)
+        .send({});
+      expect(response.status).toBe(400);
+      expect(response.text).toBe('Missing userId');
+    });
+
+    it('should return 500 if approveMemberRequest returns an error', async () => {
+      jest
+        .spyOn(communityService, 'approveMemberRequest')
+        .mockResolvedValue({ error: 'Approval error' });
+      const response = await supertest(app)
+        .post(`/community/approveMemberRequest/${communityId}`)
+        .send({ userId });
+      expect(response.status).toBe(500);
+      expect(response.text).toContain('Approval error');
+    });
+
+    it('should return 500 if populateDocument returns an error', async () => {
+      jest.spyOn(communityService, 'approveMemberRequest').mockResolvedValue(baseCommunity);
+      jest.spyOn(databaseUtil, 'populateDocument').mockResolvedValue({ error: 'Population error' });
+      const response = await supertest(app)
+        .post(`/community/approveMemberRequest/${communityId}`)
+        .send({ userId });
+      expect(response.status).toBe(500);
+      expect(response.text).toContain('Population error');
+    });
+  });
+
+  describe('DELETE /community/rejectMemberRequest/:communityId', () => {
+    const communityId = new mongoose.Types.ObjectId().toString();
+    const userId = 'Aaron';
+    const baseCommunity: DatabaseCommunity = {
+      _id: new mongoose.Types.ObjectId(communityId),
+      name: 'Software Lovers',
+      description: 'We love software',
+      memberRequests: [{ userId, requestedAt: new Date() }],
+      members: [],
+      moderators: [],
+      owner: 'Janie',
+      visibility: 'private',
+      questions: [],
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+    const populatedCommunity: PopulatedDatabaseCommunity = {
+      ...baseCommunity,
+      memberRequests: [],
+    };
+
+    it('should reject a member request and emit "memberRequestRejected"', async () => {
+      jest.spyOn(communityService, 'rejectMemberRequest').mockResolvedValue(baseCommunity);
+      jest.spyOn(databaseUtil, 'populateDocument').mockResolvedValue(populatedCommunity);
+
+      const response = await supertest(app)
+        .delete(`/community/rejectMemberRequest/${communityId}`)
+        .send({ userId });
+      expect(response.status).toBe(200);
+      expect(fakeSocket.emit).toHaveBeenCalledWith('communityUpdate', {
+        community: populatedCommunity,
+        type: 'memberRequestRejected',
+      });
+    });
+
+    it('should return 400 if userId is missing', async () => {
+      const response = await supertest(app)
+        .delete(`/community/rejectMemberRequest/${communityId}`)
+        .send({});
+      expect(response.status).toBe(400);
+      expect(response.text).toBe('Missing userId');
+    });
+
+    it('should return 500 if rejectMemberRequest returns an error', async () => {
+      jest
+        .spyOn(communityService, 'rejectMemberRequest')
+        .mockResolvedValue({ error: 'Rejection error' });
+      const response = await supertest(app)
+        .delete(`/community/rejectMemberRequest/${communityId}`)
+        .send({ userId });
+      expect(response.status).toBe(500);
+      expect(response.text).toContain('Rejection error');
+    });
+
+    it('should return 500 if populateDocument returns an error', async () => {
+      jest.spyOn(communityService, 'rejectMemberRequest').mockResolvedValue(baseCommunity);
+      jest.spyOn(databaseUtil, 'populateDocument').mockResolvedValue({ error: 'Population error' });
+      const response = await supertest(app)
+        .delete(`/community/rejectMemberRequest/${communityId}`)
+        .send({ userId });
+      expect(response.status).toBe(500);
+      expect(response.text).toContain('Population error');
+    });
+  });
+
+  describe('DELETE /community/removeMember/:communityId', () => {
+    const communityId = new mongoose.Types.ObjectId().toString();
+    const userId = 'Aaron';
+    const baseCommunity: DatabaseCommunity = {
+      _id: new mongoose.Types.ObjectId(communityId),
+      name: 'Software Lovers',
+      description: 'We love software',
+      members: [userId],
+      moderators: [],
+      memberRequests: [],
+      owner: 'Janie',
+      visibility: 'public',
+      questions: [],
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+    const populatedCommunity: PopulatedDatabaseCommunity = {
+      ...baseCommunity,
+      memberRequests: [],
+    };
+
+    it('should remove a member and emit "memberRemoved"', async () => {
+      jest.spyOn(communityService, 'removeMemberFromCommunity').mockResolvedValue(baseCommunity);
+      jest.spyOn(databaseUtil, 'populateDocument').mockResolvedValue(populatedCommunity);
+
+      const response = await supertest(app)
+        .delete(`/community/removeMember/${communityId}`)
+        .send({ userId });
+      expect(response.status).toBe(200);
+      expect(fakeSocket.emit).toHaveBeenCalledWith('communityUpdate', {
+        community: populatedCommunity,
+        type: 'memberRemoved',
+      });
+    });
+
+    it('should return 400 if userId is missing', async () => {
+      const response = await supertest(app)
+        .delete(`/community/removeMember/${communityId}`)
+        .send({});
+      expect(response.status).toBe(400);
+      expect(response.text).toBe('Missing userId');
+    });
+
+    it('should return 500 if removeMemberFromCommunity returns an error', async () => {
+      jest
+        .spyOn(communityService, 'removeMemberFromCommunity')
+        .mockResolvedValue({ error: 'Remove member error' });
+      const response = await supertest(app)
+        .delete(`/community/removeMember/${communityId}`)
+        .send({ userId });
+      expect(response.status).toBe(500);
+      expect(response.text).toContain('Remove member error');
+    });
+
+    it('should return 500 if populateDocument returns an error', async () => {
+      jest.spyOn(communityService, 'removeMemberFromCommunity').mockResolvedValue(baseCommunity);
+      jest.spyOn(databaseUtil, 'populateDocument').mockResolvedValue({ error: 'Population error' });
+      const response = await supertest(app)
+        .delete(`/community/removeMember/${communityId}`)
+        .send({ userId });
+      expect(response.status).toBe(500);
+      expect(response.text).toContain('Population error');
+    });
+  });
+
+  describe('DELETE /community/removeModerator/:communityId', () => {
+    const communityId = new mongoose.Types.ObjectId().toString();
+    const userId = 'Aaron';
+    const baseCommunity: DatabaseCommunity = {
+      _id: new mongoose.Types.ObjectId(communityId),
+      name: 'Software Lovers',
+      description: 'We love software',
+      members: [],
+      moderators: [userId],
+      memberRequests: [],
+      owner: 'Janie',
+      visibility: 'public',
+      questions: [],
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+    const populatedCommunity: PopulatedDatabaseCommunity = {
+      ...baseCommunity,
+      memberRequests: [],
+    };
+
+    it('should remove a moderator and emit "moderatorRemoved"', async () => {
+      jest.spyOn(communityService, 'removeModeratorFromCommunity').mockResolvedValue(baseCommunity);
+      jest.spyOn(databaseUtil, 'populateDocument').mockResolvedValue(populatedCommunity);
+
+      const response = await supertest(app)
+        .delete(`/community/removeModerator/${communityId}`)
+        .send({ userId });
+      expect(response.status).toBe(200);
+      expect(fakeSocket.emit).toHaveBeenCalledWith('communityUpdate', {
+        community: populatedCommunity,
+        type: 'moderatorRemoved',
+      });
+    });
+
+    it('should return 400 if userId is missing', async () => {
+      const response = await supertest(app)
+        .delete(`/community/removeModerator/${communityId}`)
+        .send({});
+      expect(response.status).toBe(400);
+      expect(response.text).toBe('Missing userId');
+    });
+
+    it('should return 500 if removeModeratorFromCommunity returns an error', async () => {
+      jest
+        .spyOn(communityService, 'removeModeratorFromCommunity')
+        .mockResolvedValue({ error: 'Remove moderator error' });
+      const response = await supertest(app)
+        .delete(`/community/removeModerator/${communityId}`)
+        .send({ userId });
+      expect(response.status).toBe(500);
+      expect(response.text).toContain('Remove moderator error');
+    });
+
+    it('should return 500 if populateDocument returns an error', async () => {
+      jest.spyOn(communityService, 'removeModeratorFromCommunity').mockResolvedValue(baseCommunity);
+      jest.spyOn(databaseUtil, 'populateDocument').mockResolvedValue({ error: 'Population error' });
+      const response = await supertest(app)
+        .delete(`/community/removeModerator/${communityId}`)
+        .send({ userId });
+      expect(response.status).toBe(500);
+      expect(response.text).toContain('Population error');
+    });
+  });
+
+  describe('PATCH /community/updateName/:communityId', () => {
+    const communityId = new mongoose.Types.ObjectId().toString();
+    const newName = 'New Community Name';
+    const updatedCommunity: DatabaseCommunity = {
+      _id: new mongoose.Types.ObjectId(communityId),
+      name: newName,
+      description: 'We love software',
+      members: [],
+      moderators: [],
+      memberRequests: [],
+      owner: 'Janie',
+      visibility: 'public',
+      questions: [],
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+    const populatedCommunity: PopulatedDatabaseCommunity = {
+      ...updatedCommunity,
+      memberRequests: [],
+    };
+
+    it('should update the community name and emit "nameUpdated"', async () => {
+      jest.spyOn(communityService, 'updateCommunityName').mockResolvedValue(updatedCommunity);
+      jest.spyOn(databaseUtil, 'populateDocument').mockResolvedValue(populatedCommunity);
+
+      const response = await supertest(app)
+        .patch(`/community/updateName/${communityId}`)
+        .send({ name: newName });
+      expect(response.status).toBe(200);
+      expect(fakeSocket.emit).toHaveBeenCalledWith('communityUpdate', {
+        community: populatedCommunity,
+        type: 'nameUpdated',
+      });
+    });
+
+    it('should return 400 if name is missing', async () => {
+      const response = await supertest(app).patch(`/community/updateName/${communityId}`).send({});
+      expect(response.status).toBe(400);
+      expect(response.text).toBe('Missing name');
+    });
+
+    it('should return 500 if updateCommunityName returns an error', async () => {
+      jest
+        .spyOn(communityService, 'updateCommunityName')
+        .mockResolvedValue({ error: 'Update error' });
+      const response = await supertest(app)
+        .patch(`/community/updateName/${communityId}`)
+        .send({ name: newName });
+      expect(response.status).toBe(500);
+      expect(response.text).toContain('Update error');
+    });
+
+    it('should return 500 if populateDocument returns an error', async () => {
+      jest.spyOn(communityService, 'updateCommunityName').mockResolvedValue(updatedCommunity);
+      jest.spyOn(databaseUtil, 'populateDocument').mockResolvedValue({ error: 'Population error' });
+      const response = await supertest(app)
+        .patch(`/community/updateName/${communityId}`)
+        .send({ name: newName });
+      expect(response.status).toBe(500);
+      expect(response.text).toContain('Population error');
+    });
+  });
+
+  describe('PATCH /community/updateDescription/:communityId', () => {
+    const communityId = new mongoose.Types.ObjectId().toString();
+    const newDescription = 'New community description';
+    const updatedCommunity: DatabaseCommunity = {
+      _id: new mongoose.Types.ObjectId(communityId),
+      name: 'Software Lovers',
+      description: newDescription,
+      members: [],
+      moderators: [],
+      memberRequests: [],
+      owner: 'Janie',
+      visibility: 'public',
+      questions: [],
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+    const populatedCommunity: PopulatedDatabaseCommunity = {
+      ...updatedCommunity,
+      memberRequests: [],
+    };
+
+    it('should update the community description and emit "descriptionUpdated"', async () => {
+      jest
+        .spyOn(communityService, 'updateCommunityDescription')
+        .mockResolvedValue(updatedCommunity);
+      jest.spyOn(databaseUtil, 'populateDocument').mockResolvedValue(populatedCommunity);
+
+      const response = await supertest(app)
+        .patch(`/community/updateDescription/${communityId}`)
+        .send({ description: newDescription });
+      expect(response.status).toBe(200);
+      expect(fakeSocket.emit).toHaveBeenCalledWith('communityUpdate', {
+        community: populatedCommunity,
+        type: 'descriptionUpdated',
+      });
+    });
+
+    it('should return 400 if description is missing', async () => {
+      const response = await supertest(app)
+        .patch(`/community/updateDescription/${communityId}`)
+        .send({});
+      expect(response.status).toBe(400);
+      expect(response.text).toBe('Missing description');
+    });
+
+    it('should return 500 if updateCommunityDescription returns an error', async () => {
+      jest
+        .spyOn(communityService, 'updateCommunityDescription')
+        .mockResolvedValue({ error: 'Update error' });
+      const response = await supertest(app)
+        .patch(`/community/updateDescription/${communityId}`)
+        .send({ description: newDescription });
+      expect(response.status).toBe(500);
+      expect(response.text).toContain('Update error');
+    });
+
+    it('should return 500 if populateDocument returns an error', async () => {
+      jest
+        .spyOn(communityService, 'updateCommunityDescription')
+        .mockResolvedValue(updatedCommunity);
+      jest.spyOn(databaseUtil, 'populateDocument').mockResolvedValue({ error: 'Population error' });
+      const response = await supertest(app)
+        .patch(`/community/updateDescription/${communityId}`)
+        .send({ description: newDescription });
+      expect(response.status).toBe(500);
+      expect(response.text).toContain('Population error');
+    });
+  });
+});
diff --git a/server/tests/services/community.service.spec.ts b/server/tests/services/community.service.spec.ts
new file mode 100644
index 0000000..d6deca4
--- /dev/null
+++ b/server/tests/services/community.service.spec.ts
@@ -0,0 +1,606 @@
+import {
+  saveCommunity,
+  getCommunity,
+  getCommunities,
+  addMemberToCommunity,
+  addModeratorToCommunity,
+  addMemberRequest,
+  approveMemberRequest,
+  rejectMemberRequest,
+  removeMemberFromCommunity,
+  removeModeratorFromCommunity,
+  updateCommunityName,
+  updateCommunityDescription,
+} from '../../services/community.service';
+import CommunityModel from '../../models/community.model';
+import UserModel from '../../models/users.model';
+import { Community } from '../../types/types';
+
+jest.mock('../../models/community.model');
+jest.mock('../../models/users.model');
+
+describe('Community Service', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('saveCommunity', () => {
+    it('should save and return a community', async () => {
+      const communityPayload: Community = {
+        name: 'Software Lovers',
+        description: 'We love software',
+        members: [],
+        moderators: [],
+        owner: 'Janie',
+        visibility: 'public',
+        memberRequests: [],
+        questions: [],
+      };
+
+      const createdCommunity = { _id: '123', ...communityPayload };
+      (CommunityModel.create as jest.Mock).mockResolvedValue(createdCommunity);
+
+      const result = await saveCommunity(communityPayload);
+      expect(result).toEqual(createdCommunity);
+      expect(CommunityModel.create).toHaveBeenCalledWith(communityPayload);
+    });
+
+    it('should return error when creation fails', async () => {
+      const communityPayload: Community = {
+        name: 'Software Lovers',
+        description: 'We love software',
+        members: [],
+        moderators: [],
+        owner: 'Janie',
+        visibility: 'public',
+        memberRequests: [],
+        questions: [],
+      };
+
+      (CommunityModel.create as jest.Mock).mockRejectedValue(new Error('Creation failed'));
+
+      const result = await saveCommunity(communityPayload);
+      expect(result).toEqual({ error: 'Error saving community: Creation failed' });
+    });
+  });
+
+  describe('getCommunity', () => {
+    it('should return community if found', async () => {
+      const communityData = {
+        _id: '123',
+        name: 'Software Lovers',
+        description: 'We love software',
+        members: [],
+        moderators: [],
+        owner: 'Janie',
+        visibility: 'public',
+        memberRequests: [],
+        questions: [],
+      };
+      (CommunityModel.findById as jest.Mock).mockResolvedValue(communityData);
+
+      const result = await getCommunity('123');
+      expect(result).toEqual(communityData);
+      expect(CommunityModel.findById).toHaveBeenCalledWith('123');
+    });
+
+    it('should return error if community not found', async () => {
+      (CommunityModel.findById as jest.Mock).mockResolvedValue(null);
+
+      const result = await getCommunity('123');
+      expect(result).toEqual({ error: 'Error retrieving community: Community not found' });
+    });
+
+    it('should return error if findById throws an error', async () => {
+      (CommunityModel.findById as jest.Mock).mockRejectedValue(new Error('DB error'));
+
+      const result = await getCommunity('123');
+      expect(result).toEqual({ error: 'Error retrieving community: DB error' });
+    });
+  });
+
+  describe('addMemberToCommunity', () => {
+    const communityId = '123';
+    const userId = 'Aaron';
+
+    it('should add member to community if user exists and is not already a member', async () => {
+      const userDoc = { _id: userId };
+      (UserModel.findById as jest.Mock).mockResolvedValue(userDoc);
+
+      const updatedCommunity = {
+        _id: communityId,
+        name: 'Software Lovers',
+        description: 'We love software',
+        members: [userId],
+        moderators: [],
+        owner: 'Janie',
+        visibility: 'public',
+        memberRequests: [],
+        questions: [],
+      };
+      (CommunityModel.findOneAndUpdate as jest.Mock).mockResolvedValue(updatedCommunity);
+
+      const result = await addMemberToCommunity(communityId, userId);
+      expect(result).toEqual(updatedCommunity);
+    });
+
+    it('should return error if user does not exist', async () => {
+      (UserModel.findById as jest.Mock).mockResolvedValue(null);
+      const result = await addMemberToCommunity(communityId, userId);
+      expect(result).toEqual({ error: 'Error adding member to community: User does not exist.' });
+    });
+
+    it('should return error if community not found or user already a member', async () => {
+      const userDoc = { _id: userId };
+      (UserModel.findById as jest.Mock).mockResolvedValue(userDoc);
+      (CommunityModel.findOneAndUpdate as jest.Mock).mockResolvedValue(null);
+
+      const result = await addMemberToCommunity(communityId, userId);
+      expect(result).toEqual({
+        error: 'Error adding member to community: Community not found or user already a member.',
+      });
+    });
+  });
+
+  describe('addModeratorToCommunity', () => {
+    const communityId = '123';
+    const userId = 'Aaron';
+
+    it('should add moderator if user exists, is a member, and is not already a moderator', async () => {
+      const userDoc = { _id: userId };
+      (UserModel.findById as jest.Mock).mockResolvedValue(userDoc);
+
+      const communityDoc = {
+        _id: communityId,
+        name: 'Software Lovers',
+        description: 'We love software',
+        members: [userId],
+        moderators: [],
+        owner: 'Janie',
+        visibility: 'public',
+        memberRequests: [],
+        questions: [],
+      };
+      (CommunityModel.findById as jest.Mock).mockResolvedValue(communityDoc);
+
+      const updatedCommunity = {
+        ...communityDoc,
+        moderators: [userId],
+      };
+      (CommunityModel.findOneAndUpdate as jest.Mock).mockResolvedValue(updatedCommunity);
+
+      const result = await addModeratorToCommunity(communityId, userId);
+      expect(result).toEqual(updatedCommunity);
+    });
+
+    it('should return error if user does not exist', async () => {
+      (UserModel.findById as jest.Mock).mockResolvedValue(null);
+
+      const result = await addModeratorToCommunity(communityId, userId);
+      expect(result).toEqual({
+        error: 'Error adding moderator to community: User does not exist.',
+      });
+    });
+
+    it('should return error if user is not a member', async () => {
+      const userDoc = { _id: userId };
+      (UserModel.findById as jest.Mock).mockResolvedValue(userDoc);
+
+      const communityDoc = {
+        _id: communityId,
+        name: 'Software Lovers',
+        description: 'We love software',
+        members: [],
+        moderators: [],
+        owner: 'Janie',
+        visibility: 'public',
+        memberRequests: [],
+        questions: [],
+      };
+      (CommunityModel.findById as jest.Mock).mockResolvedValue(communityDoc);
+
+      const result = await addModeratorToCommunity(communityId, userId);
+      expect(result).toEqual({
+        error:
+          'Error adding moderator to community: User must be a member before being promoted to moderator.',
+      });
+    });
+
+    it('should return error if community not found', async () => {
+      (UserModel.findById as jest.Mock).mockResolvedValue({ _id: userId });
+      (CommunityModel.findById as jest.Mock).mockResolvedValue(null);
+
+      const result = await addModeratorToCommunity(communityId, userId);
+      expect(result).toEqual({
+        error: 'Error adding moderator to community: Community not found.',
+      });
+    });
+
+    it('should return error if user is already a moderator', async () => {
+      (UserModel.findById as jest.Mock).mockResolvedValue({ _id: userId });
+
+      const communityDoc = {
+        _id: communityId,
+        name: 'Software Lovers',
+        description: 'We love software',
+        members: [userId],
+        moderators: [userId],
+        owner: 'Janie',
+        visibility: 'public',
+        memberRequests: [],
+        questions: [],
+      };
+      (CommunityModel.findById as jest.Mock).mockResolvedValue(communityDoc);
+
+      (CommunityModel.findOneAndUpdate as jest.Mock).mockResolvedValue(null);
+
+      const result = await addModeratorToCommunity(communityId, userId);
+      expect(result).toEqual({
+        error: 'Error adding moderator to community: User is already a moderator.',
+      });
+    });
+  });
+
+  describe('addMemberRequest', () => {
+    const communityId = '123';
+    const userId = 'Aaron';
+
+    it('should add member request if community is private, user exists, and request not already exists', async () => {
+      const community = {
+        _id: communityId,
+        name: 'Software Lovers',
+        description: 'We love software',
+        visibility: 'private',
+        memberRequests: [],
+        members: [],
+        moderators: [],
+        owner: 'Janie',
+        questions: [],
+      };
+      (CommunityModel.findById as jest.Mock).mockResolvedValue(community);
+
+      const userDoc = { _id: userId };
+      (UserModel.findById as jest.Mock).mockResolvedValue(userDoc);
+
+      const updatedCommunity = {
+        _id: communityId,
+        name: 'Software Lovers',
+        description: 'We love software',
+        visibility: 'private',
+        memberRequests: [{ userId, requestedAt: new Date() }],
+        members: [],
+        moderators: [],
+        owner: 'Janie',
+        questions: [],
+      };
+      (CommunityModel.findOneAndUpdate as jest.Mock).mockResolvedValue(updatedCommunity);
+
+      const result = await addMemberRequest(communityId, userId);
+      expect(result).toEqual(updatedCommunity);
+    });
+
+    it('should return error if community not found', async () => {
+      (CommunityModel.findById as jest.Mock).mockResolvedValue(null);
+
+      const result = await addMemberRequest('123', userId);
+      expect(result).toEqual({ error: 'Error adding member request: Community not found' });
+    });
+
+    it('should return error if community is public', async () => {
+      const community = {
+        _id: communityId,
+        name: 'Software Lovers',
+        description: 'We love software',
+        visibility: 'public',
+        memberRequests: [],
+        members: [],
+        moderators: [],
+        owner: 'Janie',
+        questions: [],
+      };
+      (CommunityModel.findById as jest.Mock).mockResolvedValue(community);
+
+      const result = await addMemberRequest(communityId, userId);
+      expect(result).toEqual({ error: 'Error adding member request: Community is public' });
+    });
+
+    it('should return error if user does not exist', async () => {
+      const community = {
+        _id: communityId,
+        name: 'Software Lovers',
+        description: 'We love software',
+        visibility: 'private',
+        memberRequests: [],
+        members: [],
+        moderators: [],
+        owner: 'Janie',
+        questions: [],
+      };
+      (CommunityModel.findById as jest.Mock).mockResolvedValue(community);
+      (UserModel.findById as jest.Mock).mockResolvedValue(null);
+
+      const result = await addMemberRequest(communityId, userId);
+      expect(result).toEqual({ error: 'Error adding member request: User does not exist.' });
+    });
+
+    it('should return error if update fails', async () => {
+      const community = {
+        _id: communityId,
+        name: 'Software Lovers',
+        description: 'We love software',
+        visibility: 'private',
+        memberRequests: [],
+        members: [],
+        moderators: [],
+        owner: 'Janie',
+        questions: [],
+      };
+      (CommunityModel.findById as jest.Mock).mockResolvedValue(community);
+
+      const userDoc = { _id: userId };
+      (UserModel.findById as jest.Mock).mockResolvedValue(userDoc);
+      (CommunityModel.findOneAndUpdate as jest.Mock).mockResolvedValue(null);
+
+      const result = await addMemberRequest(communityId, userId);
+      expect(result).toEqual({
+        error: 'Error adding member request: Community not found or request already exists.',
+      });
+    });
+  });
+
+  describe('approveMemberRequest', () => {
+    const communityId = '123';
+    const userId = 'Aaron';
+
+    it('should approve a member request and add the user to members', async () => {
+      const updatedCommunity = {
+        _id: communityId,
+        name: 'Software Lovers',
+        description: 'We love software',
+        members: [userId],
+        memberRequests: [],
+        moderators: [],
+        owner: 'Janie',
+        visibility: 'private',
+        questions: [],
+      };
+      (CommunityModel.findOneAndUpdate as jest.Mock).mockResolvedValue(updatedCommunity);
+
+      const result = await approveMemberRequest(communityId, userId);
+      expect(result).toEqual(updatedCommunity);
+    });
+
+    it('should return error if update fails', async () => {
+      (CommunityModel.findOneAndUpdate as jest.Mock).mockResolvedValue(null);
+      const result = await approveMemberRequest(communityId, userId);
+      expect(result).toEqual({
+        error:
+          'Error approving member request: Community not found or no pending member request for this user.',
+      });
+    });
+  });
+
+  describe('rejectMemberRequest', () => {
+    const communityId = '123';
+    const userId = 'Aaron';
+
+    it('should reject a member request by removing it', async () => {
+      const updatedCommunity = {
+        _id: communityId,
+        name: 'Software Lovers',
+        description: 'We love software',
+        memberRequests: [],
+        members: [],
+        moderators: [],
+        owner: 'Janie',
+        visibility: 'private',
+        questions: [],
+      };
+      (CommunityModel.findOneAndUpdate as jest.Mock).mockResolvedValue(updatedCommunity);
+
+      const result = await rejectMemberRequest(communityId, userId);
+      expect(result).toEqual(updatedCommunity);
+    });
+
+    it('should return error if update fails', async () => {
+      (CommunityModel.findOneAndUpdate as jest.Mock).mockResolvedValue(null);
+      const result = await rejectMemberRequest(communityId, userId);
+      expect(result).toEqual({
+        error:
+          'Error rejecting member request: Community not found or no pending member request for this user.',
+      });
+    });
+  });
+
+  describe('removeMemberFromCommunity', () => {
+    const communityId = '123';
+    const userId = 'Aaron';
+
+    it('should remove a member from the community', async () => {
+      const updatedCommunity = {
+        _id: communityId,
+        name: 'Software Lovers',
+        description: 'We love software',
+        members: [],
+        moderators: [],
+        owner: 'Janie',
+        visibility: 'public',
+        memberRequests: [],
+        questions: [],
+      };
+      (CommunityModel.findOneAndUpdate as jest.Mock).mockResolvedValue(updatedCommunity);
+
+      const result = await removeMemberFromCommunity(communityId, userId);
+      expect(result).toEqual(updatedCommunity);
+    });
+
+    it('should return error if update fails', async () => {
+      (CommunityModel.findOneAndUpdate as jest.Mock).mockResolvedValue(null);
+      const result = await removeMemberFromCommunity(communityId, userId);
+      expect(result).toEqual({
+        error: 'Error removing member from community: Community not found.',
+      });
+    });
+  });
+
+  describe('removeModeratorFromCommunity', () => {
+    const communityId = '123';
+    const userId = 'Aaron';
+
+    it('should remove a moderator from the community', async () => {
+      const updatedCommunity = {
+        _id: communityId,
+        name: 'Software Lovers',
+        description: 'We love software',
+        moderators: [],
+        members: [],
+        owner: 'Janie',
+        visibility: 'public',
+        memberRequests: [],
+        questions: [],
+      };
+      (CommunityModel.findOneAndUpdate as jest.Mock).mockResolvedValue(updatedCommunity);
+
+      const result = await removeModeratorFromCommunity(communityId, userId);
+      expect(result).toEqual(updatedCommunity);
+    });
+
+    it('should return error if update fails', async () => {
+      (CommunityModel.findOneAndUpdate as jest.Mock).mockResolvedValue(null);
+      const result = await removeModeratorFromCommunity(communityId, userId);
+      expect(result).toEqual({
+        error: 'Error removing moderator from community: Community not found.',
+      });
+    });
+  });
+
+  describe('updateCommunityName', () => {
+    const communityId = '123';
+    const newName = 'New community name';
+
+    it('should update the community name and return the updated community', async () => {
+      const updatedCommunity = {
+        _id: communityId,
+        name: newName,
+        description: 'We love software',
+        members: [],
+        moderators: [],
+        owner: 'Janie',
+        visibility: 'public',
+        memberRequests: [],
+        questions: [],
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      };
+      (CommunityModel.findOneAndUpdate as jest.Mock).mockResolvedValue(updatedCommunity);
+
+      const result = await updateCommunityName(communityId, newName);
+      expect(result).toEqual(updatedCommunity);
+      expect(CommunityModel.findOneAndUpdate).toHaveBeenCalledWith(
+        { _id: communityId },
+        { $set: { name: newName } },
+        { new: true },
+      );
+    });
+
+    it('should return error if community is not found', async () => {
+      (CommunityModel.findOneAndUpdate as jest.Mock).mockResolvedValue(null);
+      const result = await updateCommunityName(communityId, newName);
+      expect(result).toEqual({ error: 'Error updating community name: Community not found.' });
+    });
+
+    it('should return error if findOneAndUpdate throws an error', async () => {
+      (CommunityModel.findOneAndUpdate as jest.Mock).mockRejectedValue(new Error('DB error'));
+      const result = await updateCommunityName(communityId, newName);
+      expect(result).toEqual({ error: 'Error updating community name: DB error' });
+    });
+  });
+
+  describe('updateCommunityDescription', () => {
+    const communityId = '123';
+    const newDescription = 'New community description';
+
+    it('should update the community description and return the updated community', async () => {
+      const updatedCommunity = {
+        _id: communityId,
+        name: 'Software Lovers',
+        description: newDescription,
+        members: [],
+        moderators: [],
+        owner: 'Janie',
+        visibility: 'public',
+        memberRequests: [],
+        questions: [],
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      };
+      (CommunityModel.findOneAndUpdate as jest.Mock).mockResolvedValue(updatedCommunity);
+
+      const result = await updateCommunityDescription(communityId, newDescription);
+      expect(result).toEqual(updatedCommunity);
+      expect(CommunityModel.findOneAndUpdate).toHaveBeenCalledWith(
+        { _id: communityId },
+        { $set: { description: newDescription } },
+        { new: true },
+      );
+    });
+
+    it('should return error if community is not found', async () => {
+      (CommunityModel.findOneAndUpdate as jest.Mock).mockResolvedValue(null);
+      const result = await updateCommunityDescription(communityId, newDescription);
+      expect(result).toEqual({
+        error: 'Error updating community description: Community not found.',
+      });
+    });
+
+    it('should return error if findOneAndUpdate throws an error', async () => {
+      (CommunityModel.findOneAndUpdate as jest.Mock).mockRejectedValue(new Error('DB error'));
+      const result = await updateCommunityDescription(communityId, newDescription);
+      expect(result).toEqual({ error: 'Error updating community description: DB error' });
+    });
+  });
+
+  describe('getAllCommunities', () => {
+    it('should return an array of communities if found', async () => {
+      const communities = [
+        {
+          _id: '123',
+          name: 'Software Lovers',
+          description: 'We love software',
+          members: [],
+          moderators: [],
+          owner: 'Janie',
+          visibility: 'public',
+          memberRequests: [],
+          questions: [],
+          createdAt: new Date(),
+          updatedAt: new Date(),
+        },
+        {
+          _id: '456',
+          name: 'Hardware Lovers',
+          description: 'We love hardware',
+          members: [],
+          moderators: [],
+          owner: 'Aaron',
+          visibility: 'private',
+          memberRequests: [],
+          questions: [],
+          createdAt: new Date(),
+          updatedAt: new Date(),
+        },
+      ];
+      (CommunityModel.find as jest.Mock).mockResolvedValue(communities);
+
+      const result = await getCommunities();
+      expect(result).toEqual(communities);
+    });
+
+    it('should return an error message if find fails', async () => {
+      (CommunityModel.find as jest.Mock).mockRejectedValue(new Error('DB error'));
+
+      const result = await getCommunities();
+      expect(result).toEqual([{ error: 'Error retrieving communities: DB error' }]);
+    });
+  });
+});
diff --git a/server/tests/utils/database.util.spec.ts b/server/tests/utils/database.util.spec.ts
index 8ee0d7c..5212630 100644
--- a/server/tests/utils/database.util.spec.ts
+++ b/server/tests/utils/database.util.spec.ts
@@ -3,6 +3,7 @@ import QuestionModel from '../../models/questions.model';
 import AnswerModel from '../../models/answers.model';
 import ChatModel from '../../models/chat.model';
 import UserModel from '../../models/users.model';
+import CommunityModel from '../../models/community.model';
 
 jest.mock('../../models/questions.model');
 jest.mock('../../models/answers.model');
@@ -11,6 +12,7 @@ jest.mock('../../models/messages.model');
 jest.mock('../../models/users.model');
 jest.mock('../../models/tags.model');
 jest.mock('../../models/comments.model');
+jest.mock('../../models/community.model');
 
 describe('populateDocument', () => {
   afterEach(() => {
@@ -43,9 +45,7 @@ describe('populateDocument', () => {
     const result = await populateDocument(questionID, 'question');
 
     expect(result).toEqual({
-      error: `Error when fetching and populating a document: Failed to fetch and populate question with ID: ${
-        questionID
-      }`,
+      error: `Error when fetching and populating a document: Failed to fetch and populate question with ID: ${questionID}`,
     });
   });
 
@@ -85,9 +85,7 @@ describe('populateDocument', () => {
     const result = await populateDocument(answerID, 'answer');
 
     expect(result).toEqual({
-      error: `Error when fetching and populating a document: Failed to fetch and populate answer with ID: ${
-        answerID
-      }`,
+      error: `Error when fetching and populating a document: Failed to fetch and populate answer with ID: ${answerID}`,
     });
   });
 
@@ -182,8 +180,76 @@ describe('populateDocument', () => {
     });
   });
 
-  it('should return an error message if type is invalid', async () => {
-    const invalidType = 'invalidType' as 'question' | 'answer' | 'chat';
+  it('should fetch and populate a community document', async () => {
+    const communityId = 'communityId';
+    const mockCommunityDoc = {
+      _id: communityId,
+      members: ['member1'],
+      moderators: ['mod1'],
+      owner: 'owner123',
+      visibility: 'private',
+      memberRequests: [{ userId: 'user123', requestedAt: new Date('2025-01-01') }],
+      questions: [],
+      toObject() {
+        return { ...this };
+      },
+    };
+    const mockUser = {
+      _id: 'user123',
+      username: 'user123',
+    };
+
+    (CommunityModel.findOne as jest.Mock).mockReturnValue({
+      populate: jest.fn().mockResolvedValue(mockCommunityDoc),
+    });
+    (UserModel.findOne as jest.Mock).mockResolvedValue(mockUser);
+
+    const result = await populateDocument(communityId, 'community');
+
+    expect(CommunityModel.findOne).toHaveBeenCalledWith({ _id: communityId });
+    expect(result).toEqual({
+      _id: communityId,
+      members: ['member1'],
+      moderators: ['mod1'],
+      owner: 'owner123',
+      visibility: 'private',
+      memberRequests: [
+        {
+          userId: 'user123',
+          requestedAt: new Date('2025-01-01'),
+          user: { _id: 'user123', username: 'user123' },
+        },
+      ],
+      questions: [],
+    });
+  });
+
+  it('should throw an error if community document is not found', async () => {
+    (CommunityModel.findOne as jest.Mock).mockReturnValue({
+      populate: jest.fn().mockResolvedValue(null),
+    });
+    const communityID = 'invalidCommunityId';
+    const result = await populateDocument(communityID, 'community');
+
+    expect(result).toEqual({
+      error: `Error when fetching and populating a document: Community not found`,
+    });
+  });
+
+  it('should throw an error if fetching a community document throws an error', async () => {
+    (CommunityModel.findOne as jest.Mock).mockImplementation(() => {
+      throw new Error('Database error');
+    });
+
+    const result = await populateDocument('communityId', 'community');
+
+    expect(result).toEqual({
+      error: 'Error when fetching and populating a document: Database error',
+    });
+  });
+
+  it('should return an error message if an invalid type is provided', async () => {
+    const invalidType = 'invalidType' as 'question' | 'answer' | 'chat' | 'community';
     const result = await populateDocument('someId', invalidType);
     expect(result).toEqual({
       error: 'Error when fetching and populating a document: Invalid type provided.',
diff --git a/server/utils/database.util.ts b/server/utils/database.util.ts
index 76dd50e..415dccf 100644
--- a/server/utils/database.util.ts
+++ b/server/utils/database.util.ts
@@ -7,6 +7,7 @@ import {
   PopulatedDatabaseAnswer,
   PopulatedDatabaseChat,
   PopulatedDatabaseQuestion,
+  PopulatedDatabaseCommunity,
 } from '../types/types';
 import AnswerModel from '../models/answers.model';
 import QuestionModel from '../models/questions.model';
@@ -15,6 +16,7 @@ import CommentModel from '../models/comments.model';
 import ChatModel from '../models/chat.model';
 import UserModel from '../models/users.model';
 import MessageModel from '../models/messages.model';
+import CommunityModel from '../models/community.model';
 
 /**
  * Fetches and populates a question document with its related tags, answers, and comments.
@@ -106,20 +108,75 @@ const populateChat = async (chatID: string): Promise<PopulatedDatabaseChat | nul
   return transformedChat;
 };
 
+/**
+ * Fetches and populates a community document with its member requests populated with user details.
+ *
+ * @param {string} communityID - The ID of the community to fetch.
+ * @returns {Promise<PopulatedDatabaseCommunity | null>} - The populated community document, or null if not found.
+ */
+const populateCommunity = async (
+  communityID: string,
+): Promise<PopulatedDatabaseCommunity | null> => {
+  const communityDoc = await CommunityModel.findOne({ _id: communityID }).populate([
+    {
+      path: 'questions',
+      model: QuestionModel,
+      populate: [
+        { path: 'tags', model: 'Tag' },
+        {
+          path: 'answers',
+          model: 'Answer',
+          populate: { path: 'comments', model: 'Comment' },
+        },
+        { path: 'comments', model: 'Comment' },
+      ],
+    },
+  ]);
+
+  if (!communityDoc) {
+    throw new Error('Community not found');
+  }
+
+  const communityObj = communityDoc.toObject();
+
+  if ('toObject' in communityObj) {
+    delete communityObj.toObject;
+  }
+
+  if (communityObj.memberRequests && Array.isArray(communityObj.memberRequests)) {
+    const populatedMemberRequests = await Promise.all(
+      communityObj.memberRequests.map(async (mr: { userId: string; requestedAt: Date }) => {
+        const userDoc = await UserModel.findOne({ _id: mr.userId });
+        return {
+          ...mr,
+          user: userDoc ? { _id: userDoc._id, username: userDoc.username } : null,
+        };
+      }),
+    );
+    communityObj.memberRequests = populatedMemberRequests;
+  }
+
+  return communityObj as PopulatedDatabaseCommunity;
+};
+
 /**
  * Fetches and populates a question, answer, or chat document based on the provided ID and type.
  *
  * @param {string | undefined} id - The ID of the document to fetch.
- * @param {'question' | 'answer' | 'chat'} type - Specifies the type of document to fetch.
- * @returns {Promise<QuestionResponse | AnswerResponse | ChatResponse>} - A promise resolving to the populated document or an error message if the operation fails.
+ * @param {'question' | 'answer' | 'chat' | 'community'} type - Specifies the type of document to fetch.
+ * @returns {Promise<PopulatedDatabaseQuestion | PopulatedDatabaseAnswer | PopulatedDatabaseChat | PopulatedDatabaseCommunity>} - A promise resolving to the populated document or an error message if the operation fails.
  */
 // eslint-disable is for testing purposes only, so that Jest spy functions can be used.
 // eslint-disable-next-line import/prefer-default-export
 export const populateDocument = async (
   id: string,
-  type: 'question' | 'answer' | 'chat',
+  type: 'question' | 'answer' | 'chat' | 'community',
 ): Promise<
-  PopulatedDatabaseAnswer | PopulatedDatabaseChat | PopulatedDatabaseQuestion | { error: string }
+  | PopulatedDatabaseAnswer
+  | PopulatedDatabaseChat
+  | PopulatedDatabaseQuestion
+  | PopulatedDatabaseCommunity
+  | { error: string }
 > => {
   try {
     if (!id) {
@@ -138,6 +195,9 @@ export const populateDocument = async (
       case 'chat':
         result = await populateChat(id);
         break;
+      case 'community':
+        result = await populateCommunity(id);
+        break;
       default:
         throw new Error('Invalid type provided.');
     }
diff --git a/shared/types/community.d.ts b/shared/types/community.d.ts
new file mode 100644
index 0000000..86f48ed
--- /dev/null
+++ b/shared/types/community.d.ts
@@ -0,0 +1,116 @@
+import { ObjectId } from 'mongodb';
+import { Request } from 'express';
+import { DatabaseUser } from './user';
+import { DatabaseQuestion } from './question';
+
+/**
+ * Represents a request to join a community.
+ * - `userId`: The ID of the user requesting to join.
+ * - `requestedAt`: Timestamp for when the request was made.
+ */
+export interface MemberRequest {
+  userId: string;
+  requestedAt: Date;
+}
+
+/**
+ * Extends a member request with populated user details.
+ * - `user`: Populated user details (from `DatabaseUser`), or `null` if not found.
+ */
+export interface PopulatedMemberRequest extends MemberRequest {
+  user: Pick<DatabaseUser, '_id' | 'username'> | null;
+}
+
+/**
+ * Represents a Community.
+ * - `name`: The name of the community.
+ * - `description`: A description of the community.
+ * - `members`: Array of userIDs (as strings) representing the community members.
+ * - `moderators`: Array of userIDs (as strings) representing the community moderators.
+ * - `owner`: The userID of the community owner.
+ * - `visibility`: The community's visibility, either 'public' or 'private'.
+ * - `memberRequests`: Array of member requests for joining the community.
+ * - `questions`: Array of questions associated with the community.
+ */
+export interface Community {
+  name: string;
+  description?: string;
+  members: string[];
+  moderators: string[];
+  owner: string;
+  visibility: 'public' | 'private';
+  memberRequests: MemberRequest[];
+  questions: DatabaseQuestion[];
+}
+
+/**
+ * Represents a Community stored in the database.
+ * - `_id`: Unique identifier for the community.
+ * - `name`: The name of the community.
+ * - `description`: A description of the community.
+ * - `members`: Array of userIDs (strings).
+ * - `moderators`: Array of userIDs (strings).
+ * - `owner`: The userID of the community owner.
+ * - `visibility`: The visibility of the community.
+ * - `memberRequests`: Array of member requests.
+ * - `questions`: Array of questions associated with the community.
+ * - `createdAt`: Timestamp when the community was created.
+ * - `updatedAt`: Timestamp when the community was last updated.
+ */
+export interface DatabaseCommunity extends Community {
+  _id: ObjectId;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+/**
+ * Represents a fully populated Community from the database.
+ * - `memberRequests`: Array of populated `PopulatedMemberRequest` objects.
+ * - `questions`: Array of populated `DatabaseQuestion` objects.
+ */
+export interface PopulatedDatabaseCommunity extends Omit<DatabaseCommunity, 'memberRequests'> {
+  memberRequests: PopulatedMemberRequest[];
+}
+
+/**
+ * Express request for creating a community.
+ * - `body`: Contains the community details for creation.
+ */
+export interface CreateCommunityRequest extends Request {
+  body: Community;
+}
+
+/**
+ * Custom request type for routes that require a `communityId` in the params.
+ */
+export interface CommunityIdRequest extends Request {
+  params: {
+    communityId: string;
+  };
+}
+
+/**
+ * Express request for updating a community's name.
+ * - `body`: Contains the new `name` for the community.
+ */
+export interface UpdateCommunityNameRequest extends Request {
+  body: {
+    name: string;
+  };
+}
+
+/**
+ * Express request for updating a community's biography/description.
+ * - `body`: Contains the new `description` for the community.
+ */
+export interface UpdateCommunityDescriptionRequest extends Request {
+  body: {
+    description: string;
+  };
+}
+
+/**
+ * A type representing the possible responses for a Community operation.
+ * - Either a `DatabaseCommunity` object or an error message.
+ */
+export type CommunityResponse = DatabaseCommunity | { error: string };
diff --git a/shared/types/socket.d.ts b/shared/types/socket.d.ts
index a25fc84..93f718e 100644
--- a/shared/types/socket.d.ts
+++ b/shared/types/socket.d.ts
@@ -4,6 +4,7 @@ import { DatabaseMessage } from './message';
 import { PopulatedDatabaseQuestion } from './question';
 import { SafeDatabaseUser } from './user';
 import { BaseMove, GameInstance, GameInstanceID, GameMove, GameState } from './game';
+import { PopulatedDatabaseCommunity } from './community';
 
 /**
  * Payload for an answer update event.
@@ -93,6 +94,22 @@ export interface GameMovePayload {
   move: GameMove<BaseMove>;
 }
 
+export interface CommunityUpdatePayload {
+  community: PopulatedDatabaseCommunity;
+  type:
+    | 'created'
+    | 'updated'
+    | 'memberAdded'
+    | 'memberRemoved'
+    | 'moderatorAdded'
+    | 'moderatorRemoved'
+    | 'memberRequestAdded'
+    | 'memberRequestApproved'
+    | 'memberRequestRejected'
+    | 'nameUpdated'
+    | 'descriptionUpdated';
+}
+
 /**
  * Interface representing the events the client can emit to the server.
  * - `makeMove`: Client can emit a move in the game.
@@ -121,6 +138,7 @@ export interface ClientToServerEvents {
  * - `gameUpdate`: Server sends updated game state.
  * - `gameError`: Server sends error message related to game operation.
  * - `chatUpdate`: Server sends updated chat.
+ * - `communityUpdate`: Server sends updated community.
  */
 export interface ServerToClientEvents {
   questionUpdate: (question: PopulatedDatabaseQuestion) => void;
@@ -133,4 +151,5 @@ export interface ServerToClientEvents {
   gameUpdate: (game: GameUpdatePayload) => void;
   gameError: (error: GameErrorPayload) => void;
   chatUpdate: (chat: ChatUpdatePayload) => void;
+  communityUpdate: (community: CommunityUpdatePayload) => void;
 }
diff --git a/shared/types/types.d.ts b/shared/types/types.d.ts
index 37de3e9..04ba6eb 100644
--- a/shared/types/types.d.ts
+++ b/shared/types/types.d.ts
@@ -7,3 +7,4 @@ export * from './question';
 export * from './socket';
 export * from './tag';
 export * from './user';
+export * from './community';
diff --git a/src/components/ui/color-mode.jsx b/src/components/ui/color-mode.jsx
new file mode 100644
index 0000000..b1481cc
--- /dev/null
+++ b/src/components/ui/color-mode.jsx
@@ -0,0 +1,89 @@
+'use client'
+
+import { ClientOnly, IconButton, Skeleton, Span } from '@chakra-ui/react'
+import { ThemeProvider, useTheme } from 'next-themes'
+
+import * as React from 'react'
+import { LuMoon, LuSun } from 'react-icons/lu'
+
+export function ColorModeProvider(props) {
+  return (
+    <ThemeProvider attribute='class' disableTransitionOnChange {...props} />
+  )
+}
+
+export function useColorMode() {
+  const { resolvedTheme, setTheme } = useTheme()
+  const toggleColorMode = () => {
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
+  }
+  return {
+    colorMode: resolvedTheme,
+    setColorMode: setTheme,
+    toggleColorMode,
+  }
+}
+
+export function useColorModeValue(light, dark) {
+  const { colorMode } = useColorMode()
+  return colorMode === 'dark' ? dark : light
+}
+
+export function ColorModeIcon() {
+  const { colorMode } = useColorMode()
+  return colorMode === 'dark' ? <LuMoon /> : <LuSun />
+}
+
+export const ColorModeButton = React.forwardRef(
+  function ColorModeButton(props, ref) {
+    const { toggleColorMode } = useColorMode()
+    return (
+      <ClientOnly fallback={<Skeleton boxSize='8' />}>
+        <IconButton
+          onClick={toggleColorMode}
+          variant='ghost'
+          aria-label='Toggle color mode'
+          size='sm'
+          ref={ref}
+          {...props}
+          css={{
+            _icon: {
+              width: '5',
+              height: '5',
+            },
+          }}
+        >
+          <ColorModeIcon />
+        </IconButton>
+      </ClientOnly>
+    )
+  },
+)
+
+export const LightMode = React.forwardRef(function LightMode(props, ref) {
+  return (
+    <Span
+      color='fg'
+      display='contents'
+      className='chakra-theme light'
+      colorPalette='gray'
+      colorScheme='light'
+      ref={ref}
+      {...props}
+    />
+  )
+})
+
+export const DarkMode = React.forwardRef(function DarkMode(props, ref) {
+  return (
+    <Span
+      color='fg'
+      display='contents'
+      className='chakra-theme dark'
+      colorPalette='gray'
+      colorScheme='dark'
+      ref={ref}
+      {...props}
+    />
+  )
+})
diff --git a/src/components/ui/provider.jsx b/src/components/ui/provider.jsx
new file mode 100644
index 0000000..80e3e01
--- /dev/null
+++ b/src/components/ui/provider.jsx
@@ -0,0 +1,12 @@
+'use client'
+
+import { ChakraProvider, defaultSystem } from '@chakra-ui/react'
+import { ColorModeProvider } from './color-mode'
+
+export function Provider(props) {
+  return (
+    <ChakraProvider value={defaultSystem}>
+      <ColorModeProvider {...props} />
+    </ChakraProvider>
+  )
+}
diff --git a/src/components/ui/toaster.jsx b/src/components/ui/toaster.jsx
new file mode 100644
index 0000000..93d3f6d
--- /dev/null
+++ b/src/components/ui/toaster.jsx
@@ -0,0 +1,70 @@
+function _optionalChain(ops) {
+  let lastAccessLHS = undefined
+  let value = ops[0]
+  let i = 1
+  while (i < ops.length) {
+    const op = ops[i]
+    const fn = ops[i + 1]
+    i += 2
+    if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
+      return undefined
+    }
+    if (op === 'access' || op === 'optionalAccess') {
+      lastAccessLHS = value
+      value = fn(value)
+    } else if (op === 'call' || op === 'optionalCall') {
+      value = fn((...args) => value.call(lastAccessLHS, ...args))
+      lastAccessLHS = undefined
+    }
+  }
+  return value
+}
+;('use client')
+
+import {
+  Toaster as ChakraToaster,
+  Portal,
+  Spinner,
+  Stack,
+  Toast,
+  createToaster,
+} from '@chakra-ui/react'
+
+export const toaster = createToaster({
+  placement: 'bottom-end',
+  pauseOnPageIdle: true,
+})
+
+export const Toaster = () => {
+  return (
+    <Portal>
+      <ChakraToaster toaster={toaster} insetInline={{ mdDown: '4' }}>
+        {(toast) => (
+          <Toast.Root width={{ md: 'sm' }}>
+            {toast.type === 'loading' ? (
+              <Spinner size='sm' color='blue.solid' />
+            ) : (
+              <Toast.Indicator />
+            )}
+            <Stack gap='1' flex='1' maxWidth='100%'>
+              {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
+              {toast.description && (
+                <Toast.Description>{toast.description}</Toast.Description>
+              )}
+            </Stack>
+            {toast.action && (
+              <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
+            )}
+            {_optionalChain([
+              toast,
+              'access',
+              (_) => _.meta,
+              'optionalAccess',
+              (_2) => _2.closable,
+            ]) && <Toast.CloseTrigger />}
+          </Toast.Root>
+        )}
+      </ChakraToaster>
+    </Portal>
+  )
+}
diff --git a/src/components/ui/tooltip.jsx b/src/components/ui/tooltip.jsx
new file mode 100644
index 0000000..122df1e
--- /dev/null
+++ b/src/components/ui/tooltip.jsx
@@ -0,0 +1,35 @@
+import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react";
+import * as React from "react";
+
+export const Tooltip = React.forwardRef(function Tooltip(props, ref) {
+  const {
+    showArrow,
+    children,
+    disabled,
+    portalled = true,
+    content,
+    contentProps,
+    portalRef,
+    ...rest
+  } = props;
+
+  if (disabled) return children;
+
+  return (
+    <ChakraTooltip.Root {...rest}>
+      <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
+      <Portal disabled={!portalled} container={portalRef}>
+        <ChakraTooltip.Positioner>
+          <ChakraTooltip.Content ref={ref} {...contentProps}>
+            {showArrow && (
+              <ChakraTooltip.Arrow>
+                <ChakraTooltip.ArrowTip />
+              </ChakraTooltip.Arrow>
+            )}
+            {content}
+          </ChakraTooltip.Content>
+        </ChakraTooltip.Positioner>
+      </Portal>
+    </ChakraTooltip.Root>
+  );
+});