diff --git a/next-env.d.ts b/next-env.d.ts
index 3cd7048..1b3be08 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/src/app/components/note-entry.tsx b/src/app/components/note-entry.tsx
new file mode 100644
index 0000000..64dd56d
--- /dev/null
+++ b/src/app/components/note-entry.tsx
@@ -0,0 +1,17 @@
+'use client'
+import Link from 'next/link';
+import { toRelativeDate } from '../lib/date';
+export function NoteEntry({ note }: { note: { title: string, mtime: string, slug: string } }) {
+	return (
+		<tr>
+			<td style={{ flex: '1 0 50%' }}>
+				<Link href={`/notes/${note.slug}`}>
+					{note.title}
+				</Link>
+			</td>
+			<td style={{ fontStyle: 'italic' }}>
+				{note.mtime && toRelativeDate(note.mtime)}
+			</td>
+		</tr>
+	);
+}
\ No newline at end of file
diff --git a/src/app/notes/page.tsx b/src/app/notes/page.tsx
index 2f10f8b..fbd4ddc 100644
--- a/src/app/notes/page.tsx
+++ b/src/app/notes/page.tsx
@@ -1,22 +1,5 @@
-import Link from 'next/link';
-
-import { toRelativeDate } from '../lib/date';
 import NotesInfo from '../../../public/notes.json';
-
-function NoteEntry({ note }: { note: { title: string, mtime: string, slug: string } }) {
-	return (
-		<tr>
-			<td style={{ flex: '1 0 50%' }}>
-				<Link href={`/notes/${note.slug}`}>
-					{note.title}
-				</Link>
-			</td>
-			<td style={{ fontStyle: 'italic' }}>
-				{note.mtime && toRelativeDate(note.mtime)}
-			</td>
-		</tr>
-	);
-}
+import { NoteEntry } from '../components/note-entry';
 
 function NotesPage() {
 	const notes = Object.entries(NotesInfo)