diff --git a/components.d.ts b/components.d.ts
index 62babe5..07e0d9f 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -9,11 +9,14 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    Autocomplete: typeof import('./src/components/Autocomplete.vue')['default']
-    Hamburger: typeof import('./src/components/Hamburger.vue')['default']
-    Logo: typeof import('./src/components/Logo.vue')['default']
+    Autocomplete: typeof import('./src/components/Note/Autocomplete.vue')['default']
+    Hamburger: typeof import('./src/components/TopBar/Hamburger.vue')['default']
+    List: typeof import('./src/components/ViewModes/List.vue')['default']
+    ListView: typeof import('./src/components/ViewModes/ListView.vue')['default']
+    Logo: typeof import('./src/components/TopBar/Logo.vue')['default']
+    Mindmap: typeof import('./src/components/ViewModes/Mindmap.vue')['default']
     Modal: typeof import('./src/components/Modal.vue')['default']
-    Note: typeof import('./src/components/Note.vue')['default']
+    Note: typeof import('./src/components/ViewModes/Note.vue')['default']
     NoteEditor: typeof import('./src/components/Note/NoteEditor.vue')['default']
     NoteReferences: typeof import('./src/components/Note/NoteReferences.vue')['default']
     NoteToolbar: typeof import('./src/components/Note/NoteToolbar.vue')['default']
diff --git a/src/App.vue b/src/App.vue
index 14b1a7f..725ecb9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,12 +21,14 @@ const sideBarCollapsed = ref(false)
       :class="sideBarCollapsed ? 'ml-0' : 'ml-sidebar'"
     >
       <Note
-        v-if="activeNote"
+        v-if="activeViewMode.name === 'Note' && activeNote"
         :key="activeNote.id"
         :note="activeNote"
         class=""
         @update="(note) => updateNote(note.id, note)"
       />
+      <ListView v-else-if="activeViewMode.name === 'List'" />
+      <ListView v-else-if="activeViewMode.name === 'Mindmap'" />
     </main>
   </div>
 </template>
diff --git a/src/components/Autocomplete.vue b/src/components/Note/Autocomplete.vue
similarity index 100%
rename from src/components/Autocomplete.vue
rename to src/components/Note/Autocomplete.vue
diff --git a/src/components/Note/NoteEditor.vue b/src/components/Note/NoteEditor.vue
index 4cf5993..a13e369 100644
--- a/src/components/Note/NoteEditor.vue
+++ b/src/components/Note/NoteEditor.vue
@@ -14,7 +14,7 @@ import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat'
 import ContextedPlugin from '@/ckeditor/ContextedPlugin'
 import { mdToHtml, htmlToMd } from '@/utils/markdown'
 import { getNoteByTitle, setActiveNote, addNote } from '@/composables/useNotes'
-import Autocomplete from '@/components/Autocomplete.vue'
+import Autocomplete from '@/components/Note/Autocomplete.vue'
 
 const props = defineProps<{ note: Note }>()
 
diff --git a/src/components/Hamburger.vue b/src/components/TopBar/Hamburger.vue
similarity index 100%
rename from src/components/Hamburger.vue
rename to src/components/TopBar/Hamburger.vue
diff --git a/src/components/Logo.vue b/src/components/TopBar/Logo.vue
similarity index 100%
rename from src/components/Logo.vue
rename to src/components/TopBar/Logo.vue
diff --git a/src/components/ViewModes/ListView.vue b/src/components/ViewModes/ListView.vue
new file mode 100644
index 0000000..3f9dee0
--- /dev/null
+++ b/src/components/ViewModes/ListView.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="overflow-x-auto">
+    <table class="table-compact table w-full">
+      <!-- head -->
+      <thead>
+        <tr>
+          <th>
+            <label>
+              <input type="checkbox" class="checkbox-primary checkbox checkbox-sm" />
+            </label>
+          </th>
+          <th>Note title</th>
+          <th>References</th>
+          <th>Modified</th>
+        </tr>
+      </thead>
+      <tbody>
+        <!-- row 1 -->
+        <tr class="hover">
+          <th>
+            <label>
+              <input type="checkbox" class="checkbox-primary checkbox checkbox-sm" />
+            </label>
+          </th>
+          <td>Cy Ganderton</td>
+          <td>Quality Control Specialist</td>
+          <td>Blue</td>
+        </tr>
+        <!-- row 2 -->
+        <tr class="hover">
+          <th>
+            <label>
+              <input type="checkbox" class="checkbox-primary checkbox checkbox-sm" />
+            </label>
+          </th>
+          <td>Hart Hagerty</td>
+          <td>Desktop Support Technician</td>
+          <td>Purple</td>
+        </tr>
+        <!-- row 3 -->
+        <tr class="hover">
+          <th>
+            <label>
+              <input type="checkbox" class="checkbox-primary checkbox checkbox-sm" />
+            </label>
+          </th>
+          <td>Brice Swyre</td>
+          <td>Tax Accountant</td>
+          <td>Red</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
diff --git a/src/components/ViewModes/Mindmap.vue b/src/components/ViewModes/Mindmap.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Note.vue b/src/components/ViewModes/Note.vue
similarity index 100%
rename from src/components/Note.vue
rename to src/components/ViewModes/Note.vue