diff --git a/src/client/component/contentinfo.tsx b/src/client/component/contentinfo.tsx
index a88c61f..12a45c9 100644
--- a/src/client/component/contentinfo.tsx
+++ b/src/client/component/contentinfo.tsx
@@ -41,6 +41,7 @@ const useStyles = makeStyles((theme: Theme) => ({
         display: 'grid',
         gridTemplateColumns: '100px auto',
         overflowY: 'hidden',
+        alignItems: 'baseline',
     },
     short_subinfoContainer:{
         [theme.breakpoints.down("md")]:{
@@ -96,9 +97,6 @@ export const ContentInfo = (props: {
         classes.thumbnail_content;
     const subinfoContainer = props.short ? classes.short_subinfoContainer :
         classes.subinfoContainer;
-    let allTag = document.tags;
-    const artists = allTag.filter(x => x.startsWith("artist:")).map(x => x.slice(7));
-    allTag = allTag.filter(x => !x.startsWith("artist:"));
     return (<Paper className={propclasses.root || rootName} elevation={4}>
         <Link className={propclasses.thumbnail_anchor || thumbnail_anchor} component={RouterLink} to={{
             pathname:makeContentReaderUrl(document.id)
@@ -119,18 +117,34 @@ export const ContentInfo = (props: {
                 {props.short ? (<Box className={propclasses.tag_list || classes.tag_list}>{document.tags.map(x => 
                                 (<TagChip key={x} label={x} clickable tagname={x} size="small"></TagChip>)
                             )}</Box>) : (
-                    <>
-                        <Typography variant='subtitle1'>Artist</Typography>
-                        <Box style={{ alignSelf: "center" }}>{artists.join(", ")}</Box>
-                        <Typography variant='subtitle1'>Tags</Typography>
-                        <Box className={propclasses.tag_list || classes.tag_list}>
-                            {allTag.map(x => {
-                                return (<TagChip key={x} label={x} clickable tagname={x} size="small"></TagChip>);
-                            })}
-                        </Box>
-                    </>)
+                    <MangaDetailTag tags={document.tags} classes={({tag_list:classes.tag_list})}></MangaDetailTag>)
                 }
             </Box>
         </Box>
     </Paper>);
+}
+
+function MangaDetailTag(prop:{tags:string[],classes:{
+    tag_list:string
+}}){
+    let allTag = prop.tags;
+    const tagKind = ["artist","group","series","type","character"];
+    let tagTable:{[kind:string]:string[]} = {};
+    for(const kind of tagKind){
+        const tags = allTag.filter(x => x.startsWith(kind+":")).map(x => x.slice(kind.length+1));
+        tagTable[kind] = tags;
+        allTag = allTag.filter(x => !x.startsWith(kind+":"));
+    }
+    return (<React.Fragment>
+        {tagKind.map(key=>(
+            <React.Fragment key={key}>
+                <Typography variant='subtitle1'>{key}</Typography>
+                <Box>{tagTable[key].length !== 0 ? tagTable[key].join(", ") : "N/A"}</Box>
+            </React.Fragment>
+        ))}
+        <Typography variant='subtitle1'>Tags</Typography>
+        <Box className={prop.classes.tag_list}>
+            {allTag.map(x => (<TagChip key={x} label={x} clickable tagname={x} size="small"></TagChip>))}
+        </Box>
+    </React.Fragment>);
 }
\ No newline at end of file