diff --git a/src/app/components/ConnectorPath/index.tsx b/src/app/components/ConnectorPath/index.tsx
index 8a524597f9..228ba097a7 100644
--- a/src/app/components/ConnectorPath/index.tsx
+++ b/src/app/components/ConnectorPath/index.tsx
@@ -9,9 +9,11 @@ type Props = {
 function ConnectorPath({ title, icon, description, content, actions }: Props) {
   return (
     <div className="flex flex-col p-10 border border-neutral-200 dark:border-neutral-700 rounded-2xl bg-white dark:bg-surface-02dp">
-      <div className="flex flex-row items-center mb-4 space-x-3">
+      <div className="flex flex-col sm:flex-row items-center mb-4 space-x-3">
         {icon}
-        <h1 className="text-xl font-bold dark:text-white">{title}</h1>
+        <h1 className="text-xl font-bold dark:text-white text-center">
+          {title}
+        </h1>
       </div>
       <p className="text-gray-800 dark:text-neutral-200 mb-6">{description}</p>
       <div className="flex flex-col space-y-4 text-sm mb-8 dark:text-white">