diff --git a/assets/addition.png b/assets/addition.png
new file mode 100644
index 0000000..6f45d3c
Binary files /dev/null and b/assets/addition.png differ
diff --git a/assets/list.png b/assets/list.png
new file mode 100644
index 0000000..ab076e4
Binary files /dev/null and b/assets/list.png differ
diff --git a/assets/writing.png b/assets/writing.png
new file mode 100644
index 0000000..59ef13c
Binary files /dev/null and b/assets/writing.png differ
diff --git a/index.html b/index.html
index 8c5ff97..07e3069 100644
--- a/index.html
+++ b/index.html
@@ -31,6 +31,7 @@
           <a href="#about" class="nav-link">About</a>
           <a href="#reviews" class="nav-link">Reviews</a>
           <a href="#contact" class="nav-link">Contact Us</a>
+          <a href="notepad.html" class="nav-link" target="_self">Keep Notes</a>
           <a href="https://github.com/Varshitha713/CodeCanvas" class="btn-primary" target="_blank">
             <i class="fab fa-github"></i> GitHub
           </a>
diff --git a/notepad.css b/notepad.css
new file mode 100644
index 0000000..337dea7
--- /dev/null
+++ b/notepad.css
@@ -0,0 +1,284 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.theme-toggle {
+            background: transparent;
+            border: 2px solid var(--toggle-border);
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: background 0.3s ease, transform 0.3s ease;
+            font-size: 1.2rem;
+            color: var(--toggle-icon);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            margin-right: 50px;
+}
+
+.theme-toggle:hover {
+    background: var(--toggle-hover);
+    transform: scale(1.1);
+}
+
+.theme-toggle span {
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+:root {
+    --toggle-border: #ddd;
+    --toggle-icon: #333;
+    --toggle-hover: #f0f0f0;
+    --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    --text-color: black;
+    --bg-card: rgba(255, 255, 255, 0.95);
+    --text-card: #333;
+    --box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+    --bg-header: rgba(255, 255, 255, 0.95);
+    --header-border: rgba(255, 255, 255, 0.18);
+    --card-bg: rgba(255, 255, 255, 0.95);
+    --card-border: rgba(255, 255, 255, 0.18);
+    --card-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+    --card-hover-shadow: 0 20px 40px rgba(31, 38, 135, 0.5);
+    --nav-link-color: #333; 
+    --nav-link-hover-bg: rgba(102, 126, 234, 0.1);
+    --project-title-color: #333;
+    --placeholder-bg: linear-gradient(135deg, #f5f7fa, #c3cfe2);
+    --placeholder-text: #666;
+}
+
+.dark-theme {
+    --toggle-border: #888;
+    --toggle-icon: #f9f9f9;
+    --toggle-hover: #333;
+    --bg-gradient: linear-gradient(135deg, #1a1445 0%, #2c1d5c 100%);
+    --text-color: #e4e4f0;
+    --bg-card: rgba(30, 25, 60, 0.9); 
+    --text-card: #eee;
+    --box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+    --bg-header: rgba(30, 25, 60, 0.9); 
+    --header-border: rgba(255, 255, 255, 0.05);
+    --card-bg: rgba(30, 25, 60, 0.9);
+    --card-border: rgba(255, 255, 255, 0.05);
+    --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
+    --nav-link-color: #f1f1f1;
+    --nav-link-hover-bg: rgba(255, 255, 255, 0.1);
+    --project-title-color: #ffffff;
+    --placeholder-bg: linear-gradient(135deg, #2a2d3e, #3b3f59);  /* deep bluish-purple tone */
+    --placeholder-text: #ddd;
+}
+
+.header {
+    background: var(--bg-header);
+    backdrop-filter: blur(10px);
+    box-shadow: var(--box-shadow);
+    border-bottom: 1px solid var(--header-border);
+    padding: 1rem 0;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    transition: background 0.3s, border-bottom 0.3s, box-shadow 0.3s;
+}
+
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.logo {
+    font-size: 2rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-left: 50px;
+}
+
+.nav {
+    display: flex;
+    gap: 2rem;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.nav-link {
+    color: var(--nav-link-color);
+    text-decoration: none;
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.nav-link:hover {
+    background: var(--nav-link-hover-bg);
+    transform: translateY(-2px);
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    background: var(--bg-gradient);
+    color: var(--text-color);
+    min-height: 100vh;
+    transition: background 0.3s ease, color 0.3s ease;
+}
+
+main {
+    margin-left: 100px;
+    margin-right: 100px;
+}
+
+.dark-theme .add_notes {
+    background: inherit;
+    backdrop-filter: blur(14px);
+    border-radius: 16px;
+    padding: 25px;
+    margin-top: 60px;
+    border: 2px solid rgba(255, 255, 255, 0.8);
+    box-shadow: 0 0 18px rgba(255, 255, 255, 0.75); 
+}
+
+.add_notes, .mynotes {
+    background: inherit;
+    backdrop-filter: blur(14px);
+    border-radius: 16px;
+    padding: 25px;
+    margin-top: 60px;
+    border: 2px solid rgba(255, 255, 255, 0.7); 
+    box-shadow: 0 0 14px rgba(255, 255, 255, 0.6);
+}
+
+.add_notes h2 .add, .mynotes h2 img{
+    width: 25px;
+    height: 25px;
+    filter: none;
+}
+
+.mynotes h2 img{
+    margin-right: 5px;
+    transform: translateY(2px);
+}
+
+.dark-theme .add_notes h2 .add, .dark-theme .mynotes h2 img{
+    filter: invert(100%) brightness(100%);
+}
+
+.add_notes h2{
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--text-color);
+}
+
+.mynotes h2{
+    margin-bottom: 15px;
+}
+.add_notes label{
+    font-size: 20px;
+    letter-spacing: 0.5px;
+}
+
+.add_notes input:focus, .add_notes textarea:focus{
+    border-color: var(--primary-color);
+    box-shadow: 0 0 6px rgba(30, 144, 255, 0.5);
+    outline: none;
+}
+
+.add_notes #title{
+    width: 100%;
+    padding: 10px;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    margin-top: 10px;
+}
+
+.add_notes textarea{
+    width: 100%;
+    height: 150px;
+    padding: 10px;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-family:'Inter', sans-serif;
+    resize: vertical;
+    margin-top: 10px;
+}
+
+.add_notes button {
+    padding: 10px 18px;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    font-weight: 600;
+    cursor: pointer;
+    background: transparent;
+    color: var(--text-color);
+    border: 1.5px solid rgba(255, 255, 255, 0.6);
+    transition: all 0.3s ease;
+}
+
+.add_notes button:hover {
+  border-color: #000;
+  background: rgba(0, 0, 0, 0.05);
+  transform: translateY(-1px);
+}
+
+.notes-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+}
+
+.note-card {
+    background: var(--card-bg);
+    padding: 18px;
+    border-radius: 12px;
+    box-shadow: var(--card-shadow);
+    border: 1px solid var(--card-border);
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.note-card h3 {
+    margin-bottom: 10px;
+    color: var(--text-color);
+}
+
+.note-card p {
+    color: var(--text-color);
+    white-space: pre-wrap;
+}
+
+.note-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.delete-btn {
+    background: transparent;
+    border: none;
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: 0.2s;
+}
+
+.delete-btn:hover {
+    transform: scale(1.2);
+    color: red;
+}
diff --git a/notepad.html b/notepad.html
new file mode 100644
index 0000000..0cf8440
--- /dev/null
+++ b/notepad.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Keep notes</title>
+        <link rel="icon" type="image/png" href="assets/writing.png"/>
+        <link rel="stylesheet" href="notepad.css" />
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    </head>
+    <body>
+        <header class="header">
+            <div class="container">
+                <div class="header-content">
+                    <div class="logo">CodeCanvas</div>
+                    <nav class="nav">
+                        <a href="index.html" class="nav-link">Home</a>
+                        <a href="#mynotes" class="nav-link">My Notes</a>
+                        <a href="#addnotes" class="nav-link">Add Notes</a>
+
+                        <button class="theme-toggle" id="darkModeToggle" aria-label="Toggle Theme">
+                            <span id="themeIcon">🌙</span>
+                        </button>
+                    </nav>
+                </div>
+            </div>
+        </header>
+        <main>
+            <div id="mynotes" class="mynotes">
+                <h2><img src="assets/list.png">My Notes</h2>
+                <div id="notesContainer" class="notes-grid"></div>
+            </div>
+            <div id="addnotes" class="add_notes">
+                <h2><img src="assets/addition.png" class="add">Add Notes</h2>
+                <label for="title">Title:</label><br>
+                <input type="text" id="title" name="title" placeholder="Title of the notes"/><br><br>
+                <label for="content">Content:</label><br>
+                <textarea id="content" name="content" rows="10" cols="50" placeholder="Add your content"></textarea><br><br>
+                <button onclick="saveNote()">Save Note</button>
+            </div>
+        </main>
+        <script src="notepad.js"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/notepad.js b/notepad.js
new file mode 100644
index 0000000..4862aea
--- /dev/null
+++ b/notepad.js
@@ -0,0 +1,110 @@
+const toggle = document.getElementById('darkModeToggle');
+const body = document.body;
+const icon = document.getElementById('themeIcon');
+
+// Load saved theme
+const savedTheme = localStorage.getItem('theme');
+if (savedTheme === 'dark') {
+    body.classList.add('dark-theme');
+    icon.textContent = '☀️';  // Sun when in dark mode
+} else {
+    icon.textContent = '🌙';  // Moon in light mode
+}
+
+// Toggle theme
+toggle.addEventListener('click', () => {
+    body.classList.toggle('dark-theme');
+    const theme = body.classList.contains('dark-theme') ? 'dark' : 'light';
+    localStorage.setItem('theme', theme);
+
+    // Update icon
+    icon.textContent = theme === 'dark' ? '☀️' : '🌙';
+});
+
+
+    function saveNote() {
+        const title = document.getElementById("title").value.trim();
+        const content = document.getElementById("content").value.trim();
+
+        if (!title || !content) {
+            alert("Please fill both Title and Content!");
+            return;
+        }
+
+        const note = { title, content };
+
+        // Get existing notes
+        let notes = JSON.parse(localStorage.getItem("notes")) || [];
+
+        // Add new note
+        notes.push(note);
+
+        // Save back to localStorage
+        localStorage.setItem("notes", JSON.stringify(notes));
+
+        // Refresh note display
+        displayNotes();
+
+        // Clear inputs
+        document.getElementById("title").value = "";
+        document.getElementById("content").value = "";
+        localStorage.removeItem("draft_title");
+        localStorage.removeItem("draft_content");
+    }
+
+    function displayNotes() {
+        const notes = JSON.parse(localStorage.getItem("notes")) || [];
+        const container = document.getElementById("notesContainer");
+
+        container.innerHTML = ""; // Clear old content
+
+        notes.forEach((note, index) => {
+            const card = document.createElement("div");
+            card.classList.add("note-card");
+
+            card.innerHTML = `
+                <div class="note-header">
+                    <h3>${note.title}</h3>
+                    <button class="delete-btn" onclick="deleteNote(${index})">🗑</button>
+                </div>
+                <p>${note.content}</p>
+            `;
+
+
+            container.appendChild(card);
+        });
+    }
+
+    function deleteNote(index) {
+        let notes = JSON.parse(localStorage.getItem("notes")) || [];
+
+        // Remove selected note
+        notes.splice(index, 1);
+
+        // Save updated list
+        localStorage.setItem("notes", JSON.stringify(notes));
+
+        // Refresh display
+        displayNotes();
+    }
+
+    document.addEventListener("DOMContentLoaded", () => {
+        const draftTitle = localStorage.getItem("draft_title") || "";
+        const draftContent = localStorage.getItem("draft_content") || "";
+
+        document.getElementById("title").value = draftTitle;
+        document.getElementById("content").value = draftContent;
+
+        displayNotes();
+    });
+
+    // Save draft automatically when typing
+    document.getElementById("title").addEventListener("input", () => {
+        localStorage.setItem("draft_title", document.getElementById("title").value);
+    });
+
+    document.getElementById("content").addEventListener("input", () => {
+        localStorage.setItem("draft_content", document.getElementById("content").value);
+    });
+    // Load notes on page load
+    document.addEventListener("DOMContentLoaded", displayNotes);