diff --git a/src/common/types/ColorVariantType.ts b/src/common/types/ColorVariantType.ts
index a4e42e69..1ff6f60b 100644
--- a/src/common/types/ColorVariantType.ts
+++ b/src/common/types/ColorVariantType.ts
@@ -1 +1 @@
-export type ColorVariantType = 'primary' | 'success' | 'danger' | 'secondary' | 'link' | 'black' | 'white' | 'dark' | 'warning' | 'muted';
+export type ColorVariantType = 'primary' | 'success' | 'danger' | 'secondary' | 'link' | 'black' | 'white' | 'dark' | 'warning' | 'muted' | 'light';
diff --git a/src/components/guide-tool/GuideToolView.scss b/src/components/guide-tool/GuideToolView.scss
index 62104ce9..e9b06a29 100644
--- a/src/components/guide-tool/GuideToolView.scss
+++ b/src/components/guide-tool/GuideToolView.scss
@@ -1,13 +1,6 @@
 .nitro-guide-tool {
     width: 250px;
 
-    .duty-status {
-        border-radius: 0.25rem;
-        border-color: #B6BEC5 !important;
-        background-color: #CDD3D9;
-        border: 2px solid;
-    }
-
     .duty-switch {
         width: 38px;
         height: 21px;
@@ -26,9 +19,6 @@
     }
 
     .chat-messages {
-        height: 200px;
-        min-height: 200px;
-        overflow-y: auto;
     
         .message-avatar {
             position: relative;
diff --git a/src/components/guide-tool/GuideToolView.tsx b/src/components/guide-tool/GuideToolView.tsx
index be6b973b..8525daac 100644
--- a/src/components/guide-tool/GuideToolView.tsx
+++ b/src/components/guide-tool/GuideToolView.tsx
@@ -3,9 +3,10 @@ import { FC, useCallback, useEffect, useState } from 'react';
 import { AddEventLinkTracker, GetConfiguration, GetSessionDataManager, LocalizeText, RemoveLinkEventTracker } from '../../api';
 import { GuideToolEvent, NotificationAlertEvent } from '../../events';
 import { CreateMessageHook, dispatchUiEvent, SendMessageHook, useUiEvent } from '../../hooks';
-import { NitroCardHeaderView, NitroCardView } from '../../layout';
-import { GuideSessionState, GuideToolMessageGroup } from './common';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
+import { GuideSessionState } from './common/GuideSessionState';
 import { GuideToolMessage } from './common/GuideToolMessage';
+import { GuideToolMessageGroup } from './common/GuideToolMessageGroup';
 import { GuideToolAcceptView } from './views/GuideToolAcceptView';
 import { GuideToolMenuView } from './views/GuideToolMenuView';
 import { GuideToolOngoingView } from './views/GuideToolOngoingView';
@@ -319,46 +320,24 @@ export const GuideToolView: FC<{}> = props =>
     if(!isVisible) return null;
 
     return (
-        <NitroCardView className="nitro-guide-tool" simple={ true }>
-            <NitroCardHeaderView headerText={ headerText } onCloseClick={ () => processAction('close') } noCloseButton={ noCloseButton } />
-            
-            { sessionState === GuideSessionState.GUIDE_TOOL_MENU &&
-            <GuideToolMenuView isOnDuty={ isOnDuty }
-            isHandlingGuideRequests={ isHandlingGuideRequests }
-            setIsHandlingGuideRequests={ setIsHandlingGuideRequests }
-            isHandlingHelpRequests={ isHandlingHelpRequests }
-            setIsHandlingHelpRequests={ setIsHandlingHelpRequests }
-            isHandlingBullyReports={ isHandlingBullyReports }
-            setIsHandlingBullyReports={ setIsHandlingBullyReports }
-            guidesOnDuty={ guidesOnDuty }
-            helpersOnDuty={ helpersOnDuty }
-            guardiansOnDuty={ guardiansOnDuty }
-            processAction={ processAction }
-            /> }
-
-            { sessionState === GuideSessionState.GUIDE_ACCEPT &&
-            <GuideToolAcceptView helpRequestDescription={ helpRequestDescription } helpRequestAverageTime={ helpRequestAverageTime } /> }
-
-            { [ GuideSessionState.GUIDE_ONGOING, GuideSessionState.USER_ONGOING ].includes(sessionState) &&
-            <GuideToolOngoingView isGuide={ isOnDuty }
-            userId={ ongoingUserId }
-            userName={ ongoingUsername }
-            userFigure={ ongoingFigure }
-            isTyping={ ongoingIsTyping }
-            messageGroups={ ongoingMessageGroups }
-            /> }
-
-            { sessionState === GuideSessionState.USER_CREATE &&
-            <GuideToolUserCreateRequestView userRequest={ userRequest } setUserRequest={ setUserRequest } /> }
-
-            { sessionState === GuideSessionState.USER_PENDING &&
-            <GuideToolUserPendingView helpRequestDescription={ helpRequestDescription } helpRequestAverageTime={ helpRequestAverageTime } /> }
-
-            { sessionState === GuideSessionState.USER_FEEDBACK && 
-            <GuideToolUserFeedbackView userName={ ongoingUsername } /> }
-
-            { sessionState === GuideSessionState.USER_THANKS && 
-            <GuideToolUserThanksView /> }
+        <NitroCardView className="nitro-guide-tool" simple>
+            <NitroCardHeaderView headerText={ headerText } onCloseClick={ event => processAction('close') } noCloseButton={ noCloseButton } />
+            <NitroCardContentView className="text-black">
+                { (sessionState === GuideSessionState.GUIDE_TOOL_MENU) &&
+                    <GuideToolMenuView isOnDuty={ isOnDuty } isHandlingGuideRequests={ isHandlingGuideRequests } setIsHandlingGuideRequests={ setIsHandlingGuideRequests } isHandlingHelpRequests={ isHandlingHelpRequests } setIsHandlingHelpRequests={ setIsHandlingHelpRequests } isHandlingBullyReports={ isHandlingBullyReports } setIsHandlingBullyReports={ setIsHandlingBullyReports } guidesOnDuty={ guidesOnDuty } helpersOnDuty={ helpersOnDuty } guardiansOnDuty={ guardiansOnDuty } processAction={ processAction } /> } 
+                { (sessionState === GuideSessionState.GUIDE_ACCEPT) &&
+                    <GuideToolAcceptView helpRequestDescription={ helpRequestDescription } helpRequestAverageTime={ helpRequestAverageTime } /> }
+                { [ GuideSessionState.GUIDE_ONGOING, GuideSessionState.USER_ONGOING ].includes(sessionState) &&
+                    <GuideToolOngoingView isGuide={ isOnDuty } userId={ ongoingUserId } userName={ ongoingUsername } userFigure={ ongoingFigure } isTyping={ ongoingIsTyping } messageGroups={ ongoingMessageGroups } /> }
+                { (sessionState === GuideSessionState.USER_CREATE) &&
+                    <GuideToolUserCreateRequestView userRequest={ userRequest } setUserRequest={ setUserRequest } /> }
+                { (sessionState === GuideSessionState.USER_PENDING) &&
+                    <GuideToolUserPendingView helpRequestDescription={ helpRequestDescription } helpRequestAverageTime={ helpRequestAverageTime } /> }
+                { (sessionState === GuideSessionState.USER_FEEDBACK) &&
+                    <GuideToolUserFeedbackView userName={ ongoingUsername } /> }
+                { (sessionState === GuideSessionState.USER_THANKS) &&
+                    <GuideToolUserThanksView /> }
+            </NitroCardContentView>
         </NitroCardView>
     );
 };
diff --git a/src/components/guide-tool/common/index.ts b/src/components/guide-tool/common/index.ts
deleted file mode 100644
index 8ec193c9..00000000
--- a/src/components/guide-tool/common/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './GuideSessionState';
-export * from './GuideToolMessageGroup';
diff --git a/src/components/guide-tool/views/GuideToolAcceptView.tsx b/src/components/guide-tool/views/GuideToolAcceptView.tsx
index c76a0d2e..21368ebd 100644
--- a/src/components/guide-tool/views/GuideToolAcceptView.tsx
+++ b/src/components/guide-tool/views/GuideToolAcceptView.tsx
@@ -1,8 +1,8 @@
 import { GuideSessionGuideDecidesMessageComposer } from '@nitrots/nitro-renderer';
-import { FC, useCallback } from 'react';
+import { FC } from 'react';
 import { LocalizeText } from '../../../api';
+import { Button, Column, Text } from '../../../common';
 import { SendMessageHook } from '../../../hooks';
-import { NitroCardContentView } from '../../../layout';
 
 interface GuideToolAcceptViewProps
 {
@@ -14,22 +14,23 @@ export const GuideToolAcceptView: FC<GuideToolAcceptViewProps> = props =>
 {
     const { helpRequestDescription = null, helpRequestAverageTime = 0 } = props;
     
-    const answerRequest = useCallback((response: boolean) =>
-    {
-        SendMessageHook(new GuideSessionGuideDecidesMessageComposer(response));
-    }, []);
+    const answerRequest = (response: boolean) => SendMessageHook(new GuideSessionGuideDecidesMessageComposer(response));
 
     return (
-        <NitroCardContentView className="text-black flex flex-column gap-2">
-            <div className="duty-status py-2 px-3">
-                <div className="fw-bold">{ LocalizeText('guide.help.request.guide.accept.request.title') }</div>
-                <div className="text-muted">{ LocalizeText('guide.help.request.type.1') }</div>
-                <div className="text-wrap text-break">{ helpRequestDescription }</div>
-            </div>
-            <div className="d-flex flex-column gap-2 w-100">
-                <button className="btn btn-success btn-sm" onClick={ () => answerRequest(true) }>{ LocalizeText('guide.help.request.guide.accept.accept.button') }</button>
-                <button className="btn btn-danger btn-sm" onClick={ () => answerRequest(false) }>{ LocalizeText('guide.help.request.guide.accept.skip.link') }</button>
-            </div>
-        </NitroCardContentView>
+        <Column>
+            <Column gap={ 0 } className="bg-muted p-2 rounded">
+                <Text bold>{ LocalizeText('guide.help.request.guide.accept.request.title') }</Text>
+                <Text variant="muted">{ LocalizeText('guide.help.request.type.1') }</Text>
+                <Text wrap textBreak>{ helpRequestDescription }</Text>
+            </Column>
+            <Column gap={ 1 }>
+                <Button variant="success" onClick={ event => answerRequest(true) }>
+                        { LocalizeText('guide.help.request.guide.accept.accept.button') }
+                    </Button>
+                <Button variant="danger" onClick={ event => answerRequest(false) }>
+                    { LocalizeText('guide.help.request.guide.accept.skip.link') }
+                </Button>
+            </Column>
+        </Column>
     );
 };
diff --git a/src/components/guide-tool/views/GuideToolMenuView.tsx b/src/components/guide-tool/views/GuideToolMenuView.tsx
index 9efbb618..07888835 100644
--- a/src/components/guide-tool/views/GuideToolMenuView.tsx
+++ b/src/components/guide-tool/views/GuideToolMenuView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../../api';
-import { NitroCardContentView } from '../../../layout';
+import { Base, Button, Column, Flex, Text } from '../../../common';
 
 interface GuideToolMenuViewProps
 {
@@ -34,47 +34,43 @@ export const GuideToolMenuView: FC<GuideToolMenuViewProps> = props =>
     } = props;
     
     return (
-        <>
-            <NitroCardContentView className="text-black flex flex-column gap-2">
-                <div className="duty-status py-2 px-3 d-flex gap-2 align-items-center">
-                    <div>
-                        <div className={ 'duty-switch' + (isOnDuty ? '' : ' off') } onClick={ () => processAction('toggle_duty') } />
-                    </div>
-                    <div>
-                        <div className="fw-bold">{ LocalizeText('guide.help.guide.tool.yourstatus') }</div>
-                        <div>{ LocalizeText(`guide.help.guide.tool.duty.${(isOnDuty ? 'on' : 'off')}`) }</div>
-                    </div>
-                </div>
-                <div>
-                    <div className="fw-bold">{ LocalizeText('guide.help.guide.tool.tickettypeselection.caption') }</div>
-                    <div className="form-check">
-                        <input className="form-check-input" disabled={ isOnDuty } type="checkbox" checked={ isHandlingGuideRequests } onChange={ e => { setIsHandlingGuideRequests(e.target.checked) } } />
-                        <label className="form-check-label">{ LocalizeText('guide.help.guide.tool.tickettypeselection.guiderequests') }</label>
-                    </div>
-                    <div className="form-check">
-                        <input className="form-check-input" disabled={ isOnDuty } type="checkbox" checked={ isHandlingHelpRequests } onChange={ e => { setIsHandlingHelpRequests(e.target.checked) } } />
-                        <label className="form-check-label">{ LocalizeText('guide.help.guide.tool.tickettypeselection.onlyhelprequests') }</label>
-                    </div>
-                    <div className="form-check">
-                        <input className="form-check-input" disabled={ isOnDuty } type="checkbox" checked={ isHandlingBullyReports } onChange={ e => { setIsHandlingBullyReports(e.target.checked) } } />
-                        <label className="form-check-label">{ LocalizeText('guide.help.guide.tool.tickettypeselection.bullyreports') }</label>
-                    </div>
-                </div>
-                <hr className="bg-dark m-0" />
-                <div className="d-flex align-items-center justify-content-center gap-2">
-                    <div className="info-icon" />
-                    <div>
-                        <div dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.guidesonduty', ['amount'], [guidesOnDuty.toString()]) } } />
-                        <div dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.helpersonduty', ['amount'], [helpersOnDuty.toString()]) } } />
-                        <div dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.guardiansonduty', ['amount'], [guardiansOnDuty.toString()]) } } />
-                    </div>
-                </div>
-                <hr className="bg-dark m-0 mt-auto" />
-                <div className="d-flex gap-2 w-100">
-                    <button className="btn btn-primary btn-sm w-100 text-nowrap" onClick={ () => processAction('forum_link') }>{ LocalizeText('guide.help.guide.tool.forum.link') }</button>
-                    <button className="btn btn-primary btn-sm w-100 text-nowrap" disabled>{ LocalizeText('guide.help.guide.tool.skill.link') }</button>
-                </div>
-            </NitroCardContentView>
-        </>
+        <Column>
+            <Flex alignItems="center" gap={ 2 } className="bg-muted p-2 rounded">
+                <Base className={ 'duty-switch' + (isOnDuty ? '' : ' off') } onClick={ event => processAction('toggle_duty') } />
+                <Column gap={ 0 }>
+                    <Text bold>{ LocalizeText('guide.help.guide.tool.yourstatus') }</Text>
+                    <Text>{ LocalizeText(`guide.help.guide.tool.duty.${ (isOnDuty ? 'on' : 'off') }`) }</Text>
+                </Column>
+            </Flex>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('guide.help.guide.tool.tickettypeselection.caption') }</Text>
+                <Flex alignItems="center" gap={ 1 }>
+                    <input className="form-check-input" disabled={ isOnDuty } type="checkbox" checked={ isHandlingGuideRequests } onChange={ event => setIsHandlingGuideRequests(event.target.checked) } />
+                    <Text>{ LocalizeText('guide.help.guide.tool.tickettypeselection.guiderequests') }</Text>
+                </Flex>
+                <Flex alignItems="center" gap={ 1 }>
+                    <input className="form-check-input" disabled={ isOnDuty } type="checkbox" checked={ isHandlingHelpRequests } onChange={ event => setIsHandlingHelpRequests(event.target.checked) } />
+                    <Text>{ LocalizeText('guide.help.guide.tool.tickettypeselection.onlyhelprequests') }</Text>
+                </Flex>
+                <Flex alignItems="center" gap={ 1 }>
+                    <input className="form-check-input" disabled={ isOnDuty } type="checkbox" checked={ isHandlingBullyReports } onChange={ event => setIsHandlingBullyReports(event.target.checked) } />
+                    <Text>{ LocalizeText('guide.help.guide.tool.tickettypeselection.bullyreports') }</Text>
+                </Flex>
+            </Column>
+            <hr className="bg-dark m-0" />
+            <Flex center gap={ 2 }>
+                <Base className="info-icon" />
+                <Column gap={ 1 }>
+                    <Base dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.guidesonduty', [ 'amount' ], [ guidesOnDuty.toString() ]) } } />
+                    <Base dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.helpersonduty', [ 'amount' ], [ helpersOnDuty.toString() ]) } } />
+                    <Base dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.guardiansonduty', [ 'amount' ], [ guardiansOnDuty.toString() ]) } } />
+                </Column>
+            </Flex>
+            <hr className="bg-dark m-0" />
+            <Flex justifyContent="between" gap={ 2 }>
+                <Button onClick={ event => processAction('forum_link') }>{ LocalizeText('guide.help.guide.tool.forum.link') }</Button>
+                <Button disabled>{ LocalizeText('guide.help.guide.tool.skill.link') }</Button>
+            </Flex>
+        </Column>
     );
 }
diff --git a/src/components/guide-tool/views/GuideToolOngoingView.tsx b/src/components/guide-tool/views/GuideToolOngoingView.tsx
index 649ff19d..833c79c4 100644
--- a/src/components/guide-tool/views/GuideToolOngoingView.tsx
+++ b/src/components/guide-tool/views/GuideToolOngoingView.tsx
@@ -2,11 +2,11 @@ import { GuideSessionGetRequesterRoomMessageComposer, GuideSessionInviteRequeste
 import { GuideSessionMessageMessageComposer } from '@nitrots/nitro-renderer/src';
 import { FC, KeyboardEvent, useCallback, useState } from 'react';
 import { GetSessionDataManager, LocalizeText, TryVisitRoom } from '../../../api';
+import { Base, Button, ButtonGroup, Column, Flex, Text } from '../../../common';
 import { CreateMessageHook, SendMessageHook } from '../../../hooks';
-import { NitroCardContentView, NitroLayoutButton, NitroLayoutFlex } from '../../../layout';
 import { NitroLayoutBase } from '../../../layout/base';
 import { AvatarImageView } from '../../../views/shared/avatar-image/AvatarImageView';
-import { GuideToolMessageGroup } from '../common';
+import { GuideToolMessageGroup } from '../common/GuideToolMessageGroup';
 
 interface GuideToolOngoingViewProps
 {
@@ -69,56 +69,59 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
     }, []);
 
     return (
-        <NitroCardContentView className="p-0">
-            <div className="d-flex gap-2 align-items-center bg-secondary p-2 text-white">
-                { isGuide && <div className="btn-group">
-                    <button className="btn btn-light btn-sm" onClick={ visit }>{ LocalizeText('guide.help.request.guide.ongoing.visit.button') }</button>
-                    <button className="btn btn-light btn-sm" disabled onClick={ invite }>{ LocalizeText('guide.help.request.guide.ongoing.invite.button') }</button>
-                </div> }
-                { !isGuide && <div>
-                    <div className="fw-bold">{ userName }</div>
-                    <div>{ LocalizeText('guide.help.request.user.ongoing.guide.desc') }</div>
-                </div> }
-                <div className="ms-auto text-decoration-underline cursor-pointer text-nowrap text-muted">{ LocalizeText('guide.help.common.report.link') }</div>
-            </div>
-            <div className="p-2 d-flex flex-column gap-1">
-                <div className="text-black d-flex flex-column gap-2 p-2 chat-messages bg-muted rounded">
+        <Column fullHeight>
+            <Flex alignItems="center" justifyContent="between" gap={ 1 } className="bg-muted p-2 rounded">
+                { isGuide &&
+                    <ButtonGroup>
+                        <Button onClick={ visit }>{ LocalizeText('guide.help.request.guide.ongoing.visit.button') }</Button>
+                        <Button disabled onClick={ invite }>{ LocalizeText('guide.help.request.guide.ongoing.invite.button') }</Button>
+                    </ButtonGroup> }
+                { !isGuide &&
+                    <Column gap={ 0 }>
+                        <Text bold>{ userName }</Text>
+                        <Text>{ LocalizeText('guide.help.request.user.ongoing.guide.desc') }</Text>
+                    </Column> }
+                <Button variant="danger" disabled>{ LocalizeText('guide.help.common.report.link') }</Button>
+            </Flex>
+            <Column fullHeight overflow="hidden" gap={ 1 } className="bg-muted rounded chat-messages p-2">
+                <Column overflow="auto">
                     { messageGroups.map((group, index) =>
-                    {
-                        return (
-                            <NitroLayoutFlex className={ 'w-100 justify-content-' + (isOwnChat(group.userId) ? 'end' : 'start') } gap={ 2 }>
-                                <NitroLayoutBase className="message-avatar flex-shrink-0">
-                                { (!isOwnChat(group.userId)) &&
-                                    <AvatarImageView figure={ userFigure } direction={ 2 } />
-                                }
-                                </NitroLayoutBase>
-                            <NitroLayoutBase className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (isOwnChat(group.userId) ? 'right' : 'left') }>
-                                <NitroLayoutBase className='fw-bold'>
-                                    { (isOwnChat(group.userId)) && GetSessionDataManager().userName }
-                                    { (!isOwnChat(group.userId)) && userName }
-                                </NitroLayoutBase>
-                                { group.messages.map((chat, index) =><NitroLayoutBase key={ index } className="text-break">{ chat.message }</NitroLayoutBase>) }
-                            </NitroLayoutBase>
-                            { (isOwnChat(group.userId)) &&
-                                <NitroLayoutBase className="message-avatar flex-shrink-0">
-                                    <AvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
-                                </NitroLayoutBase> }
-                        </NitroLayoutFlex>
-                        );
-                    }) } 
-                </div>
-                { isTyping && <div className="text-muted">{ LocalizeText('guide.help.common.typing') }</div> }
-                <NitroLayoutFlex gap={ 2 }>
+                        {
+                            return (
+                                <Flex fullWidth justifyContent={ isOwnChat(group.userId) ? 'end' : 'start' } gap={ 2 }>
+                                    <Base shrink className="message-avatar">
+                                        { (!isOwnChat(group.userId)) &&
+                                            <AvatarImageView figure={ userFigure } direction={ 2 } /> }
+                                    </Base>
+                                    <Base className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (isOwnChat(group.userId) ? 'right' : 'left') }>
+                                        <Text bold>
+                                            { (isOwnChat(group.userId)) && GetSessionDataManager().userName }
+                                            { (!isOwnChat(group.userId)) && userName }
+                                        </Text>
+                                        { group.messages.map((chat, index) => <Base key={ index } className="text-break">{ chat.message }</Base>) }
+                                    </Base>
+                                    { (isOwnChat(group.userId)) &&
+                                        <NitroLayoutBase className="message-avatar flex-shrink-0">
+                                            <AvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
+                                        </NitroLayoutBase> }
+                                </Flex>
+                            );
+                        }) } 
+                </Column>
+            </Column>
+            <Column gap={ 1 }>
+                <Flex gap={ 1 }>
                     <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('guide.help.request.guide.ongoing.input.empty', [ 'name' ], [ userName ]) } value={ messageText } onChange={ event => setMessageText(event.target.value) } onKeyDown={ onKeyDown } />
