diff --git a/docs/src/components/RenderSettings/index.tsx b/docs/src/components/RenderSettings/index.tsx
index f79140788..3862c1eb4 100644
--- a/docs/src/components/RenderSettings/index.tsx
+++ b/docs/src/components/RenderSettings/index.tsx
@@ -3,6 +3,18 @@ import get from 'lodash/get';
 import pkgJson from '../../../../packages/extension/package.json';
 import Setting from './Setting';
 import styled from 'styled-components';
+import components from '../../components';
+
+function getQueryParams() {
+  const queryString = window.location.search;
+  var query: any = {};
+  var pairs = (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&');
+  for (var i = 0; i < pairs.length; i++) {
+      var pair = pairs[i].split('=');
+      query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
+  }
+  return query;
+}
 
 const SearchIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>;
 
@@ -34,7 +46,9 @@ const Search = styled.input`
 `
 
 interface Props {
-  path: string;
+  path?: string;
+  disableSearch?: boolean;
+  title?: string;
 }
 
 class RenderSettings extends React.Component<Props> {
@@ -45,7 +59,7 @@ class RenderSettings extends React.Component<Props> {
 
   constructor(props: any) {
     super(props);
-    const jsonProps = get(pkgJson, props.path);
+    const jsonProps = get(pkgJson, `contributes.configuration.properties${props.path || ''}`);
     if (jsonProps) {
       this.state = {
         search: '',
@@ -56,6 +70,23 @@ class RenderSettings extends React.Component<Props> {
     }
   }
   inputRef = React.createRef<HTMLInputElement>();
+
+  renderSearchContainer = () => this.props.disableSearch ? null : (
+    <SearchContainer onClick={() => this.inputRef && this.inputRef.current && this.inputRef.current.focus()}>
+      <SearchIcon />
+      <Search placeholder="Type to search..." onChange={e => this.setState({ search: e.target.value || '' })} value={this.state.search} ref={this.inputRef}/>
+    </SearchContainer>
+  );
+
+  renderTitle = () => this.props.title ? (
+    <components.h2 id={this.props.title.toLowerCase().replace(/\s/g, '-')}>{this.props.title}</components.h2>
+  ) : null;
+
+  componentDidMount() {
+    const { q = '' } = getQueryParams();
+    q && this.setState({ search: q });
+  }
+
   render() {
     const search = this.state.search.toLowerCase();
     let propsList = this.state.jsonProps;
@@ -65,10 +96,8 @@ class RenderSettings extends React.Component<Props> {
 
     return (
       <>
-        <SearchContainer onClick={() => this.inputRef && this.inputRef.current && this.inputRef.current.focus()}>
-          <SearchIcon />
-          <Search placeholder="Type to search..." onChange={e => this.setState({ search: e.target.value || '' })} ref={this.inputRef}/>
-        </SearchContainer>
+        {this.renderTitle()}
+        {this.renderSearchContainer()}
         {propsList.map(prop => {
           return <Setting {...prop} key={prop.name} />;
         })}
diff --git a/docs/src/components/index.ts b/docs/src/components/index.ts
index 4741d812d..b971d9ea9 100644
--- a/docs/src/components/index.ts
+++ b/docs/src/components/index.ts
@@ -1,2 +1,9 @@
-export { default as editor } from './Editor'
-export { default as h3 } from './h3'
\ No newline at end of file
+import editor from './Editor'
+import h3 from './h3'
+
+import { components } from 'docz-theme-default';
+
+components.editor = editor;
+(<any>components).h3 = h3;
+
+export default components;
\ No newline at end of file
diff --git a/docs/src/docs-theme.js b/docs/src/docs-theme.js
index 1ccfbe42a..15fd52bba 100644
--- a/docs/src/docs-theme.js
+++ b/docs/src/docs-theme.js
@@ -1,13 +1,27 @@
-// src/theme.js
 import React from 'react';
-import { components } from 'docz-theme-default';
-import * as customComponents from './components';
+import './components';
 
-Object.keys(customComponents).forEach(key => {
-  components[key] = customComponents[key]
-})
+let loaded = null;
+const checkLocationHash = () => {
+  if (loaded) return;
+  loaded = true;
+  const prevOnLoad = window.onload;
+  window.onload = (...args) => {
+    prevOnLoad && prevOnLoad(...args);
+    setTimeout(() => {
+      try {
+        if (!window.location.hash) return;
+        const el = document.getElementById(window.location.hash.substr(1));
+        el.scrollIntoView({
+          behavior: 'smooth',
+        });
+      } catch (error) {}
+    }, 1000);
+  }
+}
 
 const ThemeWrapper = ({ children }) => {
+  checkLocationHash();
   return <>{children}</>;
 };
 
diff --git a/docs/src/pages/dependency-manager.mdx b/docs/src/pages/dependency-manager.mdx
index 6d5bab927..8c5d07fd8 100644
--- a/docs/src/pages/dependency-manager.mdx
+++ b/docs/src/pages/dependency-manager.mdx
@@ -3,6 +3,7 @@ name: Dependency Manager
 menu: Settings
 route: /settings/dependency-manager
 ---
+import RenderSettings from '../components/RenderSettings/index.tsx'
 
 # Dependency Manager
 
@@ -10,7 +11,9 @@ SQLTools can automaticaly install dependencies required by its drivers. We use n
 
 Below you can see configurations you can do to use your favorite package manager.
 
-## NPM
+<RenderSettings path="['sqltools.dependencyManager'].properties" disableSearch title="sqltools.dependencyManager options"/>
+
+## NPM Example
 
 By default SQLTools relies on `npm` to install dependencies. Here is the an example of configuration to make SQLTools use `npm`:
 
@@ -20,19 +23,21 @@ By default SQLTools relies on `npm` to install dependencies. Here is the an exam
   "sqltools.dependencyManager": {
     "packageManager": "npm",
     "installArgs": ["install"],
-    "runScriptArgs": ["run"]
+    "runScriptArgs": ["run"],
+    "autoAccept": false
   },
   ...
   // advanced configuration
   "sqltools.dependencyManager": {
     "packageManager": "/usr/bin/npm",
     "installArgs": ["--registry=https://registry.npmjs.org/", "install"], // this will be executed as `npm --registry=https://registry.npmjs.org/ install <package_name>
-    "runScriptArgs": ["run"]
+    "runScriptArgs": ["run"],
+    "autoAccept": true
   },
 }
 ```
 
-## Yarn
+## Yarn Example
 
 You can easily setup SQLTools to use `yarn` to install dependencies. Here is the an example of configuration:
 
@@ -42,14 +47,16 @@ You can easily setup SQLTools to use `yarn` to install dependencies. Here is the
   "sqltools.dependencyManager": {
     "packageManager": "yarn",
     "installArgs": ["add"],
-    "runScriptArgs": ["run"]
+    "runScriptArgs": ["run"],
+    "autoAccept": false
   },
   ...
   // advanced configuration
   "sqltools.dependencyManager": {
     "packageManager": "/usr/bin/yarn",
     "installArgs": ["--registry", "https://registry.npmjs.org/", "add"], // this will be executed as `yarn --registry https://registry.npmjs.org/ add <package_name>
-    "runScriptArgs": ["run"]
+    "runScriptArgs": ["run"],
+    "autoAccept": false
   },
 }
 ```
@@ -66,14 +73,16 @@ Let's say you want to use `CNPM` as package manager for SQLTools, you can easily
   "sqltools.dependencyManager": {
     "packageManager": "/usr/bin/cnpm",
     "installArgs": ["--registry=https://registry.npm.taobao.org", "install"],
-    "runScriptArgs": ["run"]
+    "runScriptArgs": ["run"],
+    "autoAccept": false
   },
   ...
   // or with taobao mirror
   "sqltools.dependencyManager": {
     "packageManager": "/usr/bin/cnpm",
     "installArgs": ["--registry=https://registry.npm.taobao.org", "install"],
-    "runScriptArgs": ["run"]
+    "runScriptArgs": ["run"],
+    "autoAccept": false
   },
 }
 ```
diff --git a/docs/src/pages/settings.mdx b/docs/src/pages/settings.mdx
index d2e0f8061..d1abf8de1 100644
--- a/docs/src/pages/settings.mdx
+++ b/docs/src/pages/settings.mdx
@@ -8,4 +8,4 @@ import RenderSettings from '../components/RenderSettings/index.tsx'
 
 # Settings
 
-<RenderSettings path="contributes.configuration.properties" />
\ No newline at end of file
+<RenderSettings />
\ No newline at end of file