diff --git a/packages/pl-fe/src/actions/moderation.tsx b/packages/pl-fe/src/actions/moderation.tsx
index 9ce098397..8358b701a 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 0111fd32b..368edaf6c 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 70ecec5d5..a9dd7f8bd 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 a4fc88a87..ad1c8642d 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 b61610783..662bfede5 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 4ad75ab1b..b7810d2de 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 0d384eaa2..2afe7e827 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 7776fe6ff..a8241cffd 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 6a486a317..1b6a247c3 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 dfa8af73d..f903d646e 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 264c1df13..ff3dc87da 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 b203c2348..2079aafa0 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 0bf48a5f1..3d21eabc6 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 575facdcc..af94998fa 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 11c1d2b21..026c97452 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 a69fba7f7..4ffeacf86 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 0680524d6..6298073d9 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 4b81bc274..ec97b09d9 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 0e91bc00f..d5881ff4b 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 1bf634be3..14944eee8 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 5a89465bf..7c53233e0 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 582d98990..68bcabb39 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 0adb8ec72..e29a81c96 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 3005ae8b2..0af7e4103 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 c84549d75..78c3adf56 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 50d5c5bce..aa561a72d 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 607a2b129..8c83d1f13 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 86682921c..53feebbd5 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 6f44d549f..644c772d3 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 15b25afdc..0a229b5b4 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 1e3c883ad..b1f8e388b 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 6a437a4dd..088ca4ccf 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 b2956ddeb..183a945fa 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 6d08a52a0..47f8f6759 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 2339daa3e..efc8b853e 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 d5315d949..97a6d5079 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 eb5306b71..7e7190f41 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 11e3a9976..5564dc4d1 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 ab29ed4b5..b8042a614 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 2ac55a89c..68ede69da 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 261e49bbc..3643d3264 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 d4d896df8..7d7887026 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 de5da2065..0afbc1826 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 579f2cf09..4877c6d22 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 e8e064767..fa25d7c7d 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 f9cd59c59..643a80aa7 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 fd15e6393..92e100686 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 fee1a6b35..7cd617573 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 819d27498..1fbf8afee 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 1faab33da..d9078a476 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 6db9c44aa..53e90cc16 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 71a83bb58..c70015f21 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 c10dae442..996f903f6 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 f98d5ba21..6e01b48d6 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 156a1b94f..acd17e700 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 61bb106b7..a16a6662a 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 1da4a5f91..89b17b82a 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 7ec54b644..dfd30be0a 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 434c06949..a07692702 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 ac3ed118a..adabb9847 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 5fd42e744..51bfdf53a 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 0bcb4c057..9b25b9f97 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 c0297e884..a65a9b7ae 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 7ecd826b6..3225c4cba 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 2c976d6b9..a055d5d51 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 5f4cc11f6..b6e796d96 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 cd317e5df..97336cb0e 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 0401b83b9..c11beae84 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 25798845a..1c1d7f30b 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 471242904..4f0b6bca4 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 6c361164a..5dbb07aa1 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 be96b3e94..039ef3bc6 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 afc2f2f07..7f2edb59d 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 15a518a88..0fc982c7c 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 4ebb4ca1c..5ea472123 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 73e579f9d..4bdfc9b6f 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 bf61043d1..9bd9ba8e3 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 8fe153e94..1df33861e 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 40743a433..6e308801b 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 06b8b7b88..eacef2e61 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 84d41c0e8..802b8a06e 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 2810ad44a..1a5bcfe74 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 67d7707f1..5d6b2b0fd 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 a950ee936..c022a8a57 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 b472ab415..2c720cf8d 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 09d8c2570..2ef8e7bc0 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 d2beac900..9e4847ba5 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 23402b1d4..e4c57bc4a 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 0fe5f7293..6e46ad099 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 f9bfbce78..a4f9bace0 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 edf3e189b..5125397d1 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 31767d7c5..fa3291c38 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 4d9763209..1d8fe6e4d 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 e53f7c286..24b1dd769 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 3e604c1a1..4f7bac9b6 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 08c3eac7e..65a3c3b04 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 e51fd5214..c55e3efd4 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 6d25ad539..2ebb08a89 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 66665edeb..609fb561e 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 5815b6d4a..4d27023c8 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 d918a9b2a..5fd1fac9f 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 7f9d3a482..e32455b59 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 6d98e0810..28736aef1 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 668c1108d..4b09c7dd6 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 fe8b5951f..2d935da0d 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 cb5b633ea..1380ae8ee 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 e6ce665ea..505fad53c 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 1c0302a8f..b16323ffe 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 b5f5b6f57..c0aa28a39 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 0ca76374c..3006b3975 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 9895ced11..28bca1dab 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 d33ad510d..449e0c9fa 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 9a198610b..2813175cc 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 78f27a572..16d8c414c 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 f99a29d4e..beffa5b2a 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 b62ef7e92..0186a8eb0 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 483ff0317..e78bf3c9e 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 18e30f7b7..d11898c8a 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 bbf53c815..0b51eb060 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 938e9416c..f68ce1f7f 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 00f2f7b80..53a188d46 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 e1ea885ee..49395d56c 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 b1d1b2fbc..9e005dabf 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 2a9a7ef73..89f2d12c9 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 94f58da12..aa1006f6f 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 1d08e100d..a18f75b1f 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 6d1789416..68b4568f8 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 d5465bba5..4a79d65de 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 0d7169c61..085526600 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 feed68550..7c8278941 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 31d9f900f..ce7e421c2 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 779cce3d1..4540cd1ee 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 6724dc4e1..f0fec43ac 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 3944faaae..3ada74f60 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 f5013079a..e9c4b6f80 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 4a299f958..71207bb9b 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 12f4eb72c..1cd9d74a5 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 8b52f3671..02d373198 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 0a0b35a79..495d0934a 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 2eae91ef4..01174c076 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 9de7dd77a..a38bed3c3 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 1e0677211..f91d2c1e8 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 c0c229db2..af6c6719d 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 2341b38d6..56a05cee2 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 1f37165d7..d43fc4ebd 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 fe1874d94..5b73cd78b 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 2795a4238..85351a739 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 71f3ee3b1..e094fc424 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 be086c809..aac10cb72 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 7d981dae8..fc96ba227 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 8a76361d4..696d44dbb 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 dc24d8597..927eb74cc 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 5d260ffd6..8ce2fa394 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 7e390b41f..6e5be1e20 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 725d738f0..1718f5140 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 6fcfff55e..78c216b1d 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 6953ad530..d3fa09016 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 ea5c9351a..8421cb20f 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 d7ef5b9b1..09461b78c 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 ef4a3dc19..eadd306c5 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 02681b36b..3ccc075c0 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 3e4828022..402f36cef 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 87545c76a..888e331dd 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 9d3d4faa5..83bc8ea3e 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 0af7bb1f5..587573732 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 e8b5c3c69..d2b5d3505 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 bf3a6a4d0..4ffd90b6a 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 5f621a14d..de5284e9b 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 40697489e..eecff1681 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 d3d730d73..9c6486b6d 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 ff6efe798..8d4e1b5e9 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 b178da6f1..d879c6fd8 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 185fe88bd..9176c9531 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 5b229b8dd..25ab30ed2 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 23f4576bb..cd6262d2e 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 1bf90356d..b4528d597 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 4d75f3868..448cf3eb6 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 24a33ece3..b80556549 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 96125985a..d0a5f2ee5 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 998a97850..964bca581 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 3440252f2..155b852e1 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 37a2a8e13..29b877034 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 29269afc0..3a8803122 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 e7536c216..0656acfc4 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 138194164..8d1c44f48 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 fb3b99673..3b77da507 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 fcaa86f96..f4e511095 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 ac57ab571..77b3ad99a 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 d57af490d..123f596ab 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 687a7cdcd..48ded8ba9 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 b4b67d53f..879b45568 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 dd9f5fd06..e48232996 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 18414f10c..ec5c8ac7a 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 ef8f09ea7..b234c169f 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 c6946ead0..52c2ee7d0 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 728b5db95..71854c6cb 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 92292b2a4..1770ec3c9 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 7b67a3718..1f7f5a6e2 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 2018fb173..9ceeb84f2 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 840ee6dac..30fa8b503 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 e77467c32..b9117a95b 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 74c8006a0..e8e256a70 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 ba3a763f6..b5e44cbe2 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 40ddf34d6..e26bcf0be 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 3828dde6d..10ffc5b84 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 3aab3dfbc..06ebadbfc 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 61d2a24f0..7c260700c 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 d44b1ef1f..f06887989 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 17b52c775..b0454b245 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 85240ec17..f8069426e 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 1c16b9e45..19ad4da2b 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 63204301a..93a2dd2fd 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 3af063a0c..7d9218c7d 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 3c1e5ecf5..d11ff1ca8 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 dc4f46091..016094db4 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 601863362..a0109353a 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 64db26be3..adb988491 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 39a74eaf6..aae9ed6f7 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 842ec67a5..603d6efca 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 c7fa20852..ea55d247d 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 fb49a194b..e8fbdbc8c 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 929f1e343..f40f3b579 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 92adacc98..328a28261 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 c400a83f0..9d1efe8d1 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 31b79a919..8c24f12b0 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 98d3b0b10..96e76c08e 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 f62051486..18372dda0 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 87b006cf3..5355be07c 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 a3f6a3241..26320092e 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 05ebf7e79..cb8f1507b 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 5b2772c45..bd8588689 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 4db0cbe0b..cdebac4b6 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 78d2c92a7..55c2791ad 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 f2203510f..037a168a4 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 825dafdaa..3ee194d9b 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 ba559f169..893cc8169 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 e2767da09..41fe3ab62 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 6a8120c58..b41bbd501 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 b7d999869..6804af0c8 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 9474cf108..95893558e 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 48388ca47..6e5d00fa7 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 e8d57df3a..bc0b6e3a1 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 d8df3ac7f..48ae3a635 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 4b640b61c..8bc34469d 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 8d185b89d..a445913d7 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 c426949f6..9a0919d38 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 f4c8b227f..d8d46a84f 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 a0d2f1eb6..7b4e7409f 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 ee34b2be2..b04a52b2b 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 dcb887a03..eeaafd656 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 215825a15..59295c12c 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 ef5b04128..f72fd9c0e 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 63e3b3d90..f6dc00b23 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 12f00d6e4..e59606608 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 c3cfc7862..efcbad420 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 ba4c191c6..b6bd4cfc5 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 5a0f99682..2ef2004d0 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 5b9408c65..5fa23c98b 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 cd9b768f1..6ed23b8fd 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 1fab40415..dd09a9a26 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 d764c2382..ce6604982 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 6c152e3f9..f0e33a55c 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 80a07e8d1..ccf813030 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 f334033fa..cc94c0869 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 e00d944b2..a19f1ece3 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 4a2ecea49..32298f147 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 948508817..52950a63b 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 3261952ed..03d4fdae1 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 6657f630a..9f8eeb220 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 90e5be94e..683d23aaf 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 474bafd48..4468ebef3 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 7f426d8a5..238e8d467 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 621413e4f..5e65fb3f6 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 4bc053472..d70ac47d5 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 2adb3beec..5e140f282 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 b72d8943d..00b56573a 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 d410d78ba..6a45e45ba 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 546b5a9ad..cffaecd84 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 003fa9d30..953fac5da 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 16ab51ce1..f7af5215c 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 0da442f80..9a753ac33 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';