diff --git a/components/cards/AgentCard.tsx b/components/cards/AgentCard.tsx
index 252ff43..ee30b96 100644
--- a/components/cards/AgentCard.tsx
+++ b/components/cards/AgentCard.tsx
@@ -20,7 +20,8 @@ export const AgentCard = ({
   community,
   author,
   project,
-  members,
+  onAddToHome,
+  isOnHome,
   tags,
   shortIntro
 }: any) => {    
@@ -43,6 +44,19 @@ export const AgentCard = ({
           </div>
     }
 
+    const ActionsSection = () => {
+      return <div className={`w-full flex flex-row justify-center mt-4 mb-4`}>
+                  <button
+                      onClick={onAddToHome}
+                      className={`${readexPro.className} text-nowrap text-sm md:text-md shrink-0 hover:opacity-80 border-cyan font-medium border px-2 py-2 shadow-early-access-button shrink-0 flex flex-row items-center text-white`}>
+                            <DynamicIcon name={isOnHome() ? 'PlayIcon' : 'SquaresPlusIcon'} width={24} height={24} className='text-primary mr-3'/>
+                          { isOnHome() ? `Open App` : `Add to Home` }
+                  </button>
+            </div>
+    }
+
+
+    
     const CardAuthor = () => {
       if (!author) {
         if (community) {
@@ -74,6 +88,7 @@ export const AgentCard = ({
             <div className={`${highlight ? '' : 'hidden'} badge badge-success badge-xs animate-pulse text-[#8BC34A] mr-2`}/>
             { title }
           </h4>         
+          <ActionsSection/>
         </div>
         <div className='flex flex-col w-full items-start lg:mt-0 mt-2'>
           <div onClick={onPress} className="flex flex-col p-4 border bg-black/50  lg:ml-4 border-primary/20 min-h-screen leading-normal text-center w-full">
diff --git a/components/cards/HomeItemCard.tsx b/components/cards/HomeItemCard.tsx
index 08c14e9..39f1e5b 100644
--- a/components/cards/HomeItemCard.tsx
+++ b/components/cards/HomeItemCard.tsx
@@ -1,7 +1,7 @@
 import { ProfileHeaderPlaceholder } from '~/components/placeholders/ProfileHeader'
 import { readexPro } from '~/elements/fonts'
 import { BannerImage, CompositeImage, Engagements, DynamicIcon, SimpleAvatar, Community, Animation, Author, People, Tags, LargeAvatar } from '~/elements';
-import { getImageUrl } from '~/utils/main';
+import { getImageUrl, getCompositeImageUrl } from '~/utils/main';
 import Image from 'next/image';
 
 const MAX_TITLE = 80
@@ -11,6 +11,7 @@ export const HomeItemCard = ({
   onPress, 
   isLoading, 
   title, 
+  team,
   banner, 
   avatar,
   username,
@@ -82,7 +83,7 @@ export const HomeItemCard = ({
   }
   
   return <div onClick={onPress} className={`cursor-pointer flex flex-col justify-start`}>
-              <LargeAvatar src={getImageUrl(username)}/>
+             <LargeAvatar src={team ? getCompositeImageUrl(team.collection, team.owner) : getImageUrl(username)}/> 
               <div className={`${readexPro.className} mt-1 text-sm text-center`}>
                   { title }
               </div>
diff --git a/next.config.mjs b/next.config.mjs
index 4fff9a0..c9a0ceb 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -16,6 +16,18 @@ const  nextConfig = {
       {
         source: "/app/:id([a-z0-9_-]+)/:path*",
         destination: "https://carmel-app-:id.vercel.app/app/:id/:path*"
+      },
+      {
+        source: "/agent/:id([a-z0-9_-]+)/",
+        destination: "https://carmel-agent-main.vercel.app/agent/main/:id/"
+      },
+      {
+        source: "/agent/:id([a-z0-9_-]+)",
+        destination: "https://carmel-agent-main.vercel.app/agent/main/:id"
+      },
+      {
+        source: "/agent/:id([a-z0-9_-]+)/:path*",
+        destination: "https://carmel-agent-main.vercel.app/agent/main/:id/:path*"
       }
    ]
   },
diff --git a/screens/AgentScreen.tsx b/screens/AgentScreen.tsx
index 23a3285..df721e8 100644
--- a/screens/AgentScreen.tsx
+++ b/screens/AgentScreen.tsx
@@ -33,40 +33,40 @@ export const AgentScreen = ({ auth }: any) => {
       setOutput({ url })
     }, [])
 
-    const handleSubmit = async (e: any) => {
-      e.preventDefault();
+    // const handleSubmit = async (e: any) => {
+    //   e.preventDefault();
   
-      const formData = new FormData(e.target)
-      const params = Object.fromEntries(formData.entries())
-      const agent = getAgent()
+    //   const formData = new FormData(e.target)
+    //   const params = Object.fromEntries(formData.entries())
+    //   const agent = getAgent()
       
-      if (!agent) {
-        return 
-      }
+    //   if (!agent) {
+    //     return 
+    //   }
 
-      const { result } = await auth.agentAction("run", { params, name: agent.name.toLowerCase() })
+    //   const { result } = await auth.agentAction("run", { params, name: agent.name.toLowerCase() })
 
-      if (result.error) {
-        return 
-      }
+    //   if (result.error) {
+    //     return 
+    //   }
 
-      if (!result.id) {
-        return 
-      }
+    //   if (!result.id) {
+    //     return 
+    //   }
 
-      setSessionId(result.id)
-      setOutput({ url: `${process.env.NEXT_PUBLIC_GATEWAY_URL}/carmel/genres/${result.privId}/output.md` })
-      setPrivId(result.privId)
-      setStarted(true)
-    }
+    //   setSessionId(result.id)
+    //   setOutput({ url: `${process.env.NEXT_PUBLIC_GATEWAY_URL}/carmel/genres/${result.privId}/output.md` })
+    //   setPrivId(result.privId)
+    //   setStarted(true)
+    // }
 
-    const progress = () => {
-      if (!sessionId || !carmel.data.agentsessions) {
-        return 
-      }
+    // const progress = () => {
+    //   if (!sessionId || !carmel.data.agentsessions) {
+    //     return 
+    //   }
 
-      return carmel.data.agentsessions.find((sess: any) => sess.id === sessionId)
-    }
+    //   return carmel.data.agentsessions.find((sess: any) => sess.id === sessionId)
+    // }
 
     const getAgent = () => {
       if (carmel.isLoading || !carmel.data || !carmel.data.agents) return
@@ -75,136 +75,170 @@ export const AgentScreen = ({ auth }: any) => {
       return item
     }
 
-    const AgentField = (field: any) => {
-          return <div className="flex flex-col flex-col">
-            <div className={`${readexPro.className} font-thin text-start text-sm leading-6 text-grey mb-2 mt-8`}>
-              { field.title }:
-            </div>
-            <div className="flex flex-col relative mb-8">
-                <input
-                  name={field.id}
-                  type={field.format}
-                  required
-                  placeholder={field.placeholder}
-                  className={`${
-                    readexPro.className
-                  } font-thin lowercase focus:border-none focus:ring-[0.7px] focus:ring-[#00FFFF] placeholder:text-cyan/50 placeholder:font-light focus:placeholder:text-transparent w-full h-10 px-4 bg-[#022A27] text-sm text-white border border-primary/20 ${
-                    'border-cyan/20'
-                  } border-solid border-1`}
-                  style={{
-                    WebkitAppearance: 'none',
-                    margin: 0,
-                    MozAppearance: 'textfield',
-                  }}
-                />
-              </div>
-          </div>
-    }
-
-    const AgentFields = () => {
-      const agent = getAgent() 
+    // const AgentField = (field: any) => {
+    //       return <div className="flex flex-col flex-col">
+    //         <div className={`${readexPro.className} font-thin text-start text-sm leading-6 text-grey mb-2 mt-8`}>
+    //           { field.title }:
+    //         </div>
+    //         <div className="flex flex-col relative mb-8">
+    //             <input
+    //               name={field.id}
+    //               type={field.format}
+    //               required
+    //               placeholder={field.placeholder}
+    //               className={`${
+    //                 readexPro.className
+    //               } font-thin lowercase focus:border-none focus:ring-[0.7px] focus:ring-[#00FFFF] placeholder:text-cyan/50 placeholder:font-light focus:placeholder:text-transparent w-full h-10 px-4 bg-[#022A27] text-sm text-white border border-primary/20 ${
+    //                 'border-cyan/20'
+    //               } border-solid border-1`}
+    //               style={{
+    //                 WebkitAppearance: 'none',
+    //                 margin: 0,
+    //                 MozAppearance: 'textfield',
+    //               }}
+    //             />
+    //           </div>
+    //       </div>
+    // }
+
+    // const AgentFields = () => {
+    //   const agent = getAgent() 
       
-      if (!agent) {
-        return <div/>
-      }
+    //   if (!agent) {
+    //     return <div/>
+    //   }
       
-      return agent.params.map((field: any, i: number) => <AgentField key={`field_${i}`} {...field}/>)
-    }
+    //   return agent.params.map((field: any, i: number) => <AgentField key={`field_${i}`} {...field}/>)
+    // }
+
+    // const StartForm = ({ agent }: any) => {
+    //   return <form method='post' onSubmit={handleSubmit} className='w-full flex flex-col items-center mt-8'>
+    //          <div className='lg:max-w-[480px] border border-primary/20 bg-primary/10 p-4 w-full'>
+    //          <div className='lg:text-xl text-lg mt-4 font-bold text-left text-primary'> 
+    //             { agent.headline }
+    //           </div>
+    //           <AgentFields/>
+    //           <div className={`${readexPro.className} flex text-white text-md text-center w-full mt-8 flex-row items-center justify-center`}>
+    //                 <button type="submit" className={`${readexPro.className} text-nowrap text-sm md:text-md shrink-0 hover:opacity-80 border-cyan font-medium border text-white px-2 flex flex-row py-2 shadow-early-access-button shrink-0`}>
+    //                     <DynamicIcon name="PlayIcon" width={20} height={20} className='mr-1'/> { agent.action }
+    //                 </button>
+    //               </div>
+    //               <div className={`${readexPro.className} flex text-white text-sm mt-2 text-center w-full flex-row items-center justify-center`}>
+    //                   requires <span className='text-primary px-1 text-sm font-bold mt-1'>5</span> credits
+    //               </div>
+    //           </div>
+    //       </form>
+    // }
+
+    // const ProgressStatus = ({ agent }: any) => {
+    //   const updatedProgress = progress()
+
+    //   if (!updatedProgress) {
+    //     return <div/>
+    //   }
+
+    //   const { steps, stepId, duration, complete } = updatedProgress.progress
+
+    //   if (complete) {
+    //     return <div className='w-full flex flex-col items-center mb-4'>
+    //         <div className='lg:text-xl text-lg mt-4 font-bold text-left text-primary'> 
+    //             Complete            
+    //         </div>
+    //         <div className='text-md mt-2 font-bold text-left text-white'> 
+    //             <Animation id="success"/>
+    //         </div>
+    //       </div>
+    //   }
+
+    //   const step = steps[stepId]
+
+    //   return <div className='w-full flex flex-col items-center mb-4'>
+    //     <div className='lg:text-xl text-lg mt-4 font-bold text-left text-primary'> 
+    //         Step {stepId + 1} of { steps.length }
+    //     </div>
+    //     <div className='text-md mt-2 font-bold text-left text-white'> 
+    //        { step.message }
+    //     </div>
+    //   </div>
+    // }
+
+    // const onCopyLink = () => {
+    //   showSuccessToast("Copied to clipboard")
+    // }
+
+    // const Results = () => {
+    //   const agent = getAgent()
+
+    //   return <div className='w-full flex flex-col items-center mt-8 lg:mt-12'>
+    //       <div className='lg:max-w-[640px] border border-primary/20 bg-primary/10 p-4 w-full'>
+    //           <MarkdownViewer {...output}/>
+    //       </div>
+    //       <CopyToClipboard text={`${process.env['NEXT_PUBLIC_SITE_URL']}/agents/${agent.name.toLowerCase()}/${privId}`}>          
+    //         <button onClick={onCopyLink} className={`${readexPro.className} text-nowrap text-sm md:text-md mt-8 mb-8 shrink-0 hover:opacity-80 border-cyan font-medium border text-white px-2 flex flex-row py-2 shadow-early-access-button shrink-0`}>
+    //               <DynamicIcon name="BookmarkIcon" width={20} height={20} className='mr-1'/> Copy permant link
+    //         </button>
+    //       </CopyToClipboard>
+    // </div>
+    // }
+
+    // const ProgressPanel = ({ agent }: any) => {
+    //   if (isComplete) {
+    //     return <Results/>
+    //   }
+
+    //   const updatedProgress = progress()
+
+    //   if (!updatedProgress) {
+    //     return <div/>
+    //   }
+
+    //   const { complete } = updatedProgress.progress
+
+    //   if (complete) {
+    //     return <Results/>
+    //   }
+
+    //   return <div className='w-full flex flex-col items-center mt-8'>
+    //             <div className='lg:max-w-[480px] border border-primary/20 bg-primary/10 p-4 w-full mb-8'>
+    //                 <ProgressStatus agent={agent}/>
+    //                 <Animation id="server" loop/>
+    //             </div>
+    //     </div>
+    // }
+
+    const isOnHome = () => {
+      const agent = getAgent() 
 
-    const StartForm = ({ agent }: any) => {
-      return <form method='post' onSubmit={handleSubmit} className='w-full flex flex-col items-center mt-8'>
-             <div className='lg:max-w-[480px] border border-primary/20 bg-primary/10 p-4 w-full'>
-             <div className='lg:text-xl text-lg mt-4 font-bold text-left text-primary'> 
-                { agent.headline }
-              </div>
-              <AgentFields/>
-              <div className={`${readexPro.className} flex text-white text-md text-center w-full mt-8 flex-row items-center justify-center`}>
-                    <button type="submit" className={`${readexPro.className} text-nowrap text-sm md:text-md shrink-0 hover:opacity-80 border-cyan font-medium border text-white px-2 flex flex-row py-2 shadow-early-access-button shrink-0`}>
-                        <DynamicIcon name="PlayIcon" width={20} height={20} className='mr-1'/> { agent.action }
-                    </button>
-                  </div>
-                  <div className={`${readexPro.className} flex text-white text-sm mt-2 text-center w-full flex-row items-center justify-center`}>
-                      requires <span className='text-primary px-1 text-sm font-bold mt-1'>5</span> credits
-                  </div>
-              </div>
-          </form>
+      return (auth.isLoggedIn && 
+             auth.profile.home && 
+             auth.profile.home[agent.username])
     }
 
-    const ProgressStatus = ({ agent }: any) => {
-      const updatedProgress = progress()
-
-      if (!updatedProgress) {
-        return <div/>
+    const onAddToHome = async () => {
+      if (!auth.isLoggedIn()) {
+        router.push("/register")
+        return
       }
 
-      const { steps, stepId, duration, complete } = updatedProgress.progress
+      const agent = getAgent() 
 
-      if (complete) {
-        return <div className='w-full flex flex-col items-center mb-4'>
-            <div className='lg:text-xl text-lg mt-4 font-bold text-left text-primary'> 
-                Complete            
-            </div>
-            <div className='text-md mt-2 font-bold text-left text-white'> 
-                <Animation id="success"/>
-            </div>
-          </div>
+      if (isOnHome()) {
+        router.push(`/agent/${agent.username}`)
+        return 
       }
 
-      const step = steps[stepId]
+      const result = await auth.accountAction("addtohome", {
+        details: {
+          ...agent,
+          type: "agent"          
+        }
+      })
 
-      return <div className='w-full flex flex-col items-center mb-4'>
-        <div className='lg:text-xl text-lg mt-4 font-bold text-left text-primary'> 
-            Step {stepId + 1} of { steps.length }
-        </div>
-        <div className='text-md mt-2 font-bold text-left text-white'> 
-           { step.message }
-        </div>
-      </div>
-    }
-
-    const onCopyLink = () => {
-      showSuccessToast("Copied to clipboard")
-    }
+      await auth.getFreshProfile()
 
-    const Results = () => {
-      const agent = getAgent()
-
-      return <div className='w-full flex flex-col items-center mt-8 lg:mt-12'>
-          <div className='lg:max-w-[640px] border border-primary/20 bg-primary/10 p-4 w-full'>
-              <MarkdownViewer {...output}/>
-          </div>
-          <CopyToClipboard text={`${process.env['NEXT_PUBLIC_SITE_URL']}/agents/${agent.name.toLowerCase()}/${privId}`}>          
-            <button onClick={onCopyLink} className={`${readexPro.className} text-nowrap text-sm md:text-md mt-8 mb-8 shrink-0 hover:opacity-80 border-cyan font-medium border text-white px-2 flex flex-row py-2 shadow-early-access-button shrink-0`}>
-                  <DynamicIcon name="BookmarkIcon" width={20} height={20} className='mr-1'/> Copy permant link
-            </button>
-          </CopyToClipboard>
-    </div>
+      router.push('/')
     }
 
-    const ProgressPanel = ({ agent }: any) => {
-      if (isComplete) {
-        return <Results/>
-      }
-
-      const updatedProgress = progress()
-
-      if (!updatedProgress) {
-        return <div/>
-      }
-
-      const { complete } = updatedProgress.progress
-
-      if (complete) {
-        return <Results/>
-      }
-
-      return <div className='w-full flex flex-col items-center mt-8'>
-                <div className='lg:max-w-[480px] border border-primary/20 bg-primary/10 p-4 w-full mb-8'>
-                    <ProgressStatus agent={agent}/>
-                    <Animation id="server" loop/>
-                </div>
-        </div>
-    }
 
     const AgentOutput = () => {
       const agent = getAgent() 
@@ -221,7 +255,7 @@ export const AgentScreen = ({ auth }: any) => {
           <div className='lg:mt-8 mt-4 lg:text-lg text-lg text-left font-thin'> 
               { agent.summary }
           </div>
-          { started ? <ProgressPanel agent={agent}/> : <StartForm agent={agent}/> }
+          {/* { started ? <ProgressPanel agent={agent}/> : <StartForm agent={agent}/> } */}
       </div>
     }
 
@@ -237,7 +271,7 @@ export const AgentScreen = ({ auth }: any) => {
 
     return <div className='w-full flex flex-col items-center lg:mt-0 mt-20 mb-20 p-4'>
       <div className='flex lg:flex-row flex-col w-full'>
-         <AgentCard {...getAgent()} noAction wide isLoading={carmel.isLoading}>
+         <AgentCard {...getAgent()} isOnHome={isOnHome} onAddToHome={onAddToHome} noAction wide isLoading={carmel.isLoading}>
             <AgentPanel/>
          </AgentCard>
       </div>
diff --git a/screens/home/MainHomeScreen.tsx b/screens/home/MainHomeScreen.tsx
index cacc979..47d3934 100644
--- a/screens/home/MainHomeScreen.tsx
+++ b/screens/home/MainHomeScreen.tsx
@@ -12,6 +12,24 @@ import { ListScreen } from '../ListScreen'
 import { Title, DynamicIcon, InfiniteScrollComponent, readexPro } from '~/elements';
 import { useRouter } from 'next/router'
 
+const Header = () => {
+    return <div className={`${readexPro.className} text-left flex flex-row mb-4 border-b border-primary/20 w-full lg:mt-0 mt-20`}>
+      <span className='font-normal text-transparent bg-clip-text bg-gradient-to-r from-cyan to-light-green text-2xl flex flex-row items-center w-full'>
+        <DynamicIcon name={'HomeIcon'} width={28} height={28} className="text-primary mr-2 -mt-1" />
+          { 'Home' }
+      </span>
+
+      <div className='w-full text-end p-2'>
+        <Link href={'/store'} key={'reg1'}>
+          <button
+            className={`${readexPro.className} text-nowrap text-sm md:text-md shrink-0 hover:opacity-80 border-cyan font-medium border text-white px-2 py-3 shadow-early-access-button shrink-0`}>
+                { 'Browse Store' }
+          </button>
+        </Link>
+       </div>
+    </div>
+  }
+
 export const Container = ({ children }: any) => {
     return (
       <div className="bg-dark-indigo w-full flex justify-center m-auto lg:mt-20 -mt-24 lg:mt-4 w-full">
@@ -19,11 +37,14 @@ export const Container = ({ children }: any) => {
         <Image src={wire1} alt="wire1" className="hidden sm:block z-0 top-[40%] absolute" />
         <Image src={wire2} alt="wire2" className="hidden sm:block z-0 top-[40%] absolute" />
 
-         <div className='w-full px-4 py-4 lg:px-12 lg:mt-3 mt-20 lg:mb-3 flex flex-col'>
-              <div className="flex flex-col justify-start items-center w-full">
-                { children }
+        <div className="w-full mb-10 flex justify-center relative z-30 mt-24 lg:mt-0">
+         <div className="flex flex-col justify-start items-center pb-32 min-h-full px-4 w-full">
+         <Header/>
+         <div className="flex flex-col justify-start items-center w-full">
+              { children }
               </div>
           </div>
+          </div>
       </div>
   )
 }
@@ -48,24 +69,28 @@ const EmptyHome = () => {
 }
 
 const onItemPress = (element: any, router: any) => {
-    router.push(`/app/${element.username}`)
+    router.push(`/${element.type === "agent" ? 'agent/main' : 'app'}/${element.username}`)
 }
 
 const HomeList = ({ home }: any) => {
     const items = Object.values(home)
     const router = useRouter()
 
-    return <div className='w-full mb-20 min-h-screen'>
-        <InfiniteScrollComponent
-          containerClasses={`justify-center gap-4 mt-24 lg:mt-4 grid grid-cols-3 lg:grid-cols-4 p-2`} 
-          renderItem={items.map((element: any, elementId: any) => <HomeItemCard 
-            {...element} 
-            onPress={() => onItemPress(element, router) }
-            />)}
-          elementsNumber={3}
-          loader={<ListPlaceholder />}
-    />
-    </div>
+    return <Container>
+            <div className="w-full flex flex-col justify-start items-center pb-80 bg-black/0 z-50">
+                <div className='w-full mb-20 min-h-screen'>
+                    <InfiniteScrollComponent
+                    containerClasses={`justify-center gap-4 grid grid-cols-3 lg:grid-cols-4 p-2`} 
+                    renderItem={items.map((element: any, elementId: any) => <HomeItemCard 
+                        {...element} 
+                        onPress={() => onItemPress(element, router) }
+                        />)}
+                    elementsNumber={3}
+                    loader={<ListPlaceholder />}
+                />
+                </div>
+            </div>
+    </Container>
 }
 
 export const MainHomeScreen = (props: any) => {