diff --git a/src/auth/components/Layout.tsx b/src/auth/components/Layout.tsx
new file mode 100644
index 000000000..3d217293b
--- /dev/null
+++ b/src/auth/components/Layout.tsx
@@ -0,0 +1,100 @@
+import { Theme } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/styles";
+import React from "react";
+import SVG from "react-inlinesvg";
+
+import backgroundArt from "@assets/images/login-background.svg";
+import saleorDarkLogo from "@assets/images/logo-dark.svg";
+import saleorLightLogo from "@assets/images/logo-light.svg";
+import useTheme from "@saleor/hooks/useTheme";
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    logo: {
+      "& svg": {
+        display: "block",
+        height: 40,
+        marginBottom: theme.spacing.unit * 4
+      }
+    },
+    mainPanel: {
+      [theme.breakpoints.down("sm")]: {
+        padding: theme.spacing.unit * 2
+      },
+      background: theme.palette.background.paper,
+      display: "flex",
+      flexDirection: "column",
+      height: "100vh",
+      justifyContent: "center",
+      padding: theme.spacing.unit * 6,
+      width: "100%"
+    },
+    mainPanelContent: {
+      [theme.breakpoints.up("xs")]: {
+        width: "100%"
+      },
+      [theme.breakpoints.up("sm")]: {
+        width: 328
+      },
+      "@media (min-width: 1440px)": {
+        width: 464
+      },
+      margin: "auto",
+      width: "100%"
+    },
+    root: {
+      [theme.breakpoints.up("lg")]: {
+        gridTemplateColumns: "376px 1fr"
+      },
+      "@media (min-width: 1440px)": {
+        gridTemplateColumns: "520px 1fr"
+      },
+      display: "grid",
+      gridTemplateColumns: "1fr",
+      height: "100vh",
+      overflow: "hidden",
+      width: "100vw"
+    },
+    sidebar: {
+      [theme.breakpoints.up("lg")]: {
+        display: "block"
+      },
+      display: "none"
+    },
+    sidebarArt: {
+      "& svg": {
+        width: "100%"
+      }
+    }
+  }),
+  {
+    name: "Layout"
+  }
+);
+
+const Layout: React.FC = props => {
+  const { children } = props;
+
+  const classes = useStyles(props);
+  const { isDark } = useTheme();
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.sidebar}>
+        <SVG className={classes.sidebarArt} src={backgroundArt} />
+      </div>
+      <div className={classes.mainPanel}>
+        <div className={classes.mainPanelContent}>
+          <SVG
+            className={classes.logo}
+            src={isDark ? saleorDarkLogo : saleorLightLogo}
+          />
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Layout.displayName = "Layout";
+export default Layout;
diff --git a/src/auth/components/LoginPage/LoginPage.tsx b/src/auth/components/LoginPage/LoginPage.tsx
index c361257d1..76c801638 100644
--- a/src/auth/components/LoginPage/LoginPage.tsx
+++ b/src/auth/components/LoginPage/LoginPage.tsx
@@ -8,16 +8,12 @@ import {
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
-import SVG from "react-inlinesvg";
 import { FormattedMessage, useIntl } from "react-intl";
+import Layout from "../Layout";
 
-import backgroundArt from "@assets/images/login-background.svg";
-import saleorDarkLogo from "@assets/images/logo-dark.svg";
-import saleorLightLogo from "@assets/images/logo-light.svg";
 import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
 import Form from "@saleor/components/Form";
 import { FormSpacer } from "@saleor/components/FormSpacer";
-import useTheme from "@saleor/hooks/useTheme";
 import { commonMessages } from "@saleor/intl";
 
 export interface FormData {
@@ -41,38 +37,6 @@ const styles = (theme: Theme) =>
     loginButton: {
       width: 140
     },
-    logo: {
-      "& svg": {
-        display: "block",
-        height: 40,
-        marginBottom: theme.spacing.unit * 4
-      }
-    },
-    mainPanel: {
-      [theme.breakpoints.down("sm")]: {
-        padding: theme.spacing.unit * 2
-      },
-      background: theme.palette.background.paper,
-      display: "flex",
-      flexDirection: "column",
-      height: "100vh",
-      justifyContent: "center",
-      padding: theme.spacing.unit * 6,
-      width: "100%"
-    },
-    mainPanelContent: {
-      [theme.breakpoints.up("xs")]: {
-        width: "100%"
-      },
-      [theme.breakpoints.up("sm")]: {
-        width: 328
-      },
-      "@media (min-width: 1440px)": {
-        width: 464
-      },
-      margin: "auto",
-      width: "100%"
-    },
     panel: {
       "& span": {
         color: theme.palette.error.contrastText
@@ -81,30 +45,6 @@ const styles = (theme: Theme) =>
       borderRadius: theme.spacing.unit,
       marginBottom: theme.spacing.unit * 3,
       padding: theme.spacing.unit * 1.5
-    },
-    root: {
-      [theme.breakpoints.up("lg")]: {
-        gridTemplateColumns: "376px 1fr"
-      },
-      "@media (min-width: 1440px)": {
-        gridTemplateColumns: "520px 1fr"
-      },
-      display: "grid",
-      gridTemplateColumns: "1fr",
-      height: "100vh",
-      overflow: "hidden",
-      width: "100vw"
-    },
-    sidebar: {
-      [theme.breakpoints.up("lg")]: {
-        display: "block"
-      },
-      display: "none"
-    },
-    sidebarArt: {
-      "& svg": {
-        width: "100%"
-      }
     }
   });
 
@@ -117,7 +57,6 @@ export interface LoginCardProps extends WithStyles<typeof styles> {
 
 const LoginCard = withStyles(styles, { name: "LoginCard" })(
   ({ classes, error, disableLoginButton, onSubmit }: LoginCardProps) => {
-    const { isDark } = useTheme();
     const intl = useIntl();
 
     return (
@@ -126,82 +65,71 @@ const LoginCard = withStyles(styles, { name: "LoginCard" })(
         onSubmit={onSubmit}
       >
         {({ change: handleChange, data, submit: handleSubmit }) => (
-          <div className={classes.root}>
-            <div className={classes.sidebar}>
-              <SVG className={classes.sidebarArt} src={backgroundArt} />
-            </div>
-            <div className={classes.mainPanel}>
-              <div className={classes.mainPanelContent}>
-                <SVG
-                  className={classes.logo}
-                  src={isDark ? saleorDarkLogo : saleorLightLogo}
-                />
-                {error && (
-                  <div className={classes.panel}>
-                    <Typography variant="caption">
-                      <FormattedMessage defaultMessage="Sorry, your username and/or password are incorrect. Please try again." />
-                    </Typography>
-                  </div>
-                )}
-                <TextField
-                  autoFocus
-                  fullWidth
-                  autoComplete="username"
-                  label={intl.formatMessage(commonMessages.email)}
-                  name="email"
-                  onChange={handleChange}
-                  value={data.email}
-                  inputProps={{
-                    "data-tc": "email"
-                  }}
-                />
-                <FormSpacer />
-                <TextField
-                  fullWidth
-                  autoComplete="current-password"
-                  label={intl.formatMessage({
-                    defaultMessage: "Password"
-                  })}
-                  name="password"
-                  onChange={handleChange}
-                  type="password"
-                  value={data.password}
-                  data-tc="password"
-                />
-                <FormSpacer />
-                <div className={classes.buttonContainer}>
-                  <ControlledCheckbox
-                    checked={data.rememberMe}
-                    label={intl.formatMessage({
-                      defaultMessage: "Remember me",
-                      description: "login"
-                    })}
-                    name="rememberMe"
-                    onChange={handleChange}
-                  />
-                  <FormSpacer />
-                  <Button
-                    className={classes.loginButton}
-                    color="primary"
-                    disabled={disableLoginButton}
-                    variant="contained"
-                    onClick={handleSubmit}
-                    type="submit"
-                    data-tc="submit"
-                  >
-                    <FormattedMessage
-                      defaultMessage="Login"
-                      description="button"
-                    />
-                  </Button>
-                </div>
-                {/* <FormSpacer />
-                <Typography className={classes.link}>
-                  {i18n.t("Reset your password")}
-                </Typography> */}
+          <Layout>
+            {error && (
+              <div className={classes.panel}>
+                <Typography variant="caption">
+                  <FormattedMessage defaultMessage="Sorry, your username and/or password are incorrect. Please try again." />
+                </Typography>
               </div>
+            )}
+            <TextField
+              autoFocus
+              fullWidth
+              autoComplete="username"
+              label={intl.formatMessage(commonMessages.email)}
+              name="email"
+              onChange={handleChange}
+              value={data.email}
+              inputProps={{
+                "data-tc": "email"
+              }}
+            />
+            <FormSpacer />
+            <TextField
+              fullWidth
+              autoComplete="current-password"
+              label={intl.formatMessage({
+                defaultMessage: "Password"
+              })}
+              name="password"
+              onChange={handleChange}
+              type="password"
+              value={data.password}
+              data-tc="password"
+            />
+            <FormSpacer />
+            <div className={classes.buttonContainer}>
+              <ControlledCheckbox
+                checked={data.rememberMe}
+                label={intl.formatMessage({
+                  defaultMessage: "Remember me",
+                  description: "login"
+                })}
+                name="rememberMe"
+                onChange={handleChange}
+              />
+              <FormSpacer />
+              <Button
+                className={classes.loginButton}
+                color="primary"
+                disabled={disableLoginButton}
+                variant="contained"
+                onClick={handleSubmit}
+                type="submit"
+                data-tc="submit"
+              >
+                <FormattedMessage defaultMessage="Login" description="button" />
+              </Button>
             </div>
-          </div>
+            <FormSpacer />
+            <Typography className={classes.link}>
+              <FormattedMessage
+                defaultMessage="Reset your password"
+                description="button"
+              />
+            </Typography>
+          </Layout>
         )}
       </Form>
     );
diff --git a/src/auth/components/ResetPasswordPage/ResetPasswordPage.stories.tsx b/src/auth/components/ResetPasswordPage/ResetPasswordPage.stories.tsx
new file mode 100644
index 000000000..ef17d5b28
--- /dev/null
+++ b/src/auth/components/ResetPasswordPage/ResetPasswordPage.stories.tsx
@@ -0,0 +1,9 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import Decorator from "@saleor/storybook//Decorator";
+import ResetPasswordPage from "./ResetPasswordPage";
+
+storiesOf("Views / Authentication / Reset password", module)
+  .addDecorator(Decorator)
+  .add("default", () => <ResetPasswordPage onSubmit={() => undefined} />);
diff --git a/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx b/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx
new file mode 100644
index 000000000..2bf0e43e6
--- /dev/null
+++ b/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx
@@ -0,0 +1,78 @@
+import Button from "@material-ui/core/Button";
+import { Theme } from "@material-ui/core/styles";
+import TextField from "@material-ui/core/TextField";
+import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@material-ui/styles";
+import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import Form from "@saleor/components/Form";
+import FormSpacer from "@saleor/components/FormSpacer";
+import { commonMessages } from "@saleor/intl";
+import Layout from "../Layout";
+
+const useStyles = makeStyles(
+  {
+    submit: {
+      width: "100%"
+    }
+  },
+  {
+    name: "ResetPasswordPage"
+  }
+);
+
+export interface ResetPasswordPageFormData {
+  email: string;
+}
+export interface ResetPasswordPageProps {
+  onSubmit: (data: ResetPasswordPageFormData) => void;
+}
+
+const ResetPasswordPage: React.FC<ResetPasswordPageProps> = props => {
+  const { onSubmit } = props;
+
+  const classes = useStyles(props);
+  const intl = useIntl();
+
+  return (
+    <Form initial={{ email: "" }} onSubmit={onSubmit}>
+      {({ change: handleChange, data, submit: handleSubmit }) => (
+        <Layout>
+          <Typography>
+            <FormattedMessage defaultMessage="Forgot your password? Don't worry, we'll reset it for you." />
+          </Typography>
+          <FormSpacer />
+          <TextField
+            autoFocus
+            fullWidth
+            autoComplete="username"
+            label={intl.formatMessage(commonMessages.email)}
+            name="email"
+            onChange={handleChange}
+            value={data.email}
+            inputProps={{
+              "data-tc": "email"
+            }}
+          />
+          <FormSpacer />
+          <Button
+            className={classes.submit}
+            color="primary"
+            variant="contained"
+            onClick={handleSubmit}
+            type="submit"
+          >
+            <FormattedMessage
+              defaultMessage="Send Instructions"
+              description="password reset, button"
+            />
+          </Button>
+        </Layout>
+      )}
+    </Form>
+  );
+};
+
+ResetPasswordPage.displayName = "ResetPasswordPage";
+export default ResetPasswordPage;
diff --git a/src/auth/components/ResetPasswordPage/index.ts b/src/auth/components/ResetPasswordPage/index.ts
new file mode 100644
index 000000000..e69de29bb