diff --git a/instances/treasury-devdao.near/widget/components/DropDown.jsx b/instances/treasury-devdao.near/widget/components/DropDown.jsx
index e9279037..af101017 100644
--- a/instances/treasury-devdao.near/widget/components/DropDown.jsx
+++ b/instances/treasury-devdao.near/widget/components/DropDown.jsx
@@ -24,10 +24,6 @@ const StyledDropdown = styled.div`
     right: 5%;
   }
 
-  .cursor-pointer {
-    cursor: pointer;
-  }
-
   .text-sm {
     font-size: 12px !important;
   }
diff --git a/instances/treasury-devdao.near/widget/components/DropDownWithSearchAndManualRequest.jsx b/instances/treasury-devdao.near/widget/components/DropDownWithSearchAndManualRequest.jsx
index 03bc2f2a..ab03cc57 100644
--- a/instances/treasury-devdao.near/widget/components/DropDownWithSearchAndManualRequest.jsx
+++ b/instances/treasury-devdao.near/widget/components/DropDownWithSearchAndManualRequest.jsx
@@ -98,10 +98,6 @@ const Container = styled.div`
     background-color: var(--grey-04);
   }
 
-  .cursor-pointer {
-    cursor: pointer;
-  }
-
   .text-wrap {
     overflow: hidden;
     white-space: normal;
diff --git a/instances/treasury-devdao.near/widget/components/SettingsDropdown.jsx b/instances/treasury-devdao.near/widget/components/SettingsDropdown.jsx
index 8edaedb5..f2639117 100644
--- a/instances/treasury-devdao.near/widget/components/SettingsDropdown.jsx
+++ b/instances/treasury-devdao.near/widget/components/SettingsDropdown.jsx
@@ -107,14 +107,6 @@ const Container = styled.div`
   .custom-select {
     position: relative;
   }
-
-  .cursor-pointer {
-    cursor: pointer;
-  }
-
-  .text-sm {
-    font-size: 13px;
-  }
 `;
 
 const Item = ({ option }) => {
diff --git a/instances/treasury-devdao.near/widget/components/TokensDropdown.jsx b/instances/treasury-devdao.near/widget/components/TokensDropdown.jsx
index c6a8af51..ba6ff9f3 100644
--- a/instances/treasury-devdao.near/widget/components/TokensDropdown.jsx
+++ b/instances/treasury-devdao.near/widget/components/TokensDropdown.jsx
@@ -163,10 +163,6 @@ const Container = styled.div`
     background-color: var(--grey-04);
   }
 
-  .cursor-pointer {
-    cursor: pointer;
-  }
-
   .text-wrap {
     overflow: hidden;
     white-space: normal;
diff --git a/instances/treasury-devdao.near/widget/components/ValidatorsDropDownWithSearch.jsx b/instances/treasury-devdao.near/widget/components/ValidatorsDropDownWithSearch.jsx
index 7b4dbd45..5b08120c 100644
--- a/instances/treasury-devdao.near/widget/components/ValidatorsDropDownWithSearch.jsx
+++ b/instances/treasury-devdao.near/widget/components/ValidatorsDropDownWithSearch.jsx
@@ -74,10 +74,6 @@ const Container = styled.div`
     background-color: var(--grey-04);
   }
 
-  .cursor-pointer {
-    cursor: pointer;
-  }
-
   .text-wrap {
     overflow: hidden;
     white-space: normal;
diff --git a/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx b/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
index bcb664b2..974d71c8 100644
--- a/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
+++ b/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
@@ -350,6 +350,10 @@ function AppLayout({ page, instance, children, treasuryDaoID }) {
     .border-right {
       border-right: 1px solid var(--border-color);
     }
+
+    .cursor-pointer {
+      cursor: pointer;
+    }
   `;
 
   return (
diff --git a/instances/treasury-devdao.near/widget/pages/dashboard/TransactionHistory.jsx b/instances/treasury-devdao.near/widget/pages/dashboard/TransactionHistory.jsx
index 8ea70fe5..dd08c948 100644
--- a/instances/treasury-devdao.near/widget/pages/dashboard/TransactionHistory.jsx
+++ b/instances/treasury-devdao.near/widget/pages/dashboard/TransactionHistory.jsx
@@ -226,10 +226,6 @@ const Container = styled.div`
     }
   }
 
-  .cursor-pointer {
-    cursor: pointer;
-  }
-
   table {
     overflow-x: auto;
   }
diff --git a/instances/treasury-devdao.near/widget/pages/payments/CreatePaymentRequest.jsx b/instances/treasury-devdao.near/widget/pages/payments/CreatePaymentRequest.jsx
index 1af4b8af..9eab4e7f 100644
--- a/instances/treasury-devdao.near/widget/pages/payments/CreatePaymentRequest.jsx
+++ b/instances/treasury-devdao.near/widget/pages/payments/CreatePaymentRequest.jsx
@@ -208,9 +208,6 @@ const Container = styled.div`
     color: black !important;
   }
 
-  .text-sm {
-    font-size: 13px;
-  }
   .warning {
     background-color: rgba(255, 158, 0, 0.1);
     color: #ff9e00;
diff --git a/instances/treasury-devdao.near/widget/pages/payments/Table.jsx b/instances/treasury-devdao.near/widget/pages/payments/Table.jsx
index 6a56945d..3fcba7c6 100644
--- a/instances/treasury-devdao.near/widget/pages/payments/Table.jsx
+++ b/instances/treasury-devdao.near/widget/pages/payments/Table.jsx
@@ -70,16 +70,6 @@ const Container = styled.div`
   }
 `;
 
-const ToastContainer = styled.div`
-  a {
-    color: black !important;
-    text-decoration: underline !important;
-    &:hover {
-      color: black !important;
-    }
-  }
-`;
-
 function checkProposalStatus(proposalId) {
   Near.asyncView(treasuryDaoID, "get_proposal", {
     id: proposalId,
@@ -210,7 +200,7 @@ const VoteSuccessToast = () => {
   return showToastStatus &&
     (typeof voteProposalId === "number" ||
       typeof highlightProposalId === "number") ? (
-    <ToastContainer className="toast-container position-fixed bottom-0 end-0 p-3">
+    <div className="toast-container position-fixed bottom-0 end-0 p-3">
       <div className={`toast ${showToastStatus ? "show" : ""}`}>
         <div className="toast-header px-2">
           <strong className="me-auto">Just Now</strong>
@@ -218,7 +208,7 @@ const VoteSuccessToast = () => {
         </div>
         <ToastStatusContent />
       </div>
-    </ToastContainer>
+    </div>
   ) : null;
 };
 
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 968d5d74..8f07a761 100644
--- a/instances/treasury-devdao.near/widget/pages/proposals-feed/Table.jsx
+++ b/instances/treasury-devdao.near/widget/pages/proposals-feed/Table.jsx
@@ -56,16 +56,6 @@ const Container = styled.div`
   }
 `;
 
-const ToastContainer = styled.div`
-  a {
-    color: black !important;
-    text-decoration: underline !important;
-    &:hover {
-      color: black !important;
-    }
-  }
-`;
-
 function checkProposalStatus(proposalId) {
   Near.asyncView(treasuryDaoID, "get_proposal", {
     id: proposalId,
@@ -180,7 +170,7 @@ const VoteSuccessToast = () => {
   return showToastStatus &&
     (typeof voteProposalId === "number" ||
       typeof highlightProposalId === "number") ? (
-    <ToastContainer className="toast-container position-fixed bottom-0 end-0 p-3">
+    <div className="toast-container position-fixed bottom-0 end-0 p-3">
       <div className={`toast ${showToastStatus ? "show" : ""}`}>
         <div className="toast-header px-2">
           <strong className="me-auto">Just Now</strong>
@@ -188,7 +178,7 @@ const VoteSuccessToast = () => {
         </div>
         <ToastStatusContent />
       </div>
-    </ToastContainer>
+    </div>
   ) : null;
 };
 
diff --git a/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx b/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx
index baa2e782..f0d54dbd 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx
@@ -113,20 +113,10 @@ useEffect(() => {
   }
 }, [currentPage, rowsPerPage, allMembers]);
 
-const ToastContainer = styled.div`
-  a {
-    color: black !important;
-    text-decoration: underline !important;
-    &:hover {
-      color: black !important;
-    }
-  }
-`;
-
 const SubmitToast = () => {
   return (
     showToastStatus && (
-      <ToastContainer className="toast-container position-fixed bottom-0 end-0 p-3">
+      <div className="toast-container position-fixed bottom-0 end-0 p-3">
         <div className={`toast ${showToastStatus ? "show" : ""}`}>
           <div className="toast-header px-2">
             <strong className="me-auto">Just Now</strong>
@@ -149,7 +139,7 @@ const SubmitToast = () => {
             </a>
           </div>
         </div>
-      </ToastContainer>
+      </div>
     )
   );
 };
diff --git a/instances/treasury-devdao.near/widget/pages/settings/RoleSelector.jsx b/instances/treasury-devdao.near/widget/pages/settings/RoleSelector.jsx
index 85d383ab..3a4f6634 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/RoleSelector.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/RoleSelector.jsx
@@ -79,18 +79,10 @@ const Container = styled.div`
     background-color: var(--grey-04);
   }
 
