diff --git a/src/Hourglass/Hourglass.js b/src/Hourglass/Hourglass.js
deleted file mode 100644
index 3adc5250..00000000
--- a/src/Hourglass/Hourglass.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import propTypes from 'prop-types';
-import styled from 'styled-components';
-import base64hourglass from './base64hourglass';
-
-const StyledContainer = styled.span`
-  display: inline-block;
-`;
-
-const StyledHourglass = styled.span`
-  display: block;
-  background: ${base64hourglass};
-  background-size: cover;
-  width: 100%;
-  height: 100%;
-`;
-
-const Hourglass = React.forwardRef(function HourGlass(props, ref) {
-  const { size, style, ...otherProps } = props;
-  return (
-    <StyledContainer
-      style={{
-        ...style,
-        width: size,
-        height: size
-      }}
-      ref={ref}
-      {...otherProps}
-    >
-      <StyledHourglass />
-    </StyledContainer>
-  );
-});
-
-Hourglass.defaultProps = {
-  size: '30px',
-  style: {}
-};
-
-Hourglass.propTypes = {
-  size: propTypes.oneOfType([propTypes.string, propTypes.number]),
-  // eslint-disable-next-line react/forbid-prop-types
-  style: propTypes.object
-};
-export default Hourglass;
diff --git a/src/Hourglass/Hourglass.mdx b/src/Hourglass/Hourglass.mdx
index 0d4b8b8e..e4ca81be 100644
--- a/src/Hourglass/Hourglass.mdx
+++ b/src/Hourglass/Hourglass.mdx
@@ -3,7 +3,7 @@ name: Hourglass
 menu: Components
 ---
 
-import Hourglass from './Hourglass';
+import { Hourglass } from './Hourglass';
 
 # Hourglass
 
diff --git a/src/Hourglass/Hourglass.spec.js b/src/Hourglass/Hourglass.spec.js
deleted file mode 100644
index 198b80df..00000000
--- a/src/Hourglass/Hourglass.spec.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Hourglass from './Hourglass';
-
-describe('<Hourglass />', () => {
-  it('should render hourglass', () => {
-    const { container } = render(<Hourglass />);
-    const barEl = container.firstChild;
-
-    expect(barEl).toBeInTheDocument();
-  });
-
-  it('should render correct size', () => {
-    const { container } = render(<Hourglass size='66px' />);
-    const hourglass = container.firstChild;
-
-    const computedStyles = window.getComputedStyle(hourglass);
-    expect(computedStyles.width).toBe('66px');
-    expect(computedStyles.height).toBe('66px');
-  });
-
-  it('should handle custom props', () => {
-    const customProps = { alt: 'hourglass' };
-    const { container } = render(<Hourglass {...customProps} />);
-    const hourglass = container.firstChild;
-
-    expect(hourglass).toHaveAttribute('alt', 'hourglass');
-  });
-});
diff --git a/src/Hourglass/Hourglass.spec.tsx b/src/Hourglass/Hourglass.spec.tsx
new file mode 100644
index 00000000..46cdab07
--- /dev/null
+++ b/src/Hourglass/Hourglass.spec.tsx
@@ -0,0 +1,34 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { Hourglass } from './Hourglass';
+
+describe('<Hourglass />', () => {
+  it('should render hourglass', () => {
+    const { container } = render(<Hourglass />);
+    const hourglass = container.firstElementChild;
+
+    expect(hourglass).toBeInTheDocument();
+  });
+
+  it('should render correct size', () => {
+    const { container } = render(<Hourglass size='66px' />);
+    const hourglass = container.firstElementChild;
+
+    const computedStyles = hourglass
+      ? window.getComputedStyle(hourglass)
+      : null;
+    expect(computedStyles?.width).toBe('66px');
+    expect(computedStyles?.height).toBe('66px');
+  });
+
+  it('should handle custom props', () => {
+    const customProps: React.HTMLAttributes<HTMLSpanElement> = {
+      title: 'hourglass'
+    };
+    const { container } = render(<Hourglass {...customProps} />);
+    const hourglass = container.firstElementChild;
+
+    expect(hourglass).toHaveAttribute('title', 'hourglass');
+  });
+});
diff --git a/src/Hourglass/Hourglass.stories.js b/src/Hourglass/Hourglass.stories.tsx
similarity index 82%
rename from src/Hourglass/Hourglass.stories.js
rename to src/Hourglass/Hourglass.stories.tsx
index db7dbd30..e0980e60 100644
--- a/src/Hourglass/Hourglass.stories.js
+++ b/src/Hourglass/Hourglass.stories.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
 import styled from 'styled-components';
 
 import { Hourglass } from 'react95';
+import { ComponentMeta } from '@storybook/react';
 
 const Wrapper = styled.div`
   padding: 5rem;
@@ -12,7 +12,7 @@ export default {
   title: 'Hourglass',
   component: Hourglass,
   decorators: [story => <Wrapper>{story()}</Wrapper>]
-};
+} as ComponentMeta<typeof Hourglass>;
 
 export function Default() {
   return <Hourglass size={32} />;
diff --git a/src/Hourglass/Hourglass.tsx b/src/Hourglass/Hourglass.tsx
new file mode 100644
index 00000000..e64ebd7b
--- /dev/null
+++ b/src/Hourglass/Hourglass.tsx
@@ -0,0 +1,34 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { getSize } from '../common/utils';
+import base64hourglass from './base64hourglass';
+
+type HourglassProps = {
+  size?: string | number;
+};
+
+const StyledContainer = styled.span<Required<Pick<HourglassProps, 'size'>>>`
+  display: inline-block;
+  height: ${({ size }) => getSize(size)};
+  width: ${({ size }) => getSize(size)};
+`;
+
+const StyledHourglass = styled.span`
+  display: block;
+  background: ${base64hourglass};
+  background-size: cover;
+  width: 100%;
+  height: 100%;
+`;
+
+const Hourglass = forwardRef<HTMLSpanElement, HourglassProps>(
+  function Hourglass({ size = 30, ...otherProps }, ref) {
+    return (
+      <StyledContainer size={size} ref={ref} {...otherProps}>
+        <StyledHourglass />
+      </StyledContainer>
+    );
+  }
+);
+
+export { Hourglass, HourglassProps };
diff --git a/src/Hourglass/base64hourglass.js b/src/Hourglass/base64hourglass.tsx
similarity index 100%
rename from src/Hourglass/base64hourglass.js
rename to src/Hourglass/base64hourglass.tsx
diff --git a/src/index.ts b/src/index.ts
index ee3a0431..476a9447 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -15,7 +15,7 @@ export { default as Cutout } from './Cutout/Cutout';
 export * from './Desktop/Desktop';
 export * from './Divider/Divider';
 export { default as Fieldset } from './Fieldset/Fieldset';
-export { default as Hourglass } from './Hourglass/Hourglass';
+export * from './Hourglass/Hourglass';
 export { default as List } from './List/List';
 export { default as ListItem } from './ListItem/ListItem';
 export { default as LoadingIndicator } from './LoadingIndicator/LoadingIndicator';