diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..f673a71
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}
\ No newline at end of file
diff --git a/public/version2/css_logo.png b/public/version2/css_logo.png
new file mode 100644
index 0000000..4f435e7
Binary files /dev/null and b/public/version2/css_logo.png differ
diff --git a/public/version2/exit_icon.png b/public/version2/exit_icon.png
new file mode 100644
index 0000000..a0b94ff
Binary files /dev/null and b/public/version2/exit_icon.png differ
diff --git a/public/version2/html_logo.png b/public/version2/html_logo.png
new file mode 100644
index 0000000..5c0f4b6
Binary files /dev/null and b/public/version2/html_logo.png differ
diff --git a/public/version2/index.html b/public/version2/index.html
new file mode 100644
index 0000000..edcf18e
--- /dev/null
+++ b/public/version2/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="./stye.css">
+    <title>Codera</title>
+</head>
+<body>
+
+    <!-- Nav-->
+    <div class="nav">
+        <ul>
+            <h1>Coder - Your Coding Arena</h1>
+        </ul>
+        <ul class="navIcon">
+            <li class="navIcon whitebg" style="background-color: white;"><i class="fa fa-refresh"></i></li>
+            <li style="margin-left: 3rem;" class="navIcon redbg exit" style="background-color: red;"><img src="./exit_icon.png" alt="" width="60%"></li>
+        </ul>
+    </div>
+
+    <div class="tables">
+        <div class="inputs" style="margin-left: 5px;">
+            <div class="inputHeader">
+                <p class="inpIcon">
+                    <img src="./html_logo.png" alt="" width="15%">
+                </p>
+                <p>HTML</p>
+                <p class="inpSecIcon">-</p>
+            </div>
+            <textarea></textarea>
+        </div>
+        <div class="inputs">
+            <div class="inputHeader">
+                <p class="inpIcon">
+                    <img src="./css_logo.png" alt="" width="20%">
+                </p>
+                <p>CSS</p>
+                <p class="inpSecIcon" >-</p>
+            </div>
+            <textarea></textarea>
+        </div>
+        <div class="inputs" style="margin-right: 5px;">
+            <div class="inputHeader">
+                <p class="inpIcon">
+                    <img src="./js_logo.png" alt="" width="15%">
+                </p>
+                <p>JavaScript</p>
+                <p class="inpSecIcon">-</p>
+            </div>
+            <textarea></textarea>
+        </div>
+    </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/public/version2/js_logo.png b/public/version2/js_logo.png
new file mode 100644
index 0000000..2f15e64
Binary files /dev/null and b/public/version2/js_logo.png differ
diff --git a/public/version2/stye.css b/public/version2/stye.css
new file mode 100644
index 0000000..7ae5efe
--- /dev/null
+++ b/public/version2/stye.css
@@ -0,0 +1,94 @@
+*{
+    padding: 0;
+    margin: 0;
+    font-family: sans-serif;
+}
+
+body{
+    overflow: hidden;
+}
+
+.nav{
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    background-color: rgba(45, 52, 54, 0.8);
+}
+
+.nav ul{
+    text-align: center;
+    padding: 2rem 0;
+    color: white;
+}
+
+.navIcon{
+    list-style-type: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+.navIcon li{
+    width: 3rem;
+    height: 3rem;
+    color: black;
+    border-radius: 50%;
+    transition: 0.5s ease;
+    cursor: pointer;
+}
+.navIcon i{
+    font-size: 1.5rem;
+    font-weight: lighter;
+}
+.redbg{
+    background-color: red;
+}
+.whitebg{
+    background-color: white;
+}
+.navIcon img{
+    padding-right: 5px;
+    transform: rotate(180deg);
+    padding-right: 0px;
+}
+
+.tables{
+    height: 50vh;
+    background-color: rgba(45, 52, 54, 0.8);
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 1rem;
+}
+.tables textarea{
+    resize: none;
+    height: 40vh;
+    padding-left: 5px;
+    background-color: rgba(45, 52, 54, 0.4);
+    border: none;
+    width: 99%;
+    color: white;
+    font-size: 1rem;
+}
+.tables textarea:focus{
+    outline: none;
+}
+
+.inputHeader{
+    background-color: rgba(45, 52, 54, 0.9);
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    text-align: center;
+    padding: 10px 0;
+    color: white;
+    border-radius: 5px 5px  0 0 ;
+}
+
+.inpIcon{
+    text-align: left;
+    padding-left: 1rem ;
+}
+
+.inpSecIcon{
+    text-align: right;
+    padding-right: 1rem ;
+}
\ No newline at end of file
