diff --git a/.storybook/preview.js b/.storybook/preview.js
index d2b8396..f478437 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,16 +1,17 @@
 import ko from 'axe-core/locales/ko.json';
-// import React from 'react';
-// import { MemoryRouter } from 'react-router-dom';
-// import { GlobalStyle } from 'styles/GlobalStyle';
+import React from 'react';
+import { GlobalStyle } from 'styles/GlobalStyle';
+import { ThemeProvider } from '@emotion/react';
+import { theme } from 'theme/theme';
 
-// export const decorators = [
-//   (Story) => (
-//     <MemoryRouter>
-//       <GlobalStyle />
-//       <Story />
-//     </MemoryRouter>
-//   ),
-// ];
+export const decorators = [
+  (Story) => (
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <Story />
+    </ThemeProvider>
+  ),
+];
 
 export const parameters = {
   a11y: {
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
new file mode 100644
index 0000000..d2d8e60
--- /dev/null
+++ b/src/components/Button/Button.stories.tsx
@@ -0,0 +1,48 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { GiPerspectiveDiceSixFacesRandom } from 'react-icons/gi';
+import { Button } from './Button';
+
+export default {
+  title: 'Button',
+  component: Button,
+} as ComponentMeta<typeof Button>;
+
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+
+export const Default = Template.bind({});
+
+export const Outline = Template.bind({});
+
+Outline.args = {
+  variant: 'outlined',
+  color: 'primaryGreen',
+  children: (
+    <>
+      <GiPerspectiveDiceSixFacesRandom style={{ fontSize: '25px' }} />
+      REROLL
+    </>
+  ),
+  style: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '10px',
+  },
+  round: true,
+};
+
+export const Fill = Template.bind({});
+
+Fill.args = {
+  type: 'submit',
+  variant: 'filled',
+  color: 'primaryGreen',
+  children: 'Sign In',
+  round: true,
+};
+
+export const Transparent = Template.bind({});
+
+Transparent.args = {
+  variant: 'transparent',
+  children: 'Not registered yet? Sign up here!',
+};
diff --git a/src/components/Button/Button.styled.tsx b/src/components/Button/Button.styled.tsx
new file mode 100644
index 0000000..1ddf08d
--- /dev/null
+++ b/src/components/Button/Button.styled.tsx
@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+import { StyledButtonProps } from './Button.types';
+
+export const StyledButton = styled.button<StyledButtonProps>`
+  padding: 10px;
+  border: none;
+  background: none;
+  border-radius: ${({ round }) => round && '30px'};
+`;
+
+export const StyledOutlineButton = styled(StyledButton)`
+  border: 1px solid currentColor;
+  color: ${({ color, theme }) => theme.color[color]};
+`;
+
+export const StyledFillButton = styled(StyledButton)`
+  background-color: ${({ color, theme }) => theme.color[color]};
+  color: ${({ theme }) => theme.color.white};
+`;
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
new file mode 100644
index 0000000..d38be24
--- /dev/null
+++ b/src/components/Button/Button.tsx
@@ -0,0 +1,33 @@
+import { ButtonProps, StyledButtonProps } from './Button.types';
+import { StyledButton, StyledOutlineButton, StyledFillButton } from './Button.styled';
+
+const renderButton = ({ type, round = false, color, style, variant, children, ...restProps }: ButtonProps) => {
+  const props: StyledButtonProps = { type, round, color, style };
+
+  switch (variant) {
+    case 'transparent':
+      return (
+        <StyledButton {...props} {...restProps}>
+          {children}
+        </StyledButton>
+      );
+    case 'outlined':
+      return (
+        <StyledOutlineButton {...props} {...restProps}>
+          {children}
+        </StyledOutlineButton>
+      );
+    case 'filled':
+      return (
+        <StyledFillButton {...props} {...restProps}>
+          {children}
+        </StyledFillButton>
+      );
+    default:
+      return null;
+  }
+};
+
+export const Button = (props: ButtonProps) => {
+  return renderButton(props);
+};
diff --git a/src/components/Button/Button.types.ts b/src/components/Button/Button.types.ts
new file mode 100644
index 0000000..a513ea2
--- /dev/null
+++ b/src/components/Button/Button.types.ts
@@ -0,0 +1,31 @@
+type Type = 'button' | 'submit';
+type Variant = 'transparent' | 'outlined' | 'filled';
+type Color = 'primaryGreen' | 'primaryOrange' | 'white' | 'black';
+type IconType = 'search' | 'user' | 'heart' | 'close' | 'cart' | 'link' | 'bookmark' | 'bookmarkFill' | 'up';
+type Size = 'small' | 'large';
+
+export interface StyledButtonProps {
+  type: Type;
+  round?: boolean;
+  color: Color;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export interface ButtonProps extends StyledButtonProps {
+  variant: Variant;
+  children: React.ReactNode;
+}
+
+export interface StyledIconButtonProps {
+  type: Type;
+  ariaLabel: string;
+  circle: boolean;
+  color: Color;
+  size: Size;
+}
+
+export interface IconButtonProps extends StyledIconButtonProps {
+  iconType: IconType;
+  variant: Variant;
+}
diff --git a/src/components/Button/IconButton.stories.tsx b/src/components/Button/IconButton.stories.tsx
new file mode 100644
index 0000000..cab1eca
--- /dev/null
+++ b/src/components/Button/IconButton.stories.tsx
@@ -0,0 +1,71 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { IconButton } from './IconButton';
+
+export default {
+  title: 'IconButton',
+  component: IconButton,
+} as ComponentMeta<typeof IconButton>;
+
+const Template: ComponentStory<typeof IconButton> = (args) => <IconButton {...args} />;
+
+export const Default = Template.bind({});
+
+export const Search = Template.bind({});
+
+Search.args = {
+  type: 'submit',
+  ariaLabel: 'search',
+  iconType: 'search',
+  variant: 'transparent',
+  color: 'black',
+  size: 'small',
+};
+
+export const Link = Template.bind({});
+Link.decorators = [
+  (Story) => (
+    <div style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
+      <Story />
+    </div>
+  ),
+];
+
+Link.args = {
+  type: 'button',
+  ariaLabel: 'copy link',
+  iconType: 'link',
+  variant: 'transparent',
+  color: 'white',
+  size: 'large',
+};
+
+export const Fill = Template.bind({});
+
+Fill.args = {
+  type: 'button',
+  ariaLabel: 'cart',
+  iconType: 'cart',
+  variant: 'filled',
+  color: 'primaryGreen',
+  size: 'large',
+  circle: true,
+};
+
+export const Outline = Template.bind({});
+Outline.decorators = [
+  (Story) => (
+    <div style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
+      <Story />
+    </div>
+  ),
+];
+
+Outline.args = {
+  type: 'button',
+  ariaLabel: 'heart',
+  iconType: 'heart',
+  variant: 'outlined',
+  color: 'white',
+  size: 'large',
+  circle: true,
+};
diff --git a/src/components/Button/IconButton.styled.tsx b/src/components/Button/IconButton.styled.tsx
new file mode 100644
index 0000000..32f817a
--- /dev/null
+++ b/src/components/Button/IconButton.styled.tsx
@@ -0,0 +1,42 @@
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { StyledIconButtonProps } from './Button.types';
+
+const sizes = {
+  small: {
+    width: '24px',
+    height: '24px',
+    fontSize: '16px',
+  },
+  large: {
+    width: '50px',
+    height: '50px',
+    fontSize: '32px',
+  },
+};
+
+export const StyledButton = styled.button<StyledIconButtonProps>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  border: none;
+  background: none;
+  border-radius: ${({ circle }) => circle && '50%'};
+  color: ${({ color, theme }) => theme.color[color]};
+
+  ${({ size }) => css`
+    width: ${sizes[size].width};
+    height: ${sizes[size].height};
+    font-size: ${sizes[size].fontSize};
+  `}
+`;
+
+export const StyledOutlineButton = styled(StyledButton)`
+  border: 1px solid currentColor;
+`;
+
+export const StyledFillButton = styled(StyledButton)`
+  background-color: ${({ color, theme }) => theme.color[color]};
+  color: ${({ theme }) => theme.color.white};
+`;
diff --git a/src/components/Button/IconButton.tsx b/src/components/Button/IconButton.tsx
new file mode 100644
index 0000000..f1b312e
--- /dev/null
+++ b/src/components/Button/IconButton.tsx
@@ -0,0 +1,72 @@
+import { FiSearch } from 'react-icons/fi';
+import { FaArrowUp } from 'react-icons/fa';
+import { BsPersonCircle, BsCartCheckFill, BsLink45Deg, BsBookmark, BsFillBookmarkFill } from 'react-icons/bs';
+import { HiHeart } from 'react-icons/hi';
+import { MdClose } from 'react-icons/md';
+import { StyledButton, StyledOutlineButton, StyledFillButton } from './IconButton.styled';
+import { IconButtonProps, StyledIconButtonProps } from './Button.types';
+
+const renderIcon = (iconType: IconButtonProps['iconType']) => {
+  switch (iconType) {
+    case 'search':
+      return <FiSearch />;
+    case 'user':
+      return <BsPersonCircle />;
+    case 'heart':
+      return <HiHeart />;
+    case 'close':
+      return <MdClose />;
+    case 'cart':
+      return <BsCartCheckFill />;
+    case 'link':
+      return <BsLink45Deg />;
+    case 'bookmarkFill':
+      return <BsFillBookmarkFill />;
+    case 'bookmark':
+      return <BsBookmark />;
+    case 'up':
+      return <FaArrowUp />;
+    default:
+      return null;
+  }
+};
+
+const renderButton = ({
+  type,
+  ariaLabel,
+  iconType,
+  circle = false,
+  variant,
+  color,
+  size,
+  ...restProps
+}: IconButtonProps) => {
+  const props: StyledIconButtonProps = { type, ariaLabel, circle, color, size };
+
+  switch (variant) {
+    case 'transparent':
+      return (
+        <StyledButton aria-label={ariaLabel} {...props} {...restProps}>
+          {renderIcon(iconType)}
+        </StyledButton>
+      );
+    case 'outlined':
+      return (
+        <StyledOutlineButton aria-label={ariaLabel} {...props} {...restProps}>
+          {renderIcon(iconType)}
+        </StyledOutlineButton>
+      );
+    case 'filled':
+      return (
+        <StyledFillButton aria-label={ariaLabel} {...props} {...restProps}>
+          {renderIcon(iconType)}
+        </StyledFillButton>
+      );
+    default:
+      return null;
+  }
+};
+
+export const IconButton = (props: IconButtonProps) => {
+  return renderButton(props);
+};
diff --git a/src/components/Logo/Logo.stories.tsx b/src/components/Logo/Logo.stories.tsx
new file mode 100644
index 0000000..f15f5e9
--- /dev/null
+++ b/src/components/Logo/Logo.stories.tsx
@@ -0,0 +1,11 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Logo } from './Logo';
+
+export default {
+  title: 'Logo',
+  component: Logo,
+} as ComponentMeta<typeof Logo>;
+
+const Template: ComponentStory<typeof Logo> = () => <Logo />;
+
+export const Default = Template.bind({});
diff --git a/src/components/Logo/Logo.styled.tsx b/src/components/Logo/Logo.styled.tsx
new file mode 100644
index 0000000..46bafb7
--- /dev/null
+++ b/src/components/Logo/Logo.styled.tsx
@@ -0,0 +1,23 @@
+import styled from '@emotion/styled';
+import { pxToRem, media } from 'utils';
+import { LogoIcon } from './LogoIcon';
+
+export const StyledA = styled.a`
+  display: flex;
+  font-size: ${pxToRem(24)};
+  align-items: center;
+`;
+
+export const StyledIcon = styled(LogoIcon)`
+  margin: 10px;
+`;
+
+export const StyledSpan = styled.span`
+  width: 130px;
+  transition: 400ms width ease;
+
+  ${media.mobile} {
+    width: 0;
+    overflow: hidden;
+  }
+`;
diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
new file mode 100644
index 0000000..12e345e
--- /dev/null
+++ b/src/components/Logo/Logo.tsx
@@ -0,0 +1,15 @@
+import Link from 'next/link';
+import { StyledA, StyledIcon, StyledSpan } from './Logo.styled';
+
+export const Logo = () => {
+  return (
+    <h1>
+      <Link href="/">
+        <StyledA>
+          <StyledIcon />
+          <StyledSpan>TwoSpoon</StyledSpan>
+        </StyledA>
+      </Link>
+    </h1>
+  );
+};
diff --git a/src/components/Logo/LogoIcon.tsx b/src/components/Logo/LogoIcon.tsx
new file mode 100644
index 0000000..5f61fc6
--- /dev/null
+++ b/src/components/Logo/LogoIcon.tsx
@@ -0,0 +1,13 @@
+export const LogoIcon = () => {
+  return (
+    <svg width="1.4em" height="1.4em" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="26" cy="26" r="26" fill="#529715" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.1108 47.3173C8.61149 45.5684 6.43396 43.3912 4.68472 40.8921L17.0248 29.8215C15.0217 25.9821 15.4634 21.358 19.2184 17.6024C24.0093 12.8031 32.38 11.2338 36.5691 15.4313C40.7659 19.6211 39.1969 27.9932 34.3984 32.7849C30.6434 36.5405 26.0201 36.9824 22.1813 34.9789L11.1108 47.3173Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/index.ts b/src/components/index.ts
index 4dd0b8f..d174563 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,2 +1,3 @@
 export * from './CookingInfo/CookingInfo';
+export * from './Logo/Logo';
 export * from './Loading/Loading';
diff --git a/src/utils/style.ts b/src/utils/style.ts
index a2116ab..6c6764f 100644
--- a/src/utils/style.ts
+++ b/src/utils/style.ts
@@ -1,3 +1,7 @@
 export const pxToRem = (px: number, base = 16): string => {
   return `${px / base}rem`;
 };
+
+export const media = {
+  mobile: '@media(max-width:767px)',
+};