diff --git a/package.json b/package.json
index baa866e85..dab9d8268 100644
--- a/package.json
+++ b/package.json
@@ -92,6 +92,7 @@
     "react-dom": "15.6.1",
     "react-hot-loader": "3.0.0-beta.7",
     "react-router-dom": "4.1.1",
+    "react-syntax-highlighter": "5.6.2",
     "rimraf": "2.6.1",
     "sass-loader": "6.0.6",
     "source-map-loader": "0.2.1",
diff --git a/src/webui/src/components/Help/help.scss b/src/webui/src/components/Help/help.scss
new file mode 100644
index 000000000..419002376
--- /dev/null
+++ b/src/webui/src/components/Help/help.scss
@@ -0,0 +1,27 @@
+.help {
+
+  .noPkg {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 30px 0;
+    font-size: 20px;
+    color: #9f9f9f;
+
+    .noPkgTitle {
+      margin: 1em 0;
+      padding: 0;
+      font-size: 24px;
+    }
+
+    p {
+      line-height: 1.5;
+      margin: 0 auto;
+      font-size: 14px;
+    }
+
+    code {
+      font-style: italic;
+    }
+  }
+}
diff --git a/src/webui/src/components/Help/index.js b/src/webui/src/components/Help/index.js
new file mode 100644
index 000000000..f432c45c4
--- /dev/null
+++ b/src/webui/src/components/Help/index.js
@@ -0,0 +1,37 @@
+
+import React from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import {sunburst} from 'react-syntax-highlighter/dist/styles';
+
+import classes from './help.scss';
+
+const Help = () => {
+    return (
+      <div className={classes.help}>
+        <li className={classes.noPkg}>
+          <h1 className={classes.noPkgTitle}>
+            No Package Published Yet
+          </h1>
+          <p>
+            <div>
+              To publish your first package just:
+            </div>
+            <br/>
+            <strong>
+              1. Login
+            </strong>
+            <SyntaxHighlighter language='javascript' style={sunburst}>
+              {`npm adduser --registry  ${location.origin}`}
+            </SyntaxHighlighter>
+            <strong>2. Publish</strong>
+            <SyntaxHighlighter language='javascript' style={sunburst}>
+              {`npm publish --registry ${location.origin}`}
+            </SyntaxHighlighter>
+            <strong>3. Refresh this page!</strong>
+          </p>
+        </li>
+      </div>
+    );
+};
+
+export default Help;
diff --git a/src/webui/src/components/PackageList/index.js b/src/webui/src/components/PackageList/index.js
index 73fb7f65f..4fc75dabd 100644
--- a/src/webui/src/components/PackageList/index.js
+++ b/src/webui/src/components/PackageList/index.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import classes from './packageList.scss';
-
 import Package from '../Package';
+import Help from '../Help';
+
+import classes from './packageList.scss';
 
 export default class PackageList extends React.Component {
 
@@ -19,24 +20,24 @@ export default class PackageList extends React.Component {
 
   render() {
     return (
+      <div>
         <div className={classes.pkgContainer}>
-          {
-            this.props.packages.length ?
-                this.renderList():
-                <li className={classes.noPkg}>
-                  <h1 className={classes.noPkgTitle}>No Package Published Yet</h1>
-                  <p>
-                    To publish your first package just:
-                    <br/><br/>
-                    <strong>1. Login</strong><br/>
-                    <code>npm adduser --registry {location.origin}</code><br/>
-                    <strong>2. Publish</strong><br/>
-                    <code>npm publish --registry {location.origin}</code><br/>
-                    <strong>3. Done!</strong>
-                  </p>
-                </li>
-          }
+          {this.renderTitle()}
+          {this.props.packages.length ? this.renderList(): <Help/>}
         </div>
+      </div>
     );
   }
+
+  renderTitle() {
+    if (this.isTherePackages() === false) {
+      return;
+    }
+
+    return <h1 className={ classes.listTitle }>Available Packages</h1>;
+  }
+
+  isTherePackages() {
+    return this.props.packages.length > 0;
+  }
 }
diff --git a/src/webui/src/components/PackageList/packageList.scss b/src/webui/src/components/PackageList/packageList.scss
index 9c9bd9339..899403208 100644
--- a/src/webui/src/components/PackageList/packageList.scss
+++ b/src/webui/src/components/PackageList/packageList.scss
@@ -7,28 +7,10 @@
     list-style: none;
   }
 
