diff --git a/src/common/index.scss b/src/common/index.scss
index 524b39b6..f5481279 100644
--- a/src/common/index.scss
+++ b/src/common/index.scss
@@ -267,5 +267,56 @@
     z-index: 1;
 }
 
+.badge-image {
+    position: relative;
+    width: 40px;
+    height: 40px;
+    background-repeat: no-repeat;
+    background-position: center;
+
+    &.group-badge {
+        width: 39px;
+        height: 39px;
+
+        &.scale-2 {
+            width: 80px;
+            height: 80px;
+        }
+    }
+    
+    .badge-information {
+        display: none;
+    }
+
+    &:hover {
+        .badge-information {
+            display: block;
+        }
+    }
+
+    .badge-information {
+        position: absolute;
+        pointer-events: none;
+        user-select: none;
+        width: 210px;
+        border-radius: $border-radius;
+        background: $white;
+        left: -220px;
+        z-index: 100;
+    
+        &:before {
+            position: absolute;
+            content: ' ';
+            width: 0;
+            height: 0;
+            border-left: 10px solid $white;
+            border-bottom: 10px solid transparent;
+            border-top: 10px solid transparent;
+            top: 10px;
+            right: -10px;
+        }
+    }
+}
+
 
 @import './card/NitroCardView';
diff --git a/src/views/shared/badge-image/BadgeImageView.tsx b/src/common/layout/LayoutBadgeImageView.tsx
similarity index 90%
rename from src/views/shared/badge-image/BadgeImageView.tsx
rename to src/common/layout/LayoutBadgeImageView.tsx
index d70ff622..8c48acd1 100644
--- a/src/views/shared/badge-image/BadgeImageView.tsx
+++ b/src/common/layout/LayoutBadgeImageView.tsx
@@ -1,10 +1,10 @@
 import { BadgeImageReadyEvent, NitroSprite, TextureUtils } from '@nitrots/nitro-renderer';
 import { CSSProperties, FC, useEffect, useMemo, useState } from 'react';
-import { GetSessionDataManager, LocalizeBadgeDescription, LocalizeBadgeName, LocalizeText } from '../../../api';
-import { Base, BaseProps } from '../../../common/Base';
-import { BadgeInformationView } from './badge-info/BadgeInformationView';
+import { GetSessionDataManager, LocalizeBadgeDescription, LocalizeBadgeName, LocalizeText } from '../../api';
+import { BadgeInformationView } from '../../views/shared/badge-image/badge-info/BadgeInformationView';
+import { Base, BaseProps } from '../Base';
 
-export interface BadgeImageViewProps extends BaseProps<HTMLDivElement>
+export interface LayoutBadgeImageViewProps extends BaseProps<HTMLDivElement>
 {
     badgeCode: string;
     isGroup?: boolean;
@@ -14,7 +14,7 @@ export interface BadgeImageViewProps extends BaseProps<HTMLDivElement>
     scale?: number;
 }
 
-export const BadgeImageView: FC<BadgeImageViewProps> = props =>
+export const LayoutBadgeImageView: FC<LayoutBadgeImageViewProps> = props =>
 {
     const { badgeCode = null, isGroup = false, showInfo = false, customTitle = null, isGrayscale = false, scale = 1, classNames = [], style = {}, children = null, ...rest } = props;
     const [ badgeUrl, setBadgeUrl ] = useState<string>('');
diff --git a/src/common/layout/index.ts b/src/common/layout/index.ts
index 0fa5bbb2..dd6afb36 100644
--- a/src/common/layout/index.ts
+++ b/src/common/layout/index.ts
@@ -1,3 +1,4 @@
+export * from './LayoutBadgeImageView';
 export * from './LayoutCurrencyIcon';
 export * from './LayoutGiftTagView';
 export * from './LayoutGridItem';
diff --git a/src/views/shared/friendly-time/FriendlyTimeView.tsx b/src/common/utils/FriendlyTimeView.tsx
similarity index 95%
rename from src/views/shared/friendly-time/FriendlyTimeView.tsx
rename to src/common/utils/FriendlyTimeView.tsx
index 41a24426..d98d45e8 100644
--- a/src/views/shared/friendly-time/FriendlyTimeView.tsx
+++ b/src/common/utils/FriendlyTimeView.tsx
@@ -1,6 +1,6 @@
 import { FriendlyTime } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { Base, BaseProps } from '../../../common';
+import { Base, BaseProps } from '..';
 
 interface FriendlyTimeViewProps extends BaseProps<HTMLDivElement>
 {
diff --git a/src/common/utils/index.ts b/src/common/utils/index.ts
index 68182b4c..11d60a34 100644
--- a/src/common/utils/index.ts
+++ b/src/common/utils/index.ts
@@ -1 +1,2 @@
 export * from './CreateTransitionToIcon';
+export * from './FriendlyTimeView';
diff --git a/src/components/achievements/views/achievement-badge/AchievementBadgeView.tsx b/src/components/achievements/views/achievement-badge/AchievementBadgeView.tsx
index 26b266ee..08de4de8 100644
--- a/src/components/achievements/views/achievement-badge/AchievementBadgeView.tsx
+++ b/src/components/achievements/views/achievement-badge/AchievementBadgeView.tsx
@@ -1,7 +1,6 @@
 import { AchievementData } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
-import { BaseProps } from '../../../../common/Base';
-import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
+import { BaseProps, LayoutBadgeImageView } from '../../../../common';
 import { AchievementUtilities } from '../../common/AchievementUtilities';
 
 export interface AchievementBadgeViewProps extends BaseProps<HTMLDivElement>
@@ -17,6 +16,6 @@ export const AchievementBadgeView: FC<AchievementBadgeViewProps> = props =>
     if(!achievement) return null;
 
     return (
-        <BadgeImageView badgeCode={ AchievementUtilities.getBadgeCode(achievement) } isGrayscale={ !AchievementUtilities.hasStarted(achievement) } scale={ scale } { ...rest } />
+        <LayoutBadgeImageView badgeCode={ AchievementUtilities.getBadgeCode(achievement) } isGrayscale={ !AchievementUtilities.hasStarted(achievement) } scale={ scale } { ...rest } />
     );
 }
diff --git a/src/components/catalog/views/page/widgets/CatalogAddOnBadgeWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogAddOnBadgeWidgetView.tsx
index 5ac7f980..0b041536 100644
--- a/src/components/catalog/views/page/widgets/CatalogAddOnBadgeWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogAddOnBadgeWidgetView.tsx
@@ -1,6 +1,5 @@
 import { FC } from 'react';
-import { BaseProps } from '../../../../../common/Base';
-import { BadgeImageView } from '../../../../../views/shared/badge-image/BadgeImageView';
+import { BaseProps, LayoutBadgeImageView } from '../../../../../common';
 import { useCatalogContext } from '../../../CatalogContext';
 
 interface CatalogAddOnBadgeWidgetViewProps extends BaseProps<HTMLDivElement>
@@ -15,5 +14,5 @@ export const CatalogAddOnBadgeWidgetView: FC<CatalogAddOnBadgeWidgetViewProps> =
 
     if(!currentOffer || !currentOffer.badgeCode || !currentOffer.badgeCode.length) return null;
 
-    return <BadgeImageView badgeCode={ currentOffer.badgeCode } { ...rest } />;
+    return <LayoutBadgeImageView badgeCode={ currentOffer.badgeCode } { ...rest } />;
 }
