diff --git a/.gitignore b/.gitignore
index d28836632..0b5c3fc19 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,5 +27,5 @@ src/ui_ng/typings/
 **/node_modules
 **/ssl/
 **/proxy.config.json
-
+**/npm*.log
 
diff --git a/docs/developer_guide_i18n.md b/docs/developer_guide_i18n.md
index 9a88ef8cd..0e90a75de 100644
--- a/docs/developer_guide_i18n.md
+++ b/docs/developer_guide_i18n.md
@@ -4,57 +4,55 @@
 
 ### Steps to localize the UI in your language
 
-1. Copy the file `static/resources/js/services/i18n/locale_messages_en-US.js` to a new file in the same directory named `locale_messages_<language>_<locale>.js` .
+1. In the folder `src/ui_ng/src/i18n/lang`, copy json file `en-us-lang.json` to a new file and rename it to `<language>-<locale>-lang.json` .
 
-    The file contains a JSON object named `locale_messages`, which consists of key-value pairs of UI strings:
+    The file contains a JSON object including all the key-value pairs of UI strings:
     ```
-    var local_messages = {
-       'sign_in': 'Sign In',
-       'sign_up': 'Sign Up',
-          ...
-     };
+    {
+        "APP_TITLE": {
+            "VMW_HARBOR": "VMware Harbor",
+            "HARBOR": "Harbor",
+            ...
+        },
+        ...
+    }
     ```  
-    In the file `locale_messages_<language>_<locale>.js`, translate all the values into your language. Do not change any keys.
+    In the file `<language>-<locale>-lang.json`, translate all the values into your language. Do not change any keys.
 
-2. After creating your locale file, you should include it from the HTML page header template.
+2. After creating your language file, you should add it to the language supporting list.
 
-    In the file `views/sections/header-include.htm`, look for a `if` statement which switch langauges based on the current language (`.Lang`) value. Add in a `else if` statement for your language:
+    Locate the file `src/ui_ng/src/app/shared/shared.const.ts`.
+    Append `<language>-<locale>` to the language supporting list:
     ```
-    {{ if eq .Lang "zh-CN" }}
-	   <script src="/static/resources/js/services/i18n/locale_messages_zh-CN.js"></script>
-	{{ else if eq .Lang "en-US"}}
-	   <script src="/static/resources/js/services/i18n/locale_messages_en-US.js"></script>
-    {{ else if eq .Lang "<language>-<locale>"}}
-       <script src="/static/resources/js/services/i18n/locale_messages_<language>-<locale>.js"></script>
-	{{ end }}
+    export const supportedLangs = ['en-us', 'zh-cn', '<language>-<locale>'];
+    ```
+    Define the language display name and append it to the name list:
+    ```
+    export const languageNames = {
+        "en-us": "English",
+        "zh-cn": "中文简体",
+        "<language>-<locale>": "<DISPLAY_NAME>"
+    };
     ```
-3. Add the new language to the `I18nService` module.
 
-    In the file `static/resources/js/services/i18n/services.i18n.js`, append a new key-value item to the `supportLanguages` object. This value will be displayed in the language dropdown list in the UI.
-    ```
-     var supportLanguages = {
-      'en-US': 'English',
-      'zh-CN': '中文',
-      '<language>-<locale>': '<language_name>'
-     };
-    ```
     **NOTE: Don't miss the comma before the new key-value item you've added.**
 
+3. Enable the new language in the view.
 
-4. In the directory `static/i18n/`, copy the file `locale_en-US.ini` to a new file named  `locale_<language>-<locale>.ini`. In this file, translate all the values on the right hand side into your language. Do not change any keys.
-
-5. Add the new language to the `app.conf` file.
-    
-    In the file `make/common/templates/ui/app.conf`, append a new item to the configuration section.
+    Locate the file `src/ui_ng/src/app/base/navigator/navigator.component.html` and then find the following code piece:
     ```
-		 [lang]
-		 types = en-US|zh-CN|<language>-<locale>
-		 names = en-US|zh-CN|<language>-<locale>
+    <div class="dropdown-menu">
+        <a href="javascript:void(0)" clrDropdownItem (click)='switchLanguage("en-us")' [class.lang-selected]='matchLang("en-us")'>English</a>
+        <a href="javascript:void(0)" clrDropdownItem (click)='switchLanguage("zh-cn")' [class.lang-selected]='matchLang("zh-cn")'>中文简体</a>
+    </div>
+    ```
+    Add new menu item for your language:
+    ```
+    <div class="dropdown-menu">
+        <a href="javascript:void(0)" clrDropdownItem (click)='switchLanguage("en-us")' [class.lang-selected]='matchLang("en-us")'>English</a>
+        <a href="javascript:void(0)" clrDropdownItem (click)='switchLanguage("zh-cn")' [class.lang-selected]='matchLang("zh-cn")'>中文简体</a>
+        <a href="javascript:void(0)" clrDropdownItem (click)='switchLanguage("<language>-<locale>")' [class.lang-selected]='matchLang("<language>-<locale>")'>DISPLAY_NAME</a>
+    </div>
     ```
 
-6. Next, change to `make/` directory, rebuild and restart the Harbor by the below command: 
-    ```
-        docker-compose down
-        docker-compose up --build -d
-    ```
-    
\ No newline at end of file
+4. Next, please refer [compile guideline](compile_guide.md) to rebuild and restart Harbor.