diff --git a/src/app/modules/admin/docs/guides/authentication/jwt/jwt.html b/src/app/modules/admin/docs/guides/authentication/jwt/jwt.html
index 442a8d3b..cc4a53ce 100644
--- a/src/app/modules/admin/docs/guides/authentication/jwt/jwt.html
+++ b/src/app/modules/admin/docs/guides/authentication/jwt/jwt.html
@@ -104,8 +104,7 @@
             from your backend API if needed.
         </p>
         <p>
-            Since Javascript cannot read or write <strong>HTTPOnly</strong> cookies, <em>refresh tokens</em> can only be accessed and set via the requests and responses by
-            your backend implementation. Basically, the <em>refresh token</em> implementation needs to be done in your backend, there is nothing that can be done in Fuse or
+           The <em>refresh token</em> implementation needs to be done in your backend, there is nothing that can be done in Fuse or
             in Javascript.
         </p>
 
diff --git a/src/app/modules/admin/docs/guides/customization/multi-language/multi-language.html b/src/app/modules/admin/docs/guides/customization/multi-language/multi-language.html
index 836bca30..075f8ac0 100644
--- a/src/app/modules/admin/docs/guides/customization/multi-language/multi-language.html
+++ b/src/app/modules/admin/docs/guides/customization/multi-language/multi-language.html
@@ -54,7 +54,7 @@
         <h2>Translating the navigation</h2>
         <p>
             Since <code>FuseNavigation</code> supports runtime data swapping, you can replace the navigation data either partially or completely when the language changes.
-            The <strong>LanguageComponent</strong> is a suitable place to do this and it's located at <code>src/app/layout/common/language</code>.
+            The <strong>LanguageComponent</strong> is a suitable place to do this and it's located at <code>src/app/layout/common/languages</code>.
         </p>
 
         <h2>Removing Transloco</h2>
@@ -63,11 +63,10 @@
             the <strong>Transloco</strong> from Fuse:
         </p>
         <ol>
-            <li>Navigate to <code>src/app/core/core.module.ts</code> file and remove imports of <code>TranslocoCoreModule</code></li>
+            <li>Navigate to <code>src/app.config.ts</code> file and remove the lines marked with the comment <code>// Transloco Config</code></li>
             <li>Remove the <code>src/app/core/transloco</code> directory</li>
             <li>Do a project wide search for <code>&lt;languages&gt;&lt;/languages&gt;</code> and remove all instances</li>
-            <li>Do a project wide search for <code>LanguageModule</code> and remove all imports</li>
-            <li>Remove the <code>src/app/layout/common/language</code> directory</li>
+            <li>Remove the <code>src/app/layout/common/languages</code> directory</li>
             <li>Finally navigate to the <code>package.json</code> file, remove the <strong>"&#64;ngneat/transloco"</strong> from dependencies list and run <code>npm install</code> command</li>
         </ol>
 
diff --git a/src/app/modules/admin/docs/guides/customization/splash-screen/splash-screen.html b/src/app/modules/admin/docs/guides/customization/splash-screen/splash-screen.html
index d89e1926..35af4fb4 100644
--- a/src/app/modules/admin/docs/guides/customization/splash-screen/splash-screen.html
+++ b/src/app/modules/admin/docs/guides/customization/splash-screen/splash-screen.html
@@ -63,7 +63,7 @@
             This element is not an actual Angular component, it's just a simple wrapper to hold everything you may want to show on the splash screen.
         </p>
         <p>
-            Splash screen styles are located in <code>src/assets/styles/splash-screen.css</code> file.
+            Splash screen styles are located in <code>public/styles/splash-screen.css</code> file.
         </p>
         <p>
             You can change the styles to modify the look of the splash screen and put anything you want into the <code>fuse-splash-screen</code> element to show on the
@@ -88,7 +88,7 @@
 
         <!-- Splash screen styles -->
         <link
-              href="assets/styles/splash-screen.css"
+              href="styles/splash-screen.css"
               rel="stylesheet">
 
         ...
@@ -96,7 +96,7 @@
         <!-- Splash screen -->
         <fuse-splash-screen>
             <img
-                src="assets/images/logo/logo.svg"
+                src="images/logo/logo.svg"
                 alt="Fuse logo">
             <div class="spinner">
                 <div class="bounce1"></div>
diff --git a/src/app/modules/admin/docs/guides/customization/theme-layouts/theme-layouts.html b/src/app/modules/admin/docs/guides/customization/theme-layouts/theme-layouts.html
index 8c77dadb..a8038ba0 100644
--- a/src/app/modules/admin/docs/guides/customization/theme-layouts/theme-layouts.html
+++ b/src/app/modules/admin/docs/guides/customization/theme-layouts/theme-layouts.html
@@ -44,8 +44,7 @@
         </p>
         <p>
             By default, layouts are applied automatically via the <code>LayoutComponent</code>. The default layout is set by the <code>app.config.ts</code> file from
-            <strong>app/core/config/</strong> directory. This configuration file is supplied as the default configuration to the <code>FuseConfigService</code> which is a custom
-            made configuration service to store, write and read application wide configurations.
+            <strong>src/app/</strong> directory and it's available via <code>FuseConfigService</code>.
         </p>
         <fuse-alert
             [appearance]="'border'"
