diff --git a/package-lock.json b/package-lock.json
index 98f6c4a..1460c2b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,12 @@
       "name": "issp5-front-end",
       "version": "0.0.0",
       "dependencies": {
+        "@codemirror/lang-css": "^6.2.0",
+        "@codemirror/lang-html": "^6.4.3",
+        "@codemirror/lang-javascript": "^6.1.9",
+        "@fortawesome/fontawesome-free": "^6.7.2",
+        "@uiw/codemirror-theme-vscode": "^4.21.9",
+        "@uiw/react-codemirror": "^4.21.9",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-router-dom": "^6.27.0",
@@ -263,6 +269,18 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
+      "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.27.0",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.0.tgz",
@@ -321,6 +339,143 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.18.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.6.tgz",
+      "integrity": "sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.8.1.tgz",
+      "integrity": "sha512-KlGVYufHMQzxbdQONiLyGQDUW0itrLZwq3CcY7xpv9ZLRHqzkBSoteocBHtMCoY7/Ci4xhzSrToIeLg7FxHuaw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.4.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/lang-css": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.2.0.tgz",
+      "integrity": "sha512-oyIdJM29AyRPM3+PPq1I2oIk8NpUfEN3kAM05XWDDs6o3gSneIKaVJifT2P+fqONLou2uIgXynFyMUDQvo/szA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.2",
+        "@lezer/css": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-html": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.3.tgz",
+      "integrity": "sha512-VKzQXEC8nL69Jg2hvAFPBwOdZNvL8tMFOrdFwWpU+wc6a6KEkndJ/19R5xSaglNX6v2bttm8uIEFYxdQDcIZVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.2.2",
+        "@lezer/common": "^1.0.0",
+        "@lezer/css": "^1.1.0",
+        "@lezer/html": "^1.3.0"
+      }
+    },
+    "node_modules/@codemirror/lang-javascript": {
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.1.9.tgz",
+      "integrity": "sha512-z3jdkcqOEBT2txn2a87A0jSy6Te3679wg/U8QzMeftFt+4KA6QooMwfdFzJiuC3L6fXKfTXZcDocoaxMYfGz0w==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/javascript": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.11.0.tgz",
+      "integrity": "sha512-A7+f++LodNNc1wGgoRDTt78cOwWm9KVezApgjOMp1W4hM0898nsqBXwF+sbePE7ZRcjN7Sa1Z5m2oN27XkmEjQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.1.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.8.5",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.5.tgz",
+      "integrity": "sha512-s3n3KisH7dx3vsoeGMxsbRAgKe4O1vbrnKBClm99PU0fWxmxsx5rR2PfqQgIt+2MMJBHbiJ5rfIdLYfB9NNvsA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.35.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/search": {
+      "version": "6.5.10",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.10.tgz",
+      "integrity": "sha512-RMdPdmsrUf53pb2VwflKGHEe1XVM07hI7vV2ntgw1dmqhimpatSJKva4VA9h4TLUDOD4EIF02201oZurpnEFsg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.2.tgz",
+      "integrity": "sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==",
+      "license": "MIT",
+      "dependencies": {
+        "@marijn/find-cluster-break": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/theme-one-dark": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz",
+      "integrity": "sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.36.5",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.36.5.tgz",
+      "integrity": "sha512-cd+FZEUlu3GQCYnguYm3EkhJ8KJVisqqUsCOKedBoAt/d9c76JUUap6U0UrpElln5k6VyrEOYliMuDAKIeDQLg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.5.0",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.2",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.2.tgz",
@@ -910,6 +1065,15 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
+      "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==",
+      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1029,6 +1193,69 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@lezer/common": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz",
+      "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==",
+      "license": "MIT"
+    },
+    "node_modules/@lezer/css": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.1.11.tgz",
+      "integrity": "sha512-FuAnusbLBl1SEAtfN8NdShxYJiESKw9LAFysfea1T96jD3ydBn12oYjaSG1a04BQRIUd93/0D8e5CV1cUMkmQg==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz",
+      "integrity": "sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/html": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.10.tgz",
+      "integrity": "sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/javascript": {
+      "version": "1.4.21",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.21.tgz",
+      "integrity": "sha512-lL+1fcuxWYPURMM/oFZLEDm0XuLN128QPV+VuGtKpeaOGdcl9F2LYC3nh1S9LkPqx9M0mndZFdXCipNAZpzIkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.1.3",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz",
+      "integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@marijn/find-cluster-break": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
+      "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==",
+      "license": "MIT"
+    },
     "node_modules/@parcel/watcher": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
@@ -1693,6 +1920,78 @@
         "@types/react": "^19.0.0"
       }
     },
