diff --git a/README.md b/README.md
index 1734c71a..087c57f7 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@ If you are curious to try this early state of Antares you can download and insta
 
 Why am I developing an SQL client when there are a lot of thom on the market?-->
 
-## Hot to contribute
+## How to contribute
 
 - [Translate Antares](https://github.com/EStarium/antares/wiki/Translate-Antares)
 
@@ -25,19 +25,19 @@ Why am I developing an SQL client when there are a lot of thom on the market?-->
 
 This is a roadmap with major features will come in near future.
 
-- [ ] Options to insert new database records.
-- [ ] Improvements of query editor area.
-- [ ] Multiple query tabs.
-- [ ] Tables management (add/edit/delete).
-- [ ] Stored procedures, schedulers and trigger support.
-- [ ] Database tools.
-- [ ] Context menu shortcuts.
-- [ ] Keyboard shortcuts.
-- [ ] More secure password storage.
-- [ ] Query logs console.
-- [ ] Fake data filler.
-- [ ] Import/export and migration.
-- [ ] Themes.
+- Options to insert new database records.
+- Improvements of query editor area.
+- Multiple query tabs.
+- Tables management (add/edit/delete).
+- Stored procedures, views, schedulers and trigger support.
+- Database tools.
+- Context menu shortcuts.
+- Keyboard shortcuts.
+- More secure password storage.
+- Query logs console.
+- Fake data filler.
+- Import/export and migration.
+- Themes.
 
 ## Currently supported
 
diff --git a/package.json b/package.json
index 408705de..3f1c8495 100644
--- a/package.json
+++ b/package.json
@@ -48,11 +48,11 @@
     }
   },
   "dependencies": {
+    "@mdi/font": "^5.5.55",
     "codemirror": "^5.56.0",
     "electron-log": "^4.2.2",
     "electron-updater": "^4.3.4",
     "lodash": "^4.17.19",
-    "material-design-icons": "^3.0.1",
     "moment": "^2.27.0",
     "mssql": "^6.2.1",
     "mysql": "^2.18.1",
diff --git a/src/main/models/InformationSchema.js b/src/main/models/InformationSchema.js
index 108c4015..8bdda7f9 100644
--- a/src/main/models/InformationSchema.js
+++ b/src/main/models/InformationSchema.js
@@ -27,7 +27,11 @@ export default class {
             name: field.COLUMN_NAME,
             key: field.COLUMN_KEY.toLowerCase(),
             type: field.DATA_TYPE,
-            precision: field.DATETIME_PRECISION
+            numPrecision: field.NUMERIC_PRECISION,
+            datePrecision: field.DATETIME_PRECISION,
+            charLength: field.CHARACTER_MAXIMUM_LENGTH,
+            isNullable: field.IS_NULLABLE,
+            default: field.COLUMN_DEFAULT
          };
       });
    }
diff --git a/src/renderer/components/BaseNotification.vue b/src/renderer/components/BaseNotification.vue
index 0e6c95e4..b8cbf8f8 100644
--- a/src/renderer/components/BaseNotification.vue
+++ b/src/renderer/components/BaseNotification.vue
@@ -1,14 +1,15 @@
 <template>
    <div class="toast mt-2" :class="notificationStatus.className">
       <span class="p-vcentered text-left" :class="{'expanded': isExpanded}">
-         <i class="material-icons mr-1">{{ notificationStatus.iconName }}</i>
+         <i class="mdi mdi-24px mr-2" :class="notificationStatus.iconName" />
          <span class="notification-message">{{ message }}</span>
       </span>
       <i
          v-if="isExpandable"
-         class="material-icons c-hand"
+         class="mdi mdi-24px c-hand expand-btn"
+         :class="isExpanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
          @click="toggleExpand"
-      >{{ isExpanded ? 'expand_less' : 'expand_more' }}</i>
+      />
       <button class="btn btn-clear ml-2" @click="hideToast" />
    </div>
 </template>
