diff --git a/package-lock.json b/package-lock.json
index 83de58a..6a4001e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "bootstrap-icons": "^1.10.5",
+        "pinia": "^2.1.6",
         "tsparticles-slim": "^2.12.0",
         "vue": "^3.2.47",
         "vue-writer": "^1.2.0",
@@ -189,6 +190,11 @@
         "@vue/shared": "3.3.4"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
+      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
@@ -1015,6 +1021,56 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.6.tgz",
+      "integrity": "sha512-bIU6QuE5qZviMmct5XwCesXelb5VavdOWKWaB17ggk++NUwQWWbP5YnsONTk3b752QkW9sACiR81rorpeOMSvQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz",
+      "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pirates": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
diff --git a/package.json b/package.json
index c43a606..ef48286 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
   "homepage": "https://github.com/webceyhan/webceyhan.github.io#readme",
   "dependencies": {
     "bootstrap-icons": "^1.10.5",
+    "pinia": "^2.1.6",
     "tsparticles-slim": "^2.12.0",
     "vue": "^3.2.47",
     "vue-writer": "^1.2.0",
diff --git a/src/components/Accordion.vue b/src/components/Accordion.vue
new file mode 100644
index 0000000..14ac131
--- /dev/null
+++ b/src/components/Accordion.vue
@@ -0,0 +1,19 @@
+<script setup>
+import { provide, ref } from "vue";
+
+const panels = ref([]);
+
+function collapseAll() {
+  panels.value.forEach((panel) => {
+    panel.open = false;
+  });
+}
+
+provide("accordion", { panels, collapseAll });
+</script>
+
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
diff --git a/src/components/Avatar.vue b/src/components/Avatar.vue
index cffc47c..f367062 100644
--- a/src/components/Avatar.vue
+++ b/src/components/Avatar.vue
@@ -6,7 +6,10 @@ defineProps({
 
 <template>
   <div class="avatar">
-    <div class="ring-8 ring-primary/20 ring-offset-base-100 ring-offset-2 rounded-full">
+    <!-- bugfix: !aspect-auto added to the div to avoid the image being stretched on the first render -->
+    <div
+      class="ring-8 ring-primary/20 ring-offset-base-100 ring-offset-2 rounded-full !aspect-auto"
+    >
       <img :src="url" alt="avatar" />
     </div>
   </div>
diff --git a/src/components/Collapse.vue b/src/components/Collapse.vue
new file mode 100644
index 0000000..57a0157
--- /dev/null
+++ b/src/components/Collapse.vue
@@ -0,0 +1,37 @@
+<script setup>
+import { inject, ref } from "vue";
+
+const props = defineProps({
+  title: String,
+  open: Boolean,
+});
+
+const open = ref(props.open);
+
+const { panels, collapseAll } = inject("accordion");
+panels.value.push({ open });
+
+function toggle() {
+  collapseAll();
+  open.value = true;
+}
+</script>
+
+<template>
+  <details
+    :open="open"
+    class="collapse collapse-arrow"
+    :class="{ 'bg-base-300/50': open }"
+    @click.prevent="toggle()"
+  >
+    <summary
+      class="collapse-title hover:bg-base-100/50"
+    >
+      {{ title }}
+    </summary>
+
+    <div class="collapse-content p-2">
+      <slot />
+    </div>
+  </details>
+</template>
diff --git a/src/components/Drawer.vue b/src/components/Drawer.vue
index 0201cc6..a3d6688 100644
--- a/src/components/Drawer.vue
+++ b/src/components/Drawer.vue
@@ -38,7 +38,7 @@ const toggle = () => {
 
       <aside
         :class="[
-          'w-80 lg:w-96 h-full overflow-scroll p-4 lg:p-0 lg:mr-8 space-y-8',
+          'w-80 h-full max-lg:overflow-y-scroll p-4 lg:p-0 lg:mr-8 space-y-8',
           'bg-base-300 text-base-content lg:bg-opacity-50',
         ]"
       >
diff --git a/src/main.js b/src/main.js
index 396f198..bb193e9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,10 @@
 import { createApp } from 'vue';
+import { createPinia } from 'pinia';
 import App from './App.vue';
 
 import 'bootstrap-icons/font/bootstrap-icons.css';
 import './style.css';
 
-createApp(App).mount('#app');
+createApp(App)
+    .use(createPinia())
+    .mount('#app');
diff --git a/src/sections/AppHeader.vue b/src/sections/AppHeader.vue
index e14310b..d0b2f99 100644
--- a/src/sections/AppHeader.vue
+++ b/src/sections/AppHeader.vue
@@ -1,8 +1,9 @@
 <script setup>
 import { computed, ref } from "vue";
+import { storeToRefs } from "pinia";
 import VueWriter from "vue-writer";
 import { timestamp } from "@/utils";
-import { useProfile } from "@/store/profile";
+import { useProfileStore } from "@/store/profile";
 import Loader from "@/components/Loader.vue";
 import Avatar from "@/components/Avatar.vue";
 import CoverUrl from "@/assets/bg-header.jpg";
@@ -11,7 +12,8 @@ import Stat from "@/components/Stat.vue";
 
 const showLogo = ref(true);
 
-const { profile, loading } = useProfile();
+const profileStore = useProfileStore();
+const { profile, loading } = storeToRefs(profileStore);
 
 const titles = computed(() => {
   return [profile.value.bio, "Open Source Contributor", "Web3 & Blockchain Enthusiast"];
diff --git a/src/sections/AppProjects.vue b/src/sections/AppProjects.vue
index 7af7cd3..761f9fc 100644
--- a/src/sections/AppProjects.vue
+++ b/src/sections/AppProjects.vue
@@ -1,35 +1,33 @@
 <script setup>
-import { useRepository } from "@/store/repository";
+import { useTopicStore } from "@/store/topic";
+import { useLanguageStore } from "@/store/language";
+import { useRepositoryStore } from "@/store/repository";
 import Loader from "@/components/Loader.vue";
 import Heading from "@/components/Heading.vue";
 import Divider from "@/components/Divider.vue";
 import Drawer from "../components/Drawer.vue";
 import Button from "@/components/Button.vue";
 import Icon from "@/components/Icon.vue";
+import Collapse from "@/components/Collapse.vue";
+import Accordion from "@/components/Accordion.vue";
 import TopicFilterNav from "./partials/TopicFilterNav.vue";
 import LanguageFilterNav from "./partials/LanguageFilterNav.vue";
 import RepositoryList from "./partials/RepositoryList.vue";
 
-const {
-  loading,
-  topics,
-  languages,
-  repositories,
-  selectedTopic,
-  selectedLanguage,
-} = useRepository();
+const topicStore = useTopicStore();
+const languageStore = useLanguageStore();
+const repositoryStore = useRepositoryStore();
 </script>
 
 <template>
   <main class="container mx-auto px-3">
     <Heading class="max-md:text-center" large>
-      <Icon name="github" class="mr-2" />
-      Projects
+      <Icon name="github" class="mr-2" /> Projects
     </Heading>
 
     <Divider />
 
-    <Loader v-if="loading" bars large />
+    <Loader v-if="repositoryStore.loading" bars large />
 
     <Drawer v-else>
       <template #trigger="{ toggle }">
@@ -44,11 +42,24 @@ const {
       </template>
 
       <template #sidebar>
-        <LanguageFilterNav :languages="languages" v-model="selectedLanguage" />
-        <TopicFilterNav :topics="topics" v-model="selectedTopic" />
+        <LanguageFilterNav
+          :languages="languageStore.languages"
+          v-model="languageStore.selected"
+        />
+
+        <Accordion class="w-full">
+          <Collapse
+            v-for="({ category, topics }, i) in topicStore.topicsByCategory"
+            :key="i"
+            :title="category"
+            class="border-t border-neutral"
+          >
+            <TopicFilterNav :topics="topics" v-model="topicStore.selected" />
+          </Collapse>
+        </Accordion>
       </template>
 
-      <RepositoryList :repos="repositories" />
+      <RepositoryList :repos="repositoryStore.repositories" />
     </Drawer>
   </main>
 </template>
diff --git a/src/sections/partials/LanguageFilterNav.vue b/src/sections/partials/LanguageFilterNav.vue
index b17dc90..fee340d 100644
--- a/src/sections/partials/LanguageFilterNav.vue
+++ b/src/sections/partials/LanguageFilterNav.vue
@@ -30,7 +30,7 @@ const onToggle = (name) => {
         :active="name === modelValue"
         @click="onToggle(name)"
         class="border-neutral-content/20"
-        variant="ghost"
+        outline
         small
       >
         <Icon class="me-1" name="box" :style="{ color }" />
diff --git a/src/sections/partials/TopicFilterNav.vue b/src/sections/partials/TopicFilterNav.vue
index 3dd3735..815d4ad 100644
--- a/src/sections/partials/TopicFilterNav.vue
+++ b/src/sections/partials/TopicFilterNav.vue
@@ -1,5 +1,4 @@
 <script setup>
-import Heading from "@/components/Heading.vue";
 import Button from "@/components/Button.vue";
 
 const emit = defineEmits(["update:modelValue"]);
@@ -16,21 +15,17 @@ const onToggle = (topic) => {
 </script>
 
 <template>
-  <div class="space-y-2">
-    <Heading small> Topics </Heading>
-
-    <nav class="flex flex-wrap gap-1">
-      <Button
-        v-for="(topic, i) in topics"
-        :key="i"
-        :label="topic"
-        :active="topic === modelValue"
-        @click="onToggle(topic)"
-        variant="primary"
-        class="border-neutral-content/20 rounded-full lowercase"
-        outline
-        small
-      />
-    </nav>
-  </div>
+  <nav class="flex flex-wrap gap-1">
+    <Button
+      v-for="({ name }, i) in topics"
+      :key="i"
+      :label="name"
+      :active="name === modelValue"
+      @click="onToggle(name)"
+      variant="primary"
+      class="border-neutral-content/20 rounded-full lowercase"
+      outline
+      small
+    />
+  </nav>
 </template>
diff --git a/src/store/language.js b/src/store/language.js
new file mode 100644
index 0000000..4f9709b
--- /dev/null
+++ b/src/store/language.js
@@ -0,0 +1,53 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+import { sortByRate } from '@/utils';
+import { getRepositories } from '@/api/github';
+
+export const useLanguageStore = defineStore('language', () => {
+    // state
+    const languages = ref([]);
+    const loading = ref(false);
+    const selected = ref(null);
+
+    // actions
+    async function load() {
+        loading.value = true;
+        languages.value = await getLanguages();
+        loading.value = false;
+    }
+
+    // init
+    load();
+
+    // public api
+    return { load, languages, selected };
+});
+
+// HELPERS /////////////////////////////////////////////////////////////////////////////////////////
+
+const getLanguages = async () => {
+    const repos = await getRepositories();
+    const languages = collectLanguages(repos);
+    return sortByRate(languages);
+};
+
+const collectLanguages = (repos) => {
+    let lineSum = 0;
+
+    // populate key-based unique list
+    const list = repos.reduce((acc, repo) => {
+        repo.languages.forEach(({ name, lines, color }) => {
+            acc[name] = acc[name] ?? { name, lines, color };
+            acc[name].lines += lines;
+            lineSum += lines;
+        });
+
+        return acc;
+    }, {});
+
+    // add rate to each language
+    return Object.values(list).map((language) => ({
+        ...language,
+        rate: (language.lines / lineSum) * 100,
+    }));
+};
diff --git a/src/store/profile.js b/src/store/profile.js
index ad0155f..c6ffdae 100644
--- a/src/store/profile.js
+++ b/src/store/profile.js
@@ -1,33 +1,22 @@
-import { computed, reactive } from 'vue';
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
 import { getProfile } from '@/api/github';
 
-// define state
-const state = reactive({
-    preloaded: false,
-    loading: false,
-    profile: {},
-});
-
-// define getters & setters
-const loading = computed(() => state.loading);
-const profile = computed(() => state.profile);
+export const useProfileStore = defineStore('profile', () => {
+    // state
+    const loading = ref(false);
+    const profile = ref();
 
-// define actions
-const load = async () => {
-    state.loading = true;
-    state.profile = await getProfile();
-    state.loading = false;
-    state.preloaded = true;
-};
+    // actions
+    async function load() {
+        loading.value = true;
+        profile.value = await getProfile();
+        loading.value = false;
+    }
 
-// public API
-export function useProfile() {
-    // preload oncce if needed
-    if (!state.preloaded) load();
+    // init
+    load();
 
-    return {
-        load,
-        loading,
-        profile,
-    };
-}
+    // public api
+    return { load, loading, profile };
+});
diff --git a/src/store/repository.js b/src/store/repository.js
index 1fe087f..c83d726 100644
--- a/src/store/repository.js
+++ b/src/store/repository.js
@@ -1,118 +1,49 @@
-import { computed, reactive } from 'vue';
+import { ref, computed } from 'vue';
+import { defineStore } from 'pinia';
 import { getRepositories } from '@/api/github';
-
-// define state
-const state = reactive({
-    preloaded: false,
-    loading: false,
-    repositories: [],
-    selectedTopic: null,
-    selectedLanguae: null,
-});
-
-// define getters & setters
-const loading = computed(() => state.loading);
-
-const topics = computed(() => {
-    /* name : rate */
-    const all = {};
-
-    // populate topic - rate list
-    state.repositories.forEach(({ topics }) =>
-        topics.forEach((topic) => {
-            all[topic] = (all[topic] || 0) + 1;
-        })
-    );
-
-    return (
-        Object.entries(all)
-            // sort from more to less line rate
-            .sort((a, b) => (a[1] < b[1] ? 1 : a[1] > b[1] ? -1 : 0))
-            // nap to name only
-            .map(([name]) => name)
-    );
-});
-
-const languages = computed(() => {
-    const all = {};
-    let lineSum = 0;
-
-    // populate key-based unique list
-    state.repositories.forEach(({ languages }) => {
-        languages.forEach(({ name, lines, color }) => {
-            // sum lines if exists or add new
-            if (all[name]) all[name].lines += lines;
-            else all[name] = { name, lines, color };
-
-            // sum total lines
-            lineSum += lines;
-        });
+import { useTopicStore } from './topic';
+import { useLanguageStore } from './language';
+
+export const useRepositoryStore = defineStore('repository', () => {
+    // state
+    const loading = ref(false);
+    const _repositories = ref([]);
+    const topicStore = useTopicStore();
+    const languageStore = useLanguageStore();
+
+    // getters
+    const repositories = computed(() => {
+        let repos = _repositories.value;
+
+        // filter by language
+        if (languageStore.selected) {
+            repos = repos.filter((repo) =>
+                repo.languages.some(
+                    (lang) => lang.name === languageStore.selected
+                )
+            );
+        }
+
+        // filter by topics
+        if (topicStore.selected) {
+            repos = repos.filter((repo) =>
+                repo.topics.includes(topicStore.selected)
+            );
+        }
+
+        return repos;
     });
 
-    // return as array
-    return (
-        Object.values(all)
-            .map((lang) => ({
-                ...lang,
-                // calculate line rate
-                rate: (lang.lines / lineSum) * 100,
-            }))
-            // sort from more to less line rate
-            .sort((a, b) => (a.rate < b.rate ? 1 : a.rate > b.rate ? -1 : 0))
-    );
-});
-
-const selectedTopic = computed({
-    get: () => state.selectedTopic,
-    set: (v) => (state.selectedTopic = v),
-});
-
-const selectedLanguage = computed({
-    get: () => state.selectedLanguae,
-    set: (v) => (state.selectedLanguae = v),
-});
-
-const repositories = computed(() => {
-    // get repositories;
-    let repos = state.repositories;
-
-    // filter by language
-    if (selectedLanguage.value) {
-        repos = repos.filter((repo) =>
-            repo.languages.some(({ name }) => name === selectedLanguage.value)
-        );
+    //  actions
+    async function load() {
+        loading.value = true;
+        _repositories.value = await getRepositories();
+        loading.value = false;
     }
 
-    // filter by topics
-    if (selectedTopic.value) {
-        repos = repos.filter((repo) =>
-            repo.topics.includes(selectedTopic.value)
-        );
-    }
+    // init
+    load();
 
-    return repos;
+    // public api
+    return { load, loading, repositories };
 });
-
-// define actions
-const load = async () => {
-    state.loading = true;
-    state.repositories = await getRepositories();
-    state.loading = false;
-    state.preloaded = true;
-};
-
-// public API
-export function useRepository() {
-    // preload oncce if needed
-    if (!state.preloaded) load();
-
-    return {
-        load,
-        loading,
-        topics,
-        languages,
-        repositories,
-        selectedTopic,
-        selectedLanguage,
-    };
-}
diff --git a/src/store/topic.js b/src/store/topic.js
new file mode 100644
index 0000000..1f5d6c6
--- /dev/null
+++ b/src/store/topic.js
@@ -0,0 +1,121 @@
+import { computed, ref } from 'vue';
+import { defineStore } from 'pinia';
+import { sortByRate } from '@/utils';
+import { getRepositories } from '@/api/github';
+
+export const useTopicStore = defineStore('topic', () => {
+    // state
+    const topics = ref([]);
+    const loading = ref(false);
+    const selected = ref(null);
+
+    // getters
+    const topicsByCategory = computed(() => {
+        return Object.entries(TOPIC_CATEGORIES).map(
+            ([category, topicNames]) => ({
+                category,
+                topics: topics.value.filter((topic) =>
+                    topicNames.includes(topic.name)
+                ),
+            })
+        );
+    });
+
+    // actions
+    async function load() {
+        loading.value = true;
+        topics.value = await getTopics();
+        loading.value = false;
+    }
+
+    // init
+    load();
+
+    // expose
+    return {
+        load,
+        topics,
+        topicsByCategory,
+        selected,
+    };
+});
+
+// HELPERS /////////////////////////////////////////////////////////////////////////////////////////
+
+const getTopics = async () => {
+    const repos = await getRepositories();
+    const topics = collectTopics(repos);
+    return sortByRate(topics);
+};
+
+const collectTopics = (repos) => {
+    const list = repos.reduce((acc, repo) => {
+        repo.topics.forEach((name) => {
+            acc[name] = acc[name] ?? { name, rate: 0 };
+            acc[name].rate += 1;
+        });
+        return acc;
+    }, {});
+
+    return Object.values(list);
+};
+
+const TOPIC_CATEGORIES = {
+    // Language: [
+    //     'javascript',
+    //     'typescript',
+    //     'python',
+    //     'ruby',
+    //     'php',
+    //     'html',
+    //     'css',
+    //     'sass',
+    // ],
+    Framework: [
+        'vue',
+        'react',
+        'angular',
+        'svelte',
+        'nuxt',
+        'next',
+        'express',
+        'laravel',
+    ],
+    Database: [
+        'mysql',
+        'mongodb',
+        'postgresql',
+        'redis',
+        'sqlite',
+        'firestore',
+    ],
+    Design: [
+        'bootstrap',
+        'tailwindcss',
+        'material-ui',
+        'chakra-ui',
+        'radix-ui',
+        'daisyui',
+        'fontawesome',
+        'bootstrap-icons',
+    ],
+    Deployment: [
+        'aws',
+        'digitalocean',
+        'vercel',
+        'netlify',
+        'heroku',
+        'firebase',
+        'github-pages',
+        'github-actions',
+        'kubernetes',
+        'docker',
+    ],
+    'Web Technologies': [
+        'rest',
+        'graphql',
+        'web3',
+        'websockets',
+        'webassembly',
+    ],
+};
diff --git a/src/utils.js b/src/utils.js
index bc91c72..b3d15f5 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -21,3 +21,5 @@ export const makeUrl = (url, search = {}) => {
 
 export const fetchJson = async (url, search = {}) =>
     (await fetchResponse(makeUrl(url, search))).json();
+
+export const sortByRate = (items) => items.sort((a, b) => b.rate - a.rate);