diff --git a/package.json b/package.json
index 7350594d0b..e81e438231 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,7 @@
     "copy-to-clipboard": "3.3.1",
     "cross-env": "7.0.3",
     "fontfaceobserver": "2.1.0",
-    "grommet": "2.17.2",
+    "grommet": "2.17.4",
     "grommet-icons": "4.6.0",
     "husky": "7.0.1",
     "i18next": "20.4.0",
diff --git a/src/app/components/AddEscrowForm/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/AddEscrowForm/__tests__/__snapshots__/index.test.tsx.snap
index 0e64ba5e15..b30f8a5984 100644
--- a/src/app/components/AddEscrowForm/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/AddEscrowForm/__tests__/__snapshots__/index.test.tsx.snap
@@ -94,6 +94,26 @@ exports[`<AddEscrowForm /> should match snapshot 1`] = `
   border: 0;
 }
 
+.c5:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c5:focus:not(:focus-visible) > circle,
+.c5:focus:not(:focus-visible) > ellipse,
+.c5:focus:not(:focus-visible) > line,
+.c5:focus:not(:focus-visible) > path,
+.c5:focus:not(:focus-visible) > polygon,
+.c5:focus:not(:focus-visible) > polyline,
+.c5:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c5:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
+}
+
 .c3 {
   box-sizing: border-box;
   font-size: inherit;
diff --git a/src/app/components/FatalErrorHandler/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/FatalErrorHandler/__tests__/__snapshots__/index.test.tsx.snap
index 114559594b..82561a157c 100644
--- a/src/app/components/FatalErrorHandler/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/FatalErrorHandler/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,3 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<FatalErrorHandler /> should be null without an error 1`] = `null`;
+exports[`<FatalErrorHandler /> should be null without an error 1`] = `
+.c0 {
+  font-family: Rubik;
+  font-size: 18px;
+  line-height: 24px;
+  background-color: #ffffff;
+  color: #444444;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+<div
+  class="c0"
+  style="min-height: 100vh;"
+/>
+`;
diff --git a/src/app/components/FatalErrorHandler/__tests__/index.test.tsx b/src/app/components/FatalErrorHandler/__tests__/index.test.tsx
index 0bc8cb2c2f..ad2f83fdf3 100644
--- a/src/app/components/FatalErrorHandler/__tests__/index.test.tsx
+++ b/src/app/components/FatalErrorHandler/__tests__/index.test.tsx
@@ -3,13 +3,16 @@ import { fatalErrorActions } from 'app/state/fatalerror'
 import * as React from 'react'
 import { Provider } from 'react-redux'
 import { configureAppStore } from 'store/configureStore'
+import { ThemeProvider } from 'styles/theme/ThemeProvider'
 
 import { FatalErrorHandler } from '..'
 
 const renderComponent = store =>
   render(
     <Provider store={store}>
-      <FatalErrorHandler />
+      <ThemeProvider>
+        <FatalErrorHandler />
+      </ThemeProvider>
     </Provider>,
   )
 
