diff --git a/apps/client/src/services/note_list_renderer.ts b/apps/client/src/services/note_list_renderer.ts
index 08af048f0..50556715a 100644
--- a/apps/client/src/services/note_list_renderer.ts
+++ b/apps/client/src/services/note_list_renderer.ts
@@ -1,4 +1,5 @@
 import type FNote from "../entities/fnote.js";
+import BoardView from "../widgets/view_widgets/board_view/index.js";
 import CalendarView from "../widgets/view_widgets/calendar_view.js";
 import GeoView from "../widgets/view_widgets/geo_view/index.js";
 import ListOrGridView from "../widgets/view_widgets/list_or_grid_view.js";
@@ -6,8 +7,9 @@ import TableView from "../widgets/view_widgets/table_view/index.js";
 import type { ViewModeArgs } from "../widgets/view_widgets/view_mode.js";
 import type ViewMode from "../widgets/view_widgets/view_mode.js";
 
+const allViewTypes = ["list", "grid", "calendar", "table", "geoMap", "board"] as const;
 export type ArgsWithoutNoteId = Omit<ViewModeArgs, "noteIds">;
-export type ViewTypeOptions = "list" | "grid" | "calendar" | "table" | "geoMap";
+export type ViewTypeOptions = typeof allViewTypes[number];
 
 export default class NoteListRenderer {
 
@@ -23,7 +25,7 @@ export default class NoteListRenderer {
     #getViewType(parentNote: FNote): ViewTypeOptions {
         const viewType = parentNote.getLabelValue("viewType");
 
-        if (!["list", "grid", "calendar", "table", "geoMap"].includes(viewType || "")) {
+        if (!(allViewTypes as readonly string[]).includes(viewType || "")) {
             // when not explicitly set, decide based on the note type
             return parentNote.type === "search" ? "list" : "grid";
         } else {
@@ -57,6 +59,8 @@ export default class NoteListRenderer {
                 return new TableView(args);
             case "geoMap":
                 return new GeoView(args);
+            case "board":
+                return new BoardView(args);
             case "list":
             case "grid":
             default:
diff --git a/apps/client/src/widgets/view_widgets/board_view/index.ts b/apps/client/src/widgets/view_widgets/board_view/index.ts
new file mode 100644
index 000000000..0e5c6e241
--- /dev/null
+++ b/apps/client/src/widgets/view_widgets/board_view/index.ts
@@ -0,0 +1,51 @@
+import ViewMode, { ViewModeArgs } from "../view_mode";
+
+const TPL = /*html*/`
+<div class="board-view">
+    <style>
+        .board-view {
+            overflow: hidden;
+            position: relative;
+            height: 100%;
+            user-select: none;
+        }
+
+        .board-view-container {
+            height: 100%;
+        }
+    </style>
+
+    <div class="board-view-container">
+        Board view goes here.
+    </div>
+</div>
+`;
+
+export interface StateInfo {
+
+};
+
+export default class BoardView extends ViewMode<StateInfo> {
+
+    private $root: JQuery<HTMLElement>;
+    private $container: JQuery<HTMLElement>;
+
+    constructor(args: ViewModeArgs) {
+        super(args, "board");
+
+        this.$root = $(TPL);
+        this.$container = this.$root.find(".board-view-container");
+        args.$parent.append(this.$root);
+    }
+
+    async renderList(): Promise<JQuery<HTMLElement> | undefined> {
+        // this.$container.empty();
+        this.renderBoard(this.$container[0]);
+        return this.$root;
+    }
+
+    private async renderBoard(el: HTMLElement) {
+
+    }
+
+}