From 0c4a1047064c54975d7903af09a3176473c1f2e9 Mon Sep 17 00:00:00 2001
From: Nathan LeRoy <NLeRoy917@gmail.com>
Date: Wed, 22 Jun 2022 12:38:17 -0400
Subject: [PATCH 1/4] label as github

---
 web/src/pages/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/web/src/pages/index.tsx b/web/src/pages/index.tsx
index c868b366..7ce07c25 100644
--- a/web/src/pages/index.tsx
+++ b/web/src/pages/index.tsx
@@ -46,7 +46,6 @@ export default function HomePage() {
               <span className="px-1 text-sm">GitHub</span>
             </button>
             <button
-              disabled={true}
               onClick={() => router.push("https://github.com/nleroy917/optipyzer")} 
               className="flex flex-row items-center w-32 px-2 py-1 mr-1 font-bold transition-all bg-gray-100 border-2 border-black rounded-lg opacity-50 cursor-not-allowed justify-evenly"
             >
@@ -56,7 +55,7 @@ export default function HomePage() {
                 src={paper.src}
                 alt="GitHub logo"
               />
-              <span className="px-1 text-sm">Publication</span>
+              <span className="px-1 text-sm">GitHub</span>
             </button>
           </div>
           <h1 className="py-4 mb-4 text-6xl font-bold text-center text-blue-600 md:text-left md:text-8xl">Optipyzer</h1>

From b7be8272ff57723a2394a81435d0afb48cf2d803 Mon Sep 17 00:00:00 2001
From: Nathan LeRoy <NLeRoy917@gmail.com>
Date: Wed, 22 Jun 2022 12:52:35 -0400
Subject: [PATCH 2/4] semantic html (form) for optimize page

---
 web/src/components/SeqTypeSelector.tsx |  2 +-
 web/src/pages/optimize.tsx             | 17 +++++++++--------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/web/src/components/SeqTypeSelector.tsx b/web/src/components/SeqTypeSelector.tsx
index f3e042f4..7b644f1e 100644
--- a/web/src/components/SeqTypeSelector.tsx
+++ b/web/src/components/SeqTypeSelector.tsx
@@ -11,7 +11,7 @@ const SeqTypeSelector: FC<Props> = (props) => {
   const {seqType, setSeqType } = props
   
   return (
-      <div className="flex flex-row p-2 mb-2 border border-black rounded-lg shadow-md">
+      <div className="flex flex-row p-2 mb-2 border border-black rounded-lg shadow-md w-max">
         <div className="flex flex-row items-center mr-2">
           <input 
             type="radio" 
diff --git a/web/src/pages/optimize.tsx b/web/src/pages/optimize.tsx
index 45ac7fa3..9d6cb37e 100644
--- a/web/src/pages/optimize.tsx
+++ b/web/src/pages/optimize.tsx
@@ -1,6 +1,6 @@
 import axios, { AxiosError, AxiosResponse } from 'axios';
 import Link from 'next/link';
-import { useState } from 'react';
+import { FormEvent, useState } from 'react';
 
 import { Error } from '@/components/Error';
 import Results from '@/components/Results';
@@ -23,7 +23,8 @@ export default function OptimizePage() {
   const [result, setResult] = useState<QueryResult | null>(null)
   const [error, setError] = useState<QueryError | null>(null)
 
-  const handleSubmit = () => {
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
     setOptimizing(true)
 
     // purge unused species weights
@@ -77,13 +78,14 @@ export default function OptimizePage() {
           </Link>
         </div>
         <h1 className="py-2 text-4xl font-bold text-blue-600 md:text-6xl">Optimize sequence:</h1>
-        <p className="text-lg font-bold text-blue-600">Sequence type:</p>
+        <form className='w-full' onSubmit={handleSubmit}>
+        <label className="text-lg font-bold text-blue-600">Sequence type:</label>
           <SeqTypeSelector
             setSeqType={setSeqType}
             seqType={seqType}
           />
         <div className="w-full my-1 md:w-3/4">
-          <p className="text-lg font-bold text-blue-600">Select species:</p>
+          <label className="text-lg font-bold text-blue-600">Select species:</label>
           <SpeciesSelector 
             setSpecies={setSpecies}
             species={species}
@@ -95,7 +97,7 @@ export default function OptimizePage() {
           species.length === 0 ?
           <div></div>
           : 
-          <div>
+          <div className='w-max'>
             <p className="text-lg font-bold text-blue-600">Adjust weights:</p>
             <div className="flex flex-col w-full mr-2 md:flex-row">
             {
@@ -122,13 +124,12 @@ export default function OptimizePage() {
         />
         <button
           className="px-4 py-2 my-2 text-lg font-bold text-white transition-all bg-blue-600 border-2 border-blue-600 rounded-lg hover:bg-white hover:text-blue-600 hover:border-blue-600"
-          onClick={() => {
-            handleSubmit()
-          }}
+          type='submit'
           disabled={optimizing}
         >
           {optimizing ? "Optimizing..." : "Optimize"}
         </button>
+        </form>
       </main>
       </>
     )

From 7c8b181a7ae90aa546a7b942dd5202dca80bfdb6 Mon Sep 17 00:00:00 2001
From: Nathan LeRoy <NLeRoy917@gmail.com>
Date: Wed, 22 Jun 2022 12:56:53 -0400
Subject: [PATCH 3/4] remove pub button for now

---
 web/src/pages/index.tsx    | 11 +++++------
 web/src/pages/optimize.tsx |  2 +-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/web/src/pages/index.tsx b/web/src/pages/index.tsx
index 7ce07c25..577f69cd 100644
--- a/web/src/pages/index.tsx
+++ b/web/src/pages/index.tsx
@@ -45,18 +45,17 @@ export default function HomePage() {
               />
               <span className="px-1 text-sm">GitHub</span>
             </button>
-            <button
+            {/* <button
               onClick={() => router.push("https://github.com/nleroy917/optipyzer")} 
               className="flex flex-row items-center w-32 px-2 py-1 mr-1 font-bold transition-all bg-gray-100 border-2 border-black rounded-lg opacity-50 cursor-not-allowed justify-evenly"
             >
-              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
                 width="20px"
                 src={paper.src}
-                alt="GitHub logo"
+                alt="Paper logo"
               />
-              <span className="px-1 text-sm">GitHub</span>
-            </button>
+              <span className="px-1 text-sm">Publication</span>
+            </button> */}
           </div>
           <h1 className="py-4 mb-4 text-6xl font-bold text-center text-blue-600 md:text-left md:text-8xl">Optipyzer</h1>
           <p className="mb-8 text-sm text-center md:text-left md:text-base md:w-7/12">
@@ -92,7 +91,7 @@ export default function HomePage() {
       <footer className="bottom-0 w-full px-4 -translate-y-20">
         <div className="flex flex-col items-center justify-center text-xs text-gray-400 md:flex-row md:justify-evenly md:text-base">
           <p className="my-1">
-            © 2021
+            © {(new Date()).getFullYear()}
           </p>
           <a href="https://github.com/NLeRoy917/optipyzer" className="my-1 hover:underline">
            v{version}
diff --git a/web/src/pages/optimize.tsx b/web/src/pages/optimize.tsx
index 9d6cb37e..464b3e7b 100644
--- a/web/src/pages/optimize.tsx
+++ b/web/src/pages/optimize.tsx
@@ -74,7 +74,7 @@ export default function OptimizePage() {
       <main className="flex flex-col items-start justify-start p-4">
         <div className="text-blue-600 underline">
           <Link href="/">
-            Back
+          ← Back
           </Link>
         </div>
         <h1 className="py-2 text-4xl font-bold text-blue-600 md:text-6xl">Optimize sequence:</h1>

From dabd75d42fb9090e00bf5a4c3b77a0a1fdd93e21 Mon Sep 17 00:00:00 2001
From: Nathan LeRoy <NLeRoy917@gmail.com>
Date: Thu, 23 Jun 2022 10:23:37 -0400
Subject: [PATCH 4/4] small updates

---
 web/.eslintrc.js                       |  60 -------
 web/.eslintrc.json                     |  13 ++
 web/.prettierrc.js                     |   7 -
 web/.prettierrc.json                   |   7 +
 web/.vscode/settings.json              |   8 +-
 web/commitlint.config.js               |   2 +-
 web/index.d.ts                         |  35 ++--
 web/next.config.js                     |   2 +-
 web/package.json                       |   7 +-
 web/postcss.config.js                  |   2 +-
 web/public/site.webmanifest            |  20 ++-
 web/src/components/CodonUsageModal.tsx | 135 +++++++++++++++
 web/src/components/CopyToClipboard.tsx |  70 ++++----
 web/src/components/Error.tsx           | 167 +++++++++----------
 web/src/components/ResultInfo.tsx      |  68 ++++----
 web/src/components/Results.tsx         |  34 ++--
 web/src/components/Seo.tsx             |  45 ++---
 web/src/components/SeqInput.tsx        |  64 +++----
 web/src/components/SeqTypeSelector.tsx |  55 +++---
 web/src/components/SpeciesSelector.tsx |  78 ++++-----
 web/src/components/WeightSelector.tsx  | 101 ++++++-----
 web/src/data/species_popular.ts        |  32 ++--
 web/src/pages/404.tsx                  |  22 ++-
 web/src/pages/_app.tsx                 |   8 +-
 web/src/pages/_document.tsx            |  22 +--
 web/src/pages/api/version.ts           |   9 +-
 web/src/pages/index.tsx                | 102 +++++++-----
 web/src/pages/optimize.tsx             | 221 +++++++++++++------------
 web/src/utils/purgeWeights.ts          |  13 +-
 web/src/utils/speciesSelection.ts      | 150 ++++++++---------
 web/src/utils/validateSequence.ts      |  93 +++++++----
 web/tailwind.config.js                 |  10 +-
 web/tsconfig.json                      |  26 +--
 web/yarn.lock                          | 170 ++++++++++++++-----
 34 files changed, 1069 insertions(+), 789 deletions(-)
 delete mode 100644 web/.eslintrc.js
 create mode 100644 web/.eslintrc.json
 delete mode 100644 web/.prettierrc.js
 create mode 100644 web/.prettierrc.json
 create mode 100644 web/src/components/CodonUsageModal.tsx

diff --git a/web/.eslintrc.js b/web/.eslintrc.js
deleted file mode 100644
index 19e0d127..00000000
--- a/web/.eslintrc.js
+++ /dev/null
@@ -1,60 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-    node: true,
-  },
-  plugins: ['@typescript-eslint', 'simple-import-sort'],
-  extends: [
-    'eslint:recommended',
-    'next',
-    'next/core-web-vitals',
-    'plugin:@typescript-eslint/recommended',
-    'prettier',
-  ],
-  rules: {
-    'no-unused-vars': 'off',
-    'no-console': 'warn',
-    '@typescript-eslint/explicit-module-boundary-types': 'off',
-
-    // Sort
-    'simple-import-sort/exports': 'warn',
-    'simple-import-sort/imports': [
-      'warn',
-      {
-        groups: [
-          // ext library & side effect imports
-          ['^@?\\w', '^\\u0000'],
-          // {s}css files
-          ['^.+\\.s?css$'],
-          // Lib and hooks
-          ['^@/lib', '^@/hooks'],
-          // static data
-          ['^@/data'],
-          // components
-          ['^@/components'],
-          // Other imports
-          ['^@/'],
-          // relative paths up until 3 level
-          [
-            '^\\./?$',
-            '^\\.(?!/?$)',
-            '^\\.\\./?$',
-            '^\\.\\.(?!/?$)',
-            '^\\.\\./\\.\\./?$',
-            '^\\.\\./\\.\\.(?!/?$)',
-            '^\\.\\./\\.\\./\\.\\./?$',
-            '^\\.\\./\\.\\./\\.\\.(?!/?$)',
-          ],
-          ['^@/types'],
-          // other that didnt fit in
-          ['^'],
-        ],
-      },
-    ],
-  },
-  globals: {
-    React: true,
-    JSX: true,
-  },
-};
diff --git a/web/.eslintrc.json b/web/.eslintrc.json
new file mode 100644
index 00000000..78ad8c57
--- /dev/null
+++ b/web/.eslintrc.json
@@ -0,0 +1,13 @@
+{
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "rules": {
+    // I suggest you add those two rules:
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-explicit-any": "error"
+  }
+}
diff --git a/web/.prettierrc.js b/web/.prettierrc.js
deleted file mode 100644
index 5c344645..00000000
--- a/web/.prettierrc.js
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
-  arrowParens: 'always',
-  singleQuote: true,
-  jsxSingleQuote: true,
-  tabWidth: 2,
-  semi: true,
-};
diff --git a/web/.prettierrc.json b/web/.prettierrc.json
new file mode 100644
index 00000000..043b0cd7
--- /dev/null
+++ b/web/.prettierrc.json
@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false
+}
diff --git a/web/.vscode/settings.json b/web/.vscode/settings.json
index b87ebcca..2c51c4be 100644
--- a/web/.vscode/settings.json
+++ b/web/.vscode/settings.json
@@ -1,8 +1,10 @@
 {
   "css.validate": false,
-  "editor.formatOnSave": true,
   "editor.tabSize": 2,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
-  }
+    "source.fixAll": true,
+    "source.fixAll.eslint": true
+  },
+  "editor.formatOnSave": true, // Tell VSCode to format files on save
+  "editor.defaultFormatter": "esbenp.prettier-vscode" // Tell VSCode to use Prettier as default file formatter
 }
diff --git a/web/commitlint.config.js b/web/commitlint.config.js
index 3bf488d0..01c9d735 100644
--- a/web/commitlint.config.js
+++ b/web/commitlint.config.js
@@ -21,4 +21,4 @@ module.exports = {
       ],
     ],
   },
-};
+}
diff --git a/web/index.d.ts b/web/index.d.ts
index fe6765d8..bbc41644 100644
--- a/web/index.d.ts
+++ b/web/index.d.ts
@@ -1,28 +1,27 @@
 /// <reference types="@types/react" />
 
 export interface Species {
-  id: number;
-  name: string;
-  type: string | null;
+  id: number
+  name: string
+  type: string | null
 }
 
 export interface Weights {
-  [id: number]: number;
+  [id: number]: number
 }
 
 export interface QueryResult {
   best_expression_ad: {
-    [id: string]: number;
-  };
+    [id: string]: number
+  }
   best_expression_sd: {
-    [id: string]: number;
-  };
-  optimized_ad: string;
-  optimized_sd: string;
-  peptide_seq: string;
-  seq_type: string;
-  stop_codon: 0; 
-
+    [id: string]: number
+  }
+  optimized_ad: string
+  optimized_sd: string
+  peptide_seq: string
+  seq_type: string
+  stop_codon: 0
 }
 
 export interface QueryError {
@@ -31,8 +30,8 @@ export interface QueryError {
 }
 
 export interface ServerInfo {
-  message: string;
-  url: string;
-  version: string;
-  fastapi_version: string;
+  message: string
+  url: string
+  version: string
+  fastapi_version: string
 }
diff --git a/web/next.config.js b/web/next.config.js
index fa26d2d1..a5e2a2a7 100644
--- a/web/next.config.js
+++ b/web/next.config.js
@@ -2,4 +2,4 @@ module.exports = {
   eslint: {
     dirs: ['src'],
   },
-};
+}
diff --git a/web/package.json b/web/package.json
index eee37e5e..254cea69 100644
--- a/web/package.json
+++ b/web/package.json
@@ -17,6 +17,7 @@
     "postbuild": "next-sitemap"
   },
   "dependencies": {
+    "@headlessui/react": "^1.6.5",
     "@tailwindcss/forms": "^0.3.4",
     "@types/debounce-promise": "^3.1.4",
     "@types/lodash.debounce": "^4.0.6",
@@ -39,15 +40,15 @@
     "@types/node": "^17.0.18",
     "@types/react": "^17.0.30",
     "@types/tailwindcss": "^2.2.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
     "@typescript-eslint/parser": "^4.33.0",
     "eslint": "^7.32.0",
     "eslint-config-next": "^11.1.2",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "lint-staged": "^11.2.3",
     "next-sitemap": "^1.6.184",
-    "prettier": "^2.4.1",
+    "prettier": "^2.7.1",
     "standard-version": "^9.3.1",
     "tailwindcss": "^2.2.17",
     "typescript": "^4.4.4"
diff --git a/web/postcss.config.js b/web/postcss.config.js
index 12a703d9..33ad091d 100644
--- a/web/postcss.config.js
+++ b/web/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-};
+}
diff --git a/web/public/site.webmanifest b/web/public/site.webmanifest
index 45dc8a20..fa99de77 100644
--- a/web/public/site.webmanifest
+++ b/web/public/site.webmanifest
@@ -1 +1,19 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/web/src/components/CodonUsageModal.tsx b/web/src/components/CodonUsageModal.tsx
new file mode 100644
index 00000000..763fedad
--- /dev/null
+++ b/web/src/components/CodonUsageModal.tsx
@@ -0,0 +1,135 @@
+import { Dialog } from '@headlessui/react'
+import axios, { AxiosResponse } from 'axios'
+import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
+
+interface CodonUsage {
+  organism: {
+    org_id: number
+    division: string
+    assembly: string
+    taxid: number
+    species: string
+    organelle: string
+    translation_table: number
+    num_CDS: number
+    num_codons: number
+    GC_perc: number
+    GC1_perc: number
+    GC2_perc: number
+    GC3_perc: number
+  }
+  counts: {
+    [aa: string]: {
+      [codon: string]: number
+    }
+  }
+  codon_usage: {
+    [aa: string]: {
+      [codon: string]: number
+    }
+  }
+}
+
+interface Props {
+  open: boolean
+  setOpen: Dispatch<SetStateAction<boolean>>
+  orgId: number | string
+}
+
+async function fetchCodonUsage(
+  orgId: number | string,
+  setCodonUsage: Dispatch<SetStateAction<CodonUsage | undefined>>,
+  setLoading: Dispatch<SetStateAction<boolean>>
+) {
+  // call API
+  setLoading(true)
+  const res: AxiosResponse<CodonUsage> = await axios.get(
+    `${process.env.NEXT_PUBLIC_API_URL}/species/${orgId}/codons`
+  )
+  setCodonUsage(await res.data)
+  setLoading(false)
+}
+
+export const CodonUsageModal: FC<Props> = (props) => {
+  const { open, setOpen, orgId } = props
+  const [loading, setLoading] = useState<boolean>(false)
+  const [codonUsage, setCodonUsage] = useState<CodonUsage>()
+  const [selectedCodon, setSelectedCodon] = useState<string>('')
+
+  useEffect(() => {
+    if (open) {
+      fetchCodonUsage(orgId, setCodonUsage, setLoading)
+    }
+  }, [open, orgId, setCodonUsage])
+  return (
+    <Dialog
+      open={open}
+      onClose={() => setOpen(false)}
+      className="relative z-50"
+    >
+      {/* The backdrop, rendered as a fixed sibling to the panel container */}
+      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+      {/* Full-screen container to center the panel */}
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <Dialog.Panel className="max-w-lg p-2 mx-auto bg-white border-2 border-black rounded-md w-96 min-w-md">
+          <Dialog.Title className="border-b border-black">
+            <h4 className="text-xl">
+              Codon Usage for <span className="font-bold">{orgId}</span>
+            </h4>
+          </Dialog.Title>
+          {codonUsage === undefined || loading ? (
+            <div className="w-full p-4">
+              <div className="w-full text-center animate-pulse">
+                Fetching...
+              </div>
+            </div>
+          ) : (
+            <div className="my-2">
+              <select
+                className="px-3 py-0 rounded-md"
+                value={selectedCodon}
+                onChange={(e) => setSelectedCodon(e.target.value)}
+              >
+                <option value={''}>Select Codon</option>
+                {Object.keys(codonUsage.codon_usage).map((aa) => (
+                  <option key={aa} value={aa}>
+                    {aa.toUpperCase()}
+                  </option>
+                ))}
+              </select>
+              <div className="p-1 my-2">
+                {selectedCodon === '' ? (
+                  <div>
+                    <p className="italic">Select a codon above</p>
+                  </div>
+                ) : (
+                  Object.keys(codonUsage.codon_usage[selectedCodon]).map(
+                    (c) => {
+                      return (
+                        <div key={c}>
+                          <span className="mr-1 font-bold">{c}:</span>
+                          <span>
+                            {Math.round(
+                              codonUsage.codon_usage[selectedCodon][c] * 100
+                            )}
+                            %
+                          </span>
+                        </div>
+                      )
+                    }
+                  )
+                )}
+              </div>
+            </div>
+          )}
+          <button
+            className="px-4 py-1 text-white transition-all bg-blue-600 rounded-md hover:bg-blue-700"
+            onClick={() => setOpen(false)}
+          >
+            Close
+          </button>
+        </Dialog.Panel>
+      </div>
+    </Dialog>
+  )
+}
diff --git a/web/src/components/CopyToClipboard.tsx b/web/src/components/CopyToClipboard.tsx
index 70af69a6..3af7bc33 100644
--- a/web/src/components/CopyToClipboard.tsx
+++ b/web/src/components/CopyToClipboard.tsx
@@ -1,47 +1,47 @@
 import Image from 'next/image'
