diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..3410d23
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "workbench.settings.editor": "ui"
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 601f5c3..b8ce311 100644
--- a/index.html
+++ b/index.html
@@ -3,10 +3,83 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
+    <title>Web Development Projects</title>
+    <link rel="stylesheet" href="style.css">
+    <script defer src="script.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+        crossorigin="anonymous"></script></head>
 <body>
-    <iframe src="left-frame.html" frameborder="0" height="1000px"></iframe>
+    <div class="nav-bar">
+
+        <!-- Navbar content -->
+        <nav class="navbar navbar-expand-lg bg-body-tertiary">
+            <div class="container-fluid">
+                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor"
+                    class="bi bi-code-square" viewBox="0 0 16 16">
+                    <path
+                        d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" />
+                    <path
+                        d="M6.854 4.646a.5.5 0 0 1 0 .708L4.207 8l2.647 2.646a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0m2.292 0a.5.5 0 0 0 0 .708L11.793 8l-2.647 2.646a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708 0" />
+                </svg><a class="navbar-brand" href="#"> Web Development Projects</a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                    aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link active" aria-current="page" href="index.html">Home</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">Link</a>
+                        </li>
+                    </ul>
+        
+                </div>
+            </div>
+        </nav>
+    </div>
+    <div class="frames">
+        <iframe id="left-frame" class="left-frame" src="left-frame.html" frameborder="0" height="1000px"></iframe>
+        <iframe id="main-frame" class="main-frame" src="main-frame.html" frameborder="0" height="1000px" width="100%"></iframe>
+    </div>
 </body>
 
