Added style for authenticator

src/App.tsx

 import Router from "./routes";
 import ThemeProvider from "./theme";
-
 import { Auth } from "./Authenticator";
 
 export default function App() {

src/Authenticator.tsx

-import { Authenticator } from "@aws-amplify/ui-react";
+import {
+  Authenticator,
+  Theme,
+  ThemeProvider,
+  useTheme,
+} from "@aws-amplify/ui-react";
 import "@aws-amplify/ui-react/styles.css";
-import Button from "@mui/material/Button";
 import { ReactNode } from "react";
+import styled from "@emotion/styled";
+
+import palette from "./theme/palette";
 
 type Props = {
   children: ReactNode;
 };
 
+const CenteredAuthenticator = styled(Authenticator)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+`;
+
 export function Auth({ children }: Props) {
+  const { tokens } = useTheme();
+
+  const theme: Theme = {
+    name: "Auth Theme",
+    tokens: {
+      colors: {
+        background: {
+          secondary: {
+            value: palette.light.primary.main,
+          },
+        },
+        font: {
+          interactive: {
+            value: palette.light.primary.main,
+          },
+        },
+        brand: {
+          primary: {
+            "80": palette.light.primary.main,
+            "90": palette.light.primary.light,
+          },
+        },
+      },
+      components: {
+        tabs: {
+          item: {
+            _focus: {
+              color: {
+                value: palette.light.primary.main,
+              },
+            },
+            _hover: {
+              color: {
+                value: tokens.colors.white.value,
+              },
+            },
+            _active: {
+              color: {
+                value: palette.light.primary.main,
+              },
+            },
+          },
+        },
+      },
+    },
+  };
+
   return (
-    <Authenticator>
-      {({ user }) => {
-        return (
-          <div>
-            {children}
-            {/* <Button
-              variant="contained"
-              onClick={signOut}
-              sx={{ position: "fixed", top: "100px", right: "20px" }}
-            >
-              Sign out
-            </Button> */}
-          </div>
-        );
-      }}
-    </Authenticator>
+    <ThemeProvider theme={theme}>
+      <CenteredAuthenticator>{children}</CenteredAuthenticator>
+    </ThemeProvider>
   );
 }