diff --git a/nginx/vue/src/views/Notes.vue b/nginx/vue/src/views/Notes.vue
new file mode 100644
index 0000000..c7e574c
--- /dev/null
+++ b/nginx/vue/src/views/Notes.vue
@@ -0,0 +1,15 @@
+<script setup>
+import RouterTable from "@/components/quick/RouterTable.vue";
+const note_links = [
+    { name: "ILSP", link: "/notes/islp" },
+    { name: "Vue", link: "/notes/vue" },
+];
+</script>
+
+<template>
+    <main class="center-content flex-col">
+        <div class="a4page-portrait bdr-1 flex-col relative scroll-y gap">
+            <RouterTable :linkArr="note_links" />
+        </div>
+    </main>
+</template>
diff --git a/nginx/vue/src/views/notes/Islp.vue b/nginx/vue/src/views/notes/Islp.vue
new file mode 100644
index 0000000..3f5c4b5
--- /dev/null
+++ b/nginx/vue/src/views/notes/Islp.vue
@@ -0,0 +1,18 @@
+<template>
+    <main class="center-content flex-col">
+        <div class="a4page-portrait bdr-1 flex-col relative scroll-y">
+            <div class="bdr-primary">
+                <h1>Welcome to my ILSP notes</h1>
+                <p>
+                    I'm taking up the course so that I can apply some machine
+                    learning techniques to data involved in my personal
+                    projects.
+                </p>
+            </div>
+
+            <h2>Chapter 2</h2>
+            <h3>Solutions</h3>
+            <p></p>
+        </div>
+    </main>
+</template>
diff --git a/nginx/vue/src/views/notes/Vue.vue b/nginx/vue/src/views/notes/Vue.vue
new file mode 100644
index 0000000..95facb7
--- /dev/null
+++ b/nginx/vue/src/views/notes/Vue.vue
@@ -0,0 +1,9 @@
+<template>
+    <main class="center-content flex-col">
+        <div class="a4page-portrait bdr-1 flex-col relative scroll-y">
+            <h1>These are my notes about Vue.js</h1>
+            <h1>Pinia</h1>
+            <h1>Composition API</h1>
+        </div>
+    </main>
+</template>