diff --git a/src/app/modules/admin/docs/guides/customization/theming/theming.html b/src/app/modules/admin/docs/guides/customization/theming/theming.html
index bf10364d..12e00eeb 100644
--- a/src/app/modules/admin/docs/guides/customization/theming/theming.html
+++ b/src/app/modules/admin/docs/guides/customization/theming/theming.html
@@ -334,7 +334,7 @@
         <h2>Setting the default theme</h2>
         <p>
             By default, the "default" theme will be used as the default theme for your application. If for some reason, you want to have more than
-            one themes and choose something other than the "default", you can do so by setting the default theme via <code>app/core/config/app.config.ts</code> file.
+            one themes and choose something other than the "default", you can do so by setting the default theme via <code>src/app.config.ts</code> file.
             You can also change the theme runtime using the <code>FuseConfigService</code>.
         </p>
 
@@ -344,7 +344,7 @@
             change to a "dark" mode without losing your theme or setting up a separate "dark" theme.
         </p>
         <p>
-            You can set the default scheme via <code>app/core/config/app.config.ts</code> file. You can also change the scheme runtime using the
+            You can set the default scheme via <code>src/app.config.ts</code> file. You can also change the scheme runtime using the
             <code>FuseConfigService</code>.
         </p>
         <p>
diff --git a/src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.html b/src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.html
index 25a50eae..c106f713 100644
--- a/src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.html
+++ b/src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.html
@@ -98,7 +98,12 @@
             </mat-tree>
         </div>
 
-        <h2>&#64;fuse/</h2>
+        <h2>/public</h2>
+        <p>
+            Default folder for static assets like images, fonts, static styles and etc.
+        </p>
+
+        <h2>/src/&#64;fuse/</h2>
         <p>
             This is the core directory of the Fuse. It includes components, directives, services, pipes, custom validators, animations, base styles and much more.
         </p>
@@ -107,7 +112,7 @@
             directory and its content will make the updating process complex and time consuming.
         </p>
 
-        <h2>app/</h2>
+        <h2>src/app/</h2>
         <p>
             This directory contains all application related codes. This is where you put your code.
         </p>
@@ -158,7 +163,7 @@
             </mat-tree>
         </div>
 
-        <h3>app/core/</h3>
+        <h3>src/app/core/</h3>
         <p>
             This directory is designed to contain your application's core; Singleton services, default configurations, default states and likes. It's
             <strong>NOT</strong> recommended to put any components, directives, pipes or simply anything has a template or related to templates in here.
@@ -191,7 +196,7 @@
         </ul>
         <p>and etc...</p>
 
-        <h3>app/mock-api/</h3>
+        <h3>src/app/mock-api/</h3>
         <p>
             This directory is designed to contain data services for custom made MockAPI library. Detailed information about this directory and the MockAPI library can be found
             in the
@@ -199,7 +204,7 @@
             section of this documentation.
         </p>
 
-        <h3>app/layout/</h3>
+        <h3>src/app/layout/</h3>
         <p>
             This directory designed to contain everything related to the layout of your app. By default, Fuse provides variety of different layout options for you to use.
         </p>
@@ -224,7 +229,7 @@
             layouts, you can put them inside the <strong>common</strong> folder.
         </p>
 
-        <h3>app/modules/</h3>
+        <h3>src/app/modules/</h3>
         <p>
             This directory is designed to contain your application's feature modules.
         </p>
@@ -236,12 +241,7 @@
             If you use SSR (Server Side Rendering) you can even include your <strong>landing</strong> page as one of the modules and keep everything in a single app.
         </p>
 
-        <h2>assets/</h2>
-        <p>
-            Default Angular assets folder.
-        </p>
-
-        <h2>styles/</h2>
+        <h2>src/styles/</h2>
         <p>
             This folder contains 4 different scss files:
         </p>
diff --git a/src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.ts b/src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.ts
index 021647ed..e10f81d0 100644
--- a/src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.ts
+++ b/src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.ts
@@ -110,14 +110,27 @@ export class DirectoryStructureComponent implements OnInit
                     {name: 'app.component.html'},
                     {name: 'app.component.scss'},
                     {name: 'app.component.ts'},
+                    {name: 'app.config.ts'},
                     {name: 'app.resolvers.ts'},
-                    {name: 'app.routing.ts'},
+                    {name: 'app.routes.ts'},
                 ],
             },
         ];
 
         // General dir
         this.generalDir = [
+            {
+                name    : 'public',
+                children: [
+                    {name: 'fonts/'},
+                    {name: 'i18n/'},
+                    {name: 'icons/'},
+                    {name: 'images/'},
+                    {name: 'styles/'},
+                    {name: 'favicon-16x16.png'},
+                    {name: 'favicon-32x32.png'},
+                ],
+            },
             {
                 name    : 'src/',
                 children: [
@@ -139,16 +152,6 @@ export class DirectoryStructureComponent implements OnInit
                         ],
                     },
                     this.appDir[0],
-                    {
-                        name    : 'assets/',
-                        children: [
-                            {name: 'fonts/'},
-                            {name: 'i18n/'},
-                            {name: 'icons/'},
-                            {name: 'images/'},
-                            {name: 'styles/'},
-                        ],
-                    },
                     {
                         name    : 'styles/',
                         children: [
@@ -157,8 +160,6 @@ export class DirectoryStructureComponent implements OnInit
                             {name: 'vendors.scss'},
                         ],
                     },
-                    {name: 'favicon-16x16.png'},
-                    {name: 'favicon-32x32.png'},
                     {name: 'index.html'},
                     {name: 'main.ts'},
                 ],
