diff --git a/components/blogpost.tsx b/components/blogpost.tsx
index 1bc9722..13939db 100644
--- a/components/blogpost.tsx
+++ b/components/blogpost.tsx
@@ -1,5 +1,8 @@
 'use client';
 
+import tagsPic from '../public/tags.svg';
+import calendarPic from '../public/calendar.svg'
+
 import AnimatedLink from '../components/animatedLink';
 import Image from 'next/image';
 
@@ -16,10 +19,10 @@ interface BlogAreaProps {
 
 export default function BlogArea({ blogposts }: BlogAreaProps) {
     return (
-        <div className="blog-area py-16 border-t border-white w-full">
+        <div className="blog-area pt-16 pb-8 border-t border-white w-full">
             <div className="blogposts">
                 {blogposts.map((blogpost, index) => (
-                    <div key={index} className="blogpost flex flex-row overflow-hidden mb-8">
+                    <div key={index} className="blogpost flex flex-row overflow-hidden mb-14">
                         <div className="left mr-5">
                             <div className="blogpost-image">
                                 <Image
@@ -39,18 +42,21 @@ export default function BlogArea({ blogposts }: BlogAreaProps) {
                                     </AnimatedLink>
                                 </h2>
                             </div>
-                            <ul className="blogpost-tags flex flex-row space-x-4 mb-4">
-                                <li className="tag bg-gray-800 px-4 py-2 rounded-full text-2xl">Games</li>
-                                <li className="tag bg-gray-800 px-4 py-2 rounded-full text-2xl">Science</li>
+                            <ul className="blogpost-tags inline-flex items-center flex-row space-x-4 mb-4">
+                                <li className="tag inline px-2 py-1 rounded-full"><Image src={tagsPic} alt="lang" width={24} height={24} className='inline-flex justify-baseline filter brightness-0 invert' /></li>
+                                <li className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base">Games</li>
+                                <li className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base">Science</li>
                             </ul>
                             <div className="blogpost-description text-base mb-4">
                                 {blogpost.body.slice(0, 512)}...
                             </div>
                             <div className="blogpost-other flex flex-row justify-between items-end mt-auto">
-                                <div className="text-base">
-                                    <p>Posted: {blogpost.publish}</p>
-                                </div>
-                                <div className="text-2xl">
+                                <ul className="text-base inline-flex justify-end items-center">
+                                    <li className="inline px-2 py-1"><Image src={calendarPic} alt="lang" width={24} height={24} className="filter brightness-0 invert"/></li>
+                                    <li className="inline"><p className='inline mx-2'>{blogpost.publish}</p></li>
+                                </ul>
+
+                                <div className="text-xl">
                                     <AnimatedLink href={blogpost.get_absolute_url}>
                                         Read the article
                                     </AnimatedLink>
diff --git a/public/calendar.svg b/public/calendar.svg
new file mode 100644
index 0000000..c002b85
--- /dev/null
+++ b/public/calendar.svg
@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+  <line x1="16" y1="2" x2="16" y2="6" />
+  <line x1="8" y1="2" x2="8" y2="6" />
+  <line x1="3" y1="10" x2="21" y2="10" />
+</svg>
diff --git a/public/tags.svg b/public/tags.svg
new file mode 100644
index 0000000..49c8817
--- /dev/null
+++ b/public/tags.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path fill="var(--ci-primary-color, currentColor)" d="M511.974,271.891a47.744,47.744,0,0,0-14.706-33.008L311.57,57.98a29.9,29.9,0,0,0-21.2-8.731H257.228l217.754,212.6.092.088a15.907,15.907,0,0,1,.741,22.337l-156.4,173.355,21.953,21.356L499.447,305.85A47.748,47.748,0,0,0,511.974,271.891Z" class="ci-primary"/>
+  <path fill="var(--ci-primary-color, currentColor)" d="M426.9,283.161a23.924,23.924,0,0,0-5.231-24.742c-.106-.111-.2-.231-.306-.34L224.307,57.716l-.094-.094a31.791,31.791,0,0,0-22.628-9.373H60.194A44.244,44.244,0,0,0,16,92.443v141.1a32.121,32.121,0,0,0,10.045,23.28l210.32,200.2.077.073a23.817,23.817,0,0,0,16.409,6.508q.447,0,.9-.017a24.111,24.111,0,0,0,6.741-1.217,23.854,23.854,0,0,0,10.047-6.517L421.983,291.232A24.033,24.033,0,0,0,426.9,283.161ZM252.5,428.2,48.077,233.612,48,233.54V92.443A12.208,12.208,0,0,1,60.194,80.249h141.39l191.7,194.918Z" class="ci-primary"/>
+  <path fill="var(--ci-primary-color, currentColor)" d="M140,112a52,52,0,1,0,52,52A52.059,52.059,0,0,0,140,112Zm0,72a20,20,0,1,1,20-20A20.023,20.023,0,0,1,140,184Z" class="ci-primary"/>
+</svg>