diff --git a/src/renderer/components/ModalAskParameters.vue b/src/renderer/components/ModalAskParameters.vue
index 487d2753..043522bc 100644
--- a/src/renderer/components/ModalAskParameters.vue
+++ b/src/renderer/components/ModalAskParameters.vue
@@ -6,13 +6,13 @@
       @confirm="runRoutine"
       @hide="closeModal"
    >
-      <template slot="header">
+      <template #header>
          <div class="d-flex">
             <i class="mdi mdi-24px mdi-play mr-1" />
             <span class="cut-text">{{ $t('word.parameters') }}: {{ localRoutine.name }}</span>
          </div>
       </template>
-      <div slot="body">
+      <template #body>
          <div class="content">
             <form class="form-horizontal">
                <div
@@ -43,7 +43,7 @@
                </div>
             </form>
          </div>
-      </div>
+      </template>
    </ConfirmModal>
 </template>
 
diff --git a/src/renderer/components/ModalDiscardChanges.vue b/src/renderer/components/ModalDiscardChanges.vue
index 2b66ba67..de9f8461 100644
--- a/src/renderer/components/ModalDiscardChanges.vue
+++ b/src/renderer/components/ModalDiscardChanges.vue
@@ -5,16 +5,16 @@
       @confirm="$emit('confirm')"
       @hide="$emit('close')"
    >
-      <template slot="header">
+      <template #header>
          <div class="d-flex">
             <i class="mdi mdi-24px mdi-content-save-alert mr-1" /> {{ $t('message.unsavedChanges') }}
          </div>
       </template>
-      <div slot="body">
+      <template #body>
          <div>
             {{ $t('message.discardUnsavedChanges') }}
          </div>
-      </div>
+      </template>
    </ConfirmModal>
 </template>
 
diff --git a/src/renderer/components/ModalProcessesListRow.vue b/src/renderer/components/ModalProcessesListRow.vue
index b5b88e63..3c40f002 100644
--- a/src/renderer/components/ModalProcessesListRow.vue
+++ b/src/renderer/components/ModalProcessesListRow.vue
@@ -22,12 +22,12 @@
          :hide-footer="true"
          @hide="hideInfoModal"
       >
-         <template :slot="'header'">
+         <template #header>
             <div class="d-flex">
                <i class="mdi mdi-24px mdi-information-outline mr-1" /> {{ $t('message.processInfo') }}
             </div>
          </template>
-         <div :slot="'body'">
+         <template #body>
             <div>
                <div>
                   <TextEditor
@@ -38,7 +38,7 @@
                   />
                </div>
             </div>
-         </div>
+         </template>
       </ConfirmModal>
    </div>
 </template>
diff --git a/src/renderer/components/SettingBarContext.vue b/src/renderer/components/SettingBarContext.vue
index 1c2950fd..8aa4e842 100644
--- a/src/renderer/components/SettingBarContext.vue
+++ b/src/renderer/components/SettingBarContext.vue
@@ -15,16 +15,16 @@
          @confirm="confirmDeleteConnection"
          @hide="hideConfirmModal"
       >
-         <template :slot="'header'">
+         <template #header>
             <div class="d-flex">
                <i class="mdi mdi-24px mdi-server-remove mr-1" /> {{ $t('message.deleteConnection') }}
             </div>
          </template>
-         <div :slot="'body'">
+         <template #body>
             <div class="mb-2">
                {{ $t('message.deleteCorfirm') }} <b>{{ connectionName }}</b>?
             </div>
-         </div>
+         </template>
       </ConfirmModal>
    </BaseContextMenu>
 </template>
diff --git a/src/renderer/components/TheScratchpad.vue b/src/renderer/components/TheScratchpad.vue
index 97e04e4f..09e87b28 100644
--- a/src/renderer/components/TheScratchpad.vue
+++ b/src/renderer/components/TheScratchpad.vue
@@ -6,12 +6,12 @@
       :hide-footer="true"
       @hide="hideScratchpad"
    >
-      <template :slot="'header'">
+      <template #header>
          <div class="d-flex">
             <i class="mdi mdi-24px mdi-notebook-edit-outline mr-1" /> {{ $t('word.scratchpad') }}
          </div>
       </template>
-      <div :slot="'body'">
+      <template #body>
          <div>
             <div>
                <TextEditor
