diff --git a/src/app/(loading-group)/[organizationSlug]/page.tsx b/src/app/(loading-group)/[organizationSlug]/page.tsx
index d9d6d7d6..226bf488 100644
--- a/src/app/(loading-group)/[organizationSlug]/page.tsx
+++ b/src/app/(loading-group)/[organizationSlug]/page.tsx
@@ -17,18 +17,21 @@
 
 import { Button } from "@/components/ui/button";
 import { useRouter, useSearchParams } from "next/navigation";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { FunctionComponent } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import Page from "../../../components/Page";
 
 import { useActiveOrg } from "../../../hooks/useActiveOrg";
 import { browserApiClient } from "../../../services/devGuardApi";
+import type {
+  Paged,
+  ProjectDTO,
+  SubGroupsAndAsset,
+} from "../../../types/api/api";
 import { UserRole } from "../../../types/api/api";
-import type { Paged, ProjectDTO } from "../../../types/api/api";
 import type { CreateProjectReq } from "../../../types/api/req";
 
-import ListItem from "@/components/common/ListItem";
 import Section from "@/components/common/Section";
 import {
   Dialog,
@@ -38,31 +41,28 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Form } from "@/components/ui/form";
 import { useOrganizationMenu } from "@/hooks/useOrganizationMenu";
 import { toast } from "sonner";
 
 import CustomPagination from "@/components/common/CustomPagination";
 import { ProjectForm } from "@/components/project/ProjectForm";
+import Sort from "@/components/Sort";
+import SubgroupsAndAssetsList, {
+  checkType,
+} from "@/components/SubgroupsAndAssetsList";
 import { Input } from "@/components/ui/input";
-import { useCurrentUserRole } from "@/hooks/useUserRole";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useUpdateOrganization } from "@/context/OrganizationContext";
 import { useSession } from "@/context/SessionContext";
+import { useCurrentUserRole } from "@/hooks/useUserRole";
+import { buildFilterSearchParams } from "@/utils/url";
 import { debounce } from "lodash";
 import { Loader2 } from "lucide-react";
-import Link from "next/link";
 import useSWR from "swr";
-import Avatar from "../../../components/Avatar";
+import EmptyParty from "../../../components/common/EmptyParty";
 import ListRenderer from "../../../components/common/ListRenderer";
-import Markdown from "../../../components/common/Markdown";
-import { ProjectBadge } from "../../../components/common/ProjectTitle";
 import { fetcher } from "../../../data-fetcher/fetcher";
-import EmptyParty from "../../../components/common/EmptyParty";
 import useRouterQuery from "../../../hooks/useRouterQuery";
-import { useUpdateOrganization } from "@/context/OrganizationContext";
-import { Badge } from "@/components/ui/badge";
-import { buildFilterSearchParams } from "@/utils/url";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import Sort from "@/components/Sort";
 
 const OrganizationHomePage: FunctionComponent = () => {
   const [viewedProject, setViewedProject] = useState<"all" | "inactive">("all");
@@ -81,6 +81,9 @@ const OrganizationHomePage: FunctionComponent = () => {
     mode: "onBlur",
   });
 
