diff --git a/logic/frontend/web/src/app/logout/page.tsx b/logic/frontend/web/src/app/logout/page.tsx
new file mode 100644
index 0000000..9766b1e
--- /dev/null
+++ b/logic/frontend/web/src/app/logout/page.tsx
@@ -0,0 +1,16 @@
+"use client"
+
+import {useUser} from "@/provider/UserProvider";
+import {useEffect} from "react";
+
+export default function Page() {
+    const {logout} = useUser();
+
+    useEffect(() => {
+        logout();
+    }, []);
+
+    return (
+        <></>
+    );
+}
\ No newline at end of file
diff --git a/logic/frontend/web/src/app/profile/[slug]/page.tsx b/logic/frontend/web/src/app/profile/[slug]/page.tsx
index 5235080..1a72e6b 100644
--- a/logic/frontend/web/src/app/profile/[slug]/page.tsx
+++ b/logic/frontend/web/src/app/profile/[slug]/page.tsx
@@ -75,6 +75,7 @@ export default function Page({ params }: { params: { slug: string } }) {
                 display: "flex",
                 flexDirection: "column",
                 alignItems: "center",
+                overflowY: "scroll",
             }}
         >
             <Grid container spacing={2} justifyContent="center" alignItems="center" sx={{mb: 4, width: '100%'}}>
@@ -123,13 +124,13 @@ export default function Page({ params }: { params: { slug: string } }) {
                     ) : (
                         posts.map((post, index) => (
                             <Grid item xs={12} key={index}>
-                                <Card sx={{bgcolor: "#2E2F55"}}>
+                                <Card sx={{bgcolor: "#2E2F55", color: "#fff"}}>
                                     <CardContent>
                                         <Typography variant="h6">{post.title}</Typography>
                                         <Typography variant="body2">{post.definition}</Typography>
                                         <Box display="flex" justifyContent="space-between" alignItems="center" mt={2}>
                                             <Typography variant="caption" sx={{color: "#C0C0C0"}}>
-                                                {new Date(post.createdOn).toLocaleDateString()}
+                                                {post.createdOn}
                                             </Typography>
                                             <Button
                                                 variant="outlined"
diff --git a/logic/frontend/web/src/app/profile/page.tsx b/logic/frontend/web/src/app/profile/page.tsx
index ceae96e..d8e7c19 100644
--- a/logic/frontend/web/src/app/profile/page.tsx
+++ b/logic/frontend/web/src/app/profile/page.tsx
@@ -27,6 +27,8 @@ export default function Page() {
                     axios.get(`https://www.boast.social/api/posts/${postId}`)
                 ));
 
+                console.log(postResponses)
+
                 setPosts(postResponses.map(res => res.data));
             } catch (error) {
                 console.error("Error fetching profile or posts:", error);
@@ -64,10 +66,10 @@ export default function Page() {
             bgcolor="#1A1C40"
             color="white"
             sx={{
-                minHeight: "100vh",
                 display: "flex",
                 flexDirection: "column",
                 alignItems: "center",
+                overflowY: "scroll",
             }}
         >
             <Grid container spacing={2} justifyContent="center" alignItems="center" sx={{mb: 4, width: '100%'}}>
@@ -116,13 +118,13 @@ export default function Page() {
                     ) : (
                         posts.map((post, index) => (
                             <Grid item xs={12} key={index}>
-                                <Card sx={{bgcolor: "#2E2F55"}}>
+                                <Card sx={{bgcolor: "#2E2F55", color: "#fff"}}>
                                     <CardContent>
                                         <Typography variant="h6">{post.title}</Typography>
                                         <Typography variant="body2">{post.definition}</Typography>
                                         <Box display="flex" justifyContent="space-between" alignItems="center" mt={2}>
                                             <Typography variant="caption" sx={{color: "#C0C0C0"}}>
-                                                {new Date(post.createdOn).toLocaleString()}
+                                                {post.createdOn}
                                             </Typography>
                                             <Button
                                                 variant="outlined"
diff --git a/logic/frontend/web/src/component/SideBarComponent.tsx b/logic/frontend/web/src/component/SideBarComponent.tsx
index ea9515e..2039885 100644
--- a/logic/frontend/web/src/component/SideBarComponent.tsx
+++ b/logic/frontend/web/src/component/SideBarComponent.tsx
@@ -79,7 +79,7 @@ export default function SideBarComponent() {
 
 
             {/* Logout Section */}
-            <Link href="/" style={{ textDecoration: 'none', marginTop: "auto", marginLeft: "2rem" }}>
+            <Link href="/logout" style={{ textDecoration: 'none', marginTop: "auto", marginLeft: "2rem" }}>
                 <List>
                     <ListItem>
                         <ListItemIcon sx={{ color: "#8691C3" }}>
diff --git a/logic/frontend/web/src/provider/UserProvider.tsx b/logic/frontend/web/src/provider/UserProvider.tsx
index 3d043aa..d7b4c2d 100644
--- a/logic/frontend/web/src/provider/UserProvider.tsx
+++ b/logic/frontend/web/src/provider/UserProvider.tsx
@@ -51,6 +51,7 @@ export const UserProvider = ({ children }: UserProviderProps) => {
     };
 
     const logout = () => {
+        console.log("logout")
         setUser(null);
         localStorage.removeItem('user');
         router.push('/login');