diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss
index df4cab4..0561555 100644
--- a/src/components/Sidebar/Sidebar.scss
+++ b/src/components/Sidebar/Sidebar.scss
@@ -17,10 +17,9 @@
     line-height: 1.75rem;
   }
 
-  button.close {
+  button.chat-close {
     top: 0;
     right: 0;
-    background: none;
   }
 
   form {
diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx
index 5398397..8826c10 100644
--- a/src/components/Sidebar/index.jsx
+++ b/src/components/Sidebar/index.jsx
@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Send } from 'react-feather';
 import PropTypes from 'prop-types';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { Button, Icon } from '@edx/paragon';
+import { Button, Icon, IconButton } from '@edx/paragon';
 import { Close } from '@edx/paragon/icons';
 import Disclosure from '../Disclosure';
 import ChatBox from '../ChatBox';
@@ -159,16 +159,16 @@ const Sidebar = ({
       <div
         className="sidebar position-fixed"
       >
-        <Button
-          className="close position-absolute m-3 border-0"
+        <IconButton
+          className="chat-close position-absolute m-2 border-0"
+          src={Close}
+          iconAs={Icon}
           data-testid="close-button"
           onClick={handleClick}
           aria-label="close"
-          variant="tertiary"
-          type="button"
-        >
-          <Icon src={Close} className={`${disclosureAcknowledged ? '' : 'text-white'}`} size="lg" />
-        </Button>
+          variant="primary"
+          invertColors={!disclosureAcknowledged}
+        />
         {disclosureAcknowledged ? (getSidebar()) : (<Disclosure />)}
       </div>
     )