diff --git a/.github/workflows/webui.yml b/.github/workflows/webui.yml
index ae6b3bcd..9a4bd4c0 100644
--- a/.github/workflows/webui.yml
+++ b/.github/workflows/webui.yml
@@ -1,12 +1,11 @@
 name: webui
 on:
-- push
+  push:
     paths:
-      - "webui/*"
+      - 'webui/**'
     branches:
       - master
       - main
-
 env:
   IMAGE_NAME: gebug-webui
 
diff --git a/README.md b/README.md
index 878b93f3..ee274f39 100644
--- a/README.md
+++ b/README.md
@@ -31,6 +31,7 @@ Available Commands:
   help        Help about any command
   init        Initialize a Gebug project
   start       Start Gebug services
+  ui          Start Gebug web UI
   version     Gebug's version
 
 Flags:
@@ -75,6 +76,15 @@ Let's examine the `config.yaml` fields so you will feel more comfortable editing
 | networks     	    | []                               	    | list of docker external networks to join. if no network is selected, a new one will be created                                                                                                                                            |
 | environment     	| []                               	    | list of environment variables to be set inside the container. Syntax: `FOO=BAR` or just `FOO` which will take the variable `FOO` from host and set it with its value                                                                      |
 
+# Web UI
+If you prefer a web interface over a terminal or YAML file, you can simply run the following command in your Gebug project directory
+```
+gebug ui
+``` 
+A simple web application will be opened and let you control the Gebug configuration of your project directly from your browser.  
+
+![](assets/demo-webui.gif)
+ 
 # License
 Gebug is released under the Apache 2.0 license. See LICENSE.
 
diff --git a/assets/demo-webui.gif b/assets/demo-webui.gif
new file mode 100644
index 00000000..8f8db20d
Binary files /dev/null and b/assets/demo-webui.gif differ
diff --git a/webui/frontend/package.json b/webui/frontend/package.json
index 5587ad49..cc36be94 100644
--- a/webui/frontend/package.json
+++ b/webui/frontend/package.json
@@ -11,6 +11,7 @@
     "@braid/vue-formulate": "^2.4.5",
     "@vue/composition-api": "^1.0.0-beta.16",
     "axios": "^0.20.0",
+    "bootstrap-vue": "^2.17.3",
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.6",
@@ -28,6 +29,7 @@
     "@vue/cli-service": "~4.5.0",
     "@vue/eslint-config-typescript": "^5.0.2",
     "babel-eslint": "^10.1.0",
+    "bootstrap": "^4.5.2",
     "eslint": "^6.8.0",
     "eslint-plugin-vue": "^6.2.2",
     "mutationobserver-shim": "^0.3.7",
diff --git a/webui/frontend/src/App.vue b/webui/frontend/src/App.vue
index f33cf8a0..1bdb44a9 100644
--- a/webui/frontend/src/App.vue
+++ b/webui/frontend/src/App.vue
@@ -2,25 +2,19 @@
   <div id="app">
     <img alt="Gebug" src="assets/logo.png" width="500" height="300" />
     <div style="text-align: center;">
-      <ConfigForm :location="settings.location" />
+      <ConfigForm/>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import settings from "@/utils/settings";
 import ConfigForm from "./components/ConfigForm.vue";
 
 @Component({
   components: {
     ConfigForm,
   },
-  computed: {
-    settings() {
-      return settings;
-    }
-  }
 })
 export default class App extends Vue {}
 </script>
diff --git a/webui/frontend/src/components/ConfigForm.vue b/webui/frontend/src/components/ConfigForm.vue
index faddac9b..57c726d6 100644
--- a/webui/frontend/src/components/ConfigForm.vue
+++ b/webui/frontend/src/components/ConfigForm.vue
@@ -1,139 +1,157 @@
 <template>
   <div>
