diff --git a/components/card/downloads.vue b/components/card/downloads.vue
index 25a8845e..41abd0fc 100644
--- a/components/card/downloads.vue
+++ b/components/card/downloads.vue
@@ -54,8 +54,8 @@ function toReplicationStatusColor(variant: storagemodelsv2ReplicationStatus | un
             <th scope="col" class="px-6 py-3 text-start text-sm font-medium text-gray-500 uppercase">
               Replication Status
             </th>
-            <th scope="col" class="px-6 py-3 text-start text-sm font-medium text-gray-500 uppercase">
-              <center>Download</center>
+            <th scope="col" class="px-6 py-3 text-center text-sm font-medium text-gray-500 uppercase">
+              Download
             </th>
           </tr>
           </thead>
@@ -69,17 +69,15 @@ function toReplicationStatusColor(variant: storagemodelsv2ReplicationStatus | un
               <span class="">{{ toReplicationStatusStr(endpoint.status) }}</span>
               <component :is="toReplicationStatusIcon(endpoint.status)" class="flex-shrink-0" :color="toReplicationStatusColor(endpoint.status)"></component>
             </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-200">
-                <center>
-                  <button
-                      type="button"
-                      title="Download Object"
-                      @click="emit('download', endpoint.id)"
-                      :disabled="endpoint.status != storagemodelsv2ReplicationStatus.REPLICATION_STATUS_FINISHED"
-                      class="inline-flex grow justify-center font-semibold rounded-lg border border-transparent text-gray-600 dark:text-white hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none">
-                      <IconCloudDown class="flex-shrink-0"/>
-                  </button>
-                </center>
+            <td class="px-6 py-4 text-center whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-200">
+              <button
+                  type="button"
+                  title="Download Object"
+                  @click="emit('download', endpoint.id)"
+                  :disabled="endpoint.status != storagemodelsv2ReplicationStatus.REPLICATION_STATUS_FINISHED"
+                  class="inline-flex grow justify-center font-semibold rounded-lg border border-transparent text-gray-600 dark:text-white hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none">
+                  <IconCloudDown class="flex-shrink-0"/>
+              </button>
             </td>
           </tr>
           </tbody>
diff --git a/components/modal/object_display.vue b/components/modal/ObjectDisplay.vue
similarity index 72%
rename from components/modal/object_display.vue
rename to components/modal/ObjectDisplay.vue
index 359994a6..2159003d 100644
--- a/components/modal/object_display.vue
+++ b/components/modal/ObjectDisplay.vue
@@ -12,7 +12,6 @@ const props = defineProps<{
 const object = toRef(props, 'object')
 const progress = toRef(props, 'progress')
 const errorMsg = toRef(props, 'errorMsg')
-
 </script>
 
 <template>
@@ -37,47 +36,57 @@ const errorMsg = toRef(props, 'errorMsg')
         <div v-if="errorMsg" v-html="errorMsg" class="p-4 overflow-y-auto text-center text-red-500"></div>
 
         <div v-else-if="object" class="p-4 overflow-y-auto">
-          <div class="border-t border-gray-100">
-            <dl class="divide-y divide-gray-100">
+          <div class="">
+            <dl class="border-y border-gray-100 divide-y divide-gray-100 mb-5">
               <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-gray-900">ID</dt>
+                <dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-200">ID</dt>
                 <dd class="mt-1 text-sm leading-6 font-bold text-aruna-800 dark:text-aruna-700 sm:col-span-2 sm:mt-0">
                   {{ object.id }}
                 </dd>
               </div>
               <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-gray-900">Name</dt>
-                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{{ object.name }}</dd>
+                <dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-200">Name</dt>
+                <dd class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-300 sm:col-span-2 sm:mt-0">{{ object.name }}</dd>
               </div>
               <div v-if="object.title" class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-gray-900">Title</dt>
-                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{{ object.title }}</dd>
+                <dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-200">Title</dt>
+                <dd class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-300 sm:col-span-2 sm:mt-0">{{ object.title }}</dd>
               </div>
               <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-gray-900">Link</dt>
-                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                <dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-200">Link</dt>
+                <dd class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-300 sm:col-span-2 sm:mt-0">
                   <a :href="`/objects/${object.id}`">
                     <IconExternalLink/>
                   </a>
                 </dd>
               </div>
             </dl>
-            <div v-if="object.dataLicenseTag" class="text-sm text-center font-medium leading-6 text-orange-500">
-              <hr class="border-gray-200 my-5">
-              Please wait for your upload to finish before you leave the resource creation form.
+            <div v-if="object.dataLicenseTag" class="text-sm text-center font-medium leading-6">
+              <!-- <hr class="border-gray-200 my-5"> -->
+              <span class="text-orange-500">Please wait for your upload to finish before you leave the resource creation form.</span>
+
               <!-- Progress -->
               <div class="flex items-center my-2 gap-x-3 whitespace-nowrap">
-                <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700"
+                <div class="flex w-5/6 h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700"
                      role="progressbar"
                      :aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100">
                   <div
                       class="flex flex-col justify-center rounded-full overflow-hidden bg-aruna-800 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500"
                       :style="`width: ${progress}%`"></div>
                 </div>
-                <div class="w-10 text-end">
-                  <span v-if="progress <= 0" class="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-gray-500 rounded-full" role="status" aria-label="loading"></span>
-                  <span v-else-if="progress < 100" class="text-sm text-gray-800 dark:text-white">{{ progress }}%</span>
-                  <IconCircleCheck v-else class="text-teal-500"/>
+                <span v-if="progress < 100">
+                  {{ progress }}% 
+                </span>
+                <IconCircleCheck v-else class="text-teal-500"/>
+                <div class="ms-4 text-end">
+                  <button
+                    type="button"
+                    @click="closeModal(props.modalId)"
+                    :data-hs-overlay="`#${props.modalId}`"
+                    class="py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-aruna-800 text-white hover:bg-aruna-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"
+                    :disabled="progress < 100">
+                    Close
+                  </button>
                 </div>
               </div>
               <!-- End Progress -->
diff --git a/pages/objects/[id].vue b/pages/objects/[id].vue
index ace6edf1..20f18bf1 100644
--- a/pages/objects/[id].vue
+++ b/pages/objects/[id].vue
@@ -356,7 +356,7 @@ useHead({
     <!-- End Relations Row -->
 
     <!-- Locations -->
-    <div v-if="isDownloadable()" class="flex flex-wrap justify-center gap-x-4 gap-y-2 container mx-auto mb-6">
+    <div v-if="objectInfo.variant == v2ResourceVariant.RESOURCE_VARIANT_OBJECT" class="flex flex-wrap justify-center gap-x-4 gap-y-2 container mx-auto mb-6">
       <div
           class="flex flex-col grow p-2 bg-white/[.5] border border-gray-400 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
         <div class="flex flex-row justify-start items-center p-4 font-bold text-xl">