diff --git a/src/app/(companies)/companies/details/[id]/page.tsx b/src/app/(companies)/companies/details/[id]/page.tsx
index 072a6b4..67a77f8 100644
--- a/src/app/(companies)/companies/details/[id]/page.tsx
+++ b/src/app/(companies)/companies/details/[id]/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import Loading from "@/app/loading";
+import Loading from "@/components/loading";
 import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
 import { ShowcaseSection } from "@/components/Layouts/showcase-section";
 import IsVisible from "@/components/ui/IsVisible";
diff --git a/src/app/(companies)/companies/edit/[id]/page.tsx b/src/app/(companies)/companies/edit/[id]/page.tsx
index d078789..63eb476 100644
--- a/src/app/(companies)/companies/edit/[id]/page.tsx
+++ b/src/app/(companies)/companies/edit/[id]/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import Loading from "@/app/loading";
+import Loading from "@/components/loading";
 import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
 
 import CreateCompany from "@/components/forms/companies/CreateCompany";
diff --git a/src/app/(companies)/company-categories/edit/[id]/page.tsx b/src/app/(companies)/company-categories/edit/[id]/page.tsx
index fa76295..8f228ce 100644
--- a/src/app/(companies)/company-categories/edit/[id]/page.tsx
+++ b/src/app/(companies)/company-categories/edit/[id]/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import Loading from "@/app/loading";
+import Loading from "@/components/loading";
 import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
 import CreateCompanyCategoryForm from "@/components/forms/companies/company-categories/CreateCompanyCategory";
 import { useCompanyCategoriesDetails } from "@/hooks/queries";
diff --git a/src/app/(notifications)/notification-history/[id]/page.tsx b/src/app/(notifications)/notification-history/[id]/page.tsx
index 2cdaa3c..708de6b 100644
--- a/src/app/(notifications)/notification-history/[id]/page.tsx
+++ b/src/app/(notifications)/notification-history/[id]/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import Loading from "@/app/loading";
+import Loading from "@/components/loading";
 import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
 import { NotificationDetailsCard } from "@/components/ui/notification-details-card";
 import { useGetNotificationDetails } from "@/hooks/queries/useNotificationQueries";
diff --git a/src/app/admins/edit/[id]/page.tsx b/src/app/admins/edit/[id]/page.tsx
index aff5517..6864d6f 100644
--- a/src/app/admins/edit/[id]/page.tsx
+++ b/src/app/admins/edit/[id]/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import Loading from "@/app/loading";
+import Loading from "@/components/loading";
 import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
 import CreateAdminForm from "@/components/forms/admins/CreateAdmin";
 import { useAdminDetails } from "@/hooks/queries";
diff --git a/src/app/customers/edit/[id]/page.tsx b/src/app/customers/edit/[id]/page.tsx
index 7fdd6bf..2a11756 100644
--- a/src/app/customers/edit/[id]/page.tsx
+++ b/src/app/customers/edit/[id]/page.tsx
@@ -7,7 +7,7 @@ import {
 } from "@/hooks/queries/useCustomerQueries";
 import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
 import CreateCustomer from "@/components/forms/customers/CreateCustomer";
