diff --git a/src/components/language-dropdown.tsx/LanguageDropdown.tsx b/src/components/language-dropdown.tsx/LanguageDropdown.tsx
index dec74107..216a208c 100644
--- a/src/components/language-dropdown.tsx/LanguageDropdown.tsx
+++ b/src/components/language-dropdown.tsx/LanguageDropdown.tsx
@@ -23,7 +23,7 @@ const LanguageDropdown: FC<{ selected?: string, clickHandler: (value: string) =>
   selected = "de",
   clickHandler,
 }) => {
-const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
   const getClassMenuItem = (value: string) =>
     `language-dropdown-menu-item ${selected === value ? "language-dropdown-menu-item--selected" : ""}`;
 
diff --git a/src/features/layout/components/app-header/AppHeader.tsx b/src/features/layout/components/app-header/AppHeader.tsx
index 95bab0a5..758b2eb3 100644
--- a/src/features/layout/components/app-header/AppHeader.tsx
+++ b/src/features/layout/components/app-header/AppHeader.tsx
@@ -2,7 +2,7 @@ import { IconType } from "@/lib/types";
 import SvgIcon from "@/components/svg-icon/svg-icon";
 import "./AppHeader.scss";
 import links from "../links";
-import { Link, useNavigate, useParams } from "react-router-dom";
+import { Link, redirect, useLocation, useNavigate, useParams } from "react-router-dom";
 import LanguageDropdown from "@/components/language-dropdown.tsx/LanguageDropdown";
 
 export default function AppHeader() {
@@ -18,8 +18,22 @@ export default function AppHeader() {
   }
 
   const setLanguage = (value: string) => {
+    if (/\/grammar\/[^/]+/.test(window.location.pathname)) {
+      navigate('/' + value + '/grammar');
+      return;
+    } else if (/\/practice\/[^/]+/.test(window.location.pathname)) {
+      navigate('/' + value + '/practice');
+      return;
+    } else if (/\/vocabulary\/[^/]+/.test(window.location.pathname)) {
+      navigate('/' + value + '/vocabulary');
+      return;
+    } else if (/\/idiom\//.test(window.location.pathname)) {
+      navigate('/' + value + '/idioms');
+      return;
+    }
+
     const pathname = window.location.pathname.replace(/\/(de|fr|jp)/, `/${value}`);
-    window.location.replace(window.origin + pathname)
+    navigate(pathname.replace('/learn-german', ''))
   }
 
   return (
diff --git a/src/pages/GrammarPage.tsx b/src/pages/GrammarPage.tsx
index 2aa26a2e..7951a428 100644
--- a/src/pages/GrammarPage.tsx
+++ b/src/pages/GrammarPage.tsx
@@ -20,6 +20,8 @@ export default function Practice() {
     const selected = searchParams.get('grammarType');
     if (selected) {
       setIds([...ids, categories.grammar[selected]])
+    } else {
+      setIds(ids)
     }
     refetch()
   }, [params, searchParams])
diff --git a/vite.config.ts b/vite.config.ts
index 96bf9046..e461db0d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -17,5 +17,12 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler' // or "modern"
+      }
+    }
+  },
   base: "./"
 });