diff --git a/src/components/catalog/views/page/widgets/CatalogBadgeSelectorWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogBadgeSelectorWidgetView.tsx
index 6d681655..6d243ede 100644
--- a/src/components/catalog/views/page/widgets/CatalogBadgeSelectorWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogBadgeSelectorWidgetView.tsx
@@ -1,9 +1,8 @@
 import { StringDataType } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { AutoGrid, AutoGridProps, LayoutGridItem } from '../../../../../common';
+import { AutoGrid, AutoGridProps, LayoutBadgeImageView, LayoutGridItem } from '../../../../../common';
 import { InventoryBadgesRequestEvent, InventoryBadgesUpdatedEvent } from '../../../../../events';
 import { DispatchUiEvent, UseUiEvent } from '../../../../../hooks';
-import { BadgeImageView } from '../../../../../views/shared/badge-image/BadgeImageView';
 import { useCatalogContext } from '../../../CatalogContext';
 
 const EXCLUDED_BADGE_CODES: string[] = [];
@@ -62,7 +61,7 @@ export const CatalogBadgeSelectorWidgetView: FC<CatalogBadgeSelectorWidgetViewPr
                 {
                     return (
                         <LayoutGridItem key={ code } itemActive={ (currentBadge === code) } onClick={ event => setCurrentBadge(code) }> 
-                            <BadgeImageView badgeCode={ code } />
+                            <LayoutBadgeImageView badgeCode={ code } />
                         </LayoutGridItem>
                     );
                 }) }
diff --git a/src/components/catalog/views/page/widgets/CatalogGuildBadgeWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogGuildBadgeWidgetView.tsx
index 0bbbe517..ae7deb55 100644
--- a/src/components/catalog/views/page/widgets/CatalogGuildBadgeWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogGuildBadgeWidgetView.tsx
@@ -1,7 +1,6 @@
 import { StringDataType } from '@nitrots/nitro-renderer';
 import { FC, useMemo } from 'react';
-import { BaseProps } from '../../../../../common';
-import { BadgeImageView } from '../../../../../views/shared/badge-image/BadgeImageView';
+import { BaseProps, LayoutBadgeImageView } from '../../../../../common';
 import { useCatalogContext } from '../../../CatalogContext';
 
 interface CatalogGuildBadgeWidgetViewProps extends BaseProps<HTMLDivElement>
@@ -28,5 +27,5 @@ export const CatalogGuildBadgeWidgetView: FC<CatalogGuildBadgeWidgetViewProps> =
 
     if(!badgeCode) return null;
 
-    return <BadgeImageView badgeCode={ badgeCode } isGroup={ true } { ...rest } />;
+    return <LayoutBadgeImageView badgeCode={ badgeCode } isGroup={ true } { ...rest } />;
 }
diff --git a/src/components/groups/views/GroupBadgeCreatorView.tsx b/src/components/groups/views/GroupBadgeCreatorView.tsx
index 5f231d06..04d7b864 100644
--- a/src/components/groups/views/GroupBadgeCreatorView.tsx
+++ b/src/components/groups/views/GroupBadgeCreatorView.tsx
@@ -1,7 +1,6 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Dispatch, FC, SetStateAction, useState } from 'react';
-import { Base, Column, Flex, Grid } from '../../../common';
-import { BadgeImageView } from '../../../views/shared/badge-image/BadgeImageView';
+import { Base, Column, Flex, Grid, LayoutBadgeImageView } from '../../../common';
 import { GroupBadgePart } from '../common/GroupBadgePart';
 import { useGroupsContext } from '../GroupsContext';
 
