diff --git a/about.css b/about.css
index a6148e5..b543495 100644
--- a/about.css
+++ b/about.css
@@ -2,7 +2,6 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    font-family: 'Times New Roman', Times, serif;
 }
 
 html {
@@ -12,18 +11,22 @@ html {
 
 nav {
     background-color: rgb(9, 0, 30);
+    filter: drop-shadow(10px 10px 10px gray);
     width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    align-items: center;
     color: rgb(255, 255, 255);
-    padding: 20px;
+    padding: 15px;
+    position: fixed;
 }
 
 nav #navigation {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
+    align-items: center;
 }
 
 nav #navigation a {
@@ -39,15 +42,20 @@ nav #dropdownmenu {
 
 nav #dropdown {
     position: absolute;
-    left: 40%;
-    margin-top: 50px;
-    width: 60%;
-    height: 60%;
+    left: 55%;
+    margin-top: 470px;
+    width: 200px;
+    height: 400px;
     display: none;
     background-color: #02012e;
-    border: 1px solid white;
     flex-direction: column;
     align-items: center;
+    font-size: large;
+}
+
+nav #logo img{
+    width: 40px;
+    height: 40px;
 }
 
 nav #dropdown a {
@@ -56,11 +64,6 @@ nav #dropdown a {
     color: white;
 }
 
