diff --git a/app/soapbox/components/dropdown-menu.tsx b/app/soapbox/components/dropdown-menu.tsx
index 435386b61..349be8eee 100644
--- a/app/soapbox/components/dropdown-menu.tsx
+++ b/app/soapbox/components/dropdown-menu.tsx
@@ -6,7 +6,7 @@ import { spring } from 'react-motion';
 import Overlay from 'react-overlays/lib/Overlay';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
-import { IconButton, Counter } from 'soapbox/components/ui';
+import { Counter, IconButton } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import Motion from 'soapbox/features/ui/util/optional-motion';
 
diff --git a/app/soapbox/components/emoji-button-wrapper.tsx b/app/soapbox/components/emoji-button-wrapper.tsx
index 23a165fcb..cc528b194 100644
--- a/app/soapbox/components/emoji-button-wrapper.tsx
+++ b/app/soapbox/components/emoji-button-wrapper.tsx
@@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux';
 
 import { simpleEmojiReact } from 'soapbox/actions/emoji-reacts';
 import { openModal } from 'soapbox/actions/modals';
-import EmojiSelector from 'soapbox/components/ui/emoji-selector/emoji-selector';
+import { EmojiSelector } from 'soapbox/components/ui';
 import { useAppSelector, useOwnAccount, useSoapboxConfig } from 'soapbox/hooks';
 import { isUserTouching } from 'soapbox/is-mobile';
 import { getReactForStatus } from 'soapbox/utils/emoji-reacts';
diff --git a/app/soapbox/components/ui/index.ts b/app/soapbox/components/ui/index.ts
index 90f5933ed..4953ed9eb 100644
--- a/app/soapbox/components/ui/index.ts
+++ b/app/soapbox/components/ui/index.ts
@@ -35,6 +35,7 @@ export { default as RadioButton } from './radio-button/radio-button';
 export { default as Select } from './select/select';
 export { default as Spinner } from './spinner/spinner';
 export { default as Stack } from './stack/stack';
+export { default as Streamfield } from './streamfield/streamfield';
 export { default as Tabs } from './tabs/tabs';
 export { default as TagInput } from './tag-input/tag-input';
 export { default as Text } from './text/text';
