diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index b9c0ce36552..9973b2e83dc 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import "metabase/css/index.css";
-import { ThemeProvider } from "../frontend/src/metabase/ui";
+import { ThemeProvider } from "metabase/ui";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
diff --git a/babel.config.json b/babel.config.json
index fc34cd01766..bb53a8413a3 100644
--- a/babel.config.json
+++ b/babel.config.json
@@ -4,7 +4,7 @@
     "@babel/preset-env",
     [
       "@babel/preset-react",
-      { "runtime": "automatic", "importSource": "@emotion/react" }
+      { "runtime": "automatic" }
     ],
     "@babel/preset-typescript"
   ],
diff --git a/frontend/src/metabase/auth/components/Login/Login.styled.tsx b/frontend/src/metabase/auth/components/Login/Login.styled.tsx
deleted file mode 100644
index d2b89d77ddd..00000000000
--- a/frontend/src/metabase/auth/components/Login/Login.styled.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import styled from "@emotion/styled";
-import { color } from "metabase/lib/colors";
-
-export const LoginTitle = styled.div`
-  color: ${color("text-dark")};
-  font-size: 1.25rem;
-  font-weight: 700;
-  line-height: 1.5rem;
-  text-align: center;
-`;
-
-export const LoginPanel = styled.div`
-  margin-top: 2.5rem;
-`;
-
-export const ActionList = styled.div`
-  margin-top: 3.5rem;
-`;
-
-export const ActionListItem = styled.div`
-  margin-top: 2rem;
-  text-align: center;
-`;
diff --git a/frontend/src/metabase/auth/components/Login/Login.tsx b/frontend/src/metabase/auth/components/Login/Login.tsx
index fe6ab2c71a3..6480beb5fb2 100644
--- a/frontend/src/metabase/auth/components/Login/Login.tsx
+++ b/frontend/src/metabase/auth/components/Login/Login.tsx
@@ -1,15 +1,10 @@
 import { t } from "ttag";
 import { Location } from "history";
+import { Box } from "metabase/ui";
 import { useSelector } from "metabase/lib/redux";
 import { AuthProvider } from "metabase/plugins/types";
 import { AuthLayout } from "../AuthLayout";
 import { getAuthProviders } from "../../selectors";
