diff --git a/.env b/.env
new file mode 100644
index 0000000..4eb3d9f
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+VUE_APP_ENDPOINT=http://127.0.0.1:8082
\ No newline at end of file
diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..4eb3d9f
--- /dev/null
+++ b/.env.development
@@ -0,0 +1 @@
+VUE_APP_ENDPOINT=http://127.0.0.1:8082
\ No newline at end of file
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..eb62422
--- /dev/null
+++ b/.env.production
@@ -0,0 +1 @@
+VUE_APP_ENDPOINT=
\ No newline at end of file
diff --git a/.env.staging b/.env.staging
new file mode 100644
index 0000000..eb62422
--- /dev/null
+++ b/.env.staging
@@ -0,0 +1 @@
+VUE_APP_ENDPOINT=
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..67cf46b
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,3 @@
+FROM nginx AS release
+
+COPY dist /usr/share/nginx/html
diff --git a/Jenkinsfile b/Jenkinsfile
new file mode 100644
index 0000000..102d6e2
--- /dev/null
+++ b/Jenkinsfile
@@ -0,0 +1,70 @@
+@Library("sharedLibraries")
+
+def parent = "red"
+def project = "swerve-ui"
+
+podTemplate(name: 'jenkins-agent-swerve-ui',
+		podRetention: never(),
+		yamlMergeStrategy: merge(),
+		inheritFrom: 'jenkins-agent-nodejs-10 jenkins-agent-docker jenkins-agent-kubetools') {
+
+	node(POD_LABEL) {
+
+		stage("clone repository") {
+			deleteDir()
+			checkout(scm)
+		}
+
+		def BRANCH_NAME = getBranchName()
+
+		parent = "${parent}${BRANCH_NAME != "master" ? '-branches' : ''}"
+
+		def dockerBuildOnly = BRANCH_NAME == "" ? true : false
+
+		container("nodejs") {
+			stage("build") {
+
+				initNodeJS()
+
+				sh """
+					yarn global add @vue/cli
+					yarn install
+				"""
+
+				if (BRANCH_NAME == "master") {
+					sh "yarn build --mode production"
+				}  else {
+					sh "yarn build --mode staging"
+				}
+			}
+		}
+
+		// build docker image
+		def imageTag = buildDockerContainer2(
+				parent: "${parent}",
+				project: "${project}",
+				branch: "${BRANCH_NAME}",
+				dockerBuildOnly: dockerBuildOnly
+		)
+
+		if (!dockerBuildOnly) {
+			deployKubernetes(
+				parent: "${parent}",
+				project: "${project}",
+				imageTag: "${imageTag}",
+				namespace: "red-stg",
+				env: "stg"
+			)
+
+			if (BRANCH_NAME == "master") {
+				deployKubernetes(
+					parent: "${parent}",
+					project: "${project}",
+					imageTag: "${imageTag}",
+					namespace: "red-prd",
+					env: "prd"
+				)
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..cf63246
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,37 @@
+PROJECT=swerve-ui
+PARENT=red
+
+REGISTRY=spring-docker.jfrog.io
+IMAGE_NAME=$(REGISTRY)/$(PARENT)/$(PROJECT)
+IMAGE_LATEST=$(IMAGE_NAME):latest
+GIT_HASH=$(shell git rev-parse --short HEAD)
+FULL_NAME=$(IMAGE_NAME):$(GIT_HASH)
+
+# test if the make is running inside a Jenkins, then set different network options than on Docker for Mac
+ifdef BUILD_NUMBER
+    HOSTNAME=$(shell hostname)
+    NETWORK=$(shell docker ps -q --filter 'label=io.kubernetes.pod.name=$(HOSTNAME)' -n1)
+    DOCKER_OPT_ARGS=--pull --network=container:$(NETWORK)
+else
+	DOCKER_OPT_ARGS=--pull
+endif
+
+.DEFAULT_GOAL: build
+
+.PHONY: build
+build:
+	docker build $(DOCKER_OPT_ARGS) -t $(FULL_NAME) --build-arg NODE_ENV=$(NODE_ENV) .
+	docker tag $(FULL_NAME) $(IMAGE_LATEST)
+
+.PHONY: release
+release: build
+	docker push $(IMAGE_LATEST)
+	docker push $(FULL_NAME)
+
+.PHONY: gettag
+gettag:
+	@echo $(GIT_HASH)
+
+.PHONY: run
+run: build
+	docker run $(IMAGE_LATEST)
\ No newline at end of file
diff --git a/helm/values-prd.yaml b/helm/values-prd.yaml
new file mode 100644
index 0000000..f5777e4
--- /dev/null
+++ b/helm/values-prd.yaml
@@ -0,0 +1,9 @@
+url:
+  - "swerve-ui.prd.red.springtools.de"
+resources:
+  requests:
+    memory: "256Mi"
+    cpu: "200m"
+  limits:
+    memory: "512Mi"
+    cpu: "1"
diff --git a/helm/values-stg.yaml b/helm/values-stg.yaml
new file mode 100644
index 0000000..a86cd87
--- /dev/null
+++ b/helm/values-stg.yaml
@@ -0,0 +1,9 @@
+url:
+  - "swerve-ui.stg.red.springtools.de"
+resources:
+  requests:
+    memory: "256Mi"
+    cpu: "200m"
+  limits:
+    memory: "512Mi"
+    cpu: "1"
diff --git a/package-lock.json b/package-lock.json
index 41990fa..f519343 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1550,9 +1550,9 @@
       "dev": true
     },
     "ansi-colors": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.1.tgz",
-      "integrity": "sha512-Xt+zb6nqgvV9SWAVp0EG3lRsHcbq5DDgqjPPz6pwgtj6RKz65zGXMNa82oJfOSBA/to6GmRP7Dr+6o+kbApTzQ==",
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.3.tgz",
+      "integrity": "sha512-LEHHyuhlPY3TmuUYMh2oz89lTShfvgbmzaBcxve9t/9Wuy7Dwf4yoAKcND7KFT1HAQfqZ12qtc+DUrBMeKF9nw==",
       "dev": true
     },
     "ansi-escapes": {
@@ -3213,9 +3213,9 @@
       }
     },
     "connect-history-api-fallback": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz",
-      "integrity": "sha1-sGhzk0vF40T+9hGhlqb6rgruAVo=",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
+      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
       "dev": true
     },
     "console-browserify": {
@@ -3844,7 +3844,7 @@
         },
         "get-stream": {
           "version": "3.0.0",
-          "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
           "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
           "dev": true
         }