-import { FC, useState } from "react";
+import { FC, useState } from 'react'
 
 interface Props {
-    content: string;
+  content: string
 }
 
 const CopyToClipboard: FC<Props> = (props) => {
-    
-    // state
-    const [copied, setCopied] = useState<boolean>(false)
+  // state
+  const [copied, setCopied] = useState<boolean>(false)
 
-    const { content } = props
+  const { content } = props
 
-    const copyToClipboard = (text: string) => {
-        navigator.clipboard.writeText(text)
-    }
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text)
+  }
 
-    const handleCopy = () => {
-        copyToClipboard(content)
-        setCopied(true)
-        setTimeout(() => setCopied(false), 2000)
-    }
+  const handleCopy = () => {
+    copyToClipboard(content)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
 
-    return (
-        <button
-            className="flex flex-col items-center justify-center px-1 mx-2 text-sm transition-all bg-gray-100 border border-black rounded-md shadow-xl hover:shadow-sm hover:bg-gray-300"
-            onClick={handleCopy}
-            disabled={copied}
-            style={{
-                minHeight: "30px"
-            }}
-        >
-            {
-              copied ? <span className="mx-1 text-lg font-bold">✓</span> :
-              <Image 
-                src="/images/clipboard.png" 
-                alt="Copy to clipboard"
-                height="28"
-                width="28"
-              />
-            }
-        </button>
-    )
+  return (
+    <button
+      className="flex flex-col items-center justify-center px-1 mx-2 text-sm transition-all bg-gray-100 border border-black rounded-md shadow-xl hover:shadow-sm hover:bg-gray-300"
+      onClick={handleCopy}
+      disabled={copied}
+      style={{
+        minHeight: '30px',
+      }}
+    >
+      {copied ? (
+        <span className="mx-1 text-lg font-bold">✓</span>
+      ) : (
+        <Image
+          src="/images/clipboard.png"
+          alt="Copy to clipboard"
+          height="28"
+          width="28"
+        />
+      )}
+    </button>
+  )
 }
 
-export default CopyToClipboard
\ No newline at end of file
+export default CopyToClipboard
diff --git a/web/src/components/Error.tsx b/web/src/components/Error.tsx
index 794d9887..571eadd2 100644
--- a/web/src/components/Error.tsx
+++ b/web/src/components/Error.tsx
@@ -1,104 +1,101 @@
+import { AxiosResponse } from 'axios'
+import Link from 'next/link'
+import { Dispatch, FC, SetStateAction } from 'react'
 