-  <p> Location: {{ location }} </p>
-  <FormulateForm name="config" v-model="config" @submit="handleSubmit">
-    <div class="inputs">
-      <FormulateInput
-        type="text"
-        :label="labels.name"
-        validation="required"
-        :validation-name="labels.name"
-        error-behavior="blur"
-        :placeholder="placeholders.name"
-        v-model="config.name"
-      />
-      <FormulateInput
-        type="text"
-        :label="labels.buildCommand"
-        validation="required"
-        :validation-name="labels.buildCommand"
-        error-behavior="blur"
-        :placeholder="placeholders.buildCommand"
-        v-model="config.buildCommand"
-      />
-      <FormulateInput
-        type="text"
-        :label="labels.runCommand"
-        validation="required"
-        :validation-name="labels.runCommand"
-        error-behavior="blur"
-        :placeholder="placeholders.runCommand"
-        v-model="config.runCommand"
-      />
-      <FormulateInput
-        type="text"
-        :label="labels.runtimeImage"
-        validation="required"
-        :validation-name="labels.runtimeImage"
-        error-behavior="blur"
-        :placeholder="placeholders.runtimeImage"
-        v-model="config.runtimeImage"
-      />
-      <FormulateInput
-        type="text"
-        :label="labels.outputBinary"
-        validation="required"
-        :validation-name="labels.outputBinary"
-        error-behavior="blur"
-        :placeholder="placeholders.outputBinary"
-        v-model="config.outputBinary"
-      />
-      <FormulateInput
-        type="group"
-        name="exposePorts"
-        :repeatable="true"
-        :label="labels.exposePorts"
-        :add-label="addLabels.exposePorts"
-        :values="config.exposePorts"
-      >
-        <div class="ports">
-          <FormulateInput
-            name="port"
-            validation="required|number|between:1,65535"
-            :placeholder="placeholders.exposePorts"
-          />
+    <p> Location: {{ location }} </p>
+    <FormulateForm name="config" v-model="config" @submit="handleSubmit">
+      <div class="center">
+        <b-tabs content-class="mt-3 center">
+          <b-tab title="General" active>
+            <div id="general-tab-container" class="tab-container">
+              <FormulateInput
+                  type="text"
+                  :label="labels.name"
+                  validation="required"
+                  :validation-name="labels.name"
+                  error-behavior="blur"
+                  :placeholder="placeholders.name"
+                  v-model="config.name"
+              />
+              <FormulateInput
+                  type="text"
+                  :label="labels.buildCommand"
+                  validation="required"
+                  :validation-name="labels.buildCommand"
+                  error-behavior="blur"
+                  :placeholder="placeholders.buildCommand"
+                  v-model="config.buildCommand"
+              />
+              <FormulateInput
+                  type="text"
+                  :label="labels.runCommand"
+                  validation="required"
+                  :validation-name="labels.runCommand"
+                  error-behavior="blur"
+                  :placeholder="placeholders.runCommand"
+                  v-model="config.runCommand"
+              />
+              <FormulateInput
+                  type="text"
+                  :label="labels.runtimeImage"
+                  validation="required"
+                  :validation-name="labels.runtimeImage"
+                  error-behavior="blur"
+                  :placeholder="placeholders.runtimeImage"
+                  v-model="config.runtimeImage"
+              />
+              <FormulateInput
+                  type="text"
+                  :label="labels.outputBinary"
+                  validation="required"
+                  :validation-name="labels.outputBinary"
+                  error-behavior="blur"
+                  :placeholder="placeholders.outputBinary"
+                  v-model="config.outputBinary"
+              />
+            </div>
+          </b-tab>
+          <b-tab title="Network">
+            <div id="network-tab-container" class="tab-container">
+              <FormulateInput
+                  type="group"
+                  name="exposePorts"
+                  :repeatable="true"
+                  :label="labels.exposePorts"
+                  :add-label="addLabels.exposePorts"
+                  :values="config.exposePorts"
+              >
+                <div class="ports">
+                  <FormulateInput
+                      name="port"
+                      validation="required|number|between:1,65535"
+                      :placeholder="placeholders.exposePorts"
+                  />
+                </div>
+              </FormulateInput>
+              <FormulateInput
+                  type="group"
+                  name="networks"
+                  :repeatable="true"
+                  :label="labels.networks"
+                  :add-label="addLabels.networks"
+                  :values="config.networks"
+              >
+                <div class="networks">
+                  <FormulateInput
+                      name="network"
+                      validation="required"
+                      :placeholder="placeholders.networks"
+                  />
+                </div>
+              </FormulateInput>
+            </div>
+          </b-tab>
+          <b-tab title="Environment">
+            <div id="environemnt-tab-container" class="tab-container">
+              <FormulateInput
+                  type="group"
+                  name="environment"
+                  :repeatable="true"
+                  :label="labels.environment"
+                  :add-label="addLabels.environment"
+                  :values="config.environment"
+              >
+                <div class="environment">
+                  <FormulateInput
+                      name="envName"
+                      :placeholder="placeholders.envName"
+                      validation="required"
+                  />
+                  <FormulateInput
+                      name="envValue"
+                      :placeholder="placeholders.envValue"
+                  />
+                </div>
+              </FormulateInput>
+            </div>
+          </b-tab>
+          <b-tab title="Debugger">
+            <div id="debugger-tab-container" class="tab-container">
+              <FormulateInput
+                  type="checkbox"
+                  :label="labels.debuggerEnabled"
+                  :placeholder="placeholders.debuggerEnabled"
+                  v-model="config.debuggerEnabled"
+              />
+              <FormulateInput
+                  type="number"
+                  :label="labels.debuggerPort"
+                  :placeholder="placeholders.debuggerPort"
+                  v-model="config.debuggerPort"
+                  v-if="config.debuggerEnabled"
+                  :help="help.debuggerPort"
+              />
+            </div>
+          </b-tab>
+        </b-tabs>
+      </div>
+      <div class="actions">
+        <div class="padder">
+          <FormulateInput type="submit" label="Save"/>
+          <FormulateInput type="button" label="Reset" data-ghost @click="reset"/>
         </div>
