diff --git a/src/apis/dashboards/mockData.ts b/src/apis/dashboards/mockData.ts
new file mode 100644
index 0000000..d2ddc3f
--- /dev/null
+++ b/src/apis/dashboards/mockData.ts
@@ -0,0 +1,148 @@
+export const mockDashboardData = {
+  dashboards: [
+    {
+      id: 1,
+      title: '비브리지',
+      color: 'green-30',
+      createdAt: '2025-02-05T09:23:00.603Z',
+      updatedAt: '2025-02-05T09:23:00.603Z',
+      createdByMe: true, // hasCrown이 true였던 경우
+      userId: 0,
+    },
+    {
+      id: 2,
+      title: '코드잇',
+      color: 'blue-20',
+      createdAt: '2025-02-05T09:23:00.603Z',
+      updatedAt: '2025-02-05T09:23:00.603Z',
+      createdByMe: true,
+      userId: 0,
+    },
+    {
+      id: 3,
+      title: '3분기 계획',
+      color: 'green-30',
+      createdAt: '2025-02-05T09:23:00.603Z',
+      updatedAt: '2025-02-05T09:23:00.603Z',
+      createdByMe: false,
+      userId: 0,
+    },
+    {
+      id: 4,
+      title: '회의록',
+      color: 'blue-20',
+      createdAt: '2025-02-05T09:23:00.603Z',
+      updatedAt: '2025-02-05T09:23:00.603Z',
+      createdByMe: false,
+      userId: 0,
+    },
+    {
+      id: 5,
+      title: '중요 문서함',
+      color: 'pink-20',
+      createdAt: '2025-02-05T09:23:00.603Z',
+      updatedAt: '2025-02-05T09:23:00.603Z',
+      createdByMe: false,
+      userId: 0,
+    },
+    {
+      id: 6,
+      title: '비브리지',
+      color: 'blue-20',
+      createdAt: '2025-02-05T09:23:00.603Z',
+      updatedAt: '2025-02-05T09:23:00.603Z',
+      createdByMe: true,
+      userId: 0,
+    },
+    {
+      id: 7,
+      title: '코드잇',
+      color: 'purple',
+      createdAt: '2025-02-05T09:23:00.603Z',
+      updatedAt: '2025-02-05T09:23:00.603Z',
+      createdByMe: true,
+      userId: 0,
+    },
+    {
+      id: 8,
+      title: '3분기 계획',
+      color: 'blue-20',
+      createdAt: '2025-02-05T09:23:00.603Z',
+      updatedAt: '2025-02-05T09:23:00.603Z',
+      createdByMe: false,
+      userId: 0,
+    },
+    {
+      id: 9,
+      title: '회의록',
+      color: 'purple',
+      createdAt: '2025-02-05T09:23:00.603Z',
+      updatedAt: '2025-02-05T09:23:00.603Z',
+      createdByMe: false,
+      userId: 0,
+    },
+    {
+      id: 10,
+      title: '중요 문서함',
+      color: 'blue-20',
+      createdAt: '2025-02-05T09:23:00.603Z',
+      updatedAt: '2025-02-05T09:23:00.603Z',
+      createdByMe: false,
+      userId: 0,
+    },
+    {
+      id: 11,
+      title: '비브리지',
+      color: 'blue-20',
+      createdAt: '2025-02-05T09:23:00.603Z',
+      updatedAt: '2025-02-05T09:23:00.603Z',
+      createdByMe: true,
+      userId: 0,
+    },
+    {
+      id: 12,
+      title: '코드잇',
+      color: 'pink-20',
+      createdAt: '2025-02-05T09:23:00.603Z',
+      updatedAt: '2025-02-05T09:23:00.603Z',
+      createdByMe: true,
+      userId: 0,
+    },
+    {
+      id: 13,
+      title: '3분기 계획',
+      color: 'orange-20',
+      createdAt: '2025-02-05T09:23:00.603Z',
+      updatedAt: '2025-02-05T09:23:00.603Z',
+      createdByMe: false,
+      userId: 0,
+    },
+    {
+      id: 14,
+      title: '회의록',
+      color: 'blue-20',
+      createdAt: '2025-02-05T09:23:00.603Z',
+      updatedAt: '2025-02-05T09:23:00.603Z',
+      createdByMe: false,
+      userId: 0,
+    },
+    {
+      id: 15,
+      title: '중요 문서함',
+      color: 'blue-20',
+      createdAt: '2025-02-05T09:23:00.603Z',
+      updatedAt: '2025-02-05T09:23:00.603Z',
+      createdByMe: false,
+      userId: 0,
+    },
+    {
+      id: 16,
+      title: '중요 테스트',
+      color: 'blue-20',
+      createdAt: '2025-02-05T09:23:00.603Z',
+      updatedAt: '2025-02-05T09:23:00.603Z',
+      createdByMe: false,
+      userId: 0,
+    },
+  ],
+};
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 8161250..aa2f856 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -6,38 +6,30 @@ import { UseChunkPagination } from '@/hooks/useChunkPagination';
 import PaginationControls from '../pagination/PaginationControls';
 import SidebarLogo from './SidebarLogo';
 import SidebarItemList from './SidebarItemList';
