diff --git a/src/components/button/overrides.tsx b/src/components/button/overrides.tsx
index 399f048b..ebf92f05 100644
--- a/src/components/button/overrides.tsx
+++ b/src/components/button/overrides.tsx
@@ -65,9 +65,7 @@ export const getButtonOverrides = (
       },
     },
     LoadingSpinner: {
-      component: ({ $disabled }) => (
-        <Spinner kind={getSpinnerKind(kind, $disabled)} size={spinnerSize[size]} animation />
-      ),
+      component: ({ $disabled }) => <Spinner kind={getSpinnerKind(kind, $disabled)} size={spinnerSize[size]} />,
     },
     LoadingSpinnerContainer: {
       style: {
diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
index bd036da0..972212c5 100644
--- a/src/components/input/Input.tsx
+++ b/src/components/input/Input.tsx
@@ -3,7 +3,6 @@ import { Input as BaseInput, InputProps as BaseInputProps, Input as InputType }
 import { getInputOverrides } from "./overrides";
 import { INPUT_KIND, INPUT_SIZE } from "./types";
 import { Spinner, SPINNER_SIZE } from "../spinner";
-import { useStyletron } from "baseui";
 import { spinnerStyles } from "./styles";
 import { getMergedOverrides } from "../../shared/utils/getMergedOverrides";
 
@@ -23,8 +22,6 @@ const Input = forwardRef<InputType, InputProps>(
     { isLoading, endEnhancer, size = INPUT_SIZE.medium, kind = INPUT_KIND.primary, overrides: baseOverrides, ...props },
     ref
   ) => {
-    const [css] = useStyletron();
-
     const inputOverrides = getInputOverrides(size, kind);
     const overrides = getMergedOverrides(inputOverrides, baseOverrides);
 
@@ -32,7 +29,7 @@ const Input = forwardRef<InputType, InputProps>(
       endEnhancer || isLoading ? (
         <>
           {endEnhancer}
-          {isLoading && <Spinner animation className={css(spinnerStyles)} size={spinnerSize[size]} />}
+          {isLoading && <Spinner $style={spinnerStyles} size={spinnerSize[size]} />}
         </>
       ) : null;
 
diff --git a/src/components/select/ui/SelectSpinner.tsx b/src/components/select/ui/SelectSpinner.tsx
index 1100ff4d..78837d6b 100644
--- a/src/components/select/ui/SelectSpinner.tsx
+++ b/src/components/select/ui/SelectSpinner.tsx
@@ -12,7 +12,7 @@ const spinnerSize = {
 };
 
 const SelectSpinner: FC<SelectSpinnerProps> = ({ size }) => {
-  return <Spinner animation size={spinnerSize[size]} />;
+  return <Spinner size={spinnerSize[size]} />;
 };
 
 export default memo(SelectSpinner);
diff --git a/src/components/spinner/Spinner.stories.mdx b/src/components/spinner/Spinner.stories.mdx
index d1310573..e0d1e62b 100644
--- a/src/components/spinner/Spinner.stories.mdx
+++ b/src/components/spinner/Spinner.stories.mdx
@@ -31,13 +31,7 @@ export const Template = ({ ...args }) => {
   <Story name="XLarge" args={{ size: SPINNER_SIZE.xLarge }}>
     {Template.bind({})}
   </Story>
-  <Story name="Animated" args={{ size: SPINNER_SIZE.xLarge, animation: true }}>
-    {Template.bind({})}
-  </Story>
-  <Story name="With Label" args={{ label: "Uploading...", animation: true }}>
-    {Template.bind({})}
-  </Story>
-  <Story name="With kind" args={{ label: "Uploading...", animation: true, kind: SPINNER_KIND.dark }}>
+  <Story name="With kind" args={{ kind: SPINNER_KIND.dark }}>
     {Template.bind({})}
   </Story>
 </Canvas>
@@ -58,10 +52,6 @@ To use, import the component `Spinner` from `@nilfoundation/ui-kit`.
         <Spinner />
         // With size
         <Spinner size={SPINNER_SIZE.large} />
-        // With animation
-        <Spinner animation />
-        // With label
-        <Spinner animation label="Uploading..." />
         // With kind
         <Spinner animation label="Uploading..." kind={SPINNER_KIND.dark} />
   `}
diff --git a/src/components/spinner/Spinner.test.tsx b/src/components/spinner/Spinner.test.tsx
index 2dbcecf5..4a30fa46 100644
--- a/src/components/spinner/Spinner.test.tsx
+++ b/src/components/spinner/Spinner.test.tsx
@@ -1,4 +1,3 @@
-import { screen } from "@testing-library/react";
 import Spinner from "./Spinner";
 import { SPINNER_SIZE } from "./types";
 import { render } from "../../test-utils/render";
@@ -6,26 +5,26 @@ import { createComponentSSRTest } from "../../test-utils/createComponentSSRTest"
 
 describe("Spinner", () => {
   it("renders without crashing", () => {
-    render(<Spinner size={SPINNER_SIZE.medium} animation={true} />);
+    render(<Spinner size={SPINNER_SIZE.medium} />);
 
-    const spinnerElement = screen.getByRole("status");
+    const spinnerElement = document.getElementsByTagName("i")[0];
     expect(spinnerElement).toBeInTheDocument();
   });
 
-  it("handles custom size and animation", () => {
-    const { rerender } = render(<Spinner size={SPINNER_SIZE.medium} animation={true} />);
+  it("handles custom size", () => {
+    const { rerender } = render(<Spinner size={SPINNER_SIZE.medium} />);
 
-    let spinnerElement = screen.getByRole("status");
+    let spinnerElement = document.getElementsByTagName("i")[0];
     expect(spinnerElement).toBeInTheDocument();
 
-    rerender(<Spinner size={SPINNER_SIZE.large} animation={false} />);
+    rerender(<Spinner size={SPINNER_SIZE.large} />);
 
-    spinnerElement = screen.getByRole("status");
+    spinnerElement = document.getElementsByTagName("i")[0];
     expect(spinnerElement).toBeInTheDocument();
   });
 
   it("renders ssr without crashing", () => {
-    createComponentSSRTest(<Spinner size={SPINNER_SIZE.medium} animation={true} />);
+    createComponentSSRTest(<Spinner size={SPINNER_SIZE.medium} />);
   });
 
   // Add more tests as needed
diff --git a/src/components/spinner/Spinner.tsx b/src/components/spinner/Spinner.tsx
index 50d9fee3..d3f226ef 100644
--- a/src/components/spinner/Spinner.tsx
+++ b/src/components/spinner/Spinner.tsx
@@ -1,42 +1,50 @@
-import React, { memo } from "react";
-import SpinnerIcon from "./ui/SpinnerIcon";
-import SpinnerBlock from "./ui/SpinnerBlock";
+import { FC } from "react";
 import { SPINNER_KIND, SPINNER_SIZE } from "./types";
-import SpinnerLabel from "./ui/SpinnerLabel";
+import { Spinner as BaseSpinner } from "baseui/spinner";
+import { StyleObject, withStyle } from "styletron-react";
+import { COLORS } from "../../shared";
+import { expandProperty } from "inline-style-expand-shorthand";
 
 export type SpinnerProps = {
   size?: SPINNER_SIZE;
-  label?: React.ReactNode;
-  animation?: boolean;
-  className?: string;
   kind?: SPINNER_KIND;
+  $style?: StyleObject;
 };
 
 const spinnerIconSize = {
-  [SPINNER_SIZE.xSmall]: "12",
-  [SPINNER_SIZE.small]: "16",
-  [SPINNER_SIZE.medium]: "20",
-  [SPINNER_SIZE.large]: "24",
-  [SPINNER_SIZE.xLarge]: "32",
+  [SPINNER_SIZE.xSmall]: "12px",
+  [SPINNER_SIZE.small]: "16px",
+  [SPINNER_SIZE.medium]: "20px",
+  [SPINNER_SIZE.large]: "24px",
+  [SPINNER_SIZE.xLarge]: "32px",
 };
 
-const Spinner: React.FC<SpinnerProps> = ({
-  size = SPINNER_SIZE.medium,
-  kind = SPINNER_KIND.light,
-  animation,
-  label,
-  ...props
-}) => {
-  return (
-    <SpinnerBlock {...props}>
-      <SpinnerIcon animation={animation} kind={kind} size={spinnerIconSize[size]} />
-      {label && (
-        <SpinnerLabel kind={kind} size={size}>
-          {label}
-        </SpinnerLabel>
-      )}
-    </SpinnerBlock>
-  );
+const getSpinnerStylesByKind = (kind: SPINNER_KIND) => {
+  switch (kind) {
+    case SPINNER_KIND.dark:
+      return {
+        ...expandProperty("borderColor", COLORS.gray500),
+        borderTopColor: COLORS.gray800,
+      };
+    case SPINNER_KIND.light:
+      return {
+        ...expandProperty("borderColor", COLORS.gray600),
+        borderTopColor: COLORS.gray100,
+      };
+  }
 };
 
-export default memo(Spinner);
+const Spinner: FC<SpinnerProps> = ({ size = SPINNER_SIZE.medium, kind = SPINNER_KIND.light, $style }) => {
+  const style = {
+    width: spinnerIconSize[size],
+    height: spinnerIconSize[size],
+    ...getSpinnerStylesByKind(kind),
+    ...$style,
+  } satisfies StyleObject;
+
+  const StyledElement = withStyle(BaseSpinner, style);
+
+  return <StyledElement />;
+};
+
+export default Spinner;
diff --git a/src/components/spinner/ui/SpinnerBlock.tsx b/src/components/spinner/ui/SpinnerBlock.tsx
deleted file mode 100644
index b00afb45..00000000
--- a/src/components/spinner/ui/SpinnerBlock.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { FC, ReactNode } from "react";
-import { styled } from "styletron-react";
-import { VisuallyHidden } from "../../../shared/ui/visually-hidden/VisuallyHidden";
-
-type SpinnerBlockProps = {
-  children?: ReactNode;
-  className?: string;
-};
-
-const SpinnerBlock: FC<SpinnerBlockProps> = ({ children, className }) => {
-  const RotatedBlock = styled("div", {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    width: "max-content",
-  });
-
-  return (
-    <RotatedBlock role="status" className={className}>
-      {children}
-      <VisuallyHidden>loading</VisuallyHidden>
-    </RotatedBlock>
-  );
-};
-
-export default SpinnerBlock;
diff --git a/src/components/spinner/ui/SpinnerIcon.tsx b/src/components/spinner/ui/SpinnerIcon.tsx
deleted file mode 100644
index 9e6f0eab..00000000
--- a/src/components/spinner/ui/SpinnerIcon.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import { forwardRef } from "react";
-import { styled, useStyletron } from "baseui";
-import { COLORS } from "../../../shared";
-import { SPINNER_KIND } from "../types";
-
-type SpinnerIconProps = {
-  size?: string;
-  kind: SPINNER_KIND;
-  animation?: boolean;
-};
-
-type TRect = {
-  x: string;
-  y?: string;
-  opacity?: string;
-  transform?: string;
-};
-
-const rectList: TRect[] = [
-  {
-    x: "5.625",
-  },
-  {
-    x: "4.07483",
-    y: "1.91528",
-    opacity: "0.93",
-    transform: "rotate(150 4.07483 1.91528)",
-  },
-  {
-    x: "2.29028",
-    y: "3.42517",
-    opacity: "0.81",
-    transform: "rotate(120 2.29028 3.42517)",
-  },
-  {
-    x: "1.5",
-    y: "5.625",
-    opacity: "0.73",
-    transform: "rotate(90 1.5 5.625)",
-  },
-  {
-    x: "1.91528",
-    y: "7.92517",
-    opacity: "0.65",
-    transform: "rotate(60 1.91528 7.92517)",
-  },
-  {
-    x: "3.42517",
-    y: "9.70953",
-    opacity: "0.56",
-    transform: "rotate(30 3.42517 9.70953)",
-  },
-  {
-    x: "5.625",
-    y: "10.5",
-    opacity: "0.48",
-  },
-  {
-    x: "9.32483",
-    y: "11.0085",
-    opacity: "0.4",
-    transform: "rotate(150 9.32483 11.0085)",
-  },
-  {
-    x: "11.3837",
-    y: "8.67517",
-    opacity: "0.32",
-    transform: "rotate(120 11.3837 8.67517)",
-  },
-  {
-    x: "12",
-    y: "5.625",
-    opacity: "0.24",
-    transform: "rotate(90 12 5.625)",
-  },
-  {
-    x: "11.0087",
-    y: "2.67517",
-    opacity: "0.16",
-    transform: "rotate(60 11.0087 2.67517)",
-  },
-  {
-    x: "8.67517",
-    y: "0.616333",
-    opacity: "0.08",
-    transform: "rotate(30 8.67517 0.616333)",
-  },
-];
-
-const SpinnerColorMap = {
-  [SPINNER_KIND.light]: COLORS.gray50,
-  [SPINNER_KIND.dark]: COLORS.gray900,
-} as const;
-
-const SpinnerIcon = forwardRef<SVGSVGElement, SpinnerIconProps>(({ size = "12", kind, animation }, ref) => {
-  const [css] = useStyletron();
-  const color = SpinnerColorMap[kind];
-
-  const RectItem = styled("rect", {
-    animationDuration: "1.2s",
-    animationTimingFunction: "linear",
-    animationIterationCount: "infinite",
-    animationName: animation
-      ? {
-          from: {
-            opacity: "1",
-          },
-          to: {
-            opacity: "0",
-          },
-        }
-      : "unset",
-  });
-
-  return (
-    <svg ref={ref} width={size} height={size} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g clipPath="url(#clip0_22275_878)">
-        {rectList.map((rectItem, index) => (
-          <RectItem
-            key={index.toString()}
-            {...rectItem}
-            className={css({
-              animationDelay: `${-1.2 + index * 0.1}s`,
-            })}
-            opacity={animation ? "1" : rectItem.opacity}
-            width="0.75"
-            height="1.5"
-            fill={color}
-          />
-        ))}
-      </g>
-      <defs>
-        <clipPath id="clip0_22275_878">
-          <rect width="12" height="12" fill={color} />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-});
-
-SpinnerIcon.displayName = "SpinnerIcon";
-
-export default SpinnerIcon;
diff --git a/src/components/spinner/ui/SpinnerLabel.tsx b/src/components/spinner/ui/SpinnerLabel.tsx
deleted file mode 100644
index aee5acde..00000000
--- a/src/components/spinner/ui/SpinnerLabel.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { FC, ComponentProps } from "react";
-import { SPINNER_KIND, SPINNER_SIZE } from "../types";
-import { LabelXSmall, LabelSmall, LabelMedium, LabelLarge, HeadingXSmall } from "baseui/typography";
-import { StyleObject } from "styletron-react";
-import { useStyletron } from "baseui";
-import { COLORS } from "../../../shared";
-
-type SpinnerLabelProps = {
-  size?: SPINNER_SIZE;
-  children?: React.ReactNode;
-  kind: SPINNER_KIND;
-};
-
-type TypographyProps = ComponentProps<typeof LabelXSmall>;
-
-const labelStyles: StyleObject = {
-  marginTop: "8px",
-};
-
-const SpinnerLabelColorrMap = {
-  [SPINNER_KIND.light]: COLORS.gray50,
-  [SPINNER_KIND.dark]: COLORS.gray900,
-} as const;
-
-const spinnerLabelComponent = {
-  [SPINNER_SIZE.xSmall]: (props: TypographyProps) => <LabelXSmall as="span" {...props} />,
-  [SPINNER_SIZE.small]: (props: TypographyProps) => <LabelSmall as="span" {...props} />,
-  [SPINNER_SIZE.medium]: (props: TypographyProps) => <LabelMedium as="span" {...props} />,
-  [SPINNER_SIZE.large]: (props: TypographyProps) => <LabelLarge as="span" {...props} />,
-  [SPINNER_SIZE.xLarge]: (props: TypographyProps) => <HeadingXSmall as="span" {...props} />,
-};
-
-const SpinnerLabel: FC<SpinnerLabelProps> = ({ size = SPINNER_SIZE.medium, kind, children }) => {
-  const [css] = useStyletron();
-  const TypographyComponent = spinnerLabelComponent[size];
-  const color = SpinnerLabelColorrMap[kind];
-
-  return (
-    <TypographyComponent color={color} className={css(labelStyles)}>
-      {children}
-    </TypographyComponent>
-  );
-};
-
-export default SpinnerLabel;
diff --git a/src/components/textarea/ui/TextareaSpinner.tsx b/src/components/textarea/ui/TextareaSpinner.tsx
index 4dd1a2a5..60f6f06d 100644
--- a/src/components/textarea/ui/TextareaSpinner.tsx
+++ b/src/components/textarea/ui/TextareaSpinner.tsx
@@ -23,7 +23,7 @@ const TextareaSpinner: FC<TextareaSpinnerProps> = ({ size = TEXTAREA_SIZE.medium
         right: "16px",
       })}
     >
-      <Spinner animation size={spinnerSize[size]} />
+      <Spinner size={spinnerSize[size]} />
     </div>
   );
 };