diff --git a/lib/components/Autocomplete/Autocomplete.tsx b/lib/components/Autocomplete/Autocomplete.tsx
index 47118a21..745e9ebd 100644
--- a/lib/components/Autocomplete/Autocomplete.tsx
+++ b/lib/components/Autocomplete/Autocomplete.tsx
@@ -76,7 +76,7 @@ const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
     return (
       <div
         ref={wrapperRef}
-        className="relative flex flex-col"
+        className="relative flex flex-col gap-2"
         data-theme={theme}
       >
         {label ? (
diff --git a/lib/components/Autocomplete/Autocomplete.variants.ts b/lib/components/Autocomplete/Autocomplete.variants.ts
index 356e6b77..e0063175 100644
--- a/lib/components/Autocomplete/Autocomplete.variants.ts
+++ b/lib/components/Autocomplete/Autocomplete.variants.ts
@@ -22,9 +22,4 @@ export const autocompleteVariants = cva([
   'kubefirst:focus:ring-kubefirst-primary',
 ]);
 
-export const labelVariants = cva([
-  'pl-1',
-  'mb-2',
-  'text-base',
-  'cursor-pointer',
-]);
+export const labelVariants = cva(['pl-1', 'text-base', 'cursor-pointer']);
diff --git a/lib/components/Counter/Counter.tsx b/lib/components/Counter/Counter.tsx
index efc6776d..707bb42d 100644
--- a/lib/components/Counter/Counter.tsx
+++ b/lib/components/Counter/Counter.tsx
@@ -98,7 +98,7 @@ export const Counter: FC<CounterProps> = forwardRef<
     }, [count, max, onChange]);
 
     return (
-      <div className="flex flex-col gap-1" data-theme={theme}>
+      <div className="flex flex-col gap-2" data-theme={theme}>
         {label ? (
           <div className={cn(labelWrapperClassName)}>
             <Typography
diff --git a/lib/components/MultiSelectDropdown/MultiSelectDropdown.variants.ts b/lib/components/MultiSelectDropdown/MultiSelectDropdown.variants.ts
index 26d15515..51eccdec 100644
--- a/lib/components/MultiSelectDropdown/MultiSelectDropdown.variants.ts
+++ b/lib/components/MultiSelectDropdown/MultiSelectDropdown.variants.ts
@@ -3,12 +3,13 @@ import { cva } from 'class-variance-authority';
 export const wrapperVariants = cva([
   'flex',
   'flex-col',
+  'gap-2',
   'w-full',
   'relative',
   'cursor-pointer',
 ]);
 
-export const labelVariants = cva(['cursor-pointer', 'mb-1', 'select-none']);
+export const labelVariants = cva(['cursor-pointer', 'select-none']);
 
 export const multiSelectDropdownVariants = cva([
   'min-h-9',
diff --git a/lib/components/Select/Select.variants.ts b/lib/components/Select/Select.variants.ts
index 9487d952..e44149ad 100644
--- a/lib/components/Select/Select.variants.ts
+++ b/lib/components/Select/Select.variants.ts
@@ -67,7 +67,6 @@ export const inputVariants = cva([
 ]);
 
 export const labelVariants = cva([
-  'mb-1',
   'cursor-pointer',
   'text-sm',
   'leading-5',
diff --git a/lib/components/Select/components/Wrapper.tsx b/lib/components/Select/components/Wrapper.tsx
index 42135248..e23ff24e 100644
--- a/lib/components/Select/components/Wrapper.tsx
+++ b/lib/components/Select/components/Wrapper.tsx
@@ -131,7 +131,7 @@ export const Wrapper: ForwardRefExoticComponent<
     return (
       <div
         ref={wrapperRef}
-        className={cn('flex flex-col w-full relative', wrapperClassName)}
+        className={cn('flex flex-col gap-2 w-full relative', wrapperClassName)}
         data-theme={theme}
       >
         {label ? (
diff --git a/lib/components/TagSelect/TagSelect.variants.ts b/lib/components/TagSelect/TagSelect.variants.ts
index 52316542..c0af769a 100644
--- a/lib/components/TagSelect/TagSelect.variants.ts
+++ b/lib/components/TagSelect/TagSelect.variants.ts
@@ -3,12 +3,13 @@ import { cva } from 'class-variance-authority';
 export const wrapperVariants = cva([
   'flex',
   'flex-col',
+  'gap-2',
   'w-full',
   'relative',
   'text-zinc-500',
 ]);
 
-export const labelVariants = cva(['my-2', 'cursor-pointer']);
+export const labelVariants = cva(['cursor-pointer']);
 
 export const tagSelectVariants = cva([
   'border',