diff --git a/apps/web/app/connect/AddConnection.client.tsx b/apps/web/app/connect/AddConnection.client.tsx
index b2c024e92..35c77692a 100644
--- a/apps/web/app/connect/AddConnection.client.tsx
+++ b/apps/web/app/connect/AddConnection.client.tsx
@@ -1,11 +1,22 @@
 'use client'
 
+import type {ReactElement} from 'react'
 import type {ConnectorConfig} from '@openint/api-v1/trpc/routers/connectorConfig.models'
 import type {Id} from '@openint/cdk'
 
+import {SearchIcon} from 'lucide-react'
+import {useState} from 'react'
 import {type ConnectorName} from '@openint/api-v1/trpc/routers/connector.models'
-import {Label} from '@openint/shadcn/ui'
-import {ConnectorConfigCard} from '@openint/ui-v1/domain-components/ConnectorConfigCard'
+import {cn} from '@openint/shadcn/lib/utils'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  Input,
+} from '@openint/shadcn/ui'
+import {ConnectorDisplay} from '@openint/ui-v1/domain-components/ConnectorDisplay'
+import {useMutableSearchParams} from '@openint/ui-v1/hooks/useStateFromSearchParam'
 import {ConnectorConnectContainer} from './ConnectorConnect.client'
 
 export type ConnectorConfigForCustomer = Pick<
@@ -13,6 +24,116 @@ export type ConnectorConfigForCustomer = Pick<
   'id' | 'connector_name' | 'connector'
 >
 
