diff --git a/src/components/InvitationCard.tsx b/src/components/InvitationCard.tsx
index dcf9bc4e0..5a0727b61 100644
--- a/src/components/InvitationCard.tsx
+++ b/src/components/InvitationCard.tsx
@@ -13,20 +13,20 @@ interface InvitationCardType {
 // Define the InvitationCard component using a function declaration
 function InvitationCard({ icon, status, time, staticNumber, percentage }: InvitationCardType) {
   return (
-    <div className='bg-blue-100 w-40 md:w-40 lg:w-52 grid h-40 text-black shadow-lg rounded-lg '>
+    <div className='bg-blue-100 lg:dark:bg-blue-100 sm:dark:bg-[#0A1729] xm:dark:bg-[#0A1729] w-full grid h-36 text-black shadow-lg rounded-lg m-auto'>
 
         <div className='flex flex-row mt-4 gap-3 sm:gap-1'>
           <div className='flex w-8 h-10 ml-2'>
             {icon}
           </div>
-          <h3 className='text-md md:text-md lg:text-xl font-Inter font-bold text-[12px]'>{status}</h3>
+          <h3 className='text-md md:text-md lg:text-xl font-Inter font-bold text-[12px] sm:dark:text-white xm:dark:text-white lg:dark:text-black'>{status}</h3>
         </div>
         <div>
           <p className='-mt-10 ml-12 text-[12px] font-inter text-gray-500 font-inter sm:-[8px]'>{time}</p>
         </div>
 
       <div className='flex justify-center items-center -mt-10 '>
-        <div className='font-bold -mt-4 ml-0 sm:ml-5 text-[30px] md:text-[40px]'>{staticNumber}
+        <div className='font-bold -mt-4 ml-0 sm:ml-5 text-[30px] md:text-[40px] sm:dark:text-white xm:dark:text-white lg:dark:text-black'>{staticNumber}
         </div>
         <div className='text-base text-[#7258ce] ml-3 mb-4'>
           <AiOutlineRise className="text-xl" data-testid="ai-outline-user"/>
diff --git a/src/pages/invitation.tsx b/src/pages/invitation.tsx
index 1aeddeea3..69a838e2e 100644
--- a/src/pages/invitation.tsx
+++ b/src/pages/invitation.tsx
@@ -199,37 +199,38 @@ function Invitation() {
   const handleCloseModal = () => setIsModalOpen(false);
 
   return (
-    <div className="sm:w-screen bg-red lg:w-full">
+    <div className="w-full">
       {/* Header and Invite Button */}
-      <div className="flex flex-row md:flex-row md:justify-between items-center gap-36 md:gap-4 mb-8 ">
-        <h1 className="font-bold text-xl md:text-xl">Invitation Stats</h1>
+      <div className="flex flex-row sm:flex-rowmd:flex-row md:justify-between items-center md:gap-4 mb-8 ">
+        <div className='flex w-full items-center justify-between'>
+          <h1 className='font-bold lg:text-xl sm:text-lg xm:text-lg w-full'>Invitation Stats</h1>
+        <div className="flex items-center rounded-md shadow-sm bg-white dark:bg-[#020917] border-2 border-black dark:border-white h-8 w-[40%] md:hidden ml-5">
+          <FaFilter className="text-[#9e85f5] ml-1" />
+            {/* Select Dropdown for Small Screens */}
+          <select className="bg-transparent dark:bg-[#020917] text-gray-700 dark:text-white outline-none text-sm py-1">
+            <option value="Select range">Select range</option>
+            <option value="Last 7 days">Last 7 days</option>
+            <option value="Last 30 days">Last 30 days</option>
+            <option value="Last 90 days">Last 90 days</option>
+            <option value="Custom range">Custom range</option>
+          </select>
+        </div>
         <button
           type="button"
           onClick={handleOpenModal}
-          className="bg-[#9e85f5] text-white text-lg md:text-lg rounded-md h-10 flex items-center justify-center w-[15%]"
+          className="lg:bg-[#9e85f5] bg-none lg:text-white text-[#9e85f5] text-lg lg:text-lg rounded-md h-10 flex items-center justify-center w-[15%]"
         >
-          <IoIosAddCircleOutline className="w-6 h-6 md:w-8 md:h-8 md:mr-2" />
-          <span className="hidden md:block">Invite User</span>
+          <IoIosAddCircleOutline className="w-6 h-6 md:w-8 md:h-8 md:mr-2 xm:w-8 xm:h-8 sm:w-10 sm:h-10" />
+          <span className="hidden lg:block">Invite User</span>
         </button>
+        </div>
       </div>
-
       <InvitationModal isOpen={isModalOpen} onClose={handleCloseModal} />
       {/* Container for Select and Cards */}
       <div className="flex flex-col border-blue-500 md:flex-row gap-4 md:gap-5 mb-10">
-        {/* Select Dropdown for Small Screens */}
-        <div className="flex items-center rounded-md shadow-sm px-3 py-2 bg-white border-2 border-black space-x-2 h-8 mb-4 md:hidden w-[90%] ">
-          <FaFilter className="text-[#9e85f5]" />
-          <select className="bg-transparent text-gray-700 outline-none ">
-            <option value="Select range">Select range</option>
-            <option value="Last 7 days">Last 7 days</option>
-            <option value="Last 30 days">Last 30 days</option>
-            <option value="Last 90 days">Last 90 days</option>
-            <option value="Custom range">Custom range</option>
-          </select>
-        </div>
 
         {/* Invitation Cards */}
-        <div className="flex flex-wrap gap-4 md:gap-16 mb-4 md:mb-0 w-full">
+        <div className="grid grid-row-2 gap-4 sm:gap-4 mb-4 w-full lg:flex sm:grid grid-cols-2">
           <InvitationCard
             icon={
               <FaCheck className="text-[#9e85f5] w-8 h-8 md:w-12 md:h-12 " />
@@ -267,9 +268,9 @@ function Invitation() {
         </div>
 
         {/* Select Dropdown for Desktop */}
-        <div className=".flex  items-center rounded-md shadow-sm px-3 py-2 bg-white border-2 border-black space-x-2 h-8 hidden md:flex md:ml-8 ">
+        <div className=".flex  items-center rounded-md shadow-sm px-3 py-2 bg-white dark:bg-[#020917] border-2 border-black dark:border-white space-x-2 h-8 hidden md:flex md:ml-8 ">
           <FaFilter className="text-[#9e85f5]" />
-          <select className="bg-transparent text-gray-700 outline-none ">
+          <select className="bg-transparent dark:bg-[#020917] text-gray-700 dark:text-white outline-none ">
             <option value="Select range">Select range</option>
             <option value="Last 7 days">Last 7 days</option>
             <option value="Last 30 days">Last 30 days</option>
@@ -311,7 +312,7 @@ function Invitation() {
           <button
             type="button"
             onClick={handleSearch}
-            className="bg-[#9e85f5] text-white text-lg md:text-xl rounded-md h-10 flex items-center justify-center  md:w-[10%]"
+            className="bg-[#9e85f5] text-white text-lg md:text-xl rounded-md h-10 flex items-center justify-center  md:w-[10%] p-0 sm:p-5 xm:p-5"
           >
             Search
           </button>
diff --git a/tailwind.config.js b/tailwind.config.js
index afa42ac5a..4a52d5bb6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,7 @@ module.exports = {
   theme: {
     extend: {
       screens: {
+        xm:'360px',
         sm: '375px',
         md: '768px',
         lg: '976px',