diff --git a/.gitpod.yml b/.gitpod.yml
index 0814e55..a151bee 100644
--- a/.gitpod.yml
+++ b/.gitpod.yml
@@ -5,4 +5,9 @@
 # Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
 
 tasks:
-  - init: npm install
+  - name: Install npm dependencies
+    init: npm install
+  - name: Serve
+    command:
+      python -m http.server 5000
+      
diff --git a/README.md b/README.md
index 70bdb35..6275e57 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,8 @@
 # rbjks.github.io
+<a href="https://gitpod.io/#https://github.com/rbjks/rbjks.github.io" target="_blank">
+  <img src="https://gitpod.io/button/open-in-gitpod.svg" alt="Open RBJKS in Gitpod">
+</a>
+
 
 Access this website at https://rbjks.github.io/index.html
 
diff --git a/activities.html b/activities.html
index 579d35a..4dcf012 100644
--- a/activities.html
+++ b/activities.html
@@ -157,6 +157,6 @@ <h3>Activities</h3>
       </footer>
     </div>
   </body>
-  <script src="script/main.js"></script>
-  <script src="script/gallery.js"></script>
+  <script src="assets/script/main.js"></script>
+  <script src="assets/script/gallery.js"></script>
 </html>
diff --git a/assets/css/contact.css b/assets/css/contact.css
index a109abd..f26bb08 100644
--- a/assets/css/contact.css
+++ b/assets/css/contact.css
@@ -1,455 +1,49 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-family: 'Poppins', sans-serif;
+body{
+    background-color: #edc9af;
 }