+export type AddConnectionPrefetchedCard = {
+  connectorName: ConnectorName
+  connectorDisplayName?: string
+  card: ReactElement
+}
+
+export function AddConnectionClient({
+  cards,
+  className,
+}: {
+  cards: AddConnectionPrefetchedCard[]
+  className?: string
+}) {
+  const [isOpen, setIsOpen] = useState(true)
+  const [_, setSearchParams] = useMutableSearchParams()
+
+  const onClose = () => {
+    setIsOpen(false)
+    setSearchParams({view: 'manage'}, {shallow: false})
+  }
+  const [searchQuery, setSearchQuery] = useState('')
+  const [isFocused, setIsFocused] = useState(false)
+
+  const filteredCards = cards.filter((card) => {
+    const searchLower = searchQuery.toLowerCase()
+    return (
+      card.connectorName.toLowerCase().includes(searchLower) ||
+      card.connectorDisplayName?.toLowerCase().includes(searchLower)
+    )
+  })
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      {/* TODO: consider making full screen horizontal on mobile https://github.com/radix-ui/themes/issues/142 */}
+      <DialogContent
+        className={cn(
+          'flex h-[85vh] max-h-[600px] max-w-2xl flex-col gap-0 overflow-hidden p-0 shadow-xl',
+          className,
+        )}>
+        <DialogHeader className="bg-foreground/5 flex-shrink-0 border-b px-6 py-4">
+          <DialogTitle className="text-md">Add Integrations</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-1 flex-col overflow-hidden">
+          <div
+            className={cn(
+              'bg-background sticky top-0 z-10 flex-shrink-0 transition-all duration-200',
+              'border-b border-b-transparent',
+              isFocused ? 'border-b-gray-100 shadow-sm' : '',
+            )}>
+            <div className="p-6 pb-3">
+              <div className="relative">
+                <SearchIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 transform text-gray-500" />
+                <Input
+                  placeholder="Search integrations"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="border-gray-200 bg-gray-50/50 pl-10 transition-all duration-200 focus:bg-white focus:shadow-sm"
+                  onFocus={() => setIsFocused(true)}
+                  onBlur={() => setIsFocused(false)}
+                />
+              </div>
+            </div>
+          </div>
+
+          <div
+            className="relative flex-1 overflow-y-auto"
+            onScroll={(e) => {
+              const scrollTop = e.currentTarget.scrollTop
+              const shouldBeFocused = scrollTop > 5
+              if (shouldBeFocused !== isFocused) {
+                setIsFocused(shouldBeFocused)
+              }
+            }}>
+            {/* Mobile view */}
+            <div className="p-6 pt-3 md:hidden">
+              {filteredCards.map((card, index) => (
+                <div key={`${card.connectorName}-${index}`}>
+                  {card.card}
+                  {index < filteredCards.length - 1 && (
+                    <div className="my-1 h-px bg-gray-100" />
+                  )}
+                </div>
+              ))}
+            </div>
+
+            {/* Desktop view: Grid layout */}
+            <div className="hidden p-6 pt-3 md:grid md:grid-cols-2 md:gap-4">
+              {filteredCards.map((card, index) => (
+                <div
+                  key={`${card.connectorName}-${index}`}
+                  className="transition-transform duration-100 hover:scale-[1.01]">
+                  {card.card}
+                </div>
+              ))}
+            </div>
+
+            {filteredCards.length === 0 && (
+              <div className="col-span-2 py-16 text-center text-gray-500">
+                No integrations found matching{' '}
+                {searchQuery ? `"${searchQuery}"` : 'your search'}
+              </div>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
 export function AddConnectionCard({
   connectorConfig,
 }: {
@@ -25,20 +146,49 @@ export function AddConnectionCard({
       connector={connectorConfig.connector!}
       connectorConfigId={connectorConfig.id as Id['ccfg']}>
       {({isConnecting, handleConnect}) => (
-        <ConnectorConfigCard
-          displayNameLocation="right"
-          // TODO: fix this
-          connectorConfig={connectorConfig as ConnectorConfig<'connector'>}
-          onPress={() => {
-            if (isConnecting) {
-              return
-            }
-            handleConnect()
-          }}>
-          <Label className="text-muted-foreground pointer-events-none ml-auto text-sm">
-            {isConnecting ? 'Connecting...' : 'Connect'}
-          </Label>
-        </ConnectorConfigCard>
+        <>
+          {/* NOTE/TODO: note sure how to remove duplication, 
+           its there as we're using tailwind for consistent breakpoints with AddConnectionClient */}
+          {/* Mobile view (visible below md breakpoint) */}
+          <div className="md:hidden">
+            <ConnectorDisplay
+              connector={connectorConfig.connector!}
+              className={cn(
+                'transition-transform duration-100',
+                !isConnecting && 'hover:scale-[1.01]',
+                isConnecting && 'cursor-not-allowed opacity-70',
+              )}
+              displayBadges={false}
+              mode="row"
+              onPress={() => {
+                if (isConnecting) {
+                  return
+                }
+                handleConnect()
+              }}
+            />
+          </div>
+
+          {/* Desktop view (visible at md breakpoint and above) */}
+          <div className="hidden md:block">
+            <ConnectorDisplay
+              connector={connectorConfig.connector!}
+              className={cn(
+                'transition-transform duration-100',
+                !isConnecting && 'hover:scale-[1.01]',
+                isConnecting && 'cursor-not-allowed opacity-70',
+              )}
+              displayBadges={false}
+              mode="card"
+              onPress={() => {
+                if (isConnecting) {
+                  return
+                }
+                handleConnect()
+              }}
+            />
+          </div>
+        </>
       )}
     </ConnectorConnectContainer>
   )
diff --git a/apps/web/app/connect/MyConnections.client.tsx b/apps/web/app/connect/MyConnections.client.tsx
index f2a33cae1..548c22588 100644
--- a/apps/web/app/connect/MyConnections.client.tsx
+++ b/apps/web/app/connect/MyConnections.client.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import {useSuspenseQuery} from '@tanstack/react-query'
+import {Link} from 'lucide-react'
 import React from 'react'
 import {type ConnectorName} from '@openint/api-v1/trpc/routers/connector.models'
 import {Id} from '@openint/cdk'
@@ -9,7 +10,7 @@ import {
   CommandPopover,
   ConnectionStatusPill,
   DataTileView,
-  Spinner,
+  LoadingSpinner,
   useMutableSearchParams,
 } from '@openint/ui-v1'
 import {ConnectionCard} from '@openint/ui-v1/domain-components/ConnectionCard'
@@ -41,75 +42,106 @@ export function MyConnectionsClient(props: {
   const definitions = useCommandDefinitionMap()
 
   if (isLoading) {
-    return (
-      <div className="flex min-h-[200px] items-center justify-center">
-        <Spinner />
-      </div>
-    )
+    return <LoadingSpinner />
   }
 
   if (!res.data?.items?.length || res.data.items.length === 0) {
     return (
-      <div className="flex flex-col items-center gap-4 py-8 text-center">
-        <p className="text-muted-foreground">
-          You have no configured integrations.
-        </p>
+      <div className="flex min-h-[200px] flex-col items-center justify-center gap-6 py-12">
+        <div className="flex flex-col items-center gap-4 text-center">
+          <div className="bg-primary/10 rounded-full p-4">
+            <Link className="text-primary h-8 w-8" />
+          </div>
+          <h3 className="text-xl font-semibold">
+            Let&apos;s Get You Connected
+          </h3>
+          <p className="text-muted-foreground">
+            You have not configured any integrations yet. Connect your first app
+            to get started.
+          </p>
+        </div>
         <Button
-          variant="default"
-          onClick={() => setSearchParams({view: 'add'}, {shallow: true})}>
-          Add your first integration
+          size="lg"
+          className="font-medium"
+          onClick={() => {
+            setIsLoading(true)
+            setSearchParams({view: 'add'}, {shallow: false})
+          }}
+          disabled={isLoading}>
+          Add First Integration
         </Button>
       </div>
     )
   }
 
   return (
-    <DataTileView
-      data={res.data.items}
-      columns={[]}
-      getItemId={(conn) => conn.id}
-      renderItem={(conn) => {
-        const renderCard = ({handleConnect}: {handleConnect?: () => void}) => (
-          <ConnectionCard
-            connection={conn}
-            className="relative"
-            onReconnect={handleConnect}>
-            <CommandPopover
-              className="absolute right-2 top-2"
-              hideGroupHeadings
-              initialParams={{
-                connection_id: conn.id,
-              }}
-              ctx={{}}
-              definitions={definitions}
-              header={
-                <>
-                  <div className="flex items-center justify-center gap-1 text-center">
-                    <ConnectionStatusPill status={conn.status} />
-                    <span className="text-muted-foreground text-xs">
-                      ({timeSince(conn.updated_at)})
-                    </span>
-                  </div>
-                </>
-              }
-            />
-          </ConnectionCard>
-        )
+    <>
+      <div className="flex flex-col items-start justify-between sm:flex-row sm:items-center">
+        <h1 className="text-xl font-bold">My Integrations</h1>
+        <Button
+          size="lg"
+          onClick={() => {
+            setIsLoading(true)
+            setSearchParams({view: 'add'}, {shallow: false})
+          }}
+          disabled={isLoading}>
+          Add Integration
+        </Button>
+      </div>
+
+      <div className="mt-4"></div>
+      <DataTileView
+        data={res.data.items}
+        columns={[]}
+        className="grid grid-cols-1 gap-6 sm:grid-cols-3 md:grid-cols-4"
+        getItemId={(conn) => conn.id}
+        renderItem={(conn) => {
+          const renderCard = ({
+            handleConnect,
+          }: {
+            handleConnect?: () => void
+          }) => (
+            <ConnectionCard
+              connection={conn}
+              className="relative"
+              onReconnect={handleConnect}>
+              <CommandPopover
+                className="absolute right-2 top-2"
+                hideGroupHeadings
+                initialParams={{
+                  connection_id: conn.id,
+                }}
+                ctx={{}}
+                definitions={definitions}
+                header={
+                  <>
+                    <div className="flex items-center justify-center gap-1 text-center">
+                      <ConnectionStatusPill status={conn.status} />
+                      <span className="text-muted-foreground text-xs">
+                        ({timeSince(conn.updated_at)})
+                      </span>
+                    </div>
+                  </>
+                }
+              />
+            </ConnectionCard>
+          )
 
-        if (conn.status !== 'disconnected') {
-          return renderCard({handleConnect: undefined})
-        }
+          if (conn.status !== 'disconnected') {
+            return renderCard({handleConnect: undefined})
+          }
 
-        return (
-          <ConnectorConnectContainer
-            connectorName={conn.connector_name as ConnectorName}
-            connector={{auth_type: 'OAUTH2'} as any}
-            connectorConfigId={conn.connector_config_id as Id['ccfg']}
-            connectionId={conn.id as Id['conn']}>
-            {renderCard}
-          </ConnectorConnectContainer>
-        )
-      }}
-    />
+          return (
+            <ConnectorConnectContainer
+              connectorName={conn.connector_name as ConnectorName}
+              connector={{auth_type: 'OAUTH2'} as any}
+              connectorConfigId={conn.connector_config_id as Id['ccfg']}
+              connectionId={conn.id as Id['conn']}>
+              {renderCard}
+            </ConnectorConnectContainer>
+          )
+        }}
+      />
+    </>
   )
 }
diff --git a/apps/web/app/connect/page.client.tsx b/apps/web/app/connect/page.client.tsx
deleted file mode 100644
index c53a2c8d0..000000000
--- a/apps/web/app/connect/page.client.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client'
-
-import React from 'react'
-import {Tabs} from '@openint/shadcn/ui'
-import {useStateFromSearchParams} from '@openint/ui-v1'
-
-/**
- * Tabs that automatically sync with search params
- * However this does not work very well so far because it causes the entire server side route to reload
- * which is not actually intentional
- *
- */
-export function TabsClient({
-  paramKey,
-  ...props
-}: Omit<React.ComponentProps<typeof Tabs>, 'value' | 'onValueChange'> & {
-  paramKey: string
-}) {
-  const [value, setValue] = useStateFromSearchParams(paramKey, {
-    defaultValue: props.defaultValue,
-    shallow: true,
-  })
-
-  return <Tabs {...props} value={value} onValueChange={setValue} />
-}
diff --git a/apps/web/app/connect/page.tsx b/apps/web/app/connect/page.tsx
index d0642baec..a601f69d3 100644
--- a/apps/web/app/connect/page.tsx
+++ b/apps/web/app/connect/page.tsx
@@ -21,7 +21,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@openint/shadcn/ui/card'
-import {TabsContent, TabsList, TabsTrigger} from '@openint/shadcn/ui/tabs'
 import {ErrorBoundarySuspense, LoadingSpinner} from '@openint/ui-v1'
 import {GlobalCommandBarProvider} from '@/lib-client/GlobalCommandBarProvider'
 import {TRPCApp} from '@/lib-client/TRPCApp'
@@ -32,11 +31,10 @@ import {
   getServerComponentContext,
   serverComponentContextForViewer,
 } from '@/lib-server/trpc.server'
-import {AddConnectionCard} from './AddConnection.client'
+import {AddConnectionCard, AddConnectionClient} from './AddConnection.client'
 import {ConnectContextProvider} from './ConnectContextProvider'
 import {ConnectOpWrapper} from './ConnectOpWrapper'
 import {MyConnectionsClient} from './MyConnections.client'
-import {TabsClient} from './page.client'
 
 export default async function ConnectPage(
   pageProps: PageProps<
@@ -100,6 +98,8 @@ export default async function ConnectPage(
       .map(([key, value]) => [key, value]),
   )
 
+  const isManage = searchParams.view === 'manage' || !searchParams.view
+
   const viewerConnections = await queryClient.fetchQuery(
     trpc.listConnections.queryOptions({
       connector_names: searchParams.connector_names,
@@ -142,7 +142,7 @@ export default async function ConnectPage(
               <div className="flex min-h-screen w-full">
                 {/* Left Banner - Hidden on mobile and tablets, shown only on lg+ screens */}
                 {!searchParams.is_embedded && (
-                  <div className="bg-primary/10 hidden lg:flex lg:w-[450px]">
+                  <div className="bg-primary/10 mr-4 hidden lg:flex lg:w-[450px]">
                     <div className="flex flex-col items-start p-8">
                       <ErrorBoundarySuspense
                         fallback={
@@ -190,37 +190,22 @@ export default async function ConnectPage(
 
                 {/* Main Content Area - Full width on mobile, flex-1 on larger screens */}
 
-                <TabsClient
-                  defaultValue={
-                    viewerConnections.items.length > 0 ? 'manage' : 'add'
-                  }
-                  paramKey="view"
-                  className="flex-1 p-4 lg:pt-12">
-                  <div className="mx-auto w-full max-w-4xl">
-                    <TabsList className="grid w-full grid-cols-2">
-                      <TabsTrigger value="manage">
-                        Manage Integrations
-                      </TabsTrigger>
-                      <TabsTrigger value="add">Add New Integration</TabsTrigger>
-                    </TabsList>
-                    <TabsContent value="manage" className="pt-6">
-                      <Suspense fallback={<LoadingSpinner />}>
-                        <MyConnectionsClient
-                          connector_names={searchParams.connector_names}
-                        />
-                      </Suspense>
-                    </TabsContent>
-                    <TabsContent value="add" className="pt-6">
-                      <Suspense fallback={<LoadingSpinner />}>
-                        <AddConnections
-                          viewer={viewer}
-                          connector_names={searchParams.connector_names}
-                          existingConnections={viewerConnections.items}
-                        />
-                      </Suspense>
-                    </TabsContent>
+                {/* QQ: should we always load myConnections and just load AddConnections on top given that it's a modal */}
+                <Suspense fallback={<LoadingSpinner />}>
+                  <div className="mx-auto w-full max-w-4xl px-3 pt-14 md:px-4">
+                    {isManage ? (
+                      <MyConnectionsClient
+                        connector_names={searchParams.connector_names}
+                      />
+                    ) : (
+                      <AddConnections
+                        viewer={viewer}
+                        connector_names={searchParams.connector_names}
+                        existingConnections={viewerConnections.items}
+                      />
+                    )}
                   </div>
-                </TabsClient>
+                </Suspense>
               </div>
             </ConnectOpWrapper>
           </ConnectContextProvider>
@@ -301,23 +286,27 @@ async function AddConnections({
   // "You have configured all enabled integrations. If you'd like to enable new ones please contact the {organizationName} support team"
 
   return (
-    <div className="flex flex-col gap-4">
-      <Suspense fallback={<LoadingSpinner />}>
-        {availableToConnect.map((ccfg) => (
-          <AddConnectionCardPrefetch
-            key={ccfg.id}
-            connectorConfig={{
-              // NOTE: Be extremely careful that sensitive data is not exposed here
-              // TODO: Consider using row level security make asOrgIfCustomer unnecessary
-              id: ccfg.id,
-              connector_name: ccfg.connector_name,
-              connector: ccfg.connector,
-            }}
-            viewer={viewer}
-          />
-        ))}
-      </Suspense>
-    </div>
+    <Suspense fallback={<LoadingSpinner />}>
+      <AddConnectionClient
+        cards={availableToConnect.map((ccfg) => ({
+          connectorName: ccfg.connector_name as ConnectorName,
+          connectorDisplayName: ccfg.connector?.display_name,
+          card: (
+            <AddConnectionCardPrefetch
+              key={ccfg.id}
+              connectorConfig={{
+                // NOTE: Be extremely careful that sensitive data is not exposed here
+                // TODO: Consider using row level security make asOrgIfCustomer unnecessary
+                id: ccfg.id,
+                connector_name: ccfg.connector_name,
+                connector: ccfg.connector,
+              }}
+              viewer={viewer}
+            />
+          ),
+        }))}
+      />
+    </Suspense>
   )
 }
 
diff --git a/apps/web/app/console/(authenticated)/connect/page.client.tsx b/apps/web/app/console/(authenticated)/connect/page.client.tsx
index e695d32d1..de96d51cb 100644
--- a/apps/web/app/console/(authenticated)/connect/page.client.tsx
+++ b/apps/web/app/console/(authenticated)/connect/page.client.tsx
@@ -10,7 +10,7 @@ import React from 'react'
 import {connectRouterModels} from '@openint/api-v1/trpc/routers/connect.models'
 import {ConnectButton, ConnectEmbed} from '@openint/connect'
 import {getBaseURLs} from '@openint/env'
-import {Spinner} from '@openint/ui-v1'
+import {LoadingSpinner} from '@openint/ui-v1'
 import {PreviewWindow} from '@openint/ui-v1/components/PreviewWindow'
 import {ZodSchemaForm} from '@openint/ui-v1/components/schema-form'
 import {createURL} from '@openint/util/url-utils'
@@ -114,7 +114,7 @@ export function ConnectEmbedPreview(props: {
       }>
       {tokenRes.status === 'pending' ? (
         <div className="flex h-full w-full flex-col items-center justify-center gap-4">
-          <Spinner />
+          <LoadingSpinner />
         </div>
       ) : tokenRes.status === 'error' ? (
         // TODO: Show a better error message
diff --git a/packages/ui-v1/components/Spinner.tsx b/packages/ui-v1/components/Spinner.tsx
deleted file mode 100644
index cc6c281f1..000000000
--- a/packages/ui-v1/components/Spinner.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import {Loader2} from 'lucide-react'
-
-export function Spinner() {
-  return (
-    <div className="flex h-full w-full items-center justify-center">
-      <Loader2 className="text-button size-7 animate-spin" />
-    </div>
-  )
-}
diff --git a/packages/ui-v1/components/index.ts b/packages/ui-v1/components/index.ts
index 62cc1cdc9..b4a71a580 100644
--- a/packages/ui-v1/components/index.ts
+++ b/packages/ui-v1/components/index.ts
@@ -16,7 +16,6 @@ export * from './PropertyListView'
 export * from './schema-form'
 export * from './SearchInput'
 export * from './SecureInput'
-export * from './Spinner'
 export * from './StatusDot'
 export * from './tabs'
 export * from './ThemeProvider'
diff --git a/packages/ui-v1/domain-components/LinkConnectorModal.tsx b/packages/ui-v1/domain-components/LinkConnectorModal.tsx
deleted file mode 100644
index 422e2a8bb..000000000
--- a/packages/ui-v1/domain-components/LinkConnectorModal.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-'use client'
-
-import type {Core} from '@openint/api-v1/models'
-
-import {Search} from 'lucide-react'
-import {useState} from 'react'
-import {cn} from '@openint/shadcn/lib/utils'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  Input,
-} from '@openint/shadcn/ui'
-import {ConnectorDisplay} from './ConnectorDisplay'
-
-export interface LinkConnectorModalProps {
-  isOpen: boolean
-  onClose: () => void
-  connectors: Array<Core['connector']>
-  onSelectConnector?: (connector: Core['connector']) => void
-  title?: string
-  className?: string
-  initialSearchValue?: string
-}
-
-export function LinkConnectorModal({
-  isOpen,
-  onClose,
-  connectors = [],
-  onSelectConnector,
-  title = 'Select Integration',
-  className,
-  initialSearchValue = '',
-}: LinkConnectorModalProps) {
-  const [searchQuery, setSearchQuery] = useState(initialSearchValue)
-  const [isFocused, setIsFocused] = useState(false)
-
-  const filteredConnectors = connectors.filter((connector) => {
-    const searchLower = searchQuery.toLowerCase()
-    return (
-      connector.name.toLowerCase().includes(searchLower) ||
-      (connector.display_name &&
-        connector.display_name.toLowerCase().includes(searchLower))
-    )
-  })
-
-  return (
-    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent
-        className={cn(
-          'flex h-[85vh] max-h-[600px] max-w-2xl flex-col gap-0 overflow-hidden p-0 shadow-xl',
-          className,
-        )}
-        onInteractOutside={(e) => e.preventDefault()}>
-        <DialogHeader className="bg-foreground/5 flex-shrink-0 border-b px-6 py-4">
-          <DialogTitle className="text-md">{title}</DialogTitle>
-        </DialogHeader>
-
-        <div className="flex flex-1 flex-col overflow-hidden">
-          <div
-            className={cn(
-              'bg-background sticky top-0 z-10 flex-shrink-0 transition-all duration-200',
-              'border-b border-b-transparent',
-              // Apply subtle shadow and border only when content is scrolled
-              isFocused ? 'border-b-gray-100 shadow-sm' : '',
-            )}>
-            <div className="p-6 pb-3">
-              <div className="relative">
-                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 transform text-gray-500" />
-                <Input
-                  placeholder="Search"
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="border-gray-200 bg-gray-50/50 pl-10 transition-all duration-200 focus:bg-white focus:shadow-sm"
-                  onFocus={() => setIsFocused(true)}
-                  onBlur={() => setIsFocused(false)}
-                />
-              </div>
-            </div>
-          </div>
-
-          <div
-            className="relative flex-1 overflow-y-auto"
-            onScroll={(e) => {
-              // When scrolling, set focus to create the separation effect
-              if (e.currentTarget.scrollTop > 5) {
-                setIsFocused(true)
-              } else {
-                setIsFocused(false)
-              }
-            }}>
-            {/* Mobile view: Row mode with scrolling */}
-            <div className="p-6 pt-3 md:hidden">
-              {filteredConnectors.map((connector, index) => (
-                <div
-                  key={`${connector.name}-${connector.display_name || index}`}>
-                  <div
-                    className="rounded-md py-2 transition-all duration-100 hover:bg-gray-50"
-                    onClick={() => onSelectConnector?.(connector)}>
-                    <ConnectorDisplay
-                      connector={connector}
-                      mode="row"
-                      displayBadges={false}
-                      onPress={() => onSelectConnector?.(connector)}
-                      className="hover:bg-transparent"
-                    />
-                  </div>
-                  {index < filteredConnectors.length - 1 && (
-                    <div className="my-1 h-px bg-gray-100" />
-                  )}
-                </div>
-              ))}
-            </div>
-
-            {/* Desktop view: Card grid */}
-            <div className="hidden p-6 pt-3 md:grid md:grid-cols-2 md:gap-4">
-              {filteredConnectors.map((connector, index) => (
-                <div
-                  key={`${connector.name}-${connector.display_name || index}`}
-                  onClick={() => onSelectConnector?.(connector)}
-                  className="transition-transform duration-100 hover:scale-[1.01]">
-                  <ConnectorDisplay
-                    connector={connector}
-                    displayBadges={false}
-                    onPress={() => onSelectConnector?.(connector)}
-                  />
-                </div>
-              ))}
-            </div>
-
-            {filteredConnectors.length === 0 && (
-              <div className="col-span-2 py-16 text-center text-gray-500">
-                No integrations found matching{' '}
-                {searchQuery ? `"${searchQuery}"` : 'your search'}
-              </div>
-            )}
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/packages/ui-v1/domain-components/__stories__/LinkConnectorModal.stories.tsx b/packages/ui-v1/domain-components/__stories__/LinkConnectorModal.stories.tsx
deleted file mode 100644
index 3612bfc56..000000000
--- a/packages/ui-v1/domain-components/__stories__/LinkConnectorModal.stories.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react'
-
-import {useState} from 'react'
-import {Button} from '@openint/shadcn/ui'
-import {LinkConnectorModal} from '../LinkConnectorModal'
-
-const meta: Meta<typeof LinkConnectorModal> = {
-  title: 'Domain Components/LinkConnectorModal',
-  component: LinkConnectorModal,
-  parameters: {
-    layout: 'centered',
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof LinkConnectorModal>
-
-const connectors = [
-  {
-    name: 'wise',
-    display_name: 'Wise',
-    logo_url:
-      'https://cdn.iconscout.com/icon/free/png-256/free-wise-3770198-3155604.png',
-    stage: 'ga' as 'ga' | 'beta' | 'alpha',
-    platforms: ['web'] as Array<'web' | 'mobile' | 'desktop'>,
-  },
-  {
-    name: 'firebase',
-    display_name: 'Firebase',
-    logo_url:
-      'https://firebase.google.com/static/images/brand-guidelines/logo-logomark.png',
-    stage: 'ga' as 'ga' | 'beta' | 'alpha',
-    platforms: ['web', 'mobile'] as Array<'web' | 'mobile' | 'desktop'>,
-  },
-  {
-    name: 'hubspot',
-    display_name: 'Hubspot',
-    logo_url:
-      'https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/168_Hubspot_logo_logos-512.png',
-    stage: 'beta' as 'ga' | 'beta' | 'alpha',
-    platforms: ['web', 'mobile'] as Array<'web' | 'mobile' | 'desktop'>,
-  },
-  {
-    name: 'ramp',
-    display_name: 'Ramp',
-    logo_url: 'https://ramp.com/img/logo.png',
-    stage: 'beta' as 'ga' | 'beta' | 'alpha',
-    platforms: ['web'] as Array<'web' | 'mobile' | 'desktop'>,
-  },
-  {
-    name: 'discord',
-    display_name: 'Discord',
-    logo_url:
-      'https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a69f118df70ad7828d4_icon_clyde_blurple_RGB.png',
-    stage: 'alpha' as 'ga' | 'beta' | 'alpha',
-    platforms: ['web', 'desktop'] as Array<'web' | 'mobile' | 'desktop'>,
-  },
-  {
-    name: 'gong',
-    display_name: 'Gong',
-    logo_url:
-      'https://www.gong.io/wp-content/themes/gong/assets/images/site-icon-gong.png',
-    stage: 'alpha' as 'ga' | 'beta' | 'alpha',
-    platforms: ['web'] as Array<'web' | 'mobile' | 'desktop'>,
-  },
-]
-
-// Create a larger set of connectors for testing scroll behavior
-const manyConnectors = [
-  ...connectors,
-  // Duplicating existing connectors with slight name variations for testing
-  ...connectors.map((connector) => ({
-    ...connector,
-    name: connector.name, // Keep the same name so ConnectorLogo can find it
-    display_name: `${connector.display_name} Pro`,
-  })),
-  ...connectors.map((connector) => ({
-    ...connector,
-    name: connector.name, // Keep the same name so ConnectorLogo can find it
-    display_name: `${connector.display_name} Team`,
-  })),
-  ...connectors.map((connector) => ({
-    ...connector,
-    name: connector.name, // Keep the same name so ConnectorLogo can find it
-    display_name: `${connector.display_name} Enterprise`,
-  })),
-  ...connectors.map((connector) => ({
-    ...connector,
-    name: connector.name, // Keep the same name so ConnectorLogo can find it
-    display_name: `${connector.display_name} Cloud`,
-  })),
-]
-
-// Controlled Example
-const ControlledExample = () => {
-  const [isOpen, setIsOpen] = useState(false)
-
-  return (
-    <div>
-      <Button onClick={() => setIsOpen(true)}>Open Link Connector Modal</Button>
-      <LinkConnectorModal
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        connectors={connectors}
-        onSelectConnector={(connector) => {
-          console.log('Selected connector:', connector)
-          setIsOpen(false)
-        }}
-      />
-    </div>
-  )
-}
-
-export const Default: Story = {
-  render: () => <ControlledExample />,
-}
-
-export const WithCustomTitle: Story = {
-  args: {
-    isOpen: true,
-    title: 'Choose an Integration',
-    connectors: connectors,
-  },
-}
-
-export const EmptyState: Story = {
-  args: {
-    isOpen: true,
-    connectors: [],
-  },
-}
-
-// Prefiltered Search Example
-const PreFilteredExample = () => {
-  const [isOpen, setIsOpen] = useState(false)
-  const [prefilterValue] = useState('disc')
-
-  return (
-    <div>
-      <Button onClick={() => setIsOpen(true)}>
-        Open with &quot;disc&quot; Search
-      </Button>
-      <LinkConnectorModal
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        connectors={connectors}
-        onSelectConnector={(connector) => {
-          console.log('Selected connector:', connector)
-          setIsOpen(false)
-        }}
-        initialSearchValue={prefilterValue}
-      />
-    </div>
-  )
-}
-
-export const WithSearchPrefiltered: Story = {
-  render: () => <PreFilteredExample />,
-}
-
-// Add a story with many connectors to test scrolling
-const ManyConnectorsExample = () => {
-  const [isOpen, setIsOpen] = useState(false)
-
-  return (
-    <div>
-      <Button onClick={() => setIsOpen(true)}>
-        Open Modal with Many Connectors
-      </Button>
-      <LinkConnectorModal
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        connectors={manyConnectors}
-        onSelectConnector={(connector) => {
-          console.log('Selected connector:', connector)
-          setIsOpen(false)
-        }}
-      />
-    </div>
-  )
-}
-
-export const WithManyConnectors: Story = {
-  render: () => <ManyConnectorsExample />,
-}
diff --git a/packages/ui-v1/domain-components/index.ts b/packages/ui-v1/domain-components/index.ts
index b34d67341..fc57eeed7 100644
--- a/packages/ui-v1/domain-components/index.ts
+++ b/packages/ui-v1/domain-components/index.ts
@@ -4,4 +4,3 @@ export * from './ConnectorConfigForm'
 export * from './ConnectionsCardView'
 export * from './tables'
 export * from './ConnectionStatus'
-export * from './LinkConnectorModal'