diff --git a/cypress/e2e/Settings/settings.spec.js b/cypress/e2e/Settings/settings.spec.js
index dbcca15f..cbd8cd96 100644
--- a/cypress/e2e/Settings/settings.spec.js
+++ b/cypress/e2e/Settings/settings.spec.js
@@ -14,6 +14,7 @@ import {
   updateMaxRateLimit,
   updateAutoAcceptIncidentQuery,
   updateAutoRefreshInterval,
+  updateDarkMode,
   manageIncidentTableColumns,
   manageCustomAlertColumnDefinitions,
   activateButton,
@@ -193,4 +194,16 @@ describe('Manage Settings', { failFast: { enabled: false } }, () => {
     cy.get('.btn').contains('Clear Local Cache').click();
     cy.get('.modal-title').contains('Disclaimer & License').should('be.visible');
   });
+  
+  it('Update dark mode', () => {
+    [true, false].forEach((darkMode) => {
+      updateDarkMode(darkMode);
+      cy.window()
+        .its('store')
+        .invoke('getState')
+        .then((state) => expect(
+          state.settings.darkMode,
+        ).to.equal(darkMode));
+    });
+  });
 });
diff --git a/cypress/support/util/common.js b/cypress/support/util/common.js
index b683b5b7..c8bff941 100644
--- a/cypress/support/util/common.js
+++ b/cypress/support/util/common.js
@@ -305,6 +305,22 @@ export const updateAutoAcceptIncidentQuery = (autoAcceptIncidentsQuery = false)
   cy.get('.close').click();
 };
 
