Style top section style of battlesuit show page and weapon show page

src/pages/honkai3rd/battlesuits/[battlesuitId].tsx

@@ -41,16 +41,9 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
 
         <Heading as='h1'>{battlesuit.name}</Heading>
 
-        <Card
+        <Box mb={3}>
-          sx={{
-            overflow: 'hidden',
-          }}
-          mb={3}
-        >
-          <Box sx={{ borderBottom: 'default' }}>
           <Box
             sx={{
-                margin: '0 auto',
               position: 'relative',
               overflow: 'hidden',
               width: '100%',
@@ -67,6 +60,12 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
           </Box>
         </Box>
 
+        <Card
+          sx={{
+            overflow: 'hidden',
+          }}
+          mb={3}
+        >
           <Box p={2} sx={{ borderBottom: 'default' }}>
             <PageLink
               href={{

src/pages/honkai3rd/weapons/[weaponId].tsx

@@ -5,6 +5,7 @@ import SquareImageBox from '../../../components/atoms/SquareImageBox'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
 import { WeaponData } from '../../../lib/honkai3rd/weapons'
+import { capitalize } from '../../../lib/string'
 import {
   getWeaponById,
   listWeapons,
@@ -41,12 +42,17 @@ const WeaponShowPage = ({ weapon }: WeaponShowPageProps) => {
           />
         </Box>
 
-        <Box mb={3}>
+        <Card mb={3}>
-          <Box>{'⭐'.repeat(weapon.rarity)}</Box>
+          <Box p={2} sx={{ borderBottom: 'default' }}>
-          <Box>
+            {capitalize(weapon.category)}
+          </Box>
+          <Box p={2} sx={{ borderBottom: 'default' }}>
+            {'⭐'.repeat(weapon.rarity)}
+          </Box>
+          <Box p={2}>
             ATK : {weapon.atk} / CRT : {weapon.crt}
           </Box>
-        </Box>
+        </Card>
 
         <Box>
           {weapon.skills.map((skill) => {