diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..01c91ca
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Use spaces instead of tabs
+[*]
+indent_style = space
+
+# Insert new line at the end of files
+[*]
+insert_final_newline = true
diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
new file mode 100644
index 0000000..29ad4bc
--- /dev/null
+++ b/.git-blame-ignore-revs
@@ -0,0 +1,3 @@
+# .git-blame-ignore-revs
+# Ignore changes in git blame for specific revisions
+4f8e868bd796996bc91e1b6139a77427ac97a30e # Add prettier plugin for tailwind css sort classes
diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
new file mode 100644
index 0000000..09d929c
--- /dev/null
+++ b/.github/workflows/eslint.yml
@@ -0,0 +1,54 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+# ESLint is a tool for identifying and reporting on patterns
+# found in ECMAScript/JavaScript code.
+# More details at https://github.com/eslint/eslint
+# and https://eslint.org
+
+name: Eslint and Prettier
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "main" ]
+
+jobs:
+  eslint:
+    name: Run eslint scanning
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      security-events: write
+      actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Install ESLint
+        run: |
+          npm install eslint@8.55.0
+          npm install @microsoft/eslint-formatter-sarif@2.1.7
+
+      - name: Run ESLint
+        run: npx eslint .
+          --config .eslintrc.cjs
+          --ext .js,.jsx,.ts,.tsx
+          --format @microsoft/eslint-formatter-sarif
+          --output-file eslint-results.sarif
+        continue-on-error: true
+
+      - name: Upload analysis results to GitHub
+        uses: github/codeql-action/upload-sarif@v2
+        with:
+          sarif_file: eslint-results.sarif
+          wait-for-processing: true
+
+      - name: Run Prettier
+        run: npx prettier src/
+          --check
+          --config .prettierrc.cjs
+        continue-on-error: false
diff --git a/.prettierrc.js b/.prettierrc.cjs
similarity index 76%
rename from .prettierrc.js
rename to .prettierrc.cjs
index 2165cc2..56061f9 100644
--- a/.prettierrc.js
+++ b/.prettierrc.cjs
@@ -1,11 +1,10 @@
 // prettier.config.js, .prettierrc.js, prettier.config.mjs, or .prettierrc.mjs
 
 /** @type {import("prettier").Config} */
-const config = {
+module.exports = {
+    plugins: ['prettier-plugin-tailwindcss'],
     trailingComma: 'es5',
     tabWidth: 4,
     semi: false,
     singleQuote: true,
 }
-
-export default config
diff --git a/package-lock.json b/package-lock.json
index f06d4fd..83e203f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,7 @@
                 "eslint-plugin-react-refresh": "^0.4.5",
                 "postcss": "^8.4.32",
                 "prettier": "3.1.1",
+                "prettier-plugin-tailwindcss": "^0.5.9",
                 "tailwindcss": "^3.3.6",
                 "typescript": "^5.2.2",
                 "vite": "^5.0.8"
@@ -8820,6 +8821,75 @@
                 "url": "https://github.com/prettier/prettier?sponsor=1"
             }
         },
+        "node_modules/prettier-plugin-tailwindcss": {
+            "version": "0.5.9",
+            "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.9.tgz",
+            "integrity": "sha512-9x3t1s2Cjbut2QiP+O0mDqV3gLXTe2CgRlQDgucopVkUdw26sQi53p/q4qvGxMLBDfk/dcTV57Aa/zYwz9l8Ew==",
+            "dev": true,
+            "engines": {
+                "node": ">=14.21.3"
+            },
+            "peerDependencies": {
+                "@ianvs/prettier-plugin-sort-imports": "*",
+                "@prettier/plugin-pug": "*",
+                "@shopify/prettier-plugin-liquid": "*",
+                "@trivago/prettier-plugin-sort-imports": "*",
+                "prettier": "^3.0",
+                "prettier-plugin-astro": "*",
+                "prettier-plugin-css-order": "*",
+                "prettier-plugin-import-sort": "*",
+                "prettier-plugin-jsdoc": "*",
+                "prettier-plugin-marko": "*",
+                "prettier-plugin-organize-attributes": "*",
+                "prettier-plugin-organize-imports": "*",
+                "prettier-plugin-style-order": "*",
+                "prettier-plugin-svelte": "*"
+            },
+            "peerDependenciesMeta": {
+                "@ianvs/prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "@prettier/plugin-pug": {
+                    "optional": true
+                },
+                "@shopify/prettier-plugin-liquid": {
+                    "optional": true
+                },
+                "@trivago/prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "prettier-plugin-astro": {
+                    "optional": true
+                },
+                "prettier-plugin-css-order": {
+                    "optional": true
+                },
+                "prettier-plugin-import-sort": {
+                    "optional": true
+                },
+                "prettier-plugin-jsdoc": {
+                    "optional": true
+                },
+                "prettier-plugin-marko": {
+                    "optional": true
+                },
+                "prettier-plugin-organize-attributes": {
+                    "optional": true
+                },
+                "prettier-plugin-organize-imports": {
+                    "optional": true
+                },
+                "prettier-plugin-style-order": {
+                    "optional": true
+                },
+                "prettier-plugin-svelte": {
+                    "optional": true
+                },
+                "prettier-plugin-twig-melody": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/process-nextick-args": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -17117,6 +17187,13 @@
             "integrity": "sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==",
             "dev": true
         },
