diff --git a/instances/treasury-devdao.near/widget/app.jsx b/instances/treasury-devdao.near/widget/app.jsx
index a9233012..edcfc545 100644
--- a/instances/treasury-devdao.near/widget/app.jsx
+++ b/instances/treasury-devdao.near/widget/app.jsx
@@ -11,6 +11,7 @@ const { AppLayout } = VM.require(
 ) || { AppLayout: () => <></> };
 
 const instance = "${REPL_INSTANCE}";
+const treasuryDaoID = "${REPL_TREASURY}";
 
 const { Theme } = VM.require(`${instance}/widget/config.css`) || {
   Theme: () => <></>,
@@ -84,7 +85,7 @@ function Page() {
 
 return (
   <Theme>
-    <AppLayout page={page} instance={instance}>
+    <AppLayout page={page} instance={instance} treasuryDaoID={treasuryDaoID}>
       <Page />
     </AppLayout>
   </Theme>
diff --git a/instances/treasury-devdao.near/widget/components/Approvers.jsx b/instances/treasury-devdao.near/widget/components/Approvers.jsx
index 3103e968..aa2b9605 100644
--- a/instances/treasury-devdao.near/widget/components/Approvers.jsx
+++ b/instances/treasury-devdao.near/widget/components/Approvers.jsx
@@ -20,15 +20,7 @@ const Container = styled.div`
   .grey-circle {
     width: 40px;
     height: 40px;
-    background-color: #e2e6ec;
-  }
-
-  .reject {
-    color: #d20000;
-  }
-
-  .approve {
-    color: #089968;
+    background-color: var(--grey-04);
   }
 `;
 
@@ -139,11 +131,12 @@ return (
                         <div className="d-flex">
                           {voted ? (
                             <span
-                              className={
-                                votesStatus === "Approved"
-                                  ? "approve"
-                                  : "reject"
-                              }
+                              style={{
+                                color:
+                                  votesStatus === "Approved"
+                                    ? "#3CB179"
+                                    : "#D95C4A",
+                              }}
                             >
                               {votesStatus}{" "}
                             </span>
@@ -159,6 +152,7 @@ return (
             </div>
           ),
           children: ApproversComponent,
+          instance: props.instance,
         }}
       />
     ) : (
diff --git a/instances/treasury-devdao.near/widget/components/DropDownWithSearchAndManualRequest.jsx b/instances/treasury-devdao.near/widget/components/DropDownWithSearchAndManualRequest.jsx
index a7f02094..03bc2f2a 100644
--- a/instances/treasury-devdao.near/widget/components/DropDownWithSearchAndManualRequest.jsx
+++ b/instances/treasury-devdao.near/widget/components/DropDownWithSearchAndManualRequest.jsx
@@ -95,7 +95,7 @@ const Container = styled.div`
   }
 
   .selected {
-    background-color: var(--grey-05);
+    background-color: var(--grey-04);
   }
 
   .cursor-pointer {
diff --git a/instances/treasury-devdao.near/widget/components/HistoryStatus.jsx b/instances/treasury-devdao.near/widget/components/HistoryStatus.jsx
index 7eee07ff..20b20bed 100644
--- a/instances/treasury-devdao.near/widget/components/HistoryStatus.jsx
+++ b/instances/treasury-devdao.near/widget/components/HistoryStatus.jsx
@@ -3,23 +3,23 @@ const isPaymentsPage = props.isPaymentsPage;
 const Container = styled.div`
   text-align: center;
   .reject {
-    background-color: rgba(0, 0, 0, 0.08);
-    color: #1b1b18;
+    background-color: var(--grey-04);
+    color: var(--text-color);
   }
 
   .approve {
     background-color: rgba(0, 202, 134, 0.16);
-    color: #089968;
+    color: var(--other-green);
   }
 
   .expire {
     background-color: rgba(255, 122, 0, 0.16);
-    color: #de6a00;
+    color: var(--other-warning);
   }
 
   .failed {
     background-color: rgba(239, 56, 38, 0.1);
-    color: #ef3826;
+    color: var(--other-red);
   }
 `;
 
diff --git a/instances/treasury-devdao.near/widget/components/OverlayTrigger.jsx b/instances/treasury-devdao.near/widget/components/OverlayTrigger.jsx
index 50b07b1c..6bc5c128 100644
--- a/instances/treasury-devdao.near/widget/components/OverlayTrigger.jsx
+++ b/instances/treasury-devdao.near/widget/components/OverlayTrigger.jsx
@@ -1,4 +1,12 @@
-const config = Near.view("${REPL_TREASURY}", "get_config");
+const { instance } = props;
+
+if (!instance) {
+  return <></>;
+}
+
+const { treasuryDaoID } = VM.require(`${instance}/widget/config.data`);
+
+const config = Near.view(treasuryDaoID, "get_config");
 const metadata = JSON.parse(atob(config.metadata ?? ""));
 
 const isDarkTheme = metadata.theme === "dark";
@@ -23,14 +31,13 @@ State.init({
   show: false,
 });
 
-const overlayClassName =
-  props.overlayClassName ?? "border m-3 p-3 rounded-4 shadow";
+const overlayClassName = props.overlayClassName ?? "m-3 p-2 rounded-3 shadow";
 const overlayStyle = props.overlayStyle ?? {
   maxWidth: "24em",
   zIndex: 1070,
   backgroundColor: isDarkTheme ? "#222222" : "#f4f4f4",
   color: isDarkTheme ? "#CACACA" : "#1B1B18",
-  borderColor: isDarkTheme ? "#3B3B3B" : "rgba(226, 230, 236, 1)",
+  border: "1px solid " + (isDarkTheme ? "#3B3B3B" : "rgba(226, 230, 236, 1)"),
 };
 
 const overlay = (
diff --git a/instances/treasury-devdao.near/widget/components/ProposalStatus.jsx b/instances/treasury-devdao.near/widget/components/ProposalStatus.jsx
index ad30d162..89254654 100644
--- a/instances/treasury-devdao.near/widget/components/ProposalStatus.jsx
+++ b/instances/treasury-devdao.near/widget/components/ProposalStatus.jsx
@@ -2,12 +2,12 @@ const status = props.status;
 const Container = styled.div`
   .reject {
     background-color: rgba(220, 102, 102, 0.16);
-    color: #d20000;
+    color: var(--other-red);
   }
 
   .approve {
     background-color: rgba(0, 202, 134, 0.16);
-    color: #089968;
+    color: var(--other-green);
   }
 `;
 
diff --git a/instances/treasury-devdao.near/widget/components/ReceiverAccount.jsx b/instances/treasury-devdao.near/widget/components/ReceiverAccount.jsx
index 22ca2714..14e41517 100644
--- a/instances/treasury-devdao.near/widget/components/ReceiverAccount.jsx
+++ b/instances/treasury-devdao.near/widget/components/ReceiverAccount.jsx
@@ -91,6 +91,7 @@ return (
         props={{
           popup: verificationStatus && <HoverCard />,
           children: ReceiverAccountComponent,
+          instance: props.instance,
         }}
       />
     ) : (
diff --git a/instances/treasury-devdao.near/widget/components/TokensDropdown.jsx b/instances/treasury-devdao.near/widget/components/TokensDropdown.jsx
index 973d1e7d..c6a8af51 100644
--- a/instances/treasury-devdao.near/widget/components/TokensDropdown.jsx
+++ b/instances/treasury-devdao.near/widget/components/TokensDropdown.jsx
@@ -160,7 +160,7 @@ const Container = styled.div`
   }
 
   .selected {
-    background-color: var(--grey-05);
+    background-color: var(--grey-04);
   }
 
   .cursor-pointer {
diff --git a/instances/treasury-devdao.near/widget/components/ValidatorsDropDownWithSearch.jsx b/instances/treasury-devdao.near/widget/components/ValidatorsDropDownWithSearch.jsx
index 457d3780..7b4dbd45 100644
--- a/instances/treasury-devdao.near/widget/components/ValidatorsDropDownWithSearch.jsx
+++ b/instances/treasury-devdao.near/widget/components/ValidatorsDropDownWithSearch.jsx
@@ -71,7 +71,7 @@ const Container = styled.div`
   }
 
   .selected {
-    background-color: var(--grey-05);
+    background-color: var(--grey-04);
   }
 
   .cursor-pointer {
diff --git a/instances/treasury-devdao.near/widget/components/Votes.jsx b/instances/treasury-devdao.near/widget/components/Votes.jsx
index 5fdb3836..e8068da2 100644
--- a/instances/treasury-devdao.near/widget/components/Votes.jsx
+++ b/instances/treasury-devdao.near/widget/components/Votes.jsx
@@ -8,9 +8,9 @@ const getPercentage = (value) =>
 
 const Container = styled.div`
   .bar {
-    background-color: #e2e6ec;
+    background-color: var(--grey-04);
     width: 100px;
-    height: 20px;
+    height: 10px;
     overflow: hidden;
   }
   .flex-item {
diff --git a/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx b/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
index c616abd1..bcb664b2 100644
--- a/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
+++ b/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
@@ -1,17 +1,25 @@
-const data = fetch(`https://httpbin.org/headers`);
-const gatewayURL = data?.body?.headers?.Origin ?? "";
+const AppHeader = ({ page, instance }) => (
+  <Widget
+    src="${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Navbar"
+    props={{
+      page,
+      instance,
+    }}
+  />
+);
 
-const config = Near.view("${REPL_TREASURY}", "get_config");
-const metadata = JSON.parse(atob(config.metadata ?? ""));
+function AppLayout({ page, instance, children, treasuryDaoID }) {
+  const config = Near.view(treasuryDaoID, "get_config");
+  const metadata = JSON.parse(atob(config.metadata ?? ""));
 
-const isDarkTheme = true;
-// false;
+  const data = fetch(`https://httpbin.org/headers`);
+  const gatewayURL = data?.body?.headers?.Origin ?? "";
+  const isDarkTheme = metadata.theme === "dark";
 
-const getColors = (isDarkTheme) => `
+  const getColors = (isDarkTheme) => `
   --bg-header-color: ${isDarkTheme ? "#222222" : "#2C3E50"};
-  --bg-page-color: ${isDarkTheme ? "#222222" : "#f4f4f4"};
+  --bg-page-color: ${isDarkTheme ? "#222222" : "#FFFFFF"};
   --bg-system-color: ${isDarkTheme ? "#131313" : "#f4f4f4"};
-  --bg-card-color: ${isDarkTheme ? "#222222" : "#FFFFFF"};
   --text-color: ${isDarkTheme ? "#CACACA" : "#1B1B18"};
   --text-secondary-color: ${isDarkTheme ? "#878787" : "#999999"};
   --text-alt-color: ${isDarkTheme ? "#FFFFFF" : "#FFFFFF"};
@@ -30,336 +38,322 @@ const getColors = (isDarkTheme) => `
   --other-red:#D95C4A;
 
   // bootstrap theme color
-  --bs-body-bg: var(--bg-card-color);
+  --bs-body-bg: var(--bg-page-color);
   --bs-border-color:  var(--border-color);
+  --bs-dropdown-link-hover-color: var(--grey-04);
 `;
 
-const ParentContainer = styled.div`
-  ${({ isDarkTheme }) => getColors(isDarkTheme)}
-  width: 100%;
-  background: var(--bg-page-color) !important;
-  ${({ gatewayURL }) =>
-    gatewayURL.includes("near.org")
-      ? `
+  const ParentContainer = styled.div`
+    ${() => getColors(isDarkTheme)}
+    width: 100%;
+    background: var(--bg-system-color) !important;
+    ${() =>
+      gatewayURL.includes("near.org")
+        ? `
         /* Styles specific to near.org */
         position: static;
       `
-      : `
+        : `
         /* Styles specific to other URLs */
         position: fixed;
         inset: 73px 0px 0px;
         overflow-y: scroll;
       `}
-`;
+  `;
+
+  const Theme = styled.div`
+    padding-top: calc(-1 * var(--body-top-padding));
+
+    // remove up/down arrow in input of type = number
+    /* For Chrome, Safari, and Edge */
+    input[type="number"]::-webkit-outer-spin-button,
+    input[type="number"]::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    /* For Firefox */
+    input[type="number"] {
+      -moz-appearance: textfield;
+    }
 
-const Theme = styled.div`
-  padding-top: calc(-1 * var(--body-top-padding));
-
-  // remove up/down arrow in input of type = number
-  /* For Chrome, Safari, and Edge */
-  input[type="number"]::-webkit-outer-spin-button,
-  input[type="number"]::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  /* For Firefox */
-  input[type="number"] {
-    -moz-appearance: textfield;
-  }
-
-  .card {
-    border-color: var(--border-color) !important;
-    border-width: 1px !important;
-    border-radius: 14px;
-    background-color: var(--bg-card-color) !important;
-  }
-
-  .dropdown-menu {
-    background-color: var(--bg-card-color) !important;
-    color: var(--text-color) !important;
-  }
-
-  .dropdown-item.active,
-  .dropdown-item:active {
-    background-color: var(--bg-card-color) !important;
-    color: inherit !important;
-  }
-
-  .offcanvas {
-    background-color: var(--bg-card-color) !important;
-    color: var(--text-color) !important;
-  }
-
-  color: var(--text-color);
-
-  a {
-    text-decoration: none;
-    color: var(--link-inactive-color) !important;
-    &.active {
-      color: var(--link-active-color) !important;
-      font-weight: 700 !important;
-    }
-
-    &:hover {
+    .card {
+      border-color: var(--border-color) !important;
+      border-width: 1px !important;
+      border-radius: 14px;
+      background-color: var(--bg-page-color) !important;
+    }
+
+    .dropdown-menu {
+      background-color: var(--bg-page-color) !important;
+      color: var(--text-color) !important;
+    }
+
+    .dropdown-item.active,
+    .dropdown-item:active {
+      background-color: var(--grey-04) !important;
+      color: inherit !important;
+    }
+
+    .offcanvas {
+      background-color: var(--bg-page-color) !important;
+      color: var(--text-color) !important;
+    }
+
+    color: var(--text-color);
+
+    a {
       text-decoration: none;
-      color: var(--link-active-color) !important;
-      font-weight: 700 !important;
+      color: var(--link-inactive-color) !important;
+      &.active {
+        color: var(--link-active-color) !important;
+        font-weight: 700 !important;
+      }
+
+      &:hover {
+        text-decoration: none;
+        color: var(--link-active-color) !important;
+        font-weight: 700 !important;
+      }
     }
-  }
 
-  button.primary {
-    background: var(--theme-color) !important;
-    color: var(--text-alt-color) !important;
-    border: none !important;
-    padding-block: 0.7rem !important;
-    i {
+    button.primary {
+      background: var(--theme-color) !important;
       color: var(--text-alt-color) !important;
+      border: none !important;
+      padding-block: 0.7rem !important;
+      i {
+        color: var(--text-alt-color) !important;
+      }
     }
-  }
 
-  .primary-button {
-    background: var(--theme-color) !important;
-    color: var(--text-alt-color) !important;
-    border: none !important;
-    i {
+    .primary-button {
+      background: var(--theme-color) !important;
       color: var(--text-alt-color) !important;
+      border: none !important;
+      i {
+        color: var(--text-alt-color) !important;
+      }
     }
-  }
-
-  .text-lg {
-    font-size: 15px;
-  }
-
-  .fw-semi-bold {
-    font-weight: 500;
-  }
-
-  .text-secondary {
-    color: var(--text-secondary-color) !important;
-  }
-
-  .max-w-100 {
-    max-width: 100%;
-  }
-
-  .custom-truncate {
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    line-height: 1.5;
-    max-height: 4.5em;
-    text-align: left;
-  }
-
-  .display-none {
-    display: none;
-  }
-
-  .text-right {
-    text-align: end;
-  }
-
-  .text-left {
-    text-align: left;
-  }
-  .text-underline {
-    text-decoration: underline !important;
-  }
-
-  .bg-highlight {
-    background-color: rgb(185, 185, 185, 0.2);
-  }
-
-  .cursor-pointer {
-    cursor: pointer;
-  }
-
-  .theme-btn {
-    background: var(--theme-color) !important;
-    color: white !important;
-    border: none;
-  }
-
-  .theme-btn.btn:hover {
-    color: white !important;
-  }
-
-  .toast-container {
-    right: 10px !important;
-    bottom: 10px !important;
-  }
-  .toast {
-    border-radius: 10px;
-    overflow: hidden;
-    color: var(--text-color) !important;
-    background: var(--bg-card-color) !important;
-    border-color: var(--border-color) !important;
 
-    a {
-      color: inherit !important;
-      &:active {
+    .text-lg {
+      font-size: 15px;
+    }
+
+    .fw-semi-bold {
+      font-weight: 500;
+    }
+
+    .text-secondary {
+      color: var(--text-secondary-color) !important;
+    }
+
+    .max-w-100 {
+      max-width: 100%;
+    }
+
+    .custom-truncate {
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.5;
+      max-height: 4.5em;
+      text-align: left;
+    }
+
+    .display-none {
+      display: none;
+    }
+
+    .text-right {
+      text-align: end;
+    }
+
+    .text-left {
+      text-align: left;
+    }
+    .text-underline {
+      text-decoration: underline !important;
+    }
+
+    .bg-highlight {
+      background-color: rgb(185, 185, 185, 0.2);
+    }
+
+    .cursor-pointer {
+      cursor: pointer;
+    }
+
+    .theme-btn {
+      background: var(--theme-color) !important;
+      color: white !important;
+      border: none;
+    }
+
+    .theme-btn.btn:hover {
+      color: white !important;
+    }
+
+    .toast-container {
+      right: 10px !important;
+      bottom: 10px !important;
+    }
+    .toast {
+      border-radius: 10px;
+      overflow: hidden;
+      color: var(--text-color) !important;
+      background: var(--bg-page-color) !important;
+      border-color: var(--border-color) !important;
+
+      a {
         color: inherit !important;
+        &:active {
+          color: inherit !important;
+        }
+        &:hover {
+          color: inherit !important;
+        }
       }
+    }
+
+    .toast-header {
+      background-color: var(--bg-system-color) !important;
+      color: var(--text-secondary-color) !important;
+    }
+
+    .text-md {
+      font-size: 15px;
+    }
+
+    .primary-text-color {
+      color: var(--theme-color);
+      a {
+        color: var(--theme-color) !important;
+      }
+
+      i {
+        color: var(--theme-color) !important;
+      }
+    }
+
+    .btn-outline.btn:hover {
+      color: inherit !important;
+    }
+
+    .btn-outline-plain {
+      padding-block: 8px !important;
+      padding-inline: 10px !important;
+      border-radius: 0.375rem !important;
+      border: 1.5px solid var(--border-color) !important;
+      background-color: var(--bg-page-color) !important;
+      color: var(--text-color) !important;
+
       &:hover {
-        color: inherit !important;
+        background-color: white;
+        color: black;
       }
     }
-  }
 
-  .toast-header {
-    background-color: var(--bg-system-color) !important;
-    color: var(--text-secondary-color) !important;
-  }
+    h6,
+    .h6,
+    h5,
+    .h5,
+    h4,
+    .h4,
+    h3,
+    .h3,
+    h2,
+    .h2,
+    h1,
+    .h1 {
+      color: var(--text-color) !important;
+    }
 
-  .text-md {
-    font-size: 15px;
-  }
+    .table {
+      border-color: var(--border-color) !important;
+      color: var(--text-color) !important;
+    }
 
-  .primary-text-color {
-    color: var(--theme-color);
-    a {
-      color: var(--theme-color) !important;
-    }
-
-    i {
-      color: var(--theme-color) !important;
-    }
-  }
-
-  .btn-outline.btn:hover {
-    color: inherit !important;
-  }
-
-  .btn-outline-plain {
-    padding-block: 8px !important;
-    padding-inline: 10px !important;
-    border-radius: 0.375rem !important;
-    border: 1.5px solid var(--border-color) !important;
-    background-color: var(--bg-card-color) !important;
-    color: var(--text-color) !important;
-
-    &:hover {
-      background-color: white;
-      color: black;
-    }
-  }
-
-  h6,
-  .h6,
-  h5,
-  .h5,
-  h4,
-  .h4,
-  h3,
-  .h3,
-  h2,
-  .h2,
-  h1,
-  .h1 {
-    color: var(--text-color) !important;
-  }
-
-  .table {
-    border-color: var(--border-color) !important;
-    color: var(--text-color) !important;
-  }
-
-  .bg-white {
-    background-color: var(--bg-page-color) !important;
-    color: var(--text-color) !important;
-  }
-
-  .bg-dropdown {
-    background-color: var(--bg-card-color) !important;
-    color: var(--text-color) !important;
-  }
-
-  .bg-custom-overlay {
-    background-color: var(--bg-page-color) !important;
-    color: var(--text-color) !important;
-  }
-
-  .fill-accent {
-    fill: var(--theme-color);
-  }
-
-  .use-max-bg {
-    color: #007aff;
-    cursor: pointer;
-  }
-
-  .bg-validator-info {
-    background: rgba(0, 16, 61, 0.06);
-    color: #1b1b18;
-    padding-inline: 0.8rem;
-    padding-block: 0.5rem;
-    font-weight: 500;
-    font-size: 13px;
-  }
-
-  .bg-validator-warning {
-    background: rgba(255, 158, 0, 0.1);
-    color: var(--other-warning);
-    padding-inline: 0.8rem;
-    padding-block: 0.5rem;
-    font-weight: 500;
-    font-size: 13px;
-  }
-
-  .bg-withdraw-warning {
-    background: rgba(255, 158, 0, 0.1);
-    color: var(--other-warning);
-    padding-inline: 0.8rem;
-    padding-block: 0.5rem;
-    font-weight: 500;
-    font-size: 13px;
-  }
-
-  .text-sm {
-    font-size: 13px;
-  }
-
-  .text-secondary a {
-    color: inherit !important;
-  }
-
-  .text-delete {
-    color: var(--other-red) !important;
-
-    i {
-      color: var(--other-red) !important;
+    .bg-white {
+      background-color: var(--bg-page-color) !important;
+      color: var(--text-color) !important;
     }
-  }
 
-  .btn-outline.btn:hover {
-    color: inherit !important;
-  }
+    .bg-dropdown {
+      background-color: var(--bg-page-color) !important;
+      color: var(--text-color) !important;
+    }
 
-  .border-right {
-    border-right: 1px solid var(--border-color);
-  }
-`;
+    .bg-custom-overlay {
+      background-color: var(--bg-page-color) !important;
+      color: var(--text-color) !important;
+    }
 
-const AppHeader = ({ page, instance }) => (
-  <Widget
-    src="${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Navbar"
-    props={{
-      page,
-      instance,
-    }}
-  />
-);
+    .fill-accent {
+      fill: var(--theme-color);
+    }
+
+    .use-max-bg {
+      color: #007aff;
+      cursor: pointer;
+    }
+
+    .bg-validator-info {
+      background: rgba(0, 16, 61, 0.06);
+      color: #1b1b18;
+      padding-inline: 0.8rem;
+      padding-block: 0.5rem;
+      font-weight: 500;
+      font-size: 13px;
+    }
+
+    .bg-validator-warning {
+      background: rgba(255, 158, 0, 0.1);
+      color: var(--other-warning);
+      padding-inline: 0.8rem;
+      padding-block: 0.5rem;
+      font-weight: 500;
+      font-size: 13px;
+    }
+
+    .bg-withdraw-warning {
+      background: rgba(255, 158, 0, 0.1);
+      color: var(--other-warning);
+      padding-inline: 0.8rem;
+      padding-block: 0.5rem;
+      font-weight: 500;
+      font-size: 13px;
+    }
+
+    .text-sm {
+      font-size: 13px;
+    }
+
+    .text-secondary a {
+      color: inherit !important;
+    }
+
+    .text-delete {
+      color: var(--other-red) !important;
+
+      i {
+        color: var(--other-red) !important;
+      }
+    }
+
+    .btn-outline.btn:hover {
+      color: inherit !important;
+    }
+
+    .border-right {
+      border-right: 1px solid var(--border-color);
+    }
+  `;
 
-function AppLayout({ page, instance, children }) {
   return (
-    <ParentContainer
-      isDarkTheme={isDarkTheme}
-      gatewayURL={gatewayURL}
-      data-bs-theme={isDarkTheme ? "dark" : "light"}
-    >
+    <ParentContainer data-bs-theme={isDarkTheme ? "dark" : "light"}>
       <Theme className="h-100 w-100">
         <AppHeader page={page} instance={instance} />
         <div className="px-3 py-2 w-100 h-100">{children}</div>
diff --git a/instances/treasury-devdao.near/widget/lib/skeleton.jsx b/instances/treasury-devdao.near/widget/lib/skeleton.jsx
index c7407f97..4c37b049 100644
--- a/instances/treasury-devdao.near/widget/lib/skeleton.jsx
+++ b/instances/treasury-devdao.near/widget/lib/skeleton.jsx
@@ -1,5 +1,5 @@
 const Skeleton = styled.div`
-  background: #efefef;
+  background: var(--grey-04);
   animation: pulse 1.5s ease-in-out infinite;
 
   @keyframes pulse {
diff --git a/instances/treasury-devdao.near/widget/pages/dashboard/Chart.jsx b/instances/treasury-devdao.near/widget/pages/dashboard/Chart.jsx
index 70a61e1c..28505fec 100644
--- a/instances/treasury-devdao.near/widget/pages/dashboard/Chart.jsx
+++ b/instances/treasury-devdao.near/widget/pages/dashboard/Chart.jsx
@@ -1,4 +1,10 @@
-const { nearPrice, ftTokens, accountId, title } = props;
+const { nearPrice, ftTokens, accountId, title, instance } = props;
+
+if (!instance) {
+  return <></>;
+}
+
+const { treasuryDaoID } = VM.require(`${instance}/widget/config.data`);
 
 const { Skeleton } = VM.require(
   "${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/lib.skeleton"
@@ -43,8 +49,13 @@ function formatCurrency(amount) {
     .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }
 
+const config = Near.view(treasuryDaoID, "get_config");
+const metadata = JSON.parse(atob(config.metadata ?? ""));
+
+const isDarkTheme = metadata.theme === "dark";
+
 const code = `
-  <!DOCTYPE html>
+<!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
@@ -53,24 +64,30 @@ const code = `
       <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
       <style>
           body {
-              font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-              margin: 0;
-              padding: 0;
-              overflow: hidden;
+            --bg-page-color: ${isDarkTheme ? "#222222" : "#FFFFFF"};
+            font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
           }
 
           canvas {
               width: 100%;
               height: 100%;
               display: block;
+              background-color: var(--bg-page-color);
           }
       </style>
   </head>
   <body>
-
-  <canvas id="myChart" height="400"></canvas>
-
-  <script>
+      <canvas id="myChart" height="400"></canvas>
+      <script>
+    const bgPageColor = ${isDarkTheme ? "'#222222'" : "'#FFFFFF'"};
+    const borderColor = ${
+      isDarkTheme ? "'#3B3B3B'" : "'rgba(226, 230, 236, 1)'"
+    };
+    const iconColor = ${isDarkTheme ? "'#CACACA'" : "'#060606'"};
+    const textColor = ${isDarkTheme ? "'#CACACA'" : "'#1B1B18'"}
     const ctx = document.getElementById("myChart").getContext("2d");
     let account_id;
     let history;
@@ -94,12 +111,16 @@ const code = `
                 ctx.moveTo(hoverX, chartArea.top);
                 ctx.lineTo(hoverX, chartArea.bottom);
                 ctx.lineWidth = 1;
-                ctx.strokeStyle = 'rgba(0,0,0,1)';
+                ctx.strokeStyle = iconColor;
                 ctx.setLineDash([5, 3]);
                 ctx.stroke();
                 ctx.restore();
                 
-                ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'; // Semi-transparent overlay
+                ctx.fillStyle = ${
+                  isDarkTheme
+                    ? "rgba(27, 27, 24, 0.7)"
+                    : "rgba(255, 255, 255, 0.7)"
+                }; // Semi-transparent overlay
                 ctx.fillRect(hoverX, chartArea.top, chartArea.right - hoverX, chartArea.bottom - chartArea.top);
                 ctx.restore();
             }
@@ -129,7 +150,7 @@ const code = `
             },
             ticks: {
               display: true,
-              color: "#000",
+              color: textColor,
             },   
           },
           y: {
@@ -157,8 +178,8 @@ const code = `
             data: [],
             fill: true,
             backgroundColor: gradient,
-            borderColor: "#000",
-            pointBackgroundColor: "#fff",
+            borderColor: borderColor,
+            pointBackgroundColor: bgPageColor,
             pointRadius: 0,
             tension: 0,
             borderWidth: 1.5
@@ -257,7 +278,7 @@ const Period = styled.div`
   font-weight: 500;
 
   &.selected {
-    background-color: var(--grey-05);
+    background-color: var(--grey-04);
     color: var(--text-color);
     border-radius: 8px;
   }
@@ -436,7 +457,7 @@ return (
       <LoadingChart />
     ) : (
       <div
-        className="w-100 d-flex justify-content-center align-items-center"
+        className="w-100 d-flex justify-content-center align-items-center mt-2 rounded-3 overflow-hidden"
         style={{ height: "400px" }}
       >
         <iframe
diff --git a/instances/treasury-devdao.near/widget/pages/dashboard/TransactionHistory.jsx b/instances/treasury-devdao.near/widget/pages/dashboard/TransactionHistory.jsx
index 97e2fc5a..8ea70fe5 100644
--- a/instances/treasury-devdao.near/widget/pages/dashboard/TransactionHistory.jsx
+++ b/instances/treasury-devdao.near/widget/pages/dashboard/TransactionHistory.jsx
@@ -325,6 +325,7 @@ return (
                                 {formatAccount(txn.sender)}
                               </div>
                             ),
+                            instance,
                           }}
                         />
                       </td>
@@ -343,6 +344,7 @@ return (
                                 {formatAccount(txn.receiver)}
                               </div>
                             ),
+                            instance,
                           }}
                         />
                       </td>
diff --git a/instances/treasury-devdao.near/widget/pages/dashboard/index.jsx b/instances/treasury-devdao.near/widget/pages/dashboard/index.jsx
index 08f87dc7..68c8ee31 100644
--- a/instances/treasury-devdao.near/widget/pages/dashboard/index.jsx
+++ b/instances/treasury-devdao.near/widget/pages/dashboard/index.jsx
@@ -301,6 +301,7 @@ return (
               Big(nearBalances?.totalParsed ?? "0").mul(nearPrice ?? 1)
             ),
             ftTokens: userFTTokens.fts,
+            instance,
             accountId: treasuryDaoID,
           }}
         />
@@ -311,6 +312,7 @@ return (
             props={{
               title: "Treasury Assets: Lockup",
               nearPrice,
+              instance,
               totalBalance: formatCurrency(
                 Big(lockupNearBalances?.totalParsed ?? "0").mul(nearPrice ?? 1)
               ),
diff --git a/instances/treasury-devdao.near/widget/pages/payments/Table.jsx b/instances/treasury-devdao.near/widget/pages/payments/Table.jsx
index 799d5133..6a56945d 100644
--- a/instances/treasury-devdao.near/widget/pages/payments/Table.jsx
+++ b/instances/treasury-devdao.near/widget/pages/payments/Table.jsx
@@ -302,6 +302,7 @@ const ProposalsComponent = () => {
                       {title}
                     </div>
                   ),
+                  instance,
                 }}
               />
             </td>
@@ -315,6 +316,7 @@ const ProposalsComponent = () => {
                       {summary ? summary : "-"}
                     </div>
                   ),
+                  instance,
                 }}
               />
             </td>
@@ -324,6 +326,7 @@ const ProposalsComponent = () => {
                 props={{
                   receiverAccount: args.receiver_id,
                   showKYC,
+                  instance,
                 }}
               />
             </td>
@@ -363,6 +366,7 @@ const ProposalsComponent = () => {
                       {item.proposer}
                     </div>
                   ),
+                  instance,
                 }}
               />
             </td>
@@ -377,6 +381,7 @@ const ProposalsComponent = () => {
                         {notes}
                       </div>
                     ),
+                    instance,
                   }}
                 />
               ) : (
@@ -412,6 +417,7 @@ const ProposalsComponent = () => {
                 props={{
                   votes: item.votes,
                   approversGroup: transferApproversGroup?.approverAccounts,
+                  instance,
                 }}
               />
             </td>
diff --git a/instances/treasury-devdao.near/widget/pages/proposals-feed/Table.jsx b/instances/treasury-devdao.near/widget/pages/proposals-feed/Table.jsx
index 6c2794b2..968d5d74 100644
--- a/instances/treasury-devdao.near/widget/pages/proposals-feed/Table.jsx
+++ b/instances/treasury-devdao.near/widget/pages/proposals-feed/Table.jsx
@@ -259,6 +259,7 @@ const ProposalsComponent = () => {
                       {item.proposer}
                     </div>
                   ),
+                  instance,
                 }}
               />
             </td>
@@ -305,6 +306,7 @@ const ProposalsComponent = () => {
                 props={{
                   votes: item.votes,
                   approversGroup: transferApproversGroup?.approverAccounts,
+                  instance,
                 }}
               />
             </td>
diff --git a/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx b/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx
index 996c4943..baa2e782 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx
@@ -60,7 +60,7 @@ const Container = styled.div`
   .custom-tooltip .tooltiptext {
     display: none;
     width: 300px;
-    background-color: var(--bg-card-color);
+    background-color: var(--bg-page-color);
     color: var(--text-color) !important;
     border: 1px solid var(--border-color) !important;
     text-align: center;
@@ -204,6 +204,7 @@ const Members = () => {
                       {account}
                     </div>
                   ),
+                  instance,
                 }}
               />
             </td>
diff --git a/instances/treasury-devdao.near/widget/pages/settings/RoleSelector.jsx b/instances/treasury-devdao.near/widget/pages/settings/RoleSelector.jsx
index 27b95d10..85d383ab 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/RoleSelector.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/RoleSelector.jsx
@@ -76,7 +76,7 @@ const Container = styled.div`
   }
 
   .selected {
-    background-color: var(--grey-05);
+    background-color: var(--grey-04);
   }
 
   .cursor-pointer {
diff --git a/instances/treasury-devdao.near/widget/pages/settings/Theme.jsx b/instances/treasury-devdao.near/widget/pages/settings/Theme.jsx
index 79380453..b7d38570 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/Theme.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/Theme.jsx
@@ -25,8 +25,8 @@ const defaultImage =
   "https://github.com/user-attachments/assets/244e15fc-3fb7-4067-a2c3-013e189e8d20";
 const [image, setImage] = useState(defaultImage);
 const [color, setColor] = useState(defaultColor);
-const [selectedTheme, setSelectedTheme] = useState(null);
-const [error, setError] = useState("wewfwe");
+const [selectedTheme, setSelectedTheme] = useState(ThemeOptions[0]);
+const [error, setError] = useState(null);
 
 const Container = styled.div`
   max-width: 50rem;
@@ -103,10 +103,14 @@ function uploadImageToServer(file) {
     })
     .then((res) => {
       console.log(e);
-      setImage(res.body.cid);
+      setImage(`https://ipfs.near.social/ipfs/${res.body.cid}`);
     });
 }
 
+const daoPolicy = Near.view(treasuryDaoID, "get_policy");
+const config = Near.view(treasuryDaoID, "get_config");
+const metadata = JSON.parse(atob(config.metadata ?? ""));
+const isDarkTheme = metadata?.theme === "dark";
 const code = `
 <!DOCTYPE html>
 <html lang="en">
@@ -115,59 +119,59 @@ const code = `
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Upload Logo</title>
   <style>
+    body {
+      --bg-page-color: ${isDarkTheme ? "#222222" : "#FFFFFF"};
+      --text-color: ${isDarkTheme ? "#CACACA" : "#1B1B18"};
+      --border-color: ${isDarkTheme ? "#3B3B3B" : "rgba(226, 230, 236, 1)"};
+      --text-secondary-color: ${isDarkTheme ? "#878787" : "#999999"};
+      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
+      background-color: var(--bg-page-color);
+      color: var(--text-color);
+    }
     .upload-btn {
+     
       display: inline-block;
       padding: 10px 20px;
       font-size: 16px;
-      color: rgba(27, 27, 24, 1) !important;
+      color: var(--text-color);
       background-color: transparent;
-      border: 1px solid rgba(226, 230, 236, 1);
+      border: 1px solid var(--border-color);
       border-radius: 8px;
       cursor: pointer;
     }
     .upload-btn:hover {
       background-color: inherit;
     }
-    #imagePreview img {
-      max-width: 100px;
-      height: 100px;
-      border: 1px solid rgba(226, 230, 236, 1);
-      border-radius: 15px;
+    .btn-container {
+      width:200px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
     }
-    .container{
-        display:flex;
-        gap:15px;
-        align-items:center;
+    .text-muted {
+      color: var(--text-secondary-color);
+      font-size: 12px;
     }
-
-    .btn-container{
-        display:flex;
-        flex-direction:column;
-        gap:10px;
-    }
-
-    .text-muted{
-        color:rgba(153, 153, 153, 1);
-        font-size:12px;
+    .text-center{
+      text-align:center;
     }
   </style>
 </head>
 <body>
-
- <div class="container">
- <div id="imagePreview"><img src="" alt="Preview" id="defaultImage" /></div>
- <div class='btn-container'>
-<button class="upload-btn" id="uploadButton">Upload Logo</button>
-  <div class="text-muted">SVG, PNG, or JPG (256x256 px)</div>
-    <input type="file" id="imageUpload" accept="image/png, image/jpeg, image/svg+xml" style="display: none;" />
-  </div>
+    <div class="btn-container">
+      <button class="upload-btn" id="uploadButton">Upload Logo</button>
+      <div class="text-muted text-center">SVG, PNG, or JPG (256x256 px)</div>
+      <input
+        type="file"
+        id="imageUpload"
+        accept="image/png, image/jpeg, image/svg+xml"
+        style="display: none;"
+      />
   </div>
 
   <script>
     const imageUpload = document.getElementById("imageUpload");
     const uploadButton = document.getElementById("uploadButton");
-    const imagePreview = document.getElementById("imagePreview");
-    const defaultImage = document.getElementById("defaultImage");
 
     // Trigger the file input when the button is clicked
     uploadButton.addEventListener("click", () => {
@@ -186,13 +190,20 @@ const code = `
 
           img.onload = async () => {
             // Check dimensions
-            console.log(img.width, img.height)
             if (img.width === 256 && img.height === 256) {
-              defaultImage.src = img.src; // Update preview
-              window.parent.postMessage({ handler: "uploadImage", file:file  }, "*");
+              window.parent.postMessage(
+                { handler: "uploadImage", file: file },
+                "*"
+              );
             } else {
-              window.parent.postMessage({ handler: "error", error:'Invalid logo. Please upload a PNG, JPG, or SVG file for your logo that is exactly 256x256 px'  }, "*");
-             
+              window.parent.postMessage(
+                {
+                  handler: "error",
+                  error:
+                    "Invalid logo. Please upload a PNG, JPG, or SVG file for your logo that is exactly 256x256 px",
+                },
+                "*"
+              );
             }
           };
         };
@@ -205,22 +216,12 @@ const code = `
       }
     });
 
-    // Listen for messages from iframe
-    window.addEventListener("message", (event) => {
-      console.log('called', event.data)
-      if (event.data?.imageSrc) {
-        defaultImage.src = event.data.imageSrc; // Set image from iframe
-      }
-    });
+
   </script>
 </body>
 </html>
 `;
 
-const daoPolicy = Near.view(treasuryDaoID, "get_policy");
-const config = Near.view(treasuryDaoID, "get_config");
-const metadata = JSON.parse(atob(config.metadata ?? ""));
-
 function toBase64(json) {
   return Buffer.from(JSON.stringify(json)).toString("base64");
 }
@@ -247,7 +248,7 @@ function onSubmitClick() {
                   ...metadata,
                   primaryColor: color,
                   flagLogo: image,
-                  theme: selectedTheme,
+                  theme: selectedTheme.value,
                 }),
               },
             },
@@ -262,7 +263,9 @@ function onSubmitClick() {
 function setDefault() {
   setImage(metadata?.flagLogo ?? defaultImage);
   setColor(metadata?.primaryColor ?? defaultColor);
-  setSelectedTheme(metadata?.theme ?? ThemeOptions[0]);
+  setSelectedTheme(
+    ThemeOptions.find((i) => i.value === metadata?.theme) ?? ThemeOptions[0]
+  );
 }
 
 useEffect(() => {
@@ -273,7 +276,7 @@ useEffect(() => {
 
 return (
   <Container>
-    <div className="card rounded-3 w-100 h-100 p-2">
+    <div className="card rounded-3 w-100 h-100 p-3">
       {!metadata ? (
         <div
           className=" d-flex justify-content-center align-items-center w-100 h-100"
@@ -284,93 +287,96 @@ return (
           />
         </div>
       ) : (
-        <div>
-          <iframe
-            srcDoc={code}
-            style={{
-              height: "125px",
-              width: "100%",
-              backgroundColor: "inherit",
-            }}
-            message={{
-              imageSrc: image ? image : defaultImage,
-            }}
-            onMessage={(e) => {
-              switch (e.handler) {
-                case "uploadImage": {
-                  setError(null);
-                  uploadImageToServer(e.file);
-                }
-                case "error": {
-                  setError(e.error);
+        <div className="d-flex flex-column gap-4">
+          <div class="d-flex gap-2 align-items-center flex-wrap flex-md-nowrap">
+            <img
+              src={image ? image : defaultImage}
+              height={100}
+              width={100}
+              className="object-cover rounded-3"
+            />
+            <iframe
+              srcDoc={code}
+              style={{
+                height: "110px",
+                width: "100%",
+                backgroundColor: "var(--bg-page-color)",
+              }}
+              onMessage={(e) => {
+                switch (e.handler) {
+                  case "uploadImage": {
+                    setError(null);
+                    uploadImageToServer(e.file);
+                  }
+                  case "error": {
+                    setError(e.error);
+                  }
                 }
-              }
-            }}
-          />
-          <div className="d-flex flex-column gap-4 p-1">
-            {error && (
-              <div class="error-message p-3 rounded-3 d-flex gap-2 align-items-center">
-                <i class="bi bi-exclamation-octagon h4 mb-0"></i>
-                {error}
-              </div>
-            )}
-            <div className="d-flex flex-column gap-1">
-              <label>Primary color</label>
-              <div className="d-flex border border-1 align-items-center rounded-3 gap-2 p-1 px-2">
-                <input
-                  type="color"
-                  value={color}
-                  onChange={(e) => setColor(e.target.value)}
-                  style={{
-                    width: 35,
-                    height: 30,
-                    border: "none",
-                    borderRadius: 5,
-                    appearance: "none",
-                    padding: 0,
-                  }}
-                />
-                <input
-                  value={color}
-                  onChange={(e) => setColor(e.target.value)}
-                  style={{ border: "none", width: "100%", paddingInline: 0 }}
-                />
-              </div>
-            </div>
-            <div className="d-flex flex-column gap-1">
-              <label>Theme</label>
-              <Widget
-                src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.DropDown`}
-                props={{
-                  options: ThemeOptions,
-                  selectedValue: selectedTheme ?? ThemeOptions[0],
-                  onUpdate: setSelectedTheme,
-                }}
-              />
+              }}
+            />
+          </div>
+          {error && (
+            <div class="error-message p-3 rounded-3 d-flex gap-2 align-items-center">
+              <i class="bi bi-exclamation-octagon h4 mb-0"></i>
+              {error}
             </div>
-            <div className="d-flex mt-2 gap-3 justify-content-end">
-              <Widget
-                src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Button`}
-                props={{
-                  classNames: {
-                    root: "btn-outline shadow-none border-0",
-                  },
-                  label: "Cancel",
-                  onClick: setDefault,
+          )}
+          <div className="d-flex flex-column gap-1">
+            <label>Primary color</label>
+            <div className="d-flex border border-1 align-items-center rounded-3 gap-2 p-1 px-2">
+              <input
+                type="color"
+                value={color}
+                onChange={(e) => setColor(e.target.value)}
+                style={{
+                  width: 35,
+                  height: 30,
+                  border: "none",
+                  borderRadius: 5,
+                  appearance: "none",
+                  padding: 0,
                 }}
               />
-
-              <Widget
-                src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Button`}
-                props={{
-                  classNames: { root: "theme-btn" },
-                  label: "Save changes",
-                  onClick: onSubmitClick,
-                  loading: isTxnCreated,
-                }}
+              <input
+                value={color}
+                onChange={(e) => setColor(e.target.value)}
+                style={{ border: "none", width: "100%", paddingInline: 0 }}
               />
             </div>
           </div>
+          <div className="d-flex flex-column gap-1">
+            <label>Theme</label>
+            <Widget
+              src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.DropDown`}
+              props={{
+                options: ThemeOptions,
+                selectedValue: selectedTheme ?? ThemeOptions[0],
+                onUpdate: setSelectedTheme,
+              }}
+            />
+          </div>
+          <div className="d-flex mt-2 gap-3 justify-content-end">
+            <Widget
+              src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Button`}
+              props={{
+                classNames: {
+                  root: "btn-outline shadow-none border-0",
+                },
+                label: "Cancel",
+                onClick: setDefault,
+              }}
+            />
+
+            <Widget
+              src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Button`}
+              props={{
+                classNames: { root: "theme-btn" },
+                label: "Save changes",
+                onClick: onSubmitClick,
+                loading: isTxnCreated,
+              }}
+            />
+          </div>
         </div>
       )}
     </div>
diff --git a/instances/treasury-devdao.near/widget/pages/settings/feed/Table.jsx b/instances/treasury-devdao.near/widget/pages/settings/feed/Table.jsx
index b3d0d64c..3c1896d9 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/feed/Table.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/feed/Table.jsx
@@ -281,6 +281,7 @@ const ProposalsComponent = () => {
                       {item.proposer}
                     </div>
                   ),
+                  instance,
                 }}
               />
             </td>
@@ -330,6 +331,7 @@ const ProposalsComponent = () => {
                 props={{
                   votes: item.votes,
                   approversGroup: settingsApproverGroup?.approverAccounts,
+                  instance,
                 }}
               />
             </td>
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 61096ded..44617a9c 100644
--- a/instances/treasury-devdao.near/widget/pages/stake-delegation/CreateButton.jsx
+++ b/instances/treasury-devdao.near/widget/pages/stake-delegation/CreateButton.jsx
@@ -115,7 +115,7 @@ const CreateBtn = () => {
       left: 0;
       width: 100%;
       border: 1px solid var(--border-color);
-      background-color: var(--bg-card-color) !important;
+      background-color: var(--bg-page-color) !important;
       color: var(--text-color) !important;
       padding: 0.5rem;
       z-index: 99;
@@ -162,7 +162,7 @@ const CreateBtn = () => {
     }
   
     .selected {
-      background-color: var(--grey-05);
+      background-color: var(--grey-04);
     }
   
     .disabled {
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 a83ea610..4236a33b 100644
--- a/instances/treasury-devdao.near/widget/pages/stake-delegation/Table.jsx
+++ b/instances/treasury-devdao.near/widget/pages/stake-delegation/Table.jsx
@@ -368,6 +368,7 @@ const ProposalsComponent = () => {
                         {treasuryWallet}
                       </div>
                     ),
+                    instance,
                   }}
                 />
               </td>
@@ -378,6 +379,7 @@ const ProposalsComponent = () => {
                 src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/pages.stake-delegation.Validator`}
                 props={{
                   validatorId: validatorAccount,
+                  instance,
                 }}
               />
             </td>
@@ -399,6 +401,7 @@ const ProposalsComponent = () => {
                       {item.proposer}
                     </div>
                   ),
+                  instance,
                 }}
               />
             </td>
@@ -449,6 +452,7 @@ const ProposalsComponent = () => {
                 props={{
                   votes: item.votes,
                   approversGroup: functionCallApproversGroup?.approverAccounts,
+                  instance,
                 }}
               />
             </td>
diff --git a/instances/treasury-devdao.near/widget/pages/stake-delegation/Validator.jsx b/instances/treasury-devdao.near/widget/pages/stake-delegation/Validator.jsx
index 07c734dc..fde57b6e 100644
--- a/instances/treasury-devdao.near/widget/pages/stake-delegation/Validator.jsx
+++ b/instances/treasury-devdao.near/widget/pages/stake-delegation/Validator.jsx
@@ -23,6 +23,7 @@ if (!pikespeakKey) {
             {validatorId}
           </div>
         ),
+        instance: props.instance,
       }}
     />
   );
diff --git a/instances/treasury-infinex.near/widget/app.jsx b/instances/treasury-infinex.near/widget/app.jsx
index 2f617073..3aca2e8b 100644
--- a/instances/treasury-infinex.near/widget/app.jsx
+++ b/instances/treasury-infinex.near/widget/app.jsx
@@ -11,6 +11,7 @@ const { AppLayout } = VM.require(
 ) || { AppLayout: () => <></> };
 
 const instance = "${REPL_INSTANCE}";
+const treasuryDaoID = "${REPL_TREASURY}";
 
 const { Theme } = VM.require(`${instance}/widget/config.css`) || {
   Theme: () => <></>,
@@ -95,7 +96,7 @@ function Page() {
 
 return (
   <Theme>
-    <AppLayout page={page} instance={instance}>
+    <AppLayout page={page} instance={instance} treasuryDaoID={treasuryDaoID}>
       <Page />
     </AppLayout>
   </Theme>
diff --git a/instances/treasury-templar.near/widget/app.jsx b/instances/treasury-templar.near/widget/app.jsx
index a9233012..edcfc545 100644
--- a/instances/treasury-templar.near/widget/app.jsx
+++ b/instances/treasury-templar.near/widget/app.jsx
@@ -11,6 +11,7 @@ const { AppLayout } = VM.require(
 ) || { AppLayout: () => <></> };
 
 const instance = "${REPL_INSTANCE}";
+const treasuryDaoID = "${REPL_TREASURY}";
 
 const { Theme } = VM.require(`${instance}/widget/config.css`) || {
   Theme: () => <></>,
@@ -84,7 +85,7 @@ function Page() {
 
 return (
   <Theme>
-    <AppLayout page={page} instance={instance}>
+    <AppLayout page={page} instance={instance} treasuryDaoID={treasuryDaoID}>
       <Page />
     </AppLayout>
   </Theme>
diff --git a/instances/treasury-testing-infinex.near/widget/app.jsx b/instances/treasury-testing-infinex.near/widget/app.jsx
index 2f617073..3aca2e8b 100644
--- a/instances/treasury-testing-infinex.near/widget/app.jsx
+++ b/instances/treasury-testing-infinex.near/widget/app.jsx
@@ -11,6 +11,7 @@ const { AppLayout } = VM.require(
 ) || { AppLayout: () => <></> };
 
 const instance = "${REPL_INSTANCE}";
+const treasuryDaoID = "${REPL_TREASURY}";
 
 const { Theme } = VM.require(`${instance}/widget/config.css`) || {
   Theme: () => <></>,
@@ -95,7 +96,7 @@ function Page() {
 
 return (
   <Theme>
-    <AppLayout page={page} instance={instance}>
+    <AppLayout page={page} instance={instance} treasuryDaoID={treasuryDaoID}>
       <Page />
     </AppLayout>
   </Theme>
diff --git a/instances/treasury-testing.near/widget/app.jsx b/instances/treasury-testing.near/widget/app.jsx
index a9233012..edcfc545 100644
--- a/instances/treasury-testing.near/widget/app.jsx
+++ b/instances/treasury-testing.near/widget/app.jsx
@@ -11,6 +11,7 @@ const { AppLayout } = VM.require(
 ) || { AppLayout: () => <></> };
 
 const instance = "${REPL_INSTANCE}";
+const treasuryDaoID = "${REPL_TREASURY}";
 
 const { Theme } = VM.require(`${instance}/widget/config.css`) || {
   Theme: () => <></>,
@@ -84,7 +85,7 @@ function Page() {
 
 return (
   <Theme>
-    <AppLayout page={page} instance={instance}>
+    <AppLayout page={page} instance={instance} treasuryDaoID={treasuryDaoID}>
       <Page />
     </AppLayout>
   </Theme>