diff --git a/frontend/common/CustomCardDashboard.tsx b/frontend/common/CustomCardDashboard.tsx
index 860c8cd..46309c7 100644
--- a/frontend/common/CustomCardDashboard.tsx
+++ b/frontend/common/CustomCardDashboard.tsx
@@ -1,6 +1,6 @@
 import {Box, Card, Typography} from '@mui/material';
-import FloodRoundedIcon from '@mui/icons-material/FloodRounded';
 import {FC} from 'react';
+
 interface Props {
   title: string;
   amount: string;
@@ -11,13 +11,13 @@ const CustomCardDashboard: FC<Props> = ({title, amount, icons}) => {
     <Card
       elevation={0}
       sx={{
+        display: 'flex',
         background: '#fff',
         height: '125px',
         flexDirection: 'column',
         borderRadius: '10px',
         width: '125px',
         float: 'left',
-        m: '10px',
       }}>
       <Box
         sx={{
diff --git a/frontend/common/CustomCardDashboardTwo.tsx b/frontend/common/CustomCardDashboardTwo.tsx
index 91a6cfa..af4f425 100644
--- a/frontend/common/CustomCardDashboardTwo.tsx
+++ b/frontend/common/CustomCardDashboardTwo.tsx
@@ -1,6 +1,6 @@
-import {Box, Card, Paper, Typography} from '@mui/material';
-import FloodRoundedIcon from '@mui/icons-material/FloodRounded';
+import {Box, Paper, Typography} from '@mui/material';
 import {FC} from 'react';
+
 interface Props {
   title: string;
   amount: string;
@@ -16,7 +16,6 @@ const CustomCardDashboard: FC<Props> = ({title, amount, icons}) => {
         flexDirection: 'column',
         borderRadius: '20px',
         border: '1px solid #F0EEEF',
-        width: '180px',
       }}>
       <Box
         sx={{
diff --git a/frontend/common/CustomCardForSettings.tsx b/frontend/common/CustomCardForSettings.tsx
index 98ea11e..966c80c 100644
--- a/frontend/common/CustomCardForSettings.tsx
+++ b/frontend/common/CustomCardForSettings.tsx
@@ -33,7 +33,14 @@ const CustomCardForSetting: FC<Props> = ({title, subTitle}) => {
         <Typography sx={{opacity: '.3'}}>{subTitle}</Typography>
         <Button
           onClick={handleDrewer}
-          sx={{color: '#000', p: '0px 0px', maxWidth: '20px'}}
+          sx={{
+            p: '0px 0px',
+            maxWidth: '20px',
+            color: 'common.white',
+            ':hover': {
+              backgroundColor: 'common.white',
+            },
+          }}
           endIcon={<PlayArrowIcon sx={{color: '#000'}} />}></Button>
 
         <Drawers state={state} setState={setState} />
diff --git a/frontend/common/CustomCardMyWallet2.tsx b/frontend/common/CustomCardMyWallet2.tsx
index 925f2ac..3ff2c59 100644
--- a/frontend/common/CustomCardMyWallet2.tsx
+++ b/frontend/common/CustomCardMyWallet2.tsx
@@ -18,18 +18,18 @@ const CustomCardMyWallet2: FC<Props> = ({title, amount, icons}) => {
         display: 'flex',
         background: '#fff',
         borderRadius: '20px',
-        border: '1px solid #F0EEEF',
+        border: '2px solid #F0EEEF',
         justifyContent: 'space-between',
         alignItems: 'center',
+        p: '10px',
       }}>
       <Grid
         item
         xs={1.5}
         sx={{
-          height: '50px',
-          width: '50px',
-          m: '6px',
-          backgroundColor: '#EBE9ED',
+          height: '45px',
+          width: '45px',
+          backgroundColor: '#ADABAD',
           borderRadius: '14px',
           color: '#fff',
           display: 'flex',
@@ -39,7 +39,7 @@ const CustomCardMyWallet2: FC<Props> = ({title, amount, icons}) => {
         {icons}
       </Grid>
       <Grid item xs={5} sx={{pl: '10px'}}>
-        <Typography sx={{fontSize: '17px', fontWeight: '700'}}>
+        <Typography sx={{fontSize: '15px', fontWeight: '700'}}>
           {title}
         </Typography>
         <Typography
@@ -60,7 +60,6 @@ const CustomCardMyWallet2: FC<Props> = ({title, amount, icons}) => {
           display: 'flex',
           alignItems: 'end',
           justifyContent: 'right',
-          pr: '10px',
         }}>
         <Button
           sx={{color: '#000', p: '0px 0px'}}
diff --git a/frontend/common/CustomHorizontalCard.tsx b/frontend/common/CustomHorizontalCard.tsx
index 17e6a30..196a8af 100644
--- a/frontend/common/CustomHorizontalCard.tsx
+++ b/frontend/common/CustomHorizontalCard.tsx
@@ -64,7 +64,7 @@ const CustomHorizontalCard: FC<Props> = ({
           color: '#fff',
           display: 'flex',
           alignItems: 'center',
-          justifyContent: 'center',
+          justifyContent: 'right',
         }}>
         {icons2}
       </Grid>
@@ -79,6 +79,7 @@ const CustomHorizontalCard: FC<Props> = ({
           fontWeight: '700',
           textAlign: 'right',
           pr: '9px',
+          opacity: '.4',
         }}>
         {amount}
       </Grid>
diff --git a/frontend/common/CustomMyWalletCart.tsx b/frontend/common/CustomMyWalletCart.tsx
index eadfa46..8009d6c 100644
--- a/frontend/common/CustomMyWalletCart.tsx
+++ b/frontend/common/CustomMyWalletCart.tsx
@@ -14,10 +14,23 @@ const CustomCardMyWallet: FC<Props> = ({title, icons}) => {
         background: '#fff',
         flexDirection: 'column',
         borderRadius: '20px',
-        border: '1px solid #F0EEEF',
-        width: '180px',
+        border: '2px solid #F0EEEF',
+        p: '10px',
       }}>
-      <Box>{icons}</Box>
+      <Box
+        sx={{
+          height: '45px',
+          width: '45px',
+          backgroundColor: '#ADABAD',
+          borderRadius: '14px',
+          color: '#fff',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          m: '10px',
+        }}>
+        {icons}
+      </Box>
       <Box>
         <Typography
           sx={{
@@ -26,7 +39,7 @@ const CustomCardMyWallet: FC<Props> = ({title, icons}) => {
             ml: '10px',
             mt: '1px',
             fontWeight: '700',
-            width: '70%',
+            width: '60%',
           }}>
           {title}
         </Typography>
diff --git a/frontend/common/addTransaction/CustomButtonText.tsx b/frontend/common/addTransaction/CustomButtonText.tsx
index bd8c340..2b0356b 100644
--- a/frontend/common/addTransaction/CustomButtonText.tsx
+++ b/frontend/common/addTransaction/CustomButtonText.tsx
@@ -6,9 +6,11 @@ const CustomButtonIcon = ({children, onClickBtn, backGround, icons}: any) => {
     <Card
       elevation={0}
       sx={{
-        background: '#fff',
+        background: '#FAF9FA',
         flexDirection: 'column',
         borderRadius: '10px',
+        display: 'flex',
+        textAlign: 'center',
       }}>
       <Box
         onClick={onClickBtn}
diff --git a/frontend/common/addTransaction/CustomButtonWithIcon.tsx b/frontend/common/addTransaction/CustomButtonWithIcon.tsx
index 8128885..959891e 100644
--- a/frontend/common/addTransaction/CustomButtonWithIcon.tsx
+++ b/frontend/common/addTransaction/CustomButtonWithIcon.tsx
@@ -15,14 +15,13 @@ const CustomButtonIcon1 = ({
         background: '#fff',
         flexDirection: 'column',
         borderRadius: borderRadius ? borderRadius : '10px',
-        m: '10px',
       }}>
       <Box
         onClick={onClickBtn}
         sx={{
           backgroundColor: backGround,
           color: '#040303',
-          padding: '5px 5px',
+          padding: '10px',
           borderRadius: '15px',
           textAlign: 'center',
           fontWeight: '600',
diff --git a/frontend/common/budget/CustomCardBudget.tsx b/frontend/common/budget/CustomCardBudget.tsx
index 35a683a..ac4cfa8 100644
--- a/frontend/common/budget/CustomCardBudget.tsx
+++ b/frontend/common/budget/CustomCardBudget.tsx
@@ -1,6 +1,7 @@
 import {Box, Divider, Grid, Typography} from '@mui/material';
 import {FC} from 'react';
 import EditRoundedIcon from '@mui/icons-material/EditRounded';
+import {CardBorder} from '@/core/enums';
 
 interface Props {
   title: string;
@@ -11,8 +12,8 @@ interface Props {
 }
 const CustomBudgetCard: FC<Props> = ({title, amount, icons, budgetTitle}) => {
   return (
-    <Grid container sx={{border: '2px solid #F3F1F4', borderRadius: '15px'}}>
-      <Grid item xs={2}>
+    <Grid container sx={{border: CardBorder.TWO_PX, borderRadius: '15px'}}>
+      <Grid item xs={2} sx={{display: 'flex', alignItems: 'center'}}>
         {icons}
       </Grid>
       <Grid item xs={10}>
@@ -22,7 +23,7 @@ const CustomBudgetCard: FC<Props> = ({title, amount, icons, budgetTitle}) => {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'space-between',
-            pr: '12px',
+            pr: '16px',
           }}>
           <Grid item xs={6}>
             <Typography sx={{fontSize: '14px', fontWeight: '700'}}>
@@ -48,7 +49,7 @@ const CustomBudgetCard: FC<Props> = ({title, amount, icons, budgetTitle}) => {
             }}>
             <Box>
               <EditRoundedIcon
-                sx={{color: '#7F7E80', fontSize: '120%', mt: '5px'}}
+                sx={{color: '#E1E0E0', fontSize: '120%', mt: '5px'}}
               />
             </Box>
 
@@ -57,13 +58,20 @@ const CustomBudgetCard: FC<Props> = ({title, amount, icons, budgetTitle}) => {
                 fontSize: '14px',
                 mt: '1px',
                 fontWeight: '700',
-                opacity: '.5',
+                opacity: '.3',
               }}>
               {amount}
             </Typography>
           </Grid>
           <Grid item xs={12}>
-            <Divider />
+            <Divider
+              sx={{
+                height: '2px',
+                width: '100%',
+                fontWeight: 'bold',
+                backgroundColor: '#E7E4ED',
+              }}
+            />
           </Grid>
         </Grid>
       </Grid>
diff --git a/frontend/common/button/CustomActionButtonComponent.tsx b/frontend/common/button/CustomActionButtonComponent.tsx
new file mode 100644
index 0000000..294c8a7
--- /dev/null
+++ b/frontend/common/button/CustomActionButtonComponent.tsx
@@ -0,0 +1,31 @@
+import {Button} from '@mui/material';
+import React from 'react';
+interface IActionButton {
+  onClickBtn?: any;
+  children?: any;
+}
+
+const CustomActionButtonComponent = ({onClickBtn, children}: IActionButton) => {
+  return (
+    <Button
+      onClick={onClickBtn}
+      type='submit'
+      variant='contained'
+      sx={{
+        borderRadius: '25px',
+        backgroundColor: 'common.black',
+        position: 'fixed',
+        height: '50px',
+        bottom: '30px',
+        minWidth: '415px',
+        fontWeight: '700',
+        ':hover': {
+          backgroundColor: 'common.black',
+          color: 'common.white',
+        },
+      }}>
+      {children}
+    </Button>
+  );
+};
+export default CustomActionButtonComponent;
diff --git a/frontend/common/button/CustomBackButton.tsx b/frontend/common/button/CustomBackButton.tsx
new file mode 100644
index 0000000..58d5ca2
--- /dev/null
+++ b/frontend/common/button/CustomBackButton.tsx
@@ -0,0 +1,37 @@
+import {Button} from '@mui/material';
+import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
+import React from 'react';
+import {useRouter} from 'next/navigation';
+
+const CustomBackButton = () => {
+  const Router = useRouter();
+  const handleBack = () => {
+    return Router.back();
+  };
+
+  return (
+    <Button
+      sx={{
+        p: '0px 0px',
+        display: 'flex',
+        justifyContent: 'initial',
+        color: 'common.white',
+        ':hover': {
+          backgroundColor: 'common.white',
+        },
+      }}
+      onClick={handleBack}>
+      <KeyboardBackspaceIcon
+        sx={{
+          color: '#403F40',
+          backgroundColor: '#fff',
+          borderRadius: '12px',
+          fontSize: '245%',
+          border: '2px solid #EEEDEE',
+          p: '3px',
+        }}
+      />
+    </Button>
+  );
+};
+export default CustomBackButton;
diff --git a/frontend/component/AddNewBudget.tsx b/frontend/component/AddNewBudget.tsx
index 20cdc08..32194ed 100644
--- a/frontend/component/AddNewBudget.tsx
+++ b/frontend/component/AddNewBudget.tsx
@@ -1,47 +1,31 @@
 'use client';
-import {
-  Button,
-  Container,
-  Grid,
-  MenuItem,
-  TextField,
-  Typography,
-} from '@mui/material';
-import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
+import {Container, Grid, MenuItem, TextField, Typography} from '@mui/material';
 import React from 'react';
 import {budget, currencies, wallets} from '@/common/ListedData';
-import {useRouter} from 'next/navigation';
+import CustomActionButtonComponent from '@/common/button/CustomActionButtonComponent';
+import {CustomStyles} from '@/core/enums';
+import CustomBackButton from '@/common/button/CustomBackButton';
 
 const AddNewBudget = () => {
-  const Router = useRouter();
-  const handleBack = () => {
-    return Router.back();
+  const handleClick = () => {
+    return console.log('Add a budget page');
   };
   return (
     <Container
       maxWidth={'xs'}
-      sx={{minHeight: '100vh', backgroundColor: '#FEFEFF', pt: '40px'}}>
-      <Grid container spacing={2}>
-        <Grid
-          item
-          xs={12}
-          sx={{
-            mt: '36px',
-          }}>
-          <Button
-            sx={{p: '0px 0px', display: 'flex', justifyContent: 'initial'}}
-            onClick={handleBack}>
-            <KeyboardBackspaceIcon
-              sx={{
-                color: '#403F40',
-                backgroundColor: '#fff',
-                borderRadius: '8px',
-                fontSize: '240%',
-                border: '2px solid #EEEDEE',
-                p: '3px',
-              }}
-            />
-          </Button>
+      disableGutters={true}
+      sx={{
+        minHeight: '100vh',
+        backgroundColor: '#FEFEFF',
+        pt: CustomStyles.CONTAINER_TOP,
+        pl: CustomStyles.CONTAINER_LEFT,
+        pr: CustomStyles.CONTAINER_RIGHT,
+        pb: '100px',
+        position: 'relative',
+      }}>
+      <Grid container rowSpacing={2}>
+        <Grid item xs={12}>
+          <CustomBackButton />
         </Grid>
 
         <Grid item xs={12}>
@@ -55,27 +39,9 @@ const AddNewBudget = () => {
             Budget Name
           </Typography>
           <TextField
-            sx={{width: '95%'}}
-            id='budget-name'
-            label='Budget Name'
-            type='budget-name'
-            autoComplete='current-password'
-            InputProps={{
-              sx: {
-                borderRadius: '15px',
-                border: '2px solid #F4F2F3',
-              },
-            }}
-          />
-        </Grid>
-        <Grid item xs={6}>
-          <Typography sx={{fontSize: '16px', fontWeight: '700', pb: '3px'}}>
-            Amount
-          </Typography>
-          <TextField
-            sx={{width: '95%'}}
+            sx={{width: '100%'}}
             id='budget-name'
-            label='$0'
+            placeholder='Budget Name'
             type='budget-name'
             autoComplete='current-password'
             InputProps={{
@@ -86,34 +52,57 @@ const AddNewBudget = () => {
             }}
           />
         </Grid>
-        <Grid item xs={6}>
-          <Typography sx={{fontSize: '16px', fontWeight: '700', pb: '3px'}}>
-            Budget Name
-          </Typography>
-          <TextField
-            sx={{width: '95%'}}
-            id='currency'
-            select
-            defaultValue='EUR'
-            InputProps={{
-              sx: {
-                borderRadius: '15px',
-                border: '2px solid #F4F2F3',
-              },
-            }}>
-            {currencies.map((option) => (
-              <MenuItem key={option.title} value={option.title}>
-                {option.label}
-              </MenuItem>
-            ))}
-          </TextField>
+        <Grid item xs={12}>
+          <Grid container columnSpacing={1.4}>
+            <Grid item xs={6}>
+              <Typography sx={{fontSize: '16px', fontWeight: '700', pb: '3px'}}>
+                Amount
+              </Typography>
+              <TextField
+                sx={{width: '100%'}}
+                id='budget-name'
+                placeholder='$0'
+                type='budget-name'
+                autoComplete='current-password'
+                InputProps={{
+                  sx: {
+                    borderRadius: '15px',
+                    border: '2px solid #F4F2F3',
+                  },
+                }}
+              />
+            </Grid>
+            <Grid item xs={6}>
+              <Typography sx={{fontSize: '16px', fontWeight: '700', pb: '3px'}}>
+                Budget Name
+              </Typography>
+              <TextField
+                sx={{width: '100%'}}
+                id='currency'
+                select
+                defaultValue='EUR'
+                InputProps={{
+                  sx: {
+                    borderRadius: '15px',
+                    border: '2px solid #F4F2F3',
+                  },
+                }}>
+                {currencies.map((option) => (
+                  <MenuItem key={option.title} value={option.title}>
+                    {option.label}
+                  </MenuItem>
+                ))}
+              </TextField>
+            </Grid>
+          </Grid>
         </Grid>
+
         <Grid item xs={12}>
           <Typography sx={{fontSize: '16px', fontWeight: '700', pb: '3px'}}>
             Budget Name
           </Typography>
           <TextField
-            sx={{width: '95%'}}
+            sx={{width: '100%'}}
             id='currency'
             select
             defaultValue='wallets'
@@ -135,7 +124,7 @@ const AddNewBudget = () => {
             Budget Name
           </Typography>
           <TextField
-            sx={{width: '95%'}}
+            sx={{width: '100%'}}
             id='currency'
             select
             defaultValue='expenses'
@@ -152,23 +141,10 @@ const AddNewBudget = () => {
             ))}
           </TextField>
         </Grid>
-        <Grid item xs={12} sx={{mr: '16px', position: 'fixed', bottom: '10px'}}>
-          <Button
-            type='submit'
-            fullWidth
-            variant='contained'
-            sx={{
-              mt: 3,
-              mb: 2,
-              borderRadius: '25px',
-              backgroundColor: '#343333',
-              height: '50px',
-              position: 'fixed',
-              bottom: '0px',
-              width: '399px',
-            }}>
+        <Grid item xs={12} sx={{bottom: '10px', position: 'sticky'}}>
+          <CustomActionButtonComponent onClickBtn={handleClick}>
             ADD A BUDGET
-          </Button>
+          </CustomActionButtonComponent>
         </Grid>
       </Grid>
     </Container>
diff --git a/frontend/component/AddTransaction.tsx b/frontend/component/AddTransaction.tsx
index 71770ce..b4bccef 100644
--- a/frontend/component/AddTransaction.tsx
+++ b/frontend/component/AddTransaction.tsx
@@ -1,17 +1,17 @@
 'use client';
-import {Box, Button, Container, Grid, Typography} from '@mui/material';
+import {Box, Container, Grid, Typography} from '@mui/material';
 import ArrowDownwardRoundedIcon from '@mui/icons-material/ArrowDownwardRounded';
 import CustomBottomIcons from '@/common/CustomBottomIcons';
 import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
-import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
 import React, {useState} from 'react';
 import CustomCardHorizonatlIconAndTitle from '@/common/addTransaction/CustomCardHorizontalIconAndTiTle';
 import CustomButtonIcon1 from '@/common/addTransaction/CustomButtonWithIcon';
 import CustomButtonText from '@/common/addTransaction/CustomButtonText';
-import {useRouter} from 'next/navigation';
+import CustomActionButtonComponent from '@/common/button/CustomActionButtonComponent';
+import CustomBackButton from '@/common/button/CustomBackButton';
+import {CustomStyles, Fonts} from '@/core/enums';
 
 const AddTransaction = () => {
-  const Router = useRouter();
   const [selectedIndex, setSelectedIndex] = useState(0);
   const handleWalletClick = (active: number) => {
     setSelectedIndex(active);
@@ -28,72 +28,71 @@ const AddTransaction = () => {
     return;
   };
 
-  const handleBack = () => {
-    return Router.back();
+  const handleTransaction = () => {
+    return console.log('This is transaction');
   };
 
   return (
     <Container
       maxWidth={'xs'}
-      sx={{minHeight: '100vh', backgroundColor: '#FEFEFF', pt: '40px'}}>
-      <Grid container spacing={2}>
+      disableGutters={true}
+      sx={{
+        minHeight: '100vh',
+        backgroundColor: '#FEFEFF',
+        pt: CustomStyles.CONTAINER_TOP,
+        pl: CustomStyles.CONTAINER_LEFT,
+        pr: CustomStyles.CONTAINER_RIGHT,
+        pb: '100px',
+        position: 'relative',
+      }}>
+      <Grid container rowSpacing={0}>
         <Grid
           item
           xs={12}
           sx={{
             display: 'flex',
             alignItems: 'self-start',
+            mb: '16px',
           }}>
-          <Button onClick={handleBack}>
-            <KeyboardBackspaceIcon
-              sx={{
-                color: '#B1AFB1',
-                backgroundColor: '#fff',
-                borderRadius: '8px',
-                p: '5px',
-                fontSize: '230%',
-                mt: '12px',
-                border: '2px solid #B1AFB1',
-              }}
-            />
-          </Button>
+          <CustomBackButton />
         </Grid>
-        <Grid item xs={12}>
+        <Grid item xs={12} sx={{mb: '16px'}}>
           <Typography sx={{fontSize: '24px', fontWeight: '700'}}>
             Add Transaction
           </Typography>
         </Grid>
-        <Grid item xs={12} sx={{mr: '16px'}}>
+        <Grid item xs={12} sx={{mb: '16px'}}>
           <Grid
             container
             sx={{
               width: '100%',
               backgroundColor: '#FAF9FA',
+              borderRadius: '30px',
             }}>
             <Grid item xs={4}>
               <CustomButtonText
-                backGround={selectedIndex === 0 ? '#E7E6E6' : '#FAF9FA'}
+                backGround={selectedIndex === 0 ? '#E7E6E6' : null}
                 onClickBtn={() => handleWalletClick(0)}>
                 Expenses
               </CustomButtonText>
             </Grid>
             <Grid item xs={4}>
               <CustomButtonText
-                backGround={selectedIndex === 1 ? '#E7E6E6' : '#FAF9FA'}
+                backGround={selectedIndex === 1 ? '#E7E6E6' : null}
                 onClickBtn={() => handleWalletClick(1)}>
                 Incomes
               </CustomButtonText>
             </Grid>
             <Grid item xs={4}>
               <CustomButtonText
-                backGround={selectedIndex === 2 ? '#E7E6E6' : '#FAF9FA'}
+                backGround={selectedIndex === 2 ? '#E7E6E6' : null}
                 onClickBtn={() => handleWalletClick(2)}>
                 Savings
               </CustomButtonText>
             </Grid>
           </Grid>
         </Grid>
-        <Grid item xs={12} sx={{mr: '16px'}}>
+        <Grid item xs={12} sx={{mb: '16px'}}>
           <Grid
             container
             spacing={0}
@@ -117,7 +116,16 @@ const AddTransaction = () => {
                 justifyContent: 'end',
                 pr: '5px',
               }}>
-              <Box sx={{opacity: '.7', textAlign: 'right', p: '6px'}}>USD</Box>
+              <Box
+                sx={{
+                  opacity: '.4',
+                  textAlign: 'right',
+                  p: '6px',
+                  fontSize: '12px',
+                  fontWeight: Fonts.BOLD,
+                }}>
+                USD
+              </Box>
               <Box>
                 <CustomBottomIcons
                   icon={
@@ -137,7 +145,7 @@ const AddTransaction = () => {
             </Grid>
           </Grid>
         </Grid>
-        <Grid item xs={12}>
+        <Grid item xs={12} sx={{mb: '8px'}}>
           <Typography
             sx={{
               textAlign: 'left',
@@ -146,7 +154,7 @@ const AddTransaction = () => {
             Wallet
           </Typography>
         </Grid>
-        <Grid item xs={12}>
+        <Grid item xs={12} sx={{mb: '16px'}}>
           <Grid container rowSpacing={1}>
             <Grid item xs={12}>
               <Grid container rowSpacing={1} columnSpacing={1}>
@@ -179,7 +187,7 @@ const AddTransaction = () => {
             </Grid>
           </Grid>
         </Grid>
-        <Grid item xs={12}>
+        <Grid item xs={12} sx={{mb: '8px'}}>
           <Typography
             sx={{
               textAlign: 'left',
@@ -193,10 +201,11 @@ const AddTransaction = () => {
           xs={12}
           sx={{
             border: '2px solid #F0EFF0',
-            borderRadius: '30px',
-            m: '15px',
+            borderRadius: '20px',
+            p: '15px',
+            mb: '16px',
           }}>
-          <Grid container spacing={2}>
+          <Grid container spacing={3}>
             <Grid
               item
               xs={3}
@@ -212,7 +221,7 @@ const AddTransaction = () => {
                       color: '#333333',
                       backgroundColor: 'white',
                       borderRadius: '8px',
-                      border: '2px solid #393939',
+                      border: '3px solid #393939',
                       p: '5px',
                       fontSize: '230%',
                     }}
@@ -317,8 +326,15 @@ const AddTransaction = () => {
         </Grid>
 
         <Grid item xs={12}>
-          <Grid container spacing={1}>
-            <Grid item xs={4}>
+          <Grid
+            container
+            rowSpacing={1}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}>
+            <Grid item xs={4.5}>
               <CustomButtonText
                 backGround={selectedIndex2 === 0 ? '#E7E6E6' : '#FAF9FA'}
                 borderRadius={'20px'}
@@ -326,7 +342,7 @@ const AddTransaction = () => {
                 Today
               </CustomButtonText>
             </Grid>
-            <Grid item xs={4}>
+            <Grid item xs={4.5}>
               <CustomButtonText
                 backGround={selectedIndex2 === 1 ? '#E7E6E6' : '#FAF9FA'}
                 borderRadius={'20px'}
@@ -334,7 +350,7 @@ const AddTransaction = () => {
                 Yestarday
               </CustomButtonText>
             </Grid>
-            <Grid item xs={4}>
+            <Grid item xs={3}>
               <CustomBottomIcons
                 icon={
                   <ArrowDownwardRoundedIcon
@@ -344,8 +360,7 @@ const AddTransaction = () => {
                       borderRadius: '8px',
                       p: '5px',
                       fontSize: '230%',
-                      mt: '12px',
-                      border: '2px solid #B1AFB1',
+                      border: '2px solid #F2F1F2',
                     }}
                   />
                 }
@@ -353,20 +368,10 @@ const AddTransaction = () => {
             </Grid>
           </Grid>
         </Grid>
-        <Grid item xs={12} sx={{mr: '16px'}}>
-          <Button
-            type='submit'
-            fullWidth
-            variant='contained'
-            sx={{
-              mt: 3,
-              mb: 2,
-              borderRadius: '25px',
-              backgroundColor: '#343333',
-              height: '50px',
-            }}>
+        <Grid item xs={12}>
+          <CustomActionButtonComponent onClickBtn={handleTransaction}>
             ADD TRANSACTION
-          </Button>
+          </CustomActionButtonComponent>
         </Grid>
       </Grid>
     </Container>
diff --git a/frontend/component/Dashboard.tsx b/frontend/component/Dashboard.tsx
index c0193a2..0746982 100644
--- a/frontend/component/Dashboard.tsx
+++ b/frontend/component/Dashboard.tsx
@@ -1,9 +1,7 @@
 'use client';
 import {Box, Container, Grid, Typography} from '@mui/material';
-import FloodRoundedIcon from '@mui/icons-material/FloodRounded';
 import CustomCardDashboard from '@/common/CustomCardDashboard';
 import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
-import InventoryIcon from '@mui/icons-material/Inventory';
 import CustomCardDashboardTwo from '@/common/CustomCardDashboardTwo';
 import ArrowDownwardRoundedIcon from '@mui/icons-material/ArrowDownwardRounded';
 import SouthWestRoundedIcon from '@mui/icons-material/SouthWestRounded';
@@ -11,23 +9,37 @@ import TurnSlightRightRoundedIcon from '@mui/icons-material/TurnSlightRightRound
 import RadarRoundedIcon from '@mui/icons-material/RadarRounded';
 import CustomHorizontalCard from '@/common/CustomHorizontalCard';
 import Footer from '@/common/footer/Footer';
+import {CustomStyles} from '@/core/enums';
 
 const DashBoard = () => {
   return (
     <Container
       maxWidth={'xs'}
-      sx={{minHeight: '100vh', backgroundColor: '#FEFEFF'}}>
-      <Grid container spacing={2}>
+      disableGutters={true}
+      sx={{
+        minHeight: '100vh',
+        backgroundColor: '#FEFEFF',
+        // pt: CustomStyles.CONTAINER_TOP,
+        // pl: CustomStyles.CONTAINER_LEFT,
+        // pr: CustomStyles.CONTAINER_RIGHT,
+        pb: '100px',
+        position: 'relative',
+      }}>
+      <Grid container rowSpacing={1}>
         <Grid
           item
           xs={12}
           sx={{
             backgroundColor: '#D1CED8',
+            // backgroundColor: 'red',
             width: '100%',
+            pt: CustomStyles.CONTAINER_TOP,
+            pl: CustomStyles.CONTAINER_LEFT,
+            pr: CustomStyles.CONTAINER_RIGHT,
             borderBottomRightRadius: '20px',
             borderBottomLeftRadius: '20px',
           }}>
-          <Grid container>
+          <Grid container spacing={1}>
             <Grid item xs={12}>
               <Typography
                 sx={{fontSize: '18px', fontWeight: '700', mt: '40px'}}>
@@ -40,9 +52,9 @@ const DashBoard = () => {
                 $2,600
               </Typography>
             </Grid>
-            <Grid item xs={12}>
-              <Grid container spacing={2} sx={{}}>
-                <Grid xs={4}>
+            <Grid item xs={12} sx={{mb: '15px'}}>
+              <Grid container spacing={2}>
+                <Grid item xs={4}>
                   <CustomCardDashboard
                     title={'Monobank'}
                     amount={'$1,250'}
@@ -52,8 +64,8 @@ const DashBoard = () => {
                       />
                     }
                   />
-                </Grid>{' '}
-                <Grid xs={4}>
+                </Grid>
+                <Grid item xs={4}>
                   <CustomCardDashboard
                     title={'Monobank'}
                     amount={'$1,250'}
@@ -63,8 +75,8 @@ const DashBoard = () => {
                       />
                     }
                   />
-                </Grid>{' '}
-                <Grid xs={4}>
+                </Grid>
+                <Grid item xs={4}>
                   <CustomCardDashboard
                     title={'Monobank'}
                     amount={'$1,250'}
@@ -74,8 +86,8 @@ const DashBoard = () => {
                       />
                     }
                   />
-                </Grid>{' '}
-                <Grid xs={4}>
+                </Grid>
+                <Grid item xs={4}>
                   <CustomCardDashboard
                     title={'Monobank'}
                     amount={'$1,250'}
@@ -85,8 +97,8 @@ const DashBoard = () => {
                       />
                     }
                   />
-                </Grid>{' '}
-                <Grid xs={4}>
+                </Grid>
+                <Grid item xs={4}>
                   <CustomCardDashboard
                     title={'Monobank'}
                     amount={'$1,250'}
@@ -97,33 +109,19 @@ const DashBoard = () => {
                     }
                   />
                 </Grid>
-                {/*<CustomCardDashboard*/}
-                {/*  title={'Revolut'}*/}
-                {/*  amount={'$884.25'}*/}
-                {/*  icons={*/}
-                {/*    <FloodRoundedIcon sx={{color: '#fff', fontSize: '250%'}} />*/}
-                {/*  }*/}
-                {/*/>*/}
-                {/*<CustomCardDashboard*/}
-                {/*  title={'PayPal'}*/}
-                {/*  amount={'$320'}*/}
-                {/*  icons={*/}
-                {/*    <InventoryIcon sx={{color: '#fff', fontSize: '250%'}} />*/}
-                {/*  }*/}
-                {/*/>*/}
-                {/*<CustomCardDashboard*/}
-                {/*  title={'PayPal'}*/}
-                {/*  amount={'$320'}*/}
-                {/*  icons={*/}
-                {/*    <InventoryIcon sx={{color: '#fff', fontSize: '250%'}} />*/}
-                {/*  }*/}
-                {/*/>*/}
               </Grid>
             </Grid>
           </Grid>
         </Grid>
         <Grid item xs={12}>
-          <Grid container spacing={2}>
+          <Grid
+            container
+            spacing={2}
+            sx={{
+              pt: CustomStyles.CONTAINER_TOP,
+              pl: CustomStyles.CONTAINER_LEFT,
+              pr: CustomStyles.CONTAINER_RIGHT,
+            }}>
             <Grid item xs={6}>
               <CustomCardDashboardTwo
                 title={'Monthly Budget'}
@@ -155,7 +153,14 @@ const DashBoard = () => {
           </Grid>
         </Grid>
         <Grid item xs={12}>
-          <Grid container rowSpacing={1}>
+          <Grid
+            container
+            rowSpacing={1}
+            sx={{
+              pt: CustomStyles.CONTAINER_TOP,
+              pl: CustomStyles.CONTAINER_LEFT,
+              pr: CustomStyles.CONTAINER_RIGHT,
+            }}>
             <Grid
               item
               xs={12}
@@ -185,7 +190,7 @@ const DashBoard = () => {
                 See all {'>'}
               </Box>
             </Grid>
-            <Grid item xs={12} sx={{mr: '12px'}}>
+            <Grid item xs={12}>
               <CustomHorizontalCard
                 title={'Burger'}
                 subTitle={'Food'}
@@ -194,7 +199,7 @@ const DashBoard = () => {
                 amount={'$1000'}
               />
             </Grid>
-            <Grid item xs={12} sx={{mr: '12px'}}>
+            <Grid item xs={12}>
               <CustomHorizontalCard
                 title={'Burger'}
                 subTitle={'Food'}
@@ -203,7 +208,7 @@ const DashBoard = () => {
                 amount={'$1000'}
               />
             </Grid>
-            <Grid item xs={12} sx={{mr: '12px'}}>
+            <Grid item xs={12}>
               <CustomHorizontalCard
                 title={'Burger'}
                 subTitle={'Food'}
@@ -212,7 +217,7 @@ const DashBoard = () => {
                 amount={'$1000'}
               />
             </Grid>
-            <Grid item xs={12} sx={{mr: '12px'}}>
+            <Grid item xs={12}>
               <CustomHorizontalCard
                 title={'Burger'}
                 subTitle={'Food'}
@@ -223,8 +228,8 @@ const DashBoard = () => {
             </Grid>
           </Grid>
         </Grid>
-        <Footer currentOption={0} />
       </Grid>
+      <Footer currentOption={0} />
     </Container>
   );
 };
diff --git a/frontend/component/EatingOutPage.tsx b/frontend/component/EatingOutPage.tsx
index 39cd9f6..f2c0a76 100644
--- a/frontend/component/EatingOutPage.tsx
+++ b/frontend/component/EatingOutPage.tsx
@@ -1,41 +1,28 @@
 'use client';
-import {Button, Container, Grid, Typography} from '@mui/material';
+import {Container, Grid, Typography} from '@mui/material';
 import ArrowDownwardRoundedIcon from '@mui/icons-material/ArrowDownwardRounded';
 import CustomHorizontalCard from '@/common/CustomHorizontalCard';
 import React from 'react';
-import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
-import {useRouter} from 'next/navigation';
+import CustomBackButton from '@/common/button/CustomBackButton';
+import {CustomStyles} from '@/core/enums';
 
 const EatingOutPage = () => {
-  const Router = useRouter();
-  const handleBack = () => {
-    return Router.back();
-  };
   return (
     <Container
       maxWidth={'xs'}
-      sx={{minHeight: '100vh', backgroundColor: '#FEFEFF'}}>
+      disableGutters={true}
+      sx={{
+        minHeight: '100vh',
+        backgroundColor: '#FEFEFF',
+        pt: CustomStyles.CONTAINER_TOP,
+        pl: CustomStyles.CONTAINER_LEFT,
+        pr: CustomStyles.CONTAINER_RIGHT,
+        pb: '100px',
+        position: 'relative',
+      }}>
       <Grid container spacing={2}>
-        <Grid
-          item
-          xs={12}
-          sx={{
-            mt: '36px',
-          }}>
-          <Button
-            sx={{p: '0px 0px', display: 'flex', justifyContent: 'initial'}}
-            onClick={handleBack}>
-            <KeyboardBackspaceIcon
-              sx={{
-                color: '#403F40',
-                backgroundColor: '#fff',
-                borderRadius: '8px',
-                fontSize: '240%',
-                border: '2px solid #EEEDEE',
-                p: '3px',
-              }}
-            />
-          </Button>
+        <Grid item xs={12}>
+          <CustomBackButton />
         </Grid>
         <Grid item xs={12}>
           <Typography sx={{fontSize: '18px', fontWeight: '700'}}>
diff --git a/frontend/component/LogIn.tsx b/frontend/component/LogIn.tsx
index 4c62092..fe37041 100644
--- a/frontend/component/LogIn.tsx
+++ b/frontend/component/LogIn.tsx
@@ -1,55 +1,22 @@
-import React from 'react';
-import {useState} from 'react';
+import React, {useState} from 'react';
 
-import {Box, Container} from '@mui/material';
-import {useForm} from 'react-hook-form';
-import {yupResolver} from '@hookform/resolvers/yup';
-import * as yup from 'yup';
 import {
-  Button,
-  CssBaseline,
+  Box,
   Grid,
+  IconButton,
+  InputAdornment,
   TextField,
   Typography,
-  InputAdornment,
-  IconButton,
 } from '@mui/material';
-import {createTheme, ThemeProvider} from '@mui/material/styles';
-import {Visibility} from '@mui/icons-material';
-import {VisibilityOff} from '@mui/icons-material';
+import {Visibility, VisibilityOff} from '@mui/icons-material';
 import AppleIcon from '@mui/icons-material/Apple';
 import FacebookRoundedIcon from '@mui/icons-material/FacebookRounded';
 import GoogleIcon from '@mui/icons-material/Google';
 import {useRouter} from 'next/navigation';
+import CustomActionButtonComponent from '@/common/button/CustomActionButtonComponent';
 
-const defaultTheme = createTheme();
 const Login = () => {
   const Router = useRouter();
-  const userSchema = yup.object().shape({
-    email: yup
-      .string()
-      .email('Please enter a valid email')
-      .required('Email is required field'),
-    password: yup
-      .string()
-      .required('Password is a required field')
-      .min(6, 'Password must be at least 6 charcaters'),
-  });
-
-  const onSubmitHandler = (event: any) => {
-    event.preventDefault();
-    const data = new FormData(event.currentTarget);
-    console.log({
-      email: data.get('email'),
-      password: data.get('password'),
-    });
-  };
-  const {
-    handleSubmit,
-    formState: {errors},
-    reset,
-  } = useForm({resolver: yupResolver(userSchema)});
-
   const [showPassword, setShowPassword] = useState(false);
   const handleClickShowPassword = () => setShowPassword(!showPassword);
   const handleMouseDownPassword = () => setShowPassword(!showPassword);
@@ -227,24 +194,9 @@ const Login = () => {
             </Grid>
           </Grid>
           <Grid item xs={12}>
-            <Button
-              onClick={handleLogin}
-              type='submit'
-              fullWidth
-              variant='contained'
-              sx={{
-                mt: 3,
-                mb: 2,
-                borderRadius: '25px',
-                backgroundColor: '#343333',
-                height: '50px',
-                ':hover': {
-                  backgroundColor: 'primary.main', // theme.palette.primary.main
-                  color: 'white',
-                },
-              }}>
+            <CustomActionButtonComponent onClickBtn={handleLogin}>
               Login
-            </Button>
+            </CustomActionButtonComponent>
           </Grid>
         </Grid>
       </Grid>
diff --git a/frontend/component/MonthlyBudgetComponent.tsx b/frontend/component/MonthlyBudgetComponent.tsx
index 5a8cb71..9939ea5 100644
--- a/frontend/component/MonthlyBudgetComponent.tsx
+++ b/frontend/component/MonthlyBudgetComponent.tsx
@@ -1,11 +1,13 @@
 'use client';
-import {Button, Container, Grid, Typography} from '@mui/material';
+import {Container, Grid, Typography} from '@mui/material';
 import ArrowDownwardRoundedIcon from '@mui/icons-material/ArrowDownwardRounded';
-import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
 import React, {useState} from 'react';
 import CustomButtonText from '@/common/addTransaction/CustomButtonText';
 import CustomBudgetCard from '@/common/budget/CustomCardBudget';
 import {useRouter} from 'next/navigation';
+import CustomBackButton from '@/common/button/CustomBackButton';
+import {CustomStyles} from '@/core/enums';
+import CustomActionButtonComponent from '@/common/button/CustomActionButtonComponent';
 
 const MonthlyBudgetComponent = () => {
   const Router = useRouter();
@@ -14,47 +16,35 @@ const MonthlyBudgetComponent = () => {
     setSelectedIndex(active);
     return;
   };
-  const handleBack = () => {
-    return Router.back();
-  };
   const handleBudget = () => {
     return Router.push('/add-new-budget', {scroll: false});
   };
 
   return (
-    <Container maxWidth={'xs'}>
+    <Container
+      maxWidth={'xs'}
+      disableGutters={true}
+      sx={{
+        minHeight: '100vh',
+        backgroundColor: '#FEFEFF',
+        pt: CustomStyles.CONTAINER_TOP,
+        pl: CustomStyles.CONTAINER_LEFT,
+        pr: CustomStyles.CONTAINER_RIGHT,
+        pb: '100px',
+        position: 'relative',
+      }}>
       <Grid
         container
-        spacing={2}
+        rowSpacing={2}
         sx={{
           display: 'flex',
           flexDirection: 'column',
-          minHeight: '100vh',
-          backgroundColor: '#FEFEFF',
         }}>
-        <Grid
-          item
-          xs={12}
-          sx={{
-            display: 'flex',
-            alignItems: 'self-start',
-          }}>
-          <Button onClick={handleBack}>
-            <KeyboardBackspaceIcon
-              sx={{
-                color: '#403F40',
-                backgroundColor: '#fff',
-                borderRadius: '8px',
-                p: '2px',
-                fontSize: '200%',
-                mt: '12px',
-                border: '2px solid #EEEDEE',
-              }}
-            />
-          </Button>
+        <Grid item xs={12}>
+          <CustomBackButton />
         </Grid>
         <Grid item xs={12}>
-          <Typography sx={{fontSize: '20px', fontWeight: '700', pl: '13px'}}>
+          <Typography sx={{fontSize: '20px', fontWeight: '700'}}>
             Monthly Budget
           </Typography>
         </Grid>
@@ -66,15 +56,15 @@ const MonthlyBudgetComponent = () => {
             justifyContent: 'inherit',
             alignItems: 'end',
           }}>
-          <Typography sx={{fontSize: '28px', fontWeight: '700', pl: '13px'}}>
+          <Typography sx={{fontSize: '28px', fontWeight: '700'}}>
             $2,500
           </Typography>
           <Typography
-            sx={{fontSize: '13px', fontWeight: '700', pl: '15px', pb: '6px'}}>
+            sx={{fontSize: '13px', fontWeight: '700', pl: '12px', pb: '6px'}}>
             in 10 categories
           </Typography>
         </Grid>
-        <Grid item xs={12} sx={{mr: '16px'}}>
+        <Grid item xs={12}>
           <Grid
             container
             sx={{
@@ -99,11 +89,11 @@ const MonthlyBudgetComponent = () => {
         </Grid>
 
         <Grid item xs={12}>
-          <Grid container rowSpacing={3}>
-            <Grid item xs={12} sx={{mr: '12px'}}>
+          <Grid container rowSpacing={1.5}>
+            <Grid item xs={12}>
               <CustomBudgetCard
                 title={'Burger'}
-                budgetTitle={'$200.00'}
+                budgetTitle={'2500.00'}
                 icons={
                   <ArrowDownwardRoundedIcon
                     sx={{
@@ -112,7 +102,7 @@ const MonthlyBudgetComponent = () => {
                       backgroundColor: '#E8E6E9',
                       borderRadius: '10px',
                       p: '5px',
-                      m: '10px',
+                      m: '10px 5px',
                     }}
                   />
                 }
@@ -120,10 +110,10 @@ const MonthlyBudgetComponent = () => {
                 amount={'$1000'}
               />
             </Grid>
-            <Grid item xs={12} sx={{mr: '12px'}}>
+            <Grid item xs={12}>
               <CustomBudgetCard
                 title={'Burger'}
-                budgetTitle={'$200.00'}
+                budgetTitle={'2500.00'}
                 icons={
                   <ArrowDownwardRoundedIcon
                     sx={{
@@ -132,7 +122,7 @@ const MonthlyBudgetComponent = () => {
                       backgroundColor: '#E8E6E9',
                       borderRadius: '10px',
                       p: '5px',
-                      m: '10px',
+                      m: '10px 5px',
                     }}
                   />
                 }
@@ -140,7 +130,7 @@ const MonthlyBudgetComponent = () => {
                 amount={'$1000'}
               />
             </Grid>
-            <Grid item xs={12} sx={{mr: '12px'}}>
+            <Grid item xs={12}>
               <CustomBudgetCard
                 title={'Burger'}
                 budgetTitle={'2500.00'}
@@ -152,7 +142,7 @@ const MonthlyBudgetComponent = () => {
                       backgroundColor: '#E8E6E9',
                       borderRadius: '10px',
                       p: '5px',
-                      m: '10px',
+                      m: '10px 5px',
                     }}
                   />
                 }
@@ -160,7 +150,7 @@ const MonthlyBudgetComponent = () => {
                 amount={'$1000'}
               />
             </Grid>
-            <Grid item xs={12} sx={{mr: '12px'}}>
+            <Grid item xs={12}>
               <CustomBudgetCard
                 title={'Burger'}
                 budgetTitle={'2500.00'}
@@ -172,7 +162,7 @@ const MonthlyBudgetComponent = () => {
                       backgroundColor: '#E8E6E9',
                       borderRadius: '10px',
                       p: '5px',
-                      m: '10px',
+                      m: '10px 5px',
                     }}
                   />
                 }
@@ -180,10 +170,10 @@ const MonthlyBudgetComponent = () => {
                 amount={'$1000'}
               />
             </Grid>
-            <Grid item xs={12} sx={{mr: '12px'}}>
+            <Grid item xs={12}>
               <CustomBudgetCard
-                title={'Burger'}
-                budgetTitle={'2500.00'}
+                title={'Products'}
+                budgetTitle={'200.00'}
                 icons={
                   <ArrowDownwardRoundedIcon
                     sx={{
@@ -191,8 +181,8 @@ const MonthlyBudgetComponent = () => {
                       fontSize: '230%',
                       backgroundColor: '#E8E6E9',
                       borderRadius: '10px',
-                      p: '5px',
-                      m: '10px',
+                      p: '6px',
+                      m: '10px 5px',
                     }}
                   />
                 }
@@ -200,10 +190,10 @@ const MonthlyBudgetComponent = () => {
                 amount={'$1000'}
               />
             </Grid>
-            <Grid item xs={12} sx={{mr: '12px'}}>
+            <Grid item xs={12}>
               <CustomBudgetCard
-                title={'Burger'}
-                budgetTitle={'2500.00'}
+                title={'Technologies'}
+                budgetTitle={'500.00'}
                 icons={
                   <ArrowDownwardRoundedIcon
                     sx={{
@@ -212,7 +202,7 @@ const MonthlyBudgetComponent = () => {
                       backgroundColor: '#E8E6E9',
                       borderRadius: '10px',
                       p: '5px',
-                      m: '10px',
+                      m: '10px 5px',
                     }}
                   />
                 }
@@ -220,10 +210,10 @@ const MonthlyBudgetComponent = () => {
                 amount={'$1000'}
               />
             </Grid>
-            <Grid item xs={12} sx={{mr: '12px'}}>
+            <Grid item xs={12}>
               <CustomBudgetCard
-                title={'Burger'}
-                budgetTitle={'2500.00'}
+                title={'Technologies'}
+                budgetTitle={'500.00'}
                 icons={
                   <ArrowDownwardRoundedIcon
                     sx={{
@@ -232,7 +222,7 @@ const MonthlyBudgetComponent = () => {
                       backgroundColor: '#E8E6E9',
                       borderRadius: '10px',
                       p: '5px',
-                      m: '10px',
+                      m: '10px 5px',
                     }}
                   />
                 }
@@ -240,10 +230,10 @@ const MonthlyBudgetComponent = () => {
                 amount={'$1000'}
               />
             </Grid>
-            <Grid item xs={12} sx={{mr: '12px'}}>
+            <Grid item xs={12}>
               <CustomBudgetCard
-                title={'Burger'}
-                budgetTitle={'2500.00'}
+                title={'Technologies'}
+                budgetTitle={'500.00'}
                 icons={
                   <ArrowDownwardRoundedIcon
                     sx={{
@@ -252,7 +242,7 @@ const MonthlyBudgetComponent = () => {
                       backgroundColor: '#E8E6E9',
                       borderRadius: '10px',
                       p: '5px',
-                      m: '10px',
+                      m: '10px 5px',
                     }}
                   />
                 }
@@ -262,24 +252,36 @@ const MonthlyBudgetComponent = () => {
             </Grid>
           </Grid>
         </Grid>
-        <Grid item xs={12} sx={{mr: '16px', position: 'fixed', bottom: '10px'}}>
-          <Button
-            onClick={handleBudget}
-            type='submit'
-            fullWidth
-            variant='contained'
-            sx={{
-              mt: 3,
-              mb: 2,
-              borderRadius: '25px',
-              backgroundColor: '#343333',
-              height: '50px',
-              position: 'fixed',
-              bottom: '0px',
-              width: '380px',
-            }}>
+        <Grid
+          item
+          xs={12}
+          sx={{
+            // width: '300px',
+            bottom: '10px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}>
+          {/*<Button*/}
+          {/*  onClick={handleBudget}*/}
+          {/*  type='submit'*/}
+          {/*  fullWidth*/}
+          {/*  variant='contained'*/}
+          {/*  sx={{*/}
+          {/*    mt: 3,*/}
+          {/*    mb: 2,*/}
+          {/*    borderRadius: '25px',*/}
+          {/*    backgroundColor: '#343333',*/}
+          {/*    height: '50px',*/}
+          {/*    position: 'fixed',*/}
+          {/*    bottom: '0px',*/}
+          {/*    width: '444px',*/}
+          {/*  }}>*/}
+          {/*  CREATE NEW BUDGET*/}
+          {/*</Button>*/}
+          <CustomActionButtonComponent onClickBtn={handleBudget}>
             CREATE NEW BUDGET
-          </Button>
+          </CustomActionButtonComponent>
         </Grid>
       </Grid>
     </Container>
diff --git a/frontend/component/MyWalletComponent.tsx b/frontend/component/MyWalletComponent.tsx
index c4ea5b7..dcb435e 100644
--- a/frontend/component/MyWalletComponent.tsx
+++ b/frontend/component/MyWalletComponent.tsx
@@ -1,20 +1,30 @@
 'use client';
-import {Container, Divider, Grid, Typography} from '@mui/material';
+import {Container, Grid, Typography} from '@mui/material';
 import ArrowDownwardRoundedIcon from '@mui/icons-material/ArrowDownwardRounded';
-import SouthWestRoundedIcon from '@mui/icons-material/SouthWestRounded';
-import TurnSlightRightRoundedIcon from '@mui/icons-material/TurnSlightRightRounded';
-import RadarRoundedIcon from '@mui/icons-material/RadarRounded';
 import CustomCardMyWallet from '@/common/CustomMyWalletCart';
 import CustomCardMyWallet2 from '@/common/CustomCardMyWallet2';
 import Footer from '@/common/footer/Footer';
+import {CustomStyles} from '@/core/enums';
+import OtherHousesIcon from '@mui/icons-material/OtherHouses';
+import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
+import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
 
 const MyWalletComponent = () => {
   return (
     <Container
       maxWidth={'xs'}
-      sx={{minHeight: '100vh', backgroundColor: '#FEFEFF', pt: '40px'}}>
-      <Grid container spacing={2}>
-        <Grid item xs={12} sx={{}}>
+      disableGutters={true}
+      sx={{
+        minHeight: '100vh',
+        backgroundColor: '#FEFEFF',
+        pt: CustomStyles.CONTAINER_TOP,
+        pl: CustomStyles.CONTAINER_LEFT,
+        pr: CustomStyles.CONTAINER_RIGHT,
+        pb: '100px',
+        position: 'relative',
+      }}>
+      <Grid container rowSpacing={1}>
+        <Grid item xs={12}>
           <Typography
             sx={{
               fontSize: '16px',
@@ -32,59 +42,56 @@ const MyWalletComponent = () => {
         </Grid>
         <Grid item xs={12}>
           <Grid container rowSpacing={1}>
-            <Grid item xs={12} sx={{mr: '12px'}}>
-              <CustomCardMyWallet2
-                title={'Burger'}
-                subTitle={'Food'}
-                icons={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
-                icons2={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
-                amount={'$1000'}
-              />
-            </Grid>
-            <Grid item xs={12} sx={{mr: '12px'}}>
+            <Grid item xs={12}>
               <CustomCardMyWallet2
-                title={'Burger'}
-                subTitle={'Food'}
-                icons={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
-                icons2={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
-                amount={'$1000'}
-              />
-            </Grid>
-            <Grid item xs={12} sx={{mr: '12px'}}>
-              <CustomCardMyWallet2
-                title={'Burger'}
-                subTitle={'Food'}
-                icons={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
+                title={'Monobank account'}
+                icons={
+                  <AccountBalanceIcon
+                    sx={{
+                      color: '#fff',
+                      fontSize: '200%',
+                      border: '2px solid #EFEDEE',
+                      borderRadius: '10px',
+                    }}
+                  />
+                }
                 icons2={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
                 amount={'$1000'}
               />
             </Grid>
-            <Grid item xs={12} sx={{mr: '12px'}}>
+            <Grid item xs={12}>
               <CustomCardMyWallet2
-                title={'Burger'}
-                subTitle={'Food'}
-                icons={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
+                title={'Revolut wallet'}
+                icons={
+                  <AccountBalanceWalletIcon
+                    sx={{
+                      color: '#fff',
+                      fontSize: '200%',
+                      border: '2px solid #EFEDEE',
+                      borderRadius: '10px',
+                    }}
+                  />
+                }
                 icons2={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
-                amount={'$1000'}
+                amount={'$325.88'}
               />
             </Grid>
 
-            <Grid item xs={12} sx={{mr: '12px'}}>
-              <CustomCardMyWallet2
-                title={'Burger'}
-                subTitle={'Food'}
-                icons={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
-                icons2={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
-                amount={'$1000'}
-              />
-            </Grid>
-            <Grid item xs={12} sx={{mr: '12px'}}>
+            <Grid item xs={12}>
               <CustomCardMyWallet2
-                title={'Burger'}
-                subTitle={'Food'}
-                icons={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
+                title={'PayPal wallet'}
+                icons={
+                  <AccountBalanceWalletIcon
+                    sx={{
+                      color: '#fff',
+                      fontSize: '200%',
+                      border: '2px solid #EFEDEE',
+                      borderRadius: '10px',
+                    }}
+                  />
+                }
                 icons2={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
-                amount={'$1000'}
+                amount={'$110.70'}
               />
             </Grid>
           </Grid>
@@ -98,14 +105,14 @@ const MyWalletComponent = () => {
               <CustomCardMyWallet
                 title={'Add a bank account'}
                 icons={
-                  <RadarRoundedIcon
+                  <AccountBalanceIcon
                     sx={{
-                      color: '#7F7E80',
+                      color: '#fff',
                       backgroundColor: '#ACAAAC',
                       borderRadius: '10px',
-                      border: '2px splid #EFEDEE',
+                      border: '2px solid #EFEDEE',
                       m: '10px',
-                      fontSize: '250%',
+                      fontSize: '200%',
                     }}
                   />
                 }
@@ -115,14 +122,14 @@ const MyWalletComponent = () => {
               <CustomCardMyWallet
                 title={'Create new wallet'}
                 icons={
-                  <SouthWestRoundedIcon
+                  <AccountBalanceWalletIcon
                     sx={{
-                      color: '#7F7E80',
+                      color: '#fff',
                       backgroundColor: '#ACAAAC',
                       borderRadius: '10px',
-                      border: '2px splid #EFEDEE',
+                      border: '2px solid #EFEDEE',
                       m: '10px',
-                      fontSize: '250%',
+                      fontSize: '210%',
                     }}
                   />
                 }
@@ -132,14 +139,14 @@ const MyWalletComponent = () => {
               <CustomCardMyWallet
                 title={'Connect an e-wallet'}
                 icons={
-                  <TurnSlightRightRoundedIcon
+                  <AccountBalanceWalletIcon
                     sx={{
-                      color: '#7F7E80',
+                      color: '#fff',
                       backgroundColor: '#ACAAAC',
                       borderRadius: '10px',
-                      border: '2px splid #EFEDEE',
+                      border: '2px solid #EFEDEE',
                       m: '10px',
-                      fontSize: '250%',
+                      fontSize: '200%',
                     }}
                   />
                 }
@@ -149,14 +156,14 @@ const MyWalletComponent = () => {
               <CustomCardMyWallet
                 title={'Add a crypto wallet'}
                 icons={
-                  <ArrowDownwardRoundedIcon
+                  <OtherHousesIcon
                     sx={{
-                      color: '#7F7E80',
+                      color: '#fff',
                       backgroundColor: '#ACAAAC',
                       borderRadius: '10px',
-                      border: '2px splid #EFEDEE',
+                      border: '2px solid #EFEDEE',
                       m: '10px',
-                      fontSize: '250%',
+                      fontSize: '200%',
                     }}
                   />
                 }
@@ -164,9 +171,6 @@ const MyWalletComponent = () => {
             </Grid>
           </Grid>
         </Grid>
-        <Grid item xs={12}>
-          <Divider />
-        </Grid>
         <Footer currentOption={3} />
       </Grid>
     </Container>
diff --git a/frontend/component/RevolutWallet.tsx b/frontend/component/RevolutWallet.tsx
index 81ec68c..90db569 100644
--- a/frontend/component/RevolutWallet.tsx
+++ b/frontend/component/RevolutWallet.tsx
@@ -1,55 +1,35 @@
 'use client';
-import {
-  Button,
-  Container,
-  Grid,
-  MenuItem,
-  TextField,
-  Typography,
-} from '@mui/material';
+import {Container, Grid, MenuItem, TextField, Typography} from '@mui/material';
 import ArrowDownwardRoundedIcon from '@mui/icons-material/ArrowDownwardRounded';
 import CustomHorizontalCard from '@/common/CustomHorizontalCard';
-import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
 import {timeDuration} from '@/common/ListedData';
 import React, {useState} from 'react';
 import CustomButtonText from '@/common/addTransaction/CustomButtonText';
-import {useRouter} from 'next/navigation';
+import CustomBackButton from '@/common/button/CustomBackButton';
+import {CustomStyles} from '@/core/enums';
 
 const RevolutWalletPage = () => {
-  const Router = useRouter();
   const [selectedIndex, setSelectedIndex] = useState(0);
   const handleWalletClick = (active: number) => {
     setSelectedIndex(active);
     return;
   };
-  const handleBack = () => {
-    return Router.back();
-  };
   return (
     <Container
       maxWidth={'xs'}
-      sx={{minHeight: '100vh', backgroundColor: '#FEFEFF'}}>
+      disableGutters={true}
+      sx={{
+        minHeight: '100vh',
+        backgroundColor: '#FEFEFF',
+        pt: CustomStyles.CONTAINER_TOP,
+        pl: CustomStyles.CONTAINER_LEFT,
+        pr: CustomStyles.CONTAINER_RIGHT,
+        pb: '100px',
+        position: 'relative',
+      }}>
       <Grid container spacing={1}>
-        <Grid
-          item
-          xs={12}
-          sx={{
-            mt: '36px',
-          }}>
-          <Button
-            sx={{p: '0px 0px', display: 'flex', justifyContent: 'initial'}}
-            onClick={handleBack}>
-            <KeyboardBackspaceIcon
-              sx={{
-                color: '#403F40',
-                backgroundColor: '#fff',
-                borderRadius: '8px',
-                fontSize: '240%',
-                border: '2px solid #EEEDEE',
-                p: '3px',
-              }}
-            />
-          </Button>
+        <Grid item xs={12}>
+          <CustomBackButton />
         </Grid>
 
         <Grid item xs={6} sx={{mt: '12px'}}>
@@ -120,7 +100,7 @@ const RevolutWalletPage = () => {
             </Grid>
           </Grid>
         </Grid>
-        <Grid item xs={12} sx={{mt: '26px'}}>
+        <Grid item xs={12}>
           <Typography sx={{fontSize: '14px', fontWeight: '700', opacity: '.4'}}>
             Today
           </Typography>
diff --git a/frontend/component/Settings.tsx b/frontend/component/Settings.tsx
index 8298d1b..25c6182 100644
--- a/frontend/component/Settings.tsx
+++ b/frontend/component/Settings.tsx
@@ -3,12 +3,22 @@ import {Button, Container, Grid, Typography} from '@mui/material';
 import Footer from '@/common/footer/Footer';
 import React from 'react';
 import CustomCardForSetting from '@/common/CustomCardForSettings';
+import {CustomStyles} from '@/core/enums';
 
 const Settings = () => {
   return (
     <Container
       maxWidth={'xs'}
-      sx={{minHeight: '100vh', backgroundColor: '#FAF8FE', pt: '36px'}}>
+      disableGutters={true}
+      sx={{
+        minHeight: '100vh',
+        backgroundColor: '#FAF8FE',
+        pt: CustomStyles.CONTAINER_TOP,
+        pl: CustomStyles.CONTAINER_LEFT,
+        pr: CustomStyles.CONTAINER_RIGHT,
+        pb: '100px',
+        position: 'relative',
+      }}>
       <Grid container spacing={2}>
         <Grid
           item
@@ -61,8 +71,8 @@ const Settings = () => {
             Log Out
           </Button>
         </Grid>
-        <Footer currentOption={4} />
       </Grid>
+      <Footer currentOption={4} />
     </Container>
   );
 };
diff --git a/frontend/component/SignUp.tsx b/frontend/component/SignUp.tsx
index ed87f33..a1300bc 100644
--- a/frontend/component/SignUp.tsx
+++ b/frontend/component/SignUp.tsx
@@ -1,92 +1,24 @@
 import React, {useState} from 'react';
-import {createTheme} from '@mui/material/styles';
 import {
   Box,
-  Button,
   Grid,
   IconButton,
   InputAdornment,
   TextField,
   Typography,
 } from '@mui/material';
-import {useForm} from 'react-hook-form';
-import {yupResolver} from '@hookform/resolvers/yup';
-import * as yup from 'yup';
 // @ts-ignore
 import FacebookLogin from 'react-facebook-login';
 import {Visibility, VisibilityOff} from '@mui/icons-material';
 import AppleIcon from '@mui/icons-material/Apple';
 import FacebookRoundedIcon from '@mui/icons-material/FacebookRounded';
 import GoogleIcon from '@mui/icons-material/Google';
-const PREFIX = 'facebook-style';
+import CustomActionButtonComponent from '@/common/button/CustomActionButtonComponent';
 
-const classes = {
-  facebookBackground: `${PREFIX}-background`,
-  bannerImage: `${PREFIX}-image`,
-};
-
-// const StyledCard = styled(Grid)(({theme}) => ({
-//     borderRadius: '10px',
-//     boxShadow: '0px 4px 24px 0px #0000001A',
-//     '&:hover': {
-//         boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
-//         [`& .${classes.bannerImage}`]: {
-//             transition: 'box-shadow 0.3s',
-//             filter: 'brightness(60%)',
-//         },
-//     },
-//     [`& .${classes.facebookBackground}`]: {
-//         position: 'relative',
-//         width: '100%',
-//         height: '151px',
-//         backgroundColor: 'red'
-//     },
-//
-// }));
-
-const defaultTheme = createTheme();
 const Signup = () => {
-  console.log('hit at validation');
-  const userSchema = yup.object().shape({
-    name: yup
-      .string()
-      .required('Please enter your first name')
-      .required('Firstname is required field'),
-    email: yup
-      .string()
-      .email('Please enter a valid email')
-      .required('Email is required field'),
-    password: yup
-      .string()
-      .required('Password is a required field')
-      .min(6, 'Password must be at least 6 charcaters'),
-  });
-
-  const {
-    handleSubmit,
-    control,
-    formState: {errors},
-    reset,
-  } = useForm({resolver: yupResolver(userSchema)});
-  const onSubmitHandler = (event: any) => {
-    console.log('hit before');
-    event.preventDefault();
-    console.log('hit');
-    const data = new FormData(event.currentTarget);
-    console.log({
-      email: data.get('email'),
-      password: data.get('password'),
-      firstname: data.get('firstname'),
-      lastname: data.get('lastname'),
-    });
-  };
   const [showPassword, setShowPassword] = useState(false);
   const handleClickShowPassword = () => setShowPassword(!showPassword);
   const handleMouseDownPassword = () => setShowPassword(!showPassword);
-  console.log('error', errors);
-  const responseFacebook = (response: any) => {
-    console.log(response);
-  };
 
   const responseGoogle = (response: any) => {
     console.log(response);
@@ -261,209 +193,13 @@ const Signup = () => {
             </Grid>
           </Grid>
           <Grid item xs={12}>
-            <Button
-              type='submit'
-              fullWidth
-              variant='contained'
-              sx={{
-                mt: 3,
-                mb: 2,
-                borderRadius: '25px',
-                backgroundColor: '#343333',
-                height: '50px',
-              }}>
+            <CustomActionButtonComponent>
               Create Account
-            </Button>
+            </CustomActionButtonComponent>
           </Grid>
         </Grid>
       </Grid>
     </>
   );
-
-  // return (
-  //     <ThemeProvider theme={defaultTheme}>
-  //             <Box
-  //                 sx={{
-  //                     marginTop: 8,
-  //                     display: 'flex',
-  //                     flexDirection: 'column',
-  //                     alignItems: 'center',
-  //                     backgroundColor: '#FEFEFF',
-  //                     padding:'-15px',
-  //                     pt: '30px',
-  //                     mt:'0px'
-  //
-  //                 }}
-  //             >
-  //
-  //                 <form onSubmit={handleSubmit(onSubmitHandler)}>
-  //                     <Grid container rowSpacing={5} columnSpacing={2} sx={{float:'bottom'}}>
-  //                         <Grid item xs={12}>
-  //                             <Controller
-  //                                 name="name"
-  //                                 control={control}
-  //                                 defaultValue=""
-  //                                 render={({ field }) => (
-  //                                     <TextField
-  //                                         helperText={errors?.name?.message || ''}
-  //                                         fullWidth
-  //                                         {...field}
-  //                                         required
-  //                                         id="name"
-  //                                         label=" Name"
-  //                                         name="name" // Provide a name attribute
-  //                                         autoComplete="name"
-  //                                         variant="outlined"
-  //                                         InputProps={{
-  //                                             style: {
-  //                                                 borderRadius: "30px",
-  //                                                 backgroundColor: "#F8F7F8"
-  //                                             }
-  //                                         }}
-  //                                     />
-  //                                 )}
-  //                             />
-  //                         </Grid>
-  //
-  //                         <Grid item xs={12}>
-  //                             <Controller
-  //                                 name="email"
-  //                                 control={control}
-  //                                 defaultValue=""
-  //                                 render={({ field }) => (
-  //                                     <TextField
-  //                                         helperText={errors?.email?.message || ''}
-  //                                         fullWidth
-  //                                         {...field}
-  //                                         required
-  //                                         id="email"
-  //                                         label="Email"
-  //                                         name="email" // Provide a name attribute
-  //                                         autoComplete="email"
-  //                                         variant="outlined"
-  //                                         InputProps={{
-  //                                             style: {
-  //                                                 borderRadius: "30px",
-  //                                                 backgroundColor: "#F8F7F8"
-  //                                             }
-  //                                         }}
-  //                                     />
-  //                                 )}
-  //                             />
-  //                         </Grid>
-  //
-  //                         <Grid item xs={12}>
-  //                             <Controller
-  //                                 name="password"
-  //                                 control={control}
-  //                                 defaultValue=""
-  //                                 render={({ field }) => (
-  //                                     <TextField
-  //                                         helperText={errors?.password?.message || ''}
-  //                                         fullWidth
-  //                                         {...field}
-  //                                         required
-  //                                         id="password"
-  //                                         label="Password"
-  //                                         name="password" // Provide a name attribute
-  //                                         autoComplete="password"
-  //                                         variant="outlined"
-  //                                         type={showPassword ? "text" : "password"}
-  //                                         InputProps={{
-  //                                             style: {
-  //                                                 borderRadius: "30px",
-  //                                                 backgroundColor: "#F8F7F8"
-  //                                             },
-  //                                             endAdornment: (
-  //                                                 <InputAdornment position="end">
-  //                                                     <IconButton
-  //                                                         aria-label="toggle password visibility"
-  //                                                         onClick={handleClickShowPassword}
-  //                                                         onMouseDown={handleMouseDownPassword}
-  //                                                     >
-  //                                                         {showPassword ? <Visibility /> : <VisibilityOff />}
-  //                                                     </IconButton>
-  //                                                 </InputAdornment>
-  //                                             )
-  //                                         }}
-  //                                     />
-  //                                 )}
-  //                             />
-  //                         </Grid>
-  //
-  //
-  //
-  //
-  //                         <Grid item xs={12}>
-  //                             <Box sx={{textAlign: 'center', mb:'10px'}}>OR SIGNUP WITH:</Box>
-  //                             <Grid container spacing={2}>
-  //                                 <Grid item xs={4}  sx={{alignItems:'center', justifyContent: 'center',display: 'flex'}} >
-  //                                     <AppleLogin
-  //                                         clientId="com.react.apple.login"
-  //                                         redirectURI="https://redirectUrl.com"
-  //                                         render={(renderProps) => (
-  //                                             <IconButton size="large" color="primary"  onClick={renderProps.onClick}>
-  //                                         <AppleIcon />
-  //                                     </IconButton>
-  //
-  //                                         )}
-  //                                     />
-  //
-  //                                 </Grid>
-  //                                 <Grid item xs={4}  sx={{alignItems:'center', justifyContent: 'center',display: 'flex'}}>
-  //                                     <FacebookLogin
-  //                                         appId="1088597931155576"
-  //                                         autoLoad={false}
-  //                                         fields="name,email,picture"
-  //                                         callback={responseFacebook}
-  //                                         cssClass='none'
-  //                                         icon={ <IconButton  size="large" color="primary"  >
-  //                                             <FacebookOutlinedIcon />
-  //                                         </IconButton>}
-  //                                         textButton={''}
-  //                                     />
-  //
-  //                                     <IconButton  size="large" color="primary"  >
-  //                                         <FacebookOutlinedIcon />
-  //                                     </IconButton>
-  //
-  //                                 </Grid>
-  //                                 <Grid item xs={4}  sx={{alignItems:'center', justifyContent: 'center',display: 'flex'}}>
-  //                                     <GoogleLogin
-  //                                         clientId="658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com"
-  //                                         buttonText=""
-  //                                         onSuccess={responseGoogle}
-  //                                         onFailure={responseGoogle}
-  //                                         render={(renderProps) => (
-  //
-  //                                             <IconButton  size="large" color="primary"  onClick={renderProps.onClick}>
-  //                                             <GoogleIcon />
-  //                                             </IconButton>
-  //
-  //                                         )}
-  //                                     />
-  //                                 </Grid>
-  //
-  //                             </Grid>
-  //
-  //
-  //
-  //
-  //                         </Grid>
-  //                     </Grid>
-  //                     <Button
-  //                         type="submit"
-  //                         fullWidth
-  //                         variant="contained"
-  //                         sx={{mt: 3, mb: 2, borderRadius:'15px', backgroundColor:'black', height: '50px'}}
-  //                     >
-  //                         Create Account
-  //                     </Button>
-  //                 </form>
-  //
-  //             </Box>
-  //     </ThemeProvider>
-  //
-  // )
 };
 export default Signup;
diff --git a/frontend/component/SignupAndSignin.tsx b/frontend/component/SignupAndSignin.tsx
index 321c409..b8d71f7 100644
--- a/frontend/component/SignupAndSignin.tsx
+++ b/frontend/component/SignupAndSignin.tsx
@@ -1,39 +1,10 @@
 import React, {useState} from 'react';
 import {Box, Container, Grid} from '@mui/material';
-import {useForm} from 'react-hook-form';
-import {yupResolver} from '@hookform/resolvers/yup';
-import * as yup from 'yup';
-import {createTheme} from '@mui/material/styles';
 import Signup from '@/component/SignUp';
 import Login from '@/component/LogIn';
+import {CustomStyles} from '@/core/enums';
 
-const defaultTheme = createTheme();
 const SignupAndSignin = () => {
-  const userSchema = yup.object().shape({
-    email: yup
-      .string()
-      .email('Please enter a valid email')
-      .required('Email is required field'),
-    password: yup
-      .string()
-      .required('Password is a required field')
-      .min(6, 'Password must be at least 6 charcaters'),
-  });
-
-  const onSubmitHandler = (event: any) => {
-    event.preventDefault();
-    const data = new FormData(event.currentTarget);
-    console.log({
-      email: data.get('email'),
-      password: data.get('password'),
-    });
-  };
-  const {
-    handleSubmit,
-    formState: {errors},
-    reset,
-  } = useForm({resolver: yupResolver(userSchema)});
-  // const router = useRouter();
   const [selectedIndex, setSelectedIndex] = useState<number>(0);
 
   const handleListItemClick = (active: number) => {
@@ -42,58 +13,36 @@ const SignupAndSignin = () => {
   };
 
   return (
-    <Container maxWidth='xs'>
-      <Box
-        sx={{
-          marginTop: 8,
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          height: '100vh',
-          backgroundColor: '#FEFEFF',
-          padding: '15px',
-          pt: '50px',
-          mt: '0px',
-        }}>
-        {/*<List component="nav" aria-label="main mailbox folders"
-                      sx={{display: 'flex', flexDirection: 'row', width: '100%'}}>
-                    <ListItemButton
-                        sx={{borderRadius: '20px', backgroundColor: '#FEFEFF', m: '3px', width: '40px'}}
-                        selected={selectedIndex === 0}
-                        onClick={(event) => handleListItemClick(event, 0)}
-                    >
-                        <ListItemText primary="SIGN UP" sx={{textAlign: 'center'}}/>
-                    </ListItemButton>
-                    <ListItemButton
-                        sx={{borderRadius: '20px', backgroundColor: '#FEFEFF', width: '40px'}}
-                        selected={selectedIndex === 1}
-                        onClick={(event) => handleListItemClick(event, 1)}
-                    >
-                        <ListItemText primary="LOG IN" sx={{textAlign: 'center'}}/>
-                    </ListItemButton>
-                </List>*/}
-
-        <Grid container rowSpacing={6} columnSpacing={2}>
-          <Grid item xs={6}>
-            <CustomButton
-              backGround={selectedIndex === 0 ? '#E7E6E6' : '#fff'}
-              onClickBtn={() => handleListItemClick(0)}>
-              SIGN UP
-            </CustomButton>
-          </Grid>
-          <Grid item xs={6}>
-            <CustomButton
-              backGround={selectedIndex === 1 ? '#E7E6E6' : '#fff'}
-              onClickBtn={() => handleListItemClick(1)}>
-              LOG IN
-            </CustomButton>
-          </Grid>
-          {selectedIndex === 0 && <Signup />}
-          {selectedIndex === 1 && <Login />}
+    <Container
+      maxWidth='xs'
+      disableGutters={true}
+      sx={{
+        minHeight: '100vh',
+        backgroundColor: '#FEFEFF',
+        pt: CustomStyles.CONTAINER_TOP,
+        pl: CustomStyles.CONTAINER_LEFT,
+        pr: CustomStyles.CONTAINER_RIGHT,
+        pb: '100px',
+        position: 'relative',
+      }}>
+      <Grid container rowSpacing={6} columnSpacing={2}>
+        <Grid item xs={6}>
+          <CustomButton
+            backGround={selectedIndex === 0 ? '#E7E6E6' : '#fff'}
+            onClickBtn={() => handleListItemClick(0)}>
+            SIGN UP
+          </CustomButton>
         </Grid>
-
-        {/*{selectedIndex === 1 && <Login/>}*/}
-      </Box>
+        <Grid item xs={6}>
+          <CustomButton
+            backGround={selectedIndex === 1 ? '#E7E6E6' : '#fff'}
+            onClickBtn={() => handleListItemClick(1)}>
+            LOG IN
+          </CustomButton>
+        </Grid>
+        {selectedIndex === 0 && <Signup />}
+        {selectedIndex === 1 && <Login />}
+      </Grid>
     </Container>
   );
 };
diff --git a/frontend/component/StartScreen.tsx b/frontend/component/StartScreen.tsx
index a04f230..1cc4dbb 100644
--- a/frontend/component/StartScreen.tsx
+++ b/frontend/component/StartScreen.tsx
@@ -1,68 +1,80 @@
-
-"use client"
-import {Card, CardActions, CardContent, CardMedia, Button, Typography, Grid} from "@mui/material";
-import {Container} from "@mui/material";
-import {useRouter} from "next/navigation";
-
+'use client';
+import {
+  Card,
+  CardContent,
+  CardMedia,
+  Container,
+  Grid,
+  Typography,
+} from '@mui/material';
+import {useRouter} from 'next/navigation';
+import CustomActionButtonComponent from '@/common/button/CustomActionButtonComponent';
 
 const StartScreen = () => {
-    const Router = useRouter()
-    const handleRouting =(event: any)=>{
-        Router.push('/registration-login', { scroll: false })
-        console.log("ecc",event)
-    }
-    return (
-        <Container maxWidth={'xl'} disableGutters={true}>
-            <Grid
-                container
-                spacing={0}
-                direction="column"
-                alignItems="center"
-                justifyContent="center"
-            >
-                <Grid item xs={12} md={5}>
-                    <Card elevation={0} sx={{
-                        background: '#fff',
-                        height: '100vh',
-                        display: 'flex', alignItems: 'center', flexDirection: 'column',
-                        textAlign: 'center',
-                        position: 'relative',
-                        width:'360px'
-                    }}>
-                        <CardMedia
-                            component="img"
-                            alt="green iguana"
-                            width="100%"
-                            image="/images/start-screen-1.png"
-                        />
-                        <CardContent
-                            sx={{
-                                background: '#FEFEFF',
-                                borderRadius: '10px',
-                                position: 'absolute',
-                                bottom: 0,
-                                height: '380px'
-                            }}>
-                            <CardContent>
-                                <Typography gutterBottom variant="h5" component="div">
-                                    See all of your money in one phone
-                                </Typography>
-                                <Typography variant="body2" color="text.secondary">
-                                    Add expense and income and see your statistics
-                                </Typography>
-                            </CardContent>
-
-                            <CardActions sx={{background: '#eeefff'}}>
-                                <Button fullWidth={true} variant={"contained"} size={'large'}
-                                        onClick={handleRouting
-                                }
-                                        color={"secondary"} sx={{borderRadius: '20px'}}>Start</Button>
-                            </CardActions>
-                        </CardContent>
-                    </Card>
-                </Grid>
-            </Grid>
-        </Container>
-    )
-}
-export default StartScreen;
\ No newline at end of file
+  const Router = useRouter();
+  const handleRouting = (event: any) => {
+    Router.push('/registration-login', {scroll: false});
+    console.log('ecc', event);
+  };
+  return (
+    <Container
+      maxWidth={'xl'}
+      sx={{mr: '-10px', ml: '-10px', position: 'relative'}}>
+      <Grid
+        container
+        rowSpacing={2}
+        direction='column'
+        alignItems='center'
+        justifyContent='center'>
+        <Grid item xs={12} md={5}>
+          <Card
+            elevation={0}
+            sx={{
+              background: '#fff',
+              height: '100vh',
+              display: 'flex',
+              alignItems: 'center',
+              flexDirection: 'column',
+              textAlign: 'center',
+              position: 'relative',
+              width: '444px',
+            }}>
+            <CardMedia
+              component='img'
+              alt='green iguana'
+              width='100%'
+              image='/images/start-screen-1.png'
+            />
+            <CardContent
+              sx={{
+                background: '#FAF8FE',
+                borderRadius: '20px',
+                position: 'fiexd',
+                bottom: '0px',
+                height: '500px',
+              }}>
+              <CardContent>
+                <Typography
+                  sx={{fontWeight: '700', p: '0px 40px'}}
+                  gutterBottom
+                  variant='h5'
+                  component='div'>
+                  See all of your money in one phone
+                </Typography>
+                <Typography
+                  sx={{fontWeight: '500', p: '0px 40px'}}
+                  component='div'>
+                  Add expense and income and see your statistics
+                </Typography>
+              </CardContent>
+            </CardContent>
+          </Card>
+        </Grid>
+        <CustomActionButtonComponent onClickBtn={handleRouting}>
+          START
+        </CustomActionButtonComponent>
+      </Grid>
+    </Container>
+  );
+};
+export default StartScreen;
diff --git a/frontend/component/Statistics.tsx b/frontend/component/Statistics.tsx
index 9e60685..9bd264e 100644
--- a/frontend/component/Statistics.tsx
+++ b/frontend/component/Statistics.tsx
@@ -16,18 +16,27 @@ import CustomBottomIcons from '@/common/CustomBottomIcons';
 import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
 import {timeDuration, wallets} from '@/common/ListedData';
 import {BarChart} from '@/component/BarChart';
+import {CustomStyles} from '@/core/enums';
 
 const Statistics = () => {
   return (
     <Container
       maxWidth={'xs'}
-      sx={{minHeight: '100vh', backgroundColor: '#FEFEFF'}}>
-      <Grid container spacing={2}>
+      disableGutters={true}
+      sx={{
+        minHeight: '100vh',
+        backgroundColor: '#FEFEFF',
+        pt: CustomStyles.CONTAINER_TOP,
+        pl: CustomStyles.CONTAINER_LEFT,
+        pr: CustomStyles.CONTAINER_RIGHT,
+        pb: '100px',
+        position: 'relative',
+      }}>
+      <Grid container rowSpacing={1}>
         <Grid
           item
           xs={12}
           sx={{
-            mt: '36px',
             display: 'flex',
             justifyContent: 'space-between',
             alignItems: 'center',
@@ -58,45 +67,49 @@ const Statistics = () => {
             />
           </Box>
         </Grid>
-        <Grid item xs={6}>
-          <TextField
-            sx={{width: '100%'}}
-            id='currency'
-            select
-            defaultValue='wallets'
-            InputProps={{
-              sx: {
-                borderRadius: '15px',
-                border: '2px solid #F4F2F3',
-                height: '42px',
-              },
-            }}>
-            {wallets.map((option) => (
-              <MenuItem key={option.title} value={option.title}>
-                {option.label}
-              </MenuItem>
-            ))}
-          </TextField>
-        </Grid>
-        <Grid item xs={6}>
-          <TextField
-            sx={{width: '100%'}}
-            id='currency'
-            select
-            defaultValue='2'
-            InputProps={{
-              sx: {
-                borderRadius: '15px',
-                border: '2px solid #F4F2F3',
-                height: '42px',
-              },
-            }}>
-            {timeDuration.map((option) => (
-              <MenuItem key={option.title} value={option.title}>
-                {option.label}
-              </MenuItem>
-            ))}
-          </TextField>
+        <Grid item xs={12}>
+          <Grid container columnSpacing={2}>
+            <Grid item xs={6}>
+              <TextField
+                sx={{width: '100%'}}
+                id='currency'
+                select
+                defaultValue='wallets'
+                InputProps={{
+                  sx: {
+                    borderRadius: '15px',
+                    border: '2px solid #F4F2F3',
+                    height: '42px',
+                  },
+                }}>
+                {wallets.map((option) => (
+                  <MenuItem key={option.title} value={option.title}>
+                    {option.label}
+                  </MenuItem>
+                ))}
+              </TextField>
+            </Grid>
+            <Grid item xs={6}>
+              <TextField
+                sx={{width: '100%'}}
+                id='currency'
+                select
+                defaultValue='2'
+                InputProps={{
+                  sx: {
+                    borderRadius: '15px',
+                    border: '2px solid #F4F2F3',
+                    height: '42px',
+                  },
+                }}>
+                {timeDuration.map((option) => (
+                  <MenuItem key={option.title} value={option.title}>
+                    {option.label}
+                  </MenuItem>
+                ))}
+              </TextField>
+            </Grid>
+          </Grid>
         </Grid>
         <Grid item xs={12}>
           <BarChart />
@@ -110,9 +123,15 @@ const Statistics = () => {
               mt: 3,
               mb: 2,
               borderRadius: '25px',
-              backgroundColor: '#E9E7E8',
+              backgroundColor: 'common.black',
               height: '50px',
-              color: 'black',
+              bottom: '30px',
+              minWidth: '415px',
+              fontWeight: '700',
+              ':hover': {
+                backgroundColor: 'common.black',
+                color: 'common.white',
+              },
             }}>
             DETAILED ANALYTICS
           </Button>
@@ -149,6 +168,69 @@ const Statistics = () => {
             percentage={'33%'}
           />
         </Grid>{' '}
+        <Grid item xs={12}>
+          <CustomCardForStatistics
+            title={'Uber'}
+            icons={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
+            icons2={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
+            amount={'-$500990'}
+            percentage={'33%'}
+          />
+        </Grid>{' '}
+        <Grid item xs={12}>
+          <CustomCardForStatistics
+            title={'Uber'}
+            icons={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
+            icons2={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
+            amount={'-$500990'}
+            percentage={'33%'}
+          />
+        </Grid>{' '}
+        <Grid item xs={12}>
+          <CustomCardForStatistics
+            title={'Uber'}
+            icons={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
+            icons2={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
+            amount={'-$500990'}
+            percentage={'33%'}
+          />
+        </Grid>{' '}
+        <Grid item xs={12}>
+          <CustomCardForStatistics
+            title={'Uber'}
+            icons={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
+            icons2={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
+            amount={'-$500990'}
+            percentage={'33%'}
+          />
+        </Grid>{' '}
+        <Grid item xs={12}>
+          <CustomCardForStatistics
+            title={'Uber'}
+            icons={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
+            icons2={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
+            amount={'-$500990'}
+            percentage={'33%'}
+          />
+        </Grid>{' '}
+        <Grid item xs={12}>
+          <CustomCardForStatistics
+            title={'Uber'}
+            icons={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
+            icons2={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
+            amount={'-$500990'}
+            percentage={'33%'}
+          />
+        </Grid>{' '}
+        <Grid item xs={12}>
+          <CustomCardForStatistics
+            title={'Uber'}
+            icons={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
+            icons2={<ArrowDownwardRoundedIcon sx={{color: '#7F7E80'}} />}
+            amount={'-$500990'}
+            percentage={'33%'}
+          />
+        </Grid>{' '}
         <Grid item xs={12}>
           <CustomCardForStatistics
             title={'Uber'}
diff --git a/frontend/core/enums.ts b/frontend/core/enums.ts
index ed507bf..6d5e95f 100644
--- a/frontend/core/enums.ts
+++ b/frontend/core/enums.ts
@@ -5,3 +5,11 @@ export enum Fonts {
   SEMI_BOLD = 600,
   BOLD = 700,
 }
+export enum CustomStyles {
+  CONTAINER_TOP = '50px',
+  CONTAINER_LEFT = '13px',
+  CONTAINER_RIGHT = '13px',
+}
+export enum CardBorder {
+  TWO_PX = '2px solid #EFEEEF',
+}
diff --git a/frontend/core/layouts/DefaultTheme/typography.tsx b/frontend/core/layouts/DefaultTheme/typography.tsx
index 485805d..989dc63 100644
--- a/frontend/core/layouts/DefaultTheme/typography.tsx
+++ b/frontend/core/layouts/DefaultTheme/typography.tsx
@@ -38,7 +38,7 @@ export default function typography(CustomFontFamily: string) {
     h6: {
       fontFamily: CustomFontFamily,
       fontWeight: Fonts.MEDIUM,
-      fontSize: '1.25rem',
+      fontSize: '.25rem',
     },
     subtitle1: {
       fontFamily: CustomFontFamily,