diff --git a/frontend/src/App.css b/frontend/src/App.css
index e6a56888..8aab6cad 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -44,3 +44,22 @@
   -ms-user-select:none;
   user-select:none
 }
+
+.spinner {
+  width: 3rem;
+  height: 3rem;
+  border: 0.5rem solid rgba(0, 0, 0, 0.1);
+  border-top: 0.5rem solid #1c58b3;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 10px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/frontend/src/component/common/loadingSpinner/LoadingSpinner.tsx b/frontend/src/component/common/loadingSpinner/LoadingSpinner.tsx
new file mode 100644
index 00000000..e208f6ac
--- /dev/null
+++ b/frontend/src/component/common/loadingSpinner/LoadingSpinner.tsx
@@ -0,0 +1,3 @@
+export const LoadingSpinner = () => {
+  return <div className="spinner" />;
+};
diff --git a/frontend/src/pages/Main.tsx b/frontend/src/pages/Main.tsx
index b0c787e0..049c9680 100644
--- a/frontend/src/pages/Main.tsx
+++ b/frontend/src/pages/Main.tsx
@@ -10,6 +10,7 @@ import { AppConfig } from '@/lib/constants/commonConstants.ts';
 import { v4 as uuidv4 } from 'uuid';
 import { getUserLocation } from '@/hooks/getUserLocation.ts';
 import { MapCanvasForView } from '@/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx';
+import { LoadingSpinner } from '@/component/common/loadingSpinner/LoadingSpinner.tsx';
 
 const contentData = [
   {
@@ -103,13 +104,15 @@ export const Main = () => {
               otherLocations={otherLocations}
             />
           ) : (
-            <section className="flex h-full items-center justify-center">
+            <section className="flex h-full flex-col items-center justify-center gap-2 text-xl text-gray-700">
+              <LoadingSpinner />
               Loading map data...
             </section>
           )
         ) : (
-          <section className="flex h-full items-center justify-center">
-            {error ? `Error: ${error}` : 'Loading'}
+          <section className="flex h-full flex-col items-center justify-center gap-2 text-xl text-gray-700">
+            <LoadingSpinner />
+            {error ? `Error: ${error}` : 'Loading map data...'}
           </section>
         )}
       </main>