diff --git a/002_source/cms/src/components/dashboard/layout/vertical/side-nav.tsx b/002_source/cms/src/components/dashboard/layout/vertical/side-nav.tsx
index 6e9c4b2..6587ad5 100644
--- a/002_source/cms/src/components/dashboard/layout/vertical/side-nav.tsx
+++ b/002_source/cms/src/components/dashboard/layout/vertical/side-nav.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import RouterLink from 'next/link';
 import { usePathname } from 'next/navigation';
@@ -8,6 +10,7 @@ import Typography from '@mui/material/Typography';
 import { ArrowSquareOut as ArrowSquareOutIcon } from '@phosphor-icons/react/dist/ssr/ArrowSquareOut';
 import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
 import { CaretRight as CaretRightIcon } from '@phosphor-icons/react/dist/ssr/CaretRight';
+import { useTranslation } from 'react-i18next';
 
 import type { NavItemConfig } from '@/types/nav';
 import type { NavColor } from '@/types/settings';
@@ -76,20 +79,22 @@ export function SideNav({ color = 'evident', items = [] }: SideNavProps): React.
           '&::-webkit-scrollbar': { display: 'none' },
         }}
       >
-        {renderNavGroups({ items, pathname })}
+        {RenderNavGroups({ items, pathname })}
       </Box>
     </Box>
   );
 }
 
-function renderNavGroups({ items, pathname }: { items: NavItemConfig[]; pathname: string }): React.JSX.Element {
+function RenderNavGroups({ items, pathname }: { items: NavItemConfig[]; pathname: string }): React.JSX.Element {
+  const { t } = useTranslation();
+
   const children = items.reduce((acc: React.ReactNode[], curr: NavItemConfig): React.ReactNode[] => {
     acc.push(
       <Stack component="li" key={curr.key} spacing={1.5}>
         {curr.title ? (
           <div>
             <Typography sx={{ color: 'var(--NavGroup-title-color)', fontSize: '0.875rem', fontWeight: 500 }}>
-              {curr.title}
+              {t(curr.title)}
             </Typography>
           </div>
         ) : null}
@@ -165,6 +170,7 @@ function NavItem({
   const ExpandIcon = open ? CaretDownIcon : CaretRightIcon;
   const isBranch = children && !href;
   const showChildren = Boolean(children && open);
+  const { t } = useTranslation();
 
   return (
     <Box component="li" data-depth={depth} sx={{ userSelect: 'none' }}>
@@ -245,7 +251,7 @@ function NavItem({
             component="span"
             sx={{ color: 'inherit', fontSize: '0.875rem', fontWeight: 500, lineHeight: '28px' }}
           >
-            {title}
+            {t(title || '')}
           </Typography>
         </Box>
         {label ? <Chip color="primary" label={label} size="small" /> : null}