diff --git a/src/renderer/components/BaseConfirmModal.vue b/src/renderer/components/BaseConfirmModal.vue
index b30d0118..ffca3299 100644
--- a/src/renderer/components/BaseConfirmModal.vue
+++ b/src/renderer/components/BaseConfirmModal.vue
@@ -1,45 +1,47 @@
 <template>
-   <div class="modal active" :class="modalSizeClass">
-      <a class="modal-overlay" @click="hideModal" />
-      <div class="modal-container">
-         <div v-if="hasHeader" class="modal-header pl-2">
-            <div class="modal-title h6">
-               <slot name="header" />
+   <Teleport to="#window-content">
+      <div class="modal active" :class="modalSizeClass">
+         <a class="modal-overlay" @click="hideModal" />
+         <div class="modal-container">
+            <div v-if="hasHeader" class="modal-header pl-2">
+               <div class="modal-title h6">
+                  <slot name="header" />
+               </div>
+               <a class="btn btn-clear float-right" @click="hideModal" />
             </div>
-            <a class="btn btn-clear float-right" @click="hideModal" />
-         </div>
-         <div v-if="hasDefault" class="modal-header">
-            <div class="modal-title h6">
-               <slot />
+            <div v-if="hasDefault" class="modal-header">
+               <div class="modal-title h6">
+                  <slot />
+               </div>
+               <a class="btn btn-clear float-right" @click="hideModal" />
             </div>
-            <a class="btn btn-clear float-right" @click="hideModal" />
-         </div>
-         <div v-if="hasBody" class="modal-body">
-            <a
-               v-if="!hasHeader && !hasDefault"
-               class="btn btn-clear float-right"
-               @click="hideModal"
-            />
-            <div class="content">
-               <slot name="body" />
+            <div v-if="hasBody" class="modal-body">
+               <a
+                  v-if="!hasHeader && !hasDefault"
+                  class="btn btn-clear float-right"
+                  @click="hideModal"
+               />
+               <div class="content">
+                  <slot name="body" />
+               </div>
+            </div>
+            <div v-if="!hideFooter" class="modal-footer pt-0">
+               <button
+                  class="btn btn-primary mr-2"
+                  @click.stop="confirmModal"
+               >
+                  {{ confirmText || $t('word.confirm') }}
+               </button>
+               <button
+                  class="btn btn-link"
+                  @click="hideModal"
+               >
+                  {{ cancelText || $t('word.cancel') }}
+               </button>
             </div>
-         </div>
-         <div v-if="!hideFooter" class="modal-footer">
-            <button
-               class="btn btn-primary mr-2"
-               @click.stop="confirmModal"
-            >
-               {{ confirmText || $t('word.confirm') }}
-            </button>
-            <button
-               class="btn btn-link"
-               @click="hideModal"
-            >
-               {{ cancelText || $t('word.cancel') }}
-            </button>
          </div>
       </div>
-   </div>
+   </Teleport>
 </template>
 
 <script>
diff --git a/src/renderer/components/ModalAskCredentials.vue b/src/renderer/components/ModalAskCredentials.vue
index 3cdf1255..3a71c924 100644
--- a/src/renderer/components/ModalAskCredentials.vue
+++ b/src/renderer/components/ModalAskCredentials.vue
@@ -1,56 +1,58 @@
 <template>
-   <div class="modal active modal-sm">
-      <a class="modal-overlay" />
-      <div class="modal-container p-0">
-         <div class="modal-header pl-2">
-            <div class="modal-title h6">
-               <div class="d-flex">
-                  <i class="mdi mdi-24px mdi-key-variant mr-1" /> {{ $t('word.credentials') }}
+   <Teleport to="#window-content">
+      <div class="modal active modal-sm">
+         <a class="modal-overlay" />
+         <div class="modal-container p-0">
+            <div class="modal-header pl-2">
+               <div class="modal-title h6">
+                  <div class="d-flex">
+                     <i class="mdi mdi-24px mdi-key-variant mr-1" /> {{ $t('word.credentials') }}
+                  </div>
+               </div>
+               <a class="btn btn-clear c-hand" @click.stop="closeModal" />
+            </div>
+            <div class="modal-body pb-0">
+               <div class="content">
+                  <form class="form-horizontal">
+                     <div class="form-group">
+                        <div class="col-3">
+                           <label class="form-label">{{ $t('word.user') }}</label>
+                        </div>
+                        <div class="col-9">
+                           <input
+                              ref="firstInput"
+                              v-model="credentials.user"
+                              class="form-input"
+                              type="text"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group">
+                        <div class="col-3">
+                           <label class="form-label">{{ $t('word.password') }}</label>
+                        </div>
+                        <div class="col-9">
+                           <input
+                              v-model="credentials.password"
+                              class="form-input"
+                              type="password"
+                           >
+                        </div>
+                     </div>
+                  </form>
                </div>
             </div>
-            <a class="btn btn-clear c-hand" @click.stop="closeModal" />
-         </div>
-         <div class="modal-body pb-0">
-            <div class="content">
-               <form class="form-horizontal">
-                  <div class="form-group">
-                     <div class="col-3">
-                        <label class="form-label">{{ $t('word.user') }}</label>
-                     </div>
-                     <div class="col-9">
-                        <input
-                           ref="firstInput"
-                           v-model="credentials.user"
-                           class="form-input"
-                           type="text"
-                        >
-                     </div>
-                  </div>
-                  <div class="form-group">
-                     <div class="col-3">
-                        <label class="form-label">{{ $t('word.password') }}</label>
-                     </div>
-                     <div class="col-9">
-                        <input
-                           v-model="credentials.password"
-                           class="form-input"
-                           type="password"
-                        >
-                     </div>
-                  </div>
-               </form>
+            <div class="modal-footer">
+               <button class="btn btn-primary mr-2" @click.stop="sendCredentials">
+                  {{ $t('word.send') }}
+               </button>
+               <button class="btn btn-link" @click.stop="closeModal">
+                  {{ $t('word.close') }}
+               </button>
             </div>
          </div>
-         <div class="modal-footer">
-            <button class="btn btn-primary mr-2" @click.stop="sendCredentials">
-               {{ $t('word.send') }}
-            </button>
-            <button class="btn btn-link" @click.stop="closeModal">
-               {{ $t('word.close') }}
-            </button>
-         </div>
       </div>
-   </div>
+   </Teleport>
 </template>
 
 <script>
diff --git a/src/renderer/components/ModalEditSchema.vue b/src/renderer/components/ModalEditSchema.vue
index de655dd4..40d6214f 100644
--- a/src/renderer/components/ModalEditSchema.vue
+++ b/src/renderer/components/ModalEditSchema.vue
@@ -1,68 +1,70 @@
 <template>
-   <div class="modal active">
-      <a class="modal-overlay" @click.stop="closeModal" />
-      <div class="modal-container p-0">
-         <div class="modal-header pl-2">
-            <div class="modal-title h6">
-               <div class="d-flex">
-                  <i class="mdi mdi-24px mdi-database-edit mr-1" />
-                  <span class="cut-text">{{ $t('message.editSchema') }}</span>
+   <Teleport to="#window-content">
+      <div class="modal active">
+         <a class="modal-overlay" @click.stop="closeModal" />
+         <div class="modal-container p-0">
+            <div class="modal-header pl-2">
+               <div class="modal-title h6">
+                  <div class="d-flex">
+                     <i class="mdi mdi-24px mdi-database-edit mr-1" />
+                     <span class="cut-text">{{ $t('message.editSchema') }}</span>
+                  </div>
+               </div>
+               <a class="btn btn-clear c-hand" @click.stop="closeModal" />
+            </div>
+            <div class="modal-body pb-0">
+               <div class="content">
+                  <form class="form-horizontal">
+                     <div class="form-group">
+                        <div class="col-3">
+                           <label class="form-label">{{ $t('word.name') }}</label>
+                        </div>
+                        <div class="col-9">
+                           <input
+                              v-model="database.name"
+                              class="form-input"
+                              type="text"
+                              required
+                              :placeholder="$t('message.schemaName')"
+                              readonly
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group">
+                        <div class="col-3">
+                           <label class="form-label">{{ $t('word.collation') }}</label>
+                        </div>
+                        <div class="col-9">
+                           <select
+                              ref="firstInput"
+                              v-model="database.collation"
+                              class="form-select"
+                           >
+                              <option
+                                 v-for="collation in collations"
+                                 :key="collation.id"
+                                 :value="collation.collation"
+                              >
+                                 {{ collation.collation }}
+                              </option>
+                           </select>
+                           <small>{{ $t('message.serverDefault') }}: {{ defaultCollation }}</small>
+                        </div>
+                     </div>
+                  </form>
                </div>
             </div>
-            <a class="btn btn-clear c-hand" @click.stop="closeModal" />
-         </div>
-         <div class="modal-body pb-0">
-            <div class="content">
-               <form class="form-horizontal">
-                  <div class="form-group">
-                     <div class="col-3">
-                        <label class="form-label">{{ $t('word.name') }}</label>
-                     </div>
-                     <div class="col-9">
-                        <input
-                           v-model="database.name"
-                           class="form-input"
-                           type="text"
-                           required
-                           :placeholder="$t('message.schemaName')"
-                           readonly
-                        >
-                     </div>
-                  </div>
-                  <div class="form-group">
-                     <div class="col-3">
-                        <label class="form-label">{{ $t('word.collation') }}</label>
-                     </div>
-                     <div class="col-9">
-                        <select
-                           ref="firstInput"
-                           v-model="database.collation"
-                           class="form-select"
-                        >
-                           <option
-                              v-for="collation in collations"
-                              :key="collation.id"
-                              :value="collation.collation"
-                           >
-                              {{ collation.collation }}
-                           </option>
-                        </select>
-                        <small>{{ $t('message.serverDefault') }}: {{ defaultCollation }}</small>
-                     </div>
-                  </div>
-               </form>
+            <div class="modal-footer">
+               <button class="btn btn-primary mr-2" @click.stop="updateSchema">
+                  {{ $t('word.update') }}
+               </button>
+               <button class="btn btn-link" @click.stop="closeModal">
+                  {{ $t('word.close') }}
+               </button>
             </div>
          </div>
-         <div class="modal-footer">
-            <button class="btn btn-primary mr-2" @click.stop="updateSchema">
-               {{ $t('word.update') }}
-            </button>
-            <button class="btn btn-link" @click.stop="closeModal">
-               {{ $t('word.close') }}
-            </button>
-         </div>
       </div>
-   </div>
+   </Teleport>
 </template>
 
 <script>
diff --git a/src/renderer/components/ModalExportSchema.vue b/src/renderer/components/ModalExportSchema.vue
index 7d0f5c7c..cd24f67c 100644
--- a/src/renderer/components/ModalExportSchema.vue
+++ b/src/renderer/components/ModalExportSchema.vue
@@ -1,270 +1,272 @@
 <template>
-   <div class="modal active">
-      <a class="modal-overlay" @click.stop="closeModal" />
-      <div class="modal-container p-0">
-         <div class="modal-header pl-2">
-            <div class="modal-title h6">
-               <div class="d-flex">
-                  <i class="mdi mdi-24px mdi-database-arrow-down mr-1" />
-                  <span class="cut-text">{{ $t('message.exportSchema') }}</span>
-               </div>
-            </div>
-            <a class="btn btn-clear c-hand" @click.stop="closeModal" />
-         </div>
-         <div class="modal-body pb-0">
-            <div class="container">
-               <div class="columns">
-                  <div class="col-3">
-                     <label class="form-label">{{ $t('message.directoryPath') }}</label>
-                  </div>
-                  <div class="col-9">
-                     <fieldset class="input-group">
-                        <input
-                           v-model="basePath"
-                           class="form-input"
-                           type="text"
-                           required
-                           readonly
-                           :placeholder="$t('message.schemaName')"
-                        >
-                        <button
-                           type="button"
-                           class="btn btn-primary input-group-btn"
-                           @click.prevent="openPathDialog"
-                        >
-                           {{ $t('word.change') }}
-                        </button>
-                     </fieldset>
+   <Teleport to="#window-content">
+      <div class="modal active">
+         <a class="modal-overlay" @click.stop="closeModal" />
+         <div class="modal-container p-0">
+            <div class="modal-header pl-2">
+               <div class="modal-title h6">
+                  <div class="d-flex">
+                     <i class="mdi mdi-24px mdi-database-arrow-down mr-1" />
+                     <span class="cut-text">{{ $t('message.exportSchema') }}</span>
                   </div>
                </div>
+               <a class="btn btn-clear c-hand" @click.stop="closeModal" />
             </div>
-
-            <div class="columns export-options">
-               <div class="column col-8 left">
-                  <div class="columns mb-2">
-                     <div class="column col-auto d-flex text-italic ">
-                        <i class="mdi mdi-file-document-outline mr-2" />
-                        {{ filename }}
+            <div class="modal-body pb-0">
+               <div class="container">
+                  <div class="columns">
+                     <div class="col-3">
+                        <label class="form-label">{{ $t('message.directoryPath') }}</label>
                      </div>
