diff --git a/src/App.vue b/src/App.vue
index c5d6fc9..7152aae 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,7 +15,6 @@
 		</div>
 		<Settings/>
 		<AddService/>
-		<EditService/>
 		<AddPattern/>
 		<LookBack ref="lookBack" />
 	</div>
@@ -28,7 +27,6 @@
 	import Navbar from './components/Navbar';
 	import Settings from './views/Settings';
 	import AddService from './views/AddService';
-	import EditService from './views/EditService';
 	import AddPattern from './views/AddPattern';
 	import LookBack from './views/LookBack';
 	import SockJS from 'sockjs-client';
@@ -201,7 +199,6 @@
 		components: {
 			AddPattern,
 			AddService,
-			EditService,
 			LookBack,
 			Settings,
 			Navbar,
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index da81778..a8813e5 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,7 +1,7 @@
 <template>
 	<nav class="navbar navbar-dark navbar-expand fixed-top bg-dark flex-md-nowrap p-0 shadow">
 		<span class="navbar-brand mb-0 ml-2">Packmate</span>
-		<span class="navbar-text">
+		<span class="navbar-text navbar-stats">
       {{ this.$store.state.currentStreamsCount }}
 			<u title="Streams per minute">SPM</u>
 			, {{ packetsPerStream }}
@@ -11,7 +11,7 @@
 		<PatternsDropdown ref="patternsDropdown"/>
 
 		<div class="navbar-collapse collapse">
-			<ul class="navbar-nav px-3 mr-auto">
+			<ul class="navbar-nav px-1 mr-auto">
 				<li class="nav-item text-nowrap">
 					<router-link class="nav-link" to="/" exact>All</router-link>
 				</li>
@@ -20,7 +20,7 @@
 								 :to="{name:'stream', params: {servicePort: service.port}, query: $route.query}">
 						<a class="nav-link">{{service.name}} #{{service.port}}</a>
 
-						<a class="nav-link" style="cursor: pointer" @click.stop.prevent="editService(service)">
+						<a class="nav-link pl-0" style="cursor: pointer" @click.stop.prevent="editService(service)">
 							<i class="fas fa-pencil-alt"/>
 						</a>
 					</router-link>
@@ -127,6 +127,10 @@
 		color: #FFF;
 	}
 
+	.navbar-stats {
+		white-space: nowrap;
+	}
+
 	nav {
 		overflow-x: auto;
 	}
diff --git a/src/views/EditService.vue b/src/views/EditService.vue
deleted file mode 100644
index b294900..0000000
--- a/src/views/EditService.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-	<b-modal @show="loadData" @ok="editService" @cancel="reset" id="editServiceModal"
-			 title="Редактировать сервис"
-			 cancel-title="Отмена"
-			 centered scrollable>
-		<form ref="editServiceForm">
-			<b-form-group
-					label-cols-sm="4"
-					label-cols-lg="3"
-					label="Название"
-					label-for="addSvc-name">
-				<b-form-input @keydown.native.enter="editService" id="addSvc-name" required v-model="svcName"/>
-			</b-form-group>
-			<button @click.stop.prevent="deleteService" class="btn btn-danger" style="width: 100%">Удалить</button>
-		</form>
-	</b-modal>
-</template>
-
-<script>
-	export default {
-		name: 'EditService',
-		data() {
-			return {
-				svcName: String(),
-				svcPort: Number(),
-			};
-		},
-		methods: {
-			loadData() {
-				this.svcName = this.$store.state.serviceModalName;
-				this.svcPort = this.$store.state.serviceModalId;
-			},
-
-			checkValidity() {
-				return this.$refs.editServiceForm.reportValidity();
-			},
-
-			reset() {
-				this.svcName = '';
-			},
-
-			editService(ev) {
-				const name = this.svcName;
-				const port = this.svcPort;
-				if (!this.checkValidity()) {
-					ev.preventDefault();
-					console.debug('Form is invalid');
-					return;
-				}
-				console.debug(`Editing service ${name} (${port})...`);
-
-				this.$http.post('service/', {
-					name,
-					port,
-				}).then(response => {
-					const data = response.data;
-					console.debug('Done editing service', data);
-					this.$emit('serviceEditComplete');
-					this.reset();
-					this.$bvModal.hide('editServiceModal');
-				}).catch(e => {
-					this.$bvToast.toast(`Failed to edit service: ${e}`, {
-						title: 'Сбой',
-						variant: 'danger',
-					});
-					console.error('Failed to edit service', e);
-				});
-				ev.preventDefault();
-			},
-
-			deleteService() {
-				this.$http.delete(`service/${this.svcPort}`)
-					.then(response => {
-						const data = response.data;
-						console.debug('Done deleting service', data);
-						this.$emit('serviceEditComplete');
-						this.reset();
-						this.$bvModal.hide('editServiceModal');
-					}).catch(e => {
-					this.$bvToast.toast(`Failed to remove service: ${e}`, {
-						title: 'Сбой',
-						variant: 'danger',
-					});
-					console.error('Failed to delete service', e);
-				});
-			},
-		},
-	};
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/ServiceModal.vue b/src/views/ServiceModal.vue
index 8f4857b..2aa75fd 100644
--- a/src/views/ServiceModal.vue
+++ b/src/views/ServiceModal.vue
@@ -9,6 +9,7 @@
 				<b-form-input id="service-name" required v-model="service.name"
 							  @keyup.enter.stop.prevent="submit"/>
 			</b-form-group>
