diff --git a/src/modules/cards/infrastructure/http/controllers/CreateConnectionController.ts b/src/modules/cards/infrastructure/http/controllers/CreateConnectionController.ts
index bacb890c..092ceb84 100644
--- a/src/modules/cards/infrastructure/http/controllers/CreateConnectionController.ts
+++ b/src/modules/cards/infrastructure/http/controllers/CreateConnectionController.ts
@@ -42,19 +42,6 @@ export class CreateConnectionController extends Controller {
         return this.badRequest(res, 'Invalid target type. Must be URL or CARD');
       }
 
-      // Validate connectionType if provided
-      if (
-        connectionType !== undefined &&
-        !['CITATION', 'REFERENCE', 'RELATED', 'INSPIRED_BY'].includes(
-          connectionType,
-        )
-      ) {
-        return this.badRequest(
-          res,
-          'Invalid connectionType. Must be CITATION, REFERENCE, RELATED, or INSPIRED_BY',
-        );
-      }
-
       const result = await this.createConnectionUseCase.execute({
         sourceType,
         sourceValue,
diff --git a/src/types/src/api/requests.ts b/src/types/src/api/requests.ts
index 6ade2e39..51ace1d9 100644
--- a/src/types/src/api/requests.ts
+++ b/src/types/src/api/requests.ts
@@ -297,13 +297,24 @@ export interface GetCollectionContributorsParams extends PaginationParams {
   collectionId: string; // Collection UUID
 }
 
+// Connection types matching the domain model
+export type ConnectionType =
+  | 'SUPPORTS'
+  | 'OPPOSES'
+  | 'ADDRESSES'
+  | 'HELPFUL'
+  | 'LEADS_TO'
+  | 'RELATED'
+  | 'SUPPLEMENT'
+  | 'EXPLAINER';
+
 // Connection request types
 export interface CreateConnectionRequest {
   sourceType: 'URL' | 'CARD';
   sourceValue: string;
   targetType: 'URL' | 'CARD';
   targetValue: string;
-  connectionType?: 'CITATION' | 'REFERENCE' | 'RELATED' | 'INSPIRED_BY';
+  connectionType?: ConnectionType;
   note?: string;
 }
 
@@ -320,13 +331,13 @@ export interface DeleteConnectionRequest {
 export interface GetForwardConnectionsForUrlParams
   extends PaginatedSortedParams {
   url: string;
-  connectionTypes?: ('CITATION' | 'REFERENCE' | 'RELATED' | 'INSPIRED_BY')[];
+  connectionTypes?: ConnectionType[];
 }
 
 export interface GetBackwardConnectionsForUrlParams
   extends PaginatedSortedParams {
   url: string;
-  connectionTypes?: ('CITATION' | 'REFERENCE' | 'RELATED' | 'INSPIRED_BY')[];
+  connectionTypes?: ConnectionType[];
 }
 
 // Search URLs request types
@@ -338,5 +349,5 @@ export interface SearchUrlsParams extends PaginatedSortedParams {
 // Get connections request types
 export interface GetConnectionsParams extends PaginatedSortedParams {
   identifier: string; // Can be DID or handle
-  connectionTypes?: ('CITATION' | 'REFERENCE' | 'RELATED' | 'INSPIRED_BY')[];
+  connectionTypes?: ConnectionType[];
 }
diff --git a/src/webapp/api-client/clients/ConnectionClient.ts b/src/webapp/api-client/clients/ConnectionClient.ts
index 9db7673b..6da26594 100644
--- a/src/webapp/api-client/clients/ConnectionClient.ts
+++ b/src/webapp/api-client/clients/ConnectionClient.ts
@@ -12,12 +12,32 @@ export class ConnectionClient extends BaseClient {
   async createConnection(
     request: CreateConnectionRequest,
   ): Promise<CreateConnectionResponse> {
-    return this.request<CreateConnectionResponse>(
-      'POST',
-      '/api/connections',
-      request,
-    );
+    try {
+      console.log(
+        'Creating connection with request:',
+        JSON.stringify(request, null, 2),
+      );
+      const response = await this.request<CreateConnectionResponse>(
+        'POST',
+        '/api/connections',
+        request,
+      );
+      console.log(
+        'CreateConnectionResponse:',
+        JSON.stringify(response, null, 2),
+      );
+      return response;
+    } catch (error) {
+      console.error('Error creating connection:', error);
+      throw error;
+    }
   }
+  //   return this.request<CreateConnectionResponse>(
+  //     'POST',
+  //     '/api/connections',
+  //     request,
+  //   );
+  // }
 
   async updateConnection(
     request: UpdateConnectionRequest,
diff --git a/src/webapp/features/connections/components/connectionFilters/ConnectionFilters.tsx b/src/webapp/features/connections/components/connectionFilters/ConnectionFilters.tsx
index c7575b8a..f1d7bc8a 100644
--- a/src/webapp/features/connections/components/connectionFilters/ConnectionFilters.tsx
+++ b/src/webapp/features/connections/components/connectionFilters/ConnectionFilters.tsx
@@ -1,19 +1,17 @@
 'use client';
 
 import { Group, Button, Menu } from '@mantine/core';
-import { useRouter, useSearchParams } from 'next/navigation';
 import {
   createContext,
   useContext,
   ReactNode,
-  useOptimistic,
-  useTransition,
 } from 'react';
 import { upperFirst } from '@mantine/hooks';
 import { MdFilterList } from 'react-icons/md';
+import { ConnectionType } from '@semble/types';
 
 // Connection type enum values matching the backend
-const CONNECTION_TYPES = [
+const CONNECTION_TYPES: ConnectionType[] = [
   'SUPPORTS',
   'OPPOSES',
   'ADDRESSES',
@@ -22,14 +20,12 @@ const CONNECTION_TYPES = [
   'RELATED',
   'SUPPLEMENT',
   'EXPLAINER',
-] as const;
-
-type ConnectionType = (typeof CONNECTION_TYPES)[number];
+];
 
 // context
 interface FilterContextValue {
-  router: ReturnType<typeof useRouter>;
-  searchParams: ReturnType<typeof useSearchParams>;
+  connectionType: ConnectionType | null;
+  onConnectionTypeChange: (type: ConnectionType | null) => void;
 }
 
 const FilterContext = createContext<FilterContextValue | null>(null);
@@ -44,15 +40,18 @@ const useFilterContext = () => {
 };
 
 // root
-export function Root(props: { children: ReactNode }) {
-  const searchParams = useSearchParams();
-  const router = useRouter();
+interface RootProps {
+  children: ReactNode;
+  connectionType: ConnectionType | null;
+  onConnectionTypeChange: (type: ConnectionType | null) => void;
+}
 
+export function Root(props: RootProps) {
   return (
     <FilterContext.Provider
       value={{
-        router,
-        searchParams,
+        connectionType: props.connectionType,
+        onConnectionTypeChange: props.onConnectionTypeChange,
       }}
     >
       <Menu shadow="sm">
@@ -70,30 +69,9 @@ export function Root(props: { children: ReactNode }) {
 // connection type filter
 export function ConnectionTypeFilter() {
   const ctx = useFilterContext();
-  const [, startTransition] = useTransition();
-
-  const typeFromUrl = ctx.searchParams.get(
-    'connectionType',
-  ) as ConnectionType | null;
-
-  const [optimisticType, setOptimisticType] =
-    useOptimistic<ConnectionType | null>(typeFromUrl);
 
   const onChange = (type?: ConnectionType) => {
-    const nextType = type ?? null;
-
-    startTransition(() => {
-      setOptimisticType(nextType);
-
-      const params = new URLSearchParams(ctx.searchParams.toString());
-      if (nextType) {
-        params.set('connectionType', nextType);
-      } else {
-        params.delete('connectionType');
-      }
-
-      ctx.router.replace(`?${params.toString()}`, { scroll: false });
-    });
+    ctx.onConnectionTypeChange(type ?? null);
   };
 
   const formatConnectionType = (type: string) => {
@@ -109,7 +87,7 @@ export function ConnectionTypeFilter() {
       <Button
         size="xs"
         color="blue"
-        variant={optimisticType === null ? 'filled' : 'light'}
+        variant={ctx.connectionType === null ? 'filled' : 'light'}
         onClick={() => onChange()}
       >
         All Types
@@ -121,7 +99,7 @@ export function ConnectionTypeFilter() {
             key={type}
             size="xs"
             color="blue"
-            variant={optimisticType === type ? 'filled' : 'light'}
+            variant={ctx.connectionType === type ? 'filled' : 'light'}
             onClick={() => onChange(type)}
           >
             {formatConnectionType(type)}
diff --git a/src/webapp/features/connections/components/connectionFilters/DirectionToggle.tsx b/src/webapp/features/connections/components/connectionFilters/DirectionToggle.tsx
index a3164a42..a82c1389 100644
--- a/src/webapp/features/connections/components/connectionFilters/DirectionToggle.tsx
+++ b/src/webapp/features/connections/components/connectionFilters/DirectionToggle.tsx
@@ -1,38 +1,23 @@
 'use client';
 
 import { SegmentedControl } from '@mantine/core';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { useOptimistic, useTransition } from 'react';
 
 type Direction = 'outgoing' | 'incoming';
 
-export default function DirectionToggle() {
-  const searchParams = useSearchParams();
-  const router = useRouter();
-  const [, startTransition] = useTransition();
-
-  const directionFromUrl =
-    (searchParams.get('direction') as Direction) ?? 'outgoing';
-
-  const [optimisticDirection, setOptimisticDirection] =
-    useOptimistic<Direction>(directionFromUrl);
-
-  const onChange = (value: string) => {
-    const direction = value as Direction;
-    startTransition(() => {
-      setOptimisticDirection(direction);
-
-      const params = new URLSearchParams(searchParams.toString());
-      params.set('direction', direction);
+interface Props {
+  value: Direction;
+  onChange: (direction: Direction) => void;
+}
 
-      router.replace(`?${params.toString()}`, { scroll: false });
-    });
+export default function DirectionToggle(props: Props) {
+  const handleChange = (value: string) => {
+    props.onChange(value as Direction);
   };
 
   return (
     <SegmentedControl
-      value={optimisticDirection}
-      onChange={onChange}
+      value={props.value}
+      onChange={handleChange}
       data={[
         { label: 'Outgoing', value: 'outgoing' },
         { label: 'Incoming', value: 'incoming' },
diff --git a/src/webapp/features/connections/lib/connectionKeys.ts b/src/webapp/features/connections/lib/connectionKeys.ts
index 229f023e..8726f8bd 100644
--- a/src/webapp/features/connections/lib/connectionKeys.ts
+++ b/src/webapp/features/connections/lib/connectionKeys.ts
@@ -1,11 +1,13 @@
+import { ConnectionType } from '@semble/types';
+
 export const connectionKeys = {
   all: () => ['connections'] as const,
   forwardForUrl: (url: string) => ['connections', 'forward', url] as const,
-  forwardForUrlInfinite: (url: string, limit?: number) =>
-    ['connections', 'forward', url, 'infinite', limit] as const,
+  forwardForUrlInfinite: (url: string, limit?: number, connectionTypes?: ConnectionType[]) =>
+    ['connections', 'forward', url, 'infinite', limit, connectionTypes] as const,
   backwardForUrl: (url: string) => ['connections', 'backward', url] as const,
-  backwardForUrlInfinite: (url: string, limit?: number) =>
-    ['connections', 'backward', url, 'infinite', limit] as const,
+  backwardForUrlInfinite: (url: string, limit?: number, connectionTypes?: ConnectionType[]) =>
+    ['connections', 'backward', url, 'infinite', limit, connectionTypes] as const,
   userConnections: (identifier: string) =>
     ['connections', 'user', identifier] as const,
 };
diff --git a/src/webapp/features/connections/lib/dal.ts b/src/webapp/features/connections/lib/dal.ts
index f47b4373..4ab6a87a 100644
--- a/src/webapp/features/connections/lib/dal.ts
+++ b/src/webapp/features/connections/lib/dal.ts
@@ -16,9 +16,7 @@ export const createConnection = cache(
     try {
       const response = await client.createConnection(request);
       return response;
-    } catch (error) {
-      await logoutUser();
-    }
+    } catch (error) {}
   },
 );
 
diff --git a/src/webapp/features/connections/lib/queries/useBackwardConnections.tsx b/src/webapp/features/connections/lib/queries/useBackwardConnections.tsx
index 72998c50..77b2ed1f 100644
--- a/src/webapp/features/connections/lib/queries/useBackwardConnections.tsx
+++ b/src/webapp/features/connections/lib/queries/useBackwardConnections.tsx
@@ -1,28 +1,19 @@
 import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
 import { getBackwardConnectionsForUrl } from '../dal';
 import { connectionKeys } from '../connectionKeys';
-
-type ConnectionTypeEnum =
-  | 'SUPPORTS'
-  | 'OPPOSES'
-  | 'ADDRESSES'
-  | 'HELPFUL'
-  | 'LEADS_TO'
-  | 'RELATED'
-  | 'SUPPLEMENT'
-  | 'EXPLAINER';
+import { ConnectionType } from '@semble/types';
 
 interface Props {
   url: string;
   limit?: number;
-  connectionTypes?: ConnectionTypeEnum[];
+  connectionTypes?: ConnectionType[];
 }
 
 export default function useBackwardConnections(props: Props) {
   const limit = props?.limit ?? 16;
 
   const backwardConnections = useSuspenseInfiniteQuery({
-    queryKey: connectionKeys.backwardForUrlInfinite(props.url, props.limit),
+    queryKey: connectionKeys.backwardForUrlInfinite(props.url, props.limit, props.connectionTypes),
     initialPageParam: 1,
     queryFn: ({ pageParam = 1 }) => {
       return getBackwardConnectionsForUrl({
diff --git a/src/webapp/features/connections/lib/queries/useForwardConnections.tsx b/src/webapp/features/connections/lib/queries/useForwardConnections.tsx
index ef177f27..a8d71857 100644
--- a/src/webapp/features/connections/lib/queries/useForwardConnections.tsx
+++ b/src/webapp/features/connections/lib/queries/useForwardConnections.tsx
@@ -1,28 +1,19 @@
 import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
 import { getForwardConnectionsForUrl } from '../dal';
 import { connectionKeys } from '../connectionKeys';
-
-type ConnectionTypeEnum =
-  | 'SUPPORTS'
-  | 'OPPOSES'
-  | 'ADDRESSES'
-  | 'HELPFUL'
-  | 'LEADS_TO'
-  | 'RELATED'
-  | 'SUPPLEMENT'
-  | 'EXPLAINER';
+import { ConnectionType } from '@semble/types';
 
 interface Props {
   url: string;
   limit?: number;
-  connectionTypes?: ConnectionTypeEnum[];
+  connectionTypes?: ConnectionType[];
 }
 
 export default function useForwardConnections(props: Props) {
   const limit = props?.limit ?? 16;
 
   const forwardConnections = useSuspenseInfiniteQuery({
-    queryKey: connectionKeys.forwardForUrlInfinite(props.url, props.limit),
+    queryKey: connectionKeys.forwardForUrlInfinite(props.url, props.limit, props.connectionTypes),
     initialPageParam: 1,
     queryFn: ({ pageParam = 1 }) => {
       return getForwardConnectionsForUrl({
diff --git a/src/webapp/features/semble/containers/sembleConnectionsContainer/SembleConnectionsContainer.tsx b/src/webapp/features/semble/containers/sembleConnectionsContainer/SembleConnectionsContainer.tsx
index 1098969a..9ed1e717 100644
--- a/src/webapp/features/semble/containers/sembleConnectionsContainer/SembleConnectionsContainer.tsx
+++ b/src/webapp/features/semble/containers/sembleConnectionsContainer/SembleConnectionsContainer.tsx
@@ -13,17 +13,10 @@ import { useDisclosure } from '@mantine/hooks';
 import AddConnectionDrawer from '@/features/connections/components/addConnectionDrawer/AddConnectionDrawer';
 import { ConnectionFilters } from '@/features/connections/components/connectionFilters/ConnectionFilters';
 import DirectionToggle from '@/features/connections/components/connectionFilters/DirectionToggle';
-import { useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+import { ConnectionType } from '@semble/types';
 
-type ConnectionTypeEnum =
-  | 'SUPPORTS'
-  | 'OPPOSES'
-  | 'ADDRESSES'
-  | 'HELPFUL'
-  | 'LEADS_TO'
-  | 'RELATED'
-  | 'SUPPLEMENT'
-  | 'EXPLAINER';
+type Direction = 'outgoing' | 'incoming';
 
 interface Props {
   url: string;
@@ -32,14 +25,11 @@ interface Props {
 export default function SembleConnectionsContainer(props: Props) {
   const [drawerOpened, { open: openDrawer, close: closeDrawer }] =
     useDisclosure(false);
-  const searchParams = useSearchParams();
 
-  const direction =
-    (searchParams.get('direction') as 'outgoing' | 'incoming') ?? 'outgoing';
-  const connectionTypeParam = searchParams.get('connectionType');
-  const connectionTypes = connectionTypeParam
-    ? [connectionTypeParam as ConnectionTypeEnum]
-    : undefined;
+  const [direction, setDirection] = useState<Direction>('outgoing');
+  const [connectionType, setConnectionType] = useState<ConnectionType | null>(null);
+
+  const connectionTypes = connectionType ? [connectionType] : undefined;
 
   const {
     data: forwardData,
@@ -90,8 +80,11 @@ export default function SembleConnectionsContainer(props: Props) {
       <Stack gap={'md'} align="center">
         <Group justify="space-between" w={'100%'} maw={600}>
           <Group gap={'xs'}>
-            <DirectionToggle />
-            <ConnectionFilters.Root>
+            <DirectionToggle value={direction} onChange={setDirection} />
+            <ConnectionFilters.Root
+              connectionType={connectionType}
+              onConnectionTypeChange={setConnectionType}
+            >
               <ConnectionFilters.ConnectionTypeFilter />
             </ConnectionFilters.Root>
           </Group>