diff --git a/src/components/user-profile/views/FriendsContainerView.tsx b/src/components/user-profile/FriendsContainerView.tsx
similarity index 73%
rename from src/components/user-profile/views/FriendsContainerView.tsx
rename to src/components/user-profile/FriendsContainerView.tsx
index fda867f5..b92b82d0 100644
--- a/src/components/user-profile/views/FriendsContainerView.tsx
+++ b/src/components/user-profile/FriendsContainerView.tsx
@@ -1,7 +1,6 @@
 import { RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
-import { LocalizeText } from '../../../api';
-import { Text } from '../../../common';
+import { LocalizeText } from '../../api';
 import { RelationshipsContainerView } from './RelationshipsContainerView';
 
 interface FriendsContainerViewProps
@@ -16,11 +15,11 @@ export const FriendsContainerView: FC<FriendsContainerViewProps> = props =>
 
     return (
         <div className="flex flex-col gap-1">
-            <Text small>
+            <p className="text-sm">
                 <b>{ LocalizeText('extendedprofile.friends.count') }</b> { friendsCount }
-            </Text>
-            <Text bold small>{ LocalizeText('extendedprofile.relstatus') }</Text>
-            <div className="flex flex-col gap-2">
+            </p>
+            <div className="flex flex-col gap-1">
+                <p className="text-sm font-bold">{ LocalizeText('extendedprofile.relstatus') }</p>
                 <RelationshipsContainerView relationships={ relationships } />
             </div>
         </div>
diff --git a/src/components/user-profile/views/GroupsContainerView.tsx b/src/components/user-profile/GroupsContainerView.tsx
similarity index 94%
rename from src/components/user-profile/views/GroupsContainerView.tsx
rename to src/components/user-profile/GroupsContainerView.tsx
index 3fbd224f..3ffd7874 100644
--- a/src/components/user-profile/views/GroupsContainerView.tsx
+++ b/src/components/user-profile/GroupsContainerView.tsx
@@ -1,9 +1,9 @@
 import { GroupInformationComposer, GroupInformationEvent, GroupInformationParser, HabboGroupEntryData } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { SendMessageComposer, ToggleFavoriteGroup } from '../../../api';
-import { AutoGrid, Column, Grid, GridProps, LayoutBadgeImageView, LayoutGridItem } from '../../../common';
-import { useMessageEvent } from '../../../hooks';
-import { GroupInformationView } from '../../groups/views/GroupInformationView';
+import { SendMessageComposer, ToggleFavoriteGroup } from '../../api';
+import { AutoGrid, Column, Grid, GridProps, LayoutBadgeImageView, LayoutGridItem } from '../../common';
+import { useMessageEvent } from '../../hooks';
+import { GroupInformationView } from '../groups/views/GroupInformationView';
 
 interface GroupsContainerViewProps extends GridProps
 {
diff --git a/src/components/user-profile/views/RelationshipsContainerView.tsx b/src/components/user-profile/RelationshipsContainerView.tsx
similarity index 79%
rename from src/components/user-profile/views/RelationshipsContainerView.tsx
rename to src/components/user-profile/RelationshipsContainerView.tsx
index 956232a9..7bdca660 100644
--- a/src/components/user-profile/views/RelationshipsContainerView.tsx
+++ b/src/components/user-profile/RelationshipsContainerView.tsx
@@ -1,7 +1,7 @@
 import { RelationshipStatusEnum, RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
-import { GetUserProfile, LocalizeText } from '../../../api';
-import { Flex, LayoutAvatarImageView, Text } from '../../../common';
+import { GetUserProfile, LocalizeText } from '../../api';
+import { Flex, LayoutAvatarImageView } from '../../common';
 
 interface RelationshipsContainerViewProps
 {
@@ -27,26 +27,26 @@ export const RelationshipsContainerView: FC<RelationshipsContainerViewProps> = p
                 <Flex center className="h-[25px]">
                     <i className={ `nitro-friends-spritesheet icon-${ relationshipName }` } />
                 </Flex>
-                <div className="flex flex-col !flex-grow gap-0">
-                    <Flex alignItems="center" className="bg-white rounded px-2 py-1 h-[25px]" justifyContent="between">
-                        <Text pointer small underline onClick={ event => (relationshipInfo && (relationshipInfo.randomFriendId >= 1) && GetUserProfile(relationshipInfo.randomFriendId)) }>
+                <div className="flex flex-col flex-grow gap-0">
+                    <div className="flex items-center justify-between bg-white rounded px-2 py-1 h-[25px]">
+                        <p className="text-sm underline pointer" onClick={ event => (relationshipInfo && (relationshipInfo.randomFriendId >= 1) && GetUserProfile(relationshipInfo.randomFriendId)) }>
                             { (!relationshipInfo || (relationshipInfo.friendCount === 0)) &&
                                 LocalizeText('extendedprofile.add.friends') }
                             { (relationshipInfo && (relationshipInfo.friendCount >= 1)) &&
                                 relationshipInfo.randomFriendName }
-                        </Text>
+                        </p>
                         { (relationshipInfo && (relationshipInfo.friendCount >= 1)) &&
                             <div className="flex items-center justify-center w-[50px] h-[50px] top-[20px] -right-[8px] relative">
                                 <LayoutAvatarImageView direction={ 4 } figure={ relationshipInfo.randomFriendFigure } headOnly={ true } />
                             </div> }
-                    </Flex>
-                    <Text italics small className="mt-[2px] ml-[5px] !text-[#939392]">
+                    </div>
+                    <p className="italics text-sm mt-[2px] ml-[5px] !text-[#939392]">
                         { (!relationshipInfo || (relationshipInfo.friendCount === 0)) &&
                             LocalizeText('extendedprofile.no.friends.in.this.category') }
                         { (relationshipInfo && (relationshipInfo.friendCount > 1)) &&
                             LocalizeText(`extendedprofile.relstatus.others.${ relationshipName }`, [ 'count' ], [ (relationshipInfo.friendCount - 1).toString() ]) }
                         &nbsp;
-                    </Text>
+                    </p>
                 </div>
             </div>
         );
diff --git a/src/components/user-profile/views/UserContainerView.tsx b/src/components/user-profile/UserContainerView.tsx
similarity index 75%
rename from src/components/user-profile/views/UserContainerView.tsx
rename to src/components/user-profile/UserContainerView.tsx
index 2f52674e..20d0768c 100644
--- a/src/components/user-profile/views/UserContainerView.tsx
+++ b/src/components/user-profile/UserContainerView.tsx
@@ -1,14 +1,11 @@
 import { GetSessionDataManager, RequestFriendComposer, UserProfileParser } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { FriendlyTime, LocalizeText, SendMessageComposer } from '../../../api';
-import { LayoutAvatarImageView, Text } from '../../../common';
+import { FriendlyTime, LocalizeText, SendMessageComposer } from '../../api';
+import { LayoutAvatarImageView, Text } from '../../common';
 
-interface UserContainerViewProps
-{
+export const UserContainerView: FC<{
     userProfile: UserProfileParser;
-}
-
-export const UserContainerView: FC<UserContainerViewProps> = props =>
+}> = props =>
 {
     const { userProfile = null } = props;
     const [ requestSent, setRequestSent ] = useState(userProfile.requestSent);
@@ -34,21 +31,21 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
             </div>
             <div className="flex flex-col gap-2">
                 <div className="flex flex-col gap-0">
-                    <Text bold>{ userProfile.username }</Text>
-                    <Text italics small textBreak>{ userProfile.motto }&nbsp;</Text>
+                    <p className="leading-tight">{ userProfile.username }</p>
+                    <p className="text-sm italic leading-tight">{ userProfile.motto }</p>
                 </div>
                 <div className="flex flex-col gap-1">
-                    <Text small>
+                    <p className="text-sm leading-none">
                         <b>{ LocalizeText('extendedprofile.created') }</b> { userProfile.registration }
-                    </Text>
-                    <Text small>
+                    </p>
+                    <p className="text-sm leading-none">
                         <b>{ LocalizeText('extendedprofile.last.login') }</b> { FriendlyTime.format(userProfile.secondsSinceLastVisit, '.ago', 2) }
-                    </Text>
-                    <Text small>
+                    </p>
+                    <p className="text-sm leading-none">
                         <b>{ LocalizeText('extendedprofile.achievementscore') }</b> { userProfile.achievementPoints }
-                    </Text>
+                    </p>
                 </div>
-                <div className="flex gap-1">
+                <div className="flex items-center gap-1">
                     { userProfile.isOnline &&
                         <i className="nitro-icon icon-pf-online" /> }
                     { !userProfile.isOnline &&
@@ -60,11 +57,11 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
                             <>
                                 <i className="nitro-icon icon-pf-tick" />
                                 { isOwnProfile &&
-                                    <Text>{ LocalizeText('extendedprofile.me') }</Text> }
+                                    <p>{ LocalizeText('extendedprofile.me') }</p> }
                                 { userProfile.isMyFriend &&
-                                    <Text>{ LocalizeText('extendedprofile.friend') }</Text> }
+                                    <p>{ LocalizeText('extendedprofile.friend') }</p> }
                                 { (requestSent || userProfile.requestSent) &&
-                                    <Text>{ LocalizeText('extendedprofile.friendrequestsent') }</Text> }
+                                    <p>{ LocalizeText('extendedprofile.friendrequestsent') }</p> }
                             </> }
                     </div>
                 </div>
diff --git a/src/components/user-profile/UserProfileView.tsx b/src/components/user-profile/UserProfileView.tsx
index aa21cda1..f57612be 100644
--- a/src/components/user-profile/UserProfileView.tsx
+++ b/src/components/user-profile/UserProfileView.tsx
@@ -1,12 +1,12 @@
 import { CreateLinkEvent, ExtendedProfileChangedMessageEvent, GetSessionDataManager, RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomEngineObjectEvent, RoomObjectCategory, RoomObjectType, UserCurrentBadgesComposer, UserCurrentBadgesEvent, UserProfileEvent, UserProfileParser, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
 import { FC, useState } from 'react';
 import { GetRoomSession, GetUserProfile, LocalizeText, SendMessageComposer } from '../../api';
-import { Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
+import { Flex, Grid, LayoutBadgeImageView, Text } from '../../common';
 import { useMessageEvent, useNitroEvent } from '../../hooks';
-import { BadgesContainerView } from './views/BadgesContainerView';
-import { FriendsContainerView } from './views/FriendsContainerView';
-import { GroupsContainerView } from './views/GroupsContainerView';
-import { UserContainerView } from './views/UserContainerView';
+import { NitroCard } from '../../layout';
+import { FriendsContainerView } from './FriendsContainerView';
+import { GroupsContainerView } from './GroupsContainerView';
+import { UserContainerView } from './UserContainerView';
 
 export const UserProfileView: FC<{}> = props =>
 {
@@ -94,29 +94,32 @@ export const UserProfileView: FC<{}> = props =>
     if(!userProfile) return null;
 
     return (
-        <NitroCardView className="w-[470px] h-[460px]" theme="primary-slim" uniqueKey="nitro-user-profile">
-            <NitroCardHeaderView headerText={ LocalizeText('extendedprofile.caption') } onCloseClick={ onClose } />
-            <NitroCardContentView overflow="hidden">
+        <NitroCard className="w-[470px] h-[460px]" uniqueKey="nitro-user-profile">
+            <NitroCard.Header
+                headerText={ LocalizeText('extendedprofile.caption') }
+                onCloseClick={ onClose } />
+            <NitroCard.Content
+                className="overflow-hidden">
                 <Grid fullHeight={ false } gap={ 2 }>
-                    <Column className="border-r border-r-gray pe-2" gap={ 1 } size={ 7 }>
+                    <div className="flex flex-col col-span-7 gap-1 border-r border-r-gray pe-2">
                         <UserContainerView userProfile={ userProfile } />
-                        <Grid fullHeight className="bg-muted rounded px-2 py-1" columnCount={ 5 }>
-                            <BadgesContainerView center fullWidth badges={ userBadges } />
-                        </Grid>
-                    </Column>
-                    <Column size={ 5 }>
+                        <div className="flex items-center justify-center w-full gap-3 p-2 rounded bg-muted">
+                            { userBadges && (userBadges.length > 0) && userBadges.map((badge, index) => <LayoutBadgeImageView key={ badge } badgeCode={ badge } />) }
+                        </div>
+                    </div>
+                    <div className="flex flex-col col-span-5">
                         { userRelationships &&
                             <FriendsContainerView friendsCount={ userProfile.friendsCount } relationships={ userRelationships } /> }
-                    </Column>
+                    </div>
                 </Grid>
-                <Flex alignItems="center" className=" border-t border-t-gray border-b border-b-gray  px-2 py-1">
+                <Flex alignItems="center" className="px-2 py-1 border-t border-b border-t-gray border-b-gray">
                     <Flex alignItems="center" gap={ 1 } onClick={ event => CreateLinkEvent(`navigator/search/hotel_view/owner:${ userProfile.username }`) }>
                         <i className="nitro-icon icon-rooms" />
                         <Text bold pointer underline>{ LocalizeText('extendedprofile.rooms') }</Text>
                     </Flex>
                 </Flex>
                 <GroupsContainerView fullWidth groups={ userProfile.groups } itsMe={ userProfile.id === GetSessionDataManager().userId } onLeaveGroup={ onLeaveGroup } />
-            </NitroCardContentView>
-        </NitroCardView>
+            </NitroCard.Content>
+        </NitroCard>
     );
 };
diff --git a/src/components/user-profile/views/BadgesContainerView.tsx b/src/components/user-profile/views/BadgesContainerView.tsx
deleted file mode 100644
index 6c415903..00000000
--- a/src/components/user-profile/views/BadgesContainerView.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { FC } from 'react';
-import { Column, FlexProps, LayoutBadgeImageView } from '../../../common';
-
-interface BadgesContainerViewProps extends FlexProps
-{
-    badges: string[];
-}
-
-export const BadgesContainerView: FC<BadgesContainerViewProps> = props =>
-{
-    const { badges = null, gap = 1, justifyContent = 'between', ...rest } = props;
-
-    return (
-        <>
-            { badges && (badges.length > 0) && badges.map((badge, index) =>
-            {
-                return (
-                    <Column key={ badge } center>
-                        <LayoutBadgeImageView key={ badge } badgeCode={ badge } />
-                    </Column>
-                );
-            }) }
-        </>
-    );
-};