diff --git a/src/components/app/list/DevtronAppListContainer.tsx b/src/components/app/list/DevtronAppListContainer.tsx
index 3d6b434c25..7de430f24b 100644
--- a/src/components/app/list/DevtronAppListContainer.tsx
+++ b/src/components/app/list/DevtronAppListContainer.tsx
@@ -27,6 +27,7 @@ import {
     PaginationEnum,
     Table,
     TableRowActionsOnHoverComponentProps,
+    TableViewWrapperProps,
     URLS as CommonURLS,
 } from '@devtron-labs/devtron-fe-common-lib'
 
@@ -73,6 +74,49 @@ const HoverComponent = ({ row: { data } }: TableRowActionsOnHoverComponentProps<
     )
 }
 
+const renderGuidedCards = () => (
+    <div className="devtron-app-guided-cards-container">
+        <h2 className="fs-24 fw-6 lh-32 m-0 pt-40 dc__align-center">Create your first application</h2>
+        <div className="devtron-app-guided-cards-wrapper">
+            <ContentCard
+                datatestid="deploy-basic-k8snode"
+                redirectTo={DEVTRON_NODE_DEPLOY_VIDEO}
+                isExternalRedirect
+                imgSrc={NodeAppThumbnail}
+                title={HELM_GUIDED_CONTENT_CARDS_TEXTS.WatchVideo.title}
+                linkText={HELM_GUIDED_CONTENT_CARDS_TEXTS.WatchVideo.linkText}
+                LinkIcon={PlayMedia}
+                linkIconClass="scb-5 mr-8"
+                linkIconPlacement={CardLinkIconPlacement.BeforeLink}
+            />
+            <ContentCard
+                datatestid="create-application"
+                redirectTo={CommonURLS.APPLICATION_MANAGEMENT_CREATE_DEVTRON_APP}
+                rootClassName="ev-5"
+                imgSrc={DeployCICD}
+                title={HELM_GUIDED_CONTENT_CARDS_TEXTS.StackManager.title}
+                linkText={HELM_GUIDED_CONTENT_CARDS_TEXTS.StackManager.createLintText}
+                LinkIcon={ArrowRight}
+                linkIconClass="scb-5"
+                linkIconPlacement={CardLinkIconPlacement.AfterLinkApart}
+            />
+        </div>
+    </div>
+)
+
+const ViewWrapper = ({
+    children,
+    noRows,
+    isSearchOrFilterApplied,
+}: TableViewWrapperProps<App | Environment, FiltersTypeEnum.URL, TableAdditionalPropsType>) => {
+    if (noRows && !isSearchOrFilterApplied) {
+        return renderGuidedCards()
+    }
+
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <>{children}</>
+}
+
 const DevtronAppList = ({
     filterConfig,
     environmentList,
@@ -106,36 +150,6 @@ const DevtronAppList = ({
         return `${URLS.APPLICATION_MANAGEMENT_APP}/${app.id}/trigger`
     }
 
-    const renderGuidedCards = () => (
-        <div className="devtron-app-guided-cards-container">
-            <h2 className="fs-24 fw-6 lh-32 m-0 pt-40 dc__align-center">Create your first application</h2>
-            <div className="devtron-app-guided-cards-wrapper">
-                <ContentCard
-                    datatestid="deploy-basic-k8snode"
-                    redirectTo={DEVTRON_NODE_DEPLOY_VIDEO}
-                    isExternalRedirect
-                    imgSrc={NodeAppThumbnail}
-                    title={HELM_GUIDED_CONTENT_CARDS_TEXTS.WatchVideo.title}
-                    linkText={HELM_GUIDED_CONTENT_CARDS_TEXTS.WatchVideo.linkText}
-                    LinkIcon={PlayMedia}
-                    linkIconClass="scb-5 mr-8"
-                    linkIconPlacement={CardLinkIconPlacement.BeforeLink}
-                />
-                <ContentCard
-                    datatestid="create-application"
-                    redirectTo={CommonURLS.APPLICATION_MANAGEMENT_CREATE_DEVTRON_APP}
-                    rootClassName="ev-5"
-                    imgSrc={DeployCICD}
-                    title={HELM_GUIDED_CONTENT_CARDS_TEXTS.StackManager.title}
-                    linkText={HELM_GUIDED_CONTENT_CARDS_TEXTS.StackManager.createLintText}
-                    LinkIcon={ArrowRight}
-                    linkIconClass="scb-5"
-                    linkIconPlacement={CardLinkIconPlacement.AfterLinkApart}
-                />
-            </div>
-        </div>
-    )
-
     const getRows = useCallback(
         async (_, signal) => {
             updateDataSyncing(true)
@@ -191,10 +205,6 @@ const DevtronAppList = ({
 
     const columns = useMemo(() => getTableColumns(isArgoInstalled), [isArgoInstalled])
 
-    if (noRows && !isSearchOrFilterApplied) {
-        return renderGuidedCards()
-    }
-
     return (
         <Table<App | Environment, FiltersTypeEnum.URL, TableAdditionalPropsType>
             id="table__devtron-app-list"
@@ -208,6 +218,8 @@ const DevtronAppList = ({
             }}
             additionalProps={{
                 filterConfig,
+                noRows,
+                isSearchOrFilterApplied,
             }}
             additionalFilterProps={{
                 initialSortKey: AppListSortableKeys.APP_NAME,
@@ -225,6 +237,7 @@ const DevtronAppList = ({
                 size: 18,
             }}
             onRowClick={onRowClick}
+            ViewWrapper={ViewWrapper}
         />
     )
 }
diff --git a/src/components/app/list/types.tsx b/src/components/app/list/types.tsx
index 13efb56bc6..8d4efd2d63 100644
--- a/src/components/app/list/types.tsx
+++ b/src/components/app/list/types.tsx
@@ -104,4 +104,7 @@ export interface GetEnvironmentsFromClusterNamespaceProps {
     namespaceList: EnvironmentListHelmResult[]
 }
 
-export interface TableAdditionalPropsType extends Pick<DevtronAppListProps, 'filterConfig'> {}
+export interface TableAdditionalPropsType extends Pick<DevtronAppListProps, 'filterConfig'> {
+    noRows: boolean
+    isSearchOrFilterApplied: boolean
+}