diff --git a/view/src/components/common/Card/Card.tsx b/view/src/components/common/Card/Card.tsx
deleted file mode 100644
index d7b3d35..0000000
--- a/view/src/components/common/Card/Card.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-interface CardProps {
-  children?: React.ReactNode
-  className?: string
-}
-const Card = (props: CardProps) => {
-  return (
-    <div className="max-w-sm rounded-lg border border-gray-200 bg-white p-6 shadow-md dark:border-gray-700 dark:bg-gray-800">
-      {props.children}
-    </div>
-  )
-}
-export default Card
diff --git a/view/src/components/common/Card/EventParticipantCard.stories.tsx b/view/src/components/common/Card/EventParticipantCard.stories.tsx
index 0075f65..733574f 100644
--- a/view/src/components/common/Card/EventParticipantCard.stories.tsx
+++ b/view/src/components/common/Card/EventParticipantCard.stories.tsx
@@ -1,20 +1,22 @@
 import type { ComponentStory, ComponentMeta } from '@storybook/react'
 import { EventParticipantCard } from '.'
+import { EventParticipantCardProps } from './EventParticipantCard.type'
 
 export default {
   title: 'EvnetParticipantCard',
   component: EventParticipantCard,
 } as ComponentMeta<typeof EventParticipantCard>
 
-const Template: ComponentStory<typeof EventParticipantCard> = (args) => <EventParticipantCard {...args} />
+const Template: ComponentStory<typeof EventParticipantCard> = (args: EventParticipantCardProps) => (
+  <EventParticipantCard {...args} />
+)
 
 export const Default: ComponentStory<typeof EventParticipantCard> = Template.bind({})
 
-// Default.args = {
-//   // label: 'Default',
-//   onClick: () => {
-//     alert('クリック')
-//   },
-// }
+Default.args = {
+  participantCount: 130,
+  participantParsent: 10,
+  participantType: 'all',
+}
 
 Default.storyName = 'Default'
diff --git a/view/src/components/common/Card/EventParticipantCard.tsx b/view/src/components/common/Card/EventParticipantCard.tsx
index 86920a8..db285b3 100644
--- a/view/src/components/common/Card/EventParticipantCard.tsx
+++ b/view/src/components/common/Card/EventParticipantCard.tsx
@@ -1,33 +1,70 @@
 import * as React from 'react'
+import Box from '@mui/material/Box'
 import Card from '@mui/material/Card'
-import CardActions from '@mui/material/CardActions'
+import PeopleIcon from '@mui/icons-material/People'
+import PersonIcon from '@mui/icons-material/Person'
+import PersonAddIcon from '@mui/icons-material/PersonAdd'
 import CardContent from '@mui/material/CardContent'
-import CardMedia from '@mui/material/CardMedia'
-import Button from '@mui/material/Button'
 import Typography from '@mui/material/Typography'
+import { CardActionArea } from '@mui/material'
+import { EventParticipantCardProps } from './EventParticipantCard.type'
+import { useMemo } from 'react'
 
