diff --git a/crates/zu-docs/src/views/data_display/badge_page.rs b/crates/zu-docs/src/views/data_display/badge_page.rs
index 00714eb81..2c30e020a 100644
--- a/crates/zu-docs/src/views/data_display/badge_page.rs
+++ b/crates/zu-docs/src/views/data_display/badge_page.rs
@@ -12,29 +12,9 @@ use zuicon_material::Mail;
 
 use crate::components::demo_box::DemoBox;
 
-#[function_component(BadgePage)]
-pub fn badge_page() -> Html {
-    // TODO(Shaohua): Add toggle visibility button
-    // TODO(Shaohua): Add anchor-origin check buttons
-
-    let rectangle = html! {
-        <Box component="span" style=
-            "background-color: var(--zu-palette-primary-main);\
-             width: 40px;\
-             height: 40px;" />
-    };
-    let circle = html! {
-        <Box component="span" style=
-            "background-color: var(--zu-palette-primary-main);\
-             width: 40px;\
-             height: 40px;\
-             border-radius: 50%;" />
-    };
-
+fn create_badge_basic_view() -> Html {
     html! {
-        <div class="container">
-        <h1>{"Badge"}</h1>
-
+        <>
         <h2>{"Badge Basic"}</h2>
         <p>{"Examples of badges containing text, using primary and secondary colors. The badge is applied to its children."}</p>
         <DemoBox>
@@ -42,7 +22,13 @@ pub fn badge_page() -> Html {
             <Mail color={SvgColor::Action} />
           </Badge>
         </DemoBox>
+        </>
+    }
+}
 
+fn create_color_view() -> Html {
+    html! {
+        <>
         <h2>{"Color"}</h2>
         <p>{"Use color prop to apply theme palette to component."}</p>
         <DemoBox>
@@ -53,7 +39,13 @@ pub fn badge_page() -> Html {
                 <Mail color={SvgColor::Action} />
             </Badge>
         </DemoBox>
+        </>
+    }
+}
 
+fn create_badge_visibility_view() -> Html {
+    html! {
+        <>
         <h2>{"Badge visibility"}</h2>
         <p>{"The visibility of badges can be controlled using the invisible prop."}</p>
         <DemoBox>
@@ -67,7 +59,13 @@ pub fn badge_page() -> Html {
                 <Mail />
             </Badge>
         </DemoBox>
+        </>
+    }
+}
 
+fn create_maximum_value_view() -> Html {
+    html! {
+        <>
         <h2>{"Maximum value"}</h2>
         <p>{"You can use the max prop to cap the value of the badge content."}</p>
         <DemoBox>
@@ -81,7 +79,13 @@ pub fn badge_page() -> Html {
                 <Mail />
             </Badge>
         </DemoBox>
+        </>
+    }
+}
 
+fn create_dot_badge_view() -> Html {
+    html! {
+        <>
         <h2>{"Dot Badge"}</h2>
         <p>{"The dot prop changes a badge into a small dot. This can be used as a notification \
         that something has changed without giving a count."}</p>
@@ -90,7 +94,27 @@ pub fn badge_page() -> Html {
                 <Mail />
             </Badge>
         </DemoBox>
+        </>
+    }
+}
+
+fn create_badge_overlap_view() -> Html {
+    let rectangle = html! {
+        <Box component="span" style=
+            "background-color: var(--zu-palette-primary-main);\
+             width: 40px;\
+             height: 40px;" />
+    };
+    let circle = html! {
+        <Box component="span" style=
+            "background-color: var(--zu-palette-primary-main);\
+             width: 40px;\
+             height: 40px;\
+             border-radius: 50%;" />
+    };
 
+    html! {
+        <>
         <h2>{"Badge overlap"}</h2>
         <p>{"You can use the overlap prop to place the badge relative to the corner of the wrapped element."}</p>
         <DemoBox>
@@ -109,7 +133,13 @@ pub fn badge_page() -> Html {
                 {circle}
             </Badge>
         </DemoBox>
+        </>
+    }
+}
 
+fn create_badge_alignment_view() -> Html {
+    html! {
+        <>
         <h2>{"Badge alignment"}</h2>
         <p>{"You can use the anchorOrigin prop to move the badge to any corner of the wrapped element."}</p>
         <DemoBox>
@@ -130,6 +160,26 @@ pub fn badge_page() -> Html {
                 <Mail />
             </Badge>
         </DemoBox>
+        </>
+    }
+}
+
+#[function_component(BadgePage)]
+pub fn badge_page() -> Html {
+    // TODO(Shaohua): Add toggle visibility button
+    // TODO(Shaohua): Add anchor-origin check buttons
+
+    html! {
+        <div class="container">
+        <h1>{"Badge"}</h1>
+
+        {create_badge_basic_view()}
+        {create_color_view()}
+        {create_badge_visibility_view()}
+        {create_maximum_value_view()}
+        {create_dot_badge_view()}
+        {create_badge_overlap_view()}
+        {create_badge_alignment_view()}
 
         </div>
     }