diff --git a/package-lock.json b/package-lock.json
index 03de7bb..9dd7416 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
         "passport": "^0.7.0",
         "passport-google-oauth20": "^2.0.0",
         "redis": "^5.6.1",
+        "sanitize-html": "^2.17.0",
         "socket.io": "^4.7.5",
         "winston": "^3.17.0"
       },
@@ -2476,7 +2477,6 @@
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
       "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2528,6 +2528,61 @@
         "wrappy": "1"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/dotenv": {
       "version": "16.6.1",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
@@ -2670,6 +2725,18 @@
         }
       }
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -3412,6 +3479,25 @@
       "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
       "dev": true
     },
+    "node_modules/htmlparser2": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "entities": "^4.4.0"
+      }
+    },
     "node_modules/http-errors": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@@ -3587,6 +3673,15 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-stream": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -4748,6 +4843,24 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/napi-postinstall": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.2.tgz",
@@ -5026,6 +5139,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parse-srcset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==",
+      "license": "MIT"
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -5156,8 +5275,7 @@
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -5193,6 +5311,34 @@
         "node": ">=8"
       }
     },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "30.0.5",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.0.5.tgz",
@@ -5429,6 +5575,32 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "license": "MIT"
     },
+    "node_modules/sanitize-html": {
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.17.0.tgz",
+      "integrity": "sha512-dLAADUSS8rBwhaevT12yCezvioCA+bmUTPH/u57xKPT8d++voeYE6HeluA/bPbQ15TwDBG2ii+QZIEmYx8VdxA==",
+      "license": "MIT",
+      "dependencies": {
+        "deepmerge": "^4.2.2",
+        "escape-string-regexp": "^4.0.0",
+        "htmlparser2": "^8.0.0",
+        "is-plain-object": "^5.0.0",
+        "parse-srcset": "^1.0.2",
+        "postcss": "^8.3.11"
+      }
+    },
+    "node_modules/sanitize-html/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/semver": {
       "version": "7.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
@@ -5747,6 +5919,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-support": {
       "version": "0.5.13",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
diff --git a/package.json b/package.json
index e62d0ed..9ca0fac 100644
--- a/package.json
+++ b/package.json
@@ -27,12 +27,13 @@
     "mongodb": "^6.5.0",
     "mongoose": "^8.10.0",
     "morgan": "^1.10.1",
+    "nodemailer": "^6.9.14",
     "passport": "^0.7.0",
     "passport-google-oauth20": "^2.0.0",
     "redis": "^5.6.1",
-  "winston": "^3.17.0",
-  "socket.io": "^4.7.5",
-  "nodemailer": "^6.9.14"
+    "sanitize-html": "^2.17.0",
+    "socket.io": "^4.7.5",
+    "winston": "^3.17.0"
   },
   "devDependencies": {
     "jest": "^30.0.5",
diff --git a/public/css/main.css b/public/css/main.css
index 2944bd2..6f9c72f 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -1,3 +1,11 @@
+
+#editor {
+  min-height: 200px;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+}
+
 :root{
     --background-color : #EDC7B7;
     --bs-primary-rgb: #AC3B61;
diff --git a/server/controllers/dashboardController.js b/server/controllers/dashboardController.js
index 3371baf..715bb2e 100644
--- a/server/controllers/dashboardController.js
+++ b/server/controllers/dashboardController.js
@@ -1,3 +1,5 @@
+const sanitizeHtml = require("sanitize-html");
+
 const noteService = require('../services/noteService');
 const Note = require('../models/Notes');
 const { asyncHandler } = require('../utils/errors');
@@ -82,9 +84,18 @@ exports.dashboardViewNote = asyncHandler(async (req, res) => {
  * Update specific note
  */
 exports.dashboardUpdateNote = asyncHandler(async (req, res) => {
+  const cleanBody = sanitizeHtml(req.body.body, {
+    allowedTags: sanitizeHtml.defaults.allowedTags.concat([ 'img', 'h1', 'h2', 'u', 'span' ]),
+    allowedAttributes: {
+      ...sanitizeHtml.defaults.allowedAttributes,
+      img: ['src', 'alt', 'width', 'height'],
+      span: ['class'],
+    }
+  });
+  
   await noteService.updateNote(req.params.id, req.user.id, {
     title: req.body.title,
-    body: req.body.body
+    body: cleanBody
   });
 
   req.session.successMessage = 'Note updated successfully!';
@@ -123,10 +134,22 @@ exports.dashboardAddNote = asyncHandler(async (req, res) => {
  * Create new note
  */
 exports.dashboardAddNotePost = asyncHandler(async (req, res) => {
-  await noteService.createNote({
-    title: req.body.title,
-    body: req.body.body
-  }, req.user.id);
+  const cleanBody = sanitizeHtml(req.body.body, {
+    allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'h1', 'h2', 'u', 'span']),
+    allowedAttributes: {
+      ...sanitizeHtml.defaults.allowedAttributes,
+      img: ['src', 'alt', 'width', 'height'],
+      span: ['class'],
+    },
+  });
+
+  await noteService.createNote(
+    {
+      title: req.body.title,
+      body: cleanBody,
+    },
+    req.user.id
+  );
 
   req.session.successMessage = 'Note created successfully!';
   res.redirect('/dashboard');
diff --git a/views/dashboard/add.ejs b/views/dashboard/add.ejs
index 5a7c627..e85994e 100644
--- a/views/dashboard/add.ejs
+++ b/views/dashboard/add.ejs
@@ -20,13 +20,25 @@
 
         <form action="/dashboard/add" method="POST" class="d-flex flex-column h-100">
             <div class="form-floating mb-4">
-                <input type="text" class="form-control" id="title" name="title" placeholder="Note Title" required value="<%= typeof formData !== 'undefined' ? formData.title : '' %>" />
+                <input 
+                    type="text" 
+                    class="form-control" 
+                    id="title" 
+                    name="title" 
+                    placeholder="Note Title" 
+                    required 
+                    value="<%= typeof formData !== 'undefined' ? formData.title : '' %>" />
                 <label for="title">Title</label>
             </div>
 
-            <div class="form-floating mb-4 flex-grow-1">
-                <textarea class="form-control" id="body" name="body" placeholder="Start writing your note here..." style="height: 400px; resize: vertical;" required><%= typeof formData !== 'undefined' ? formData.body : '' %></textarea>
-                <label for="body">Content</label>
+            <!-- Quill Editor -->
+            <div class="mb-4 flex-grow-1">
+                <label for="editor" class="form-label">Content</label>
+                <div id="editor" style="height: 400px; background: #fff; border: 1px solid #ccc; border-radius: 8px;">
+                </div>
+                <!-- Hidden field that stores HTML -->
+                <input type="hidden" name="body" id="hiddenBody" 
+                       value="<%= typeof formData !== 'undefined' ? formData.body : '' %>">
             </div>
 
             <div class="d-grid">
@@ -35,3 +47,21 @@
         </form>
     </div>
 </div>
+
+<!-- Quill.js -->
+<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
+<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
+<script>
+    const quill = new Quill('#editor', { theme: 'snow' });
+
+    // Preload content if editing failed (error with formData)
+    const existingContent = document.querySelector("#hiddenBody").value;
+    if (existingContent) {
+        quill.root.innerHTML = existingContent;
+    }
+
+    // Sync content into hidden field before submit
+    document.querySelector("form").onsubmit = function() {
+        document.querySelector("#hiddenBody").value = quill.root.innerHTML;
+    };
+</script>
diff --git a/views/dashboard/edit.ejs b/views/dashboard/edit.ejs
new file mode 100644
index 0000000..260de5a
--- /dev/null
+++ b/views/dashboard/edit.ejs
@@ -0,0 +1,31 @@
+<div class="d-flex flex-column flex-grow-1">
+    <div class="card shadow-lg rounded-4 p-4 border-0 flex-grow-1" style="background-color: #fff;">
+      <% if (typeof error !== 'undefined') { %>
+        <div class="alert alert-danger"><%= error %></div>
+      <% } %>
+  
+      <form action="/dashboard/edit/<%= note._id %>?_method=PUT" method="POST" class="h-100 d-flex flex-column">
+        <div id="editor" class="flex-grow-1"></div>
+        <input type="hidden" name="body" id="hiddenBody">
+  
+        <button type="submit" class="btn btn-primary mt-3">Update Note</button>
+      </form>
+    </div>
+  </div>
+  
+  <!-- Quill -->
+  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
+  <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
+  
+  <script>
+    const quill = new Quill('#editor', { theme: 'snow' });
+  
+    // Preload existing note content
+    quill.root.innerHTML = `<%- note.body %>`;
+  
+    // Sync content back to hidden input on form submit
+    document.querySelector("form").onsubmit = function() {
+      document.querySelector("#hiddenBody").value = quill.root.innerHTML;
+    };
+  </script>
+  
\ No newline at end of file
diff --git a/views/dashboard/view-notes.ejs b/views/dashboard/view-notes.ejs
index 9687c88..450a024 100644
--- a/views/dashboard/view-notes.ejs
+++ b/views/dashboard/view-notes.ejs
@@ -1,3 +1,7 @@
+<h2><%= note.title %></h2>
+<div>
+  <%- note.body %> <!-- notice: <%- %> instead of <%= %> -->
+</div>
 
 <div class="container-fluid container-fluid-custom pb-5 mb-5 px-4" style="overflow-x: hidden;">