@@ -3939,7 +3939,7 @@
       "dependencies": {
         "globby": {
           "version": "6.1.0",
-          "resolved": "http://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
           "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
           "dev": true,
           "requires": {
@@ -3952,7 +3952,7 @@
           "dependencies": {
             "pify": {
               "version": "2.3.0",
-              "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+              "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
               "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
               "dev": true
             }
@@ -5310,9 +5310,9 @@
       }
     },
     "follow-redirects": {
-      "version": "1.5.10",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
-      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.6.1.tgz",
+      "integrity": "sha512-t2JCjbzxQpWvbhts3l6SH1DKzSrx8a+SsaVf4h6bG4kOXUuPYS/kg2Lr4gQSb7eemaHqJkOThF1BGyjlUkO1GQ==",
       "dev": true,
       "requires": {
         "debug": "=3.1.0"
@@ -6185,9 +6185,9 @@
       }
     },
     "handle-thing": {
-      "version": "1.2.5",
-      "resolved": "http://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz",
-      "integrity": "sha1-/Xqtcmvxpf0W38KbL3pmAdJxOcQ=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz",
+      "integrity": "sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ==",
       "dev": true
     },
     "handlebars": {
@@ -6549,7 +6549,7 @@
     },
     "http-proxy-middleware": {
       "version": "0.18.0",
-      "resolved": "http://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz",
       "integrity": "sha512-Fs25KVMPAIIcgjMZkVHJoKg9VcXcC1C8yb9JUgeDvVXY0S/zgVIhMb+qVswDIgtJe2DfckMSY2d6TuTEutlk6Q==",
       "dev": true,
       "requires": {
@@ -9673,9 +9673,9 @@
       "dev": true
     },
     "p-is-promise": {
-      "version": "1.1.0",
-      "resolved": "http://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
-      "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-2.0.0.tgz",
+      "integrity": "sha512-pzQPhYMCAgLAKPWD2jC3Se9fEfrD9npNos0y150EeqZll7akhEgGhTW/slB6lHku8AvYGiJ+YJ5hfHKePPgFWg==",
       "dev": true
     },
     "p-limit": {
@@ -12126,65 +12126,42 @@
       "dev": true
     },
     "spdy": {
-      "version": "3.4.7",
-      "resolved": "https://registry.npmjs.org/spdy/-/spdy-3.4.7.tgz",
-      "integrity": "sha1-Qv9B7OXMD5mjpsKKq7c/XDsDrLw=",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.0.tgz",
+      "integrity": "sha512-ot0oEGT/PGUpzf/6uk4AWLqkq+irlqHXkrdbk51oWONh3bxQmBuljxPNl66zlRRcIJStWq0QkLUCPOPjgjvU0Q==",
       "dev": true,
       "requires": {
-        "debug": "^2.6.8",
-        "handle-thing": "^1.2.5",
+        "debug": "^4.1.0",
+        "handle-thing": "^2.0.0",
         "http-deceiver": "^1.2.7",
-        "safe-buffer": "^5.0.1",
         "select-hose": "^2.0.0",
-        "spdy-transport": "^2.0.18"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
-        }
+        "spdy-transport": "^3.0.0"
       }
     },
     "spdy-transport": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-2.1.1.tgz",
-      "integrity": "sha512-q7D8c148escoB3Z7ySCASadkegMmUZW8Wb/Q1u0/XBgDKMO880rLQDj8Twiew/tYi7ghemKUi/whSYOwE17f5Q==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
+      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
       "dev": true,
       "requires": {
-        "debug": "^2.6.8",
-        "detect-node": "^2.0.3",
+        "debug": "^4.1.0",
+        "detect-node": "^2.0.4",
         "hpack.js": "^2.1.6",
-        "obuf": "^1.1.1",
-        "readable-stream": "^2.2.9",
-        "safe-buffer": "^5.0.1",
-        "wbuf": "^1.7.2"
+        "obuf": "^1.1.2",
+        "readable-stream": "^3.0.6",
+        "wbuf": "^1.7.3"
       },
       "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+        "readable-stream": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.1.1.tgz",
+          "integrity": "sha512-DkN66hPyqDhnIQ6Jcsvx9bFjhw214O4poMBcIMgPVpQvNy9a0e0Uhg5SqySyDKAmUlwt8LonTBz1ezOnM8pUdA==",
           "dev": true,
           "requires": {
-            "ms": "2.0.0"
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
           }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
         }
       }
     },
@@ -13775,9 +13752,9 @@
       }
     },
     "webpack-dev-server": {
-      "version": "3.1.10",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.1.10.tgz",
-      "integrity": "sha512-RqOAVjfqZJtQcB0LmrzJ5y4Jp78lv9CK0MZ1YJDTaTmedMZ9PU9FLMQNrMCfVu8hHzaVLVOJKBlGEHMN10z+ww==",
+      "version": "3.1.14",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.1.14.tgz",
+      "integrity": "sha512-mGXDgz5SlTxcF3hUpfC8hrQ11yhAttuUQWf1Wmb+6zo3x6rb7b9mIfuQvAPLdfDRCGRGvakBWHdHOa0I9p/EVQ==",
       "dev": true,
       "requires": {
         "ansi-html": "0.0.7",
@@ -13799,21 +13776,23 @@
         "portfinder": "^1.0.9",
         "schema-utils": "^1.0.0",
         "selfsigned": "^1.9.1",
+        "semver": "^5.6.0",
         "serve-index": "^1.7.2",
         "sockjs": "0.3.19",
         "sockjs-client": "1.3.0",
-        "spdy": "^3.4.1",
+        "spdy": "^4.0.0",
         "strip-ansi": "^3.0.0",
         "supports-color": "^5.1.0",
+        "url": "^0.11.0",
         "webpack-dev-middleware": "3.4.0",
         "webpack-log": "^2.0.0",
         "yargs": "12.0.2"
       },
       "dependencies": {
         "ajv-keywords": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.2.0.tgz",
-          "integrity": "sha1-6GuBnGAs+IIa1jdBNpjx3sAhhHo=",
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.3.0.tgz",
+          "integrity": "sha512-CMzN9S62ZOO4sA/mJZIO4S++ZM7KFWzH3PPWkveLhy4OZ9i1/VatgwWMD46w/XbGCBy7Ye0gCk+Za6mmyfKK7g==",
           "dev": true
         },
         "ansi-regex": {
@@ -13840,21 +13819,6 @@
             "xregexp": "4.0.0"
           }
         },
-        "execa": {
-          "version": "0.10.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-0.10.0.tgz",
-          "integrity": "sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==",
-          "dev": true,
-          "requires": {
-            "cross-spawn": "^6.0.0",
-            "get-stream": "^3.0.0",
-            "is-stream": "^1.1.0",
-            "npm-run-path": "^2.0.0",
-            "p-finally": "^1.0.0",
-            "signal-exit": "^3.0.0",
-            "strip-eof": "^1.0.0"
-          }
-        },
         "find-up": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
@@ -13864,12 +13828,6 @@
             "locate-path": "^3.0.0"
           }
         },
-        "get-stream": {
-          "version": "3.0.0",
-          "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-          "dev": true
-        },
         "import-local": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
@@ -13906,31 +13864,31 @@
           }
         },
         "mem": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/mem/-/mem-4.0.0.tgz",
-          "integrity": "sha512-WQxG/5xYc3tMbYLXoXPm81ET2WDULiU5FxbuIoNbJqLOOI8zehXFdZuiUEgfdrU2mVB1pxBZUGlYORSrpuJreA==",
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/mem/-/mem-4.1.0.tgz",
+          "integrity": "sha512-I5u6Q1x7wxO0kdOpYBB28xueHADYps5uty/zg936CiG8NTe5sJL8EjrCuLneuDW3PlMdZBGDIn8BirEVdovZvg==",
           "dev": true,
           "requires": {
             "map-age-cleaner": "^0.1.1",
             "mimic-fn": "^1.0.0",
-            "p-is-promise": "^1.1.0"
+            "p-is-promise": "^2.0.0"
           }
         },
         "os-locale": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.0.1.tgz",
