diff --git a/frontend/src/__test__/components/InterimStep.test.tsx b/frontend/src/__test__/components/InterimStep.test.tsx
index 8ae3ab361..56885a9b9 100644
--- a/frontend/src/__test__/components/InterimStep.test.tsx
+++ b/frontend/src/__test__/components/InterimStep.test.tsx
@@ -50,7 +50,7 @@ describe('Interim Storage Step test', () => {
       titleStorage: 'Storage information',
       subtitleStorage: 'Enter the interim storage information for this seedlot'
     }
-    const titleBox = component.getElementsByClassName('interim-agency-title')[0];
+    const titleBox = component.getElementsByClassName('interim-title-row')[0];
     expect(titleBox).toHaveTextContent(content.title);
     expect(titleBox).toHaveTextContent(content.subtitle);
     expect(screen.getByText(content.titleStorage)).toBeInTheDocument();
diff --git a/frontend/src/components/ApplicantInformationForm/styles.scss b/frontend/src/components/ApplicantInformationForm/styles.scss
index eaf57211d..3bf41014a 100644
--- a/frontend/src/components/ApplicantInformationForm/styles.scss
+++ b/frontend/src/components/ApplicantInformationForm/styles.scss
@@ -3,7 +3,6 @@
 
 .applicant-information-form {
   margin-top: 1rem;
-  padding-left: 2.5rem;
 }
 
 .applicant-information-form h2 {
@@ -34,10 +33,3 @@
 .save-button {
   margin-bottom: 3rem;
 }
-
-
-@media only screen and (max-width: 1584px) {
-  .applicant-information-form {
-    padding-left: 2rem;
-  }
-}
diff --git a/frontend/src/components/Card/StandardCard/styles.scss b/frontend/src/components/Card/StandardCard/styles.scss
index 22c28baa7..0a8b33e41 100644
--- a/frontend/src/components/Card/StandardCard/styles.scss
+++ b/frontend/src/components/Card/StandardCard/styles.scss
@@ -20,7 +20,7 @@ p.std-card-title {
   display: flex;
   flex-direction: column;
   padding: 1.25rem 1rem;
-  margin: 0.5rem;
+  margin: 0.5rem 2rem 0.5rem 0;
   width: 20.25rem;
   height: 22.5625rem;
   background: var(--bcgov-layer-02);
diff --git a/frontend/src/components/FavouriteActivities/index.tsx b/frontend/src/components/FavouriteActivities/index.tsx
index ae5713cdb..116845c8d 100644
--- a/frontend/src/components/FavouriteActivities/index.tsx
+++ b/frontend/src/components/FavouriteActivities/index.tsx
@@ -26,7 +26,7 @@ const FavouriteActivities = () => {
 
   return (
     <Row className="favourite-activities">
-      <Column lg={4} className="favourite-activities-title">
+      <Column sm={4} md={8} lg={16} xlg={4} className="favourite-activities-title">
         <h2>My favourite activities</h2>
         <Subtitle text="Quick access to your favourite activities." className="favourite-activities-subtitle" />
         <Tooltip
@@ -39,7 +39,7 @@ const FavouriteActivities = () => {
           </button>
         </Tooltip>
       </Column>
-      <Column lg={12} className="favourite-activities-cards">
+      <Column sm={4} md={8} lg={16} xlg={12} className="favourite-activities-cards">
         <Row>
           {favActQuery.isLoading && <Loading withOverlay={false} />}
           {favActQuery.isSuccess && (
diff --git a/frontend/src/components/FavouriteActivities/styles.scss b/frontend/src/components/FavouriteActivities/styles.scss
index 598d39686..3d100618c 100644
--- a/frontend/src/components/FavouriteActivities/styles.scss
+++ b/frontend/src/components/FavouriteActivities/styles.scss
@@ -3,12 +3,8 @@
 @use '@carbon/type';
 
 .favourite-activities {
-  background-color: var(--bcgov-layer-01);
-  padding: 2rem 0;
-}
-
-.favourite-activities-title {
-  padding-left: 3.5rem;
+  background-color: var(--#{vars.$bcgov-prefix}-layer-01);
+  padding: 2rem;
 }
 
 .favourite-activities-title > h2 {
@@ -16,6 +12,10 @@
   margin-bottom: 0.5rem;
 }
 
+.#{vars.$bcgov-prefix}--row > .favourite-activities-title {
+  padding-left: 0.5rem;
+}
+
 .favourite-activities-subtitle {
   display: inline;
 }
@@ -34,29 +34,3 @@ button.tooltip-button > svg {
   top: 0.1875rem;
   padding-left: 0.3125rem;
 }
-
-@media only screen and (max-width: 1584px) {
-  .favourite-activities-title {
-    padding-left: 3rem;
-  }
-}
-
-@media only screen and (max-width: 1056px) {
-  .favourite-activities-cards {
-    padding-left: 3.5rem;
-  }
-}
-
-@media only screen and (max-width: 672px) {
-  .favourite-activities-title {
-    padding-left: 2rem;
-  }
-
-  .favourite-activities-cards {
-    padding-left: 2.5rem;
-  }
-
-  .cards-row {
-    flex-direction: column;
-  }
-}
diff --git a/frontend/src/components/PageTitle/index.tsx b/frontend/src/components/PageTitle/index.tsx
index d517f2922..4b9b12c67 100644
--- a/frontend/src/components/PageTitle/index.tsx
+++ b/frontend/src/components/PageTitle/index.tsx
@@ -54,7 +54,7 @@ const PageTitle = ({
   const isFavourited = thisFavAct !== undefined;
 
   return (
-    <Column sm={4} md={4} className="title-section">
+    <Column className="title-section">
       <div className="title-favourite">
         <h1>{title}</h1>
         {enableFavourite && activity && (
diff --git a/frontend/src/components/RecentActivities/index.tsx b/frontend/src/components/RecentActivities/index.tsx
index dafb4fa64..8b4d11a21 100644
--- a/frontend/src/components/RecentActivities/index.tsx
+++ b/frontend/src/components/RecentActivities/index.tsx
@@ -61,63 +61,67 @@ const RecentActivities = () => {
   ];
 
   return (
-    <Row className="main-content recent-activity">
-      <Column sm={4} className="recent-activity-title">
-        <h2>My recent activities</h2>
-        <Subtitle text="Check your recent requests and files" className="recent-activity-subtitle" />
-      </Column>
-      <Column sm={4}>
-        <Tabs>
-          <TabList aria-label="List of tabs">
-            <Tab>Requests</Tab>
-            <Tab>Files & Docs.</Tab>
-          </TabList>
-          <TabPanels>
-            <TabPanel>
-              {
-                listItems.length === 0
-                  ? (
-                    <div className="empty-recent-activities">
-                      <EmptySection
-                        icon="Application"
-                        title="There is no activity to show yet!"
-                        description="Your recent requests will appear here once you generate one"
+    <>
+      <Row className="recent-activity-title-row">
+        <Column>
+          <h2>My recent activities</h2>
+          <Subtitle text="Check your recent requests and files" className="recent-activity-subtitle" />
+        </Column>
+      </Row>
+      <Row>
+        <Column className="recent-activity-table">
+          <Tabs>
+            <TabList aria-label="List of tabs">
+              <Tab>Requests</Tab>
+              <Tab>Files & Docs.</Tab>
+            </TabList>
+            <TabPanels>
+              <TabPanel>
+                {
+                  listItems.length === 0
+                    ? (
+                      <div className="empty-recent-activities">
+                        <EmptySection
+                          icon="Application"
+                          title="There is no activity to show yet!"
+                          description="Your recent requests will appear here once you generate one"
+                        />
+                      </div>
+                    )
+                    : (
+                      <ActivityTable
+                        elements={listItems}
+                        clickFn={goToActivity}
+                        headers={tableHeaders}
                       />
-                    </div>
-                  )
-                  : (
-                    <ActivityTable
-                      elements={listItems}
-                      clickFn={goToActivity}
-                      headers={tableHeaders}
-                    />
-                  )
-              }
-            </TabPanel>
-            <TabPanel>
-              {
-                filesDocsItems.length === 0
-                  ? (
-                    <div className="empty-recent-activity-files-docs">
-                      <EmptySection
-                        icon="Application"
-                        title="There is no files & docs to show yet!"
-                        description="Your recent files & docs will appear here once you generate one"
+                    )
+                }
+              </TabPanel>
+              <TabPanel>
+                {
+                  filesDocsItems.length === 0
+                    ? (
+                      <div className="empty-recent-activity-files-docs">
+                        <EmptySection
+                          icon="Application"
+                          title="There is no files & docs to show yet!"
+                          description="Your recent files & docs will appear here once you generate one"
+                        />
+                      </div>
+                    )
+                    : (
+                      <FilesDocsTable
+                        elements={filesDocsItems}
+                        headers={fileDocstableHeaders}
                       />
-                    </div>
-                  )
-                  : (
-                    <FilesDocsTable
-                      elements={filesDocsItems}
-                      headers={fileDocstableHeaders}
-                    />
-                  )
-              }
-            </TabPanel>
-          </TabPanels>
-        </Tabs>
-      </Column>
-    </Row>
+                    )
+                }
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
+        </Column>
+      </Row>
+    </>
   );
 };
 
diff --git a/frontend/src/components/RecentActivities/styles.scss b/frontend/src/components/RecentActivities/styles.scss
index 63c6d2fb4..2523e15ec 100644
--- a/frontend/src/components/RecentActivities/styles.scss
+++ b/frontend/src/components/RecentActivities/styles.scss
@@ -6,55 +6,22 @@ p.recent-activity-subtitle {
   padding-bottom: 1rem;
 }
 
-.recent-activity {
-  background-color: var(--bcgov-background) !important;
-}
-
-.activity-table {
-  padding: 0 !important;
-}
+.recent-activity-title-row {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
 
-.recent-activity-title {
-  padding-left: 3.5rem;
+  h2 {
+    @include type.type-style('heading-03');
+    margin-bottom: 0.5rem;
+  }
 }
 
-.recent-activity-title > h2 {
-  @include type.type-style('heading-03');
-  margin-bottom: 0.5rem;
-}
-.recent-activity {
+.recent-activity-table {
   .#{vars.$bcgov-prefix}--tabs {
     padding-left: 1.5rem;
   }
 }
+
 .empty-recent-activities {
   margin: 3.44rem 0;
 }
-
-@media only screen and (max-width: 1584px) {
-  .recent-activity-title {
-    padding-left: 3rem;
-  }
-
-  .recent-activity {
-    .#{vars.$bcgov-prefix}--tabs {
-      padding-left: 1rem;
-    }
-  }
-}
-
-@media only screen and (max-width: 672px) {
-  .recent-activity-title {
-    padding-left: 2rem;
-  }
-
-  .recent-activity {
-    .#{vars.$bcgov-prefix}--tabs {
-      padding-left: 0;
-    }
-  }
-
-  .recent-activity {
-    overflow-x: scroll;
-  }
-}
diff --git a/frontend/src/components/RecentSeedlots/styles.scss b/frontend/src/components/RecentSeedlots/styles.scss
index 312f27e5a..a78c845ed 100644
--- a/frontend/src/components/RecentSeedlots/styles.scss
+++ b/frontend/src/components/RecentSeedlots/styles.scss
@@ -6,11 +6,9 @@ p.recent-seedlots-subtitle {
 }
 
 .recent-seedlots {
-  background-color: var(--bcgov-layer-02) !important;
-  margin-left: 2rem;
-  margin-right: 2rem;
-  margin-bottom: 2rem;
-  border: 1px solid var(--bcgov-border-subtle-02);
+  background-color: var(--#{vars.$bcgov-prefix}-layer-02) !important;
+  margin: 0 2rem 2rem 2rem;
+  border: 1px solid var(--#{vars.$bcgov-prefix}-border-subtle-02);
   border-radius: 4px;
 }
 
diff --git a/frontend/src/components/SeedlotActivities/index.tsx b/frontend/src/components/SeedlotActivities/index.tsx
index 7ea5fffde..95fd7960b 100644
--- a/frontend/src/components/SeedlotActivities/index.tsx
+++ b/frontend/src/components/SeedlotActivities/index.tsx
@@ -59,23 +59,21 @@ const SeedlotActivities = () => {
   ];
 
   return (
-    <div className="seedlot-activities">
-      <Row className="seedlot-activities-cards">
-        {cards.map((card) => (
-          <StandardCard
-            key={card.id}
-            type={card.id}
-            image={card.image}
-            header={card.header}
-            description={card.description}
-            url={card.link}
-            isEmpty={card.isEmpty}
-            emptyTitle={card.emptyTitle}
-            emptyDescription={card.emptyDescription}
-          />
-        ))}
-      </Row>
-    </div>
+    <Row className="seedlot-activities-cards">
+      {cards.map((card) => (
+        <StandardCard
+          key={card.id}
+          type={card.id}
+          image={card.image}
+          header={card.header}
+          description={card.description}
+          url={card.link}
+          isEmpty={card.isEmpty}
+          emptyTitle={card.emptyTitle}
+          emptyDescription={card.emptyDescription}
+        />
+      ))}
+    </Row>
   );
 };
 
diff --git a/frontend/src/components/SeedlotActivities/styles.scss b/frontend/src/components/SeedlotActivities/styles.scss
index fc9ad8417..809f8d53e 100644
--- a/frontend/src/components/SeedlotActivities/styles.scss
+++ b/frontend/src/components/SeedlotActivities/styles.scss
@@ -1,16 +1,4 @@
-.seedlot-activities {
-  margin-left: 2.5rem;
+.seedlot-activities-cards {
+  margin-left: 2rem;
   margin-right: 2.5rem;
 }
-
-@media only screen and (max-width: 1056px) {
-  .seedlot-activities-cards {
-    padding-left: 3.5rem;
-  }
-}
-
-@media only screen and (max-width: 672px) {
-  .seedlot-activities-cards {
-    padding-left: 2.5rem;
-  }
-}
diff --git a/frontend/src/components/SeedlotRegistrationSteps/CollectionStep/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/CollectionStep/index.tsx
index bb2a24671..0f1bdf392 100644
--- a/frontend/src/components/SeedlotRegistrationSteps/CollectionStep/index.tsx
+++ b/frontend/src/components/SeedlotRegistrationSteps/CollectionStep/index.tsx
@@ -193,7 +193,7 @@ const CollectionStep = (
         </Column>
       </Row>
       <Row className="collection-step-row">
-        <Column sm={4} md={4} lg={4} xlg={4}>
+        <Column sm={4} md={4} lg={8} xlg={6}>
           <ComboBox
             id={fieldsConfig.collector.name}
             name={fieldsConfig.collector.name}
@@ -218,7 +218,7 @@ const CollectionStep = (
             size="md"
           />
         </Column>
-        <Column sm={4} md={4} lg={4} xlg={4}>
+        <Column sm={4} md={4} lg={8} xlg={6}>
           <NumberInput
             id={fieldsConfig.code.name}
             name={fieldsConfig.code.name}
@@ -247,7 +247,7 @@ const CollectionStep = (
         </Column>
       </Row>
       <Row className="collection-step-row">
-        <Column sm={4} md={4} lg={4} xlg={4}>
+        <Column sm={4} md={4} lg={8} xlg={6}>
           <DatePicker
             datePickerType="single"
             dateFormat={DATE_FORMAT}
@@ -273,7 +273,7 @@ const CollectionStep = (
             />
           </DatePicker>
         </Column>
-        <Column sm={4} md={4} lg={4} xlg={4}>
+        <Column sm={4} md={4} lg={8} xlg={6}>
           <DatePicker
             datePickerType="single"
             dateFormat={DATE_FORMAT}
@@ -302,7 +302,7 @@ const CollectionStep = (
         </Column>
       </Row>
       <Row className="collection-step-row">
-        <Column sm={4} md={4} lg={4} xlg={4}>
+        <Column sm={4} md={4} lg={8} xlg={6}>
           <NumberInput
             id={fieldsConfig.numberOfContainers.name}
             name={fieldsConfig.numberOfContainers.name}
@@ -321,7 +321,7 @@ const CollectionStep = (
             disableWheel
           />
         </Column>
-        <Column sm={4} md={4} lg={4} xlg={4}>
+        <Column sm={4} md={4} lg={8} xlg={6}>
           <NumberInput
             id={fieldsConfig.volumePerContainers.name}
             name={fieldsConfig.volumePerContainers.name}
@@ -342,7 +342,7 @@ const CollectionStep = (
         </Column>
       </Row>
       <Row className="collection-step-row">
-        <Column sm={4} md={8} lg={8} xlg={8}>
+        <Column sm={4} md={4} lg={16} xlg={12}>
           <NumberInput
             id={fieldsConfig.volumeOfCones.name}
             name={fieldsConfig.volumeOfCones.name}
@@ -458,6 +458,8 @@ const CollectionStep = (
               }
             />
           </fieldset>
+        </Column>
+        <Column className="" sm={4} md={4} lg={16} xlg={12}>
           {
             isOtherChecked && (
               <TextInput
@@ -483,7 +485,7 @@ const CollectionStep = (
         </Column>
       </Row>
       <Row className="collection-step-row">
-        <Column sm={4} md={8} lg={8} xlg={8}>
+        <Column sm={4} md={4} lg={16} xlg={12}>
           <TextArea
             name={fieldsConfig.comments.name}
             ref={(el: HTMLInputElement) => addRefs(el, fieldsConfig.comments.name)}
diff --git a/frontend/src/components/SeedlotRegistrationSteps/CollectionStep/styles.scss b/frontend/src/components/SeedlotRegistrationSteps/CollectionStep/styles.scss
index 2ed891c50..9cf8f4c04 100644
--- a/frontend/src/components/SeedlotRegistrationSteps/CollectionStep/styles.scss
+++ b/frontend/src/components/SeedlotRegistrationSteps/CollectionStep/styles.scss
@@ -3,25 +3,29 @@
 
 .collection-step-container{
   padding: 0;
-}
-
-.collection-step-row {
-  margin-bottom: 1.5rem;
-  h2 {
-    @include type.type-style('heading-03');
-  }
-  .#{vars.$bcgov-prefix}--date-picker--single {
-    width: 100%;
 
-    .#{vars.$bcgov-prefix}--date-picker-container,
-    .#{vars.$bcgov-prefix}--date-picker__input {
+  .collection-step-row {
+    margin-bottom: 1.5rem;
+    h2 {
+      @include type.type-style('heading-03');
+    }
+    .#{vars.$bcgov-prefix}--date-picker--single {
       width: 100%;
+
+      .#{vars.$bcgov-prefix}--date-picker-container,
+      .#{vars.$bcgov-prefix}--date-picker__input {
+        width: 100%;
+      }
+    }
+
+    fieldset .subtitle-section {
+      margin-bottom: 0.5rem;
     }
   }
-}
 
-.collection-methods {
-  .collection-method__input {
-    padding-top: 0.5rem;
+  .collection-methods {
+    .collection-method__input {
+      padding-top: 0.5rem;
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/SeedlotRegistrationSteps/ExtractionAndStorageStep/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/ExtractionAndStorageStep/index.tsx
index 130fe911b..45d3965c2 100644
--- a/frontend/src/components/SeedlotRegistrationSteps/ExtractionAndStorageStep/index.tsx
+++ b/frontend/src/components/SeedlotRegistrationSteps/ExtractionAndStorageStep/index.tsx
@@ -137,238 +137,232 @@ const ExtractionAndStorage = (
   };
 
   return (
-    <div className="extractory-and-storage-form">
-      <FlexGrid fullWidth>
-        <Row className="extraction-information-title">
-          <Column lg={16}>
-            <h2>{inputText.extractionTitle.titleText}</h2>
-            <Subtitle text={inputText.extractionTitle.subtitleText} />
-          </Column>
-        </Row>
-        <Row className="extractory-agency-tsc-checkbox-row">
-          <Column sm={4} md={8} lg={16}>
-            <Checkbox
-              id="extractory-agency-tsc-checkbox"
-              name="extractory-agency-tsc"
-              labelText={inputText.extractorCheckbox.labelText}
-              defaultChecked
-              readOnly={readOnly}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => extractorIsChecked(e)}
+    <FlexGrid className="extractory-and-storage-form" fullWidth>
+      <Row className="extraction-information-title">
+        <Column sm={4} md={8} lg={16}>
+          <h2>{inputText.extractionTitle.titleText}</h2>
+          <Subtitle text={inputText.extractionTitle.subtitleText} />
+        </Column>
+      </Row>
+      <Row className="extractory-agency-tsc-checkbox-row">
+        <Column sm={4} md={8} lg={16}>
+          <Checkbox
+            id="extractory-agency-tsc-checkbox"
+            name="extractory-agency-tsc"
+            labelText={inputText.extractorCheckbox.labelText}
+            defaultChecked
+            readOnly={readOnly}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => extractorIsChecked(e)}
+          />
+        </Column>
+      </Row>
+      <Row className="extractor-agency-row">
+        <Column className="extractor-agency-col" sm={4} md={4} lg={8} xlg={6}>
+          <ComboBox
+            id="extractory-agency-combobox"
+            ref={extractorNameInputRef}
+            name="extractory-agency"
+            helperText={inputText.extractor.helperText}
+            readOnly={readOnly ?? isExtractorChecked}
+            onChange={(e: ComboBoxEvent) => { handleFormInput('extractoryAgency', e.selectedItem); }}
+            selectedItem={state.extractoryAgency}
+            shouldFilterItem={
+              ({ item, inputValue }: FilterObj) => filterInput({ item, inputValue })
+            }
+            titleText={inputText.extractor.titleText}
+            placeholder={inputText.extractor.placeholder}
+            items={agencyOptions}
+            invalid={validationObj.isExtractorNameInvalid}
+          />
+        </Column>
+        <Column className="extractor-agency-col" sm={4} md={4} lg={8} xlg={6}>
+          <TextInput
+            id="extractory-agency-location-code-input"
+            name="extractory-agency-location-code"
+            ref={extractorNumberInputRef}
+            value={state.extractoryLocationCode}
+            type="number"
+            labelText={inputText.extractorCode.labelText}
+            helperText={inputText.extractorCode.helperText}
+            invalid={validationObj.isExtractorCodeInvalid}
+            invalidText={inputText.extractorCode.invalidText}
+            readOnly={readOnly ?? isExtractorChecked}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              handleFormInput('extractoryLocationCode', e.target.value);
+            }}
+          />
+        </Column>
+      </Row>
+      <Row className="extraction-date-row">
+        <Column className="extraction-start-date-col" sm={4} md={4} lg={8} xlg={6}>
+          <DatePicker
+            datePickerType="single"
+            name="extractionStartDate"
+            dateFormat={DATE_FORMAT}
+            value={state.extractionStartDate}
+            onChange={(_e: Array<Date>, selectedDate: string) => {
+              handleFormInput('extractionStartDate', selectedDate);
+            }}
+            readOnly={readOnly}
+          >
+            <DatePickerInput
+              id="extraction-start-date-input"
+              labelText={inputText.date.extraction.labelText.start}
+              helperText={inputText.date.helperText}
+              placeholder={inputText.date.placeholder}
+              invalid={validationObj.isExtractorStartDateInvalid}
+              invalidText={inputText.date.invalidText}
+              disabled={isExtractorChecked}
             />
-          </Column>
-        </Row>
-        <Row className="extractor-agency-row">
-          <Column className="extractor-agency-col" sm={4} md={2} lg={4}>
-            <ComboBox
-              id="extractory-agency-combobox"
-              ref={extractorNameInputRef}
-              name="extractory-agency"
-              helperText={inputText.extractor.helperText}
-              readOnly={readOnly ?? isExtractorChecked}
-              onChange={(e: ComboBoxEvent) => { handleFormInput('extractoryAgency', e.selectedItem); }}
-              selectedItem={state.extractoryAgency}
-              shouldFilterItem={
-                ({ item, inputValue }: FilterObj) => filterInput({ item, inputValue })
-              }
-              titleText={inputText.extractor.titleText}
-              placeholder={inputText.extractor.placeholder}
-              items={agencyOptions}
-              invalid={validationObj.isExtractorNameInvalid}
+          </DatePicker>
+        </Column>
+        <Column className="extraction-end-date-col" sm={4} md={4} lg={8} xlg={6}>
+          <DatePicker
+            datePickerType="single"
+            name="extractionEndDate"
+            dateFormat={DATE_FORMAT}
+            value={state.extractionEndDate}
+            onChange={(_e: Array<Date>, selectedDate: string) => {
+              handleFormInput('extractionEndDate', selectedDate);
+            }}
+            readOnly={readOnly}
+          >
+            <DatePickerInput
+              id="extraction-end-date-input"
+              labelText={inputText.date.extraction.labelText.end}
+              helperText={inputText.date.helperText}
+              placeholder={inputText.date.placeholder}
+              invalid={validationObj.isExtractorEndDateInvalid}
+              invalidText={inputText.date.invalidText}
+              disabled={isExtractorChecked}
             />
-          </Column>
-          <Column className="extractor-agency-col" sm={4} md={2} lg={4}>
-            <TextInput
-              id="extractory-agency-location-code-input"
-              name="extractory-agency-location-code"
-              ref={extractorNumberInputRef}
-              value={state.extractoryLocationCode}
-              type="number"
-              labelText={inputText.extractorCode.labelText}
-              helperText={inputText.extractorCode.helperText}
-              invalid={validationObj.isExtractorCodeInvalid}
-              invalidText={inputText.extractorCode.invalidText}
-              readOnly={readOnly ?? isExtractorChecked}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                handleFormInput('extractoryLocationCode', e.target.value);
-              }}
+          </DatePicker>
+        </Column>
+        <Column sm={4} md={8} lg={16} xlg={12}>
+          {isExtractorChecked && !readOnly && isExtractorHintOpen && (
+            <InlineNotification
+              lowContrast
+              kind="info"
+              title={inputText.date.extraction.notification.title}
+              subtitle={inputText.date.extraction.notification.subtitle}
+              onCloseButtonClick={() => { setIsExtractorHintOpen(false); }}
             />
-          </Column>
-        </Row>
-        <Row className="extraction-date-row">
-          <Column className="extraction-start-date-col" sm={4} md={2} lg={4}>
-            <DatePicker
-              datePickerType="single"
-              name="extractionStartDate"
-              dateFormat={DATE_FORMAT}
-              value={state.extractionStartDate}
-              onChange={(_e: Array<Date>, selectedDate: string) => {
-                handleFormInput('extractionStartDate', selectedDate);
-              }}
-              readOnly={readOnly}
-            >
-              <DatePickerInput
-                id="extraction-start-date-input"
-                labelText={inputText.date.extraction.labelText.start}
-                helperText={inputText.date.helperText}
-                placeholder={inputText.date.placeholder}
-                invalid={validationObj.isExtractorStartDateInvalid}
-                invalidText={inputText.date.invalidText}
-                disabled={isExtractorChecked}
-              />
-            </DatePicker>
-          </Column>
-          <Column className="extraction-end-date-col" sm={4} md={2} lg={4}>
-            <DatePicker
-              datePickerType="single"
-              name="extractionEndDate"
-              dateFormat={DATE_FORMAT}
-              value={state.extractionEndDate}
-              onChange={(_e: Array<Date>, selectedDate: string) => {
-                handleFormInput('extractionEndDate', selectedDate);
-              }}
-              readOnly={readOnly}
-            >
-              <DatePickerInput
-                id="extraction-end-date-input"
-                labelText={inputText.date.extraction.labelText.end}
-                helperText={inputText.date.helperText}
-                placeholder={inputText.date.placeholder}
-                invalid={validationObj.isExtractorEndDateInvalid}
-                invalidText={inputText.date.invalidText}
-                disabled={isExtractorChecked}
-              />
-            </DatePicker>
-          </Column>
-        </Row>
-        <Row>
-          <Column sm={4} md={8} lg={8}>
-            {isExtractorChecked && !readOnly && isExtractorHintOpen && (
-              <InlineNotification
-                lowContrast
-                kind="info"
-                title={inputText.date.extraction.notification.title}
-                subtitle={inputText.date.extraction.notification.subtitle}
-                onCloseButtonClick={() => { setIsExtractorHintOpen(false); }}
-              />
-            )}
-          </Column>
-        </Row>
-        <Row className="temporary-seed-storage-title">
-          <Column lg={16}>
-            <h2>{inputText.storageTitle.titleText}</h2>
-            <Subtitle text={inputText.storageTitle.subtitleText} />
-          </Column>
-        </Row>
-        <Row className="seed-storage-agency-tsc-checkbox-row">
-          <Column sm={4} md={8} lg={16}>
-            <Checkbox
-              id="seed-storage-agency-tsc-checkbox"
-              name="seed-storage-agency-tsc"
-              labelText={inputText.storageCheckbox.labelText}
-              defaultChecked
-              readOnly={readOnly}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => storageIsChecked(e)}
+          )}
+        </Column>
+      </Row>
+      <Row className="temporary-seed-storage-title">
+        <Column lg={16}>
+          <h2>{inputText.storageTitle.titleText}</h2>
+          <Subtitle text={inputText.storageTitle.subtitleText} />
+        </Column>
+      </Row>
+      <Row className="seed-storage-agency-tsc-checkbox-row">
+        <Column sm={4} md={8} lg={16}>
+          <Checkbox
+            id="seed-storage-agency-tsc-checkbox"
+            name="seed-storage-agency-tsc"
+            labelText={inputText.storageCheckbox.labelText}
+            defaultChecked
+            readOnly={readOnly}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => storageIsChecked(e)}
+          />
+        </Column>
+      </Row>
+      <Row className="seed-storage-agency-row">
+        <Column className="seed-storage-agency-col" sm={4} md={4} lg={8} xlg={6}>
+          <ComboBox
+            id="seed-storage-agency-combobox"
+            ref={storageNameInputRef}
+            name="seed-storage-agency"
+            helperText={inputText.storage.helperText}
+            onChange={(e: ComboBoxEvent) => handleFormInput('seedStorageAgency', e.selectedItem)}
+            selectedItem={state.seedStorageAgency}
+            shouldFilterItem={
+              ({ item, inputValue }: FilterObj) => filterInput({ item, inputValue })
+            }
+            titleText={inputText.storage.titleText}
+            placeholder={inputText.storage.placeholder}
+            readOnly={isStorageChecked || readOnly}
+            items={agencyOptions}
+            invalid={validationObj.isStorageNameInvalid}
+          />
+        </Column>
+        <Column className="seed-storage-location-code-col" sm={4} md={4} lg={8} xlg={6}>
+          <TextInput
+            id="seed-storage-location-code-input"
+            name="seed-storage-location-code"
+            ref={storageNumberInputRef}
+            value={state.seedStorageLocationCode}
+            type="number"
+            labelText={inputText.storageCode.labelText}
+            helperText={inputText.storageCode.helperText}
+            invalid={validationObj.isStorageCodeInvalid}
+            invalidText={inputText.storageCode.invalidText}
+            readOnly={isStorageChecked || readOnly}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              handleFormInput('seedStorageLocationCode', e.target.value);
+            }}
+          />
+        </Column>
+      </Row>
+      <Row className="storage-date-row">
+        <Column className="storage-start-date-col" sm={4} md={4} lg={8} xlg={6}>
+          <DatePicker
+            datePickerType="single"
+            name="storageStartDate"
+            dateFormat={DATE_FORMAT}
+            value={state.seedStorageStartDate}
+            onChange={(_e: Array<Date>, selectedDate: string) => {
+              handleFormInput('seedStorageStartDate', selectedDate);
+            }}
+            readOnly={readOnly}
+          >
+            <DatePickerInput
+              id="storage-start-date-input"
+              labelText={inputText.date.storage.labelText.start}
+              helperText={inputText.date.helperText}
+              placeholder={inputText.date.placeholder}
+              invalid={validationObj.isStorageStartDateInvalid}
+              invalidText={inputText.date.invalidText}
+              disabled={isStorageChecked}
             />
-          </Column>
-        </Row>
-        <Row className="seed-storage-agency-row">
-          <Column className="seed-storage-agency-col" sm={4} md={2} lg={4}>
-            <ComboBox
-              id="seed-storage-agency-combobox"
-              ref={storageNameInputRef}
-              name="seed-storage-agency"
-              helperText={inputText.storage.helperText}
-              onChange={(e: ComboBoxEvent) => handleFormInput('seedStorageAgency', e.selectedItem)}
-              selectedItem={state.seedStorageAgency}
-              shouldFilterItem={
-                ({ item, inputValue }: FilterObj) => filterInput({ item, inputValue })
-              }
-              titleText={inputText.storage.titleText}
-              placeholder={inputText.storage.placeholder}
-              readOnly={isStorageChecked || readOnly}
-              items={agencyOptions}
-              invalid={validationObj.isStorageNameInvalid}
+          </DatePicker>
+        </Column>
+        <Column className="storage-end-date-col" sm={4} md={4} lg={8} xlg={6}>
+          <DatePicker
+            datePickerType="single"
+            name="storageEndDate"
+            dateFormat={DATE_FORMAT}
+            value={state.seedStorageEndDate}
+            onChange={(_e: Array<Date>, selectedDate: string) => {
+              handleFormInput('seedStorageEndDate', selectedDate);
+            }}
+            readOnly={readOnly}
+          >
+            <DatePickerInput
+              id="storage-end-date-input"
+              labelText={inputText.date.storage.labelText.end}
+              helperText={inputText.date.helperText}
+              placeholder={inputText.date.placeholder}
+              invalid={validationObj.isStorageEndDateInvalid}
+              invalidText={inputText.date.invalidText}
+              disabled={isStorageChecked}
             />
-          </Column>
-          <Column className="seed-storage-location-code-col" sm={4} md={2} lg={4}>
-            <TextInput
-              id="seed-storage-location-code-input"
-              name="seed-storage-location-code"
-              ref={storageNumberInputRef}
-              value={state.seedStorageLocationCode}
-              type="number"
-              labelText={inputText.storageCode.labelText}
-              helperText={inputText.storageCode.helperText}
-              invalid={validationObj.isStorageCodeInvalid}
-              invalidText={inputText.storageCode.invalidText}
-              readOnly={isStorageChecked || readOnly}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                handleFormInput('seedStorageLocationCode', e.target.value);
-              }}
+          </DatePicker>
+        </Column>
+        <Column sm={4} md={8} lg={16} xlg={12}>
+          {isStorageChecked && !readOnly && isStorageHintOpen && (
+            <InlineNotification
+              lowContrast
+              kind="info"
+              title={inputText.date.storage.notification.title}
+              subtitle={inputText.date.storage.notification.subtitle}
+              onCloseButtonClick={() => { setIsStorageHintOpen(false); }}
             />
-          </Column>
-        </Row>
-        <Row className="storage-date-row">
-          <Column className="storage-start-date-col" sm={4} md={2} lg={4}>
-            <DatePicker
-              datePickerType="single"
-              name="storageStartDate"
-              dateFormat={DATE_FORMAT}
-              value={state.seedStorageStartDate}
-              onChange={(_e: Array<Date>, selectedDate: string) => {
-                handleFormInput('seedStorageStartDate', selectedDate);
-              }}
-              readOnly={readOnly}
-            >
-              <DatePickerInput
-                id="storage-start-date-input"
-                labelText={inputText.date.storage.labelText.start}
-                helperText={inputText.date.helperText}
-                placeholder={inputText.date.placeholder}
-                invalid={validationObj.isStorageStartDateInvalid}
-                invalidText={inputText.date.invalidText}
-                disabled={isStorageChecked}
-              />
-            </DatePicker>
-          </Column>
-          <Column className="storage-end-date-col" sm={4} md={2} lg={4}>
-            <DatePicker
-              datePickerType="single"
-              name="storageEndDate"
-              dateFormat={DATE_FORMAT}
-              value={state.seedStorageEndDate}
-              onChange={(_e: Array<Date>, selectedDate: string) => {
-                handleFormInput('seedStorageEndDate', selectedDate);
-              }}
-              readOnly={readOnly}
-            >
-              <DatePickerInput
-                id="storage-end-date-input"
-                labelText={inputText.date.storage.labelText.end}
-                helperText={inputText.date.helperText}
-                placeholder={inputText.date.placeholder}
-                invalid={validationObj.isStorageEndDateInvalid}
-                invalidText={inputText.date.invalidText}
-                disabled={isStorageChecked}
-              />
-            </DatePicker>
-          </Column>
-        </Row>
-        <Row>
-          <Column sm={4} md={8} lg={8}>
-            {isStorageChecked && !readOnly && isStorageHintOpen && (
-              <InlineNotification
-                lowContrast
-                kind="info"
-                title={inputText.date.storage.notification.title}
-                subtitle={inputText.date.storage.notification.subtitle}
-                onCloseButtonClick={() => { setIsStorageHintOpen(false); }}
-              />
-            )}
-          </Column>
-        </Row>
-      </FlexGrid>
-    </div>
+          )}
+        </Column>
+      </Row>
+    </FlexGrid>
   );
 };
 
diff --git a/frontend/src/components/SeedlotRegistrationSteps/ExtractionAndStorageStep/styles.scss b/frontend/src/components/SeedlotRegistrationSteps/ExtractionAndStorageStep/styles.scss
index b38389924..9d66ca5e9 100644
--- a/frontend/src/components/SeedlotRegistrationSteps/ExtractionAndStorageStep/styles.scss
+++ b/frontend/src/components/SeedlotRegistrationSteps/ExtractionAndStorageStep/styles.scss
@@ -8,6 +8,9 @@
 }
 
 .extractory-and-storage-form {
+  &.#{vars.$bcgov-prefix}--grid {
+    padding-left: 0;
+  }
 
   h2 {
     @include type.type-style('heading-03');
@@ -18,7 +21,7 @@
   .temporary-seed-storage-title {
     margin-bottom: 2.5rem;
   }
-  
+
   .temporary-seed-storage-title {
     margin-top: 3rem;
   }
@@ -28,6 +31,10 @@
     margin-bottom: 1.5rem;
   }
 
+  .storage-date-row {
+    margin-bottom: 3.5rem;
+  }
+
   .extractor-agency-row,
   .seed-storage-agency-row {
     margin-bottom: 2rem;
@@ -52,5 +59,4 @@
       }
     }
   }
-  
 }
diff --git a/frontend/src/components/SeedlotRegistrationSteps/InterimStep/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/InterimStep/index.tsx
index 7c77b9867..f68c606f5 100644
--- a/frontend/src/components/SeedlotRegistrationSteps/InterimStep/index.tsx
+++ b/frontend/src/components/SeedlotRegistrationSteps/InterimStep/index.tsx
@@ -141,191 +141,187 @@ const InterimStorage = (
   };
 
   return (
-    <div className="interim-agency-storage-form">
-      <FlexGrid fullWidth>
-        <Row className="interim-agency-title">
-          <Column lg={8}>
-            <h2>Interim agency</h2>
-            <Subtitle text="Enter the interim agency information" />
-          </Column>
-        </Row>
-        <Row className="interim-agency-checkbox-row">
-          <Column sm={4} md={8} lg={16}>
-            <Checkbox
-              id="interim-agency-checkbox"
-              name="interim-agency"
-              labelText="Use applicant agency as interim storage agency"
-              defaultChecked
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => interimAgencyIsChecked(e)}
+    <FlexGrid className="interim-agency-storage-form" fullWidth>
+      <Row className="interim-title-row">
+        <Column sm={4} md={8} lg={16}>
+          <h2>Interim agency</h2>
+          <Subtitle text="Enter the interim agency information" />
+        </Column>
+      </Row>
+      <Row className="interim-agency-checkbox-row">
+        <Column sm={4} md={8} lg={16}>
+          <Checkbox
+            id="interim-agency-checkbox"
+            name="interim-agency"
+            labelText="Use applicant agency as interim storage agency"
+            defaultChecked
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => interimAgencyIsChecked(e)}
+            readOnly={readOnly}
+          />
+        </Column>
+      </Row>
+      <Row className="agency-information">
+        <Column sm={4} md={4} lg={8} xlg={6}>
+          <ComboBox
+            id="agency-name-combobox"
+            ref={nameInputRef}
+            name="name"
+            helperText="You can enter the agency number, name or acronym"
+            onChange={(e: ComboBoxEvent) => { handleFormInput('agencyName', e.selectedItem); }}
+            selectedItem={state.agencyName}
+            shouldFilterItem={
+              ({ item, inputValue }: FilterObj) => filterInput({ item, inputValue })
+            }
+            titleText="Interim agency"
+            placeholder="Select Interim agency name"
+            items={agencyOptions}
+            invalid={validationObj.isNameInvalid}
+            readOnly={readOnly ?? isChecked}
+          />
+        </Column>
+        <Column sm={4} md={4} lg={8} xlg={6}>
+          <TextInput
+            id="agency-number-input"
+            name="locationCode"
+            ref={numberInputRef}
+            value={state.locationCode}
+            type="number"
+            labelText="Interim agency location code"
+            helperText="2-digit code that identifies the address of operated office or division"
+            invalid={validationObj.isCodeInvalid}
+            invalidText="Please enter a valid value"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              handleFormInput('locationCode', e.target.value);
+            }}
+            readOnly={readOnly ?? isChecked}
+          />
+        </Column>
+      </Row>
+      <Row className="interim-title-row">
+        <Column sm={4} md={8} lg={16}>
+          <h2>Storage information</h2>
+          <Subtitle text="Enter the interim storage information for this seedlot" />
+        </Column>
+      </Row>
+      <Row className="interim-storage-row">
+        <Column className="start-date-col" sm={4} md={4} lg={8} xlg={6}>
+          <DatePicker
+            datePickerType="single"
+            name="startDate"
+            dateFormat={DATE_FORMAT}
+            value={state.startDate}
+            onChange={(_e: Array<Date>, selectedDate: string) => {
+              handleFormInput('startDate', selectedDate);
+            }}
+            readOnly={readOnly}
+          >
+            <DatePickerInput
+              id="start-date-input"
+              labelText="Storage start date"
+              helperText="year/month/day"
+              placeholder="yyyy/mm/dd"
+              invalid={validationObj.isStartDateInvalid}
+              invalidText="Please enter a valid date"
               readOnly={readOnly}
             />
-          </Column>
-        </Row>
-        <Row className="agency-information">
-          <Column sm={4} md={2} lg={4}>
-            <ComboBox
-              id="agency-name-combobox"
-              ref={nameInputRef}
-              name="name"
-              helperText="You can enter the agency number, name or acronym"
-              onChange={(e: ComboBoxEvent) => { handleFormInput('agencyName', e.selectedItem); }}
-              selectedItem={state.agencyName}
-              shouldFilterItem={
-                ({ item, inputValue }: FilterObj) => filterInput({ item, inputValue })
-              }
-              titleText="Interim agency"
-              placeholder="Select Interim agency name"
-              items={agencyOptions}
-              invalid={validationObj.isNameInvalid}
-              readOnly={readOnly ?? isChecked}
+          </DatePicker>
+        </Column>
+        <Column className="end-date-col" sm={4} md={4} lg={8} xlg={6}>
+          <DatePicker
+            datePickerType="single"
+            name="endDate"
+            dateFormat={DATE_FORMAT}
+            minDate={state.startDate}
+            value={state.endDate}
+            onChange={(_e: Array<Date>, selectedDate: string) => {
+              handleFormInput('endDate', selectedDate);
+            }}
+            readOnly={readOnly}
+          >
+            <DatePickerInput
+              id="end-date-input"
+              labelText="Storage end date"
+              helperText="year/month/day"
+              placeholder="yyyy/mm/dd"
+              invalid={validationObj.isEndDateInvalid}
+              invalidText="Please enter a valid date"
             />
-          </Column>
-          <Column sm={4} md={2} lg={4}>
-            <TextInput
-              id="agency-number-input"
-              name="locationCode"
-              ref={numberInputRef}
-              value={state.locationCode}
-              type="number"
-              labelText="Interim agency location code"
-              helperText="2-digit code that identifies the address of operated office or division"
-              invalid={validationObj.isCodeInvalid}
-              invalidText="Please enter a valid value"
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                handleFormInput('locationCode', e.target.value);
-              }}
-              readOnly={readOnly ?? isChecked}
+          </DatePicker>
+        </Column>
+      </Row>
+      <Row className="interim-storage-row">
+        <Column sm={4} md={4} lg={16} xlg={12}>
+          <TextInput
+            id="storage-location-input"
+            name="location"
+            ref={storageLocationInputRef}
+            type="text"
+            value={state.storageLocation}
+            labelText="Storage location"
+            placeholder="Enter the location were the cones were stored"
+            helperText="Enter a short name or description of the location where the cones are being temporarily stored"
+            invalid={validationObj.isStorageInvalid}
+            invalidText="Storage location lenght should be <= 55"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              handleFormInput('storageLocation', e.target.value);
+            }}
+            readOnly={readOnly}
+          />
+        </Column>
+      </Row>
+      <Row className="storage-type-radio">
+        <Column sm={4} md={8} lg={16}>
+          <RadioButtonGroup
+            legendText="Storage facility type"
+            name="storage-type-radiogroup"
+            orientation="vertical"
+            defaultSelected={state.facilityType}
+            onChange={(e: string) => inputChangeHandlerRadio(e)}
+            readOnly={readOnly}
+          >
+            <RadioButton
+              id="outside-radio"
+              labelText="Outside covered - OCV"
+              value="OCV"
             />
-          </Column>
-        </Row>
-        <Row className="storage-information-title">
-          <Column lg={8}>
-            <h2>Storage information</h2>
-            <Subtitle text="Enter the interim storage information for this seedlot" />
-          </Column>
-        </Row>
-        <Row className="storage-date-row">
-          <Column className="start-date-col" sm={4} md={2} lg={4}>
-            <DatePicker
-              datePickerType="single"
-              name="startDate"
-              dateFormat={DATE_FORMAT}
-              value={state.startDate}
-              onChange={(_e: Array<Date>, selectedDate: string) => {
-                handleFormInput('startDate', selectedDate);
-              }}
-              readOnly={readOnly}
-            >
-              <DatePickerInput
-                id="start-date-input"
-                labelText="Storage start date"
-                helperText="year/month/day"
-                placeholder="yyyy/mm/dd"
-                invalid={validationObj.isStartDateInvalid}
-                invalidText="Please enter a valid date"
-                readOnly={readOnly}
-              />
-            </DatePicker>
-          </Column>
-          <Column className="end-date-col" sm={4} md={2} lg={4}>
-            <DatePicker
-              datePickerType="single"
-              name="endDate"
-              dateFormat={DATE_FORMAT}
-              minDate={state.startDate}
-              value={state.endDate}
-              onChange={(_e: Array<Date>, selectedDate: string) => {
-                handleFormInput('endDate', selectedDate);
-              }}
-              readOnly={readOnly}
-            >
-              <DatePickerInput
-                id="end-date-input"
-                labelText="Storage end date"
-                helperText="year/month/day"
-                placeholder="yyyy/mm/dd"
-                invalid={validationObj.isEndDateInvalid}
-                invalidText="Please enter a valid date"
-              />
-            </DatePicker>
-          </Column>
-        </Row>
-        <Row className="storage-location-row">
-          <Column sm={4} md={4} lg={8}>
-            <TextInput
-              id="storage-location-input"
-              name="location"
-              ref={storageLocationInputRef}
-              type="text"
-              value={state.storageLocation}
-              labelText="Storage location"
-              placeholder="Enter the location were the cones were stored"
-              helperText="Enter a short name or description of the location where the cones are being temporarily stored"
-              invalid={validationObj.isStorageInvalid}
-              invalidText="Storage location lenght should be <= 55"
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                handleFormInput('storageLocation', e.target.value);
-              }}
-              readOnly={readOnly}
+            <RadioButton
+              id="ventilated-radio"
+              labelText="Ventilated room - VRM"
+              value="VRM"
             />
