diff --git a/components/header/header.html b/components/header/header.html
new file mode 100644
index 0000000..c2c02fe
--- /dev/null
+++ b/components/header/header.html
@@ -0,0 +1,3 @@
+<div class="site-logo">
+    <img src="{{logo}}"/>
+</div>
\ No newline at end of file
diff --git a/components/header/header.interface.ts b/components/header/header.interface.ts
new file mode 100644
index 0000000..c8bc00e
--- /dev/null
+++ b/components/header/header.interface.ts
@@ -0,0 +1,3 @@
+export default interface headerInterface {
+    logo : string;
+}
\ No newline at end of file
diff --git a/components/header/header.scss b/components/header/header.scss
new file mode 100644
index 0000000..535691c
--- /dev/null
+++ b/components/header/header.scss
@@ -0,0 +1,8 @@
+.site-logo {
+    height: 250px;
+    width: 320px;
+    margin: auto;
+    img {
+        max-width: 100%;
+    }
+}
\ No newline at end of file
diff --git a/components/header/header.ts b/components/header/header.ts
new file mode 100644
index 0000000..d703f47
--- /dev/null
+++ b/components/header/header.ts
@@ -0,0 +1,9 @@
+import VnNative3HTMLElement from "vnnative3-webview/dist/HTMLElement/HTMLElement";
+import headerInterface from "./header.interface";
+import './header.scss';
+export default function header () : string {
+    const state : headerInterface = {
+        logo : require('../../assets/images/logo.png').default
+    };
+    return (new VnNative3HTMLElement).make(require('./header.html').default,state);
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 643e1a4..328e074 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vn-native-3",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "Vn Native Framework",
   "main": "./bin/electron/production.js",
   "scripts": {
diff --git a/pages/ExamplePage/ExamplePage.Service.ts b/pages/ExamplePage/ExamplePage.Service.ts
new file mode 100644
index 0000000..e69de29
diff --git a/pages/ExamplePage/ExamplePage.State.Interface.ts b/pages/ExamplePage/ExamplePage.State.Interface.ts
index 8def0dd..9dcde79 100644
--- a/pages/ExamplePage/ExamplePage.State.Interface.ts
+++ b/pages/ExamplePage/ExamplePage.State.Interface.ts
@@ -1,6 +1,6 @@
 export default interface ExamplePageStateInterface {
     title : string;
     slogan: string;
-    logo : string;
+    header : string;
     homePage: string 
 }
\ No newline at end of file
diff --git a/pages/ExamplePage/ExamplePage.html b/pages/ExamplePage/ExamplePage.html
index 8c96f45..e8e3f85 100644
--- a/pages/ExamplePage/ExamplePage.html
+++ b/pages/ExamplePage/ExamplePage.html
@@ -1,7 +1,5 @@
 <div class="info-box">
-    <div class="site-logo">
-        <img src="{{logo}}"/>
-    </div>
+    {{{header}}}
     <div class="box-container">
         <h1>{{title}}</h1>
         <p>{{slogan}}</p>
@@ -9,6 +7,8 @@ <h1>{{title}}</h1>
         <h4>Page feature</h4>
         <p>To create new page you can consider <code>IndexPage</code> at <code>./pages</code> directory.</p>
         <a href="{{homePage}}">Home Page</a>
+        <h4>API</h4>
+        <p>You can easy use fetchjs to subscribe api.</p>
         <h4>Documents</h4>
         <p>Please see more document at GITHUB : <code>https://github.com/steveleetn91/vn-native-3</code></p>
         <h4>Licence</h4>
diff --git a/pages/ExamplePage/ExamplePage.scss b/pages/ExamplePage/ExamplePage.scss
index fde2f42..7882efa 100644
--- a/pages/ExamplePage/ExamplePage.scss
+++ b/pages/ExamplePage/ExamplePage.scss
@@ -5,14 +5,6 @@ body {
 h1 {
     color: red;
 }
-.site-logo {
-    height: 250px;
-    width: 320px;
-    margin: auto;
-}
-.site-logo img {
-    max-width: 100%;
-}
 .box-container {
     width: 80%;
     margin: auto;
diff --git a/pages/ExamplePage/ExamplePage.ts b/pages/ExamplePage/ExamplePage.ts
index 6b9de02..a5f032e 100644
--- a/pages/ExamplePage/ExamplePage.ts
+++ b/pages/ExamplePage/ExamplePage.ts
@@ -3,11 +3,12 @@ import VnNative3HTMLElement from 'vnnative3-webview/dist/HTMLElement/index';
 import './ExamplePage.scss';
 import ExamplePageStateInterface from './ExamplePage.State.Interface';
 import VnNative3Location from 'vnnative3-location/dist/index';
+import header from '../../components/header/header';
 export default class ExamplePage implements HTMLPageInterFace {
     state : ExamplePageStateInterface = {
         title : "Example page ",
         slogan : "Document",
-        logo : require('../../assets/images/logo.png').default,
+        header : header(),
         homePage : (new VnNative3Location).redirect.goUrl('/index.html',[]) 
     }; 
     constructor() {} 
@@ -15,7 +16,7 @@ export default class ExamplePage implements HTMLPageInterFace {
     public afterRender() : void {}    
     public render() : string {
         return (new VnNative3HTMLElement).head(this.state).next(() => {
-            console.log("Hello I'm next action ! You can use a lots actions");
+            console.log("Hello I'm next action ! You can use a lots of actions");
         }).make(require('./ExamplePage.html').default,this.state); 
     }  
 }             
\ No newline at end of file
diff --git a/pages/IndexPage/IndexPage.Service.ts b/pages/IndexPage/IndexPage.Service.ts
new file mode 100644
index 0000000..e69de29
diff --git a/pages/IndexPage/IndexPage.State.Interface.ts b/pages/IndexPage/IndexPage.State.Interface.ts
index 746aeab..82b32fe 100644
--- a/pages/IndexPage/IndexPage.State.Interface.ts
+++ b/pages/IndexPage/IndexPage.State.Interface.ts
@@ -1,7 +1,6 @@
-import VnNative3Location from 'vnnative3-location/dist/index';
 export default interface IndexPageStateInterface {
     title : string;
     slogan: string;
-    logo : string;
-    examplePageUrl : string 
+    examplePageUrl : string,
+    header : string 
 }
\ No newline at end of file
diff --git a/pages/IndexPage/IndexPage.html b/pages/IndexPage/IndexPage.html
index a1ee436..fe05901 100644
--- a/pages/IndexPage/IndexPage.html
+++ b/pages/IndexPage/IndexPage.html
@@ -1,7 +1,5 @@
 <div class="info-box">
-    <div class="site-logo">
-        <img src="{{logo}}"/>
-    </div>
+    {{{header}}}
     <div class="box-container">
         <h1>{{title}}</h1>
         <p>{{slogan}}</p>
@@ -9,6 +7,8 @@ <h1>{{title}}</h1>
         <h4>Page feature</h4>
         <p>To create new page you can consider <code>IndexPage</code> at <code>./pages</code> directory.</p>
         <a href="{{examplePageUrl}}">Example page</a>
+        <h4>API</h4>
+        <p>You can easy use fetchjs to subscribe api.</p>
         <h4>Documents</h4>
         <p>Please see more document at GITHUB : <code>https://github.com/steveleetn91/vn-native-3</code></p>
         <h4>Licence</h4>
diff --git a/pages/IndexPage/IndexPage.scss b/pages/IndexPage/IndexPage.scss
index fde2f42..7882efa 100644
--- a/pages/IndexPage/IndexPage.scss
+++ b/pages/IndexPage/IndexPage.scss
@@ -5,14 +5,6 @@ body {
 h1 {
     color: red;
 }
-.site-logo {
-    height: 250px;
-    width: 320px;
-    margin: auto;
-}
-.site-logo img {
-    max-width: 100%;
-}
 .box-container {
     width: 80%;
     margin: auto;
diff --git a/pages/IndexPage/IndexPage.ts b/pages/IndexPage/IndexPage.ts
index 3f2093f..e310a4d 100644
--- a/pages/IndexPage/IndexPage.ts
+++ b/pages/IndexPage/IndexPage.ts
@@ -3,11 +3,12 @@ import VnNative3HTMLElement from 'vnnative3-webview/dist/HTMLElement/index';
 import './IndexPage.scss';
 import IndexPageStateInterface from './IndexPage.State.Interface';
 import VnNative3Location from 'vnnative3-location/dist/index';
+import header from '../../components/header/header';
 export default class IndexPage implements HTMLPageInterFace {
     state : IndexPageStateInterface = {
         title : "Vn Native Framework 3 ",
-        slogan : "Cross platforms - Version 1.3",
-        logo : require('../../assets/images/logo.png').default,
+        slogan : "Cross platforms - Version 1.3.3",
+        header : header(),
         examplePageUrl : (new VnNative3Location).redirect.goUrl('/page/example',[])
     }; 
     constructor() {} 
@@ -15,7 +16,7 @@ export default class IndexPage implements HTMLPageInterFace {
     public afterRender() : void {}    
     public render() : string {
         return (new VnNative3HTMLElement).head(this.state).next(() => {
-            console.log("Hello I'm next action ! You can use a lots actions");
+            console.log("Hello I'm next action ! You can use a lots of actions");
         }).make(require('./IndexPage.html').default,this.state); 
     }  
 }             
\ No newline at end of file