diff --git a/layout/search/algolia.jsx b/layout/search/algolia.jsx
index 8c7f5d1..2df3599 100644
--- a/layout/search/algolia.jsx
+++ b/layout/search/algolia.jsx
@@ -31,7 +31,8 @@ class Algolia extends Component {
                     <div class="searchbox-header">
                         <div class="searchbox-input-container" id="algolia-input">
                         </div>
-                        <div class="is-flex" id="algolia-poweredby" style="align-items:center;line-height:0"></div>
+                        <div class="is-flex" id="algolia-poweredby"
+                            style="margin:0 .5em 0 1em;align-items:center;line-height:0"></div>
                         <a class="searchbox-close" href="javascript:;">&times;</a>
                     </div>
                     <div class="searchbox-body"></div>
diff --git a/package.json b/package.json
index 4b9fe06..b715227 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "bulma-stylus": "0.8.0",
     "deepmerge": "^4.2.2",
     "hexo": "^4.2.0",
-    "hexo-component-inferno": "^0.1.2",
+    "hexo-component-inferno": "^0.1.3",
     "hexo-log": "^1.0.0",
     "hexo-pagination": "^1.0.0",
     "hexo-renderer-inferno": "^0.1.3",
diff --git a/source/js/algolia.js b/source/js/algolia.js
index fd124c5..f471965 100644
--- a/source/js/algolia.js
+++ b/source/js/algolia.js
@@ -78,6 +78,7 @@ function loadAlgolia(config, translation) { // eslint-disable-line no-unused-var
 
     $(document).on('click', '.navbar-main .search', () => {
         $('.searchbox').toggleClass('show');
+        $('.searchbox-input').focus();
     }).on('click', '.searchbox .searchbox-mask', () => {
         $('.searchbox').removeClass('show');
     }).on('click', '.searchbox-close', () => {