@@ -24,7 +24,7 @@
             </div>
             <small class="text-gray">{{ $t('message.markdownSupported') }}</small>
          </div>
-      </div>
+      </template>
    </ConfirmModal>
 </template>
 
diff --git a/src/renderer/components/Workspace.vue b/src/renderer/components/Workspace.vue
index a5c531d4..2f21ea2f 100644
--- a/src/renderer/components/Workspace.vue
+++ b/src/renderer/components/Workspace.vue
@@ -256,56 +256,59 @@
                   </span>
                </a>
             </li>
-            <li
-               v-if="workspace.customizations.processesList"
-               slot="header"
-               class="tab-item dropdown tools-dropdown"
-            >
-               <a
-                  class="tab-link workspace-tools-link dropdown-toggle"
-                  tabindex="0"
-                  :title="$t('word.tools')"
+            <template #header>
+               <li
+                  v-if="workspace.customizations.processesList"
+                  class="tab-item dropdown tools-dropdown"
                >
-                  <i class="mdi mdi-24px mdi-tools" />
-               </a>
-               <ul v-if="hasTools" class="menu text-left text-uppercase">
-                  <li class="menu-item">
-                     <a class="c-hand p-vcentered" @click="showProcessesModal">
-                        <i class="mdi mdi-memory mr-1 tool-icon" />
-                        <span>{{ $t('message.processesList') }}</span>
-                     </a>
-                  </li>
-                  <li
-                     v-if="workspace.customizations.variables"
-                     class="menu-item"
-                     title="Coming..."
+                  <a
+                     class="tab-link workspace-tools-link dropdown-toggle"
+                     tabindex="0"
+                     :title="$t('word.tools')"
                   >
-                     <a class="c-hand p-vcentered disabled">
-                        <i class="mdi mdi-shape mr-1 tool-icon" />
-                        <span>{{ $t('word.variables') }}</span>
-                     </a>
-                  </li>
-                  <li
-                     v-if="workspace.customizations.usersManagement"
-                     class="menu-item"
-                     title="Coming..."
+                     <i class="mdi mdi-24px mdi-tools" />
+                  </a>
+                  <ul v-if="hasTools" class="menu text-left text-uppercase">
+                     <li class="menu-item">
+                        <a class="c-hand p-vcentered" @click="showProcessesModal">
+                           <i class="mdi mdi-memory mr-1 tool-icon" />
+                           <span>{{ $t('message.processesList') }}</span>
+                        </a>
+                     </li>
+                     <li
+                        v-if="workspace.customizations.variables"
+                        class="menu-item"
+                        title="Coming..."
+                     >
+                        <a class="c-hand p-vcentered disabled">
+                           <i class="mdi mdi-shape mr-1 tool-icon" />
+                           <span>{{ $t('word.variables') }}</span>
+                        </a>
+                     </li>
+                     <li
+                        v-if="workspace.customizations.usersManagement"
+                        class="menu-item"
+                        title="Coming..."
+                     >
+                        <a class="c-hand p-vcentered disabled">
+                           <i class="mdi mdi-account-group mr-1 tool-icon" />
+                           <span>{{ $t('message.manageUsers') }}</span>
+                        </a>
+                     </li>
+                  </ul>
+               </li>
+            </template>
+            <template #footer>
+               <li class="tab-item">
+                  <a
+                     class="tab-add"
+                     :title="$t('message.openNewTab')"
+                     @click="addQueryTab"
                   >
-                     <a class="c-hand p-vcentered disabled">
-                        <i class="mdi mdi-account-group mr-1 tool-icon" />
-                        <span>{{ $t('message.manageUsers') }}</span>
-                     </a>
-                  </li>
-               </ul>
-            </li>
-            <li slot="footer" class="tab-item">
-               <a
-                  class="tab-add"
-                  :title="$t('message.openNewTab')"
-                  @click="addQueryTab"
-               >
-                  <i class="mdi mdi-24px mdi-plus" />
-               </a>
-            </li>
+                     <i class="mdi mdi-24px mdi-plus" />
+                  </a>
+               </li>
+            </template>
          </Draggable>
          <WorkspaceEmptyState v-if="!workspace.tabs.length" @new-tab="addQueryTab" />
          <template v-for="tab of workspace.tabs">
