diff --git a/ui/app/src/app.js b/ui/app/src/app.js
index 9eb7569e6..20c92e63e 100644
--- a/ui/app/src/app.js
+++ b/ui/app/src/app.js
@@ -214,13 +214,13 @@ const delete_cluster = (namespace, clustername) => {
                     jQuery.ajax({
                         type: 'DELETE',
                         url: (
-                            '/postgresqls/'
+                            './postgresqls/'
               + encodeURI(namespace)
               + '/' + encodeURI(clustername)
                         ),
                         dataType: 'text',
-                        success: () => location.assign('/#/list'),
-                        error: (r, status, error) => location.assign('/#/list'), // TODO: show error
+                        success: () => location.assign('./#/list'),
+                        error: (r, status, error) => location.assign('./#/list'), // TODO: show error
                     })
                 },
             },
diff --git a/ui/app/src/app.tag.pug b/ui/app/src/app.tag.pug
index 365371e63..f53d425da 100644
--- a/ui/app/src/app.tag.pug
+++ b/ui/app/src/app.tag.pug
@@ -4,23 +4,23 @@ app
     .container
 
       .navbar-header
-        a.navbar-brand(href='/')
+        a.navbar-brand(href='./')
           | PostgreSQL Operator UI
 
       #navbar.navbar-collapse.collapse
         ul.nav.navbar-nav
 
           li(class='{ active: ["EDIT", "LIST", "LOGS", "STATUS"].includes(activenav) }')
-            a(href='/#/list') PostgreSQL clusters
+            a(href='./#/list') PostgreSQL clusters
 
           li(class='{ active: "BACKUPS" === activenav }')
-            a(href='/#/backups') Backups
+            a(href='./#/backups') Backups
 
           li(class='{ active: "OPERATOR" === activenav }')
-            a(href='/#/operator') Status
+            a(href='./#/operator') Status
 
           li(class='{ active: "NEW" === activenav }')
-            a(href='/#/new') New cluster
+            a(href='./#/new') New cluster
 
           li(if='{ config }')
             a(href='{ config.docs_link }' target='_blank') Documentation
@@ -55,7 +55,7 @@ app
       |
       | or
       |
-      a(href="/") start over
+      a(href="./") start over
       | .
 
     div(if='{ config }')
