diff --git a/.eslintrc.yml b/.eslintrc.yml
index 1d6b95c29d4..c3866eb6a91 100644
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@@ -2,8 +2,8 @@ env:
   browser: true
   es2021: true
 extends:
-  - "plugin:react/recommended"
-  - "plugin:json/recommended"
+  - 'plugin:react/recommended'
+  - 'plugin:json/recommended'
   - standard
 parserOptions:
   ecmaFeatures:
@@ -12,4 +12,8 @@ parserOptions:
   sourceType: module
 plugins:
   - react
-rules: {}
+rules:
+  {
+    'space-before-function-paren': ['error', 'never'],
+    'comma-dangle': ['error', 'always-multiline'],
+  }
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 04f07716889..d3efe1f75fc 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -8,7 +8,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: "16"
+          node-version: '16'
       - name: install dependencies
         run: npm ci
       - name: run linter
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 6da3613b6f4..446c23cf750 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -10,7 +10,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: "16"
+          node-version: '16'
       - name: install dependencies
         run: npm ci
       - name: run build
@@ -48,7 +48,7 @@ jobs:
           push: true
           secrets: |
             'GH_TOKEN=${{ secrets.GITHUB_TOKEN }}'
-          build-args: "github_token=${{ secrets.GITHUB_TOKEN }}"
+          build-args: 'github_token=${{ secrets.GITHUB_TOKEN }}'
           tags: |
             ghcr.io/eddiehubcommunity/linktree:v${{ steps.package-version.outputs.current-version}}
             ghcr.io/eddiehubcommunity/linktree:latest
@@ -67,7 +67,7 @@ jobs:
           kubeconfig: ${{ secrets.KUBE_CONFIG }}
       - uses: Azure/k8s-deploy@v1.4
         with:
-          namespace: "default"
+          namespace: 'default'
           manifests: kubernetes/deployment.yml
-          images: "ghcr.io/eddiehubcommunity/linktree:v${{ steps.package-version.outputs.current-version}}"
-          kubectl-version: "latest"
+          images: 'ghcr.io/eddiehubcommunity/linktree:v${{ steps.package-version.outputs.current-version}}'
+          kubectl-version: 'latest'
diff --git a/.gitpod.yml b/.gitpod.yml
index b0934d17a1d..0d257bd0e97 100644
--- a/.gitpod.yml
+++ b/.gitpod.yml
@@ -1,7 +1,7 @@
 # List the start up tasks. Learn more https://www.gitpod.io/docs/config-start-tasks/
 tasks:
   - name: npm
-    init:  npm install
+    init: npm install
     command: npm run start
 
 # List the ports to expose. Learn more https://www.gitpod.io/docs/config-ports/
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 00000000000..e63fa606570
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,5 @@
+{
+  "trailingComma": "all",
+  "semi": false,
+  "singleQuote": true
+}
diff --git a/kubernetes/ingress.yml b/kubernetes/ingress.yml
index 19255a33547..b6ae089a456 100644
--- a/kubernetes/ingress.yml
+++ b/kubernetes/ingress.yml
@@ -6,7 +6,7 @@ metadata:
     nginx.ingress.kubernetes.io/rewrite-target: /
 spec:
   rules:
-    - host: "linkfree.eddiehub.org"
+    - host: 'linkfree.eddiehub.org'
       http:
         paths:
           - path: /
diff --git a/package-lock.json b/package-lock.json
index b0f41354e4c..50948bca43f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
   "name": "members",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "0.3.0",
+      "version": "0.3.1",
       "dependencies": {
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^11.2.7",
@@ -28,7 +28,8 @@
         "eslint-plugin-json": "^3.1.0",
         "eslint-plugin-node": "^11.1.0",
         "eslint-plugin-promise": "^5.1.0",
-        "eslint-plugin-react": "^7.25.1"
+        "eslint-plugin-react": "^7.25.1",
+        "prettier": "2.4.0"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -16381,6 +16382,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.4.0.tgz",
+      "integrity": "sha512-DsEPLY1dE5HF3BxCRBmD4uYZ+5DCbvatnolqTqcxEgKVZnL2kUfyu7b8pPQ5+hTBkdhU9SLUmK0/pHb07RE4WQ==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -35013,6 +35026,12 @@
       "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
       "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
     },
+    "prettier": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.4.0.tgz",
+      "integrity": "sha512-DsEPLY1dE5HF3BxCRBmD4uYZ+5DCbvatnolqTqcxEgKVZnL2kUfyu7b8pPQ5+hTBkdhU9SLUmK0/pHb07RE4WQ==",
+      "dev": true
+    },
     "pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
diff --git a/package.json b/package.json
index 68a3fbd3181..ce992b4824c 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-react": "^7.25.1"
+    "eslint-plugin-react": "^7.25.1",
+    "prettier": "2.4.0"
   }
 }
diff --git a/src/App.js b/src/App.js
index 8d4947fc3b5..fdd6d57954a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,13 @@
-import "primereact/resources/themes/saga-blue/theme.css";
-import "primereact/resources/primereact.min.css";
-import "primeicons/primeicons.css";
-import "primeflex/primeflex.css";
+import 'primereact/resources/themes/saga-blue/theme.css'
+import 'primereact/resources/primereact.min.css'
+import 'primeicons/primeicons.css'
+import 'primeflex/primeflex.css'
 
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import React from 'react'
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
 
