diff --git a/src/App.tsx b/src/App.tsx
index 1bf81e754..9ae185a51 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,8 +6,8 @@ import { PersistGate as ReduxPersistGate } from 'redux-persist/integration/react
 
 import './global.css'
 
-import ErrorBoundary from './components/ErrorBoundary/ErrorBoundary'
-import Loading from './components/Loading/Loading'
+import ErrorBoundary from './components/ErrorBoundary'
+import Loading from './components/Loading'
 import Sidebar from './components/Sidebar'
 import HookLoaderComponent from './headlessComponents/GrobalHooks'
 import SnackBarRenderer from './headlessComponents/SnackBarRenderer'
diff --git a/src/components/ErrorBoundary/ErrorBoundary.tsx b/src/components/ErrorBoundary/index.tsx
similarity index 86%
rename from src/components/ErrorBoundary/ErrorBoundary.tsx
rename to src/components/ErrorBoundary/index.tsx
index 1d95d8618..dac2f7710 100644
--- a/src/components/ErrorBoundary/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary/index.tsx
@@ -33,9 +33,8 @@ class ErrorBoundary extends Component<Props, State> {
 export default ErrorBoundary
 
 const LayoutStyle: React.CSSProperties = {
-  alignItems: 'center',
-  display: 'flex',
-  justifyContent: 'center',
+  display: 'grid',
+  placeContent: 'center',
   minHeight: '100vh',
   minWidth: '100%',
 }
@@ -48,9 +47,7 @@ const MessageStyle: React.CSSProperties = {
   padding: '40px',
 }
 
-export const ErrorBoundaryFallbackComponent: React.FC<
-  React.PropsWithChildren<unknown>
-> = () => (
+export const ErrorBoundaryFallbackComponent: React.FC = () => (
   <main style={LayoutStyle}>
     <section style={MessageStyle}>
       Something Error Ooccurring
diff --git a/src/components/Loading/Loading.stories.tsx b/src/components/Loading/Loading.stories.tsx
index c4abdc03b..7265f8727 100644
--- a/src/components/Loading/Loading.stories.tsx
+++ b/src/components/Loading/Loading.stories.tsx
@@ -1,7 +1,7 @@
 import type { Story } from '@storybook/react'
 import React from 'react'
 
-import Loading from './Loading'
+import Loading from './index'
 
 export default {
   title: 'Components/Loading',
diff --git a/src/components/Loading/Loading.test.tsx b/src/components/Loading/Loading.test.tsx
index a74f417af..116d1a011 100644
--- a/src/components/Loading/Loading.test.tsx
+++ b/src/components/Loading/Loading.test.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 import TestRenderer from '../../lib/TestRenderer'
 
-import Loading from './Loading'
+import Loading from './index'
 
 test('should render Loading', () => {
   const { container } = TestRenderer(<Loading />)
diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/index.tsx
similarity index 72%
rename from src/components/Loading/Loading.tsx
rename to src/components/Loading/index.tsx
index f6ceb4d36..8af8cb136 100644
--- a/src/components/Loading/Loading.tsx
+++ b/src/components/Loading/index.tsx
@@ -4,7 +4,10 @@ import { CircleLoader } from 'react-spinners'
 const Loading: React.FC = memo(
   () => {
     return (
-      <div className="flex h-full w-full items-center justify-center">
+      <div
+        className="h-screen w-full grid place-content-center"
+        data-testid="loading"
+      >
         <CircleLoader size={250} color="#9CA3AF" />
       </div>
     )
diff --git a/src/headlessComponents/Installation.tsx b/src/headlessComponents/Installation.tsx
index 1bf7b3391..049a4d6d5 100644
--- a/src/headlessComponents/Installation.tsx
+++ b/src/headlessComponents/Installation.tsx
@@ -1,6 +1,6 @@
 import React, { memo } from 'react'
 
-import Loading from '../components/Loading/Loading'
+import Loading from '../components/Loading'
 import Signup from '../pages/Signup'
 import { useGetUserCountQuery } from '../redux/API'
 
diff --git a/src/pages/Dashboard/Edit/index.tsx b/src/pages/Dashboard/Edit/index.tsx
index a9255c977..03a62fd02 100644
--- a/src/pages/Dashboard/Edit/index.tsx
+++ b/src/pages/Dashboard/Edit/index.tsx
@@ -8,7 +8,7 @@ import { editPostFormValidator } from '../../../../validator'
 import Button from '../../../components/Button/Button'
 import Input from '../../../components/Input/Input'
 import Layout from '../../../components/Layout'
-import Loading from '../../../components/Loading/Loading'
+import Loading from '../../../components/Loading'
 import RTKQueryErrorMessages from '../../../components/RTKQueryErrorMessages/RTKQueryErrorMessages'
 import Textarea from '../../../components/Textarea/Textarea'
 import { selectAuthor } from '../../../redux/adminSlice'
diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
index 24e7d7037..dda2ff533 100644
--- a/src/pages/Dashboard/index.tsx
+++ b/src/pages/Dashboard/index.tsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'
 
 import Button from '../../components/Button/Button'
 import Layout from '../../components/Layout'
-import Loading from '../../components/Loading/Loading'
+import Loading from '../../components/Loading'
 import PaginationButtonGroup from '../../components/Pagination/ButtonGroup'
 import usePagination from '../../components/Pagination/usePagination'
 import RTKQueryErrorMessages from '../../components/RTKQueryErrorMessages/RTKQueryErrorMessages'
diff --git a/src/pages/Index/PostList/index.tsx b/src/pages/Index/PostList/index.tsx
index 74ea1938b..168b70ed6 100644
--- a/src/pages/Index/PostList/index.tsx
+++ b/src/pages/Index/PostList/index.tsx
@@ -1,6 +1,6 @@
 import React, { memo } from 'react'
 
-import Loading from '../../../components/Loading/Loading'
+import Loading from '../../../components/Loading'
 import ButtonGroup from '../../../components/Pagination/ButtonGroup'
 import usePagination from '../../../components/Pagination/usePagination'
 import RTKQueryErrorMessages from '../../../components/RTKQueryErrorMessages/RTKQueryErrorMessages'
diff --git a/src/pages/Post/Error.tsx b/src/pages/Post/Error.tsx
index f310cde45..76ed93c79 100644
--- a/src/pages/Post/Error.tsx
+++ b/src/pages/Post/Error.tsx
@@ -3,7 +3,7 @@ import type { FetchBaseQueryError } from '@reduxjs/toolkit/query'
 import * as Sentry from '@sentry/react'
 import React, { memo } from 'react'
 
-import { ErrorBoundaryFallbackComponent } from '../../components/ErrorBoundary/ErrorBoundary'
+import { ErrorBoundaryFallbackComponent } from '../../components/ErrorBoundary'
 import { useIsomorphicEffect } from '../../hooks/useIsomorphicEffect'
 import { enqueSnackbar } from '../../redux/snackbarSlice'
 import { dispatch } from '../../redux/store'
diff --git a/src/pages/Post/index.tsx b/src/pages/Post/index.tsx
index 7ea9da380..6f9ccdc58 100644
--- a/src/pages/Post/index.tsx
+++ b/src/pages/Post/index.tsx
@@ -2,7 +2,7 @@ import React, { memo } from 'react'
 import { useParams } from 'react-router-dom'
 
 import { assertIsDefined } from '../../../lib/assertIsDefined'
-import Loading from '../../components/Loading/Loading'
+import Loading from '../../components/Loading'
 import { API } from '../../redux/API'
 import NotFound from '../NotFound'