diff --git a/packages/web/src/datagrid/DataGridToolbar.js b/packages/web/src/datagrid/DataGridToolbar.js
index d439d39e9..edfc9eb3f 100644
--- a/packages/web/src/datagrid/DataGridToolbar.js
+++ b/packages/web/src/datagrid/DataGridToolbar.js
@@ -5,17 +5,19 @@ import { changeSetContainsChanges } from '@dbgate/datalib';
 export default function DataGridToolbar({ reload, changeSetState, dispatchChangeSet, save, revert }) {
   return (
     <>
-      <ToolbarButton onClick={reload}>Refresh</ToolbarButton>
-      <ToolbarButton disabled={!changeSetState.canUndo} onClick={() => dispatchChangeSet({ type: 'undo' })}>
+      <ToolbarButton onClick={reload} icon="fas fa-sync">
+        Refresh
+      </ToolbarButton>
+      <ToolbarButton disabled={!changeSetState.canUndo} onClick={() => dispatchChangeSet({ type: 'undo' })} icon="fas fa-undo">
         Undo
       </ToolbarButton>
-      <ToolbarButton disabled={!changeSetState.canRedo} onClick={() => dispatchChangeSet({ type: 'redo' })}>
+      <ToolbarButton disabled={!changeSetState.canRedo} onClick={() => dispatchChangeSet({ type: 'redo' })} icon="fas fa-redo">
         Redo
       </ToolbarButton>
-      <ToolbarButton disabled={!changeSetContainsChanges(changeSetState.value)} onClick={save}>
+      <ToolbarButton disabled={!changeSetContainsChanges(changeSetState.value)} onClick={save} icon="fas fa-save">
         Save
       </ToolbarButton>
-      <ToolbarButton disabled={!changeSetContainsChanges(changeSetState.value)} onClick={revert}>
+      <ToolbarButton disabled={!changeSetContainsChanges(changeSetState.value)} onClick={revert} icon="fas fa-times">
         Revert
       </ToolbarButton>
     </>
diff --git a/packages/web/src/query/QueryToolbar.js b/packages/web/src/query/QueryToolbar.js
index 766ee6dd7..80bc23996 100644
--- a/packages/web/src/query/QueryToolbar.js
+++ b/packages/web/src/query/QueryToolbar.js
@@ -4,13 +4,15 @@ import ToolbarButton from '../widgets/ToolbarButton';
 export default function QueryToolbar({ execute, cancel, isDatabaseDefined, busy, save }) {
   return (
     <>
-      <ToolbarButton disabled={!isDatabaseDefined || busy} onClick={execute}>
+      <ToolbarButton disabled={!isDatabaseDefined || busy} onClick={execute} icon="fas fa-play">
         Execute
       </ToolbarButton>
-      <ToolbarButton disabled={!busy} onClick={cancel}>
+      <ToolbarButton disabled={!busy} onClick={cancel} icon="fas fa-times">
         Cancel
       </ToolbarButton>
-      <ToolbarButton onClick={save}>Save</ToolbarButton>
+      <ToolbarButton onClick={save} icon="fas fa-save">
+        Save
+      </ToolbarButton>
     </>
   );
 }
diff --git a/packages/web/src/widgets/Toolbar.js b/packages/web/src/widgets/Toolbar.js
index 0bac77790..d9bfd48a8 100644
--- a/packages/web/src/widgets/Toolbar.js
+++ b/packages/web/src/widgets/Toolbar.js
@@ -17,8 +17,12 @@ export default function ToolBar({ toolbarPortalRef }) {
   return (
     <ToolbarContainer>
       <ConnectionModal modalState={modalState} />
-      <ToolbarButton onClick={modalState.open}>Add connection</ToolbarButton>
-      <ToolbarButton onClick={newQuery}>New Query</ToolbarButton>
+      <ToolbarButton onClick={modalState.open} icon="fas fa-database">
+        Add connection
+      </ToolbarButton>
+      <ToolbarButton onClick={newQuery} icon="fas fa-file-alt">
+        New Query
+      </ToolbarButton>
       <ToolbarContainer ref={toolbarPortalRef}></ToolbarContainer>
     </ToolbarContainer>
   );
diff --git a/packages/web/src/widgets/ToolbarButton.js b/packages/web/src/widgets/ToolbarButton.js
index 0dcded427..d88c31f9f 100644
--- a/packages/web/src/widgets/ToolbarButton.js
+++ b/packages/web/src/widgets/ToolbarButton.js
@@ -4,37 +4,39 @@ import styled from 'styled-components';
 import theme from '../theme';
 
 const ButtonDiv = styled.div`
-  // height: ${theme.toolBar.height - 5}px;
-  // border: 1px solid gray;
-  padding: 5px;
-  margin: 2px;
-  //background-color: #777;
-  background-color: #337ab7;
-  border-color: #2e6da4;  color: white;
-  border-radius: 2px;
+  padding: 5px 15px;
+  // margin: 2px;
+  color: black;
+  border: 0;
+  border-right: 1px solid #ccc;
+  height: ${theme.toolBar.height}px;
 
-  ${props =>
+  ${(props) =>
     !props.disabled &&
     `
   &:hover {
-    background-color: #286090;
+    background-color: #CCC;
   }
 
   &:active:hover {
-    background-color: #204d74;
+    background-color: #AAA;
   }
   `}
 
-  ${props =>
+  ${(props) =>
     props.disabled &&
     `
-    background-color: #ccc;
     color: gray;
   `}
-  
 `;
 
-export default function ToolbarButton({ children, onClick, disabled = undefined }) {
+const StyledIconSpan = styled.span`
+  margin-right: 5px;
+  color: ${(props) => (props.disabled ? 'gray' : 'blue')};
+`;
+
+export default function ToolbarButton({ children, onClick, icon = undefined, disabled = undefined }) {
+  const Icon = icon;
   return (
     <ButtonDiv
       onClick={() => {
@@ -42,6 +44,11 @@ export default function ToolbarButton({ children, onClick, disabled = undefined
       }}
       disabled={disabled}
     >
+      {Icon && (
+        <StyledIconSpan disabled={disabled}>
+          <i className={icon} />
+        </StyledIconSpan>
+      )}
       {children}
     </ButtonDiv>
   );