diff --git a/contact.html b/contact.html
new file mode 100644
index 00000000..7ff9e904
--- /dev/null
+++ b/contact.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles/contact.css" />
+    <title>Contact Page</title>
+  </head>
+  <body>
+    <div class="container mt-5 mb-5 d-flex justify-content-center">
+      <div class="card px-1 py-4">
+        <div class="card-body">
+          <h6 class="card-title mb-3">Get in Touch with us</h6>
+          <!-- <div class="d-flex flex-row"> <label class="radio mr-1"> <input type="radio" name="add" value="anz" checked> <span> <i class="fa fa-user"></i> Anz CMK </span> </label> <label class="radio"> <input type="radio" name="add" value="add"> <span> <i class="fa fa-plus-circle"></i> Add </span> </label> </div> -->
+          <!-- <h6 class="information mt-4">Please provide following information</h6> -->
+          <div class="row">
+            <div class="col-sm-12">
+              <div class="form-group">
+                <!-- <label for="name">Name</label> -->
+                <input class="form-control" type="text" placeholder="Name" />
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-12">
+              <div class="form-group">
+                <div class="input-group">
+                  <input
+                    class="form-control"
+                    type="text"
+                    placeholder="Mobile"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-12">
+              <div class="form-group">
+                <div class="input-group">
+                  <input
+                    class="form-control"
+                    type="text"
+                    placeholder="Email ID"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row" id="description">
+            <div class="col-sm-12">
+              <div class="form-group">
+                <div class="input-group">
+                  <textarea
+                    class="form-control"
+                    placeholder="description"
+                  ></textarea>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="d-flex flex-column text-center px-5 mt-3 mb-3">
+            <small class="agree-text"
+              >By Booking this appointment you agree to the</small
+            >
+            <a href="#" class="terms">Terms & Conditions</a>
+          </div>
+          <button class="btn btn-primary btn-block confirm-button">
+            Confirm
+          </button>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/index.html b/index.html
index b667b341..989d69b1 100644
--- a/index.html
+++ b/index.html
@@ -82,7 +82,7 @@
   .navbar-light .navbar-toggler-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 }
-</style>
+</style>nav
   </head>
 
   <body>
@@ -96,7 +96,7 @@ <h2>Loading<span class="dots"></span></h2>
     <a id="top"></a>  <!--added for issue 260 -->
     <!-- ================================ Header Section Start Here ================================ -->
     <header>
-      <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
+      <nav class="navbar navbar-expand-md fixed-top navbar-light bg-light">
         <div class="container">
           <a class="navbar-brand" href="#top">Code<span>Clip</span></a>
           <button
@@ -122,10 +122,10 @@ <h2>Loading<span class="dots"></span></h2>
                             <a class="nav-link" href="#leaderboardSection">Leaderboard</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link" href="#aboutSection">About</a>
+                            <a class="nav-link" hrefd="#aboutSection">About</a>
                         </li>
                         <li class="nav-item">
-                    <a class="nav-link" href="#contactFooter">Contact</a>
+                    <a class="nav-link" href="/contact.html">Contact</a>
                   </li>
                 </ul>
           </div>
@@ -143,7 +143,7 @@ <h2>Loading<span class="dots"></span></h2>
             <div  data-aos="fade-right" data-aos-duration="650" class="gssocContainer shinning-effect">
               <img 
                 src="assets/images/hero-section/gssoc-log.png"
-                class="img-fluid gssoc-logo"
+                class="img-fluid gssoc-logo pt-5"
                 alt="gssoc logo"
               />
               <p>GSSOC 2025</p>
diff --git a/styles/contact.css b/styles/contact.css
new file mode 100644
index 00000000..a05dbf5b
--- /dev/null
+++ b/styles/contact.css
@@ -0,0 +1,71 @@
+body{
+    background-color:#ffffff
+}
+
+.card{
+    width:400px;
+    background-color:#fff;
+    border:none;border-radius: 12px
+}
+
+label.radio{
+    cursor: pointer;
+    width: 100%}
+    
+label.radio input{
+    position: absolute;
+    top: 0;
+    left: 0;
+    visibility: hidden;
+    pointer-events: none}
+    
+label.radio span{
+    padding: 7px 14px;
+    border: 2px solid #eee;
+    display: inline-block;
+    color: #039be5;
+    border-radius: 10px;
+    width: 100%;
+    height: 48px;
+    line-height: 27px
+}
+
+label.radio input:checked+span{
+    border-color: #039BE5;
+    background-color: #81D4FA;
+    color: #fff;
+    border-radius: 9px;
+    height: 48px;
+    line-height: 27px
+}
+
+.form-control{
+    margin-top: 10px;
+    height: 48px;
+    border: 2px solid #eee;
+    border-radius: 10px}
+    
+.form-control:focus{
+    box-shadow: none;
+    border: 2px solid #039BE5
+}
+    
+.agree-text{
+    font-size: 12px
+}
+
+.terms{
+    font-size: 12px;
+    text-decoration: none;
+    color: #039BE5
+}
+
+.confirm-button{
+    height: 50px;
+    border-radius: 10px
+}
+
+#description textarea {
+  min-height: 150px; /* custom height */
+  resize: vertical;  /* optional: allow user to resize */
+}
