diff --git a/app/javascript/vue/projects/card.vue b/app/javascript/vue/projects/card.vue
index bddf570f3..7145d1086 100644
--- a/app/javascript/vue/projects/card.vue
+++ b/app/javascript/vue/projects/card.vue
@@ -36,8 +36,14 @@
       <UsersRenderer :params="{data: params, value: params.users, dtComponent: dtComponent}" class="-mt-2.5" />
     </div>
   </div>
-  <div v-else class="p-4 rounded sn-shadow-flyout flex flex-col">
-    <div class="flex items-center gap-2 mb-2">
+  <div v-else
+    class="px-3 pt-3 pb-4 rounded border-solid border border-sn-gray flex flex-col"
+    :class="{
+      'bg-sn-light-grey': dtComponent.currentViewMode === 'archived',
+      'bg-sn-super-light-grey': dtComponent.currentViewMode !== 'archived'
+    }"
+  >
+    <div class="flex items-center gap-4 mb-2">
       <div class="sci-checkbox-container">
         <input
           type="checkbox"
@@ -48,17 +54,21 @@
       </div>
       <RowMenuRenderer :params="{data: params, dtComponent: dtComponent}" class="ml-auto"/>
     </div>
-    <div class="flex-grow flex items-center justify-center min-h-[6rem] text-sn-blue">
-      <i class="sn-icon sn-icon-folder"></i>
-    </div>
-    <a :href="params.urls.show"
-       class="flex items-center justify-center gap-1 font-bold mb-2
-            text-sn-black hover:no-underline hover:text-sn-black">
-      <i class="sn-icon mini sn-icon-mini-folder-left"></i>
-      {{ params.name }}
-    </a>
-    <div class="flex items-center justify-center">
-      {{ params.folder_info }}
+    <div
+      class="flex flex-col items-center justify-center"
+      :class="{
+        'text-sn-black hover:text-sn-black': dtComponent.currentViewMode === 'archived',
+        'text-sn-blue hover:text-sn-blue': dtComponent.currentViewMode !== 'archived'
+      }"
+     >
+      <i class="sn-icon sn-icon-folder " style="font-size: 56px !important"></i>
+      <a :href="params.urls.show"
+        class="line-clamp-2 font-bold mb-2 text-inherit text-center hover:no-underline ">
+        {{ params.name }}
+      </a>
+      <div class="flex items-center justify-center text-sn-dark-grey">
+        {{ params.folder_info }}
+      </div>
     </div>
   </div>
 </template>
diff --git a/app/javascript/vue/shared/datatable/table.vue b/app/javascript/vue/shared/datatable/table.vue
index 990785ac3..c3e4f479b 100644
--- a/app/javascript/vue/shared/datatable/table.vue
+++ b/app/javascript/vue/shared/datatable/table.vue
@@ -217,7 +217,7 @@ export default {
           dtComponent: this
         },
         pinned: (column.field === 'name' ? 'left' : null),
-        comparator: () => false
+        comparator: () => null
       }));
 
       if (this.withCheckboxes) {
@@ -308,6 +308,9 @@ export default {
       } else {
         target = document.querySelector('.ag-body-viewport');
       }
+
+      if (!target) return;
+
       if (target.scrollTop + target.clientHeight >= target.scrollHeight - 50) {
         if (this.dataLoading || this.lastPage) return;
 
@@ -365,7 +368,9 @@ export default {
       });
 
       setTimeout(() => {
-        this.gridApi.refreshHeader();
+        if (this.gridApi) {
+          this.gridApi.refreshHeader();
+        }
         this.initializing = false;
       }, 200);
     },