dOrgTech · EightRice · Jun 16, 2026 · Jun 13, 2026 · Jun 13, 2026 · Jun 16, 2026
diff --git a/package.json b/package.json
@@ -23,12 +23,11 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^2.8.1",
-    "@material-ui/core": "^4.11.3",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "^4.0.0-alpha.57",
     "@microsoft/signalr": "^5.0.9",
-    "@mui/icons-material": "^5.14.14",
-    "@mui/material": "^5.14.14",
+    "@mui/icons-material": "^6.5.0",
+    "@mui/lab": "6.0.1-beta.36",
+    "@mui/material": "^6.5.0",
+    "@mui/styles": "^6.5.0",
     "@tanstack/react-query": "^5.100.10",
     "@taquito/beacon-wallet": "^24.3.0",
     "@taquito/signer": "^24.3.0",
@@ -54,14 +53,14 @@
     "export-to-csv": "^1.2.4",
     "firebase": "11.10.0",
     "formik": "^2.2.6",
-    "formik-material-ui": "^3.0.1",
+    "formik-mui": "^5.0.0-alpha.1",
     "graphql": "^15.10.2",
     "graphql-request": "^3.4.0",
     "hex-to-rgba": "^2.0.1",
     "html-react-parser": "^5.2.17",
     "https-browserify": "^1.0.0",
     "jsonschema": "^1.4.0",
-    "notistack": "^1.0.3",
+    "notistack": "^3.0.2",
     "numbro": "^2.4.0",
     "os-browserify": "^0.3.0",
     "posthog-js": "^1.373.4",

diff --git a/src/App.tsx b/src/App.tsx
@@ -3,8 +3,8 @@ import "App.css"
 import { BrowserRouter as Router, Redirect, Route, Switch } from "react-router-dom"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 
-import { Box, ThemeProvider, styled } from "@material-ui/core"
-import { SnackbarProvider } from "notistack"
+import { Box, ThemeProvider, Theme, StyledEngineProvider, styled } from "@mui/material"
+import { SnackbarProvider, MaterialDesignContent } from "notistack"
 
 import { DAOExplorerRouter } from "modules/explorer/router"
 import { CreatorProvider } from "modules/creator/state"
@@ -23,6 +23,11 @@ import { DAOCreatorRouter } from "modules/creator/router"
 import { CommunityCreator } from "modules/lite/creator"
 import { EtherlinkDAOCreatorRouter } from "modules/etherlink/router"
 
+declare module "@mui/styles/defaultTheme" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface DefaultTheme extends Theme {}
+}
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -37,107 +42,129 @@ const queryClient = new QueryClient({
   }
 })
 
