diff --git a/src/frontend/src/pages/HomePage/components/Dropdown.tsx b/src/frontend/src/pages/HomePage/components/Dropdown.tsx
new file mode 100644
index 0000000000..a6bdf6f400
--- /dev/null
+++ b/src/frontend/src/pages/HomePage/components/Dropdown.tsx
@@ -0,0 +1,43 @@
+import { Box, Accordion, AccordionSummary, Typography, AccordionDetails } from '@mui/material';
+
+import { ChevronRight } from '@mui/icons-material';
+import React, { useState } from 'react';
+
+interface DropdownProps {
+  title: string;
+  description: string;
+}
+
+const Dropdown = ({ title, description }: DropdownProps) => {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <Box marginBottom={2}>
+      <Accordion
+        expanded={expanded}
+        onChange={() => setExpanded(!expanded)}
+        sx={{
+          backgroundColor: '#ef4244'
+        }}
+      >
+        <AccordionSummary
+          sx={{ flexDirection: 'row-reverse', borderBottomLeftRadius: '100px', borderBottomRightRadius: '100px' }}
+        >
+          <ChevronRight
+            sx={{
+              transition: 'transform 0.3s ease',
+              transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)',
+              fontSize: 30
+            }}
+          />
+          <Typography sx={{ color: 'white', fontWeight: 'bold', fontSize: 20 }}>{title}</Typography>
+        </AccordionSummary>
+        <AccordionDetails sx={{ backgroundColor: 'white', borderBottomLeftRadius: '4px', borderBottomRightRadius: '4px' }}>
+          <Typography sx={{ color: 'black' }}>{description}</Typography>
+        </AccordionDetails>
+      </Accordion>
+    </Box>
+  );
+};
+
+export default Dropdown;
diff --git a/src/frontend/src/pages/HomePage/components/FAQsSection.tsx b/src/frontend/src/pages/HomePage/components/FAQsSection.tsx
index 45b23c3dac..041d7059bd 100644
--- a/src/frontend/src/pages/HomePage/components/FAQsSection.tsx
+++ b/src/frontend/src/pages/HomePage/components/FAQsSection.tsx
@@ -1,8 +1,23 @@
-import { Typography } from '@mui/material';
+import { Box } from '@mui/system';
+import LoadingIndicator from '../../../components/LoadingIndicator';
+import { useAllFaqs } from '../../../hooks/recruitment.hooks';
+import ErrorPage from '../../ErrorPage';
+import Dropdown from './Dropdown';
+import React from 'react';
 
 const FAQsSection = () => {
-  // TODO: Ticket #2714
-  return <Typography>FAQ section</Typography>;
+  const { isLoading, isError, error, data: faqs } = useAllFaqs();
+  if (isLoading || !faqs) return <LoadingIndicator />;
+
+  if (isError) return <ErrorPage message={error.message} />;
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      {faqs.map((faq) => (
+        <Dropdown title={faq.question} description={faq.answer} />
+      ))}
+    </Box>
+  );
 };
 
 export default FAQsSection;