+export const updateDarkMode = (darkMode = false) => {
+  cy.get('.settings-panel-dropdown').click();
+  cy.get('.dropdown-item').contains('Settings').click();
+  cy.get('.nav-item').contains('User Profile').click();
+
+  if (darkMode) {
+    cy.get('#user-profile-dark-mode-checkbox').check({ force: true });
+  } else {
+    cy.get('#user-profile-dark-mode-checkbox').uncheck({ force: true });
+  }
+
+  cy.get('.btn').contains('Update User Profile').click();
+  checkActionAlertsModalContent('Updated user profile settings');
+  cy.get('.close').click();
+};
+
 export const priorityNames = ['--', 'P5', 'P4', 'P3', 'P2', 'P1'];
 
 /*
diff --git a/src/App.js b/src/App.js
index 9cbbee7c..4bafb02e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -97,6 +97,14 @@ const App = ({
 }) => {
   // Verify if session token is present
   const token = sessionStorage.getItem('pd_access_token');
+  const {
+    autoRefreshInterval, darkMode,
+  } = state.settings;
+
+  if (darkMode) {
+    document.body.classList.add('dark-mode');
+  }
+
   if (!token) {
     return (
       <div className="App">
@@ -109,9 +117,6 @@ const App = ({
   const {
     userAuthorized, userAcceptedDisclaimer, currentUserLocale,
   } = state.users;
-  const {
-    autoRefreshInterval,
-  } = state.settings;
   const {
     fetchingIncidents,
     fetchingIncidentNotes,
diff --git a/src/App.scss b/src/App.scss
index a5c82ee1..87d4429d 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -5,12 +5,22 @@ body {
   background-color: $pd-brand-background !important;
 }
 
+body.dark-mode {
+  background-color: $pd-brand-gray-dark !important;
+}
+
 .btn-outline-secondary {
   color: $pd-brand-black;
   background-color: $pd-brand-white;
   border-color: $pd-brand-secondary-light;
 }
 
+body.dark-mode .btn-outline-secondary {
+  color: $pd-white;
+  background-color: $pd-brand-gray-dark;
+  border-color: $pd-brand-secondary-light;
+}
+
 .btn-outline-secondary:disabled {
   color: $pd-brand-secondary-light !important;
 }
@@ -26,6 +36,10 @@ body {
   background-color: unset !important;
 }
 
+body.dark-mode .btn-outline-secondary:not(:disabled):not(.disabled).active {
+  background-color: $pd-brand-gray-light !important;
+}
+
 .btn-outline-dark {
   color: $pd-brand-gray-dark;
   background-color: $pd-white;
@@ -59,3 +73,54 @@ body {
 .modal-footer {
   display: unset !important;
 }
+
+body.dark-mode a {
+  color: $pd-brand-white;
+}
+
+body.dark-mode .modal-content {
+  background-color: $pd-brand-black !important;
+  color: $pd-white !important;
+}
+
+body.dark-mode .modal-title {
+  color: $pd-brand-white !important;
+}
+
+body.dark-mode .modal-header .close {
+  color: $pd-brand-white !important;
+}
+
+body.dark-mode .form-label, body.dark-mode .form-text {
+  color: $pd-brand-white !important;
+}
+
+body.dark-mode .form-control {
+  background-color: $pd-brand-gray-dark !important;
+  color: $pd-white;
+}
+
+body.dark-mode div.react-select__control, body.dark-mode div.react-select__menu {
+  background-color: $pd-brand-gray-dark !important;
+  color: $pd-brand-white !important;
+}
+
+body.dark-mode div.react-select__multi-value {
+  background-color: $pd-brand-gray-light !important;
+  color: $pd-brand-white !important;
+}
+
+body.dark-mode div.react-select__single-value {
+  color: $pd-brand-white !important;
+}
+
+body.dark-mode div.react-select__option:hover {
+  background-color: $pd-brand-secondary-light !important;
+  color: $pd-brand-white !important;
+}
+
+body.dark-mode div.react-select__option--is-focused {
+  background-color: $pd-brand-secondary-light !important;
+  color: $pd-brand-white !important;
+}
+
diff --git a/src/assets/images/pd_logo_white.svg b/src/assets/images/pd_logo_white.svg
new file mode 100644
index 00000000..1394a06d
--- /dev/null
+++ b/src/assets/images/pd_logo_white.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 974.8 200" style="enable-background:new 0 0 974.8 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M950.5,41.9l-22,62.4c-4,11.2-6,17.6-9.7,28.4h-0.4c-2.9-9.3-5.5-16.8-9.3-27.8l-21.4-63.1h-25.6l44.3,115.8
+		c-1,2.5-2,5.1-3.1,7.8c-3.7,9-12.5,14.9-22.2,14.9l-11,0V200h11.3c18.3,0,34.8-11.1,41.6-28.2c14.1-35.3,38.1-95.4,51.8-129.9
+		H950.5z"/>
+	<path class="st0" d="M336.2,135.4c0,41.9-19.2,64.6-58,64.6c-28.9,0-46.3-15.2-52.5-38.1h23.4c4,10.6,12.3,20.1,29.5,20.1
+		c26.5,0,35.9-16.5,35.9-47.9c-0.2,0-0.2-0.2-0.4-0.2c-5.7,9.9-18.5,18.7-38.8,18.7c-32.6,0-53.4-23.6-53.4-56.7
+		c0-34.4,22.5-57.6,53.6-57.6c20.1,0,32.2,8.6,38.8,18.1c-0.2-2.4-0.2-4.9-0.2-7.3v-7.3h22.1V135.4z M246.2,95.7
+		c0,22.5,12.6,38.6,34.2,38.6c19.4,0,34.4-13.7,34.4-39.3c0-22.7-13.2-37.9-34.4-37.9S246.2,72.3,246.2,95.7z"/>
+	<path class="st0" d="M372.7,105.6c0.9,20.3,13.9,36.4,36.4,36.4c15.9,0,23.6-7.5,29.5-17.4h22.3c-6.6,20.9-24.9,35.9-52.7,35.9
+		c-35.7,0-58-24-58-60.2c0-36.2,23.2-61.7,58-61.7c37.7,0,55.1,28.7,55.1,59.8v7.3H372.7z M440.1,88c-2-18.3-13.5-31.3-32.4-31.3
+		c-18.1,0-32,11.9-34.2,31.3H440.1z"/>
+	<path class="st0" d="M499,41.9v14.8c3.7-10.8,15-17.6,28-17.6c2.9,0,4.2,0.2,5.7,0.4v20.3c-2-0.4-5.3-0.7-7.7-0.7
+		c-20.9,0-24.9,15.4-24.9,38.6v60h-22.3v-95c0-7.3,0-13.7-0.2-20.7H499z"/>
+	<path class="st0" d="M761.7,141.1c-6,9.9-17.2,19.4-36.8,19.4c-26.9,0-40.1-16.5-40.1-46.5V41.9H707v63.7
+		c0,22.7,7.5,36.4,25.6,36.4c23.8,0,28-21.6,28-47V41.9h22.3v98.3c0,6,0,11.7,0.2,17.4h-21.4V141.1z"/>
+	<path class="st0" d="M833,41.9h21.6v17.2H833v69.5c0,11,5.5,14.3,14.1,14.3c1.5,0,4.2-0.2,5.5-0.4V159c-3.3,0.4-5.7,0.9-8.6,0.9
+		c-20.5,0-33.5-6.8-33.5-30V59.1h-17.4V41.9h17.4V10.6H833V41.9z"/>
+	<g>
+		<rect y="115.6" class="st0" width="23.1" height="42"/>
+		<path class="st0" d="M87,7.7C74.6,1.1,66,0,45.7,0H0v95.6h23.1h3h19.4c18.1,0,31.6-1.1,43.5-9c13-8.6,19.7-22.9,19.7-39.4
+			C108.7,29.3,100.4,15,87,7.7z M50.8,75.6H23.1V20.5l26.1-0.2C73,20,84.9,28.4,84.9,47.4C84.9,67.8,70.2,75.6,50.8,75.6z"/>
+	</g>
+	<path class="st0" d="M546.3,0h38.6c57.8,0.4,85.6,28.6,85.8,79.2c0.2,43.1-22.1,77.9-82,78.5l-42.3,0V0z M569.7,138l13.5,0
+		c41.9,0,63.8-16,63.8-58.9c-0.1-37.7-21.8-59.3-61.6-59.3c-7.7,0-15.7,0.2-15.7,0.2V138z"/>
+	<path class="st0" d="M189.7,157.7c-0.7-4.6-0.7-7.5-1.1-15.9c-8.8,12.6-20.5,18.1-39,18.1c-24.3,0-41.9-11.9-41.9-33.5
+		c0-24.9,23.8-33.1,54.7-37.3c7.7-1.1,16.3-2,23.8-2.6c0-22.9-12.7-29.8-26-29.8s-23,9.3-23,21.5h-21.6c0-23.5,18.5-39.3,45.1-39.3
+		s47.1,11,47.1,53.4v22.5c0,18.7,0.9,32.4,2.9,43H189.7z M131.7,126.1c0,10.8,8.8,17.6,22.9,17.6c20.7,0,31.8-12.6,31.8-35.1
+		c0-2.9,0-4.9,0.2-6.2C148.9,106.3,131.7,110,131.7,126.1z"/>
+</g>
+</svg>
diff --git a/src/components/AddResponderModal/AddResponderModalComponent.js b/src/components/AddResponderModal/AddResponderModalComponent.js
index 21dc4fc1..9c571c76 100644
--- a/src/components/AddResponderModal/AddResponderModalComponent.js
+++ b/src/components/AddResponderModal/AddResponderModalComponent.js
@@ -86,6 +86,7 @@ const AddResponderModalComponent = ({
               <Form.Label>{t('Responders')}</Form.Label>
               <Select
                 id="add-responders-select"
+                classNamePrefix="react-select"
                 onChange={(selectedTargets) => {
                   setResponderRequestTargets(selectedTargets);
                 }}
diff --git a/src/components/Auth/AuthComponent.scss b/src/components/Auth/AuthComponent.scss
index 8118c290..9900168e 100644
--- a/src/components/Auth/AuthComponent.scss
+++ b/src/components/Auth/AuthComponent.scss
@@ -13,6 +13,13 @@
   background-color: $pd-white;
 }
 
+body.dark-mode #pd-login-form {
+  border: 1px solid $pd-dark;
+  box-shadow: 0px 0px 10px 1px $pd-dark;
+  background-color: $pd-gray;
+  color: $pd-white;
+}
+
 #pd-login-logo {
   display: block;
   text-indent: -9999px;
diff --git a/src/components/GlobalSearch/GlobalSearchComponent.scss b/src/components/GlobalSearch/GlobalSearchComponent.scss
index cfac2daa..0f9096f9 100644
--- a/src/components/GlobalSearch/GlobalSearchComponent.scss
+++ b/src/components/GlobalSearch/GlobalSearchComponent.scss
@@ -1,5 +1,11 @@
+@import 'assets/styles/pagerduty.scss';
+
 .global-search-ctr {
   position: relative;
   padding-right: 10px;
   top: 6px;
 }
+
+body.dark-mode .global-search-ctr .input-group-text {
+  background-color: $pd-brand-secondary-light !important;
+}
diff --git a/src/components/IncidentActions/IncidentActionsComponent.js b/src/components/IncidentActions/IncidentActionsComponent.js
index e6a17e41..cfc32fc9 100644
--- a/src/components/IncidentActions/IncidentActionsComponent.js
+++ b/src/components/IncidentActions/IncidentActionsComponent.js
@@ -100,6 +100,7 @@ const IncidentActionsComponent = ({
   runCustomIncidentAction,
   runResponsePlayAsync,
   syncWithExternalSystem,
+  settings,
 }) => {
   const {
     t,
@@ -112,6 +113,9 @@ const IncidentActionsComponent = ({
     ACKNOWLEDGED,
   ]);
   const highUrgencyIncidents = filterIncidentsByField(selectedRows, 'urgency', [HIGH]);
+  const {
+    darkMode,
+  } = settings;
 
   // Determine ability of each button based on selected items
   const selectedIncident = selectedCount === 1 ? selectedRows[0] : null;
@@ -216,6 +220,9 @@ const IncidentActionsComponent = ({
     setExternalSystems(tempExternalSystems);
   }, [displayRunActions, selectedIncident]);
 
+  // Const for theme based on dark mode
+  const theme = darkMode ? 'dark' : 'light';
+
   return (
     <div>
       <Container className="incident-actions-ctr" id="incident-actions-ctr" fluid>
@@ -227,7 +234,7 @@ const IncidentActionsComponent = ({
             <Button
               id="incident-action-acknowledge-button"
               className="action-button"
-              variant={enableActions ? 'outline-secondary' : 'light'}
+              variant={enableActions ? 'outline-secondary' : theme}
               onClick={() => acknowledge(selectedRows)}
               disabled={enableActions}
             >
@@ -240,7 +247,7 @@ const IncidentActionsComponent = ({
               id="incident-action-escalate-button"
               as={ButtonGroup}
               className="action-button"
-              variant={enableEscalationAction ? 'outline-secondary' : 'light'}
+              variant={enableEscalationAction ? 'outline-secondary' : theme}
               drop="up"
               title={(
                 <>
@@ -272,7 +279,7 @@ const IncidentActionsComponent = ({
             <Button
               id="incident-action-reassign-button"
               className="action-button"
-              variant={enableActions ? 'outline-secondary' : 'light'}
+              variant={enableActions ? 'outline-secondary' : theme}
               onClick={() => toggleDisplayReassignModal()}
               disabled={enableActions}
             >
@@ -284,7 +291,7 @@ const IncidentActionsComponent = ({
             <Button
               id="incident-action-add-responders-button"
               className="action-button"
-              variant={enableActions ? 'outline-secondary' : 'light'}
+              variant={enableActions ? 'outline-secondary' : theme}
               onClick={() => toggleDisplayAddResponderModal()}
               disabled={enableActions}
             >
@@ -297,7 +304,7 @@ const IncidentActionsComponent = ({
               id="incident-action-snooze-button"
               as={ButtonGroup}
               className="action-button"
-              variant={enableActions ? 'outline-secondary' : 'light'}
+              variant={enableActions ? 'outline-secondary' : theme}
               drop="up"
               title={(
                 <>
@@ -331,7 +338,7 @@ const IncidentActionsComponent = ({
             <Button
               id="incident-action-merge-button"
               className="action-button"
-              variant={enableMergeAction ? 'outline-secondary' : 'light'}
+              variant={enableMergeAction ? 'outline-secondary' : theme}
               onClick={() => toggleDisplayMergeModal()}
               disabled={enableMergeAction}
             >
@@ -343,7 +350,7 @@ const IncidentActionsComponent = ({
             <Button
               id="incident-action-resolve-button"
               className="action-button"
-              variant={enableActions ? 'outline-secondary' : 'light'}
+              variant={enableActions ? 'outline-secondary' : theme}
               disabled={enableActions}
               onClick={() => resolve(selectedRows)}
             >
@@ -358,7 +365,7 @@ const IncidentActionsComponent = ({
               id="incident-action-update-priority-button"
               as={ButtonGroup}
               className="action-button"
-              variant={enablePriorityAction ? 'outline-secondary' : 'light'}
+              variant={enablePriorityAction ? 'outline-secondary' : theme}
               drop="up"
               title={(
                 <>
@@ -393,7 +400,7 @@ const IncidentActionsComponent = ({
             <Button
               id="incident-action-add-note-button"
               className="action-button"
-              variant={enablePostActions ? 'outline-secondary' : 'light'}
+              variant={enablePostActions ? 'outline-secondary' : theme}
               onClick={() => toggleDisplayAddNoteModal()}
               disabled={enablePostActions}
             >
@@ -406,7 +413,7 @@ const IncidentActionsComponent = ({
               id="incident-action-run-action-button"
               as={ButtonGroup}
               className="action-button"
-              variant={enablePostSingularAction ? 'outline-secondary' : 'light'}
+              variant={enablePostSingularAction ? 'outline-secondary' : theme}
               drop="up"
               title={(
                 <>
@@ -431,6 +438,7 @@ const IncidentActionsComponent = ({
                   <Dropdown.Item>
                     <Select
                       id="response-play-select"
+                      classNamePrefix="react-select"
                       className="response-play-dropdown"
                       menuPlacement="top"
                       components={animatedComponents}
@@ -502,6 +510,7 @@ const mapStateToProps = (state) => ({
   escalationPolicies: state.escalationPolicies.escalationPolicies,
   extensions: state.extensions,
   responsePlays: state.responsePlays.responsePlays,
+  settings: state.settings,
 });
 
 const mapDispatchToProps = (dispatch) => ({
diff --git a/src/components/IncidentActions/IncidentActionsComponent.scss b/src/components/IncidentActions/IncidentActionsComponent.scss
index 521dcc3f..2c2da7c9 100644
--- a/src/components/IncidentActions/IncidentActionsComponent.scss
+++ b/src/components/IncidentActions/IncidentActionsComponent.scss
@@ -11,6 +11,11 @@
   background-color: $pd-white;
 }
 
+body.dark-mode .incident-actions-ctr {
+  background-color: $pd-brand-gray-dark;
+  color: $pd-brand-white;
+}
+
 .action-button {
   margin-right: 10px;
 }
diff --git a/src/components/IncidentActions/IncidentActionsComponent.test.js b/src/components/IncidentActions/IncidentActionsComponent.test.js
index 29bc14e0..42508ef9 100644
--- a/src/components/IncidentActions/IncidentActionsComponent.test.js
+++ b/src/components/IncidentActions/IncidentActionsComponent.test.js
@@ -41,6 +41,9 @@ describe('IncidentActionsComponent', () => {
       serviceExtensionMap: {},
     },
     responsePlays: { responsePlays: [] },
+    settings: {
+      darkMode: false,
+    },
   };
 
   const tempStoreMap = { ...baseStoreMap };
diff --git a/src/components/IncidentTable/IncidentTableComponent.scss b/src/components/IncidentTable/IncidentTableComponent.scss
index 04957596..c997ce5b 100644
--- a/src/components/IncidentTable/IncidentTableComponent.scss
+++ b/src/components/IncidentTable/IncidentTableComponent.scss
@@ -7,6 +7,10 @@
   top: 5px;
 }
 
+body.dark-mode .querying-incidents {
+  color: $pd-brand-gray-light;
+}
+
 /* Empty Incidents */
 .empty-incidents {
   height: 500px;
@@ -17,6 +21,10 @@
   padding-top: 20px;
 }
 
