diff --git a/{{cookiecutter.project_dirname}}/__tests__/components/commons/Button.test.tsx b/{{cookiecutter.project_dirname}}/__tests__/components/commons/Button.test.tsx
deleted file mode 100644
index 85137e0..0000000
--- a/{{cookiecutter.project_dirname}}/__tests__/components/commons/Button.test.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { expect } from '@jest/globals'
-import { screen } from '@testing-library/react'
-import React from 'react'
-
-import { Button } from '@/src/components/commons/Button'
-import { renderWithWrappers } from '@/__tests__/functions'
-
-const solidSetup = () => renderWithWrappers(<Button />)
-
-test('Solid button renders correctly', () => {
-  solidSetup()
-  const button = window.getComputedStyle(screen.getByRole('button'))
-  expect(button.backgroundColor).toBe('rgb(49, 108, 244)')
-  expect(button.color).toBe('rgb(241, 249, 255)')
-})
diff --git a/{{cookiecutter.project_dirname}}/__tests__/components/commons/Input.test.tsx b/{{cookiecutter.project_dirname}}/__tests__/components/commons/Input.test.tsx
deleted file mode 100644
index afd5613..0000000
--- a/{{cookiecutter.project_dirname}}/__tests__/components/commons/Input.test.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { expect } from '@jest/globals'
-import { screen } from '@testing-library/react'
-import React from 'react'
-
-import { Input, InputWithErrors } from '@/src/components/commons/Input'
-import { renderWithWrappers } from '@/__tests__/functions'
-
-describe('Input components', () => {
-  describe('<InputWithErrors />', () => {
-    const setup = () =>
-      renderWithWrappers(
-        <InputWithErrors
-          placeholder='some-placeholder'
-          errors={['This field may not be blank.']}
-        />
-      )
-
-    const setupWithNoErrors = () =>
-      renderWithWrappers(<Input placeholder='some-placeholder' />)
-
-    test('should render input', () => {
-      setup()
-      screen.getByPlaceholderText(/some-placeholder/i)
-      expect(screen.getByText('This field may not be blank.')).toBeTruthy()
-    })
-
-    test('should render input without error', () => {
-      setupWithNoErrors()
-      const input: HTMLInputElement =
-        screen.getByPlaceholderText(/some-placeholder/i)
-      expect(input.value).toBe('')
-    })
-  })
-})
diff --git a/{{cookiecutter.project_dirname}}/__tests__/components/commons/Typography.test.tsx b/{{cookiecutter.project_dirname}}/__tests__/components/commons/Typography.test.tsx
deleted file mode 100644
index 2c77687..0000000
--- a/{{cookiecutter.project_dirname}}/__tests__/components/commons/Typography.test.tsx
+++ /dev/null
@@ -1,296 +0,0 @@
-import { expect } from '@jest/globals'
-import { screen } from '@testing-library/react'
-import React from 'react'
-
-import { renderWithWrappers } from '@/__tests__/functions'
-import { H1, H2, H3, H4, Text } from '@/src/components/commons/Typography'
-
-describe('Titles', () => {
-  describe('H1', () => {
-    it('Normal H1 renders correctly', () => {
-      renderWithWrappers(<H1.Normal>MainTitle</H1.Normal>)
-      screen.getByText('MainTitle')
-    })
-    it('Normal H1 renders correctly with style props', () => {
-      renderWithWrappers(
-        <H1.Normal uppercase italic color='red'>
-          MainTitle
-        </H1.Normal>
-      )
-      const compiledMainTitle = window.getComputedStyle(
-        screen.getByText('MainTitle')
-      )
-      expect(compiledMainTitle.textTransform).toBe('uppercase')
-      expect(compiledMainTitle.fontStyle).toBe('italic')
-      expect(compiledMainTitle.color).toBe('red')
-      expect(compiledMainTitle.fontWeight).toBe('500')
-      expect(compiledMainTitle.fontSize).toBe('40px')
-    })
-    it('Big H1 renders correctly', () => {
-      renderWithWrappers(<H1.Big>MainTitle</H1.Big>)
-      screen.getByText('MainTitle')
-    })
-    it('Big H1 renders correctly with style props', () => {
-      renderWithWrappers(
-        <H1.Big uppercase italic color='red'>
-          MainTitle
-        </H1.Big>
-      )
-      const compiledMainTitle = window.getComputedStyle(
-        screen.getByText('MainTitle')
-      )
-      expect(compiledMainTitle.textTransform).toBe('uppercase')
-      expect(compiledMainTitle.fontStyle).toBe('italic')
-      expect(compiledMainTitle.color).toBe('red')
-      expect(compiledMainTitle.fontWeight).toBe('500')
-      expect(compiledMainTitle.fontSize).toBe('50px')
-    })
-    it('Medium H1 renders correctly', () => {
-      renderWithWrappers(<H1.Medium>MainTitle</H1.Medium>)
-      screen.getByText('MainTitle')
-    })
-    it('Medium H1 renders correctly with style props', () => {
-      renderWithWrappers(
-        <H1.Medium uppercase italic color='red'>
-          MainTitle
-        </H1.Medium>
-      )
-      const compiledMainTitle = window.getComputedStyle(
-        screen.getByText('MainTitle')
-      )
-      expect(compiledMainTitle.textTransform).toBe('uppercase')
-      expect(compiledMainTitle.fontStyle).toBe('italic')
-      expect(compiledMainTitle.color).toBe('red')
-      expect(compiledMainTitle.fontWeight).toBe('500')
-      expect(compiledMainTitle.fontSize).toBe('45px')
-    })
-  })
-  describe('H2', () => {
-    it('Normal H2 renders correctly', () => {
-      renderWithWrappers(<H2.Normal>MainTitle</H2.Normal>)
-      screen.getByText('MainTitle')
-    })
-    it('Normal H2 renders correctly with style props', () => {
-      renderWithWrappers(
-        <H2.Normal uppercase italic color='red'>
-          MainTitle
-        </H2.Normal>
-      )
-      const compiledMainTitle = window.getComputedStyle(
-        screen.getByText('MainTitle')
-      )
-      expect(compiledMainTitle.textTransform).toBe('uppercase')
-      expect(compiledMainTitle.fontStyle).toBe('italic')
-      expect(compiledMainTitle.color).toBe('red')
-      expect(compiledMainTitle.fontWeight).toBe('500')
-      expect(compiledMainTitle.fontSize).toBe('32px')
-    })
-  })
-  describe('H3', () => {
-    it('H3 renders correctly', () => {
-      renderWithWrappers(<H3.Normal>MainTitle</H3.Normal>)
-      screen.getByText('MainTitle')
-    })
-    it('H3 renders correctly with style props', () => {
-      renderWithWrappers(
-        <H3.Normal uppercase italic color='red'>
-          MainTitle
-        </H3.Normal>
-      )
-      const compiledMainTitle = window.getComputedStyle(
-        screen.getByText('MainTitle')
-      )
-      expect(compiledMainTitle.textTransform).toBe('uppercase')
-      expect(compiledMainTitle.fontStyle).toBe('italic')
-      expect(compiledMainTitle.color).toBe('red')
-      expect(compiledMainTitle.fontWeight).toBe('500')
-      expect(compiledMainTitle.fontSize).toBe('24px')
-    })
-  })
-  describe('H4', () => {
-    it('H4 renders correctly', () => {
-      renderWithWrappers(<H4.Normal>MainTitle</H4.Normal>)
-      screen.getByText('MainTitle')
-    })
-    it('H4 renders correctly with style props', () => {
-      renderWithWrappers(
-        <H4.Normal uppercase italic color='red'>
-          MainTitle
-        </H4.Normal>
-      )
-      const compiledMainTitle = window.getComputedStyle(
-        screen.getByText('MainTitle')
-      )
-      expect(compiledMainTitle.textTransform).toBe('uppercase')
-      expect(compiledMainTitle.fontStyle).toBe('italic')
-      expect(compiledMainTitle.color).toBe('red')
-      expect(compiledMainTitle.fontWeight).toBe('500')
-      expect(compiledMainTitle.fontSize).toBe('20px')
-    })
-  })
-})
-
-describe('Text', () => {
-  describe('Normal', () => {
-    it('Normal Text renders correctly', () => {
-      renderWithWrappers(<Text.Normal>MainParagraph</Text.Normal>)
-      screen.getByText('MainParagraph')
-    })
-    it('Normal Text renders correctly with style props', () => {
-      renderWithWrappers(
-        <Text.Normal uppercase italic color='red'>
-          MainParagraph
-        </Text.Normal>
-      )
-      const compiledMainTitle = window.getComputedStyle(
-        screen.getByText('MainParagraph')
-      )
-      expect(compiledMainTitle.textTransform).toBe('uppercase')
-      expect(compiledMainTitle.fontStyle).toBe('italic')
-      expect(compiledMainTitle.color).toBe('red')
-      expect(compiledMainTitle.fontWeight).toBe('400')
-      expect(compiledMainTitle.fontSize).toBe('16px')
-
-      expect(compiledMainTitle.fontSize).toBe('16px')
-    })
-    it('NormalBold Text renders correctly', () => {
-      renderWithWrappers(<Text.NormalBold>MainParagraph</Text.NormalBold>)
-      screen.getByText('MainParagraph')
-    })
-    it('NormalBold Text renders correctly with style props', () => {
-      renderWithWrappers(
-        <Text.NormalBold uppercase italic color='red'>
-          MainParagraph
-        </Text.NormalBold>
-      )
-      const compiledMainTitle = window.getComputedStyle(
-        screen.getByText('MainParagraph')
-      )
-      expect(compiledMainTitle.textTransform).toBe('uppercase')
-      expect(compiledMainTitle.fontStyle).toBe('italic')
-      expect(compiledMainTitle.color).toBe('red')
-      expect(compiledMainTitle.fontWeight).toBe('700')
-      expect(compiledMainTitle.fontSize).toBe('16px')
-    })
-  })
-  describe('Small', () => {
-    it('Small Text renders correctly', () => {
-      renderWithWrappers(<Text.Small>MainParagraph</Text.Small>)
-      screen.getByText('MainParagraph')
-    })
-    it('Small Text renders correctly with style props', () => {
-      renderWithWrappers(
-        <Text.Small uppercase italic color='red'>
-          MainParagraph
-        </Text.Small>
-      )
-      const compiledMainTitle = window.getComputedStyle(
-        screen.getByText('MainParagraph')
-      )
-      expect(compiledMainTitle.textTransform).toBe('uppercase')
-      expect(compiledMainTitle.fontStyle).toBe('italic')
-      expect(compiledMainTitle.color).toBe('red')
-      expect(compiledMainTitle.fontWeight).toBe('400')
-      expect(compiledMainTitle.fontSize).toBe('10px')
-    })
-    it('SmallBold Text renders correctly', () => {
-      renderWithWrappers(<Text.SmallBold>MainParagraph</Text.SmallBold>)
-      screen.getByText('MainParagraph')
-    })
-    it('SmallBold Text renders correctly with style props', () => {
-      renderWithWrappers(
-        <Text.SmallBold uppercase italic color='red'>
-          MainParagraph
-        </Text.SmallBold>
-      )
-      const compiledMainTitle = window.getComputedStyle(
-        screen.getByText('MainParagraph')
-      )
-      expect(compiledMainTitle.textTransform).toBe('uppercase')
-      expect(compiledMainTitle.fontStyle).toBe('italic')
-      expect(compiledMainTitle.color).toBe('red')
-      expect(compiledMainTitle.fontWeight).toBe('500')
-      expect(compiledMainTitle.fontSize).toBe('10px')
-    })
-  })
-  describe('Medium', () => {
-    it('Medium Text renders correctly', () => {
-      renderWithWrappers(<Text.Medium>MainParagraph</Text.Medium>)
-      screen.getByText('MainParagraph')
-    })
-    it('Medium Text renders correctly with style props', () => {
-      renderWithWrappers(
-        <Text.Medium uppercase italic color='red'>
-          MainParagraph
-        </Text.Medium>
-      )
-      const compiledMainTitle = window.getComputedStyle(
-        screen.getByText('MainParagraph')
-      )
-      expect(compiledMainTitle.textTransform).toBe('uppercase')
-      expect(compiledMainTitle.fontStyle).toBe('italic')
-      expect(compiledMainTitle.color).toBe('red')
-      expect(compiledMainTitle.fontWeight).toBe('400')
-      expect(compiledMainTitle.fontSize).toBe('12px')
-    })
-    it('MediumBold Text renders correctly', () => {
-      renderWithWrappers(<Text.MediumBold>MainParagraph</Text.MediumBold>)
-      screen.getByText('MainParagraph')
-    })
-    it('MediumBold Text renders correctly with style props', () => {
-      renderWithWrappers(
-        <Text.MediumBold uppercase italic color='red'>
-          MainParagraph
-        </Text.MediumBold>
-      )
-      const compiledMainTitle = window.getComputedStyle(
-        screen.getByText('MainParagraph')
-      )
-      expect(compiledMainTitle.textTransform).toBe('uppercase')
-      expect(compiledMainTitle.fontStyle).toBe('italic')
-      expect(compiledMainTitle.color).toBe('red')
-      expect(compiledMainTitle.fontWeight).toBe('700')
-      expect(compiledMainTitle.fontSize).toBe('12px')
-    })
-  })
-  describe('Big', () => {
-    it('Big Text renders correctly', () => {
-      renderWithWrappers(<Text.Big>MainParagraph</Text.Big>)
-      screen.getByText('MainParagraph')
-    })
-    it('Big Text renders correctly with style props', () => {
-      renderWithWrappers(
-        <Text.Big uppercase italic color='red'>
-          MainParagraph
-        </Text.Big>
-      )
-      const compiledMainTitle = window.getComputedStyle(
-        screen.getByText('MainParagraph')
-      )
-      expect(compiledMainTitle.textTransform).toBe('uppercase')
-      expect(compiledMainTitle.fontStyle).toBe('italic')
-      expect(compiledMainTitle.color).toBe('red')
-      expect(compiledMainTitle.fontWeight).toBe('400')
-      expect(compiledMainTitle.fontSize).toBe('18px')
-    })
-    it('BigBold Text renders correctly', () => {
-      renderWithWrappers(<Text.BigBold>MainParagraph</Text.BigBold>)
-      screen.getByText('MainParagraph')
-    })
-    it('BigBold Text renders correctly with style props', () => {
-      renderWithWrappers(
-        <Text.BigBold uppercase italic color='red'>
-          MainParagraph
-        </Text.BigBold>
-      )
-      const compiledMainTitle = window.getComputedStyle(
-        screen.getByText('MainParagraph')
-      )
-      expect(compiledMainTitle.textTransform).toBe('uppercase')
-      expect(compiledMainTitle.fontStyle).toBe('italic')
-      expect(compiledMainTitle.color).toBe('red')
-      expect(compiledMainTitle.fontWeight).toBe('700')
-      expect(compiledMainTitle.fontSize).toBe('18px')
-    })
-  })
-})
diff --git a/{{cookiecutter.project_dirname}}/package.json b/{{cookiecutter.project_dirname}}/package.json
index a0a684f..273deec 100644
--- a/{{cookiecutter.project_dirname}}/package.json
+++ b/{{cookiecutter.project_dirname}}/package.json
@@ -7,7 +7,7 @@
     "build": "next build",
     "ci:contract-test": "npx jest pact/contracts --testEnvironment=node --color --detectOpenHandles --passWithNoTests",
     "ci:unit-test": "npx jest --color --silent --detectOpenHandles --testPathIgnorePatterns=pact/contracts --coverage --coverageDirectory ./coverage/tests --ci --reporters=default --reporters=jest-junit",
