diff --git a/development/generate-icon-names.js b/development/generate-icon-names.js
index 60637ae86deb..a89887de73cf 100644
--- a/development/generate-icon-names.js
+++ b/development/generate-icon-names.js
@@ -4,7 +4,7 @@
  * Reads all the icon svg files in app/images/icons
  * and returns an object of icon name key value pairs
  * stored in the environment variable ICON_NAMES
- * Used with the Icon component in ./ui/component-library/icon
+ * Used with the Icon component in ./ui/components/component-library/icon/icon.js
  */
 const fs = require('fs');
 const path = require('path');
diff --git a/ui/components/component-library/button-base/README.mdx b/ui/components/component-library/button-base/README.mdx
index e541eb4f3233..76d630f88493 100644
--- a/ui/components/component-library/button-base/README.mdx
+++ b/ui/components/component-library/button-base/README.mdx
@@ -37,7 +37,7 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { ButtonBase } from '../../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 
 <ButtonBase size={SIZES.AUTO} />
 <ButtonBase size={SIZES.SM} />
@@ -55,7 +55,7 @@ Use boolean `block` prop to quickly enable a full width block button
 
 ```jsx
 import { DISPLAY } from '../../../helpers/constants/design-system';
-import { ButtonBase } from '../../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 
 <ButtonBase>Default Button</ButtonBase>
 <ButtonBase block>Block Button</ButtonBase>
@@ -77,7 +77,7 @@ Button `as` options:
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 
 
 <ButtonBase as="button">Button Element</ButtonBase>
@@ -95,7 +95,7 @@ When an `href` prop is passed it will change the element to an anchor(`a`) tag.
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 
 <ButtonBase href="/metamask">Anchor Element</ButtonBase>;
 ```
@@ -109,7 +109,7 @@ Use the boolean `disabled` prop to disable button
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 
 <ButtonBase disabled>Disabled Button</ButtonBase>;
 ```
@@ -123,7 +123,7 @@ Use the boolean `loading` prop to set loading spinner
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 
 <ButtonBase loading>Loading Button</ButtonBase>;
 ```
@@ -137,7 +137,7 @@ Use the `icon` prop and the `ICON_NAMES` object from `./ui/components/component-
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 import { ICON_NAMES } from '../icon';
 
 <ButtonBase icon={ICON_NAMES.ADD_SQUARE_FILLED}>Button</ButtonBase>;
diff --git a/ui/components/component-library/button-link/README.mdx b/ui/components/component-library/button-link/README.mdx
index ce1d2a7595dc..e6f51f3cc36a 100644
--- a/ui/components/component-library/button-link/README.mdx
+++ b/ui/components/component-library/button-link/README.mdx
@@ -35,7 +35,7 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { ButtonLink } from '../../ui/component-library';
+import { ButtonLink } from '../../ui/components/component-library';
 
 <ButtonLink size={SIZES.AUTO} />
 <ButtonLink size={SIZES.SM} />
@@ -52,7 +52,7 @@ Use the `type` prop and the `BUTTON_TYPES` object from `./ui/helpers/constants/d
 </Canvas>
 
 ```jsx
-import { ButtonLink } from '../../ui/component-library';
+import { ButtonLink } from '../../ui/components/component-library';
 
 <ButtonLink>Normal</ButtonLink>
 <ButtonLink danger>Danger</ButtonLink>
@@ -67,7 +67,7 @@ When an `href` is passed the tag element will switch to an `anchor`(`a`) tag.
 </Canvas>
 
 ```jsx