-nav #lang a {
-    color: white;
-    text-decoration: none;
-}
-
 @media (max-width:600px) {
     nav #navigation {
         display: none;
@@ -81,7 +84,6 @@ nav #lang a {
     text-align: center;
     color: rgb(2, 0 ,40);
     font-size: larger;
-    border-bottom: 1px solid rgb(2, 0 ,40);
 }
 
 .about p{
@@ -97,7 +99,6 @@ nav #lang a {
     text-align: center;
     color: rgb(2, 0 ,40);
     font-size: larger;
-    border-bottom: 1px solid rgb(2, 0 ,40);
 }
 
 .background p{
@@ -113,7 +114,6 @@ nav #lang a {
     text-align: center;
     color: rgb(2, 0 ,40);
     font-size: larger;
-    border-bottom: 1px solid rgb(2, 0 ,40);
 }
 
 .experience h3{
@@ -133,7 +133,6 @@ nav #lang a {
     text-align: center;
     color: rgb(2, 0 ,40);
     font-size: larger;
-    border-bottom: 1px solid rgb(2, 0 ,40);
 }
 
 .softskills p{
@@ -149,7 +148,6 @@ nav #lang a {
     text-align: center;
     color: rgb(2, 0 ,40);
     font-size: larger;
-    border-bottom: 1px solid rgb(2, 0 ,40);
 }
 
 .toolsandtech p{
@@ -166,7 +164,6 @@ nav #lang a {
     text-align: center;
     color: rgb(2, 0 ,40);
     font-size: larger;
-    border-bottom: 1px solid rgb(2, 0 ,40);
 }
 
 .researchpaper p{
@@ -186,7 +183,6 @@ nav #lang a {
     text-align: center;
     color: rgb(2, 0 ,40);
     font-size: larger;
-    border-bottom: 1px solid rgb(2, 0 ,40);
 }
 
 .methodologies p{
@@ -202,7 +198,6 @@ nav #lang a {
     text-align: center;
     color: rgb(2, 0 ,40);
     font-size: larger;
-    border-bottom: 1px solid rgb(2, 0 ,40);
 }
 
 .education p{
@@ -219,7 +214,6 @@ nav #lang a {
     text-align: center;
     color: rgb(2, 0 ,40);
     font-size: larger;
-    border-bottom: 1px solid rgb(2, 0 ,40);
 }
 
 .language p{
@@ -234,7 +228,6 @@ nav #lang a {
     text-align: center;
     color: rgb(2, 0 ,40);
     font-size: larger;
-    border-bottom: 1px solid rgb(2, 0 ,40);
 }
 
 .volunteer p{
diff --git a/about.html b/about.html
index bcdb3f9..f4c3e88 100644
--- a/about.html
+++ b/about.html
@@ -6,23 +6,24 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
     <link rel="stylesheet" href="about.css">
     <script src="https://kit.fontawesome.com/9da769037d.js" crossorigin="anonymous"></script>
+    <link rel="shortcut icon" href="assets/logo.png" type="image/x-icon">
     <title>Lin Khant Htel</title>
 </head>
 <body>
     <nav>
         <div id="logo" style="font-size: larger;padding-top: 5px;">
-            <p>LKH</p>
+            <img src="./assets/logo.png" alt="Logo">
         </div>
         <div id="navigation">
             <a href="index.html">Home</a>
             <a href="about.html">About</a>
             <a href="projects.html">Projects</a>
         </div>
-        <div id="lang">
-            
+        <div>
+            <a href="mailto:linkhanthtel@icloud.com"><i class="fa-regular fa-envelope" style="color: white;font-size: xx-large;"></i></a>
         </div>
         <div id="dropdownmenu">
-            <i class="fa-solid fa-bars" style="font-size: x-large;border: 1px solid white; padding: 10px"></i>
+            <i class="fa-solid fa-bars" style="font-size: medium;border: 1px solid white; padding: 10px"></i>
         </div>
         <div id="dropdown" style="display: none;">
             <a href="index.html">Home</a>
@@ -45,16 +46,16 @@ <h1>Background</h1>
         </p>
     </div>
 
-    <div class="softskills">
-        <h1>Soft Skills</h1>
-        <p>Problem Solving | Self-motivated | Adaptability | Attention to Detail | Communication | Teamwork and Collaboration | Time Management | Creativity | Networking | Customer Focus | Systematic | Ethusiastic </p>
-    </div>
-
     <div class="toolsandtech">
         <h1>Tools and Technologies</h1>
         <p>HTML | CSS | Tailwind CSS | JavaScript | Bootstrap | jQuery | Vue.js | React.js | Node.js | Express.js | MongoDB | Next.js | React Native | Jest | Webpack | Babel | Git | GitHub | PHP | Python | Flask | MySQL | Figma | Adobe XD </p>
     </div>
 
+    <div class="softskills">
+        <h1>Soft Skills</h1>
+        <p>Problem Solving | Self-motivated | Adaptability | Attention to Detail | Communication | Teamwork and Collaboration | Time Management | Creativity | Networking | Customer Focus | Systematic | Ethusiastic </p>
+    </div>
+
     <!-- <div class="researchpaper">
         <h1>Publication</h1>
         <p>My research about the natural disasters in Myanmar focused mainly on Yangon which is the biggest and the most commercial city. I mentioned how people withstand disasters and how the government, non-governmental organizations, and many charity organizations support the affected areas and localities. Preparing to withstand natural disasters in advance is much better before the localities encountered the disasters. In my research, I discussed some giant disasters, flooding, and earthquakes that happened in Myanmar in the last decade. I described how people in Yangon withstand the disasters and how people survive in the locations susceptible to natural disasters.</p><br>
@@ -81,12 +82,12 @@ <h1>Languages</h1>
         <p>French - Conversational</p>
     </div>
 
-    <div class="volunteer">
+    <!-- <div class="volunteer">
         <h1>Volunteering Experiences</h1>
             <p>Virtual Web Researcher - <a href="https://2ndchance4pets.org">2nd Chance 4 Pets</a></p>
             <p>Ambassador - <a href="https://iymc.info/en/linhtel">International Youth Math Challenge</a></p>
             <p>Ambassador - <a href="https://iaac.space/en/linhtel">International Astronomy and Astrophysics Competition</a></p>
-    </div>
+    </div> -->
 
     <div class="footer">
         <p>Copyright © 2024 | Lin Khant Htel | All rights reserved</p>
diff --git a/about.js b/about.js
index 65fe5d0..80da70f 100644
--- a/about.js
+++ b/about.js
@@ -1,7 +1,3 @@
-$('#lang').click(function() {
-    alert("Burmese version is not available yet")
-})
-
 $("#dropdownmenu").click(function() {
     $("#dropdown").fadeToggle();
 })
diff --git a/assets/image1.jpg b/assets/image1.jpg
new file mode 100644
index 0000000..254bae5
Binary files /dev/null and b/assets/image1.jpg differ
diff --git a/assets/image2.jpg b/assets/image2.jpg
new file mode 100644
index 0000000..fe24b6f
Binary files /dev/null and b/assets/image2.jpg differ
diff --git a/assets/logo.png b/assets/logo.png
new file mode 100644
index 0000000..9e046db
Binary files /dev/null and b/assets/logo.png differ
diff --git a/assets/logolight.png b/assets/logolight.png
new file mode 100644
index 0000000..ea0d2da
Binary files /dev/null and b/assets/logolight.png differ
diff --git a/index.css b/index.css
index d0685f2..1362028 100644
--- a/index.css
+++ b/index.css
@@ -2,7 +2,6 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    font-family: 'Times New Roman', Times, serif;
 }
 
 html {
@@ -12,18 +11,22 @@ html {
 
 nav {
     background-color: rgb(9, 0, 30);
+    filter: drop-shadow(10px 10px 10px gray);
     width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    align-items: center;
     color: rgb(255, 255, 255);
-    padding: 20px;
+    padding: 15px;
+    position: fixed;
 }
 
 nav #navigation {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
+    align-items: center;
 }
 
 nav #navigation a {
@@ -39,15 +42,20 @@ nav #dropdownmenu {
 
 nav #dropdown {
     position: absolute;
-    left: 40%;
-    margin-top: 50px;
-    width: 60%;
-    height: 60%;
+    left: 55%;
+    margin-top: 470px;
+    width: 200px;
+    height: 400px;
     display: none;
     background-color: #02012e;
-    border: 1px solid white;
     flex-direction: column;
     align-items: center;
+    font-size: large;
+}
+
+nav #logo img{
+    width: 40px;
+    height: 40px;
 }
 
 nav #dropdown a {
