diff --git a/about.html b/about.html
index c1b550b1..724f5ab8 100644
--- a/about.html
+++ b/about.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
         integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous" />
     <link rel="icon" type="image/png" href="Images/favicon.png">
-    <title>Naruto</title>
+    <title>Naruto-About</title>
     <link rel="shortcut icon" href="./Images/favicon.ico" />
     <link rel="stylesheet" href="css/index.css">
     <link rel="stylesheet" href="css/contact.css">
@@ -41,7 +41,6 @@
             <!-- <a class="navbar-brand brand1 ml-4" href="#" style="color: beige;">Naruto</a> -->
 
 
-
            
 
                 <span class="clear" onclick="document.getElementById('mysearch').value = ' '"></span>
@@ -58,13 +57,15 @@
                         <a class="nav-link link" href="./index.html" >Home</a>
 
                     </li>
-                    <li class="nav-item active mx-4">
-                        <a class="link nav-link " href="./about.html">About</a>
-                    </li>
-                    <li class="nav-item mx-4">
-                        <a class="link nav-link " href="./contact.html" >Contact</a>
-
-                    </li>
+                     <li class="nav-item mx-4">
+                            <a class="link nav-link " href="./about.html" >About</a>
+                        </li>
+                        <li class="nav-item mx-4">
+                            <a class="link nav-link " href="./contact.html" >Contact</a>
+                        </li>
+                        <li class="nav-item mx-4">
+                            <a class="link nav-link " href="./Game.html" >Game</a>
+                        </li>
                     <div class="dark_lang">
                         <li>
                             <div>
diff --git a/adi image/contact naruto.png b/adi image/contact naruto.png
new file mode 100644
index 00000000..435061a5
Binary files /dev/null and b/adi image/contact naruto.png differ
diff --git a/adi image/contact_naruto.png b/adi image/contact_naruto.png
new file mode 100644
index 00000000..412d2d90
Binary files /dev/null and b/adi image/contact_naruto.png differ
diff --git a/adi image/kakashi.png b/adi image/kakashi.png
new file mode 100644
index 00000000..0ef64fc4
Binary files /dev/null and b/adi image/kakashi.png differ
diff --git a/contact.html b/contact.html
index 246a3685..461bc9df 100644
--- a/contact.html
+++ b/contact.html
@@ -21,23 +21,23 @@
     <link href="css/translate.css" rel="stylesheet" type="text/css" media="all" />
     <link rel="stylesheet" href="css/contact.css" />
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
-    <title>Contact Form</title>
+    <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+  />
+    <title>Naruto-Contact</title>
   </head>
-  <body class="contact_body light-mode">
+
+  <body class="contact_body light-mode" style="position: relative; overflow-y: hidden;">
      <header>
-      <nav class="navbar fixed-top navbar-expand-lg navbar-light" style="height: 60px; padding:5px 5px 5px 30px;">
+      <nav class=" animate__animated animate__fadeInDown navbar fixed-top navbar-expand-lg navbar-light" style="height: 60px; padding:5px 5px 5px 30px;">
+
               <img src="adi image/naruto-advenimiento-los-animes-cortos-2.png"  style="max-height: 100%; width: auto;">
                 <!-- <a class="navbar-brand brand1 ml-4" href="#" style="color: beige;">Naruto</a> -->
 
 
-                <div class="search">
-                    <div class="icon"></div>
-                    <div class="input">
-                        <input type="text" placeholder="search" id="mysearch">
-                    </div>
-
-                    <span class="clear" onclick="document.getElementById('mysearch').value = ' '"></span>
-                </div>
+              
+             
                 <button class="navbar-toggler" class="menu-btn" type="button" data-toggle="collapse"
                     data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                     aria-label="Toggle navigation">
@@ -82,13 +82,15 @@
             </nav>
 
         </header>
-    <h1>Naruto Friends, Get In Touch with us</h1>
-
-    <div class="wpcf7" id="wpcf7-f156-p143-o1 formwrap">
+    <h1 class=" animate__animated animate__fadeInUp animate__slow">Naruto Friends, Get In Touch with us</h1>
+    <img class="img1 animate__animated animate__fadeInLeft" src="adi image/kakashi.png" alt="">
+      <img class="img2 animate__animated animate__fadeInRight" src="adi image/contact_naruto.png " alt="">
+    <div class="wpcf7 container  animate__animated animate__fadeInUp animate__slow" id="wpcf7-f156-p143-o1 formwrap" >
+  
       <form
         action="https://formsubmit.co/vikhyatsingh628@gmail.com"
         method="POST"
