diff --git a/frontend/src/components/molecules/SidePanelPercentageModal.tsx b/frontend/src/components/molecules/SidePanelPercentageModal.tsx
index 1fefc46..20c28b7 100644
--- a/frontend/src/components/molecules/SidePanelPercentageModal.tsx
+++ b/frontend/src/components/molecules/SidePanelPercentageModal.tsx
@@ -64,8 +64,8 @@ const SidePanelPercentageModal: React.FC<SidePanelPercentageModalProps> = ({
       >
         <Typography
           variant="h6"
-          fontFamily="Poppins, sans-serif"
           sx={{
+            fontFamily: "Poppins, sans-serif",
             display: "flex",
             alignItems: "center",
             gap: 0.8,
@@ -104,8 +104,8 @@ const SidePanelPercentageModal: React.FC<SidePanelPercentageModalProps> = ({
             >
               <Typography
                 variant="h5"
-                fontFamily="Poppins, sans-serif"
                 sx={{
+                  fontFamily: "Poppins, sans-serif",
                   fontWeight: "bold",
                   color,
                   textAlign: "center",
@@ -116,8 +116,8 @@ const SidePanelPercentageModal: React.FC<SidePanelPercentageModalProps> = ({
               </Typography>
               <Typography
                 variant="body2"
-                fontFamily="Poppins, sans-serif"
                 sx={{
+                  fontFamily: "Poppins, sans-serif",
                   fontWeight: 900,
                   color,
                   textAlign: "center",
diff --git a/frontend/src/components/molecules/Slide.tsx b/frontend/src/components/molecules/Slide.tsx
index 9f0da18..0aa67ea 100644
--- a/frontend/src/components/molecules/Slide.tsx
+++ b/frontend/src/components/molecules/Slide.tsx
@@ -12,11 +12,19 @@ interface SlideProps {
 }
 
 const CalendarIcon = () => (
-  <svg width="25" height="40" viewBox="0 -14 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M11.4023 4.14111C12.1802 4.14111 12.8086 4.76953 12.8086 5.54736V6.95361H18.4336V5.54736C18.4336 4.76953 19.062 4.14111 19.8398 4.14111C20.6177 4.14111 21.2461 4.76953 21.2461 5.54736V6.95361H23.3555C24.52 6.95361 25.4648 7.89844 25.4648 9.06299V11.1724H5.77734V9.06299C5.77734 7.89844 6.72217 6.95361 7.88672 6.95361H9.99609V5.54736C9.99609 4.76953 10.6245 4.14111 11.4023 4.14111ZM5.77734 12.5786H25.4648V24.5317C25.4648 25.6963 24.52 26.6411 23.3555 26.6411H7.88672C6.72217 26.6411 5.77734 25.6963 5.77734 24.5317V12.5786ZM8.58984 16.0942V17.5005C8.58984 17.8872 8.90625 18.2036 9.29297 18.2036H10.6992C11.0859 18.2036 11.4023 17.8872 11.4023 17.5005V16.0942C11.4023 15.7075 11.0859 15.3911 10.6992 15.3911H9.29297C8.90625 15.3911 8.58984 15.7075 8.58984 16.0942ZM14.2148 16.0942V17.5005C14.2148 17.8872 14.5312 18.2036 14.918 18.2036H16.3242C16.7109 18.2036 17.0273 17.8872 17.0273 17.5005V16.0942C17.0273 15.7075 16.7109 15.3911 16.3242 15.3911H14.918C14.5312 15.3911 14.2148 15.7075 14.2148 16.0942ZM20.543 15.3911C20.1562 15.3911 19.8398 15.7075 19.8398 16.0942V17.5005C19.8398 17.8872 20.1562 18.2036 20.543 18.2036H21.9492C22.3359 18.2036 22.6523 17.8872 22.6523 17.5005V16.0942C22.6523 15.7075 22.3359 15.3911 21.9492 15.3911H20.543ZM8.58984 21.7192V23.1255C8.58984 23.5122 8.90625 23.8286 9.29297 23.8286H10.6992C11.0859 23.8286 11.4023 23.5122 11.4023 23.1255V21.7192C11.4023 21.3325 11.0859 21.0161 10.6992 21.0161H9.29297C8.90625 21.0161 8.58984 21.3325 8.58984 21.7192ZM14.918 21.0161C14.5312 21.0161 14.2148 21.3325 14.2148 21.7192V23.1255C14.2148 23.5122 14.5312 23.8286 14.918 23.8286H16.3242C16.7109 23.8286 17.0273 23.5122 17.0273 23.1255V21.7192C17.0273 21.3325 16.7109 21.0161 16.3242 21.0161H14.918ZM19.8398 21.7192V23.1255C19.8398 23.5122 20.1562 23.8286 20.543 23.8286H21.9492C22.3359 23.8286 22.6523 23.5122 22.6523 23.1255V21.7192C22.6523 21.3325 22.3359 21.0161 21.9492 21.0161H20.543C20.1562 21.0161 19.8398 21.3325 19.8398 21.7192Z" fill="black" />
+  <svg
+    width="25"
+    height="40"
+    viewBox="0 -14 31 31"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11.4023 4.14111C12.1802 4.14111 12.8086 4.76953 12.8086 5.54736V6.95361H18.4336V5.54736C18.4336 4.76953 19.062 4.14111 19.8398 4.14111C20.6177 4.14111 21.2461 4.76953 21.2461 5.54736V6.95361H23.3555C24.52 6.95361 25.4648 7.89844 25.4648 9.06299V11.1724H5.77734V9.06299C5.77734 7.89844 6.72217 6.95361 7.88672 6.95361H9.99609V5.54736C9.99609 4.76953 10.6245 4.14111 11.4023 4.14111ZM5.77734 12.5786H25.4648V24.5317C25.4648 25.6963 24.52 26.6411 23.3555 26.6411H7.88672C6.72217 26.6411 5.77734 25.6963 5.77734 24.5317V12.5786ZM8.58984 16.0942V17.5005C8.58984 17.8872 8.90625 18.2036 9.29297 18.2036H10.6992C11.0859 18.2036 11.4023 17.8872 11.4023 17.5005V16.0942C11.4023 15.7075 11.0859 15.3911 10.6992 15.3911H9.29297C8.90625 15.3911 8.58984 15.7075 8.58984 16.0942ZM14.2148 16.0942V17.5005C14.2148 17.8872 14.5312 18.2036 14.918 18.2036H16.3242C16.7109 18.2036 17.0273 17.8872 17.0273 17.5005V16.0942C17.0273 15.7075 16.7109 15.3911 16.3242 15.3911H14.918C14.5312 15.3911 14.2148 15.7075 14.2148 16.0942ZM20.543 15.3911C20.1562 15.3911 19.8398 15.7075 19.8398 16.0942V17.5005C19.8398 17.8872 20.1562 18.2036 20.543 18.2036H21.9492C22.3359 18.2036 22.6523 17.8872 22.6523 17.5005V16.0942C22.6523 15.7075 22.3359 15.3911 21.9492 15.3911H20.543ZM8.58984 21.7192V23.1255C8.58984 23.5122 8.90625 23.8286 9.29297 23.8286H10.6992C11.0859 23.8286 11.4023 23.5122 11.4023 23.1255V21.7192C11.4023 21.3325 11.0859 21.0161 10.6992 21.0161H9.29297C8.90625 21.0161 8.58984 21.3325 8.58984 21.7192ZM14.918 21.0161C14.5312 21.0161 14.2148 21.3325 14.2148 21.7192V23.1255C14.2148 23.5122 14.5312 23.8286 14.918 23.8286H16.3242C16.7109 23.8286 17.0273 23.5122 17.0273 23.1255V21.7192C17.0273 21.3325 16.7109 21.0161 16.3242 21.0161H14.918ZM19.8398 21.7192V23.1255C19.8398 23.5122 20.1562 23.8286 20.543 23.8286H21.9492C22.3359 23.8286 22.6523 23.5122 22.6523 23.1255V21.7192C22.6523 21.3325 22.3359 21.0161 21.9492 21.0161H20.543C20.1562 21.0161 19.8398 21.3325 19.8398 21.7192Z"
+      fill="black"
+    />
   </svg>
-
-)
+);
 
 const Slide: React.FC<SlideProps> = ({
   name,
@@ -43,7 +51,7 @@ const Slide: React.FC<SlideProps> = ({
   // Handles when releasing the slider
   const handleSliderCommit = (
     _: React.SyntheticEvent | Event,
-    newValue: number | number[]
+    newValue: number | number[],
   ) => {
     if (typeof newValue === "number") {
       setSliderVal(newValue); // Update local state
@@ -59,12 +67,22 @@ const Slide: React.FC<SlideProps> = ({
   };
 
   return (
-    <Box display="flex" flexDirection="column" alignItems="flex-start" mb={2} style={{ fontFamily: "Poppins, sans-serif" }}>
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        mb: 2,
+      }}
+      style={{ fontFamily: "Poppins, sans-serif" }}
+    >
       <Box
-        display="flex"
-        width="100%"
-        justifyContent="space-between"
-        alignItems="center"
+        sx={{
+          display: "flex",
+          width: "100%",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
       >
         <span
           style={{
@@ -77,11 +95,9 @@ const Slide: React.FC<SlideProps> = ({
             textDecoration: "none",
           }}
         >
-          <CalendarIcon />
-          {" "}
-          {name}
+          <CalendarIcon /> {name}
         </span>
-        <Box ml={2} p={1} display="inline-block" width="auto">
+        <Box sx={{ ml: 2, p: 1, display: "inline-block", width: "auto" }}>
           <span
             style={{
               fontFamily: "Poppins",
@@ -124,18 +140,25 @@ const Slide: React.FC<SlideProps> = ({
         onChangeCommitted={handleSliderCommit} //Call once finished dragging slider
         valueLabelDisplay="auto"
         sx={{
-          '& .MuiSlider-thumb': {
-            color: '#065143',
+          "& .MuiSlider-thumb": {
+            color: "#065143",
           },
-          '& .MuiSlider-track': {
-            color: '#065143',
+          "& .MuiSlider-track": {
+            color: "#065143",
+          },
+          "& .MuiSlider-rail": {
+            color: "#8F8F8F", // Lighter red for the rail
           },
-          '& .MuiSlider-rail': {
-            color: '#8F8F8F', // Lighter red for the rail
-          }
         }}
       />
-      <Box display="flex" width="100%" justifyContent="space-between" mt={2}>
+      <Box
+        sx={{
+          display: "flex",
+          width: "100%",
+          justifyContent: "space-between",
+          mt: 2,
+        }}
+      >
         <span
           style={{
             fontFamily: "Poppins, sans-serif",
diff --git a/frontend/src/components/organisms/Home.tsx b/frontend/src/components/organisms/Home.tsx
index 45fade4..0b8d7ba 100644
--- a/frontend/src/components/organisms/Home.tsx
+++ b/frontend/src/components/organisms/Home.tsx
@@ -26,9 +26,8 @@ const Home: React.FC = () => {
               <Box>
                 <Typography
                   variant="h4"
-                  fontWeight="bold"
-                  mb={2}
                   sx={{
+                    mb: 2,
                     fontFamily: "Poppins, sans-serif",
                     fontSize: "24px",
                     fontWeight: "bold",
@@ -141,8 +140,8 @@ const Home: React.FC = () => {
                 />
                 <Typography
                   variant="h6"
-                  mb={2}
                   sx={{
+                    mb: 2,
                     color: "#065143",
                     fontFamily: "Poppins, sans-serif",
                     fontSize: "24px",
@@ -183,8 +182,8 @@ const Home: React.FC = () => {
                 />
                 <Typography
                   variant="h6"
-                  mb={2}
                   sx={{
+                    mb: 2,
                     color: "#065143",
                     fontFamily: "Poppins, sans-serif",
                     fontSize: "24px",
@@ -225,8 +224,8 @@ const Home: React.FC = () => {
                 />
                 <Typography
                   variant="h6"
-                  mb={2}
                   sx={{
+                    mb: 2,
                     color: "#065143",
                     fontFamily: "Poppins, sans-serif",
                     fontSize: "24px",
@@ -260,8 +259,8 @@ const Home: React.FC = () => {
             left={
               <Box>
                 <Typography
-                  mb={2}
                   sx={{
+                    mb: 2,
                     fontFamily: "Poppins, sans-serif",
                     fontSize: "32px",
                     fontStyle: "normal",
@@ -337,8 +336,8 @@ const Home: React.FC = () => {
             right={
               <Box>
                 <Typography
-                  mb={2}
                   sx={{
+                    mb: 2,
                     color: "#FFF",
                     fontFamily: "Poppins, sans-serif",
                     fontSize: "32px",
@@ -386,8 +385,8 @@ const Home: React.FC = () => {
             left={
               <Box>
                 <Typography
-                  mb={2}
                   sx={{
+                    mb: 2,
                     fontFamily: "Poppins, sans-serif",
                     fontSize: "32px",
                     fontStyle: "normal",
diff --git a/frontend/src/components/organisms/SidePanel.tsx b/frontend/src/components/organisms/SidePanel.tsx
index b224f74..6e91499 100644
--- a/frontend/src/components/organisms/SidePanel.tsx
+++ b/frontend/src/components/organisms/SidePanel.tsx
@@ -90,14 +90,14 @@ const SidePanel: React.FC<SidePanelProps> = ({ yearOptions }) => {
     entityType: string,
     entityID: number,
     categoryType: LayerType | null,
-    selectedYear: number
+    selectedYear: number,
   ) => {
     try {
       const response = await fetch(
-        `${backendUrl}/cell/${entityType}/${entityID}/${categoryType}/${selectedYear}`
+        `${backendUrl}/cell/${entityType}/${entityID}/${categoryType}/${selectedYear}`,
       );
       console.log(
-        `${backendUrl}/cell/${entityType}/${entityID}/${categoryType}/${selectedYear}`
+        `${backendUrl}/cell/${entityType}/${entityID}/${categoryType}/${selectedYear}`,
       );
       const response_json = await response.json();
       const percentages = [
@@ -116,7 +116,7 @@ const SidePanel: React.FC<SidePanelProps> = ({ yearOptions }) => {
   const loadEntityLivestock = async (entityType: string, entityID: number) => {
     try {
       const response = await fetch(
-        `${backendUrl}/${entityType}/${entityID}/${selectedYear}/livestock`
+        `${backendUrl}/${entityType}/${entityID}/${selectedYear}/livestock`,
       );
       const response_json = await response.json();
       const livestock_data = {
@@ -174,7 +174,7 @@ const SidePanel: React.FC<SidePanelProps> = ({ yearOptions }) => {
               "province",
               selectedProvince,
               selectedLayerType,
-              selectedYear
+              selectedYear,
             ),
             loadEntityLivestock("province", selectedProvince),
           ]);
@@ -194,7 +194,7 @@ const SidePanel: React.FC<SidePanelProps> = ({ yearOptions }) => {
               "county",
               selectedCounty,
               selectedLayerType,
-              selectedYear
+              selectedYear,
             ),
             loadEntityLivestock("county", selectedCounty),
           ]);
@@ -398,19 +398,21 @@ const SidePanel: React.FC<SidePanelProps> = ({ yearOptions }) => {
         open={isPanelOpen ?? false}
         onClose={handlePanelToggle}
         variant="persistent"
-        PaperProps={{
-          sx: {
-            width: isMobile ? "100%" : "35vw",
-            height: isMobile ? "75vh" : "calc(100% - 70px)",
-            maxWidth: isMobile ? "100%" : "400px",
-            boxSizing: "border-box",
-            p: 2,
-            paddingTop: "10px",
-            display: "flex",
-            flexDirection: "column",
-            marginTop: isMobile ? 0 : "78px",
-            borderTopLeftRadius: isMobile ? "12px" : 0,
-            borderTopRightRadius: isMobile ? "12px" : 0,
+        slotProps={{
+          paper: {
+            sx: {
+              width: isMobile ? "100%" : "35vw",
+              height: isMobile ? "75vh" : "calc(100% - 70px)",
+              maxWidth: isMobile ? "100%" : "400px",
+              boxSizing: "border-box",
+              p: 2,
+              paddingTop: "10px",
+              display: "flex",
+              flexDirection: "column",
+              marginTop: isMobile ? 0 : "78px",
+              borderTopLeftRadius: isMobile ? "12px" : 0,
+              borderTopRightRadius: isMobile ? "12px" : 0,
+            },
           },
         }}
         sx={{
@@ -434,8 +436,8 @@ const SidePanel: React.FC<SidePanelProps> = ({ yearOptions }) => {
             <div>
               <Typography
                 variant="h4"
-                fontFamily="Poppins, sans-serif"
                 sx={{
+                  fontFamily: "Poppins, sans-serif",
                   fontWeight: 700,
                   color: "#111",
                   mt: 2,
@@ -448,7 +450,7 @@ const SidePanel: React.FC<SidePanelProps> = ({ yearOptions }) => {
               <Typography
                 variant="body2"
                 color="#111"
-                fontFamily="Poppins, sans-serif"
+                sx={{ fontFamily: "Poppins, sans-serif" }}
               >
                 {ts("instruction")}
               </Typography>
@@ -493,8 +495,8 @@ const SidePanel: React.FC<SidePanelProps> = ({ yearOptions }) => {
               </div>
               <Typography
                 variant="h4"
-                fontFamily="Poppins, sans-serif"
                 sx={{
+                  fontFamily: "Poppins, sans-serif",
                   fontWeight: 700,
                   color: "#111",
                   mt: 2,
@@ -575,8 +577,8 @@ const SidePanel: React.FC<SidePanelProps> = ({ yearOptions }) => {
               </div>
               <Typography
                 variant="h4"
-                fontFamily="Poppins, sans-serif"
                 sx={{
+                  fontFamily: "Poppins, sans-serif",
                   fontWeight: 700,
                   color: "#111",
                   mt: 2,
@@ -667,21 +669,29 @@ const SidePanel: React.FC<SidePanelProps> = ({ yearOptions }) => {
               mb: 3,
             }}
           >
-            <Typography variant="h6" fontWeight="bold">
+            <Typography variant="h6" sx={{ fontWeight: "bold" }}>
               Map Guide
             </Typography>
             <IconButton onClick={() => setShowGuide(false)}>
               <CloseIcon />
             </IconButton>
           </Box>
-          <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
+          <Typography
+            variant="subtitle1"
+            gutterBottom
+            sx={{ fontWeight: "bold" }}
+          >
             Summary
           </Typography>
-          <Typography variant="body2" paragraph>
+          <Typography variant="body2" sx={{ mb: 2 }}>
             hey there delilah, how is it like in new york city?
           </Typography>
 
-          <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
+          <Typography
+            variant="subtitle1"
+            gutterBottom
+            sx={{ fontWeight: "bold" }}
+          >
             Usage
           </Typography>
           <Typography variant="body2">YO</Typography>
diff --git a/frontend/src/pages/about.tsx b/frontend/src/pages/about.tsx
index 51adabf..5942c95 100644
--- a/frontend/src/pages/about.tsx
+++ b/frontend/src/pages/about.tsx
@@ -44,9 +44,8 @@ const About = () => {
               <Box>
                 <Typography
                   variant="h4"
-                  fontWeight="bold"
-                  mb={2}
                   sx={{
+                    mb: 2,
                     fontFamily: "Poppins, sans-serif",
                     fontSize: "24px",
                     fontWeight: "bold",
@@ -98,9 +97,8 @@ const About = () => {
         >
           <Typography
             variant="h4"
-            fontWeight="bold"
-            mb={2}
             sx={{
+              mb: 2,
               fontFamily: "Poppins, sans-serif",
               fontSize: "24px",
               fontWeight: "bold",
diff --git a/frontend/src/pages/methodology.tsx b/frontend/src/pages/methodology.tsx
index 7dc99ae..a0883da 100644
--- a/frontend/src/pages/methodology.tsx
+++ b/frontend/src/pages/methodology.tsx
@@ -21,10 +21,10 @@ const Methodology = () => {
             }}
           >
             <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-              <Typography variant="h4" fontWeight="bold">
+              <Typography variant="h4" sx={{ fontWeight: "bold" }}>
                 Methodologies
               </Typography>
-              <Typography variant="h6" fontWeight="bold">
+              <Typography variant="h6" sx={{ fontWeight: "bold" }}>
                 About our data
               </Typography>
               <Typography variant="body1" color="text.secondary">
@@ -57,7 +57,7 @@ const Methodology = () => {
 
       <section className="w-[1600px] mx-auto flex flex-col gap-[140px]">
         <Box sx={{ mx: "auto", px: 2, maxWidth: "lg" }}>
-          <Typography variant="h5" fontWeight="bold" sx={{ py: 2 }}>
+          <Typography variant="h5" sx={{ fontWeight: "bold", py: 2 }}>
             Additional Information
           </Typography>
         </Box>
@@ -91,15 +91,13 @@ const Methodology = () => {
               <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
                 <Typography
                   variant="subtitle2"
-                  fontWeight="medium"
-                  sx={{ color: "black", mb: -1 }}
+                  sx={{ fontWeight: "medium", color: "black", mb: -1 }}
                 >
                   Nov. 20, 2024
                 </Typography>
                 <Typography
                   variant="h6"
-                  fontWeight="bold"
-                  sx={{ color: "black" }}
+                  sx={{ fontWeight: "bold", color: "black" }}
                 >
                   Article Title
                 </Typography>
@@ -157,15 +155,13 @@ const Methodology = () => {
               <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
                 <Typography
                   variant="subtitle2"
-                  fontWeight="medium"
-                  sx={{ color: "black", mb: -1 }}
+                  sx={{ fontWeight: "medium", color: "black", mb: -1 }}
                 >
                   Nov. 20, 2024
                 </Typography>
                 <Typography
                   variant="h6"
-                  fontWeight="bold"
-                  sx={{ color: "black" }}
+                  sx={{ fontWeight: "bold", color: "black" }}
                 >
                   Article Title
                 </Typography>
@@ -222,15 +218,13 @@ const Methodology = () => {
               <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
                 <Typography
                   variant="subtitle2"
-                  fontWeight="medium"
-                  sx={{ color: "black", mb: -1 }}
+                  sx={{ fontWeight: "medium", color: "black", mb: -1 }}
                 >
                   Nov. 20, 2024
                 </Typography>
                 <Typography
                   variant="h6"
-                  fontWeight="bold"
-                  sx={{ color: "black" }}
+                  sx={{ fontWeight: "bold", color: "black" }}
                 >
                   Article Title
                 </Typography>