diff --git a/pages/src/components/Card.tsx b/pages/src/components/Card.tsx
index 2c6ed1b..1982e36 100644
--- a/pages/src/components/Card.tsx
+++ b/pages/src/components/Card.tsx
@@ -103,6 +103,7 @@ export default function Card({ id, href, frontmatter, secHeading = true, body, p
           
         </div>
       }
+    <hr className="my-4 border-skin-lightline" />
     </li>
   );
 }
diff --git a/pages/src/styles/base.css b/pages/src/styles/base.css
index 6efa219..cf8becb 100644
--- a/pages/src/styles/base.css
+++ b/pages/src/styles/base.css
@@ -11,6 +11,7 @@
     --color-card: 230, 230, 230;
     --color-card-muted: 205, 205, 205;
     --color-border: 236, 233, 233;
+    --color-border-light: 236, 233, 233;
   }
   html[data-theme="dark"] {
     --color-fill: 33, 39, 55;
@@ -19,6 +20,7 @@
     --color-card: 52, 63, 96;
     --color-card-muted: 138, 51, 2;
     --color-border: 171, 75, 8;
+    --color-border-light: 63, 61, 60;
   }
   #sun-svg,
   html[data-theme="dark"] #moon-svg {
diff --git a/pages/tailwind.config.cjs b/pages/tailwind.config.cjs
index ff1f1cb..50ed47d 100644
--- a/pages/tailwind.config.cjs
+++ b/pages/tailwind.config.cjs
@@ -42,6 +42,7 @@ module.exports = {
       borderColor: {
         skin: {
           line: withOpacity("--color-border"),
+          lightline: withOpacity("--color-border-light"),
           fill: withOpacity("--color-text-base"),
           accent: withOpacity("--color-accent"),
         },