+    "node_modules/@uiw/codemirror-extensions-basic-setup": {
+      "version": "4.21.9",
+      "resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.21.9.tgz",
+      "integrity": "sha512-TQT6aF8brxZpFnk/K4fm/K/9k9eF3PMav/KKjHlYrGUT8BTNk/qL+ximLtIzvTUhmBFchjM1lrqSJdvpVom7/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      },
+      "peerDependencies": {
+        "@codemirror/autocomplete": ">=6.0.0",
+        "@codemirror/commands": ">=6.0.0",
+        "@codemirror/language": ">=6.0.0",
+        "@codemirror/lint": ">=6.0.0",
+        "@codemirror/search": ">=6.0.0",
+        "@codemirror/state": ">=6.0.0",
+        "@codemirror/view": ">=6.0.0"
+      }
+    },
+    "node_modules/@uiw/codemirror-theme-vscode": {
+      "version": "4.21.9",
+      "resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-vscode/-/codemirror-theme-vscode-4.21.9.tgz",
+      "integrity": "sha512-lrS3CoTcEH1KnMuqKAvLUTsaUAsZoBvdecfUeiMgGR807mTa66iX4yk0N2+0LslqGPU4vXO5SbkwBOHBeQL2Yw==",
+      "license": "MIT",
+      "dependencies": {
+        "@uiw/codemirror-themes": "4.21.9"
+      }
+    },
+    "node_modules/@uiw/codemirror-themes": {
+      "version": "4.21.9",
+      "resolved": "https://registry.npmjs.org/@uiw/codemirror-themes/-/codemirror-themes-4.21.9.tgz",
+      "integrity": "sha512-ndfka95Ax4LXQSPVtCXJC3Qu2ruhlWUB7PAj+qTeMZobYJdXRxDEm4jMl+/d5fN1ok3jivShQdNgIwvEIFf4lg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      },
+      "peerDependencies": {
+        "@codemirror/language": ">=6.0.0",
+        "@codemirror/state": ">=6.0.0",
+        "@codemirror/view": ">=6.0.0"
+      }
+    },
+    "node_modules/@uiw/react-codemirror": {
+      "version": "4.21.9",
+      "resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.21.9.tgz",
+      "integrity": "sha512-aeLegPz2iCvqJjhzXp2WUMqpMZDqxsTnF3rX9kGRlfY6vQLsrjoctj0cQ29uxEtFYJChOVjtCOtnQUlyIuNAHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.6",
+        "@codemirror/commands": "^6.1.0",
+        "@codemirror/state": "^6.1.1",
+        "@codemirror/theme-one-dark": "^6.0.0",
+        "@uiw/codemirror-extensions-basic-setup": "4.21.9",
+        "codemirror": "^6.0.0"
+      },
+      "peerDependencies": {
+        "@babel/runtime": ">=7.11.0",
+        "@codemirror/state": ">=6.0.0",
+        "@codemirror/theme-one-dark": ">=6.0.0",
+        "@codemirror/view": ">=6.0.0",
+        "codemirror": ">=6.0.0",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.4.tgz",
@@ -1903,6 +2202,21 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/codemirror": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
+      "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1937,6 +2251,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2901,6 +3221,12 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3032,6 +3358,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-mod": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
+      "integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==",
+      "license": "MIT"
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -3184,6 +3516,12 @@
         }
       }
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index c5e630d..61efa9e 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@codemirror/lang-css": "^6.2.0",
+    "@codemirror/lang-html": "^6.4.3",
+    "@codemirror/lang-javascript": "^6.1.9",
+    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@uiw/codemirror-theme-vscode": "^4.21.9",
+    "@uiw/react-codemirror": "^4.21.9",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^6.27.0",
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index ad99c38..deb40e6 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,11 +1,26 @@
-
+import { Link } from "react-router-dom";
 const Header = () => {
-  
-    return (
-        <header>
-            <h1><a href="#0">Header</a></h1>
-        </header>
-    );
-}
+  return (
+    <header>
+      <h1>
+        {" "}
+        <Link to="/">ISSP5</Link>{" "}
+      </h1>
+      <nav>
+        <ul>
+          <li>
+            <Link to="/">Home</Link>
+          </li>
+          <li>
+            <Link to="/editor">CodeEditor</Link>
+          </li>
+          <li>
+            <Link to="/login">Login</Link>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  );
+};
 
