diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index d27a76b267..429d9df181 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -181,6 +181,14 @@
   --theme-calendar-event-unavailable-color: rgba(244, 119, 88, .2);
   --theme-calendar-event-unavailable-bgcolor: #fdece7;
 
+  --theme-diffview-block-header-color: rgba(56,139,253,0.1);
+  --theme-diffview-line-color: var(--theme-content-color);
+  --theme-diffview-insert-line-color: rgba(46, 160, 67, 0.15);
+  --theme-diffview-delete-line-color: rgba(248, 81, 73, 0.1);
+  --theme-diffview-empty-line-color: rgba(110, 118, 129, 0.1);
+  --theme-diffview-insert-color: rgb(63, 185, 80);
+  --theme-diffview-delete-color: rgb(248, 81, 73);
+
   --theme-tooltip-color: rgba(255, 255, 255, .8);
   --theme-tooltip-bg: #353347;
   --theme-tooltip-key-bg: rgba(255, 255, 255, .08);
@@ -377,6 +385,14 @@
   --theme-calendar-event-unavailable-color: rgba(244, 119, 88, .2);
   --theme-calendar-event-unavailable-bgcolor: #fdece7;
 
+  --theme-diffview-block-header-color: rgb(221, 244, 255);
+  --theme-diffview-line-color: var(--theme-content-color);
+  --theme-diffview-insert-line-color: rgb(230, 255, 236);
+  --theme-diffview-delete-line-color: rgb(255, 235, 233);
+  --theme-diffview-empty-line-color: rgba(234, 238, 242, 0.5);
+  --theme-diffview-insert-color: rgb(26, 127, 55);
+  --theme-diffview-delete-color: rgb(209, 36, 47);
+
   --theme-tooltip-color: #FFF;
   --theme-tooltip-bg: #444248;
   --theme-tooltip-key-bg: rgba(255, 255, 255, .08);
diff --git a/packages/ui/src/components/icons/Copy.svelte b/packages/ui/src/components/icons/Copy.svelte
new file mode 100644
index 0000000000..9cde48cf1b
--- /dev/null
+++ b/packages/ui/src/components/icons/Copy.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path
+    d="M11.5,1H6.6C5.3,1,4.2,2,4.1,3.3C2.9,3.5,2,4.6,2,5.8v6.7C2,13.9,3.1,15,4.5,15h4.9c1.3,0,2.4-1,2.5-2.3 c1.2-0.2,2.1-1.2,2.1-2.5V3.5C14,2.1,12.9,1,11.5,1z M9.4,14H4.5C3.7,14,3,13.3,3,12.5V5.8c0-0.7,0.5-1.3,1.1-1.4v5.8 c0,1.4,1.1,2.5,2.5,2.5h4.3C10.8,13.4,10.2,14,9.4,14z M13,10.2c0,0.8-0.7,1.5-1.5,1.5H6.6c-0.8,0-1.5-0.7-1.5-1.5V3.5 C5.1,2.7,5.8,2,6.6,2h4.9C12.3,2,13,2.7,13,3.5V10.2z"
+  />
+</svg>
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 4e33e9a098..b6e1ea750c 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -115,6 +115,7 @@ export { default as Timeline } from './components/Timeline.svelte'
 export { default as TimeShiftPresenter } from './components/TimeShiftPresenter.svelte'
 
 export { default as IconAdd } from './components/icons/Add.svelte'
+export { default as IconCopy } from './components/icons/Copy.svelte'
 export { default as IconStart } from './components/icons/Start.svelte'
 export { default as IconStop } from './components/icons/Stop.svelte'
 export { default as IconBack } from './components/icons/Back.svelte'