diff --git a/app/soapbox/components/ui/radio-button/radio-button.tsx b/app/soapbox/components/ui/radio-button/radio-button.tsx
index 792b4d0cc..96f2c2ec4 100644
--- a/app/soapbox/components/ui/radio-button/radio-button.tsx
+++ b/app/soapbox/components/ui/radio-button/radio-button.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { v4 as uuidv4 } from 'uuid';
+
 import HStack from '../hstack/hstack';
 
 interface IRadioButton {
diff --git a/app/soapbox/components/ui/widget/widget.tsx b/app/soapbox/components/ui/widget/widget.tsx
index 3bced193f..16cc33234 100644
--- a/app/soapbox/components/ui/widget/widget.tsx
+++ b/app/soapbox/components/ui/widget/widget.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 
-import { Text, IconButton } from 'soapbox/components/ui';
-import HStack from 'soapbox/components/ui/hstack/hstack';
-import Stack from 'soapbox/components/ui/stack/stack';
+import { HStack, IconButton, Stack, Text } from 'soapbox/components/ui';
 
 interface IWidgetTitle {
   /** Title text for the widget. */
diff --git a/app/soapbox/components/verification-badge.tsx b/app/soapbox/components/verification-badge.tsx
index 766decb88..aea2f5f81 100644
--- a/app/soapbox/components/verification-badge.tsx
+++ b/app/soapbox/components/verification-badge.tsx
@@ -2,7 +2,7 @@ import classNames from 'clsx';
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
-import Icon from 'soapbox/components/ui/icon/icon';
+import { Icon } from 'soapbox/components/ui';
 import { useSoapboxConfig } from 'soapbox/hooks';
 
 const messages = defineMessages({
diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx
index fdc39c6b0..48c1eff8f 100644
--- a/app/soapbox/features/account/components/header.tsx
+++ b/app/soapbox/features/account/components/header.tsx
@@ -17,7 +17,7 @@ import { getSettings } from 'soapbox/actions/settings';
 import snackbar from 'soapbox/actions/snackbar';
 import Badge from 'soapbox/components/badge';
 import StillImage from 'soapbox/components/still-image';
-import { HStack, IconButton, Menu, MenuButton, MenuItem, MenuList, MenuLink, MenuDivider, Avatar } from 'soapbox/components/ui';
+import { Avatar, HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import MovedNote from 'soapbox/features/account-timeline/components/moved-note';
 import ActionButton from 'soapbox/features/ui/components/action-button';
diff --git a/app/soapbox/features/ads/components/ad.tsx b/app/soapbox/features/ads/components/ad.tsx
index a0db9f78d..73446989d 100644
--- a/app/soapbox/features/ads/components/ad.tsx
+++ b/app/soapbox/features/ads/components/ad.tsx
@@ -2,8 +2,7 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import React, { useState, useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Stack, HStack, Card, Avatar, Text, Icon } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
+import { Avatar, Card, HStack, Icon, IconButton, Stack, Text } from 'soapbox/components/ui';
 import StatusCard from 'soapbox/features/status/components/card';
 import { useAppSelector } from 'soapbox/hooks';
 
diff --git a/app/soapbox/features/edit-profile/index.tsx b/app/soapbox/features/edit-profile/index.tsx
index 1967e9138..21fbd66fc 100644
--- a/app/soapbox/features/edit-profile/index.tsx
+++ b/app/soapbox/features/edit-profile/index.tsx
@@ -15,16 +15,17 @@ import {
   FormGroup,
   HStack,
   Input,
+  Streamfield,
   Textarea,
   Toggle,
 } from 'soapbox/components/ui';
-import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures } from 'soapbox/hooks';
 import { normalizeAccount } from 'soapbox/normalizers';
 import resizeImage from 'soapbox/utils/resize-image';
 
 import ProfilePreview from './components/profile-preview';
 
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import type { Account } from 'soapbox/types/entities';
 
 /**
diff --git a/app/soapbox/features/feed-suggestions/feed-suggestions.tsx b/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
index 68985453c..dc2b334c1 100644
--- a/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
+++ b/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
@@ -78,7 +78,7 @@ const FeedSuggestions = () => {
       </HStack>
 
       <CardBody>
-        <HStack alignItems='center' className='overflow-x-auto lg:overflow-x-hidden space-x-4 md:space-x-0'>
+        <HStack space={4} alignItems='center' className='overflow-x-auto lg:overflow-x-hidden md:space-x-0'>
           {suggestedProfiles.slice(0, 4).map((suggestedProfile) => (
             <SuggestionItem key={suggestedProfile.account} accountId={suggestedProfile.account} />
           ))}
diff --git a/app/soapbox/features/placeholder/components/placeholder-notification.tsx b/app/soapbox/features/placeholder/components/placeholder-notification.tsx
index d3dab9005..fbeec6a42 100644
--- a/app/soapbox/features/placeholder/components/placeholder-notification.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-notification.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { HStack } from 'soapbox/components/ui';
 
 import PlaceholderAvatar from './placeholder-avatar';
diff --git a/app/soapbox/features/soapbox-config/components/crypto-address-input.tsx b/app/soapbox/features/soapbox-config/components/crypto-address-input.tsx
index 75ffec27c..5e0a6de2c 100644
--- a/app/soapbox/features/soapbox-config/components/crypto-address-input.tsx
+++ b/app/soapbox/features/soapbox-config/components/crypto-address-input.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { HStack, Input } from 'soapbox/components/ui';
-import { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import type { CryptoAddress } from 'soapbox/types/soapbox';
 
 const messages = defineMessages({
diff --git a/app/soapbox/features/soapbox-config/components/footer-link-input.tsx b/app/soapbox/features/soapbox-config/components/footer-link-input.tsx
index bf2451240..19b6af9f7 100644
--- a/app/soapbox/features/soapbox-config/components/footer-link-input.tsx
+++ b/app/soapbox/features/soapbox-config/components/footer-link-input.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { HStack, Input } from 'soapbox/components/ui';
-import { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import type { FooterItem } from 'soapbox/types/soapbox';
 
 const messages = defineMessages({
diff --git a/app/soapbox/features/soapbox-config/components/promo-panel-input.tsx b/app/soapbox/features/soapbox-config/components/promo-panel-input.tsx
index 616fddb82..b894b5984 100644
--- a/app/soapbox/features/soapbox-config/components/promo-panel-input.tsx
+++ b/app/soapbox/features/soapbox-config/components/promo-panel-input.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { HStack, Input } from 'soapbox/components/ui';
-import { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 
 import IconPicker from './icon-picker';
 
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import type { PromoPanelItem } from 'soapbox/types/soapbox';
 
 const messages = defineMessages({
diff --git a/app/soapbox/features/soapbox-config/index.tsx b/app/soapbox/features/soapbox-config/index.tsx
index 72cd1de7d..8cf88688e 100644
--- a/app/soapbox/features/soapbox-config/index.tsx
+++ b/app/soapbox/features/soapbox-config/index.tsx
@@ -8,19 +8,19 @@ import snackbar from 'soapbox/actions/snackbar';
 import List, { ListItem } from 'soapbox/components/list';
 import {
   Accordion,
+  Button,
   Column,
   CardHeader,
   CardTitle,
+  FileInput,
   Form,
   FormActions,
   FormGroup,
   Input,
-  FileInput,
+  Streamfield,
   Textarea,
-  Button,
   Toggle,
 } from 'soapbox/components/ui';
-import Streamfield from 'soapbox/components/ui/streamfield/streamfield';
 import ThemeSelector from 'soapbox/features/ui/components/theme-selector';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers';
diff --git a/app/soapbox/features/ui/components/modals/actions-modal.tsx b/app/soapbox/features/ui/components/modals/actions-modal.tsx
index 63a731d2c..ab2ca6402 100644
--- a/app/soapbox/features/ui/components/modals/actions-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/actions-modal.tsx
@@ -34,8 +34,8 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
     return (
       <li key={`${text}-${i}`}>
         <HStack
-          space={2.5}
           {...compProps}
+          space={2.5}
           data-index={i}
           className={classNames('w-full', { active, destructive })}
           data-method={isLogout ? 'delete' : null}
diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index 82c2e4bc6..2fd186830 100644
--- a/app/soapbox/features/ui/components/navbar.tsx
+++ b/app/soapbox/features/ui/components/navbar.tsx
@@ -78,9 +78,10 @@ const Navbar = () => {
             </div>
           )}
 
-          <div
-            className={classNames({
-              'flex-1 flex items-center lg:items-stretch space-x-4': true,
+          <HStack
+            space={4}
+            alignItems='center'
+            className={classNames('flex-1 enter lg:items-stretch', {
               'justify-center lg:justify-start': account,
               'justify-start': !account,
             })}
@@ -97,7 +98,7 @@ const Navbar = () => {
                 </div>
               </div>
             )}
-          </div>
+          </HStack>
 
           <HStack space={3} alignItems='center' className='absolute inset-y-0 right-0 pr-2 lg:static lg:inset-auto lg:ml-6 lg:pr-0'>
             {account ? (
diff --git a/app/soapbox/features/ui/components/theme-selector.tsx b/app/soapbox/features/ui/components/theme-selector.tsx
index e285788e0..8ce8199e7 100644
--- a/app/soapbox/features/ui/components/theme-selector.tsx
+++ b/app/soapbox/features/ui/components/theme-selector.tsx
@@ -1,9 +1,7 @@
 import React, { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Icon } from 'soapbox/components/ui';
-
-import Select from '../../../components/ui/select/select';
+import { Icon, Select } from 'soapbox/components/ui';
 
 const messages = defineMessages({
   light: { id: 'theme_toggle.light', defaultMessage: 'Light' },
diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss
index 257ad8af6..e91dfb6f8 100644
--- a/app/styles/components/detailed-status.scss
+++ b/app/styles/components/detailed-status.scss
@@ -39,7 +39,7 @@
   // }
 
   &__connector {
-    @apply bg-gray-200 dark:bg-primary-800 absolute w-0.5 left-5 hidden;
+    @apply bg-gray-200 dark:bg-primary-800 absolute w-0.5 left-5 hidden z-[1];
 
     &--bottom {
       @apply block;
@@ -48,17 +48,3 @@
     }
   }
 }
-
-.thread {
-  .ptr,
-  .ptr__children {
-    background: var(--foreground-color) !important;
-    border-radius: 10px;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-
-    @media screen and (max-width: 580px) {
-      border-radius: 0;
-    }
-  }
-}