@@ -56,11 +64,6 @@ nav #dropdown a {
     color: white;
 }
 
-nav #lang a {
-    color: white;
-    text-decoration: none;
-}
-
 @media (max-width:600px) {
     nav #navigation {
         display: none;
@@ -83,12 +86,24 @@ nav #lang a {
     color: rgb(2, 0, 40);
 }
 
+.welcomepage h1{
+    animation: animate_left_right;
+    animation-duration: 3s;
+}
+
+.welcomepage h5{
+    animation: animate_right_left;
+    animation-duration: 3s;
+}
+
 .welcomepage p{
     padding-left: 7%;
     padding-right: 7%;
     padding-bottom: 10px;
     padding-top: 20px;
     text-align: center;
+    animation: animate_bottom_top;
+    animation-duration: 4s;
 }
 
 @media (max-width:600px) {
@@ -101,6 +116,13 @@ nav #lang a {
     }
 }
 
+#hero {
+    background-image: url('./assets/image1.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    padding-bottom: 60px;
+}
+
 .welcomepage a{
     color: rgb(2, 0, 40);
     padding: 10px;
@@ -123,6 +145,23 @@ nav #lang a {
     padding-bottom: 100px;
 }
 
+/* animation */
+
+@keyframes animate_left_right {
+    from {opacity: 0;padding-left: 10%;}
+    to {opacity: 1;}
+}
+
+@keyframes animate_right_left {
+    from {opacity: 0;padding-right: 10%;}
+    to {opacity: 1;}
+}
+
+@keyframes animate_bottom_top {
+    from {opacity: 0;padding-top: 10%;}
+    to {opacity: 1;}
+}
+
 .icon{
     padding-left: 20px;
 }
@@ -131,29 +170,59 @@ nav #lang a {
     transform: scale(1.5,1.5);
 }
 
+#tools {
+    padding-top: 70px;
+    padding-bottom: 100px;
+}
+
 .tools{
     display: flex;
     text-align: center;
     justify-content: center;
-    padding: 20px;
-    padding-bottom: 100px;
+    align-items: center;
+    padding-top: 30px;
 }
 
 #contactinfo{
-    border: 1px solid rgb(2, 0, 40);
-    border-radius: 20px;
     text-align: center;
     font-size: medium;
-    color: rgb(2, 0, 40);
     padding-top: 10px;
     padding-bottom: 50px;
     padding-left: 20px;
+    margin-top: 50px;
+    margin-bottom: 80px;
     margin-left: 12%;
     margin-right: 12%;
 }
 
-#contactinfo a {
+@media (max-width: 600px) {
+    #contactinfo {
+        margin-left: 1%;
+        margin-right: 1%;
+    }
+}
+
+#contact {
+    background-image: url('./assets/image2.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    padding-top: 100px;
+    padding-bottom: 100px;
+}
+
+#contactinfo #submit {
+    background-color: transparent;
     color: rgb(2, 0, 40);
