diff --git a/packages/extension-ui/src/components/View.tsx b/packages/extension-ui/src/components/View.tsx
index a9142f251e0..28f6b3c320a 100644
--- a/packages/extension-ui/src/components/View.tsx
+++ b/packages/extension-ui/src/components/View.tsx
@@ -3,8 +3,8 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React, { useState } from 'react';
-import styled, { ThemeProvider } from 'styled-components';
-import { AvailableThemes, chooseTheme, themes, ThemeSwitchContext } from '.';
+import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
+import { AvailableThemes, chooseTheme, themes, ThemeSwitchContext, Theme } from '.';
 
 interface Props {
   children: React.ReactNode;
@@ -22,6 +22,7 @@ function View ({ children, className }: Props): React.ReactElement<Props> {
   return (
     <ThemeSwitchContext.Provider value={switchTheme}>
       <ThemeProvider theme={themes[theme]}>
+        <BodyTheme theme={themes[theme]} />
         <Main className={className}>
           {children}
         </Main>
@@ -30,6 +31,12 @@ function View ({ children, className }: Props): React.ReactElement<Props> {
   );
 }
 
+const BodyTheme = createGlobalStyle<{ theme: Theme }>`
+  body {
+    background-color: ${({ theme }): string => theme.bodyColor};
+  }
+`;
+
 const Main = styled.main`
   display: flex;
   flex-direction: column;
@@ -39,7 +46,7 @@ const Main = styled.main`
   font-size: ${({ theme }): string => theme.fontSize};
   line-height: ${({ theme }): string => theme.lineHeight};
   border: 1px solid ${({ theme }): string => theme.inputBorderColor};
-  
+
   * {
     font-family: ${({ theme }): string => theme.fontFamily};
   }
diff --git a/packages/extension-ui/src/components/themes.ts b/packages/extension-ui/src/components/themes.ts
index 38b364fb4bf..12b30bf62f0 100644
--- a/packages/extension-ui/src/components/themes.ts
+++ b/packages/extension-ui/src/components/themes.ts
@@ -5,6 +5,7 @@
 const darkTheme = {
   id: 'dark',
   background: '#181A23',
+  bodyColor: '#20222A',
   highlightedAreaBackground: '#0B0C10',
   popupBackground: '#0B0C10',
   accountBackground: '#0B0C10',
@@ -44,6 +45,7 @@ const lightTheme: Theme = {
   ...darkTheme,
   id: 'light',
   background: '#FFFFFF',
+  bodyColor: '#FFFFFF',
   highlightedAreaBackground: '#F4F5F7',
   accountBackground: '#FFFFFF',
   popupBackground: '#FFFFFF',