-export default Header;
\ No newline at end of file
+export default Header;
diff --git a/src/components/ProtectedRoute.jsx b/src/components/ProtectedRoute.jsx
new file mode 100644
index 0000000..72e6258
--- /dev/null
+++ b/src/components/ProtectedRoute.jsx
@@ -0,0 +1,14 @@
+import { Navigate } from "react-router-dom";
+
+const ProtectedRoute = ({ children }) => {
+  const isLoggedIn = localStorage.getItem("isLoggedIn") === "true";
+
+  if (!isLoggedIn) {
+    // Redirect to login if not logged in
+    return <Navigate to="/login" replace />;
+  }
+
+  return children;
+};
+
+export default ProtectedRoute;
diff --git a/src/pages/CodeEditor.jsx b/src/pages/CodeEditor.jsx
new file mode 100644
index 0000000..a8225a1
--- /dev/null
+++ b/src/pages/CodeEditor.jsx
@@ -0,0 +1,122 @@
+// Page - Code Editor
+import { useEffect, useState } from "react";
+import CodeMirror from "@uiw/react-codemirror";
+import { javascript } from "@codemirror/lang-javascript";
+import { html } from "@codemirror/lang-html";
+import { css } from "@codemirror/lang-css";
+import { vscodeDark } from "@uiw/codemirror-theme-vscode";
+
+const PageCodeEditor = () => {
+  // State for storing code in different tabs
+  const [htmlCode, setHtmlCode] = useState(
+    "<div>\n  <h1>Hello World</h1>\n  <p>Start editing to see some magic happen!</p>\n</div>"
+  );
+  const [cssCode, setCssCode] = useState(
+    "h1 {\n  color: #0070f3;\n}\n\np {\n  color: #444;\n}"
+  );
+  const [jsCode, setJsCode] = useState(
+    '// JavaScript goes here\nconsole.log("Hello from the editor!");'
+  );
+
+  // State for active tab
+  const [activeTab, setActiveTab] = useState("html");
+
+  // Combined code for preview
+  const combinedCode = `
+        <html>
+            <head>
+                <style>${cssCode}</style>
+            </head>
+            <body>
+                ${htmlCode}
+                <script>${jsCode}</script>
+            </body>
+        </html>
+    `;
+
+  useEffect(() => {
+    document.title = "Code Editor";
+  }, []);
+
+  // Function to handle which editor to show based on active tab
+  const renderEditor = () => {
+    switch (activeTab) {
+      case "html":
+        return (
+          <CodeMirror
+            value={htmlCode}
+            height="100%"
+            theme={vscodeDark}
+            extensions={[html()]}
+            onChange={(value) => setHtmlCode(value)}
+          />
+        );
+      case "css":
+        return (
+          <CodeMirror
+            value={cssCode}
+            height="100%"
+            theme={vscodeDark}
+            extensions={[css()]}
+            onChange={(value) => setCssCode(value)}
+          />
+        );
+      case "js":
+        return (
+          <CodeMirror
+            value={jsCode}
+            height="100%"
+            theme={vscodeDark}
+            extensions={[javascript()]}
+            onChange={(value) => setJsCode(value)}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <main className="code-editor-page">
+      <div className="editor-container">
+        <div className="editor-tabs">
+          <button
+            className={`tab ${activeTab === "html" ? "active" : ""}`}
+            onClick={() => setActiveTab("html")}
+          >
+            HTML
+          </button>
+          <button
+            className={`tab ${activeTab === "css" ? "active" : ""}`}
+            onClick={() => setActiveTab("css")}
+          >
+            CSS
+          </button>
+          <button
+            className={`tab ${activeTab === "js" ? "active" : ""}`}
+            onClick={() => setActiveTab("js")}
+          >
+            JavaScript
+          </button>
+        </div>
+        <div className="editor-content">{renderEditor()}</div>
+      </div>
+      <div className="preview-container">
+        <div className="preview-header">
+          <h3>Preview</h3>
+        </div>
+        <div className="preview-content">
+          <iframe
+            title="code-preview"
+            srcDoc={combinedCode}
+            sandbox="allow-scripts"
+            width="100%"
+            height="100%"
+          />
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default PageCodeEditor;
diff --git a/src/pages/PageHome.jsx b/src/pages/HomePage.jsx
similarity index 100%
rename from src/pages/PageHome.jsx
rename to src/pages/HomePage.jsx
diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx
new file mode 100644
index 0000000..e7b1385
--- /dev/null
+++ b/src/pages/LoginPage.jsx
@@ -0,0 +1,64 @@
+// Page - Login
+import { useEffect, useState } from "react";
+import SignInForm from "./SignIn";
+import SignUpForm from "./SignUp";
+import "../scss/styles.scss";
+
+const LoginPage = () => {
+  const [type, setType] = useState("signIn");
+
+  useEffect(() => {
+    document.title = "Login / Sign Up";
+  }, []);
+
+  const handleOnClick = (text) => {
+    if (text !== type) {
+      setType(text);
+    }
+  };
+
+  const containerClass =
+    "container " + (type === "signUp" ? "right-panel-active" : "");
+
+  return (
+    <main className="login-page">
+      <section>
+        <h2>Sign In/Sign Up</h2>
+        <div className={containerClass} id="container">
+          <SignUpForm />
+          <SignInForm />
+          <div className="overlay-container">
+            <div className="overlay">
+              <div className="overlay-panel overlay-left">
+                <h1>Welcome Back!</h1>
+                <p>
+                  To keep connected with us please login with your personal info
+                </p>
+                <button
+                  className="ghost"
+                  id="signIn"
+                  onClick={() => handleOnClick("signIn")}
+                >
+                  Sign In
+                </button>
+              </div>
+              <div className="overlay-panel overlay-right">
+                <h1>Hello, Friend!</h1>
+                <p>Enter your personal details and start journey with us</p>
+                <button
+                  className="ghost"
+                  id="signUp"
+                  onClick={() => handleOnClick("signUp")}
+                >
+                  Sign Up
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default LoginPage;
diff --git a/src/pages/SignIn.jsx b/src/pages/SignIn.jsx
new file mode 100644
index 0000000..b6a203a
--- /dev/null
+++ b/src/pages/SignIn.jsx
@@ -0,0 +1,68 @@
+import React from "react";
+import "@fortawesome/fontawesome-free/css/all.min.css";
+
+function SignInForm() {
+  const [state, setState] = React.useState({
+    email: "",
+    password: "",
+  });
+  const handleChange = (evt) => {
+    const value = evt.target.value;
+    setState({
+      ...state,
+      [evt.target.name]: value,
+    });
+  };
+
+  const handleOnSubmit = (evt) => {
+    evt.preventDefault();
+
+    const { email, password } = state;
+    alert(`You are login with email: ${email} and password: ${password}`);
+
+    for (const key in state) {
+      setState({
+        ...state,
+        [key]: "",
+      });
+    }
+  };
+
+  return (
+    <div className="form-container sign-in-container">
+      <form onSubmit={handleOnSubmit}>
+        <h1>Sign in</h1>
+        <div className="social-container">
+          <a href="#" className="social">
+            <i className="fab fa-facebook-f" />
+          </a>
+          <a href="#" className="social">
+            <i className="fab fa-google-plus-g" />
+          </a>
+          <a href="#" className="social">
+            <i className="fab fa-linkedin-in" />
+          </a>
+        </div>
+        <span>or use your account</span>
+        <input
+          type="email"
+          placeholder="Email"
+          name="email"
+          value={state.email}
+          onChange={handleChange}
+        />
+        <input
+          type="password"
+          name="password"
+          placeholder="Password"
+          value={state.password}
+          onChange={handleChange}
+        />
+        <a href="#">Forgot your password?</a>
+        <button>Sign In</button>
+      </form>
+    </div>
+  );
+}
+
+export default SignInForm;
diff --git a/src/pages/SignUp.jsx b/src/pages/SignUp.jsx
new file mode 100644
index 0000000..64d9042
--- /dev/null
+++ b/src/pages/SignUp.jsx
@@ -0,0 +1,75 @@
+import React from "react";
+function SignUpForm() {
+  const [state, setState] = React.useState({
+    name: "",
+    email: "",
+    password: "",
+  });
+  const handleChange = (evt) => {
+    const value = evt.target.value;
+    setState({
+      ...state,
+      [evt.target.name]: value,
+    });
+  };
+
+  const handleOnSubmit = (evt) => {
+    evt.preventDefault();
+
+    const { name, email, password } = state;
+    alert(
+      `You are sign up with name: ${name} email: ${email} and password: ${password}`
+    );
+
+    for (const key in state) {
+      setState({
+        ...state,
+        [key]: "",
+      });
+    }
+  };
+
+  return (
+    <div className="form-container sign-up-container">
+      <form onSubmit={handleOnSubmit}>
+        <h1>Create Account</h1>
+        <div className="social-container">
+          <a href="#" className="social">
+            <i className="fab fa-facebook-f" />
+          </a>
+          <a href="#" className="social">
+            <i className="fab fa-google-plus-g" />
+          </a>
+          <a href="#" className="social">
+            <i className="fab fa-linkedin-in" />
+          </a>
+        </div>
+        <span>or use your email for registration</span>
+        <input
+          type="text"
+          name="name"
+          value={state.name}
+          onChange={handleChange}
+          placeholder="Name"
+        />
+        <input
+          type="email"
+          name="email"
+          value={state.email}
+          onChange={handleChange}
+          placeholder="Email"
+        />
+        <input
+          type="password"
+          name="password"
+          value={state.password}
+          onChange={handleChange}
+          placeholder="Password"
+        />
+        <button>Sign Up</button>
+      </form>
+    </div>
+  );
+}
+
+export default SignUpForm;
diff --git a/src/routers/AppRouter.jsx b/src/routers/AppRouter.jsx
index 2f67646..475a255 100644
--- a/src/routers/AppRouter.jsx
+++ b/src/routers/AppRouter.jsx
@@ -5,23 +5,42 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 // Components
 import Header from "../components/Header";
 import Footer from "../components/Footer";
+import ProtectedRoute from "../components/ProtectedRoute";
 // Pages
-import PageHome from "../pages/PageHome";
+import HomePage from "../pages/HomePage";
+import LoginPage from "../pages/LoginPage";
+import PageCodeEditor from "../pages/CodeEditor";
 import PageNotFound from "../pages/PageNotFound";
 
-function AppRouter() {
+const AppRouter = () => {
   return (
     <BrowserRouter>
       <div className="wrapper">
         <Header />
         <Routes>
-          <Route path="/" exact element={<PageHome />} />
+          <Route path="/login" element={<LoginPage />} />
+          <Route
+            path="/"
+            element={
+              <ProtectedRoute>
+                <HomePage />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/editor"
+            element={
+              <ProtectedRoute>
+                <PageCodeEditor />
+              </ProtectedRoute>
+            }
+          />
           <Route path="*" element={<PageNotFound />} />
         </Routes>
         <Footer />
       </div>
     </BrowserRouter>
   );
-}
+};
 
 export default AppRouter;
diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
index ea88f2d..58bb0f4 100644
--- a/src/scss/components/_header.scss
+++ b/src/scss/components/_header.scss
@@ -1,11 +1,45 @@
 // Header
 
-@use '../base/settings' as *;
-@use '../utilities/mixins' as *;
+@use "../base/settings" as *;
+@use "../utilities/mixins" as *;
 
 header {
-    padding: $section-padding;
-    h1 {
-        @include flatten;
+  padding: $section-padding;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid $grey;
+
+  h1 {
+    @include flatten;
+
+    a {
+      text-decoration: none;
+      color: $dark;
+
+      &:hover {
+        color: $yellow;
+      }
     }
-}
\ No newline at end of file
+  }
+
+  nav {
+    ul {
+      @include flatten(true);
+      display: flex;
+      gap: 1rem;
+
+      li {
+        a {
+          text-decoration: none;
+          color: $dark;
+          font-weight: bold;
+
+          &:hover {
+            color: $yellow;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/scss/login.scss b/src/scss/login.scss
new file mode 100644
index 0000000..d2c183f
--- /dev/null
+++ b/src/scss/login.scss
@@ -0,0 +1,88 @@
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-color: #f5f5f5;
+
+  .login-card {
+    width: 100%;
+    max-width: 400px;
+    padding: 2rem;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+
+    h2 {
+      text-align: center;
+      margin-bottom: 1.5rem;
+      color: #333;
+    }
+
+    .error-message {
+      background-color: #ffecec;
+      color: #d63031;
+      padding: 0.75rem;
+      border-radius: 4px;
+      margin-bottom: 1rem;
+      text-align: center;
+    }
+
+    .form-group {
+      margin-bottom: 1rem;
+
+      label {
+        display: block;
+        margin-bottom: 0.5rem;
+        font-weight: 500;
+      }
+
+      input {
+        width: 100%;
+        padding: 0.75rem;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        font-size: 1rem;
+
+        &:focus {
+          outline: none;
+          border-color: #4a90e2;
+        }
+      }
+    }
+
+    .login-button {
+      width: 100%;
+      padding: 0.75rem;
+      background-color: #4a90e2;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      font-size: 1rem;
+      cursor: pointer;
+      transition: background-color 0.3s;
+
+      &:hover {
+        background-color: #3a7bc8;
+      }
+    }
+
+    .login-footer {
+      margin-top: 1.5rem;
+      text-align: center;
+
+      p {
+        margin-bottom: 0.5rem;
+      }
+
+      a {
+        color: #4a90e2;
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}
diff --git a/src/scss/page/_code_editor.scss b/src/scss/page/_code_editor.scss
new file mode 100644
index 0000000..e043864
--- /dev/null
+++ b/src/scss/page/_code_editor.scss
@@ -0,0 +1,97 @@
+// Code Editor Page Styling
+
+@use "../base/settings" as *;
+
+.code-editor-page {
+  display: flex;
+  height: calc(100vh - 120px); // Adjust based on your header/footer heights
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+
+  .editor-container,
+  .preview-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .editor-container {
+    border-right: 1px solid $grey;
+  }
+
+  .editor-tabs {
+    display: flex;
+    background-color: #1e1e1e;
+    border-bottom: 1px solid #333;
+
+    .tab {
+      padding: 8px 16px;
+      background: none;
+      border: none;
+      color: #ddd;
+      cursor: pointer;
+      font-size: 14px;
+
+      &:hover {
+        background-color: #2a2a2a;
+      }
+
+      &.active {
+        color: $yellow;
+        border-bottom: 2px solid $yellow;
+      }
+    }
+  }
+
+  .editor-content {
+    flex: 1;
+    overflow: hidden;
+
+    // Ensure CodeMirror fills the container
+    & > div {
+      height: 100%;
+    }
+  }
+
+  .preview-header {
+    background-color: #f5f5f5;
+    padding: 8px 16px;
+    border-bottom: 1px solid $grey;
+
+    h3 {
+      margin: 0;
+      font-size: 16px;
+      color: $dark;
+    }
+  }
+
+  .preview-content {
+    flex: 1;
+    background-color: white;
+    overflow: auto;
+
+    iframe {
+      border: none;
+      display: block;
+    }
+  }
+
+  // Responsive layout for smaller screens
+  @media (max-width: 768px) {
+    flex-direction: column;
+
+    .editor-container,
+    .preview-container {
+      height: 50%;
+      width: 100%;
+    }
+
+    .editor-container {
+      border-right: none;
+      border-bottom: 1px solid $grey;
+    }
+  }
+}
diff --git a/src/scss/page/_login.scss b/src/scss/page/_login.scss
new file mode 100644
index 0000000..d80b2f5
--- /dev/null
+++ b/src/scss/page/_login.scss
@@ -0,0 +1,257 @@
+.App {
+  font-family: sans-serif;
+  text-align: center;
+}
+
+@import url("https://fonts.googleapis.com/css?family=Montserrat:400,800");
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: #f6f5f7;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  font-family: "Montserrat", sans-serif;
+  height: 100vh;
+  margin: -20px 0 50px;
+}
+
+h1 {
+  font-weight: bold;
+  margin: 0;
+}
+
+h2 {
+  text-align: center;
+}
+
+p {
+  font-size: 14px;
+  font-weight: 100;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  margin: 20px 0 30px;
+}
+
+span {
+  font-size: 12px;
+}
+
+a {
+  color: #333;
+  font-size: 14px;
+  text-decoration: none;
+  margin: 15px 0;
+}
+
+button {
+  border-radius: 20px;
+  border: 1px solid #ff4b2b;
+  background-color: #ff4b2b;
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 12px 45px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  transition: transform 80ms ease-in;
+}
+
+button:active {
+  transform: scale(0.95);
+}
+
+button:focus {
+  outline: none;
+}
+
+button.ghost {
+  background-color: transparent;
+  border-color: #ffffff;
+}
+
+form {
+  background-color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 0 50px;
+  height: 100%;
+  text-align: center;
+}
+
+input {
+  background-color: #eee;
+  border: none;
+  padding: 12px 15px;
+  margin: 8px 0;
+  width: 100%;
+}
+
+.container {
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  position: relative;
+  overflow: hidden;
+  width: 768px;
+  max-width: 100%;
+  min-height: 480px;
+}
+
+.form-container {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  transition: all 0.6s ease-in-out;
+}
+
+.sign-in-container {
+  left: 0;
+  width: 50%;
+  z-index: 2;
+}
+
+.container.right-panel-active .sign-in-container {
+  transform: translateX(100%);
+}
+
+.sign-up-container {
+  left: 0;
+  width: 50%;
+  opacity: 0;
+  z-index: 1;
+}
+
+.container.right-panel-active .sign-up-container {
+  transform: translateX(100%);
+  opacity: 1;
+  z-index: 5;
+  animation: show 0.6s;
+}
+
+@keyframes show {
+  0%,
+  49.99% {
+    opacity: 0;
+    z-index: 1;
+  }
+
+  50%,
+  100% {
+    opacity: 1;
+    z-index: 5;
+  }
+}
+
+.overlay-container {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+  transition: transform 0.6s ease-in-out;
+  z-index: 100;
+}
+
+.container.right-panel-active .overlay-container {
+  transform: translateX(-100%);
+}
+
+.overlay {
+  background: #ff416c;
+  background: -webkit-linear-gradient(to right, #ff4b2b, #ff416c);
+  background: linear-gradient(to right, #ff4b2b, #ff416c);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: 0 0;
+  color: #ffffff;
+  position: relative;
+  left: -100%;
+  height: 100%;
+  width: 200%;
+  transform: translateX(0);
+  transition: transform 0.6s ease-in-out;
+}
+
+.container.right-panel-active .overlay {
+  transform: translateX(50%);
+}
+
+.overlay-panel {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 0 40px;
+  text-align: center;
+  top: 0;
+  height: 100%;
+  width: 50%;
+  transform: translateX(0);
+  transition: transform 0.6s ease-in-out;
+}
+
+.overlay-left {
+  transform: translateX(-20%);
+}
+
+.container.right-panel-active .overlay-left {
+  transform: translateX(0);
+}
+
+.overlay-right {
+  right: 0;
+  transform: translateX(0);
+}
+
+.container.right-panel-active .overlay-right {
+  transform: translateX(20%);
+}
+
+.social-container {
+  margin: 20px 0;
+}
+
+.social-container a {
+  border: 1px solid #dddddd;
+  border-radius: 50%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 5px;
+  height: 40px;
+  width: 40px;
+}
+
+footer {
+  background-color: #222;
+  color: #fff;
+  font-size: 14px;
+  bottom: 0;
+  position: fixed;
+  left: 0;
+  right: 0;
+  text-align: center;
+  z-index: 999;
+}
+
+footer p {
+  margin: 10px 0;
+}
+
+footer i {
+  color: red;
+}
+
+footer a {
+  color: #3c97bf;
+  text-decoration: none;
+}
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 8f5285f..6379fda 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -1,20 +1,21 @@
 // Imports
 
 // Resets and base styling
-@use './base/reset';
-@use './base/type';
-@use './base/main';
-
+@use "./base/reset";
+@use "./base/type";
+@use "./base/main";
 
 // Components
-@use './components/header';
-@use './components/footer';
+@use "./components/header";
+@use "./components/footer";
 
 //page specific styling
-@use './page//home';
+@use "./page//home";
+@use "./page//login";
+@use "./page/code_editor";
 
 // Utilities
-@use './utilities/utility-classes';
+@use "./utilities/utility-classes";
 
 // Google Fonts - Import
-@import url('https://fonts.googleapis.com/css?family=Alatsi|Roboto:400,400i,700,700i&display=swap');
\ No newline at end of file
+@import url("https://fonts.googleapis.com/css?family=Alatsi|Roboto:400,400i,700,700i&display=swap");