+body.dark-mode .empty-incidents-badge {
+  color: $pd-brand-gray-light;
+}
+
 /* Table Positioning */
 .incident-table {
   margin-top: 10px;
@@ -142,6 +150,11 @@
   border-right: 1px $pd-brand-background-3 solid;
 }
 
+body.dark-mode .th {
+  background-color: $pd-gray;
+  color: $pd-white;
+}
+
 .th-sorted {
   padding: 10px !important;
   background-color: white;
@@ -150,6 +163,11 @@
   border-right: 1px $pd-brand-background-3 solid;
 }
 
+body.dark-mode .th-sorted {
+  background-color: $pd-brand-secondary-dark;
+  color: $pd-white;
+}
+
 .resizer {
   display: inline-block;
   width: 2px;
@@ -175,16 +193,32 @@
   background-color: $pd-brand-background-2 !important;
 }
 
+body.dark-mode .tr {
+  background-color: $pd-gray !important;
+  color: $pd-white;
+}
+
 .tr-odd {
   font-size: 14px;
   background-color: $pd-brand-background-3 !important;
 }
 
+body.dark-mode .tr-odd {
+  background-color: $pd-gray-dark !important;
+  color: $pd-white;
+}
+
 .tr:hover,
 .tr-odd:hover {
   background-color: $pd-gray-medium !important;
 }
 
