diff --git a/client/package.json b/client/package.json
index 560a240..f8f9943 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "starrysea-client",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts
index c6d0198..a93e950 100644
--- a/client/src/app/app-routing.module.ts
+++ b/client/src/app/app-routing.module.ts
@@ -95,7 +95,7 @@ const routes: Routes = [
   },
   {
     path:'**',
-    component:NotFoundComponent
+    redirectTo:'/404'
   }
 ];
 
diff --git a/client/src/app/view/about/about.component.html b/client/src/app/view/about/about.component.html
index 6b7f9aa..3f3c59f 100644
--- a/client/src/app/view/about/about.component.html
+++ b/client/src/app/view/about/about.component.html
@@ -32,8 +32,8 @@ <h1 class="text-center introh1 h1">About Us</h1>
     <div class="col-md-6 col-sm-12">
       <p class="h5">Latest System Releases: <span class="badge badge-success">{{Version}}</span></p>
       <div style="display: inline">
-        <p style="display: inline">Front-End: <span class="badge badge-success">v1.0.5</span></p>
-        <p style="display: inline">Back-End: <span class="badge badge-success">v1.0.5</span></p>
+        <p style="display: inline">Front-End: <span class="badge badge-success">v1.0.6</span></p>
+        <p style="display: inline">Back-End: <span class="badge badge-success">v1.0.6</span></p>
         <p>Latest Commit: <span class="badge badge-info">{{commit}}</span></p>
       </div>
     </div>
