diff --git a/public/locales/uk/translation.json b/public/locales/ua/translation.json
similarity index 100%
rename from public/locales/uk/translation.json
rename to public/locales/ua/translation.json
diff --git a/src/App.tsx b/src/App.tsx
index 8499418..187b47b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,18 +1,10 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import React, {useEffect} from 'react';
+import React from 'react';
 import {Provider} from 'react-redux';
-import {useTranslation} from 'react-i18next';
 
 import store from './redux/store';
 import Theme from './Theme';
 
 const App = () => {
-    const {i18n} = useTranslation();
-
-    useEffect(() => {
-        i18n.changeLanguage(navigator.language);
-    }, []);
-
     return (
         <Provider store={store}>
             <Theme />
diff --git a/src/Routes/Routes.tsx b/src/Routes/Routes.tsx
index 1ea25bb..298c077 100644
--- a/src/Routes/Routes.tsx
+++ b/src/Routes/Routes.tsx
@@ -23,7 +23,6 @@ import RecoveryPassword from '../pages/Auth/RecoveryPassword';
 import Plan from '../pages/Plan';
 import CheckEmail from '../pages/Auth/CheckEmail';
 import Main from '../pages/Main';
-import PlanLayout from '../layouts/PlanLayout';
 import Profile from '../pages/Profile/Profile';
 import ProtectedRoute from '../components/routes/ProtectedRoute';
 
@@ -93,9 +92,7 @@ const Routes: React.FC = () => {
                 </Route>
                 <Route path="/" element={<MainLayout />}>
                     <Route path={'/'} element={<Main />} />
-                    <Route path={PLAN_PATH} element={<PlanLayout />}>
-                        <Route path={PLAN_PATH} element={<Plan />} />
-                    </Route>
+                    <Route path={PLAN_PATH} element={<Plan />} />
                 </Route>
             </RootRoutes>
         </Router>
diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
index 3e55c5c..92eb7c2 100644
--- a/src/components/Map/Map.tsx
+++ b/src/components/Map/Map.tsx
@@ -1,20 +1,15 @@
 import React, {useCallback, useEffect, useState} from 'react';
-import {GoogleMap, useJsApiLoader, Marker} from '@react-google-maps/api';
+import {GoogleMap, Marker} from '@react-google-maps/api';
 import {useSelector} from 'react-redux';
 
 import {selectUserCoords} from '../../redux/common/selectors';
 import {useAppDispatch} from '../../redux/store';
 import {setUserCoords} from '../../redux/common/commonSlice';
-import {containerStyle, libraries} from './constants';
+import {containerStyle} from './constants';
 
 import {MapWrap} from './Styles';
 
 const Map = () => {
-    const {isLoaded} = useJsApiLoader({
-        googleMapsApiKey: process.env.REACT_APP_GOOGLE_API_KEY || '',
-        libraries,
-    });
-
     const [markersData, setMarkersData] = useState<google.maps.places.PlaceResult[]>([]);
 
     const coords = useSelector(selectUserCoords);
@@ -63,34 +58,32 @@ const Map = () => {
 
     return (
         <MapWrap>
-            {isLoaded ? (
-                <GoogleMap
-                    mapContainerStyle={containerStyle}
-                    center={coords}
-                    zoom={10}
-                    onLoad={onLoad}
-                    clickableIcons={false}
-                    options={{
-                        scrollwheel: true,
-                        streetViewControl: false,
-                        zoomControl: false,
-                        mapTypeControlOptions: {
-                            position: 7.0,
-                            style: 2.0,
-                        },
-                    }}>
-                    {markersData.map((item, index) => (
-                        <Marker
-                            key={index}
-                            position={{
-                                lat: item.geometry?.location?.lat() || 0,
-                                lng: item.geometry?.location?.lng() || 0,
-                            }}
-                        />
-                    ))}
-                    <Marker position={coords} />
-                </GoogleMap>
-            ) : null}
+            <GoogleMap
+                mapContainerStyle={containerStyle}
+                center={coords}
+                zoom={10}
+                onLoad={onLoad}
+                clickableIcons={false}
+                options={{
+                    scrollwheel: true,
+                    streetViewControl: false,
+                    zoomControl: false,
+                    mapTypeControlOptions: {
+                        position: 7.0,
+                        style: 2.0,
+                    },
+                }}>
+                {markersData.map((item, index) => (
+                    <Marker
+                        key={index}
+                        position={{
+                            lat: item.geometry?.location?.lat() || 0,
+                            lng: item.geometry?.location?.lng() || 0,
+                        }}
+                    />
+                ))}
+                <Marker position={coords} />
+            </GoogleMap>
         </MapWrap>
     );
 };
diff --git a/src/components/Map/constants.ts b/src/components/Map/constants.ts
index 3e69326..b9555f3 100644
--- a/src/components/Map/constants.ts
+++ b/src/components/Map/constants.ts
@@ -2,9 +2,3 @@ export const containerStyle = {
     width: '100%',
     height: '100%',
 };
-
-export const libraries: ('drawing' | 'geometry' | 'places' | 'localContext' | 'visualization')[] = [
-    'drawing',
-    'geometry',
-    'places',
-];
diff --git a/src/components/common/Navigation/Navigation.tsx b/src/components/common/Navigation/Navigation.tsx
index 09a9aa9..cba13ba 100644
--- a/src/components/common/Navigation/Navigation.tsx
+++ b/src/components/common/Navigation/Navigation.tsx
@@ -2,6 +2,7 @@ import React, {useState} from 'react';
 import {useSelector} from 'react-redux';
 import {useNavigate} from 'react-router-dom';
 import {Grid, IconButton} from '@mui/material';
+import {changeLanguage} from 'i18next';
 
 import {ReactComponent as ProfileIcon} from '../../../assets/icons/profile.svg';
 import {ReactComponent as LogoIcon} from '../../../assets/icons/logo.svg';
@@ -24,6 +25,7 @@ const Navigation = () => {
     const navigate = useNavigate();
     const dispatch = useAppDispatch();
     const user = useSelector(selectUser);
+
     const handleRedirect = (path: string) => {
         navigate(path);
     };
@@ -40,8 +42,12 @@ const Navigation = () => {
         setAnchorEl(null);
     };
 
-    const handleLanguage = () => {
-        dispatch(changeUserLanguage(user.language));
+    const handleLanguage = (value: string) => {
+        if (value === user.language) return;
+
+        dispatch(changeUserLanguage(value)).then((res) => {
+            res.meta.requestStatus === 'fulfilled' && changeLanguage(res.payload as string);
+        });
     };
 
     return (
@@ -59,7 +65,7 @@ const Navigation = () => {
                             {isEditing && (
                                 <Select
                                     defaultValue={user.language}
-                                    onChange={handleLanguage}
+                                    parentOnChange={(value) => handleLanguage(value)}
                                     name="language"
                                     options={[
                                         {id: 'en', displayName: 'English'},
diff --git a/src/components/common/form/GoogleAutocompleteControl.tsx b/src/components/common/form/GoogleAutocompleteControl.tsx
index bdd5bad..74836eb 100644
--- a/src/components/common/form/GoogleAutocompleteControl.tsx
+++ b/src/components/common/form/GoogleAutocompleteControl.tsx
@@ -16,9 +16,7 @@ const GoogleAutocompleteControl = <T extends FieldValues>({
     control,
     name,
 }: IGoogleAutocompleteProps<T> & TextFieldProps) => {
-    const {placesService, placePredictions, getPlacePredictions} = usePlacesService({
-        apiKey: process.env.REACT_APP_GOOGLE_API_KEY || '',
-    });
+    const {placesService, placePredictions, getPlacePredictions} = usePlacesService({});
 
     const [options, setOptions] = useState<google.maps.GeocoderAddressComponent[]>([]);
 
diff --git a/src/components/common/form/SelectControl.tsx b/src/components/common/form/SelectControl.tsx
index 154cf4b..3e8bcf4 100644
--- a/src/components/common/form/SelectControl.tsx
+++ b/src/components/common/form/SelectControl.tsx
@@ -25,18 +25,7 @@ export const SelectControl: React.FC<IProps> = ({control, name, options, label,
         helperText: <ErrorMessage errors={errors} name={name} render={({message}) => message} />,
     };
 
-    return (
-        <Select
-            field={field}
-            onChange={field.onChange}
-            value={field.value}
-            name={name}
-            options={options}
-            label={label}
-            {...restProps}
-            {...errorProps}
-        />
-    );
+    return <Select field={field} name={name} options={options} label={label} {...restProps} {...errorProps} />;
 };
 
 export default SelectControl;
diff --git a/src/components/common/inputs/Select.tsx b/src/components/common/inputs/Select.tsx
index 52e2dc1..8209465 100644
--- a/src/components/common/inputs/Select.tsx
+++ b/src/components/common/inputs/Select.tsx
@@ -9,7 +9,7 @@ interface IProps {
     options: {id: string; displayName: string}[];
     label?: string;
     value?: string;
-    onChange: (value: string) => void;
+    parentOnChange?: (value: string) => void;
     defaultValue?: string;
 }
 
@@ -20,16 +20,16 @@ const Select: React.FC<IProps & SelectProps> = ({
     defaultValue = '',
     label,
     value,
-    onChange,
+    parentOnChange,
     ...textFieldProps
 }) => {
-    const [selectedValue, setSelectedValue] = useState(defaultValue);
+    const [selectedValue, setSelectedValue] = useState('');
 
     const handleChange = useCallback(
-        (e: SelectChangeEvent<unknown>) => {
-            const value = e.target.value as string;
-            if (onChange) {
-                onChange(value);
+        (e: SelectChangeEvent<string>) => {
+            const value = e.target.value;
+            if (parentOnChange) {
+                parentOnChange(value);
             }
 
             if (field?.onChange) {
@@ -38,12 +38,12 @@ const Select: React.FC<IProps & SelectProps> = ({
 
             setSelectedValue(value);
         },
-        [field, onChange],
+        [field, parentOnChange],
     );
 
     const initValue = useCallback(() => {
-        setSelectedValue(value || field?.value || '');
-    }, [value, field]);
+        setSelectedValue(value || field?.value || defaultValue || '');
+    }, [value, field?.value, defaultValue]);
 
     useEffect(() => {
         initValue();
diff --git a/src/layouts/GoogleMapsLoader/GoogleMapsLoader.tsx b/src/layouts/GoogleMapsLoader/GoogleMapsLoader.tsx
new file mode 100644
index 0000000..60a6356
--- /dev/null
+++ b/src/layouts/GoogleMapsLoader/GoogleMapsLoader.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import {LoadScript} from '@react-google-maps/api';
+import {Grid} from '@mui/material';
+import {FormProvider, UseFormReturn} from 'react-hook-form';
+
+import GoogleAutocompleteControl from '../../components/common/form/GoogleAutocompleteControl';
+import Map from '../../components/Map';
+import {IPlan} from '../../pages/Plan/types';
+import {libraries} from './constants';
+
+type Props = {
+    children?: React.ReactNode;
+    methods: UseFormReturn<IPlan, any>;
+};
+
+const GoogleMapsLoader: React.FC<Props> = ({children, methods}) => {
+    const googleMapsApiKey = process.env.REACT_APP_GOOGLE_API_KEY || '';
+
+    return (
+        <LoadScript googleMapsApiKey={googleMapsApiKey} libraries={libraries} loadingElement={<div>Loading...</div>}>
+            <Grid container height="100%">
+                <Grid item xs={6} px={2}>
+                    <FormProvider {...methods}>
+                        <form>
+                            <Grid container>
+                                <Grid item xs={6}>
+                                    <GoogleAutocompleteControl name="search" control={methods.control} />
+                                </Grid>
+                            </Grid>
+                        </form>
+                    </FormProvider>
+                </Grid>
+                <Grid item xs={6}>
+                    <Map />
+                </Grid>
+            </Grid>
+            {children}
+        </LoadScript>
+    );
+};
+
+export default GoogleMapsLoader;
diff --git a/src/layouts/GoogleMapsLoader/constants.ts b/src/layouts/GoogleMapsLoader/constants.ts
new file mode 100644
index 0000000..7e2f1c6
--- /dev/null
+++ b/src/layouts/GoogleMapsLoader/constants.ts
@@ -0,0 +1,5 @@
+export const libraries: ('drawing' | 'geometry' | 'places' | 'localContext' | 'visualization')[] = [
+    'drawing',
+    'geometry',
+    'places',
+];
diff --git a/src/layouts/GoogleMapsLoader/index.ts b/src/layouts/GoogleMapsLoader/index.ts
new file mode 100644
index 0000000..24dbcdc
--- /dev/null
+++ b/src/layouts/GoogleMapsLoader/index.ts
@@ -0,0 +1,3 @@
+import GoogleMapsLoader from './GoogleMapsLoader';
+
+export default GoogleMapsLoader;
diff --git a/src/layouts/PlanLayout/PlanLayout.tsx b/src/layouts/PlanLayout/PlanLayout.tsx
deleted file mode 100644
index 503bab1..0000000
--- a/src/layouts/PlanLayout/PlanLayout.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import {Grid} from '@mui/material';
-import {Outlet} from 'react-router-dom';
-
-import Map from '../../components/Map';
-
-const PlanLayout = () => {
-    return (
-        <Grid container height="100%">
-            <Grid item xs={6} px={2}>
-                <Outlet />
-            </Grid>
-            <Grid item xs={6}>
-                <Map />
-            </Grid>
-        </Grid>
-    );
-};
-
-export default PlanLayout;
diff --git a/src/layouts/PlanLayout/index.ts b/src/layouts/PlanLayout/index.ts
deleted file mode 100644
index 06e1f3d..0000000
--- a/src/layouts/PlanLayout/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import PlanLayout from './PlanLayout';
-
-export default PlanLayout;
diff --git a/src/pages/Plan/Plan.tsx b/src/pages/Plan/Plan.tsx
index 907ea74..8405dda 100644
--- a/src/pages/Plan/Plan.tsx
+++ b/src/pages/Plan/Plan.tsx
@@ -1,30 +1,18 @@
 import React from 'react';
-import {useForm, FormProvider} from 'react-hook-form';
+import {useForm} from 'react-hook-form';
 import {yupResolver} from '@hookform/resolvers/yup';
-import {Grid} from '@mui/material';
 
 import {IPlan} from './types';
 import {defaultValues, validation} from './form';
-import GoogleAutocompleteControl from '../../components/common/form/GoogleAutocompleteControl';
+import GoogleMapsLoader from '../../layouts/GoogleMapsLoader';
 
 const Plan = () => {
     const methods = useForm<IPlan>({
         resolver: yupResolver(validation),
         defaultValues,
     });
-    const {control} = methods;
 
-    return (
-        <FormProvider {...methods}>
-            <form>
-                <Grid container>
-                    <Grid item xs={6}>
-                        <GoogleAutocompleteControl name="search" control={control} />
-                    </Grid>
-                </Grid>
-            </form>
-        </FormProvider>
-    );
+    return <GoogleMapsLoader methods={methods} />;
 };
 
 export default Plan;
diff --git a/src/redux/auth/authSlice.ts b/src/redux/auth/authSlice.ts
index d2b0661..6ea6259 100644
--- a/src/redux/auth/authSlice.ts
+++ b/src/redux/auth/authSlice.ts
@@ -1,5 +1,13 @@
 import {ISlicesNames} from '../types';
-import {activateUser, changeUserName, fetchUser, logInUser, logoutUser} from './thunks';
+import {
+    activateUser,
+    changeUserName,
+    fetchUser,
+    logInUser,
+    logoutUser,
+    changeUserTheme,
+    changeUserLanguage,
+} from './thunks';
 import createGenericSlice from '../createGenericSlice';
 import {saveToken} from '../../services/utils';
 import {IAuthState} from './types';
@@ -12,8 +20,8 @@ const initialData = {
         id: '',
         name: '',
         email: '',
-        language: '',
-        theme: '',
+        language: 'en',
+        theme: IThemeNames.light,
     },
 };
 
@@ -42,6 +50,12 @@ export const authData = createGenericSlice<IAuthState, typeof reducers>({
         builder.addCase(changeUserName.fulfilled, (state, action) => {
             state.data.user.name = action.payload.name;
         });
+        builder.addCase(changeUserTheme.fulfilled, (state, action) => {
+            state.data.user.theme = action.payload;
+        });
+        builder.addCase(changeUserLanguage.fulfilled, (state, action) => {
+            state.data.user.language = action.payload;
+        });
         builder.addMatcher(
             (action) => action.type === logInUser.fulfilled.type || action.type === activateUser.fulfilled.type,
             (state, action) => {
diff --git a/src/redux/auth/thunks.ts b/src/redux/auth/thunks.ts
index d10aff4..5b941c0 100644
--- a/src/redux/auth/thunks.ts
+++ b/src/redux/auth/thunks.ts
@@ -1,5 +1,4 @@
 import {createAsyncThunk} from '@reduxjs/toolkit';
-import {changeLanguage} from 'i18next';
 
 import {authThunkNames} from './constants';
 import {ISlicesNames} from '../types';
@@ -13,6 +12,7 @@ import {
     register,
     resetPassword,
     changeTheme,
+    changeLanguage,
 } from '../../services/auth';
 import {changeName, changePassword} from '../../services/profile';
 import {handleResponse} from '../utils';
diff --git a/src/redux/common/commonSlice.ts b/src/redux/common/commonSlice.ts
index 15c4eb9..b040502 100644
--- a/src/redux/common/commonSlice.ts
+++ b/src/redux/common/commonSlice.ts
@@ -1,6 +1,6 @@
 import {ISlicesNames} from '../types';
 import createGenericSlice, {IGenericState} from '../createGenericSlice';
-import {ICommonState, IThemeNames} from './types';
+import {ICommonState} from './types';
 
 const reducers = {
     setUserCoords: (state: IGenericState<ICommonState>, action: {payload: {lat: number; lng: number}}) => {
@@ -9,7 +9,6 @@ const reducers = {
 };
 
 const initialData = {
-    theme: IThemeNames.light,
     userCoords: {lat: 49.82, lng: 24.03},
 };
 
diff --git a/src/services/auth/index.ts b/src/services/auth/index.ts
index f9ed0e3..ea9fc86 100644
--- a/src/services/auth/index.ts
+++ b/src/services/auth/index.ts
@@ -40,10 +40,10 @@ export const recoveryPassword = async (data: RecoveryPasswordRequest) => {
 
 export const changeLanguage = async (language: string) => {
     const request = {url: '/change-language', body: {language}};
-    return fetchWrap({request, isAuth: true, method: 'POST'});
+    return fetchWrap({request, method: 'POST'});
 };
 
 export const changeTheme = async (theme: string) => {
     const request = {url: '/change-theme', body: {theme}};
-    return fetchWrap({request, isAuth: true, method: 'POST'});
+    return fetchWrap({request, method: 'POST'});
 };