diff --git a/web/pgadmin/static/jsx/history/detail/history_detail_message.jsx b/web/pgadmin/static/jsx/history/detail/history_detail_message.jsx
index 7a379678..8cf077ab 100644
--- a/web/pgadmin/static/jsx/history/detail/history_detail_message.jsx
+++ b/web/pgadmin/static/jsx/history/detail/history_detail_message.jsx
@@ -10,44 +10,17 @@
 import React from 'react';
 
 import Shapes from '../../react_shapes';
-import NonSelectableElementStyle from '../../styles/non_selectable';
-import MessageHeaderStyle from '../../styles/header_label';
-
-const containerStyle = {
-  flex: '2 2 0%',
-  flexDirection: 'column',
-  display: 'flex',
-};
-
-const messageContainerStyle = {
-  flex: '0 1 auto',
-  overflow: 'auto',
-  position: 'relative',
-  height: '100%',
-};
-
-const errorMessageStyle = {
-  border: '0',
-  paddingLeft: '0',
-  backgroundColor: '#ffffff',
-  fontSize: '13px',
-  position: 'absolute',
-};
-
-const messageLabelStyle = _.extend({flex: '0 0 auto'},
-  MessageHeaderStyle,
-  NonSelectableElementStyle);
 
 export default class HistoryDetailMessage extends React.Component {
 
   render() {
     return (
-      <div style={containerStyle}>
-        <div style={messageLabelStyle}>
+      <div className='message'>
+        <div className='message-header'>
           Messages
         </div>
-        <div style={messageContainerStyle}>
-          <pre style={errorMessageStyle}>
+        <div className='content'>
+          <pre className='content-value'>
               {this.props.historyEntry.message}
           </pre>
         </div>
diff --git a/web/pgadmin/static/jsx/history/detail/history_detail_metadata.jsx b/web/pgadmin/static/jsx/history/detail/history_detail_metadata.jsx
index bfe2b53f..3331f152 100644
--- a/web/pgadmin/static/jsx/history/detail/history_detail_metadata.jsx
+++ b/web/pgadmin/static/jsx/history/detail/history_detail_metadata.jsx
@@ -10,18 +10,6 @@
 import React from 'react';
 import moment from 'moment';
 import Shapes from '../../react_shapes';
-import HeaderDescriptionStyle from '../../styles/header_label';
-
-const queryMetaDataStyle = {
-  flex: 1,
-};
-const headerStyle = {
-  display: 'flex',
-};
-const headerValueStyle = {
-  display: 'block',
-  fontSize: '14px',
-};
 
 export default class HistoryDetailMetadata extends React.Component {
 
@@ -30,18 +18,18 @@ export default class HistoryDetailMetadata extends React.Component {
   }
 
   queryMetaData(data, description) {
-    return <div style={queryMetaDataStyle}>
-      <span style={headerValueStyle}>
+    return <div className='item'>
+      <span className='value'>
         {data}
       </span>
-      <span style={HeaderDescriptionStyle}>
+      <span className='description'>
         {description}
       </span>
     </div>;
   }
 
   render() {
-    return <div style={headerStyle}>
+    return <div className='metadata'>
       {this.queryMetaData(this.formatDate(this.props.historyEntry.start_time), 'Date')}
       {this.queryMetaData(this.props.historyEntry.row_affected.toLocaleString(), 'Rows Affected')}
       {this.queryMetaData(this.props.historyEntry.total_time, 'Duration')}
diff --git a/web/pgadmin/static/jsx/history/entry/query_history_error_entry.jsx b/web/pgadmin/static/jsx/history/entry/query_history_error_entry.jsx
deleted file mode 100644
index 5071d1b2..00000000
--- a/web/pgadmin/static/jsx/history/entry/query_history_error_entry.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2017, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-
-import QueryHistoryVanillaEntry from './query_history_vanilla_entry';
-import update from 'immutability-helper';
-import {errorStyle} from '../../styles/history_entry_styles';
-
-export default class QueryHistoryErrorEntry extends QueryHistoryVanillaEntry {
-  componentWillMount() {
-    this.setState({
-      outerDivStyle: update(this.state.outerDivStyle, {$merge: errorStyle}),
-    });
-  }
-}
\ No newline at end of file
diff --git a/web/pgadmin/static/jsx/history/entry/query_history_selected_entry.jsx b/web/pgadmin/static/jsx/history/entry/query_history_selected_entry.jsx
deleted file mode 100644
index 36940456..00000000
--- a/web/pgadmin/static/jsx/history/entry/query_history_selected_entry.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2017, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-
-import QueryHistoryVanillaEntry from './query_history_vanilla_entry';
-import update from 'immutability-helper';
-import {selectedFontStyle, selectedOuterStyle} from '../../styles/history_entry_styles';
-
-export default class QueryHistorySelectedEntry extends QueryHistoryVanillaEntry {
-  componentWillMount() {
-    this.setState({
-      outerDivStyle: update(this.state.outerDivStyle, {$merge: selectedOuterStyle}),
-      secondLineStyle: update(this.state.secondLineStyle, {$merge: selectedFontStyle}),
-    });
-  }
-}
\ No newline at end of file
diff --git a/web/pgadmin/static/jsx/history/entry/query_history_selected_error_entry.jsx b/web/pgadmin/static/jsx/history/entry/query_history_selected_error_entry.jsx
deleted file mode 100644
index 5d73f46b..00000000
--- a/web/pgadmin/static/jsx/history/entry/query_history_selected_error_entry.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2017, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-
-import QueryHistoryVanillaEntry from './query_history_vanilla_entry';
-import update from 'immutability-helper';
-import {selectedFontStyle, selectedOuterStyle, selectedErrorBgColor} from '../../styles/history_entry_styles';
-
-export default class QueryHistorySelectedErrorEntry extends QueryHistoryVanillaEntry {
-  componentWillMount() {
-    let selectedErrorStyle = update(selectedOuterStyle, {$merge: selectedErrorBgColor});
-    this.setState({
-      outerDivStyle: update(this.state.outerDivStyle, {$merge: selectedErrorStyle}),
-      secondLineStyle: update(this.state.secondLineStyle, {$merge: selectedFontStyle}),
-    });
-  }
-}
\ No newline at end of file
diff --git a/web/pgadmin/static/jsx/history/entry/query_history_vanilla_entry.jsx b/web/pgadmin/static/jsx/history/entry/query_history_vanilla_entry.jsx
deleted file mode 100644
index b52a76d1..00000000
--- a/web/pgadmin/static/jsx/history/entry/query_history_vanilla_entry.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2017, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-
-import React from 'react';
-import moment from 'moment';
-import Shapes from '../../react_shapes';
-import {plainOuterDivStyle, plainSecondLineStyle, sqlStyle, timestampStyle} from '../../styles/history_entry_styles';
-
-export default class QueryHistoryVanillaEntry extends React.Component {
-  formatDate(date) {
-    return (moment(date).format('MMM D YYYY [–] HH:mm:ss'));
-  }
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      outerDivStyle: plainOuterDivStyle,
-      secondLineStyle: plainSecondLineStyle,
-    };
-  }
-
-  render() {
-    return (
-      <div style={this.state.outerDivStyle}>
-        <div style={sqlStyle}>
-          {this.props.historyEntry.query}
-        </div>
-        <div style={this.state.secondLineStyle}>
-          <div style={timestampStyle}>
-            {this.formatDate(this.props.historyEntry.start_time)}
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-QueryHistoryVanillaEntry.propTypes = {
-  historyEntry: Shapes.historyDetail,
-  isSelected: React.PropTypes.bool,
-};
\ No newline at end of file
diff --git a/web/pgadmin/static/jsx/history/query_history.jsx b/web/pgadmin/static/jsx/history/query_history.jsx
index 37c7ee7d..0d9222db 100644
--- a/web/pgadmin/static/jsx/history/query_history.jsx
+++ b/web/pgadmin/static/jsx/history/query_history.jsx
@@ -19,9 +19,6 @@ const queryEntryListDivStyle = {
 const queryDetailDivStyle = {
   display: 'flex',
 };
-const liStyle = {
-  borderBottom: '1px solid #cccccc',
-};
 
 export default class QueryHistory extends React.Component {
 
@@ -75,11 +72,11 @@ export default class QueryHistory extends React.Component {
     return (
       <SplitPane defaultSize="50%" split="vertical" pane1Style={queryEntryListDivStyle}
                  pane2Style={queryDetailDivStyle}>
-        <div id='query_list'>
+        <div id='query_list' className="query-history">
           <ul>
             {this.retrieveOrderedHistory()
               .map((entry, index) =>
-                <li key={index} style={liStyle} onClick={this.onClickHandler.bind(this, index)}>
+                <li key={index} className='list-item' onClick={this.onClickHandler.bind(this, index)}>
                   <QueryHistoryEntry historyEntry={entry} isSelected={index == this.state.selectedEntry}/>
                 </li>)
               .value()
diff --git a/web/pgadmin/static/jsx/history/query_history_detail.jsx b/web/pgadmin/static/jsx/history/query_history_detail.jsx
index 254213dd..ec391f6a 100644
--- a/web/pgadmin/static/jsx/history/query_history_detail.jsx
+++ b/web/pgadmin/static/jsx/history/query_history_detail.jsx
@@ -13,54 +13,22 @@ import HistoryDetailQuery from './detail/history_detail_query';
 import HistoryDetailMessage from './detail/history_detail_message';
 import Shapes from '../react_shapes';
 
-const outerStyle = {
-  width: '100%',
-  paddingTop: '10px',
-  display: 'flex',
-  flexDirection: 'column',
-};
-
-const detailVerticalTop = {
-  flex: 1,
-  padding: '0 10px',
-};
-
-const detailVerticalMiddle = {
-  flex: 5,
-  marginLeft: '10px',
-  marginRight: '10px',
-  height: 0,
-  position: 'relative',
-};
-
-const hrStyle = {
-  borderColor: '#cccccc',
-  marginTop: '11px',
-  marginBottom: '8px',
-};
-
-const detailVerticalBottom = {
-  flex: 2,
-  display: 'flex',
-  paddingLeft: '10px',
-};
-
 export default class QueryHistoryDetail extends React.Component {
 
   render() {
     if (!_.isUndefined(this.props.historyEntry)) {
       return (
-        <div id='query_detail' style={outerStyle}>
-          <div style={detailVerticalTop}>
+        <div id='query_detail' className='query-detail'>
+          <div className='metadata-block'>
             <HistoryDetailMetadata {...this.props} />
           </div>
-          <div style={detailVerticalMiddle}>
+          <div className='query-statement-block'>
             <HistoryDetailQuery {...this.props}/>
           </div>
           <div>
-            <hr style={hrStyle}/>
+            <hr className='block-divider'/>
           </div>
-          <div style={detailVerticalBottom}>
+          <div className='message-block'>
             <HistoryDetailMessage {...this.props}/>
           </div>
         </div>);
diff --git a/web/pgadmin/static/jsx/history/query_history_entry.jsx b/web/pgadmin/static/jsx/history/query_history_entry.jsx
index c18ec0a8..f2166081 100644
--- a/web/pgadmin/static/jsx/history/query_history_entry.jsx
+++ b/web/pgadmin/static/jsx/history/query_history_entry.jsx
@@ -9,24 +9,40 @@
 
 import React from 'react';
 import Shapes from '../react_shapes';
-import QueryHistoryErrorEntry from './entry/query_history_error_entry';
-import QueryHistorySelectedErrorEntry from './entry/query_history_selected_error_entry';
-import QueryHistorySelectedEntry from './entry/query_history_selected_entry';
-import QueryHistoryVanillaEntry from './entry/query_history_vanilla_entry';
+import moment from 'moment';
 
 export default class QueryHistoryEntry extends React.Component {
+  formatDate(date) {
+    return (moment(date).format('MMM D YYYY [–] HH:mm:ss'));
+  }
+
+  renderWithClasses(outerDivStyle) {
+    return (
+      <div className={'entry ' + outerDivStyle}>
+        <div className='query'>
+          {this.props.historyEntry.query}
+        </div>
+        <div className='other-info'>
+          <div className='timestamp'>
+            {this.formatDate(this.props.historyEntry.start_time)}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   render() {
     if (this.hasError()) {
       if (this.props.isSelected) {
-        return <QueryHistorySelectedErrorEntry {...this.props}/>;
+        return this.renderWithClasses('error selected');
       } else {
-        return <QueryHistoryErrorEntry {...this.props}/>;
+        return this.renderWithClasses('error');
       }
     } else {
       if (this.props.isSelected) {
-        return <QueryHistorySelectedEntry {...this.props}/>;
+        return this.renderWithClasses('selected');
       } else {
-        return <QueryHistoryVanillaEntry {...this.props}/>;
+        return this.renderWithClasses('');
       }
     }
   }
diff --git a/web/pgadmin/static/jsx/styles/header_label.js b/web/pgadmin/static/jsx/styles/header_label.js
deleted file mode 100644
index 5aaed0a5..00000000
--- a/web/pgadmin/static/jsx/styles/header_label.js
+++ /dev/null
@@ -1,14 +0,0 @@
-//////////////////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2017, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////////////////
-
-export default {
-  display: 'block',
-  fontSize: '12px',
-  color: '#888888',
-};
diff --git a/web/pgadmin/static/jsx/styles/history_entry_styles.js b/web/pgadmin/static/jsx/styles/history_entry_styles.js
deleted file mode 100644
index 5b3a629e..00000000
--- a/web/pgadmin/static/jsx/styles/history_entry_styles.js
+++ /dev/null
@@ -1,57 +0,0 @@
-//////////////////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2017, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////////////////
-
-import update from 'immutability-helper';
-
-export const plainOuterDivStyle = {
-  paddingLeft: '8px',
-  paddingRight: '18px',
-  paddingTop: '-2px',
-  paddingBottom: '-2px',
-  fontFamily: 'monospace',
-  fontSize: '14px',
-  backgroundColor: '#FFF',
-  border: '2px solid transparent',
-  marginLeft: '1px',
-};
-
-export const sqlStyle = {
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-  userSelect: 'auto',
-};
-
-export const plainSecondLineStyle = {
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'space-between',
-  fontSize: '13px',
-  color: '#888888',
-};
-
-export const timestampStyle = {
-  alignSelf: 'flex-start',
-};
-
-export const selectedFontStyle = {
-  color: '#2c76b4',
-  fontWeight: 'bold',
-};
-
-export const selectedOuterStyle = update(selectedFontStyle, {
-  $merge: {
-    border: '2px solid #2c76b4',
-    backgroundColor: '#e7f2ff',
-  },
-});
-
-export const errorStyle = {backgroundColor: '#F7D0D5'};
-
-export const selectedErrorBgColor = {backgroundColor: '#DCC4D1'};
\ No newline at end of file
diff --git a/web/pgadmin/static/jsx/styles/non_selectable.js b/web/pgadmin/static/jsx/styles/non_selectable.js
deleted file mode 100644
index 065fe60f..00000000
--- a/web/pgadmin/static/jsx/styles/non_selectable.js
+++ /dev/null
@@ -1,18 +0,0 @@
-//////////////////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2017, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////////////////
-
-export default {
-  WebkitTouchCallout: 'none',
-  WebkitUserSelect: 'none',
-  KhtmlUserSelect: 'none',
-  MozUserSelect: 'none',
-  msUserSelect: 'none',
-  userSelect: 'none',
-  cursor: 'default',
-};
diff --git a/web/pgadmin/static/scss/_othercolors.scss b/web/pgadmin/static/scss/_othercolors.scss
index 92cfe5af..9c5c3574 100644
--- a/web/pgadmin/static/scss/_othercolors.scss
+++ b/web/pgadmin/static/scss/_othercolors.scss
@@ -79,6 +79,10 @@ These colors should be used to highlight hover options in dropdown menus and cat
   width: 100%;
 }
 
+.bg-white-1 {
+  background-color: #ffffff;
+}
+
 .bg-blue-1 {
   background-color: #e7f2ff;
 }
diff --git a/web/pgadmin/static/scss/pgadmin.scss b/web/pgadmin/static/scss/pgadmin.scss
index e9992418..6695445c 100644
--- a/web/pgadmin/static/scss/pgadmin.scss
+++ b/web/pgadmin/static/scss/pgadmin.scss
@@ -1,6 +1,12 @@
 $enable-flex: false;
 
 @import 'alert';
+@import 'primaryblue';
+@import 'colorsgrey';
 @import 'othercolors';
 @import 'typography';
+
+@import 'utils';
+
 @import 'alertify.overrides';
+@import 'sqleditor/history';
diff --git a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
index b1b75727..a9c2e168 100644
--- a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
+++ b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
@@ -118,6 +118,7 @@
 .sql-editor-history-container {
   height: 100%;
   overflow: auto;
+  border-top: 1px solid #cccccc;
 }
 
 .sql-status-cell {
diff --git a/web/regression/javascript/history/query_history_spec.jsx b/web/regression/javascript/history/query_history_spec.jsx
index ef61d1ce..c39b9a1e 100644
--- a/web/regression/javascript/history/query_history_spec.jsx
+++ b/web/regression/javascript/history/query_history_spec.jsx
@@ -94,12 +94,13 @@ describe('QueryHistory', () => {
 
         it('renders the most recent query as selected', () => {
           expect(foundChildren.at(0).nodes.length).toBe(1);
-          expect(foundChildren.at(0).find('QueryHistorySelectedEntry').length).toBe(1);
+          expect(foundChildren.at(0).hasClass('selected')).toBeTruthy();
         });
 
         it('renders the older query as not selected', () => {
           expect(foundChildren.at(1).nodes.length).toBe(1);
-          expect(foundChildren.at(1).find('QueryHistoryErrorEntry').length).toBe(1);
+          expect(foundChildren.at(1).hasClass('selected')).toBeFalsy();
+          expect(foundChildren.at(1).hasClass('error')).toBeTruthy();
         });
       });
 
@@ -143,12 +144,14 @@ describe('QueryHistory', () => {
 
         it('renders the most recent query as selected in the left pane', () => {
           expect(foundChildren.at(0).nodes.length).toBe(1);
-          expect(foundChildren.at(0).find('QueryHistoryVanillaEntry').length).toBe(1);
+          expect(foundChildren.at(0).hasClass('selected')).toBeFalsy();
+          expect(foundChildren.at(0).hasClass('error')).toBeFalsy();
         });
 
         it('renders the older query as selected in the left pane', () => {
           expect(foundChildren.at(1).nodes.length).toBe(1);
-          expect(foundChildren.at(1).find('QueryHistorySelectedErrorEntry').length).toBe(1);
+          expect(foundChildren.at(1).hasClass('selected')).toBeTruthy();
+          expect(foundChildren.at(1).hasClass('error')).toBeTruthy();
         });
       });