diff --git a/client/src/app/view/about/about.component.ts b/client/src/app/view/about/about.component.ts
index 3c2bba3..93471ee 100644
--- a/client/src/app/view/about/about.component.ts
+++ b/client/src/app/view/about/about.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import {VersionService} from "../../service/version.service";
+import {Meta,Title} from "@angular/platform-browser";
 
 @Component({
   selector: 'app-about',
@@ -9,12 +10,19 @@ import {VersionService} from "../../service/version.service";
 export class AboutComponent implements OnInit {
 
   constructor(
-    private versionService:VersionService
+    private versionService:VersionService,
+    private titleService:Title,
+    private metaService:Meta
   ) { }
 
   commit:any;
   Version:string;
   ngOnInit() {
+    this.titleService.setTitle('About Us - Starry Sea Volunteers Association');
+    this.metaService.updateTag({content:'/assets/icons/starrysea-512x512.png'}, "property='og:image'");
+    this.metaService.updateTag({content: 'About Us - Starry Sea Volunteers Association'}, "property='og:title'");
+    this.metaService.updateTag({content: 'About Starry Sea Volunteers Association'}, "property='og:description'");
+    this.metaService.updateTag({content: 'About Starry Sea Volunteers Association'}, "name='description'");
     this.versionService.getLatestCommit()
       .subscribe(data=>{
         if(data.json().success){
diff --git a/client/src/app/view/activity-detail/activity-detail.component.ts b/client/src/app/view/activity-detail/activity-detail.component.ts
index 6143f99..a8000da 100644
--- a/client/src/app/view/activity-detail/activity-detail.component.ts
+++ b/client/src/app/view/activity-detail/activity-detail.component.ts
@@ -3,6 +3,7 @@ import {ActivityService} from "../../service/activity.service";
 import {ActivatedRoute, Router} from "@angular/router";
 import {FundingService} from "../../service/funding.service";
 import {environment} from "../../../environments/environment";
+import {Meta, Title} from "@angular/platform-browser";
 
 @Component({
   selector: 'app-activity-detail',
@@ -16,6 +17,8 @@ export class ActivityDetailComponent implements OnInit {
     private fundingService:FundingService,
     private route:ActivatedRoute,
     private router:Router,
+    private metaService:Meta,
+    private titleService:Title
   ) { }
 
   activityId:string;
@@ -30,6 +33,11 @@ export class ActivityDetailComponent implements OnInit {
         if(data.json().success){
           this.activityData = data.json().response;
           this.content = data.json().response.content.replace(/\n/g, "<br/>");
+          this.titleService.setTitle(data.json().response.name+' - Starry Sea Volunteers Association');
+          this.metaService.updateTag({content: environment.apiBase+'/static/activity/'+data.json().response.cover}, "property='og:image'");
+          this.metaService.updateTag({content: data.json().response.name+' - Starry Sea Volunteers Association'}, "property='og:title'");
+          this.metaService.updateTag({content: data.json().response.summary}, "property='og:description'");
+          this.metaService.updateTag({content: data.json().response.summary}, "name='description'");
           this.fundingService.fetchFundingList(this.activityId)
             .subscribe(funding=>{
               this.fundArr = funding.json().response.record;
diff --git a/client/src/app/view/activity/activity.component.html b/client/src/app/view/activity/activity.component.html
index 800cc8a..1b8f439 100644
--- a/client/src/app/view/activity/activity.component.html
+++ b/client/src/app/view/activity/activity.component.html
@@ -18,4 +18,3 @@ <h2 class="h1">Activities</h2>
     </div>
   </div>
 </div>
-<router-outlet></router-outlet>
diff --git a/client/src/app/view/activity/activity.component.ts b/client/src/app/view/activity/activity.component.ts
index 3798500..9c22639 100644
--- a/client/src/app/view/activity/activity.component.ts
+++ b/client/src/app/view/activity/activity.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import {ActivityService} from "../../service/activity.service";
 import {environment} from "../../../environments/environment";
+import {Meta, Title} from "@angular/platform-browser";
 
 @Component({
   selector: 'app-activity',
@@ -10,12 +11,19 @@ import {environment} from "../../../environments/environment";
 export class ActivityComponent implements OnInit {
 
   constructor(
-    private activityService:ActivityService
+    private activityService:ActivityService,
+    private metaService:Meta,
+    private titleService:Title
   ) { }
 
   activityArr:Array<any>;
   apiBase:string = environment.apiBase;
   ngOnInit() {
+    this.titleService.setTitle('Activities - Starry Sea Volunteers Association');
+    this.metaService.updateTag({content:'/assets/icons/starrysea-512x512.png'}, "property='og:image'");
+    this.metaService.updateTag({content: 'Activities - Starry Sea Volunteers Association'}, "property='og:title'");
+    this.metaService.updateTag({content: 'All Activities from Starry Sea'}, "property='og:description'");
+    this.metaService.updateTag({content: 'All Activities from Starry Sea'}, "name='description'");
     this.activityService.fetchActivityList(1,99)
       .subscribe(data=>{
         this.activityArr = data.json().response
diff --git a/client/src/app/view/home/home.component.html b/client/src/app/view/home/home.component.html
index 73aa815..e20f90a 100644
--- a/client/src/app/view/home/home.component.html
+++ b/client/src/app/view/home/home.component.html
@@ -19,4 +19,3 @@ <h2 class="lead  text-center title2">Dedicated to delivering the best of LoveLiv
     <a routerLink="/about" class="btn btn-info btn-lg text-right" role="button">About us</a>
   </p>
 </div>
-<router-outlet></router-outlet>
diff --git a/client/src/app/view/home/home.component.ts b/client/src/app/view/home/home.component.ts
index 33fd770..618d39e 100644
--- a/client/src/app/view/home/home.component.ts
+++ b/client/src/app/view/home/home.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import {Meta, Title} from "@angular/platform-browser";
 
 @Component({
   selector: 'app-home',
@@ -7,9 +8,17 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HomeComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+    private titleService:Title,
+    private metaService:Meta
+  ) { }
 
   ngOnInit() {
+    this.titleService.setTitle('Starry Sea Volunteers Association');
+    this.metaService.updateTag({content:'/assets/icons/starrysea-512x512.png'}, "property='og:image'");
+    this.metaService.updateTag({content: 'Starry Sea Volunteers Association'}, "property='og:title'");
+    this.metaService.updateTag({content: 'We Are Starry Sea Volunteers Association'}, "property='og:description'");
+    this.metaService.updateTag({content: 'We Are Starry Sea Volunteers Association'}, "name='description'");
   }
 
 }
diff --git a/client/src/app/view/qa/qa.component.ts b/client/src/app/view/qa/qa.component.ts
index ee31ab3..78f7265 100644
--- a/client/src/app/view/qa/qa.component.ts
+++ b/client/src/app/view/qa/qa.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import {QaService} from "../../service/qa.service";
+import {Meta, Title} from "@angular/platform-browser";
 declare var swal:any;
 @Component({
   selector: 'app-qa',
@@ -9,7 +10,9 @@ declare var swal:any;
 export class QaComponent implements OnInit {
 
   constructor(
-    private qaService:QaService
+    private qaService:QaService,
+    private titleService:Title,
+    private metaService:Meta
   ) { }
 
   QaList:Array<any>;
@@ -19,6 +22,11 @@ export class QaComponent implements OnInit {
       .subscribe(data=>{
         this.QaList = data.json().response;
       })
+    this.titleService.setTitle('Question & Answer - Starry Sea Volunteers Association');
+    this.metaService.updateTag({content:'/assets/icons/starrysea-512x512.png'}, "property='og:image'");
+    this.metaService.updateTag({content: 'Question & Answer - Starry Sea Volunteers Association'}, "property='og:title'");
+    this.metaService.updateTag({content: 'Question & Answer from Starry Sea'}, "property='og:description'");
+    this.metaService.updateTag({content: 'Question & Answer from Starry Sea'}, "name='description'");
   }
 
   askQuestion() {
diff --git a/client/src/app/view/work-detail/work-detail.component.ts b/client/src/app/view/work-detail/work-detail.component.ts
index 2594aae..f42968b 100644
--- a/client/src/app/view/work-detail/work-detail.component.ts
+++ b/client/src/app/view/work-detail/work-detail.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import {WorkService} from "../../service/work.service";
 import {ActivatedRoute, Router} from "@angular/router";
 import {environment} from "../../../environments/environment";
+import {Meta, Title} from "@angular/platform-browser";
 
 @Component({
   selector: 'app-work-detail',
@@ -13,7 +14,9 @@ export class WorkDetailComponent implements OnInit {
   constructor(
     private workService:WorkService,
     private route:ActivatedRoute,
-    private router:Router
+    private router:Router,
+    private titleService:Title,
+    private metaService:Meta
   ) { }
 
   workId:string;
@@ -26,6 +29,11 @@ export class WorkDetailComponent implements OnInit {
       .subscribe(data=>{
         if(data.json().success){
           this.workData = data.json().response;
+          this.titleService.setTitle(data.json().response.name+' - Starry Sea Volunteers Association');
+          this.metaService.updateTag({content: environment.apiBase+'/static/work/'+data.json().response.file.cover}, "property='og:image'");
+          this.metaService.updateTag({content: data.json().response.name+' - Starry Sea Volunteers Association'}, "property='og:title'");
+          this.metaService.updateTag({content: data.json().response.summary}, "property='og:description'");
+          this.metaService.updateTag({content: data.json().response.summary}, "name='description'");
         }else{
           this.router.navigate(['/','404'])
         }
diff --git a/client/src/app/view/work/work.component.html b/client/src/app/view/work/work.component.html
index 61861ab..9d6e045 100644
--- a/client/src/app/view/work/work.component.html
+++ b/client/src/app/view/work/work.component.html
@@ -1,6 +1,6 @@
 <div class="container">
   <div class="title">
-    <h2 class="h1">Works Galley</h2>
+    <h2 class="h1">Works Gallery</h2>
   </div>
   <div class="work" *ngIf="workArr">
     <div class="col-sm-12" *ngFor="let work of workArr">
@@ -18,4 +18,3 @@ <h2 class="h1">Works Galley</h2>
     </div>
   </div>
 </div>
-<router-outlet></router-outlet>
diff --git a/client/src/app/view/work/work.component.ts b/client/src/app/view/work/work.component.ts
index f9449b7..0436021 100644
--- a/client/src/app/view/work/work.component.ts
+++ b/client/src/app/view/work/work.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import {WorkService} from "../../service/work.service";
 import {environment} from "../../../environments/environment";
+import {Meta, Title} from "@angular/platform-browser";
 
 @Component({
   selector: 'app-work',
@@ -10,14 +11,21 @@ import {environment} from "../../../environments/environment";
 export class WorkComponent implements OnInit {
 
   constructor(
-    private workService:WorkService
+    private workService:WorkService,
+    private titleService:Title,
+    private metaService:Meta
   ) { }
 
   workArr: Array<any>;
   apiBase: string = environment.apiBase;
 
   ngOnInit() {
-    this.workService.fetchWorkList(1,10)
+    this.titleService.setTitle('Works Gallery - Starry Sea Volunteers Association');
+    this.metaService.updateTag({content:'/assets/icons/starrysea-512x512.png'}, "property='og:image'");
+    this.metaService.updateTag({content: 'Work Gallery - Starry Sea Volunteers Association'}, "property='og:title'");
+    this.metaService.updateTag({content: 'All Works from Starry Sea'}, "property='og:description'");
+    this.metaService.updateTag({content: 'All Works from Starry Sea'}, "name='description'");
+    this.workService.fetchWorkList(1,99)
       .subscribe(data=>{
         this.workArr = data.json().response
       })
diff --git a/client/src/index.html b/client/src/index.html
index a391f9b..b011bca 100644
--- a/client/src/index.html
+++ b/client/src/index.html
@@ -7,13 +7,18 @@
   <title>Starry Sea Volunteers Association</title>
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <!--SEO-->
-  <meta name="description" content="Starry Sea Volunteers Association">
+  <meta name="description" content="We Are Starry Sea Volunteers Association">
   <meta name="keywords" content="Starrysea,星之海,星之海志愿者公会,Starry Sea,Starry Sea Volunteers Association">
-  <meta property="og:title" content="Starry Sea"/>
+  <meta property="og:title" content="Starry Sea International"/>
+  <meta property="og:type" content="website" />
+  <meta property="og:image" content="/assets/icons/starrysea-512x512.png" />
+  <meta property="og:description" content="We Are Starry Sea Volunteers Association" />
   <meta property="og:site_name" content="Starry Sea Volunteers Association"/>
-  <meta name="robots" CONTENT="index, follow">
+  <meta name="robots" content="index, follow">
   <!--PWA Setting-->
   <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="msapplication-starturl" content="/">
   <meta name="theme-color" content="#409cc3">
   <link rel="manifest" href="/manifest.json">
   <style>.splash{opacity: 0;position: fixed;height: 100%;width: 100%;margin-top: 15%;text-align: center;z-index: -1;font-family: Arial,"Times New Roman", sans-serif}  app-root:empty + .splash {opacity: 1;z-index: 100;}</style>
@@ -25,7 +30,7 @@
   <base href="/">
 </head>
 <body>
-  <!--Script Inject Point-->
+  <!--App Entry Point-->
   <app-root></app-root>
   <!--PWA Loading-->
   <div class="splash">