diff --git a/app/assets/javascripts/homepage/components/activity_widget.vue b/app/assets/javascripts/homepage/components/activity_widget.vue
index c888f20169e8c42564f98fce24434b1469cc53cd..d52acaa3f1fa3403c7048a553645064da9b30dc3 100644
--- a/app/assets/javascripts/homepage/components/activity_widget.vue
+++ b/app/assets/javascripts/homepage/components/activity_widget.vue
@@ -1,25 +1,27 @@
 <script>
+import { nextTick } from 'vue';
+import { s__ } from '~/locale';
+import VisibilityChangeDetector from './visibility_change_detector.vue';
 import { GlAlert, GlSkeletonLoader } from '@gitlab/ui';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import axios from '~/lib/utils/axios_utils';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { localTimeAgo } from '~/lib/utils/datetime_utility';
-import VisibilityChangeDetector from './visibility_change_detector.vue';
 
 const MAX_EVENTS = 10;
 
 export default {
   components: {
+    VisibilityChangeDetector,
     GlAlert,
     GlSkeletonLoader,
-    VisibilityChangeDetector,
   },
   directives: {
     SafeHtml,
   },
   data() {
     return {
-      activityFeedHtml: null,
+      activityItems: [],
       isLoading: true,
       hasError: false,
     };
@@ -30,6 +32,7 @@ export default {
   methods: {
     async reload() {
       this.isLoading = true;
+      this.hasError = false;
 
       try {
         /**
@@ -43,14 +46,14 @@ export default {
         const { data } = await axios.get(
           `/users/${encodeURIComponent(gon.current_username)}/activity?limit=${MAX_EVENTS}&is_personal_homepage=1`,
         );
-        if (data?.html) {
+
+        if (data.html) {
           const parser = new DOMParser();
-          const resp = parser.parseFromString(data.html, 'text/html');
-          const timestamps = resp.querySelectorAll('.js-timeago');
-          if (timestamps.length > 0) {
-            localTimeAgo(timestamps);
-          }
-          this.activityFeedHtml = resp.body.innerHTML;
+          const doc = parser.parseFromString(data.html, 'text/html');
+          const timestamps = doc.querySelectorAll('.js-timeago');
+          if (timestamps.length) localTimeAgo(timestamps);
+          await nextTick();
+          this.parseActivityItems(doc);
         }
       } catch (e) {
         Sentry.captureException(e);
@@ -59,43 +62,91 @@ export default {
         this.isLoading = false;
       }
     },
+
+    parseActivityItems(doc) {
+      this.activityItems = Array.from(doc.querySelectorAll('li')).map((li) => {
+        const timeEl = li.querySelector('.js-timeago, time, [data-original-title]');
+        const timestamp = timeEl?.dataset.originalTitle || timeEl?.textContent || '';
+        const iconEl = li.querySelector('svg, i, [role="img"]');
+        const iconHtml = iconEl?.outerHTML || '';
+        const clone = li.cloneNode(true);
+
+        if (iconEl) {
+          clone.querySelectorAll('svg, i, [role="img"]').forEach((e) => e.remove());
+        }
+        clone
+          .querySelectorAll('.js-timeago, time, [data-original-title]')
+          .forEach((e) => e.remove());
+
+        return {
+          content: clone.innerHTML.trim(),
+          iconHtml,
+          timestamp,
+        };
+      });
+    },
   },
 };
 </script>
 
 <template>
-  <visibility-change-detector class="gl-px-4" @visible="reload">
+  <visibility-change-detector @visible="reload">
     <h4 class="gl-heading-4 gl-my-4">{{ __('Activity') }}</h4>
-    <gl-skeleton-loader v-if="isLoading" :width="200">
-      <rect width="5" height="3" rx="1" y="2" />
-      <rect width="160" height="3" rx="1" x="8" y="2" />
-      <rect width="20" height="3" rx="1" x="180" y="2" />
 
-      <rect width="5" height="3" rx="1" y="9" />
-      <rect width="160" height="3" rx="1" x="8" y="9" />
-      <rect width="20" height="3" rx="1" x="180" y="9" />
+    <div class="gl-rounded-lg gl-bg-subtle">
+      <div v-if="isLoading" class="gl-p-4">
+        <gl-skeleton-loader v-for="i in 5" :key="i" :width="200" :height="10">
+          <rect x="0" y="0" width="16" height="8" rx="2" ry="2" />
+          <rect x="24" y="0" width="174" height="8" rx="2" ry="2" />
+          <rect x="182" y="0" width="16" height="8" rx="2" ry="2" />
+        </gl-skeleton-loader>
+      </div>
+
+      <gl-alert v-else-if="hasError" variant="danger" class="gl-m-4">
+        {{
+          s__(
+            'HomepageActivityWidget|The activity feed is not available. Please refresh the page to try again.',
+          )
+        }}
+      </gl-alert>
+
+      <p
+        v-else-if="!activityItems.length"
+        class="gl-p-4 gl-text-gray-600"
+        data-testid="empty-state"
+      >
+        {{
+          s__(
+            'Homepage|Start creating merge requests, pushing code, commenting in issues, and doing other work to view a feed of your activity here.',
+          )
+        }}
+      </p>
+
+      <ol v-else class="gl-m-0 gl-list-none gl-p-0">
+        <li
+          v-for="(item, idx) in activityItems"
+          :key="idx"
+          class="gl-border-b gl-border-subtle gl-px-6 gl-py-4 hover:!gl-bg-strong"
+          :class="{
+            'first:gl-rounded-t-lg': idx === 0,
+            'last:gl-rounded-b-lg last:gl-border-b-0': idx === activityItems.length - 1,
+          }"
+        >
+          <div class="gl-flex gl-items-start gl-gap-4">
+            <div v-safe-html="item.iconHtml" class="gl-mt-0.5 gl-h-4 gl-w-4 gl-flex-shrink-0"></div>
+            <div class="gl-min-w-0 gl-flex-grow">
+              <div v-safe-html="item.content" class="gl-text-base"></div>
+            </div>
+            <div class="gl-flex-shrink-0 gl-text-sm gl-text-gray-500">
+              {{ item.timestamp }}
+            </div>
+          </div>
+        </li>
+      </ol>
 
-      <rect width="5" height="3" rx="1" y="16" />
-      <rect width="160" height="3" rx="1" x="8" y="16" />
-      <rect width="20" height="3" rx="1" x="180" y="16" />
-    </gl-skeleton-loader>
-    <gl-alert v-else-if="hasError" variant="danger">{{
-      s__(
-        'HomepageActivityWidget|The activity feed is not available. Please refresh the page to try again.',
-      )
-    }}</gl-alert>
-    <p v-else-if="!activityFeedHtml" data-testid="empty-state">
-      {{
-        s__(
-          'Homepage|Start creating merge requests, pushing code, commenting in issues, and doing other work to view a feed of your activity here.',
-        )
-      }}
-    </p>
-    <ul
-      v-else
-      v-safe-html="activityFeedHtml"
-      data-testid="events-list"
-      class="gl-list-none gl-p-0"
-    ></ul>
+      <div class="gl-px-6 gl-py-4">
+        <a href="/dashboard/activity">{{ __('All activity') }}</a>
+      </div>
+    </div>
   </visibility-change-detector>
 </template>