diff --git a/src/components/ui/hstack/hstack.tsx b/src/components/ui/hstack/hstack.tsx
index eb435cbae..082f210b8 100644
--- a/src/components/ui/hstack/hstack.tsx
+++ b/src/components/ui/hstack/hstack.tsx
@@ -18,17 +18,17 @@ const alignItemsOptions = {
 };
 
 const spaces = {
-  0: 'space-x-0',
-  [0.5]: 'space-x-0.5',
-  1: 'space-x-1',
-  1.5: 'space-x-1.5',
-  2: 'space-x-2',
-  2.5: 'space-x-2.5',
-  3: 'space-x-3',
-  4: 'space-x-4',
-  5: 'space-x-5',
-  6: 'space-x-6',
-  8: 'space-x-8',
+  0: 'gap-x-0',
+  [0.5]: 'gap-x-0.5',
+  1: 'gap-x-1',
+  1.5: 'gap-x-1.5',
+  2: 'gap-x-2',
+  2.5: 'gap-x-2.5',
+  3: 'gap-x-3',
+  4: 'gap-x-4',
+  5: 'gap-x-5',
+  6: 'gap-x-6',
+  8: 'gap-x-8',
 };
 
 interface IHStack extends Pick<React.HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'onClick' | 'style' | 'title'> {
@@ -56,7 +56,7 @@ const HStack = forwardRef<HTMLDivElement, IHStack>((props, ref) => {
     <Elem
       {...filteredProps}
       ref={ref}
-      className={clsx('flex rtl:space-x-reverse', {
+      className={clsx('flex', {
         // @ts-ignore
         [alignItemsOptions[alignItems]]: typeof alignItems !== 'undefined',
         // @ts-ignore
diff --git a/src/components/ui/stack/stack.tsx b/src/components/ui/stack/stack.tsx
index 8a4370b04..feceff437 100644
--- a/src/components/ui/stack/stack.tsx
+++ b/src/components/ui/stack/stack.tsx
@@ -2,17 +2,17 @@ import clsx from 'clsx';
 import React from 'react';
 
 const spaces = {
-  0: 'space-y-0',
-  [0.5]: 'space-y-0.5',
-  1: 'space-y-1',
-  [1.5]: 'space-y-1.5',
-  2: 'space-y-2',
-  3: 'space-y-3',
-  4: 'space-y-4',
-  5: 'space-y-5',
-  6: 'space-y-6',
-  9: 'space-y-9',
-  10: 'space-y-10',
+  0: 'gap-y-0',
+  [0.5]: 'gap-y-0.5',
+  1: 'gap-y-1',
+  [1.5]: 'gap-y-1.5',
+  2: 'gap-y-2',
+  3: 'gap-y-3',
+  4: 'gap-y-4',
+  5: 'gap-y-5',
+  6: 'gap-y-6',
+  9: 'gap-y-9',
+  10: 'gap-y-10',
 };
 
 const justifyContentOptions = {