diff --git a/instances/treasury-devdao.near/widget/components/Navbar.jsx b/instances/treasury-devdao.near/widget/components/Navbar.jsx
index 129e327f..1e31b53f 100644
--- a/instances/treasury-devdao.near/widget/components/Navbar.jsx
+++ b/instances/treasury-devdao.near/widget/components/Navbar.jsx
@@ -48,7 +48,7 @@ const Navbar = styled.div`
   .account-container {
     color: var(--theme-color) !important;
     font-size: 14px;
-    font-weight: 700;
+    font-weight: 500;
   }
 
   .text-sm {
@@ -58,7 +58,7 @@ const Navbar = styled.div`
 `;
 
 const LinksContainer = styled.div`
-  font-size: 17px;
+  font-size: 15px;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -134,7 +134,7 @@ const treasuryLogo = metadata?.flagLogo ? metadata?.flagLogo : logo;
 return (
   <Navbar className="position-relative d-flex justify-content-between gap-2">
     <div className="d-flex flex-column gap-2">
-      <div className="d-flex gap-2 align-items-center">
+      <div className="d-flex gap-3 align-items-center">
         {/* logo can be svg or src */}
         {treasuryLogo && typeof treasuryLogo === "string" ? (
           <img
@@ -146,12 +146,17 @@ return (
         ) : (
           treasuryLogo
         )}
-        <div className="h3 mb-0">{getTitle(page ?? "dashboard")}</div>
-        {isTesting && <div className="text-secondary">(Testing)</div>}
-      </div>
-      <div>
-        <span className="text-sm">Treasury Wallet: </span>
-        <span className="account-container">{treasuryDaoID}</span>
+        <div className="d-flex flex-column">
+          <div className="h4 mb-0 d-flex flex-row gap-2 align-items-center">
+            <div>{getTitle(page ?? "dashboard")}</div>
+            {isTesting && <small className="badge">Testing</small>}
+          </div>
+
+          <div>
+            <span className="text-sm">Treasury Wallet: </span>
+            <span className="account-container">{treasuryDaoID}</span>
+          </div>
+        </div>
       </div>
     </div>
     <div className="d-flex gap-3 align-items-center">
diff --git a/instances/treasury-devdao.near/widget/components/Pagination.jsx b/instances/treasury-devdao.near/widget/components/Pagination.jsx
index 268bbb3d..97b2e0d5 100644
--- a/instances/treasury-devdao.near/widget/components/Pagination.jsx
+++ b/instances/treasury-devdao.near/widget/components/Pagination.jsx
@@ -13,10 +13,7 @@ const currenPageLimit =
     : currentPage * rowsPerPage;
 
 return (
-  <div
-    className="d-flex justify-content-between align-items-center gap-2 flex-wrap"
-    style={{ color: "#555555" }}
-  >
+  <div className="d-flex justify-content-between align-items-center gap-2 flex-wrap px-3">
     <div className="d-flex gap-2 align-items-center">
       Rows per Page:
       <select
diff --git a/instances/treasury-devdao.near/widget/components/SettingsDropdown.jsx b/instances/treasury-devdao.near/widget/components/SettingsDropdown.jsx
index f2639117..60a76ce8 100644
--- a/instances/treasury-devdao.near/widget/components/SettingsDropdown.jsx
+++ b/instances/treasury-devdao.near/widget/components/SettingsDropdown.jsx
@@ -130,12 +130,12 @@ return (
       tabIndex="0"
       onBlur={() => setIsOpen(false)}
     >
-      <div
+      <button
         className={"dropdown-toggle btn-outline-plain "}
         onClick={toggleDropdown}
       >
         <i class="bi bi-gear"></i>
-      </div>
+      </button>
 
       {isOpen && (
         <div className="dropdown-menu rounded-2 dropdown-menu-end dropdown-menu-lg-start px-2 shadow show w-100">
diff --git a/instances/treasury-devdao.near/widget/components/SidebarAndMainLayout.jsx b/instances/treasury-devdao.near/widget/components/SidebarAndMainLayout.jsx
index 9d3a115c..95df9862 100644
--- a/instances/treasury-devdao.near/widget/components/SidebarAndMainLayout.jsx
+++ b/instances/treasury-devdao.near/widget/components/SidebarAndMainLayout.jsx
@@ -10,15 +10,11 @@ const Container = styled.div`
   }
 
   .link.active {
-    font-weight: bolder;
-    color: var(--theme-color) !important;
-    background-color:var(--grey-04);
+    background-color: var(--grey-035);
   }
 
   .link:hover {
-    color: var(--theme-color)) !important;
-    color: var(--theme-color) !important;
-    background-color:var(--grey-04);
+    background-color: var(--grey-035);
   }
 
   .flex-1 {
@@ -41,10 +37,7 @@ const [currentTab, setCurrentTab] = useState(
 
 return (
   <Container className="d-flex gap-4 flex-wrap">
-    <div
-      className="card rounded-3 py-3 flex-1"
-      style={{ height: "max-content" }}
-    >
+    <div className="flex-1" style={{ height: "max-content" }}>
       <div className="d-flex gap-2 flex-column">
         {leftNavbarOptions.map((item) => {
           const { title } = item;
@@ -52,7 +45,7 @@ return (
             <div
               onClick={() => setCurrentTab(item)}
               className={[
-                "link d-inline-flex gap-2 p-2 px-3 rounded-2 pointer",
+                "link d-inline-flex gap-2 p-2 px-3 rounded-3 pointer",
                 currentTab.title === title ? "active" : "",
               ].join(" ")}
               key={title}
diff --git a/instances/treasury-devdao.near/widget/components/Tabs.jsx b/instances/treasury-devdao.near/widget/components/Tabs.jsx
index e7744ad7..b504cda8 100644
--- a/instances/treasury-devdao.near/widget/components/Tabs.jsx
+++ b/instances/treasury-devdao.near/widget/components/Tabs.jsx
@@ -25,18 +25,18 @@ const Container = styled.div`
 const NavUnderline = styled.ul`
   cursor: pointer;
   font-size: 16px;
+  font-weight: 500;
+
   .nav-link {
     color: var(--text-secondary-color) !important;
-    padding-bottom: 19px;
+    padding-bottom: 24px;
   }
   .active {
-    font-weight: bolder;
     color: var(--text-color) !important;
     border-bottom: 3px solid var(--theme-color);
   }
   .nav-link:hover {
     color: var(--text-color) !important;
-    font-weight: bolder;
   }
 `;
 
@@ -60,7 +60,7 @@ useEffect(() => {
 }, [props]);
 
 return (
-  <Container className="card rounded-3 py-3 d-flex flex-column gap-3">
+  <Container className="card py-3 d-flex flex-column">
     <div
       className="d-flex justify-content-between gap-2 align-items-center border-bottom flex-wrap"
       style={{ paddingRight: "10px" }}
@@ -93,7 +93,7 @@ return (
       </div>
     </div>
     {currentTab && (
-      <div className="w-100 h-100 px-3" key={currentTab.title}>
+      <div className="w-100 h-100" key={currentTab.title}>
         <Widget src={currentTab.href} props={currentTabProps} />
       </div>
     )}
diff --git a/instances/treasury-devdao.near/widget/components/TokenAmount.jsx b/instances/treasury-devdao.near/widget/components/TokenAmount.jsx
index 6eb51007..228ab13c 100644
--- a/instances/treasury-devdao.near/widget/components/TokenAmount.jsx
+++ b/instances/treasury-devdao.near/widget/components/TokenAmount.jsx
@@ -26,7 +26,7 @@ if (amountWithoutDecimals !== undefined) {
 return (
   <div className="text-center">
     <div className="d-flex gap-1 align-items-center justify-content-end">
-      <span className="amount h6 bolder mb-0">
+      <span className="amount bolder mb-0">
         {amount.toLocaleString("en-US", {
           minimumFractionDigits: 2,
           maximumFractionDigits: 2,
diff --git a/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx b/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
index 1d031e98..c8daafef 100644
--- a/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
+++ b/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
@@ -38,6 +38,7 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
   --grey-01: ${isDarkTheme ? "#F4F4F4" : "#1B1B18"};
   --grey-02: ${isDarkTheme ? "#B3B3B3" : "#555555"};
   --grey-03: ${isDarkTheme ? "#555555" : "#B3B3B3"};
+  --grey-035: ${isDarkTheme ? "#3E3E3E" : "#E6E6E6"};
   --grey-04: ${isDarkTheme ? "#323232" : "#F4F4F4"};
   --grey-05: ${isDarkTheme ? "#1B1B18" : "#F7F7F7"};
   --icon-color:  ${isDarkTheme ? "#CACACA" : "#060606"};
@@ -110,27 +111,33 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
     }
 
     color: var(--text-color);
+    font-weight: 500;
 
     a {
       text-decoration: none;
       color: var(--text-color) !important;
+      font-weight: 500;
       &.active {
         color: var(--text-color) !important;
-        font-weight: 700 !important;
       }
 
       &:hover {
         text-decoration: none;
         color: var(--text-color) !important;
-        font-weight: 700 !important;
       }
     }
 
+    button {
+      height: 40px;
+      font-weight: 500;
+    }
+
     button.primary {
-      background: var(--theme-color) !important;
+      background: var(--theme-color);
       color: var(--text-alt-color) !important;
       border: none !important;
       padding-block: 0.7rem !important;
+
       i {
         color: var(--text-alt-color) !important;
       }
@@ -140,6 +147,11 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
       background: var(--theme-color) !important;
       color: var(--text-alt-color) !important;
       border: none !important;
+
+      &:hover {
+        background: var(--theme-color-dark);
+      }
+
       i {
         color: var(--text-alt-color) !important;
       }
@@ -255,8 +267,18 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
       color: inherit !important;
     }
 
+    .badge {
+      padding: 6px 8px;
+      background: #f7dbff;
+      color: var(--theme-color);
+      rounded: 8px;
+      font-weight: 500;
+      font-size: 12px;
+    }
+
     .btn-outline-plain {
-      padding-block: 8px !important;
+      height: 40px;
+      padding-block: 7px !important;
       padding-inline: 10px !important;
       border-radius: 0.375rem !important;
       border: 1.5px solid var(--border-color) !important;
@@ -292,6 +314,15 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
     .table {
       border-color: var(--border-color) !important;
       color: var(--text-color) !important;
+      margin-bottom: 20px;
+    }
+
+    .table td:first-child {
+      padding-left: 20px;
+    }
+
+    .table td:last-child {
+      padding-right: 20px;
     }
 
     .bg-white {
@@ -394,10 +425,10 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
     <></>
   ) : (
     <ParentContainer data-bs-theme={isDarkTheme ? "dark" : "light"}>
-      <Theme className="h-100 w-100">
+      <Theme className="min-h-100 w-100">
         <AppHeader page={page} instance={instance} />
         <BalanceBanner accountId={accountId} treasuryDaoID={treasuryDaoID} />
-        <div className="px-3 py-2 w-100 h-100">{children}</div>
+        <div className="px-3 pb-3 w-100 h-100">{children}</div>
       </Theme>
     </ParentContainer>
   );
diff --git a/instances/treasury-devdao.near/widget/pages/dashboard/Chart.jsx b/instances/treasury-devdao.near/widget/pages/dashboard/Chart.jsx
index 333ea80d..4b67294d 100644
--- a/instances/treasury-devdao.near/widget/pages/dashboard/Chart.jsx
+++ b/instances/treasury-devdao.near/widget/pages/dashboard/Chart.jsx
@@ -18,7 +18,7 @@ const [height, setHeight] = useState(350);
 const [history, setHistory] = useState([]);
 const [tokenAddresses, setTokenAddresses] = useState([]);
 const [selectedPeriod, setSelectedPeriod] = useState({
-  value: 1,
+  value: 24 * 30,
   interval: 12,
 });
 const [selectedToken, setSelectedToken] = useState("near");
@@ -54,7 +54,7 @@ const metadata = JSON.parse(atob(config.metadata ?? ""));
 
 const isDarkTheme = metadata.theme === "dark";
 const bgPageColor = isDarkTheme ? "#222222" : "#FFFFFF";
-const borderColor = isDarkTheme ? "#3B3B3B" : "rgba(226, 230, 236, 1)";
+const borderColor = isDarkTheme ? "#3B3B3B" : "#000";
 const iconColor = isDarkTheme ? "#CACACA" : "#060606";
 const textColor = isDarkTheme ? "#CACACA" : "#1B1B18";
 const fillStyle = isDarkTheme
@@ -274,6 +274,12 @@ const Period = styled.div`
   color: #999999;
   font-weight: 500;
 
+  &:hover {
+    background-color: var(--grey-04);
+    color: var(--text-color);
+    border-radius: 8px;
+  }
+
   &.selected {
     background-color: var(--grey-04);
     color: var(--text-color);
diff --git a/instances/treasury-devdao.near/widget/pages/dashboard/Portfolio.jsx b/instances/treasury-devdao.near/widget/pages/dashboard/Portfolio.jsx
index 605fa6e2..72ed2ab0 100644
--- a/instances/treasury-devdao.near/widget/pages/dashboard/Portfolio.jsx
+++ b/instances/treasury-devdao.near/widget/pages/dashboard/Portfolio.jsx
@@ -120,7 +120,7 @@ const BalanceDisplay = ({
               />
             )}
           </div>
-          <div className="d-flex gap-3 align-items-center justify-content-end">
+          <div className="d-flex gap-2 align-items-center justify-content-end">
             <div className="d-flex flex-column align-items-end">
               <div className="h6 mb-0 d-flex align-items-center gap-1">
                 <NearToken height={20} width={20} />
@@ -184,7 +184,7 @@ const PortfolioCard = ({
               </div>
             </div>
           </div>
-          <div className="d-flex gap-3 align-items-center justify-content-end">
+          <div className="d-flex gap-2 align-items-center justify-content-end">
             <div className="d-flex flex-column align-items-end">
               <div className="h6 mb-0">{formatToReadableDecimals(balance)}</div>
               <div className="text-sm text-secondary">
@@ -300,7 +300,7 @@ const isLoading =
 return (
   <div className="card flex-1 overflow-hidden border-bottom">
     {heading}
-    <div className="my-2">
+    <div className="mb-2">
       {isLoading ? (
         <div className="d-flex justify-content-center align-items-center w-100 h-100">
           <Loading />
diff --git a/instances/treasury-devdao.near/widget/pages/dashboard/index.jsx b/instances/treasury-devdao.near/widget/pages/dashboard/index.jsx
index 4520cda4..9853e00e 100644
--- a/instances/treasury-devdao.near/widget/pages/dashboard/index.jsx
+++ b/instances/treasury-devdao.near/widget/pages/dashboard/index.jsx
@@ -54,7 +54,7 @@ const Wrapper = styled.div`
   }
 
   .flex-container {
-    min-width: 325px;
+    min-width: 400px;
     height: fit-content;
   }
 
@@ -252,7 +252,7 @@ return (
                 <div className="h5 mb-0">Sputnik DAO</div>
                 <div>
                   <span className="text-sm text-secondary">Wallet: </span>
-                  <span className="text-theme  text-sm fw-bold">
+                  <span className="text-theme text-sm fw-medium">
                     {treasuryDaoID}
                   </span>
                 </div>
@@ -280,7 +280,7 @@ return (
                   <div className="h5 mb-0">Lockup</div>
                   <div>
                     <span className="text-sm text-secondary">Wallet: </span>
-                    <span className="text-theme  text-sm fw-bold">
+                    <span className="text-theme text-sm fw-medium">
                       {lockupContract}
                     </span>
                   </div>
diff --git a/instances/treasury-devdao.near/widget/pages/payments/Table.jsx b/instances/treasury-devdao.near/widget/pages/payments/Table.jsx
index 5e9f6939..75f16ed4 100644
--- a/instances/treasury-devdao.near/widget/pages/payments/Table.jsx
+++ b/instances/treasury-devdao.near/widget/pages/payments/Table.jsx
@@ -57,6 +57,7 @@ const hasDeletePermission = (deleteGroup?.approverAccounts ?? []).includes(
 const Container = styled.div`
   font-size: 13px;
   min-height: 60vh;
+  display: flex;
 
   td {
     padding: 0.5rem;
@@ -245,7 +246,7 @@ const ProposalsComponent = () => {
                 : ""
             }
           >
-            <td className="fw-semi-bold">{item.id}</td>
+            <td className="fw-semi-bold px-3">{item.id}</td>
             <td className={isVisible("Created Date")}>
               <Widget
                 src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Date`}
@@ -489,13 +490,13 @@ return (
     transferApproversGroup === null ||
     !nearStakedTokens ||
     policy === null ? (
-      <div className="d-flex justify-content-center align-items-center w-100 h-100">
+      <div className="d-flex justify-content-center align-items-center w-100">
         <Widget
           src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Spinner"}
         />
       </div>
     ) : (
-      <div>
+      <div className="w-100">
         {proposals.length === 0 ? (
           <div
             style={{ height: "50vh" }}
@@ -517,7 +518,7 @@ return (
           <table className="table">
             <thead>
               <tr className="text-secondary">
-                <td>#</td>
+                <td className="px-3">#</td>
                 <td className={isVisible("Created Date")}>Created Date</td>
                 {!isPendingRequests && <td className="text-center">Status</td>}
                 {showReferenceProposal && (
diff --git a/instances/treasury-devdao.near/widget/pages/payments/index.jsx b/instances/treasury-devdao.near/widget/pages/payments/index.jsx
index e1583adb..f5d03df2 100644
--- a/instances/treasury-devdao.near/widget/pages/payments/index.jsx
+++ b/instances/treasury-devdao.near/widget/pages/payments/index.jsx
@@ -25,14 +25,14 @@ const SidebarMenu = ({ currentTab }) => {
   return (
     <div
       className="d-flex gap-2 align-items-center"
-      style={{ paddingBottom: "7px" }}
+      style={{ paddingBottom: "16px" }}
     >
       {hasCreatePermission && (
         <Widget
           src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.InsufficientBannerModal`}
           props={{
             ActionButton: () => (
-              <button className="primary py-1 px-3 rounded-2 h6 fw-bold d-flex align-items-center gap-2 mb-0">
+              <button className="btn primary-button d-flex align-items-center gap-2 mb-0">
                 <i class="bi bi-plus-lg h5 mb-0"></i>Create Request
               </button>
             ),
diff --git a/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx b/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx
index 477734d6..9468485e 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx
@@ -55,7 +55,6 @@ const Container = styled.div`
   .card-title {
     font-size: 20px;
     font-weight: 600;
-    padding-block: 5px;
   }
 `;
 
@@ -296,15 +295,15 @@ return (
       }}
     />
 
-    <div className="card rounded-3 py-3 d-flex flex-column gap-2 flex-1 w-100">
-      <div className="d-flex justify-content-between gap-2 align-items-center border-bottom px-2">
-        <div className="card-title px-3 mb-0">All Members</div>
+    <div className="card rounded-4 py-3 d-flex flex-column flex-1 w-100">
+      <div className="d-flex justify-content-between gap-2 align-items-center border-bottom px-3 pb-3">
+        <div className="card-title mb-0">All Members</div>
         {hasCreatePermission && (
           <Widget
             src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.InsufficientBannerModal`}
             props={{
               ActionButton: () => (
-                <button className="primary py-1 px-3 rounded-2 h6 fw-bold d-flex align-items-center gap-2 ">
+                <button className="btn primary-button d-flex align-items-center gap-2">
                   <i class="bi bi-plus-lg h5 mb-0"></i>New Member
                 </button>
               ),
@@ -325,7 +324,7 @@ return (
         </div>
       ) : (
         <div
-          className="d-flex flex-column flex-1 justify-content-between px-2"
+          className="d-flex flex-column flex-1 justify-content-between"
           style={{ overflow: "auto" }}
         >
           <table className="table">
diff --git a/instances/treasury-devdao.near/widget/pages/settings/Theme.jsx b/instances/treasury-devdao.near/widget/pages/settings/Theme.jsx
index de644a72..0d0e67ae 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/Theme.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/Theme.jsx
@@ -349,11 +349,11 @@ return (
       showError={showErrorToast}
       toggleToast={() => setShowErrorToast(false)}
     />
-    <div className="card rounded-3 w-100 h-100 py-3">
-      <div className="card-title px-3 mb-0">Theme & Logo</div>
+    <div className="card rounded-4 w-100 h-100 py-3">
+      <div className="card-title px-3 pb-3">Theme & Logo</div>
       {!metadata ? (
         <div
-          className=" d-flex justify-content-center align-items-center w-100 h-100"
+          className="d-flex justify-content-center align-items-center w-100 h-100"
           style={{ minHeight: 300 }}
         >
           <Widget
@@ -361,7 +361,7 @@ return (
           />
         </div>
       ) : (
-        <div className="d-flex flex-column gap-4 p-3">
+        <div className="d-flex flex-column gap-4 px-3 py-1">
           <div class="d-flex gap-2 align-items-center flex-wrap flex-md-nowrap">
             <img
               src={image ? image : defaultImage}
diff --git a/instances/treasury-devdao.near/widget/pages/settings/Thresholds.jsx b/instances/treasury-devdao.near/widget/pages/settings/Thresholds.jsx
index 734840e0..ad0f39b3 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/Thresholds.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/Thresholds.jsx
@@ -145,6 +145,7 @@ const Container = styled.div`
 
   .selected-role {
     background-color: var(--grey-04);
+    font-weight: 600;
   }
 
   .tag {
@@ -311,7 +312,7 @@ return (
       toggleToast={() => setShowErrorToast(false)}
     />
     {Array.isArray(rolesData) && rolesData.length ? (
-      <div className="card rounded-3 d-flex flex-row px-0 flex-wrap">
+      <div className="card rounded-4 d-flex flex-row px-0 flex-wrap">
         <Widget
           src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Modal`}
           props={{
@@ -340,8 +341,8 @@ return (
           }}
         />
         <div className="flex-1 border-right py-3 ">
-          <div className="card-title px-3">Permission Groups</div>
-          <div className="d-flex flex-column gap-1" style={{ fontWeight: 600 }}>
+          <div className="card-title px-3 pb-3">Permission Groups</div>
+          <div className="d-flex flex-column gap-1 py-1">
             {rolesData.map((role) => {
               const name = role.roleName;
               return (
@@ -359,13 +360,13 @@ return (
           </div>
         </div>
         <div className="flex-1 border-right py-3 ">
-          <div className="card-title px-3">
+          <div className="card-title px-3 pb-3">
             Members{" "}
             <span className="tag rounded-pill px-3">
               {selectedGroup.members.length}
             </span>
           </div>
-          <div className="d-flex flex-column gap-1">
+          <div className="d-flex flex-column gap-1 py-1">
             {Array.isArray(selectedGroup.members) &&
               selectedGroup.members.map((member) => (
                 <div
@@ -381,8 +382,8 @@ return (
           </div>
         </div>
         <div className="flex-1 border-right py-3 ">
-          <div className="card-title px-3">Voting Policy</div>
-          <div className="d-flex flex-column gap-3 px-3 w-100">
+          <div className="card-title px-3 pb-3">Voting Policy</div>
+          <div className="d-flex flex-column gap-3 px-3 w-100 py-1">
             <div className="text-md">
               How many votes are needed for decisions in the `
               {selectedGroup.roleName}` permission group?
diff --git a/instances/treasury-devdao.near/widget/pages/settings/VotingDurationPage.jsx b/instances/treasury-devdao.near/widget/pages/settings/VotingDurationPage.jsx
index 4e314371..b31f7237 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/VotingDurationPage.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/VotingDurationPage.jsx
@@ -309,9 +309,9 @@ return (
       showError={showErrorToast}
       toggleToast={() => setShowErrorToast(false)}
     />
-    <div className="card rounded-3 py-3" style={{ maxWidth: "50rem" }}>
-      <div className="card-title px-3 mb-0">Voting Duration</div>
-      <div className="p-3 d-flex flex-column gap-2">
+    <div className="card rounded-4 py-3" style={{ maxWidth: "50rem" }}>
+      <div className="card-title px-3 pb-3">Voting Duration</div>
+      <div className="px-3 py-1 d-flex flex-column gap-2">
         <div className="fw-semi-bold text-lg">
           Set the number of days a vote is active. A decision expires if voting
           is not completed within this period.
diff --git a/instances/treasury-devdao.near/widget/pages/settings/feed/SettingsDropdown.jsx b/instances/treasury-devdao.near/widget/pages/settings/feed/SettingsDropdown.jsx
index 0fb8046d..09c6e755 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/feed/SettingsDropdown.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/feed/SettingsDropdown.jsx
@@ -102,6 +102,7 @@ return (
       className="custom-select w-100"
       tabIndex="0"
       onBlur={() => setIsOpen(false)}
+      style={{ paddingBottom: "16px" }}
     >
       <div
         className={"dropdown-toggle btn-outline-plain "}
diff --git a/instances/treasury-devdao.near/widget/pages/stake-delegation/CreateButton.jsx b/instances/treasury-devdao.near/widget/pages/stake-delegation/CreateButton.jsx
index 9c101231..ae9dff9e 100644
--- a/instances/treasury-devdao.near/widget/pages/stake-delegation/CreateButton.jsx
+++ b/instances/treasury-devdao.near/widget/pages/stake-delegation/CreateButton.jsx
@@ -117,11 +117,9 @@ const CreateBtn = () => {
       border: 1px solid var(--border-color);
       background-color: var(--bg-page-color) !important;
       color: var(--text-color) !important;
-      padding: 0.5rem;
       z-index: 99;
-      font-size: 13px;
-      border-radius:0.375rem !important;
       opacity: 0;
+      font-size: 14px;
       transform: translateY(-10px);
       transition: opacity 0.2s ease, transform 0.2s ease;
   
@@ -191,35 +189,22 @@ const CreateBtn = () => {
         tabIndex="0"
         onBlur={() => setCreateBtnOpen(false)}
       >
-        <div
-          className={
-            "primary-button select-header d-flex gap-1 align-items-center h-100"
-          }
-        >
-          <div
-            className="d-flex gap-2 align-items-center text-lg mb-0 fw-semi-bold"
-            style={{ padding: "0.8rem" }}
-          >
+        <button className={"btn primary-button d-flex align-items-center"}>
+          <div className="d-flex gap-2 align-items-center ">
             <i class="bi bi-plus-lg h5 mb-0"></i>Create Request
           </div>
-          <div
-            className="h-100 d-flex"
-            style={{ borderLeft: "1px solid white" }}
-          >
-            <i
-              class={`p-2 bi bi-chevron-${isCreateBtnOpen ? "up" : "down"}`}
-            ></i>
-          </div>
-        </div>
+        </button>
 
         <div
-          className={`options-card ${isCreateBtnOpen ? "visible" : "hidden"}`}
+          className={`rounded-3 mt-1 options-card ${
+            isCreateBtnOpen ? "visible" : "hidden"
+          }`}
         >
           {btnOptions.map((option) => (
             <div key={option.value} className="option" onClick={option.onClick}>
               <div className="d-flex gap-2 align-items-center">
                 {option.icon}
-                <div className="fw-bold">{option.label}</div>
+                <div>{option.label}</div>
               </div>
             </div>
           ))}
@@ -285,7 +270,7 @@ return (
 
     <div
       className="d-flex gap-2 align-items-center"
-      style={{ paddingBottom: "7px" }}
+      style={{ paddingBottom: "16px" }}
     >
       {hasCreatePermission && (
         <Widget
diff --git a/instances/treasury-devdao.near/widget/pages/stake-delegation/Table.jsx b/instances/treasury-devdao.near/widget/pages/stake-delegation/Table.jsx
index 50e2266a..27c1a10a 100644
--- a/instances/treasury-devdao.near/widget/pages/stake-delegation/Table.jsx
+++ b/instances/treasury-devdao.near/widget/pages/stake-delegation/Table.jsx
@@ -81,6 +81,7 @@ const hasDeletePermission = (deleteGroup?.approverAccounts ?? []).includes(
 const Container = styled.div`
   font-size: 13px;
   min-height: 60vh;
+  display: flex;
 
   td {
     padding: 0.5rem;
@@ -506,13 +507,13 @@ return (
     proposals === null ||
     functionCallApproversGroup === null ||
     policy === null ? (
-      <div className="d-flex justify-content-center align-items-center w-100 h-100">
+      <div className="d-flex justify-content-center align-items-center w-100">
         <Widget
           src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Spinner"}
         />
       </div>
     ) : (
-      <div>
+      <div className="w-100">
         {visibleProposals.length === 0 ? (
           <div
             style={{ height: "50vh" }}
diff --git a/playwright-tests/tests/stake-delegation/stake-delegation.spec.js b/playwright-tests/tests/stake-delegation/stake-delegation.spec.js
index 04c6ab98..759550aa 100644
--- a/playwright-tests/tests/stake-delegation/stake-delegation.spec.js
+++ b/playwright-tests/tests/stake-delegation/stake-delegation.spec.js
@@ -242,8 +242,7 @@ async function openWithdrawForm({
   lockupContract,
 }) {
   await expect(page.getByText("Create Request", { exact: true })).toBeVisible();
-  await page.locator(".h-100 > .p-2").click();
-
+  await page.locator(".primary-button").click();
   await page.locator(".options-card > div:nth-child(3)").click();
   await expect(
     page.getByRole("heading", { name: "Create Withdraw Request" })
@@ -256,7 +255,7 @@ async function openWithdrawForm({
 
 async function openUnstakeForm({ page, isLockup, daoAccount, lockupContract }) {
   await expect(page.getByText("Create Request", { exact: true })).toBeVisible();
-  await page.locator(".h-100 > .p-2").click();
+  await page.locator(".primary-button").click();
   await page.getByText("Unstake", { exact: true }).click();
   await expect(
     page.getByRole("heading", { name: "Create Unstake Request" })