diff --git a/src/app/(frontend)/globals.css b/src/app/(frontend)/globals.css
index 014ec1e..dee4ea2 100644
--- a/src/app/(frontend)/globals.css
+++ b/src/app/(frontend)/globals.css
@@ -222,3 +222,19 @@ html[data-theme='dark'],
 html[data-theme='light'] {
   opacity: initial;
 }
+
+/* Add this class to your column div */
+.column-with-connector {
+  position: relative;
+}
+
+@media (min-width: 1024px) {
+  .column-with-connector::after {
+    content: "→";
+    position: absolute;
+    right: -24px;
+    top: 50%;
+    color: rgba(var(--foreground), 0.2);
+    font-size: 24px;
+  }
+}
\ No newline at end of file
diff --git a/src/blocks/KanbanColor/Component.tsx b/src/blocks/KanbanColor/Component.tsx
index 83f45fb..9361cf8 100644
--- a/src/blocks/KanbanColor/Component.tsx
+++ b/src/blocks/KanbanColor/Component.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import React from 'react'
-import { Container } from '@/components/ui/Container' // Ensure this path is correct
+import { Container } from '@/components/ui/Container'
 
 const colorMap: Record<string, { border: string; dot: string }> = {
   gray: { border: 'border-t-[#888780]', dot: 'bg-[#888780]' },
@@ -21,15 +21,16 @@ export function KanbanColorBlock({ columns }: Props) {
   if (!Array.isArray(columns) || columns.length === 0) return null
 
   return (
-    // Replaced hardcoded max-w-5xl and section with the unified Container
     <Container className="py-12 md:py-24">
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
         {columns.map((col, i) => {
           const { border, dot } = colorMap[col.color ?? 'gray'] ?? colorMap.gray
+
           return (
             <div
               key={i}
-              className={`bg-muted/50 rounded-2xl p-6 flex flex-col gap-4 border-t-[3px] ${border}`}
+              // Added your custom class for the horizontal arrow
+              className={`column-with-connector bg-muted/50 rounded-2xl p-6 flex flex-col gap-4 border-t-[3px] ${border}`}
             >
               <div className="flex items-center gap-2 mb-2">
                 <span className={`w-2 h-2 rounded-full shrink-0 ${dot}`} />
@@ -37,18 +38,35 @@ export function KanbanColorBlock({ columns }: Props) {
                   {col.title}
                 </span>
               </div>
-              {Array.isArray(col.cards) &&
-                col.cards.map((card, j) => (
-                  <div
-                    key={j}
-                    className="bg-background/70 border border-foreground/5 rounded-xl px-4 py-3 flex flex-col gap-1"
-                  >
-                    <p className="text-sm font-medium text-foreground/80">{card.title}</p>
-                    {card.subtitle && (
-                      <p className="text-[11px] text-foreground/40">{card.subtitle}</p>
+
+              <div className="flex flex-col gap-3">
+                {col.cards?.map((card, j) => (
+                  <React.Fragment key={j}>
+                    <div className="bg-background/70 border border-foreground/5 rounded-xl px-4 py-3 flex flex-col gap-1">
+                      <p className="text-sm font-medium text-foreground/80">{card.title}</p>
+                      {card.subtitle && (
+                        <p className="text-[11px] text-foreground/40">{card.subtitle}</p>
+                      )}
+                    </div>
+
+                    {/* Vertical Connector Arrow */}
+                    {j < (col.cards?.length || 0) - 1 && (
+                      <div className="flex justify-center text-foreground/20">
+                        <svg
+                          width="16"
+                          height="16"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                        >
+                          <path d="M12 5v14M19 12l-7 7-7-7" />
+                        </svg>
+                      </div>
                     )}
-                  </div>
+                  </React.Fragment>
                 ))}
+              </div>
             </div>
           )
         })}