@@ -205,9 +206,9 @@ export class DirectoryStructureComponent implements OnInit
             }
         });
 
-        // Expand the first item
+        // Expand the tree nodes
         this.appTree.treeControl.expand(this.appTree.treeControl.dataNodes[0]);
-        this.generalTree.treeControl.expand(this.generalTree.treeControl.dataNodes[0]);
+        this.generalTree.treeControl.expand(this.generalTree.treeControl.dataNodes[8]);
     }
 
     // -----------------------------------------------------------------------------------------------------
diff --git a/src/app/modules/admin/ui/fuse-components/services/config/config.component.html b/src/app/modules/admin/ui/fuse-components/services/config/config.component.html
index bb8aaf29..2a3a459b 100644
--- a/src/app/modules/admin/ui/fuse-components/services/config/config.component.html
+++ b/src/app/modules/admin/ui/fuse-components/services/config/config.component.html
@@ -52,100 +52,55 @@
 
         <h2>Default configuration</h2>
         <p>
-            By default, the application wide configuration is stored in <code>src/app/core/config/app.config.ts</code> file and it includes the <strong>layout style</strong> as
+            By default, the application wide configuration is stored in <code>src/app.config.ts</code> file and it includes the <strong>layout style</strong> as
             well as the <strong>color theme</strong> configurations:
         </p>
         <!-- @formatter:off -->
         <textarea fuse-highlight
                   lang="typescript">
-            import { Layout } from 'app/layout/layout.types';
-
-            // Types
-            export type Scheme = 'auto' | 'dark' | 'light';
-            export type Screens = { [key: string]: string };
-            export type Theme = 'theme-default' | string;
-            export type Themes = { id: string; name: string }[];
-
-            /**
-             * AppConfig interface. Update this interface to strictly type your config
-             * object.
-             */
-            export interface AppConfig
-            {
-                layout: Layout;
-                scheme: Scheme;
-                screens: Screens;
-                theme: Theme;
-                themes: Themes;
-            }
-
-            /**
-             * Default configuration for the entire application. This object is used by
-             * FuseConfigService to set the default configuration.
-             *
-             * If you need to store global configuration for your app, you can use this
-             * object to set the defaults. To access, update and reset the config, use
-             * FuseConfigService and its methods.
-             *
-             * "Screens" are carried over to the BreakpointObserver for accessing them within
-             * components, and they are required.
-             *
-             * "Themes" are required for Tailwind to generate themes.
-             */
-            export const appConfig: AppConfig = {
-                layout : 'classy',
-                scheme : 'light',
-                screens: {
-                    sm: '600px',
-                    md: '960px',
-                    lg: '1280px',
-                    xl: '1440px'
-                },
-                theme  : 'theme-default',
-                themes : [
-                    {
+            provideFuse({
+                ...
+                fuse   : {
+                    layout : 'classy',
+                    scheme : 'light',
+                    screens: {
+                        sm: '600px',
+                        md: '960px',
+                        lg: '1280px',
+                        xl: '1440px',
+                    },
+                    theme  : 'theme-default',
+                    themes : [{
                         id  : 'theme-default',
-                        name: 'Default'
+                        name: 'Default',
                     },
                     {
                         id  : 'theme-brand',
-                        name: 'Brand'
+                        name: 'Brand',
                     },
                     {
                         id  : 'theme-teal',
-                        name: 'Teal'
+                        name: 'Teal',
                     },
                     {
                         id  : 'theme-rose',
-                        name: 'Rose'
+                        name: 'Rose',
                     },
                     {
                         id  : 'theme-purple',
-                        name: 'Purple'
+                        name: 'Purple',
                     },
                     {
                         id  : 'theme-amber',
-                        name: 'Amber'
-                    }
-                ]
-            };
+                        name: 'Amber',
+                    }],
+                },
+            }),
         </textarea>
         <!-- @formatter:on -->
         <p>
-            The default configuration is supplied to the <strong>FuseConfigService</strong> using the <code>FuseConfigModule.forRoot()</code> in <strong>AppModule</strong>:
+            The default configuration is supplied to the <strong>FuseConfigService</strong> automatically:
         </p>
-        <!-- @formatter:off -->
-        <textarea fuse-highlight
-                  lang="typescript">
-            import { appConfig } from 'app/core/config/app.config';
-
-            ...
-
-            imports: [
-                FuseConfigModule.forRoot(appConfig)
-            ...
-        </textarea>
-        <!-- @formatter:on -->
 
         <h2>Methods</h2>
         <p>