diff --git a/packages/amplify-util-blog/ui-components/blog/MemoizedReactMarkdown.tsx b/packages/amplify-util-blog/ui-components/blog/MemoizedReactMarkdown.tsx
index af7651d..92ce783 100644
--- a/packages/amplify-util-blog/ui-components/blog/MemoizedReactMarkdown.tsx
+++ b/packages/amplify-util-blog/ui-components/blog/MemoizedReactMarkdown.tsx
@@ -7,7 +7,7 @@ import remarkFootnotes from "remark-footnotes";
 
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { vs } from "react-syntax-highlighter/dist/cjs/styles/prism";
-import { Link } from "@aws-amplify/ui-react";
+import { Divider, Link } from "@aws-amplify/ui-react";
 
 const components: Components = {
   code({ node, inline, className, children, ...props }: any) {
@@ -33,6 +33,9 @@ const components: Components = {
   a({ node, ...props }: any) {
     return <Link {...props} />;
   },
+  hr({ node, ...props }: any) {
+    return <Divider marginTop="large" marginBottom="large" {...props} />;
+  },
 };
 
 const MemoizedReactMarkdown: FC<Options> = memo(