diff --git a/src/client/component/contentinfo.tsx b/src/client/component/contentinfo.tsx
index 326ca89..4d9a1a8 100644
--- a/src/client/component/contentinfo.tsx
+++ b/src/client/component/contentinfo.tsx
@@ -2,10 +2,11 @@ import React, { } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { Document } from '../accessor/document';
 
-import { Link, Paper, Theme, Box, useTheme, Typography, Grid } from '@mui/material';
+import { Link, Paper, Theme, Box, useTheme, Typography, Grid, Button } from '@mui/material';
 import { ThumbnailContainer } from '../page/reader/reader';
 import { TagChip } from '../component/tagchip';
 
+import DocumentAccessor from '../accessor/document';
 
 export const makeContentInfoUrl = (id: number) => `/doc/${id}`;
 export const makeContentReaderUrl = (id: number) => `/doc/${id}/reader`;
@@ -117,18 +118,35 @@ 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>) : (
-                    <ComicDetailTag tags={document.tags} path={document.basepath+"/"+document.filename}/* classes={({tag_list:classes.tag_list})}*/ ></ComicDetailTag>)
+                    <ComicDetailTag tags={document.tags} path={document.basepath+"/"+document.filename}
+                    createdAt={document.created_at}
+                    deletedAt={document.deleted_at != null ? document.deleted_at : undefined}
+                    /* classes={({tag_list:classes.tag_list})}*/ ></ComicDetailTag>)
                 }
             </Box>
+            {document.deleted_at != null &&
+            <Button onClick={()=>{documentDelete(document.id);}}>Delete</Button>
+            }
         </Box>
     </Paper>);
 }
+async function documentDelete(id: number){
+    const t = await DocumentAccessor.del(id);
+    if(t){
+        alert("document deleted!");
+    }
+    else{
+        alert("document already deleted.");
+    }
+}
 
 function ComicDetailTag(prop: {
     tags: string[];/*classes:{
     tag_list:string
 }*/ 
     path?: string;
+    createdAt?: number;
+    deletedAt?: number;
 }) {
     let allTag = prop.tags;
     const tagKind = ["artist", "group", "series", "type", "character"];
@@ -155,6 +173,18 @@ function ComicDetailTag(prop: {
                 <Box>{prop.path}</Box>
             </Grid></>
         }
+        { prop.createdAt != undefined && <><Grid item xs={3}>
+            <Typography variant='subtitle1'>CreatedAt</Typography>
+        </Grid><Grid item xs={9}>
+                <Box>{new Date(prop.createdAt).toUTCString()}</Box>
+            </Grid></>
+        }
+        { prop.deletedAt != undefined && <><Grid item xs={3}>
+            <Typography variant='subtitle1'>DeletedAt</Typography>
+        </Grid><Grid item xs={9}>
+                <Box>{new Date(prop.deletedAt).toUTCString()}</Box>
+            </Grid></>
+        }
         <Grid item xs={3}>
         <Typography variant='subtitle1'>Tags</Typography>
         </Grid>