diff --git a/projects/Code Editor/index.html b/projects/Code Editor/index.html
index 252afa14..7a6c4dda 100644
--- a/projects/Code Editor/index.html	
+++ b/projects/Code Editor/index.html	
@@ -1,20 +1,51 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <title>Code Editor</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CodeEditor</title>
+    <link rel="stylesheet" href="styles.css">
+    <script src="https://kit.fontawesome.com/1303b9f5f2.js" crossorigin="anonymous"></script>
+</head>
+<body>
+    <div class="container">
+        <div class="left">
+            <label ><i class="fa-brands fa-html5"></i>HTML</label>
+            <textarea  id="html-code" onkeyup="run()"></textarea>
+            <label ><i class="fa-brands fa-css3-alt"></i>CSS</label>
+            <textarea  id="css-code" onkeyup="run()"></textarea>
+            <label ><i class="fa-brands fa-js"></i>JS</label>
+            <textarea  id="js-code" onkeyup="run()"></textarea>
+        </div>
+        <div class="right">
+            <label for="Output"><i class="fa-solid fa-play"></i>Output</label>
+            <iframe id="output"></iframe>
+        </div>
+    </div>
 
-    <link rel="stylesheet" href="styles.css" />
-  </head>
+<script>
+    function saveCode() {
+            localStorage.setItem('htmlCode', document.getElementById('html-code').value);
+            localStorage.setItem('cssCode', document.getElementById('css-code').value);
+            localStorage.setItem('jsCode', document.getElementById('js-code').value);
+        }
+    function loadCode() {
+            document.getElementById('html-code').value = localStorage.getItem('htmlCode') || '';
+            document.getElementById('css-code').value = localStorage.getItem('cssCode') || '';
+            document.getElementById('js-code').value = localStorage.getItem('jsCode') || '';
+            run(); 
+        }
+    function run(){
+        saveCode(); 
+        let htmlCode =document.getElementById("html-code").value;
+        let cssCode =document.getElementById("css-code").value;
+        let jsCode =document.getElementById("js-code").value;
+        let output =document.getElementById("output");
+        output.contentDocument.body.innerHTML =htmlCode + "<style>"+cssCode+"</style>";
+        output.contentWindow.eval(jsCode);
+        }
+        window.onload = loadCode;
 
-  <body>
-    <h1>Code Editor</h1>
-
-    <textarea id="html" placeholder="HTML"></textarea>
-    <textarea id="css" placeholder="CSS"></textarea>
-    <textarea id="js" placeholder="JavaScript"></textarea>
-    <iframe id="code"></iframe>
-
-    <script type="text/javascript" src="script.js"></script>
-  </body>
-</html>
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/projects/Code Editor/script.js b/projects/Code Editor/script.js
deleted file mode 100644
index 0d5a16e2..00000000
--- a/projects/Code Editor/script.js	
+++ /dev/null
@@ -1,22 +0,0 @@
-function compile() {
-  var html = document.getElementById("html");
-  var css = document.getElementById("css");
-  var js = document.getElementById("js");
-  var code = document.getElementById("code").contentWindow.document;
-
-  document.body.onkeyup = function () {
-    code.open();
-    code.writeln(
-      html.value +
-        "<style>" +
-        css.value +
-        "</style>" +
-        "<script>" +
-        js.value +
-        "</script>"
-    );
-    code.close();
-  };
-}
-
-compile();
diff --git a/projects/Code Editor/styles.css b/projects/Code Editor/styles.css
index d533add3..ca0097d2 100644
--- a/projects/Code Editor/styles.css	
+++ b/projects/Code Editor/styles.css	
@@ -1,59 +1,52 @@
-body {
-    text-align: center;
-    background-color: #222;
-    margin: 0;
-    font-family: 'Arial', sans-serif;
-    color: #fff;
+*{
+    margin:0;
+    padding: 0;
+    font-family: 'poppins',sans-serif;
+    box-sizing: border-box;
 }
 
-textarea {
-    width: 30%;
-    max-width: 600px;
-    height: 200px;
-    margin: auto 10px;
-    color: #fff;
-    padding: 10px;
-    background-color: #333;
-    border: 1px solid #444;
-    font-family: 'Courier New', monospace;
-    font-size: 14px;
-    resize: none;
-    outline: none;
+body{
+    background: rgba(82, 82, 82, 0.879); 
+    color: #fff ;
 }
 
-iframe {
-    width: calc(90% + 20px);
-    height: 300px;
-    resize: vertical;
-    margin: 20px auto;
-    border: none;
-    background-color: #fff;
-    border-radius: 5px;
+.container{
+    width:100%;
+    height:100vh;
+    padding: 20px;
+    display: flex;
 }
-
-@media screen and (max-width: 768px) {
-
-    textarea,
-    iframe {
-        width: 100%;
-        margin: 10px 0;
-    }
+.left,.right{
+    flex-basis: 50%;
+    padding:10px;
 }
-
-textarea::-webkit-scrollbar {
-    width: 10px;
-}
-
-textarea::-webkit-scrollbar-track {
-    color: transparent;
-}
-
-textarea::-webkit-scrollbar-thumb {
-    background: #555;
-    border-radius: 10px;
-    height: 50px;
-}
-
-textarea::-webkit-scrollbar-thumb:hover {
-    background: #222;
-}
\ No newline at end of file
+textarea{
+    width: 100%;
+    height:29%;
+    background:#1f1f1f;
+    padding: 10px 20px;
+    color:white;
+    border: 0;
+    outline: 0;
+    font-size:18px;
+
+ }
+ iframe{
+    width:100%;
+    height:100%;
+    background: white;
+    border:0;
+    outline:0;
+ }
+
+ label i{
+    margin-left: 10px;
+    margin-right: 10px;
+ }
+
+ label{
+    display: flex;
+    align-items: center;
+    background: black;
+    height: 30px;
+ }
\ No newline at end of file
