diff --git a/src/client/component/contentinfo.tsx b/src/client/component/contentinfo.tsx
new file mode 100644
index 0000000..2a8d4bf
--- /dev/null
+++ b/src/client/component/contentinfo.tsx
@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from 'react';
+import { Redirect, Route, Switch, useHistory, useRouteMatch, match as MatchType, Link as RouterLink } from 'react-router-dom';
+import ContentAccessor, { Content } from '../accessor/contents';
+import { LoadingCircle } from '../component/loading';
+import { Link, Paper, makeStyles, Theme, Box, useTheme, Typography } from '@material-ui/core';
+import { ThumbnailContainer } from '../page/reader/reader';
+import { TagChip } from '../component/tagchip';
+import { MangaReader } from '../page/reader/manga';
+
+export const makeContentInfoUrl = (id: number) => `/doc/${id}`;
+export const makeContentReaderUrl = (id: number) => `/doc/${id}/reader`;
+
+const useStyles = makeStyles((theme: Theme) => ({
+    root: {
+        display: "flex",
+        [theme.breakpoints.down("sm")]: {
+            flexDirection: "column",
+            alignItems: "center",
+        }
+    },
+    thumbnail_content: {
+        maxHeight: '400px',
+        maxWidth: 'min(400px, 100vw)',
+    },
+    tag_list: {
+        display: 'flex',
+        justifyContent: 'flex-start',
+        flexWrap: 'wrap',
+        overflowY: 'hidden',
+        '& > *': {
+            margin: theme.spacing(0.5),
+        },
+    },
+    title: {
+        marginLeft: theme.spacing(1),
+    },
+    InfoContainer: {
+        display: 'grid',
+        gridTemplateColumns: '100px auto',
+        overflowY: 'hidden',
+    }
+}))
+
+export const ContentInfo = (props: { content: Content, children?: React.ReactNode }) => {
+    const classes = useStyles();
+    const theme = useTheme();
+    const content = props?.content;
+    let allTag = content.tags;
+    const artists = allTag.filter(x => x.startsWith("artist:")).map(x => x.substr(7));
+    allTag = allTag.filter(x => !x.startsWith("artist:"));
+    return (<Paper className={classes.root}>
+        <Link component={RouterLink} to={makeContentReaderUrl(content.id)}>
+            <ThumbnailContainer content={content} className={classes.thumbnail_content}></ThumbnailContainer>
+        </Link>
+        <Box style={{ padding: theme.spacing(1) }}>
+            <Link variant='h5' color='inherit' component={RouterLink} to={makeContentReaderUrl(content.id)}
+                className={classes.title}>
+                {content.title}
+            </Link>
+            <Box className={classes.InfoContainer}>
+                <Typography variant='subtitle1'>Artist</Typography>
+                <Box style={{alignSelf:"center"}}>{artists.join(", ")}</Box>
+                <Typography variant='subtitle1'>Tags</Typography>
+                <Box className={classes.tag_list}>
+                    {allTag.map(x => {
+                        return (<TagChip key={x} label={x} clickable={true} tagname={x} size="small"></TagChip>);
+                    })}
+                </Box>
+            </Box>
+        </Box>
+    </Paper>);
+}
\ No newline at end of file
diff --git a/src/client/component/loading.tsx b/src/client/component/loading.tsx
index 3b4c169..b9a50fa 100644
--- a/src/client/component/loading.tsx
+++ b/src/client/component/loading.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {Box, CircularProgress} from '@material-ui/core';
 
 export const LoadingCircle = ()=>{
-    return (<div><Box>
+    return (<Box>
         <CircularProgress title="loading"/>
-        </Box></div>);
+        </Box>);
 }
