diff --git a/src/icons/IconMoon.vue b/src/icons/IconMoon.vue
new file mode 100644
index 0000000..6763792
--- /dev/null
+++ b/src/icons/IconMoon.vue
@@ -0,0 +1,46 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="width"
+    :height="height"
+    viewBox="0 0 18 18"
+    :aria-labelledby="iconName"
+    role="presentation"
+  >
+    <title :id="iconName" lang="en">{{ iconName }}</title>
+    <g :fill="iconColor">
+      <path
+        d="M7.246 3.255a6.046 6.046 0 0 0-.198 2.597 5.988 5.988 0 0 0 7.672 4.892c-.674 2.215-2.642 3.926-4.973 4.21a5.994 5.994 0 0 1-5.248-1.977C3.347 11.673 2.83 9.99 3.042 8.238c.284-2.335 1.992-4.307 4.204-4.982zM8.985 1a8.15 8.15 0 0 0-1.104.075c-3.543.48-6.388 3.364-6.82 6.92C.469 12.862 4.245 17 8.985 17c.33 0 .665-.02 1.003-.062 3.549-.433 6.428-3.283 6.907-6.833.052-.383.076-.761.075-1.134-.002-.583-.482-.972-.996-.972a1.02 1.02 0 0 0-.614.207 3.96 3.96 0 0 1-2.383.793c-.188 0-.38-.013-.574-.04-1.732-.242-3.137-1.649-3.378-3.385a3.997 3.997 0 0 1 .751-2.963c.415-.657.025-1.609-.764-1.612h-.028z"
+      />
+    </g>
+  </svg>
+</template>
+<script>
+export default {
+  props: {
+    iconName: {
+      type: String,
+      default: "box",
+    },
+    width: {
+      type: [Number, String],
+      default: 18,
+    },
+    height: {
+      type: [Number, String],
+      default: 18,
+    },
+    iconColor: {
+      type: String,
+      default: "currentColor",
+    },
+  },
+};
+</script>
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+  margin-bottom: -2px;
+}
+</style>
diff --git a/src/icons/IconSun.vue b/src/icons/IconSun.vue
new file mode 100644
index 0000000..1f5f130
--- /dev/null
+++ b/src/icons/IconSun.vue
@@ -0,0 +1,46 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="width"
+    :height="height"
+    viewBox="0 0 18 18"
+    :aria-labelledby="iconName"
+    role="presentation"
+  >
+    <title :id="iconName" lang="en">{{ iconName }}</title>
+    <g :fill="iconColor">
+      <path
+        d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708"
+      ></path>
+    </g>
+  </svg>
+</template>
+<script>
+export default {
+  props: {
+    iconName: {
+      type: String,
+      default: "box",
+    },
+    width: {
+      type: [Number, String],
+      default: 18,
+    },
+    height: {
+      type: [Number, String],
+      default: 18,
+    },
+    iconColor: {
+      type: String,
+      default: "currentColor",
+    },
+  },
+};
+</script>
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+  margin-bottom: -2px;
+}
+</style>
diff --git a/src/views/ProblemRating.vue b/src/views/ProblemRating.vue
index 1111659..b2132e8 100644
--- a/src/views/ProblemRating.vue
+++ b/src/views/ProblemRating.vue
@@ -1,21 +1,38 @@
 <template>
   <div>
     <div class="head">
-      <div class="language">
-        <el-dropdown style="margin-right: 5%" @command="switchLocale">
-          <span class="el-dropdown-link">
-            {{ $t("lang") }}
-            <el-icon class="el-icon--right">
-              <arrow-down />
-            </el-icon>
+      <div class="options">
+        <div class="dark-light-mode">
+          <span @click="toggleDark()">
+            <icon-moon
+              v-if="!isDark"
+              icon-name="Dark"
+              height="14"
+              ,
+              width="14"
+            />
+            <icon-sun v-else icon-name="Light" height="14" , width="14" />
+            <span class="ml-2" style="font-size: 14px; margin-left: 5px"
+              >{{ isDark ? "Light" : "Dark" }}
+            </span>
           </span>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item :command="'en'">English</el-dropdown-item>
-              <el-dropdown-item :command="'zh'">简体中文</el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
+        </div>
+        <div class="language">
+          <el-dropdown style="margin-right: 5%" @command="switchLocale">
+            <span class="el-dropdown-link">
+              {{ $t("lang") }}
+              <el-icon class="el-icon--right">
+                <arrow-down />
+              </el-icon>
+            </span>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item :command="'en'">English</el-dropdown-item>
+                <el-dropdown-item :command="'zh'">简体中文</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
       </div>
       <div class="filter">
         <el-form :inline="true">
@@ -128,7 +145,14 @@
 import { reactive, onMounted, ref } from "vue";
 import axios, { AxiosResponse } from "axios";
 import { ElMessage } from "element-plus";
+import "element-plus/theme-chalk/dark/css-vars.css";
 import { useI18n } from "vue-i18n";
+import { useDark, useToggle } from "@vueuse/core";
+import IconMoon from "@/icons/IconMoon.vue";
+import IconSun from "@/icons/IconSun.vue";
+
+const isDark = useDark();
+const toggleDark = useToggle(isDark);
 
 const url = "./data.json";
 
@@ -300,9 +324,21 @@ function reset() {
   flex-direction: column;
 }
 
-.language {
+.options {
   width: 100%;
   display: flex;
   justify-content: right;
+  margin-right: 20px;
+}
+
+.dark-light-mode {
+  padding-right: 20px;
+  cursor: pointer;
+  color: var(--el-text-color-regular);
+}
+
+.language {
+  display: contents;
+  justify-content: flex-start;
 }
 </style>