diff --git a/app/javascript/vue/global_search/groups/assets.vue b/app/javascript/vue/global_search/groups/assets.vue
index f5ccd786c..32e9a79a7 100644
--- a/app/javascript/vue/global_search/groups/assets.vue
+++ b/app/javascript/vue/global_search/groups/assets.vue
@@ -10,48 +10,24 @@
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
       <div class="grid grid-cols-[auto_auto_auto_auto_auto_auto] items-center">
-        <template v-for="row in preparedResults" :key="row.id">
-          <a target="_blank" :href="row.attributes.parent.url"
-             class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 font-bold border-0 border-b border-solid border-sn-light-grey">
-            <span :class="row.attributes.icon" class="shrink-0"></span>
-            <StringWithEllipsis class="w-full" :text="row.attributes.file_name"></StringWithEllipsis>
-          </a>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.created_at') }}:</b>
-            <span class="truncate">{{ row.attributes.created_at }}</span>
-          </div>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.updated_at') }}:</b>
-            <span class="truncate">{{ row.attributes.updated_at }}</span>
-          </div>
-          <div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.team') }}:</b>
-            <a target="_blank" :href="row.attributes.team.url" class="shrink-0 overflow-hidden">
-              <StringWithEllipsis class="w-full" :text="row.attributes.team.name"></StringWithEllipsis>
-            </a>
-          </div>
-          <div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t(`search.index.${row.attributes.parent.type}`) }}:</b>
-            <a target="_blank" :href="row.attributes.parent.url" class="shrink-0 overflow-hidden">
-              <StringWithEllipsis class="w-full" :text="labelName(row.attributes.parent)"></StringWithEllipsis>
-            </a>
-          </div>
-          <div class="s h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey"
-               :class="{ 'invisible': !row.attributes.experiment.name }">
-            <b class="shrink-0">{{ i18n.t('search.index.experiment') }}:</b>
-            <a target="_blank" :href="row.attributes.experiment.url" class="shrink-0 overflow-hidden">
-              <StringWithEllipsis class="w-full" :text="labelName(row.attributes.experiment)"></StringWithEllipsis>
-            </a>
-          </div>
-        </template>
+        <div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
+          <hr class="col-span-6 w-full m-0" v-if="index > 0">
+          <LinkTemplate :url="row.attributes.parent.url" :icon="row.attributes.icon" :value="row.attributes.file_name"/>
+          <CellTemplate :label="i18n.t('search.index.created_at')" :value="row.attributes.created_at"/>
+          <CellTemplate :label=" i18n.t('search.index.updated_at')" :value="row.attributes.updated_at"/>
+          <CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
+          <CellTemplate :label="i18n.t(`search.index.${row.attributes.parent.type}`)" :url="row.attributes.parent.url" :value="labelName(row.attributes.parent)"/>
+          <CellTemplate :label="i18n.t(`search.index.${row.attributes.parent.type}`)" :visible="!!row.attributes.experiment.name"
+                        :url="row.attributes.experiment.url" :value="labelName(row.attributes.experiment)"/>
+        </div>
       </div>
       <div v-if="viewAll" class="mt-4">
         <button class="btn btn-light" @click="$emit('selectGroup', 'AssetsComponent')">View all</button>
       </div>
     </template>
-    <Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
-            :loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
-   <NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight"  />
+    <Loader v-if="loading" :loaderRows="loaderRows" />
+    <ListEnd v-if="reachedEnd" />
+   <NoSearchResult v-else-if="showNoSearchResult"  />
   </div>
 </template>
 
diff --git a/app/javascript/vue/global_search/groups/experiments.vue b/app/javascript/vue/global_search/groups/experiments.vue
index d58e43aff..c0546ec13 100644
--- a/app/javascript/vue/global_search/groups/experiments.vue
+++ b/app/javascript/vue/global_search/groups/experiments.vue
@@ -10,43 +10,22 @@
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
       <div class="grid grid-cols-[auto_80px_auto_auto_auto] items-center">
-        <template v-for="row in preparedResults" :key="row.id">
-          <a :href="row.attributes.url" target="_blank" class="h-full py-2 px-4 overflow-hidden font-bold border-0 border-b border-solid border-sn-light-grey">
-            <StringWithEllipsis class="w-full"
-              :text="labelName({ name: row.attributes.name, archived: row.attributes.archived})">
-            </StringWithEllipsis>
-          </a>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.id') }}:</b>
-            <span class="shrink-0">{{ row.attributes.code }}</span>
-          </div>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey max-w-[220px]">
-            <b class="shrink-0">{{ i18n.t('search.index.created_at') }}:</b>
-            <span class="shrink-0">{{ row.attributes.created_at }}</span>
-          </div>
-          <div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.team') }}:</b>
-            <a :href="row.attributes.team.url" class="shrink-0 overflow-hidden" target="_blank">
-              <StringWithEllipsis class="w-full" :text="row.attributes.team.name"></StringWithEllipsis>
-            </a>
-          </div>
-          <div class="h-full py-2 px-4 border-0 border-b border-solid border-sn-light-grey">
-            <div class="grid grid-cols-[auto_1fr] items-center gap-1 text-xs w-full">
-              <b class="shrink-0">{{ i18n.t('search.index.project') }}:</b>
-              <a :href="row.attributes.project.url" target="_blank" class="shrink-0 overflow-hidden">
-                <StringWithEllipsis class="w-full" :text="labelName(row.attributes.project)"></StringWithEllipsis>
-              </a>
-            </div>
-          </div>
-        </template>
+        <div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
+          <hr class="col-span-5 w-full m-0" v-if="index > 0">
+          <LinkTemplate :url="row.attributes.url" :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>
+          <CellTemplate :label="i18n.t('search.index.id')" :value="row.attributes.code"/>
+          <CellTemplate :label="i18n.t('search.index.created_at')" :value="row.attributes.created_at"/>
+          <CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
+          <CellTemplate :label="i18n.t('search.index.project')" :url="row.attributes.project.url" :value="labelName(row.attributes.project)"/>
+        </div>
       </div>
       <div v-if="viewAll" class="mt-4">
         <button class="btn btn-light" @click="$emit('selectGroup', 'ExperimentsComponent')">View all</button>
       </div>
     </template>