-interface CardProps {
-  children?: React.ReactNode
-  className?: string
-}
+const EventParticipantCard = (props: EventParticipantCardProps) => {
+  const { participantType, participantParsent, participantCount } = props
+
+  const participant = useMemo(() => {
+    switch (participantType) {
+      case 'all':
+        return '技大祭 全体'
+      case 'inside':
+        return '技大祭 内部'
+      case 'outside':
+        return '技大祭 外部'
+      default:
+        return ''
+    }
+  }, [participantType])
+
+  const participantIcon = useMemo(() => {
+    switch (participantType) {
+      case 'all':
+        return <PeopleIcon />
+      case 'inside':
+        return <PersonIcon />
+      case 'outside':
+        return <PersonAddIcon />
+      default:
+        return <PeopleIcon />
+    }
+  }, [participantType])
 
-const EventParticipantCard = (props: CardProps) => {
   return (
-    <Card sx={{ maxWidth: 345 }}>
-      <CardMedia sx={{ height: 140 }} image="/static/images/cards/contemplative-reptile.jpg" title="green iguana" />
-      <CardContent>
-        <Typography gutterBottom variant="h5" component="div">
-          Lizard
-        </Typography>
-        <Typography variant="body2" color="text.secondary">
-          Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents
-          except Antarctica
-        </Typography>
-      </CardContent>
-      <CardActions>
-        <Button size="small">Share</Button>
-        <Button size="small">Learn More</Button>
-      </CardActions>
+    <Card sx={{ maxWidth: 300 }}>
+      <CardActionArea sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-around' }}>
+        <Box>
+          <CardContent>
+            <Typography variant="body2" color="text.secondary">
+              {participant}
+            </Typography>
+
+            <Typography variant="h5">{participantCount}人</Typography>
+            <Typography
+              variant="body2"
+              color="text.secondary"
+              sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-around' }}
+            >
+              {participantParsent < 0 ? (
+                <Typography sx={{ color: 'red' }}>{participantParsent} % </Typography>
+              ) : (
+                <Typography sx={{ color: 'green' }}>{participantParsent} % </Typography>
+              )}
+              <Typography sx={{ display: 'flex', justifyContent: 'center' }}> Sinse last hour</Typography>
+            </Typography>
+          </CardContent>
+        </Box>
+        <Box sx={{ display: 'flex', justifyContent: 'center' }}>{participantIcon}</Box>
+      </CardActionArea>
     </Card>
   )
 }
diff --git a/view/src/components/common/Card/EventParticipantCard.type.ts b/view/src/components/common/Card/EventParticipantCard.type.ts
new file mode 100644
index 0000000..e9d7448
--- /dev/null
+++ b/view/src/components/common/Card/EventParticipantCard.type.ts
@@ -0,0 +1,5 @@
+export interface EventParticipantCardProps {
+  participantType: 'all'|'inside'|'outside'
+  participantCount: number
+  participantParsent: number
+}
diff --git a/view/src/components/common/Card/Header.module.css b/view/src/components/common/Card/Header.module.css
deleted file mode 100644
index e69de29..0000000
diff --git a/view/src/components/common/Card/index.ts b/view/src/components/common/Card/index.ts
index 30e10c2..f57a8f2 100644
--- a/view/src/components/common/Card/index.ts
+++ b/view/src/components/common/Card/index.ts
@@ -1,2 +1 @@
-export { default as Card } from './Card'
 export { default as EventParticipantCard } from './EventParticipantCard'
diff --git a/view/src/components/common/Header/Header.module.css b/view/src/components/common/Header/Header.module.css
deleted file mode 100644
index e69de29..0000000
diff --git a/view/src/components/common/Header/Header.tsx b/view/src/components/common/Header/Header.tsx
deleted file mode 100644
index 5c81fbc..0000000
--- a/view/src/components/common/Header/Header.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { FC } from 'react'
-import AppBar from '@mui/material/AppBar';
-import { createTheme } from '@mui/material';
-import { ThemeProvider } from '@mui/material/styles';
-import Typography from '@mui/material/Typography';
-
-const theme = createTheme({
-  palette: {
-    primary: {
-      main: '#0E1841',
-    },
-  }
-});
-
-const Header: FC = () => {
-  return (
-    <ThemeProvider theme={theme}>
-      <AppBar position='static' color='primary' sx={{height: '64px'}}>
-      <Typography
-        fontSize='24px'
-        noWrap
-        component='div'
-        fontFamily='NOTO SANS JP'
-        sx={{ alignSelf: 'flex-start', marginLeft: '4%' , marginTop: '16px' }}
-      >
-        管理者画面
-      </Typography>
-      </AppBar>
-    </ThemeProvider>
-  )
-}
-
-export default Header