diff --git a/packages/pl-fe/src/components/account-search.tsx b/packages/pl-fe/src/components/account-search.tsx
index 1571dcc1d..8e0509045 100644
--- a/packages/pl-fe/src/components/account-search.tsx
+++ b/packages/pl-fe/src/components/account-search.tsx
@@ -4,7 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
import AutosuggestAccountInput from 'pl-fe/components/autosuggest-account-input';
-import SvgIcon from './ui/icon/svg-icon';
+import SvgIcon from './ui/svg-icon';
const messages = defineMessages({
placeholder: { id: 'account_search.placeholder', defaultMessage: 'Search for an account' },
diff --git a/packages/pl-fe/src/components/autosuggest-account-input.tsx b/packages/pl-fe/src/components/autosuggest-account-input.tsx
index 90ef70f9e..a7e867a15 100644
--- a/packages/pl-fe/src/components/autosuggest-account-input.tsx
+++ b/packages/pl-fe/src/components/autosuggest-account-input.tsx
@@ -7,7 +7,7 @@ import AutosuggestInput, { AutoSuggestion } from 'pl-fe/components/autosuggest-i
import { useAppDispatch } from 'pl-fe/hooks';
import type { Menu } from 'pl-fe/components/dropdown-menu';
-import type { InputThemes } from 'pl-fe/components/ui/input/input';
+import type { InputThemes } from 'pl-fe/components/ui/input';
const noOp = () => { };
diff --git a/packages/pl-fe/src/components/autosuggest-input.tsx b/packages/pl-fe/src/components/autosuggest-input.tsx
index 340c70b54..4ad75ab1b 100644
--- a/packages/pl-fe/src/components/autosuggest-input.tsx
+++ b/packages/pl-fe/src/components/autosuggest-input.tsx
@@ -9,7 +9,7 @@ import AutosuggestAccount from 'pl-fe/features/compose/components/autosuggest-ac
import { textAtCursorMatchesToken } from 'pl-fe/utils/suggestions';
import type { Menu, MenuItem } from 'pl-fe/components/dropdown-menu';
-import type { InputThemes } from 'pl-fe/components/ui/input/input';
+import type { InputThemes } from 'pl-fe/components/ui/input';
import type { Emoji } from 'pl-fe/features/emoji';
type AutoSuggestion = string | Emoji;
diff --git a/packages/pl-fe/src/components/markup.tsx b/packages/pl-fe/src/components/markup.tsx
index 898bf68d9..058bf8070 100644
--- a/packages/pl-fe/src/components/markup.tsx
+++ b/packages/pl-fe/src/components/markup.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import Text, { IText } from './ui/text/text';
+import Text, { IText } from './ui/text';
interface IMarkup extends IText {
}
diff --git a/packages/pl-fe/src/components/relative-timestamp.tsx b/packages/pl-fe/src/components/relative-timestamp.tsx
index af74b9232..cd6c890c4 100644
--- a/packages/pl-fe/src/components/relative-timestamp.tsx
+++ b/packages/pl-fe/src/components/relative-timestamp.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { injectIntl, defineMessages, IntlShape, FormatDateOptions } from 'react-intl';
-import Text, { IText } from './ui/text/text';
+import Text, { IText } from './ui/text';
const messages = defineMessages({
just_now: { id: 'relative_time.just_now', defaultMessage: 'now' },
diff --git a/packages/pl-fe/src/components/status-content.tsx b/packages/pl-fe/src/components/status-content.tsx
index 02f8f6103..2ac55a89c 100644
--- a/packages/pl-fe/src/components/status-content.tsx
+++ b/packages/pl-fe/src/components/status-content.tsx
@@ -14,7 +14,7 @@ import Markup from './markup';
import { ParsedContent } from './parsed-content';
import Poll from './polls/poll';
-import type { Sizes } from 'pl-fe/components/ui/text/text';
+import type { Sizes } from 'pl-fe/components/ui/text';
import type { MinifiedStatus } from 'pl-fe/reducers/statuses';
const BIG_EMOJI_LIMIT = 10;
diff --git a/packages/pl-fe/src/components/ui/accordion/accordion.tsx b/packages/pl-fe/src/components/ui/accordion.tsx
similarity index 96%
rename from packages/pl-fe/src/components/ui/accordion/accordion.tsx
rename to packages/pl-fe/src/components/ui/accordion.tsx
index 3cb98101f..069b96cbf 100644
--- a/packages/pl-fe/src/components/ui/accordion/accordion.tsx
+++ b/packages/pl-fe/src/components/ui/accordion.tsx
@@ -4,9 +4,9 @@ import { defineMessages, useIntl } from 'react-intl';
import DropdownMenu from 'pl-fe/components/dropdown-menu';
-import HStack from '../hstack/hstack';
-import Icon from '../icon/icon';
-import Text from '../text/text';
+import HStack from './hstack';
+import Icon from './icon';
+import Text from './text';
import type { Menu } from 'pl-fe/components/dropdown-menu';
diff --git a/packages/pl-fe/src/components/ui/avatar/avatar.test.tsx b/packages/pl-fe/src/components/ui/avatar.test.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/avatar/avatar.test.tsx
rename to packages/pl-fe/src/components/ui/avatar.test.tsx
diff --git a/packages/pl-fe/src/components/ui/avatar/avatar.tsx b/packages/pl-fe/src/components/ui/avatar.tsx
similarity index 97%
rename from packages/pl-fe/src/components/ui/avatar/avatar.tsx
rename to packages/pl-fe/src/components/ui/avatar.tsx
index 8f02060a8..c18f45bf6 100644
--- a/packages/pl-fe/src/components/ui/avatar/avatar.tsx
+++ b/packages/pl-fe/src/components/ui/avatar.tsx
@@ -4,7 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
import StillImage, { IStillImage } from 'pl-fe/components/still-image';
-import Icon from '../icon/icon';
+import Icon from './icon';
const AVATAR_SIZE = 42;
diff --git a/packages/pl-fe/src/components/ui/banner/banner.tsx b/packages/pl-fe/src/components/ui/banner.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/banner/banner.tsx
rename to packages/pl-fe/src/components/ui/banner.tsx
diff --git a/packages/pl-fe/src/components/ui/button/button.test.tsx b/packages/pl-fe/src/components/ui/button/index.test.tsx
similarity index 98%
rename from packages/pl-fe/src/components/ui/button/button.test.tsx
rename to packages/pl-fe/src/components/ui/button/index.test.tsx
index f2335cb68..6e74963ce 100644
--- a/packages/pl-fe/src/components/ui/button/button.test.tsx
+++ b/packages/pl-fe/src/components/ui/button/index.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import { fireEvent, render, screen } from 'pl-fe/jest/test-helpers';
-import Button from './button';
+import Button from '.';
describe('', () => {
it('renders the given text', () => {
diff --git a/packages/pl-fe/src/components/ui/button/button.tsx b/packages/pl-fe/src/components/ui/button/index.tsx
similarity index 98%
rename from packages/pl-fe/src/components/ui/button/button.tsx
rename to packages/pl-fe/src/components/ui/button/index.tsx
index 8df66dce4..373b10754 100644
--- a/packages/pl-fe/src/components/ui/button/button.tsx
+++ b/packages/pl-fe/src/components/ui/button/index.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
import React from 'react';
import { Link } from 'react-router-dom';
-import Icon from '../icon/icon';
+import Icon from '../icon';
import { useButtonStyles } from './useButtonStyles';
diff --git a/packages/pl-fe/src/components/ui/card/card.test.tsx b/packages/pl-fe/src/components/ui/card.test.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/card/card.test.tsx
rename to packages/pl-fe/src/components/ui/card.test.tsx
diff --git a/packages/pl-fe/src/components/ui/card/card.tsx b/packages/pl-fe/src/components/ui/card.tsx
similarity index 96%
rename from packages/pl-fe/src/components/ui/card/card.tsx
rename to packages/pl-fe/src/components/ui/card.tsx
index 7bc67acd3..c10dae442 100644
--- a/packages/pl-fe/src/components/ui/card/card.tsx
+++ b/packages/pl-fe/src/components/ui/card.tsx
@@ -3,10 +3,10 @@ import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { Link } from 'react-router-dom';
-import SvgIcon from 'pl-fe/components/ui/icon/svg-icon';
+import SvgIcon from 'pl-fe/components/ui/svg-icon';
-import HStack from '../hstack/hstack';
-import Text from '../text/text';
+import HStack from './hstack';
+import Text from './text';
const sizes = {
md: 'p-4 sm:rounded-xl',
diff --git a/packages/pl-fe/src/components/ui/carousel/carousel.tsx b/packages/pl-fe/src/components/ui/carousel.tsx
similarity index 97%
rename from packages/pl-fe/src/components/ui/carousel/carousel.tsx
rename to packages/pl-fe/src/components/ui/carousel.tsx
index 414ae24ac..5442b2a6d 100644
--- a/packages/pl-fe/src/components/ui/carousel/carousel.tsx
+++ b/packages/pl-fe/src/components/ui/carousel.tsx
@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react';
import { useDimensions } from 'pl-fe/hooks';
-import HStack from '../hstack/hstack';
-import Icon from '../icon/icon';
+import HStack from './hstack';
+import Icon from './icon';
interface ICarousel {
children: any;
diff --git a/packages/pl-fe/src/components/ui/checkbox/checkbox.tsx b/packages/pl-fe/src/components/ui/checkbox.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/checkbox/checkbox.tsx
rename to packages/pl-fe/src/components/ui/checkbox.tsx
diff --git a/packages/pl-fe/src/components/ui/column/column.test.tsx b/packages/pl-fe/src/components/ui/column.test.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/column/column.test.tsx
rename to packages/pl-fe/src/components/ui/column.test.tsx
diff --git a/packages/pl-fe/src/components/ui/column/column.tsx b/packages/pl-fe/src/components/ui/column.tsx
similarity index 99%
rename from packages/pl-fe/src/components/ui/column/column.tsx
rename to packages/pl-fe/src/components/ui/column.tsx
index 5c43e98c6..f98d5ba21 100644
--- a/packages/pl-fe/src/components/ui/column/column.tsx
+++ b/packages/pl-fe/src/components/ui/column.tsx
@@ -6,7 +6,7 @@ import { useHistory } from 'react-router-dom';
import Helmet from 'pl-fe/components/helmet';
import { usePlFeConfig } from 'pl-fe/hooks';
-import { Card, CardBody, CardHeader, CardTitle, type CardSizes } from '../card/card';
+import { Card, CardBody, CardHeader, CardTitle, type CardSizes } from './card';
type IColumnHeader = Pick;
diff --git a/packages/pl-fe/src/components/ui/combobox/combobox.css b/packages/pl-fe/src/components/ui/combobox.css
similarity index 100%
rename from packages/pl-fe/src/components/ui/combobox/combobox.css
rename to packages/pl-fe/src/components/ui/combobox.css
diff --git a/packages/pl-fe/src/components/ui/combobox/combobox.tsx b/packages/pl-fe/src/components/ui/combobox.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/combobox/combobox.tsx
rename to packages/pl-fe/src/components/ui/combobox.tsx
diff --git a/packages/pl-fe/src/components/ui/counter/counter.tsx b/packages/pl-fe/src/components/ui/counter.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/counter/counter.tsx
rename to packages/pl-fe/src/components/ui/counter.tsx
diff --git a/packages/pl-fe/src/components/ui/datepicker/datepicker.test.tsx b/packages/pl-fe/src/components/ui/datepicker/datepicker.test.tsx
deleted file mode 100644
index 27ee06f99..000000000
--- a/packages/pl-fe/src/components/ui/datepicker/datepicker.test.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import React from 'react';
-
-import { queryAllByRole, render, screen } from 'pl-fe/jest/test-helpers';
-
-import Datepicker from './datepicker';
-
-describe('', () => {
- it('defaults to the current date', () => {
- const handler = vi.fn();
- render();
- const today = new Date();
-
- expect(screen.getByTestId('datepicker-month')).toHaveValue(String(today.getMonth()));
- expect(screen.getByTestId('datepicker-day')).toHaveValue(String(today.getDate()));
- expect(screen.getByTestId('datepicker-year')).toHaveValue(String(today.getFullYear()));
- });
-
- it('changes number of days based on selected month and year', async() => {
- const handler = vi.fn();
- render();
-
- await userEvent.selectOptions(
- screen.getByTestId('datepicker-month'),
- screen.getByRole('option', { name: 'February' }),
- );
-
- await userEvent.selectOptions(
- screen.getByTestId('datepicker-year'),
- screen.getByRole('option', { name: '2020' }),
- );
-
- let daySelect: HTMLElement;
- daySelect = document.querySelector('[data-testid="datepicker-day"]') as HTMLElement;
- expect(queryAllByRole(daySelect, 'option')).toHaveLength(29);
-
- await userEvent.selectOptions(
- screen.getByTestId('datepicker-year'),
- screen.getByRole('option', { name: '2021' }),
- );
-
- daySelect = document.querySelector('[data-testid="datepicker-day"]') as HTMLElement;
- expect(queryAllByRole(daySelect, 'option')).toHaveLength(28);
- });
-
- it('ranges from the current year to 120 years ago', () => {
- const handler = vi.fn();
- render();
- const today = new Date();
-
- const yearSelect = document.querySelector('[data-testid="datepicker-year"]') as HTMLElement;
- expect(queryAllByRole(yearSelect, 'option')).toHaveLength(121);
- expect(queryAllByRole(yearSelect, 'option')[0]).toHaveValue(String(today.getFullYear()));
- expect(queryAllByRole(yearSelect, 'option')[120]).toHaveValue(String(today.getFullYear() - 120));
- });
-
- it('calls the onChange function when the inputs change', async() => {
- const handler = vi.fn();
- render();
- const today = new Date();
-
- /**
- * A date with a different day, month, and year than today
- * so this test will always pass!
- */
- const notToday = new Date(
- today.getFullYear() - 1, // last year
- (today.getMonth() + 2) % 11, // two months from now (mod 11 because it's 0-indexed)
- (today.getDate() + 2) % 28, // 2 days from now (for timezone stuff)
- );
-
- const month = notToday.toLocaleString('en-us', { month: 'long' });
- const year = String(notToday.getFullYear());
- const day = String(notToday.getDate());
-
- expect(handler.mock.calls.length).toEqual(1);
-
- await userEvent.selectOptions(
- screen.getByTestId('datepicker-month'),
- screen.getByRole('option', { name: month }),
- );
-
- expect(handler.mock.calls.length).toEqual(2);
-
- await userEvent.selectOptions(
- screen.getByTestId('datepicker-year'),
- screen.getByRole('option', { name: year }),
- );
-
- expect(handler.mock.calls.length).toEqual(3);
-
- await userEvent.selectOptions(
- screen.getByTestId('datepicker-day'),
- screen.getByRole('option', { name: day }),
- );
-
- expect(handler.mock.calls.length).toEqual(4);
- });
-});
diff --git a/packages/pl-fe/src/components/ui/datepicker/datepicker.tsx b/packages/pl-fe/src/components/ui/datepicker/datepicker.tsx
deleted file mode 100644
index 2b3e27e0a..000000000
--- a/packages/pl-fe/src/components/ui/datepicker/datepicker.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
-
-import Select from '../select/select';
-import Stack from '../stack/stack';
-import Text from '../text/text';
-
-const getDaysInMonth = (month: number, year: number) => new Date(year, month + 1, 0).getDate();
-const currentYear = new Date().getFullYear();
-
-interface IDatepicker {
- onChange(date: Date): void;
-}
-
-/**
- * Datepicker that allows a user to select month, day, and year.
- */
-const Datepicker = ({ onChange }: IDatepicker) => {
- const intl = useIntl();
-
- const [month, setMonth] = useState(new Date().getMonth());
- const [day, setDay] = useState(new Date().getDate());
- const [year, setYear] = useState(new Date().getFullYear());
-
- const numberOfDays = useMemo(() => getDaysInMonth(month, year), [month, year]);
-
- useEffect(() => {
- onChange(new Date(year, month, day));
- }, [month, day, year]);
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export { Datepicker as default };
diff --git a/packages/pl-fe/src/components/ui/divider/divider.test.tsx b/packages/pl-fe/src/components/ui/divider.test.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/divider/divider.test.tsx
rename to packages/pl-fe/src/components/ui/divider.test.tsx
diff --git a/packages/pl-fe/src/components/ui/divider/divider.tsx b/packages/pl-fe/src/components/ui/divider.tsx
similarity index 89%
rename from packages/pl-fe/src/components/ui/divider/divider.tsx
rename to packages/pl-fe/src/components/ui/divider.tsx
index db50f4f65..03bf34fa1 100644
--- a/packages/pl-fe/src/components/ui/divider/divider.tsx
+++ b/packages/pl-fe/src/components/ui/divider.tsx
@@ -1,8 +1,8 @@
import React from 'react';
-import Text from '../text/text';
+import Text from './text';
-import type { Sizes as TextSizes } from '../text/text';
+import type { Sizes as TextSizes } from './text';
interface IDivider {
text?: string;
diff --git a/packages/pl-fe/src/components/ui/emoji/emoji.test.tsx b/packages/pl-fe/src/components/ui/emoji.test.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/emoji/emoji.test.tsx
rename to packages/pl-fe/src/components/ui/emoji.test.tsx
diff --git a/packages/pl-fe/src/components/ui/emoji/emoji.tsx b/packages/pl-fe/src/components/ui/emoji.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/emoji/emoji.tsx
rename to packages/pl-fe/src/components/ui/emoji.tsx
diff --git a/packages/pl-fe/src/components/ui/file-input/file-input.tsx b/packages/pl-fe/src/components/ui/file-input.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/file-input/file-input.tsx
rename to packages/pl-fe/src/components/ui/file-input.tsx
diff --git a/packages/pl-fe/src/components/ui/form-actions/form-actions.test.tsx b/packages/pl-fe/src/components/ui/form-actions.test.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/form-actions/form-actions.test.tsx
rename to packages/pl-fe/src/components/ui/form-actions.test.tsx
diff --git a/packages/pl-fe/src/components/ui/form-actions/form-actions.tsx b/packages/pl-fe/src/components/ui/form-actions.tsx
similarity index 88%
rename from packages/pl-fe/src/components/ui/form-actions/form-actions.tsx
rename to packages/pl-fe/src/components/ui/form-actions.tsx
index 17da7ba5f..e49cf30ab 100644
--- a/packages/pl-fe/src/components/ui/form-actions/form-actions.tsx
+++ b/packages/pl-fe/src/components/ui/form-actions.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import HStack from '../hstack/hstack';
+import HStack from './hstack';
interface IFormActions {
children: React.ReactNode;
diff --git a/packages/pl-fe/src/components/ui/form-group/form-group.test.tsx b/packages/pl-fe/src/components/ui/form-group.test.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/form-group/form-group.test.tsx
rename to packages/pl-fe/src/components/ui/form-group.test.tsx
diff --git a/packages/pl-fe/src/components/ui/form-group/form-group.tsx b/packages/pl-fe/src/components/ui/form-group.tsx
similarity index 96%
rename from packages/pl-fe/src/components/ui/form-group/form-group.tsx
rename to packages/pl-fe/src/components/ui/form-group.tsx
index 100cfffe7..99f8679df 100644
--- a/packages/pl-fe/src/components/ui/form-group/form-group.tsx
+++ b/packages/pl-fe/src/components/ui/form-group.tsx
@@ -1,8 +1,8 @@
import React, { useMemo } from 'react';
-import Checkbox from '../checkbox/checkbox';
-import HStack from '../hstack/hstack';
-import Stack from '../stack/stack';
+import Checkbox from './checkbox';
+import HStack from './hstack';
+import Stack from './stack';
interface IFormGroup {
/** Input label message. */
diff --git a/packages/pl-fe/src/components/ui/form/form.test.tsx b/packages/pl-fe/src/components/ui/form.test.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/form/form.test.tsx
rename to packages/pl-fe/src/components/ui/form.test.tsx
diff --git a/packages/pl-fe/src/components/ui/form/form.tsx b/packages/pl-fe/src/components/ui/form.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/form/form.tsx
rename to packages/pl-fe/src/components/ui/form.tsx
diff --git a/packages/pl-fe/src/components/ui/hstack/hstack.tsx b/packages/pl-fe/src/components/ui/hstack.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/hstack/hstack.tsx
rename to packages/pl-fe/src/components/ui/hstack.tsx
diff --git a/packages/pl-fe/src/components/ui/icon-button/icon-button.tsx b/packages/pl-fe/src/components/ui/icon-button.tsx
similarity index 96%
rename from packages/pl-fe/src/components/ui/icon-button/icon-button.tsx
rename to packages/pl-fe/src/components/ui/icon-button.tsx
index cca72073c..a4b21924f 100644
--- a/packages/pl-fe/src/components/ui/icon-button/icon-button.tsx
+++ b/packages/pl-fe/src/components/ui/icon-button.tsx
@@ -1,8 +1,8 @@
import clsx from 'clsx';
import React from 'react';
-import SvgIcon from '../icon/svg-icon';
-import Text from '../text/text';
+import SvgIcon from './svg-icon';
+import Text from './text';
interface IIconButton extends React.ButtonHTMLAttributes {
/** Class name for the