diff --git a/apps/web/components/eventtype/EventAppsTab.tsx b/apps/web/components/eventtype/EventAppsTab.tsx
index faa71884b3..b036e7bf3d 100644
--- a/apps/web/components/eventtype/EventAppsTab.tsx
+++ b/apps/web/components/eventtype/EventAppsTab.tsx
@@ -104,9 +104,9 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
         </div>
       </div>
       {!shouldLockDisableProps("apps").disabled && (
-        <div>
+        <div className="bg-muted rounded-md p-8">
           {!isLoading && notInstalledApps?.length ? (
-            <h2 className="text-emphasis my-2 text-lg font-semibold">{t("available_apps")}</h2>
+            <h2 className="text-emphasis text-lg font-semibold">{t("available_apps")}</h2>
           ) : null}
           <div className="before:border-0">
             {notInstalledApps?.map((app) => (
diff --git a/packages/app-store/_components/AppCard.tsx b/packages/app-store/_components/AppCard.tsx
index ec0b94395e..7814cee0fe 100644
--- a/packages/app-store/_components/AppCard.tsx
+++ b/packages/app-store/_components/AppCard.tsx
@@ -29,20 +29,30 @@ export default function AppCard({
   const [animationRef] = useAutoAnimate<HTMLDivElement>();
 
   return (
-    <div className={`border-subtle mb-4 mt-2 rounded-md border ${!app.enabled && "grayscale"}`}>
-      <div className="p-4 text-sm sm:p-6">
+    <div
+      className={classNames(
+        "border-subtle mb-4",
+        app.isInstalled ? "mt-2" : "mt-6",
+        "rounded-md border",
+        !app.enabled && "grayscale",
+        "bg-red-400"
+      )}>
+      <div className={classNames(app.isInstalled ? "p-4 text-sm sm:p-4" : "px-5 py-4 text-sm sm:px-5")}>
         <div className="flex w-full flex-col gap-2 sm:flex-row sm:gap-0">
           {/* Don't know why but w-[42px] isn't working, started happening when I started using next/dynamic */}
           <Link href={"/apps/" + app.slug} className="mr-3 h-auto w-10 rounded-sm">
             <img
-              className={classNames(app?.logo.includes("-dark") && "dark:invert", "w-full min-w-[40px]")}
+              className={classNames(
+                app?.logo.includes("-dark") && "dark:invert",
+                `w-full ${app.isInstalled ? "min-w-[42px]" : "min-w-[32.47px]"}`
+              )}
               src={app?.logo}
               alt={app?.name}
             />
           </Link>
           <div className="flex flex-col">
             <span className="text-emphasis text-base font-semibold leading-4">{app?.name}</span>
-            <p className="text-default mb-2 pt-2 text-sm font-normal ltr:pr-2 rtl:pl-2">
+            <p className="text-default max-w-md truncate pt-2 text-sm font-normal ltr:pr-2 rtl:pl-2">
               {description || app?.description}
             </p>
           </div>
@@ -70,7 +80,7 @@ export default function AppCard({
       </div>
       <div ref={animationRef}>
         {app?.isInstalled && switchChecked && <hr className="border-subtle" />}
-        {app?.isInstalled && switchChecked ? <div className="p-4 text-sm sm:px-8">{children}</div> : null}
+        {app?.isInstalled && switchChecked ? <div className="p-4 text-sm sm:px-4">{children}</div> : null}
       </div>
     </div>
   );
diff --git a/packages/app-store/rainbow/components/RainbowInstallForm.tsx b/packages/app-store/rainbow/components/RainbowInstallForm.tsx
index fa51f88a96..e02d0f1565 100644
--- a/packages/app-store/rainbow/components/RainbowInstallForm.tsx
+++ b/packages/app-store/rainbow/components/RainbowInstallForm.tsx
@@ -20,7 +20,7 @@ const RainbowInstallForm: React.FC<RainbowInstallFormProps> = ({
 
   return (
     <>
-      <div className="mt-4 block items-center sm:flex">
+      <div className="mt-5 block items-center sm:flex">
         <div className="min-w-48 mb-4 sm:mb-0">
           <label htmlFor="blockchainId" className="text-default flex text-sm font-medium">
             {t("Blockchain")}
@@ -36,7 +36,7 @@ const RainbowInstallForm: React.FC<RainbowInstallFormProps> = ({
           options={SUPPORTED_CHAINS_FOR_FORM || [{ value: 1, label: "Ethereum" }]}
         />
       </div>
-      <div className="block items-center sm:flex">
+      <div className="mt-5 block items-center pb-4 sm:flex">
         <div className="min-w-48 mb-4 sm:mb-0">
           <label htmlFor="smartContractAddress" className="text-default flex text-sm font-medium">
             {t("token_address")}
@@ -46,7 +46,7 @@ const RainbowInstallForm: React.FC<RainbowInstallFormProps> = ({
           <div className="relative mt-1 rounded-sm">
             <input
               type="text"
-              className="border-default block w-full rounded-sm text-sm "
+              className="border-default block w-full rounded-sm text-sm"
               placeholder={t("Example: 0x71c7656ec7ab88b098defb751b7401b5f6d8976f")}
               defaultValue={(smartContractAddress || "") as string}
               onChange={(e) => {