diff --git a/app/page.tsx b/app/page.tsx
index c0fbe34..86a7369 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -115,9 +115,9 @@ export default function Lightning() {
     <main>
       <div className="flex flex-col justify-between h-[calc(100vh-56px)]">
         <div className="py-4 md:py-10 px-0 space-y-4 lg:space-y-8 mx-auto w-full max-w-5xl">
-          <div className="container px-3 md:px-0 flex flex-col space-y-2 mt-10">
-            <div className="flex flex-row items-center justify-center">
-              <div className="w-80">
+          <div className="container px-3 md:px-0 flex flex-col mt-10">
+            <div className="flex flex-row items-center justify-center space-x-3">
+              <div className="w-80 flex flex-col justify-center items-center space-y-2">
                 <label className="text-neutral-400 ml-4 uppercase text-xs">
                   Image
                 </label>
@@ -128,7 +128,7 @@ export default function Lightning() {
                       handleOnChange(e.target?.files?.[0]);
                     }
                   }}
-                  className="font-light mx-auto rounded-l-full h-10 pr-10 truncate"
+                  className="font-light mx-auto rounded-full h-10 pr-10 truncate"
                   placeholder="Type something..."
                 />
               </div>
@@ -136,7 +136,7 @@ export default function Lightning() {
                 <label className="text-neutral-400 uppercase text-xs">
                   Compare Mode
                 </label>
-                <div className="w-fit bg-neutral-900 p-1 rounded-full -ml-10 flex items-center justify-between space-x-2">
+                <div className="w-fit bg-neutral-900 p-1 rounded-full flex items-center justify-between space-x-2">
                   <span
                     onClick={() => setMode("original")}
                     className={cn(
diff --git a/components/model-compare.tsx b/components/model-compare.tsx
index 94aec0e..6acb0da 100644
--- a/components/model-compare.tsx
+++ b/components/model-compare.tsx
@@ -1,4 +1,5 @@
 import { cn } from "@/lib/utils";
+import Image from "next/image";
 import {
   ReactCompareSlider,
   ReactCompareSliderImage,
@@ -12,8 +13,40 @@ const ModelCompare = ({
   modelTwo,
 }) => {
   return (
-    <div className="container flex flex-col space-y-6 lg:flex-row lg:space-y-0 p-3 md:px-0 pt-10 space-x-6">
+    <div className="container flex flex-col space-y-6 lg:flex-row lg:space-y-0 p-3 md:px-0 pt-7 space-x-6">
       <div className="flex-1 flex-col flex w-full items-center justify-center">
+        <div className="flex items-center justify-between w-full md:w-1/2">
+          <div className="flex items-center justify-end space-x-2 mb-1">
+            <Image
+              alt=""
+              src="https://fal.ai/fal-icon.svg"
+              width={16}
+              height={16}
+            />
+            <a
+              href="https://fal.ai/models/ccsr"
+              className="text-indigo-400 font-medium text-sm"
+              target="_blank"
+            >
+              fal-ai/ccsr
+            </a>
+          </div>
+          <div className="flex items-center justify-end space-x-2 mb-1">
+            <Image
+              alt=""
+              src="https://fal.ai/fal-icon.svg"
+              width={16}
+              height={16}
+            />
+            <a
+              href="https://fal.ai/models/supir"
+              className="text-indigo-400 font-medium text-sm"
+              target="_blank"
+            >
+              fal-ai/supir
+            </a>
+          </div>
+        </div>
         {originalImage ? (
           <div className="md:min-h-[512px] w-full md:w-1/2 bg-neutral-900 flex">
             <ReactCompareSlider
@@ -69,7 +102,16 @@ const ModelCompare = ({
             />
           </div>
         ) : (
-          <div className="w-full md:w-1/2 bg-neutral-900 h-96 md:h-[512px] flex items-center justify-center" />
+          <div className="w-full md:w-1/2 bg-neutral-900 h-96 md:h-[512px] flex items-center justify-center">
+            <Image
+              width={150}
+              height={150}
+              src="https://fal.ai/fal-icon.svg"
+              className="transition-all object-cover mb-6 data-[loading=true]:animate-pulse data-[loading=false]:grayscale data-[loading=false]:opacity-30"
+              alt="fal.ai icon used as image placeholder and loading indicator"
+              data-loading="false"
+            />
+          </div>
         )}
       </div>
     </div>
diff --git a/components/nav.tsx b/components/nav.tsx
index 2e2783c..b564fc3 100644
--- a/components/nav.tsx
+++ b/components/nav.tsx
@@ -18,9 +18,9 @@ export function Nav() {
       <div className="flex flex-1 items-center">
         <Link href="/">
           <h1 className={cn("font-light text-xl", spaceMono.className)}>
-            <span className="text-pink-700">sdxl</span>
-            <span>⚡️</span>
-            <span>lightning</span>
+            <span className="text-pink-700">upscaler</span>
+            <span>⚖️</span>
+            <span>comparator</span>
           </h1>
         </Link>
       </div>
diff --git a/components/original-compare.tsx b/components/original-compare.tsx
index 3562226..4545f39 100644
--- a/components/original-compare.tsx
+++ b/components/original-compare.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import {
   ReactCompareSlider,
   ReactCompareSliderImage,
@@ -11,8 +12,23 @@ const OriginalCompare = ({
   modelTwo,
 }) => {
   return (
-    <div className="container flex flex-col space-y-6 lg:flex-row lg:space-y-0 p-3 md:px-0 pt-10 lg:space-x-6">
+    <div className="container flex flex-col space-y-6 lg:flex-row lg:space-y-0 p-3 md:px-0 pt-7 lg:space-x-6">
       <div className="flex-1">
+        <div className="flex items-center space-x-2 mb-1">
+          <Image
+            alt=""
+            src="https://fal.ai/fal-icon.svg"
+            width={16}
+            height={16}
+          />
+          <a
+            href="https://fal.ai/models/ccsr"
+            className="text-indigo-400 font-medium text-sm"
+            target="_blank"
+          >
+            fal-ai/ccsr
+          </a>
+        </div>
         {originalImage ? (
           <div className="md:min-h-[512px] w-full flex items-center just">
             <ReactCompareSlider
@@ -60,11 +76,35 @@ const OriginalCompare = ({
             )} */}
           </div>
         ) : (
-          <div className="w-full bg-neutral-900 h-96 md:h-[512px] flex items-center justify-center" />
+          <div className="w-full bg-neutral-900 h-96 md:h-[512px] flex items-center justify-center">
+            <Image
+              width={150}
+              height={150}
+              src="https://fal.ai/fal-icon.svg"
+              className="transition-all object-cover mb-6 data-[loading=true]:animate-pulse data-[loading=false]:grayscale data-[loading=false]:opacity-30"
+              alt="fal.ai icon used as image placeholder and loading indicator"
+              data-loading="false"
+            />
+          </div>
         )}
       </div>
 
       <div className="flex-1">
+        <div className="flex items-center justify-end space-x-2 mb-1">
+          <Image
+            alt=""
+            src="https://fal.ai/fal-icon.svg"
+            width={16}
+            height={16}
+          />
+          <a
+            href="https://fal.ai/models/supir"
+            className="text-indigo-400 font-medium text-sm"
+            target="_blank"
+          >
+            fal-ai/supir
+          </a>
+        </div>
         {originalImage ? (
           <div className="md:min-h-[512px] w-full flex items-center justify-center">
             <ReactCompareSlider
@@ -85,7 +125,13 @@ const OriginalCompare = ({
               }
               itemTwo={
                 <>
+                  <ReactCompareSliderImage
+                    src={modelTwo?.image as string}
+                    srcSet={modelTwo?.image as string}
+                    alt="Image one"
+                  />
                   <div className="absolute space-x-2 top-[50%] right-4 bg-black/50 text-xs py-1 rounded-full px-2">
+                    <span>SUPIR</span>
                     {modelTwo && (
                       <span
                         className={
@@ -97,19 +143,22 @@ const OriginalCompare = ({
                           : `n/a`}
                       </span>
                     )}
-                    <span>SUPIR</span>
                   </div>
-                  <ReactCompareSliderImage
-                    src={modelTwo?.image as string}
-                    srcSet={modelTwo?.image as string}
-                    alt="Image one"
-                  />
                 </>
               }
             />
           </div>
         ) : (
-          <div className="w-full bg-neutral-900 h-96 md:h-[512px] flex items-center justify-center" />
+          <div className="w-full bg-neutral-900 h-96 md:h-[512px] flex items-center justify-center">
+            <Image
+              width={150}
+              height={150}
+              src="https://fal.ai/fal-icon.svg"
+              className="transition-all object-cover mb-6 data-[loading=true]:animate-pulse data-[loading=false]:grayscale data-[loading=false]:opacity-30"
+              alt="fal.ai icon used as image placeholder and loading indicator"
+              data-loading="false"
+            />
+          </div>
         )}
       </div>
     </div>