diff --git a/src/components/Auth/AuthLayout.tsx b/src/components/Auth/AuthLayout.tsx
index 57b208f4..981502cb 100644
--- a/src/components/Auth/AuthLayout.tsx
+++ b/src/components/Auth/AuthLayout.tsx
@@ -88,6 +88,7 @@ export default function AuthLayout({ children, loading }: IAuthLayoutProps) {
             maxWidth: 400,
             width: "100%",
             p: 4,
+            boxShadow: 4,
 
             "--spacing-contents": (theme) => theme.spacing(4),
             "& > * + *": { marginTop: "var(--spacing-contents)" },
diff --git a/src/components/Auth/FirebaseUi.tsx b/src/components/Auth/FirebaseUi.tsx
index 312c3bbd..2782fd7b 100644
--- a/src/components/Auth/FirebaseUi.tsx
+++ b/src/components/Auth/FirebaseUi.tsx
@@ -60,7 +60,15 @@ const useStyles = makeStyles((theme) =>
           borderRadius: (theme.shape.borderRadius as number) * (48 / 32),
           ...theme.typography.button,
         },
-        "& .mdl-button--raised": { boxShadow: "none" },
+        "& .mdl-button--raised": {
+          boxShadow: `0 -1px 0 0 rgba(0, 0, 0, 0.12) inset, ${theme.shadows[2]}`,
+          "&:hover": {
+            boxShadow: `0 -1px 0 0 rgba(0, 0, 0, 0.12) inset, ${theme.shadows[4]}`,
+          },
+          "&:active, &:focus": {
+            boxShadow: `0 -1px 0 0 rgba(0, 0, 0, 0.12) inset, ${theme.shadows[8]}`,
+          },
+        },
         "& .mdl-card": {
           boxShadow: "none",
           minHeight: 0,