diff --git a/config.toml b/config.toml
index ecf263a9..c8eec1f1 100644
--- a/config.toml
+++ b/config.toml
@@ -21,6 +21,7 @@ pygmentscodefencesguesssyntax = true
 	series = "series"
 
 [params]
+    
 	# Use homepage.md instead of a list of posts
 	homepage = false
 
@@ -77,3 +78,18 @@ name = "分类"
 url = "/categories"
 weight = 5
 
+# Social Menu
+[[params.social]]
+name = "Github"
+icon = "fab fa-github"
+url = "https://github.com/dataCobra/hugo-vitae"
+
+#[[params.social]]
+#name = "Email"
+#icon = "fas fa-envelope"
+#cmd = "mailto:example@example.com"
+
+[[params.social]]
+name = "RSS"
+icon = "fas fa-rss"
+url = "/index.xml"
diff --git a/themes/hugo-vitae/layouts/partials/footer.html b/themes/hugo-vitae/layouts/partials/footer.html
index be85503a..a6c0782f 100644
--- a/themes/hugo-vitae/layouts/partials/footer.html
+++ b/themes/hugo-vitae/layouts/partials/footer.html
@@ -11,3 +11,14 @@
 {{- end }}
 {{- end -}}
 <script src="{{ relURL "js/dark-mode.js" }}"></script>
+<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
+<script type="text/javascript">
+  docsearch({
+    appId: "L7P2JYQ2KE",
+    apiKey: "6d20c4a2c1df6c447fe354de73fe1ed9",
+    indexName: "alc",
+    insights: true, // Optional, automatically send insights when user interacts with search results
+    container: '#docsearch',
+    debug: false // Set debug to true if you want to inspect the modal
+  });
+</script>
diff --git a/themes/hugo-vitae/layouts/partials/head.html b/themes/hugo-vitae/layouts/partials/head.html
index 0694f664..5a087348 100644
--- a/themes/hugo-vitae/layouts/partials/head.html
+++ b/themes/hugo-vitae/layouts/partials/head.html
@@ -24,6 +24,8 @@
 <link rel="stylesheet" type="text/css" media="screen" href="{{ relURL "/css/normalize.css" }}" />
 <link rel="stylesheet" type="text/css" media="screen" href="{{ relURL "/css/main.css" }}" />
 <link rel="stylesheet" type="text/css" media="screen" href="{{ relURL "/css/all.css" }}" />
+<!--Add the CSS of DocSearch-->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"/></pre></li>
 {{- if or .Params.math .Site.Params.math -}}
 <link rel="stylesheet" href="{{ relURL "/css/katex.css" }}" crossorigin="anonymous">
 <script defer src="{{ relURL "js/katex.js" }}"  integrity="sha384-PFWG8XW41D5NzhNv5FegM1CUkw9nNLdWug8DuwnUoNEVop9n5frjcnbtsZtxTNjw" crossorigin="anonymous"></script>
diff --git a/themes/hugo-vitae/layouts/partials/header.html b/themes/hugo-vitae/layouts/partials/header.html
index a36c3706..e0b682c6 100644
--- a/themes/hugo-vitae/layouts/partials/header.html
+++ b/themes/hugo-vitae/layouts/partials/header.html
@@ -37,9 +37,11 @@ <h2 id="titleonly"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h2>
 {{- end }}
 <li><a><i title="Switch Dark Mode" class="dark-mode icons fas fa-moon"></i></a></li>
 </ul></nav>
+<div id="docsearch"></div>
 </div>
 {{- end }}
 </div>
+
 {{- if isset .Site.Menus "main" }}
 <div id="mainmenu">
 <nav>
@@ -48,7 +50,9 @@ <h2 id="titleonly"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h2>
 <li><a href="{{ .URL }}">{{ .Name }}</a></li>
 {{- end }}
 </ul>
+
 </nav>
+
 </div>
 {{- end }}
 </header>