diff --git a/components/admins/components/__tests__/adminOptions.test.tsx b/components/admins/components/__tests__/adminOptions.test.tsx
deleted file mode 100644
index a1b754a..0000000
--- a/components/admins/components/__tests__/adminOptions.test.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { afterEach, describe, expect, test } from 'bun:test';
-import React from 'react';
-import { screen, cleanup, within, fireEvent } from '@testing-library/react';
-import AdminOptions from '@/components/admins/components/adminOptions';
-import matchers from '@testing-library/jest-dom/matchers';
-import { renderWithChainProvider } from '@/tests/render';
-import { mockPoaParams, mockGroup } from '@/tests/mock';
-
-expect.extend(matchers);
-
-const renderWithProps = (props = {}) => {
-  const defaultProps = {
-    poaParams: mockPoaParams,
-    group: mockGroup,
-    isLoading: false,
-    address: 'test_address',
-    admin: 'admin1',
-  };
-  return renderWithChainProvider(<AdminOptions {...defaultProps} {...props} />);
-};
-
-describe('AdminOptions', () => {
-  afterEach(cleanup);
-
-  test('renders loading state correctly', () => {
-    renderWithProps({ isLoading: true });
-    expect(screen.getByText('Admin')).toBeInTheDocument();
-  });
-
-  test('renders admin details correctly when not loading', () => {
-    renderWithProps();
-    expect(screen.getByText('Admin')).toBeInTheDocument();
-    expect(screen.getByAltText('Profile Avatar')).toBeInTheDocument();
-    const titleContainer = screen.getByLabelText('title');
-    expect(within(titleContainer).getByText('title1')).toBeInTheDocument();
-    const detailsContainer = screen.getByLabelText('details');
-    expect(within(detailsContainer).getByText('details1')).toBeInTheDocument();
-  });
-
-  test('opens description modal on button click', () => {
-    renderWithProps();
-    fireEvent.click(screen.getByLabelText('three-dots'));
-    const modal = document.getElementById('description-modal') as HTMLDialogElement;
-    expect(modal).toBeInTheDocument();
-    expect(modal.open).toBe(true);
-  });
-});
diff --git a/components/admins/components/adminOptions.tsx b/components/admins/components/adminOptions.tsx
deleted file mode 100644
index a8a5e46..0000000
--- a/components/admins/components/adminOptions.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import { ExtendedGroupType } from '@/hooks';
-
-import { BsThreeDots } from 'react-icons/bs';
-import { DescriptionModal } from '../modals/descriptionModal';
-import ProfileAvatar from '@/utils/identicon';
-
-interface AdminOptionsProps {
-  group: ExtendedGroupType;
-  isLoading: boolean;
-  address: string;
-  admin: string;
-}
-
-export default function AdminOptions({ group, isLoading }: Readonly<AdminOptionsProps>) {
-  const handleOpen = () => {
-    const modal = document.getElementById(`update-admin-modal`) as HTMLDialogElement;
-    modal?.showModal();
-  };
-
-  const handleDescription = () => {
-    const modal = document.getElementById(`description-modal`) as HTMLDialogElement;
-    modal?.showModal();
-  };
-
-  return (
-    <div className="lg:w-1/2 w-full mx-auto p-4 bg-base-100 rounded-md lg:max-h-[352px]">
-      <div className="px-4 py-2 border-base-content flex items-center justify-between">
-        <h3 className="text-lg font-bold leading-6">Admin</h3>
-      </div>
-      <div className="divider divider-horizon -mt-2 mb-1"></div>
-      {isLoading && <div className="skeleton w-full h-auto"></div>}
-      {!isLoading && (
-        <div className=" relative flex flex-col gap-8 w-full h-auto justify-between items-center bg-base-300 rounded-md p-2">
-          <div className="flex h-[5.2rem] w-[5.2rem] bg-base-300 justify-center items-center rounded-full">
-            <ProfileAvatar walletAddress={group?.created_at.toString() ?? ''} size={64} />
-          </div>
-          <a className="lg:text-2xl text-xl leading-6 -mt-2" aria-label="title">
-            {group?.ipfsMetadata?.title}
-          </a>
-
-          <a
-            className="text-sm leading-tight flex-wrap text-center text-neutral-content max-h-10 max-w-96 overflow-y-auto -mt-6"
-            aria-label="details"
-          >
-            {group?.ipfsMetadata?.details}
-          </a>
-          <button
-            className="btn btn-sm btn-ghost absolute right-2 bottom-17"
-            onClick={handleDescription}
-            aria-label="three-dots"
-          >
-            <BsThreeDots />
-          </button>
-
-          <div className="flex flex-row gap-4 justify-center items-center -mt-2 w-full pb-3">
-            <button className="btn block btn-primary btn-sm w-2/6" onClick={handleOpen}>
-              Update
-            </button>
-          </div>
-        </div>
-      )}
-
-      <DescriptionModal
-        type="group"
-        modalId="description-modal"
-        details={group?.ipfsMetadata?.details ?? ''}
-      />
-    </div>
-  );
-}
diff --git a/components/admins/components/index.tsx b/components/admins/components/index.tsx
index c20c7a2..b2a1351 100644
--- a/components/admins/components/index.tsx
+++ b/components/admins/components/index.tsx
@@ -1,3 +1,2 @@
-export * from './adminOptions';
 export * from './stakingParams';
 export * from './validatorList';
