diff --git a/src/components/Resources/Blogs/Blog.css b/src/components/Resources/Blogs/Blog.css
new file mode 100644
index 00000000..8977c49e
--- /dev/null
+++ b/src/components/Resources/Blogs/Blog.css
@@ -0,0 +1,52 @@
+.blogs__container{
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+    text-align: left;
+    height: 100%;
+    width: 400px;
+    border-radius: 10px;
+    background-color: #0d1117;
+    margin: 20px 1%;
+    padding: 15px 20px;
+}
+.blogs__container__title{
+    margin: 10px 0;
+    padding: 10px 0;
+}
+.blogs__container__title h1{
+    font-size: 1.8rem;
+    font-weight: 600;
+}
+.blogs__container__title h6{
+    font-size: 0.9rem;
+    font-weight: 400;
+}
+.tags{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    margin: 10px 0;
+    padding: 10px 0;
+}
+.tag{
+    margin: 0 5px;
+    padding: 10 15px;
+    border-radius: 5px;
+    background-color: #1f6feb;
+    color: #fff;
+    font-size: 0.8rem;
+    font-weight: 400;
+}
+.AllBlogs{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+}
+.blogImg{
+    margin-bottom: 9px;
+}
\ No newline at end of file
diff --git a/src/components/Resources/Blogs/Blogs.jsx b/src/components/Resources/Blogs/Blogs.jsx
index 67d2047d..8ab85eb2 100644
--- a/src/components/Resources/Blogs/Blogs.jsx
+++ b/src/components/Resources/Blogs/Blogs.jsx
@@ -1,12 +1,29 @@
-import React from 'react';
-import {Section} from "../WriteUps/WriteUpsElements";
+import React from "react";
+import { Section } from "../WriteUps/WriteUpsElements";
+import BlogsElements from "./BlogsElements";
+import "./Blog.css";
+
+// probably recieved by a api call
+const blogs = {
+  title: "Lorem, ipsum",
+  author: "Dean A.",
+  date: "1st October 2022",
+  content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex molestias nam, iure hic, sunt totam, eaque corporis inventore mollitia nemo saepe eligendi cumque numquam dolor placeat architecto pariatur fugiat accusantium!\nLorem ipsum dolor sit, amet consectetur adipisicing elit. Earum, cum perspiciatis pariatur facere soluta consectetur rerum aut ex quas deserunt inventore, dignissimos dicta blanditiis? Adipisci incidunt odio eaque nobis earum sit! Sequi, ducimus debitis. Commodi officiis vel quae sequi aspernatur iusto reprehenderit repellendus autem architecto!",
+  tags: ["coding", "gaming"]
+}
 
 const Blogs = () => {
-    return (
-        <Section>
-            <h1> Blogs </h1>
-        </Section>
-    );
+  return (
+    <Section>
+      <h1> All Blogs </h1>
+      <div className="AllBlogs">
+        <BlogsElements title={blogs.title} author={blogs.author} date={blogs.date} content={blogs.content} tags={blogs.tags}/>
+        <BlogsElements title={blogs.title} author={blogs.author} date={blogs.date} content={blogs.content} tags={blogs.tags}/>
+        <BlogsElements title={blogs.title} author={blogs.author} date={blogs.date} content={blogs.content} tags={blogs.tags}/>
+        <BlogsElements title={blogs.title} author={blogs.author} date={blogs.date} content={blogs.content} tags={blogs.tags}/>
+      </div>
+    </Section>
+  );
 };
 
-export default Blogs;
\ No newline at end of file
+export default Blogs;
diff --git a/src/components/Resources/Blogs/BlogsElements.jsx b/src/components/Resources/Blogs/BlogsElements.jsx
index e69de29b..6bc85800 100644
--- a/src/components/Resources/Blogs/BlogsElements.jsx
+++ b/src/components/Resources/Blogs/BlogsElements.jsx
@@ -0,0 +1,29 @@
+import React from "react";
+import "./Blog.css";
+import image from "./img.jpg";
+// const image = require('./img.jpg');
+
+const BlogsElements = (props) => {
+  return (
+    <>
+      <div className="blogs__container">
+        <div className="blogs__container__title">
+          <img className="blogImg" src={image} alt="Blog Image" width="360px" height="180px" />
+          <h2>{props.title}</h2>
+          <h6>
+            {props.author} | {props.date}
+          </h6>
+        </div>
+        <div className="blogs__container__content">{props.content.slice(0, 200)}{props.content.length>200?"...":""}</div>
+        <div className="tags">
+          tags:
+          {props.tags.map((tag) => (
+            <div className="tag">{tag}</div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default BlogsElements;
diff --git a/src/components/Resources/Blogs/img.jpg b/src/components/Resources/Blogs/img.jpg
new file mode 100644
index 00000000..a537cf76
Binary files /dev/null and b/src/components/Resources/Blogs/img.jpg differ