diff --git a/web/src/views/Todo.vue b/web/src/components/Todo.vue
similarity index 77%
rename from web/src/views/Todo.vue
rename to web/src/components/Todo.vue
index f5fe0c6..f232ca0 100644
--- a/web/src/views/Todo.vue
+++ b/web/src/components/Todo.vue
@@ -1,35 +1,21 @@
 <template>
   <div class="content">
-    <nav-bar :date="date" :today="today" :loading="loading" />
     <todo-editor :content="content" :extensions="extensions" @init="onInit" />
   </div>
 </template>
 
 <script setup>
 import { ref, computed, watch } from 'vue';
-import moment from 'moment';
-import NavBar from '@/components/NavBar';
 import TodoEditor from '@/components/TodoEditor';
 import { createExtensions } from '@/editorExt.js';
 import { useQuery } from '@tanstack/vue-query';
 import axios from '@/axiosConfig.js';
 
-const props = defineProps({
-  date: {
-    type: String,
-    required: true,
-  },
-});
 
-const now = ref(moment());
 const loading = ref(true);
-const content = ref(null);
+const content = ref("");
 const extensions = createExtensions();
 
-const today = computed(() => {
-  return now.value.format('YYYYMMDD');
-});
-
 const onInit = ({ editor }) => {
   fetchTodoContent(editor);
 };
diff --git a/web/src/router.js b/web/src/router.js
index 491e05a..ff441f5 100644
--- a/web/src/router.js
+++ b/web/src/router.js
@@ -32,10 +32,5 @@ export default new Router({
       // which is lazy-loaded when the route is visited.
       component: () => import( /* webpackChunkName: "about" */ './views/Diary.vue')
     },
-    {
-      path: '/todo',
-      name: 'todo',
-      component: () => import( /* webpackChunkName: "about" */ './views/Todo.vue')
-    }
   ]
 })
\ No newline at end of file
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index c34aa3e..8fdad8f 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -16,7 +16,10 @@
           <Icon icon="fluent:arrow-next-16-regular" width="1.2rem" />
         </div>
       </div>
-      <a href="/todo">Todo</a>
+      <button @click="openModal">Todo</button>
+      <el-dialog :visible="dialogVisible" title="Todos" @close="closeModal">
+        <Todo></Todo>
+      </el-dialog>
       <a href="content">
         <Icon :icon="tableOfContents" />
       </a>
@@ -31,10 +34,12 @@ import moment from 'moment';
 import { Icon } from '@iconify/vue2';
 import tableOfContents from '@iconify/icons-mdi/table-of-contents';
 import DiaryEditor from "@/components/DiaryEditor";
+import Todo from '@/components/Todo.vue';
 
 
 const now = ref(moment());
 const date = ref(moment().format('YYYYMMDD'))
+const dialogVisible = ref(false)
 
 onMounted(() => {
   // eslint-disable-next-line no-unused-vars
@@ -71,6 +76,13 @@ function navigateDateToToday() {
   date.value = today.value
 }
 
+function openModal() {
+  dialogVisible.value = true
+}
+function closeModal() {
+  dialogVisible.value = false
+}
+
 </script>
 
 <style scoped>