-          </Column>
-        </Row>
-        <Row className="storage-type-radio">
-          <Column sm={4} md={8} lg={16}>
-            <RadioButtonGroup
-              legendText="Storage facility type"
-              name="storage-type-radiogroup"
-              orientation="vertical"
-              defaultSelected={state.facilityType}
-              onChange={(e: string) => inputChangeHandlerRadio(e)}
-              readOnly={readOnly}
-            >
-              <RadioButton
-                id="outside-radio"
-                labelText="Outside covered - OCV"
-                value="OCV"
-              />
-              <RadioButton
-                id="ventilated-radio"
-                labelText="Ventilated room - VRM"
-                value="VRM"
-              />
-              <RadioButton
-                id="reefer-radio"
-                labelText="Reefer - RFR"
-                value="RFR"
-              />
-              <RadioButton
-                id="other-radio"
-                labelText="Other - OTH"
-                value="OTH"
-              />
-            </RadioButtonGroup>
-          </Column>
-        </Row>
+            <RadioButton
+              id="reefer-radio"
+              labelText="Reefer - RFR"
+              value="RFR"
+            />
+            <RadioButton
+              id="other-radio"
+              labelText="Other - OTH"
+              value="OTH"
+            />
+          </RadioButtonGroup>
+        </Column>
         {
           otherRadioChecked && (
-            <Row className="storage-facility-type">
-              <Column sm={4} md={4} lg={8}>
-                <TextInput
-                  id="storage-facility-type-input"
-                  name="storage-facility"
-                  type="text"
-                  ref={storageFacilityTypeInputRef}
-                  labelText="Storage facility type"
-                  placeholder="Enter the storage facility type"
-                  helperText="Describe the new storage facility used"
-                  invalid={validationObj.isFacilityInvalid}
-                  invalidText="Storage facility type lenght should be <= 50"
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleFormInput('facilityType', e.target.value)}
-                  readOnly={readOnly}
-                />
-              </Column>
-            </Row>
+            <Column className="storage-facility-type" sm={4} md={4} lg={16} xlg={12}>
+              <TextInput
+                id="storage-facility-type-input"
+                name="storage-facility"
+                type="text"
+                ref={storageFacilityTypeInputRef}
+                labelText="Storage facility type"
+                placeholder="Enter the storage facility type"
+                helperText="Describe the new storage facility used"
+                invalid={validationObj.isFacilityInvalid}
+                invalidText="Storage facility type lenght should be <= 50"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleFormInput('facilityType', e.target.value)}
+                readOnly={readOnly}
+              />
+            </Column>
           )
         }