-
-                     <div class="column col-auto col-ml-auto ">
-                        <button
-                           class="btn btn-dark btn-sm"
-                           :title="$t('word.refresh')"
-                           @click="refresh"
-                        >
-                           <i class="mdi mdi-database-refresh" />
-                        </button>
-                        <button
-                           class="btn btn-dark btn-sm"
-                           :title="$t('message.uncheckAllTables')"
-                           :disabled="isRefreshing"
-                           @click="uncheckAllTables"
-                        >
-                           <i class="mdi mdi-file-tree-outline" />
-                        </button>
-                        <button
-                           class="btn btn-dark btn-sm"
-                           :title="$t('message.checkAllTables')"
-                           :disabled="isRefreshing"
-                           @click="checkAllTables"
-                        >
-                           <i class="mdi mdi-file-tree" />
-                        </button>
-                     </div>
-                  </div>
-                  <div class="workspace-query-results">
-                     <div ref="table" class="table table-hover">
-                        <div class="thead">
-                           <div class="tr text-center">
-                              <div class="th no-border" style="width: 50%;" />
-                              <div class="th no-border">
-                                 <label
-                                    class="form-checkbox m-0 px-2 form-inline"
-                                    @click.prevent="toggleAllTablesOption('includeStructure')"
-                                 >
-                                    <input
-                                       type="checkbox"
-                                       :indeterminate="includeStructureStatus === 2"
-                                       :checked="!!includeStructureStatus"
-                                    >
-                                    <i class="form-icon" />
-                                 </label>
-                              </div>
-                              <div class="th no-border">
-                                 <label
-                                    class="form-checkbox m-0 px-2 form-inline"
-                                    @click.prevent="toggleAllTablesOption('includeContent')"
-                                 >
-                                    <input
-                                       type="checkbox"
-                                       :indeterminate="includeContentStatus === 2"
-                                       :checked="!!includeContentStatus"
-                                    >
-                                    <i class="form-icon" />
-                                 </label>
-                              </div>
-                              <div class="th no-border">
-                                 <label
-                                    class="form-checkbox m-0 px-2 form-inline"
-                                    @click.prevent="toggleAllTablesOption('includeDropStatement')"
-                                 >
-                                    <input
-                                       type="checkbox"
-                                       :indeterminate="includeDropStatementStatus === 2"
-                                       :checked="!!includeDropStatementStatus"
-                                    >
-                                    <i class="form-icon" />
-                                 </label>
-                              </div>
-                           </div>
-                           <div class="tr">
-                              <div class="th" style="width: 50%;">
-                                 <div class="table-column-title">
-                                    <span>{{ $t('word.table') }}</span>
-                                 </div>
-                              </div>
-                              <div class="th text-center">
-                                 <div class="table-column-title">
-                                    <span>{{ $t('word.structure') }}</span>
-                                 </div>
-                              </div>
-                              <div class="th text-center">
-                                 <div class="table-column-title">
-                                    <span>{{ $t('word.content') }}</span>
-                                 </div>
-                              </div>
-                              <div class="th text-center">
-                                 <div class="table-column-title">
-                                    <span>{{ $t('word.drop') }}</span>
-                                 </div>
-                              </div>
-                           </div>
-                        </div>
-
-                        <div class="tbody">
-                           <div
-                              v-for="item in tables"
-                              :key="item.name"
-                              class="tr"
+                     <div class="col-9">
+                        <fieldset class="input-group">
+                           <input
+                              v-model="basePath"
+                              class="form-input"
+                              type="text"
+                              required
+                              readonly
+                              :placeholder="$t('message.schemaName')"
                            >
-                              <div class="td">
-                                 {{ item.table }}
+                           <button
+                              type="button"
+                              class="btn btn-primary input-group-btn"
+                              @click.prevent="openPathDialog"
+                           >
+                              {{ $t('word.change') }}
+                           </button>
+                        </fieldset>
+                     </div>
+                  </div>
+               </div>
+
+               <div class="columns export-options">
+                  <div class="column col-8 left">
+                     <div class="columns mb-2">
+                        <div class="column col-auto d-flex text-italic ">
+                           <i class="mdi mdi-file-document-outline mr-2" />
+                           {{ filename }}
+                        </div>
+
+                        <div class="column col-auto col-ml-auto ">
+                           <button
+                              class="btn btn-dark btn-sm"
+                              :title="$t('word.refresh')"
+                              @click="refresh"
+                           >
+                              <i class="mdi mdi-database-refresh" />
+                           </button>
+                           <button
+                              class="btn btn-dark btn-sm mx-1"
+                              :title="$t('message.uncheckAllTables')"
+                              :disabled="isRefreshing"
+                              @click="uncheckAllTables"
+                           >
+                              <i class="mdi mdi-file-tree-outline" />
+                           </button>
+                           <button
+                              class="btn btn-dark btn-sm"
+                              :title="$t('message.checkAllTables')"
+                              :disabled="isRefreshing"
+                              @click="checkAllTables"
+                           >
+                              <i class="mdi mdi-file-tree" />
+                           </button>
+                        </div>
+                     </div>
+                     <div class="workspace-query-results">
+                        <div ref="table" class="table table-hover">
+                           <div class="thead">
+                              <div class="tr text-center">
+                                 <div class="th no-border" style="width: 50%;" />
+                                 <div class="th no-border">
+                                    <label
+                                       class="form-checkbox m-0 px-2 form-inline"
+                                       @click.prevent="toggleAllTablesOption('includeStructure')"
+                                    >
+                                       <input
+                                          type="checkbox"
+                                          :indeterminate="includeStructureStatus === 2"
+                                          :checked="!!includeStructureStatus"
+                                       >
+                                       <i class="form-icon" />
+                                    </label>
+                                 </div>
+                                 <div class="th no-border">
+                                    <label
+                                       class="form-checkbox m-0 px-2 form-inline"
+                                       @click.prevent="toggleAllTablesOption('includeContent')"
+                                    >
+                                       <input
+                                          type="checkbox"
+                                          :indeterminate="includeContentStatus === 2"
+                                          :checked="!!includeContentStatus"
+                                       >
+                                       <i class="form-icon" />
+                                    </label>
+                                 </div>
+                                 <div class="th no-border">
+                                    <label
+                                       class="form-checkbox m-0 px-2 form-inline"
+                                       @click.prevent="toggleAllTablesOption('includeDropStatement')"
+                                    >
+                                       <input
+                                          type="checkbox"
+                                          :indeterminate="includeDropStatementStatus === 2"
+                                          :checked="!!includeDropStatementStatus"
+                                       >
+                                       <i class="form-icon" />
+                                    </label>
+                                 </div>
                               </div>
-                              <div class="td text-center">
-                                 <label class="form-checkbox m-0 px-2 form-inline">
-                                    <input
-                                       v-model="item.includeStructure"
-                                       type="checkbox"
-                                    ><i class="form-icon" />
-                                 </label>
+                              <div class="tr">
+                                 <div class="th" style="width: 50%;">
+                                    <div class="table-column-title">
+                                       <span>{{ $t('word.table') }}</span>
+                                    </div>
+                                 </div>
+                                 <div class="th text-center">
+                                    <div class="table-column-title">
+                                       <span>{{ $t('word.structure') }}</span>
+                                    </div>
+                                 </div>
+                                 <div class="th text-center">
+                                    <div class="table-column-title">
+                                       <span>{{ $t('word.content') }}</span>
+                                    </div>
+                                 </div>
+                                 <div class="th text-center">
+                                    <div class="table-column-title">
+                                       <span>{{ $t('word.drop') }}</span>
+                                    </div>
+                                 </div>
                               </div>
-                              <div class="td text-center">
-                                 <label class="form-checkbox m-0 px-2 form-inline">
-                                    <input
-                                       v-model="item.includeContent"
-                                       type="checkbox"
-                                    ><i class="form-icon" />
-                                 </label>
-                              </div>
-                              <div class="td text-center">
-                                 <label class="form-checkbox m-0 px-2 form-inline">
-                                    <input
-                                       v-model="item.includeDropStatement"
-                                       type="checkbox"
-                                    ><i class="form-icon" />
-                                 </label>
+                           </div>
+
+                           <div class="tbody">
+                              <div
+                                 v-for="item in tables"
+                                 :key="item.name"
+                                 class="tr"
+                              >
+                                 <div class="td">
+                                    {{ item.table }}
+                                 </div>
+                                 <div class="td text-center">
+                                    <label class="form-checkbox m-0 px-2 form-inline">
+                                       <input
+                                          v-model="item.includeStructure"
+                                          type="checkbox"
+                                       ><i class="form-icon" />
+                                    </label>
+                                 </div>
+                                 <div class="td text-center">
+                                    <label class="form-checkbox m-0 px-2 form-inline">
+                                       <input
+                                          v-model="item.includeContent"
+                                          type="checkbox"
+                                       ><i class="form-icon" />
+                                    </label>
+                                 </div>
+                                 <div class="td text-center">
+                                    <label class="form-checkbox m-0 px-2 form-inline">
+                                       <input
+                                          v-model="item.includeDropStatement"
+                                          type="checkbox"
+                                       ><i class="form-icon" />
+                                    </label>
+                                 </div>
                               </div>
                            </div>
                         </div>
                      </div>
                   </div>
-               </div>
-               <div class="column col-4">
-                  <h5 class="h5">
-                     {{ $t('word.options') }}
-                  </h5>
-                  <span class="h6">{{ $t('word.includes') }}:</span>
-                  <label
-                     v-for="(_, key) in options.includes"
-                     :key="key"
-                     class="form-checkbox"
-                  >
-                     <input v-model="options.includes[key]" type="checkbox"><i class="form-icon" /> {{ $tc(`word.${key}`, 2) }}
-                  </label>
-                  <div v-if="customizations.exportByChunks">
-                     <div class="h6 mt-4 mb-2">
-                        {{ $t('message.newInserStmtEvery') }}:
+                  <div class="column col-4">
+                     <h5 class="h5">
+                        {{ $t('word.options') }}
+                     </h5>
+                     <span class="h6">{{ $t('word.includes') }}:</span>
+                     <label
+                        v-for="(_, key) in options.includes"
+                        :key="key"
+                        class="form-checkbox"
+                     >
+                        <input v-model="options.includes[key]" type="checkbox"><i class="form-icon" /> {{ $tc(`word.${key}`, 2) }}
+                     </label>
+                     <div v-if="customizations.exportByChunks">
+                        <div class="h6 mt-4 mb-2">
+                           {{ $t('message.newInserStmtEvery') }}:
+                        </div>
+                        <div class="columns">
+                           <div class="column col-6">
+                              <input
+                                 v-model.number="options.sqlInsertAfter"
+                                 type="number"
+                                 class="form-input"
+                              >
+                           </div>
+                           <div class="column col-6">
+                              <select v-model="options.sqlInsertDivider" class="form-select">
+                                 <option value="bytes">
+                                    KiB
+                                 </option>
+                                 <option value="rows">
+                                    {{ $tc('word.row', 2) }}
+                                 </option>
+                              </select>
+                           </div>
+                        </div>
+                     </div>
+
+                     <div class="h6 mb-2 mt-4">
+                        {{ $t('message.ourputFormat') }}:
                      </div>
                      <div class="columns">
-                        <div class="column col-6">
-                           <input
-                              v-model.number="options.sqlInsertAfter"
-                              type="number"
-                              class="form-input"
-                           >
-                        </div>
-                        <div class="column col-6">
-                           <select v-model="options.sqlInsertDivider" class="form-select">
-                              <option value="bytes">
-                                 KiB
+                        <div class="column h5 mb-4">
+                           <select v-model="options.outputFormat" class="form-select">
+                              <option value="sql">
+                                 {{ $t('message.singleFile', {ext: '.sql'}) }}
                               </option>
-                              <option value="rows">
-                                 {{ $tc('word.row', 2) }}
+                              <option value="sql.zip">
+                                 {{ $t('message.zipCompressedFile', {ext: '.sql'}) }}
                               </option>
                            </select>
                         </div>
                      </div>
                   </div>
-
-                  <div class="h6 mb-2 mt-4">
-                     {{ $t('message.ourputFormat') }}:
-                  </div>
-                  <div class="columns">
-                     <div class="column h5 mb-4">
-                        <select v-model="options.outputFormat" class="form-select">
-                           <option value="sql">
-                              {{ $t('message.singleFile', {ext: '.sql'}) }}
-                           </option>
-                           <option value="sql.zip">
-                              {{ $t('message.zipCompressedFile', {ext: '.sql'}) }}
-                           </option>
-                        </select>
-                     </div>
-                  </div>
                </div>
             </div>
