diff --git a/components/Home/AboutUsSection.tsx b/components/Home/AboutUsSection.tsx
index 82adc66..9ae10b2 100644
--- a/components/Home/AboutUsSection.tsx
+++ b/components/Home/AboutUsSection.tsx
@@ -1,52 +1,137 @@
 import { FC } from 'react';
 
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import Divider from '@mui/material/Divider';
+import { ThemeProvider } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+
 import Image from 'next/image';
 import Deerfield from 'public/deerfield.png'; // image from https://www.soundsolutions.ca/projects/featured-exterior-cladding-projects/deerfield-hall-univeristy-of-toronto-mississauga-campus
 import Experience from 'public/experience.png';
 
+import { aboutSectionTheme } from '../../style/theme';
+
 const AboutUsSection: FC = () => (
-  <div
-    id="about"
-    className="about-us-section flex flex-col items-center lg:items-stretch lg:flex-row gap-8"
-  >
-    <div className="header-img w-full lg:w-1/3 lg:min-h-full hidden lg:block">
-      <Image
-        src={Deerfield}
-        alt="Deerfield Hall"
-        className="min-h-full rounded-lg overflow-hidden"
-        draggable="false"
-      />
-    </div>
-    <div className="w-4/5 mt-10 lg:mt-0 lg:w-2/3 flex flex-col justify-between xl:justify-center">
-      <span>
-        <p className="inline-block h-1/3 mr-5 text-2xl">ABOUT US</p>
-        <hr className="inline-block h-1 w-56 bg-purple-600" />
-      </span>
-      <div className="flex items-center my-5 lg:my-0">
-        <div className="w-1/2">
-          <p className="text-2xl md:text-4xl mt-3 mb-3 lg:text-6xl font-bold">FOR THE STUDENTS</p>
-          <p className="lg:hidden text-lg text-purple-700 font-semibold">Academic Society</p>
-        </div>
-        <div className="w-1/4 md:w-1/6 m-auto">
-          <Image src={Experience} alt="Experience" draggable="false" />
-        </div>
-      </div>
-      <p className="hidden lg:inline-block text-lg text-purple-700 font-semibold xl:pb-5">
-        Academic Society
-      </p>
-      <div className="flex">
-        <p className="text-med lg:text-justify">
-          Hello students and welcome! UTM Mathematical and Computational Sciences Society (MCSS) is
-          the official academic society for the Mathematics and Computational Sciences Department.
-          The purpose of the club is to officially represent the students, promote and achieve the
-          common interests of the students, encourage academic, social, and career related support
-          for the students, maintain open lines of communication between the students and the
-          department's faculty and staff, as well as maintain communication between the students
-          themselves, and encourage faculty and student interaction outside of the formal lecture,
-          tutorial, and lab settings.
-        </p>
-      </div>
-    </div>
-  </div>
+  <ThemeProvider theme={aboutSectionTheme}>
+    <Container
+      maxWidth={false}
+      disableGutters
+      id="about"
+      sx={{
+        display: 'flex',
+        flexDirection: { lg: 'row' },
+        alignItems: { md: 'center', lg: 'stretch' },
+        gap: '2rem',
+      }}
+    >
+      <Box
+        sx={{
+          width: { lg: 1 / 3, md: 'full' },
+          minHeight: { lg: 'full' },
+          display: { xs: 'none', lg: 'block' },
+        }}
+      >
+        <Image
+          src={Deerfield}
+          alt="Deerfield Hall"
+          className="min-h-full rounded-lg overflow-hidden"
+          draggable="false"
+        />
+      </Box>
+
+      <Box
+        sx={{
+          marginTop: 0,
+          width: { md: 4 / 5, lg: 2 / 3 },
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: { lg: 'space-between', xl: 'center' },
+          textAlign: { md: 'left' },
+        }}
+      >
+        <Box sx={{ textAlign: { xs: 'center', sm: 'left' } }}>
+          <Typography
+            sx={{
+              fontSize: { lg: 23.5, xs: 35 },
+              display: { md: 'inline-block' },
+              flexDirection: 'column',
+              height: { md: '1/3' },
+              marginRight: { lg: 2 },
+              textAlign: { lg: 'center' },
+            }}
+          >
+            ABOUT US
+          </Typography>
+          <Divider
+            sx={{
+              display: 'inline-block',
+              height: '0.25rem',
+              width: '14rem',
+              backgroundColor: '#805ad5',
+            }}
+          />
+        </Box>
+
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            marginY: { xs: 5, lg: 0 },
+          }}
+        >
+          <Box sx={{ width: 1 / 2 }}>
+            <Typography
+              sx={{
+                display: { xs: 'none', md: 'block' },
+                fontSize: { md: '2.25rem', lg: '3.75rem' },
+                lineHeight: { md: '2.5rem', lg: '1' },
+                marginTop: '0.75rem',
+                marginBottom: '0.75rem',
+                fontWeight: 'bold',
+              }}
+            >
+              FOR THE STUDENTS
+            </Typography>
+          </Box>
+          <Box className="md:block w-1/4 md:w-1/6 m-auto hidden">
+            <Image src={Experience} alt="Experience" draggable="false" />
+          </Box>
+        </Box>
+        <Typography
+          sx={{
+            display: { xs: 'none', md: 'block', lg: 'inline-block' },
+            fontWeight: 600,
+            paddingBottom: { xl: '1.25rem' },
+            fontSize: '1.125rem',
+            lineHeight: '1.75rem',
+            color: '#7E22CE',
+          }}
+        >
+          Academic Society
+        </Typography>
+        <Box sx={{ display: 'flex' }}>
+          <Typography
+            sx={{
+              paddingX: { xs: 2, sm: 0, md: 0, lg: 0 },
+              fontWeight: 400,
+              fontSize: '1rem',
+              textAlign: 'left',
+            }}
+            paragraph
+          >
+            Hello students and welcome! UTM Mathematical and Computational Sciences Society (MCSS)
+            is the official academic society for the Mathematics and Computational Sciences
+            Department. The purpose of the club is to officially represent the students, promote and
+            achieve the common interests of the students, encourage academic, social, and career
+            related support for the students, maintain open lines of communication between the
+            students and the department's faculty and staff, as well as maintain communication
+            between the students themselves, and encourage faculty and student interaction outside
+            of the formal lecture, tutorial, and lab settings.
+          </Typography>
+        </Box>
+      </Box>
+    </Container>
+  </ThemeProvider>
 );
 export default AboutUsSection;
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 7944513..edbd15a 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -9,7 +9,7 @@ import { store } from '@store/store';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import type { AppProps } from 'next/app';
 import Script from 'next/script';
-import theme from 'style/theme';
+import { theme } from 'style/theme';
 
 import { APIProvider } from '../contexts/useAPI';
 
diff --git a/style/theme.ts b/style/theme.ts
index d627c40..18a4a45 100644
--- a/style/theme.ts
+++ b/style/theme.ts
@@ -2,6 +2,12 @@ import { createTheme } from '@mui/material/styles';
 
 import COLORS from 'style/colors';
 
+const aboutSectionTheme = createTheme({
+  typography: {
+    fontFamily: ['Segoe UI'].join(','),
+  },
+});
+
 const base = createTheme({
   palette: {
     primary: {
@@ -164,4 +170,4 @@ const theme = createTheme(base, {
   },
 });
 
-export default theme;
+export { theme, aboutSectionTheme };