diff --git a/package.json b/package.json
index 3d853e0..ad83740 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,8 @@
     "@heroicons/react": "^2.1.5",
     "@tanstack/react-query": "^5.59.19",
     "@ugrc/layer-selector": "^6.2.9",
-    "@ugrc/utah-design-system": "^1.13.0",
+    "@ugrc/tailwind-preset": "^1.1.0",
+    "@ugrc/utah-design-system": "^1.14.0",
     "@ugrc/utilities": "^2.2.7",
     "firebase": "^11.0.1",
     "immer": "^10.1.1",
diff --git a/src/components/MapContainer.tsx b/src/components/MapContainer.tsx
index e0be23d..fdaaa2f 100644
--- a/src/components/MapContainer.tsx
+++ b/src/components/MapContainer.tsx
@@ -8,7 +8,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useMap } from './hooks';
 
 import '@ugrc/layer-selector/src/LayerSelector.css';
-import { Spinner } from '@ugrc/utah-design-system';
+import { BusyBar } from '@ugrc/utah-design-system';
 import config from '../config';
 
 type LayerFactory = {
@@ -111,9 +111,9 @@ export const MapContainer = ({
   return (
     <div ref={mapNode} className="size-full">
       {selectorOptions?.view && <LayerSelector {...selectorOptions}></LayerSelector>}
-      {mapView.current && isDrawing && (
-        <div className="absolute left-[22px] top-[90px]">
-          <Spinner />
+      {mapView.current && (
+        <div className="absolute left-0 right-0 top-0">
+          <BusyBar busy={isDrawing} />
         </div>
       )}
     </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 257cf1a..a5f5f22 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,3 +1,5 @@
+import ugrcPreset from '@ugrc/tailwind-preset';
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./node_modules/@ugrc/**/*.{tsx,jsx,js}', './index.html', './src/**/*.{tsx,jsx,js}'],
@@ -51,4 +53,5 @@ export default {
     },
   },
   plugins: [],
+  presets: [ugrcPreset],
 };