-  li.noPkg {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 30px 0;
-    font-size: 20px;
-    color: #9f9f9f;
-
-    .noPkgTitle {
-      margin: 0;
-      padding: 0;
-      font-size: 24px;
-    }
-
-    p {
-      line-height: 1.5;
-      margin: 0 auto;
-      font-size: 14px;
-    }
-
-    code {
-      font-style: italic;
-    }
+  .listTitle {
+    font-weight: normal;
+    font-size: 24px;
+    margin-top: 30px;
+    margin-bottom: 0;
   }
 }
diff --git a/src/webui/src/components/Search/index.js b/src/webui/src/components/Search/index.js
new file mode 100644
index 000000000..cf996b999
--- /dev/null
+++ b/src/webui/src/components/Search/index.js
@@ -0,0 +1,22 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import classes from './search.scss';
+
+const Search = (props) => {
+    return (
+      <input
+        type="text"
+        placeholder="Type to search..."
+        className={ classes.searchBox }
+        onChange={ props.handleSearchInput }
+      />
+    );
+};
+
+Search.propTypes = {
+  handleSearchInput: PropTypes.func.isRequired
+};
+
+export default Search;
diff --git a/src/webui/src/components/Search/search.scss b/src/webui/src/components/Search/search.scss
new file mode 100644
index 000000000..10711f3eb
--- /dev/null
+++ b/src/webui/src/components/Search/search.scss
@@ -0,0 +1,14 @@
+@import '../../styles/variable';
+
+.searchBox {
+  width: 100%;
+  font-size: 18px;
+  line-height: 30px;
+  border: none;
+  border-bottom: 1px solid lightgrey;
+  outline: none;
+
+  &:focus {
+    border-bottom: 1px solid grey;
+  }
+}
diff --git a/src/webui/src/modules/home/home.scss b/src/webui/src/modules/home/home.scss
index 46b81fa10..11f0bc216 100644
--- a/src/webui/src/modules/home/home.scss
+++ b/src/webui/src/modules/home/home.scss
@@ -1,21 +1 @@
 @import '../../styles/variable';
-
-.searchBox {
-  width: 100%;
-  font-size: 18px;
-  line-height: 30px;
-  border: none;
-  border-bottom: 1px solid lightgrey;
-  outline: none;
-
-  &:focus {
-    border-bottom: 1px solid grey;
-  }
-}
-
-.listTitle {
-  font-weight: normal;
-  font-size: 24px;
-  margin-top: 30px;
-  margin-bottom: 0;
-}
diff --git a/src/webui/src/modules/home/index.js b/src/webui/src/modules/home/index.js
index ee9887803..37f282472 100644
--- a/src/webui/src/modules/home/index.js
+++ b/src/webui/src/modules/home/index.js
@@ -1,10 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Loading, MessageBox} from 'element-react';
+import {isEmpty} from 'lodash';
 
 import API from '../../../utils/api';
 
 import PackageList from '../../components/PackageList';
+import Search from '../../components/Search';
 
 import classes from './home.scss';
 
@@ -89,32 +91,32 @@ export default class Home extends React.Component {
     });
   }
 
-  renderLoading() {
-    return (
-        <Loading text="Loading..." />
-    );
-  }
-
-  renderPackageList() {
-    return (
-        <div>
-          <h1 className={ classes.listTitle }>Available Packages</h1>
-          <PackageList packages={this.state.packages} />
-        </div>
-    );
+  isTherePackages() {
+    return isEmpty(this.state.packages);
   }
 
   render() {
     return (
         <div className={ classes.container }>
-          <input
-              type="text"
-              placeholder="Type to search..."
-              className={ classes.searchBox }
-              onChange={ this.handleSearchInput }
-          />
+          { this.renderSearchBar() }
           { this.state.loading ? this.renderLoading() : this.renderPackageList() }
         </div>
     );
   }
+
+  renderSearchBar() {
+    if (this.isTherePackages()) {
+      return;
+    }
+    return <Search handleSearchInput={ this.handleSearchInput } />;
+  }
+
+  renderLoading() {
+    return <Loading text="Loading..." />;
+  }
+
+  renderPackageList() {
+    return <PackageList packages={this.state.packages} />;
+  }
+
 }
diff --git a/yarn.lock b/yarn.lock
index a5bac9aba..2649959db 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1156,11 +1156,11 @@ browserslist@^1.1.1, browserslist@^1.1.3, browserslist@^1.3.6, browserslist@^1.5
     electron-to-chromium "^1.2.7"
 
 browserslist@^2.1.2:
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/browserslist/-/browserslist-2.2.0.tgz#5e35ec993e467c6464b8cb708447386891de9f50"
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/browserslist/-/browserslist-2.2.1.tgz#709048c57bf3bf9b382105c396a737ad525d948e"
   dependencies:
-    caniuse-lite "^1.0.30000701"
-    electron-to-chromium "^1.3.15"
+    caniuse-lite "^1.0.30000704"
+    electron-to-chromium "^1.3.16"
 
 buffer-equal-constant-time@1.0.1:
   version "1.0.1"
@@ -1265,12 +1265,12 @@ caniuse-api@^1.5.2:
     lodash.uniq "^4.5.0"
 
 caniuse-db@^1.0.30000187, caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30000702"
-  resolved "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000702.tgz#a60cd30f3ef44ae7b5ed12e9d9b70d4bff6352cb"
+  version "1.0.30000704"
+  resolved "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000704.tgz#8c5aa6fed8058e65c70f2c1f5d63f7088650705c"
 
-caniuse-lite@^1.0.30000701:
-  version "1.0.30000702"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000702.tgz#bd66e40345528fe0c001917d1d3f55454df634f1"
+caniuse-lite@^1.0.30000704:
+  version "1.0.30000704"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000704.tgz#adb6ea01134515663682db93abab291d4c02946b"
 
 caseless@~0.11.0:
   version "0.11.0"
@@ -1608,8 +1608,8 @@ cors@^2.8.3:
     vary "^1"
 
 cosmiconfig@^2.1.1:
-  version "2.1.3"
-  resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-2.1.3.tgz#952771eb0dddc1cb3fa2f6fbe51a522e93b3ee0a"
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-2.2.1.tgz#7fbdc6fb47597d5f88175de1df696b66d36e5944"
   dependencies:
     is-directory "^0.3.1"
     js-yaml "^3.4.3"
@@ -1671,13 +1671,21 @@ cross-spawn@^3.0.0:
     lru-cache "^4.0.1"
     which "^1.2.9"
 
-cross-spawn@^4, cross-spawn@^4.0.0:
+cross-spawn@^4:
   version "4.0.2"
   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
   dependencies:
     lru-cache "^4.0.1"
     which "^1.2.9"
 
+cross-spawn@^5.0.1:
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
+  dependencies:
+    lru-cache "^4.0.1"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
 cryptiles@2.x.x:
   version "2.0.5"
   resolved "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
@@ -2088,7 +2096,7 @@ ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
-electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.15:
+electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.16:
   version "1.3.16"
   resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.16.tgz#d0e026735754770901ae301a21664cba45d92f7d"
 
@@ -2414,12 +2422,12 @@ evp_bytestokey@^1.0.0:
   dependencies:
     create-hash "^1.1.1"
 
-execa@^0.5.0:
-  version "0.5.1"
-  resolved "https://registry.npmjs.org/execa/-/execa-0.5.1.tgz#de3fb85cb8d6e91c85bcbceb164581785cb57b36"
+execa@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
   dependencies:
-    cross-spawn "^4.0.0"
-    get-stream "^2.2.0"
+    cross-spawn "^5.0.1"
+    get-stream "^3.0.0"
     is-stream "^1.1.0"
     npm-run-path "^2.0.0"
     p-finally "^1.0.0"
@@ -2781,12 +2789,9 @@ get-stdin@^5.0.0:
   version "5.0.1"
   resolved "https://registry.npmjs.org/get-stdin/-/get-stdin-5.0.1.tgz#122e161591e21ff4c52530305693f20e6393a398"
 
-get-stream@^2.2.0:
-  version "2.3.1"
-  resolved "https://registry.npmjs.org/get-stream/-/get-stream-2.3.1.tgz#5f38f93f346009666ee0150a054167f91bdd95de"
-  dependencies:
-    object-assign "^4.0.1"
-    pinkie-promise "^2.0.0"
+get-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
 
 getpass@^0.1.1:
   version "0.1.7"
@@ -2983,6 +2988,14 @@ he@1.1.x:
   version "1.1.1"
   resolved "https://registry.npmjs.org/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
 
+highlight.js@~9.12.0:
+  version "9.12.0"
+  resolved "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"
+
+highlight.js@~9.8.0:
+  version "9.8.0"
+  resolved "https://registry.npmjs.org/highlight.js/-/highlight.js-9.8.0.tgz#38eeef40cd45eaddbec8c9e5238fb7a783a3b685"
+
 history@^4.5.1, history@^4.6.0:
   version "4.6.3"
   resolved "https://registry.npmjs.org/history/-/history-4.6.3.tgz#6d723a8712c581d6bef37e8c26f4aedc6eb86967"
@@ -3549,8 +3562,8 @@ jsesc@~0.5.0:
   resolved "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
 
 json-loader@^0.5.4:
-  version "0.5.4"
-  resolved "https://registry.npmjs.org/json-loader/-/json-loader-0.5.4.tgz#8baa1365a632f58a3c46d20175fc6002c96e37de"
+  version "0.5.5"
+  resolved "https://registry.npmjs.org/json-loader/-/json-loader-0.5.5.tgz#1147a469b24f4641520614312fea0c07af176974"
 
 json-schema-traverse@^0.3.0:
   version "0.3.1"
@@ -3885,6 +3898,12 @@ lower-case@^1.1.1:
   version "1.1.4"
   resolved "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
 
+lowlight@^1.5.0:
+  version "1.9.0"
+  resolved "https://registry.npmjs.org/lowlight/-/lowlight-1.9.0.tgz#6eccfb20f9125a56a82032083967998b5ba19905"
+  dependencies:
+    highlight.js "~9.12.0"
+
 lru-cache@^4.0.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55"
@@ -4474,10 +4493,10 @@ os-locale@^1.4.0:
     lcid "^1.0.0"
 
 os-locale@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/os-locale/-/os-locale-2.0.0.tgz#15918ded510522b81ee7ae5a309d54f639fc39a4"
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/os-locale/-/os-locale-2.1.0.tgz#42bc2900a6b5b8bd17376c8e882b65afccf24bf2"
   dependencies:
-    execa "^0.5.0"
+    execa "^0.7.0"
     lcid "^1.0.0"
     mem "^1.1.0"
 
@@ -4961,8 +4980,8 @@ postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.
     supports-color "^3.2.3"
 
 postcss@^6.0.1:
-  version "6.0.7"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-6.0.7.tgz#6a097477c46d13d0560a817d69abc0bae549d0a0"
+  version "6.0.8"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-6.0.8.tgz#89067a9ce8b11f8a84cbc5117efc30419a0857b3"
   dependencies:
     chalk "^2.0.1"
     source-map "^0.5.6"
@@ -5179,6 +5198,14 @@ react-router@^4.1.1:
     prop-types "^15.5.4"
     warning "^3.0.0"
 
+react-syntax-highlighter@5.6.2:
+  version "5.6.2"
+  resolved "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-5.6.2.tgz#01f5ad3cc44c40c26b6fb4e00a4bed90f66304c5"
+  dependencies:
+    babel-runtime "^6.18.0"
+    highlight.js "~9.8.0"
+    lowlight "^1.5.0"
+
 react-transition-group@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.0.tgz#b51fc921b0c3835a7ef7c571c79fc82c73e9204f"
@@ -5667,6 +5694,16 @@ shallow-clone@^0.1.2:
     lazy-cache "^0.2.3"
     mixin-object "^2.0.1"
 
+shebang-command@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  dependencies:
+    shebang-regex "^1.0.0"
+
+shebang-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+
 signal-exit@^3.0.0, signal-exit@^3.0.1, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@@ -5752,8 +5789,8 @@ source-map@~0.1.33:
     amdefine ">=0.0.4"
 
 sourcemapped-stacktrace@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.npmjs.org/sourcemapped-stacktrace/-/sourcemapped-stacktrace-1.1.6.tgz#112d8749c942c3cd3b630dfac9514577b86a3a51"
+  version "1.1.7"
+  resolved "https://registry.npmjs.org/sourcemapped-stacktrace/-/sourcemapped-stacktrace-1.1.7.tgz#17e05374ff78b71a9d89ad3975a49f22725ba935"
   dependencies:
     source-map "0.5.6"
 
@@ -6087,8 +6124,8 @@ table@^4.0.1:
     string-width "^2.0.0"
 
 tapable@^0.2.5, tapable@~0.2.5:
-  version "0.2.6"
-  resolved "https://registry.npmjs.org/tapable/-/tapable-0.2.6.tgz#206be8e188860b514425375e6f1ae89bfb01fd8d"
+  version "0.2.7"
+  resolved "https://registry.npmjs.org/tapable/-/tapable-0.2.7.tgz#e46c0daacbb2b8a98b9b0cea0f4052105817ed5c"
 
 tar-pack@^3.4.0:
   version "3.4.0"
@@ -6228,8 +6265,8 @@ typedarray@^0.0.6:
   resolved "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
 ua-parser-js@^0.7.9:
-  version "0.7.13"
-  resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.13.tgz#cd9dd2f86493b3f44dbeeef3780fda74c5ee14be"
+  version "0.7.14"
+  resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.14.tgz#110d53fa4c3f326c121292bbeac904d2e03387ca"
 
 uglify-js@3.0.x:
   version "3.0.25"