diff --git a/apps/dataset-browser/.eslintrc.js b/apps/dataset-browser/.eslintrc.js
index 03ee743..3440404 100644
--- a/apps/dataset-browser/.eslintrc.js
+++ b/apps/dataset-browser/.eslintrc.js
@@ -1,4 +1,12 @@
 module.exports = {
   root: true,
   extends: ['custom'],
+  rules: {
+    'node/no-extraneous-import': [
+      'error',
+      {
+        allowModules: ['ui'],
+      },
+    ],
+  },
 };
diff --git a/apps/dataset-browser/src/app/[locale]/about/page.tsx b/apps/dataset-browser/src/app/[locale]/about/page.tsx
index 891e257..3a759f0 100644
--- a/apps/dataset-browser/src/app/[locale]/about/page.tsx
+++ b/apps/dataset-browser/src/app/[locale]/about/page.tsx
@@ -1,4 +1,4 @@
-import LocalizedMarkdown from '@/components/localized-markdown';
+import {LocalizedMarkdown} from 'ui';
 
 export default function About() {
   return <LocalizedMarkdown name="about" />;
diff --git a/apps/dataset-browser/src/app/[locale]/client-filters.tsx b/apps/dataset-browser/src/app/[locale]/client-filters.tsx
index 8ab37bb..764960c 100644
--- a/apps/dataset-browser/src/app/[locale]/client-filters.tsx
+++ b/apps/dataset-browser/src/app/[locale]/client-filters.tsx
@@ -13,7 +13,7 @@ import {
 import {SearchOptions, SearchResult} from '@/lib/dataset-fetcher';
 import FilterSet from './filter-set';
 import Paginator from './paginator';
-import {PageTitle, PageHeader} from '@/components/page';
+import {PageTitle, PageHeader} from 'ui';
 import {useTranslations} from 'next-intl';
 import SelectedFilters from './selected-filters';
 import {useRouter} from 'next/navigation';
diff --git a/apps/dataset-browser/src/app/[locale]/contact/page.tsx b/apps/dataset-browser/src/app/[locale]/contact/page.tsx
index 17b1cfd..5c819a4 100644
--- a/apps/dataset-browser/src/app/[locale]/contact/page.tsx
+++ b/apps/dataset-browser/src/app/[locale]/contact/page.tsx
@@ -1,4 +1,4 @@
-import LocalizedMarkdown from '@/components/localized-markdown';
+import {LocalizedMarkdown} from 'ui';
 
 export default function Contact() {
   return <LocalizedMarkdown name="contact" />;
diff --git a/apps/dataset-browser/src/app/[locale]/dataset-card.tsx b/apps/dataset-browser/src/app/[locale]/dataset-card.tsx
index 0a48ee5..0fe8c41 100644
--- a/apps/dataset-browser/src/app/[locale]/dataset-card.tsx
+++ b/apps/dataset-browser/src/app/[locale]/dataset-card.tsx
@@ -1,7 +1,7 @@
 import {Link} from 'next-intl';
 import {useTranslations} from 'next-intl';
 import {Dataset} from '@/lib/dataset-fetcher';
-import Badge from '@/components/badge';
+import {Badge} from 'ui';
 
 export default function DatasetCard({dataset}: {dataset: Dataset}) {
   const t = useTranslations('DatasetCard');
diff --git a/apps/dataset-browser/src/app/[locale]/dataset/[id]/page.tsx b/apps/dataset-browser/src/app/[locale]/dataset/[id]/page.tsx
index 9e8c6b6..17dc06b 100644
--- a/apps/dataset-browser/src/app/[locale]/dataset/[id]/page.tsx
+++ b/apps/dataset-browser/src/app/[locale]/dataset/[id]/page.tsx
@@ -1,5 +1,5 @@
 import {getTranslations} from 'next-intl/server';
-import {PageHeader, PageTitle} from '@/components/page';
+import {PageHeader, PageTitle} from 'ui';
 import {ChevronLeftIcon} from '@heroicons/react/24/solid';
 import datasetFetcher from '@/lib/dataset-fetcher-instance';
 import {Link} from 'next-intl';
diff --git a/apps/dataset-browser/src/app/[locale]/faq/page.tsx b/apps/dataset-browser/src/app/[locale]/faq/page.tsx
index 2be543a..637a886 100644
--- a/apps/dataset-browser/src/app/[locale]/faq/page.tsx
+++ b/apps/dataset-browser/src/app/[locale]/faq/page.tsx
@@ -1,4 +1,4 @@
-import LocalizedMarkdown from '@/components/localized-markdown';
+import {LocalizedMarkdown} from 'ui';
 
 export default function Faq() {
   return <LocalizedMarkdown name="faq" />;
diff --git a/apps/dataset-browser/src/app/[locale]/layout.tsx b/apps/dataset-browser/src/app/[locale]/layout.tsx
index 34ea0c7..e0cae0d 100644
--- a/apps/dataset-browser/src/app/[locale]/layout.tsx
+++ b/apps/dataset-browser/src/app/[locale]/layout.tsx
@@ -2,7 +2,7 @@ import './globals.css';
 import {useLocale} from 'next-intl';
 import {notFound} from 'next/navigation';
 import {ReactNode} from 'react';
-import Navigation from '@/components/navigation';
+import Navigation from './navigation';
 import {useTranslations} from 'next-intl';
 import {locales} from '@/middleware';
 
diff --git a/apps/dataset-browser/src/components/navigation.tsx b/apps/dataset-browser/src/app/[locale]/navigation.tsx
similarity index 100%
rename from apps/dataset-browser/src/components/navigation.tsx
rename to apps/dataset-browser/src/app/[locale]/navigation.tsx
diff --git a/apps/dataset-browser/src/app/[locale]/selected-filters.tsx b/apps/dataset-browser/src/app/[locale]/selected-filters.tsx
index b3d4953..5e70477 100644
--- a/apps/dataset-browser/src/app/[locale]/selected-filters.tsx
+++ b/apps/dataset-browser/src/app/[locale]/selected-filters.tsx
@@ -1,7 +1,7 @@
 import {SearchResultFilter} from '@/lib/dataset-fetcher';
 import {Dispatch} from 'react';
 import {useTranslations} from 'next-intl';
-import Badge from '@/components/badge';
+import {Badge} from 'ui';
 
 interface Props {
   filters: {
diff --git a/apps/dataset-browser/src/components/badge.tsx b/packages/ui/badge.tsx
similarity index 97%
rename from apps/dataset-browser/src/components/badge.tsx
rename to packages/ui/badge.tsx
index f73f2d5..374b904 100644
--- a/apps/dataset-browser/src/components/badge.tsx
+++ b/packages/ui/badge.tsx
@@ -8,7 +8,7 @@ interface Props {
   variant?: 'transparent' | 'gray';
 }
 
-export default function Badge({
+export function Badge({
   children,
   variant = 'transparent',
   testId,
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index dcffc55..b83ba0c 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -1,2 +1,5 @@
 import * as React from 'react';
-export * from './Button';
+export * from './badge';
+export * from './page';
+export * from './localized-markdown';
+
diff --git a/apps/dataset-browser/src/components/localized-markdown.tsx b/packages/ui/localized-markdown.tsx
similarity index 75%
rename from apps/dataset-browser/src/components/localized-markdown.tsx
rename to packages/ui/localized-markdown.tsx
index e321705..58b8dc0 100644
--- a/apps/dataset-browser/src/components/localized-markdown.tsx
+++ b/packages/ui/localized-markdown.tsx
@@ -5,7 +5,7 @@ interface Props {
   name: string;
 }
 
-async function LocalizedMarkdown({name}: Props) {
+const LocalizedMarkdown = (async ({ name }: Props) => {
   const locale = useLocale();
   try {
     const Markdown = (await import(`@/messages/${locale}/${name}.mdx`)).default;
@@ -17,11 +17,12 @@ async function LocalizedMarkdown({name}: Props) {
   } catch {
     notFound();
   }
-}
+}) as unknown as (props: Props) => JSX.Element
 
 // TypeScript doesn't understand async components yet.
 // So this is a temporary workaround.
 // More info:
 //  - Next.js issue: https://github.com/vercel/next.js/issues/42292
 //  - Typescript pull request: https://github.com/microsoft/TypeScript/pull/51328
-export default LocalizedMarkdown as unknown as (props: Props) => JSX.Element;
+// export LocalizedMarkdown as unknown as (props: Props) => JSX.Element;
+export {LocalizedMarkdown};
\ No newline at end of file
diff --git a/apps/dataset-browser/src/components/page.tsx b/packages/ui/page.tsx
similarity index 100%
rename from apps/dataset-browser/src/components/page.tsx
rename to packages/ui/page.tsx