diff --git a/src/components/BlogGridComponentThemeFive/blogGridComponentThemeFive.md b/src/components/BlogGridComponentThemeFive/blogGridComponentThemeFive.md
new file mode 100644
index 00000000..03789e39
--- /dev/null
+++ b/src/components/BlogGridComponentThemeFive/blogGridComponentThemeFive.md
@@ -0,0 +1,25 @@
+## Initial Setup
+
+Hope you have successfully set up the project in your local system and install all dependencies
+
+## About the mid-section Component
+
+This is a resuasble component for displaying the information in a two grid system where the first section is to show main features in cards
+and the second section provides a title and description. This Component is highly reusable and customizable via props.
+
+## How to use the component
+
+Import the component to `pages/index.js`
+`import {BlogGridThemeFive} from "../components/BlogGridComponentThemeFive";`
+
+## How to handle props to the component
+
+```
+
+```
+
+`heading`: prop of type text is the mainText of the section
+`countItems`: prop of type array is the array of cardItems each having an time and duration
\ No newline at end of file
diff --git a/src/components/BlogGridComponentThemeFive/blogGridComponentThemeFive.stories.js b/src/components/BlogGridComponentThemeFive/blogGridComponentThemeFive.stories.js
new file mode 100644
index 00000000..4f9c06b0
--- /dev/null
+++ b/src/components/BlogGridComponentThemeFive/blogGridComponentThemeFive.stories.js
@@ -0,0 +1,33 @@
+import React from "react";
+import { BlogGridThemeFive } from "./index";
+import "bootstrap/dist/css/bootstrap.css"
+
+export default {
+ title: "theme 5/blogGridComponentThemeFive",
+ component: BlogGridThemeFive,
+ argTypes: {
+ heading: { control: "text" },
+ cardItems: { control: "array" },
+ }
+}
+
+export const blogGrid=args=>
+
+blogGrid.args={
+ heading:"Our Latest Blogs",
+ cardItems:[
+ { img:"https://i.ibb.co/BrCtNdj/Rectangle-42.png",
+ cardHead:"Los Angeles Institute",
+ cardPara:"Street Food Convention will showcase products like Packed food, beef and lamb, street food."
+ },
+ { img:"https://i.ibb.co/7twyrrL/Rectangle-43.png",
+ cardHead:"Los Angeles Institute",
+ cardPara:"Street Food Convention will showcase products like Packed food, beef and lamb, street food."
+ },
+ { img:"https://i.ibb.co/VJCmpYk/Rectangle-44.png",
+ cardHead:"Los Angeles Institute",
+ cardPara:"Street Food Convention will showcase products like Packed food, beef and lamb, street food."
+ },
+ ]
+}
+
diff --git a/src/components/BlogGridComponentThemeFive/index.js b/src/components/BlogGridComponentThemeFive/index.js
new file mode 100644
index 00000000..a2f8881f
--- /dev/null
+++ b/src/components/BlogGridComponentThemeFive/index.js
@@ -0,0 +1,85 @@
+import React from 'react'
+import PropTypes from "prop-types"
+import "./styles.sass"
+import { Container } from 'react-bootstrap'
+
+export const BlogGridThemeFive = ({ heading, cardItems }) => {
+ return (
+
+
+
+
{heading}
+
+
+
+
+
+
+
+
+
+
{cardItems[0].cardHead}
+
{cardItems[0].cardPara}
+
+
+
+
+
+
+
+
+
+
{cardItems[1].cardHead}
+
{cardItems[1].cardPara}
+
+
+
+
+
+
+
+
+
{cardItems[2].cardHead}
+
{cardItems[2].cardPara}
+
+
+
+
+
+
+
+
+