diff --git a/src/components/elements/CommentaryBox/__snapshots__/CommentaryBox.stories.storyshot b/src/components/elements/CommentaryBox/__snapshots__/CommentaryBox.stories.storyshot
index d5b2afc87..ac1cc1756 100644
--- a/src/components/elements/CommentaryBox/__snapshots__/CommentaryBox.stories.storyshot
+++ b/src/components/elements/CommentaryBox/__snapshots__/CommentaryBox.stories.storyshot
@@ -31,6 +31,7 @@ exports[`Storyshots Components/Elements/CommentaryBox Default 1`] = `
           onChange={[Function]}
           placeholder="Add a comment"
           rows={1}
+          value=""
         />
       </div>
       <label
@@ -40,6 +41,7 @@ exports[`Storyshots Components/Elements/CommentaryBox Default 1`] = `
         <input
           className="absolute z-[-1] h-[0.1px] w-[0.1px] overflow-hidden opacity-0"
           id="input-files"
+          onChange={[Function]}
           type="file"
         />
         <div
@@ -67,6 +69,27 @@ exports[`Storyshots Components/Elements/CommentaryBox Default 1`] = `
         />
       </button>
     </div>
+    <div
+      className="flex flex-1 justify-between gap-4"
+    >
+      <div
+        className="flex flex-wrap gap-2"
+      />
+      <div
+        className="display-grid"
+      >
+        <div
+          className="text-nowrap text-right text-xs text-grey-500"
+        >
+          0
+          /255 
+          characters
+        </div>
+      </div>
+    </div>
+    <div
+      className="fixed top-[86px] right-[1.5vw] z-[1000000] flex w-[28vw] shadow-black"
+    />
   </div>
 </div>
 `;
diff --git a/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot b/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot
index 0e6037e87..d264ad7ec 100644
--- a/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot
+++ b/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot
@@ -7,7 +7,7 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput Default 1`] = `
   <label
     className="mr-2 inline uppercase text-bold-body-300"
     data-testid="txt"
-    htmlFor=":r2b:"
+    htmlFor=":r2c:"
   >
     Tree Species Grown *
   </label>
@@ -19,7 +19,7 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput Default 1`] = `
       }
     }
     data-testid="txt"
-    id=":r2b:-description"
+    id=":r2c:-description"
   />
   <div>
     <div
@@ -47,11 +47,11 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput Default 1`] = `
             className="relative"
           >
             <input
-              aria-describedby=":r2c:-description"
+              aria-describedby=":r2d:-description"
               aria-invalid={false}
               className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent border-0 border-b py-[10px] px-0 border-b-neutral-400"
               defaultValue="Test"
-              id=":r2c:"
+              id=":r2d:"
               name="name"
               onChange={[Function]}
               onKeyDownCapture={[Function]}
@@ -104,7 +104,7 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput With Number 1`]
   <label
     className="mr-2 inline uppercase text-bold-body-300"
     data-testid="txt"
-    htmlFor=":r2d:"
+    htmlFor=":r2e:"
   >
     Tree Species Grown *
   </label>
@@ -116,7 +116,7 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput With Number 1`]
       }
     }
     data-testid="txt"
-    id=":r2d:-description"
+    id=":r2e:-description"
   />
   <div>
     <div
@@ -150,11 +150,11 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput With Number 1`]
             className="relative"
           >
             <input
-              aria-describedby=":r2e:-description"
+              aria-describedby=":r2f:-description"
               aria-invalid={false}
               className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent border-0 border-b py-[10px] px-0 border-b-neutral-400"
               defaultValue="Test"
-              id=":r2e:"
+              id=":r2f:"
               name="name"
               onChange={[Function]}
               onKeyDownCapture={[Function]}
@@ -170,11 +170,11 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput With Number 1`]
             className="relative"
           >
             <input
-              aria-describedby=":r2f:-description"
+              aria-describedby=":r2g:-description"
               aria-invalid={false}
               className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent border-0 border-b py-[10px] px-0 pl-4 border-b-neutral-400"
               defaultValue={23}
-              id=":r2f:"
+              id=":r2g:"
               name="amount"
               onChange={[Function]}
               onKeyDown={[Function]}
