diff --git a/.eslintrc.json b/.eslintrc.json
index 22c30eb..4d765f2 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,6 +1,3 @@
 {
-  "extends": [
-    "next/core-web-vitals",
-    "prettier"
-  ]
-}
\ No newline at end of file
+  "extends": ["next/core-web-vitals", "prettier"]
+}
diff --git a/.prettierrc b/.prettierrc
index 66e7e94..fa51da2 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -3,4 +3,4 @@
   "tabWidth": 2,
   "semi": false,
   "singleQuote": true
-}
\ No newline at end of file
+}
diff --git a/components/Content.tsx b/components/Content.tsx
index 1be48eb..08787e7 100644
--- a/components/Content.tsx
+++ b/components/Content.tsx
@@ -1,78 +1,88 @@
-import React, { useState } from "react";
-import sanitizeHtml from 'sanitize-html';
+import React, { useState } from 'react'
+import sanitizeHtml from 'sanitize-html'
 import debounce from 'debounce'
 
 type AccountDetails = {
-  id: string, // IMPORTANT: this is int64 so will overflow Javascript's number type
-  acct: string,
-  followed_by: Set<string>, // list of handles
-};
+  id: string // IMPORTANT: this is int64 so will overflow Javascript's number type
+  acct: string
+  followed_by: Set<string> // list of handles
+}
 
-async function usernameToId(handle: string): Promise<{ id: number, domain: string }> {
-  const match = handle.match(/^(.+)@(.+)$/);
+async function usernameToId(
+  handle: string
+): Promise<{ id: number; domain: string }> {
+  const match = handle.match(/^(.+)@(.+)$/)
   if (!match || match.length < 2) {
-    throw new Error(`Incorrect handle: ${handle}`);
+    throw new Error(`Incorrect handle: ${handle}`)
   }
-  const domain = match[2];
-  const username = match[1];
-  let response = await fetch(`https://${domain}/api/v1/accounts/lookup?acct=${username}`);
+  const domain = match[2]
+  const username = match[1]
+  let response = await fetch(
+    `https://${domain}/api/v1/accounts/lookup?acct=${username}`
+  )
   if (response.status !== 200) {
-    throw new Error('HTTP request failed');
+    throw new Error('HTTP request failed')
   }
-  const { id } = await response.json();
-  return { id, domain };
+  const { id } = await response.json()
+  return { id, domain }
 }
 
 function getDomain(handle: string) {
-  const match = handle.match(/^(.+)@(.+)$/);
+  const match = handle.match(/^(.+)@(.+)$/)
   if (!match || match.length < 2) {
-    throw new Error(`Incorrect handle: ${handle}`);
+    throw new Error(`Incorrect handle: ${handle}`)
   }
-  const domain = match[2];
-  return domain;
+  const domain = match[2]
+  return domain
 }
 
-async function accountFollows(handle: string, limit: number, logError: (x: string) => void): Promise<Array<AccountDetails>> {
-  let id, domain: string;
+async function accountFollows(
+  handle: string,
+  limit: number,
+  logError: (x: string) => void
+): Promise<Array<AccountDetails>> {
+  let id, domain: string
   try {
-    ({ id, domain } = await usernameToId(handle));
+    ;({ id, domain } = await usernameToId(handle))
   } catch (e) {
-    logError(`Cannot find handle ${handle}.`);
-    return [];
+    logError(`Cannot find handle ${handle}.`)
+    return []
   }
 
-  let nextPage: string | null = `https://${domain}/api/v1/accounts/${id}/following`;
-  let data: Array<AccountDetails> = [];
+  let nextPage:
+    | string
+    | null = `https://${domain}/api/v1/accounts/${id}/following`
+  let data: Array<AccountDetails> = []
   while (nextPage && data.length <= limit) {
-    console.log(`Get page: ${nextPage}`);
-    let response;
-    let page;
+    console.log(`Get page: ${nextPage}`)
+    let response
+    let page
     try {
-      response = await fetch(nextPage);
+      response = await fetch(nextPage)
       if (response.status !== 200) {
-        throw new Error('HTTP request failed');
+        throw new Error('HTTP request failed')
       }
-      page = await response.json();
-      console.log(response.statusText);
+      page = await response.json()
+      console.log(response.statusText)
     } catch (e) {
       logError(`Error while retrieving followers for ${handle}.`)
-      console.log('eeeee', e);
-      break;
+      console.log('eeeee', e)
+      break
     }
     if (!page.map) {
-      break;
+      break
     }
     page = page.map((entry: AccountDetails) => {
       if (entry.acct && !/@/.test(entry.acct)) {
         // make sure the domain is always there
-        entry.acct = `${entry.acct}@${domain}`;
-      };
-      return entry;
+        entry.acct = `${entry.acct}@${domain}`
+      }
+      return entry
     })
-    data = [...data, ...page];
-    nextPage = getNextPage(response.headers.get('Link'));
+    data = [...data, ...page]
+    nextPage = getNextPage(response.headers.get('Link'))
   }
-  return data;
+  return data
 }
 
 async function accountFofs(
@@ -81,103 +91,127 @@ async function accountFofs(
   setFollows: (x: Array<AccountDetails>) => void,
   logError: (x: string) => void
 ): Promise<void> {
-  const directFollows = await accountFollows(handle, 2000, logError);
-  setProgress([0, directFollows.length]);
-  let progress = 0;
+  const directFollows = await accountFollows(handle, 2000, logError)
+  setProgress([0, directFollows.length])
+  let progress = 0
 
-  const directFollowIds = new Set(directFollows.map(({ acct }) => acct));
-  directFollowIds.add(handle.replace(/^@/, ''));
+  const directFollowIds = new Set(directFollows.map(({ acct }) => acct))
+  directFollowIds.add(handle.replace(/^@/, ''))
 
-  const indirectFollowLists: Array<Array<AccountDetails>> = [];
+  const indirectFollowLists: Array<Array<AccountDetails>> = []
 
   const updateList = debounce(() => {
-    let indirectFollows: Array<AccountDetails> = [].concat([], ...indirectFollowLists);
-    const indirectFollowMap = new Map();
+    let indirectFollows: Array<AccountDetails> = [].concat(
+      [],
+      ...indirectFollowLists
+    )
+    const indirectFollowMap = new Map()
 
-    indirectFollows.filter(
-      // exclude direct follows
-      ({ acct }) => !directFollowIds.has(acct)
-    ).map(account => {
-      const acct = account.acct;
-      if (indirectFollowMap.has(acct)) {
-        const otherAccount = indirectFollowMap.get(acct);
-        account.followed_by = new Set([...Array.from(account.followed_by.values()), ...otherAccount.followed_by]);
-      }
-      indirectFollowMap.set(acct, account);
-    });
+    indirectFollows
+      .filter(
+        // exclude direct follows
+        ({ acct }) => !directFollowIds.has(acct)
+      )
+      .map((account) => {
+        const acct = account.acct
+        if (indirectFollowMap.has(acct)) {
+          const otherAccount = indirectFollowMap.get(acct)
+          account.followed_by = new Set([
+            ...Array.from(account.followed_by.values()),
+            ...otherAccount.followed_by,
+          ])
+        }
+        indirectFollowMap.set(acct, account)
+      })
 
     const list = Array.from(indirectFollowMap.values()).sort((a, b) => {
       if (a.followed_by.size != b.followed_by.size) {
-        return b.followed_by.size - a.followed_by.size;
+        return b.followed_by.size - a.followed_by.size
       }
-      return b.followers_count - a.followers_count;
-    });
+      return b.followers_count - a.followers_count
+    })
 
-    setFollows(list);
-  }, 2000);
+    setFollows(list)
+  }, 2000)
 
   await Promise.all(
-    directFollows.map(
-      async ({ acct }) => {
-        const follows = await accountFollows(acct, 200, logError);
-        progress++;
-        setProgress([progress, directFollows.length]);
-        indirectFollowLists.push(follows.map(account => ({ ...account, followed_by: new Set([acct]) })));
-        updateList();
-      }
-    ),
-  );
+    directFollows.map(async ({ acct }) => {
+      const follows = await accountFollows(acct, 200, logError)
+      progress++
+      setProgress([progress, directFollows.length])
+      indirectFollowLists.push(
+        follows.map((account) => ({ ...account, followed_by: new Set([acct]) }))
+      )
+      updateList()
+    })
+  )
 
