diff --git a/docs/components/Navigation/Navigation.tsx b/docs/components/Navigation/Navigation.tsx
index 2da76c57..16b223a0 100644
--- a/docs/components/Navigation/Navigation.tsx
+++ b/docs/components/Navigation/Navigation.tsx
@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { Extension } from '../../constants/extension';
 import { useRouter } from 'next/router';
 import { Searchbox } from '../Page/Searchbox';
+import { publicUrl } from '../../lib/publicUrl';
 
 export interface INavigationProps {}
 
@@ -12,49 +13,61 @@ export const Navigation: React.FunctionComponent<INavigationProps> = (props: Rea
   const router = useRouter();
   
   return (
-    <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" aria-label="Top">
-      <div className="w-full py-6 flex items-center justify-center lg:justify-between border-b border-teal-500 lg:border-none">
-        <div className="flex items-center">
-          <Link href="/">
-            <a title={Extension.name}>
-              <span className="sr-only">{Extension.name}</span>
-              <Logo className={`text-whisper-500 h-12 w-auto`} />
+    <>
+      {
+        process.env.NEXT_PUBLIC_VERCEL_ENV !== 'production' ? (
+          <div className={`bg-yellow-500 text-center py-2 px-4`}>
+            <a href={`https://frontmatter.codes`} title={`Go to main release documentation`} className={`text-base font-medium text-vulcan-500 hover:text-vulcan-900`}>
+              You are currently viewing the BETA version of Front Matter documentation. Click on the banner to go to the main release documentation.
             </a>
-          </Link>
-        </div>
-        <div className="space-x-4">
-          <div className="hidden ml-10 space-x-8 lg:flex justify-center items-center">
-            {navigation.main.map((link) => (
-              <a key={link.name} href={link.href} title={link.title} className={`text-base font-medium text-whisper-500 hover:text-whisper-900 ${link.href === router.asPath ? `text-teal-800` : ``}`}>
-                {link.name}
-              </a>
-            ))}
-            {navigation.social.map((link) => (
-              <a key={link.name} href={link.href} title={link.title} className={`text-base font-medium text-whisper-500 hover:text-whisper-900`} rel={`noopener noreferrer`}>
-                <span className="sr-only">{link.name}</span>
-                <link.icon className="inline-block h-6 w-6" aria-hidden="true" />
-              </a>
-            ))}
+          </div>
+        ) : null
+      }
 
-            <Searchbox />
+      <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" aria-label="Top">
+        <div className="w-full py-6 flex items-center justify-center lg:justify-between border-b border-teal-500 lg:border-none">
+          <div className="flex items-center">
+            <Link href="/">
+              <a title={Extension.name}>
+                <span className="sr-only">{Extension.name}</span>
+                <Logo className={`text-whisper-500 h-12 w-auto`} />
+              </a>
+            </Link>
+          </div>
+          <div className="space-x-4">
+            <div className="hidden ml-10 space-x-8 lg:flex justify-center items-center">
+              {navigation.main.map((link) => (
+                <a key={link.name} href={link.href} title={link.title} className={`text-base font-medium text-whisper-500 hover:text-whisper-900 ${link.href === router.asPath ? `text-teal-800` : ``}`}>
+                  {link.name}
+                </a>
+              ))}
+              {navigation.social.map((link) => (
+                <a key={link.name} href={link.href} title={link.title} className={`text-base font-medium text-whisper-500 hover:text-whisper-900`} rel={`noopener noreferrer`}>
+                  <span className="sr-only">{link.name}</span>
+                  <link.icon className="inline-block h-6 w-6" aria-hidden="true" />
+                </a>
+              ))}
+
+              <Searchbox />
+            </div>
           </div>
         </div>
-      </div>
-      <div className="py-4 flex flex-wrap justify-center space-x-6 lg:hidden">
-        {navigation.main.map((link) => (
-          <a key={link.name} href={link.href} title={link.title} className="text-base font-medium text-whisper-500 hover:text-whisper-900">
-            {link.name}
-          </a>
-        ))}
-      </div>
-      <div className="py-4 flex flex-wrap justify-center space-x-6 lg:hidden">
-        {navigation.social.map((link) => (
-          <a key={link.name} href={link.href} title={link.title} className={`text-base font-medium text-whisper-500 hover:text-whisper-900`} rel={`noopener noreferrer`}>
-            <span className="sr-only">{link.name}</span>
-            <link.icon className="inline-block h-6 w-6" aria-hidden="true" />
-          </a>
-        ))}
-      </div>
-    </nav>
+        <div className="py-4 flex flex-wrap justify-center space-x-6 lg:hidden">
+          {navigation.main.map((link) => (
+            <a key={link.name} href={link.href} title={link.title} className="text-base font-medium text-whisper-500 hover:text-whisper-900">
+              {link.name}
+            </a>
+          ))}
+        </div>
+        <div className="py-4 flex flex-wrap justify-center space-x-6 lg:hidden">
+          {navigation.social.map((link) => (
+            <a key={link.name} href={link.href} title={link.title} className={`text-base font-medium text-whisper-500 hover:text-whisper-900`} rel={`noopener noreferrer`}>
+              <span className="sr-only">{link.name}</span>
+              <link.icon className="inline-block h-6 w-6" aria-hidden="true" />
+            </a>
+          ))}
+        </div>
+      </nav>
+    </>
   );
 };
