diff --git a/src/assets/styles/bootstrap/_variables.scss b/src/assets/styles/bootstrap/_variables.scss
index cc82958d..91d6a902 100644
--- a/src/assets/styles/bootstrap/_variables.scss
+++ b/src/assets/styles/bootstrap/_variables.scss
@@ -493,7 +493,7 @@ $headings-margin-bottom:      $spacer / 2 !default;
 $headings-font-family:        null !default;
 $headings-font-style:         null !default;
 $headings-font-weight:        500 !default;
-$headings-line-height:        1.2 !default;
+$headings-line-height:        unset !default;
 $headings-color:              null !default;
 // scss-docs-end headings-variables
 
diff --git a/src/layout/card/NitroCardView.scss b/src/layout/card/NitroCardView.scss
index 2a0f4800..50cb0fe3 100644
--- a/src/layout/card/NitroCardView.scss
+++ b/src/layout/card/NitroCardView.scss
@@ -1,13 +1,12 @@
 $nitro-card-header-height: 33px;
 $nitro-card-tabs-height: 33px;
-$nitro-card-top-height: $nitro-card-header-height + $nitro-card-tabs-height;
 
 .nitro-card {
     pointer-events: all;
 
+    @import './accordion/NitroCardAccordionView';
     @import './content/NitroCardContentView';
     @import './header/NitroCardHeaderView';
-    @import './simple-header/NitroCardSimpleHeaderView';
     @import './tabs/NitroCardTabsView';
 }
 
@@ -60,5 +59,3 @@ $nitro-card-top-height: $nitro-card-header-height + $nitro-card-tabs-height;
         filter: brightness(0.8);
     }
 }
-
-@import './accordion/NitroCardAccordionView';
diff --git a/src/layout/card/NitroCardView.tsx b/src/layout/card/NitroCardView.tsx
index d556fb62..a00913cd 100644
--- a/src/layout/card/NitroCardView.tsx
+++ b/src/layout/card/NitroCardView.tsx
@@ -8,19 +8,14 @@ export const NitroCardView: FC<NitroCardViewProps> = props =>
     const { className = '', disableDrag = false, simple = false, theme = 'primary', children = null } = props;
 
     return (
-        <NitroCardContextProvider value={ { theme } }>
-            { simple &&
-                <div className={ 'nitro-card d-flex flex-column rounded border shadow overflow-hidden ' + className }>
-                    { children }
-                </div> }
-            { !simple &&
-                <div className="nitro-card-responsive">
-                    <DraggableWindow handle=".drag-handler" disableDrag= { disableDrag }>
-                        <div className={ 'nitro-card d-flex flex-column rounded border shadow overflow-hidden ' + className }>
-                            { children }
-                        </div>
-                    </DraggableWindow>
-                </div> }
+        <NitroCardContextProvider value={ { theme, simple } }>
+            <div className="nitro-card-responsive">
+                <DraggableWindow handle=".drag-handler" disableDrag= { disableDrag }>
+                    <div className={ 'nitro-card d-flex flex-column rounded border shadow overflow-hidden ' + className }>
+                        { children }
+                    </div>
+                </DraggableWindow>
+            </div>
         </NitroCardContextProvider>
     );
 }
