diff --git a/redisinsight/ui/src/App.tsx b/redisinsight/ui/src/App.tsx
index 8f4a787b2a..5ec12ef2b7 100644
--- a/redisinsight/ui/src/App.tsx
+++ b/redisinsight/ui/src/App.tsx
@@ -19,7 +19,6 @@ import {
 } from './components'
 import { ThemeProvider } from './contexts/themeContext'
 import MainComponent from './components/main/MainComponent'
-import ThemeComponent from './components/theme/ThemeComponent'
 import MonacoEnvironmentInitializer from './components/MonacoEnvironmentInitializer/MonacoEnvironmentInitializer'
 import GlobalDialogs from './components/global-dialogs'
 import NotFoundErrorPage from './pages/not-found-error/NotFoundErrorPage'
@@ -51,7 +50,6 @@ const App = ({ children }: { children?: ReactElement[] }) => {
   }, [serverLoading])
   return (
     <div className="main-container">
-      <ThemeComponent />
       <MonacoEnvironmentInitializer />
       <Switch>
         <Route exact path={Pages.notFound} component={NotFoundErrorPage} />
diff --git a/redisinsight/ui/src/components/theme/ThemeComponent.spec.tsx b/redisinsight/ui/src/components/theme/ThemeComponent.spec.tsx
deleted file mode 100644
index b7e960f953..0000000000
--- a/redisinsight/ui/src/components/theme/ThemeComponent.spec.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import { render } from 'uiSrc/utils/test-utils'
-
-import ThemeComponent from './ThemeComponent'
-
-describe('ThemeComponent', () => {
-  it('should render', () => {
-    expect(render(<ThemeComponent />)).toBeTruthy()
-  })
-})
diff --git a/redisinsight/ui/src/components/theme/ThemeComponent.tsx b/redisinsight/ui/src/components/theme/ThemeComponent.tsx
deleted file mode 100644
index f6ce856848..0000000000
--- a/redisinsight/ui/src/components/theme/ThemeComponent.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { useContext, useEffect } from 'react'
-import {
-  BrowserStorageItem,
-  Theme,
-  THEME_MATCH_MEDIA_DARK,
-} from 'uiSrc/constants'
-import { localStorageService } from 'uiSrc/services'
-import { ThemeContext } from 'uiSrc/contexts/themeContext'
-
-const ThemeComponent = () => {
-  const themeContext = useContext(ThemeContext)
-  useEffect(() => {
-    const handler = (event) => {
-      let theme = localStorageService.get(BrowserStorageItem.theme)
-      if (theme === Theme.System) {
-        themeContext.changeTheme(theme)
-      }
-    }
-
-    window
-      .matchMedia(THEME_MATCH_MEDIA_DARK)
-      .addEventListener('change', handler)
-
-    return () => {
-      window
-        .matchMedia(THEME_MATCH_MEDIA_DARK)
-        .removeEventListener('change', handler)
-    }
-  }, [])
-
-  return <></>
-}
-
-export default ThemeComponent
diff --git a/redisinsight/ui/src/contexts/themeContext.tsx b/redisinsight/ui/src/contexts/themeContext.tsx
index 5f9237bea7..60d814dabf 100644
--- a/redisinsight/ui/src/contexts/themeContext.tsx
+++ b/redisinsight/ui/src/contexts/themeContext.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { ThemeProvider as StyledThemeProvider } from 'styled-components'
 import {
   theme as redisUiOldTheme,
@@ -44,6 +44,10 @@ export const defaultState = {
   },
 }
 
+export const isValidTheme = (theme: unknown): theme is Theme => {
+  return typeof theme === 'string' && THEME_NAMES.includes(theme as Theme)
+}
+
 export const ThemeContext = React.createContext(defaultState)
 
 export class ThemeProvider extends React.Component<Props> {
@@ -57,7 +61,7 @@ export class ThemeProvider extends React.Component<Props> {
 
     if (queryTheme) {
       theme = queryTheme
-    } else if (storedThemeValue && THEME_NAMES.includes(storedThemeValue)) {
+    } else if (storedThemeValue && isValidTheme(storedThemeValue)) {
       theme = storedThemeValue
     }
 
@@ -120,5 +124,9 @@ export class ThemeProvider extends React.Component<Props> {
     )
   }
 }
+ 
+export const useThemeContext = () => {
+  return useContext(ThemeContext)
+}
 
 export default ThemeProvider