diff --git a/components/BlogItem.jsx b/components/BlogItem.jsx
new file mode 100644
index 0000000..d6755f0
--- /dev/null
+++ b/components/BlogItem.jsx
@@ -0,0 +1,37 @@
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+import { AiOutlineStar } from "react-icons/ai";
+import moment from "moment";
+
+const BlogItem = ({ blog }) => {
+  return (
+    <div className="overflow-hidden hover:text-white hover:bg-red-600 border-t border-red-600 duration-300">
+      <div className="flex gap-5 w-full duration-300">
+        <div className="w-[30rem] flex items-center rounded-md p-5 lg:h-[24rem]">
+          <Image
+            src={blog.imageUrl}
+            alt={blog.title}
+            width={640}
+            height={360}
+            priority
+            className="w-full h-full object-fill"
+          />
+        </div>
+
+        <div className="flex flex-col w-4/5 mx-10 justify-between py-10 text-red-600 lg:h-[24rem]  hover:text-white gap-2">
+          <div className="flex gap-5">
+            <span className="font-semibold">{blog.tags}</span>
+            <span className="font-normal text-base">
+              Post on: {moment(blog.createdAt).format("DD MMM YY. hh:mm A")}
+            </span>
+          </div>
+          <h3 className="text-6xl font-ligh overflow-hidden">{blog.title}</h3>
+          <p>{blog.author}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BlogItem;
diff --git a/next.config.js b/next.config.js
index efacf85..2a0f29f 100644
--- a/next.config.js
+++ b/next.config.js
@@ -2,7 +2,7 @@
 const nextConfig = {
   reactStrictMode: true,
   images: {
-    domains: ["lh3.googleusercontent.com"],
+    domains: ["lh3.googleusercontent.com", "images.pexels.com"],
     remotePatterns: [
       {
         protocol: "https",
diff --git a/package-lock.json b/package-lock.json
index cced9a6..f7e6e41 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "eslint": "8.37.0",
         "eslint-config-next": "13.2.4",
         "micro": "^10.0.1",
+        "moment": "^2.29.4",
         "next": "^13.3.1",
         "next-auth": "^4.22.1",
         "prisma": "^4.12.0",
@@ -2883,6 +2884,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
diff --git a/package.json b/package.json
index a0eaf75..a41ad8c 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "eslint": "8.37.0",
     "eslint-config-next": "13.2.4",
     "micro": "^10.0.1",
+    "moment": "^2.29.4",
     "next": "^13.3.1",
     "next-auth": "^4.22.1",
     "prisma": "^4.12.0",
diff --git a/pages/api/blogs/index.js b/pages/api/blogs/index.js
new file mode 100644
index 0000000..571e265
--- /dev/null
+++ b/pages/api/blogs/index.js
@@ -0,0 +1,12 @@
+import { getAllBlogs } from "@/prisma/blogs";
+
+export default async function handler(req, res) {
+  try {
+    if (req.method === "GET") {
+      const blogs = await getAllBlogs();
+      return res.status(200).json(blogs);
+    }
+  } catch (error) {
+    return res.status(500).json({ message: error.message });
+  }
+}
diff --git a/pages/blogs/index.js b/pages/blogs/index.js
new file mode 100644
index 0000000..392fb54
--- /dev/null
+++ b/pages/blogs/index.js
@@ -0,0 +1,38 @@
+import BlogItem from "@/components/BlogItem";
+import { getAllBlogs } from "@/prisma/blogs";
+
+const BlogsPage = ({ blogs }) => {
+  return (
+    <div className="flex flex-col gap-10 min-h-screen">
+      <div className="title flex flex-col items-center justify-center blog-title w-auto h-96 bg-no-repeat bg-cover bg-center">
+        <h2 className="uppercase font-extralight text-white text-8xl">
+          Our Blog
+        </h2>
+      </div>
+
+      <div className="grid gap-10">
+        {blogs.map((blog) => (
+          <BlogItem key={blog.id} blog={blog} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default BlogsPage;
+
+export const getServerSideProps = async () => {
+  const blogs = await getAllBlogs();
+
+  const updatedBlogs = blogs.map((blog) => ({
+    ...blog,
+    updatedAt: blog.updatedAt.toString(),
+    createdAt: blog.createdAt.toString(),
+  }));
+
+  return {
+    props: {
+      blogs: updatedBlogs,
+    },
+  };
+};
diff --git a/prisma/blogs.js b/prisma/blogs.js
new file mode 100644
index 0000000..26e4175
--- /dev/null
+++ b/prisma/blogs.js
@@ -0,0 +1,7 @@
+import prisma from "./prisma";
+
+// Get all blogs
+export const getAllBlogs = async () => {
+  const blogs = await prisma.blog.findMany({});
+  return blogs;
+};
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index e27ed8f..5b825e2 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -41,4 +41,16 @@ model Order{
 
   userId String @db.ObjectId
   user User @relation(fields: [userId], references: [id])
+}
+
+model Blog{
+  id String @id @default(auto()) @map("_id") @db.ObjectId
+  title String
+  author String
+  tags String
+  imageUrl String
+  description String
+
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
 }
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index aff92ec..1890dcd 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -456,3 +456,7 @@
     border-radius: 50%;
   }
 }
+
+.blog-title {
+  background-image: url("https://images.pexels.com/photos/5792901/pexels-photo-5792901.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
+}