-         </div>
-         <div class="modal-footer columns">
-            <div class="column col modal-progress-wrapper text-left">
-               <div v-if="progressPercentage > 0" class="export-progress">
-                  <span class="progress-status">
-                     {{ progressPercentage }}% - {{ progressStatus }}
-                  </span>
-                  <progress
-                     class="progress d-block"
-                     :value="progressPercentage"
-                     max="100"
-                  />
+            <div class="modal-footer columns">
+               <div class="column col modal-progress-wrapper text-left">
+                  <div v-if="progressPercentage > 0" class="export-progress">
+                     <span class="progress-status">
+                        {{ progressPercentage }}% - {{ progressStatus }}
+                     </span>
+                     <progress
+                        class="progress d-block"
+                        :value="progressPercentage"
+                        max="100"
+                     />
+                  </div>
+               </div>
+               <div class="column col-auto px-0">
+                  <button class="btn btn-link" @click.stop="closeModal">
+                     {{ $t('word.close') }}
+                  </button>
+                  <button
+                     class="btn btn-primary mr-2"
+                     :class="{'loading': isExporting}"
+                     :disabled="isExporting || isRefreshing"
+                     autofocus
+                     @click.prevent="startExport"
+                  >
+                     {{ $t('word.export') }}
+                  </button>
                </div>
-            </div>
-            <div class="column col-auto px-0">
-               <button class="btn btn-link" @click.stop="closeModal">
-                  {{ $t('word.close') }}
-               </button>
-               <button
-                  class="btn btn-primary mr-2"
-                  :class="{'loading': isExporting}"
-                  :disabled="isExporting || isRefreshing"
-                  autofocus
-                  @click.prevent="startExport"
-               >
-                  {{ $t('word.export') }}
-               </button>
             </div>
          </div>
       </div>
-   </div>
+   </Teleport>
 </template>
 
 <script>
diff --git a/src/renderer/components/ModalFakerRows.vue b/src/renderer/components/ModalFakerRows.vue
index bedd399e..5e52cfb5 100644
--- a/src/renderer/components/ModalFakerRows.vue
+++ b/src/renderer/components/ModalFakerRows.vue
@@ -1,186 +1,188 @@
 <template>
-   <div class="modal active">
-      <a class="modal-overlay" @click.stop="closeModal" />
-      <div class="modal-container p-0">
-         <div class="modal-header pl-2">
-            <div class="modal-title h6">
-               <div class="d-flex">
-                  <i class="mdi mdi-24px mdi-playlist-plus mr-1" />
-                  <span class="cut-text">{{ $tc('message.insertRow', 2) }}</span>
+   <Teleport to="#window-content">
+      <div class="modal active">
+         <a class="modal-overlay" @click.stop="closeModal" />
+         <div class="modal-container p-0">
+            <div class="modal-header pl-2">
+               <div class="modal-title h6">
+                  <div class="d-flex">
+                     <i class="mdi mdi-24px mdi-playlist-plus mr-1" />
+                     <span class="cut-text">{{ $tc('message.insertRow', 2) }}</span>
+                  </div>
+               </div>
+               <a class="btn btn-clear c-hand" @click.stop="closeModal" />
+            </div>
+            <div class="modal-body pb-0">
+               <div class="content">
+                  <form class="form-horizontal">
+                     <fieldset :disabled="isInserting">
+                        <div
+                           v-for="field in fields"
+                           :key="field.name"
+                           class="form-group"
+                        >
+                           <div class="col-3 col-sm-12">
+                              <label class="form-label" :title="field.name">{{ field.name }}</label>
+                           </div>
+                           <div class="column columns col-sm-12">
+                              <FakerSelect
+                                 v-model="localRow[field.name]"
+                                 :type="field.type"
+                                 class="column columns pr-0"
+                                 :is-checked="!fieldsToExclude.includes(field.name)"
+                                 :foreign-keys="foreignKeys"
+                                 :key-usage="keyUsage"
+                                 :field="field"
+                                 :field-length="fieldLength(field)"
+                                 :field-obj="localRow[field.name]"
+                              >
+                                 <span class="input-group-addon field-type" :class="typeClass(field.type)">
+                                    {{ field.type }} {{ wrapNumber(fieldLength(field)) }}
+                                 </span>
+                                 <label class="form-checkbox ml-3" :title="$t('word.insert')">
+                                    <input
+                                       type="checkbox"
+                                       :checked="!fieldsToExclude.includes(field.name)"
+                                       @change.prevent="toggleFields($event, field)"
+                                    ><i class="form-icon" />
+                                 </label>
+                              </FakerSelect>
+                           </div>
+                        </div>
+                     </fieldset>
+                  </form>
                </div>
             </div>
-            <a class="btn btn-clear c-hand" @click.stop="closeModal" />
-         </div>
-         <div class="modal-body pb-0">
-            <div class="content">
-               <form class="form-horizontal">
-                  <fieldset :disabled="isInserting">
-                     <div
-                        v-for="field in fields"
-                        :key="field.name"
-                        class="form-group"
+            <div class="modal-footer columns">
+               <div class="column d-flex" :class="hasFakes ? 'col-4' : 'col-2'">
+                  <div class="input-group tooltip tooltip-right" :data-tooltip="$t('message.numberOfInserts')">
+                     <input
+                        v-model="nInserts"
+                        type="number"
+                        class="form-input"
+                        min="1"
+                        :disabled="isInserting"
                      >
-                        <div class="col-3 col-sm-12">
-                           <label class="form-label" :title="field.name">{{ field.name }}</label>
-                        </div>
-                        <div class="column columns col-sm-12">
-                           <FakerSelect
-                              v-model="localRow[field.name]"
-                              :type="field.type"
-                              class="column columns pr-0"
-                              :is-checked="!fieldsToExclude.includes(field.name)"
-                              :foreign-keys="foreignKeys"
-                              :key-usage="keyUsage"
-                              :field="field"
-                              :field-length="fieldLength(field)"
-                              :field-obj="localRow[field.name]"
-                           >
-                              <span class="input-group-addon field-type" :class="typeClass(field.type)">
-                                 {{ field.type }} {{ wrapNumber(fieldLength(field)) }}
-                              </span>
-                              <label class="form-checkbox ml-3" :title="$t('word.insert')">
-                                 <input
-                                    type="checkbox"
-                                    :checked="!fieldsToExclude.includes(field.name)"
-                                    @change.prevent="toggleFields($event, field)"
-                                 ><i class="form-icon" />
-                              </label>
-                           </FakerSelect>
-                        </div>
-                     </div>
-                  </fieldset>
-               </form>
-            </div>
-         </div>
-         <div class="modal-footer columns">
-            <div class="column d-flex" :class="hasFakes ? 'col-4' : 'col-2'">
-               <div class="input-group tooltip tooltip-right" :data-tooltip="$t('message.numberOfInserts')">
-                  <input
-                     v-model="nInserts"
-                     type="number"
-                     class="form-input"
-                     min="1"
-                     :disabled="isInserting"
+                     <span class="input-group-addon">
+                        <i class="mdi mdi-24px mdi-repeat" />
+                     </span>
+                  </div>
+                  <div
+                     v-if="hasFakes"
+                     class="tooltip tooltip-right ml-2"
+                     :data-tooltip="$t('message.fakeDataLanguage')"
                   >
-                  <span class="input-group-addon">
-                     <i class="mdi mdi-24px mdi-repeat" />
-                  </span>
+                     <select v-model="fakerLocale" class="form-select">
+                        <option value="ar">
+                           Arabic
+                        </option><option value="az">
+                           Azerbaijani
+                        </option><option value="zh_CN">
+                           Chinese
+                        </option><option value="zh_TW">
+                           Chinese (Taiwan)
+                        </option><option value="cz">
+                           Czech
+                        </option><option value="nl">
+                           Dutch
+                        </option><option value="nl_BE">
+                           Dutch (Belgium)
+                        </option><option value="en">
+                           English
+                        </option><option value="en_AU_ocker">
+                           English (Australia Ocker)
+                        </option><option value="en_AU">
+                           English (Australia)
+                        </option><option value="en_BORK">
+                           English (Bork)
+                        </option><option value="en_CA">
+                           English (Canada)
+                        </option><option value="en_GB">
+                           English (Great Britain)
+                        </option><option value="en_IND">
+                           English (India)
+                        </option><option value="en_IE">
+                           English (Ireland)
+                        </option><option value="en_ZA">
+                           English (South Africa)
+                        </option><option value="en_US">
+                           English (United States)
+                        </option><option value="fa">
+                           Farsi
+                        </option><option value="fi">
+                           Finnish
+                        </option><option value="fr">
+                           French
+                        </option><option value="fr_CA">
+                           French (Canada)
+                        </option><option value="fr_CH">
+                           French (Switzerland)
+                        </option><option value="ge">
+                           Georgian
+                        </option><option value="de">
+                           German
+                        </option><option value="de_AT">
+                           German (Austria)
+                        </option><option value="de_CH">
+                           German (Switzerland)
+                        </option><option value="hr">
+                           Hrvatski
+                        </option><option value="id_ID">
+                           Indonesia
+                        </option><option value="it">
+                           Italian
+                        </option><option value="ja">
+                           Japanese
+                        </option><option value="ko">
+                           Korean
+                        </option><option value="nep">
+                           Nepalese
+                        </option><option value="nb_NO">
+                           Norwegian
+                        </option><option value="pl">
+                           Polish
+                        </option><option value="pt_BR">
+                           Portuguese (Brazil)
+                        </option><option value="pt_PT">
+                           Portuguese (Portugal)
+                        </option><option value="ro">
+                           Romanian
+                        </option><option value="ru">
+                           Russian
+                        </option><option value="sk">
+                           Slovakian
+                        </option><option value="es">
+                           Spanish
+                        </option><option value="es_MX">
+                           Spanish (Mexico)
+                        </option><option value="sv">
+                           Swedish
+                        </option><option value="tr">
+                           Turkish
+                        </option><option value="uk">
+                           Ukrainian
+                        </option><option value="vi">
+                           Vietnamese
+                        </option>
+                     </select>
+                  </div>
                </div>
-               <div
-                  v-if="hasFakes"
-                  class="tooltip tooltip-right ml-2"
-                  :data-tooltip="$t('message.fakeDataLanguage')"
-               >
-                  <select v-model="fakerLocale" class="form-select">
-                     <option value="ar">
-                        Arabic
-                     </option><option value="az">
-                        Azerbaijani
-                     </option><option value="zh_CN">
-                        Chinese
-                     </option><option value="zh_TW">
-                        Chinese (Taiwan)
-                     </option><option value="cz">
-                        Czech
-                     </option><option value="nl">
-                        Dutch
-                     </option><option value="nl_BE">
-                        Dutch (Belgium)
-                     </option><option value="en">
-                        English
-                     </option><option value="en_AU_ocker">
-                        English (Australia Ocker)
-                     </option><option value="en_AU">
-                        English (Australia)
-                     </option><option value="en_BORK">
-                        English (Bork)
-                     </option><option value="en_CA">
-                        English (Canada)
-                     </option><option value="en_GB">
-                        English (Great Britain)
-                     </option><option value="en_IND">
-                        English (India)
-                     </option><option value="en_IE">
-                        English (Ireland)
-                     </option><option value="en_ZA">
-                        English (South Africa)
-                     </option><option value="en_US">
-                        English (United States)
-                     </option><option value="fa">
-                        Farsi
-                     </option><option value="fi">
-                        Finnish
-                     </option><option value="fr">
-                        French
-                     </option><option value="fr_CA">
-                        French (Canada)
-                     </option><option value="fr_CH">
-                        French (Switzerland)
-                     </option><option value="ge">
-                        Georgian
-                     </option><option value="de">
-                        German
-                     </option><option value="de_AT">
-                        German (Austria)
-                     </option><option value="de_CH">
-                        German (Switzerland)
-                     </option><option value="hr">
-                        Hrvatski
-                     </option><option value="id_ID">
-                        Indonesia
-                     </option><option value="it">
-                        Italian
-                     </option><option value="ja">
-                        Japanese
-                     </option><option value="ko">
-                        Korean
-                     </option><option value="nep">
-                        Nepalese
-                     </option><option value="nb_NO">
-                        Norwegian
-                     </option><option value="pl">
-                        Polish
-                     </option><option value="pt_BR">
-                        Portuguese (Brazil)
-                     </option><option value="pt_PT">
-                        Portuguese (Portugal)
-                     </option><option value="ro">
-                        Romanian
-                     </option><option value="ru">
-                        Russian
-                     </option><option value="sk">
-                        Slovakian
-                     </option><option value="es">
-                        Spanish
-                     </option><option value="es_MX">
-                        Spanish (Mexico)
-                     </option><option value="sv">
-                        Swedish
-                     </option><option value="tr">
-                        Turkish
-                     </option><option value="uk">
-                        Ukrainian
-                     </option><option value="vi">
-                        Vietnamese
-                     </option>
-                  </select>
+               <div class="column col-auto">
+                  <button
+                     class="btn btn-primary mr-2"
+                     :class="{'loading': isInserting}"
+                     @click.stop="insertRows"
+                  >
+                     {{ $t('word.insert') }}
+                  </button>
+                  <button class="btn btn-link" @click.stop="closeModal">
+                     {{ $t('word.close') }}
+                  </button>
                </div>
             </div>