-    <Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
-            :loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
-    <NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight"  />
+    <Loader v-if="loading" :loaderRows="loaderRows" />
+    <ListEnd v-if="reachedEnd" />
+    <NoSearchResult v-else-if="showNoSearchResult"  />
   </div>
 </template>
 
diff --git a/app/javascript/vue/global_search/groups/folders.vue b/app/javascript/vue/global_search/groups/folders.vue
index bc08b895c..b62329176 100644
--- a/app/javascript/vue/global_search/groups/folders.vue
+++ b/app/javascript/vue/global_search/groups/folders.vue
@@ -10,41 +10,22 @@
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
       <div class="grid grid-cols-[auto_auto_auto_auto] items-center">
-        <template v-for="row in preparedResults" :key="row.id" class="hover:bg-sn-super-light-grey">
-          <a target="_blank" :href="row.attributes.url" class="h-full py-2 px-4 overflow-hidden font-bold border-0 border-b border-solid border-sn-light-grey">
-            <StringWithEllipsis class="w-full"
-              :text="labelName({ name: row.attributes.name, archived: row.attributes.archived})">
-            </StringWithEllipsis>
-          </a>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.created_at') }}:</b>
-            <span class="shrink-0">{{ row.attributes.created_at }}</span>
-          </div>
-          <div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.team') }}:</b>
-            <a :href="row.attributes.team.url" class="shrink-0 overflow-hidden" target="_blank">
-              <StringWithEllipsis class="w-full" :text="row.attributes.team.name"></StringWithEllipsis>
-            </a>
-          </div>
-          <div class="h-full py-2 px-4 border-0 border-b border-solid border-sn-light-grey">
-            <template v-if="row.attributes.parent_folder">
-              <div class="grid grid-cols-[auto_1fr] items-center gap-1 text-xs w-full">
-                <b class="shrink-0">{{ i18n.t('search.index.folder') }}:</b>
-                <a :href="row.attributes.parent_folder.url" target="_blank" class="shrink-0 overflow-hidden">
-                  <StringWithEllipsis class="w-full" :text="labelName(row.attributes.parent_folder)"></StringWithEllipsis>
-                </a>
-              </div>
-            </template>
-          </div>
-        </template>
+        <div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
+          <hr class="col-span-4 w-full m-0" v-if="index > 0">
+          <LinkTemplate :url="row.attributes.url"  :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>
+          <CellTemplate :label="i18n.t('search.index.created_at')" :value="row.attributes.created_at"/>
+          <CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
+          <CellTemplate :label="i18n.t('search.index.floler')" :visible="row.attributes.parent_folder"
+                        :url="row.attributes.parent_folder?.url" :value="labelName(row.attributes.parent_folder)"/>
+        </div>
       </div>
       <div v-if="viewAll" class="mt-4">
         <button class="btn btn-light" @click="$emit('selectGroup', 'FoldersComponent')">View all</button>
       </div>
     </template>
-    <Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
-            :loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
-    <NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight"  />
+    <Loader v-if="loading" :loaderRows="loaderRows" />
+    <ListEnd v-if="reachedEnd" />
+    <NoSearchResult v-else-if="showNoSearchResult"  />
   </div>
 </template>
 
diff --git a/app/javascript/vue/global_search/groups/helpers/cell_template.vue b/app/javascript/vue/global_search/groups/helpers/cell_template.vue
new file mode 100644
index 000000000..724b04084
--- /dev/null
+++ b/app/javascript/vue/global_search/groups/helpers/cell_template.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] min-w-[8rem] items-center gap-1 text-xs group-hover:bg-sn-super-light-grey">
+      <template v-if="visible">
+        <b class="shrink-0">{{ label }}:</b>
+        <a v-if="url" :href="url" class="shrink-0 overflow-hidden hover:no-underline">
+          <img v-if="avatar" :src="avatar" class="w-5 h-5 border border-sn-super-light-grey rounded-full mx-1" />
+          <StringWithEllipsis class="w-full" :text="value"></StringWithEllipsis>
+        </a>
+        <div v-else class="grid grid-cols-[auto_1fr] items-center gap-1 overflow-hidden">
+          <img v-if="avatar" :src="avatar" class="w-5 h-5 border border-sn-super-light-grey rounded-full mx-1" />
+          <span class="shrink-0 truncate" :title="value">{{ value }}</span>
+        </div>
+      </template>
+    </div>
+</template>
+
+<script>
+import StringWithEllipsis from '../../../shared/string_with_ellipsis.vue';
+
+export default {
+  name: 'CellTemplate',
+  props: {
+    label: { type: String, default: '' },
+    value: { type: String, default: '' },
+    url: { type: String, default: '' },
+    avatar: { type: String, default: '' },
+    visible: { type: Boolean, default: true }
+  },
+  components: {
+    StringWithEllipsis
+  }
+};
+</script>
diff --git a/app/javascript/vue/global_search/groups/helpers/link_template.vue b/app/javascript/vue/global_search/groups/helpers/link_template.vue
new file mode 100644
index 000000000..3de291e45
--- /dev/null
+++ b/app/javascript/vue/global_search/groups/helpers/link_template.vue
@@ -0,0 +1,24 @@
+<template>
+    <a target="_blank" :href="url" class="h-full py-2 px-4 overflow-hidden font-bold flex gap-1 items-center group-hover:bg-sn-super-light-grey hover:no-underline">
+      <span v-if="icon" :class="icon" class="sn-icon shrink-0"></span>
+      <StringWithEllipsis class="w-full"
+        :text="value">
+      </StringWithEllipsis>
+    </a>
+</template>
+
+<script>
+import StringWithEllipsis from '../../../shared/string_with_ellipsis.vue';
+
+export default {
+  name: 'LinkTemplate',
+  props: {
+    value: { type: String, default: '' },
+    url: { type: String, default: '' },
+    icon: { type: String, default: '' }
+  },
+  components: {
+    StringWithEllipsis
+  }
+};
+</script>
diff --git a/app/javascript/vue/global_search/groups/helpers/list_end.vue b/app/javascript/vue/global_search/groups/helpers/list_end.vue
new file mode 100644
index 000000000..88a9e53f8
--- /dev/null
+++ b/app/javascript/vue/global_search/groups/helpers/list_end.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="flex flex-col gap-6 mt-6">
+    <div class="flex items-center mb-6">
+      <p class="text-sm text-sn-blue flex items-center gap-3 m-auto">
+        <span class="sn-icon sn-icon-flag"></span>
+        <span>{{ i18n.t('search.index.reached_end') }}</span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ListEnd'
+};
+</script>
diff --git a/app/javascript/vue/global_search/no_search_result.vue b/app/javascript/vue/global_search/groups/helpers/no_search_result.vue
similarity index 70%
rename from app/javascript/vue/global_search/no_search_result.vue
rename to app/javascript/vue/global_search/groups/helpers/no_search_result.vue
index afe2a2cf5..6a89405c3 100644
--- a/app/javascript/vue/global_search/no_search_result.vue
+++ b/app/javascript/vue/global_search/groups/helpers/no_search_result.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="noSearchResult">
+  <div ref="noSearchResult" class="h-[60vh]">
     <div class="flex flex-col gap-6 bg-sn-white text-center relative top-1/4">
        <div><span class=" inline-block sn-icon sn-icon-search"></span></div>
        <div class="">
