diff --git a/.ladle/Welcome.stories.tsx b/.ladle/Welcome.stories.tsx
index d9b79291f..6d339da0b 100644
--- a/.ladle/Welcome.stories.tsx
+++ b/.ladle/Welcome.stories.tsx
@@ -102,24 +102,27 @@ export const Introduction: Story = () => {
             <Components.Text className={styles.paragraph}>
               Ladle provides several features to help with component development:
             </Components.Text>
-            <ul className={styles.list}>
-              <li className={styles.listItem}>
-                <strong>Isolated Testing:</strong> Develop and test components in isolation from the
-                rest of the application
-              </li>
-              <li className={styles.listItem}>
-                <strong>Interactive Controls:</strong> Use controls to test components with
-                different props and configurations
-              </li>
-              <li className={styles.listItem}>
-                <strong>Viewport Sizing:</strong> Test components at different screen sizes with the
-                viewport controls
-              </li>
-              <li className={styles.listItem}>
-                <strong>Component Adapter Toggle:</strong> Use the toggle button in the bottom-right
-                corner to switch between the default React Aria and the plain HTML components
-              </li>
-            </ul>
+            <Components.UnorderedList
+              items={[
+                <>
+                  <strong>Isolated Testing:</strong> Develop and test components in isolation from
+                  the rest of the application
+                </>,
+                <>
+                  <strong>Interactive Controls:</strong> Use controls to test components with
+                  different props and configurations
+                </>,
+                <>
+                  <strong>Viewport Sizing:</strong> Test components at different screen sizes with
+                  the viewport controls
+                </>,
+                <>
+                  <strong>Component Adapter Toggle:</strong> Use the toggle button in the
+                  bottom-right corner to switch between the default React Aria and the plain HTML
+                  components
+                </>,
+              ]}
+            />
           </Flex>
         </Components.Card>
 
diff --git a/src/components/Common/RequirementsList/RequirementsList.module.scss b/src/components/Common/RequirementsList/RequirementsList.module.scss
index 4412a5c62..51417db51 100644
--- a/src/components/Common/RequirementsList/RequirementsList.module.scss
+++ b/src/components/Common/RequirementsList/RequirementsList.module.scss
@@ -2,6 +2,26 @@
   .list {
     position: relative;
     width: 100%;
+    list-style-type: none;
+    padding: 0;
+    gap: 0;
+
+    :global(li) {
+      margin-bottom: 0;
+      position: relative;
+
+      &:not(:last-child) .listItem::after {
+        content: '';
+        position: absolute;
+        left: toRem(14); // center of the icon
+        top: toRem(32); // just below the icon
+        width: 0;
+        height: calc(100% - toRem(32)); //account for the icon height
+        margin: toRem(7) 0; //adding gap to the line
+        border-left: 2px dotted var(--g-colorBorder);
+        z-index: 0;
+      }
+    }
   }
 
   .listItem {
@@ -9,19 +29,6 @@
     align-items: flex-start;
     gap: toRem(16);
     position: relative;
-
-    // Draw the vertical dotted line for all but the last item
-    &:not(:last-child)::after {
-      content: '';
-      position: absolute;
-      left: toRem(14); // center of the icon
-      top: toRem(32); // just below the icon
-      width: 0;
-      height: calc(100% - toRem(32)); //account for the icon height
-      margin: toRem(7) 0; //adding gap to the line
-      border-left: 2px dotted var(--g-colorBorder);
-      z-index: 0;
-    }
   }
 
   .listItemIcon {
diff --git a/src/components/Common/RequirementsList/RequirementsList.tsx b/src/components/Common/RequirementsList/RequirementsList.tsx
index 5aef7486e..87c1219df 100644
--- a/src/components/Common/RequirementsList/RequirementsList.tsx
+++ b/src/components/Common/RequirementsList/RequirementsList.tsx
@@ -18,12 +18,13 @@ export const RequirementsList = ({ requirements }: RequirementsListProps) => {
 
   return (
     <Flex flexDirection="column" alignItems="flex-start" gap={8}>
-      <ul className={styles.list}>
-        {requirements
+      <Components.UnorderedList
+        className={styles.list}
+        items={requirements
           .sort((a, b) => (a.completed ? -1 : 1))
           .map((step, i) => {
             return (
-              <li key={`${id}-${i}-${step.description}`} className={styles.listItem}>
+              <div key={`${id}-${i}-${step.description}`} className={styles.listItem}>
                 {step.completed ? (
                   <div className={classNames(styles.listItemIcon, styles.success)}>
                     <SuccessCheck width={16} height={16} />
@@ -35,10 +36,10 @@ export const RequirementsList = ({ requirements }: RequirementsListProps) => {
                   <Components.Heading as="h4">{step.title}</Components.Heading>
                   <Components.Text variant="supporting">{step.description}</Components.Text>
                 </Flex>
-              </li>
+              </div>
             )
           })}
-      </ul>
+      />
     </Flex>
   )
 }
diff --git a/src/components/Common/UI/List/List.module.scss b/src/components/Common/UI/List/List.module.scss
index 83f6edc0b..3df4df39d 100644
--- a/src/components/Common/UI/List/List.module.scss
+++ b/src/components/Common/UI/List/List.module.scss
@@ -10,6 +10,10 @@
 
   &[data-variant='unordered'] {
     list-style-type: disc;
+    display: flex;
+    flex-direction: column;
+    gap: toRem(12);
+    padding: 0 0 0 toRem(24);
   }
 
   .item {
diff --git a/src/components/Employee/Landing/Landing.tsx b/src/components/Employee/Landing/Landing.tsx
index 06337def0..0800aba51 100644
--- a/src/components/Employee/Landing/Landing.tsx
+++ b/src/components/Employee/Landing/Landing.tsx
@@ -59,11 +59,9 @@ const Root = ({ employeeId, companyId, className }: SummaryProps) => {
         </Flex>
         <Flex flexDirection="column" gap={8}>
           <Components.Heading as="h3">{t('stepsSubtitle')}</Components.Heading>
-          <ul>
-            <li>{t('steps.personalInfo')}</li>
-            <li>{t('steps.taxInfo')}</li>
-            <li>{t('steps.bankInfo')}</li>
-          </ul>
+          <Components.UnorderedList
+            items={[t('steps.personalInfo'), t('steps.taxInfo'), t('steps.bankInfo')]}
+          />
         </Flex>
         <Flex flexDirection="column" alignItems="center" gap={8}>
           <ActionsLayout justifyContent="center">
diff --git a/src/styles/_Base.scss b/src/styles/_Base.scss
index a5a763b03..7f3343711 100644
--- a/src/styles/_Base.scss
+++ b/src/styles/_Base.scss
@@ -14,14 +14,6 @@
     box-sizing: border-box;
   }
 
-  ul {
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: toRem(12);
-    padding: 0 0 0 toRem(24);
-  }
-
   hr {
     width: 100%;
     border-top: 1px solid var(--g-colorBorder);