@@ -38,19 +39,19 @@ export default {
          switch (this.status) {
             case 'success':
                className = 'toast-success';
-               iconName = 'done';
+               iconName = 'mdi-check';
                break;
             case 'error':
                className = 'toast-error';
-               iconName = 'error';
+               iconName = 'mdi-alert-rhombus';
                break;
             case 'warning':
                className = 'toast-warning';
-               iconName = 'warning';
+               iconName = 'mdi-alert';
                break;
             case 'primary':
                className = 'toast-primary';
-               iconName = 'info_outline';
+               iconName = 'mdi-information-outline';
                break;
          }
 
@@ -88,6 +89,10 @@ export default {
     max-width: 30rem;
   }
 
+  .expand-btn {
+    align-items: initial;
+  }
+
   .expanded .notification-message {
     white-space: initial;
   }
diff --git a/src/renderer/components/BaseToast.vue b/src/renderer/components/BaseToast.vue
index 43deafda..e5ffe7fc 100644
--- a/src/renderer/components/BaseToast.vue
+++ b/src/renderer/components/BaseToast.vue
@@ -34,19 +34,19 @@ export default {
          switch (this.status) {
             case 'success':
                className = 'toast-success';
-               iconTag = '<i class="material-icons mr-1">done</i>';
+               iconTag = '<i class="mdi mdi-24px mdi-check mr-1"></i>';
                break;
             case 'error':
                className = 'toast-error';
-               iconTag = '<i class="material-icons mr-1">error</i>';
+               iconTag = '<i class="mdi mdi-24px mdi-alert-rhombus mr-1"></i>';
                break;
             case 'warning':
                className = 'toast-warning';
-               iconTag = '<i class="material-icons mr-1">warning</i>';
+               iconTag = '<i class="mdi mdi-24px mdi-alert mr-1"></i>';
                break;
             case 'primary':
                className = 'toast-primary';
-               iconTag = '<i class="material-icons mr-1">info_outline</i>';
+               iconTag = '<i class="mdi mdi-24px mdi-information-outline mr-1"></i>';
                break;
          }
 
diff --git a/src/renderer/components/ModalSettings.vue b/src/renderer/components/ModalSettings.vue
index 09fc4ea3..0071ee39 100644
--- a/src/renderer/components/ModalSettings.vue
+++ b/src/renderer/components/ModalSettings.vue
@@ -49,7 +49,7 @@
                         <div class="form-group mb-4">
                            <div class="col-6 col-sm-12">
                               <label class="form-label">
-                                 <i class="material-icons md-18 mr-1">translate</i>
+                                 <i class="mdi mdi-18px mdi-translate mr-1" />
                                  {{ $t('word.language') }}:
                               </label>
                            </div>
diff --git a/src/renderer/components/ModalSettingsUpdate.vue b/src/renderer/components/ModalSettingsUpdate.vue
index 283fa0e7..8b0aa47b 100644
--- a/src/renderer/components/ModalSettingsUpdate.vue
+++ b/src/renderer/components/ModalSettingsUpdate.vue
@@ -1,7 +1,7 @@
 <template>
    <div class="empty">
       <div class="empty-icon">
-         <i class="material-icons md-48">system_update_alt</i>
+         <i class="mdi mdi-48px mdi-cloud-download" />
       </div>
       <p class="empty-title h5">
          {{ updateMessage }}
diff --git a/src/renderer/components/SettingBarContext.vue b/src/renderer/components/SettingBarContext.vue
index 418562c2..306c690f 100644
--- a/src/renderer/components/SettingBarContext.vue
+++ b/src/renderer/components/SettingBarContext.vue
@@ -4,10 +4,10 @@
       @closeContext="$emit('closeContext')"
    >
       <div class="context-element" @click="showEditModal(contextConnection)">
-         <i class="material-icons md-18 text-light pr-1">edit</i> {{ $t('word.edit') }}
+         <i class="mdi mdi-18px mdi-pencil text-light pr-1" /> {{ $t('word.edit') }}
       </div>
       <div class="context-element" @click="showConfirmModal">
-         <i class="material-icons md-18 text-light pr-1">delete</i> {{ $t('word.delete') }}
+         <i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $t('word.delete') }}
       </div>
 
       <ConfirmModal