-
 import add_box from '@/assets/icons/add_box.svg';
 
+// TODO : 실제 api 요청으로 변경
+import { mockDashboardData } from '@/apis/dashboards/mockData';
+
 interface ItemList {
   id: number;
-  name: string;
-  colorClass: 'green-30' | 'blue-20' | 'orange-20' | 'purple' | 'pink-20';
-  hasCrown?: boolean;
+  title: string;
+  color: 'green-30' | 'blue-20' | 'orange-20' | 'purple' | 'pink-20';
+  createdByMe: boolean;
 }
 
-const mockBoardData: ItemList[] = [
-  { id: 1, name: '비브리지', colorClass: 'green-30', hasCrown: true },
-  { id: 2, name: '코드잇', colorClass: 'blue-20', hasCrown: true },
-  { id: 3, name: '3분기 계획', colorClass: 'green-30' },
-  { id: 4, name: '회의록', colorClass: 'blue-20' },
-  { id: 5, name: '중요 문서함', colorClass: 'pink-20' },
-  { id: 6, name: '비브리지', colorClass: 'blue-20', hasCrown: true },
-  { id: 7, name: '코드잇', colorClass: 'purple', hasCrown: true },
-  { id: 8, name: '3분기 계획', colorClass: 'blue-20' },
-  { id: 9, name: '회의록', colorClass: 'purple' },
-  { id: 10, name: '중요 문서함', colorClass: 'blue-20' },
-  { id: 11, name: '비브리지', colorClass: 'blue-20', hasCrown: true },
-  { id: 12, name: '코드잇', colorClass: 'pink-20', hasCrown: true },
-  { id: 13, name: '3분기 계획', colorClass: 'orange-20' },
-  { id: 14, name: '회의록', colorClass: 'blue-20' },
-  { id: 15, name: '중요 문서함', colorClass: 'blue-20' },
-  { id: 16, name: '중요 테스트', colorClass: 'blue-20' },
-];
+const dashboardsForSidebar: ItemList[] = mockDashboardData.dashboards.map((dash) => {
+  return {
+    id: dash.id,
+    title: dash.title,
+    color: dash.color as ItemList['color'],
+    createdByMe: dash.createdByMe,
+  };
+});
 
 export default function Sidebar() {
   const { currentGroups, totalPages, canGoPrev, canGoNext, handlePrev, handleNext } = UseChunkPagination({
-    items: mockBoardData,
+    items: dashboardsForSidebar,
     chunkSize: 5,
     maxGroupsPerPage: 3,
   });
diff --git a/src/components/Sidebar/SidebarItemList.tsx b/src/components/Sidebar/SidebarItemList.tsx
index ace406b..a1b0117 100644
--- a/src/components/Sidebar/SidebarItemList.tsx
+++ b/src/components/Sidebar/SidebarItemList.tsx
@@ -1,12 +1,10 @@
-import Image from 'next/image';
-import Dot from './Dot';
-import crown from '@/assets/icons/crown.svg';
+import MyDashboardCard from '../mydashboard-card/MyDashboardCard';
 
 interface ItemList {
   id: number;
-  name: string;
-  colorClass: 'green-30' | 'blue-20' | 'orange-20' | 'purple' | 'pink-20';
-  hasCrown?: boolean;
+  title: string;
+  color: 'green-30' | 'blue-20' | 'orange-20' | 'purple' | 'pink-20';
+  createdByMe: boolean | undefined;
 }
 
 interface SidebarItemListProps {
@@ -19,16 +17,7 @@ export default function SidebarItemList({ currentGroups }: SidebarItemListProps)
       {currentGroups.map((group, groupIndex) => (
         <div key={groupIndex} className='flex flex-col gap-2'>
           {group.map((item) => (
-            <div key={item.id} className='flex justify-center gap-2.5 rounded-md p-3 md:justify-start md:hover:bg-violet-10'>
-              <div className='flex items-center gap-4'>
-                <Dot colorClass={item.colorClass} />
-
-                <div className='hidden gap-1.5 md:flex'>
-                  <span className='text-2lg font-medium text-gray-50'>{item.name}</span>
-                  {item.hasCrown && <Image src={crown} width={17} height={14} alt='crown' />}
-                </div>
-              </div>
-            </div>
+            <MyDashboardCard key={item.id} title={item.title} color={item.color} createdByMe={item.createdByMe} variant='sidebar' />
           ))}
         </div>
       ))}
diff --git a/src/components/mydashboard-card/MyDashboardCard.tsx b/src/components/mydashboard-card/MyDashboardCard.tsx
new file mode 100644
index 0000000..49d705f
--- /dev/null
+++ b/src/components/mydashboard-card/MyDashboardCard.tsx
@@ -0,0 +1,36 @@
+import { cn } from '@/utils/helper';
+import Dot from '../Sidebar/Dot';
+import Image from 'next/image';
+import crown from '@/assets/icons/crown.svg';
+import right_arrow from '@/assets/icons/right_arrow.svg';
+
+interface MyDashboardCardProps {
+  title: string;
+  color: 'green-30' | 'blue-20' | 'orange-20' | 'purple' | 'pink-20';
+  createdByMe: boolean | undefined;
+  variant?: 'sidebar' | 'card';
+}
+
+export default function MyDashboardCard({ title, color, createdByMe, variant }: MyDashboardCardProps) {
+  const containerClass = cn(
+    'flex rounded-md ',
+    variant === 'sidebar' && 'justify-center gap-2.5 p-3 md:justify-start md:hover:bg-violet-10',
+    variant === 'card' && 'items-center justify-between border border-gray-30 hover:shadow-md px-5 py-[22px] w-[260px] md:w-[247px] lg:w-[332px]',
+  );
+
+  const textContainerClass = cn(variant === 'sidebar' ? 'hidden md:flex gap-1.5' : 'flex gap-1.5');
+
+  const titleClass = cn(variant === 'sidebar' && 'text-lg lg:text-2lg text-gray-50 font-medium', variant === 'card' && 'text-lg sm:text-md font-semibold text-[#333236]');
+  return (
+    <div className={containerClass}>
+      <div className='flex items-center gap-2.5'>
+        <Dot colorClass={color} />
+        <div className={textContainerClass}>
+          <span className={titleClass}>{title}</span>
+          {createdByMe && <Image src={crown} width={17} height={14} alt='crown' />}
+        </div>
+      </div>
+      {variant === 'card' && <Image src={right_arrow} width={7} height={13} alt='right_arrow' />}
+    </div>
+  );
+}