-                    <NitroLayoutButton variant="success" size="sm" onClick={ sendMessage }>
+                    <Button variant="success" onClick={ sendMessage }>
                         { LocalizeText('widgets.chatinput.say') }
-                    </NitroLayoutButton>
-                </NitroLayoutFlex>
-            </div>
-            <div className="d-flex flex-column gap-2 p-2 pt-0">
-                <hr className="bg-dark m-0" />
-                <div className="btn btn-success" onClick={ resolve }>{ LocalizeText('guide.help.request.' + (isGuide ? 'guide' : 'user') + '.ongoing.close.link') }</div>
-            </div>
-        </NitroCardContentView>
+                    </Button>
+                </Flex>
+                { isTyping &&
+                    <Text variant="muted">{ LocalizeText('guide.help.common.typing') }</Text> }
+            </Column>
+            <Button fullWidth variant="success" onClick={ resolve }>
+                { LocalizeText('guide.help.request.' + (isGuide ? 'guide' : 'user') + '.ongoing.close.link') }
+            </Button>
+        </Column>
     );
 };
diff --git a/src/components/guide-tool/views/GuideToolUserCreateRequestView.tsx b/src/components/guide-tool/views/GuideToolUserCreateRequestView.tsx
index 55a6a236..c910a8b7 100644
--- a/src/components/guide-tool/views/GuideToolUserCreateRequestView.tsx
+++ b/src/components/guide-tool/views/GuideToolUserCreateRequestView.tsx
@@ -1,8 +1,8 @@
 import { GuideSessionCreateMessageComposer } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useState } from 'react';
