diff --git a/.eslintrc.json b/.eslintrc.json
index 5f07e2d..8927247 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,46 +1,43 @@
 {
-    "env": {
-      "jest": true,
-      "browser": true,
-      "es2021": true
+  "env": {
+    "jest": true,
+    "browser": true,
+    "es2021": true
+  },
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "extends": [
+    "airbnb",
+    "prettier",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true,
+      "modules": true
     },
-    "globals": {
-      "Atomics": "readonly",
-      "SharedArrayBuffer": "readonly"
-    },
-    "extends": [
-      "airbnb",
-      "prettier",
-      "eslint:recommended",
-      "plugin:react/recommended",
-      "plugin:react-hooks/recommended",
-      "plugin:prettier/recommended"
-    ],
-    "parser": "@babel/eslint-parser",
-    "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true,
-            "modules": true
-        },
-        "ecmaVersion": 12,
-        "sourceType": "module"
-    },
-    "plugins": [
-      "react",
-      "react-hooks"
-    ],
-    "rules": {
-      "react/function-component-definition": 0,
-      "react/react-in-jsx-scope": "off",
-      "no-unused-vars": "warn",
-      "import/prefer-default-export": "off",
-      "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
-    },
-    "settings": {
-      "import/resolver": {
-        "node": {
-          "paths": ["src"]
-        }
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "react-hooks"],
+  "rules": {
+    "react/function-component-definition": 0,
+    "react/react-in-jsx-scope": "off",
+    "no-unused-vars": "warn",
+    "import/prefer-default-export": "off",
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "paths": ["src"]
       }
     }
+  }
 }
diff --git a/.prettierrc b/.prettierrc
index 0e5c1db..f71b5d2 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,6 @@
 {
-  "trailingComma": "none",
-  "semi": false,
-  "singleQuote": true
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "endOfLine": "auto"
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index a49312c..fd8dbca 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -8,5 +8,5 @@
   },
   "emmet.includeLanguages": {
     "javascript": "javascriptreact"
-  },
+  }
 }
diff --git a/README.md b/README.md
index 655d1f8..2199645 100644
--- a/README.md
+++ b/README.md
@@ -18,4 +18,4 @@ yarn start
 yarn test
 ```
 
-Made with 💜  by theandersonn
+Made with 💜 by theandersonn
diff --git a/package.json b/package.json
index e5d9eea..b589f94 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
     "test:watch": "react-scripts test --watch",
     "test:coverage": "react-scripts test --coverage --watchAll=false",
     "eject": "react-scripts eject",
-    "lint": "eslint src --max-warnings=0"
+    "lint": "eslint ./src --ext .jsx,.js",
+    "prettier:fix": "prettier --write ."
   },
   "browserslist": {
     "production": [
diff --git a/src/App.js b/src/App.js
index f43239a..b0c3a22 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,12 @@
-import { ThemeProvider } from 'styled-components'
-import GlobalStyles from 'styles/global'
-import theme from 'styles/theme'
+import { ThemeProvider } from 'styled-components';
+import GlobalStyles from 'styles/global';
+import theme from 'styles/theme';
 
-import Main from 'components/Main'
-import Header from 'components/Header'
-import ScreenWrapper from 'components/ScreenWrapper'
-import Footer from 'components/Footer'
-import GithubCorner from 'react-github-corner'
+import Main from 'components/Main';
+import Header from 'components/Header';
+import ScreenWrapper from 'components/ScreenWrapper';
+import Footer from 'components/Footer';
+import GithubCorner from 'react-github-corner';
 
 const App = () => (
   <ThemeProvider theme={theme}>
@@ -22,6 +22,6 @@ const App = () => (
       />
     </Main>
   </ThemeProvider>
-)
+);
 
-export default App
+export default App;
diff --git a/src/components/Footer/__tests__/test.jsx b/src/components/Footer/__tests__/test.jsx
index a11afa3..8ddadcc 100644
--- a/src/components/Footer/__tests__/test.jsx
+++ b/src/components/Footer/__tests__/test.jsx
@@ -1,17 +1,17 @@
-import { screen } from '@testing-library/react'
-import { render } from 'utils/test-utils'
+import { screen } from '@testing-library/react';
+import { render } from 'utils/test-utils';
 
-import Footer from '..'
+import Footer from '..';
 
 describe('<Footer />', () => {
   it('should render correctly', () => {
-    const { container } = render(<Footer />)
+    const { container } = render(<Footer />);
 
     expect(screen.getByRole('link', { name: /theandersonn/i })).toHaveAttribute(
       'href',
       'https://github.com/theandersonn'
-    )
+    );
 
-    expect(container.firstChild).toMatchSnapshot()
-  })
-})
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx
index a2eef09..5e2b1bb 100644
--- a/src/components/Footer/index.jsx
+++ b/src/components/Footer/index.jsx
@@ -1,6 +1,6 @@
-import { TiHeart as HeartIcon } from 'react-icons/ti'
+import { TiHeart as HeartIcon } from 'react-icons/ti';
 
-import * as S from './styles'
+import * as S from './styles';
 
 const Footer = () => {
   return (
@@ -14,7 +14,7 @@ const Footer = () => {
         theandersonn
       </a>
     </S.Wrapper>
-  )
-}
+  );
+};
 
-export default Footer
+export default Footer;
diff --git a/src/components/Footer/styles.js b/src/components/Footer/styles.js
index 979aee9..d64881e 100644
--- a/src/components/Footer/styles.js
+++ b/src/components/Footer/styles.js
@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import styled, { css } from 'styled-components';
 
 export const Wrapper = styled.footer`
   ${({ theme }) => css`
@@ -22,4 +22,4 @@ export const Wrapper = styled.footer`
       }
     }
   `}
-`
+`;
diff --git a/src/components/Header/__tests__/test.jsx b/src/components/Header/__tests__/test.jsx
index f24bf72..448d224 100644
--- a/src/components/Header/__tests__/test.jsx
+++ b/src/components/Header/__tests__/test.jsx
@@ -1,15 +1,15 @@
-import { screen } from '@testing-library/react'
-import { render } from 'utils/test-utils'
+import { screen } from '@testing-library/react';
+import { render } from 'utils/test-utils';
 
-import Header from '..'
+import Header from '..';
 
 describe('<Header />', () => {
   it('should render correctly and have title', () => {
-    const { container } = render(<Header />)
+    const { container } = render(<Header />);
 
     expect(
       screen.getByRole('heading', { name: /what is my screen resolution\?/i })
-    ).toBeInTheDocument()
+    ).toBeInTheDocument();
 
     expect(container.firstChild).toMatchInlineSnapshot(`
       <header
