diff --git a/src/assets/images/help/help-duck.png b/src/assets/images/help/help-duck.png
new file mode 100644
index 0000000..855a48e
Binary files /dev/null and b/src/assets/images/help/help-duck.png differ
diff --git a/src/components/help/HelpView.tsx b/src/components/help/HelpView.tsx
index 87ec07d..01701be 100644
--- a/src/components/help/HelpView.tsx
+++ b/src/components/help/HelpView.tsx
@@ -12,6 +12,22 @@ import { SelectReportedUserView } from './views/SelectReportedUserView';
 import { SelectTopicView } from './views/SelectTopicView';
 import { NameChangeView } from './views/name-change/NameChangeView';
 
+// Scoped colour override for the Aiuto window: classic blue header + light grey
+// body (the shared 'primary-slim' theme is teal + cream). Higher specificity
+// (.nitro-card.nitro-help ...) than the theme so it wins. The body element
+// renders `.nitro-card-content-shell`, NOT `.content-area`.
+const HELP_STYLES = `
+  .nitro-card.nitro-help .nitro-card-header {
+    background: linear-gradient(180deg, #5a80b8 0%, #3f63a0 100%);
+    border-color: #34548a;
+  }
+  .nitro-card.nitro-help,
+  .nitro-card.nitro-help .content-area,
+  .nitro-card.nitro-help .nitro-card-content-shell {
+    background: #ebebe3 !important;
+  }
+`;
+
 export const HelpView: FC<{}> = props =>
 {
     const [ isVisible, setIsVisible ] = useState(false);
@@ -96,17 +112,20 @@ export const HelpView: FC<{}> = props =>
     return (
         <>
             { isVisible &&
-                <NitroCardView className="nitro-help" theme="primary-slim">
+                <NitroCardView className={ `nitro-help${ activeReport ? '' : ' w-[420px]' }` } theme="primary-slim">
                     <NitroCardHeaderView headerText={ LocalizeText('help.button.cfh') } onCloseClick={ onClose } />
                     <NitroCardContentView className="text-black">
-                        <Grid>
-                            <Column center overflow="hidden" size={ 5 }>
-                                <div className="index-image" />
-                            </Column>
-                            <Column justifyContent="between" overflow="hidden" size={ 7 }>
-                                <CurrentStepView />
-                            </Column>
-                        </Grid>
+                        <style>{ HELP_STYLES }</style>
+                        { activeReport
+                            ? <Grid>
+                                <Column center overflow="hidden" size={ 5 }>
+                                    <div className="index-image" />
+                                </Column>
+                                <Column justifyContent="between" overflow="hidden" size={ 7 }>
+                                    <CurrentStepView />
+                                </Column>
+                            </Grid>
+                            : <CurrentStepView /> }
                     </NitroCardContentView>
                 </NitroCardView> }
             <SanctionSatusView />
diff --git a/src/components/help/views/HelpIndexView.tsx b/src/components/help/views/HelpIndexView.tsx
index ceaa1ad..36bfe85 100644
--- a/src/components/help/views/HelpIndexView.tsx
+++ b/src/components/help/views/HelpIndexView.tsx
@@ -1,9 +1,11 @@
 import { GetCfhStatusMessageComposer } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
-import { DispatchUiEvent, GetConfigurationValue, LocalizeText, ReportState, ReportType, SendMessageComposer } from '../../../api';
+import { FaArrowCircleRight } from 'react-icons/fa';
+import { CreateLinkEvent, DispatchUiEvent, GetConfigurationValue, LocalizeText, ReportState, ReportType, SendMessageComposer } from '../../../api';
 import { Button, Text } from '../../../common';
 import { GuideToolEvent } from '../../../events';
 import { useHelp } from '../../../hooks';
+import helpDuck from '../../../assets/images/help/help-duck.png';
 
 export const HelpIndexView: FC<{}> = props =>
 {
@@ -21,16 +23,30 @@ export const HelpIndexView: FC<{}> = props =>
     };
 
     return (
-        <>
-            <div className="flex flex-col justify-center alignp-items-enter grow! gap-1">
-                <Text fontSize={ 3 }>{ LocalizeText('help.main.frame.title') }</Text>
-                <Text>{ LocalizeText('help.main.self.description') }</Text>
+        <div className="flex flex-col gap-2 py-1">
+            <Text bold fontSize={ 3 }>{ LocalizeText('help.main.frame.title') }</Text>
+            <Text center className="text-[#5c5c5c]">{ LocalizeText('help.main.frame.description') }</Text>
+            <div className="flex justify-center py-1">
+                <img src={ helpDuck } alt="" className="h-[105px] w-auto [image-rendering:pixelated]" />
             </div>
-            <div className="flex flex-col gap-1">
+            <div className="flex flex-col gap-1.5">
                 <Button variant="success" onClick={ onReportClick }>{ LocalizeText('help.main.bully.subtitle') }</Button>
                 <Button variant="success" disabled={ !GetConfigurationValue('guides.enabled') } onClick={ () => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.CREATE_HELP_REQUEST)) }>{ LocalizeText('help.main.help.title') }</Button>
             </div>
-            <Button textColor="black" variant="link" onClick={ () => SendMessageComposer(new GetCfhStatusMessageComposer(false)) }>{ LocalizeText('help.main.my.sanction.status') }</Button>
-        </>
+            <div className="flex flex-col gap-1 pt-1">
+                <button type="button" className="flex items-center gap-1.5 cursor-pointer border-0 bg-transparent p-0 text-left text-[0.78rem] font-bold text-[#2f2f2f] underline hover:brightness-110" onClick={ () => CreateLinkEvent('habbopages/help') }>
+                    <FaArrowCircleRight className="text-[#46a01e] text-[0.95rem]" />
+                    { LocalizeText('help.main.faq.link.text') }
+                </button>
+                <button type="button" className="flex items-center gap-1.5 cursor-pointer border-0 bg-transparent p-0 text-left text-[0.78rem] font-bold text-[#2f2f2f] underline hover:brightness-110" onClick={ () => SendMessageComposer(new GetCfhStatusMessageComposer(false)) }>
+                    <FaArrowCircleRight className="text-[#46a01e] text-[0.95rem]" />
+                    { LocalizeText('help.main.my.sanction.status') }
+                </button>
+                <button type="button" className="flex items-center gap-1.5 cursor-pointer border-0 bg-transparent p-0 text-left text-[0.78rem] font-bold text-[#2f2f2f] underline hover:brightness-110" onClick={ () => SendMessageComposer(new GetCfhStatusMessageComposer(true)) }>
+                    <FaArrowCircleRight className="text-[#46a01e] text-[0.95rem]" />
+                    { LocalizeText('help.main.my.reports.status') }
+                </button>
+            </div>
+        </div>
     );
 };