diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
index 08d1a15..29d1947 100644
--- a/.github/workflows/eslint.yml
+++ b/.github/workflows/eslint.yml
@@ -42,4 +42,4 @@ jobs:
         run: npm install
 
       - name: Run ESLint
-        run: npm run lint
\ No newline at end of file
+        run: npm run lint
diff --git a/package.json b/package.json
index c8d5e08..3a0bc17 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@vitejs/plugin-react": "^4.2.1",
+    "pnpm": "^9.12.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.2",
diff --git a/src/App.jsx b/src/App.jsx
index e23c6c5..6b1a51d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,8 @@
 import { Routes, Route } from "react-router-dom";
 
 import { Home, Error, Event, Faq, Team } from "./Pages";
+import AboutNits from "./Components/About/NitsHacks/NitsHacks";
+import AboutTech from "./Components/About/Tecno/Tecno";
 
 const App = () => {
   return (
@@ -10,6 +12,8 @@ const App = () => {
       <Route path="/faq" element={<Faq />} />
       <Route path="/team" element={<Team />} />
       <Route path="*" element={<Error />} />
+      <Route path="/AboutNits" element={<AboutNits />} />
+      <Route path="/AboutTech" element={<AboutTech />} />
     </Routes>
   );
 };
diff --git a/src/Components/About/NitsHacks/NitsHacks.jsx b/src/Components/About/NitsHacks/NitsHacks.jsx
index df3011a..1cdaf98 100644
--- a/src/Components/About/NitsHacks/NitsHacks.jsx
+++ b/src/Components/About/NitsHacks/NitsHacks.jsx
@@ -1,10 +1,47 @@
 import styles from "./NitsHacks.module.scss";
-
 const NitsHacks = () => {
   return (
-    <div className={styles.NitsHacks}>
-      <h1 className={styles.heading}>About NitsHacks</h1>
-      <div className={styles.aboutDesc}>Write here</div>
+    <div className={styles.nitsParent}>
+      <div className={styles.NitsHacks}>
+        <h1 className={styles.heading}>ABOUT NITS HACKS</h1>
+        <div className={styles.line}>
+          <hr className={styles.smallest} />
+          <hr className={styles.small} />
+          <hr className={styles.large} />
+          <hr className={styles.largest} />
+        </div>
+        <div className={styles.main}>
+          <p className={styles.p}>
+            NITS HACKS is a distinguished hackathon hosted by NIT Silchar, recognized as
+            one of the top events in northeastern India. This dynamic platform brings
+            together tech enthusiasts, encouraging collaboration and highlighting their
+            problem-solving expertise. Beyond just a competition, NITS HACKS focuses on
+            cultivating essential soft skills for newcomers while offering valuable
+            technical learning experiences for aspiring students. Participants tackle
+            real-world challenges, guiding them in designing and developing innovative
+            technology projects from scratch. The event not only celebrates innovation.
+            but also helps shape the future generation of tech leaders.
+          </p>
+          <div className={styles.footer}>
+            <div className={styles.element}>
+              <div className={styles.footer1}>
+                <hr className={styles.line1} />
+                <hr className={styles.line2} />
+              </div>
+              <div className={styles.brochure}>
+                <a className={styles.btn} href="/download">
+                  <img
+                    src="https://media.istockphoto.com/id/844294300/vector/download-icon-isolated-vector.jpg?s=612x612&w=0&k=20&c=VCmvy8uEoTQnt9W0kZzjEBplN_opDkGKF_eQTLfkivs="
+                    className={styles.icon}
+                    alt="img"
+                  />
+                  BROCHURE
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/src/Components/About/NitsHacks/NitsHacks.module.scss b/src/Components/About/NitsHacks/NitsHacks.module.scss
index bb3e84d..3c39cfd 100644
--- a/src/Components/About/NitsHacks/NitsHacks.module.scss
+++ b/src/Components/About/NitsHacks/NitsHacks.module.scss
@@ -1,8 +1,168 @@
 .NitsHacks {
   .heading {
-    font-size: 1.5rem;
+    width: 652px;
+    height: 65px;
+    size: 64px;
+    background-color: black;
+    color: var(--gdsc-yellow-1-100);
+    line-height: 89.13px;
+    font-family: --gdsc-font-1;
+    left: 9px;
+    font-weight: 400;
+    font-style: Star Jedi;
   }
-  .aboutDesc {
-    font-size: 0.8rem;
+  .line {
+    display: flex;
+    flex-direction: row;
+    margin-top: 5px;
+  }
+  hr.smallest {
+    height: 3px;
+    width: 9px;
+    border-radius: 3px;
+    background-color: white;
+  }
+  hr.small {
+    height: 3px;
+    width: 15px;
+    border-radius: 3px;
+    background-color: white;
+  }
+  hr.large {
+    height: 3px;
+    width: 29px;
+    border-radius: 3px;
+    background-color: white;
+  }
+  hr.largest {
+    height: 3px;
+    width: 1425px;
+    border-radius: 3px;
+    background-color: white;
+  }
+
+  .p {
+    display: flex;
+    width: 100%;
+    background-color: black;
+    height: 450px;
+    font-size: 20px;
+    align-items: center;
+    justify-content: center;
+    font-weight: 400;
+    line-height: 1.8;
+    font-family: Outfit;
+  }
+  .icon {
+    height: 30px;
+    width: 20px;
+    background-color: white;
+    margin-right: 10px;
+  }
+
+  .main {
+    border-top: 3px solid grey;
+    border-left: 3px solid grey;
+    border-right: 3px solid grey;
+    border-radius: 7px;
+    margin-top: 44px;
+    width: 100%;
+  }
+  .footer {
+    height: 150px;
+    width: 100%;
+  }
+  .brochure {
+    display: flex;
+
+    height: 50px;
+    width: 400px;
+    align-items: center;
+    padding-top: 10px;
+    padding-right: 55px;
+    padding-bottom: 16px;
+    // padding-left:55px;
+    gap: 10px;
+    background-color: grey;
+    margin-top: 20px;
+    .btn {
+      color: #000;
+      width: 100px;
+      border-radius: 5px;
+      height: 40px;
+      width: 180px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 20px;
+      font-size: 20px;
+      font-weight: bold;
+      font-family: var(--gdsc-font-1);
+      background-color: white;
+      margin-left: 55px;
+    }
+  }
+  a {
+    text-decoration: none;
+  }
+}
+.footer1 {
+  display: flex;
+  gap: 5px;
+  margin-left: 1000px;
+  margin-top: 8px;
+  background-color: grey;
+}
+hr.line1 {
+  width: 19px;
+  height: 8px;
+  border: 2px solid red;
+  background-color: white;
+}
+hr.line2 {
+  width: 241px;
+  height: 8px;
+  border: 2px solid red;
+  background-color: white;
+}
+//}
+.element {
+  width: 100%; /* Adjust the width */
+  height: 150px; /* Adjust the height */
+  background-color: grey; /* Adjust the background color */
+  clip-path: polygon(0% 0%, 100% 0%, 100% 185%, 80% 70%, 45% 70%, 40% 100%, 0% 100%);
+}
+
+@media screen and (max-width: 600px) {
+  .heading {
+    padding-left: 50px;
+    font-size: 30px;
+  }
+
+  .p {
+    font-size: 2px;
+    color: white;
+    overflow-y: scroll;
+    left: 0px;
+    margin-left: px;
+    margin-right: 5px;
+    flex-wrap: wrap;
+  }
+
+  hr.line1 {
+    width: 6px;
+    height: 3px;
+    border: 2px solid red;
+    background-color: white;
+  }
+  hr.lin2 {
+    width: 77px;
+    height: 3px;
+    border: 2px solid red;
+    background-color: white;
+  }
+  .brochure {
+    justify-content: flex-start;
+    margin-left: 2rem;
   }
 }
diff --git a/src/Components/About/Tecno/Tecno.jsx b/src/Components/About/Tecno/Tecno.jsx
index 533b3ee..9a7a4e1 100644
--- a/src/Components/About/Tecno/Tecno.jsx
+++ b/src/Components/About/Tecno/Tecno.jsx
@@ -2,8 +2,38 @@ import styles from "./Tecno.module.scss";
 const Tecno = () => {
   return (
     <div className={styles.Tecno}>
-      <h1 className={styles.heading}>About Tecnoesis</h1>
-      <div className={styles.TecnoDesc}>Write about tecnoesis</div>
+      <h1 className={styles.heading}>ABOUT TECHNOESIS</h1>
+      <div className={styles.line}>
+        <hr className={styles.smallest} />
+        <hr className={styles.small} />
+        <hr className={styles.large} />
+        <hr className={styles.largest} />
+      </div>
+      <div className={styles.main}>
+        <p className={styles.p}>
+          TECNOESIS is the annual techno-managerial event of NIT Silchar, promising all
+          tech geeks the ideal niche of fascinating events, workshops, competitions and
+          interactions worth a lifetime. This mega event has left its mark as of the most
+          prominent techfests across the country. The cauldron of enthusiasm and knowledge
+          attracts various students, presenting the chance to let their minds run wild
+          with ideads, fostering the inventors of the future.
+        </p>
+
+        <div className={styles.footer}>
+          <div className={styles.element}>
+            <div className={styles.footer1}>
+              <hr className={styles.line1} />
+              <hr className={styles.line2} />
+            </div>
+
+            <div className={styles.brochure}>
+              <a className={styles.btn} href="https://tecnoesis.co.in/">
+                Visit Technoesis
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/src/Components/About/Tecno/Tecno.module.scss b/src/Components/About/Tecno/Tecno.module.scss
index 1b40aaa..401d467 100644
--- a/src/Components/About/Tecno/Tecno.module.scss
+++ b/src/Components/About/Tecno/Tecno.module.scss
@@ -1,8 +1,161 @@
 .Tecno {
   .heading {
-    font-size: 1.5rem;
+    width: 100%;
+    height: 50px;
+    margin-left: 950px;
+    margin-top: 5px;
+    font-weight: 800;
+    size: 642px;
+    color: #f2c300;
   }
-  .TecnoDesc {
-    font-size: 1rem;
+  .line {
+    display: flex;
+    flex-direction: row;
+  }
+  hr.smallest {
+    width: 9px;
+    height: 3px;
+    top: 1112px;
+    border-radius: 3px;
+    color: white;
+  }
+  hr.small {
+    width: 15px;
+    height: 3px;
+    top: 1112px;
+    left: 12px;
+    border-radius: 3px;
+    color: white;
+  }
+  hr.large {
+    width: 29px;
+    height: 3pxx;
+    top: 1112px;
+    left: 30px;
+    border-radius: 3px;
+    color: white;
+  }
+  hr.largest {
+    width: 1425px;
+    height: 3px;
+    top: 1112px;
+    left: 62px;
+    color: white;
+  }
+  .main {
+    border-top: 3px solid grey;
+    border-left: 3px solid grey;
+    border-right: 3px solid grey;
+    border-radius: 7px;
+    margin-top: 44px;
+    width: 100%;
+  }
+
+  .p {
+    display: flex;
+    width: 100%;
+    background-color: black;
+    height: 450px;
+    font-size: 20px;
+    align-items: center;
+    justify-content: center;
+    font-weight: 400;
+    line-height: 1.8;
+    font-family: Outfit;
+    padding-left: 5px;
+    padding-right: 10px;
+  }
+  .footer {
+    display: flex;
+    flex-direction: row;
+    margin-top: 15px;
+  }
+
+  .footer1 {
+    display: flex;
+    margin-top: 20px;
+    gap: 5px;
+    background-color: grey;
+  }
+  hr.line1 {
+    width: 241px;
+    height: 5px;
+    margin-left: 31px;
+    border-radius: 2.45px;
+    border: 2.45px solid #209bf4;
+    background-color: white;
+  }
+  hr.line2 {
+    width: 17px;
+    height: 5px;
+
+    border-radius: 2.45px;
+    border: 2.45px solid #209bf4;
+    background-color: white;
+  }
+  .brochure {
+    margin-left: 800px;
+    margin-top: 20px;
+    display: flex;
+    height: 50px;
+    width: 700px;
+    align-items: center;
+    padding-top: 16px;
+    padding-right: 55px;
+    padding-bottom: 16px;
+    padding-left: 55px;
+    background-color: grey;
+    .btn {
+      background-color: #ffffff;
+      color: #000;
+      width: 100px;
+      border-radius: 5px;
+      height: 40px;
+      width: 200px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 20px;
+      font-size: 20px;
+      font-weight: bold;
+      font-family: var(--gdsc-font-1);
+
+      margin-left: 150px;
+    }
+  }
+  a {
+    text-decoration: none;
+  }
+}
+.element {
+  width: 100%; /* Adjust the width */
+  margin-bottom: 5px;
+  height: 150px; /* Adjust the height */
+  background-color: grey; /* Adjust the background color */
+  clip-path: polygon(0% 0%, 100% 0%, 100% 500%, 40% 70%, 20% 70%, 15% 100%, 0% 100%);
+}
+
+@media screen and (max-width: 600px) {
+  .heading {
+    margin-right: 20px;
+    font-size: 5px;
+  }
+}
+@media screen and (max-width: 600px) {
+  hr.line1 {
+    width: 150px;
+    height: 5px;
+    margin-left: 20px;
+    border-radius: 2.45px;
+    border: 2.45px solid #209bf4;
+    background-color: white;
+  }
+  hr.line2 {
+    width: 10px;
+    height: 5px;
+
+    border-radius: 2.45px;
+    border: 2.45px solid #209bf4;
+    background-color: white;
   }
 }
diff --git a/src/index.scss b/src/index.scss
index e84da3e..29419cc 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -38,5 +38,4 @@
   font-family: var(--gdsc-font-1);
   background-color: #000000;
   color: #ffffff;
-  overflow: hidden;
 }