diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index 6ce69b48d1..17930b6f0f 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -22,6 +22,7 @@ import {
 } from '@/models/app'
 import { useImportDSL } from '@/hooks/use-import-dsl'
 import DSLConfirmModal from '@/app/components/app/create-from-dsl-modal/dsl-confirm-modal'
+import Banner from '../banner'
 
 type AppsProps = {
   onSuccess?: () => void
@@ -143,6 +144,9 @@ const Apps = ({
     <div className={cn(
       'flex h-full flex-col border-l-[0.5px] border-divider-regular',
     )}>
+      <div className='mt-4 px-12'>
+        <Banner />
+      </div>
       <div className={cn(
         'mt-6 flex items-center justify-between px-12',
       )}>
diff --git a/web/app/components/explore/banner.tsx b/web/app/components/explore/banner.tsx
new file mode 100644
index 0000000000..b33347f513
--- /dev/null
+++ b/web/app/components/explore/banner.tsx
@@ -0,0 +1,12 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+
+const Banner: FC = () => {
+  return (
+    <div className='h-[184px] rounded-2xl bg-components-panel-on-panel-item-bg shadow-md'>
+      Banner placeholder
+    </div>
+  )
+}
+export default React.memo(Banner)