diff --git a/afrc/media/js/views/components/plugins/afrc-search.js b/afrc/media/js/views/components/plugins/afrc-search.js
new file mode 100644
index 0000000..e453741
--- /dev/null
+++ b/afrc/media/js/views/components/plugins/afrc-search.js
@@ -0,0 +1,31 @@
+import ko from 'knockout';
+import createVueApplication from 'arches/arches/app/media/js/utils/create-vue-application';
+
+import { definePreset } from '@primevue/themes';
+import Aura from '@primevue/themes/aura';
+
+import Search from '@/afrc/Search/SearchPage.vue';
+import AFRCSEarchTemplate from 'templates/views/components/plugins/afrc-search.htm';
+
+ko.components.register('afrc-search', {
+    viewModel: function() {
+        const EditableReportPreset = definePreset(Aura, {
+            components: {
+                toast: {
+                    summary: { fontSize: '1.5rem' },
+                    detail: { fontSize: '1.25rem' },
+                },
+            },
+        });
+        
+        const EditableReportTheme = {
+            theme: {
+                preset: EditableReportPreset,
+            },
+        };
+        createVueApplication(Search, EditableReportTheme).then(vueApp => {
+            vueApp.mount('#search-mounting-point');
+        });
+    },
+    template: AFRCSEarchTemplate,
+});
\ No newline at end of file
diff --git a/afrc/media/js/views/search.js b/afrc/media/js/views/search.js
deleted file mode 100644
index 5af9874..0000000
--- a/afrc/media/js/views/search.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import createVueApplication from 'arches/arches/app/media/js/utils/create-vue-application';
-
-import { definePreset } from '@primevue/themes';
-import Aura from '@primevue/themes/aura';
-
-import Search from '@/afrc/Search/SearchPage.vue';
-
-const EditableReportPreset = definePreset(Aura, {
-    components: {
-        toast: {
-            summary: { fontSize: '1.5rem' },
-            detail: { fontSize: '1.25rem' },
-        },
-    },
-});
-
-const EditableReportTheme = {
-    theme: {
-        preset: EditableReportPreset,
-    },
-};
-
-createVueApplication(Search, EditableReportTheme).then(vueApp => {
-    vueApp.mount('#search-mounting-point');
-});
diff --git a/afrc/migrations/0002_plugin.py b/afrc/migrations/0002_plugin.py
new file mode 100644
index 0000000..6e8e64e
--- /dev/null
+++ b/afrc/migrations/0002_plugin.py
@@ -0,0 +1,30 @@
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("afrc", "0001_initial"),
+    ]
+
+    forward_sql = """
+        INSERT INTO public.plugins(
+            pluginid, name, icon, component, componentname, config, slug, sortorder, helptemplate)
+            VALUES ('929e1b9b-a9dc-4603-ae0a-f129d89d8b66', 
+            '{"en": "Search Reference Collections"}', 
+            'fa fa-search', 
+            'views/components/plugins/afrc-search', 
+            'afrc-search', 
+            '{"show": true, "description": {"en": null}, "i18n_properties": ["description"]}', 
+            'afrc-search', 
+            1, 
+            ''
+        );
+    """
+    reverse_sql = """
+        DELETE FROM public.plugins WHERE pluginid = '929e1b9b-a9dc-4603-ae0a-f129d89d8b66';
+    """
+
+    operations = [
+        migrations.RunSQL(forward_sql, reverse_sql),
+    ]
diff --git a/afrc/src/afrc/Search/SearchPage.vue b/afrc/src/afrc/Search/SearchPage.vue
index 0a57e34..d7e367a 100644
--- a/afrc/src/afrc/Search/SearchPage.vue
+++ b/afrc/src/afrc/Search/SearchPage.vue
@@ -6,21 +6,16 @@ import { useGettext } from "vue3-gettext";
 import Toast from "primevue/toast";
 import { useToast } from "primevue/usetoast";
 import Button from "primevue/button";
