diff --git a/Certified_Full_Stack_Developer/CSS/design_blog_post_card/index.html b/Certified_Full_Stack_Developer/CSS/design_blog_post_card/index.html
index 7a40f3e..e018624 100644
--- a/Certified_Full_Stack_Developer/CSS/design_blog_post_card/index.html
+++ b/Certified_Full_Stack_Developer/CSS/design_blog_post_card/index.html
@@ -8,7 +8,12 @@
 </head>
 <body>
     <div class="blog-post-card">
-
+        <img class="post-img" src="https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg" alt="person typing on a laptop">
+        <div class="post-content">
+            <h2 class="post-title">setting up wazuh</h2>
+            <p class="post-excerpt">A guide on how to setup wazuh</p>
+            <a class="read-more">Read More</a>
+        </div>
     </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/Certified_Full_Stack_Developer/CSS/design_blog_post_card/styles.css b/Certified_Full_Stack_Developer/CSS/design_blog_post_card/styles.css
index f1a569c..a8019e1 100644
--- a/Certified_Full_Stack_Developer/CSS/design_blog_post_card/styles.css
+++ b/Certified_Full_Stack_Developer/CSS/design_blog_post_card/styles.css
@@ -1,3 +1,38 @@
 .blog-post-card {
-    
+    background-color: white;
+    border-radius: 25px;
+    width: 50%;
+    text-align: center;
+}
+
+.post-img {
+    width: 100%;
+    border-bottom: 10px solid red;
+}
+
+.post-content {
+    padding: 10px;
+}
+
+.post-title {
+    color: red;
+    margins: 10px;
+}
+
+.post-excerpt {
+    color: red;
+    margins: 10px;
+}
+
+.read-more {
+    color: blue;
+    background-color: grey;
+    margin: 10px;
+    padding: 10px;
+    border-radius: 25px;
+    display: inline-block;
+}
+
+.read-more:hover {
+    background-color: black;
 }
\ No newline at end of file
