diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index bf263208..91fa0e7f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -18,6 +18,7 @@
         "dompurify": "^3.1.4",
         "file-saver": "^2.0.5",
         "framer-motion": "^11.2.10",
+        "highlight.js": "^11.10.0",
         "i18next": "^23.11.5",
         "jszip": "^3.10.1",
         "react": "^18.2.0",
@@ -3043,6 +3044,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz",
+      "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/html-parse-stringify": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
@@ -7121,6 +7130,11 @@
         "function-bind": "^1.1.2"
       }
     },
+    "highlight.js": {
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz",
+      "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ=="
+    },
     "html-parse-stringify": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 8ff7f34d..cb477efd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,6 +20,7 @@
     "dompurify": "^3.1.4",
     "file-saver": "^2.0.5",
     "framer-motion": "^11.2.10",
+    "highlight.js": "^11.10.0",
     "i18next": "^23.11.5",
     "jszip": "^3.10.1",
     "react": "^18.2.0",
diff --git a/frontend/src/components/PostCodeWindow.tsx b/frontend/src/components/PostCodeWindow.tsx
index 9a3e4ab7..dff266ba 100644
--- a/frontend/src/components/PostCodeWindow.tsx
+++ b/frontend/src/components/PostCodeWindow.tsx
@@ -1,3 +1,7 @@
+import { useEffect } from "react";
+import hljs from "highlight.js";
+import "highlight.js/styles/agate.css"; 
+
 function PostCodeWindow({
   codeSnippet,
   jsCodeSnippet,
@@ -7,26 +11,38 @@ function PostCodeWindow({
   codeSnippet: string;
   jsCodeSnippet: string;
   activeTab: string;
-  handleTabSwitch: (tab: "html" | "js") => void
+  handleTabSwitch: (tab: "html" | "js") => void;
 }) {
+  useEffect(() => {
+    hljs.highlightAll();
+  }, [codeSnippet, jsCodeSnippet, activeTab]);
+
+  useEffect(() => {
+    const highlightedCode = document.querySelectorAll("pre code");
+    highlightedCode.forEach((block) => {
+      block.removeAttribute("data-highlighted");
+      hljs.highlightElement(block as HTMLElement);
+    });
+  }, [activeTab]);
+
   return (
     <>
-      <div className="mb-2 ">
+      <div className="mb-2">
         <div className="flex p-1 border-2 border-sky-500 rounded">
           <button
             onClick={() => handleTabSwitch("html")}
-            className={`px-2 py-1  mx-1 font-semibold rounded-md ${
+            className={`px-2 py-1 mx-1 font-semibold rounded-md ${
               activeTab === "html"
-                ? "bg-sky-500 text-[#ffffff] dark:bg-sky-500 dark:text-white "
+                ? "bg-sky-500 text-[#ffffff] dark:bg-sky-500 dark:text-white"
                 : "border border-sky-500 text-sky-500 dark:text-white"
             }`}
           >
             HTML
           </button>
-          {jsCodeSnippet != "" ? (
+          {jsCodeSnippet !== "" && (
             <button
               onClick={() => handleTabSwitch("js")}
-              className={`px-2 py-1  mx-1 font-semibold rounded-md ${
+              className={`px-2 py-1 mx-1 font-semibold rounded-md ${
                 activeTab === "js"
                   ? "bg-sky-500 text-[#ffffff] dark:bg-sky-500 dark:text-white"
                   : "border border-sky-500 text-sky-500 dark:text-white"
@@ -34,19 +50,19 @@ function PostCodeWindow({
             >
               JavaScript
             </button>
-          ) : null}
-        </div>
-        <div className="">
-          {activeTab === "html" ? (
-            <pre className="p-4 text-[#000435] bg-sky-300 dark:text-white dark:bg-[#223bb9] border-4 border-sky-700 rounded overflow-auto max-h-96">
-              <code>{codeSnippet}</code>
-            </pre>
-          ) : (
-            <pre className="p-4 text-[#000435] bg-sky-300 dark:text-white dark:bg-[#223bb9] border-4 border-sky-700 rounded overflow-auto max-h-96">
-              <code>{jsCodeSnippet}</code>
-            </pre>
           )}
         </div>
+        <div className="">
+        {activeTab === "html" ? (
+          <pre className="p-4 text-[#000435] bg-sky-300 dark:text-white dark:bg-gray-800 border-4 border-sky-700 rounded overflow-auto max-h-96">
+            <code className="html rounded-lg">{codeSnippet}</code>
+          </pre>
+        ) : (
+          <pre className="p-4 text-[#000435] bg-sky-300 dark:text-white dark:bg-gray-800 border-4 border-sky-700 rounded overflow-auto max-h-96">
+            <code className="javascript rounded-lg">{jsCodeSnippet}</code>
+          </pre>
+        )}
+      </div>
       </div>
     </>
   );