-   
-import { AxiosResponse } from "axios"
-import Link from "next/link"
-import { Dispatch, FC, SetStateAction } from "react"
-
-import { QueryError } from "@/.."
+import { QueryError } from '@/..'
 
 const ErrorHeader = () => {
-    return (
-        <p className="my-8 text-5xl font-bold text-center">
-            Oops! An error occured.
-        </p>
-    )
+  return (
+    <p className="my-8 text-5xl font-bold text-center">
+      Oops! An error occured.
+    </p>
+  )
 }
 
 export interface ErrorObject {
-    response?: AxiosResponse
-    stack?: Error
+  response?: AxiosResponse
+  stack?: Error
 }
 
 interface ErrorMessageProps {
-    error: ErrorObject,
-    setError: Dispatch<SetStateAction<QueryError | null>>
+  error: ErrorObject
+  setError: Dispatch<SetStateAction<QueryError | null>>
 }
 
 const ErrorMessage: FC<ErrorMessageProps> = (props) => {
-    const { error, setError } = props
-    if(error.response) {
-        return (
-            <div>
-                {
-                    error.response ?
-                    <div className="p-4 mx-6 bg-blue-200 border-2 border-blue-500 rounded-md shadow-lg">
-                        <p className="mb-4 text-3xl font-bold text-center md:text-left">
-                            Error Code: {error.response.status}
-                        </p>
-                        <code className="mx-auto break-all">
-                          {
-                              JSON.stringify(error.response.data, null, 2)
-                          }
-                        </code>
-                        <div className="flex flex-row justify-center mt-4 md:justify-start">
-                          <Link href="https://github.com/nleroy917/optipyzer/issues" passHref>
-                            <button className="px-6 py-2 mr-1 font-bold text-white transition-all bg-black border-2 border-black rounded-lg hover:bg-transparent hover:text-black">
-                                Report Issue
-                            </button>
-                          </Link>
-                          <Link href="/optimize" passHref>
-                            <button onClick={() => setError(null)} className="px-6 py-2 mx-1 font-bold text-white transition-all bg-black border-2 border-black rounded-lg hover:bg-transparent hover:text-black">
-                                Back
-                            </button>
-                          </Link>                            
-                        </div>
-                    </div>
-                  : <div></div>
-                }
-            </div>
-        )
-    } else {
-        return (
-            <div className="p-4 mx-6 font-bold text-center bg-blue-200 border-2 border-blue-500 rounded-md shadow-md">
-                <code>
-                    {
-                        error.toString()
-                    }
-                </code>
-                <br></br>
-                <code>
-                    {
-                        error.stack
-                    }
-                </code>
-                <div className="flex flex-row justify-center mt-4">
-                  <Link href="https://github.com/nleroy917/optipyzer/issues" passHref>
-                    <button className="px-6 py-2 mr-1 font-bold text-white transition-all bg-black border-2 border-black rounded-lg hover:bg-transparent hover:text-black">
-                        Report Issue
-                    </button>
-                  </Link>
-                  <Link href="/optimize" passHref>
-                    <button onClick={() => setError(null)} className="px-6 py-2 mx-1 font-bold text-white transition-all bg-black border-2 border-black rounded-lg hover:bg-transparent hover:text-black">
-                        Back
-                    </button>
-                  </Link>                            
-                </div>
+  const { error, setError } = props
+  if (error.response) {
+    return (
+      <div>
+        {error.response ? (
+          <div className="p-4 mx-6 bg-blue-200 border-2 border-blue-500 rounded-md shadow-lg">
+            <p className="mb-4 text-3xl font-bold text-center md:text-left">
+              Error Code: {error.response.status}
+            </p>
+            <code className="mx-auto break-all">
+              {JSON.stringify(error.response.data, null, 2)}
+            </code>
+            <div className="flex flex-row justify-center mt-4 md:justify-start">
+              <Link
+                href="https://github.com/nleroy917/optipyzer/issues"
+                passHref
+              >
+                <button className="px-6 py-2 mr-1 font-bold text-white transition-all bg-black border-2 border-black rounded-lg hover:bg-transparent hover:text-black">
+                  Report Issue
+                </button>
+              </Link>
+              <Link href="/optimize" passHref>
+                <button
+                  onClick={() => setError(null)}
+                  className="px-6 py-2 mx-1 font-bold text-white transition-all bg-black border-2 border-black rounded-lg hover:bg-transparent hover:text-black"
+                >
+                  Back
+                </button>
+              </Link>
             </div>
-        )
-    }
+          </div>
+        ) : (
+          <div></div>
+        )}
+      </div>
+    )
+  } else {
+    return (
+      <div className="p-4 mx-6 font-bold text-center bg-blue-200 border-2 border-blue-500 rounded-md shadow-md">
+        <code>{error.toString()}</code>
+        <br></br>
+        <code>{error.stack}</code>
+        <div className="flex flex-row justify-center mt-4">
+          <Link href="https://github.com/nleroy917/optipyzer/issues" passHref>
+            <button className="px-6 py-2 mr-1 font-bold text-white transition-all bg-black border-2 border-black rounded-lg hover:bg-transparent hover:text-black">
+              Report Issue
+            </button>
+          </Link>
+          <Link href="/optimize" passHref>
+            <button
+              onClick={() => setError(null)}
+              className="px-6 py-2 mx-1 font-bold text-white transition-all bg-black border-2 border-black rounded-lg hover:bg-transparent hover:text-black"
+            >
+              Back
+            </button>
+          </Link>
+        </div>
+      </div>
+    )
+  }
 }
 
 interface ErrorProps {
-    error: ErrorObject
-    setError: Dispatch<SetStateAction<QueryError | null>>
+  error: ErrorObject
+  setError: Dispatch<SetStateAction<QueryError | null>>
 }
 
 export const Error: FC<ErrorProps> = (props) => {
-    const { error, setError } = props
-    return (
-        <div className="flex flex-col items-center justify-center min-h-screen">
-            <ErrorHeader />
-            <ErrorMessage error={error} setError={setError}/>
-        </div>
-    )
-}
\ No newline at end of file
+  const { error, setError } = props
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen">
+      <ErrorHeader />
+      <ErrorMessage error={error} setError={setError} />
+    </div>
+  )
+}
diff --git a/web/src/components/ResultInfo.tsx b/web/src/components/ResultInfo.tsx
index 6b6c8eea..5976c6dd 100644
--- a/web/src/components/ResultInfo.tsx
+++ b/web/src/components/ResultInfo.tsx
@@ -1,41 +1,47 @@
-import { Dispatch, FC, SetStateAction } from "react";
+import { Dispatch, FC, SetStateAction } from 'react'
 
 interface Props {
-    open: boolean;
-    setOpen: Dispatch<SetStateAction<boolean>>
+  open: boolean
+  setOpen: Dispatch<SetStateAction<boolean>>
 }
 
 const ResultInfo: FC<Props> = (props) => {
+  // destructure props
+  const { open, setOpen } = props
 
-    // destructure props
-    const { open, setOpen } = props
-
-    return (
-      <div className="flex flex-row justify-center">
-        <div 
-            style={{position: 'absolute', display: open ? 'block' : 'none'}} 
-            className="w-10/12 p-2 mt-4 text-sm bg-yellow-400 border-2 border-black rounded-lg shadow-2xl md:w-1/2 -top-0 md:text-base md:top-0"
+  return (
+    <div className="flex flex-row justify-center">
+      <div
+        style={{ position: 'absolute', display: open ? 'block' : 'none' }}
+        className="w-10/12 p-2 mt-4 text-sm bg-yellow-400 border-2 border-black rounded-lg shadow-2xl md:w-1/2 -top-0 md:text-base md:top-0"
+      >
+        <div className="flex flex-row justify-between mx-1">
+          <p className="text-xl font-bold">About query results:</p>
+          <button
+            className="hover:cursor-pointer hover:text-gray-700"
+            onClick={() => setOpen(false)}
           >
-            <div className="flex flex-row justify-between mx-1">
-              <p className="text-xl font-bold">About query results:</p>
-              <button
-                className="hover:cursor-pointer hover:text-gray-700"
-                onClick={() => setOpen(false)}
-              >
-                ⓧ
-              </button>
-            </div>
-            <div className="p-1 font-normal">
-              Your optimized query will consider the codon usage bias of one or more organisms. Below you are given two optimized sequences:
-              <ul className="my-2">
-                <li><span className="ml-2 font-bold">Optimized AD:</span> Your opimized sequence using the</li>
-                <li><span className="ml-2 font-bold">Optimized SD:</span> Your opimized sequence using the</li>
-              </ul>
-              As well, you are given the translated sequence.
-            </div>
-          </div>
+            ⓧ
+          </button>
+        </div>
+        <div className="p-1 font-normal">
+          Your optimized query will consider the codon usage bias of one or more
+          organisms. Below you are given two optimized sequences:
+          <ul className="my-2">
+            <li>
+              <span className="ml-2 font-bold">Optimized AD:</span> Your
+              opimized sequence using the
+            </li>
+            <li>
+              <span className="ml-2 font-bold">Optimized SD:</span> Your
+              opimized sequence using the
+            </li>
+          </ul>
+          As well, you are given the translated sequence.
         </div>
-    )
+      </div>
+    </div>
+  )
 }
 
-export default ResultInfo;
\ No newline at end of file
+export default ResultInfo
diff --git a/web/src/components/Results.tsx b/web/src/components/Results.tsx
index 75dcf684..ca782414 100644
--- a/web/src/components/Results.tsx
+++ b/web/src/components/Results.tsx
@@ -1,13 +1,13 @@
-import { Dispatch, FC, SetStateAction, useState } from "react";
+import { Dispatch, FC, SetStateAction, useState } from 'react'
 
-import { QueryResult } from "@/..";
+import { QueryResult } from '@/..'
 
