diff --git a/frontend/src/admin/pages/[groupId]/workbook/[id]/index.vue b/frontend/src/admin/pages/[groupId]/workbook/[id]/index.vue
new file mode 100644
index 000000000..255c9c9d0
--- /dev/null
+++ b/frontend/src/admin/pages/[groupId]/workbook/[id]/index.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import Button from '@/common/components/Atom/Button.vue'
+import PaginationTable from '@/common/components/Organism/PaginationTable.vue'
+import IconTrash from '~icons/fa/trash-o'
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div class="text-right text-lg font-semibold">SKKUDING</div>
+    <div class="bg-gray h-[1px]"></div>
+    <div class="mt-10">
+      <h1 class="text-gray-dark mr-6 inline text-2xl font-semibold">
+        1주차 과제
+      </h1>
+    </div>
+    <div class="mt-8 flex items-center justify-between">
+      <div>
+        <h2 class="text-xl">Problem List</h2>
+        <div>Total Problem: 10, Total Score: 100</div>
+      </div>
+      <div class="flex">
+        <Button class="mr-8 h-8">+ Create</Button>
+        <Button class="h-8">Import</Button>
+      </div>
+    </div>
+    <PaginationTable
+      :fields="[
+        {
+          key: 'id',
+          label: '#',
+          width: '10%'
+        },
+        {
+          key: 'displayId',
+          label: 'Display ID',
+          width: '20%'
+        },
+        {
+          key: 'title',
+          label: 'Title',
+          width: '20%'
+        },
+        {
+          key: 'difficulty',
+          label: 'Difficulty',
+          width: '15%'
+        },
+        {
+          key: 'lastUpdate',
+          label: 'Last Update',
+          width: '30%'
+        },
+        {
+          key: 'score',
+          label: 'Score',
+          width: '15%'
+        },
+        {
+          key: 'delete',
+          label: 'Delete',
+          width: '10%'
+        }
+      ]"
+      :items="[
+        {
+          id: 1,
+          displayId: 'A',
+          title: '가파른 경사',
+          difficulty: 'Level 1',
+          lastUpdate: '2021-12-31 16:30:45',
+          score: '20',
+          delete: ''
+        }
+      ]"
+      placeholder="keywords"
+      :number-of-pages="3"
+      :no-search-bar="true"
+      :no-pagination="true"
+    >
+      <template #delete="{}">
+        <Button class="flex h-[32px] w-[32px] items-center justify-center">
+          <IconTrash />
+        </Button>
+      </template>
+    </PaginationTable>
+    <h2 class="mt-10 text-xl">Submission List</h2>
+    <PaginationTable
+      :fields="[
+        {
+          key: 'submissionTime',
+          label: 'Submission Time',
+          width: '30%'
+        },
+        {
+          key: 'user',
+          label: 'User',
+          width: '20%'
+        },
+        {
+          key: 'problem',
+          label: 'Problem',
+          width: '30%'
+        },
+        {
+          key: 'language',
+          label: 'Language',
+          width: '20%'
+        },
+        {
+          key: 'result',
+          label: 'Result',
+          width: '20%'
+        }
+      ]"
+      :items="[
+        {
+          submissionTime: '2022-06-08 21:08:24',
+          user: {
+            name: 'goo314',
+            id: '202031234'
+          },
+          problem: '사장님 올 때 메로나',
+          language: 'Python3',
+          result: 'Accepted'
+        },
+        {
+          submissionTime: '2022-06-09 18:22:49',
+          user: {
+            name: 'st42597',
+            id: '2020311119'
+          },
+          problem: '사장님 올 때 메로나',
+          language: 'Python3',
+          result: 'Wrong Answer'
+        }
+      ]"
+      placeholder="keywords"
+      :number-of-pages="3"
+    >
+      <template #user="{ row }">
+        <div class="flex flex-col">
+          <div>{{ row.user.name }}</div>
+          <div>{{ row.user.id }}</div>
+        </div>
+      </template>
+      <template #result="{ row }">
+        <span :class="row.result === 'Accepted' ? 'text-green' : 'text-red'">
+          {{ row.result }}
+        </span>
+      </template>
+    </PaginationTable>
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: admin
+</route>
diff --git a/frontend/src/admin/pages/[groupId]/workbook/create.vue b/frontend/src/admin/pages/[groupId]/workbook/create.vue
deleted file mode 100644
index 346013b5d..000000000
--- a/frontend/src/admin/pages/[groupId]/workbook/create.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-// write script code
-</script>
-
-<template>
-  <div>write template code</div>
-</template>
diff --git a/frontend/src/admin/pages/[groupId]/workbook/index.vue b/frontend/src/admin/pages/[groupId]/workbook/index.vue
index 346013b5d..f9ae5fd62 100644
--- a/frontend/src/admin/pages/[groupId]/workbook/index.vue
+++ b/frontend/src/admin/pages/[groupId]/workbook/index.vue
@@ -1,7 +1,151 @@
 <script setup lang="ts">