diff --git a/src/layout/card/accordion/index.ts b/src/layout/card/accordion/index.ts
new file mode 100644
index 00000000..eaf0344c
--- /dev/null
+++ b/src/layout/card/accordion/index.ts
@@ -0,0 +1,3 @@
+export * from './item';
+export * from './NitroCardAccordionView';
+export * from './NitroCardAccordionView.types';
diff --git a/src/layout/card/accordion/item/index.ts b/src/layout/card/accordion/item/index.ts
new file mode 100644
index 00000000..4ec23967
--- /dev/null
+++ b/src/layout/card/accordion/item/index.ts
@@ -0,0 +1,2 @@
+export * from './NitroCardAccordionItemView';
+export * from './NitroCardAccordionItemView.types';
diff --git a/src/layout/card/content/NitroCardContentView.scss b/src/layout/card/content/NitroCardContentView.scss
index c8108cc7..0bc895aa 100644
--- a/src/layout/card/content/NitroCardContentView.scss
+++ b/src/layout/card/content/NitroCardContentView.scss
@@ -1,6 +1,11 @@
 .content-area {
     padding-top: $container-padding-x;
     padding-bottom: $container-padding-x;
+
+    &.simple {
+        padding-left: ($container-padding-x + 25px);
+        padding-right: ($container-padding-x + 25px);
+    }
 }
 
 @include media-breakpoint-down(lg) {
diff --git a/src/layout/card/content/NitroCardContentView.tsx b/src/layout/card/content/NitroCardContentView.tsx
index 5a5c8c65..a09e305f 100644
--- a/src/layout/card/content/NitroCardContentView.tsx
+++ b/src/layout/card/content/NitroCardContentView.tsx
@@ -1,13 +1,15 @@
 import { FC } from 'react';
+import { useNitroCardContext } from '../context';
 import { NitroCardContentViewProps } from './NitroCardContextView.types';
 
 export const NitroCardContentView: FC<NitroCardContentViewProps> = props =>
 {
-    const { className = null } = props;
+    const { className = null, children = null } = props;
+    const { simple = false } = useNitroCardContext();
     
     return (
-        <div className={ 'container-fluid bg-light content-area ' + className }>
-            { props.children }
+        <div className={ `container-fluid bg-light content-area ${ (simple ? 'simple' : '') } ${ className || '' }` }>
+            { children }
         </div>
     );
 }
diff --git a/src/layout/card/context/NitroCardContext.tsx b/src/layout/card/context/NitroCardContext.tsx
index fad15670..cd5d49f4 100644
--- a/src/layout/card/context/NitroCardContext.tsx
+++ b/src/layout/card/context/NitroCardContext.tsx
@@ -2,7 +2,8 @@ import { createContext, FC, useContext } from 'react';
 import { INitroCardContext, NitroCardContextProps } from './NitroCardContext.types';
 
 const NitroCardContext = createContext<INitroCardContext>({
-    theme: null
+    theme: null,
+    simple: false
 });
 
 export const NitroCardContextProvider: FC<NitroCardContextProps> = props =>
diff --git a/src/layout/card/context/NitroCardContext.types.ts b/src/layout/card/context/NitroCardContext.types.ts
index ba745f56..7ee41803 100644
--- a/src/layout/card/context/NitroCardContext.types.ts
+++ b/src/layout/card/context/NitroCardContext.types.ts
@@ -3,6 +3,7 @@ import { ProviderProps } from 'react';
 export interface INitroCardContext
 {
     theme: string;
+    simple: boolean;
 }
 
 export interface NitroCardContextProps extends ProviderProps<INitroCardContext>
diff --git a/src/layout/card/context/index.ts b/src/layout/card/context/index.ts
new file mode 100644
index 00000000..b440265a
--- /dev/null
+++ b/src/layout/card/context/index.ts
@@ -0,0 +1,2 @@
+export * from './NitroCardContext';
+export * from './NitroCardContext.types';
diff --git a/src/layout/card/header/NitroCardHeaderView.scss b/src/layout/card/header/NitroCardHeaderView.scss
index bdf82f76..02cae864 100644
--- a/src/layout/card/header/NitroCardHeaderView.scss
+++ b/src/layout/card/header/NitroCardHeaderView.scss
@@ -1,4 +1,16 @@
 .nitro-card-header {
-    min-height: $nitro-card-header-height;
-    max-height: $nitro-card-header-height;
+    min-height: 33px;
+    max-height: 33px;
+
+    &.simple-header {
+        min-height: 28px;
+        max-height: 28px;
+    }
+
+    .bg-tertiary-split {
+        border: 2px solid darken($quaternary, 4);
+        box-shadow: 0 0 0 2px $white;
+        width: 100%;
+        margin: 0 25px;
+    }
 }
diff --git a/src/layout/card/header/NitroCardHeaderView.tsx b/src/layout/card/header/NitroCardHeaderView.tsx
index 4a72a0fd..c9b683db 100644
--- a/src/layout/card/header/NitroCardHeaderView.tsx
+++ b/src/layout/card/header/NitroCardHeaderView.tsx
@@ -5,10 +5,26 @@ import { NitroCardHeaderViewProps } from './NitroCardHeaderView.types';
 export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
 {
     const { headerText = null, onCloseClick = null } = props;
-    const { theme } = useNitroCardContext();
+    const { simple = false } = useNitroCardContext();
+
+    if(simple)
+    {
+        return (
+            <div className="container-fluid bg-light">
+                <div className="row nitro-card-header simple-header">
+                    <div className="d-flex justify-content-center align-items-center w-100 position-relative">
+                        <div className="h5 text-white text-center text-shadow bg-tertiary-split border-top-0 rounded-bottom drag-handler">{ headerText }</div>
+                        <div className="position-absolute header-close" onMouseDown={ event => event.stopPropagation() } onClick={ onCloseClick }>
+                            <i className="fas fa-times" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
 
     return (
-        <div className={ `drag-handler container-fluid bg-${ theme }` }>
+        <div className="drag-handler container-fluid bg-primary">
             <div className="row nitro-card-header">
                 <div className="d-flex justify-content-center align-items-center w-100 position-relative">
                     <div className="h4 m-0 text-white text-shadow">{ headerText }</div>
diff --git a/src/layout/card/index.ts b/src/layout/card/index.ts
index a990be9a..06a9fc46 100644
--- a/src/layout/card/index.ts
+++ b/src/layout/card/index.ts
@@ -1,4 +1,6 @@
+export * from './accordion';
 export * from './content';
+export * from './context';
 export * from './header';
 export * from './NitroCardView';
 export * from './NitroCardView.types';
diff --git a/src/layout/card/simple-header/NitroCardSimpleHeaderView.scss b/src/layout/card/simple-header/NitroCardSimpleHeaderView.scss
deleted file mode 100644
index 16f04ff7..00000000
--- a/src/layout/card/simple-header/NitroCardSimpleHeaderView.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.nitro-card-header {
-    min-height: $nitro-card-header-height;
-    max-height: $nitro-card-header-height;
-
-    .bg-tertiary-split {
-        border: 2px solid darken($quaternary, 4);
-        box-shadow: 0 0 0 2px $white;
-        width: 100%;
-        margin: 0 30px;
-    }
-}
diff --git a/src/layout/card/simple-header/NitroCardSimpleHeaderView.tsx b/src/layout/card/simple-header/NitroCardSimpleHeaderView.tsx
deleted file mode 100644
index ca8970be..00000000
--- a/src/layout/card/simple-header/NitroCardSimpleHeaderView.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { FC } from 'react';
-import { NitroCardSimpleHeaderViewProps } from './NitroCardSimpleHeaderView.types';
-
-export const NitroCardSimpleHeaderView: FC<NitroCardSimpleHeaderViewProps> = props =>
-{
-    const { headerText = null, onCloseClick = null } = props;
-
-    return (
-        <div className='container-fluid bg-light'>
-            <div className="row nitro-card-header">
-                <div className="d-flex justify-content-center align-items-center w-100 position-relative">
-                    <div className="h5 text-white text-center text-shadow bg-tertiary-split border-top-0 rounded-bottom px-2 py-1 drag-handler">{ headerText }</div>
-                    <div className="position-absolute header-close" onMouseDown={ event => event.stopPropagation() } onClick={ onCloseClick }>
-                        <i className="fas fa-times" />
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
diff --git a/src/layout/card/simple-header/NitroCardSimpleHeaderView.types.ts b/src/layout/card/simple-header/NitroCardSimpleHeaderView.types.ts
deleted file mode 100644
index 87018f3a..00000000
--- a/src/layout/card/simple-header/NitroCardSimpleHeaderView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { MouseEvent } from 'react';
-
-export interface NitroCardSimpleHeaderViewProps
-{
-    headerText: string;
-    onCloseClick: (event: MouseEvent) => void;
-}
diff --git a/src/layout/card/simple-header/index.ts b/src/layout/card/simple-header/index.ts
deleted file mode 100644
index aff643d5..00000000
--- a/src/layout/card/simple-header/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './NitroCardSimpleHeaderView';
-export * from './NitroCardSimpleHeaderView.types';
diff --git a/src/layout/draggable-window/index.ts b/src/layout/draggable-window/index.ts
new file mode 100644
index 00000000..e2500601
--- /dev/null
+++ b/src/layout/draggable-window/index.ts
@@ -0,0 +1,2 @@
+export * from './DraggableWindow';
+export * from './DraggableWindow.types';
diff --git a/src/layout/index.ts b/src/layout/index.ts
index de8d17b6..2e0226d7 100644
--- a/src/layout/index.ts
+++ b/src/layout/index.ts
@@ -1,2 +1,4 @@
 export * from './card';
-export * from './loading-spinner/LoadingSpinnerView';
+export * from './draggable-window';
+export * from './loading-spinner';
+export * from './transitions';
diff --git a/src/layout/loading-spinner/index.ts b/src/layout/loading-spinner/index.ts
new file mode 100644
index 00000000..64544760
--- /dev/null
+++ b/src/layout/loading-spinner/index.ts
@@ -0,0 +1 @@
+export * from './LoadingSpinnerView';
diff --git a/src/layout/transitions/index.ts b/src/layout/transitions/index.ts
new file mode 100644
index 00000000..247ccbfc
--- /dev/null
+++ b/src/layout/transitions/index.ts
@@ -0,0 +1,3 @@
+export * from './TransitionAnimation';
+export * from './TransitionAnimation.types';
+export * from './TransitionAnimationStyles';
diff --git a/src/views/friend-list/FriendListView.tsx b/src/views/friend-list/FriendListView.tsx
index e46a350b..defd406c 100644
--- a/src/views/friend-list/FriendListView.tsx
+++ b/src/views/friend-list/FriendListView.tsx
@@ -4,9 +4,7 @@ import { createPortal } from 'react-dom';
 import { FriendListEvent } from '../../events';
 import { useUiEvent } from '../../hooks/events/ui/ui-event';
 import { SendMessageHook } from '../../hooks/messages/message-event';
-import { NitroCardHeaderView, NitroCardView } from '../../layout';
-import { NitroCardAccordionItemView } from '../../layout/card/accordion/item/NitroCardAccordionItemView';
-import { NitroCardAccordionView } from '../../layout/card/accordion/NitroCardAccordionView';
+import { NitroCardAccordionItemView, NitroCardAccordionView, NitroCardHeaderView, NitroCardView } from '../../layout';
 import { LocalizeText } from '../../utils/LocalizeText';
 import { FriendListContextProvider } from './context/FriendListContext';
 import { FriendListMessageHandler } from './FriendListMessageHandler';
diff --git a/src/views/notification-center/views/broadcast-message/BroadcastMessageView.tsx b/src/views/notification-center/views/broadcast-message/BroadcastMessageView.tsx
index 494f6323..5b7cd157 100644
--- a/src/views/notification-center/views/broadcast-message/BroadcastMessageView.tsx
+++ b/src/views/notification-center/views/broadcast-message/BroadcastMessageView.tsx
@@ -1,6 +1,5 @@
 import { FC } from 'react';
-import { NitroCardContentView, NitroCardView } from '../../../../layout';
-import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { LocalizeText } from '../../../../utils/LocalizeText';
 import { NotificationTrayItemView } from '../tray-item/NotificationTrayItemView';
 import { BroadcastMessageViewProps } from './BroadcastMessageView.types';
@@ -19,8 +18,8 @@ export const BroadcastMessageView: FC<BroadcastMessageViewProps> = props =>
         );
         
     return (
-        <NitroCardView className="nitro-notification">
-            <NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
+        <NitroCardView className="nitro-notification" simple={ true }>
+            <NitroCardHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
             <NitroCardContentView className="text-black">
                 { content }
             </NitroCardContentView>
diff --git a/src/views/notification-center/views/hotel-will-shutdown/HotelWillShutdownView.tsx b/src/views/notification-center/views/hotel-will-shutdown/HotelWillShutdownView.tsx
index d0d50a23..c91efed8 100644
--- a/src/views/notification-center/views/hotel-will-shutdown/HotelWillShutdownView.tsx
+++ b/src/views/notification-center/views/hotel-will-shutdown/HotelWillShutdownView.tsx
@@ -1,6 +1,5 @@
 import { FC } from 'react';
-import { NitroCardContentView, NitroCardView } from '../../../../layout';
-import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { LocalizeText } from '../../../../utils/LocalizeText';
 import { NotificationTrayItemView } from '../tray-item/NotificationTrayItemView';
 import { HotelWillShutdownViewProps } from './HotelWillShutdownView.types';
@@ -19,8 +18,8 @@ export const HotelWillShutdownView: FC<HotelWillShutdownViewProps> = props =>
         );
 
     return (
-        <NitroCardView className="nitro-notification">
-            <NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
+        <NitroCardView className="nitro-notification" simple={ true }>
+            <NitroCardHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
             <NitroCardContentView className="text-black">
                 { content }
             </NitroCardContentView>
diff --git a/src/views/notification-center/views/moderator-message/ModeratorMessageView.tsx b/src/views/notification-center/views/moderator-message/ModeratorMessageView.tsx
index a68fb118..201283e3 100644
--- a/src/views/notification-center/views/moderator-message/ModeratorMessageView.tsx
+++ b/src/views/notification-center/views/moderator-message/ModeratorMessageView.tsx
@@ -1,6 +1,5 @@
 import { FC } from 'react';
-import { NitroCardContentView, NitroCardView } from '../../../../layout';
-import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { LocalizeText } from '../../../../utils/LocalizeText';
 import { NotificationTrayItemView } from '../tray-item/NotificationTrayItemView';
 import { ModeratorMessageViewProps } from './ModeratorMessageView.types';
@@ -24,8 +23,8 @@ export const ModeratorMessageView: FC<ModeratorMessageViewProps> = props =>
         );
 
     return (
-        <NitroCardView className="nitro-notification">
-            <NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
+        <NitroCardView className="nitro-notification" simple={ true }>
+            <NitroCardHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
             <NitroCardContentView className="text-black">
                 { content }
             </NitroCardContentView>
diff --git a/src/views/notification-center/views/motd/MOTDView.tsx b/src/views/notification-center/views/motd/MOTDView.tsx
index f552e5d2..c63af9ff 100644
--- a/src/views/notification-center/views/motd/MOTDView.tsx
+++ b/src/views/notification-center/views/motd/MOTDView.tsx
@@ -1,6 +1,5 @@
 import { FC } from 'react';
-import { NitroCardContentView, NitroCardView } from '../../../../layout';
-import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { LocalizeText } from '../../../../utils/LocalizeText';
 import { NotificationTrayItemView } from '../tray-item/NotificationTrayItemView';
 import { MOTDViewProps } from './MOTDView.types';
@@ -22,8 +21,8 @@ export const MOTDView: FC<MOTDViewProps> = props =>
         );
 
     return (
-        <NitroCardView className="nitro-notification">
-            <NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
+        <NitroCardView className="nitro-notification" simple={ true }>
+            <NitroCardHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
             <NitroCardContentView className="text-black">
                 { content }
             </NitroCardContentView>
diff --git a/src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.tsx b/src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.tsx
index 948288e9..11597267 100644
--- a/src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.tsx
+++ b/src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.tsx
@@ -2,9 +2,7 @@ import { RoomWidgetCameraPublishComposer, RoomWidgetCameraPublishedEvent, RoomWi
 import { FC, useCallback, useState } from 'react';
 import { GetRoomCameraWidgetManager } from '../../../../../../api/nitro/camera/GetRoomCameraWidgetManager';
 import { CreateMessageHook, SendMessageHook } from '../../../../../../hooks/messages/message-event';
-import { NitroCardContentView } from '../../../../../../layout/card/content/NitroCardContentView';
-import { NitroCardView } from '../../../../../../layout/card/NitroCardView';
-import { NitroCardSimpleHeaderView } from '../../../../../../layout/card/simple-header/NitroCardSimpleHeaderView';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
 import { LocalizeText } from '../../../../../../utils/LocalizeText';
 import { CurrencyIcon } from '../../../../../shared/currency-icon/CurrencyIcon';
 import { useCameraWidgetContext } from '../../context/CameraWidgetContext';
@@ -72,8 +70,8 @@ export const CameraWidgetCheckoutView: FC<CameraWidgetCheckoutViewProps> = props
     if(!price) return null;
 
     return (
-        <NitroCardView className="nitro-camera-checkout">
-            <NitroCardSimpleHeaderView headerText={ LocalizeText('camera.confirm_phase.title') } onCloseClick={ event => processAction('close') } />
+        <NitroCardView className="nitro-camera-checkout" simple={ true }>
+            <NitroCardHeaderView headerText={ LocalizeText('camera.confirm_phase.title') } onCloseClick={ event => processAction('close') } />
             <NitroCardContentView>
                 <div className="picture-preview border mb-2" style={ { backgroundImage: 'url(' + getCurrentPicture().src + ')' } }></div>
                 <div className="bg-muted rounded p-2 text-black mb-2 d-flex justify-content-between align-items-center">
diff --git a/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.tsx b/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.tsx
index 759eb7ec..c436d4f3 100644
--- a/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.tsx
+++ b/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.tsx
@@ -2,11 +2,7 @@ import classNames from 'classnames';
 import { RoomCameraWidgetSelectedEffect } from 'nitro-renderer/src/nitro/camera/RoomCameraWidgetSelectedEffect';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { GetRoomCameraWidgetManager } from '../../../../../../api';
-import { NitroCardContentView } from '../../../../../../layout/card/content/NitroCardContentView';
-import { NitroCardHeaderView } from '../../../../../../layout/card/header/NitroCardHeaderView';
-import { NitroCardView } from '../../../../../../layout/card/NitroCardView';
-import { NitroCardTabsView } from '../../../../../../layout/card/tabs/NitroCardTabsView';
-import { NitroCardTabsItemView } from '../../../../../../layout/card/tabs/tabs-item/NitroCardTabsItemView';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../../../layout';
 import { LocalizeText } from '../../../../../../utils/LocalizeText';
 import { useCameraWidgetContext } from '../../context/CameraWidgetContext';
 import { CameraWidgetEditorTabs, CameraWidgetEditorViewProps } from './CameraWidgetEditorView.types';
diff --git a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
index 782eef32..1d320b04 100644
--- a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
+++ b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
@@ -1,7 +1,5 @@
 import { FC, useCallback, useState } from 'react';
-import { NitroCardContentView } from '../../../../../layout/card/content/NitroCardContentView';
-import { NitroCardHeaderView } from '../../../../../layout/card/header/NitroCardHeaderView';
-import { NitroCardView } from '../../../../../layout/card/NitroCardView';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { useRoomContext } from '../../../context/RoomContext';
 import { FurnitureDimmerData } from './FurnitureDimmerData';
diff --git a/src/views/room/widgets/furniture/engraving-lock/FurnitureEngravingLockView.tsx b/src/views/room/widgets/furniture/engraving-lock/FurnitureEngravingLockView.tsx
index 56f635c5..80e87d07 100644
--- a/src/views/room/widgets/furniture/engraving-lock/FurnitureEngravingLockView.tsx
+++ b/src/views/room/widgets/furniture/engraving-lock/FurnitureEngravingLockView.tsx
@@ -5,10 +5,7 @@ import { GetRoomEngine } from '../../../../../api/nitro/room/GetRoomEngine';
 import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
 import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event';
 import { CreateMessageHook } from '../../../../../hooks/messages/message-event';
-import { NitroCardContentView } from '../../../../../layout/card/content/NitroCardContentView';
-import { NitroCardHeaderView } from '../../../../../layout/card/header/NitroCardHeaderView';
-import { NitroCardView } from '../../../../../layout/card/NitroCardView';
-import { DraggableWindow } from '../../../../../layout/draggable-window/DraggableWindow';
+import { DraggableWindow, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
 import { useRoomContext } from '../../../context/RoomContext';
diff --git a/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx b/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx
index 4013dcd4..d113b585 100644
--- a/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx
+++ b/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx
@@ -3,9 +3,7 @@ import { FC, useCallback, useState } from 'react';
 import { GetRoomEngine, GetRoomSession } from '../../../../../api';
 import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
 import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event';
-import { NitroCardContentView } from '../../../../../layout';
-import { NitroCardView } from '../../../../../layout/card/NitroCardView';
-import { NitroCardSimpleHeaderView } from '../../../../../layout/card/simple-header';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { useRoomContext } from '../../../context/RoomContext';
 import { RoomWidgetRoomObjectUpdateEvent } from '../../../events';
@@ -68,8 +66,8 @@ export const FurnitureExchangeCreditView: FC<FurnitureExchangeCreditProps> = pro
     if(!exchangeCreditData) return null;
 
     return (
-        <NitroCardView className="nitro-exchange-credit">
-            <NitroCardSimpleHeaderView headerText={ LocalizeText('catalog.redeem.dialog.title') } onCloseClick={ event => processAction('close') } />
+        <NitroCardView className="nitro-exchange-credit" simple={ true }>
+            <NitroCardHeaderView headerText={ LocalizeText('catalog.redeem.dialog.title') } onCloseClick={ event => processAction('close') } />
             <NitroCardContentView>
                 <div className="text-black mb-2">
                     { LocalizeText('widgets.furniture.credit.redeem.value', [ 'value' ], [ exchangeCreditData.value.toString() ]) }
diff --git a/src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx b/src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx
index b7ef3335..87fc9f2f 100644
--- a/src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx
+++ b/src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx
@@ -5,9 +5,7 @@ import { GetRoomSession } from '../../../../../api/nitro/session/GetRoomSession'
 import { GetSessionDataManager } from '../../../../../api/nitro/session/GetSessionDataManager';
 import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
 import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event';
-import { NitroCardContentView } from '../../../../../layout/card/content/NitroCardContentView';
-import { NitroCardView } from '../../../../../layout/card/NitroCardView';
-import { NitroCardSimpleHeaderView } from '../../../../../layout/card/simple-header';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
 import { useRoomContext } from '../../../context/RoomContext';
@@ -171,8 +169,8 @@ export const FurnitureMannequinView: FC<FurnitureMannequinViewProps> = props =>
     if(!mannequinData) return null;
 
     return (
-        <NitroCardView className="nitro-mannequin">
-            <NitroCardSimpleHeaderView headerText={ LocalizeText('mannequin.widget.title') } onCloseClick={ event => processAction('close') }/>
+        <NitroCardView className="nitro-mannequin" simple={ true }>
+            <NitroCardHeaderView headerText={ LocalizeText('mannequin.widget.title') } onCloseClick={ event => processAction('close') } />
             <NitroCardContentView>
                 <div className="row">
                     <div className="col-4">