diff --git a/src/pages/BugReportForm .tsx b/src/pages/BugReportForm .tsx
index 0efaf555..897b7b15 100644
--- a/src/pages/BugReportForm .tsx	
+++ b/src/pages/BugReportForm .tsx	
@@ -1,7 +1,9 @@
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Form, Input, Button, Upload, message, Select, FormProps, Card } from 'antd'
-import { UploadOutlined } from '@ant-design/icons'
+import { Form, Input, Button, Upload, message, Select, FormProps } from 'antd'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import FileUploadOutlinedIcon from '@mui/icons-material/FileUploadOutlined'
 import axios from 'axios'
 import './BugReportForm.scss'
 import { UploadChangeParam, UploadFile } from 'antd/lib/upload'
@@ -65,116 +67,120 @@ const BugReportForm = () => {
 
   return (
     <Card className="bug-report-form-container">
-      <h1 className="logo">
-        דאטאבוס
-        <InfoYoutubeModal
-          label={t('open_video_about_this_page')}
-          title={t('youtube_modal_info_title')}
-          videoUrl="https://www.youtube-nocookie.com/embed?v=F6sD9Bz4Xj0&list=PL6Rh06rT7uiX1AQE-lm55hy-seL3idx3T&index=11"
-        />
-      </h1>
-      <span> {t('reportBug.description')}</span>
-      <p>
-        {submittedUrl && (
-          <a href={submittedUrl} target="_blank" rel="noopener noreferrer">
-            {t('reportBug.viewIssue')} (Github)
-          </a>
-        )}
-      </p>
-      <Form
-        form={form}
-        name="bug-report"
-        // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        onFinish={onFinish}
-        onFinishFailed={onFinishFailed}
-        labelCol={{ span: 6 }}
-        wrapperCol={{ span: 18 }}>
-        <Form.Item
-          label={t('bug_type')}
-          name="type"
-          initialValue={selectedType}
-          rules={[{ required: true, message: t('bug_type_message') }]}>
-          <Select onChange={(value: string) => setSelectedType(value)}>
-            <Option value="bug">{t('bug_type_bug')}</Option>
-            <Option value="feature">{t('bug_type_feature')}</Option>
-          </Select>
-        </Form.Item>
-
-        <Form.Item
-          label={t('bug_title')}
-          name="title"
-          rules={[{ required: true, message: t('bug_title_message') }]}>
-          <Input />
-        </Form.Item>
-
-        <Form.Item
-          label={t('bug_contact_name')}
-          name="contactName"
-          rules={[{ required: true, message: t('bug_contact_name_message') }]}>
-          <Input />
-        </Form.Item>
-
-        <Form.Item
-          label={t('bug_contact_email')}
-          name="contactEmail"
-          rules={[
-            { required: true, message: t('bug_contact_email_message') },
-            // { type: 'email', message: t(TEXT_KEYS.bug_contact_email_valid_message) },
-          ]}>
-          <Input />
-        </Form.Item>
-
-        <Form.Item
-          label={t('bug_description')}
-          name="description"
-          rules={[{ required: true, message: t('bug_description_message') }]}>
-          <Input.TextArea rows={4} />
-        </Form.Item>
-
-        <Form.Item
-          label={t('bug_environment')}
-          name="environment"
-          rules={[{ required: true, message: t('bug_environment_message') }]}>
-          <Input />
-        </Form.Item>
-
-        <Form.Item
-          label={t('bug_expected_behavior')}
-          name="expectedBehavior"
-          rules={[{ required: true, message: t('bug_expected_behavior_message') }]}>
-          <Input.TextArea rows={4} />
-        </Form.Item>
-
-        <Form.Item
-          label={t('bug_actual_behavior')}
-          name="actualBehavior"
-          rules={[{ required: true, message: t('bug_actual_behavior_message') }]}>
-          <Input.TextArea rows={4} />
-        </Form.Item>
-
-        <Form.Item
-          label={t('bug_reproducibility')}
-          name="reproducibility"
-          rules={[{ required: true, message: t('bug_reproducibility_message') }]}>
-          <Input />
-        </Form.Item>
-
-        <Form.Item label={t('bug_attachments')} name="attachments">
-          <Upload
-            beforeUpload={() => false}
-            listType="picture"
-            fileList={fileList}
-            onChange={onFileChange}>
-            <Button icon={<UploadOutlined />}>{t('bug_attachments_upload_button')}</Button>
-          </Upload>
-        </Form.Item>
-
-        <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
-          <Button type="primary" htmlType="submit">
-            {t('bug_submit')}{' '}
-          </Button>
-        </Form.Item>
-      </Form>
+      <CardContent>
+        <h1 className="logo">
+          דאטאבוס
+          <InfoYoutubeModal
+            label={t('open_video_about_this_page')}
+            title={t('youtube_modal_info_title')}
+            videoUrl="https://www.youtube-nocookie.com/embed?v=F6sD9Bz4Xj0&list=PL6Rh06rT7uiX1AQE-lm55hy-seL3idx3T&index=11"
+          />
+        </h1>
+        <span> {t('reportBug.description')}</span>
+        <p>
+          {submittedUrl && (
+            <a href={submittedUrl} target="_blank" rel="noopener noreferrer">
+              {t('reportBug.viewIssue')} (Github)
+            </a>
+          )}
+        </p>
+        <Form
+          form={form}
+          name="bug-report"
+          // eslint-disable-next-line @typescript-eslint/no-misused-promises
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          labelCol={{ span: 6 }}
+          wrapperCol={{ span: 18 }}>
+          <Form.Item
+            label={t('bug_type')}
+            name="type"
+            initialValue={selectedType}
+            rules={[{ required: true, message: t('bug_type_message') }]}>
+            <Select onChange={(value: string) => setSelectedType(value)}>
+              <Option value="bug">{t('bug_type_bug')}</Option>
+              <Option value="feature">{t('bug_type_feature')}</Option>
+            </Select>
+          </Form.Item>
+
+          <Form.Item
+            label={t('bug_title')}
+            name="title"
+            rules={[{ required: true, message: t('bug_title_message') }]}>
+            <Input />
+          </Form.Item>
+
+          <Form.Item
+            label={t('bug_contact_name')}
+            name="contactName"
+            rules={[{ required: true, message: t('bug_contact_name_message') }]}>
+            <Input />
+          </Form.Item>
+
+          <Form.Item
+            label={t('bug_contact_email')}
+            name="contactEmail"
+            rules={[
+              { required: true, message: t('bug_contact_email_message') },
+              // { type: 'email', message: t(TEXT_KEYS.bug_contact_email_valid_message) },
+            ]}>
+            <Input />
+          </Form.Item>
+
+          <Form.Item
+            label={t('bug_description')}
+            name="description"
+            rules={[{ required: true, message: t('bug_description_message') }]}>
+            <Input.TextArea rows={4} />
+          </Form.Item>
+
+          <Form.Item
+            label={t('bug_environment')}
+            name="environment"
+            rules={[{ required: true, message: t('bug_environment_message') }]}>
+            <Input />
+          </Form.Item>
+
+          <Form.Item
+            label={t('bug_expected_behavior')}
+            name="expectedBehavior"
+            rules={[{ required: true, message: t('bug_expected_behavior_message') }]}>
+            <Input.TextArea rows={4} />
+          </Form.Item>
+
+          <Form.Item
+            label={t('bug_actual_behavior')}
+            name="actualBehavior"
+            rules={[{ required: true, message: t('bug_actual_behavior_message') }]}>
+            <Input.TextArea rows={4} />
+          </Form.Item>
+
+          <Form.Item
+            label={t('bug_reproducibility')}
+            name="reproducibility"
+            rules={[{ required: true, message: t('bug_reproducibility_message') }]}>
+            <Input />
+          </Form.Item>
+
+          <Form.Item label={t('bug_attachments')} name="attachments">
+            <Upload
+              beforeUpload={() => false}
+              listType="picture"
+              fileList={fileList}
+              onChange={onFileChange}>
+              <Button icon={<FileUploadOutlinedIcon fontSize="small" />}>
+                {t('bug_attachments_upload_button')}
+              </Button>
+            </Upload>
+          </Form.Item>
+
+          <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
+            <Button type="primary" htmlType="submit">
+              {t('bug_submit')}{' '}
+            </Button>
+          </Form.Item>
+        </Form>
+      </CardContent>
     </Card>
   )
 }
diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx
index 47691f20..207877a2 100644
--- a/src/pages/about/index.tsx
+++ b/src/pages/about/index.tsx
@@ -2,21 +2,20 @@ import styled from 'styled-components'
 import SlackIcon from '../../resources/slack-icon.svg'
 import { Trans, useTranslation } from 'react-i18next'
 import Widget from 'src/shared/Widget'
-import { Space, Typography } from 'antd'
-
+import Typography from '@mui/material/Typography'
+import Stack from '@mui/material/Stack'
 import './About.scss'
 import { useQuery } from '@tanstack/react-query'
 
-const { Title } = Typography
 const pageName = 'aboutPage'
 const About = () => {
   const { t } = useTranslation()
   return (
     <AboutStyle>
-      <Space direction="vertical" size="middle">
-        <Title className="page-title" level={3}>
+      <Stack spacing={4}>
+        <Typography variant="h4" gutterBottom className="page-title">
           {t(`${pageName}.title`)}
-        </Title>
+        </Typography>
         <WhatIsWebsite />
         <DiscoveredMistake />
         <Privacy />
@@ -24,8 +23,8 @@ const About = () => {
         <Questions />
         <Funding />
         <Attributions />
-        <Contributors />
-      </Space>
+      </Stack>
+      <Contributors />
     </AboutStyle>
   )
 }
diff --git a/src/pages/components/Label.tsx b/src/pages/components/Label.tsx
index e9d6a598..f8349419 100644
--- a/src/pages/components/Label.tsx
+++ b/src/pages/components/Label.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
-import { Typography } from 'antd'
-const { Text } = Typography
+import Typography from '@mui/material/Typography'
+
 const StyledDiv = styled.div`
   display: inline-flex;
   width: 100%;
@@ -15,6 +15,6 @@ type LabelProps = {
 
 export const Label = ({ text }: LabelProps) => (
   <StyledDiv>
-    <Text>{text}</Text>
+    <Typography>{text}</Typography>
   </StyledDiv>
 )
diff --git a/src/pages/components/YoutubeModal.tsx b/src/pages/components/YoutubeModal.tsx
index 32549566..147c424a 100644
--- a/src/pages/components/YoutubeModal.tsx
+++ b/src/pages/components/YoutubeModal.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+// import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; //TODO:
 import { InfoCircleOutlined } from '@ant-design/icons'
 import { Modal } from 'antd'
 import './YotubeModal.scss'
diff --git a/src/pages/components/map-related/MapLayers/BusToolTip.tsx b/src/pages/components/map-related/MapLayers/BusToolTip.tsx
index 0f4771cd..19c644f6 100644
--- a/src/pages/components/map-related/MapLayers/BusToolTip.tsx
+++ b/src/pages/components/map-related/MapLayers/BusToolTip.tsx
@@ -7,7 +7,7 @@ import './BusToolTip.scss'
 import { getSiriRideWithRelated } from 'src/api/siriService'
 import { SiriRideWithRelatedPydanticModel } from 'open-bus-stride-client/openapi/models/SiriRideWithRelatedPydanticModel'
 import { useTranslation } from 'react-i18next'
-import { Spin } from 'antd'
+import CircularProgress from '@mui/material/CircularProgress'
 import cn from 'classnames'
 import CustomTreeView from '../../CustomTreeView'
 
@@ -35,7 +35,7 @@ export function BusToolTip({ position, icon }: BusToolTipProps) {
       {isLoading || !siriRide ? (
         <div className="loading">
           <span>{t('loading_routes')}</span>
-          <Spin />
+          <CircularProgress />
         </div>
       ) : (
         <>
diff --git a/src/pages/components/map-related/MapWithLocationsAndPath.tsx b/src/pages/components/map-related/MapWithLocationsAndPath.tsx
index e8001b0e..ecefe1a0 100644
--- a/src/pages/components/map-related/MapWithLocationsAndPath.tsx
+++ b/src/pages/components/map-related/MapWithLocationsAndPath.tsx
@@ -1,9 +1,9 @@
 import { MapContainer } from 'react-leaflet'
 import { Point } from 'src/pages/timeBasedMap'
+import IconButton from '@mui/material/IconButton'
+import OpenInFullRoundedIcon from '@mui/icons-material/OpenInFullRounded'
 import { MapProps } from './map-types'
 import { useCallback, useState } from 'react'
-import { Button } from 'antd'
-import { ExpandAltOutlined } from '@ant-design/icons'
 import '../../Map.scss'
 import { MapContent } from './MapContent'
 
@@ -18,13 +18,10 @@ export function MapWithLocationsAndPath({ positions, plannedRouteStops }: MapPro
 
   return (
     <div className={`map-info ${isExpanded ? 'expanded' : 'collapsed'}`}>
-      <Button
-        type="primary"
-        className="expand-button"
-        shape="circle"
-        onClick={toggleExpanded}
-        icon={<ExpandAltOutlined />}
-      />
+      <IconButton color="primary" className="expand-button" onClick={toggleExpanded}>
+        <OpenInFullRoundedIcon fontSize="large" />
+      </IconButton>
+
       <MapContainer center={position.loc} zoom={13} scrollWheelZoom={true}>
         <MapContent positions={positions} plannedRouteStops={plannedRouteStops} />
       </MapContainer>
diff --git a/src/pages/dashboard/DashboardPage.tsx b/src/pages/dashboard/DashboardPage.tsx
index 4bb68c1c..8586637b 100644
--- a/src/pages/dashboard/DashboardPage.tsx
+++ b/src/pages/dashboard/DashboardPage.tsx
@@ -10,7 +10,8 @@ import './DashboardPage.scss'
 import 'src/App.scss'
 import { PageContainer } from '../components/PageContainer'
 import { useTranslation } from 'react-i18next'
-import { Alert, Typography } from 'antd'
+import Typography from '@mui/material/Typography'
+import Alert from '@mui/material/Alert'
 import Grid from '@mui/material/Unstable_Grid2' // Grid version 2
 
 // Components
@@ -21,7 +22,6 @@ import WorstLinesChart from './WorstLinesChart/WorstLinesChart'
 import InfoYoutubeModal from '../components/YoutubeModal'
 
 // Declarations
-const { Title } = Typography
 const now = moment()
 
 const DashboardPage = () => {
@@ -32,17 +32,21 @@ const DashboardPage = () => {
 
   return (
     <PageContainer>
-      <Title className="page-title" level={3}>
+      <Typography className="page-title" variant="h4">
         {t('dashboard_page_title')}
         <InfoYoutubeModal
           label="Open video about this page"
           title={t('youtube_modal_info_title')}
           videoUrl="https://www.youtube.com/embed/bXg50_j_hTA?si=4rpSZwMRbMomE4g1"
         />
-      </Title>
-      <Alert message={t('dashboard_page_description')} type="info" />
+      </Typography>
+      <Alert severity="info" variant="outlined" sx={{ bgcolor: '#eaf5fe' }} icon={false}>
+        {t('dashboard_page_description')}
+      </Alert>
       {startDate > endDate ? (
-        <Alert closable showIcon message={t('bug_date_alert')} type="error" />
+        <Alert severity="error" variant="outlined" sx={{ bgcolor: '#feeaea' }}>
+          {t('bug_date_alert')}
+        </Alert>
       ) : null}
       <Grid
         container
diff --git a/src/pages/gaps/index.tsx b/src/pages/gaps/index.tsx
index af990f9e..76217f97 100644
--- a/src/pages/gaps/index.tsx
+++ b/src/pages/gaps/index.tsx
@@ -8,7 +8,7 @@ import LineNumberSelector from '../components/LineSelector'
 import { SearchContext } from '../../model/pageState'
 import { Gap, GapsList } from '../../model/gaps'
 import { getGapsAsync } from '../../api/gapsService'
-import { Spin } from 'antd'
+import CircularProgress from '@mui/material/CircularProgress'
 import RouteSelector from '../components/RouteSelector'
 import { NotFound } from '../components/NotFound'
 import { getRoutesAsync } from '../../api/gtfsService'
@@ -21,9 +21,8 @@ import Grid from '@mui/material/Unstable_Grid2' // Grid version 2
 import { INPUT_SIZE } from 'src/resources/sizes'
 import DisplayGapsPercentage from '../components/DisplayGapsPercentage'
 import axios from 'axios'
-import { Typography, Alert } from 'antd'
-
-const { Title } = Typography
+import Typography from '@mui/material/Typography'
+import Alert from '@mui/material/Alert'
 
 const Cell = styled.div`
   width: 120px;
@@ -117,10 +116,12 @@ const GapsPage = () => {
 
   return (
     <PageContainer>
-      <Title className="page-title" level={3}>
+      <Typography className="page-title" variant="h4">
         {t('gaps_page_title')}
-      </Title>
-      <Alert message={t('gaps_page_description')} type="info" />
+      </Typography>
+      <Alert severity="info" variant="outlined" sx={{ bgcolor: '#eaf5fe' }} icon={false}>
+        {t('gaps_page_description')}
+      </Alert>
       <Grid container spacing={2} sx={{ maxWidth: INPUT_SIZE }}>
         {/* choose date */}
         <Grid xs={4}>
@@ -159,7 +160,7 @@ const GapsPage = () => {
           {routesIsLoading && (
             <Row>
               <Label text={t('loading_routes')} />
-              <Spin />
+              <CircularProgress />
             </Row>
           )}
           {!routesIsLoading &&
@@ -178,7 +179,7 @@ const GapsPage = () => {
           {gapsIsLoading && (
             <Row>
               <Label text={t('loading_gaps')} />
-              <Spin />
+              <CircularProgress />
             </Row>
           )}
         </Grid>
diff --git a/src/pages/gapsPatterns/GapsPatternsPage.tsx b/src/pages/gapsPatterns/GapsPatternsPage.tsx
index f4c56af7..8016bf74 100644
--- a/src/pages/gapsPatterns/GapsPatternsPage.tsx
+++ b/src/pages/gapsPatterns/GapsPatternsPage.tsx
@@ -1,7 +1,8 @@
 import { useContext, useEffect, useState } from 'react'
 import './GapsPatternsPage.scss'
 import { Moment } from 'moment'
-import { Skeleton, Spin, Radio, Typography, RadioChangeEvent, Alert, Space } from 'antd'
+import { Skeleton, Radio, RadioChangeEvent, Space } from 'antd'
+import CircularProgress from '@mui/material/CircularProgress'
 import moment from 'moment/moment'
 import { useDate } from '../components/DateTimePicker'
 import { PageContainer } from '../components/PageContainer'
@@ -14,7 +15,8 @@ import RouteSelector from '../components/RouteSelector'
 import { SearchContext } from '../../model/pageState'
 import { getRoutesAsync } from '../../api/gtfsService'
 import Grid from '@mui/material/Unstable_Grid2' // Grid version 2
-
+import Typography from '@mui/material/Typography'
+import Alert from '@mui/material/Alert'
 import {
   Bar,
   CartesianGrid,
@@ -31,7 +33,6 @@ import { mapColorByExecution } from '../components/utils'
 import { useGapsList } from './useGapsList'
 import { DateSelector } from '../components/DateSelector'
 import { INPUT_SIZE } from 'src/resources/sizes'
-const { Title } = Typography
 import { useTranslation } from 'react-i18next'
 import Widget from 'src/shared/Widget'
 import InfoYoutubeModal from '../components/YoutubeModal'
@@ -175,20 +176,25 @@ const GapsPatternsPage = () => {
 
   return (
     <PageContainer>
-      <Title level={3}>
+      <Typography variant="h4">
         {t('gaps_patterns_page_title')}
         <InfoYoutubeModal
           label={t('open_video_about_this_page')}
           title={t('youtube_modal_info_title')}
           videoUrl="https://www.youtube-nocookie.com/embed?v=-C_rZlbHBmk&list=PL6Rh06rT7uiX1AQE-lm55hy-seL3idx3T&index=4"
         />
-      </Title>
+      </Typography>
       <Space direction="vertical" size="middle" style={{ marginBottom: '22px' }}>
-        <Alert message={t('gaps_patterns_page_description')} type="info" />
+        <Alert severity="info" variant="outlined" sx={{ bgcolor: '#eaf5fe' }} icon={false}>
+          {t('gaps_patterns_page_description')}
+        </Alert>
       </Space>
       {startDate > endDate ? (
-        <Alert closable showIcon message={t('bug_date_alert')} type="error" />
+        <Alert severity="error" variant="outlined" sx={{ bgcolor: '#feeaea' }}>
+          {t('bug_date_alert')}
+        </Alert>
       ) : null}
+
       <Grid container spacing={2} alignItems="center" sx={{ maxWidth: INPUT_SIZE }}>
         <Grid sm={4} className="hideOnMobile">
           <Label text={t('choose_dates')} />
@@ -239,7 +245,7 @@ const GapsPatternsPage = () => {
           {routesIsLoading && (
             <Row>
               <Label text={t('loading_routes')} />
-              <Spin />
+              <CircularProgress />
             </Row>
           )}
           {!routesIsLoading &&
diff --git a/src/pages/historicTimeline/index.tsx b/src/pages/historicTimeline/index.tsx
index 7be050f0..9fcf86d7 100644
--- a/src/pages/historicTimeline/index.tsx
+++ b/src/pages/historicTimeline/index.tsx
@@ -15,7 +15,9 @@ import RouteSelector from 'src/pages/components/RouteSelector'
 import { Label } from 'src/pages/components/Label'
 import { useTranslation } from 'react-i18next'
 import StopSelector from 'src/pages/components/StopSelector'
-import { Spin, Typography, Alert, Space } from 'antd'
+import Typography from '@mui/material/Typography'
+import Alert from '@mui/material/Alert'
+import CircularProgress from '@mui/material/CircularProgress'
 import { getSiriStopHitTimesAsync } from 'src/api/siriService'
 import { TimelineBoard } from 'src/pages/components/timeline/TimelineBoard'
 import { PageContainer } from '../components/PageContainer'
@@ -25,8 +27,6 @@ import moment from 'moment'
 import { DateSelector } from '../components/DateSelector'
 import Grid from '@mui/material/Unstable_Grid2' // Grid version 2
 
-const { Title } = Typography
-
 const StyledTimelineBoard = styled(TimelineBoard)`
   margin-top: ${MARGIN_MEDIUM * 3}px;
   margin-bottom: ${MARGIN_MEDIUM * 3}px;
@@ -140,10 +140,13 @@ const TimelinePage = () => {
 
   return (
     <PageContainer>
-      <Title level={3}>{t('timeline_page_title')}</Title>
-      <Space direction="vertical" size="middle" style={{ marginBottom: '22px' }}>
-        <Alert message={t('timeline_page_description')} type="info" />
-      </Space>
+      <Typography variant="h4" gutterBottom>
+        {t('timeline_page_title')}
+      </Typography>
+
+      <Alert severity="info" variant="outlined" sx={{ bgcolor: '#eaf5fe' }} icon={false}>
+        {t('timeline_page_description')}
+      </Alert>
 
       <Grid container spacing={2} sx={{ maxWidth: INPUT_SIZE }}>
         {/* choose date */}
@@ -183,7 +186,7 @@ const TimelinePage = () => {
           {routesIsLoading && (
             <Row>
               <Label text={t('loading_routes')} />
-              <Spin />
+              <CircularProgress />
             </Row>
           )}
           {!routesIsLoading &&
@@ -203,7 +206,7 @@ const TimelinePage = () => {
           {stopsIsLoading && (
             <Row>
               <Label text={t('loading_stops')} />
-              <Spin />
+              <CircularProgress />
             </Row>
           )}
           {!stopsIsLoading && stops && (
@@ -224,7 +227,7 @@ const TimelinePage = () => {
           {hitsIsLoading && (
             <Row>
               <Label text={t('loading_hits')} />
-              <Spin />
+              <CircularProgress />
             </Row>
           )}
         </Grid>
diff --git a/src/pages/lineProfile/LineProfile.tsx b/src/pages/lineProfile/LineProfile.tsx
index 61edcb86..2fd3877c 100644
--- a/src/pages/lineProfile/LineProfile.tsx
+++ b/src/pages/lineProfile/LineProfile.tsx
@@ -17,7 +17,8 @@ import { getRoutesAsync } from 'src/api/gtfsService'
 import { BusRoute } from 'src/model/busRoute'
 import { useSingleLineData } from 'src/hooks/useSingleLineData'
 import { FilterPositionsByStartTimeSelector } from '../components/FilterPositionsByStartTimeSelector'
-import { Spin, Tooltip } from 'antd'
+import { Tooltip } from 'antd'
+import CircularProgress from '@mui/material/CircularProgress'
 import './LineProfile.scss'
 
 const LineProfileWrapper = () => (
@@ -95,7 +96,7 @@ const LineProfile = () => {
           <div className="startTime">
             {locationsAreLoading && (
               <Tooltip title={t('loading_times_tooltip_content')}>
-                <Spin />
+                <CircularProgress />
               </Tooltip>
             )}
             <FilterPositionsByStartTimeSelector
diff --git a/src/pages/singleLineMap/index.tsx b/src/pages/singleLineMap/index.tsx
index 5f70af62..7ca2d2e8 100644
--- a/src/pages/singleLineMap/index.tsx
+++ b/src/pages/singleLineMap/index.tsx
@@ -15,7 +15,7 @@ import { CircularProgress, Tooltip } from '@mui/material'
 import { FilterPositionsByStartTimeSelector } from '../components/FilterPositionsByStartTimeSelector'
 import { PageContainer } from '../components/PageContainer'
 import { MapWithLocationsAndPath } from '../components/map-related/MapWithLocationsAndPath'
-import Title from 'antd/es/typography/Title'
+import Typography from '@mui/material/Typography'
 import InfoYoutubeModal from '../components/YoutubeModal'
 import { useSingleLineData } from 'src/hooks/useSingleLineData'
 
@@ -64,14 +64,14 @@ const SingleLineMapPage = () => {
 
   return (
     <PageContainer className="map-container">
-      <Title className="page-title" level={3}>
+      <Typography className="page-title" variant="h4">
         {t('singleline_map_page_title')}
         <InfoYoutubeModal
           label={t('open_video_about_this_page')}
           title={t('time_based_map_page_description')}
           videoUrl="https://www.youtube-nocookie.com/embed/bXg50_j_hTA?si=inyvqDylStvgNRA6&amp;start=93"
         />
-      </Title>
+      </Typography>
       <Grid container spacing={2} sx={{ maxWidth: INPUT_SIZE }}>
         <Grid container spacing={2} xs={12}>
           {/* choose date*/}
diff --git a/src/pages/timeBasedMap/index.tsx b/src/pages/timeBasedMap/index.tsx
index 7e846b8f..3b952583 100644
--- a/src/pages/timeBasedMap/index.tsx
+++ b/src/pages/timeBasedMap/index.tsx
@@ -2,8 +2,11 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { MapContainer, Marker, Polyline, Popup, TileLayer, useMap } from 'react-leaflet'
 import MarkerClusterGroup from 'react-leaflet-cluster'
 import { useTranslation } from 'react-i18next'
-import { Button, Spin, Typography, Alert, Space } from 'antd'
-import { ExpandAltOutlined } from '@ant-design/icons'
+import Alert from '@mui/material/Alert'
+import Typography from '@mui/material/Typography'
+import CircularProgress from '@mui/material/CircularProgress'
+import IconButton from '@mui/material/IconButton'
+import OpenInFullRoundedIcon from '@mui/icons-material/OpenInFullRounded'
 import moment from 'moment'
 import getAgencyList, { Agency } from 'src/api/agencyList'
 import useVehicleLocations from 'src/api/useVehicleLocations'
@@ -22,8 +25,6 @@ import { busIcon, busIconPath } from '../components/utils/BusIcon'
 import { BusToolTip } from 'src/pages/components/map-related/MapLayers/BusToolTip'
 import InfoYoutubeModal from '../components/YoutubeModal'
 
-const { Title } = Typography
-
 export interface Point {
   loc: [number, number]
   color: number
@@ -97,19 +98,19 @@ export default function TimeBasedMapPage() {
 
   return (
     <PageContainer className="map-container">
-      <Title className="page-title" level={3}>
+      <Typography variant="h4" className="page-title">
         {t('time_based_map_page_title')}
         <InfoYoutubeModal
           label={t('open_video_about_this_page')}
           title={t('youtube_modal_info_title')}
           videoUrl="https://www.youtube-nocookie.com/embed/bXg50_j_hTA?si=t8PiTrTA1budRZg-&amp;start=150"
         />
-      </Title>
+      </Typography>
       <Grid container spacing={2} sx={{ maxWidth: INPUT_SIZE }}>
         <Grid xs={12} className="hideOnMobile">
-          <Space direction="vertical" size="middle" style={{ marginBottom: '22px' }}>
-            <Alert message={t('time_based_map_page_description')} type="info" />
-          </Space>
+          <Alert severity="info" variant="outlined" sx={{ bgcolor: '#eaf5fe' }} icon={false}>
+            {t('time_based_map_page_description')}
+          </Alert>
         </Grid>
         {/* from date */}
         <Grid xs={2} className="hideOnMobile">
@@ -161,16 +162,12 @@ export default function TimeBasedMapPage() {
               .replace('YYY', moment(to).format('hh:mm A'))}
           </p>
         </Grid>
-        <Grid xs={1}>{isLoading && <Spin size="small" />}</Grid>
+        <Grid xs={1}>{isLoading && <CircularProgress size="20px" />}</Grid>
       </Grid>
       <div className={`map-info ${isExpanded ? 'expanded' : 'collapsed'}`}>
-        <Button
-          type="primary"
-          className="expand-button"
-          shape="circle"
-          onClick={toggleExpanded}
-          icon={<ExpandAltOutlined />}
-        />
+        <IconButton color="primary" className="expand-button" onClick={toggleExpanded}>
+          <OpenInFullRoundedIcon fontSize="large" />
+        </IconButton>
         <MapContainer center={position.loc} zoom={8} scrollWheelZoom={true}>
           <TileLayer
             attribution='&copy <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
diff --git a/src/shared/Widget.tsx b/src/shared/Widget.tsx
index 520632c6..2385f279 100644
--- a/src/shared/Widget.tsx
+++ b/src/shared/Widget.tsx
@@ -1,7 +1,12 @@
-import { Card } from 'antd'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
 
 const Widget = (props: { children: React.ReactNode }) => {
-  return <Card>{props.children}</Card>
+  return (
+    <Card>
+      <CardContent>{props.children} </CardContent>
+    </Card>
+  )
 }
 
 export default Widget