-// write script code
+import Button from '@/common/components/Atom/Button.vue'
+import InputItem from '@/common/components/Atom/InputItem.vue'
+import Modal from '@/common/components/Molecule/Modal.vue'
+import Switch from '@/common/components/Molecule/Switch.vue'
+import PaginationTable from '@/common/components/Organism/PaginationTable.vue'
+import TextEditor from '@/common/components/Organism/TextEditor.vue'
+import { NDatePicker } from 'naive-ui'
+import { ref } from 'vue'
+import IconTrash from '~icons/fa/trash-o'
+
+const props = defineProps<{
+  groupId: string
+}>()
+const onoff = ref(true)
+
+const show = ref(false)
+const title = ref('')
+const dateRange = ref<[number, number]>([Date.now(), Date.now()])
+const problemVisibleStat = ref(false)
+const difficultyVisibleStat = ref(false)
 </script>
 
 <template>
-  <div>write template code</div>
+  <div class="flex flex-col">
+    <div class="text-right text-lg font-semibold">SKKUDING</div>
+    <div class="bg-gray h-[1px]"></div>
+    <div class="mt-10">
+      <h1 class="text-gray-dark mr-6 inline text-2xl font-semibold">
+        Workbook List
+      </h1>
+      <Button @click="show = true">+ Create</Button>
+    </div>
+    <PaginationTable
+      :fields="[
+        {
+          key: 'id',
+          label: 'ID',
+          width: '10%'
+        },
+        {
+          key: 'title',
+          label: 'Title',
+          width: '20%'
+        },
+        {
+          key: 'period',
+          label: 'Period',
+          width: '30%'
+        },
+        {
+          key: 'visible',
+          label: 'Visible',
+          width: '15%'
+        },
+        {
+          key: 'created',
+          label: 'Created By',
+          width: '20%'
+        },
+        {
+          key: 'delete',
+          label: 'Delete',
+          width: '20%'
+        }
+      ]"
+      :items="[
+        {
+          id: 1,
+          title: '2주차 과제',
+          period: '2022-08-28 18:00 ~ 2022-08-28 22:00',
+          visible: '',
+          created: '하솔비',
+          delete: ''
+        }
+      ]"
+      placeholder="keywords"
+      :number-of-pages="3"
+      @row-clicked="
+        (data) => $router.push(`/admin/${props.groupId}/workbook/` + data.id)
+      "
+    >
+      <template #visible="{}">
+        <Switch v-model="onoff" @click.stop="" />
+      </template>
+      <template #delete="{}">
+        <Button
+          class="flex h-[32px] w-[32px] items-center justify-center"
+          @click.stop="console.log('test')"
+        >
+          <IconTrash />
+        </Button>
+      </template>
+    </PaginationTable>
+  </div>
+  <Modal v-model="show" class="mx-8 h-[96%] w-full">
+    <div class="overflow-auto px-40">
+      <div class="flex flex-col">
+        <div class="mt-10">
+          <h1 class="text-gray-dark mr-6 inline text-2xl font-semibold">
+            Create Workbook
+          </h1>
+        </div>
+        <div class="bg-gray mt-2 h-[1px]"></div>
+        <div class="mt-10 flex">
+          <div class="w-20 text-lg font-bold">Group</div>
+          <div class="flex items-center">NPC 중급반</div>
+        </div>
+        <div class="mt-6 flex">
+          <div class="w-20 text-lg font-bold">Title</div>
+          <InputItem v-model="title" required placeholder="Title" />
+        </div>
+        <h2 class="mt-8 text-lg font-bold">Description</h2>
+        <TextEditor class="h-[360px] w-full" />
+        <h2 class="mt-8 text-lg font-bold">Period</h2>
+        <div>
+          <NDatePicker
+            v-model:value="dateRange"
+            type="datetimerange"
+            clearable
+          />
+        </div>
+        <div class="mt-10 flex">
+          <Switch v-model="problemVisibleStat" class="mr-8" label="Visible" />
+          <Switch
+            v-model="difficultyVisibleStat"
+            label="Problem Difficulty Visible"
+          />
+        </div>
+        <div class="bg-gray mt-10 h-[1px]"></div>
+        <div class="mt-8 flex justify-end">
+          <div class="flex">
+            <Button
+              class="mr-8 px-4 py-1"
+              color="gray-dark"
+              @click="show = false"
+            >
+              Cancel
+            </Button>
+            <Button class="px-4 py-1">Next</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Modal>
 </template>
