diff --git a/skins/kolab/README.md b/skins/kolab/README.md
new file mode 100644
index 000000000..d19e03535
--- /dev/null
+++ b/skins/kolab/README.md
@@ -0,0 +1,58 @@
+Roundcube Webmail Skin "Kolab Elastic"
+======================================
+
+This skin package contains modifications of the Roundcube's Elastic skin.
+It can be used, modified and redistributed according to
+the terms described in the LICENSE section.
+
+For information about building or modifying Roundcube skins please visit
+https://github.com/roundcube/roundcubemail/wiki/Skins
+
+
+LICENSE
+-------
+
+The contents of this folder can be redistributed and/or modified
+under the terms of the GNU Affero General Public License as published
+by the Free Software Foundation, either version 3 of the License,
+or (at your option) any later version.
+
+
+INSTALLATION
+------------
+
+All styles are written using LESS syntax. Thus it needs to be compiled
+using the `lessc` command line tool. This comes with the `nodejs-less`
+RPM package which depends on nodejs.
+
+First create a skin folder in the Roundcube skins directory as a copy
+of the Elastic skin:
+
+```
+    $ cp -r roundcubemail/skins/elastic roundcubemail/skins/kolab
+    $ cp -r roundcubemail-skin-elastic/kolab/* roundcubemail/skins/kolab
+```
+
+Then you can compile css of the skin in a usual way:
+
+```
+    $ cd roundcubemail/skins/kolab
+    $ lessc -x styles/styles.less > styles/styles.css
+    $ lessc -x styles/print.less > styles/print.css
+    $ lessc -x styles/embed.less > styles/embed.css
+```
+
+Css for external plugins need to be rebuild too, e.g. Kolab plugins.
+
+```
+    $ cd roundcubemail-plugins-kolab/plugins/libkolab
+    $ cp -r skins/elastic skins/kolab
+    $ sed -i 's/"elastic"/"kolab"/g' skins/kolab/libkolab.less
+    $ lessc --relative-urls -x skins/kolab/libkolab.less > skins/kolab/styles.css
+```
+
+References to image files from the included CSS files can be appended
+with cache-buster marks to avoid browser caching issues after updating.
+
+Run `bin/updatecss.sh --dir skins/kolab` before packaging the skin
+or after installing it on the destination system.
diff --git a/skins/kolab/images/favicon.ico b/skins/kolab/images/favicon.ico
new file mode 100644
index 000000000..c1e49fd29
Binary files /dev/null and b/skins/kolab/images/favicon.ico differ
diff --git a/skins/kolab/images/logo.svg b/skins/kolab/images/logo.svg
new file mode 100644
index 000000000..36531bd1e
--- /dev/null
+++ b/skins/kolab/images/logo.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 viewBox="0 0 566.9 566.9" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#f4c200;}
+</style>
+<path class="st0" d="M334.4,511c-9.9,0-18.8-6.7-21.3-16.7c-2.9-11.8,4.2-23.7,16-26.7C412.6,446.7,471,372,471,285.8
+	c0-103.3-84.1-187.4-187.4-187.4s-187.5,84-187.5,187.4c0,86.2,58.3,161,141.9,181.8c11.8,2.9,19,14.9,16,26.7
+	c-2.9,11.8-14.9,19-26.7,16C124.2,484.5,52.1,392.2,52.1,285.8c0-127.6,103.8-231.4,231.4-231.4S515,158.1,515,285.8
+	c0,106.4-72.1,198.8-175.2,224.5C338,510.7,336.2,511,334.4,511z"/>
+</svg>
diff --git a/skins/kolab/images/watermark.svg b/skins/kolab/images/watermark.svg
new file mode 100644
index 000000000..6aae6d99b
--- /dev/null
+++ b/skins/kolab/images/watermark.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 viewBox="0 0 1700.8 566.9" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F3A628;}
+</style>
+<path class="st0" d="M97.8,125.3c0-6.3,4.8-11.9,11.9-11.9h14.3c6.3,0,11.9,5.4,11.9,11.9v139.5l153.9-146.4c2-2.4,6.3-4.8,9.3-4.8
+	h24.2c8.9,0,13.8,9.9,6,17.3L173.6,276.4l163.2,167.1c3.5,3.5,2.4,15.3-8.4,15.3h-25.1c-3.5,0-7.8-2-8.9-3.5L136,290v156.8
+	c0,6.3-5.4,11.9-11.9,11.9h-14.3c-6.9,0-11.9-5.4-11.9-11.9V125.3z"/>
+<path class="st0" d="M789.4,122.7c0-4.8,3.9-9.3,9.3-9.3h19.2c4.8,0,9.3,4.5,9.3,9.3v302.7h141.9c5.4,0,9.3,4.5,9.3,9.3V449
+	c0,4.8-3.9,9.3-9.3,9.3H798.5c-5.4,0-9.3-4.5-9.3-9.3V122.7H789.4z"/>
+<path class="st0" d="M999.5,445.7L1149.4,114c1.5-3,3.9-5.4,8.4-5.4h4.8c4.5,0,6.9,2.4,8.4,5.4l148.8,331.7c3,6.3-0.9,12.9-8.4,12.9
+	h-19.7c-4.5,0-7.5-3-8.4-5.4l-36.5-81.4H1072l-35.9,81.4c-0.9,2.4-3.9,5.4-8.4,5.4h-19.7C1000.4,458.5,996.5,452,999.5,445.7z
+	 M1233.6,341.2c-24.2-53.6-47.9-108-71.9-161.7h-3.9l-71.9,161.7H1233.6z"/>
+<path class="st0" d="M1373.5,122.7c0-4.8,3.9-9.3,9.3-9.3h108c60.2,0,101.1,38.9,101.1,90.7c0,38-25.1,65.6-48.2,78.8
+	c26.1,10.8,59.2,35,59.2,80.3c0,55.1-44,95.2-107.5,95.2h-112.3c-5.4,0-9.3-4.5-9.3-9.3V122.7H1373.5z M1499.3,425.4
+	c35.9,0,62-27.2,62-62.6c0-35-32-60.7-70.4-60.7h-81.4v123.3H1499.3z M1490.9,268.2c38,0,59.2-27.2,59.2-61.7
+	c0-35.6-21.2-59.2-59.2-59.2h-80.3V268h80.3V268.2z"/>
+<path class="st0" d="M576.9,456.1c-7.5,0-14.3-5-16.2-12.7c-2.2-8.9,3.2-18.1,12.3-20.3c63.7-15.8,108.2-73,108.2-138.6
+	c0-78.8-64.1-142.9-142.9-142.9s-142.9,64.1-142.9,142.9c0,65.8,44.5,122.7,108.2,138.6c8.9,2.2,14.5,11.4,12.3,20.3
+	c-2.2,8.9-11.4,14.5-20.3,12.3c-78.6-19.6-133.6-90.2-133.6-171.2c0-97.2,79.2-176.6,176.6-176.6s176.6,79.2,176.6,176.6
+	c0,81.2-54.9,151.6-133.6,171.2C579.7,455.9,578.4,456.1,576.9,456.1z"/>
+</svg>
diff --git a/skins/kolab/meta.json b/skins/kolab/meta.json
new file mode 100644
index 000000000..f02c947fa
--- /dev/null
+++ b/skins/kolab/meta.json
@@ -0,0 +1,15 @@
+{
+	"name": "Kolab (Responsive Version)",
+	"author": "Kolab Systems AG, Zurich, Switzerland",
+	"license": "GNU Affero General Public License",
+	"license-url": "http://www.gnu.org/licenses/agpl.html",
+	"extends": "elastic",
+	"config": {
+		"pwa_theme_color": "#3a444e",
+		"pwa_tile_color": "#3a444e",
+		"pwa_pinned_tab_color": "#f4c200",
+		"pwa_name": "Kolab Groupware",
+		"pwa_short_name": "Kolab",
+		"pwa_description": "Free and Open Source Groupware Server"
+	}
+}
diff --git a/skins/kolab/pwa/android-chrome-192x192.png b/skins/kolab/pwa/android-chrome-192x192.png
new file mode 100644
index 000000000..aa4042ec6
Binary files /dev/null and b/skins/kolab/pwa/android-chrome-192x192.png differ
diff --git a/skins/kolab/pwa/android-chrome-512x512.png b/skins/kolab/pwa/android-chrome-512x512.png
new file mode 100644
index 000000000..029dd2703
Binary files /dev/null and b/skins/kolab/pwa/android-chrome-512x512.png differ
diff --git a/skins/kolab/pwa/apple-touch-icon.png b/skins/kolab/pwa/apple-touch-icon.png
new file mode 100644
index 000000000..44936de71
Binary files /dev/null and b/skins/kolab/pwa/apple-touch-icon.png differ
diff --git a/skins/kolab/pwa/favicon-16x16.png b/skins/kolab/pwa/favicon-16x16.png
new file mode 100644
index 000000000..b49809c78
Binary files /dev/null and b/skins/kolab/pwa/favicon-16x16.png differ
diff --git a/skins/kolab/pwa/favicon-32x32.png b/skins/kolab/pwa/favicon-32x32.png
new file mode 100644
index 000000000..e865b2314
Binary files /dev/null and b/skins/kolab/pwa/favicon-32x32.png differ
diff --git a/skins/kolab/pwa/favicon.ico b/skins/kolab/pwa/favicon.ico
new file mode 100644
index 000000000..ab4b9e346
Binary files /dev/null and b/skins/kolab/pwa/favicon.ico differ
diff --git a/skins/kolab/pwa/safari-pinned-tab.svg b/skins/kolab/pwa/safari-pinned-tab.svg
new file mode 100644
index 000000000..adcfff999
--- /dev/null
+++ b/skins/kolab/pwa/safari-pinned-tab.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M3328 6325 c-2 -2 -43 -6 -93 -9 -49 -4 -97 -9 -105 -11 -8 -2 -37
+-6 -65 -10 -27 -3 -102 -17 -165 -31 -1010 -215 -1833 -974 -2134 -1966 -35
+-117 -80 -314 -91 -403 -4 -27 -8 -60 -10 -72 -39 -245 -21 -657 41 -947 9
+-39 17 -80 20 -92 9 -49 79 -266 111 -349 91 -232 243 -506 385 -690 328 -427
+757 -749 1248 -938 173 -66 348 -117 405 -117 211 0 342 251 221 425 -45 66
+-81 87 -226 130 -290 86 -542 212 -765 380 -127 95 -290 250 -370 350 -22 28
+-43 52 -46 55 -3 3 -30 39 -61 80 -221 302 -377 696 -423 1065 -13 110 -16
+162 -16 300 0 176 5 234 37 420 4 26 17 84 29 135 73 302 242 639 448 895 62
+76 221 242 282 294 553 467 1243 654 1945 525 596 -109 1151 -474 1487 -979
+207 -309 316 -594 378 -980 27 -174 22 -525 -10 -697 -32 -167 -74 -319 -125
+-451 -42 -109 -150 -329 -176 -358 -8 -8 -14 -18 -14 -22 0 -13 -101 -157
+-170 -242 -82 -101 -215 -237 -305 -311 -33 -27 -62 -52 -65 -55 -3 -3 -48
+-35 -100 -71 -215 -148 -424 -249 -659 -320 -162 -48 -198 -65 -239 -113 -55
+-62 -67 -93 -67 -180 0 -65 4 -88 24 -125 43 -82 120 -136 210 -147 120 -14
+533 134 811 292 73 41 234 143 265 167 370 291 590 532 782 857 147 249 286
+592 327 811 2 14 12 59 21 100 37 173 52 358 49 590 -2 113 -5 221 -8 240 -2
+19 -7 57 -10 84 -3 27 -11 76 -16 110 -6 34 -13 70 -15 81 -29 166 -105 405
+-188 594 -264 598 -724 1089 -1302 1387 -321 166 -631 261 -995 305 -85 10
+-484 22 -492 14z"/>
+</g>
+</svg>
diff --git a/skins/kolab/styles/_styles.less b/skins/kolab/styles/_styles.less
new file mode 100644
index 000000000..e0236fbf1
--- /dev/null
+++ b/skins/kolab/styles/_styles.less
@@ -0,0 +1,113 @@
+/**
+ * Styles for the Kolab web client variant of the Roundcube Elastic skin
+ *
+ * Copyright (C) 2018, Kolab Systems AG <contact@kolabsystems.com>
+ *
+ * The contents of this folder can be redistributed and/or modified
+ * under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ */
+
+// Modify taskmenu behavior
+#taskmenu {
+    span.inner {
+        text-transform: uppercase;
+    }
+
+    @media screen and (min-width: (@screen-width-medium + 1px)) and (min-height: 640px) {
+        span.inner {
+            font-size: 65%;
+            font-weight: bold;
+        }
+
+        a:before {
+            line-height: 1.2;
+            font-size: 180%;
+            height: 1.9rem !important;
+        }
+    }
+
+    @media screen and (min-width: (@screen-width-small + 1px)) {
+        a.logout:not(:hover) {
+            color: @color-taskmenu-button !important;
+        }
+    }
+
+    .action-buttons {
+        display: none;
+    }
+}
+
+// Fix mobile menu header background
+#layout-menu .popover-header {
+    background-color: @color-taskmenu-background !important;
+
+    img {
+        width: 100%;
+
+        html.layout-phone & {
+            width: unset;
+            max-height: @layout-header-height;
+        }
+    }
+}
+
+.watermark {
+    background-image: url(../images/watermark.svg) !important;
+    background-size: 60% !important;
+    background-blend-mode: unset !important;
+
+    &:before {
+        background: rgba(255, 255, 255, 0.75) !important;
+    }
+}
+
+// Display the Compose button in mail toolbar
+body.task-mail .menu a.compose {
+    display: block !important;
+}
+
+// Move the contact photo in mail preview to the right
+#message-header .short-header img.contactphoto {
+    order: 2;
+    margin: 0 0 0 1rem;
+}
+
+// Make the content frame navigation smaller
+.content-frame-navigation {
+    height: @layout-footer-small-height !important;
+    line-height: @layout-footer-small-height !important;
+    min-height: @layout-footer-small-height !important;
+
+    a {
+        max-width: 8em;
+        padding: 0;
+        line-height: @layout-footer-small-height;
+
+        &:before {
+           display: none !important;
+           height: @layout-footer-small-height !important;
+           line-height: @layout-footer-small-height !important;
+        }
+
+        &.prev,
+        &.next {
+            padding: 0;
+
+            &:before {
+                display: block !important;
+                line-height: 1.8;
+            }
+
+            span.inner {
+                display: none;
+            }
+        }
+
+        span.inner {
+            color: @color-link;
+            font-weight: bold;
+        }
+    }
+}
diff --git a/skins/kolab/styles/_variables.less b/skins/kolab/styles/_variables.less
new file mode 100644
index 000000000..e2a1c567f
--- /dev/null
+++ b/skins/kolab/styles/_variables.less
@@ -0,0 +1,34 @@
+/**
+ * Styles for the Kolab web client variant of the Roundcube Elastic skin
+ *
+ * Copyright (C) 2018, Kolab Systems AG <contact@kolabsystems.com>
+ *
+ * The contents of this folder can be redistributed and/or modified
+ * under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ */
+
+@color-main:            #f4c200;
+@color-font:            #4f4f4f;
+@color-main-dark:       darken(@color-main, 30%);
+@color-link:            @color-main;
+
+@color-black-shade-bg:              #f8f7f4;
+@color-black-shade-text:            #7b7b77;
+
+@color-layout-header-background:    #f1eeea;
+@color-layout-border:               #d4dbde;
+
+
+@color-taskmenu-background:                 #3a444e;
+@color-taskmenu-button:                     #71777d;
+@color-taskmenu-button-hover:               #e1e2e3;
+@color-taskmenu-button-selected:            #e1e2e3;
+
+@color-popover-mobile-header-background:    @color-taskmenu-background;
+
+@color-toolbar-button:              #7b7b77;
+@color-toolbar-button-background-hover: tint(@color-layout-header-background, 40%);
+
+@color-list-selected-background:    tint(@color-main, 85%);
diff --git a/skins/kolab/watermark.html b/skins/kolab/watermark.html
new file mode 100644
index 000000000..69147edda
--- /dev/null
+++ b/skins/kolab/watermark.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title></title>
+<style type="text/css">
+html, body { height: 100%; overflow: hidden; }
+body { background: url(images/watermark.svg) center no-repeat #fff; background-size: 60%; }
+body:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, .75); }
+</style>
+</head>
+<body></body>
+</html>