-  .cursor-pointer {
-    cursor: pointer;
-  }
-
   .text-wrap {
     overflow: hidden;
     white-space: normal;
   }
-
-  .text-sm {
-    font-size: 13px;
-  }
 `;
 
 const handleOptionClick = (option) => {
diff --git a/instances/treasury-devdao.near/widget/pages/settings/Theme.jsx b/instances/treasury-devdao.near/widget/pages/settings/Theme.jsx
index b7d38570..4477cd80 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/Theme.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/Theme.jsx
@@ -27,59 +27,19 @@ const [image, setImage] = useState(defaultImage);
 const [color, setColor] = useState(defaultColor);
 const [selectedTheme, setSelectedTheme] = useState(ThemeOptions[0]);
 const [error, setError] = useState(null);
+const [isTxnCreated, setTxnCreated] = useState(false);
+const [showToastStatus, setToastStatus] = useState(false);
+const [lastProposalId, setLastProposalId] = useState(null);
 
 const Container = styled.div`
   max-width: 50rem;
   font-size: 14px;
 
-  .card-title {
-    font-size: 18px;
-    font-weight: 600;
-    padding-block: 5px;
-    border-bottom: 1px solid var(--border-color);
-  }
-
-  .selected-role {
-    background-color: var(--grey-04);
-  }
-
-  .cursor-pointer {
-    cursor: pointer;
-  }
-
-  .tag {
-    background-color: var(--grey-04);
-    font-size: 12px;
-    padding-block: 5px;
-  }
-
   label {
-    color: rgba(153, 153, 153, 1);
+    color: var(--text-secondary);
     font-size: 12px;
   }
 
