diff --git a/components/docs/DocsPageBottom.vue b/components/docs/DocsPageBottom.vue
new file mode 100644
index 0000000000000000000000000000000000000000..16271c6220812a431094d914dc47d041abf1ee3b
--- /dev/null
+++ b/components/docs/DocsPageBottom.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const { page } = useContent();
+const { config, tree } = useDocus();
+</script>
+
+<template>
+  <div v-if="page" class="docs-page-bottom">
+    <div v-if="config?.gitlab?.edit" class="edit-link">
+      <Icon name="uil:edit" />
+      <EditGitLab
+        :owner="config.gitlab.owner"
+        :repo="config.gitlab.repo"
+        :branch="config?.gitlab?.branch"
+      />
+    </div>
+
+    <!-- Need to be supported by @nuxt/content -->
+    <span v-if="page?.mtime"
+      >Updated on
+      <b>{{
+        new Intl.DateTimeFormat("en-US").format(Date.parse(page.mtime))
+      }}</b></span
+    >
+  </div>
+</template>
+
+<style scoped lang="ts">
+css({
+  '.docs-page-bottom': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+    gap: '{space.4}',
+    marginTop: '{space.8}',
+    fontSize: '{fontSize.sm}',
+    color: '{color.gray.500}',
+    '@dark': {
+      color: '{color.gray.400}'
+    },
+    '.edit-link': {
+      flex: 1,
+      display: 'flex',
+      alignItems: 'center',
+      gap: '{space.2}'
+    }
+  }
+})
+</style>