-import {
-  ActionList,
-  ActionListItem,
-  LoginPanel,
-  LoginTitle,
-} from "./Login.styled";
 
 interface LoginQueryString {
   redirect?: string;
@@ -31,20 +26,22 @@ export const Login = ({ params, location }: LoginProps): JSX.Element => {
 
   return (
     <AuthLayout>
-      <LoginTitle>{t`Sign in to Metabase`}</LoginTitle>
+      <Box c="text.2" fz="1.25rem" fw="bold" lh="1.5rem" ta="center">
+        {t`Sign in to Metabase`}
+      </Box>
       {selection && selection.Panel && (
-        <LoginPanel>
+        <Box mt="2.5rem">
           <selection.Panel redirectUrl={redirectUrl} />
-        </LoginPanel>
+        </Box>
       )}
       {!selection && (
-        <ActionList>
+        <Box mt="3.5rem">
           {providers.map(provider => (
-            <ActionListItem key={provider.name}>
+            <Box key={provider.name} mt="2rem" ta="center">
               <provider.Button isCard={true} redirectUrl={redirectUrl} />
-            </ActionListItem>
+            </Box>
           ))}
-        </ActionList>
+        </Box>
       )}
     </AuthLayout>
   );
diff --git a/frontend/src/metabase/ui/components/index.ts b/frontend/src/metabase/ui/components/index.ts
new file mode 100644
index 00000000000..b260565c34d
--- /dev/null
+++ b/frontend/src/metabase/ui/components/index.ts
@@ -0,0 +1,4 @@
+export * from "./inputs";
+export * from "./layout";
+export * from "./theme";
+export * from "./typography";
diff --git a/frontend/src/metabase/ui/components/inputs/Radio/index.tsx b/frontend/src/metabase/ui/components/inputs/Radio/index.ts
similarity index 100%
rename from frontend/src/metabase/ui/components/inputs/Radio/index.tsx
rename to frontend/src/metabase/ui/components/inputs/Radio/index.ts
diff --git a/frontend/src/metabase/ui/components/inputs/index.ts b/frontend/src/metabase/ui/components/inputs/index.ts
new file mode 100644
index 00000000000..5c21d15638c
--- /dev/null
+++ b/frontend/src/metabase/ui/components/inputs/index.ts
@@ -0,0 +1 @@
+export * from "./Radio";
diff --git a/frontend/src/metabase/ui/components/layout/Box/index.ts b/frontend/src/metabase/ui/components/layout/Box/index.ts
new file mode 100644
index 00000000000..c853c19fd88
--- /dev/null
+++ b/frontend/src/metabase/ui/components/layout/Box/index.ts
@@ -0,0 +1 @@
+export { Box } from "@mantine/core";
diff --git a/frontend/src/metabase/ui/components/layout/Center/index.ts b/frontend/src/metabase/ui/components/layout/Center/index.ts
new file mode 100644
index 00000000000..14708a573aa
--- /dev/null
+++ b/frontend/src/metabase/ui/components/layout/Center/index.ts
@@ -0,0 +1 @@
+export { Center } from "@mantine/core";
diff --git a/frontend/src/metabase/ui/components/layout/Flex/index.ts b/frontend/src/metabase/ui/components/layout/Flex/index.ts
new file mode 100644
index 00000000000..c4267249569
--- /dev/null
+++ b/frontend/src/metabase/ui/components/layout/Flex/index.ts
@@ -0,0 +1 @@
+export { Flex } from "@mantine/core";
diff --git a/frontend/src/metabase/ui/components/layout/Grid/index.ts b/frontend/src/metabase/ui/components/layout/Grid/index.ts
new file mode 100644
index 00000000000..f7e4fc87824
--- /dev/null
+++ b/frontend/src/metabase/ui/components/layout/Grid/index.ts
@@ -0,0 +1 @@
+export { Grid } from "@mantine/core";
diff --git a/frontend/src/metabase/ui/components/layout/Group/index.ts b/frontend/src/metabase/ui/components/layout/Group/index.ts
new file mode 100644
index 00000000000..5afbec73cab
--- /dev/null
+++ b/frontend/src/metabase/ui/components/layout/Group/index.ts
@@ -0,0 +1 @@
+export { Group } from "@mantine/core";
diff --git a/frontend/src/metabase/ui/components/layout/Stack/index.ts b/frontend/src/metabase/ui/components/layout/Stack/index.ts
new file mode 100644
index 00000000000..46a0b9bcbe1
--- /dev/null
+++ b/frontend/src/metabase/ui/components/layout/Stack/index.ts
@@ -0,0 +1 @@
+export { Stack } from "@mantine/core";
diff --git a/frontend/src/metabase/ui/components/layout/index.ts b/frontend/src/metabase/ui/components/layout/index.ts
new file mode 100644
index 00000000000..b84189f7c5e
--- /dev/null
+++ b/frontend/src/metabase/ui/components/layout/index.ts
@@ -0,0 +1,6 @@
+export * from "./Box";
+export * from "./Center";
+export * from "./Flex";
+export * from "./Grid";
+export * from "./Group";
+export * from "./Stack";
diff --git a/frontend/src/metabase/ui/components/ThemeProvider.tsx b/frontend/src/metabase/ui/components/theme/ThemeProvider/ThemeProvider.tsx
similarity index 87%
rename from frontend/src/metabase/ui/components/ThemeProvider.tsx
rename to frontend/src/metabase/ui/components/theme/ThemeProvider/ThemeProvider.tsx
index db13a932d11..c4d3c662f31 100644
--- a/frontend/src/metabase/ui/components/ThemeProvider.tsx
+++ b/frontend/src/metabase/ui/components/theme/ThemeProvider/ThemeProvider.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { MantineProvider } from "@mantine/core";
-import { theme } from "metabase/ui";
+import { theme } from "../../../theme";
 
 interface ThemeProviderProps {
   children: ReactNode;
diff --git a/frontend/src/metabase/ui/components/theme/ThemeProvider/index.ts b/frontend/src/metabase/ui/components/theme/ThemeProvider/index.ts
new file mode 100644
index 00000000000..d380ec38ce4
--- /dev/null
+++ b/frontend/src/metabase/ui/components/theme/ThemeProvider/index.ts
@@ -0,0 +1 @@
+export * from "./ThemeProvider";
diff --git a/frontend/src/metabase/ui/components/theme/index.ts b/frontend/src/metabase/ui/components/theme/index.ts
new file mode 100644
index 00000000000..d380ec38ce4
--- /dev/null
+++ b/frontend/src/metabase/ui/components/theme/index.ts
@@ -0,0 +1 @@
+export * from "./ThemeProvider";
diff --git a/frontend/src/metabase/ui/components/typography/Text/index.ts b/frontend/src/metabase/ui/components/typography/Text/index.ts
new file mode 100644
index 00000000000..fcc9c26ae57
--- /dev/null
+++ b/frontend/src/metabase/ui/components/typography/Text/index.ts
@@ -0,0 +1 @@
+export { Text } from "@mantine/core";
diff --git a/frontend/src/metabase/ui/components/typography/index.ts b/frontend/src/metabase/ui/components/typography/index.ts
new file mode 100644
index 00000000000..22e10b67503
--- /dev/null
+++ b/frontend/src/metabase/ui/components/typography/index.ts
@@ -0,0 +1 @@
+export * from "./Text";
diff --git a/frontend/src/metabase/ui/index.ts b/frontend/src/metabase/ui/index.ts
index 1f9aca5c6f9..40b494c5f87 100644
--- a/frontend/src/metabase/ui/index.ts
+++ b/frontend/src/metabase/ui/index.ts
@@ -1,8 +1 @@
-export { ThemeProvider } from "metabase/ui/components/ThemeProvider";
-export { theme } from "metabase/ui/theme";
-
-// General helpers
-export { Group } from "@mantine/core";
-
-// Inputs
-export { Radio } from "metabase/ui/components/inputs/Radio";
+export * from "./components";
diff --git a/frontend/test/__support__/ui.tsx b/frontend/test/__support__/ui.tsx
index a84a0484877..96b447e7756 100644
--- a/frontend/test/__support__/ui.tsx
+++ b/frontend/test/__support__/ui.tsx
@@ -7,10 +7,10 @@ import { Router } from "react-router";
 import { routerReducer, routerMiddleware } from "react-router-redux";
 import type { Store, Reducer } from "@reduxjs/toolkit";
 import { Provider } from "react-redux";
-import { ThemeProvider } from "@emotion/react";
 import { DragDropContextProvider } from "react-dnd";
 import HTML5Backend from "react-dnd-html5-backend";
 import type { MatcherFunction } from "@testing-library/dom";
+import { ThemeProvider } from "metabase/ui";
 
 import type { State } from "metabase-types/store";
 
@@ -116,7 +116,7 @@ function Wrapper({
   return (
     <Provider store={store}>
       <MaybeDNDProvider hasDND={withDND}>
-        <ThemeProvider theme={{}}>
+        <ThemeProvider>
           <MaybeRouter hasRouter={withRouter} history={history}>
             {children}
           </MaybeRouter>