diff --git a/.storybook/config.js b/.storybook/config.js
index ab7a877..4cfc1b0 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -4,7 +4,7 @@ import { ThemeProvider } from 'styled-components';
 import { withScreenshot } from 'zisui';
 import pkg from '../package.json';
 import GlobalStyle from '../src/styles/GlobalStyle';
-import theme from '../src/styles/theme';
+import { darkTheme } from '../src/styles/theme';
 
 // automatically import all files ending in *.stories.js
 const req = require.context('../src', true, /.stories.(ts|tsx)$/);
@@ -33,7 +33,7 @@ addParameters({
 addDecorator(withScreenshot());
 
 addDecorator(story => (
-  <ThemeProvider theme={theme}>
+  <ThemeProvider theme={darkTheme}>
     <GlobalStyle />
     {story()}
   </ThemeProvider>
diff --git a/gatsby-config.js b/gatsby-config.js
index 5669d73..cede3ba 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -16,7 +16,7 @@ module.exports = {
       resolve: `gatsby-source-filesystem`,
       options: {
         name: `icon`,
-        path: `${__dirname}/src/assets/icon`,
+        path: `${__dirname}/src/assets/images`,
       },
     },
     {
@@ -57,7 +57,7 @@ module.exports = {
         background_color: `#111`,
         theme_color: `#111`,
         display: `minimal-ui`,
-        icon: `src/assets/icon/logo.png`,
+        icon: `src/assets/images/logo.png`,
       },
     },
     `gatsby-plugin-offline`,
diff --git a/package.json b/package.json
index 94eae15..4a33c80 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "format": "prettier --write 'src/**/*.{ts,tsx,js,jsx}'",
     "format:ci": "prettier 'src/**/*.{tsx,ts}'",
     "serve": "gatsby serve",
-    "svg": "svgo {src/assets,static}/**/*.svg --enable=removeDimensions",
+    "svg": "svgo src/assets/**/*.svg --enable=removeDimensions",
     "test": "jest --watch",
     "test:ci": "jest",
     "tsc": "tsc -p tsconfig.json --skipLibCheck",
@@ -24,9 +24,9 @@
     "screenshot": "zisui --serverCmd 'start-storybook -p 6006 -s ./public' http://localhost:6006 --serverTimeout 1000000 --viewport '1280x800'"
   },
   "dependencies": {
-    "@primer/octicons-react": "^9.2.0",
     "@storybook/react": "^5.2.5",
     "@types/react": "^16.9.9",
+    "chroma-js": "^2.1.0",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "enzyme-to-json": "^3.4.3",
@@ -64,6 +64,7 @@
     "@storybook/addon-viewport": "^5.2.5",
     "@storybook/addons": "^5.2.5",
     "@storybook/source-loader": "^5.2.5",
+    "@types/chroma-js": "^1.4.3",
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/enzyme-to-json": "^1.5.3",
diff --git a/src/assets/icons/home.svg b/src/assets/icons/home.svg
new file mode 100644
index 0000000..323468b
--- /dev/null
+++ b/src/assets/icons/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M27 18.039L16 9.501 5 18.039V14.56l11-8.54 11 8.538v3.481zm-2.75-.31v8.251h-5.5v-5.5h-5.5v5.5h-5.5v-8.25L16 11.543l8.25 6.186z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/mail.svg b/src/assets/icons/mail.svg
new file mode 100644
index 0000000..7366003
--- /dev/null
+++ b/src/assets/icons/mail.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M5 24.225V7.776h22v16.447H5v.002zm3.011-1.815h15.978l-5.111-5.115L16 20.179l-2.877-2.883-5.112 5.114zm-1.216-1.275l5.077-5.09-5.077-5.065v10.155zm13.332-5.09l5.079 5.09V10.979l-5.079 5.066zm-4.126 1.588l8.022-8.027-16.045-.001 8.023 8.028z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/moon.svg b/src/assets/icons/moon.svg
new file mode 100644
index 0000000..b720906
--- /dev/null
+++ b/src/assets/icons/moon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16.7 27c4.2 0 8.1-2.4 9.8-6.2-1.1.5-2.3.7-3.5.7-4.8 0-8.6-3.9-8.6-8.6 0-3.2 1.8-6.2 4.7-7.7-.9-.2-1.7-.2-2.4-.2-6.1 0-11 4.9-11 11s4.9 11 11 11z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/sunny.svg b/src/assets/icons/sunny.svg
new file mode 100644
index 0000000..4129517
--- /dev/null
+++ b/src/assets/icons/sunny.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 8.7c-4.1 0-7.3 3.3-7.3 7.3s3.3 7.3 7.3 7.3 7.3-3.3 7.3-7.3S20 8.7 16 8.7zm0 12.8c-3 0-5.5-2.5-5.5-5.5s2.5-5.5 5.5-5.5 5.5 2.5 5.5 5.5-2.5 5.5-5.5 5.5zM15.1 5h1.8v2.8h-1.8V5zM7.6 8.9l1.3-1.3 1.9 1.9-1.3 1.3-1.9-1.9zM5 15.1h2.8v1.8H5v-1.8zM7.6 23.1l1.9-1.9 1.3 1.3-1.9 1.9-1.3-1.3zM15.1 24.2h1.8V27h-1.8v-2.8zM21.2 22.5l1.3-1.3 1.9 1.9-1.3 1.3-1.9-1.9zM24.3 15.1H27v1.8h-2.8v-1.8zM21.2 9.5l1.9-1.9 1.3 1.3-1.9 1.9-1.3-1.3z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icon/logo.png b/src/assets/images/logo.png
similarity index 100%
rename from src/assets/icon/logo.png
rename to src/assets/images/logo.png
diff --git a/src/components/atoms/Button/index.tsx b/src/components/atoms/Button/index.tsx
index 803db1e..8b5d355 100644
--- a/src/components/atoms/Button/index.tsx
+++ b/src/components/atoms/Button/index.tsx
@@ -13,14 +13,13 @@ const StyledButton = styled.button`
   text-decoration: none;
   user-select: none;
   white-space: nowrap;
-  background-color: transparent;
-  color: ${props => props.theme.colors.baseText[0]};
+  background-color: ${({ theme }) => theme.colors.button.bg};
+  color: ${({ theme }) => theme.colors.baseText[0]};
   font-weight: normal;
-  font-family: ${props => props.theme.fonts.avantGarde};
-  font-size: ${props => props.theme.fontSizes[1]};
-  padding: 0 ${props => props.theme.spaces[4]};
-  height: 40px;
-  border: 2px solid ${props => props.theme.colors.baseText[0]};
+  font-size: ${({ theme }) => theme.fontSizes[1]};
+  padding: 0 ${({ theme }) => theme.spaces[4]};
+  height: ${({ theme }) => theme.control.height};
+  border: 2px solid ${({ theme }) => theme.colors.button.border};
   cursor: pointer;
   opacity: 1;
   pointer-events: auto;
@@ -28,7 +27,7 @@ const StyledButton = styled.button`
   text-decoration: none;
   letter-spacing: 0.5em;
   text-indent: 0.5em;
-  transition: background-color 0.4s;
+  transition: background-color ${({ theme }) => theme.transition};
 
   &:last-child {
     margin-right: 0;
@@ -36,7 +35,7 @@ const StyledButton = styled.button`
   &:hover,
   &:focus,
   &:active {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: ${({ theme }) => theme.colors.button.forcus.bg};
   }
 `;
 
diff --git a/src/components/atoms/Container/__snapshots__/index.spec.tsx.snap b/src/components/atoms/Container/__snapshots__/index.spec.tsx.snap
index 60365a9..3259265 100644
--- a/src/components/atoms/Container/__snapshots__/index.spec.tsx.snap
+++ b/src/components/atoms/Container/__snapshots__/index.spec.tsx.snap
@@ -1,7 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Container snapshot 1`] = `
-<styled.section>
+<StyledComponent
+  forwardedComponent={
+    Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "attrs": Array [],
+      "componentStyle": ComponentStyle {
+        "componentId": "sc-bdVaJa",
+        "isStatic": false,
+        "rules": Array [
+          "
+  margin: 0 auto;
+  max-width: 984px;
+  padding: 0px ",
+          [Function],
+          ";
+  padding-top: 0;
+",
+        ],
+      },
+      "displayName": "styled.div",
+      "foldedComponentIds": Array [],
+      "render": [Function],
+      "styledComponentId": "sc-bdVaJa",
+      "target": "div",
+      "toString": [Function],
+      "warnTooManyClasses": [Function],
+      "withComponent": [Function],
+    }
+  }
+  forwardedRef={null}
+>
   ...
-</styled.section>
+</StyledComponent>
 `;
diff --git a/src/components/atoms/Container/index.tsx b/src/components/atoms/Container/index.tsx
index b711d64..5d4ffc5 100644
--- a/src/components/atoms/Container/index.tsx
+++ b/src/components/atoms/Container/index.tsx
@@ -1,17 +1,10 @@
-import * as React from 'react';
 import styled from 'styled-components';
 
-const Wrapper = styled.section`
+const Container = styled.div`
   margin: 0 auto;
   max-width: 984px;
-  padding: 0px ${props => props.theme.spaces[5]} ${props => props.theme.spaces[4]};
+  padding: 0px ${props => props.theme.spaces[5]};
   padding-top: 0;
 `;
 
-export interface ContainerProps {
-  children: React.ReactNode;
-}
-
-const Container = ({ children }: ContainerProps) => <Wrapper>{children}</Wrapper>;
-
 export default Container;
diff --git a/src/components/atoms/Input/__snapshots__/index.spec.tsx.snap b/src/components/atoms/Input/__snapshots__/index.spec.tsx.snap
index 351852b..93f9fbd 100644
--- a/src/components/atoms/Input/__snapshots__/index.spec.tsx.snap
+++ b/src/components/atoms/Input/__snapshots__/index.spec.tsx.snap
@@ -14,16 +14,16 @@ exports[`Input snapshot 1`] = `
   ",
           "
   width: 100%;
+  padding: 0 ",
+          [Function],
+          ";
   font-size: ",
           [Function],
           ";
   color: ",
           [Function],
           ";
-  background: transparent;
-  outline: none;
-  box-shadow: none;
-  padding: 0 ",
+  background-color: ",
           [Function],
           ";
   border-top: 0;
@@ -32,18 +32,26 @@ exports[`Input snapshot 1`] = `
   border-bottom: 1px solid ",
           [Function],
           ";
-  transition: background, border-bottom 0.2s;
+  outline: none;
+  box-shadow: none;
+  transition: background, border-bottom ",
+          [Function],
+          ";
 
   &:focus {
     border-bottom: 1px solid ",
           [Function],
           ";
-    background: rgba(61, 16, 107, 0.15);
+    background-color: ",
+          [Function],
+          ";
   }
 ",
           "
 
-  height: 40px;
+  height: ",
+          [Function],
+          ";
 ",
         ],
       },
diff --git a/src/components/atoms/Input/index.tsx b/src/components/atoms/Input/index.tsx
index 0020e5d..0839d99 100644
--- a/src/components/atoms/Input/index.tsx
+++ b/src/components/atoms/Input/index.tsx
@@ -2,28 +2,28 @@ import styled, { css } from 'styled-components';
 
 export const inputStyle = css`
   width: 100%;
-  font-size: ${props => props.theme.fontSizes[2]};
-  color: ${props => props.theme.colors.baseText[0]};
-  background: transparent;
-  outline: none;
-  box-shadow: none;
-  padding: 0 ${props => props.theme.spaces[1]};
+  padding: 0 ${({ theme }) => theme.spaces[1]};
+  font-size: ${({ theme }) => theme.fontSizes[2]};
+  color: ${({ theme }) => theme.colors.baseText[0]};
+  background-color: ${({ theme }) => theme.colors.input.bg};
   border-top: 0;
   border-left: 0;
   border-right: 0;
-  border-bottom: 1px solid ${props => props.theme.colors.baseText[1]};
-  transition: background, border-bottom 0.2s;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.input.border};
+  outline: none;
+  box-shadow: none;
+  transition: background, border-bottom ${({ theme }) => theme.transition};
 
   &:focus {
-    border-bottom: 1px solid ${props => props.theme.colors.baseText[0]};
-    background: rgba(61, 16, 107, 0.15);
+    border-bottom: 1px solid ${({ theme }) => theme.colors.input.forcus.border};
+    background-color: ${({ theme }) => theme.colors.input.forcus.bg};
   }
 `;
 
 const Input = styled.input`
   ${inputStyle}
 
-  height: 40px;
+  height: ${({ theme }) => theme.control.height};
 `;
 
 export default Input;
diff --git a/src/components/atoms/Logo/index.tsx b/src/components/atoms/Logo/index.tsx
index fbaa113..2bc432d 100644
--- a/src/components/atoms/Logo/index.tsx
+++ b/src/components/atoms/Logo/index.tsx
@@ -6,7 +6,7 @@ const PathLeft = styled.path`
 `;
 
 const PathRight = styled.path`
-  fill: ${props => props.theme.colors.bg};
+  fill: ${({ theme }) => theme.colors.logo};
 `;
 
 const Logo = () => {
diff --git a/src/components/atoms/Textarea/__snapshots__/index.spec.tsx.snap b/src/components/atoms/Textarea/__snapshots__/index.spec.tsx.snap
index cd760b2..59cfe53 100644
--- a/src/components/atoms/Textarea/__snapshots__/index.spec.tsx.snap
+++ b/src/components/atoms/Textarea/__snapshots__/index.spec.tsx.snap
@@ -14,16 +14,16 @@ exports[`Textarea snapshot 1`] = `
   ",
           "
   width: 100%;
+  padding: 0 ",
+          [Function],
+          ";
   font-size: ",
           [Function],
           ";
   color: ",
           [Function],
           ";
-  background: transparent;
-  outline: none;
-  box-shadow: none;
-  padding: 0 ",
+  background-color: ",
           [Function],
           ";
   border-top: 0;
@@ -32,13 +32,19 @@ exports[`Textarea snapshot 1`] = `
   border-bottom: 1px solid ",
           [Function],
           ";
-  transition: background, border-bottom 0.2s;
+  outline: none;
+  box-shadow: none;
+  transition: background, border-bottom ",
+          [Function],
+          ";
 
   &:focus {
     border-bottom: 1px solid ",
           [Function],
           ";
-    background: rgba(61, 16, 107, 0.15);
+    background-color: ",
+          [Function],
+          ";
   }
 ",
           ";
diff --git a/src/components/molecules/ContentBlock/__snapshots__/index.spec.tsx.snap b/src/components/molecules/ContentBlock/__snapshots__/index.spec.tsx.snap
index 0f13233..6d385c2 100644
--- a/src/components/molecules/ContentBlock/__snapshots__/index.spec.tsx.snap
+++ b/src/components/molecules/ContentBlock/__snapshots__/index.spec.tsx.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ContentBlock snapshot 1`] = `
-<div>
-  <Container>
+<styled.section>
+  <styled.div>
     <styled.div>
       <styled.div>
         <styled.h1 />
@@ -11,6 +11,6 @@ exports[`ContentBlock snapshot 1`] = `
         ...
       </styled.div>
     </styled.div>
-  </Container>
-</div>
+  </styled.div>
+</styled.section>
 `;
diff --git a/src/components/molecules/ContentBlock/index.tsx b/src/components/molecules/ContentBlock/index.tsx
index 41bdfb1..bb6023a 100644
--- a/src/components/molecules/ContentBlock/index.tsx
+++ b/src/components/molecules/ContentBlock/index.tsx
@@ -1,14 +1,17 @@
 import * as React from 'react';
 import styled, { css } from 'styled-components';
+
 import Container from '../../atoms/Container';
 
+const Wrapper = styled.section``;
+
 const Flex = styled.div<ContentBlockProps>`
   display: flex;
   padding-bottom: 20vh;
   ${props =>
     props.logo &&
     css`
-      padding-top: 30vh;
+      padding-top: 15vh;
       padding-bottom: 30vh;
     `}
 
@@ -59,14 +62,14 @@ interface ContentBlockProps {
 }
 
 const ContentBlock = ({ id, title, logo, children }: ContentBlockProps) => (
-  <div id={id}>
+  <Wrapper id={id}>
     <Container>
       <Flex logo={logo}>
         <TitleColumn>{logo || <H1>{title}</H1>}</TitleColumn>
         <MainColumn>{children}</MainColumn>
       </Flex>
     </Container>
-  </div>
+  </Wrapper>
 );
 
 export default ContentBlock;
diff --git a/src/components/molecules/InputItem/__snapshots__/index.spec.tsx.snap b/src/components/molecules/FormItem/__snapshots__/index.spec.tsx.snap
similarity index 79%
rename from src/components/molecules/InputItem/__snapshots__/index.spec.tsx.snap
rename to src/components/molecules/FormItem/__snapshots__/index.spec.tsx.snap
index 965ef5a..e0ff552 100644
--- a/src/components/molecules/InputItem/__snapshots__/index.spec.tsx.snap
+++ b/src/components/molecules/FormItem/__snapshots__/index.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`InputItem snapshot 1`] = `
+exports[`FormItem snapshot 1`] = `
 <P>
   <styled.label>
     title
diff --git a/src/components/molecules/InputItem/index.spec.tsx b/src/components/molecules/FormItem/index.spec.tsx
similarity index 59%
rename from src/components/molecules/InputItem/index.spec.tsx
rename to src/components/molecules/FormItem/index.spec.tsx
index bb3efaf..b9c4e53 100644
--- a/src/components/molecules/InputItem/index.spec.tsx
+++ b/src/components/molecules/FormItem/index.spec.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
-import InputItem from '.';
+import FormItem from '.';
 
-describe('InputItem', () => {
+describe('FormItem', () => {
   it('snapshot', () => {
-    const tree = shallow(<InputItem title="title">...</InputItem>);
+    const tree = shallow(<FormItem title="title">...</FormItem>);
     expect(toJson(tree)).toMatchSnapshot();
   });
 });
diff --git a/src/components/molecules/InputItem/index.stories.tsx b/src/components/molecules/FormItem/index.stories.tsx
similarity index 68%
rename from src/components/molecules/InputItem/index.stories.tsx
rename to src/components/molecules/FormItem/index.stories.tsx
index e614406..d356bff 100644
--- a/src/components/molecules/InputItem/index.stories.tsx
+++ b/src/components/molecules/FormItem/index.stories.tsx
@@ -2,25 +2,25 @@ import React from 'react';
 import styled from 'styled-components';
 import { storiesOf } from '@storybook/react';
 import Input from '../../atoms/Input';
-import InputItem from '.';
+import FormItem from '.';
 
 const Wrapper = styled.div`
   width: 480px;
   padding: 60px;
 `;
 
-storiesOf(`molecules|InputItem`, module)
+storiesOf(`molecules|FormItem`, module)
   .add(`default`, () => (
     <Wrapper>
-      <InputItem title="foo" htmlFor="foo">
+      <FormItem title="foo" htmlFor="foo">
         <Input id="foo" placeholder="foo" />
-      </InputItem>
+      </FormItem>
     </Wrapper>
   ))
   .add(`required`, () => (
     <Wrapper>
-      <InputItem title="bar" htmlFor="bar" required>
+      <FormItem title="bar" htmlFor="bar" required>
         <Input id="bar" aria-required required />
-      </InputItem>
+      </FormItem>
     </Wrapper>
   ));
diff --git a/src/components/molecules/InputItem/index.tsx b/src/components/molecules/FormItem/index.tsx
similarity index 83%
rename from src/components/molecules/InputItem/index.tsx
rename to src/components/molecules/FormItem/index.tsx
index 4d3b141..93c41f2 100644
--- a/src/components/molecules/InputItem/index.tsx
+++ b/src/components/molecules/FormItem/index.tsx
@@ -20,14 +20,14 @@ const Required = styled.span`
   padding-left: ${props => props.theme.spaces[0]};
 `;
 
-interface InputItemProps {
+interface FormItemProps {
   title: string;
   htmlFor?: string;
   children: React.ReactNode;
   required?: boolean;
 }
 
-const InputItem = ({ title, required, htmlFor, children }: InputItemProps) => (
+const FormItem = ({ title, required, htmlFor, children }: FormItemProps) => (
   <P>
     <Label htmlFor={htmlFor}>
       {title}
@@ -37,4 +37,4 @@ const InputItem = ({ title, required, htmlFor, children }: InputItemProps) => (
   </P>
 );
 
-export default InputItem;
+export default FormItem;
diff --git a/src/components/molecules/LogoType/__snapshots__/index.spec.tsx.snap b/src/components/molecules/LogoType/__snapshots__/index.spec.tsx.snap
new file mode 100644
index 0000000..5720e7e
--- /dev/null
+++ b/src/components/molecules/LogoType/__snapshots__/index.spec.tsx.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LogoType snapshot 1`] = `
+<styled.div>
+  <styled.div>
+    <Logo />
+  </styled.div>
+  <styled.h1>
+    blivesta
+  </styled.h1>
+</styled.div>
+`;
diff --git a/src/components/molecules/LogoType/index.spec.tsx b/src/components/molecules/LogoType/index.spec.tsx
new file mode 100644
index 0000000..4445a20
--- /dev/null
+++ b/src/components/molecules/LogoType/index.spec.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import LogoType from '.';
+
+describe('LogoType', () => {
+  it('snapshot', () => {
+    const tree = shallow(<LogoType siteTitle="blivesta" />);
+    expect(toJson(tree)).toMatchSnapshot();
+  });
+});
diff --git a/src/components/molecules/LogoType/index.stories.tsx b/src/components/molecules/LogoType/index.stories.tsx
new file mode 100644
index 0000000..010bd6f
--- /dev/null
+++ b/src/components/molecules/LogoType/index.stories.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import LogoType from '.';
+
+storiesOf(`molecules|LogoType`, module).add(`default`, () => <LogoType siteTitle="blivesta" />);
diff --git a/src/components/molecules/LogoType/index.tsx b/src/components/molecules/LogoType/index.tsx
new file mode 100644
index 0000000..54ffa9c
--- /dev/null
+++ b/src/components/molecules/LogoType/index.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import Logo from '../../atoms/Logo';
+
+const Flex = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const LogoWrapper = styled.div`
+  width: 32px;
+  height: 32px;
+  margin-right: ${props => props.theme.spaces[1]};
+`;
+
+const H1 = styled.h1`
+  font-family: ${props => props.theme.fonts.avantGarde};
+  font-weight: 700;
+  font-size: ${props => props.theme.fontSizes[3]};
+  margin-bottom: 0;
+  line-height: 1;
+`;
+
+interface LogoTypeProps {
+  siteTitle: string;
+}
+
+const LogoType = ({ siteTitle }: LogoTypeProps) => (
+  <Flex>
+    <LogoWrapper>
+      <Logo />
+    </LogoWrapper>
+    <H1>{siteTitle}</H1>
+  </Flex>
+);
+
+export default LogoType;
diff --git a/src/components/organisms/Footer/__snapshots__/index.spec.tsx.snap b/src/components/organisms/Footer/__snapshots__/index.spec.tsx.snap
index 0d34f6a..8cf8a93 100644
--- a/src/components/organisms/Footer/__snapshots__/index.spec.tsx.snap
+++ b/src/components/organisms/Footer/__snapshots__/index.spec.tsx.snap
@@ -2,14 +2,13 @@
 
 exports[`Footer snapshot 1`] = `
 <styled.footer>
-  <Container>
+  <styled.div>
     <Styled(styled.div)>
       <ForwardRef
+        title="contact"
         to="/contact/"
       >
-        <Styled(Octicon)
-          icon={[Function]}
-        />
+        <[object Object] />
       </ForwardRef>
     </Styled(styled.div)>
     <styled.div>
@@ -42,6 +41,6 @@ exports[`Footer snapshot 1`] = `
        
       blivesta
     </styled.p>
-  </Container>
+  </styled.div>
 </styled.footer>
 `;
diff --git a/src/components/organisms/Footer/index.tsx b/src/components/organisms/Footer/index.tsx
index d4d2d97..9eba3d6 100644
--- a/src/components/organisms/Footer/index.tsx
+++ b/src/components/organisms/Footer/index.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import Octicon, { Mail, Home } from '@primer/octicons-react';
 import { Link } from 'gatsby';
 
+import IconMail from '../../../assets/icons/mail.svg';
+import IconHome from '../../../assets/icons/home.svg';
 import Container from '../../atoms/Container';
 import Lists from '../../atoms/Lists';
 
@@ -25,6 +26,13 @@ const Wrapper = styled.footer`
   &::after {
     right: 0;
   }
+
+  & svg {
+    fill: ${({ theme }) => theme.colors.baseText[0]};
+    width: 32px;
+    height: 32px;
+    margin-top: -4px;
+  }
 `;
 
 const Flex = styled.div`
@@ -47,10 +55,6 @@ const ContactBlock = styled(Flex)`
   justify-content: center;
 `;
 
-const Icon = styled(Octicon)`
-  width: 32px;
-`;
-
 interface FooterProps {
   siteTitle: string;
   pageLocation: string;
@@ -62,12 +66,12 @@ const Footer = ({ siteTitle, pageLocation }: FooterProps) => {
       <Container>
         <ContactBlock>
           {pageLocation === '/' ? (
-            <Link to="/contact/">
-              <Icon icon={Mail} />
+            <Link to="/contact/" title="contact">
+              <IconMail />
             </Link>
           ) : (
-            <Link to="/">
-              <Icon icon={Home} />
+            <Link to="/" title="home">
+              <IconHome />
             </Link>
           )}
         </ContactBlock>
diff --git a/src/components/organisms/Header/__snapshots__/index.spec.tsx.snap b/src/components/organisms/Header/__snapshots__/index.spec.tsx.snap
index dbe7ec3..1020f05 100644
--- a/src/components/organisms/Header/__snapshots__/index.spec.tsx.snap
+++ b/src/components/organisms/Header/__snapshots__/index.spec.tsx.snap
@@ -2,21 +2,32 @@
 
 exports[`Header snapshot 1`] = `
 <styled.header>
-  <ContentBlock
-    logo={
-      <ForwardRef(Styled(Component))
-        to="/"
-      >
-        <Logo />
-      </ForwardRef(Styled(Component))>
-    }
+  <Styled(styled.div)
+    pageLocation="/"
+    siteTitle="blivesta"
   >
-    <styled.h1>
-      blivesta
-    </styled.h1>
-    <styled.p>
-      description
-    </styled.p>
-  </ContentBlock>
+    <styled.nav>
+      <styled.ul>
+        <styled.li>
+          <ForwardRef
+            title="contact"
+            to="/contact/"
+          >
+            <[object Object] />
+          </ForwardRef>
+        </styled.li>
+        <styled.li>
+          <styled.div
+            onClick={[Function]}
+            onKeyPress={[Function]}
+            role="button"
+            tabIndex={0}
+          >
+            <[object Object] />
+          </styled.div>
+        </styled.li>
+      </styled.ul>
+    </styled.nav>
+  </Styled(styled.div)>
 </styled.header>
 `;
diff --git a/src/components/organisms/Header/index.spec.tsx b/src/components/organisms/Header/index.spec.tsx
index 90bc7d1..7f5bb9b 100644
--- a/src/components/organisms/Header/index.spec.tsx
+++ b/src/components/organisms/Header/index.spec.tsx
@@ -5,7 +5,7 @@ import Header from '.';
 
 describe('Header', () => {
   it('snapshot', () => {
-    const tree = shallow(<Header siteTitle="blivesta" description="description" pageLocation="/" />);
+    const tree = shallow(<Header siteTitle="blivesta" pageLocation="/" />);
     expect(toJson(tree)).toMatchSnapshot();
   });
 });
diff --git a/src/components/organisms/Header/index.stories.tsx b/src/components/organisms/Header/index.stories.tsx
index bda691d..e8b87d8 100644
--- a/src/components/organisms/Header/index.stories.tsx
+++ b/src/components/organisms/Header/index.stories.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
-// import styled from 'styled-components';
 import { storiesOf } from '@storybook/react';
 import Header from '.';
 
-storiesOf(`organisms|Header`, module).add(`default`, () => (
-  <Header siteTitle="blivesta" description="description" pageLocation="/" />
-));
+storiesOf(`organisms|Header`, module)
+  .add(`default`, () => <Header siteTitle="blivesta" pageLocation="/" />)
+  .add(`home`, () => <Header siteTitle="blivesta" pageLocation="/about/" />);
diff --git a/src/components/organisms/Header/index.tsx b/src/components/organisms/Header/index.tsx
index 7b3ddd0..a974536 100644
--- a/src/components/organisms/Header/index.tsx
+++ b/src/components/organisms/Header/index.tsx
@@ -2,106 +2,106 @@ import * as React from 'react';
 import { Link } from 'gatsby';
 import styled from 'styled-components';
 
-import Logo from '../../atoms/Logo';
+import IconMail from '../../../assets/icons/mail.svg';
+import IconHome from '../../../assets/icons/home.svg';
+import IconSun from '../../../assets/icons/sunny.svg';
+import IconMoon from '../../../assets/icons/moon.svg';
+import LogoType from '../../molecules/LogoType';
 import Container from '../../atoms/Container';
-import ContentBlock from '../../molecules/ContentBlock';
 
-const Wrapper = styled.header``;
-
-const HomeH1 = styled.h1`
-  font-family: ${props => props.theme.fonts.avantGarde};
-  font-weight: 700;
-  font-size: ${props => props.theme.fontSizes[7]};
-  margin-top: -8px;
-  margin-bottom: ${props => props.theme.spaces[1]};
-  line-height: 1;
-
-  ${props => props.theme.media.sm`
-    font-size: ${props.theme.fontSizes[8]};
-  `}
-`;
-
-const H1 = styled.h1`
-  font-family: ${props => props.theme.fonts.avantGarde};
-  font-weight: 700;
-  font-size: ${props => props.theme.fontSizes[3]};
-  margin-bottom: 0;
-  line-height: 1;
+const StyledHeader = styled.header`
+  height: 128px;
+  margin-bottom: ${({ theme }) => theme.spaces[8]};
+  position: relative;
 `;
 
-const StyledLink = styled(Link)`
-  display: inline-block;
-  width: 100%;
+const StyledContainer = styled(Container)<HeaderProps>`
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: ${props => (props.pageLocation === '/' ? 'flex-end' : 'space-between')};
 `;
 
-const P = styled.p`
-  font-family: ${props => props.theme.fonts.en};
-  font-size: ${props => props.theme.fontSizes[1]};
-  color: ${props => props.theme.colors.baseText[2]};
-  margin-bottom: 0;
+const Nav = styled.nav`
+  font-size: ${({ theme }) => theme.fontSizes[1]};
 
-  ${props => props.theme.media.sm`
-    font-size: ${props.theme.fontSizes[3]};
-  `}
+  & svg {
+    fill: ${({ theme }) => theme.colors.baseText[0]};
+    width: 20px;
+    height: 20px;
+    margin-top: -4px;
+  }
 `;
 
-const Navbar = styled.nav`
-  height: 128px;
-  padding-top: ${props => props.theme.spaces[6]};
-  margin-bottom: ${props => props.theme.spaces[8]};
+const Ul = styled.ul`
+  display: flex;
+  margin: 0;
+  list-style: none;
 `;
 
-const LogoWrap = styled.div`
-  display: flex;
-  align-items: center;
+const Li = styled.li`
+  text-transform: uppercase;
+  padding-right: ${props => props.theme.spaces[4]};
+
+  &:last-child {
+    padding-right: 0;
+  }
 `;
 
-const StyledLogo = styled.div`
-  width: 32px;
-  height: 32px;
-  margin-right: ${props => props.theme.spaces[1]};
+const ModeButton = styled.div`
+  cursor: pointer;
+  fill: ${({ theme }) => theme.colors.baseText[0]};
+  transition: opacity ${({ theme }) => theme.transition};
+  will-change: opacity;
+
+  &:hover {
+    opacity: 0.6;
+  }
 `;
 
 interface HeaderProps {
   siteTitle: string;
-  description: string;
   pageLocation: string;
+  themeState?: string | null;
+  themeSwich?: () => void;
 }
 
-const Header = ({ siteTitle, description, pageLocation }: HeaderProps) => {
+const Header = ({ siteTitle, pageLocation, themeSwich, themeState }: HeaderProps) => {
+  const themeToggle = () => {
+    return themeSwich && themeSwich();
+  };
+
   return (
-    <Wrapper>
-      {pageLocation === '/' ? (
-        <ContentBlock
-          logo={
-            <StyledLink to="/">
-              <Logo />
-            </StyledLink>
-          }
-        >
-          <HomeH1>{siteTitle}</HomeH1>
-          <P>{description}</P>
-        </ContentBlock>
-      ) : (
-        <Navbar>
-          <Container>
-            <StyledLink to="/">
-              <LogoWrap>
-                <StyledLogo>
-                  <Logo />
-                </StyledLogo>
-                <H1>{siteTitle}</H1>
-              </LogoWrap>
-            </StyledLink>
-          </Container>
-        </Navbar>
-      )}
-    </Wrapper>
+    <StyledHeader>
+      <StyledContainer pageLocation={pageLocation} siteTitle={siteTitle}>
+        {pageLocation !== '/' && (
+          <Link to="/">
+            <LogoType siteTitle={siteTitle} />
+          </Link>
+        )}
+        <Nav>
+          <Ul>
+            <Li>
+              {pageLocation === '/' ? (
+                <Link to="/contact/" title="contact">
+                  <IconMail />
+                </Link>
+              ) : (
+                <Link to="/" title="home">
+                  <IconHome />
+                </Link>
+              )}
+            </Li>
+            <Li>
+              <ModeButton onClick={themeToggle} onKeyPress={themeToggle} role="button" tabIndex={0}>
+                {themeState === 'light' ? <IconMoon /> : <IconSun />}
+              </ModeButton>
+            </Li>
+          </Ul>
+        </Nav>
+      </StyledContainer>
+    </StyledHeader>
   );
 };
 
-Header.defaultProps = {
-  siteTitle: ``,
-};
-
 export default Header;
diff --git a/src/components/organisms/Masthead/__snapshots__/index.spec.tsx.snap b/src/components/organisms/Masthead/__snapshots__/index.spec.tsx.snap
new file mode 100644
index 0000000..6463eb2
--- /dev/null
+++ b/src/components/organisms/Masthead/__snapshots__/index.spec.tsx.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Masthead snapshot 1`] = `
+<ContentBlock
+  logo={
+    <ForwardRef(Styled(Component))
+      to="/"
+    >
+      <Logo />
+    </ForwardRef(Styled(Component))>
+  }
+>
+  <styled.h1>
+    blivesta
+  </styled.h1>
+  <styled.p>
+    description
+  </styled.p>
+</ContentBlock>
+`;
diff --git a/src/components/organisms/Masthead/index.spec.tsx b/src/components/organisms/Masthead/index.spec.tsx
new file mode 100644
index 0000000..ab27449
--- /dev/null
+++ b/src/components/organisms/Masthead/index.spec.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import Masthead from '.';
+
+describe('Masthead', () => {
+  it('snapshot', () => {
+    const tree = shallow(<Masthead siteTitle="blivesta" description="description" />);
+    expect(toJson(tree)).toMatchSnapshot();
+  });
+});
diff --git a/src/components/organisms/Masthead/index.stories.tsx b/src/components/organisms/Masthead/index.stories.tsx
new file mode 100644
index 0000000..bc21327
--- /dev/null
+++ b/src/components/organisms/Masthead/index.stories.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+// import styled from 'styled-components';
+import { storiesOf } from '@storybook/react';
+import Masthead from '.';
+
+storiesOf(`organisms|Masthead`, module).add(`default`, () => (
+  <Masthead siteTitle="blivesta" description="description" />
+));
diff --git a/src/components/organisms/Masthead/index.tsx b/src/components/organisms/Masthead/index.tsx
new file mode 100644
index 0000000..dd94825
--- /dev/null
+++ b/src/components/organisms/Masthead/index.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { Link } from 'gatsby';
+import styled from 'styled-components';
+
+import Logo from '../../atoms/Logo';
+import ContentBlock from '../../molecules/ContentBlock';
+
+const H1 = styled.h1`
+  font-family: ${props => props.theme.fonts.avantGarde};
+  font-weight: 700;
+  font-size: ${props => props.theme.fontSizes[7]};
+  margin-top: -8px;
+  margin-bottom: ${props => props.theme.spaces[1]};
+  line-height: 1;
+  letter-spacing: -0.025em;
+  text-indent: -0.025em;
+
+  ${props => props.theme.media.sm`
+    font-size: ${props.theme.fontSizes[8]};
+  `};
+`;
+
+const StyledLink = styled(Link)`
+  display: inline-block;
+  width: 100%;
+`;
+
+const P = styled.p`
+  font-family: ${props => props.theme.fonts.en};
+  font-size: ${props => props.theme.fontSizes[1]};
+  color: ${props => props.theme.colors.baseText[2]};
+  margin-bottom: 0;
+
+  ${props => props.theme.media.sm`
+    font-size: ${props.theme.fontSizes[3]};
+  `}
+`;
+
+interface MastheadProps {
+  siteTitle: string;
+  description: string;
+}
+
+const Masthead = ({ siteTitle, description }: MastheadProps) => {
+  return (
+    <ContentBlock
+      logo={
+        <StyledLink to="/">
+          <Logo />
+        </StyledLink>
+      }
+    >
+      <H1>{siteTitle}</H1>
+      <P>{description}</P>
+    </ContentBlock>
+  );
+};
+
+export default Masthead;
diff --git a/src/components/organisms/NetlifyForm/__snapshots__/index.spec.tsx.snap b/src/components/organisms/NetlifyForm/__snapshots__/index.spec.tsx.snap
index 8c7970c..cc375a9 100644
--- a/src/components/organisms/NetlifyForm/__snapshots__/index.spec.tsx.snap
+++ b/src/components/organisms/NetlifyForm/__snapshots__/index.spec.tsx.snap
@@ -19,7 +19,7 @@ exports[`NetlifyForm snapshot 1`] = `
   />
   <styled.div>
     <styled.div>
-      <InputItem
+      <FormItem
         htmlFor="name"
         required={true}
         title="Name"
@@ -31,10 +31,10 @@ exports[`NetlifyForm snapshot 1`] = `
           required={true}
           type="text"
         />
-      </InputItem>
+      </FormItem>
     </styled.div>
     <styled.div>
-      <InputItem
+      <FormItem
         htmlFor="company"
         title="Company"
       >
@@ -43,12 +43,12 @@ exports[`NetlifyForm snapshot 1`] = `
           name="company"
           type="text"
         />
-      </InputItem>
+      </FormItem>
     </styled.div>
   </styled.div>
   <styled.div>
     <styled.div>
-      <InputItem
+      <FormItem
         htmlFor="email"
         required={true}
         title="Email"
@@ -61,10 +61,10 @@ exports[`NetlifyForm snapshot 1`] = `
           required={true}
           type="email"
         />
-      </InputItem>
+      </FormItem>
     </styled.div>
     <styled.div>
-      <InputItem
+      <FormItem
         htmlFor="phone"
         title="Phone"
       >
@@ -73,10 +73,10 @@ exports[`NetlifyForm snapshot 1`] = `
           name="phone"
           type="tel"
         />
-      </InputItem>
+      </FormItem>
     </styled.div>
   </styled.div>
-  <InputItem
+  <FormItem
     htmlFor="meaasage"
     required={true}
     title="Message"
@@ -87,7 +87,7 @@ exports[`NetlifyForm snapshot 1`] = `
       name="meaasage"
       required={true}
     />
-  </InputItem>
+  </FormItem>
   <styled.div>
     <Button
       type="submit"
diff --git a/src/components/organisms/NetlifyForm/index.tsx b/src/components/organisms/NetlifyForm/index.tsx
index d944b68..1037ead 100644
--- a/src/components/organisms/NetlifyForm/index.tsx
+++ b/src/components/organisms/NetlifyForm/index.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import Button from '../../atoms/Button';
 import Input from '../../atoms/Input';
 import Textarea from '../../atoms/Textarea';
-import InputItem from '../../molecules/InputItem';
+import FormItem from '../../molecules/FormItem';
 
 const Form = styled.form`
   padding-right: ${props => props.theme.spaces[6]};
@@ -48,19 +48,19 @@ const NetlifyForm = () => {
       <Input type="hidden" name="bot-field" />
       <Row>
         <Column>
-          <InputItem title="Name" htmlFor="name" required>
+          <FormItem title="Name" htmlFor="name" required>
             <Input type="text" id="name" name="name" required aria-required />
-          </InputItem>
+          </FormItem>
         </Column>
         <Column>
-          <InputItem title="Company" htmlFor="company">
+          <FormItem title="Company" htmlFor="company">
             <Input type="text" id="company" name="company" />
-          </InputItem>
+          </FormItem>
         </Column>
       </Row>
       <Row>
         <Column>
-          <InputItem title="Email" htmlFor="email" required>
+          <FormItem title="Email" htmlFor="email" required>
             <Input
               type="email"
               id="email"
@@ -69,17 +69,17 @@ const NetlifyForm = () => {
               required
               aria-required
             />
-          </InputItem>
+          </FormItem>
         </Column>
         <Column>
-          <InputItem title="Phone" htmlFor="phone">
+          <FormItem title="Phone" htmlFor="phone">
             <Input type="tel" id="phone" name="phone" />
-          </InputItem>
+          </FormItem>
         </Column>
       </Row>
-      <InputItem title="Message" htmlFor="meaasage" required>
+      <FormItem title="Message" htmlFor="meaasage" required>
         <Textarea id="meaasage" name="meaasage" required aria-required />
-      </InputItem>
+      </FormItem>
       <ButtonBox>
         <Button type="submit">Submit</Button>
       </ButtonBox>
diff --git a/src/components/templates/Layout/index.tsx b/src/components/templates/Layout/index.tsx
index fd84387..4d60e77 100644
--- a/src/components/templates/Layout/index.tsx
+++ b/src/components/templates/Layout/index.tsx
@@ -3,15 +3,18 @@ import styled, { ThemeProvider } from 'styled-components';
 
 import useSiteMetadata from '../../../hooks/useSiteMetadata';
 import GlobalStyle from '../../../styles/GlobalStyle';
-import theme from '../../../styles/theme';
+import { lightTheme, darkTheme } from '../../../styles/theme';
 import Header from '../../organisms/Header';
 import Footer from '../../organisms/Footer';
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<LayoutProps>`
   background-repeat: repeat-x;
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTAgMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMCAwaDF2NUgwek0xMCAwaDF2NWgtMXpNMjAgMGgxdjVoLTF6TTMwIDBoMXY1aC0xek00MCAwaDF2NWgtMXpNNSAwaDF2N0g1ek0xNSAwaDF2N2gtMXpNMjUgMGgxdjdoLTF6TTM1IDBoMXY3aC0xek00NSAwaDF2MTBoLTF6Ii8+PC9nPjwvc3ZnPg==');
   background-size: 50px;
   background-attachment: fixed;
+  background-image: ${({ themeState }) =>
+    themeState === 'light'
+      ? `url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTAgMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iIzEyMDgyNCI+PHBhdGggZD0iTTAgMGgxdjVIMHpNMTAgMGgxdjVoLTF6TTIwIDBoMXY1aC0xek0zMCAwaDF2NWgtMXpNNDAgMGgxdjVoLTF6TTUgMGgxdjdINXpNMTUgMGgxdjdoLTF6TTI1IDBoMXY3aC0xek0zNSAwaDF2N2gtMXpNNDUgMGgxdjEwaC0xeiIvPjwvZz48L3N2Zz4=')`
+      : `url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTAgMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMCAwaDF2NUgwek0xMCAwaDF2NWgtMXpNMjAgMGgxdjVoLTF6TTMwIDBoMXY1aC0xek00MCAwaDF2NWgtMXpNNSAwaDF2N0g1ek0xNSAwaDF2N2gtMXpNMjUgMGgxdjdoLTF6TTM1IDBoMXY3aC0xek00NSAwaDF2MTBoLTF6Ii8+PC9nPjwvc3ZnPg==')`};
 `;
 
 const Contents = styled.div``;
@@ -19,25 +22,38 @@ const Contents = styled.div``;
 const Main = styled.main``;
 
 export interface LayoutProps {
+  themeState?: string | null;
   children: React.ReactNode;
 }
 
 const Layout = ({ children }: LayoutProps) => {
-  const { title, description } = useSiteMetadata();
+  const { title } = useSiteMetadata();
   const [path, setPath] = React.useState('');
+  const [theme, setTheme] = React.useState<string | null>('dark');
+
+  const toggleTheme = () => {
+    if (theme === 'light') {
+      setTheme('dark');
+      localStorage.setItem('theme', 'dark');
+    } else {
+      setTheme('light');
+      localStorage.setItem('theme', 'light');
+    }
+  };
 
   React.useEffect(() => {
     if (typeof window !== 'undefined') {
       setPath(window.location.pathname);
     }
-  }, [path]);
+    setTheme(localStorage.getItem('theme'));
+  }, [path, theme]);
 
   return (
-    <ThemeProvider theme={theme}>
-      <Wrapper>
+    <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
+      <Wrapper themeState={theme}>
         <GlobalStyle />
         <Contents className="js-content">
-          <Header siteTitle={title} description={description} pageLocation={path} />
+          <Header siteTitle={title} pageLocation={path} themeSwich={toggleTheme} themeState={theme} />
           <Main>{children}</Main>
           <Footer siteTitle={title} pageLocation={path} />
         </Contents>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 6145eec..1ccd94f 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -3,14 +3,16 @@ import * as React from 'react';
 import useSiteMetadata from '../hooks/useSiteMetadata';
 import Layout from '../components/templates/Layout';
 import Seo from '../components/parts/Seo';
+import Masthead from '../components/organisms/Masthead';
 import About from '../components/organisms/About';
 
 const IndexPage = () => {
-  const { description } = useSiteMetadata();
+  const { title, description } = useSiteMetadata();
 
   return (
     <Layout>
       <Seo pageTitle={description} pageLocation="/" />
+      <Masthead siteTitle={title} description={description} />
       <About />
     </Layout>
   );
diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts
index ea678f8..405b6fd 100644
--- a/src/styles/GlobalStyle.ts
+++ b/src/styles/GlobalStyle.ts
@@ -10,8 +10,8 @@ export default createGlobalStyle`
     font-family: sans-serif;
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
-    background: ${props => props.theme.colors.bg};
-    color: ${props => props.theme.colors.baseText[0]};
+    background: ${({ theme }) => theme.colors.bg};
+    color: ${({ theme }) => theme.colors.baseText[0]};
   }
 
   body {
@@ -19,7 +19,7 @@ export default createGlobalStyle`
     padding: 0;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    font-family: ${props => props.theme.fonts.ja};
+    font-family: ${({ theme }) => theme.fonts.ja};
     line-height: 1.5;
   }
 
@@ -31,13 +31,13 @@ export default createGlobalStyle`
   }
 
   a {
-    color: ${props => props.theme.colors.baseText[0]};
+    color: ${({ theme }) => theme.colors.baseText[0]};
     text-decoration: none;
-    transition: opacity .4s;
+    transition: opacity ${({ theme }) => theme.transition};
     will-change: opacity;
 
     &:hover {
-      opacity: .8;
+      opacity: .6;
     }
   }
 
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
index 9320ffd..51882cf 100644
--- a/src/styles/theme.ts
+++ b/src/styles/theme.ts
@@ -1,3 +1,4 @@
+import chroma from 'chroma-js';
 import { keyframes } from 'styled-components';
 import { generateMedia } from 'styled-media-query';
 
@@ -21,16 +22,7 @@ const customMedia = generateMedia({
   xl: '1440px',
 });
 
-const theme = {
-  colors: {
-    baseText: [
-      '#fff', // [0]
-      '#777', // [1]
-      '#ccc', // [2]
-    ],
-    link: '#fff',
-    bg: '#120824',
-  },
+export const vars = {
   fontSizes: [
     `${pxToRem(12)}rem`, // [0]
     `${pxToRem(14)}rem`, // [1]
@@ -65,6 +57,90 @@ const theme = {
     lg: customMedia.greaterThan('lg'),
     xl: customMedia.greaterThan('xl'),
   },
+  control: {
+    height: `${pxToRem(40)}rem`,
+  },
+  transition: '0.4s ease-out',
 };
 
-export default theme;
+export const mainColor = '#120824';
+
+export const darkTheme = {
+  ...vars,
+  colors: {
+    baseText: [
+      '#fff', // [0]
+      chroma('#fff')
+        .alpha(0.4)
+        .hex(), // [1]
+      chroma('#fff')
+        .alpha(0.8)
+        .hex(), // [2]
+    ],
+    link: '#fff',
+    bg: mainColor,
+    logo: mainColor,
+    input: {
+      bg: 'transparent',
+      border: '#777',
+      forcus: {
+        bg: chroma(mainColor)
+          .brighten(2)
+          .alpha(0.1)
+          .hex(),
+        border: '#fff',
+      },
+    },
+    button: {
+      bg: 'transparent',
+      border: '#fff',
+      forcus: {
+        bg: chroma(mainColor)
+          .brighten(2)
+          .alpha(0.2)
+          .hex(),
+        border: '#fff',
+      },
+    },
+  },
+};
+
+export const lightTheme = {
+  ...vars,
+  colors: {
+    baseText: [
+      mainColor, // [0]
+      chroma(mainColor)
+        .alpha(0.4)
+        .hex(), // [1]
+      chroma(mainColor)
+        .alpha(0.8)
+        .hex(), // [2]
+    ],
+    link: mainColor,
+    bg: '#fff',
+    logo: mainColor,
+    input: {
+      bg: 'transparent',
+      border: '#777',
+      forcus: {
+        bg: chroma(mainColor)
+          .brighten(2)
+          .alpha(0.05)
+          .hex(),
+        border: mainColor,
+      },
+    },
+    button: {
+      bg: 'transparent',
+      border: mainColor,
+      forcus: {
+        bg: chroma(mainColor)
+          .brighten(2)
+          .alpha(0.2)
+          .hex(),
+        border: mainColor,
+      },
+    },
+  },
+};
diff --git a/src/types/styled-components.d.ts b/src/types/styled-components.d.ts
index c42ce9c..ab17e67 100644
--- a/src/types/styled-components.d.ts
+++ b/src/types/styled-components.d.ts
@@ -1,7 +1,7 @@
 import 'styled-components';
-import theme from '../styles/theme';
+import { darkTheme, lightTheme } from '../styles/theme';
 
-type Theme = typeof theme;
+type Theme = typeof darkTheme | lightTheme;
 declare module 'styled-components' {
   export interface DefaultTheme extends Theme {}
 }
diff --git a/yarn.lock b/yarn.lock
index 537b505..b75be2a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1551,13 +1551,6 @@
     string-width "^2.0.0"
     strip-ansi "^3"
 
-"@primer/octicons-react@^9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@primer/octicons-react/-/octicons-react-9.2.0.tgz#76446c36346fef67cbf91c78bd329c8f860c35d5"
-  integrity sha512-IWY8tJ6j40R5ks6KYORxVxBsmKax/ttXcH7SyHfku0IrYYc/3TSwaPhUDh9hGKDoyE9TUmrku101XJgCbfKhmg==
-  dependencies:
-    prop-types "^15.6.1"
-
 "@reach/router@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.2.1.tgz#34ae3541a5ac44fa7796e5506a5d7274a162be4e"
@@ -2115,6 +2108,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/chroma-js@^1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@types/chroma-js/-/chroma-js-1.4.3.tgz#4456e5cb46885a4952324e55a4b6d4064904790c"
+  integrity sha512-m33zg9cRLtuaUSzlbMrr7iLIKNzrD4+M6Unt5+9mCu4BhR5NwnRjVKblINCwzcBXooukIgld8DtEncP8qpvbNg==
+
 "@types/configstore@^2.1.1":
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/@types/configstore/-/configstore-2.1.1.tgz#cd1e8553633ad3185c3f2f239ecff5d2643e92b6"
@@ -4443,6 +4441,13 @@ chownr@^1.1.1, chownr@^1.1.3:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.3.tgz#42d837d5239688d55f303003a508230fa6727142"
   integrity sha512-i70fVHhmV3DtTl6nqvZOnIjbY0Pe4kAUjwHj8z0zAdgBtYrJyYwLKCCuRBQ5ppkyL0AkN7HKRnETdmdp1zqNXw==
 
+chroma-js@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-2.1.0.tgz#c0be48a21fe797ef8965608c1c4f911ef2da49d5"
+  integrity sha512-uiRdh4ZZy+UTPSrAdp8hqEdVb1EllLtTHOt5TMaOjJUvi+O54/83Fc5K2ld1P+TJX+dw5B+8/sCgzI6eaur/lg==
+  dependencies:
+    cross-env "^6.0.3"
+
 chrome-trace-event@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
@@ -5063,6 +5068,13 @@ create-react-context@^0.3.0:
     gud "^1.0.0"
     warning "^4.0.3"
 
+cross-env@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-6.0.3.tgz#4256b71e49b3a40637a0ce70768a6ef5c72ae941"
+  integrity sha512-+KqxF6LCvfhWvADcDPqo64yVIB31gv/jQulX2NGzKS/g3GEVz6/pt4wjHFtFWsHMddebWD/sDthJemzM4MaAag==
+  dependencies:
+    cross-spawn "^7.0.0"
+
 cross-fetch@2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-2.2.2.tgz#a47ff4f7fc712daba8f6a695a11c948440d45723"