diff --git a/web/modals/threads/confirm-leave-thread-modal.css b/web/modals/threads/confirm-leave-thread-modal.css
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/confirm-leave-thread-modal.css
@@ -0,0 +1,17 @@
+div.container {
+  padding: 0 40px 32px;
+  border-radius: 8px;
+  background: var(--modal-bg);
+  color: var(--modal-fg);
+  min-width: 635px;
+  box-sizing: border-box;
+}
+div.container > p {
+  font-size: var(--xl-font-20);
+  padding-bottom: 32px;
+}
+div.buttonContainer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 24px;
+}
diff --git a/web/modals/threads/confirm-leave-thread-modal.react.js b/web/modals/threads/confirm-leave-thread-modal.react.js
--- a/web/modals/threads/confirm-leave-thread-modal.react.js
+++ b/web/modals/threads/confirm-leave-thread-modal.react.js
@@ -5,8 +5,8 @@
 import { type ThreadInfo } from 'lib/types/thread-types';
 
 import Button from '../../components/button.react';
-import css from '../../style.css';
 import Modal from '../modal.react';
+import css from './confirm-leave-thread-modal.css';
 
 type Props = {
   +threadInfo: ThreadInfo,
@@ -19,15 +19,18 @@
 
   return (
     <Modal name="Leaving channel" icon="warning-circle" onClose={onClose}>
-      <div className={css['modal-body']}>
+      <div className={css.container}>
         <p>
           {'Are you sure you want to leave "'}
           <span className={css['thread-name']}>{uiName}</span>
           {'"?'}
         </p>
-        <div className={css['form-footer']}>
-          <Button onClick={onConfirm} type="submit">
-            Leave Thread
+        <div className={css.buttonContainer}>
+          <Button variant="secondary" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button variant="danger" onClick={onConfirm} type="submit">
+            Yes, leave Thread
           </Button>
         </div>
       </div>