-import { ButtonLink } from '../../ui/component-library';
+import { ButtonLink } from '../../ui/components/component-library';
 
 <ButtonLink href="/">Href Example</ButtonLink>;
 ```
diff --git a/ui/components/component-library/button-primary/README.mdx b/ui/components/component-library/button-primary/README.mdx
index eabf1196f553..cbde05658002 100644
--- a/ui/components/component-library/button-primary/README.mdx
+++ b/ui/components/component-library/button-primary/README.mdx
@@ -34,7 +34,7 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { ButtonPrimary } from '../../ui/component-library';
+import { ButtonPrimary } from '../../ui/components/component-library';
 
 <ButtonPrimary size={SIZES.SM} />
 <ButtonPrimary size={SIZES.MD} />
@@ -50,7 +50,7 @@ Use the `type` prop and the `BUTTON_TYPES` object from `./ui/helpers/constants/d
 </Canvas>
 
 ```jsx
-import { ButtonPrimary } from '../../ui/component-library';
+import { ButtonPrimary } from '../../ui/components/component-library';
 
 <ButtonPrimary>Normal</ButtonPrimary>
 <ButtonPrimary danger>Danger</ButtonPrimary>
diff --git a/ui/components/component-library/button-secondary/README.mdx b/ui/components/component-library/button-secondary/README.mdx
index 320f263e8d37..4a7897d73b9b 100644
--- a/ui/components/component-library/button-secondary/README.mdx
+++ b/ui/components/component-library/button-secondary/README.mdx
@@ -34,7 +34,7 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { ButtonSecondary } from '../../ui/component-library';
+import { ButtonSecondary } from '../../ui/components/component-library';
 
 <ButtonSecondary size={SIZES.SM} />
 <ButtonSecondary size={SIZES.MD} />
@@ -50,7 +50,7 @@ Use the `type` prop and the `BUTTON_TYPES` object from `./ui/helpers/constants/d
 </Canvas>
 
 ```jsx
-import { ButtonSecondary } from '../../ui/component-library';
+import { ButtonSecondary } from '../../ui/components/component-library';
 
 <ButtonSecondary>Normal</ButtonSecondary>
 <ButtonSecondary danger>Danger</ButtonSecondary>
diff --git a/ui/components/component-library/help-text/README.mdx b/ui/components/component-library/help-text/README.mdx
index 45527c352c02..03c2cf50aade 100644
--- a/ui/components/component-library/help-text/README.mdx
+++ b/ui/components/component-library/help-text/README.mdx
@@ -26,8 +26,8 @@ The `children` of the `HelpText` can be plain text or react nodes.
 
 ```jsx
 import { SIZES, COLORS } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../../ui/component-library';
-import { HelpText } from '../../ui/component-library';
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
+import { HelpText } from '../../ui/components/component-library';
 
 <HelpText>Plain text</HelpText>
 <HelpText>
@@ -50,7 +50,7 @@ Use the `error` prop to show the `HelpText` in error state.
 </Canvas>
 
 ```jsx
-import { HelpText } from '../../ui/component-library';
+import { HelpText } from '../../ui/components/component-library';
 
 <HelpText error>This HelpText in error state</HelpText>;
 ```
@@ -65,7 +65,7 @@ It may be useful to change the color of the `HelpText`. Use the `color` prop and
 
 ```jsx
 import { COLORS } from '../../../helpers/constants/design-system';
-import { HelpText } from '../../ui/component-library';
+import { HelpText } from '../../ui/components/component-library';
 
 <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
   <HelpText color={COLORS.TEXT_DEFAULT}>
diff --git a/ui/components/component-library/icon/README.mdx b/ui/components/component-library/icon/README.mdx
index 0f184982cf0a..d18913802c4e 100644
--- a/ui/components/component-library/icon/README.mdx
+++ b/ui/components/component-library/icon/README.mdx
@@ -23,7 +23,7 @@ Use the `name` prop and the `ICON_NAMES` object to change the icon.
 Use the [IconSearch](/ui-components-component-library-icon-icon-stories-js--name) story to find the icon you want to use.
 
 ```jsx
-import { Icon, ICON_NAMES } from '../../ui/component-library';
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
 
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} />
 <Icon name={ICON_NAMES.BANK_FILLED} />
