diff --git a/src/App.tsx b/src/App.tsx
index 445f553..0171cc4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import { Router, Switch } from 'react-router-dom';
+import { UserRoleEnum } from 'enums';
+import { useRootStore } from 'hooks/useRootStore';
 
 /**
  * Components
  */
-import PrivateRoute from 'components/PrivateRoute/PrivateRoute';
-import PublicRoute from 'components/PublicRoute/PublicRoute';
+import PrivateRoute from 'components/PrivateRoute';
+import PublicRoute from 'components/PublicRoute';
 
 /**
  * Pages
@@ -17,13 +19,12 @@ import ProfilePage from 'pages/profile';
 import ControlPage from 'pages/control';
 import AuthPage from 'pages/auth';
 import NotFoundPage from 'pages/404';
-import { UserRoleEnum } from 'enums';
-import { useRootStore } from 'hooks/useRootStore';
 
 const App = () => {
   const {
     uiStore: { history },
   } = useRootStore();
+
   return (
     <Router history={history}>
       <Switch>
diff --git a/src/api.config.ts b/src/api.config.ts
new file mode 100644
index 0000000..dca9c91
--- /dev/null
+++ b/src/api.config.ts
@@ -0,0 +1,10 @@
+import { AxiosRequestConfig } from 'axios';
+import { API_BASE_URL } from './constants';
+
+const apiConfig: AxiosRequestConfig = {
+  baseURL: API_BASE_URL,
+  responseType: 'json',
+  withCredentials: true,
+};
+
+export default apiConfig;
diff --git a/src/components/ColorModeSwitcher/ColorModeSwitcher.tsx b/src/components/ColorModeSwitcher/ColorModeSwitcher.tsx
index 4560b32..bdeb9a5 100644
--- a/src/components/ColorModeSwitcher/ColorModeSwitcher.tsx
+++ b/src/components/ColorModeSwitcher/ColorModeSwitcher.tsx
@@ -4,7 +4,7 @@ import { FaMoon, FaSun } from 'react-icons/fa';
 
 type ColorModeSwitcherProps = Omit<IconButtonProps, 'aria-label'>;
 
-export const ColorModeSwitcher: React.FC<ColorModeSwitcherProps> = props => {
+const ColorModeSwitcher: React.FC<ColorModeSwitcherProps> = props => {
   const { toggleColorMode } = useColorMode();
   const text = useColorModeValue('dark', 'light');
   const SwitchIcon = useColorModeValue(FaMoon, FaSun);
@@ -23,3 +23,5 @@ export const ColorModeSwitcher: React.FC<ColorModeSwitcherProps> = props => {
     />
   );
 };
+
+export default ColorModeSwitcher;
diff --git a/src/components/ColorModeSwitcher/index.ts b/src/components/ColorModeSwitcher/index.ts
new file mode 100644
index 0000000..af4266a
--- /dev/null
+++ b/src/components/ColorModeSwitcher/index.ts
@@ -0,0 +1,3 @@
+import ColorModeSwitcher from './ColorModeSwitcher';
+
+export default ColorModeSwitcher;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 2d18956..1a944ea 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { Flex, Box, useColorMode } from '@chakra-ui/react';
-import AppName from './AppName';
-import UserInfo from './User/UserInfo';
-import UserNotifications from './User/UserNotifications';
-import NavMobile from '../Nav/Mobile/Nav';
 import { observer } from 'mobx-react';
 import { useRootStore } from 'hooks/useRootStore';
+import { Flex, Box, useColorMode } from '@chakra-ui/react';
+import AppName from './AppName';
+import UserInfo from './UserInfo';
+import UserNotifications from './UserNotifications';
+import NavMobile from 'components/Nav/Mobile';
 
 const Header: React.FC = () => {
   const {
diff --git a/src/components/Header/User/UserInfo.tsx b/src/components/Header/UserInfo.tsx
similarity index 97%
rename from src/components/Header/User/UserInfo.tsx
rename to src/components/Header/UserInfo.tsx
index 7362e9b..c485100 100644
--- a/src/components/Header/User/UserInfo.tsx
+++ b/src/components/Header/UserInfo.tsx
@@ -17,7 +17,7 @@ import { MdSettings, MdExitToApp } from 'react-icons/md';
 import { observer } from 'mobx-react';
 import { useRootStore } from 'hooks/useRootStore';
 import { Link } from 'react-router-dom';
-import UserBadge from 'components/User/UserBadge';
+import UserBadge from 'components/UserBadge';
 import useLogoutQuery from 'hooks/useLogoutQuery';
 
 const UserInfo: React.FC = () => {
diff --git a/src/components/Header/User/UserNotifications.tsx b/src/components/Header/UserNotifications.tsx
similarity index 100%
rename from src/components/Header/User/UserNotifications.tsx
rename to src/components/Header/UserNotifications.tsx
diff --git a/src/components/Header/index.ts b/src/components/Header/index.ts
new file mode 100644
index 0000000..a9ce105
--- /dev/null
+++ b/src/components/Header/index.ts
@@ -0,0 +1,3 @@
+import Header from './Header';
+
+export default Header;
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index 1488a64..6e9541e 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { Flex, Box } from '@chakra-ui/react';
-import Header from 'components/Header/Header';
-import NavDesktop from 'components/Nav/Desktop/Nav';
 import { observer } from 'mobx-react';
-import { useRootStore } from 'hooks/useRootStore';
 import { useErrorHandler } from 'react-error-boundary';
-import { ColorModeSwitcher } from 'components/ColorModeSwitcher/ColorModeSwitcher';
+import { Flex, Box } from '@chakra-ui/react';
+import { useRootStore } from 'hooks/useRootStore';
+import Header from 'components/Header';
+import NavDesktop from 'components/Nav/Desktop';
+import ColorModeSwitcher from 'components/ColorModeSwitcher';
 
 /**
  *
diff --git a/src/components/Layout/index.ts b/src/components/Layout/index.ts
new file mode 100644
index 0000000..8b24d17
--- /dev/null
+++ b/src/components/Layout/index.ts
@@ -0,0 +1,3 @@
+import Layout from './Layout';
+
+export default Layout;
diff --git a/src/components/Loading/LoadingPage.tsx b/src/components/Loading/LoadingPage.tsx
deleted file mode 100644
index a180a8d..0000000
--- a/src/components/Loading/LoadingPage.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { Skeleton } from '@chakra-ui/skeleton';
-import { Box } from '@chakra-ui/layout';
-
-const LoadingPage: React.FC = () => {
-  return (
-    <Box>
-      <Skeleton height='20px' width='200px' mb='10' borderRadius='md' />
-      <Skeleton height='43px' width='400px' borderRadius='md' />
-    </Box>
-  );
-};
-
-export default LoadingPage;
diff --git a/src/components/Nav/Desktop/Nav.tsx b/src/components/Nav/Desktop/index.tsx
similarity index 100%
rename from src/components/Nav/Desktop/Nav.tsx
rename to src/components/Nav/Desktop/index.tsx
index 4199354..731d995 100644
--- a/src/components/Nav/Desktop/Nav.tsx
+++ b/src/components/Nav/Desktop/index.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import { Flex, Box, useColorMode } from '@chakra-ui/react';
-import NavList from '../NavList';
-import { useRootStore } from 'hooks/useRootStore';
-import { observer } from 'mobx-react';
 import config from 'config';
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Flex, Box, useColorMode } from '@chakra-ui/react';
+import { useRootStore } from 'hooks/useRootStore';
+import NavList from '../NavList';
 
 /**
  *
diff --git a/src/components/Nav/Mobile/Nav.tsx b/src/components/Nav/Mobile/index.tsx
similarity index 100%
rename from src/components/Nav/Mobile/Nav.tsx
rename to src/components/Nav/Mobile/index.tsx
diff --git a/src/components/Nav/NavLink.tsx b/src/components/Nav/NavLink.tsx
index 93c8ef5..ab7a20f 100644
--- a/src/components/Nav/NavLink.tsx
+++ b/src/components/Nav/NavLink.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
+import { observer } from 'mobx-react';
 import { Box, useColorMode } from '@chakra-ui/react';
 import type { LinkType } from 'interfaces';
-import { observer } from 'mobx-react';
 import { useRootStore } from 'hooks/useRootStore';
 
 type NavLinkPropsType = {
diff --git a/src/components/Nav/NavList.tsx b/src/components/Nav/NavList.tsx
index 41075a3..67469b3 100644
--- a/src/components/Nav/NavList.tsx
+++ b/src/components/Nav/NavList.tsx
@@ -1,11 +1,11 @@
 import React, { useCallback } from 'react';
 import { observer } from 'mobx-react';
-import NavLink from './NavLink';
+import { useHistory } from 'react-router-dom';
 import { useRootStore } from 'hooks/useRootStore';
 import { userHasRoles } from 'helpers';
 import { UserRoleEnum } from 'enums';
-import { useHistory } from 'react-router-dom';
 import { LinkType } from 'interfaces';
+import NavLink from './NavLink';
 
 type NavListPropsType = {
   links: LinkType[];
diff --git a/src/components/PrivateRoute/PrivateRoute.tsx b/src/components/PrivateRoute/PrivateRoute.tsx
index 063e0fe..fc69a52 100644
--- a/src/components/PrivateRoute/PrivateRoute.tsx
+++ b/src/components/PrivateRoute/PrivateRoute.tsx
@@ -1,12 +1,12 @@
+import config from 'config';
 import React from 'react';
 import Helmet from 'react-helmet';
-import Layout from '../Layout/Layout';
+import { ErrorBoundary } from 'react-error-boundary';
 import { Route, Redirect } from 'react-router-dom';
 import { IPrivateRouteProps } from 'interfaces';
 import { useRootStore } from 'hooks/useRootStore';
-import { ErrorBoundary } from 'react-error-boundary';
-import ErrorFallback from '../ErrorFallback';
-import config from 'config';
+import Layout from 'components/Layout';
+import ErrorFallback from 'components/ErrorFallback';
 
 /**
  * Checks if the user is loggedIn by reactive variable and if not,
diff --git a/src/components/PrivateRoute/index.ts b/src/components/PrivateRoute/index.ts
new file mode 100644
index 0000000..32a66e3
--- /dev/null
+++ b/src/components/PrivateRoute/index.ts
@@ -0,0 +1,3 @@
+import PrivateRoute from './PrivateRoute';
+
+export default PrivateRoute;
diff --git a/src/components/PublicRoute/PublicRoute.tsx b/src/components/PublicRoute/PublicRoute.tsx
index 38c1815..2668e58 100644
--- a/src/components/PublicRoute/PublicRoute.tsx
+++ b/src/components/PublicRoute/PublicRoute.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { Route } from 'react-router-dom';
 import { IPublicRouteProps } from 'interfaces';
-import ErrorFallback from '../ErrorFallback';
+import ErrorFallback from 'components/ErrorFallback';
 
 /**
  * Render public page
diff --git a/src/components/PublicRoute/index.ts b/src/components/PublicRoute/index.ts
new file mode 100644
index 0000000..7924dca
--- /dev/null
+++ b/src/components/PublicRoute/index.ts
@@ -0,0 +1,3 @@
+import PublicRoute from './PublicRoute';
+
+export default PublicRoute;
diff --git a/src/components/User/UserBadge.tsx b/src/components/UserBadge/UserBadge.tsx
similarity index 100%
rename from src/components/User/UserBadge.tsx
rename to src/components/UserBadge/UserBadge.tsx
diff --git a/src/components/UserBadge/index.ts b/src/components/UserBadge/index.ts
new file mode 100644
index 0000000..caa6b94
--- /dev/null
+++ b/src/components/UserBadge/index.ts
@@ -0,0 +1,3 @@
+import UserBadge from './UserBadge';
+
+export default UserBadge;
diff --git a/src/pages/404.tsx b/src/pages/404/index.tsx
similarity index 100%
rename from src/pages/404.tsx
rename to src/pages/404/index.tsx
diff --git a/src/components/Forms/Auth/AuthForm.tsx b/src/pages/auth/components/AuthForm/AuthForm.tsx
similarity index 100%
rename from src/components/Forms/Auth/AuthForm.tsx
rename to src/pages/auth/components/AuthForm/AuthForm.tsx
diff --git a/src/pages/auth/components/AuthForm/index.ts b/src/pages/auth/components/AuthForm/index.ts
new file mode 100644
index 0000000..15f9a31
--- /dev/null
+++ b/src/pages/auth/components/AuthForm/index.ts
@@ -0,0 +1,3 @@
+import AuthForm from './AuthForm';
+
+export default AuthForm;
diff --git a/src/pages/auth.tsx b/src/pages/auth/index.tsx
similarity index 92%
rename from src/pages/auth.tsx
rename to src/pages/auth/index.tsx
index c5d0622..19d59f6 100644
--- a/src/pages/auth.tsx
+++ b/src/pages/auth/index.tsx
@@ -6,7 +6,7 @@ import { IPageProps } from 'interfaces';
 import { Flex } from '@chakra-ui/react';
 import { useRootStore } from 'hooks/useRootStore';
 
-import AuthForm from 'components/Forms/Auth/AuthForm';
+import AuthForm from './components/AuthForm';
 
 /**
  * Auth page
diff --git a/src/pages/control.tsx b/src/pages/control/index.tsx
similarity index 100%
rename from src/pages/control.tsx
rename to src/pages/control/index.tsx
diff --git a/src/pages/courses.tsx b/src/pages/courses/index.tsx
similarity index 100%
rename from src/pages/courses.tsx
rename to src/pages/courses/index.tsx
diff --git a/src/pages/main.tsx b/src/pages/main/index.tsx
similarity index 100%
rename from src/pages/main.tsx
rename to src/pages/main/index.tsx
diff --git a/src/pages/messages.tsx b/src/pages/messages/index.tsx
similarity index 100%
rename from src/pages/messages.tsx
rename to src/pages/messages/index.tsx
diff --git a/src/components/Loading/LoadingProfilePage.tsx b/src/pages/profile/components/LoadingPage/LoadingPage.tsx
similarity index 90%
rename from src/components/Loading/LoadingProfilePage.tsx
rename to src/pages/profile/components/LoadingPage/LoadingPage.tsx
index 6f17414..c8d01ae 100644
--- a/src/components/Loading/LoadingProfilePage.tsx
+++ b/src/pages/profile/components/LoadingPage/LoadingPage.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, Skeleton, SkeletonCircle, Flex, Spinner } from '@chakra-ui/react';
 
-const LoadingProfilePage = () => {
+const LoadingPage = () => {
   return (
     <Box maxW='900px'>
       <Skeleton height='35px' width='250px' borderRadius='md' />
@@ -21,4 +21,4 @@ const LoadingProfilePage = () => {
   );
 };
 
-export default LoadingProfilePage;
+export default LoadingPage;
diff --git a/src/pages/profile/components/LoadingPage/index.ts b/src/pages/profile/components/LoadingPage/index.ts
new file mode 100644
index 0000000..f661969
--- /dev/null
+++ b/src/pages/profile/components/LoadingPage/index.ts
@@ -0,0 +1,3 @@
+import LoadingPage from './LoadingPage';
+
+export default LoadingPage;
diff --git a/src/components/Forms/User/UpdateUserContactsForm.tsx b/src/pages/profile/components/UpdateUserContactsForm/UpdateUserContactsForm.tsx
similarity index 100%
rename from src/components/Forms/User/UpdateUserContactsForm.tsx
rename to src/pages/profile/components/UpdateUserContactsForm/UpdateUserContactsForm.tsx
diff --git a/src/pages/profile/components/UpdateUserContactsForm/index.ts b/src/pages/profile/components/UpdateUserContactsForm/index.ts
new file mode 100644
index 0000000..b90a73c
--- /dev/null
+++ b/src/pages/profile/components/UpdateUserContactsForm/index.ts
@@ -0,0 +1,3 @@
+import UpdateUserContactsForm from './UpdateUserContactsForm';
+
+export default UpdateUserContactsForm;
diff --git a/src/components/User/UserAccountInfo.tsx b/src/pages/profile/components/UserAccountInfo/UserAccountInfo.tsx
similarity index 100%
rename from src/components/User/UserAccountInfo.tsx
rename to src/pages/profile/components/UserAccountInfo/UserAccountInfo.tsx
diff --git a/src/pages/profile/components/UserAccountInfo/index.ts b/src/pages/profile/components/UserAccountInfo/index.ts
new file mode 100644
index 0000000..53711b5
--- /dev/null
+++ b/src/pages/profile/components/UserAccountInfo/index.ts
@@ -0,0 +1,3 @@
+import UserAccountInfo from './UserAccountInfo';
+
+export default UserAccountInfo;
diff --git a/src/pages/profile.tsx b/src/pages/profile/index.tsx
similarity index 89%
rename from src/pages/profile.tsx
rename to src/pages/profile/index.tsx
index 56932bd..f07a9d1 100644
--- a/src/pages/profile.tsx
+++ b/src/pages/profile/index.tsx
@@ -17,10 +17,11 @@ import { IPageProps } from 'interfaces';
 import { useRootStore } from 'hooks/useRootStore';
 import { useHistory } from 'react-router-dom';
 import { observer } from 'mobx-react';
-import UserBadge from 'components/User/UserBadge';
-import LoadingProfilePage from 'components/Loading/LoadingProfilePage';
-import UserAccountInfo from 'components/User/UserAccountInfo';
-import UpdateUserContactsForm from 'components/Forms/User/UpdateUserContactsForm';
+import UserBadge from 'components/UserBadge';
+
+import LoadingPage from './components/LoadingPage';
+import UserAccountInfo from './components/UserAccountInfo';
+import UpdateUserContactsForm from './components/UpdateUserContactsForm';
 
 /**
  * Profile page
@@ -37,7 +38,7 @@ const ProfilePage: React.FC<IPageProps> = ({ title }) => {
   });
 
   if (userStore.me === null) {
-    return <LoadingProfilePage />;
+    return <LoadingPage />;
   }
 
   return (
diff --git a/src/stores/RootStore.ts b/src/stores/RootStore.ts
index 679215f..6340de6 100644
--- a/src/stores/RootStore.ts
+++ b/src/stores/RootStore.ts
@@ -1,5 +1,5 @@
+import apiConfig from 'api.config';
 import { makeAutoObservable } from 'mobx';
-import { API_BASE_URL } from '../constants';
 
 /**
  * Services
@@ -26,11 +26,7 @@ export default class RootStore {
     /**
      * Api service
      */
-    this.apiService = new ApiService(this, {
-      baseURL: API_BASE_URL,
-      responseType: 'json',
-      withCredentials: true,
-    });
+    this.apiService = new ApiService(this, apiConfig);
 
     /**
      * Stores