-import CopyToClipboard from "./CopyToClipboard";
-import ResultInfo from '../components/ResultInfo';
+import CopyToClipboard from './CopyToClipboard'
+import ResultInfo from '../components/ResultInfo'
 
 interface Props {
-  result: QueryResult;
-  setResult: Dispatch<SetStateAction<QueryResult | null>>;
+  result: QueryResult
+  setResult: Dispatch<SetStateAction<QueryResult | null>>
 }
 
 const Results: FC<Props> = (props) => {
@@ -17,16 +17,15 @@ const Results: FC<Props> = (props) => {
   // state
   const [viewInfo, setViewInfo] = useState<boolean>(false)
 
-  return  (
+  return (
     <div className="flex flex-col items-center justify-center min-h-screen my-4">
       <div className="flex flex-col w-11/12 p-4 mx-6 font-bold text-left bg-blue-200 border-2 border-blue-500 rounded-lg shadow-lg md:w-3/4">
-        <ResultInfo 
-          open={viewInfo}
-          setOpen={setViewInfo}
-        />
+        <ResultInfo open={viewInfo} setOpen={setViewInfo} />
         <div className="flex flex-row items-start justify-between">
-          <p className="mb-2 text-4xl font-bold text-left md:text-5xl">Query Result:</p>
-          <p 
+          <p className="mb-2 text-4xl font-bold text-left md:text-5xl">
+            Query Result:
+          </p>
+          <p
             className="text-2xl font-bold cursor-pointer hover:text-blue-600"
             onClick={() => setViewInfo(true)}
           >
@@ -61,8 +60,11 @@ const Results: FC<Props> = (props) => {
           <p className="text-sm">{result.peptide_seq}</p>
         </div>
         <div className="flex flex-row">
-          <button onClick={() => setResult(null)} className="px-6 py-2 font-bold text-white transition-all bg-black border-2 border-black rounded-lg hover:bg-transparent hover:text-black">
-              Back
+          <button
+            onClick={() => setResult(null)}
+            className="px-6 py-2 font-bold text-white transition-all bg-black border-2 border-black rounded-lg hover:bg-white hover:text-black"
+          >
+            Back
           </button>
         </div>
       </div>
@@ -70,4 +72,4 @@ const Results: FC<Props> = (props) => {
   )
 }
 
-export default Results
\ No newline at end of file
+export default Results
diff --git a/web/src/components/Seo.tsx b/web/src/components/Seo.tsx
index f37b7aed..c256ad5f 100644
--- a/web/src/components/Seo.tsx
+++ b/web/src/components/Seo.tsx
@@ -1,29 +1,28 @@
-import Head from 'next/head';
+import Head from 'next/head'
 
 type SeoProps = {
-  title?: string;
-};
+  title?: string
+}
 
 export default function Seo(props: SeoProps) {
-
-
   return (
     <Head>
       <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
-      <meta 
-        name="description" 
-        content="A fast, effective, and flexible codon optimization tool. Built with Python, the algorithm can codon-optimize DNA or protein sequences for multiple species at once, giving preference to one or more expression systems at a time."></meta>
+      <meta
+        name="description"
+        content="A fast, effective, and flexible codon optimization tool. Built with Python, the algorithm can codon-optimize DNA or protein sequences for multiple species at once, giving preference to one or more expression systems at a time."
+      ></meta>
       <title>{props.title}</title>
 
       {/* Favicons */}
       {favicons.map((linkProps) => (
         <link key={linkProps.href} {...linkProps} />
       ))}
-      <meta name='msapplication-TileColor' content='#ffffff' />
+      <meta name="msapplication-TileColor" content="#ffffff" />
       <meta
-        name='msapplication-TileImage'
-        content='/favicon/ms-icon-144x144.png'
+        name="msapplication-TileImage"
+        content="/favicon/ms-icon-144x144.png"
       />
 
       {/* Open Graph (OG) */}
@@ -31,25 +30,31 @@ export default function Seo(props: SeoProps) {
       <meta property="og:title" content="Optipyzer.com"></meta>
       <meta property="og:url" content="https://optipyzer.vercel.app"></meta>
       <meta property="og:image" content="/images/landing.png"></meta>
-      <meta property="og:description" content="A fast, effective, and flexible codon optimization tool. Built with Python, the algorithm can codon-optimize DNA or protein sequences for multiple species at once, giving preference to one or more expression systems at a time."></meta>
+      <meta
+        property="og:description"
+        content="A fast, effective, and flexible codon optimization tool. Built with Python, the algorithm can codon-optimize DNA or protein sequences for multiple species at once, giving preference to one or more expression systems at a time."
+      ></meta>
 
       {/* Twitter */}
       <meta name="twitter:card" content="summary"></meta>
       <meta name="twitter:creator" content="@NathanJLeRoy"></meta>
-      <meta name="twitter:description" content="A fast, effective, and flexible codon optimization tool. Built with Python, the algorithm can codon-optimize DNA or protein sequences for multiple species at once, giving preference to one or more expression systems at a time."></meta>
+      <meta
+        name="twitter:description"
+        content="A fast, effective, and flexible codon optimization tool. Built with Python, the algorithm can codon-optimize DNA or protein sequences for multiple species at once, giving preference to one or more expression systems at a time."
+      ></meta>
       <meta name="twitter:title" content="Optipyzer.com"></meta>
       <meta name="twitter:image" content="images/landing.png"></meta>
       <meta name="twitter:image:alt" content="optipyzer landing page"></meta>
     </Head>
-  );
+  )
 }
 
 type Favicons = {
-  rel: string;
-  href: string;
-  sizes?: string;
-  type?: string;
-};
+  rel: string
+  href: string
+  sizes?: string
+  type?: string
+}
 
 const favicons: Array<Favicons> = [
   {
@@ -125,4 +130,4 @@ const favicons: Array<Favicons> = [
     rel: 'manifest',
     href: '/favicon/manifest.json',
   },
-];
+]
diff --git a/web/src/components/SeqInput.tsx b/web/src/components/SeqInput.tsx
index 66cdf389..007305cf 100644
--- a/web/src/components/SeqInput.tsx
+++ b/web/src/components/SeqInput.tsx
@@ -1,51 +1,53 @@
-import { Dispatch, FC, SetStateAction, useState } from "react";
+import { Dispatch, FC, SetStateAction, useState } from 'react'
 
-import { validateSequence} from "@/utils/validateSequence";
+import { validateSequence } from '@/utils/validateSequence'
 
 interface Props {
-  seq: string;
-  seqType: string;
-  setSeq: Dispatch<SetStateAction<string>>;
+  seq: string
+  seqType: string
+  setSeq: Dispatch<SetStateAction<string>>
 }
 
 const SeqInput: FC<Props> = (props) => {
-  
   // destructure props
   const { seq, setSeq, seqType } = props
 
   // invalid seq flag
-  const [ seqIsInvalid, setSeqIsInvalid ] = useState<boolean>(false);
+  const [seqIsInvalid, setSeqIsInvalid] = useState<boolean>(false)
 
   // message
-  const [seqValidationMessage, setSeqValidationMessage] = useState<null | string>(null)
+  const [seqValidationMessage, setSeqValidationMessage] = useState<
+    null | string
+  >(null)
 
   // styling
-  const validStyling = "w-full p-2 mb-2 text-sm text-gray-600 border border-black rounded-lg shadow-md md:w-3/4"
-  const invalidStyling = "w-full p-2 mb-2 text-sm text-red-600 border border-red-600 rounded-lg shadow-md md:w-3/4 focus:border-red-600"
+  const validStyling =
+    'w-full p-2 mb-2 text-sm text-gray-600 border border-black rounded-lg shadow-md md:w-3/4'
+  const invalidStyling =
+    'w-full p-2 mb-2 text-sm text-red-600 border border-red-600 rounded-lg shadow-md md:w-3/4 focus:border-red-600'
 
   return (
     <div className="w-full">
       <textarea
-          value={seq}
-          onChange={e => {
-
-            let s = e.target.value
-            s = s.replace((/ {2}|\r\n|\n|\r/gm),"");
-
-            const { isValid, message } = validateSequence(s, seqType)
-
-            if (!isValid) {
-              setSeqIsInvalid(true)
-              setSeqValidationMessage(message)
-            } else {
-              setSeqIsInvalid(false)
-              setSeqValidationMessage(null)
-            }
-            
-            setSeq(s)
-          }}
-          className={seqIsInvalid ? invalidStyling : validStyling}
-          rows={15}
+        value={seq}
+        onChange={(e) => {
+          let s = e.target.value
+          s = s.replace(/ {2}|\r\n|\n|\r/gm, '')
+
+          const { isValid, message } = validateSequence(s, seqType)
+
+          if (!isValid) {
+            setSeqIsInvalid(true)
+            setSeqValidationMessage(message)
+          } else {
+            setSeqIsInvalid(false)
+            setSeqValidationMessage(null)
+          }
+
+          setSeq(s)
+        }}
+        className={seqIsInvalid ? invalidStyling : validStyling}
+        rows={15}
       />
       <div className="absolute text-red-600 translate-x-4 -translate-y-12">
         {seqValidationMessage || ' '}
@@ -54,4 +56,4 @@ const SeqInput: FC<Props> = (props) => {
   )
 }
 
-export default SeqInput;
\ No newline at end of file
+export default SeqInput
diff --git a/web/src/components/SeqTypeSelector.tsx b/web/src/components/SeqTypeSelector.tsx
index 7b644f1e..52d034d5 100644
--- a/web/src/components/SeqTypeSelector.tsx
+++ b/web/src/components/SeqTypeSelector.tsx
@@ -1,39 +1,38 @@
-import { Dispatch, FC, SetStateAction } from "react";
+import { Dispatch, FC, SetStateAction } from 'react'
 
 interface Props {
-  seqType: string;
-  setSeqType: Dispatch<SetStateAction<string>>;
+  seqType: string
+  setSeqType: Dispatch<SetStateAction<string>>
 }
 
 const SeqTypeSelector: FC<Props> = (props) => {
-  
   // destructure props
-  const {seqType, setSeqType } = props
-  
+  const { seqType, setSeqType } = props
+
   return (
-      <div className="flex flex-row p-2 mb-2 border border-black rounded-lg shadow-md w-max">
-        <div className="flex flex-row items-center mr-2">
-          <input 
-            type="radio" 
-            name="sequence_type" 
-            value="dna"
-            onChange={e => setSeqType(e.target.value)}
-            checked={seqType === "dna"}
-          />
-          <label className="mx-1">DNA</label>
-        </div>
-        <div className="flex flex-row items-center mr-2">
-          <input 
-            type="radio" 
-            name="sequence_type" 
-            value="protein"
-            onChange={e => setSeqType(e.target.value)}
-            checked={seqType === "protein"}
-          />
-          <label className="mx-1">Protein</label>
-        </div>
+    <div className="flex flex-row p-2 mb-2 border border-black rounded-lg shadow-md w-max">
+      <div className="flex flex-row items-center mr-2">
+        <input
+          type="radio"
+          name="sequence_type"
+          value="dna"
+          onChange={(e) => setSeqType(e.target.value)}
+          checked={seqType === 'dna'}
+        />
+        <label className="mx-1">DNA</label>
+      </div>
+      <div className="flex flex-row items-center mr-2">
+        <input
+          type="radio"
+          name="sequence_type"
+          value="protein"
+          onChange={(e) => setSeqType(e.target.value)}
+          checked={seqType === 'protein'}
+        />
+        <label className="mx-1">Protein</label>
       </div>
+    </div>
   )
 }
 
-export default SeqTypeSelector
\ No newline at end of file
+export default SeqTypeSelector
diff --git a/web/src/components/SpeciesSelector.tsx b/web/src/components/SpeciesSelector.tsx
index fbe8e528..e4c24e90 100644
--- a/web/src/components/SpeciesSelector.tsx
+++ b/web/src/components/SpeciesSelector.tsx
@@ -1,39 +1,34 @@
-import debounce from "debounce-promise";
-import { FC, useMemo } from 'react';
-import { Dispatch, SetStateAction } from 'react';
-import { components, CSSObjectWithLabel, MultiValue, Theme} from 'react-select';
-import AsyncSelect from 'react-select/async';
+import debounce from 'debounce-promise'
+import { FC, useMemo } from 'react'
+import { Dispatch, SetStateAction } from 'react'
+import { components, CSSObjectWithLabel, MultiValue, Theme } from 'react-select'
+import AsyncSelect from 'react-select/async'
 
-import { Species } from '@/..';
-import { fetchSpecies } from '@/utils/speciesSelection';
+import { Species } from '@/..'
+import { fetchSpecies } from '@/utils/speciesSelection'
 
 // eslint-disable-next-line
 const Input = (props: any) => (
-  <components.Input 
-     {...props} 
-     inputClassName="rounded-lg outline-none border-none shadow-none focus:ring-transparent hover:outline-none"
+  <components.Input
+    {...props}
+    inputClassName="rounded-lg outline-none border-none shadow-none focus:ring-transparent hover:outline-none"
   />
 )
 
 interface SelectorProps {
-  setSpecies: Dispatch<SetStateAction<Species[]>>,
-  setWeights: Dispatch<SetStateAction<{[id: number]: number}>>,
-  species: Species[],
-  weights: {[id: number]: number}
+  setSpecies: Dispatch<SetStateAction<Species[]>>
+  setWeights: Dispatch<SetStateAction<{ [id: number]: number }>>
+  species: Species[]
+  weights: { [id: number]: number }
 }
 
 const SpeciesSelector: FC<SelectorProps> = (props) => {
-
   // declare debounced function
   const debouncedFetchSpecies = useMemo(() => debounce(fetchSpecies, 500), [])
 
   // render option label
-  const renderSpeciesOptionLabel = ({ label }: ({ label: string})) => {
-    return (
-      <div className="text-sm">
-        {label}
-      </div>
-    )
+  const renderSpeciesOptionLabel = ({ label }: { label: string }) => {
+    return <div className="text-sm">{label}</div>
   }
 
   return (
@@ -42,7 +37,6 @@ const SpeciesSelector: FC<SelectorProps> = (props) => {
         // async options
         defaultOptions={true}
         loadOptions={debouncedFetchSpecies}
-        
         // override styling of
         // multiselect component
         // to be in line with the
@@ -55,51 +49,51 @@ const SpeciesSelector: FC<SelectorProps> = (props) => {
             neutral20: 'black',
             primary: 'black',
             dangerLight: '#60A5FA',
-            danger: '#2563EB'
-          }
+            danger: '#2563EB',
+          },
         })}
         styles={{
           input: (css: CSSObjectWithLabel) => ({
             ...css,
             input: {
-              outline: 'none;'
-            }
-          })
+              outline: 'none;',
+            },
+          }),
         }}
         className="w-full mb-2 shadow-md"
         value={props.species.map((s: Species) => ({
           value: s.id,
-          label: s.name
+          label: s.name,
         }))}