-      </FormulateInput>
-      <FormulateInput
-        type="group"
-        name="networks"
-        :repeatable="true"
-        :label="labels.networks"
-        :add-label="addLabels.networks"
-        :values="config.networks"
-      >
-        <div class="networks">
-          <FormulateInput
-            name="network"
-            validation="required"
-            :placeholder="placeholders.networks"
-          />
-        </div>
-      </FormulateInput>
-      <FormulateInput
-        type="group"
-        name="environment"
-        :repeatable="true"
-        :label="labels.environment"
-        :add-label="addLabels.environment"
-        :values="config.environment"
-      >
-        <div class="environment">
-          <FormulateInput
-            name="envName"
-            :placeholder="placeholders.envName"
-            validation="required"
-          />
-          <FormulateInput
-            name="envValue"
-            :placeholder="placeholders.envValue"
-          />
-        </div>
-      </FormulateInput>
-      <FormulateInput
-        type="checkbox"
-        :label="labels.debuggerEnabled"
-        :placeholder="placeholders.debuggerEnabled"
-        v-model="config.debuggerEnabled"
-      />
-      <FormulateInput
-        type="number"
-        :label="labels.debuggerPort"
-        :placeholder="placeholders.debuggerPort"
-        v-model="config.debuggerPort"
-        v-if="config.debuggerEnabled === true"
-      />
-    </div>
-    <div class="actions">
-      <FormulateInput type="submit" label="Save" />
-      <FormulateInput type="button" label="Reset" data-ghost @click="reset" />
-    </div>
-  </FormulateForm>
+      </div>
+    </FormulateForm>
   </div>
 </template>
 
 <script>
 import ConfigService from "../services/ConfigService";
 import lang from "../utils/lang";