diff --git a/src/renderer/components/WorkspaceExploreBarMiscContext.vue b/src/renderer/components/WorkspaceExploreBarMiscContext.vue
index f9807613..a4e38ab5 100644
--- a/src/renderer/components/WorkspaceExploreBarMiscContext.vue
+++ b/src/renderer/components/WorkspaceExploreBarMiscContext.vue
@@ -42,17 +42,17 @@
          @confirm="deleteMisc"
          @hide="hideDeleteModal"
       >
-         <template slot="header">
+         <template #header>
             <div class="d-flex">
                <i class="mdi mdi-24px mdi-delete mr-1" />
                <span class="cut-text">{{ deleteMessage }}</span>
             </div>
          </template>
-         <div slot="body">
+         <template #body>
             <div class="mb-2">
                {{ $t('message.deleteCorfirm') }} "<b>{{ selectedMisc.name }}</b>"?
             </div>
-         </div>
+         </template>
       </ConfirmModal>
       <ModalAskParameters
          v-if="isAskingParameters"
diff --git a/src/renderer/components/WorkspaceExploreBarSchemaContext.vue b/src/renderer/components/WorkspaceExploreBarSchemaContext.vue
index 812a7a67..0c8ff411 100644
--- a/src/renderer/components/WorkspaceExploreBarSchemaContext.vue
+++ b/src/renderer/components/WorkspaceExploreBarSchemaContext.vue
@@ -78,17 +78,17 @@
          @confirm="deleteSchema"
          @hide="hideDeleteModal"
       >
-         <template slot="header">
+         <template #header>
             <div class="d-flex">
                <i class="mdi mdi-24px mdi-database-remove mr-1" />
                <span class="cut-text">{{ $t('message.deleteSchema') }}</span>
             </div>
          </template>
-         <div slot="body">
+         <template #body>
             <div class="mb-2">
                {{ $t('message.deleteCorfirm') }} "<b>{{ selectedSchema }}</b>"?
             </div>
-         </div>
+         </template>
       </ConfirmModal>
       <ModalEditSchema
          v-if="isEditModal"
diff --git a/src/renderer/components/WorkspaceExploreBarTableContext.vue b/src/renderer/components/WorkspaceExploreBarTableContext.vue
index d01038b8..b3bf3e00 100644
--- a/src/renderer/components/WorkspaceExploreBarTableContext.vue
+++ b/src/renderer/components/WorkspaceExploreBarTableContext.vue
@@ -40,33 +40,33 @@
          @confirm="emptyTable"
          @hide="hideEmptyModal"
       >
-         <template slot="header">
+         <template #header>
             <div class="d-flex">
                <i class="mdi mdi-24px mdi-table-off mr-1" /> <span class="cut-text">{{ $t('message.emptyTable') }}</span>
             </div>
          </template>
-         <div slot="body">
+         <template #body>
             <div class="mb-2">
                {{ $t('message.emptyCorfirm') }} "<b>{{ selectedTable.name }}</b>"?
             </div>
-         </div>
+         </template>
       </ConfirmModal>
       <ConfirmModal
          v-if="isDeleteModal"
          @confirm="deleteTable"
          @hide="hideDeleteModal"
       >
-         <template slot="header">
+         <template #header>
             <div class="d-flex">
                <i class="mdi mdi-24px mdi-table-remove mr-1" />
                <span class="cut-text">{{ selectedTable.type === 'table' ? $t('message.deleteTable') : $t('message.deleteView') }}</span>
             </div>
          </template>
-         <div slot="body">
+         <template #body>
             <div class="mb-2">
                {{ $t('message.deleteCorfirm') }} "<b>{{ selectedTable.name }}</b>"?
             </div>
-         </div>
+         </template>
       </ConfirmModal>
    </BaseContextMenu>
 </template>
diff --git a/src/renderer/components/WorkspaceTabPropsFunctionParamsModal.vue b/src/renderer/components/WorkspaceTabPropsFunctionParamsModal.vue
index 78dad809..1f2cff35 100644
--- a/src/renderer/components/WorkspaceTabPropsFunctionParamsModal.vue
+++ b/src/renderer/components/WorkspaceTabPropsFunctionParamsModal.vue
@@ -6,13 +6,13 @@
       @confirm="confirmParametersChange"
       @hide="$emit('hide')"
    >
-      <template :slot="'header'">
+      <template #header>
          <div class="d-flex">
             <i class="mdi mdi-24px mdi-dots-horizontal mr-1" />
             <span class="cut-text">{{ $t('word.parameters') }} "{{ func }}"</span>
          </div>
       </template>