+    padding: 15px;
+    font-size: large;
+    font-family: 'Times New Roman', Times, serif;
+    border-radius: 10px;
+    border: 1px solid rgb(2, 0, 40);
+}
+
+#contactinfo #submit:hover {
+    background-color: #02012e;
+    color: white;
 }
 
 button{
@@ -176,7 +245,6 @@ button:hover{
     background-color: #02012e;
     color: white;
     padding: 30px;
-    margin-top: 100px;
     margin-bottom: 0;
     text-align: center;
 }
diff --git a/index.html b/index.html
index 6fffbd2..13a77dd 100644
--- a/index.html
+++ b/index.html
@@ -6,23 +6,50 @@
     <link rel="stylesheet" href="index.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
     <script src="https://kit.fontawesome.com/9da769037d.js" crossorigin="anonymous"></script>
+    <link rel="shortcut icon" href="assets/logo.png" type="image/x-icon">
     <title>Lin Khant Htel</title>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
+    <script type="text/javascript">
+        (function() {
+            // https://dashboard.emailjs.com/admin/account
+            emailjs.init({
+              publicKey: "h9izG2QFTBr4pRz1U",
+            });
+        })();
+    </script>
+    <script type="text/javascript">
+        window.onload = function() {
+            document.getElementById('contact-form').addEventListener('submit', function(event) {
+                event.preventDefault();
+                // these IDs from the previous steps
+                emailjs.sendForm('service_6xkbirh', 'template_9lxe4h6', this)
+                    .then(() => {
+                        console.log('SUCCESS!');
+                        event.target.reset();
+                        alert("Your message has been sent!")
+                    }, (error) => {
+                        console.log('FAILED...', error);
+                    });
+            });
+        }
+    </script>
 </head>
 <body>
+    <!-- Navbar -->
     <nav>
         <div id="logo" style="font-size: larger;padding-top: 5px;">
-            <p>LKH</p>
+            <img src="./assets/logo.png" alt="Logo">
         </div>
         <div id="navigation">
             <a href="index.html">Home</a>
             <a href="about.html">About</a>
             <a href="projects.html">Projects</a>
         </div>
-        <div id="lang">
-            
+        <div>
+            <a href="mailto:linkhanthtel@icloud.com"><i class="fa-regular fa-envelope" style="color: white;font-size: xx-large;"></i></a>
         </div>
         <div id="dropdownmenu">
-            <i class="fa-solid fa-bars" style="font-size: x-large;border: 1px solid white; padding: 10px"></i>
+            <i class="fa-solid fa-bars" style="font-size: large;border: 1px solid white; padding: 10px"></i>
         </div>
         <div id="dropdown" style="display: none;">
             <a href="index.html">Home</a>
@@ -31,13 +58,16 @@
         </div>
     </nav>
 
+    <!-- Hero -->
+    <div id="hero">
     <div class="welcomepage">
         <h1 style="padding-bottom: 20px;">Lin Khant Htel</h1>
         <h5 style="padding-bottom: 20px;">Full Stack Developer</h5><br>
-        <p>I am a strong learner and innovative individual who is passionate about creating simple and minimalist websites that provide a seamless experience for users. Embracing new tools and frameworks is my second nature, keeping me ahead in this ever-evolving digital landscape. </p><br><br>
+        <p>A highly motivated full stack developer with a keen interest in leveraging modern frameworks and libraries to create innovative and efficient web applications and software solutions. Possesses a deep passion for staying abreast of cutting-edge technologies within the field, ensuring the implementation of the latest advancements in projects.</p><br><br>
         <a href="lin.pdf" download="CV_Lin Khant Htel">Download CV</a>
     </div><br><br>
 
+    <!-- Social Media -->
     <div class="socialmedia">
         <div class="icon"><a href="https://www.facebook.com/lin.htel"><i class="fa-brands fa-square-facebook" style="color: rgb(2, 0, 40);font-size: xx-large;"></i></a></div>
         <div class="icon"><a href="https://www.instagram.com/lk7nv/?next=%2F"><i class="fa-brands fa-square-instagram" style="color: rgb(2, 0, 40);font-size: xx-large;"></i></a></div>
@@ -46,29 +76,45 @@ <h5 style="padding-bottom: 20px;">Full Stack Developer</h5><br>
         <!-- <div class="icon"><a href="https://twitter.com/lk7_navy"><i class="fa-brands fa-twitter" style="color: rgb(2, 0, 40);font-size: xx-large;"></i></a></div>
         <div class="icon"><a href="https://www.youtube.com/channel/UCzwp7H1ZoWgq8KH26rcGdlg"><i class="fa-brands fa-square-youtube" style="color: yellowgreen;"></i></a></div> -->
         <div class="icon"><a href="https://www.behance.net/linkhanthtel"><i class="fa-brands fa-square-behance" style="color: rgb(2, 0, 40);font-size: xx-large;"></i></a></div>
-    </div><br><br>
+    </div>
+    </div>
 
+    <!-- Tools and Contact Section -->
+    <div id="tools">
     <div class="mytools">
-        <h1 style="text-align: center;color: rgb(2, 0, 40);">Tools and Technologies</h1><br><br>
+        <h1 style="text-align: center;color: rgb(2, 0, 40);padding-top: 50px;">Tools and Technologies</h1><br><br>
         <div class="tools">
             <div class="icon"><i class="fa-brands fa-html5" style="color: rgb(2, 0, 40);font-size: xx-large;"></i></div>
             <div class="icon"><i class="fa-brands fa-css3-alt" style="color: rgb(2, 0, 40);font-size: xx-large;"></i></div>
             <div class="icon"><i class="fa-brands fa-js" style="color: rgb(2, 0, 40);font-size: xx-large;"></i></div>
             <div class="icon"><i class="fa-brands fa-react" style="color: rgb(2, 0, 40);font-size: xx-large;"></i></div>
+            <div class="icon"><i class="fa-brands fa-node" style="color: rgb(2, 0, 40);font-size: xx-large;"></i></div>
+            <div class="icon"><i class="fa-brands fa-git-alt" style="color: rgb(2, 0, 40);font-size: xx-large;"></i></div>
+        </div>
+        <div class="tools">
+            <div class="icon"><i class="fa-brands fa-square-github" style="color: rgb(2, 0, 40);font-size: xx-large;"></i></div>
+            <div class="icon"><i class="fa-solid fa-database" style="color: rgb(2, 0, 40);font-size: xx-large;"></i></div>
+            <div class="icon"><i class="fa-brands fa-vuejs" style="color: rgb(2, 0, 40);font-size: xx-large;"></i></div>
             <div class="icon"><i class="fa-brands fa-php" style="color: rgb(2, 0, 40);font-size: xx-large;"></i></div>
             <div class="icon"><i class="fa-brands fa-python" style="color: rgb(2, 0, 40);font-size: xx-large;"></i></div>
             <div class="icon"><i class="fa-brands fa-figma" style="color: rgb(2, 0, 40);font-size: xx-large;"></i></div>
         </div>
+    </div>
     </div>
 
-    <!-- <div id="contactinfo">
-        <h1 style="padding-bottom: 20px;">Contact</h1>
-        <p>Inquiries : <a href="mailto:linkhanthtel@icloud.com">linkhanthtel@icloud.com</a><br><br>Mobile : +95 9 254077935</p><br><br>
-        <input type="text" id="name" style="background-color: transparent;width: 200px;height: 25px;padding: 10px;border-radius: 10px;border: 1px solid black;font-size: large;" placeholder="Name"><br><br>
-        <input type="email" id="email"  style="background-color: transparent;width: 200px;height: 25px;padding: 10px;border-radius: 10px;border: 1px solid black;font-size: large;" placeholder="Email"><br><br>
-        <textarea name="#" id="#" cols="30" rows="10" style="background-color: transparent;padding: 10px;border-radius: 10px;border: 1px solid black;font-size: large;" placeholder="Your Message"></textarea><br><br><br>
-        <button type="submit" id="submit">Submit</button>
-    </div> -->
+        <!-- Contact Section -->
+    <div id="contact">
+        <div id="contactinfo">
+            <form id="contact-form">
+                <h1 style="padding-bottom: 20px;">Contact</h1>
+                <input required type="hidden" name="contact_number">
+                <input required type="text" name="user_name" style="background-color: transparent;width: 300px;height: 40px;padding: 10px;border-radius: 10px;border: 1px solid black;font-size: large;" placeholder="Name"><br><br>
+                <input required type="email" name="user_email" style="background-color: transparent;width: 300px;height: 40px;padding: 10px;border-radius: 10px;border: 1px solid black;font-size: large;" placeholder="Email"><br><br>
+                <textarea required name="message" style="background-color: transparent;width: 300px;height: 150px;padding: 10px;border-radius: 10px;border: 1px solid black;font-size: large;" placeholder="Your Message"></textarea><br><br>
+                <input type="submit" id="submit" value="Send">
+            </form>
+        </div>
+    </div>
 
     <div class="footer">
         <p>Copyright © 2024 | Lin Khant Htel | All rights reserved</p>
diff --git a/index.js b/index.js
index 1312d5f..ef13155 100644
--- a/index.js
+++ b/index.js
@@ -6,10 +6,6 @@ $("#dropdownmenu").click(function() {
     $("#dropdown").fadeToggle();
 })
 
-$('#lang').click(function() {
-    alert("Burmese version is not available yet")
-})
-
 // document.getElementById('submit').onclick = function() {
 //     const nom = document.getElementById('name').value;
 //     document.getElementById('contactinfo').innerHTML = `Dear ${nom} ! <br><br> Thank you for your message! I will get back to you soon!`;
diff --git a/projects.css b/projects.css
index f297c3b..d83b719 100644
--- a/projects.css
+++ b/projects.css
@@ -2,7 +2,6 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    font-family: 'Times New Roman', Times, serif;
 }
 
 html {
@@ -12,18 +11,22 @@ html {
 
 nav {
     background-color: rgb(9, 0, 30);
+    filter: drop-shadow(10px 10px 10px gray);
     width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    align-items: center;
     color: rgb(255, 255, 255);
-    padding: 20px;
+    padding: 15px;
+    position: fixed;
 }
 
 nav #navigation {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
+    align-items: center;
 }
 
 nav #navigation a {
@@ -39,15 +42,20 @@ nav #dropdownmenu {
 
 nav #dropdown {
     position: absolute;
-    left: 40%;
-    margin-top: 50px;
-    width: 60%;
-    height: 60%;
+    left: 55%;
+    margin-top: 470px;
+    width: 200px;
+    height: 400px;
     display: none;
     background-color: #02012e;
-    border: 1px solid white;
     flex-direction: column;
     align-items: center;
+    font-size: large;
+}
+
+nav #logo img{
+    width: 40px;
+    height: 40px;
 }
 
 nav #dropdown a {