+
+<route lang="yaml">
+meta:
+  layout: admin
+</route>
diff --git a/frontend/src/common/components/Organism/TextEditor.vue b/frontend/src/common/components/Organism/TextEditor.vue
index 37c62a4f1..fa894d260 100644
--- a/frontend/src/common/components/Organism/TextEditor.vue
+++ b/frontend/src/common/components/Organism/TextEditor.vue
@@ -26,148 +26,146 @@ const editor = useEditor({
   editorProps: {
     attributes: {
       class:
-        'prose prose-sm md:prose-base ring-gray p-5 outline-none ring-1 focus:outline-none focus:ring'
+        'prose prose-sm md:prose-base ring-gray p-5 outline-none overflow-auto ring-1 focus:outline-none focus:ring h-[300px] min-w-full'
     }
   }
 })
 </script>
 
 <template>
-  <div class="ring-gray w-fit rounded ring-1">
-    <div class="pb-2 text-center sm:max-w-[34rem] md:w-fit md:max-w-none">
-      <ButtonGroup class="mx-2 mt-2 inline-block">
-        <Button
-          :pressed="editor?.isActive('bold')"
-          outline
-          color="gray-dark"
-          @click="editor?.chain().focus().toggleBold().run()"
-        >
-          <IconBold />
-        </Button>
-        <Button
-          :pressed="editor?.isActive('italic')"
-          outline
-          color="gray-dark"
-          @click="editor?.chain().focus().toggleItalic().run()"
-        >
-          <IconItalic />
-        </Button>
-        <Button
-          :pressed="editor?.isActive('strike')"
-          outline
-          color="gray-dark"
-          @click="editor?.chain().focus().toggleStrike().run()"
-        >
-          <IconStrikethrough />
-        </Button>
-        <Button
-          :pressed="editor?.isActive('code')"
-          outline
-          color="gray-dark"
-          @click="editor?.chain().focus().toggleCode().run()"
-        >
-          <IconCode />
-        </Button>
-        <Button
-          outline
-          color="gray-dark"
-          class="p-0.5"
-          @click="editor?.chain().focus().unsetAllMarks().run()"
-        >
-          <IconTextSlash />
-        </Button>
-      </ButtonGroup>
-      <ButtonGroup class="mx-2 mt-2 inline-block">
-        <Button
-          :pressed="editor?.isActive('heading', { level: 1 })"
-          outline
-          color="gray-dark"
-          @click="editor?.chain().focus().toggleHeading({ level: 1 }).run()"
-        >
-          <IconH1 />
-        </Button>
-        <Button
-          :pressed="editor?.isActive('heading', { level: 2 })"
-          outline
-          color="gray-dark"
-          @click="editor?.chain().focus().toggleHeading({ level: 2 }).run()"
-        >
-          <IconH2 />
-        </Button>
-        <Button
-          :pressed="editor?.isActive('paragraph')"
-          outline
-          color="gray-dark"
-          @click="editor?.chain().focus().setParagraph().run()"
-        >
-          <IconParagraph />
-        </Button>
-        <Button
-          :pressed="editor?.isActive('bulletList')"
-          outline
-          color="gray-dark"
-          @click="editor?.chain().focus().toggleBulletList().run()"
-        >
-          <IconListUl />
-        </Button>
-        <Button
-          :pressed="editor?.isActive('orderedList')"
-          outline
-          color="gray-dark"
-          @click="editor?.chain().focus().toggleOrderedList().run()"
-        >
-          <IconList />
-        </Button>
-        <Button
-          :pressed="editor?.isActive('codeBlock')"
-          outline
-          color="gray-dark"
-          @click="editor?.chain().focus().toggleCodeBlock().run()"
-        >
-          <IconCodeSquare />
-        </Button>
-      </ButtonGroup>
-      <ButtonGroup class="mx-2 mt-2 inline-block">
-        <Button
-          outline
-          color="gray-dark"
-          @click="editor?.chain().focus().setHardBreak().run()"
-        >
-          <IconReturn />
-        </Button>
-        <Button
-          :pressed="editor?.isActive('blockquote')"
-          outline
-          color="gray-dark"
-          @click="editor?.chain().focus().toggleBlockquote().run()"
-        >
-          <IconRoundBlockQuote />
-        </Button>
-        <Button
-          outline
-          color="gray-dark"
-          @click="editor?.chain().focus().setHorizontalRule().run()"
-        >
-          <IconHr />
-        </Button>
-      </ButtonGroup>
-      <ButtonGroup class="mx-2 mt-2 inline-block">
-        <Button
-          outline
-          color="gray-dark"
-          @click="editor?.chain().focus().undo().run()"
-        >
-          <IconArrowCounterClockwise />
-        </Button>
-        <Button
-          outline
-          color="gray-dark"
-          @click="editor?.chain().focus().redo().run()"
-        >
-          <IconArrowClockwise />
-        </Button>
-      </ButtonGroup>
-    </div>
-    <editor-content :editor="editor" />
+  <div class="pb-2 text-center sm:max-w-[34rem] md:w-fit md:max-w-none">
+    <ButtonGroup class="mt-2 inline-block">
+      <Button
+        :pressed="editor?.isActive('bold')"
+        outline
+        color="gray-dark"
+        @click="editor?.chain().focus().toggleBold().run()"
+      >
+        <IconBold />
+      </Button>
+      <Button
+        :pressed="editor?.isActive('italic')"
+        outline
+        color="gray-dark"
+        @click="editor?.chain().focus().toggleItalic().run()"
+      >
+        <IconItalic />
+      </Button>
+      <Button
+        :pressed="editor?.isActive('strike')"
+        outline
+        color="gray-dark"
+        @click="editor?.chain().focus().toggleStrike().run()"
+      >
+        <IconStrikethrough />
+      </Button>
+      <Button
+        :pressed="editor?.isActive('code')"
+        outline
+        color="gray-dark"
+        @click="editor?.chain().focus().toggleCode().run()"
+      >
+        <IconCode />
+      </Button>
+      <Button
+        outline
+        color="gray-dark"
+        class="p-0.5"
+        @click="editor?.chain().focus().unsetAllMarks().run()"
+      >
+        <IconTextSlash />
+      </Button>
+    </ButtonGroup>
+    <ButtonGroup class="mx-2 mt-2 inline-block">
+      <Button
+        :pressed="editor?.isActive('heading', { level: 1 })"
+        outline
+        color="gray-dark"
+        @click="editor?.chain().focus().toggleHeading({ level: 1 }).run()"
+      >
+        <IconH1 />
+      </Button>
+      <Button
+        :pressed="editor?.isActive('heading', { level: 2 })"
+        outline
+        color="gray-dark"
+        @click="editor?.chain().focus().toggleHeading({ level: 2 }).run()"
+      >
+        <IconH2 />
+      </Button>
+      <Button
+        :pressed="editor?.isActive('paragraph')"
+        outline
+        color="gray-dark"
+        @click="editor?.chain().focus().setParagraph().run()"
+      >
+        <IconParagraph />
+      </Button>
+      <Button
+        :pressed="editor?.isActive('bulletList')"
+        outline
+        color="gray-dark"
+        @click="editor?.chain().focus().toggleBulletList().run()"
+      >
+        <IconListUl />
+      </Button>
+      <Button
+        :pressed="editor?.isActive('orderedList')"
+        outline
+        color="gray-dark"
+        @click="editor?.chain().focus().toggleOrderedList().run()"
+      >
+        <IconList />
+      </Button>
+      <Button
+        :pressed="editor?.isActive('codeBlock')"
+        outline
+        color="gray-dark"
+        @click="editor?.chain().focus().toggleCodeBlock().run()"
+      >
+        <IconCodeSquare />
+      </Button>
+    </ButtonGroup>
+    <ButtonGroup class="mx-2 mt-2 inline-block">
+      <Button
+        outline
+        color="gray-dark"
+        @click="editor?.chain().focus().setHardBreak().run()"
+      >
+        <IconReturn />
+      </Button>
+      <Button
+        :pressed="editor?.isActive('blockquote')"
+        outline
+        color="gray-dark"
+        @click="editor?.chain().focus().toggleBlockquote().run()"
+      >
+        <IconRoundBlockQuote />
+      </Button>
+      <Button
+        outline
+        color="gray-dark"
+        @click="editor?.chain().focus().setHorizontalRule().run()"
+      >
+        <IconHr />
+      </Button>
+    </ButtonGroup>
+    <ButtonGroup class="mx-2 mt-2 inline-block">
+      <Button
+        outline
+        color="gray-dark"
+        @click="editor?.chain().focus().undo().run()"
+      >
+        <IconArrowCounterClockwise />
+      </Button>
+      <Button
+        outline
+        color="gray-dark"
+        @click="editor?.chain().focus().redo().run()"
+      >
+        <IconArrowClockwise />
+      </Button>
+    </ButtonGroup>
   </div>
+  <editor-content :editor="editor" class="p-0.5" />
 </template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d729e7d0c..a6e21c586 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11737,11 +11737,11 @@ packages:
   /yargs-parser@20.2.4:
     resolution: {integrity: sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==}
     engines: {node: '>=10'}
-    dev: true
 
   /yargs-parser@20.2.9:
     resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
     engines: {node: '>=10'}
+    dev: true
 
   /yargs-parser@21.1.1:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
@@ -11768,7 +11768,7 @@ packages:
       require-directory: 2.1.1
       string-width: 4.2.3
       y18n: 5.0.8
-      yargs-parser: 20.2.9
+      yargs-parser: 20.2.4
 
   /yargs@17.7.2:
     resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}