diff --git a/packages/omgx/wallet-frontend/src/components/Proposal/Proposal.js b/packages/omgx/wallet-frontend/src/components/Proposal/Proposal.js
index 80ed4ae227605..e062586dc47ab 100644
--- a/packages/omgx/wallet-frontend/src/components/Proposal/Proposal.js
+++ b/packages/omgx/wallet-frontend/src/components/Proposal/Proposal.js
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. */
 
 import React, { useState, useEffect } from 'react';
-import {Typography} from '@material-ui/core';
+import {Typography, useTheme} from '@material-ui/core';
 
 import { useDispatch } from 'react-redux';
 
@@ -25,10 +25,14 @@ import Button from 'components/button/Button';
 
 import * as styles from './Proposal.module.scss';
 
+import { backgroundLight400 } from 'index.scss';
+
 function Proposal({
     proposal,
 }) {
+
     const dispatch = useDispatch()
+    const theme = useTheme()
 
     const [dropDownBox, setDropDownBox] = useState(false)
     const [dropDownBoxInit, setDropDownBoxInit] = useState(true)
@@ -59,7 +63,6 @@ function Proposal({
     const FormatDescription = ({description}) =>{
         if(!!description.includes('@@')) {
             let descList = description.split('@@')
-            //console.log("descList",descList)
             if(descList[1] !== '') {
                 //should validate http link
                 return  <>{descList[0]}&nbsp;&nbsp;<a className={styles.href} target="_blank" rel="noopener noreferrer" href={descList[1]}>MORE DETAILS</a>  </>
@@ -74,7 +77,7 @@ function Proposal({
         className={styles.proposalCard}
 
         style={{
-            background: 'linear-gradient(132.17deg, rgba(255, 255, 255, 0.1) 0.24%, rgba(255, 255, 255, 0.03) 94.26%)',
+            background: `${theme.palette.mode === 'light' ? backgroundLight400 : 'linear-gradient(132.17deg, rgba(255, 255, 255, 0.1) 0.24%, rgba(255, 255, 255, 0.03) 94.26%)'}`,
             borderRadius: '12px'
         }}>
 
diff --git a/packages/omgx/wallet-frontend/src/components/Proposal/Proposal.module.scss b/packages/omgx/wallet-frontend/src/components/Proposal/Proposal.module.scss
index 55e0d9d691d9b..35ccfb53f8fbb 100644
--- a/packages/omgx/wallet-frontend/src/components/Proposal/Proposal.module.scss
+++ b/packages/omgx/wallet-frontend/src/components/Proposal/Proposal.module.scss
@@ -9,30 +9,28 @@ $boxDropDownHeight: 50px;
     padding: 5px;
     padding-left: 10px;
     border-radius: 8px;
-    background: red;
     .proposalHeader {
         display: flex;
         justify-content: space-between;
         .title {
             font-size: 1.1em;
-            color: $white;
             p{
               margin: 0px;
             }
             .muted {
-              color: $white700;
+              opacity: 0.7;
             }
         }
     }
     .proposalContent {
       display: flex;
       justify-content: flex-start;
-      color: $white700;
+      opacity: 0.7;
       font-weight: 700;
     }
     .vote {
       min-width: 120px;
-      color: $white700;
+      opacity: 0.7;
       font-weight: 700;
     }
 }
@@ -103,5 +101,4 @@ $boxDropDownHeight: 50px;
 
   .href {
     text-decoration: underline;
-    color: white
   }
\ No newline at end of file
diff --git a/packages/omgx/wallet-frontend/src/components/transaction/Transaction.module.scss b/packages/omgx/wallet-frontend/src/components/transaction/Transaction.module.scss
index 0ac733e968ab8..dd95b8d502e5e 100644
--- a/packages/omgx/wallet-frontend/src/components/transaction/Transaction.module.scss
+++ b/packages/omgx/wallet-frontend/src/components/transaction/Transaction.module.scss
@@ -245,7 +245,7 @@ $boxDropDownHeight: 50px;
 }
 
 .muted {
-  color: $white700;
+  opacity: 0.7;
   margin: 0;
   padding: 0;
 }
diff --git a/packages/omgx/wallet-frontend/src/containers/dao/Dao.js b/packages/omgx/wallet-frontend/src/containers/dao/Dao.js
index aef5bd7fc168d..bf8eab051cbde 100644
--- a/packages/omgx/wallet-frontend/src/containers/dao/Dao.js
+++ b/packages/omgx/wallet-frontend/src/containers/dao/Dao.js
@@ -91,7 +91,12 @@ function DAO() {
 
                 <div className={styles.content}>
                     <div className={`${styles.action} ${isMobile ? styles.isMobile : ''}`}>
-                        <div className={styles.transferContainer}>
+                        <div className={styles.transferContainer}
+                        
+                            style={{
+                                background: theme.palette.background.secondary,
+                            }}
+                        >
                             <div className={styles.info}>
                                 <Typography variant="h3">{balance} Comp</Typography>
                                 <Typography variant="h4">Wallet Balance</Typography>
@@ -111,7 +116,11 @@ function DAO() {
                                 }}
                             >Transfer</Button>
                         </div>
-                        <div className={styles.delegateContainer}>
+                        <div className={styles.delegateContainer}
+                            style={{
+                                background: theme.palette.background.secondary,
+                            }}
+                        >
                             <div className={styles.info}>
                                 <Typography variant="h3">{votes} Votes</Typography>
                                 <Typography variant="h4">Voting Power</Typography>
diff --git a/packages/omgx/wallet-frontend/src/containers/dao/Dao.module.scss b/packages/omgx/wallet-frontend/src/containers/dao/Dao.module.scss
index b8bbf329df43d..618cc82487e74 100644
--- a/packages/omgx/wallet-frontend/src/containers/dao/Dao.module.scss
+++ b/packages/omgx/wallet-frontend/src/containers/dao/Dao.module.scss
@@ -43,7 +43,6 @@
             padding: 20px;
             display: flex;
             flex-direction: column; 
-            background: $background400;
             max-width: 48%;
             width: 48%;
             min-width: 350px;
@@ -62,7 +61,7 @@
                 .helpText {
                     font-size: 0.8em;
                     margin: 10px;
-                    color: $white700;
+                    opacity: 0.7;
                     margin: 10px;
                 }
             }
diff --git a/packages/omgx/wallet-frontend/src/containers/dao/proposal/ProposalList.js b/packages/omgx/wallet-frontend/src/containers/dao/proposal/ProposalList.js
index 393ff23de757e..17e5273a96709 100644
--- a/packages/omgx/wallet-frontend/src/containers/dao/proposal/ProposalList.js
+++ b/packages/omgx/wallet-frontend/src/containers/dao/proposal/ProposalList.js
@@ -15,6 +15,7 @@ limitations under the License. */
 
 import React, {useState} from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import {useTheme} from '@material-ui/core';
 
 import { openError, openModal } from 'actions/uiAction';
 
@@ -30,6 +31,7 @@ import { orderBy } from 'lodash';
 const PER_PAGE = 3;
 
 function ProposalList({balance}) {
+    const theme = useTheme();
 
     const [page, setPage] = useState(1);
     const dispatch = useDispatch()
@@ -68,7 +70,11 @@ function ProposalList({balance}) {
 
             > Create Proposal </Button>
         </div>
-        <div className={styles.listContainer}>
+        <div className={styles.listContainer}
+            style={{
+                background: theme.palette.background.secondary
+            }}
+        >
             <Pager
                 currentPage={page}
                 isLastPage={paginatedProposals.length < PER_PAGE}
diff --git a/packages/omgx/wallet-frontend/src/containers/dao/proposal/proposalList.module.scss b/packages/omgx/wallet-frontend/src/containers/dao/proposal/proposalList.module.scss
index cf28fae7b7971..b19f801ef8270 100644
--- a/packages/omgx/wallet-frontend/src/containers/dao/proposal/proposalList.module.scss
+++ b/packages/omgx/wallet-frontend/src/containers/dao/proposal/proposalList.module.scss
@@ -13,7 +13,6 @@ $boxDropDownHeight: 50px;
     display: flex;
     justify-content: flex-start;
     margin: 10px auto;
-    color: $white;
     font-size: 20px;
     font-family: 'MrEavesXL','Messina';
     margin: 0px;
@@ -48,11 +47,9 @@ $boxDropDownHeight: 50px;
     margin: 10px auto;
     border-radius: 8px;
     padding: 20px 10px;
-    background: $background400;
 
     .loadingContainer {
       padding: 10px auto;
-      color: $white;
     }
 }
 
diff --git a/packages/omgx/wallet-frontend/src/containers/transactions/Exits.js b/packages/omgx/wallet-frontend/src/containers/transactions/Exits.js
index 69c1748dd31b6..acb2c2ae4ee13 100644
--- a/packages/omgx/wallet-frontend/src/containers/transactions/Exits.js
+++ b/packages/omgx/wallet-frontend/src/containers/transactions/Exits.js
@@ -34,7 +34,7 @@ const PER_PAGE = 8
 function Exits({ searchHistory, transactions, chainLink }) {
 
   const [page, setPage] = useState(1);
-  const [processExitModal, setProcessExitModal] = useState(false);
+  
 
   const loading = useSelector(selectLoading(['EXIT/GETALL']));
 
@@ -53,7 +53,7 @@ function Exits({ searchHistory, transactions, chainLink }) {
     const metaData = typeof (i.typeTX) === 'undefined' ? '' : i.typeTX
     const chain = (i.chain === 'L1pending') ? 'L1' : i.chain
 
-    let tradExit = false
+    
     let isExitable = false
     let details = null
 
@@ -64,7 +64,7 @@ function Exits({ searchHistory, transactions, chainLink }) {
     //are we dealing with a traditional exit?
     if (to === networkService.L2StandardBridgeAddress.toLowerCase()) {
 
-      tradExit = true
+      
       isExitable = moment().isAfter(moment.unix(i.crossDomainMessage.crossDomainMessageEstimateFinalizedTime))
 
       if (isExitable) {
diff --git a/packages/omgx/wallet-frontend/src/containers/transactions/History.js b/packages/omgx/wallet-frontend/src/containers/transactions/History.js
index c4341c76260f7..1a94463183af9 100644
--- a/packages/omgx/wallet-frontend/src/containers/transactions/History.js
+++ b/packages/omgx/wallet-frontend/src/containers/transactions/History.js
@@ -20,6 +20,7 @@ import { useSelector } from 'react-redux'
 import DatePicker from 'react-datepicker'
 import "react-datepicker/dist/react-datepicker.css"
 
+import {useTheme} from '@material-ui/core'
 import moment from 'moment';
 
 import { setActiveHistoryTab1 } from 'actions/uiAction'
@@ -44,6 +45,8 @@ const POLL_INTERVAL = 5000; //milliseconds
 
 function History() {
 
+  const theme = useTheme()
+
   const dispatch = useDispatch()
   const [startDate, setStartDate] = useState(null)
   const [endDate, setEndDate] = useState(null)
@@ -96,6 +99,7 @@ function History() {
             selectsStart
             startDate={startDate}
             endDate={endDate}
+            calendarClassName={theme.palette.mode}
           />
 
           <div style={{ margin: '0px 10px', opacity: 0.7 }}>to </div>
@@ -107,6 +111,7 @@ function History() {
             startDate={startDate}
             endDate={endDate}
             minDate={startDate}
+            calendarClassName={theme.palette.mode}
           />
         </div>
       </div>
diff --git a/packages/omgx/wallet-frontend/src/index.scss b/packages/omgx/wallet-frontend/src/index.scss
index 6a8bc1eb2a686..23c8b84754f8e 100644
--- a/packages/omgx/wallet-frontend/src/index.scss
+++ b/packages/omgx/wallet-frontend/src/index.scss
@@ -20,6 +20,10 @@ $bunnyRed: #c83950;
 $background: linear-gradient(180deg, #061122 0%, #08162C 100%);
 $background400: rgba(255, 255, 255, 0.04);
 
+$backgroundLight400: rgba(0, 0, 0, 0.06);
+
+
+
 $white: #ffffff;
 $white700: rgba(255, 255, 255, 0.7);
 $white500: rgba(255, 255, 255, 0.5);
@@ -41,6 +45,7 @@ $white500: rgba(255, 255, 255, 0.5);
   maxWidth: $maxWidth;
   background:$background;
   background400:$background400;
+  backgroundLight400: $backgroundLight400;
   white:$white;
   white700:$white700;
   white500:$white500;
@@ -197,17 +202,17 @@ $white500: rgba(255, 255, 255, 0.5);
 // }
 
 
-.react-datepicker {
+.react-datepicker.dark {
   background: #09162B;
   box-shadow: -13px 15px 19px rgb(0 0 0 / 15%), inset 53px 36px 120px rgb(255 255 255 / 6%);
   border-radius: 12px;
   border: none;
-  &__header {
+  .react-datepicker__header {
     background: transparent;
     border: none;
   }
-
-  &__triangle {
+  
+  .react-datepicker__triangle {
     &::after {
       border-bottom-color: #09162B !important;
     }
@@ -216,26 +221,24 @@ $white500: rgba(255, 255, 255, 0.5);
       border-bottom-color: #09162B !important;
     }
   }
+  .react-datepicker__month {
+    padding: 5px;
+  }
 
-  &__current-month {
+  .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {
     color: #FFFFFF !important;
   }
-  
-  &__month {
-    padding: 5px;
-  }
 
-  &__day-name, &__day, &__time-name {
+  .react-datepicker__current-month {
     color: #FFFFFF !important;
   }
 
-  &__day--keyboard-selected, 
-  &__month-text--keyboard-selected, 
-  &__quarter-text--keyboard-selected, 
-  &__year-text--keyboard-selected {
+  .react-datepicker__day--keyboard-selected, 
+  .react-datepicker__month-text--keyboard-selected, 
+  .react-datepicker__quarter-text--keyboard-selected, 
+  .react-datepicker__year-text--keyboard-selected {
     border-radius: 50%;
     background-color: #3C5DFC;
     color: #fff;
-}
-
-}
\ No newline at end of file
+  }
+}  
\ No newline at end of file