-            <div class="column col-auto">
-               <button
-                  class="btn btn-primary mr-2"
-                  :class="{'loading': isInserting}"
-                  @click.stop="insertRows"
-               >
-                  {{ $t('word.insert') }}
-               </button>
-               <button class="btn btn-link" @click.stop="closeModal">
-                  {{ $t('word.close') }}
-               </button>
-            </div>
          </div>
       </div>
-   </div>
+   </Teleport>
 </template>
 
 <script>
diff --git a/src/renderer/components/ModalHistory.vue b/src/renderer/components/ModalHistory.vue
index 28dc987b..e148e033 100644
--- a/src/renderer/components/ModalHistory.vue
+++ b/src/renderer/components/ModalHistory.vue
@@ -1,98 +1,100 @@
 <template>
-   <div class="modal active">
-      <a class="modal-overlay" @click.stop="closeModal" />
-      <div class="modal-container p-0 pb-4">
-         <div class="modal-header pl-2">
-            <div class="modal-title h6">
-               <div class="d-flex">
-                  <i class="mdi mdi-24px mdi-history mr-1" />
-                  <span class="cut-text">{{ $t('word.history') }}: {{ connectionName }}</span>
+   <Teleport to="#window-content">
+      <div class="modal active">
+         <a class="modal-overlay" @click.stop="closeModal" />
+         <div class="modal-container p-0 pb-4">
+            <div class="modal-header pl-2">
+               <div class="modal-title h6">
+                  <div class="d-flex">
+                     <i class="mdi mdi-24px mdi-history mr-1" />
+                     <span class="cut-text">{{ $t('word.history') }}: {{ connectionName }}</span>
+                  </div>
                </div>
+               <a class="btn btn-clear c-hand" @click.stop="closeModal" />
             </div>
-            <a class="btn btn-clear c-hand" @click.stop="closeModal" />
-         </div>
-         <div class="modal-body p-0 workspace-query-results">
-            <div
-               v-if="history.length"
-               ref="searchForm"
-               class="form-group has-icon-right p-2 m-0"
-            >
-               <input
-                  v-model="searchTerm"
-                  class="form-input"
-                  type="text"
-                  :placeholder="$t('message.searchForQueries')"
+            <div class="modal-body p-0 workspace-query-results">
+               <div
+                  v-if="history.length"
+                  ref="searchForm"
+                  class="form-group has-icon-right p-2 m-0"
                >
-               <i v-if="!searchTerm" class="form-icon mdi mdi-magnify mdi-18px pr-4" />
-               <i
-                  v-else
-                  class="form-icon c-hand mdi mdi-backspace mdi-18px pr-4"
-                  @click="searchTerm = ''"
-               />
-            </div>
-            <div
-               v-if="history.length"
-               ref="tableWrapper"
-               class="vscroll px-1 "
-               :style="{'height': resultsSize+'px'}"
-            >
-               <div ref="table">
-                  <BaseVirtualScroll
-                     ref="resultTable"
-                     :items="filteredHistory"
-                     :item-height="66"
-                     :visible-height="resultsSize"
-                     :scroll-element="scrollElement"
+                  <input
+                     v-model="searchTerm"
+                     class="form-input"
+                     type="text"
+                     :placeholder="$t('message.searchForQueries')"
                   >
-                     <template #default="{ items }">
-                        <div
-                           v-for="query in items"
-                           :key="query.uid"
-                           class="tile my-2"
-                           tabindex="0"
-                        >
-                           <div class="tile-icon">
-                              <i class="mdi mdi-code-tags pr-1" />
-                           </div>
-                           <div class="tile-content">
-                              <div class="tile-title">
-                                 <code
-                                    class="cut-text"
-                                    :title="query.sql"
-                                    v-html="highlightWord(query.sql)"
-                                 />
+                  <i v-if="!searchTerm" class="form-icon mdi mdi-magnify mdi-18px pr-4" />
+                  <i
+                     v-else
+                     class="form-icon c-hand mdi mdi-backspace mdi-18px pr-4"
+                     @click="searchTerm = ''"
+                  />
+               </div>
+               <div
+                  v-if="history.length"
+                  ref="tableWrapper"
+                  class="vscroll px-1 "
+                  :style="{'height': resultsSize+'px'}"
+               >
+                  <div ref="table">
+                     <BaseVirtualScroll
+                        ref="resultTable"
+                        :items="filteredHistory"
+                        :item-height="66"
+                        :visible-height="resultsSize"
+                        :scroll-element="scrollElement"
+                     >
+                        <template #default="{ items }">
+                           <div
+                              v-for="query in items"
+                              :key="query.uid"
+                              class="tile my-2"
+                              tabindex="0"
+                           >
+                              <div class="tile-icon">
+                                 <i class="mdi mdi-code-tags pr-1" />
                               </div>
-                              <div class="tile-bottom-content">
-                                 <small class="tile-subtitle">{{ query.schema }} · {{ formatDate(query.date) }}</small>
-                                 <div class="tile-history-buttons">
-                                    <button class="btn btn-link pl-1" @click.stop="$emit('select-query', query.sql)">
-                                       <i class="mdi mdi-open-in-app pr-1" /> {{ $t('word.select') }}
-                                    </button>
-                                    <button class="btn btn-link pl-1" @click="copyQuery(query.sql)">
-                                       <i class="mdi mdi-content-copy pr-1" /> {{ $t('word.copy') }}
-                                    </button>
-                                    <button class="btn btn-link pl-1" @click="deleteQuery(query)">
-                                       <i class="mdi mdi-delete-forever pr-1" /> {{ $t('word.delete') }}
-                                    </button>
+                              <div class="tile-content">
+                                 <div class="tile-title">
+                                    <code
+                                       class="cut-text"
+                                       :title="query.sql"
+                                       v-html="highlightWord(query.sql)"
+                                    />
+                                 </div>
+                                 <div class="tile-bottom-content">
+                                    <small class="tile-subtitle">{{ query.schema }} · {{ formatDate(query.date) }}</small>
+                                    <div class="tile-history-buttons">
+                                       <button class="btn btn-link pl-1" @click.stop="$emit('select-query', query.sql)">
+                                          <i class="mdi mdi-open-in-app pr-1" /> {{ $t('word.select') }}
+                                       </button>
+                                       <button class="btn btn-link pl-1" @click="copyQuery(query.sql)">
+                                          <i class="mdi mdi-content-copy pr-1" /> {{ $t('word.copy') }}
+                                       </button>
+                                       <button class="btn btn-link pl-1" @click="deleteQuery(query)">
+                                          <i class="mdi mdi-delete-forever pr-1" /> {{ $t('word.delete') }}
+                                       </button>
+                                    </div>
                                  </div>
                               </div>
                            </div>
-                        </div>
-                     </template>
-                  </BaseVirtualScroll>
+                        </template>
+                     </BaseVirtualScroll>
+                  </div>
                </div>
-            </div>
-            <div v-else class="empty">
-               <div class="empty-icon">
-                  <i class="mdi mdi-history mdi-48px" />
+               <div v-else class="empty">
+                  <div class="empty-icon">
+                     <i class="mdi mdi-history mdi-48px" />
+                  </div>
+                  <p class="empty-title h5">
+                     {{ $t('message.thereIsNoQueriesYet') }}
+                  </p>
                </div>
-               <p class="empty-title h5">
-                  {{ $t('message.thereIsNoQueriesYet') }}
-               </p>
             </div>
          </div>
       </div>
-   </div>
+   </Teleport>
 </template>
 
 <script>
diff --git a/src/renderer/components/ModalImportSchema.vue b/src/renderer/components/ModalImportSchema.vue
index 215568da..8e6dca20 100644
--- a/src/renderer/components/ModalImportSchema.vue
+++ b/src/renderer/components/ModalImportSchema.vue
@@ -1,49 +1,52 @@
 <template>
-   <div class="modal active">
-      <a class="modal-overlay" @click.stop="closeModal" />
-      <div class="modal-container p-0">
-         <div class="modal-header pl-2">
-            <div class="modal-title h6">
-               <div class="d-flex">
-                  <i class="mdi mdi-24px mdi-database-arrow-up mr-1" />
-                  <span class="cut-text">{{ $t('message.importSchema') }}</span>
+   <Teleport to="#window-content">
+      <div class="modal active">
+         <a class="modal-overlay" @click.stop="closeModal" />
+         <div class="modal-container p-0">
+            <div class="modal-header pl-2">
+               <div class="modal-title h6">
+                  <div class="d-flex">
+                     <i class="mdi mdi-24px mdi-database-arrow-up mr-1" />
+                     <span class="cut-text">{{ $t('message.importSchema') }}</span>
+                  </div>
                </div>
+               <a class="btn btn-clear c-hand" @click.stop="closeModal" />
             </div>
-            <a class="btn btn-clear c-hand" @click.stop="closeModal" />
-         </div>
-         <div class="modal-body pb-0">
-            {{ sqlFile }}
-            <div v-if="queryErrors.length > 0" class="mt-2">
-               <label>{{ $tc('message.importQueryErrors', queryErrors.length) }}</label>
-               <textarea
-                  v-model="formattedQueryErrors"
-                  class="form-input"
-                  rows="5"
-                  readonly
-               />
-            </div>
-         </div>
-         <div class="modal-footer columns">
-            <div class="column col modal-progress-wrapper text-left">
-               <div class="import-progress">
-                  <span class="progress-status">
-                     {{ progressPercentage }}% - {{ progressStatus }} - {{ $tc('message.executedQueries', queryCount) }}
-                  </span>
-                  <progress
-                     class="progress d-block"
-                     :value="progressPercentage"
-                     max="100"
+            <div class="modal-body pb-0">
+               {{ sqlFile }}
+               <div v-if="queryErrors.length > 0" class="mt-2">
+                  <label>{{ $tc('message.importQueryErrors', queryErrors.length) }}</label>
+                  <textarea
+                     v-model="formattedQueryErrors"
+                     class="form-input"
+                     rows="5"
+                     readonly
                   />
                </div>
             </div>
-            <div class="column col-auto px-0">
-               <button class="btn btn-link" @click.stop="closeModal">
-                  {{ completed ? $t('word.close') : $t('word.cancel') }}
-               </button>
+            <div class="modal-footer columns">
+               <div class="column col modal-progress-wrapper text-left">
+                  <div class="import-progress">
+                     <span class="progress-status">
+                        {{ progressPercentage }}% - {{ progressStatus }} - {{ $tc('message.executedQueries', queryCount) }}
+                     </span>
+                     <progress
+                        class="progress d-block"
+                        :value="progressPercentage"
+                        max="100"
+                     />
+                  </div>
+               </div>
+               <div class="column col-auto px-0">
+                  <button class="btn btn-link" @click.stop="closeModal">
+                     {{ completed ? $t('word.close') : $t('word.cancel') }}
+                  </button>
+               </div>
             </div>
          </div>
       </div>
-   </div>
+      <Teleport to="#window-content" />
+   </teleport>
 </template>
 
 <script>
diff --git a/src/renderer/components/ModalNewSchema.vue b/src/renderer/components/ModalNewSchema.vue
index 9e9043a6..4f2a0606 100644
--- a/src/renderer/components/ModalNewSchema.vue
+++ b/src/renderer/components/ModalNewSchema.vue
@@ -1,68 +1,70 @@
 <template>
-   <div class="modal active">
-      <a class="modal-overlay" @click.stop="closeModal" />
-      <div class="modal-container p-0">
-         <div class="modal-header pl-2">
-            <div class="modal-title h6">
-               <div class="d-flex">
-                  <i class="mdi mdi-24px mdi-database-plus mr-1" />
-                  <span class="cut-text">{{ $t('message.createNewSchema') }}</span>
+   <Teleport to="#window-content">
+      <div class="modal active">
+         <a class="modal-overlay" @click.stop="closeModal" />
+         <div class="modal-container p-0">
+            <div class="modal-header pl-2">
+               <div class="modal-title h6">
+                  <div class="d-flex">
+                     <i class="mdi mdi-24px mdi-database-plus mr-1" />
+                     <span class="cut-text">{{ $t('message.createNewSchema') }}</span>
+                  </div>
+               </div>
+               <a class="btn btn-clear c-hand" @click.stop="closeModal" />
+            </div>
+            <div class="modal-body pb-0">
+               <div class="content">
+                  <form class="form-horizontal" @submit.prevent="createSchema">
+                     <div class="form-group">
+                        <div class="col-3">
+                           <label class="form-label">{{ $t('word.name') }}</label>
+                        </div>
+                        <div class="col-9">
+                           <input
+                              ref="firstInput"
+                              v-model="database.name"
+                              class="form-input"
+                              type="text"
+                              required
+                              :placeholder="$t('message.schemaName')"
+                           >
+                        </div>
+                     </div>
+                     <div v-if="customizations.collations" class="form-group">
+                        <div class="col-3">
+                           <label class="form-label">{{ $t('word.collation') }}</label>
+                        </div>
+                        <div class="col-9">
+                           <select v-model="database.collation" class="form-select">
+                              <option
+                                 v-for="collation in collations"
+                                 :key="collation.id"
+                                 :value="collation.collation"
+                              >
+                                 {{ collation.collation }}
+                              </option>
+                           </select>
+                           <small>{{ $t('message.serverDefault') }}: {{ defaultCollation }}</small>
+                        </div>
+                     </div>
+                  </form>
                </div>
             </div>
