diff --git a/docs/operator-manual/custom-styles.md b/docs/operator-manual/custom-styles.md
index 8f2499a2d636a..893720f7bc9c0 100644
--- a/docs/operator-manual/custom-styles.md
+++ b/docs/operator-manual/custom-styles.md
@@ -100,7 +100,7 @@ experience, you may wish to build a separate project using the [Argo CD UI dev s
 
 ## Banners
 
-Argo CD can optionally display a banner that can be used to notify your users of upcoming maintenance and operational changes. This feature can be enabled by specifying the banner message using the `ui.bannercontent` field in the `argocd-cm` ConfigMap and Argo CD will display this message at the top of every UI page. You can optionally add a link to this message by setting `ui.bannerurl`. You can also make the banner sticky (permanent) by setting `ui.bannerpermanent` to `true` and change it's position to the bottom by using `ui.bannerposition: "bottom"` 
+Argo CD can optionally display a banner that can be used to notify your users of upcoming maintenance and operational changes. This feature can be enabled by specifying the banner message using the `ui.bannercontent` field in the `argocd-cm` ConfigMap and Argo CD will display this message at the top of every UI page. You can optionally add a link to this message by setting `ui.bannerurl`. You can also make the banner sticky (permanent) by setting `ui.bannerpermanent` to true and change its position to "both" or "bottom" by using `ui.bannerposition: "both"`, allowing the banner to display on both the top and bottom, or `ui.bannerposition: "bottom"` to display it exclusively at the bottom.
 
 ### argocd-cm
 ```yaml
diff --git a/ui/src/app/ui-banner/ui-banner.tsx b/ui/src/app/ui-banner/ui-banner.tsx
index 53508b67690f7..29dbc45eadfbc 100644
--- a/ui/src/app/ui-banner/ui-banner.tsx
+++ b/ui/src/app/ui-banner/ui-banner.tsx
@@ -8,6 +8,46 @@ import {DataLoader} from '../shared/components';
 import {services, ViewPreferences} from '../shared/services';
 import './ui-banner.scss';
 
+const CustomBanner = (props: {
+    combinedBannerClassName: string;
+    show: boolean;
+    heightOfBanner: string;
+    leftOffset: string;
+    permanent: boolean;
+    url: string;
+    content: string;
+    setVisible: (visible: boolean) => void;
+    prefs: object;
+}) => {
+    return (
+        <div className={props.combinedBannerClassName} style={{visibility: props.show ? 'visible' : 'hidden', height: props.heightOfBanner, marginLeft: props.leftOffset}}>
+            <div className='ui-banner-text' style={{maxHeight: props.permanent ? '25px' : '50px'}}>
+                {props.url !== undefined ? (
+                    <a href={props.url} target='_blank' rel='noopener noreferrer'>
+                        {props.content}
+                    </a>
+                ) : (
+                    <React.Fragment>{props.content}</React.Fragment>
+                )}
+            </div>
+            {!props.permanent ? (
+                <>
+                    <button className='ui-banner-button argo-button argo-button--base' style={{marginRight: '5px'}} onClick={() => props.setVisible(false)}>
+                        Dismiss for now
+                    </button>
+                    <button
+                        className='ui-banner-button argo-button argo-button--base'
+                        onClick={() => services.viewPreferences.updatePreferences({...props.prefs, hideBannerContent: props.content})}>
+                        Don't show again
+                    </button>
+                </>
+            ) : (
+                <></>
+            )}
+        </div>
+    );
+};
+
 export const Banner = (props: React.Props<any>) => {
     const [visible, setVisible] = React.useState(true);
     return (
@@ -60,9 +100,8 @@ export const Banner = (props: React.Props<any>) => {
                 const isTop = position !== 'bottom';
                 const bannerClassName = isTop ? 'ui-banner-top' : 'ui-banner-bottom';
                 const wrapperClassname = bannerClassName + '--wrapper ' + (!permanent ? bannerClassName + '--wrapper-multiline' : bannerClassName + '--wrapper-singleline');
-                const combinedBannerClassName = isTop ? 'ui-banner ui-banner-top' : 'ui-banner ui-banner-bottom';
                 let chatBottomPosition = 10;
-                if (show && !isTop) {
+                if (show && (!isTop || position === 'both')) {
                     if (permanent) {
                         chatBottomPosition = 40;
                     } else {
@@ -77,33 +116,36 @@ export const Banner = (props: React.Props<any>) => {
                         chatUrl = 'invalid-url';
                     }
                 }
+                const shouldRenderTop = position === 'top' || position === 'both';
+                const shouldRenderBottom = position === 'bottom' || position === 'both';
                 return (
                     <React.Fragment>
-                        <div className={combinedBannerClassName} style={{visibility: show ? 'visible' : 'hidden', height: heightOfBanner, marginLeft: leftOffset}}>
-                            <div className='ui-banner-text' style={{maxHeight: permanent ? '25px' : '50px'}}>
-                                {url !== undefined ? (
-                                    <a href={url} target='_blank' rel='noopener noreferrer'>
-                                        {content}
-                                    </a>
-                                ) : (
-                                    <React.Fragment>{content}</React.Fragment>
-                                )}
-                            </div>
-                            {!permanent ? (
-                                <>
-                                    <button className='ui-banner-button argo-button argo-button--base' style={{marginRight: '5px'}} onClick={() => setVisible(false)}>
-                                        Dismiss for now
-                                    </button>
-                                    <button
-                                        className='ui-banner-button argo-button argo-button--base'
-                                        onClick={() => services.viewPreferences.updatePreferences({...prefs, hideBannerContent: content})}>
-                                        Don't show again
-                                    </button>
-                                </>
-                            ) : (
-                                <></>
-                            )}
-                        </div>
+                        {shouldRenderTop && (
+                            <CustomBanner
+                                combinedBannerClassName={'ui-banner ui-banner-top'}
+                                show={show}
+                                heightOfBanner={heightOfBanner}
+                                leftOffset={leftOffset}
+                                permanent={permanent}
+                                url={url}
+                                content={content}
+                                setVisible={setVisible}
+                                prefs={prefs}
+                            />
+                        )}
+                        {shouldRenderBottom && (
+                            <CustomBanner
+                                combinedBannerClassName={'ui-banner ui-banner-bottom'}
+                                show={show}
+                                heightOfBanner={heightOfBanner}
+                                leftOffset={leftOffset}
+                                permanent={permanent}
+                                url={url}
+                                content={content}
+                                setVisible={setVisible}
+                                prefs={prefs}
+                            />
+                        )}
                         {show ? <div className={wrapperClassname}>{props.children}</div> : props.children}
                         {chatUrl && (
                             <div style={{position: 'fixed', right: 10, bottom: chatBottomPosition}}>