diff --git a/assets/icons/arrowRight.svg b/assets/icons/arrowRight.svg
new file mode 100644
index 0000000..4c3e179
--- /dev/null
+++ b/assets/icons/arrowRight.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="m561 814-43-42 168-168H160v-60h526L517 375l43-42 241 241-240 240Z"/></svg>
\ No newline at end of file
diff --git a/components/AcademicProgramsSection/AcademicPrograms.module.scss b/components/AcademicProgramsSection/AcademicPrograms.module.scss
new file mode 100644
index 0000000..a3c9227
--- /dev/null
+++ b/components/AcademicProgramsSection/AcademicPrograms.module.scss
@@ -0,0 +1,191 @@
+.academicSection {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+
+  width: 100%;
+  padding: 1.25rem;
+
+  @media (min-width: 575px) {
+    padding: 1.875rem;
+  }
+
+  @media (min-width: 768px) {
+    padding: 2.5rem;
+  }
+
+  @media (min-width: 1280px) {
+    padding-inline: 5rem;
+  }
+
+  .sectionTitle {
+    font-family: 'NewYork';
+    display: flex;
+    align-items: center;
+    letter-spacing: 0.075rem;
+    font-weight: 400;
+    font-size: clamp(1.725rem, 0.73rem + 4.36vw, 5rem);
+
+    @media (min-width: 1440px) {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 5rem;
+      line-height: 100%;
+      letter-spacing: 0.015rem;
+    }
+  }
+
+  .academicTags {
+    list-style: none;
+    display: flex;
+    margin-top: 1.8rem;
+    margin-bottom: 1.5rem;
+    margin-inline: 0;
+    padding-inline: 0;
+    font-weight: 500;
+
+    & li {
+      font-family: 'Poppins', sans-serif;
+      cursor: pointer;
+      font-size: 1.2rem;
+      & button {
+        font-family: inherit;
+        background-color: transparent;
+        outline: none;
+        border: 0;
+        margin: 0;
+        cursor: pointer;
+        color: #636363;
+      }
+      & button.highlight {
+        color: #110909;
+        text-decoration: underline;
+      }
+    }
+    & li:not(:first-child) {
+      margin-left: 1.9rem;
+    }
+
+    @media (min-width: 575px) {
+      & {
+        margin-top: 2.8rem;
+        margin-bottom: 2.2rem;
+      }
+
+      & li {
+        font-size: 1.3rem;
+      }
+      & li:not(:first-child) {
+        margin-left: 5rem;
+      }
+    }
+
+    @media (min-width: 1024px) {
+      & li {
+        font-size: 1.5rem;
+      }
+    }
+
+    @media (min-width: 1440px) {
+      & {
+        margin-top: 5.1875rem;
+        margin-bottom: 4.25rem;
+      }
+
+      & li {
+        font-style: normal;
+        font-size: 1.7rem;
+        line-height: 100%;
+        letter-spacing: 0.015em;
+      }
+
+      & li:not(:first-child) {
+        margin-left: 9.75rem;
+      }
+    }
+  }
+}
+
+.Grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+  gap: 1.5rem;
+}
+
+.card {
+  display: grid;
+  align-content: center;
+  grid-template-rows: 1fr 6.25rem;
+  grid-template-columns: 1fr;
+  align-items: center;
+  padding: 1.5rem 0.9375rem 1.125rem;
+  background: rgba(180, 185, 188, 0);
+  border: 1.5px solid #110909;
+  border-radius: 1rem;
+
+  & .cardTitle {
+    display: grid;
+    justify-content: space-between;
+    align-items: center;
+    display: grid;
+    grid-template-columns: 1fr 3.125rem;
+    gap: 0.75rem;
+    align-self: flex-start;
+
+    & h2 {
+      font-weight: 500;
+      font-size: 1.5rem;
+      font-family: 'Manrope', sans-serif;
+    }
+    & .arrowIcon {
+      font-family: 'Manrope', sans-serif;
+      margin: 0;
+      padding: 0;
+      transform: rotate(-32deg);
+
+      display: grid;
+      place-items: center;
+      width: 2.5rem;
+      height: 2.5rem;
+      margin: auto;
+      border: 1.5px solid #110909;
+      border-radius: 50%;
+      font-weight: 600;
+
+      & svg {
+        width: 1.625rem;
+        height: 1.625rem;
+      }
+    }
+  }
+
+  & .badge {
+    font-family: 'Inter', sans-serif;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 400;
+    align-self: end;
+    width: 6.375rem;
+
+    padding: 10px 14px;
+
+    border: 1.5px solid #110909;
+    border-radius: 2.81rem;
+
+    line-height: 100%;
+    letter-spacing: 0.015rem;
+    color: #110909;
+  }
+}
+
+.phdCard {
+  font-family: 'Manrope', sans-serif;
+
+  padding: 1.875rem 1.75rem 2.31rem;
+  background: rgba(180, 185, 188, 0);
+  border: 1.5px solid #110909;
+  border-radius: 1rem;
+  font-size: 1.2rem;
+  line-height: 2.5rem;
+  font-weight: 500;
+}
diff --git a/components/AcademicProgramsSection/index.tsx b/components/AcademicProgramsSection/index.tsx
new file mode 100644
index 0000000..a184759
--- /dev/null
+++ b/components/AcademicProgramsSection/index.tsx
@@ -0,0 +1,124 @@
+import { useState } from 'react';
+
+import Image from 'next/image';
+import arrowRight from '../../assets/icons/arrowRight.svg';
+import styles from './AcademicPrograms.module.scss';
+
+type CourseDataType = {
+  [k: string]: string[];
+}
+
+const courseData: CourseDataType = {
+  bachelor: [
+    'Computer Engineering',
+    'Electronics & Instrumentation',
+    'Electronics & Telecommunication',
+    'Information Technology',
+    'Mechanical Engineering',
+    'Civil Engineering',
+  ],
+  masters: [
+    'Computer Engineering with specialization in Software Engineering',
+    'Information Technology with specialization in Information Security',
+    'Electronics engineering with specialization in Digital Instrumentation',
+    'Electronics engineering with specialization in Digital Communication',
+    'Industrial Engineering & Management',
+    'Mechanical Engineering with specialization in Design & Thermal Engineering',
+  ]
+}
+
+const AcademicProgramsSection = () => {
+
+  const [filter, setFilter] = useState('bachelor');
+
+  let courseTagName = '';
+
+  switch (filter) {
+    case 'masters':
+      courseTagName = 'masters'
+      break;
+    case 'phd':
+      courseTagName = 'phd'
+      break;
+    default:
+      courseTagName = 'bachelor'
+      break;
+  }
+
+  function data(course: keyof CourseDataType) {
+    return courseData[course];
+  }
+
+  return (
+    <div className={styles.academicSection}>
+      <h1 className={styles.sectionTitle}>ACADEMIC PROGRAMS</h1>
+
+      <ul className={styles.academicTags}>
+        <li>
+          <button
+            className={filter === 'bachelor' ? `${styles.highlight}` : ''}
+            type="button"
+            onClick={() => setFilter('bachelor')}
+          >
+            Bachelor
+          </button>
+        </li>
+        <li>
+          <button
+            className={filter === 'masters' ? `${styles.highlight}` : ''}
+            type="button"
+            onClick={() => setFilter('masters')}
+          >
+            Masters
+          </button>
+        </li>
+        <li>
+          <button
+            className={filter === 'phd' ? `${styles.highlight}` : ''}
+            type="button"
+            onClick={() => setFilter('phd')}
+          >
+            PhD
+          </button>
+        </li>
+      </ul>
+
+      <div className={styles.Grid}>
+        {
+          data(filter)?.map((name: string) => {
+            return (
+              <div key={name} className={styles.card}>
+                <div className={`${styles.cardTitle}`}>
+                  <h2>{name}</h2>
+                  <span className={` ${styles.arrowIcon}`}>
+                    <Image
+                      src={arrowRight}
+                      alt="arrow right"
+                      width={30}
+                      height={30}
+                    />
+                  </span>
+                </div>
+
+                <div className={`${styles.badge}`}>{courseTagName}</div>
+              </div>
+            )
+          })
+        }
+
+        {
+          courseTagName === 'phd' && (
+            <h2 className={styles.phdCard}>
+              PhD programme is also offered in all disciplines of BE/ME Programmes
+              & all relevant areas of interest. Research component of IET is also
+              strong while a number of research scholars from other reputed
+              organizations such as SGSITS, AICTE, RRCAT, NRCS, IIITA, etc. have
+              registered for PhD programme in various departments of IET.
+            </h2>
+          )
+        }
+      </div>
+    </div>
+  );
+};
+export default AcademicProgramsSection;
diff --git a/pages/index.tsx b/pages/index.tsx
index a2b107e..2e68e73 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -2,6 +2,8 @@ import type { NextPage } from 'next';
 import Head from 'next/head';
 import styles from './Home.module.scss';
 
+import AcademicProgramsSection from '../components/AcademicProgramsSection';
+
 const Home: NextPage = () => (
   <div className={styles.container}>
     <Head>
@@ -14,6 +16,8 @@ const Home: NextPage = () => (
       <h1>IET DAVV Website</h1>
       <h2 className="hello">hello</h2>
     </main>
+
+    <AcademicProgramsSection />
   </div>
 );