diff --git a/src/app/app-path.const.ts b/src/app/app-path.const.ts
index d2f6e5f1b98abcd55f265fd668e40737f87a00e1..af7867f33565efe0f0ce8626cc05f6675ccea72e 100644
--- a/src/app/app-path.const.ts
+++ b/src/app/app-path.const.ts
@@ -6,6 +6,7 @@ export const appPath = {
 
   p3: 'p3',
 
-  p4: 'p4'
+  p4: 'p4',
 
+  p5: 'p5'
 };
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index d22388f42dfcc98bdc4705d11f4c03983674721a..55a31819309b98cdae61a60b971f7fe83ab87fe2 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -18,6 +18,10 @@ const routes: Routes = [
   {
     path: appPath.p4,
     loadChildren: './p4/p4.module#P4Module'
+  },
+  {
+    path: appPath.p5,
+    loadChildren: './p5/p5.module#P5Module'
   }
 ];
 
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 3e5b28eeedf0764677cdc0699eb5fdd7b6c6d6e3..7aa3ae5e54b5db3cb32692d3240b2a8262c76b5a 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -5,6 +5,7 @@
   <li><a [routerLink]="path.p2">練習二</a></li>
   <li><a [routerLink]="path.p3">練習三</a></li>
   <li><a [routerLink]="path.p4">練習四</a></li>
+  <li><a [routerLink]="path.p5">練習五(進階版)</a></li>
 </ul>
 
 <router-outlet></router-outlet>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 9db90f063a64d7ff8d735da97bed7b4ca874e193..3f4722dfd407a17c6f8ee385a0bf45db2a7849c3 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
+
 @NgModule({
   declarations: [
     AppComponent,
diff --git a/src/app/p4/p4.component.html b/src/app/p4/p4.component.html
index 3bd535bb82435471c8caf6d93bdd6d0c4a735d2e..c2bb69662c77406f37aa8fdb1cebebf9632192a9 100644
--- a/src/app/p4/p4.component.html
+++ b/src/app/p4/p4.component.html
@@ -19,5 +19,5 @@
   欄位三 : <input class="number"
             placeholder="輸入後請按enter"
             autofocus
-            (keyup.enter)="addNumber2($event.target)"><br><br>
+            (keyup.enter)="addNumber3($event.target)"><br><br>
   <router-outlet></router-outlet>
diff --git a/src/app/p4/p4.component.ts b/src/app/p4/p4.component.ts
index a1ff63bfc2fbe2c532bbfd83338f6fe732741844..fb45881c817c7e364799994d28f7ed9dba12909a 100644
--- a/src/app/p4/p4.component.ts
+++ b/src/app/p4/p4.component.ts
@@ -14,7 +14,7 @@ export class P4Component implements OnInit {
     console.log(inputRef.value);
     inputRef.value = '';
 
-    this.value2 = new Number(inputRef.value);
+    this.value2 = +inputRef.value;
 
     if (
       this.value2 > 0
diff --git a/src/app/p5/p5-routing.module.ts b/src/app/p5/p5-routing.module.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b61fcc5183cc58844387401ca9f7de7eabc62667
--- /dev/null
+++ b/src/app/p5/p5-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { P5Component } from './p5.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: P5Component
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class P5RoutingModule { }
diff --git a/src/app/p5/p5.component.css b/src/app/p5/p5.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/p5/p5.component.html b/src/app/p5/p5.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..402bf810b5679683aff1f92833b98d04e8844739
--- /dev/null
+++ b/src/app/p5/p5.component.html
@@ -0,0 +1,25 @@
+<!-- TODO -->
+<table border="1" align="center" style="width:70%">
+  動物照片
+</table>
+<br>
+
+<table border="1" align="center" style="width:80%" >
+  <tr><th aligh="left">動物info</th> <th align="right">
+    <input class="search" placeholder="查詢欄位"><button>查詢</button></th>
+  </tr>
+
+  <tr><td colspan="2">A_Name_Ch(中文名)、A_Diet(食性)、A_Family 分類學_科)、A_Crisis(面臨問題)、A_Summary(摘要說明)、A_Theme_Name(主題網頁)、A_Theme_URL(主題網頁URL)</td></tr>
+  <tr><th align="left" colspan="2">個人資料</th></tr>
+  <tr><td colspan="2">
+  姓名: <input class="name"><br>
+  性別: <input class="gender"><br>
+  手機電話(4-3-3): <input class="phoneNo"><br>
+  生日(YYYY/MM/DD): <input class="birth"><br>
+  目前年收入(XXX,XXX): <input class="income"><br>
+
+  </td></tr>
+</table>
+
+<p align="center"><button >確認送出</button></p>
+<router-outlet></router-outlet>
diff --git a/src/app/p5/p5.component.ts b/src/app/p5/p5.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b137c552a7dc94213cab605105ca2c15aed91132
--- /dev/null
+++ b/src/app/p5/p5.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-p5',
+  templateUrl: './p5.component.html',
+  styleUrls: ['./p5.component.css']
+})
+export class P5Component implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/p5/p5.module.ts b/src/app/p5/p5.module.ts
new file mode 100644
index 0000000000000000000000000000000000000000..53da82836493a46ecc3b998488802decc9164287
--- /dev/null
+++ b/src/app/p5/p5.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { P5RoutingModule } from './p5-routing.module';
+import { P5Component } from './p5.component';
+
+@NgModule({
+  declarations: [P5Component],
+  imports: [
+    CommonModule,
+    P5RoutingModule,
+    FormsModule
+  ]
+})
+export class P5Module { }