diff --git a/pages/onedrive-vercel-index-oauth/step-1.tsx b/pages/onedrive-vercel-index-oauth/step-1.tsx
index 08a1f39..831097e 100644
--- a/pages/onedrive-vercel-index-oauth/step-1.tsx
+++ b/pages/onedrive-vercel-index-oauth/step-1.tsx
@@ -1,4 +1,5 @@
 import Head from 'next/head'
+import Image from 'next/image'
 import { useRouter } from 'next/router'
 
 import siteConfig from '../../config/site.json'
@@ -8,7 +9,6 @@ import Footer from '../../components/Footer'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 export default function OAuthStep1() {
-  const redis_url = process.env.REDIS_URL
   const router = useRouter()
 
   return (
@@ -22,30 +22,37 @@ export default function OAuthStep1() {
 
         <div className="w-full max-w-5xl p-4 mx-auto">
           <div className="dark:bg-gray-900 dark:text-gray-100 bg-white rounded p-3">
-            <h3 className="font-medium text-xl mb-4">Welcome to your new onedrive-vercel-index 🎉</h3>
+            <div className="mx-auto w-52">
+              <Image src="/images/fabulous-fireworks.png" width={912} height={912} alt="fabulous fireworks" />
+            </div>
+            <h3 className="font-medium text-xl mb-4 text-center">Welcome to your new onedrive-vercel-index 🎉</h3>
+
+            <h3 className="font-medium text-lg mt-4 mb-2">Step 1/3: Preparations</h3>
+
+            <p className="py-1 text-yellow-400 font-medium text-sm">
+              <FontAwesomeIcon icon="exclamation-triangle" className="mr-1" /> If you have not specified a REDIS_URL
+              inside your Vercel env variable, go initialise one at{' '}
+              <a href="https://upstash.com/" target="_blank" rel="noopener noreferrer" className="underline">
+                Upstash
+              </a>
+              . Docs:{' '}
+              <a
+                href="https://docs.upstash.com/redis/howto/vercelintegration"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline"
+              >
+                Vercel Integration - Upstash
+              </a>
+              .
+            </p>
 
             <p className="py-1">
               Authorisation is required as no valid{' '}
               <code className="text-sm font-mono underline decoration-wavy decoration-pink-600">access_token</code> or{' '}
               <code className="text-sm font-mono underline decoration-wavy decoration-green-600">refresh_token</code> is
-              present on this deployed instance.
-            </p>
-
-            <h3 className="font-medium text-lg mt-4 mb-2">Step 1/3: Preparations</h3>
-
-            <p className="py-1">
-              Check the following configurations (especially <code className="text-sm font-mono">client_id</code> and{' '}
-              <code className="text-sm font-mono">client_secret</code> (obfuscated)) and see if they match the official
-              ones specified in the documentation of{' '}
-              <a
-                href="https://github.com/spencerwooo/onedrive-vercel-index"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="hover:underline text-blue-600 dark:text-blue-500"
-              >
-                onedrive-vercel-index
-              </a>{' '}
-              before proceeding with authorising this application with your own Microsoft account.
+              present on this deployed instance. Check the following configurations before proceeding with authorising
+              onedrive-vercel-index with your own Microsoft account.
             </p>
 
             <div className="overflow-hidden my-4">
@@ -103,15 +110,11 @@ export default function OAuthStep1() {
               </table>
             </div>
 
-            <p className="py-1">
+            <p className="py-1 font-medium text-sm">
               <FontAwesomeIcon icon="exclamation-triangle" className="mr-1 text-yellow-400" /> If you see anything
-              missing or incorrect, you need to reconfigure <code className="text-sm font-mono">/config/api.json</code>{' '}
+              missing or incorrect, you need to reconfigure <code className="text-xs font-mono">/config/api.json</code>{' '}
               and redeploy this instance.
             </p>
-            <p className="py-1">
-              <FontAwesomeIcon icon="exclamation-triangle" className="mr-1 text-yellow-400" />️ If you are previewing
-              this locally, you would need to reauthorise yourself when you eventually deploy the site on Vercel.
-            </p>
 
             <div className="text-right mb-2 mt-6">
               <button
diff --git a/pages/onedrive-vercel-index-oauth/step-2.tsx b/pages/onedrive-vercel-index-oauth/step-2.tsx
index 270c09c..752f2dc 100644
--- a/pages/onedrive-vercel-index-oauth/step-2.tsx
+++ b/pages/onedrive-vercel-index-oauth/step-2.tsx
@@ -1,6 +1,7 @@
 import Head from 'next/head'
+import Image from 'next/image'
 import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 import siteConfig from '../../config/site.json'
@@ -29,17 +30,23 @@ export default function OAuthStep2() {
 
         <div className="w-full max-w-5xl p-4 mx-auto">
           <div className="dark:bg-gray-900 dark:text-gray-100 bg-white rounded p-3">
-            <h3 className="font-medium text-xl mb-4">Welcome to your new onedrive-vercel-index 🎉</h3>
-
-            <p className="py-1">
-              Authorisation is required as no valid{' '}
-              <code className="text-sm font-mono underline decoration-wavy decoration-pink-600">access_token</code> or{' '}
-              <code className="text-sm font-mono underline decoration-wavy decoration-green-600">refresh_token</code> is
-              present on this deployed instance.
-            </p>
+            <div className="mx-auto w-52">
+              <Image
+                src="/images/fabulous-come-back-later.png"
+                width={912}
+                height={912}
+                alt="fabulous come back later"
+              />
+            </div>
+            <h3 className="font-medium text-xl mb-4 text-center">Welcome to your new onedrive-vercel-index 🎉</h3>
 
             <h3 className="font-medium text-lg mt-4 mb-2">Step 2/3: Get authorisation code</h3>
-            <p className="py-1">The OAuth URL has been generated for you:</p>
+
+            <p className="py-1 text-red-400 font-medium text-sm">
+              <FontAwesomeIcon icon="exclamation-circle" className="mr-1" /> If you are not the owner of this website,
+              stop now, as continuing with this process may expose your personal files in OneDrive.
+            </p>
+
             <div
               className="relative my-2 font-mono border border-gray-500/50 rounded text-sm bg-gray-50 dark:bg-gray-800 cursor-pointer hover:opacity-80"
               onClick={() => {
@@ -53,13 +60,19 @@ export default function OAuthStep2() {
                 <code>{oAuthUrl}</code>
               </pre>
             </div>
+
             <p className="py-1">
-              Click on the link to get the{' '}
+              The OAuth link for getting the authorisation code has been created. Click on the link above to get the{' '}
               <b className="underline decoration-wavy decoration-yellow-400">authorisation code</b>. Your browser will
-              open a new tab to Microsoft&apos;s account login page. Authenticate with your Microsoft account and copy
-              the redirected URL down below.
+              open a new tab to Microsoft&apos;s account login page. After logging in and authenticating with your
+              Microsoft account, you will be redirected to a blank page on localhost. Paste{' '}
+              <b className="underline decoration-wavy decoration-teal-500">the entire redirected URL</b> down below.
             </p>
 
+            <div className="my-4 rounded overflow-hidden w-2/3 mx-auto">
+              <Image src="/images/step-2-screenshot.png" width={1466} height={607} alt="step 2 screenshot" />
+            </div>
+
             <input
               className={`w-full flex-1 border bg-gray-50 dark:bg-gray-800 dark:text-white focus:ring focus:outline-none p-2 font-mono rounded my-2 font-medium text-sm ${
                 authCode
diff --git a/pages/onedrive-vercel-index-oauth/step-3.tsx b/pages/onedrive-vercel-index-oauth/step-3.tsx
index e4bf08e..c3ec88e 100644
--- a/pages/onedrive-vercel-index-oauth/step-3.tsx
+++ b/pages/onedrive-vercel-index-oauth/step-3.tsx
@@ -1,5 +1,6 @@
 import axios from 'axios'
 import Head from 'next/head'
+import Image from 'next/image'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -13,6 +14,17 @@ import { LoadingIcon } from '../../components/Loading'
 
 export default function OAuthStep3({ accessToken, expiryTime, refreshToken, error, description, errorUri }) {
   const router = useRouter()
+  const [expiryTimeLeft, setExpiryTimeLeft] = useState(expiryTime)
+
+  useEffect(() => {
+    if (!expiryTimeLeft) return
+
+    const intervalId = setInterval(() => {
+      setExpiryTimeLeft(expiryTimeLeft - 1)
+    }, 1000)
+
+    return () => clearInterval(intervalId)
+  }, [expiryTimeLeft])
 
   const [buttonContent, setButtonContent] = useState(
     <>
@@ -72,14 +84,10 @@ export default function OAuthStep3({ accessToken, expiryTime, refreshToken, erro
 
         <div className="w-full max-w-5xl p-4 mx-auto">
           <div className="dark:bg-gray-900 dark:text-gray-100 bg-white rounded p-3">
-            <h3 className="font-medium text-xl mb-4">Welcome to your new onedrive-vercel-index 🎉</h3>
-
-            <p className="py-1">
-              Authorisation is required as no valid{' '}
-              <code className="text-sm font-mono underline decoration-wavy decoration-pink-600">access_token</code> or{' '}
-              <code className="text-sm font-mono underline decoration-wavy decoration-green-600">refresh_token</code> is
-              present on this deployed instance.
-            </p>
+            <div className="mx-auto w-52">
+              <Image src="/images/fabulous-celebration.png" width={912} height={912} alt="fabulous celebration" />
+            </div>
+            <h3 className="font-medium text-xl mb-4 text-center">Welcome to your new onedrive-vercel-index 🎉</h3>
 
             <h3 className="font-medium text-lg mt-4 mb-2">Step 3/3: Get access and refresh tokens</h3>
             {error ? (
@@ -118,14 +126,14 @@ export default function OAuthStep3({ accessToken, expiryTime, refreshToken, erro
               </div>
             ) : (
               <div>
-                <p className="py-1 font-medium">Success, the API returned what we needed.</p>
+                <p className="py-1 font-medium">Success! The API returned what we needed.</p>
                 <ol className="py-1">
                   {accessToken && (
                     <li>
                       <FontAwesomeIcon icon={['far', 'check-circle']} className="text-green-500" />{' '}
                       <span>
                         Acquired access_token:{' '}
-                        <code className="text-sm font-mono opacity-80">{`${accessToken.substring(0, 30)}...`}</code>.
+                        <code className="text-sm font-mono opacity-80">{`${accessToken.substring(0, 60)}...`}</code>
                       </span>
                     </li>
                   )}
@@ -134,21 +142,27 @@ export default function OAuthStep3({ accessToken, expiryTime, refreshToken, erro
                       <FontAwesomeIcon icon={['far', 'check-circle']} className="text-green-500" />{' '}
                       <span>
                         Acquired refresh_token:{' '}
-                        <code className="text-sm font-mono opacity-80">{`${refreshToken.substring(0, 50)}...`}</code>.
+                        <code className="text-sm font-mono opacity-80">{`${refreshToken.substring(0, 60)}...`}</code>
                       </span>
                     </li>
                   )}
                 </ol>
 
+                <p className="py-1 font-medium text-sm text-teal-500">
+                  <FontAwesomeIcon icon="exclamation-circle" className="mr-1" /> These tokens may take a few seconds to
+                  populate after you click the button below. If you go back home and still see the welcome page telling
+                  you to re-authenticate, revisit home and do a hard refresh.
+                </p>
                 <p className="py-1">
-                  Click the button below to save these tokens securely on Vercel before they expire. These tokens may
-                  take a few seconds to populate, if you go back home and still see the welcome page telling you to
-                  re-authenticate, go back home and do a hard refresh.
+                  Final step, click the button below to store these tokens persistently before they expire after{' '}
+                  {Math.floor(expiryTimeLeft / 60)} minutes {expiryTimeLeft - Math.floor(expiryTimeLeft / 60) * 60}{' '}
+                  seconds. Don&apos;t worry, after storing them, onedrive-vercel-index will take care of token refreshes
+                  and updates after your site goes live.
                 </p>
 
                 <div className="text-right mb-2 mt-6">
                   <button
-                    className="text-white bg-gradient-to-br from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-bl focus:ring-4 focus:ring-teal-200 dark:focus:ring-teal-800 font-medium rounded-lg text-sm px-4 py-2.5 text-center disabled:cursor-not-allowed disabled:grayscale"
+                    className="text-white bg-gradient-to-br from-green-500 to-teal-300 hover:bg-gradient-to-bl focus:ring-4 focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm px-4 py-2.5 text-center disabled:cursor-not-allowed disabled:grayscale"
                     onClick={sendAuthTokensToServer}
                   >
                     {buttonContent}
diff --git a/public/images/fabulous-celebration.png b/public/images/fabulous-celebration.png
new file mode 100644
index 0000000..a3e0f39
Binary files /dev/null and b/public/images/fabulous-celebration.png differ
diff --git a/public/images/fabulous-come-back-later.png b/public/images/fabulous-come-back-later.png
new file mode 100644
index 0000000..726bb9d
Binary files /dev/null and b/public/images/fabulous-come-back-later.png differ
diff --git a/public/images/fabulous-fireworks.png b/public/images/fabulous-fireworks.png
new file mode 100644
index 0000000..8ab46e4
Binary files /dev/null and b/public/images/fabulous-fireworks.png differ
diff --git a/public/images/step-2-screenshot.png b/public/images/step-2-screenshot.png
new file mode 100644
index 0000000..7037417
Binary files /dev/null and b/public/images/step-2-screenshot.png differ