diff --git a/app.vue b/app.vue
index 8e7f33e..63479f0 100644
--- a/app.vue
+++ b/app.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <NuxtLayout>
+      <NuxtLoadingIndicator />
       <NuxtPage />
     </NuxtLayout>
   </div>
diff --git a/components/category/card.vue b/components/category/card.vue
index 6cdba6f..0071095 100644
--- a/components/category/card.vue
+++ b/components/category/card.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
-defineProps({
-  title: String,
+interface Props {
+  title: string
+}
+
+withDefaults(defineProps<Props>(), {
+  title: 'No title available',
 })
 
-let color = [
+// some random color for tags
+const color = [
   '#dc2626',
   '#d97706',
   '#65a30d',
@@ -16,20 +21,21 @@ let color = [
   '#db2777',
 ]
 
+// get a random number
 const getRandomInt = (min: number, max: number) => {
   min = Math.ceil(min)
   max = Math.floor(max)
   return Math.floor(Math.random() * (max - min + 1)) + min
 }
 
-const randbgcolor = ref(`${color.at(getRandomInt(0, 8))}`)
+const picAColor = ref(`${color.at(getRandomInt(0, 8))}`)
 </script>
 
 <template>
   <div
     class="text-white px-5 py-3 rounded hover:underline randbgcolor hover:scale-[1.05] transition-all duration-500"
   >
-    <NuxtLink :to="`/categories/${title}`" class="text-xl font-extrabold">
+    <NuxtLink :to="`/categories/${title.toLocaleLowerCase()}`" class="text-xl font-extrabold">
       <h1>#{{ title }}</h1>
     </NuxtLink>
   </div>
@@ -37,6 +43,6 @@ const randbgcolor = ref(`${color.at(getRandomInt(0, 8))}`)
 
 <style scoped>
 .randbgcolor {
-  background-color: v-bind(randbgcolor);
+  background-color: v-bind(picAColor);
 }
 </style>
diff --git a/components/category/topic.vue b/components/category/topic.vue
index 76f0407..2afc498 100644
--- a/components/category/topic.vue
+++ b/components/category/topic.vue
@@ -1,8 +1,21 @@
+<script setup lang="ts">
+const route = useRoute()
+
+// The the category name and make the first char upper
+const category = computed(() => {
+  const name = route.params.category || ''
+  const firstChar = name.at(0)?.toLocaleUpperCase() || ''
+  const otherChar = name.slice(1)
+
+  return firstChar + otherChar
+})
+</script>
+
 <template>
   <div class="container mx-auto">
     <div class="p-6 my-4 mx-3 rounded-md bg-gray-200">
       <h1 class="text-black font-semibold leading-tight text-4xl md:text-5xl my-5">
-        #{{ $route.params.category }}
+        #{{ category }}
       </h1>
     </div>
   </div>
diff --git a/pages/categories/[category].vue b/pages/categories/[category].vue
index 7c1d40f..4970f09 100644
--- a/pages/categories/[category].vue
+++ b/pages/categories/[category].vue
@@ -9,7 +9,8 @@ useHead({
   ],
   titleTemplate: "Elon's Blog - %s",
 })
-const { data } = await useAsyncData('home', () => queryContent('/blogs').find())
+
+const { data } = await useAsyncData('home', () => queryContent('/blogs').where({}).find())
 </script>
 <template>
   <main class="container max-w-5xl mx-auto text-zinc-600">
diff --git a/pages/categories/index.vue b/pages/categories/index.vue
index 13ee36a..0512ed9 100644
--- a/pages/categories/index.vue
+++ b/pages/categories/index.vue
@@ -7,28 +7,29 @@ useHead({
       content: 'Home',
     },
   ],
-  titleTemplate: "Elon's Blog - %s",
+  titleTemplate: "Riyad's Blog - %s",
 })
-const { data } = await useAsyncData('home', () => queryContent('/blogs').find())
-
-let ar = [
-  'javascript',
-  'typescript',
-  'git',
-  'docker',
-  'kubernetes',
-  'vue',
-  'nuxt',
-  'pinia',
-  'cypress',
+const topics = [
+  'Javascript',
+  'Typescript',
+  'Git',
+  'Docker',
+  'Kubernetes',
+  'Vue',
+  'Nuxt',
+  'Pinia',
+  'Vuex',
+  'Firebase',
+  'Supabse',
+  'Cypress',
 ]
 </script>
 <template>
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <CategoryHero />
     <div class="flex flex-wrap px-6 mt-12 gap-3">
-      <template v-for="n in ar" :key="n">
-        <CategoryCard :title="n" />
+      <template v-for="topic in topics" :key="n">
+        <CategoryCard :title="topic" />
       </template>
     </div>
   </main>