diff --git a/packages/desktop-client/src/components/AppBackground.js b/packages/desktop-client/src/components/AppBackground.js
index c769da7f8602896915e19a23b9bf28b894190874..697e20f02dab144718f92625741b5052da105a0f 100644
--- a/packages/desktop-client/src/components/AppBackground.js
+++ b/packages/desktop-client/src/components/AppBackground.js
@@ -6,7 +6,8 @@ import AnimatedLoading from '../icons/AnimatedLoading';
 import { theme } from '../style';
 
 import Background from './Background';
-import { View, Block } from './common';
+import Block from './common/Block';
+import View from './common/View';
 
 function AppBackground({ initializing, loadingText }) {
   return (
diff --git a/packages/desktop-client/src/components/FatalError.js b/packages/desktop-client/src/components/FatalError.js
index 2f40dca257e8dee9b7b29fb68f18fc141d30b2ef..59a50cae9d3e41e15632de1ba882108ce0178458 100644
--- a/packages/desktop-client/src/components/FatalError.js
+++ b/packages/desktop-client/src/components/FatalError.js
@@ -2,17 +2,15 @@ import React, { Component, useState } from 'react';
 
 import { theme } from '../style';
 
-import {
-  View,
-  Stack,
-  Text,
-  Block,
-  Modal,
-  LinkButton,
-  Button,
-  ExternalLink,
-} from './common';
+import { ExternalLink } from './common';
+import Block from './common/Block';
+import Button from './common/Button';
+import LinkButton from './common/LinkButton';
+import Modal from './common/Modal';
 import Paragraph from './common/Paragraph';
+import Stack from './common/Stack';
+import Text from './common/Text';
+import View from './common/View';
 import { Checkbox } from './forms';
 
 class FatalError extends Component {
diff --git a/packages/desktop-client/src/components/ManageRules.js b/packages/desktop-client/src/components/ManageRules.js
index b47684c2ee1d5f45daf048194c78b6ab48601d88..4d427ae582b83f6bfd3045e66f85190c751ec996 100644
--- a/packages/desktop-client/src/components/ManageRules.js
+++ b/packages/desktop-client/src/components/ManageRules.js
@@ -31,15 +31,13 @@ import useSelected, {
 import ArrowRight from '../icons/v0/RightArrow2';
 import { colors } from '../style';
 
-import {
-  View,
-  Text,
-  Button,
-  Stack,
-  ExternalLink,
-  Input,
-  LinkButton,
-} from './common';
+import { ExternalLink } from './common';
+import Button from './common/Button';
+import Input from './common/Input';
+import LinkButton from './common/LinkButton';
+import Stack from './common/Stack';
+import Text from './common/Text';
+import View from './common/View';
 import { SelectCell, Row, Field, Cell, CellButton, TableHeader } from './table';
 
 let SchedulesQuery = liveQueryContext(q('schedules').select('*'));
diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx
index aebc72c0ac43920482cd23eeb96493639699cec9..e2599bb751a2168fc5ae0635a41ffa4ce8d53175 100644
--- a/packages/desktop-client/src/components/Notifications.tsx
+++ b/packages/desktop-client/src/components/Notifications.tsx
@@ -15,15 +15,12 @@ import AnimatedLoading from '../icons/AnimatedLoading';
 import Delete from '../icons/v0/Delete';
 import { styles, colors } from '../style';
 
-import {
-  View,
-  Text,
-  Button,
-  ButtonWithLoading,
-  Stack,
-  ExternalLink,
-  LinkButton,
-} from './common';
+import { ExternalLink } from './common';
+import Button, { ButtonWithLoading } from './common/Button';
+import LinkButton from './common/LinkButton';
+import Stack from './common/Stack';
+import Text from './common/Text';
+import View from './common/View';
 
 function compileMessage(
   message: string,
diff --git a/packages/desktop-client/src/components/Page.tsx b/packages/desktop-client/src/components/Page.tsx
index aa2d8999d5cb184aa7e8a2527c394def5b114f4e..ae638f952de755f6ccfb25a903b8d537cc261692 100644
--- a/packages/desktop-client/src/components/Page.tsx
+++ b/packages/desktop-client/src/components/Page.tsx
@@ -6,7 +6,9 @@ import { type CSSProperties } from 'glamor';
 import { useResponsive } from '../ResponsiveProvider';
 import { colors, styles } from '../style';
 
-import { Modal, View, Text } from './common';
+import Modal from './common/Modal';
+import Text from './common/Text';
+import View from './common/View';
 
 let PageTypeContext = createContext({ type: 'page', current: undefined });
 
diff --git a/packages/desktop-client/src/components/UpdateNotification.js b/packages/desktop-client/src/components/UpdateNotification.js
index 12e1a159336ad3e75b2e0c66e44cfb15a8599439..df42cc420b56454951cf3d25a332f8dc24d69c88 100644
--- a/packages/desktop-client/src/components/UpdateNotification.js
+++ b/packages/desktop-client/src/components/UpdateNotification.js
@@ -5,7 +5,10 @@ import { useActions } from '../hooks/useActions';
 import Close from '../icons/v1/Close';
 import { colors } from '../style';
 
-import { View, Text, LinkButton, Button } from './common';
+import Button from './common/Button';
+import LinkButton from './common/LinkButton';
+import Text from './common/Text';
+import View from './common/View';
 
 function closeNotification(setAppState) {
   // Set a flag to never show an update notification again for this session
diff --git a/packages/desktop-client/src/components/accounts/Reconcile.js b/packages/desktop-client/src/components/accounts/Reconcile.js
index f698c9a36e62216a3a8a1916a5ede8151b016218..1591f5fff3ff43bab6f451ecef341f7b18646a9b 100644
--- a/packages/desktop-client/src/components/accounts/Reconcile.js
+++ b/packages/desktop-client/src/components/accounts/Reconcile.js
@@ -5,7 +5,11 @@ import { currencyToInteger } from 'loot-core/src/shared/util';
 
 import CheckCircle1 from '../../icons/v2/CheckCircle1';
 import { styles, colors } from '../../style';
-import { View, Text, Button, Input, InitialFocus } from '../common';
+import Button from '../common/Button';
+import InitialFocus from '../common/InitialFocus';
+import Input from '../common/Input';
+import Text from '../common/Text';
+import View from '../common/View';
 import format from '../spreadsheet/format';
 import useSheetValue from '../spreadsheet/useSheetValue';
 import { Tooltip } from '../tooltips';
diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTable.js b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
index 525063953c7a937fa8487a97a97b973e55c6b5e1..6f27e80396c4a6d13ee95e5f90beb71cd8d12ad2 100644
--- a/packages/desktop-client/src/components/budget/MobileBudgetTable.js
+++ b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
@@ -17,7 +17,11 @@ import Add from '../../icons/v1/Add';
 import ArrowThinLeft from '../../icons/v1/ArrowThinLeft';
 import ArrowThinRight from '../../icons/v1/ArrowThinRight';
 import { colors, styles } from '../../style';
-import { Button, Card, Label, Text, View } from '../common';
+import Button from '../common/Button';
+import Card from '../common/Card';
+import Label from '../common/Label';
+import Text from '../common/Text';
+import View from '../common/View';
 import CellValue from '../spreadsheet/CellValue';
 import format from '../spreadsheet/format';
 import NamespaceContext from '../spreadsheet/NamespaceContext';
diff --git a/packages/desktop-client/src/components/budget/misc.js b/packages/desktop-client/src/components/budget/misc.js
index cfc8c44ecad56955801037b8db75fa4d0099c7d1..376ac186fd1d62822ac0c64bae2032748d18362f 100644
--- a/packages/desktop-client/src/components/budget/misc.js
+++ b/packages/desktop-client/src/components/budget/misc.js
@@ -13,7 +13,10 @@ import ExpandArrow from '../../icons/v0/ExpandArrow';
 import CheveronDown from '../../icons/v1/CheveronDown';
 import DotsHorizontalTriple from '../../icons/v1/DotsHorizontalTriple';
 import { styles, colors } from '../../style';
-import { View, Text, Button, Menu } from '../common';
+import Button from '../common/Button';
+import Menu from '../common/Menu';
+import Text from '../common/Text';
+import View from '../common/View';
 import NotesButton from '../NotesButton';
 import {
   useDraggable,
diff --git a/packages/desktop-client/src/components/common.tsx b/packages/desktop-client/src/components/common.tsx
index 8950da820d541915dd45717d20012c520c29f1ab..832518d21a3c8a85b6e04e8066c9040b45ceb1d7 100644
--- a/packages/desktop-client/src/components/common.tsx
+++ b/packages/desktop-client/src/components/common.tsx
@@ -8,19 +8,11 @@ import { colors } from '../style';
 import Button from './common/Button';
 
 export { default as AnchorLink } from './common/AnchorLink';
-export { default as Block } from './common/Block';
 export { default as Button, ButtonWithLoading } from './common/Button';
-export { default as Card } from './common/Card';
 export { default as Select } from './common/Select';
-export { default as InitialFocus } from './common/InitialFocus';
 export { default as Input } from './common/Input';
-export { default as Label } from './common/Label';
-export { default as Menu } from './common/Menu';
-export { default as Modal, ModalButtons } from './common/Modal';
-export { default as Stack } from './common/Stack';
 export { default as Text } from './common/Text';
 export { default as View } from './common/View';
-export { default as LinkButton } from './common/LinkButton';
 
 let externalLinkColors = {
   purple: colors.p4,
diff --git a/packages/desktop-client/src/components/gocardless/GoCardlessLink.js b/packages/desktop-client/src/components/gocardless/GoCardlessLink.js
index a2cac94998ba688ae569046d3f93a35498316b06..099030bd07afc6021593e447205b5e89616a0275 100644
--- a/packages/desktop-client/src/components/gocardless/GoCardlessLink.js
+++ b/packages/desktop-client/src/components/gocardless/GoCardlessLink.js
@@ -1,7 +1,8 @@
 import React from 'react';
 
-import { Modal, View } from '../common';
+import Modal from '../common/Modal';
 import Paragraph from '../common/Paragraph';
+import View from '../common/View';
 
 export default function GoCardlessLink() {
   window.close();
diff --git a/packages/desktop-client/src/components/manager/BudgetList.js b/packages/desktop-client/src/components/manager/BudgetList.js
index f58ce2ef862d07acfac12a9448e57c314442d974..cbea84d23eb2324e9ac29bac4c02192215ab7da1 100644
--- a/packages/desktop-client/src/components/manager/BudgetList.js
+++ b/packages/desktop-client/src/components/manager/BudgetList.js
@@ -15,7 +15,10 @@ import Key from '../../icons/v2/Key';
 import RefreshArrow from '../../icons/v2/RefreshArrow';
 import { styles, colors } from '../../style';
 import tokens from '../../tokens';
-import { View, Text, Button, Menu } from '../common';
+import Button from '../common/Button';
+import Menu from '../common/Menu';
+import Text from '../common/Text';
+import View from '../common/View';
 import { Tooltip } from '../tooltips';
 
 function getFileDescription(file) {
diff --git a/packages/desktop-client/src/components/manager/DeleteFile.js b/packages/desktop-client/src/components/manager/DeleteFile.js
index 36aafb99307f0fb67c02b01354d372a29330626f..025dec7c0ca9b579d3218a1dcd40928815ae07b9 100644
--- a/packages/desktop-client/src/components/manager/DeleteFile.js
+++ b/packages/desktop-client/src/components/manager/DeleteFile.js
@@ -1,7 +1,10 @@
 import React, { useState } from 'react';
 
 import { colors } from '../../style';
-import { View, Text, Modal, ButtonWithLoading } from '../common';
+import { ButtonWithLoading } from '../common/Button';
+import Modal from '../common/Modal';
+import Text from '../common/Text';
+import View from '../common/View';
 
 export default function DeleteMenu({ modalProps, actions, file }) {
   let [loadingState, setLoadingState] = useState(null);
diff --git a/packages/desktop-client/src/components/manager/Import.js b/packages/desktop-client/src/components/manager/Import.js
index be9491e00784bb71c8151987e62d223ff771e82c..4940a3765b05e93a1937e491696c41fea3dcc3f4 100644
--- a/packages/desktop-client/src/components/manager/Import.js
+++ b/packages/desktop-client/src/components/manager/Import.js
@@ -1,7 +1,11 @@
 import React, { useState } from 'react';
 
 import { styles, colors } from '../../style';
-import { View, Block, Modal, Button, Text } from '../common';
+import Block from '../common/Block';
+import Button from '../common/Button';
+import Modal from '../common/Modal';
+import Text from '../common/Text';
+import View from '../common/View';
 
 function getErrorMessage(error) {
   switch (error) {
diff --git a/packages/desktop-client/src/components/manager/ImportActual.js b/packages/desktop-client/src/components/manager/ImportActual.js
index 3d763af7e39afeaa4740e749fd779bdfc50ab82c..e9720afde1d9148d1b85d9424222bf09bc1a3a99 100644
--- a/packages/desktop-client/src/components/manager/ImportActual.js
+++ b/packages/desktop-client/src/components/manager/ImportActual.js
@@ -4,8 +4,11 @@ import { useDispatch } from 'react-redux';
 import { importBudget } from 'loot-core/src/client/actions/budgets';
 
 import { styles, colors } from '../../style';
-import { View, Block, Modal, ButtonWithLoading } from '../common';
+import Block from '../common/Block';
+import { ButtonWithLoading } from '../common/Button';
+import Modal from '../common/Modal';
 import Paragraph from '../common/Paragraph';
+import View from '../common/View';
 
 function getErrorMessage(error) {
   switch (error) {
diff --git a/packages/desktop-client/src/components/manager/ImportYNAB4.js b/packages/desktop-client/src/components/manager/ImportYNAB4.js
index 0486e2efd15d5f0cb48943804f9f24317c60dc4c..ddde7e37bccecdfdbb9006ed60872b6b00de1b25 100644
--- a/packages/desktop-client/src/components/manager/ImportYNAB4.js
+++ b/packages/desktop-client/src/components/manager/ImportYNAB4.js
@@ -4,8 +4,11 @@ import { useDispatch } from 'react-redux';
 import { importBudget } from 'loot-core/src/client/actions/budgets';
 
 import { styles, colors } from '../../style';
-import { View, Block, Modal, ButtonWithLoading } from '../common';
+import Block from '../common/Block';
+import { ButtonWithLoading } from '../common/Button';
+import Modal from '../common/Modal';
 import Paragraph from '../common/Paragraph';
+import View from '../common/View';
 
 function getErrorMessage(error) {
   switch (error) {
diff --git a/packages/desktop-client/src/components/manager/ImportYNAB5.js b/packages/desktop-client/src/components/manager/ImportYNAB5.js
index 3af439e1f9a23b720118d10d0fafed749fdc091e..2be9442342d2e9d654e4b0a792cbc07e2c6daf94 100644
--- a/packages/desktop-client/src/components/manager/ImportYNAB5.js
+++ b/packages/desktop-client/src/components/manager/ImportYNAB5.js
@@ -4,8 +4,12 @@ import { useDispatch } from 'react-redux';
 import { importBudget } from 'loot-core/src/client/actions/budgets';
 
 import { styles, colors } from '../../style';
-import { View, Block, Modal, ButtonWithLoading, ExternalLink } from '../common';
+import { ExternalLink } from '../common';
+import Block from '../common/Block';
+import { ButtonWithLoading } from '../common/Button';
+import Modal from '../common/Modal';
 import Paragraph from '../common/Paragraph';
+import View from '../common/View';
 
 function getErrorMessage(error) {
   switch (error) {
diff --git a/packages/desktop-client/src/components/modals/BudgetSummary.js b/packages/desktop-client/src/components/modals/BudgetSummary.js
index 33a81e77ebfa3f0b7b86d2e3453797fc6f4b2567..4e78e8881d48694e739e312f3525a65efdc7ddcd 100644
--- a/packages/desktop-client/src/components/modals/BudgetSummary.js
+++ b/packages/desktop-client/src/components/modals/BudgetSummary.js
@@ -4,7 +4,10 @@ import { rolloverBudget } from 'loot-core/src/client/queries';
 import * as monthUtils from 'loot-core/src/shared/months';
 
 import { colors, styles } from '../../style';
-import { View, Text, Modal, Button } from '../common';
+import Button from '../common/Button';
+import Modal from '../common/Modal';
+import Text from '../common/Text';
+import View from '../common/View';
 import CellValue from '../spreadsheet/CellValue';
 import format from '../spreadsheet/format';
 import NamespaceContext from '../spreadsheet/NamespaceContext';
diff --git a/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.js b/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.js
index c8b08018c06b3dbea890f466734acc251ae44b74..747bf63e5b9fe01562f75a4b16ec4a56aaf29c61 100644
--- a/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.js
+++ b/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.js
@@ -2,7 +2,11 @@ import React, { useState } from 'react';
 
 import { colors } from '../../style';
 import CategoryAutocomplete from '../autocomplete/CategorySelect';
-import { View, Text, Block, Modal, Button } from '../common';
+import Block from '../common/Block';
+import Button from '../common/Button';
+import Modal from '../common/Modal';
+import Text from '../common/Text';
+import View from '../common/View';
 
 export default function ConfirmCategoryDelete({
   modalProps,
diff --git a/packages/desktop-client/src/components/modals/CreateAccount.js b/packages/desktop-client/src/components/modals/CreateAccount.js
index f6c4371a3cd99755e5c6031c4d5c59ee1a0f87e5..e5bfbd9dd8b42d322eabffafa3e42f98e3f517d5 100644
--- a/packages/desktop-client/src/components/modals/CreateAccount.js
+++ b/packages/desktop-client/src/components/modals/CreateAccount.js
@@ -5,15 +5,12 @@ import { pushModal } from 'loot-core/src/client/actions/modals';
 
 import { authorizeBank } from '../../gocardless';
 import useGoCardlessStatus from '../../hooks/useGoCardlessStatus';
-import {
-  View,
-  Text,
-  Modal,
-  Button,
-  ButtonWithLoading,
-  ExternalLink,
-} from '../common';
+import { ExternalLink } from '../common';
+import Button, { ButtonWithLoading } from '../common/Button';
+import Modal from '../common/Modal';
 import Paragraph from '../common/Paragraph';
+import Text from '../common/Text';
+import View from '../common/View';
 
 export default function CreateAccount({ modalProps, syncServerStatus }) {
   const dispatch = useDispatch();
diff --git a/packages/desktop-client/src/components/modals/CreateEncryptionKey.js b/packages/desktop-client/src/components/modals/CreateEncryptionKey.js
index ffe36d82c712a9bd134b18edf23be24312e101bc..5644581ac092b1e525c133fcf5cf7db6b8b173ec 100644
--- a/packages/desktop-client/src/components/modals/CreateEncryptionKey.js
+++ b/packages/desktop-client/src/components/modals/CreateEncryptionKey.js
@@ -6,17 +6,14 @@ import { send } from 'loot-core/src/platform/client/fetch';
 import { getCreateKeyError } from 'loot-core/src/shared/errors';
 
 import { colors } from '../../style';
-import {
-  View,
-  Text,
-  Modal,
-  ButtonWithLoading,
-  ExternalLink,
-  ModalButtons,
-  Input,
-  InitialFocus,
-} from '../common';
+import { ExternalLink } from '../common';
+import { ButtonWithLoading } from '../common/Button';
+import InitialFocus from '../common/InitialFocus';
+import Input from '../common/Input';
+import Modal, { ModalButtons } from '../common/Modal';
 import Paragraph from '../common/Paragraph';
+import Text from '../common/Text';
+import View from '../common/View';
 
 export default function CreateEncryptionKey({
   modalProps,
diff --git a/packages/desktop-client/src/components/modals/EditField.js b/packages/desktop-client/src/components/modals/EditField.js
index 4d5f7ea1fe623caa6c759ef1f15d3c93a339feb5..faff7a2612dcdd5f9704fbd6ae4f74ad969dab8a 100644
--- a/packages/desktop-client/src/components/modals/EditField.js
+++ b/packages/desktop-client/src/components/modals/EditField.js
@@ -11,7 +11,9 @@ import { colors } from '../../style';
 import AccountAutocomplete from '../autocomplete/AccountAutocomplete';
 import CategoryAutocomplete from '../autocomplete/CategorySelect';
 import PayeeAutocomplete from '../autocomplete/PayeeAutocomplete';
-import { View, Modal, Input } from '../common';
+import Input from '../common/Input';
+import Modal from '../common/Modal';
+import View from '../common/View';
 import { SectionLabel } from '../forms';
 import DateSelect from '../select/DateSelect';
 
diff --git a/packages/desktop-client/src/components/modals/FixEncryptionKey.js b/packages/desktop-client/src/components/modals/FixEncryptionKey.js
index 610a8686c8e05c8dfe17b9b28c1beb5c244e2f69..a617d33b5351f1740866288b741c42c49792a35a 100644
--- a/packages/desktop-client/src/components/modals/FixEncryptionKey.js
+++ b/packages/desktop-client/src/components/modals/FixEncryptionKey.js
@@ -4,18 +4,14 @@ import { send } from 'loot-core/src/platform/client/fetch';
 import { getTestKeyError } from 'loot-core/src/shared/errors';
 
 import { colors } from '../../style';
-import {
-  View,
-  Text,
-  Modal,
-  Button,
-  ButtonWithLoading,
-  ModalButtons,
-  Input,
-  InitialFocus,
-  ExternalLink,
-} from '../common';
+import { ExternalLink } from '../common';
+import Button, { ButtonWithLoading } from '../common/Button';
+import InitialFocus from '../common/InitialFocus';
+import Input from '../common/Input';
+import Modal, { ModalButtons } from '../common/Modal';
 import Paragraph from '../common/Paragraph';
+import Text from '../common/Text';
+import View from '../common/View';
 
 export default function FixEncryptionKey({
   modalProps,
diff --git a/packages/desktop-client/src/components/modals/ImportTransactions.js b/packages/desktop-client/src/components/modals/ImportTransactions.js
index 6a2387d5a204bcd7cb74aa59e5872508aa8d8ca5..88af52fe27ef7274d015d1c2a37912d8f4e456c6 100644
--- a/packages/desktop-client/src/components/modals/ImportTransactions.js
+++ b/packages/desktop-client/src/components/modals/ImportTransactions.js
@@ -12,16 +12,13 @@ import {
 
 import { useActions } from '../../hooks/useActions';
 import { colors, styles } from '../../style';
-import {
-  View,
-  Text,
-  Stack,
-  Modal,
-  Select,
-  Input,
-  Button,
-  ButtonWithLoading,
-} from '../common';
+import Button, { ButtonWithLoading } from '../common/Button';
+import Input from '../common/Input';
+import Modal from '../common/Modal';
+import Select from '../common/Select';
+import Stack from '../common/Stack';
+import Text from '../common/Text';
+import View from '../common/View';
 import { Checkbox, SectionLabel } from '../forms';
 import { TableHeader, TableWithNavigator, Row, Field } from '../table';
 
diff --git a/packages/desktop-client/src/components/modals/LoadBackup.js b/packages/desktop-client/src/components/modals/LoadBackup.js
index a43e173c1eaffcf439ff67f3ac5bba2313d2bb44..33a946af07574f7d1c3125772863f1e37071d372 100644
--- a/packages/desktop-client/src/components/modals/LoadBackup.js
+++ b/packages/desktop-client/src/components/modals/LoadBackup.js
@@ -3,7 +3,11 @@ import React, { Component, useState, useEffect } from 'react';
 import { send, listen, unlisten } from 'loot-core/src/platform/client/fetch';
 
 import { colors } from '../../style';
-import { View, Text, Block, Modal, Button } from '../common';
+import Block from '../common/Block';
+import Button from '../common/Button';
+import Modal from '../common/Modal';
+import Text from '../common/Text';
+import View from '../common/View';
 import { Row, Cell } from '../table';
 
 class BackupTable extends Component {
diff --git a/packages/desktop-client/src/components/modals/ManageRulesModal.js b/packages/desktop-client/src/components/modals/ManageRulesModal.js
index 1eb05415a80f6221f236bc19eef8ebf940a75027..fcf52c5c8174727ecf05f120a4675ed765accaab 100644
--- a/packages/desktop-client/src/components/modals/ManageRulesModal.js
+++ b/packages/desktop-client/src/components/modals/ManageRulesModal.js
@@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom';
 
 import { isNonProductionEnvironment } from 'loot-core/src/shared/environment';
 
-import { Modal } from '../common';
+import Modal from '../common/Modal';
 import ManageRules from '../ManageRules';
 
 export default function ManageRulesModal({ modalProps, payeeId }) {
diff --git a/packages/desktop-client/src/components/modals/MergeUnusedPayees.js b/packages/desktop-client/src/components/modals/MergeUnusedPayees.js
index 9814e1ad02eafc5e1e8611e4f9daa24732bcd6d5..12932cfdfeb7c9064a57d6e532383dce7813e067 100644
--- a/packages/desktop-client/src/components/modals/MergeUnusedPayees.js
+++ b/packages/desktop-client/src/components/modals/MergeUnusedPayees.js
@@ -6,8 +6,11 @@ import { send } from 'loot-core/src/platform/client/fetch';
 
 import { colors } from '../../style';
 import { Information } from '../alerts';
-import { View, Text, Modal, ModalButtons, Button } from '../common';
+import Button from '../common/Button';
+import Modal, { ModalButtons } from '../common/Modal';
 import Paragraph from '../common/Paragraph';
+import Text from '../common/Text';
+import View from '../common/View';
 
 let highlightStyle = { color: colors.p5 };
 
diff --git a/packages/desktop-client/src/components/modals/PlaidExternalMsg.js b/packages/desktop-client/src/components/modals/PlaidExternalMsg.js
index f390f53d0e58090e2207fe22507c7fa094768de5..bf1315ef3d0ddb5dd2b0658f64cd35301b7dbb90 100644
--- a/packages/desktop-client/src/components/modals/PlaidExternalMsg.js
+++ b/packages/desktop-client/src/components/modals/PlaidExternalMsg.js
@@ -3,8 +3,11 @@ import React, { useState, useRef } from 'react';
 import AnimatedLoading from '../../icons/AnimatedLoading';
 import { colors } from '../../style';
 import { Error } from '../alerts';
-import { View, Text, Modal, Button, ModalButtons } from '../common';
+import Button from '../common/Button';
+import Modal, { ModalButtons } from '../common/Modal';
 import Paragraph from '../common/Paragraph';
+import Text from '../common/Text';
+import View from '../common/View';
 
 function renderError(error) {
   return (
diff --git a/packages/desktop-client/src/components/modals/SelectLinkedAccounts.js b/packages/desktop-client/src/components/modals/SelectLinkedAccounts.js
index f7580f520bf12fbb297d828de8afb067eca4b40e..4220a0c5a61802896285cbc175b32ed9b00bd758 100644
--- a/packages/desktop-client/src/components/modals/SelectLinkedAccounts.js
+++ b/packages/desktop-client/src/components/modals/SelectLinkedAccounts.js
@@ -2,7 +2,10 @@ import React, { useState } from 'react';
 
 import { colors } from '../../style';
 import Autocomplete from '../autocomplete/Autocomplete';
-import { View, Modal, Button, Text } from '../common';
+import Button from '../common/Button';
+import Modal from '../common/Modal';
+import Text from '../common/Text';
+import View from '../common/View';
 import { TableHeader, Table, Row, Field } from '../table';
 
 const addAccountOption = { id: 'new', name: 'Create new account' };
diff --git a/packages/desktop-client/src/components/reports/Change.js b/packages/desktop-client/src/components/reports/Change.js
index b344077e0b4b874a26c7f6a979b89cd3c30fcd42..3d491f57bcb60aef46f2f3dd4769aa981b2c3a94 100644
--- a/packages/desktop-client/src/components/reports/Change.js
+++ b/packages/desktop-client/src/components/reports/Change.js
@@ -3,7 +3,7 @@ import React from 'react';
 import { integerToCurrency } from 'loot-core/src/shared/util';
 
 import { colors, styles } from '../../style';
-import { Block } from '../common';
+import Block from '../common/Block';
 
 function Change({ amount }) {
   return (
diff --git a/packages/desktop-client/src/components/reports/DateRange.js b/packages/desktop-client/src/components/reports/DateRange.js
index 06ee410c7fcbeee11586fa76436e2228b5219c09..927d5784ee47bb5e7c1e076667469b7f93116e50 100644
--- a/packages/desktop-client/src/components/reports/DateRange.js
+++ b/packages/desktop-client/src/components/reports/DateRange.js
@@ -3,7 +3,7 @@ import React from 'react';
 import * as d from 'date-fns';
 
 import { colors } from '../../style';
-import { Block } from '../common';
+import Block from '../common/Block';
 
 function DateRange({ start, end }) {
   start = d.parseISO(start);
diff --git a/packages/desktop-client/src/components/reports/Overview.js b/packages/desktop-client/src/components/reports/Overview.js
index 0ea17ef09c0b1b7826ca14036526377d10b3c994..7b01ee811d344c0c455aafe9da5f2a49c7b4e247 100644
--- a/packages/desktop-client/src/components/reports/Overview.js
+++ b/packages/desktop-client/src/components/reports/Overview.js
@@ -7,7 +7,9 @@ import * as monthUtils from 'loot-core/src/shared/months';
 import { integerToCurrency } from 'loot-core/src/shared/util';
 
 import { colors, styles } from '../../style';
-import { View, Block, AnchorLink } from '../common';
+import AnchorLink from '../common/AnchorLink';
+import Block from '../common/Block';
+import View from '../common/View';
 
 import Change from './Change';
 import theme from './chart-theme';
diff --git a/packages/desktop-client/src/components/schedules/DiscoverSchedules.js b/packages/desktop-client/src/components/schedules/DiscoverSchedules.js
index 574e488cba175223c25d95f6d54bd5cf4126e1f3..de1a600bbe88c23342b266eaa08fd6357b7086a4 100644
--- a/packages/desktop-client/src/components/schedules/DiscoverSchedules.js
+++ b/packages/desktop-client/src/components/schedules/DiscoverSchedules.js
@@ -13,8 +13,10 @@ import useSelected, {
 import useSendPlatformRequest from '../../hooks/useSendPlatformRequest';
 import { colors } from '../../style';
 import { getParent } from '../../util/router-tools';
-import { View, Stack, ButtonWithLoading } from '../common';
+import { ButtonWithLoading } from '../common/Button';
 import Paragraph from '../common/Paragraph';
+import Stack from '../common/Stack';
+import View from '../common/View';
 import { Page, usePageType } from '../Page';
 import { Table, TableHeader, Row, Field, SelectCell } from '../table';
 import DisplayId from '../util/DisplayId';
diff --git a/packages/desktop-client/src/components/schedules/EditSchedule.js b/packages/desktop-client/src/components/schedules/EditSchedule.js
index ba4091d3d28098590853cabdf5f08b869f4253d4..9548eb55d86c9fab10dde7f0c63d01a7682b9ea3 100644
--- a/packages/desktop-client/src/components/schedules/EditSchedule.js
+++ b/packages/desktop-client/src/components/schedules/EditSchedule.js
@@ -13,7 +13,10 @@ import useSelected, { SelectedProvider } from '../../hooks/useSelected';
 import { colors } from '../../style';
 import AccountAutocomplete from '../autocomplete/AccountAutocomplete';
 import PayeeAutocomplete from '../autocomplete/PayeeAutocomplete';
-import { Stack, View, Text, Button } from '../common';
+import Button from '../common/Button';
+import Stack from '../common/Stack';
+import Text from '../common/Text';
+import View from '../common/View';
 import { FormField, FormLabel, Checkbox } from '../forms';
 import { OpSelect } from '../modals/EditRule';
 import { Page } from '../Page';
diff --git a/packages/desktop-client/src/components/schedules/PostsOfflineNotification.js b/packages/desktop-client/src/components/schedules/PostsOfflineNotification.js
index 34375205bc8df2e762206e58e6f3a92667b958c1..1c292825d1d90f855905869f1513c568cf6ac415 100644
--- a/packages/desktop-client/src/components/schedules/PostsOfflineNotification.js
+++ b/packages/desktop-client/src/components/schedules/PostsOfflineNotification.js
@@ -4,8 +4,10 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { send } from 'loot-core/src/platform/client/fetch';
 
 import { colors } from '../../style';
-import { Text, Button, Stack } from '../common';
+import Button from '../common/Button';
 import Paragraph from '../common/Paragraph';
+import Stack from '../common/Stack';
+import Text from '../common/Text';
 import { Page } from '../Page';
 import DisplayId from '../util/DisplayId';
 
diff --git a/packages/desktop-client/src/components/settings/Experimental.tsx b/packages/desktop-client/src/components/settings/Experimental.tsx
index 0b6d1908a661721330c8b71b81abb34535f7a78d..7c989a19a2811da3f193e664acfd8dceda5c9d0b 100644
--- a/packages/desktop-client/src/components/settings/Experimental.tsx
+++ b/packages/desktop-client/src/components/settings/Experimental.tsx
@@ -6,7 +6,9 @@ import type { FeatureFlag } from 'loot-core/src/types/prefs';
 import { useActions } from '../../hooks/useActions';
 import useFeatureFlag from '../../hooks/useFeatureFlag';
 import { colors, useTheme } from '../../style';
-import { LinkButton, Text, View } from '../common';
+import LinkButton from '../common/LinkButton';
+import Text from '../common/Text';
+import View from '../common/View';
 import { Checkbox } from '../forms';
 
 import { Setting } from './UI';
diff --git a/packages/desktop-client/src/components/settings/UI.tsx b/packages/desktop-client/src/components/settings/UI.tsx
index b3052256e1d432874fb4858bfd3c2200bde7c041..7c88d9ffe34315263d48f756e2413bc7419d32aa 100644
--- a/packages/desktop-client/src/components/settings/UI.tsx
+++ b/packages/desktop-client/src/components/settings/UI.tsx
@@ -6,7 +6,8 @@ import type { CSSProperties } from 'glamor';
 
 import { colors } from '../../style';
 import tokens from '../../tokens';
-import { View, LinkButton } from '../common';
+import LinkButton from '../common/LinkButton';
+import View from '../common/View';
 
 type SettingProps = {
   primaryAction?: ReactNode;
diff --git a/packages/desktop-client/src/components/transactions/SelectedTransactions.js b/packages/desktop-client/src/components/transactions/SelectedTransactions.js
index a33f23ca3ad8efdb2a365c0582e81f591ae05f0e..dc1bd5c0f371689dacfe82875b7d39d10f368746 100644
--- a/packages/desktop-client/src/components/transactions/SelectedTransactions.js
+++ b/packages/desktop-client/src/components/transactions/SelectedTransactions.js
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 
 import { useSelectedItems } from '../../hooks/useSelected';
 import { usePushModal } from '../../util/router-tools';
-import { Menu } from '../common';
+import Menu from '../common/Menu';
 import { SelectedItemsButton } from '../table';
 
 import { isPreviewId } from './TransactionsTable';
diff --git a/packages/desktop-client/src/components/util/LoadComponent.tsx b/packages/desktop-client/src/components/util/LoadComponent.tsx
index 956be6ba7216beda0804518bc944ee39cf6f562f..982a3450d19275d906b2deecb0230bf67da758ad 100644
--- a/packages/desktop-client/src/components/util/LoadComponent.tsx
+++ b/packages/desktop-client/src/components/util/LoadComponent.tsx
@@ -2,7 +2,8 @@ import { type ComponentType, useEffect, useState } from 'react';
 
 import AnimatedLoading from '../../icons/AnimatedLoading';
 import { colors, styles } from '../../style';
-import { Block, View } from '../common';
+import Block from '../common/Block';
+import View from '../common/View';
 
 type ProplessComponent = ComponentType<Record<string, never>>;
 type LoadComponentProps<K extends string> = {
diff --git a/upcoming-release-notes/1419.md b/upcoming-release-notes/1419.md
new file mode 100644
index 0000000000000000000000000000000000000000..ecaa829896abc46290609683ab4a40773e5204d0
--- /dev/null
+++ b/upcoming-release-notes/1419.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Moving away from barrel `common` imports to more specific per-component imports (part 2)