diff --git a/web/app/components/app/create-app-dialog/app-card/index.tsx b/web/app/components/app/create-app-dialog/app-card/index.tsx
index 15cfbd541..e203edfc8 100644
--- a/web/app/components/app/create-app-dialog/app-card/index.tsx
+++ b/web/app/components/app/create-app-dialog/app-card/index.tsx
@@ -62,19 +62,19 @@ const AppCard = ({
           {app.description}
         </div>
       </div>
-      {canCreate && (
+      {(canCreate || isTrialApp) && (
         <div className={cn('absolute bottom-0 left-0 right-0 hidden bg-gradient-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
-          <div className={cn('grid h-8 w-full grid-cols-1 items-center space-x-2', isTrialApp && 'grid-cols-2')}>
-            <Button variant="primary" onClick={() => onCreate()}>
-              <PlusIcon className="mr-1 h-4 w-4" />
-              <span className="text-xs">{t('newApp.useTemplate', { ns: 'app' })}</span>
-            </Button>
-            {isTrialApp && (
-              <Button onClick={showTryAPPPanel(app.app_id)}>
-                <RiInformation2Line className="mr-1 size-4" />
-                <span>{t('appCard.try', { ns: 'explore' })}</span>
+          <div className={cn('grid h-8 w-full grid-cols-1 items-center space-x-2', canCreate && 'grid-cols-2')}>
+            {canCreate && (
+              <Button variant="primary" onClick={() => onCreate()}>
+                <PlusIcon className="mr-1 h-4 w-4" />
+                <span className="text-xs">{t('newApp.useTemplate', { ns: 'app' })}</span>
               </Button>
             )}
+            <Button onClick={showTryAPPPanel(app.app_id)}>
+              <RiInformation2Line className="mr-1 size-4" />
+              <span>{t('appCard.try', { ns: 'explore' })}</span>
+            </Button>
           </div>
         </div>
       )}
diff --git a/web/app/components/explore/app-card/index.tsx b/web/app/components/explore/app-card/index.tsx
index 15152e069..827c5c3a2 100644
--- a/web/app/components/explore/app-card/index.tsx
+++ b/web/app/components/explore/app-card/index.tsx
@@ -74,11 +74,15 @@ const AppCard = ({
       </div>
       {isExplore && (canCreate || isTrialApp) && (
         <div className={cn('absolute bottom-0 left-0 right-0 hidden bg-gradient-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
-          <div className={cn('grid h-8 w-full grid-cols-2 space-x-2')}>
-            <Button variant="primary" className="h-7" onClick={() => onCreate()}>
-              <PlusIcon className="mr-1 h-4 w-4" />
-              <span className="text-xs">{t('appCard.addToWorkspace', { ns: 'explore' })}</span>
-            </Button>
+          <div className={cn('grid h-8 w-full grid-cols-1 space-x-2', canCreate && 'grid-cols-2')}>
+            {
+              canCreate && (
+                <Button variant="primary" className="h-7" onClick={() => onCreate()}>
+                  <PlusIcon className="mr-1 h-4 w-4" />
+                  <span className="text-xs">{t('appCard.addToWorkspace', { ns: 'explore' })}</span>
+                </Button>
+              )
+            }
             <Button className="h-7" onClick={showTryAPPPanel(app.app_id)}>
               <RiInformation2Line className="mr-1 size-4" />
               <span>{t('appCard.try', { ns: 'explore' })}</span>