diff --git a/docker/api/src/api/lib/menu.py b/docker/api/src/api/lib/menu.py
index 4724184..92d3819 100644
--- a/docker/api/src/api/lib/menu.py
+++ b/docker/api/src/api/lib/menu.py
@@ -15,12 +15,24 @@ import yaml, json
 
 from jinja2 import Environment, FileSystemLoader
 
+
+def write_css():
+    env = Environment(loader=FileSystemLoader('api/static/_templates'))
+    css_template = env.get_template('dd.css')
+    with open('menu/custom.yaml', 'r') as menu_custom_file:
+        menu_custom_yaml = menu_custom_file.read()
+    menu_custom = yaml.full_load(menu_custom_yaml)
+    css = css_template.render(data=menu_custom)
+    with open("api/static/css/dd.css", "w") as css_file:
+        css_file.write(css)
+
+
 class Menu():
     def __init__(self):
         self.menudict=self.gen_header()
         pprint.pprint(self.menudict)
         self.write_headers()
-        None
+        write_css()
 
     def gen_header(self):
         with open(r'menu/system.yaml') as yml:
@@ -63,11 +75,3 @@ class Menu():
         return self.menudict
         # with open('menu.yaml', 'w') as yml:
         #     print(yaml.dump(header, yml, allow_unicode=True))
-
-    def parse_css_color(self):
-        pass
-        #Replace colors in dd.css based on system.yml:
-            # colours:
-            # background: "#F0F0F0"
-            # primary: "#92AE01"
-            # secondary: "#FFFFFF"
\ No newline at end of file
diff --git a/docker/api/src/api/static/_templates/dd.css b/docker/api/src/api/static/_templates/dd.css
new file mode 100644
index 0000000..9df23c7
--- /dev/null
+++ b/docker/api/src/api/static/_templates/dd.css
@@ -0,0 +1,196 @@
+#body-user, #body-settings, #body-public {
+    font-family: 'Montserrat', sans-serif;
+    color:  #262626;
+}
+
+#body-user #app-dashboard>h2, #body-settings #app-dashboard>h2, #body-public #app-dashboard>h2 {
+    color:  #262626;
+}
+
+
+#body-user header#header, #body-settings header#header, #body-public header#header {
+    background-color: white !important;
+    height: 74px ;
+    box-shadow: 0 2px 4px #00000014;
+    border-bottom: 1px solid #262626;
+    background-image: inherit;
+}
+
+#theming-preview-logo, #header #nextcloud {
+    padding-left: 10px;
+}
+
+#header #unified-search svg {
+    fill: #262626;
+    width: 35px;
+    height: 35px;
+}
+
+#header .notifications .notifications-button img.svg {
+    background-color: #262626;
+    padding: 5px;
+    border-radius: 18px;
+    height: 23px;
+    width: 23px;
+    margin-left: 10px;
+}
+
+
+#header #contactsmenu {
+    display: flex;
+    align-items: center;
+}
+
+#header #contactsmenu .icon-contacts {
+    background-color: #262626;
+    padding: 5px;
+    border-radius: 18px;
+    height: 23px;
+    width: 23px;
+    opacity: 1;
+    margin-left: 10px;
+}
+
+#header #settings #expand .avatardiv {
+    height: 35px;
+    width: 35px;
+}
+
+#header #settings #expand .avatardiv img {
+    height: 35px;
+    width: 35px;
+    margin-left: 10px;
+}
+
+
+#header #unified-search a.header-menu__trigger {
+    opacity: 1;
+}
+
+#header #unified-search a.header-menu__trigger .magnify-icon {
+    width: 35px;
+    height: 35px;
+}
+
+#body-user div#content, #body-settings div#content, #body-public div#content {
+    padding-top: 75px;
+}
+
+#body-user div#content div#app-dashboard, #body-settings div#content div#app-dashboard, #body-public div#content div#app-dashboard {
+    background-image: none !important;
+    background-color: #F0F0F0!important;
+}
+
+#body-user div#app-navigation, #body-settings div#app-navigation, #body-public div#app-navigation {
+    top: 75px;
+    height: calc(100% - 75px);
+    color: #262626 !important;
+}
+
+#header .header-menu__wrapper[data-v-a58f012a] {
+    top: 65px;
+}
+
+#header #navbar-menu-apps #menu-apps-btn #dropdownMenuAppsButton {
+    cursor: pointer;
+    border: none;
+    background-color: inherit;
+    padding: 4px;
+}
+
+#header div#navbar-menu-apps {
+    display: flex;
+    align-items: center;
+}
+
+#header #navbar-menu-apps #menu-apps-btn {
+    margin-right: 20px;
+    cursor: pointer;
+    position: relative;
+}
+
+#header #navbar-menu-apps #menu-apps-btn #dropdownMenuAppsButton {
+    cursor: pointer;
+    border: none;
+    background-color: inherit;
+    padding: 4px;
+}
+
+#header #navbar-menu-apps .dropdown-menu {
+    display: none;
+    position: absolute;
+    border: 1px solid rgba(0,0,0,.15);
+    border-radius: 5px;
+    box-shadow: rgb(0 0 0 / 20%) 0 3px 8px;
+    margin-top: 15px;
+    padding: 10px;
+    max-height: 500px;
+    overflow-y: scroll;
+    z-index: 2000;
+    background-color: white;
+    top: 33px;
+    right: -14px;
+    left: auto;
+}
+
+#header #navbar-menu-apps .dropdown-menu ul {
+    list-style: none;
+    display: grid;
+    flex-wrap: wrap;
+    padding: 15px 2px 0 0;
+    margin-bottom: 0;
+    grid-template-columns: 82px 82px 82px;
+    grid-gap: 12px 2px;
+}
+
+#header #navbar-menu-apps .dropdown-menu ul#app-admin {
+    border-bottom: 1px solid #D9D9D9;
+    padding-bottom: 4px;
+    margin-bottom: 6px;
+}
+
+#header #navbar-menu-apps .dropdown-menu ul#app-external {
+    border-top: 1px solid #D9D9D9;
+    padding-top: 20px;
+    margin-top: 8px;
+}
+
+#header #navbar-menu-apps .dropdown-menu ul li.app a.app-link {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: start;
+    text-align: center;
+    color: #262626;
+    text-decoration: none;
+}
+
+#header #navbar-menu-apps .dropdown-menu ul li.app a.app-link .icon {
+    width: 40px;
+    height: 40px;
+    background-color: {{ data.colours.primary }};
+    border-radius: .25rem;
+    margin-right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#header #navbar-menu-apps .dropdown-menu ul li.app a.app-link .text {
+    text-align: center;
+    margin-top: 4px;
+    height: 26px;
+    font-size: 13px;
+    line-height: 15px;
+    overflow-wrap: anywhere;
+}
+
+#header #navbar-menu-apps .dropdown-menu ul li.app a.app-link .icon i {
+    color: #fff;
+    font-size: 19px;
+}
+
+div#content-vue {
+    padding-top: 75px;
+}
+