diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 833338cb..da19b871 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -23,6 +23,7 @@
         "@types/node": "^16.18.97",
         "axios": "^1.7.2",
         "chart.js": "^4.4.3",
+        "moment": "^2.30.1",
         "react": "^18.2.0",
         "react-chartjs-2": "^5.2.0",
         "react-dom": "^18.2.0",
@@ -14229,6 +14230,14 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index ec990b3c..96afbe4b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,6 +18,7 @@
     "@types/node": "^16.18.97",
     "axios": "^1.7.2",
     "chart.js": "^4.4.3",
+    "moment": "^2.30.1",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
diff --git a/frontend/src/components/TopBar/index.tsx b/frontend/src/components/TopBar/index.tsx
index 3dc61934..8dc74156 100644
--- a/frontend/src/components/TopBar/index.tsx
+++ b/frontend/src/components/TopBar/index.tsx
@@ -37,7 +37,9 @@ const TopBarComponent: FC<ITopBarProps> = (
             className="menuIcon"
             onClick={() => setIsOpen(!isOpen)}
           />
-          <Typography variant="h3">Welcome {user.firstName}</Typography>
+          <Typography variant="h3">
+            Welcome {sessionStorage.getItem('name')}
+          </Typography>
         </FlexBetween>
         <Box display="flex">
           <Grid onClick={colorMode.toggleColorMode} className="iconBlock">
diff --git a/frontend/src/components/charts/areaChart/index.tsx b/frontend/src/components/charts/areaChart/index.tsx
index e60c1568..f589692b 100644
--- a/frontend/src/components/charts/areaChart/index.tsx
+++ b/frontend/src/components/charts/areaChart/index.tsx
@@ -27,10 +27,12 @@ ChartJS.register(
 interface IAreaChartProps {
   data: IAssetPriceData[];
 }
+
 const options: ChartOptions<'line'> = {
   responsive: true,
   scales: {
     x: {
+      display: false,
       grid: {
         display: false,
       },
@@ -46,13 +48,28 @@ const options: ChartOptions<'line'> = {
     legend: {
       display: false,
     },
+    title: {
+      display: true,
+      text: new Date().toLocaleDateString('en-us', {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      }),
+    },
   },
 };
 
 const AreaChart: FC<IAreaChartProps> = ({ data }) => {
-  console.log(data);
   const values: ChartData<'line'> = {
-    labels: data.map(el => new Date(el.time).getUTCDate()),
+    labels: data.map(el => {
+      const timeDay = Number(`${el.time}000`);
+      return new Date(timeDay).toLocaleDateString('en-us', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      });
+    }),
     datasets: [
       {
         label: 'Price',
@@ -60,7 +77,7 @@ const AreaChart: FC<IAreaChartProps> = ({ data }) => {
         fill: 'start',
         backgroundColor: (context: ScriptableContext<'line'>) => {
           const ctx = context.chart.ctx;
-          const gradient = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);
+          const gradient = ctx.createLinearGradient(0, 50, 0, 180);
           gradient.addColorStop(0, '#C1EF00');
           gradient.addColorStop(1, '#232323');
           return gradient;
@@ -68,7 +85,7 @@ const AreaChart: FC<IAreaChartProps> = ({ data }) => {
       },
     ],
   };
-  return <Line options={options} data={values} width={300} height={100} />;
+  return <Line options={options} data={values} width={300} height={125} />;
 };
 
 export default AreaChart;
diff --git a/frontend/src/pages/Home/index.tsx b/frontend/src/pages/Home/index.tsx
index ae33e84d..f23a67a1 100644
--- a/frontend/src/pages/Home/index.tsx
+++ b/frontend/src/pages/Home/index.tsx
@@ -4,7 +4,6 @@ import { useAppDispatch, useAppSelector } from '../../utils/hook';
 import { getFavoriteAssets, getPricePeriod } from '../../store/thunks/assets';
 import {
   IAssetFavoriteResponses,
-  IAssetPriceData,
   IAssetPriceResponses,
 } from '../../common/types/assets';
 import { BoxStyled } from './styles';
@@ -38,7 +37,7 @@ const Home: FC = (): JSX.Element => {
     fetchDataAsset(favoriteAssetsName);
   }, [dispatch, favoriteAssetsName]);
 
-  const filterFavoriteArray = favoriteAssets.filter(
+  const filterFavoriteArray: IAssetFavoriteResponses[] = favoriteAssets.filter(
     (value, index, self) =>
       index === self.findIndex(t => t.name === value.name),
   );
diff --git a/frontend/src/store/thunks/auth/index.ts b/frontend/src/store/thunks/auth/index.ts
index d9f24899..685ba793 100644
--- a/frontend/src/store/thunks/auth/index.ts
+++ b/frontend/src/store/thunks/auth/index.ts
@@ -11,6 +11,8 @@ export const loginUsers = createAsyncThunk<
   try {
     const user = await instance.post('auth/login', data);
     sessionStorage.setItem('token', user.data.token);
+    sessionStorage.setItem('name', user.data.user.firstName);
+    console.log(user.data);
     return user.data;
   } catch (error) {
     const typedError = error as IError;
@@ -29,6 +31,7 @@ export const registerUsers = createAsyncThunk<
   try {
     const newUser = await instance.post('auth/register', data);
     sessionStorage.setItem('token', newUser.data.token);
+    sessionStorage.setItem('name', newUser.data.user.firstName);
     return newUser.data;
   } catch (error) {
     const typedError = error as IError;