@@ -19,6 +19,6 @@ describe('<Header />', () => {
           What Is My Screen Resolution?
         </h1>
       </header>
-    `)
-  })
-})
+    `);
+  });
+});
diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
index 33ffcc5..f906092 100644
--- a/src/components/Header/index.jsx
+++ b/src/components/Header/index.jsx
@@ -1,11 +1,11 @@
-import * as S from './styles'
+import * as S from './styles';
 
 const Header = () => {
   return (
     <S.Wrapper>
       <h1>What Is My Screen Resolution?</h1>
     </S.Wrapper>
-  )
-}
+  );
+};
 
-export default Header
+export default Header;
diff --git a/src/components/Header/styles.js b/src/components/Header/styles.js
index af9acbc..3067a0d 100644
--- a/src/components/Header/styles.js
+++ b/src/components/Header/styles.js
@@ -1,5 +1,5 @@
-import styled, { css } from 'styled-components'
-import media from 'styled-media-query'
+import styled, { css } from 'styled-components';
+import media from 'styled-media-query';
 
 export const Wrapper = styled.header`
   ${({ theme }) => css`
@@ -18,4 +18,4 @@ export const Wrapper = styled.header`
         font-size: ${theme.font.sizes.xxlarge};
       `}
   `}
-`
+`;
diff --git a/src/components/Main/__tests__/test.jsx b/src/components/Main/__tests__/test.jsx
index d328d5b..b76ceb5 100644
--- a/src/components/Main/__tests__/test.jsx
+++ b/src/components/Main/__tests__/test.jsx
@@ -1,10 +1,10 @@
-import { render } from 'utils/test-utils'
+import { render } from 'utils/test-utils';
 
-import Main from '..'
+import Main from '..';
 
 describe('<Main />', () => {
   it('should render correctly', () => {
-    const { container } = render(<Main>Children</Main>)
+    const { container } = render(<Main>Children</Main>);
 
     expect(container.firstChild).toMatchInlineSnapshot(`
       <main
@@ -12,6 +12,6 @@ describe('<Main />', () => {
       >
         Children
       </main>
-    `)
-  })
-})
+    `);
+  });
+});
diff --git a/src/components/Main/index.jsx b/src/components/Main/index.jsx
index dea07b5..222fcbb 100644
--- a/src/components/Main/index.jsx
+++ b/src/components/Main/index.jsx
@@ -1,13 +1,13 @@
-import PropTypes from 'prop-types'
+import PropTypes from 'prop-types';
 
-import * as S from './styles'
+import * as S from './styles';
 
 const Main = ({ children }) => {
-  return <S.Wrapper>{children}</S.Wrapper>
-}
+  return <S.Wrapper>{children}</S.Wrapper>;
+};
 
 Main.propTypes = {
-  children: PropTypes.node.isRequired
-}
+  children: PropTypes.node.isRequired,
+};
 
