diff --git a/src/pages/CustomerEdit.vue b/src/pages/CustomerEdit.vue
new file mode 100644
index 0000000..56717f8
--- /dev/null
+++ b/src/pages/CustomerEdit.vue
@@ -0,0 +1,18 @@
+<template>
+  <section class="section">
+    <div class="container">
+      <div class="notification">
+        Edit customer by id: {{ $route.params.id }}
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+  export default {
+    name: 'customer-edit-page',
+    beforeCreate() {
+      console.log('before create edit')
+    },
+  }
+</script>
\ No newline at end of file
diff --git a/src/pages/CustomerView.vue b/src/pages/CustomerView.vue
new file mode 100644
index 0000000..07fa262
--- /dev/null
+++ b/src/pages/CustomerView.vue
@@ -0,0 +1,18 @@
+<template>
+  <section class="section">
+    <div class="container">
+      <div class="notification">
+        View customer by id: {{ $route.params.id }}
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+  export default {
+    name: 'customer-view-page',
+    beforeCreate() {
+      console.log('before create view')
+    },
+  }
+</script>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 8f64280..c0c4fef 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,6 +5,9 @@ import App from '../App.vue';
 
 import Login from '../pages/Login.vue';
 import Customers from '../pages/Customers.vue';
+import CustomerView from '../pages/CustomerView.vue';
+import CustomerEdit from '../pages/CustomerEdit.vue';
+
 import Orders from '../pages/Orders.vue';
 import About from '../pages/About.vue';
 
@@ -26,6 +29,14 @@ const routes = [{
       path: 'customers',
       name: 'customers',
       component: Customers,
+    }, {
+      path: 'customer/:id',
+      name: 'customer-view',
+      component: CustomerView,
+    }, {
+      path: 'customer/:id/edit',
+      name: 'customer-edit',
+      component: CustomerEdit,
     }, {
       path: 'orders',
       name: 'orders',