diff --git a/src/lib/components/Catalog.svelte b/src/lib/components/Catalog.svelte
index 2bd9eb7..5806af5 100644
--- a/src/lib/components/Catalog.svelte
+++ b/src/lib/components/Catalog.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { catalog } from '$lib/catalog';
   import CatalogItem from './CatalogItem.svelte';
+  import Loader from './Loader.svelte';
 </script>
 
 {#if $catalog}
@@ -18,5 +19,5 @@
     </div>
   {/if}
 {:else}
-  <p>Loading...</p>
+  <Loader>Fetching catalog...</Loader>
 {/if}
diff --git a/src/lib/components/Loader.svelte b/src/lib/components/Loader.svelte
new file mode 100644
index 0000000..6148a4c
--- /dev/null
+++ b/src/lib/components/Loader.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Spinner } from 'flowbite-svelte';
+</script>
+
+<div class="flex flex-col gap-5 items-center justify-center h-full p-10">
+  <Spinner size={'8'} />
+  <slot>Loading...</slot>
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e3eea9d..a282226 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,6 +6,6 @@
   <title>Mokuro</title>
 </svelte:head>
 
-<div class="p-2">
+<div class="p-2 h-[90svh]">
   <Catalog />
 </div>