-  updateList.flush();
+  updateList.flush()
 }
 
 function getNextPage(linkHeader: string | null): string | null {
   if (!linkHeader) {
-    return null;
+    return null
   }
   // Example header:
   // Link: <https://mastodon.example/api/v1/accounts/1/follows?limit=2&max_id=7628164>; rel="next", <https://mastodon.example/api/v1/accounts/1/follows?limit=2&since_id=7628165>; rel="prev"
-  const match = linkHeader.match(/<(.+)>; rel="next"/);
+  const match = linkHeader.match(/<(.+)>; rel="next"/)
   if (match && match.length > 0) {
-    return match[1];
+    return match[1]
   }
-  return null;
+  return null
 }
 
-export function Content({ }) {
-  const [handle, setHandle] = useState("");
-  const [follows, setFollows] = useState<Array<AccountDetails>>([]);
-  const [isLoading, setLoading] = useState(false);
-  const [isDone, setDone] = useState(false);
-  const [domain, setDomain] = useState<string>("");
-  const [[numLoaded, totalToLoad], setProgress] = useState<Array<number>>([0, 0]);
-  const [errors, setErrors] = useState<Array<string>>([]);
+export function Content({}) {
+  const [handle, setHandle] = useState('')
+  const [follows, setFollows] = useState<Array<AccountDetails>>([])
+  const [isLoading, setLoading] = useState(false)
+  const [isDone, setDone] = useState(false)
+  const [domain, setDomain] = useState<string>('')
+  const [[numLoaded, totalToLoad], setProgress] = useState<Array<number>>([
+    0, 0,
+  ])
+  const [errors, setErrors] = useState<Array<string>>([])
 
   async function search(handle: string) {
     if (!/@/.test(handle)) {
-      return;
+      return
     }
-    setErrors([]);
-    setLoading(true);
-    setDone(false);
-    setFollows([]);
-    setProgress([0, 0]);
-    setDomain(getDomain(handle));
-    await accountFofs(handle, setProgress, setFollows, error => setErrors(e => [...e, error]));
-    setLoading(false);
-    setDone(true);
+    setErrors([])
+    setLoading(true)
+    setDone(false)
+    setFollows([])
+    setProgress([0, 0])
+    setDomain(getDomain(handle))
+    await accountFofs(handle, setProgress, setFollows, (error) =>
+      setErrors((e) => [...e, error])
+    )
+    setLoading(false)
+    setDone(true)
   }
 
-  return <section className="bg-gray-50 dark:bg-gray-800" id="searchForm">
-    <div className="px-4 py-8 mx-auto space-y-12 lg:space-y-20 lg:py-24 lg:px-6">
-      <form onSubmit={e => {
-        search(handle);
-        e.preventDefault();
-        return false;
-      }}>
-        <div className="form-group mb-6  text-4xl lg:ml-16">
-          <label htmlFor="mastodonHandle" className="form-label inline-block mb-2 text-gray-700 dark:text-gray-200">Your Mastodon handle:</label>
-          <input type="text" value={handle} onChange={e => setHandle(e.target.value)} className="form-control
+  return (
+    <section className="bg-gray-50 dark:bg-gray-800" id="searchForm">
+      <div className="px-4 py-8 mx-auto space-y-12 lg:space-y-20 lg:py-24 lg:px-6">
+        <form
+          onSubmit={(e) => {
+            search(handle)
+            e.preventDefault()
+            return false
+          }}
+        >
+          <div className="form-group mb-6  text-4xl lg:ml-16">
+            <label
+              htmlFor="mastodonHandle"
+              className="form-label inline-block mb-2 text-gray-700 dark:text-gray-200"
+            >
+              Your Mastodon handle:
+            </label>
+            <input
+              type="text"
+              value={handle}
+              onChange={(e) => setHandle(e.target.value)}
+              className="form-control
         block
         w-80
         px-3
@@ -193,11 +227,21 @@ export function Content({ }) {
         m-0
         focus:text-gray-900 focus:bg-white focus:border-green-600 focus:outline-none
         dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-gray-200 dark:focus:bg-gray-900 dark:focus:text-gray-200
-        " id="mastodonHandle"
-            aria-describedby="mastodonHandleHelp" placeholder="johnmastodon@mas.to" />
-          <small id="mastodonHandleHelp" className="block mt-1 text-xs text-gray-600 dark:text-gray-300">Be sure to include the full handle, including the domain.</small>
+        "
+              id="mastodonHandle"
+              aria-describedby="mastodonHandleHelp"
+              placeholder="johnmastodon@mas.to"
+            />
+            <small
+              id="mastodonHandleHelp"
+              className="block mt-1 text-xs text-gray-600 dark:text-gray-300"
+            >
+              Be sure to include the full handle, including the domain.
+            </small>
 
-          <button type="submit" className="
+            <button
+              type="submit"
+              className="
       px-6
       py-2.5
       bg-green-600
@@ -213,61 +257,107 @@ export function Content({ }) {
       active:bg-green-800 active:shadow-lg
       transition
       duration-150
-      ease-in-out">
-            Search
-            {isLoading ?
-              <svg className="w-4 h-4 ml-2 fill-white animate-spin inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">{/*! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}<path d="M304 48c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zm0 416c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zM48 304c26.5 0 48-21.5 48-48s-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48zm464-48c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zM142.9 437c18.7-18.7 18.7-49.1 0-67.9s-49.1-18.7-67.9 0s-18.7 49.1 0 67.9s49.1 18.7 67.9 0zm0-294.2c18.7-18.7 18.7-49.1 0-67.9S93.7 56.2 75 75s-18.7 49.1 0 67.9s49.1 18.7 67.9 0zM369.1 437c18.7 18.7 49.1 18.7 67.9 0s18.7-49.1 0-67.9s-49.1-18.7-67.9 0s-18.7 49.1 0 67.9z" /></svg>
-              : null}
-          </button>
+      ease-in-out"
+            >
+              Search
+              {isLoading ? (
+                <svg
+                  className="w-4 h-4 ml-2 fill-white animate-spin inline"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 512 512"
+                >
+                  {/*! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}
+                  <path d="M304 48c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zm0 416c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zM48 304c26.5 0 48-21.5 48-48s-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48zm464-48c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zM142.9 437c18.7-18.7 18.7-49.1 0-67.9s-49.1-18.7-67.9 0s-18.7 49.1 0 67.9s49.1 18.7 67.9 0zm0-294.2c18.7-18.7 18.7-49.1 0-67.9S93.7 56.2 75 75s-18.7 49.1 0 67.9s49.1 18.7 67.9 0zM369.1 437c18.7 18.7 49.1 18.7 67.9 0s18.7-49.1 0-67.9s-49.1-18.7-67.9 0s-18.7 49.1 0 67.9z" />
+                </svg>
+              ) : null}
+            </button>
 
-          {isLoading ?
-            <p className="text-sm dark:text-gray-400">Loaded {numLoaded} of {totalToLoad}...</p>
-            : null}
+            {isLoading ? (
+              <p className="text-sm dark:text-gray-400">
+                Loaded {numLoaded} of {totalToLoad}...
+              </p>
+            ) : null}
 
-          {isDone && follows.length === 0 ?
-            <div className="flex p-4 mt-4 max-w-full sm:max-w-xl text-sm text-gray-700 bg-gray-100 rounded-lg dark:bg-gray-700 dark:text-gray-300" role="alert">
-              <svg aria-hidden="true" className="flex-shrink-0 inline w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
-              <span className="sr-only">Info</span>
-              <div>
-                <span className="font-medium">No results found.</span> Please double check for typos in the handle, and ensure that you follow at least a few people
-                to seed the search. Otherwise, try again later as Mastodon may throttle requests.
+            {isDone && follows.length === 0 ? (
+              <div
+                className="flex p-4 mt-4 max-w-full sm:max-w-xl text-sm text-gray-700 bg-gray-100 rounded-lg dark:bg-gray-700 dark:text-gray-300"
+                role="alert"
+              >
+                <svg
+                  aria-hidden="true"
+                  className="flex-shrink-0 inline w-5 h-5 mr-3"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+                    clip-rule="evenodd"
+                  ></path>
+                </svg>
+                <span className="sr-only">Info</span>
+                <div>
+                  <span className="font-medium">No results found.</span> Please
+                  double check for typos in the handle, and ensure that you
+                  follow at least a few people to seed the search. Otherwise,
+                  try again later as Mastodon may throttle requests.
+                </div>
+              </div>
+            ) : null}
+          </div>
+        </form>
+
+        {isDone || follows.length > 0 ? (
+          <div className="flex-col lg:flex items-center justify-center">
+            <div className="max-w-4xl content-center px-2 sm:px-8 py-4 bg-white border rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+              <div className="flow-root">
+                <ul
+                  role="list"
+                  className="divide-y divide-gray-200 dark:divide-gray-700"
+                >
+                  {follows.slice(0, 500).map((account) => (
+                    <AccountDetails
+                      key={account.acct}
+                      account={account}
+                      mainDomain={domain}
+                    />
+                  ))}
+                </ul>
               </div>
             </div>
-            : null}
-        </div>
-
-      </form>
-
-
-      {isDone || follows.length > 0 ?
-        <div className="flex-col lg:flex items-center justify-center">
-          <div className="max-w-4xl content-center px-2 sm:px-8 py-4 bg-white border rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
-            <div className="flow-root">
-              <ul role="list" className="divide-y divide-gray-200 dark:divide-gray-700">
-                {follows.slice(0, 500).map(account => <AccountDetails key={account.acct} account={account} mainDomain={domain} />)}
-              </ul>
-            </div>
           </div>
-        </div>
-        : null}
+        ) : null}
 
-      <ErrorLog errors={errors} />
-    </div>
-  </section>;
+        <ErrorLog errors={errors} />
+      </div>
+    </section>
+  )
 }
 
 function AccountDetails({ account, mainDomain }) {
-  const { avatar_static, display_name, acct, note, followers_count, followed_by } = account;
-  let formatter = Intl.NumberFormat('en', { notation: 'compact' });
-  let numFollowers = formatter.format(followers_count);
+  const {
+    avatar_static,
+    display_name,
+    acct,
+    note,
+    followers_count,
+    followed_by,
+  } = account
+  let formatter = Intl.NumberFormat('en', { notation: 'compact' })
+  let numFollowers = formatter.format(followers_count)
 
-  const [expandedFollowers, setExpandedFollowers] = useState(false);
+  const [expandedFollowers, setExpandedFollowers] = useState(false)
 
   return (
     <li className="py-3 sm:py-4">
       <div className="flex flex-col sm:flex-row items-center space-x-4">
         <div className="flex-shrink-0">
-          <img className="w-16 h-16 sm:w-8 sm:h-8 rounded-full" src={avatar_static} alt={display_name} />
+          <img
+            className="w-16 h-16 sm:w-8 sm:h-8 rounded-full"
+            src={avatar_static}
+            alt={display_name}
+          />
         </div>
         <div className="flex-1 min-w-0">
           <p className="text-sm font-medium text-gray-900 truncate dark:text-white">
@@ -277,36 +367,73 @@ function AccountDetails({ account, mainDomain }) {
             {acct} | {numFollowers} followers
           </p>
           <br />
-          <small className="text-sm dark:text-gray-200" dangerouslySetInnerHTML={{ __html: sanitizeHtml(note) }}></small>
+          <small
+            className="text-sm dark:text-gray-200"
+            dangerouslySetInnerHTML={{ __html: sanitizeHtml(note) }}
+          ></small>
           <br />
           <small className="text-xs text-gray-800 dark:text-gray-400">
             Followed by{' '}
-            {followed_by.size < 9 || expandedFollowers ?
-
+            {followed_by.size < 9 || expandedFollowers ? (
               Array.from<string>(followed_by.values()).map((handle, idx) => (
-                <><span className="font-semibold">{handle.replace(/@.+/, '')}</span>{idx === followed_by.size - 1 ? '.' : ', '}</>
+                <>
+                  <span className="font-semibold">
+                    {handle.replace(/@.+/, '')}
+                  </span>
+                  {idx === followed_by.size - 1 ? '.' : ', '}
+                </>
               ))
-              : <>
-                <button onClick={() => setExpandedFollowers(true)} className="font-semibold">{followed_by.size} of your contacts</button>.
-              </>}
+            ) : (
+              <>
+                <button
+                  onClick={() => setExpandedFollowers(true)}
+                  className="font-semibold"
+                >
+                  {followed_by.size} of your contacts
+                </button>
+                .
+              </>
+            )}
           </small>
         </div>
         <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white my-4 sm:my-0">
-          <a href={`https://${mainDomain}/@${acct.replace('@'+mainDomain, '')}`} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" target="_blank" rel="noreferrer">
+          <a
+            href={`https://${mainDomain}/@${acct.replace(
+              '@' + mainDomain,
+              ''
+            )}`}
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+            target="_blank"
+            rel="noreferrer"
+          >
             Follow
           </a>
         </div>
       </div>
     </li>
-  );
+  )
 }
 
 function ErrorLog({ errors }: { errors: Array<string> }) {
-  const [expanded, setExpanded] = useState(false);
-  return (<>
-    {errors.length > 0 ? <div className="text-sm text-gray-600 dark:text-gray-200 lg:ml-12 border border-solid border-gray-200 dark:border-gray-700 rounded p-4">
-      Found <button className="font-bold" onClick={() => setExpanded(!expanded)}>{errors.length} warnings</button>{expanded ? ':' : '.'}
-      {expanded ? errors.map(err => <p key={err} className="text-xs">{err}</p>) : null}
-    </div> : null}
-  </>);
-}
\ No newline at end of file
+  const [expanded, setExpanded] = useState(false)
+  return (
+    <>
+      {errors.length > 0 ? (
+        <div className="text-sm text-gray-600 dark:text-gray-200 lg:ml-12 border border-solid border-gray-200 dark:border-gray-700 rounded p-4">
+          Found{' '}
+          <button className="font-bold" onClick={() => setExpanded(!expanded)}>
+            {errors.length} warnings
+          </button>
+          {expanded ? ':' : '.'}
+          {expanded
+            ? errors.map((err) => (
+                <p key={err} className="text-xs">
+                  {err}
+                </p>
+              ))
+            : null}
+        </div>
+      ) : null}
+    </>
+  )
+}
diff --git a/components/FAQ.tsx b/components/FAQ.tsx
index 75650e3..c401a4f 100644
--- a/components/FAQ.tsx
+++ b/components/FAQ.tsx
@@ -1,62 +1,127 @@
-import React, { useState } from "react";
-export function FAQ({ }) {
-  return <section className="bg-white dark:bg-gray-900 pt-12">
-    <div className="max-w-screen-xl px-4 pb-8 mx-auto lg:pb-24 lg:px-6" id="faq">
-      <h2 className="mb-6 text-3xl font-extrabold tracking-tight text-center text-gray-900 lg:mb-8 lg:text-3xl dark:text-white">Frequently asked questions</h2>
-      <div className="max-w-screen-md mx-auto">
-        <div id="accordion-flush" data-accordion="collapse" data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white" data-inactive-classes="text-gray-500 dark:text-gray-400">
-          <FAQItem defaultSelected title="How does this work?">
-            The tool looks up all the people you follow, and then the people <em>they</em> follow. Then
-            it sorts them by the number of mutuals, or otherwise by how popular those accounts are.
-          </FAQItem>
+import React, { useState } from 'react'
+export function FAQ({}) {
+  return (
+    <section className="bg-white dark:bg-gray-900 pt-12">
+      <div
+        className="max-w-screen-xl px-4 pb-8 mx-auto lg:pb-24 lg:px-6"
+        id="faq"
+      >
+        <h2 className="mb-6 text-3xl font-extrabold tracking-tight text-center text-gray-900 lg:mb-8 lg:text-3xl dark:text-white">
+          Frequently asked questions
+        </h2>
+        <div className="max-w-screen-md mx-auto">
+          <div
+            id="accordion-flush"
+            data-accordion="collapse"
+            data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
+            data-inactive-classes="text-gray-500 dark:text-gray-400"
+          >
+            <FAQItem defaultSelected title="How does this work?">
+              The tool looks up all the people you follow, and then the people{' '}
+              <em>they</em> follow. Then it sorts them by the number of mutuals,
+              or otherwise by how popular those accounts are.
+            </FAQItem>
 
-          <FAQItem title="Do I need to grant the app any permissions?">
-            Not at all! This app uses public APIs to fetch potential people you can follow on Mastodon. In fact, it only does inauthenticated network requests to various
-            Mastodon instances.
-          </FAQItem>
+            <FAQItem title="Do I need to grant the app any permissions?">
+              Not at all! This app uses public APIs to fetch potential people
+              you can follow on Mastodon. In fact, it only does inauthenticated
+              network requests to various Mastodon instances.
+            </FAQItem>
 
-          <FAQItem title="Help! The search got stuck.">
-            Don&apos;t worry. The list of suggestions will load in 30 seconds or so. Sometimes it gets stuck because one or more of the queries
-            made to Mastodon time out. This is not a problem, because the rest of the queries will work as expected.
-          </FAQItem>
+            <FAQItem title="Help! The search got stuck.">
+              Don&apos;t worry. The list of suggestions will load in 30 seconds
+              or so. Sometimes it gets stuck because one or more of the queries
+              made to Mastodon time out. This is not a problem, because the rest
+              of the queries will work as expected.
+            </FAQItem>
 
-          <FAQItem title="Why don't I see any results?">
-            There could be a few reasons:
-            <ul className="list-disc ml-4">
-              <li>This tool only works if your list of follows is public. If you&apos;ve opted to hide your social graph, you will not see
-                any results here.</li>
-              <li>Due to the high volume of requests, sometimes Mastodon throttles this tool. If that&apos;s the case, try again a bit later.</li>
-              <li>Make sure you have no typos in the Mastodon handle, and make sure you follow at least a few people to seed the search.</li>
-            </ul>
-          </FAQItem>
+            <FAQItem title="Why don't I see any results?">
+              There could be a few reasons:
+              <ul className="list-disc ml-4">
+                <li>
+                  This tool only works if your list of follows is public. If
+                  you&apos;ve opted to hide your social graph, you will not see
+                  any results here.
+                </li>
+                <li>
+                  Due to the high volume of requests, sometimes Mastodon
+                  throttles this tool. If that&apos;s the case, try again a bit
+                  later.
+                </li>
+                <li>
+                  Make sure you have no typos in the Mastodon handle, and make
+                  sure you follow at least a few people to seed the search.
+                </li>
+              </ul>
+            </FAQItem>
 
-          <FAQItem title="How can I contribute with suggestions?">
-            Click the &quot;Fork me on Github&quot; link on the top right, and open up an issue.
-          </FAQItem>
+            <FAQItem title="How can I contribute with suggestions?">
+              Click the &quot;Fork me on Github&quot; link on the top right, and
+              open up an issue.
+            </FAQItem>
 
-          <FAQItem title="Why is this not a core Mastodon feature?">
-            Well, maybe it should be. In the meantime, you can use this website.
-          </FAQItem>
+            <FAQItem title="Why is this not a core Mastodon feature?">
+              Well, maybe it should be. In the meantime, you can use this
+              website.
+            </FAQItem>
+          </div>
         </div>
       </div>
-    </div>
-  </section>;
+    </section>
+  )
 }
 
-function FAQItem({ defaultSelected, title, children }: { defaultSelected?: boolean, title: string, children: React.ReactNode }) {
-  const [selected, setSelected] = useState(defaultSelected);
-  return (<>
-    <h3 id="accordion-flush-heading-1">
-      <button type="button" onClick={() => setSelected(!selected)} className={`flex items-center justify-between w-full py-5 font-medium text-left text-gray-${selected ? 900 : 500} bg-white border-b border-gray-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-${selected ? 200 : 400}`} data-accordion-target="#accordion-flush-body-1" aria-expanded="true" aria-controls="accordion-flush-body-1">
-        <span>{title}</span>
-        <svg data-accordion-icon className="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" /></svg>
-      </button>
-    </h3>
-    {selected ?
-      <div id="accordion-flush-body-1" aria-labelledby="accordion-flush-heading-1">
-        <div className="py-5 border-b border-gray-200 dark:border-gray-700 dark:text-gray-300">
-          {children}
+function FAQItem({
+  defaultSelected,
+  title,
+  children,
+}: {
+  defaultSelected?: boolean
+  title: string
+  children: React.ReactNode
+}) {
+  const [selected, setSelected] = useState(defaultSelected)
+  return (
+    <>
+      <h3 id="accordion-flush-heading-1">
+        <button
+          type="button"
+          onClick={() => setSelected(!selected)}
+          className={`flex items-center justify-between w-full py-5 font-medium text-left text-gray-${
+            selected ? 900 : 500
+          } bg-white border-b border-gray-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-${
+            selected ? 200 : 400
+          }`}
+          data-accordion-target="#accordion-flush-body-1"
+          aria-expanded="true"
+          aria-controls="accordion-flush-body-1"
+        >
+          <span>{title}</span>
+          <svg
+            data-accordion-icon
+            className="w-6 h-6 rotate-180 shrink-0"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fillRule="evenodd"
+              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </button>
+      </h3>
+      {selected ? (
+        <div
+          id="accordion-flush-body-1"
+          aria-labelledby="accordion-flush-heading-1"
+        >
+          <div className="py-5 border-b border-gray-200 dark:border-gray-700 dark:text-gray-300">
+            {children}
+          </div>
         </div>
-      </div> : null}
-  </>);
+      ) : null}
+    </>
+  )
 }
diff --git a/components/Footer.tsx b/components/Footer.tsx
index da70715..23e7b29 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,16 +1,41 @@
-import React from "react";
-export default function Footer({ }) {
-    return <footer className="bg-white dark:bg-gray-800">
-        <div className="max-w-screen-xl p-4 py-6 mx-auto lg:py-16 md:p-8 lg:p-10">
-            <hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
-            <div className="text-center">
-                <div className="mb-5 lg:text-2xl font-semibold text-gray-700 dark:text-white text-lg">
-                    Followgraph for Mastodon, built by&nbsp; <a href="https://mastodon.online/@gabipurcaru" target="_blank" rel="noreferrer" className="font-bold text-gray-900 dark:text-gray-400">@gabipurcaru@mastodon.online</a>.
-                </div>
-                <span className="block text-sm text-center text-gray-500 dark:text-gray-400">Built with <a href="https://flowbite.com" className="text-purple-600 hover:underline dark:text-purple-500">Flowbite</a> and <a href="https://tailwindcss.com" className="text-purple-600 hover:underline dark:text-purple-500">Tailwind CSS</a>.
-                </span>
-                
-            </div>
+import React from 'react'
+export default function Footer({}) {
+  return (
+    <footer className="bg-white dark:bg-gray-800">
+      <div className="max-w-screen-xl p-4 py-6 mx-auto lg:py-16 md:p-8 lg:p-10">
+        <hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
+        <div className="text-center">
+          <div className="mb-5 lg:text-2xl font-semibold text-gray-700 dark:text-white text-lg">
+            Followgraph for Mastodon, built by&nbsp;{' '}
+            <a
+              href="https://mastodon.online/@gabipurcaru"
+              target="_blank"
+              rel="noreferrer"
+              className="font-bold text-gray-900 dark:text-gray-400"
+            >
+              @gabipurcaru@mastodon.online
+            </a>
+            .
+          </div>
+          <span className="block text-sm text-center text-gray-500 dark:text-gray-400">
+            Built with{' '}
+            <a
+              href="https://flowbite.com"
+              className="text-purple-600 hover:underline dark:text-purple-500"
+            >
+              Flowbite
+            </a>{' '}
+            and{' '}
+            <a
+              href="https://tailwindcss.com"
+              className="text-purple-600 hover:underline dark:text-purple-500"
+            >
+              Tailwind CSS
+            </a>
+            .
+          </span>
         </div>
-    </footer>;
+      </div>
+    </footer>
+  )
 }
diff --git a/components/Header.tsx b/components/Header.tsx
index 34d208f..e5be898 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,39 +1,80 @@
-import React from "react";
+import React from 'react'
 export default function Header() {
-    return (<header className="fixed w-full">
-        <nav className="bg-white border-gray-200 py-2.5 dark:bg-gray-900">
-            <div className="flex flex-wrap items-center justify-between max-w-screen-xl px-4 mx-auto">
-                <Logo />
+  return (
+    <header className="fixed w-full">
+      <nav className="bg-white border-gray-200 py-2.5 dark:bg-gray-900">
+        <div className="flex flex-wrap items-center justify-between max-w-screen-xl px-4 mx-auto">
+          <Logo />
 
-                <div className="items-center justify-between hidden w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2">
-                    <ul className="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
-                        <MenuItem link="#" selected>Home</MenuItem>
-                        <MenuItem link="#faq">FAQ</MenuItem>
-                        <MenuItem link="https://github.com/gabipurcaru/followgraph">Fork me on GitHub</MenuItem>
-                    </ul>
-                </div>
-            </div>
-        </nav>
-    </header>);
+          <div
+            className="items-center justify-between hidden w-full lg:flex lg:w-auto lg:order-1"
+            id="mobile-menu-2"
+          >
+            <ul className="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
+              <MenuItem link="#" selected>
+                Home
+              </MenuItem>
+              <MenuItem link="#faq">FAQ</MenuItem>
+              <MenuItem link="https://github.com/gabipurcaru/followgraph">
+                Fork me on GitHub
+              </MenuItem>
+            </ul>
+          </div>
+        </div>
+      </nav>
+    </header>
+  )
 
-    function Logo({ }) {
-        return (<a href="#" className="flex items-center">
-            <svg className="w-12 h-12 mr-4 dark:fill-white" xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 342.68"><path d="M3.59 300.55a3.59 3.59 0 0 1-3.59-3.6c0-1.02.14-2.03.38-3.03 5.77-45.65 41.51-57.84 66.87-64.42 12.69-3.29 44.26-15.82 31.68-33.04-7.05-9.67-13.44-16.47-19.83-26.68-4.61-6.81-7.04-12.88-7.04-17.75 0-5.19 2.75-11.27 8.26-12.64-.73-10.45-.97-24.2-.48-35.39 1.75-19.2 15.52-33.35 33.31-39.62 7.05-2.68 3.64-13.38 11.42-13.62 18.24-.49 48.14 15.07 59.82 27.71 6.81 7.3 11.18 17.02 11.91 29.91l-.73 32.22c3.4.98 5.59 3.16 6.57 6.56.97 3.89 0 9.25-3.41 16.79 0 .24-.24.24-.24.48-7.51 12.37-15.33 20.56-23.92 32.03-3.84 5.11-3.09 10.01.1 14.41-4.48 2.62-8.85 5.62-13.06 9.16-16.76 14.07-29.68 35.08-34.13 68.61l-.5 2.9c-.24 1.9-.38 3.48-.38 4.66 0 1.48.13 2.93.37 4.35H3.59zM428 174.68c46.41 0 84 37.62 84 84 0 46.4-37.62 84-84 84-46.4 0-84-37.62-84-84 0-46.41 37.61-84 84-84zm-13.25 49.44c-.03-3.91-.39-6.71 4.46-6.64l15.7.19c5.07-.03 6.42 1.58 6.36 6.33v21.43h21.3c3.91-.04 6.7-.4 6.63 4.45l-.19 15.71c.03 5.07-1.58 6.42-6.32 6.36h-21.42v21.41c.06 4.75-1.29 6.36-6.36 6.33l-15.7.18c-4.85.08-4.49-2.72-4.46-6.63v-21.29h-21.43c-4.75.06-6.35-1.29-6.32-6.36l-.19-15.71c-.08-4.85 2.72-4.49 6.62-4.45h21.32v-21.31zm-261.98 76.47c-2.43 0-4.39-1.96-4.39-4.39 0-1.25.17-2.48.47-3.7 7.03-55.71 40.42-67.83 71.33-75.78 14.84-3.82 44.44-18.71 40.85-37.91-7.49-6.94-14.92-16.53-16.21-30.83l-.9.02c-2.07-.03-4.08-.5-5.95-1.56-4.13-2.35-6.4-6.85-7.49-11.99-2.29-15.67-2.86-23.67 5.49-27.17l.07-.02c-1.04-19.34 2.23-47.79-17.63-53.8 39.21-48.44 84.41-74.8 118.34-31.7 37.81 1.98 54.67 55.54 31.19 85.52h-.99c8.36 3.5 7.1 12.49 5.49 27.17-1.09 5.14-3.36 9.64-7.49 11.99-1.87 1.06-3.87 1.53-5.95 1.56l-.9-.02c-1.29 14.3-8.74 23.89-16.23 30.83-1.01 5.43.63 10.52 3.84 15.11-14.05 17.81-22.44 40.31-22.44 64.76 0 14.89 3.11 29.07 8.73 41.91H152.77z" /></svg>
-            <span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Followgraph for Mastodon</span>
-        </a>);
-    }
+  function Logo({}) {
+    return (
+      <a href="#" className="flex items-center">
+        <svg
+          className="w-12 h-12 mr-4 dark:fill-white"
+          xmlns="http://www.w3.org/2000/svg"
+          shape-rendering="geometricPrecision"
+          text-rendering="geometricPrecision"
+          image-rendering="optimizeQuality"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          viewBox="0 0 512 342.68"
+        >
+          <path d="M3.59 300.55a3.59 3.59 0 0 1-3.59-3.6c0-1.02.14-2.03.38-3.03 5.77-45.65 41.51-57.84 66.87-64.42 12.69-3.29 44.26-15.82 31.68-33.04-7.05-9.67-13.44-16.47-19.83-26.68-4.61-6.81-7.04-12.88-7.04-17.75 0-5.19 2.75-11.27 8.26-12.64-.73-10.45-.97-24.2-.48-35.39 1.75-19.2 15.52-33.35 33.31-39.62 7.05-2.68 3.64-13.38 11.42-13.62 18.24-.49 48.14 15.07 59.82 27.71 6.81 7.3 11.18 17.02 11.91 29.91l-.73 32.22c3.4.98 5.59 3.16 6.57 6.56.97 3.89 0 9.25-3.41 16.79 0 .24-.24.24-.24.48-7.51 12.37-15.33 20.56-23.92 32.03-3.84 5.11-3.09 10.01.1 14.41-4.48 2.62-8.85 5.62-13.06 9.16-16.76 14.07-29.68 35.08-34.13 68.61l-.5 2.9c-.24 1.9-.38 3.48-.38 4.66 0 1.48.13 2.93.37 4.35H3.59zM428 174.68c46.41 0 84 37.62 84 84 0 46.4-37.62 84-84 84-46.4 0-84-37.62-84-84 0-46.41 37.61-84 84-84zm-13.25 49.44c-.03-3.91-.39-6.71 4.46-6.64l15.7.19c5.07-.03 6.42 1.58 6.36 6.33v21.43h21.3c3.91-.04 6.7-.4 6.63 4.45l-.19 15.71c.03 5.07-1.58 6.42-6.32 6.36h-21.42v21.41c.06 4.75-1.29 6.36-6.36 6.33l-15.7.18c-4.85.08-4.49-2.72-4.46-6.63v-21.29h-21.43c-4.75.06-6.35-1.29-6.32-6.36l-.19-15.71c-.08-4.85 2.72-4.49 6.62-4.45h21.32v-21.31zm-261.98 76.47c-2.43 0-4.39-1.96-4.39-4.39 0-1.25.17-2.48.47-3.7 7.03-55.71 40.42-67.83 71.33-75.78 14.84-3.82 44.44-18.71 40.85-37.91-7.49-6.94-14.92-16.53-16.21-30.83l-.9.02c-2.07-.03-4.08-.5-5.95-1.56-4.13-2.35-6.4-6.85-7.49-11.99-2.29-15.67-2.86-23.67 5.49-27.17l.07-.02c-1.04-19.34 2.23-47.79-17.63-53.8 39.21-48.44 84.41-74.8 118.34-31.7 37.81 1.98 54.67 55.54 31.19 85.52h-.99c8.36 3.5 7.1 12.49 5.49 27.17-1.09 5.14-3.36 9.64-7.49 11.99-1.87 1.06-3.87 1.53-5.95 1.56l-.9-.02c-1.29 14.3-8.74 23.89-16.23 30.83-1.01 5.43.63 10.52 3.84 15.11-14.05 17.81-22.44 40.31-22.44 64.76 0 14.89 3.11 29.07 8.73 41.91H152.77z" />
+        </svg>
+        <span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">
+          Followgraph for Mastodon
+        </span>
+      </a>
+    )
+  }
 }
 
-function MenuItem({ link, children, selected }: { link: string, children: string | React.ReactElement, selected?: boolean }) {
-    return (<li>
-        {selected ?
-            <a href={link} className="block py-2 pl-3 pr-4 text-white bg-purple-700 rounded lg:bg-transparent lg:text-purple-700 lg:p-0 dark:text-white" aria-current="page">
-                {children}
-            </a>
-            :
-            <a href={link} className="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-300 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">
-                {children}
-            </a>
-        }
-    </li>);
+function MenuItem({
+  link,
+  children,
+  selected,
+}: {
+  link: string
+  children: string | React.ReactElement
+  selected?: boolean
+}) {
+  return (
+    <li>
+      {selected ? (
+        <a
+          href={link}
+          className="block py-2 pl-3 pr-4 text-white bg-purple-700 rounded lg:bg-transparent lg:text-purple-700 lg:p-0 dark:text-white"
+          aria-current="page"
+        >
+          {children}
+        </a>
+      ) : (
+        <a
+          href={link}
+          className="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-300 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700"
+        >
+          {children}
+        </a>
+      )}
+    </li>
+  )
 }
diff --git a/components/Hero.tsx b/components/Hero.tsx
index 4c56c90..a8e7edc 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -1,27 +1,40 @@
 import Image from 'next/image'
-import React from "react";
+import React from 'react'
 
-export default function Hero({ }) {
-  return <section className="bg-white dark:bg-gray-900">
-    <div className="grid max-w-screen-xl px-4 pt-20 pb-8 mx-auto lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12 lg:pt-28 lg:px-20">
-      <div className="mr-auto place-self-center lg:col-span-7">
-        <h1 className="max-w-2xl mb-4 text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl dark:text-white">
-          Find awesome people <br /> on Mastodon.
-        </h1>
-        <p className="max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400">
-          This tool allows you to expand your connection graph and find new people to follow. It works by
-          looking up your &quot;follows&apos; follows&quot;. <br /> <br/>
-          Your extended network is a treasure trove!
-        </p>
-        
-        <div className="space-y-4 sm:flex sm:space-y-0 sm:space-x-4 ">
-          <a href="https://github.com/gabipurcaru/followgraph" className="inline-flex items-center justify-center w-full px-5 py-3 text-sm font-medium text-center text-gray-900 border border-gray-200 rounded-lg sm:w-auto hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800">
-            <svg className="w-4 h-4 mr-2 text-gray-500 dark:fill-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">{
-              /* Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) */
-            }<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" /></svg> View on GitHub
-          </a>
+export default function Hero({}) {
+  return (
+    <section className="bg-white dark:bg-gray-900">
+      <div className="grid max-w-screen-xl px-4 pt-20 pb-8 mx-auto lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12 lg:pt-28 lg:px-20">
+        <div className="mr-auto place-self-center lg:col-span-7">
+          <h1 className="max-w-2xl mb-4 text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl dark:text-white">
+            Find awesome people <br /> on Mastodon.
+          </h1>
+          <p className="max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400">
+            This tool allows you to expand your connection graph and find new
+            people to follow. It works by looking up your &quot;follows&apos;
+            follows&quot;. <br /> <br />
+            Your extended network is a treasure trove!
+          </p>
 
-          <a href="#searchForm" className="
+          <div className="space-y-4 sm:flex sm:space-y-0 sm:space-x-4 ">
+            <a
+              href="https://github.com/gabipurcaru/followgraph"
+              className="inline-flex items-center justify-center w-full px-5 py-3 text-sm font-medium text-center text-gray-900 border border-gray-200 rounded-lg sm:w-auto hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800"
+            >
+              <svg
+                className="w-4 h-4 mr-2 text-gray-500 dark:fill-gray-300"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 496 512"
+              >
+                {/* Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) */}
+                <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
+              </svg>{' '}
+              View on GitHub
+            </a>
+
+            <a
+              href="#searchForm"
+              className="
                   inline-flex items-center justify-center w-full
                   px-5 py-3 text-sm font-medium text-center
                     text-gray-900 border
@@ -32,22 +45,30 @@ export default function Hero({ }) {
                     
                     dark:bg-green-700 dark:hover:bg-green-600
                     dark:focus:ring-gray-800
-                    dark:border-gray-700 ">
-
-            <svg className="w-4 h-4 mr-2 dark:fill-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">{/* Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}<path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352c79.5 0 144-64.5 144-144s-64.5-144-144-144S64 128.5 64 208s64.5 144 144 144z" /></svg>
-            Use now
-          </a>
+                    dark:border-gray-700 "
+            >
+              <svg
+                className="w-4 h-4 mr-2 dark:fill-gray-300"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 512 512"
+              >
+                {/* Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}
+                <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352c79.5 0 144-64.5 144-144s-64.5-144-144-144S64 128.5 64 208s64.5 144 144 144z" />
+              </svg>
+              Use now
+            </a>
+          </div>
+        </div>
+        <div className="hidden lg:mt-0 lg:col-span-5 lg:flex">
+          <Image
+            src="/hero.png"
+            alt="Picture of people at a party"
+            width={500}
+            height={500}
+            priority
+          />
         </div>
       </div>
-      <div className="hidden lg:mt-0 lg:col-span-5 lg:flex">
-        <Image
-          src="/hero.png"
-          alt="Picture of people at a party"
-          width={500}
-          height={500}
-          priority
-        />
-      </div>
-    </div>
-  </section>;
+    </section>
+  )
 }
diff --git a/package-lock.json b/package-lock.json
index 2cc8eb4..7b6e621 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "autoprefixer": "^10.4.13",
         "eslint-config-prettier": "^8.5.0",
         "postcss": "^8.4.20",
+        "prettier": "2.8.1",
         "tailwindcss": "^3.2.4"
       }
     },
@@ -3440,6 +3441,21 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.1.tgz",
+      "integrity": "sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -6608,6 +6624,12 @@
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="
     },
+    "prettier": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.1.tgz",
+      "integrity": "sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==",
+      "dev": true
+    },
     "prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
diff --git a/package.json b/package.json
index f34a1e2..a3c8f5c 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,9 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "prettier": "prettier --check . --config .prettierrc",
+    "prettier:fix": "prettier --write . --config .prettierrc"
   },
   "dependencies": {
     "@next/font": "13.0.7",
@@ -32,6 +34,7 @@
     "autoprefixer": "^10.4.13",
     "eslint-config-prettier": "^8.5.0",
     "postcss": "^8.4.20",
+    "prettier": "2.8.1",
     "tailwindcss": "^3.2.4"
   }
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 5b5861a..2cabbfa 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,10 +1,12 @@
 import '../styles/globals.css'
-import { Analytics } from '@vercel/analytics/react';
+import { Analytics } from '@vercel/analytics/react'
 import type { AppProps } from 'next/app'
 
 export default function App({ Component, pageProps }: AppProps) {
-  return (<>
-    <Component {...pageProps} />
-    <Analytics />
-  </>);
+  return (
+    <>
+      <Component {...pageProps} />
+      <Analytics />
+    </>
+  )
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index 63ed07d..02c6e3b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,8 +1,8 @@
-import { Content } from './../components/Content';
-import { FAQ } from './../components/FAQ';
-import Footer from './../components/Footer';
-import Hero from './../components/Hero';
-import Header from './../components/Header';
+import { Content } from './../components/Content'
+import { FAQ } from './../components/FAQ'
+import Footer from './../components/Footer'
+import Hero from './../components/Hero'
+import Header from './../components/Header'
 import Head from 'next/head'
 
 export default function Home() {
@@ -10,7 +10,10 @@ export default function Home() {
     <>
       <Head>
         <title>Followgraph for Mastodon</title>
-        <meta name="description" content="Find people to follow on Mastodon by expanding your follow graph." />
+        <meta
+          name="description"
+          content="Find people to follow on Mastodon by expanding your follow graph."
+        />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
diff --git a/public/googledfe269244d136c58.html b/public/googledfe269244d136c58.html
index 1c06a75..5695855 100644
--- a/public/googledfe269244d136c58.html
+++ b/public/googledfe269244d136c58.html
@@ -1 +1 @@
-google-site-verification: googledfe269244d136c58.html
\ No newline at end of file
+google-site-verification: googledfe269244d136c58.html
diff --git a/public/site.webmanifest b/public/site.webmanifest
index 45dc8a2..fa99de7 100644
--- a/public/site.webmanifest
+++ b/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/styles/globals.css b/styles/globals.css
index 3ffdd2f..c85cde9 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -2,4 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-html { scroll-behavior: smooth; }
\ No newline at end of file
+html {
+  scroll-behavior: smooth;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index f8ecd2c..6aa9dd3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    "./pages/**/*.{js,ts,jsx,tsx}",
-    "./components/**/*.{js,ts,jsx,tsx}",
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
     extend: {},