diff --git a/components/Account/ChangeFiatCurrency.tsx b/components/Account/ChangeFiatCurrency.tsx
index c2144cced..f0cbf4f8e 100644
--- a/components/Account/ChangeFiatCurrency.tsx
+++ b/components/Account/ChangeFiatCurrency.tsx
@@ -40,13 +40,15 @@ export default function ChangeFiatCurrency ({ preferredCurrencyId }: IProps): Re
     }
   }
 
-  return (<>
-    <div className={style.changeCurrency_ctn}>
+  return (
+    <>
       <select
-        id='currency'
+        id="currency"
         required
         value={currency}
-        onChange={(e) => { void onChangeCurrency(e.target.value) }}
+        onChange={(e) => {
+          void onChangeCurrency(e.target.value)
+        }}
       >
         {SUPPORTED_QUOTES.map((currency: SupportedQuotesType) => (
           <option key={currency} value={currency}>
@@ -54,8 +56,10 @@ export default function ChangeFiatCurrency ({ preferredCurrencyId }: IProps): Re
           </option>
         ))}
       </select>
-    </div>
-    {error !== '' && <span className={style.error_message}> {error} </span>}
-    {success !== '' && <span className={style.success_message}> {success} </span>}
-    </>)
+      {error !== '' && <span className={style.error_message}>{error}</span>}
+      {success !== '' && (
+        <span className={style.success_message}>{success}</span>
+      )}
+    </>
+  )
 }
