diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 059b824e11..2e700c27d4 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -308,6 +308,10 @@
   --theme-clockface-min-arrow: conic-gradient(at 50% -10px, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 49%, #2F2F3A 50%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 0) 100%);
   --theme-clockface-arrows-holder: radial-gradient(at top center, #2F2F3A, #555555);
   --theme-clockface-arrows-shadow: 0 0 1px white;
+
+  --global-ui-BackgroundColor: #A5BDFF0D;
+  --global-ui-hover-BackgroundColor: #A5BDFF1A;
+  --global-surface-02-BackgroundColor: #19202E;
 }
 
 /* Light Theme */
@@ -536,4 +540,8 @@
   --theme-clockface-min-arrow: conic-gradient(at 50% -10px, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 49%, white 50%, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0) 100%);
   --theme-clockface-arrows-holder: radial-gradient(at top center, #eee, #aaa);
   --theme-clockface-arrows-shadow: 0 0 1px black;
+
+  --global-ui-hover-BackgroundColor: #A5BDFF1A;
+  --global-ui-BackgroundColor: #1530720D;
+  --global-surface-02-BackgroundColor: #19202E;
 }
diff --git a/plugins/task-resources/src/components/projectTypes/ProjectEditor.svelte b/plugins/task-resources/src/components/projectTypes/ProjectEditor.svelte
index 83a2e0baa9..b7ccde2ff1 100644
--- a/plugins/task-resources/src/components/projectTypes/ProjectEditor.svelte
+++ b/plugins/task-resources/src/components/projectTypes/ProjectEditor.svelte
@@ -14,7 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { createQuery, getClient } from '@hcengineering/presentation'
+  import { ComponentExtensions, createQuery, getClient } from '@hcengineering/presentation'
   import task, { Project, ProjectType, ProjectTypeDescriptor, Task, TaskType } from '@hcengineering/task'
 
   import { Ref, SortingOrder, Status } from '@hcengineering/core'
@@ -269,21 +269,8 @@
                   </div>
                 </div>
 
-                <div class="panelBox flex-col row">
-                  <!-- svelte-ignore a11y-click-events-have-key-events -->
-                  <!-- svelte-ignore a11y-no-static-element-interactions -->
-                  <div class="fs-title flex flex-between bottom-divider">
-                    <div class="trans-title">
-                      <Label label={getEmbeddedLabel('Automation')} />
-                    </div>
-                    <div class="p-1">
-                      <Button icon={IconAdd} kind={'primary'} size={'small'} on:click={(event) => {}} />
-                    </div>
-                  </div>
-                  <div class="mt-1">
-                    <!-- svelte-ignore a11y-no-static-element-interactions -->
-                  </div>
-                </div>
+                <ComponentExtensions extension={task.extensions.ProjectEditorExtension} props={{ type }} />
+
                 <div class="panelBox flex-col row">
                   <!-- svelte-ignore a11y-click-events-have-key-events -->
                   <!-- svelte-ignore a11y-no-static-element-interactions -->