diff --git a/src/App.css b/src/App.css
index c6b4c91..7fd62a5 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,17 +1,50 @@
-.popup{
-    padding-top: 50px;
-    font-weight: bolder;
-    color: white;
-    text-decoration: none;
-    display: flex;
-    justify-content: center;
+.popup {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: rgba(0, 0, 0, 0.8);
+  border-radius: 5px;
+  padding: 20px;
+  z-index: 999;
+  color: white;
+  text-align: center;
+  background-color: #ea8100;
+}
+.popup:hover{
+    color: black;
 }
 
-.popup-text{
+.popup-text {
+  color: white;
+  font-size: 1.5em;
+  font-weight: bolder;
+  display: flex;
+  text-align: center;
+  justify-content: center;
+}
+
+@media (min-width: 300px) and (max-width: 500px) {
+  .popup {
+    position: fixed;
+    top: 58%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(0, 0, 0, 0.8);
+    border-radius: 5px;
+    padding: 20px;
+    z-index: 999;
+    color: white;
+    text-align: center;
+    background-color: #ea8100;
+  }
+
+  .popup-text {
     color: white;
-    font-size: 22x;
+    font-size: 1.3em;
     font-weight: bolder;
     display: flex;
+    text-align: center;
     justify-content: center;
-
-}
\ No newline at end of file
+  }
+}
diff --git a/src/App.js b/src/App.js
index 6c5dd2b..df170ab 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,7 @@
 import "./App.css";
 import Home from "./components/Home/Home";
 import Event from "./components/Events/Event";
-import { BrowserRouter, Routes, Route} from "react-router-dom";
+import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
 import Join from "./components/Join/join";
 import Modal from './components/Modal/Modal';
 import React,{useState,useEffect} from "react";
@@ -28,13 +28,12 @@ function App() {
           <Route path="/events" element={<Event />} />
           <Route path="/join" element={<Join />} />
         </Routes>
+        <Modal isOpen={isModalOpen} onClose={closeModal}>
+            <Link to="/join" onClick={closeModal} style={{"textDecoration": "none"}} ><h2 className="popup">JOIN US NOW</h2> </Link>
+            <p className="popup-text">Be The Part Of A Amazing Community</p>
+          </Modal>
       </BrowserRouter>
 
-      <Modal isOpen={isModalOpen} onClose={closeModal}>
-        <h2 className="popup">JOIN US NOW</h2>
-        <p className="popup-text">Be The Part Of A Amazing Community</p>
-      </Modal>
-
     </div>
   );
 }
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
index 70c03e1..f7281f0 100644
--- a/src/components/Header/Header.css
+++ b/src/components/Header/Header.css
@@ -104,6 +104,7 @@
   .header1 {
     display: flex;
     gap: 0.5em;
+    padding-top: 0.75em;
   }
   .links1 {
     font-size: 0.9em;
@@ -112,6 +113,12 @@
     width: 100%;
     gap: 3em;
   }
+  .joinS {
+    font-size: 0.8rem;
+    font-weight: bold;
+    width: 6em;
+    padding-top: 0.2em;
+  }
   .header2 > a {
     background-color: transparent;
     backdrop-filter: blur(5px);
diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
index b156f72..3546bfa 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -53,7 +53,7 @@ body {
   text-align: center;
   line-height: 1.3em;
   font-weight: 500;
-  margin-right: 2em;
+  margin-right: 0.5em;
 }
 
 .slider-container {
@@ -183,9 +183,14 @@ body {
     height: 7em;
     font-size: 1.75em;
   }
-
+  .desc1 {
+    margin-top: 6em;
+    margin-bottom: 18em;
+    padding: 20px;
+  }
   .desc > h6 {
     height: 20em;
+    margin-right: 0.05em;
   }
   .team1 {
     padding: 1em 3em;