-          "integrity": "sha512-7g5e7dmXPtzcP4bgsZ8ixDVqA7oWYuEz4lOSujeWyliPai4gfVDiFIcwBg3aGCPnmSGfzOKTK3ccPn0CKv3DBw==",
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
+          "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
           "dev": true,
           "requires": {
-            "execa": "^0.10.0",
+            "execa": "^1.0.0",
             "lcid": "^2.0.0",
             "mem": "^4.0.0"
           }
         },
         "p-limit": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.0.0.tgz",
-          "integrity": "sha512-fl5s52lI5ahKCernzzIyAP0QAZbGIovtVHGwpcu1Jr/EpzLVDI2myISHwGqK7m8uQFugVWSrbxH7XnhGtvEc+A==",
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.1.0.tgz",
+          "integrity": "sha512-NhURkNcrVB+8hNfLuysU8enY5xn2KXphsHBaC2YmRNTZRc7RWusw6apSpdEj3jo4CMb6W9nrF6tTnsJsJeyu6g==",
           "dev": true,
           "requires": {
             "p-try": "^2.0.0"
@@ -13973,7 +13931,7 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
           "requires": {
diff --git a/package.json b/package.json
index 4054b32..305274c 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,10 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "test:unit": "vue-cli-service test:unit"
+    "test:unit": "vue-cli-service test:unit",
+    "check:all": "yarn check:lint && yarn test:unit && yarn test:integration && yarn check:bundle",
+    "check:lint": "yarn lint --no-fix",
+    "check:bundle": "es-check es5 dist/**/*.js"
   },
   "dependencies": {
     "register-service-worker": "^1.5.2",
@@ -37,8 +40,7 @@
       "node": true
     },
     "extends": [
-      "plugin:vue/essential",
-      "@vue/prettier"
+      "plugin:vue/essential"
     ],
     "rules": {},
     "parserOptions": {
diff --git a/src/app.css b/src/app.css
index 32ff777..7f16128 100644
--- a/src/app.css
+++ b/src/app.css
@@ -63,4 +63,3 @@
   * @import "utilities/background-patterns";
   * @import "utilities/skew-transforms";
   */
- 
\ No newline at end of file
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 55d7fda..644c2f5 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -17,11 +17,10 @@ export default {
   name: "app-header",
   methods: {
     ...mapMutations('auth', [
-      'clearToken'
+      'clearLoginData'
     ]),
     logout() {
-      console.log("logout");
-      this.clearToken();
+      this.clearLoginData();
       this.$router.push({name: "login"});
     }
   }
diff --git a/src/components/DomainPaths.vue b/src/components/DomainPaths.vue
index d6a10ba..085ce92 100644
--- a/src/components/DomainPaths.vue
+++ b/src/components/DomainPaths.vue
@@ -1,14 +1,43 @@
 <template>
   <div>
     <div v-if="!showForm">
+      <div v-if="this.paths && this.paths.length > 0">
+      <input
+        name="search-field"
+        id="search-field"
+        placeholder="Search..."
+        v-on:keyup.enter="setFilter"
+        class="form-input mb-4"
+        :hidden="!paths"
+      >
+      <button
+        @click.prevent="prevPage"
+        class="button button-secondary button-small mr-4"
+        :disabled="pageNumber==1"
+        :hidden="!paths"
+      >previous</button>
+      <button
+        @click.prevent="nextPage"
+        class="button button-primary button-small"
+        :disabled="pageNumber >= pageCount"
+        :hidden="!paths"
+      >next</button>
+      <br>
+      <br>
+      <div class="text-white" :hidden="!paths">{{pageNumber + "/" + pageCount}}</div>
+      <br>
       <ul class="list-reset">
-        <li class="flex mb-1 pb-1 border-b border-blue-dark2" v-for="path of paths" :key="path.from + path.to">
+        <li
+          class="flex mb-1 pb-1 border-b border-blue-dark2"
+          v-for="path of paginatedData"
+          :key="path.from + path.to"
+        >
           <div class="flex-1">
             <div class="text-blue-lightest text-base font-bold mr-1 mb-1 flex">
               <div class="inline-block w-12">From</div>
               <div class="text-white">
                 <div>{{path.from}}</div>
-                <div class="text-xs text-nepal">{{target}}{{path.from}}</div>
+                <div class="text-xs text-nepal">{{domain}}{{path.from}}</div>
               </div>
             </div>
             <div class="text-blue-lightest text-base font-bold mr-1 flex">
@@ -20,25 +49,61 @@
             </div>
           </div>
           <div class="self-center">
-            <button @click.prevent="remove(path)" class="button button-secondary button-small mr-4" type="submit">Remove</button>
-            <button @click.prevent="edit(path)" class="button button-primary button-small" type="submit">Edit</button>
+            <button
+              @click.prevent="remove(path)"
+              class="button button-secondary button-small mr-4"
+              type="submit"
+            >Remove</button>
+            <button
+              @click.prevent="edit(path)"
+              class="button button-primary button-small"
+              type="submit"
+            >Edit</button>
           </div>
         </li>
       </ul>
-      <button @click.prevent="create" class="button button-primary button-small" type="submit">New Path</button>
+      </div>
+      <button
+        @click.prevent="create"
+        class="button button-primary button-small"
+        type="submit"
+      >New Path</button>
     </div>
     <div v-if="showForm">
       <div class="mb-1">
         <label for="from-field" class="form-label mb-1">From</label>
-        <input v-model="from" type="text" name="from-field" id="from-field" placeholder="/from/path" class="form-input" autofocus>
+        <input
+          v-model="from"
+          type="text"
+          name="from-field"
+          id="from-field"
+          placeholder="/from/path"
+          class="form-input"
+          autofocus
+        >
       </div>
       <div class="mb-4">
         <label for="to-field" class="form-label mb-1">To</label>
-        <input v-model="to" type="text" name="to-field" id="to-field" placeholder="/to/path" class="form-input">
+        <input
+          v-model="to"
+          type="text"
+          name="to-field"
+          id="to-field"
+          placeholder="/to/path"
+          class="form-input"
+        >
       </div>
       <div class="flex justify-between">
-        <button @click.prevent="add" class="button button-primary button-small" type="submit">{{saveLabel}}</button>
-        <button @click.prevent="cancel" class="text-athens-gray text-sm font-bold rounded py-1 px-4 bg-oxford-blue hover:bg-grey-dark focus:border-blue-light focus:outline-none appearance-none" type="reset">Cancel</button>
+        <button
+          @click.prevent="add"
+          class="button button-primary button-small"
+          type="submit"
+        >{{saveLabel}}</button>
+        <button
+          @click.prevent="cancel"
+          class="text-athens-gray text-sm font-bold rounded py-1 px-4 bg-oxford-blue hover:bg-grey-dark focus:border-blue-light focus:outline-none appearance-none"
+          type="reset"
+        >Cancel</button>
       </div>
     </div>
   </div>
@@ -57,6 +122,14 @@ export default {
     target: {
       type: String,
       default: ""
+    },
+    domain: {
+      type: String,
+      default: ""
+    },
+    size: {
+      type: Number,
+      default: 10
     }
   },
   data() {
@@ -65,28 +138,63 @@ export default {
       from: "",
       to: "",
       isNew: false,
-      pathToEdit: null
-    }
+      pathToEdit: null,
+      pageNumber: 1,
+      currentPaths: this.paths,
+      filter: ""
+    };
   },
   computed: {
     saveLabel() {
       return this.isNew ? "Add Path" : "Update Path";
+    },
+    pageCount() {
+      if (!this.currentPaths) return;
+      let l = this.currentPaths.length, s = this.size;
+      return Math.ceil(l/s);
+    },
+    paginatedData() {
+      this.doFilter();
+      if (!this.currentPaths) return [];
+      let cpPaths = this.currentPaths.slice(0);
+      const start = (this.pageNumber - 1) * this.size,
+        end = start + this.size;
+      return cpPaths.slice(start, end);
     }
-  },
+  }, 
   methods: {
+    setFilter(ev) {
+      this.filter = ev.target.value;
+      this.pageNumber = 1;
+    },
+    doFilter() {
+      let filter = this.filter;
+      if (filter != "" && this.paths) {
+        let cpPaths = this.paths.slice(0);
+        cpPaths = cpPaths.filter(path => path.from.startsWith(filter));
+        this.currentPaths = [...cpPaths].sort(function(a, b) {
+          if (a.from < b.from) return -1;
+          if (a.from > b.from) return 1;
+          return 0;
+        });
+        return;
+      } 
+      this.currentPaths = this.paths;
+    },
     add() {
       this.showForm = false;
 
       if (this.isNew) {
-        this.$emit('add', {
+        this.$emit("add", {
           from: this.from,
           to: this.to
         });
 
+
         return;
       }
 
-      this.$emit('update', {
+      this.$emit("update", {
         from: this.from,
         to: this.to,
         path: this.pathToEdit
@@ -101,7 +209,7 @@ export default {
     edit(path) {
       this.showForm = true;
       this.isNew = false;
-      
+
       this.from = path.from;
       this.to = path.to;
       this.pathToEdit = path;
@@ -115,8 +223,14 @@ export default {
       this.pathToEdit = null;
     },
     remove(path) {
-      this.$emit('remove', path);
+      this.$emit("remove", path);
+    },
+    nextPage() {
+      this.pageNumber++;
+    },
+    prevPage() {
+      this.pageNumber--;
     }
   }
-}
+};
 </script>
diff --git a/src/services/api/http-local-mock.js b/src/services/api/http-local-mock.js
new file mode 100644
index 0000000..38ea4fd
--- /dev/null
+++ b/src/services/api/http-local-mock.js
@@ -0,0 +1,71 @@
+/**
+ * 
+ * @param {string} resource 
+ * 
+ * @returns {Promise}
+ */
+const read = resource => {
+  let data = JSON.parse(localStorage.getItem(resource));
+
+  if (resource === "https://api.swerve.tortuga.cloud/domains") {
+    data = Object.keys(localStorage)
+      .filter(key => key.startsWith("https://api.swerve.tortuga.cloud/domains"))
+      .map(key => JSON.parse(localStorage.getItem(key)));
+  }
+
+  return Promise.resolve({
+    data
+  });
+};
+
+/**
+ * 
+ * @param {string} resource 
+ * @param {*} data 
+ * 
+ * @returns {Promise}
+ */
+const create = (resource, data) => {
+  const id = Math.floor(Math.random() * 1000000);
+  const payload = {
+    ...data,
+    id
+  };
+  const storageKey = resource + '/' + id;
+
+  localStorage.setItem(storageKey, JSON.stringify(payload));
+  
+  return Promise.resolve({
+    data: payload
+  });
+};
+
+/**
+ * 
+ * @param {string} resource 
+ * 
+ * @returns {Promise}
+ */
+const remove = (resource) => {
+  localStorage.removeItem(resource);
+
+  return Promise.resolve({
+
+  });
+};
+
+/**
+ * 
+ * @param {string} resource 
+ * 
+ * @return {Promise}
+ */
+const update = (resource, data) => {
+  localStorage.setItem(resource, JSON.stringify(data));
+  
+  return Promise.resolve({
+    data
+  });
+};
+
+export { read, create, update, remove };
\ No newline at end of file
diff --git a/src/services/api/http-mock.js b/src/services/api/http-mock.js
index 38ea4fd..2fb3f2d 100644
--- a/src/services/api/http-mock.js
+++ b/src/services/api/http-mock.js
@@ -1,71 +1,74 @@
+const handleError = response => {
+  if (!response.ok) {
+    throw new Error(response.statusText);
+  }
+
+  return response;
+};
+
+const toJSON = text => (text.length ? JSON.parse(text) : {});
+
+const toText = response => response.text();
+
+const request = (resource, options = {}) => {
+  return fetch(resource, {
+    method: "GET",
+    ...options
+  })
+    .then(handleError)
+    .then(toText)
+    .then(toJSON);
+};
+
 /**
- * 
- * @param {string} resource 
- * 
+ *
+ * @param {string} resource
+ *
  * @returns {Promise}
  */
 const read = resource => {
-  let data = JSON.parse(localStorage.getItem(resource));
-
-  if (resource === "https://api.swerve.tortuga.cloud/domains") {
-    data = Object.keys(localStorage)
-      .filter(key => key.startsWith("https://api.swerve.tortuga.cloud/domains"))
-      .map(key => JSON.parse(localStorage.getItem(key)));
-  }
-
-  return Promise.resolve({
-    data
+  return request(resource, {
+    method: "GET"
   });
 };
 
 /**
- * 
- * @param {string} resource 
- * @param {*} data 
- * 
+ *
+ * @param {string} resource
+ * @param {*} data
+ *
  * @returns {Promise}
  */
 const create = (resource, data) => {
-  const id = Math.floor(Math.random() * 1000000);
-  const payload = {
-    ...data,
-    id
-  };
-  const storageKey = resource + '/' + id;
-
-  localStorage.setItem(storageKey, JSON.stringify(payload));
-  
-  return Promise.resolve({
-    data: payload
+  return request(resource, {
+    method: "POST",
+    body: JSON.stringify(data)
   });
 };
 
 /**
- * 
- * @param {string} resource 
- * 
+ *
+ * @param {string} resource
+ *
  * @returns {Promise}
  */
-const remove = (resource) => {
-  localStorage.removeItem(resource);
-
-  return Promise.resolve({
-
+const remove = resource => {
+  return request(resource, {
+    method: "DELETE"
   });
 };
 
 /**
- * 
- * @param {string} resource 
- * 
+ *
+ * @param {string} resource
+ *
  * @return {Promise}
  */
 const update = (resource, data) => {
-  localStorage.setItem(resource, JSON.stringify(data));
-  
-  return Promise.resolve({
-    data
+  return request(resource, {
+    method: "PUT",
+    body: JSON.stringify(data)
   });
 };
 
-export { read, create, update, remove };
\ No newline at end of file
+export { read, create, update, remove };
diff --git a/src/services/api/http.js b/src/services/api/http.js
index 52a857d..081d2f5 100644
--- a/src/services/api/http.js
+++ b/src/services/api/http.js
@@ -6,18 +6,19 @@ const handleError = response => {
   return response;
 };
 
-const toJSON = response => response.json();
+const toJSON = text => (text.length ? JSON.parse(text) : {});
+
+const toText = response => response.text();
 
 const request = (resource, options = {}) => {
   return fetch(resource, {
     method: "GET",
     ...options
   })
-  .then(handleError)
-  .then(toJSON)
-  .catch(error => error)
+    .then(handleError)
+    .then(toText)
+    .then(toJSON);
 };
-
 /**
  * 
  * @param {string} resource 
@@ -26,7 +27,8 @@ const request = (resource, options = {}) => {
  */
 const read = resource => {
   return request(resource, {
-    method: 'GET'
+    method: 'GET',
+    credentials: "include",
   });
 };
 
@@ -40,7 +42,8 @@ const read = resource => {
 const create = (resource, data) => {
   return request(resource, {
     method: 'POST',
-    data: JSON.stringify(data)
+    credentials: "include",
+    body: JSON.stringify(data)
   });
 };
 
@@ -52,7 +55,8 @@ const create = (resource, data) => {
  */
 const remove = resource => {
   return request(resource, {
-    method: "DELETE"
+    method: "DELETE",
+    credentials: "include",
   });
 };
 
@@ -65,7 +69,8 @@ const remove = resource => {
 const update = (resource, data) => {
   return request(resource, {
     method: "PUT",
-    data: JSON.stringify(data)
+    credentials: "include",
+    body: JSON.stringify(data)
   });
 };
 
diff --git a/src/services/token.js b/src/services/token.js
index e2965b1..bdeb31c 100644
--- a/src/services/token.js
+++ b/src/services/token.js
@@ -1,13 +1,14 @@
-import { getItem, removeItem, setItem } from "./storage";
+import { getItem, removeItem, setItem } from './storage';
 
-const TOKEN_STORAGE_KEY = "swerve_access_token";
+const TOKEN_STORAGE_KEY = 'swerve_access_token';
+const ENDPOINT_STORAGE_KEY = 'swerve_endpoint';
 
 /**
- * 
- * @param {string} token 
+ *
+ * @param {string} token
  */
-const setToken = (token) => {
-  return setItem(TOKEN_STORAGE_KEY, token);
+const setLoginData = data => {
+  setItem(TOKEN_STORAGE_KEY, data.token);
 };
 
 /**
@@ -17,15 +18,26 @@ const getToken = () => {
   return getItem(TOKEN_STORAGE_KEY);
 };
 
-const clearToken = () => {
-  return removeItem(TOKEN_STORAGE_KEY);
+const getEndpoint = () => {
+  return process.env.VUE_APP_ENDPOINT;
+};
+
+const clearLoginData = () => {
+  removeItem(TOKEN_STORAGE_KEY);
 };
 
 /**
  * @returns {boolean}
  */
 const isValid = () => {
-  return !!getToken();
+  return !!getToken() && !!getEndpoint();
 };
 
-export { TOKEN_STORAGE_KEY, getToken, clearToken, setToken, isValid };
\ No newline at end of file
+export {
+  TOKEN_STORAGE_KEY,
+  getToken,
+  getEndpoint,
+  clearLoginData,
+  setLoginData,
+  isValid
+};
diff --git a/src/store/auth.module.js b/src/store/auth.module.js
index ecbf496..2d54781 100644
--- a/src/store/auth.module.js
+++ b/src/store/auth.module.js
@@ -1,50 +1,32 @@
-import {create} from "api-client";
-import {getToken, setToken, clearToken} from "../services/token";
-
+import { create } from 'api-client';
+import { getToken, setLoginData, clearLoginData } from '../services/token';
 
 const state = {
   token: getToken()
 };
 
-const getters = {
-
-};
+const getters = {};
 
 const actions = {
-  async fetchToken({commit}, {username, password}) {
-    try {
-      /*
-      const response = await create("https://some.api.endpoint", {
-        username,
-        password
-      });
-      */
+  async fetchLoginData({ commit }, { username, password, endpoint }) {
+    const response = await create(endpoint + '/login', {
+      username,
+      password
+    });
 
-      if (username !== 'admin' && password !== 'admin') {
-        return Promise.reject();
-      }
-
-      const response = await Promise.resolve({data: {access_token: 'access_token'}});
-  
-      const token = response.data.access_token;
-  
-      commit('storeToken', token);
-
-      return response;
-    } catch (error) {
-      return error;
-    }
+    return response;
   }
 };
 
 const mutations = {
-  storeToken(state, token) {
-    state.token = token;
-    setToken(token);
+  storeLoginData(state, data) {
+    state.token = data.token;
+    setLoginData(data);
   },
-  clearToken(state) {
+  clearLoginData(state) {
     state.token = null;
-    clearToken();
+    document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+    clearLoginData();
   }
 };
 
@@ -54,4 +36,4 @@ export default {
   getters,
   actions,
   mutations
-}
\ No newline at end of file
+};
diff --git a/src/store/domains.module.js b/src/store/domains.module.js
index 16069a1..bf0af7f 100644
--- a/src/store/domains.module.js
+++ b/src/store/domains.module.js
@@ -1,11 +1,17 @@
-import {read, create, update, remove} from "api-client";
-import Vue from "vue";
+import { read, create, update, remove } from "api-client";
 
 /**
  * @typedef {Object} Domain
  * @property {Number} id
  * @property {String} domain
  * @property {String} redirect
+ * @property {Path[]} paths
+ */
+
+/**
+ * @typedef {Object} Path
+ * @property {String} from
+ * @property {String} to
  */
 
 /**
@@ -17,59 +23,64 @@ const state = {
   domains: []
 };
 
-const getters = {
-
-};
+const getters = {};
 
 const actions = {
-  async fetchOne({commit}, {id}) {
-    let response = await read(`https://api.swerve.tortuga.cloud/domains/${id}`);
+  async fetchOne({ commit }, {endpoint, id}) {
+    let response = await read(`${endpoint}/api/domain/${id}`);
 
     if (!response) {
-      response = {data: {}};
+      response = { data: {} };
     }
 
     return response;
   },
-  async fetchList({commit}) {
-    const response = await read("https://api.swerve.tortuga.cloud/domains");
+  async fetchList({ commit }, {endpoint, cursor}) {
+    const response = await read(endpoint + "/api/domain" + (cursor && cursor != "reload" ? ("?cursor=" + cursor) : ""));
 
-    commit('setDomains', response.data || []);
+    if (cursor == "reload") {
+      response.data.reload = true;
+    }
+    commit("setDomains", response.data || []);
 
     return response;
   },
-  async updateOne({commit}, data) {
-    const response = await update(`https://api.swerve.tortuga.cloud/domains/${data.id}`, data);
+  async updateOne({ commit }, {endpoint, domain}) {
+    const response = await update(`${endpoint}/api/domain/${domain.domain}`, domain);
 
     return response;
   },
-  async createOne({commit}, data) {
-    const response = await create('https://api.swerve.tortuga.cloud/domains', data);
-
-    commit("addDomain", response.data);
+  async createOne({ commit }, {endpoint, domain}) {
+    const response = await create(endpoint + "/api/domain/", domain);
 
     return response;
   },
-  async deleteOne({commit}, data) {
+  async deleteOne({ commit }, {endpoint, domain}) {
+    const response = await remove(`${endpoint}/api/domain/${domain.domain}`);
 
+    return response;
   }
 };
 
 const mutations = {
   /**
-   * @param {DomainState} state 
-   * @param {Domain[]} domains 
+   * @param {DomainState} state
+   * @param {Domain[]} domains
    */
   setDomains(state, domains) {
+    if (state.domains && state.domains.domains && !domains.reload) {
+      state.domains.domains = [...state.domains.domains, ...domains.domains]
+      state.domains.cursor = domains.cursor
+    } else
     state.domains = domains;
   },
   /**
-   * @param {DomainState} state 
-   * @param {Domain} domain 
+   * @param {DomainState} state
+   * @param {Domain} domain
    */
   addDomain(state, domain) {
     state.domains.push(domain);
-  },
+  }
 };
 
 export default {
@@ -78,4 +89,4 @@ export default {
   getters,
   actions,
   mutations
-}
\ No newline at end of file
+};
diff --git a/src/store/index.js b/src/store/index.js
index 812e26d..232ce63 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,7 +1,7 @@
-import Vue from "vue";
-import Vuex from "vuex";
-import auth from "./auth.module";
-import domains from "./domains.module";
+import Vue from 'vue';
+import Vuex from 'vuex';
+import auth from './auth.module';
+import domains from './domains.module';
 
 Vue.use(Vuex);
 
@@ -12,6 +12,12 @@ const mutations = {
   },
   removeNotification(state, notification) {
     state.notifications = state.notifications.filter(n => n !== notification);
+  },
+  updateDomainsLoadingStatus(state, status) {
+    state.isLoadingDomains = status;
+  },
+  updateDomainLoadingStatus(state, status) {
+    state.isLoadingDomain = status;
   }
 };
 
@@ -23,8 +29,11 @@ export default new Vuex.Store({
   },
   state: {
     isLoading: false,
-    notifications: []
+    isLoadingDomains: false,
+    isLoadingDomain: false,
+    notifications: [],
+    endpoint: process.env.VUE_APP_ENDPOINT
   },
   mutations,
   actions: {}
-});
\ No newline at end of file
+});
diff --git a/src/views/DomainDetail.vue b/src/views/DomainDetail.vue
index 995f7af..3923dbc 100644
--- a/src/views/DomainDetail.vue
+++ b/src/views/DomainDetail.vue
@@ -1,25 +1,55 @@
 <template>
   <div>
-    <form @submit.prevent="save" @reset.prevent="cancel" class="max-w-md">
+    <div v-if="isLoadingDomain" class="text-white no-underline">Loading...</div>
+    <form v-if="!isLoadingDomain" @submit.prevent="save" @reset.prevent="cancel" class="w-full">
       <fieldset class="form-fieldset">
         <legend class="form-legend">Basic Data</legend>
         <div class="mb-4">
           <label for="domain-field" class="form-label mb-1 ml-px">Domain</label>
-            <input type="url" name="domain-field" id="domain-field" placeholder="https://domain.com" v-model="domain.domain" required class="form-input">
+          <input
+            name="domain-field"
+            id="domain-field"
+            placeholder="domain.com"
+            v-model="domain.domain"
+            required
+            class="form-input"
+            :disabled="!isNew"
+          />
         </div>
         <div class="mb-1">
           <label for="redirect-field" class="form-label mb-1 ml-px">Redirect</label>
-          <input type="url" name="redirect-field" id="redirect-field" v-model="domain.redirect" placeholder="https://redirect.com" required class="form-input">
+          <input
+            name="redirect-field"
+            id="redirect-field"
+            v-model="domain.redirect"
+            placeholder="redirect.com"
+            required
+            class="form-input"
+          />
         </div>
         <div class="flex mb-4">
-          <input type="checkbox" name="promotable-field" id="promotable-field" class="mr-2" v-model="domain.promotable">
-          <label for="promotable-field" class="form-label">Include Path and Query-String <span class="text-xs">(optional)</span></label>
+          <input
+            type="checkbox"
+            name="promotable-field"
+            id="promotable-field"
+            class="mr-2 bg-blue-dark"
+            v-model="domain.promotable"
+          />
+          <label for="promotable-field" class="form-label">
+            Include Path and Query-String
+            <span class="text-xs">(optional)</span>
+          </label>
         </div>
         <div>
-          <label for="status-field" class="form-label mb-1 ml-px">HTTP Statuscode</label>
-          <select name="status-field" id="status-field" v-model="domain.status" required class="bg-blue-dark border border-blue-dark2 text-l text-white p-2 rounded focus:border-blue-light focus:outline-none appearance-none">
+          <label for="code-field" class="form-label mb-1 ml-px">HTTP Statuscode</label>
+          <select
+            name="code-field"
+            id="code-field"
+            v-model.number="domain.code"
+            required
+            class="bg-blue-dark border border-blue-dark2 text-l text-white p-2 rounded focus:border-blue-light focus:outline-none appearance-none"
+          >
             <option :value="undefined">Please choose ...</option>
-            <option value="200">300 - Multiple Choices</option>
             <option value="301">301 - Moved Permanently</option>
             <option value="302">302 - Found</option>
             <option value="303">303 - See Other</option>
@@ -32,18 +62,38 @@
       </fieldset>
       <fieldset class="form-fieldset">
         <legend class="form-legend">Paths</legend>
-        <domain-paths :paths="domain.paths" :target="domain.redirect" @add="addPath" @update="updatePath" @remove="removePath"></domain-paths>
+        <domain-paths
+          :paths="domain.paths"
+          :target="domain.redirect"
+          :domain="domain.domain"
+          @add="addPath"
+          @update="updatePath"
+          @remove="removePath"
+        ></domain-paths>
       </fieldset>
       <fieldset class="form-fieldset">
         <legend class="form-legend">Additional Information</legend>
         <div>
-          <label for="description-field" class="form-label mb-1 ml-px">Description <span class="text-xs">(optional)</span></label>
-          <textarea rows="3" id="description-field" name="description-field" v-model="domain.description" class="w-full bg-blue-dark border border-blue-dark2 text-l text-white p-2 rounded focus:border-blue-light focus:outline-none appearance-none"></textarea>
+          <label for="description-field" class="form-label mb-1 ml-px">
+            Description
+            <span class="text-xs">(optional)</span>
+          </label>
+          <textarea
+            rows="3"
+            id="description-field"
+            name="description-field"
+            v-model="domain.description"
+            class="w-full bg-blue-dark border border-blue-dark2 text-l text-white p-2 rounded focus:border-blue-light focus:outline-none appearance-none"
+          ></textarea>
         </div>
       </fieldset>
       <div class="flex justify-between">
         <button class="button button-primary" type="submit">Save</button>
-        <button v-if="!isNew" @click.prevent="deleteDomain" class="button bg-crimson hover:bg-cinnabar">Delete Domain</button>
+        <button
+          v-if="!isNew"
+          @click.prevent="deleteDomain"
+          class="button bg-crimson hover:bg-cinnabar"
+        >Delete Domain</button>
         <button class="button button-secondary" type="reset">Cancel</button>
       </div>
     </form>
@@ -51,7 +101,7 @@
 </template>
 
 <script>
-import {mapState, mapActions, mapMutations} from "vuex";
+import { mapState, mapActions, mapMutations } from "vuex";
 import DomainPaths from "../components/DomainPaths";
 
 export default {
@@ -63,50 +113,153 @@ export default {
     return {
       isNew: false,
       domain: {}
-    }
+    };
+  },
+  computed: {
+    ...mapState(["endpoint"]),
+    ...mapState("domains", ["domains"]),
+    ...mapState(["isLoadingDomain"])
   },
   methods: {
     ...mapActions("domains", [
       "fetchOne",
       "createOne",
-      "updateOne"
-    ]),
-    ...mapMutations([
-      "addNotification"
+      "updateOne",
+      "deleteOne",
+      "fetchList"
     ]),
+    ...mapMutations(["addNotification", "updateDomainLoadingStatus"]),
     reset() {
       this.domain = {};
     },
-    save() {
-      if (this.isNew) {
-        this.createOne(this.domain);
-        return;
-      }
-
-      this.updateOne(this.domain).then(() => {
+    reload() {
+      this.fetchList({
+        endpoint: this.endpoint,
+        cursor: "reload"
+      }).catch(() => {
         this.addNotification({
-          type: "success",
-          text: "Domain updated"
+          type: "failure",
+          text: "Domains could not be loaded"
         });
       });
+      this.cancel();
+    },
+    save() {
+      if (this.isNew) {
+        this.createOne({
+          endpoint: this.endpoint,
+          domain: this.domain
+        })
+          .then(() => {
+            this.addNotification({
+              type: "success",
+              text: "Domain created"
+            });
+            this.reload();
+          })
+          .catch(err => {
+            if (err.toString() == "Error: Unauthorized") {
+              this.addNotification({
+                type: "failure",
+                text: "Please relogin"
+              });
+              return;
+            }
+            this.addNotification({
+              type: "failure",
+              text: "Domain could not be created"
+            });
+          });
+        return;
+      } else
+        this.updateOne({
+          endpoint: this.endpoint,
+          domain: this.domain
+        })
+          .then(() => {
+            this.addNotification({
+              type: "success",
+              text: "Domain updated"
+            });
+            this.reload();
+          })
+          .catch(err => {
+            if (err.toString() == "Error: Unauthorized") {
+              this.addNotification({
+                type: "failure",
+                text: "Please relogin"
+              });
+              return;
+            }
+            this.addNotification({
+              type: "failure",
+              text: "Domain could not be updated"
+            });
+          });
     },
     cancel() {
       this.reset();
-      this.$router.push({name: "domains"});
+      this.$router.push({ name: "domains" });
     },
     deleteDomain() {
-
+      this.deleteOne({
+        endpoint: this.endpoint,
+        domain: this.domain
+      })
+        .then(() => {
+          this.addNotification({
+            type: "success",
+            text: "Domain deleted"
+          });
+          this.reload();
+        })
+        .catch(err => {
+          if (err.toString() == "Error: Unauthorized") {
+            this.addNotification({
+              type: "failure",
+              text: "Please relogin"
+            });
+            return;
+          }
+          this.addNotification({
+            type: "failure",
+            text: "Domain could not be deleted"
+          });
+        });
     },
     load(id) {
-      this.fetchOne({id}).then(response => {
-        this.domain = {
-          paths: [],
-          status: "301",
-          ...response.data
-        };
-      });
+      this.updateDomainLoadingStatus(true);
+      this.fetchOne({
+        endpoint: this.endpoint,
+        id
+      })
+        .then(response => {
+          this.updateDomainLoadingStatus(false);
+          this.domain = {
+            paths: [],
+            code: "301",
+            ...response.data
+          };
+        })
+        .catch(err => {
+          this.updateDomainLoadingStatus(false);
+          if (err.toString() == "Error: Unauthorized") {
+            this.$router.push({ name: "login" });
+            return;
+          }
+          this.addNotification({
+            type: "failure",
+            text: "Domain could not be loaded"
+          });
+        });
+    },
+    loadNew() {
+      this.domain = {
+        paths: []
+      };
     },
     addPath(path) {
+      if (!this.domain.paths) this.domain.paths = [];
       this.domain.paths.push(path);
     },
     updatePath(payload) {
@@ -120,11 +273,11 @@ export default {
   beforeRouteUpdate(to, from, next) {
     this.reset();
 
-    this.isNew = to.params.domain === 'new';
+    this.isNew = to.params.domain === "new";
 
     if (!this.isNew) {
       this.load(to.params.domain);
-    }
+    } else this.loadNew();
 
     next();
   },
@@ -132,12 +285,12 @@ export default {
     next(vm => {
       vm.reset();
 
-      vm.isNew = to.params.domain === 'new';
+      vm.isNew = to.params.domain === "new";
 
       if (!vm.isNew) {
         vm.load(to.params.domain);
-      }
+      } else vm.loadNew();
     });
   }
-}
+};
 </script>
diff --git a/src/views/DomainList.vue b/src/views/DomainList.vue
index a15513a..26cdcc6 100644
--- a/src/views/DomainList.vue
+++ b/src/views/DomainList.vue
@@ -1,34 +1,109 @@
 <template>
   <div class="px-2">
-    <h2 class="text-blue text-lg font-bold">Domains</h2>
-    <ul class="list-reset">
-      <router-link v-for="domain of domains" :key="domain.id" tag="li" :to="{name: 'domain', params: {domain: domain.id}}" class="router-link">
-        <a class="text-white no-underline">{{domain.domain}}</a>
-      </router-link>
-    </ul>
+    <h2 class="text-blue text-lg font-bold mb-1">Domains</h2>
+    <input
+      name="search-field"
+      id="search-field"
+      placeholder="Search..."
+      v-on:keyup.enter="onFilter"
+      required
+      class="form-input mb-4"
+    />
+    <div @scroll="onScroll" class="overflow-auto h-24 md:h-64">
+      <div v-if="isLoadingDomains" class="text-white no-underline">Loading...</div>
+      <ul class="list-reset">
+        <router-link
+          v-for="domain of orderedDomains"
+          :key="domain.domain"
+          tag="li"
+          :to="{name: 'domain', params: {domain: domain.domain}}"
+          class="router-link"
+        >
+          <a class="text-white no-underline">{{domain.domain}}</a>
+        </router-link>
+      </ul>
+    </div>
     <div>
-      <router-link to="/domains/new" class="button button-primary inline-block mt-4 no-underline">New Domain</router-link>
+      <router-link
+        to="/domains/new"
+        class="button button-primary inline-block mt-4 no-underline"
+      >New Domain</router-link>
     </div>
   </div>
 </template>
 
 <script>
-import {mapState, mapActions} from "vuex";
+import { mapState, mapActions, mapMutations } from "vuex";
 
 export default {
   name: "domain-list",
+  data() {
+    return {
+      filter: ""
+    };
+  },
   computed: {
-    ...mapState('domains', [
-      'domains'
-    ])
+    ...mapState("domains", ["domains"]),
+    ...mapState(["endpoint"]),
+    ...mapState(["isLoadingDomains"]),
+    orderedDomains: function() {
+      let sortDomains = Object.assign({}, this.domains);
+      if (sortDomains.domains) {
+        if (this.filter != "")
+          sortDomains.domains = sortDomains.domains.filter(domain =>
+            domain.domain.startsWith(this.filter)
+          );
+        return [...sortDomains.domains].sort(function(a, b) {
+          if (a.domain < b.domain) return -1;
+          if (a.domain > b.domain) return 1;
+          return 0;
+        });
+      }
+      return 0;
+    }
   },
   methods: {
-    ...mapActions('domains', [
-      'fetchList'
-    ])
+    ...mapActions("domains", ["fetchList"]),
+    ...mapMutations(["addNotification", "updateDomainsLoadingStatus"]),
+    onFilter(ev) {
+      this.filter = ev.target.value;
+    },
+    onScroll({ target: { scrollTop, clientHeight, scrollHeight } }) {
+      if (scrollTop + clientHeight >= scrollHeight) {
+        if (this.domains.cursor != "EOF") {
+          this.fetchList({
+            endpoint: this.endpoint,
+            cursor: this.domain.cursor
+          }).catch(() => {
+            this.addNotification({
+              type: "failure",
+              text: "Domains could not be loaded"
+            });
+          });
+        }
+      }
+    }
   },
   created() {
-    this.fetchList();
+    this.updateDomainsLoadingStatus(true);
+    this.fetchList({
+      endpoint: this.endpoint,
+      cursor: "reload"
+    })
+      .then(() => {
+        this.updateDomainsLoadingStatus(false);
+      })
+      .catch(err => {
+        this.updateDomainsLoadingStatus(false);
+        if (err.toString() == "Error: Unauthorized") {
+          this.$router.push({ name: "login" });
+          return;
+        }
+        this.addNotification({
+          type: "failure",
+          text: "Domains could not be loaded"
+        });
+      });
   }
-}
+};
 </script>
diff --git a/src/views/Domains.vue b/src/views/Domains.vue
index 01ffad8..1a831bc 100644
--- a/src/views/Domains.vue
+++ b/src/views/Domains.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="flex h-full py-4">
-    <domain-list class="w-1/6"></domain-list>
-    <router-view class="w-5/6"></router-view>
+  <div class="h-full w-full md:flex text-center py-4 px-8">
+    <domain-list class="m-auto w-full mb-24 md:m-0 md:w-1/6"></domain-list>
+    <div class="w-12 h-full"></div>
+    <router-view class="m-auto w-full md:m-0 md:w-auto md:w-2/3"></router-view>
   </div>
 </template>
 
@@ -13,5 +14,5 @@ export default {
   components: {
     DomainList
   }
-}
+};
 </script>
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 34b94aa..188a89a 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,59 +1,113 @@
 <template>
   <div class="flex justify-center items-center sm:items-end h-screen p-4">
-  <transition appear name="slide-fade">
-    <form method="POST" action="" @submit.prevent="onSubmit" class="w-full max-w-screen-sm">
-      <label for="username-input" class="block text-blue-lightest text-base font-bold mb-1 cursor-pointer ml-1">Username</label>
-      <input type="text" name="username" id="username-input" v-model="username" required placeholder="admin" autofocus autocomplete="off" class="w-full bg-blue-dark border border-blue-dark2 text-l text-white p-2 mb-3 rounded focus:border-blue-light focus:outline-none appearance-none">
-      <label for="password-input" class="block text-blue-lightest text-base font-bold mb-1 cursor-pointer ml-1">Password</label>
-      <input type="password" name="password" id="password-input" v-model="password" required placeholder="admin" autocomplete="off" class="w-full bg-blue-dark border border-blue-dark2 text-l text-white p-2 mb-3 rounded focus:border-blue-light focus:outline-none appearance-none">
-      <button :disabled="disabled" class="button button-primary ml-1 sm:w-full disabled:bg-grey-dark disabled:cursor-not-allowed disabled:text-grey-darkest" type="submit">Login</button>
-    </form>
-  </transition>
+    <transition appear name="slide-fade">
+      <form method="POST" action @submit.prevent="onSubmit" class="w-full max-w-screen-sm">
+        <label
+          for="username-input"
+          class="block text-blue-lightest text-base font-bold mb-1 cursor-pointer ml-1"
+        >Username</label>
+        <input
+          type="text"
+          name="username"
+          id="username-input"
+          v-model="username"
+          required
+          autofocus
+          autocomplete="off"
+          class="w-full bg-blue-dark border border-blue-dark2 text-l text-white p-2 mb-3 rounded focus:border-blue-light focus:outline-none appearance-none"
+        />
+        <label
+          for="password-input"
+          class="block text-blue-lightest text-base font-bold mb-1 cursor-pointer ml-1"
+        >Password</label>
+        <input
+          type="password"
+          name="password"
+          id="password-input"
+          v-model="password"
+          required
+          autocomplete="off"
+          class="w-full bg-blue-dark border border-blue-dark2 text-l text-white p-2 mb-3 rounded focus:border-blue-light focus:outline-none appearance-none"
+        />
+        <button
+          :disabled="disabled"
+          class="button button-primary ml-1 sm:w-full disabled:bg-grey-dark disabled:cursor-not-allowed disabled:text-grey-darkest"
+          type="submit"
+        >Login</button>
+      </form>
+    </transition>
   </div>
 </template>
 
 <script>
-import {mapActions} from "vuex";
+import { mapActions, mapMutations } from "vuex";
+import { getEndpoint } from "../services/token";
 
 export default {
   data() {
+    let endpoint = getEndpoint();
+
     return {
-      username: null,
-      password: null,
+      username: "",
+      password: "",
+      endpoint: endpoint,
       disabled: false
-    }
+    };
   },
   methods: {
-    ...mapActions('auth', [
-      'fetchToken'
-    ]),
+    ...mapActions("auth", ["fetchLoginData"]),
+    ...mapMutations(["addNotification"]),
     onSubmit() {
+      let url;
+      try {
+        url = new URL(this.endpoint);
+      } catch (e) {
+        this.addNotification({
+          type: "failure",
+          text: "Please enter a valid endpoint"
+        });
+        return;
+      }
+      if (!url.origin) {
+        this.addNotification({
+          type: "failure",
+          text: "Please enter a valid endpoint"
+        });
+      }
       this.disabled = true;
 
-      this.fetchToken({
-        username: this.username, 
-        password: this.password
-      }).then(() => {
-        this.$router.push(this.$router.history.current.query.redirectTo || '/');
-      }).catch(() => {
-        this.disabled = false;
-      });
+      this.fetchLoginData({
+        username: this.username,
+        password: this.password,
+        endpoint: url.origin
+      })
+        .then(res => {
+          this.$router.push(
+            this.$router.history.current.query.redirectTo || "/"
+          );
+        })
+        .catch(err => {
+          this.addNotification({
+            type: "failure",
+            text: "Login failed"
+          });
+          this.disabled = false;
+        });
     }
   }
-}
+};
 </script>
 
 <style>
 .slide-fade-enter-active {
-  transition: all .3s ease;
+  transition: all 0.3s ease;
 }
 .slide-fade-leave-active {
-  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
 }
-.slide-fade-enter, .slide-fade-leave-to {
+.slide-fade-enter,
+.slide-fade-leave-to {
   transform: translateX(10px);
   opacity: 0;
 }
 </style>
-
-
diff --git a/vue.config.js b/vue.config.js
index 37e3807..388f9f2 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -4,15 +4,21 @@ module.exports = {
   productionSourceMap: false,
 
   pwa: {
-    name: 'SwerveUI'
+    name: "SwerveUI"
   },
 
   chainWebpack: config => {
     console.log("chainwebpack");
-    if (process.env.NODE_ENV === 'production') {
-      config.resolve.alias.set('api-client$', path.join(__dirname, 'src/services/api/http.js'));
+    if (process.env.NODE_ENV === "production") {
+      config.resolve.alias.set(
+        "api-client$",
+        path.join(__dirname, "src/services/api/http.js")
+      );
     } else {
-      config.resolve.alias.set('api-client$', path.join(__dirname, 'src/services/api/http-mock.js'));
+      config.resolve.alias.set(
+        "api-client$",
+        path.join(__dirname, "src/services/api/http-mock.js")
+      );
     }
   }
-}
\ No newline at end of file
+};