diff --git a/packages/core/src/components/Modal/__stories__/Modal.mdx b/packages/core/src/components/Modal/__stories__/Modal.mdx
index 17ce39d135..e4f844f993 100644
--- a/packages/core/src/components/Modal/__stories__/Modal.mdx
+++ b/packages/core/src/components/Modal/__stories__/Modal.mdx
@@ -53,11 +53,7 @@ Use modal for short and non-frequent tasks. For common tasks consider using the
 
 ### Sizes
 
-<Canvas>
-  <Story of={ModalStories.WidthVariantsNormal} />
-  <Story of={ModalStories.WidthVariantsFull} />
-  <Story of={ModalStories.WidthVariantsCustom} />
-</Canvas>
+<Canvas of={ModalStories.Sizes} />
 
 ### Modal header with an icon
 
diff --git a/packages/core/src/components/Modal/__stories__/Modal.stories.tsx b/packages/core/src/components/Modal/__stories__/Modal.stories.tsx
index f561885287..c970116ff0 100644
--- a/packages/core/src/components/Modal/__stories__/Modal.stories.tsx
+++ b/packages/core/src/components/Modal/__stories__/Modal.stories.tsx
@@ -70,145 +70,103 @@ export const Overview = {
   name: "Overview"
 };
 
-export const WidthVariantsNormal = {
-  // Boilerplate for creating a modal, not relevant for this example
-  render:
-    // Internal helper, not part of the API
-    // internal helper, not part of the API
-    // Modal with default width variant
-    // Width prop effects on the modal width
-    () => {
-      const [show, setShow] = useState(false);
-      const openModalButtonRef = useRef(null);
-      const closeModal = useCallback(() => {
-        setShow(false);
-      }, []);
-
-      const openModalButton = useHelperOpenModalButton({
-        title: "Default",
-        setShow,
-        openModalButtonRef
-      });
-
-      return (
-        <>
-          {openModalButton}
-          <Modal
-            id="story-book-modal"
-            title="Modal title"
-            triggerElement={openModalButtonRef.current}
-            show={show}
-            onClose={closeModal}
-            width={Modal.width.DEFAULT}
-            contentSpacing
-          >
-            <ModalContent>Modal content goes here</ModalContent>
-            <ModalFooterButtons
-              primaryButtonText="Confirm"
-              secondaryButtonText="Cancel"
-              onPrimaryButtonClick={closeModal}
-              onSecondaryButtonClick={closeModal}
-            />
-          </Modal>
-        </>
-      );
-    },
-
-  name: "Width variants - Normal"
-};
-
-export const WidthVariantsFull = {
-  // Boilerplate for creating a modal, not relevant for this example
-  render:
-    // Internal helper, not part of the API
-    // Modal with full width variant
-    // Width prop effects on the modal width
-    () => {
-      const [show, setShow] = useState(false);
-      const openModalButtonRef = useRef(null);
-
-      const closeModal = useCallback(() => {
-        setShow(false);
-      }, []);
-
-      const openModalButton = useHelperOpenModalButton({
-        title: "Full size",
-        setShow,
-        openModalButtonRef
-      });
-
-      return (
-        <>
-          {openModalButton}
-          <Modal
-            id="story-book-modal"
-            title="Modal title"
-            triggerElement={openModalButtonRef.current}
-            show={show}
-            onClose={closeModal}
-            width={Modal.width.FULL_WIDTH}
-            contentSpacing
-          >
-            <ModalContent>Modal content goes here</ModalContent>
-            <ModalFooterButtons
-              primaryButtonText="Confirm"
-              secondaryButtonText="Cancel"
-              onPrimaryButtonClick={closeModal}
-              onSecondaryButtonClick={closeModal}
-            />
-          </Modal>
-        </>
-      );
-    },
-
-  name: "Width variants - Full"
-};
-
-export const WidthVariantsCustom = {
-  // Boilerplate for creating a modal, not relevant for this example
-  render:
-    // Internal helper, not part of the API
-    // Modal with full width variant
-    // Width prop effects on the modal width
-    () => {
-      const [show, setShow] = useState(false);
-      const openModalButtonRef = useRef(null);
-
-      const closeModal = useCallback(() => {
-        setShow(false);
-      }, []);
-
-      const openModalButton = useHelperOpenModalButton({
-        title: "Custom size (i.e. 720px)",
-        setShow,
-        openModalButtonRef
-      });
-
-      return (
-        <>
-          {openModalButton}
-          <Modal
-            id="story-book-modal"
-            title="Modal title"
-            triggerElement={openModalButtonRef.current}
-            show={show}
-            onClose={closeModal}
-            width={"720px"}
-            contentSpacing
-          >
-            <ModalContent>Modal content goes here</ModalContent>
-            <ModalFooterButtons
-              primaryButtonText="Confirm"
-              secondaryButtonText="Cancel"
-              onPrimaryButtonClick={closeModal}
-              onSecondaryButtonClick={closeModal}
-            />
-          </Modal>
-        </>
-      );
-    },
-
-  name: "Width variants - custom"
+export const Sizes = {
+  render: () => {
+    const [showNormal, setShowNormal] = useState(false);
+    const [showFull, setShowFull] = useState(false);
+    const [showCustom, setShowCustom] = useState(false);
+
+    const openModalButtonRefNormal = useRef(null);
+    const openModalButtonRefFull = useRef(null);
+    const openModalButtonRefCustom = useRef(null);
+
+    const closeModalNormal = useCallback(() => setShowNormal(false), []);
+    const closeModalFull = useCallback(() => setShowFull(false), []);
+    const closeModalCustom = useCallback(() => setShowCustom(false), []);
+
+    const openModalButtonNormal = useHelperOpenModalButton({
+      title: "Default",
+      setShow: setShowNormal,
+      openModalButtonRef: openModalButtonRefNormal
+    });
+
+    const openModalButtonFull = useHelperOpenModalButton({
+      title: "Full size",
+      setShow: setShowFull,
+      openModalButtonRef: openModalButtonRefFull
+    });
+
+    const openModalButtonCustom = useHelperOpenModalButton({
+      title: "Custom size (720px)",
+      setShow: setShowCustom,
+      openModalButtonRef: openModalButtonRefCustom
+    });
+
+    return (
+      <>
+        {/* Default Width Modal */}
+        {openModalButtonNormal}
+        <Modal
+          id="storybook-modal-normal"
+          title="Modal title"
+          triggerElement={openModalButtonRefNormal.current}
+          show={showNormal}
+          onClose={closeModalNormal}
+          width={Modal.width.DEFAULT}
+          contentSpacing
+        >
+          <ModalContent>Modal content goes here</ModalContent>
+          <ModalFooterButtons
+            primaryButtonText="Confirm"
+            secondaryButtonText="Cancel"
+            onPrimaryButtonClick={closeModalNormal}
+            onSecondaryButtonClick={closeModalNormal}
+          />
+        </Modal>
+
+        {/* Full Width Modal */}
+        {openModalButtonFull}
+        <Modal
+          id="storybook-modal-full"
+          title="Modal title"
+          triggerElement={openModalButtonRefFull.current}
+          show={showFull}
+          onClose={closeModalFull}
+          width={Modal.width.FULL_WIDTH}
+          contentSpacing
+        >
+          <ModalContent>Modal content goes here</ModalContent>
+          <ModalFooterButtons
+            primaryButtonText="Confirm"
+            secondaryButtonText="Cancel"
+            onPrimaryButtonClick={closeModalFull}
+            onSecondaryButtonClick={closeModalFull}
+          />
+        </Modal>
+
+        {/* Custom Width Modal */}
+        {openModalButtonCustom}
+        <Modal
+          id="storybook-modal-custom"
+          title="Modal title"
+          triggerElement={openModalButtonRefCustom.current}
+          show={showCustom}
+          onClose={closeModalCustom}
+          width="720px"
+          contentSpacing
+        >
+          <ModalContent>Modal content goes here</ModalContent>
+          <ModalFooterButtons
+            primaryButtonText="Confirm"
+            secondaryButtonText="Cancel"
+            onPrimaryButtonClick={closeModalCustom}
+            onSecondaryButtonClick={closeModalCustom}
+          />
+        </Modal>
+      </>
+    );
+  },
+  name: "Sizes"
 };
 
 export const ModalWithIcon = {