diff --git a/.replit b/.replit
index 0d00d98fd..b945a3341 100644
--- a/.replit
+++ b/.replit
@@ -10,3 +10,7 @@ run = ["sh", "-c", "npm run dev"]
 [[ports]]
 localPort = 3000
 externalPort = 80
+
+[[ports]]
+localPort = 3001
+externalPort = 3001
diff --git a/app/blog/[id]/generateStaticParams.ts b/app/blog/[id]/generateStaticParams.ts
new file mode 100644
index 000000000..c865206cd
--- /dev/null
+++ b/app/blog/[id]/generateStaticParams.ts
@@ -0,0 +1,8 @@
+// app/blog/[id]/generateStaticParams.ts
+import { posts } from '../data/posts';
+
+export async function generateStaticParams() {
+  return posts.map((post) => ({
+    id: post.id,
+  }));
+}
diff --git a/app/blog/[id]/page.tsx b/app/blog/[id]/page.tsx
new file mode 100644
index 000000000..03f629ee2
--- /dev/null
+++ b/app/blog/[id]/page.tsx
@@ -0,0 +1,36 @@
+// app/blog/[id]/page.tsx
+import { posts } from '../data/posts';
+import { BlogPost } from '../types/blog';
+import { notFound } from 'next/navigation';
+
+interface BlogPostPageProps {
+  params: {
+    id: string;
+  };
+}
+
+const BlogPostPage = ({ params }: BlogPostPageProps) => {
+  const post: BlogPost | undefined = posts.find((p) => p.id === params.id);
+
+  if (!post) {
+    notFound();
+  }
+  const formattedDate = new Date(post.date).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+  });
+
+  return (
+    <div className="prose border-blue-600 border mx-auto p-8">
+      <h1>{post?.title}</h1>
+      <p><em>{post?.author} - {formattedDate}</em></p>
+      <div className=''>
+        <img className='h-6 '
+          src={post?.imageUrl}/>
+      </div>
+      <div>{post?.content}</div>
+    </div>
+  );
+};
+
+export default BlogPostPage;
diff --git a/app/blog/data/posts.ts b/app/blog/data/posts.ts
new file mode 100644
index 000000000..738cac0ce
--- /dev/null
+++ b/app/blog/data/posts.ts
@@ -0,0 +1,24 @@
+// data/posts.ts
+import { BlogPost } from '../types/blog';
+
+export const posts: BlogPost[] = [
+  {
+    id: '1',
+    title: 'First Post, In every new lession in ship late',
+    content: 'This is the content of the first post.',
+    imageUrl: 'https://images.unsplash.com/photo-1724226224544-b244b08e505e?q=80&w=1471&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    description: 'none 1',
+    date: '2024-08-25',
+    author: 'John Doe',
+  },
+  {
+    id: '2',
+    title: 'Second Post, hellow the the world the country is down',
+    content: 'This is the content of the second post.',
+    imageUrl: 'https://plus.unsplash.com/premium_photo-1692833836807-7c2ec90aec19?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    description: 'none 2',
+    date: '2024-09-26',
+    author: 'Jane Smith',
+  },
+  // Add more posts here...
+];
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index ac722708f..5c82e45a1 100644
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -1,10 +1,47 @@
-import Demo from "../components/demo";
-// `app/page.tsx` is the UI for the `/` URL
-
-export default function blog() {
-  return(
-    <section className="m-auto max-w-fit bg-eight flex flex-col justify-center items-center">
-      <Demo/>
-    </section>
-  ) ;
-}
+import Link from 'next/link';
+import { posts } from './data/posts';
+import { IconCornerDownRight } from '@tabler/icons-react';
+
+const BlogPage = () => {
+  return (
+    <section className="prose min-h-screen md:flex mx-auto p-8">
+      <div className='basis-1/3 h-64 sm:h-auto three'>
+        <h1 className=' text-6xl'>Blog News</h1>
+        <p>Latest News and <br /> update</p>
+      </div>
+      <ul className='basis-2/3  flex flex-col gap-16 border-yellow-600 '>
+        {posts.map((post) => (
+          <li className='flex border-lime-500 h-64 bg rounded flex-col sm:flex-row  ' 
+            key={post.id}> 
+            <Link className='basis-1/3 m-1 h-20 md:h-full overflow-hidden  md:aspect-video  rounded border-blue-600  ' 
+              href={`/blog/${post.id}`}>
+              <img className='w-full h-full object-cover'
+                src={post.imageUrl}/>
+            </Link>
+            <div className='basis-1/2 flex flex-col justify-between mx-1 border-yellow-500'>
+             <div>
+                <i className='not-italic  font-semibold text-five 
+ py-1 text-sm'>{
+                               // Here is the updated line of code
+                               new Date(post.date).toLocaleDateString('en-US', {
+                                 year: 'numeric',
+                                 month: 'short',
+                               })
+                             }</i>
+                               <h2 className='my-2 sm:my-6 font-semibold text-2xl lg:text-4xl  text-five'>
+                                 {post.title}
+                               </h2>
+                             <Link className='flex my-4 p-1 w-fit text-sm bg-five text-primary rounded-full px-3'  href={`/blog/${post.id}`}> Discover <IconCornerDownRight 
+               width={20} height={20} /> </Link>
+             </div>
+              <i className='text-four'>{post.description}</i>
+
+            </div>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+};
+
+export default BlogPage;
\ No newline at end of file
diff --git a/app/blog/types/blog.ts b/app/blog/types/blog.ts
new file mode 100644
index 000000000..33b7b6509
--- /dev/null
+++ b/app/blog/types/blog.ts
@@ -0,0 +1,10 @@
+// types/blog.ts
+export interface BlogPost {
+  id: string;
+  title: string;
+  content: string;
+  imageUrl: string;
+  description: string,
+  date: string;
+  author: string;
+}
diff --git a/app/components/homeSectionHeader.tsx b/app/components/homeSectionHeader.tsx
index 813a29cdc..6c8e6e146 100644
--- a/app/components/homeSectionHeader.tsx
+++ b/app/components/homeSectionHeader.tsx
@@ -33,7 +33,7 @@ export default function HomeSectionHeader() {
               </Link>
             </div>
             <div className="">
-              <div className=" text-secondary pt-1 md:pt-2 font-bold">
+              <div className="text-secondary pt-1 md:pt-2 font-bold">
                 <DeviceAddress />
                 <Weather/>
               </div>
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index 82600c40e..38b2aca57 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -102,8 +102,8 @@ const ContactPage: React.FC = () => {
           </div>
 
           <div className="basis-2/2 text-primary  bg-secondary border-four md:w-[60%] aspect-square bg-gradient-to-r from-seven rounded-xl m-2   p-2   sm:w-[60%]">
-            <h6 className="mb-1 p-2 text-four  text-xl font-semibold md:text-4xl md:font-medium tracking-tight ">
-             &#9679; 
+            <h6 className="mb-1 p-2 text-four  text-xl font-semibold md:text-2xl md:font-medium tracking-tight ">
+             &#9679; Your Matters – Drop Me a Line.
             </h6>
 
             <form