-            <a class="btn btn-clear c-hand" @click.stop="closeModal" />
-         </div>
-         <div class="modal-body pb-0">
-            <div class="content">
-               <form class="form-horizontal" @submit.prevent="createSchema">
-                  <div class="form-group">
-                     <div class="col-3">
-                        <label class="form-label">{{ $t('word.name') }}</label>
-                     </div>
-                     <div class="col-9">
-                        <input
-                           ref="firstInput"
-                           v-model="database.name"
-                           class="form-input"
-                           type="text"
-                           required
-                           :placeholder="$t('message.schemaName')"
-                        >
-                     </div>
-                  </div>
-                  <div v-if="customizations.collations" class="form-group">
-                     <div class="col-3">
-                        <label class="form-label">{{ $t('word.collation') }}</label>
-                     </div>
-                     <div class="col-9">
-                        <select v-model="database.collation" class="form-select">
-                           <option
-                              v-for="collation in collations"
-                              :key="collation.id"
-                              :value="collation.collation"
-                           >
-                              {{ collation.collation }}
-                           </option>
-                        </select>
-                        <small>{{ $t('message.serverDefault') }}: {{ defaultCollation }}</small>
-                     </div>
-                  </div>
-               </form>
+            <div class="modal-footer">
+               <button
+                  class="btn btn-primary mr-2"
+                  :class="{'loading': isLoading}"
+                  @click.stop="createSchema"
+               >
+                  {{ $t('word.add') }}
+               </button>
+               <button class="btn btn-link" @click.stop="closeModal">
+                  {{ $t('word.close') }}
+               </button>
             </div>
          </div>
-         <div class="modal-footer">
-            <button
-               class="btn btn-primary mr-2"
-               :class="{'loading': isLoading}"
-               @click.stop="createSchema"
-            >
-               {{ $t('word.add') }}
-            </button>
-            <button class="btn btn-link" @click.stop="closeModal">
-               {{ $t('word.close') }}
-            </button>
-         </div>
       </div>
-   </div>
+   </Teleport>
 </template>
 
 <script>
diff --git a/src/renderer/components/ModalNewTableRow.vue b/src/renderer/components/ModalNewTableRow.vue
index 53f20435..978111ef 100644
--- a/src/renderer/components/ModalNewTableRow.vue
+++ b/src/renderer/components/ModalNewTableRow.vue
@@ -1,119 +1,121 @@
 <template>
-   <div class="modal active">
-      <a class="modal-overlay" @click.stop="closeModal" />
-      <div class="modal-container p-0">
-         <div class="modal-header pl-2">
-            <div class="modal-title h6">
-               <div class="d-flex">
-                  <i class="mdi mdi-24px mdi-playlist-plus mr-1" />
-                  <span class="cut-text">{{ $t('message.addNewRow') }}</span>
+   <Teleport to="#window-content">
+      <div class="modal active">
+         <a class="modal-overlay" @click.stop="closeModal" />
+         <div class="modal-container p-0">
+            <div class="modal-header pl-2">
+               <div class="modal-title h6">
+                  <div class="d-flex">
+                     <i class="mdi mdi-24px mdi-playlist-plus mr-1" />
+                     <span class="cut-text">{{ $t('message.addNewRow') }}</span>
+                  </div>
+               </div>
+               <a class="btn btn-clear c-hand" @click.stop="closeModal" />
+            </div>
+            <div class="modal-body pb-0">
+               <div class="content">
+                  <form class="form-horizontal">
+                     <fieldset :disabled="isInserting">
+                        <div
+                           v-for="(field, key) in fields"
+                           :key="field.name"
+                           class="form-group"
+                        >
+                           <div class="col-4 col-sm-12">
+                              <label class="form-label" :title="field.name">{{ field.name }}</label>
+                           </div>
+                           <div class="input-group col-8 col-sm-12">
+                              <ForeignKeySelect
+                                 v-if="foreignKeys.includes(field.name)"
+                                 ref="formInput"
+                                 v-model="localRow[field.name]"
+                                 class="form-select"
+                                 :key-usage="getKeyUsage(field.name)"
+                                 :disabled="fieldsToExclude.includes(field.name)"
+                              />
+                              <input
+                                 v-else-if="inputProps(field).mask"
+                                 ref="formInput"
+                                 v-model="localRow[field.name]"
+                                 v-mask="inputProps(field).mask"
+                                 class="form-input"
+                                 :type="inputProps(field).type"
+                                 :disabled="fieldsToExclude.includes(field.name)"
+                                 :tabindex="key+1"
+                              >
+                              <input
+                                 v-else-if="inputProps(field).type === 'file'"
+                                 ref="formInput"
+                                 class="form-input"
+                                 type="file"
+                                 :disabled="fieldsToExclude.includes(field.name)"
+                                 :tabindex="key+1"
+                                 @change="filesChange($event,field.name)"
+                              >
+                              <input
+                                 v-else-if="inputProps(field).type === 'number'"
+                                 ref="formInput"
+                                 v-model="localRow[field.name]"
+                                 class="form-input"
+                                 step="any"
+                                 :type="inputProps(field).type"
+                                 :disabled="fieldsToExclude.includes(field.name)"
+                                 :tabindex="key+1"
+                              >
+                              <input
+                                 v-else
+                                 ref="formInput"
+                                 v-model="localRow[field.name]"
+                                 class="form-input"
+                                 :type="inputProps(field).type"
+                                 :disabled="fieldsToExclude.includes(field.name)"
+                                 :tabindex="key+1"
+                              >
+                              <span class="input-group-addon" :class="typeCLass(field.type)">
+                                 {{ field.type }} {{ wrapNumber(fieldLength(field)) }}
+                              </span>
+                              <label class="form-checkbox ml-3" :title="$t('word.insert')">
+                                 <input
+                                    type="checkbox"
+                                    :checked="!field.autoIncrement"
+                                    @change.prevent="toggleFields($event, field)"
+                                 ><i class="form-icon" />
+                              </label>
+                           </div>
+                        </div>
+                     </fieldset>
+                  </form>
                </div>
             </div>
-            <a class="btn btn-clear c-hand" @click.stop="closeModal" />
-         </div>
-         <div class="modal-body pb-0">
-            <div class="content">
-               <form class="form-horizontal">
-                  <fieldset :disabled="isInserting">
-                     <div
-                        v-for="(field, key) in fields"
-                        :key="field.name"
-                        class="form-group"
-                     >
-                        <div class="col-4 col-sm-12">
-                           <label class="form-label" :title="field.name">{{ field.name }}</label>
-                        </div>
-                        <div class="input-group col-8 col-sm-12">
-                           <ForeignKeySelect
-                              v-if="foreignKeys.includes(field.name)"
-                              ref="formInput"
-                              v-model="localRow[field.name]"
-                              class="form-select"
-                              :key-usage="getKeyUsage(field.name)"
-                              :disabled="fieldsToExclude.includes(field.name)"
-                           />
-                           <input
-                              v-else-if="inputProps(field).mask"
-                              ref="formInput"
-                              v-model="localRow[field.name]"
-                              v-mask="inputProps(field).mask"
-                              class="form-input"
-                              :type="inputProps(field).type"
-                              :disabled="fieldsToExclude.includes(field.name)"
-                              :tabindex="key+1"
-                           >
-                           <input
-                              v-else-if="inputProps(field).type === 'file'"
-                              ref="formInput"
-                              class="form-input"
-                              type="file"
-                              :disabled="fieldsToExclude.includes(field.name)"
-                              :tabindex="key+1"
-                              @change="filesChange($event,field.name)"
-                           >
-                           <input
-                              v-else-if="inputProps(field).type === 'number'"
-                              ref="formInput"
-                              v-model="localRow[field.name]"
-                              class="form-input"
-                              step="any"
-                              :type="inputProps(field).type"
-                              :disabled="fieldsToExclude.includes(field.name)"
-                              :tabindex="key+1"
-                           >
-                           <input
-                              v-else
-                              ref="formInput"
-                              v-model="localRow[field.name]"
-                              class="form-input"
-                              :type="inputProps(field).type"
-                              :disabled="fieldsToExclude.includes(field.name)"
-                              :tabindex="key+1"
-                           >
-                           <span class="input-group-addon" :class="typeCLass(field.type)">
-                              {{ field.type }} {{ wrapNumber(fieldLength(field)) }}
-                           </span>
-                           <label class="form-checkbox ml-3" :title="$t('word.insert')">
-                              <input
-                                 type="checkbox"
-                                 :checked="!field.autoIncrement"
-                                 @change.prevent="toggleFields($event, field)"
-                              ><i class="form-icon" />
-                           </label>
-                        </div>
-                     </div>
-                  </fieldset>
-               </form>
-            </div>
-         </div>
-         <div class="modal-footer">
-            <div class="input-group col-3 tooltip tooltip-right" :data-tooltip="$t('message.numberOfInserts')">
-               <input
-                  v-model="nInserts"
-                  type="number"
-                  class="form-input"
-                  min="1"
-                  :disabled="isInserting"
-               >
-               <span class="input-group-addon">
-                  <i class="mdi mdi-24px mdi-repeat" />
-               </span>
-            </div>
-            <div>
-               <button
-                  class="btn btn-primary mr-2"
-                  :class="{'loading': isInserting}"
-                  @click.stop="insertRows"
-               >
-                  {{ $t('word.insert') }}
-               </button>
-               <button class="btn btn-link" @click.stop="closeModal">
-                  {{ $t('word.close') }}
-               </button>
+            <div class="modal-footer">
+               <div class="input-group col-3 tooltip tooltip-right" :data-tooltip="$t('message.numberOfInserts')">
+                  <input
+                     v-model="nInserts"
+                     type="number"
+                     class="form-input"
+                     min="1"
+                     :disabled="isInserting"
+                  >
+                  <span class="input-group-addon">
+                     <i class="mdi mdi-24px mdi-repeat" />
+                  </span>
+               </div>
+               <div>
+                  <button
+                     class="btn btn-primary mr-2"
+                     :class="{'loading': isInserting}"
+                     @click.stop="insertRows"
+                  >
+                     {{ $t('word.insert') }}
+                  </button>
+                  <button class="btn btn-link" @click.stop="closeModal">
+                     {{ $t('word.close') }}
+                  </button>
+               </div>
             </div>
          </div>
       </div>
-   </div>
+   </Teleport>
 </template>
 
 <script>
diff --git a/src/renderer/components/ModalProcessesList.vue b/src/renderer/components/ModalProcessesList.vue
index f0c4dc46..a171ca88 100644
--- a/src/renderer/components/ModalProcessesList.vue
+++ b/src/renderer/components/ModalProcessesList.vue
@@ -1,134 +1,136 @@
 <template>
-   <div class="modal active">
-      <ModalProcessesListContext
-         v-if="isContext"
-         :context-event="contextEvent"
-         :selected-row="selectedRow"
-         :selected-cell="selectedCell"
-         @copy-cell="copyCell"
-         @copy-row="copyRow"
-         @kill-process="killProcess"
-         @close-context="closeContext"
-      />
-      <a class="modal-overlay" @click.stop="closeModal" />
-      <div class="modal-container p-0 pb-4">
-         <div class="modal-header pl-2">
-            <div class="modal-title h6">
-               <div class="d-flex">
-                  <i class="mdi mdi-24px mdi-memory mr-1" />
-                  <span class="cut-text">{{ $t('message.processesList') }}: {{ connectionName }}</span>
-               </div>
-            </div>
-            <a class="btn btn-clear c-hand" @click.stop="closeModal" />
-         </div>
-         <div class="processes-toolbar py-2 px-4">
-            <div class="workspace-query-buttons">
-               <div class="dropdown pr-1">
-                  <div class="btn-group">
-                     <button
-                        class="btn btn-dark btn-sm mr-0 pr-1 d-flex"
-                        :class="{'loading':isQuering}"
-                        :title="`${$t('word.refresh')} (F5)`"
-                        @click="getProcessesList"
-                     >
-                        <i v-if="!+autorefreshTimer" class="mdi mdi-24px mdi-refresh mr-1" />
-                        <i v-else class="mdi mdi-24px mdi-history mdi-flip-h mr-1" />
-                     </button>
-                     <div class="btn btn-dark btn-sm dropdown-toggle pl-0 pr-0" tabindex="0">
-                        <i class="mdi mdi-24px mdi-menu-down" />
-                     </div>
-                     <div class="menu px-3">
-                        <span>{{ $t('word.autoRefresh') }}: <b>{{ +autorefreshTimer ? `${autorefreshTimer}s` : 'OFF' }}</b></span>
-                        <input
-                           v-model="autorefreshTimer"
-                           class="slider no-border"
-                           type="range"
-                           min="0"
-                           max="15"
-                           step="0.5"
-                           @change="setRefreshInterval"
-                        >
-                     </div>
+   <Teleport to="#window-content">
+      <div class="modal active">
+         <ModalProcessesListContext
+            v-if="isContext"
+            :context-event="contextEvent"
+            :selected-row="selectedRow"
+            :selected-cell="selectedCell"
+            @copy-cell="copyCell"
+            @copy-row="copyRow"
+            @kill-process="killProcess"
+            @close-context="closeContext"
+         />
+         <a class="modal-overlay" @click.stop="closeModal" />
+         <div class="modal-container p-0 pb-4">
+            <div class="modal-header pl-2">
+               <div class="modal-title h6">
+                  <div class="d-flex">
+                     <i class="mdi mdi-24px mdi-memory mr-1" />
+                     <span class="cut-text">{{ $t('message.processesList') }}: {{ connectionName }}</span>
                   </div>
                </div>
