diff --git a/.changeset/chilly-trains-fail.md b/.changeset/chilly-trains-fail.md
new file mode 100644
index 00000000000..47947362c4c
--- /dev/null
+++ b/.changeset/chilly-trains-fail.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Login, password reset and error pages now use new Macaw buttons, text and styles.
diff --git a/package-lock.json b/package-lock.json
index 0af3ed21151..a8b251acc29 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,7 +31,7 @@
         "@material-ui/styles": "^4.11.4",
         "@reach/auto-id": "^0.16.0",
         "@saleor/macaw-ui": "npm:@saleor/macaw-ui@0.7.4",
-        "@saleor/macaw-ui-next": "npm:@saleor/macaw-ui@1.1.6",
+        "@saleor/macaw-ui-next": "npm:@saleor/macaw-ui@1.1.7",
         "@saleor/sdk": "0.6.0",
         "@sentry/react": "^8.21.0",
         "@sentry/vite-plugin": "^2.21.1",
@@ -6912,9 +6912,9 @@
     },
     "node_modules/@saleor/macaw-ui-next": {
       "name": "@saleor/macaw-ui",
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-1.1.6.tgz",
-      "integrity": "sha512-lDCuwQQO2OZiWyZ8yoIg771uATkPCtfwWcxG8G71nDTXSCtku5Oae5fJEUoAnGTw364YuOVwZO1mk3XbaK/YlA==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-1.1.7.tgz",
+      "integrity": "sha512-8C5rlFA7yQAhXqgcGfMk+Gd20/KZtGHY+UC7la0g0mqV6OYq5QmxyZEuLXFDZjPJ2yqMeKzXsI9ii72slo+hLw==",
       "dependencies": {
         "@dessert-box/react": "^0.4.0",
         "@floating-ui/react-dom": "^2.0.2",
@@ -29751,9 +29751,9 @@
       }
     },
     "@saleor/macaw-ui-next": {
-      "version": "npm:@saleor/macaw-ui@1.1.6",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-1.1.6.tgz",
-      "integrity": "sha512-lDCuwQQO2OZiWyZ8yoIg771uATkPCtfwWcxG8G71nDTXSCtku5Oae5fJEUoAnGTw364YuOVwZO1mk3XbaK/YlA==",
+      "version": "npm:@saleor/macaw-ui@1.1.7",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-1.1.7.tgz",
+      "integrity": "sha512-8C5rlFA7yQAhXqgcGfMk+Gd20/KZtGHY+UC7la0g0mqV6OYq5QmxyZEuLXFDZjPJ2yqMeKzXsI9ii72slo+hLw==",
       "requires": {
         "@dessert-box/react": "^0.4.0",
         "@floating-ui/react-dom": "^2.0.2",
diff --git a/package.json b/package.json
index 57117a642af..7b6546b98da 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "@material-ui/styles": "^4.11.4",
     "@reach/auto-id": "^0.16.0",
     "@saleor/macaw-ui": "npm:@saleor/macaw-ui@0.7.4",
-    "@saleor/macaw-ui-next": "npm:@saleor/macaw-ui@1.1.6",
+    "@saleor/macaw-ui-next": "npm:@saleor/macaw-ui@1.1.7",
     "@saleor/sdk": "0.6.0",
     "@sentry/react": "^8.21.0",
     "@sentry/vite-plugin": "^2.21.1",
diff --git a/src/auth/components/LoginPage/LoginPage.tsx b/src/auth/components/LoginPage/LoginPage.tsx
index d4a0e25b5f4..a05b32ea054 100644
--- a/src/auth/components/LoginPage/LoginPage.tsx
+++ b/src/auth/components/LoginPage/LoginPage.tsx
@@ -1,13 +1,12 @@
 import { UserContextError } from "@dashboard/auth/types";
 import { passwordResetUrl } from "@dashboard/auth/urls";
-import { Button } from "@dashboard/components/Button";
 import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { AvailableExternalAuthenticationsQuery } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import { commonMessages } from "@dashboard/intl";
 import { CircularProgress, Divider, TextField } from "@material-ui/core";
 import { EyeIcon, IconButton } from "@saleor/macaw-ui";
-import { Box, Text } from "@saleor/macaw-ui-next";
+import { Box, Button, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Link } from "react-router-dom";
@@ -50,13 +49,21 @@ const LoginPage: React.FC<LoginCardProps> = props => {
     <LoginForm onSubmit={onSubmit}>
       {({ change: handleChange, data, submit }) => (
         <Box display="flex" flexDirection="column" alignItems="flex-start" width="100%">
-          <Text size={6} fontWeight="bold" lineHeight={3} className={classes.header}>
+          <Text size={6} fontWeight="bold" lineHeight={3} marginBottom={4}>
             <FormattedMessage id="vzgZ3U" defaultMessage="Sign In" description="card header" />
           </Text>
           {errors.map(error => (
-            <div className={classes.panel} key={error} data-test-id="login-error-message">
-              {getErrorMessage(error, intl)}
-            </div>
+            <Box
+              borderRadius={4}
+              padding={4}
+              backgroundColor="critical1"
+              width="100%"
+              marginBottom={2}
+              key={error}
+              data-test-id="login-error-message"
+            >
+              <Text>{getErrorMessage(error, intl)}</Text>
+            </Box>
           ))}
           <TextField
             autoFocus
@@ -118,7 +125,7 @@ const LoginPage: React.FC<LoginCardProps> = props => {
           </Text>
           <div className={classes.buttonContainer}>
             <Button
-              className={classes.loginButton}
+              width="100%"
               disabled={disabled}
               variant="primary"
               onClick={submit}
@@ -146,7 +153,7 @@ const LoginPage: React.FC<LoginCardProps> = props => {
             <React.Fragment key={externalAuthentication.id}>
               <FormSpacer />
               <Button
-                fullWidth
+                width="100%"
                 variant="secondary"
                 onClick={() => onExternalAuthentication(externalAuthentication.id)}
                 data-test-id="external-authentication"
diff --git a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx b/src/auth/components/NewPasswordPage/NewPasswordPage.tsx
index 338a8db9f3e..9c496afc106 100644
--- a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx
+++ b/src/auth/components/NewPasswordPage/NewPasswordPage.tsx
@@ -1,16 +1,13 @@
-import { Button } from "@dashboard/components/Button";
 import Form from "@dashboard/components/Form";
 import FormSpacer from "@dashboard/components/FormSpacer";
 import { AccountErrorFragment } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import getAccountErrorMessage from "@dashboard/utils/errors/account";
 import { TextField } from "@material-ui/core";
-import { Text } from "@saleor/macaw-ui-next";
+import { Box, Button, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import useStyles from "../styles";
-
 export interface NewPasswordPageFormData {
   password: string;
   confirmPassword: string;
@@ -27,7 +24,6 @@ const initialForm: NewPasswordPageFormData = {
 };
 const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
   const { loading, errors, onSubmit } = props;
-  const classes = useStyles(props);
   const intl = useIntl();
 
   return (
@@ -37,7 +33,7 @@ const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
 
         return (
           <>
-            <Text size={6} fontWeight="bold" lineHeight={3} className={classes.header}>
+            <Text size={6} fontWeight="bold" lineHeight={3} marginBottom={2}>
               <FormattedMessage
                 id="WhKGPA"
                 defaultMessage="Set up new password"
@@ -45,9 +41,16 @@ const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
               />
             </Text>
             {errors.map(error => (
-              <div className={classes.panel} key={`${error.code}-${error.field}`}>
+              <Box
+                borderRadius={4}
+                padding={4}
+                backgroundColor="critical1"
+                width="100%"
+                marginBottom={2}
+                key={`${error.code}-${error.field}`}
+              >
                 {getAccountErrorMessage(error, intl)}
-              </div>
+              </Box>
             ))}
             <Text size={2} fontWeight="light" color="default2">
               <FormattedMessage
@@ -105,7 +108,7 @@ const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
             <FormSpacer />
             <Button
               data-test-id="button-bar-confirm"
-              className={classes.submit}
+              width="100%"
               disabled={loading || data.password.length === 0 || passwordError}
               variant="primary"
               onClick={handleSubmit}
diff --git a/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx b/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx
index d681fb09a3c..72c7eec1648 100644
--- a/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx
+++ b/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx
@@ -1,19 +1,14 @@
-import { Button } from "@dashboard/components/Button";
 import Form from "@dashboard/components/Form";
 import FormSpacer from "@dashboard/components/FormSpacer";
-import { IconButton } from "@dashboard/components/IconButton";
 import { getAppMountUri } from "@dashboard/config";
 import { AccountErrorCode } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import { commonMessages } from "@dashboard/intl";
 import { TextField } from "@material-ui/core";
-import { ArrowRightIcon } from "@saleor/macaw-ui";
-import { Box, Text } from "@saleor/macaw-ui-next";
+import { ArrowLeftIcon, Box, Button, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import useStyles from "../styles";
-
 export interface ResetPasswordPageFormData {
   email: string;
 }
@@ -25,21 +20,35 @@ export interface ResetPasswordPageProps {
 
 const ResetPasswordPage: React.FC<ResetPasswordPageProps> = props => {
   const { disabled, error, onSubmit } = props;
-  const classes = useStyles(props);
   const intl = useIntl();
 
   return (
     <Form initial={{ email: "" }} onSubmit={onSubmit}>
       {({ change: handleChange, data, submit: handleSubmit }) => (
         <Box display="flex" flexDirection="column" alignItems="flex-start">
-          <IconButton className={classes.backBtn} href={getAppMountUri()} variant="secondary">
-            <ArrowRightIcon className={classes.arrow} />
-          </IconButton>
-          <Text size={6} fontWeight="bold" lineHeight={3} className={classes.header}>
+          <Button
+            as="a"
+            icon={<ArrowLeftIcon />}
+            href={getAppMountUri()}
+            variant="secondary"
+            marginBottom={4}
+          />
+
+          <Text size={6} fontWeight="bold" lineHeight={3} marginBottom={2}>
             <FormattedMessage id="Yy/yDL" defaultMessage="Reset password" />
           </Text>
-          {!!error && <div className={classes.panel}>{error}</div>}
-          <Text size={2} fontWeight="light" color="default2">
+          {!!error && (
+            <Box
+              borderRadius={4}
+              padding={4}
+              backgroundColor="critical1"
+              width="100%"
+              marginBottom={2}
+            >
+              <Text>{error}</Text>
+            </Box>
+          )}
+          <Text fontWeight="light" color="default2" display="block">
             <FormattedMessage
               id="54M0Gu"
               defaultMessage="Provide us with an email - if we find it in our database we will send you a link to reset your password. You should be able to find it in your inbox in the next couple of minutes."
@@ -63,11 +72,11 @@ const ResetPasswordPage: React.FC<ResetPasswordPageProps> = props => {
           <FormSpacer />
           <Button
             data-test-id="submit"
-            className={classes.submit}
             disabled={disabled}
             variant="primary"
             onClick={handleSubmit}
             type="submit"
+            width="100%"
           >
             <FormattedMessage
               id="lm9NSK"
diff --git a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx
index 87c565d9d7b..d8ce99cb801 100644
--- a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx
+++ b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx
@@ -1,11 +1,8 @@
-import { Button } from "@dashboard/components/Button";
 import FormSpacer from "@dashboard/components/FormSpacer";
-import { Text } from "@saleor/macaw-ui-next";
+import { Button, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import useStyles from "../styles";
-
 export interface ResetPasswordSuccessPageFormData {
   email: string;
 }
@@ -15,14 +12,13 @@ export interface ResetPasswordSuccessPageProps {
 
 const ResetPasswordSuccessPage: React.FC<ResetPasswordSuccessPageProps> = props => {
   const { onBack } = props;
-  const classes = useStyles(props);
 
   return (
     <>
-      <Text size={6} fontWeight="bold" lineHeight={3} className={classes.header}>
+      <Text size={6} fontWeight="bold" lineHeight={3}>
         <FormattedMessage id="Yy/yDL" defaultMessage="Reset password" />
       </Text>
-      <Text>
+      <Text display="block" marginTop={4}>
         <FormattedMessage
           id="2ob30/"
           defaultMessage="Success! In a few minutes you’ll receive a message with instructions on how to reset your password."
@@ -30,11 +26,11 @@ const ResetPasswordSuccessPage: React.FC<ResetPasswordSuccessPageProps> = props
       </Text>
       <FormSpacer />
       <Button
-        className={classes.submit}
         variant="primary"
         onClick={onBack}
         type="submit"
         data-test-id="back-to-login-button"
+        width="100%"
       >
         <FormattedMessage id="2oyWT9" defaultMessage="Back to login" description="button" />
       </Button>
diff --git a/src/auth/components/styles.ts b/src/auth/components/styles.ts
index 5f8c5b6a488..0440c7ebe7c 100644
--- a/src/auth/components/styles.ts
+++ b/src/auth/components/styles.ts
@@ -5,18 +5,11 @@ const useStyles = makeStyles(
     arrow: {
       transform: "rotate(180deg)",
     },
-    backBtn: {
-      marginBottom: theme.spacing(3),
-    },
     buttonContainer: {
       display: "flex",
       justifyContent: "flex-end",
       width: "100%",
     },
-    header: {
-      fontWeight: 700,
-      marginBottom: theme.spacing(2),
-    },
     link: {
       color: theme.palette.primary.main,
       cursor: "pointer",
@@ -34,16 +27,6 @@ const useStyles = makeStyles(
     loginButton: {
       width: "100%",
     },
-    panel: {
-      "& span": {
-        color: theme.palette.error.contrastText,
-      },
-      ...theme.typography.body1,
-      background: theme.palette.alert.paper.error,
-      borderRadius: 8,
-      marginBottom: theme.spacing(2),
-      padding: theme.spacing(2.5),
-    },
     passwordWrapper: {
       position: "relative",
       width: "100%",
@@ -53,9 +36,6 @@ const useStyles = makeStyles(
       top: 6,
       right: 8,
     },
-    submit: {
-      width: "100%",
-    },
   }),
   { name: "Login" },
 );
diff --git a/src/components/ErrorPage/ErrorPage.tsx b/src/components/ErrorPage/ErrorPage.tsx
index e1a7aa17812..f6210a9b88a 100644
--- a/src/components/ErrorPage/ErrorPage.tsx
+++ b/src/components/ErrorPage/ErrorPage.tsx
@@ -2,14 +2,12 @@
 import notFoundImage from "@assets/images/what.svg";
 import useAppState from "@dashboard/hooks/useAppState";
 import useNavigator from "@dashboard/hooks/useNavigator";
-import { Button } from "@saleor/macaw-ui";
-import { Text } from "@saleor/macaw-ui-next";
+import { Box, Button, sprinkles, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import SVG from "react-inlinesvg";
 import { FormattedMessage } from "react-intl";
 
 import messages from "./messages";
-import useStyles from "./styles";
 
 export interface ErrorPageProps {
   onBack: () => void;
@@ -17,7 +15,6 @@ export interface ErrorPageProps {
 }
 
 const ErrorPage: React.FC<ErrorPageProps> = ({ onBack, onRefresh }) => {
-  const classes = useStyles();
   const navigate = useNavigator();
   const [appState, dispatchAppState] = useAppState();
   const handleOnBack = () => {
@@ -33,42 +30,67 @@ const ErrorPage: React.FC<ErrorPageProps> = ({ onBack, onRefresh }) => {
   const errorTrackingId = appState.error?.type === "unhandled" ? appState.error.id : null;
 
   return (
-    <div className={classes.root}>
-      <div className={classes.container}>
-        <SVG className={classes.notFoundImage} src={notFoundImage} />
-        <div className={classes.innerContainer}>
+    <Box alignItems="center" display="flex" height="100vh">
+      <Box
+        display="grid"
+        gridTemplateColumns={{
+          mobile: 1,
+          tablet: 1,
+          desktop: 2,
+        }}
+        __margin="0 auto"
+        gap={4}
+        padding={4}
+      >
+        <SVG className={sprinkles({ width: "100%" })} src={notFoundImage} />
+        <Box
+          display="flex"
+          flexDirection="column"
+          justifyContent="center"
+          textAlign={{
+            mobile: "center",
+            tablet: "center",
+            desktop: "left",
+          }}
+        >
           <div>
-            <Text className={classes.header} size={11} fontWeight="bold">
+            <Text size={11} fontWeight="bold">
               <FormattedMessage {...messages.header} />
             </Text>
-            <Text display="block">
+            <Text display="block" marginTop={4}>
               <FormattedMessage {...messages.content} />
             </Text>
             {!!errorTrackingId && (
-              <div>
-                <Text size={2} fontWeight="light" color="default2" className={classes.errorId}>
+              <Box marginTop={4}>
+                <Text
+                  size={2}
+                  fontWeight="medium"
+                  color="default2"
+                  marginTop={4}
+                  textTransform="uppercase"
+                >
                   Error ID
                 </Text>
-                <Text size={4} fontWeight="regular">
+                <Text size={4} fontWeight="regular" display="block">
                   {errorTrackingId}
                 </Text>
-              </div>
+              </Box>
             )}
           </div>
-          <div className={classes.buttonContainer}>
+          <Box marginTop={4} display="flex" flexDirection="row" alignItems="center" gap={2}>
             <Button variant="primary" onClick={handleOnBack}>
               <FormattedMessage {...messages.btnDashboard} />
             </Button>
-            <div className={classes.conjunction}>
+            <Box display="inline-block" marginX={1}>
               <FormattedMessage {...messages.or} />
-            </div>
+            </Box>
             <Button variant="secondary" onClick={onRefresh}>
               <FormattedMessage {...messages.btnRefresh} />
             </Button>
-          </div>
-        </div>
-      </div>
-    </div>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
   );
 };
 
diff --git a/src/components/ErrorPage/styles.ts b/src/components/ErrorPage/styles.ts
deleted file mode 100644
index 302910f43bf..00000000000
--- a/src/components/ErrorPage/styles.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { makeStyles } from "@saleor/macaw-ui";
-
-const useStyles = makeStyles(
-  theme => ({
-    buttonContainer: {
-      marginTop: theme.spacing(2),
-    },
-    container: {
-      [theme.breakpoints.down("sm")]: {
-        gridTemplateColumns: "1fr",
-        padding: theme.spacing(3),
-        width: "100%",
-      },
-      display: "grid",
-      gridTemplateColumns: "1fr 487px",
-      margin: "0 auto",
-      gap: theme.spacing(5),
-      width: `calc(480px * 2 + ${theme.spacing(5)})`,
-    },
-    conjunction: {
-      display: "inline-block",
-      margin: theme.spacing(0, 1),
-    },
-    errorId: {
-      marginTop: theme.spacing(3),
-      letterSpacing: "0.1rem",
-      textTransform: "uppercase",
-      fontWeight: 500,
-    },
-    innerContainer: {
-      [theme.breakpoints.down("sm")]: {
-        order: 1,
-        textAlign: "center",
-      },
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-    },
-    notFoundImage: {
-      width: "100%",
-    },
-    root: {
-      alignItems: "center",
-      display: "flex",
-      height: "100vh",
-    },
-    header: {
-      marginBottom: theme.spacing(2),
-    },
-  }),
-  { name: "ErrorPage" },
-);
-
-export default useStyles;