diff --git a/src/renderer/components/TheAppWelcome.vue b/src/renderer/components/TheAppWelcome.vue
index ce9493a2..bbe951e4 100644
--- a/src/renderer/components/TheAppWelcome.vue
+++ b/src/renderer/components/TheAppWelcome.vue
@@ -2,7 +2,7 @@
    <div class="columns">
       <div class="column col-12 empty text-light">
          <div class="empty-icon">
-            <i class="material-icons md-48">mood</i>
+            <i class="mdi mdi-48px mdi-emoticon" />
          </div>
          <p class="empty-title h5">
             {{ $t('message.appWelcome') }}
diff --git a/src/renderer/components/TheFooter.vue b/src/renderer/components/TheFooter.vue
index 6e96eb6b..ee775dc3 100644
--- a/src/renderer/components/TheFooter.vue
+++ b/src/renderer/components/TheFooter.vue
@@ -3,7 +3,7 @@
       <div class="footer-left-elements">
          <ul class="footer-elements">
             <li class="footer-element">
-               <i class="material-icons md-18 mr-1">memory</i>
+               <i class="mdi mdi-18px mdi-memory mr-1" />
                <small>{{ appVersion }}</small>
             </li>
          </ul>
@@ -12,14 +12,14 @@
       <div class="footer-right-elements">
          <ul class="footer-elements">
             <li class="footer-element footer-link" @click="openOutside('https://www.patreon.com/fabio286')">
-               <i class="material-icons md-18 mr-1">favorite</i>
+               <i class="mdi mdi-18px mdi-coffee mr-1" />
                <small>{{ $t('word.donate') }}</small>
             </li>
             <li class="footer-element footer-link" @click="openOutside('https://github.com/EStarium/antares/issues')">
-               <i class="material-icons md-18">bug_report</i>
+               <i class="mdi mdi-18px mdi-bug" />
             </li>
             <li class="footer-element footer-link" @click="showSettingModal('about')">
-               <i class="material-icons md-18">info_outline</i>
+               <i class="mdi mdi-18px mdi-information-outline" />
             </li>
          </ul>
       </div>
diff --git a/src/renderer/components/TheSettingBar.vue b/src/renderer/components/TheSettingBar.vue
index 74659537..129d96c7 100644
--- a/src/renderer/components/TheSettingBar.vue
+++ b/src/renderer/components/TheSettingBar.vue
@@ -28,7 +28,7 @@
                @click="showNewConnModal"
                @mouseover.self="tooltipPosition"
             >
-               <i class="settingbar-element-icon material-icons text-light">add</i>
+               <i class="settingbar-element-icon mdi mdi-24px mdi-plus text-light" />
                <span class="ex-tooltip-content">{{ $t('message.addConnection') }}</span>
             </li>
          </ul>
@@ -37,7 +37,7 @@
       <div class="settingbar-bottom-elements">
          <ul class="settingbar-elements">
             <li class="settingbar-element btn btn-link ex-tooltip" @click="showSettingModal('general')">
-               <i class="settingbar-element-icon material-icons text-light">settings</i>
+               <i class="settingbar-element-icon mdi mdi-24px mdi-cog text-light" />
                <span class="ex-tooltip-content">{{ $t('word.settings') }}</span>
             </li>
          </ul>
