diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts
index 71c774689..45422fab3 100644
--- a/frontend/src/bundles/common/components/components.ts
+++ b/frontend/src/bundles/common/components/components.ts
@@ -1,4 +1,5 @@
 export { Button } from './button/button.js';
+export { Header } from './header/header.js';
 export { Input } from './input/input.js';
 export { Link } from './link/link.js';
 export { Loader } from './loader/loader.js';
diff --git a/frontend/src/bundles/common/components/header/header.tsx b/frontend/src/bundles/common/components/header/header.tsx
new file mode 100644
index 000000000..2a0322074
--- /dev/null
+++ b/frontend/src/bundles/common/components/header/header.tsx
@@ -0,0 +1,33 @@
+import { Flex, Text } from '@chakra-ui/react';
+
+const Header = (): JSX.Element => {
+    return (
+        <Flex
+            as="header"
+            height="75px"
+            position="sticky"
+            top="0"
+            left="0"
+            width="100%"
+            backgroundColor="background.900"
+            color="white"
+            boxShadow="md"
+            zIndex="1000"
+            padding="4"
+            marginBottom="20px"
+        >
+            <Flex
+                width="full"
+                alignItems="center"
+                maxWidth="1440px"
+                justifyContent="space-between"
+            >
+                <Text fontSize="xl" fontWeight="lighter">
+                    Logo
+                </Text>
+            </Flex>
+        </Flex>
+    );
+};
+
+export { Header };