-    "e2e": "CYPRESS_BASE_URL=https://localhost:3000 cypress open",
+    "e2e": "CYPRESS_BASE_URL=http://localhost:3000 cypress open",
     "lint": "next lint",
     "pact": "npx jest pact/contracts --testEnvironment=node --detectOpenHandles",
     "start": "node server.js",
diff --git a/{{cookiecutter.project_dirname}}/src/components/commons/Button.tsx b/{{cookiecutter.project_dirname}}/src/components/commons/Button.tsx
deleted file mode 100644
index a7d8272..0000000
--- a/{{cookiecutter.project_dirname}}/src/components/commons/Button.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import styled from 'styled-components'
-
-export const Button = styled.button`
-  align-items: center;
-  background-color: ${({ theme }) => theme.colors.link};
-  border: 0;
-  border-radius: 5px;
-  color: ${({ theme }) => theme.colors.ui1};
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  min-width: 120px;
-  outline: none;
-  padding: 10px;
-  transition: 0.3s background-color ease-in-out;
-  width: fit-content;
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.4;
-  }
-  &:hover {
-    background-color: ${({ theme }) => theme.colors.activeLink};
-  }
-`
diff --git a/{{cookiecutter.project_dirname}}/src/components/commons/Input.tsx b/{{cookiecutter.project_dirname}}/src/components/commons/Input.tsx
deleted file mode 100644
index a167f02..0000000
--- a/{{cookiecutter.project_dirname}}/src/components/commons/Input.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-type Props = JSX.IntrinsicElements['input'] & {
-  errors?: string[]
-}
-
-const InputWithErrors = ({
-  errors,
-  max,
-  min,
-  onChange,
-  placeholder,
-  required,
-  step,
-  style,
-  type,
-  value
-}: Props) => {
-  return (
-    <InputContainer style={style}>
-      <Input
-        errors={errors && errors.length > 0}
-        max={max}
-        min={min}
-        onChange={onChange}
-        placeholder={placeholder}
-        required={required}
-        step={step}
-        type={type}
-        value={value}
-      />
-      {errors && errors.length > 0 && errors.map(err => <p key={err}>{err}</p>)}
-    </InputContainer>
-  )
-}
-
-const Input = styled.input<{ errors?: boolean }>`
-  border: 1px solid black;
-  box-sizing: border-box;
-  border-radius: 6px;
-  padding: 10px 20px;
-  font-style: normal;
-  font-size: 16px;
-  line-height: 19px;
-  ::placeholder {
-    font-style: italic;
-  }
-`
-
-const InputContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 25px;
-  p {
-    font-size: 12px;
-    margin-left: 10px;
-    color: ${({ theme }) => theme.colors.status.error};
-  }
-`
-
-export { Input, InputWithErrors }
diff --git a/{{cookiecutter.project_dirname}}/src/components/commons/Typography.tsx b/{{cookiecutter.project_dirname}}/src/components/commons/Typography.tsx
deleted file mode 100644
index b7facc9..0000000
--- a/{{cookiecutter.project_dirname}}/src/components/commons/Typography.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import styled from 'styled-components'
-
-type BaseTextProps = {
-  color?: string
-  italic?: boolean
-  margin?: string
-  uppercase?: boolean
-  weight?: 'bold' | 'normal'
-}
-
-const GenericTitle = styled.h1<BaseTextProps>`
-  color: ${({ color }) => color};
-  margin: ${({ margin }) => margin || 0};
-  text-transform: ${({ uppercase }) => (uppercase ? 'uppercase' : 'none')};
-  ${({ italic }) => italic && 'font-style: italic;'};
-`
-
-export const H1 = {
-  Normal: styled(GenericTitle)`
-    font-size: ${({ theme }) => theme.titles.h1.normal.fontSize};
-    font-weight: ${({ theme }) => theme.titles.h1.normal.fontWeight};
-  `,
-  Big: styled(GenericTitle)`
-    font-size: ${({ theme }) => theme.titles.h1.big.fontSize};
-    font-weight: ${({ theme }) => theme.titles.h1.big.fontWeight};
-  `,
-  Medium: styled(GenericTitle)`
-    font-size: ${({ theme }) => theme.titles.h1.medium.fontSize};
-    font-weight: ${({ theme }) => theme.titles.h1.medium.fontWeight};
-  `
-}
-
-export const H2 = {
-  Normal: styled(GenericTitle).attrs({ as: 'h2' })`
-    font-size: ${({ theme }) => theme.titles.h2.normal.fontSize};
-    font-weight: ${({ theme }) => theme.titles.h2.normal.fontWeight};
-  `
-}
-
-export const H3 = {
-  Normal: styled(GenericTitle).attrs({ as: 'h3' })`
-    font-size: ${({ theme }) => theme.titles.h3.normal.fontSize};
-    font-weight: ${({ theme }) => theme.titles.h3.normal.fontWeight};
-  `
-}
-
-export const H4 = {
-  Normal: styled(GenericTitle).attrs({ as: 'h4' })`
-    font-size: ${({ theme }) => theme.titles.h4.normal.fontSize};
-    font-weight: ${({ theme }) => theme.titles.h4.normal.fontWeight};
-  `
-}
-
-const GenericText = styled.p<BaseTextProps>`
-  color: ${({ color, theme }) => color || theme.colors.ui8};
-  margin: ${({ margin }) => margin || 0};
-  text-transform: ${({ uppercase }) => (uppercase ? 'uppercase' : 'none')};
-  ${({ italic }) => italic && 'font-style: italic;'};
-`
-
-export const Text = {
-  Normal: styled(GenericText)`
-    font-size: ${({ theme }) => theme.texts.normal.fontSize};
-    font-weight: ${({ theme }) => theme.texts.normal.fontWeight};
-  `,
-  NormalBold: styled(GenericText)`
-    font-size: ${({ theme }) => theme.texts.normalBold.fontSize};
-    font-weight: ${({ theme }) => theme.texts.normalBold.fontWeight};
-  `,
-  Big: styled(GenericText)`
-    font-size: ${({ theme }) => theme.texts.big.fontSize};
-    font-weight: ${({ theme }) => theme.texts.big.fontWeight};
-  `,
-  BigBold: styled(GenericText)`
-    font-size: ${({ theme }) => theme.texts.bigBold.fontSize};
-    font-weight: ${({ theme }) => theme.texts.bigBold.fontWeight};
-  `,
-  Medium: styled(GenericText)`
-    font-size: ${({ theme }) => theme.texts.medium.fontSize};
-    font-weight: ${({ theme }) => theme.texts.medium.fontWeight};
-  `,
-  MediumBold: styled(GenericText)`
-    font-size: ${({ theme }) => theme.texts.mediumBold.fontSize};
-    font-weight: ${({ theme }) => theme.texts.mediumBold.fontWeight};
-  `,
-  Small: styled(GenericText)`
-    font-size: ${({ theme }) => theme.texts.small.fontSize};
-    font-weight: ${({ theme }) => theme.texts.small.fontWeight};
-  `,
-  SmallBold: styled(GenericText)`
-    font-size: ${({ theme }) => theme.texts.smallBold.fontSize};
-    font-weight: ${({ theme }) => theme.texts.smallBold.fontWeight};
-  `
-}
diff --git a/{{cookiecutter.project_dirname}}/src/pages/index.tsx b/{{cookiecutter.project_dirname}}/src/pages/index.tsx
index 035dd5d..d95a7db 100644
--- a/{{cookiecutter.project_dirname}}/src/pages/index.tsx
+++ b/{{cookiecutter.project_dirname}}/src/pages/index.tsx
@@ -1,18 +1,22 @@
 import React from 'react'
 import styled from 'styled-components'
 
-import { H1 } from '@/src/components/commons/Typography'
 
 import type { NextPage } from 'next'
 
 const Home: NextPage = () => {
   return (
     <Container>
-      <H1.Normal>Hello World!</H1.Normal>
+      <H1>Hello World!</H1>
     </Container>
   )
 }
 
+const H1 = styled.h1`
+  font-size: 40px;
+  font-weight: 500;
+`
+
 const Container = styled.div`
   display: flex;
   flex: 1;