+import { FC, useState } from 'react';
 import { LocalizeText } from '../../../api';
+import { Button, Column, Text } from '../../../common';
 import { SendMessageHook } from '../../../hooks';
-import { NitroCardContentView } from '../../../layout';
 
 interface GuideToolUserCreateRequestViewProps
 {
@@ -15,20 +15,19 @@ const MIN_REQUEST_LENGTH: number = 15;
 export const GuideToolUserCreateRequestView: FC<GuideToolUserCreateRequestViewProps> = props =>
 {
     const { userRequest = '', setUserRequest = null } = props;
-
     const [ isPending, setIsPending ] = useState<boolean>(false);
 
-    const sendRequest = useCallback(() =>
+    const sendRequest = () =>
     {
         setIsPending(true);
         SendMessageHook(new GuideSessionCreateMessageComposer(1, userRequest));
-    }, [ userRequest ]);
+    }
 
     return (
-        <NitroCardContentView className="text-black flex flex-column gap-2">
-            <div>{ LocalizeText('guide.help.request.user.create.help') }</div>
-            <textarea className="request-message" maxLength={ 140 } value={ userRequest } onChange={ (e) => setUserRequest(e.target.value) } placeholder={ LocalizeText('guide.help.request.user.create.input.help') }></textarea>
-            <button className="btn btn-success" disabled={ userRequest.length < MIN_REQUEST_LENGTH || isPending } onClick={ sendRequest }>{ LocalizeText('guide.help.request.user.create.input.button') }</button>
-        </NitroCardContentView>
+        <Column>
+            <Text>{ LocalizeText('guide.help.request.user.create.help') }</Text>
+            <textarea className="request-message" maxLength={ 140 } value={ userRequest } onChange={ event => setUserRequest(event.target.value) } placeholder={ LocalizeText('guide.help.request.user.create.input.help') }></textarea>
+            <Button fullWidth variant="success" disabled={ (userRequest.length < MIN_REQUEST_LENGTH) || isPending } onClick={ sendRequest }>{ LocalizeText('guide.help.request.user.create.input.button') }</Button>
+        </Column>
     );
 };