+body.dark-mode .tr:hover,
+body.dark-mode .tr-odd:hover {
+  background-color: $pd-brand-secondary-light !important;
+  color: $pd-white;
+}
+
 .td {
   padding: 10px !important;
   padding-left: 10px !important;
diff --git a/src/components/MergeModal/MergeModalComponent.js b/src/components/MergeModal/MergeModalComponent.js
index 2652053d..ad0dcbe4 100644
--- a/src/components/MergeModal/MergeModalComponent.js
+++ b/src/components/MergeModal/MergeModalComponent.js
@@ -93,6 +93,7 @@ const MergeModalComponent = ({
               </Form.Label>
               <Select
                 id="merge-select"
+                classNamePrefix="react-select"
                 onChange={(selectedIncident) => {
                   if (selectedIncident) {
                     setTargetIncident(selectedIncident);
diff --git a/src/components/NavigationBar/NavigationBarComponent.js b/src/components/NavigationBar/NavigationBarComponent.js
index b2803349..b0d06401 100644
--- a/src/components/NavigationBar/NavigationBarComponent.js
+++ b/src/components/NavigationBar/NavigationBarComponent.js
@@ -38,13 +38,17 @@ const NavigationBarComponent = ({
   userAcceptDisclaimer,
   userUnauthorize,
   stopMonitoring,
+  settings,
 }) => {
   const {
     t,
   } = useTranslation();
+  const {
+    darkMode,
+  } = settings;
   return (
     <div className="navbar-ctr">
-      <Navbar bg="light" variant="light">
+      <Navbar bg={darkMode ? 'dark' : 'light'} variant={darkMode ? 'dark' : 'light'}>
         <Navbar.Brand className="nav-bar-logo-ctr">
           <div className="nav-bar-logo-black" href="/" alt="PagerDuty home page">
             PagerDuty
@@ -111,6 +115,7 @@ const NavigationBarComponent = ({
 };
 const mapStateToProps = (state) => ({
   displayQuerySettings: state.querySettings.displayQuerySettings,
+  settings: state.settings,
 });
 
 const mapDispatchToProps = (dispatch) => ({
diff --git a/src/components/NavigationBar/NavigationBarComponent.scss b/src/components/NavigationBar/NavigationBarComponent.scss
index 882180d8..95bfee68 100644
--- a/src/components/NavigationBar/NavigationBarComponent.scss
+++ b/src/components/NavigationBar/NavigationBarComponent.scss
@@ -22,6 +22,11 @@
   top: 4px;
 }
 
+body.dark-mode .nav-bar-logo-black {
+  background-image: url('/assets/images/pd_logo_white.svg');
+  background-color: unset;
+}
+
 .settings-panel-icon {
   background-image: url('https://secure.gravatar.com/avatar/0ee453ea32f9f9702c809b4680237b50.png?d=mm&amp;r=PG');
   background-repeat: no-repeat;
@@ -63,3 +68,15 @@ a.dropdown-toggle.nav-link::after {
   color: $pd-green !important;
   font-weight: 900 !important;
 }
+
+body.dark-mode .version-info {
+  color: $pd-teal !important;
+}
+
+body.dark-mode div.dropdown-menu {
+  background-color: $pd-brand-gray-dark !important;
+}
+
+body.dark-mode div.dropdown-menu a.dropdown-item:hover {
+  background-color: $pd-brand-secondary-light !important;
+}
diff --git a/src/components/QuerySettings/QuerySettingsComponent.js b/src/components/QuerySettings/QuerySettingsComponent.js
index b8146121..1d941b7c 100644
--- a/src/components/QuerySettings/QuerySettingsComponent.js
+++ b/src/components/QuerySettings/QuerySettingsComponent.js
@@ -116,7 +116,7 @@ const QuerySettingsComponent = ({
     currentUserLocale, users: userList,
   } = users;
   const {
-    defaultSinceDateTenor,
+    defaultSinceDateTenor, darkMode,
   } = settings;
   const eventKey = displayQuerySettings ? '0' : '1';
 
@@ -185,7 +185,14 @@ const QuerySettingsComponent = ({
     <div className="query-settings-ctr" id="query-settings-ctr">
       <Accordion defaultActiveKey="0">
         <Accordion.Collapse id="query-settings-accordion" eventKey={eventKey}>
-          <Container className="card bg-light query-settings-inner-ctr" fluid>
+          <Container
+            className={
+              darkMode
+                ? 'card bg-dark query-settings-inner-ctr'
+                : 'card bg-light query-settings-inner-ctr'
+            }
+            fluid
+          >
             <Row>
               <Col xs="auto">
                 {t('Since')}
@@ -311,6 +318,7 @@ const QuerySettingsComponent = ({
                 <Form.Group>
                   <Select
                     id="query-team-select"
+                    classNamePrefix="react-select"
                     styles={reactSelectStyle}
                     onChange={(selectedTeams) => {
                       const teamIdsInt = selectedTeams.map((team) => team.value);
@@ -333,6 +341,7 @@ const QuerySettingsComponent = ({
                 <Form.Group>
                   <Select
                     id="query-user-select"
+                    classNamePrefix="react-select"
                     styles={reactSelectStyle}
                     onChange={(selectedUsers) => {
                       const userIdsInt = selectedUsers.map((user) => user.value);
@@ -353,6 +362,7 @@ const QuerySettingsComponent = ({
                 <Form.Group>
                   <Select
                     id="query-escalation-policy-select"
+                    classNamePrefix="react-select"
                     styles={reactSelectStyle}
                     onChange={(selectedEscalationPolicies) => {
                       const escalationPolicyIdsInt = selectedEscalationPolicies.map(
@@ -375,6 +385,7 @@ const QuerySettingsComponent = ({
                 <Form.Group>
                   <Select
                     id="query-service-select"
+                    classNamePrefix="react-select"
                     styles={reactSelectStyle}
                     onChange={(selectedServices) => {
                       const serviceIdsInt = selectedServices.map((service) => service.value);
diff --git a/src/components/QuerySettings/QuerySettingsComponent.scss b/src/components/QuerySettings/QuerySettingsComponent.scss
index 16455749..ab1fe876 100644
--- a/src/components/QuerySettings/QuerySettingsComponent.scss
+++ b/src/components/QuerySettings/QuerySettingsComponent.scss
@@ -6,6 +6,10 @@
   margin-top: 10px;
 }
 
+body.dark-mode .query-settings-inner-ctr {
+  color: $pd-white;
+}
+
 .date-picker {
   width: 120px;
   padding: 0.375rem 0.75rem;
@@ -19,6 +23,20 @@
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
+body.dark-mode .date-picker {
+  background-color: $pd-brand-gray-dark !important;
+  color: $pd-white !important;
+}
+
 .react-datepicker-popper {
   z-index: 2 !important;
 }
+
+body.dark-mode .react-datepicker {
+  background-color: $pd-brand-gray-light !important;
+}
+
+body.dark-mode .react-datepicker__header {
+  background-color: $pd-brand-gray-light !important;
+  color: $pd-white !important;
+}
diff --git a/src/components/ReassignModal/ReassignModalComponent.js b/src/components/ReassignModal/ReassignModalComponent.js
index 647d6bca..235647be 100644
--- a/src/components/ReassignModal/ReassignModalComponent.js
+++ b/src/components/ReassignModal/ReassignModalComponent.js
@@ -77,6 +77,7 @@ const ReassignModalComponent = ({
           <Form>
             <Select
               id="reassign-select"
+              classNamePrefix="react-select"
               onChange={(selectedAssignment) => {
                 setAssignment(selectedAssignment);
               }}
diff --git a/src/components/SettingsModal/SettingsModalComponent.js b/src/components/SettingsModal/SettingsModalComponent.js
index 73ce86e2..5884c52b 100644
--- a/src/components/SettingsModal/SettingsModalComponent.js
+++ b/src/components/SettingsModal/SettingsModalComponent.js
@@ -39,6 +39,7 @@ import {
   setAutoAcceptIncidentsQuery as setAutoAcceptIncidentsQueryConnected,
   setAutoRefreshInterval as setAutoRefreshIntervalConnected,
   clearLocalCache as clearLocalCacheConnected,
+  setDarkMode as setDarkModeConnected,
 } from 'redux/settings/actions';
 
 import {
@@ -100,6 +101,7 @@ const SettingsModalComponent = ({
   setMaxRateLimit,
   setAutoAcceptIncidentsQuery,
   setAutoRefreshInterval,
+  setDarkMode,
   clearLocalCache,
   updateActionAlertsModal,
   toggleDisplayActionAlertsModal,
@@ -115,6 +117,7 @@ const SettingsModalComponent = ({
     autoAcceptIncidentsQuery,
     autoRefreshInterval,
     alertCustomDetailFields,
+    darkMode,
   } = settings;
   const {
     incidentTableColumns,
@@ -173,6 +176,8 @@ const SettingsModalComponent = ({
 
   const [tempAutoAcceptQuery, setTempAutoAcceptQuery] = useState(autoAcceptIncidentsQuery);
 
+  const [tempDarkMode, setTempDarkMode] = useState(darkMode);
+
   const [selectedColumns, setSelectedColumns] = useState(
     incidentTableColumns.map((column) => {
       // Recreate original value used from react-select in order to populate dual list
@@ -253,6 +258,7 @@ const SettingsModalComponent = ({
                   <Col xs={6}>
                     <Select
                       id="user-locale-select"
+                      classNamePrefix="react-select"
                       styles={reactSelectStyle}
                       options={selectLocales}
                       value={selectedLocale}
@@ -347,6 +353,19 @@ const SettingsModalComponent = ({
                     />
                   </Col>
                 </Form.Group>
+                <Form.Group as={Row}>
+                  <Form.Label id="user-profile-dark-mode-label" column sm={2}>
+                    {t('Dark Mode')}
+                  </Form.Label>
+                  <Col xs={6}>
+                    <Form.Check
+                      id="user-profile-dark-mode-checkbox"
+                      type="checkbox"
+                      checked={tempDarkMode}
+                      onChange={(e) => setTempDarkMode(e.target.checked)}
+                    />
+                  </Col>
+                </Form.Group>
               </Form>
               <br />
               <Button
@@ -369,6 +388,9 @@ const SettingsModalComponent = ({
                   setMaxRateLimit(tempMaxRateLimit);
                   setAutoAcceptIncidentsQuery(tempAutoAcceptQuery);
                   setAutoRefreshInterval(tempAutoRefreshInterval);
+                  setDarkMode(tempDarkMode);
+                  if (tempDarkMode) document.body.className = 'dark-mode';
+                  else document.body.className = '';
                   updateActionAlertsModal('success', t('Updated user profile settings'));
                   toggleDisplayActionAlertsModal();
                 }}
@@ -415,6 +437,7 @@ const SettingsModalComponent = ({
                 <h4>{t('Alert Custom Detail Column Definitions')}</h4>
                 <CreatableSelect
                   id="alert-column-definition-select"
+                  classNamePrefix="react-select"
                   isMulti
                   isClearable
                   placeholder={t('Alert Custom Detail Column Definitions Placeholder')}
@@ -491,6 +514,9 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(updateActionAlertsModalConnected(actionAlertsModalType, actionAlertsModalMessage));
   },
   toggleDisplayActionAlertsModal: () => dispatch(toggleDisplayActionAlertsModalConnected()),
+  setDarkMode: (darkMode) => {
+    dispatch(setDarkModeConnected(darkMode));
+  },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(SettingsModalComponent);
diff --git a/src/components/SettingsModal/SettingsModalComponent.scss b/src/components/SettingsModal/SettingsModalComponent.scss
index e2a692ac..2a977847 100644
--- a/src/components/SettingsModal/SettingsModalComponent.scss
+++ b/src/components/SettingsModal/SettingsModalComponent.scss
@@ -1,10 +1,12 @@
+@import 'assets/styles/pagerduty.scss';
+
 /* Bootstrap */
 .modal-90w {
   width: 90% !important;
   max-width: none !important;
 }
 
-#user-profile-auto-accept-incident-query-checkbox {
+#user-profile-auto-accept-incident-query-checkbox, #user-profile-dark-mode-checkbox {
   position: relative !important;
   top: 3px;
   width: 20px;
@@ -14,11 +16,29 @@
   border: 2px solid #555;
 }
 
+body.dark-mode div.modal-content h4 {
+  color: $pd-white;
+}
+
 /* React Dual List Overrides */
 .rdl-control-label {
   font-size: 16pt;
 }
 
+body.dark-mode .rdl-control-label {
+  color: $pd-white;
+}
+
 .rdl-control-container {
   min-height: 300px !important;
 }
+
+body.dark-mode select.rdl-control {
+  background-color: $pd-brand-gray-dark !important;
+  color: $pd-white !important;
+}
+
+body.dark-mode input.rdl-filter {
+  background-color: $pd-brand-gray-dark !important;
+  color: $pd-white !important;
+}
diff --git a/src/components/SettingsModal/SettingsModalComponent.test.js b/src/components/SettingsModal/SettingsModalComponent.test.js
index 2a397e69..aa2595e6 100644
--- a/src/components/SettingsModal/SettingsModalComponent.test.js
+++ b/src/components/SettingsModal/SettingsModalComponent.test.js
@@ -44,6 +44,7 @@ describe('SettingsModalComponent', () => {
             columnType: 'alert',
           },
         ],
+        darkMode: false,
       },
       incidentTable: {
         incidentTableColumns: [
@@ -235,4 +236,18 @@ describe('SettingsModalComponent', () => {
     expect(tabElement.contains('Local Cache')).toBeTruthy();
     expect(wrapper.find('#clear-local-cache-button').contains('Clear Local Cache')).toBeTruthy();
   });
+
+  it('should set darkMode to true when checked', () => {
+    const darkMode = true;
+    store = mockStore(baseStore);
+    const wrapper = componentWrapper(store, SettingsModalComponent);
+    const tabSelector = 'a[data-rb-event-key="user-profile"]';
+    const tabElement = wrapper.find(tabSelector);
+    tabElement.simulate('click');
+
+    wrapper
+      .find('input#user-profile-dark-mode-checkbox')
+      .simulate('change', { target: { checked: darkMode } });
+    expect(wrapper.find('input#user-profile-dark-mode-checkbox').prop('checked')).toEqual(darkMode);
+  });
 });
diff --git a/src/redux/rootSaga.js b/src/redux/rootSaga.js
index 33910a19..0c22be7f 100644
--- a/src/redux/rootSaga.js
+++ b/src/redux/rootSaga.js
@@ -114,6 +114,7 @@ import {
   setMaxRateLimit,
   setAutoAcceptIncidentsQuery,
   setAutoRefreshInterval,
+  setDarkMode,
   clearLocalCache,
 } from './settings/sagas';
 
@@ -231,6 +232,7 @@ export default function* rootSaga() {
     setMaxRateLimit(),
     setAutoAcceptIncidentsQuery(),
     setAutoRefreshInterval(),
+    setDarkMode(),
     clearLocalCache(),
 
     // Connection
diff --git a/src/redux/settings/actions.js b/src/redux/settings/actions.js
index 09c9f78d..ff2a0914 100644
--- a/src/redux/settings/actions.js
+++ b/src/redux/settings/actions.js
@@ -24,6 +24,9 @@ export const SET_AUTO_REFRESH_INTERVAL_COMPLETED = 'SET_AUTO_REFRESH_INTERVAL_CO
 export const CLEAR_LOCAL_CACHE_REQUESTED = 'CLEAR_LOCAL_CACHE_REQUESTED';
 export const CLEAR_LOCAL_CACHE_COMPLETED = 'CLEAR_LOCAL_CACHE_COMPLETED';
 
+export const SET_DARK_MODE_REQUESTED = 'SET_DARK_MODE_REQUESTED';
+export const SET_DARK_MODE_COMPLETED = 'SET_DARK_MODE_COMPLETED';
+
 // Define Actions
 export const toggleSettingsModal = () => ({
   type: TOGGLE_SETTINGS_REQUESTED,
@@ -62,3 +65,8 @@ export const setAutoRefreshInterval = (autoRefreshInterval) => ({
 export const clearLocalCache = () => ({
   type: CLEAR_LOCAL_CACHE_REQUESTED,
 });
+
+export const setDarkMode = (darkMode) => ({
+  type: SET_DARK_MODE_REQUESTED,
+  darkMode,
+});
diff --git a/src/redux/settings/reducers.js b/src/redux/settings/reducers.js
index 86c50cee..f75b9528 100644
--- a/src/redux/settings/reducers.js
+++ b/src/redux/settings/reducers.js
@@ -17,6 +17,8 @@ import {
   SET_AUTO_REFRESH_INTERVAL_COMPLETED,
   CLEAR_LOCAL_CACHE_REQUESTED,
   CLEAR_LOCAL_CACHE_COMPLETED,
+  SET_DARK_MODE_REQUESTED,
+  SET_DARK_MODE_COMPLETED,
 } from './actions';
 
 const settings = produce(
@@ -93,6 +95,15 @@ const settings = produce(
         draft.status = CLEAR_LOCAL_CACHE_COMPLETED;
         break;
 
+      case SET_DARK_MODE_REQUESTED:
+        draft.status = SET_DARK_MODE_REQUESTED;
+        break;
+
+      case SET_DARK_MODE_COMPLETED:
+        draft.darkMode = action.darkMode;
+        draft.status = SET_DARK_MODE_COMPLETED;
+        break;
+
       default:
         break;
     }
@@ -107,6 +118,7 @@ const settings = produce(
     alertCustomDetailFields: [
       { label: 'Environment:details.env', value: 'Environment:details.env', columnType: 'alert' },
     ],
+    darkMode: false,
     status: '',
   },
 );
diff --git a/src/redux/settings/sagas.js b/src/redux/settings/sagas.js
index 8f4a1e07..a29ddfbf 100644
--- a/src/redux/settings/sagas.js
+++ b/src/redux/settings/sagas.js
@@ -24,6 +24,8 @@ import {
   SET_AUTO_REFRESH_INTERVAL_COMPLETED,
   CLEAR_LOCAL_CACHE_REQUESTED,
   CLEAR_LOCAL_CACHE_COMPLETED,
+  SET_DARK_MODE_REQUESTED,
+  SET_DARK_MODE_COMPLETED,
 } from './actions';
 
 import selectSettings from './selectors';
@@ -141,3 +143,17 @@ export function* clearLocalCacheImpl() {
     type: CLEAR_LOCAL_CACHE_COMPLETED,
   });
 }
+
+export function* setDarkMode() {
+  yield takeLatest(SET_DARK_MODE_REQUESTED, setDarkModeImpl);
+}
+
+export function* setDarkModeImpl(action) {
+  const {
+    darkMode,
+  } = action;
+  yield put({
+    type: SET_DARK_MODE_COMPLETED,
+    darkMode,
+  });
+}
diff --git a/src/redux/settings/sagas.test.js b/src/redux/settings/sagas.test.js
index 5566d5ba..d8dba961 100644
--- a/src/redux/settings/sagas.test.js
+++ b/src/redux/settings/sagas.test.js
@@ -29,6 +29,8 @@ import {
   SET_AUTO_ACCEPT_INCIDENTS_QUERY_COMPLETED,
   SET_AUTO_REFRESH_INTERVAL_REQUESTED,
   SET_AUTO_REFRESH_INTERVAL_COMPLETED,
+  SET_DARK_MODE_REQUESTED,
+  SET_DARK_MODE_COMPLETED,
 } from './actions';
 import {
   setDefaultSinceDateTenor,
@@ -37,6 +39,7 @@ import {
   setMaxRateLimit,
   setAutoAcceptIncidentsQuery,
   setAutoRefreshInterval,
+  setDarkMode,
 } from './sagas';
 
 describe('Sagas: Settings', () => {
@@ -66,6 +69,7 @@ describe('Sagas: Settings', () => {
             columnType: 'alert',
           },
         ],
+        darkMode: false,
         status: SET_DEFAULT_SINCE_DATE_TENOR_COMPLETED,
       })
       .silentRun();
@@ -96,6 +100,7 @@ describe('Sagas: Settings', () => {
         autoAcceptIncidentsQuery: true,
         autoRefreshInterval: 5,
         alertCustomDetailFields,
+        darkMode: false,
         status: SET_ALERT_CUSTOM_DETAIL_COLUMNS_COMPLETED,
       })
       .silentRun();
@@ -129,6 +134,7 @@ describe('Sagas: Settings', () => {
             columnType: 'alert',
           },
         ],
+        darkMode: false,
         status: SET_MAX_INCIDENTS_LIMIT_COMPLETED,
       })
       .silentRun();
@@ -162,6 +168,7 @@ describe('Sagas: Settings', () => {
             columnType: 'alert',
           },
         ],
+        darkMode: false,
         status: SET_MAX_RATE_LIMIT_COMPLETED,
       })
       .silentRun();
@@ -192,6 +199,7 @@ describe('Sagas: Settings', () => {
             columnType: 'alert',
           },
         ],
+        darkMode: false,
         status: SET_AUTO_ACCEPT_INCIDENTS_QUERY_COMPLETED,
       })
       .silentRun();
@@ -225,8 +233,40 @@ describe('Sagas: Settings', () => {
             columnType: 'alert',
           },
         ],
+        darkMode: false,
         status: SET_AUTO_REFRESH_INTERVAL_COMPLETED,
       })
       .silentRun();
   });
+  it('setDarkMode', () => {
+    const darkMode = true;
+    return expectSaga(setDarkMode)
+      .withReducer(settings)
+      .dispatch({
+        type: SET_DARK_MODE_REQUESTED,
+        darkMode,
+      })
+      .put({
+        type: SET_DARK_MODE_COMPLETED,
+        darkMode,
+      })
+      .hasFinalState({
+        displaySettingsModal: false,
+        defaultSinceDateTenor: '1 Day',
+        maxIncidentsLimit: 200,
+        maxRateLimit: 200,
+        autoAcceptIncidentsQuery: true,
+        autoRefreshInterval: 5,
+        alertCustomDetailFields: [
+          {
+            label: 'Environment:details.env',
+            value: 'Environment:details.env',
+            columnType: 'alert',
+          },
+        ],
+        darkMode: true,
+        status: SET_DARK_MODE_COMPLETED,
+      })
+      .silentRun();
+  });
 });