diff --git a/src/components/home/AboutUs.tsx b/src/components/home/AboutUs.tsx
index d9189ecb..72f5cd63 100644
--- a/src/components/home/AboutUs.tsx
+++ b/src/components/home/AboutUs.tsx
@@ -34,31 +34,31 @@ const AboutUs = () => {
       </div>
 
     
-      <div className="flex flex-wrap gap-6 items-center px-10 ">
-  <div className="flex flex-col p-6 shadow-md w-[320px] m-2 cursor-pointer bg-gray-200 dark:bg-gray-700 rounded-lg transition duration-300">
-    <GrResources size={40} className='dark:text-white'/>
-    <h3 className='dark:text-green text-xl font-semibold mb-2 text-primary'>Guidance</h3>
-    <p className='text-black-600 dark:text-white'>
-      Get expert guidance every step of the way. From applying to tracking your progress, 
-      our team is here to help you succeed and reach your full potential.
+      <div className="flex flex-wrap justify-center gap-4 p-4">
+  <div className="flex flex-col p-6 shadow-md w-[320px] sm:w-[350px] md:w-[400px] lg:w-[400px] m-2 cursor-pointer bg-gray-200 dark:bg-gray-700 rounded-lg transition duration-300">
+    <GrResources size={40} className="dark:text-white" />
+    <h3 className="dark:text-green text-xl font-semibold mb-2 text-primary">Guidance</h3>
+    <p className="text-black-600 dark:text-white">
+      Get expert guidance every step of the way. From applying to tracking your progress, our team is here to help you succeed and reach your full potential.
     </p>
   </div>
-  <div className="flex flex-col p-6 shadow-md w-[320px] m-2 cursor-pointer bg-gray-200 dark:bg-gray-700 rounded-lg transition duration-300">
-    <FaUsers size={40} className='dark:text-white' />
-    <h3 className='dark:text-green text-xl font-semibold mb-2 text-primary'>Community</h3>
-    <p className='text-black-600 dark:text-white'>
-    Connect with a community of like-minded tech enthusiasts, where you can share insights, ask questions, and build valuable relationships with peers and mentors.
+  <div className="flex flex-col p-6 shadow-md w-[320px] sm:w-[350px] md:w-[400px] lg:w-[400px] m-2 cursor-pointer bg-gray-200 dark:bg-gray-700 rounded-lg transition duration-300">
+    <FaUsers size={40} className="dark:text-white" />
+    <h3 className="dark:text-green text-xl font-semibold mb-2 text-primary">Community</h3>
+    <p className="text-black-600 dark:text-white">
+      Connect with a community of like-minded tech enthusiasts, where you can share insights, ask questions, and build valuable relationships with peers and mentors.
     </p>
   </div>
-  <div className="flex flex-col p-6 shadow-md w-[320px] m-2 cursor-pointer bg-gray-200 dark:bg-gray-700 rounded-lg transition duration-300">
-    <GrDocumentPerformance size={35} className='dark:text-white ' />
-    <h3 className='dark:text-green text-xl font-semibold mb-2 text-primary'>Tools and Resources</h3>
-    <p className='text-black-600 dark:text-white'>
-    Access real-time tracking tools and resources designed to support your learning and professional growth. Our commitment to cutting-edge technology means you stay on top </p>
+  <div className="flex flex-col p-6 shadow-md w-[320px] sm:w-[350px] md:w-[400px] lg:w-[400px] m-2 cursor-pointer bg-gray-200 dark:bg-gray-700 rounded-lg transition duration-300">
+    <GrDocumentPerformance size={35} className="dark:text-white" />
+    <h3 className="dark:text-green text-xl font-semibold mb-2 text-primary">Tools and Resources</h3>
+    <p className="text-black-600 dark:text-white">
+      Access real-time tracking tools and resources designed to support your learning and professional growth. Our commitment to cutting-edge technology means you stay on top.
+    </p>
   </div>
-  
 </div>
 
+
     </div>
   )
 }
diff --git a/src/components/home/Blogs.tsx b/src/components/home/Blogs.tsx
index c16b02a4..3439b0a8 100644
--- a/src/components/home/Blogs.tsx
+++ b/src/components/home/Blogs.tsx
@@ -5,6 +5,8 @@ import { Link } from 'react-router-dom';
 import { fetchAllBlogs } from '../../redux/actions/blogsActions';
 import { toast } from 'react-toastify';
 
+
+
  interface Author {
   id: string;
   email: string;
@@ -28,10 +30,14 @@ import { toast } from 'react-toastify';
 }
 
 