diff --git a/src/components/elements/Inputs/textArea/__snapshots__/TextArea.stories.storyshot b/src/components/elements/Inputs/textArea/__snapshots__/TextArea.stories.storyshot
index 56acd742b..03a73a5d1 100644
--- a/src/components/elements/Inputs/textArea/__snapshots__/TextArea.stories.storyshot
+++ b/src/components/elements/Inputs/textArea/__snapshots__/TextArea.stories.storyshot
@@ -7,7 +7,7 @@ exports[`Storyshots Components/Elements/Inputs/TextArea Default 1`] = `
   <label
     className="mr-2 inline uppercase text-bold-body-300"
     data-testid="txt"
-    htmlFor=":r2g:"
+    htmlFor=":r2b:"
   >
     Input Label 
   </label>
@@ -19,11 +19,11 @@ exports[`Storyshots Components/Elements/Inputs/TextArea Default 1`] = `
       }
     }
     data-testid="txt"
-    id=":r2g:-description"
+    id=":r2b:-description"
   />
   <textarea
     className="min-h-[150px] w-full rounded-lg px-3 py-2 focus:border-primary-500 outline-none transition-all duration-300 ease-in-out focus:ring-transparent border-light "
-    id=":r2g:"
+    id=":r2b:"
     onChange={[Function]}
     placeholder="Input placeholder"
   />
diff --git a/src/components/extensive/Modal/__snapshots__/ModalSubmit.stories.storyshot b/src/components/extensive/Modal/__snapshots__/ModalSubmit.stories.storyshot
index 1904567b5..1846c0961 100644
--- a/src/components/extensive/Modal/__snapshots__/ModalSubmit.stories.storyshot
+++ b/src/components/extensive/Modal/__snapshots__/ModalSubmit.stories.storyshot
@@ -95,12 +95,22 @@ exports[`Storyshots Components/Extensive/Modal/ModalSubmit Default 1`] = `
             className="flex flex-1 items-center justify-center"
           >
             <div
-              className="flex items-center justify-center rounded-xl py-1 px-[6px]"
+              className="flex items-center justify-center rounded-xl py-1 px-[6px] bg-secondary-200"
             >
               <p
-                className="flex w-fit items-center justify-center gap-[6px] text-center undefined text-12-semibold"
+                className="flex w-fit items-center justify-center gap-[6px] text-center text-green-500 text-12-semibold"
                 data-testid="txt"
-              />
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                Approved
+              </p>
             </div>
           </div>
           <div
@@ -129,12 +139,14 @@ exports[`Storyshots Components/Extensive/Modal/ModalSubmit Default 1`] = `
             className="flex flex-1 items-center justify-center"
           >
             <div
-              className="flex items-center justify-center rounded-xl py-1 px-[6px]"
+              className="flex items-center justify-center rounded-xl py-1 px-[6px] bg-tertiary-50"
             >
               <p
-                className="flex w-fit items-center justify-center gap-[6px] text-center undefined text-12-semibold"
+                className="flex w-fit items-center justify-center gap-[6px] text-center text-tertiary-600 text-12-semibold"
                 data-testid="txt"
-              />
+              >
+                Needs More Information
+              </p>
             </div>
           </div>
           <div
@@ -163,12 +175,14 @@ exports[`Storyshots Components/Extensive/Modal/ModalSubmit Default 1`] = `
             className="flex flex-1 items-center justify-center"
           >
             <div
-              className="flex items-center justify-center rounded-xl py-1 px-[6px]"
+              className="flex items-center justify-center rounded-xl py-1 px-[6px] bg-blue-200"
             >
               <p
-                className="flex w-fit items-center justify-center gap-[6px] text-center undefined text-12-semibold"
+                className="flex w-fit items-center justify-center gap-[6px] text-center text-blue text-12-semibold"
                 data-testid="txt"
-              />
+              >
+                Submitted
+              </p>
             </div>
           </div>
           <div
@@ -197,12 +211,22 @@ exports[`Storyshots Components/Extensive/Modal/ModalSubmit Default 1`] = `
             className="flex flex-1 items-center justify-center"
           >
             <div
-              className="flex items-center justify-center rounded-xl py-1 px-[6px]"
+              className="flex items-center justify-center rounded-xl py-1 px-[6px] bg-secondary-200"
             >
               <p
-                className="flex w-fit items-center justify-center gap-[6px] text-center undefined text-12-semibold"
+                className="flex w-fit items-center justify-center gap-[6px] text-center text-green-500 text-12-semibold"
                 data-testid="txt"
-              />
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                Approved
+              </p>
             </div>
           </div>
           <div