diff --git a/src/renderer/components/TheTitleBar.vue b/src/renderer/components/TheTitleBar.vue
index 10766857..014e2fb9 100644
--- a/src/renderer/components/TheTitleBar.vue
+++ b/src/renderer/components/TheTitleBar.vue
@@ -13,24 +13,24 @@
             class="titlebar-element"
             @click="openDevTools"
          >
-            <i class="material-icons">code</i>
+            <i class="mdi mdi-24px mdi-code-tags" />
          </div>
          <div
             v-if="isDevelopment"
             class="titlebar-element"
             @click="reload"
          >
-            <i class="material-icons">refresh</i>
+            <i class="mdi mdi-24px mdi-refresh" />
          </div>
          <div class="titlebar-element" @click="minimizeApp">
-            <i class="material-icons">remove</i>
+            <i class="mdi mdi-24px mdi-minus" />
          </div>
          <div class="titlebar-element" @click="toggleFullScreen">
-            <i v-if="isMaximized" class="material-icons">fullscreen_exit</i>
-            <i v-else class="material-icons">fullscreen</i>
+            <i v-if="isMaximized" class="mdi mdi-24px mdi-fullscreen-exit" />
+            <i v-else class="mdi mdi-24px mdi-fullscreen" />
          </div>
          <div class="titlebar-element close-button" @click="closeApp">
-            <i class="material-icons">close</i>
+            <i class="mdi mdi-24px mdi-close" />
          </div>
       </div>
    </div>
diff --git a/src/renderer/components/Workspace.vue b/src/renderer/components/Workspace.vue
index bb22e481..dea186f4 100644
--- a/src/renderer/components/Workspace.vue
+++ b/src/renderer/components/Workspace.vue
@@ -8,7 +8,7 @@
                class="tab-item"
             >
                <a class="tab-link">
-                  <i class="material-icons md-18 mr-1">tune</i>
+                  <i class="mdi mdi-18px mdi-tune mr-1" />
                   <span :title="workspace.breadcrumbs.table">{{ $t('word.properties').toUpperCase() }}: {{ workspace.breadcrumbs.table }}</span>
                </a>
             </li>
@@ -19,7 +19,7 @@
                @click="selectTab({uid: workspace.uid, tab: 1})"
             >
                <a class="tab-link">
-                  <i class="material-icons md-18 mr-1">grid_on</i>
+                  <i class="mdi mdi-18px mdi-table mr-1" />
                   <span :title="workspace.breadcrumbs.table">{{ $t('word.data').toUpperCase() }}: {{ workspace.breadcrumbs.table }}</span>
                </a>
             </li>
diff --git a/src/renderer/components/WorkspaceConnectPanel.vue b/src/renderer/components/WorkspaceConnectPanel.vue
index 0b3fa27c..7061bdda 100644
--- a/src/renderer/components/WorkspaceConnectPanel.vue
+++ b/src/renderer/components/WorkspaceConnectPanel.vue
@@ -2,7 +2,7 @@
    <div class="columns">
       <div class="column col-12 empty text-light">
          <div class="empty-icon">
-            <i class="material-icons md-48">cloud_off</i>
+            <i class="mdi mdi-48px mdi-power-plug-off" />
          </div>
          <p class="empty-title h5">
             {{ $t('word.disconnected') }}
diff --git a/src/renderer/components/WorkspaceExploreBar.vue b/src/renderer/components/WorkspaceExploreBar.vue
index 2225b6d0..4cc13566 100644
--- a/src/renderer/components/WorkspaceExploreBar.vue
+++ b/src/renderer/components/WorkspaceExploreBar.vue
@@ -10,16 +10,16 @@
             <span class="workspace-explorebar-title">{{ connectionName }}</span>
             <span v-if="workspace.connected" class="workspace-explorebar-tools">
                <i
-                  class="material-icons md-18 c-hand"
+                  class="mdi mdi-18px mdi-refresh c-hand"
                   :class="{'rotate':isRefreshing}"
                   :title="$t('word.refresh')"
                   @click="refresh"
