diff --git a/src/dashboards/Admin.tsx b/src/dashboards/Admin.tsx
index 49b9c654..37514f3d 100644
--- a/src/dashboards/Admin.tsx
+++ b/src/dashboards/Admin.tsx
@@ -7,15 +7,7 @@ import UserList from "@/pages/(admin)/Lists/UserList";
 import {dateSorter} from "@/utils";
 import moment from "moment";
 import {useEffect, useState} from "react";
-import {
-	BsArrowLeft,
-	BsBriefcaseFill,
-	BsGlobeCentralSouthAsia,
-	BsPerson,
-	BsPersonFill,
-	BsPencilSquare,
-	BsBank,
-} from "react-icons/bs";
+import {BsArrowLeft, BsBriefcaseFill, BsGlobeCentralSouthAsia, BsPerson, BsPersonFill, BsPencilSquare, BsBank} from "react-icons/bs";
 import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
 import IconCard from "./IconCard";
@@ -42,7 +34,11 @@ export default function AdminDashboard({user}: Props) {
 		setShowModal(!!selectedUser && page === "");
 	}, [selectedUser, page]);
 
-	const inactiveCountryManagerFilter = (x: User) => x.type === "agent" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate));
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	useEffect(reload, [page]);
+
+	const inactiveCountryManagerFilter = (x: User) =>
+		x.type === "agent" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate));
 
 	const UserDisplay = (displayUser: User) => (
 		<div
@@ -166,7 +162,7 @@ export default function AdminDashboard({user}: Props) {
 				<UserList user={user} filters={[inactiveCountryManagerFilter]} />
 			</>
 		);
-	}
+	};
 
 	const InactiveStudentsList = () => {
 		const filter = (x: User) => x.type === "student" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate));
@@ -210,7 +206,7 @@ export default function AdminDashboard({user}: Props) {
 
 	const DefaultDashboard = () => (
 		<>
-			<section className="w-full flex flex-wrap gap-4 items-center justify-between">
+			<section className="w-full grid grid-cols-3 lg:grid-cols-4 gap-4 place-items-center items-center justify-between">
 				<IconCard
 					Icon={BsPersonFill}
 					label="Students"
@@ -482,7 +478,6 @@ export default function AdminDashboard({user}: Props) {
 			{page === "inactiveCorporate" && <InactiveCorporateList />}
 			{page === "inactiveCountryManagers" && <InactiveCountryManagerList />}
 			{page === "" && <DefaultDashboard />}
-			
 		</>
 	);
 }
diff --git a/src/dashboards/IconCard.tsx b/src/dashboards/IconCard.tsx
index 46b2ad15..4272de9d 100644
--- a/src/dashboards/IconCard.tsx
+++ b/src/dashboards/IconCard.tsx
@@ -19,7 +19,7 @@ export default function IconCard({Icon, label, value, color, onClick}: Props) {
 	return (
 		<div
 			onClick={onClick}
-			className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
+			className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
 			<Icon className={clsx("text-6xl", colorClasses[color])} />
 			<span className="flex flex-col gap-1 items-center text-xl">
 				<span className="text-lg">{label}</span>