diff --git a/.eslintrc.json b/.eslintrc.json
index d4af37b..a902b0b 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -33,5 +33,12 @@
       "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/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..ec2332e
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  }
+}
diff --git a/package.json b/package.json
index 4bfdca3..e336216 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
diff --git a/src/App.js b/src/App.js
index 8029990..bf1eec1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,20 @@
 import { ThemeProvider } from 'styled-components'
-import GlobalStyles from './styles/global'
-import theme from './styles/theme'
+import GlobalStyles from 'styles/global'
+import theme from 'styles/theme'
+
+import ScreenResolution from 'components/ScreenResolution'
+import ScreenSize from 'components/ScreenSize'
+import Main from 'components/Main'
+import Footer from 'components/Footer'
 
 const App = () => (
   <ThemeProvider theme={theme}>
     <GlobalStyles />
-    <h1>ScreenResolution</h1>
+    <Main>
+      <ScreenResolution />
+      <ScreenSize />
+      <Footer />
+    </Main>
   </ThemeProvider>
 )
 
diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx
new file mode 100644
index 0000000..a3612b3
--- /dev/null
+++ b/src/components/Footer/index.jsx
@@ -0,0 +1,7 @@
+import * as S from './styles'
+
+const Footer = () => {
+  return <S.Wrapper>Made with [heart] by theandersonn</S.Wrapper>
+}
+
+export default Footer
diff --git a/src/components/Footer/styles.js b/src/components/Footer/styles.js
new file mode 100644
index 0000000..fedacd5
--- /dev/null
+++ b/src/components/Footer/styles.js
@@ -0,0 +1,3 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.footer``
diff --git a/src/components/Main/index.jsx b/src/components/Main/index.jsx
new file mode 100644
index 0000000..0cc7de9
--- /dev/null
+++ b/src/components/Main/index.jsx
@@ -0,0 +1,13 @@
+import PropTypes from 'prop-types'
+
+import * as S from './styles'
+
+const Main = ({ children }) => {
+  return <S.Wrapper>{children}</S.Wrapper>
+}
+
+Main.propTypes = {
+  children: PropTypes.elementType.isRequired
+}
+
+export default Main
diff --git a/src/components/Main/styles.js b/src/components/Main/styles.js
new file mode 100644
index 0000000..0267ce1
--- /dev/null
+++ b/src/components/Main/styles.js
@@ -0,0 +1,3 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.main``
diff --git a/src/components/ScreenResolution/index.jsx b/src/components/ScreenResolution/index.jsx
new file mode 100644
index 0000000..95a8c2e
--- /dev/null
+++ b/src/components/ScreenResolution/index.jsx
@@ -0,0 +1,13 @@
+import * as S from './styles'
+
+const ScreenResolution = () => {
+  return (
+    <S.Wrapper>
+      <h2>Screen Resolution is</h2>
+      <p>Screen Width: {window.outerWidth} pixels</p>
+      <p>Screen Height: {window.outerHeight} pixels</p>
+    </S.Wrapper>
+  )
+}
+
+export default ScreenResolution
diff --git a/src/components/ScreenResolution/styles.js b/src/components/ScreenResolution/styles.js
new file mode 100644
index 0000000..d323bc0
--- /dev/null
+++ b/src/components/ScreenResolution/styles.js
@@ -0,0 +1,3 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.article``
diff --git a/src/components/ScreenSize/index.jsx b/src/components/ScreenSize/index.jsx
new file mode 100644
index 0000000..ca5837a
--- /dev/null
+++ b/src/components/ScreenSize/index.jsx
@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react'
+
+import * as S from './styles'
+
+const ScreenSize = () => {
+  const [dimensions, setDimensions] = useState({
+    height: window.innerHeight,
+    width: window.innerWidth
+  })
+
+  useEffect(() => {
+    function handleResize() {
+      setDimensions({
+        height: window.innerHeight,
+        width: window.innerWidth
+      })
+    }
+
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  })
+
+  return (
+    <S.Wrapper>
+      <h2>Screen Size is</h2>
+      <p>Screen Width: {dimensions.width} pixels</p>
+      <p>Screen Height: {dimensions.height} pixels</p>
+    </S.Wrapper>
+  )
+}
+
+export default ScreenSize
diff --git a/src/components/ScreenSize/styles.js b/src/components/ScreenSize/styles.js
new file mode 100644
index 0000000..d323bc0
--- /dev/null
+++ b/src/components/ScreenSize/styles.js
@@ -0,0 +1,3 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.article``