-      </FlexGrid>
-    </div>
+      </Row>
+    </FlexGrid>
   );
 };
 
diff --git a/frontend/src/components/SeedlotRegistrationSteps/InterimStep/styles.scss b/frontend/src/components/SeedlotRegistrationSteps/InterimStep/styles.scss
index 4fd7d520d..330df045b 100644
--- a/frontend/src/components/SeedlotRegistrationSteps/InterimStep/styles.scss
+++ b/frontend/src/components/SeedlotRegistrationSteps/InterimStep/styles.scss
@@ -2,18 +2,17 @@
 @use '../../../theme/variables.scss' as vars;
 
 .interim-agency-storage-form {
-  .collection-form-buttons {
-    padding-left: 0;
-    margin-left: 0;
-  }
-
   h2 {
     @include type.type-style('heading-03');
     margin-bottom: 0.25rem;
   }
 
-  .interim-agency-title,
-  .storage-information-title,
+  &.#{vars.$bcgov-prefix}--grid {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .interim-title-row,
   .agency-information.#{vars.$bcgov-prefix}--row {
     margin-bottom: 2.5rem;
   }
@@ -22,33 +21,17 @@
     margin-bottom: 1.5rem;
   }
 
-  @media only screen and (max-width: 1584px) {
-    .interim-agency-form {
-      padding-left: 2rem;
-    }
-  }
-
   .storage-facility-type {
     margin-top: 0.5625rem;
     padding-left: 1.75rem;
   }
 