-        placeholder={"Search for species"}
+        placeholder={'Search for species'}
         components={{ Input: Input }}
         isMulti
-        onChange={(selection: MultiValue<{value: number, label: string}>) => {
-          
+        onChange={(selection: MultiValue<{ value: number; label: string }>) => {
           // set species selection
-          props.setSpecies(selection.map((s: {value: number, label: string}) => ({
-            name: s.label,
-            id: s.value,
-            type: null
-          })))
+          props.setSpecies(
+            selection.map((s: { value: number; label: string }) => ({
+              name: s.label,
+              id: s.value,
+              type: null,
+            }))
+          )
 
           // map weights as things change
-          selection.forEach(s => {
+          selection.forEach((s) => {
             // if there is not an existing weight in the object
             // make one with weighting = 1
-            if(!(s.value in props.weights)) {
+            if (!(s.value in props.weights)) {
               props.setWeights({
                 ...props.weights,
-                [s.value]: 1.0
+                [s.value]: 1.0,
               })
             }
-          })       
+          })
         }}
         formatOptionLabel={renderSpeciesOptionLabel}
       />
     </>
   )
-
 }
 
-export default SpeciesSelector;
\ No newline at end of file
+export default SpeciesSelector
diff --git a/web/src/components/WeightSelector.tsx b/web/src/components/WeightSelector.tsx
index ed4488f9..6b3227a0 100644
--- a/web/src/components/WeightSelector.tsx
+++ b/web/src/components/WeightSelector.tsx
@@ -1,66 +1,87 @@
-import { FC } from 'react';
-import { Dispatch, SetStateAction } from 'react';
+import { FC, useState } from 'react'
+import { Dispatch, SetStateAction } from 'react'
 
-import { Species, Weights } from '@/..';
+import { Species, Weights } from '@/..'
+import { CodonUsageModal } from './CodonUsageModal'
 
 interface Props {
-  s: Species;
-  setSpecies: Dispatch<SetStateAction<Species[]>>;
-  weights: Weights;
-  setWeights: Dispatch<SetStateAction<Weights>>;
+  s: Species
+  setSpecies: Dispatch<SetStateAction<Species[]>>
+  weights: Weights
+  setWeights: Dispatch<SetStateAction<Weights>>
 }
 
 const WeightSelector: FC<Props> = (props) => {
-
   // destructure props
-  const {s, setSpecies, weights, setWeights} = props
+  const { s, setSpecies, weights, setWeights } = props
+
+  // modal state
+  const [modalOpen, setModalOpen] = useState<boolean>(false)
+
+  const toggleModal = () => {
+    setModalOpen(!modalOpen)
+  }
 
   return (
     <div className="w-full px-2 pb-2 mt-2 mr-2 border border-black rounded-lg shadow-md hover:border-blue-600 md:mt-0">
-      <button 
+      <button
         className="hover:text-blue-600"
         onClick={() => {
-          setSpecies(old => old.filter(oldS => oldS.id !== s.id))
+          setSpecies((old) => old.filter((oldS) => oldS.id !== s.id))
         }}
       >
         x
       </button>
       <div className="flex flex-col justify-between mx-1 h-5/6">
         <label className="font-bold">{s.name}</label>
-          <div>
-            <div className="flex flex-row items-center justify-center">
-              <span className="mx-1">{' '}1</span>
-              <input
-                className="w-full"
-                type="range" 
-                min="1" 
-                max="5"
-                step="1"
-                value={weights[s.id]}
-                onChange={e => setWeights({
+        <div>
+          <div className="flex flex-row items-center justify-center">
+            <span className="mx-1"> 1</span>
+            <input
+              className="w-full"
+              type="range"
+              min="1"
+              max="5"
+              step="1"
+              value={weights[s.id]}
+              onChange={(e) =>
+                setWeights({
                   ...weights,
-                  [s.id]: parseFloat(e.target.value)
-                })}
-                list="steplist"
-              />
-              <datalist id="steplist">
-                  <option>1</option>
-                  <option>2</option>
-                  <option>3</option>
-                  <option>4</option>
-                  <option>5</option>
-              </datalist>
-              <span className="mx-1">5</span>
-            </div>
-            <div
-              className="w-full my-2 text-xl text-center text-white bg-blue-600 border border-white rounded-full"
+                  [s.id]: parseFloat(e.target.value),
+                })
+              }
+              list="steplist"
+            />
+            <datalist id="steplist">
+              <option>1</option>
+              <option>2</option>
+              <option>3</option>
+              <option>4</option>
+              <option>5</option>
+            </datalist>
+            <span className="mx-1">5</span>
+          </div>
+          <div className="w-full my-2 text-xl text-center text-white bg-blue-600 border border-white rounded-full">
+            {weights[s.id]}
+          </div>
+          <div className="w-full text-center">
+            <button
+              className="text-sm text-blue-600 underline hover:text-blue-800"
+              type="button"
+              onClick={toggleModal}
             >
-              {weights[s.id]}
-            </div>
+              View Codon Usage
+            </button>
           </div>
+          <CodonUsageModal
+            open={modalOpen}
+            setOpen={setModalOpen}
+            orgId={s.id}
+          />
         </div>
+      </div>
     </div>
   )
 }
 
-export default WeightSelector;
\ No newline at end of file
+export default WeightSelector
diff --git a/web/src/data/species_popular.ts b/web/src/data/species_popular.ts
index 18e8a072..418c8071 100644
--- a/web/src/data/species_popular.ts
+++ b/web/src/data/species_popular.ts
@@ -1,14 +1,22 @@
-import { Species } from "@/.."
+import { Species } from '@/..'
 
 export const species_popular: Species[] = [
-  {"id":122771,"name":"African Clawed Frog (Xenopus laevis)","type":"popular"},
-  {"id":121713,"name":"Bakers Yeast (Saccharomyces cerevisiae S288C)","type":"popular"},
-  {"id":122001,"name":"Caenorhabditis elegans","type":"popular"},
-  {"id":16815,"name":"E. Coli (Escherichia coli str. K-12 substr. MG1655)","type":"popular"},
-  {"id":122056,"name":"Fruit Fly (Drosophila melanogaster)","type":"popular"},
-  {"id":122563,"name":"Human (Homo sapiens)","type":"popular"},
-  {"id":122638,"name":"Mouse (Mus musculus)","type":"popular"},
-  {"id":122645,"name":"Rat (Rattus norvegicus)","type":"popular"},
-  {"id":122263,"name":"Thale Cress (Arabidopsis thaliana)","type":"popular"},
-  {"id":122731,"name":"Zebrafish (Danio rerio)","type":"popular"}
-]
\ No newline at end of file
+  { id: 122771, name: 'African Clawed Frog (Xenopus laevis)', type: 'popular' },
+  {
+    id: 121713,
+    name: 'Bakers Yeast (Saccharomyces cerevisiae S288C)',
+    type: 'popular',
+  },
+  { id: 122001, name: 'Caenorhabditis elegans', type: 'popular' },
+  {
+    id: 16815,
+    name: 'E. Coli (Escherichia coli str. K-12 substr. MG1655)',
+    type: 'popular',
+  },
+  { id: 122056, name: 'Fruit Fly (Drosophila melanogaster)', type: 'popular' },
+  { id: 122563, name: 'Human (Homo sapiens)', type: 'popular' },
+  { id: 122638, name: 'Mouse (Mus musculus)', type: 'popular' },
+  { id: 122645, name: 'Rat (Rattus norvegicus)', type: 'popular' },
+  { id: 122263, name: 'Thale Cress (Arabidopsis thaliana)', type: 'popular' },
+  { id: 122731, name: 'Zebrafish (Danio rerio)', type: 'popular' },
+]
diff --git a/web/src/pages/404.tsx b/web/src/pages/404.tsx
index ee4b2704..2a5652a3 100644
--- a/web/src/pages/404.tsx
+++ b/web/src/pages/404.tsx
@@ -1,24 +1,28 @@
-import { useRouter } from 'next/router';
+import { useRouter } from 'next/router'
 
-import Seo from '@/components/Seo';
+import Seo from '@/components/Seo'
 
 export default function NotFoundPage() {
   const router = useRouter()
   return (
     <>
-      <Seo title='Oops.' />
+      <Seo title="Oops." />
       <main className="h-screen">
         <div className="flex flex-col items-center justify-center w-full h-full">
-          <p className="mb-4 text-4xl font-bold text-blue-600">404: Not Found</p>
+          <p className="mb-4 text-4xl font-bold text-blue-600">
+            404: Not Found
+          </p>
           <p className="text-xl">{"Oops. I don't know about that page..."}</p>
           <div className="flex flex-row items-center justify-center my-4 md:justify-start">
-            <button className="px-8 py-2 mr-2 text-lg font-bold text-white transition-all bg-blue-600 border-2 border-white rounded-lg hover:bg-white hover:border-blue-600 hover:text-blue-600"
-            onClick={() => router.push("/")}
+            <button
+              className="px-8 py-2 mr-2 text-lg font-bold text-white transition-all bg-blue-600 border-2 border-white rounded-lg hover:bg-white hover:border-blue-600 hover:text-blue-600"
+              onClick={() => router.push('/')}
             >
               Home
             </button>
-            <button className="px-8 py-2 mr-2 text-lg font-bold text-blue-600 transition-all border-2 border-blue-600 rounded-lg hover:bg-blue-600 hover:text-white hover:border-white"
-            onClick={() => router.push("/optimize")}
+            <button
+              className="px-8 py-2 mr-2 text-lg font-bold text-blue-600 transition-all border-2 border-blue-600 rounded-lg hover:bg-blue-600 hover:text-white hover:border-white"
+              onClick={() => router.push('/optimize')}
             >
               Optimize
             </button>
@@ -26,5 +30,5 @@ export default function NotFoundPage() {
         </div>
       </main>
     </>
-  );
+  )
 }
diff --git a/web/src/pages/_app.tsx b/web/src/pages/_app.tsx
index 874e9cd3..1686fadf 100644
--- a/web/src/pages/_app.tsx
+++ b/web/src/pages/_app.tsx
@@ -1,9 +1,9 @@
-import { AppProps } from 'next/app';
+import { AppProps } from 'next/app'
 
-import '@/styles/globals.css';
+import '@/styles/globals.css'
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return <Component {...pageProps} />
 }
 
-export default MyApp;
+export default MyApp
diff --git a/web/src/pages/_document.tsx b/web/src/pages/_document.tsx
index 97da2d32..d8d390ce 100644
--- a/web/src/pages/_document.tsx
+++ b/web/src/pages/_document.tsx
@@ -4,24 +4,24 @@ import Document, {
   Html,
   Main,
   NextScript,
-} from 'next/document';
+} from 'next/document'
 
 class MyDocument extends Document {
   static async getInitialProps(ctx: DocumentContext) {
-    const initialProps = await Document.getInitialProps(ctx);
-    return { ...initialProps };
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
   }
 
   render() {
     return (
-      <Html lang='en'>
+      <Html lang="en">
         <Head>
           <link
-            rel='preload'
-            href='/fonts/inter-var-latin.woff2'
-            as='font'
-            type='font/woff2'
-            crossOrigin='anonymous'
+            rel="preload"
+            href="/fonts/inter-var-latin.woff2"
+            as="font"
+            type="font/woff2"
+            crossOrigin="anonymous"
           />
         </Head>
         <body>
@@ -29,8 +29,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    );
+    )
   }
 }
 