@@ -55,7 +55,7 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../../ui/component-library';
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
 
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.XXS} />
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.XS} />
@@ -79,7 +79,7 @@ Use the `color` prop and the `COLORS` object from `./ui/helpers/constants/design
 
 ```jsx
 import { COLORS } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../../ui/component-library';
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
 
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.INHERIT} />
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.ICON_DEFAULT} />
diff --git a/ui/components/component-library/label/README.mdx b/ui/components/component-library/label/README.mdx
index cc9e6e9ca225..5f83c96d5cc0 100644
--- a/ui/components/component-library/label/README.mdx
+++ b/ui/components/component-library/label/README.mdx
@@ -26,9 +26,9 @@ The `children` of the label can be text or a react node.
 
 ```jsx
 import { DISPLAY, ALIGN_ITEMS, FLEX_DIRECTION, SIZES, COLORS } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../../ui/component-library;
-import { Label } from '../../ui/component-library;
-import { TextFieldBase } from '../../ui/component-library';
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
+import { Label } from '../../ui/components/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <Label>Plain text</Label>
 <Label display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.FLEX_START}>
@@ -59,8 +59,8 @@ Use the `htmlFor` prop to allow the `Label` to focus on an input with the same i
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library;
-import { Label } from '../../ui/component-library;
+import { TextFieldBase } from '../../ui/components/component-library';
+import { Label } from '../../ui/components/component-library';
 
 <Label htmlFor="add-network">Add network</Label>
 <TextFieldBase  id="add-network" placeholder="Enter network name" />
@@ -75,7 +75,7 @@ Use the `required` prop to add a required red asterisk next to the `children` of
 </Canvas>
 
 ```jsx
-import { Label } from '../../ui/component-library;
+import { Label } from '../../ui/components/component-library';
 
 <Label required>Label</Label>;
 ```
@@ -89,7 +89,7 @@ Use the `disabled` prop to set the `Label` in disabled state
 </Canvas>
 
 ```jsx
-import { Label } from '../../ui/component-library;
+import { Label } from '../../ui/components/component-library';
 
 <Label disabled>Label</Label>;
 ```
diff --git a/ui/components/component-library/text-field-base/README.mdx b/ui/components/component-library/text-field-base/README.mdx
index ad035ac1b634..7915cd6552e1 100644
--- a/ui/components/component-library/text-field-base/README.mdx
+++ b/ui/components/component-library/text-field-base/README.mdx
@@ -35,7 +35,7 @@ Defaults to `md`
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 import { SIZES } from '../../../helpers/constants/design-system';
 
 <TextFieldBase size={SIZES.SM} />
@@ -60,7 +60,7 @@ Defaults to `text`.
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase type="text" /> // (Default)
 <TextFieldBase type="number" />
@@ -76,7 +76,7 @@ Use the `truncate` prop to truncate the text of the the `TextFieldBase`. Default
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase truncate />; // truncate is set to `true` by default
 <TextFieldBase truncate={false} />;
@@ -92,9 +92,9 @@ Use the `leftAccessory` and `rightAccessory` props to add components such as ico
 
 ```jsx
 import { COLORS, SIZES, DISPLAY } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../../ui/component-library';
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
 
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase
   placeholder="Search"
@@ -156,7 +156,7 @@ Use the `inputRef` prop to access the ref of the `<input />` html element of `Te
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 const inputRef = useRef(null);
 const [value, setValue] = useState('');
@@ -197,7 +197,7 @@ Use the `autoComplete` prop to set the autocomplete html attribute. It allows th
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase type="password" autoComplete />;
 ```
@@ -211,7 +211,7 @@ Use the `autoFocus` prop to focus the `TextFieldBase` during the first mount
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase autoFocus />;
 ```
@@ -225,7 +225,7 @@ Use the `defaultValue` prop to set the default value of the `TextFieldBase`
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase defaultValue="default value" />;
 ```
@@ -239,7 +239,7 @@ Use the `disabled` prop to set the disabled state of the `TextFieldBase`
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase disabled />;
 ```
@@ -253,7 +253,7 @@ Use the `error` prop to set the error state of the `TextFieldBase`
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase error />;
 ```
@@ -267,7 +267,7 @@ Use the `maxLength` prop to set the maximum allowed input characters for the `Te
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase maxLength={10} />;
 ```
@@ -281,7 +281,7 @@ Use the `readOnly` prop to set the `TextFieldBase` to read only. When `readOnly`
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase readOnly />;
 ```
@@ -295,7 +295,7 @@ Use the `required` prop to set the `TextFieldBase` to required. Currently there
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 // Currently no visual difference
 <TextFieldBase required />;
diff --git a/ui/components/component-library/text-field/README.mdx b/ui/components/component-library/text-field/README.mdx
index 62e455a46741..8349226f16f5 100644
--- a/ui/components/component-library/text-field/README.mdx
+++ b/ui/components/component-library/text-field/README.mdx
@@ -26,7 +26,7 @@ You can also attach an `onClear` handler to the `TextField` to perform additiona
 </Canvas>
 
 ```jsx
