diff --git a/components/DateSelector/DateSelector.jsx b/components/DateSelector/DateSelector.jsx
index 176aadece..b46bcc12c 100644
--- a/components/DateSelector/DateSelector.jsx
+++ b/components/DateSelector/DateSelector.jsx
@@ -8,9 +8,10 @@ import {
   updateStartDate as reduxUpdateStartDate,
   updateEndDate as reduxUpdateEndDate,
 } from '@reducers/filters';
+import Typography from '@mui/material/Typography';
 import ArrowToolTip from '@components/common/ArrowToolTip';
 import options from './options';
-import useStyles from './useStyles';
+import makeStyles from '@mui/styles/makeStyles';
 import DateRanges from './DateRanges';
 
 const dateFormat = 'YYYY-MM-DD';
@@ -21,6 +22,16 @@ function DateSelector({
   updateEndDate,
 }) {
   const [expanded, setExpanded] = useState(false);
+  const useStyles = makeStyles(theme => ({
+  iconStyle: {
+    verticalAlign: 'middle',
+  },
+    header: {
+      fontSize: '12.47px',
+      fontWeight: theme.typography.fontWeightMedium,
+      marginBottom: '8px',
+    },
+  }));
   const classes = useStyles();
 
   const handleOptionSelect = optionDates => {
@@ -36,16 +47,16 @@ function DateSelector({
   }, []);
 
   const {
-    option, selected, label, iconStyle, tooltipParagraph,
+    option, selected, tooltipParagraph,
   } = classes;
 
   const linkedinPageLink = <a href="https://www.linkedin.com/company/hack-for-la/">LinkedIn Page</a>;
 
   return (
     <>
-      <span className={label}>
+      <Typography className={classes.header}>
         Date Range&nbsp;
-        <ArrowToolTip iconStyle={iconStyle}>
+        <ArrowToolTip iconStyle={classes.iconStyle}>
           <div>
             <p className={tooltipParagraph}>
               <strong>
@@ -62,7 +73,7 @@ function DateSelector({
             </p>
           </div>
         </ArrowToolTip>
-      </span>
+      </Typography>
       <SelectorBox onToggle={() => setExpanded(!expanded)} expanded={expanded}>
         <SelectorBox.Display>
           <div className={classes.selector}>
diff --git a/components/main/Desktop/CouncilSelector/index.js b/components/main/Desktop/CouncilSelector/index.js
index cd0a1fbe3..50baafaa6 100644
--- a/components/main/Desktop/CouncilSelector/index.js
+++ b/components/main/Desktop/CouncilSelector/index.js
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import makeStyles from '@mui/styles/makeStyles';
+import Typography from '@mui/material/Typography';
 import {
   updateNcId,
   updateSelectedCouncils,
@@ -15,11 +16,10 @@ import SelectedCouncils from './SelectedCouncils';
 import CouncilsList from './CouncilsList';
 
 const useStyles = makeStyles(theme => ({
-  label: {
-    display: 'inline-block',
-    font: theme.typography.b2,
-    marginBottom: '10px',
-    color: theme.palette.secondary.light,
+  header: {
+    fontSize: '12.47px',
+    fontWeight: theme.typography.fontWeightMedium,
+    marginBottom: '8px',
   },
 }));
 
@@ -89,7 +89,7 @@ function CouncilSelector({
 
   return (
     <>
-      <div className={classes.label}>Boundaries</div>
+      <Typography className={classes.header}>Boundaries</Typography>
       <BoundariesSection>
         <BoundariesSection.Display>
           <SelectedCouncils items={selected} onDelete={debouncedHandleDelete} />