diff --git a/kdots/assets/styles/framework.css b/kdots/assets/styles/framework.css
new file mode 100644
index 0000000000..a81d8b2fcd
--- /dev/null
+++ b/kdots/assets/styles/framework.css
@@ -0,0 +1,184 @@
+html,
+body {
+  width: 100vw;
+  height: 100vh;
+  overflow: clip;
+  padding: 0px;
+  margin: 0px;
+}
+.egw_menu::part(popup) {
+  z-index: var(--sl-z-index-dropdown);
+}
+egw-framework#egw_fw_basecontainer {
+  --icon-size: 32px;
+  --sl-tooltip-arrow-size: 0;
+  /* Internals */
+  /* Content slotted inside */
+}
+egw-framework#egw_fw_basecontainer::part(status-split) {
+  /* This limits the max size of the status panel */
+  --max: 32px;
+}
+egw-framework#egw_fw_basecontainer::part(header) {
+  background-color: var(--primary-background-color);
+  color: var(--sl-color-neutral-0);
+  gap: var(--sl-spacing-medium);
+  font-size: var(--icon-size);
+}
+egw-framework#egw_fw_basecontainer [slot="logo"] img {
+  max-width: 220px;
+  max-height: var(--icon-size);
+  display: block;
+  text-align: center;
+}
+egw-framework#egw_fw_basecontainer sl-icon-button[slot="header"],
+egw-framework#egw_fw_basecontainer et2-image[slot="header"] {
+  font-size: var(--icon-size);
+  color: inherit;
+}
+egw-framework#egw_fw_basecontainer div#egw_fw_toggler {
+  position: initial;
+  display: none;
+}
+egw-framework#egw_fw_basecontainer #egw_fw_topmenu_info_items {
+  position: relative;
+  order: 99;
+  margin-left: auto;
+  display: flex;
+}
+egw-framework#egw_fw_basecontainer #egw_fw_topmenu_info_items .topmenu_info_item {
+  min-width: 1em;
+  min-height: 1em;
+}
+egw-framework#egw_fw_basecontainer div#egw_fw_sidebar_r {
+  position: initial;
+  top: initial;
+}
+egw-framework#egw_fw_basecontainer div#egw_fw_sidebar_r et2-avatar,
+egw-framework#egw_fw_basecontainer div#egw_fw_sidebar_r et2-lavatar {
+  --size: 26px;
+}
+egw-framework#egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_header {
+  display: flex;
+  gap: var(--sl-spacing-medium);
+  padding-left: 1em;
+}
+/*** HEADER ***/
+#egw_fw_topmenu_info_items {
+  display: flex;
+  flex-direction: row-reverse;
+  background-color: #fbfbfb;
+}
+#egw_fw_topmenu_info_items > * {
+  border: none;
+  background: transparent;
+}
+#egw_fw_topmenu_info_items et2-avatar {
+  --size: var(--icon-size);
+}
+#egw_fw_topmenu_info_items et2-avatar::part(base) {
+  vertical-align: initial;
+}
+#egw_fw_topmenu_info_items .topmenu_info_item {
+  height: var(--icon-size);
+  width: var(--icon-size);
+  border-left: 1px solid #bfc0bf;
+  display: inline-block;
+  padding-left: 0px;
+  background-size: 20px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+#egw_fw_topmenu_info_items .topmenu_info_item:hover {
+  background-color: var(--sl-input-background-color-hover);
+}
+#egw_fw_topmenu_info_items #topmenu_info_timer {
+  order: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0px;
+}
+#egw_fw_topmenu_info_items #topmenu_info_timer #topmenu_timer {
+  display: block;
+  width: 100%;
+}
+#egw_fw_topmenu_info_items #topmenu_info_timer:hover {
+  cursor: pointer;
+}
+#egw_fw_topmenu_info_items #topmenu_info_timer:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url(../../../timesheet/templates/default/images/navbar.svg);
+  background-repeat: no-repeat;
+  background-size: 32px;
+  background-position: center center;
+  filter: opacity(0.3);
+}
+#egw_fw_topmenu_info_items #topmenu_info_user_avatar sl-menu-item et2-image {
+  width: 1em;
+}
+#egw_fw_topmenu_info_items button#topmenu_info_search {
+  background-image: url(../../../api/templates/default/images/topmenu_items/search.svg);
+}
+#topmenu_info_print_title {
+  background-image: url(../../../api/templates/default/images/print.svg);
+}
+#topmenu_info_print_title span {
+  width: 45px;
+  height: 45px;
+  display: inline-block;
+}
+/*** END HEADER ***/
+/*** APPLICATION ***/
+egw-app::part(name) {
+  display: flex;
+  align-items: center;
+  text-wrap: nowrap;
+}
+egw-app::part(content) {
+  flex-direction: column;
+  overflow-y: hidden;
+}
+egw-app > div[id] > div {
+  height: 100%;
+}
+/*** END APPLICATION ***/
+/*** WIDGETS ***/
+/* This should mostly go away with webcomponents */
+/* Get nextmatch sizing more nicely without messing with dynheight */
+div.et2_nextmatch {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+div.et2_nextmatch > div:not(:first-child) {
+  flex: 1 1 100%;
+  max-height: 100%;
+}
+div.et2_nextmatch .egwGridView_outer {
+  height: 100%;
+}
+div.et2_nextmatch .egwGridView_outer thead tr th.optcol span.selectcols {
+  height: 9px;
+  padding: 4px 14px 0 2px;
+  margin-top: 4px;
+  background-image: url(../../../api/templates/default/images/selectcols.svg);
+  background-repeat: no-repeat;
+  background-size: 10px 10px;
+  display: inline-block;
+  background-position: top;
+}
+.egwGridView_scrollarea {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+/*** END WIDGETS ***/