-import { TextField } from '../../ui/component-library';
+import { TextField } from '../../ui/components/component-library';
 
 <TextField showClear />;
 ```
@@ -40,7 +40,7 @@ Use the `onClear` prop to perform additional actions when the clear button is cl
 </Canvas>
 
 ```jsx
-import { TextField } from '../../ui/component-library';
+import { TextField } from '../../ui/components/component-library';
 
 <TextField showClear onClear={() => console.log('cleared input')} />;
 ```
@@ -59,7 +59,7 @@ import {
   COLORS,
   BORDER_RADIUS,
 } from '../../../helpers/constants/design-system';
-import { TextField } from '../../ui/component-library';
+import { TextField } from '../../ui/components/component-library';
 
 <TextField
   showClear
diff --git a/ui/components/component-library/text/README.mdx b/ui/components/component-library/text/README.mdx
index 5710eeeca03a..c06c2364fb13 100644
--- a/ui/components/component-library/text/README.mdx
+++ b/ui/components/component-library/text/README.mdx
@@ -25,7 +25,7 @@ Use the `variant` prop and the `TEXT` object from `./ui/helpers/constants/design
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library';
+import { Text } from '../../ui/components/component-library';
 import { TEXT } from '../../../helpers/constants/design-system';
 
 <Text variant={TEXT.DISPLAY_MD}>display-md</Text>
@@ -47,7 +47,7 @@ Use the `color` prop and the `COLORS` object from `./ui/helpers/constants/design
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library';
+import { Text } from '../../ui/components/component-library';
 import { COLORS } from '../../../helpers/constants/design-system';
 
 <Text color={COLORS.TEXT_DEFAULT}>
@@ -104,7 +104,7 @@ Use the `fontWeight` prop and the `FONT_WEIGHT` object from `./ui/helpers/consta
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library';
+import { Text } from '../../ui/components/component-library';
 import { FONT_WEIGHT } from '../../../helpers/constants/design-system';
 
 <Text fontWeight={FONT_WEIGHT.NORMAL}>
@@ -130,7 +130,7 @@ Use the `fontStyle` prop and the `FONT_STYLE` object from `./ui/helpers/constant
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library';
+import { Text } from '../../ui/components/component-library';
 import { FONT_STYLE } from '../../../helpers/constants/design-system';
 
 <Text fontStyle={FONT_STYLE.NORMAL}>
@@ -150,7 +150,7 @@ Use the `textTransform` prop and the `TEXT_TRANSFORM` object from `./ui/helpers/
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library';
+import { Text } from '../../ui/components/component-library';
 import { TEXT_TRANSFORM } from '../../../helpers/constants/design-system';
 
 <Text textAlign={TEXT_TRANSFORM.UPPERCASE}>
@@ -173,7 +173,7 @@ Use the `textAlign` prop and the `TEXT_ALIGN` object from `./ui/helpers/constant
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library';
+import { Text } from '../../ui/components/component-library';
 import { TEXT_ALIGN } from '../../../helpers/constants/design-system';
 
 <Text textAlign={TEXT_ALIGN.LEFT}>
@@ -202,7 +202,7 @@ Use the `overflowWrap` prop and the `OVERFLOW_WRAP` object from `./ui/helpers/co
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library';
+import { Text } from '../../ui/components/component-library';
 import { OVERFLOW_WRAP } from '../../../helpers/constants/design-system';
 
 <div
@@ -230,7 +230,7 @@ Use the boolean `ellipsis` prop to change the if the `Text` component to have an
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library';
+import { Text } from '../../ui/components/component-library';
 
 <div
   style={{
@@ -253,7 +253,7 @@ Use the `as` prop to change the root html element of the `Text` component
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library';
+import { Text } from '../../ui/components/component-library';
 
 <Text as="dd">dd</Text>
 <Text as="div">div</Text>