diff --git a/src/lib/adapters/index.ts b/src/lib/adapters/index.ts
index c12b2c12..fe6ee516 100644
--- a/src/lib/adapters/index.ts
+++ b/src/lib/adapters/index.ts
@@ -13,6 +13,7 @@ export interface Adapter {
 	startChat(address: string, peerAddress: string): Promise<string>
 	startGroupChat(
 		wallet: BaseWallet,
+		chatId: string,
 		memberAddresses: string[],
 		name: string,
 		avatar?: string,
diff --git a/src/lib/adapters/waku/index.ts b/src/lib/adapters/waku/index.ts
index 5cdd192a..06030fe0 100644
--- a/src/lib/adapters/waku/index.ts
+++ b/src/lib/adapters/waku/index.ts
@@ -33,7 +33,6 @@ import { makeWakuObjectAdapter } from '$lib/objects/adapter'
 import { fetchBalances } from '$lib/adapters/balance'
 import { makeWakustore } from './wakustore'
 import type { StorageChat, StorageChatEntry, StorageObjectEntry, StorageProfile } from './types'
-import { genRandomHex } from '$lib/utils'
 import { walletStore } from '$lib/stores/wallet'
 import { SafeWaku } from './safe-waku'
 
@@ -280,6 +279,7 @@ export default class WakuAdapter implements Adapter {
 
 	async startGroupChat(
 		wallet: BaseWallet,
+		chatId: string,
 		memberAddresses: string[],
 		name: string,
 		avatar?: string,
@@ -288,8 +288,6 @@ export default class WakuAdapter implements Adapter {
 			throw 'invalid chat'
 		}
 
-		const chatId = genRandomHex(64)
-
 		const userAddresses = [...memberAddresses, wallet.address]
 		const storageChat = {
 			users: userAddresses,
diff --git a/src/lib/components/avatar.svelte b/src/lib/components/avatar.svelte
index 84632922..e7af5ac2 100644
--- a/src/lib/components/avatar.svelte
+++ b/src/lib/components/avatar.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { getPicture } from '$lib/adapters/ipfs'
-	import User from '$lib/components/icons/user.svelte'
+	import Dicebear from './dicebear.svelte'
 
-	export let picture: string | undefined = undefined
+	export let picture: string | undefined
+	export let seed: string | undefined
 	export let size = 48
 	export let onClick: (() => unknown) | undefined = undefined
-	export let avatarSize = size / 2
+	export let group = false
 </script>
 
 <div
@@ -18,8 +19,9 @@
 	<div class="img" style={`height: ${size}px;`}>
 		{#if picture}
 			<img src={getPicture(picture)} alt="profile" />
-		{:else}
-			<User size={avatarSize} />
+		{:else if seed}
+			{@const style = group ? 'shapes' : 'bottts-neutral'}
+			<Dicebear {seed} {size} {style} />
 		{/if}
 	</div>
 </div>
diff --git a/src/lib/components/dicebear.svelte b/src/lib/components/dicebear.svelte
new file mode 100644
index 00000000..a90bf27b
--- /dev/null
+++ b/src/lib/components/dicebear.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import User from './icons/user.svelte'
+
+	export let seed: string
+	export let size = 48
+	export let style = 'bottts-neutral'
+	export let scale = 75
+	export let radius = 50
+
+	const avatarSize = size / 2
+</script>
+
+{#if style === 'user'}
+	<User size={avatarSize} />
+{:else}
+	<img
+		alt="avatar"
+		src="https://api.dicebear.com/6.x/{style}/svg?seed={seed}&size={size}&radius={radius}&scale={scale}"
+	/>
+{/if}
diff --git a/src/lib/objects/payggy/views/select-user.svelte b/src/lib/objects/payggy/views/select-user.svelte
index d01f4474..00642d0e 100644
--- a/src/lib/objects/payggy/views/select-user.svelte
+++ b/src/lib/objects/payggy/views/select-user.svelte
@@ -51,7 +51,7 @@
 			<li on:click={() => setUser(user)}>
 				<Container grow>
 					<div class="chat">
-						<Avatar size={48} picture={user.avatar} />
+						<Avatar size={48} picture={user.avatar} seed={user.address} />
 						<div class="content">
 							<div class="user-info">
 								<span class="username text-lg">
diff --git a/src/lib/objects/split/views/accounting.svelte b/src/lib/objects/split/views/accounting.svelte
index f7153791..eb36e764 100644
--- a/src/lib/objects/split/views/accounting.svelte
+++ b/src/lib/objects/split/views/accounting.svelte
@@ -72,7 +72,7 @@
 				<li>
 					<Container grow>
 						<div class="chat">
-							<Avatar size={48} picture={user?.avatar} />
+							<Avatar size={48} picture={user?.avatar} seed={user?.address} />
 							<Container direction="column">
 								<p>
 									{(isYou ? 'You' : user?.name) ?? 'unknown'}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 626ef32d..2dc04846 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -94,7 +94,7 @@
 						<svelte:fragment slot="right">
 							<Button align="right" variant="account" on:click={() => goto(ROUTES.IDENTITY)}>
 								<svelte:fragment slot="avatar">
-									<Avatar size={48} picture={$profile.avatar} />
+									<Avatar size={48} picture={$profile.avatar} seed={wallet.address} />
 								</svelte:fragment>
 								{$profile.name}
 							</Button>
@@ -127,7 +127,7 @@
 						<svelte:fragment slot="right">
 							<Button align="right" variant="account" on:click={() => goto(ROUTES.IDENTITY)}>
 								<svelte:fragment slot="avatar">
-									<Avatar size={48} picture={$profile.avatar} />
+									<Avatar size={48} picture={$profile.avatar} seed={wallet.address} />
 								</svelte:fragment>
 								{$profile.name}
 							</Button>
@@ -159,9 +159,9 @@
 								<Container grow>
 									<div class="chat">
 										{#if isGroupChatId(chat.chatId)}
-											<Avatar size={70} picture={chat?.avatar} />
+											<Avatar group size={70} picture={chat?.avatar} seed={chat.chatId} />
 										{:else}
-											<Avatar size={70} picture={otherUser?.avatar} />
+											<Avatar size={70} picture={otherUser?.avatar} seed={otherUser?.address} />
 										{/if}
 										<div class="content">
 											<div class="chat-info">
diff --git a/src/routes/chat/[id]/+page.svelte b/src/routes/chat/[id]/+page.svelte
index 8dffe683..349619a0 100644
--- a/src/routes/chat/[id]/+page.svelte
+++ b/src/routes/chat/[id]/+page.svelte
@@ -94,7 +94,7 @@
 						<ChevronLeft />
 					</Button>
 					<svelte:fragment slot="chat">
-						<Avatar picture={otherUser?.avatar ?? ''} />
+						<Avatar picture={otherUser?.avatar} seed={otherUser?.address} />
 						{otherUser?.name}
 					</svelte:fragment>
 				</Header>
@@ -110,7 +110,7 @@
 					.map((chat) => `"${chat.name}"`)
 					.slice(0, 1)}
 				<Container justify="center" alignItems="center" gap={0} padX={24}>
-					<Avatar picture={inviter?.avatar ?? ''} size={140} />
+					<Avatar picture={inviter?.avatar} seed={inviter?.address} size={140} />
 					<Spacer />
 					<p class="text-lg text-bold text-center">Chat with "{chat?.name}"?</p>
 					<Spacer height={12} />
diff --git a/src/routes/dev/+page.svelte b/src/routes/dev/+page.svelte
deleted file mode 100644
index 9a15a410..00000000
--- a/src/routes/dev/+page.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-	import Header from '$lib/components/header.svelte'
-	import Container from '$lib/components/container.svelte'
-	import { defaultBlockchainNetwork } from '$lib/adapters/transaction'
-</script>
-
-<Header title="DEV DASHBOARD" />
-<Container>
-	<section>
-		<div class="label">Network</div>
-		<div class="value">{defaultBlockchainNetwork.name}</div>
-	</section>
-</Container>
-
-<style lang="scss">
-	section {
-		margin-top: 1rem;
-		margin-bottom: 1rem;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-
-	.label {
-		font-family: var(--font-body);
-		font-weight: 600;
-		font-size: var(--font-size-sm);
-		color: var(--color-step-50, var(--color-dark-step-10));
-		margin-bottom: var(--spacing-4);
-	}
-
-	.value {
-		font-family: var(--font-serif);
-	}
-</style>
diff --git a/src/routes/group/chat/[id]/+page.svelte b/src/routes/group/chat/[id]/+page.svelte
index 2323a77b..189b2901 100644
--- a/src/routes/group/chat/[id]/+page.svelte
+++ b/src/routes/group/chat/[id]/+page.svelte
@@ -140,7 +140,7 @@
 						<ChevronLeft />
 					</Button>
 					<svelte:fragment slot="chat">
-						<Avatar picture={chat?.avatar ?? ''} />
+						<Avatar group picture={chat?.avatar} seed={chat?.chatId} />
 						<span class="truncate">
 							{chat?.name}
 						</span>
@@ -159,7 +159,7 @@
 			</svelte:fragment>
 			{#if !chat.joined}
 				<Container justify="center" alignItems="center" gap={0} padX={24}>
-					<Avatar picture={chat?.avatar ?? ''} size={140} />
+					<Avatar group picture={chat?.avatar} seed={chat?.chatId} size={140} />
 					<Spacer />
 					<p class="text-lg text-bold text-center">Join "{chat?.name}"?</p>
 					<Spacer height={12} />
@@ -204,7 +204,7 @@
 											{@html replaceAddressesWithNames(textToHTML(htmlize(message.text)))}
 											<svelte:fragment slot="avatar">
 												{#if message.fromAddress !== wallet.address && lastMessage}
-													<Avatar size={40} picture={sender?.avatar} />
+													<Avatar size={40} picture={sender?.avatar} seed={sender?.address} />
 												{/if}
 											</svelte:fragment>
 										</ChatMessage>
diff --git a/src/routes/group/chat/[id]/edit/+page.svelte b/src/routes/group/chat/[id]/edit/+page.svelte
index 03b31b93..a5910ad5 100644
--- a/src/routes/group/chat/[id]/edit/+page.svelte
+++ b/src/routes/group/chat/[id]/edit/+page.svelte
@@ -24,7 +24,7 @@
 	import type { HDNodeWallet } from 'ethers'
 	import routes from '$lib/routes'
 	import { goto } from '$app/navigation'
-	import { getPicture, uploadPicture } from '$lib/adapters/ipfs'
+	import { uploadPicture } from '$lib/adapters/ipfs'
 	import { onDestroy } from 'svelte'
 	import Logout from '$lib/components/icons/logout.svelte'
 	import { walletStore } from '$lib/stores/wallet'
@@ -140,19 +140,7 @@
 				</Header>
 			</svelte:fragment>
 			<Container gap={12}>
-				<div class="avatar">
-					{#if picture}
-						<div class="img">
-							<img src={getPicture(picture)} alt="profile" />
-						</div>
-					{:else}
-						<div class="no-img">
-							<div class="profile-default">
-								<UserIcon size={70} />
-							</div>
-						</div>
-					{/if}
-				</div>
+				<Avatar group {picture} seed={chatId} size={140} />
 				<InputFile bind:files={pictureFiles}>
 					<Renew />
 					Change picture
@@ -180,7 +168,7 @@
 							<Container grow>
 								<div class="chat">
 									<div class="chat-avatar">
-										<Avatar size={48} picture={user.avatar} />
+										<Avatar size={48} picture={user.avatar} seed={user.address} />
 									</div>
 									<div class="content">
 										<div class="user-info">
@@ -231,7 +219,7 @@
 							<div class="chat-button" role="listitem">
 								<Container grow>
 									<div class="chat">
-										<Avatar size={48} picture={chat.users[0].avatar} />
+										<Avatar size={48} picture={chat.users[0].avatar} seed={chat.users[0].address} />
 										<div class="content">
 											<div class="user-info">
 												<span class="username">
diff --git a/src/routes/group/new/+page.svelte b/src/routes/group/new/+page.svelte
index 098923da..d01df753 100644
--- a/src/routes/group/new/+page.svelte
+++ b/src/routes/group/new/+page.svelte
@@ -3,7 +3,6 @@
 
 	import AddComment from '$lib/components/icons/add-comment.svelte'
 	import ChevronLeft from '$lib/components/icons/chevron-left.svelte'
-	import UserIcon from '$lib/components/icons/user.svelte'
 
 	import Button from '$lib/components/button.svelte'
 	import Header from '$lib/components/header.svelte'
@@ -23,7 +22,8 @@
 	import type { HDNodeWallet } from 'ethers/lib.commonjs'
 	import Layout from '$lib/components/layout.svelte'
 	import Checkbox from '$lib/components/checkbox.svelte'
-	import { getPicture, uploadPicture } from '$lib/adapters/ipfs'
+	import { uploadPicture } from '$lib/adapters/ipfs'
+	import { genRandomHex } from '$lib/utils'
 
 	let groupMembers: string[] = []
 	let screen: 'create' | 'details' = 'create'
@@ -32,6 +32,8 @@
 	let pictureFiles: FileList | undefined = undefined
 	let buttonDisabled = false
 
+	const chatId = genRandomHex(64)
+
 	async function resizePersonaPicture(p?: File) {
 		try {
 			picture = p ? await uploadPicture(await clipAndResize(p, 200, 200)) : picture
@@ -44,7 +46,7 @@
 	async function createGroup(wallet: HDNodeWallet) {
 		buttonDisabled = true
 
-		const chatId = await adapters.startGroupChat(wallet, groupMembers, name, picture)
+		await adapters.startGroupChat(wallet, chatId, groupMembers, name, picture)
 		await adapters.sendInvite(wallet, chatId, groupMembers)
 
 		buttonDisabled = false
@@ -108,7 +110,11 @@
 								<div class="chat-button" role="listitem">
 									<Container grow>
 										<div class="chat">
-											<Avatar size={48} picture={chat.users[0].avatar} />
+											<Avatar
+												size={48}
+												picture={chat.users[0].avatar}
+												seed={chat.users[0].address}
+											/>
 											<div class="content">
 												<div class="user-info">
 													<span class="username">
@@ -150,19 +156,7 @@
 				</Header>
 			</svelte:fragment>
 			<Container gap={12}>
-				<div class="avatar">
-					{#if picture}
-						<div class="img">
-							<img src={getPicture(picture)} alt="profile" />
-						</div>
-					{:else}
-						<div class="no-img">
-							<div class="profile-default">
-								<UserIcon size={70} />
-							</div>
-						</div>
-					{/if}
-				</div>
+				<Avatar group {picture} seed={chatId} size={140} />
 				<InputFile bind:files={pictureFiles}>
 					<Renew />
 					Change picture
@@ -255,40 +249,4 @@
 		gap: var(--spacing-6);
 		align-items: center;
 	}
-
-	.avatar {
-		margin: var(--spacing-12) auto 0;
-		border-radius: 100px;
-	}
-	.no-img,
-	.img {
-		aspect-ratio: 1;
-		height: 140px;
-		border-radius: 100px;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		background-color: var(--color-step-10, var(--color-dark-step-50));
-		margin-inline: auto;
-		position: relative;
-
-		:global(img) {
-			aspect-ratio: 1;
-			object-fit: cover;
-			border-radius: 100px;
-		}
-	}
-
-	.profile-default {
-		position: relative;
-		width: 100%;
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-
-		:global(svg) {
-			fill: var(--color-step-50, var(--color-dark-step-10));
-		}
-	}
 </style>
diff --git a/src/routes/identity/+page.svelte b/src/routes/identity/+page.svelte
index 28a499e7..008d9718 100644
--- a/src/routes/identity/+page.svelte
+++ b/src/routes/identity/+page.svelte
@@ -4,7 +4,6 @@
 	import Renew from '$lib/components/icons/renew.svelte'
 	import Wallet from '$lib/components/icons/wallet.svelte'
 	import SettingsView from '$lib/components/icons/settings-view.svelte'
-	import User from '$lib/components/icons/user.svelte'
 	import Logout from '$lib/components/icons/logout.svelte'
 	import DocumentSigned from '$lib/components/icons/document-signed.svelte'
 
@@ -26,7 +25,8 @@
 	import { get } from 'svelte/store'
 	import AuthenticatedOnly from '$lib/components/authenticated-only.svelte'
 	import Layout from '$lib/components/layout.svelte'
-	import { getPicture, uploadPicture } from '$lib/adapters/ipfs'
+	import { uploadPicture } from '$lib/adapters/ipfs'
+	import Avatar from '$lib/components/avatar.svelte'
 
 	let avatar = $profile.avatar
 	let name = $profile.name
@@ -86,21 +86,9 @@
 			</Button>
 		</Header>
 	</svelte:fragment>
-	<AuthenticatedOnly>
+	<AuthenticatedOnly let:wallet>
 		<Container gap={6}>
-			<div class="avatar">
-				{#if avatar}
-					<div class="img">
-						<img src={getPicture(avatar)} alt="your avatar" />
-					</div>
-				{:else}
-					<div class="no-img">
-						<div class="profile-default">
-							<User size={70} />
-						</div>
-					</div>
-				{/if}
-			</div>
+			<Avatar picture={avatar} seed={wallet.address} size={140} />
 			<InputFile bind:files>
 				<Renew />
 				Change picture
@@ -159,38 +147,6 @@
 </Layout>
 
 <style lang="scss">
-	.avatar {
-		margin: var(--spacing-12) 0px;
-		border-radius: 100px;
-	}
-	.no-img,
-	.img {
-		aspect-ratio: 1;
-		height: 140px;
-		border-radius: 100px;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		background-color: var(--color-step-10, var(--color-dark-step-50));
-		margin-inline: auto;
-		position: relative;
-
-		:global(img) {
-			aspect-ratio: 1;
-			object-fit: cover;
-			border-radius: 100px;
-		}
-	}
-
-	.profile-default {
-		position: relative;
-		width: 100%;
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
 	.displayname {
 		margin-top: var(--spacing-6);
 		margin-bottom: var(--spacing-12);
diff --git a/src/routes/identity/new/+page.svelte b/src/routes/identity/new/+page.svelte
index 892b6a3c..c3a38d5c 100644
--- a/src/routes/identity/new/+page.svelte
+++ b/src/routes/identity/new/+page.svelte
@@ -2,7 +2,6 @@
 	import ArrowRight from '$lib/components/icons/arrow-right.svelte'
 	import ChevronLeft from '$lib/components/icons/chevron-left.svelte'
 	import Renew from '$lib/components/icons/renew.svelte'
-	import User from '$lib/components/icons/user.svelte'
 
 	import Button from '$lib/components/button.svelte'
 	import Container from '$lib/components/container.svelte'
@@ -17,7 +16,8 @@
 	import { HDNodeWallet, Wallet } from 'ethers'
 	import { walletStore } from '$lib/stores/wallet'
 	import Layout from '$lib/components/layout.svelte'
-	import { getPicture, uploadPicture } from '$lib/adapters/ipfs'
+	import { uploadPicture } from '$lib/adapters/ipfs'
+	import Avatar from '$lib/components/avatar.svelte'
 
 	let picture = ''
 	let name = ''
@@ -72,17 +72,7 @@
 	</svelte:fragment>
 	<Container gap={12} justify="center">
 		<div class="avatar">
-			{#if picture}
-				<div class="img">
-					<img src={getPicture(picture)} alt="profile" />
-				</div>
-			{:else}
-				<div class="no-img">
-					<div class="profile-default">
-						<User size={70} />
-					</div>
-				</div>
-			{/if}
+			<Avatar size={140} {picture} seed={wallet?.address} />
 		</div>
 		<InputFile bind:files={pictureFiles}>
 			<Renew />
@@ -106,35 +96,4 @@
 		margin: var(--spacing-12) auto 0;
 		border-radius: 100px;
 	}
-	.no-img,
-	.img {
-		aspect-ratio: 1;
-		height: 140px;
-		border-radius: 100px;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		background-color: var(--color-step-10, var(--color-dark-step-50));
-		margin-inline: auto;
-		position: relative;
-
-		:global(img) {
-			aspect-ratio: 1;
-			object-fit: cover;
-			border-radius: 100px;
-		}
-	}
-
-	.profile-default {
-		position: relative;
-		width: 100%;
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-
-		:global(svg) {
-			fill: var(--color-step-50, var(--color-dark-step-10));
-		}
-	}
 </style>
diff --git a/src/routes/invite/[address]/+page.svelte b/src/routes/invite/[address]/+page.svelte
index ea5c346a..5772984f 100644
--- a/src/routes/invite/[address]/+page.svelte
+++ b/src/routes/invite/[address]/+page.svelte
@@ -175,7 +175,7 @@
 			</Container>
 		{:else}
 			<Container gap={6} justify="center" align="center" padX={24}>
-				<Avatar picture={counterParty?.avatar} size={140} />
+				<Avatar picture={counterParty?.avatar} seed={counterParty?.address} size={140} />
 				<p class="text-lg text-bold">Chat with {counterParty?.name ?? $page.params.address}</p>
 				<p class="text-lg description">
 					Connect with {counterParty?.name ?? $page.params.address} and start a private chat on Waku