diff --git a/src/app/notes/page.tsx b/src/app/notes/page.tsx
new file mode 100644
index 0000000..1759980
--- /dev/null
+++ b/src/app/notes/page.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import { Sidebar } from '@/components/Sidebar';
+import { NoteList } from '@/components/NoteList';
+import { AddNoteButton } from '@/components/AddNoteButton';
+import { NewNoteModal } from '@/components/NewNoteModal';
+
+function NotesPage() {
+  const [notes, setNotes] = useState([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleSelectNote = (noteId: string) => {
+    // Handle note selection
+  };
+
+  const handleAddNote = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleSaveNote = (title: string, content: string) => {
+    // Handle saving the new note
+    setIsModalOpen(false);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <div className="flex">
+      <Sidebar activeSection="Notes" />
+      <div className="flex-1 p-10">
+        <h1 className="text-2xl font-semibold mb-6">Notes</h1>
+        <NoteList notes={notes} onSelectNote={handleSelectNote} />
+        <AddNoteButton onClick={handleAddNote} />
+        <NewNoteModal isOpen={isModalOpen} onClose={handleCloseModal} onSaveNote={handleSaveNote} />
+      </div>
+    </div>
+  );
+}
+
+export default NotesPage;
diff --git a/src/components/AddNoteButton.tsx b/src/components/AddNoteButton.tsx
new file mode 100644
index 0000000..1fc137b
--- /dev/null
+++ b/src/components/AddNoteButton.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface AddNoteButtonProps {
+  onClick: () => void;
+}
+
+export function AddNoteButton({ onClick }: AddNoteButtonProps) {
+  return (
+    <button
+      id="newNoteBtn"
+      onClick={onClick}
+      className="mt-6 p-4 rounded-full bg-gray-300 text-4xl shadow-md focus:outline-none"
+    >
+      +
+    </button>
+  );
+}
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
new file mode 100644
index 0000000..ea39e65
--- /dev/null
+++ b/src/components/Modal.tsx
@@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: ReactNode;
+}
+
+export function Modal({ isOpen, onClose, children }: ModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="modal"
+      style={{ display: isOpen ? 'block' : 'none' }}
+      onClick={onClose}
+    >
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/NewNoteModal.tsx b/src/components/NewNoteModal.tsx
new file mode 100644
index 0000000..60c3d53
--- /dev/null
+++ b/src/components/NewNoteModal.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Modal } from '@/components/Modal';
+import { NoteForm } from '@/components/NoteForm';
+
+interface NewNoteModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSaveNote: (title: string, content: string) => void;
+}
+
+export function NewNoteModal({ isOpen, onClose, onSaveNote }: NewNoteModalProps) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <span className="close" onClick={onClose}>&times;</span>
+      <h2>Create New Note</h2>
+      <NoteForm onSave={onSaveNote} />
+    </Modal>
+  );
+}
diff --git a/src/components/NoteForm.tsx b/src/components/NoteForm.tsx
new file mode 100644
index 0000000..53bf189
--- /dev/null
+++ b/src/components/NoteForm.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+
+interface NoteFormProps {
+  onSave: (title: string, content: string) => void;
+}
+
+export function NoteForm({ onSave }: NoteFormProps) {
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    onSave(title, content);
+    setTitle('');
+    setContent('');
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="text"
+        placeholder="Title"
+        name="title"
+        className="border p-2 w-full mb-4"
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+      />
+      <textarea
+        placeholder="Content"
+        name="content"
+        className="border p-2 w-full mb-4"
+        rows={4}
+        value={content}
+        onChange={(e) => setContent(e.target.value)}
+      />
+      <button type="submit" className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700">
+        Save Note
+      </button>
+    </form>
+  );
+}
diff --git a/src/components/NoteItem.tsx b/src/components/NoteItem.tsx
new file mode 100644
index 0000000..09e9dcd
--- /dev/null
+++ b/src/components/NoteItem.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+interface NoteItemProps {
+  title: string;
+  date: string;
+  onClick: () => void;
+}
+
+export function NoteItem({ title, date, onClick }: NoteItemProps) {
+  return (
+    <div onClick={onClick} className="flex justify-between items-center p-4 bg-white shadow-md cursor-pointer">
+      <span>{title}</span>
+      <span>{date}</span>
+    </div>
+  );
+}
diff --git a/src/components/NoteList.tsx b/src/components/NoteList.tsx
new file mode 100644
index 0000000..9202055
--- /dev/null
+++ b/src/components/NoteList.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { NoteItem } from '@/components/NoteItem';
+
+interface Note {
+  id: string;
+  title: string;
+  date: string;
+}
+
+interface NoteListProps {
+  notes: Note[];
+  onSelectNote: (noteId: string) => void;
+}
+
+export function NoteList({ notes, onSelectNote }: NoteListProps) {
+  return (
+    <div className="flex flex-col space-y-4">
+      {notes.map(note => (
+        <NoteItem
+          key={note.id}
+          title={note.title}
+          date={note.date}
+          onClick={() => onSelectNote(note.id)}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
new file mode 100644
index 0000000..bf16870
--- /dev/null
+++ b/src/components/Sidebar.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+
+interface SidebarProps {
+  activeSection: string;
+}
+
+export default function Sidebar({ activeSection }: SidebarProps) {
+  const sections = [
+    { name: 'Home', icon: 'H', href: '/' },
+    { name: 'Physics', icon: 'P', href: '/physics' },
+    { name: 'Chemistry', icon: 'C', href: '/chemistry' },
+    { name: 'Settings', icon: 'S', href: '/settings' },
+  ];
+
+  return (
+    <div className="w-64 h-screen bg-white shadow-md">
+      <div className="flex flex-col items-center py-8">
+        <div className="w-16 h-16 rounded-full bg-gray-300 mb-4"></div>
+        <div className="text-lg font-semibold">Gram Liu</div>
+      </div>
+      <nav className="mt-8">
+        {sections.map((section) => (
+          <Link key={section.name} href={section.href} passHref>
+            <a
+              className={`flex items-center px-4 py-2 text-gray-700 ${activeSection === section.name ? 'bg-gray-200' : 'hover:bg-gray-200'}`}
+            >
+              <Image src={`https://dummyimage.com/24x24/000/fff&text=${section.icon}`} width={24} height={24} alt={`${section.name} Icon`} className="mr-3" />
+              {section.name}
+            </a>
+          </Link>
+        ))}
+      </nav>
+    </div>
+  );
+}