@@ -23,7 +26,7 @@ describe('<FatalErrorHandler />', () => {
   it('should be null without an error', () => {
     const component = renderComponent(store)
     expect(component.container.firstChild).toMatchSnapshot()
-    expect(component.container.firstChild).toBeNull()
+    expect(component.container.firstChild!.firstChild).toBeNull()
   })
 
   it('should display the error', async () => {
diff --git a/src/app/components/MnemonicValidation/__tests__/index.test.tsx b/src/app/components/MnemonicValidation/__tests__/index.test.tsx
index 9eeebea9ec..cb9b3c897e 100644
--- a/src/app/components/MnemonicValidation/__tests__/index.test.tsx
+++ b/src/app/components/MnemonicValidation/__tests__/index.test.tsx
@@ -2,6 +2,7 @@ import { render } from '@testing-library/react'
 import * as React from 'react'
 import { Provider } from 'react-redux'
 import { configureAppStore } from 'store/configureStore'
+import { ThemeProvider } from 'styles/theme/ThemeProvider'
 
 import { MnemonicValidation } from '..'
 
@@ -10,7 +11,11 @@ jest.mock('bip39', () => ({
 }))
 
 const renderComponent = (store, component: React.ReactNode) =>
-  render(<Provider store={store}>{component}</Provider>)
+  render(
+    <Provider store={store}>
+      <ThemeProvider>{component}</ThemeProvider>
+    </Provider>,
+  )
 
 describe('<MnemonicValidation  />', () => {
   let store: ReturnType<typeof configureAppStore>
diff --git a/src/app/components/ReclaimEscrowForm/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/ReclaimEscrowForm/__tests__/__snapshots__/index.test.tsx.snap
index 868a6f692d..5b8fd0f280 100644
--- a/src/app/components/ReclaimEscrowForm/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/ReclaimEscrowForm/__tests__/__snapshots__/index.test.tsx.snap
@@ -109,6 +109,26 @@ exports[`<ReclaimEscrowForm /> should match snapshot 1`] = `
   border: 0;
 }
 
+.c6:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c6:focus:not(:focus-visible) > circle,
+.c6:focus:not(:focus-visible) > ellipse,
+.c6:focus:not(:focus-visible) > line,
+.c6:focus:not(:focus-visible) > path,
+.c6:focus:not(:focus-visible) > polygon,
+.c6:focus:not(:focus-visible) > polyline,
+.c6:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c6:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
+}
+
 .c4 {
   box-sizing: border-box;
   font-size: inherit;
diff --git a/src/app/components/ResponsiveLayer/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/ResponsiveLayer/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000000..2f9189ab60
--- /dev/null
+++ b/src/app/components/ResponsiveLayer/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Layer /> should match snapshot 1`] = `
+.c0 {
+  font-family: Rubik;
+  font-size: 18px;
+  line-height: 24px;
+  background-color: #ffffff;
+  color: #444444;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+<div
+  class="c0"
+  style="min-height: 100vh;"
+/>
+`;
diff --git a/src/app/components/ResponsiveLayer/__tests__/index.test.tsx b/src/app/components/ResponsiveLayer/__tests__/index.test.tsx
new file mode 100644
index 0000000000..a2df7146ae
--- /dev/null
+++ b/src/app/components/ResponsiveLayer/__tests__/index.test.tsx
@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react'
+import { Layer } from 'grommet'
+import * as React from 'react'
+import { ThemeProvider } from 'styles/theme/ThemeProvider'
+import { Provider } from 'react-redux'
+import { configureAppStore } from 'store/configureStore'
+
+const renderComponent = store =>
+  render(
+    <Provider store={store}>
+      <ThemeProvider>
+        <Layer />
+      </ThemeProvider>
+    </Provider>,
+  )
+
+describe('<Layer />', () => {
+  let store: ReturnType<typeof configureAppStore>
+
+  beforeEach(() => {
+    store = configureAppStore()
+  })
+  it('should match snapshot', () => {
+    const component = renderComponent(store)
+    expect(component.container.firstChild).toMatchSnapshot()
+  })
+})
diff --git a/src/app/components/Sidebar/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Sidebar/__tests__/__snapshots__/index.test.tsx.snap
index 56275801a2..d17a76152c 100644
--- a/src/app/components/Sidebar/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Sidebar/__tests__/__snapshots__/index.test.tsx.snap
@@ -317,6 +317,11 @@ exports[`<Navigation /> should match snapshot 1`] = `
   width: 24px;
 }
 
+.c4 {
+  font-size: 18px;
+  line-height: 24px;
+}
+
 .c9 {
   display: inline-block;
   box-sizing: border-box;
@@ -338,6 +343,26 @@ exports[`<Navigation /> should match snapshot 1`] = `
   text-align: inherit;
 }
 
+.c9:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c9:focus:not(:focus-visible) > circle,
+.c9:focus:not(:focus-visible) > ellipse,
+.c9:focus:not(:focus-visible) > line,
+.c9:focus:not(:focus-visible) > path,
+.c9:focus:not(:focus-visible) > polygon,
+.c9:focus:not(:focus-visible) > polyline,
+.c9:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c9:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
+}
+
 .c16 {
   display: inline-block;
   box-sizing: border-box;
@@ -376,9 +401,24 @@ exports[`<Navigation /> should match snapshot 1`] = `
   border: 0;
 }
 
-.c4 {
-  font-size: 18px;
-  line-height: 24px;
+.c16:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c16:focus:not(:focus-visible) > circle,
+.c16:focus:not(:focus-visible) > ellipse,
+.c16:focus:not(:focus-visible) > line,
+.c16:focus:not(:focus-visible) > path,
+.c16:focus:not(:focus-visible) > polygon,
+.c16:focus:not(:focus-visible) > polyline,
+.c16:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c16:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
 }
 
 @media only screen and (max-width:768px) {
diff --git a/src/app/components/Toolbar/Features/AccountSelector/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Toolbar/Features/AccountSelector/__tests__/__snapshots__/index.test.tsx.snap
index 9b484e92a0..6cb9ae3df2 100644
--- a/src/app/components/Toolbar/Features/AccountSelector/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Toolbar/Features/AccountSelector/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,3 +1,57 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<AccountSelector  /> should match snapshot 1`] = `null`;
+exports[`<AccountSelector  /> should match snapshot 1`] = `
+.c0 {
+  font-family: Rubik;
+  font-size: 18px;
+  line-height: 24px;
+  background-color: #ffffff;
+  color: #444444;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+<div
+  class="c0"
+  style="min-height: 100vh;"
+/>
+`;
diff --git a/src/app/components/Toolbar/Features/AccountSelector/__tests__/index.test.tsx b/src/app/components/Toolbar/Features/AccountSelector/__tests__/index.test.tsx
index 26e78ec3a5..6c03d71351 100644
--- a/src/app/components/Toolbar/Features/AccountSelector/__tests__/index.test.tsx
+++ b/src/app/components/Toolbar/Features/AccountSelector/__tests__/index.test.tsx
@@ -3,13 +3,16 @@ import { WalletType } from 'app/state/wallet/types'
 import * as React from 'react'
 import { Provider } from 'react-redux'
 import { configureAppStore } from 'store/configureStore'
+import { ThemeProvider } from 'styles/theme/ThemeProvider'
 
 import { AccountSelector } from '..'
 
 const renderComponent = store =>
   render(
     <Provider store={store}>
-      <AccountSelector closeHandler={() => {}} />
+      <ThemeProvider>
+        <AccountSelector closeHandler={() => {}} />
+      </ThemeProvider>
     </Provider>,
   )
 
diff --git a/src/app/components/Toolbar/Features/NetworkSelector/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Toolbar/Features/NetworkSelector/__tests__/__snapshots__/index.test.tsx.snap
index b730543614..6aa965d56b 100644
--- a/src/app/components/Toolbar/Features/NetworkSelector/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Toolbar/Features/NetworkSelector/__tests__/__snapshots__/index.test.tsx.snap
@@ -60,6 +60,11 @@ exports[`<NetworkSelector  /> should match snapshot 1`] = `
   width: 12px;
 }
 
+.c4 {
+  font-size: 18px;
+  line-height: 24px;
+}
+
 .c0 {
   display: inline-block;
   box-sizing: border-box;
@@ -104,9 +109,24 @@ exports[`<NetworkSelector  /> should match snapshot 1`] = `
   border: 0;
 }
 
-.c4 {
-  font-size: 18px;
-  line-height: 24px;
+.c0:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c0:focus:not(:focus-visible) > circle,
+.c0:focus:not(:focus-visible) > ellipse,
+.c0:focus:not(:focus-visible) > line,
+.c0:focus:not(:focus-visible) > path,
+.c0:focus:not(:focus-visible) > polygon,
+.c0:focus:not(:focus-visible) > polyline,
+.c0:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c0:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
 }
 
 <button
diff --git a/src/app/components/Toolbar/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Toolbar/__tests__/__snapshots__/index.test.tsx.snap
index 9293246942..59d025d8bf 100644
--- a/src/app/components/Toolbar/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Toolbar/__tests__/__snapshots__/index.test.tsx.snap
@@ -169,6 +169,11 @@ exports[`<Toolbar  /> should match snapshot 1`] = `
   width: 12px;
 }
 
+.c14 {
+  font-size: 18px;
+  line-height: 24px;
+}
+
 .c11 {
   display: inline-block;
   box-sizing: border-box;
@@ -213,9 +218,24 @@ exports[`<Toolbar  /> should match snapshot 1`] = `
   border: 0;
 }
 
-.c14 {
-  font-size: 18px;
-  line-height: 24px;
+.c11:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c11:focus:not(:focus-visible) > circle,
+.c11:focus:not(:focus-visible) > ellipse,
+.c11:focus:not(:focus-visible) > line,
+.c11:focus:not(:focus-visible) > path,
+.c11:focus:not(:focus-visible) > polygon,
+.c11:focus:not(:focus-visible) > polyline,
+.c11:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c11:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
 }
 
 .c8 {
diff --git a/src/app/components/Transaction/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Transaction/__tests__/__snapshots__/index.test.tsx.snap
index 339d218b87..4ab53cb93f 100644
--- a/src/app/components/Transaction/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Transaction/__tests__/__snapshots__/index.test.tsx.snap
@@ -302,6 +302,22 @@ exports[`<Transaction  /> should match snapshot 1`] = `
   width: 24px;
 }
 
+.c5 {
+  font-size: 18px;
+  line-height: 24px;
+}
+
+.c12 {
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: bold;
+}
+
+.c14 {
+  font-size: 14px;
+  line-height: 20px;
+}
+
 .c16 {
   display: inline-block;
   box-sizing: border-box;
@@ -347,20 +363,24 @@ exports[`<Transaction  /> should match snapshot 1`] = `
   border: 0;
 }
 
-.c5 {
-  font-size: 18px;
-  line-height: 24px;
+.c16:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
 }
 
-.c12 {
-  font-size: 18px;
-  line-height: 24px;
-  font-weight: bold;
+.c16:focus:not(:focus-visible) > circle,
+.c16:focus:not(:focus-visible) > ellipse,
+.c16:focus:not(:focus-visible) > line,
+.c16:focus:not(:focus-visible) > path,
+.c16:focus:not(:focus-visible) > polygon,
+.c16:focus:not(:focus-visible) > polyline,
+.c16:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
 }
 
-.c14 {
-  font-size: 14px;
-  line-height: 20px;
+.c16:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
 }
 
 .c7 {
diff --git a/src/app/pages/CreateWalletPage/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/CreateWalletPage/__tests__/__snapshots__/index.test.tsx.snap
index 9d42cfd06e..48f188853d 100644
--- a/src/app/pages/CreateWalletPage/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/CreateWalletPage/__tests__/__snapshots__/index.test.tsx.snap
@@ -309,6 +309,23 @@ exports[`<CreateWalletPage  /> should match snapshot 1`] = `
   width: 12px;
 }
 
+.c16 {
+  margin: 0;
+  font-size: 18px;
+  line-height: 24px;
+}
+
+.c18 {
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: bold;
+}
+
+.c5 {
+  font-size: 18px;
+  line-height: 24px;
+}
+
 .c9 {
   display: inline-block;
   box-sizing: border-box;
@@ -361,6 +378,26 @@ exports[`<CreateWalletPage  /> should match snapshot 1`] = `
   border: 0;
 }
 
+.c9:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c9:focus:not(:focus-visible) > circle,
+.c9:focus:not(:focus-visible) > ellipse,
+.c9:focus:not(:focus-visible) > line,
+.c9:focus:not(:focus-visible) > path,
+.c9:focus:not(:focus-visible) > polygon,
+.c9:focus:not(:focus-visible) > polyline,
+.c9:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c9:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
+}
+
 .c26 {
   display: inline-block;
   box-sizing: border-box;
@@ -411,29 +448,32 @@ exports[`<CreateWalletPage  /> should match snapshot 1`] = `
   border: 0;
 }
 
-.c14 {
-  margin: 0;
-  font-size: 34px;
-  line-height: 40px;
-  max-width: 816px;
-  font-weight: 600;
+.c26:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
 }
 
-.c16 {
-  margin: 0;
-  font-size: 18px;
-  line-height: 24px;
+.c26:focus:not(:focus-visible) > circle,
+.c26:focus:not(:focus-visible) > ellipse,
+.c26:focus:not(:focus-visible) > line,
+.c26:focus:not(:focus-visible) > path,
+.c26:focus:not(:focus-visible) > polygon,
+.c26:focus:not(:focus-visible) > polyline,
+.c26:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
 }
 
-.c18 {
-  font-size: 18px;
-  line-height: 24px;
-  font-weight: bold;
+.c26:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
 }
 
-.c5 {
-  font-size: 18px;
-  line-height: 24px;
+.c14 {
+  margin: 0;
+  font-size: 34px;
+  line-height: 40px;
+  max-width: 816px;
+  font-weight: 600;
 }
 
 .c20 {
diff --git a/src/app/pages/OpenWalletPage/Features/FromLedger/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/OpenWalletPage/Features/FromLedger/__tests__/__snapshots__/index.test.tsx.snap
index 4f22b42ccf..a7387b4d7a 100644
--- a/src/app/pages/OpenWalletPage/Features/FromLedger/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/OpenWalletPage/Features/FromLedger/__tests__/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<FromLedger  /> should match snapshot 1`] = `
 Object {
   "asFragment": [Function],
-  "baseElement": .c4 {
+  "baseElement": .c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -21,7 +21,7 @@ Object {
   padding: 24px;
 }
 
-.c6 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -39,7 +39,7 @@ Object {
   padding-top: 48px;
 }
 
-.c8 {
+.c9 {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
@@ -49,7 +49,7 @@ Object {
   width: 12px;
 }
 
-.c7 {
+.c8 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -60,7 +60,7 @@ Object {
   background: transparent;
   overflow: visible;
   text-transform: none;
-  border: 2px solid #7D4CDB;
+  border: 2px solid #0092f6;
   border-radius: 18px;
   color: #444444;
   padding: 4px 22px;
@@ -74,29 +74,50 @@ Object {
   transition-duration: 0.1s;
   -webkit-transition-timing-function: ease-in-out;
   transition-timing-function: ease-in-out;
+  font-weight: bold;
 }
 
-.c7:focus {
+.c8:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c7:focus > circle,
-.c7:focus > ellipse,
-.c7:focus > line,
-.c7:focus > path,
-.c7:focus > polygon,
-.c7:focus > polyline,
-.c7:focus > rect {
+.c8:focus > circle,
+.c8:focus > ellipse,
+.c8:focus > line,
+.c8:focus > path,
+.c8:focus > polygon,
+.c8:focus > polyline,
+.c8:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c7:focus::-moz-focus-inner {
+.c8:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c9 {
+.c8:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c8:focus:not(:focus-visible) > circle,
+.c8:focus:not(:focus-visible) > ellipse,
+.c8:focus:not(:focus-visible) > line,
+.c8:focus:not(:focus-visible) > path,
+.c8:focus:not(:focus-visible) > polygon,
+.c8:focus:not(:focus-visible) > polyline,
+.c8:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c8:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
+}
+
+.c10 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -110,13 +131,13 @@ Object {
   -webkit-align-self: flex-end;
   -ms-flex-item-align: end;
   align-self: flex-end;
-  border: 2px solid #7D4CDB;
+  border: 2px solid #0092f6;
   border-radius: 18px;
   color: #444444;
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
-  background-color: #7D4CDB;
+  background-color: #0092f6;
   color: #f8f8f8;
   border-radius: 18px;
   opacity: 0.3;
@@ -127,29 +148,50 @@ Object {
   transition-duration: 0.1s;
   -webkit-transition-timing-function: ease-in-out;
   transition-timing-function: ease-in-out;
+  font-weight: bold;
 }
 
-.c9:focus {
+.c10:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c9:focus > circle,
-.c9:focus > ellipse,
-.c9:focus > line,
-.c9:focus > path,
-.c9:focus > polygon,
-.c9:focus > polyline,
-.c9:focus > rect {
+.c10:focus > circle,
+.c10:focus > ellipse,
+.c10:focus > line,
+.c10:focus > path,
+.c10:focus > polygon,
+.c10:focus > polyline,
+.c10:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c9:focus::-moz-focus-inner {
+.c10:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c5 {
+.c10:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c10:focus:not(:focus-visible) > circle,
+.c10:focus:not(:focus-visible) > ellipse,
+.c10:focus:not(:focus-visible) > line,
+.c10:focus:not(:focus-visible) > path,
+.c10:focus:not(:focus-visible) > polygon,
+.c10:focus:not(:focus-visible) > polyline,
+.c10:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c10:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
+}
+
+.c6 {
   margin-top: 0px;
   margin-bottom: 24px;
   font-size: 1;
@@ -159,8 +201,24 @@ Object {
 }
 
 .c0 {
+  font-family: Rubik;
+  font-size: 18px;
+  line-height: 24px;
+  background-color: #ffffff;
+  color: #444444;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+.c1 {
+  font-family: Rubik;
   font-size: 18px;
   line-height: 24px;
+  background-color: #ffffff;
+  color: #444444;
   box-sizing: border-box;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
@@ -178,7 +236,7 @@ Object {
   bottom: 0px;
 }
 
-.c1 {
+.c2 {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -190,7 +248,7 @@ Object {
   will-change: transform;
 }
 
-.c2 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -217,7 +275,7 @@ Object {
   animation: hWAzxx 0.2s ease-in-out forwards;
 }
 
-.c3 {
+.c4 {
   width: 0;
   height: 0;
   overflow: hidden;
@@ -225,37 +283,37 @@ Object {
 }
 
 @media only screen and (max-width:768px) {
-  .c4 {
+  .c5 {
     padding: 12px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c6 {
+  .c7 {
     padding-top: 24px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c8 {
+  .c9 {
     width: 6px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c5 {
+  .c6 {
     margin-top: 0px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c5 {
+  .c6 {
     margin-bottom: 12px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c0 {
+  .c1 {
     position: fixed;
     width: 100%;
     height: 100%;
@@ -264,26 +322,17 @@ Object {
 }
 
 @media only screen and (max-width:768px) {
-  .c1 {
+  .c2 {
     position: relative;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c2 {
+  .c3 {
     position: relative;
     max-height: none;
     max-width: none;
     border-radius: 0;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    -webkit-transform: none;
-    -ms-transform: none;
-    transform: none;
-    -webkit-animation: none;
-    animation: none;
     height: 100vh;
     width: 100vw;
   }
@@ -292,41 +341,46 @@ Object {
 <body
     style=""
   >
-    <div />
+    <div>
+      <div
+        class="c0"
+        style="min-height: 100vh;"
+      />
+    </div>
     <div>
       <div
         aria-hidden="false"
       >
         <div
-          class="c0"
+          class="c1"
           tabindex="-1"
         >
           <div
-            class="c1"
+            class="c2"
           />
           <div
-            class="c2"
+            class="c3"
             data-g-portal-id="0"
           >
             <a
               aria-hidden="true"
-              class="c3"
+              class="c4"
               tabindex="-1"
             />
             <div
-              class="c4"
+              class="c5"
             >
               <h1
-                class="c5"
+                class="c6"
                 size="1"
               >
                 Select the wallets to open
               </h1>
               <div
-                class="c6"
+                class="c7"
               >
                 <button
-                  class="c7"
+                  class="c8"
                   disabled=""
                   style="border-radius: 4px;"
                   type="button"
@@ -334,10 +388,10 @@ Object {
                   Cancel
                 </button>
                 <div
-                  class="c8"
+                  class="c9"
                 />
                 <button
-                  class="c9"
+                  class="c10"
                   data-testid="ledger-open-accounts"
                   disabled=""
                   style="border-radius: 4px;"
@@ -352,7 +406,12 @@ Object {
       </div>
     </div>
   </body>,
-  "container": <div />,
+  "container": <div>
+    <div
+      class="StyledGrommet-sc-19lkkz7-0 jnsIXl"
+      style="min-height: 100vh;"
+    />
+  </div>,
   "debug": [Function],
   "findAllByAltText": [Function],
   "findAllByDisplayValue": [Function],
diff --git a/src/app/pages/OpenWalletPage/Features/FromLedger/__tests__/index.test.tsx b/src/app/pages/OpenWalletPage/Features/FromLedger/__tests__/index.test.tsx
index 93215a2470..c52c18ecd5 100644
--- a/src/app/pages/OpenWalletPage/Features/FromLedger/__tests__/index.test.tsx
+++ b/src/app/pages/OpenWalletPage/Features/FromLedger/__tests__/index.test.tsx
@@ -6,6 +6,7 @@ import { walletActions } from 'app/state/wallet'
 import * as React from 'react'
 import { Provider, useDispatch } from 'react-redux'
 import { configureAppStore } from 'store/configureStore'
+import { ThemeProvider } from 'styles/theme/ThemeProvider'
 
 import { FromLedger } from '..'
 
@@ -25,7 +26,9 @@ jest.mock('react-redux', () => ({
 const renderComponent = (store, abortFunction = () => {}) =>
   render(
     <Provider store={store}>
-      <FromLedger abort={abortFunction} />
+      <ThemeProvider>
+        <FromLedger abort={abortFunction} />
+      </ThemeProvider>
     </Provider>,
   )
 
@@ -67,7 +70,7 @@ describe('<FromLedger  />', () => {
 
     store.dispatch(ledgerActions.setStep(LedgerStep.Done))
     expect(
-      component.getByText('oasis1 qzyq axes tzlu m26e 2vdg vker m6d9 qgdp 7gh2 pxqe'),
+      component.getByText('oasis1qzyq...7gh2pxqe'),
     ).toBeInTheDocument()
   })
 
@@ -96,7 +99,7 @@ describe('<FromLedger  />', () => {
     )
 
     store.dispatch(ledgerActions.setStep(LedgerStep.Done))
-    userEvent.click(screen.getByText('oasis1 qzyq axes tzlu m26e 2vdg vker m6d9 qgdp 7gh2 pxqe'))
+    userEvent.click(screen.getByText('oasis1qzyq...7gh2pxqe'))
     expect(dispatchFn).toHaveBeenLastCalledWith({ payload: 0, type: ledgerActions.toggleAccount.type })
     store.dispatch(ledgerActions.toggleAccount(0))
 
diff --git a/src/app/pages/OpenWalletPage/Features/FromMnemonic/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/OpenWalletPage/Features/FromMnemonic/__tests__/__snapshots__/index.test.tsx.snap
index de8cf3caaa..b127c17c15 100644
--- a/src/app/pages/OpenWalletPage/Features/FromMnemonic/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/OpenWalletPage/Features/FromMnemonic/__tests__/__snapshots__/index.test.tsx.snap
@@ -202,6 +202,26 @@ exports[`<FromMnemonic/> should match snapshot 1`] = `
   border: 0;
 }
 