-export default MyDocument;
+export default MyDocument
diff --git a/web/src/pages/api/version.ts b/web/src/pages/api/version.ts
index fc1233c8..5f8e60d2 100644
--- a/web/src/pages/api/version.ts
+++ b/web/src/pages/api/version.ts
@@ -1,9 +1,12 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
-import axios from 'axios';
-import { NextApiRequest, NextApiResponse } from 'next';
+import axios from 'axios'
+import { NextApiRequest, NextApiResponse } from 'next'
 
-export default async function hello(_req: NextApiRequest, res: NextApiResponse) {
+export default async function hello(
+  _req: NextApiRequest,
+  res: NextApiResponse
+) {
   // make a call to the base
   // to get the software version
   const apiRes = await axios.get(`${process.env.NEXT_PUBLIC_API_URL}`)
diff --git a/web/src/pages/index.tsx b/web/src/pages/index.tsx
index 577f69cd..f7f3fba4 100644
--- a/web/src/pages/index.tsx
+++ b/web/src/pages/index.tsx
@@ -1,48 +1,47 @@
-import axios, { AxiosResponse } from 'axios';
+import axios, { AxiosResponse } from 'axios'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 
-import Seo from '@/components/Seo';
+import Seo from '@/components/Seo'
 
-import { ServerInfo } from '@/..';
+import { ServerInfo } from '@/..'
 
 import github_logo from '../../public/images/github.png'
-import paper from '../../public/images/paper.png'
+// import paper from '../../public/images/paper.png'
 import landing_card from '../../public/images/query_result.png'
+import { NextPage } from 'next'
 
-export default function HomePage() {
-  
+const HomePage: NextPage = () => {
   // instantiate router and state
   const router = useRouter()
-  const [version, setVersion] = useState<string>("0.1.0")
+  const [version, setVersion] = useState<string>('0.1.0')
 
   // fetch version on load
   useEffect(() => {
-    axios.get<ServerInfo>("/api/version")
-    .then((res: AxiosResponse<ServerInfo>) => {
-      setVersion(res.data.version)
-    })
+    axios
+      .get<ServerInfo>('/api/version')
+      .then((res: AxiosResponse<ServerInfo>) => {
+        setVersion(res.data.version)
+      })
   }, [])
-  
+
   return (
     <>
       {/* <Seo templateTitle='Home' /> */}
-      <Seo title="Optipyzer"/>
+      <Seo title="Optipyzer" />
 
       {/** BODY */}
       <main className="flex flex-col items-center justify-center h-screen">
         <div className="px-4 lg:max-w-screen-lg sm:max-w-screen-sm md:max-w-screen-sm">
           <div className="flex flex-row items-center justify-center md:justify-start">
-            <button 
-              onClick={() => router.push("https://github.com/nleroy917/optipyzer")} 
+            <button
+              onClick={() =>
+                router.push('https://github.com/nleroy917/optipyzer')
+              }
               className="flex flex-row items-center px-2 py-1 mr-1 font-bold transition-all bg-blue-200 border-2 border-black rounded-lg cursor-pointer justify-evenly w-28 hover:bg-blue-300"
             >
               {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img
-                width="20px"
-                src={github_logo.src}
-                alt="GitHub logo"
-              />
+              <img width="20px" src={github_logo.src} alt="GitHub logo" />
               <span className="px-1 text-sm">GitHub</span>
             </button>
             {/* <button
@@ -57,50 +56,63 @@ export default function HomePage() {
               <span className="px-1 text-sm">Publication</span>
             </button> */}
           </div>
-          <h1 className="py-4 mb-4 text-6xl font-bold text-center text-blue-600 md:text-left md:text-8xl">Optipyzer</h1>
+          <h1 className="py-4 mb-4 text-6xl font-bold text-center text-blue-600 md:text-left md:text-8xl">
+            Optipyzer
+          </h1>
           <p className="mb-8 text-sm text-center md:text-left md:text-base md:w-7/12">
-            A fast, effective, and flexible codon optimization tool. Built with Python, the algorithm can codon-optimize DNA or protein sequences for multiple species at once, giving preference to one or more expression systems at a time. The algorithm utilizes the most recent codon usage data available to dynamically generate an optimal sequence for you in seconds.
+            A fast, effective, and flexible codon optimization tool. Built with
+            Python, the algorithm can codon-optimize DNA or protein sequences
+            for multiple species at once, giving preference to one or more
+            expression systems at a time. The algorithm utilizes the most recent
+            codon usage data available to dynamically generate an optimal
+            sequence for you in seconds.
           </p>
           <div className="flex flex-row items-center justify-center my-4 md:justify-start">
-            <button className="px-8 py-2 mr-2 text-lg font-bold text-white transition-all bg-blue-600 border-2 border-white rounded-lg hover:bg-blue-700"
-            onClick={() => router.push("/optimize")}
+            <button
+              className="px-8 py-2 mr-2 text-lg font-bold text-white transition-all bg-blue-600 border-2 border-white rounded-lg hover:bg-blue-700"
+              onClick={() => router.push('/optimize')}
             >
               Optimize
             </button>
-            <button 
+            <button
               className="px-8 py-2 mr-2 text-lg font-bold text-blue-600 transition-all border-2 border-blue-600 rounded-lg hover:bg-gray-100"
-              onClick={() => router.push("https://github.com/nleroy917/optipyzer")}
+              onClick={() =>
+                router.push('https://github.com/nleroy917/optipyzer')
+              }
             >
               About
             </button>
           </div>
         </div>
-        <div className="fixed hidden mr-4 lg:block lg:top-1/3 lg:right-12 pb-14 xl:right-36" style={{zIndex: -1}}>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              width="650"
-              className="z-0 transform skew-y-12 shadow-xl opacity-40"
-              src={landing_card.src}
-              alt="Query result example."
-            />
+        <div
+          className="fixed hidden mr-4 lg:block lg:top-1/3 lg:right-12 pb-14 xl:right-36"
+          style={{ zIndex: -1 }}
+        >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            width="650"
+            className="z-0 transform skew-y-12 shadow-xl opacity-40"
+            src={landing_card.src}
+            alt="Query result example."
+          />
         </div>
       </main>
 
-      
       {/** FOOTER */}
       <footer className="bottom-0 w-full px-4 -translate-y-20">
         <div className="flex flex-col items-center justify-center text-xs text-gray-400 md:flex-row md:justify-evenly md:text-base">
-          <p className="my-1">
-            © {(new Date()).getFullYear()}
-          </p>
-          <a href="https://github.com/NLeRoy917/optipyzer" className="my-1 hover:underline">
-           v{version}
+          <p className="my-1">© {new Date().getFullYear()}</p>
+          <a
+            href="https://github.com/NLeRoy917/optipyzer"
+            className="my-1 hover:underline"
+          >
+            v{version}
           </a>
-          <p className="my-1">
-            Made by Nathan LeRoy and Caleigh Roleck
-          </p>
+          <p className="my-1">Made by Nathan LeRoy and Caleigh Roleck</p>
         </div>
       </footer>
     </>
-  );
-}
\ No newline at end of file
+  )
+}
+
+export default HomePage
diff --git a/web/src/pages/optimize.tsx b/web/src/pages/optimize.tsx
index 464b3e7b..d2734b7e 100644
--- a/web/src/pages/optimize.tsx
+++ b/web/src/pages/optimize.tsx
@@ -1,138 +1,155 @@
-import axios, { AxiosError, AxiosResponse } from 'axios';
-import Link from 'next/link';
-import { FormEvent, useState } from 'react';
+import axios, { AxiosError, AxiosResponse } from 'axios'
+import Link from 'next/link'
+import { FormEvent, useState } from 'react'
 
-import { Error } from '@/components/Error';
-import Results from '@/components/Results';
-import Seo from '@/components/Seo';
-import SeqInput from '@/components/SeqInput';
-import SeqTypeSelector from '@/components/SeqTypeSelector';
-import SpeciesSelector from '@/components/SpeciesSelector';
-import WeightSelector from '@/components/WeightSelector';
+import { Error } from '@/components/Error'
+import Results from '@/components/Results'
+import Seo from '@/components/Seo'
+import SeqInput from '@/components/SeqInput'
+import SeqTypeSelector from '@/components/SeqTypeSelector'
+import SpeciesSelector from '@/components/SpeciesSelector'
+import WeightSelector from '@/components/WeightSelector'
 
-import { QueryError, QueryResult, Species, Weights } from '@/..';
-import { purgeWeights } from '@/utils/purgeWeights';
+import { QueryError, QueryResult, Species, Weights } from '@/..'
+import { purgeWeights } from '@/utils/purgeWeights'
+import { NextPage } from 'next'
 
-export default function OptimizePage() {
+const OptimizePage: NextPage = () => {
   // state
-  const [seqType, setSeqType] = useState<string>("dna")
+  const [seqType, setSeqType] = useState<string>('dna')
   const [species, setSpecies] = useState<Species[]>([])
   const [weights, setWeights] = useState<Weights>({})
-  const [seq, setSeq] = useState<string>("")
+  const [seq, setSeq] = useState<string>('')
   const [optimizing, setOptimizing] = useState<boolean>(false)
   const [result, setResult] = useState<QueryResult | null>(null)
   const [error, setError] = useState<QueryError | null>(null)
 
   const handleSubmit = (e: FormEvent) => {
-    e.preventDefault();
+    // override form
+    e.preventDefault()
+
+    if (species.length === 0) {
+      alert('Please select a species first.')
+      return
+    }
     setOptimizing(true)
 
     // purge unused species weights
     setWeights(purgeWeights(weights, species))
 
     // call API
-    axios.post<QueryResult>(`${process.env.NEXT_PUBLIC_API_URL}/optimize/${seqType}`, {
-      seq: seq,
-      org_list: species.map(s => s.id),
-      weights: weights
-    })
-    .then((res: AxiosResponse<QueryResult>) => {
-      const data: QueryResult = res.data
-      setResult(data)
-      setOptimizing(false)
-    })
-    .catch((err: AxiosError) => {
-      setError({
-        response: err.response,
+    axios
+      .post<QueryResult>(
+        `${process.env.NEXT_PUBLIC_API_URL}/optimize/${seqType}`,
+        {
+          seq: seq,
+          org_list: species.map((s) => s.id),
+          weights: weights,
+        }
+      )
+      .then((res: AxiosResponse<QueryResult>) => {
+        const data: QueryResult = res.data
+        setResult(data)
+        setOptimizing(false)
+      })
+      .catch((err: AxiosError) => {
+        setError({
+          response: err.response,
+        })
+        setOptimizing(false)
       })
-      setOptimizing(false)
-    })
   }
 
   // render HTML
-  if(error) {
+  if (error) {
     // render the error
     return (
       <div>
-          <Seo title="Error!"/>
-          <Error error={error} setError={setError}/>
+        <Seo title="Error!" />
+        <Error error={error} setError={setError} />
       </div>
-  )
-  } else if(result) {
+    )
+  } else if (result) {
     return (
       <div>
-        <Results 
-          result={result}
-          setResult={setResult}
-        />
+        <Results result={result} setResult={setResult} />
       </div>
     )
   } else {
     return (
       <>
-      <Seo title="Optimize"/>
-      <main className="flex flex-col items-start justify-start p-4">
-        <div className="text-blue-600 underline">
-          <Link href="/">
-          ← Back
-          </Link>
-        </div>
-        <h1 className="py-2 text-4xl font-bold text-blue-600 md:text-6xl">Optimize sequence:</h1>
-        <form className='w-full' onSubmit={handleSubmit}>
-        <label className="text-lg font-bold text-blue-600">Sequence type:</label>
-          <SeqTypeSelector
-            setSeqType={setSeqType}
-            seqType={seqType}
-          />
-        <div className="w-full my-1 md:w-3/4">
-          <label className="text-lg font-bold text-blue-600">Select species:</label>
-          <SpeciesSelector 
-            setSpecies={setSpecies}
-            species={species}
-            setWeights={setWeights}
-            weights={weights}
-          />
-        </div>
-        {
-          species.length === 0 ?
-          <div></div>
-          : 
-          <div className='w-max'>
-            <p className="text-lg font-bold text-blue-600">Adjust weights:</p>
-            <div className="flex flex-col w-full mr-2 md:flex-row">
-            {
-              species.map((s, i) => {
-                return (
-                  <WeightSelector
-                    key={i}
-                    s={s}
-                    setSpecies={setSpecies}
-                    weights={weights}
-                    setWeights={setWeights}
-                  />
-                )
-              })
-            }
-            </div>
+        <Seo title="Optimize" />
+        <main className="flex flex-col items-start justify-start p-4">
+          <div className="text-blue-600 underline">
+            <Link href="/">← Back</Link>
           </div>
-        }
-        <p className="mt-2 text-lg font-bold text-blue-600">Input sequence:</p>
-        <SeqInput
-          seq={seq}
-          setSeq={setSeq}
-          seqType={seqType}
-        />
-        <button
-          className="px-4 py-2 my-2 text-lg font-bold text-white transition-all bg-blue-600 border-2 border-blue-600 rounded-lg hover:bg-white hover:text-blue-600 hover:border-blue-600"
-          type='submit'
-          disabled={optimizing}
-        >
-          {optimizing ? "Optimizing..." : "Optimize"}
-        </button>
-        </form>
-      </main>
+          <h1 className="py-2 text-4xl font-bold text-blue-600 md:text-6xl">
+            Optimize sequence:
+          </h1>
+          <form className="w-full" onSubmit={handleSubmit}>
+            <label className="text-lg font-bold text-blue-600">
+              Sequence type:
+            </label>
+            <SeqTypeSelector setSeqType={setSeqType} seqType={seqType} />
+            <div className="w-full my-1 md:w-3/4">
+              <label className="text-lg font-bold text-blue-600">
+                Select species:
+              </label>
+              <SpeciesSelector
+                setSpecies={setSpecies}
+                species={species}
+                setWeights={setWeights}
+                weights={weights}
+              />
+            </div>
+            {species.length === 0 ? (
+              <div></div>
+            ) : (
+              <div className="w-max">
+                <p className="text-lg font-bold text-blue-600">
+                  Adjust weights:
+                </p>
+                <div className="flex flex-col w-full mr-2 md:flex-row">
+                  {species.map((s, i) => {
+                    return (
+                      <WeightSelector
+                        key={i}
+                        s={s}
+                        setSpecies={setSpecies}
+                        weights={weights}
+                        setWeights={setWeights}
+                      />
+                    )
+                  })}
+                </div>
+              </div>
+            )}
+            <p className="mt-2 text-lg font-bold text-blue-600">
+              Input sequence:
+            </p>
+            <SeqInput seq={seq} setSeq={setSeq} seqType={seqType} />
+
+            {optimizing ? (
+              <button
+                className="px-4 py-2 my-2 text-lg font-bold text-white transition-all bg-blue-800 border-2 border-blue-800 rounded-lg cursor-wait"
+                type="submit"
+                disabled
+              >
+                Optimizing...
+              </button>
+            ) : (
+              <button
+                className="px-4 py-2 my-2 text-lg font-bold text-white transition-all bg-blue-600 border-2 border-blue-600 rounded-lg hover:bg-blue-700 hover:border-blue-700"
+                type="submit"
+              >
+                Optimize
+              </button>
+            )}
+          </form>
+        </main>
       </>
     )
   }
-  
-}
\ No newline at end of file
+}
+
+export default OptimizePage
diff --git a/web/src/utils/purgeWeights.ts b/web/src/utils/purgeWeights.ts
index 83b62b8b..3b4c3579 100644
--- a/web/src/utils/purgeWeights.ts
+++ b/web/src/utils/purgeWeights.ts
@@ -1,7 +1,7 @@
-import { Species, Weights } from "@/.."
+import { Species, Weights } from '@/..'
 
 /**
- * 
+ *
  * To simplyify the UI logic, when species that
  * the user selects to optimize for are removed
  * from the selector, that species is NOT immediately
@@ -9,18 +9,17 @@ import { Species, Weights } from "@/.."
  * prior to sending data to the server to analyze,
  * we need to purge out nay weight objects that are not
  * consistent with our species list.
- *  
+ *
  * @param weights object with organism id's linking to Weight objects
  * @param species list of Species objects
  * @returns cleaned weight object
  */
 export function purgeWeights(weights: Weights, species: Species[]) {
-
-  Object.keys(weights).forEach(w => {
-    if(!(species.map(s => s.id).indexOf(parseInt(w)) >= 0)) {
+  Object.keys(weights).forEach((w) => {
+    if (!(species.map((s) => s.id).indexOf(parseInt(w)) >= 0)) {
       delete weights[parseInt(w)]
     }
   })
 
   return weights
-}
\ No newline at end of file
+}
diff --git a/web/src/utils/speciesSelection.ts b/web/src/utils/speciesSelection.ts
index 4e7403ad..6a87c29e 100644
--- a/web/src/utils/speciesSelection.ts
+++ b/web/src/utils/speciesSelection.ts
@@ -1,92 +1,94 @@
-import axios, { AxiosResponse } from "axios"
+import axios, { AxiosResponse } from 'axios'
 
 interface GroupedOption {
-    label: string;
-    options: ({
-        value: number;
-        label: string;
-    })[];
+  label: string
+  options: {
+    value: number
+    label: string
+  }[]
 }
 
 interface Organism {
-    GC1_perc: number;
-    GC2_perc: number;
-    GC3_perc: number;
-    GC_perc: number;
-    assembly: string, 
-    division: string, 
-    num_CDS:number;
-    num_codons: number, 
-    org_id: number, 
-    organelle: string, 
-    species: string, 
-    taxid: number, 
-    translation_table: number
+  GC1_perc: number
+  GC2_perc: number
+  GC3_perc: number
+  GC_perc: number
+  assembly: string
+  division: string
+  num_CDS: number
+  num_codons: number
+  org_id: number
+  organelle: string
+  species: string
+  taxid: number
+  translation_table: number
 }
 
 interface SearchResult {
-    num_results: number;
-    organisms: Organism[];
-    search_query: string;
-
+  num_results: number
+  organisms: Organism[]
+  search_query: string
 }
 
-import { species_popular } from '../data/species_popular';
+import { species_popular } from '../data/species_popular'
 
 export const fetchSpecies = (searchString: string) => {
+  // define maximum amount of
+  // results to return
+  const MAX_ITEMS = 100
 
-    // define maximum amount of
-    // results to return
-    const MAX_ITEMS = 100
-
-    // being results object with popular
-    // options
-    const allOptions: GroupedOption[] = [
-        {
-            label: 'Popular',
-            options: species_popular.map(s => ({
-                label: s.name,
-                value: s.id
-            }))
-        },
-        {
-            label: 'Others',
-            options: []
-        }
-    ]
-
-    // dont perform a search for strings less
-    // than 2 as it kills performance.
-    //
-    // mybe we can throttle this server-side
-    if (searchString.length < 2) {
-        return (allOptions)
-    }
+  // being results object with popular
+  // options
+  const allOptions: GroupedOption[] = [
+    {
+      label: 'Results',
+      options: [],
+    },
+    {
+      label: 'Popular',
+      options: species_popular.map((s) => ({
+        label: s.name,
+        value: s.id,
+      })),
+    },
+  ]
 
-    return new Promise((resolve, reject) => {
-        // fetch from API
-        axios.get<SearchResult>(`${process.env.NEXT_PUBLIC_API_URL}/species/search/?name=${searchString}`)
-        .then((res: AxiosResponse<SearchResult>) => {
+  // dont perform a search for strings less
+  // than 2 as it kills performance.
+  //
+  // mybe we can throttle this server-side
+  if (searchString.length < 2) {
+    return allOptions
+  }
 
-            // map results
-            let results = res.data.organisms.map((org: Organism) => ({
-                value: org.org_id, label: org.species, type: null
-            }))
+  return new Promise((resolve, reject) => {
+    // fetch from API
+    axios
+      .get<SearchResult>(
+        `${process.env.NEXT_PUBLIC_API_URL}/species/search/?name=${searchString}`
+      )
+      .then((res: AxiosResponse<SearchResult>) => {
+        // map results
+        let results = res.data.organisms.map((org: Organism) => ({
+          value: org.org_id,
+          label: org.species,
+          type: null,
+        }))
 
-            // only return top 100
-            if(results.length > MAX_ITEMS) {
-                results = results.slice(0,MAX_ITEMS)
-            }
+        // only return top 100
+        if (results.length > MAX_ITEMS) {
+          results = results.slice(0, MAX_ITEMS)
+        }
 
-            // append this to allOptions
-            allOptions[1].options = results
+        // append this to allOptions
+        allOptions[0].options = results
 
-            // return for AsyncSelect
-            resolve(allOptions)
-        })
-        // catch errs
-        .catch(err => {
-            reject(err)
-        })
-    })
-}
\ No newline at end of file
+        // return for AsyncSelect
+        resolve(allOptions)
+      })
+      // catch errs
+      .catch((err) => {
+        reject(err)
+      })
+  })
+}
diff --git a/web/src/utils/validateSequence.ts b/web/src/utils/validateSequence.ts
index b22728d6..6f19bcac 100644
--- a/web/src/utils/validateSequence.ts
+++ b/web/src/utils/validateSequence.ts
@@ -1,41 +1,62 @@
 const VALID_DNA_LETTER_CODES = ['A', 'T', 'G', 'C']
-const VALID_AMINO_ACID_CODES = ['A','R','N','D','C','Q','E','G','H','I','L','K','M','F','P','S','T','W','Y','V']
+const VALID_AMINO_ACID_CODES = [
+  'A',
+  'R',
+  'N',
+  'D',
+  'C',
+  'Q',
+  'E',
+  'G',
+  'H',
+  'I',
+  'L',
+  'K',
+  'M',
+  'F',
+  'P',
+  'S',
+  'T',
+  'W',
+  'Y',
+  'V',
+]
 
 export const validateSequence = (seq: string, seqType: string) => {
-    // assume the sequence is valid
-    // then run tests
-    let isValid = true
-    let message = null
+  // assume the sequence is valid
+  // then run tests
+  let isValid = true
+  let message = null
 
-    // test dna
-    if (seqType.toLowerCase() === "dna") {
-        // check length
-        if (seq.length % 3 !== 0) {
-            isValid = false
-            message = "DNA sequences must be divisible by 3."
-        }
-        
-        // validate that each character in the sequence
-        // is an a, t, c, or g
-        seq.split("").forEach((c, i) => {
-            if (!VALID_DNA_LETTER_CODES.includes(c.toUpperCase())) {
-                isValid = false
-                message = `Invalid base '${c}' at position ${i}`
-            }
-        })
-    // test protein
-    } else {
-        // validate each character in the sequence
-        seq.split("").forEach((c, i) => {
-            if (!VALID_AMINO_ACID_CODES.includes(c.toUpperCase())) {
-                isValid = false
-                message = `Invalid residue '${c}' at position ${i}`
-            }
-        })
-    }
-    
-    return {
-        isValid: isValid,
-        message: message
+  // test dna
+  if (seqType.toLowerCase() === 'dna') {
+    // check length
+    if (seq.length % 3 !== 0) {
+      isValid = false
+      message = 'DNA sequences must be divisible by 3.'
     }
-}
\ No newline at end of file
+
+    // validate that each character in the sequence
+    // is an a, t, c, or g
+    seq.split('').forEach((c, i) => {
+      if (!VALID_DNA_LETTER_CODES.includes(c.toUpperCase())) {
+        isValid = false
+        message = `Invalid base '${c}' at position ${i}`
+      }
+    })
+    // test protein
+  } else {
+    // validate each character in the sequence
+    seq.split('').forEach((c, i) => {
+      if (!VALID_AMINO_ACID_CODES.includes(c.toUpperCase())) {
+        isValid = false
+        message = `Invalid residue '${c}' at position ${i}`
+      }
+    })
+  }
+
+  return {
+    isValid: isValid,
+    message: message,
+  }
+}
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 9e060499..b56167f8 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -1,13 +1,13 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const { fontFamily } = require('tailwindcss/defaultTheme');
+const { fontFamily } = require('tailwindcss/defaultTheme')
 
 function withOpacity(variableName) {
   return ({ opacityValue }) => {
     if (opacityValue !== undefined) {
-      return `rgba(var(${variableName}), ${opacityValue})`;
+      return `rgba(var(${variableName}), ${opacityValue})`
     }
-    return `rgb(var(${variableName}))`;
-  };
+    return `rgb(var(${variableName}))`
+  }
 }
 
 /** @type {import("@types/tailwindcss/tailwind-config").TailwindConfig } */
@@ -50,4 +50,4 @@ module.exports = {
     extend: {},
   },
   plugins: [require('@tailwindcss/forms')],
-};
+}
diff --git a/web/tsconfig.json b/web/tsconfig.json
index 3a86c4dd..9e7f4be7 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -19,23 +15,11 @@
     "jsx": "preserve",
     "baseUrl": "./src",
     "paths": {
-      "@/*": [
-        "*"
-      ]
+      "@/*": ["*"]
     },
     "incremental": true
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ],
-  "moduleResolution": [
-    "node_modules",
-    ".next",
-    "node"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"],
+  "moduleResolution": ["node_modules", ".next", "node"]
 }
diff --git a/web/yarn.lock b/web/yarn.lock
index cc6d1726..4cd330f9 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -280,6 +280,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@headlessui/react@^1.6.5":
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.6.5.tgz#5587c537de809cf3146eb2ff263e5e940b1bf69c"
+  integrity sha512-3VkKteDxlxf3fE0KbfO9t60KC1lM7YNpZggLpwzVNg1J/zwL+h+4N7MBlFDVpInZI3rKlZGpNx0PWsG/9c2vQg==
+
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
@@ -404,10 +409,10 @@
   resolved "https://registry.yarnpkg.com/@types/debounce-promise/-/debounce-promise-3.1.4.tgz#bf10eead11724e666ea541df1c9d3969677a505b"
   integrity sha512-9SEVY3nsz+uMN2DwDocftB5TAgZe7D0cOzxxRhpotWs6T4QFqRaTXpXbOSzbk31/7iYcfCkJJPwWGzTxyuGhCg==
 
-"@types/json-schema@^7.0.7":
-  version "7.0.9"
-  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
-  integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
+"@types/json-schema@^7.0.9":
+  version "7.0.11"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
+  integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
 
 "@types/json5@^0.0.29":
   version "0.0.29"
@@ -484,32 +489,21 @@
   resolved "https://registry.yarnpkg.com/@types/tailwindcss/-/tailwindcss-2.2.2.tgz#0efb514d358298eefbdc939465f59e2be32c2fa2"
   integrity sha512-VgNJQstMEaSqCu6cL39pgUqHW+EKHPsQ3zazeQDoO1USfyOvsuIiCFzmPqreAYswHntxmeNM+/V45d3n5KRo4Q==
 
-"@typescript-eslint/eslint-plugin@^4.33.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.33.0.tgz#c24dc7c8069c7706bc40d99f6fa87edcb2005276"
-  integrity sha512-aINiAxGVdOl1eJyVjaWn/YcVAq4Gi/Yo35qHGCnqbWVz61g39D0h23veY/MA0rFFGfxK7TySg2uwDeNv+JgVpg==
+"@typescript-eslint/eslint-plugin@^5.29.0":
+  version "5.29.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.29.0.tgz#c67794d2b0fd0b4a47f50266088acdc52a08aab6"
+  integrity sha512-kgTsISt9pM53yRFQmLZ4npj99yGl3x3Pl7z4eA66OuTzAGC4bQB5H5fuLwPnqTKU3yyrrg4MIhjF17UYnL4c0w==
   dependencies:
-    "@typescript-eslint/experimental-utils" "4.33.0"
-    "@typescript-eslint/scope-manager" "4.33.0"
-    debug "^4.3.1"
+    "@typescript-eslint/scope-manager" "5.29.0"
+    "@typescript-eslint/type-utils" "5.29.0"
+    "@typescript-eslint/utils" "5.29.0"
+    debug "^4.3.4"
     functional-red-black-tree "^1.0.1"
-    ignore "^5.1.8"
-    regexpp "^3.1.0"
-    semver "^7.3.5"
+    ignore "^5.2.0"
+    regexpp "^3.2.0"
+    semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/experimental-utils@4.33.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.33.0.tgz#6f2a786a4209fa2222989e9380b5331b2810f7fd"
-  integrity sha512-zeQjOoES5JFjTnAhI5QY7ZviczMzDptls15GFsI6jyUOq0kOf9+WonkhtlIhh0RgHRnqj5gdNxW5j1EvAyYg6Q==
-  dependencies:
-    "@types/json-schema" "^7.0.7"
-    "@typescript-eslint/scope-manager" "4.33.0"
-    "@typescript-eslint/types" "4.33.0"
-    "@typescript-eslint/typescript-estree" "4.33.0"
-    eslint-scope "^5.1.1"
-    eslint-utils "^3.0.0"
-
 "@typescript-eslint/parser@^4.20.0", "@typescript-eslint/parser@^4.33.0":
   version "4.33.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.33.0.tgz#dfe797570d9694e560528d18eecad86c8c744899"
@@ -528,11 +522,33 @@
     "@typescript-eslint/types" "4.33.0"
     "@typescript-eslint/visitor-keys" "4.33.0"
 
+"@typescript-eslint/scope-manager@5.29.0":
+  version "5.29.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.29.0.tgz#2a6a32e3416cb133e9af8dcf54bf077a916aeed3"
+  integrity sha512-etbXUT0FygFi2ihcxDZjz21LtC+Eps9V2xVx09zFoN44RRHPrkMflidGMI+2dUs821zR1tDS6Oc9IXxIjOUZwA==
+  dependencies:
+    "@typescript-eslint/types" "5.29.0"
+    "@typescript-eslint/visitor-keys" "5.29.0"
+
+"@typescript-eslint/type-utils@5.29.0":
+  version "5.29.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.29.0.tgz#241918001d164044020b37d26d5b9f4e37cc3d5d"
+  integrity sha512-JK6bAaaiJozbox3K220VRfCzLa9n0ib/J+FHIwnaV3Enw/TO267qe0pM1b1QrrEuy6xun374XEAsRlA86JJnyg==
+  dependencies:
+    "@typescript-eslint/utils" "5.29.0"
+    debug "^4.3.4"
+    tsutils "^3.21.0"
+
 "@typescript-eslint/types@4.33.0":
   version "4.33.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.33.0.tgz#a1e59036a3b53ae8430ceebf2a919dc7f9af6d72"
   integrity sha512-zKp7CjQzLQImXEpLt2BUw1tvOMPfNoTAfb8l51evhYbOEEzdWyQNmHWWGPR6hwKJDAi+1VXSBmnhL9kyVTTOuQ==
 
+"@typescript-eslint/types@5.29.0":
+  version "5.29.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.29.0.tgz#7861d3d288c031703b2d97bc113696b4d8c19aab"
+  integrity sha512-X99VbqvAXOMdVyfFmksMy3u8p8yoRGITgU1joBJPzeYa0rhdf5ok9S56/itRoUSh99fiDoMtarSIJXo7H/SnOg==
+
 "@typescript-eslint/typescript-estree@4.33.0":
   version "4.33.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.33.0.tgz#0dfb51c2908f68c5c08d82aefeaf166a17c24609"
@@ -546,6 +562,31 @@
     semver "^7.3.5"
     tsutils "^3.21.0"
 
+"@typescript-eslint/typescript-estree@5.29.0":
+  version "5.29.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.29.0.tgz#e83d19aa7fd2e74616aab2f25dfbe4de4f0b5577"
+  integrity sha512-mQvSUJ/JjGBdvo+1LwC+GY2XmSYjK1nAaVw2emp/E61wEVYEyibRHCqm1I1vEKbXCpUKuW4G7u9ZCaZhJbLoNQ==
+  dependencies:
+    "@typescript-eslint/types" "5.29.0"
+    "@typescript-eslint/visitor-keys" "5.29.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/utils@5.29.0":
+  version "5.29.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.29.0.tgz#775046effd5019667bd086bcf326acbe32cd0082"
+  integrity sha512-3Eos6uP1nyLOBayc/VUdKZikV90HahXE5Dx9L5YlSd/7ylQPXhLk1BYb29SDgnBnTp+jmSZUU0QxUiyHgW4p7A==
+  dependencies:
+    "@types/json-schema" "^7.0.9"
+    "@typescript-eslint/scope-manager" "5.29.0"
+    "@typescript-eslint/types" "5.29.0"
+    "@typescript-eslint/typescript-estree" "5.29.0"
+    eslint-scope "^5.1.1"
+    eslint-utils "^3.0.0"
+
 "@typescript-eslint/visitor-keys@4.33.0":
   version "4.33.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.33.0.tgz#2a22f77a41604289b7a186586e9ec48ca92ef1dd"
@@ -554,6 +595,14 @@
     "@typescript-eslint/types" "4.33.0"
     eslint-visitor-keys "^2.0.0"
 
+"@typescript-eslint/visitor-keys@5.29.0":
+  version "5.29.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.29.0.tgz#7a4749fa7ef5160c44a451bf060ac1dc6dfb77ee"
+  integrity sha512-Hpb/mCWsjILvikMQoZIE3voc9wtQcS0A9FUw3h8bhr9UxBdtI/tw1ZDZUOXHXLOVMedKCH5NxyzATwnU78bWCQ==
+  dependencies:
+    "@typescript-eslint/types" "5.29.0"
+    eslint-visitor-keys "^3.3.0"
+
 JSONStream@^1.0.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
@@ -1257,6 +1306,13 @@ debug@^4.0.1, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2:
   dependencies:
     ms "2.1.2"
 
+debug@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
 decamelize-keys@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
@@ -1459,10 +1515,10 @@ eslint-config-next@^11.1.2:
     eslint-plugin-react "^7.23.1"
     eslint-plugin-react-hooks "^4.2.0"
 
-eslint-config-prettier@^8.3.0:
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz#f7471b20b6fe8a9a9254cc684454202886a2dd7a"
-  integrity sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==
+eslint-config-prettier@^8.5.0:
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1"
+  integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
 
 eslint-import-resolver-node@^0.3.4, eslint-import-resolver-node@^0.3.6:
   version "0.3.6"
@@ -1590,6 +1646,11 @@ eslint-visitor-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
 
+eslint-visitor-keys@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
+  integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
+
 eslint@^7.32.0:
   version "7.32.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d"
@@ -1710,6 +1771,17 @@ fast-glob@^3.1.1, fast-glob@^3.2.7:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
+fast-glob@^3.2.9:
+  version "3.2.11"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
+  integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -1977,6 +2049,18 @@ globby@^11.0.3:
     merge2 "^1.3.0"
     slash "^3.0.0"
 
+globby@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.0"
+
 graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   version "4.2.8"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
@@ -2082,11 +2166,16 @@ ignore@^4.0.6:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
-ignore@^5.1.4, ignore@^5.1.8:
+ignore@^5.1.4:
   version "5.1.8"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
   integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
 
+ignore@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
+  integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
+
 import-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-3.0.0.tgz#20845547718015126ea9b3676b7592fb8bd4cf92"
@@ -2607,7 +2696,7 @@ merge-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
-merge2@^1.3.0:
+merge2@^1.3.0, merge2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
@@ -3091,10 +3180,10 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c"
-  integrity sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==
+prettier@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
+  integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
 
 pretty-hrtime@^1.0.3:
   version "1.0.3"
@@ -3304,7 +3393,7 @@ regexp.prototype.flags@^1.3.1:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
 
-regexpp@^3.1.0:
+regexpp@^3.1.0, regexpp@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
@@ -3436,6 +3525,13 @@ semver@^6.0.0, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
+semver@^7.3.7:
+  version "7.3.7"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
+  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
+  dependencies:
+    lru-cache "^6.0.0"
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"