Oh yeah I forgot the other half

app/routes/hammer.tsx

@@ -1,4 +1,6 @@
 import {
+  Alert,
+  AlertIcon,
   Box,
   Button,
   Card,
@@ -173,7 +175,8 @@ export default function () {
           Search
         </Button>
       </HStack>
-      <Card maxW="sm" visibility={visible ? "visible" : "hidden"}>
+      <Center mb={3} mt={3}>
+        <Card maxW="md" visibility={visible ? "visible" : "hidden"}>
           <CardBody>
             <Image mb="16" src={avatarUrl} />
             <Stack divider={<StackDivider />} spacing="6">
@@ -198,6 +201,7 @@ export default function () {
             </Stack>
           </CardBody>
         </Card>
+      </Center>
       {history}
     </Container>
   );

components/Success.tsx

@@ -1,4 +1,4 @@
-import { Container, Flex, Heading, Spacer, Text } from "@chakra-ui/react";
+import { Center, Container, Flex, Heading, Spacer, Text } from "@chakra-ui/react";
 
 export default function ({
   heading,
@@ -29,10 +29,12 @@ export default function ({
         </svg>
         <Spacer />
       </Flex>
+      <Center>
       <br />
       <Heading>{heading}</Heading>
       <br />
       <Text>{message}</Text>
+      </Center>
     </Container>
   );
 }