diff --git a/app/assets/stylesheets/shared_styles/elements/checkboxes.scss b/app/assets/stylesheets/shared_styles/elements/checkboxes.scss
index abf80f66f..f2a7850fe 100644
--- a/app/assets/stylesheets/shared_styles/elements/checkboxes.scss
+++ b/app/assets/stylesheets/shared_styles/elements/checkboxes.scss
@@ -35,7 +35,7 @@ input[type="checkbox"].sci-checkbox {
     &::before {
       @include font-awesome;
       animation-timing-function: $timing-function-sharp;
-      background: $color-white;
+      background: transparent;
       border: 1px solid var(--sn-black);
       border-radius: 1px;
       color: $color-white;
diff --git a/app/javascript/vue/experiments/card.vue b/app/javascript/vue/experiments/card.vue
index 0a1be59ab..ebfb3f9c6 100644
--- a/app/javascript/vue/experiments/card.vue
+++ b/app/javascript/vue/experiments/card.vue
@@ -1,6 +1,6 @@
 <template>
-  <div 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', [cardMinWidth]: true}">
+  <div class="px-3 pt-3 pb-4 rounded border-solid border border-sn-grey-300 flex flex-col"
+       :class="{ 'bg-sn-grey-100': dtComponent.currentViewMode === 'archived', [cardMinWidth]: true}">
     <div class="flex items-center gap-4 mb-2">
       <div class="sci-checkbox-container">
         <input
@@ -16,7 +16,10 @@
     </div>
     <a :href="params.urls.show"
        :title="params.name"
-       :class="{'pointer-events-none text-sn-grey': !params.urls.show}"
+       :class="{
+        'pointer-events-none !text-sn-grey': !params.urls.show,
+        '!text-sn-black': dtComponent.currentViewMode === 'archived'
+      }"
        class="font-bold mb-4 shrink-0 text-sn-blue hover:no-underline line-clamp-2 hover:text-sn-blue h-10">
       {{ params.name }}
     </a>
@@ -89,7 +92,8 @@ export default {
     progress() {
       const { completed_tasks: completedTasks, total_tasks: totalTasks } = this.params;
 
-      if (totalTasks === 0) return 0;
+      if (totalTasks === 0) return 3;
+      if (completedTasks === 0) return 3;
 
       return (completedTasks / totalTasks) * 100;
     },
diff --git a/app/javascript/vue/experiments/renderers/completed_tasks.vue b/app/javascript/vue/experiments/renderers/completed_tasks.vue
index c44859e20..bc63741a9 100644
--- a/app/javascript/vue/experiments/renderers/completed_tasks.vue
+++ b/app/javascript/vue/experiments/renderers/completed_tasks.vue
@@ -33,7 +33,8 @@ export default {
     progress() {
       const { completed_tasks: completedTasks, total_tasks: totalTasks } = this.params.data;
 
-      if (totalTasks === 0) return 0;
+      if (totalTasks === 0) return 3;
+      if (completedTasks === 0) return 3;
 
       return (completedTasks / totalTasks) * 100;
     }
diff --git a/app/javascript/vue/projects/card.vue b/app/javascript/vue/projects/card.vue
index 27f3482a2..b86303e5b 100644
--- a/app/javascript/vue/projects/card.vue
+++ b/app/javascript/vue/projects/card.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="!params.folder"
-       :class="{ 'bg-sn-light-grey': dtComponent.currentViewMode === 'archived', [cardMinWidth]: true }"
-       class="px-3 pt-3 pb-4 rounded border-solid border border-sn-gray flex flex-col" >
+       :class="{ 'bg-sn-grey-100': dtComponent.currentViewMode === 'archived', [cardMinWidth]: true }"
+       class="px-3 pt-3 pb-4 rounded border-solid border border-sn-gray-300 flex flex-col" >
     <div class="flex items-center gap-4 mb-2">
       <div class="sci-checkbox-container">
         <input
@@ -17,7 +17,10 @@
     </div>
     <a :href="params.urls.show"
        :title="params.name"
-       :class="{'pointer-events-none text-sn-grey': !params.urls.show}"
+       :class="{
+        'pointer-events-none !text-sn-grey': !params.urls.show,
+        '!text-sn-black': dtComponent.currentViewMode === 'archived',
+      }"
        class="font-bold mb-4 text-sn-blue shrink-0 hover:no-underline line-clamp-3 hover:text-sn-blue h-[60px]">
       {{ params.name }}
     </a>
@@ -40,7 +43,7 @@
   <div v-else
     class="px-3 pt-3 pb-4 rounded border-solid border border-sn-gray flex flex-col h-56"
     :class="{
-      'bg-sn-light-grey': dtComponent.currentViewMode === 'archived',
+      'bg-sn-grey-100': dtComponent.currentViewMode === 'archived',
       'bg-sn-super-light-grey': dtComponent.currentViewMode !== 'archived',
       [cardMinWidth]: true
     }"
@@ -58,15 +61,17 @@
       <RowMenuRenderer :params="{data: params, dtComponent: dtComponent}" class="ml-auto"/>
     </div>
     <div
-      class="flex flex-col items-center justify-center"
+      class="flex flex-col items-center justify-center pt-4"
       :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>
+      <i class="sn-icon sn-icon-folder mb-2" 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 ">
+        class="line-clamp-2 font-bold mb-2 text-inherit text-center hover:no-underline "
+        :class="{'!text-sn-black': dtComponent.currentViewMode === 'archived'}"
+      >
         {{ params.name }}
       </a>
       <div class="flex items-center justify-center text-sn-dark-grey">
diff --git a/app/javascript/vue/projects/renderers/users.vue b/app/javascript/vue/projects/renderers/users.vue
index 1f4ae1cc6..451693696 100644
--- a/app/javascript/vue/projects/renderers/users.vue
+++ b/app/javascript/vue/projects/renderers/users.vue
@@ -8,7 +8,7 @@
       +{{ hiddenUsers.length }}
     </div>
     <div v-if="params.data.permissions['manage_users_assignments']"
-        class="flex items-center shrink-0 justify-center w-7 h-7 rounded-full bg-sn-light-grey text-sn-dark-grey">
+        class="flex items-center shrink-0 justify-center w-7 h-7 rounded-full border-dashed bg-sn-white text-sn-sleepy-grey border-sn-sleepy-grey">
       <i class="sn-icon sn-icon-new-task"></i>
     </div>
   </div>
diff --git a/app/javascript/vue/shared/datatable/row_menu_renderer.vue b/app/javascript/vue/shared/datatable/row_menu_renderer.vue
index 138a814c4..3f1cc83e3 100644
--- a/app/javascript/vue/shared/datatable/row_menu_renderer.vue
+++ b/app/javascript/vue/shared/datatable/row_menu_renderer.vue
@@ -2,7 +2,7 @@
   <div>
     <MenuDropdown
       :listItems="this.formattedList"
-      btnClasses="bg-transparent w-6 h-6 border-0 p-0 flex"
+      btnClasses="btn btn-light icon-btn"
       :position="'right'"
       :alwaysShow="true"
       :btnIcon="'sn-icon sn-icon-more-hori'"