-               <div class="dropdown table-dropdown">
-                  <button
-                     :disabled="isQuering"
-                     class="btn btn-dark btn-sm dropdown-toggle d-flex mr-0 pr-0"
-                     tabindex="0"
-                  >
-                     <i class="mdi mdi-24px mdi-file-export mr-1" />
-                     <span>{{ $t('word.export') }}</span>
-                     <i class="mdi mdi-24px mdi-menu-down" />
-                  </button>
-                  <ul class="menu text-left">
-                     <li class="menu-item">
-                        <a class="c-hand" @click="downloadTable('json')">JSON</a>
-                     </li>
-                     <li class="menu-item">
-                        <a class="c-hand" @click="downloadTable('csv')">CSV</a>
-                     </li>
-                  </ul>
-               </div>
+               <a class="btn btn-clear c-hand" @click.stop="closeModal" />
             </div>
-            <div class="workspace-query-info">
-               <div v-if="sortedResults.length">
-                  {{ $t('word.processes') }}: <b>{{ sortedResults.length.toLocaleString() }}</b>
-               </div>
-            </div>
-         </div>
-         <div class="modal-body py-0 workspace-query-results">
-            <div
-               ref="tableWrapper"
-               class="vscroll"
-               :style="{'height': resultsSize+'px'}"
-            >
-               <div ref="table" class="table table-hover">
-                  <div class="thead">
-                     <div class="tr">
-                        <div
-                           v-for="(field, index) in fields"
-                           :key="index"
-                           class="th c-hand"
+            <div class="processes-toolbar py-2 px-4">
+               <div class="workspace-query-buttons">
+                  <div class="dropdown pr-1">
+                     <div class="btn-group">
+                        <button
+                           class="btn btn-dark btn-sm mr-0 pr-1 d-flex"
+                           :class="{'loading':isQuering}"
+                           :title="`${$t('word.refresh')} (F5)`"
+                           @click="getProcessesList"
                         >
-                           <div ref="columnResize" class="column-resizable">
-                              <div class="table-column-title" @click="sort(field)">
-                                 <span>{{ field.toUpperCase() }}</span>
-                                 <i
-                                    v-if="currentSort === field"
-                                    class="mdi sort-icon"
-                                    :class="currentSortDir === 'asc' ? 'mdi-sort-ascending':'mdi-sort-descending'"
-                                 />
+                           <i v-if="!+autorefreshTimer" class="mdi mdi-24px mdi-refresh mr-1" />
+                           <i v-else class="mdi mdi-24px mdi-history mdi-flip-h mr-1" />
+                        </button>
+                        <div class="btn btn-dark btn-sm dropdown-toggle pl-0 pr-0" tabindex="0">
+                           <i class="mdi mdi-24px mdi-menu-down" />
+                        </div>
+                        <div class="menu px-3">
+                           <span>{{ $t('word.autoRefresh') }}: <b>{{ +autorefreshTimer ? `${autorefreshTimer}s` : 'OFF' }}</b></span>
+                           <input
+                              v-model="autorefreshTimer"
+                              class="slider no-border"
+                              type="range"
+                              min="0"
+                              max="15"
+                              step="0.5"
+                              @change="setRefreshInterval"
+                           >
+                        </div>
+                     </div>
+                  </div>
+                  <div class="dropdown table-dropdown">
+                     <button
+                        :disabled="isQuering"
+                        class="btn btn-dark btn-sm dropdown-toggle d-flex mr-0 pr-0"
+                        tabindex="0"
+                     >
+                        <i class="mdi mdi-24px mdi-file-export mr-1" />
+                        <span>{{ $t('word.export') }}</span>
+                        <i class="mdi mdi-24px mdi-menu-down" />
+                     </button>
+                     <ul class="menu text-left">
+                        <li class="menu-item">
+                           <a class="c-hand" @click="downloadTable('json')">JSON</a>
+                        </li>
+                        <li class="menu-item">
+                           <a class="c-hand" @click="downloadTable('csv')">CSV</a>
+                        </li>
+                     </ul>
+                  </div>
+               </div>
+               <div class="workspace-query-info">
+                  <div v-if="sortedResults.length">
+                     {{ $t('word.processes') }}: <b>{{ sortedResults.length.toLocaleString() }}</b>
+                  </div>
+               </div>
+            </div>
+            <div class="modal-body py-0 workspace-query-results">
+               <div
+                  ref="tableWrapper"
+                  class="vscroll"
+                  :style="{'height': resultsSize+'px'}"
+               >
+                  <div ref="table" class="table table-hover">
+                     <div class="thead">
+                        <div class="tr">
+                           <div
+                              v-for="(field, index) in fields"
+                              :key="index"
+                              class="th c-hand"
+                           >
+                              <div ref="columnResize" class="column-resizable">
+                                 <div class="table-column-title" @click="sort(field)">
+                                    <span>{{ field.toUpperCase() }}</span>
+                                    <i
+                                       v-if="currentSort === field"
+                                       class="mdi sort-icon"
+                                       :class="currentSortDir === 'asc' ? 'mdi-sort-ascending':'mdi-sort-descending'"
+                                    />
+                                 </div>
                               </div>
                            </div>
                         </div>
                      </div>
+                     <BaseVirtualScroll
+                        ref="resultTable"
+                        :items="sortedResults"
+                        :item-height="22"
+                        class="tbody"
+                        :visible-height="resultsSize"
+                        :scroll-element="scrollElement"
+                     >
+                        <template #default="{ items }">
+                           <ModalProcessesListRow
+                              v-for="row in items"
+                              :key="row.id"
+                              class="process-row"
+                              :row="row"
+                              @select-row="selectRow(row.id)"
+                              @contextmenu="contextMenu"
+                              @stop-refresh="stopRefresh"
+                           />
+                        </template>
+                     </BaseVirtualScroll>
                   </div>
-                  <BaseVirtualScroll
-                     ref="resultTable"
-                     :items="sortedResults"
-                     :item-height="22"
-                     class="tbody"
-                     :visible-height="resultsSize"
-                     :scroll-element="scrollElement"
-                  >
-                     <template #default="{ items }">
-                        <ModalProcessesListRow
-                           v-for="row in items"
-                           :key="row.id"
-                           class="process-row"
-                           :row="row"
-                           @select-row="selectRow(row.id)"
-                           @contextmenu="contextMenu"
-                           @stop-refresh="stopRefresh"
-                        />
-                     </template>
-                  </BaseVirtualScroll>
                </div>
             </div>
          </div>
       </div>
-   </div>
+   </Teleport>
 </template>
 
 <script>
diff --git a/src/renderer/components/ModalSettings.vue b/src/renderer/components/ModalSettings.vue
index 13df38ca..a0a76c9f 100644
--- a/src/renderer/components/ModalSettings.vue
+++ b/src/renderer/components/ModalSettings.vue
@@ -1,318 +1,320 @@
 <template>
-   <div id="settings" class="modal active">
-      <a class="modal-overlay c-hand" @click="closeModal" />
-      <div class="modal-container">
-         <div class="modal-header pl-2">
-            <div class="modal-title h6">
-               <div class="d-flex">
-                  <i class="mdi mdi-24px mdi-cog mr-1" />
-                  <span class="cut-text">{{ $t('word.settings') }}</span>
+   <Teleport to="#window-content">
+      <div id="settings" class="modal active">
+         <a class="modal-overlay c-hand" @click="closeModal" />
+         <div class="modal-container">
+            <div class="modal-header pl-2">
+               <div class="modal-title h6">
+                  <div class="d-flex">
+                     <i class="mdi mdi-24px mdi-cog mr-1" />
+                     <span class="cut-text">{{ $t('word.settings') }}</span>
+                  </div>
                </div>
+               <a class="btn btn-clear c-hand" @click="closeModal" />
             </div>
-            <a class="btn btn-clear c-hand" @click="closeModal" />
-         </div>
-         <div class="modal-body p-0">
-            <div class="panel">
-               <div class="panel-nav">
-                  <ul class="tab tab-block">
-                     <li
-                        class="tab-item c-hand"
-                        :class="{'active': selectedTab === 'general'}"
-                        @click="selectTab('general')"
-                     >
-                        <a class="tab-link">{{ $t('word.general') }}</a>
-                     </li>
-                     <li
-                        class="tab-item c-hand"
-                        :class="{'active': selectedTab === 'themes'}"
-                        @click="selectTab('themes')"
-                     >
-                        <a class="tab-link">{{ $t('word.themes') }}</a>
-                     </li>
-                     <li
-                        v-if="updateStatus !== 'disabled'"
-                        class="tab-item c-hand"
-                        :class="{'active': selectedTab === 'update'}"
-                        @click="selectTab('update')"
-                     >
-                        <a class="tab-link" :class="{'badge badge-update': hasUpdates}">{{ $t('word.update') }}</a>
-                     </li>
-                     <li
-                        class="tab-item c-hand"
-                        :class="{'active': selectedTab === 'changelog'}"
-                        @click="selectTab('changelog')"
-                     >
-                        <a class="tab-link">{{ $t('word.changelog') }}</a>
-                     </li>
-                     <li
-                        class="tab-item c-hand"
-                        :class="{'active': selectedTab === 'about'}"
-                        @click="selectTab('about')"
-                     >
-                        <a class="tab-link">{{ $t('word.about') }}</a>
-                     </li>
-                  </ul>
-               </div>
-               <div v-show="selectedTab === 'general'" class="panel-body py-4">
-                  <div class="container">
-                     <form class="form-horizontal columns">
-                        <div class="column col-12 h6 text-uppercase mb-1">
-                           {{ $t('word.application') }}
-                        </div>
-                        <div class="column col-9 col-sm-12 mb-2">
-                           <div class="form-group">
-                              <div class="col-7 col-sm-12">
-                                 <label class="form-label">
-                                    <i class="mdi mdi-18px mdi-translate mr-1" />
-                                    {{ $t('word.language') }}
-                                 </label>
-                              </div>
-                              <div class="col-5 col-sm-12">
-                                 <select
-                                    v-model="localLocale"
-                                    class="form-select"
-                                    @change="changeLocale(localLocale)"
-                                 >
-                                    <option
-                                       v-for="(locale, key) in locales"
-                                       :key="key"
-                                       :value="locale.code"
+            <div class="modal-body p-0">
+               <div class="panel">
+                  <div class="panel-nav">
+                     <ul class="tab tab-block">
+                        <li
+                           class="tab-item c-hand"
+                           :class="{'active': selectedTab === 'general'}"
+                           @click="selectTab('general')"
+                        >
+                           <a class="tab-link">{{ $t('word.general') }}</a>
+                        </li>
+                        <li
+                           class="tab-item c-hand"
+                           :class="{'active': selectedTab === 'themes'}"
+                           @click="selectTab('themes')"
+                        >
+                           <a class="tab-link">{{ $t('word.themes') }}</a>
+                        </li>
+                        <li
+                           v-if="updateStatus !== 'disabled'"
+                           class="tab-item c-hand"
+                           :class="{'active': selectedTab === 'update'}"
+                           @click="selectTab('update')"
+                        >
+                           <a class="tab-link" :class="{'badge badge-update': hasUpdates}">{{ $t('word.update') }}</a>
+                        </li>
+                        <li
+                           class="tab-item c-hand"
+                           :class="{'active': selectedTab === 'changelog'}"
+                           @click="selectTab('changelog')"
+                        >
+                           <a class="tab-link">{{ $t('word.changelog') }}</a>
+                        </li>
+                        <li
+                           class="tab-item c-hand"
+                           :class="{'active': selectedTab === 'about'}"
+                           @click="selectTab('about')"
+                        >
+                           <a class="tab-link">{{ $t('word.about') }}</a>
+                        </li>
+                     </ul>
+                  </div>
+                  <div v-show="selectedTab === 'general'" class="panel-body py-4">
+                     <div class="container">
+                        <form class="form-horizontal columns">
+                           <div class="column col-12 h6 text-uppercase mb-1">
+                              {{ $t('word.application') }}
+                           </div>
+                           <div class="column col-9 col-sm-12 mb-2">
+                              <div class="form-group">
+                                 <div class="col-7 col-sm-12">
+                                    <label class="form-label">
+                                       <i class="mdi mdi-18px mdi-translate mr-1" />
+                                       {{ $t('word.language') }}
+                                    </label>
+                                 </div>
+                                 <div class="col-5 col-sm-12">
+                                    <select
+                                       v-model="localLocale"
+                                       class="form-select"
+                                       @change="changeLocale(localLocale)"
                                     >