-import settings from "../utils/settings";
 
 export default {
-  props: {
-    location: String,
-  },
   data() {
     return {
       config: {},
+      location: '',
     };
   },
   computed: {
@@ -146,15 +164,14 @@ export default {
     addLabels() {
       return lang.addLabels;
     },
-    settings() {
-      return settings;
+    help() {
+      return lang.help;
     },
-    envs() {
-      return process.env;
-    }
   },
   async mounted() {
-    this.config = await ConfigService.get(this.location);
+    const res = await ConfigService.get(this.location);
+    this.config = res.config;
+    this.location = res.location;
   },
 
   methods: {
@@ -162,6 +179,10 @@ export default {
       this.$formulate.reset("config");
     },
     handleSubmit(data) {
+      this.$bvToast.toast('Gebug configuration was updated successfully', {
+        title: 'Update Configuration',
+        autoHideDelay: 5000,
+      })
       ConfigService.save(data);
     },
   },
@@ -170,14 +191,17 @@ export default {
 
 <style scoped>
 @import "../assets/snow.min.css";
-.inputs {
-  display: grid;
-  justify-content: center;
+
+.padder {
+  padding-top: 50px;
+  display: flex;
+}
+.padder > .formulate-input:first-child {
+  margin-right: 20px;
 }
+
 .actions {
   display: flex;
-  padding-top: 50px;
-  margin-bottom: 1em;
   justify-content: center;
 }
 
@@ -186,4 +210,18 @@ export default {
   margin-right: 1em;
   justify-content: center;
 }
+
+.center {
+  margin: auto;
+  width: 50%;
+  padding: 10px;
+}
+
+#general-tab-container {
+  text-align: left;
+}
+
+.tab-container {
+  text-align: left;
+}
 </style>
\ No newline at end of file
diff --git a/webui/frontend/src/main.ts b/webui/frontend/src/main.ts
index a1ab8abd..d022a419 100644
--- a/webui/frontend/src/main.ts
+++ b/webui/frontend/src/main.ts
@@ -1,6 +1,7 @@
 import '@babel/polyfill'
 import 'mutationobserver-shim'
 import Vue from 'vue'
+import './plugins/bootstrap-vue'
 
 import App from './App.vue'
 import VueFormulate from '@braid/vue-formulate'
diff --git a/webui/frontend/src/plugins/bootstrap-vue.js b/webui/frontend/src/plugins/bootstrap-vue.js
new file mode 100644
index 00000000..7ad0b7c6
--- /dev/null
+++ b/webui/frontend/src/plugins/bootstrap-vue.js
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+
+import BootstrapVue from 'bootstrap-vue'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
+Vue.use(BootstrapVue)
diff --git a/webui/frontend/src/services/ConfigService.ts b/webui/frontend/src/services/ConfigService.ts
index 31c5ea69..d7508ae9 100644
--- a/webui/frontend/src/services/ConfigService.ts
+++ b/webui/frontend/src/services/ConfigService.ts
@@ -80,7 +80,8 @@ export default class ConfigService {
             return defaultValue;
         }
 
-        return this.decode(res.data.data.config);
+        const config = this.decode(res.data.data.config);
+        return {config: config, location: res.data.data.location};
     }
 
     static async save(config: Config) {
diff --git a/webui/frontend/src/utils/lang.ts b/webui/frontend/src/utils/lang.ts
index bc103831..1951c730 100644
--- a/webui/frontend/src/utils/lang.ts
+++ b/webui/frontend/src/utils/lang.ts
@@ -29,4 +29,7 @@ export default {
         environment: '+ Add Environment Variable',
         exposePorts: '+ Add Port',
     },
+    help: {
+        debuggerPort: 'Delve debugger port',
+    }
 };
\ No newline at end of file
diff --git a/webui/frontend/yarn.lock b/webui/frontend/yarn.lock
index 119a102b..8dcd749c 100644
--- a/webui/frontend/yarn.lock
+++ b/webui/frontend/yarn.lock
@@ -938,6 +938,15 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
+"@nuxt/opencollective@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@nuxt/opencollective/-/opencollective-0.3.2.tgz#83cb70cdb2bac5fad6f8c93529e7b11187d49c02"
+  integrity sha512-XG7rUdXG9fcafu9KTDIYjJSkRO38EwjlKYIb5TQ/0WDbiTUTtUtgncMscKOYzfsY86kGs05pAuMOR+3Fi0aN3A==
+  dependencies:
+    chalk "^4.1.0"
+    consola "^2.15.0"
+    node-fetch "^2.6.1"
+
 "@soda/friendly-errors-webpack-plugin@^1.7.1":
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.1.tgz#706f64bcb4a8b9642b48ae3ace444c70334d615d"
@@ -2105,6 +2114,22 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
+bootstrap-vue@^2.17.3:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/bootstrap-vue/-/bootstrap-vue-2.19.0.tgz#5019df48251e552a5c34da57fc97dabebd53b02f"
+  integrity sha512-IjAXUSrRU5Qu9x3uwUcoj6LtysKbCVeWoJOsODyI/WokStUr95M+tTIajXUjIrB/Nsk0fS+RNvZnm2sWeNFrhg==
+  dependencies:
+    "@nuxt/opencollective" "^0.3.2"
+    bootstrap ">=4.5.3 <5.0.0"
+    popper.js "^1.16.1"
+    portal-vue "^2.1.7"
+    vue-functional-data-merge "^3.1.0"
+
+"bootstrap@>=4.5.3 <5.0.0", bootstrap@^4.5.2:
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.5.3.tgz#c6a72b355aaf323920be800246a6e4ef30997fe6"
+  integrity sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -2749,6 +2774,11 @@ connect-history-api-fallback@^1.6.0:
   resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
   integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==
 
+consola@^2.15.0:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/consola/-/consola-2.15.0.tgz#40fc4eefa4d2f8ef2e2806147f056ea207fcc0e9"
+  integrity sha512-vlcSGgdYS26mPf7qNi+dCisbhiyDnrN1zaRbw3CSuc2wGOMEGGPsp46PdRG5gqXwgtJfjxDkxRNAgRPr1B77vQ==
+
 console-browserify@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
@@ -5891,6 +5921,11 @@ no-case@^2.2.0:
   dependencies:
     lower-case "^1.1.1"
 
+node-fetch@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
+  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
+
 node-forge@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3"
@@ -8578,6 +8613,11 @@ vue-eslint-parser@^7.0.0:
     esquery "^1.0.1"
     lodash "^4.17.15"
 
+vue-functional-data-merge@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz#08a7797583b7f35680587f8a1d51d729aa1dc657"
+  integrity sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA==
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
diff --git a/webui/server.go b/webui/server.go
index 871c2e53..20d52ba5 100644
--- a/webui/server.go
+++ b/webui/server.go
@@ -1,7 +1,6 @@
 package main
 
 import (
-	"context"
 	"encoding/json"
 	"github.com/gin-gonic/contrib/static"
 	"github.com/gin-gonic/gin"
@@ -17,7 +16,6 @@ import (
 type server struct {
 	port     int
 	location string
-	cancel   context.CancelFunc
 	logger   *zap.Logger
 }
 
diff --git a/webui/src/plugins/bootstrap-vue.js b/webui/src/plugins/bootstrap-vue.js
new file mode 100644
index 00000000..7ad0b7c6
--- /dev/null
+++ b/webui/src/plugins/bootstrap-vue.js
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+
+import BootstrapVue from 'bootstrap-vue'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
+Vue.use(BootstrapVue)