-import Footer from "./Components/Footer";
-import Socials from "./Components/Socials";
+import Footer from './Components/Footer'
+import Socials from './Components/Socials'
 
 function App() {
   return (
@@ -20,7 +21,7 @@ function App() {
       </Switch>
       <Footer />
     </Router>
-  );
+  )
 }
 
-export default App;
+export default App
diff --git a/src/Components/Footer.js b/src/Components/Footer.js
index db76252a521..57934c13327 100644
--- a/src/Components/Footer.js
+++ b/src/Components/Footer.js
@@ -1,16 +1,16 @@
-import React from "react";
+import React from 'react'
 
 function Footer() {
   return (
     <div className="p-d-flex p-jc-center p-ai-center">
       <p>
-        Contribute on{" "}
+        Contribute on{' '}
         <a href="https://github.com/EddieHubCommunity/LinkFree">
           <i className="pi pi-github" aria-hidden="true"></i>
         </a>
       </p>
     </div>
-  );
+  )
 }
 
-export default Footer;
+export default Footer
diff --git a/src/Components/Links.js b/src/Components/Links.js
index 6656ea89c98..6148d0147eb 100644
--- a/src/Components/Links.js
+++ b/src/Components/Links.js
@@ -1,16 +1,18 @@
-import React from "react";
-import { Button } from "primereact/button";
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { Button } from 'primereact/button'
 
 function Links({ links }) {
   const colors = {
-    youtube: "red",
-    twitter: "blue",
-    github: "green",
-  };
+    youtube: 'red',
+    twitter: 'blue',
+    github: 'green',
+  }
 
   return (
     <div className="p-d-flex p-jc-center">
-      <div className="p-d-flex p-flex-column" style={{ width: 70 + "%" }}>
+      <div className="p-d-flex p-flex-column" style={{ width: 70 + '%' }}>
         {links.map((link, index) => (
           <Button
             className="p-p-3 p-m-2 p-button-outlined"
@@ -23,7 +25,11 @@ function Links({ links }) {
         ))}
       </div>
     </div>
-  );
+  )
+}
+
+Links.propTypes = {
+  links: PropTypes.object.isRequired,
 }
 
-export default Links;
+export default Links
diff --git a/src/Components/Profile.js b/src/Components/Profile.js
index c6e0b663437..938b150330e 100644
--- a/src/Components/Profile.js
+++ b/src/Components/Profile.js
@@ -1,7 +1,8 @@
-import React from "react";
+import React from 'react'
+import PropTypes from 'prop-types'
 
-import { Avatar } from "primereact/avatar";
-import { Badge } from "primereact/badge";
+import { Avatar } from 'primereact/avatar'
+import { Badge } from 'primereact/badge'
 
 function Profile({ name, bio, avatar, total }) {
   return (
@@ -21,7 +22,14 @@ function Profile({ name, bio, avatar, total }) {
         <p>{bio}</p>
       </div>
     </div>
-  );
+  )
 }
 
-export default Profile;
+Profile.propTypes = {
+  name: PropTypes.string.isRequired,
+  bio: PropTypes.string.isRequired,
+  avatar: PropTypes.string.isRequired,
+  total: PropTypes.string.number,
+}
+
+export default Profile
diff --git a/src/Components/Socials.js b/src/Components/Socials.js
index 33af811d7b6..99747438b5e 100644
--- a/src/Components/Socials.js
+++ b/src/Components/Socials.js
@@ -1,25 +1,25 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect } from 'react'
 
-import { useParams } from "react-router-dom";
+import { useParams } from 'react-router-dom'
 
-import Profile from "./Profile";
-import Links from "./Links";
+import Profile from './Profile'
+import Links from './Links'
 
 function Socials() {
-  const { username } = useParams();
+  const { username } = useParams()
   const [profile, setProfile] = useState({
-    name: "404",
-    bio: "-",
+    name: '404',
+    bio: '-',
     avatar:
-      "https://user-images.githubusercontent.com/624760/114314271-ea156a80-9af1-11eb-97ca-977be7565aa6.png",
+      'https://user-images.githubusercontent.com/624760/114314271-ea156a80-9af1-11eb-97ca-977be7565aa6.png',
     links: [],
-  });
+  })
 
   useEffect(() => {
     fetch(`/data/${username}.json`)
       .then((response) => response.json())
-      .then((data) => setProfile(data));
-  }, [username]);
+      .then((data) => setProfile(data))
+  }, [username])
 
   return (
     <div>
@@ -31,7 +31,7 @@ function Socials() {
       />
       <Links links={profile.links} />
     </div>
-  );
+  )
 }
 
-export default Socials;
+export default Socials
diff --git a/src/index.js b/src/index.js
index ef2edf8ea3f..68bf7230c17 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,17 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+import reportWebVitals from './reportWebVitals'
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
-);
+  document.getElementById('root'),
+)
 
 // 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 5253d3ad9e6..dc6ff0781b6 100644
--- a/src/reportWebVitals.js
+++ b/src/reportWebVitals.js
@@ -1,13 +1,13 @@
-const reportWebVitals = onPerfEntry => {
+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