diff --git a/afrc/src/afrc/Search/SearchPage.vue b/afrc/src/afrc/Search/SearchPage.vue
index cb74c6f..3329957 100644
--- a/afrc/src/afrc/Search/SearchPage.vue
+++ b/afrc/src/afrc/Search/SearchPage.vue
@@ -12,6 +12,7 @@ import arches from "arches";
 
 import SimpleSearchFilter from "@/afrc/Search/components/SimpleSearchFilter.vue";
 import SearchResultItem from "@/afrc/Search/components/SearchResultItem.vue";
+import SearchItemDetails from "@/afrc/Search/components/SearchItemDetails.vue";
 import InteractiveMap from "@/afrc/Search/components/InteractiveMap/InteractiveMap.vue";
 import { fetchMapData } from "@/afrc/Search/api.ts";
 import type { GenericObject } from "@/afrc/Search/types";
@@ -21,6 +22,7 @@ let query = getQueryObject(null);
 let queryString = ref(JSON.stringify(query));
 let searchResults = ref([]);
 let resultsCount = ref("calculating...");
+let resultSelected = ref("");
 const showMap = ref(false);
 const basemaps: Ref<Basemap[]> = ref([]);
 const overlays: Ref<MapLayer[]> = ref([]);
@@ -31,6 +33,7 @@ const toast = useToast();
 const { $gettext } = useGettext();
 
 provide("resultsSelected", resultsSelected);
