diff --git a/public/folder.svg b/public/folder.svg
new file mode 100644
index 0000000..fe14dd6
--- /dev/null
+++ b/public/folder.svg
@@ -0,0 +1,3 @@
+<svg width="171" height="171" viewBox="0 0 171 171" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 16C0 7.16344 7.16344 0 16 0H91.3948C97.9271 0 103.803 3.97092 106.24 10.0317L108.841 16.5L112.741 28.9738C113.676 31.1884 115.206 32.999 119.405 32.999H114L114 32.9992H155C163.837 32.9992 171 40.1626 171 48.9992V154.999C171 163.836 163.837 170.999 155 170.999H87.6781C87.6241 171 87.57 171 87.5159 171H16C7.16346 171 0 163.837 0 155V16Z" fill="#2C2E3A"/>
+</svg>
diff --git a/src/components/molecules/topList/TopList.stories.tsx b/src/components/molecules/topList/TopList.stories.tsx
new file mode 100644
index 0000000..e6a8a47
--- /dev/null
+++ b/src/components/molecules/topList/TopList.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TopList } from './TopList';
+
+const meta: Meta<typeof TopList> = {
+  title: 'components/TopList',
+  component: TopList,
+};
+
+export default meta;
+type Story = StoryObj<typeof TopList>;
+
+export const inprogress: Story = {
+  args: {
+    label: 'text',
+    currentCount: 0,
+    totalCount: 8,
+  },
+};
+
+export const complete: Story = {
+  args: {
+    label: 'text',
+    currentCount: 8,
+    totalCount: 8,
+  },
+};
diff --git a/src/components/molecules/topList/TopList.tsx b/src/components/molecules/topList/TopList.tsx
new file mode 100644
index 0000000..1926645
--- /dev/null
+++ b/src/components/molecules/topList/TopList.tsx
@@ -0,0 +1,30 @@
+import Folder from '../../../../public/folder.svg';
+
+interface TopListProps {
+  label: string;
+  currentCount: number;
+  totalCount: number;
+}
+
+export const TopList = ({ label, currentCount, totalCount }: TopListProps) => {
+  const isCompleted = currentCount === totalCount;
+  return (
+    <div className='relative h-[171px] w-[171px]'>
+      <div
+        className={`absolute right-0 top-[7px] flex h-[42px] w-[67px] justify-center rounded-tr-[8px] pt-[3px] ${
+          isCompleted ? 'bg-primary-400' : 'bg-gray-300'
+        }`}
+      >
+        <span className='text-sm font-medium text-gray-900'>
+          {isCompleted ? '완료' : `${currentCount}/${totalCount}`}
+        </span>
+      </div>
+
+      <Folder className='absolute inset-0 z-0' />
+
+      <span className='absolute bottom-5 left-5 text-base font-semibold text-white'>
+        {label}
+      </span>
+    </div>
+  );
+};
diff --git a/src/components/molecules/topList/index.ts b/src/components/molecules/topList/index.ts
new file mode 100644
index 0000000..e03aa6a
--- /dev/null
+++ b/src/components/molecules/topList/index.ts
@@ -0,0 +1 @@
+export { TopList } from './TopList';