-  .storage-date-row .#{vars.$bcgov-prefix}--row {
-    margin-left: 0;
-  }
-
-  .storage-date-row .#{vars.$bcgov-prefix}--row,
-  .storage-location-row .#{vars.$bcgov-prefix}--row {
+  .interim-storage-row {
     margin-bottom: 2rem;
   }
 
-  .storage-type-radio .#{vars.$bcgov-prefix}--row {
-    margin-bottom: 0;
-  }
-
-  .collection-form-buttons .#{vars.$bcgov-prefix}--row {
-    margin: 2.5rem 0 0;
-    padding: 0;
+  .storage-type-radio {
+    margin-bottom: 3rem;
   }
 
   .#{vars.$bcgov-prefix}--date-picker .#{vars.$bcgov-prefix}--date-picker--single {
@@ -70,12 +53,4 @@
   .storage-location-row {
     margin: 2rem -1rem;
   }
-
-  .btn-collection-form.#{vars.$bcgov-prefix}--btn {
-    width: 15rem;
-  }
-
-  .btn-collection-form.#{vars.$bcgov-prefix}--btn.#{vars.$bcgov-prefix}--btn--secondary {
-    margin-right: 2rem;
-  }
 }
diff --git a/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/index.tsx
index edcf4ea79..c0df71409 100644
--- a/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/index.tsx
+++ b/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/index.tsx
@@ -209,7 +209,7 @@ const OrchardStep = ({
     <div className="seedlot-orchard-step-form">
       <form>
         <Row className="seedlot-orchard-title-row">
-          <Column lg={8}>
+          <Column sm={4} md={8} lg={16}>
             <h2>Orchard information</h2>
             <Subtitle text="Enter the contributing orchard information" />
           </Column>
@@ -217,7 +217,7 @@ const OrchardStep = ({
         {
           state.orchards.map((orchard) => (
             <Row className="seedlot-orchard-field" key={orchard.inputId}>
-              <Column sm={4} md={2} lg={3}>
+              <Column sm={4} md={4} lg={8} xlg={6}>
                 <NumberInput
                   id={`orchardId-${orchard.inputId}`}
                   name="orchardId"
@@ -240,7 +240,7 @@ const OrchardStep = ({
                   readOnly={readOnly}
                 />
               </Column>
-              <Column sm={4} md={2} lg={3}>
+              <Column sm={4} md={4} lg={8} xlg={6}>
                 <TextInput
                   id={`orchardName-${orchard.inputId}`}
                   type="text"
@@ -288,13 +288,13 @@ const OrchardStep = ({
             )
         }
         <Row className="seedlot-orchard-title-row">
-          <Column lg={8}>
+          <Column sm={4} md={8} lg={16}>
             <h2>Gamete information</h2>
             <Subtitle text="Enter the seedlot gamete information" />
           </Column>
         </Row>
         <Row className="seedlot-orchard-field">
-          <Column sm={4} md={4} lg={6}>
+          <Column sm={4} md={8} lg={16} xlg={12}>
             <Dropdown
               id="seedlot-species-dropdown"
               titleText="Seedlot species"
@@ -306,7 +306,7 @@ const OrchardStep = ({
           </Column>
         </Row>
         <Row className="seedlot-orchard-field">
-          <Column sm={4} md={4} lg={6}>
+          <Column sm={4} md={8} lg={16} xlg={12}>
             <ComboBox
               id="female-gametic-combobox"
               name="femaleGametic"
@@ -427,7 +427,7 @@ const OrchardStep = ({
           </Column>
         </Row>
         <Row className="seedlot-orchard-title-row">
-          <Column lg={8}>
+          <Column sm={4} md={8} lg={16}>
             <h2>Pollen information</h2>
             <Subtitle text="Enter the pollen contaminant information" />
           </Column>
@@ -449,7 +449,7 @@ const OrchardStep = ({
         </Row>
         <div className={!state.noPollenContamination ? '' : 'seedlot-orchard-hidden'}>
           <Row className="seedlot-orchard-field">
-            <Column sm={4} md={4} lg={6}>
+            <Column sm={4} md={8} lg={16} xlg={12}>
               <NumberInput
                 id="pollen-percentage-number-input"
                 name="breedingPercentage"
diff --git a/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/styles.scss b/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/styles.scss
index f68c8c37a..7481f9af1 100644
--- a/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/styles.scss
+++ b/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/styles.scss
@@ -2,8 +2,6 @@
 @use '../../../theme/variables.scss' as vars;
 
 .seedlot-orchard-step-form {
-  margin-top: 1rem;
-
   .#{vars.$bcgov-prefix}--text-input-wrapper--readonly .#{vars.$bcgov-prefix}--text-input{
     border: none;
     cursor: default;
@@ -38,17 +36,3 @@
   outline: 2px solid var(--#{vars.$bcgov-prefix}-support-error);
   outline-offset: 1.5px;
 }
-
-.seedlot-orchard-btn-row {
-  button {
-    width: 15.1875rem;
-    margin-right: 1rem;
-    margin-bottom: 3rem;
-  }
-}
-
-@media only screen and (max-width: 1584px) {
-  .applicant-information-form {
-    padding-left: 2rem;
-  }
-}
\ No newline at end of file
diff --git a/frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/SingleOwnerInfo/styles.scss b/frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/SingleOwnerInfo/styles.scss
index 201dde9a3..9f0838494 100644
--- a/frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/SingleOwnerInfo/styles.scss
+++ b/frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/SingleOwnerInfo/styles.scss
@@ -4,6 +4,11 @@
   padding: 1rem;
   width: 100%;
 
+  .#{vars.$bcgov-prefix}--grid {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
   .single-owner-info-col {
     margin: 0;
     padding-bottom: 2rem;
diff --git a/frontend/src/layout/PrivateLayout/styles.scss b/frontend/src/layout/PrivateLayout/styles.scss
index a83fdea0a..2658a8f04 100644
--- a/frontend/src/layout/PrivateLayout/styles.scss
+++ b/frontend/src/layout/PrivateLayout/styles.scss
@@ -7,11 +7,11 @@
   padding-bottom: 2.5rem;
 }
 
-.page-content div.#{vars.$bcgov-prefix}--grid {
+.page-content .#{vars.$bcgov-prefix}--grid {
   max-width: none;
 }
 
-@media only screen and (max-width: 1056px) {
+@media only screen and (max-width: 1055px) {
   .main-container {
     padding-top: 5rem;
     padding-left: 0;
diff --git a/frontend/src/views/Dashboard/dashboard.tsx b/frontend/src/views/Dashboard/dashboard.tsx
index 94d1ad3e9..cda6608d2 100644
--- a/frontend/src/views/Dashboard/dashboard.tsx
+++ b/frontend/src/views/Dashboard/dashboard.tsx
@@ -3,28 +3,41 @@ import React from 'react';
 import {
   FlexGrid,
   Row,
-  Stack
+  Stack,
+  Column
 } from '@carbon/react';
 
 import PageTitle from '../../components/PageTitle';
 import FavouriteActivities from '../../components/FavouriteActivities';
 import RecentActivities from '../../components/RecentActivities';
 
+import './styles.scss';
+
 const Dashboard = () => (
   <FlexGrid className="dashboard-page">
     <Stack gap={7}>
       <Row>
-        <PageTitle
-          title="Dashboard"
-          subtitle="See your favourite and recent activities inside SPAR system"
-        />
+        <Column>
+          <PageTitle
+            title="Dashboard"
+            subtitle="See your favourite and recent activities inside SPAR system"
+          />
+        </Column>
+      </Row>
+      <Row>
+        <Column>
+          <section title="Favourite activities">
+            <FavouriteActivities />
+          </section>
+        </Column>
+      </Row>
+      <Row>
+        <Column>
+          <section title="Recent activities">
+            <RecentActivities />
+          </section>
+        </Column>
       </Row>
-      <section title="Favourite activities">
-        <FavouriteActivities />
-      </section>
-      <section title="Recent activities">
-        <RecentActivities />
-      </section>
     </Stack>
   </FlexGrid>
 );
diff --git a/frontend/src/views/Dashboard/styles.scss b/frontend/src/views/Dashboard/styles.scss
new file mode 100644
index 000000000..5dc1e7aaa
--- /dev/null
+++ b/frontend/src/views/Dashboard/styles.scss
@@ -0,0 +1,21 @@
+@use '../../theme/variables.scss' as vars;
+
+.dashboard-page {
+  padding-left: 0;
+  padding-right: 0;
+
+  div.title-section {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
+  .#{vars.$bcgov-prefix}--row {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .#{vars.$bcgov-prefix}--col {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
diff --git a/frontend/src/views/Seedlot/CreateAClass/styles.scss b/frontend/src/views/Seedlot/CreateAClass/styles.scss
index c8504b075..f21527af2 100644
--- a/frontend/src/views/Seedlot/CreateAClass/styles.scss
+++ b/frontend/src/views/Seedlot/CreateAClass/styles.scss
@@ -1,9 +1,5 @@
-.create-a-class-seedlot-breadcrumb {
-  padding-left: 3.5rem;
-}
-
-@media only screen and (max-width: 1584px) {
+.create-a-class-seedlot-page {
   .create-a-class-seedlot-breadcrumb {
-      padding-left: 3rem;
+    margin-left: 0;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/views/Seedlot/MySeedlots/index.tsx b/frontend/src/views/Seedlot/MySeedlots/index.tsx
index 0baf49e73..109203760 100644
--- a/frontend/src/views/Seedlot/MySeedlots/index.tsx
+++ b/frontend/src/views/Seedlot/MySeedlots/index.tsx
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 
 import {
   Row,
+  Column,
   Breadcrumb,
   BreadcrumbItem,
   FlexGrid,
@@ -42,27 +43,31 @@ const MySeedlots = () => {
   }, []);
 
   return (
-    <FlexGrid>
+    <FlexGrid fullWidth className="my-seedlot-content">
       <Row className="my-seedlot-breadcrumb">
         <Breadcrumb>
           <BreadcrumbItem onClick={() => navigate('/seedlot')}>Seedlots</BreadcrumbItem>
         </Breadcrumb>
       </Row>
       <Row className="my-seedlot-title">
-        <PageTitle
-          title={tableText.pageTitle}
-          subtitle={tableText.pageSubtitle}
-          enableFavourite
-        />
-        <Button
-          kind="primary"
-          onClick={() => { navigate('/seedlot/register-a-class'); }}
-          size="md"
-          className="btn-my-seedlot"
-          renderIcon={Add}
-        >
-          {tableText.buttonText}
-        </Button>
+        <Column sm={4} md={6} lg={14} xlg={12}>
+          <PageTitle
+            title={tableText.pageTitle}
+            subtitle={tableText.pageSubtitle}
+            enableFavourite
+          />
+        </Column>
+        <Column sm={4} md={2} lg={2} xlg={4}>
+          <Button
+            kind="primary"
+            onClick={() => { navigate('/seedlot/register-a-class'); }}
+            size="lg"
+            className="btn-my-seedlot"
+            renderIcon={Add}
+          >
+            {tableText.buttonText}
+          </Button>
+        </Column>
       </Row>
       <Row className="my-seedlot-data-table-row">
         {seedlotsData.length > 0 && <SeedlotDataTable seedlots={seedlotsData} /> }
diff --git a/frontend/src/views/Seedlot/MySeedlots/styles.scss b/frontend/src/views/Seedlot/MySeedlots/styles.scss
index 688394b14..4f1e14dfe 100644
--- a/frontend/src/views/Seedlot/MySeedlots/styles.scss
+++ b/frontend/src/views/Seedlot/MySeedlots/styles.scss
@@ -1,40 +1,44 @@
 @use '../../../theme/variables.scss' as vars;
 
-.my-seedlot-breadcrumb {
-  padding-left: 3.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.my-seedlot-title {
-  justify-content: space-between;
-  margin-bottom: 3.25rem;
-}
-
-.btn-my-seedlot {
-  margin-right: 3.5rem;
-  height: 48px;
-  width: 233px;
-}
-
-.my-seedlot-data-table-row {
-  width: 100%;
-  display: block;
-  margin: 0;
-}
-
-.#{vars.$bcgov-prefix}--table-sort {
-  background-color: var(--#{vars.$bcgov-prefix}-layer-01);
-}
-
-.#{vars.$bcgov-prefix}--search-input { 
-  border-bottom: 1px solid var(--#{vars.$bcgov-prefix}-border-subtle-01)
-}
-
-.#{vars.$bcgov-prefix}--data-table tr {
-  cursor: pointer;
-}
-
-.#{vars.$bcgov-prefix}--pagination__button, 
-.#{vars.$bcgov-prefix}--btn--ghost.#{vars.$bcgov-prefix}--pagination__button {
-  height: 3rem;
+.my-seedlot-content {
+  .my-seedlot-breadcrumb{
+    padding-left: 1rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .title-section {
+    padding-left: 0;
+    margin-left: 0;
+  }
+
+  .my-seedlot-title{
+    justify-content: space-between;
+    margin-bottom: 3.25rem;
+  }
+
+  .btn-my-seedlot{
+    text-align: right;
+  }
+
+  .my-seedlot-data-table-row{
+    width: 100%;
+    margin-left: -2rem;
+  }
+  
+  .#{vars.$bcgov-prefix}--table-sort {
+    background-color: var(--#{vars.$bcgov-prefix}-layer-01);
+  }
+
+  .#{vars.$bcgov-prefix}--search-input { 
+    border-bottom: 1px solid var(--#{vars.$bcgov-prefix}-border-subtle-01)
+  }
+
+  .#{vars.$bcgov-prefix}--data-table tr {
+    cursor: pointer;
+  }
+
+  .#{vars.$bcgov-prefix}--pagination__button, 
+  .#{vars.$bcgov-prefix}--btn--ghost.#{vars.$bcgov-prefix}--pagination__button {
+    height: 3rem;
+  }
 }
diff --git a/frontend/src/views/Seedlot/SeedlotDashboard/styles.scss b/frontend/src/views/Seedlot/SeedlotDashboard/styles.scss
index 3591b7fac..9827be736 100644
--- a/frontend/src/views/Seedlot/SeedlotDashboard/styles.scss
+++ b/frontend/src/views/Seedlot/SeedlotDashboard/styles.scss
@@ -1,15 +1,15 @@
-.seedlot-dashboard-content {
-  padding-left: 2.5rem;
-}
+@use '../../../theme/variables.scss' as vars;
+
+.seedlot-page {
+  padding-left: 0;
+  padding-right: 0;
 
-@media only screen and (max-width: 1584px) {
-  .seedlot-dashboard-content {
-    padding-left: 2rem;
+  .title-section{
+    padding-left: 0;
   }
-}
 
-@media only screen and (max-width: 672px) {
-  .seedlot-dashboard-content {
-    padding-left: 1rem;
+  .#{vars.$bcgov-prefix}--row {
+    margin-left: 2.5rem;
+    margin-right: 2.5rem;
   }
 }
diff --git a/frontend/src/views/Seedlot/SeedlotDetails/index.tsx b/frontend/src/views/Seedlot/SeedlotDetails/index.tsx
index d39fb9cf6..7d2325f17 100644
--- a/frontend/src/views/Seedlot/SeedlotDetails/index.tsx
+++ b/frontend/src/views/Seedlot/SeedlotDetails/index.tsx
@@ -83,17 +83,21 @@ const SeedlotDetails = () => {
       </Row>
       <Stack gap={6}>
         <Row className="seedlot-summary-title">
-          {
-            seedlotData
-            && (
-              <PageTitle
-                title={`Seedlot ${seedlotData.number}`}
-                subtitle="Check and manage this seedlot"
-                enableFavourite
-              />
-            )
-          }
-          <ComboButton title="Edit seedlot form" items={manageOptions} menuOptionsClass="edit-seedlot-form" />
+          <Column sm={4} md={6} lg={14} xlg={12}>
+            {
+              seedlotData
+              && (
+                <PageTitle
+                  title={`Seedlot ${seedlotData.number}`}
+                  subtitle="Check and manage this seedlot"
+                  enableFavourite
+                />
+              )
+            }
+          </Column>
+          <Column sm={4} md={2} lg={2} xlg={4}>
+            <ComboButton title="Edit seedlot form" items={manageOptions} menuOptionsClass="edit-seedlot-form" />
+          </Column>
         </Row>
         <section title="Seedlot Summary">
           <Row className="seedlot-summary-content">
diff --git a/frontend/src/views/Seedlot/SeedlotDetails/styles.scss b/frontend/src/views/Seedlot/SeedlotDetails/styles.scss
index 057aee39a..6595176db 100644
--- a/frontend/src/views/Seedlot/SeedlotDetails/styles.scss
+++ b/frontend/src/views/Seedlot/SeedlotDetails/styles.scss
@@ -1,39 +1,44 @@
 @use '../../../theme/variables.scss' as vars;
 
-.seedlot-summary-content {
-  padding: 0 2.5rem !important;
-}
-
-.seedlot-details-breadcrumb {
-  padding-left: 3.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.seedlot-details-breadcrumb .#{vars.$bcgov-prefix}--link {
-  cursor: pointer;
-}
-
-.seedlot-summary-title {
-  justify-content: space-between;
-}
-
-.seedlot-summary-title > .combo-button-wrapper{
-  padding-right: 3.5rem;
-}
-
-.seedlot-details-page .#{vars.$bcgov-prefix}--tabs {
-  padding-left: 1.5rem;
-}
-
-.seedlot-details-content .#{vars.$bcgov-prefix}--tab-content {
-  background-color: var(--bcgov-layer-01);
-  padding: 1.75rem 2.5rem !important;
-}
-
-.edit-seedlot-form {
-  width: 11.75rem;
-}
-
-.edit-seedlot-form .#{vars.$bcgov-prefix}--overflow-menu-options__btn {
-  max-width: 100%;
+.seedlot-details-page {
+  .title-section {
+    padding-left: 0;
+    margin-left: 0;
+  }
+
+  .seedlot-details-breadcrumb {
+    margin-left: 0rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .seedlot-details-breadcrumb .#{vars.$bcgov-prefix}--link {
+    cursor: pointer;
+  }
+
+  .seedlot-summary-title .combo-button-wrapper{
+    text-align: right;
+  }
+
+  // Using negative margin here for now
+  .seedlot-details-content {
+    padding-left: 0;
+    margin-left: -3.5rem;
+  }
+
+  .#{vars.$bcgov-prefix}--tabs {
+    padding-left: 1.5rem;
+  }
+
+  .seedlot-details-content .#{vars.$bcgov-prefix}--tab-content {
+    background-color: var(--#{vars.$bcgov-prefix}-layer-01);
+    padding: 1.75rem 2.5rem !important;
+  }
+
+  .edit-seedlot-form {
+    width: 11.75rem;
+  }
+
+  .edit-seedlot-form .#{vars.$bcgov-prefix}--overflow-menu-options__btn {
+    max-width: 100%;
+  }
 }
diff --git a/frontend/src/views/Seedlot/SeedlotRegistrationForm/index.tsx b/frontend/src/views/Seedlot/SeedlotRegistrationForm/index.tsx
index 92d27b829..0243aab6c 100644
--- a/frontend/src/views/Seedlot/SeedlotRegistrationForm/index.tsx
+++ b/frontend/src/views/Seedlot/SeedlotRegistrationForm/index.tsx
@@ -253,7 +253,7 @@ const SeedlotRegistrationForm = () => {
         </Row>
         <Row className="seedlot-registration-button-row">
           <Grid narrow>
-            <Column sm={4} md={3} lg={3} xlg={3}>
+            <Column sm={4} md={3} lg={3} xlg={4}>
               {
                 formStep !== 0
                   ? (
@@ -279,7 +279,7 @@ const SeedlotRegistrationForm = () => {
 
               }
             </Column>
-            <Column sm={4} md={3} lg={3} xlg={3}>
+            <Column sm={4} md={3} lg={3} xlg={4}>
               {
                 formStep !== 5
                   ? (