+  const searchQuery = searchParams?.get("search") ?? "";
+  const isSearchActive = searchQuery.length >= 3;
+
   const queryWithState = useMemo(() => {
     const p = buildFilterSearchParams(searchParams);
     const state = searchParams?.get("state");
@@ -95,30 +98,38 @@ const OrganizationHomePage: FunctionComponent = () => {
 
   const stillOnPage = useRef(true);
   const pushQuery = useRouterQuery();
+
+  const swrUrl = isSearchActive
+    ? `/organizations/${decodeURIComponent(activeOrg.slug)}/projects/search?${queryWithState.toString()}`
+    : `/organizations/${decodeURIComponent(activeOrg.slug)}/projects/?${queryWithState.toString()}`;
+
   const {
     isLoading,
     data: projects,
     error,
     mutate,
-  } = useSWR<Paged<ProjectDTO>>(
-    activeOrg
-      ? `/organizations/${decodeURIComponent(activeOrg.slug)}/projects/?${queryWithState.toString()}`
-      : null,
-    async (url: string) =>
-      fetcher<Paged<ProjectDTO>>(url).then((res) => {
-        return res;
-      }),
-  );
+  } = useSWR<Paged<SubGroupsAndAsset>>(swrUrl, async (url: string) => {
+    const data = await fetcher<Paged<ProjectDTO>>(url);
+    // we need to transform the data to add the resourceType field to each item, so that we can distinguish between projects and assets in the SubgroupsAndAssetsList component
+    return {
+      ...data,
+      data: data.data.map((item) => ({
+        ...item,
+        resourceType: "project",
+      })),
+    } as Paged<SubGroupsAndAsset>;
+  });
 
   const debouncedHandleSearch = useCallback(
     debounce((e: React.ChangeEvent<HTMLInputElement>) => {
-      if (e.target.value === "") {
-        pushQuery({ search: undefined, page: "1" });
-      } else if (e.target.value.length >= 3) {
-        pushQuery({ search: e.target.value, page: "1" });
+      const value = e.target.value;
+      if (value === "") {
+        pushQuery({ search: undefined, page: 1 });
+      } else if (value.length >= 3) {
+        pushQuery({ search: value, page: 1 });
       }
     }, 500),
-    [],
+    [pushQuery],
   );
 
   const handleSetTabValue = (value: string) => {
@@ -172,6 +183,61 @@ const OrganizationHomePage: FunctionComponent = () => {
     mutate();
   };
 
+  const handleLazyDataFetching = useCallback(
+    async (projectSlug: string, projectId: string) => {
+      const base = `/organizations/${decodeURIComponent(activeOrg.slug)}/projects/${decodeURIComponent(projectSlug)}/resources?parentId=${projectId}`;
+
+      const resp = await browserApiClient(base);
+      if (resp.ok) {
+        const data = await resp.json();
+        const subGroupsAndAsset = data as Paged<SubGroupsAndAsset>;
+
+        mutate(
+          (prev) => {
+            if (!prev) return prev;
+            // traverse the whole tree, find the correct project and update it with the new data
+            const recursiveFn = (
+              item: SubGroupsAndAsset,
+            ): SubGroupsAndAsset => {
+              const { asset, subgroup } = checkType(item);
+              if (asset != null) {
+                return asset;
+              }
+
+              if (subgroup.id === projectId) {
+                return {
+                  ...subgroup,
+                  subGroupsAndAsset: subGroupsAndAsset.data,
+                };
+              }
+
+              return {
+                ...subgroup,
+                subGroupsAndAsset:
+                  subgroup?.subGroupsAndAsset?.map(recursiveFn),
+              };
+            };
+
+            return {
+              ...prev,
+              data: prev.data.map(recursiveFn) as Array<
+                ProjectDTO & {
+                  resourceType: "project";
+                }
+              >,
+            };
+          },
+          { revalidate: false },
+        );
+      } else {
+        toast.error(
+          "Failed to load subgroups and assets. Please try again later.",
+        );
+      }
+    },
+    [activeOrg.slug, mutate],
+  );
+
   useEffect(() => {
     // trigger a sync on page load - if the org has an external entity provider
     if (activeOrg.externalEntityProviderId) {
@@ -269,17 +335,24 @@ const OrganizationHomePage: FunctionComponent = () => {
           forceVertical
           title="Groups"
         >
-          <Tabs
-            defaultValue="all"
-            value={viewedProject}
-            onValueChange={handleSetTabValue}
-          >
-            <TabsList>
-              <TabsTrigger value="all">Groups</TabsTrigger>
-              <TabsTrigger value="inactive">Inactive</TabsTrigger>
-            </TabsList>
-          </Tabs>
-
+          <div className="flex items-center gap-4">
+            <Tabs
+              defaultValue="all"
+              value={viewedProject}
+              onValueChange={handleSetTabValue}
+              className={`${isSearchActive ? "pointer-events-none disabled" : ""}`}
+            >
+              <TabsList>
+                <TabsTrigger value="all">Groups</TabsTrigger>
+                <TabsTrigger value="inactive">Inactive</TabsTrigger>
+              </TabsList>
+            </Tabs>
+            {isSearchActive && (
+              <span className="text-xs text-yellow-600 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-950 border border-yellow-200 dark:border-yellow-800 rounded px-2 py-1">
+                Filter and sorting options are disabled while searching
+              </span>
+            )}
+          </div>
           <div className="flex gap-2">
             <Sort
               sortOptions={[
@@ -293,55 +366,36 @@ const OrganizationHomePage: FunctionComponent = () => {
               className="h-11"
               onChange={debouncedHandleSearch}
               defaultValue={searchParams?.get("search") || ""}
-              placeholder="Search for projects"
+              placeholder="Search for projects (min. 3 characters)..."
             />
           </div>
-          <ListRenderer
-            isLoading={isLoading}
-            error={error}
-            data={projects?.data}
-            Empty={<EmptyParty title={"No groups found"} description="" />}
-            renderItem={(project) => (
-              <Link
-                key={project.id}
-                href={`/${activeOrg.slug}/projects/${project.slug}`}
-                className="flex flex-col gap-2 hover:no-underline"
-              >
-                <ListItem
-                  reactOnHover
-                  Title={
-                    <div className="flex flex-row items-center gap-2">
-                      <Avatar {...project} />
-                      <span>{project.name}</span>
-                      {project.state === "deleted" && (
-                        <Badge variant={"destructive"}>Pending deletion</Badge>
-                      )}
+          <div id="group-and-project-list">
+            <ListRenderer
+              isLoading={isLoading}
+              error={error}
+              data={projects?.data}
+              Empty={<EmptyParty title={"No groups found"} description="" />}
+              renderItem={(project) => {
+                return (
+                  <div key={project.id} className="flex flex-col">
+                    <div className="flex flex-col gap-2">
+                      <SubgroupsAndAssetsList
+                        project={
+                          project as ProjectDTO & { resourceType: "project" }
+                        }
+                        onFetchData={handleLazyDataFetching}
+                        subgroupsWithAssets={
+                          (project as ProjectDTO & { resourceType: "project" })
+                            .subGroupsAndAsset
+                        }
+                        projectSlug={project.slug}
+                      />
                     </div>
-                  }
-                  Description={
-                    <div className="flex flex-col">
-                      <span>
-                        <Markdown
-                          components={{
-                            a: (props: React.ComponentPropsWithoutRef<"a">) => (
-                              <span>{props.children}</span>
-                            ),
-                          }}
-                        >
-                          {project.description}
-                        </Markdown>
-                      </span>
-                      {project.type !== "default" && (
-                        <div className="flex mt-4 flex-row items-center gap-2">
-                          <ProjectBadge type={project.type} />
-                        </div>
-                      )}
-                    </div>
-                  }
-                />
-              </Link>
-            )}
-          />
+                  </div>
+                );
+              }}
+            />
+          </div>
         </Section>
         {projects && (
           <div className="mt-4">
diff --git a/src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/page.tsx b/src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/page.tsx
index ca5983f0..f713ade1 100644
--- a/src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/page.tsx
+++ b/src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/page.tsx
@@ -1,25 +1,23 @@
 "use client";
 
-import Image from "next/image";
-import Link from "next/link";
+import CustomPagination from "@/components/common/CustomPagination";
+import { Input } from "@/components/ui/input";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import useRouterQuery from "@/hooks/useRouterQuery";
+import { buildFilterSearchParams } from "@/utils/url";
+import { debounce } from "lodash";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useMemo, useState } from "react";
-import { Form, FormProvider, useForm } from "react-hook-form";
-import Markdown from "react-markdown";
+import { FormProvider, useForm } from "react-hook-form";
 import { toast } from "sonner";
 import useSWR from "swr";
 import AssetForm, {
   type AssetFormValues,
 } from "../../../../../components/asset/AssetForm";
-import AssetOverviewListItem from "../../../../../components/AssetOverviewListItem";
-import Avatar from "../../../../../components/Avatar";
-import EmptyParty from "../../../../../components/common/EmptyParty";
-import ListItem from "../../../../../components/common/ListItem";
 import ProjectTitle from "../../../../../components/common/ProjectTitle";
 import Section from "../../../../../components/common/Section";
 import Page from "../../../../../components/Page";
 import { ProjectForm } from "../../../../../components/project/ProjectForm";
-import { Badge } from "../../../../../components/ui/badge";
 import { Button } from "../../../../../components/ui/button";
 import {
   Dialog,
@@ -34,44 +32,25 @@ import {
   useOrganization,
 } from "../../../../../context/OrganizationContext";
 import { useProject } from "../../../../../context/ProjectContext";
-import { useActiveOrg } from "../../../../../hooks/useActiveOrg";
+import { useSession } from "../../../../../context/SessionContext";
 import { fetcher } from "../../../../../data-fetcher/fetcher";
+import { useActiveOrg } from "../../../../../hooks/useActiveOrg";
 import { useProjectMenu } from "../../../../../hooks/useProjectMenu";
 import { useCurrentUserRole } from "../../../../../hooks/useUserRole";
-import { useSession } from "../../../../../context/SessionContext";
 import { browserApiClient } from "../../../../../services/devGuardApi";
-import { RequirementsLevel, UserRole } from "../../../../../types/api/api";
 import type {
   AssetDTO,
   EnvDTO,
   Paged,
   ProjectDTO,
+  SubGroupsAndAsset,
 } from "../../../../../types/api/api";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Input } from "@/components/ui/input";
-import { debounce } from "lodash";
-import useRouterQuery from "@/hooks/useRouterQuery";
-import { buildFilterSearchParams } from "@/utils/url";
-import CustomPagination from "@/components/common/CustomPagination";
-import ListRenderer from "@/components/common/ListRenderer";
+import { RequirementsLevel, UserRole } from "../../../../../types/api/api";
 
 import Sort from "@/components/Sort";
-
-function isProject(d: AssetDTO | ProjectDTO): d is ProjectDTO {
-  return "type" in d && (d as ProjectDTO).type === "project";
-}
-
-function checkType(data: SubGroupsAndAsset): {
-  asset: AssetDTO | null;
-  subgroup: ProjectDTO | null;
-} {
-  return isProject(data)
-    ? { asset: null, subgroup: data }
-    : { asset: data, subgroup: null };
-}
-
-type SubGroupsAndAsset = AssetDTO | ProjectDTO;
-type SubGroupsAndAssets = Array<SubGroupsAndAsset>;
+import SubgroupsAndAssetsList, {
+  checkType,
+} from "@/components/SubgroupsAndAssetsList";
 
 export default function RepositoriesPage() {
   const [viewedProject, setViewedProject] = useState<"active" | "inactive">(
@@ -83,6 +62,9 @@ export default function RepositoriesPage() {
   const [showModal, setShowModal] = useState(false);
   const searchParams = useSearchParams();
 
+  const searchQuery = searchParams?.get("search") ?? "";
+  const isSearchActive = searchQuery.length >= 3;
+
   const queryWithState = useMemo(() => {
     const p = buildFilterSearchParams(searchParams);
     const state = searchParams?.get("state");
@@ -95,18 +77,35 @@ export default function RepositoriesPage() {
     return p;
   }, [searchParams]);
 
-  const {
-    isLoading,
-    data: subgroupsWithAssets,
-    error,
-  } = useSWR<Paged<SubGroupsAndAsset>>(() => {
+  const pushQuery = useRouterQuery();
+
+  const swrUrl = (() => {
     if (!isOrganization(organization.organization)) return null;
-    const base = `/organizations/${decodeURIComponent(organization.organization.slug)}/projects/${decodeURIComponent(project.slug)}/resources?parentId=${project?.id}`;
+    const orgSlug = decodeURIComponent(organization.organization.slug);
+    if (isSearchActive) {
+      return `/organizations/${orgSlug}/projects/search?parentId=${project?.id}&${queryWithState.toString()}`;
+    }
+    const base = `/organizations/${orgSlug}/projects/${decodeURIComponent(project.slug)}/resources?parentId=${project?.id}`;
     const query = queryWithState.toString();
     return query ? `${base}&${query}` : base;
-  }, fetcher);
+  })();
 
-  const pushQuery = useRouterQuery();
+  const {
+    data: subgroupsWithAssets,
+    error,
+    mutate,
+  } = useSWR<Paged<SubGroupsAndAsset>>(swrUrl, async (url: string) => {
+    if (isSearchActive) {
+      const raw = (await fetcher(url)) as Paged<
+        ProjectDTO & { subGroupsAndAsset: SubGroupsAndAsset[] | null }
+      >;
+      return {
+        ...raw,
+        data: raw.data.flatMap((item) => item.subGroupsAndAsset ?? []),
+      };
+    }
+    return fetcher<Paged<SubGroupsAndAsset>>(url);
+  });
 
   const router = useRouter();
   const activeOrg = useActiveOrg();
@@ -134,13 +133,14 @@ export default function RepositoriesPage() {
 
   const debouncedHandleSearch = useCallback(
     debounce((e: React.ChangeEvent<HTMLInputElement>) => {
-      if (e.target.value === "") {
-        pushQuery({ search: undefined, page: "1" });
-      } else if (e.target.value.length >= 3) {
-        pushQuery({ search: e.target.value, page: "1" });
+      const value = e.target.value;
+      if (value === "") {
+        pushQuery({ search: undefined, page: 1 });
+      } else if (value.length >= 3) {
+        pushQuery({ search: value, page: 1 });
       }
     }, 500),
-    [],
+    [pushQuery],
   );
 
   const handleSetTabValue = (value: string) => {
@@ -203,6 +203,57 @@ export default function RepositoriesPage() {
     }
   };
 
+  const handleLazyDataFetching = useCallback(
+    async (projectSlug: string, projectId: string) => {
+      const base = `/organizations/${decodeURIComponent(activeOrg.slug)}/projects/${decodeURIComponent(projectSlug)}/resources?parentId=${projectId}`;
+
+      const resp = await browserApiClient(base);
+      if (resp.ok) {
+        const data = await resp.json();
+        const subGroupsAndAsset = data as Paged<SubGroupsAndAsset>;
+
+        mutate(
+          (prev) => {
+            if (!prev) return prev;
+            // traverse the whole tree, find the correct project and update it with the new data
+            const recursiveFn = (
+              item: SubGroupsAndAsset,
+            ): SubGroupsAndAsset => {
+              const { asset, subgroup } = checkType(item);
+              if (asset != null) {
+                return asset;
+              }
+
+              if (subgroup.id === projectId) {
+                return {
+                  ...subgroup,
+                  subGroupsAndAsset: subGroupsAndAsset.data,
+                };
+              }
+
+              return {
+                ...subgroup,
+                subGroupsAndAsset:
+                  subgroup?.subGroupsAndAsset?.map(recursiveFn),
+              };
+            };
+
+            return {
+              ...prev,
+              data: prev.data.map(recursiveFn) as SubGroupsAndAsset[],
+            };
+          },
+          { revalidate: false },
+        );
+      } else {
+        toast.error(
+          "Failed to load subgroups and assets. Please try again later.",
+        );
+      }
+    },
+    [activeOrg.slug, mutate],
+  );
+
   return (
     <>
       <Page
@@ -245,21 +296,28 @@ export default function RepositoriesPage() {
           forceVertical
           title={project.name}
         >
-          <Tabs
-            defaultValue="active"
-            value={viewedProject}
-            onValueChange={handleSetTabValue}
-          >
-            <TabsList>
-              <TabsTrigger value="active">
-                {project.externalEntityProviderId
-                  ? "Repositories"
-                  : "Subgroups & Repositories"}
-              </TabsTrigger>
-              <TabsTrigger value="inactive">Inactive</TabsTrigger>
-            </TabsList>
-          </Tabs>
-
+          <div className="flex items-center gap-4">
+            <Tabs
+              defaultValue="active"
+              value={viewedProject}
+              onValueChange={handleSetTabValue}
+              className={`${isSearchActive ? "pointer-events-none disabled" : ""}`}
+            >
+              <TabsList>
+                <TabsTrigger value="active">
+                  {project.externalEntityProviderId
+                    ? "Repositories"
+                    : "Subgroups & Repositories"}
+                </TabsTrigger>
+                <TabsTrigger value="inactive">Inactive</TabsTrigger>
+              </TabsList>
+            </Tabs>
+            {isSearchActive && (
+              <span className="text-xs text-yellow-600 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-950 border border-yellow-200 dark:border-yellow-800 rounded px-2 py-1">
+                Filter and sorting options are disabled while searching
+              </span>
+            )}
+          </div>
           <div className="flex gap-2">
             <Sort
               sortOptions={[
@@ -273,68 +331,14 @@ export default function RepositoriesPage() {
               className="h-11"
               onChange={debouncedHandleSearch}
               defaultValue={searchParams?.get("search") || ""}
-              placeholder="Search for projects and repositories..."
+              placeholder="Search for projects and repositories (min. 3 characters)..."
             />
           </div>
-          <ListRenderer
-            isLoading={isLoading}
+          <SubgroupsAndAssetsList
             error={error}
-            data={subgroupsWithAssets?.data}
-            Empty={<EmptyParty title={"No groups found"} description="" />}
-            renderItem={(item) => {
-              const { asset, subgroup } = checkType(item);
-              if (subgroup)
-                return (
-                  <Link
-                    key={subgroup.id}
-                    href={`/${activeOrg.slug}/projects/${subgroup.slug}`}
-                    className="flex flex-col gap-2 hover:no-underline"
-                  >
-                    <ListItem
-                      reactOnHover
-                      Title={
-                        <div className="flex items-center flex-row gap-2">
-                          <Avatar {...subgroup} />
-                          <span>
-                            {subgroup.name.replace(project.name + " /", "")}
-                          </span>
-                          <Badge variant={"outline"}>Subgroup</Badge>
-                          {subgroup.state === "deleted" && (
-                            <Badge variant={"destructive"}>
-                              Pending deletion
-                            </Badge>
-                          )}
-                          {subgroup.type === "kubernetesNamespace" && (
-                            <Badge variant={"outline"}>
-                              <Image
-                                alt="Kubernetes logo"
-                                src="/assets/kubernetes.svg"
-                                className="-ml-1.5 mr-2"
-                                width={16}
-                                height={16}
-                              />
-                              Kubernetes Namespace
-                            </Badge>
-                          )}
-                        </div>
-                      }
-                      Description={
-                        <Markdown
-                          components={{
-                            a: (props: React.ComponentPropsWithoutRef<"a">) => (
-                              <span>{props.children}</span>
-                            ),
-                          }}
-                        >
-                          {subgroup.description}
-                        </Markdown>
-                      }
-                    />
-                  </Link>
-                );
-              if (asset)
-                return <AssetOverviewListItem key={asset.id} asset={asset} />;
-            }}
+            subgroupsWithAssets={subgroupsWithAssets?.data}
+            projectSlug={project.slug}
+            onFetchData={handleLazyDataFetching}
           />
 
           <div className="mt-4">
diff --git a/src/components/AssetOverviewListItem.tsx b/src/components/AssetOverviewListItem.tsx
deleted file mode 100644
index 8c3674d8..00000000
--- a/src/components/AssetOverviewListItem.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import Link from "next/link";
-import React, { type FunctionComponent, useMemo } from "react";
-import { useActiveOrg } from "../hooks/useActiveOrg";
-import { useActiveProject } from "../hooks/useActiveProject";
-import type { AssetDTO, PolicyEvaluation } from "../types/api/api";
-import Avatar from "./Avatar";
-import ListItem from "./common/ListItem";
-import Markdown from "./common/Markdown";
-import { Badge } from "./ui/badge";
-
-interface Props {
-  asset: AssetDTO;
-}
-const AssetOverviewListItem: FunctionComponent<Props> = ({ asset }) => {
-  const activeOrg = useActiveOrg();
-  const project = useActiveProject();
-
-  return (
-    <Link
-      key={asset.id}
-      href={`/${activeOrg.slug}/projects/${project.slug}/assets/${asset.slug}/`}
-    >
-      <ListItem
-        reactOnHover
-        Description={
-          <div className="flex flex-col">
-            <span>
-              <Markdown
-                components={{
-                  a: (props: React.ComponentPropsWithoutRef<"a">) => (
-                    <span>{props.children}</span>
-                  ),
-                }}
-              >
-                {asset.description}
-              </Markdown>
-            </span>
-          </div>
-        }
-        Title={
-          <div className="flex flex-row items-center gap-2">
-            <Avatar avatar={asset.avatar} name={asset.name} />
-            {asset.name}
-            {asset.state === "archived" && (
-              <Badge variant={"outline"}>Archived</Badge>
-            )}
-            {asset.state === "deleted" && (
-              <Badge variant={"destructive"}>Pending deletion</Badge>
-            )}
-          </div>
-        }
-      />
-    </Link>
-  );
-};
-
-export default AssetOverviewListItem;
diff --git a/src/components/SubgroupsAndAssetsList.tsx b/src/components/SubgroupsAndAssetsList.tsx
new file mode 100644
index 00000000..4be341f7
--- /dev/null
+++ b/src/components/SubgroupsAndAssetsList.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import type { ProjectDTO, SubGroupsAndAsset } from "../types/api/api";
+import NestedList from "./group-list/NestedList";
+import ProjectRow from "./group-list/ProjectRow";
+
+export { isProject, checkType } from "./group-list/utils";
+
+interface Props {
+  project?: ProjectDTO;
+  subgroupsWithAssets?: SubGroupsAndAsset[];
+  onFetchData: (projectSlug: string, projectId: string) => any;
+  error?: Error;
+  projectSlug: string;
+}
+
+export default function SubgroupsAndAssetsList({
+  project,
+  subgroupsWithAssets,
+  onFetchData,
+  error,
+  projectSlug,
+}: Props) {
+  if (project) {
+    return (
+      <ProjectRow
+        project={project}
+        subgroupsWithAssets={subgroupsWithAssets}
+        onFetchData={onFetchData}
+        error={error}
+        depth="root"
+      />
+    );
+  }
+
+  return (
+    <NestedList
+      items={subgroupsWithAssets}
+      onFetchData={onFetchData}
+      error={error}
+      parentProjectSlug={projectSlug}
+    />
+  );
+}
diff --git a/src/components/common/ProjectTitle.tsx b/src/components/common/ProjectTitle.tsx
index 7795e2e4..a6ae5c17 100644
--- a/src/components/common/ProjectTitle.tsx
+++ b/src/components/common/ProjectTitle.tsx
@@ -6,11 +6,21 @@ import { Badge } from "../ui/badge";
 import type { ProjectDTO } from "../../types/api/api";
 import Image from "next/image";
 import { truncateMiddle } from "@/utils/common";
+import { cn } from "@/lib/utils";
 
-export const ProjectBadge = ({ type }: { type: ProjectDTO["type"] }) => {
+export const ProjectBadge = ({
+  type,
+  inHeader = false,
+}: {
+  type: ProjectDTO["type"];
+  inHeader?: boolean;
+}) => {
   if (type === "kubernetesNamespace") {
     return (
-      <Badge className="!text-header-foreground" variant="outline">
+      <Badge
+        className={cn(inHeader ? "!text-header-foreground" : "text-foreground")}
+        variant="outline"
+      >
         <Image
           src="/assets/kubernetes.svg"
           width={16}
@@ -23,7 +33,10 @@ export const ProjectBadge = ({ type }: { type: ProjectDTO["type"] }) => {
     );
   } else if (type === "kubernetesCluster") {
     return (
-      <Badge className="!text-header-foreground" variant="outline">
+      <Badge
+        className={cn(inHeader ? "!text-header-foreground" : "text-foreground")}
+        variant="outline"
+      >
         <Image
           src="/assets/kubernetes.svg"
           width={16}
@@ -36,7 +49,10 @@ export const ProjectBadge = ({ type }: { type: ProjectDTO["type"] }) => {
     );
   } else {
     return (
-      <Badge className="!text-header-foreground" variant="outline">
+      <Badge
+        className={cn(inHeader ? "!text-header-foreground" : "text-foreground")}
+        variant="outline"
+      >
         {type === "default" ? "Group" : "Subgroup"}
       </Badge>
     );
@@ -88,7 +104,7 @@ export const ProjectElement = ({
         title={displayName}
       >
         <span className="truncate">{truncateMiddle(displayName)}</span>
-        <ProjectBadge type={project.type} />
+        <ProjectBadge type={project.type} inHeader={true} />
       </Link>
       {!isLast && <span className="opacity-75 flex-shrink-0">/</span>}
     </>
diff --git a/src/components/group-list/AssetRow.tsx b/src/components/group-list/AssetRow.tsx
new file mode 100644
index 00000000..6c973432
--- /dev/null
+++ b/src/components/group-list/AssetRow.tsx
@@ -0,0 +1,65 @@
+import { CodeBracketSquareIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
+import type { ComponentPropsWithoutRef, FunctionComponent } from "react";
+import { useActiveOrg } from "../../hooks/useActiveOrg";
+import type { AssetDTO } from "../../types/api/api";
+import Markdown from "../common/Markdown";
+import { Badge } from "../ui/badge";
+
+interface Props {
+  asset: AssetDTO;
+  projectSlug: string;
+}
+
+const AssetRow: FunctionComponent<Props> = ({ asset, projectSlug }) => {
+  const activeOrg = useActiveOrg();
+
+  return (
+    <Link
+      href={`/${activeOrg.slug}/projects/${projectSlug}/assets/${asset.slug}/`}
+      className="block no-underline text-inherit"
+    >
+      <div className="flex flex-row items-center gap-3 rounded-md px-3 py-2 transition-colors hover:bg-accent">
+        {asset.avatar ? (
+          <img
+            src={`data:image/png;base64,${asset.avatar}`}
+            alt={asset.name}
+            className="h-8 w-8 shrink-0 rounded-lg border border-foreground/20 bg-muted object-cover"
+          />
+        ) : (
+          <div className="h-8 w-8 shrink-0 rounded-lg border border-foreground/20 bg-muted flex items-center justify-center">
+            <CodeBracketSquareIcon className="h-5 w-5 text-muted-foreground" />
+          </div>
+        )}
+        <div className="flex flex-col min-w-0 flex-1">
+          <div className="flex flex-row items-center gap-2">
+            <span className="font-medium text-foreground truncate">
+              {asset.name}
+            </span>
+            {asset.state === "archived" && (
+              <Badge variant="outline">Archived</Badge>
+            )}
+            {asset.state === "deleted" && (
+              <Badge variant="destructive">Pending deletion</Badge>
+            )}
+          </div>
+          {Boolean(asset.description) && (
+            <div className="text-sm text-muted-foreground">
+              <Markdown
+                components={{
+                  a: (props: ComponentPropsWithoutRef<"a">) => (
+                    <span>{props.children}</span>
+                  ),
+                }}
+              >
+                {asset.description}
+              </Markdown>
+            </div>
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export default AssetRow;
diff --git a/src/components/group-list/EmptyGroupState.tsx b/src/components/group-list/EmptyGroupState.tsx
new file mode 100644
index 00000000..9cdfa11e
--- /dev/null
+++ b/src/components/group-list/EmptyGroupState.tsx
@@ -0,0 +1,24 @@
+import { FolderOpenIcon } from "@heroicons/react/24/outline";
+import type { FunctionComponent } from "react";
+
+interface Props {
+  variant?: "card" | "row";
+}
+
+const EmptyGroupState: FunctionComponent<Props> = ({ variant = "card" }) => {
+  const isCard = variant === "card";
+  return (
+    <div
+      className={
+        isCard
+          ? "flex flex-col items-center justify-center gap-2 px-4 py-6 text-center text-sm text-muted-foreground"
+          : "ml-3 mt-1 flex flex-col items-center justify-center gap-1 py-3 pl-6 text-center text-xs text-muted-foreground"
+      }
+    >
+      <FolderOpenIcon className={isCard ? "h-6 w-6" : "h-5 w-5"} />
+      <span>No subgroups or repositories yet</span>
+    </div>
+  );
+};
+
+export default EmptyGroupState;
diff --git a/src/components/group-list/NestedList.tsx b/src/components/group-list/NestedList.tsx
new file mode 100644
index 00000000..c315f8e2
--- /dev/null
+++ b/src/components/group-list/NestedList.tsx
@@ -0,0 +1,89 @@
+import type { FunctionComponent } from "react";
+import type { SubGroupsAndAsset } from "../../types/api/api";
+import Err from "../common/Err";
+import EmptyParty from "../common/EmptyParty";
+import SkeletonListItems from "../common/SkeletonListItems";
+import { Skeleton } from "../ui/skeleton";
+import AssetRow from "./AssetRow";
+import ProjectRow from "./ProjectRow";
+import { checkType } from "./utils";
+
+interface Props {
+  items?: SubGroupsAndAsset[];
+  onFetchData: (projectSlug: string, projectId: string) => any;
+  error?: Error;
+  isLoading?: boolean;
+  parentProjectSlug: string;
+  compact?: boolean;
+}
+
+const NestedRowSkeleton: FunctionComponent = () => (
+  <div className="flex flex-row items-center gap-3 px-3 py-2">
+    <Skeleton className="h-8 w-8 rounded-lg shrink-0" />
+    <div className="flex flex-1 flex-col gap-1.5">
+      <Skeleton className="h-4 w-1/3" />
+      <Skeleton className="h-3 w-2/3" />
+    </div>
+  </div>
+);
+
+const NestedList: FunctionComponent<Props> = ({
+  items,
+  onFetchData,
+  error,
+  isLoading = false,
+  parentProjectSlug,
+  compact = false,
+}) => {
+  if (isLoading) {
+    if (compact) {
+      return (
+        <>
+          <NestedRowSkeleton />
+          <NestedRowSkeleton />
+          <NestedRowSkeleton />
+        </>
+      );
+    }
+    return <SkeletonListItems />;
+  }
+
+  if (error) {
+    return <Err />;
+  }
+
+  if (!items || items.length === 0) {
+    if (compact) {
+      return null;
+    }
+    return <EmptyParty title="No groups found" description="" />;
+  }
+
+  return (
+    <>
+      {items.map((item) => {
+        const { asset, subgroup } = checkType(item);
+        if (asset) {
+          return (
+            <AssetRow
+              key={asset.id}
+              asset={asset}
+              projectSlug={parentProjectSlug}
+            />
+          );
+        }
+        return (
+          <ProjectRow
+            key={subgroup.id}
+            project={subgroup}
+            subgroupsWithAssets={subgroup.subGroupsAndAsset}
+            onFetchData={onFetchData}
+            depth="nested"
+          />
+        );
+      })}
+    </>
+  );
+};
+
+export default NestedList;
diff --git a/src/components/group-list/ProjectRow.tsx b/src/components/group-list/ProjectRow.tsx
new file mode 100644
index 00000000..e45b3e91
--- /dev/null
+++ b/src/components/group-list/ProjectRow.tsx
@@ -0,0 +1,202 @@
+"use client";
+
+import {
+  ChevronDownIcon,
+  RectangleGroupIcon as RectangleGroupIconOutline,
+} from "@heroicons/react/24/outline";
+import { RectangleGroupIcon as RectangleGroupIconSolid } from "@heroicons/react/24/solid";
+import Link from "next/link";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+  type FunctionComponent,
+  type KeyboardEvent,
+} from "react";
+import { useActiveOrg } from "../../hooks/useActiveOrg";
+import type { ProjectDTO, SubGroupsAndAsset } from "../../types/api/api";
+import { classNames } from "../../utils/common";
+import Markdown from "../common/Markdown";
+import { ProjectBadge } from "../common/ProjectTitle";
+import { Badge } from "../ui/badge";
+import { Collapsible, CollapsibleContent } from "../ui/collapsible";
+import EmptyGroupState from "./EmptyGroupState";
+import NestedList from "./NestedList";
+
+interface Props {
+  project: ProjectDTO;
+  subgroupsWithAssets?: SubGroupsAndAsset[];
+  onFetchData: (projectSlug: string, projectId: string) => any;
+  error?: Error;
+  depth: "root" | "nested";
+}
+
+const ProjectRow: FunctionComponent<Props> = ({
+  project,
+  subgroupsWithAssets,
+  onFetchData,
+  error,
+  depth,
+}) => {
+  const activeOrg = useActiveOrg();
+  const isRoot = depth === "root";
+  const isFetched = subgroupsWithAssets != null;
+  const hasContent = isFetched && (subgroupsWithAssets?.length ?? 0) > 0;
+  const [isOpen, setIsOpen] = useState(hasContent);
+  const [isLoading, setIsLoading] = useState(false);
+  const [fetchCompleted, setFetchCompleted] = useState(isFetched);
+  const inFlight = useRef(false);
+
+  const fetchChildren = useCallback(async () => {
+    if (inFlight.current) return;
+    inFlight.current = true;
+    setIsLoading(true);
+    setFetchCompleted(false);
+    try {
+      await onFetchData(project.slug, project.id);
+      setFetchCompleted(true);
+    } finally {
+      setIsLoading(false);
+      inFlight.current = false;
+    }
+  }, [onFetchData, project.slug, project.id]);
+
+  useEffect(() => {
+    if (hasContent) setIsOpen(true);
+  }, [hasContent]);
+
+  useEffect(() => {
+    if (isOpen && !isFetched && !inFlight.current) {
+      fetchChildren();
+    }
+  }, [isOpen, isFetched, fetchChildren]);
+
+  const toggle = async () => {
+    const next = !isOpen;
+    setIsOpen(next);
+    if (next && !isFetched) {
+      await fetchChildren();
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      toggle();
+    }
+  };
+
+  const Icon = isRoot ? RectangleGroupIconSolid : RectangleGroupIconOutline;
+
+  const body = (
+    <Collapsible open={isOpen}>
+      <div
+        role="button"
+        tabIndex={0}
+        aria-expanded={isOpen}
+        onClick={toggle}
+        onKeyDown={handleKeyDown}
+        className={classNames(
+          "flex flex-row items-center gap-3 cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          isRoot ? "px-4 py-3" : "rounded-md px-3 py-2",
+        )}
+      >
+        {project.avatar ? (
+          <img
+            src={`data:image/png;base64,${project.avatar}`}
+            alt={project.name}
+            className="h-8 w-8 shrink-0 rounded-lg border border-foreground/20 bg-muted object-cover"
+          />
+        ) : (
+          <div className="h-8 w-8 shrink-0 rounded-lg border border-foreground/20 bg-muted flex items-center justify-center">
+            <Icon
+              className={classNames(
+                "h-5 w-5",
+                isRoot ? "!text-foreground" : "text-muted-foreground",
+              )}
+            />
+          </div>
+        )}
+        <div className="flex flex-1 min-w-0 flex-col">
+          <div className="flex flex-row items-center gap-2">
+            <Link
+              href={`/${activeOrg.slug}/projects/${project.slug}`}
+              onClick={(e) => e.stopPropagation()}
+              className={classNames(
+                "!text-foreground truncate hover:underline",
+                isRoot ? "font-semibold text-base" : "font-medium",
+              )}
+            >
+              {project.name}
+            </Link>
+            {project.type !== "default" && <ProjectBadge type={project.type} />}
+            {project.state === "deleted" && (
+              <Badge variant="destructive">Pending deletion</Badge>
+            )}
+          </div>
+          {Boolean(project.description) && (
+            <div className="text-sm text-muted-foreground line-clamp-1">
+              <Markdown
+                components={{
+                  a: (props: ComponentPropsWithoutRef<"a">) => (
+                    <span>{props.children}</span>
+                  ),
+                }}
+              >
+                {project.description}
+              </Markdown>
+            </div>
+          )}
+        </div>
+        <ChevronDownIcon
+          className={classNames(
+            "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200",
+            isRoot && "mr-3",
+            isOpen && "rotate-180",
+          )}
+        />
+      </div>
+      <CollapsibleContent>
+        {(isLoading || Boolean(error) || hasContent) && (
+          <div
+            className={
+              isRoot ? "relative px-4 pl-10" : "relative ml-3 mt-1 pl-6 pb-1"
+            }
+          >
+            <div
+              className={classNames(
+                "absolute border-l border-border",
+                isRoot
+                  ? "left-[31px] -top-3 -bottom-2"
+                  : "left-[14px] top-0 bottom-2",
+              )}
+            />
+            <div className="flex flex-col gap-1">
+              <NestedList
+                items={subgroupsWithAssets}
+                onFetchData={onFetchData}
+                error={error}
+                isLoading={isLoading}
+                parentProjectSlug={project.slug}
+                compact
+              />
+            </div>
+          </div>
+        )}
+        {!isLoading &&
+          !error &&
+          (isFetched || fetchCompleted) &&
+          !hasContent && <EmptyGroupState variant={isRoot ? "card" : "row"} />}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+
+  if (isRoot) {
+    return <div className="border-b py-2">{body}</div>;
+  }
+  return body;
+};
+
+export default ProjectRow;
diff --git a/src/components/group-list/utils.ts b/src/components/group-list/utils.ts
new file mode 100644
index 00000000..2ad6de07
--- /dev/null
+++ b/src/components/group-list/utils.ts
@@ -0,0 +1,25 @@
+import type {
+  AssetDTO,
+  ProjectDTO,
+  SubGroupsAndAsset,
+} from "../../types/api/api";
+
+export function isProject(
+  d: SubGroupsAndAsset,
+): d is ProjectDTO & { resourceType: "project" } {
+  return d.resourceType === "project";
+}
+
+export function checkType(data: SubGroupsAndAsset):
+  | {
+      asset: AssetDTO & { resourceType: "asset" };
+      subgroup: null;
+    }
+  | {
+      asset: null;
+      subgroup: ProjectDTO & { resourceType: "project" };
+    } {
+  return isProject(data)
+    ? { asset: null, subgroup: data }
+    : { asset: data, subgroup: null };
+}
diff --git a/src/types/api/api.ts b/src/types/api/api.ts
index 6110af71..45da0060 100644
--- a/src/types/api/api.ts
+++ b/src/types/api/api.ts
@@ -143,6 +143,10 @@ export interface PatWithPrivKey extends PersonalAccessTokenDTO {
   privKey: string;
 }
 
+export type SubGroupsAndAsset =
+  | (AssetDTO & { resourceType: "asset" })
+  | (ProjectDTO & { resourceType: "project" });
+
 export interface ProjectDTO {
   avatar?: string;
   name: string;
@@ -173,6 +177,8 @@ export interface ProjectDTO {
   externalEntityProviderId?: string;
 
   state: "active" | "deleted";
+
+  subGroupsAndAsset?: Array<SubGroupsAndAsset>;
 }
 export type ExpandedVulnDTOState =
   | DependencyVuln["state"]