@@ -17,12 +17,6 @@
 <script>
 
 export default {
-  name: 'NoSearchResult',
-  props: {
-    noSearchResultHeight: { type: Number, default: 0 }
-  },
-  mounted() {
-    this.$refs.noSearchResult.style.height = `${this.noSearchResultHeight}px`;
-  }
+  name: 'NoSearchResult'
 };
 </script>
diff --git a/app/javascript/vue/global_search/groups/sort_flyout.vue b/app/javascript/vue/global_search/groups/helpers/sort_flyout.vue
similarity index 92%
rename from app/javascript/vue/global_search/groups/sort_flyout.vue
rename to app/javascript/vue/global_search/groups/helpers/sort_flyout.vue
index 921ebae89..cb4a8e26d 100644
--- a/app/javascript/vue/global_search/groups/sort_flyout.vue
+++ b/app/javascript/vue/global_search/groups/helpers/sort_flyout.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import MenuDropdown from '../../shared/menu_dropdown.vue';
+import MenuDropdown from '../../../shared/menu_dropdown.vue';
 
 export default {
   name: 'SortFlyout',
diff --git a/app/javascript/vue/global_search/groups/label_templates.vue b/app/javascript/vue/global_search/groups/label_templates.vue
index 520e6e7af..9b3ce17c0 100644
--- a/app/javascript/vue/global_search/groups/label_templates.vue
+++ b/app/javascript/vue/global_search/groups/label_templates.vue
@@ -10,42 +10,23 @@
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
       <div class="grid grid-cols-[auto_110px_auto_auto_auto_auto] items-center">
-        <template v-for="row in preparedResults" :key="row.id">
-          <a :href="row.attributes.url" class="h-full py-2 px-4 overflow-hidden font-bold border-0 border-b border-solid border-sn-light-grey">
-            <StringWithEllipsis class="w-full" :text="row.attributes.name"></StringWithEllipsis>
-          </a>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.format') }}:</b>
-            <span class="shrink-0">{{ row.attributes.format }}</span>
-          </div>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.created_at') }}:</b>
-            <span class="shrink-0">{{ row.attributes.created_at }}</span>
-          </div>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.updated_at') }}:</b>
-            <span class="shrink-0">{{ row.attributes.updated_at }}</span>
-          </div>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.created_by') }}:</b>
-            <img v-if="row.attributes.created_by.avatar_url" :src="row.attributes.created_by.avatar_url" class="w-5 h-5 border border-sn-super-light-grey rounded-full mx-1" />
-            <span class="shrink-0">{{ row.attributes.created_by.name }}</span>
-          </div>
-          <div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.team') }}:</b>
-            <a :href="row.attributes.team.url" class="shrink-0 overflow-hidden">
-              <StringWithEllipsis class="w-full" :text="row.attributes.team.name"></StringWithEllipsis>
-            </a>
-          </div>
-        </template>
+        <div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
+          <hr class="col-span-6 w-full m-0" v-if="index > 0">
+          <LinkTemplate :url="row.attributes.url" :value="row.attributes.name"/>
+          <CellTemplate :label="i18n.t('search.index.format')" :value="row.attributes.format"/>
+          <CellTemplate :label="i18n.t('search.index.created_at')" :value="row.attributes.created_at"/>
+          <CellTemplate :label="i18n.t('search.index.updated_at')" :value="row.attributes.updated_at"/>
+          <CellTemplate :label="i18n.t('search.index.created_by')" :avatar="row.attributes.created_by.avatar_url" :value="row.attributes.created_by.name"/>
+          <CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
+        </div>
       </div>
       <div v-if="viewAll" class="mt-4">
         <button class="btn btn-light" @click="$emit('selectGroup', 'LabelTemplatesComponent')">View all</button>
       </div>
     </template>
-    <Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
-            :loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
-    <NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight"  />
+    <Loader v-if="loading" :loaderRows="loaderRows" />
+    <ListEnd v-if="reachedEnd" />
+    <NoSearchResult v-else-if="showNoSearchResult"  />
   </div>
 </template>
 
diff --git a/app/javascript/vue/global_search/groups/my_module_protocols.vue b/app/javascript/vue/global_search/groups/my_module_protocols.vue
index fcc60a5d9..2bbe8aff9 100644
--- a/app/javascript/vue/global_search/groups/my_module_protocols.vue
+++ b/app/javascript/vue/global_search/groups/my_module_protocols.vue
@@ -10,53 +10,24 @@
       <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
     </div>
       <div class="grid grid-cols-[auto_80px_auto_auto_auto_auto_auto] items-center">
-        <template v-for="row in preparedResults" :key="row.id">
-          <a :href="row.attributes.url" target="_blank" class="h-full py-2 px-4 overflow-hidden font-bold border-0 border-b border-solid border-sn-light-grey">
-            <StringWithEllipsis class="w-full"
-              :text="labelName({ name: row.attributes.name, archived: row.attributes.archived})">
-            </StringWithEllipsis>
-          </a>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.id') }}:</b>
-            <span class="shrink-0">{{ row.attributes.code }}</span>
-          </div>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey max-w-[200px]">
-            <b class="shrink-0">{{ i18n.t('search.index.created_at') }}:</b>
-            <span class="truncate">{{ row.attributes.created_at }}</span>
-          </div>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey max-w-[200px]">
-            <b class="shrink-0">{{ i18n.t('search.index.updated_at') }}:</b>
-            <span class="truncate">{{ row.attributes.updated_at }}</span>
-          </div>
-          <div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.team') }}:</b>
-            <a :href="row.attributes.team.url" class="shrink-0 overflow-hidden" target="_blank">
-              <StringWithEllipsis class="w-full" :text="row.attributes.team.name"></StringWithEllipsis>
-            </a>
-          </div>
-          <div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.task') }}:</b>
-            <a :href="row.attributes.my_module.url" class="shrink-0 overflow-hidden" target="_blank">
-              <StringWithEllipsis class="w-full" :text="labelName(row.attributes.my_module)"></StringWithEllipsis>
-            </a>
-          </div>
-          <div class="h-full py-2 px-4 border-0 border-b border-solid border-sn-light-grey">
-            <div class="grid grid-cols-[auto_1fr] items-center gap-1 text-xs w-full">
-              <b class="shrink-0">{{ i18n.t('search.index.experiment') }}:</b>
-              <a :href="row.attributes.experiment.url" class="shrink-0 overflow-hidden" target="_blank">
-                <StringWithEllipsis class="w-full" :text="labelName(row.attributes.experiment)"></StringWithEllipsis>
-              </a>
-            </div>
-          </div>
-        </template>
+        <div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
+          <hr class="col-span-7 w-full m-0" v-if="index > 0">
+          <LinkTemplate :url="row.attributes.url" :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>
+          <CellTemplate :label="i18n.t('search.index.id')" :value="row.attributes.code"/>
+          <CellTemplate :label="i18n.t('search.index.created_at')" :value="row.attributes.created_at"/>
+          <CellTemplate :label="i18n.t('search.index.updated_at')" :value="row.attributes.updated_at"/>
+          <CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
+          <CellTemplate :label="i18n.t('search.index.task')" :url="row.attributes.my_module.url" :value="labelName(row.attributes.my_module)"/>
+          <CellTemplate :label="i18n.t('search.index.experiment')" :url="row.attributes.experiment.url" :value="labelName(row.attributes.experiment)"/>
+        </div>
       </div>
       <div v-if="viewAll" class="mt-4">
         <button class="btn btn-light" @click="$emit('selectGroup', 'MyModuleProtocolsComponent')">View all</button>
       </div>
     </template>
-    <Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
-            :loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
-    <NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight"  />
+    <Loader v-if="loading" :loaderRows="loaderRows" />
+    <ListEnd v-if="reachedEnd" />
+    <NoSearchResult v-else-if="showNoSearchResult" />
   </div>
 </template>
 
diff --git a/app/javascript/vue/global_search/groups/my_modules.vue b/app/javascript/vue/global_search/groups/my_modules.vue
index 3c0c875fc..f62f690e8 100644
--- a/app/javascript/vue/global_search/groups/my_modules.vue
+++ b/app/javascript/vue/global_search/groups/my_modules.vue
@@ -10,47 +10,23 @@
       <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
     </div>
       <div class="grid grid-cols-[auto_80px_auto_auto_auto_auto] items-center">
-        <template v-for="row in preparedResults" :key="row.id">
-          <a :href="row.attributes.url" target="_blank" class="h-full py-2 px-4 overflow-hidden font-bold border-0 border-b border-solid border-sn-light-grey">
-            <StringWithEllipsis class="w-full"
-              :text="labelName({ name: row.attributes.name, archived: row.attributes.archived})">
-            </StringWithEllipsis>
-          </a>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.id') }}:</b>
-            <span class="shrink-0">{{ row.attributes.code }}</span>
-          </div>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey max-w-[200px]">
-            <b class="shrink-0">{{ i18n.t('search.index.created_at') }}:</b>
-            <span class="truncate">{{ row.attributes.created_at }}</span>
-          </div>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey max-w-[200px]">
-            <b class="shrink-0">{{ i18n.t('search.index.updated_at') }}:</b>
-            <span class="truncate">{{ row.attributes.updated_at }}</span>
-          </div>
-          <div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.team') }}:</b>
-            <a :href="row.attributes.team.url" class="shrink-0 overflow-hidden" target="_blank">
-              <StringWithEllipsis class="w-full" :text="row.attributes.team.name"></StringWithEllipsis>
-            </a>
-          </div>
-          <div class="h-full py-2 px-4 border-0 border-b border-solid border-sn-light-grey">
-            <div class="grid grid-cols-[auto_1fr] items-center gap-1 text-xs w-full">
-              <b class="shrink-0">{{ i18n.t('search.index.experiment') }}:</b>
-              <a :href="row.attributes.experiment.url" class="shrink-0 overflow-hidden" target="_blank">
-                <StringWithEllipsis class="w-full" :text="labelName(row.attributes.experiment)"></StringWithEllipsis>
-              </a>
-            </div>
-          </div>
-        </template>
+        <div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
+          <hr class="col-span-6 w-full m-0" v-if="index > 0">
+          <LinkTemplate :url="row.attributes.url" :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>
+          <CellTemplate :label="i18n.t('search.index.id')" :value="row.attributes.code"/>
+          <CellTemplate :label="i18n.t('search.index.created_at')" :value="row.attributes.created_at"/>
+          <CellTemplate :label="i18n.t('search.index.updated_at')" :value="row.attributes.updated_at"/>
+          <CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
+          <CellTemplate :label="i18n.t('search.index.experiment')" :url="row.attributes.experiment.url" :value="labelName(row.attributes.experiment)"/>
+        </div>
       </div>
       <div v-if="viewAll" class="mt-4">
         <button class="btn btn-light" @click="$emit('selectGroup', 'MyModulesComponent')">View all</button>
       </div>
     </template>
-    <Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
-            :loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
-    <NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight"  />
+    <Loader v-if="loading" :loaderRows="loaderRows" />
+    <ListEnd v-if="reachedEnd" />
+    <NoSearchResult v-else-if="showNoSearchResult"  />
   </div>
 </template>
 
diff --git a/app/javascript/vue/global_search/groups/projects.vue b/app/javascript/vue/global_search/groups/projects.vue
index a73d1ecf3..6b6d93eae 100644
--- a/app/javascript/vue/global_search/groups/projects.vue
+++ b/app/javascript/vue/global_search/groups/projects.vue
@@ -10,49 +10,28 @@
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
       <div class="grid grid-cols-[auto_80px_auto_auto_auto] items-center">
-        <template v-for="row in preparedResults" :key="row.id">
-          <a :href="row.attributes.url" class="h-full py-2 px-4 overflow-hidden font-bold border-0 border-b border-solid border-sn-light-grey">
-            <StringWithEllipsis class="w-full"
-              :text="labelName({ name: row.attributes.name, archived: row.attributes.archived})">
-            </StringWithEllipsis>
-          </a>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.id') }}:</b>
-            <span class="shrink-0">{{ row.attributes.code }}</span>
-          </div>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.created_at') }}:</b>
-            <span class="shrink-0">{{ row.attributes.created_at }}</span>
-          </div>
-          <div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.team') }}:</b>
-            <a :href="row.attributes.team.url" class="shrink-0 overflow-hidden">
-              <StringWithEllipsis class="w-full" :text="row.attributes.team.name"></StringWithEllipsis>
-            </a>
-          </div>
-          <div class="h-full py-2 px-4 border-0 border-b border-solid border-sn-light-grey">
-            <template v-if="row.attributes.folder">
-              <div class="grid grid-cols-[auto_1fr] items-center gap-1 text-xs w-full">
-                <b class="shrink-0">{{ i18n.t('search.index.folder') }}:</b>
-                <a :href="row.attributes.folder.url" class="shrink-0 overflow-hidden">
-                  <StringWithEllipsis class="w-full" :text="labelName(row.attributes.folder)"></StringWithEllipsis>
-                </a>
-              </div>
-            </template>
-          </div>
-        </template>
+        <div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
+          <hr class="col-span-5 w-full m-0" v-if="index > 0">
+          <LinkTemplate :url="row.attributes.url" :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>
+          <CellTemplate :label="i18n.t('search.index.id')" :value="row.attributes.code"/>
+          <CellTemplate :label="i18n.t('search.index.created_at')" :value="row.attributes.created_at"/>
+          <CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
+          <CellTemplate :label="i18n.t('search.index.folder')" :visible="row.attributes.folder"
+                        :url="row.attributes.folder?.url" :value="labelName(row.attributes.folder)"/>
+        </div>
       </div>
       <div v-if="viewAll" class="mt-4">
         <button class="btn btn-light" @click="$emit('selectGroup', 'ProjectsComponent')">View all</button>
       </div>
     </template>
-    <Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
-            :loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
-    <NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight"  />
+    <Loader v-if="loading" :loaderRows="loaderRows" />
+    <ListEnd v-if="reachedEnd" />
+    <NoSearchResult v-else-if="showNoSearchResult"  />
   </div>
 </template>
 
 <script>
+import Link_template from './helpers/link_template.vue';
 import searchMixin from './search_mixin';
 
 export default {
diff --git a/app/javascript/vue/global_search/groups/protocols.vue b/app/javascript/vue/global_search/groups/protocols.vue
index 9df4b0b7a..fb3e06b52 100644
--- a/app/javascript/vue/global_search/groups/protocols.vue
+++ b/app/javascript/vue/global_search/groups/protocols.vue
@@ -10,44 +10,23 @@
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
       <div class="grid grid-cols-[auto_110px_auto_auto_auto_auto] items-center">
-        <template v-for="row in preparedResults" :key="row.id">
-          <a :href="row.attributes.url" class="h-full py-2 px-4 overflow-hidden font-bold border-0 border-b border-solid border-sn-light-grey">
-            <StringWithEllipsis class="w-full"
-              :text="labelName({ name: row.attributes.name, archived: row.attributes.archived})">
-            </StringWithEllipsis>
-          </a>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.id') }}:</b>
-            <span class="shrink-0">{{ row.attributes.code }}</span>
-          </div>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.created_at') }}:</b>
-            <span class="shrink-0">{{ row.attributes.created_at }}</span>
-          </div>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.updated_at') }}:</b>
-            <span class="shrink-0">{{ row.attributes.updated_at }}</span>
-          </div>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.created_by') }}:</b>
-            <img :src="row.attributes.created_by.avatar_url" class="w-5 h-5 border border-sn-super-light-grey rounded-full mx-1" />
-            <span class="shrink-0">{{ row.attributes.created_by.name }}</span>
-          </div>
-          <div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.team') }}:</b>
-            <a :href="row.attributes.team.url" class="shrink-0 overflow-hidden">
-              <StringWithEllipsis class="w-full" :text="row.attributes.team.name"></StringWithEllipsis>
-            </a>
-          </div>
-        </template>
+        <div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
+          <hr class="col-span-6 w-full m-0" v-if="index > 0">
+          <LinkTemplate :url="row.attributes.url" :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>
+          <CellTemplate :label="i18n.t('search.index.id')" :value="row.attributes.code"/>
+          <CellTemplate :label="i18n.t('search.index.created_at')" :value="row.attributes.created_at"/>
+          <CellTemplate :label="i18n.t('search.index.updated_at')" :value="row.attributes.updated_at"/>
+          <CellTemplate :label="i18n.t('search.index.created_by')" :avatar="row.attributes.created_by.avatar_url" :value="row.attributes.created_by.name"/>
+          <CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
+        </div>
       </div>
       <div v-if="viewAll" class="mt-4">
         <button class="btn btn-light" @click="$emit('selectGroup', 'ProtocolsComponent')">View all</button>
       </div>
     </template>
-    <Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
-              :loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
-    <NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight"  />
+    <Loader v-if="loading" :loaderRows="loaderRows" />
+    <ListEnd v-if="reachedEnd" />
+    <NoSearchResult v-else-if="showNoSearchResult" />
   </div>
 </template>
 
diff --git a/app/javascript/vue/global_search/groups/reports.vue b/app/javascript/vue/global_search/groups/reports.vue
index d36cd14d5..3b1186c11 100644
--- a/app/javascript/vue/global_search/groups/reports.vue
+++ b/app/javascript/vue/global_search/groups/reports.vue
@@ -10,50 +10,24 @@
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
       <div class="grid grid-cols-[auto_110px_auto_auto_auto_auto_auto] items-center">
-        <template v-for="row in preparedResults" :key="row.id">
-          <a target="_blank" :href="row.attributes.url" class="h-full py-2 px-4 overflow-hidden font-bold border-0 border-b border-solid border-sn-light-grey">
-            <StringWithEllipsis class="w-full" :text="row.attributes.name"></StringWithEllipsis>
-          </a>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.id') }}:</b>
-            <span class="shrink-0">{{ row.attributes.code }}</span>
-          </div>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.created_at') }}:</b>
-            <span class="shrink-0">{{ row.attributes.created_at }}</span>
-          </div>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.updated_at') }}:</b>
-            <span class="shrink-0">{{ row.attributes.updated_at }}</span>
-          </div>
-          <div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.created_by') }}:</b>
-            <div class="truncate">
-              <img :src="row.attributes.created_by.avatar_url" class="w-5 h-5 border border-sn-super-light-grey rounded-full mx-1" />
-              <span class="truncate">{{ row.attributes.created_by.name }}</span>
-            </div>
-          </div>
-          <div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.team') }}:</b>
-            <a target="_blank" :href="row.attributes.team.url" class="shrink-0 overflow-hidden">
-              <StringWithEllipsis class="w-full" :text="row.attributes.team.name"></StringWithEllipsis>
-            </a>
-          </div>
-          <div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.project') }}:</b>
-            <a target="_blank" :href="row.attributes.project.url" class="shrink-0 overflow-hidden">
-              <StringWithEllipsis class="w-full" :text="labelName(row.attributes.project)"></StringWithEllipsis>
-            </a>
-          </div>
-        </template>
+        <div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
+          <hr class="col-span-7 w-full m-0" v-if="index > 0">
+          <LinkTemplate :url="row.attributes.url" :value="row.attributes.name"/>
+          <CellTemplate :label="i18n.t('search.index.id')" :value="row.attributes.code"/>
+          <CellTemplate :label="i18n.t('search.index.created_at')" :value="row.attributes.created_at"/>
+          <CellTemplate :label="i18n.t('search.index.updated_at')" :value="row.attributes.updated_at"/>
+          <CellTemplate :label="i18n.t('search.index.created_by')" :avatar="row.attributes.created_by.avatar_url" :value="row.attributes.created_by.name"/>
+          <CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
+          <CellTemplate :label="i18n.t('search.index.project')" :url="row.attributes.project.url" :value="labelName(row.attributes.project)"/>
+        </div>
       </div>
       <div v-if="viewAll" class="mt-4">
         <button class="btn btn-light" @click="$emit('selectGroup', 'ReportsComponent')">View all</button>
       </div>
     </template>
-    <Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
-              :loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
-    <NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight"  />
+    <Loader v-if="loading" :loaderRows="loaderRows" />
+    <ListEnd v-if="reachedEnd" />
+    <NoSearchResult v-else-if="showNoSearchResult"  />
   </div>
 </template>
 
diff --git a/app/javascript/vue/global_search/groups/repository_rows.vue b/app/javascript/vue/global_search/groups/repository_rows.vue
index 34932ebd8..20555fe52 100644
--- a/app/javascript/vue/global_search/groups/repository_rows.vue
+++ b/app/javascript/vue/global_search/groups/repository_rows.vue
@@ -10,46 +10,23 @@
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
       <div class="grid grid-cols-[auto_110px_auto_auto_auto_auto] items-center">
-        <template v-for="row in preparedResults" :key="row.id">
-          <a :href="row.attributes.url" class="h-full py-2 px-4 overflow-hidden font-bold border-0 border-b border-solid border-sn-light-grey">
-            <StringWithEllipsis class="w-full"
-              :text="labelName({ name: row.attributes.name, archived: row.attributes.archived})">
-            </StringWithEllipsis>
-          </a>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.id') }}:</b>
-            <span class="shrink-0">{{ row.attributes.code }}</span>
-          </div>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.created_at') }}:</b>
-            <span class="shrink-0">{{ row.attributes.created_at }}</span>
-          </div>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.created_by') }}:</b>
-            <img :src="row.attributes.created_by.avatar_url" class="w-5 h-5 border border-sn-super-light-grey rounded-full mx-1" />
-            <span class="shrink-0">{{ row.attributes.created_by.name }}</span>
-          </div>
-          <div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.team') }}:</b>
-            <a :href="row.attributes.team.url" class="shrink-0 overflow-hidden">
-              <StringWithEllipsis class="w-full" :text="row.attributes.team.name"></StringWithEllipsis>
-            </a>
-          </div>
-          <div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.repository') }}:</b>
-            <a :href="row.attributes.repository.url" class="shrink-0 overflow-hidden">
-              <StringWithEllipsis class="w-full" :text="labelName(row.attributes.repository)"></StringWithEllipsis>
-            </a>
-          </div>
-        </template>
+        <div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
+          <hr class="col-span-6 w-full m-0" v-if="index > 0">
+          <LinkTemplate :url="row.attributes.url" :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>
+          <CellTemplate :label="i18n.t('search.index.id')" :value="row.attributes.code"/>
+          <CellTemplate :label="i18n.t('search.index.created_at')" :value="row.attributes.created_at"/>
+          <CellTemplate :label="i18n.t('search.index.created_by')" :avatar="row.attributes.created_by.avatar_url" :value="row.attributes.created_by.name"/>
+          <CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
+          <CellTemplate :label="i18n.t('search.index.repository')" :url="row.attributes.repository.url" :value="labelName(row.attributes.repository)"/>
+        </div>
       </div>
       <div v-if="viewAll" class="mt-4">
         <button class="btn btn-light" @click="$emit('selectGroup', 'RepositoryRowsComponent')">View all</button>
       </div>
     </template>
-    <Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
-              :loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
-    <NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight"  />
+    <Loader v-if="loading" :loaderRows="loaderRows" />
+    <ListEnd v-if="reachedEnd" />
+    <NoSearchResult v-else-if="showNoSearchResult"  />
   </div>
 </template>
 
diff --git a/app/javascript/vue/global_search/groups/results.vue b/app/javascript/vue/global_search/groups/results.vue
index 064a6ee53..11029c48a 100644
--- a/app/javascript/vue/global_search/groups/results.vue
+++ b/app/javascript/vue/global_search/groups/results.vue
@@ -10,49 +10,23 @@
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
       <div class="grid grid-cols-[auto_auto_auto_auto_auto_auto] items-center">
-        <template v-for="row in preparedResults" :key="row.id">
-          <a :href="row.attributes.url" target="_blank" class="h-full py-2 px-4 overflow-hidden font-bold border-0 border-b border-solid border-sn-light-grey">
-            <StringWithEllipsis class="w-full"
-              :text="labelName({ name: row.attributes.name, archived: row.attributes.archived})">
-            </StringWithEllipsis>
-          </a>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey max-w-[200px]">
-            <b class="shrink-0">{{ i18n.t('search.index.created_at') }}:</b>
-            <span class="truncate">{{ row.attributes.created_at }}</span>
-          </div>
-          <div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey max-w-[200px]">
-            <b class="shrink-0">{{ i18n.t('search.index.updated_at') }}:</b>
-            <span class="truncate">{{ row.attributes.updated_at }}</span>
-          </div>
-          <div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.team') }}:</b>
-            <a :href="row.attributes.team.url" class="shrink-0 overflow-hidden" target="_blank">
-              <StringWithEllipsis class="w-full" :text="row.attributes.team.name"></StringWithEllipsis>
-            </a>
-          </div>
-          <div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
-            <b class="shrink-0">{{ i18n.t('search.index.task') }}:</b>
-            <a :href="row.attributes.my_module.url" class="shrink-0 overflow-hidden" target="_blank">
-              <StringWithEllipsis class="w-full" :text="labelName(row.attributes.my_module)"></StringWithEllipsis>
-            </a>
-          </div>
-          <div class="h-full py-2 px-4 border-0 border-b border-solid border-sn-light-grey">
-            <div class="grid grid-cols-[auto_1fr] items-center gap-1 text-xs w-full">
-              <b class="shrink-0">{{ i18n.t('search.index.experiment') }}:</b>
-              <a :href="row.attributes.experiment.url" class="shrink-0 overflow-hidden" target="_blank">
-                <StringWithEllipsis class="w-full" :text="labelName(row.attributes.experiment)"></StringWithEllipsis>
-              </a>
-            </div>
-          </div>
-        </template>
+        <div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
+          <hr class="col-span-6 w-full m-0" v-if="index > 0">
+          <LinkTemplate :url="row.attributes.url" :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>
+          <CellTemplate :label="i18n.t('search.index.created_at')" :value="row.attributes.created_at"/>
+          <CellTemplate :label="i18n.t('search.index.updated_at')" :value="row.attributes.updated_at"/>
+          <CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
+          <CellTemplate :label="i18n.t('search.index.task')" :url="row.attributes.my_module.url" :value="labelName(row.attributes.my_module)"/>
+          <CellTemplate :label="i18n.t('search.index.experiment')" :url="row.attributes.experiment.url" :value="labelName(row.attributes.experiment)"/>
+        </div>
       </div>
       <div v-if="viewAll" class="mt-4">
         <button class="btn btn-light" @click="$emit('selectGroup', 'ResultsComponent')">View all</button>
       </div>
     </template>
-    <Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
-              :loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
-    <NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight"  />
+    <Loader v-if="loading" :loaderRows="loaderRows" />
+    <ListEnd v-if="reachedEnd" />
+    <NoSearchResult v-else-if="showNoSearchResult" />
   </div>
 </template>
 
diff --git a/app/javascript/vue/global_search/groups/search_mixin.js b/app/javascript/vue/global_search/groups/search_mixin.js
index 3fa527e06..634c7cded 100644
--- a/app/javascript/vue/global_search/groups/search_mixin.js
+++ b/app/javascript/vue/global_search/groups/search_mixin.js
@@ -1,8 +1,11 @@
 import axios from '../../../packs/custom_axios.js';
 import StringWithEllipsis from '../../shared/string_with_ellipsis.vue';
-import SortFlyout from './sort_flyout.vue';
+import SortFlyout from './helpers/sort_flyout.vue';
 import Loader from '../loader.vue';
-import NoSearchResult from '../no_search_result.vue';
+import ListEnd from './helpers/list_end.vue';
+import NoSearchResult from './helpers/no_search_result.vue';
+import CellTemplate from './helpers/cell_template.vue';
+import LinkTemplate from './helpers/link_template.vue';
 /* global GLOBAL_CONSTANTS I18n */
 
 export default {
@@ -16,7 +19,10 @@ export default {
     StringWithEllipsis,
     SortFlyout,
     Loader,
-    NoSearchResult
+    NoSearchResult,
+    ListEnd,
+    CellTemplate,
+    LinkTemplate
   },
   data() {
     return {
@@ -27,10 +33,6 @@ export default {
       page: 1,
       disabled: false,
       fullDataLoaded: false,
-      loaderHeight: 24,
-      loaderGap: 10,
-      loaderYPadding: 10,
-      noSearchResultHeight: 0
     };
   },
   watch: {
@@ -69,20 +71,10 @@ export default {
       return !this.selected && this.total > GLOBAL_CONSTANTS.GLOBAL_SEARCH_PREVIEW_LIMIT;
     },
     loaderRows() {
-      // h-[24px] gap-y-[10px] py-[10px]
-      if (this.loading && (!this.selected || this.total)) return GLOBAL_CONSTANTS.GLOBAL_SEARCH_PREVIEW_LIMIT;
-      if (this.selected && this.loading) {
-        const availableHeight = window.innerHeight - this.$refs.content.getBoundingClientRect().top;
-        // loaderHeight + loaderGap +  headerLoaderHeight + headerContentGap
-        const offSet = this.loaderHeight + this.loaderGap + 32 + 20;
-
-        return Math.floor((availableHeight - offSet) / (this.loaderHeight + this.loaderGap + (2 * this.loaderYPadding)));
-      }
-
-      return 0;
+      return !this.selected ? 4 : 20;
     },
     reachedEnd() {
-      return Math.ceil(this.total / GLOBAL_CONSTANTS.SEARCH_LIMIT) === this.page;
+      return !this.page && this.selected;
     },
     showNoSearchResult() {
       return this.selected && !this.loading && !this.results.length;
@@ -90,6 +82,8 @@ export default {
   },
   methods: {
     labelName(object) {
+      if (!object) return '';
+
       if (!object.archived) return object.name;
 
       return `${I18n.t('labels.archived')} ${object.name}`;
@@ -130,10 +124,6 @@ export default {
           this.disabled = response.data.meta.disabled;
           this.loading = false;
           this.page = response.data.meta.next_page;
-          if (this.results.length === 0 && this.selected) {
-            const availableHeight = window.innerHeight - this.$refs.content.getBoundingClientRect().top;
-            this.noSearchResultHeight = availableHeight - 20;
-          }
         })
         .finally(() => {
           this.loading = false;
diff --git a/app/javascript/vue/global_search/loader.vue b/app/javascript/vue/global_search/loader.vue
index 886eab3a8..a11f038d6 100644
--- a/app/javascript/vue/global_search/loader.vue
+++ b/app/javascript/vue/global_search/loader.vue
@@ -1,28 +1,16 @@
 <template>
-  <div class="flex flex-col gap-6">
-    <div v-if="!total" class="grid grid-cols-[32px_auto] gap-2.5">
-      <div class="h-8 w-8 animate-skeleton rounded"></div>
-      <div class="h-8 w-40 animate-skeleton rounded"></div>
-    </div>
-    <div class="flex flex-col" :class="[`gap-[${loaderGap}px]`]">
-      <div v-for="_count in loaderRows"
-          class="flex items-center no-wrap border-0 border-b border-solid border-sn-light-grey gap-x-8"
-          :class="[`gap-y-[${loaderGap}px]`, `py-[${loaderYPadding}px]`, { 'first:border-t': total }]">
-        <div class="w-[500px] grow-1" :class="`h-[${loaderHeight}px]`">
-          <div class="h-full w-80 animate-skeleton rounded mr-auto"></div>
-        </div>
-        <div :class="`h-[${loaderHeight}px]`" class="w-24 max-w-24 animate-skeleton rounded"></div>
-        <div :class="`h-[${loaderHeight}px]`" class="w-44 max-w-44 animate-skeleton rounded"></div>
-        <div :class="`h-[${loaderHeight}px]`" class="w-44 max-w-44 animate-skeleton rounded"></div>
-        <div :class="`h-[${loaderHeight}px]`" class="w-56 max-w-56 animate-skeleton rounded"></div>
-        <div :class="`h-[${loaderHeight}px]`" class="w-96 max-w-96 animate-skeleton rounded"></div>
+  <div class="flex flex-col">
+    <div v-for="_count in loaderRows"
+        class="flex items-center no-wrap border-0 gap-2 py-2 border-b border-solid border-sn-light-grey gap-x-8"
+      >
+      <div class="w-[500px] grow-1 h-6">
+        <div class="h-full w-80 animate-skeleton rounded mr-auto"></div>
       </div>
-    </div>
-    <div v-if="reachedEnd" class="flex items-center mb-6">
-      <p class="text-sm text-sn-blue flex items-center gap-3 m-auto">
-        <span class="sn-icon sn-icon-flag"></span>
-        <span>{{ i18n.t('search.index.reached_end') }}</span>
-      </p>
+      <div class="w-24 max-w-24 animate-skeleton rounded h-6"></div>
+      <div class="w-44 max-w-44 animate-skeleton rounded h-6"></div>
+      <div class="w-44 max-w-44 animate-skeleton rounded h-6"></div>
+      <div class="w-56 max-w-56 animate-skeleton rounded h-6"></div>
+      <div class="w-96 max-w-96 animate-skeleton rounded h-6"></div>
     </div>
   </div>
 </template>
@@ -32,12 +20,7 @@
 export default {
   name: 'Loader',
   props: {
-    total: { type: Number, default: 0 },
     loaderRows: { type: Number, default: 0 },
-    loaderHeight: { type: Number, required: true },
-    loaderGap: { type: Number, required: true },
-    loaderYPadding: { type: Number, required: true },
-    reachedEnd: { type: Boolean }
   }
 };
 </script>