-      <div :slot="'body'">
+      <template #body>
          <div class="columns col-gapless">
             <div class="column col-5">
                <div class="panel" :style="{ height: modalInnerHeight + 'px'}">
@@ -167,7 +167,7 @@
                </div>
             </div>
          </div>
-      </div>
+      </template>
    </ConfirmModal>
 </template>
 
diff --git a/src/renderer/components/WorkspaceTabPropsRoutineParamsModal.vue b/src/renderer/components/WorkspaceTabPropsRoutineParamsModal.vue
index 5919a628..4f8e8d57 100644
--- a/src/renderer/components/WorkspaceTabPropsRoutineParamsModal.vue
+++ b/src/renderer/components/WorkspaceTabPropsRoutineParamsModal.vue
@@ -6,13 +6,13 @@
       @confirm="confirmParametersChange"
       @hide="$emit('hide')"
    >
-      <template :slot="'header'">
+      <template #header>
          <div class="d-flex">
             <i class="mdi mdi-24px mdi-dots-horizontal mr-1" />
             <span class="cut-text">{{ $t('word.parameters') }} "{{ routine }}"</span>
          </div>
       </template>
-      <div :slot="'body'">
+      <template #body>
          <div class="columns col-gapless">
             <div class="column col-5">
                <div class="panel" :style="{ height: modalInnerHeight + 'px'}">
@@ -167,7 +167,7 @@
                </div>
             </div>
          </div>
-      </div>
+      </template>
    </ConfirmModal>
 </template>
 
diff --git a/src/renderer/components/WorkspaceTabPropsSchedulerTimingModal.vue b/src/renderer/components/WorkspaceTabPropsSchedulerTimingModal.vue
index 1b785bc9..fbb42e13 100644
--- a/src/renderer/components/WorkspaceTabPropsSchedulerTimingModal.vue
+++ b/src/renderer/components/WorkspaceTabPropsSchedulerTimingModal.vue
@@ -5,13 +5,13 @@
       @confirm="confirmOptionsChange"
       @hide="$emit('hide')"
    >
-      <template :slot="'header'">
+      <template #header>
          <div class="d-flex">
             <i class="mdi mdi-24px mdi-timer mr-1" />
             <span class="cut-text">{{ $t('word.timing') }} "{{ localOptions.name }}"</span>
          </div>
       </template>
-      <div :slot="'body'">
+      <template #body>
          <form class="form-horizontal">
             <div class="form-group">
                <label class="form-label col-4">
@@ -133,7 +133,7 @@
                </div>
             </div>
          </form>
-      </div>
+      </template>
    </ConfirmModal>
 </template>
 
diff --git a/src/renderer/components/WorkspaceTabPropsTableForeignModal.vue b/src/renderer/components/WorkspaceTabPropsTableForeignModal.vue
index 7289a099..0eadd046 100644
--- a/src/renderer/components/WorkspaceTabPropsTableForeignModal.vue
+++ b/src/renderer/components/WorkspaceTabPropsTableForeignModal.vue
@@ -6,13 +6,13 @@
       @confirm="confirmForeignsChange"
       @hide="$emit('hide')"
    >
-      <template :slot="'header'">
+      <template #header>
          <div class="d-flex">
             <i class="mdi mdi-24px mdi-key-link mr-1" />
             <span class="cut-text">{{ $t('word.foreignKeys') }} "{{ table }}"</span>
          </div>
       </template>
-      <div :slot="'body'">
+      <template #body>
          <div class="columns col-gapless">
             <div class="column col-5">
                <div class="panel" :style="{ height: modalInnerHeight + 'px'}">
@@ -197,7 +197,7 @@
                </div>
             </div>
          </div>
-      </div>
+      </template>
    </ConfirmModal>
 </template>
 
diff --git a/src/renderer/components/WorkspaceTabPropsTableIndexesModal.vue b/src/renderer/components/WorkspaceTabPropsTableIndexesModal.vue
index 72b14fbc..d2617c4f 100644
--- a/src/renderer/components/WorkspaceTabPropsTableIndexesModal.vue
+++ b/src/renderer/components/WorkspaceTabPropsTableIndexesModal.vue
@@ -6,13 +6,13 @@
       @confirm="confirmIndexesChange"
       @hide="$emit('hide')"
    >
