diff --git a/src/components/skillparam/index.tsx b/src/components/skillparam/index.tsx
index 558c2f6..ce2cbaa 100644
--- a/src/components/skillparam/index.tsx
+++ b/src/components/skillparam/index.tsx
@@ -13,12 +13,17 @@ type Props = {
 const SkillParam = ({skillParam}: Props) => {
   const {t} = useTranslation();
   const {colors} = useTheme();
+  const description =
+    (skillParam.name ? `${skillParam.name?.en || skillParam.name?.ja}\n` : '') +
+    (Array.isArray(skillParam.description)
+      ? skillParam.description.map(d => d.en || d.ja).join('\n')
+      : skillParam.description
+      ? skillParam.description?.en || skillParam.description?.ja
+      : '');
 
   return (
     <>
-      <View className="h-3" />
-      <Divider />
-      <View className="h-3" />
+      <Divider className="my-3" />
       {skillParam.type === 'fieldEffect' && (
         <>
           <Text variant="bodyMedium">{t('stage-effect')}</Text>
@@ -37,7 +42,7 @@ const SkillParam = ({skillParam}: Props) => {
         />
         <View className="flex-1">
           <Text variant="bodyMedium">
-            {skillParam.description?.en || skillParam.description?.ja}
+            {description}
             {skillParam.descriptionExtra && (
               <Text className="text-red-500" variant="bodyMedium">
                 {` (${
diff --git a/src/screens/stagegirldetail/index.tsx b/src/screens/stagegirldetail/index.tsx
index 5001aca..107c421 100644
--- a/src/screens/stagegirldetail/index.tsx
+++ b/src/screens/stagegirldetail/index.tsx
@@ -11,8 +11,8 @@ import {useTranslation} from 'react-i18next';
 import {Image, View} from 'react-native';
 import FastImage from 'react-native-fast-image';
 import {
-  Button,
   DataTable,
+  SegmentedButtons,
   Surface,
   Text,
   TouchableRipple,
@@ -27,7 +27,9 @@ const StageGirlDetailScreen = ({
   const [loading, setLoading] = useState(true);
   const [dress, setDress] = useState<TDress | null>(null);
   const [character, setCharater] = useState<TChara | null>(null);
-  const [tabIndex, setTabIndex] = useState(0);
+  const [tabIndex, setTabIndex] = useState<'stats' | 'info' | 'act_skill'>(
+    'stats',
+  );
 
   useEffect(() => {
     const loadData = async () => {
@@ -67,10 +69,6 @@ const StageGirlDetailScreen = ({
       id: character.basicInfo.charaID,
     });
 
-  const onPressTabStats = () => setTabIndex(0);
-  const onPressTabInfo = () => setTabIndex(1);
-  const onPressTabSkill = () => setTabIndex(2);
-
   return (
     <BaseScreen hasData={!!dress} loading={loading}>
       {dress && (
@@ -111,7 +109,7 @@ const StageGirlDetailScreen = ({
             />
           </View>
           <View className="py-3">
-            <Surface className="my-1 rounded p-3" elevation={3}>
+            <Surface className="my-1 rounded-xl p-3" elevation={3}>
               <View className="flex-row justify-between">
                 <Text variant="bodySmall">{t('cost')}</Text>
                 <Text>{dress.base.cost}</Text>
@@ -129,7 +127,7 @@ const StageGirlDetailScreen = ({
                   <Text>{releasedWW.format('LLLL')}</Text>
                 </View>
               )}
-              <View className="flex-row justify-between">
+              <View className="flex-row items-center justify-between">
                 <Text variant="bodySmall">{t('attack-type')}</Text>
                 <Image
                   className="h-[22.4px] w-[63px]"
@@ -138,33 +136,20 @@ const StageGirlDetailScreen = ({
               </View>
             </Surface>
           </View>
-          <View className="flex-row">
-            <Button
-              className="flex-1"
-              mode={tabIndex === 0 ? 'contained' : 'text'}
-              uppercase={false}
-              onPress={onPressTabStats}>
-              <Text>{t('stats')}</Text>
-            </Button>
-            <Button
-              className="flex-1"
-              mode={tabIndex === 1 ? 'contained' : 'text'}
-              uppercase={false}
-              onPress={onPressTabInfo}>
-              <Text>{t('info')}</Text>
-            </Button>
-            <Button
-              className="flex-1"
-              mode={tabIndex === 2 ? 'contained' : 'text'}
-              uppercase={false}
-              onPress={onPressTabSkill}>
-              <Text>{t('act_skill')}</Text>
-            </Button>
-          </View>
-          {tabIndex === 0 && (
+          <SegmentedButtons
+            buttons={[
+              {value: 'stats', label: t('stats')},
+              {value: 'info', label: t('info')},
+              {value: 'act_skill', label: t('act_skill')},
+            ]}
+            value={tabIndex}
+            // @ts-ignore type of value
+            onValueChange={setTabIndex}
+          />
+          {tabIndex === 'stats' && (
             <View className="py-3">
-              <Surface className="my-1 rounded" elevation={3}>
-                <DataTable>
+              <Surface className="my-1 rounded-xl" elevation={3}>
+                <DataTable className="overflow-hidden rounded-xl">
                   <DataTable.Row>
                     <DataTable.Cell className="flex-[2]">
                       {t('power-score-total')}
@@ -205,9 +190,9 @@ const StageGirlDetailScreen = ({
               </Surface>
             </View>
           )}
-          {tabIndex === 1 && (
+          {tabIndex === 'info' && (
             <View className="py-3">
-              <Surface className="my-1 space-y-3 rounded p-3" elevation={3}>
+              <Surface className="my-1 space-y-3 rounded-xl p-3" elevation={3}>
                 <View>
                   <Text variant="bodySmall">{t('profile')}</Text>
                   <Text variant="bodyMedium">
@@ -230,7 +215,7 @@ const StageGirlDetailScreen = ({
               </Surface>
             </View>
           )}
-          {tabIndex === 2 && (
+          {tabIndex === 'act_skill' && (
             <>
               <View className="py-3">
                 <Text className="text-center" variant="titleMedium">
@@ -252,7 +237,7 @@ const StageGirlDetailScreen = ({
                 <Text className="text-center" variant="titleMedium">
                   {t('unit-skill')}
                 </Text>
-                <Surface className="my-1 rounded p-3" elevation={3}>
+                <Surface className="my-1 rounded-xl p-3" elevation={3}>
                   <View className="flex-row space-x-3">
                     <FastImage
                       className="h-10 w-10"
@@ -277,7 +262,7 @@ const StageGirlDetailScreen = ({
                   return (
                     <Surface
                       key={`autoSkill${index}`}
-                      className="my-1 rounded p-3"
+                      className="my-1 rounded-xl p-3"
                       elevation={3}>
                       <Text variant="bodyMedium">
                         {autoSkill.type.en || autoSkill.type.ja}
@@ -298,7 +283,7 @@ const StageGirlDetailScreen = ({
                 <Text className="text-center" variant="titleMedium">
                   {t('finishing-act')}
                 </Text>
-                <Surface className="my-1 rounded p-3" elevation={3}>
+                <Surface className="my-1 rounded-xl p-3" elevation={3}>
                   <View className="flex-row space-x-3">
                     <FastImage
                       className="h-10 w-10"
diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts
index 90bbf18..7e63641 100644
--- a/src/typings/index.d.ts
+++ b/src/typings/index.d.ts
@@ -342,11 +342,12 @@ type TBasicStat = {
 
 type TSkillParam = {
   accuracy?: number | null;
-  description: TLanguageObject | null;
+  description: TLanguageObject[] | TLanguageObject | null;
   descriptionExtra: TLanguageObject | null;
   duration: TLanguageObject | null;
   hits: number | null;
   icon: number;
+  name: TLanguageObject | null;
   target: TLanguageObject;
   type: TSkillType;
 };