-                                       {{ locale.name }}
-                                    </option>
-                                 </select>
+                                       <option
+                                          v-for="(locale, key) in locales"
+                                          :key="key"
+                                          :value="locale.code"
+                                       >
+                                          {{ locale.name }}
+                                       </option>
+                                    </select>
+                                 </div>
                               </div>
-                           </div>
-                           <div class="form-group">
-                              <div class="col-7 col-sm-12">
-                                 <label class="form-label">
-                                    {{ $t('message.dataTabPageSize') }}
-                                 </label>
-                              </div>
-                              <div class="col-5 col-sm-12">
-                                 <select
-                                    v-model="localPageSize"
-                                    class="form-select"
-                                    @change="changePageSize(+localPageSize)"
-                                 >
-                                    <option
-                                       v-for="size in pageSizes"
-                                       :key="size"
+                              <div class="form-group">
+                                 <div class="col-7 col-sm-12">
+                                    <label class="form-label">
+                                       {{ $t('message.dataTabPageSize') }}
+                                    </label>
+                                 </div>
+                                 <div class="col-5 col-sm-12">
+                                    <select
+                                       v-model="localPageSize"
+                                       class="form-select"
+                                       @change="changePageSize(+localPageSize)"
                                     >
-                                       {{ size }}
-                                    </option>
-                                 </select>
+                                       <option
+                                          v-for="size in pageSizes"
+                                          :key="size"
+                                       >
+                                          {{ size }}
+                                       </option>
+                                    </select>
+                                 </div>
+                              </div>
+                              <div class="form-group mb-0">
+                                 <div class="col-7 col-sm-12">
+                                    <label class="form-label">
+                                       {{ $t('message.restorePreviourSession') }}
+                                    </label>
+                                 </div>
+                                 <div class="col-5 col-sm-12">
+                                    <label class="form-switch d-inline-block" @click.prevent="toggleRestoreSession">
+                                       <input type="checkbox" :checked="restoreTabs">
+                                       <i class="form-icon" />
+                                    </label>
+                                 </div>
+                              </div>
+                              <div class="form-group mb-0">
+                                 <div class="col-7 col-sm-12">
+                                    <label class="form-label">
+                                       {{ $t('message.disableBlur') }}
+                                    </label>
+                                 </div>
+                                 <div class="col-5 col-sm-12">
+                                    <label class="form-switch d-inline-block" @click.prevent="toggleDisableBlur">
+                                       <input type="checkbox" :checked="disableBlur">
+                                       <i class="form-icon" />
+                                    </label>
+                                 </div>
+                              </div>
+                              <div class="form-group">
+                                 <div class="col-7 col-sm-12">
+                                    <label class="form-label">
+                                       {{ $t('message.notificationsTimeout') }}
+                                    </label>
+                                 </div>
+                                 <div class="col-5 col-sm-12">
+                                    <div class="input-group">
+                                       <input
+                                          v-model="localTimeout"
+                                          class="form-input"
+                                          type="number"
+                                          min="1"
+                                          @focusout="checkNotificationsTimeout"
+                                       >
+                                       <span class="input-group-addon">{{ $t('word.seconds') }}</span>
+                                    </div>
+                                 </div>
                               </div>
                            </div>
-                           <div class="form-group mb-0">
-                              <div class="col-7 col-sm-12">
-                                 <label class="form-label">
-                                    {{ $t('message.restorePreviourSession') }}
-                                 </label>
+
+                           <div class="column col-12 h6 mt-4 text-uppercase mb-1">
+                              {{ $t('word.editor') }}
+                           </div>
+                           <div class="column col-9 col-sm-12">
+                              <div class="form-group mb-0">
+                                 <div class="col-7 col-sm-12">
+                                    <label class="form-label">
+                                       {{ $t('word.autoCompletion') }}
+                                    </label>
+                                 </div>
+                                 <div class="col-5 col-sm-12">
+                                    <label class="form-switch d-inline-block" @click.prevent="toggleAutoComplete">
+                                       <input type="checkbox" :checked="selectedAutoComplete">
+                                       <i class="form-icon" />
+                                    </label>
+                                 </div>
                               </div>
-                              <div class="col-5 col-sm-12">
-                                 <label class="form-switch d-inline-block" @click.prevent="toggleRestoreSession">
-                                    <input type="checkbox" :checked="restoreTabs">
-                                    <i class="form-icon" />
-                                 </label>
+                              <div class="form-group mb-0">
+                                 <div class="col-7 col-sm-12">
+                                    <label class="form-label">
+                                       {{ $t('message.wrapLongLines') }}
+                                    </label>
+                                 </div>
+                                 <div class="col-5 col-sm-12">
+                                    <label class="form-switch d-inline-block" @click.prevent="toggleLineWrap">
+                                       <input type="checkbox" :checked="selectedLineWrap">
+                                       <i class="form-icon" />
+                                    </label>
+                                 </div>
                               </div>
                            </div>
-                           <div class="form-group mb-0">
-                              <div class="col-7 col-sm-12">
-                                 <label class="form-label">
-                                    {{ $t('message.disableBlur') }}
-                                 </label>
-                              </div>
-                              <div class="col-5 col-sm-12">
-                                 <label class="form-switch d-inline-block" @click.prevent="toggleDisableBlur">
-                                    <input type="checkbox" :checked="disableBlur">
-                                    <i class="form-icon" />
-                                 </label>
+                        </form>
+                     </div>
+                  </div>
+
+                  <div v-show="selectedTab === 'themes'" class="panel-body py-4">
+                     <div class="container">
+                        <div class="columns">
+                           <div class="column col-12 h6 text-uppercase mb-2">
+                              {{ $t('message.applicationTheme') }}
+                           </div>
+                           <div
+                              class="column col-6 c-hand theme-block"
+                              :class="{'selected': applicationTheme === 'dark'}"
+                              @click="changeApplicationTheme('dark')"
+                           >
+                              <img src="../images/dark.png" class="img-responsive img-fit-cover s-rounded">
+                              <div class="theme-name text-light">
+                                 <i class="mdi mdi-moon-waning-crescent mdi-48px" />
+                                 <div class="h6 mt-4">
+                                    {{ $t('word.dark') }}
+                                 </div>
                               </div>
                            </div>
-                           <div class="form-group">
-                              <div class="col-7 col-sm-12">
-                                 <label class="form-label">
-                                    {{ $t('message.notificationsTimeout') }}
-                                 </label>
-                              </div>
-                              <div class="col-5 col-sm-12">
-                                 <div class="input-group">
-                                    <input
-                                       v-model="localTimeout"
-                                       class="form-input"
-                                       type="number"
-                                       min="1"
-                                       @focusout="checkNotificationsTimeout"
-                                    >
-                                    <span class="input-group-addon">{{ $t('word.seconds') }}</span>
+                           <div
+                              class="column col-6 c-hand theme-block"
+                              :class="{'selected': applicationTheme === 'light'}"
+                              @click="changeApplicationTheme('light')"
+                           >
+                              <img src="../images/light.png" class="img-responsive img-fit-cover s-rounded">
+                              <div class="theme-name text-dark">
+                                 <i class="mdi mdi-white-balance-sunny mdi-48px" />
+                                 <div class="h6 mt-4">
+                                    {{ $t('word.light') }}
                                  </div>
                               </div>
                            </div>
                         </div>
 
-                        <div class="column col-12 h6 mt-4 text-uppercase mb-1">
-                           {{ $t('word.editor') }}
-                        </div>
-                        <div class="column col-9 col-sm-12">
-                           <div class="form-group mb-0">
-                              <div class="col-7 col-sm-12">
-                                 <label class="form-label">
-                                    {{ $t('word.autoCompletion') }}
-                                 </label>
-                              </div>
-                              <div class="col-5 col-sm-12">
-                                 <label class="form-switch d-inline-block" @click.prevent="toggleAutoComplete">
-                                    <input type="checkbox" :checked="selectedAutoComplete">
-                                    <i class="form-icon" />
-                                 </label>
-                              </div>
+                        <div class="columns mt-4">
+                           <div class="column col-12 h6 text-uppercase mb-2 mt-4">
+                              {{ $t('message.editorTheme') }}
                            </div>
-                           <div class="form-group mb-0">
-                              <div class="col-7 col-sm-12">
-                                 <label class="form-label">
-                                    {{ $t('message.wrapLongLines') }}
-                                 </label>
-                              </div>
-                              <div class="col-5 col-sm-12">
-                                 <label class="form-switch d-inline-block" @click.prevent="toggleLineWrap">
-                                    <input type="checkbox" :checked="selectedLineWrap">
-                                    <i class="form-icon" />
-                                 </label>
-                              </div>
-                           </div>
-                        </div>
-                     </form>
-                  </div>
-               </div>
-
-               <div v-show="selectedTab === 'themes'" class="panel-body py-4">
-                  <div class="container">
-                     <div class="columns">
-                        <div class="column col-12 h6 text-uppercase mb-2">
-                           {{ $t('message.applicationTheme') }}
-                        </div>
-                        <div
-                           class="column col-6 c-hand theme-block"
-                           :class="{'selected': applicationTheme === 'dark'}"
-                           @click="changeApplicationTheme('dark')"
-                        >
-                           <img src="../images/dark.png" class="img-responsive img-fit-cover s-rounded">
-                           <div class="theme-name text-light">
-                              <i class="mdi mdi-moon-waning-crescent mdi-48px" />
-                              <div class="h6 mt-4">
-                                 {{ $t('word.dark') }}
-                              </div>
-                           </div>
-                        </div>
-                        <div
-                           class="column col-6 c-hand theme-block"
-                           :class="{'selected': applicationTheme === 'light'}"
-                           @click="changeApplicationTheme('light')"
-                        >
-                           <img src="../images/light.png" class="img-responsive img-fit-cover s-rounded">
-                           <div class="theme-name text-dark">
-                              <i class="mdi mdi-white-balance-sunny mdi-48px" />
-                              <div class="h6 mt-4">
-                                 {{ $t('word.light') }}
-                              </div>
-                           </div>
-                        </div>
-                     </div>
-
-                     <div class="columns mt-4">
-                        <div class="column col-12 h6 text-uppercase mb-2 mt-4">
-                           {{ $t('message.editorTheme') }}
-                        </div>
-                        <div class="column col-6 h5 mb-4">
-                           <select
-                              v-model="localEditorTheme"
-                              class="form-select"
-                              @change="changeEditorTheme(localEditorTheme)"
-                           >
-                              <optgroup
-                                 v-for="group in editorThemes"
-                                 :key="group.group"
-                                 :label="group.group"
+                           <div class="column col-6 h5 mb-4">
+                              <select
+                                 v-model="localEditorTheme"
+                                 class="form-select"
+                                 @change="changeEditorTheme(localEditorTheme)"
                               >
-                                 <option
-                                    v-for="theme in group.themes"
-                                    :key="theme.name"
-                                    :value="theme.code"
-                                    :selected="editorTheme === theme.code"
+                                 <optgroup
+                                    v-for="group in editorThemes"
+                                    :key="group.group"
+                                    :label="group.group"
                                  >
-                                    {{ theme.name }}
-                                 </option>
-                              </optgroup>
-                           </select>
-                        </div>
-                        <div class="column col-6 mb-4">
-                           <div class="btn-group btn-group-block">
-                              <button
-                                 class="btn btn-dark cut-text"
-                                 :class="{'active': editorFontSize === 'small'}"
-                                 @click="changeEditorFontSize('small')"
-                              >
-                                 {{ $t('word.small') }}
-                              </button>
-                              <button
-                                 class="btn btn-dark cut-text"
-                                 :class="{'active': editorFontSize === 'medium'}"
-                                 @click="changeEditorFontSize('medium')"
-                              >
-                                 {{ $t('word.medium') }}
-                              </button>
-                              <button
-                                 class="btn btn-dark cut-text"
-                                 :class="{'active': editorFontSize === 'large'}"
-                                 @click="changeEditorFontSize('large')"
-                              >
-                                 {{ $t('word.large') }}
-                              </button>
+                                    <option
+                                       v-for="theme in group.themes"
+                                       :key="theme.name"
+                                       :value="theme.code"
+                                       :selected="editorTheme === theme.code"
+                                    >
+                                       {{ theme.name }}
+                                    </option>
+                                 </optgroup>
+                              </select>
+                           </div>
+                           <div class="column col-6 mb-4">
+                              <div class="btn-group btn-group-block">
+                                 <button
+                                    class="btn btn-dark cut-text"
+                                    :class="{'active': editorFontSize === 'small'}"
+                                    @click="changeEditorFontSize('small')"
+                                 >
+                                    {{ $t('word.small') }}
+                                 </button>
+                                 <button
+                                    class="btn btn-dark cut-text"
+                                    :class="{'active': editorFontSize === 'medium'}"
+                                    @click="changeEditorFontSize('medium')"
+                                 >
+                                    {{ $t('word.medium') }}
+                                 </button>
+                                 <button
+                                    class="btn btn-dark cut-text"
+                                    :class="{'active': editorFontSize === 'large'}"
+                                    @click="changeEditorFontSize('large')"
+                                 >
+                                    {{ $t('word.large') }}
+                                 </button>
+                              </div>
+                           </div>
+                           <div class="column col-12">
+                              <BaseTextEditor
+                                 :model-value="exampleQuery"
+                                 mode="sql"
+                                 :workspace="workspace"
+                                 :read-only="true"
+                                 :height="270"
+                              />
                            </div>