\ No newline at end of file
diff --git a/src/client/component/mod.ts b/src/client/component/mod.ts
new file mode 100644
index 0000000..96ea18f
--- /dev/null
+++ b/src/client/component/mod.ts
@@ -0,0 +1,3 @@
+export * from './contentinfo';
+export * from './loading';
+export * from './tagchip';
\ No newline at end of file
diff --git a/src/client/page/contentinfo.tsx b/src/client/page/contentinfo.tsx
index f5d0622..32dd964 100644
--- a/src/client/page/contentinfo.tsx
+++ b/src/client/page/contentinfo.tsx
@@ -3,14 +3,13 @@ import { Redirect, Route, Switch, useHistory, useRouteMatch, match as MatchType,
 import ContentAccessor, { Content } from '../accessor/contents';
 import { LoadingCircle } from '../component/loading';
 import { Link, Paper, makeStyles, Theme, Box, useTheme, Typography } from '@material-ui/core';
-import { ThumbnailContainer } from '../presenter/presenter';
-import { TagChip } from '../component/tagchip';
-import { MangaReader } from '../presenter/manga';
+import { MangaReader } from './reader/manga';
+import { ContentInfo } from '../component/mod';
 
 export const makeContentInfoUrl = (id: number) => `/doc/${id}`;
 export const makeMangaReaderUrl = (id: number) => `/doc/${id}/reader`;
 
-type ContentInfoState = {
+type ContentState = {
     content: Content | undefined,
     notfound: boolean,
 }
@@ -22,7 +21,7 @@ export const ContentAbout = (prop: { match: MatchType }) => {
     }
     const m = /\/doc\/(\d+)/.exec(match.url);
     const id = m !== null ? Number.parseInt(m[1]) : NaN;
-    const [info, setInfo] = useState<ContentInfoState>({ content: undefined, notfound:false });
+    const [info, setInfo] = useState<ContentState>({ content: undefined, notfound:false });
     useEffect(() => {
         (async () => {
             if (!isNaN(id)) {
@@ -51,65 +50,4 @@ export const ContentAbout = (prop: { match: MatchType }) => {
             <div>404 Not Found invalid url : {prop.match.path}</div>
         </Route>
     </Switch>);
-}
-
-const useStyles = makeStyles((theme: Theme) => ({
-    root: {
-        display: "flex",
-        [theme.breakpoints.down("sm")]: {
-            flexDirection: "column",
-            alignItems: "center",
-        }
-    },
-    thumbnail_content: {
-        maxWidth: '300px',
-        maxHeight: '300px'
-    },
-    tag_list: {
-        display: 'flex',
-        justifyContent: 'flex-start',
-        flexWrap: 'wrap',
-        overflowY: 'hidden',
-        '& > *': {
-            margin: theme.spacing(0.5),
-        },
-    },
-    title: {
-        marginLeft: theme.spacing(1),
-    },
-    InfoContainer: {
-        display: 'grid',
-        gridTemplateColumns: '100px auto',
-        overflowY: 'hidden',
-    }
-}))
-
-export const ContentInfo = (props: { content: Content, children?: React.ReactNode }) => {
-    const classes = useStyles();
-    const theme = useTheme();
-    const content = props?.content;
-    let allTag = content.tags;
-    const artists = allTag.filter(x => x.startsWith("artist:")).map(x => x.substr(7));
-    allTag = allTag.filter(x => !x.startsWith("artist:"));
-    return (<Paper className={classes.root}>
-        <Link component={RouterLink} to={makeMangaReaderUrl(content.id)}>
-            <ThumbnailContainer content={content} className={classes.thumbnail_content}></ThumbnailContainer>
-        </Link>
-        <Box style={{ padding: theme.spacing(1) }}>
-            <Link variant='h5' color='inherit' component={RouterLink} to={makeMangaReaderUrl(content.id)}
-                className={classes.title}>
-                {content.title}
-            </Link>
-            <Box className={classes.InfoContainer}>
-                <Typography variant='subtitle1'>Artist</Typography>
-                <Box>{artists.join(", ")}</Box>
-                <Typography variant='subtitle1'>Tags</Typography>
-                <Box className={classes.tag_list}>
-                    {allTag.map(x => {
-                        return (<TagChip key={x} label={x} clickable={true} tagname={x} size="small"></TagChip>);
-                    })}
-                </Box>
-            </Box>
-        </Box>
-    </Paper>);
 }
\ No newline at end of file
diff --git a/src/client/page/gallery.tsx b/src/client/page/gallery.tsx
index 799a725..d93811a 100644
--- a/src/client/page/gallery.tsx
+++ b/src/client/page/gallery.tsx
@@ -5,7 +5,7 @@ import {useTheme, makeStyles, Theme} from '@material-ui/core/styles';
 import {Link as RouterLink} from 'react-router-dom';
 import {makeContentInfoUrl} from './contentinfo';
 import { LoadingCircle } from '../component/loading';
-import {ThumbnailContainer} from '../presenter/presenter';
+import {ThumbnailContainer} from './reader/reader';
 import {TagChip} from '../component/tagchip';
 
 const useStyles = makeStyles((theme:Theme)=>({
diff --git a/src/client/presenter/manga.tsx b/src/client/page/reader/manga.tsx
similarity index 86%
rename from src/client/presenter/manga.tsx
rename to src/client/page/reader/manga.tsx
index e3b002f..aab0f07 100644
--- a/src/client/presenter/manga.tsx
+++ b/src/client/page/reader/manga.tsx
@@ -1,8 +1,8 @@
 import React, {useState, useEffect} from 'react';
 import {Redirect, Route ,Switch,useHistory, useRouteMatch, match as MatchType, Link as RouterLink} from 'react-router-dom';
-import { LoadingCircle } from '../component/loading';
+import { LoadingCircle } from '../../component/loading';
 import { Link, Paper, makeStyles, Theme, Box, Typography } from '@material-ui/core';
-import { Content, makeThumbnailUrl } from '../accessor/contents';
+import { Content, makeThumbnailUrl } from '../../accessor/contents';
 
 type MangaType = "manga"|"artist cg"|"donjinshi"|"western"
 
diff --git a/src/client/presenter/presenter.tsx b/src/client/page/reader/reader.tsx
similarity index 90%
rename from src/client/presenter/presenter.tsx
rename to src/client/page/reader/reader.tsx
index c3330a3..22414c6 100644
--- a/src/client/presenter/presenter.tsx
+++ b/src/client/page/reader/reader.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Content, makeThumbnailUrl } from '../accessor/contents';
+import { Content, makeThumbnailUrl } from '../../accessor/contents';
 import {MangaReader} from './manga';
 
 export type PresenterCollection = {
diff --git a/src/client/presenter/video.tsx b/src/client/page/reader/video.tsx
similarity index 100%
rename from src/client/presenter/video.tsx
rename to src/client/page/reader/video.tsx