+provide("resultSelected", resultSelected);
 
 watch(queryString, () => {
     doQuery();
@@ -181,7 +184,11 @@ onMounted(async () => {
                     />
                 </div>
             </section>
-
+            <section
+                v-if="dataLoaded && resultSelected"
+            >
+                <SearchItemDetails :instanceId="resultSelected"/>
+            </section>
             <div
                 v-if="showMap && dataLoaded"
                 style="width: 100%; height: 100%"
@@ -191,6 +198,7 @@ onMounted(async () => {
                     :overlays="overlays"
                     :sources="sources"
                     :include-drawer="false"
+                    :popup-enabled="false"
                 />
             </div>
 
@@ -260,6 +268,7 @@ section.afrc-search-results-panel {
     flex-grow: 1;
     margin: 15px;
     overflow-y: auto;
+    min-width: 350px;
 }
 .search-result-list {
     display: flex;
diff --git a/afrc/src/afrc/Search/api.ts b/afrc/src/afrc/Search/api.ts
index 2654d2f..172117c 100644
--- a/afrc/src/afrc/Search/api.ts
+++ b/afrc/src/afrc/Search/api.ts
@@ -60,5 +60,15 @@ export const createRequest = (url: string) => {
     };
 };
 
+export const fetchResourceData = (resourceId: string) => {
+    const url = `${arches.urls["api_resources"](resourceId)}?format=json&v=beta`;
+    return createRequest(url)();
+};
+
+export const fetchImageData = (imageResourceIds: string[]) => { 
+    const url = `${arches.urls["api-file-data"]}?resourceids=${imageResourceIds.join(",")}`;
+    return createRequest(url)();
+};
+
 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 2dfef91..4ea7a33 100644
--- a/afrc/src/afrc/Search/components/InteractiveMap/InteractiveMap.vue
+++ b/afrc/src/afrc/Search/components/InteractiveMap/InteractiveMap.vue
@@ -33,6 +33,7 @@ const props = defineProps<{
     basemaps: Basemap[];
     sources: MapSource[];
     includeDrawer: boolean;
+    popupEnabled: boolean;
 }>();
 
 const map: Ref<Map | null> = ref(null);
@@ -116,6 +117,7 @@ function updateSelectedDrawnFeature(feature: Feature) {
             :overlays="overlays"
             :sources="sources"
             :is-drawing-enabled="true"
+            :is-popup-enabled="popupEnabled"
             @map-initialized="
                 (mapInstance) => {
                     map = mapInstance;
diff --git a/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue b/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
index 8d6f06f..df9bc98 100644
--- a/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
+++ b/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
@@ -66,6 +66,7 @@ interface Props {
     isDrawingEnabled?: boolean;
     drawnFeatures?: Feature[];
     drawnFeaturesBuffer?: Buffer;
+    isPopupEnabled?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -76,6 +77,7 @@ const props = withDefaults(defineProps<Props>(), {
     isDrawingEnabled: false,
     drawnFeatures: () => [],
     drawnFeaturesBuffer: undefined,
+    isPopupEnabled: false,
 });
 
 const {
@@ -86,9 +88,11 @@ const {
     isDrawingEnabled,
     drawnFeatures,
     drawnFeaturesBuffer,
+    isPopupEnabled,
 } = props;
 
 let resultsSelected = inject("resultsSelected") as Ref<string[]>;
+let resultSelected = inject("resultSelected") as Ref<string>;
 
 const emits = defineEmits([
     "mapInitialized",
@@ -143,15 +147,17 @@ watch(
     },
 );
 
-watch(clickedFeatures, () => {
-    if (popupInstance.value) {
-        popupInstance.value.remove();
-    }
-    popupInstance.value = new maplibregl.Popup()
-        .setLngLat(clickedCoordinates.value)
-        .setDOMContent(popupContainer.value!.$el)
-        .addTo(map.value!);
-});
+if (isPopupEnabled) {
+    watch(clickedFeatures, () => {
+        if (popupInstance.value) {
+            popupInstance.value.remove();
+        }
+        popupInstance.value = new maplibregl.Popup()
+            .setLngLat(clickedCoordinates.value)
+            .setDOMContent(popupContainer.value!.$el)
+            .addTo(map.value!);
+    });
+}
 
 onMounted(() => {
     createMap();
@@ -386,6 +392,7 @@ function addOverlayToMap(overlay: MapLayer) {
                 clickedCoordinates.value = [e.lngLat.lng, e.lngLat.lat];
                 clickedFeatures.value = features;
                 resultsSelected.value = [];
+                resultSelected.value = "";
                 const uniqueResourceIds = new Set(
                     features.map(
                         (feature) =>
@@ -393,8 +400,10 @@ function addOverlayToMap(overlay: MapLayer) {
                     ),
                 );
                 resultsSelected.value = Array.from(uniqueResourceIds);
+                resultSelected.value = resultsSelected.value[0];
             } else {
                 resultsSelected.value = [];
+                resultSelected.value = "";
             }
         };
 
diff --git a/afrc/src/afrc/Search/components/MapView.vue b/afrc/src/afrc/Search/components/MapView.vue
deleted file mode 100644
index aaa40b4..0000000
--- a/afrc/src/afrc/Search/components/MapView.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup>
-// Import and set up your preferred map library if needed
-</script>
-
-<template>
-    <div class="map-view">
-        <p>Map goes here</p>
-        <!-- Integrate your map library or component here -->
-    </div>
-</template>
-
-<style scoped>
-.map-view {
-    height: 100%;
-    border-left: 2px solid #ddd;
-    min-width: 60%;
-    /* Make the map take up remaining space */
-}
-</style>
diff --git a/afrc/src/afrc/Search/components/SearchItemDetails.vue b/afrc/src/afrc/Search/components/SearchItemDetails.vue
new file mode 100644
index 0000000..da70979
--- /dev/null
+++ b/afrc/src/afrc/Search/components/SearchItemDetails.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { onMounted, inject, ref, watch } from "vue";
+import type { GenericObject, Acquisition } from "@/afrc/Search/types";
+import { fetchResourceData, fetchImageData } from "@/afrc/Search/api.ts";
+import type { Ref } from "vue";
+import Button from "primevue/button";
+import Carousel from 'primevue/carousel';
+
+const resultSelected = inject("resultSelected") as Ref<string>;
+const resultsSelected = inject("resultsSelected") as Ref<string[]>;
+
+let displayname: Ref<string> = ref("");
+let displaydescription: Ref<string> = ref("");
+let images: Ref<string[]> = ref([]);
+let acquisitions: Ref<Acquisition[]> = ref([]);
+let identifier: Ref<string> = ref("");
+
+onMounted(async () => {
+    getData();
+});
+
+watch(resultSelected, () => {
+    getData();
+});
+
+async function getData() {
+    let imageData: string[] = [];
+    const resp = await fetchResourceData(resultSelected.value);
+    const imageResourceids = resp.resource["Digital Reference"]?.map((tile: { [key: string]: any; }) => tile["Digital Source"]["resourceId"]);
+    const accessionNumber = resp.resource['Identifier']?.find((x: {[key: string]: any;}) => x["Identifier_type"]["@display_value"]==="Accession Number")
+
+    acquisitions.value = resp.resource["Addition to Collection"]?.map((x: { [key: string]: any; }) => (
+        {
+            "person": x["Addition to Collection_carried out by"]["@display_value"],
+            "date": x["Addition to Collection_time"]["Addition to Collection_time_begin of the begin"]["@display_value"],
+            "details": x["Addition to Collection_Statement"]?.map((y: {[key: string]: any;}) => (y["Addition to Collection_Statement_content"]["@display_value"])).join(" ")
+        }));
+    displayname.value = resp.displayname;
+    displaydescription.value = resp.displaydescription;
+    identifier.value = accessionNumber ? accessionNumber["Identifier_content"]["@display_value"] : ""
+
+    if (imageResourceids) {
+        imageData = await fetchImageData(imageResourceids);
+        images.value = imageData;
+    } else {
+        images.value = [];
+    }
+}
+
+function clearResult() {
+    resultSelected.value = "";
+    resultsSelected.value = [];
+}
+
+</script>
+
+<template>
+    <div class="search-item-details">
+        <div class="title">
+            <div style='display:flex; flex-direction: column; padding: 3px'>
+                <div>
+                {{ displayname || "No name provided" }}
+                </div>
+                <div style="font-size: 0.7em; color: steelblue; font-style: italic; font-weight: 400;">
+                    {{ identifier }}
+                </div>
+            </div>
+            <div>
+            <Button
+                label="Close"
+                severity="secondary"
+                icon="pi pi-times-circle"
+                icon-pos="top"
+                text
+                size="large"
+                @click="clearResult()"
+            />
+            </div>
+        </div>
+        <div class="description">
+            <div v-if="displaydescription && displaydescription != 'Undefined'">{{ displaydescription }}</div>
+            <div v-else>No description provided</div> 
+        </div>
+        <div class="images" v-if="images.length">
+        <Carousel :value="images" :numVisible="2" :numScroll="1" containerClass="flex items-center">
+            <template #item="image">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+                    <div class="mb-4">
+                        <div class="relative mx-auto">
+                            <div style="padding: 3px">
+                            <img :src="image.data" height="120px" width="120px" class="w-full rounded" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </Carousel>
+        </div>
+        <div class="resource-details"  style="color: grey">
+            <div class="value-header">Material Information</div>
+            <div class="value-entry">Chemical (CAS) Number:<span class="resource-details-value">1309-36-0</span></div>
+            <div class="value-entry">Chemical Formula:<span class="resource-details-value">FeS2</span></div>
+            <div class="value-entry">Chemical Name:<span class="resource-details-value">Iron Disulfide</span></div>
+            <div class="value-entry">Common Name:<span class="resource-details-value">Pyrite, Fool's Gold</span></div>
+        </div>
+        <div class="resource-details" v-if="acquisitions">
+            <div class="value-header">Acquisition Information</div>
+            <div v-for="acquisition in acquisitions">
+                <div class="value-entry">Acquired by:<span class="resource-details-value">{{ acquisition.person }}</span></div>
+                <div class="value-entry">Acquired on:<span class="resource-details-value">{{ acquisition.date }}</span></div>
+                <div class="value-entry">Acquisition Details:<span class="resource-details-value">{{ acquisition.details }}</span></div>
+            </div>
+        </div>
+        
+    </div>
+</template>
+
+<style scoped>
+    .search-item-details {
+        display: flex;
+        flex-direction: column;
+        padding: 5px;
+        border-right: #ddd solid 1px;
+        border-left: solid #ddd 1px;
+        width: 375px;
+        height: 100%;
+        background-color: #fff;
+    }
+    .title {
+        display: flex;
+        font-size: 1.2em;
+        font-weight: bold;
+        margin-bottom: 5px;
+        justify-content: space-between;
+        border-bottom: #ddd solid 1px;
+    }
+    .description {
+        font-size: 1em;
+        margin-bottom: 15px;
+        padding: 10px;
+    }
+    .resource-details {
+        padding: 10px;
+    }
+    .value-header {
+        color: steelblue;
+        font-size: 1.1em;
+        font-weight: bold;
+    }
+    .value-entry {
+        font-size: 1.0em;
+        padding: 0px 3px;
+    }
+    .resource-details-value {
+        color: steelblue;
+        padding: 0px 3px;
+    }
+</style>
\ No newline at end of file
diff --git a/afrc/src/afrc/Search/components/SearchResultItem.vue b/afrc/src/afrc/Search/components/SearchResultItem.vue
index fba9f7c..e77f341 100644
--- a/afrc/src/afrc/Search/components/SearchResultItem.vue
+++ b/afrc/src/afrc/Search/components/SearchResultItem.vue
@@ -7,6 +7,7 @@ import Button from "primevue/button";
 import arches from "arches";
 
 const resultsSelected = inject("resultsSelected") as Ref<string[]>;
+const resultSelected = inject("resultSelected") as Ref<string>;
 
 const props = defineProps({
     searchResult: {
@@ -15,13 +16,17 @@ const props = defineProps({
     },
 });
 
+function highlightResult(resourceid: string) {
+    if (!resultSelected.value) {
+        resultsSelected.value = [resourceid];
+    }
+}
+
 function selectResult(resourceid: string) {
+    resultSelected.value = resourceid;
     resultsSelected.value = [resourceid];
 }
 
-function clearResult() {
-    resultsSelected.value = [];
-}
 </script>
 
 <template>
@@ -32,8 +37,7 @@ function clearResult() {
                 searchResult._source.resourceinstanceid,
             ),
         }"
-        @mouseenter="selectResult(searchResult._source.resourceinstanceid)"
-        @mouseleave="clearResult"
+        @mouseenter="highlightResult(searchResult._source.resourceinstanceid)"
     >
         <div class="image-placeholder">
             <img src="https://picsum.photos/160" />
@@ -55,6 +59,7 @@ function clearResult() {
                     severity="secondary"
                     text
                     size="large"
+                    @click="selectResult(searchResult._source.resourceinstanceid)"
                 />
                 <Button
                     label="edit"
@@ -64,7 +69,7 @@ function clearResult() {
                     target="_blank"
                     size="large"
                     icon="pi pi-pen-to-square"
-                    :href="'./' + arches.urls.resource + '/' + searchResult._id"
+                    :href="arches.urls.resource + '/' + searchResult._id"
                 />
             </div>
         </div>
diff --git a/afrc/src/afrc/Search/types.ts b/afrc/src/afrc/Search/types.ts
index b327bbe..158d4a5 100644
--- a/afrc/src/afrc/Search/types.ts
+++ b/afrc/src/afrc/Search/types.ts
@@ -100,3 +100,9 @@ export interface UserRefAndSetter {
     user: Ref<User | null>;
     setUser: (userToSet: User | null) => void;
 }
+
+export interface Acquisition {
+    person: string;
+    date: number;
+    details: string
+  }
\ No newline at end of file
diff --git a/afrc/templates/arches_urls.htm b/afrc/templates/arches_urls.htm
index 80eba82..01327a3 100644
--- a/afrc/templates/arches_urls.htm
+++ b/afrc/templates/arches_urls.htm
@@ -8,6 +8,7 @@
 {{ block.super }}
 <div class="arches-urls"
     api-search="{% url 'api-search' %}"
+    api-file-data="{% url 'api-file-data' %}"
     api-settings="{% url 'api-settings' %}"
     api-map-data="{% url 'api-map-data' %}"
     api-feature-buffer="{% url 'api-feature-buffer' %}"
diff --git a/afrc/urls.py b/afrc/urls.py
index 62a24fd..293afe9 100644
--- a/afrc/urls.py
+++ b/afrc/urls.py
@@ -2,6 +2,7 @@
 from django.conf.urls.static import static
 from django.conf.urls.i18n import i18n_patterns
 from django.urls import include, path, re_path
+from afrc.views.file_api import FileAPI
 from afrc.views.settings_api import SettingsAPI
 from afrc.views.search_api import SearchAPI
 from afrc.views.map_api import (
@@ -16,6 +17,7 @@
     path("api-search", SearchAPI.as_view(), name="api-search"),
     path("api-settings", SettingsAPI.as_view(), name="api-settings"),
     path("api-map-data", MapDataAPI.as_view(), name="api-map-data"),
+    path("api-file-data", FileAPI.as_view(), name="api-file-data"),
     path("api-feature-buffer", FeatureBufferAPI.as_view(), name="api-feature-buffer"),
     path("api-geojson-bounds", GeoJSONBoundsAPI.as_view(), name="api-geojson-bounds"),
     re_path(
diff --git a/afrc/views/file_api.py b/afrc/views/file_api.py
new file mode 100644
index 0000000..944ff87
--- /dev/null
+++ b/afrc/views/file_api.py
@@ -0,0 +1,20 @@
+from arches.app.utils.response import JSONResponse
+from arches.app.models.models import File, TileModel
+from django.views.generic import View
+from django.db.models.fields.json import KT
+
+
+class FileAPI(View):
+    def get(self, request):
+        file_node_id = "8713d9ca-d860-11ef-98f5-0275dc2ded29"
+        resource_ids = request.GET.get("resourceids")
+        if resource_ids:
+            resource_ids = resource_ids.split(",")
+        res = TileModel.objects.filter(resourceinstance_id__in=resource_ids).filter(data__has_key=file_node_id).values('data')
+        paths = []
+        for tile in res:
+            paths += [val['url'] for val in tile['data'][file_node_id]]
+
+        return JSONResponse(
+            paths,
+        )