diff --git a/src/components/layout/LanguageSwitcher.tsx b/src/components/layout/LanguageSwitcher.tsx
index c0c802f..3693722 100644
--- a/src/components/layout/LanguageSwitcher.tsx
+++ b/src/components/layout/LanguageSwitcher.tsx
@@ -2,39 +2,24 @@
 
 import { useTransition } from "react";
 import { useLocale, useTranslations } from "next-intl";
-import { usePathname, useRouter } from "next/navigation";
 import { Globe } from "lucide-react";
 
-import { routing, type Locale } from "@/i18n/routing";
+import { usePathname, useRouter } from "@/i18n/navigation";
+import { type Locale } from "@/i18n/routing";
 import { cn } from "@/lib/utils";
 
 export function LanguageSwitcher({ className }: { className?: string }) {
   const locale = useLocale() as Locale;
   const t = useTranslations("langSwitcher");
   const router = useRouter();
-  const pathname = usePathname();
+  const pathname = usePathname(); // locale-agnostic (no /en prefix)
   const [isPending, startTransition] = useTransition();
 
   const toggleLocale = () => {
     const nextLocale: Locale = locale === "fa" ? "en" : "fa";
-
-    // Strip existing locale prefix from path, then prepend new one if needed
-    let newPath = pathname;
-    for (const loc of routing.locales) {
-      if (newPath.startsWith(`/${loc}/`)) {
-        newPath = newPath.slice(loc.length + 1); // remove /en
-        break;
-      } else if (newPath === `/${loc}`) {
-        newPath = "/";
-        break;
-      }
-    }
-
-    const prefix = nextLocale === routing.defaultLocale ? "" : `/${nextLocale}`;
-    const finalPath = prefix + (newPath.startsWith("/") ? newPath : `/${newPath}`);
-
     startTransition(() => {
-      router.push(finalPath);
+      // next-intl adds/removes the locale prefix per the routing config.
+      router.replace(pathname, { locale: nextLocale });
     });
   };
 
diff --git a/src/components/templates/video/VideoTemplatesCategorySidebar.tsx b/src/components/templates/video/VideoTemplatesCategorySidebar.tsx
index 4427ad9..09170cc 100644
--- a/src/components/templates/video/VideoTemplatesCategorySidebar.tsx
+++ b/src/components/templates/video/VideoTemplatesCategorySidebar.tsx
@@ -92,9 +92,9 @@ export function VideoTemplatesCategorySidebar({
                   )}
                   aria-hidden
                 />
-                <span className="min-w-0 flex-1 truncate text-left">{t(category.labelKey)}</span>
+                <span className="min-w-0 flex-1 truncate text-start">{t(category.labelKey)}</span>
                 {category.count !== undefined ? (
-                  <span className="ml-auto rounded bg-gray-100 px-1.5 py-0.5 text-[11px] text-gray-500">
+                  <span className="ms-auto rounded bg-gray-100 px-1.5 py-0.5 text-[11px] text-gray-500">
                     {category.count}
                   </span>
                 ) : null}
diff --git a/src/i18n/navigation.ts b/src/i18n/navigation.ts
new file mode 100644
index 0000000..6d1318d
--- /dev/null
+++ b/src/i18n/navigation.ts
@@ -0,0 +1,9 @@
+import { createNavigation } from "next-intl/navigation";
+
+import { routing } from "./routing";
+
+// Locale-aware navigation wrappers. `usePathname` returns the path WITHOUT the locale
+// prefix, and `useRouter().replace(path, { locale })` switches locale correctly for the
+// `as-needed` prefix strategy — which manual string-munging of next/navigation does not.
+export const { Link, redirect, usePathname, useRouter, getPathname } =
+  createNavigation(routing);