diff --git a/src/modules/reusable/components/Dialog/index.js b/src/modules/reusable/components/Dialog/index.js
index 2db9ceb2..196c60ac 100644
--- a/src/modules/reusable/components/Dialog/index.js
+++ b/src/modules/reusable/components/Dialog/index.js
@@ -42,14 +42,12 @@ const Dialog = ({ children, isOpen, onClose }) => {
 
   return (
     <dialog ref={dialogRef}>
-      <div className='dialog-container'>
-        <section>
-          {children}
-        </section>
-        <button onClick={handleCloseClick} className='btn btn--small btn--secondary'>
-          Dismiss
-        </button>
-      </div>
+      <section>
+        {children}
+      </section>
+      <button onClick={handleCloseClick} className='btn btn--small btn--secondary'>
+        Dismiss
+      </button>
     </dialog>
   );
 };
diff --git a/src/modules/reusable/components/Dialog/styles.css b/src/modules/reusable/components/Dialog/styles.css
index ee81bb7a..7869bab6 100644
--- a/src/modules/reusable/components/Dialog/styles.css
+++ b/src/modules/reusable/components/Dialog/styles.css
@@ -1,52 +1,30 @@
 dialog {
-  border: 0;
-  height: 100%;
-  max-height: 100%;
-  max-width: 100%;
-  padding: 0;
-  width: 100%;
+  align-items: start;
+  border: none;
+  color: var(--search-color-grey-700);
+  display: flex;
+  gap: 0.5rem 1rem;
+  max-width: 40rem;
+  padding: 1rem;
 }
 
 @media only screen and (min-width: 640px) {
   dialog {
-    border-radius: 4px;
-    box-shadow:
-      0 0 0 1px rgba(16, 22, 26, 0.1),
-      0 4px 8px rgba(16, 22, 26, 0.2),
-      0 18px 46px 6px rgba(16, 22, 26, 0.2);
-    height: max-content;
-    margin-top: 200px;
-    max-height: calc(100vh - 400px);
-    max-width: 42.5rem;
+    padding: 2rem;
   }
 }
 
 ::backdrop {
-  background: rgba(16, 22, 26, 0.7);
-}
-
-dialog > .dialog-container {
-  align-items: flex-start;
-  display: flex;
-  height: 100%;
-  gap: 1rem;
-  padding: 1rem;
-  width: 100%;
+  background: var(--search-color-grey-700);
+  opacity: 0.75;
 }
 
-@media only screen and (min-width: 640px) {
-  dialog > .dialog-container {
-    height: auto;
-    padding: 2rem;
-  }
-}
-
-dialog > .dialog-container > section {
+dialog > section {
   flex-grow: 1;
 }
 
-dialog > .dialog-container > button {
-  border: none;
+dialog > button {
+  border: none!important;
   flex-shrink: 0;
   text-decoration: underline;
 }
diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css
index 2c7d09ff..3e9b7094 100644
--- a/src/stylesheets/main.css
+++ b/src/stylesheets/main.css
@@ -293,7 +293,7 @@ textarea {
   background: var(--search-color-blue-400);
   color: white;
   border: 0;
-  border-bottom: #1060aa;
+  border-bottom: var(--search-color-blue-500);
   border-bottom-width: 3px;
   border-bottom-style: solid;
 }
@@ -304,8 +304,8 @@ textarea {
 
 .btn--primary:hover {
   cursor: pointer;
-  background: #1060aa;
-  border-color: #0e5392;
+  background: var(--search-color-blue-500);
+  border-color: var(--color-blue-400);
   color: white;
 }