diff --git a/README.md b/README.md
index aa9550be..9d8481c1 100644
--- a/README.md
+++ b/README.md
@@ -200,8 +200,8 @@ All Tetrisly components have a `custom` prop. It makes it possible to customize
 If you want to change any of button styles, you can make it by passing custom props with object based on
 specific component config.
 
-For instance, to change background-color of appereance="primary" intent="secondary" variant to pink, just pass
-refferenced object structure:
+For instance, to change background-color of appearance="primary" intent="secondary" variant to pink, just pass
+referenced object structure:
 
 ```jsx
 <Button
@@ -209,7 +209,7 @@ refferenced object structure:
   appearance="primary"
   intent="success"
   custom={{
-    variants: {
+    default: {
       appearance: {
         primary: {
           intent: {
diff --git a/src/components/Badge/stylesBuilder/stylesBuilder.ts b/src/components/Badge/stylesBuilder/stylesBuilder.ts
index 5733d58d..79d0f234 100644
--- a/src/components/Badge/stylesBuilder/stylesBuilder.ts
+++ b/src/components/Badge/stylesBuilder/stylesBuilder.ts
@@ -3,7 +3,7 @@ import { BadgeAppearance } from '../BadgeAppearance.type';
 import { BadgeEmphasis } from '../BadgeEmphasis.type';
 import { BadgeIntent } from '../BadgeIntent.type';
 
-import { mergeConfigWithCustom } from '@/services/mergeConfigWithCustom/mergeConfigWithCutom';
+import { mergeConfigWithCustom } from '@/services/mergeConfigWithCustom/mergeConfigWithCustom';
 import { BaseProps } from '@/types/BaseProps';
 
 type BadgeStylesBuilder = {
diff --git a/src/components/Button/stylesBuilder/stylesBuilder.ts b/src/components/Button/stylesBuilder/stylesBuilder.ts
index 934aa644..bc4aa2f9 100644
--- a/src/components/Button/stylesBuilder/stylesBuilder.ts
+++ b/src/components/Button/stylesBuilder/stylesBuilder.ts
@@ -5,7 +5,7 @@ import { defaultConfig } from '../Button.styles';
 import { fallbackKey, mergeConfigWithCustom } from '@/services';
 import { BaseProps } from '@/types/BaseProps';
 
-type ButtonStylesBulderInput = {
+type ButtonStylesBuilderInput = {
   appearance: NonNullable<ButtonProps['appearance']>;
   variant: NonNullable<ButtonProps['variant']>;
   intent: NonNullable<ButtonProps['intent']>;
@@ -23,7 +23,7 @@ type ButtonStylesBuilder = {
 
 const getLoaderProps = (
   loader: object,
-  props: Pick<ButtonStylesBulderInput, 'appearance' | 'intent'>,
+  props: Pick<ButtonStylesBuilderInput, 'appearance' | 'intent'>,
 ) => {
   let loaderProps: Pick<LoaderProps, 'appearance'> = {};
 
@@ -47,7 +47,7 @@ const getLoaderProps = (
 };
 
 export const stylesBuilder = (
-  props: ButtonStylesBulderInput,
+  props: ButtonStylesBuilderInput,
 ): ButtonStylesBuilder => {
   const variants = mergeConfigWithCustom({
     defaultConfig,
diff --git a/src/components/Card/CardFooter/CardFooter.props.ts b/src/components/Card/CardFooter/CardFooter.props.ts
index d1eb71d1..f3474cb7 100644
--- a/src/components/Card/CardFooter/CardFooter.props.ts
+++ b/src/components/Card/CardFooter/CardFooter.props.ts
@@ -4,6 +4,6 @@ import type { GhostButtonProps } from '@/components/Button/Button.props';
 
 export type CardFooterProps = {
   styles: CardFooterConfig;
-  // TODO: in the future omit the size from the buttonprops
+  // TODO: in the future omit the size from the button props
   actions: GhostButtonProps[];
 };
diff --git a/src/components/Card/CardHeader/CardHeader.props.ts b/src/components/Card/CardHeader/CardHeader.props.ts
index 3ad22264..9b6b2827 100644
--- a/src/components/Card/CardHeader/CardHeader.props.ts
+++ b/src/components/Card/CardHeader/CardHeader.props.ts
@@ -10,7 +10,7 @@ export type CardHeaderProps = {
   description?: string;
   beforeComponent?: BeforeComponentProps;
   styles: CardHeaderConfig;
-  // TODO: in the future omit the size from the buttonprops
+  // TODO: in the future omit the size from the button props
   actions?: BareButtonProps[];
 };
 type BeforeComponentProps =
diff --git a/src/components/CornerDialog/CornerDialog.props.ts b/src/components/CornerDialog/CornerDialog.props.ts
new file mode 100644
index 00000000..ff73464a
--- /dev/null
+++ b/src/components/CornerDialog/CornerDialog.props.ts
@@ -0,0 +1,18 @@
+import type { ReactNode, MouseEvent } from 'react';
+
+import { CornerDialogConfig } from './CornerDialog.styles';
+import { DefaultButtonProps } from '../Button/Button.props';
+
+import { DistributiveOmit } from '@/utility-types/DistributiveOmit';
+
+export type CornerDialogProps = {
+  custom?: CornerDialogConfig;
+  intent?: 'none' | 'warning' | 'negative';
+  title: string;
+  content: ReactNode;
+  actions?: DistributiveOmit<
+    DefaultButtonProps,
+    'size' | 'hasDropdownIndicator'
+  >[];
+  onCloseClick?: (e?: MouseEvent) => void;
+};
diff --git a/src/components/CornerDialog/CornerDialog.stories.tsx b/src/components/CornerDialog/CornerDialog.stories.tsx
new file mode 100644
index 00000000..b0a9f2ed
--- /dev/null
+++ b/src/components/CornerDialog/CornerDialog.stories.tsx
@@ -0,0 +1,170 @@
+import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CornerDialog } from './CornerDialog';
+
+import { CornerDialogDocs } from '@/docs-components/CornerDialogDocs';
+import { TetDocs } from '@/docs-components/TetDocs';
+import { tet } from '@/tetrisly';
+
+const meta = {
+  title: 'CornerDialog',
+  component: CornerDialog,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {
+    intent: 'none',
+    title: 'Corner Dialog',
+    content: 'Description',
+    actions: undefined,
+    onCloseClick: action('onCloseClick'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A small, non-intrusive window that appears in the corner of the screen to convey contextual information or prompt user interaction. Often used for hints, tips, or non-essential notifications.',
+      },
+      page: () => (
+        <TetDocs docs="https://docs.tetrisly.com/components/in-progress/cornerdialog">
+          <CornerDialogDocs />
+        </TetDocs>
+      ),
+    },
+  },
+} satisfies Meta<typeof CornerDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    intent: 'none',
+    title: 'Corner Dialog',
+    content: 'Description',
+    actions: [
+      { label: 'Action', onClick: action('onClick') },
+      {
+        label: 'Primary Action',
+        onClick: action('onClick'),
+        appearance: 'primary',
+      },
+    ],
+    onCloseClick: action('onCloseClick'),
+  },
+};
+
+export const Decision: Story = {
+  args: {
+    intent: 'none',
+    title: 'Title',
+    content: 'Description',
+    actions: [
+      { label: 'Cancel', onClick: action('onCancelClick') },
+      {
+        label: 'Accept',
+        onClick: action('onAcceptClick'),
+        appearance: 'primary',
+      },
+    ],
+    onCloseClick: action('onCloseClick'),
+  },
+};
+
+export const Confirmation: Story = {
+  args: {
+    intent: 'none',
+    title: 'Title',
+    content: 'Description',
+    actions: [
+      {
+        label: 'Accept',
+        onClick: action('onAcceptClick'),
+        appearance: 'primary',
+      },
+    ],
+    onCloseClick: undefined,
+  },
+};
+
+export const NegativeWithDestructiveButton: Story = {
+  args: {
+    intent: 'negative',
+    title: 'Title',
+    content: 'Description',
+    actions: [
+      { label: 'Cancel', onClick: action('onCancelClick') },
+      {
+        label: 'Remove',
+        onClick: action('onRemoveClick'),
+        appearance: `primary`,
+        intent: 'destructive',
+      },
+    ],
+    onCloseClick: action('onCloseClick'),
+  },
+};
+
+export const WarningAndAdditionalAction: Story = {
+  args: {
+    intent: 'warning',
+    title: 'Title',
+    content: 'Description',
+    actions: [
+      {
+        label: 'Find out more',
+        onClick: action('onFindOutMoreClick'),
+        custom: {
+          default: {
+            position: 'absolute',
+            left: 0,
+          },
+        },
+      },
+      { label: 'Cancel', onClick: action('onCancelClick') },
+      {
+        label: 'Accept',
+        onClick: action('onAcceptClick'),
+        appearance: 'primary',
+      },
+    ],
+    onCloseClick: action('onCloseClick'),
+    custom: {
+      innerElements: {
+        footer: {
+          position: 'relative',
+        },
+      },
+    },
+  },
+};
+
+export const CustomContent: Story = {
+  args: {
+    intent: 'none',
+    title: 'Corner Dialog with custom content',
+    content: (
+      <tet.div>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
+        <tet.span color="$color-blue-0" fontWeight="$font-weight-600">
+          Morbi pellentesque elit ut sem accumsan, eget maximus erat eleifend.
+        </tet.span>
+        Vestibulum ac tortor nunc.{' '}
+        <tet.span textDecoration="underline">
+          Nam tincidunt nibh eget nulla aliquet, et auctor dui rhoncus. Donec
+          bibendum rhoncus lacus vel scelerisque.
+        </tet.span>
+        Suspendisse feugiat ligula quis eros interdum varius. Ut nec ex est.
+      </tet.div>
+    ),
+    actions: [
+      { label: 'Action', onClick: action('onClick') },
+      {
+        label: 'Primary Action',
+        onClick: action('onClick'),
+        appearance: 'primary',
+      },
+    ],
+    onCloseClick: action('onCloseClick'),
+  },
+};
diff --git a/src/components/CornerDialog/CornerDialog.styles.ts b/src/components/CornerDialog/CornerDialog.styles.ts
new file mode 100644
index 00000000..c43b69b7
--- /dev/null
+++ b/src/components/CornerDialog/CornerDialog.styles.ts
@@ -0,0 +1,84 @@
+import type { BaseProps } from '@/types/BaseProps';
+
+export type CornerDialogFooterConfig = {
+  actions?: BaseProps;
+} & BaseProps;
+
+export type CornerDialogConfig = BaseProps & {
+  innerElements?: {
+    intentIndicator?: BaseProps;
+    intentWarning?: BaseProps;
+    intentNegative?: BaseProps;
+    body?: BaseProps;
+    header?: BaseProps;
+    headerTitle?: BaseProps;
+    closeButton?: BaseProps;
+    content?: BaseProps;
+    footer?: CornerDialogFooterConfig;
+  };
+};
+
+export const defaultConfig = {
+  display: 'flex',
+  w: 'fit-content',
+  minWidth: '420px',
+  p: '$space-component-padding-2xLarge',
+  flexDirection: 'row',
+  alignItems: 'flex-start',
+  gap: '$space-component-padding-large',
+  borderRadius: '$border-radius-xLarge',
+  bg: '$color-interaction-background-modeless',
+  boxShadow: '$elevation-bottom-300',
+  borderWidth: '$border-width-small',
+  borderStyle: '$border-style-solid',
+  borderColor: '$color-border-defaultA',
+  overflow: 'hidden',
+  innerElements: {
+    intentIndicator: {
+      h: '$size-xSmall',
+      display: 'flex',
+      alignItems: 'flex-end',
+    },
+    intentWarning: {
+      color: '$color-content-warning-secondary',
+    },
+    intentNegative: {
+      color: '$color-content-negative-secondary',
+    },
+    body: {
+      display: 'flex',
+      flexGrow: 1,
+      flexDirection: 'column',
+      justifyContent: 'space-between',
+      gap: '$space-component-padding-large',
+    },
+    header: {
+      display: 'flex',
+      alignSelf: 'stretch',
+      alignItems: 'center',
+    },
+    headerTitle: {
+      display: 'flex',
+      flexGrow: 1,
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      color: '$color-content-primary',
+      text: '$typo-body-strong-large',
+    },
+    closeButton: {},
+    content: {
+      text: '$typo-body-medium',
+      color: '$color-content-secondary',
+    },
+    footer: {
+      display: 'flex',
+      alignSelf: 'stretch',
+      justifyContent: 'flex-end',
+      gap: '$space-component-padding-small',
+    },
+  },
+} as const satisfies CornerDialogConfig;
+
+export const cornerDialogStyles = {
+  defaultConfig,
+};
diff --git a/src/components/CornerDialog/CornerDialog.test.tsx b/src/components/CornerDialog/CornerDialog.test.tsx
new file mode 100644
index 00000000..c697d6a6
--- /dev/null
+++ b/src/components/CornerDialog/CornerDialog.test.tsx
@@ -0,0 +1,96 @@
+import { vi } from 'vitest';
+
+import { CornerDialog } from './CornerDialog';
+import { render, screen, fireEvent } from '../../tests/render';
+
+describe('CornerDialog', () => {
+  it('should render empty corner dialog', () => {
+    render(<CornerDialog intent="none" title="Title" content="Content" />);
+    const cornerDialog = screen.getByTestId('corner-dialog');
+    expect(cornerDialog).toBeInTheDocument();
+
+    const header = screen.getByTestId('corner-dialog-header');
+    expect(header).toBeInTheDocument();
+
+    const headerTitle = screen.getByTestId('corner-dialog-header-title');
+    expect(headerTitle).toBeInTheDocument();
+    expect(headerTitle).toHaveTextContent('Title');
+
+    const content = screen.getByTestId('corner-dialog-content');
+    expect(content).toBeInTheDocument();
+    expect(content).toHaveTextContent('Content');
+  });
+
+  it('should render warning corner dialog', () => {
+    render(<CornerDialog intent="warning" title="Title" content="Content" />);
+    const warningIcon = screen.getByTestId('warning-icon');
+    expect(warningIcon).toBeInTheDocument();
+  });
+
+  it('should render negative corner dialog', () => {
+    render(<CornerDialog intent="negative" title="Title" content="Content" />);
+    const negativeIcon = screen.getByTestId('negative-icon');
+    expect(negativeIcon).toBeInTheDocument();
+  });
+
+  it('should render close icon when onCloseClick handler is provided', () => {
+    render(
+      <CornerDialog
+        intent="none"
+        title="Title"
+        content="Content"
+        onCloseClick={() => {}}
+      />,
+    );
+    const closeIcon = screen.getByTestId('close-icon');
+    expect(closeIcon).toBeInTheDocument();
+  });
+
+  it('should render footer if at least one action is provided', () => {
+    render(
+      <CornerDialog
+        intent="none"
+        title="Title"
+        content="Content"
+        actions={[{ label: 'Action' }]}
+      />,
+    );
+    const footer = screen.getByTestId('corner-dialog-footer');
+    expect(footer).toBeInTheDocument();
+  });
+
+  it('should render footer with 2 actions', async () => {
+    render(
+      <CornerDialog
+        intent="none"
+        title="Title"
+        content="Content"
+        actions={[{ label: 'First action' }, { label: 'Second action' }]}
+      />,
+    );
+
+    const firstActionButton = await screen.findByText('First action');
+    expect(firstActionButton).toBeInTheDocument();
+
+    const secondActionButton = await screen.findByText('Second action');
+    expect(secondActionButton).toBeInTheDocument();
+  });
+
+  it('should call onCloseClick after click to close icon', () => {
+    const onCloseClickMock = vi.fn();
+
+    render(
+      <CornerDialog
+        intent="none"
+        title="Title"
+        content="Content"
+        onCloseClick={onCloseClickMock}
+      />,
+    );
+
+    const closeIcon = screen.getByTestId('close-icon');
+    expect(closeIcon).toBeInTheDocument();
+    fireEvent.click(closeIcon);
+    expect(onCloseClickMock).toHaveBeenCalled();
+  });
+});
diff --git a/src/components/CornerDialog/CornerDialog.tsx b/src/components/CornerDialog/CornerDialog.tsx
new file mode 100644
index 00000000..770f0e24
--- /dev/null
+++ b/src/components/CornerDialog/CornerDialog.tsx
@@ -0,0 +1,69 @@
+import { Icon } from '@virtuslab/tetrisly-icons';
+import { FC } from 'react';
+
+import { CornerDialogProps } from './CornerDialog.props';
+import { stylesBuilder } from './stylesBuilder';
+
+import { Button } from '@/components/Button';
+import { IconButton } from '@/components/IconButton';
+import { tet } from '@/tetrisly';
+
+export const CornerDialog: FC<CornerDialogProps> = ({
+  custom,
+  intent = 'none',
+  title,
+  content,
+  actions,
+  onCloseClick,
+}) => {
+  const styles = stylesBuilder(custom);
+
+  return (
+    <tet.div data-testid="corner-dialog" {...styles.container}>
+      {intent === 'warning' && (
+        <tet.div {...styles.intentIndicator} {...styles.intentWarning}>
+          <Icon name="20-warning-fill" data-testid="warning-icon" />
+        </tet.div>
+      )}
+
+      {intent === 'negative' && (
+        <tet.div {...styles.intentIndicator} {...styles.intentNegative}>
+          <Icon name="20-alert-fill" data-testid="negative-icon" />
+        </tet.div>
+      )}
+
+      <tet.div {...styles.body}>
+        <tet.div data-testid="corner-dialog-header" {...styles.header}>
+          <tet.div
+            data-testid="corner-dialog-header-title"
+            {...styles.headerTitle}
+          >
+            <tet.div>{title}</tet.div>
+            {!!onCloseClick && (
+              <IconButton
+                variant="bare"
+                icon="20-close"
+                size="medium"
+                onClick={onCloseClick}
+                data-testid="close-icon"
+                {...styles.closeButton}
+              />
+            )}
+          </tet.div>
+        </tet.div>
+
+        <tet.div data-testid="corner-dialog-content" {...styles.content}>
+          {content}
+        </tet.div>
+
+        {actions && (
+          <tet.div data-testid="corner-dialog-footer" {...styles.footer}>
+            {actions.map((action) => (
+              <Button key={action.label} size="small" {...action} />
+            ))}
+          </tet.div>
+        )}
+      </tet.div>
+    </tet.div>
+  );
+};
diff --git a/src/components/CornerDialog/index.ts b/src/components/CornerDialog/index.ts
new file mode 100644
index 00000000..593db68c
--- /dev/null
+++ b/src/components/CornerDialog/index.ts
@@ -0,0 +1,3 @@
+export * from './CornerDialog';
+export * from './CornerDialog.props';
+export { cornerDialogStyles } from './CornerDialog.styles';
diff --git a/src/components/CornerDialog/stylesBuilder.ts b/src/components/CornerDialog/stylesBuilder.ts
new file mode 100644
index 00000000..0d18017d
--- /dev/null
+++ b/src/components/CornerDialog/stylesBuilder.ts
@@ -0,0 +1,39 @@
+import { CornerDialogConfig, defaultConfig } from './CornerDialog.styles';
+
+import { mergeConfigWithCustom } from '@/services/mergeConfigWithCustom';
+import { BaseProps } from '@/types/BaseProps';
+
+type CornerDialogStylesBuilder = {
+  container: BaseProps;
+  intentIndicator: BaseProps;
+  intentWarning: BaseProps;
+  intentNegative: BaseProps;
+  body: BaseProps;
+  header: BaseProps;
+  headerTitle: BaseProps;
+  closeButton: BaseProps<'appearance'>;
+  content: BaseProps;
+  footer: BaseProps;
+};
+
+export const stylesBuilder = (
+  custom?: CornerDialogConfig,
+): CornerDialogStylesBuilder => {
+  const { innerElements, ...container } = mergeConfigWithCustom({
+    defaultConfig,
+    custom,
+  });
+
+  return {
+    container,
+    intentIndicator: innerElements.intentIndicator,
+    intentWarning: innerElements.intentWarning,
+    intentNegative: innerElements.intentNegative,
+    body: innerElements.body,
+    header: innerElements.header,
+    headerTitle: innerElements.headerTitle,
+    closeButton: innerElements.closeButton,
+    content: innerElements.content,
+    footer: innerElements.footer,
+  };
+};
diff --git a/src/components/NewItemButton/NewItemButton.stories.tsx b/src/components/NewItemButton/NewItemButton.stories.tsx
new file mode 100644
index 00000000..143e6615
--- /dev/null
+++ b/src/components/NewItemButton/NewItemButton.stories.tsx
@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { NewItemButton } from './NewItemButton';
+
+import { NewItemButtonDocs } from '@/docs-components/NewItemButtonDocs';
+import { TetDocs } from '@/docs-components/TetDocs';
+
+const meta = {
+  title: 'NewItemButton',
+  component: NewItemButton,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {
+    state: 'normal',
+    text: 'text',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A dedicated button for creating new items, such as files, events, or tasks, typically placed in a prominent location and distinguished by an icon or label.',
+      },
+      page: () => (
+        <TetDocs docs="https://docs.tetrisly.com/components/in-progress/newitembutton">
+          <NewItemButtonDocs />
+        </TetDocs>
+      ),
+    },
+  },
+} satisfies Meta<typeof NewItemButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    state: 'normal',
+    text: 'New category',
+  },
+};
+
+export const Alert: Story = {
+  args: {
+    state: 'alert',
+    text: 'Alert!',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    state: 'disabled',
+    text: 'Disabled',
+  },
+};
diff --git a/src/components/NewItemButton/NewItemButton.styles.ts b/src/components/NewItemButton/NewItemButton.styles.ts
new file mode 100644
index 00000000..8bddf157
--- /dev/null
+++ b/src/components/NewItemButton/NewItemButton.styles.ts
@@ -0,0 +1,69 @@
+import { NewItemButtonState } from './NewItemButtonState.type';
+
+import type { BaseProps } from '@/types/BaseProps';
+
+export type NewItemButtonConfig = {
+  state?: Partial<Record<NewItemButtonState, BaseProps>>;
+  innerElements?: {
+    text?: BaseProps;
+  };
+} & BaseProps;
+
+export const defaultConfig = {
+  display: 'inline-flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: '$space-component-gap-small',
+  minH: '120px',
+  minWidth: '120px',
+  h: '100%',
+  w: '100%',
+  borderWidth: '$border-width-small',
+  borderStyle: '$border-style-dashed',
+  borderRadius: '$border-radius-large',
+  padding: '$space-component-padding-xLarge',
+  text: '$typo-body-medium',
+  textAlign: 'center',
+  whiteSpace: 'nowrap',
+  color: '$color-action-neutral-normal',
+  backgroundColor: '$color-interaction-background-formField',
+  transition: true,
+  transitionDuration: 200,
+  outline: {
+    focus: 'solid',
+  },
+  outlineColor: {
+    focus: '$color-interaction-focus-default',
+  },
+  outlineWidth: {
+    focus: '$border-width-focus',
+  },
+  outlineOffset: 1,
+  state: {
+    normal: {
+      borderColor: {
+        _: '$color-border-neutral-subtle',
+        hover: '$color-interaction-border-hover',
+      },
+    },
+    alert: {
+      borderColor: '$color-interaction-border-alert',
+    },
+    disabled: {
+      borderColor: '$color-border-neutral-subtle',
+      opacity: '$opacity-disabled',
+      pointerEvents: 'none',
+    },
+  },
+  innerElements: {
+    text: {
+      text: '$typo-body-medium',
+      color: '$color-content-primary',
+    },
+  },
+} as const satisfies NewItemButtonConfig;
+
+export const newItemButtonStyles = {
+  defaultConfig,
+};
diff --git a/src/components/NewItemButton/NewItemButton.test.tsx b/src/components/NewItemButton/NewItemButton.test.tsx
new file mode 100644
index 00000000..5d98a0cd
--- /dev/null
+++ b/src/components/NewItemButton/NewItemButton.test.tsx
@@ -0,0 +1,53 @@
+import { vi } from 'vitest';
+
+import { NewItemButton } from './NewItemButton';
+import { NewItemButtonState } from './NewItemButtonState.type';
+import { render, screen, fireEvent } from '../../tests/render';
+
+describe('NewItemButton', () => {
+  const states: NewItemButtonState[] = ['normal', 'alert', 'disabled'];
+
+  it('should render the NewItemButton ', () => {
+    render(<NewItemButton />);
+    const button = screen.getByTestId('new-item-button');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('should be disabled if disabled state is passed', () => {
+    render(<NewItemButton state="disabled" />);
+    const button = screen.getByTestId('new-item-button');
+    expect(button).toBeDisabled();
+    expect(button).toHaveStyle('pointer-events: none');
+    expect(button).toHaveStyle('opacity: 0.5');
+  });
+
+  states.forEach((state) => {
+    describe(`State: ${state}`, () => {
+      it('should render the NewItemButton', () => {
+        render(<NewItemButton state={state} />);
+        const button = screen.getByTestId('new-item-button');
+        expect(button).toBeInTheDocument();
+      });
+
+      it('should render correct text', () => {
+        render(<NewItemButton state={state} text="Hello there!" />);
+        const button = screen.getByTestId('new-item-button');
+        expect(button).toHaveTextContent('Hello there!');
+      });
+
+      it('should handle onClick properly when clicked', () => {
+        const onClickMock = vi.fn();
+        render(<NewItemButton state={state} onClick={onClickMock} />);
+
+        const button = screen.getByTestId('new-item-button');
+        expect(button).toBeInTheDocument();
+        fireEvent.click(button);
+        if (state !== 'disabled') {
+          expect(onClickMock).toHaveBeenCalled();
+        } else {
+          expect(onClickMock).not.toHaveBeenCalled();
+        }
+      });
+    });
+  });
+});
diff --git a/src/components/NewItemButton/NewItemButton.tsx b/src/components/NewItemButton/NewItemButton.tsx
new file mode 100644
index 00000000..621ff56f
--- /dev/null
+++ b/src/components/NewItemButton/NewItemButton.tsx
@@ -0,0 +1,28 @@
+import { Icon } from '@virtuslab/tetrisly-icons';
+import { useMemo, type FC } from 'react';
+
+import { NewItemButtonProps } from './NewItemButtons.props';
+import { stylesBuilder } from './stylesBuilder';
+
+import { tet } from '@/tetrisly';
+
+export const NewItemButton: FC<NewItemButtonProps> = ({
+  state = 'normal',
+  text,
+  custom,
+  ...rest
+}) => {
+  const styles = useMemo(() => stylesBuilder(state, custom), [custom, state]);
+
+  return (
+    <tet.button
+      {...styles.container}
+      {...rest}
+      data-testid="new-item-button"
+      disabled={state === 'disabled'}
+    >
+      <Icon name="20-plus" />
+      {!!text && <tet.span {...styles.text}>{text}</tet.span>}
+    </tet.button>
+  );
+};
diff --git a/src/components/NewItemButton/NewItemButtonState.type.ts b/src/components/NewItemButton/NewItemButtonState.type.ts
new file mode 100644
index 00000000..34ed6c2e
--- /dev/null
+++ b/src/components/NewItemButton/NewItemButtonState.type.ts
@@ -0,0 +1 @@
+export type NewItemButtonState = 'normal' | 'alert' | 'disabled';
diff --git a/src/components/NewItemButton/NewItemButtons.props.ts b/src/components/NewItemButton/NewItemButtons.props.ts
new file mode 100644
index 00000000..4331f8c7
--- /dev/null
+++ b/src/components/NewItemButton/NewItemButtons.props.ts
@@ -0,0 +1,10 @@
+import { ButtonHTMLAttributes } from 'react';
+
+import { NewItemButtonConfig } from './NewItemButton.styles';
+import { NewItemButtonState } from './NewItemButtonState.type';
+
+export type NewItemButtonProps = {
+  state?: NewItemButtonState | undefined;
+  text?: string;
+  custom?: NewItemButtonConfig;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'color'>;
diff --git a/src/components/NewItemButton/index.ts b/src/components/NewItemButton/index.ts
new file mode 100644
index 00000000..68344e98
--- /dev/null
+++ b/src/components/NewItemButton/index.ts
@@ -0,0 +1,3 @@
+export { NewItemButton } from './NewItemButton';
+export type { NewItemButtonProps } from './NewItemButtons.props';
+export { newItemButtonStyles } from './NewItemButton.styles';
diff --git a/src/components/NewItemButton/stylesBuilder.ts b/src/components/NewItemButton/stylesBuilder.ts
new file mode 100644
index 00000000..c3ee56fd
--- /dev/null
+++ b/src/components/NewItemButton/stylesBuilder.ts
@@ -0,0 +1,35 @@
+import { NewItemButtonConfig, defaultConfig } from './NewItemButton.styles';
+import { NewItemButtonState } from './NewItemButtonState.type';
+
+import { mergeConfigWithCustom } from '@/services';
+import { BaseProps } from '@/types/BaseProps';
+
+type NewItemButtonStyleBuilder = {
+  container: BaseProps;
+  text: BaseProps;
+};
+
+export const stylesBuilder = (
+  state: NewItemButtonState,
+  custom?: NewItemButtonConfig,
+): NewItemButtonStyleBuilder => {
+  const {
+    innerElements,
+    state: containerState,
+    ...container
+  } = mergeConfigWithCustom({
+    defaultConfig,
+    custom,
+  });
+
+  const { text } = innerElements;
+  const containerStyles = containerState[state];
+
+  return {
+    container: {
+      ...container,
+      ...containerStyles,
+    },
+    text,
+  };
+};
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 4a9a73b5..7542aa47 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -8,7 +8,7 @@ import { IconButton } from '../IconButton';
 import type { TextInputProps } from '../TextInput';
 import { useTextInput } from '../TextInput/useTextInput';
 
-import { mergeConfigWithCustom } from '@/services/mergeConfigWithCustom/mergeConfigWithCutom';
+import { mergeConfigWithCustom } from '@/services/mergeConfigWithCustom/mergeConfigWithCustom';
 import { tet } from '@/tetrisly';
 import type { MarginProps } from '@/types';
 
diff --git a/src/components/Status/Status.props.ts b/src/components/Status/Status.props.ts
new file mode 100644
index 00000000..885e0a86
--- /dev/null
+++ b/src/components/Status/Status.props.ts
@@ -0,0 +1,10 @@
+import { StatusConfig } from './Status.styles';
+import type { StatusAppearance } from './StatusAppearance.type';
+import type { StatusEmphasis } from './StatusEmphasis.type';
+
+export type StatusProps = {
+  appearance?: StatusAppearance;
+  custom?: StatusConfig;
+  emphasis?: StatusEmphasis;
+  label: string;
+};
diff --git a/src/components/Status/Status.stories.tsx b/src/components/Status/Status.stories.tsx
new file mode 100644
index 00000000..8b3dfc50
--- /dev/null
+++ b/src/components/Status/Status.stories.tsx
@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Status } from './Status';
+import { StatusEmphasis } from './StatusEmphasis.type';
+
+import { StatusDocs } from '@/docs-components/StatusDocs';
+import { TetDocs } from '@/docs-components/TetDocs';
+
+const meta = {
+  title: 'Status',
+  component: Status,
+  tags: ['autodocs'],
+  argTypes: {
+    emphasis: {
+      control: {
+        type: 'select',
+        options: ['high', 'medium', 'low'] satisfies StatusEmphasis[],
+      },
+    },
+  },
+  args: {
+    appearance: 'grey',
+    emphasis: 'high',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'An indicator that conveys the current state or condition of a process, item, or user. Status indicators often use colors, icons, or text to communicate information, such as online presence, approval, or completion.',
+      },
+      page: () => (
+        <TetDocs docs="https://docs.tetrisly.com/components/in-progress/status">
+          <StatusDocs />
+        </TetDocs>
+      ),
+    },
+  },
+} satisfies Meta<typeof Status>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    appearance: 'grey',
+    emphasis: 'high',
+    label: 'status',
+  },
+};
diff --git a/src/components/Status/Status.styles.ts b/src/components/Status/Status.styles.ts
new file mode 100644
index 00000000..1f6927ad
--- /dev/null
+++ b/src/components/Status/Status.styles.ts
@@ -0,0 +1,214 @@
+import type { StatusAppearance } from './StatusAppearance.type';
+
+import { BaseProps } from '@/types';
+
+export type StatusConfig = {
+  appearance?: Partial<
+    Record<
+      StatusAppearance,
+      { emphasis?: Partial<Record<'high' | 'medium' | 'low', BaseProps>> }
+    >
+  >;
+  dot: {
+    appearance: Partial<
+      Record<
+        StatusAppearance,
+        { emphasis?: Partial<Record<'high' | 'medium' | 'low', BaseProps>> }
+      >
+    >;
+  } & BaseProps<'appearance'>;
+  hasLabel?: BaseProps;
+  innerElements: {
+    label?: BaseProps;
+  };
+} & BaseProps<'appearance'>;
+
+export const defaultConfig = {
+  display: 'flex',
+  w: 'fit-content',
+  h: '$size-xSmall',
+  gap: '$space-component-gap-small',
+  alignItems: 'center',
+  text: '$typo-body-medium',
+  dot: {
+    w: '8px',
+    h: '8px',
+    borderRadius: '$border-radius-full',
+    appearance: {
+      grey: {
+        emphasis: {
+          high: {
+            backgroundColor: '$color-nonSemantic-white-content-primary',
+          },
+          medium: {
+            backgroundColor: '$color-nonSemantic-grey-background-strong',
+          },
+          low: {
+            backgroundColor: '$color-nonSemantic-grey-background-strong',
+          },
+        },
+      },
+      blue: {
+        emphasis: {
+          high: {
+            backgroundColor: '$color-nonSemantic-white-content-primary',
+          },
+          medium: {
+            backgroundColor: '$color-nonSemantic-blue-background-strong',
+          },
+          low: {
+            backgroundColor: '$color-nonSemantic-blue-background-strong',
+          },
+        },
+      },
+      green: {
+        emphasis: {
+          high: {
+            backgroundColor: '$color-nonSemantic-white-content-primary',
+          },
+          medium: {
+            backgroundColor: '$color-nonSemantic-green-background-strong',
+          },
+          low: {
+            backgroundColor: '$color-nonSemantic-green-background-strong',
+          },
+        },
+      },
+      red: {
+        emphasis: {
+          high: {
+            backgroundColor: '$color-nonSemantic-white-content-primary',
+          },
+          medium: {
+            backgroundColor: '$color-nonSemantic-red-background-strong',
+          },
+          low: {
+            backgroundColor: '$color-nonSemantic-red-background-strong',
+          },
+        },
+      },
+      orange: {
+        emphasis: {
+          high: {
+            backgroundColor: '$color-nonSemantic-grey-content-primary',
+          },
+          medium: {
+            backgroundColor: '$color-nonSemantic-orange-background-strong',
+          },
+          low: {
+            backgroundColor: '$color-nonSemantic-orange-background-strong',
+          },
+        },
+      },
+    },
+  },
+  appearance: {
+    grey: {
+      emphasis: {
+        high: {
+          backgroundColor: '$color-nonSemantic-grey-background-strong',
+          color: '$color-nonSemantic-white-content-primary',
+          p: '$space-component-padding-null $space-component-padding-small',
+          borderRadius: '$border-radius-medium',
+        },
+        medium: {
+          backgroundColor: '$color-nonSemantic-grey-background-muted',
+          color: '$color-nonSemantic-grey-content-primary',
+          p: '$space-component-padding-null $space-component-padding-small',
+          borderRadius: '$border-radius-medium',
+        },
+        low: {
+          backgroundColor: '$color-transparent',
+          color: '$color-nonSemantic-grey-content-primary',
+          borderRadius: '$border-radius-medium',
+        },
+      },
+    },
+    blue: {
+      emphasis: {
+        high: {
+          backgroundColor: '$color-nonSemantic-blue-background-strong',
+          color: '$color-nonSemantic-white-content-primary',
+          p: '$space-component-padding-null $space-component-padding-small',
+          borderRadius: '$border-radius-medium',
+        },
+        medium: {
+          backgroundColor: '$color-nonSemantic-blue-background-muted',
+          color: '$color-nonSemantic-blue-content-primary',
+          p: '$space-component-padding-null $space-component-padding-small',
+          borderRadius: '$border-radius-medium',
+        },
+        low: {
+          backgroundColor: '$color-transparent',
+          color: '$color-nonSemantic-blue-content-primary',
+        },
+      },
+    },
+    green: {
+      emphasis: {
+        high: {
+          color: '$color-nonSemantic-white-content-primary',
+          backgroundColor: '$color-nonSemantic-green-background-strong',
+          p: '$space-component-padding-null $space-component-padding-small',
+          borderRadius: '$border-radius-medium',
+        },
+        medium: {
+          color: '$color-nonSemantic-green-content-primary',
+          backgroundColor: '$color-nonSemantic-green-background-muted',
+          p: '$space-component-padding-null $space-component-padding-small',
+          borderRadius: '$border-radius-medium',
+        },
+        low: {
+          color: '$color-nonSemantic-green-content-primary',
+        },
+      },
+    },
+    red: {
+      emphasis: {
+        high: {
+          color: '$color-nonSemantic-white-content-primary',
+          backgroundColor: '$color-nonSemantic-red-background-strong',
+          p: '$space-component-padding-null $space-component-padding-small',
+          borderRadius: '$border-radius-medium',
+        },
+        medium: {
+          color: '$color-nonSemantic-red-content-primary',
+          backgroundColor: '$color-nonSemantic-red-background-muted',
+          p: '$space-component-padding-null $space-component-padding-small',
+          borderRadius: '$border-radius-medium',
+        },
+        low: {
+          color: '$color-nonSemantic-red-content-primary',
+          backgroundColor: '$color-transparent',
+        },
+      },
+    },
+    orange: {
+      emphasis: {
+        high: {
+          backgroundColor: '$color-nonSemantic-orange-background-strong',
+          color: '$color-nonSemantic-grey-content-primary',
+          p: '$space-component-padding-null $space-component-padding-small',
+          borderRadius: '$border-radius-medium',
+        },
+        medium: {
+          color: '$color-nonSemantic-orange-content-primary',
+          backgroundColor: '$color-nonSemantic-orange-background-muted',
+          p: '$space-component-padding-null $space-component-padding-small',
+          borderRadius: '$border-radius-medium',
+        },
+        low: {
+          color: '$color-nonSemantic-orange-content-primary',
+          backgroundColor: '$color-transparent',
+        },
+      },
+    },
+  },
+  innerElements: {
+    label: {},
+  },
+} satisfies StatusConfig;
+
+export const statusStyles = {
+  defaultConfig,
+};
diff --git a/src/components/Status/Status.test.tsx b/src/components/Status/Status.test.tsx
new file mode 100644
index 00000000..074e7b4d
--- /dev/null
+++ b/src/components/Status/Status.test.tsx
@@ -0,0 +1,117 @@
+import { Status } from './Status';
+import { render } from '../../tests/render';
+
+import { customPropTester } from '@/tests/customPropTester';
+
+const getStatus = (jsx: JSX.Element) => {
+  const { getByTestId } = render(jsx);
+  return {
+    status: getByTestId('status'),
+    dot: getByTestId('status-dot'),
+  };
+};
+
+describe('Status', () => {
+  it('should render the status', () => {
+    const { status } = getStatus(<Status label="label" />);
+    expect(status).toBeInTheDocument();
+  });
+
+  it('should render a correct color (grey, high)', () => {
+    const { status, dot } = getStatus(
+      <Status appearance="grey" emphasis="high" label="label" />,
+    );
+    expect(status).toHaveStyle(
+      'background-color: rgb(85, 95, 109); color: rgb(255, 255, 255)',
+    );
+    expect(dot).toHaveStyle('background-color: rgb(255, 255, 255)');
+  });
+
+  it('should render a correct color (grey, medium)', () => {
+    const { status, dot } = getStatus(
+      <Status appearance="grey" emphasis="medium" label="label" />,
+    );
+    expect(status).toHaveStyle(
+      'background-color: rgb(222, 227, 231); color: rgb(39, 46, 53)',
+    );
+    expect(dot).toHaveStyle('background-color: rgb(85, 95, 109)');
+  });
+
+  it('should render a correct color (grey, low)', () => {
+    const { status, dot } = getStatus(
+      <Status appearance="grey" emphasis="low" label="label" />,
+    );
+    expect(status).toHaveStyle(
+      'background-color: rgba(255, 255, 255, 0); color: rgb(39, 46, 53)',
+    );
+    expect(dot).toHaveStyle('background-color: rgb(85, 95, 109)');
+  });
+
+  it('should render a correct color (blue, high)', () => {
+    const { status, dot } = getStatus(
+      <Status appearance="blue" emphasis="high" label="label" />,
+    );
+    expect(status).toHaveStyle(
+      'background-color: rgb(48, 98, 212); color: rgb(255, 255, 255)',
+    );
+    expect(dot).toHaveStyle('background-color: rgb(255, 255, 255)');
+  });
+
+  it('should render a correct color (green, high)', () => {
+    const { status, dot } = getStatus(
+      <Status appearance="green" emphasis="high" label="label" />,
+    );
+    expect(status).toHaveStyle(
+      'background-color: rgb(29, 124, 77); color: rgb(255, 255, 255)',
+    );
+    expect(dot).toHaveStyle('background-color: rgb(255, 255, 255)');
+  });
+
+  it('should render a correct color (red, high)', () => {
+    const { status, dot } = getStatus(
+      <Status appearance="red" emphasis="high" label="label" />,
+    );
+    expect(status).toHaveStyle(
+      'background-color: rgb(197, 52, 52); color: rgb(255, 255, 255)',
+    );
+    expect(dot).toHaveStyle('background-color: rgb(255, 255, 255)');
+  });
+
+  it('should render a correct color (orange, high)', () => {
+    const { status, dot } = getStatus(
+      <Status appearance="orange" emphasis="high" label="label" />,
+    );
+    expect(status).toHaveStyle(
+      'background-color: rgb(245, 150, 56); color: rgb(39, 46, 53)',
+    );
+    expect(dot).toHaveStyle('background-color: rgb(39, 46, 53)');
+  });
+
+  it('should render a correct color (orange, medium)', () => {
+    const { status, dot } = getStatus(
+      <Status appearance="orange" emphasis="medium" label="label" />,
+    );
+    expect(status).toHaveStyle(
+      'background-color: rgb(252, 222, 192); color: rgb(122, 69, 16)',
+    );
+    expect(dot).toHaveStyle('background-color: rgb(245, 150, 56)');
+  });
+
+  it('should render a correct color (orange, low)', () => {
+    const { status, dot } = getStatus(
+      <Status appearance="orange" emphasis="low" label="label" />,
+    );
+    expect(status).toHaveStyle(
+      'background-color: rgba(255, 255, 255, 0); color: rgb(122, 69, 16)',
+    );
+    expect(dot).toHaveStyle('background-color: rgb(245, 150, 56)');
+  });
+
+  customPropTester(<Status label="label" />, {
+    containerId: 'status',
+    props: {
+      appearance: ['grey', 'blue', 'green', 'red', 'orange'],
+      emphasis: ['high', 'medium', 'low'],
+    },
+  });
+});
diff --git a/src/components/Status/Status.tsx b/src/components/Status/Status.tsx
new file mode 100644
index 00000000..4673c850
--- /dev/null
+++ b/src/components/Status/Status.tsx
@@ -0,0 +1,26 @@
+import { FC, useMemo } from 'react';
+
+import { StatusProps } from './Status.props';
+import { stylesBuilder } from './stylesBuilder';
+
+import { tet } from '@/tetrisly';
+
+export const Status: FC<StatusProps> = ({
+  appearance,
+  emphasis,
+  label,
+  custom,
+  ...restProps
+}) => {
+  const styles = useMemo(
+    () => stylesBuilder(appearance, custom, emphasis),
+    [custom, emphasis, appearance],
+  );
+
+  return (
+    <tet.div {...styles.container} data-testid="status" {...restProps}>
+      <tet.span {...styles.dot} data-testid="status-dot" />
+      <tet.span>{label}</tet.span>
+    </tet.div>
+  );
+};
diff --git a/src/components/Status/StatusAppearance.type.ts b/src/components/Status/StatusAppearance.type.ts
new file mode 100644
index 00000000..c8b44b22
--- /dev/null
+++ b/src/components/Status/StatusAppearance.type.ts
@@ -0,0 +1 @@
+export type StatusAppearance = 'grey' | 'blue' | 'green' | 'red' | 'orange';
diff --git a/src/components/Status/StatusEmphasis.type.ts b/src/components/Status/StatusEmphasis.type.ts
new file mode 100644
index 00000000..9a95eb87
--- /dev/null
+++ b/src/components/Status/StatusEmphasis.type.ts
@@ -0,0 +1 @@
+export type StatusEmphasis = 'high' | 'medium' | 'low';
diff --git a/src/components/Status/index.ts b/src/components/Status/index.ts
new file mode 100644
index 00000000..9dd9a067
--- /dev/null
+++ b/src/components/Status/index.ts
@@ -0,0 +1,3 @@
+export { Status } from './Status';
+export type { StatusProps } from './Status.props';
+export { statusStyles } from './Status.styles';
diff --git a/src/components/Status/stylesBuilder.ts b/src/components/Status/stylesBuilder.ts
new file mode 100644
index 00000000..b939d908
--- /dev/null
+++ b/src/components/Status/stylesBuilder.ts
@@ -0,0 +1,44 @@
+import { defaultConfig, StatusConfig } from './Status.styles';
+import type { StatusAppearance } from './StatusAppearance.type';
+import type { StatusEmphasis } from './StatusEmphasis.type';
+
+import { mergeConfigWithCustom } from '@/services';
+import { BaseProps } from '@/types';
+
+type StylesBuilderParams = {
+  container: BaseProps;
+  dot: BaseProps;
+};
+
+export const stylesBuilder = (
+  appearance?: StatusAppearance,
+  custom?: StatusConfig,
+  emphasis?: StatusEmphasis,
+): StylesBuilderParams => {
+  const {
+    innerElements,
+    appearance: containerAppearance,
+    dot,
+    ...container
+  } = mergeConfigWithCustom({ defaultConfig, custom });
+
+  const { appearance: dotAppearanceStyle, ...dotAppearance } = dot;
+
+  const containerStyles =
+    appearance &&
+    emphasis &&
+    containerAppearance[appearance].emphasis[emphasis];
+  const dotStyles =
+    appearance && emphasis && dot.appearance[appearance].emphasis[emphasis];
+
+  return {
+    container: {
+      ...container,
+      ...containerStyles,
+    },
+    dot: {
+      ...dotAppearance,
+      ...dotStyles,
+    },
+  };
+};
diff --git a/src/components/TextInput/TextInput.props.ts b/src/components/TextInput/TextInput.props.ts
index 5d5f3fbf..dcf378ae 100644
--- a/src/components/TextInput/TextInput.props.ts
+++ b/src/components/TextInput/TextInput.props.ts
@@ -21,7 +21,7 @@ export namespace TextInputProps.InnerComponents {
     Pick<GhostButtonProps, 'label' | 'onClick'>
   >;
   export type Prefix = InnerComponent<'Prefix', { text: string }>;
-  export type Sufix = InnerComponent<'Sufix', { text: string }>;
+  export type Suffix = InnerComponent<'Suffix', { text: string }>;
   export type Button = InnerComponent<
     'Button',
     Pick<GhostButtonProps, 'label' | 'onClick'>
@@ -42,7 +42,7 @@ export type TextInputProps = {
   afterComponent?:
     | TextInputProps.InnerComponents.Icon
     | TextInputProps.InnerComponents.IconButton
-    | TextInputProps.InnerComponents.Sufix
+    | TextInputProps.InnerComponents.Suffix
     | TextInputProps.InnerComponents.Button
     | TextInputProps.InnerComponents.Dropdown;
   state?: BasicInputState;
diff --git a/src/components/TextInput/TextInput.stories.tsx b/src/components/TextInput/TextInput.stories.tsx
index 8dc0ff74..b452cfe0 100644
--- a/src/components/TextInput/TextInput.stories.tsx
+++ b/src/components/TextInput/TextInput.stories.tsx
@@ -127,12 +127,12 @@ export const AfterIconButtonComponent: Story = {
   },
 };
 
-export const AfterSufixComponent: Story = {
+export const AfterSuffixComponent: Story = {
   args: {
     afterComponent: {
-      type: 'Sufix',
+      type: 'Suffix',
       props: {
-        text: 'Sufix',
+        text: 'Suffix',
       },
     },
   },
diff --git a/src/components/TextInput/TextInput.styles.ts b/src/components/TextInput/TextInput.styles.ts
index fac231fe..642b2c19 100644
--- a/src/components/TextInput/TextInput.styles.ts
+++ b/src/components/TextInput/TextInput.styles.ts
@@ -14,7 +14,7 @@ export type TextInputConfig = {
     afterComponent?: {
       spacing?: Partial<
         Record<
-          'Icon' | 'Sufix' | 'Button' | 'IconButton' | 'Dropdown',
+          'Icon' | 'Suffix' | 'Button' | 'IconButton' | 'Dropdown',
           BaseProps
         >
       >;
@@ -109,7 +109,7 @@ export const defaultConfig = {
           marginLeft: '$space-component-padding-small',
           marginRight: '$space-component-padding-large',
         },
-        Sufix: {
+        Suffix: {
           marginLeft: '$space-component-padding-small',
           marginRight: '$space-component-padding-large',
         },
diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
index ba518808..e53a8596 100644
--- a/src/components/TextInput/TextInput.tsx
+++ b/src/components/TextInput/TextInput.tsx
@@ -117,7 +117,7 @@ export const TextInput = forwardRef<
                 {...afterComponent.props}
               />
             )}
-            {afterComponent.type === 'Sufix' && (
+            {afterComponent.type === 'Suffix' && (
               <tet.span {...styles.text}>{afterComponent.props.text}</tet.span>
             )}
             {afterComponent.type === 'Button' && (
diff --git a/src/components/TextInput/stylesBuilder/stylesBuilder.ts b/src/components/TextInput/stylesBuilder/stylesBuilder.ts
index 26621309..c5b8bff9 100644
--- a/src/components/TextInput/stylesBuilder/stylesBuilder.ts
+++ b/src/components/TextInput/stylesBuilder/stylesBuilder.ts
@@ -1,6 +1,6 @@
 import { TextInputConfig, defaultConfig } from '../TextInput.styles';
 
-import { mergeConfigWithCustom } from '@/services/mergeConfigWithCustom/mergeConfigWithCutom';
+import { mergeConfigWithCustom } from '@/services/mergeConfigWithCustom/mergeConfigWithCustom';
 import { BaseProps } from '@/types/BaseProps';
 
 type TextInputStylesBuilder = {
@@ -16,7 +16,7 @@ type TextInputStylesBuilder = {
 export const stylesBuilder = (
   custom?: TextInputConfig,
   beforeComponentType?: 'Icon' | 'Avatar' | 'Prefix' | 'Dropdown',
-  afterComponentType?: 'Icon' | 'Sufix' | 'Button' | 'IconButton' | 'Dropdown',
+  afterComponentType?: 'Icon' | 'Suffix' | 'Button' | 'IconButton' | 'Dropdown',
 ): TextInputStylesBuilder => {
   const {
     innerElements: {
diff --git a/src/docs-components/CornerDialogDocs.tsx b/src/docs-components/CornerDialogDocs.tsx
new file mode 100644
index 00000000..337d0a77
--- /dev/null
+++ b/src/docs-components/CornerDialogDocs.tsx
@@ -0,0 +1,59 @@
+import { capitalize } from 'lodash';
+
+import { SectionHeader } from './common/SectionHeader';
+
+import { CornerDialog } from '@/components/CornerDialog';
+import { tet } from '@/tetrisly';
+
+const intents = ['none', 'warning', 'negative'] as const;
+
+export const CornerDialogDocs = () => (
+  <tet.section
+    display="flex"
+    padding="$dimension-500 $dimension-0"
+    flexDirection="column"
+  >
+    <SectionHeader px="$dimension-1000" variant="H1" my="auto" as="h2">
+      Intent
+    </SectionHeader>
+    <tet.div
+      py="$dimension-300"
+      display="flex"
+      flexWrap="wrap"
+      gap="$dimension-300"
+      flexDirection="column"
+    >
+      {intents.map((intent) => (
+        <tet.div key={intent} px="$dimension-1000" py="$dimension-300">
+          <SectionHeader variant="H2" as="h3" py="$dimension-500">
+            {capitalize(intent)}
+          </SectionHeader>
+
+          <tet.div
+            display="flex"
+            flexDirection="column"
+            gap="$dimension-300"
+            pt="$dimension-300"
+            flexBasis="100"
+            flexShrink="0"
+            flexGrow="1"
+          >
+            <CornerDialog
+              intent={intent}
+              title="Title"
+              content="Description"
+              actions={[
+                { label: 'Action' },
+                {
+                  label: 'Primary Action',
+                  appearance: 'primary',
+                },
+              ]}
+              onCloseClick={() => {}}
+            />
+          </tet.div>
+        </tet.div>
+      ))}
+    </tet.div>
+  </tet.section>
+);
diff --git a/src/docs-components/LoaderDocs.tsx b/src/docs-components/LoaderDocs.tsx
index 8b0cba25..b6ea095c 100644
--- a/src/docs-components/LoaderDocs.tsx
+++ b/src/docs-components/LoaderDocs.tsx
@@ -55,7 +55,7 @@ export const LoaderDocs = () => (
                       inverted={appearance === 'white'}
                       py="$dimension-500"
                     >
-                      Progres: No
+                      Progress: No
                     </SectionHeader>
                     <Loader
                       shape={shape}
@@ -70,7 +70,7 @@ export const LoaderDocs = () => (
                       inverted={appearance === 'white'}
                       py="$dimension-500"
                     >
-                      Progres: Yes ({Math.floor(progress * 100)}%)
+                      Progress: Yes ({Math.floor(progress * 100)}%)
                     </SectionHeader>
                     <Loader
                       shape={shape}
diff --git a/src/docs-components/NewItemButtonDocs.tsx b/src/docs-components/NewItemButtonDocs.tsx
new file mode 100644
index 00000000..cde0667c
--- /dev/null
+++ b/src/docs-components/NewItemButtonDocs.tsx
@@ -0,0 +1,42 @@
+import { SectionHeader } from './common/SectionHeader';
+import { States } from './common/States';
+
+import { NewItemButton } from '@/components/NewItemButton';
+import { tet } from '@/tetrisly';
+
+const states = ['normal', 'alert', 'disabled'] as const;
+
+export const NewItemButtonDocs = () => (
+  <tet.section py="$dimension-500">
+    <SectionHeader
+      px="$dimension-1000"
+      py="$dimension-500"
+      variant="H1"
+      as="h2"
+    >
+      State
+    </SectionHeader>
+    <tet.div px="$dimension-1000" pb="$dimension-500">
+      <States
+        states={['normal', 'alert', 'disabled']}
+        flexBasis="130px"
+        gap="$dimension-300"
+      />
+      <tet.div
+        display="flex"
+        flexDirection="row"
+        gap="$dimension-300"
+        pt="$dimension-300"
+        flexBasis="130px"
+        flexShrink="0"
+        flexGrow="1"
+      >
+        {states.map((state) => (
+          <tet.div flexBasis="130px" flexGrow="1" flexShrink="0">
+            <NewItemButton state={state} text="Text" />
+          </tet.div>
+        ))}
+      </tet.div>
+    </tet.div>
+  </tet.section>
+);
diff --git a/src/docs-components/StatusDocs.tsx b/src/docs-components/StatusDocs.tsx
new file mode 100644
index 00000000..b2dcb865
--- /dev/null
+++ b/src/docs-components/StatusDocs.tsx
@@ -0,0 +1,62 @@
+import { capitalize } from 'lodash';
+
+import { SectionHeader } from './common/SectionHeader';
+import { State } from './common/States';
+
+import { Status } from '@/components/Status';
+import { tet } from '@/tetrisly';
+
+const appearances = ['grey', 'blue', 'green', 'red', 'orange'] as const;
+const emphases = ['high', 'medium', 'low'] as const;
+
+export const StatusDocs = () => (
+  <>
+    {emphases.map((emphasis) => (
+      <tet.section
+        key={emphasis}
+        display="flex"
+        padding="40px 0px"
+        flexDirection="column"
+      >
+        <SectionHeader px="$dimension-1000" variant="H1" my="auto">
+          {capitalize(emphasis)} Emphasis
+        </SectionHeader>
+        <tet.div
+          px="$dimension-1000"
+          borderBottomWidth="1px"
+          borderBottomColor="$color-border-neutral-subtle"
+        >
+          <tet.div
+            py="$dimension-500"
+            display="flex"
+            flexWrap="nowrap"
+            flexDirection="row"
+            gap="$dimension-500"
+            overflowX="scroll"
+          >
+            {appearances.map((appearance, i) => (
+              <tet.div
+                key={appearance}
+                display="flex"
+                flexDirection="column"
+                gap="$dimension-400"
+                flexBasis="100"
+                flexShrink="0"
+                flexGrow="1"
+              >
+                <State key={appearances[i]} state={appearances[i]} />
+                <tet.div py="$space-component-padding-4xLarge">
+                  <Status
+                    appearance={appearance}
+                    emphasis={emphasis}
+                    label="Status"
+                  />
+                </tet.div>
+              </tet.div>
+            ))}
+          </tet.div>
+        </tet.div>
+      </tet.section>
+    ))}
+  </>
+);
diff --git a/src/index.ts b/src/index.ts
index 204a6b17..be1daa8c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -4,6 +4,7 @@ export * from './components/Badge';
 export * from './components/Button';
 export * from './components/Checkbox';
 export * from './components/CheckboxGroup';
+export * from './components/CornerDialog';
 export * from './components/Counter';
 export * from './components/Divider';
 export * from './components/HelperText';
@@ -14,12 +15,14 @@ export * from './components/InlineMessage';
 export * from './components/InlineSearchInput';
 export * from './components/Label';
 export * from './components/Loader';
+export * from './components/NewItemButton';
 export * from './components/Popover';
 export * from './components/RadioButton';
 export * from './components/RadioButtonGroup';
 export * from './components/SearchInput';
 export * from './components/Select';
 export * from './components/SocialButton';
+export * from './components/Status';
 export * from './components/StatusDot';
 export * from './components/Tag';
 export * from './components/TagInput';
diff --git a/src/services/mergeConfigWithCustom/index.ts b/src/services/mergeConfigWithCustom/index.ts
index 50102952..01d79d36 100644
--- a/src/services/mergeConfigWithCustom/index.ts
+++ b/src/services/mergeConfigWithCustom/index.ts
@@ -1 +1 @@
-export { mergeConfigWithCustom } from './mergeConfigWithCutom';
+export { mergeConfigWithCustom } from './mergeConfigWithCustom';
diff --git a/src/services/mergeConfigWithCustom/mergeConfigWithCustom.test.ts b/src/services/mergeConfigWithCustom/mergeConfigWithCustom.test.ts
index a88809d7..e1c792c7 100644
--- a/src/services/mergeConfigWithCustom/mergeConfigWithCustom.test.ts
+++ b/src/services/mergeConfigWithCustom/mergeConfigWithCustom.test.ts
@@ -1,6 +1,6 @@
 import { merge } from 'lodash';
 
-import { mergeConfigWithCustom } from './mergeConfigWithCutom';
+import { mergeConfigWithCustom } from './mergeConfigWithCustom';
 
 const defaultConfig = {
   p: 'component-padding-medium',
diff --git a/src/services/mergeConfigWithCustom/mergeConfigWithCutom.ts b/src/services/mergeConfigWithCustom/mergeConfigWithCustom.ts
similarity index 100%
rename from src/services/mergeConfigWithCustom/mergeConfigWithCutom.ts
rename to src/services/mergeConfigWithCustom/mergeConfigWithCustom.ts
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index 8d1bea2d..e512203a 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -973,7 +973,7 @@ const fixedTokens = {
   borderStyles: {
     '$border-style-none': 'none',
     '$border-style-solid': 'solid',
-    '$border-style-dashed': 'dashed solid',
+    '$border-style-dashed': 'dashed',
   },
   fonts: { '$font-family-primary': 'Inter' },
   fontSizes: {
diff --git a/src/utility-types/DistributiveOmit.ts b/src/utility-types/DistributiveOmit.ts
new file mode 100644
index 00000000..d5b0cc9e
--- /dev/null
+++ b/src/utility-types/DistributiveOmit.ts
@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type DistributiveOmit<T, K extends keyof any> = T extends any
+  ? Omit<T, K>
+  : never;