@@ -40,7 +39,7 @@ export const GroupBadgeCreatorView: FC<GroupBadgeCreatorViewProps> = props =>
                         <Flex key={ index } alignItems="center" justifyContent="between" gap={ 2 } className="bg-muted rounded px-2 py-1">
                             <Flex pointer center className="bg-muted rounded p-1" onClick={ event => setSelectedIndex(index) }>
                                 { (badgeParts[index].code && (badgeParts[index].code.length > 0)) &&
-                                <BadgeImageView badgeCode={ badgeParts[index].code } isGroup={ true } /> }
+                                <LayoutBadgeImageView badgeCode={ badgeParts[index].code } isGroup={ true } /> }
                                 { (!badgeParts[index].code || !badgeParts[index].code.length) &&
                                     <Flex center className="badge-image group-badge">
                                         <FontAwesomeIcon icon="plus" />
@@ -74,7 +73,7 @@ export const GroupBadgeCreatorView: FC<GroupBadgeCreatorViewProps> = props =>
                         {
                             return (
                                 <Column key={ index } pointer center className="bg-muted rounded p-1" onClick={ event => setPartProperty(selectedIndex, 'key', item.id) }>
-                                    <BadgeImageView badgeCode={ GroupBadgePart.getCode(badgeParts[selectedIndex].type, item.id, badgeParts[selectedIndex].color, 4) } isGroup={ true } />
+                                    <LayoutBadgeImageView badgeCode={ GroupBadgePart.getCode(badgeParts[selectedIndex].type, item.id, badgeParts[selectedIndex].color, 4) } isGroup={ true } />
                                 </Column>
                             );
                         }) }