diff --git a/src/components/guide-tool/views/GuideToolUserFeedbackView.tsx b/src/components/guide-tool/views/GuideToolUserFeedbackView.tsx
index ff1c76a2..20a64ed2 100644
--- a/src/components/guide-tool/views/GuideToolUserFeedbackView.tsx
+++ b/src/components/guide-tool/views/GuideToolUserFeedbackView.tsx
@@ -1,8 +1,8 @@
 import { GuideSessionFeedbackMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
 import { LocalizeText } from '../../../api';
+import { Button, Column, Flex, Text } from '../../../common';
 import { SendMessageHook } from '../../../hooks';
-import { NitroCardContentView } from '../../../layout';
 
 interface GuideToolUserFeedbackViewProps
 {
@@ -19,26 +19,26 @@ export const GuideToolUserFeedbackView: FC<GuideToolUserFeedbackViewProps> = pro
     }, []);
 
     return (
-        <NitroCardContentView className="p-0">
-            <div className="d-flex gap-2 align-items-center bg-secondary p-2 text-white">
-                <div>
-                    <div className="fw-bold">{ userName }</div>
-                    <div>{ LocalizeText('guide.help.request.user.feedback.guide.desc') }</div>
-                </div>
-                <div className="ms-auto text-decoration-underline cursor-pointer text-nowrap">{ LocalizeText('guide.help.common.report.link') }</div>
-            </div>
-            <div className="text-black d-flex flex-column gap-2 p-2 h-100">
-                <div>
-                    <div className="fw-bold">{ LocalizeText('guide.help.request.user.feedback.closed.title') }</div>
-                    <div>{ LocalizeText('guide.help.request.user.feedback.closed.desc') }</div>
-                </div>
-                <hr className="bg-dark m-0 mt-auto" />
-                <div className="fw-bold text-center">{ LocalizeText('guide.help.request.user.feedback.question') }</div>
-                <div className="d-flex gap-2">
-                    <div className="btn btn-success w-100" onClick={ () => giveFeedback(true) }>{ LocalizeText('guide.help.request.user.feedback.positive.button') }</div>
-                    <div className="btn btn-danger w-100" onClick={ () => giveFeedback(false) }>{ LocalizeText('guide.help.request.user.feedback.negative.button') }</div>
-                </div>
-            </div>
-        </NitroCardContentView>
+        <Column>
+            <Flex justifyContent="between" gap={ 1 } className="bg-muted p-2 rounded">
+                <Column gap={ 0 }>
+                    <Text bold>{ userName }</Text>
+                    <Text>{ LocalizeText('guide.help.request.user.feedback.guide.desc') }</Text>
+                </Column>
+                <Button variant="danger" disabled>{ LocalizeText('guide.help.common.report.link') }</Button>
+            </Flex>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('guide.help.request.user.feedback.closed.title') }</Text>
+                <Text>{ LocalizeText('guide.help.request.user.feedback.closed.desc') }</Text>
+            </Column>
+            <hr className="bg-dark m-0 mt-auto" />
+            <Column>
+                <Text center bold>{ LocalizeText('guide.help.request.user.feedback.question') }</Text>
+                <Flex gap={ 1 }>
+                    <Button fullWidth variant="success" onClick={ event => giveFeedback(true) }>{ LocalizeText('guide.help.request.user.feedback.positive.button') }</Button>
+                    <Button fullWidth variant="danger" onClick={ event => giveFeedback(false) }>{ LocalizeText('guide.help.request.user.feedback.negative.button') }</Button>
+                </Flex>
+            </Column>
+        </Column>
     );
 };
