diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 7298d6b..09f8ea2 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -5,6 +5,7 @@ import { Link } from 'gatsby';
 
 import { colors, heights, widths } from 'styles/variables';
 import Container from 'components/Container';
+import IconSearch from 'components/icons/IconSearch';
 import logo from 'images/logo.svg';
 import getEmSize from 'styles/getEmSize';
 
@@ -31,6 +32,10 @@ const HomepageLink = styled(Link)({
   },
 });
 
+const SearchLink = styled(Link)({
+  justifyContent: 'flex-end',
+});
+
 const Logo = styled.img({
   width: 45,
 });
@@ -41,6 +46,9 @@ const Header: React.FC = () => (
       <HomepageLink to="/">
         <Logo src={logo} alt="Zap" />
       </HomepageLink>
+      <SearchLink to="/search">
+        <IconSearch />
+      </SearchLink>
     </HeaderInner>
   </StyledHeader>
 );
diff --git a/src/components/Container.tsx b/src/components/containers/PostsContainer.tsx
similarity index 81%
rename from src/components/Container.tsx
rename to src/components/containers/PostsContainer.tsx
index 57f710b..4df6e39 100644
--- a/src/components/Container.tsx
+++ b/src/components/containers/PostsContainer.tsx
@@ -17,8 +17,8 @@ interface ContainerProps {
   children?: ReactNode;
 }
 
-const Container: React.FC<ContainerProps> = ({ children, className }) => (
+const PostsContainer: React.FC<ContainerProps> = ({ children, className }) => (
   <StyledContainer className={className}>{children}</StyledContainer>
 );
 
-export default Container;
+export default PostsContainer;
diff --git a/src/components/containers/SearchContainer.tsx b/src/components/containers/SearchContainer.tsx
new file mode 100644
index 0000000..ea03673
--- /dev/null
+++ b/src/components/containers/SearchContainer.tsx
@@ -0,0 +1,24 @@
+import React, { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+import { widths } from 'styles/variables';
+import getEmSize from 'styles/getEmSize';
+
+const StyledContainer = styled.div({
+  position: 'relative',
+  marginLeft: 'auto',
+  marginRight: 'auto',
+  width: 'auto',
+  maxWidth: `${getEmSize(widths.md)}em`,
+});
+
+interface ContainerProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const SearchContainer: React.FC<ContainerProps> = ({ children, className }) => (
+  <StyledContainer className={className}>{children}</StyledContainer>
+);
+
+export default SearchContainer;
diff --git a/src/components/icons/SearchIcon.tsx b/src/components/icons/SearchIcon.tsx
new file mode 100644
index 0000000..91816be
--- /dev/null
+++ b/src/components/icons/SearchIcon.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import { colors } from 'styles/variables';
+
+const Container = styled.svg({
+  width: 28,
+  height: 28,
+})
+
+const Icon = styled.path({
+  color: colors.light.fg.primary,
+})
+
+const IconSearch: React.FC = () => (
+  <Container>
+    <Icon
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M18.4475 17.3825H19.6325L27.1175 24.8825L24.8825 27.1175L17.3825 19.6325V18.4475L16.9775 18.0275C15.2675 19.4975 13.0475 20.3825 10.6325 20.3825C5.24751 20.3825 0.882507 16.0175 0.882507 10.6325C0.882507 5.24751 5.24751 0.882507 10.6325 0.882507C16.0175 0.882507 20.3825 5.24751 20.3825 10.6325C20.3825 13.0475 19.4975 15.2675 18.0275 16.9775L18.4475 17.3825ZM3.88251 10.6325C3.88251 14.3675 6.89751 17.3825 10.6325 17.3825C14.3675 17.3825 17.3825 14.3675 17.3825 10.6325C17.3825 6.89751 14.3675 3.88251 10.6325 3.88251C6.89751 3.88251 3.88251 6.89751 3.88251 10.6325Z" />
+  </Container>
+);
+
+export default IconSearch;
\ No newline at end of file
diff --git a/src/components/search/SearchPanel.tsx b/src/components/search/SearchPanel.tsx
new file mode 100644
index 0000000..62c99b3
--- /dev/null
+++ b/src/components/search/SearchPanel.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { colors, dimensions } from 'styles/variables';
+
+const Container = styled.div({
+  borderBottomWidth: 2,
+  borderBottomColor: colors.light.fg.primary,
+});
+
+const SearchInput = styled.input({
+  height: 48,
+  color: colors.light.fg.primary,
+  fontSize: dimensions.headingSizes.h3,
+  fontWeight: 600,
+  padding: 4,
+  lineHeight: 48,
+  outline: 'none',
+  boxSizing: 'border-box',
+});
+
+const SearchPanel: React.FC = () => (
+  <Container>
+    <SearchInput />
+  </Container>
+);
+
+export default SearchPanel;
diff --git a/src/pages/search.tsx b/src/pages/search.tsx
new file mode 100644
index 0000000..5157305
--- /dev/null
+++ b/src/pages/search.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+
+import Page from 'components/Page';
+import IndexLayout from 'layouts/IndexLayout';
+import Article from 'components/articles/Article';
+import { graphql, useStaticQuery } from 'gatsby';
+import SearchContainer from 'components/containers/SearchContainer';
+import SearchPanel from 'components/search/SearchPanel';
+
+const SearchPage: React.FC = () => {
+  const data = useStaticQuery<GatsbyTypes.Query>(graphql`
+    query {
+      allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
+        edges {
+          node {
+            id
+            excerpt(pruneLength: 120)
+            frontmatter {
+              date(formatString: "YYYY-MM-DD")
+              title
+              image {
+                src {
+                  publicURL
+                  childImageSharp {
+                    fluid(maxWidth: 320) {
+                      ...GatsbyImageSharpFluid
+                    }
+                  }
+                }
+                alt
+              }
+            }
+            fields {
+              slug
+            }
+          }
+        }
+      }
+    }
+  `);
+  const Posts = data.allMarkdownRemark.edges.map(({ node }) => (
+    <Article key={node.id} post={node} />
+  ));
+  return (
+    <IndexLayout>
+      <Page>
+        <SearchPanel />
+        <SearchContainer>{Posts}</SearchContainer>
+      </Page>
+    </IndexLayout>
+  );
+};
+
+export default SearchPage;