diff --git a/src/components.d.ts b/src/components.d.ts
index 8ef436c..c9c67b4 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -103,7 +103,7 @@ export namespace Components {
         "size": Size;
     }
     interface DHorizontalStack {
-        "gap": 2 | 4 | 8;
+        "gap": 0 | 2 | 4 | 8;
     }
     interface DIcon {
         "icon": string;
@@ -710,7 +710,7 @@ declare namespace LocalJSX {
         "size"?: Size;
     }
     interface DHorizontalStack {
-        "gap"?: 2 | 4 | 8;
+        "gap"?: 0 | 2 | 4 | 8;
     }
     interface DIcon {
         "icon"?: string;
diff --git a/src/components/checkbox/d-checkbox.css b/src/components/checkbox/d-checkbox.css
index ed18f65..b6dcbd3 100644
--- a/src/components/checkbox/d-checkbox.css
+++ b/src/components/checkbox/d-checkbox.css
@@ -1,15 +1,20 @@
 :host {
   display: block;
-  
 }
 ion-checkbox {
-  --checkbox-background: var(--on-alt);
-  --size: 48px;
-  --checkbox-background-checked: var(--accent)
+  --checkbox-background: var(--highlight);
+  --checkbox-background-checked: var(--accent);
+  width: 48px;
+  height: 48px;
+  justify-items: center;
+  margin-left: -12px;
+  
 }
 ion-checkbox::part(container) {
-  border-radius: 0;
+  border-radius: 1px;
   border: 2px solid;
-  border-color: var(--highlight);
+  border-color: var(--on-alt);
   --checkmark-color: var(--stroke);
-}
\ No newline at end of file
+  --checkmark-width:3px;
+  --size: 22px;
+}
diff --git a/src/components/checkbox/d-checkbox.tsx b/src/components/checkbox/d-checkbox.tsx
index d900c5a..2d822ac 100644
--- a/src/components/checkbox/d-checkbox.tsx
+++ b/src/components/checkbox/d-checkbox.tsx
@@ -18,7 +18,7 @@ export class DCheckbox {
     return (
       <Host>
         <d-vertical-stack>
-          <d-horizontal-stack class="items-center">
+          <d-horizontal-stack class="items-center" gap={0}>
             <ion-checkbox onIonChange={e => this.updateValue(e.detail.checked)} checked={this.checked}></ion-checkbox>
             <div>
               <slot />
diff --git a/src/components/horizontal-stack/d-horizontal-stack.tsx b/src/components/horizontal-stack/d-horizontal-stack.tsx
index a72d835..ff07730 100644
--- a/src/components/horizontal-stack/d-horizontal-stack.tsx
+++ b/src/components/horizontal-stack/d-horizontal-stack.tsx
@@ -1,4 +1,5 @@
 import { Component, Host, Prop, h } from '@stencil/core';
+import { Gap } from '../types';
 
 @Component({
   tag: 'd-horizontal-stack',
@@ -6,7 +7,7 @@ import { Component, Host, Prop, h } from '@stencil/core';
   shadow: true,
 })
 export class DHorizontalStack {
-  @Prop() gap: 2 | 4 | 8 = 2;
+  @Prop() gap: Gap = 2;
 
   render() {
     return (
diff --git a/src/components/horizontal-stack/readme.md b/src/components/horizontal-stack/readme.md
index 55a66ed..c6b89bb 100644
--- a/src/components/horizontal-stack/readme.md
+++ b/src/components/horizontal-stack/readme.md
@@ -5,9 +5,9 @@
 
 ## Properties
 
-| Property | Attribute | Description | Type          | Default |
-| -------- | --------- | ----------- | ------------- | ------- |
-| `gap`    | `gap`     |             | `2 \| 4 \| 8` | `2`     |
+| Property | Attribute | Description | Type               | Default |
+| -------- | --------- | ----------- | ------------------ | ------- |
+| `gap`    | `gap`     |             | `0 \| 2 \| 4 \| 8` | `2`     |
 
 
 ## Dependencies