-                        </div>
-                        <div class="column col-12">
-                           <BaseTextEditor
-                              :model-value="exampleQuery"
-                              mode="sql"
-                              :workspace="workspace"
-                              :read-only="true"
-                              :height="270"
-                           />
                         </div>
                      </div>
                   </div>
-               </div>
 
-               <div v-show="selectedTab === 'update'" class="panel-body py-4">
-                  <ModalSettingsUpdate />
-               </div>
-               <div v-show="selectedTab === 'changelog'" class="panel-body py-4">
-                  <ModalSettingsChangelog />
-               </div>
+                  <div v-show="selectedTab === 'update'" class="panel-body py-4">
+                     <ModalSettingsUpdate />
+                  </div>
+                  <div v-show="selectedTab === 'changelog'" class="panel-body py-4">
+                     <ModalSettingsChangelog />
+                  </div>
 
-               <div v-show="selectedTab === 'about'" class="panel-body py-4">
-                  <div class="text-center">
-                     <img src="../images/logo.svg" width="128">
-                     <h4>{{ appName }}</h4>
-                     <p class="mb-2">
-                        {{ $t('word.version') }} {{ appVersion }}<br>
-                        <a class="c-hand" @click="openOutside('https://github.com/antares-sql/antares')"><i class="mdi mdi-github d-inline" /> GitHub</a> • <a class="c-hand" @click="openOutside('https://twitter.com/AntaresSQL')"><i class="mdi mdi-twitter d-inline" /> Twitter</a> • <a class="c-hand" @click="openOutside('https://antares-sql.app/')"><i class="mdi mdi-web d-inline" /> Website</a><br>
-                        <small>{{ $t('word.author') }} <a class="c-hand" @click="openOutside('https://github.com/Fabio286')">{{ appAuthor }}</a></small><br>
-                     </p>
-                     <div class="mb-2">
-                        <small class="d-block text-uppercase">{{ $t('word.contributors') }}:</small>
-                        <div class="d-block py-1">
-                           <small v-for="(contributor, i) in otherContributors" :key="i">{{ i !== 0 ? ', ' : '' }}{{ contributor }}</small>
+                  <div v-show="selectedTab === 'about'" class="panel-body py-4">
+                     <div class="text-center">
+                        <img src="../images/logo.svg" width="128">
+                        <h4>{{ appName }}</h4>
+                        <p class="mb-2">
+                           {{ $t('word.version') }} {{ appVersion }}<br>
+                           <a class="c-hand" @click="openOutside('https://github.com/antares-sql/antares')"><i class="mdi mdi-github d-inline" /> GitHub</a> • <a class="c-hand" @click="openOutside('https://twitter.com/AntaresSQL')"><i class="mdi mdi-twitter d-inline" /> Twitter</a> • <a class="c-hand" @click="openOutside('https://antares-sql.app/')"><i class="mdi mdi-web d-inline" /> Website</a><br>
+                           <small>{{ $t('word.author') }} <a class="c-hand" @click="openOutside('https://github.com/Fabio286')">{{ appAuthor }}</a></small><br>
+                        </p>
+                        <div class="mb-2">
+                           <small class="d-block text-uppercase">{{ $t('word.contributors') }}:</small>
+                           <div class="d-block py-1">
+                              <small v-for="(contributor, i) in otherContributors" :key="i">{{ i !== 0 ? ', ' : '' }}{{ contributor }}</small>
+                           </div>
+                           <small>{{ $t('message.madeWithJS') }}</small>
                         </div>
-                        <small>{{ $t('message.madeWithJS') }}</small>
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
-   </div>
+   </Teleport>
 </template>
 
 <script>
diff --git a/src/renderer/components/TheNotificationsBoard.vue b/src/renderer/components/TheNotificationsBoard.vue
index 51324686..dcdd6003 100644
--- a/src/renderer/components/TheNotificationsBoard.vue
+++ b/src/renderer/components/TheNotificationsBoard.vue
@@ -4,7 +4,7 @@
       @mouseenter="clearTimeouts"
       @mouseleave="rearmTimeouts"
    >
-      <transition-group tag="div" name="slide-fade">
+      <TransitionGroup tag="div" name="slide-fade">
          <BaseNotification
             v-for="notification in latestNotifications"
             :key="notification.uid"
@@ -12,7 +12,7 @@
             :status="notification.status"
             @close="removeNotification(notification.uid)"
          />
-      </transition-group>
+      </TransitionGroup>
    </div>
 </template>
 
diff --git a/src/renderer/components/Workspace.vue b/src/renderer/components/Workspace.vue
index b80dd881..90d92206 100644
--- a/src/renderer/components/Workspace.vue
+++ b/src/renderer/components/Workspace.vue
@@ -811,48 +811,5 @@ export default {
       }
     }
   }
-
-  .workspace-query-results {
-    overflow: auto;
-    white-space: nowrap;
-
-    .table {
-      width: auto;
-      border-collapse: separate;
-
-      .th {
-        position: sticky;
-        top: 0;
-        border: 2px solid;
-        border-left: none;
-        border-bottom-width: 2px;
-        padding: 0;
-        font-weight: 700;
-        font-size: 0.7rem;
-        z-index: 1;
-
-        > div {
-          padding: 0.1rem 0.2rem;
-          min-width: -webkit-fill-available;
-        }
-      }
-
-      .td {
-        border-right: 2px solid;
-        border-bottom: 2px solid;
-        padding: 0 0.2rem;
-        text-overflow: ellipsis;
-        max-width: 200px;
-        white-space: nowrap;
-        overflow: hidden;
-        font-size: 0.7rem;
-        position: relative;
-
-        &:focus {
-          outline: none;
-        }
-      }
-    }
-  }
 }
 </style>
diff --git a/src/renderer/components/WorkspaceTabQueryTableRow.vue b/src/renderer/components/WorkspaceTabQueryTableRow.vue
index d40686d9..ca368e83 100644
--- a/src/renderer/components/WorkspaceTabQueryTableRow.vue
+++ b/src/renderer/components/WorkspaceTabQueryTableRow.vue
@@ -152,7 +152,7 @@
          </template>
          <template #body>
             <div class="mb-2">
-               <transition name="jump-down">
+               <Transition name="jump-down">
                   <div v-if="contentInfo.size">
                      <img
                         v-if="isImage"
@@ -173,7 +173,7 @@
                         </button>
                      </div>
                   </div>
-               </transition>
+               </Transition>
                <div class="editor-field-info">
                   <div>
                      <b>{{ $t('word.size') }}</b>: {{ formatBytes(editingContent.length) }}<br>
diff --git a/src/renderer/scss/_fake-tables.scss b/src/renderer/scss/_fake-tables.scss
index 36cdc7aa..40b2d8dc 100644
--- a/src/renderer/scss/_fake-tables.scss
+++ b/src/renderer/scss/_fake-tables.scss
@@ -1,7 +1,7 @@
 .table {
   border-collapse: collapse;
-  border-spacing: 0;
   width: 100%;
+  border-spacing: 0;
   display: table;
   table-layout: fixed;
 
diff --git a/src/renderer/scss/main.scss b/src/renderer/scss/main.scss
index fc71019f..d0f0cff9 100644
--- a/src/renderer/scss/main.scss
+++ b/src/renderer/scss/main.scss
@@ -87,6 +87,50 @@ option:checked {
   }
 }
 
+
+.workspace-query-results {
+  overflow: auto;
+  white-space: nowrap;
+
+  .table {
+    width: auto;
+    border-collapse: separate;
+
+    .th {
+      position: sticky;
+      top: 0;
+      border: 2px solid;
+      border-left: none;
+      border-bottom-width: 2px;
+      padding: 0;
+      font-weight: 700;
+      font-size: 0.7rem;
+      z-index: 1;
+
+      > div {
+        padding: 0.1rem 0.2rem;
+        min-width: -webkit-fill-available;
+      }
+    }
+
+    .td {
+      border-right: 2px solid;
+      border-bottom: 2px solid;
+      padding: 0 0.2rem;
+      text-overflow: ellipsis;
+      max-width: 200px;
+      white-space: nowrap;
+      overflow: hidden;
+      font-size: 0.7rem;
+      position: relative;
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+}
+
 .workspace-tabs {
   align-content: baseline;
 
diff --git a/src/renderer/scss/themes/dark-theme.scss b/src/renderer/scss/themes/dark-theme.scss
index d7957b68..81628c38 100644
--- a/src/renderer/scss/themes/dark-theme.scss
+++ b/src/renderer/scss/themes/dark-theme.scss
@@ -181,37 +181,6 @@
       }
     }
 
-    .workspace-query-results {
-      .table {
-        .th {
-          border-color: darken($bg-color-light-gray, 80%);
-          background-color: $body-bg-dark;
-        }
-
-        .tr {
-          background-color: darken($bg-color-light-gray, 80%);
-
-          .td:first-child {
-            border-left: 2px solid $body-bg-dark;
-          }
-
-          .td {
-            border-color: $body-bg-dark;
-
-            &:focus {
-              box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
-              background-color: rgba($color: #000, $alpha: 0.3);
-            }
-
-            .editable-field {
-              box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
-              background-color: rgba($color: #000, $alpha: 0.3);
-            }
-          }
-        }
-      }
-    }
-
     .workspace-tabs {
       .tab-block {
         background: $bg-color-light-dark;
@@ -233,6 +202,37 @@
     }
   }
 
+  .workspace-query-results {
+    .table {
+      .th {
+        border-color: darken($bg-color-light-gray, 80%);
+        background-color: $body-bg-dark;
+      }
+
+      .tr {
+        background-color: darken($bg-color-light-gray, 80%);
+
+        .td:first-child {
+          border-left: 2px solid $body-bg-dark;
+        }
+
+        .td {
+          border-color: $body-bg-dark;
+
+          &:focus {
+            box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
+            background-color: rgba($color: #000, $alpha: 0.3);
+          }
+
+          .editable-field {
+            box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
+            background-color: rgba($color: #000, $alpha: 0.3);
+          }
+        }
+      }
+    }
+  }
+  
   .connection-panel {
     .panel {
       background: rgba($bg-color-light-dark, 50%);
diff --git a/src/renderer/scss/themes/light-theme.scss b/src/renderer/scss/themes/light-theme.scss
index 23474d4a..bc0fe5a6 100644
--- a/src/renderer/scss/themes/light-theme.scss
+++ b/src/renderer/scss/themes/light-theme.scss
@@ -217,33 +217,33 @@
         }
       }
     }
+  }
 
-    .workspace-query-results {
-      .table {
-        .th {
-          background: $body-bg;
-          border-color: lighten($bg-color-light-gray, 2%);
+  .workspace-query-results {
+    .table {
+      .th {
+        background: $body-bg;
+        border-color: lighten($bg-color-light-gray, 2%);
+      }
+
+      .tr {
+        background-color: lighten($bg-color-light-gray, 2%);
+
+        .td:first-child {
+          border-left: 2px solid $body-bg;
         }
 
-        .tr {
-          background-color: lighten($bg-color-light-gray, 2%);
+        .td {
+          border-color: $body-bg;
 
-          .td:first-child {
-            border-left: 2px solid $body-bg;
+          &:focus {
+            box-shadow: inset 0 0 0 2px lighten($body-font-color, 10%);
+            background-color: $body-font-color-dark;
           }
 
-          .td {
-            border-color: $body-bg;
-
-            &:focus {
-              box-shadow: inset 0 0 0 2px lighten($body-font-color, 10%);
-              background-color: $body-font-color-dark;
-            }
-
-            .editable-field {
-              box-shadow: inset 0 0 0 2px lighten($body-font-color, 10%);
-              background-color: $body-font-color-dark;
-            }
+          .editable-field {
+            box-shadow: inset 0 0 0 2px lighten($body-font-color, 10%);
+            background-color: $body-font-color-dark;
           }
         }
       }