diff --git a/src/components/guide-tool/views/GuideToolUserPendingView.tsx b/src/components/guide-tool/views/GuideToolUserPendingView.tsx
index 304b1e06..49959a4d 100644
--- a/src/components/guide-tool/views/GuideToolUserPendingView.tsx
+++ b/src/components/guide-tool/views/GuideToolUserPendingView.tsx
@@ -1,8 +1,8 @@
 import { GuideSessionRequesterCancelsMessageComposer } from '@nitrots/nitro-renderer';
-import { FC, useCallback } from 'react';
+import { FC } from 'react';
 import { LocalizeText } from '../../../api';
+import { Button, Column, Text } from '../../../common';
 import { SendMessageHook } from '../../../hooks';
-import { NitroCardContentView } from '../../../layout';
 
 interface GuideToolUserPendingViewProps
 {
@@ -14,24 +14,21 @@ export const GuideToolUserPendingView: FC<GuideToolUserPendingViewProps> = props
 {
     const { helpRequestDescription = null, helpRequestAverageTime = 0 } = props;
 
-    const cancelRequest = useCallback(() =>
-    {
-        SendMessageHook(new GuideSessionRequesterCancelsMessageComposer());
-    }, []);
+    const cancelRequest = () => SendMessageHook(new GuideSessionRequesterCancelsMessageComposer());
 
     return (
-        <NitroCardContentView className="text-black flex flex-column gap-2">
-            <div className="duty-status py-2 px-3">
-                <div className="fw-bold">{ LocalizeText('guide.help.request.guide.accept.request.title') }</div>
-                <div className="text-muted">{ LocalizeText('guide.help.request.type.1') }</div>
-                <div className="text-wrap text-break">{ helpRequestDescription }</div>
-            </div>
-            <div>
-                <div className="fw-bold">{ LocalizeText('guide.help.request.user.pending.info.title') }</div>
-                <div>{ LocalizeText('guide.help.request.user.pending.info.message') }</div>
-                <div>{ LocalizeText('guide.help.request.user.pending.info.waiting', ['waitingtime'], [helpRequestAverageTime.toString()]) }</div>
-            </div>
-            <button className="btn btn-danger mt-auto" onClick={ cancelRequest }>{ LocalizeText('guide.help.request.user.pending.cancel.button') }</button>
-        </NitroCardContentView>
+        <Column>
+            <Column gap={ 0 } className="bg-muted rounded p-2">
+                <Text bold>{ LocalizeText('guide.help.request.guide.accept.request.title') }</Text>
+                <Text variant="muted">{ LocalizeText('guide.help.request.type.1') }</Text>
+                <Text wrap textBreak>{ helpRequestDescription }</Text>
+            </Column>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('guide.help.request.user.pending.info.title') }</Text>
+                <Text>{ LocalizeText('guide.help.request.user.pending.info.message') }</Text>
+                <Text>{ LocalizeText('guide.help.request.user.pending.info.waiting', [ 'waitingtime' ], [ helpRequestAverageTime.toString() ]) }</Text>
+            </Column>
+            <Button variant="danger" onClick={ cancelRequest }>{ LocalizeText('guide.help.request.user.pending.cancel.button') }</Button>
+        </Column>
     );
 };
