diff --git a/src/components/Dialog/BaseDialog/BaseDialog.tsx b/src/components/Dialog/BaseDialog/BaseDialog.tsx
index b9f325277..7c45bd2f0 100644
--- a/src/components/Dialog/BaseDialog/BaseDialog.tsx
+++ b/src/components/Dialog/BaseDialog/BaseDialog.tsx
@@ -18,6 +18,8 @@ export const BaseDialog: FC<BaseDialogProps> = React.forwardRef(
             actionButtonOneProps,
             actionButtonTwoProps,
             actionButtonThreeProps,
+            closeButtonProps,
+            closeIcon = IconName.mdiClose,
             parent = document.body,
             visible,
             onClose,
@@ -106,8 +108,10 @@ export const BaseDialog: FC<BaseDialogProps> = React.forwardRef(
                                 <NeutralButton {...actionButtonOneProps} />
                             )}
                             <NeutralButton
-                                iconProps={{ path: IconName.mdiClose }}
+                                ariaLabel={'Close'}
+                                iconProps={{ path: closeIcon }}
                                 onClick={onClose}
+                                {...closeButtonProps}
                             />
                         </span>
                     </div>
diff --git a/src/components/Dialog/BaseDialog/BaseDialog.types.ts b/src/components/Dialog/BaseDialog/BaseDialog.types.ts
index 131dc9e90..358e0f833 100644
--- a/src/components/Dialog/BaseDialog/BaseDialog.types.ts
+++ b/src/components/Dialog/BaseDialog/BaseDialog.types.ts
@@ -1,6 +1,9 @@
 import React, { Ref } from 'react';
 import { OcBaseProps } from '../../OcBase';
 import { ButtonProps } from '../../Button';
+import { IconName } from '../../Icon';
+
+export type CloseButtonProps = Omit<ButtonProps, 'onClick' | 'icon'>;
 
 type EventType =
     | React.KeyboardEvent<HTMLDivElement>
@@ -22,6 +25,14 @@ export interface BaseDialogProps
      * Props for the third header action button
      */
     actionButtonThreeProps?: ButtonProps;
