diff --git a/packages/docusaurus-plugin-showcase/src/index.ts b/packages/docusaurus-plugin-showcase/src/index.ts
index f66a49d297..11cb87a426 100644
--- a/packages/docusaurus-plugin-showcase/src/index.ts
+++ b/packages/docusaurus-plugin-showcase/src/index.ts
@@ -16,6 +16,17 @@ import {contentAuthorsSchema} from './options';
 import type {LoadContext, Plugin} from '@docusaurus/types';
 import type {PluginOptions, Content} from '@docusaurus/plugin-showcase';
 
+// https://stackoverflow.com/a/71166133
+const walk = async (dirPath: string): Promise<any[]> =>
+  Promise.all(
+    await fs.readdir(dirPath, {withFileTypes: true}).then((entries) =>
+      entries.map((entry) => {
+        const childPath = path.join(dirPath, entry.name);
+        return entry.isDirectory() ? walk(childPath) : childPath;
+      }),
+    ),
+  );
+
 export default function pluginContentShowcase(
   context: LoadContext,
   options: PluginOptions,
@@ -36,35 +47,33 @@ export default function pluginContentShowcase(
     // },
 
     async loadContent(): Promise<Content> {
-      const files = await fs.readdir(path.join(siteDir, options.path));
-      const yamlFiles = files.filter((file) => file.endsWith('.yaml'));
+      const files: string[] = await walk(path.join(siteDir, options.path));
+      console.log('allFiles:', files.flat(Number.POSITIVE_INFINITY));
+      const contentPromises = files
+        .flat(Number.POSITIVE_INFINITY)
+        .map(async (file) => {
+          const rawYaml = await fs.readFile(path.join(file), 'utf-8');
+          const yaml = Yaml.load(rawYaml);
+          const parsedYaml = contentAuthorsSchema.validate(yaml);
 
-      const contentPromises = yamlFiles.map(async (file) => {
-        const rawYaml = await fs.readFile(
-          path.join(siteDir, options.path, file),
-          'utf-8',
-        );
-        const yaml = Yaml.load(rawYaml);
-        const parsedYaml = contentAuthorsSchema.validate(yaml);
+          if (parsedYaml.error) {
+            throw new Error(`Validation failed: ${parsedYaml.error.message}`, {
+              cause: parsedYaml.error,
+            });
+          }
 
-        if (parsedYaml.error) {
-          throw new Error(`Validation failed: ${parsedYaml.error.message}`, {
-            cause: parsedYaml.error,
-          });
-        }
+          const {title, description, preview, website, source, tags} =
+            parsedYaml.value;
 
-        const {title, description, preview, website, source, tags} =
-          parsedYaml.value;
-
-        return {
-          title,
-          description,
-          preview,
-          website,
-          source,
-          tags,
-        };
-      });
+          return {
+            title,
+            description,
+            preview,
+            website,
+            source,
+            tags,
+          };
+        });
 
       const content = await Promise.all(contentPromises);
       return {
@@ -88,7 +97,7 @@ export default function pluginContentShowcase(
 
           addRoute({
             path: `/showcaseAll/${item.title}`,
-            component: '@theme/Showcase',
+            component: '@theme/ShowcaseDetails',
             modules: {
               content: dataAuthor,
             },
diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
index 446970b74f..3ef6fbe45d 100644
--- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts
+++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -247,10 +247,20 @@ declare module '@theme/BlogPostItems' {
   export default function BlogPostItem(props: Props): JSX.Element;
 }
 
-declare module '@theme/Showcase' {
+declare module '@theme/ShowcaseDetails' {
   import type {Content} from '@docusaurus/plugin-showcase';
 
-  export function prepareUserState(): UserState | undefined;
+  export type User = Content['website'][number];
+
+  export type Props = {
+    content: User;
+  };
+
+  export default function Showcase(props: Props): JSX.Element;
+}
+
+declare module '@theme/Showcase' {
+  import type {Content} from '@docusaurus/plugin-showcase';
 
   export type User = Content['website'][number];
 
@@ -296,16 +306,12 @@ declare module '@theme/Showcase/ShowcaseTagSelect' {
     tag: TagType;
   }
 
-  export function readSearchTags(search: string): TagType[];
-
   export default function ShowcaseTagSelect(props: Props): JSX.Element;
 }
 declare module '@theme/Showcase/ShowcaseFilterToggle' {
   export type Operator = 'OR' | 'AND';
   export const OperatorQueryKey = 'operator';
 
-  export function readOperator(search: string): Operator;
-
   export default function ShowcaseFilterToggle(): JSX.Element;
 }
 
diff --git a/packages/docusaurus-theme-classic/src/theme/Showcase/index.tsx b/packages/docusaurus-theme-classic/src/theme/Showcase/index.tsx
index 61bd474edc..0acd3df1a1 100644
--- a/packages/docusaurus-theme-classic/src/theme/Showcase/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Showcase/index.tsx
@@ -448,8 +448,7 @@ function ShowcaseCards({users}: {users: Users}) {
 }
 
 export default function Showcase(props: Props): JSX.Element {
-  // TODO remove temporary to test showcase specific page
-  const users = Array.isArray(props.content) ? props.content : [props.content];
+  const users = props.content;
 
   return (
     <Layout title="Showcase">
diff --git a/packages/docusaurus-theme-classic/src/theme/ShowcaseDetails/index.tsx b/packages/docusaurus-theme-classic/src/theme/ShowcaseDetails/index.tsx
new file mode 100644
index 0000000000..99605ad027
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/ShowcaseDetails/index.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {Props} from '@theme/ShowcaseDetails';
+import Layout from '@theme/Layout';
+
+export default function Showcase(props: Props): JSX.Element {
+  const user = props.content;
+
+  return (
+    <Layout title="Showcase Details">
+      <div>{user.title}</div>
+    </Layout>
+  );
+}