diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 32d3eef..5d78242 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -19,7 +19,8 @@ import SimpleSnackbar from "./common/SnackBar";
 import { SNACKBAR_SEVERITY } from "../constants/common/all.constants";
 import MenuIcon from "@mui/icons-material/Menu";
 import CloseIcon from "@mui/icons-material/Close";
-
+import HowToRegIcon from '@mui/icons-material/HowToReg';
+import LogoutIcon from '@mui/icons-material/Logout';
 const Header = () => {
   // Media query for detecting small screens (mobile devices)
   const isMobile = useMediaQuery("(max-width:600px)");
@@ -140,13 +141,13 @@ const Header = () => {
                     LinkComponent={Link}
                     to="/profile"
                   >
-                    Profile
+                    <HowToRegIcon color="white" fontSize="medium"/>
                   </Button>
                   <Button
                     sx={{ margin: 1, color: "white" }}
                     onClick={handleLogout}
                   >
-                    Logout
+                    <LogoutIcon color="white" fontSize="medium"/>
                   </Button>
                 </>
               )}
diff --git a/src/components/UserBlog.jsx b/src/components/UserBlog.jsx
index c110460..83a86ff 100644
--- a/src/components/UserBlog.jsx
+++ b/src/components/UserBlog.jsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Card, useMediaQuery } from "@mui/material";
+import { Card, Divider, useMediaQuery } from "@mui/material";
 
 import CardHeader from "@mui/material/CardHeader";
 import CardMedia from "@mui/material/CardMedia";
@@ -8,7 +8,7 @@ import CardActions from "@mui/material/CardActions";
 import Avatar from "@mui/material/Avatar";
 import IconButton, { IconButtonProps } from "@mui/material/IconButton";
 import Typography from "@mui/material/Typography";
-import { red } from "@mui/material/colors";
+import { green, red } from "@mui/material/colors";
 import DeleteIcon from "@mui/icons-material/Delete";
 import EditIcon from "@mui/icons-material/Edit";
 import axios from "axios";
@@ -20,7 +20,7 @@ import { Button, TextField } from "@mui/material";
 import AlertContainer from "./common/AlertContainer";
 import Tooltip from "@mui/material/Tooltip";
 import ConfirmationModel from "./common/ConfirmationModel";
-
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 export default function UserBlog({
   title,
   content,
@@ -147,23 +147,27 @@ export default function UserBlog({
           },
         }}
       >
+          <Typography variant="h3" color="primary.main">
+            {title}
+          </Typography>
         <CardHeader
           avatar={
-            <Avatar sx={{ bgcolor: red[500] }} aria-label="recipe">
-              Date
-            </Avatar>
+            <CalendarMonthIcon  sx={{ bgcolor: green[500] }} aria-label="recipe" />
           }
-          subheader={createdAt}
+          title={`Create at 👉  ${createdAt} `}
+          sx={{padding:0}}
         />
         <CardHeader
           avatar={
-            <Avatar sx={{ bgcolor: red[500] }} aria-label="recipe">
-              Date
-            </Avatar>
+            <CalendarMonthIcon sx={{ bgcolor: green[500] }} aria-label="recipe">
+            </CalendarMonthIcon>
           }
-          subheader={updatedAt}
+          title={`Create at 👉  ${updatedAt} `}
+          sx={{padding:0}}
         />
 
+        <Divider sx={{marginBottom:"10px" , marginTop:"10px"}}/>
+
         <CardMedia
           component="img"
           height="194"
@@ -171,9 +175,7 @@ export default function UserBlog({
           alt="Paella dish"
         />
         <CardContent>
-          <Typography variant="h4" color="text.primary">
-            {title}
-          </Typography>
+        
           <Typography
             paragraph
             color="text.secondary"