diff --git a/src/components/guide-tool/views/GuideToolUserThanksView.tsx b/src/components/guide-tool/views/GuideToolUserThanksView.tsx
index f2ab6d6a..4953b0fc 100644
--- a/src/components/guide-tool/views/GuideToolUserThanksView.tsx
+++ b/src/components/guide-tool/views/GuideToolUserThanksView.tsx
@@ -1,13 +1,13 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../../api';
-import { NitroCardContentView } from '../../../layout';
+import { Column, Text } from '../../../common';
 
 export const GuideToolUserThanksView: FC<{}> = props =>
 {
     return (
-        <NitroCardContentView className="text-black flex flex-column gap-2">
-            <div className="fw-bold">{ LocalizeText('guide.help.request.user.thanks.info.title') }</div>
-            <div>{ LocalizeText('guide.help.request.user.thanks.info.desc') }</div>
-        </NitroCardContentView>
+        <Column gap={ 1 }>
+            <Text bold>{ LocalizeText('guide.help.request.user.thanks.info.title') }</Text>
+            <Text>{ LocalizeText('guide.help.request.user.thanks.info.desc') }</Text>
+        </Column>
     );
 };
diff --git a/src/layout/card/header/NitroCardHeaderView.tsx b/src/layout/card/header/NitroCardHeaderView.tsx
index bf40be1c..c84d6014 100644
--- a/src/layout/card/header/NitroCardHeaderView.tsx
+++ b/src/layout/card/header/NitroCardHeaderView.tsx
@@ -5,7 +5,7 @@ import { NitroCardHeaderViewProps } from './NitroCardHeaderView.types';
 
 export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
 {
-    const { headerText = null, onCloseClick = null } = props;
+    const { headerText = null, noCloseButton = false, onCloseClick = null } = props;
     const { theme = 'primary', simple = false } = useNitroCardContext();
 
     const onMouseDown = useCallback((event: MouseEvent<HTMLDivElement>) =>