diff --git a/packages/pl-fe/src/actions/moderation.tsx b/packages/pl-fe/src/actions/moderation.tsx
index 9ce0983973..8358b701a5 100644
--- a/packages/pl-fe/src/actions/moderation.tsx
+++ b/packages/pl-fe/src/actions/moderation.tsx
@@ -4,7 +4,8 @@ import { defineMessages, IntlShape } from 'react-intl';
 import { fetchAccountByUsername } from 'pl-fe/actions/accounts';
 import { deactivateUser, deleteUser, deleteStatus, toggleStatusSensitivity } from 'pl-fe/actions/admin';
 import OutlineBox from 'pl-fe/components/outline-box';
-import { Stack, Text } from 'pl-fe/components/ui';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import AccountContainer from 'pl-fe/containers/account-container';
 import { selectAccount } from 'pl-fe/selectors';
 import { useModalsStore } from 'pl-fe/stores';
diff --git a/packages/pl-fe/src/components/account-hover-card.tsx b/packages/pl-fe/src/components/account-hover-card.tsx
index 0111fd32be..368edaf6c9 100644
--- a/packages/pl-fe/src/components/account-hover-card.tsx
+++ b/packages/pl-fe/src/components/account-hover-card.tsx
@@ -16,7 +16,7 @@ import { showAccountHoverCard } from './hover-account-wrapper';
 import { ParsedContent } from './parsed-content';
 import { dateFormatOptions } from './relative-timestamp';
 import Scrobble from './scrobble';
-import { Card, CardBody, HStack, Icon, Stack, Text } from './ui';
+import { Card, CardBody, HStack, Icon, Stack, Text } from 'pl-fe/components/ui';
 
 import type { Account } from 'pl-fe/normalizers';
 
diff --git a/packages/pl-fe/src/components/account.tsx b/packages/pl-fe/src/components/account.tsx
index 70ecec5d54..a9dd7f8bd4 100644
--- a/packages/pl-fe/src/components/account.tsx
+++ b/packages/pl-fe/src/components/account.tsx
@@ -12,7 +12,14 @@ import { displayFqn } from 'pl-fe/utils/state';
 import Badge from './badge';
 import { ParsedContent } from './parsed-content';
 import RelativeTimestamp from './relative-timestamp';
-import { Avatar, Emoji, HStack, Icon, IconButton, Stack, Text } from './ui';
+import Avatar from 'pl-fe/components/ui/avatar';
+import Emoji from 'pl-fe/components/ui/emoji';
+import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
+import IconButton from 'pl-fe/components/ui/icon-button';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
+
 
 import type { Account as AccountSchema } from 'pl-fe/normalizers';
 import type { StatusApprovalStatus } from 'pl-fe/normalizers/status';
