diff --git a/packages/canon/docs/Home.mdx b/packages/canon/docs/Home.mdx
index 479834303a..e0530ce906 100644
--- a/packages/canon/docs/Home.mdx
+++ b/packages/canon/docs/Home.mdx
@@ -43,19 +43,19 @@ import { Columns, Text, ComponentStatus, Banner, Title } from './components';
   />
   <ComponentStatus
     name="Box component"
-    status="inProgress"
+    status="review"
     link="/?path=/docs/components-box--docs"
   />
+  <ComponentStatus
+    name="Stack component"
+    status="review"
+    link="/?path=/docs/components-stack--default"
+  />
   <ComponentStatus
     name="Inline component"
     status="inProgress"
     link="/?path=/story/components-inline--default"
   />
-  <ComponentStatus
-    name="Stack component"
-    status="inProgress"
-    link="/?path=/docs/components-stack--default"
-  />
   <ComponentStatus
     name="Button component"
     status="inProgress"
diff --git a/packages/canon/docs/components/ComponentStatus/component-status.css.ts b/packages/canon/docs/components/ComponentStatus/component-status.css.ts
index eeb58865ff..80d222132d 100644
--- a/packages/canon/docs/components/ComponentStatus/component-status.css.ts
+++ b/packages/canon/docs/components/ComponentStatus/component-status.css.ts
@@ -57,6 +57,11 @@ export const pill = recipe({
         borderColor: '#FFD000',
         color: '#D79927',
       },
+      review: {
+        backgroundColor: '#D7F9D7',
+        borderColor: '#4ED14A',
+        color: '#3A9837',
+      },
       done: {
         backgroundColor: '#D7F9D7',
         borderColor: '#4ED14A',
diff --git a/packages/canon/docs/components/ComponentStatus/index.tsx b/packages/canon/docs/components/ComponentStatus/index.tsx
index 2444fcdc16..fde52e3b37 100644
--- a/packages/canon/docs/components/ComponentStatus/index.tsx
+++ b/packages/canon/docs/components/ComponentStatus/index.tsx
@@ -24,7 +24,7 @@ export const ComponentStatus = ({
   link,
 }: {
   name: string;
-  status: 'notStarted' | 'inProgress' | 'done';
+  status: 'notStarted' | 'inProgress' | 'review' | 'done';
   style?: React.CSSProperties;
   link?: string;
 }) => {
@@ -40,6 +40,7 @@ export const ComponentStatus = ({
       <span className={pill({ status })}>
         {status === 'notStarted' && 'Not Started'}
         {status === 'inProgress' && 'In Progress'}
+        {status === 'review' && 'Ready for Review'}
         {status === 'done' && 'Done'}
       </span>
     </div>