diff --git a/src/apis/workspace/workspace.queries.ts b/src/apis/workspace/workspace.queries.ts
index ec65d19..1f526ec 100644
--- a/src/apis/workspace/workspace.queries.ts
+++ b/src/apis/workspace/workspace.queries.ts
@@ -1,12 +1,14 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient, keepPreviousData } from '@tanstack/react-query';
 import { useSession } from 'next-auth/react';
 import { workspaceService } from './workspace.service';
-import { InviteWorkspaceRequest } from './workspace.type';
+import { CreateWorkspaceRequest, InviteWorkspaceRequest } from './workspace.type';
 
 export const workspaceKeys = {
   all: ['workspaces'] as const,
   my: ['workspaces', 'my'] as const,
   detail: (workspaceId: number) => ['workspaces', workspaceId] as const,
+  invitations: ['workspaces', 'invitations'] as const,
+  adminName: (workspaceId: number) => ['workspaces', workspaceId, 'admin-name'] as const,
 };
 
 export const useGetMyWorkspaces = () => {
@@ -17,6 +19,21 @@ export const useGetMyWorkspaces = () => {
     queryKey: workspaceKeys.my,
     queryFn: () => workspaceService.getMyWorkspaces(accessToken!),
     enabled: !!accessToken,
+    staleTime: 1000 * 60,
+    placeholderData: keepPreviousData,
+  });
+};
+
+export const useGetInvitations = () => {
+  const { data: session } = useSession();
+  const accessToken = session?.accessToken as string | undefined;
+
+  return useQuery({
+    queryKey: workspaceKeys.invitations,
+    queryFn: () => workspaceService.getInvitations(accessToken!),
+    enabled: !!accessToken,
+    staleTime: 1000 * 60,
+    placeholderData: keepPreviousData,
   });
 };
 
@@ -31,6 +48,32 @@ export const useGetWorkspace = (workspaceId: number) => {
   });
 };
 
+export const useGetAdminName = (workspaceId: number) => {
+  const { data: session } = useSession();
+  const accessToken = session?.accessToken as string | undefined;
+
+  return useQuery({
+    queryKey: workspaceKeys.adminName(workspaceId),
+    queryFn: () => workspaceService.getAdminName(workspaceId, accessToken!),
+    enabled: !!accessToken && !!workspaceId,
+    staleTime: 1000 * 60 * 5,
+  });
+};
+
+export const useCreateWorkspace = () => {
+  const { data: session } = useSession();
+  const accessToken = session?.accessToken as string | undefined;
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (body: CreateWorkspaceRequest) =>
+      workspaceService.createWorkspace(body, accessToken!),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: workspaceKeys.my });
+    },
+  });
+};
+
 export const useInviteWorkspace = (workspaceId: number) => {
   const { data: session } = useSession();
   const accessToken = session?.accessToken as string | undefined;
@@ -44,3 +87,32 @@ export const useInviteWorkspace = (workspaceId: number) => {
     },
   });
 };
+
+export const useAcceptInvitation = () => {
+  const { data: session } = useSession();
+  const accessToken = session?.accessToken as string | undefined;
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (membershipId: number) =>
+      workspaceService.acceptInvitation(membershipId, accessToken!),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: workspaceKeys.my });
+      queryClient.invalidateQueries({ queryKey: workspaceKeys.invitations });
+    },
+  });
+};
+
+export const useRejectInvitation = () => {
+  const { data: session } = useSession();
+  const accessToken = session?.accessToken as string | undefined;
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (membershipId: number) =>
+      workspaceService.rejectInvitation(membershipId, accessToken!),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: workspaceKeys.invitations });
+    },
+  });
+};
diff --git a/src/apis/workspace/workspace.service.ts b/src/apis/workspace/workspace.service.ts
index cfb517f..925a897 100644
--- a/src/apis/workspace/workspace.service.ts
+++ b/src/apis/workspace/workspace.service.ts
@@ -3,6 +3,11 @@ import {
   WorkspaceDetailResponse,
   InviteWorkspaceRequest,
   InviteWorkspaceResponse,
+  CreateWorkspaceRequest,
+  CreateWorkspaceResponse,
+  InvitationListResponse,
+  AcceptRejectInvitationResponse,
+  AdminNameResponse,
 } from './workspace.type';
 
 const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