-      <template :slot="'header'">
+      <template #header>
          <div class="d-flex">
             <i class="mdi mdi-24px mdi-key mdi-rotate-45 mr-1" />
             <span class="cut-text">{{ $t('word.indexes') }} "{{ table }}"</span>
          </div>
       </template>
-      <div :slot="'body'">
+      <template #body>
          <div class="columns col-gapless">
             <div class="column col-5">
                <div class="panel" :style="{ height: modalInnerHeight + 'px'}">
@@ -133,7 +133,7 @@
                </div>
             </div>
          </div>
-      </div>
+      </template>
    </ConfirmModal>
 </template>
 
diff --git a/src/renderer/components/WorkspaceTabPropsTableRow.vue b/src/renderer/components/WorkspaceTabPropsTableRow.vue
index ba42468d..999c71ce 100644
--- a/src/renderer/components/WorkspaceTabPropsTableRow.vue
+++ b/src/renderer/components/WorkspaceTabPropsTableRow.vue
@@ -230,13 +230,13 @@
          @confirm="editOFF"
          @hide="hideDefaultModal"
       >
-         <template :slot="'header'">
+         <template #header>
             <div class="d-flex">
                <i class="mdi mdi-24px mdi-playlist-edit mr-1" />
                <span class="cut-text">{{ $t('word.default') }} "{{ row.name }}"</span>
             </div>
          </template>
-         <div :slot="'body'">
+         <template #body>
             <form class="form-horizontal">
                <div class="mb-2">
                   <label class="form-radio form-inline">
@@ -324,7 +324,7 @@
                   </div>
                </div>
             </form>
-         </div>
+         </template>
       </ConfirmModal>
    </div>
 </template>
diff --git a/src/renderer/components/WorkspaceTabQueryTable.vue b/src/renderer/components/WorkspaceTabQueryTable.vue
index b1fd3523..97057456 100644
--- a/src/renderer/components/WorkspaceTabQueryTable.vue
+++ b/src/renderer/components/WorkspaceTabQueryTable.vue
@@ -91,17 +91,17 @@
          @confirm="deleteSelected"
          @hide="hideDeleteConfirmModal"
       >
-         <template :slot="'header'">
+         <template #header>
             <div class="d-flex">
                <i class="mdi mdi-24px mdi-delete mr-1" />
                <span class="cut-text">{{ $tc('message.deleteRows', selectedRows.length) }}</span>
             </div>
          </template>
-         <div :slot="'body'">
+         <template #body>
             <div class="mb-2">
                {{ $tc('message.confirmToDeleteRows', selectedRows.length) }}
             </div>
-         </div>
+         </template>
       </ConfirmModal>
    </div>
 </template>
diff --git a/src/renderer/components/WorkspaceTabQueryTableRow.vue b/src/renderer/components/WorkspaceTabQueryTableRow.vue
index 7138284b..deeab2ce 100644
--- a/src/renderer/components/WorkspaceTabQueryTableRow.vue
+++ b/src/renderer/components/WorkspaceTabQueryTableRow.vue
@@ -76,12 +76,12 @@
          @confirm="editOFF"
          @hide="hideEditorModal"
       >
-         <template :slot="'header'">
+         <template #header>
             <div class="d-flex">
                <i class="mdi mdi-24px mdi-playlist-edit mr-1" /> <span class="cut-text">{{ $t('word.edit') }} "{{ editingField }}"</span>
             </div>
          </template>
-         <div :slot="'body'">
+         <template #body>
             <div class="mb-2">
                <div>
                   <TextEditor
@@ -132,7 +132,7 @@
                   </div>
                </div>
             </div>
-         </div>
+         </template>
       </ConfirmModal>
       <ConfirmModal
          v-if="isBlobEditor"
@@ -140,13 +140,13 @@
          @confirm="editOFF"
          @hide="hideEditorModal"
       >
-         <template :slot="'header'">
+         <template #header>
             <div class="d-flex">
                <i class="mdi mdi-24px mdi-playlist-edit mr-1" />
                <span class="cut-text">{{ $t('word.edit') }} "{{ editingField }}"</span>
             </div>
          </template>
-         <div :slot="'body'">
+         <template #body>
             <div class="mb-2">
                <transition name="jump-down">
                   <div v-if="contentInfo.size">
@@ -186,7 +186,7 @@
                   >
                </div>
             </div>
-         </div>
+         </template>
       </ConfirmModal>
    </div>
 </template>