+
 			<b-form-group v-if="creating"
 						  label-cols-sm="4"
 						  label="Port"
@@ -17,48 +18,56 @@
 							  type="number" min="1" max="65535" v-model.number="service.port"
 							  @keyup.enter.stop.prevent="submit"/>
 			</b-form-group>
+
 			<b-form-group label-cols-sm="4"
 						  label="Process chunked transfer encoding"
 						  label-for="service-process-chunked">
 				<b-form-checkbox id="service-process-chunked" required
 								 v-model="service.processChunkedEncoding"/>
 			</b-form-group>
+
 			<b-form-group label-cols-sm="4"
 						  label="Decompress GZIP"
 						  label-for="service-ungzip">
 				<b-form-checkbox id="service-ungzip" required
 								 v-model="service.ungzipHttp"/>
 			</b-form-group>
+
 			<b-form-group label-cols-sm="4"
 						  label="Apply urldecode"
 						  label-for="service-urldecode">
 				<b-form-checkbox id="service-urldecode" required
 								 v-model="service.urldecodeHttpRequests"/>
 			</b-form-group>
+
 			<b-form-group label-cols-sm="4"
 						  label="Merge adjacent packets"
 						  label-for="service-mergeAdjacent">
 				<b-form-checkbox id="service-mergeAdjacent" required
 								 v-model="service.mergeAdjacentPackets"/>
 			</b-form-group>
+
 			<b-form-group label-cols-sm="4"
 						label="Inflate WebSockets"
 						label-for="service-inflateWS">
 				<b-form-checkbox id="service-inflateWS" required
 								 v-model="service.parseWebSockets"/>
 			</b-form-group>
+
 			<b-form-group label-cols-sm="4"
 						  label="Decrypt TLS (TLS_RSA_WITH_AES only)"
 						  label-for="service-decryptTls">
 				<b-form-checkbox id="service-decryptTls" required
 								 v-model="service.decryptTls"/>
 			</b-form-group>
+
+			<b-button v-if="!creating" variant="danger" @click="deleteService">Delete</b-button>
 		</b-form>
 	</b-modal>
 </template>
 
 <script>
-	import {objectAssignDeep,} from '../objectAssignDeep';
+	import {objectAssignDeep,} from '@/objectAssignDeep';
 
 	export default {
 		name: 'ServiceModal',
@@ -107,6 +116,20 @@
 						console.error('Failed to edit/create service', e);
 					});
 			},
+			deleteService() {
+				this.$http.delete(`service/${this.service.port}`)
+						.then(() => {
+							console.info('Done deleting service', this.service);
+							this.$emit('service-update-needed');
+							this.$bvModal.hide('serviceModal');
+						}).catch(e => {
+					this.$bvToast.toast(`Failed to delete service: ${e}`, {
+						title: 'Error',
+						variant: 'danger',
+					});
+					console.error('Failed to delete service', e);
+				});
+			},
 		},
 	};
 </script>