diff --git a/002_source/cms/src/components/dashboard/customer/helloworld.tsx b/002_source/cms/src/components/dashboard/customer/helloworld.tsx
new file mode 100644
index 0000000..3989cb1
--- /dev/null
+++ b/002_source/cms/src/components/dashboard/customer/helloworld.tsx
@@ -0,0 +1,3 @@
+const helloworld = 'helloworld';
+
+export { helloworld };
diff --git a/002_source/cms/src/components/dashboard/overview/summary.tsx b/002_source/cms/src/components/dashboard/overview/summary.tsx
index dd69dae..9c381d4 100644
--- a/002_source/cms/src/components/dashboard/overview/summary.tsx
+++ b/002_source/cms/src/components/dashboard/overview/summary.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
@@ -9,6 +11,7 @@ import Typography from '@mui/material/Typography';
 import type { Icon } from '@phosphor-icons/react/dist/lib/types';
 import { TrendDown as TrendDownIcon } from '@phosphor-icons/react/dist/ssr/TrendDown';
 import { TrendUp as TrendUpIcon } from '@phosphor-icons/react/dist/ssr/TrendUp';
+import { useTranslation } from 'react-i18next';
 
 export interface SummaryProps {
   amount: number;
@@ -19,6 +22,7 @@ export interface SummaryProps {
 }
 
 export function Summary({ amount, diff, icon: Icon, title, trend }: SummaryProps): React.JSX.Element {
+  const { t } = useTranslation();
   return (
     <Card>
       <CardContent>
@@ -62,7 +66,7 @@ export function Summary({ amount, diff, icon: Icon, title, trend }: SummaryProps
             <Typography color={trend === 'up' ? 'success.main' : 'error.main'} component="span" variant="subtitle2">
               {new Intl.NumberFormat('en-US', { style: 'percent', maximumFractionDigits: 2 }).format(diff / 100)}
             </Typography>{' '}
-            {trend === 'up' ? 'increase' : 'decrease'} vs last month
+            {trend === 'up' ? t('increase') : t('decrease')} {t('vs last month')}
           </Typography>
         </Stack>
       </Box>