diff --git a/Aero.cur b/Aero.cur
new file mode 100644
index 0000000..13adf88
Binary files /dev/null and b/Aero.cur differ
diff --git a/Terminal_22445.ico b/Terminal_22445.ico
new file mode 100644
index 0000000..851fe73
Binary files /dev/null and b/Terminal_22445.ico differ
diff --git a/dragable.js b/dragable.js
index 52e9094..e3c5f1d 100644
--- a/dragable.js
+++ b/dragable.js
@@ -1,6 +1,6 @@
 // Make the DIV element draggable:
 dragElement(document.getElementById("window_box"));
-
+dragElement(document.getElementById("terminal"));
 function dragElement(elmnt) {
   var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
   if (document.getElementById(elmnt.id + "header")) {
diff --git a/image/icon/terminal.png b/image/icon/terminal.png
new file mode 100644
index 0000000..e05e806
Binary files /dev/null and b/image/icon/terminal.png differ
diff --git a/image/preview/dark-bg.jpg b/image/preview/dark-bg.jpg
index 49fe709..416b5ca 100644
Binary files a/image/preview/dark-bg.jpg and b/image/preview/dark-bg.jpg differ
diff --git a/image/preview/macos.jpg b/image/preview/macos-1920.jpg
similarity index 100%
rename from image/preview/macos.jpg
rename to image/preview/macos-1920.jpg
diff --git a/iterm_terminal_icon_161274.ico b/iterm_terminal_icon_161274.ico
new file mode 100644
index 0000000..ffe4446
Binary files /dev/null and b/iterm_terminal_icon_161274.ico differ
diff --git a/main-style.css b/main-style.css
index 08b7764..2d32b7b 100644
--- a/main-style.css
+++ b/main-style.css
@@ -3,6 +3,7 @@ html,*{
     box-sizing: border-box;
     margin: 0;
     padding: 0;
+    cursor: url("Aero.cur"),auto;
 }
 body{
     font-family: 'Josefin Sans';
@@ -17,7 +18,6 @@ body{
     width: 100vw;
     height: 100vh;
     padding: 3px 2px;
-    z-index: 1;
 }
 .icon-container{
     display: flex;
@@ -31,7 +31,6 @@ body{
     background-color: none;
     border-radius: 2px;
     border: solid transparent 1px;
-    z-index: 2;
 }
 .icon-container:hover{
     background-color: #ffffff2c;
diff --git a/main.html b/main.html
index f9c114b..aebe5c7 100644
--- a/main.html
+++ b/main.html
@@ -6,9 +6,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Cloud-PC</title>
     <link rel="stylesheet" href="main-style.css">
+    <link rel="stylesheet" href="terminal/cli-style.css">
 </head>
 <body>
     <div onmousedown="clicked_icon_field()" id="icon-field" class="icon-field" oncontextmenu="contextHandler(event)">
+        <!-- internal OS Tools and apps -->
+         <!-- desktop contextmenu -->
         <div id="context-menu">
             <div class="item">New Folder</div>
             <div class="hr"></div>
@@ -23,6 +26,7 @@
             <div class="item">Open in Terminal</div>
             <div class="item">Properties</div>
         </div>
+        <!-- folder contextmenu -->
         <div id="folder-menu">
             <div onclick="rename()" class="item">Rename</div>
             <div class="hr"></div>
@@ -32,6 +36,20 @@
             <div class="item">Open in Terminal</div>
             <div class="item">Properties</div>
         </div>
+        <!-- terminal UI -->
+        <div id="terminal">
+            <div id="terminalheader" class=Menu>
+              <div onclick="terminalClose()" class="Buttons Close"></div>
+              <div class="Buttons Minimize"></div>
+              <div class="Buttons Zoom"></div>
+              <span>Terminal</span>
+            </div>
+            <div class="Screen">
+              <!-- <p class="line4">><span class="cursor4">_</span></p> -->
+              <textarea name="" id="console" spellcheck="false">Console:~$ </textarea>
+            </div>
+        </div>
+        <!-- Internal OS Tools and Apps -->
         <div id="f1" oncontextmenu="folderfun(event)" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
             <div class="icon-img" style="background-image: url('image/icon/blue/user-home.ico')"></div>
             <input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Home" disabled id="icon_text" class="icon-text">
@@ -40,42 +58,15 @@
             <div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
             <input onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
         </div>
-        <div id="f3" oncontextmenu="folderfun(event)" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
-            <div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
-            <input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
-        </div>
-        <div id="f4" oncontextmenu="folderfun(event)" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
-            <div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
-            <input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
-        </div>
-        <div id="f5" oncontextmenu="folderfun(event)" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
-            <div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
-            <input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
-        </div>
-        <div id="f6" oncontextmenu="folderfun(event)" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
-            <div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
-            <input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
-        </div>
-        <div id="f7" oncontextmenu="folderfun(event)" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
-            <div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
-            <input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
-        </div>
-        <div id="f8" oncontextmenu="folderfun(event)" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
-            <div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
-            <input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
-        </div>
-        <div id="f9" oncontextmenu="folderfun(event)" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
-            <div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
-            <input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
-        </div>
-        <div id="f10" oncontextmenu="folderfun(event)" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
-            <div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
-            <input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
-        </div>
-        <div id="f11" oncontextmenu="folderfun(event)" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
-            <div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
-            <input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
+        <div id="f3" oncontextmenu="folderfun(event)" ondblclick="terminalOpen()" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
+            <div class="icon-img" style="background-image: url('Terminal_22445.ico')"></div>
+            <input onkeypress="enter(event)" type="text" value="Terminal" disabled id="icon_text" class="icon-text">
         </div>
+      
+
+
+
+
         <!-- <div class="window_box">
             <div class="window_bar">
                 <div class="win_button">
@@ -116,4 +107,6 @@
 </body>
 <script src="main.js"></script>
 <script src="dragable.js"></script>
+<script src="terminal/process.js"></script>
+<script src="terminal/script.js"></script>
 </html>
\ No newline at end of file
diff --git a/terminal-cli.png b/terminal-cli.png
new file mode 100644
index 0000000..e612586
Binary files /dev/null and b/terminal-cli.png differ
diff --git a/terminal.ico b/terminal.ico
new file mode 100644
index 0000000..6c009d6
Binary files /dev/null and b/terminal.ico differ
diff --git a/terminal/cli-style.css b/terminal/cli-style.css
new file mode 100644
index 0000000..8fde722
--- /dev/null
+++ b/terminal/cli-style.css
@@ -0,0 +1,79 @@
+@import url('https://fonts.googleapis.com/css2?family=Zain:wght@400&display=swap');
+
+#terminal{
+    position:absolute;
+    z-index: 1;
+    font-family: zain;
+}
+#terminalheader span{
+    position: relative;
+    left: 190px;
+} 
+#terminal .Buttons {
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    border: 1px solid #000;
+    position: relative;
+    top: 6px;
+    left: 10px;
+    background-color: #ff0011;
+    border-color: #9d252b;
+    display: inline-block;
+}
+#terminal .Buttons:hover{
+    filter: contrast(1.5) saturate(1.5);
+}
+
+#terminal .Minimize {
+    left: 15px;
+    background-color: #ffc100;
+    border-color: #9d802c;
+}
+
+#terminal .Zoom {
+    left: 21px;
+    background-color: #00d742;
+    border-color: #049931;
+}
+
+#terminal .Menu {
+    z-index: 10;
+    width: 550px;
+    box-sizing: border-box;
+    height: 25px;
+    /* background-color: #bbb; */
+    background-color: #ffeaea;
+    margin: 0 auto;
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+}
+
+#terminal .Screen {
+    cursor:auto;
+    /* background-color: #151515; */
+    background-color: #151515b5;
+    backdrop-filter: blur(3px);
+    box-sizing: border-box;
+    width: 550px;
+    height: 400px;
+    margin: 0 auto;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+/* code starting here */
+#terminal textarea{
+    cursor: text;
+    width:100%;
+    height: 100%;
+    background: none;
+    color: rgb(30, 255, 0);
+    outline: none;
+    border:none;
+    resize: none;
+    font-family: zain;
+    font-size: 24px;
+    font-weight: 400;
+    caret-shape: block;
+}
\ No newline at end of file
diff --git a/terminal/process.js b/terminal/process.js
new file mode 100644
index 0000000..ad04c8e
--- /dev/null
+++ b/terminal/process.js
@@ -0,0 +1,20 @@
+function clear(){
+    let cli = document.getElementById("console");
+    cli.value = "Console:~$ ";
+    pos = console.value.length;
+    typing = 0;left = 0;
+}
+function process(keyword){
+    if(keyword == 'hi'){
+        return 'hi nur';
+    }
+    else if (keyword == 'assalamualikum'){
+        return 'walikymassalam nur';
+    }
+    else if(keyword == "clear"){
+        clear();
+    }
+    else{
+        return 'wrong keyword!';
+    }
+}
\ No newline at end of file
diff --git a/terminal/script.js b/terminal/script.js
new file mode 100644
index 0000000..d402e37
--- /dev/null
+++ b/terminal/script.js
@@ -0,0 +1,38 @@
+tm = document.getElementById('terminal');
+console = document.getElementById('console');
+let pos = console.value.length;
+let typing = 0;
+let left = 0;
+console.addEventListener("keydown",(k)=>{
+    if(k.key == 'Enter'){
+        k.preventDefault();
+        let newtext = console.value.substr(pos,);
+        if(newtext.length != 0){
+            p = process(newtext);
+            pos += newtext.length+p.length+13;
+            console.value += '\n'+p+'\nConsole:~$ ';
+        }
+    }
+    if(k.ctrlKey && k.key == 'Backspace'){
+        k.preventDefault();
+    }
+    if(k.key == 'Backspace' || k.key == 'Delete'){
+        if(pos >= console.value.length){
+            k.preventDefault();
+        }
+    }
+    if(k.key == 'ArrowUp' || k.key == 'ArrowDown' || k.key == 'ArrowRight' || k.key == 'ArrowLeft'){
+        if(console.selectionEnd <= 3){
+            console.selectionEnd = 3;
+        }
+    }
+});
+
+function terminalClose(){
+    tm.style.display  = "none";
+    clear();
+}
+
+function terminalOpen(){
+    tm.style.display = "block";
+}
\ No newline at end of file
diff --git a/terminal_icon_215293.png b/terminal_icon_215293.png
new file mode 100644
index 0000000..c73a01a
Binary files /dev/null and b/terminal_icon_215293.png differ
