diff --git a/code/CHANGELOG.md b/code/CHANGELOG.md
index 7d236e4ff..4ec9cdbb4 100644
--- a/code/CHANGELOG.md
+++ b/code/CHANGELOG.md
@@ -13,15 +13,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-## Added
+### Added
 
 - [#264](https://github.com/InditexTech/weavejs/issues/264) User selection awareness events plugin
 
-## Changed
+### Changed
 
 - [#263](https://github.com/InditexTech/weavejs/issues/263) Awareness cursor UI improvements
+- [#274](https://github.com/InditexTech/weavejs/issues/274) Update create-app frontend
 
-## Fixed
+### Fixed
 
 - [#245](https://github.com/InditexTech/weavejs/issues/245) Frames drag-and-drop quirks when frames overlap
 
diff --git a/code/packages/create-frontend-app/template/+nextjs+azure-web-pubsub/components/room-components/connected-users.tsx b/code/packages/create-frontend-app/template/+nextjs+azure-web-pubsub/components/room-components/connected-users.tsx
index c1903c27c..c33c3d710 100644
--- a/code/packages/create-frontend-app/template/+nextjs+azure-web-pubsub/components/room-components/connected-users.tsx
+++ b/code/packages/create-frontend-app/template/+nextjs+azure-web-pubsub/components/room-components/connected-users.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import React from 'react';
-import Avatar from 'boring-avatars';
 import { Avatar as AvatarUI, AvatarFallback } from '@/components/ui/avatar';
 import {
   Tooltip,
@@ -19,6 +18,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { useWeave } from '@inditextech/weave-react';
 import { cn } from '@/lib/utils';
+import { getUserShort, stringToColor } from '../utils/users';
 
 export const ConnectedUsers = () => {
   const connectedUsers = useWeave((state) => state.users);
@@ -61,10 +61,10 @@ export const ConnectedUsers = () => {
           {connectedUserKey && (
             <Tooltip>
               <TooltipTrigger asChild>
-                <button className="cursor-pointer">
-                  <AvatarUI className="w-[32px] h-[32px]">
-                    <AvatarFallback>
-                      <Avatar name={user?.name} size={32} variant="beam" />
+                <button className="cursor-pointer rounded-none">
+                  <AvatarUI className="w-[32px] h-[32px] bg-muted font-light text-[13] leading-[18px]">
+                    <AvatarFallback className="bg-transparent uppercase">
+                      {getUserShort(user?.name ?? '')}
                     </AvatarFallback>
                   </AvatarUI>
                 </button>
@@ -72,8 +72,12 @@ export const ConnectedUsers = () => {
               <TooltipContent
                 sideOffset={8}
                 side="bottom"
-                className="rounded-none"
+                className="rounded-none flex gap-2 justify-start items-center"
               >
+                <div
+                  className="w-[16px] h-[16px]"
+                  style={{ background: stringToColor(user?.name ?? '') }}
+                ></div>
                 <p className="font-inter text-xs">{user?.name}</p>
               </TooltipContent>
             </Tooltip>
@@ -84,19 +88,23 @@ export const ConnectedUsers = () => {
               <Tooltip key={user}>
                 <TooltipTrigger asChild>
                   <button className="cursor-pointer">
-                    <AvatarUI className="w-[32px] h-[32px]">
-                      <AvatarFallback>
-                        <Avatar
-                          name={userInfo?.name}
-                          size={32}
-                          variant="beam"
-                        />
+                    <AvatarUI className="w-[32px] h-[32px] bg-muted font-light text-[13] leading-[18px]">
+                      <AvatarFallback className="bg-transparent uppercase">
+                        {getUserShort(userInfo?.name ?? '')}
                       </AvatarFallback>
                     </AvatarUI>
                   </button>
                 </TooltipTrigger>
-                <TooltipContent side="bottom">
-                  <p className="font-inter text-sm">{userInfo.name}</p>
+                <TooltipContent
+                  sideOffset={8}
+                  side="bottom"
+                  className="rounded-none flex gap-2 justify-start items-center"
+                >
+                  <div
+                    className="w-[16px] h-[16px]"
+                    style={{ background: stringToColor(userInfo?.name ?? '') }}
+                  ></div>
+                  <p className="font-inter text-xs">{userInfo.name}</p>
                 </TooltipContent>
               </Tooltip>
             );
@@ -110,14 +118,18 @@ export const ConnectedUsers = () => {
                   >
                     <DropdownMenuTrigger
                       className={cn(
-                        'rounded-none cursor-pointer p-2 hover:bg-accent focus:outline-none',
+                        'rounded-full cursor-pointer p-1 !bg-muted hover:bg-accent focus:outline-none',
                         {
                           ['bg-accent']: menuOpen,
                           ['bg-white']: !menuOpen,
                         }
                       )}
                     >
-                      <ChevronDown className="rounded-none" />
+                      <ChevronDown
+                        size={24}
+                        strokeWidth={1}
+                        className="rounded-none"
+                      />
                     </DropdownMenuTrigger>
                     <DropdownMenuContent
                       align="end"
@@ -133,9 +145,15 @@ export const ConnectedUsers = () => {
                             key={user}
                             className="text-foreground focus:bg-white hover:rounded-none"
                           >
-                            <AvatarUI className="w-[32px] h-[32px]">
-                              <AvatarFallback>
-                                <Avatar name={userInfo?.name} variant="beam" />
+                            <div
+                              className="w-[16px] h-[16px]"
+                              style={{
+                                background: stringToColor(userInfo?.name ?? ''),
+                              }}
+                            ></div>
+                            <AvatarUI className="w-[32px] h-[32px] bg-muted font-light text-[13] leading-[18px]">
+                              <AvatarFallback className="bg-transparent uppercase">
+                                {getUserShort(userInfo?.name ?? '')}
                               </AvatarFallback>
                             </AvatarUI>
                             {userInfo?.name}
diff --git a/code/packages/create-frontend-app/template/+nextjs+azure-web-pubsub/components/utils/users.ts b/code/packages/create-frontend-app/template/+nextjs+azure-web-pubsub/components/utils/users.ts
new file mode 100644
index 000000000..39ef08209
--- /dev/null
+++ b/code/packages/create-frontend-app/template/+nextjs+azure-web-pubsub/components/utils/users.ts
@@ -0,0 +1,18 @@
+export const stringToColor = (str: string) => {
+  let hash = 0;
+  str.split("").forEach((char) => {
+    hash = char.charCodeAt(0) + ((hash << 5) - hash);
+  });
+  let colour = "#";
+  for (let i = 0; i < 3; i++) {
+    const value = (hash >> (i * 8)) & 0xff;
+    colour += value.toString(16).padStart(2, "0");
+  }
+  return colour;
+};
+
+export const getUserShort = (userName: string) => {
+  const firstLetter = userName.slice(0, 1);
+  const lastLetter = userName.slice(-1);
+  return `${firstLetter}${lastLetter}`;
+};
diff --git a/code/packages/create-frontend-app/template/+nextjs+websockets/components/room-components/connected-users.tsx b/code/packages/create-frontend-app/template/+nextjs+websockets/components/room-components/connected-users.tsx
index c1903c27c..c33c3d710 100644
--- a/code/packages/create-frontend-app/template/+nextjs+websockets/components/room-components/connected-users.tsx
+++ b/code/packages/create-frontend-app/template/+nextjs+websockets/components/room-components/connected-users.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import React from 'react';
-import Avatar from 'boring-avatars';
 import { Avatar as AvatarUI, AvatarFallback } from '@/components/ui/avatar';
 import {
   Tooltip,
@@ -19,6 +18,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { useWeave } from '@inditextech/weave-react';
 import { cn } from '@/lib/utils';
+import { getUserShort, stringToColor } from '../utils/users';
 
 export const ConnectedUsers = () => {
   const connectedUsers = useWeave((state) => state.users);
@@ -61,10 +61,10 @@ export const ConnectedUsers = () => {
           {connectedUserKey && (
             <Tooltip>
               <TooltipTrigger asChild>
-                <button className="cursor-pointer">
-                  <AvatarUI className="w-[32px] h-[32px]">
-                    <AvatarFallback>
-                      <Avatar name={user?.name} size={32} variant="beam" />
+                <button className="cursor-pointer rounded-none">
+                  <AvatarUI className="w-[32px] h-[32px] bg-muted font-light text-[13] leading-[18px]">
+                    <AvatarFallback className="bg-transparent uppercase">
+                      {getUserShort(user?.name ?? '')}
                     </AvatarFallback>
                   </AvatarUI>
                 </button>
@@ -72,8 +72,12 @@ export const ConnectedUsers = () => {
               <TooltipContent
                 sideOffset={8}
                 side="bottom"
-                className="rounded-none"
+                className="rounded-none flex gap-2 justify-start items-center"
               >
+                <div
+                  className="w-[16px] h-[16px]"
+                  style={{ background: stringToColor(user?.name ?? '') }}
+                ></div>
                 <p className="font-inter text-xs">{user?.name}</p>
               </TooltipContent>
             </Tooltip>
@@ -84,19 +88,23 @@ export const ConnectedUsers = () => {
               <Tooltip key={user}>
                 <TooltipTrigger asChild>
                   <button className="cursor-pointer">
-                    <AvatarUI className="w-[32px] h-[32px]">
-                      <AvatarFallback>
-                        <Avatar
-                          name={userInfo?.name}
-                          size={32}
-                          variant="beam"
-                        />
+                    <AvatarUI className="w-[32px] h-[32px] bg-muted font-light text-[13] leading-[18px]">
+                      <AvatarFallback className="bg-transparent uppercase">
+                        {getUserShort(userInfo?.name ?? '')}
                       </AvatarFallback>
                     </AvatarUI>
                   </button>
                 </TooltipTrigger>
-                <TooltipContent side="bottom">
-                  <p className="font-inter text-sm">{userInfo.name}</p>
+                <TooltipContent
+                  sideOffset={8}
+                  side="bottom"
+                  className="rounded-none flex gap-2 justify-start items-center"
+                >
+                  <div
+                    className="w-[16px] h-[16px]"
+                    style={{ background: stringToColor(userInfo?.name ?? '') }}
+                  ></div>
+                  <p className="font-inter text-xs">{userInfo.name}</p>
                 </TooltipContent>
               </Tooltip>
             );
@@ -110,14 +118,18 @@ export const ConnectedUsers = () => {
                   >
                     <DropdownMenuTrigger
                       className={cn(
-                        'rounded-none cursor-pointer p-2 hover:bg-accent focus:outline-none',
+                        'rounded-full cursor-pointer p-1 !bg-muted hover:bg-accent focus:outline-none',
                         {
                           ['bg-accent']: menuOpen,
                           ['bg-white']: !menuOpen,
                         }
                       )}
                     >
-                      <ChevronDown className="rounded-none" />
+                      <ChevronDown
+                        size={24}
+                        strokeWidth={1}
+                        className="rounded-none"
+                      />
                     </DropdownMenuTrigger>
                     <DropdownMenuContent
                       align="end"
@@ -133,9 +145,15 @@ export const ConnectedUsers = () => {
                             key={user}
                             className="text-foreground focus:bg-white hover:rounded-none"
                           >
-                            <AvatarUI className="w-[32px] h-[32px]">
-                              <AvatarFallback>
-                                <Avatar name={userInfo?.name} variant="beam" />
+                            <div
+                              className="w-[16px] h-[16px]"
+                              style={{
+                                background: stringToColor(userInfo?.name ?? ''),
+                              }}
+                            ></div>
+                            <AvatarUI className="w-[32px] h-[32px] bg-muted font-light text-[13] leading-[18px]">
+                              <AvatarFallback className="bg-transparent uppercase">
+                                {getUserShort(userInfo?.name ?? '')}
                               </AvatarFallback>
                             </AvatarUI>
                             {userInfo?.name}
diff --git a/code/packages/create-frontend-app/template/+nextjs+websockets/components/utils/users.ts b/code/packages/create-frontend-app/template/+nextjs+websockets/components/utils/users.ts
new file mode 100644
index 000000000..39ef08209
--- /dev/null
+++ b/code/packages/create-frontend-app/template/+nextjs+websockets/components/utils/users.ts
@@ -0,0 +1,18 @@
+export const stringToColor = (str: string) => {
+  let hash = 0;
+  str.split("").forEach((char) => {
+    hash = char.charCodeAt(0) + ((hash << 5) - hash);
+  });
+  let colour = "#";
+  for (let i = 0; i < 3; i++) {
+    const value = (hash >> (i * 8)) & 0xff;
+    colour += value.toString(16).padStart(2, "0");
+  }
+  return colour;
+};
+
+export const getUserShort = (userName: string) => {
+  const firstLetter = userName.slice(0, 1);
+  const lastLetter = userName.slice(-1);
+  return `${firstLetter}${lastLetter}`;
+};
diff --git a/docs/content/docs/main/changelog/prerelease/0.16.0.mdx b/docs/content/docs/main/changelog/prerelease/0.16.0.mdx
index cbbafa962..5513636ae 100644
--- a/docs/content/docs/main/changelog/prerelease/0.16.0.mdx
+++ b/docs/content/docs/main/changelog/prerelease/0.16.0.mdx
@@ -1,11 +1,11 @@
 ---
 title: v0.16.0
-description: Awareness Improvements
+description: Awareness improvements & other minor improvements and bugfixes
 ---
 
 ## Metadata
 
-- **Release date**: 2025-05-22
+- **Release date**: 2025-05-23
 
 ## Added
 
@@ -14,7 +14,9 @@ description: Awareness Improvements
 ## Changed
 
 - [#263](https://github.com/InditexTech/weavejs/issues/263) Awareness cursor UI improvements
+- [#274](https://github.com/InditexTech/weavejs/issues/274) Update create-app frontend
 
 ## Fixed
 
+- [#238](https://github.com/InditexTech/weavejs/issues/238) Crop image resizing and after-cropping position issues
 - [#245](https://github.com/InditexTech/weavejs/issues/245) Frames drag-and-drop quirks when frames overlap