diff --git a/src/client/page/difference.tsx b/src/client/page/difference.tsx
index 4fdeb73..e3dc99d 100644
--- a/src/client/page/difference.tsx
+++ b/src/client/page/difference.tsx
@@ -15,32 +15,48 @@ const useStyles = makeStyles((theme:Theme)=>({
         marginLeft: theme.spacing(2)
     }
 }));
+type FileDifference = {
+    type:string,
+    value:{
+        type:string,
+        path:string,
+    }[]
+}
+
+
+function TypeDifference(prop:{
+    content:FileDifference,
+    onCommit:(v:{type:string,path:string})=>void
+}){
+    const classes = useStyles();
+    const x = prop.content;
+    return (<Paper className={classes.paper}>
+                    <Typography variant='h3' className={classes.contentTitle}>{x.type}</Typography>
+                        {x.value.map(y=>(
+                    <Box className={classes.commitable} key={y.path}>
+                            <Button onClick={()=>prop.onCommit(y)}>Commit</Button>
+                            <Typography variant='h5'>{y.path}</Typography>
+                    </Box>
+                            ))}
+                </Paper>);
+}
 
 export function DifferencePage(){
     const ctx = useContext(UserContext);
     const classes = useStyles();
     const [diffList,setDiffList] = useState<
-        {type:string,value:{path:string,type:string}[]}[]
+    FileDifference[]
     >([]);
     const doLoad = async ()=>{
         const list = await fetch('/api/diff/list');
         if(list.ok){
-           const inner = await list.json();
-           setDiffList(inner);
+            const inner = await list.json();
+            setDiffList(inner);
         }
         else{
             //setDiffList([]);
         }
     };
-    useEffect(
-        ()=>{
-            doLoad();
-            const i = setInterval(doLoad,5000);
-            return ()=>{
-                clearInterval(i);
-            }
-        },[]
-    )
     const Commit = async(x:{type:string,path:string})=>{
         const res = await fetch('/api/diff/commit',{
             method:'POST',
@@ -54,19 +70,22 @@ export function DifferencePage(){
             doLoad();
         }
     } 
+    useEffect(
+        ()=>{
+            doLoad();
+            const i = setInterval(doLoad,5000);
+            return ()=>{
+                clearInterval(i);
+            }
+        },[]
+    )
     const menu = CommonMenuList();
-    (ctx.username == "admin")
     return (<Headline menu={menu}>
-        {(ctx.username == "admin") ? (diffList.map(x=><Paper key={x.type} className={classes.paper}>
-            <Typography variant='h3' className={classes.contentTitle}>{x.type}</Typography>
-            <Box className={classes.commitable}>
-                {x.value.map(y=>(
-                    <>
-                    <Button key={`button_${y.path}`} onClick={()=>Commit(y)}>Commit</Button>
-                    <Typography key={`typography_${y.path}`} variant='h5'>{y.path}</Typography>
-                    </>))}
-            </Box>
-        </Paper>)):(<Typography variant='h2'>Not Allowed : please login as an admin</Typography>)
+        {(ctx.username == "admin") ? (<div>
+            {(diffList.map(x=>
+                <TypeDifference key={x.type} content={x} onCommit={Commit}/>))}
+        </div>)
+        :(<Typography variant='h2'>Not Allowed : please login as an admin</Typography>)
         }
     
     </Headline>)