diff --git a/ee/app/assets/javascripts/admin/data_management/components/app.vue b/ee/app/assets/javascripts/admin/data_management/components/app.vue
index 53c83fd508a18fb5b45817d5a3eedf22bc219a49..8afe196ea6685604ae1ee7794a2e366b58435512 100644
--- a/ee/app/assets/javascripts/admin/data_management/components/app.vue
+++ b/ee/app/assets/javascripts/admin/data_management/components/app.vue
@@ -12,12 +12,14 @@ import { setUrlParams, visitUrl } from '~/lib/utils/url_utility';
 import { createAlert } from '~/alert';
 import { getModels } from 'ee/api/data_management_api';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import DataManagementItem from 'ee/admin/data_management/components/data_management_item.vue';
 
 export default {
   name: 'AdminDataManagementApp',
   components: {
     GeoListTopBar,
     GeoList,
+    DataManagementItem,
   },
   props: {
     modelClass: {
@@ -96,11 +98,7 @@ export default {
       @listboxChange="handleListboxChange"
     />
     <geo-list :is-loading="isLoading" :has-items="hasItems" :empty-state="emptyState">
-      <ul>
-        <li v-for="modelItem in modelItems" :key="modelItem.recordIdentifier">
-          {{ modelItem.recordIdentifier }}
-        </li>
-      </ul>
+      <data-management-item v-for="item in modelItems" :key="item.recordIdentifier" :item="item" />
     </geo-list>
   </div>
 </template>
diff --git a/ee/app/assets/javascripts/admin/data_management/components/data_management_item.vue b/ee/app/assets/javascripts/admin/data_management/components/data_management_item.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cd032a0142f9f91130d6caa91ee1186ed0a64ab8
--- /dev/null
+++ b/ee/app/assets/javascripts/admin/data_management/components/data_management_item.vue
@@ -0,0 +1,56 @@
+<script>
+import { sprintf } from '@gitlab/ui/src/utils/i18n';
+import GeoListItem from 'ee/geo_shared/list/components/geo_list_item.vue';
+import { __, s__ } from '~/locale';
+import { numberToHumanSize } from '~/lib/utils/number_utils';
+
+export default {
+  i18n: {
+    created: __('Created'),
+    unknown: __('Unknown'),
+    lastChecksum: s__('Geo|Last checksum'),
+  },
+  components: {
+    GeoListItem,
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    timeAgoArray() {
+      return [
+        {
+          label: this.$options.i18n.created,
+          dateString: this.item.createdAt,
+          defaultText: this.$options.i18n.unknown,
+        },
+        {
+          label: this.$options.i18n.lastChecksum,
+          dateString: this.item.checksumInformation?.lastChecksum,
+          defaultText: this.$options.i18n.unknown,
+        },
+      ];
+    },
+    name() {
+      return `${this.item.modelClass}/${this.item.recordIdentifier}`;
+    },
+    size() {
+      const { fileSize } = this.item;
+      const hasFileSize = fileSize != null;
+
+      return sprintf(s__('Geo|Storage: %{size}'), {
+        size: hasFileSize ? numberToHumanSize(fileSize) : this.$options.i18n.unknown,
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <geo-list-item :name="name" :time-ago-array="timeAgoArray">
+    <template #extra-details>{{ size }}</template>
+  </geo-list-item>
+</template>
diff --git a/ee/spec/frontend/admin/data_management/components/app_spec.js b/ee/spec/frontend/admin/data_management/components/app_spec.js
index 05a12d8d7d1a6c9840427b682a87089194d3a8d4..d07db04f1fe981b80f0a5373bce488f6d29eb8bb 100644
--- a/ee/spec/frontend/admin/data_management/components/app_spec.js
+++ b/ee/spec/frontend/admin/data_management/components/app_spec.js
@@ -10,6 +10,8 @@ import { TEST_HOST } from 'spec/test_constants';
 import { getModels } from 'ee/api/data_management_api';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert } from '~/alert';
+import DataManagementItem from 'ee/admin/data_management/components/data_management_item.vue';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
 jest.mock('~/lib/utils/url_utility', () => ({
   ...jest.requireActual('~/lib/utils/url_utility'),
@@ -31,6 +33,7 @@ describe('AdminDataManagementApp', () => {
 
   const findGeoListTopBar = () => wrapper.findComponent(GeoListTopBar);
   const findGeoList = () => wrapper.findComponent(GeoList);
+  const findDataManagementItem = () => wrapper.findComponent(DataManagementItem);
 
   beforeEach(() => {
     createComponent();
@@ -86,12 +89,10 @@ describe('AdminDataManagementApp', () => {
       });
 
       it('renders items on GeoList', () => {
-        expect(findGeoList().props('hasItems')).toBe(true);
-        expect(findGeoList().findAll('li')).toHaveLength(models.length);
+        const [item] = convertObjectPropsToCamelCase(models, { deep: true });
 
-        models.forEach((model) => {
-          expect(findGeoList().text()).toContain(`${model.record_identifier}`);
-        });
+        expect(findGeoList().props('hasItems')).toBe(true);
+        expect(findDataManagementItem().props()).toMatchObject({ item });
       });
 
       it('stops loading state', () => {
diff --git a/ee/spec/frontend/admin/data_management/components/data_management_item_spec.js b/ee/spec/frontend/admin/data_management/components/data_management_item_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..5c0fe42f310ec019b8781d08f2ade7bd0413cc98
--- /dev/null
+++ b/ee/spec/frontend/admin/data_management/components/data_management_item_spec.js
@@ -0,0 +1,66 @@
+import { shallowMount } from '@vue/test-utils';
+import models from 'test_fixtures/api/admin/data_management/snippet_repository.json';
+import DataManagementItem from 'ee/admin/data_management/components/data_management_item.vue';
+import GeoListItem from 'ee/geo_shared/list/components/geo_list_item.vue';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+
+describe('DataManagementItem', () => {
+  let wrapper;
+
+  const [model] = convertObjectPropsToCamelCase(models, { deep: true });
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(DataManagementItem, {
+      propsData: {
+        item: model,
+        ...props,
+      },
+    });
+  };
+
+  const findGeoListItem = () => wrapper.findComponent(GeoListItem);
+
+  it('renders GeoListItem with correct props', () => {
+    createComponent();
+
+    expect(findGeoListItem().props()).toMatchObject({
+      name: `${model.modelClass}/${model.recordIdentifier}`,
+      timeAgoArray: [
+        {
+          label: 'Created',
+          dateString: model.createdAt,
+          defaultText: 'Unknown',
+        },
+        {
+          label: 'Last checksum',
+          dateString: model.checksumInformation.lastChecksum,
+          defaultText: 'Unknown',
+        },
+      ],
+    });
+  });
+
+  describe('when fileSize is provided', () => {
+    it('renders size', () => {
+      createComponent({ item: { ...model, fileSize: 1024 } });
+
+      expect(findGeoListItem().text()).toContain('Storage: 1.00 KiB');
+    });
+  });
+
+  describe('when fileSize is 0', () => {
+    it('renders size"', () => {
+      createComponent({ item: { ...model, fileSize: 0 } });
+
+      expect(findGeoListItem().text()).toContain('Storage: 0 B');
+    });
+  });
+
+  describe('when fileSize is not provided', () => {
+    it('renders size as "Unknown"', () => {
+      createComponent({ item: { ...model, fileSize: null } });
+
+      expect(findGeoListItem().text()).toContain('Storage: Unknown');
+    });
+  });
+});
diff --git a/ee/spec/frontend/fixtures/admin/data_management.rb b/ee/spec/frontend/fixtures/admin/data_management.rb
index 17fd16f49f22c880fe8303b2117dc444daeef3f3..955a9e21ae7961fa57c8e9c6fc78774327937d9e 100644
--- a/ee/spec/frontend/fixtures/admin/data_management.rb
+++ b/ee/spec/frontend/fixtures/admin/data_management.rb
@@ -6,9 +6,15 @@
   type: :request, feature_category: :geo_replication do
   include ApiHelpers
   include JavaScriptFixturesHelpers
+  include EE::GeoHelpers
 
   let_it_be(:admin) { create(:admin) }
-  let_it_be(:snippet_repository) { create(:snippet_repository) }
+  let_it_be(:node) { create(:geo_node) }
+  let_it_be(:snippet_repository) { create(:snippet_repository, :verification_succeeded) }
+
+  before do
+    stub_current_geo_node(node)
+  end
 
   it 'api/admin/data_management/snippet_repository.json' do
     get api("/admin/data_management/snippet_repository", admin, admin_mode: true)
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 4c078394ae47dd858be91ea8324f6b804d2fd46b..d42dcd6dbf7d250216ce3218ba742c7b6d06745f 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -29550,6 +29550,9 @@ msgstr ""
 msgid "Geo|LFS Objects"
 msgstr ""
 
+msgid "Geo|Last checksum"
+msgstr ""
+
 msgid "Geo|Last event ID"
 msgstr ""
 
@@ -29883,6 +29886,9 @@ msgstr ""
 msgid "Geo|Storage config"
 msgstr ""
 
+msgid "Geo|Storage: %{size}"
+msgstr ""
+
 msgid "Geo|Succeeded"
 msgstr ""