diff --git a/src/components/ArrowSelectorTags.svelte b/src/components/ArrowSelectorTags.svelte
new file mode 100644
index 0000000000..33b00a0684
--- /dev/null
+++ b/src/components/ArrowSelectorTags.svelte
@@ -0,0 +1,69 @@
+<script>
+import { getTagUrl } from "../utils/url-utils";
+import Icon from "@iconify/svelte";
+
+let { tags } = $props();
+
+let prefLimitValue = $state(5);
+let initialTagValue = $state(0);
+let finalTagValue = $state(prefLimitValue);
+let marginPattern = $state("-8px");
+
+const handleClickRigth = () => {
+  initialTagValue = initialTagValue + 1;
+  finalTagValue = finalTagValue + 1;
+}
+
+const handleClickLeft = () => {
+  initialTagValue = initialTagValue - 1;
+  finalTagValue = finalTagValue - 1;
+}
+
+const visibleTags = $derived(tags.slice(initialTagValue, finalTagValue));
+const canGoLeft = $derived(initialTagValue !== 0);
+const canGoRight = $derived(finalTagValue < tags.length);
+</script>
+
+<div class="flex flex-row flex-nowrap items-center">
+    {#if tags.length > prefLimitValue}
+        <button
+            onclick={handleClickLeft}
+            class="transition"
+            style:margin-left={`${marginPattern}`}
+            class:opacity-0={!canGoLeft}
+            class:pointer-events-none={!canGoLeft}
+            class:hover:opacity-70={canGoLeft}
+            disabled={!canGoLeft}
+        >
+            <Icon icon="material-symbols:chevron-left-rounded" class="text-xl" />
+        </button>
+        {#each visibleTags as tag, i}
+            <div class:hidden={i == 0} class="mx-1.5 text-[var(--meta-divider)] text-sm">/</div>
+            <a href={getTagUrl(tag)} aria-label={`View all posts with the ${tag.trim()} tag`}
+               class="link-lg transition text-50 text-sm font-medium hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
+                {tag.trim()}
+            </a>
+        {/each}
+        <button
+            onclick={handleClickRigth}
+            class="transition"
+            class:opacity-0={!canGoRight}
+            class:pointer-events-none={!canGoRight}
+            class:hover:opacity-70={canGoRight}
+            disabled={!canGoRight}
+        >
+            <Icon icon="material-symbols:chevron-right-rounded" class="text-xl" />
+        </button>
+    {:else}
+        {#each tags as tag, i}
+            <div class:hidden={i == 0} class="mx-1.5 text-[var(--meta-divider)] text-sm">/</div>
+            <a href={getTagUrl(tag)} aria-label={`View all posts with the ${tag.trim()} tag`}
+            class="link-lg transition text-50 text-sm font-medium hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
+                {tag.trim()}
+            </a>
+        {/each}
+    {/if}
+</div>
+
+<style>
+</style>
diff --git a/src/components/PostMeta.astro b/src/components/PostMeta.astro
index 488e85eb2a..1a9d755f12 100644
--- a/src/components/PostMeta.astro
+++ b/src/components/PostMeta.astro
@@ -3,7 +3,8 @@ import { Icon } from "astro-icon/components";
 import I18nKey from "../i18n/i18nKey";
 import { i18n } from "../i18n/translation";
 import { formatDateToYYYYMMDD } from "../utils/date-utils";
-import { getCategoryUrl, getTagUrl } from "../utils/url-utils";
+import { getCategoryUrl } from "../utils/url-utils";
+import ArrowSelectorTags from "./ArrowSelectorTags.svelte";
 
 interface Props {
 	class: string;
@@ -68,15 +69,7 @@ const className = Astro.props.class;
             <Icon name="material-symbols:tag-rounded" class="text-xl"></Icon>
         </div>
         <div class="flex flex-row flex-nowrap items-center">
-            {(tags && tags.length > 0) && tags.map((tag, i) => (
-                <div class:list={[{"hidden": i == 0}, "mx-1.5 text-[var(--meta-divider)] text-sm"]}>/</div>
-                <a href={getTagUrl(tag)} aria-label={`View all posts with the ${tag.trim()} tag`}
-                   class="link-lg transition text-50 text-sm font-medium
-                                hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
-                    {tag.trim()}
-                </a>
-            ))}
-            {!(tags && tags.length > 0) && <div class="transition text-50 text-sm font-medium">{i18n(I18nKey.noTags)}</div>}
+            <ArrowSelectorTags {tags} client:only="svelte"/>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>