-import {
-    DEFAULT_ERROR_TOAST_LIFE,
-    ERROR,
-} from "@/afrc/Search/constants.ts";
+import { DEFAULT_ERROR_TOAST_LIFE, ERROR } from "@/afrc/Search/constants.ts";
+
+import arches from "arches";
 
 import SimpleSearchFilter from "@/afrc/Search/components/SimpleSearchFilter.vue";
 import SearchResultItem from "@/afrc/Search/components/SearchResultItem.vue";
 import InteractiveMap from "@/afrc/Search/components/InteractiveMap/InteractiveMap.vue";
 import { fetchMapData } from "@/afrc/Search/api.ts";
 import type { GenericObject } from "@/afrc/Search/types";
-import type {
-    Basemap,
-    MapLayer,
-    MapSource,
-} from "@/afrc/Search/types.ts";
+import type { Basemap, MapLayer, MapSource } from "@/afrc/Search/types.ts";
 
 let query = getQueryObject(null);
 let queryString = ref(JSON.stringify(query));
@@ -94,7 +89,7 @@ const doQuery = function () {
 
     const qs = new URLSearchParams(queryObj);
 
-    fetch("search/resources" + "?" + qs.toString())
+    fetch(arches.urls.search_results + "?" + qs.toString())
         .then((response) => response.json())
         .then((data) => {
             console.log(data);
@@ -153,18 +148,19 @@ async function fetchSystemMapData() {
                 layer.maplayerid !== "6b9d3c6a-60a4-4630-b4f8-4c5159b68cec",
         );
 
-        layers.filter((layer: MapLayer) => !layer.isoverlay).forEach((layer: MapLayer) => {
-            basemaps.value.push({
-                name: layer.name, 
-                active: layer.addtomap, 
-                value: layer.name, 
-                id: layer.name,
-                url: "https://tiles.openfreemap.org/styles/positron"
+        layers
+            .filter((layer: MapLayer) => !layer.isoverlay)
+            .forEach((layer: MapLayer) => {
+                basemaps.value.push({
+                    name: layer.name,
+                    active: layer.addtomap,
+                    value: layer.name,
+                    id: layer.name,
+                    url: "https://tiles.openfreemap.org/styles/positron",
+                });
             });
-        });
 
         sources.value = mapData.map_sources;
-
     } catch (error) {
         toast.add({
             severity: ERROR,
@@ -175,7 +171,7 @@ async function fetchSystemMapData() {
     }
 }
 
-onMounted(async () =>{
+onMounted(async () => {
     doQuery();
     await fetchSystemMapData();
     dataLoaded.value = true;
@@ -183,7 +179,7 @@ onMounted(async () =>{
 </script>
 
 <template>
-    <div class="container">
+    <div class="afrc-container">
         <!-- Main Content Section -->
         <header>
             <SimpleSearchFilter
@@ -193,25 +189,27 @@ onMounted(async () =>{
             <div class="view-buttons">
                 <Button
                     :class="{ active: !showMap }"
-                    variant="outlined"
                     label="terms"
+                    severity="secondary"
                     icon="pi pi-file"
                     icon-pos="top"
+                    :outlined="!showMap"
                     @click="showMap = false"
                 />
                 <Button
                     :class="{ active: showMap }"
-                    variant="outlined"
                     label="map"
+                    severity="secondary"
                     icon="pi pi-map"
                     icon-pos="top"
+                    :outlined="showMap"
                     @click="showMap = true"
                 />
             </div>
         </header>
 
         <main>
-            <section class="search-results-panel">
+            <section class="afrc-search-results-panel">
                 <div class="result-count">{{ resultsCount }} Results</div>
                 <div class="search-result-list">
                     <SearchResultItem
@@ -270,12 +268,13 @@ onMounted(async () =>{
 :root {
     font-size: 16px;
 }
-.container {
+.afrc-container {
     font-family: Arial, sans-serif;
     background-color: #f8f8f8;
     line-height: 1.6;
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
 }
 main {
     display: flex;
@@ -293,7 +292,7 @@ header {
     gap: 5px;
     margin-left: 20px;
 }
-.search-results-panel {
+section.afrc-search-results-panel {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
@@ -306,7 +305,7 @@ header {
     gap: 20px;
 }
 .result-count {
-    font-size: 1rem;
+    font-size: 1.6rem;
     margin: 0px;
     margin-bottom: 15px;
 }
diff --git a/afrc/src/afrc/Search/api.ts b/afrc/src/afrc/Search/api.ts
index ec01685..2654d2f 100644
--- a/afrc/src/afrc/Search/api.ts
+++ b/afrc/src/afrc/Search/api.ts
@@ -62,5 +62,3 @@ export const createRequest = (url: string) => {
 
 export const fetchSettings = createRequest(arches.urls["api-settings"]);
 export const fetchMapData = createRequest(arches.urls["api-map-data"]);
-
-
diff --git a/afrc/src/afrc/Search/components/InteractiveMap/InteractiveMap.vue b/afrc/src/afrc/Search/components/InteractiveMap/InteractiveMap.vue
index 4f2a963..2dfef91 100644
--- a/afrc/src/afrc/Search/components/InteractiveMap/InteractiveMap.vue
+++ b/afrc/src/afrc/Search/components/InteractiveMap/InteractiveMap.vue
@@ -12,10 +12,7 @@ import BasemapControls from "@/afrc/Search/components/InteractiveMap/components/
 
 import { fetchSettings } from "@/afrc/Search/api.ts";
 
-import {
-    DEFAULT_ERROR_TOAST_LIFE,
-    ERROR,
-} from "@/afrc/Search/constants.ts";
+import { DEFAULT_ERROR_TOAST_LIFE, ERROR } from "@/afrc/Search/constants.ts";
 
 import type { Ref } from "vue";
 import type { Feature, Map } from "maplibre-gl";
@@ -72,7 +69,6 @@ provide("overlays", props.overlays);
 provide("basemaps", props.basemaps);
 provide("selectedDrawnFeature", selectedDrawnFeature);
 
-
 watch(
     () => props.basemaps,
     (updatedBasemaps) => {
diff --git a/afrc/src/afrc/Search/components/InteractiveMap/components/InteractionsDrawer.vue b/afrc/src/afrc/Search/components/InteractiveMap/components/InteractionsDrawer.vue
index 4350d5a..ed60591 100644
--- a/afrc/src/afrc/Search/components/InteractiveMap/components/InteractionsDrawer.vue
+++ b/afrc/src/afrc/Search/components/InteractiveMap/components/InteractionsDrawer.vue
@@ -11,10 +11,7 @@ import {
 
 import type { Component, Ref } from "vue";
 import type { Map } from "maplibre-gl";
-import type {
-    MapInteractionItem,
-    Settings,
-} from "@/afrc/Search/types.ts";
+import type { MapInteractionItem, Settings } from "@/afrc/Search/types.ts";
 
 const props = defineProps<{
     map: Map;
diff --git a/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue b/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
index 1a0facf..8d6f06f 100644
--- a/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
+++ b/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
@@ -132,7 +132,8 @@ watch(
         if (selected) {
             updateFeatureSelection(selected as Ref<string[]>);
         }
-    }, {deep: true}
+    },
+    { deep: true },
 );
 
 watch(
@@ -199,25 +200,28 @@ async function fitBoundsOfFeatures(features: FeatureCollection) {
 function updateFeatureSelection(selected: Ref<string[]>) {
     const layers: Array<string> = [];
     overlays.forEach((overlay) => {
-        layers.push(...overlay.layerdefinitions.map(
-            (layerDefinition) => layerDefinition.id,
-        ));
+        layers.push(
+            ...overlay.layerdefinitions.map(
+                (layerDefinition) => layerDefinition.id,
+            ),
+        );
     });
-    const features = map.value!.queryRenderedFeatures({layers:layers});
-    features.forEach(feature => {
-        const featureSelected = selected.value.includes(feature.properties?.resourceinstanceid);
+    const features = map.value!.queryRenderedFeatures({ layers: layers });
+    features.forEach((feature) => {
+        const featureSelected = selected.value.includes(
+            feature.properties?.resourceinstanceid,
+        );
         map.value!.setFeatureState(
             {
                 source: "referencecollections",
                 sourceLayer: "referencecollections",
                 id: feature.id,
             },
-            { selected: featureSelected }
+            { selected: featureSelected },
         );
     });
 }
 
-
 function addBufferLayer() {
     map.value!.addSource(BUFFER_LAYER_ID, {
         type: "geojson",
@@ -290,9 +294,7 @@ function createMap() {
 }
 
 function updateBasemap(basemap: Basemap) {
-    map.value!.setStyle(
-        basemap.url,
-    );
+    map.value!.setStyle(basemap.url);
 
     map.value!.once(IDLE, () => {
         updateMapOverlays(overlays);
@@ -384,7 +386,12 @@ function addOverlayToMap(overlay: MapLayer) {
                 clickedCoordinates.value = [e.lngLat.lng, e.lngLat.lat];
                 clickedFeatures.value = features;
                 resultsSelected.value = [];
-                const uniqueResourceIds = new Set(features.map((feature) => feature.properties?.resourceinstanceid as string));
+                const uniqueResourceIds = new Set(
+                    features.map(
+                        (feature) =>
+                            feature.properties?.resourceinstanceid as string,
+                    ),
+                );
                 resultsSelected.value = Array.from(uniqueResourceIds);
             } else {
                 resultsSelected.value = [];
diff --git a/afrc/src/afrc/Search/components/InteractiveMap/components/MapFilter/components/BufferControls.vue b/afrc/src/afrc/Search/components/InteractiveMap/components/MapFilter/components/BufferControls.vue
index 13c8547..c94864a 100644
--- a/afrc/src/afrc/Search/components/InteractiveMap/components/MapFilter/components/BufferControls.vue
+++ b/afrc/src/afrc/Search/components/InteractiveMap/components/MapFilter/components/BufferControls.vue
@@ -6,10 +6,7 @@ import MapboxDraw from "@mapbox/mapbox-gl-draw";
 
 import type { Feature, Map } from "maplibre-gl";
 import type { PropType, Ref } from "vue";
-import {
-    DRAW_UPDATE_EVENT,
-    METERS,
-} from "@/afrc/Search/constants.ts";
+import { DRAW_UPDATE_EVENT, METERS } from "@/afrc/Search/constants.ts";
 
 const { $gettext } = useGettext();
 
diff --git a/afrc/src/afrc/Search/components/SearchResultItem.vue b/afrc/src/afrc/Search/components/SearchResultItem.vue
index c7ec503..f4cdcc4 100644
--- a/afrc/src/afrc/Search/components/SearchResultItem.vue
+++ b/afrc/src/afrc/Search/components/SearchResultItem.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import Button from "primevue/button";
 import { inject } from "vue";
 import type { Ref } from "vue";
 
+import Button from "primevue/button";
+
+import arches from "arches";
+
 const resultsSelected = inject("resultsSelected") as Ref<string[]>;
 
 const props = defineProps({
@@ -19,16 +22,17 @@ function selectResult(resourceid: string) {
 function clearResult() {
     resultsSelected.value = [];
 }
-
 </script>
 
 <template>
-    <section 
-        class="result" 
-        :class="{ 
-            hovered: resultsSelected.includes(searchResult._source.resourceinstanceid)
+    <section
+        class="result"
+        :class="{
+            hovered: resultsSelected.includes(
+                searchResult._source.resourceinstanceid,
+            ),
         }"
-        @mouseenter="selectResult(searchResult._source.resourceinstanceid)" 
+        @mouseenter="selectResult(searchResult._source.resourceinstanceid)"
         @mouseleave="clearResult"
     >
         <div class="image-placeholder">
@@ -46,11 +50,16 @@ function clearResult() {
             <div class="actions">
                 <Button
                     label="...show more"
-                    variant="link"
+                    severity="secondary"
+                    text
                 />
                 <Button
                     label="edit"
-                    variant="link"
+                    severity="secondary"
+                    text
+                    as="a"
+                    target="_blank"
+                    :href="'./' + arches.urls.resource + '/' + searchResult._id"
                 />
             </div>
         </div>
@@ -69,7 +78,7 @@ function clearResult() {
     border: 1px solid rgb(139 145 252);
 }
 .result .result-content {
-    height: 10rem;
+    height: 16rem;
     overflow: hidden;
     padding-inline-start: 10px;
 }
@@ -83,9 +92,9 @@ function clearResult() {
     margin-bottom: 10px;
 }
 .result .image-placeholder {
-    width: 10rem;
-    height: 10rem;
-    min-width: 10rem;
+    width: 16rem;
+    height: 16rem;
+    min-width: 16rem;
     background-color: #eee;
 }
 .actions {
diff --git a/afrc/src/afrc/Search/components/SimpleSearchFilter.vue b/afrc/src/afrc/Search/components/SimpleSearchFilter.vue
index 1548201..1f8ecaa 100644
--- a/afrc/src/afrc/Search/components/SimpleSearchFilter.vue
+++ b/afrc/src/afrc/Search/components/SimpleSearchFilter.vue
@@ -4,6 +4,8 @@ import { ref, watch } from "vue";
 import AutoComplete from "primevue/autocomplete";
 import type { AutoCompleteCompleteEvent } from "primevue/autocomplete";
 
+import arches from "arches";
+
 import type { GenericObject } from "@/afrc/Search/types";
 
 const componentName = "term-filter";
@@ -36,7 +38,7 @@ function search(event: AutoCompleteCompleteEvent) {
     var queryString = new URLSearchParams();
     queryString.set("q", event.query);
     queryString.set("lang", "*");
-    fetch("search/terms" + "?" + queryString.toString())
+    fetch(arches.urls.search_terms + "?" + queryString.toString())
         .then((response) => response.json())
         .then((data) => {
             Object.keys(data).forEach((key) => {
@@ -85,6 +87,7 @@ const updateQuery = function () {
             option-group-label="label"
             option-group-children="items"
             placeholder="find ..."
+            input-class="autocomplete-input"
             @complete="search"
         >
             <template #optiongroup="slotProps">
@@ -110,4 +113,8 @@ const updateQuery = function () {
     background-color: lightgray;
     font-family: Arial, Helvetica, sans-serif;
 }
+:deep(.autocomplete-input) {
+    height: 3rem;
+    font-size: 1.5rem;
+}
 </style>
diff --git a/afrc/templates/views/components/plugins/afrc-search.htm b/afrc/templates/views/components/plugins/afrc-search.htm
new file mode 100644
index 0000000..0760954
--- /dev/null
+++ b/afrc/templates/views/components/plugins/afrc-search.htm
@@ -0,0 +1 @@
+<div id="search-mounting-point" style="display: flex; flex-grow: 1;"></div>
\ No newline at end of file
diff --git a/afrc/templates/views/search.htm b/afrc/templates/views/search.htm
deleted file mode 100644
index 50f826c..0000000
--- a/afrc/templates/views/search.htm
+++ /dev/null
@@ -1,9 +0,0 @@
-{% extends "base-root.htm" %}
-
-{% block title %}
-
-{% endblock title %}
-
-{% block body %}
-<div id="search-mounting-point"></div>
-{% endblock body %}
diff --git a/afrc/views/search.py b/afrc/views/search.py
deleted file mode 100644
index c559089..0000000
--- a/afrc/views/search.py
+++ /dev/null
@@ -1,14 +0,0 @@
-from django.shortcuts import render
-from django.utils.decorators import method_decorator
-from django.utils.translation import gettext as _
-from django.views.decorators.csrf import ensure_csrf_cookie
-
-from arches.app.views.base import BaseManagerView
-
-
-class Search(BaseManagerView):
-    @method_decorator(ensure_csrf_cookie)
-    def get(self, request):
-        context = self.get_context_data(main_script="views/search")
-        context["page_title"] = _("Search")
-        return render(request, "views/search.htm", context)