diff --git a/.storybook/pages/Cad/Cad.tsx b/.storybook/pages/Cad/Cad.tsx
index 8ee37cf77..6718b3450 100644
--- a/.storybook/pages/Cad/Cad.tsx
+++ b/.storybook/pages/Cad/Cad.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import {
   PageHeader,
@@ -20,6 +20,7 @@ import {
   GridItem,
   Text,
   ProjectCard,
+  NumberIcon,
 } from '../../../src';
 
 import '../../../src/components/Utilities/Spacing.css';
@@ -260,240 +261,266 @@ const StandardsRows = [
   },
 ];
 
-export const Cad = () => (
-  <>
-    <Panel className="u-margin-bottom-lg" variant="squared">
+export const Cad = () => {
+  const [indexState, setIndexState] = useState<number | undefined>(2);
+  const returnUpdatedItems = (updatedItems: any) => {
+    console.log(updatedItems);
+    updatedItems.containers['container-2'].itemIds.map(
+      (item: string, index: number) => {
+        if (item === 'item-2') {
+          updatedItems.items['item-2'].behavior = 'hover';
+          setIndexState(20);
+        }
+      },
+    );
+  };
+
+  const changeNumber = () => {
+    setIndexState(20);
+    console.log(indexState);
+  };
+  return (
+    <>
+      <Button onClick={changeNumber}>Change Number</Button>
+
+      <NumberIcon aria-label="1" number={indexState}></NumberIcon>
+
+      <Panel className="u-margin-bottom-lg" variant="squared">
+        <LayoutContainer>
+          <PageHeader
+            className="u-margin-bottom-none"
+            description={
+              <HorizontalStepper
+                activeIndex={1}
+                steps={['Add classroom details', 'Add projects']}
+              ></HorizontalStepper>
+            }
+            headingSize="title-sm"
+            orientation="2up"
+            right={
+              <ButtonGroup>
+                <Button>
+                  <Icon name="arrow-narrow-left" purpose="decorative" />
+                  Back
+                </Button>
+                <Button variant="primary">
+                  Next <Icon name="arrow-narrow-right" purpose="decorative" />
+                </Button>
+              </ButtonGroup>
+            }
+            title="Course Planner: History 6"
+          />
+        </LayoutContainer>
+      </Panel>
       <LayoutContainer>
-        <PageHeader
-          className="u-margin-bottom-none"
-          description={
-            <HorizontalStepper
-              activeIndex={1}
-              steps={['Add classroom details', 'Add projects']}
-            ></HorizontalStepper>
-          }
-          headingSize="title-sm"
-          orientation="2up"
-          right={
-            <ButtonGroup>
-              <Button>
-                <Icon name="arrow-narrow-left" purpose="decorative" />
-                Back
-              </Button>
-              <Button variant="primary">
-                Next <Icon name="arrow-narrow-right" purpose="decorative" />
-              </Button>
-            </ButtonGroup>
-          }
-          title="Course Planner: History 6"
-        />
-      </LayoutContainer>
-    </Panel>
-    <LayoutContainer>
-      <Layout variant="67-33">
-        <LayoutSection region="main">
-          <Panel>
-            <Heading
-              as="h2"
-              className="u-margin-bottom-md"
-              size="headline-sm"
-              variant="base"
-            >
-              Select projects for your History 6 plan
-            </Heading>
-            <Text as="div" className="u-margin-bottom-lg">
-              <p>
-                Make a plan so that you can stay connected to learning
-                objectives even as changes occur throughout the year.
-              </p>
-              <p>
-                Room for more instructional copy per Content Strategy lorem
-                ipsum dolor sit amet, consectetur adipiscing elit. Phasellus est
-                quam, consequat iaculis pretium accumsan, fringilla id ligula.
-              </p>
-            </Text>
+        <Layout variant="67-33">
+          <LayoutSection region="main">
+            <Panel>
+              <Heading
+                as="h2"
+                className="u-margin-bottom-md"
+                size="headline-sm"
+                variant="base"
+              >
+                Select projects for your History 6 plan
+              </Heading>
+              <Text as="div" className="u-margin-bottom-lg">
+                <p>
+                  Make a plan so that you can stay connected to learning
+                  objectives even as changes occur throughout the year.
+                </p>
+                <p>
+                  Room for more instructional copy per Content Strategy lorem
+                  ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
+                  est quam, consequat iaculis pretium accumsan, fringilla id
+                  ligula.
+                </p>
+              </Text>
 
-            <DragDrop
-              containers={{
-                'container-1': {
-                  itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
-                  emptyContent: (
-                    <>
-                      <Text as="div" className="u-margin-bottom-xl">
-                        <p>
-                          There are no more available projects to create your
-                          course plan
-                        </p>
-                      </Text>
-                      <img alt="hand with pencil" src={EmptyImage} />
-                    </>
-                  ),
-                  header: (
-                    <DragDropContainerHeader>
-                      <Toolbar className="u-margin-bottom-md" variant="bare">
-                        <ToolbarItem>
-                          <Heading as="h2" size="title-sm" variant="base">
-                            Available projects
-                          </Heading>
-                        </ToolbarItem>
-                        <ToolbarItem align="right">
-                          <Button variant="icon">
-                            <Icon name="add" purpose="decorative" />
-                            Add project
-                          </Button>
-                        </ToolbarItem>
-                      </Toolbar>
-                    </DragDropContainerHeader>
-                  ),
-                },
-                'container-2': {
-                  itemIds: [],
-                  emptyContent: (
-                    <>
-                      <Text as="div" className="u-margin-bottom-xl">
-                        <p>
-                          Drag in available projects to build your course plan
-                        </p>
-                      </Text>
-                      <img alt="hand with pencil" src={EmptyImage} />
-                    </>
-                  ),
-                  header: (
-                    <DragDropContainerHeader>
-                      <Toolbar className="u-margin-bottom-md" variant="bare">
-                        <ToolbarItem>
-                          <Heading as="h2" size="title-sm" variant="base">
-                            Planned projects
-                          </Heading>
-                        </ToolbarItem>
-                        <ToolbarItem align="right">
-                          <Button variant="icon">
-                            <Icon name="add" purpose="decorative" />
-                            Add project
-                          </Button>
-                        </ToolbarItem>
-                      </Toolbar>
-                    </DragDropContainerHeader>
-                  ),
-                },
-              }}
-              items={{
-                'item-1': {
-                  behavior: 'hover',
-                  title: 'Project #1',
-                  children: (
-                    <ProjectCard
-                      behavior="draggable"
-                      meta="12 days"
-                      number={1}
-                      numberAriaLabel="Project 1"
-                      title="Longer project card title that wraps"
-                    ></ProjectCard>
-                  ),
-                },
-                'item-2': {
-                  title: 'Project #2',
-                  children: (
-                    <ProjectCard
-                      behavior="draggable"
-                      meta="12 days"
-                      numberAriaLabel="Project 2"
-                      title="Project card title"
-                    ></ProjectCard>
-                  ),
-                },
-                'item-3': {
-                  title: 'Project #3',
-                  children: (
-                    <ProjectCard
-                      behavior="draggable"
-                      meta="12 days"
-                      numberAriaLabel="Project 3"
-                      title="Project card title"
-                    ></ProjectCard>
-                  ),
-                },
-                'item-4': {
-                  title: 'Project #4',
-                  children: (
-                    <ProjectCard
-                      behavior="draggable"
-                      meta="12 days"
-                      numberAriaLabel="Project 4"
-                      title="Project card title"
-                    ></ProjectCard>
-                  ),
-                },
-                'item-5': {
-                  title: 'Project #5',
-                  children: (
-                    <ProjectCard
-                      behavior="draggable"
-                      buttonDropdownPosition="top-left"
-                      meta="12 days"
-                      numberAriaLabel="Project 5"
-                      title="Project card title"
-                    ></ProjectCard>
-                  ),
-                },
-                'item-6': {
-                  title: 'Project #6',
-                  children: (
-                    <ProjectCard
-                      behavior="draggable"
-                      buttonDropdownPosition="top-left"
-                      meta="12 days"
-                      number={6}
-                      numberAriaLabel="Project 6"
-                      title="Project card title"
-                    ></ProjectCard>
-                  ),
-                },
-              }}
-              multipleContainers={false}
-              unstyledItems={true}
-            />
-          </Panel>
-        </LayoutSection>
-        <LayoutSection region="sidebar">
-          <CardWithNotification
-            className="u-margin-bottom-lg"
-            text="Summit recommends teaching at least five (5) projects for this course."
-            variant="brand"
-          >
-            <CardWithNotification.Body>
-              <DataBar
-                label="Total instructional days"
-                max={60}
-                segments={[
-                  { value: 10, text: 'Project 1' },
-                  { value: 11, text: 'Project 2' },
-                  { value: 22, text: 'Project 3' },
-                  { value: 11, text: 'Project 4' },
-                ]}
+              <DragDrop
+                getNewState={(updatedItems: object) =>
+                  returnUpdatedItems(updatedItems)
+                }
+                containers={{
+                  'container-1': {
+                    itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
+                    emptyContent: (
+                      <>
+                        <Text as="div" className="u-margin-bottom-xl">
+                          <p>
+                            There are no more available projects to create your
+                            course plan
+                          </p>
+                        </Text>
+                        <img alt="hand with pencil" src={EmptyImage} />
+                      </>
+                    ),
+                    header: (
+                      <DragDropContainerHeader>
+                        <Toolbar className="u-margin-bottom-md" variant="bare">
+                          <ToolbarItem>
+                            <Heading as="h2" size="title-sm" variant="base">
+                              Available projects
+                            </Heading>
+                          </ToolbarItem>
+                          <ToolbarItem align="right">
+                            <Button variant="icon">
+                              <Icon name="add" purpose="decorative" />
+                              Add project
+                            </Button>
+                          </ToolbarItem>
+                        </Toolbar>
+                      </DragDropContainerHeader>
+                    ),
+                  },
+                  'container-2': {
+                    itemIds: [],
+                    emptyContent: (
+                      <>
+                        <Text as="div" className="u-margin-bottom-xl">
+                          <p>
+                            Drag in available projects to build your course plan
+                          </p>
+                        </Text>
+                        <img alt="hand with pencil" src={EmptyImage} />
+                      </>
+                    ),
+                    header: (
+                      <DragDropContainerHeader>
+                        <Toolbar className="u-margin-bottom-md" variant="bare">
+                          <ToolbarItem>
+                            <Heading as="h2" size="title-sm" variant="base">
+                              Planned projects
+                            </Heading>
+                          </ToolbarItem>
+                          <ToolbarItem align="right">
+                            <Button variant="icon">
+                              <Icon name="add" purpose="decorative" />
+                              Add project
+                            </Button>
+                          </ToolbarItem>
+                        </Toolbar>
+                      </DragDropContainerHeader>
+                    ),
+                  },
+                }}
+                items={{
+                  'item-1': {
+                    title: 'Project #1',
+                    children: (
+                      <ProjectCard
+                        behavior="draggable"
+                        meta="12 days"
+                        numberAriaLabel="Project 1"
+                        title="Longer project card title that wraps"
+                      ></ProjectCard>
+                    ),
+                  },
+                  'item-2': {
+                    title: 'Project #2',
+                    children: (
+                      <ProjectCard
+                        behavior="draggable"
+                        meta="12 days"
+                        number={indexState}
+                        numberAriaLabel="Project 2"
+                        title="Project card title"
+                      ></ProjectCard>
+                    ),
+                  },
+                  'item-3': {
+                    title: 'Project #3',
+                    children: (
+                      <ProjectCard
+                        behavior="draggable"
+                        meta="12 days"
+                        numberAriaLabel="Project 3"
+                        title="Project card title"
+                      ></ProjectCard>
+                    ),
+                  },
+                  'item-4': {
+                    title: 'Project #4',
+                    children: (
+                      <ProjectCard
+                        behavior="draggable"
+                        meta="12 days"
+                        numberAriaLabel="Project 4"
+                        title="Project card title"
+                      ></ProjectCard>
+                    ),
+                  },
+                  'item-5': {
+                    title: 'Project #5',
+                    children: (
+                      <ProjectCard
+                        behavior="draggable"
+                        buttonDropdownPosition="top-left"
+                        meta="12 days"
+                        numberAriaLabel="Project 5"
+                        title="Project card title"
+                      ></ProjectCard>
+                    ),
+                  },
+                  'item-6': {
+                    title: 'Project #6',
+                    children: (
+                      <ProjectCard
+                        behavior="draggable"
+                        buttonDropdownPosition="top-left"
+                        meta="12 days"
+                        number={6}
+                        numberAriaLabel="Project 6"
+                        title="Project card title"
+                      ></ProjectCard>
+                    ),
+                  },
+                }}
+                multipleContainers={false}
+                unstyledItems={true}
               />
-            </CardWithNotification.Body>
-          </CardWithNotification>
-          <Grid className="u-margin-bottom-lg" variant="1-2-1up">
-            <GridItem>
-              <TableCard
-                buttonContent="View all Cognitive Skills"
-                tableColumns={CognitiveSkillColumns}
-                tableRows={CognitiveSkillRows}
-                title="Cognitive skills coverage"
-              />
-            </GridItem>
-            <GridItem>
-              <TableCard
-                buttonContent="View all Standards"
-                tableColumns={StandardsColumns}
-                tableRows={StandardsRows}
-                title="Standards coverage"
-              />
-            </GridItem>
-          </Grid>
-        </LayoutSection>
-      </Layout>
-    </LayoutContainer>
-  </>
-);
+            </Panel>
+          </LayoutSection>
+          <LayoutSection region="sidebar">
+            <CardWithNotification
+              className="u-margin-bottom-lg"
+              text="Summit recommends teaching at least five (5) projects for this course."
+              variant="brand"
+            >
+              <CardWithNotification.Body>
+                <DataBar
+                  label="Total instructional days"
+                  max={60}
+                  segments={[
+                    { value: 10, text: 'Project 1' },
+                    { value: 11, text: 'Project 2' },
+                    { value: 22, text: 'Project 3' },
+                    { value: 11, text: 'Project 4' },
+                  ]}
+                />
+              </CardWithNotification.Body>
+            </CardWithNotification>
+            <Grid className="u-margin-bottom-lg" variant="1-2-1up">
+              <GridItem>
+                <TableCard
+                  buttonContent="View all Cognitive Skills"
+                  tableColumns={CognitiveSkillColumns}
+                  tableRows={CognitiveSkillRows}
+                  title="Cognitive skills coverage"
+                />
+              </GridItem>
+              <GridItem>
+                <TableCard
+                  buttonContent="View all Standards"
+                  tableColumns={StandardsColumns}
+                  tableRows={StandardsRows}
+                  title="Standards coverage"
+                />
+              </GridItem>
+            </Grid>
+          </LayoutSection>
+        </Layout>
+      </LayoutContainer>
+    </>
+  );
+};
diff --git a/src/components/DragDrop/DragDrop.tsx b/src/components/DragDrop/DragDrop.tsx
index 95b652136..c31b5a3b3 100644
--- a/src/components/DragDrop/DragDrop.tsx
+++ b/src/components/DragDrop/DragDrop.tsx
@@ -42,6 +42,10 @@ export interface Props {
    * Child node(s) that can be nested inside component. `ModalHeader`, `ModalBody`, and `ModelFooter` are the only permissible children of the Modal
    */
   children?: ReactNode;
+  /**
+   * Prop that allows parent components to get the updated drag and drop object data from the outside
+   */
+  getNewState?: (newState: object) => void;
 }
 
 /**
@@ -51,6 +55,7 @@ export const DragDrop = ({
   className,
   items,
   containers,
+  getNewState,
   multipleContainers = false,
   unstyledItems = false,
 }: Props) => {
@@ -136,7 +141,7 @@ export const DragDrop = ({
     return () => {
       window.removeEventListener('resize', setShadows); /* 3 */
     };
-  }, []);
+  }, [items]);
 
   /**
    * Update sticky wrapper height on mount
@@ -209,6 +214,9 @@ export const DragDrop = ({
        * Update state with new container's contents
        */
       setState(newState);
+      if (getNewState) {
+        getNewState(newState);
+      }
       return;
     }
 
@@ -248,6 +256,9 @@ export const DragDrop = ({
      * Update state with both source and destination containers
      */
     setState(newState);
+    if (getNewState) {
+      getNewState(newState);
+    }
   };
 
   /**
diff --git a/src/components/NumberIcon/NumberIcon.tsx b/src/components/NumberIcon/NumberIcon.tsx
index ea5925e9c..6432a0c00 100644
--- a/src/components/NumberIcon/NumberIcon.tsx
+++ b/src/components/NumberIcon/NumberIcon.tsx
@@ -21,7 +21,7 @@ export interface Props {
   /**
    * Number to be shown as the icon.
    */
-  number: number;
+  number?: number;
   /**
    * The size of the icon. Defaults to 'lg'.
    */