diff --git a/src/webapp/components/navigation/bottomBar/BottomBar.tsx b/src/webapp/components/navigation/bottomBar/BottomBar.tsx
index eb471885..64fadae6 100644
--- a/src/webapp/components/navigation/bottomBar/BottomBar.tsx
+++ b/src/webapp/components/navigation/bottomBar/BottomBar.tsx
@@ -45,7 +45,11 @@ export default function BottomBar() {
         <BottomBarItem
           href={`/profile/${profile.handle}`}
           title={'Me'}
-          icon={<Avatar src={profile.avatarUrl} />}
+          icon={
+            <Avatar
+              src={profile.avatarUrl?.replace('avatar', 'avatar_thumbnail')}
+            />
+          }
         />
       </Group>
     </AppShellFooter>
diff --git a/src/webapp/features/auth/components/loginForm/AppPasswordLoginForm.tsx b/src/webapp/features/auth/components/loginForm/AppPasswordLoginForm.tsx
index 50d04307..7ac33432 100644
--- a/src/webapp/features/auth/components/loginForm/AppPasswordLoginForm.tsx
+++ b/src/webapp/features/auth/components/loginForm/AppPasswordLoginForm.tsx
@@ -67,7 +67,10 @@ export default function AppPasswordLoginForm(props: Props) {
   const options = suggestions.map((user) => (
     <Combobox.Option key={user.did} value={user.handle} p={5}>
       <Group gap={'xs'} wrap="nowrap">
-        <Avatar src={user.avatar} alt={`${user.handle}'s avatar`} />
+        <Avatar
+          src={user.avatar?.replace('avatar', 'avatar_thumbnail')}
+          alt={`${user.handle}'s avatar`}
+        />
         <Stack gap={0}>
           <Text fw={500} c={'bright'} lineClamp={1}>
             {user.displayName || user.handle}
diff --git a/src/webapp/features/auth/components/loginForm/LoginForm.tsx b/src/webapp/features/auth/components/loginForm/LoginForm.tsx
index b71d11f4..9825c8c3 100644
--- a/src/webapp/features/auth/components/loginForm/LoginForm.tsx
+++ b/src/webapp/features/auth/components/loginForm/LoginForm.tsx
@@ -6,7 +6,7 @@ import { useAuth } from '@/hooks/useAuth';
 import { useForm } from '@mantine/form';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { createSembleClient } from '@/services/apiClient';
+import { createSembleClient } from '@/services/client.apiClient';
 import OAuthLoginForm from './OAuthLoginForm';
 import AppPasswordLoginForm from './AppPasswordLoginForm';
 
diff --git a/src/webapp/features/auth/components/loginForm/OAuthLoginForm.tsx b/src/webapp/features/auth/components/loginForm/OAuthLoginForm.tsx
index f2474b55..a923eea4 100644
--- a/src/webapp/features/auth/components/loginForm/OAuthLoginForm.tsx
+++ b/src/webapp/features/auth/components/loginForm/OAuthLoginForm.tsx
@@ -67,7 +67,10 @@ export default function OAuthLoginForm(props: Props) {
   const options = suggestions.map((user) => (
     <Combobox.Option key={user.did} value={user.handle} p={5}>
       <Group gap={'xs'} wrap="nowrap">
-        <Avatar src={user.avatar} alt={`${user.handle}'s avatar`} />
+        <Avatar
+          src={user.avatar?.replace('avatar', 'avatar_thumbnail')}
+          alt={`${user.handle}'s avatar`}
+        />
         <Stack gap={0}>
           <Text fw={500} c={'bright'} lineClamp={1}>
             {user.displayName || user.handle}
diff --git a/src/webapp/features/cards/lib/dal.ts b/src/webapp/features/cards/lib/dal.ts
index 280d2ec7..96604370 100644
--- a/src/webapp/features/cards/lib/dal.ts
+++ b/src/webapp/features/cards/lib/dal.ts
@@ -1,5 +1,5 @@
 import { verifySessionOnClient } from '@/lib/auth/dal';
-import { createSembleClient } from '@/services/apiClient';
+import { createSembleClient } from '@/services/client.apiClient';
 import { CardSortField, SortOrder } from '@semble/types';
 import { cache } from 'react';
 
diff --git a/src/webapp/features/cards/lib/mutations/useUpdateCardAssociations.tsx b/src/webapp/features/cards/lib/mutations/useUpdateCardAssociations.tsx
index c1e2c897..9083b953 100644
--- a/src/webapp/features/cards/lib/mutations/useUpdateCardAssociations.tsx
+++ b/src/webapp/features/cards/lib/mutations/useUpdateCardAssociations.tsx
@@ -1,4 +1,4 @@
-import { createSembleClient } from '@/services/apiClient';
+import { createSembleClient } from '@/services/client.apiClient';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { cardKeys } from '../cardKeys';
 import { collectionKeys } from '@/features/collections/lib/collectionKeys';
diff --git a/src/webapp/features/collections/components/collectionCard/CollectionCard.tsx b/src/webapp/features/collections/components/collectionCard/CollectionCard.tsx
index 3d6bd9d2..900a5412 100644
--- a/src/webapp/features/collections/components/collectionCard/CollectionCard.tsx
+++ b/src/webapp/features/collections/components/collectionCard/CollectionCard.tsx
@@ -47,7 +47,10 @@ export default function CollectionCard(props: Props) {
                   <Avatar
                     component={Link}
                     href={`/profile/${collection.author.handle}`}
-                    src={collection.author.avatarUrl}
+                    src={collection.author.avatarUrl?.replace(
+                      'avatar',
+                      'avatar_thumbnail',
+                    )}
                     alt={`${collection.author.handle}'s avatar`}
                     size={'sm'}
                   />
diff --git a/src/webapp/features/collections/containers/collectionContainer/CollectionContainer.tsx b/src/webapp/features/collections/containers/collectionContainer/CollectionContainer.tsx
index a59215f7..04c74bf0 100644
--- a/src/webapp/features/collections/containers/collectionContainer/CollectionContainer.tsx
+++ b/src/webapp/features/collections/containers/collectionContainer/CollectionContainer.tsx
@@ -111,7 +111,10 @@ export default function CollectionContainer(props: Props) {
                 size={'sm'}
                 component={Link}
                 href={`/profile/${firstPage.author.handle}`}
-                src={firstPage.author.avatarUrl}
+                src={firstPage.author.avatarUrl?.replace(
+                  'avatar',
+                  'avatar_thumbnail',
+                )}
                 alt={`${firstPage.author.name}'s' avatar`}
               />
               <Anchor
diff --git a/src/webapp/features/collections/containers/collectionEmbedContainer/CollectionEmbedContainer.tsx b/src/webapp/features/collections/containers/collectionEmbedContainer/CollectionEmbedContainer.tsx
index f08179f7..c13eb2c9 100644
--- a/src/webapp/features/collections/containers/collectionEmbedContainer/CollectionEmbedContainer.tsx
+++ b/src/webapp/features/collections/containers/collectionEmbedContainer/CollectionEmbedContainer.tsx
@@ -75,7 +75,10 @@ export default function CollectionEmbedContainer(props: Props) {
                 component={Link}
                 href={`/profile/${firstPage.author.handle}`}
                 target="_blank"
-                src={firstPage.author.avatarUrl}
+                src={firstPage.author.avatarUrl?.replace(
+                  'avatar',
+                  'avatar_thumbnail',
+                )}
                 alt={`${firstPage.author.name}'s' avatar`}
               />
               <Anchor
diff --git a/src/webapp/features/collections/lib/dal.ts b/src/webapp/features/collections/lib/dal.ts
index 2f1ef967..cf971265 100644
--- a/src/webapp/features/collections/lib/dal.ts
+++ b/src/webapp/features/collections/lib/dal.ts
@@ -1,5 +1,5 @@
 import { verifySessionOnClient } from '@/lib/auth/dal';
-import { createSembleClient } from '@/services/apiClient';
+import { createSembleClient } from '@/services/client.apiClient';
 import { CardSortField, CollectionSortField, SortOrder } from '@semble/types';
 import { cache } from 'react';
 
diff --git a/src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.tsx b/src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.tsx
index 432e1f3a..756b7be5 100644
--- a/src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.tsx
+++ b/src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.tsx
@@ -119,7 +119,7 @@ export default function FeedActivityStatus(props: Props) {
           <Avatar
             component={Link}
             href={`/profile/${props.user.handle}`}
-            src={props.user.avatarUrl}
+            src={props.user.avatarUrl?.replace('avatar', 'avatar_thumbnail')}
             alt={`${props.user.name}'s' avatar`}
           />
           {renderActivityText()}
diff --git a/src/webapp/features/feeds/lib/dal.ts b/src/webapp/features/feeds/lib/dal.ts
index 234f65c9..ee3e30b7 100644
--- a/src/webapp/features/feeds/lib/dal.ts
+++ b/src/webapp/features/feeds/lib/dal.ts
@@ -1,4 +1,4 @@
-import { createSembleClient } from '@/services/apiClient';
+import { createSembleClient } from '@/services/client.apiClient';
 import { cache } from 'react';
 
 interface PageParams {
diff --git a/src/webapp/features/notes/components/noteCard/NoteCard.tsx b/src/webapp/features/notes/components/noteCard/NoteCard.tsx
index a4d14bbe..2753a800 100644
--- a/src/webapp/features/notes/components/noteCard/NoteCard.tsx
+++ b/src/webapp/features/notes/components/noteCard/NoteCard.tsx
@@ -25,7 +25,7 @@ export default function NoteCard(props: Props) {
           <Avatar
             component={Link}
             href={`/profile/${props.author.handle}`}
-            src={props.author.avatarUrl}
+            src={props.author.avatarUrl?.replace('avatar', 'avatar_thumbnail')}
             alt={`${props.author.handle}'s avatar`}
             size={'sm'}
           />
diff --git a/src/webapp/features/notes/components/noteCardModal/NoteCardModalContent.tsx b/src/webapp/features/notes/components/noteCardModal/NoteCardModalContent.tsx
index 80806bdb..7f44e2a2 100644
--- a/src/webapp/features/notes/components/noteCardModal/NoteCardModalContent.tsx
+++ b/src/webapp/features/notes/components/noteCardModal/NoteCardModalContent.tsx
@@ -130,7 +130,10 @@ export default function NoteCardModalContent(props: Props) {
             component={Link}
             href={`/profile/${props.cardAuthor.handle}`}
             target="_blank"
-            src={props.cardAuthor.avatarUrl}
+            src={props.cardAuthor.avatarUrl?.replace(
+              'avatar',
+              'avatar_thumbnail',
+            )}
             alt={`${props.cardAuthor.name}'s' avatar`}
           />
           <Anchor
diff --git a/src/webapp/features/notes/lib/dal.ts b/src/webapp/features/notes/lib/dal.ts
index 80f21354..99b814f2 100644
--- a/src/webapp/features/notes/lib/dal.ts
+++ b/src/webapp/features/notes/lib/dal.ts
@@ -1,5 +1,5 @@
 import { verifySessionOnClient } from '@/lib/auth/dal';
-import { createSembleClient } from '@/services/apiClient';
+import { createSembleClient } from '@/services/client.apiClient';
 import { cache } from 'react';
 
 interface PageParams {
diff --git a/src/webapp/features/notifications/components/notificationActivityStatus/NotificationActivityStatus.tsx b/src/webapp/features/notifications/components/notificationActivityStatus/NotificationActivityStatus.tsx
index 688c383a..3023a4a8 100644
--- a/src/webapp/features/notifications/components/notificationActivityStatus/NotificationActivityStatus.tsx
+++ b/src/webapp/features/notifications/components/notificationActivityStatus/NotificationActivityStatus.tsx
@@ -176,7 +176,7 @@ export default function NotificationActivityStatus(props: Props) {
           <Avatar
             component={Link}
             href={`/profile/${props.user.handle}`}
-            src={props.user.avatarUrl}
+            src={props.user.avatarUrl?.replace('avatar', 'avatar_thumbnail')}
             alt={`${props.user.name}'s' avatar`}
           />
           <Text fw={500}>
diff --git a/src/webapp/features/notifications/lib/dal.ts b/src/webapp/features/notifications/lib/dal.ts
index 8c0dfb84..9f8f8ab3 100644
--- a/src/webapp/features/notifications/lib/dal.ts
+++ b/src/webapp/features/notifications/lib/dal.ts
@@ -1,4 +1,4 @@
-import { createSembleClient } from '@/services/apiClient';
+import { createSembleClient } from '@/services/client.apiClient';
 import { cache } from 'react';
 
 interface PageParams {
diff --git a/src/webapp/features/notifications/lib/mutations/useMarkAllNotificationsAsRead.tsx b/src/webapp/features/notifications/lib/mutations/useMarkAllNotificationsAsRead.tsx
index 0a497477..1480c635 100644
--- a/src/webapp/features/notifications/lib/mutations/useMarkAllNotificationsAsRead.tsx
+++ b/src/webapp/features/notifications/lib/mutations/useMarkAllNotificationsAsRead.tsx
@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { createSembleClient } from '@/services/apiClient';
+import { createSembleClient } from '@/services/client.apiClient';
 import { notificationKeys } from '../notificationKeys';
 
 export default function useMarkAllNotificationsAsRead() {
diff --git a/src/webapp/features/notifications/lib/mutations/useMarkNotificationsAsRead.tsx b/src/webapp/features/notifications/lib/mutations/useMarkNotificationsAsRead.tsx
index 2eebbaa4..8b4a410a 100644
--- a/src/webapp/features/notifications/lib/mutations/useMarkNotificationsAsRead.tsx
+++ b/src/webapp/features/notifications/lib/mutations/useMarkNotificationsAsRead.tsx
@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { createSembleClient } from '@/services/apiClient';
+import { createSembleClient } from '@/services/client.apiClient';
 import { notificationKeys } from '../notificationKeys';
 import type { MarkNotificationsAsReadRequest } from '@/api-client';
 
diff --git a/src/webapp/features/platforms/bluesky/components/blueskyPost/BlueskyPost.tsx b/src/webapp/features/platforms/bluesky/components/blueskyPost/BlueskyPost.tsx
index 0aecf1b0..a41ca847 100644
--- a/src/webapp/features/platforms/bluesky/components/blueskyPost/BlueskyPost.tsx
+++ b/src/webapp/features/platforms/bluesky/components/blueskyPost/BlueskyPost.tsx
@@ -62,7 +62,7 @@ export default function BlueskyPost(props: Props) {
       <Group gap="xs" justify="space-between" wrap="nowrap" w={'100%'}>
         <Group gap={'xs'} wrap="nowrap">
           <Avatar
-            src={post.author.avatar}
+            src={post.author.avatar?.replace('avatar', 'avatar_thumbnail')}
             alt={`${post.author.handle} avatar`}
             size={'sm'}
             radius="xl"
diff --git a/src/webapp/features/platforms/bluesky/components/blueskySemblePost/BlueskySemblePost.tsx b/src/webapp/features/platforms/bluesky/components/blueskySemblePost/BlueskySemblePost.tsx
index b3e3f285..2b094be5 100644
--- a/src/webapp/features/platforms/bluesky/components/blueskySemblePost/BlueskySemblePost.tsx
+++ b/src/webapp/features/platforms/bluesky/components/blueskySemblePost/BlueskySemblePost.tsx
@@ -94,7 +94,7 @@ export default async function BlueskySemblePost(props: Props) {
           <Group gap="xs" justify="space-between" wrap="nowrap">
             <Group gap={'xs'} wrap="nowrap">
               <Avatar
-                src={post.author.avatar}
+                src={post.author.avatar?.replace('avatar', 'avatar_thumbnail')}
                 alt={`${post.author.handle} social preview image`}
                 radius="xl"
               />
diff --git a/src/webapp/features/platforms/bluesky/components/feedEmbed/FeedEmbed.tsx b/src/webapp/features/platforms/bluesky/components/feedEmbed/FeedEmbed.tsx
index c20014ab..494e5f5c 100644
--- a/src/webapp/features/platforms/bluesky/components/feedEmbed/FeedEmbed.tsx
+++ b/src/webapp/features/platforms/bluesky/components/feedEmbed/FeedEmbed.tsx
@@ -14,7 +14,10 @@ export default function FeedEmbed(props: Props) {
       <Card p={'xs'} withBorder>
         <Group gap={'xs'} wrap="nowrap">
           {props.feed.avatar && (
-            <Avatar src={props.feed.avatar} alt={props.feed.displayName} />
+            <Avatar
+              src={props.feed.avatar?.replace('avatar', 'avatar_thumbnail')}
+              alt={props.feed.displayName}
+            />
           )}
 
           <Stack gap={0}>
@@ -40,7 +43,10 @@ export default function FeedEmbed(props: Props) {
     >
       <Group gap={'xs'} wrap="nowrap">
         {props.feed.avatar && (
-          <Avatar src={props.feed.avatar} alt={props.feed.displayName} />
+          <Avatar
+            src={props.feed.avatar?.replace('avatar', 'avatar_thumbnail')}
+            alt={props.feed.displayName}
+          />
         )}
 
         <Stack gap={0}>
diff --git a/src/webapp/features/platforms/bluesky/components/recordEmbed/RecordEmbed.tsx b/src/webapp/features/platforms/bluesky/components/recordEmbed/RecordEmbed.tsx
index 335439e4..b32a186d 100644
--- a/src/webapp/features/platforms/bluesky/components/recordEmbed/RecordEmbed.tsx
+++ b/src/webapp/features/platforms/bluesky/components/recordEmbed/RecordEmbed.tsx
@@ -32,7 +32,7 @@ export default function RecordEmbed(props: Props) {
         <Stack justify="space-between" align="start" gap="xs">
           <Group gap="xs" wrap="nowrap">
             <Avatar
-              src={post.author.avatar}
+              src={post.author.avatar?.replace('avatar', 'avatar_thumbnail')}
               alt={`${post.author.handle} avatar`}
               radius="xl"
               size={'sm'}
diff --git a/src/webapp/features/profile/components/profileHeader/MinimalProfileHeader.tsx b/src/webapp/features/profile/components/profileHeader/MinimalProfileHeader.tsx
index c980c2a3..b747cde3 100644
--- a/src/webapp/features/profile/components/profileHeader/MinimalProfileHeader.tsx
+++ b/src/webapp/features/profile/components/profileHeader/MinimalProfileHeader.tsx
@@ -11,7 +11,7 @@ export default function MinimalProfileHeader(props: Props) {
     <Container p={'xs'} size={'xl'} mx={0}>
       <Group gap={'sm'}>
         <Avatar
-          src={props.avatarUrl}
+          src={props.avatarUrl?.replace('avatar', 'avatar_thumbnail')}
           alt={`${props.name}'s avatar`}
           size={'md'}
         />
diff --git a/src/webapp/features/profile/components/profileHoverCard/ProfileHoverCard.tsx b/src/webapp/features/profile/components/profileHoverCard/ProfileHoverCard.tsx
index ca97a34a..70520a3f 100644
--- a/src/webapp/features/profile/components/profileHoverCard/ProfileHoverCard.tsx
+++ b/src/webapp/features/profile/components/profileHoverCard/ProfileHoverCard.tsx
@@ -26,7 +26,10 @@ export default function ProfileHoverCard(props: Props) {
       <HoverCardDropdown p={'xs'}>
         <Stack gap={'sm'}>
           <Group gap={'xs'}>
-            <Avatar src={profile.avatarUrl} size={'lg'} />
+            <Avatar src={profile.avatarUrl?.replace(
+                      'avatar',
+                      'avatar_thumbnail',
+                    )} size={'lg'} />
             <Stack gap={0}>
               <Text fw={600} c={'bright'}>
                 {profile.name}
diff --git a/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx b/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
index 8d5340c2..4d0cb779 100644
--- a/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
+++ b/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
@@ -53,7 +53,9 @@ export default function ProfileMenu() {
             <UnstyledButton>
               <Group justify="space-between" wrap="nowrap">
                 <Group gap={'xs'} c={'bright'} wrap="nowrap">
-                  <Avatar src={data.avatarUrl} />
+                  <Avatar
+                    src={data.avatarUrl?.replace('avatar', 'avatar_thumbnail')}
+                  />
                   <Text fw={600} lineClamp={1}>
                     {data.name}
                   </Text>
diff --git a/src/webapp/features/profile/lib/dal.ts b/src/webapp/features/profile/lib/dal.ts
index d7fd4820..064f7252 100644
--- a/src/webapp/features/profile/lib/dal.ts
+++ b/src/webapp/features/profile/lib/dal.ts
@@ -1,5 +1,5 @@
 import { verifySessionOnClient } from '@/lib/auth/dal';
-import { createSembleClient } from '@/services/apiClient';
+import { createSembleClient } from '@/services/client.apiClient';
 import { cache } from 'react';
 
 export const getProfile = cache(async (didOrHandle: string) => {
@@ -19,3 +19,4 @@ export const getMyProfile = cache(async () => {
 
   return response;
 });
+
diff --git a/src/webapp/features/semble/components/addedByCard/AddedByCard.tsx b/src/webapp/features/semble/components/addedByCard/AddedByCard.tsx
index 104d2975..4298ce69 100644
--- a/src/webapp/features/semble/components/addedByCard/AddedByCard.tsx
+++ b/src/webapp/features/semble/components/addedByCard/AddedByCard.tsx
@@ -24,7 +24,10 @@ export default function AddedByCard(props: Props) {
       <Group gap={'xs'} justify="space-between">
         <Group gap={'xs'}>
           <Avatar
-            src={props.item.card.author.avatarUrl}
+            src={props.item.card.author.avatarUrl?.replace(
+              'avatar',
+              'avatar_thumbnail',
+            )}
             alt={`${props.item.card.author.handle}'s avatar`}
           />
 
diff --git a/src/webapp/features/semble/components/urlAddedBySummary/UrlAddedBySummary.tsx b/src/webapp/features/semble/components/urlAddedBySummary/UrlAddedBySummary.tsx
index d67890bb..2d514710 100644
--- a/src/webapp/features/semble/components/urlAddedBySummary/UrlAddedBySummary.tsx
+++ b/src/webapp/features/semble/components/urlAddedBySummary/UrlAddedBySummary.tsx
@@ -26,7 +26,7 @@ export default async function UrlAddedBySummary(props: Props) {
             key={i}
             component={Link}
             href={`/profile/${p.user.handle}`}
-            src={p.user.avatarUrl}
+            src={p.user.avatarUrl?.replace('avatar', 'avatar_thumbnail')}
             alt={p.user.handle}
             name={p.user.handle}
           />
diff --git a/src/webapp/features/semble/lib/dal.ts b/src/webapp/features/semble/lib/dal.ts
index 792095fe..14b0767d 100644
--- a/src/webapp/features/semble/lib/dal.ts
+++ b/src/webapp/features/semble/lib/dal.ts
@@ -1,4 +1,4 @@
-import { createSembleClient } from '@/services/apiClient';
+import { createSembleClient } from '@/services/client.apiClient';
 import { cache } from 'react';
 
 interface PageParams {
diff --git a/src/webapp/features/settings/components/accountSummary/AccountSummary.tsx b/src/webapp/features/settings/components/accountSummary/AccountSummary.tsx
index b959eb83..099fa02c 100644
--- a/src/webapp/features/settings/components/accountSummary/AccountSummary.tsx
+++ b/src/webapp/features/settings/components/accountSummary/AccountSummary.tsx
@@ -12,7 +12,7 @@ export default function AccountSummary() {
       <Avatar
         component={Link}
         href={`/profile/${profile.handle}`}
-        src={profile.avatarUrl}
+        src={profile.avatarUrl?.replace('avatar', 'avatar_thumbnail')}
         alt={`${profile.name}'s' avatar`}
         size={'xl'}
         radius={'lg'}
diff --git a/src/webapp/features/settings/containers/settingsContainer/SettingsContainer.tsx b/src/webapp/features/settings/containers/settingsContainer/SettingsContainer.tsx
index f6bf0e2f..acce8bb8 100644
--- a/src/webapp/features/settings/containers/settingsContainer/SettingsContainer.tsx
+++ b/src/webapp/features/settings/containers/settingsContainer/SettingsContainer.tsx
@@ -13,6 +13,7 @@ export default function SettingsContainer() {
     <Container p={'xs'} size={'xs'}>
       <Stack gap={'xl'}>
         <AccountSummary />
+
         <Stack>
           <ButtonGroup orientation="vertical">
             <SettingItem href="/settings/appearance" icon={IoMdColorPalette}>
diff --git a/src/webapp/services/apiClient.ts b/src/webapp/services/apiClient.ts
deleted file mode 100644
index 58b4c0e7..00000000
--- a/src/webapp/services/apiClient.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { createApiClient, createServerApiClient } from '@/api-client/ApiClient';
-
-export const createServerSideSembleClient = () => {
-  return createServerApiClient();
-};
-
-export const createClientSideSembleClient = () => {
-  return createApiClient();
-};
-
-export const createSembleClient = () => {
-  if (typeof window === 'undefined') {
-    return createServerSideSembleClient();
-  } else {
-    return createClientSideSembleClient();
-  }
-};
diff --git a/src/webapp/services/client.apiClient.ts b/src/webapp/services/client.apiClient.ts
new file mode 100644
index 00000000..63e09425
--- /dev/null
+++ b/src/webapp/services/client.apiClient.ts
@@ -0,0 +1,5 @@
+import { createApiClient } from '@/api-client/ApiClient';
+
+export const createSembleClient = () => {
+  return createApiClient();
+};
diff --git a/src/webapp/services/server.apiClient.ts b/src/webapp/services/server.apiClient.ts
new file mode 100644
index 00000000..54ddb433
--- /dev/null
+++ b/src/webapp/services/server.apiClient.ts
@@ -0,0 +1,7 @@
+import { createServerApiClient } from '@/api-client/ApiClient';
+import { ServerCookieAuthService } from './auth/CookieAuthService.server';
+
+export const createServerSembleClient = async () => {
+  const { accessToken } = await ServerCookieAuthService.getTokens();
+  return createServerApiClient(accessToken || undefined);
+};