diff --git a/src/components/atoms/Logo.tsx b/src/components/atoms/Logo.tsx
new file mode 100644
index 00000000..70aa5ebe
--- /dev/null
+++ b/src/components/atoms/Logo.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import theme from 'styled-theming';
+import styled from 'styled-components';
+
+const fill = theme('mode', {
+ light: '#011627',
+ dark: '#d6deeb',
+});
+
+const Svg = styled.svg`
+ fill: ${fill};
+ width: 50vw;
+ max-width: 280px;
+`;
+
+const Logo = () => (
+
+);
+
+export default Logo;
diff --git a/src/components/atoms/__tests__/Logo.test.tsx b/src/components/atoms/__tests__/Logo.test.tsx
new file mode 100644
index 00000000..ad28a783
--- /dev/null
+++ b/src/components/atoms/__tests__/Logo.test.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import 'jest-styled-components';
+import { render } from '@testing-library/react';
+import Logo from '../Logo';
+
+it('renders correctly', () => {
+ const { container } = render();
+ expect(container.firstChild).toMatchInlineSnapshot(`
+ .c0 {
+ width: 50vw;
+ max-width: 280px;
+ }
+
+
+ `);
+});
diff --git a/src/components/organisms/Header.tsx b/src/components/organisms/Header.tsx
index 0241acdf..0da054a6 100644
--- a/src/components/organisms/Header.tsx
+++ b/src/components/organisms/Header.tsx
@@ -6,9 +6,9 @@ import styled from 'styled-components';
import { useDimensions } from 'Hooks/useDimensions';
import { MenuToggle } from 'Atoms/MenuToggle';
import { Navigation as Nav } from 'Molecules/Navigation';
+import Logo from 'Atoms/Logo';
// import NavigationContext from "Context/navigation.context"
-import Highlight from 'Atoms/Highlight';
import ToggleMode from 'Atoms/ToggleMode';
const sidebar = {
@@ -49,11 +49,9 @@ const Header = () => {
-
+
+
+
+
+