Me when formatting problems

app/routes/proj-disp.tsx

@@ -1,6 +1,8 @@
 import {
   Card,
+  CardBody,
   CardFooter,
+  CardHeader,
   Container,
   Divider,
   Heading,
@@ -51,16 +53,14 @@ export default function () {
               borderRadius="36px"
               src={`/files/${project.image}`}
             />
-            <Stack mb="8" mt="6" spacing="3">
-              <b>
-                <Heading size="md">
-                  {project.name} ({project.timespan})
-                </Heading>
-              </b>
+            <CardHeader>
+              {project.name} ({project.timespan})
+            </CardHeader>
+            <CardBody>
               <Text>Time Span: {project.timespan}</Text>
               <br />
               <Text>{project.description}</Text>
-            </Stack>
+            </CardBody>
             <Divider />
             <CardFooter gap="16px" justifyContent="center">
               {project.work_link ? (