+<script>
+    let btn1 = document.getElementById("btn1");
+    let btn2 = document.getElementById("btn2");
+    let btn3 = document.getElementById("btn3");
+    let mainFrame = document.getElementById("main-frame");
+
+    function btn1(){
+        mainFrame.src = "1.%20Calculator/index.html";
+
+    }
+
+</script>
+
+<style>
+    *{
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+    .left-frame{
+        /* width: 100%; */
+        height: 999px;
+    }
+    .frames{
+        display: flex;
+    }
+    svg{
+        margin-right: 10px;
+    }
+    svg:hover{
+        cursor: pointer;
+    }
+</style>
 </html>
\ No newline at end of file
diff --git a/left-frame.html b/left-frame.html
index a0895e3..0471564 100644
--- a/left-frame.html
+++ b/left-frame.html
@@ -1,239 +1,163 @@
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Web Development Projects</title>
+  <link rel="import" href="left-frame.html">
+
+  <link rel="stylesheet" href="style.css">
+  <script defer src="script.js"></script>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
+      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+      crossorigin="anonymous"></script>
+    
+    </head>
 <body>
-  <div class="radio-group">
-    <input class="radio-input" name="radio-group" id="radio1" type="radio">
-    <label class="radio-label" for="radio1">
-      <span class="radio-inner-circle"></span>
-      Option 1
-    </label>
-    
-    <input class="radio-input" name="radio-group" id="radio2" type="radio">
-    <label class="radio-label" for="radio2">
-      <span class="radio-inner-circle"></span>
-      Option 2
-    </label>
-    
-    <input class="radio-input" name="radio-group" id="radio3" type="radio">
-    <label class="radio-label" for="radio3">
-      <span class="radio-inner-circle"></span>
-      Option 3
-    </label>
-    <input class="radio-input" name="radio-group" id="radio1" type="radio">
-    <label class="radio-label" for="radio1">
-      <span class="radio-inner-circle"></span>
-      Option 1
-    </label>
-    
-    <input class="radio-input" name="radio-group" id="radio2" type="radio">
-    <label class="radio-label" for="radio2">
-      <span class="radio-inner-circle"></span>
-      Option 2
-    </label>
-    
-    <input class="radio-input" name="radio-group" id="radio3" type="radio">
-    <label class="radio-label" for="radio3">
-      <span class="radio-inner-circle"></span>
-      Option 3
-    </label>
-    <input class="radio-input" name="radio-group" id="radio1" type="radio">
-    <label class="radio-label" for="radio1">
-      <span class="radio-inner-circle"></span>
-      Option 1
-    </label>
-    
-    <input class="radio-input" name="radio-group" id="radio2" type="radio">
-    <label class="radio-label" for="radio2">
-      <span class="radio-inner-circle"></span>
-      Option 2
-    </label>
-    
-    <input class="radio-input" name="radio-group" id="radio3" type="radio">
-    <label class="radio-label" for="radio3">
-      <span class="radio-inner-circle"></span>
-      Option 3
-    </label> <input class="radio-input" name="radio-group" id="radio1" type="radio">
-    <label class="radio-label" for="radio1">
-      <span class="radio-inner-circle"></span>
-      Option 1
-    </label>
-    
-    <input class="radio-input" name="radio-group" id="radio2" type="radio">
-    <label class="radio-label" for="radio2">
-      <span class="radio-inner-circle"></span>
-      Option 2
-    </label>
-    
-    <input class="radio-input" name="radio-group" id="radio3" type="radio">
-    <label class="radio-label" for="radio3">
-      <span class="radio-inner-circle"></span>
-      Option 3
-    </label> <input class="radio-input" name="radio-group" id="radio1" type="radio">
-    <label class="radio-label" for="radio1">
-      <span class="radio-inner-circle"></span>
-      Option 1
-    </label>
-    
-    <input class="radio-input" name="radio-group" id="radio2" type="radio">
-    <label class="radio-label" for="radio2">
-      <span class="radio-inner-circle"></span>
-      Option 2
-    </label>
-    
-    <input class="radio-input" name="radio-group" id="radio3" type="radio">
-    <label class="radio-label" for="radio3">
-      <span class="radio-inner-circle"></span>
-      Option 3
-    </label> <input class="radio-input" name="radio-group" id="radio1" type="radio">
-    <label class="radio-label" for="radio1">
-      <span class="radio-inner-circle"></span>
-      Option 1
-    </label>
-    
-    <input class="radio-input" name="radio-group" id="radio2" type="radio">
-    <label class="radio-label" for="radio2">
-      <span class="radio-inner-circle"></span>
-      Option 2
-    </label>
-    
-    <input class="radio-input" name="radio-group" id="radio3" type="radio">
-    <label class="radio-label" for="radio3">
-      <span class="radio-inner-circle"></span>
-      Option 3
-    </label> <input class="radio-input" name="radio-group" id="radio1" type="radio">
-    <label class="radio-label" for="radio1">
-      <span class="radio-inner-circle"></span>
-      Option 1
-    </label>
-    
-    <input class="radio-input" name="radio-group" id="radio2" type="radio">
-    <label class="radio-label" for="radio2">
-      <span class="radio-inner-circle"></span>
-      Option 2
-    </label>
-    
-    <input class="radio-input" name="radio-group" id="radio3" type="radio">
-    <label class="radio-label" for="radio3">
-      <span class="radio-inner-circle"></span>
-      Option 3
-    </label> <input class="radio-input" name="radio-group" id="radio1" type="radio">
-    <label class="radio-label" for="radio1">
-      <span class="radio-inner-circle"></span>
-      Option 1
-    </label>
-    
-    <input class="radio-input" name="radio-group" id="radio2" type="radio">
-    <label class="radio-label" for="radio2">
-      <span class="radio-inner-circle"></span>
-      Option 2
-    </label>
-    
-    <input class="radio-input" name="radio-group" id="radio3" type="radio">
-    <label class="radio-label" for="radio3">
-      <span class="radio-inner-circle"></span>
-      Option 3
-    </label> <input class="radio-input" name="radio-group" id="radio1" type="radio">
-    <label class="radio-label" for="radio1">
-      <span class="radio-inner-circle"></span>
-      Option 1
-    </label>
-    
-    <input class="radio-input" name="radio-group" id="radio2" type="radio">
-    <label class="radio-label" for="radio2">
-      <span class="radio-inner-circle"></span>
-      Option 2
-    </label>
-    
-    <input class="radio-input" name="radio-group" id="radio3" type="radio">
-    <label class="radio-label" for="radio3">
-      <span class="radio-inner-circle"></span>
-      Option 3
-    </label>
+  <div class="left-buttons">
+    <button onclick="btn1()"> <a onclick="btn1()" href="1. Calculator\index.html"></a>1. Calculator</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hovxdfcgvhjbkhvgjer Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
+    <button> Hover Over</button>
   </div>
-</body>
-<style>
+  <style>
     * {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
 
-body {
-  font-family: Arial, sans-serif;
-  background-color: #f1f1f1;
-  padding: 20px;
-}
+    .left-buttons {
+      background-color: #21212426;
+      /* width: fit-content; */
+      /* padding: 10px; */
+      display: flex;
+      flex-direction: column;
+      /* margin-top: 10px; */
+    }
 
-.radio-group {
-  display: flex;
-  flex-direction: column;
-}
+    ::-webkit-scrollbar{
+      width: 4px;
+      /* color: #000000; */
+      background-color: #00000092;
+      height: 50px;
+    }
+      /* margin-top: 5px; */
+      button {
+        font-size: 18px;
+        color: #000000;
+        font-family: Arial, Helvetica, sans-serif;
+        font-weight: 400;
+        cursor: pointer;
+        position: relative;
+        border: none;
+        background: rgba(124, 124, 124, 0.366);
+        /* text-transform: uppercase; */
+        transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+        transition-duration: 400ms;
+        transition-property: color;
+        padding-top: 12px;
+        /* background-color: aqua; */
+      }
 
-.radio-label {
-  display: flex;
-  align-items: center;
-  padding: 0.5em;
-  margin-bottom: 0.5em;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  transition: background-color 0.2s, border-color 0.2s;
-}
+      button:focus,
+      button:hover {
+        color: #000000;
+      }
 
-.radio-label:hover {
-  background-color: #e6e6e6;
-}
+      button:focus:after,
+      button:hover:after {
+        width: 100%;
+        left: 0%;
+      }
 
-.radio-input {
-  position: absolute;
-  opacity: 0;
-}
+      button:after {
+        content: "";
+        pointer-events: none;
+        bottom: -2px;
+        left: 50%;
+        position: absolute;
+        width: 0%;
+        height: 2px;
+        background-color: #000000;
+        transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+        transition-duration: 400ms;
+        transition-property: width, left;
+      }
+  </style>
 
-.radio-input:checked + .radio-label {
-  background-color: #c3dbff;
-  border-color: #1151ff;
-}
-
-.radio-input:focus + .radio-label {
-  outline: 2px solid #1151ff;
-}
-
-.radio-inner-circle {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  border: 2px solid #888;
-  border-radius: 50%;
-  margin-right: 0.5em;
-  transition: border-color 0.2s;
+  <style>
+    /* dark theme  */
+    /* button {
+  font-size: 18px;
+  color: #222;
+  font-family: inherit;
+  font-weight: 800;
+  cursor: pointer;
   position: relative;
+  border: none;
+  background: none;
+  text-transform: uppercase;
+  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition-duration: 400ms;
+  transition-property: color;
 }
 
-.radio-label:hover .radio-inner-circle {
-  border-color: #555;
+button:focus,
+button:hover {
+  color: #222;
 }
 
-.radio-input:checked + .radio-label .radio-inner-circle {
-  border-color: #1151ff;
+button:focus:after,
+button:hover:after {
+  width: 100%;
+  left: 0%;
 }
 
-.radio-input:checked + .radio-label .radio-inner-circle::after {
-  content: '';
-  display: block;
-  width: 0.5em;
-  height: 0.5em;
-  background-color: #1151ff;
-  border-radius: 50%;
-  position: absolute;
-  top: 50%;
+button:after {
+  content: "";
+  pointer-events: none;
+  bottom: -2px;
   left: 50%;
-  transform: translate(-50%, -50%);
-}
-    
-</style>
+  position: absolute;
+  width: 0%;
+  height: 2px;
+  background-color: red;
+  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition-duration: 400ms;
+  transition-property: width, left;
+} */
+
+  </style>
+</body>
 </html>
\ No newline at end of file
diff --git a/main-frame.html b/main-frame.html
new file mode 100644
index 0000000..4550fc4
--- /dev/null
+++ b/main-frame.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <div class="card">
+        <div class="loader">
+            <p>Loading</p>
+            <div class="words">
+                <span class="word">CSS</span>
+                <span class="word">HTML</span>
+                <span class="word">CSS</span>
+                <span class="word">Javascript</span>
+                <span class="word">Select project</span>
+            </div>
+        </div>
+    </div>
+
+
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-size: 50px;
+        }
+
+        .card {
+            /* color used to softly clip top and bottom of the .words container */
+            --bg-color: #212121;
+            background-color: var(--bg-color);
+            padding: 1rem 2rem;
+            /* border-radius: 1.25rem; */
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            
+
+        }
+
+        .loader {
+            color: rgb(124, 124, 124);
+            font-family: "Poppins", sans-serif;
+            font-weight: 500;
+            font-size: 25px;
+            -webkit-box-sizing: content-box;
+            box-sizing: content-box;
+            height: 60px;
+            padding: 10px 10px;
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            border-radius: 8px;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            
+            /* padding: 5px; */
+        }
+
+        .words {
+            overflow: hidden;
+            position: relative;
+        }
+
+        .words::after {
+            content: "";
+            position: absolute;
+            inset: 1;
+            background: linear-gradient(var(--bg-color) 10%,
+                    transparent 30%,
+                    transparent 70%,
+                    var(--bg-color) 90%);
+            z-index: 20;
+        }
+
+        .word {
+            display: block;
+            height: 100%;
+            padding-left: 6px;
+            color: #956afa;
+            animation: spin_4991 5s infinite;
+            padding: 5px;
+            padding-bottom: 5px;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+     
+
+        @keyframes spin_4991 {
+            10% {
+                -webkit-transform: translateY(-102%);
+                transform: translateY(-102%);
+            }
+
+            25% {
+                -webkit-transform: translateY(-100%);
+                transform: translateY(-100%);
+            }
+
+            35% {
+                -webkit-transform: translateY(-202%);
+                transform: translateY(-202%);
+            }
+
+            50% {
+                -webkit-transform: translateY(-200%);
+                transform: translateY(-200%);
+            }
+
+            60% {
+                -webkit-transform: translateY(-302%);
+                transform: translateY(-302%);
+            }
+
+            75% {
+                -webkit-transform: translateY(-300%);
+                transform: translateY(-300%);
+            }
+
+            85% {
+                -webkit-transform: translateY(-402%);
+                transform: translateY(-402%);
+            }
+
+            100% {
+                -webkit-transform: translateY(-400%);
+                transform: translateY(-400%);
+            }
+        }
+    </style>
+</body>
+
+</html>
\ No newline at end of file
