diff --git a/apps/webapp/app/components/templates/ExampleOverview.tsx b/apps/webapp/app/components/templates/ExampleOverview.tsx
index 4a700cc55..ebfc37434 100644
--- a/apps/webapp/app/components/templates/ExampleOverview.tsx
+++ b/apps/webapp/app/components/templates/ExampleOverview.tsx
@@ -37,45 +37,48 @@ export function ExampleOverview({
           show={isOpen}
           as={Fragment}
         >
-          <div className="fixed inset-0 overflow-y-auto">
-            <div className="flex min-h-full items-center justify-center p-4">
-              <StyledDialog.Panel className="mx-auto flex max-w-3xl items-start gap-2 overflow-hidden">
-                <div className="flex h-full w-full flex-col overflow-hidden rounded-md bg-slate-800 text-left">
-                  <div className="flex flex-col items-center justify-between gap-4 border-b border-slate-850/80 bg-slate-700/30 px-4 py-12">
+          <StyledDialog.Panel className="top-0 mx-auto flex max-h-[90vh] max-w-5xl flex-row items-start gap-2 overflow-hidden overflow-y-auto rounded-md p-4">
+            <div className="h-full max-h-[80vh] w-full flex-col overflow-scroll rounded-md bg-slate-800 text-left">
+              <div className="flex flex-row gap-y-4 p-6">
+                <div className="flex flex-col">
+                  <CodeBlock
+                    code={openProject.code(environment.apiKey)}
+                    align="top"
+                    maxHeight="700px"
+                    className="flex overflow-scroll w-[650px]"
+                  />
+                </div>
+                <div className="flex w-80 flex-col gap-y-4 pl-4">
+                  <div className="flex flex-col items-start justify-start gap-y-4 border-b border-slate-850/80 bg-slate-700/30 px-4 py-4">
                     {openProject.icon}
                     <Header2 size="regular" className="font-semibold">
                       {openProject.name}
                     </Header2>
                   </div>
-                  <div className="p-6">
-                    <Header2 size="regular" className="font-semibold">
-                      {openProject.title}
-                    </Header2>
-                    <Body>{openProject.description}</Body>
-                    <CodeBlock
-                      code={openProject.code(environment.apiKey)}
-                      align="top"
-                    />
-                    <PrimaryButton
-                      className="mt-2 w-full"
-                      onClick={() => {
-                        setOpenProject(null);
-                        onSelectedProject(openProject);
-                      }}
-                    >
-                      Use this example
-                    </PrimaryButton>
-                  </div>
+                  <Header2 size="regular" className="font-semibold">
+                    {openProject.title}
+                  </Header2>
+                  <Body>{openProject.description}</Body>
+
+                  <PrimaryButton
+                    className="mt-2 w-full"
+                    onClick={() => {
+                      setOpenProject(null);
+                      onSelectedProject(openProject);
+                    }}
+                  >
+                    Use this example
+                  </PrimaryButton>
                 </div>
-                <button
-                  onClick={() => setOpenProject(null)}
-                  className="sticky top-0 text-slate-600 transition hover:text-slate-500"
-                >
-                  <XCircleIcon className="h-10 w-10" />
-                </button>
-              </StyledDialog.Panel>
+              </div>
             </div>
-          </div>
+            <button
+              onClick={() => setOpenProject(null)}
+              className="sticky top-0 text-slate-600 transition hover:text-slate-500"
+            >
+              <XCircleIcon className="h-10 w-10" />
+            </button>
+          </StyledDialog.Panel>
         </StyledDialog.Dialog>
       )}
       <>
