diff --git a/.vscode/settings.json b/.vscode/settings.json
index 3b6153d..6c7f886 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -27,6 +27,7 @@
     "plss",
     "PROJECTCATEGORYFUNDING",
     "sgid",
+    "shapefile",
     "sitla",
     "srid",
     "tagname",
diff --git a/package-lock.json b/package-lock.json
index 158ec87..a4469aa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11841,9 +11841,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
-      "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
diff --git a/search.html b/search.html
new file mode 100644
index 0000000..15aa896
--- /dev/null
+++ b/search.html
@@ -0,0 +1,5 @@
+<div class="agrc-container">
+  <noscript> You need to enable JavaScript to run this app. </noscript>
+  <div id="root"></div>
+  <script type="module" src="/src/mainSearch.tsx"></script>
+</div>
diff --git a/src/App.tsx b/src/App.tsx
index 4242f7d..08558dc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -100,7 +100,7 @@ export default function App() {
         <div className="relative flex flex-1 flex-col rounded border border-b-0 border-zinc-200 dark:border-0 dark:border-zinc-700">
           <div className="relative flex-1">
             <ErrorBoundary FallbackComponent={ErrorFallback}>
-              <MapContainer />
+              <MapContainer configuration="edit" />
             </ErrorBoundary>
             <Drawer
               type="tray"
diff --git a/src/AppSearch.tsx b/src/AppSearch.tsx
new file mode 100644
index 0000000..fcef981
--- /dev/null
+++ b/src/AppSearch.tsx
@@ -0,0 +1,24 @@
+import esriConfig from '@arcgis/core/config.js';
+
+import { ErrorBoundary } from 'react-error-boundary';
+import { AreaOfInterest, MapContainer } from './components';
+
+const ErrorFallback = ({ error }: { error: Error }) => {
+  return (
+    <div role="alert">
+      <p>Something went wrong:</p>
+      <pre style={{ color: 'red' }}>{error.message}</pre>
+    </div>
+  );
+};
+
+esriConfig.assetsPath = import.meta.env.MODE === 'production' ? '/wri/js/ugrc/assets' : '/js/ugrc/assets';
+
+export default function App() {
+  return (
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <AreaOfInterest />
+      <MapContainer configuration="search" />
+    </ErrorBoundary>
+  );
+}
diff --git a/src/components/AreaOfInterest.tsx b/src/components/AreaOfInterest.tsx
new file mode 100644
index 0000000..bfb49bd
--- /dev/null
+++ b/src/components/AreaOfInterest.tsx
@@ -0,0 +1,23 @@
+import { Button, ToggleButton } from '@ugrc/utah-design-system';
+import { useRef } from 'react';
+
+export const AreaOfInterest = () => {
+  const areaOfInterestNode = useRef<HTMLInputElement>(null);
+
+  return (
+    <div className="px-2">
+      <h2>Area of Interest</h2>
+      <div className="flex w-fit gap-2 py-3">
+        <span>
+          <ToggleButton onChange={(value) => (areaOfInterestNode.current!.value = value.toString())}>
+            Draw a polygon
+          </ToggleButton>
+        </span>
+        <span>
+          <Button isDisabled>Upload a shapefile</Button>
+        </span>
+      </div>
+      <input ref={areaOfInterestNode} id="aoiGeometry" type="text" className="hidden" />
+    </div>
+  );
+};
diff --git a/src/components/MapContainer.tsx b/src/components/MapContainer.tsx
index c37217d..4dcfe14 100644
--- a/src/components/MapContainer.tsx
+++ b/src/components/MapContainer.tsx
@@ -42,7 +42,7 @@ type SelectorOptions = {
   position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 };
 
-export const MapContainer = () => {
+export const MapContainer = ({ configuration }: { configuration: 'search' | 'edit' }) => {
   const mapNode = useRef<HTMLDivElement | null>(null);
   const mapComponent = useRef<EsriMap | null>(null);
   const mapView = useRef<MapView | null>(null);
@@ -101,7 +101,7 @@ export const MapContainer = () => {
     if (isReady) {
       // layers are stacked on top of each other in a reverse order from how they are listed
       // e.g. land ownership is on the very bottom and centroids are on the very top
-      addLayers([
+      const referenceLayers = [
         landOwnership,
         plss,
         streams,
@@ -114,14 +114,18 @@ export const MapContainer = () => {
         forestService,
         sageGrouse,
         stewardship,
-        polygons,
-        lines,
-        points,
-        centroids,
-      ]);
+      ];
+      const operationalLayers = [polygons, lines, points, centroids];
+
+      if (configuration === 'search') {
+        operationalLayers.forEach((x) => (x.visible = false));
+        addLayers(operationalLayers);
+      } else {
+        addLayers(referenceLayers.concat(operationalLayers));
+      }
     }
     setMapView(mapView.current!);
-  }, [isReady, mapView, addLayers, setMapView]);
+  }, [isReady, mapView, addLayers, setMapView, configuration]);
 
   return (
     <>
diff --git a/src/components/index.ts b/src/components/index.ts
index c74121d..a261684 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,4 @@
+export * from './AreaOfInterest.tsx';
 export * from './CentroidToggle.tsx';
 export * from './FeatureData.tsx';
 export * from './Loaders.tsx';
diff --git a/src/mainSearch.tsx b/src/mainSearch.tsx
new file mode 100644
index 0000000..b2857cd
--- /dev/null
+++ b/src/mainSearch.tsx
@@ -0,0 +1,14 @@
+import '@arcgis/core/assets/esri/themes/light/main.css';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './AppSearch';
+import { MapProvider } from './components/contexts';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <MapProvider>
+      <App />
+    </MapProvider>
+  </React.StrictMode>,
+);
diff --git a/vite.config.ts b/vite.config.ts
index 1f59789..b262680 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -17,6 +17,7 @@ export default defineConfig(({ mode }) => {
         input: {
           main: resolve(__dirname, 'map.html'),
           dev: resolve(__dirname, 'index.html'),
+          search: resolve(__dirname, 'search.html'),
         },
       },
     },