+        "prettier-plugin-tailwindcss": {
+            "version": "0.5.9",
+            "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.9.tgz",
+            "integrity": "sha512-9x3t1s2Cjbut2QiP+O0mDqV3gLXTe2CgRlQDgucopVkUdw26sQi53p/q4qvGxMLBDfk/dcTV57Aa/zYwz9l8Ew==",
+            "dev": true,
+            "requires": {}
+        },
         "process-nextick-args": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
diff --git a/package.json b/package.json
index 0d698fc..15d43b6 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",
-        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0; prettier --check \"src/**/*.{ts,tsx}\"",
+        "lint:fix": "eslint . --ext ts,tsx --fix; prettier --write \"src/**/*.{ts,tsx}\"",
         "preview": "vite preview"
     },
     "dependencies": {
@@ -40,6 +41,7 @@
         "eslint-plugin-react-refresh": "^0.4.5",
         "postcss": "^8.4.32",
         "prettier": "3.1.1",
+        "prettier-plugin-tailwindcss": "^0.5.9",
         "tailwindcss": "^3.3.6",
         "typescript": "^5.2.2",
         "vite": "^5.0.8"
diff --git a/src/App.tsx b/src/App.tsx
index 30c0256..44d96a5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,7 +5,7 @@ import { Footer } from '@/components/Footer/Footer.tsx'
 
 function App() {
     return (
-        <div className="relative w-screen min-h-screen bg-orange-50">
+        <div className="relative min-h-screen w-screen bg-orange-50">
             <Navigation />
             <HomePage />
             <Footer />
diff --git a/src/components/Auth/Auth.tsx b/src/components/Auth/Auth.tsx
index 7ece879..3d290dc 100644
--- a/src/components/Auth/Auth.tsx
+++ b/src/components/Auth/Auth.tsx
@@ -82,7 +82,7 @@ export default function Auth({ view }: AuthProps) {
             />
             <button
                 title={!formValid ? 'Email required' : ''}
-                className="block my-4 disabled:bg-orange-200 disabled:text-gray-600 rounded-full bg-orange-400 w-full py-2"
+                className="my-4 block w-full rounded-full bg-orange-400 py-2 disabled:bg-orange-200 disabled:text-gray-600"
                 disabled={!formValid}
                 onClick={sendResetEmail}
             >
@@ -100,7 +100,7 @@ export default function Auth({ view }: AuthProps) {
         <>
             <button
                 onClick={signInWithGoogle}
-                className="w-full mb-4 flex bg-white rounded-full gap-2 items-center px-4 py-2 justify-center"
+                className="mb-4 flex w-full items-center justify-center gap-2 rounded-full bg-white px-4 py-2"
             >
                 <FcGoogle size="1rem" />
                 <div>Sign in with Google</div>
@@ -130,20 +130,20 @@ export default function Auth({ view }: AuthProps) {
             />
             <button
                 title={!formValid ? 'All fields must be valid' : ''}
-                className="block my-4 disabled:bg-orange-200 disabled:text-gray-600 rounded-full bg-orange-400 w-full py-2"
+                className="my-4 block w-full rounded-full bg-orange-400 py-2 disabled:bg-orange-200 disabled:text-gray-600"
                 disabled={!formValid}
                 onClick={signInWithEmail}
             >
                 Sign in
             </button>
             <button
-                className="underline text-sm text-center w-full mb-2"
+                className="mb-2 w-full text-center text-sm underline"
                 onClick={() => setState('signUp')}
             >
                 Don't have an account? Sign up!
             </button>
             <button
-                className="underline text-sm text-center w-full"
+                className="w-full text-center text-sm underline"
                 onClick={() => setState('forgottenPassword')}
             >
                 Forgot password?
@@ -183,7 +183,7 @@ export default function Auth({ view }: AuthProps) {
             </div>
             <button
                 title={!formValid ? 'All fields must be valid' : ''}
-                className="block my-4 disabled:bg-orange-200 disabled:text-gray-600 rounded-full bg-orange-400 w-full py-2"
+                className="my-4 block w-full rounded-full bg-orange-400 py-2 disabled:bg-orange-200 disabled:text-gray-600"
                 disabled={!formValid}
                 onClick={signUpNewUser}
             >
@@ -215,7 +215,7 @@ export default function Auth({ view }: AuthProps) {
             </div>
             <button
                 title={!formValid ? 'All fields must be valid' : ''}
-                className="block my-4 disabled:bg-orange-200 disabled:text-gray-600 rounded-full bg-orange-400 w-full py-2"
+                className="my-4 block w-full rounded-full bg-orange-400 py-2 disabled:bg-orange-200 disabled:text-gray-600"
                 disabled={!formValid}
                 onClick={updatePassword}
             >
diff --git a/src/components/Auth/AuthPageLayout.tsx b/src/components/Auth/AuthPageLayout.tsx
index 4515f64..09d4b58 100644
--- a/src/components/Auth/AuthPageLayout.tsx
+++ b/src/components/Auth/AuthPageLayout.tsx
@@ -8,7 +8,7 @@ export default function AuthPageLayout({ children }: AuthPageLayoutProps) {
     return (
         <>
             <Navigation />
-            <div className="w-screen h-screen flex justify-center items-center bg-orange-950">
+            <div className="flex h-screen w-screen items-center justify-center bg-orange-950">
                 {children}
             </div>
         </>
diff --git a/src/components/Auth/LoginButton.tsx b/src/components/Auth/LoginButton.tsx
index 8978d20..c3b70a0 100644
--- a/src/components/Auth/LoginButton.tsx
+++ b/src/components/Auth/LoginButton.tsx
@@ -2,7 +2,7 @@ export default function LoginButton() {
     return (
         <a
             href="/login"
-            className="py-3 px-8 m-1 rounded-full bg-orange-500 text-white font-bold hover:bg-orange-600"
+            className="m-1 rounded-full bg-orange-500 px-8 py-3 font-bold text-white hover:bg-orange-600"
         >
             <button>Login</button>
         </a>
diff --git a/src/components/Auth/LogoutButton.tsx b/src/components/Auth/LogoutButton.tsx
index d5d1176..c029948 100644
--- a/src/components/Auth/LogoutButton.tsx
+++ b/src/components/Auth/LogoutButton.tsx
@@ -5,7 +5,7 @@ export default function LogoutButton() {
         if (error) throw error
     }
     return (
-        <a className="py-3 px-8 m-1 rounded-full bg-orange-500 text-white font-bold hover:bg-orange-600">
+        <a className="m-1 rounded-full bg-orange-500 px-8 py-3 font-bold text-white hover:bg-orange-600">
             <button onClick={signOut}>Logout</button>
         </a>
     )
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 59ba33b..060fa4e 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,6 +1,6 @@
 export const Footer = () => {
     return (
-        <footer className="flex justify-center text-center text-xs p-8">
+        <footer className="flex justify-center p-8 text-center text-xs">
             © 2023 Help is Here
             <br /> Made with love by Abi and Xue
         </footer>
diff --git a/src/components/Form/ValidatedInput.tsx b/src/components/Form/ValidatedInput.tsx
index 8c6dafe..8ddfcc8 100644
--- a/src/components/Form/ValidatedInput.tsx
+++ b/src/components/Form/ValidatedInput.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 
 type ValidatedInputProps = {
     validator: (val: string) => boolean
@@ -15,28 +15,26 @@ export default function ValidatedInput({
     placeholder,
     type = 'text',
 }: ValidatedInputProps) {
-    useEffect(() => {
-        setError(validate(''))
-    }, [])
+    const [error, setError] = useState<string>('')
 
     const validate = (val: string) => {
-        if (!val.trim()) {
+        const isValid = validator(val)
+        if (isValid) {
+            onValid(val)
+            return 'Looks good!'
+        } else if (!val.trim()) {
             onInvalid(val)
             return 'Required'
-        } else if (!validator(val)) {
+        } else {
             onInvalid(val)
             return 'Invalid'
-        } else {
-            onValid(val)
-            return 'Looks good!'
         }
     }
-    const [error, setError] = useState<string>('Looks good!')
     return (
         <>
             <input
                 type={type}
-                className={`px-4 py-2 rounded-full block w-full border border-solid ${
+                className={`block w-full rounded-full border border-solid px-4 py-2 ${
                     error == 'Looks good!'
                         ? 'border-green-500'
                         : 'border-red-500'
@@ -46,7 +44,7 @@ export default function ValidatedInput({
                 onChange={(e) => setError(validate(e.target.value))}
             ></input>
             <span
-                className={`text-xs ms-4 ${
+                className={`ms-4 text-xs ${
                     error == 'Looks good!' ? 'text-green-500' : 'text-red-500'
                 }`}
             >
diff --git a/src/components/Home/About.tsx b/src/components/Home/About.tsx
index 8f5d55a..ce406b9 100644
--- a/src/components/Home/About.tsx
+++ b/src/components/Home/About.tsx
@@ -1,11 +1,11 @@
 import aboutImage from '../../assets/about.svg'
 export const About = () => {
     return (
-        <section className="flex justify-center flex-col py-12 bg-white px-8">
-            <h4 className="md:text-6xl text-4xl flex justify-center">About</h4>
-            <div className="flex md:flex-row flex-col justify-center">
+        <section className="flex flex-col justify-center bg-white px-8 py-12">
+            <h4 className="flex justify-center text-4xl md:text-6xl">About</h4>
+            <div className="flex flex-col justify-center md:flex-row">
                 <img src={aboutImage} alt="About" className="md:w-1/3" />
-                <span className="p-12 md:w-1/3 flex justify-center flex-col leading-8">
+                <span className="flex flex-col justify-center p-12 leading-8 md:w-1/3">
                     Help is Here is more than just a website; it's a
                     community-curated sanctuary dedicated to supporting mental
                     well-being.
diff --git a/src/components/Home/CTA.tsx b/src/components/Home/CTA.tsx
index ee2c774..b728082 100644
--- a/src/components/Home/CTA.tsx
+++ b/src/components/Home/CTA.tsx
@@ -1,9 +1,9 @@
 export const CTA = () => {
     return (
-        <section className="flex justify-center py-12 px-8">
+        <section className="flex justify-center px-8 py-12">
             <a
                 href="/resources"
-                className="rounded-full bg-orange-500 text-white text-center px-8 md:px-12 py-4 md:py-8 md:text-4xl text-2xl "
+                className="rounded-full bg-orange-500 px-8 py-4 text-center text-2xl text-white md:px-12 md:py-8 md:text-4xl "
             >
                 Explore All Resources
             </a>
diff --git a/src/components/Home/HeroImage.tsx b/src/components/Home/HeroImage.tsx
index e5c1dfa..b5dc567 100644
--- a/src/components/Home/HeroImage.tsx
+++ b/src/components/Home/HeroImage.tsx
@@ -2,15 +2,15 @@ import mainImage from '../../assets/hero - before dawn.svg'
 
 export const HeroImage = () => {
     return (
-        <section className="bg-white px-8 md:py-0 py-16 w-full md:h-fit bg-no-repeat bg-cover flex justify-center items-center flex-col md:flex-row">
+        <section className="flex w-full flex-col items-center justify-center bg-white bg-cover bg-no-repeat px-8 py-16 md:h-fit md:flex-row md:py-0">
             <div>
-                <h1 className="md:text-8xl text-center mb-4 text-gray-800 text-6xl">
+                <h1 className="mb-4 text-center text-6xl text-gray-800 md:text-8xl">
                     Help is here.
                 </h1>
-                <button className="rounded-full md:px-8 px-6 py-2 bg-orange-500 text-white mr-4 hover:bg-orange-600">
+                <button className="mr-4 rounded-full bg-orange-500 px-6 py-2 text-white hover:bg-orange-600 md:px-8">
                     Get Started
                 </button>
-                <button className="rounded-full md:px-8 px-6 py-2 bg-gray-200 text-gray-900 hover:bg-gray-300">
+                <button className="rounded-full bg-gray-200 px-6 py-2 text-gray-900 hover:bg-gray-300 md:px-8">
                     I'm Panicking!
                 </button>
             </div>
diff --git a/src/components/Home/IconNav.tsx b/src/components/Home/IconNav.tsx
index a86364d..68fed9e 100644
--- a/src/components/Home/IconNav.tsx
+++ b/src/components/Home/IconNav.tsx
@@ -27,12 +27,12 @@ export const IconNav = () => {
         },
     ]
     return (
-        <section className="flex justify-center flex-col py-12">
-            <h4 className="md:text-6xl text-4xl flex justify-center text-center">
+        <section className="flex flex-col justify-center py-12">
+            <h4 className="flex justify-center text-center text-4xl md:text-6xl">
                 I need help with ...
             </h4>
             <br />
-            <div className="h-100px flex justify-center md:flex-row flex-col items-center">
+            <div className="h-100px flex flex-col items-center justify-center md:flex-row">
                 {details.map((item) => {
                     return (
                         <IconNavElement
diff --git a/src/components/Home/IconNavElement.tsx b/src/components/Home/IconNavElement.tsx
index a24d2f2..5eebf5a 100644
--- a/src/components/Home/IconNavElement.tsx
+++ b/src/components/Home/IconNavElement.tsx
@@ -6,7 +6,7 @@ export const IconNavElement = (props: {
     const { title, image, link } = props
     return (
         <a href={link}>
-            <div className="flex justify-center px-4 py-8 bg-orange-200 rounded flex-col text-center items-center hover:bg-orange-300 h-48 mr-4 w-48 mt-8">
+            <div className="mr-4 mt-8 flex h-48 w-48 flex-col items-center justify-center rounded bg-orange-200 px-4 py-8 text-center hover:bg-orange-300">
                 <img src={image} alt={title} width="100px" />
                 <h4 className="pt-4">{title}</h4>
             </div>
diff --git a/src/components/MiniTag.tsx b/src/components/MiniTag.tsx
index fece114..749c2e0 100644
--- a/src/components/MiniTag.tsx
+++ b/src/components/MiniTag.tsx
@@ -7,7 +7,7 @@ type TagProps = {
 export default function MiniTag({ children }: TagProps) {
     return (
         <Link to={`/tag/${children}`}>
-            <button className="text-xs bg-orange-500 rounded-full text-white px-2 py-1 hover:bg-orange-600">
+            <button className="rounded-full bg-orange-500 px-2 py-1 text-xs text-white hover:bg-orange-600">
                 {children}
             </button>
         </Link>
diff --git a/src/components/Navigation/NavLink.tsx b/src/components/Navigation/NavLink.tsx
index 001125d..75cd429 100644
--- a/src/components/Navigation/NavLink.tsx
+++ b/src/components/Navigation/NavLink.tsx
@@ -8,19 +8,16 @@ export const NavLink = (props: { title: string; link: string }) => {
     const [highlight, setHighlight] = useState(false)
     const currentPage = window.location.pathname
 
-    const isHighlighted = () => {
+    useEffect(() => {
         if (link.toLowerCase() == currentPage.toLowerCase()) {
             setHighlight(true)
         } else {
             setHighlight(false)
         }
-    }
-    useEffect(() => {
-        isHighlighted()
-    }, [])
+    }, [link, currentPage])
     return (
         <button
-            className={`px-3 py-0 m-1 border-b-4 border-white hover:border-b-4 hover:border-orange-400 ${
+            className={`m-1 border-b-4 border-white px-3 py-0 hover:border-b-4 hover:border-orange-400 ${
                 highlight ? 'font-semibold' : ''
             }`}
             onClick={() => nav(link)}
diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
index 124a92d..1b0c65f 100644
--- a/src/components/Navigation/Navigation.tsx
+++ b/src/components/Navigation/Navigation.tsx
@@ -7,11 +7,11 @@ import LogoutButton from '../Auth/LogoutButton.tsx'
 
 export const Navigation = () => {
     return (
-        <div className="w-full bg-white p-8 flex md:justify-center justify-between">
+        <div className="flex w-full justify-between bg-white p-8 md:justify-center">
             <div className="justify-self-start">
                 <img src={logo} alt="logo" className="h-12" />
             </div>
-            <div className="hidden grow md:flex justify-center">
+            <div className="hidden grow justify-center md:flex">
                 <NavLink title="Home" link="/" />
                 <NavLink title="Resources" link="/resources" />
                 <NavLink title="Panic Page" link="/panic" />
@@ -24,7 +24,7 @@ export const Navigation = () => {
                     notSession={<LoginButton />}
                 />
             </div>
-            <div className="md:hidden justify-self-end flex items-center">
+            <div className="flex items-center justify-self-end md:hidden">
                 <FaBars size="2.5em" color="rgb(249 115 22)" />
             </div>
         </div>
diff --git a/src/components/Panic/PanicMain.tsx b/src/components/Panic/PanicMain.tsx
index 68354d9..05200a1 100644
--- a/src/components/Panic/PanicMain.tsx
+++ b/src/components/Panic/PanicMain.tsx
@@ -13,7 +13,7 @@ export const PanicMain = () => {
         const { title, link, image } = props
         return (
             <Link to={link} className="flex-1">
-                <div className="p-8 h-full flex flex-col justify-center items-center text-xl rounded m-8 bg-orange-300 text-center hover:bg-orange-400 font-semibold text-gray-800">
+                <div className="m-8 flex h-full flex-col items-center justify-center rounded bg-orange-300 p-8 text-center text-xl font-semibold text-gray-800 hover:bg-orange-400">
                     <img src={image} alt={title} />
                     {title}
                 </div>
diff --git a/src/components/Panic/PanicPredicament.tsx b/src/components/Panic/PanicPredicament.tsx
index 3a6505e..1ccd8a7 100644
--- a/src/components/Panic/PanicPredicament.tsx
+++ b/src/components/Panic/PanicPredicament.tsx
@@ -4,10 +4,10 @@ import ResourceTable from '@/components/Resources/ResourceTable.tsx'
 
 export const PanicPredicament = () => {
     return (
-        <div className="p-8 flex justify-center items-center flex-col">
+        <div className="flex flex-col items-center justify-center p-8">
             <img src={predicamentImage} alt="Prevention" className="w-1/2" />
             <H1 title="Predicament" />
-            <span className="text-center mb-6">
+            <span className="mb-6 text-center">
                 Here are a few resources for you if you're in crisis and need
                 medical attention
             </span>
diff --git a/src/components/Panic/PanicPrepare.tsx b/src/components/Panic/PanicPrepare.tsx
index 2334fc1..df94360 100644
--- a/src/components/Panic/PanicPrepare.tsx
+++ b/src/components/Panic/PanicPrepare.tsx
@@ -4,10 +4,10 @@ import ResourceTable from '@/components/Resources/ResourceTable.tsx'
 
 export const PanicPrepare = () => {
     return (
-        <div className="p-8 flex justify-center items-center flex-col">
+        <div className="flex flex-col items-center justify-center p-8">
             <img src={prepareImage} alt="Prevention" className="w-1/2" />
             <H1 title="Preparation" />
-            <span className="text-center mb-6">
+            <span className="mb-6 text-center">
                 Here are a few resources for you if you're feeling not-so-safe
                 and need to talk to someone immediately
             </span>
diff --git a/src/components/Panic/PanicPrevent.tsx b/src/components/Panic/PanicPrevent.tsx
index 465134e..1ae0462 100644
--- a/src/components/Panic/PanicPrevent.tsx
+++ b/src/components/Panic/PanicPrevent.tsx
@@ -4,10 +4,10 @@ import preventImage from '../../assets/panic - prevent.svg'
 
 export const PanicPrevent = () => {
     return (
-        <div className="p-8 flex justify-center items-center flex-col">
+        <div className="flex flex-col items-center justify-center p-8">
             <img src={preventImage} alt="Prevention" className="w-1/2" />
             <H1 title="Prevention" />
-            <span className="text-center mb-6">
+            <span className="mb-6 text-center">
                 Here are a few resources for you if you're feeling safe but
                 still need to reach out to someone
             </span>
diff --git a/src/components/Resources/ResourceTable.tsx b/src/components/Resources/ResourceTable.tsx
index dd42555..e3f4e1d 100644
--- a/src/components/Resources/ResourceTable.tsx
+++ b/src/components/Resources/ResourceTable.tsx
@@ -18,14 +18,14 @@ export default function ResourceTable() {
             setData(resources)
         }
         fetchData()
-    }, [])
+    }, [resourcesQuery])
     return (
-        <table className="w-full bg-white rounded-lg">
-            <thead className="border-solid border-0 border-b-8 border-orange-50 ">
+        <table className="w-full rounded-lg bg-white">
+            <thead className="border-0 border-b-8 border-solid border-orange-50 ">
                 <tr>
-                    <th className="text-left p-4">Resource</th>
-                    <th className="text-left p-4">Description</th>
-                    <th className="text-left p-4">Tags</th>
+                    <th className="p-4 text-left">Resource</th>
+                    <th className="p-4 text-left">Description</th>
+                    <th className="p-4 text-left">Tags</th>
                     <th></th>
                 </tr>
             </thead>
@@ -36,7 +36,7 @@ export default function ResourceTable() {
                             className="border-orange-50 hover:bg-gray-100"
                             key={d.name}
                         >
-                            <td className="p-4 w-96">
+                            <td className="w-96 p-4">
                                 <a
                                     className="text-orange-900 hover:underline"
                                     href={d.link}
@@ -47,10 +47,10 @@ export default function ResourceTable() {
                                 </a>
                             </td>
                             <td className="p-4">{d.description}</td>
-                            <td className="flex flex-wrap p-4 gap-1 w-48">
+                            <td className="flex w-48 flex-wrap gap-1 p-4">
                                 <TagSection resourceId={d.id} />
                             </td>
-                            <td className="text-xs p-4">
+                            <td className="p-4 text-xs">
                                 <Tooltip
                                     content={`This resource has helped ${d.num_helped} people`}
                                     animation="duration-1000"
@@ -59,7 +59,7 @@ export default function ResourceTable() {
                                 >
                                     <span
                                         data-tooltip-target="tooltip-default"
-                                        className="text-xs font-bold flex justify-end text-right"
+                                        className="flex justify-end text-right text-xs font-bold"
                                     >
                                         {d.num_helped}
                                         <FaHeart className="ml-1 text-orange-500 " />
diff --git a/src/components/Resources/SearchBar.tsx b/src/components/Resources/SearchBar.tsx
index 9643dca..f912d11 100644
--- a/src/components/Resources/SearchBar.tsx
+++ b/src/components/Resources/SearchBar.tsx
@@ -7,6 +7,8 @@ import { QueryData } from '@supabase/supabase-js'
 export const SearchBar = () => {
     const resourcesQuery = client.from('resources').select()
     type ResourcesType = QueryData<typeof resourcesQuery>
+    // TODO: Define type
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const [items, setItems] = useState<any>()
     useEffect(() => {
         const fetchData = async () => {
@@ -16,6 +18,6 @@ export const SearchBar = () => {
             setItems(resources)
         }
         fetchData()
-    }, [])
+    }, [resourcesQuery])
     return <ReactSearchAutocomplete items={items} />
 }
diff --git a/src/components/Suggestion/SuggestForms.tsx b/src/components/Suggestion/SuggestForms.tsx
index a482f93..1a06a87 100644
--- a/src/components/Suggestion/SuggestForms.tsx
+++ b/src/components/Suggestion/SuggestForms.tsx
@@ -64,7 +64,7 @@ export const ResourceForm = () => {
     return (
         <div className="w-6/12">
             <form id="suggest-form" onSubmit={submit}>
-                <h1 className="text-3xl pb-2">Input a Resource</h1>
+                <h1 className="pb-2 text-3xl">Input a Resource</h1>
                 <label htmlFor="title" className="font-bold">
                     Title
                 </label>
@@ -73,7 +73,7 @@ export const ResourceForm = () => {
                     type="text"
                     id="title"
                     name="title"
-                    className="w-full mb-6 p-2 rounded"
+                    className="mb-6 w-full rounded p-2"
                     value={title}
                     onChange={(e) => setTitle(e.target.value)}
                     required
@@ -88,7 +88,7 @@ export const ResourceForm = () => {
                     type="text"
                     id="url"
                     name="url"
-                    className="w-full mb-6 p-2 rounded"
+                    className="mb-6 w-full rounded p-2"
                     value={url}
                     onChange={(e) => setUrl(e.target.value)}
                     required
@@ -102,7 +102,7 @@ export const ResourceForm = () => {
                 <textarea
                     id="description"
                     name="description"
-                    className="w-full mb-6 p-2 rounded"
+                    className="mb-6 w-full rounded p-2"
                     value={description}
                     onChange={(e) => setDescription(e.target.value)}
                     required
@@ -117,7 +117,7 @@ export const ResourceForm = () => {
                 <button
                     type="submit"
                     disabled={isDisabled}
-                    className="px-8 py-3 bg-orange-500 rounded-full m-2 mt-6 text-white ml-0 enabled:hover:bg-orange-600 font-bold disabled:bg-gray-300"
+                    className="m-2 ml-0 mt-6 rounded-full bg-orange-500 px-8 py-3 font-bold text-white enabled:hover:bg-orange-600 disabled:bg-gray-300"
                 >
                     Submit
                 </button>
diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx
index 994db43..79a2a0a 100644
--- a/src/components/Tag.tsx
+++ b/src/components/Tag.tsx
@@ -4,7 +4,7 @@ type TagProps = {
 
 export default function Tag({ children }: TagProps) {
     return (
-        <div className="bg-orange-900 rounded-full text-white px-4 py-2">
+        <div className="rounded-full bg-orange-900 px-4 py-2 text-white">
             {children}
         </div>
     )
diff --git a/src/components/TagSection.tsx b/src/components/TagSection.tsx
index e8c26c8..3d1ba04 100644
--- a/src/components/TagSection.tsx
+++ b/src/components/TagSection.tsx
@@ -22,7 +22,7 @@ export default function TagSection({ resourceId }: TagSectionProps) {
             setTags(tags)
         }
         fetchData()
-    }, [])
+    }, [tagsQuery])
 
     return (
         <>
diff --git a/src/components/Text/Headings.tsx b/src/components/Text/Headings.tsx
index 697b7f0..fa5e5ca 100644
--- a/src/components/Text/Headings.tsx
+++ b/src/components/Text/Headings.tsx
@@ -1,7 +1,7 @@
 export const H1 = (props: { title: string }) => {
     const { title } = props
     return (
-        <h1 className="md:text-8xl text-center mb-4 text-gray-800 text-6xl">
+        <h1 className="mb-4 text-center text-6xl text-gray-800 md:text-8xl">
             {title}
         </h1>
     )
diff --git a/src/index.css b/src/index.css
index 9991028..0d87a0c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,7 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-
 input:focus {
     box-shadow: none !important;
-}
\ No newline at end of file
+}
diff --git a/src/utils/react-tagsinput.css b/src/utils/react-tagsinput.css
index 1c01dbd..4ae7788 100644
--- a/src/utils/react-tagsinput.css
+++ b/src/utils/react-tagsinput.css
@@ -7,14 +7,14 @@
 }
 
 .react-tagsinput--focused {
-    border-color: #FB923C;
+    border-color: #fb923c;
 }
 
 .react-tagsinput-tag {
-    background-color: #FDBA74;
+    background-color: #fdba74;
     border-radius: 2px;
-    border: 1px solid #FB923C;
-    color: #1C1917;
+    border: 1px solid #fb923c;
+    color: #1c1917;
     display: inline-block;
     font-family: sans-serif;
     font-size: 13px;
@@ -30,7 +30,7 @@
 }
 
 .react-tagsinput-tag a::before {
-    content: " ×";
+    content: ' ×';
 }
 
 .react-tagsinput-input {
diff --git a/src/views/AuthPages/ChangePasswordPage.tsx b/src/views/AuthPages/ChangePasswordPage.tsx
index e4e268f..a63fe2a 100644
--- a/src/views/AuthPages/ChangePasswordPage.tsx
+++ b/src/views/AuthPages/ChangePasswordPage.tsx
@@ -5,14 +5,14 @@ import AuthPageLayout from '@/components/Auth/AuthPageLayout'
 
 const LoginPage = () => {
     const ifSession = (
-        <div className="w-96 bg-orange-50 rounded-lg p-8">
+        <div className="w-96 rounded-lg bg-orange-50 p-8">
             <Auth redirectTo="/" view="changePassword" />
         </div>
     )
     const notSession = (
         <div className="text-xl text-white">
             You do not have access
-            <div className="flex justify-center my-12">
+            <div className="my-12 flex justify-center">
                 <LoginButton />
             </div>
         </div>
diff --git a/src/views/AuthPages/LoginPage.tsx b/src/views/AuthPages/LoginPage.tsx
index df5372e..187f580 100644
--- a/src/views/AuthPages/LoginPage.tsx
+++ b/src/views/AuthPages/LoginPage.tsx
@@ -6,14 +6,14 @@ const LoginPage = () => {
     const ifSession = (
         <div className="text-xl text-white">
             Welcome to our site! You are logged in.
-            <div className="flex justify-center my-12 gap-4">
+            <div className="my-12 flex justify-center gap-4">
                 <a href="/">
-                    <button className="bg-white text-orange-950 rounded-full px-4 py-2">
+                    <button className="rounded-full bg-white px-4 py-2 text-orange-950">
                         Find out More
                     </button>
                 </a>
                 <a href="/change-password">
-                    <button className="bg-white text-orange-950 rounded-full px-4 py-2">
+                    <button className="rounded-full bg-white px-4 py-2 text-orange-950">
                         Change Password
                     </button>
                 </a>
@@ -21,7 +21,7 @@ const LoginPage = () => {
         </div>
     )
     const notSession = (
-        <div className="w-96 bg-orange-50 rounded-lg p-8">
+        <div className="w-96 rounded-lg bg-orange-50 p-8">
             <Auth view="signIn" redirectTo="/" />
         </div>
     )
diff --git a/src/views/ErrorPage/NotFoundPage.tsx b/src/views/ErrorPage/NotFoundPage.tsx
index 2845a0c..03d0635 100644
--- a/src/views/ErrorPage/NotFoundPage.tsx
+++ b/src/views/ErrorPage/NotFoundPage.tsx
@@ -1,7 +1,7 @@
 import { useRouteError } from 'react-router-dom'
 
 export default function NotFoundPage() {
-    const error: any = useRouteError()
+    const error: Record<string, string> | unknown = useRouteError()
     console.error(error)
 
     return (
diff --git a/src/views/PanicPage/PanicPage.tsx b/src/views/PanicPage/PanicPage.tsx
index 9acf698..af762ec 100644
--- a/src/views/PanicPage/PanicPage.tsx
+++ b/src/views/PanicPage/PanicPage.tsx
@@ -30,7 +30,7 @@ export const PanicPage = (props: { level: string }) => {
         }
     }, [location, level])
     return (
-        <div className="relative w-screen min-h-screen bg-orange-50">
+        <div className="relative min-h-screen w-screen bg-orange-50">
             <Navigation />
             {activePage}
             <Footer />
diff --git a/src/views/ResourcesPage/ResourcesPage.tsx b/src/views/ResourcesPage/ResourcesPage.tsx
index 3c32ae9..874fe98 100644
--- a/src/views/ResourcesPage/ResourcesPage.tsx
+++ b/src/views/ResourcesPage/ResourcesPage.tsx
@@ -6,7 +6,7 @@ import { Footer } from '@/components/Footer/Footer.tsx'
 
 export const ResourcesPage = () => {
     return (
-        <div className="relative w-screen min-h-screen bg-orange-50">
+        <div className="relative min-h-screen w-screen bg-orange-50">
             <Navigation />
             <section className="p-8">
                 <H1 title="Resources" />
diff --git a/src/views/SuggestionPage/SuggestionPage.tsx b/src/views/SuggestionPage/SuggestionPage.tsx
index 60596c4..2d0b93c 100644
--- a/src/views/SuggestionPage/SuggestionPage.tsx
+++ b/src/views/SuggestionPage/SuggestionPage.tsx
@@ -5,7 +5,7 @@ export const SuggestionPage = () => {
     return (
         <>
             <Navigation />
-            <div className="container mx-auto px-4 py-8 bg-orange-200 flex justify-center">
+            <div className="container mx-auto flex justify-center bg-orange-200 px-4 py-8">
                 <ResourceForm />
             </div>
         </>