diff --git a/web/app/page.tsx b/web/app/page.tsx
index c223470..0b3bcac 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -24,9 +24,5 @@ function generateUniqueIndexes(arrayLength: number, count: number): number[] {
 export default function HomePage() {
   const promptIdxs = generateUniqueIndexes(EXAMPLE_PROMPTS.length, 6);
 
-  return (
-    <div className='flex h-full items-center justify-center'>
-      <Prompt promptIdxs={promptIdxs} />
-    </div>
-  );
+  return <Prompt promptIdxs={promptIdxs} />;
 }
diff --git a/web/components/Disclaimer.tsx b/web/components/Disclaimer.tsx
index 6f5cce3..2b89920 100644
--- a/web/components/Disclaimer.tsx
+++ b/web/components/Disclaimer.tsx
@@ -10,7 +10,7 @@ const Disclaimer = () => {
       <div className='fixed bottom-16 left-1/2 transform -translate-x-1/2 max-w-screen-sm w-[calc(100%-48px)] z-10'>
         <X
           onClick={() => setShowDisclaimer(false)}
-          className='absolute top-4 right-4 text-indigo-800 hover:text-indigo-500 cursor-pointer'
+          className='absolute top-3 right-3 text-indigo-800 hover:text-indigo-500 cursor-pointer'
           size={20}
           weight='bold'
         />
@@ -18,8 +18,12 @@ const Disclaimer = () => {
           <div className='font-bold text-sm'>
             This AI agent is experimental.
           </div>
-          <div className="text-[10px]">
-            The agent is evaluating projects based on self-reported data through past Gitcoin applications and therefore cannot guarantee their accuracy at this time. The agent also cannot guarantee that each project is still in control of its address, so please double check before sending large amounts.
+          <div className='text-[10px]'>
+            The agent is evaluating projects based on self-reported data through
+            past Gitcoin applications and therefore cannot guarantee their
+            accuracy at this time. The agent also cannot guarantee that each
+            project is still in control of its address, so please double check
+            before sending large amounts.
           </div>
         </div>
       </div>
diff --git a/web/components/IntroPopUp.tsx b/web/components/IntroPopUp.tsx
new file mode 100644
index 0000000..6ca2737
--- /dev/null
+++ b/web/components/IntroPopUp.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { X } from "@phosphor-icons/react/dist/ssr";
+import { SparkleIcon } from "./Icons";
+import { Dispatch, SetStateAction } from "react";
+
+interface IntroPopupProps {
+  setShowIntro: Dispatch<SetStateAction<boolean>>;
+}
+
+const IntroPopUp = ({ setShowIntro }: IntroPopupProps) => {
+  const handleClose = () => {
+    setShowIntro(false);
+    localStorage.setItem("introClosed", "true");
+  };
+
+  return (
+    <div className='fixed bottom-16 left-1/2 transform -translate-x-1/2 max-w-screen-md w-[calc(100%-48px)] z-10'>
+      <X
+        onClick={handleClose}
+        className='absolute top-3 right-3 text-indigo-800 hover:text-indigo-500 cursor-pointer'
+        size={20}
+        weight='bold'
+      />
+      <div className='p-6 bg-indigo-25 rounded-2xl border-2 border-indigo-200 space-y-1 shadow-md shadow-primary-shadow/20'>
+        <div className='flex items-center'>
+          <SparkleIcon size={24} className='transform -translate-x-1' />
+          <div className='text-lg font-bold'>
+            Welcome to fundpublicgoods.ai!
+          </div>
+        </div>
+        <div className='text-[14px] leading-relaxed'>
+          This is a proof-of-concept to showcase the potential of AI agents to
+          assist users with complex transactions. Give it a try and let us know
+          what you think!
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default IntroPopUp;
diff --git a/web/components/Prompt.tsx b/web/components/Prompt.tsx
index 61ea4f3..f8021a1 100644
--- a/web/components/Prompt.tsx
+++ b/web/components/Prompt.tsx
@@ -9,9 +9,11 @@ import { startRun } from "@/app/actions";
 import clsx from "clsx";
 import { EXAMPLE_PROMPTS } from "@/utils/examplePrompts";
 import { toast } from "react-toastify";
+import IntroPopUp from "./IntroPopUp";
 
 export default function Prompt({ promptIdxs }: { promptIdxs: number[] }) {
   const [prompt, setPrompt] = useState<string>("");
+  const [showIntro, setShowIntro] = useState<boolean>(false);
   const [isWaiting, setIsWaiting] = useState(false);
   const { data: session } = useSession();
   const searchParams = useSearchParams();
@@ -42,8 +44,19 @@ export default function Prompt({ promptIdxs }: { promptIdxs: number[] }) {
     }
   }, [searchParams, router]);
 
+  useEffect(() => {
+    const introClosed = localStorage.getItem("introClosed");
+    if (!introClosed) {
+      setShowIntro(true);
+    }
+  }, []);
+
   return (
-    <>
+    <div
+      className={clsx(
+        "flex h-full justify-center md:items-center md:pt-0",
+        showIntro ? "items-start pt-8" : "items-center"
+      )}>
       <div className='mx-auto max-w-screen-lg'>
         <div className='w-full space-y-8 px-6 flex flex-col items-center'>
           <div className='space-y-4 flex flex-col items-center w-full'>
@@ -88,6 +101,7 @@ export default function Prompt({ promptIdxs }: { promptIdxs: number[] }) {
           </div>
         </div>
       </div>
-    </>
+      {showIntro && <IntroPopUp setShowIntro={setShowIntro} />}
+    </div>
   );
 }