diff --git a/src/lib/components/Habit/ActivityBubble.svelte b/src/lib/components/Habit/ActivityBubbleComponent.svelte
similarity index 100%
rename from src/lib/components/Habit/ActivityBubble.svelte
rename to src/lib/components/Habit/ActivityBubbleComponent.svelte
diff --git a/src/lib/components/Habit/HabitActivityHistory.svelte b/src/lib/components/Habit/HabitActivityHistoryComponent.svelte
similarity index 95%
rename from src/lib/components/Habit/HabitActivityHistory.svelte
rename to src/lib/components/Habit/HabitActivityHistoryComponent.svelte
index c2662a9..46333bc 100644
--- a/src/lib/components/Habit/HabitActivityHistory.svelte
+++ b/src/lib/components/Habit/HabitActivityHistoryComponent.svelte
@@ -2,7 +2,7 @@
 	import dayjs from 'dayjs';
 	import isoWeek from 'dayjs/plugin/isoWeek';
 	import { onMount } from 'svelte';
-	import ActivityBubble from './ActivityBubble.svelte';
+	import ActivityBubble from './ActivityBubbleComponent.svelte';
 
 	dayjs.extend(isoWeek);
 
diff --git a/src/lib/components/Habit/HabitOverviewItem.svelte b/src/lib/components/Habit/HabitOverviewItemComponent.svelte
similarity index 90%
rename from src/lib/components/Habit/HabitOverviewItem.svelte
rename to src/lib/components/Habit/HabitOverviewItemComponent.svelte
index d2c18d0..6180e88 100644
--- a/src/lib/components/Habit/HabitOverviewItem.svelte
+++ b/src/lib/components/Habit/HabitOverviewItemComponent.svelte
@@ -2,7 +2,7 @@
 	import { enhance } from '$app/forms';
 	import { Prisma } from '@prisma/client';
 	import dayjs from 'dayjs';
-	import HabitActivityHistory from './HabitActivityHistory.svelte';
+	import HabitActivityHistory from './HabitActivityHistoryComponent.svelte';
 
 	let { habit } = $props();
 </script>
diff --git a/src/lib/components/Habit/HabitSummaryComponent.svelte b/src/lib/components/Habit/HabitSummaryComponent.svelte
index f840c13..976f7dd 100644
--- a/src/lib/components/Habit/HabitSummaryComponent.svelte
+++ b/src/lib/components/Habit/HabitSummaryComponent.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import dayjs from 'dayjs';
-	import ActivityBubble from './ActivityBubble.svelte';
+	import ActivityBubble from './ActivityBubbleComponent.svelte';
 
 	let { summary }: { summary: { id: string; title: string; dates: string[] }[] } = $props();
 
@@ -9,10 +9,10 @@
 
 <div class="flex flex-shrink">
 	<div class="overflow-hidden rounded-lg bg-base-200 p-4">
-		<div class="relative grid items-center gap-1 overflow-x-scroll py-2 text-[0.5rem]">
+		<div class="relative grid items-center gap-1 overflow-x-scroll py-2 text-2xs">
 			{#each summary as summaryItem}
 				<a
-					class="link-hover link sticky left-0 mr-2 bg-base-200 pr-1 text-sm"
+					class="link-hover link link-primary sticky left-0 mr-2 bg-base-200 pr-1 text-sm"
 					href="/{summaryItem.id}">{summaryItem.title}</a
 				>
 				{#each { length: 30 } as _, i}
diff --git a/src/lib/components/NavigateBackButton.svelte b/src/lib/components/NavigateBackButtonComponent.svelte
similarity index 100%
rename from src/lib/components/NavigateBackButton.svelte
rename to src/lib/components/NavigateBackButtonComponent.svelte
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 21922bb..cc95e2d 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import HabitOverviewItem from '$lib/components/Habit/HabitOverviewItem.svelte';
+	import HabitOverviewItem from '$lib/components/Habit/HabitOverviewItemComponent.svelte';
 	import LastXDays from '$lib/components/Habit/HabitSummaryComponent.svelte';
 	import type { PageServerData } from './$types';
 
diff --git a/src/routes/(app)/[id]/(habit-subpages)/+layout.svelte b/src/routes/(app)/[id]/(habit-subpages)/+layout.svelte
index 035d05e..7b04d23 100644
--- a/src/routes/(app)/[id]/(habit-subpages)/+layout.svelte
+++ b/src/routes/(app)/[id]/(habit-subpages)/+layout.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { page } from '$app/state';
-	import NavigateBackButton from '$lib/components/NavigateBackButton.svelte';
+	import NavigateBackButton from '$lib/components/NavigateBackButtonComponent.svelte';
 	let { children } = $props();
 </script>
 
diff --git a/src/routes/(app)/[id]/+page.svelte b/src/routes/(app)/[id]/+page.svelte
index 4ea09c0..2332c50 100644
--- a/src/routes/(app)/[id]/+page.svelte
+++ b/src/routes/(app)/[id]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
-	import HabitActivityHistory from '$lib/components/Habit/HabitActivityHistory.svelte';
-	import NavigateBackButton from '$lib/components/NavigateBackButton.svelte';
+	import HabitActivityHistory from '$lib/components/Habit/HabitActivityHistoryComponent.svelte';
+	import NavigateBackButton from '$lib/components/NavigateBackButtonComponent.svelte';
 	import dayjs from 'dayjs';
 	import type { PageData } from './$types';
 	import { Prisma } from '@prisma/client';
diff --git a/src/routes/(app)/create/+layout.svelte b/src/routes/(app)/create/+layout.svelte
index 8f6fd09..56180c1 100644
--- a/src/routes/(app)/create/+layout.svelte
+++ b/src/routes/(app)/create/+layout.svelte
@@ -1,5 +1,5 @@
 <script>
-	import NavigateBackButton from '$lib/components/NavigateBackButton.svelte';
+	import NavigateBackButton from '$lib/components/NavigateBackButtonComponent.svelte';
 	let { children } = $props();
 </script>
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d6f0f39..7fdaa97 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -7,6 +7,9 @@ export default {
 		extend: {
 			screens: {
 				xs: '480px'
+			},
+			fontSize: {
+				'2xs': '.5rem'
 			}
 		}
 	},