diff --git a/docs/docs/FAQ/FAQ.md b/docs/docs/FAQ/FAQ.md
new file mode 100644
index 0000000000..d9c5b6b8a6
--- /dev/null
+++ b/docs/docs/FAQ/FAQ.md
@@ -0,0 +1,12 @@
+# FAQ General
+
+import TOCI from '@site/src/components/TOC';
+
+
+<TOCI/>
+
+
+
+
+
+
diff --git a/docs/docs/FAQ/index.js b/docs/docs/FAQ/index.js
new file mode 100644
index 0000000000..89fbc4d0a6
--- /dev/null
+++ b/docs/docs/FAQ/index.js
@@ -0,0 +1,37 @@
+import {toc as Toc_Albums ,metadata as Metadata_Albums} from './Albums-FAQ.md';
+import {toc as Toc_Assets ,metadata as Metadata_Assets} from './Assets-FAQ.md';
+import {toc as Toc_Docker ,metadata as Metadata_Docker} from './Docker-FAQ.md';
+import {toc as Toc_External ,metadata as Metadata_External} from './External-Library-FAQ.md';
+import {toc as Toc_Machine ,metadata as Metadata_Machine} from './Machine-Learning-FAQ.md';
+import {toc as Toc_Mobile ,metadata as Metadata_Mobile} from './Mobile-App-FAQ.md';
+import {toc as Toc_Performance ,metadata as Metadata_Performance} from './Performance-FAQ.md';
+import {toc as Toc_User ,metadata as Metadata_User} from './User-FAQ.md';
+const combined = {
+Albums: { toc: Toc_Albums, metadata: Metadata_Albums },
+Assets: { toc: Toc_Assets, metadata: Metadata_Assets },
+Docker: { toc: Toc_Docker, metadata: Metadata_Docker },
+External: { toc: Toc_External, metadata: Metadata_External },
+Machine: { toc: Toc_Machine, metadata: Metadata_Machine },
+Mobile: { toc: Toc_Mobile, metadata: Metadata_Mobile },
+Performance: { toc: Toc_Performance, metadata: Metadata_Performance },
+User: { toc: Toc_User, metadata: Metadata_User },
+};
+
+// Convert the object to an array
+const combinedArray = Object.keys(combined).map(key => ({
+  key,
+  toc: combined[key].toc,
+  metadata: combined[key].metadata
+}));
+
+// Sort the array based on sidebar_position
+combinedArray.sort((a, b) => a.metadata.frontMatter.sidebar_position - b.metadata.frontMatter.sidebar_position);
+
+// Convert the array back to an object
+export const sortedCombined = {};
+combinedArray.forEach(item => {
+  sortedCombined[item.key] = {
+    toc: item.toc,
+    metadata: item.metadata
+  };
+});
\ No newline at end of file
diff --git a/docs/docs/auto-index.js b/docs/docs/auto-index.js
new file mode 100644
index 0000000000..ff8e9539ad
--- /dev/null
+++ b/docs/docs/auto-index.js
@@ -0,0 +1,52 @@
+const fs = require('fs');
+const path = require('path');
+
+// Specify the directory
+const dirPath = path.join(__dirname, '/FAQ');
+
+// Read the directory
+fs.readdir(dirPath, (err, files) => {
+  if (err) {
+    console.error('Could not list the directory.', err);
+    process.exit(1);
+  } 
+
+  // Filter .md files
+  const mdFiles = files.filter(file =>  path.extname(file) === '.md' &&  file !== "FAQ.md");
+
+  // Generate import statements
+  const importStatements = mdFiles.map((file,i) => {
+    const componentName = path.basename(file, '.md').split("-")[0];
+    return `import {toc as Toc_${componentName} ,metadata as Metadata_${componentName}} from './${file}';`;
+  });
+
+  // Combine toc and metadata under one key for each file
+  const combinedStatements = mdFiles.map((file,i) => {
+    const componentName = path.basename(file, '.md').split("-")[0];
+    return `${componentName}: { toc: Toc_${componentName}, metadata: Metadata_${componentName} },`;
+  });
+
+  // Write to index.js
+  fs.writeFile(path.join(dirPath, 'index.js'), [...importStatements, 'const combined = {', ...combinedStatements, '};'   ,`
+// Convert the object to an array
+const combinedArray = Object.keys(combined).map(key => ({
+  key,
+  toc: combined[key].toc,
+  metadata: combined[key].metadata
+}));
+
+// Sort the array based on sidebar_position
+combinedArray.sort((a, b) => a.metadata.frontMatter.sidebar_position - b.metadata.frontMatter.sidebar_position);
+
+// Convert the array back to an object
+export const sortedCombined = {};
+combinedArray.forEach(item => {
+  sortedCombined[item.key] = {
+    toc: item.toc,
+    metadata: item.metadata
+  };
+});`].join('\n'), (err) => {
+    if (err) throw err;
+    console.log('Index file has been saved!');
+  });
+});
diff --git a/docs/package.json b/docs/package.json
index e9c7d540f3..fe339cd537 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -14,7 +14,8 @@
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
-    "check": "tsc"
+    "check": "tsc",
+    "index" : "node docs/auto-index.js"
   },
   "dependencies": {
     "@docusaurus/core": "^2.4.3",
diff --git a/docs/src/components/TOC.js b/docs/src/components/TOC.js
new file mode 100644
index 0000000000..f9c95f4ac2
--- /dev/null
+++ b/docs/src/components/TOC.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import TOC from './TOCInline';
+import { sortedCombined as FAQComponents } from '../../docs/FAQ/index';
+
+const TOCI = () => {
+    return (
+        <div>
+            {/* For each [key, value] pair in FAQComponents... */}
+            {Object.values(FAQComponents).map(({ toc, metadata }) => {
+                /* ...render a TOC component with toc and metadata as props */
+                return <TOC key={metadata.id} toc={toc} metadata={metadata} />
+            })}
+        </div>
+    );
+};
+
+export default TOCI;
diff --git a/docs/src/components/TOCInline.js b/docs/src/components/TOCInline.js
new file mode 100644
index 0000000000..0dfe6b2fbe
--- /dev/null
+++ b/docs/src/components/TOCInline.js
@@ -0,0 +1,21 @@
+
+import React from 'react';
+import TOCInline from './TOCInline/index';
+const TOC = ({metadata , toc}) => {
+    return (
+        <div>
+            <div className="col col--12">
+            <h1>{metadata.title}</h1>
+            <TOCInline toc={toc} metadata={metadata}/>
+            </div>
+        </div>
+    );
+};
+
+export default TOC;
+
+
+
+
+
+
diff --git a/docs/src/components/TOCInline/index.d.ts b/docs/src/components/TOCInline/index.d.ts
new file mode 100644
index 0000000000..34a766bd1c
--- /dev/null
+++ b/docs/src/components/TOCInline/index.d.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/TOCInline';
+export default function TOCInline({ toc, minHeadingLevel, maxHeadingLevel,metadata }: Props): JSX.Element;
diff --git a/docs/src/components/TOCInline/index.js b/docs/src/components/TOCInline/index.js
new file mode 100644
index 0000000000..a2c8bb4bb6
--- /dev/null
+++ b/docs/src/components/TOCInline/index.js
@@ -0,0 +1,23 @@
+/**
+ * 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 React from 'react';
+import TOCItems from '../TOCItems/index';
+import styles from './styles.module.css';
+export default function TOCInline({toc, minHeadingLevel, maxHeadingLevel ,metadata}) {
+  return (
+    <div className={styles.tableOfContentsInline}>
+      <TOCItems
+        toc={toc}
+        minHeadingLevel={minHeadingLevel}
+        maxHeadingLevel={maxHeadingLevel}
+        className="table-of-contents"
+        linkClassName={null}
+        metadata={metadata}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/components/TOCInline/styles.module.css b/docs/src/components/TOCInline/styles.module.css
new file mode 100644
index 0000000000..cc9bc7485e
--- /dev/null
+++ b/docs/src/components/TOCInline/styles.module.css
@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+
+.tableOfContentsInline ul {
+  list-style-type: disc;
+  font-size: initial;
+  padding-top: 0;
+}
diff --git a/docs/src/components/TOCItems/Tree.d.ts b/docs/src/components/TOCItems/Tree.d.ts
new file mode 100644
index 0000000000..983b212d02
--- /dev/null
+++ b/docs/src/components/TOCItems/Tree.d.ts
@@ -0,0 +1,11 @@
+/**
+ * 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 React from 'react';
+import type { Props } from '@theme/TOCItems/Tree';
+declare function TOCItemTree({ toc, className, linkClassName, isChild,metadata }: Props): JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof TOCItemTree>;
+export default _default;
diff --git a/docs/src/components/TOCItems/Tree.js b/docs/src/components/TOCItems/Tree.js
new file mode 100644
index 0000000000..ea4470d5fe
--- /dev/null
+++ b/docs/src/components/TOCItems/Tree.js
@@ -0,0 +1,44 @@
+/**
+ * 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 React from 'react';
+import Link from '@docusaurus/Link';
+
+// Recursive component rendering the toc tree
+function TOCItemTree({ toc, className, linkClassName, isChild, metadata }) {
+  if (!toc.length) {
+    return null;
+  }
+  return (
+    <ul className={isChild ? undefined : className}>
+      {toc.map((heading) => (
+        <li key={heading.id}>
+          <Link
+            className={linkClassName ?? undefined} key={heading.id}
+            href={`${metadata?.permalink}#${heading.id}`}
+            to={`${metadata?.permalink}#${heading.id}`}
+          >
+            {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+            <span
+              // Developer provided the HTML, so assume it's safe.
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: heading.value }}
+            ></span>
+          </Link>
+          <TOCItemTree
+            isChild
+            toc={heading.children}
+            className={className}
+            linkClassName={linkClassName}
+            metadata={metadata}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+// Memo only the tree root is enough
+export default React.memo(TOCItemTree);
diff --git a/docs/src/components/TOCItems/index.d.ts b/docs/src/components/TOCItems/index.d.ts
new file mode 100644
index 0000000000..2110ad7e1a
--- /dev/null
+++ b/docs/src/components/TOCItems/index.d.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/TOCItems';
+export default function TOCItems({ toc, className, linkClassName, linkActiveClassName, minHeadingLevel: minHeadingLevelOption, maxHeadingLevel: maxHeadingLevelOption,metadata: metadata, ...props }: Props): JSX.Element | null;
diff --git a/docs/src/components/TOCItems/index.js b/docs/src/components/TOCItems/index.js
new file mode 100644
index 0000000000..8aa15a60b3
--- /dev/null
+++ b/docs/src/components/TOCItems/index.js
@@ -0,0 +1,55 @@
+/**
+ * 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 React, {useMemo} from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {
+  useTOCHighlight,
+  useFilteredAndTreeifiedTOC,
+} from '@docusaurus/theme-common/internal';
+import TOCItemTree from '../TOCItems/Tree';
+export default function TOCItems({
+  toc,
+  className = 'table-of-contents table-of-contents__left-border',
+  linkClassName = 'table-of-contents__link',
+  linkActiveClassName = undefined,
+  minHeadingLevel: minHeadingLevelOption,
+  maxHeadingLevel: maxHeadingLevelOption,
+  metadata:metadata,
+  ...props
+}) {
+  const themeConfig = useThemeConfig();
+  const minHeadingLevel =
+    minHeadingLevelOption ?? themeConfig.tableOfContents.minHeadingLevel;
+  const maxHeadingLevel =
+    maxHeadingLevelOption ?? themeConfig.tableOfContents.maxHeadingLevel;
+  const tocTree = useFilteredAndTreeifiedTOC({
+    toc,
+    minHeadingLevel,
+    maxHeadingLevel,
+  });
+  const tocHighlightConfig = useMemo(() => {
+    if (linkClassName && linkActiveClassName) {
+      return {
+        linkClassName,
+        linkActiveClassName,
+        minHeadingLevel,
+        maxHeadingLevel,
+      };
+    }
+    return undefined;
+  }, [linkClassName, linkActiveClassName, minHeadingLevel, maxHeadingLevel]);
+  useTOCHighlight(tocHighlightConfig);
+  return (
+    <TOCItemTree
+      toc={tocTree}
+      className={className}
+      linkClassName={linkClassName}
+      metadata={metadata}
+      {...props}
+    />
+  );
+}