-               >refresh</i>
+               />
                <i
-                  class="material-icons md-18 c-hand mr-1 ml-2"
+                  class="mdi mdi-18px mdi-power-plug-off c-hand mr-1 ml-2"
                   :title="$t('word.disconnect')"
                   @click="disconnectWorkspace(connection.uid)"
-               >exit_to_app</i>
+               />
             </span>
          </div>
          <WorkspaceConnectPanel
diff --git a/src/renderer/components/WorkspaceExploreBarDatabase.vue b/src/renderer/components/WorkspaceExploreBarDatabase.vue
index 2572a99a..95a361cb 100644
--- a/src/renderer/components/WorkspaceExploreBarDatabase.vue
+++ b/src/renderer/components/WorkspaceExploreBarDatabase.vue
@@ -5,8 +5,8 @@
          :class="{'text-bold': breadcrumbs.schema === database.name}"
          @click="changeBreadcrumbs({schema: database.name, table:null})"
       >
-         <i class="icon material-icons md-18 mr-1">navigate_next</i>
-         <i class="material-icons md-18 mr-1">view_agenda</i>
+         <i class="icon mdi mdi-18px mdi-chevron-right" />
+         <i class="mdi mdi-18px mdi-database mr-1" />
          <span>{{ database.name }}</span>
       </summary>
       <div class="accordion-body">
@@ -20,7 +20,7 @@
                   @click="changeBreadcrumbs({schema: database.name, table: table.TABLE_NAME})"
                >
                   <a class="table-name">
-                     <i class="material-icons md-18 mr-1">grid_on</i>
+                     <i class="mdi mdi-18px mdi-table mr-1" />
                      <span>{{ table.TABLE_NAME }}</span>
                   </a>
                </li>
diff --git a/src/renderer/components/WorkspaceQueryTab.vue b/src/renderer/components/WorkspaceQueryTab.vue
index 6d60b946..f55ad710 100644
--- a/src/renderer/components/WorkspaceQueryTab.vue
+++ b/src/renderer/components/WorkspaceQueryTab.vue
@@ -11,7 +11,7 @@
                   @click="runQuery(query)"
                >
                   <span>{{ $t('word.run') }}</span>
-                  <i class="material-icons text-success">play_arrow</i>
+                  <i class="mdi mdi-24px mdi-play text-success" />
                </button>
             </div>
             <div class="workspace-query-info">
diff --git a/src/renderer/components/WorkspaceQueryTable.vue b/src/renderer/components/WorkspaceQueryTable.vue
index 2204d21a..052b1cf2 100644
--- a/src/renderer/components/WorkspaceQueryTable.vue
+++ b/src/renderer/components/WorkspaceQueryTable.vue
@@ -23,12 +23,16 @@
                      <div class="table-column-title" @click="sort(field.name)">
                         <i
                            v-if="field.key"
-                           class="material-icons column-key c-help"
+                           class="mdi mdi-key column-key c-help"
                            :class="`key-${field.key}`"
                            :title="keyName(field.key)"
-                        >vpn_key</i>
+                        />
                         <span>{{ field.name }}</span>
-                        <i v-if="currentSort === field.name" class="material-icons sort-icon">{{ currentSortDir === 'asc' ? 'arrow_upward':'arrow_downward' }}</i>
+                        <i
+                           v-if="currentSort === field.name"
+                           class="mdi sort-icon"
+                           :class="currentSortDir === 'asc' ? 'mdi-sort-ascending':'mdi-sort-descending'"
+                        />
                      </div>
                   </div>
                </div>
@@ -148,7 +152,7 @@ export default {
          let length = 0;
          const field = this.fields.filter(field => field.name === cKey)[0];
          if (field)
-            length = field.precision;
+            length = field.datePrecision;
 
          return length;
       },
@@ -291,23 +295,4 @@ export default {
   line-height: 1;
   margin-left: 0.2rem;
 }
