diff --git a/src/app/(auth-routes)/register/page.tsx b/src/app/(auth-routes)/register/page.tsx
index 0fc9dabb5..e5845f651 100644
--- a/src/app/(auth-routes)/register/page.tsx
+++ b/src/app/(auth-routes)/register/page.tsx
@@ -61,17 +61,14 @@ const SignUp = () => {
     <div>
       <div className="flex flex-col items-center gap-2">
         <h1 className="text-2xl font-bold">Sign Up</h1>
-        <p className="text-gray-500">
+        <p className="my-4 text-gray-500">
           Create an account to get started with us.
         </p>
       </div>
       <div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-6 sm:space-y-0">
-        <Button
-          disabled
-          className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50"
-        >
+        <Button className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50">
           <Image
-            src="/images/goggle.png"
+            src="/images/google.svg"
             width={20}
             height={20}
             alt="Goggle"
@@ -79,10 +76,7 @@ const SignUp = () => {
           />
           Sign in with Google
         </Button>
-        <Button
-          disabled
-          className="flex items-center rounded-md border border-gray-300 bg-white p-4 px-4 text-gray-700 shadow-sm hover:bg-gray-50"
-        >
+        <Button className="flex items-center rounded-md border border-gray-300 bg-white p-4 px-4 text-gray-700 shadow-sm hover:bg-gray-50">
           <Image
             src="/images/facebook.svg"
             width={20}
diff --git a/src/app/(landing-routes)/blog/latest/data/dummy-article-data.ts b/src/app/(landing-routes)/blog/data/dummy-article-data.ts
similarity index 100%
rename from src/app/(landing-routes)/blog/latest/data/dummy-article-data.ts
rename to src/app/(landing-routes)/blog/data/dummy-article-data.ts
diff --git a/src/app/(landing-routes)/blog/latest/page.tsx b/src/app/(landing-routes)/blog/latest/page.tsx
index 2898365a1..694bed481 100644
--- a/src/app/(landing-routes)/blog/latest/page.tsx
+++ b/src/app/(landing-routes)/blog/latest/page.tsx
@@ -1,6 +1,6 @@
 import BlogCard from "~/components/common/blogCard/BlogCard";
 import CustomButton from "~/components/common/common-button/common-button";
-import { articlesData } from "./data/dummy-article-data";
+import { articlesData } from "../data/dummy-article-data";
 
 const LatestArticlesPage = () => {
   const isTesting: boolean = process.env.NEXT_PUBLIC_TESTING === "true";
diff --git a/src/app/(landing-routes)/blog/page.tsx b/src/app/(landing-routes)/blog/page.tsx
index 7d9e541d9..70a522bd5 100644
--- a/src/app/(landing-routes)/blog/page.tsx
+++ b/src/app/(landing-routes)/blog/page.tsx
@@ -1,9 +1,15 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
 import CustomButton from "~/components/common/common-button/common-button";
+import HeroSection from "~/components/extDynamicPages/blogCollection/BlogPageHero";
 import BlogCard from "~/components/layouts/BlogCards";
-import HeroSection from "../../../components/extDynamicPages/blogCollection/BlogPageHero";
 import { blogPosts } from "./data/mock";
 
 const BlogHome = () => {
+  const router = useRouter();
+
   return (
     <div>
       <HeroSection />
@@ -21,6 +27,10 @@ const BlogHome = () => {
               category={post.category}
               image={post.image}
               labelClassName={post.labelClassName}
+              onClick={() => {
+                localStorage.setItem("currentBlogPost", JSON.stringify(post));
+                router.push(`/blog/$?id=${post.id}`);
+              }}
             />
           ))}
         </div>
diff --git a/src/types/blog.types.ts b/src/types/blog.types.ts
new file mode 100644
index 000000000..ce15d08db
--- /dev/null
+++ b/src/types/blog.types.ts
@@ -0,0 +1,71 @@
+import {
+  blogCard1,
+  blogCard2,
+  blogCard3,
+  blogCard4,
+  blogCard5,
+  blogCard6,
+} from "../../public/images/blogPage/utils";
+
+export const blogPosts = [
+  {
+    id: 1,
+    title: "The Power of Networking: How to Build Meaningful Connections",
+    date: "Jul 12, 2024",
+    readTime: "5",
+    category: "Business",
+    image: blogCard1,
+    labelClassName: "bg-primary",
+    author: "Nora Nora",
+  },
+  {
+    id: 2,
+    title: "The Global Impact of Climate Change: A Look at the Evidence",
+    date: "Jul 12, 2024",
+    readTime: "5",
+    category: "World News",
+    image: blogCard2,
+    labelClassName: "bg-warning",
+    author: "Jane Doe",
+  },
+  {
+    id: 3,
+    title: "5 Easy and Delicious Recipes for Busy Weeknights",
+    date: "Jul 12, 2024",
+    readTime: "5",
+    category: "Food",
+    image: blogCard3,
+    labelClassName: "bg-success",
+    author: "John Doe",
+  },
+  {
+    id: 4,
+    title: "5 Simple Habits to Improve Your Mental Wellbeing",
+    date: "Jul 12, 2024",
+    readTime: "5",
+    category: "Lifestyle",
+    image: blogCard4,
+    labelClassName: "bg-primary",
+    author: "Jane Doe",
+  },
+  {
+    id: 5,
+    title: "The Ultimate Guide to Dressing Stylishly with Fewer Clothes",
+    date: "Jul 12, 2024",
+    readTime: "5",
+    category: "Fashion",
+    image: blogCard5,
+    labelClassName: "bg-success",
+    author: "John Doe",
+  },
+  {
+    id: 6,
+    title: "The Future of Travel: What Will the World Look Like in 2030?",
+    date: "Jul 12, 2024",
+    readTime: "5",
+    category: "World News",
+    image: blogCard6,
+    labelClassName: "bg-warning",
+    author: "Nora Nora",
+  },
+];