diff --git a/resources/assets/js/pages/settings/admin-marking-setting.vue b/resources/assets/js/pages/settings/admin-marking-setting.vue
new file mode 100644
index 00000000..8cfb4f23
--- /dev/null
+++ b/resources/assets/js/pages/settings/admin-marking-setting.vue
@@ -0,0 +1,75 @@
+<template>
+<div>
+	<span align="center"><h4>Marking Setting</h4></span><br>
+	<el-form label-width="150px">
+		<el-form-item label="Marking" :class="{'has-error': errors.has('marking') }">
+			<el-input v-model="markingForm.marking" v-validate="'required|max:255'" name="marking"></el-input>
+			<span class="error-message text-danger" v-if="errors.has('marking')">{{ errors.first('marking') }}<br/></span>
+		</el-form-item>
+		<el-form-item label="Email" :class="{'has-error': errors.has('email') }">
+			<el-input v-model="markingForm.email" v-validate="'required|email|max:255'" name="email"></el-input>
+			<span class="error-message text-danger" v-if="errors.has('email')">{{ errors.first('email') }}<br/></span>
+		</el-form-item>
+	</el-form>
+	<div align="right">
+		<el-button type="primary" icon="el-icon-plus" @click="CreateMarking">Add New Data</el-button>
+	</div>
+</div>
+</template>
+
+<script>
+	var axios = require('axios');
+	var client = axios.create({
+		baseURL: 'http://localhost:8000'
+	});
+
+	export default {
+		data() {
+			return {
+				loading_btn: false,
+				markingForm : {
+					marking : '',
+					email : '',
+				},
+			}
+		},
+		methods: {
+			CreateMarking : function(){
+				client.post('api/setting-marking', this.markingForm)
+					.then((response) => {
+	                    this.loading_btn = false
+							this.$message({
+							showClose: true,
+							message: 'Success',
+							type: 'success',
+							duration: 5000
+						});
+						this.ClearMarkingForm();
+					})
+					.catch((error) => {
+	                    this.loading_btn = false
+						console.log(error);
+						this.$message({
+							showClose: true,
+							message: 'Update failed, please contact support',
+							type: 'error',
+							duration: 10000
+						});
+						this.ClearMarkingForm();
+					});
+			},
+			ClearMarkingForm : function(){
+				this.markingForm.marking = '';
+				this.markingForm.email = '';
+			}
+		}
+	}
+</script>
+<style type="text/css">
+	.error-message{
+		position: absolute;
+		left: 0;
+	}
+</style>
+
+
diff --git a/resources/assets/js/pages/settings/index.vue b/resources/assets/js/pages/settings/index.vue
index a7eb4dcc..878e7c8f 100644
--- a/resources/assets/js/pages/settings/index.vue
+++ b/resources/assets/js/pages/settings/index.vue
@@ -63,7 +63,7 @@
             role: 'admin'
           },
           {
-          icon: 'flag',
+            icon: 'flag',
             name: this.$t('CIEF Malaysia Bank'),
             route: 'settings.admin-malaysia-bank',
             role: 'admin'
@@ -74,6 +74,12 @@
             route: 'settings.admin-bank-setting',
             role: 'admin'
           },
+          {
+            icon: 'building',
+            name: this.$t('Marking Setting'),
+            route: 'settings.admin-marking-setting',
+            role: 'admin'
+          },
         ]
       }
     }
diff --git a/resources/assets/js/router/routes.js b/resources/assets/js/router/routes.js
index 7be29f11..4e2231a0 100644
--- a/resources/assets/js/router/routes.js
+++ b/resources/assets/js/router/routes.js
@@ -14,6 +14,7 @@ const SettingsAdminCreditSetting = () => import('~/pages/settings/admin-credit-s
 const SettingsAdminChinaBank = () => import('~/pages/settings/admin-china-bank').then(m => m.default || m)
 const SettingsAdminMalaysiaBank = () => import('~/pages/settings/admin-malaysia-bank').then(m => m.default || m)
 const SettingsAdminBankSetting = () => import('~/pages/settings/admin-bank-setting').then(m => m.default || m)
+const SettingsAdminMarkingSetting = () => import('~/pages/settings/admin-marking-setting').then(m => m.default || m)
 
 // Booking
 const Upload = () => import('~/pages/booking/uploadUserBankSlip').then(m => m.default || m)
@@ -57,7 +58,8 @@ export default [
       { path: 'admin-credit-setting', name: 'settings.admin-credit-setting', component: SettingsAdminCreditSetting },
       { path: 'admin-china-bank', name: 'settings.admin-china-bank', component: SettingsAdminChinaBank },
       { path: 'admin-malaysia-bank', name: 'settings.admin-malaysia-bank', component: SettingsAdminMalaysiaBank },
-      { path: 'admin-bank-setting', name: 'settings.admin-bank-setting', component: SettingsAdminBankSetting }
+      { path: 'admin-bank-setting', name: 'settings.admin-bank-setting', component: SettingsAdminBankSetting },
+      { path: 'admin-marking-setting', name: 'settings.admin-marking-setting', component: SettingsAdminMarkingSetting }
     ] },
 
   // Booking
diff --git a/routes/api.php b/routes/api.php
index bc8e8885..ef3d2af0 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -91,11 +91,11 @@ Route::group(['middleware' => ['role:admin']], function() {
 	Route::put('setting-malaysia-bank/{malaysiaBank}', 'SettingMalaysiaBankController@update');
 	Route::delete('setting-malaysia-bank/{malaysiaBank}', 'SettingMalaysiaBankController@delete');
 
-	Route::get('marking', 'MarkingController@index');
-	Route::post('marking', 'MarkingController@store');
-	Route::get('marking/{beneficiary}', 'MarkingController@show');
-	Route::put('marking/{beneficiary}', 'MarkingController@update');
-	Route::delete('marking/{beneficiary}', 'MarkingController@delete');
+	Route::get('setting-marking', 'MarkingController@index');
+	Route::post('setting-marking', 'MarkingController@store');
+	Route::get('setting-marking/{beneficiary}', 'MarkingController@show');
+	Route::put('setting-marking/{beneficiary}', 'MarkingController@update');
+	Route::delete('setting-marking/{beneficiary}', 'MarkingController@delete');
 
 	Route::get('supplier-booking', 'BookingSupplierController@index');
 	Route::get('supplier-booking/{id}', 'BookingSupplierController@show');