-
-.column-key {
-  transform: rotate(90deg);
-  font-size: 0.7rem;
-  line-height: 1.5;
-  margin-right: 0.2rem;
-
-  &.key-pri {
-    color: goldenrod;
-  }
-
-  &.key-uni {
-    color: deepskyblue;
-  }
-
-  &.key-mul {
-    color: palegreen;
-  }
-}
 </style>
diff --git a/src/renderer/components/WorkspaceQueryTableContext.vue b/src/renderer/components/WorkspaceQueryTableContext.vue
index 09f17289..25983cc7 100644
--- a/src/renderer/components/WorkspaceQueryTableContext.vue
+++ b/src/renderer/components/WorkspaceQueryTableContext.vue
@@ -4,7 +4,7 @@
       @closeContext="closeContext"
    >
       <div class="context-element" @click="showConfirmModal">
-         <i class="material-icons md-18 text-light pr-1">delete</i> {{ $tc('message.deleteRows', selectedRows.length) }}
+         <i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $tc('message.deleteRows', selectedRows.length) }}
       </div>
 
       <ConfirmModal
diff --git a/src/renderer/components/WorkspaceQueryTableRow.vue b/src/renderer/components/WorkspaceQueryTableRow.vue
index 738107ef..5d64439c 100644
--- a/src/renderer/components/WorkspaceQueryTableRow.vue
+++ b/src/renderer/components/WorkspaceQueryTableRow.vue
@@ -83,16 +83,16 @@
                         class="img-responsive p-centered bg-checkered"
                      >
                      <div v-else class="text-center">
-                        <i class="material-icons md-36">insert_drive_file</i>
+                        <i class="mdi mdi-36px mdi-file" />
                      </div>
                      <div class="editor-buttons mt-2">
                         <button class="btn btn-link btn-sm" @click="downloadFile">
                            <span>{{ $t('word.download') }}</span>
-                           <i class="material-icons ml-1">file_download</i>
+                           <i class="mdi mdi-24px mdi-download ml-1" />
                         </button>
                         <button class="btn btn-link btn-sm" @click="prepareToDelete">
                            <span>{{ $t('word.delete') }}</span>
-                           <i class="material-icons ml-1">delete_forever</i>
+                           <i class="mdi mdi-24px mdi-delete-forever ml-1" />
                         </button>
                      </div>
                   </div>
@@ -255,7 +255,7 @@ export default {
          let length = 0;
          const field = this.fields.filter(field => field.name === cKey)[0];
          if (field)
-            length = field.precision;
+            length = field.datePrecision;
 
          return length;
       },
@@ -346,7 +346,7 @@ export default {
          const downloadLink = document.createElement('a');
 
          downloadLink.href = `data:${this.contentInfo.mime};base64, ${bufferToBase64(this.editingContent)}`;
-         downloadLink.setAttribute('download', `${this.field}.${this.contentInfo.ext}`);
+         downloadLink.setAttribute('download', `${this.editingField}.${this.contentInfo.ext}`);
          document.body.appendChild(downloadLink);
 
          downloadLink.click();
diff --git a/src/renderer/components/WorkspaceTableTab.vue b/src/renderer/components/WorkspaceTableTab.vue
index 310eb979..ebf8a47b 100644
--- a/src/renderer/components/WorkspaceTableTab.vue
+++ b/src/renderer/components/WorkspaceTableTab.vue
@@ -9,7 +9,7 @@
                   @click="reloadTable"
                >
                   <span>{{ $t('word.refresh') }}</span>
-                  <i class="material-icons ml-1">refresh</i>
+                  <i class="mdi mdi-24px mdi-refresh ml-1" />
                </button>
                <button
                   class="btn btn-link btn-sm"
@@ -17,7 +17,7 @@
                   @click="showAddModal"
                >
                   <span>{{ $t('word.add') }}</span>
-                  <i class="material-icons ml-1">playlist_add</i>
+                  <i class="mdi mdi-24px mdi-playlist-plus ml-1" />
                </button>
             </div>
             <div class="workspace-query-info">
@@ -64,7 +64,8 @@ export default {
          isQuering: false,
          results: {},
          fields: [],
-         lastTable: null
+         lastTable: null,
+         isAddModal: false
       };
    },
    computed: {
@@ -138,7 +139,12 @@ export default {
       reloadTable () {
          this.getTableData();
       },
-      showAddModal () {}
+      showAddModal () {
+         this.isAddModal = true;
+      },
+      hideAddModal () {
+         this.isAddModal = false;
+      }
    }
 };
 </script>