@@ -231,12 +255,14 @@ exports[`Storyshots Components/Extensive/Modal/ModalSubmit Default 1`] = `
             className="flex flex-1 items-center justify-center"
           >
             <div
-              className="flex items-center justify-center rounded-xl py-1 px-[6px]"
+              className="flex items-center justify-center rounded-xl py-1 px-[6px] bg-blue-200"
             >
               <p
-                className="flex w-fit items-center justify-center gap-[6px] text-center undefined text-12-semibold"
+                className="flex w-fit items-center justify-center gap-[6px] text-center text-blue text-12-semibold"
                 data-testid="txt"
-              />
+              >
+                Submitted
+              </p>
             </div>
           </div>
           <div
@@ -265,12 +291,14 @@ exports[`Storyshots Components/Extensive/Modal/ModalSubmit Default 1`] = `
             className="flex flex-1 items-center justify-center"
           >
             <div
-              className="flex items-center justify-center rounded-xl py-1 px-[6px]"
+              className="flex items-center justify-center rounded-xl py-1 px-[6px] bg-blue-200"
             >
               <p
-                className="flex w-fit items-center justify-center gap-[6px] text-center undefined text-12-semibold"
+                className="flex w-fit items-center justify-center gap-[6px] text-center text-blue text-12-semibold"
                 data-testid="txt"
-              />
+              >
+                Submitted
+              </p>
             </div>
           </div>
           <div
@@ -299,12 +327,14 @@ exports[`Storyshots Components/Extensive/Modal/ModalSubmit Default 1`] = `
             className="flex flex-1 items-center justify-center"
           >
             <div
-              className="flex items-center justify-center rounded-xl py-1 px-[6px]"
+              className="flex items-center justify-center rounded-xl py-1 px-[6px] bg-blue-200"
             >
               <p
-                className="flex w-fit items-center justify-center gap-[6px] text-center undefined text-12-semibold"
+                className="flex w-fit items-center justify-center gap-[6px] text-center text-blue text-12-semibold"
                 data-testid="txt"
-              />
+              >
+                Submitted
+              </p>
             </div>
           </div>
           <div
@@ -333,12 +363,14 @@ exports[`Storyshots Components/Extensive/Modal/ModalSubmit Default 1`] = `
             className="flex flex-1 items-center justify-center"
           >
             <div
-              className="flex items-center justify-center rounded-xl py-1 px-[6px]"
+              className="flex items-center justify-center rounded-xl py-1 px-[6px] bg-tertiary-50"
             >
               <p
-                className="flex w-fit items-center justify-center gap-[6px] text-center undefined text-12-semibold"
+                className="flex w-fit items-center justify-center gap-[6px] text-center text-tertiary-600 text-12-semibold"
                 data-testid="txt"
-              />
+              >
+                Needs More Information
+              </p>
             </div>
           </div>
           <div
diff --git a/src/components/extensive/Modal/__snapshots__/ModalWithLogo.stories.storyshot b/src/components/extensive/Modal/__snapshots__/ModalWithLogo.stories.storyshot
index 0350c7d08..9fd3b8c92 100644
--- a/src/components/extensive/Modal/__snapshots__/ModalWithLogo.stories.storyshot
+++ b/src/components/extensive/Modal/__snapshots__/ModalWithLogo.stories.storyshot
@@ -189,6 +189,7 @@ exports[`Storyshots Components/Extensive/Modal/ModalWithLogo Default 1`] = `
                 onChange={[Function]}
                 placeholder="Add a comment"
                 rows={1}
+                value=""
               />
             </div>
             <label
@@ -198,6 +199,7 @@ exports[`Storyshots Components/Extensive/Modal/ModalWithLogo Default 1`] = `
               <input
                 className="absolute z-[-1] h-[0.1px] w-[0.1px] overflow-hidden opacity-0"
                 id="input-files"
+                onChange={[Function]}
                 type="file"
               />
               <div
@@ -210,8 +212,28 @@ exports[`Storyshots Components/Extensive/Modal/ModalWithLogo Default 1`] = `
               />
             </label>
           </div>
+          <div
+            className="flex flex-1 justify-between gap-4"
+          >
+            <div
+              className="flex flex-wrap gap-2"
+            />
+            <div
+              className="display-grid"
+            >
+              <div
+                className="text-nowrap text-right text-xs text-grey-500"
+              >
+                0
+                /255 
+                characters
+              </div>
+            </div>
+          </div>
           <button
             className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content self-end"
+            disabled={false}
+            onClick={[Function]}
           >
             <div
               style={
@@ -232,6 +254,9 @@ exports[`Storyshots Components/Extensive/Modal/ModalWithLogo Default 1`] = `
               </p>
             </span>
           </button>
+          <div
+            className="fixed top-[86px] right-[1.5vw] z-[1000000] flex w-[28vw] shadow-black"
+          />
         </div>
         <div
           className="flex flex-col gap-2"