-        class="contact__form wpcf7-form"
+        class="contact__form wpcf7-form "
         novalidate="novalidate"
       >
         <input type="hidden" name="_captcha" value="false" />
@@ -148,12 +150,26 @@ <h1>Naruto Friends, Get In Touch with us</h1>
           <input
             type="submit"
             value="Send"
-            class="wpcf7-form-control wpcf7-submit btn"
+            class="wpcf7-form-control wpcf7-submit btn" 
+            style="float: none; margin-left: 165px;"
           />
         </p>
         <div class="wpcf7-response-output wpcf7-display-none"></div>
       </form>
     </div>
+
+    <footer class="footer" style="padding: 20px;">
+      <marquee> Developed and Designed By <span id="idblink" onclick="tap()" style="cursor: pointer;"><u>Vikhyat
+           Singh</u></span> | © All
+       Rights Reserved</marquee>
+   </footer>    
+     <script>
+    function tap() {
+        const link = document.getElementById('idblink')
+        window.location.href = "https://github.com/vikhyatsingh123"
+    }
+</script>
+
     <script>
       function darkmode() {
           // console.log("hello");
diff --git a/css/contact.css b/css/contact.css
index 27c883da..e46bc5a3 100644
--- a/css/contact.css
+++ b/css/contact.css
@@ -1,7 +1,9 @@
 @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
 
 .contact_body {
-  background: url("/adi image/677425.jpg");
+
+  /* background: url("/adi image/677425.jpg"); */
+
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
@@ -14,10 +16,15 @@
   right: 0;
   bottom: 0;
   overflow-y: auto;
-}
 
+  height: 100vh;
+}
+.container{
+  margin-top: 50px;
+  margin-bottom: 95px;
+}
 h1 {
-  color:aqua;
+  color:rgb(255, 255, 255);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
   padding-top: 30px;
   font-size: 50px;
@@ -27,11 +34,23 @@ h1 {
   margin: 10px;
 }
 
-form {
+.dark-mode h1{
+  color:#c0a5ff;
+  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
+  padding-top: 30px;
+  font-size: 50px;
+  font-weight: 700;
+  text-align: center;
+  font-family: 'Source Sans Pro', sans-serif;
+  margin: 10px;
+}
+
+
+.light-mode form {
   margin-left: auto;
   margin-right: auto;
-  width: 965px;
-  height: 450px;
+  width: 600px;
+  height: auto;
   padding: 30px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
@@ -39,64 +58,123 @@ form {
   -moz-background-clip: padding;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
+  background: rgba( 255, 255, 255, 0.2 );
+  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+  backdrop-filter: blur( 5.5px );
+  -webkit-backdrop-filter: blur( 5.5px );
+  border-radius: 10px;
+  border: 1px solid rgba( 255, 255, 255, 0.18 );
   overflow: hidden;
 }
 
-textarea {
-  background: white;
-  width: 894px;
-  height: 110px;
-  border: none;
+
+
+.dark-mode form {
+  margin-left: auto;
+  margin-right: auto;
+  width: 600px;
+ 
+  height: auto;
+  padding: 30px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   -moz-background-clip: padding;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
-  display: block;
-  font-family: 'Source Sans Pro', sans-serif;
+
+
+  backdrop-filter: blur( 5.5px );
+  -webkit-backdrop-filter: blur( 5.5px );
+  border-radius: 10px;
+  background: rgba(83, 83, 83, 0.25);
+  box-shadow: rgba(145, 56, 255, 0.35) 0px 30px 100px 0px;
+  border: 2px solid rgba(146, 56, 255, 0.711);
+  overflow: hidden;
+}
+.light-mode textarea {
   font-size: 18px;
-  color: black;
-  padding-left: 45px;
-  padding-right: 20px;
-  padding-top: 12px;
+  color: rgb(82, 82, 82);
+  width: 100%;
+  border-radius: 20px;
+  height: 40px;
+  padding: 20px 20px;
+  min-height: 122px;
+  background-color: rgba(255, 255, 255, 0.536);
+  border: 2px solid rgba(70, 70, 70, 0.873);
+  transition: 0.3s ease-in;
+  margin-bottom: 20px;
+  overflow: hidden;
+}
+
+.dark-mode textarea {
+  font-size: 18px;
+  color: rgb(27, 27, 27);
+width: 100%;
+    border-radius: 20px;
+    height: 40px;
+    padding: 20px 20px;
+    min-height: 122px;
+
+    background-color: rgb(255, 255, 255);
+    border: 3px solid rgb(146, 56, 255);
+    transition: 0.3s ease-in;
+
   margin-bottom: 20px;
   overflow: hidden;
 }
 
 
 
-.nameinput,
-.emailinput {
+
+.light-mode .nameinput,
+.light-mode .emailinput {
   width: 894px;
   height: 48px;
-  border: none;
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
-  border-radius: 10px;
-  -moz-background-clip: padding;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  display: block;
-  font-family: 'Source Sans Pro', sans-serif;
+  width: 100%;
+  border-radius: 20px;
+  height: 40px;
+  padding: 20px 20px;
+  background-color: rgba(255, 255, 255, 0.536);
+  border: 2px solid rgba(70, 70, 70, 0.873);
+  transition: 0.3s ease-in;
   font-size: 18px;
-  color: black;
-  padding-left: 20px;
-  padding-right: 20px;
+  color: rgb(82, 82, 82);
   margin-bottom: 20px;
 }
 
+
+.dark-mode .nameinput,
+.dark-mode .emailinput {
+  width: 894px;
+  height: 48px;
+  width: 100%;
+  border-radius: 20px;
+  height: 40px;
+  padding: 20px 20px;
+  border-style: none;
+  background-color: rgb(255, 255, 255);
+  border: 3px solid rgb(146, 56, 255);
+  transition: 0.3s ease-in;
+  font-size: 18px;
+  color: rgb(4, 4, 4);
+  margin-bottom: 20px;
+}
+
+
+
 input[type=submit] {
   cursor: pointer;
 }
 
 input.nameinput {
-  background: white;
+
+
+
   padding-left: 45px;
 }
 
 input.emailinput {
-  background: white;
   padding-left: 45px;
 }
 
@@ -123,11 +201,19 @@ input.message {
   color: #fff;
 }
 
-input:focus,
-textarea:focus {
-  -moz-box-shadow: 0 0 10px 10px rgb(3, 213, 245);
-  -webkit-box-shadow: 0 0 10px 10px rgb(3, 213, 245);
-  box-shadow: 0 0 10px 10px rgb(3, 213, 245);
+
+.light-mode input:focus,
+.light-mode textarea:focus {
+  background-color: rgb(255, 255, 255);
+  box-shadow: 0 0 2px 5px rgb(132, 222, 236);
+  overflow: hidden;
+  border:none;
+}
+
+.dark-mode input:focus,
+.dark-mode textarea:focus {
+  background-color: rgb(255, 255, 255);
+  box-shadow: 0 0 2px 5px rgb(160, 132, 236);
   overflow: hidden;
   border:none;
 }
@@ -186,7 +272,6 @@ textarea:focus::placeholder{
   background: #000000;
   outline: none;
   color:#ffffff;
-
   box-shadow: 0 4px #cecece;
   top: 2px;
 }
@@ -291,6 +376,7 @@ textarea:focus::placeholder{
     width: 225px !important;
   }
 
+
   .btn {
     width: 110px;
   }
@@ -298,4 +384,19 @@ textarea:focus::placeholder{
 .VIpgJd-ZVi9od-ORHb-OEVmcd{
   display: none;
   z-index: -10;
+
+}
+
+.img1{
+  position: absolute;
+  left: -30px;
+  bottom: -50px;
+  width: 500px;
+}
+.img2{
+  position: absolute;
+ right: -100px;
+  bottom: 50px;
+  width: 500px;
+
 }
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
index a3f94e53..6bbb7f03 100644
--- a/css/index.css
+++ b/css/index.css
@@ -165,6 +165,9 @@ main{
     color: #fff;
     font-size: 18px;
     font-weight: 500;
+    z-index: 10000;
+    position: relative;
+
 }
 .dark-mode .footer {
     display: block;
@@ -175,6 +178,8 @@ main{
     color: #fff;
     font-size: 18px;
     font-weight: 500;
+    position: relative; 
+    z-index: 10000;
 }
 
 .footer a span{
@@ -207,14 +212,16 @@ main{
 .contributors {
     margin: 0;
     padding: 0;
+
+
 }
 
 .contributors h1 {
+  
     text-align: center;
     color: white;
     font-size: 2.5rem;
     margin-bottom: 4%;
-
 }
 
 .contributors h1:hover {
@@ -248,7 +255,6 @@ main{
 }
 
 
-
 /* .VIpgJd-ZVi9od-ORHb-OEVmcd{
     display: none!important;
     height: 0;
diff --git a/css/style.css b/css/style.css
index c6061e7e..cb2ff186 100644
--- a/css/style.css
+++ b/css/style.css
@@ -551,7 +551,6 @@ h1 {
 
 #three {
  background: radial-gradient(circle at 0% 180%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
-
 }
 
 #buttons {
@@ -740,7 +739,6 @@ h2 {
 }
 
 /*about*/
-
 .light-mode .about-content {
   text-align: justify;
   font-size: 20px;
@@ -748,7 +746,6 @@ h2 {
   border-radius: 2rem;
   background: beige;
   overflow: hidden;
-
   transition: all 0.3s ease-in-out;
   padding: 30px;
   margin: 20px;
@@ -762,13 +759,13 @@ h2 {
   color: rgb(172, 83, 245);
   border-radius: 2rem;
   background-color: #1a1919c4;
-  border: 3px rgb(130, 60, 188) solid;
   overflow: hidden;
   transition: all 0.3s ease-in-out;
   padding: 30px;
   margin: 20px;
   min-height: 50vh;
-  box-shadow: rgba(132, 0, 255, 0.4) 0px 2px 40px, rgba(140, 0, 255, 0.3) 0px 7px 13px -3px, rgba(140, 0, 255, 0.2) 0px -3px 0px inset;
+  box-shadow: rgba(145, 56, 255, 0.35) 0px 30px 100px 0px;
+  border: 2px solid rgba(146, 56, 255, 0.711);
 }
 .light-mode .about-content:hover {
 
@@ -803,7 +800,6 @@ h1 {
 }
 
 
-
 .light-mode #four {
   background-color: #1877f2;
 }
@@ -811,8 +807,6 @@ h1 {
   background-color: #07499f;
 }
 
-
-
 .about-card {
   border-radius: 8px;
 }
@@ -1131,7 +1125,6 @@ ul.navbar-nav.mr-auto {
 .about_card {
   width: 300px;
   margin: 10px 60px;
-
 }
 /* social icons */
 .footer h5 {
diff --git a/index.html b/index.html
index 7a81e073..f55a63d6 100644
--- a/index.html
+++ b/index.html
@@ -25,8 +25,7 @@
     rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
   />
-
-    <title>Naruto</title>
+    <title>Naruto-Home</title>
 </head>
 <style>
 .vid {
@@ -88,7 +87,6 @@
                     <ul class="navbar-nav mr-auto">
                         <li class="nav-item active mx-4">
                             <a class="nav-link link" href="./index.html" >Home</a>
-
                         </li>
                         <li class="nav-item mx-4">
                             <a class="link nav-link " href="./about.html" >About</a>
@@ -98,7 +96,6 @@
                         </li>
                         <li class="nav-item mx-4">
                             <a class="link nav-link " href="./Game.html" >Game</a>
-
                         </li>
                         <div class="dark_lang">
                             <li>
@@ -139,7 +136,6 @@
     <!-- header video -->
 
     <div class="vid animate__animated animate__fadeIn" >
-
       
             <a href="#"><img src="adi image/naruto-shippuden.png" style="width: 600px;" class="logo"></a>
         
@@ -182,12 +178,10 @@
                 </a>
             </div> -->
             <div class="chardiv ">
-
                 <img class="heroimg good animate__animated animate__fadeInRight " src="adi image/Naruto-Uzumaki-No-Background.png" alt="" >
                 <img class="heroimg2 good animate__animated animate__fadeInLeft " src="adi image/png-image.png" alt="" >
                 <img class="vilimg evil animate__animated animate__fadeInLeft" src="adi image/uchiha_madara___png___by_anvmadara_dewr6zj-pre.png" alt="" >
                 <img class="vilimg2 evil animate__animated animate__fadeInRight  " src="adi image/d383ajh-c063f3bf-1787-4484-a75e-5bd8a8892a86.png" alt="" >
-
             <h1 class="chars">CHARACTERS</h1>
             <!-- Toggle Button Start -->
             <div class="toggle-switch">
@@ -263,7 +257,6 @@ <h2 class="card-title ">Himawari Uzumaki</h2>
                     </div>
                 </div>
                 <!-- Hero Jiraiya card start -->
-
                 <div class="flip-card animate__animated animate__flipInX good">
 
                     <div class="flip-card-inner">
@@ -2209,13 +2202,12 @@ <h2 class="card-title">Tenten</h2>
                     </div>
                 </div>
                 <!--Tenten card end-->
-
                 <!-- Might Guy card-->
-
                 <div class="flip-card">
                     <div class="flip-card-inner">
                         <div class="flip-card-front">
                                <div class="card-content">
+
                             <h2 class="card-title">Might Guy</h2>
                             </div>
 
@@ -3273,8 +3265,8 @@ <h2 class="card-title">Kurama</h2>
                     <div class="flip-card-inner">
                         <div class="flip-card-front">
                                <div class="card-content">
- 
-                           <h2 class="card-title">Teuchi</h2>
+
+                            <h2 class="card-title">Teuchi</h2>
                             </div>
                             <img data-src="https://static.wikia.nocookie.net/naruto/images/d/d6/Teuchi_Infobox.png"
                                 alt="Teuchi" height="300px" width="300px">
@@ -3283,7 +3275,6 @@ <h2 class="card-title">Teuchi</h2>
                                <div class="card-content">
                             <h2 class="card-title">Teuchi</h2>
                             </div>
-
                             <p class="card-text">As a teenager 34 years before the Fourth Shinobi World
                                 War, Teuchi devoted his life to making
                                 ramen. More than a decade later, he had a daughter called Ayame.</p>
@@ -3879,6 +3870,63 @@ <h2 class="card-title">Mito Uzumaki</h2>
                 <!--[Mito Uzumaki] card end-->
 
 
+                <!-- [Kushina Uzumaki] card start-->
+                <div class="flip-card">
+                    <div class="flip-card-inner">
+                        <div class="flip-card-front">
+                               <div class="card-content">
+                            <h2 class="card-title">Kushina Uzumaki</h2>
+                            </div>
+                            <img src="Images\Kushina_Uzumaki.png" alt="Kushina" height="300px" width="300px"
+                                class="img_card">
+                        </div>
+                        <div class="flip-card-back">
+                            <p class="card-text">[Kushina Uzumaki (うずまき クシナ, Uzumaki Kushina) is the mother of the
+                                series' protagonist, Naruto Uzumaki and the wife of the Fourth Hokage, Minato Namikaze.]
+                            </p>
+                            <p>While Naruto physically resembles his father, Minato, he inherits most of his personality
+                                from Kushina, who is brash, temperamental, likes ramen, and even has the "Believe it!".
+                                Being a member of the Uzumaki Clan, Kushina possesses a special chakra that was
+                                distinguished even among her peers, causing her to be sent from her homeland to
+                                Konohagakure to be the host of Kurama, replacing Mito Uzumaki.</p>
+                        </div>
+                    </div>
+                </div>
+                <!--[Kushina Uzumaki] card end-->
+
+
+                <!-- [Mito Uzumaki] card start-->
+                <div class="flip-card">
+                    <div class="flip-card-inner">
+                        <div class="flip-card-front">
+                               <div class="card-content">
+                            <h2 class="card-title">Mito Uzumaki</h2>
+                            </div>
+                            <img src="Images\Mito.jpeg" alt="Mito" height="300px" width="300px" class="img_card">
+                        </div>
+                        <div class="flip-card-back">
+                            <p class="card-text">[Mito Uzumaki (うずまきミト, Uzumaki Mito) was a kunoichi who originated from
+                                Uzushiogakure's Uzumaki clan.
+                                After migrating to Konohagakure, she married Hashirama Senju, the village's First
+                                Hokage.]
+                            </p>
+                            <p>Mito seemed to be a very calm and composed individual with a dignified air about her. She
+                                also had a strong
+                                sense of duty to her husband and the village as seen when she turned herself into a
+                                jinchūriki by sealing
+                                Kurama into herself in order to gain power for her husband.[2] During the time when
+                                Kushina discovered
+                                that she was to be made a jinchūriki, Mito comforted her, and told her about how to cope
+                                with being a
+                                jinchūriki sharing how she usually climbed the stairs of her residence in order to see
+                                her husband's
+                                face on the Hokage Rock. Mito was also described as gentle and reassuring</p>
+                        </div>
+                    </div>
+                </div>
+                <!--[Mito Uzumaki] card end-->
+
+
                 <div class="flip-card">
                     <div class="flip-card-inner">
                         <div class="flip-card-front">
