diff --git a/src/assets/styles/bootstrap/_variables.scss b/src/assets/styles/bootstrap/_variables.scss
index f5a607a6..cc82958d 100644
--- a/src/assets/styles/bootstrap/_variables.scss
+++ b/src/assets/styles/bootstrap/_variables.scss
@@ -285,6 +285,11 @@ $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null)
 // scss-docs-start position-map
 $position-values: (
   0: 0,
+  1: $spacer / 4,
+  2: $spacer / 2,
+  3: $spacer,
+  4: $spacer * 1.5,
+  5: $spacer * 3,
   50: 50%,
   100: 100%
 ) !default;
diff --git a/src/layout/card/header/NitroCardHeaderView.scss b/src/layout/card/header/NitroCardHeaderView.scss
index 700bbb18..5addce7e 100644
--- a/src/layout/card/header/NitroCardHeaderView.scss
+++ b/src/layout/card/header/NitroCardHeaderView.scss
@@ -2,7 +2,7 @@
     min-height: $nitro-card-header-height;
     max-height: $nitro-card-header-height;
 
-    .nitro-card-close {
+    .header-close {
         right: 6px;
         border-radius: $border-radius;
         box-shadow: inset 0 0 0 1.5px #921911, inset 0 2px rgba($white, .2);
@@ -21,8 +21,4 @@
             filter: brightness(0.8);
         }
     }
-
-    .nitro-card-close-parent {
-        right: -3px;
-    }
 }
diff --git a/src/layout/card/header/NitroCardHeaderView.tsx b/src/layout/card/header/NitroCardHeaderView.tsx
index 79330e73..4a72a0fd 100644
--- a/src/layout/card/header/NitroCardHeaderView.tsx
+++ b/src/layout/card/header/NitroCardHeaderView.tsx
@@ -12,7 +12,7 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
             <div className="row nitro-card-header">
                 <div className="d-flex justify-content-center align-items-center w-100 position-relative">
                     <div className="h4 m-0 text-white text-shadow">{ headerText }</div>
-                    <div className="position-absolute nitro-card-close" onMouseDown={ event => event.stopPropagation() } onClick={ onCloseClick }>
+                    <div className="position-absolute header-close" onMouseDown={ event => event.stopPropagation() } onClick={ onCloseClick }>
                         <i className="fas fa-times" />
                     </div>
                 </div>
diff --git a/src/layout/card/simple-header/NitroCardSimpleHeaderView.scss b/src/layout/card/simple-header/NitroCardSimpleHeaderView.scss
index 4b1439a6..c7cdc6d7 100644
--- a/src/layout/card/simple-header/NitroCardSimpleHeaderView.scss
+++ b/src/layout/card/simple-header/NitroCardSimpleHeaderView.scss
@@ -1,8 +1,31 @@
-.nitro-card-close-parent {
-    right: 5px;
-}
+.nitro-card-header {
+    min-height: $nitro-card-header-height;
+    max-height: $nitro-card-header-height;
 
-.bg-tertiary-split {
-    border: 2px solid darken($quaternary,4);
-    box-shadow:0 0 0 2px $white;
+    .bg-tertiary-split {
+        border: 2px solid darken($quaternary, 4);
+        box-shadow: 0 0 0 2px $white;
+        width: 100%;
+        margin: 0 30px;
+    }
+
+    .header-close {
+        right: 6px;
+        border-radius: $border-radius;
+        box-shadow: inset 0 0 0 1.5px #921911, inset 0 2px rgba($white, .2);
+        border: 1px solid $white;
+        background: rgb(245,80,65);
+        background: linear-gradient(180deg, rgba(245,80,65,1) 0%, rgba(245,80,65,1) 50%, rgba(194,48,39,1) 50%, rgba(194,48,39,1) 100%);
+        cursor: pointer;
+        line-height: 1;
+        padding: 4px 6px;
+
+        &:hover {
+            filter: brightness(1.2);
+        }
+
+        &:active {
+            filter: brightness(0.8);
+        }
+    }
 }
diff --git a/src/layout/card/simple-header/NitroCardSimpleHeaderView.tsx b/src/layout/card/simple-header/NitroCardSimpleHeaderView.tsx
index d71306b3..ca8970be 100644
--- a/src/layout/card/simple-header/NitroCardSimpleHeaderView.tsx
+++ b/src/layout/card/simple-header/NitroCardSimpleHeaderView.tsx
@@ -6,15 +6,13 @@ export const NitroCardSimpleHeaderView: FC<NitroCardSimpleHeaderViewProps> = pro
     const { headerText = null, onCloseClick = null } = props;
 
     return (
-        <div className="d-flex container-fluid align-items-center bg-light pb-1">
-            <div className="col-1"/>
-            <div className="d-flex bg-tertiary-split flex-grow-1 justify-content-center align-items-center border-top-0 rounded-bottom px-2 py-1 drag-handler">
-                <div className="h5 m-0 text-white text-shadow">{ headerText }</div>
-            </div>
-            <div className="col-1"/>
-            <div className="nitro-card-close-parent">
-                <div className="nitro-card-close" onClick={ onCloseClick }>
-                    <i className="fas fa-times"/>
+        <div className='container-fluid bg-light'>
+            <div className="row nitro-card-header">
+                <div className="d-flex justify-content-center align-items-center w-100 position-relative">
+                    <div className="h5 text-white text-center text-shadow bg-tertiary-split border-top-0 rounded-bottom px-2 py-1 drag-handler">{ headerText }</div>
+                    <div className="position-absolute header-close" onMouseDown={ event => event.stopPropagation() } onClick={ onCloseClick }>
+                        <i className="fas fa-times" />
+                    </div>
                 </div>
             </div>
         </div>