+.c13:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c13:focus:not(:focus-visible) > circle,
+.c13:focus:not(:focus-visible) > ellipse,
+.c13:focus:not(:focus-visible) > line,
+.c13:focus:not(:focus-visible) > path,
+.c13:focus:not(:focus-visible) > polygon,
+.c13:focus:not(:focus-visible) > polyline,
+.c13:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c13:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
+}
+
 .c4 {
   margin: 0;
   font-size: 50px;
diff --git a/src/app/pages/OpenWalletPage/Features/FromPrivateKey/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/OpenWalletPage/Features/FromPrivateKey/__tests__/__snapshots__/index.test.tsx.snap
index f6c81f0cdd..0f8d20a674 100644
--- a/src/app/pages/OpenWalletPage/Features/FromPrivateKey/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/OpenWalletPage/Features/FromPrivateKey/__tests__/__snapshots__/index.test.tsx.snap
@@ -139,6 +139,26 @@ exports[`<FromPrivateKey  /> should match snapshot 1`] = `
   border: 0;
 }
 
+.c9:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c9:focus:not(:focus-visible) > circle,
+.c9:focus:not(:focus-visible) > ellipse,
+.c9:focus:not(:focus-visible) > line,
+.c9:focus:not(:focus-visible) > path,
+.c9:focus:not(:focus-visible) > polygon,
+.c9:focus:not(:focus-visible) > polyline,
+.c9:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c9:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
+}
+
 .c2 {
   margin: 0;
   font-size: 50px;
diff --git a/yarn.lock b/yarn.lock
index 5fdb0b0a71..7ab9e1232b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8282,34 +8282,26 @@ graceful-fs@^4.0.0, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2
   resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz"
   integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
-grommet-icons@4.6.0:
+grommet-icons@4.6.0, grommet-icons@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/grommet-icons/-/grommet-icons-4.6.0.tgz#f5933a4cc23a4c70d2378f12391643e49a542e5b"
   integrity sha512-ytnFHPvCEDv7dUZddXUDxG/r/2Mbiq1MDy+kbmCelLXZ09B2zyC2N9KQPKHsm/XbJV6LnOnwchz2pobdz0OITQ==
   dependencies:
     grommet-styles "^0.2.0"
 
-grommet-icons@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.npmjs.org/grommet-icons/-/grommet-icons-4.5.0.tgz"
-  integrity sha512-q7TNXV996fDh2e++7WapiNFUk0UEll17iEZ2d75W4yz+8Bb3+vdQ1MeT/d1RRlM0pV2KnTpSeR00GeN4KA9upg==
-  dependencies:
-    grommet-styles "^0.2.0"
-
 grommet-styles@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/grommet-styles/-/grommet-styles-0.2.0.tgz"
   integrity sha512-0OMSYuGeyifYKpg4Gv2HzL8rUdd0ddnJ5LbCBKgDuloC71XIwr9g/Fxa6rs737MbPV7OZ4pEm4wvrjH4epzf1A==
 
-grommet@2.17.2:
-  version "2.17.2"
-  resolved "https://registry.yarnpkg.com/grommet/-/grommet-2.17.2.tgz#04ce3aae1087808d014e676f7798a005771db767"
-  integrity sha512-0p5H+kiDfysUQ+tsuya1rn4Eys3eSdmlqEQWgROFXzPUaJODFG9uaggmTsJqPMK0MqgIlmDV/5FxdUYMXjJMtw==
+grommet@2.17.4:
+  version "2.17.4"
+  resolved "https://registry.yarnpkg.com/grommet/-/grommet-2.17.4.tgz#443241c04ab839b08493748ec052db9732e48105"
+  integrity sha512-RUdYExaaFQvNkAPEixPm1LxiZ6Bejek5w5t7yI3+QhjCBmQNmfSoQfpopJntTL8IuX1aZR4XGVyT8hcnxmhapQ==
   dependencies:
-    grommet-icons "^4.5.0"
+    grommet-icons "^4.6.0"
     hoist-non-react-statics "^3.2.0"
-    markdown-to-jsx "^6.11.4"
-    polished "^3.4.1"
+    markdown-to-jsx "^7.1.3"
     prop-types "^15.7.2"
     react-desc "^4.1.3"
 
@@ -11126,13 +11118,10 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
-markdown-to-jsx@^6.11.4:
-  version "6.11.4"
-  resolved "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-6.11.4.tgz"
-  integrity sha512-3lRCD5Sh+tfA52iGgfs/XZiw33f7fFX9Bn55aNnVNUd2GzLDkOWyKYYD8Yju2B1Vn+feiEdgJs8T6Tg0xNokPw==
-  dependencies:
-    prop-types "^15.6.2"
-    unquote "^1.1.0"
+markdown-to-jsx@^7.1.3:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-7.1.3.tgz#f00bae66c0abe7dd2d274123f84cb6bd2a2c7c6a"
+  integrity sha512-jtQ6VyT7rMT5tPV0g2EJakEnXLiPksnvlYtwQsVVZ611JsWGN8bQ1tVSDX4s6JllfEH6wmsYxNjTUAMrPmNA8w==
 
 marked-terminal@^4.1.1:
   version "4.1.1"
@@ -12946,13 +12935,6 @@ pnp-webpack-plugin@1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
-polished@^3.4.1:
-  version "3.7.1"
-  resolved "https://registry.npmjs.org/polished/-/polished-3.7.1.tgz"
-  integrity sha512-/QgHrNGYwIA4mwxJ/7FSvalUJsm7KNfnXiScVSEG2Xa5qxDeBn4nmdjN2pW00mkM2Tts64ktc47U8F7Ed1BRAA==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-
 portable-fetch@3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/portable-fetch/-/portable-fetch-3.0.0.tgz"
@@ -17126,7 +17108,7 @@ unpipe@1.0.0, unpipe@~1.0.0:
   resolved "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz"
   integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
 
-unquote@^1.1.0, unquote@~1.1.1:
+unquote@~1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz"
   integrity sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=