+    /**
+     * Close button extra props
+     */
+    closeButtonProps?: CloseButtonProps;
+    /**
+     * Close icon name
+     */
+    closeIcon?: IconName;
     /**
      * Dialog is visible or not
      */
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
index af24a31a9..1f9fb4604 100644
--- a/src/components/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog.tsx
@@ -12,6 +12,8 @@ export const Dialog: FC<DialogProps> = React.forwardRef(
             actionButtonOneProps,
             actionButtonTwoProps,
             actionButtonThreeProps,
+            closeButtonProps,
+            closeIcon,
             parent = document.body,
             size = DialogSize.medium,
             headerClassNames,
@@ -52,6 +54,8 @@ export const Dialog: FC<DialogProps> = React.forwardRef(
                 actionButtonOneProps={actionButtonOneProps}
                 actionButtonTwoProps={actionButtonTwoProps}
                 actionButtonThreeProps={actionButtonThreeProps}
+                closeButtonProps={closeButtonProps}
+                closeIcon={closeIcon}
                 dialogClassNames={dialogClasses}
                 headerClassNames={headerClasses}
                 bodyClassNames={bodyClasses}
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index f75a6e16b..f427131e5 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -11,6 +11,8 @@ export const Modal: FC<ModalProps> = React.forwardRef(
             actionButtonOneProps,
             actionButtonTwoProps,
             actionButtonThreeProps,
+            closeButtonProps,
+            closeIcon,
             size = ModalSize.medium,
             headerClassNames,
             bodyClassNames,
@@ -51,6 +53,8 @@ export const Modal: FC<ModalProps> = React.forwardRef(
                 actionButtonOneProps={actionButtonOneProps}
                 actionButtonTwoProps={actionButtonTwoProps}
                 actionButtonThreeProps={actionButtonThreeProps}
+                closeButtonProps={closeButtonProps}
+                closeIcon={closeIcon}
                 dialogWrapperClassNames={modalWrapperClassNames}
                 dialogClassNames={modalClasses}
                 headerClassNames={headerClasses}
diff --git a/src/components/Panel/Panel.stories.tsx b/src/components/Panel/Panel.stories.tsx
index 6f54e2a4c..eaf946c39 100644
--- a/src/components/Panel/Panel.stories.tsx
+++ b/src/components/Panel/Panel.stories.tsx
@@ -346,6 +346,33 @@ const Top_Story: ComponentStory<typeof Panel> = (args) => {
 
 export const Top = Top_Story.bind({});
 
+const Header_Actions_Story: ComponentStory<typeof Panel> = (args) => {
+    const [visible, setVisible] = useState<boolean>(false);
+    return (
+        <>
+            <PrimaryButton
+                text={'Open panel'}
+                onClick={() => setVisible(true)}
+            />
+            <Panel
+                {...args}
+                footer={
+                    <div>
+                        <PrimaryButton
+                            text={'Close'}
+                            onClick={() => setVisible(false)}
+                        />
+                    </div>
+                }
+                visible={visible}
+                onClose={() => setVisible(false)}
+            />
+        </>
+    );
+};
+
+export const Header_Actions = Header_Actions_Story.bind({});
+
 const panelArgs: Object = {
     size: PanelSize.small,
     visible: false,
@@ -467,3 +494,19 @@ Top.args = {
     size: PanelSize.small,
     placement: 'top',
 };
+
+Header_Actions.args = {
+    ...panelArgs,
+    actionButtonOneProps: {
+        iconProps: { path: IconName.mdiCogOutline },
+    },
+    actionButtonTwoProps: {
+        iconProps: {
+            path: IconName.mdiHistory,
+        },
+    },
+    actionButtonThreeProps: {
+        iconProps: { path: IconName.mdiDatabaseArrowDownOutline },
+    },
+    size: PanelSize.medium,
+};
diff --git a/src/components/Panel/Panel.test.tsx b/src/components/Panel/Panel.test.tsx
index 9d08f12a5..86295750f 100644
--- a/src/components/Panel/Panel.test.tsx
+++ b/src/components/Panel/Panel.test.tsx
@@ -3,8 +3,7 @@ import Enzyme, { mount, ReactWrapper } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { Panel } from './';
-import { create } from 'react-test-renderer';
-import { Tab, Tabs } from '../Tabs';
+import { IconName } from '../Icon';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -65,4 +64,25 @@ describe('Panel', () => {
         wrapper.find('.panel-backdrop').at(0).simulate('click');
         expect(onClose).toHaveBeenCalledTimes(2);
     });
+
+    test('panel header actions exist', () => {
+        wrapper.setProps({
+            visible: true,
+            actionButtonOneProps: {
+                classNames: 'header-action-button-1',
+                iconProps: { path: IconName.mdiCogOutline },
+            },
+            actionButtonTwoProps: {
+                classNames: 'header-action-button-2',
+                iconProps: { path: IconName.mdiHistory },
+            },
+            actionButtonThreeProps: {
+                classNames: 'header-action-button-3',
+                iconProps: { path: IconName.mdiDatabaseArrowDownOutline },
+            },
+        });
+        expect(wrapper.find('.header-action-button-1').length).toBeTruthy();
+        expect(wrapper.find('.header-action-button-2').length).toBeTruthy();
+        expect(wrapper.find('.header-action-button-3').length).toBeTruthy();
+    });
 });
diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx
index f285831d6..42060dcee 100644
--- a/src/components/Panel/Panel.tsx
+++ b/src/components/Panel/Panel.tsx
@@ -25,6 +25,9 @@ const PANEL_WIDTHS: Record<PanelSize, number> = Object.freeze({
 export const Panel = React.forwardRef<PanelRef, PanelProps>(
     (
         {
+            actionButtonOneProps,
+            actionButtonTwoProps,
+            actionButtonThreeProps,
             size = PanelSize.medium,
             visible = false,
             closable = true,
@@ -108,14 +111,25 @@ export const Panel = React.forwardRef<PanelRef, PanelProps>(
         const getHeader = (): JSX.Element => (
             <div className={headerClasses}>
                 <div>{title}</div>
-                {closable && (
-                    <NeutralButton
-                        iconProps={{ path: closeIcon }}
-                        ariaLabel={'Close'}
-                        onClick={onClose}
-                        {...closeButtonProps}
-                    />
-                )}
+                <span className={styles.headerButtons}>
+                    {actionButtonThreeProps && (
+                        <NeutralButton {...actionButtonThreeProps} />
+                    )}
+                    {actionButtonTwoProps && (
+                        <NeutralButton {...actionButtonTwoProps} />
+                    )}
+                    {actionButtonOneProps && (
+                        <NeutralButton {...actionButtonOneProps} />
+                    )}
+                    {closable && (
+                        <NeutralButton
+                            iconProps={{ path: closeIcon }}
+                            ariaLabel={'Close'}
+                            onClick={onClose}
+                            {...closeButtonProps}
+                        />
+                    )}
+                </span>
             </div>
         );
 
diff --git a/src/components/Panel/Panel.types.ts b/src/components/Panel/Panel.types.ts
index d9d8366c8..a81cf960e 100644
--- a/src/components/Panel/Panel.types.ts
+++ b/src/components/Panel/Panel.types.ts
@@ -23,6 +23,18 @@ type EventType =
 export type CloseButtonProps = Omit<ButtonProps, 'onClick' | 'icon'>;
 
 export interface PanelProps extends Omit<OcBaseProps<HTMLElement>, 'title'> {
+    /**
+     * Props for the first header action button
+     */
+    actionButtonOneProps?: ButtonProps;
+    /**
+     * Props for the second header action button
+     */
+    actionButtonTwoProps?: ButtonProps;
+    /**
+     * Props for the third header action button
+     */
+    actionButtonThreeProps?: ButtonProps;
     /**
      * Autofocus on the panel on visible
      * @default true
diff --git a/src/components/Panel/panel.module.scss b/src/components/Panel/panel.module.scss
index 0e58ea290..260ade4d7 100644
--- a/src/components/Panel/panel.module.scss
+++ b/src/components/Panel/panel.module.scss
@@ -68,6 +68,14 @@
             top: 0;
             display: flex;
             justify-content: space-between;
+
+            &-buttons {
+                align-items: flex-end;
+                align-self: start;
+                height: fit-content;
+                justify-content: right;
+                white-space: nowrap;
+            }
         }
 
         .body {
diff --git a/src/components/RadioButton/RadioButton.stories.tsx b/src/components/RadioButton/RadioButton.stories.tsx
index 6c88c9bfd..ad4d07925 100644
--- a/src/components/RadioButton/RadioButton.stories.tsx
+++ b/src/components/RadioButton/RadioButton.stories.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Stories } from '@storybook/addon-docs';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { RadioButton, RadioButtonValue, RadioGroup } from './';
+import { Stack } from '../Stack';
 
 export default {
     title: 'Radio Button',
@@ -106,9 +107,23 @@ export default {
     },
 } as ComponentMeta<typeof RadioButton>;
 
-const RadioButton_Story: ComponentStory<typeof RadioButton> = (args) => (
-    <RadioButton {...args} />
-);
+const RadioButton_Story: ComponentStory<typeof RadioButton> = (args) => {
+    const [selected, setSelected] = useState<RadioButtonValue>('label1');
+
+    const radioChangeHandler = (
+        e?: React.ChangeEvent<HTMLInputElement>
+    ): void => {
+        setSelected(e.target.value);
+    };
+
+    return (
+        <RadioButton
+            {...args}
+            checked={selected === 'Label1'}
+            onChange={radioChangeHandler}
+        />
+    );
+};
 
 export const Radio_Button = RadioButton_Story.bind({});
 
@@ -128,6 +143,50 @@ const RadioGroup_Story: ComponentStory<typeof RadioGroup> = (args) => {
 
 export const Radio_Group = RadioGroup_Story.bind({});
 
+const Bespoke_RadioGroup_Story: ComponentStory<typeof RadioButton> = (args) => {
+    const [selected, setSelected] = useState<RadioButtonValue>('label1');
+
+    const radioChangeHandler = (
+        e?: React.ChangeEvent<HTMLInputElement>
+    ): void => {
+        setSelected(e.target.value);
+    };
+
+    return (
+        <Stack direction="vertical" gap="m">
+            <RadioButton
+                {...args}
+                ariaLabel={'Label 1'}
+                checked={selected === 'label1'}
+                id={'myRadioButtonId1'}
+                label={'Label 1'}
+                onChange={radioChangeHandler}
+                value={'label1'}
+            />
+            <RadioButton
+                {...args}
+                ariaLabel={'Label 2'}
+                checked={selected === 'label2'}
+                id={'myRadioButtonId2'}
+                label={'Label 2'}
+                onChange={radioChangeHandler}
+                value={'label2'}
+            />
+            <RadioButton
+                {...args}
+                ariaLabel={'Label 3'}
+                checked={selected === 'label3'}
+                id={'myRadioButtonId3'}
+                label={'Label 3'}
+                onChange={radioChangeHandler}
+                value={'label3'}
+            />
+        </Stack>
+    );
+};
+
+export const Bespoke_Radio_Group = Bespoke_RadioGroup_Story.bind({});
+
 const radioButtonArgs: Object = {
     allowDisabledFocus: false,
     ariaLabel: 'Label',
@@ -136,7 +195,7 @@ const radioButtonArgs: Object = {
     classNames: 'my-radiobutton-class',
     disabled: false,
     name: 'myRadioButtonName',
-    value: 'Label',
+    value: 'Label1',
     id: 'myRadioButtonId',
 };
 
@@ -155,3 +214,8 @@ Radio_Group.args = {
     })),
     layout: 'vertical',
 };
+
+Bespoke_Radio_Group.args = {
+    ...radioButtonArgs,
+    name: 'roleGroupName',
+};
diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
index 695140464..50035f4c8 100644
--- a/src/components/RadioButton/RadioButton.tsx
+++ b/src/components/RadioButton/RadioButton.tsx
@@ -1,5 +1,5 @@
 import React, { FC, Ref, useEffect, useRef, useState } from 'react';
-import { RadioButtonProps } from './';
+import { RadioButtonProps, RadioButtonValue } from './';
 import { mergeClasses, generateId } from '../../shared/utilities';
 import { useRadioGroup } from './RadioGroup.context';
 
@@ -27,6 +27,8 @@ export const RadioButton: FC<RadioButtonProps> = React.forwardRef(
         const [isActive, setIsActive] = useState<boolean>(
             radioGroupContext?.value === value || checked
         );
+        const [selectedValue, setSelectedValue] =
+            useState<RadioButtonValue>(value);
 
         const radioButtonClassNames: string = mergeClasses([
             styles.radioButton,
@@ -41,6 +43,10 @@ export const RadioButton: FC<RadioButtonProps> = React.forwardRef(
             { [styles.labelNoValue]: value === '' },
         ]);
 
+        // TODO: Follow-up on React issue 24439 https://github.com/facebook/react/issues/24439
+        // Bug: Checked attribute does not update in the dom - Meta folks are planning on
+        // updating this in a future React version, this could be an A11y issue so need
+        // to find a anti-pattern workaround. They closed the bug, but it's definitely still repro.
         useEffect(() => {
             setIsActive(radioGroupContext?.value === value);
         }, [radioGroupContext?.value]);
@@ -49,9 +55,11 @@ export const RadioButton: FC<RadioButtonProps> = React.forwardRef(
             e: React.ChangeEvent<HTMLInputElement>
         ): void => {
             if (!radioGroupContext) {
-                setIsActive(!isActive);
+                setSelectedValue(e.currentTarget.value as RadioButtonValue);
+            } else {
+                radioGroupContext?.onChange?.(e);
             }
-            radioGroupContext?.onChange?.(e);
+
             onChange?.(e);
         };
 
@@ -64,7 +72,11 @@ export const RadioButton: FC<RadioButtonProps> = React.forwardRef(
                 <input
                     ref={ref}
                     aria-label={ariaLabel}
-                    checked={isActive}
+                    checked={
+                        radioGroupContext
+                            ? isActive
+                            : selectedValue === value && checked
+                    }
                     disabled={disabled}
                     id={radioButtonId.current}
                     name={name}
diff --git a/src/src/components/Panel/__snapshots__/Panel.stories.storyshot b/src/src/components/Panel/__snapshots__/Panel.stories.storyshot
index f27717eb5..d0c689f6d 100644
--- a/src/src/components/Panel/__snapshots__/Panel.stories.storyshot
+++ b/src/src/components/Panel/__snapshots__/Panel.stories.storyshot
@@ -16,6 +16,22 @@ exports[`Storyshots Panel Bottom 1`] = `
 </button>
 `;
 
+exports[`Storyshots Panel Header Actions 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open panel
+  </span>
+</button>
+`;
+
 exports[`Storyshots Panel Large 1`] = `
 <button
   aria-disabled={false}
diff --git a/src/src/components/RadioButton/__snapshots__/RadioButton.stories.storyshot b/src/src/components/RadioButton/__snapshots__/RadioButton.stories.storyshot
index 6843370f2..06b349ef1 100644
--- a/src/src/components/RadioButton/__snapshots__/RadioButton.stories.storyshot
+++ b/src/src/components/RadioButton/__snapshots__/RadioButton.stories.storyshot
@@ -1,5 +1,106 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Storyshots Radio Button Bespoke Radio Group 1`] = `
+<div
+  className="stack vertical m"
+  style={
+    Object {
+      "alignItems": undefined,
+      "flexWrap": undefined,
+      "justifyContent": undefined,
+    }
+  }
+>
+  <div
+    className="selector my-radiobutton-class"
+  >
+    <input
+      aria-label="Label 1"
+      checked={true}
+      disabled={false}
+      id="myRadioButtonId1"
+      name="roleGroupName"
+      onChange={[Function]}
+      readOnly={true}
+      type="radio"
+      value="label1"
+    />
+    <label
+      className=""
+      htmlFor="myRadioButtonId1"
+    >
+      <span
+        className="radio-button"
+        id="myRadioButtonId1-custom-radio"
+      />
+      <span
+        className="selector-label"
+      >
+        Label 1
+      </span>
+    </label>
+  </div>
+  <div
+    className="selector my-radiobutton-class"
+  >
+    <input
+      aria-label="Label 2"
+      checked={false}
+      disabled={false}
+      id="myRadioButtonId2"
+      name="roleGroupName"
+      onChange={[Function]}
+      readOnly={true}
+      type="radio"
+      value="label2"
+    />
+    <label
+      className=""
+      htmlFor="myRadioButtonId2"
+    >
+      <span
+        className="radio-button"
+        id="myRadioButtonId2-custom-radio"
+      />
+      <span
+        className="selector-label"
+      >
+        Label 2
+      </span>
+    </label>
+  </div>
+  <div
+    className="selector my-radiobutton-class"
+  >
+    <input
+      aria-label="Label 3"
+      checked={false}
+      disabled={false}
+      id="myRadioButtonId3"
+      name="roleGroupName"
+      onChange={[Function]}
+      readOnly={true}
+      type="radio"
+      value="label3"
+    />
+    <label
+      className=""
+      htmlFor="myRadioButtonId3"
+    >
+      <span
+        className="radio-button"
+        id="myRadioButtonId3-custom-radio"
+      />
+      <span
+        className="selector-label"
+      >
+        Label 3
+      </span>
+    </label>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Radio Button Radio Button 1`] = `
 <div
   className="selector my-radiobutton-class"
@@ -13,7 +114,7 @@ exports[`Storyshots Radio Button Radio Button 1`] = `
     onChange={[Function]}
     readOnly={true}
     type="radio"
-    value="Label"
+    value="Label1"
   />
   <label
     className=""