diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 6b61dc6545..36e4c23586 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -73,6 +73,7 @@
 }
 
 // 5. Add additional custom code here
+@import "theme/jspreadsheet.css.scss";
 @import "bootstrap_style_overrides.css.scss";
 @import "libraries.css.scss";
 @import "material_icons.css.scss";
diff --git a/app/assets/stylesheets/theme/jspreadsheet.css.scss b/app/assets/stylesheets/theme/jspreadsheet.css.scss
new file mode 100644
index 0000000000..414b53318e
--- /dev/null
+++ b/app/assets/stylesheets/theme/jspreadsheet.css.scss
@@ -0,0 +1,201 @@
+// Overwrites colors in node_modules/jspreadsheet-ce/dist/jspreadsheet.css
+
+:root {
+  --jexcel-border-color: var(--d-on-surface);
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.jexcel_container.fullscreen .jexcel_content {
+  background-color: var(--d-surface);
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.jexcel_content::-webkit-scrollbar-track {
+  background: var(--d-background);
+}
+
+
+.jexcel {
+  background-color: var(--d-surface);
+  border-top: 1px solid transparent;
+  border-left: 1px solid transparent;
+  border-right: 1px solid var(--d-divider);
+  border-bottom: 1px solid var(--d-divider);
+}
+
+.jexcel > thead > tr > td {
+  border-top: 1px solid var(--d-divider);
+  border-left: 1px solid var(--d-divider);
+  border-right: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+  background-color: var(--d-code-bg);
+}
+
+.jexcel > thead > tr > td.dragging {
+  background-color: var(--d-surface);
+}
+
+.jexcel > thead > tr > td.selected {
+  background-color: rgba(var(--d-on-surface-rgb), 0.25);
+}
+
+.jexcel > tbody > tr > td:first-child {
+  background-color: var(--d-code-bg);
+}
+
+.jexcel > tbody > tr.dragging > td {
+  background-color: var(--d-background);
+}
+
+.jexcel > tbody > tr > td {
+  border-top: 1px solid var(--d-divider);
+  border-left: 1px solid var(--d-divider);
+  border-right: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+}
+
+.jexcel > tbody > tr > td.readonly {
+  color: rgba(var(--d-on-surface-rgb), 0.3);
+}
+
+.jexcel > tbody > tr.selected > td:first-child {
+  background-color: rgba(var(--d-on-surface-rgb), 0.25);
+}
+
+.jexcel > tbody > tr > td.highlight > a {
+  color: var(--d-info);
+}
+
+.jexcel > tfoot > tr > td {
+  border-top: 1px solid var(--d-divider);
+  border-left: 1px solid var(--d-divider);
+  border-right: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+  background-color: var(--d-code-bg);
+}
+
+.jexcel .highlight {
+  background-color: rgba(var(--d-on-surface-rgb), 0.05);
+}
+
+.jexcel .highlight-top {
+  border-top: 1px solid var(--jexcel-border-color);
+  box-shadow: 0 -1px var(--d-divider);
+}
+
+.jexcel .highlight-left {
+  border-left: 1px solid var(--jexcel-border-color);
+  box-shadow: -1px 0 var(--d-divider);
+}
+
+.jexcel .highlight-right {
+  border-right: 1px solid var(--jexcel-border-color);
+}
+
+.jexcel .highlight-bottom {
+  border-bottom: 1px solid var(--jexcel-border-color);
+}
+
+.jexcel .highlight-top.highlight-left {
+  box-shadow: -1px -1px var(--d-divider);
+}
+
+.jexcel .highlight-selected {
+  background-color: rgba(var(--d-on-surface-rgb), 0.0);
+}
+
+.jexcel .selection {
+  background-color: rgba(var(--d-on-surface-rgb), 0.05);
+}
+
+.jexcel .selection-left {
+  border-left: 1px dotted var(--jexcel-border-color);
+}
+
+.jexcel .selection-right {
+  border-right: 1px dotted var(--jexcel-border-color);
+}
+
+.jexcel .selection-top {
+  border-top: 1px dotted var(--jexcel-border-color);
+}
+
+.jexcel .selection-bottom {
+  border-bottom: 1px dotted var(--jexcel-border-color);
+}
+
+.jexcel .editor .jupload {
+  background-color: var(--d-surface);
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.jexcel .editor .jexcel_richtext {
+  background-color: var(--d-surface);
+}
+
+.jexcel .editor .jclose::after {
+  text-shadow: 0 0 5px var(--d-surface);
+}
+
+.jexcel .error {
+  border: 1px solid var(--d-danger);
+}
+
+.jexcel .copying-top {
+  border-top: 1px dashed var(--jexcel-border-color);
+}
+
+.jexcel .copying-left {
+  border-left: 1px dashed var(--jexcel-border-color);
+}
+
+.jexcel .copying-right {
+  border-right: 1px dashed var(--jexcel-border-color);
+}
+
+.jexcel .copying-bottom {
+  border-bottom: 1px dashed var(--jexcel-border-color);
+}
+
+.red {
+  color: var(--d-danger);
+}
+
+// overwrites colors and pading for jcontextmenu defined in node_modules/jsuites/dist/jsuites.css
+
+.jcontextmenu {
+  background: var(--d-surface);
+  color: var(--d-on-surface);
+  border: 1px solid var(--d-divider);
+  border-radius: 5px;
+  padding: 0;
+
+  @include shadow-z3;
+}
+
+.jcontextmenu > div {
+  padding: 8px 16px;
+  width: auto;
+}
+
+.jcontextmenu > div a {
+  color: var(--d-on-surface);
+}
+
+.jcontextmenu .jcontextmenu-disabled a {
+  color: var(--d-on-surface-muted);
+}
+
+.jcontextmenu .jcontextmenu-disabled::before {
+  color: var(--d-on-surface-muted);
+}
+
+.jcontextmenu > div:hover {
+  background: var(--d-secondary-container);
+  color: var(--d-on-secondary-container);
+}
+
+.jcontextmenu hr {
+  border: 1px solid var(--d-divider);
+  margin: 0;
+}