diff --git a/Portfoliowebsite/port.css b/Portfoliowebsite/port.css
index a04ed916..b5f21e9f 100644
--- a/Portfoliowebsite/port.css
+++ b/Portfoliowebsite/port.css
@@ -10,10 +10,11 @@ body{
     color: aliceblue;
     overflow:auto;
 }
+
 .components{
     display:flex;
     list-style: none;
-    
+    height: 40px;
 }
 .name{
     list-style: none;
@@ -31,9 +32,12 @@ nav{
     height: 3rem;
 
 }
+ul li {
+    margin: auto;
+}
 ul li a{
     margin:5px 10px;
-    padding:8px;
+    /* padding:8px; */
     font-family: 'Mukta', sans-serif;
     color: aliceblue;
     text-decoration: none;
@@ -70,6 +74,7 @@ ul li a:hover{
     padding:77px;
     height: 290px;
 }
+
 .right_section img{
     margin-top: -30px;
     width:600px;
@@ -101,7 +106,7 @@ ul li a:hover{
     height:540px;
 }
 .one{
-    height:65px;
+    height:40px;
     border-left: 3px solid white;
 }
 .container{
@@ -119,11 +124,6 @@ ul li a:hover{
     font-family: 'Merriweather', serif;
    
 }
-.year{
-   
-    margin:7.5px;
-    font-family: 'Merriweather', serif;
-}
 
 #icon{
     margin:8px 0px;
@@ -144,7 +144,7 @@ ul li a:hover{
    
 }
 #vertical{
-    height: 70px;
+    height: 50px;
 }
 .btn{
     
@@ -171,12 +171,18 @@ ul li a:hover{
 }
 .footer{
     display:flex;
-    justify-content: space-evenly;
-   
+    justify-content: space-around;
+    position: relative;
+}
+.service{
+    display: flex;
+    gap: 50px;
+    flex-wrap: wrap;
 }
 footer{
+    margin-top: 50px;
     background-color: black;
-    height:140px;
+    /* height:140px; */
     padding: 30px 18px;
     
 }
@@ -192,3 +198,141 @@ footer{
     background-color: blueviolet;
     height: 0.1rem;
 }
+
+.menu, .hamburger{
+    display: none;
+}
+
+@media (max-width: 950px){
+    .con{
+        flex-direction: column;
+    }
+
+    .container{
+        flex-direction: column;
+        justify-content: space-around;
+    }
+
+    .exp{
+        display: flex;
+    }
+
+    .one{
+        width: 50px;
+        height: 2px;
+        background-color: aliceblue;
+    }
+
+    #vertical{
+        height: auto;
+        margin: 10px;
+    }
+
+    .Experience{
+        margin: 40px 100px;
+        height: auto;
+    }
+
+    .service{
+        gap: 30px;
+    }
+    
+    .box{
+        display: flex;
+        justify-content: space-evenly;
+    }
+
+    .components{
+        font-size: 14px;
+    }
+
+}
+
+@media (max-width: 650px){
+    .one{
+        width: 20px;
+        height: 2px;
+        background-color: aliceblue;
+    }
+
+    .Experience{
+        margin: 40px 60px;
+    }
+
+    .service{
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .box{
+        justify-content: space-around;
+        height: 50px;
+        /* margin-top: 0px; */
+    }
+    
+    
+    .components{
+        display: none;
+    }
+
+    .menu {
+        display: block;
+    }
+
+    .hamburger{
+        display: inline;
+    }
+
+    .hamburger {
+        position: fixed;
+        /* a large z-index puts the ham button above the rest of the page*/
+        z-index: 99;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        top: 1rem;
+        right: 1rem;
+    }
+
+    .menu {
+        position: fixed;
+        /* give the menu a larger z-index than the ham link
+        to put the menu above it */
+        z-index: 100;
+        top: 0;
+        left: 40;
+        right: 0;
+        bottom: 0;
+        width: 40%;
+        height: 70%;
+        /* basic menu styling*/
+        list-style: none;
+        background: rgb(31, 31, 87);
+        display: flex;
+
+        box-shadow: 10px 0px 13px rgb(44, 44, 125);
+        border-bottom-left-radius: 40px;
+        flex-direction: column;
+        /* animate slide up/down */
+        transform: translateY(-100%);
+        transition: transform 0.2s ease;
+    }
+
+    .close {
+        position: absolute;
+        border: none;
+        color: white;
+        cursor: pointer;
+        top: 1rem;
+        right: 1rem;
+    }
+
+    .menu:target {
+        /* show menu */
+        transform: translateY(0);
+    }
+
+    .service{
+        display: none;
+    }
+}
diff --git a/Portfoliowebsite/port.html b/Portfoliowebsite/port.html
index c84c84c7..3416e08a 100644
--- a/Portfoliowebsite/port.html
+++ b/Portfoliowebsite/port.html
@@ -13,7 +13,9 @@
     <link href="https://fonts.googleapis.com/css2?family=Mukta:wght@700&display=swap" rel="stylesheet">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@900&display=swap" 
+    rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 
 <body>
@@ -32,6 +34,23 @@
 
 
             </ul>
+            <ul class="menu" id="menu">
+                <li><a href="#">Home</a></li>
+                <li><a href="#">About</a></li>
+                <li><a href="#">Services</a></li>
+                <li><a href="#">Projects</a></li>
+                <li><a href="#">Contact Me</a></li>
+                <a class="close" href="#">
+                    <span class="material-icons">
+                    close
+                    </span>
+                </a>
+            </ul>
+            <a class="hamburger" href="#menu">
+                <span class="material-icons">
+                menu
+                </span>
+            </a>
         </nav>
     </section>
 
@@ -65,56 +84,59 @@
             What I have done so far
         </div>
         <h1 class="heading">Work Experience</h1>
-        <div class="container" id="icon">
-            <img src="https://img.icons8.com/?size=1x&id=90qJ6Mat3B0I&format=gif" alt="Error" srcset="">
-            <img src="https://img.icons8.com/?size=1x&id=13912&format=png" alt="Error" srcset="">
-            <img src="https://img.icons8.com/?size=1x&id=32323&format=png" alt="Error" srcset="">
-            <img src="https://img.icons8.com/?size=512&id=13963&format=png" alt="Error" srcset="">
-            <img src="https://img.icons8.com/?size=1x&id=19318&format=png" alt="Error" srcset="">
-            <img src="https://img.icons8.com/?size=1x&id=22989&format=png" alt="Error" srcset="">
-        </div>
-        <hr class="division">
-        <div class="container" id="vertical">
-            <div class="one"></div>
-            <div class="one"></div>
-            <div class="one"></div>
-            <div class="one"></div>
-            <div class="one"></div>
-            <div class="one"></div>
-        </div>
-        <div class="con" id="skills">
-            <div class="units">
-                <h4>HTML Developer -</h4>
-                <div class="year">Pinterest (2010-2012)</div>
-                <p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores, illum vero sed sit tempora voluptatibus! </p>
-            </div>
-            <div class="units">
-                <h4>Web Designer -</h4>
-                <div class="year">Facebook (2012-2014)</div>
-                <p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis corporis deleniti officia ipsam placeat.</p>
+        <div class="exp">
+            <div class="container" id="icon">
+                <img src="https://img.icons8.com/?size=1x&id=90qJ6Mat3B0I&format=gif" alt="Error" srcset="">
+                <img src="https://img.icons8.com/?size=1x&id=13912&format=png" alt="Error" srcset="">
+                <img src="https://img.icons8.com/?size=1x&id=32323&format=png" alt="Error" srcset="">
+                <img src="https://img.icons8.com/?size=512&id=13963&format=png" alt="Error" srcset="">
+                <img src="https://img.icons8.com/?size=1x&id=19318&format=png" alt="Error" srcset="">
+                <img src="https://img.icons8.com/?size=1x&id=22989&format=png" alt="Error" srcset="">
             </div>
-            <div class="units">
-                <h4>Frontend Developer-</h4>
-                <div class="year">Instagram (2014-2015)</div>
-                <p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet consectetur adipisicing elit. A, ipsa natus eligendi adipisci sapiente ratione?</p>
+            <!-- <hr class="division">   -->
+            <div class="container" id="vertical">
+                <div class="one"></div>
+                <div class="one"></div>
+                <div class="one"></div>
+                <div class="one"></div>
+                <div class="one"></div>
+                <div class="one"></div>
             </div>
-            <div class="units">
-                <h4>Node.js Developer -</h4>
-                <div class="year">Twitter (2015-2016)</div>
-                <p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis blanditiis voluptatum omnis, eum hicdo</p>
-            </div>
-            <div class="units">
-                <h4>FullStack Developer -</h4>
-                <div class="year">Youtube (2016-2018)</div>
-                <p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus, perferendis repudiandae. Quae sit soluta.</p>
-            </div>
-            <div class="units">
-                <h4>Software Developer -</h4>
-                <div class="year">Microsoft (2018-2023)</div>
-                <p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam dicta illo molestias fuga, laboriosam .</p>
+            <div class="con" id="skills">
+                <div class="units">
+                    <h4>HTML Developer - 
+                    <span>Pinterest (2010-2012)</span></h4>
+                    <p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores, illum vero sed sit tempora voluptatibus! </p>
+                </div>
+                <div class="units">
+                    <h4>Web Designer - 
+                    <span>Facebook (2012-2014)</span></h4>
+                    <p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis corporis deleniti officia ipsam placeat.</p>
+                </div>
+                <div class="units">
+                    <h4>Frontend Developer - 
+                    <span>Instagram (2014-2015)</span></h4>
+                    <p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet consectetur adipisicing elit. A, ipsa natus eligendi adipisci sapiente ratione?</p>
+                </div>
+                <div class="units">
+                    <h4>Node.js Developer - 
+                    <span>Twitter (2015-2016)</span></h4>
+                    <p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis blanditiis voluptatum omnis, eum hicdo</p>
+                </div>
+                <div class="units">
+                    <h4>FullStack Developer - 
+                    <span>Youtube (2016-2018)</span></h4>
+                    <p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus, perferendis repudiandae. Quae sit soluta.</p>
+                </div>
+                <div class="units">
+                    <h4>Software Developer - 
+                    <span>Microsoft (2018-2023)</span></h4>
+                    <p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam dicta illo molestias fuga, laboriosam .</p>
+                </div>
+                
             </div>
-            
         </div>
+        
 
     </section>
     <footer>
@@ -131,7 +153,7 @@ <h4>Software Developer -</h4>
                 <div>Services</div>
                 <div>Contact</div>
             </div>
-            <div>
+            <!-- <div>
                 <div>Home</div>
                 <div>About</div>
                 <div>Services</div>
@@ -144,7 +166,7 @@ <h4>Software Developer -</h4>
                 <div>Services</div>
                 <div>Contact</div>
     
-            </div>
+            </div> -->
             
         </div>