diff --git a/website/src/theme/DocItem/Footer/index.js b/website/src/theme/DocItem/Footer/index.js
new file mode 100644
index 00000000000..290320f09fc
--- /dev/null
+++ b/website/src/theme/DocItem/Footer/index.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {useDoc} from '@docusaurus/theme-common/internal';
+import LastUpdated from '@theme/LastUpdated';
+import EditThisPage from '@theme/EditThisPage';
+import TagsListInline from '@theme/TagsListInline';
+
+import styles from './styles.module.css';
+import DocsRating from '../../../../core/DocsRating';
+
+function TagsRow(props) {
+  return (
+    <div
+      className={clsx(
+        ThemeClassNames.docs.docFooterTagsRow,
+        'row margin-bottom--sm'
+      )}>
+      <div className="col">
+        <TagsListInline {...props} />
+      </div>
+    </div>
+  );
+}
+function EditMetaRow({
+  editUrl,
+  lastUpdatedAt,
+  lastUpdatedBy,
+  formattedLastUpdatedAt,
+}) {
+  return (
+    <div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, 'row')}>
+      <div className="col">{editUrl && <EditThisPage editUrl={editUrl} />}</div>
+
+      <div className={clsx('col', styles.lastUpdated)}>
+        {(lastUpdatedAt || lastUpdatedBy) && (
+          <LastUpdated
+            lastUpdatedAt={lastUpdatedAt}
+            formattedLastUpdatedAt={formattedLastUpdatedAt}
+            lastUpdatedBy={lastUpdatedBy}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+export default function DocItemFooter() {
+  const {metadata} = useDoc();
+  const {editUrl, lastUpdatedAt, formattedLastUpdatedAt, lastUpdatedBy, tags} =
+    metadata;
+  const canDisplayTagsRow = tags.length > 0;
+  const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
+  const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow;
+  if (!canDisplayFooter) {
+    return null;
+  }
+
+  return (
+    <>
+      <DocsRating label={metadata.unversionedId} />
+      <footer
+        className={clsx(ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg')}>
+        {canDisplayTagsRow && <TagsRow tags={tags} />}
+        {canDisplayEditMetaRow && (
+          <EditMetaRow
+            editUrl={editUrl}
+            lastUpdatedAt={lastUpdatedAt}
+            lastUpdatedBy={lastUpdatedBy}
+            formattedLastUpdatedAt={formattedLastUpdatedAt}
+          />
+        )}
+      </footer>
+    </>
+  );
+}
diff --git a/website/src/theme/DocItem/Footer/styles.module.css b/website/src/theme/DocItem/Footer/styles.module.css
new file mode 100644
index 00000000000..7c1e9644191
--- /dev/null
+++ b/website/src/theme/DocItem/Footer/styles.module.css
@@ -0,0 +1,11 @@
+.lastUpdated {
+  margin-top: 0.2rem;
+  font-style: italic;
+  font-size: smaller;
+}
+
+@media (min-width: 997px) {
+  .lastUpdated {
+    text-align: right;
+  }
+}
diff --git a/website/src/theme/DocItemFooter/index.js b/website/src/theme/DocItemFooter/index.js
deleted file mode 100644
index df37518a258..00000000000
--- a/website/src/theme/DocItemFooter/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import React from 'react';
-import DocItemFooterOriginal from '@theme-original/DocItemFooter';
-import DocsRating from '../../../core/DocsRating';
-
-export default function DocItemFooter(props) {
-  return (
-    <>
-      <DocsRating label={props.content.metadata.unversionedId} />
-      <DocItemFooterOriginal {...props} />
-    </>
-  );
-}