-const SuccessSnackbar = styled("div")({
-  backgroundColor: "#4BCF93 !important",
+// notistack v3 moved per-variant styling from `classes.variantX` to the
+// `Components` prop with styled MaterialDesignContent.
+const snackbarVariantStyle = {
   padding: "6px 28px",
   height: 54,
   fontSize: 13,
   lineHeight: "0px",
   opacity: 1
+}
+
+const SuccessSnackbar = styled(MaterialDesignContent)({
+  "&.notistack-MuiContent-success": {
+    backgroundColor: "#4BCF93 !important",
+    ...snackbarVariantStyle
+  }
 })
 
-const ErrorSnackbar = styled("div")({
-  backgroundColor: "#ED254E !important",
-  padding: "6px 28px",
-  height: 54,
-  fontSize: 13,
-  lineHeight: "0px",
-  opacity: 1
+const ErrorSnackbar = styled(MaterialDesignContent)({
+  "&.notistack-MuiContent-error": {
+    backgroundColor: "#ED254E !important",
+    ...snackbarVariantStyle
+  }
 })
 
-const InfoSnackbar = styled("div")({
-  backgroundColor: "#3866F9 !important",
-  padding: "6px 28px",
-  height: 54,
-  fontSize: 13,
-  lineHeight: "0px",
-  opacity: 1
+const InfoSnackbar = styled(MaterialDesignContent)({
+  "&.notistack-MuiContent-info": {
+    backgroundColor: "#3866F9 !important",
+    ...snackbarVariantStyle
+  }
+})
+
+// notistack v3 dropped the top-level `style` prop; the container z-index
+// is now applied through the `containerRoot` class.
+const SnackbarContainer = styled("div")({
+  zIndex: 1000003
 })
 
 // PostHog tracking is now handled globally via PostHogProvider in index.tsx
 // Visit tracking can be done via PostHog's auto-capture or custom events
 
 const App: React.FC = () => {
   return (
-    <ThemeProvider theme={theme}>
-      <SnackbarProvider
-        classes={{
-          variantSuccess: SuccessSnackbar.toString(),
-          variantError: ErrorSnackbar.toString(),
-          variantInfo: InfoSnackbar.toString()
-        }}
-        style={{ zIndex: 1000003 }}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "center"
-        }}
-      >
-        <QueryClientProvider client={queryClient}>
-          <ActionSheetProvider>
-            <Box bgcolor="primary.dark" position="absolute" width="100%">
-              <Router>
-                <ScrollToTop />
-                <Switch>
-                  <Route path="/creator-evm">
-                    <ThemeProvider theme={legacyTheme}>
-                      <EtherlinkDAOCreatorRouter />
-                    </ThemeProvider>
-                  </Route>
-                  <Route path="/creator">
-                    <CreatorProvider>
-                      <ThemeProvider theme={legacyTheme}>
-                        <DAOCreatorRouter />
-                      </ThemeProvider>
-                    </CreatorProvider>
-                    {/* <WarningFooter
-                    text={
-                      "The Homebase contract can't transfer FA1.2 tokens. Please make sure any and all tokens you send to the DAO treasury are implementing the FA2 standard."
-                    }
-                  /> */}
-                  </Route>
-                  <Route path="/lite">
-                    <ThemeProvider theme={legacyTheme}>
-                      <CommunityCreator />
-                    </ThemeProvider>
-                  </Route>
-                  <Route path="/explorer">
-                    <TZKTSubscriptionsProvider>
-                      <DAOExplorerRouter />
-                    </TZKTSubscriptionsProvider>
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={theme}>
+        <SnackbarProvider
+          classes={{
+            containerRoot: SnackbarContainer.toString()
+          }}
+          Components={{
+            success: SuccessSnackbar,
+            error: ErrorSnackbar,
+            info: InfoSnackbar
+          }}
+          anchorOrigin={{
+            vertical: "bottom",
+            horizontal: "center"
+          }}
+        >
+          {/* <TanStackQueryClientProvider client={tsQueryClient}> */}
+          <QueryClientProvider client={queryClient}>
+            <ActionSheetProvider>
+              <Box bgcolor="primary.dark" position="absolute" width="100%">
+                <Router>
+                  <ScrollToTop />
+                  <Switch>
+                    <Route path="/creator-evm">
+                      <StyledEngineProvider injectFirst>
+                        <ThemeProvider theme={legacyTheme}>
+                          <EtherlinkDAOCreatorRouter />
+                        </ThemeProvider>
+                      </StyledEngineProvider>
+                    </Route>
+                    <Route path="/creator">
+                      <CreatorProvider>
+                        <StyledEngineProvider injectFirst>
+                          <ThemeProvider theme={legacyTheme}>
+                            <DAOCreatorRouter />
+                          </ThemeProvider>
+                        </StyledEngineProvider>
+                      </CreatorProvider>
+                      {/* <WarningFooter
+                      text={
+                        "The Homebase contract can't transfer FA1.2 tokens. Please make sure any and all tokens you send to the DAO treasury are implementing the FA2 standard."
+                      }
+                    /> */}
+                    </Route>
+                    <Route path="/lite">
+                      <StyledEngineProvider injectFirst>
+                        <ThemeProvider theme={legacyTheme}>
+                          <CommunityCreator />
+                        </ThemeProvider>
+                      </StyledEngineProvider>
+                    </Route>
+                    <Route path="/explorer">
+                      <TZKTSubscriptionsProvider>
+                        <DAOExplorerRouter />
+                      </TZKTSubscriptionsProvider>
 
-                    {window.location.href.indexOf(HUMANITEZ_DAO) !== -1 ? (
-                      <>
-                        {/* Special case for this DAO which was created before FA1.2 fix was created for the smart contract */}
-                        <WarningFooter
-                          text={
-                            "The Homebase contract can't transfer FA1.2 tokens. Please make sure any and all tokens you send to the DAO treasury are implementing the FA2 standard."
-                          }
-                        />
-                      </>
-                    ) : null}
-                    <ExplorerFooter></ExplorerFooter>
-                  </Route>
-                  <Route path="/faq">
-                    <FAQ />
-                  </Route>
-                  <Redirect to="/explorer" />
-                </Switch>
-              </Router>
-            </Box>
-          </ActionSheetProvider>
-        </QueryClientProvider>
-      </SnackbarProvider>
-    </ThemeProvider>
+                      {window.location.href.indexOf(HUMANITEZ_DAO) !== -1 ? (
+                        <>
+                          {/* Special case for this DAO which was created before FA1.2 fix was created for the smart contract */}
+                          <WarningFooter
+                            text={
+                              "The Homebase contract can't transfer FA1.2 tokens. Please make sure any and all tokens you send to the DAO treasury are implementing the FA2 standard."
+                            }
+                          />
+                        </>
+                      ) : null}
+                      <ExplorerFooter></ExplorerFooter>
+                    </Route>
+                    <Route path="/faq">
+                      <FAQ />
+                    </Route>
+                    <Redirect to="/explorer" />
+                  </Switch>
+                </Router>
+              </Box>
+            </ActionSheetProvider>
+          </QueryClientProvider>
+          {/* </TanStackQueryClientProvider> */}
+        </SnackbarProvider>
+      </ThemeProvider>
+    </StyledEngineProvider>
   )
 }
 

diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx
@@ -1,6 +1,6 @@
 import React from "react"
-import { Grid, GridProps, Typography } from "@material-ui/core"
-import { styled, Theme } from "@material-ui/core/styles"
+import { Grid, GridProps, Typography } from "@mui/material"
+import { styled, Theme } from "@mui/material/styles"
 import hexToRgba from "hex-to-rgba"
 import { theme } from "theme"
 

diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
@@ -1,4 +1,4 @@
-import { styled, Button as MaterialButton } from "@material-ui/core"
+import { styled, Button as MaterialButton } from "@mui/material"
 
 export const Button = styled(MaterialButton)(({ theme }) => ({
   "fontSize": "14px",

diff --git a/src/components/ui/ConfigProposalForm.tsx b/src/components/ui/ConfigProposalForm.tsx
@@ -1,5 +1,5 @@
-import { Grid, Typography, styled, CircularProgress } from "@material-ui/core"
-import { CheckOutlined } from "@material-ui/icons"
+import { Grid, Typography, styled, CircularProgress } from "@mui/material"
+import { CheckOutlined } from "@mui/icons-material"
 
 const StyledRow = styled(Grid)({
   marginTop: 30

diff --git a/src/components/ui/Containers.tsx b/src/components/ui/Containers.tsx
@@ -1,4 +1,4 @@
-import { Grid, Typography, styled } from "@material-ui/core"
+import { Grid, Typography, styled } from "@mui/material"
 
 const LoaderContainer = styled(Grid)({
   paddingTop: 40,

diff --git a/src/components/ui/ContentContainer.tsx b/src/components/ui/ContentContainer.tsx
@@ -1,4 +1,4 @@
-import { styled, Grid } from "@material-ui/core"
+import { styled, Grid } from "@mui/material"
 
 export const ContentContainer = styled(Grid)(({ theme }) => ({
   borderRadius: 8,

diff --git a/src/components/ui/CopyButton.tsx b/src/components/ui/CopyButton.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { Box, Tooltip, styled } from "@material-ui/core"
+import { Box, Tooltip, styled } from "@mui/material"
 import { ReactComponent as CopyIcon } from "assets/img/copy_icon.svg"
 
 const TooltipButton = styled(Tooltip)({

diff --git a/src/components/ui/DaoCreator.tsx b/src/components/ui/DaoCreator.tsx
@@ -1,6 +1,8 @@
-import { Grid, Paper, Stepper, TextareaAutosize, Typography, styled, withStyles, withTheme } from "@material-ui/core"
-import InfoRounded from "@material-ui/icons/InfoRounded"
-import { TextField as FormikTextField } from "formik-material-ui"
+import { Grid, Paper, Stepper, TextareaAutosize, Typography, styled } from "@mui/material"
+import withStyles from "@mui/styles/withStyles"
+import withTheme from "@mui/styles/withTheme"
+import InfoRounded from "@mui/icons-material/InfoRounded"
+import { TextField as FormikTextField } from "formik-mui"
 
 export const PageContainer = styled(Grid)(({ theme }) => ({
   background: theme.palette.primary.main

diff --git a/src/components/ui/DaoExplorer.tsx b/src/components/ui/DaoExplorer.tsx
@@ -1,4 +1,4 @@
-import { styled } from "@material-ui/core"
+import { styled } from "@mui/material"
 
 const PageLayout = styled("div")(({ theme }) => ({
   background: theme.palette.primary.dark,

diff --git a/src/components/ui/FormSelect.tsx b/src/components/ui/FormSelect.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { TextField, TextFieldProps } from "@material-ui/core"
+import { TextField, TextFieldProps } from "@mui/material"
 
 type Props = Omit<TextFieldProps, "select"> & {
   native?: boolean

diff --git a/src/components/ui/FormTextField.tsx b/src/components/ui/FormTextField.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { TextField, TextFieldProps } from "@material-ui/core"
+import { TextField, TextFieldProps } from "@mui/material"
 
 type Props = TextFieldProps & {
   // Reserved for future variants if needed

diff --git a/src/components/ui/HeroContainer.tsx b/src/components/ui/HeroContainer.tsx
@@ -1,9 +1,9 @@
-import { styled } from "@material-ui/core"
+import { styled } from "@mui/material"
 import { ContentContainer } from "./ContentContainer"
 
 export const HeroContainer = styled(ContentContainer)(({ theme }) => ({
   padding: 38,
-  [theme.breakpoints.down("sm")]: {
+  [theme.breakpoints.down("lg")]: {
     width: "inherit"
   }
 }))
diff --git a/src/components/ui/InputText.tsx b/src/components/ui/InputText.tsx
@@ -1,5 +1,5 @@
-import { withStyles } from "@material-ui/core"
-import { TextField } from "@material-ui/core"
+import withStyles from "@mui/styles/withStyles"
+import { TextField } from "@mui/material"
 
 const InputText = withStyles(theme => ({
   root: {

diff --git a/src/components/ui/LinearProgress.tsx b/src/components/ui/LinearProgress.tsx
@@ -1,5 +1,5 @@
-import { Theme, LinearProgress as MuiLinearProgress } from "@material-ui/core"
-import { withStyles } from "@material-ui/core/styles"
+import { Theme, LinearProgress as MuiLinearProgress } from "@mui/material"
+import withStyles from "@mui/styles/withStyles"
 
 const StyledLinearProgress = withStyles((theme: Theme) => ({
   root: (props: { variant: "success" | "error" }) => ({

diff --git a/src/components/ui/LoadingLine.tsx b/src/components/ui/LoadingLine.tsx
@@ -1,5 +1,7 @@
 import React from "react"
-import { makeStyles, Theme } from "@material-ui/core/styles"
+import { Theme } from "@mui/material/styles"
+
+import makeStyles from "@mui/styles/makeStyles"
 
 interface LoadingLineProps {
   color?: string

diff --git a/src/components/ui/NextButton.tsx b/src/components/ui/NextButton.tsx
@@ -1,5 +1,5 @@
 import { MainButton } from "modules/common/MainButton"
-import { styled } from "@material-ui/core"
+import { styled } from "@mui/material"
 
 export const NextButton = styled(MainButton)(({ theme }) => ({
   textAlign: "center",

diff --git a/src/components/ui/NumberInput.tsx b/src/components/ui/NumberInput.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react"
 import { StyledTextField } from "./StyledTextField"
-import { TextFieldProps } from "@material-ui/core"
+import { TextFieldProps } from "@mui/material"
 
 interface NumberInputProps extends Omit<TextFieldProps, "onChange" | "value" | "type"> {
   value: number