diff --git a/src/components/groups/views/GroupInformationView.tsx b/src/components/groups/views/GroupInformationView.tsx
index 121bce5d..582b52e1 100644
--- a/src/components/groups/views/GroupInformationView.tsx
+++ b/src/components/groups/views/GroupInformationView.tsx
@@ -1,9 +1,8 @@
 import { GroupInformationParser, GroupRemoveMemberComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
 import { CreateLinkEvent, GetGroupManager, GetGroupMembers, GetSessionDataManager, LocalizeText, SendMessageComposer, TryJoinGroup, TryVisitRoom } from '../../../api';
-import { Button, Column, Flex, Grid, Text } from '../../../common';
+import { Button, Column, Flex, Grid, LayoutBadgeImageView, Text } from '../../../common';
 import { NotificationUtilities } from '../../../views/notification-center/common/NotificationUtilities';
-import { BadgeImageView } from '../../../views/shared/badge-image/BadgeImageView';
 import { CatalogPageName } from '../../catalog/common/CatalogPageName';
 import { GroupMembershipType } from '../common/GroupMembershipType';
 import { GroupType } from '../common/GroupType';
@@ -103,7 +102,7 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
         <Grid overflow="hidden">
             <Column center size={ 3 } overflow="hidden">
                 <Flex alignItems="center" overflow="hidden" className="group-badge">
-                    <BadgeImageView badgeCode={ groupInformation.badge } isGroup={ true } scale={ 2 } />
+                    <LayoutBadgeImageView badgeCode={ groupInformation.badge } isGroup={ true } scale={ 2 } />
                 </Flex>
                 <Column alignItems="center" gap={ 1 }>
                     <Text small underline pointer onClick={ () => handleAction('members') }>{ LocalizeText('group.membercount', [ 'totalMembers' ], [ groupInformation.membersCount.toString() ]) }</Text>
diff --git a/src/components/groups/views/GroupMembersView.tsx b/src/components/groups/views/GroupMembersView.tsx
index 446b270e..2e025c54 100644
--- a/src/components/groups/views/GroupMembersView.tsx
+++ b/src/components/groups/views/GroupMembersView.tsx
@@ -2,11 +2,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { GroupAdminGiveComposer, GroupAdminTakeComposer, GroupConfirmMemberRemoveEvent, GroupConfirmRemoveMemberComposer, GroupMemberParser, GroupMembersComposer, GroupMembersEvent, GroupMembershipAcceptComposer, GroupMembershipDeclineComposer, GroupMembersParser, GroupRank, GroupRemoveMemberComposer, ILinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, RemoveLinkEventTracker, SendMessageComposer } from '../../../api';
-import { Base, Button, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
+import { Base, Button, Column, Flex, Grid, LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
 import { BatchUpdates, UseMessageEventHook } from '../../../hooks';
 import { NotificationUtilities } from '../../../views/notification-center/common/NotificationUtilities';
 import { AvatarImageView } from '../../../views/shared/avatar-image/AvatarImageView';
-import { BadgeImageView } from '../../../views/shared/badge-image/BadgeImageView';
 
 export const GroupMembersView: FC<{}> = props =>
 {
@@ -167,7 +166,7 @@ export const GroupMembersView: FC<{}> = props =>
             <NitroCardContentView overflow="hidden">
                 <Flex gap={ 2 }>
                     <Flex center className="group-badge">
-                        <BadgeImageView badgeCode={ membersData.badge } isGroup={ true } className="mx-auto d-block"/>
+                        <LayoutBadgeImageView badgeCode={ membersData.badge } isGroup={ true } className="mx-auto d-block"/>
                     </Flex>
                     <Column fullWidth gap={ 1 }>
                         <input type="text" className="form-control form-control-sm w-100" placeholder={ LocalizeText('group.members.searchinfo') } value={ searchQuery } onChange={ event => setSearchQuery(event.target.value) } />
diff --git a/src/components/groups/views/GroupRoomInformationView.tsx b/src/components/groups/views/GroupRoomInformationView.tsx
index 8900d9ea..b111c5df 100644
--- a/src/components/groups/views/GroupRoomInformationView.tsx
+++ b/src/components/groups/views/GroupRoomInformationView.tsx
@@ -2,10 +2,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { DesktopViewEvent, GetGuestRoomResultEvent, GroupInformationComposer, GroupInformationEvent, GroupInformationParser, GroupRemoveMemberComposer, HabboGroupDeactivatedMessageEvent, RoomEntryInfoMessageEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { GetGroupInformation, GetGroupManager, GetSessionDataManager, LocalizeText, SendMessageComposer, TryJoinGroup } from '../../../api';
-import { Base, Button, Column, Flex, Text } from '../../../common';
+import { Base, Button, Column, Flex, LayoutBadgeImageView, Text } from '../../../common';
 import { UseMessageEventHook } from '../../../hooks';
 import { NotificationUtilities } from '../../../views/notification-center/common/NotificationUtilities';
-import { BadgeImageView } from '../../../views/shared/badge-image/BadgeImageView';
 import { GroupMembershipType } from '../common/GroupMembershipType';
 import { GroupType } from '../common/GroupType';
 
@@ -128,7 +127,7 @@ export const GroupRoomInformationView: FC<{}> = props =>
                     <>
                         <Flex pointer alignItems="center" gap={ 2 } onClick={ event => GetGroupInformation(groupInformation.id) }>
                             <Base className="group-badge">
-                                <BadgeImageView badgeCode={ groupInformation.badge } isGroup={ true } />
+                                <LayoutBadgeImageView badgeCode={ groupInformation.badge } isGroup={ true } />
                             </Base>
                             <Text variant="white">{ groupInformation.title }</Text>
                         </Flex>
diff --git a/src/components/groups/views/tabs/GroupTabBadgeView.tsx b/src/components/groups/views/tabs/GroupTabBadgeView.tsx
index e6e5dfc6..75d6214b 100644
--- a/src/components/groups/views/tabs/GroupTabBadgeView.tsx
+++ b/src/components/groups/views/tabs/GroupTabBadgeView.tsx
@@ -1,8 +1,7 @@
 import { GroupSaveBadgeComposer } from '@nitrots/nitro-renderer';
 import { Dispatch, FC, SetStateAction, useCallback, useEffect, useState } from 'react';
 import { SendMessageComposer } from '../../../../api';
-import { Column, Flex, Grid } from '../../../../common';
-import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
+import { Column, Flex, Grid, LayoutBadgeImageView } from '../../../../common';
 import { GroupBadgePart } from '../../common/GroupBadgePart';
 import { IGroupData } from '../../common/IGroupData';
 import { useGroupsContext } from '../../GroupsContext';
@@ -112,7 +111,7 @@ export const GroupTabBadgeView: FC<GroupTabBadgeViewProps> = props =>
         <Grid overflow="hidden" gap={ 1 }>
             <Column size={ 2 }>
                 <Flex center className="bg-muted rounded p-1">
-                    <BadgeImageView badgeCode={ getModifiedBadgeCode() } isGroup={ true } />
+                    <LayoutBadgeImageView badgeCode={ getModifiedBadgeCode() } isGroup={ true } />
                 </Flex>
             </Column>
             <Column size={ 10 } overflow="auto">
diff --git a/src/components/groups/views/tabs/GroupTabCreatorConfirmationView.tsx b/src/components/groups/views/tabs/GroupTabCreatorConfirmationView.tsx
index 07792208..083075b8 100644
--- a/src/components/groups/views/tabs/GroupTabCreatorConfirmationView.tsx
+++ b/src/components/groups/views/tabs/GroupTabCreatorConfirmationView.tsx
@@ -1,7 +1,6 @@
 import { Dispatch, FC, SetStateAction } from 'react';
 import { LocalizeText } from '../../../../api';
-import { Base, Column, Flex, Grid, Text } from '../../../../common';
-import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
+import { Base, Column, Flex, Grid, LayoutBadgeImageView, Text } from '../../../../common';
 import { IGroupData } from '../../common/IGroupData';
 import { useGroupsContext } from '../../GroupsContext';
 
@@ -42,7 +41,7 @@ export const GroupTabCreatorConfirmationView: FC<GroupTabCreatorConfirmationView
             <Column size={ 3 }>
                 <Column center className="bg-muted rounded p-1" gap={ 2 }>
                     <Text bold center>{ LocalizeText('group.create.confirm.guildbadge') }</Text>
-                    <BadgeImageView badgeCode={ getCompleteBadgeCode() } isGroup={ true } />
+                    <LayoutBadgeImageView badgeCode={ getCompleteBadgeCode() } isGroup={ true } />
                 </Column>
                 <Column center className="bg-muted rounded p-1" gap={ 2 }>
                     <Text bold center>{ LocalizeText('group.edit.color.guild.color') }</Text>
diff --git a/src/components/inventory/views/badge/InventoryBadgeItemView.tsx b/src/components/inventory/views/badge/InventoryBadgeItemView.tsx
index 2d179d52..d9b5427b 100644
--- a/src/components/inventory/views/badge/InventoryBadgeItemView.tsx
+++ b/src/components/inventory/views/badge/InventoryBadgeItemView.tsx
@@ -1,7 +1,6 @@
 import { MouseEventType } from '@nitrots/nitro-renderer';
 import { FC, MouseEvent } from 'react';
-import { LayoutGridItem } from '../../../../common/layout/LayoutGridItem';
-import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
+import { LayoutBadgeImageView, LayoutGridItem } from '../../../../common';
 import { useInventoryContext } from '../../InventoryContext';
 import { InventoryBadgeActions } from '../../reducers/InventoryBadgeReducer';
 
@@ -29,7 +28,7 @@ export const InventoryBadgeItemView: FC<InventoryBadgeItemViewProps> = props =>
 
     return (
         <LayoutGridItem itemActive={ (badgeState.badge === badgeCode) } onMouseDown={ onMouseEvent }> 
-            <BadgeImageView badgeCode={ badgeCode } />
+            <LayoutBadgeImageView badgeCode={ badgeCode } />
         </LayoutGridItem>
     );
 }
diff --git a/src/components/inventory/views/badge/InventoryBadgeView.tsx b/src/components/inventory/views/badge/InventoryBadgeView.tsx
index b5b05a1e..b7701ede 100644
--- a/src/components/inventory/views/badge/InventoryBadgeView.tsx
+++ b/src/components/inventory/views/badge/InventoryBadgeView.tsx
@@ -1,8 +1,7 @@
 import { RequestBadgesComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
 import { GetConfiguration, LocalizeBadgeName, LocalizeText, SendMessageComposer } from '../../../../api';
-import { AutoGrid, Button, Column, Flex, Grid, Text } from '../../../../common';
-import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
+import { AutoGrid, Button, Column, Flex, Grid, LayoutBadgeImageView, Text } from '../../../../common';
 import { useInventoryContext } from '../../InventoryContext';
 import { InventoryBadgeActions } from '../../reducers/InventoryBadgeReducer';
 import { InventoryBadgeItemView } from './InventoryBadgeItemView';
@@ -92,7 +91,7 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
                 { badge && (badge.length > 0) &&
                     <Column grow justifyContent="end" gap={ 2 }>
                         <Flex alignItems="center" gap={ 2 }>
-                            <BadgeImageView badgeCode={ badge } />
+                            <LayoutBadgeImageView badgeCode={ badge } />
                             <Text>{ LocalizeBadgeName(badge) }</Text>
                         </Flex>
                         <Button variant={ (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge') }</Button>
diff --git a/src/components/navigator/views/room-info/NavigatorRoomInfoView.tsx b/src/components/navigator/views/room-info/NavigatorRoomInfoView.tsx
index c040857f..49a62412 100644
--- a/src/components/navigator/views/room-info/NavigatorRoomInfoView.tsx
+++ b/src/components/navigator/views/room-info/NavigatorRoomInfoView.tsx
@@ -3,10 +3,9 @@ import { RoomMuteComposer, RoomSettingsComposer, RoomStaffPickComposer, Security
 import classNames from 'classnames';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { GetConfiguration, GetGroupInformation, GetSessionDataManager, LocalizeText, SendMessageComposer } from '../../../../api';
-import { Button, Column, Flex, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, UserProfileIconView } from '../../../../common';
+import { Button, Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, UserProfileIconView } from '../../../../common';
 import { FloorplanEditorEvent, NavigatorEvent, RoomWidgetThumbnailEvent } from '../../../../events';
 import { BatchUpdates, DispatchUiEvent } from '../../../../hooks';
-import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
 import { useNavigatorContext } from '../../NavigatorContext';
 import { NavigatorActions } from '../../reducers/NavigatorReducer';
 
@@ -165,7 +164,7 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
                                 <Text overflow="auto">{ roomInfoData.enteredGuestRoom.description }</Text>
                                 { (roomInfoData.enteredGuestRoom.habboGroupId > 0) &&
                                     <Flex pointer alignItems="center" gap={ 1 } onClick={ () => processAction('open_group_info') }>
-                                        <BadgeImageView className="flex-none" badgeCode={ roomInfoData.enteredGuestRoom.groupBadgeCode } isGroup={ true } />
+                                        <LayoutBadgeImageView className="flex-none" badgeCode={ roomInfoData.enteredGuestRoom.groupBadgeCode } isGroup={ true } />
                                         <Text underline>
                                             { LocalizeText('navigator.guildbase', ['groupName'], [roomInfoData.enteredGuestRoom.groupName]) }
                                         </Text>
diff --git a/src/components/user-profile/views/BadgesContainerView.tsx b/src/components/user-profile/views/BadgesContainerView.tsx
index 2d40f7e3..365dcada 100644
--- a/src/components/user-profile/views/BadgesContainerView.tsx
+++ b/src/components/user-profile/views/BadgesContainerView.tsx
@@ -1,6 +1,5 @@
 import { FC } from 'react';
-import { Grid, LayoutGridItem } from '../../../common';
-import { BadgeImageView } from '../../../views/shared/badge-image/BadgeImageView';
+import { Grid, LayoutBadgeImageView, LayoutGridItem } from '../../../common';
 
 interface BadgesContainerViewProps
 {
@@ -18,7 +17,7 @@ export const BadgesContainerView: FC<BadgesContainerViewProps> = props =>
                         {
                             return (
                                 <LayoutGridItem key={ index }>
-                                    <BadgeImageView badgeCode={ badge }/>
+                                    <LayoutBadgeImageView badgeCode={ badge }/>
                                 </LayoutGridItem>
                             )
                         }) }
diff --git a/src/components/user-profile/views/GroupsContainerView.tsx b/src/components/user-profile/views/GroupsContainerView.tsx
index ffde4cd1..a971afc3 100644
--- a/src/components/user-profile/views/GroupsContainerView.tsx
+++ b/src/components/user-profile/views/GroupsContainerView.tsx
@@ -2,8 +2,8 @@ import { GroupFavoriteComposer, GroupInformationComposer, GroupInformationEvent,
 import classNames from 'classnames';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { SendMessageComposer } from '../../../api';
+import { LayoutBadgeImageView } from '../../../common';
 import { UseMessageEventHook } from '../../../hooks';
-import { BadgeImageView } from '../../../views/shared/badge-image/BadgeImageView';
 import { GroupInformationView } from '../../groups/views/GroupInformationView';
 
 interface GroupsContainerViewProps
@@ -58,7 +58,7 @@ export const GroupsContainerView: FC<GroupsContainerViewProps> = props =>
                         {
                             return <div key={ index } onClick={ () => setSelectedGroupId(group.groupId) } className={ 'profile-groups-item position-relative flex-shrink-0 d-flex align-items-center justify-content-center cursor-pointer' + classNames({ ' active': selectedGroupId === group.groupId }) }>
                                 { itsMe && <i className={ 'position-absolute icon icon-group-' + (group.favourite ? 'favorite' : 'not-favorite') } onClick={ () => favoriteGroup(group.groupId) } /> }
-                                <BadgeImageView badgeCode={ group.badgeCode } isGroup={ true } />
+                                <LayoutBadgeImageView badgeCode={ group.badgeCode } isGroup={ true } />
                             </div>
                         }) }
                 </div>
diff --git a/src/views/friends/views/friend-bar/FriendBarItemView.tsx b/src/views/friends/views/friend-bar/FriendBarItemView.tsx
index 81d36d79..69635738 100644
--- a/src/views/friends/views/friend-bar/FriendBarItemView.tsx
+++ b/src/views/friends/views/friend-bar/FriendBarItemView.tsx
@@ -1,9 +1,8 @@
 import { FollowFriendMessageComposer, MouseEventType } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { GetUserProfile, LocalizeText, OpenMessengerChat, SendMessageComposer } from '../../../../api';
-import { Base } from '../../../../common';
+import { Base, LayoutBadgeImageView } from '../../../../common';
 import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
-import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
 import { MessengerFriend } from '../../common/MessengerFriend';
 
 interface FriendBarItemViewProps
@@ -65,7 +64,7 @@ export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
         <div ref={ elementRef } className={'btn btn-success friend-bar-item ' + (isVisible ? 'friend-bar-item-active' : '')} onClick={ event => setVisible(prevValue => !prevValue) }>
             <div className={`friend-bar-item-head position-absolute ${friend.id > 0 ? 'avatar': 'group'}`}>
                 { friend.id > 0 && <AvatarImageView headOnly={ true } figure={ friend.figure } direction={ 2 } /> }
-                { friend.id <= 0 && <BadgeImageView isGroup={ true } badgeCode={ friend.figure} />} 
+                { friend.id <= 0 && <LayoutBadgeImageView isGroup={ true } badgeCode={ friend.figure} />} 
             </div>
             <div className="text-truncate">{ friend.name }</div>
             { isVisible &&
diff --git a/src/views/friends/views/messenger/FriendsMessengerView.tsx b/src/views/friends/views/messenger/FriendsMessengerView.tsx
index 3d586dfa..44d496ba 100644
--- a/src/views/friends/views/messenger/FriendsMessengerView.tsx
+++ b/src/views/friends/views/messenger/FriendsMessengerView.tsx
@@ -1,11 +1,10 @@
 import { FollowFriendMessageComposer, ILinkEventTracker, NewConsoleMessageEvent, RoomInviteEvent, SendMessageComposer as SendMessageComposerPacket } from '@nitrots/nitro-renderer';
 import { FC, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, MESSENGER_MESSAGE_RECEIVED, MESSENGER_NEW_THREAD, PlaySound, RemoveLinkEventTracker, SendMessageComposer } from '../../../../api';
-import { Base, Button, ButtonGroup, Column, Flex, Grid, LayoutItemCountView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
+import { Base, Button, ButtonGroup, Column, Flex, Grid, LayoutBadgeImageView, LayoutItemCountView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { FriendsMessengerIconEvent } from '../../../../events';
 import { BatchUpdates, DispatchUiEvent, UseMessageEventHook } from '../../../../hooks';
 import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
-import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
 import { MessengerThread } from '../../common/MessengerThread';
 import { MessengerThreadChat } from '../../common/MessengerThreadChat';
 import { useFriendsContext } from '../../FriendsContext';
@@ -271,7 +270,7 @@ export const FriendsMessengerView: FC<{}> = props =>
                                     <div className="friend-head rounded flex-shrink-0">
                                         
                                         {thread.participant.id > 0 && <AvatarImageView figure={thread.participant.figure} headOnly={true} direction={3} />}
-                                        {thread.participant.id <= 0 && <BadgeImageView isGroup={true} badgeCode={thread.participant.figure} />}
+                                        {thread.participant.id <= 0 && <LayoutBadgeImageView isGroup={true} badgeCode={thread.participant.figure} />}
 
                                     </div>
                                     <Base className='d-flex text-truncate text-black ms-1 align-items-center'>{thread.participant.name}</Base>
diff --git a/src/views/hc-center/HcCenterView.tsx b/src/views/hc-center/HcCenterView.tsx
index 442b5fc8..f0107824 100644
--- a/src/views/hc-center/HcCenterView.tsx
+++ b/src/views/hc-center/HcCenterView.tsx
@@ -1,14 +1,11 @@
-import { ClubGiftInfoEvent, FriendlyTime, GetClubGiftInfo, ILinkEventTracker, RequestBadgesComposer, ScrKickbackData, ScrSendKickbackInfoMessageEvent, UserInfoEvent, UserSubscriptionEvent } from '@nitrots/nitro-renderer';
-import { BadgesEvent, FigureUpdateEvent } from '@nitrots/nitro-renderer/src';
-import { ScrGetKickbackInfoMessageComposer } from '@nitrots/nitro-renderer/src/nitro/communication/messages/outgoing/user/ScrGetKickbackInfoMessageComposer';
+import { BadgesEvent, ClubGiftInfoEvent, FigureUpdateEvent, FriendlyTime, GetClubGiftInfo, ILinkEventTracker, RequestBadgesComposer, ScrGetKickbackInfoMessageComposer, ScrKickbackData, ScrSendKickbackInfoMessageEvent, UserInfoEvent, UserSubscriptionEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { OverlayTrigger, Popover } from 'react-bootstrap';
 import { AddEventLinkTracker, CreateLinkEvent, GetConfiguration, LocalizeText, RemoveLinkEventTracker, SendMessageComposer } from '../../api';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
+import { LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
 import { HcCenterEvent } from '../../events';
 import { UseMessageEventHook, UseUiEvent } from '../../hooks';
 import { AvatarImageView } from '../shared/avatar-image/AvatarImageView';
-import { BadgeImageView } from '../shared/badge-image/BadgeImageView';
 import { BadgeResolver } from './util/BadgeResolver';
 import { ClubStatus } from './util/ClubStatus';
 
@@ -221,7 +218,7 @@ export const HcCenterView: FC<{}> = props =>
             </div>
             <NitroCardContentView>
                 <div className="d-flex flex-row mb-1">
-                    <BadgeImageView badgeCode={badgeCode} className="align-self-center flex-shrink-0 me-1" />
+                    <LayoutBadgeImageView badgeCode={badgeCode} className="align-self-center flex-shrink-0 me-1" />
                     <div className="w-100 text-black streak-info">
                         <h6 className="mb-0">{LocalizeText('hccenter.status.' + clubStatus)}</h6>
                         <div dangerouslySetInnerHTML={{ __html: getInfoText() }} />
diff --git a/src/views/room/widgets/infostand/InfoStandWidgetBotView.tsx b/src/views/room/widgets/infostand/InfoStandWidgetBotView.tsx
index dac8f179..41220732 100644
--- a/src/views/room/widgets/infostand/InfoStandWidgetBotView.tsx
+++ b/src/views/room/widgets/infostand/InfoStandWidgetBotView.tsx
@@ -1,9 +1,8 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FC } from 'react';
 import { LocalizeText, RoomWidgetUpdateInfostandUserEvent } from '../../../../api';
-import { Column, Flex, Text } from '../../../../common';
+import { Column, Flex, LayoutBadgeImageView, Text } from '../../../../common';
 import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
-import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
 
 interface InfoStandWidgetBotViewProps
 {
@@ -35,7 +34,7 @@ export const InfoStandWidgetBotView: FC<InfoStandWidgetBotViewProps> = props =>
                         <Column grow center gap={ 0 }>
                             { (botData.badges.length > 0) && botData.badges.map(result =>
                             {
-                                return <BadgeImageView key={ result } badgeCode={ result } showInfo={ true } />;
+                                return <LayoutBadgeImageView key={ result } badgeCode={ result } showInfo={ true } />;
                             }) }
                         </Column>
                     </Flex>
diff --git a/src/views/room/widgets/infostand/InfoStandWidgetFurniView.tsx b/src/views/room/widgets/infostand/InfoStandWidgetFurniView.tsx
index 19f5c502..fc5536f8 100644
--- a/src/views/room/widgets/infostand/InfoStandWidgetFurniView.tsx
+++ b/src/views/room/widgets/infostand/InfoStandWidgetFurniView.tsx
@@ -2,9 +2,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { CrackableDataType, GroupInformationComposer, GroupInformationEvent, RoomControllerLevel, RoomObjectCategory, RoomObjectVariable, RoomWidgetEnumItemExtradataParameter, RoomWidgetFurniInfoUsagePolicyEnum, SetObjectDataMessageComposer, StringDataType } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { CreateLinkEvent, GetGroupInformation, GetRoomEngine, LocalizeText, RoomWidgetFurniActionMessage, RoomWidgetUpdateInfostandFurniEvent, SendMessageComposer } from '../../../../api';
-import { Button, Column, Flex, Text, UserProfileIconView } from '../../../../common';
+import { Button, Column, Flex, LayoutBadgeImageView, Text, UserProfileIconView } from '../../../../common';
 import { BatchUpdates, UseMessageEventHook } from '../../../../hooks';
-import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
 import { LimitedEditionCompactPlateView } from '../../../shared/limited-edition/LimitedEditionCompactPlateView';
 import { RarityLevelView } from '../../../shared/rarity-level/RarityLevelView';
 import { useRoomContext } from '../../context/RoomContext';
@@ -308,7 +307,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
                             <>
                                 <hr className="m-0" />
                                 <Flex pointer alignItems="center" gap={ 2 } onClick={ () => GetGroupInformation(furniData.groupId) }>
-                                    <BadgeImageView badgeCode={ getGroupBadgeCode() } isGroup={ true } />
+                                    <LayoutBadgeImageView badgeCode={ getGroupBadgeCode() } isGroup={ true } />
                                     <Text variant="white" underline>{ groupName }</Text>
                                 </Flex>
                             </> }
diff --git a/src/views/room/widgets/infostand/InfoStandWidgetRentableBotView.tsx b/src/views/room/widgets/infostand/InfoStandWidgetRentableBotView.tsx
index fccdd2ae..d2e5b319 100644
--- a/src/views/room/widgets/infostand/InfoStandWidgetRentableBotView.tsx
+++ b/src/views/room/widgets/infostand/InfoStandWidgetRentableBotView.tsx
@@ -2,9 +2,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { BotRemoveComposer } from '@nitrots/nitro-renderer';
 import { FC, useMemo } from 'react';
 import { LocalizeText, RoomWidgetUpdateInfostandRentableBotEvent, SendMessageComposer } from '../../../../api';
-import { Button, Column, Flex, Text, UserProfileIconView } from '../../../../common';
+import { Button, Column, Flex, LayoutBadgeImageView, Text, UserProfileIconView } from '../../../../common';
 import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
-import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
 import { BotSkillsEnum } from '../avatar-info/common/BotSkillsEnum';
 
 interface InfoStandWidgetRentableBotViewProps
@@ -49,7 +48,7 @@ export const InfoStandWidgetRentableBotView: FC<InfoStandWidgetRentableBotViewPr
                             <Column grow center gap={ 0 }>
                                 { (rentableBotData.badges.length > 0) && rentableBotData.badges.map(result =>
                                 {
-                                    return <BadgeImageView key={ result } badgeCode={ result } showInfo={ true } />;
+                                    return <LayoutBadgeImageView key={ result } badgeCode={ result } showInfo={ true } />;
                                 }) }
                             </Column>
                         </Flex>
diff --git a/src/views/room/widgets/infostand/InfoStandWidgetUserView.tsx b/src/views/room/widgets/infostand/InfoStandWidgetUserView.tsx
index 92aa5469..296305be 100644
--- a/src/views/room/widgets/infostand/InfoStandWidgetUserView.tsx
+++ b/src/views/room/widgets/infostand/InfoStandWidgetUserView.tsx
@@ -2,10 +2,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomSessionUserBadgesEvent, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
 import { FC, FocusEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react';
 import { GetConfiguration, GetGroupInformation, LocalizeText, RoomWidgetChangeMottoMessage, RoomWidgetUpdateInfostandUserEvent, SendMessageComposer } from '../../../../api';
-import { Base, Column, Flex, Text, UserProfileIconView } from '../../../../common';
+import { Base, Column, Flex, LayoutBadgeImageView, Text, UserProfileIconView } from '../../../../common';
 import { BatchUpdates, UseEventDispatcherHook, UseMessageEventHook } from '../../../../hooks';
 import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
-import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
 import { useRoomContext } from '../../context/RoomContext';
 import { InfoStandWidgetUserRelationshipsView } from './InfoStandWidgetUserRelationshipsView';
 
@@ -110,27 +109,27 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
                         <Column grow gap={ 0 }>
                             <Flex gap={ 1 }>
                                 <Base className="badge-image">
-                                    { badges[0] && <BadgeImageView badgeCode={ badges[0] } showInfo={ true } /> }
+                                    { badges[0] && <LayoutBadgeImageView badgeCode={ badges[0] } showInfo={ true } /> }
                                 </Base>
                                 <Base pointer={ ( userData.groupId > 0) } className="badge-image" onClick={ event => GetGroupInformation(userData.groupId) }>
                                     { userData.groupId > 0 &&
-                                        <BadgeImageView badgeCode={ userData.groupBadgeId } isGroup={ true } showInfo={ true } customTitle={ userData.groupName } /> }
+                                        <LayoutBadgeImageView badgeCode={ userData.groupBadgeId } isGroup={ true } showInfo={ true } customTitle={ userData.groupName } /> }
                                 </Base>
                             </Flex>
                             <Flex gap={ 1 }>
                                 <Base className="badge-image">
-                                    { badges[1] && <BadgeImageView badgeCode={ badges[1] } showInfo={ true } /> }
+                                    { badges[1] && <LayoutBadgeImageView badgeCode={ badges[1] } showInfo={ true } /> }
                                 </Base>
                                 <Base className="badge-image">
-                                    { badges[2] && <BadgeImageView badgeCode={ badges[2] } showInfo={ true } /> }
+                                    { badges[2] && <LayoutBadgeImageView badgeCode={ badges[2] } showInfo={ true } /> }
                                 </Base>
                             </Flex>
                             <Flex gap={ 1 }>
                                 <Base className="badge-image">
-                                    { badges[3] && <BadgeImageView badgeCode={ badges[3] } showInfo={ true } /> }
+                                    { badges[3] && <LayoutBadgeImageView badgeCode={ badges[3] } showInfo={ true } /> }
                                 </Base>
                                 <Base className="badge-image">
-                                    { badges[4] && <BadgeImageView badgeCode={ badges[4] } showInfo={ true } /> }
+                                    { badges[4] && <LayoutBadgeImageView badgeCode={ badges[4] } showInfo={ true } /> }
                                 </Base>
                             </Flex>
                         </Column>