@@ -10,9 +15,7 @@ const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
 export const workspaceService = {
   getMyWorkspaces: async (accessToken: string): Promise<WorkspaceListResponse> => {
     const res = await fetch(`${BASE_URL}/api/v1/workspaces/my`, {
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-      },
+      headers: { Authorization: `Bearer ${accessToken}` },
     });
 
     if (!res.ok) throw new Error('워크스페이스 목록 조회 실패');
@@ -24,13 +27,28 @@ export const workspaceService = {
     accessToken: string,
   ): Promise<WorkspaceDetailResponse> => {
     const res = await fetch(`${BASE_URL}/api/v1/workspaces/${workspaceId}`, {
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+
+    if (res.status === 404) throw new Error('워크스페이스를 찾을 수 없습니다.');
+    if (!res.ok) throw new Error('워크스페이스 조회 실패');
+    return res.json();
+  },
+
+  createWorkspace: async (
+    body: CreateWorkspaceRequest,
+    accessToken: string,
+  ): Promise<CreateWorkspaceResponse> => {
+    const res = await fetch(`${BASE_URL}/api/v1/workspaces`, {
+      method: 'POST',
       headers: {
+        'Content-Type': 'application/json',
         Authorization: `Bearer ${accessToken}`,
       },
+      body: JSON.stringify(body),
     });
 
-    if (res.status === 404) throw new Error('워크스페이스를 찾을 수 없습니다.');
-    if (!res.ok) throw new Error('워크스페이스 조회 실패');
+    if (!res.ok) throw new Error('워크스페이스 생성 실패');
     return res.json();
   },
 
@@ -53,4 +71,48 @@ export const workspaceService = {
     if (!res.ok) throw new Error('초대에 실패했습니다. 이메일을 확인해 주세요.');
     return res.json();
   },
+
+  getInvitations: async (accessToken: string): Promise<InvitationListResponse> => {
+    const res = await fetch(`${BASE_URL}/api/v1/workspaces/invitations`, {
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+
+    if (!res.ok) throw new Error('초대 목록 조회 실패');
+    return res.json();
+  },
+
+  acceptInvitation: async (
+    membershipId: number,
+    accessToken: string,
+  ): Promise<AcceptRejectInvitationResponse> => {
+    const res = await fetch(`${BASE_URL}/api/v1/workspaces/invitations/${membershipId}/accept`, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+
+    if (!res.ok) throw new Error('초대 수락 실패');
+    return res.json();
+  },
+
+  rejectInvitation: async (
+    membershipId: number,
+    accessToken: string,
+  ): Promise<AcceptRejectInvitationResponse> => {
+    const res = await fetch(`${BASE_URL}/api/v1/workspaces/invitations/${membershipId}/reject`, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+
+    if (!res.ok) throw new Error('초대 거절 실패');
+    return res.json();
+  },
+
+  getAdminName: async (workspaceId: number, accessToken: string): Promise<AdminNameResponse> => {
+    const res = await fetch(`${BASE_URL}/api/v1/workspaces/${workspaceId}/admin-name`, {
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+
+    if (!res.ok) throw new Error('어드민 이름 조회 실패');
+    return res.json();
+  },
 };
diff --git a/src/apis/workspace/workspace.type.ts b/src/apis/workspace/workspace.type.ts
index 6564291..d618527 100644
--- a/src/apis/workspace/workspace.type.ts
+++ b/src/apis/workspace/workspace.type.ts
@@ -46,3 +46,56 @@ export interface InviteWorkspaceResponse {
     traceId: string;
   };
 }
+
+export interface CreateWorkspaceRequest {
+  name: string;
+  color: string;
+}
+
+export interface CreateWorkspaceResponse {
+  success: boolean;
+  data: number;
+  meta: {
+    timestamp: string;
+    traceId: string;
+  };
+}
+
+export interface InvitationItem {
+  color: string;
+  membershipId: number;
+  role: WorkspaceRole;
+  workspaceId: number;
+  workspaceName: string;
+}
+
+export interface InvitationListResponse {
+  success: boolean;
+  totalCount: number;
+  nextCursor: number | null;
+  data: InvitationItem[];
+  meta: {
+    timestamp: string;
+    traceId: string;
+  };
+}
+
+export interface AcceptRejectInvitationResponse {
+  success: boolean;
+  data: null;
+  meta: {
+    timestamp: string;
+    traceId: string;
+  };
+}
+
+export interface AdminNameResponse {
+  success: boolean;
+  data: {
+    adminName: string;
+  };
+  meta: {
+    timestamp: string;
+    traceId: string;
+  };
+}
diff --git a/src/app/(after-login)/workspace/page.tsx b/src/app/(after-login)/workspace/page.tsx
index f1169fb..75c4f21 100644
--- a/src/app/(after-login)/workspace/page.tsx
+++ b/src/app/(after-login)/workspace/page.tsx
@@ -1,3 +1,250 @@
+'use client';
+
+import { toast } from 'react-toastify';
+import Link from 'next/link';
+import {
+  useGetMyWorkspaces,
+  useGetInvitations,
+  useGetAdminName,
+  useAcceptInvitation,
+  useRejectInvitation,
+} from '@/apis/workspace/workspace.queries';
+import Button from '@/components/Buttons';
+import Icon from '@/components/Icon';
+import WorkspaceCard from '@/components/WorkspaceCard';
+import { useModalStore } from '@/store/modal.store';
+
+function WorkspaceListSkeleton() {
+  return (
+    <>
+      {Array.from({ length: 5 }).map((_, i) => (
+        <div
+          key={i}
+          className='h-14.5 animate-pulse rounded-lg border border-gray-200 bg-gray-100 md:h-17 lg:h-17.5'
+        />
+      ))}
+    </>
+  );
+}
+
+function InvitationSkeleton() {
+  return (
+    <>
+      {Array.from({ length: 3 }).map((_, i) => (
+        <div key={i} className='flex flex-col gap-3 border-b border-gray-200 py-4 md:hidden'>
+          <div className='flex flex-col gap-1.5'>
+            <div className='flex gap-3'>
+              <div className='h-5 w-10 shrink-0 animate-pulse rounded bg-gray-100' />
+              <div className='h-5 w-24 animate-pulse rounded bg-gray-200' />
+            </div>
+
+            <div className='flex gap-3'>
+              <div className='h-5 w-10 shrink-0 animate-pulse rounded bg-gray-100' />
+              <div className='h-5 w-16 animate-pulse rounded bg-gray-200' />
+            </div>
+          </div>
+
+          <div className='flex gap-1.5'>
+            <div className='h-8 flex-1 animate-pulse rounded-md bg-gray-200' />
+            <div className='h-8 flex-1 animate-pulse rounded-md bg-gray-200' />
+          </div>
+        </div>
+      ))}
+      {Array.from({ length: 3 }).map((_, i) => (
+        <div
+          key={i}
+          className='hidden grid-cols-[2fr_2fr_1fr] items-center gap-4 border-b border-gray-200 py-4 md:grid'
+        >
+          <div className='h-4 w-24 animate-pulse rounded bg-gray-200' />
+          <div className='h-4 w-16 animate-pulse rounded bg-gray-200' />
+          <div className='flex gap-2.5'>
+            <div className='h-8 flex-1 animate-pulse rounded-md bg-gray-200' />
+            <div className='h-8 flex-1 animate-pulse rounded-md bg-gray-200' />
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}
+
+function AdminName({ workspaceId }: { workspaceId: number }) {
+  const { data, isLoading } = useGetAdminName(workspaceId);
+  if (isLoading) return <div className='h-4 w-16 animate-pulse rounded bg-gray-200' />;
+  return <span>{data?.data.adminName ?? '-'}</span>;
+}
+
 export default function Page() {
-  return <div>내 워크스페이스 페이지</div>;
+  const open = useModalStore((s) => s.open);
+
+  const { data: wsData } = useGetMyWorkspaces();
+  const { data: invData } = useGetInvitations();
+
+  const { mutate: acceptInvitation } = useAcceptInvitation();
+  const { mutate: rejectInvitation } = useRejectInvitation();
+
+  const workspaces = wsData?.data ?? [];
+  const invitations = invData?.data ?? [];
+
+  const handleAccept = (membershipId: number) => {
+    open({
+      type: 'confirm',
+      message: '초대를 수락하시겠습니까?',
+      onConfirm: () =>
+        new Promise<void>((resolve, reject) => {
+          acceptInvitation(membershipId, {
+            onSuccess: () => {
+              toast.success('초대를 수락했습니다.');
+              resolve();
+            },
+            onError: () => {
+              toast.error('초대 수락에 실패했습니다.');
+              reject();
+            },
+          });
+        }),
+    });
+  };
+
+  const handleReject = (membershipId: number) => {
+    open({
+      type: 'confirm',
+      message: '초대를 거절하시겠습니까?',
+      onConfirm: () =>
+        new Promise<void>((resolve, reject) => {
+          rejectInvitation(membershipId, {
+            onSuccess: () => {
+              toast.success('초대를 거절했습니다.');
+              resolve();
+            },
+            onError: () => {
+              toast.error('초대 거절에 실패했습니다.');
+              reject();
+            },
+          });
+        }),
+    });
+  };
+
+  return (
+    <div className='flex flex-col gap-8 overflow-hidden p-6 md:gap-10 md:p-10'>
+      <section className='flex min-h-0 flex-col'>
+        <div className='scrollbar-hide h-64 min-h-0 overflow-y-auto md:h-56 lg:h-38'>
+          <div className='grid grid-cols-1 gap-2 md:grid-cols-2 md:gap-2.5 lg:grid-cols-3 lg:gap-3'>
+            <button
+              onClick={() => open({ type: 'createWorkspace' })}
+              className='text-black-200 flex h-14.5 cursor-pointer items-center gap-3 rounded-lg border border-gray-300 bg-white px-5 md:h-17 lg:h-17.5'
+            >
+              <div className='flex aspect-square h-5 items-center justify-center rounded-sm bg-blue-100 md:h-5.5'>
+                <Icon name='plus' size={18} className='text-blue-200' />
+              </div>
+              <span className='text-md font-semibold md:text-lg'>새로운 워크스페이스</span>
+            </button>
+
+            {!wsData ? (
+              <WorkspaceListSkeleton />
+            ) : (
+              workspaces.map((ws) => (
+                <Link key={ws.workspaceId} href={`/workspace/${ws.workspaceId}`}>
+                  <WorkspaceCard name={ws.workspaceName} color={ws.color} role={ws.role} />
+                </Link>
+              ))
+            )}
+          </div>
+        </div>
+      </section>
+
+      <section className='flex h-111 min-h-0 flex-col gap-4 rounded-lg bg-white px-4 py-6 md:h-134 md:gap-8 md:px-7 md:py-8'>
+        <h2 className='text-black-200 shrink-0 text-lg font-bold md:text-xl'>
+          초대받은 워크스페이스
+        </h2>
+
+        {!invData ? (
+          <InvitationSkeleton />
+        ) : invitations.length === 0 ? (
+          <div className='flex flex-col items-center gap-4 py-16 text-gray-400'>
+            <Icon name='empty' size={64} className='md:h-25 md:w-25' />
+            <p className='md:text-2lg text-sm'>아직 초대받은 워크스페이스가 없어요</p>
+          </div>
+        ) : (
+          <div className='flex min-h-0 flex-col'>
+            <div className='hidden shrink-0 grid-cols-[2fr_2fr_1fr] gap-4 pb-2 text-lg text-gray-400 md:grid'>
+              <span>이름</span>
+              <span>초대자</span>
+              <span className='text-center'>수락 여부</span>
+            </div>
+
+            <div className='scrollbar-hide min-h-0 flex-1 overflow-y-auto'>
+              {invitations.map((inv) => (
+                <div key={inv.membershipId}>
+                  <div className='hidden grid-cols-[2fr_2fr_1fr] items-center gap-4 border-b border-gray-200 py-4 md:grid'>
+                    <span className='text-black-200 text-lg font-medium'>{inv.workspaceName}</span>
+                    <span className='text-black-200 text-lg'>
+                      <AdminName workspaceId={inv.workspaceId} />
+                    </span>
+                    <div className='flex gap-2.5'>
+                      <Button
+                        group='sub'
+                        variant='blue'
+                        size='md'
+                        className='flex-1'
+                        onClick={() => handleAccept(inv.membershipId)}
+                      >
+                        수락
+                      </Button>
+                      <Button
+                        group='sub'
+                        variant='white'
+                        size='md'
+                        className='flex-1'
+                        onClick={() => handleReject(inv.membershipId)}
+                      >
+                        거절
+                      </Button>
+                    </div>
+                  </div>
+
+                  <div className='flex flex-col gap-3 border-b border-gray-200 py-4 md:hidden'>
+                    <div className='flex flex-col gap-0.5'>
+                      <div className='flex gap-3'>
+                        <span className='text-md w-10 shrink-0 text-gray-400'>이름</span>
+                        <span className='text-black-200 text-md font-medium'>
+                          {inv.workspaceName}
+                        </span>
+                      </div>
+                      <div className='flex gap-3'>
+                        <span className='text-md w-10 shrink-0 text-gray-400'>초대자</span>
+                        <span className='text-black-200 text-md'>
+                          <AdminName workspaceId={inv.workspaceId} />
+                        </span>
+                      </div>
+                    </div>
+                    <div className='flex gap-1.5'>
+                      <Button
+                        group='sub'
+                        variant='blue'
+                        size='sm'
+                        onClick={() => handleAccept(inv.membershipId)}
+                        className='flex-1'
+                      >
+                        수락
+                      </Button>
+                      <Button
+                        group='sub'
+                        variant='white'
+                        size='sm'
+                        onClick={() => handleReject(inv.membershipId)}
+                        className='flex-1'
+                      >
+                        거절
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </section>
+    </div>
+  );
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index 51bc365..9b11d94 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -34,3 +34,12 @@ body {
     width: 4px;
   }
 }
+
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
diff --git a/src/components/ColorChips.tsx b/src/components/ColorChips.tsx
index 08b058f..b0f8e19 100644
--- a/src/components/ColorChips.tsx
+++ b/src/components/ColorChips.tsx
@@ -1,21 +1,25 @@
 'use client';
 
-import { useState } from 'react';
 import { cn } from '../utils/cn';
 import OneColorChip from './OneColorChip';
 
-export default function ColorChips() {
-  const [selected, setSelected] = useState<string | null>(null);
-  const colors = ['green', 'purple', 'orange', 'blue', 'pink'];
+const COLORS = ['GREEN', 'PURPLE', 'ORANGE', 'BLUE', 'PINK'] as const;
+export type ChipColor = (typeof COLORS)[number];
 
+interface ColorChipsProps {
+  selected?: string;
+  onSelect?: (color: string) => void;
+}
+
+export default function ColorChips({ selected, onSelect }: ColorChipsProps) {
   return (
     <div role='radiogroup' className={cn('flex gap-2')}>
-      {colors.map((color) => (
+      {COLORS.map((color) => (
         <OneColorChip
           key={color}
           color={color}
           selected={selected === color}
-          onSelect={() => setSelected(color)}
+          onSelect={() => onSelect?.(color)}
           variant='modal'
         />
       ))}
diff --git a/src/components/WorkspaceCard.tsx b/src/components/WorkspaceCard.tsx
index 98c5094..6de7096 100644
--- a/src/components/WorkspaceCard.tsx
+++ b/src/components/WorkspaceCard.tsx
@@ -14,7 +14,7 @@ export default function WorkspaceCard({ name, color, role }: WorkspaceCardProps)
   return (
     <div
       className={cn(
-        'flex h-14.5 cursor-pointer items-center justify-between rounded-lg border border-gray-300 px-5 md:h-17 lg:h-17.5',
+        'flex h-14.5 cursor-pointer items-center justify-between rounded-lg border border-gray-300 bg-white px-5 md:h-17 lg:h-17.5',
       )}
     >
       <div
diff --git a/src/components/modal/contents/CreateWorkspaceModal.tsx b/src/components/modal/contents/CreateWorkspaceModal.tsx
index 42f340a..94e251a 100644
--- a/src/components/modal/contents/CreateWorkspaceModal.tsx
+++ b/src/components/modal/contents/CreateWorkspaceModal.tsx
@@ -1,6 +1,9 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useRouter } from 'next/navigation';
+import { useCreateWorkspace } from '@/apis/workspace/workspace.queries';
 import Button from '@/components/Buttons';
 import ColorChips from '@/components/ColorChips';
 import Input from '@/components/Input';
@@ -11,23 +14,33 @@ type Props = {
 
 export default function CreateWorkspaceModal({ onClose }: Props) {
   const [name, setName] = useState('');
-  const [loading, setLoading] = useState(false);
+  const [color, setColor] = useState('GREEN');
   const inputRef = useRef<HTMLInputElement>(null);
+  const router = useRouter();
+
+  const { mutate: createWorkspace, isPending } = useCreateWorkspace();
 
   useEffect(() => {
     inputRef.current?.focus();
   }, []);
 
-  const handleSubmit = async () => {
+  const handleSubmit = () => {
     if (!name) return;
 
-    try {
-      setLoading(true);
-      console.log('생성:', name);
-      onClose();
-    } finally {
-      setLoading(false);
-    }
+    createWorkspace(
+      { name, color },
+      {
+        onSuccess: (data) => {
+          toast.success('워크스페이스가 생성되었습니다.');
+          onClose();
+          router.push(`/workspace/${data.data}`);
+        },
+        onError: () => {
+          toast.error('워크스페이스 생성에 실패했습니다.');
+          onClose();
+        },
+      },
+    );
   };
 
   return (
@@ -43,9 +56,9 @@ export default function CreateWorkspaceModal({ onClose }: Props) {
           value={name}
           onChange={(e) => setName(e.target.value)}
         />
-
-        <ColorChips />
+        <ColorChips selected={color} onSelect={setColor} />
       </div>
+
       <div className='flex gap-3'>
         <Button
           variant='secondary'
@@ -55,14 +68,13 @@ export default function CreateWorkspaceModal({ onClose }: Props) {
         >
           취소
         </Button>
-
         <Button
           variant='primary'
           size='lg'
           className='flex-1 md:h-12.5 md:text-lg'
           onClick={handleSubmit}
           disabled={!name}
-          loading={loading}
+          loading={isPending}
         >
           생성하기
         </Button>
diff --git a/src/components/sidebar/SidebarContent.tsx b/src/components/sidebar/SidebarContent.tsx
index 13c7e20..c27b452 100644
--- a/src/components/sidebar/SidebarContent.tsx
+++ b/src/components/sidebar/SidebarContent.tsx
@@ -17,7 +17,7 @@ export default function SidebarContent({
 }: Props) {
   if (isLoading) {
     return (
-      <div className='flex-1 overflow-y-auto p-3.25 pt-0 lg:p-6 lg:pt-0'>
+      <div className='scrollbar-hide flex-1 overflow-y-auto p-3.25 pt-0 lg:p-6 lg:pt-0'>
         <SidebarSkeleton />
       </div>
     );
@@ -26,7 +26,7 @@ export default function SidebarContent({
   if (state === 'empty') return null;
 
   return (
-    <div className='flex-1 overflow-y-auto p-3.25 pt-0 lg:p-6 lg:pt-0'>
+    <div className='scrollbar-hide flex-1 overflow-y-auto p-3.25 pt-0 lg:p-6 lg:pt-0'>
       <WorkspaceList workspaces={workspaces} selectedWorkspaceId={selectedWorkspaceId} />
     </div>
   );
diff --git a/src/components/sidebar/SidebarHeader.tsx b/src/components/sidebar/SidebarHeader.tsx
index 82321d8..5dc1e80 100644
--- a/src/components/sidebar/SidebarHeader.tsx
+++ b/src/components/sidebar/SidebarHeader.tsx
@@ -2,17 +2,21 @@
 
 import Image from 'next/image';
 import Link from 'next/link';
+import { useModalStore } from '@/store/modal.store';
 import Icon from '../Icon';
 
 export default function SidebarHeader() {
+  const open = useModalStore((s) => s.open);
+
   return (
     <div>
       <div className='flex flex-col items-center gap-10 py-5 md:hidden'>
         <Link href='/workspace'>
           <Image src='/logo_sm.svg' alt='Re:Mate logo' width={20} height={26} priority />
         </Link>
-
-        <Icon name='addBox' size={20} className='cursor-pointer text-gray-500' />
+        <button onClick={() => open({ type: 'createWorkspace' })}>
+          <Icon name='addBox' size={20} className='cursor-pointer text-gray-500' />
+        </button>
       </div>
 
       <div className='hidden flex-col gap-14 px-3.25 pt-5 pb-4 md:flex lg:px-6'>
@@ -24,8 +28,9 @@ export default function SidebarHeader() {
 
         <div className='flex items-center justify-between'>
           <span className='text-xs font-semibold text-gray-500'>Workspaces</span>
-
-          <Icon name='addBox' size={20} className='cursor-pointer text-gray-500' />
+          <button onClick={() => open({ type: 'createWorkspace' })}>
+            <Icon name='addBox' size={20} className='cursor-pointer text-gray-500' />
+          </button>
         </div>
       </div>
     </div>
diff --git a/src/components/sidebar/SidebarView.tsx b/src/components/sidebar/SidebarView.tsx
index e35ba16..eb6895e 100644
--- a/src/components/sidebar/SidebarView.tsx
+++ b/src/components/sidebar/SidebarView.tsx
@@ -15,9 +15,7 @@ interface SidebarViewProps {
 
 export default function SidebarView({ workspaces, totalCount, isLoading }: SidebarViewProps) {
   const params = useParams();
-
   const selectedWorkspaceId = params?.workspaceId ? Number(params.workspaceId) : undefined;
-
   const state: SidebarState = totalCount === 0 ? 'empty' : selectedWorkspaceId ? 'selected' : 'all';
 
   return (