diff --git a/docs/content/changelog/CHANGELOG.md b/docs/content/changelog/CHANGELOG.md
index ce8453f8..890dde42 100644
--- a/docs/content/changelog/CHANGELOG.md
+++ b/docs/content/changelog/CHANGELOG.md
@@ -7,6 +7,7 @@
 - [#81](https://github.com/estruyf/vscode-front-matter/issues/81): Optimizing the content folders to use a new setting to simplify configuration
 - [#87](https://github.com/estruyf/vscode-front-matter/issues/87): Fix issue with autofocus and command palette
 - [#88](https://github.com/estruyf/vscode-front-matter/issues/88): Fix issue with search sorting
+- [#89](https://github.com/estruyf/vscode-front-matter/issues/89): Clear filter, sorting, and grouping button added
 - [#90](https://github.com/estruyf/vscode-front-matter/issues/90): Refactoring to use Recoil state management
 
 ## [3.0.2] - 2021-08-31
diff --git a/docs/content/docs/settings.md b/docs/content/docs/settings.md
index a9efa83d..649e0e58 100644
--- a/docs/content/docs/settings.md
+++ b/docs/content/docs/settings.md
@@ -31,9 +31,9 @@ Specify if you want to highlight the Front Matter in the Markdown file.
 - Type: `boolean`
 - Default: `true`
 
-### frontMatter.content.folders
+### frontMatter.content.pageFolders
 
-This array of folders defines where the extension can easily create new content by running the create article command.
+This array of folders defines where the extension can find your content and create new content by running the create article command.
 
 - Type: `object[]`
 - Default: `[]`
@@ -42,14 +42,17 @@ Sample:
 
 ```json
 {
-  "frontMatter.content.folders": [{
-    "title": "Articles",
-    "fsPath": "<the path to the folder>",
-    "paths": ["<wsl-folder-path>"]
-  }]
+  "frontMatter.content.pageFolders": [
+    {
+      "title": "Blog posts",
+      "path": "[[workspace]]/content/posts"
+    }
+  ]
 }
 ```
 
+> **Important**: `[[workspace]]` is a placeholder that the extension uses to replace the workspace path. The reason why we choose to use this, is because some do not keep the original folder name.
+
 ### frontMatter.content.publicFolder
 
 Specify the folder name where all your assets are located. For instance in Hugo this is the `static` folder.
@@ -230,4 +233,11 @@ Specify the folder to use for your article templates.
 Specify the prefix you want to add for your new article filenames.
 
 - Type: `string`
-- Default: `yyyy-MM-dd`
\ No newline at end of file
+- Default: `yyyy-MM-dd`
+
+
+## Deprecated settings
+
+### frontMatter.content.folders
+
+This setting has been deprecated since version `3.1.0` in favor of the newly introduced `frontMatter.content.pageFolders` setting.
\ No newline at end of file