-  .fw-bold {
-    font-weight: 500 !important;
-  }
-
-  .p-0 {
-    padding: 0 !important;
-  }
-
-  .text-md {
-    font-size: 13px;
-  }
-
-  .warning {
-    background-color: rgba(255, 158, 0, 0.1);
-    color: var(--other-warning);
-    font-weight: 500;
-  }
-
-  .text-sm {
-    font-size: 12px !important;
-  }
-
   .error-message {
     color: #d95c4a;
     background-color: rgba(217, 92, 74, 0.08);
@@ -222,11 +182,69 @@ const code = `
 </html>
 `;
 
+const SubmitToast = () => {
+  return (
+    showToastStatus && (
+      <div className="toast-container position-fixed bottom-0 end-0 p-3">
+        <div className={`toast ${showToastStatus ? "show" : ""}`}>
+          <div className="toast-header px-2">
+            <strong className="me-auto">Just Now</strong>
+            <i
+              className="bi bi-x-lg h6"
+              onClick={() => setToastStatus(null)}
+            ></i>
+          </div>
+          <div className="toast-body">
+            <div>Theme change request submitted.</div>
+            <a
+              href={href({
+                widgetSrc: `${instance}/widget/app`,
+                params: {
+                  page: "settings",
+                },
+              })}
+            >
+              View it
+            </a>
+          </div>
+        </div>
+      </div>
+    )
+  );
+};
+
+function getLastProposalId() {
+  return Near.asyncView(treasuryDaoID, "get_last_proposal_id").then(
+    (result) => result
+  );
+}
+
+useEffect(() => {
+  getLastProposalId().then((i) => setLastProposalId(i));
+}, []);
+
+useEffect(() => {
+  if (isTxnCreated) {
+    const checkForNewProposal = () => {
+      getLastProposalId().then((id) => {
+        if (lastProposalId !== id) {
+          setToastStatus(true);
+          setTxnCreated(false);
+        } else {
+          setTimeout(() => checkForNewProposal(), 1000);
+        }
+      });
+    };
+    checkForNewProposal();
+  }
+}, [isTxnCreated]);
+
 function toBase64(json) {
   return Buffer.from(JSON.stringify(json)).toString("base64");
 }
 
 function onSubmitClick() {
+  setTxnCreated(true);
   const deposit = daoPolicy?.proposal_bond || 100000000000000000000000;
 
   const description = {
@@ -276,6 +294,7 @@ useEffect(() => {
 
 return (
   <Container>
+    <SubmitToast />
     <div className="card rounded-3 w-100 h-100 p-3">
       {!metadata ? (
         <div
diff --git a/instances/treasury-devdao.near/widget/pages/settings/Thresholds.jsx b/instances/treasury-devdao.near/widget/pages/settings/Thresholds.jsx
index 1090f841..32ce0c9c 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/Thresholds.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/Thresholds.jsx
@@ -117,10 +117,6 @@ const Container = styled.div`
     background-color: var(--grey-04);
   }
 
-  .cursor-pointer {
-    cursor: pointer;
-  }
-
   .tag {
     background-color: var(--grey-04);
     font-size: 12px;
@@ -132,10 +128,6 @@ const Container = styled.div`
     font-size: 12px;
   }
 
-  .fw-bold {
-    font-weight: 500 !important;
-  }
-
   .p-0 {
     padding: 0 !important;
   }
@@ -154,34 +146,11 @@ const Container = styled.div`
     font-size: 12px !important;
   }
 
-  .text-red {
-    color: #d95c4a;
-  }
-
-  .toast {
-    background: white !important;
-  }
-
-  .toast-header {
-    background-color: var(--other-primary) !important;
-    color: white !important;
-  }
-
   .dropdown-toggle:after {
     top: 20% !important;
   }
 `;
 
-const ToastContainer = styled.div`
-  a {
-    color: black !important;
-    text-decoration: underline !important;
-    &:hover {
-      color: black !important;
-    }
-  }
-`;
-
 const proposalKinds = [
   "config",
   "policy",
@@ -255,7 +224,7 @@ function onSubmitClick() {
 const SubmitToast = () => {
   return (
     showToastStatus && (
-      <ToastContainer className="toast-container position-fixed bottom-0 end-0 p-3">
+      <div className="toast-container position-fixed bottom-0 end-0 p-3">
         <div className={`toast ${showToastStatus ? "show" : ""}`}>
           <div className="toast-header px-2">
             <strong className="me-auto">Just Now</strong>
@@ -278,7 +247,7 @@ const SubmitToast = () => {
             </a>
           </div>
         </div>
-      </ToastContainer>
+      </div>
     )
   );
 };
diff --git a/instances/treasury-devdao.near/widget/pages/settings/VotingDurationPage.jsx b/instances/treasury-devdao.near/widget/pages/settings/VotingDurationPage.jsx
index 417a4a36..b80aa143 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/VotingDurationPage.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/VotingDurationPage.jsx
@@ -60,69 +60,10 @@ const Container = styled.div`
     border-bottom: 1px solid var(--border-color);
   }
 
-  .selected-role {
-    background-color: var(--grey-04);
-  }
-
-  .cursor-pointer {
-    cursor: pointer;
-  }
-
-  .tag {
-    background-color: var(--grey-04);
-    font-size: 12px;
-    padding-block: 5px;
-  }
-
   label {
-    color: rgba(153, 153, 153, 1);
+    color: var(--text-secondary);
     font-size: 12px;
   }
-
-  .fw-bold {
-    font-weight: 500 !important;
-  }
-
-  .p-0 {
-    padding: 0 !important;
-  }
-
-  .text-md {
-    font-size: 13px;
-  }
-
-  .warning {
-    background-color: rgba(255, 158, 0, 0.1);
-    color: var(--other-warning);
-    font-weight: 500;
-  }
-
-  .text-sm {
-    font-size: 12px !important;
-  }
-
-  .text-red {
-    color: #d95c4a;
-  }
-
-  .toast {
-    background: white !important;
-  }
-
-  .toast-header {
-    background-color: var(--other-primary) !important;
-    color: white !important;
-  }
-`;
-
-const ToastContainer = styled.div`
-  a {
-    color: black !important;
-    text-decoration: underline !important;
-    &:hover {
-      color: black !important;
-    }
-  }
 `;
 
 const cancelChangeRequest = () => {
@@ -523,7 +464,7 @@ return (
         </div>
       </div>
     </div>
-    <ToastContainer className="toast-container position-fixed bottom-0 end-0 p-3">
+    <div className="toast-container position-fixed bottom-0 end-0 p-3">
       <div className={`toast ${showToastStatus ? "show" : ""}`}>
         <div className="toast-header px-2">
           <strong className="me-auto">Just Now</strong>
@@ -543,6 +484,6 @@ return (
           </a>
         </div>
       </div>
-    </ToastContainer>
+    </div>
   </Container>
 );
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 9a2b3827..0fb8046d 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/feed/SettingsDropdown.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/feed/SettingsDropdown.jsx
@@ -80,14 +80,6 @@ const Container = styled.div`
   .custom-select {
     position: relative;
   }
-
-  .cursor-pointer {
-    cursor: pointer;
-  }
-
-  .text-sm {
-    font-size: 13px;
-  }
 `;
 
 const Item = ({ option }) => {
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 3c1896d9..0b30f1cf 100644
--- a/instances/treasury-devdao.near/widget/pages/settings/feed/Table.jsx
+++ b/instances/treasury-devdao.near/widget/pages/settings/feed/Table.jsx
@@ -66,16 +66,6 @@ const Container = styled.div`
   }
 `;
 
-const ToastContainer = styled.div`
-  a {
-    color: black !important;
-    text-decoration: underline !important;
-    &:hover {
-      color: black !important;
-    }
-  }
-`;
-
 function checkProposalStatus(proposalId) {
   Near.asyncView(treasuryDaoID, "get_proposal", {
     id: proposalId,
@@ -202,7 +192,7 @@ const VoteSuccessToast = () => {
   return showToastStatus &&
     (typeof voteProposalId === "number" ||
       typeof highlightProposalId === "number") ? (
-    <ToastContainer className="toast-container position-fixed bottom-0 end-0 p-3">
+    <div className="toast-container position-fixed bottom-0 end-0 p-3">
       <div className={`toast ${showToastStatus ? "show" : ""}`}>
         <div className="toast-header px-2">
           <strong className="me-auto">Just Now</strong>
@@ -210,7 +200,7 @@ const VoteSuccessToast = () => {
         </div>
         <ToastStatusContent />
       </div>
-    </ToastContainer>
+    </div>
   ) : null;
 };
 
diff --git a/instances/treasury-devdao.near/widget/pages/stake-delegation/SettingsDropdown.jsx b/instances/treasury-devdao.near/widget/pages/stake-delegation/SettingsDropdown.jsx
index c16a0965..cc4be62b 100644
--- a/instances/treasury-devdao.near/widget/pages/stake-delegation/SettingsDropdown.jsx
+++ b/instances/treasury-devdao.near/widget/pages/stake-delegation/SettingsDropdown.jsx
@@ -91,14 +91,6 @@ const Container = styled.div`
   .custom-select {
     position: relative;
   }
-
-  .cursor-pointer {
-    cursor: pointer;
-  }
-
-  .text-sm {
-    font-size: 13px;
-  }
 `;
 
 const Item = ({ option }) => {
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 4236a33b..02c71d0f 100644
--- a/instances/treasury-devdao.near/widget/pages/stake-delegation/Table.jsx
+++ b/instances/treasury-devdao.near/widget/pages/stake-delegation/Table.jsx
@@ -105,17 +105,7 @@ const Container = styled.div`
     color: inherit !important;
   }
 `;
-
-const ToastContainer = styled.div`
-  a {
-    color: black !important;
-    text-decoration: underline !important;
-    &:hover {
-      color: black !important;
-    }
-  }
-`;
-
+div;
 function checkProposalStatus(proposalId) {
   Near.asyncView(treasuryDaoID, "get_proposal", {
     id: proposalId,
@@ -240,7 +230,7 @@ const VoteSuccessToast = () => {
   return showToastStatus &&
     (typeof voteProposalId === "number" ||
       typeof highlightProposalId === "number") ? (
-    <ToastContainer className="toast-container position-fixed bottom-0 end-0 p-3">
+    <div className="toast-container position-fixed bottom-0 end-0 p-3">
       <div className={`toast ${showToastStatus ? "show" : ""}`}>
         <div className="toast-header px-2">
           <strong className="me-auto">Just Now</strong>
@@ -248,7 +238,7 @@ const VoteSuccessToast = () => {
         </div>
         <ToastStatusContent />
       </div>
-    </ToastContainer>
+    </div>
   ) : null;
 };