diff --git a/packages/pl-fe/src/components/alt-indicator.tsx b/packages/pl-fe/src/components/alt-indicator.tsx
index a4fc88a87f..ad1c8642d9 100644
--- a/packages/pl-fe/src/components/alt-indicator.tsx
+++ b/packages/pl-fe/src/components/alt-indicator.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Icon } from './ui';
+import Icon from 'pl-fe/components/ui/icon';
 
 interface IAltIndicator extends Pick<React.HTMLAttributes<HTMLSpanElement>, 'title' | 'className'> {
   warning?: boolean;
diff --git a/packages/pl-fe/src/components/announcements/announcement.tsx b/packages/pl-fe/src/components/announcements/announcement.tsx
index b616107839..662bfede5e 100644
--- a/packages/pl-fe/src/components/announcements/announcement.tsx
+++ b/packages/pl-fe/src/components/announcements/announcement.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { FormattedDate } from 'react-intl';
 
-import { Stack, Text } from 'pl-fe/components/ui';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import { useFeatures } from 'pl-fe/hooks';
 import { getTextDirection } from 'pl-fe/utils/rtl';
 
diff --git a/packages/pl-fe/src/components/autosuggest-input.tsx b/packages/pl-fe/src/components/autosuggest-input.tsx
index 4ad75ab1b1..b7810d2de5 100644
--- a/packages/pl-fe/src/components/autosuggest-input.tsx
+++ b/packages/pl-fe/src/components/autosuggest-input.tsx
@@ -4,7 +4,8 @@ import React, { PureComponent } from 'react';
 
 import AutosuggestEmoji from 'pl-fe/components/autosuggest-emoji';
 import Icon from 'pl-fe/components/icon';
-import { Input, Portal } from 'pl-fe/components/ui';
+import Input from 'pl-fe/components/ui/input';
+import Portal from 'pl-fe/components/ui/portal';
 import AutosuggestAccount from 'pl-fe/features/compose/components/autosuggest-account';
 import { textAtCursorMatchesToken } from 'pl-fe/utils/suggestions';
 
diff --git a/packages/pl-fe/src/components/autosuggest-location.tsx b/packages/pl-fe/src/components/autosuggest-location.tsx
index 0d384eaa2f..2afe7e827a 100644
--- a/packages/pl-fe/src/components/autosuggest-location.tsx
+++ b/packages/pl-fe/src/components/autosuggest-location.tsx
@@ -2,7 +2,10 @@ import React from 'react';
 
 import { useAppSelector } from 'pl-fe/hooks';
 
-import { HStack, Icon, Stack, Text } from './ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 
 const buildingCommunityIcon = require('@tabler/icons/outline/building-community.svg');
 const homeIcon = require('@tabler/icons/outline/home-2.svg');
diff --git a/packages/pl-fe/src/components/avatar-stack.tsx b/packages/pl-fe/src/components/avatar-stack.tsx
index 7776fe6ff3..a8241cffdd 100644
--- a/packages/pl-fe/src/components/avatar-stack.tsx
+++ b/packages/pl-fe/src/components/avatar-stack.tsx
@@ -2,7 +2,8 @@ import clsx from 'clsx';
 import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
 import React from 'react';
 
-import { Avatar, HStack } from 'pl-fe/components/ui';
+import Avatar from 'pl-fe/components/ui/avatar';
+import HStack from 'pl-fe/components/ui/hstack';
 import { useAppSelector } from 'pl-fe/hooks';
 import { makeGetAccount } from 'pl-fe/selectors';
 
diff --git a/packages/pl-fe/src/components/birthday-panel.tsx b/packages/pl-fe/src/components/birthday-panel.tsx
index 6a486a3176..1b6a247c32 100644
--- a/packages/pl-fe/src/components/birthday-panel.tsx
+++ b/packages/pl-fe/src/components/birthday-panel.tsx
@@ -3,7 +3,7 @@ import React, { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { fetchBirthdayReminders } from 'pl-fe/actions/accounts';
-import { Widget } from 'pl-fe/components/ui';
+import Widget from 'pl-fe/components/ui/widget';
 import AccountContainer from 'pl-fe/containers/account-container';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
 
diff --git a/packages/pl-fe/src/components/copyable-input.tsx b/packages/pl-fe/src/components/copyable-input.tsx
index dfa8af73d0..f903d646e8 100644
--- a/packages/pl-fe/src/components/copyable-input.tsx
+++ b/packages/pl-fe/src/components/copyable-input.tsx
@@ -1,7 +1,9 @@
 import React, { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, HStack, Input } from './ui';
+import Button from 'pl-fe/components/ui/button';
+import HStack from 'pl-fe/components/ui/hstack';
+import Input from 'pl-fe/components/ui/input';
 
 interface ICopyableInput {
   /** Text to be copied. */
diff --git a/packages/pl-fe/src/components/domain.tsx b/packages/pl-fe/src/components/domain.tsx
index 264c1df139..ff3dc87dab 100644
--- a/packages/pl-fe/src/components/domain.tsx
+++ b/packages/pl-fe/src/components/domain.tsx
@@ -4,7 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { unblockDomain } from 'pl-fe/actions/domain-blocks';
 import { useAppDispatch } from 'pl-fe/hooks';
 
-import { HStack, IconButton, Text } from './ui';
+import { HStack, IconButton, Text } from 'pl-fe/components/ui';
 
 const messages = defineMessages({
   blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' },
diff --git a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx
index b203c23481..2079aafa01 100644
--- a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx
+++ b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx
@@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom';
 
 import { userTouching } from 'pl-fe/is-mobile';
 
-import { Counter, Icon, Toggle } from '../ui';
+import { Counter, Icon, Toggle } from 'pl-fe/components/ui';
 
 interface MenuItem {
   action?: React.EventHandler<React.KeyboardEvent | React.MouseEvent>;
diff --git a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
index 0bf48a5f1c..3d21eabc6a 100644
--- a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
@@ -7,7 +7,7 @@ import ReactSwipeableViews from 'react-swipeable-views';
 import { userTouching } from 'pl-fe/is-mobile';
 import { useUiStore, useModalsStore } from 'pl-fe/stores';
 
-import { HStack, IconButton, Portal } from '../ui';
+import { HStack, IconButton, Portal } from 'pl-fe/components/ui';
 
 import DropdownMenuItem, { MenuItem } from './dropdown-menu-item';
 
diff --git a/packages/pl-fe/src/components/event-preview.tsx b/packages/pl-fe/src/components/event-preview.tsx
index 575facdcce..af94998fa5 100644
--- a/packages/pl-fe/src/components/event-preview.tsx
+++ b/packages/pl-fe/src/components/event-preview.tsx
@@ -2,14 +2,16 @@ import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
+import Icon from 'pl-fe/components/icon';
+import Button from 'pl-fe/components/ui/button';
+import HStack from 'pl-fe/components/ui/hstack';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
+import VerificationBadge from 'pl-fe/components/verification-badge';
 import EventActionButton from 'pl-fe/features/event/components/event-action-button';
 import EventDate from 'pl-fe/features/event/components/event-date';
 import { useAppSelector } from 'pl-fe/hooks';
 
-import Icon from './icon';
-import { Button, HStack, Stack, Text } from './ui';
-import VerificationBadge from './verification-badge';
-
 import type { Status as StatusEntity } from 'pl-fe/normalizers';
 
 const messages = defineMessages({
diff --git a/packages/pl-fe/src/components/group-card.tsx b/packages/pl-fe/src/components/group-card.tsx
index 11c1d2b213..026c974525 100644
--- a/packages/pl-fe/src/components/group-card.tsx
+++ b/packages/pl-fe/src/components/group-card.tsx
@@ -6,7 +6,9 @@ import GroupPrivacy from 'pl-fe/features/group/components/group-privacy';
 import GroupRelationship from 'pl-fe/features/group/components/group-relationship';
 
 import GroupAvatar from './groups/group-avatar';
-import { HStack, Stack, Text } from './ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 
 import type { Group as GroupEntity } from 'pl-fe/normalizers';
 
diff --git a/packages/pl-fe/src/components/groups/group-avatar.tsx b/packages/pl-fe/src/components/groups/group-avatar.tsx
index a69fba7f7d..4ffeacf86c 100644
--- a/packages/pl-fe/src/components/groups/group-avatar.tsx
+++ b/packages/pl-fe/src/components/groups/group-avatar.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { GroupRoles, type Group } from 'pl-api';
 import React from 'react';
 
-import { Avatar } from '../ui';
+import Avatar from 'pl-fe/components/ui/avatar';
 
 interface IGroupAvatar {
   group: Pick<Group, 'avatar' | 'avatar_description' | 'relationship'>;
diff --git a/packages/pl-fe/src/components/hashtag.tsx b/packages/pl-fe/src/components/hashtag.tsx
index 0680524d69..6298073d99 100644
--- a/packages/pl-fe/src/components/hashtag.tsx
+++ b/packages/pl-fe/src/components/hashtag.tsx
@@ -5,7 +5,9 @@ import { Sparklines, SparklinesCurve } from 'react-sparklines';
 
 import { shortNumberFormat } from '../utils/numbers';
 
-import { HStack, Stack, Text } from './ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 
 import type { Tag } from 'pl-api';
 
diff --git a/packages/pl-fe/src/components/icon-with-counter.tsx b/packages/pl-fe/src/components/icon-with-counter.tsx
index 4b81bc2746..ec97b09d9f 100644
--- a/packages/pl-fe/src/components/icon-with-counter.tsx
+++ b/packages/pl-fe/src/components/icon-with-counter.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import Icon, { IIcon } from 'pl-fe/components/icon';
-import { Counter } from 'pl-fe/components/ui';
+import Counter from 'pl-fe/components/ui/counter';
 
 interface IIconWithCounter extends React.HTMLAttributes<HTMLDivElement> {
   count: number;
diff --git a/packages/pl-fe/src/components/list.tsx b/packages/pl-fe/src/components/list.tsx
index 0e91bc00ff..d5881ff4bc 100644
--- a/packages/pl-fe/src/components/list.tsx
+++ b/packages/pl-fe/src/components/list.tsx
@@ -2,9 +2,10 @@ import clsx from 'clsx';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { SelectDropdown } from '../features/forms';
-
-import { Icon, HStack, Select } from './ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
+import Select from 'pl-fe/components/ui/select';
+import { SelectDropdown } from 'pl-fe/features/forms';
 
 interface IList {
   children: React.ReactNode;
diff --git a/packages/pl-fe/src/components/load-more.tsx b/packages/pl-fe/src/components/load-more.tsx
index 1bf634be3a..14944eee8a 100644
--- a/packages/pl-fe/src/components/load-more.tsx
+++ b/packages/pl-fe/src/components/load-more.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
 
 interface ILoadMore {
   onClick: React.MouseEventHandler;
diff --git a/packages/pl-fe/src/components/loading-screen.tsx b/packages/pl-fe/src/components/loading-screen.tsx
index 5a89465bff..7c53233e04 100644
--- a/packages/pl-fe/src/components/loading-screen.tsx
+++ b/packages/pl-fe/src/components/loading-screen.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import LandingGradient from 'pl-fe/components/landing-gradient';
-import { Spinner } from 'pl-fe/components/ui';
+import Spinner from 'pl-fe/components/ui/spinner';
 
 /** Fullscreen loading indicator. */
 const LoadingScreen: React.FC = () => (
diff --git a/packages/pl-fe/src/components/mention.tsx b/packages/pl-fe/src/components/mention.tsx
index 582d98990f..68bcabb397 100644
--- a/packages/pl-fe/src/components/mention.tsx
+++ b/packages/pl-fe/src/components/mention.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { Tooltip } from './ui';
+import Tooltip from 'pl-fe/components/ui/tooltip';
 
 import type { Mention as MentionEntity } from 'pl-api';
 
diff --git a/packages/pl-fe/src/components/missing-indicator.tsx b/packages/pl-fe/src/components/missing-indicator.tsx
index 0adb8ec72a..e29a81c963 100644
--- a/packages/pl-fe/src/components/missing-indicator.tsx
+++ b/packages/pl-fe/src/components/missing-indicator.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Card, CardBody, Stack, Text } from './ui';
+import { Card, CardBody, Stack, Text } from 'pl-fe/components/ui';
 
 interface MissingIndicatorProps {
   nested?: boolean;
diff --git a/packages/pl-fe/src/components/navlinks.tsx b/packages/pl-fe/src/components/navlinks.tsx
index 3005ae8b21..0af7e41037 100644
--- a/packages/pl-fe/src/components/navlinks.tsx
+++ b/packages/pl-fe/src/components/navlinks.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { Text } from 'pl-fe/components/ui';
+import Text from 'pl-fe/components/ui/text';
 import { useSettings, usePlFeConfig } from 'pl-fe/hooks';
 
 interface INavlinks {
diff --git a/packages/pl-fe/src/components/pending-items-row.tsx b/packages/pl-fe/src/components/pending-items-row.tsx
index c84549d750..78c3adf564 100644
--- a/packages/pl-fe/src/components/pending-items-row.tsx
+++ b/packages/pl-fe/src/components/pending-items-row.tsx
@@ -3,7 +3,9 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { HStack, Icon, Text } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
+import Text from 'pl-fe/components/ui/text';
 
 interface IPendingItemsRow {
   /** Path to navigate the user when clicked. */
diff --git a/packages/pl-fe/src/components/polls/poll-footer.tsx b/packages/pl-fe/src/components/polls/poll-footer.tsx
index 50d5c5bcec..aa561a72d6 100644
--- a/packages/pl-fe/src/components/polls/poll-footer.tsx
+++ b/packages/pl-fe/src/components/polls/poll-footer.tsx
@@ -5,7 +5,7 @@ import { fetchPoll, vote } from 'pl-fe/actions/polls';
 import { useAppDispatch } from 'pl-fe/hooks';
 
 import RelativeTimestamp from '../relative-timestamp';
-import { Button, HStack, Stack, Text, Tooltip } from '../ui';
+import { Button, HStack, Stack, Text, Tooltip } from 'pl-fe/components/ui';
 
 import type { Selected } from './poll';
 import type { Poll } from 'pl-fe/normalizers';
diff --git a/packages/pl-fe/src/components/polls/poll-option.tsx b/packages/pl-fe/src/components/polls/poll-option.tsx
index 607a2b1290..8c83d1f130 100644
--- a/packages/pl-fe/src/components/polls/poll-option.tsx
+++ b/packages/pl-fe/src/components/polls/poll-option.tsx
@@ -3,7 +3,9 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Motion, presets, spring } from 'react-motion';
 
-import { HStack, Icon, Text } from '../ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
+import Text from 'pl-fe/components/ui/text';
 
 import type { Poll } from 'pl-fe/normalizers';
 
diff --git a/packages/pl-fe/src/components/polls/poll.tsx b/packages/pl-fe/src/components/polls/poll.tsx
index 86682921c8..53feebbd5b 100644
--- a/packages/pl-fe/src/components/polls/poll.tsx
+++ b/packages/pl-fe/src/components/polls/poll.tsx
@@ -5,7 +5,8 @@ import { vote } from 'pl-fe/actions/polls';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
 import { useModalsStore } from 'pl-fe/stores';
 
-import { Stack, Text } from '../ui';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 
 import PollFooter from './poll-footer';
 import PollOption from './poll-option';
diff --git a/packages/pl-fe/src/components/pull-to-refresh.tsx b/packages/pl-fe/src/components/pull-to-refresh.tsx
index 6f44d549f7..644c772d3c 100644
--- a/packages/pl-fe/src/components/pull-to-refresh.tsx
+++ b/packages/pl-fe/src/components/pull-to-refresh.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PTRComponent from 'react-simple-pull-to-refresh';
 
-import { Spinner } from 'pl-fe/components/ui';
+import Spinner from 'pl-fe/components/ui/spinner';
 
 interface IPullToRefresh {
   onRefresh?: () => Promise<any>;
diff --git a/packages/pl-fe/src/components/quoted-status-indicator.tsx b/packages/pl-fe/src/components/quoted-status-indicator.tsx
index 15b25afdce..0a229b5b4a 100644
--- a/packages/pl-fe/src/components/quoted-status-indicator.tsx
+++ b/packages/pl-fe/src/components/quoted-status-indicator.tsx
@@ -1,6 +1,8 @@
 import React, { useCallback } from 'react';
 
-import { HStack, Icon, Text } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
+import Text from 'pl-fe/components/ui/text';
 import { useAppSelector } from 'pl-fe/hooks';
 import { makeGetStatus } from 'pl-fe/selectors';
 
diff --git a/packages/pl-fe/src/components/quoted-status.tsx b/packages/pl-fe/src/components/quoted-status.tsx
index 1e3c883ad6..b1f8e388bc 100644
--- a/packages/pl-fe/src/components/quoted-status.tsx
+++ b/packages/pl-fe/src/components/quoted-status.tsx
@@ -4,7 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import StatusMedia from 'pl-fe/components/status-media';
-import { Stack } from 'pl-fe/components/ui';
+import Stack from 'pl-fe/components/ui/stack';
 import AccountContainer from 'pl-fe/containers/account-container';
 
 import EventPreview from './event-preview';
diff --git a/packages/pl-fe/src/components/scrobble.tsx b/packages/pl-fe/src/components/scrobble.tsx
index 6a437a4dd7..088ca4ccf3 100644
--- a/packages/pl-fe/src/components/scrobble.tsx
+++ b/packages/pl-fe/src/components/scrobble.tsx
@@ -2,7 +2,9 @@ import clsx from 'clsx';
 import React, { useMemo, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { HStack, Icon, Text } from './ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
+import Text from 'pl-fe/components/ui/text';
 
 import type { Scrobble as ScrobbleEntity } from 'pl-api';
 
diff --git a/packages/pl-fe/src/components/scroll-top-button.tsx b/packages/pl-fe/src/components/scroll-top-button.tsx
index b2956ddebc..183a945fa6 100644
--- a/packages/pl-fe/src/components/scroll-top-button.tsx
+++ b/packages/pl-fe/src/components/scroll-top-button.tsx
@@ -2,7 +2,8 @@ import throttle from 'lodash/throttle';
 import React, { useState, useEffect, useCallback } from 'react';
 import { useIntl, MessageDescriptor } from 'react-intl';
 
-import { Icon, Text } from 'pl-fe/components/ui';
+import Icon from 'pl-fe/components/ui/icon';
+import Text from 'pl-fe/components/ui/text';
 import { useSettings } from 'pl-fe/hooks';
 
 interface IScrollTopButton {
diff --git a/packages/pl-fe/src/components/scrollable-list.tsx b/packages/pl-fe/src/components/scrollable-list.tsx
index 6d08a52a0c..47f8f67598 100644
--- a/packages/pl-fe/src/components/scrollable-list.tsx
+++ b/packages/pl-fe/src/components/scrollable-list.tsx
@@ -3,11 +3,11 @@ import { useVirtualizer, useWindowVirtualizer, type Virtualizer } from '@tanstac
 import clsx from 'clsx';
 import React, { useEffect, useMemo, useRef } from 'react';
 
+import LoadMore from 'pl-fe/components/load-more';
+import Card from 'pl-fe/components/ui/card';
+import Spinner from 'pl-fe/components/ui/spinner';
 import { useSettings } from 'pl-fe/hooks';
 
-import LoadMore from './load-more';
-import { Card, Spinner } from './ui';
-
 interface IScrollableListBase {
   /** Pagination callback when the end of the list is reached. */
   onLoadMore?: () => void;
diff --git a/packages/pl-fe/src/components/sentry-feedback-form.tsx b/packages/pl-fe/src/components/sentry-feedback-form.tsx
index 2339daa3e3..efc8b853ee 100644
--- a/packages/pl-fe/src/components/sentry-feedback-form.tsx
+++ b/packages/pl-fe/src/components/sentry-feedback-form.tsx
@@ -1,7 +1,12 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Textarea, Form, Button, FormGroup, FormActions, Text } from 'pl-fe/components/ui';
+import Textarea from 'pl-fe/components/ui/textarea';
+import Form from 'pl-fe/components/ui/form';
+import Button from 'pl-fe/components/ui/button';
+import FormGroup from 'pl-fe/components/ui/form-group';
+import FormActions from 'pl-fe/components/ui/form-actions';
+import Text from 'pl-fe/components/ui/text';
 import { useOwnAccount } from 'pl-fe/hooks';
 import { captureSentryFeedback } from 'pl-fe/sentry';
 
diff --git a/packages/pl-fe/src/components/sidebar-navigation-link.tsx b/packages/pl-fe/src/components/sidebar-navigation-link.tsx
index d5315d949f..97a6d5079f 100644
--- a/packages/pl-fe/src/components/sidebar-navigation-link.tsx
+++ b/packages/pl-fe/src/components/sidebar-navigation-link.tsx
@@ -4,7 +4,8 @@ import { NavLink } from 'react-router-dom';
 
 import { useSettings } from 'pl-fe/hooks';
 
-import { Icon, Text } from './ui';
+import Icon from 'pl-fe/components/ui/icon';
+import Text from 'pl-fe/components/ui/text';
 
 interface ISidebarNavigationLink {
   /** Notification count, if any. */
diff --git a/packages/pl-fe/src/components/sidebar-navigation.tsx b/packages/pl-fe/src/components/sidebar-navigation.tsx
index eb5306b711..7e7190f410 100644
--- a/packages/pl-fe/src/components/sidebar-navigation.tsx
+++ b/packages/pl-fe/src/components/sidebar-navigation.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { Icon, Stack } from 'pl-fe/components/ui';
+import Icon from 'pl-fe/components/ui/icon';
+import Stack from 'pl-fe/components/ui/stack';
 import { useStatContext } from 'pl-fe/contexts/stat-context';
 import Search from 'pl-fe/features/search/components/search';
 import ComposeButton from 'pl-fe/features/ui/components/compose-button';
diff --git a/packages/pl-fe/src/components/status-action-bar.tsx b/packages/pl-fe/src/components/status-action-bar.tsx
index 11e3a9976d..5564dc4d1b 100644
--- a/packages/pl-fe/src/components/status-action-bar.tsx
+++ b/packages/pl-fe/src/components/status-action-bar.tsx
@@ -18,7 +18,7 @@ import { useBlockGroupMember, useGroup, useGroupRelationship, useTranslationLang
 import { useDeleteGroupStatus } from 'pl-fe/api/hooks/groups/useDeleteGroupStatus';
 import DropdownMenu from 'pl-fe/components/dropdown-menu';
 import StatusActionButton from 'pl-fe/components/status-action-button';
-import { HStack } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
 import EmojiPickerDropdown from 'pl-fe/features/emoji/containers/emoji-picker-dropdown-container';
 import { languages } from 'pl-fe/features/preferences';
 import { useAppDispatch, useAppSelector, useFeatures, useInstance, useOwnAccount, useSettings } from 'pl-fe/hooks';
diff --git a/packages/pl-fe/src/components/status-action-button.tsx b/packages/pl-fe/src/components/status-action-button.tsx
index ab29ed4b5d..b8042a6140 100644
--- a/packages/pl-fe/src/components/status-action-button.tsx
+++ b/packages/pl-fe/src/components/status-action-button.tsx
@@ -2,7 +2,9 @@ import { useLongPress } from '@uidotdev/usehooks';
 import clsx from 'clsx';
 import React from 'react';
 
-import { Text, Icon, Emoji } from 'pl-fe/components/ui';
+import Text from 'pl-fe/components/ui/text';
+import Icon from 'pl-fe/components/ui/icon';
+import Emoji from 'pl-fe/components/ui/emoji';
 import { useSettings } from 'pl-fe/hooks';
 
 import AnimatedNumber from './animated-number';
diff --git a/packages/pl-fe/src/components/status-content.tsx b/packages/pl-fe/src/components/status-content.tsx
index 2ac55a89cb..68ede69da5 100644
--- a/packages/pl-fe/src/components/status-content.tsx
+++ b/packages/pl-fe/src/components/status-content.tsx
@@ -4,7 +4,9 @@ import {  FormattedMessage } from 'react-intl';
 
 import { collapseStatusSpoiler, expandStatusSpoiler } from 'pl-fe/actions/statuses';
 import Icon from 'pl-fe/components/icon';
-import { Button, Stack, Text } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import { useAppDispatch, useSettings } from 'pl-fe/hooks';
 import { onlyEmoji as isOnlyEmoji } from 'pl-fe/utils/rich-content';
 
diff --git a/packages/pl-fe/src/components/status-hover-card.tsx b/packages/pl-fe/src/components/status-hover-card.tsx
index 261e49bbc8..3643d32648 100644
--- a/packages/pl-fe/src/components/status-hover-card.tsx
+++ b/packages/pl-fe/src/components/status-hover-card.tsx
@@ -5,13 +5,12 @@ import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import { fetchStatus } from 'pl-fe/actions/statuses';
+import { showStatusHoverCard } from 'pl-fe/components/hover-status-wrapper';
+import Card, { CardBody } from 'pl-fe/components/ui/card';
 import StatusContainer from 'pl-fe/containers/status-container';
 import { useAppSelector, useAppDispatch } from 'pl-fe/hooks';
 import { useStatusHoverCardStore } from 'pl-fe/stores';
 
-import { showStatusHoverCard } from './hover-status-wrapper';
-import { Card, CardBody } from './ui';
-
 interface IStatusHoverCard {
   visible?: boolean;
 }
diff --git a/packages/pl-fe/src/components/status-language-picker.tsx b/packages/pl-fe/src/components/status-language-picker.tsx
index d4d896df89..7d7887026b 100644
--- a/packages/pl-fe/src/components/status-language-picker.tsx
+++ b/packages/pl-fe/src/components/status-language-picker.tsx
@@ -6,7 +6,9 @@ import { type Language, languages } from 'pl-fe/features/preferences';
 import { useAppDispatch } from 'pl-fe/hooks';
 
 import DropdownMenu from './dropdown-menu';
-import { HStack, Icon, Text } from './ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
+import Text from 'pl-fe/components/ui/text';
 
 import type { Status } from 'pl-fe/normalizers';
 
diff --git a/packages/pl-fe/src/components/status-list.tsx b/packages/pl-fe/src/components/status-list.tsx
index de5da20658..0afbc18269 100644
--- a/packages/pl-fe/src/components/status-list.tsx
+++ b/packages/pl-fe/src/components/status-list.tsx
@@ -11,7 +11,8 @@ import PlaceholderStatus from 'pl-fe/features/placeholder/components/placeholder
 import PendingStatus from 'pl-fe/features/ui/components/pending-status';
 import { usePlFeConfig } from 'pl-fe/hooks';
 
-import { Stack, Text } from './ui';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 
 import type { OrderedSet as ImmutableOrderedSet } from 'immutable';
 
diff --git a/packages/pl-fe/src/components/status-reactions-bar.tsx b/packages/pl-fe/src/components/status-reactions-bar.tsx
index 579f2cf099..4877c6d22f 100644
--- a/packages/pl-fe/src/components/status-reactions-bar.tsx
+++ b/packages/pl-fe/src/components/status-reactions-bar.tsx
@@ -10,7 +10,7 @@ import { useAppDispatch, useFeatures, useLoggedIn, useSettings } from 'pl-fe/hoo
 import { useModalsStore } from 'pl-fe/stores';
 
 import AnimatedNumber from './animated-number';
-import { Emoji, HStack, Icon, Text } from './ui';
+import { Emoji, HStack, Icon, Text } from 'pl-fe/components/ui';
 
 import type { EmojiReaction } from 'pl-api';
 import type { Emoji as EmojiType } from 'pl-fe/features/emoji';
diff --git a/packages/pl-fe/src/components/status.tsx b/packages/pl-fe/src/components/status.tsx
index e8e0647673..fa25d7c7d3 100644
--- a/packages/pl-fe/src/components/status.tsx
+++ b/packages/pl-fe/src/components/status.tsx
@@ -7,6 +7,10 @@ import { mentionCompose, replyCompose } from 'pl-fe/actions/compose';
 import { toggleFavourite, toggleReblog } from 'pl-fe/actions/interactions';
 import { toggleStatusMediaHidden, unfilterStatus } from 'pl-fe/actions/statuses';
 import TranslateButton from 'pl-fe/components/translate-button';
+import Card from 'pl-fe/components/ui/card';
+import Icon from 'pl-fe/components/ui/icon';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import AccountContainer from 'pl-fe/containers/account-container';
 import StatusTypeIcon from 'pl-fe/features/status/components/status-type-icon';
 import QuotedStatus from 'pl-fe/features/status/containers/quoted-status-container';
@@ -25,7 +29,6 @@ import StatusReactionsBar from './status-reactions-bar';
 import StatusReplyMentions from './status-reply-mentions';
 import SensitiveContentOverlay from './statuses/sensitive-content-overlay';
 import StatusInfo from './statuses/status-info';
-import { Card, Icon, Stack, Text } from './ui';
 
 const messages = defineMessages({
   reblogged_by: { id: 'status.reblogged_by', defaultMessage: '{name} reposted' },
diff --git a/packages/pl-fe/src/components/statuses/sensitive-content-overlay.tsx b/packages/pl-fe/src/components/statuses/sensitive-content-overlay.tsx
index f9cd59c59f..643a80aa7f 100644
--- a/packages/pl-fe/src/components/statuses/sensitive-content-overlay.tsx
+++ b/packages/pl-fe/src/components/statuses/sensitive-content-overlay.tsx
@@ -5,7 +5,9 @@ import { defineMessages, useIntl } from 'react-intl';
 import { hideStatusMedia, revealStatusMedia } from 'pl-fe/actions/statuses';
 import { useAppDispatch, useSettings } from 'pl-fe/hooks';
 
-import { Button, HStack, Text } from '../ui';
+import Button from 'pl-fe/components/ui/button';
+import HStack from 'pl-fe/components/ui/hstack';
+import Text from 'pl-fe/components/ui/text';
 
 import type { Status } from 'pl-fe/normalizers';
 
diff --git a/packages/pl-fe/src/components/statuses/status-info.tsx b/packages/pl-fe/src/components/statuses/status-info.tsx
index fd15e6393a..92e1006869 100644
--- a/packages/pl-fe/src/components/statuses/status-info.tsx
+++ b/packages/pl-fe/src/components/statuses/status-info.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { HStack, Text } from '../ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Text from 'pl-fe/components/ui/text';
 
 interface IStatusInfo {
   avatarSize: number;
diff --git a/packages/pl-fe/src/components/thumb-navigation-link.tsx b/packages/pl-fe/src/components/thumb-navigation-link.tsx
index fee1a6b353..7cd6175732 100644
--- a/packages/pl-fe/src/components/thumb-navigation-link.tsx
+++ b/packages/pl-fe/src/components/thumb-navigation-link.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 
 import IconWithCounter from 'pl-fe/components/icon-with-counter';
-import { Icon } from 'pl-fe/components/ui';
+import Icon from 'pl-fe/components/ui/icon';
 import { useSettings } from 'pl-fe/hooks';
 
 interface IThumbNavigationLink {
diff --git a/packages/pl-fe/src/components/thumb-navigation.tsx b/packages/pl-fe/src/components/thumb-navigation.tsx
index 819d27498f..1fbf8afeee 100644
--- a/packages/pl-fe/src/components/thumb-navigation.tsx
+++ b/packages/pl-fe/src/components/thumb-navigation.tsx
@@ -10,7 +10,7 @@ import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'pl-f
 import { useModalsStore, useUiStore } from 'pl-fe/stores';
 import { isStandalone } from 'pl-fe/utils/state';
 
-import { Icon } from './ui';
+import Icon from 'pl-fe/components/ui/icon';
 
 const messages = defineMessages({
   home: { id: 'navigation.home', defaultMessage: 'Home' },
diff --git a/packages/pl-fe/src/components/tombstone.tsx b/packages/pl-fe/src/components/tombstone.tsx
index 1faab33da0..d9078a4761 100644
--- a/packages/pl-fe/src/components/tombstone.tsx
+++ b/packages/pl-fe/src/components/tombstone.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Text } from 'pl-fe/components/ui';
+import Text from 'pl-fe/components/ui/text';
 import { HotKeys } from 'pl-fe/features/ui/components/hotkeys';
 
 interface ITombstone {
diff --git a/packages/pl-fe/src/components/translate-button.tsx b/packages/pl-fe/src/components/translate-button.tsx
index 6db9c44aa3..53e90cc16f 100644
--- a/packages/pl-fe/src/components/translate-button.tsx
+++ b/packages/pl-fe/src/components/translate-button.tsx
@@ -5,7 +5,10 @@ import { translateStatus, undoStatusTranslation } from 'pl-fe/actions/statuses';
 import { useTranslationLanguages } from 'pl-fe/api/hooks';
 import { useAppDispatch, useAppSelector, useFeatures, useInstance, useSettings } from 'pl-fe/hooks';
 
-import { HStack, Icon, Stack, Text } from './ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 
 import type { Status } from 'pl-fe/normalizers';
 
diff --git a/packages/pl-fe/src/components/trending-link.tsx b/packages/pl-fe/src/components/trending-link.tsx
index 71a83bb587..c70015f21d 100644
--- a/packages/pl-fe/src/components/trending-link.tsx
+++ b/packages/pl-fe/src/components/trending-link.tsx
@@ -5,7 +5,10 @@ import { getTextDirection } from 'pl-fe/utils/rtl';
 
 import Blurhash from './blurhash';
 import { accountsCountRenderer } from './hashtag';
-import { HStack, Icon, Stack, Text } from './ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 
 interface ITrendingLink {
   trendingLink: TrendsLink;
diff --git a/packages/pl-fe/src/components/ui/card.tsx b/packages/pl-fe/src/components/ui/card.tsx
index c10dae4426..996f903f6c 100644
--- a/packages/pl-fe/src/components/ui/card.tsx
+++ b/packages/pl-fe/src/components/ui/card.tsx
@@ -108,4 +108,11 @@ const CardBody: React.FC<ICardBody> = ({ className, children }): JSX.Element =>
   <div data-testid='card-body' className={className}>{children}</div>
 );
 
-export { type CardSizes, Card, CardHeader, CardTitle, CardBody };
+export {
+  type CardSizes,
+  Card as default,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardBody,
+};
diff --git a/packages/pl-fe/src/components/ui/column.tsx b/packages/pl-fe/src/components/ui/column.tsx
index f98d5ba214..6e01b48d6d 100644
--- a/packages/pl-fe/src/components/ui/column.tsx
+++ b/packages/pl-fe/src/components/ui/column.tsx
@@ -121,6 +121,7 @@ const Column = React.forwardRef<HTMLDivElement, IColumn>((props, ref): JSX.Eleme
 
 export {
   type IColumn,
+  Column as default,
   Column,
   ColumnHeader,
 };
diff --git a/packages/pl-fe/src/components/ui/combobox.tsx b/packages/pl-fe/src/components/ui/combobox.tsx
index 156a1b94f6..acd17e7000 100644
--- a/packages/pl-fe/src/components/ui/combobox.tsx
+++ b/packages/pl-fe/src/components/ui/combobox.tsx
@@ -1,6 +1,7 @@
 import './combobox.css';
 
 export {
+  Combobox as default,
   Combobox,
   ComboboxInput,
   ComboboxPopover,
diff --git a/packages/pl-fe/src/components/ui/index.ts b/packages/pl-fe/src/components/ui/index.ts
index 61bb106b77..a16a6662a3 100644
--- a/packages/pl-fe/src/components/ui/index.ts
+++ b/packages/pl-fe/src/components/ui/index.ts
@@ -1,5 +1,3 @@
-export { default as Accordion } from './accordion';
-export { default as Avatar } from './avatar';
 export { default as Banner } from './banner';
 export { default as Button } from './button';
 export { default as Carousel } from './carousel';
diff --git a/packages/pl-fe/src/components/verification-badge.tsx b/packages/pl-fe/src/components/verification-badge.tsx
index 1da4a5f913..89b17b82a3 100644
--- a/packages/pl-fe/src/components/verification-badge.tsx
+++ b/packages/pl-fe/src/components/verification-badge.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
-import { Icon } from 'pl-fe/components/ui';
+import Icon from 'pl-fe/components/ui/icon';
 import { usePlFeConfig } from 'pl-fe/hooks';
 
 const messages = defineMessages({
diff --git a/packages/pl-fe/src/features/about/index.tsx b/packages/pl-fe/src/features/about/index.tsx
index 7ec54b6449..dfd30be0ab 100644
--- a/packages/pl-fe/src/features/about/index.tsx
+++ b/packages/pl-fe/src/features/about/index.tsx
@@ -4,7 +4,7 @@ import { useParams } from 'react-router-dom';
 
 import { fetchAboutPage } from 'pl-fe/actions/about';
 import { Navlinks } from 'pl-fe/components/navlinks';
-import { Card } from 'pl-fe/components/ui';
+import Card from 'pl-fe/components/ui/card';
 import { usePlFeConfig, useSettings, useAppDispatch } from 'pl-fe/hooks';
 
 import { languages } from '../preferences';
diff --git a/packages/pl-fe/src/features/account-gallery/index.tsx b/packages/pl-fe/src/features/account-gallery/index.tsx
index 434c069499..a076927020 100644
--- a/packages/pl-fe/src/features/account-gallery/index.tsx
+++ b/packages/pl-fe/src/features/account-gallery/index.tsx
@@ -7,7 +7,8 @@ import { fetchAccountTimeline } from 'pl-fe/actions/timelines';
 import { useAccountLookup } from 'pl-fe/api/hooks';
 import LoadMore from 'pl-fe/components/load-more';
 import MissingIndicator from 'pl-fe/components/missing-indicator';
-import { Column, Spinner } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
+import Spinner from 'pl-fe/components/ui/spinner';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
 import { type AccountGalleryAttachment, getAccountGallery } from 'pl-fe/selectors';
 import { useModalsStore } from 'pl-fe/stores';
diff --git a/packages/pl-fe/src/features/account-timeline/components/moved-note.tsx b/packages/pl-fe/src/features/account-timeline/components/moved-note.tsx
index ac3ed118a6..adabb9847d 100644
--- a/packages/pl-fe/src/features/account-timeline/components/moved-note.tsx
+++ b/packages/pl-fe/src/features/account-timeline/components/moved-note.tsx
@@ -3,7 +3,8 @@ import { FormattedMessage } from 'react-intl';
 
 import Account from 'pl-fe/components/account';
 import Icon from 'pl-fe/components/icon';
-import { HStack, Text } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Text from 'pl-fe/components/ui/text';
 
 import type { Account as AccountEntity } from 'pl-fe/normalizers';
 
diff --git a/packages/pl-fe/src/features/account/components/header.tsx b/packages/pl-fe/src/features/account/components/header.tsx
index 5fd42e744e..51bfdf53a7 100644
--- a/packages/pl-fe/src/features/account/components/header.tsx
+++ b/packages/pl-fe/src/features/account/components/header.tsx
@@ -15,7 +15,9 @@ import { useFollow } from 'pl-fe/api/hooks';
 import Badge from 'pl-fe/components/badge';
 import DropdownMenu, { Menu } from 'pl-fe/components/dropdown-menu';
 import StillImage from 'pl-fe/components/still-image';
-import { Avatar, HStack, IconButton } from 'pl-fe/components/ui';
+import Avatar from 'pl-fe/components/ui/avatar';
+import HStack from 'pl-fe/components/ui/hstack';
+import IconButton from 'pl-fe/components/ui/icon-button';
 import VerificationBadge from 'pl-fe/components/verification-badge';
 import MovedNote from 'pl-fe/features/account-timeline/components/moved-note';
 import ActionButton from 'pl-fe/features/ui/components/action-button';
diff --git a/packages/pl-fe/src/features/admin/components/admin-tabs.tsx b/packages/pl-fe/src/features/admin/components/admin-tabs.tsx
index 0bcb4c057f..9b25b9f972 100644
--- a/packages/pl-fe/src/features/admin/components/admin-tabs.tsx
+++ b/packages/pl-fe/src/features/admin/components/admin-tabs.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
 
-import { Tabs } from 'pl-fe/components/ui';
+import Tabs from 'pl-fe/components/ui/tabs';
 import { useAppSelector } from 'pl-fe/hooks';
 
 const messages = defineMessages({
diff --git a/packages/pl-fe/src/features/admin/components/dashcounter.tsx b/packages/pl-fe/src/features/admin/components/dashcounter.tsx
index c0297e8840..a65a9b7ae1 100644
--- a/packages/pl-fe/src/features/admin/components/dashcounter.tsx
+++ b/packages/pl-fe/src/features/admin/components/dashcounter.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { FormattedNumber } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Text } from 'pl-fe/components/ui';
+import Text from 'pl-fe/components/ui/text';
 import { isNumber } from 'pl-fe/utils/numbers';
 
 interface IDashCounter {
diff --git a/packages/pl-fe/src/features/admin/components/latest-accounts-panel.tsx b/packages/pl-fe/src/features/admin/components/latest-accounts-panel.tsx
index 7ecd826b63..3225c4cbad 100644
--- a/packages/pl-fe/src/features/admin/components/latest-accounts-panel.tsx
+++ b/packages/pl-fe/src/features/admin/components/latest-accounts-panel.tsx
@@ -4,7 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import { fetchUsers } from 'pl-fe/actions/admin';
-import { Widget } from 'pl-fe/components/ui';
+import Widget from 'pl-fe/components/ui/widget';
 import AccountContainer from 'pl-fe/containers/account-container';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
 
diff --git a/packages/pl-fe/src/features/admin/components/report-status.tsx b/packages/pl-fe/src/features/admin/components/report-status.tsx
index 2c976d6b92..a055d5d513 100644
--- a/packages/pl-fe/src/features/admin/components/report-status.tsx
+++ b/packages/pl-fe/src/features/admin/components/report-status.tsx
@@ -5,7 +5,8 @@ import { deleteStatusModal } from 'pl-fe/actions/moderation';
 import DropdownMenu from 'pl-fe/components/dropdown-menu';
 import StatusContent from 'pl-fe/components/status-content';
 import StatusMedia from 'pl-fe/components/status-media';
-import { HStack, Stack } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Stack from 'pl-fe/components/ui/stack';
 import { useAppDispatch } from 'pl-fe/hooks';
 
 import type { SelectedStatus } from 'pl-fe/selectors';
diff --git a/packages/pl-fe/src/features/admin/components/report.tsx b/packages/pl-fe/src/features/admin/components/report.tsx
index 5f4cc11f65..b6e796d960 100644
--- a/packages/pl-fe/src/features/admin/components/report.tsx
+++ b/packages/pl-fe/src/features/admin/components/report.tsx
@@ -6,7 +6,12 @@ import { closeReport } from 'pl-fe/actions/admin';
 import { deactivateUserModal, deleteUserModal } from 'pl-fe/actions/moderation';
 import DropdownMenu from 'pl-fe/components/dropdown-menu';
 import HoverAccountWrapper from 'pl-fe/components/hover-account-wrapper';
-import { Accordion, Avatar, Button, Stack, HStack, Text } from 'pl-fe/components/ui';
+import Accordion from 'pl-fe/components/ui/accordion';
+import Avatar from 'pl-fe/components/ui/avatar';
+import Button from 'pl-fe/components/ui/button';
+import Stack from 'pl-fe/components/ui/stack';
+import HStack from 'pl-fe/components/ui/hstack';
+import Text from 'pl-fe/components/ui/text';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
 import { makeGetReport } from 'pl-fe/selectors';
 import toast from 'pl-fe/toast';
diff --git a/packages/pl-fe/src/features/admin/components/unapproved-account.tsx b/packages/pl-fe/src/features/admin/components/unapproved-account.tsx
index cd317e5df0..97336cb0ed 100644
--- a/packages/pl-fe/src/features/admin/components/unapproved-account.tsx
+++ b/packages/pl-fe/src/features/admin/components/unapproved-account.tsx
@@ -3,7 +3,9 @@ import React from 'react';
 import { approveUser, deleteUser } from 'pl-fe/actions/admin';
 import { useAccount } from 'pl-fe/api/hooks';
 import { AuthorizeRejectButtons } from 'pl-fe/components/authorize-reject-buttons';
-import { Stack, HStack, Text } from 'pl-fe/components/ui';
+import Stack from 'pl-fe/components/ui/stack';
+import HStack from 'pl-fe/components/ui/hstack';
+import Text from 'pl-fe/components/ui/text';
 import { useAppSelector, useAppDispatch } from 'pl-fe/hooks';
 
 interface IUnapprovedAccount {
diff --git a/packages/pl-fe/src/features/admin/index.tsx b/packages/pl-fe/src/features/admin/index.tsx
index 0401b83b9c..c11beae84a 100644
--- a/packages/pl-fe/src/features/admin/index.tsx
+++ b/packages/pl-fe/src/features/admin/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Switch, Route } from 'react-router-dom';
 
-import { Column } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
 import { useOwnAccount } from 'pl-fe/hooks';
 
 import AdminTabs from './components/admin-tabs';
diff --git a/packages/pl-fe/src/features/aliases/components/account.tsx b/packages/pl-fe/src/features/aliases/components/account.tsx
index 25798845af..1c1d7f30b0 100644
--- a/packages/pl-fe/src/features/aliases/components/account.tsx
+++ b/packages/pl-fe/src/features/aliases/components/account.tsx
@@ -5,7 +5,7 @@ import { addToAliases } from 'pl-fe/actions/aliases';
 import { useAccount } from 'pl-fe/api/hooks';
 import AccountComponent from 'pl-fe/components/account';
 import IconButton from 'pl-fe/components/icon-button';
-import { HStack } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
 import { useAppDispatch, useAppSelector, useFeatures } from 'pl-fe/hooks';
 
 const messages = defineMessages({
diff --git a/packages/pl-fe/src/features/aliases/components/search.tsx b/packages/pl-fe/src/features/aliases/components/search.tsx
index 471242904d..4f0b6bca46 100644
--- a/packages/pl-fe/src/features/aliases/components/search.tsx
+++ b/packages/pl-fe/src/features/aliases/components/search.tsx
@@ -4,7 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { fetchAliasesSuggestions, clearAliasesSuggestions, changeAliasesSuggestions } from 'pl-fe/actions/aliases';
 import Icon from 'pl-fe/components/icon';
-import { Button } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
 
 const messages = defineMessages({
diff --git a/packages/pl-fe/src/features/auth-login/components/captcha.tsx b/packages/pl-fe/src/features/auth-login/components/captcha.tsx
index 6c361164a1..5dbb07aa1d 100644
--- a/packages/pl-fe/src/features/auth-login/components/captcha.tsx
+++ b/packages/pl-fe/src/features/auth-login/components/captcha.tsx
@@ -3,7 +3,9 @@ import React, { useState, useEffect } from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
 import { fetchCaptcha } from 'pl-fe/actions/auth';
-import { Stack, Text, Input } from 'pl-fe/components/ui';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
+import Input from 'pl-fe/components/ui/input';
 import { useAppDispatch } from 'pl-fe/hooks';
 
 const noOp = () => {};
diff --git a/packages/pl-fe/src/features/auth-login/components/login-page.tsx b/packages/pl-fe/src/features/auth-login/components/login-page.tsx
index be96b3e94f..039ef3bc69 100644
--- a/packages/pl-fe/src/features/auth-login/components/login-page.tsx
+++ b/packages/pl-fe/src/features/auth-login/components/login-page.tsx
@@ -5,7 +5,9 @@ import { Redirect } from 'react-router-dom';
 import { logIn, verifyCredentials, switchAccount } from 'pl-fe/actions/auth';
 import { fetchInstance } from 'pl-fe/actions/instance';
 import { BigCard } from 'pl-fe/components/big-card';
-import { Button, Stack, Text } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
 import { useModalsStore } from 'pl-fe/stores';
 import { getRedirectUrl } from 'pl-fe/utils/redirect';
diff --git a/packages/pl-fe/src/features/auth-login/components/logout.tsx b/packages/pl-fe/src/features/auth-login/components/logout.tsx
index afc2f2f077..7f2edb59d4 100644
--- a/packages/pl-fe/src/features/auth-login/components/logout.tsx
+++ b/packages/pl-fe/src/features/auth-login/components/logout.tsx
@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 
 import { logOut } from 'pl-fe/actions/auth';
-import { Spinner } from 'pl-fe/components/ui';
+import Spinner from 'pl-fe/components/ui/spinner';
 
 /** Component that logs the user out when rendered */
 const Logout: React.FC = () => {
diff --git a/packages/pl-fe/src/features/auth-login/components/registration-form.tsx b/packages/pl-fe/src/features/auth-login/components/registration-form.tsx
index 15a518a88e..0fc982c7c0 100644
--- a/packages/pl-fe/src/features/auth-login/components/registration-form.tsx
+++ b/packages/pl-fe/src/features/auth-login/components/registration-form.tsx
@@ -7,7 +7,14 @@ import { Link, useHistory } from 'react-router-dom';
 import { accountLookup } from 'pl-fe/actions/accounts';
 import { register, verifyCredentials } from 'pl-fe/actions/auth';
 import BirthdayInput from 'pl-fe/components/birthday-input';
-import { Checkbox, Form, FormGroup, FormActions, Button, Input, Textarea, Select } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import Checkbox from 'pl-fe/components/ui/checkbox';
+import Form from 'pl-fe/components/ui/form';
+import FormActions from 'pl-fe/components/ui/form-actions';
+import FormGroup from 'pl-fe/components/ui/form-group';
+import Input from 'pl-fe/components/ui/input';
+import Select from 'pl-fe/components/ui/select';
+import Textarea from 'pl-fe/components/ui/textarea';
 import CaptchaField from 'pl-fe/features/auth-login/components/captcha';
 import { useAppDispatch, useSettings, useFeatures, useInstance } from 'pl-fe/hooks';
 import { useModalsStore } from 'pl-fe/stores';
diff --git a/packages/pl-fe/src/features/auth-login/components/registration-page.tsx b/packages/pl-fe/src/features/auth-login/components/registration-page.tsx
index 4ebb4ca1c2..5ea4721234 100644
--- a/packages/pl-fe/src/features/auth-login/components/registration-page.tsx
+++ b/packages/pl-fe/src/features/auth-login/components/registration-page.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { BigCard } from 'pl-fe/components/big-card';
-import { Text } from 'pl-fe/components/ui';
+import Text from 'pl-fe/components/ui/text';
 import { useInstance, useRegistrationStatus } from 'pl-fe/hooks';
 
 import RegistrationForm from './registration-form';
diff --git a/packages/pl-fe/src/features/birthdays/account.tsx b/packages/pl-fe/src/features/birthdays/account.tsx
index 73e579f9da..4bdfc9b6f2 100644
--- a/packages/pl-fe/src/features/birthdays/account.tsx
+++ b/packages/pl-fe/src/features/birthdays/account.tsx
@@ -4,7 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useAccount } from 'pl-fe/api/hooks';
 import AccountComponent from 'pl-fe/components/account';
 import Icon from 'pl-fe/components/icon';
-import { HStack } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
 
 const messages = defineMessages({
   birthday: { id: 'account.birthday', defaultMessage: 'Born {date}' },
diff --git a/packages/pl-fe/src/features/blocks/index.tsx b/packages/pl-fe/src/features/blocks/index.tsx
index bf61043d1f..9bd9ba8e31 100644
--- a/packages/pl-fe/src/features/blocks/index.tsx
+++ b/packages/pl-fe/src/features/blocks/index.tsx
@@ -4,7 +4,8 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useBlocks } from 'pl-fe/api/hooks';
 import Account from 'pl-fe/components/account';
 import ScrollableList from 'pl-fe/components/scrollable-list';
-import { Column, Spinner } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
+import Spinner from 'pl-fe/components/ui/spinner';
 
 const messages = defineMessages({
   heading: { id: 'column.blocks', defaultMessage: 'Blocks' },
diff --git a/packages/pl-fe/src/features/bookmarks/index.tsx b/packages/pl-fe/src/features/bookmarks/index.tsx
index 8fe153e94f..1df33861ea 100644
--- a/packages/pl-fe/src/features/bookmarks/index.tsx
+++ b/packages/pl-fe/src/features/bookmarks/index.tsx
@@ -9,7 +9,7 @@ import { useBookmarkFolder, useDeleteBookmarkFolder } from 'pl-fe/api/hooks';
 import DropdownMenu from 'pl-fe/components/dropdown-menu';
 import PullToRefresh from 'pl-fe/components/pull-to-refresh';
 import StatusList from 'pl-fe/components/status-list';
-import { Column } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
 import { useAppSelector, useAppDispatch, useTheme } from 'pl-fe/hooks';
 import { useIsMobile } from 'pl-fe/hooks/useIsMobile';
 import { useModalsStore } from 'pl-fe/stores';
diff --git a/packages/pl-fe/src/features/bubble-timeline/index.tsx b/packages/pl-fe/src/features/bubble-timeline/index.tsx
index 40743a4339..6e308801b5 100644
--- a/packages/pl-fe/src/features/bubble-timeline/index.tsx
+++ b/packages/pl-fe/src/features/bubble-timeline/index.tsx
@@ -3,7 +3,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchBubbleTimeline } from 'pl-fe/actions/timelines';
 import PullToRefresh from 'pl-fe/components/pull-to-refresh';
-import { Column } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
 import { useAppDispatch, useSettings, useTheme } from 'pl-fe/hooks';
 import { useIsMobile } from 'pl-fe/hooks/useIsMobile';
 
diff --git a/packages/pl-fe/src/features/chats/components/chat-composer.tsx b/packages/pl-fe/src/features/chats/components/chat-composer.tsx
index 06b8b7b883..eacef2e61c 100644
--- a/packages/pl-fe/src/features/chats/components/chat-composer.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-composer.tsx
@@ -3,7 +3,12 @@ import { defineMessages, IntlShape, useIntl } from 'react-intl';
 
 import { unblockAccount } from 'pl-fe/actions/accounts';
 import { useRelationship } from 'pl-fe/api/hooks/accounts/useRelationship';
-import { Button, Combobox, ComboboxInput, ComboboxList, ComboboxOption, ComboboxPopover, HStack, IconButton, Stack, Text } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import Combobox, { ComboboxInput, ComboboxList, ComboboxOption, ComboboxPopover } from 'pl-fe/components/ui/combobox';
+import HStack from 'pl-fe/components/ui/hstack';
+import IconButton from 'pl-fe/components/ui/icon-button';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import { useChatContext } from 'pl-fe/contexts/chat-context';
 import UploadButton from 'pl-fe/features/compose/components/upload-button';
 import emojiSearch from 'pl-fe/features/emoji/search';
diff --git a/packages/pl-fe/src/features/chats/components/chat-list-item.tsx b/packages/pl-fe/src/features/chats/components/chat-list-item.tsx
index 84d41c0e8c..802b8a06e3 100644
--- a/packages/pl-fe/src/features/chats/components/chat-list-item.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-list-item.tsx
@@ -5,7 +5,11 @@ import { useHistory } from 'react-router-dom';
 import { useRelationship } from 'pl-fe/api/hooks/accounts/useRelationship';
 import DropdownMenu from 'pl-fe/components/dropdown-menu';
 import RelativeTimestamp from 'pl-fe/components/relative-timestamp';
-import { Avatar, HStack, IconButton, Stack, Text } from 'pl-fe/components/ui';
+import Avatar from 'pl-fe/components/ui/avatar';
+import HStack from 'pl-fe/components/ui/hstack';
+import IconButton from 'pl-fe/components/ui/icon-button';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import VerificationBadge from 'pl-fe/components/verification-badge';
 import { useChatContext } from 'pl-fe/contexts/chat-context';
 import { useFeatures } from 'pl-fe/hooks';
diff --git a/packages/pl-fe/src/features/chats/components/chat-list.tsx b/packages/pl-fe/src/features/chats/components/chat-list.tsx
index 2810ad44a7..1a5bcfe74b 100644
--- a/packages/pl-fe/src/features/chats/components/chat-list.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-list.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 
 import PullToRefresh from 'pl-fe/components/pull-to-refresh';
 import ScrollableList from 'pl-fe/components/scrollable-list';
-import { Stack } from 'pl-fe/components/ui';
+import Stack from 'pl-fe/components/ui/stack';
 import PlaceholderChat from 'pl-fe/features/placeholder/components/placeholder-chat';
 import { useChats } from 'pl-fe/queries/chats';
 
diff --git a/packages/pl-fe/src/features/chats/components/chat-message-list.tsx b/packages/pl-fe/src/features/chats/components/chat-message-list.tsx
index 67d7707f1a..5d6b2b0fdc 100644
--- a/packages/pl-fe/src/features/chats/components/chat-message-list.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-message-list.tsx
@@ -2,7 +2,11 @@ import React, { useEffect, useRef } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import ScrollableList from 'pl-fe/components/scrollable-list';
-import { Avatar, Button, Divider, Stack, Text } from 'pl-fe/components/ui';
+import Avatar from 'pl-fe/components/ui/avatar';
+import Button from 'pl-fe/components/ui/button';
+import Divider from 'pl-fe/components/ui/divider';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import { Entities } from 'pl-fe/entity-store/entities';
 import PlaceholderChatMessage from 'pl-fe/features/placeholder/components/placeholder-chat-message';
 import { useAppSelector } from 'pl-fe/hooks';
diff --git a/packages/pl-fe/src/features/chats/components/chat-message.tsx b/packages/pl-fe/src/features/chats/components/chat-message.tsx
index a950ee9364..c022a8a57c 100644
--- a/packages/pl-fe/src/features/chats/components/chat-message.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-message.tsx
@@ -5,7 +5,10 @@ import React, { useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import DropdownMenu from 'pl-fe/components/dropdown-menu';
-import { HStack, Icon, Stack, Text } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import emojify from 'pl-fe/features/emoji';
 import { MediaGallery } from 'pl-fe/features/ui/util/async-components';
 import { useAppSelector } from 'pl-fe/hooks';
diff --git a/packages/pl-fe/src/features/chats/components/chat-page/chat-page.tsx b/packages/pl-fe/src/features/chats/components/chat-page/chat-page.tsx
index b472ab4154..2c720cf8d1 100644
--- a/packages/pl-fe/src/features/chats/components/chat-page/chat-page.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-page/chat-page.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { matchPath, Route, Switch, useHistory } from 'react-router-dom';
 
-import { Stack } from 'pl-fe/components/ui';
+import Stack from 'pl-fe/components/ui/stack';
 
 import ChatPageMain from './components/chat-page-main';
 import ChatPageNew from './components/chat-page-new';
diff --git a/packages/pl-fe/src/features/chats/components/chat-page/components/blankslate-empty.tsx b/packages/pl-fe/src/features/chats/components/chat-page/components/blankslate-empty.tsx
index 09d8c2570a..2ef8e7bc0a 100644
--- a/packages/pl-fe/src/features/chats/components/chat-page/components/blankslate-empty.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-page/components/blankslate-empty.tsx
@@ -2,7 +2,9 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { Button, Stack, Text } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 
 interface IBlankslate {
 }
diff --git a/packages/pl-fe/src/features/chats/components/chat-page/components/blankslate-with-chats.tsx b/packages/pl-fe/src/features/chats/components/chat-page/components/blankslate-with-chats.tsx
index d2beac9009..9e4847ba58 100644
--- a/packages/pl-fe/src/features/chats/components/chat-page/components/blankslate-with-chats.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-page/components/blankslate-with-chats.tsx
@@ -2,7 +2,9 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { Button, Stack, Text } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 
 /** To display on the chats main page when no message is selected, but chats are present. */
 const BlankslateWithChats = () => {
diff --git a/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx b/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx
index 23402b1d43..e4c57bc4a5 100644
--- a/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx
@@ -4,7 +4,11 @@ import { Link, useHistory, useParams } from 'react-router-dom';
 
 import { blockAccount, unblockAccount } from 'pl-fe/actions/accounts';
 import DropdownMenu, { type Menu } from 'pl-fe/components/dropdown-menu';
-import { Avatar, HStack, IconButton, Stack, Text } from 'pl-fe/components/ui';
+import Avatar from 'pl-fe/components/ui/avatar';
+import HStack from 'pl-fe/components/ui/hstack';
+import IconButton from 'pl-fe/components/ui/icon-button';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import VerificationBadge from 'pl-fe/components/verification-badge';
 import { useChatContext } from 'pl-fe/contexts/chat-context';
 import { Entities } from 'pl-fe/entity-store/entities';
diff --git a/packages/pl-fe/src/features/chats/components/chat-pane/blankslate.tsx b/packages/pl-fe/src/features/chats/components/chat-pane/blankslate.tsx
index 0fe5f72932..6e46ad099d 100644
--- a/packages/pl-fe/src/features/chats/components/chat-pane/blankslate.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-pane/blankslate.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Button, Stack, Text } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 
 const messages = defineMessages({
   title: { id: 'chat_pane.blankslate.title', defaultMessage: 'No messages yet' },
diff --git a/packages/pl-fe/src/features/chats/components/chat-pane/chat-pane.tsx b/packages/pl-fe/src/features/chats/components/chat-pane/chat-pane.tsx
index f9bfbce785..a4f9bace01 100644
--- a/packages/pl-fe/src/features/chats/components/chat-pane/chat-pane.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-pane/chat-pane.tsx
@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Stack } from 'pl-fe/components/ui';
+import Stack from 'pl-fe/components/ui/stack';
 import { ChatWidgetScreens, useChatContext } from 'pl-fe/contexts/chat-context';
 import { useStatContext } from 'pl-fe/contexts/stat-context';
 import { useChats } from 'pl-fe/queries/chats';
@@ -12,7 +12,7 @@ import EmptyResultsBlankslate from '../chat-search/empty-results-blankslate';
 import ChatPaneHeader from '../chat-widget/chat-pane-header';
 import ChatWindow from '../chat-widget/chat-window';
 import ChatSearchHeader from '../chat-widget/headers/chat-search-header';
-import { Pane } from '../ui';
+import { Pane } from 'pl-fe/components/ui';
 
 import Blankslate from './blankslate';
 
diff --git a/packages/pl-fe/src/features/chats/components/chat-pending-upload.tsx b/packages/pl-fe/src/features/chats/components/chat-pending-upload.tsx
index edf3e189b7..5125397d10 100644
--- a/packages/pl-fe/src/features/chats/components/chat-pending-upload.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-pending-upload.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ProgressBar } from 'pl-fe/components/ui';
+import ProgressBar from 'pl-fe/components/ui/progress-bar';
 
 interface IChatPendingUpload {
   progress: number;
diff --git a/packages/pl-fe/src/features/chats/components/chat-search/blankslate.tsx b/packages/pl-fe/src/features/chats/components/chat-search/blankslate.tsx
index 31767d7c50..fa3291c38f 100644
--- a/packages/pl-fe/src/features/chats/components/chat-search/blankslate.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-search/blankslate.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Stack, Text } from 'pl-fe/components/ui';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 
 const messages = defineMessages({
   title: { id: 'chat_search.blankslate.title', defaultMessage: 'Start a chat' },
diff --git a/packages/pl-fe/src/features/chats/components/chat-search/empty-results-blankslate.tsx b/packages/pl-fe/src/features/chats/components/chat-search/empty-results-blankslate.tsx
index 4d97632097..1d8fe6e4d6 100644
--- a/packages/pl-fe/src/features/chats/components/chat-search/empty-results-blankslate.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-search/empty-results-blankslate.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Stack, Text } from 'pl-fe/components/ui';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 
 const messages = defineMessages({
   title: { id: 'chat_search.empty_results_blankslate.title', defaultMessage: 'No matches found' },
diff --git a/packages/pl-fe/src/features/chats/components/chat-search/results.tsx b/packages/pl-fe/src/features/chats/components/chat-search/results.tsx
index e53f7c286b..24b1dd7694 100644
--- a/packages/pl-fe/src/features/chats/components/chat-search/results.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-search/results.tsx
@@ -2,7 +2,10 @@ import clsx from 'clsx';
 import React, { useCallback, useState } from 'react';
 
 import ScrollableList from 'pl-fe/components/scrollable-list';
-import { Avatar, HStack, Stack, Text } from 'pl-fe/components/ui';
+import Avatar from 'pl-fe/components/ui/avatar';
+import HStack from 'pl-fe/components/ui/hstack';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import VerificationBadge from 'pl-fe/components/verification-badge';
 import useAccountSearch from 'pl-fe/queries/search';
 
diff --git a/packages/pl-fe/src/features/chats/components/chat-upload-preview.tsx b/packages/pl-fe/src/features/chats/components/chat-upload-preview.tsx
index 3e604c1a14..4f7bac9b69 100644
--- a/packages/pl-fe/src/features/chats/components/chat-upload-preview.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-upload-preview.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Icon } from 'pl-fe/components/ui';
+import Icon from 'pl-fe/components/ui/icon';
 import { MIMETYPE_ICONS } from 'pl-fe/components/upload';
 
 import type { MediaAttachment } from 'pl-api';
diff --git a/packages/pl-fe/src/features/chats/components/chat-upload.tsx b/packages/pl-fe/src/features/chats/components/chat-upload.tsx
index 08c3eac7e0..65a3c3b041 100644
--- a/packages/pl-fe/src/features/chats/components/chat-upload.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-upload.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 
 import Blurhash from 'pl-fe/components/blurhash';
-import { Icon } from 'pl-fe/components/ui';
+import Icon from 'pl-fe/components/ui/icon';
 import { useModalsStore } from 'pl-fe/stores';
 
 import ChatUploadPreview from './chat-upload-preview';
diff --git a/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx b/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx
index e51fd52149..c55e3efd41 100644
--- a/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx
@@ -2,7 +2,11 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { blockAccount, unblockAccount } from 'pl-fe/actions/accounts';
-import { Avatar, HStack, Icon, Stack, Text } from 'pl-fe/components/ui';
+import Avatar from 'pl-fe/components/ui/avatar';
+import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import { ChatWidgetScreens, useChatContext } from 'pl-fe/contexts/chat-context';
 import { Entities } from 'pl-fe/entity-store/entities';
 import { useAppDispatch, useAppSelector, useFeatures } from 'pl-fe/hooks';
diff --git a/packages/pl-fe/src/features/chats/components/chat-widget/chat-window.tsx b/packages/pl-fe/src/features/chats/components/chat-widget/chat-window.tsx
index 6d25ad539d..2ebb08a89d 100644
--- a/packages/pl-fe/src/features/chats/components/chat-widget/chat-window.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-widget/chat-window.tsx
@@ -1,7 +1,11 @@
 import React, { useRef } from 'react';
 import { Link } from 'react-router-dom';
 
-import { Avatar, HStack, Icon, Stack, Text } from 'pl-fe/components/ui';
+import Avatar from 'pl-fe/components/ui/avatar';
+import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import VerificationBadge from 'pl-fe/components/verification-badge';
 import { ChatWidgetScreens, useChatContext } from 'pl-fe/contexts/chat-context';
 
diff --git a/packages/pl-fe/src/features/chats/components/chat-widget/headers/chat-search-header.tsx b/packages/pl-fe/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
index 66665edeb2..609fb561eb 100644
--- a/packages/pl-fe/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { HStack, Icon, Text } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
+import Text from 'pl-fe/components/ui/text';
 import { ChatWidgetScreens, useChatContext } from 'pl-fe/contexts/chat-context';
 
 import ChatPaneHeader from '../chat-pane-header';
diff --git a/packages/pl-fe/src/features/chats/components/chat.tsx b/packages/pl-fe/src/features/chats/components/chat.tsx
index 5815b6d4a8..4d27023c86 100644
--- a/packages/pl-fe/src/features/chats/components/chat.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat.tsx
@@ -3,7 +3,7 @@ import React, { MutableRefObject, useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { uploadMedia } from 'pl-fe/actions/media';
-import { Stack } from 'pl-fe/components/ui';
+import Stack from 'pl-fe/components/ui/stack';
 import { useAppDispatch } from 'pl-fe/hooks';
 import { useChatActions } from 'pl-fe/queries/chats';
 import toast from 'pl-fe/toast';
diff --git a/packages/pl-fe/src/features/circle/index.tsx b/packages/pl-fe/src/features/circle/index.tsx
index d918a9b2ab..5fd1fac9f8 100644
--- a/packages/pl-fe/src/features/circle/index.tsx
+++ b/packages/pl-fe/src/features/circle/index.tsx
@@ -5,7 +5,16 @@ import { Link } from 'react-router-dom';
 import { processCircle } from 'pl-fe/actions/circle';
 import { resetCompose, uploadComposeSuccess, uploadFile } from 'pl-fe/actions/compose';
 import Account from 'pl-fe/components/account';
-import { Accordion, Avatar, Button, Column, Form, FormActions, HStack, ProgressBar, Stack, Text } from 'pl-fe/components/ui';
+import Accordion from 'pl-fe/components/ui/accordion';
+import Avatar from 'pl-fe/components/ui/avatar';
+import Button from 'pl-fe/components/ui/button';
+import Column from 'pl-fe/components/ui/column';
+import Form from 'pl-fe/components/ui/form';
+import FormActions from 'pl-fe/components/ui/form-actions';
+import HStack from 'pl-fe/components/ui/hstack';
+import ProgressBar from 'pl-fe/components/ui/progress-bar';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import { useAppDispatch, useOwnAccount } from 'pl-fe/hooks';
 import { useModalsStore } from 'pl-fe/stores';
 
diff --git a/packages/pl-fe/src/features/community-timeline/index.tsx b/packages/pl-fe/src/features/community-timeline/index.tsx
index 7f9d3a4826..e32455b597 100644
--- a/packages/pl-fe/src/features/community-timeline/index.tsx
+++ b/packages/pl-fe/src/features/community-timeline/index.tsx
@@ -4,7 +4,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { fetchPublicTimeline } from 'pl-fe/actions/timelines';
 import { useCommunityStream } from 'pl-fe/api/hooks';
 import PullToRefresh from 'pl-fe/components/pull-to-refresh';
-import { Column } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
 import { useAppDispatch, useSettings, useTheme } from 'pl-fe/hooks';
 import { useIsMobile } from 'pl-fe/hooks/useIsMobile';
 
diff --git a/packages/pl-fe/src/features/compose/components/compose-form-button.tsx b/packages/pl-fe/src/features/compose/components/compose-form-button.tsx
index 6d98e08102..28736aef10 100644
--- a/packages/pl-fe/src/features/compose/components/compose-form-button.tsx
+++ b/packages/pl-fe/src/features/compose/components/compose-form-button.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
 
-import { IconButton } from 'pl-fe/components/ui';
+import IconButton from 'pl-fe/components/ui/icon-button';
 
 interface IComposeFormButton {
   icon: string;
diff --git a/packages/pl-fe/src/features/compose/components/compose-form.tsx b/packages/pl-fe/src/features/compose/components/compose-form.tsx
index 668c1108d2..4b09c7dd69 100644
--- a/packages/pl-fe/src/features/compose/components/compose-form.tsx
+++ b/packages/pl-fe/src/features/compose/components/compose-form.tsx
@@ -12,7 +12,9 @@ import {
   selectComposeSuggestion,
   uploadCompose,
 } from 'pl-fe/actions/compose';
-import { Button, HStack, Stack } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import HStack from 'pl-fe/components/ui/hstack';
+import Stack from 'pl-fe/components/ui/stack';
 import EmojiPickerDropdown from 'pl-fe/features/emoji/containers/emoji-picker-dropdown-container';
 import { ComposeEditor } from 'pl-fe/features/ui/util/async-components';
 import { useAppDispatch, useAppSelector, useCompose, useDraggedFiles, useFeatures, useInstance } from 'pl-fe/hooks';
diff --git a/packages/pl-fe/src/features/compose/components/content-type-button.tsx b/packages/pl-fe/src/features/compose/components/content-type-button.tsx
index fe8b5951f1..2d935da0df 100644
--- a/packages/pl-fe/src/features/compose/components/content-type-button.tsx
+++ b/packages/pl-fe/src/features/compose/components/content-type-button.tsx
@@ -3,7 +3,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { changeComposeContentType } from 'pl-fe/actions/compose';
 import DropdownMenu from 'pl-fe/components/dropdown-menu';
-import { Button } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
 import { useAppDispatch, useCompose, useInstance } from 'pl-fe/hooks';
 
 const messages = defineMessages({
diff --git a/packages/pl-fe/src/features/compose/components/language-dropdown.tsx b/packages/pl-fe/src/features/compose/components/language-dropdown.tsx
index cb5b633ead..1380ae8ee5 100644
--- a/packages/pl-fe/src/features/compose/components/language-dropdown.tsx
+++ b/packages/pl-fe/src/features/compose/components/language-dropdown.tsx
@@ -5,7 +5,9 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { addComposeLanguage, changeComposeLanguage, changeComposeModifiedLanguage, deleteComposeLanguage } from 'pl-fe/actions/compose';
 import DropdownMenu from 'pl-fe/components/dropdown-menu';
-import { Button, Icon, Input } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import Icon from 'pl-fe/components/ui/icon';
+import Input from 'pl-fe/components/ui/input';
 import { type Language, languages as languagesObject } from 'pl-fe/features/preferences';
 import { useAppDispatch, useCompose, useFeatures, useSettings } from 'pl-fe/hooks';
 
diff --git a/packages/pl-fe/src/features/compose/components/polls/duration-selector.tsx b/packages/pl-fe/src/features/compose/components/polls/duration-selector.tsx
index e6ce665ea0..505fad53c4 100644
--- a/packages/pl-fe/src/features/compose/components/polls/duration-selector.tsx
+++ b/packages/pl-fe/src/features/compose/components/polls/duration-selector.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Select } from 'pl-fe/components/ui';
+import Select from 'pl-fe/components/ui/select';
 
 const messages = defineMessages({
   minutes: { id: 'intervals.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}}' },
diff --git a/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx b/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx
index 1c0302a8fb..b16323ffe6 100644
--- a/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx
+++ b/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx
@@ -4,7 +4,7 @@ import { useIntl, defineMessages, IntlShape } from 'react-intl';
 import { changeComposeFederated, changeComposeVisibility } from 'pl-fe/actions/compose';
 import { fetchLists } from 'pl-fe/actions/lists';
 import DropdownMenu, { MenuItem } from 'pl-fe/components/dropdown-menu';
-import { Button } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
 import { getOrderedLists } from 'pl-fe/features/lists';
 import { useAppDispatch, useAppSelector, useCompose, useFeatures } from 'pl-fe/hooks';
 
diff --git a/packages/pl-fe/src/features/compose/components/reply-group-indicator.tsx b/packages/pl-fe/src/features/compose/components/reply-group-indicator.tsx
index b5f5b6f572..c0aa28a397 100644
--- a/packages/pl-fe/src/features/compose/components/reply-group-indicator.tsx
+++ b/packages/pl-fe/src/features/compose/components/reply-group-indicator.tsx
@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Link from 'pl-fe/components/link';
-import { Text } from 'pl-fe/components/ui';
+import Text from 'pl-fe/components/ui/text';
 import { useAppSelector } from 'pl-fe/hooks';
 import { makeGetStatus } from 'pl-fe/selectors';
 
diff --git a/packages/pl-fe/src/features/compose/components/reply-indicator.tsx b/packages/pl-fe/src/features/compose/components/reply-indicator.tsx
index 0ca76374c3..3006b39752 100644
--- a/packages/pl-fe/src/features/compose/components/reply-indicator.tsx
+++ b/packages/pl-fe/src/features/compose/components/reply-indicator.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import AttachmentThumbs from 'pl-fe/components/attachment-thumbs';
 import Markup from 'pl-fe/components/markup';
 import { ParsedContent } from 'pl-fe/components/parsed-content';
-import { Stack } from 'pl-fe/components/ui';
+import Stack from 'pl-fe/components/ui/stack';
 import AccountContainer from 'pl-fe/containers/account-container';
 import { getTextDirection } from 'pl-fe/utils/rtl';
 
diff --git a/packages/pl-fe/src/features/compose/components/upload-button.tsx b/packages/pl-fe/src/features/compose/components/upload-button.tsx
index 9895ced112..28bca1dab4 100644
--- a/packages/pl-fe/src/features/compose/components/upload-button.tsx
+++ b/packages/pl-fe/src/features/compose/components/upload-button.tsx
@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import { defineMessages, IntlShape, useIntl } from 'react-intl';
 
-import { IconButton } from 'pl-fe/components/ui';
+import IconButton from 'pl-fe/components/ui/icon-button';
 import { useInstance } from 'pl-fe/hooks';
 
 const messages = defineMessages({
diff --git a/packages/pl-fe/src/features/compose/components/upload-form.tsx b/packages/pl-fe/src/features/compose/components/upload-form.tsx
index d33ad510de..449e0c9fa9 100644
--- a/packages/pl-fe/src/features/compose/components/upload-form.tsx
+++ b/packages/pl-fe/src/features/compose/components/upload-form.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { useCallback, useRef } from 'react';
 
 import { changeMediaOrder } from 'pl-fe/actions/compose';
-import { HStack } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
 import { useAppDispatch, useCompose } from 'pl-fe/hooks';
 
 import Upload from './upload';
diff --git a/packages/pl-fe/src/features/compose/editor/nodes/emoji-node.tsx b/packages/pl-fe/src/features/compose/editor/nodes/emoji-node.tsx
index 9a198610b7..2813175cc7 100644
--- a/packages/pl-fe/src/features/compose/editor/nodes/emoji-node.tsx
+++ b/packages/pl-fe/src/features/compose/editor/nodes/emoji-node.tsx
@@ -1,7 +1,7 @@
 import { $applyNodeReplacement, DecoratorNode } from 'lexical';
 import React from 'react';
 
-import { Emoji as Component } from 'pl-fe/components/ui';
+import { Emoji as Component } from 'pl-fe/components/ui/emoji';
 import { isNativeEmoji, type Emoji } from 'pl-fe/features/emoji';
 
 import type {
diff --git a/packages/pl-fe/src/features/compose/editor/plugins/floating-link-editor-plugin.tsx b/packages/pl-fe/src/features/compose/editor/plugins/floating-link-editor-plugin.tsx
index 78f27a5723..16d8c414c6 100644
--- a/packages/pl-fe/src/features/compose/editor/plugins/floating-link-editor-plugin.tsx
+++ b/packages/pl-fe/src/features/compose/editor/plugins/floating-link-editor-plugin.tsx
@@ -20,7 +20,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 
-import { Icon } from 'pl-fe/components/ui';
+import Icon from 'pl-fe/components/ui/icon';
 
 import { getSelectedNode } from '../utils/get-selected-node';
 import { setFloatingElemPosition } from '../utils/set-floating-elem-position';
diff --git a/packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx b/packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx
index f99a29d4e0..beffa5b2a6 100644
--- a/packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx
+++ b/packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx
@@ -39,7 +39,7 @@ import * as React from 'react';
 import { createPortal } from 'react-dom';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Icon } from 'pl-fe/components/ui';
+import Icon from 'pl-fe/components/ui/icon';
 import { useInstance } from 'pl-fe/hooks';
 
 import { getDOMRangeRect } from '../utils/get-dom-range-rect';
diff --git a/packages/pl-fe/src/features/conversations/index.tsx b/packages/pl-fe/src/features/conversations/index.tsx
index b62ef7e92d..0186a8eb02 100644
--- a/packages/pl-fe/src/features/conversations/index.tsx
+++ b/packages/pl-fe/src/features/conversations/index.tsx
@@ -5,7 +5,7 @@ import { directComposeById } from 'pl-fe/actions/compose';
 import { mountConversations, unmountConversations, expandConversations } from 'pl-fe/actions/conversations';
 import { useDirectStream } from 'pl-fe/api/hooks';
 import AccountSearch from 'pl-fe/components/account-search';
-import { Column } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
 import { useAppDispatch } from 'pl-fe/hooks';
 
 import ConversationsList from './components/conversations-list';
diff --git a/packages/pl-fe/src/features/crypto-donate/components/crypto-address.tsx b/packages/pl-fe/src/features/crypto-donate/components/crypto-address.tsx
index 483ff0317a..e78bf3c9e5 100644
--- a/packages/pl-fe/src/features/crypto-donate/components/crypto-address.tsx
+++ b/packages/pl-fe/src/features/crypto-donate/components/crypto-address.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
 
 import CopyableInput from 'pl-fe/components/copyable-input';
-import { Text, Icon, Stack, HStack } from 'pl-fe/components/ui';
+import Text from 'pl-fe/components/ui/text';
+import Icon from 'pl-fe/components/ui/icon';
+import Stack from 'pl-fe/components/ui/stack';
+import HStack from 'pl-fe/components/ui/hstack';
 import { useModalsStore } from 'pl-fe/stores';
 
 import { getExplorerUrl } from '../utils/block-explorer';
diff --git a/packages/pl-fe/src/features/crypto-donate/components/crypto-donate-panel.tsx b/packages/pl-fe/src/features/crypto-donate/components/crypto-donate-panel.tsx
index 18e30f7b7f..d11898c8aa 100644
--- a/packages/pl-fe/src/features/crypto-donate/components/crypto-donate-panel.tsx
+++ b/packages/pl-fe/src/features/crypto-donate/components/crypto-donate-panel.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { Text, Widget } from 'pl-fe/components/ui';
+import Text from 'pl-fe/components/ui/text';
+import Widget from 'pl-fe/components/ui/widget';
 import { useInstance, usePlFeConfig } from 'pl-fe/hooks';
 
 import SiteWallet from './site-wallet';
diff --git a/packages/pl-fe/src/features/crypto-donate/components/lightning-address.tsx b/packages/pl-fe/src/features/crypto-donate/components/lightning-address.tsx
index bbf53c8152..0b51eb0601 100644
--- a/packages/pl-fe/src/features/crypto-donate/components/lightning-address.tsx
+++ b/packages/pl-fe/src/features/crypto-donate/components/lightning-address.tsx
@@ -2,7 +2,10 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import CopyableInput from 'pl-fe/components/copyable-input';
-import { Text, Stack, HStack, Emoji } from 'pl-fe/components/ui';
+import Text from 'pl-fe/components/ui/text';
+import Stack from 'pl-fe/components/ui/stack';
+import HStack from 'pl-fe/components/ui/hstack';
+import Emoji from 'pl-fe/components/ui/emoji';
 
 interface ILightningAddress {
   address: string;
diff --git a/packages/pl-fe/src/features/crypto-donate/components/site-wallet.tsx b/packages/pl-fe/src/features/crypto-donate/components/site-wallet.tsx
index 938e9416c1..f68ce1f7fe 100644
--- a/packages/pl-fe/src/features/crypto-donate/components/site-wallet.tsx
+++ b/packages/pl-fe/src/features/crypto-donate/components/site-wallet.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Stack } from 'pl-fe/components/ui';
+import Stack from 'pl-fe/components/ui/stack';
 import { usePlFeConfig } from 'pl-fe/hooks';
 
 import CryptoAddress from './crypto-address';
diff --git a/packages/pl-fe/src/features/crypto-donate/index.tsx b/packages/pl-fe/src/features/crypto-donate/index.tsx
index 00f2f7b80b..53a188d463 100644
--- a/packages/pl-fe/src/features/crypto-donate/index.tsx
+++ b/packages/pl-fe/src/features/crypto-donate/index.tsx
@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Accordion, Column, Stack } from 'pl-fe/components/ui';
+import Accordion from 'pl-fe/components/ui/accordion';
+import Column from 'pl-fe/components/ui/column';
+import Stack from 'pl-fe/components/ui/stack';
 import { useInstance } from 'pl-fe/hooks';
 
 import SiteWallet from './components/site-wallet';
diff --git a/packages/pl-fe/src/features/domain-blocks/index.tsx b/packages/pl-fe/src/features/domain-blocks/index.tsx
index e1ea885ee6..49395d56c0 100644
--- a/packages/pl-fe/src/features/domain-blocks/index.tsx
+++ b/packages/pl-fe/src/features/domain-blocks/index.tsx
@@ -5,7 +5,8 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { fetchDomainBlocks, expandDomainBlocks } from 'pl-fe/actions/domain-blocks';
 import Domain from 'pl-fe/components/domain';
 import ScrollableList from 'pl-fe/components/scrollable-list';
-import { Column, Spinner } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
+import Spinner from 'pl-fe/components/ui/spinner';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
 
 const messages = defineMessages({
diff --git a/packages/pl-fe/src/features/draft-statuses/components/draft-status-action-bar.tsx b/packages/pl-fe/src/features/draft-statuses/components/draft-status-action-bar.tsx
index b1d1b2fbca..9e005dabf2 100644
--- a/packages/pl-fe/src/features/draft-statuses/components/draft-status-action-bar.tsx
+++ b/packages/pl-fe/src/features/draft-statuses/components/draft-status-action-bar.tsx
@@ -3,7 +3,8 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { setComposeToStatus } from 'pl-fe/actions/compose';
 import { cancelDraftStatus } from 'pl-fe/actions/draft-statuses';
-import { Button, HStack } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import HStack from 'pl-fe/components/ui/hstack';
 import { useAppDispatch } from 'pl-fe/hooks';
 import { useModalsStore, useSettingsStore } from 'pl-fe/stores';
 
diff --git a/packages/pl-fe/src/features/draft-statuses/components/draft-status.tsx b/packages/pl-fe/src/features/draft-statuses/components/draft-status.tsx
index 2a9a7ef735..89f2d12c95 100644
--- a/packages/pl-fe/src/features/draft-statuses/components/draft-status.tsx
+++ b/packages/pl-fe/src/features/draft-statuses/components/draft-status.tsx
@@ -6,7 +6,8 @@ import Account from 'pl-fe/components/account';
 import AttachmentThumbs from 'pl-fe/components/attachment-thumbs';
 import StatusContent from 'pl-fe/components/status-content';
 import StatusReplyMentions from 'pl-fe/components/status-reply-mentions';
-import { HStack, Stack } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Stack from 'pl-fe/components/ui/stack';
 import QuotedStatus from 'pl-fe/features/status/containers/quoted-status-container';
 import PollPreview from 'pl-fe/features/ui/components/poll-preview';
 import { useAppSelector } from 'pl-fe/hooks';
diff --git a/packages/pl-fe/src/features/draft-statuses/index.tsx b/packages/pl-fe/src/features/draft-statuses/index.tsx
index 94f58da125..aa1006f6f2 100644
--- a/packages/pl-fe/src/features/draft-statuses/index.tsx
+++ b/packages/pl-fe/src/features/draft-statuses/index.tsx
@@ -3,7 +3,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchDraftStatuses } from 'pl-fe/actions/draft-statuses';
 import ScrollableList from 'pl-fe/components/scrollable-list';
-import { Column } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
 import { useAppSelector, useAppDispatch } from 'pl-fe/hooks';
 
 import DraftStatus from './components/draft-status';
diff --git a/packages/pl-fe/src/features/embedded-status/index.tsx b/packages/pl-fe/src/features/embedded-status/index.tsx
index 1d08e100d1..a18f75b1f6 100644
--- a/packages/pl-fe/src/features/embedded-status/index.tsx
+++ b/packages/pl-fe/src/features/embedded-status/index.tsx
@@ -6,7 +6,7 @@ import { fetchStatus } from 'pl-fe/actions/statuses';
 import MissingIndicator from 'pl-fe/components/missing-indicator';
 import SiteLogo from 'pl-fe/components/site-logo';
 import Status from 'pl-fe/components/status';
-import { Spinner } from 'pl-fe/components/ui';
+import Spinner from 'pl-fe/components/ui/spinner';
 import { useAppDispatch, useAppSelector, useLogo } from 'pl-fe/hooks';
 import { iframeId } from 'pl-fe/iframe';
 import { makeGetStatus } from 'pl-fe/selectors';
diff --git a/packages/pl-fe/src/features/event/components/event-action-button.tsx b/packages/pl-fe/src/features/event/components/event-action-button.tsx
index 6d1789416f..68b4568f8a 100644
--- a/packages/pl-fe/src/features/event/components/event-action-button.tsx
+++ b/packages/pl-fe/src/features/event/components/event-action-button.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { joinEvent, leaveEvent } from 'pl-fe/actions/events';
-import { Button } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
 import { useModalsStore } from 'pl-fe/stores';
 
diff --git a/packages/pl-fe/src/features/event/components/event-date.tsx b/packages/pl-fe/src/features/event/components/event-date.tsx
index d5465bba56..4a79d65def 100644
--- a/packages/pl-fe/src/features/event/components/event-date.tsx
+++ b/packages/pl-fe/src/features/event/components/event-date.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { FormattedDate } from 'react-intl';
 
 import Icon from 'pl-fe/components/icon';
-import { HStack } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
 
 import type { Status } from 'pl-fe/normalizers';
 
diff --git a/packages/pl-fe/src/features/event/event-discussion.tsx b/packages/pl-fe/src/features/event/event-discussion.tsx
index 0d7169c61b..085526600d 100644
--- a/packages/pl-fe/src/features/event/event-discussion.tsx
+++ b/packages/pl-fe/src/features/event/event-discussion.tsx
@@ -7,7 +7,7 @@ import { fetchStatusWithContext } from 'pl-fe/actions/statuses';
 import MissingIndicator from 'pl-fe/components/missing-indicator';
 import ScrollableList from 'pl-fe/components/scrollable-list';
 import Tombstone from 'pl-fe/components/tombstone';
-import { Stack } from 'pl-fe/components/ui';
+import Stack from 'pl-fe/components/ui/stack';
 import PlaceholderStatus from 'pl-fe/features/placeholder/components/placeholder-status';
 import PendingStatus from 'pl-fe/features/ui/components/pending-status';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
diff --git a/packages/pl-fe/src/features/event/event-information.tsx b/packages/pl-fe/src/features/event/event-information.tsx
index feed68550b..7c8278941d 100644
--- a/packages/pl-fe/src/features/event/event-information.tsx
+++ b/packages/pl-fe/src/features/event/event-information.tsx
@@ -6,7 +6,10 @@ import MissingIndicator from 'pl-fe/components/missing-indicator';
 import StatusContent from 'pl-fe/components/status-content';
 import StatusMedia from 'pl-fe/components/status-media';
 import TranslateButton from 'pl-fe/components/translate-button';
-import { HStack, Icon, Stack, Text } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import QuotedStatus from 'pl-fe/features/status/containers/quoted-status-container';
 import { useAppDispatch, useAppSelector, usePlFeConfig } from 'pl-fe/hooks';
 import { makeGetStatus } from 'pl-fe/selectors';
diff --git a/packages/pl-fe/src/features/events/components/event-carousel.tsx b/packages/pl-fe/src/features/events/components/event-carousel.tsx
index 31d9f900f8..ce7e421c2f 100644
--- a/packages/pl-fe/src/features/events/components/event-carousel.tsx
+++ b/packages/pl-fe/src/features/events/components/event-carousel.tsx
@@ -3,7 +3,8 @@ import { Link } from 'react-router-dom';
 import ReactSwipeableViews from 'react-swipeable-views';
 
 import EventPreview from 'pl-fe/components/event-preview';
-import { Card, Icon } from 'pl-fe/components/ui';
+import Card from 'pl-fe/components/ui/card';
+import Icon from 'pl-fe/components/ui/icon';
 import { useAppSelector } from 'pl-fe/hooks';
 import { makeGetStatus } from 'pl-fe/selectors';
 
diff --git a/packages/pl-fe/src/features/export-data/index.tsx b/packages/pl-fe/src/features/export-data/index.tsx
index 779cce3d1e..4540cd1eee 100644
--- a/packages/pl-fe/src/features/export-data/index.tsx
+++ b/packages/pl-fe/src/features/export-data/index.tsx
@@ -6,7 +6,7 @@ import {
   exportBlocks,
   exportMutes,
 } from 'pl-fe/actions/export-data';
-import { Column } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
 
 import CSVExporter from './components/csv-exporter';
 
diff --git a/packages/pl-fe/src/features/favourited-statuses/index.tsx b/packages/pl-fe/src/features/favourited-statuses/index.tsx
index 6724dc4e15..f0fec43aca 100644
--- a/packages/pl-fe/src/features/favourited-statuses/index.tsx
+++ b/packages/pl-fe/src/features/favourited-statuses/index.tsx
@@ -8,7 +8,7 @@ import { fetchFavouritedStatuses, expandFavouritedStatuses, fetchAccountFavourit
 import { useAccountLookup } from 'pl-fe/api/hooks';
 import MissingIndicator from 'pl-fe/components/missing-indicator';
 import StatusList from 'pl-fe/components/status-list';
-import { Column } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
 import { useAppDispatch, useAppSelector, useOwnAccount } from 'pl-fe/hooks';
 
 const messages = defineMessages({
diff --git a/packages/pl-fe/src/features/federation-restrictions/components/instance-restrictions.tsx b/packages/pl-fe/src/features/federation-restrictions/components/instance-restrictions.tsx
index 3944faaae8..3ada74f605 100644
--- a/packages/pl-fe/src/features/federation-restrictions/components/instance-restrictions.tsx
+++ b/packages/pl-fe/src/features/federation-restrictions/components/instance-restrictions.tsx
@@ -2,7 +2,9 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Icon from 'pl-fe/components/icon';
-import { HStack, Stack, Text } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import { useInstance } from 'pl-fe/hooks';
 
 import type { RemoteInstance } from 'pl-fe/selectors';
diff --git a/packages/pl-fe/src/features/feed-suggestions/feed-suggestions.tsx b/packages/pl-fe/src/features/feed-suggestions/feed-suggestions.tsx
index f5013079a8..e9c4b6f806 100644
--- a/packages/pl-fe/src/features/feed-suggestions/feed-suggestions.tsx
+++ b/packages/pl-fe/src/features/feed-suggestions/feed-suggestions.tsx
@@ -3,10 +3,13 @@ import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import { useAccount } from 'pl-fe/api/hooks';
+import Card, { CardBody, CardTitle } from 'pl-fe/components/ui/card';
+import HStack from 'pl-fe/components/ui/hstack';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import VerificationBadge from 'pl-fe/components/verification-badge';
 import { useAppSelector } from 'pl-fe/hooks';
 
-import { Card, CardBody, CardTitle, HStack, Stack, Text } from '../../components/ui';
 import ActionButton from '../ui/components/action-button';
 import { HotKeys } from '../ui/components/hotkeys';
 
diff --git a/packages/pl-fe/src/features/follow-requests/index.tsx b/packages/pl-fe/src/features/follow-requests/index.tsx
index 4a299f9584..71207bb9b1 100644
--- a/packages/pl-fe/src/features/follow-requests/index.tsx
+++ b/packages/pl-fe/src/features/follow-requests/index.tsx
@@ -4,7 +4,8 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
 import { fetchFollowRequests, expandFollowRequests } from 'pl-fe/actions/accounts';
 import ScrollableList from 'pl-fe/components/scrollable-list';
-import { Column, Spinner } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
+import Spinner from 'pl-fe/components/ui/spinner';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
 
 import AccountAuthorize from './components/account-authorize';
diff --git a/packages/pl-fe/src/features/followed-tags/index.tsx b/packages/pl-fe/src/features/followed-tags/index.tsx
index 12f4eb72c6..1cd9d74a5e 100644
--- a/packages/pl-fe/src/features/followed-tags/index.tsx
+++ b/packages/pl-fe/src/features/followed-tags/index.tsx
@@ -5,7 +5,7 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { fetchFollowedHashtags, expandFollowedHashtags } from 'pl-fe/actions/tags';
 import Hashtag from 'pl-fe/components/hashtag';
 import ScrollableList from 'pl-fe/components/scrollable-list';
-import { Column } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
 import PlaceholderHashtag from 'pl-fe/features/placeholder/components/placeholder-hashtag';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
 
diff --git a/packages/pl-fe/src/features/followers/index.tsx b/packages/pl-fe/src/features/followers/index.tsx
index 8b52f3671a..02d373198c 100644
--- a/packages/pl-fe/src/features/followers/index.tsx
+++ b/packages/pl-fe/src/features/followers/index.tsx
@@ -5,7 +5,8 @@ import { useAccountLookup, useFollowers } from 'pl-fe/api/hooks';
 import Account from 'pl-fe/components/account';
 import MissingIndicator from 'pl-fe/components/missing-indicator';
 import ScrollableList from 'pl-fe/components/scrollable-list';
-import { Column, Spinner } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
+import Spinner from 'pl-fe/components/ui/spinner';
 
 const messages = defineMessages({
   heading: { id: 'column.followers', defaultMessage: 'Followers' },
diff --git a/packages/pl-fe/src/features/following/index.tsx b/packages/pl-fe/src/features/following/index.tsx
index 0a0b35a797..495d0934ac 100644
--- a/packages/pl-fe/src/features/following/index.tsx
+++ b/packages/pl-fe/src/features/following/index.tsx
@@ -5,7 +5,8 @@ import { useAccountLookup, useFollowing } from 'pl-fe/api/hooks';
 import Account from 'pl-fe/components/account';
 import MissingIndicator from 'pl-fe/components/missing-indicator';
 import ScrollableList from 'pl-fe/components/scrollable-list';
-import { Column, Spinner } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
+import Spinner from 'pl-fe/components/ui/spinner';
 
 const messages = defineMessages({
   heading: { id: 'column.following', defaultMessage: 'Following' },
diff --git a/packages/pl-fe/src/features/forms/index.tsx b/packages/pl-fe/src/features/forms/index.tsx
index 2eae91ef41..01174c076e 100644
--- a/packages/pl-fe/src/features/forms/index.tsx
+++ b/packages/pl-fe/src/features/forms/index.tsx
@@ -3,7 +3,8 @@ import MultiselectReactDropdown from 'multiselect-react-dropdown';
 import React, { useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Icon, Select } from '../../components/ui';
+import Icon from 'pl-fe/components/ui/icon';
+import Select from 'pl-fe/components/ui/select';
 
 const messages = defineMessages({
   selectPlaceholder: { id: 'select.placeholder', defaultMessage: 'Select' },
diff --git a/packages/pl-fe/src/features/group/components/group-action-button.tsx b/packages/pl-fe/src/features/group/components/group-action-button.tsx
index 9de7dd77ae..a38bed3c35 100644
--- a/packages/pl-fe/src/features/group/components/group-action-button.tsx
+++ b/packages/pl-fe/src/features/group/components/group-action-button.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { useJoinGroup, useLeaveGroup } from 'pl-fe/api/hooks';
-import { Button } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
 import { importEntities } from 'pl-fe/entity-store/actions';
 import { Entities } from 'pl-fe/entity-store/entities';
 import { useAppDispatch } from 'pl-fe/hooks';
diff --git a/packages/pl-fe/src/features/group/components/group-header-image.tsx b/packages/pl-fe/src/features/group/components/group-header-image.tsx
index 1e06772110..f91d2c1e8f 100644
--- a/packages/pl-fe/src/features/group/components/group-header-image.tsx
+++ b/packages/pl-fe/src/features/group/components/group-header-image.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Icon } from 'pl-fe/components/ui';
+import Icon from 'pl-fe/components/ui/icon';
 
 import type { Group } from 'pl-fe/normalizers';
 
diff --git a/packages/pl-fe/src/features/group/components/group-header.tsx b/packages/pl-fe/src/features/group/components/group-header.tsx
index c0c229db29..af6c6719dd 100644
--- a/packages/pl-fe/src/features/group/components/group-header.tsx
+++ b/packages/pl-fe/src/features/group/components/group-header.tsx
@@ -6,7 +6,10 @@ import * as v from 'valibot';
 import GroupAvatar from 'pl-fe/components/groups/group-avatar';
 import { ParsedContent } from 'pl-fe/components/parsed-content';
 import StillImage from 'pl-fe/components/still-image';
-import { HStack, Icon, Stack, Text } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import { useModalsStore } from 'pl-fe/stores';
 import { isDefaultHeader } from 'pl-fe/utils/accounts';
 
diff --git a/packages/pl-fe/src/features/group/components/group-member-count.tsx b/packages/pl-fe/src/features/group/components/group-member-count.tsx
index 2341b38d6c..56a05cee2d 100644
--- a/packages/pl-fe/src/features/group/components/group-member-count.tsx
+++ b/packages/pl-fe/src/features/group/components/group-member-count.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Text } from 'pl-fe/components/ui';
+import Text from 'pl-fe/components/ui/text';
 import { shortNumberFormat } from 'pl-fe/utils/numbers';
 
 import type { Group } from 'pl-fe/normalizers';
diff --git a/packages/pl-fe/src/features/group/components/group-member-list-item.tsx b/packages/pl-fe/src/features/group/components/group-member-list-item.tsx
index 1f37165d7f..d43fc4ebd7 100644
--- a/packages/pl-fe/src/features/group/components/group-member-list-item.tsx
+++ b/packages/pl-fe/src/features/group/components/group-member-list-item.tsx
@@ -7,7 +7,7 @@ import { groupKick } from 'pl-fe/actions/groups';
 import { useAccount, useBlockGroupMember, useDemoteGroupMember, usePromoteGroupMember } from 'pl-fe/api/hooks';
 import Account from 'pl-fe/components/account';
 import DropdownMenu from 'pl-fe/components/dropdown-menu/dropdown-menu';
-import { HStack } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
 import { deleteEntities } from 'pl-fe/entity-store/actions';
 import { Entities } from 'pl-fe/entity-store/entities';
 import PlaceholderAccount from 'pl-fe/features/placeholder/components/placeholder-account';
diff --git a/packages/pl-fe/src/features/group/components/group-options-button.tsx b/packages/pl-fe/src/features/group/components/group-options-button.tsx
index fe1874d940..5b73cd78bf 100644
--- a/packages/pl-fe/src/features/group/components/group-options-button.tsx
+++ b/packages/pl-fe/src/features/group/components/group-options-button.tsx
@@ -4,7 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { useLeaveGroup } from 'pl-fe/api/hooks';
 import DropdownMenu, { Menu } from 'pl-fe/components/dropdown-menu';
-import { IconButton } from 'pl-fe/components/ui';
+import IconButton from 'pl-fe/components/ui/icon-button';
 import { useModalsStore } from 'pl-fe/stores';
 import toast from 'pl-fe/toast';
 
diff --git a/packages/pl-fe/src/features/group/components/group-relationship.tsx b/packages/pl-fe/src/features/group/components/group-relationship.tsx
index 2795a42384..85351a739c 100644
--- a/packages/pl-fe/src/features/group/components/group-relationship.tsx
+++ b/packages/pl-fe/src/features/group/components/group-relationship.tsx
@@ -2,7 +2,9 @@ import { GroupRoles, type Group } from 'pl-api';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { HStack, Icon, Text } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
+import Text from 'pl-fe/components/ui/text';
 
 interface IGroupRelationship {
   group: Pick<Group, 'relationship'>;
diff --git a/packages/pl-fe/src/features/group/group-gallery.tsx b/packages/pl-fe/src/features/group/group-gallery.tsx
index 71f3ee3b18..e094fc424d 100644
--- a/packages/pl-fe/src/features/group/group-gallery.tsx
+++ b/packages/pl-fe/src/features/group/group-gallery.tsx
@@ -4,7 +4,8 @@ import { FormattedMessage } from 'react-intl';
 import { useGroup, useGroupMedia } from 'pl-fe/api/hooks';
 import LoadMore from 'pl-fe/components/load-more';
 import MissingIndicator from 'pl-fe/components/missing-indicator';
-import { Column, Spinner } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
+import Spinner from 'pl-fe/components/ui/spinner';
 import { useModalsStore } from 'pl-fe/stores';
 
 import MediaItem from '../account-gallery/components/media-item';
diff --git a/packages/pl-fe/src/features/group/group-timeline.tsx b/packages/pl-fe/src/features/group/group-timeline.tsx
index be086c809c..aac10cb72e 100644
--- a/packages/pl-fe/src/features/group/group-timeline.tsx
+++ b/packages/pl-fe/src/features/group/group-timeline.tsx
@@ -6,7 +6,11 @@ import { Link } from 'react-router-dom';
 import { groupCompose, uploadCompose } from 'pl-fe/actions/compose';
 import { fetchGroupTimeline } from 'pl-fe/actions/timelines';
 import { useGroup, useGroupStream } from 'pl-fe/api/hooks';
-import { Avatar, HStack, Icon, Stack, Text } from 'pl-fe/components/ui';
+import Avatar from 'pl-fe/components/ui/avatar';
+import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import ComposeForm from 'pl-fe/features/compose/components/compose-form';
 import { useAppDispatch, useAppSelector, useDraggedFiles, useOwnAccount } from 'pl-fe/hooks';
 import { makeGetStatusIds } from 'pl-fe/selectors';
diff --git a/packages/pl-fe/src/features/groups/components/discover/group-list-item.tsx b/packages/pl-fe/src/features/groups/components/discover/group-list-item.tsx
index 7d981dae8c..fc96ba227e 100644
--- a/packages/pl-fe/src/features/groups/components/discover/group-list-item.tsx
+++ b/packages/pl-fe/src/features/groups/components/discover/group-list-item.tsx
@@ -3,7 +3,10 @@ import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import GroupAvatar from 'pl-fe/components/groups/group-avatar';
-import { HStack, Icon, Stack, Text } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import GroupActionButton from 'pl-fe/features/group/components/group-action-button';
 import { shortNumberFormat } from 'pl-fe/utils/numbers';
 
diff --git a/packages/pl-fe/src/features/groups/index.tsx b/packages/pl-fe/src/features/groups/index.tsx
index 8a76361d44..696d44dbb9 100644
--- a/packages/pl-fe/src/features/groups/index.tsx
+++ b/packages/pl-fe/src/features/groups/index.tsx
@@ -5,7 +5,9 @@ import { Link } from 'react-router-dom';
 import { useGroups } from 'pl-fe/api/hooks';
 import GroupCard from 'pl-fe/components/group-card';
 import ScrollableList from 'pl-fe/components/scrollable-list';
-import { Button, Stack, Text } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import { useModalsStore } from 'pl-fe/stores';
 
 import PlaceholderGroupCard from '../placeholder/components/placeholder-group-card';
diff --git a/packages/pl-fe/src/features/hashtag-timeline/index.tsx b/packages/pl-fe/src/features/hashtag-timeline/index.tsx
index dc24d85975..927eb74cca 100644
--- a/packages/pl-fe/src/features/hashtag-timeline/index.tsx
+++ b/packages/pl-fe/src/features/hashtag-timeline/index.tsx
@@ -5,7 +5,8 @@ import { fetchHashtag, followHashtag, unfollowHashtag } from 'pl-fe/actions/tags
 import { fetchHashtagTimeline, clearTimeline } from 'pl-fe/actions/timelines';
 import { useHashtagStream } from 'pl-fe/api/hooks';
 import List, { ListItem } from 'pl-fe/components/list';
-import { Column, Toggle } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
+import Toggle from 'pl-fe/components/ui/toggle';
 import Timeline from 'pl-fe/features/ui/components/timeline';
 import { useAppDispatch, useAppSelector, useFeatures, useLoggedIn, useTheme } from 'pl-fe/hooks';
 import { useIsMobile } from 'pl-fe/hooks/useIsMobile';
diff --git a/packages/pl-fe/src/features/import-data/index.tsx b/packages/pl-fe/src/features/import-data/index.tsx
index 5d260ffd66..8ce2fa394d 100644
--- a/packages/pl-fe/src/features/import-data/index.tsx
+++ b/packages/pl-fe/src/features/import-data/index.tsx
@@ -6,7 +6,7 @@ import {
   importBlocks,
   importMutes,
 } from 'pl-fe/actions/import-data';
-import { Column } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
 import { useFeatures } from 'pl-fe/hooks';
 
 import DataImporter from './components/data-importer';
diff --git a/packages/pl-fe/src/features/landing-timeline/components/site-banner.tsx b/packages/pl-fe/src/features/landing-timeline/components/site-banner.tsx
index 7e390b41f2..6e5be1e203 100644
--- a/packages/pl-fe/src/features/landing-timeline/components/site-banner.tsx
+++ b/packages/pl-fe/src/features/landing-timeline/components/site-banner.tsx
@@ -2,7 +2,7 @@ import DOMPurify from 'isomorphic-dompurify';
 import React, { useMemo } from 'react';
 
 import Markup from 'pl-fe/components/markup';
-import { Stack } from 'pl-fe/components/ui';
+import Stack from 'pl-fe/components/ui/stack';
 import { useInstance } from 'pl-fe/hooks';
 import { getTextDirection } from 'pl-fe/utils/rtl';
 
diff --git a/packages/pl-fe/src/features/landing-timeline/index.tsx b/packages/pl-fe/src/features/landing-timeline/index.tsx
index 725d738f08..1718f5140e 100644
--- a/packages/pl-fe/src/features/landing-timeline/index.tsx
+++ b/packages/pl-fe/src/features/landing-timeline/index.tsx
@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 import { fetchPublicTimeline } from 'pl-fe/actions/timelines';
 import { useCommunityStream } from 'pl-fe/api/hooks';
 import PullToRefresh from 'pl-fe/components/pull-to-refresh';
-import { Column } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
 import { useAppDispatch, useInstance, useTheme } from 'pl-fe/hooks';
 import { useIsMobile } from 'pl-fe/hooks/useIsMobile';
 
diff --git a/packages/pl-fe/src/features/mutes/index.tsx b/packages/pl-fe/src/features/mutes/index.tsx
index 6fcfff55ee..78c216b1dc 100644
--- a/packages/pl-fe/src/features/mutes/index.tsx
+++ b/packages/pl-fe/src/features/mutes/index.tsx
@@ -3,7 +3,8 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
 import { useMutes } from 'pl-fe/api/hooks';
 import ScrollableList from 'pl-fe/components/scrollable-list';
-import { Column, Stack } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
+import Stack from 'pl-fe/components/ui/stack';
 import AccountContainer from 'pl-fe/containers/account-container';
 
 const messages = defineMessages({
diff --git a/packages/pl-fe/src/features/notifications/components/setting-toggle.tsx b/packages/pl-fe/src/features/notifications/components/setting-toggle.tsx
index 6953ad530a..d3fa090163 100644
--- a/packages/pl-fe/src/features/notifications/components/setting-toggle.tsx
+++ b/packages/pl-fe/src/features/notifications/components/setting-toggle.tsx
@@ -1,7 +1,7 @@
 import get from 'lodash/get';
 import React from 'react';
 
-import { Toggle } from 'pl-fe/components/ui';
+import Toggle from 'pl-fe/components/ui/toggle';
 import { Settings } from 'pl-fe/schemas/pl-fe/settings';
 
 interface ISettingToggle {
diff --git a/packages/pl-fe/src/features/onboarding/onboarding-wizard.tsx b/packages/pl-fe/src/features/onboarding/onboarding-wizard.tsx
index ea5c9351a0..8421cb20fa 100644
--- a/packages/pl-fe/src/features/onboarding/onboarding-wizard.tsx
+++ b/packages/pl-fe/src/features/onboarding/onboarding-wizard.tsx
@@ -4,7 +4,7 @@ import ReactSwipeableViews from 'react-swipeable-views';
 
 import { endOnboarding } from 'pl-fe/actions/onboarding';
 import LandingGradient from 'pl-fe/components/landing-gradient';
-import { HStack } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
 import { useAppDispatch, useFeatures } from 'pl-fe/hooks';
 
 import AvatarSelectionStep from './steps/avatar-selection-step';
diff --git a/packages/pl-fe/src/features/onboarding/steps/avatar-selection-step.tsx b/packages/pl-fe/src/features/onboarding/steps/avatar-selection-step.tsx
index d7ef5b9b1e..09461b78c1 100644
--- a/packages/pl-fe/src/features/onboarding/steps/avatar-selection-step.tsx
+++ b/packages/pl-fe/src/features/onboarding/steps/avatar-selection-step.tsx
@@ -4,7 +4,11 @@ import { defineMessages, FormattedMessage } from 'react-intl';
 
 import { patchMe } from 'pl-fe/actions/me';
 import { BigCard } from 'pl-fe/components/big-card';
-import { Avatar, Button, Icon, Spinner, Stack } from 'pl-fe/components/ui';
+import Avatar from 'pl-fe/components/ui/avatar';
+import Button from 'pl-fe/components/ui/button';
+import Icon from 'pl-fe/components/ui/icon';
+import Spinner from 'pl-fe/components/ui/spinner';
+import Stack from 'pl-fe/components/ui/stack';
 import { useAppDispatch, useOwnAccount } from 'pl-fe/hooks';
 import toast from 'pl-fe/toast';
 import { isDefaultAvatar } from 'pl-fe/utils/accounts';
diff --git a/packages/pl-fe/src/features/onboarding/steps/cover-photo-selection-step.tsx b/packages/pl-fe/src/features/onboarding/steps/cover-photo-selection-step.tsx
index ef4a3dc19a..eadd306c56 100644
--- a/packages/pl-fe/src/features/onboarding/steps/cover-photo-selection-step.tsx
+++ b/packages/pl-fe/src/features/onboarding/steps/cover-photo-selection-step.tsx
@@ -5,7 +5,12 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { patchMe } from 'pl-fe/actions/me';
 import { BigCard } from 'pl-fe/components/big-card';
 import StillImage from 'pl-fe/components/still-image';
-import { Avatar, Button, Icon, Spinner, Stack, Text } from 'pl-fe/components/ui';
+import Avatar from 'pl-fe/components/ui/avatar';
+import Button from 'pl-fe/components/ui/button';
+import Icon from 'pl-fe/components/ui/icon';
+import Spinner from 'pl-fe/components/ui/spinner';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import { useAppDispatch, useOwnAccount } from 'pl-fe/hooks';
 import toast from 'pl-fe/toast';
 import { isDefaultHeader } from 'pl-fe/utils/accounts';
diff --git a/packages/pl-fe/src/features/onboarding/steps/suggested-accounts-step.tsx b/packages/pl-fe/src/features/onboarding/steps/suggested-accounts-step.tsx
index 02681b36b7..3ccc075c0f 100644
--- a/packages/pl-fe/src/features/onboarding/steps/suggested-accounts-step.tsx
+++ b/packages/pl-fe/src/features/onboarding/steps/suggested-accounts-step.tsx
@@ -3,7 +3,9 @@ import { FormattedMessage } from 'react-intl';
 
 import { BigCard } from 'pl-fe/components/big-card';
 import ScrollableList from 'pl-fe/components/scrollable-list';
-import { Button, Stack, Text } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import AccountContainer from 'pl-fe/containers/account-container';
 import { useOnboardingSuggestions } from 'pl-fe/queries/suggestions';
 
diff --git a/packages/pl-fe/src/features/pinned-statuses/index.tsx b/packages/pl-fe/src/features/pinned-statuses/index.tsx
index 3e4828022a..402f36cef4 100644
--- a/packages/pl-fe/src/features/pinned-statuses/index.tsx
+++ b/packages/pl-fe/src/features/pinned-statuses/index.tsx
@@ -5,7 +5,7 @@ import { useParams } from 'react-router-dom';
 import { fetchPinnedStatuses } from 'pl-fe/actions/pin-statuses';
 import MissingIndicator from 'pl-fe/components/missing-indicator';
 import StatusList from 'pl-fe/components/status-list';
-import { Column } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
 import { selectOwnAccount } from 'pl-fe/selectors';
 
diff --git a/packages/pl-fe/src/features/pl-fe-config/components/color-picker.tsx b/packages/pl-fe/src/features/pl-fe-config/components/color-picker.tsx
index 87545c76a0..888e331dd9 100644
--- a/packages/pl-fe/src/features/pl-fe-config/components/color-picker.tsx
+++ b/packages/pl-fe/src/features/pl-fe-config/components/color-picker.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { SketchPicker, type ColorChangeHandler } from 'react-color';
 
-import { Popover } from 'pl-fe/components/ui';
+import Popover from 'pl-fe/components/ui/popover';
 
 interface IColorPicker {
   value: string;
diff --git a/packages/pl-fe/src/features/pl-fe-config/components/crypto-address-input.tsx b/packages/pl-fe/src/features/pl-fe-config/components/crypto-address-input.tsx
index 9d3d4faa5a..83bc8ea3eb 100644
--- a/packages/pl-fe/src/features/pl-fe-config/components/crypto-address-input.tsx
+++ b/packages/pl-fe/src/features/pl-fe-config/components/crypto-address-input.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
-import { HStack, Input } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Input from 'pl-fe/components/ui/input';
 
 import type { StreamfieldComponent } from 'pl-fe/components/ui/streamfield';
 import type { CryptoAddress } from 'pl-fe/types/pl-fe';
diff --git a/packages/pl-fe/src/features/pl-fe-config/components/footer-link-input.tsx b/packages/pl-fe/src/features/pl-fe-config/components/footer-link-input.tsx
index 0af7bb1f5a..587573732c 100644
--- a/packages/pl-fe/src/features/pl-fe-config/components/footer-link-input.tsx
+++ b/packages/pl-fe/src/features/pl-fe-config/components/footer-link-input.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
-import { HStack, Input } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Input from 'pl-fe/components/ui/input';
 
 import type { StreamfieldComponent } from 'pl-fe/components/ui/streamfield';
 import type { FooterItem } from 'pl-fe/types/pl-fe';
diff --git a/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-dropdown.tsx b/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-dropdown.tsx
index e8b5c3c695..d2b5d3505b 100644
--- a/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-dropdown.tsx
+++ b/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-dropdown.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import ForkAwesomeIcon from 'pl-fe/components/fork-awesome-icon';
-import { Popover } from 'pl-fe/components/ui';
+import Popover from 'pl-fe/components/ui/popover';
 
 import IconPickerMenu from './icon-picker-menu';
 
diff --git a/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-menu.tsx b/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-menu.tsx
index bf3a6a4d0d..4ffd90b6ae 100644
--- a/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-menu.tsx
+++ b/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-menu.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { Text } from 'pl-fe/components/ui';
+import Text from 'pl-fe/components/ui/text';
 
 const messages = defineMessages({
   emoji: { id: 'icon_button.label', defaultMessage: 'Select icon' },
diff --git a/packages/pl-fe/src/features/pl-fe-config/components/promo-panel-input.tsx b/packages/pl-fe/src/features/pl-fe-config/components/promo-panel-input.tsx
index 5f621a14d7..de5284e9b6 100644
--- a/packages/pl-fe/src/features/pl-fe-config/components/promo-panel-input.tsx
+++ b/packages/pl-fe/src/features/pl-fe-config/components/promo-panel-input.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
-import { HStack, Input } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Input from 'pl-fe/components/ui/input';
 
 import IconPicker from './icon-picker';
 
diff --git a/packages/pl-fe/src/features/placeholder/components/placeholder-account.tsx b/packages/pl-fe/src/features/placeholder/components/placeholder-account.tsx
index 40697489ef..eecff16810 100644
--- a/packages/pl-fe/src/features/placeholder/components/placeholder-account.tsx
+++ b/packages/pl-fe/src/features/placeholder/components/placeholder-account.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { HStack } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
 
 import PlaceholderAvatar from './placeholder-avatar';
 import PlaceholderDisplayName from './placeholder-display-name';
diff --git a/packages/pl-fe/src/features/placeholder/components/placeholder-avatar.tsx b/packages/pl-fe/src/features/placeholder/components/placeholder-avatar.tsx
index d3d730d73b..9c6486b6db 100644
--- a/packages/pl-fe/src/features/placeholder/components/placeholder-avatar.tsx
+++ b/packages/pl-fe/src/features/placeholder/components/placeholder-avatar.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
 
-import { Stack } from 'pl-fe/components/ui';
+import Stack from 'pl-fe/components/ui/stack';
 
 interface IPlaceholderAvatar {
   size: number;
diff --git a/packages/pl-fe/src/features/placeholder/components/placeholder-chat-message.tsx b/packages/pl-fe/src/features/placeholder/components/placeholder-chat-message.tsx
index ff6efe798f..8d4e1b5e93 100644
--- a/packages/pl-fe/src/features/placeholder/components/placeholder-chat-message.tsx
+++ b/packages/pl-fe/src/features/placeholder/components/placeholder-chat-message.tsx
@@ -1,7 +1,9 @@
 import clsx from 'clsx';
 import React from 'react';
 
-import { HStack, Stack, Text } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 
 import { randomIntFromInterval } from '../utils';
 
diff --git a/packages/pl-fe/src/features/placeholder/components/placeholder-chat.tsx b/packages/pl-fe/src/features/placeholder/components/placeholder-chat.tsx
index b178da6f12..d879c6fd88 100644
--- a/packages/pl-fe/src/features/placeholder/components/placeholder-chat.tsx
+++ b/packages/pl-fe/src/features/placeholder/components/placeholder-chat.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { HStack, Stack } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Stack from 'pl-fe/components/ui/stack';
 
 import PlaceholderAvatar from './placeholder-avatar';
 import PlaceholderDisplayName from './placeholder-display-name';
diff --git a/packages/pl-fe/src/features/placeholder/components/placeholder-event-header.tsx b/packages/pl-fe/src/features/placeholder/components/placeholder-event-header.tsx
index 185fe88bd6..9176c95313 100644
--- a/packages/pl-fe/src/features/placeholder/components/placeholder-event-header.tsx
+++ b/packages/pl-fe/src/features/placeholder/components/placeholder-event-header.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Stack } from 'pl-fe/components/ui';
+import Stack from 'pl-fe/components/ui/stack';
 
 import { generateText, randomIntFromInterval } from '../utils';
 
diff --git a/packages/pl-fe/src/features/placeholder/components/placeholder-event-preview.tsx b/packages/pl-fe/src/features/placeholder/components/placeholder-event-preview.tsx
index 5b229b8dd8..25ab30ed28 100644
--- a/packages/pl-fe/src/features/placeholder/components/placeholder-event-preview.tsx
+++ b/packages/pl-fe/src/features/placeholder/components/placeholder-event-preview.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Stack, Text } from 'pl-fe/components/ui';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 
 import { generateText, randomIntFromInterval } from '../utils';
 
diff --git a/packages/pl-fe/src/features/placeholder/components/placeholder-group-card.tsx b/packages/pl-fe/src/features/placeholder/components/placeholder-group-card.tsx
index 23f4576bb9..cd6262d2e2 100644
--- a/packages/pl-fe/src/features/placeholder/components/placeholder-group-card.tsx
+++ b/packages/pl-fe/src/features/placeholder/components/placeholder-group-card.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 
-import { HStack, Stack, Text } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 
 import { generateText, randomIntFromInterval } from '../utils';
 
diff --git a/packages/pl-fe/src/features/placeholder/components/placeholder-group-search.tsx b/packages/pl-fe/src/features/placeholder/components/placeholder-group-search.tsx
index 1bf90356df..b4528d5979 100644
--- a/packages/pl-fe/src/features/placeholder/components/placeholder-group-search.tsx
+++ b/packages/pl-fe/src/features/placeholder/components/placeholder-group-search.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 
-import { HStack, Stack, Text } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 
 import { generateText, randomIntFromInterval } from '../utils';
 
diff --git a/packages/pl-fe/src/features/placeholder/components/placeholder-notification.tsx b/packages/pl-fe/src/features/placeholder/components/placeholder-notification.tsx
index 4d75f38688..448cf3eb64 100644
--- a/packages/pl-fe/src/features/placeholder/components/placeholder-notification.tsx
+++ b/packages/pl-fe/src/features/placeholder/components/placeholder-notification.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { HStack } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
 
 import PlaceholderAvatar from './placeholder-avatar';
 import PlaceholderDisplayName from './placeholder-display-name';
diff --git a/packages/pl-fe/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx b/packages/pl-fe/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx
index 24a33ece35..b80556549e 100644
--- a/packages/pl-fe/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx
+++ b/packages/pl-fe/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { HStack, Stack } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Stack from 'pl-fe/components/ui/stack';
 
 import { randomIntFromInterval, generateText } from '../utils';
 
diff --git a/packages/pl-fe/src/features/placeholder/components/placeholder-sidebar-trends.tsx b/packages/pl-fe/src/features/placeholder/components/placeholder-sidebar-trends.tsx
index 96125985a6..d0a5f2ee5a 100644
--- a/packages/pl-fe/src/features/placeholder/components/placeholder-sidebar-trends.tsx
+++ b/packages/pl-fe/src/features/placeholder/components/placeholder-sidebar-trends.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Stack } from 'pl-fe/components/ui';
+import Stack from 'pl-fe/components/ui/stack';
 
 import { randomIntFromInterval, generateText } from '../utils';
 
diff --git a/packages/pl-fe/src/features/placeholder/components/placeholder-status.tsx b/packages/pl-fe/src/features/placeholder/components/placeholder-status.tsx
index 998a97850e..964bca5817 100644
--- a/packages/pl-fe/src/features/placeholder/components/placeholder-status.tsx
+++ b/packages/pl-fe/src/features/placeholder/components/placeholder-status.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
 
-import { HStack } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
 
 import PlaceholderAvatar from './placeholder-avatar';
 import PlaceholderDisplayName from './placeholder-display-name';
diff --git a/packages/pl-fe/src/features/preferences/index.tsx b/packages/pl-fe/src/features/preferences/index.tsx
index 3440252f26..155b852e1d 100644
--- a/packages/pl-fe/src/features/preferences/index.tsx
+++ b/packages/pl-fe/src/features/preferences/index.tsx
@@ -4,7 +4,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { changeSetting } from 'pl-fe/actions/settings';
 import List, { ListItem } from 'pl-fe/components/list';
-import { Form } from 'pl-fe/components/ui';
+import Form from 'pl-fe/components/ui/form';
 import { Mutliselect, SelectDropdown } from 'pl-fe/features/forms';
 import SettingToggle from 'pl-fe/features/notifications/components/setting-toggle';
 import { useAppDispatch, useFeatures, useSettings } from 'pl-fe/hooks';
diff --git a/packages/pl-fe/src/features/public-timeline/index.tsx b/packages/pl-fe/src/features/public-timeline/index.tsx
index 37a2a8e135..29b8770344 100644
--- a/packages/pl-fe/src/features/public-timeline/index.tsx
+++ b/packages/pl-fe/src/features/public-timeline/index.tsx
@@ -6,7 +6,8 @@ import { changeSetting } from 'pl-fe/actions/settings';
 import { fetchPublicTimeline } from 'pl-fe/actions/timelines';
 import { usePublicStream } from 'pl-fe/api/hooks';
 import PullToRefresh from 'pl-fe/components/pull-to-refresh';
-import { Accordion, Column } from 'pl-fe/components/ui';
+import Accordion from 'pl-fe/components/ui/accordion';
+import Column from 'pl-fe/components/ui/column';
 import { useAppDispatch, useInstance, useSettings, useTheme } from 'pl-fe/hooks';
 import { useIsMobile } from 'pl-fe/hooks/useIsMobile';
 
diff --git a/packages/pl-fe/src/features/quotes/index.tsx b/packages/pl-fe/src/features/quotes/index.tsx
index 29269afc05..3a8803122b 100644
--- a/packages/pl-fe/src/features/quotes/index.tsx
+++ b/packages/pl-fe/src/features/quotes/index.tsx
@@ -6,7 +6,7 @@ import { useParams } from 'react-router-dom';
 
 import { expandStatusQuotes, fetchStatusQuotes } from 'pl-fe/actions/status-quotes';
 import StatusList from 'pl-fe/components/status-list';
-import { Column } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
 import { useAppDispatch, useAppSelector, useTheme } from 'pl-fe/hooks';
 import { useIsMobile } from 'pl-fe/hooks/useIsMobile';
 
diff --git a/packages/pl-fe/src/features/remote-timeline/components/pinned-hosts-picker.tsx b/packages/pl-fe/src/features/remote-timeline/components/pinned-hosts-picker.tsx
index e7536c2165..0656acfc45 100644
--- a/packages/pl-fe/src/features/remote-timeline/components/pinned-hosts-picker.tsx
+++ b/packages/pl-fe/src/features/remote-timeline/components/pinned-hosts-picker.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Button, HStack } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import HStack from 'pl-fe/components/ui/hstack';
 import { useSettings } from 'pl-fe/hooks';
 
 interface IPinnedHostsPicker {
diff --git a/packages/pl-fe/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx b/packages/pl-fe/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
index 138194164c..8d1c44f480 100644
--- a/packages/pl-fe/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
+++ b/packages/pl-fe/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { cancelScheduledStatus } from 'pl-fe/actions/scheduled-statuses';
-import { Button, HStack } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import HStack from 'pl-fe/components/ui/hstack';
 import { useAppDispatch } from 'pl-fe/hooks';
 import { useModalsStore, useSettingsStore } from 'pl-fe/stores';
 
diff --git a/packages/pl-fe/src/features/scheduled-statuses/components/scheduled-status.tsx b/packages/pl-fe/src/features/scheduled-statuses/components/scheduled-status.tsx
index fb3b996730..3b77da5076 100644
--- a/packages/pl-fe/src/features/scheduled-statuses/components/scheduled-status.tsx
+++ b/packages/pl-fe/src/features/scheduled-statuses/components/scheduled-status.tsx
@@ -5,7 +5,8 @@ import Account from 'pl-fe/components/account';
 import AttachmentThumbs from 'pl-fe/components/attachment-thumbs';
 import StatusContent from 'pl-fe/components/status-content';
 import StatusReplyMentions from 'pl-fe/components/status-reply-mentions';
-import { HStack, Stack } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Stack from 'pl-fe/components/ui/stack';
 import PollPreview from 'pl-fe/features/ui/components/poll-preview';
 import { useAppSelector } from 'pl-fe/hooks';
 
diff --git a/packages/pl-fe/src/features/scheduled-statuses/index.tsx b/packages/pl-fe/src/features/scheduled-statuses/index.tsx
index fcaa86f964..f4e511095d 100644
--- a/packages/pl-fe/src/features/scheduled-statuses/index.tsx
+++ b/packages/pl-fe/src/features/scheduled-statuses/index.tsx
@@ -4,7 +4,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchScheduledStatuses, expandScheduledStatuses } from 'pl-fe/actions/scheduled-statuses';
 import ScrollableList from 'pl-fe/components/scrollable-list';
-import { Column } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
 import { useAppSelector, useAppDispatch } from 'pl-fe/hooks';
 
 import ScheduledStatus from './components/scheduled-status';
diff --git a/packages/pl-fe/src/features/search/components/search.tsx b/packages/pl-fe/src/features/search/components/search.tsx
index ac57ab571c..77b3ad99ab 100644
--- a/packages/pl-fe/src/features/search/components/search.tsx
+++ b/packages/pl-fe/src/features/search/components/search.tsx
@@ -12,7 +12,7 @@ import {
   submitSearch,
 } from 'pl-fe/actions/search';
 import AutosuggestAccountInput from 'pl-fe/components/autosuggest-account-input';
-import { Input } from 'pl-fe/components/ui';
+import Input from 'pl-fe/components/ui/input';
 import SvgIcon from 'pl-fe/components/ui/svg-icon';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
 import { selectAccount } from 'pl-fe/selectors';
diff --git a/packages/pl-fe/src/features/search/index.tsx b/packages/pl-fe/src/features/search/index.tsx
index d57af490dd..123f596ab0 100644
--- a/packages/pl-fe/src/features/search/index.tsx
+++ b/packages/pl-fe/src/features/search/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Column } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
 import Search from 'pl-fe/features/search/components/search';
 import SearchResults from 'pl-fe/features/search/components/search-results';
 
diff --git a/packages/pl-fe/src/features/security/mfa-form.tsx b/packages/pl-fe/src/features/security/mfa-form.tsx
index 687a7cdcde..48ded8ba9f 100644
--- a/packages/pl-fe/src/features/security/mfa-form.tsx
+++ b/packages/pl-fe/src/features/security/mfa-form.tsx
@@ -2,7 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { fetchMfa } from 'pl-fe/actions/mfa';
-import { Column, Stack } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
+import Stack from 'pl-fe/components/ui/stack';
 import { useAppSelector, useAppDispatch } from 'pl-fe/hooks';
 
 import DisableOtpForm from './mfa/disable-otp-form';
diff --git a/packages/pl-fe/src/features/security/mfa/enable-otp-form.tsx b/packages/pl-fe/src/features/security/mfa/enable-otp-form.tsx
index b4b67d53f3..879b455681 100644
--- a/packages/pl-fe/src/features/security/mfa/enable-otp-form.tsx
+++ b/packages/pl-fe/src/features/security/mfa/enable-otp-form.tsx
@@ -3,7 +3,11 @@ import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import { fetchBackupCodes } from 'pl-fe/actions/mfa';
-import { Button, FormActions, Spinner, Stack, Text } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import FormActions from 'pl-fe/components/ui/form-actions';
+import Spinner from 'pl-fe/components/ui/spinner';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import { useAppDispatch } from 'pl-fe/hooks';
 import toast from 'pl-fe/toast';
 
diff --git a/packages/pl-fe/src/features/security/mfa/otp-confirm-form.tsx b/packages/pl-fe/src/features/security/mfa/otp-confirm-form.tsx
index dd9f5fd060..e482329960 100644
--- a/packages/pl-fe/src/features/security/mfa/otp-confirm-form.tsx
+++ b/packages/pl-fe/src/features/security/mfa/otp-confirm-form.tsx
@@ -4,7 +4,13 @@ import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import { setupMfa, confirmMfa } from 'pl-fe/actions/mfa';
-import { Button, Form, FormActions, FormGroup, Input, Stack, Text } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import Form from 'pl-fe/components/ui/form';
+import FormActions from 'pl-fe/components/ui/form-actions';
+import FormGroup from 'pl-fe/components/ui/form-group';
+import Input from 'pl-fe/components/ui/input';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import { useAppDispatch } from 'pl-fe/hooks';
 import toast from 'pl-fe/toast';
 
diff --git a/packages/pl-fe/src/features/server-info/index.tsx b/packages/pl-fe/src/features/server-info/index.tsx
index 18414f10ce..ec5c8ac7a0 100644
--- a/packages/pl-fe/src/features/server-info/index.tsx
+++ b/packages/pl-fe/src/features/server-info/index.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Column, Divider, Stack, Text } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
+import Divider from 'pl-fe/components/ui/divider';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import { useInstance } from 'pl-fe/hooks';
 
 import LinkFooter from '../ui/components/link-footer';
diff --git a/packages/pl-fe/src/features/settings/components/messages-settings.tsx b/packages/pl-fe/src/features/settings/components/messages-settings.tsx
index ef8f09ea73..b234c169fe 100644
--- a/packages/pl-fe/src/features/settings/components/messages-settings.tsx
+++ b/packages/pl-fe/src/features/settings/components/messages-settings.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import List, { ListItem } from 'pl-fe/components/list';
-import { Toggle } from 'pl-fe/components/ui';
+import Toggle from 'pl-fe/components/ui/toggle';
 import { useOwnAccount } from 'pl-fe/hooks';
 import { useUpdateCredentials } from 'pl-fe/queries/accounts';
 
diff --git a/packages/pl-fe/src/features/settings/index.tsx b/packages/pl-fe/src/features/settings/index.tsx
index c6946ead01..52c2ee7d01 100644
--- a/packages/pl-fe/src/features/settings/index.tsx
+++ b/packages/pl-fe/src/features/settings/index.tsx
@@ -3,7 +3,9 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchMfa } from 'pl-fe/actions/mfa';
 import List, { ListItem } from 'pl-fe/components/list';
-import { Card, CardBody, CardHeader, CardTitle, Column, Text } from 'pl-fe/components/ui';
+import Card, { CardBody, CardHeader, CardTitle } from 'pl-fe/components/ui/card';
+import Column from 'pl-fe/components/ui/column';
+import Text from 'pl-fe/components/ui/text';
 import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'pl-fe/hooks';
 
 import Preferences from '../preferences';
diff --git a/packages/pl-fe/src/features/status/components/detailed-status.tsx b/packages/pl-fe/src/features/status/components/detailed-status.tsx
index 728b5db952..71854c6cb9 100644
--- a/packages/pl-fe/src/features/status/components/detailed-status.tsx
+++ b/packages/pl-fe/src/features/status/components/detailed-status.tsx
@@ -11,7 +11,10 @@ import StatusReplyMentions from 'pl-fe/components/status-reply-mentions';
 import SensitiveContentOverlay from 'pl-fe/components/statuses/sensitive-content-overlay';
 import StatusInfo from 'pl-fe/components/statuses/status-info';
 import TranslateButton from 'pl-fe/components/translate-button';
-import { HStack, Icon, Stack, Text } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import QuotedStatus from 'pl-fe/features/status/containers/quoted-status-container';
 
 import StatusInteractionBar from './status-interaction-bar';
diff --git a/packages/pl-fe/src/features/status/components/status-interaction-bar.tsx b/packages/pl-fe/src/features/status/components/status-interaction-bar.tsx
index 92292b2a46..1770ec3c9d 100644
--- a/packages/pl-fe/src/features/status/components/status-interaction-bar.tsx
+++ b/packages/pl-fe/src/features/status/components/status-interaction-bar.tsx
@@ -1,9 +1,11 @@
-import clsx from 'clsx';import React from 'react';
+import clsx from 'clsx';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import AnimatedNumber from 'pl-fe/components/animated-number';
-import { HStack, Text } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Text from 'pl-fe/components/ui/text';
 import { useFeatures } from 'pl-fe/hooks';
 import { useModalsStore } from 'pl-fe/stores';
 
diff --git a/packages/pl-fe/src/features/status/components/status-type-icon.tsx b/packages/pl-fe/src/features/status/components/status-type-icon.tsx
index 7b67a37185..1f7f5a6e27 100644
--- a/packages/pl-fe/src/features/status/components/status-type-icon.tsx
+++ b/packages/pl-fe/src/features/status/components/status-type-icon.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { defineMessages, MessageDescriptor, useIntl } from 'react-intl';
 
-import { Icon, Text } from 'pl-fe/components/ui';
+import Icon from 'pl-fe/components/ui/icon';
+import Text from 'pl-fe/components/ui/text';
 
 import type { Status } from 'pl-fe/normalizers';
 
diff --git a/packages/pl-fe/src/features/status/components/thread-login-cta.tsx b/packages/pl-fe/src/features/status/components/thread-login-cta.tsx
index 2018fb173d..9ceeb84f28 100644
--- a/packages/pl-fe/src/features/status/components/thread-login-cta.tsx
+++ b/packages/pl-fe/src/features/status/components/thread-login-cta.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Card, CardTitle, Text, Stack, Button } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import Card, { CardTitle } from 'pl-fe/components/ui/card';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import { useInstance, usePlFeConfig } from 'pl-fe/hooks';
 
 /** Prompts logged-out users to log in when viewing a thread. */
diff --git a/packages/pl-fe/src/features/status/components/thread.tsx b/packages/pl-fe/src/features/status/components/thread.tsx
index 840ee6dac9..30fa8b5038 100644
--- a/packages/pl-fe/src/features/status/components/thread.tsx
+++ b/packages/pl-fe/src/features/status/components/thread.tsx
@@ -12,7 +12,7 @@ import { toggleStatusMediaHidden } from 'pl-fe/actions/statuses';
 import ScrollableList from 'pl-fe/components/scrollable-list';
 import StatusActionBar from 'pl-fe/components/status-action-bar';
 import Tombstone from 'pl-fe/components/tombstone';
-import { Stack } from 'pl-fe/components/ui';
+import Stack from 'pl-fe/components/ui/stack';
 import PlaceholderStatus from 'pl-fe/features/placeholder/components/placeholder-status';
 import { HotKeys } from 'pl-fe/features/ui/components/hotkeys';
 import PendingStatus from 'pl-fe/features/ui/components/pending-status';
diff --git a/packages/pl-fe/src/features/status/index.tsx b/packages/pl-fe/src/features/status/index.tsx
index e77467c320..b9117a95b9 100644
--- a/packages/pl-fe/src/features/status/index.tsx
+++ b/packages/pl-fe/src/features/status/index.tsx
@@ -5,7 +5,8 @@ import { Redirect } from 'react-router-dom';
 import { fetchStatusWithContext } from 'pl-fe/actions/statuses';
 import MissingIndicator from 'pl-fe/components/missing-indicator';
 import PullToRefresh from 'pl-fe/components/pull-to-refresh';
-import { Column, Stack } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
+import Stack from 'pl-fe/components/ui/stack';
 import PlaceholderStatus from 'pl-fe/features/placeholder/components/placeholder-status';
 import { useAppDispatch, useAppSelector, useLoggedIn } from 'pl-fe/hooks';
 import { makeGetStatus } from 'pl-fe/selectors';
diff --git a/packages/pl-fe/src/features/test-timeline/index.tsx b/packages/pl-fe/src/features/test-timeline/index.tsx
index 74c8006a01..e8e256a706 100644
--- a/packages/pl-fe/src/features/test-timeline/index.tsx
+++ b/packages/pl-fe/src/features/test-timeline/index.tsx
@@ -3,12 +3,11 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
 import { importFetchedStatuses } from 'pl-fe/actions/importer';
 import { expandTimelineSuccess } from 'pl-fe/actions/timelines';
+import Column from 'pl-fe/components/ui/column';
+import Timeline from 'pl-fe/features/ui/components/timeline';
 import { useAppDispatch, useTheme } from 'pl-fe/hooks';
 import { useIsMobile } from 'pl-fe/hooks/useIsMobile';
 
-import { Column } from '../../components/ui';
-import Timeline from '../ui/components/timeline';
-
 const messages = defineMessages({
   title: { id: 'column.test', defaultMessage: 'Test timeline' },
 });
diff --git a/packages/pl-fe/src/features/theme-editor/components/palette.tsx b/packages/pl-fe/src/features/theme-editor/components/palette.tsx
index ba3a763f68..b5e44cbe28 100644
--- a/packages/pl-fe/src/features/theme-editor/components/palette.tsx
+++ b/packages/pl-fe/src/features/theme-editor/components/palette.tsx
@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from 'react';
 
-import { HStack, Stack, Slider } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Stack from 'pl-fe/components/ui/stack';
+import Slider from 'pl-fe/components/ui/slider';
 import { usePrevious } from 'pl-fe/hooks';
 import { compareId } from 'pl-fe/utils/comparators';
 import { hueShift } from 'pl-fe/utils/theme';
diff --git a/packages/pl-fe/src/features/theme-editor/index.tsx b/packages/pl-fe/src/features/theme-editor/index.tsx
index 40ddf34d68..e26bcf0be2 100644
--- a/packages/pl-fe/src/features/theme-editor/index.tsx
+++ b/packages/pl-fe/src/features/theme-editor/index.tsx
@@ -6,7 +6,10 @@ import { getHost } from 'pl-fe/actions/instance';
 import { fetchPlFeConfig } from 'pl-fe/actions/pl-fe';
 import DropdownMenu from 'pl-fe/components/dropdown-menu';
 import List, { ListItem } from 'pl-fe/components/list';
-import { Button, Column, Form, FormActions } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import Column from 'pl-fe/components/ui/column';
+import Form from 'pl-fe/components/ui/form';
+import FormActions from 'pl-fe/components/ui/form-actions';
 import ColorPicker from 'pl-fe/features/pl-fe-config/components/color-picker';
 import { useAppDispatch, useAppSelector, usePlFeConfig } from 'pl-fe/hooks';
 import { normalizePlFeConfig } from 'pl-fe/normalizers';
diff --git a/packages/pl-fe/src/features/ui/components/action-button.tsx b/packages/pl-fe/src/features/ui/components/action-button.tsx
index 3828dde6dd..10ffc5b843 100644
--- a/packages/pl-fe/src/features/ui/components/action-button.tsx
+++ b/packages/pl-fe/src/features/ui/components/action-button.tsx
@@ -11,7 +11,8 @@ import {
   biteAccount,
 } from 'pl-fe/actions/accounts';
 import { useFollow } from 'pl-fe/api/hooks';
-import { Button, HStack } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import HStack from 'pl-fe/components/ui/hstack';
 import { useAppDispatch, useFeatures, useLoggedIn } from 'pl-fe/hooks';
 import { useModalsStore } from 'pl-fe/stores';
 import toast from 'pl-fe/toast';
diff --git a/packages/pl-fe/src/features/ui/components/column-forbidden.tsx b/packages/pl-fe/src/features/ui/components/column-forbidden.tsx
index 3aab3dfbcf..06ebadbfc7 100644
--- a/packages/pl-fe/src/features/ui/components/column-forbidden.tsx
+++ b/packages/pl-fe/src/features/ui/components/column-forbidden.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Column } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
 
 const messages = defineMessages({
   title: { id: 'column_forbidden.title', defaultMessage: 'Forbidden' },
diff --git a/packages/pl-fe/src/features/ui/components/column-loading.tsx b/packages/pl-fe/src/features/ui/components/column-loading.tsx
index 61d2a24f01..7c260700cc 100644
--- a/packages/pl-fe/src/features/ui/components/column-loading.tsx
+++ b/packages/pl-fe/src/features/ui/components/column-loading.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Card, CardBody, Spinner } from 'pl-fe/components/ui';
+import Card, { CardBody } from 'pl-fe/components/ui/card';
+import Spinner from 'pl-fe/components/ui/spinner';
 
 const ColumnLoading = () => (
   <Card variant='rounded'>
diff --git a/packages/pl-fe/src/features/ui/components/compose-button.tsx b/packages/pl-fe/src/features/ui/components/compose-button.tsx
index d44b1ef1f0..f06887989c 100644
--- a/packages/pl-fe/src/features/ui/components/compose-button.tsx
+++ b/packages/pl-fe/src/features/ui/components/compose-button.tsx
@@ -4,7 +4,9 @@ import { useLocation, useRouteMatch } from 'react-router-dom';
 
 import { groupComposeModal } from 'pl-fe/actions/compose';
 import { useGroup } from 'pl-fe/api/hooks';
-import { Avatar, Button, HStack } from 'pl-fe/components/ui';
+import Avatar from 'pl-fe/components/ui/avatar';
+import Button from 'pl-fe/components/ui/button';
+import HStack from 'pl-fe/components/ui/hstack';
 import { useAppDispatch } from 'pl-fe/hooks';
 import { useModalsStore } from 'pl-fe/stores';
 
diff --git a/packages/pl-fe/src/features/ui/components/error-column.tsx b/packages/pl-fe/src/features/ui/components/error-column.tsx
index 17b52c7757..b0454b2456 100644
--- a/packages/pl-fe/src/features/ui/components/error-column.tsx
+++ b/packages/pl-fe/src/features/ui/components/error-column.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Column, Stack, Text, IconButton } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
+import IconButton from 'pl-fe/components/ui/icon-button';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import { isNetworkError } from 'pl-fe/utils/errors';
 
 const messages = defineMessages({
diff --git a/packages/pl-fe/src/features/ui/components/floating-action-button.tsx b/packages/pl-fe/src/features/ui/components/floating-action-button.tsx
index 85240ec176..f8069426ed 100644
--- a/packages/pl-fe/src/features/ui/components/floating-action-button.tsx
+++ b/packages/pl-fe/src/features/ui/components/floating-action-button.tsx
@@ -5,7 +5,9 @@ import { useLocation, useRouteMatch } from 'react-router-dom';
 
 import { groupComposeModal } from 'pl-fe/actions/compose';
 import { useGroup } from 'pl-fe/api/hooks';
-import { Avatar, HStack, Icon } from 'pl-fe/components/ui';
+import Avatar from 'pl-fe/components/ui/avatar';
+import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
 import { useAppDispatch } from 'pl-fe/hooks';
 import { useModalsStore } from 'pl-fe/stores';
 
diff --git a/packages/pl-fe/src/features/ui/components/link-footer.tsx b/packages/pl-fe/src/features/ui/components/link-footer.tsx
index 1c16b9e450..19ad4da2b8 100644
--- a/packages/pl-fe/src/features/ui/components/link-footer.tsx
+++ b/packages/pl-fe/src/features/ui/components/link-footer.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Text } from 'pl-fe/components/ui';
+import Text from 'pl-fe/components/ui/text';
 import emojify from 'pl-fe/features/emoji';
 import { usePlFeConfig } from 'pl-fe/hooks';
 import sourceCode from 'pl-fe/utils/code';
diff --git a/packages/pl-fe/src/features/ui/components/modal-loading.tsx b/packages/pl-fe/src/features/ui/components/modal-loading.tsx
index 63204301a2..93a2dd2fd5 100644
--- a/packages/pl-fe/src/features/ui/components/modal-loading.tsx
+++ b/packages/pl-fe/src/features/ui/components/modal-loading.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Modal, Spinner } from 'pl-fe/components/ui';
+import Modal from 'pl-fe/components/ui/modal';
+import Spinner from 'pl-fe/components/ui/spinner';
 
 const ModalLoading = () => (
   <Modal>
diff --git a/packages/pl-fe/src/features/ui/components/modals/account-moderation-modal/badge-input.tsx b/packages/pl-fe/src/features/ui/components/modals/account-moderation-modal/badge-input.tsx
index 3af063a0cc..7d9218c7df 100644
--- a/packages/pl-fe/src/features/ui/components/modals/account-moderation-modal/badge-input.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/account-moderation-modal/badge-input.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
-import { TagInput } from 'pl-fe/components/ui';
+import TagInput from 'pl-fe/components/ui/tag-input';
 import { badgeToTag, tagToBadge } from 'pl-fe/utils/badges';
 
 const messages = defineMessages({
diff --git a/packages/pl-fe/src/features/ui/components/modals/account-moderation-modal/index.tsx b/packages/pl-fe/src/features/ui/components/modals/account-moderation-modal/index.tsx
index 3c1e5ecf52..d11ff1ca82 100644
--- a/packages/pl-fe/src/features/ui/components/modals/account-moderation-modal/index.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/account-moderation-modal/index.tsx
@@ -10,7 +10,12 @@ import Account from 'pl-fe/components/account';
 import List, { ListItem } from 'pl-fe/components/list';
 import MissingIndicator from 'pl-fe/components/missing-indicator';
 import OutlineBox from 'pl-fe/components/outline-box';
-import { Button, Text, HStack, Modal, Stack, Toggle } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import HStack from 'pl-fe/components/ui/hstack';
+import Modal from 'pl-fe/components/ui/modal';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
+import Toggle from 'pl-fe/components/ui/toggle';
 import { useAppDispatch, useFeatures, useOwnAccount } from 'pl-fe/hooks';
 import toast from 'pl-fe/toast';
 import { getBadges } from 'pl-fe/utils/badges';
diff --git a/packages/pl-fe/src/features/ui/components/modals/birthdays-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/birthdays-modal.tsx
index dc4f460916..016094db4a 100644
--- a/packages/pl-fe/src/features/ui/components/modals/birthdays-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/birthdays-modal.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import ScrollableList from 'pl-fe/components/scrollable-list';
-import { Modal, Spinner } from 'pl-fe/components/ui';
+import Modal from 'pl-fe/components/ui/modal';
+import Spinner from 'pl-fe/components/ui/spinner';
 import Account from 'pl-fe/features/birthdays/account';
 import { useAppSelector } from 'pl-fe/hooks';
 
diff --git a/packages/pl-fe/src/features/ui/components/modals/boost-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/boost-modal.tsx
index 601863362b..a0109353ad 100644
--- a/packages/pl-fe/src/features/ui/components/modals/boost-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/boost-modal.tsx
@@ -2,7 +2,9 @@ import React, { useCallback } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import Icon from 'pl-fe/components/icon';
-import { Modal, Stack, Text } from 'pl-fe/components/ui';
+import Modal from 'pl-fe/components/ui/modal';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import ReplyIndicator from 'pl-fe/features/compose/components/reply-indicator';
 import { useAppSelector } from 'pl-fe/hooks';
 import { makeGetStatus } from 'pl-fe/selectors';
diff --git a/packages/pl-fe/src/features/ui/components/modals/compare-history-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/compare-history-modal.tsx
index 64db26be30..adb988491e 100644
--- a/packages/pl-fe/src/features/ui/components/modals/compare-history-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/compare-history-modal.tsx
@@ -4,7 +4,11 @@ import { FormattedDate, FormattedMessage } from 'react-intl';
 import { fetchHistory } from 'pl-fe/actions/history';
 import AttachmentThumbs from 'pl-fe/components/attachment-thumbs';
 import { ParsedContent } from 'pl-fe/components/parsed-content';
-import { HStack, Modal, Spinner, Stack, Text } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Modal from 'pl-fe/components/ui/modal';
+import Spinner from 'pl-fe/components/ui/spinner';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
 
 import type { BaseModalProps } from '../modal-root';
diff --git a/packages/pl-fe/src/features/ui/components/modals/component-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/component-modal.tsx
index 39a74eaf67..aae9ed6f78 100644
--- a/packages/pl-fe/src/features/ui/components/modals/component-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/component-modal.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Modal } from 'pl-fe/components/ui';
+import Modal from 'pl-fe/components/ui/modal';
 
 import type { BaseModalProps } from '../modal-root';
 
diff --git a/packages/pl-fe/src/features/ui/components/modals/compose-event-modal/upload-button.tsx b/packages/pl-fe/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
index 842ec67a5e..603d6efcaf 100644
--- a/packages/pl-fe/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
@@ -2,7 +2,8 @@ import React, { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Icon from 'pl-fe/components/icon';
-import { HStack, Text } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Text from 'pl-fe/components/ui/text';
 import { useAppSelector } from 'pl-fe/hooks';
 
 interface IUploadButton {
diff --git a/packages/pl-fe/src/features/ui/components/modals/compose-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/compose-modal.tsx
index c7fa208520..ea55d247dd 100644
--- a/packages/pl-fe/src/features/ui/components/modals/compose-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/compose-modal.tsx
@@ -5,7 +5,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { cancelReplyCompose, uploadCompose } from 'pl-fe/actions/compose';
 import { saveDraftStatus } from 'pl-fe/actions/draft-statuses';
 import { checkComposeContent } from 'pl-fe/components/modal-root';
-import { Modal } from 'pl-fe/components/ui';
+import Modal from 'pl-fe/components/ui/modal';
 import { useAppDispatch, useCompose, useDraggedFiles } from 'pl-fe/hooks';
 import { useModalsStore } from 'pl-fe/stores';
 
diff --git a/packages/pl-fe/src/features/ui/components/modals/confirmation-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/confirmation-modal.tsx
index fb49a194b9..e8fbdbc8c1 100644
--- a/packages/pl-fe/src/features/ui/components/modals/confirmation-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/confirmation-modal.tsx
@@ -2,7 +2,10 @@ import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import List, { ListItem } from 'pl-fe/components/list';
-import { Modal, Stack, Text, Toggle } from 'pl-fe/components/ui';
+import Modal from 'pl-fe/components/ui/modal';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
+import Toggle from 'pl-fe/components/ui/toggle';
 
 import type { BaseModalProps } from '../modal-root';
 import type { ButtonThemes } from 'pl-fe/components/ui/button/useButtonStyles';
diff --git a/packages/pl-fe/src/features/ui/components/modals/crypto-donate-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/crypto-donate-modal.tsx
index 929f1e3435..f40f3b579b 100644
--- a/packages/pl-fe/src/features/ui/components/modals/crypto-donate-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/crypto-donate-modal.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Modal } from 'pl-fe/components/ui';
+import Modal from 'pl-fe/components/ui/modal';
 import DetailedCryptoAddress from 'pl-fe/features/crypto-donate/components/detailed-crypto-address';
 
 import { BaseModalProps } from '../modal-root';
diff --git a/packages/pl-fe/src/features/ui/components/modals/dislikes-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/dislikes-modal.tsx
index 92adacc98f..328a282617 100644
--- a/packages/pl-fe/src/features/ui/components/modals/dislikes-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/dislikes-modal.tsx
@@ -3,7 +3,8 @@ import { FormattedMessage } from 'react-intl';
 
 import { fetchDislikes } from 'pl-fe/actions/interactions';
 import ScrollableList from 'pl-fe/components/scrollable-list';
-import { Modal, Spinner } from 'pl-fe/components/ui';
+import Modal from 'pl-fe/components/ui/modal';
+import Spinner from 'pl-fe/components/ui/spinner';
 import AccountContainer from 'pl-fe/containers/account-container';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
 
diff --git a/packages/pl-fe/src/features/ui/components/modals/edit-announcement-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/edit-announcement-modal.tsx
index c400a83f05..9d1efe8d10 100644
--- a/packages/pl-fe/src/features/ui/components/modals/edit-announcement-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/edit-announcement-modal.tsx
@@ -2,7 +2,14 @@ import React, { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { useAnnouncements } from 'pl-fe/api/hooks/admin/useAnnouncements';
-import { Form, FormGroup, HStack, Modal, Stack, Text, Textarea, Toggle } from 'pl-fe/components/ui';
+import Form from 'pl-fe/components/ui/form';
+import FormGroup from 'pl-fe/components/ui/form-group';
+import HStack from 'pl-fe/components/ui/hstack';
+import Modal from 'pl-fe/components/ui/modal';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
+import Textarea from 'pl-fe/components/ui/textarea';
+import Toggle from 'pl-fe/components/ui/toggle';
 import { DatePicker } from 'pl-fe/features/ui/util/async-components';
 import toast from 'pl-fe/toast';
 
diff --git a/packages/pl-fe/src/features/ui/components/modals/edit-federation-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/edit-federation-modal.tsx
index 31b79a9197..8c24f12b03 100644
--- a/packages/pl-fe/src/features/ui/components/modals/edit-federation-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/edit-federation-modal.tsx
@@ -3,7 +3,8 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { updateMrf } from 'pl-fe/actions/mrf';
 import List, { ListItem } from 'pl-fe/components/list';
-import { Modal, Toggle } from 'pl-fe/components/ui';
+import Modal from 'pl-fe/components/ui/modal';
+import Toggle from 'pl-fe/components/ui/toggle';
 import { useAppSelector, useAppDispatch } from 'pl-fe/hooks';
 import { makeGetRemoteInstance } from 'pl-fe/selectors';
 import toast from 'pl-fe/toast';
diff --git a/packages/pl-fe/src/features/ui/components/modals/event-map-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/event-map-modal.tsx
index 98d3b0b106..96e76c08ea 100644
--- a/packages/pl-fe/src/features/ui/components/modals/event-map-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/event-map-modal.tsx
@@ -2,7 +2,9 @@ import L from 'leaflet';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, Modal, Stack } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import Modal from 'pl-fe/components/ui/modal';
+import Stack from 'pl-fe/components/ui/stack';
 import { useAppSelector, usePlFeConfig } from 'pl-fe/hooks';
 import { makeGetStatus } from 'pl-fe/selectors';
 
diff --git a/packages/pl-fe/src/features/ui/components/modals/event-participants-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/event-participants-modal.tsx
index f62051486a..18372dda06 100644
--- a/packages/pl-fe/src/features/ui/components/modals/event-participants-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/event-participants-modal.tsx
@@ -3,7 +3,8 @@ import { FormattedMessage } from 'react-intl';
 
 import { fetchEventParticipations } from 'pl-fe/actions/events';
 import ScrollableList from 'pl-fe/components/scrollable-list';
-import { Modal, Spinner } from 'pl-fe/components/ui';
+import Modal from 'pl-fe/components/ui/modal';
+import Spinner from 'pl-fe/components/ui/spinner';
 import AccountContainer from 'pl-fe/containers/account-container';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
 
diff --git a/packages/pl-fe/src/features/ui/components/modals/familiar-followers-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/familiar-followers-modal.tsx
index 87b006cf39..5355be07cb 100644
--- a/packages/pl-fe/src/features/ui/components/modals/familiar-followers-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/familiar-followers-modal.tsx
@@ -3,7 +3,8 @@ import React, { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import ScrollableList from 'pl-fe/components/scrollable-list';
-import { Modal, Spinner } from 'pl-fe/components/ui';
+import Modal from 'pl-fe/components/ui/modal';
+import Spinner from 'pl-fe/components/ui/spinner';
 import AccountContainer from 'pl-fe/containers/account-container';
 import { useAppSelector } from 'pl-fe/hooks';
 import { makeGetAccount } from 'pl-fe/selectors';
diff --git a/packages/pl-fe/src/features/ui/components/modals/favourites-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/favourites-modal.tsx
index a3f6a32416..26320092ee 100644
--- a/packages/pl-fe/src/features/ui/components/modals/favourites-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/favourites-modal.tsx
@@ -3,7 +3,8 @@ import { FormattedMessage } from 'react-intl';
 
 import { fetchFavourites, expandFavourites } from 'pl-fe/actions/interactions';
 import ScrollableList from 'pl-fe/components/scrollable-list';
-import { Modal, Spinner } from 'pl-fe/components/ui';
+import Modal from 'pl-fe/components/ui/modal';
+import Spinner from 'pl-fe/components/ui/spinner';
 import AccountContainer from 'pl-fe/containers/account-container';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
 
diff --git a/packages/pl-fe/src/features/ui/components/modals/hotkeys-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/hotkeys-modal.tsx
index 05ebf7e79e..cb8f1507bd 100644
--- a/packages/pl-fe/src/features/ui/components/modals/hotkeys-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/hotkeys-modal.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Modal } from 'pl-fe/components/ui';
+import Modal from 'pl-fe/components/ui/modal';
 import { useFeatures, useLoggedIn } from 'pl-fe/hooks';
 
 import type { BaseModalProps } from '../modal-root';
diff --git a/packages/pl-fe/src/features/ui/components/modals/list-adder-modal/index.tsx b/packages/pl-fe/src/features/ui/components/modals/list-adder-modal/index.tsx
index 5b2772c45c..bd85886898 100644
--- a/packages/pl-fe/src/features/ui/components/modals/list-adder-modal/index.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/list-adder-modal/index.tsx
@@ -2,7 +2,8 @@ import React, { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { setupListAdder, resetListAdder } from 'pl-fe/actions/lists';
-import { CardHeader, CardTitle, Modal } from 'pl-fe/components/ui';
+import { CardHeader, CardTitle } from 'pl-fe/components/ui/card';
+import Modal from 'pl-fe/components/ui/modal';
 import AccountContainer from 'pl-fe/containers/account-container';
 import { getOrderedLists } from 'pl-fe/features/lists';
 import NewListForm from 'pl-fe/features/lists/components/new-list-form';
diff --git a/packages/pl-fe/src/features/ui/components/modals/list-editor-modal/components/account.tsx b/packages/pl-fe/src/features/ui/components/modals/list-editor-modal/components/account.tsx
index 4db0cbe0bc..cdebac4b60 100644
--- a/packages/pl-fe/src/features/ui/components/modals/list-editor-modal/components/account.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/list-editor-modal/components/account.tsx
@@ -3,7 +3,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { removeFromListEditor, addToListEditor } from 'pl-fe/actions/lists';
 import IconButton from 'pl-fe/components/icon-button';
-import { HStack } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
 import AccountContainer from 'pl-fe/containers/account-container';
 import { useAppSelector, useAppDispatch } from 'pl-fe/hooks';
 
diff --git a/packages/pl-fe/src/features/ui/components/modals/list-editor-modal/index.tsx b/packages/pl-fe/src/features/ui/components/modals/list-editor-modal/index.tsx
index 78d2c92a78..55c2791add 100644
--- a/packages/pl-fe/src/features/ui/components/modals/list-editor-modal/index.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/list-editor-modal/index.tsx
@@ -2,7 +2,8 @@ import React, { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { setupListEditor, resetListEditor } from 'pl-fe/actions/lists';
-import { CardHeader, CardTitle, Modal } from 'pl-fe/components/ui';
+import { CardHeader, CardTitle } from 'pl-fe/components/ui/card';
+import Modal from 'pl-fe/components/ui/modal';
 import { useAppSelector, useAppDispatch } from 'pl-fe/hooks';
 
 import Account from './components/account';
diff --git a/packages/pl-fe/src/features/ui/components/modals/manage-group-modal/index.tsx b/packages/pl-fe/src/features/ui/components/modals/manage-group-modal/index.tsx
index f2203510ff..037a168a48 100644
--- a/packages/pl-fe/src/features/ui/components/modals/manage-group-modal/index.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/manage-group-modal/index.tsx
@@ -3,7 +3,8 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import * as v from 'valibot';
 
 import { useCreateGroup } from 'pl-fe/api/hooks';
-import { Modal, Stack } from 'pl-fe/components/ui';
+import Modal from 'pl-fe/components/ui/modal';
+import Stack from 'pl-fe/components/ui/stack';
 import toast from 'pl-fe/toast';
 
 import ConfirmationStep from './steps/confirmation-step';
diff --git a/packages/pl-fe/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx b/packages/pl-fe/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
index 825dafdaa8..3ee194d9b7 100644
--- a/packages/pl-fe/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
@@ -2,7 +2,12 @@ import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { ParsedContent } from 'pl-fe/components/parsed-content';
-import { Avatar, Divider, HStack, Stack, Text, Button } from 'pl-fe/components/ui';
+import Avatar from 'pl-fe/components/ui/avatar';
+import Divider from 'pl-fe/components/ui/divider';
+import HStack from 'pl-fe/components/ui/hstack';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
+import Button from 'pl-fe/components/ui/button';
 import toast from 'pl-fe/toast';
 import copy from 'pl-fe/utils/copy';
 
diff --git a/packages/pl-fe/src/features/ui/components/modals/mentions-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/mentions-modal.tsx
index ba559f1692..893cc81699 100644
--- a/packages/pl-fe/src/features/ui/components/modals/mentions-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/mentions-modal.tsx
@@ -4,7 +4,8 @@ import { FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchStatusWithContext } from 'pl-fe/actions/statuses';
 import ScrollableList from 'pl-fe/components/scrollable-list';
-import { Modal, Spinner } from 'pl-fe/components/ui';
+import Modal from 'pl-fe/components/ui/modal';
+import Spinner from 'pl-fe/components/ui/spinner';
 import AccountContainer from 'pl-fe/containers/account-container';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
 import { makeGetStatus } from 'pl-fe/selectors';
diff --git a/packages/pl-fe/src/features/ui/components/modals/missing-description-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/missing-description-modal.tsx
index e2767da09e..41fe3ab620 100644
--- a/packages/pl-fe/src/features/ui/components/modals/missing-description-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/missing-description-modal.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { Modal } from 'pl-fe/components/ui';
+import Modal from 'pl-fe/components/ui/modal';
 
 import type { BaseModalProps } from '../modal-root';
 
diff --git a/packages/pl-fe/src/features/ui/components/modals/reblogs-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/reblogs-modal.tsx
index 6a8120c587..b41bbd5015 100644
--- a/packages/pl-fe/src/features/ui/components/modals/reblogs-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/reblogs-modal.tsx
@@ -4,7 +4,8 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { fetchReblogs, expandReblogs } from 'pl-fe/actions/interactions';
 import { fetchStatus } from 'pl-fe/actions/statuses';
 import ScrollableList from 'pl-fe/components/scrollable-list';
-import { Modal, Spinner } from 'pl-fe/components/ui';
+import Modal from 'pl-fe/components/ui/modal';
+import Spinner from 'pl-fe/components/ui/spinner';
 import AccountContainer from 'pl-fe/containers/account-container';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
 
diff --git a/packages/pl-fe/src/features/ui/components/modals/reply-mentions-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/reply-mentions-modal.tsx
index b7d9998695..6804af0c88 100644
--- a/packages/pl-fe/src/features/ui/components/modals/reply-mentions-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/reply-mentions-modal.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Modal } from 'pl-fe/components/ui';
+import Modal from 'pl-fe/components/ui/modal';
 import Account from 'pl-fe/features/reply-mentions/account';
 import { useAppSelector, useCompose, useOwnAccount } from 'pl-fe/hooks';
 import { statusToMentionsAccountIdsArray } from 'pl-fe/reducers/compose';
diff --git a/packages/pl-fe/src/features/ui/components/modals/report-modal/components/status-check-box.tsx b/packages/pl-fe/src/features/ui/components/modals/report-modal/components/status-check-box.tsx
index 9474cf108c..95893558e9 100644
--- a/packages/pl-fe/src/features/ui/components/modals/report-modal/components/status-check-box.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/report-modal/components/status-check-box.tsx
@@ -2,7 +2,8 @@ import noop from 'lodash/noop';
 import React, { Suspense } from 'react';
 
 import StatusContent from 'pl-fe/components/status-content';
-import { Stack, Toggle } from 'pl-fe/components/ui';
+import Stack from 'pl-fe/components/ui/stack';
+import Toggle from 'pl-fe/components/ui/toggle';
 import { MediaGallery, Video, Audio } from 'pl-fe/features/ui/util/async-components';
 import { useAppSelector } from 'pl-fe/hooks';
 
diff --git a/packages/pl-fe/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx b/packages/pl-fe/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
index 48388ca470..6e5d00fa78 100644
--- a/packages/pl-fe/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { getPlFeConfig } from 'pl-fe/actions/pl-fe';
-import { Stack, Text } from 'pl-fe/components/ui';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import { useAppSelector } from 'pl-fe/hooks';
 
 const messages = defineMessages({
diff --git a/packages/pl-fe/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx b/packages/pl-fe/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
index e8d57df3ae..bc0b6e3a1b 100644
--- a/packages/pl-fe/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
@@ -2,7 +2,12 @@ import { OrderedSet } from 'immutable';
 import React, { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { Button, FormGroup, HStack, Stack, Text, Toggle } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import FormGroup from 'pl-fe/components/ui/form-group';
+import HStack from 'pl-fe/components/ui/hstack';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
+import Toggle from 'pl-fe/components/ui/toggle';
 import StatusCheckBox from 'pl-fe/features/ui/components/modals/report-modal/components/status-check-box';
 import { useAppSelector, useFeatures } from 'pl-fe/hooks';
 import { getDomain } from 'pl-fe/utils/accounts';
diff --git a/packages/pl-fe/src/features/ui/components/panels/instance-info-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/instance-info-panel.tsx
index d8df3ac7f3..48ae3a6359 100644
--- a/packages/pl-fe/src/features/ui/components/panels/instance-info-panel.tsx
+++ b/packages/pl-fe/src/features/ui/components/panels/instance-info-panel.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { pinHost, unpinHost } from 'pl-fe/actions/remote-timeline';
-import { Widget } from 'pl-fe/components/ui';
+import Widget from 'pl-fe/components/ui/widget';
 import { useAppSelector, useAppDispatch, useSettings } from 'pl-fe/hooks';
 import { makeGetRemoteInstance } from 'pl-fe/selectors';
 
diff --git a/packages/pl-fe/src/features/ui/components/panels/instance-moderation-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/instance-moderation-panel.tsx
index 4b640b61cd..8bc34469d5 100644
--- a/packages/pl-fe/src/features/ui/components/panels/instance-moderation-panel.tsx
+++ b/packages/pl-fe/src/features/ui/components/panels/instance-moderation-panel.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
 import DropdownMenu from 'pl-fe/components/dropdown-menu';
-import { Widget } from 'pl-fe/components/ui';
+import Widget from 'pl-fe/components/ui/widget';
 import InstanceRestrictions from 'pl-fe/features/federation-restrictions/components/instance-restrictions';
 import { useAppSelector, useOwnAccount } from 'pl-fe/hooks';
 import { makeGetRemoteInstance } from 'pl-fe/selectors';
diff --git a/packages/pl-fe/src/features/ui/components/panels/my-groups-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/my-groups-panel.tsx
index 8d185b89dd..a445913d7c 100644
--- a/packages/pl-fe/src/features/ui/components/panels/my-groups-panel.tsx
+++ b/packages/pl-fe/src/features/ui/components/panels/my-groups-panel.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useGroups } from 'pl-fe/api/hooks';
-import { Widget } from 'pl-fe/components/ui';
+import Widget from 'pl-fe/components/ui/widget';
 import GroupListItem from 'pl-fe/features/groups/components/discover/group-list-item';
 import PlaceholderGroupSearch from 'pl-fe/features/placeholder/components/placeholder-group-search';
 
diff --git a/packages/pl-fe/src/features/ui/components/panels/new-event-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/new-event-panel.tsx
index c426949f63..9a0919d38b 100644
--- a/packages/pl-fe/src/features/ui/components/panels/new-event-panel.tsx
+++ b/packages/pl-fe/src/features/ui/components/panels/new-event-panel.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, Stack, Text } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import { useModalsStore } from 'pl-fe/stores';
 
 const NewEventPanel = () => {
diff --git a/packages/pl-fe/src/features/ui/components/panels/new-group-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/new-group-panel.tsx
index f4c8b227fc..d8d46a84f5 100644
--- a/packages/pl-fe/src/features/ui/components/panels/new-group-panel.tsx
+++ b/packages/pl-fe/src/features/ui/components/panels/new-group-panel.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, Stack, Text } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import { useModalsStore } from 'pl-fe/stores';
 
 const NewGroupPanel = () => {
diff --git a/packages/pl-fe/src/features/ui/components/panels/pinned-accounts-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/pinned-accounts-panel.tsx
index a0d2f1eb67..7b4e7409f0 100644
--- a/packages/pl-fe/src/features/ui/components/panels/pinned-accounts-panel.tsx
+++ b/packages/pl-fe/src/features/ui/components/panels/pinned-accounts-panel.tsx
@@ -3,7 +3,7 @@ import React, { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { fetchPinnedAccounts } from 'pl-fe/actions/accounts';
-import { Widget } from 'pl-fe/components/ui';
+import Widget from 'pl-fe/components/ui/widget';
 import AccountContainer from 'pl-fe/containers/account-container';
 import { WhoToFollowPanel } from 'pl-fe/features/ui/util/async-components';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
diff --git a/packages/pl-fe/src/features/ui/components/panels/profile-fields-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/profile-fields-panel.tsx
index ee34b2be28..b04a52b2b2 100644
--- a/packages/pl-fe/src/features/ui/components/panels/profile-fields-panel.tsx
+++ b/packages/pl-fe/src/features/ui/components/panels/profile-fields-panel.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Widget, Stack } from 'pl-fe/components/ui';
+import Widget from 'pl-fe/components/ui/widget';
+import Stack from 'pl-fe/components/ui/stack';
 
 import ProfileField from '../profile-field';
 
diff --git a/packages/pl-fe/src/features/ui/components/panels/promo-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/promo-panel.tsx
index dcb887a03f..eeaafd6560 100644
--- a/packages/pl-fe/src/features/ui/components/panels/promo-panel.tsx
+++ b/packages/pl-fe/src/features/ui/components/panels/promo-panel.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 
 import ForkAwesomeIcon from 'pl-fe/components/fork-awesome-icon';
 import List, { ListItem } from 'pl-fe/components/list';
-import { Widget, HStack } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Widget from 'pl-fe/components/ui/widget';
 import { useInstance, useSettings, usePlFeConfig } from 'pl-fe/hooks';
 
 const PromoPanel: React.FC = () => {
diff --git a/packages/pl-fe/src/features/ui/components/panels/sign-up-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/sign-up-panel.tsx
index 215825a15c..59295c12cb 100644
--- a/packages/pl-fe/src/features/ui/components/panels/sign-up-panel.tsx
+++ b/packages/pl-fe/src/features/ui/components/panels/sign-up-panel.tsx
@@ -4,7 +4,9 @@ import { Redirect } from 'react-router-dom';
 
 import { logIn, switchAccount, verifyCredentials } from 'pl-fe/actions/auth';
 import { fetchInstance } from 'pl-fe/actions/instance';
-import { Button, Stack, Text } from 'pl-fe/components/ui';
+import Button from 'pl-fe/components/ui/button';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import LoginForm from 'pl-fe/features/auth-login/components/login-form';
 import OtpAuthForm from 'pl-fe/features/auth-login/components/otp-auth-form';
 import ExternalLoginForm from 'pl-fe/features/external-login/components/external-login-form';
diff --git a/packages/pl-fe/src/features/ui/components/panels/trends-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/trends-panel.tsx
index ef5b04128e..f72fd9c0ec 100644
--- a/packages/pl-fe/src/features/ui/components/panels/trends-panel.tsx
+++ b/packages/pl-fe/src/features/ui/components/panels/trends-panel.tsx
@@ -4,7 +4,8 @@ import { Link } from 'react-router-dom';
 
 import { setFilter } from 'pl-fe/actions/search';
 import Hashtag from 'pl-fe/components/hashtag';
-import { Text, Widget } from 'pl-fe/components/ui';
+import Text from 'pl-fe/components/ui/text';
+import Widget from 'pl-fe/components/ui/widget';
 import PlaceholderSidebarTrends from 'pl-fe/features/placeholder/components/placeholder-sidebar-trends';
 import { useAppDispatch } from 'pl-fe/hooks';
 import useTrends from 'pl-fe/queries/trends';
diff --git a/packages/pl-fe/src/features/ui/components/panels/user-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/user-panel.tsx
index 63e3b3d90a..f6dc00b236 100644
--- a/packages/pl-fe/src/features/ui/components/panels/user-panel.tsx
+++ b/packages/pl-fe/src/features/ui/components/panels/user-panel.tsx
@@ -4,7 +4,10 @@ import { Link } from 'react-router-dom';
 
 import { useAccount } from 'pl-fe/api/hooks';
 import StillImage from 'pl-fe/components/still-image';
-import { Avatar, HStack, Stack, Text } from 'pl-fe/components/ui';
+import Avatar from 'pl-fe/components/ui/avatar';
+import HStack from 'pl-fe/components/ui/hstack';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 import VerificationBadge from 'pl-fe/components/verification-badge';
 import { useAppSelector, useSettings } from 'pl-fe/hooks';
 import { getAcct } from 'pl-fe/utils/accounts';
diff --git a/packages/pl-fe/src/features/ui/components/panels/who-to-follow-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/who-to-follow-panel.tsx
index 12f00d6e45..e59606608a 100644
--- a/packages/pl-fe/src/features/ui/components/panels/who-to-follow-panel.tsx
+++ b/packages/pl-fe/src/features/ui/components/panels/who-to-follow-panel.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Text, Widget } from 'pl-fe/components/ui';
+import Text from 'pl-fe/components/ui/text';
+import Widget from 'pl-fe/components/ui/widget';
 import AccountContainer from 'pl-fe/containers/account-container';
 import PlaceholderSidebarSuggestions from 'pl-fe/features/placeholder/components/placeholder-sidebar-suggestions';
 import { useFeatures } from 'pl-fe/hooks';
diff --git a/packages/pl-fe/src/features/ui/components/pending-status.tsx b/packages/pl-fe/src/features/ui/components/pending-status.tsx
index c3cfc78626..efcbad4204 100644
--- a/packages/pl-fe/src/features/ui/components/pending-status.tsx
+++ b/packages/pl-fe/src/features/ui/components/pending-status.tsx
@@ -4,7 +4,9 @@ import React from 'react';
 import Account from 'pl-fe/components/account';
 import StatusContent from 'pl-fe/components/status-content';
 import StatusReplyMentions from 'pl-fe/components/status-reply-mentions';
-import { Card, HStack, Stack } from 'pl-fe/components/ui';
+import Card from 'pl-fe/components/ui/card';
+import HStack from 'pl-fe/components/ui/hstack';
+import Stack from 'pl-fe/components/ui/stack';
 import PlaceholderCard from 'pl-fe/features/placeholder/components/placeholder-card';
 import PlaceholderMediaGallery from 'pl-fe/features/placeholder/components/placeholder-media-gallery';
 import QuotedStatus from 'pl-fe/features/status/containers/quoted-status-container';
diff --git a/packages/pl-fe/src/features/ui/components/poll-preview.tsx b/packages/pl-fe/src/features/ui/components/poll-preview.tsx
index ba4c191c66..b6bd4cfc5c 100644
--- a/packages/pl-fe/src/features/ui/components/poll-preview.tsx
+++ b/packages/pl-fe/src/features/ui/components/poll-preview.tsx
@@ -2,7 +2,7 @@ import noop from 'lodash/noop';
 import React from 'react';
 
 import PollOption from 'pl-fe/components/polls/poll-option';
-import { Stack } from 'pl-fe/components/ui';
+import Stack from 'pl-fe/components/ui/stack';
 
 import type { Poll } from 'pl-fe/normalizers/poll';
 
diff --git a/packages/pl-fe/src/features/ui/components/profile-familiar-followers.tsx b/packages/pl-fe/src/features/ui/components/profile-familiar-followers.tsx
index 5a0f99682b..2ef2004d09 100644
--- a/packages/pl-fe/src/features/ui/components/profile-familiar-followers.tsx
+++ b/packages/pl-fe/src/features/ui/components/profile-familiar-followers.tsx
@@ -6,7 +6,8 @@ import { Link } from 'react-router-dom';
 import { fetchAccountFamiliarFollowers } from 'pl-fe/actions/familiar-followers';
 import AvatarStack from 'pl-fe/components/avatar-stack';
 import HoverAccountWrapper from 'pl-fe/components/hover-account-wrapper';
-import { HStack, Text } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Text from 'pl-fe/components/ui/text';
 import VerificationBadge from 'pl-fe/components/verification-badge';
 import { useAppDispatch, useAppSelector, useFeatures } from 'pl-fe/hooks';
 import { makeGetAccount } from 'pl-fe/selectors';
diff --git a/packages/pl-fe/src/features/ui/components/profile-field.tsx b/packages/pl-fe/src/features/ui/components/profile-field.tsx
index 5b9408c655..5fa23c98bb 100644
--- a/packages/pl-fe/src/features/ui/components/profile-field.tsx
+++ b/packages/pl-fe/src/features/ui/components/profile-field.tsx
@@ -3,7 +3,8 @@ import React from 'react';
 import { defineMessages, useIntl, FormatDateOptions } from 'react-intl';
 
 import Markup from 'pl-fe/components/markup';
-import { HStack, Icon } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Icon from 'pl-fe/components/ui/icon';
 import { CryptoAddress, LightningAddress } from 'pl-fe/features/ui/util/async-components';
 
 import type { Account } from 'pl-fe/normalizers';
diff --git a/packages/pl-fe/src/features/ui/components/profile-stats.tsx b/packages/pl-fe/src/features/ui/components/profile-stats.tsx
index cd9b768f10..6ed23b8fdf 100644
--- a/packages/pl-fe/src/features/ui/components/profile-stats.tsx
+++ b/packages/pl-fe/src/features/ui/components/profile-stats.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import { NavLink } from 'react-router-dom';
 
-import { HStack, Text } from 'pl-fe/components/ui';
+import HStack from 'pl-fe/components/ui/hstack';
+import Text from 'pl-fe/components/ui/text';
 import { useSettings } from 'pl-fe/hooks';
 import { shortNumberFormat } from 'pl-fe/utils/numbers';
 
diff --git a/packages/pl-fe/src/features/ui/components/subscription-button.tsx b/packages/pl-fe/src/features/ui/components/subscription-button.tsx
index 1fab40415d..dd09a9a263 100644
--- a/packages/pl-fe/src/features/ui/components/subscription-button.tsx
+++ b/packages/pl-fe/src/features/ui/components/subscription-button.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { useFollow } from 'pl-fe/api/hooks';
-import { IconButton } from 'pl-fe/components/ui';
+import IconButton from 'pl-fe/components/ui/icon-button';
 import { useFeatures } from 'pl-fe/hooks';
 import toast from 'pl-fe/toast';
 
diff --git a/packages/pl-fe/src/features/ui/components/theme-selector.tsx b/packages/pl-fe/src/features/ui/components/theme-selector.tsx
index d764c23826..ce66049823 100644
--- a/packages/pl-fe/src/features/ui/components/theme-selector.tsx
+++ b/packages/pl-fe/src/features/ui/components/theme-selector.tsx
@@ -1,7 +1,8 @@
 import React, { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Icon, Select } from 'pl-fe/components/ui';
+import Icon from 'pl-fe/components/ui/icon';
+import Select from 'pl-fe/components/ui/select';
 
 const messages = defineMessages({
   light: { id: 'theme_toggle.light', defaultMessage: 'Light' },
diff --git a/packages/pl-fe/src/features/ui/components/timeline.tsx b/packages/pl-fe/src/features/ui/components/timeline.tsx
index 6c152e3f9e..f0e33a55c2 100644
--- a/packages/pl-fe/src/features/ui/components/timeline.tsx
+++ b/packages/pl-fe/src/features/ui/components/timeline.tsx
@@ -6,7 +6,7 @@ import { defineMessages } from 'react-intl';
 import { dequeueTimeline, scrollTopTimeline } from 'pl-fe/actions/timelines';
 import ScrollTopButton from 'pl-fe/components/scroll-top-button';
 import StatusList, { IStatusList } from 'pl-fe/components/status-list';
-import { Portal } from 'pl-fe/components/ui';
+import Portal from 'pl-fe/components/ui/portal';
 import { useAppSelector, useAppDispatch } from 'pl-fe/hooks';
 import { makeGetStatusIds } from 'pl-fe/selectors';
 
diff --git a/packages/pl-fe/src/features/ui/index.tsx b/packages/pl-fe/src/features/ui/index.tsx
index 80a07e8d1f..ccf8130309 100644
--- a/packages/pl-fe/src/features/ui/index.tsx
+++ b/packages/pl-fe/src/features/ui/index.tsx
@@ -16,7 +16,7 @@ import { fetchHomeTimeline } from 'pl-fe/actions/timelines';
 import { useUserStream } from 'pl-fe/api/hooks';
 import SidebarNavigation from 'pl-fe/components/sidebar-navigation';
 import ThumbNavigation from 'pl-fe/components/thumb-navigation';
-import { Layout } from 'pl-fe/components/ui';
+import Layout from 'pl-fe/components/ui/layout';
 import { useAppDispatch, useAppSelector, useOwnAccount, usePlFeConfig, useFeatures, useDraggedFiles, useInstance, useLoggedIn } from 'pl-fe/hooks';
 import AdminLayout from 'pl-fe/layouts/admin-layout';
 import ChatsLayout from 'pl-fe/layouts/chats-layout';
diff --git a/packages/pl-fe/src/features/ui/util/react-router-helpers.tsx b/packages/pl-fe/src/features/ui/util/react-router-helpers.tsx
index f334033fa3..cc94c08695 100644
--- a/packages/pl-fe/src/features/ui/util/react-router-helpers.tsx
+++ b/packages/pl-fe/src/features/ui/util/react-router-helpers.tsx
@@ -2,7 +2,7 @@ import React, { Suspense, useEffect, useRef } from 'react';
 import { ErrorBoundary, type FallbackProps } from 'react-error-boundary';
 import { Redirect, Route, useHistory, RouteProps, RouteComponentProps, match as MatchType, useLocation } from 'react-router-dom';
 
-import { Layout } from 'pl-fe/components/ui';
+import Layout from 'pl-fe/components/ui/layout';
 import { useOwnAccount, useSettings } from 'pl-fe/hooks';
 
 import ColumnForbidden from '../components/column-forbidden';
diff --git a/packages/pl-fe/src/layouts/admin-layout.tsx b/packages/pl-fe/src/layouts/admin-layout.tsx
index e00d944b24..a19f1ece3a 100644
--- a/packages/pl-fe/src/layouts/admin-layout.tsx
+++ b/packages/pl-fe/src/layouts/admin-layout.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Layout } from 'pl-fe/components/ui';
+import Layout from 'pl-fe/components/ui/layout';
 import { LatestAccountsPanel } from 'pl-fe/features/ui/util/async-components';
 
 import LinkFooter from '../features/ui/components/link-footer';
diff --git a/packages/pl-fe/src/layouts/default-layout.tsx b/packages/pl-fe/src/layouts/default-layout.tsx
index 4a2ecea49a..32298f1475 100644
--- a/packages/pl-fe/src/layouts/default-layout.tsx
+++ b/packages/pl-fe/src/layouts/default-layout.tsx
@@ -8,7 +8,7 @@ import {
 } from 'pl-fe/features/ui/util/async-components';
 import { useAppSelector, useFeatures } from 'pl-fe/hooks';
 
-import { Layout } from '../components/ui';
+import Layout from 'pl-fe/components/ui/layout';
 
 interface IDefaultLayout {
   children: React.ReactNode;
diff --git a/packages/pl-fe/src/layouts/empty-layout.tsx b/packages/pl-fe/src/layouts/empty-layout.tsx
index 948508817e..52950a63be 100644
--- a/packages/pl-fe/src/layouts/empty-layout.tsx
+++ b/packages/pl-fe/src/layouts/empty-layout.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Layout } from '../components/ui';
+import Layout from 'pl-fe/components/ui/layout';
 
 interface IEmptyLayout {
   children: React.ReactNode;
diff --git a/packages/pl-fe/src/layouts/event-layout.tsx b/packages/pl-fe/src/layouts/event-layout.tsx
index 3261952ed0..03d4fdae1d 100644
--- a/packages/pl-fe/src/layouts/event-layout.tsx
+++ b/packages/pl-fe/src/layouts/event-layout.tsx
@@ -3,7 +3,9 @@ import { Helmet } from 'react-helmet-async';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { Column, Layout, Tabs } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
+import Layout from 'pl-fe/components/ui/layout';
+import Tabs from 'pl-fe/components/ui/tabs';
 import PlaceholderStatus from 'pl-fe/features/placeholder/components/placeholder-status';
 import LinkFooter from 'pl-fe/features/ui/components/link-footer';
 import {
diff --git a/packages/pl-fe/src/layouts/events-layout.tsx b/packages/pl-fe/src/layouts/events-layout.tsx
index 6657f630a7..9f8eeb2208 100644
--- a/packages/pl-fe/src/layouts/events-layout.tsx
+++ b/packages/pl-fe/src/layouts/events-layout.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Layout } from 'pl-fe/components/ui';
+import Layout from 'pl-fe/components/ui/layout';
 import LinkFooter from 'pl-fe/features/ui/components/link-footer';
 import {
   WhoToFollowPanel,
diff --git a/packages/pl-fe/src/layouts/external-login-layout.tsx b/packages/pl-fe/src/layouts/external-login-layout.tsx
index 90e5be94ef..683d23aaf7 100644
--- a/packages/pl-fe/src/layouts/external-login-layout.tsx
+++ b/packages/pl-fe/src/layouts/external-login-layout.tsx
@@ -9,7 +9,7 @@ import {
 import { useAppSelector, useFeatures } from 'pl-fe/hooks';
 import { isStandalone } from 'pl-fe/utils/state';
 
-import { Layout } from '../components/ui';
+import Layout from 'pl-fe/components/ui/layout';
 
 interface IExternalLoginLayout {
   children: React.ReactNode;
diff --git a/packages/pl-fe/src/layouts/group-layout.tsx b/packages/pl-fe/src/layouts/group-layout.tsx
index 474bafd483..4468ebef3d 100644
--- a/packages/pl-fe/src/layouts/group-layout.tsx
+++ b/packages/pl-fe/src/layouts/group-layout.tsx
@@ -3,7 +3,12 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
 
 import { useGroup, useGroupMembershipRequests } from 'pl-fe/api/hooks';
-import { Column, Icon, Layout, Stack, Text, Tabs } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
+import Icon from 'pl-fe/components/ui/icon';
+import Layout from 'pl-fe/components/ui/layout';
+import Stack from 'pl-fe/components/ui/stack';
+import Tabs from 'pl-fe/components/ui/tabs';
+import Text from 'pl-fe/components/ui/text';
 import GroupHeader from 'pl-fe/features/group/components/group-header';
 import LinkFooter from 'pl-fe/features/ui/components/link-footer';
 import {
diff --git a/packages/pl-fe/src/layouts/groups-layout.tsx b/packages/pl-fe/src/layouts/groups-layout.tsx
index 7f426d8a57..238e8d467c 100644
--- a/packages/pl-fe/src/layouts/groups-layout.tsx
+++ b/packages/pl-fe/src/layouts/groups-layout.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Column, Layout } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
+import Layout from 'pl-fe/components/ui/layout';
 import LinkFooter from 'pl-fe/features/ui/components/link-footer';
 import { MyGroupsPanel, NewGroupPanel } from 'pl-fe/features/ui/util/async-components';
 
diff --git a/packages/pl-fe/src/layouts/home-layout.tsx b/packages/pl-fe/src/layouts/home-layout.tsx
index 621413e4f2..5e65fb3f6d 100644
--- a/packages/pl-fe/src/layouts/home-layout.tsx
+++ b/packages/pl-fe/src/layouts/home-layout.tsx
@@ -4,6 +4,11 @@ import { useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import { uploadCompose } from 'pl-fe/actions/compose';
+import Avatar from 'pl-fe/components/ui/avatar';
+import Card, { CardBody } from 'pl-fe/components/ui/card';
+import HStack from 'pl-fe/components/ui/hstack';
+import Layout from 'pl-fe/components/ui/layout';
+import ComposeForm from 'pl-fe/features/compose/components/compose-form';
 import LinkFooter from 'pl-fe/features/ui/components/link-footer';
 import {
   WhoToFollowPanel,
@@ -17,9 +22,6 @@ import {
 import { useAppSelector, useOwnAccount, useFeatures, usePlFeConfig, useDraggedFiles, useAppDispatch } from 'pl-fe/hooks';
 import { useIsMobile } from 'pl-fe/hooks/useIsMobile';
 
-import { Avatar, Card, CardBody, HStack, Layout } from '../components/ui';
-import ComposeForm from '../features/compose/components/compose-form';
-
 interface IHomeLayout {
   children: React.ReactNode;
 }
diff --git a/packages/pl-fe/src/layouts/landing-layout.tsx b/packages/pl-fe/src/layouts/landing-layout.tsx
index 4bc053472b..d70ac47d5d 100644
--- a/packages/pl-fe/src/layouts/landing-layout.tsx
+++ b/packages/pl-fe/src/layouts/landing-layout.tsx
@@ -7,7 +7,7 @@ import {
 } from 'pl-fe/features/ui/util/async-components';
 import { useAppSelector, useFeatures } from 'pl-fe/hooks';
 
-import { Layout } from '../components/ui';
+import Layout from 'pl-fe/components/ui/layout';
 
 interface ILandingLayout {
   children: React.ReactNode;
diff --git a/packages/pl-fe/src/layouts/manage-groups-layout.tsx b/packages/pl-fe/src/layouts/manage-groups-layout.tsx
index 2adb3beec2..5e140f2825 100644
--- a/packages/pl-fe/src/layouts/manage-groups-layout.tsx
+++ b/packages/pl-fe/src/layouts/manage-groups-layout.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Layout } from 'pl-fe/components/ui';
+import Layout from 'pl-fe/components/ui/layout';
 import LinkFooter from 'pl-fe/features/ui/components/link-footer';
 import { MyGroupsPanel, NewGroupPanel } from 'pl-fe/features/ui/util/async-components';
 
diff --git a/packages/pl-fe/src/layouts/profile-layout.tsx b/packages/pl-fe/src/layouts/profile-layout.tsx
index b72d8943d9..00b56573a2 100644
--- a/packages/pl-fe/src/layouts/profile-layout.tsx
+++ b/packages/pl-fe/src/layouts/profile-layout.tsx
@@ -4,7 +4,9 @@ import { FormattedMessage } from 'react-intl';
 import { Redirect, useHistory } from 'react-router-dom';
 
 import { useAccountLookup } from 'pl-fe/api/hooks';
-import { Column, Layout, Tabs } from 'pl-fe/components/ui';
+import Column from 'pl-fe/components/ui/column';
+import Layout from 'pl-fe/components/ui/layout';
+import Tabs from 'pl-fe/components/ui/tabs';
 import Header from 'pl-fe/features/account/components/header';
 import LinkFooter from 'pl-fe/features/ui/components/link-footer';
 import {
diff --git a/packages/pl-fe/src/layouts/remote-instance-layout.tsx b/packages/pl-fe/src/layouts/remote-instance-layout.tsx
index d410d78ba4..6a45e45ba2 100644
--- a/packages/pl-fe/src/layouts/remote-instance-layout.tsx
+++ b/packages/pl-fe/src/layouts/remote-instance-layout.tsx
@@ -9,7 +9,7 @@ import {
 import { useAppSelector, useOwnAccount } from 'pl-fe/hooks';
 import { federationRestrictionsDisclosed } from 'pl-fe/utils/state';
 
-import { Layout } from '../components/ui';
+import Layout from 'pl-fe/components/ui/layout';
 
 interface IRemoteInstanceLayout {
   params?: {
diff --git a/packages/pl-fe/src/layouts/search-layout.tsx b/packages/pl-fe/src/layouts/search-layout.tsx
index 546b5a9adc..cffaecd84b 100644
--- a/packages/pl-fe/src/layouts/search-layout.tsx
+++ b/packages/pl-fe/src/layouts/search-layout.tsx
@@ -8,7 +8,7 @@ import {
 } from 'pl-fe/features/ui/util/async-components';
 import { useAppSelector, useFeatures } from 'pl-fe/hooks';
 
-import { Layout } from '../components/ui';
+import Layout from 'pl-fe/components/ui/layout';
 
 interface ISearchLayout {
   children: React.ReactNode;
diff --git a/packages/pl-fe/src/layouts/status-layout.tsx b/packages/pl-fe/src/layouts/status-layout.tsx
index 003fa9d304..953fac5da4 100644
--- a/packages/pl-fe/src/layouts/status-layout.tsx
+++ b/packages/pl-fe/src/layouts/status-layout.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 
+import Layout from 'pl-fe/components/ui/layout';
 import LinkFooter from 'pl-fe/features/ui/components/link-footer';
 import { WhoToFollowPanel, TrendsPanel, SignUpPanel } from 'pl-fe/features/ui/util/async-components';
 import { useAppSelector, useFeatures } from 'pl-fe/hooks';
 
-import { Layout } from '../components/ui';
-
 interface IStatusLayout {
   children: React.ReactNode;
 }
diff --git a/packages/pl-fe/src/toast.test.tsx b/packages/pl-fe/src/toast.test.tsx
index 16ab51ce19..f7af5215c7 100644
--- a/packages/pl-fe/src/toast.test.tsx
+++ b/packages/pl-fe/src/toast.test.tsx
@@ -12,7 +12,7 @@ const renderApp = () => ({
   toast,
   ...render(
     <IntlProvider locale='en'>
-      <Toaster />,
+      <Toaster />
     </IntlProvider>,
   ),
 });
diff --git a/packages/pl-fe/src/toast.tsx b/packages/pl-fe/src/toast.tsx
index 0da442f800..9a753ac337 100644
--- a/packages/pl-fe/src/toast.tsx
+++ b/packages/pl-fe/src/toast.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import toast from 'react-hot-toast';
 import { defineMessages, MessageDescriptor } from 'react-intl';
 
-import { Toast } from './components/ui';
+import Toast from './components/ui/toast';
 import { httpErrorMessages } from './utils/errors';
 
 import type { PlfeResponse } from './api';