diff --git a/ui/src/app/airport/[icao]/page.tsx b/ui/src/app/airport/[icao]/page.tsx
index 6aad27f..9513297 100644
--- a/ui/src/app/airport/[icao]/page.tsx
+++ b/ui/src/app/airport/[icao]/page.tsx
@@ -1,14 +1,31 @@
-import { getAirport } from '@/api/airport';
-import Link from 'next/link';
+'use client';
 
-export default async function Page({ params }: { params: { icao: string } }) {
-  const { data: airport } = await getAirport({ icao: params.icao });
-  return (
-    <>
-      <div className=''>
-        <h3 className=''>{airport.full_name}</h3>
-        <Link href={'/'}>Back</Link>
-      </div>
-    </>
-  );
+import { getAirport } from '@/api/airport';
+import { Airport } from '@/api/airport.types';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+
+export default function Page({ params }: { params: { icao: string } }) {
+  const [airport, setAirport] = useState<Airport | undefined>(undefined);
+
+  useEffect(() => {
+    async function loadAirport() {
+      const { data: airport } = await getAirport({ icao: params.icao });
+      setAirport(airport);
+    }
+    loadAirport();
+  }, []);
+
+  if (airport) {
+    return (
+      <>
+        <div className=''>
+          <h3 className=''>{airport.full_name}</h3>
+          <Link href={'/'}>Back</Link>
+        </div>
+      </>
+    );
+  } else {
+    return <></>;
+  }
 }
diff --git a/ui/src/app/page.tsx b/ui/src/app/page.tsx
index 5685dc2..4761a4e 100644
--- a/ui/src/app/page.tsx
+++ b/ui/src/app/page.tsx
@@ -3,4 +3,5 @@ import Metar from '@/components/Metars';
 
 export default function Page() {
   return <Metar />;
+  // return <></>;
 }
diff --git a/ui/src/components/Metars/MapTiles.tsx b/ui/src/components/Metars/MapTiles.tsx
index e051acf..e1a490b 100644
--- a/ui/src/components/Metars/MapTiles.tsx
+++ b/ui/src/components/Metars/MapTiles.tsx
@@ -8,7 +8,7 @@ import { useEffect, useState } from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { Marker, TileLayer, Tooltip, useMap, useMapEvents } from 'react-leaflet';
 import MetarModal from './MetarModal';
-import { BsCircle, BsCircleFill } from 'react-icons/bs';
+import { Avatar, MantineProvider } from '@mantine/core';
 
 export default function MapTiles() {
   const [isOpen, setIsOpen] = useState(false);
@@ -60,20 +60,10 @@ export default function MapTiles() {
   }
 
   function iconSize() {
-    if (zoomLevel <= 4) {
-      return 'text-xs';
-    } else if (zoomLevel <= 5) {
-      return 'text-sm';
-    } else if (zoomLevel <= 6) {
-      return 'text-base';
-    } else if (zoomLevel <= 7) {
-      return 'text-lg';
-    } else if (zoomLevel <= 9) {
-      return 'text-2xl';
-    } else if (zoomLevel <= 11) {
-      return 'text-3xl';
-    } else if (zoomLevel >= 12) {
-      return 'text-4xl';
+    if (zoomLevel <= 5) {
+      return 'xs';
+    } else {
+      return 'sm';
     }
   }
 
@@ -81,46 +71,56 @@ export default function MapTiles() {
     if (airport.metar?.flight_category == 'VFR') {
       return new DivIcon({
         html: ReactDOMServer.renderToString(
-          <div>
-            <BsCircle className={`${iconSize()} rounded-full bg-emerald-700`} />
-            <span className={`${iconSize()} text-white`}>V</span>
-          </div>
+          <MantineProvider>
+            <Avatar variant='filled' color='green' radius='xl' size={iconSize()}>
+              V
+            </Avatar>
+          </MantineProvider>
         ),
         className: 'metar-marker-icon'
       });
     } else if (airport.metar?.flight_category == 'MVFR') {
       return new DivIcon({
         html: ReactDOMServer.renderToString(
-          <div>
-            <BsCircle className={`${iconSize()} rounded-full bg-blue-700`} />
-            <span className={`${iconSize()} text-white`}>M</span>
-          </div>
+          <MantineProvider>
+            <Avatar variant='filled' color='blue' radius='xl' size={iconSize()}>
+              M
+            </Avatar>
+          </MantineProvider>
         ),
         className: 'metar-marker-icon'
       });
     } else if (airport.metar?.flight_category == 'IFR') {
       return new DivIcon({
         html: ReactDOMServer.renderToString(
-          <div>
-            <BsCircle className={`${iconSize()} rounded-full bg-red-700`} />
-            <span className={`${iconSize()} text-white`}>I</span>
-          </div>
+          <MantineProvider>
+            <Avatar variant='filled' color='red' radius='xl' size={iconSize()}>
+              I
+            </Avatar>
+          </MantineProvider>
         ),
         className: 'metar-marker-icon'
       });
     } else if (airport.metar?.flight_category == 'LIFR') {
       return new DivIcon({
         html: ReactDOMServer.renderToString(
-          <div>
-            <BsCircle className={`${iconSize()} rounded-full bg-purple-700`} />
-            <span className={`${iconSize()} text-white`}>L</span>
-          </div>
+          <MantineProvider>
+            <Avatar variant='filled' color='purple' radius='xl' size={iconSize()}>
+              L
+            </Avatar>
+          </MantineProvider>
         ),
         className: 'metar-marker-icon'
       });
     } else {
       return new DivIcon({
-        html: ReactDOMServer.renderToString(<BsCircleFill className={`text-black`} />),
+        html: ReactDOMServer.renderToString(
+          <MantineProvider>
+            <Avatar variant='filled' color='black' radius='xl' size={iconSize()}>
+              U
+            </Avatar>
+          </MantineProvider>
+        ),
         className: 'metar-marker-icon'
       });
     }
diff --git a/ui/src/components/Metars/MetarMap.tsx b/ui/src/components/Metars/MetarMap.tsx
index fb5310c..0360c5b 100644
--- a/ui/src/components/Metars/MetarMap.tsx
+++ b/ui/src/components/Metars/MetarMap.tsx
@@ -2,8 +2,9 @@
 
 import { MapContainer } from 'react-leaflet';
 import MapTiles from './MapTiles';
+import './metars.css';
 
-export default function Map({ className = '' }: { className?: string }) {
+export default function Map() {
   return (
     <>
       <MapContainer
@@ -13,7 +14,7 @@ export default function Map({ className = '' }: { className?: string }) {
         minZoom={3} // Zoomed out
         id='map-container'
         style={{ height: '94.5vh' }}
-        className={`${className} overflow-y-hidden overflow-x-hidden`}
+        className={`overflow-y-hidden overflow-x-hidden`}
         attributionControl={false}
       >
         <MapTiles />
diff --git a/ui/src/components/Metars/MetarModal.tsx b/ui/src/components/Metars/MetarModal.tsx
index ef0e8c7..76ed111 100644
--- a/ui/src/components/Metars/MetarModal.tsx
+++ b/ui/src/components/Metars/MetarModal.tsx
@@ -5,9 +5,16 @@ import { Metar } from '@/api/metar.types';
 import { FaArrowsSpin, FaLocationArrow } from 'react-icons/fa6';
 import Link from 'next/link';
 import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
-import { BsFillCloudRainFill, BsFillCloudRainHeavyFill, BsFillCloudSleetFill, BsFillCloudSnowFill, BsQuestionLg } from 'react-icons/bs';
+import {
+  BsFillCloudRainFill,
+  BsFillCloudRainHeavyFill,
+  BsFillCloudSleetFill,
+  BsFillCloudSnowFill,
+  BsQuestionLg
+} from 'react-icons/bs';
 import { useState } from 'react';
 import { Grid, Modal, Tooltip } from '@mantine/core';
+import './metars.css';
 
 interface MetarModalProps {
   airport: Airport;
@@ -23,31 +30,17 @@ export default function MetarModal({ airport, isOpen, onClose }: MetarModalProps
   }
 
   return (
-    <Modal
-      title={
-        <span className='flex justify-between'>
-          <Link href={`/airport/${airport.icao}`}>
-            {airport.icao} {airport.full_name}
-          </Link>
-          {isFavorite ? (
-            <AiFillStar
-              size={24}
-              className='cursor-pointer text-blue-500 hover:text-blue-400'
-              onClick={() => handleFavorite(false)}
-            />
-          ) : (
-            <AiOutlineStar
-              size={24}
-              className='cursor-pointer text-blue-500 hover:text-blue-400'
-              onClick={() => handleFavorite(true)}
-            />
-          )}
-        </span>
-      }
-      opened={isOpen}
-      onClose={onClose}
-      className='select-none'
-    >
+    <Modal opened={isOpen} onClose={onClose} withCloseButton={false} size={'55rem'} className='modal'>
+      <span className='title'>
+        <Link href={`/airport/${airport.icao}`}>
+          {airport.icao} {airport.full_name}
+        </Link>
+        {isFavorite ? (
+          <AiFillStar size={24} className='star' onClick={() => handleFavorite(false)} />
+        ) : (
+          <AiOutlineStar size={24} className='star' onClick={() => handleFavorite(true)} />
+        )}
+      </span>
       <div className='min-w-0 flex-1'>
         <hr />
         {airport.metar && <MetarInfo metar={airport.metar} />}
diff --git a/ui/src/components/Metars/index.tsx b/ui/src/components/Metars/index.tsx
index abd98e3..dc6c4a2 100644
--- a/ui/src/components/Metars/index.tsx
+++ b/ui/src/components/Metars/index.tsx
@@ -1,7 +1,7 @@
 import { Metar } from '@/api/metar.types';
 import dynamic from 'next/dynamic';
 
-export default async function Metar({ className = '' }: { className?: string }) {
+export default async function Metar() {
   const Map = dynamic(() => import('@/components/Metars/MetarMap'), {
     loading: () => (
       <div className='grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8'>
@@ -12,5 +12,5 @@ export default async function Metar({ className = '' }: { className?: string })
     ),
     ssr: false
   });
-  return <Map className={className} />;
+  return <Map />;
 }
diff --git a/ui/src/components/Metars/metars.css b/ui/src/components/Metars/metars.css
new file mode 100644
index 0000000..0755991
--- /dev/null
+++ b/ui/src/components/Metars/metars.css
@@ -0,0 +1,18 @@
+/* https://stackoverflow.com/questions/55291179/how-to-overlay-content-on-react-leaflet-z-index-problem */
+.leaflet-control { z-index: 0 !important}
+.leaflet-pane { z-index: 0 !important}
+.leaflet-top, .leaflet-bottom {z-index: 0 !important}
+
+.modal {
+  user-select: none;
+}
+
+.modal .title {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.modal .star {
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/ui/src/components/Topbar/index.tsx b/ui/src/components/Topbar/index.tsx
index 17df695..7b190be 100644
--- a/ui/src/components/Topbar/index.tsx
+++ b/ui/src/components/Topbar/index.tsx
@@ -4,13 +4,14 @@ import Link from 'next/link';
 import { AiOutlineUser } from 'react-icons/ai';
 import { useState } from 'react';
 import { getAirports } from '@/api/airport';
-import { useRouter } from 'next/navigation';
+// import { useRouter } from 'next/navigation';
 import { Autocomplete, Avatar } from '@mantine/core';
+import './topbar.css';
 
 export default function Topbar() {
   const [searchValue, setSearchValue] = useState('');
   const [airports, setAirports] = useState<{ key: string; value: string; label: string }[]>([]);
-  const router = useRouter();
+  // const router = useRouter();
 
   async function onChange(value: string) {
     setSearchValue(value);
@@ -24,28 +25,30 @@ export default function Topbar() {
     );
   }
 
-  function onClick(value: string) {
-    router.push(`/airport/${value}`);
-  }
+  // function onClick(value: string) {
+  //   router.push(`/airport/${value}`);
+  // }
 
   return (
-    <nav style={{ display: 'flex', justifyContent: 'space-between' }}>
-      <div style={{ display: 'flex' }}>
-        <Link href={'/'} style={{ paddingLeft: '2em', paddingRight: '2em', margin: 'auto' }}>
+    <nav className='navbar'>
+      <div className='left'>
+        <Link href={'/'} className='title'>
           <span>Aviation Weather</span>
         </Link>
-        <Autocomplete
-          autoFocus
-          radius='xl'
-          placeholder='Search Airports...'
-          limit={10}
-          data={airports}
-          value={searchValue}
-          onChange={onChange}
-          onBlur={() => setSearchValue('')}
-        />
+        <div className='search'>
+          <Autocomplete
+            autoFocus
+            radius='xl'
+            placeholder='Search Airports...'
+            limit={10}
+            data={airports}
+            value={searchValue}
+            onChange={onChange}
+            onBlur={() => setSearchValue('')}
+          />
+        </div>
       </div>
-      <Link className='' href={'/profile'}>
+      <Link className='avatar' href={'/profile'}>
         <Avatar>
           <AiOutlineUser />
         </Avatar>
diff --git a/ui/src/components/Topbar/topbar.css b/ui/src/components/Topbar/topbar.css
new file mode 100644
index 0000000..62f7ed4
--- /dev/null
+++ b/ui/src/components/Topbar/topbar.css
@@ -0,0 +1,19 @@
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  height: 46px;
+}
+
+.navbar .left {
+  display: flex;
+}
+
+.navbar .title {
+  padding-left: 2em;
+  padding-right: 2em;
+  margin: auto;
+}
+
+.navbar .left .search {
+  margin: auto;
+}
\ No newline at end of file