-export default Main
+export default Main;
diff --git a/src/components/Main/styles.js b/src/components/Main/styles.js
index 39f4171..5bd09d9 100644
--- a/src/components/Main/styles.js
+++ b/src/components/Main/styles.js
@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import styled, { css } from 'styled-components';
 
 export const Wrapper = styled.main`
   ${({ theme }) => css`
@@ -12,4 +12,4 @@ export const Wrapper = styled.main`
     height: 100vh;
     background-color: ${theme.colors.primary};
   `}
-`
+`;
diff --git a/src/components/ScreenResolution/index.jsx b/src/components/ScreenResolution/index.jsx
index 1dbde2a..62a441d 100644
--- a/src/components/ScreenResolution/index.jsx
+++ b/src/components/ScreenResolution/index.jsx
@@ -1,4 +1,4 @@
-import * as S from './styles'
+import * as S from './styles';
 
 const ScreenResolution = () => {
   return (
@@ -13,7 +13,7 @@ const ScreenResolution = () => {
         </p>
       </S.Description>
     </S.Wrapper>
-  )
-}
+  );
+};
 
-export default ScreenResolution
+export default ScreenResolution;
diff --git a/src/components/ScreenResolution/styles.js b/src/components/ScreenResolution/styles.js
index 8e5233d..0500db4 100644
--- a/src/components/ScreenResolution/styles.js
+++ b/src/components/ScreenResolution/styles.js
@@ -1,5 +1,5 @@
-import styled, { css } from 'styled-components'
-import media from 'styled-media-query'
+import styled, { css } from 'styled-components';
+import media from 'styled-media-query';
 
 export const Wrapper = styled.article`
   ${({ theme }) => css`
@@ -14,7 +14,7 @@ export const Wrapper = styled.article`
       margin-top: ${theme.spacings.xxsmall};
     }
   `}
-`
+`;
 
 export const Title = styled.h2`
   ${({ theme }) => css`
@@ -23,7 +23,7 @@ export const Title = styled.h2`
     border-bottom: 0.1rem solid ${theme.colors.white};
     padding: ${theme.spacings.xxsmall} ${theme.spacings.xsmall};
   `}
-`
+`;
 
 export const Description = styled.div`
   ${({ theme }) => css`
@@ -37,4 +37,4 @@ export const Description = styled.div`
       color: ${theme.colors.secondary};
     }
   `}
-`
+`;
diff --git a/src/components/ScreenSize/index.jsx b/src/components/ScreenSize/index.jsx
index 550b84c..3b02a0c 100644
--- a/src/components/ScreenSize/index.jsx
+++ b/src/components/ScreenSize/index.jsx
@@ -1,27 +1,27 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react';
 
-import * as S from 'components/ScreenResolution/styles'
+import * as S from 'components/ScreenResolution/styles';
 
 const ScreenSize = () => {
   const [dimensions, setDimensions] = useState({
     height: window.innerHeight,
-    width: window.innerWidth
-  })
+    width: window.innerWidth,
+  });
 
   useEffect(() => {
     function handleResize() {
       setDimensions({
         height: window.innerHeight,
-        width: window.innerWidth
-      })
+        width: window.innerWidth,
+      });
     }
 
-    window.addEventListener('resize', handleResize)
+    window.addEventListener('resize', handleResize);
 
     return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  })
+      window.removeEventListener('resize', handleResize);
+    };
+  });
 
   return (
     <S.Wrapper>
@@ -35,7 +35,7 @@ const ScreenSize = () => {
         </p>
       </S.Description>
     </S.Wrapper>
-  )
-}
+  );
+};
 
-export default ScreenSize
+export default ScreenSize;
diff --git a/src/components/ScreenWrapper/__tests__/test.jsx b/src/components/ScreenWrapper/__tests__/test.jsx
index 9cd59ba..9eadcb6 100644
--- a/src/components/ScreenWrapper/__tests__/test.jsx
+++ b/src/components/ScreenWrapper/__tests__/test.jsx
@@ -1,11 +1,11 @@
-import { render, screen } from 'utils/test-utils'
+import { render, screen } from 'utils/test-utils';
 
-import ScreenWrapper from '..'
+import ScreenWrapper from '..';
 
 describe('<ScreenWrapper />', () => {
   it('should render correctly and have two items', () => {
-    render(<ScreenWrapper />)
+    render(<ScreenWrapper />);
 
-    expect(screen.getAllByRole('article')).toHaveLength(2)
-  })
-})
+    expect(screen.getAllByRole('article')).toHaveLength(2);
+  });
+});
diff --git a/src/components/ScreenWrapper/index.jsx b/src/components/ScreenWrapper/index.jsx
index 651db20..687986b 100644
--- a/src/components/ScreenWrapper/index.jsx
+++ b/src/components/ScreenWrapper/index.jsx
@@ -1,7 +1,7 @@
-import ScreenResolution from 'components/ScreenResolution'
-import ScreenSize from 'components/ScreenSize'
+import ScreenResolution from 'components/ScreenResolution';
+import ScreenSize from 'components/ScreenSize';
 
