diff --git a/src/components/blogCard.astro b/src/components/blogCard.astro
index e943915..8368567 100644
--- a/src/components/blogCard.astro
+++ b/src/components/blogCard.astro
@@ -16,6 +16,7 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
 ---
 
 <a href={url} rel="noopener noreferrer">
+  <div class="circle"></div>
   <article>
     <h2>{title}</h2>
     <h3>{date}</h3>
@@ -24,7 +25,38 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
 </a>
 
 <style>
+  .circle {
+    display: none;
+  }
+  @media (min-width: 900px) {
+    .circle {
+      margin: 1rem 1rem 1rem 0rem;
+      position: relative;
+      display: flex;
+      visibility: visible;
+      height: 1.5rem;
+      width: 1.5rem;
+      border-radius: 50%;
+      background-color: var(--c-darkpurple);
+    }
+
+    a:hover > .circle {
+      translate: -3px 0%;
+      border-radius: 50% 0% 0% 50%;
+      transform: none;
+    }
+  }
+
+  @media (min-width: 1200px) {
+    a:hover > .circle {
+      translate: 0px 0%;
+      transform: none;
+    }
+  }
+
   a {
+    align-items: center;
+    justify-content: center;
     display: flex;
     text-decoration: none;
     height: auto;
diff --git a/src/layouts/blogSection.astro b/src/layouts/blogSection.astro
index 47b6a84..92b9b9a 100644
--- a/src/layouts/blogSection.astro
+++ b/src/layouts/blogSection.astro
@@ -67,7 +67,13 @@ const { title } = Astro.props
     font-size: 1em;
     position: relative;
   }
-  @media (min-width: 512px) {
+  @media (min-width: 900px) {
+    .drop {
+      margin-left: 1.5rem;
+    }
+    .line {
+      margin-left: 2.1rem;
+    }
   }
   @media (min-width: 1500px) {
     .wrapper {