diff --git a/components/admins/components/validatorList.tsx b/components/admins/components/validatorList.tsx
index 6b2cdeb..bf1dba7 100644
--- a/components/admins/components/validatorList.tsx
+++ b/components/admins/components/validatorList.tsx
@@ -80,7 +80,7 @@ export default function ValidatorList({
           <div className="flex justify-between items-center mb-4 min-h-[52px]">
             <div className="flex items-center space-x-4">
               <h2
-                className="text-black dark:text-white"
+                className="text-secondary-content"
                 style={{ fontSize: '20px', fontWeight: 700, lineHeight: '24px' }}
               >
                 Validators
@@ -89,7 +89,7 @@ export default function ValidatorList({
                 <input
                   type="text"
                   placeholder="Search for a validator..."
-                  className="input input-bordered w-[224px] h-[40px] rounded-[12px] border-none bg:[#0000000A] dark:bg-[#FFFFFF1F] pl-10"
+                  className="input input-bordered w-[224px] h-[40px] rounded-[12px] border-none bg-secondary text-secondary-content pl-10"
                   value={searchTerm}
                   onChange={e => setSearchTerm(e.target.value)}
                 />
@@ -97,13 +97,11 @@ export default function ValidatorList({
               </div>
             </div>
           </div>
-          <div className="flex mb-6 w-full h-[3.5rem] rounded-xl p-1 bg-[#0000000A] dark:bg-[#FFFFFF0F]">
+          <div className="flex mb-6 w-full h-[3.5rem] rounded-xl p-1 bg-secondary">
             <button
               onClick={() => setActive(true)}
               className={`flex-1 py-2 px-4 text-sm font-medium rounded-xl  ${
-                active
-                  ? 'dark:bg-[#FFFFFF1F] bg-[#FFFFFF] text-[#161616] dark:text-white'
-                  : 'text-[#808080]'
+                active ? 'bg-base-300 text-secondary-content' : 'text-gray-500'
               }`}
             >
               Active
@@ -111,9 +109,7 @@ export default function ValidatorList({
             <button
               onClick={() => setActive(false)}
               className={`flex-1 py-2 px-4 text-sm font-medium rounded-xl  ${
-                !active
-                  ? 'dark:bg-[#FFFFFF1F] bg-[#FFFFFF] text-[#161616] dark:text-white'
-                  : 'text-[#808080]'
+                !active ? 'bg-base-300 text-secondary-content' : 'text-gray-500'
               }`}
             >
               Pending
@@ -148,19 +144,19 @@ export default function ValidatorList({
                         .fill(0)
                         .map((_, index) => (
                           <tr key={index}>
-                            <td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] rounded-l-[12px] w-1/6">
+                            <td className="bg-secondary rounded-l-[12px] w-1/6">
                               <div className="flex items-center space-x-3">
                                 <div className="skeleton w-10 h-8 rounded-full shrink-0"></div>
                                 <div className="skeleton h-3 w-24"></div>
                               </div>
                             </td>
-                            <td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] w-1/6">
+                            <td className="bg-secondary w-1/6">
                               <div className="skeleton h-2 w-24"></div>
                             </td>
-                            <td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] w-1/6">
+                            <td className="bg-secondary w-1/6">
                               <div className="skeleton h-2 w-8"></div>
                             </td>
-                            <td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] w-1/6 rounded-r-[12px] text-right">
+                            <td className="bg-secondary w-1/6 rounded-r-[12px] text-right">
                               <div className="skeleton h-2 w-8 ml-auto"></div>
                             </td>
                           </tr>
@@ -168,12 +164,12 @@ export default function ValidatorList({
                     : filteredValidators.map(validator => (
                         <tr
                           key={validator.operator_address}
-                          className="bg-[#FFFFFFCC] dark:bg-[#FFFFFF0F] hover:bg-[#FFFFFF66] dark:hover:bg-[#FFFFFF1A] text-black dark:text-white rounded-lg cursor-pointer"
+                          className="group text-black dark:text-white rounded-lg cursor-pointer transition-colors"
                           onClick={() => handleRowClick(validator)}
                           role="row"
                           aria-label={`Validator ${validator.description.moniker}`}
                         >
-                          <td className="rounded-l-[12px] py-4">
+                          <td className="bg-secondary group-hover:bg-base-300 rounded-l-[12px] py-4">
                             <div className="flex items-center space-x-3">
                               {validator.logo_url ? (
                                 <Image
@@ -193,14 +189,16 @@ export default function ValidatorList({
                             </div>
                           </td>
 
-                          <td className="py-4">
+                          <td className="bg-secondary group-hover:bg-base-300 py-4">
                             <TruncatedAddressWithCopy
                               slice={10}
                               address={validator.operator_address}
                             />
                           </td>
-                          <td className="py-4">{validator.consensus_power?.toString() ?? 'N/A'}</td>
-                          <td className="rounded-r-[12px] py-4 text-right">
+                          <td className="bg-secondary group-hover:bg-base-300 py-4">
+                            {validator.consensus_power?.toString() ?? 'N/A'}
+                          </td>
+                          <td className="bg-secondary group-hover:bg-base-300 rounded-r-[12px] py-4 text-right">
                             <button
                               onClick={e => {
                                 e.stopPropagation();
diff --git a/components/groups/components/CountdownTimer.tsx b/components/groups/components/CountdownTimer.tsx
index d8d95ce..66c9b0f 100644
--- a/components/groups/components/CountdownTimer.tsx
+++ b/components/groups/components/CountdownTimer.tsx
@@ -26,9 +26,9 @@ export default function CountdownTimer({ endTime }: { endTime: Date }) {
 
   return (
     <div className="grid grid-flow-col gap-5 mt-2 text-center auto-cols-max">
-      <div className="grid grid-flow-col gap-5 mt-2 text-center auto-cols-max">
+      <div className="grid grid-flow-col gap-5 mt-2 text-center auto-cols-max text-primary-content">
         <div className="flex flex-col">
-          <span className="countdown  text-xl">
+          <span className="countdown text-xl">
             <span
               style={{ '--value': timeLeft.days } as React.CSSProperties}
               aria-label="days"
diff --git a/components/groups/components/__tests__/groupProposals.test.tsx b/components/groups/components/__tests__/groupProposals.test.tsx
index 2bd072d..78b2ee4 100644
--- a/components/groups/components/__tests__/groupProposals.test.tsx
+++ b/components/groups/components/__tests__/groupProposals.test.tsx
@@ -108,7 +108,7 @@ describe('ProposalsForPolicy Component', () => {
       }),
     }));
     renderWithChainProvider(<ProposalsForPolicy {...mockProps} />);
-    expect(screen.getByText('No proposals found')).toBeInTheDocument();
+    expect(screen.getByText('No proposal was found.')).toBeInTheDocument();
   });
 
   test('renders proposals list correctly', () => {
diff --git a/components/groups/components/groupProposals.tsx b/components/groups/components/groupProposals.tsx
index e905b62..95c9455 100644
--- a/components/groups/components/groupProposals.tsx
+++ b/components/groups/components/groupProposals.tsx
@@ -241,15 +241,12 @@ export default function GroupProposals({
   return (
     <div className="h-full flex flex-col p-4">
       {/* Header section */}
-      <div className="flex items-center justify-between mb-8">
-        <div className="flex items-center space-x-6">
-          <button
-            onClick={onBack}
-            className="btn btn-circle rounded-[16px] dark:bg-[#FFFFFF0F] bg-[#FFFFFF] btn-md"
-          >
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center space-x-4">
+          <button onClick={onBack} className="btn btn-circle rounded-[16px] bg-secondary btn-md">
             <ArrowRightIcon className="text-primary" />
           </button>
-          <h1 className="text-2xl font-bold">{groupName}</h1>
+          <h1 className="text-2xl font-bold text-primary-content">{groupName}</h1>
           <ProfileAvatar walletAddress={policyAddress} size={40} />
         </div>
         <div className="flex items-center space-x-4">
@@ -269,25 +266,25 @@ export default function GroupProposals({
       </div>
 
       {/* Search and New Proposal section */}
-      <div className="flex justify-between items-center mb-6">
-        <h2 className="text-xl font-semibold">Proposals</h2>
+      <div className="flex justify-between items-center mb-4">
         <div className="flex items-center space-x-4">
+          <h2 className="text-xl font-semibold text-primary-content">Proposals</h2>
           <div className="relative">
             <input
               type="text"
-              placeholder="Search for a group..."
-              className="input input-bordered w-[224px] h-[40px] rounded-[12px] border-none bg-[#0000000A] dark:bg-[#FFFFFF1F] pl-10"
+              placeholder="Search for a proposal..."
+              className="input input-bordered w-[224px] h-[40px] rounded-[12px] border-none bg-secondary text-secondary-content pl-10"
               value={searchTerm}
               onChange={e => setSearchTerm(e.target.value)}
             />
-            <SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+            <SearchIcon className="h-6 w-6 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 " />
           </div>
-          <Link href={`/groups/submit-proposal/${policyAddress}`} passHref>
-            <button className="btn btn-gradient rounded-[12px] w-[140px] text-white h-[52px]">
-              New proposal
-            </button>
-          </Link>
         </div>
+        <Link href={`/groups/submit-proposal/${policyAddress}`} passHref>
+          <button className="btn btn-gradient rounded-[12px] w-[140px] text-white h-[52px]">
+            New proposal
+          </button>
+        </Link>
       </div>
 
       {/* Table section - will fill remaining space */}
@@ -357,25 +354,25 @@ export default function GroupProposals({
                   <tr
                     key={proposal.id.toString()}
                     onClick={() => handleRowClick(proposal)}
-                    className="hover:bg-base-200 text-black dark:text-white rounded-lg cursor-pointer"
+                    className="group text-black dark:text-white rounded-lg cursor-pointer"
                   >
-                    <td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] rounded-l-[12px] px-4 py-4 w-[25%]">
+                    <td className="bg-secondary group-hover:bg-base-300 rounded-l-[12px] px-4 py-4 w-[25%]">
                       {proposal.id.toString()}
                     </td>
-                    <td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] truncate max-w-xs px-4 py-4 w-[25%]">
+                    <td className="bg-secondary group-hover:bg-base-300 truncate max-w-xs px-4 py-4 w-[25%]">
                       {proposal.title}
                     </td>
-                    <td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] px-4 py-4 w-[25%]">
+                    <td className="bg-secondary group-hover:bg-base-300 px-4 py-4 w-[25%]">
                       {timeLeft}
                     </td>
-                    <td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] px-4 py-4 w-[25%]">
+                    <td className="bg-secondary group-hover:bg-base-300 px-4 py-4 w-[25%]">
                       {proposal.messages.length > 0
                         ? proposal.messages.map((message, index) => (
                             <div key={index}>{getHumanReadableType((message as any)['@type'])}</div>
                           ))
                         : 'No messages'}
                     </td>
-                    <td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] rounded-r-[12px] px-4 py-4 w-[25%]">
+                    <td className="bg-secondary group-hover:bg-base-300 rounded-r-[12px] px-4 py-4 w-[25%]">
                       {isTalliesLoading ? (
                         <span className="loading loading-spinner loading-xs"></span>
                       ) : (
@@ -388,7 +385,7 @@ export default function GroupProposals({
             </tbody>
           </table>
         ) : (
-          <div className="text-center py-8 text-gray-500">No proposals found</div>
+          <div className="text-center py-8 text-gray-500">No proposal was found.</div>
         )}
       </div>
 
diff --git a/components/groups/components/myGroups.tsx b/components/groups/components/myGroups.tsx
index 55e581e..60c0b7d 100644
--- a/components/groups/components/myGroups.tsx
+++ b/components/groups/components/myGroups.tsx
@@ -83,7 +83,7 @@ export function YourGroups({
           <div className="flex justify-between items-center mb-4">
             <div className="flex items-center space-x-4">
               <h1
-                className="text-black dark:text-white"
+                className="text-secondary-content"
                 style={{ fontSize: '20px', fontWeight: 700, lineHeight: '24px' }}
               >
                 My groups
@@ -92,7 +92,7 @@ export function YourGroups({
                 <input
                   type="text"
                   placeholder="Search for a group..."
-                  className="input input-bordered w-[224px] h-[40px] rounded-[12px] border-none bg:[#0000000A] dark:bg-[#FFFFFF1F] pl-10"
+                  className="input input-bordered w-[224px] h-[40px] rounded-[12px] border-none bg-secondary text-secondary-content pl-10"
                   value={searchTerm}
                   onChange={e => setSearchTerm(e.target.value)}
                 />
@@ -109,71 +109,69 @@ export function YourGroups({
             </div>
           </div>
           <div className="flex-1 overflow-auto">
-            <div className="max-w-8xl mx-auto">
-              <table className="table w-full border-separate border-spacing-y-3">
-                <thead className="sticky top-0 bg-[#F0F0FF] dark:bg-[#0E0A1F]">
-                  <tr className="text-sm font-medium">
-                    <th className="bg-transparent w-1/6">Group Name</th>
-                    <th className="bg-transparent w-1/6">Active proposals</th>
-                    <th className="bg-transparent w-1/6">Authors</th>
-                    <th className="bg-transparent w-1/6">Group Balance</th>
-                    <th className="bg-transparent w-1/6">Qualified Majority</th>
-                    <th className="bg-transparent w-1/6">Group address</th>
-                  </tr>
-                </thead>
-                <tbody className="space-y-4">
-                  {isLoading
-                    ? // Skeleton
-                      Array(12)
-                        .fill(0)
-                        .map((_, index) => (
-                          <tr key={index}>
-                            <td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] rounded-l-[12px] w-1/6">
-                              <div className="flex items-center space-x-3">
-                                <div className="skeleton w-10 h-8 rounded-full shrink-0"></div>
-                                <div className="skeleton h-3 w-24"></div>
-                              </div>
-                            </td>
-                            <td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] w-1/6">
-                              <div className="skeleton h-2 w-8"></div>
-                            </td>
-                            <td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] w-1/6">
-                              <div className="skeleton h-2 w-24"></div>
-                            </td>
-                            <td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] w-1/6">
-                              <div className="skeleton h-2 w-16"></div>
-                            </td>
-                            <td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] w-1/6">
-                              <div className="skeleton h-2 w-20"></div>
-                            </td>
-                            <td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] rounded-r-[12px] w-1/6">
-                              <div className="skeleton h-2 w-32"></div>
-                            </td>
-                          </tr>
-                        ))
-                    : // content
-                      filteredGroups.map((group, index) => (
-                        <GroupRow
-                          key={index}
-                          group={group}
-                          proposals={
-                            group.policies && group.policies.length > 0
-                              ? proposals[group.policies[0].address]
-                              : []
-                          }
-                          onSelectGroup={(policyAddress, groupName) =>
-                            handleSelectGroup(
-                              policyAddress,
-                              groupName,
-                              (group.policies[0]?.decision_policy as ThresholdDecisionPolicySDKType)
-                                ?.threshold ?? '0'
-                            )
-                          }
-                        />
-                      ))}
-                </tbody>
-              </table>
-            </div>
+            <table className="table w-full border-separate border-spacing-y-3">
+              <thead className="sticky top-0 bg-background-color">
+                <tr className="text-sm font-medium">
+                  <th className="bg-transparent w-1/6">Group Name</th>
+                  <th className="bg-transparent w-1/6">Active proposals</th>
+                  <th className="bg-transparent w-1/6">Authors</th>
+                  <th className="bg-transparent w-1/6">Group Balance</th>
+                  <th className="bg-transparent w-1/6">Qualified Majority</th>
+                  <th className="bg-transparent w-1/6">Group address</th>
+                </tr>
+              </thead>
+              <tbody className="space-y-4">
+                {isLoading
+                  ? // Skeleton
+                    Array(12)
+                      .fill(0)
+                      .map((_, index) => (
+                        <tr key={index}>
+                          <td className="bg-secondary rounded-l-[12px] w-1/6">
+                            <div className="flex items-center space-x-3">
+                              <div className="skeleton w-10 h-8 rounded-full shrink-0"></div>
+                              <div className="skeleton h-3 w-24"></div>
+                            </div>
+                          </td>
+                          <td className="bg-secondary w-1/6">
+                            <div className="skeleton h-2 w-8"></div>
+                          </td>
+                          <td className="bg-secondary w-1/6">
+                            <div className="skeleton h-2 w-24"></div>
+                          </td>
+                          <td className="bg-secondary w-1/6">
+                            <div className="skeleton h-2 w-16"></div>
+                          </td>
+                          <td className="bg-secondary w-1/6">
+                            <div className="skeleton h-2 w-20"></div>
+                          </td>
+                          <td className="bg-secondary rounded-r-[12px] w-1/6">
+                            <div className="skeleton h-2 w-32"></div>
+                          </td>
+                        </tr>
+                      ))
+                  : // content
+                    filteredGroups.map((group, index) => (
+                      <GroupRow
+                        key={index}
+                        group={group}
+                        proposals={
+                          group.policies && group.policies.length > 0
+                            ? proposals[group.policies[0].address]
+                            : []
+                        }
+                        onSelectGroup={(policyAddress, groupName) =>
+                          handleSelectGroup(
+                            policyAddress,
+                            groupName,
+                            (group.policies[0]?.decision_policy as ThresholdDecisionPolicySDKType)
+                              ?.threshold ?? '0'
+                          )
+                        }
+                      />
+                    ))}
+              </tbody>
+            </table>
           </div>
         </div>
       </div>
@@ -226,7 +224,7 @@ function GroupRow({
 
   return (
     <tr
-      className="hover:bg-[#FFFFFF66] dark:hover:bg-[#FFFFFF1A] dark:bg-[#FFFFFF0F] bg-[#FFFFFF] text-black dark:text-white rounded-lg cursor-pointer"
+      className="group text-black dark:text-white rounded-lg cursor-pointer transition-colors"
       onClick={e => {
         e.stopPropagation();
         onSelectGroup(
@@ -238,33 +236,35 @@ function GroupRow({
         );
       }}
     >
-      <td className=" rounded-l-[12px] w-1/6">
+      <td className="bg-secondary group-hover:bg-base-300 rounded-l-[12px] px-4 py-4 w-[25%]">
         <div className="flex items-center space-x-3">
           <ProfileAvatar walletAddress={policyAddress} />
           <span className="font-medium">{truncateString(groupName, 24)}</span>
         </div>
       </td>
-      <td className=" w-1/6">
+      <td className="bg-secondary group-hover:bg-base-300 px-4 py-4 w-[15%]">
         {activeProposals.length > 0 ? (
-          <span className="badge badge-primary badge-sm">{activeProposals.length}</span>
+          <span className="badge badge-primary badge-sm text-neutral-content">
+            {activeProposals.length}
+          </span>
         ) : (
           '-'
         )}
       </td>
-      <td className=" w-1/6">
+      <td className="bg-secondary group-hover:bg-base-300 px-4 py-4 w-1/6">
         {truncateString(
           getAuthor(group.ipfsMetadata?.authors) || 'Unknown',
           getAuthor(group.ipfsMetadata?.authors || '').startsWith('manifest1') ? 6 : 24
         )}
       </td>
-      <td className=" w-1/6">
+      <td className="bg-secondary group-hover:bg-base-300 px-4 py-4 w-1/6">
         {Number(shiftDigits(balance?.amount ?? '0', -6)).toLocaleString(undefined, {
           maximumFractionDigits: 6,
         })}{' '}
         MFX
       </td>
-      <td className=" w-1/6">{`${(group.policies[0]?.decision_policy as ThresholdDecisionPolicySDKType).threshold ?? '0'} / ${group.total_weight ?? '0'}`}</td>
-      <td className="rounded-r-[12px] w-1/6">
+      <td className="bg-secondary group-hover:bg-base-300 px-4 py-4 w-1/6">{`${(group.policies[0]?.decision_policy as ThresholdDecisionPolicySDKType).threshold ?? '0'} / ${group.total_weight ?? '0'}`}</td>
+      <td className="bg-secondary group-hover:bg-base-300 px-4 py-4 rounded-r-[12px] w-1/6">
         <TruncatedAddressWithCopy address={policyAddress} slice={12} />
       </td>
     </tr>
diff --git a/components/groups/modals/voteDetailsModal.tsx b/components/groups/modals/voteDetailsModal.tsx
index 140f409..e6aa8d7 100644
--- a/components/groups/modals/voteDetailsModal.tsx
+++ b/components/groups/modals/voteDetailsModal.tsx
@@ -66,7 +66,7 @@ function VoteDetailsModal({
 
   const { theme } = useTheme();
 
-  const textColor = theme === 'dark' ? '#E0D1D4' : '#2e2e2e';
+  const textColor = theme === 'dark' ? '#FFFFFF' : '#161616';
 
   const normalizedMembers = useMemo(
     () =>
@@ -130,6 +130,9 @@ function VoteDetailsModal({
       labels: {
         useSeriesColors: true,
       },
+      markers: {
+        strokeWidth: 0,
+      },
     },
     states: {
       normal: {
@@ -182,7 +185,7 @@ function VoteDetailsModal({
         data: chartData,
       },
     ],
-    colors: ['#00D515', '#F54562', '#FBBD23', '#3B82F6'],
+    colors: ['#4CAF50', '#E53935', '#FFB300', '#3F51B5'],
     tooltip: {
       enabled: false,
     },
@@ -349,9 +352,9 @@ function VoteDetailsModal({
       if (Array.isArray(value)) {
         return (
           <div key={key} style={{ marginLeft: `${depth * 20}px` }}>
-            <h4 className="font-medium">{key}:</h4>
+            <h4 className="font-medium text-primary-content">{key}:</h4>
             {value.map((item, index) => (
-              <div key={index} className="ml-4">
+              <div key={index} className="ml-4 text-primary-content">
                 {renderMessageField(`Item ${index + 1}`, item, depth + 1)}
               </div>
             ))}
@@ -360,7 +363,7 @@ function VoteDetailsModal({
       } else {
         return (
           <div key={key} style={{ marginLeft: `${depth * 20}px` }}>
-            <h4 className="font-medium">{key}:</h4>
+            <h4 className="font-medium text-primary-content">{key}:</h4>
             {Object.entries(value).map(([subKey, subValue]) =>
               renderMessageField(subKey, subValue, depth + 1)
             )}
@@ -370,11 +373,13 @@ function VoteDetailsModal({
     } else {
       return (
         <div key={key} style={{ marginLeft: `${depth * 20}px` }}>
-          <h4 className="font-large text-md">{key}:</h4>
+          <h4 className="font-large text-md text-primary-content">{key}:</h4>
           {typeof value === 'string' && value.match(/^[a-zA-Z0-9]{40,}$/) ? (
             <TruncatedAddressWithCopy slice={14} address={value} />
           ) : (
-            <p title={String(value)}>{truncateText(String(value))}</p>
+            <p className="text-primary-content" title={String(value)}>
+              {truncateText(String(value))}
+            </p>
           )}
         </div>
       );
@@ -416,21 +421,25 @@ function VoteDetailsModal({
 
   return (
     <dialog id={modalId} className="modal">
-      <div className="modal-box relative max-w-4xl min-h-96 flex flex-col md:flex-row md:ml-20 -mt-12 rounded-[24px] shadow-lg dark:bg-[#1D192D] bg-[#FFFFFF] transition-all duration-300 z-[1000]">
+      <div className="modal-box relative max-w-4xl min-h-96 max-h-[80vh] overflow-y-hidden flex flex-col md:flex-row md:ml-20 -mt-12 rounded-[24px] shadow-lg bg-secondary transition-all duration-300 z-[1000]">
         <form method="dialog" onSubmit={onClose}>
-          <button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+          <button className="btn btn-sm btn-circle text-black dark:text-white btn-ghost absolute right-2 top-2">
+            ✕
+          </button>
         </form>
         <div className="flex flex-col flex-grow w-full p-2 space-y-6">
           <div className="flex flex-row justify-between items-center">
             <div className="flex flex-row gap-2 items-center">
-              <p className="text-xl font-bold">#{proposal?.id?.toString() ?? '0'}</p>
-              <span className="badge badge-lg shadow-lg justify-center badge-primary rounded-full">
+              <p className="text-xl font-bold text-primary-content">
+                #{proposal?.id?.toString() ?? '0'}
+              </p>
+              <span className="badge badge-lg shadow-lg justify-center badge-primary text-neutral-content rounded-full">
                 {getStatusLabel(proposal)}
               </span>
             </div>
             {userHasVoted && (
               <div className="flex flex-row gap-2 justify-center items-center">
-                <span className="text-sm">Your vote:</span>
+                <span className="text-sm text-primary-content">Your vote:</span>
                 <span
                   className={`badge badge-lg rounded-full ${
                     userVoteOption?.toString() === 'VOTE_OPTION_YES'
@@ -451,31 +460,33 @@ function VoteDetailsModal({
           </div>
           <div className="flex flex-col justify-start items-start">
             <p className="text-sm font-light text-gray-500 dark:text-gray-400">TITLE</p>
-            <h1 className="text-2xl font-bold max-w-[20ch] truncate">{proposal?.title}</h1>
+            <h1 className="text-2xl font-bold max-w-[20ch] truncate text-primary-content">
+              {proposal?.title}
+            </h1>
             <span className="text-sm font-light text-gray-500 dark:text-gray-400 mt-2">
               SUBMITTED
             </span>
-            <span className="text-sm">
+            <span className="text-sm text-primary-content">
               {new Date(proposal?.submit_time).toDateString().toLocaleString()}
             </span>
           </div>
           <div className="divider my-"></div>
           <div className="w-full">
             <p className="text-sm font-light text-gray-500 dark:text-gray-400 mb-2 ">SUMMARY</p>
-            <div className="dark:bg-[#FFFFFF0F] bg-[#0000000A] rounded-[12px] p-4">
-              <p className="text-sm">{proposal?.summary}</p>
+            <div className="bg-base-300 rounded-[12px] p-4">
+              <p className="text-sm text-primary-content">{proposal?.summary}</p>
             </div>
           </div>
           <div className="w-full">
-            <p className="text-sm font-light text-gray-500 dark:text-gray-400 mb-2 ">MESSAGES</p>
-            <div className="dark:bg-[#FFFFFF0F] bg-[#0000000A]  rounded-[12px] p-4 overflow-y-auto max-h-[20rem]">
+            <p className="text-sm font-light text-gray-500 dark:text-gray-400 mb-2">MESSAGES</p>
+            <div className="bg-base-300 rounded-[12px] p-4 overflow-y-auto max-h-[20rem]">
               {proposal?.messages?.map((message: any, index: number) => {
                 const messageType = message['@type'];
                 const fieldsToShow = importantFields[messageType] || defaultFields;
 
                 return (
                   <div key={index} className="mb-4">
-                    <h3 className="text-lg font-semibold mb-2">
+                    <h3 className="text-lg font-semibold mb-2 text-primary-content">
                       {messageType.split('.').pop().replace('Msg', '')}
                     </h3>
                     <div>
@@ -497,24 +508,30 @@ function VoteDetailsModal({
         <div className="flex flex-col w-full relative flex-grow items-start justify-start p-6 space-y-6">
           <div className="w-full">
             <p className="text-sm font-light text-gray-500 dark:text-gray-400 mb-2">TALLY</p>
-            <div className="dark:bg-[#FFFFFF0F] bg-[#0000000A] rounded-[12px] w-full">
+            <div className="bg-base-300 rounded-[12px] w-full">
               <Chart options={options} series={[{ data: chartData }]} type="bar" height={200} />
             </div>
           </div>
           <div className="w-full">
             <p className="text-sm font-light text-gray-500 dark:text-gray-400 mb-2">MEMBERS</p>
-            <div className="dark:bg-[#FFFFFF0F] bg-[#0000000A] rounded-[12px] p-4 w-full">
-              <div className="overflow-x-auto w-full min-h-64 max-h-[22.5rem]  overflow-y-auto">
+            <div className="bg-base-300 rounded-[12px] p-4 w-full">
+              <div className="overflow-x-auto w-full min-h-64 max-h-[22.5rem] overflow-y-auto">
                 <table className="table-auto w-full text-sm">
-                  <thead className="text-xs uppercase bg-base-200">
+                  <thead className="text-xs uppercase bg-neutral">
                     <tr>
-                      <th scope="col" className="px-6 py-3 first:rounded-tl-[12px]">
+                      <th
+                        scope="col"
+                        className="px-6 py-3 first:rounded-tl-[12px] text-primary-content"
+                      >
                         Address
                       </th>
-                      <th scope="col" className="px-6 py-3">
+                      <th scope="col" className="px-6 py-3 text-primary-content">
                         Weight
                       </th>
-                      <th scope="col" className="px-6 py-3 last:rounded-tr-[12px]">
+                      <th
+                        scope="col"
+                        className="px-6 py-3 last:rounded-tr-[12px] text-primary-content"
+                      >
                         Vote
                       </th>
                     </tr>
@@ -523,12 +540,12 @@ function VoteDetailsModal({
                     {normalizedMembers?.map((member, index) => {
                       const memberVote = voteMap[member?.address];
                       return (
-                        <tr key={index} className="border-b dark:border-gray-700">
+                        <tr key={index} className="border-b border-gray-500">
                           <td className="px-6 py-4">
                             <TruncatedAddressWithCopy slice={8} address={member?.address} />
                           </td>
-                          <td className="px-6 py-4">{member?.weight}</td>
-                          <td className="px-6 py-4">
+                          <td className="px-6 py-4 text-primary-content">{member?.weight}</td>
+                          <td className="px-6 py-4 text-primary-content">
                             {optionToVote(memberVote?.toString()) || 'N/A'}
                           </td>
                         </tr>
diff --git a/tailwind.config.js b/tailwind.config.js
index c0adb73..2985fff 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -78,50 +78,48 @@ module.exports = {
     themes: [
       {
         light: {
-          'wallet-background': '#1c1c1c1a',
-          primary: '#A287FF',
+          primary: '#A087FF',
           'primary-content': '#161616',
-          secondary: '#F0F0FF',
+          secondary: '#FBFBFF',
           'secondary-content': '#161616',
           accent: '#30DB5B',
           'accent-content': '#161616',
           neutral: '#FFFFFF',
           'button-gradient': 'linear-gradient(to right, #A087FF, #380CC5)',
-          'neutral-content': '#161616',
+          'neutral-content': '#FFFFFF',
           'base-100': '#FFFFFF',
           'base-200': '#F0F0FF',
-          'base-300': '#E1E1F9',
+          'base-300': '#F5F5F5',
           'base-content': '#161616',
           'tooltip-color': '#ffffff',
           'background-color': '#F0F0FF',
-          info: '#3B82F6',
-          success: '#00D515',
-          warning: '#FBBD23',
-          error: '#F54562',
+          info: '#3F51B5',
+          success: '#4CAF50',
+          warning: '#FFB300',
+          error: '#E53935',
         },
       },
       {
         dark: {
-          'wallet-background': '#dcdcdc15',
-          primary: '#A287FF',
+          primary: '#A087FF',
           'primary-content': '#FFFFFF',
           secondary: '#1D192D',
           'secondary-content': '#FFFFFF',
           accent: '#30DB5B',
           'accent-content': '#FFFFFF',
-          'button-gradient': 'linear-gradient(to right, #A087FF, #380CC5)',
           neutral: '#1D192D',
+          'button-gradient': 'linear-gradient(to right, #A087FF, #380CC5)',
           'neutral-content': '#FFFFFF',
-          'background-color': '#0E0A1F',
           'base-100': '#161616',
           'base-200': '#1D192D',
-          'tooltip-color': '#ffffff',
-          'base-300': '#2A2640',
+          'base-300': '#272336',
           'base-content': '#FFFFFF',
-          info: '#3B82F6',
-          success: '#00D515',
-          warning: '#FBBD23',
-          error: '#F54562',
+          'tooltip-color': '#ffffff',
+          'background-color': '#0E0A1F',
+          info: '#3F51B5',
+          success: '#4CAF50',
+          warning: '#FFB300',
+          error: '#E53935',
         },
       },
     ],