-import * as S from './styles'
+import * as S from './styles';
 
 const ScreenWrapper = () => {
   return (
@@ -9,7 +9,7 @@ const ScreenWrapper = () => {
       <ScreenResolution />
       <ScreenSize />
     </S.Wrapper>
-  )
-}
+  );
+};
 
-export default ScreenWrapper
+export default ScreenWrapper;
diff --git a/src/components/ScreenWrapper/styles.js b/src/components/ScreenWrapper/styles.js
index c188ccf..ef53768 100644
--- a/src/components/ScreenWrapper/styles.js
+++ b/src/components/ScreenWrapper/styles.js
@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import styled, { css } from 'styled-components';
 
 export const Wrapper = styled.section`
   ${({ theme }) => css`
@@ -8,4 +8,4 @@ export const Wrapper = styled.section`
     grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
     grid-gap: ${theme.spacings.medium};
   `}
-`
+`;
diff --git a/src/index.js b/src/index.js
index f47b144..5d4fdcf 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,16 +1,16 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import reportWebVitals from './reportWebVitals'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
 
-const root = ReactDOM.createRoot(document.getElementById('root'))
+const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
-)
+);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals()
+reportWebVitals();
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
index dc6ff07..532f29b 100644
--- a/src/reportWebVitals.js
+++ b/src/reportWebVitals.js
@@ -1,13 +1,13 @@
 const reportWebVitals = (onPerfEntry) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry)
-      getFID(onPerfEntry)
-      getFCP(onPerfEntry)
-      getLCP(onPerfEntry)
-      getTTFB(onPerfEntry)
-    })
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
   }
-}
+};
 
-export default reportWebVitals
+export default reportWebVitals;
diff --git a/src/setupTests.js b/src/setupTests.js
index 52aaef1..8f2609b 100644
--- a/src/setupTests.js
+++ b/src/setupTests.js
@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom'
+import '@testing-library/jest-dom';
diff --git a/src/styles/global.js b/src/styles/global.js
index b9b69e3..2c24505 100644
--- a/src/styles/global.js
+++ b/src/styles/global.js
@@ -1,4 +1,4 @@
-import { createGlobalStyle, css } from 'styled-components'
+import { createGlobalStyle, css } from 'styled-components';
 
 const GlobalStyles = createGlobalStyle`
   @font-face {
@@ -39,6 +39,6 @@ const GlobalStyles = createGlobalStyle`
       font-size: ${theme.font.sizes.medium};
     }
   `}
-`
+`;
 
-export default GlobalStyles
+export default GlobalStyles;
diff --git a/src/styles/theme.js b/src/styles/theme.js
index c64d5f1..641fbbd 100644
--- a/src/styles/theme.js
+++ b/src/styles/theme.js
@@ -8,15 +8,15 @@ const theme = {
       medium: '1.6rem',
       large: '1.8rem',
       xlarge: '2.6rem',
-      xxlarge: '6.6rem'
-    }
+      xxlarge: '6.6rem',
+    },
   },
   colors: {
     primary: '#484D5C',
     secondary: '#FFCE00',
     white: '#c0ccd4',
     grayDark: '#2e313a',
-    gray: '#A8B3BC'
+    gray: '#A8B3BC',
   },
   spacings: {
     xxsmall: '0.8rem',
@@ -25,8 +25,8 @@ const theme = {
     medium: '3.2rem',
     large: '4.0rem',
     xlarge: '4.8rem',
-    xxlarge: '5.6rem'
-  }
-}
+    xxlarge: '5.6rem',
+  },
+};
 
-export default theme
+export default theme;
diff --git a/src/utils/test-utils.jsx b/src/utils/test-utils.jsx
index e1d4af0..8f48bbf 100644
--- a/src/utils/test-utils.jsx
+++ b/src/utils/test-utils.jsx
@@ -1,9 +1,9 @@
-import { render } from '@testing-library/react'
-import { ThemeProvider } from 'styled-components'
-import theme from 'styles/theme'
+import { render } from '@testing-library/react';
+import { ThemeProvider } from 'styled-components';
+import theme from 'styles/theme';
 
 const customRender = (children) =>
-  render(<ThemeProvider theme={theme}>{children}</ThemeProvider>)
+  render(<ThemeProvider theme={theme}>{children}</ThemeProvider>);
 
-export * from '@testing-library/react'
-export { customRender as render }
+export * from '@testing-library/react';
+export { customRender as render };