diff --git a/tauri-app/src/routes/license/BlockQuote.svelte b/packages/ui-components/src/lib/components/BlockQuote.svelte
similarity index 100%
rename from tauri-app/src/routes/license/BlockQuote.svelte
rename to packages/ui-components/src/lib/components/BlockQuote.svelte
diff --git a/packages/ui-components/src/lib/components/Heading.svelte b/packages/ui-components/src/lib/components/Heading.svelte
new file mode 100644
index 000000000..47575a5ad
--- /dev/null
+++ b/packages/ui-components/src/lib/components/Heading.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let depth;
+</script>
+
+{#if depth === 1}
+	<div class="mb-4 text-4xl font-medium dark:text-white"><slot /></div>
+{:else if depth === 2}
+	<div class="my-4 text-2xl font-medium dark:text-white"><slot /></div>
+{:else if depth === 3}
+	<div class="my-4 text-xl font-medium dark:text-white"><slot /></div>
+{:else if depth === 4}
+	<div class="my-4 text-lg font-medium dark:text-white"><slot /></div>
+{:else if depth === 5}
+	<h5><slot /></h5>
+{:else if depth === 6}
+	<h6><slot /></h6>
+{:else}
+	<slot />
+{/if}
diff --git a/packages/ui-components/src/lib/components/Text.svelte b/packages/ui-components/src/lib/components/Text.svelte
new file mode 100644
index 000000000..a032c0e98
--- /dev/null
+++ b/packages/ui-components/src/lib/components/Text.svelte
@@ -0,0 +1,12 @@
+<script>
+	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+	export let text;
+	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+	text;
+	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+	export let raw;
+	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+	raw;
+</script>
+
+<div class="my-2 mb-3"><slot /></div>
diff --git a/packages/ui-components/src/lib/index.ts b/packages/ui-components/src/lib/index.ts
index f96bedf55..98e7c6191 100644
--- a/packages/ui-components/src/lib/index.ts
+++ b/packages/ui-components/src/lib/index.ts
@@ -24,6 +24,9 @@ export { default as LightweightChart } from './components/charts/LightweightChar
 export { default as TanstackLightweightChartLine } from './components/charts/TanstackLightweightChartLine.svelte';
 export { default as MockComponent } from './__mocks__/MockComponent.svelte';
 export { default as Checkbox } from './components/checkbox/Checkbox.svelte';
+export { default as BlockQuote } from './components/BlockQuote.svelte';
+export { default as Heading } from './components/Heading.svelte';
+export { default as Text } from './components/Text.svelte';
 
 //Types
 export type { AppStoresInterface } from './types/appStores.ts';
diff --git a/tauri-app/src/routes/license/+page.svelte b/tauri-app/src/routes/license/+page.svelte
index b3d0fa864..20c07234d 100644
--- a/tauri-app/src/routes/license/+page.svelte
+++ b/tauri-app/src/routes/license/+page.svelte
@@ -1,32 +1,5 @@
 <script>
-  import Heading from './Heading.svelte';
-  import Markdown from 'svelte-markdown';
-
-  import { onMount } from 'svelte';
-  import Text from './Text.svelte';
-  import BlockQuote from './BlockQuote.svelte';
-
-  let source = '';
-
-  onMount(async () => {
-    try {
-      const response = await fetch(
-        'https://raw.githubusercontent.com/rainlanguage/decentralicense/refs/heads/master/README.md',
-      );
-      if (response.ok) {
-        source = await response.text();
-      }
-    } catch {
-      source = '';
-    }
-  });
+  import License from './License.svelte';
 </script>
 
-<Markdown
-  {source}
-  renderers={{
-    text: Text,
-    heading: Heading,
-    blockquote: BlockQuote,
-  }}
-/>
+<License />
diff --git a/tauri-app/src/routes/license/Heading.svelte b/tauri-app/src/routes/license/Heading.svelte
deleted file mode 100644
index b543303dd..000000000
--- a/tauri-app/src/routes/license/Heading.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script>
-  export let depth;
-</script>
-
-{#if depth === 1}
-  <div class="mb-4 text-4xl font-medium dark:text-white"><slot /></div>
-{:else if depth === 2}
-  <div class="my-4 text-2xl font-medium dark:text-white"><slot /></div>
-{:else if depth === 3}
-  <div class="my-4 text-xl font-medium dark:text-white"><slot /></div>
-{:else if depth === 4}
-  <div class="my-4 text-lg font-medium dark:text-white"><slot /></div>
-{:else if depth === 5}
-  <h5><slot /></h5>
-{:else if depth === 6}
-  <h6><slot /></h6>
-{:else}
-  <slot />
-{/if}
diff --git a/tauri-app/src/routes/license/License.svelte b/tauri-app/src/routes/license/License.svelte
new file mode 100644
index 000000000..7ccbf1749
--- /dev/null
+++ b/tauri-app/src/routes/license/License.svelte
@@ -0,0 +1,32 @@
+<script>
+  import { Heading } from '@rainlanguage/ui-components';
+  import Markdown from 'svelte-markdown';
+
+  import { onMount } from 'svelte';
+  import { Text } from '@rainlanguage/ui-components';
+  import { BlockQuote } from '@rainlanguage/ui-components';
+
+  let source = '';
+
+  onMount(async () => {
+    try {
+      const response = await fetch(
+        'https://raw.githubusercontent.com/rainlanguage/decentralicense/refs/heads/master/README.md',
+      );
+      if (response.ok) {
+        source = await response.text();
+      }
+    } catch {
+      source = '';
+    }
+  });
+</script>
+
+<Markdown
+  {source}
+  renderers={{
+    text: Text,
+    heading: Heading,
+    blockquote: BlockQuote,
+  }}
+/>
diff --git a/tauri-app/src/routes/license/Text.svelte b/tauri-app/src/routes/license/Text.svelte
deleted file mode 100644
index 544148211..000000000
--- a/tauri-app/src/routes/license/Text.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-  export let text;
-  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-  text;
-  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-  export let raw;
-  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-  raw;
-</script>
-
-<div class="my-2 mb-3"><slot /></div>