@@ -152,12 +152,12 @@ app
 
     ;(
       jQuery
-      .get('/config')
+      .get('./config')
       .done(config => {
         this.config = config
         ;(
           jQuery
-          .get('/teams')
+          .get('./teams')
           .done(teams => {
             this.teams = teams.sort()
             this.team = this.teams[0]
diff --git a/ui/app/src/edit.tag.pug b/ui/app/src/edit.tag.pug
index ddcaa4653..5b03c06da 100644
--- a/ui/app/src/edit.tag.pug
+++ b/ui/app/src/edit.tag.pug
@@ -6,18 +6,18 @@ edit
         ol.breadcrumb
 
           li.breadcrumb-item
-            a(href='/#/list')
+            a(href='./#/list')
               | PostgreSQL clusters
 
           li.breadcrumb-item(if='{ cluster_path }')
-            a(href='/#/status/{ cluster_path }')
+            a(href='./#/status/{ cluster_path }')
               | { qname }
 
           li.breadcrumb-item.active(
             aria-current='page'
             if='{ cluster_path }'
           )
-            a(href='/#/edit/{ cluster_path }')
+            a(href='./#/edit/{ cluster_path }')
               | Edit
 
     .row(if='{ cluster_path }')
@@ -92,7 +92,7 @@ edit
 
       jQuery.ajax({
         type: 'POST',
-        url: '/postgresqls/' + this.cluster_path,
+        url: './postgresqls/' + this.cluster_path,
         contentType:"application/json",
         data: jsonPayload,
         processData: false,
@@ -113,7 +113,7 @@ edit
 
     this.pollProgress = () => {
       jQuery.get(
-        '/postgresqls/' + this.cluster_path,
+        './postgresqls/' + this.cluster_path,
       ).then(data => {
 
         // Input data:
@@ -148,6 +148,9 @@ edit
           throughput: i.spec.volume.throughput || 125,
           iops: i.spec.volume.iops || 3000
         }
+        if ('storageClass' in i.spec.volume) {
+            o.spec.volume.storageClass=i.spec.volume.storageClass
+        }
 
         o.spec.postgresql = {}
         o.spec.postgresql.version = i.spec.postgresql.version
diff --git a/ui/app/src/logs.tag.pug b/ui/app/src/logs.tag.pug
index e25cc979e..be79168af 100644
--- a/ui/app/src/logs.tag.pug
+++ b/ui/app/src/logs.tag.pug
@@ -5,15 +5,15 @@ logs
       ol.breadcrumb
 
         li.breadcrumb-item
-          a(href='/#/list')
+          a(href='./#/list')
             | PostgreSQL clusters
 
         li.breadcrumb-item
-          a(href='/#/status/{ cluster_path }')
+          a(href='./#/status/{ cluster_path }')
             | { qname }
 
         li.breadcrumb-item
-          a(href='/#/logs/{ cluster_path }')
+          a(href='./#/logs/{ cluster_path }')
             | Logs
 
   .sk-spinner-pulse(if='{ logs === undefined }')
@@ -26,7 +26,7 @@ logs
       |
       | or
       |
-      a(href="/") start over
+      a(href="./") start over
       | .
 
   .container-fluid(if='{ logs }')
@@ -72,7 +72,7 @@ logs
         )
         ;(
           jQuery
-          .get(`/operator/clusters/${cluster_path}/logs`)
+          .get(`./operator/clusters/${cluster_path}/logs`)
           .done(logs => this.logs = logs.reverse())
           .fail(() => this.logs = null)
           .always(() => this.update())
diff --git a/ui/app/src/new.tag.pug b/ui/app/src/new.tag.pug
index c066ad4f4..5c21f93c7 100644
--- a/ui/app/src/new.tag.pug
+++ b/ui/app/src/new.tag.pug
@@ -18,7 +18,7 @@ new
         ol.breadcrumb
 
           li.breadcrumb-item
-            a(href='/#/new')
+            a(href='./#/new')
               | New PostgreSQL cluster
 
     .row.text-center(if='{ !creating }')
@@ -64,7 +64,7 @@ new
 
               a.btn.btn-small.btn-warning(
                 if='{ clusterExists }'
-                href='/#/status/{ namespace.state }/{ name }'
+                href='./#/status/{ namespace.state }/{ name }'
               )
                 | Cluster exists (show status)
 
@@ -299,8 +299,21 @@ new
                   )
                   .input-group-addon
                     .input-units Gi
+
             tr
+              td storageClass
               td
+                .input-group
+                  input.form-control(
+                    ref='volumeStorageClass'
+                    type='text'
+                    value='{ volumeStorageClass }'
+                    onchange='{ storageClassChange }'
+                    onkeyup='{ storageClassChange }'
+                  )
+
+            tr
+              td 
               td Specify Iops and Throughput only if you need more than the default 3000 Iops and 125Mb/s EBS provides.
 
             tr
@@ -582,7 +595,8 @@ new
         enableReplicaPoolerLoadBalancer: true
         {{/if}}
         volume:
-          size: "{{ volumeSize }}Gi"{{#if iops}}
+          size: "{{ volumeSize }}Gi"{{#if volumeStorageClass}}
+          storageClass: "{{ volumeStorageClass }}"{{/if}}{{#if iops}}
           iops: {{ iops }}{{/if}}{{#if throughput}}
           throughput: {{ throughput }}{{/if}}
         {{#if users}}
@@ -638,6 +652,7 @@ new
         enableMasterPoolerLoadBalancer: this.enableMasterPoolerLoadBalancer,
         enableReplicaPoolerLoadBalancer: this.enableReplicaPoolerLoadBalancer,
         volumeSize: this.volumeSize,
+        volumeStorageClass: this.volumeStorageClass,
         iops: this.iops,
         throughput: this.throughput,
         users: this.users.valids,
@@ -716,6 +731,10 @@ new
       this.volumeSize = +e.target.value
     }
 
+    this.storageClassChange = e => {
+      this.volumeStorageClass = e.target.value
+    }
+
     this.iopsChange = e => {
       this.iops = +e.target.value
     }
@@ -759,7 +778,7 @@ new
     this.checkClusterExists = () => (
       jQuery
       .get(
-        '/postgresqls/'
+        './postgresqls/'
         + this.namespace.state
         + '/'
         + this.clusterName
@@ -781,7 +800,7 @@ new
 
       jQuery.ajax({
         type: 'POST',
-        url: '/create-cluster',
+        url: './create-cluster',
         contentType:'application/json',
         data: jsonPayload,
         processData: false,
@@ -1013,6 +1032,7 @@ new
 
       this.clusterName = (this.name + '-').toLowerCase()
       this.volumeSize = 10
+      this.volumeStorageClass = ''
       this.instanceCount = 1
       this.ranges = {}
       this.odd = ''
diff --git a/ui/app/src/postgresql.tag.pug b/ui/app/src/postgresql.tag.pug
index f1b15ca81..e40315bb5 100644
--- a/ui/app/src/postgresql.tag.pug
+++ b/ui/app/src/postgresql.tag.pug
@@ -6,11 +6,11 @@ postgresql
         ol.breadcrumb
 
           li.breadcrumb-item
-            a(href='/#/list')
+            a(href='./#/list')
               | PostgreSQL clusters
 
           li.breadcrumb-item(if='{ cluster_path }')
-            a(href='/#/status/{ cluster_path }')
+            a(href='./#/status/{ cluster_path }')
               | { qname }
 
     .row(if='{ cluster_path }')
@@ -39,20 +39,20 @@ postgresql
             )
 
               a.btn.btn-info(
-                href='/#/logs/{ cluster_path }'
+                href='./#/logs/{ cluster_path }'
               )
                 | Logs
 
               a.btn(
                 class='btn-{ opts.read_write ? "primary" : "info" }'
                 if='{ progress.postgresql }'
-                href='/#/clone/{ clustername }/{ uid }/{ encodeURI(new Date().toISOString()) }'
+                href='./#/clone/{ clustername }/{ uid }/{ encodeURI(new Date().toISOString()) }'
               )
                 | Clone
 
               a.btn(
                 class='btn-{ opts.read_write ? "warning" : "info" }'
-                href='/#/edit/{ cluster_path }'
+                href='./#/edit/{ cluster_path }'
               )
                 | Edit
 
@@ -124,7 +124,7 @@ postgresql
 
     this.pollProgress = () => {
       jQuery.get(
-        '/postgresqls/' + this.cluster_path,
+        './postgresqls/' + this.cluster_path,
       ).done(data => {
         this.progress.pooler = false
         this.progress.postgresql = true
@@ -137,13 +137,13 @@ postgresql
         this.update()
 
         jQuery.get(
-          '/statefulsets/' + this.cluster_path,
+          './statefulsets/' + this.cluster_path,
         ).done(data => {
           this.progress.statefulSet = true
           this.update()
 
           jQuery.get(
-            '/statefulsets/' + this.cluster_path + '/pods',
+            './statefulsets/' + this.cluster_path + '/pods',
           ).done(data => {
             if (data.length > 0) {
                 this.progress.containerFirst = true
@@ -157,7 +157,7 @@ postgresql
             this.update()
 
             jQuery.get(
-              '/services/' + this.cluster_path,
+              './services/' + this.cluster_path,
             ).done(data => {
               if (data.metadata && data.metadata.annotations && 'zalando.org/dnsname' in data.metadata.annotations) {
                 this.progress.dnsName = data.metadata.annotations['zalando.org/dnsname']
@@ -169,12 +169,12 @@ postgresql
               }
 
               if (this.progress.poolerEnabled == true) {
-                jQuery.get('/pooler/' + this.cluster_path).done(data => {
+                jQuery.get('./pooler/' + this.cluster_path).done(data => {
                   this.progress.pooler = {"url": ""}
                   this.update()
                 })
               }
-              
+
               this.update()
             })
           })
diff --git a/ui/app/src/postgresqls.tag.pug b/ui/app/src/postgresqls.tag.pug
index 6b60b9f8a..aed0d21b0 100644
--- a/ui/app/src/postgresqls.tag.pug
+++ b/ui/app/src/postgresqls.tag.pug
@@ -6,7 +6,7 @@ postgresqls
         ol.breadcrumb
 
           li.breadcrumb-item
-            a(href='/#/list')
+            a(href='./#/list')
               | PostgreSQL clusters
 
     .sk-spinner-pulse(
@@ -20,7 +20,7 @@ postgresqls
       |
       | or
       |
-      a(href='/') start over
+      a(href='./') start over
       | .
 
     div(
@@ -81,7 +81,7 @@ postgresqls
             td(style='white-space: pre')
               | { namespace }
             td
-              a(href='/#/status/{ cluster_path(this) }') { name }
+              a(href='./#/status/{ cluster_path(this) }') { name }
               btn.btn-danger(if='{status.PostgresClusterStatus == "CreateFailed"}') Create Failed
             td { nodes }
             td { cpu } / { cpu_limit }
@@ -101,7 +101,7 @@ postgresqls
               )
 
                 a.btn.btn-info(
-                  href='/#/status/{ cluster_path(this) }'
+                  href='./#/status/{ cluster_path(this) }'
                 )
                   i.fa.fa-check-circle.regular
                   | Status
@@ -114,21 +114,21 @@ postgresqls
                   | Pgview
 
                 a.btn.btn-info(
-                  href='/#/logs/{ cluster_path(this) }'
+                  href='./#/logs/{ cluster_path(this) }'
                 )
                   i.fa.fa-align-justify
                   | Logs
 
                 a.btn(
                   class='btn-{ opts.read_write ? "primary" : "info" }'
-                  href='/#/clone/{ encodeURI(name) }/{ encodeURI(uid) }/{ encodeURI(new Date().toISOString()) }'
+                  href='./#/clone/{ encodeURI(name) }/{ encodeURI(uid) }/{ encodeURI(new Date().toISOString()) }'
                 )
                   i.fa.fa-clone.regular
                   | Clone
 
                 a.btn(
                   class='btn-{ opts.read_write ? "warning" : "info" }'
-                  href='/#/edit/{ cluster_path(this) }'
+                  href='./#/edit/{ cluster_path(this) }'
                 )
                   | Edit
 
@@ -183,7 +183,7 @@ postgresqls
               | { namespace }
             td
               a(
-                href='/#/status/{ cluster_path(this) }'
+                href='./#/status/{ cluster_path(this) }'
               )
                 | { name }
             td { nodes }
@@ -203,7 +203,7 @@ postgresqls
               )
 
                 a.btn.btn-info(
-                  href='/#/status/{ cluster_path(this) }'
+                  href='./#/status/{ cluster_path(this) }'
                 )
                   i.fa.fa-check-circle.regular
                   | Status
@@ -217,21 +217,21 @@ postgresqls
                   | Pgview
 
                 a.btn.btn-info(
-                  href='/#/logs/{ cluster_path(this) }'
+                  href='./#/logs/{ cluster_path(this) }'
                 )
                   i.fa.fa-align-justify
                   | Logs
 
                 a.btn(
                   class='btn-{ opts.read_write ? "primary" : "info" }'
-                  href='/#/clone/{ encodeURI(name) }/{ encodeURI(uid) }/{ encodeURI(new Date().toISOString()) }'
+                  href='./#/clone/{ encodeURI(name) }/{ encodeURI(uid) }/{ encodeURI(new Date().toISOString()) }'
                 )
                   i.fa.fa-clone.regular
                   | Clone
 
                 a.btn(
                   class='btn-{ opts.read_write ? "warning" : "info" }'
-                  href='/#/edit/{ cluster_path(this) }'
+                  href='./#/edit/{ cluster_path(this) }'
                 )
                   | Edit
 
@@ -343,7 +343,7 @@ postgresqls
 
     this.on('mount', () =>
       jQuery
-      .get('/postgresqls')
+      .get('./postgresqls')
       .done(clusters => {
         this.my_clusters = []
         this.other_clusters = []
diff --git a/ui/app/src/restore.tag.pug b/ui/app/src/restore.tag.pug
index 3a322df3f..523dbfbed 100644
--- a/ui/app/src/restore.tag.pug
+++ b/ui/app/src/restore.tag.pug
@@ -10,7 +10,7 @@ restore
       |
       | or
       |
-      a(href="/") start over
+      a(href="./") start over
       | .
 
     p(if='{ stored_clusters && stored_clusters.length === 0 }')
@@ -23,7 +23,7 @@ restore
           ol.breadcrumb
 
             li.breadcrumb-item
-              a(href='/#/backups')
+              a(href='./#/backups')
                 | PostgreSQL cluster backups ({ stored_clusters.length })
 
       p
@@ -63,7 +63,7 @@ restore
               p(if='{ versions === null }')
                 | Error loading backups.  Please try again or
                 |
-                a(href="/") start over
+                a(href="./") start over
                 | .
 
               p(if='{ versions && versions.length === 0 }')
@@ -96,7 +96,7 @@ restore
                         p(if='{ basebackups === null }')
                           | Error loading snapshots.  Please try again or
                           |
-                          a(href="/") start over
+                          a(href="./") start over
                           | .
 
                         p(if='{ basebackups && basebackups.length === 0 }')
@@ -312,7 +312,7 @@ restore
       get_subresources_once({
         parent_resource: this,
         key: 'stored_clusters',
-        url: '/stored_clusters',
+        url: './stored_clusters',
         build_subresource: stored_cluster_name => ({
           id: 'stored-cluster-' + stored_cluster_name,
           name: stored_cluster_name,
@@ -324,7 +324,7 @@ restore
           body: stored_cluster => get_subresources_once({
             parent_resource: stored_cluster,
             key: 'versions',
-            url: '/stored_clusters/' + stored_cluster.name,
+            url: './stored_clusters/' + stored_cluster.name,
             build_subresource: version_name => ({
               id: stored_cluster.id + '-version-' + version_name,
               name: version_name,
@@ -340,7 +340,7 @@ restore
                 parent_resource: version,
                 key: 'basebackups',
                 url: (
-                  '/stored_clusters/' + stored_cluster.name
+                  './stored_clusters/' + stored_cluster.name
                   + '/' + version.name
                 ),
                 build_subresource: basebackup => Object.assign(basebackup, {
diff --git a/ui/app/src/status.tag.pug b/ui/app/src/status.tag.pug
index eae63fbdb..8a35703d9 100644
--- a/ui/app/src/status.tag.pug
+++ b/ui/app/src/status.tag.pug
@@ -6,19 +6,19 @@ status
         ol.breadcrumb
 
           li.breadcrumb-item
-            a(href='/#/operator')
+            a(href='./#/operator')
               | Workers
 
           virtual(if='{ operatorShowLogs && logs }')
             li.breadcrumb-item { worker_id }
             li.breadcrumb-item
-              a(href='/#/operator/worker/{ worker_id }/logs')
+              a(href='./#/operator/worker/{ worker_id }/logs')
                 | Logs
 
           virtual(if='{ operatorShowQueue && queue }')
             li.breadcrumb-item { worker_id }
             li.breadcrumb-item
-              a(href='/#/operator/worker/{ worker_id }/queue')
+              a(href='./#/operator/worker/{ worker_id }/queue')
                 | Queue
 
     div(if='{ status }')
@@ -44,12 +44,12 @@ status
               )
 
                 a.btn.btn-info(
-                  href='/#/operator/worker/{ worker_id }/logs'
+                  href='./#/operator/worker/{ worker_id }/logs'
                 )
                   | Logs
 
                 a.btn.btn-info(
-                  href='/#/operator/worker/{ worker_id }/queue'
+                  href='./#/operator/worker/{ worker_id }/queue'
                 )
                   | Queue
 
@@ -96,7 +96,7 @@ status
 
     this.pollStatus = () => {
       jQuery.get(
-        '/operator/status',
+        './operator/status',
       ).done(data => {
         this.update({status: data})
       })
@@ -111,7 +111,7 @@ status
 
     this.pollLogs = id => {
       jQuery.get(
-        '/operator/workers/' + id + '/logs',
+        './operator/workers/' + id + '/logs',
       ).done(data => {
         data.reverse()
         this.update({logs: data})
@@ -120,7 +120,7 @@ status
 
     this.pollQueue = id => {
       jQuery.get(
-        '/operator/workers/' + id + '/queue',
+        './operator/workers/' + id + '/queue',
       ).done(data =>
         this.update({queue: data.List})
       )
diff --git a/ui/operator_ui/templates/index.html b/ui/operator_ui/templates/index.html
index 6b4689079..7307c8a3a 100644
--- a/ui/operator_ui/templates/index.html
+++ b/ui/operator_ui/templates/index.html
@@ -62,9 +62,9 @@
 
 
     <!-- self-hosted -->
-    <link href="/css/styles.css" rel="stylesheet">
-    <link href="/css/prism.css" rel="stylesheet">
-    <link href="/favicon.png" rel="icon" type="image/png">
+    <link href="./css/styles.css" rel="stylesheet">
+    <link href="./css/prism.css" rel="stylesheet">
+    <link href="./favicon.png" rel="icon" type="image/png">
 
   </head>
 
@@ -168,8 +168,8 @@
 
 
     <!-- self-hosted -->
-    <script src="/js/prism.js"></script>
-    <script src="/js/build/app.js"></script>
+    <script src="./js/prism.js"></script>
+    <script src="./js/build/app.js"></script>
 
     {% if google_analytics %}
     <!-- Global site tag (gtag.js) - Google Analytics -->