diff --git a/src/components/pages/statistics/memberBreakdowns/CustomDialogDetail.tsx b/src/components/pages/statistics/memberBreakdowns/CustomDialogDetail.tsx
index 0d71aa7f..c1ac95bd 100644
--- a/src/components/pages/statistics/memberBreakdowns/CustomDialogDetail.tsx
+++ b/src/components/pages/statistics/memberBreakdowns/CustomDialogDetail.tsx
@@ -49,7 +49,7 @@ const CustomDialogDetail: React.FC<CustomDialogDetailProps> = ({
           </div>
           <div>
             <p className="text-xs pb-2 font-semibold">Roles:</p>
-            <div className="flex flex-row space-x-2 flex-wrap">
+            <div className="flex flex-row flex-wrap items-center first:ml-0 ml-1">
               {rowDetail?.roles.map((role: any) => (
                 <div
                   key={role.id}
@@ -85,11 +85,11 @@ const CustomDialogDetail: React.FC<CustomDialogDetailProps> = ({
           </div>
           <div>
             <p className="text-xs pb-2 font-semibold">Activity composition:</p>
-            <div className="flex flex-row space-x-2 flex-wrap">
+            <div className="flex flex-row flex-wrap">
               {rowDetail && rowDetail?.activityComposition.length > 0 ? (
                 rowDetail?.activityComposition.map((composition: any) => {
                   const matchedOption = options.find(
-                    (option) => option.value === composition
+                    (option) => option.name === composition
                   );
                   const backgroundColor = matchedOption
                     ? matchedOption.color
@@ -98,10 +98,10 @@ const CustomDialogDetail: React.FC<CustomDialogDetailProps> = ({
                   return (
                     <div
                       key={composition}
-                      className="flex flex-row flex-wrap items-center"
+                      className="flex flex-row flex-wrap items-center first:ml-0 ml-1"
                     >
                       <span
-                        className="bg-white p-1 px-2 rounded-[4px] border border-[#D1D1D1] text-xs flex items-center"
+                        className="bg-white p-1 px-2 mb-2 rounded-[4px] border border-[#D1D1D1] text-xs flex items-center"
                         style={{
                           backgroundColor: backgroundColor,
                           display: 'flex',
diff --git a/src/components/pages/statistics/memberBreakdowns/CustomTable.tsx b/src/components/pages/statistics/memberBreakdowns/CustomTable.tsx
index ca0e9999..7b3f2615 100644
--- a/src/components/pages/statistics/memberBreakdowns/CustomTable.tsx
+++ b/src/components/pages/statistics/memberBreakdowns/CustomTable.tsx
@@ -77,7 +77,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
     useState<HTMLButtonElement | null>(null);
   const [selectedRoles, setSelectedRoles] = useState<string[]>([]);
   useEffect(() => {
-    setSelectedRoles(roles.map((role: IRoles) => role.id));
+    setSelectedRoles(roles.map((role: IRoles) => role.roleId));
   }, [roles]);
   const [selectAllRoles, setSelectAllRoles] = useState(true);
   const [selectedActivityOptions, setSelectedActivityOptions] = useState<
@@ -107,7 +107,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
 
   const handleSelectAllRoles = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.checked) {
-      const allRoleNames = roles.map((role: IRoles) => role.id);
+      const allRoleNames = roles.map((role: IRoles) => role.roleId);
       setSelectedRoles(allRoleNames);
     } else {
       setSelectedRoles([]);
@@ -268,9 +268,9 @@ const CustomTable: React.FC<CustomTableProps> = ({
                               control={
                                 <Checkbox
                                   color="secondary"
-                                  checked={selectedRoles.includes(role.id)}
+                                  checked={selectedRoles.includes(role.roleId)}
                                   onChange={handleSelectRole}
-                                  value={role.id}
+                                  value={role.roleId}
                                 />
                               }
                               label={
@@ -434,7 +434,11 @@ const CustomTable: React.FC<CustomTableProps> = ({
                       InputProps={{
                         disableUnderline: true,
                         startAdornment: <MdSearch color="disabled" size={25} />,
-                        sx: { backgroundColor: '#F5F5F5', padding: '0 0.4rem' },
+                        sx: {
+                          backgroundColor: '#F5F5F5',
+                          padding: '0 0.4rem',
+                          borderRadius: '4px',
+                        },
                       }}
                       value={searchText}
                       onChange={handleSearchChange}
@@ -482,7 +486,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
                           border:
                             index % 2 === 0 ? 'none' : '1px solid #F5F5F5', // Apply border style conditionally for even rows
                         }}
-                        className={`px-4 py-4 first:rounded-l-md first:border-r-0 last:rounded-r-md last:border-l-0 ${
+                        className={`px-1 first:px-3 py-4 first:rounded-l-md first:border-r-0 last:rounded-r-md last:border-l-0 ${
                           columnIndex === 1 || columnIndex === 2
                             ? 'border-l-0 border-r-0'
                             : '' // Add top and bottom border to even rows
@@ -502,9 +506,9 @@ const CustomTable: React.FC<CustomTableProps> = ({
                           <div className="flex flex-row flex-wrap space-x-1">
                             {row.roles.length > 0 ? (
                               <>
-                                {row.roles.slice(0, 4).map((role: IRoles) => (
+                                {row.roles.slice(0, 2).map((role: IRoles) => (
                                   <div
-                                    key={role.id}
+                                    key={role.roleId}
                                     className="flex flex-row flex-wrap"
                                     style={{ whiteSpace: 'nowrap' }}
                                   >
@@ -550,7 +554,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
                                         backgroundColor: '#AAAAAA',
                                       }}
                                     >
-                                      +{row.roles.length - 4}
+                                      +{row.roles.length - 2}
                                     </span>
                                   </div>
                                 )}
@@ -572,15 +576,15 @@ const CustomTable: React.FC<CustomTableProps> = ({
                             )}
                           </div>
                         ) : column.id === 'activityComposition' ? (
-                          <div className="flex flex-row flex-wrap space-x-1">
+                          <div className="flex flex-row flex-wrap">
                             {row.activityComposition &&
                             row.activityComposition.length > 0 ? (
                               <>
                                 {row.activityComposition
-                                  .slice(0, 4)
+                                  .slice(0, 2)
                                   .map((composition: string) => {
                                     const matchedOption = options.find(
-                                      (option) => option.value === composition
+                                      (option) => option.name === composition
                                     );
                                     const backgroundColor = matchedOption
                                       ? matchedOption.color
@@ -589,7 +593,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
                                     return (
                                       <div
                                         key={composition}
-                                        className="flex flex-row flex-wrap items-center"
+                                        className="flex flex-row flex-wrap items-center mr-1"
                                       >
                                         <span
                                           className="bg-white p-1 px-2 rounded-[4px] border border-[#D1D1D1] text-xs flex items-center"
@@ -617,14 +621,14 @@ const CustomTable: React.FC<CustomTableProps> = ({
                                     onClick={() => handleShowDetails(row)}
                                   >
                                     <span
-                                      className="bg-white p-1 rounded-[4px] border border-[#D1D1D1] text-xs flex items-center cursor-pointer"
+                                      className="bg-white px-1 rounded-[4px] border border-[#D1D1D1] text-xs flex items-center cursor-pointer"
                                       style={{
                                         backgroundColor: '#96A5A6',
                                         display: 'flex',
                                         alignItems: 'center',
                                       }}
                                     >
-                                      +{row.activityComposition.length - 4}
+                                      +{row.activityComposition.length - 2}
                                     </span>
                                   </div>
                                 )}
diff --git a/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx b/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx
index 435c9087..14f883b4 100644
--- a/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx
+++ b/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx
@@ -115,22 +115,21 @@ export default function ActiveMemberBreakdown() {
               handleUsernameChange={handleUsernameChange}
               isLoading={isActiveMembersBreakdownLoading}
             />
-            {fetchedData?.totalResults > 0 && (
-              <div className="flex justify-end">
-                <CustomPagination
-                  totalItems={fetchedData.totalResults}
-                  itemsPerPage={Math.ceil(
-                    fetchedData.totalResults / fetchedData.totalPages
-                  )}
-                  currentPage={page}
-                  onChangePage={handlePageChange}
-                />
-              </div>
-            )}
+
+            <div className="flex justify-end">
+              <CustomPagination
+                totalItems={fetchedData.totalResults}
+                itemsPerPage={Math.ceil(
+                  fetchedData.totalResults / fetchedData.totalPages
+                )}
+                currentPage={page}
+                onChangePage={handlePageChange}
+              />
+            </div>
           </div>
         </div>
       </div>
-      {fetchedData?.results.length > 0 ?? (
+      {fetchedData && fetchedData?.totalResults > 10 ? (
         <div className="flex justify-center mt-2 mb-12">
           <CustomButton
             label={isExpanded ? 'Show less' : 'Show member breakdown'}
@@ -140,6 +139,8 @@ export default function ActiveMemberBreakdown() {
             onClick={() => toggleExpanded(!isExpanded)}
           />
         </div>
+      ) : (
+        ''
       )}
     </>
   );
diff --git a/src/store/slices/breakdownsSlice.ts b/src/store/slices/breakdownsSlice.ts
index 51f6b1b4..51a3a988 100644
--- a/src/store/slices/breakdownsSlice.ts
+++ b/src/store/slices/breakdownsSlice.ts
@@ -45,7 +45,7 @@ const createBreakdownsSlice: StateCreator<IBreakdown> = (set, get) => ({
 
       const url = `/member-activity/${guild_id}/active-members-composition-table?${params.toString()}`;
 
-      const { data } = await axiosInstance.post(url);
+      const { data } = await axiosInstance.get(url);
 
       set(() => ({ isActiveMembersBreakdownLoading: false }));
       return data;
@@ -58,15 +58,12 @@ const createBreakdownsSlice: StateCreator<IBreakdown> = (set, get) => ({
     try {
       set(() => ({ isRolesLoading: true }));
 
-      const { data } = await axiosInstance.get(
-        `/guilds/discord-api/${guild_id}/roles`
-      );
+      const { data } = await axiosInstance.get(`/guilds/${guild_id}/roles`);
 
       set(() => ({ roles: data, isRolesLoading: false }));
       return data;
     } catch (error) {
       set(() => ({ isRolesLoading: false }));
-      // Handle the error
     }
   },
 });
diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts
index 4fd6d965..053cf99d 100644
--- a/src/utils/interfaces.ts
+++ b/src/utils/interfaces.ts
@@ -24,7 +24,7 @@ export interface Row {
 }
 
 export interface IRoles {
-  id: string;
+  roleId: string;
   color: number | string;
   name: string;
 }