diff --git a/public/png/feedback.png b/public/png/feedback.png
new file mode 100644
index 0000000..bb2cd63
Binary files /dev/null and b/public/png/feedback.png differ
diff --git a/src/App.css b/src/App.css
index 407652c..9f872ce 100644
--- a/src/App.css
+++ b/src/App.css
@@ -28,7 +28,9 @@ font-weight: 700;
 }
 
 .sidebar-items:hover{
-  background:#9A9A9A;
+  background:#FFF0EA;
+  cursor: pointer;
+  border-radius: 5px;
 }
 /* 
 .navbar{
@@ -50,7 +52,6 @@ font-weight: 700;
 /*For rich text editor*/
 .ProseMirror {
   padding: 10px;
-  background: white;
   border-radius: 0 0 5px 5px;
   height: 100%;
   border: 0;
diff --git a/src/App.tsx b/src/App.tsx
index f5366b5..c4f1f2b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -14,6 +14,7 @@ import ShowBlog from "./app/blog/ShowBlog";
 import NotBlog from "./app/misc/NoBlog";
 import AboutUser from "./app/user/AboutUser";
 import About from "./app/platform/About";
+import Contact from "./app/platform/Contact";
 
 const router = createBrowserRouter([
   {
@@ -66,6 +67,10 @@ const router = createBrowserRouter([
         path: "/about",
         element: <About />,
       },
+      {
+        path: "/contact",
+        element: <Contact />,
+      }
     ],
   },
   {
@@ -84,7 +89,7 @@ const router = createBrowserRouter([
 
 function App() {
   return (
-    <Stack sx={{ background: "#FAF8FF" }}>
+    <Stack sx={{ background: "#F8FBF8" }}>
       <RouterProvider router={router} />
     </Stack>
   );
diff --git a/src/app/blog/editor.css b/src/app/blog/editor.css
index 2bd0ba6..bbffba1 100644
--- a/src/app/blog/editor.css
+++ b/src/app/blog/editor.css
@@ -2,7 +2,7 @@
 /*For rich text editor*/
 .editor .ProseMirror {
   padding: 20px;
-  background: white;
+  background: #FAF8FF;
   border-radius: 0 0 5px 5px;
   min-height: 450px;
   flex-direction: column;
diff --git a/src/app/blog/preview.css b/src/app/blog/preview.css
index c4f9e73..0ebf6aa 100644
--- a/src/app/blog/preview.css
+++ b/src/app/blog/preview.css
@@ -2,7 +2,7 @@
 /*For rich text editor*/
 .ProseMirror {
     padding: 20px;
-    background: #BDBDBD;
+    background: #F8FBF8;
     border-radius: 0 0 5px 5px;
     min-height: 450px;
     flex-direction: column;
diff --git a/src/app/home/HeroPage.tsx b/src/app/home/HeroPage.tsx
index 598fcf9..66813d1 100644
--- a/src/app/home/HeroPage.tsx
+++ b/src/app/home/HeroPage.tsx
@@ -1,4 +1,4 @@
-import { CircularProgress, Stack, Typography } from "@mui/material";
+import { CircularProgress, Divider, Stack, Typography } from "@mui/material";
 import HeroBlog from "./components/HeroBlog";
 import Blog from "./components/Blog";
 import Sidebar from "./components/Sidebar";
@@ -111,9 +111,7 @@ export default function HeroPage() {
         marginTop={3}
         justifyContent={"center"}
         alignItems={"center"}
-        borderRight={2}
         gap={1}
-        paddingX={4}
         borderColor={"#A3A0B2"}
       >
         <Typography variant="h2">The best from the week</Typography>
@@ -161,15 +159,21 @@ export default function HeroPage() {
         </Stack>
         }
       </Stack>
+      <Stack direction={'row'} gap={2}   position={"sticky"}
+              right={0}
+              top={0}>
+
+      
+      <Divider sx={{marginTop:'25px',width:'1px',background:'#d6d5dd'}} orientation="vertical" flexItem></Divider>
           <Stack
               className="right-sidebar"
-              position={"sticky"}
-              right={0}
-              top={0}
               padding={3}
-              minWidth={"300px"}>
+              justifyContent={"center"}
+              alignItems={"center"}
+              width={"310px"}>
             <Sidebar />
           </Stack>
+          </Stack>
     </Stack>
   );
 }
diff --git a/src/app/platform/Contact.tsx b/src/app/platform/Contact.tsx
new file mode 100644
index 0000000..2454604
--- /dev/null
+++ b/src/app/platform/Contact.tsx
@@ -0,0 +1,72 @@
+import { Button, Stack, TextField, Typography } from "@mui/material";
+
+export default function Contact() {
+  return (
+    <Stack
+      minHeight={"100vh"}
+      sx={{ background: "#F8FBF8" }}
+      justifyContent={"center"}
+      alignItems={"center"}
+    >
+      <Stack direction={"row"} width={"70%"}>
+        <Stack>
+          <img src="/png/feedback.png" alt="" />
+        </Stack>
+        <Stack
+          sx={{
+            background: "white",
+          }}
+          border={1}
+          borderRadius={5}
+          paddingBottom={4}
+          minHeight={100}
+          flexGrow={1}
+          borderColor={"#BDBDBD"}
+        >
+          <Stack gap={4} padding={5}>
+            <Typography
+              variant="h4"
+              sx={{
+                fontWeight: "bold",
+              }}
+            >
+              We would love to hear from you!
+            </Typography>
+            <TextField
+              id="standard-basic"
+              label="Your Name"
+              variant="standard"
+            />
+            <TextField
+              id="standard-basic"
+              label="Your Email"
+              variant="standard"
+            />
+            <TextField
+              id="outlined-multiline-static"
+              label="Something you want to share with us..."
+              multiline
+              rows={6}
+              variant="outlined"
+              sx={{
+                marginTop: "6px",
+              }}
+            />
+          </Stack>
+          <Stack justifyContent={"center"} alignItems={"center"}>
+            <Button sx={{ minWidth: "8rem", background: "#474747" }}>
+              <Typography
+                sx={{
+                  color: "white",
+                  fontWeight: "bold",
+                }}
+              >
+                Submit
+              </Typography>
+            </Button>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/src/app/user/AboutUser.tsx b/src/app/user/AboutUser.tsx
index 194346b..43b17be 100644
--- a/src/app/user/AboutUser.tsx
+++ b/src/app/user/AboutUser.tsx
@@ -227,7 +227,7 @@ export default function AboutUser() {
           </Stack>
 
           <Stack className="followUp" marginTop={3}>
-            <Button variant="contained">Follow</Button>
+            <Button variant="contained" sx={{background:'#474747',color:'white'}}>Follow</Button>
           </Stack>
         </Stack>
       </Stack>
diff --git a/src/app/user/UserProfile.tsx b/src/app/user/UserProfile.tsx
index 4bea6c4..1297234 100644
--- a/src/app/user/UserProfile.tsx
+++ b/src/app/user/UserProfile.tsx
@@ -67,7 +67,7 @@ export default function UserProfile({ isOpen , onClose , authorId}: userProfileT
         top={0}
         right={0}
         bottom={0}
-        minWidth={"25rem"}
+        minWidth={"26rem"}
         minHeight={"100vh"}
         sx={{ background: "#fff", borderRadius: "8px 0px 0px 8px" }}
       >
diff --git a/src/layout/Footer.tsx b/src/layout/Footer.tsx
index 2a8df19..02f16ed 100644
--- a/src/layout/Footer.tsx
+++ b/src/layout/Footer.tsx
@@ -4,7 +4,7 @@ export default function Footer() {
   return (
     <Stack direction={'column'} gap={1} justifyContent={'center'} alignItems={'center'}>
       <Stack direction={'row'} gap={1}>
-      <Typography variant="caption">
+      <Typography fontSize={'13px'}>
         <a style={{
           paddingInline: '5px',
         }} className="footer-link" href="/about" >
@@ -13,7 +13,7 @@ export default function Footer() {
           •
           <a style={{
           paddingInline: '5px',
-        }} className="footer-link" href="/" >
+        }} className="footer-link" href="/contact" >
           Contact
           </a>
           •
@@ -30,7 +30,7 @@ export default function Footer() {
           </a>
       </Typography>
       </Stack>
-      <Typography>
+      <Typography variant="caption">
         Pensdown © 2023
       </Typography>
     </Stack>
diff --git a/src/layout/headeroptions/Header.tsx b/src/layout/headeroptions/Header.tsx
index ba5ad70..bca4de3 100644
--- a/src/layout/headeroptions/Header.tsx
+++ b/src/layout/headeroptions/Header.tsx
@@ -10,6 +10,11 @@ export default function Header() {
       width={"100%"}
       minHeight={"40px"}
       justifyContent={"center"}
+      sx={
+        {
+          background: "#F5F5F5",
+        }
+      }
     >
       <Stack
         className="navbar-container"