diff --git a/components/Account/ChangePassword.tsx b/components/Account/ChangePassword.tsx
index d23d7d838..c3c87f724 100644
--- a/components/Account/ChangePassword.tsx
+++ b/components/Account/ChangePassword.tsx
@@ -4,7 +4,7 @@ import { ChangePasswordPOSTParameters } from 'utils/validators'
 import style from './account.module.css'
 
 interface IProps {
-  toggleChangePassword: () => void;
+  toggleChangePassword: () => void
 }
 
 export default function ChangePassword ({ toggleChangePassword }: IProps): ReactElement {
@@ -91,9 +91,11 @@ export default function ChangePassword ({ toggleChangePassword }: IProps): React
         <label htmlFor='newPasswordConfirmed'>Confirm new password</label>
         <input {...register('newPasswordConfirmed')} type='password' id='newPasswordConfirmed' name='newPasswordConfirmed' required />
         <div>
-          <div className={style.error_message}>
-            {error !== '' ? <span>{error}</span> : <span></span>}
+        {error !== ''
+          ? <div className={style.error_message}>
+            {error}
           </div>
+          : null}
           <button disabled={disabled} className='button_main' type='submit'>Submit</button>
         </div>
       </form>
diff --git a/components/Account/account.module.css b/components/Account/account.module.css
index e85ab6813..b67731025 100644
--- a/components/Account/account.module.css
+++ b/components/Account/account.module.css
@@ -1,25 +1,7 @@
-.success_message {
-  color: green;
-  font-size: 16px;
-  width: 100%;
-  height: 100%;
-  background-color: var(--secondary-bg-color);
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 10px;
-}
-
 .changepw_ctn {
   width: 100%;
-  background-color: var(--secondary-bg-color);
-  max-width: 500px;
-  padding: 20px 25px;
-  margin: 4px 0;
-  border-radius: 10px;
   position: relative;
+  margin-top: 20px;
 }
 
 .changepw_ctn form input {
@@ -37,19 +19,28 @@ body[data-theme='dark'] .changepw_ctn input {
   border-radius: 10px;
 }
 
+.success_message,
+.error_message {
+    background-color: #c5e7ba;
+    font-size: 14px;
+    width: 100%;
+    padding: 5px 10px;
+    border-radius: 5px;
+    text-align: center;
+    margin-top: 0px;
+    color: rgb(0, 99, 0);
+    display: inline-block;
+    font-weight: 400;
+}
+
+.error_message {
+    color: rgb(172, 0, 0);
+    background-color: #e7bfba;
+  }
+
 @media (max-width: 960px) {
   .changepw_ctn {
    max-width: unset;
   }
 }
 
-.error_message {
-  color: red;
-  font-size: 14px;
-  top: -20px;
-  left: 0;
-  background-color: rgba(255, 0, 0, 0.1);
-  padding: 1px 10px;
-  border-radius: 5px;
-}
-
diff --git a/components/Organization/organization.module.css b/components/Organization/organization.module.css
index a9a97036b..49f4ab832 100644
--- a/components/Organization/organization.module.css
+++ b/components/Organization/organization.module.css
@@ -1,7 +1,7 @@
 .org_ctn  {
   width: 100%;
   background-color: #fff;
-  max-width: 800px;
+  max-width: 700px;
   padding: 20px;
   border-radius: 10px;
 }
diff --git a/components/Timezone Selector/index.tsx b/components/Timezone Selector/index.tsx
index 0643204c7..9d8367458 100644
--- a/components/Timezone Selector/index.tsx	
+++ b/components/Timezone Selector/index.tsx	
@@ -49,18 +49,29 @@ const TimezoneSelector: React.FC<TimezoneSelectorProps> = ({ value }) => {
     void updateTimezone()
   }
 
+  const customStyles = {
+    option: (provided, state) => ({
+      ...provided,
+      backgroundColor: state.isFocused === true ? '#669cfe' : '',
+      ':hover': {
+        backgroundColor: '#669cfe'
+      }
+    })
+  }
+
   return (
-    <div className={style.timezone_selector}>
+    <>
       <Select
         value={selectedTimezone}
         onChange={handleChange}
         disabled={false}
         className={style.select_timezone}
         displayValue="UTC"
+        styles={customStyles}
       />
-      {error !== '' && <span className={style.error_message}> {error} </span>}
-      {success !== '' && <span className={style.success_message}> {success} </span>}
-    </div>
+      {error !== '' && <span className={style.error_message}>{error}</span>}
+      {success !== '' && <span className={style.success_message}>{success}</span>}
+    </>
   )
 }
 
diff --git a/components/Timezone Selector/timezone-selector.module.css b/components/Timezone Selector/timezone-selector.module.css
index eae44b3b8..731953339 100644
--- a/components/Timezone Selector/timezone-selector.module.css	
+++ b/components/Timezone Selector/timezone-selector.module.css	
@@ -1,40 +1,35 @@
-.timezone_selector {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    margin: 15px 0;
-    padding: 10px;
-    border: 1px solid var(--secondary-bg-color);
-    border-radius: 5px;
-    background-color: var(--secondary-bg-color);
-}
 
 .select_timezone {
+    margin-top: 10px;
+}
+
+.select_timezone > div {
     background-color: var(--secondary-bg-color) !important;
-    color: black;
-    font-family: 'Poppins', sans-serif;
+    border: 1px solid var(--secondary-text-color) !important;
 }
 
-.success_message {
-    color: green;
-    font-size: 16px;
-    width: 100%;
-    height: 100%;
-    background-color: var(--secondary-bg-color);
-    top: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 10px;
+body[data-theme='dark'] .select_timezone > div {
+    background-color: var(--primary-bg-color) !important;
+    border-color: #585858 !important;
+  }
+
+.select_timezone div {
+    color: var(--primary-text-color) !important;
 }
 
+.success_message,
 .error_message {
-    color: red;
+    background-color: #c5e7ba;
     font-size: 14px;
-    top: -20px;
-    left: 0;
-    background-color: rgba(255, 0, 0, 0.1);
-    padding: 1px 10px;
+    width: 100%;
+    padding: 5px 10px;
     border-radius: 5px;
+    text-align: center;
+    margin-top: 10px;
+    color: rgb(0, 99, 0);
+}
+
+.error_message {
+    color: rgb(172, 0, 0);
+    background-color: #e7bfba;
   }
diff --git a/pages/account/account.module.css b/pages/account/account.module.css
index 196f23d91..4a8ee6678 100644
--- a/pages/account/account.module.css
+++ b/pages/account/account.module.css
@@ -1,57 +1,119 @@
 .account_ctn {
   display: flex;
   flex-direction: column;
-  --max-width: 500px;
+  --max-width: 700px;
 }
 
 .account_card {
   width: 100%;
   background-color: var(--secondary-bg-color);
   max-width: var(--max-width);
-  padding: 15px 20px;
-  margin: 4px 0;
-  border-radius: 10px;
-  display: inline-block;
-  font-weight: 600;
+  padding: 30px;
+  border-radius: 8px;
   word-wrap: break-word;
+  display: flex;
+  flex-direction: column;
 }
 
-.public_key_card_ctn {
+.account_row {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-bottom: 1px solid #00000022;
+  padding: 30px 0;
+  position: relative;
+}
+
+body[data-theme='dark'] .account_row {
+  border-color: #d8d8d821;
+}
+
+.account_row:first-child {
+  padding-top: 0;
+}
+
+.account_row:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.account_row select {
+  margin-top: 10px;
+  font-weight: 400 !important;
+  width: 100%;
+  background-color: var(--secondary-bg-color) !important;
+  color: var(--primary-text-color) !important;
+  border: 1px solid var(--secondary-text-color) !important;
+  background-image: linear-gradient(45deg,transparent 49%,var(--primary-text-color) 51%),linear-gradient(135deg,var(--primary-text-color) 51%,transparent 49%);
+}
+
+body[data-theme='dark'] .account_row select {
+  background-color: var(--primary-bg-color) !important;
+  border-color: #585858 !important;
+}
+
+/* body[data-theme='dark'] .account_row select {
+  background-color: #434343 !important;
+  border-color: #898EA4 !important;
+}
+
+body[data-theme='dark'] .pk_card,
+body[data-theme='dark'] .pk_copy {
+  background-color: #434343;
+} */
+
+.label {
+  width: 100%;
+  position: relative;
+  font-size: 15px;
+}
+
+.value {
+  font-weight: 600;
+  width: 100%;
+}
+
+.pk_ctn {
   width: 100%;
-  max-width: var(--max-width);
   display: flex;
   align-items: center;
-  margin: 4px 0;
-  gap: 2px;
+  gap: 1px;
+  margin-top: 10px;
 }
 
-.public_key_card {
-  width: 100%;
-  background-color: var(--secondary-bg-color);
-  max-width: calc(var(--max-width) - 40px);
-  padding: 15px 20px;
+.pk_card {
+  flex-grow: 2;
+  background-color: var(--primary-bg-color);
+  padding: 20px;
   border-radius: 10px 0 0 10px;
   display: inline-block;
   font-weight: 600;
-  word-wrap: break-word;
+  word-break: break-all;
   position: relative;
+  font-weight: 400;
+  font-size: 16px;
 }
 
-.copy_btn {
-  flex-grow: 1;
+.pk_copy {
+  width: 50px;
   align-self: stretch;
   display: flex;
   align-items: center;
   cursor: pointer;
-  background-color: var(--secondary-bg-color);
+  background-color: var(--primary-bg-color);
   border-radius: 0 10px 10px 0;
   justify-content: center;
   transition: all ease-in-out 200ms;
+  flex-shrink: 0;
+}
+
+body[data-theme='dark'] .pk_copy img {
+  filter: invert(1);
 }
 
 .copied_confirmation {
   width: 100%;
-  background-color: var(--secondary-bg-color);
+  background-color: var(--accent-color);
   position: absolute;
   top: 0;
   left: 0;
@@ -63,14 +125,8 @@
   justify-content: center;
 }
 
-.copy_btn:hover {
-  background-color: var(--accent-color);
-}
-
-.copy_btn img {
-  width: 15px;
-  border-radius: 0;
-  transition: all ease-in-out 200ms;
+.pk_copy:hover {
+  background-color: var(--accent-color) !important;
 }
 
 .updatebtn {
@@ -98,25 +154,17 @@
 
 .public_key_info_ctn {
   width: 100%;
-  background-color: var(--secondary-bg-color);
-  max-width: var(--max-width);
-  padding: 20px;
-  border-radius: 10px;
   margin-top: 10px;
   font-size: 16px;
+  background-color: var(--primary-bg-color);
+  padding: 20px;
+  border-radius: 10px;
 }
 
 .updatebtn:hover {
   background-color: var(--accent-color);
 }
 
-.label {
-  margin-top: 20px;
-  width: 100%;
-  max-width: var(--max-width);
-  position: relative;
-}
-
 body[data-theme='dark'] .updatebtn:hover {
   color: #231f20;
 }
@@ -129,6 +177,36 @@ body[data-theme='dark'] .copy_btn:hover img {
   filter: none;
 }
 
+.change_pw_btn {
+  position: absolute;
+  right: 0;
+  top: 40px;
+  font-size: 12px;
+  background-color: var(--primary-bg-color);
+  border-radius: 100px;
+  padding: 3px 15px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.change_pw_btn:hover {
+  background-color: var(--accent-color);
+}
+
+.whats_this_btn {
+  font-size: 12px;
+  background-color: var(--primary-bg-color);
+  border-radius: 100px;
+  padding: 3px 15px;
+  cursor: pointer;
+  user-select: none;
+  float: right;
+}
+
+.whats_this_btn:hover {
+  background-color: var(--accent-color);
+}
+
 @media (max-width: 960px) {
     .account_card,
     .public_key_card_ctn,
diff --git a/pages/account/index.tsx b/pages/account/index.tsx
index ffce3e63d..546c44e91 100644
--- a/pages/account/index.tsx
+++ b/pages/account/index.tsx
@@ -105,42 +105,71 @@ export default function Account ({ user, userPublicKey, organization, orgMembers
     return (
       <div className={style.account_ctn}>
         <TopBar title="Account" user={user.stUser?.email} />
-        <div className={style.label}>Email</div>
-        <div className={style.account_card}>{user.stUser?.email}</div>
-        <div className={style.label}>Currency</div>
         <div className={style.account_card}>
-          <ChangeFiatCurrency preferredCurrencyId={userProfile.preferredCurrencyId}/>
-        </div>
-        <div className={style.label}>Update timezone</div>
-        <div className={style.account_card}>
-          <TimezoneSelector
-            value={timezone}
-            onChange={handleTimezoneChange}
-          />
-        </div>
-        {changePassword && (
-          <>
-            <div className={style.label}>Update Password</div>
-            <ChangePassword toggleChangePassword={toggleChangePassword} />
-          </>
-        )}
-
-        <div
-          onClick={() => setChangePassword(!changePassword)}
-          className={`${style.updatebtn} button_outline`}
-        >
-          {!changePassword ? 'Update Password' : 'Cancel'}
-        </div>
-        <div className={style.label} style={{ marginTop: '50px' }}>Public key <span className={style.public_key_info_btn} onClick={() => togglePublicKeyInfo()}>What is this?</span></div>
-        <div className={style.public_key_card_ctn}>
-          <div className={style.public_key_card}>
-            {userPublicKey}
-            {isCopied && <div className={style.copied_confirmation}>Copied!</div>}
+          <div className={style.account_row}>
+            <div className={style.label}>Email</div>
+            <div className={style.value}>{user.stUser?.email}</div>
           </div>
-          <div className={style.copy_btn} onClick={() => { void handleCopyClick() } }><Image src={CopyIcon} alt="copy" /></div>
-        </div>
-        <div>
-          {publicKeyInfo && (
+
+          <div className={style.account_row}>
+            <div className={style.label}>{changePassword ? 'Update ' : ''}Password</div>
+            {changePassword
+              ? null
+              : <div className={style.value}>••••••••</div>}
+            <div
+              onClick={() => setChangePassword(!changePassword)}
+              className={style.change_pw_btn}
+            >
+              {changePassword ? 'Cancel' : 'Update'}
+            </div>
+            {changePassword && <ChangePassword toggleChangePassword={toggleChangePassword} /> }
+          </div>
+
+          <div className={style.account_row}>
+            <div className={style.label}>Currency</div>
+            <div className={style.value}>
+              <ChangeFiatCurrency
+                preferredCurrencyId={userProfile.preferredCurrencyId}
+              />
+            </div>
+          </div>
+
+          <div className={style.account_row}>
+            <div className={style.label}>Timezone</div>
+            <TimezoneSelector
+              value={timezone}
+              onChange={handleTimezoneChange}
+            />
+          </div>
+
+          <div className={style.account_row}>
+            <div className={style.label}>
+              Public Key{' '}
+              <div
+                onClick={() => togglePublicKeyInfo()}
+                className={style.whats_this_btn}
+              >
+                {publicKeyInfo ? 'Close' : 'What is this?'}
+              </div>
+            </div>
+            <div className={style.pk_ctn}>
+              <div className={style.pk_card}>
+                {userPublicKey}
+                {isCopied && (
+                  <div className={style.copied_confirmation}>Copied!</div>
+                )}
+              </div>
+              <div
+                className={style.pk_copy}
+                onClick={() => {
+                  void handleCopyClick()
+                }}
+              >
+                <Image src={CopyIcon} alt="copy" width={20} height={20} />
+              </div>
+            </div>
+
+            {publicKeyInfo && (
             <div className={style.public_key_info_ctn}>
               This can be used to verify the authenticity of a message received from a paybutton trigger.
               <br/>
@@ -154,14 +183,11 @@ export default function Account ({ user, userPublicKey, organization, orgMembers
               <br/>
               Check if the payload's signature came from the private key paired to this public key using your preferred method.
             </div>
-          )}
-          {publicKeyInfo &&
-            <div
-              onClick={() => togglePublicKeyInfo()}
-              className={`${style.updatebtn} button_outline`}
-            >Close</div>
-          }
+            )}
+
+          </div>
         </div>
+
         <div>
           <h3 className={style.config_title}>Organization</h3>
           <ViewOrganization user={user} orgMembers={orgMembers} setOrgMembers={setOrgMembers} organization={organization}/>