diff --git a/backend/submission/serializers.py b/backend/submission/serializers.py
index 74ab7d24..aebc978e 100644
--- a/backend/submission/serializers.py
+++ b/backend/submission/serializers.py
@@ -34,6 +34,7 @@ class Meta:
 
 class SubmissionListSerializer(serializers.ModelSerializer):
     problem = serializers.SlugRelatedField(read_only=True, slug_field="_id")
+    problem_id = serializers.SerializerMethodField()
     show_link = serializers.SerializerMethodField()
     user_avatar = serializers.SerializerMethodField()
 
@@ -53,3 +54,6 @@ def get_show_link(self, obj):
 
     def get_user_avatar(self, obj):
         return obj.user_avatar
+
+    def get_problem_id(self, obj):
+        return obj.problem._id
diff --git a/backend/submission/tests.py b/backend/submission/tests.py
index d32cf37b..5978e5bb 100644
--- a/backend/submission/tests.py
+++ b/backend/submission/tests.py
@@ -232,6 +232,10 @@ def test_get_submissions_general(self):
         resp = self.client.get(f"{self.url}?limit=10")
         self.assertSuccess(resp)
         self.assertTrue("results" in resp.data["data"])
+        result = next(
+            sub for sub in resp.data["data"]["results"] if sub["id"] == submission.id
+        )
+        self.assertEqual(result["problem_id"], self.problem._id)
 
     def test_get_submissions_filtered_by_problem(self):
         # 문제 필터링 테스트 (일반 문제만)
@@ -281,10 +285,18 @@ def test_get_submissions_contest_admin_access(self):
 
     def test_get_submissions_contest_myself(self):
         # contest_id 지정, myself=1일때는 조회 성공
-        sub = self.create_submission(self.user, self.contest_problem, contest_id=self.contest["id"])
+        sub = self.create_submission(
+            self.user,
+            self.contest_problem,
+            contest_id=self.contest["id"],
+            result=JudgeStatus.ACCEPTED,
+        )
         resp = self.client.get(f"{self.url}?limit=10&contest_id={self.contest['id']}&myself=1")
         self.assertSuccess(resp)
-        self.assertTrue(any(s["id"] == sub.id for s in resp.data["data"]["results"]))
+        result = next(
+            s for s in resp.data["data"]["results"] if s["id"] == sub.id
+        )
+        self.assertEqual(result["problem_id"], self.contest_problem._id)
 
     def test_get_submissions_with_problem_not_exist(self):
         # problem_id 지정했으나 존재하지 않는 경우 에러 발생
