diff --git a/clients/fides-js/src/components/ConsentBanner.tsx b/clients/fides-js/src/components/ConsentBanner.tsx
index 186bf81b80..a8b7b72f47 100644
--- a/clients/fides-js/src/components/ConsentBanner.tsx
+++ b/clients/fides-js/src/components/ConsentBanner.tsx
@@ -49,44 +49,49 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
 
   return (
     <div
-      id="fides-banner"
+      id="fides-banner-container"
       className={`fides-banner fides-banner-bottom ${
         isShown ? "" : "fides-banner-hidden"
       } `}
     >
-      <div id="fides-banner-inner">
-        <div id="fides-banner-title" className="fides-banner-title">
-          {title}
-        </div>
-        <div id="fides-banner-description" className="fides-banner-description">
-          {description}
-        </div>
-        <div id="fides-banner-buttons" className="fides-banner-buttons">
-          <span className="fides-banner-buttons-left">
-            <Button
-              buttonType={ButtonType.TERTIARY}
-              label={privacyPreferencesLabel}
-              onClick={handleManagePreferencesClick}
-            />
-          </span>
-          <span className="fides-banner-buttons-right">
-            <Button
-              buttonType={ButtonType.PRIMARY}
-              label={rejectButtonLabel}
-              onClick={() => {
-                onRejectAll();
-                setIsShown(false);
-              }}
-            />
-            <Button
-              buttonType={ButtonType.PRIMARY}
-              label={acceptButtonLabel}
-              onClick={() => {
-                onAcceptAll();
-                setIsShown(false);
-              }}
-            />
-          </span>
+      <div id="fides-banner">
+        <div id="fides-banner-inner">
+          <div id="fides-banner-title" className="fides-banner-title">
+            {title}
+          </div>
+          <div
+            id="fides-banner-description"
+            className="fides-banner-description"
+          >
+            {description}
+          </div>
+          <div id="fides-banner-buttons" className="fides-banner-buttons">
+            <span className="fides-banner-buttons-left">
+              <Button
+                buttonType={ButtonType.TERTIARY}
+                label={privacyPreferencesLabel}
+                onClick={handleManagePreferencesClick}
+              />
+            </span>
+            <span className="fides-banner-buttons-right">
+              <Button
+                buttonType={ButtonType.PRIMARY}
+                label={rejectButtonLabel}
+                onClick={() => {
+                  onRejectAll();
+                  setIsShown(false);
+                }}
+              />
+              <Button
+                buttonType={ButtonType.PRIMARY}
+                label={acceptButtonLabel}
+                onClick={() => {
+                  onAcceptAll();
+                  setIsShown(false);
+                }}
+              />
+            </span>
+          </div>
         </div>
       </div>
     </div>
diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css
index 06ee44948b..af8a0b9805 100644
--- a/clients/fides-js/src/components/fides.css
+++ b/clients/fides-js/src/components/fides.css
@@ -47,7 +47,7 @@
   --fides-overlay-padding: 1.5em;
   --fides-overlay-button-border-radius: 4px;
   --fides-overlay-button-padding: 0.5em 1em;
-  --fides-overlay-component-border-radius: 0px;
+  --fides-overlay-component-border-radius: 4px;
 }
 
 div#fides-overlay {
@@ -63,53 +63,73 @@ div#fides-overlay {
   display: none;
 }
 
+div#fides-banner-container {
+  position: fixed;
+  z-index: 1;
+  width: 100%;
+  transform: translateY(0%);
+  transition: transform 1s;
+  display: flex;
+  justify-content: center;
+}
+
 div#fides-banner {
   font-size: var(--fides-overlay-font-size-body-small);
   background: var(--fides-overlay-background-color);
   color: var(--fides-overlay-body-font-color);
   box-sizing: border-box;
   padding: var(--fides-overlay-padding);
-  border: 1px solid var(--fides-overlay-primary-color);
-  border-radius: var(--fides-overlay-component-border-radius);
 
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
-  transition: transform 1s;
 }
 
 div#fides-banner-inner {
   width: 100%;
 }
 
-div#fides-banner.fides-banner-bottom {
-  position: fixed;
-  z-index: 1;
-  width: 100%;
+div#fides-banner-container.fides-banner-bottom {
   bottom: 0;
   left: 0;
-  transform: translateY(0%);
 }
 
-div#fides-banner.fides-banner-bottom.fides-banner-hidden {
+div#fides-banner-container.fides-banner-bottom.fides-banner-hidden {
   transform: translateY(100%);
 }
 
-div#fides-banner.fides-banner-top {
-  position: fixed;
-  z-index: 1;
-  width: 100%;
+div#fides-banner-container.fides-banner-top {
   top: 0;
   left: 0;
-  transform: translateY(0%);
 }
 
-div#fides-banner.fides-banner-top.fides-banner-hidden {
+div#fides-banner-container.fides-banner-top.fides-banner-hidden {
   transform: translateY(-100%);
 }
 
+/* Responsive banner */
+@media screen and (min-width: 48em) {
+  div#fides-banner {
+    width: 75%;
+    border-radius: var(--fides-overlay-component-border-radius);
+    border: 1px solid var(--fides-overlay-primary-color);
+  }
+  div#fides-banner-container.fides-banner-bottom {
+    bottom: 48px;
+  }
+  div#fides-banner-container.fides-banner-top {
+    top: 48px;
+  }
+}
+
+@media only screen and (min-width: 80em) {
+  div#fides-banner {
+    width: 60%;
+  }
+}
+
 div#fides-banner-title {
   font-size: var(--fides-overlay-font-size-title);
   font-weight: 600;
diff --git a/clients/privacy-center/cypress/e2e/consent-banner.cy.ts b/clients/privacy-center/cypress/e2e/consent-banner.cy.ts
index 541ab546c8..8733aa0a25 100644
--- a/clients/privacy-center/cypress/e2e/consent-banner.cy.ts
+++ b/clients/privacy-center/cypress/e2e/consent-banner.cy.ts
@@ -169,7 +169,7 @@ describe("Consent banner", () => {
         });
       });
       it("should render the expected HTML banner", () => {
-        cy.get("div#fides-banner.fides-banner").within(() => {
+        cy.get("div#fides-banner").within(() => {
           cy.get(
             "div#fides-banner-description.fides-banner-description"
           ).contains(
diff --git a/clients/privacy-center/public/fides-js-components-demo.html b/clients/privacy-center/public/fides-js-components-demo.html
index 90ae4f5ff9..6a65e836db 100644
--- a/clients/privacy-center/public/fides-js-components-demo.html
+++ b/clients/privacy-center/public/fides-js-components-demo.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>fides-js script demo page</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <script src="./lib/fides.js"></script>
     <script>
diff --git a/clients/privacy-center/public/fides-js-demo.html b/clients/privacy-center/public/fides-js-demo.html
index 6e55b98805..0e7a05a512 100644
--- a/clients/privacy-center/public/fides-js-demo.html
+++ b/clients/privacy-center/public/fides-js-demo.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>fides-js script demo page</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <script src="/fides.js"></script>