diff --git a/packages/ui/.storybook/main.js b/packages/ui/.storybook/main.js
index 4629a530..a85880a6 100644
--- a/packages/ui/.storybook/main.js
+++ b/packages/ui/.storybook/main.js
@@ -1,4 +1,4 @@
-import {dirname, join} from 'path'
+const { dirname, join } = require('path')
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -25,10 +25,27 @@ const config = {
     name: getAbsolutePath('@storybook/react-vite'),
     options: {},
   },
-  // viteFinal: async (config) => {
-  //   config.css = config.css || {}
-  //   config.css.postcss = require('../../../apps/web/postcss.config.js')
-  //   return config
-  // },
+  // Add the following configuration to support SVGs
+  viteFinal: async (config) => {
+    // Ensure plugins array is initialized
+    if (!config.plugins) {
+      config.plugins = [];
+    }
+
+    config.plugins.push({
+      name: 'svgr',
+      transform: (code, id) => {
+        if (/\.svg$/.test(id)) {
+          return {
+            code: `import { ReactComponent as Icon } from '${id}'; export default Icon;`,
+            map: null,
+          };
+        }
+        return null;
+      },
+    });
+    return config;
+  },
 }
+
 export default config
diff --git a/packages/ui/domain-components/ConnectionCard.tsx b/packages/ui/domain-components/ConnectionCard.tsx
new file mode 100644
index 00000000..a3ad6490
--- /dev/null
+++ b/packages/ui/domain-components/ConnectionCard.tsx
@@ -0,0 +1,38 @@
+import { useState } from 'react'
+import {
+  Card,
+  CardContent,
+} from '../shadcn'
+import { Plus } from 'lucide-react'
+
+export function ConnectionCard({
+  logo,
+  name,
+}: {
+  logo: string
+  name: string
+}) {
+  const [isHovered, setIsHovered] = useState(false)
+
+  return (
+    <Card
+      className="w-[120px] h-[120px] p-0 relative cursor-pointer border border-gray-300 rounded-lg bg-white transition-colors duration-300 ease-in-out hover:bg-[#F8F7FF] hover:border-[#8A7DFF]"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <CardContent className="flex flex-col justify-center items-center h-full pt-6">
+        {isHovered ? (
+          <div className="flex flex-col justify-center items-center h-full">
+            <Plus color="#8A7DFF" size={24} />
+            <span className="text-[#8A7DFF] font-semibold text-[14px] font-sans mt-2">Add</span> {/* Set to 14px and semibold */}
+          </div>
+        ) : (
+          <div className="flex flex-col justify-center items-center h-full">
+            <img src={logo} alt={`${name} logo`} className="w-8 h-8" style={{ marginBottom: '10px' }} /> {/* 32x32 logo with 10px padding */}
+            <p className="m-0 text-sm font-semibold font-sans text-center mb-2">{name}</p> {/* Changed to font-semibold */}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/packages/ui/shadcn/AlertDialog.tsx b/packages/ui/shadcn/AlertDialog.tsx
index 75f542ef..3d8e1a66 100644
--- a/packages/ui/shadcn/AlertDialog.tsx
+++ b/packages/ui/shadcn/AlertDialog.tsx
@@ -3,7 +3,7 @@
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
 import * as React from 'react'
 
-import {cn} from '@/lib-client/ui-utils'
+import {cn} from '../utils'
 
 import {buttonVariants} from './Button'
 
diff --git a/packages/ui/shadcn/Checkbox.tsx b/packages/ui/shadcn/Checkbox.tsx
index a986399f..d2fb8bff 100644
--- a/packages/ui/shadcn/Checkbox.tsx
+++ b/packages/ui/shadcn/Checkbox.tsx
@@ -4,7 +4,7 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import {Check} from 'lucide-react'
 import * as React from 'react'
 
-import {cn} from '@/lib-client/ui-utils'
+import {cn} from '../utils'
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
diff --git a/packages/ui/shadcn/Table.tsx b/packages/ui/shadcn/Table.tsx
index ae522dc5..b7d60978 100644
--- a/packages/ui/shadcn/Table.tsx
+++ b/packages/ui/shadcn/Table.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import {cn} from '@/lib-client/ui-utils'
+import {cn} from '../utils'
 
 const Table = React.forwardRef<
   HTMLTableElement,
diff --git a/packages/ui/stories/ConnectionCard.stories.js b/packages/ui/stories/ConnectionCard.stories.js
new file mode 100644
index 00000000..6e551016
--- /dev/null
+++ b/packages/ui/stories/ConnectionCard.stories.js
@@ -0,0 +1,25 @@
+import {fn} from '@storybook/test'
+import {ConnectionCard} from '../domain-components/ConnectionCard'
+import logoGreenhouse from '../../../apps/web/public/_assets/logo-greenhouse.svg';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+export default {
+  title: 'Example/ConnectionCard',
+  component: ConnectionCard,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: {control: 'color'},
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: {onClick: fn()},
+}
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+  args: { logo: logoGreenhouse, name: 'Greenhouse' },
+};