diff --git a/frontend/src/i18n/oj/en-US.js b/frontend/src/i18n/oj/en-US.js
index 8c0c0096..4fa83e0c 100644
--- a/frontend/src/i18n/oj/en-US.js
+++ b/frontend/src/i18n/oj/en-US.js
@@ -30,9 +30,9 @@ export const m = {
   Tags: "태그",
   Show: "Show",
   Submit: "제출",
-  Submitting: "처리중",
-  Judging: "Judging",
-  Wrong_Answer: "Wrong Answer",
+  Submitting: "제출 중",
+  Judging: "채점 중",
+  Wrong_Answer: "오답",
   Statistic: "Statistic",
   Close: "Close",
   View_Contest: "View Contest",
@@ -380,21 +380,24 @@ export const m = {
   // SubmissionList.vue
   When: "제출시각",
   ID: "ID",
-  Time: "Time",
+  Time: "시간",
   Memory: "메모리",
   Author: "작성자",
+  Problem_ID: "문제 번호",
   Option: "옵션",
   Check: "확인",
-  Mine: "사용자",
+  Mine: "내 제출만",
   Submission_Table_Author: "제출자",
-  Accepted: "Accepted",
-  Time_Limit_Exceeded: "Time Limit Exceeded",
-  Memory_Limit_Exceeded: "Memory Limit Exceeded",
-  Runtime_Error: "Runtime Error",
-  System_Error: "System Error",
-  Pending: "Pending",
-  Partial_Accepted: "Partial Accepted",
-  Compile_Error: "Compile Error",
+  Search_Submitter: "제출자 검색",
+  Accepted: "정답",
+  Time_Limit_Exceeded: "시간 초과",
+  Memory_Limit_Exceeded: "메모리 초과",
+  Runtime_Error: "런타임 에러",
+  System_Error: "시스템 에러",
+  Pending: "대기 중",
+  Partial_Accepted: "부분 정답",
+  Compile_Error: "컴파일 에러",
+  Loading: "불러오는 중...",
   Rejudge: "재채점",
   Rejudging: "채점중...",
 
diff --git a/frontend/src/i18n/oj/zh-CN.js b/frontend/src/i18n/oj/zh-CN.js
index 7220c4b7..15b9fecb 100644
--- a/frontend/src/i18n/oj/zh-CN.js
+++ b/frontend/src/i18n/oj/zh-CN.js
@@ -254,6 +254,7 @@ export const m = {
   Option: "选项",
   Mine: "我的",
   Search_Author: "搜索作者",
+  Search_Submitter: "搜索提交者",
   Accepted: "答案正确",
   Time_Limit_Exceeded: "运行超时",
   Memory_Limit_Exceeded: "内存超限",
diff --git a/frontend/src/i18n/oj/zh-TW.js b/frontend/src/i18n/oj/zh-TW.js
index 38318a58..53847eda 100644
--- a/frontend/src/i18n/oj/zh-TW.js
+++ b/frontend/src/i18n/oj/zh-TW.js
@@ -255,6 +255,7 @@ export const m = {
   Option: "選項",
   Mine: "我的",
   Search_Author: "搜尋作者",
+  Search_Submitter: "搜尋提交者",
   Accepted: "答案正確",
   Time_Limit_Exceeded: "超出時間限制",
   Memory_Limit_Exceeded: "超出記憶體空間限制",
diff --git a/frontend/src/pages/oj/App.vue b/frontend/src/pages/oj/App.vue
index 21fa849f..ba3c1596 100644
--- a/frontend/src/pages/oj/App.vue
+++ b/frontend/src/pages/oj/App.vue
@@ -6,13 +6,19 @@
     <template v-else>
       <NavBar></NavBar>
     </template>
-    <div class="content-app" :class="{ ps: isProblemSolving }">
+    <div
+      class="content-app"
+      :class="{ ps: isProblemSolving, 'submission-list-app': isSubmissionList }"
+    >
       <transition name="fadeInUp" mode="out-in">
         <router-view></router-view>
       </transition>
     </div>
     <template v-if="!isProblemSolving">
-      <div class="footer-dummy"></div>
+      <div
+        class="footer-dummy"
+        :class="{ 'submission-list-footer-dummy': isSubmissionList }"
+      ></div>
       <CSEPFooter></CSEPFooter>
     </template>
     <BackTop></BackTop>
@@ -41,20 +47,47 @@ export default {
   },
   mounted() {
     this.getWebsiteConfig()
+    this.syncSubmissionListChrome()
+  },
+  updated() {
+    this.syncSubmissionListChrome()
+  },
+  beforeDestroy() {
+    this.syncSubmissionListChrome(false)
   },
   methods: {
     ...mapActions(["getWebsiteConfig", "changeDomTitle"]),
+    syncSubmissionListChrome(force) {
+      const enabled =
+        typeof force === "boolean" ? force : this.isSubmissionList
+      document.documentElement.classList.toggle(
+        "submission-list-page",
+        enabled,
+      )
+      document.body.classList.toggle("submission-list-page", enabled)
+    },
   },
   computed: {
     ...mapState(["website"]),
     ...mapGetters(["isProblemSolving", "removedPopupId"]),
+    isSubmissionList() {
+      return (
+        this.$route.name === "submission-list" || this.$route.path === "/status"
+      )
+    },
   },
   watch: {
     website() {
       this.changeDomTitle()
     },
-    $route() {
-      this.changeDomTitle()
+    $route: {
+      immediate: true,
+      handler() {
+        this.changeDomTitle()
+        this.$nextTick(() => {
+          this.syncSubmissionListChrome()
+        })
+      },
     },
   },
 }
@@ -253,6 +286,46 @@ a {
   background-color: var(--site-background-color);
 }
 
+.submission-list-app,
+.submission-list-footer-dummy {
+  background-color: #ffffff;
+}
+
+.submission-list-app {
+  margin-top: calc(var(--header-height) + 28px);
+}
+
+html.submission-list-page,
+body.submission-list-page,
+html.submission-list-page #app,
+html.submission-list-page #wrapper {
+  background-color: #ffffff;
+}
+
+html:has(.content-app.submission-list-app),
+body:has(.content-app.submission-list-app) {
+  background-color: #ffffff;
+}
+
+html.submission-list-page {
+  --header-glass-bg: #ffffff;
+  --header-glass-border-color: #eef1f5;
+  --header-glass-shadow: none;
+}
+
+html.submission-list-page #header .header-menu {
+  padding-right: 32px;
+  padding-left: 32px;
+}
+
+html.submission-list-page #header .logo {
+  margin-left: 0;
+}
+
+html.submission-list-page #header .header-menu > .drop-menu {
+  padding-right: 0 !important;
+}
+
 .ps {
   margin-top: 50px;
   background-color: var(--bg-color);
diff --git a/frontend/src/pages/oj/views/submission/SubmissionList.vue b/frontend/src/pages/oj/views/submission/SubmissionList.vue
index ef9a749d..e120c7c9 100644
--- a/frontend/src/pages/oj/views/submission/SubmissionList.vue
+++ b/frontend/src/pages/oj/views/submission/SubmissionList.vue
@@ -1,91 +1,135 @@
 <template>
   <div class="flex-container">
-    <div id="main">
-      <Panel dis-hover style="border-radius: 20px">
-        <div slot="title">{{ title }}</div>
-        <div slot="extra">
-          <ul class="filter">
-            <li>
-              <Dropdown @on-click="handleResultChange" style="cursor: pointer">
-                <span
-                  >{{ status }}
-                  <Icon type="arrow-down-b"></Icon>
-                </span>
-                <Dropdown-menu slot="list">
-                  <Dropdown-item name="">{{ $t("m.All") }}</Dropdown-item>
-                  <Dropdown-item
-                    v-for="status in Object.keys(JUDGE_STATUS)"
-                    :key="status"
-                    :name="status"
-                  >
-                    {{
-                      $t("m." + JUDGE_STATUS[status].name.replace(/ /g, "_"))
-                    }}
-                  </Dropdown-item>
-                </Dropdown-menu>
-              </Dropdown>
-            </li>
-
-            <li>
-              <i-switch
-                size="large"
+    <section id="main" class="submission-panel">
+      <div class="submission-content">
+        <header class="submission-toolbar">
+          <h1>{{ title }}</h1>
+          <div class="filter">
+            <details
+              ref="statusFilter"
+              class="status-filter"
+              :class="{ active: formFilter.result !== '' }"
+            >
+              <summary>
+                <span class="control-kicker">{{
+                  $t("m.Submission_State")
+                }}</span>
+                <strong>{{ selectedStatusLabel }}</strong>
+                <svg
+                  class="summary-caret"
+                  viewBox="0 0 16 16"
+                  aria-hidden="true"
+                >
+                  <path d="M4 6l4 4 4-4" />
+                </svg>
+              </summary>
+              <div class="status-popover">
+                <button
+                  class="status-option"
+                  :class="{ selected: formFilter.result === '' }"
+                  type="button"
+                  @click="selectResult('')"
+                >
+                  {{ $t("m.All") }}
+                </button>
+                <button
+                  v-for="status in Object.keys(JUDGE_STATUS)"
+                  :key="status"
+                  class="status-option"
+                  :class="{ selected: formFilter.result === status }"
+                  type="button"
+                  @click="selectResult(status)"
+                >
+                  {{ getJudgeStatusLabel(status) }}
+                </button>
+              </div>
+            </details>
+
+            <label class="mine-toggle">
+              <input
                 v-model="formFilter.myself"
-                @on-change="handleQueryChange"
+                type="checkbox"
+                @change="handleQueryChange"
+              />
+              <span class="toggle-track"></span>
+              <span class="toggle-label">{{ $t("m.Mine") }}</span>
+            </label>
+
+            <label class="search-control">
+              <svg
+                class="search-icon"
+                viewBox="0 0 16 16"
+                aria-hidden="true"
               >
-                <span slot="open">{{ $t("m.Mine") }}</span>
-                <span slot="close">{{ $t("m.All") }}</span>
-              </i-switch>
-            </li>
-            <li>
-              <Input
+                <circle cx="7" cy="7" r="4" />
+                <path d="M10.5 10.5L13 13" />
+              </svg>
+              <input
                 v-model="formFilter.username"
-                :placeholder="$t('m.Search_Author')"
-                @on-enter="handleQueryChange"
+                :placeholder="$t('m.Search_Submitter')"
+                type="search"
+                @keydown.enter="handleQueryChange"
               />
-            </li>
-
-            <li>
-              <Button
-                class="refresh-button"
-                icon="refresh"
-                @click="getSubmissions"
-                >{{ $t("m.Refresh") }}</Button
-              >
-            </li>
-          </ul>
+            </label>
+          </div>
+        </header>
+
+        <div class="table-panel">
+          <SubmissionTable
+            :contest-id="contestID"
+            :data="submissions"
+            :loading="loadingTable"
+          ></SubmissionTable>
         </div>
 
-        <SubmissionTable
-          :columns="columns"
-          :data="submissions"
-          :loading="loadingTable"
-        ></SubmissionTable>
-        <!--        <Table stripe :disabled-hover="true" :columns="columns" :data="submissions" :loading="loadingTable"></Table>-->
-        <Pagination
-          :total="total"
-          :page-size="limit"
-          @on-change="changeRoute"
-          :current.sync="page"
-        ></Pagination>
-      </Panel>
-    </div>
+        <footer class="pagination-footer">
+          <span class="total-count">총 {{ total }}개 제출</span>
+          <nav class="pagination" aria-label="pagination">
+            <button
+              class="page-button"
+              type="button"
+              :disabled="page <= 1"
+              @click="goPage(page - 1)"
+            >
+              ‹
+            </button>
+            <button
+              v-for="pageItem in visiblePages"
+              :key="pageItem.key"
+              class="page-button"
+              :class="{ active: pageItem.page === page }"
+              type="button"
+              :disabled="pageItem.ellipsis"
+              @click="!pageItem.ellipsis && goPage(pageItem.page)"
+            >
+              {{ pageItem.label }}
+            </button>
+            <button
+              class="page-button"
+              type="button"
+              :disabled="page >= totalPages"
+              @click="goPage(page + 1)"
+            >
+              ›
+            </button>
+          </nav>
+        </footer>
+      </div>
+    </section>
   </div>
 </template>
 
 <script>
 import { mapGetters } from "vuex"
 import api from "@oj/api"
-import { JUDGE_STATUS, USER_TYPE } from "@/utils/constants"
+import { JUDGE_STATUS } from "@/utils/constants"
 import utils from "@/utils/utils"
-import time from "@/utils/time"
-import Pagination from "@/pages/oj/components/Pagination"
 import SubmissionTable from "./SubmissionTable.vue"
 
 export default {
   name: "submissionList",
   components: {
     SubmissionTable,
-    Pagination,
   },
   data() {
     return {
@@ -94,152 +138,15 @@ export default {
         result: "",
         username: "",
       },
-      columns: [
-        {
-          title: this.$i18n.t("m.When"),
-          align: "center",
-          render: (h, params) => {
-            return h("span", time.utcToLocal(params.row.create_time))
-          },
-        },
-        {
-          title: this.$i18n.t("m.ID"),
-          align: "center",
-          render: (h, params) => {
-            if (params.row.show_link) {
-              return h(
-                "span",
-                {
-                  style: {
-                    color: "#57a3f3",
-                    cursor: "pointer",
-                  },
-                  on: {
-                    click: () => {
-                      this.$router.push("/status/" + params.row.id)
-                    },
-                  },
-                },
-                params.row.id.slice(0, 12),
-              )
-            } else {
-              return h("span", params.row.id.slice(0, 12))
-            }
-          },
-        },
-        {
-          title: this.$i18n.t("m.Status"),
-          align: "center",
-          render: (h, params) => {
-            return h(
-              "Tag",
-              {
-                props: {
-                  color: JUDGE_STATUS[params.row.result].color,
-                },
-              },
-              this.$i18n.t(
-                "m." + JUDGE_STATUS[params.row.result].name.replace(/ /g, "_"),
-              ),
-            )
-          },
-        },
-        {
-          title: this.$i18n.t("m.Problem"),
-          align: "center",
-          render: (h, params) => {
-            return h(
-              "span",
-              {
-                style: {
-                  color: "#57a3f3",
-                  cursor: "pointer",
-                },
-                on: {
-                  click: () => {
-                    if (this.contestID) {
-                      this.$router.push({
-                        name: "contest-problem-details",
-                        params: {
-                          problemID: params.row.problem,
-                          contestID: this.contestID,
-                        },
-                      })
-                    } else {
-                      this.$router.push({
-                        name: "problem-details",
-                        params: { problemID: params.row.problem },
-                      })
-                    }
-                  },
-                },
-              },
-              params.row.problem,
-            )
-          },
-        },
-        {
-          title: this.$i18n.t("m.Time"),
-          align: "center",
-          render: (h, params) => {
-            return h(
-              "span",
-              utils.submissionTimeFormat(params.row.statistic_info.time_cost),
-            )
-          },
-        },
-        {
-          title: this.$i18n.t("m.Memory"),
-          align: "center",
-          render: (h, params) => {
-            return h(
-              "span",
-              utils.submissionMemoryFormat(
-                params.row.statistic_info.memory_cost,
-              ),
-            )
-          },
-        },
-        {
-          title: this.$i18n.t("m.Language"),
-          align: "center",
-          key: "language",
-        },
-        {
-          title: this.$i18n.t("m.Author"),
-          align: "center",
-          render: (h, params) => {
-            return h(
-              "a",
-              {
-                style: {
-                  display: "inline-block",
-                  "max-width": "150px",
-                },
-                on: {
-                  click: () => {
-                    this.$router.push({
-                      name: "user-home",
-                      query: { username: params.row.username },
-                    })
-                  },
-                },
-              },
-              params.row.username,
-            )
-          },
-        },
-      ],
       loadingTable: false,
       submissions: [],
       total: 30,
-      limit: 12,
+      limit: 18,
       page: 1,
       contestID: "",
       problemID: "",
       routeName: "",
-      JUDGE_STATUS: "",
-      rejudge_column: false,
+      JUDGE_STATUS: {},
     }
   },
   mounted() {
@@ -287,7 +194,6 @@ export default {
           for (let v of data.results) {
             v.loading = false
           }
-          this.adjustRejudgeColumn()
           this.loadingTable = false
           this.submissions = data.results
           this.total = data.total
@@ -312,62 +218,85 @@ export default {
     goRoute(route) {
       this.$router.push(route)
     },
-    adjustRejudgeColumn() {
-      if (!this.rejudgeColumnVisible || this.rejudge_column) {
-        return
-      }
-      const judgeColumn = {
-        title: this.$i18n.t("m.Option"),
-        fixed: "right",
-        align: "center",
-        width: 90,
-        render: (h, params) => {
-          return h(
-            "Button",
-            {
-              props: {
-                type: "primary",
-                size: "small",
-                loading: params.row.loading,
-              },
-              on: {
-                click: () => {
-                  this.handleRejudge(params.row.id, params.index)
-                },
-              },
-            },
-            this.$i18n.t("m.Rejudge"),
-          )
-        },
-      }
-      this.columns.push(judgeColumn)
-      this.rejudge_column = true
-    },
-    handleResultChange(status) {
+    selectResult(status) {
       this.page = 1
       this.formFilter.result = status
+      if (this.$refs.statusFilter) {
+        this.$refs.statusFilter.removeAttribute("open")
+      }
       this.changeRoute()
     },
     handleQueryChange() {
       this.page = 1
       this.changeRoute()
     },
-    handleRejudge(id, index) {
-      this.submissions[index].loading = true
-      api.submissionRejudge(id).then(
-        (res) => {
-          this.submissions[index].loading = false
-          this.$success("Succeeded")
-          this.getSubmissions()
-        },
-        () => {
-          this.submissions[index].loading = false
-        },
+    getJudgeStatusLabel(status) {
+      return this.$i18n.t(
+        "m." + JUDGE_STATUS[status].name.replace(/ /g, "_"),
       )
     },
+    goPage(page) {
+      if (page < 1 || page > this.totalPages || page === this.page) {
+        return
+      }
+      this.page = page
+      this.changeRoute()
+    },
   },
   computed: {
-    ...mapGetters(["isAuthenticated", "user"]),
+    ...mapGetters(["isAuthenticated"]),
+    totalPages() {
+      return Math.max(Math.ceil(this.total / this.limit), 1)
+    },
+    selectedStatusLabel() {
+      if (this.formFilter.result === "") {
+        return this.$i18n.t("m.All")
+      }
+      return this.getJudgeStatusLabel(this.formFilter.result)
+    },
+    visiblePages() {
+      const pages = []
+      const addPage = (page) => {
+        pages.push({
+          key: `page-${page}`,
+          label: page,
+          page,
+          ellipsis: false,
+        })
+      }
+      const addEllipsis = (key) => {
+        pages.push({
+          key,
+          label: "...",
+          page: null,
+          ellipsis: true,
+        })
+      }
+
+      if (this.totalPages <= 7) {
+        for (let page = 1; page <= this.totalPages; page++) {
+          addPage(page)
+        }
+        return pages
+      }
+
+      addPage(1)
+      if (this.page > 4) {
+        addEllipsis("start-ellipsis")
+      }
+
+      const start = Math.max(2, this.page - 1)
+      const end = Math.min(this.totalPages - 1, this.page + 1)
+      for (let page = start; page <= end; page++) {
+        addPage(page)
+      }
+
+      if (this.page < this.totalPages - 3) {
+        addEllipsis("end-ellipsis")
+      }
+      addPage(this.totalPages)
+      return pages
+    },
     title() {
       if (!this.contestID) {
         return this.$i18n.t("m.Status")
@@ -377,16 +306,6 @@ export default {
         return this.$i18n.t("m.Submissions")
       }
     },
-    status() {
-      return this.formFilter.result === ""
-        ? this.$i18n.t("m.Submission_State")
-        : this.$i18n.t(
-            "m." + JUDGE_STATUS[this.formFilter.result].name.replace(/ /g, "_"),
-          )
-    },
-    rejudgeColumnVisible() {
-      return !this.contestID && this.user.admin_type === USER_TYPE.SUPER_ADMIN
-    },
   },
   watch: {
     $route(newVal, oldVal) {
@@ -394,9 +313,6 @@ export default {
         this.init()
       }
     },
-    rejudgeColumnVisible() {
-      this.adjustRejudgeColumn()
-    },
     isAuthenticated() {
       this.init()
     },
@@ -405,31 +321,315 @@ export default {
 </script>
 
 <style scoped lang="less">
-.ivu-btn-text {
-  color: #57a3f3;
-}
-
 .flex-container {
-  width: var(--global-width);
+  width: 100%;
+  margin: 0;
+  background: #ffffff;
 
   #main {
     flex: auto;
-    margin-right: 18px;
+  }
+}
+
+.submission-panel {
+  overflow: visible;
+  background: #ffffff;
+  border: 0;
+  border-radius: 0;
+}
+
+.submission-content {
+  width: 100%;
+  max-width: var(--global-width);
+  margin: 0 auto;
+  padding: 0 32px;
+}
+
+.submission-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 16px 0;
+  border-bottom: 1px solid #eef1f5;
+
+  h1 {
+    margin: 0;
+    color: #303747;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 1.3;
+  }
+}
+
+.filter {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  flex-wrap: wrap;
+}
 
-    .filter {
-      margin-right: -10px;
+.status-filter {
+  position: relative;
+
+  summary {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    height: 36px;
+    padding: 0 12px;
+    color: #303747;
+    font-size: 14px;
+    list-style: none;
+    background: #f6f7fb;
+    border: 1px solid transparent;
+    border-radius: 999px;
+    cursor: pointer;
+    user-select: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &:hover {
+      background: #eef1ff;
     }
   }
 
-  #contest-menu {
-    flex: none;
-    width: 210px;
+  &[open] summary,
+  &.active summary {
+    color: #5661f6;
+    background: #eef1ff;
+    border-color: rgba(86, 97, 246, 0.18);
+  }
+
+  &.active .control-kicker,
+  &.active .summary-caret,
+  &[open] .control-kicker,
+  &[open] .summary-caret {
+    color: #5661f6;
   }
+
+  strong {
+    font-weight: 800;
+  }
+}
+
+.control-kicker {
+  color: #8a94a6;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.summary-caret {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  color: #8a94a6;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  fill: none;
+}
+
+.status-popover {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 20;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(104px, 1fr));
+  gap: 6px;
+  width: 250px;
+  padding: 8px;
+  background: #ffffff;
+  border: 1px solid #e6e9f0;
+  border-radius: 10px;
+  box-shadow: 0 16px 40px rgba(30, 41, 59, 0.12);
 }
 
-.refresh-button {
-  background-color: #495060;
-  color: white;
-  border-radius: 20px;
+.status-option {
+  height: 32px;
+  padding: 0 10px;
+  color: #596579;
+  font-size: 13px;
+  font-weight: 700;
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-radius: 7px;
+  cursor: pointer;
+
+  &:hover,
+  &.selected {
+    color: #5661f6;
+    background: #f3f5ff;
+  }
+}
+
+.mine-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  height: 36px;
+  padding: 0 4px 0 10px;
+  color: #4f5b6f;
+  font-size: 14px;
+  font-weight: 700;
+  background: #f6f7fb;
+  border-radius: 999px;
+  cursor: pointer;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  input:checked + .toggle-track {
+    background: #5661f6;
+  }
+
+  input:checked + .toggle-track::after {
+    transform: translateX(14px);
+  }
+}
+
+.toggle-track {
+  position: relative;
+  width: 34px;
+  height: 20px;
+  background: #d8dde8;
+  border-radius: 999px;
+  transition: background-color 0.15s ease;
+}
+
+.toggle-track::after {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 14px;
+  height: 14px;
+  content: "";
+  background: #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
+  transition: transform 0.15s ease;
+}
+
+.toggle-label {
+  padding-right: 8px;
+}
+
+.search-control {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  width: 198px;
+  height: 36px;
+  padding: 0 12px;
+  color: #8a94a6;
+  background: #f6f7fb;
+  border-radius: 999px;
+
+  &:focus-within {
+    color: #5661f6;
+    background: #eef1ff;
+    box-shadow: inset 0 0 0 1px rgba(86, 97, 246, 0.18);
+  }
+
+  input {
+    width: 100%;
+    min-width: 0;
+    color: #303747;
+    font-size: 14px;
+    background: transparent;
+    border: 0;
+    outline: none;
+  }
+}
+
+.search-icon {
+  flex: none;
+  width: 15px;
+  height: 15px;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  fill: none;
+}
+
+.table-panel {
+  background: #ffffff;
+}
+
+.pagination-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 56px;
+  padding: 10px 0 12px;
+  background: #ffffff;
+}
+
+.total-count {
+  color: #8a94a6;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+  background: #f6f7fb;
+  border-radius: 999px;
+}
+
+.page-button {
+  min-width: 30px;
+  height: 30px;
+  padding: 0 10px;
+  color: #697386;
+  font-size: 14px;
+  font-weight: 700;
+  background: transparent;
+  border: 0;
+  border-radius: 999px;
+  cursor: pointer;
+
+  &:hover:not(:disabled),
+  &.active {
+    color: #ffffff;
+    background: #5661f6;
+    box-shadow: 0 6px 16px rgba(86, 97, 246, 0.22);
+  }
+
+  &:disabled {
+    color: #bdc4d0;
+    cursor: not-allowed;
+    background: transparent;
+  }
+}
+
+@media (max-width: 960px) {
+  .submission-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .filter {
+    justify-content: flex-start;
+  }
+
+  .pagination-footer {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 10px;
+  }
 }
 </style>
diff --git a/frontend/src/pages/oj/views/submission/SubmissionListItem.vue b/frontend/src/pages/oj/views/submission/SubmissionListItem.vue
index 6c6340d1..7909877e 100644
--- a/frontend/src/pages/oj/views/submission/SubmissionListItem.vue
+++ b/frontend/src/pages/oj/views/submission/SubmissionListItem.vue
@@ -1,25 +1,56 @@
 <script>
-import api from "../../api"
+import moment from "moment"
 import { JUDGE_STATUS } from "../../../../utils/constants"
 
 export default {
   name: "SubmissionListItem",
   props: {
+    contestID: {
+      type: [String, Number],
+      default: "",
+    },
     item: {
       type: Object,
       default: () => {},
     },
   },
   computed: {
-    JUDGE_STATUS() {
-      return JUDGE_STATUS
-    },
     submit_time() {
-      // 2024-04-30T10:51:36.831239Z-> 2024-04-30 10:51:36
-      return this.item.create_time.replace("T", " ").split(".")[0]
+      const submittedAt = moment.utc(this.item.create_time).local()
+      const now = moment()
+      if (submittedAt.isSame(now, "day")) {
+        return `오늘 ${submittedAt.format("HH:mm:ss")}`
+      }
+      if (submittedAt.isSame(now.clone().subtract(1, "day"), "day")) {
+        return `어제 ${submittedAt.format("HH:mm:ss")}`
+      }
+      return submittedAt.format("YYYY-MM-DD HH:mm:ss")
     },
-    id() {
-      return this.item.id.slice(0, 12)
+    problemID() {
+      return this.item.problem_id || this.item.problem
+    },
+    resultDisplay() {
+      return this.$t(
+        "m." + JUDGE_STATUS[this.item.result].name.replace(/ /g, "_"),
+      )
+    },
+    statusClass() {
+      const result = Number(this.item.result)
+      const statusMap = {
+        "-2": "status-compile-error",
+        "-1": "status-wrong-answer",
+        0: "status-accepted",
+        1: "status-time-limit",
+        2: "status-time-limit",
+        3: "status-memory-limit",
+        4: "status-runtime-error",
+        5: "status-system-error",
+        6: "status-pending",
+        7: "status-judging",
+        8: "status-partial",
+        9: "status-submitting",
+      }
+      return statusMap[result] || "status-unknown"
     },
     memory() {
       if (
@@ -41,23 +72,26 @@ export default {
         return this.item.statistic_info.time_cost + "ms"
       }
     },
-    statusStyle() {
-      return {
-        backgroundColor: JUDGE_STATUS[this.item.result].color,
-        color: JUDGE_STATUS[this.item.result].textColor,
-        fontWeight: "bold",
-      }
-    },
   },
   methods: {
     goStatus() {
       this.$router.push("/status/" + this.item.id)
     },
     goProblem() {
-      this.$router.push({
-        name: "problem-details",
-        params: { problemID: this.item.problem },
-      })
+      if (this.contestID) {
+        this.$router.push({
+          name: "contest-problem-details",
+          params: {
+            problemID: this.problemID,
+            contestID: this.contestID,
+          },
+        })
+      } else {
+        this.$router.push({
+          name: "problem-details",
+          params: { problemID: this.problemID },
+        })
+      }
     },
     goUser() {
       this.$router.push({
@@ -81,78 +115,213 @@ export default {
 </script>
 
 <template>
-  <tr>
-    <td>{{ this.submit_time }}</td>
-    <td class="link" @click="this.goStatus">{{ item.id.slice(0, 12) }}</td>
+  <tr @click="goStatus">
+    <td class="submitted-at">{{ this.submit_time }}</td>
     <td>
-      <button class="status-badge" :style="this.statusStyle">
-        {{ JUDGE_STATUS[item.result].name }}
+      <button class="problem-link problem-id-link" @click.stop="goProblem">
+        {{ problemID }}번
       </button>
     </td>
-    <td class="link" @click="this.goProblem">{{ item.problem + "번" }}</td>
-    <td>{{ this.running_time }}</td>
-    <td>{{ this.memory }}</td>
-    <td>{{ item.language }}</td>
-    <td class="link" @click="this.goUser">
+    <td class="user-cell">
       <div class="user-wrapper">
         <img class="avatar" :src="item.user_avatar" />
-        <div class="name-wrapper">
+        <button class="name-wrapper" @click.stop="goUser">
           {{ item.username }}
-        </div>
+        </button>
       </div>
     </td>
-    <!--        <td>{{ item.id }}</td>-->
-    <!--        <td>{{ item.status }}</td>-->
-    <!--        <td>{{ item.memory }}</td>-->
-    <!--        <td>{{ item.time }}</td>-->
+    <td class="result-cell">
+      <button
+        class="status-badge"
+        :class="statusClass"
+        :aria-label="`제출 결과: ${resultDisplay}`"
+        :title="resultDisplay"
+        @click.stop="goStatus"
+      >
+        {{ resultDisplay }}
+      </button>
+    </td>
+    <td class="language-cell">{{ item.language }}</td>
+    <td class="numeric">{{ this.running_time }}</td>
+    <td class="numeric">{{ this.memory }}</td>
   </tr>
 </template>
 
 <style scoped lang="less">
 tr {
-  border-bottom: 1px solid #e0e0e0;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+tr:hover {
+  background-color: #fafbff;
 }
 
 td {
-  text-align: center;
-  padding: 10px 0;
+  color: #4f5b6f;
+  font-size: 14px;
+  line-height: 1.35;
+  padding: 10px 16px;
+  border-bottom: 1px solid #eef1f5;
+  vertical-align: middle;
 }
 
-.link {
-  color: #5b64ed;
+.problem-link,
+.name-wrapper {
+  border: 0;
+  background: transparent;
+  color: #5661f6;
   cursor: pointer;
-  .user-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .name-wrapper {
-      margin-left: 7px;
-    }
-  }
-}
-
-.link:hover {
-  color: #5b64ed;
+  font: inherit;
+  padding: 0;
+  text-align: left;
+}
+
+.problem-link:hover,
+.name-wrapper:hover {
+  color: #3942d8;
   text-decoration: underline;
 }
 
-.status-badge {
-  border: none;
-  color: white;
-  padding: 5px 10px;
+.problem-id-link {
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.result-cell {
   text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 10.5px;
+}
+
+.language-cell {
+  text-align: center;
+}
+
+.user-cell {
+  min-width: 150px;
+}
+
+.user-wrapper {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.name-wrapper {
+  display: block;
+  margin-left: 7px;
+  max-width: 110px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 88px;
+  height: 20px;
+  padding: 0 8px;
+  color: var(--status-ink);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: 0;
   cursor: pointer;
-  border-radius: 5px;
+  border: 0;
+  border-radius: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background: var(--status-bg);
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.status-badge:hover {
+  background: var(--status-bg-hover);
+}
+
+.status-badge:focus-visible {
+  outline: 2px solid var(--status-focus);
+  outline-offset: 2px;
+}
+
+.status-accepted {
+  --status-ink: #216e4e;
+  --status-bg: #eef8f1;
+  --status-bg-hover: #e4f3e9;
+  --status-focus: rgba(33, 110, 78, 0.2);
+}
+
+.status-wrong-answer {
+  --status-ink: #7f5f01;
+  --status-bg: #fff7e0;
+  --status-bg-hover: #fff2c7;
+  --status-focus: rgba(127, 95, 1, 0.2);
+}
+
+.status-time-limit,
+.status-memory-limit,
+.status-partial {
+  --status-ink: #9e4c00;
+  --status-bg: #fff3e8;
+  --status-bg-hover: #ffe9d3;
+  --status-focus: rgba(158, 76, 0, 0.2);
+}
+
+.status-runtime-error,
+.status-compile-error {
+  --status-ink: #ae2e24;
+  --status-bg: #fff1f0;
+  --status-bg-hover: #ffe7e5;
+  --status-focus: rgba(174, 46, 36, 0.2);
+}
+
+.status-system-error {
+  --status-ink: #5d1f1a;
+  --status-bg: #f8eeee;
+  --status-bg-hover: #f3e3e3;
+  --status-focus: rgba(93, 31, 26, 0.2);
+}
+
+.status-pending,
+.status-judging,
+.status-submitting {
+  --status-ink: #1558bc;
+  --status-bg: #f0f6ff;
+  --status-bg-hover: #e6f0ff;
+  --status-focus: rgba(21, 88, 188, 0.2);
+}
+
+.status-unknown {
+  --status-ink: #4f5b6f;
+  --status-bg: #f8fafc;
+  --status-bg-hover: #f1f5f9;
+  --status-focus: rgba(105, 115, 134, 0.2);
+}
+
+.numeric {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.submitted-at {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
 }
 
 @avatar-radius: 50%;
 
 .avatar {
-  width: 30px;
+  flex: none;
+  width: 24px;
+  height: 24px;
   border-radius: @avatar-radius;
-  box-shadow: 0px 0px 1px 0px;
+  box-shadow: 0 0 0 1px #e6e9f0;
+  object-fit: cover;
 }
 </style>
diff --git a/frontend/src/pages/oj/views/submission/SubmissionTable.vue b/frontend/src/pages/oj/views/submission/SubmissionTable.vue
index 8bf1975a..af5aee6d 100644
--- a/frontend/src/pages/oj/views/submission/SubmissionTable.vue
+++ b/frontend/src/pages/oj/views/submission/SubmissionTable.vue
@@ -5,6 +5,10 @@ export default {
   name: "SubmissionTable",
   components: { SubmissionListItem },
   props: {
+    contestID: {
+      type: [String, Number],
+      default: "",
+    },
     data: {
       type: Array,
       default: () => [],
@@ -14,54 +18,210 @@ export default {
       default: false,
     },
   },
+  computed: {
+    skeletonRows() {
+      return Array.from({ length: 18 }, (_, index) => index)
+    },
+  },
 }
 </script>
 
 <template>
-  <table>
-    <thead>
-      <tr>
-        <th class="large">{{ $t("m.When") }}</th>
-        <th class="large">{{ $t("m.ID") }}</th>
-        <th class="large">{{ $t("m.Status") }}</th>
-        <th class="small">{{ $t("m.Problem") }}</th>
-        <th class="small">{{ $t("m.Time") }}</th>
-        <th class="small">{{ $t("m.Memory") }}</th>
-        <th class="small">{{ $t("m.Language") }}</th>
-        <th class="medium">{{ $t("m.Author") }}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <SubmissionListItem v-for="item in data" :key="item.id" :item="item" />
-    </tbody>
-  </table>
+  <div class="submission-table-wrap">
+    <table>
+      <thead>
+        <tr>
+          <th class="submitted-at">{{ $t("m.When") }}</th>
+          <th class="problem-id">{{ $t("m.Problem_ID") }}</th>
+          <th class="author">{{ $t("m.Submission_Table_Author") }}</th>
+          <th class="result">{{ $t("m.Status") }}</th>
+          <th class="language">{{ $t("m.Language") }}</th>
+          <th class="metric">{{ $t("m.Time") }}</th>
+          <th class="metric">{{ $t("m.Memory") }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <template v-if="!loading">
+          <SubmissionListItem
+            v-for="item in data"
+            :key="item.id"
+            :contest-id="contestID"
+            :item="item"
+          />
+        </template>
+        <template v-else>
+          <tr
+            v-for="row in skeletonRows"
+            :key="`skeleton-${row}`"
+            class="skeleton-row"
+          >
+            <td class="submitted-at"><span class="skeleton-block date"></span></td>
+            <td><span class="skeleton-block short"></span></td>
+            <td>
+              <div class="skeleton-user">
+                <span class="skeleton-avatar"></span>
+                <span class="skeleton-block name"></span>
+              </div>
+            </td>
+            <td class="result"><span class="skeleton-pill"></span></td>
+            <td class="language"><span class="skeleton-block language"></span></td>
+            <td class="metric"><span class="skeleton-block metric"></span></td>
+            <td class="metric"><span class="skeleton-block metric"></span></td>
+          </tr>
+        </template>
+        <tr v-if="!loading && data.length === 0">
+          <td class="empty" colspan="7">{{ $t("m.No_Submissions") }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </template>
 
 <style scoped lang="less">
+.submission-table-wrap {
+  position: relative;
+  overflow-x: auto;
+}
+
 table {
+  width: 100%;
+  min-width: 820px;
   border-spacing: 0;
-  margin-bottom: 10px;
+  border-collapse: separate;
 }
 
 th {
-  text-align: center;
-  font-size: 1em;
-  font-weight: 600;
-  background-color: var(--pale-point-color);
-  padding: 10px 0;
+  text-align: left;
+  font-size: 13px;
+  line-height: 1.4;
+  font-weight: 700;
+  color: #697386;
+  background-color: #f7f8fb;
+  padding: 10px 16px;
   border-width: 0;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid #e6e9f0;
+  white-space: nowrap;
+}
+
+.submitted-at {
+  width: 172px;
+  text-align: right;
+}
+
+.problem-id {
+  width: 116px;
+}
+
+.author {
+  width: 170px;
+}
+
+.result {
+  width: 132px;
+  text-align: center;
+}
+
+.language {
+  width: 96px;
+  text-align: center;
+}
+
+.metric {
+  width: 92px;
+  text-align: right;
+}
+
+.empty {
+  padding: 34px 16px;
+  text-align: center;
+  color: #8a94a6;
+}
+
+.skeleton-row td {
+  padding: 10px 16px;
+  border-bottom: 1px solid #eef1f5;
+}
+
+.skeleton-block,
+.skeleton-pill,
+.skeleton-avatar {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  background: #eef2f7;
+}
+
+.skeleton-block::after,
+.skeleton-pill::after,
+.skeleton-avatar::after {
+  position: absolute;
+  inset: 0;
+  content: "";
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.72) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  animation: skeleton-shimmer 1.2s ease-in-out infinite;
+  transform: translateX(-100%);
+}
+
+.skeleton-block {
+  width: 100%;
+  height: 12px;
+  border-radius: 4px;
+}
+
+.skeleton-block.short {
+  width: 58px;
+}
+
+.skeleton-block.name {
+  width: 72px;
+}
+
+.skeleton-block.language {
+  width: 68px;
+}
+
+.result .skeleton-pill,
+.language .skeleton-block {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.skeleton-block.metric {
+  width: 54px;
+  margin-left: auto;
+}
+
+.skeleton-block.date {
+  width: 118px;
+  margin-left: auto;
+}
+
+.skeleton-pill {
+  width: 78px;
+  height: 20px;
+  border-radius: 4px;
 }
 
-.large {
-  width: 12.5%;
+.skeleton-user {
+  display: flex;
+  align-items: center;
+  gap: 7px;
 }
 
-.medium {
-  width: 14%;
+.skeleton-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
 }
 
-.small {
-  width: 7%;
+@keyframes skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
 }
 </style>