diff --git a/login-workflow/docs/theme.md b/login-workflow/docs/theme.md
new file mode 100644
index 00000000..13a250e8
--- /dev/null
+++ b/login-workflow/docs/theme.md
@@ -0,0 +1,100 @@
+# Using the Theme in your Project
+
+This guide will help you integrate and use the @brightlayer-ui/react-theme in your project.
+
+## Setup
+
+**Install Dependencies:**
+
+Install with npm
+
+```shell
+npm install --save @brightlayer-ui/react-themes
+```
+
+or yarn
+
+```shell
+yarn add @brightlayer-ui/react-themes
+```
+
+# Usage
+
+To use these themes in your application, simply wrap the app in a `ThemeProvider` and pass in the theme.:
+
+```tsx
+import React, { useEffect } from 'react';
+import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import { App } from './App';
+import CssBaseline from '@mui/material/CssBaseline';
+import { blueThemes } from '@brightlayer-ui/react-themes';
+import rtl from 'jss-rtl';
+import { create } from 'jss';
+import rtlPlugin from 'stylis-plugin-rtl';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import jssPreset from '@mui/styles/jssPreset';
+import '@brightlayer-ui/react-themes/open-sans';
+
+document.body.setAttribute('dir', 'rtl');
+const jss = create({
+    plugins: [...jssPreset().plugins, rtl()],
+});
+
+export const Example = (props: any): JSX.Element => {
+    const dir = useSelector((store: AppStore) => store.app.direction); 
+
+    const cacheRtl = createCache({
+        key: dir === 'rtl' ? 'cssrtl' : 'cssltr',
+        prepend: true,
+        stylisPlugins: [rtlPlugin],
+    });
+
+    const cacheLtr = createCache({
+        key: dir === 'ltr' ? 'cssltr' : 'cssrtl',
+        prepend: true,
+        stylisPlugins: dir === 'ltr' ? undefined : [rtlPlugin],
+    });
+
+    useEffect(() => {
+        document.body.dir = dir;
+    }, [dir]);
+
+return(
+    <React.StrictMode>
+        <StyledEngineProvider injectFirst>
+            <ThemeProvider theme={{...blueThemes, direction: dir}}>
+             <CacheProvider value={dir === 'ltr' ? cacheLtr : cacheRtl}>
+                <CssBaseline />
+                <App />
+            </CacheProvider>
+            </ThemeProvider>
+        </StyledEngineProvider>
+    </React.StrictMode>
+);
+```
+
+By Default the theme will take system's mode. To set your mode(light/dark), make use of `useColorScheme()` hook to set and use theme modes using helpers `mode` & `setMode` of `useColorScheme()`.
+
+## Example to use useColorScheme() hook
+
+```tsx
+import { useEffect } from 'react';
+import { useColorScheme } from '@mui/material/styles';
+
+export const App = (): JSX.Element => {
+    const { setMode } = useColorScheme();
+
+    useEffect(() => {
+        setMode('light');
+    }, []);
+
+    return (
+        <>
+            <BrowserRouter basename={'/'}>
+                <AppRouter />
+            </BrowserRouter>
+        </>
+    );
+};
+```
diff --git a/login-workflow/example-vite/src/main.tsx b/login-workflow/example-vite/src/main.tsx
index 9a67218f..20d10e72 100644
--- a/login-workflow/example-vite/src/main.tsx
+++ b/login-workflow/example-vite/src/main.tsx
@@ -4,6 +4,7 @@ import { App } from './App';
 import CssBaseline from '@mui/material/CssBaseline';
 import { blueThemes } from '@brightlayer-ui/react-themes';
 import { createRoot } from 'react-dom/client';
+import type {} from '@mui/material/themeCssVarsAugmentation';
 
 createRoot(document.getElementById('root')!).render(
     // Enable Strict Mode for more error checking