-import Loading from "@/app/loading";
+import Loading from "@/components/loading";
 
 const EditCustomer = ({ params }: { params: Promise<{ id: string }> }) => {
   const { id } = use(params);
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
index 7979c4a..20b7e6d 100644
--- a/src/app/loading.tsx
+++ b/src/app/loading.tsx
@@ -1,15 +1,3 @@
-import { cn } from "../lib/utils";
-
-interface IProps {
-  className?: string | null;
-}
-
-const Loading = ({ className = "w-svw h-svh" }: IProps) => {
-  return (
-    <div className={cn("flex items-center justify-center", className)}>
-      <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-primary"></div>
-    </div>
-  );
-};
+import Loading from "@/components/loading";
 
 export default Loading;
diff --git a/src/app/marketing/edit/[id]/page.tsx b/src/app/marketing/edit/[id]/page.tsx
index d1288e0..e363f06 100644
--- a/src/app/marketing/edit/[id]/page.tsx
+++ b/src/app/marketing/edit/[id]/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import Loading from "@/app/loading";
+import Loading from "@/components/loading";
 import { useGetCmsDetails, useUpdateCms } from "@/hooks/queries/useCmsQueries";
 import { BreadcrumbItem } from "@/types/shared";
 import { use } from "react";
diff --git a/src/app/pages/settings/page.tsx b/src/app/pages/settings/page.tsx
index d54a818..35d0cc5 100644
--- a/src/app/pages/settings/page.tsx
+++ b/src/app/pages/settings/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import Loading from "@/app/loading";
+import Loading from "@/components/loading";
 import InputGroup from "@/components/FormElements/InputGroup";
 import { Select } from "@/components/FormElements/select";
 import { ShowcaseSection } from "@/components/Layouts/showcase-section";
diff --git a/src/app/tenders/[details]/page.tsx b/src/app/tenders/[details]/page.tsx
index b730785..2cd7f99 100644
--- a/src/app/tenders/[details]/page.tsx
+++ b/src/app/tenders/[details]/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import Loading from "@/app/loading";
+import Loading from "@/components/loading";
 import { LocationIcon } from "@/assets/icons";
 import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
 import { ShowcaseSection } from "@/components/Layouts/showcase-section";
diff --git a/src/components/Layouts/conditional-layout.tsx b/src/components/Layouts/conditional-layout.tsx
index eebb829..f88fb5c 100644
--- a/src/components/Layouts/conditional-layout.tsx
+++ b/src/components/Layouts/conditional-layout.tsx
@@ -16,9 +16,9 @@ function MainLayout({ children }: PropsWithChildren) {
       <Sidebar />
       {/* Spacer to reserve space for collapsed sidebar on mobile - avoids reflow */}
       {isMobile && <div className="w-[70px] shrink-0" />}
-      <div className="w-full bg-gray-2 dark:bg-[#020d1a]">
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-gray-2 dark:bg-[#020d1a]">
         <Header />
-        <main className="isolate mx-auto w-full max-w-screen-2xl overflow-hidden p-4 md:p-6 2xl:p-10">
+        <main className="isolate flex min-h-0 flex-1 flex-col mx-auto w-full max-w-screen-2xl overflow-hidden p-4 md:p-6 2xl:p-10">
           {children}
         </main>
       </div>
diff --git a/src/components/Layouts/header/index.tsx b/src/components/Layouts/header/index.tsx
index 2e565fa..af93a3c 100644
--- a/src/components/Layouts/header/index.tsx
+++ b/src/components/Layouts/header/index.tsx
@@ -6,7 +6,7 @@ import { UserInfo } from "./user-info";
 
 export function Header() {
   return (
-    <header className="sticky top-0 z-30 flex items-center justify-between border-b border-stroke bg-white px-4 py-5 shadow-1 dark:border-stroke-dark dark:bg-gray-dark md:px-5 2xl:px-10">
+    <header className="sticky top-0 z-30 flex shrink-0 items-center justify-between border-b border-stroke bg-white px-4 py-5 shadow-1 dark:border-stroke-dark dark:bg-gray-dark md:px-5 2xl:px-10">
       <div className="max-xl:hidden">
         <h1 className="mb-0.5 text-heading-5 font-bold text-dark dark:text-white">
           Opportunity Lens
diff --git a/src/components/Layouts/header/notification/notification-list.tsx b/src/components/Layouts/header/notification/notification-list.tsx
index 0006ac7..df988f6 100644
--- a/src/components/Layouts/header/notification/notification-list.tsx
+++ b/src/components/Layouts/header/notification/notification-list.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import Loading from "@/app/loading";
+import Loading from "@/components/loading";
 import IsVisible from "@/components/ui/IsVisible";
 import { useGetMyNotifications } from "@/hooks/queries/useNotificationQueries";
 import { TNotificationDetailsResponse } from "@/lib/api/types/NotificationHistory";
@@ -21,7 +21,10 @@ const NotificationList = ({
     setUnreadNotificationCount(data?.data.length ?? 0);
   }, [data, isLoading]);
 
-  if (isLoading) return <Loading className={"p-6"} />;
+  if (isLoading)
+    return (
+      <Loading className="min-h-48 flex-none justify-center p-6" />
+    );
 
   return (
     <ul className="mb-3 max-h-[23rem] space-y-1.5 overflow-y-auto">
diff --git a/src/components/Layouts/sidebar/index.tsx b/src/components/Layouts/sidebar/index.tsx
index b23de1f..553b01a 100644
--- a/src/components/Layouts/sidebar/index.tsx
+++ b/src/components/Layouts/sidebar/index.tsx
@@ -59,7 +59,7 @@ export function Sidebar() {
 
       <aside
         className={cn(
-          "overflow-hidden border-r border-gray-200 bg-white transition-[width] duration-200 ease-linear dark:border-gray-800 dark:bg-gray-dark",
+          "shrink-0 overflow-hidden border-r border-gray-200 bg-white transition-[width] duration-200 ease-linear dark:border-gray-800 dark:bg-gray-dark",
           isMobile ? "fixed bottom-0 top-0 z-50" : "sticky top-0 h-screen",
           isMobile
             ? isOpen
diff --git a/src/components/loading.tsx b/src/components/loading.tsx
new file mode 100644
index 0000000..785a8b3
--- /dev/null
+++ b/src/components/loading.tsx
@@ -0,0 +1,23 @@
+import { cn } from "@/lib/utils";
+
+interface IProps {
+  className?: string | null;
+}
+/**
+ * Grows with a flex `main` parent so the spinner sits in the middle of the content area.
+ * Guards: `min-h-svh flex-none`. Compact UI: `flex-none min-h-*`.
+ */
+const Loading = ({ className }: IProps) => {
+  return (
+    <div
+      className={cn(
+        "flex min-h-0 w-full min-w-0 flex-1 items-center justify-center",
+        className,
+      )}
+    >
+      <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-primary" />
+    </div>
+  );
+};
+
+export default Loading;
diff --git a/src/contexts/Auth-guard.ctx.tsx b/src/contexts/Auth-guard.ctx.tsx
index 624bcf4..23efaae 100644
--- a/src/contexts/Auth-guard.ctx.tsx
+++ b/src/contexts/Auth-guard.ctx.tsx
@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useEffect, ReactNode } from "react";
 import { useUser } from "./";
-import Loading from "@/app/loading";
+import Loading from "@/components/loading";
 
 interface AuthGuardProps {
   children: ReactNode;
@@ -20,7 +20,7 @@ const AuthGuard = ({ children }: AuthGuardProps): React.ReactNode => {
   }, [isLoading, isAuthenticated, router]);
 
   if (isLoading || !isAuthenticated) {
-    return <Loading />;
+    return <Loading className="min-h-svh flex-none" />;
   }
 
   return children;
diff --git a/src/contexts/Login-guard.ctx.tsx b/src/contexts/Login-guard.ctx.tsx
index c4453c0..8b8e316 100644
--- a/src/contexts/Login-guard.ctx.tsx
+++ b/src/contexts/Login-guard.ctx.tsx
@@ -3,7 +3,7 @@
 import { useEffect } from "react";
 import { useUser } from "./";
 import { useRouter } from "next/navigation";
-import Loading from "../app/loading";
+import Loading from "@/components/loading";
 
 interface LoginGuardProps {
   children: React.ReactNode;
@@ -19,7 +19,7 @@ const LoginGuard = ({ children }: LoginGuardProps): React.ReactNode => {
   }, [isLoading, isAuthenticated, router]);
 
   if (isLoading || isAuthenticated) {
-    return <Loading />;
+    return <Loading className="min-h-svh flex-none" />;
   }
   return children;
 };