diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/InitialStateTabs.tsx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/InitialStateTabs.tsx
new file mode 100644
index 00000000000..66fb303e501
--- /dev/null
+++ b/docs/src/pages/[platform]/connected-components/authenticator/configuration/InitialStateTabs.tsx
@@ -0,0 +1,46 @@
+import { Fragment } from '@/components/Fragment';
+import { Tabs } from '@aws-amplify/ui-react';
+
+export const InitialStateTabs = () => {
+  return (
+    <Tabs.Container defaultValue="sign-in">
+      <Tabs.List>
+        <Tabs.Item value="sign-in">Sign In</Tabs.Item>
+        <Tabs.Item value="sign-up">Sign Up</Tabs.Item>
+        <Tabs.Item value="forgot-password">Forgot Password</Tabs.Item>
+      </Tabs.List>
+      <Tabs.Panel value="sign-in">
+        <Fragment>
+          {({ platform }) => import(`./initialState.signIn.${platform}.mdx`)}
+        </Fragment>
+        <Fragment platforms={['web', 'flutter']} useCommonWebContent>
+          {({ platform }) =>
+            import(`./initialState.signIn.example.${platform}.mdx`)
+          }
+        </Fragment>
+      </Tabs.Panel>
+      <Tabs.Panel value="sign-up">
+        <Fragment>
+          {({ platform }) => import(`./initialState.signUp.${platform}.mdx`)}
+        </Fragment>
+        <Fragment platforms={['web', 'flutter']} useCommonWebContent>
+          {({ platform }) =>
+            import(`./initialState.signUp.example.${platform}.mdx`)
+          }
+        </Fragment>
+      </Tabs.Panel>
+      <Tabs.Panel value="forgot-password">
+        <Fragment>
+          {({ platform }) =>
+            import(`./initialState.forgotPassword.${platform}.mdx`)
+          }
+        </Fragment>
+        <Fragment platforms={['web', 'flutter']} useCommonWebContent>
+          {({ platform }) =>
+            import(`./initialState.forgotPassword.example.${platform}.mdx`)
+          }
+        </Fragment>
+      </Tabs.Panel>
+    </Tabs.Container>
+  );
+};
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/index.page.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/index.page.mdx
index f755ae396e2..da1963dd2a1 100644
--- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/index.page.mdx
+++ b/docs/src/pages/[platform]/connected-components/authenticator/configuration/index.page.mdx
@@ -9,6 +9,7 @@ import { Fragment } from '@/components/Fragment';
 import { Alert, Tabs } from '@aws-amplify/ui-react';
 import { FRAMEWORKS } from '@/data/frameworks';
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
+import { InitialStateTabs } from './InitialStateTabs';
 
 export async function getStaticPaths() {
   return getCustomStaticPath(frontmatter.supportedFrameworks);
@@ -28,43 +29,7 @@ export async function getStaticProps() {
 
 By default, unauthenticated users are redirected to the Sign In flow. You can explicitly redirect to Sign Up or Forgot Password:
 
-<Tabs.Container defaultValue="sign-in">
-  <Tabs.List>
-    <Tabs.Item value="sign-in">Sign In</Tabs.Item>
-    <Tabs.Item value="sign-up">Sign Up</Tabs.Item>
-    <Tabs.Item value="forgot-password">Forgot Password</Tabs.Item>
-  </Tabs.List>
-  <Tabs.Panel value="sign-in">
-    <Fragment>
-      {({ platform }) => import(`./initialState.signIn.${platform}.mdx`)}
-    </Fragment>
-    <Fragment platforms={['web', 'flutter']} useCommonWebContent>
-      {({ platform }) =>
-        import(`./initialState.signIn.example.${platform}.mdx`)
-      }
-    </Fragment>
-  </Tabs.Panel>
-  <Tabs.Panel value="sign-up">
-    <Fragment>
-      {({ platform }) => import(`./initialState.signUp.${platform}.mdx`)}
-    </Fragment>
-    <Fragment platforms={['web', 'flutter']} useCommonWebContent>
-      {({ platform }) =>
-        import(`./initialState.signUp.example.${platform}.mdx`)
-      }
-    </Fragment>
-  </Tabs.Panel>
-  <Tabs.Panel value="Forgot Password">
-    <Fragment>
-      {({ platform }) => import(`./initialState.forgotPassword.${platform}.mdx`)}
-    </Fragment>
-    <Fragment platforms={['web', 'flutter']} useCommonWebContent>
-      {({ platform }) =>
-        import(`./initialState.forgotPassword.example.${platform}.mdx`)
-      }
-    </Fragment>
-  </Tabs.Panel>
-</Tabs.Container>
+<InitialStateTabs />
 
 ## Login Mechanisms