@@ -56,11 +64,6 @@ nav #dropdown a {
     color: white;
 }
 
-nav #lang a {
-    color: white;
-    text-decoration: none;
-}
-
 @media (max-width:600px) {
     nav #navigation {
         display: none;
diff --git a/projects.html b/projects.html
index 0cda1e2..b714305 100644
--- a/projects.html
+++ b/projects.html
@@ -6,23 +6,24 @@
     <link rel="stylesheet" href="projects.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
     <script src="https://kit.fontawesome.com/9da769037d.js" crossorigin="anonymous"></script>
+    <link rel="shortcut icon" href="assets/logo.png" type="image/x-icon">
     <title>Lin Khant Htel</title>
 </head>
 <body>
     <nav>
         <div id="logo" style="font-size: larger;padding-top: 5px;">
-            <p>LKH</p>
+            <img src="./assets/logo.png" alt="Logo">
         </div>
         <div id="navigation">
             <a href="index.html">Home</a>
             <a href="about.html">About</a>
             <a href="projects.html">Projects</a>
         </div>
-        <div id="lang">
-            <a href="#"></a>
+        <div>
+            <a href="mailto:linkhanthtel@icloud.com"><i class="fa-regular fa-envelope" style="color: white;font-size: xx-large;"></i></a>
         </div>
         <div id="dropdownmenu">
-            <i class="fa-solid fa-bars" style="font-size: x-large;border: 1px solid white; padding: 10px"></i>
+            <i class="fa-solid fa-bars" style="font-size: medium;border: 1px solid white; padding: 10px"></i>
         </div>
         <div id="dropdown" style="display: none;">
             <a href="index.html">Home</a>
diff --git a/projects.js b/projects.js
index 6c73dfd..7350574 100644
--- a/projects.js
+++ b/projects.js
@@ -1,7 +1,3 @@
-$('#lang').click(function() {
-    alert("Burmese version is not available yet")
-})
-
 $("#dropdownmenu").click(function() {
     $("#dropdown").fadeToggle();
 })