+
 const BlogCard = ({ blog }: { blog: Blog }) => (
-  <div key={blog.id} className="bg-gray-200 dark:bg-dark-frame-bg dark:text-white text-primary shadow-lg rounded-lg cursor-pointer hover:shadow-xl transition duration-300">
+  <div key={blog.id} className="bg-gray-200 dark:bg-dark-frame-bg dark:text-white text-primary shadow-lg rounded-lg cursor-pointer hover:shadow-xl transition duration-300" >
+    <Link to={`/blogs/${blog.id}`}>
     <img src={blog.coverImage} alt={blog.title} className="w-full h-40 object-cover mb-4" />
+    </Link>
     <div className="p-3">
+    <Link to={`/blogs/${blog.id}`}>
       <div className="flex justify-between text-sm mb-4 items-center">
         <div className="flex flex-wrap items-center gap-3">
         <span className="font-semibold flex flex-row gap-2 items-center">
@@ -51,14 +57,13 @@ const BlogCard = ({ blog }: { blog: Blog }) => (
           </span>
         </div>
       </div>
-
+      </Link>
+      <Link to={`/blogs/${blog.id}`}>
       <h3 className="text-xl font-semibold mb-2">{blog.title}</h3>
       <p className="mb-4 text-black-text dark:text-white overflow-hidden line-clamp-3">
         {blog.content}
       </p>
-      <Link to={`/blogs/${blog.id}`} className="text-green hover:underline">
-        Read More →
-      </Link>
+      </Link> 
     </div>
   </div>
 );
diff --git a/src/components/home/Header.tsx b/src/components/home/Header.tsx
index 838541c8..100c4362 100644
--- a/src/components/home/Header.tsx
+++ b/src/components/home/Header.tsx
@@ -10,7 +10,7 @@ import { useNotifications } from "../../utils/Notifications";
 import { useAdminNotifications } from "../../hooks/useAdminNotifications";
 const logo = require("../../assets/logo.svg").default;
 const LogoWhite: string = require("../../assets/logoWhite.svg").default;
-const profilePlaceholder = require("../../assets/avatar.png").default;
+const profilePlaceholder = require("../../assets/default-image.jpg").default;
 
 const Header = () => {
   const [isNavOpen, setIsNavOpen] = useState(false);
@@ -21,7 +21,7 @@ const Header = () => {
   const accessToken = localStorage.getItem("access_token");
   const isLoggedIn = Boolean(accessToken);
   //@ts-ignore
-  const user = isLoggedIn ? jwtDecode(accessToken)?.profile || profilePlaceholder : profilePlaceholder;
+  const user = isLoggedIn ? jwtDecode(accessToken)?.data.picture || profilePlaceholder : profilePlaceholder;
 
   const roleName = localStorage.getItem("roleName");
 
diff --git a/src/components/profileDropdown.tsx b/src/components/profileDropdown.tsx
index b181c964..03e18418 100644
--- a/src/components/profileDropdown.tsx
+++ b/src/components/profileDropdown.tsx
@@ -44,13 +44,13 @@ function ProfileDropdown({
                   >
                     <>{t("Preferences")}</>
                   </Link>
-                  {/* <Link
+                  <Link
                     onClick={handleShowProfileDropdown}
                     to={destination()}
                     className="font-semibold text-gray-600 dark:text-black  px-4 py-2 pb-4 hover:bg-gray-600 hover:text-gray-200 dark:hover:bg-gray-300 dark:hover:text-gray-900"
                   >
                     <>{t("Dashboard")}</>
-                  </Link> */}
+                  </Link>
                 </div>
               </div>
             </div>
diff --git a/src/components/sidebar/navHeader.tsx b/src/components/sidebar/navHeader.tsx
index 7709e2e7..438c2e52 100644
--- a/src/components/sidebar/navHeader.tsx
+++ b/src/components/sidebar/navHeader.tsx
@@ -12,7 +12,7 @@ import jwtDecode from "jwt-decode";
 import { useNotifications } from "../../utils/Notifications";
 import { useAdminNotifications } from "../../hooks/useAdminNotifications";
 const logo: string = require("../../assets/logo.svg").default;
-const profile: string = require("../../assets/avatar.png").default;
+const profile: string = require("../../assets/default-image.jpg").default;
 const LogoWhite: string = require("../../assets/logoWhite.svg").default;
 import {destination} from '../../utils/utils'
 import SearchBar from "../../components/SearchBar";
@@ -85,7 +85,7 @@ function NavBar() {
   const userDestination = destination();
   const access_token = localStorage.getItem("access_token");
   //@ts-ignore
-  const user = access_token  ? jwtDecode(access_token)?.profile || profile : profile;
+  const user = access_token  ? jwtDecode(access_token)?.picture || profile : profile;
 
   const roleName = localStorage.getItem("roleName");
   const [nav, setNav] = useState(false);
diff --git a/src/pages/Blogs/Blogs.tsx b/src/pages/Blogs/Blogs.tsx
index f7d40baa..1dcf920e 100644
--- a/src/pages/Blogs/Blogs.tsx
+++ b/src/pages/Blogs/Blogs.tsx
@@ -57,62 +57,71 @@ const Blogs: React.FC = () => {
          </div>
        </div>
         ) : blogs.length > 0 ? (
-          <><div className="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-1 gap-6 px-10">
+          <>
+          <div className="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-1 gap-6 px-10">
               {blogs.map((blog) => (
-                <div
-                  key={blog.id}
-                  className="bg-gray-200 dark:bg-dark-frame-bg dark:text-white text-primary shadow-lg rounded-lg cursor-pointer hover:shadow-xl transition duration-300"
-                >
-                  <img
-                    src={blog.coverImage}
-                    alt={blog.title}
-                    className="w-full h-40 object-cover mb-4" />
-                  <div className="p-3">
-                    <div className="flex justify-between text-sm text-primary dark:text-white mb-4 items-center">
-                      <div className="flex items-center gap-3">
-                        <div className="flex flex-wrap items-center gap-3">
-                          <span className="font-semibold flex flex-row gap-2 items-center">
-                            <FaUser size={20} className='dark:text-green' /> {blog.author.firstname}
-                          </span>
-                          <span className="ml-2 flex flex-row gap-2 items-center">
-                            <span className="ml-2 flex flex-row gap-2 items-center">
-                              <FaCalendar size={20} className="dark:text-green" />
-                              {blog.created_at
-                                ? new Date(Number(blog.created_at)).toLocaleDateString()
-                                : "Unknown Date"}
-                            </span>
-                          </span>
-                          <span className='flex flex-row gap-1 items-center'>
-                            <CiHeart size={20} className='dark:text-green' /> {blog.reactions.length || 0}
-                          </span>
-                          <span className='flex flex-row gap-1 items-center'>
-                            <FaCommentDots size={20} className='dark:text-green' /> {blog.comments.length || 0}
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                    <h3 className="text-xl font-semibold mb-2">{blog.title}</h3>
-                    <p className="mb-4 text-black-text dark:text-white overflow-hidden line-clamp-3">
-                      {blog.content.substring(0, 150)}...
-                    </p>
-                    <div className="flex flex-wrap gap-2 mt-3">
-                      {blog.tags.map((tag) => (
-                        <span
-                          key={tag}
-                          onClick={() => setSelectedTag(tag)}
-                          className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded cursor-pointer hover:bg-green-200"
-                        >
-                          #{tag}
-                        </span>
-                      ))}
-                    </div>
-                    <Link to={`/blogs/${blog.id}`} className="text-green hover:underline">
-                      Read More →
-                    </Link>
-                  </div>
-                </div>
+               <div
+               key={blog.id}
+               className="bg-gray-200 dark:bg-dark-frame-bg dark:text-white text-primary shadow-lg rounded-lg cursor-pointer hover:shadow-xl transition duration-300"
+             >
+               <Link to={`/blogs/${blog.id}`}>
+                 <img
+                   src={blog.coverImage}
+                   alt={blog.title}
+                   className="w-full h-40 object-cover mb-4"
+                 />
+                 </Link>
+                 <div className="p-3">
+                   <div className="flex justify-between text-sm text-primary dark:text-white mb-4 items-center">
+                     <div className="flex items-center gap-3">
+                     <Link to={`/blogs/${blog.id}`}>
+                       <div className="flex flex-wrap items-center gap-3">
+                         <span className="font-semibold flex flex-row gap-2 items-center">
+                           <FaUser size={20} className="dark:text-green" /> {blog.author.firstname}
+                         </span>
+                         <span className="ml-2 flex flex-row gap-2 items-center">
+                           <FaCalendar size={20} className="dark:text-green" />
+                           {blog.created_at
+                             ? new Date(Number(blog.created_at)).toLocaleDateString()
+                             : "Unknown Date"}
+                         </span>
+                         <span className="flex flex-row gap-1 items-center">
+                           <CiHeart size={20} className="dark:text-green" /> {blog.reactions.length || 0}
+                         </span>
+                         <span className="flex flex-row gap-1 items-center">
+                           <FaCommentDots size={20} className="dark:text-green" /> {blog.comments.length || 0}
+                         </span>
+                       </div>
+                      </Link>
+                     </div>
+                   </div>
+                   <Link to={`/blogs/${blog.id}`}>
+                   <h3 className="text-xl font-semibold mb-2">{blog.title}</h3>
+                   <p className="mb-4 text-black-text dark:text-white overflow-hidden line-clamp-3">
+                     {blog.content.substring(0, 150)}...
+                   </p>
+                   </Link>
+                   <div className="flex flex-wrap gap-2 mt-3">
+                     {blog.tags.map((tag) => (
+                       <span
+                         key={tag}
+                         onClick={(e) => {
+                           setSelectedTag(tag); 
+                         }}
+                         className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded cursor-pointer hover:bg-green-200"
+                       >
+                         #{tag}
+                       </span>
+                     ))}
+                   </div>
+                 </div>
+               
+             </div>
+             
               ))}
-            </div><Footer /></>
+            </div>
+        
+            </>
         ) : (
           <div className="flex flex-col justify-center items-center h-screen text-center dark:bg-dark-bg bg-white px-6">
         <svg
@@ -127,6 +136,7 @@ const Blogs: React.FC = () => {
       </div>
         )}
       </div>
+      <Footer />
     </section>
   );
 };