diff --git a/src/renderer/main.js b/src/renderer/main.js
index 25ea026c..6079c93f 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -2,7 +2,7 @@
 
 import Vue from 'vue';
 
-import 'material-design-icons/iconfont/material-icons.css';
+import '@mdi/font/css/materialdesignicons.css';
 import '@/scss/main.scss';
 
 import App from '@/App.vue';
diff --git a/src/renderer/scss/_mdi-additions.scss b/src/renderer/scss/_mdi-additions.scss
index a60e487c..80c9ef17 100644
--- a/src/renderer/scss/_mdi-additions.scss
+++ b/src/renderer/scss/_mdi-additions.scss
@@ -1,38 +1,9 @@
-.material-icons {
-  // TODO: rewrite with rem
+.mdi {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  /* Rules for sizing the icon. */
-  &.md-18 {
-    font-size: 18px;
-  }
-
-  &.md-24 {
-    font-size: 24px;
-  }
-
-  &.md-36 {
-    font-size: 36px;
-  }
-
-  &.md-48 {
-    font-size: 48px;
-  }
-
-  /* Rules for using icons as black on a light background. */
-  &.md-dark {
-    color: rgba(0, 0, 0, 0.54);
-  }
-
-  &.md-dark.md-inactive {
-    color: rgba(0, 0, 0, 0.26);
-  }
-
-  /* Rules for using icons as white on a dark background. */
-  &.md-light {
-    color: rgba(255, 255, 255, 1);
-  }
-
-  &.md-light.md-inactive {
-    color: rgba(255, 255, 255, 0.3);
+  &::before {
+    line-height: 1;
   }
 }
diff --git a/src/renderer/scss/_table-keys.scss b/src/renderer/scss/_table-keys.scss
new file mode 100644
index 00000000..01ca0aab
--- /dev/null
+++ b/src/renderer/scss/_table-keys.scss
@@ -0,0 +1,18 @@
+.column-key {
+  transform: rotate(90deg);
+  font-size: 0.7rem;
+  line-height: 1.5;
+  margin-right: 0.2rem;
+
+  &.key-pri {
+    color: goldenrod;
+  }
+
+  &.key-uni {
+    color: deepskyblue;
+  }
+
+  &.key-mul {
+    color: palegreen;
+  }
+}
diff --git a/src/renderer/scss/main.scss b/src/renderer/scss/main.scss
index 52d21d9c..c3e759d7 100644
--- a/src/renderer/scss/main.scss
+++ b/src/renderer/scss/main.scss
@@ -2,6 +2,7 @@
 @import "variables";
 @import "transitions";
 @import "data-types";
+@import "table-keys";
 @import "fake-tables";
 @import "mdi-additions";
 @import "db-icons";
@@ -133,6 +134,10 @@ body {
   background: $bg-color-gray;
 }
 
+.form-input:not(:placeholder-shown):invalid:focus {
+  background: $bg-color-gray;
+}
+
 .form-select:not([multiple]):not([size]):focus {
   border-color: $primary-color;
 }
@@ -156,7 +161,7 @@ body {
 }
 
 .btn.loading {
-  > .material-icons,
+  > .mdi,
   > span {
     visibility: hidden;
   }