-
-#navbar {
-  width: 100%;
-  background-color: #edc9af;
-}
-
-nav {
-  width: 100%;
-  background-color: transparent;
-  background-color: #22b9a8;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-nav ul {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 4rem;
-}
-
-nav .logo {
-  padding: 0.5rem 2rem;
-  width: 108px;
-  height: auto;
-  visibility: visible;
-}
-
-nav ul li {
-  list-style: none;
-  text-decoration: none;
-  transition: 0.25s all;
-  display: inline-block;
-  position: relative;
-}
-
-nav ul li a {
-  padding: 1.35rem 2rem;
-  text-decoration: none;
-  color: #fff;
-}
-
-nav ul li::after {
-  content: '';
-  border-radius: 20px;
-  position: absolute;
-  width: 100%;
-  transform: scaleX(0);
-  height: 4px;
-  bottom: -9px;
-  left: 0;
-  background-color: #fff;
-  transition: transform 0.25s ease-out;
-}
-
-nav ul li:hover::after {
-  transform: scaleX(0.7);
-}
-
-nav ul li:hover {
-  transform: scale(1.1);
-}
-
-nav ul li a:active {
-  color: #fff;
-}
-
-body {
-  /* background-color: #edc9af; */
-}
-
-section {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 50px;
-  /* min-height: 100vh; */
-  /* background-color: #edc9af; */
-}
-
-.container {
-  position: relative;
-  min-width: 1100px;
-  min-height: 550px;
-  display: flex;
-  z-index: 1000;
-  display: flex;
-  flex-direction: row;
-  background-color: #edc9af;
-  
-}
-
-.mainbody {
-  background-color: #edc9af;
-  overflow-x: hidden;
-}
-
-.container .contactInfo {
-  position: relative;
-  top: 40px;
-  width: 40%;
-  height: calc(100% - 80px);
-  background: #22b9a8;
-  z-index: 1;
-  padding: 40px;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  justify-content: space-between;
-  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
-  border-radius: 22px;
-}
-
-.container .contactInfo h2 {
-  color: #000;
-  font-size: 24px;
-  font-weight: 700;
-}
-
-.container .contactInfo ul.info {
-  position: relative;
-  margin: 20px 0;
-}
-
-.container .contactInfo ul.info li {
-  position: relative;
-  list-style: none;
-  display: flex;
-  margin: 20px 0;
-  cursor: pointer;
-  align-items: flex-start;
-}
-
-.container .contactInfo ul.info li span:nth-child(1) {
-  width: 30px;
-  min-width: 30px;
-}
-
-/* for gmail */
-
-.container .contactInfo ul.info li span a {
-  color: #000;
-  text-decoration: none;
-  width: 30px;
-  min-width: 30px;
-}
-
-.container .contactInfo ul.info li span:nth-child(1) img {
-  max-width: 100%;
-  filter: invert(0);
-}
-
-.container .contactInfo ul.info li span:nth-child(2) {
-  color: #000;
-  margin-left: 10px;
-  font-weight: 300;
-}
-
-.container .contactInfo ul.sci {
-  position: relative;
-  display: flex;
-}
-
-.container .contactInfo ul.sci li {
-  list-style: none;
-  margin-right: 15px;
-}
-
-.container .contactInfo ul.sci li a {
-  text-decoration: none;
-}
-
-.container .contactInfo ul.sci li a img {
-  filter: invert(0);
-}
-
-.container .contactForm {
-  position: relative;
-  padding: 70px 50px;
-  /* padding-left: 250px; */
-  margin-left: 50px;
-  width: 90%;
-  height: 100%;
-  background: #fff;
-  box-shadow: 0 50px 50px rgba(0, 0, 0, 0.25);
-  border-radius: 22px;
-}
-
-.container .contactForm h2 {
-  color: #22b9a8;
-  font-size: 24px;
-  font-weight: 500;
-}
-
-.container .contactForm .formBox {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  padding-top: 30px;
-}
-
-.container .contactForm .formBox .inputBox {
-  position: relative;
-  margin-bottom: 35px;
-}
-
-.container .contactForm .formBox .inputBox.w50 {
-  width: 47%;
-}
-
-.container .contactForm .formBox .inputBox.w100 {
-  width: 100%;
-}
-
-.container .contactForm .formBox .inputBox input,
-.container .contactForm .formBox .inputBox textarea {
-  width: 100%;
-  resize: none;
-  padding: 5px 0;
-  font-size: 18px;
-  font-weight: 300;
-  color: #333;
-  border: none;
-  outline: none;
-  border-bottom: 1px solid #777;
-}
-
-.container .contactForm .formBox .inputBox textarea {
-  height: 120px;
-}
-
-.container .contactForm .formBox .inputBox span {
-  position: absolute;
-  left: 0;
-  padding: 5px 0;
-  pointer-events: none;
-  font-size: 18px;
-  font-weight: 300;
-  transition: 0.3s;
-}
-
-.container .contactForm .formBox .inputBox input:focus ~ span,
-.container .contactForm .formBox .inputBox input:valid ~ span,
-.container .contactForm .formBox .inputBox textarea:focus ~ span,
-.container .contactForm .formBox .inputBox textarea:valid ~ span {
-  transform: translateY(-20px);
-  font-size: 12px;
-  font-weight: 400;
-  letter-spacing: 1px;
-  color: #22b9a8;
-  font-weight: 500;
-}
-
-/* Css for the submit button */
-
-.container .contactForm .formBox .inputBox input[type='submit'] {
-  position: relative;
-  cursor: pointer;
-  background: #22b9a8;
-  border-radius: 20px;
-  color: #000;
-  border: none;
-  max-width: 150px;
-  padding: 12px;
+.contact{
+    margin: 2rem 10%;
 }
+.contact-parent{
+    padding-top: 2rem;
+    display: flex;
+    /* flex-wrap: wrap; */
+    gap: 15px;
 
-.container .contactForm .formBox .inputBox input[type='submit']:hover {
-  background: #0d9480;
 }
-
-/* make the form responsive */
-
-@media (max-width: 1200px) {
-  .container {
-    width: 90%;
-    min-width: auto;
-    margin: 20px;
-    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
-  }
-  .container .contactInfo {
-    top: 0;
-    height: 550px;
-    position: relative;
-    box-shadow: none;
-    border-radius: 0px;
-  }
-  .container .contactForm {
-    position: relative;
-    width: calc(100% - 350px);
-    padding-left: 0;
-    margin-left: 0;
-    padding: 40px;
-    height: 550px;
-    box-shadow: none;
-    border-radius: 0px;
-  }
+.contact-parent div{
+    flex: 1; /* Each child takes up equal space */
+    margin: 10px; /* Adds space between the divs */
+    text-align: center;
+    border: 2px dashed darkgrey;
+    padding: 10px;
 }
-
-@media (max-width: 991px) {
-  section {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    /* min-height: 100vh; */
-    /* background: #edc9af; */
-  }
-  section::before {
-    display: none;
-  }
-  .container {
-    width: 100%;
-    display: flex;
-    flex-direction: column-reverse;
-  }
-  .container .contactForm {
-    width: 100%;
-    height: auto;
-    border-radius: 0px;
-  }
-  .container .contactInfo {
-    width: 100%;
-    height: auto;
-    flex-direction: row;
-    border-radius: 0px;
-  }
-  .container .contactInfo ul.sci {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
+.contact-parent div h4{
+    text-decoration: wavy underline #222;
+    margin-bottom: 15px;
 }
-
-@media (max-width: 600px) {
-  .container .contactForm {
-    padding: 25px;
-  }
-  .container .contactInfo {
-    padding: 25px;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-  .container .contactInfo ul.sci {
-    margin-top: 40px;
-  }
-  .container .contactForm .formBox .inputBox.w50 {
-    width: 100%;
-  }
+.contact-parent div p{
+    margin-bottom: 10px;
 }
-
-
-.body {
-  background-color: #edc9af;
-  overflow-x: hidden;
+.contact-parent div em{
+    font-weight: bold;
 }
-
-#navbar ul.mobileNav {
-  display: none;
+#contact-link-para{
+    margin: 20px 5px;
 }
-
-@media (max-width: 768px) {
-  footer {
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    word-break: break-all;
-  }
-
-  .footer .flex-col {
-    align-items: center;
-    margin-bottom: 1em;
-  }
-
-  .about--address {
-    width: 100%;
-    text-align: center;
-  }
-
-  nav a.icon {
-    display: block;
-    margin-right: 15px;
-    color: white;
-  }
-
-  nav ul {
-    display: none;
-  }
-
-  #navbar ul.mobileNav.mobileVisible {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background-color: #22b9a8;
-    height: 30vh;
-    justify-content: space-evenly;
-  }
-
-  #navbar ul.mobileNav.mobileVisible li {
-    list-style-type: none;
-  }
-
-  #navbar ul.mobileNav.mobileVisible li a {
+#contact-link{
+    padding: 10px 10px;
+    background-color: #22B9A8;
+    color: whitesmoke;
+    border-radius: 10px;
     text-decoration: none;
-    color: white;
-  }
 }
 
-
-@media screen and (max-width: 480px) {
-  
-  .container{
-    display: flex;
-    width: 100%;
-    background-color: white;
-  }
-  
-  nav a.icon {
-    display: block;
-    margin-right: 15px;
-    color: white;
-  }
-
-  nav ul {
-    display: none;
-  }
-
-  #navbar ul.mobileNav.mobileVisible {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background-color: #22b9a8;
-    height: 30vh;
-    justify-content: space-evenly;
-  }
-
-  #navbar ul.mobileNav.mobileVisible li {
-    list-style-type: none;
-  }
-
-  #navbar ul.mobileNav.mobileVisible li a {
-    text-decoration: none;
-    color: white;
-  }
-  .social-media-icons {
-    width: 100%;
-  }
-}
+@media (max-width: 768px) {
+    .contact-parent div {
+      flex: 1 1 80%; /* Forces divs to stack on top of each other */
+    }
+    .contact-parent{
+        flex-wrap: wrap;
+    }
+  }
\ No newline at end of file
diff --git a/assets/images/images.json b/assets/images/images.json
new file mode 100644
index 0000000..6f50d58
--- /dev/null
+++ b/assets/images/images.json
@@ -0,0 +1,24 @@
+{
+  "images": [
+    {
+      "url": "assets/images/Activities/3 July.jpg",
+      "caption": "3 July 2023 - Constructed a toilet for a family in GP Bhadwar"
+    },
+    {
+      "url": "assets/images/Activities/8 Aug.jpg",
+      "caption": "8 August 2023 - Delivered a sports kit in GP Minjgram"
+    },
+    {
+      "url": "assets/images/Activities/14 Dec.jpg",
+      "caption": "14 Dec 2023"
+    },
+    {
+      "url": "assets/images/Activities/18 May.jpg",
+      "caption": "18 May 2023"
+    },
+    {
+      "url": "assets/images/Activities/21 Aug.jpg",
+      "caption": "21 August 2023"
+    }
+  ]
+}
diff --git a/script/gallery.js b/assets/script/gallery.js
similarity index 96%
rename from script/gallery.js
rename to assets/script/gallery.js
index febb381..db78bb8 100644
--- a/script/gallery.js
+++ b/assets/script/gallery.js
@@ -4,7 +4,7 @@ document.addEventListener('DOMContentLoaded', function () {
     const gallery = document.getElementById('gallery');
   
     // Fetch JSON data
-    fetch('images.json')
+    fetch('assets/images.json')
       .then((response) => response.json())
       .then((data) => {
         // Iterate through each image in the JSON
diff --git a/script/main.js b/assets/script/main.js
similarity index 100%
rename from script/main.js
rename to assets/script/main.js
diff --git a/contact.html b/contact.html
index 535dcdf..037aef0 100644
--- a/contact.html
+++ b/contact.html
@@ -4,11 +4,9 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>RBJKS::Contact</title>
+    <title>RBJKS::Activities</title>
     <link rel="stylesheet" type="text/css" href="assets/css/style.css" />
     <link rel="stylesheet" type="text/css" href="assets/css/contact.css" />
-    <link rel="stylesheet" type="text/css" href="assets/css/gallery.css" />
-    
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
@@ -20,13 +18,14 @@
     <div id="navbar">
       <nav>
         <a href="/">
-        <img
-          class="logo"
-          alt="RBJKS LOGO"
-          src="./assets/images/faviconn.png"
-          loading="lazy"
-        />
+          <img
+            class="logo"
+            alt="RBJKS LOGO"
+            src="./assets/images/faviconn.png"
+            loading="lazy"
+          />
         </a>
+
         <ul>
           <!-- <li></li>  -->
           <li><a class="translate" href="/" aria-label="होम">Home</a></li>
@@ -93,40 +92,43 @@
         </li>
       </ul>
     </div>
-    <div class="mainbody">
-      <section>
-        <div class="container">
-          
-          <div class="contactForm">
-            <h2>Send a Message</h2>
-            <div class="formBox">
-              <div class="inputBox w50">
-                <input type="text" name="" required />
-                <span>First Name</span>
-              </div>
-              <div class="inputBox w50">
-                <input type="text" required />
-                <span>Last Name</span>
-              </div>
-              <div class="inputBox w50">
-                <input type="email" required />
-                <span>Email Address </span>
-              </div>
-              <div class="inputBox w50">
-                <input type="text" required />
-                <span>Mobile Number</span>
-              </div>
-              <div class="inputBox w100">
-                <textarea required></textarea>
-                <span>Write your message here...</span>
-              </div>
-              <div class="inputBox w100">
-                <input type="submit" value="Send" />
-              </div>
-            </div>
-          </div>
+
+    <div class="contact">
+      <h3 class="translate" aria-label="संपर्क">Contact Us</h3>
+      <div class="contact-parent">
+        <div class="contact-left">
+          <h4 class="translate" aria-label = "लाभार्थियों के लिए">For Beneficiaries</h4>
+          <p class="translate" aria-label = "कृपया दिए गए फ़ोन या पते पर हमसे संपर्क करें।">Please reach out to us on the given Phone or Address.</p>
+          <p>
+            <em class="translate" aria-label = "पता:">Address: </em>
+            <span class="translate" aria-label = "डाकघर जसूर, तहसील - नूरपुर, जिला - कांगड़ा, हिमाचल प्रदेश, 176201">PO Jassur, Tehsil - Nurpur, District - Kangra, HP, 176201.</span>
+          </p>
+          <p> 
+            <em  class="translate" aria-label = "फ़ोन:">Phone: </em> 
+            <span class="translate" aria-label = "+९१ - ९४१८१५१०७४ / ८६७५३००००९">+91 - 9418151074 / 8675300009</span> 
+          </p>
+          <p> 
+            <em class="translate" aria-label = "ईमेल:">Email: </em> 
+            <span>RBJKS.info@gmail.com</span><br/>
+            <span class="translate" aria-label = "(कृपया ध्यान दें कि हम हमेशा ईमेल पर समय पर जवाब नहीं दे सकते।)">(Please note that we can't always respond in time over email.)</span>
+          </p>
         </div>
-      </section>
+        <div class="contact-right">
+          <h4 class="translate" aria-label = "दाताओं के लिए">For Donors</h4>
+          <p class="translate" aria-label = "कृपया नीचे लिंक किया गया Google फॉर्म भरें।">
+            Please fill out the below linked Google Form. 
+          </p>
+          <p id="contact-link-para" >
+            <a
+              href="https://docs.google.com/forms/d/1eY9o2jiLI5xOAvG7M4RFDCPbn3879t4l8uwZ3T5N3Hs"
+              target="_blank" class="translate" id="contact-link" aria-label = "गूगल फॉर्म लिंक"
+              >Link to the Google Form</a>
+          </p>
+          <p class="translate" aria-label = "जरूरत पड़ने पर आप हमसे फोन पर संपर्क कर सकते हैं।">
+            You can also contact us by phone, if needed.
+          </p>
+        </div>
+      </div>
     </div>
 
     <div class="footer">
@@ -154,18 +156,22 @@ <h2>Send a Message</h2>
           <p>Contact Us</p>
           <div class="icons">
             <a href="https://twitter.com/a_bsays" target="_blank"
-              ><img src="./assets/images/twitter.svg" alt="twitter"
+              ><img
+                src="./assets/images/twitter.svg"
+                alt="twitter"
+                loading="lazy"
             /></a>
-            <!-- <a href="#" target="_blank"><img src="./assets/images/instagram.svg" alt="instagram"></a> -->
+            <!-- <a href="#" target="_blank"><img src="./assets/images/instagram.svg" alt="instagram" loading="lazy"></a> -->
             <a href="https://www.facebook.com/akil.bakhshi/" target="_blank"
-              ><img src="./assets/images/facebook.svg" alt="facebook"
+              ><img
+                src="./assets/images/facebook.svg"
+                alt="facebook"
+                loading="lazy"
             /></a>
           </div>
         </section>
       </footer>
     </div>
-
-    <script src="script/main.js"></script>
-    
   </body>
+  <script src="assets/script/main.js"></script>
 </html>
diff --git a/index.html b/index.html
index 399589f..cdd26c4 100644
--- a/index.html
+++ b/index.html
@@ -150,6 +150,5 @@ <h1 class="title translate" aria-label="रणजीत बख्शी जन 
       </footer>
     </div>
   </body>
-  <script src="script/main.js"></script>
-  <script src="script/gallery.js"></script>
+  <script src="assets/script/main.js"></script>
 </html>