diff --git a/net/web/src/App.js b/net/web/src/App.js
index 5e0e5411..62b82c39 100644
--- a/net/web/src/App.js
+++ b/net/web/src/App.js
@@ -39,6 +39,7 @@ function App() {
                             colorPrimary: Colors.primary,
                             colorLink: Colors.primary,
                             colorLinkHover: Colors.background,
+                            colorBgBase: Colors.cancel,
                           } }}>
                           <Router>
                             <Routes>
diff --git a/net/web/src/constants/Colors.js b/net/web/src/constants/Colors.js
index c3fed00b..26f8a14f 100644
--- a/net/web/src/constants/Colors.js
+++ b/net/web/src/constants/Colors.js
@@ -1,6 +1,7 @@
 export const Colors = {
   background: '#8fbea7',
   primary: '#448866',
+  cancel: '#dddddd',
   formBackground: '#f2f2f2',
   darkBackground: '#222222',
   formFocus: '#f8f8f8',
@@ -85,7 +86,7 @@ export const DarkTheme = {
   hintText: '#aaaaaa',
   activeText: '#ffffff',
   idleText: '#aaaaaa',
-  placeholderText: '#cccccc',
+  placeholderText: '#686868',
   linkText: '#66aa88',
   labelText: '#dddddd',
   alertText: '#ff8888',
diff --git a/net/web/src/context/useSettingsContext.hook.js b/net/web/src/context/useSettingsContext.hook.js
index cd72215a..fb1dd7c7 100644
--- a/net/web/src/context/useSettingsContext.hook.js
+++ b/net/web/src/context/useSettingsContext.hook.js
@@ -68,7 +68,7 @@ export function useSettingsContext() {
     }
 
     const timeFormat = localStorage.getItem('time_format');
-    if (timeFormat == '24h') {
+    if (timeFormat === '24h') {
       updateState({ timeFormat });
     }
     else {
@@ -76,7 +76,7 @@ export function useSettingsContext() {
     }
 
     const dateFormat = localStorage.getItem('date_format');
-    if (dateFormat == 'dd/mm') {
+    if (dateFormat === 'dd/mm') {
       updateState({ dateFormat });
     }
     else {
diff --git a/net/web/src/session/account/Account.styled.js b/net/web/src/session/account/Account.styled.js
index 8a3b0872..06b40a64 100644
--- a/net/web/src/session/account/Account.styled.js
+++ b/net/web/src/session/account/Account.styled.js
@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { Colors } from 'constants/Colors';
 
 export const AccountWrapper = styled.div`
   min-height: 100%;
diff --git a/net/web/src/session/account/profile/Profile.styled.js b/net/web/src/session/account/profile/Profile.styled.js
index f321ceb7..39be7250 100644
--- a/net/web/src/session/account/profile/Profile.styled.js
+++ b/net/web/src/session/account/profile/Profile.styled.js
@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { Colors } from 'constants/Colors';
 
 export const ProfileWrapper = styled.div`
   min-height: 100%;
diff --git a/net/web/src/session/account/profile/accountAccess/AccountAccess.jsx b/net/web/src/session/account/profile/accountAccess/AccountAccess.jsx
index c7d5c754..28d123cc 100644
--- a/net/web/src/session/account/profile/accountAccess/AccountAccess.jsx
+++ b/net/web/src/session/account/profile/accountAccess/AccountAccess.jsx
@@ -1,6 +1,6 @@
-import { AccountAccessWrapper, LoginModal, SealModal, EditFooter } from './AccountAccess.styled';
+import { AccountAccessWrapper, LoginModal, SealModal } from './AccountAccess.styled';
 import { useAccountAccess } from './useAccountAccess.hook';
-import { Button, Modal, Switch, Form, Input, Radio, Select } from 'antd';
+import { Button, Modal, Switch, Input, Radio, Select } from 'antd';
 import { SettingOutlined, UserOutlined, LockOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
 
 export function AccountAccess() {
@@ -53,7 +53,7 @@ export function AccountAccess() {
   }
 
   const editSealFooter = (
-    <EditFooter>
+    <div>
       <div className="select"></div>
       <Button key="back" onClick={actions.clearEditSeal}>Cancel</Button>
       { state.sealMode === 'enabled' && (
@@ -65,7 +65,7 @@ export function AccountAccess() {
       { state.sealMode !== 'unlocking' && state.sealMode !== 'enabled' && (
         <Button key="save" type="primary" onClick={saveSeal} disabled={!actions.canSaveSeal()} loading={state.busy}>Save</Button>
       )}
-    </EditFooter>
+    </div>
   );
         
   return (
@@ -167,28 +167,20 @@ export function AccountAccess() {
       </Modal>
       <Modal centered closable={false} footer={null} visible={state.editLogin} bodyStyle={{ padding: 16, ...state.menuStyle }} onCancel={actions.clearEditLogin}>
         <LoginModal>
-          <Form name="basic" wrapperCol={{ span: 24, }}>
-              <Form.Item name="username" validateStatus={state.editStatus} help={state.editMessage}>
-                <Input className="loginValue" placeholder="Username" spellCheck="false" onChange={(e) => actions.setEditHandle(e.target.value)}
-                    defaultValue={state.editHandle} autocomplete="username" autocapitalize="none" prefix={<UserOutlined />} />
-              </Form.Item>
+          <Input className="loginValue" placeholder="Username" spellCheck="false" onChange={(e) => actions.setEditHandle(e.target.value)}
+              defaultValue={state.editHandle} autocomplete="username" autocapitalize="none" prefix={<UserOutlined />} />
 
-              <Form.Item name="password">
-                <Input.Password className="loginValue" placeholder="Password" spellCheck="false" onChange={(e) => actions.setEditPassword(e.target.value)}
-                    autocomplete="new-password" prefix={<LockOutlined />} />
-              </Form.Item>
+          <Input.Password className="loginValue" placeholder="Password" spellCheck="false" onChange={(e) => actions.setEditPassword(e.target.value)}
+              autocomplete="new-password" prefix={<LockOutlined />} />
 
-              <Form.Item name="confirm">
-                <Input.Password className="loginValue" placeholder="Confirm Password" spellCheck="false" onChange={(e) => actions.setEditConfirm(e.target.value)}
-                    autocomplete="new-password" prefix={<LockOutlined />} />
-              </Form.Item>
-          </Form>
+          <Input.Password className="loginValue" placeholder="Confirm Password" spellCheck="false" onChange={(e) => actions.setEditConfirm(e.target.value)}
+              autocomplete="new-password" prefix={<LockOutlined />} />
+          <div className="controls">
+            <Button key="back" onClick={actions.clearEditLogin}>Cancel</Button>
+            <Button key="save" type="primary" className={actions.canSaveLogin() ? 'saveEnabled' : 'saveDisabled'} onClick={saveLogin}
+                disabled={!actions.canSaveLogin()} loading={state.busy}>Save</Button>
+          </div>
         </LoginModal>
-        <EditFooter>
-          <Button key="back" onClick={actions.clearEditLogin}>Cancel</Button>
-          <Button key="save" type="primary" className={actions.canSaveLogin() ? 'saveEnabled' : 'saveDisabled'} onClick={saveLogin}
-              disabled={!actions.canSaveLogin()} loading={state.busy}>Save</Button>
-        </EditFooter>
       </Modal>
     </AccountAccessWrapper>
   );
diff --git a/net/web/src/session/account/profile/accountAccess/AccountAccess.styled.js b/net/web/src/session/account/profile/accountAccess/AccountAccess.styled.js
index 073b2729..0ab6f168 100644
--- a/net/web/src/session/account/profile/accountAccess/AccountAccess.styled.js
+++ b/net/web/src/session/account/profile/accountAccess/AccountAccess.styled.js
@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { Colors } from 'constants/Colors';
 
 export const AccountAccessWrapper = styled.div`
   display: flex;
@@ -127,10 +126,22 @@ export const SealModal = styled.div`
 `
 
 export const LoginModal = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 
   .loginValue {
     background-color: ${props => props.theme.inputArea};
     color: ${props => props.theme.mainText};
+    border: 1px solid ${props => props.theme.sectionBorder};
+
+    .anticon {
+      color: ${props => props.theme.placeholderText};
+
+      &:hover {
+        color: ${props => props.theme.linkText};
+      }
+    }
   }
 
   input {
@@ -143,33 +154,33 @@ export const LoginModal = styled.div`
   input::placeholder {
     color: ${props => props.theme.placeholderText};
   }
-`
 
-export const EditFooter = styled.div`
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-  gap: 16px;
-
-  .saveDisabled {
-    background-color: ${props => props.theme.disabledArea};
-
-    button {
-      color: ${props => props.theme.idleText};
-    }
-  }
-
-  .saveEnabled {
-    background-color: ${props => props.theme.enabledArea};
-
-    button {
-      color: ${props => props.theme.activeText};
-    }
-  }
-
-  .select {
+  .controls {
+    width: 100%;
     display: flex;
-    flex-grow: 1;
+    justify-content: flex-end;
+    gap: 16px;
+
+    .saveDisabled {
+      background-color: ${props => props.theme.disabledArea};
+
+      button {
+        color: ${props => props.theme.idleText};
+      }
+    }
+
+    .saveEnabled {
+      background-color: ${props => props.theme.enabledArea};
+
+      button {
+        color: ${props => props.theme.activeText};
+      }
+    }
+
+    .select {
+      display: flex;
+      flex-grow: 1;
+    }
   }
 `
 
diff --git a/net/web/src/session/cards/Cards.jsx b/net/web/src/session/cards/Cards.jsx
index 21cd4dde..9a6a9c0a 100644
--- a/net/web/src/session/cards/Cards.jsx
+++ b/net/web/src/session/cards/Cards.jsx
@@ -1,6 +1,6 @@
 import { Input, Modal, List, Button } from 'antd';
 import { CardsWrapper } from './Cards.styled';
-import { SortAscendingOutlined, UpOutlined, RightOutlined, UserOutlined, SearchOutlined } from '@ant-design/icons';
+import { SortAscendingOutlined, RightOutlined, UserOutlined, SearchOutlined } from '@ant-design/icons';
 import { useCards } from './useCards.hook';
 import { CardItem } from './cardItem/CardItem';