diff --git a/web/angular.json b/web/angular.json
index 4b1b267d6..c6a7f94b8 100644
--- a/web/angular.json
+++ b/web/angular.json
@@ -21,7 +21,7 @@
               "src/environments/data-sources"
             ],
             "styles": [
-              "src/assets/_main.scss"
+              "src/theme/_main.scss"
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",
@@ -80,7 +80,7 @@
               "node_modules/bootstrap/dist/js/bootstrap.min.js"
             ],
             "styles": [
-              "src/assets/_main.scss"
+              "src/theme/_main.scss"
             ],
             "assets": [
               "src/assets",
diff --git a/web/src/app/administration/components/access-items-management/access-items-management.component.scss b/web/src/app/administration/components/access-items-management/access-items-management.component.scss
index f52971d07..b53c62a6e 100644
--- a/web/src/app/administration/components/access-items-management/access-items-management.component.scss
+++ b/web/src/app/administration/components/access-items-management/access-items-management.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../assets/colors';
+@import '../../../../theme/colors';
 
 .margin {
     margin-top: 10px;
diff --git a/web/src/app/administration/components/classification-details/classification-details.component.ts b/web/src/app/administration/components/classification-details/classification-details.component.ts
index 392f8f874..41e390351 100644
--- a/web/src/app/administration/components/classification-details/classification-details.component.ts
+++ b/web/src/app/administration/components/classification-details/classification-details.component.ts
@@ -7,7 +7,7 @@ import { ClassificationDefinition, customFieldCount } from 'app/shared/models/cl
 import { ACTION } from 'app/shared/models/action';
 import { AlertModel, AlertType } from 'app/shared/models/alert';
 
-import { highlight } from 'app/shared/animations/validation.animation';
+import { highlight } from 'theme/animations/validation.animation';
 import { TaskanaDate } from 'app/shared/util/taskana.date';
 
 import { ClassificationsService } from 'app/shared/services/classifications/classifications.service';
diff --git a/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.ts b/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.ts
index d1178ef56..85b674712 100644
--- a/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.ts
+++ b/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.ts
@@ -14,7 +14,7 @@ import { GeneralModalService } from 'app/shared/services/general-modal/general-m
 import { WorkbasketService } from 'app/shared/services/workbasket/workbasket.service';
 import { AlertService } from 'app/shared/services/alert/alert.service';
 import { RequestInProgressService } from 'app/shared/services/request-in-progress/request-in-progress.service';
-import { highlight } from 'app/shared/animations/validation.animation';
+import { highlight } from 'theme/animations/validation.animation';
 import { FormsValidatorService } from 'app/shared/services/forms-validator/forms-validator.service';
 import { AccessIdDefinition } from 'app/shared/models/access-id';
 import { EngineConfigurationSelectors } from 'app/store/engine-configuration-store/engine-configuration.selectors';
diff --git a/web/src/app/administration/components/workbasket-dual-list/workbasket-dual-list.component.ts b/web/src/app/administration/components/workbasket-dual-list/workbasket-dual-list.component.ts
index 634249b1d..f67254b43 100644
--- a/web/src/app/administration/components/workbasket-dual-list/workbasket-dual-list.component.ts
+++ b/web/src/app/administration/components/workbasket-dual-list/workbasket-dual-list.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { WorkbasketSummary } from 'app/shared/models/workbasket-summary';
 import { Filter } from 'app/shared/models/filter';
-import { expandDown } from 'app/shared/animations/expand.animation';
+import { expandDown } from 'theme/animations/expand.animation';
 import { Side } from '../workbasket-distribution-targets/workbasket-distribution-targets.component';
 
 @Component({
diff --git a/web/src/app/administration/components/workbasket-list-toolbar/workbasket-list-toolbar.component.ts b/web/src/app/administration/components/workbasket-list-toolbar/workbasket-list-toolbar.component.ts
index 4638d4f70..5a8c269af 100644
--- a/web/src/app/administration/components/workbasket-list-toolbar/workbasket-list-toolbar.component.ts
+++ b/web/src/app/administration/components/workbasket-list-toolbar/workbasket-list-toolbar.component.ts
@@ -8,7 +8,7 @@ import { WorkbasketSummary } from 'app/shared/models/workbasket-summary';
 
 import { WorkbasketService } from 'app/shared/services/workbasket/workbasket.service';
 import { TaskanaType } from 'app/shared/models/taskana-type';
-import { expandDown } from 'app/shared/animations/expand.animation';
+import { expandDown } from 'theme/animations/expand.animation';
 import { ErrorsService } from '../../../shared/services/errors/errors.service';
 import { ERROR_TYPES } from '../../../shared/models/errors';
 
diff --git a/web/src/app/history/task-query/task-query.component.scss b/web/src/app/history/task-query/task-query.component.scss
index 78c051b38..141b014bf 100644
--- a/web/src/app/history/task-query/task-query.component.scss
+++ b/web/src/app/history/task-query/task-query.component.scss
@@ -1,4 +1,4 @@
-@import './src/assets/_colors';
+@import '../../../theme/colors';
 
 .table {
 	max-height: calc(100vh - 152px);
diff --git a/web/src/app/monitor/components/workbasket-report-query-switcher/workbasket-report-query-switcher.component.scss b/web/src/app/monitor/components/workbasket-report-query-switcher/workbasket-report-query-switcher.component.scss
index 074cc178a..25d5e69a1 100644
--- a/web/src/app/monitor/components/workbasket-report-query-switcher/workbasket-report-query-switcher.component.scss
+++ b/web/src/app/monitor/components/workbasket-report-query-switcher/workbasket-report-query-switcher.component.scss
@@ -1,4 +1,4 @@
-@import './src/assets/_colors';
+@import '../../../../theme/colors';
 
 .btn.selected {
   background-color: $blue;
diff --git a/web/src/app/shared/components/alert/alert.component.ts b/web/src/app/shared/components/alert/alert.component.ts
index 9fc699cd8..eedbb9126 100644
--- a/web/src/app/shared/components/alert/alert.component.ts
+++ b/web/src/app/shared/components/alert/alert.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 
 import { AlertModel } from 'app/shared/models/alert';
 import { AlertService } from 'app/shared/services/alert/alert.service';
-import { expandTop } from '../../animations/expand.animation';
+import { expandTop } from '../../../../theme/animations/expand.animation';
 
 @Component({
   selector: 'taskana-alert',
diff --git a/web/src/app/shared/components/field-error-display/field-error-display.component.ts b/web/src/app/shared/components/field-error-display/field-error-display.component.ts
index 5fac7baf3..ca204e154 100644
--- a/web/src/app/shared/components/field-error-display/field-error-display.component.ts
+++ b/web/src/app/shared/components/field-error-display/field-error-display.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { highlight } from 'app/shared/animations/validation.animation';
+import { highlight } from 'theme/animations/validation.animation';
 
 @Component({
   selector: 'taskana-field-error-display',
diff --git a/web/src/app/shared/components/nav-bar/nav-bar.component.scss b/web/src/app/shared/components/nav-bar/nav-bar.component.scss
index 3d502b13b..d6d533e78 100644
--- a/web/src/app/shared/components/nav-bar/nav-bar.component.scss
+++ b/web/src/app/shared/components/nav-bar/nav-bar.component.scss
@@ -1,4 +1,4 @@
-@import './src/assets/_variables';
+@import '../../../../theme/variables';
 
 .navbar.main:before  {
     @include degraded-bar(right, 100%, 3px)
diff --git a/web/src/app/shared/components/nav-bar/nav-bar.component.ts b/web/src/app/shared/components/nav-bar/nav-bar.component.ts
index ab8b0a71c..c8f80432a 100644
--- a/web/src/app/shared/components/nav-bar/nav-bar.component.ts
+++ b/web/src/app/shared/components/nav-bar/nav-bar.component.ts
@@ -7,7 +7,7 @@ import { BusinessAdminGuard } from 'app/shared/guards/business-admin.guard';
 import { MonitorGuard } from 'app/shared/guards/monitor.guard';
 import { WindowRefService } from 'app/shared/services/window/window.service';
 import { UserGuard } from 'app/shared/guards/user.guard';
-import { expandRight } from 'app/shared/animations/expand.animation';
+import { expandRight } from 'theme/animations/expand.animation';
 import { TaskanaEngineService } from '../../services/taskana-engine/taskana-engine.service';
 @Component({
   selector: 'taskana-nav-bar',
diff --git a/web/src/app/shared/components/type-ahead/type-ahead.component.scss b/web/src/app/shared/components/type-ahead/type-ahead.component.scss
index f4a51ad85..3c04ad0ce 100644
--- a/web/src/app/shared/components/type-ahead/type-ahead.component.scss
+++ b/web/src/app/shared/components/type-ahead/type-ahead.component.scss
@@ -1,4 +1,4 @@
-@import './src/assets/_colors';
+@import '../../../../theme/colors';
 
 .wrapper-text {
     min-width: 150px;
diff --git a/web/src/app/shared/components/type-ahead/type-ahead.component.ts b/web/src/app/shared/components/type-ahead/type-ahead.component.ts
index 02bb3dde1..99fe48cf8 100644
--- a/web/src/app/shared/components/type-ahead/type-ahead.component.ts
+++ b/web/src/app/shared/components/type-ahead/type-ahead.component.ts
@@ -4,7 +4,7 @@ import { TypeaheadMatch } from 'ngx-bootstrap/typeahead';
 
 import { AccessIdsService } from 'app/shared/services/access-ids/access-ids.service';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { highlight } from 'app/shared/animations/validation.animation';
+import { highlight } from 'theme/animations/validation.animation';
 import { mergeMap } from 'rxjs/operators';
 import { AccessIdDefinition } from 'app/shared/models/access-id';
 
diff --git a/web/src/app/shared/components/user-information/user-information.component.scss b/web/src/app/shared/components/user-information/user-information.component.scss
index 4c65fbd01..8045d684c 100644
--- a/web/src/app/shared/components/user-information/user-information.component.scss
+++ b/web/src/app/shared/components/user-information/user-information.component.scss
@@ -1,4 +1,4 @@
-@import './src/assets/_variables';
+@import '../../../../theme/variables';
 
 .big {
     width: 64px;
diff --git a/web/src/app/shared/components/user-information/user-information.component.ts b/web/src/app/shared/components/user-information/user-information.component.ts
index 8f606ecfc..94647bde2 100644
--- a/web/src/app/shared/components/user-information/user-information.component.ts
+++ b/web/src/app/shared/components/user-information/user-information.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { TaskanaEngineService } from 'app/shared/services/taskana-engine/taskana-engine.service';
 import { UserInfo } from 'app/shared/models/user-info';
-import { expandDown } from '../../animations/expand.animation';
+import { expandDown } from '../../../../theme/animations/expand.animation';
 
 @Component({
   selector: 'taskana-user-information',
diff --git a/web/src/app/workplace/components/task-list-toolbar/task-list-toolbar.component.scss b/web/src/app/workplace/components/task-list-toolbar/task-list-toolbar.component.scss
index 7fecdf171..2631294f9 100644
--- a/web/src/app/workplace/components/task-list-toolbar/task-list-toolbar.component.scss
+++ b/web/src/app/workplace/components/task-list-toolbar/task-list-toolbar.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../assets/colors';
+@import '../../../../theme/colors';
 
 .list-group-item {
   padding: 5px 0px 2px 1px;
diff --git a/web/src/app/workplace/components/task-list-toolbar/task-list-toolbar.component.ts b/web/src/app/workplace/components/task-list-toolbar/task-list-toolbar.component.ts
index d3170f76c..d9cdc50f8 100644
--- a/web/src/app/workplace/components/task-list-toolbar/task-list-toolbar.component.ts
+++ b/web/src/app/workplace/components/task-list-toolbar/task-list-toolbar.component.ts
@@ -6,7 +6,7 @@ import { WorkbasketService } from 'app/shared/services/workbasket/workbasket.ser
 import { Sorting } from 'app/shared/models/sorting';
 import { Filter } from 'app/shared/models/filter';
 import { TaskanaType } from 'app/shared/models/taskana-type';
-import { expandDown } from 'app/shared/animations/expand.animation';
+import { expandDown } from 'theme/animations/expand.animation';
 import { ActivatedRoute, Router, NavigationExtras } from '@angular/router';
 import { WorkplaceService } from 'app/workplace/services/workplace.service';
 import { ObjectReference } from 'app/workplace/models/object-reference';
diff --git a/web/src/app/workplace/components/taskdetails/taskdetails.component.scss b/web/src/app/workplace/components/taskdetails/taskdetails.component.scss
index 59b055074..4ecf3d2d6 100644
--- a/web/src/app/workplace/components/taskdetails/taskdetails.component.scss
+++ b/web/src/app/workplace/components/taskdetails/taskdetails.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../assets/colors';
+@import '../../../../theme/colors';
 
 ::ng-deep .btn-block {
     background-color: whitesmoke;
diff --git a/web/src/assets/_ngxbootstrap.scss b/web/src/assets/_ngxbootstrap.scss
deleted file mode 100644
index 55d83122c..000000000
--- a/web/src/assets/_ngxbootstrap.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';
diff --git a/web/src/assets/_bootstrap.scss b/web/src/theme/_bootstrap.scss
similarity index 50%
rename from web/src/assets/_bootstrap.scss
rename to web/src/theme/_bootstrap.scss
index 83d1282c3..5d0e31696 100644
--- a/web/src/assets/_bootstrap.scss
+++ b/web/src/theme/_bootstrap.scss
@@ -1,2 +1,2 @@
 $icon-font-path: '../../node_modules/bootstrap-sass/assets/fonts/bootstrap/';
-@import '../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';
diff --git a/web/src/assets/_buttons.scss b/web/src/theme/_buttons.scss
similarity index 100%
rename from web/src/assets/_buttons.scss
rename to web/src/theme/_buttons.scss
diff --git a/web/src/assets/_checkboxes.scss b/web/src/theme/_checkboxes.scss
similarity index 100%
rename from web/src/assets/_checkboxes.scss
rename to web/src/theme/_checkboxes.scss
diff --git a/web/src/assets/_colors.scss b/web/src/theme/_colors.scss
similarity index 100%
rename from web/src/assets/_colors.scss
rename to web/src/theme/_colors.scss
diff --git a/web/src/assets/_date-picker.scss b/web/src/theme/_date-picker.scss
similarity index 100%
rename from web/src/assets/_date-picker.scss
rename to web/src/theme/_date-picker.scss
diff --git a/web/src/assets/_forms.scss b/web/src/theme/_forms.scss
similarity index 100%
rename from web/src/assets/_forms.scss
rename to web/src/theme/_forms.scss
diff --git a/web/src/assets/_main.scss b/web/src/theme/_main.scss
similarity index 98%
rename from web/src/assets/_main.scss
rename to web/src/theme/_main.scss
index 3d7d8e966..f1c0ee5b1 100644
--- a/web/src/assets/_main.scss
+++ b/web/src/theme/_main.scss
@@ -3,7 +3,7 @@
 @import 'bootstrap-3-backward-compatibility';
 @import 'variables';
 @import '../../node_modules/angular-tree-component/dist/angular-tree-component.css';
-@import '../../node_modules/ngx-bootstrap/datepicker/bs-datepicker.scss';
+@import '../../node_modules/ngx-bootstrap/datepicker/bs-datepicker';
 @import 'material_icons';
 @import 'site';
 @import 'forms';
diff --git a/web/src/assets/_material_icons.scss b/web/src/theme/_material_icons.scss
similarity index 82%
rename from web/src/assets/_material_icons.scss
rename to web/src/theme/_material_icons.scss
index d4081b85e..50dacb8a0 100644
--- a/web/src/assets/_material_icons.scss
+++ b/web/src/theme/_material_icons.scss
@@ -2,12 +2,12 @@
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
-  src: url(icons-fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: url(../assets/icons-fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
   src: local('Material Icons'),
   local('MaterialIcons-Regular'),
-  url(icons-fonts/MaterialIcons-Regular.woff2) format('woff2'),
-  url(icons-fonts/MaterialIcons-Regular.woff) format('woff'),
-  url(icons-fonts/MaterialIcons-Regular.ttf) format('truetype');
+  url(../assets/icons-fonts/MaterialIcons-Regular.woff2) format('woff2'),
+  url(../assets/icons-fonts/MaterialIcons-Regular.woff) format('woff'),
+  url(../assets/icons-fonts/MaterialIcons-Regular.ttf) format('truetype');
 }
 
 .material-icons {
diff --git a/web/src/theme/_ngxbootstrap.scss b/web/src/theme/_ngxbootstrap.scss
new file mode 100644
index 000000000..db385051a
--- /dev/null
+++ b/web/src/theme/_ngxbootstrap.scss
@@ -0,0 +1 @@
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';
diff --git a/web/src/assets/_progress-bar.scss b/web/src/theme/_progress-bar.scss
similarity index 98%
rename from web/src/assets/_progress-bar.scss
rename to web/src/theme/_progress-bar.scss
index 78027ae22..6c7d6ae32 100644
--- a/web/src/assets/_progress-bar.scss
+++ b/web/src/theme/_progress-bar.scss
@@ -1,4 +1,4 @@
-@import '_colors';
+@import 'colors';
 .item {
 	margin-bottom: 20px;
 	position: relative;
@@ -39,4 +39,4 @@ $half: round($loops / 2);
 		background-image: linear-gradient($nextdeg, $pallete-green 51%, transparent 50%, transparent), linear-gradient(270deg, $pallete-green 50%, #fff 50%, #fff);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/web/src/assets/_shameful.scss b/web/src/theme/_shameful.scss
similarity index 100%
rename from web/src/assets/_shameful.scss
rename to web/src/theme/_shameful.scss
diff --git a/web/src/assets/_site.scss b/web/src/theme/_site.scss
similarity index 100%
rename from web/src/assets/_site.scss
rename to web/src/theme/_site.scss
diff --git a/web/src/assets/_table.scss b/web/src/theme/_table.scss
similarity index 100%
rename from web/src/assets/_table.scss
rename to web/src/theme/_table.scss
diff --git a/web/src/assets/_tabs.scss b/web/src/theme/_tabs.scss
similarity index 100%
rename from web/src/assets/_tabs.scss
rename to web/src/theme/_tabs.scss
diff --git a/web/src/assets/_tree.scss b/web/src/theme/_tree.scss
similarity index 100%
rename from web/src/assets/_tree.scss
rename to web/src/theme/_tree.scss
diff --git a/web/src/assets/_type-ahead.scss b/web/src/theme/_type-ahead.scss
similarity index 100%
rename from web/src/assets/_type-ahead.scss
rename to web/src/theme/_type-ahead.scss
diff --git a/web/src/assets/_variables.scss b/web/src/theme/_variables.scss
similarity index 92%
rename from web/src/assets/_variables.scss
rename to web/src/theme/_variables.scss
index 41c6a6545..ca132a052 100644
--- a/web/src/assets/_variables.scss
+++ b/web/src/theme/_variables.scss
@@ -1,4 +1,4 @@
-@import '_colors';
+@import 'colors';
 @import 'mixin/colors';
 
 @mixin degraded-bar ($direction, $width, $height) {
diff --git a/web/src/app/shared/animations/expand.animation.ts b/web/src/theme/animations/expand.animation.ts
similarity index 100%
rename from web/src/app/shared/animations/expand.animation.ts
rename to web/src/theme/animations/expand.animation.ts
diff --git a/web/src/app/shared/animations/validation.animation.ts b/web/src/theme/animations/validation.animation.ts
similarity index 100%
rename from web/src/app/shared/animations/validation.animation.ts
rename to web/src/theme/animations/validation.animation.ts
diff --git a/web/src/assets/bootstrap-3-backward-compatibility.scss b/web/src/theme/bootstrap-3-backward-compatibility.scss
similarity index 100%
rename from web/src/assets/bootstrap-3-backward-compatibility.scss
rename to web/src/theme/bootstrap-3-backward-compatibility.scss
diff --git a/web/src/assets/mixin/_colors.scss b/web/src/theme/mixin/_colors.scss
similarity index 100%
rename from web/src/assets/mixin/_colors.scss
rename to web/src/theme/mixin/_colors.scss