diff --git a/src/layout/Customization/BorderRadius.js b/src/layout/Customization/BorderRadius.js
index 904540b..666c198 100755
--- a/src/layout/Customization/BorderRadius.js
+++ b/src/layout/Customization/BorderRadius.js
@@ -16,7 +16,7 @@ const BorderRadius = () => {
   const { borderRadius, onChangeBorderRadius } = useConfig();
 
   return (
-    <SubCard title="Border Radius">
+    <SubCard title="윤곽선 라운딩">
       <Grid item xs={12} container spacing={2} alignItems="center" sx={{ mt: 2.5 }}>
         <Grid item>
           <Typography variant="h6" color="secondary">
diff --git a/src/layout/Customization/FontFamily.js b/src/layout/Customization/FontFamily.js
index 594e6f4..b935f94 100755
--- a/src/layout/Customization/FontFamily.js
+++ b/src/layout/Customization/FontFamily.js
@@ -35,7 +35,7 @@ const FontFamily = () => {
   };
 
   return (
-    <SubCard title="Font Family">
+    <SubCard title="폰트">
       <FormControl>
         <RadioGroup aria-label="font-family" value={font} onChange={handleFont} name="row-radio-buttons-group">
           <FormControlLabel
diff --git a/src/layout/Customization/Layout.js b/src/layout/Customization/Layout.js
index 9bf18fd..70026ef 100755
--- a/src/layout/Customization/Layout.js
+++ b/src/layout/Customization/Layout.js
@@ -11,9 +11,9 @@ const Layout = () => {
   const { navType, rtlLayout, onChangeMenuType, onChangeRTL } = useConfig();
 
   return (
-    <SubCard title="Layout">
+    <SubCard title="화면 구성">
       <FormControl component="fieldset">
-        <FormLabel component="legend">Mode</FormLabel>
+        <FormLabel component="legend">테마</FormLabel>
         <RadioGroup
           row
           aria-label="layout"
@@ -41,19 +41,19 @@ const Layout = () => {
           />
         </RadioGroup>
       </FormControl>
-      <FormControl component="fieldset" sx={{ mt: 2 }}>
-        <FormLabel component="legend">Direction</FormLabel>
-        <FormControlLabel
-          control={
-            <Switch
-              checked={rtlLayout}
-              onChange={(event) => onChangeRTL(event.target.checked)}
-              inputProps={{ 'aria-label': 'controlled-direction' }}
-            />
-          }
-          label="RTL"
-        />
-      </FormControl>
+      {/* <FormControl component="fieldset" sx={{ mt: 2 }}> */}
+      {/*  <FormLabel component="legend">Direction</FormLabel> */}
+      {/*  <FormControlLabel */}
+      {/*    control={ */}
+      {/*      <Switch */}
+      {/*        checked={rtlLayout} */}
+      {/*        onChange={(event) => onChangeRTL(event.target.checked)} */}
+      {/*        inputProps={{ 'aria-label': 'controlled-direction' }} */}
+      {/*      /> */}
+      {/*    } */}
+      {/*    label="RTL" */}
+      {/*  /> */}
+      {/* </FormControl> */}
     </SubCard>
   );
 };
diff --git a/src/layout/Customization/PresetColor.js b/src/layout/Customization/PresetColor.js
index 15c236d..ca673cc 100755
--- a/src/layout/Customization/PresetColor.js
+++ b/src/layout/Customization/PresetColor.js
@@ -88,7 +88,7 @@ const PresetColor = () => {
   ];
 
   return (
-    <SubCard title="Preset Color">
+    <SubCard title="색상">
       <Grid item container spacing={2} alignItems="center">
         {colorOptions.map((color, index) => (
           <PresetColorBox key={index} color={color} presetColor={presetColor} setPresetColor={onChangePresetColor} />
diff --git a/src/layout/Customization/index.js b/src/layout/Customization/index.js
index 737bee1..31a7793 100755
--- a/src/layout/Customization/index.js
+++ b/src/layout/Customization/index.js
@@ -89,14 +89,14 @@ const Customization = () => {
                 {/* border radius */}
                 <BorderRadius />
               </Grid>
-              <Grid item xs={12}>
-                {/* filled with outline textfield */}
-                <InputFilled />
-              </Grid>
-              <Grid item xs={12}>
-                {/* box container */}
-                <BoxContainer />
-              </Grid>
+              {/* <Grid item xs={12}> */}
+              {/*  /!* filled with outline textfield *!/ */}
+              {/*  <InputFilled /> */}
+              {/* </Grid> */}
+              {/* <Grid item xs={12}> */}
+              {/*  /!* box container *!/ */}
+              {/*  <BoxContainer /> */}
+              {/* </Grid> */}
             </Grid>
           </PerfectScrollbar>
         )}
diff --git a/src/layout/MainLayout/index.js b/src/layout/MainLayout/index.js
index 0ac8ed7..726e795 100755
--- a/src/layout/MainLayout/index.js
+++ b/src/layout/MainLayout/index.js
@@ -21,6 +21,7 @@ import useAuth from 'hooks/useAuth';
 
 // assets
 import { IconChevronRight } from '@tabler/icons';
+import Customization from '../Customization';
 
 // styles
 const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({
@@ -140,6 +141,7 @@ const MainLayout = () => {
           </>
         )}
       </Main>
+      <Customization />
     </Box>
   );
 };
diff --git a/src/store/actions.js b/src/store/actions.js
index 7c42d6f..f93ff9c 100755
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -2,4 +2,3 @@
 export const LOGIN = 'LOGIN';
 export const LOGOUT = 'LOGOUT';
 export const REGISTER = 'REGISTER';
-export const FIREBASE_STATE_CHANGED = 'FIREBASE_STATE_CHANGED';
diff --git a/src/ui-component/cards/BackgroundPattern1.js b/src/ui-component/cards/BackgroundPattern1.js
deleted file mode 100755
index 457f7bc..0000000
--- a/src/ui-component/cards/BackgroundPattern1.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import PropTypes from 'prop-types';
-
-// material-ui
-import { useTheme } from '@mui/material/styles';
-import { Box } from '@mui/material';
-
-// assets
-import AuthPattern from 'assets/images/auth/auth-pattern.svg';
-import AuthPatternDark from 'assets/images/auth/auth-pattern-dark.svg';
-
-// ===========================|| BACKGROUND GRID PATTERN 1 ||=========================== //
-
-const BackgroundPattern1 = ({ children }) => {
-  const theme = useTheme();
-  return (
-    <Box
-      component="span"
-      sx={{
-        display: 'flex',
-        minHeight: '100vh',
-        bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : '#fff',
-        backgroundImage: theme.palette.mode === 'dark' ? `url(${AuthPatternDark})` : `url(${AuthPattern})`,
-        position: 'absolute',
-        backgroundPosition: '0 0',
-        overflow: 'hidden',
-        m: '0 0 0 auto',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        opacity: theme.palette.mode === 'dark' ? 0.85 : 0.9
-      }}
-    >
-      {children}
-    </Box>
-  );
-};
-
-BackgroundPattern1.propTypes = {
-  children: PropTypes.node
-};
-
-export default BackgroundPattern1;
diff --git a/src/ui-component/cards/BackgroundPattern2.js b/src/ui-component/cards/BackgroundPattern2.js
deleted file mode 100755
index 1b2fec2..0000000
--- a/src/ui-component/cards/BackgroundPattern2.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import PropTypes from 'prop-types';
-
-// material-ui
-import { useTheme } from '@mui/material/styles';
-import { Box } from '@mui/material';
-
-// assets
-import AuthPattern from 'assets/images/auth/img-a2-grid.svg';
-import AuthPatternDark from 'assets/images/auth/img-a2-grid-dark.svg';
-
-// ===========================|| BACKGROUND GRID PATTERN 2 ||=========================== //
-
-const BackgroundPattern2 = ({ children }) => {
-  const theme = useTheme();
-  return (
-    <Box
-      component="span"
-      sx={{
-        display: 'flex',
-        minHeight: '100%',
-        height: '100vh',
-        bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : '#fff',
-        backgroundImage: theme.palette.mode === 'dark' ? `url(${AuthPatternDark})` : `url(${AuthPattern})`,
-        position: 'absolute',
-        backgroundPosition: 'bottom left',
-        backgroundRepeat: 'no-repeat',
-        // backgroundSize: 'cover',
-        overflow: 'hidden',
-        m: '0 0 0 auto',
-        p: '100px 0',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        '& > *': {
-          position: 'relative',
-          zIndex: 5
-        },
-        '&:after': {
-          content: '""',
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          zIndex: 1,
-          bottom: 0,
-          bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : theme.palette.primary.light,
-          opacity: theme.palette.mode === 'dark' ? 0.85 : 0.9
-        }
-      }}
-    >
-      {children}
-    </Box>
-  );
-};
-
-BackgroundPattern2.propTypes = {
-  children: PropTypes.node
-};
-
-export default BackgroundPattern2;
diff --git a/src/ui-component/cards/BillCard.js b/src/ui-component/cards/BillCard.js
deleted file mode 100755
index 6f09339..0000000
--- a/src/ui-component/cards/BillCard.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-
-// material-ui
-import { useTheme } from '@mui/material/styles';
-import { Button, Card, CardContent, Grid, Typography } from '@mui/material';
-
-// assets
-import ArrowRightAltRoundedIcon from '@mui/icons-material/ArrowRightAltRounded';
-
-// ==============================|| BILL CARD ||============================== //
-
-const BillCard = ({ primary, secondary, link, color, bg }) => {
-  const theme = useTheme();
-  return (
-    <Card sx={{ borderLeft: '10px solid', borderColor: color, background: bg }}>
-      <CardContent>
-        <Grid container spacing={0}>
-          <Grid item xs={12}>
-            <Typography variant="body1" sx={{ color: theme.palette.grey[700] }}>
-              {primary}
-            </Typography>
-          </Grid>
-          <Grid item xs={12}>
-            <Typography variant="h2" sx={{ fontWeight: 500, mb: 1.5, color: theme.palette.grey[800] }}>
-              {secondary}
-            </Typography>
-          </Grid>
-          <Grid item xs={12}>
-            <Button
-              variant="text"
-              disableElevation
-              disableRipple
-              component={Link}
-              to="#"
-              sx={{
-                color,
-                p: 0,
-                '&:hover': { bgcolor: 'transparent' }
-              }}
-              endIcon={<ArrowRightAltRoundedIcon />}
-            >
-              {link}
-            </Button>
-          </Grid>
-        </Grid>
-      </CardContent>
-    </Card>
-  );
-};
-
-BillCard.propTypes = {
-  primary: PropTypes.string,
-  secondary: PropTypes.string,
-  link: PropTypes.string,
-  color: PropTypes.string,
-  bg: PropTypes.string
-};
-
-export default BillCard;
diff --git a/src/ui-component/cards/Post/Comment/Reply/index.js b/src/ui-component/cards/Post/Comment/Reply/index.js
deleted file mode 100755
index b790b59..0000000
--- a/src/ui-component/cards/Post/Comment/Reply/index.js
+++ /dev/null
@@ -1,156 +0,0 @@
-import PropTypes from 'prop-types';
-import { useState } from 'react';
-
-// material-ui
-import { useTheme } from '@mui/material/styles';
-import { Box, Button, ButtonBase, Card, Grid, Menu, MenuItem, Stack, Typography } from '@mui/material';
-
-// project imports
-import Avatar from 'ui-component/extended/Avatar';
-
-// assets
-import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
-import MoreVertTwoToneIcon from '@mui/icons-material/MoreVertTwoTone';
-import ThumbUpAltTwoToneIcon from '@mui/icons-material/ThumbUpAltTwoTone';
-import ReplyTwoToneIcon from '@mui/icons-material/ReplyTwoTone';
-
-const avatarImage = require.context('assets/images/profile', true);
-
-// ==============================|| POST & COMMENT - REPLAY ||============================== //
-
-const Reply = ({ commentId, handleReplayLikes, onReply, postId, reply }) => {
-  const theme = useTheme();
-  const { id } = reply;
-
-  const [anchorEl, setAnchorEl] = useState(null);
-  const handleClick = (event) => {
-    setAnchorEl(event?.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const replies = reply;
-
-  return (
-    <>
-      {Object.keys(replies).length > 0 && (
-        <Grid item xs={12}>
-          <Box sx={{ pl: 6.25 }}>
-            <Card
-              sx={{
-                background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[50],
-                padding: '16px 16px 8px',
-                mt: 1.25
-              }}
-            >
-              <Grid container spacing={1}>
-                <Grid item xs={12}>
-                  <Grid container wrap="nowrap" alignItems="center" spacing={1}>
-                    <Grid item>
-                      <Avatar
-                        sx={{ width: 24, height: 24 }}
-                        size="sm"
-                        alt="User 1"
-                        src={replies.profile && replies.profile.avatar && avatarImage(`./${replies.profile.avatar}`).default}
-                      />
-                    </Grid>
-                    <Grid item xs zeroMinWidth>
-                      <Grid container alignItems="center" spacing={1}>
-                        <Grid item>
-                          <Typography align="left" variant="h5" component="div">
-                            {replies.profile.name}
-                          </Typography>
-                        </Grid>
-                        <Grid item>
-                          <Typography align="left" variant="caption">
-                            <FiberManualRecordIcon sx={{ width: '10px', height: '10px', opacity: 0.5, m: '0 5px' }} />{' '}
-                            {replies.profile.time}
-                          </Typography>
-                        </Grid>
-                      </Grid>
-                    </Grid>
-                    <Grid item>
-                      <ButtonBase sx={{ borderRadius: '12px' }} onClick={handleClick}>
-                        <Avatar
-                          variant="rounded"
-                          sx={{
-                            ...theme.typography.commonAvatar,
-                            ...theme.typography.smallAvatar,
-                            background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.secondary.light,
-                            color: theme.palette.mode === 'dark' ? theme.palette.dark.light : theme.palette.secondary.dark,
-                            zIndex: 1,
-                            transition: 'all .2s ease-in-out',
-                            '&[aria-controls="menu-list-grow"],&:hover': {
-                              background: theme.palette.secondary.main,
-                              color: theme.palette.secondary.light
-                            }
-                          }}
-                          aria-controls="menu-comment-reply"
-                          aria-haspopup="true"
-                        >
-                          <MoreVertTwoToneIcon fontSize="inherit" />
-                        </Avatar>
-                      </ButtonBase>
-                      <Menu
-                        id="menu-comment-reply"
-                        anchorEl={anchorEl}
-                        keepMounted
-                        open={Boolean(anchorEl)}
-                        onClose={handleClose}
-                        variant="selectedMenu"
-                        anchorOrigin={{
-                          vertical: 'bottom',
-                          horizontal: 'right'
-                        }}
-                        transformOrigin={{
-                          vertical: 'top',
-                          horizontal: 'right'
-                        }}
-                      >
-                        <MenuItem onClick={handleClose}>Edit</MenuItem>
-                        <MenuItem onClick={handleClose}>Delete</MenuItem>
-                      </Menu>
-                    </Grid>
-                  </Grid>
-                </Grid>
-                <Grid item xs={12}>
-                  <Typography align="left" variant="body2">
-                    {replies.data.comment}
-                  </Typography>
-                </Grid>
-                <Grid item xs={12}>
-                  <Stack direction="row" spacing={2} sx={{ color: theme.palette.mode === 'dark' ? 'grey.700' : 'grey.800' }}>
-                    <Button
-                      onClick={() => handleReplayLikes(postId, commentId, id)}
-                      variant="text"
-                      color="inherit"
-                      size="small"
-                      startIcon={<ThumbUpAltTwoToneIcon color={replies.data.likes && replies.data.likes.like ? 'secondary' : 'inherit'} />}
-                    >
-                      {replies.data.likes && replies.data.likes.value ? replies.data.likes.value : 0} likes
-                    </Button>
-                    <Button variant="text" onClick={onReply} size="small" color="inherit" startIcon={<ReplyTwoToneIcon color="primary" />}>
-                      reply
-                    </Button>
-                  </Stack>
-                </Grid>
-              </Grid>
-            </Card>
-          </Box>
-        </Grid>
-      )}
-    </>
-  );
-};
-
-Reply.propTypes = {
-  commentId: PropTypes.string,
-  handleReplayLikes: PropTypes.func,
-  onReply: PropTypes.func,
-  postId: PropTypes.string,
-  reply: PropTypes.object
-};
-
-export default Reply;
diff --git a/src/ui-component/cards/Post/Comment/index.js b/src/ui-component/cards/Post/Comment/index.js
deleted file mode 100755
index 364b8a8..0000000
--- a/src/ui-component/cards/Post/Comment/index.js
+++ /dev/null
@@ -1,340 +0,0 @@
-import PropTypes from 'prop-types';
-import { useState } from 'react';
-
-// material-ui
-import { useTheme } from '@mui/material/styles';
-import {
-  Box,
-  Button,
-  ButtonBase,
-  Card,
-  Collapse,
-  FormHelperText,
-  Grid,
-  InputAdornment,
-  Menu,
-  MenuItem,
-  Stack,
-  TextField,
-  Typography,
-  useMediaQuery
-} from '@mui/material';
-
-// third-party
-import * as yup from 'yup';
-import uniqueId from 'lodash/uniqueId';
-import { Controller, FormProvider, useForm, useFormContext } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-
-// project imports
-import Reply from './Reply';
-import Avatar from 'ui-component/extended/Avatar';
-import AnimateButton from 'ui-component/extended/AnimateButton';
-
-// assets
-import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
-import MoreVertTwoToneIcon from '@mui/icons-material/MoreVertTwoTone';
-import ThumbUpAltTwoToneIcon from '@mui/icons-material/ThumbUpAltTwoTone';
-import ReplyTwoToneIcon from '@mui/icons-material/ReplyTwoTone';
-import AttachmentRoundedIcon from '@mui/icons-material/AttachmentRounded';
-
-const avatarImage = require.context('assets/images/profile', true);
-
-const validationSchema = yup.object().shape({
-  name: yup.string().required('Reply Field is Required')
-});
-
-// ==============================|| COMMENT TEXTFIELD ||============================== //
-
-const FormInput = ({ bug, label, name, required, ...others }) => {
-  const { control } = useFormContext();
-
-  let isError = false;
-  let errorMessage = '';
-  if (bug && Object.prototype.hasOwnProperty.call(bug, name)) {
-    isError = true;
-    errorMessage = bug[name].message;
-  }
-
-  return (
-    <>
-      <Controller
-        name={name}
-        control={control}
-        defaultValue=""
-        render={({ field }) => (
-          <TextField
-            fullWidth
-            label={label}
-            InputLabelProps={{
-              className: required ? 'required-label' : '',
-              required: required || false
-            }}
-            error={isError}
-            {...field}
-          />
-        )}
-        {...others}
-      />
-      {errorMessage && (
-        <Grid item xs={12}>
-          <FormHelperText error>{errorMessage}</FormHelperText>
-        </Grid>
-      )}
-    </>
-  );
-};
-
-FormInput.propTypes = {
-  bug: PropTypes.object,
-  label: PropTypes.string,
-  name: PropTypes.string,
-  required: PropTypes.bool
-};
-
-// ==============================|| SOCIAL PROFILE - COMMENT ||============================== //
-
-const Comment = ({ comment, handleCommentLikes, handleReplayLikes, postId, replyAdd, user }) => {
-  const theme = useTheme();
-  const matchesXS = useMediaQuery(theme.breakpoints.down('md'));
-
-  const [anchorEl, setAnchorEl] = useState(null);
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const [openReply, setOpenReply] = useState(false);
-  const handleChangeReply = () => {
-    setOpenReply((prev) => !prev);
-  };
-
-  let repliesResult = <></>;
-  if (Object.keys(comment).length > 0 && comment.data?.replies && comment.data?.replies.length) {
-    repliesResult = comment.data?.replies.map((reply, index) => (
-      <Reply
-        postId={postId}
-        commentId={comment.id}
-        key={index}
-        onReply={handleChangeReply}
-        reply={reply}
-        handleReplayLikes={handleReplayLikes}
-      />
-    ));
-  }
-
-  const methods = useForm({
-    resolver: yupResolver(validationSchema)
-  });
-
-  const {
-    handleSubmit,
-    formState: { errors },
-    reset
-  } = methods;
-  const onSubmit = async (reply) => {
-    handleChangeReply();
-    const replyId = uniqueId('#REPLY_');
-    const newReply = {
-      id: replyId,
-      profile: user,
-      data: {
-        comment: reply.name,
-        likes: {
-          like: false,
-          value: 0
-        },
-        replies: []
-      }
-    };
-
-    replyAdd(postId, comment.id, newReply);
-    reset({ name: '' });
-  };
-
-  return (
-    <>
-      {Object.keys(comment).length > 0 && (
-        <Grid item xs={12}>
-          <Card
-            sx={{
-              background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[50],
-              padding: '16px 16px 8px',
-              mt: 1.25
-            }}
-          >
-            <Grid container spacing={1}>
-              <Grid item xs={12}>
-                <Grid container wrap="nowrap" alignItems="center" spacing={1}>
-                  <Grid item>
-                    <Avatar
-                      sx={{ width: 24, height: 24 }}
-                      size="sm"
-                      alt="User 1"
-                      src={comment.profile && comment.profile.avatar && avatarImage(`./${comment.profile.avatar}`).default}
-                    />
-                  </Grid>
-                  <Grid item xs zeroMinWidth>
-                    <Grid container alignItems="center" spacing={1}>
-                      <Grid item>
-                        <Typography align="left" variant="h5" component="div">
-                          {comment.profile.name}
-                        </Typography>
-                      </Grid>
-                      <Grid item>
-                        <Typography align="left" variant="caption">
-                          <FiberManualRecordIcon sx={{ width: '10px', height: '10px', opacity: 0.5, m: '0 5px' }} /> {comment.profile.time}
-                        </Typography>
-                      </Grid>
-                    </Grid>
-                  </Grid>
-                  <Grid item>
-                    <ButtonBase sx={{ borderRadius: '12px' }}>
-                      <Avatar
-                        variant="rounded"
-                        sx={{
-                          ...theme.typography.commonAvatar,
-                          ...theme.typography.smallAvatar,
-                          background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.secondary.light,
-                          color: theme.palette.mode === 'dark' ? theme.palette.dark.light : theme.palette.secondary.dark,
-                          zIndex: 1,
-                          transition: 'all .2s ease-in-out',
-                          '&[aria-controls="menu-list-grow"],&:hover': {
-                            background: theme.palette.secondary.main,
-                            color: theme.palette.secondary.light
-                          }
-                        }}
-                        aria-controls="menu-comment"
-                        aria-haspopup="true"
-                        onClick={handleClick}
-                      >
-                        <MoreVertTwoToneIcon fontSize="inherit" />
-                      </Avatar>
-                    </ButtonBase>
-                    <Menu
-                      id="menu-comment"
-                      anchorEl={anchorEl}
-                      keepMounted
-                      open={Boolean(anchorEl)}
-                      onClose={handleClose}
-                      variant="selectedMenu"
-                      anchorOrigin={{
-                        vertical: 'bottom',
-                        horizontal: 'right'
-                      }}
-                      transformOrigin={{
-                        vertical: 'top',
-                        horizontal: 'right'
-                      }}
-                    >
-                      <MenuItem onClick={handleClose}>Edit</MenuItem>
-                      <MenuItem onClick={handleClose}>Delete</MenuItem>
-                    </Menu>
-                  </Grid>
-                </Grid>
-              </Grid>
-              <Grid item xs={12} sx={{ '&.MuiGrid-root': { pt: 1.5 } }}>
-                <Typography align="left" variant="body2">
-                  {comment.data?.comment}
-                </Typography>
-              </Grid>
-              <Grid item xs={12}>
-                <Stack direction="row" spacing={2} sx={{ color: theme.palette.mode === 'dark' ? 'grey.700' : 'grey.800' }}>
-                  <Button
-                    onClick={() => handleCommentLikes(postId, comment.id)}
-                    variant="text"
-                    color="inherit"
-                    size="small"
-                    startIcon={<ThumbUpAltTwoToneIcon color={comment.data?.likes && comment.data?.likes.like ? 'secondary' : 'inherit'} />}
-                  >
-                    {comment.data?.likes && comment.data?.likes.value ? comment.data?.likes.value : 0} likes
-                  </Button>
-                  <Button
-                    variant="text"
-                    onClick={handleChangeReply}
-                    color="inherit"
-                    size="small"
-                    startIcon={<ReplyTwoToneIcon color="primary" />}
-                  >
-                    {comment.data?.replies ? comment.data?.replies.length : 0} reply
-                  </Button>
-                </Stack>
-              </Grid>
-            </Grid>
-          </Card>
-        </Grid>
-      )}
-      {repliesResult}
-      {/* comment - add new replay */}
-      <Collapse in={openReply} sx={{ width: '100%' }}>
-        {openReply && (
-          <Grid item xs={12} sx={{ pl: { xs: 1, sm: 3 }, pt: 3 }}>
-            <Box
-              sx={{
-                ml: 4.25,
-                [theme.breakpoints.down('md')]: {
-                  ml: 0
-                }
-              }}
-            >
-              <form onSubmit={handleSubmit(onSubmit)}>
-                <Grid container spacing={2} alignItems="flex-start">
-                  <Grid item sx={{ display: { xs: 'none', sm: 'block' } }}>
-                    <Avatar
-                      sx={{ mt: 1.5 }}
-                      alt="User 1"
-                      src={comment.profile && comment.profile.avatar && avatarImage(`./${comment.profile.avatar}`).default}
-                    />
-                  </Grid>
-                  <Grid item xs zeroMinWidth sx={{ mt: 1 }}>
-                    <FormProvider {...methods}>
-                      <FormInput
-                        fullWidth
-                        name="name"
-                        label="Write a reply..."
-                        size={matchesXS ? 'small' : 'medium'}
-                        bug={errors}
-                        InputProps={{
-                          label: 'Write a reply...',
-                          startAdornment: (
-                            <InputAdornment position="start">
-                              <AttachmentRoundedIcon fontSize="small" />
-                            </InputAdornment>
-                          )
-                        }}
-                      />
-                    </FormProvider>
-                  </Grid>
-                  <Grid item>
-                    <AnimateButton>
-                      <Button type="submit" variant="contained" color="secondary" size={matchesXS ? 'small' : 'large'} sx={{ mt: 1.5 }}>
-                        Reply
-                      </Button>
-                    </AnimateButton>
-                  </Grid>
-                </Grid>
-              </form>
-            </Box>
-          </Grid>
-        )}
-      </Collapse>
-    </>
-  );
-};
-
-Comment.propTypes = {
-  comment: PropTypes.object,
-  postId: PropTypes.string,
-  user: PropTypes.object,
-  commentAdd: PropTypes.func,
-  handleCommentLikes: PropTypes.func,
-  handlePostLikes: PropTypes.func,
-  handleReplayLikes: PropTypes.func,
-  post: PropTypes.object,
-  replyAdd: PropTypes.func
-};
-
-export default Comment;
diff --git a/src/ui-component/cards/Post/index.js b/src/ui-component/cards/Post/index.js
deleted file mode 100755
index 85cffba..0000000
--- a/src/ui-component/cards/Post/index.js
+++ /dev/null
@@ -1,406 +0,0 @@
-import PropTypes from 'prop-types';
-import * as React from 'react';
-
-// material-ui
-import { useTheme } from '@mui/material/styles';
-import {
-  Button,
-  ButtonBase,
-  CardMedia,
-  Collapse,
-  FormHelperText,
-  Grid,
-  IconButton,
-  Menu,
-  MenuItem,
-  Stack,
-  TextField,
-  Typography,
-  useMediaQuery
-} from '@mui/material';
-
-// third-party
-import * as yup from 'yup';
-import uniqueId from 'lodash/uniqueId';
-import { Controller, FormProvider, useForm } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import ReactMarkdown from 'react-markdown';
-import gfm from 'remark-gfm';
-
-// project imports
-import Comment from './Comment';
-import MainCard from '../MainCard';
-import useAuth from 'hooks/useAuth';
-import AnimateButton from 'ui-component/extended/AnimateButton';
-import ImageList from 'ui-component/extended/ImageList';
-import Avatar from 'ui-component/extended/Avatar';
-
-// assets
-import ShareTwoToneIcon from '@mui/icons-material/ShareTwoTone';
-import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
-import PeopleAltTwoToneIcon from '@mui/icons-material/PeopleAltTwoTone';
-import ChatTwoToneIcon from '@mui/icons-material/ChatTwoTone';
-import ContentCopyTwoToneIcon from '@mui/icons-material/ContentCopyTwoTone';
-import MoreVertTwoToneIcon from '@mui/icons-material/MoreVertTwoTone';
-import ThumbUpAltTwoToneIcon from '@mui/icons-material/ThumbUpAltTwoTone';
-import ChatBubbleTwoToneIcon from '@mui/icons-material/ChatBubbleTwoTone';
-import useConfig from 'hooks/useConfig';
-
-const avatarImage = require.context('assets/images/profile', true);
-
-const validationSchema = yup.object().shape({
-  name: yup.string().required('Comment Field is Required')
-});
-
-// ==============================|| COMMENT TEXTFIELD ||============================== //
-
-const FormInput = ({ bug, label, size, fullWidth = true, name, required, ...others }) => {
-  let isError = false;
-  let errorMessage = '';
-  if (bug && Object.prototype.hasOwnProperty.call(bug, name)) {
-    isError = true;
-    errorMessage = bug[name].message;
-  }
-
-  return (
-    <>
-      <Controller
-        name={name}
-        defaultValue=""
-        render={({ field }) => (
-          <TextField
-            fullWidth={fullWidth}
-            size={size}
-            label={label}
-            InputLabelProps={{
-              className: required ? 'required-label' : '',
-              required: required || false
-            }}
-            error={isError}
-            {...field}
-          />
-        )}
-        {...others}
-      />
-      {errorMessage && (
-        <Grid item xs={12}>
-          <FormHelperText error>{errorMessage}</FormHelperText>
-        </Grid>
-      )}
-    </>
-  );
-};
-
-FormInput.propTypes = {
-  bug: PropTypes.object,
-  size: PropTypes.string,
-  label: PropTypes.string,
-  name: PropTypes.string,
-  required: PropTypes.bool,
-  fullWidth: PropTypes.bool
-};
-
-// ==============================|| SOCIAL PROFILE - POST ||============================== //
-
-const Post = ({ commentAdd, handleCommentLikes, handlePostLikes, handleReplayLikes, post, replyAdd }) => {
-  const theme = useTheme();
-
-  const { user } = useAuth();
-  const { id, data } = post;
-  let { profile } = post;
-
-  profile = { ...profile, name: user?.name || profile.name };
-
-  const { borderRadius } = useConfig();
-  const matchesXS = useMediaQuery(theme.breakpoints.down('md'));
-
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const [anchorSharedEl, setAnchorSharedEl] = React.useState(null);
-  const handleSharedClick = (event) => {
-    setAnchorSharedEl(event.currentTarget);
-  };
-
-  const handleSharedClose = () => {
-    setAnchorSharedEl(null);
-  };
-
-  const [openComment, setOpenComment] = React.useState(!(data.comments && data.comments.length > 0));
-  const handleChangeComment = () => {
-    setOpenComment((prev) => !prev);
-  };
-
-  let commentsResult = <></>;
-
-  if (data && data.comments) {
-    commentsResult = data.comments.map((comment) => (
-      <Comment
-        postId={id}
-        comment={comment}
-        key={comment.id}
-        user={profile}
-        replyAdd={replyAdd}
-        handleCommentLikes={handleCommentLikes}
-        handleReplayLikes={handleReplayLikes}
-      />
-    ));
-  }
-
-  const methods = useForm({
-    resolver: yupResolver(validationSchema)
-  });
-
-  const {
-    handleSubmit,
-    formState: { errors },
-    reset
-  } = methods;
-  const onSubmit = async (comment) => {
-    handleChangeComment();
-    const commentId = uniqueId('#COMMENT_');
-    const newComment = {
-      id: commentId,
-      profile,
-      data: {
-        comment: comment.name,
-        likes: {
-          like: false,
-          value: 0
-        },
-        replies: []
-      }
-    };
-    commentAdd(id, newComment);
-    reset({ name: '' });
-  };
-
-  return (
-    <MainCard>
-      <Grid container spacing={1}>
-        <Grid item xs={12}>
-          <Grid container wrap="nowrap" alignItems="center" spacing={1}>
-            <Grid item>
-              <Avatar alt="User 1" src={profile.avatar && avatarImage(`./${profile.avatar}`).default} />
-            </Grid>
-            <Grid item xs zeroMinWidth>
-              <Grid container alignItems="center" spacing={1}>
-                <Grid item>
-                  <Typography align="left" variant="h5" component="div">
-                    {profile.name}
-                  </Typography>
-                </Grid>
-                <Grid item>
-                  <Typography align="left" variant="caption">
-                    <FiberManualRecordIcon sx={{ width: '10px', height: '10px', opacity: 0.5, m: '0 5px' }} /> {profile.time}
-                  </Typography>
-                </Grid>
-              </Grid>
-            </Grid>
-            <Grid item>
-              <ButtonBase sx={{ borderRadius: '12px' }} onClick={handleClick}>
-                <Avatar
-                  variant="rounded"
-                  sx={{
-                    ...theme.typography.commonAvatar,
-                    ...theme.typography.smallAvatar,
-                    background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.secondary.light,
-                    color: theme.palette.mode === 'dark' ? theme.palette.dark.light : theme.palette.secondary.dark,
-                    zIndex: 1,
-                    transition: 'all .2s ease-in-out',
-                    '&[aria-controls="menu-list-grow"],&:hover': {
-                      background: theme.palette.secondary.main,
-                      color: theme.palette.secondary.light
-                    }
-                  }}
-                  aria-controls="menu-post"
-                  aria-haspopup="true"
-                >
-                  <MoreVertTwoToneIcon fontSize="inherit" />
-                </Avatar>
-              </ButtonBase>
-              <Menu
-                id="menu-post"
-                anchorEl={anchorEl}
-                keepMounted
-                open={Boolean(anchorEl)}
-                onClose={handleClose}
-                variant="selectedMenu"
-                anchorOrigin={{
-                  vertical: 'bottom',
-                  horizontal: 'right'
-                }}
-                transformOrigin={{
-                  vertical: 'top',
-                  horizontal: 'right'
-                }}
-              >
-                <MenuItem onClick={handleClose}>Edit</MenuItem>
-                <MenuItem onClick={handleClose}>Delete</MenuItem>
-              </Menu>
-            </Grid>
-          </Grid>
-        </Grid>
-
-        {/* post - content */}
-        <Grid
-          item
-          xs={12}
-          sx={{
-            '& > p': {
-              ...theme.typography.body1,
-              mb: 0
-            }
-          }}
-        >
-          <ReactMarkdown remarkPlugins={[gfm]}>{data.content}</ReactMarkdown>
-        </Grid>
-
-        {/* post - photo grid */}
-        {data && data.images && data.images.length > 0 && (
-          <Grid item xs={12}>
-            <ImageList itemData={data.images} />
-          </Grid>
-        )}
-
-        {/* post - video */}
-        {data.video && (
-          <Grid item xs={12} sx={{ '&.MuiGrid-root': { pt: 2 } }}>
-            <CardMedia
-              sx={{
-                borderRadius: `${borderRadius}px`,
-                height: 330,
-                [theme.breakpoints.down('xl')]: {
-                  height: 220
-                }
-              }}
-              component="iframe"
-              src={`https://www.youtube.com/embed/${data.video}`}
-            />
-          </Grid>
-        )}
-
-        {/* post - comment, likes and replay history */}
-        <Grid item xs={12}>
-          <Grid
-            container
-            alignItems="center"
-            justifyContent="space-between"
-            spacing={2}
-            sx={{ mt: 0, color: theme.palette.mode === 'dark' ? 'grey.700' : 'grey.800' }}
-          >
-            <Grid item>
-              <Stack direction="row" spacing={2}>
-                <Button
-                  variant="text"
-                  onClick={() => handlePostLikes(id)}
-                  color="inherit"
-                  size="small"
-                  startIcon={<ThumbUpAltTwoToneIcon color={data && data.likes && data.likes.like ? 'primary' : 'inherit'} />}
-                >
-                  {data && data.likes && data.likes.value ? data.likes.value : 0}
-                  <Typography color="inherit" sx={{ fontWeight: 500, ml: 0.5, display: { xs: 'none', sm: 'block' } }}>
-                    likes
-                  </Typography>
-                </Button>
-                <Button
-                  onClick={handleChangeComment}
-                  size="small"
-                  variant="text"
-                  color="inherit"
-                  startIcon={<ChatBubbleTwoToneIcon color="secondary" />}
-                >
-                  {data.comments ? data.comments.length : 0} comments
-                </Button>
-              </Stack>
-            </Grid>
-            <Grid item>
-              <IconButton onClick={handleSharedClick} size="large">
-                <ShareTwoToneIcon sx={{ width: '1rem', height: '1rem' }} />
-              </IconButton>
-              <Menu
-                id="menu-post"
-                anchorEl={anchorSharedEl}
-                keepMounted
-                open={Boolean(anchorSharedEl)}
-                onClose={handleSharedClose}
-                variant="selectedMenu"
-                anchorOrigin={{
-                  vertical: 'bottom',
-                  horizontal: 'right'
-                }}
-                transformOrigin={{
-                  vertical: 'top',
-                  horizontal: 'right'
-                }}
-                sx={{
-                  '& .MuiSvgIcon-root': {
-                    marginRight: '14px',
-                    fontSize: '1.25rem'
-                  }
-                }}
-              >
-                <MenuItem onClick={handleSharedClose}>
-                  <ShareTwoToneIcon fontSize="inherit" /> Share Now
-                </MenuItem>
-                <MenuItem onClick={handleSharedClose}>
-                  <PeopleAltTwoToneIcon fontSize="inherit" /> Share to Friends
-                </MenuItem>
-                <MenuItem onClick={handleSharedClose}>
-                  <ChatTwoToneIcon fontSize="inherit" /> Send in Messanger
-                </MenuItem>
-                <MenuItem onClick={handleSharedClose}>
-                  <ContentCopyTwoToneIcon fontSize="inherit" /> Copy Link
-                </MenuItem>
-              </Menu>
-            </Grid>
-          </Grid>
-        </Grid>
-        {/* add new comment */}
-        <Collapse in={openComment} sx={{ width: '100%' }}>
-          {openComment && (
-            <Grid item xs={12} sx={{ pt: 2 }}>
-              <form onSubmit={handleSubmit(onSubmit)}>
-                <Grid container spacing={2} alignItems="flex-start">
-                  <Grid item sx={{ display: { xs: 'none', sm: 'block' } }}>
-                    <Avatar sx={{ mt: 0.75 }} alt="User 1" src={profile.avatar && avatarImage(`./${profile.avatar}`).default} size="xs" />
-                  </Grid>
-                  <Grid item xs zeroMinWidth>
-                    <FormProvider {...methods}>
-                      <FormInput fullWidth name="name" label="Write a comment..." size={matchesXS ? 'small' : 'medium'} bug={errors} />
-                    </FormProvider>
-                  </Grid>
-                  <Grid item>
-                    <AnimateButton>
-                      <Button type="submit" variant="contained" color="secondary" size={matchesXS ? 'small' : 'large'} sx={{ mt: 0.5 }}>
-                        Comment
-                      </Button>
-                    </AnimateButton>
-                  </Grid>
-                </Grid>
-              </form>
-            </Grid>
-          )}
-        </Collapse>
-        {commentsResult}
-      </Grid>
-    </MainCard>
-  );
-};
-
-Post.propTypes = {
-  commentAdd: PropTypes.func,
-  handleCommentLikes: PropTypes.func,
-  handlePostLikes: PropTypes.func,
-  handleReplayLikes: PropTypes.func,
-  post: PropTypes.object,
-  replyAdd: PropTypes.func
-};
-
-export default Post;
diff --git a/src/ui-component/cards/RoundIconCard.js b/src/ui-component/cards/RoundIconCard.js
deleted file mode 100755
index 80f7564..0000000
--- a/src/ui-component/cards/RoundIconCard.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import PropTypes from 'prop-types';
-
-// material-ui
-import { Grid, IconButton, Stack, Typography } from '@mui/material';
-
-// project imports
-import MainCard from './MainCard';
-
-// ============================|| ROUND ICON CARD ||============================ //
-
-const RoundIconCard = ({ primary, secondary, content, iconPrimary, color, bgcolor }) => {
-  const IconPrimary = iconPrimary;
-  const primaryIcon = iconPrimary ? <IconPrimary fontSize="large" /> : null;
-
-  return (
-    <MainCard>
-      <Grid container alignItems="center" spacing={0} justifyContent="space-between">
-        <Grid item>
-          <Stack spacing={1}>
-            <Typography variant="h5" color="inherit">
-              {primary}
-            </Typography>
-            <Typography variant="h3">{secondary}</Typography>
-            <Typography variant="subtitle2" color="inherit">
-              {content}
-            </Typography>
-          </Stack>
-        </Grid>
-        <Grid item>
-          <IconButton sx={{ bgcolor, color, '& .MuiSvgIcon-root': { fontSize: '1.5rem' } }} size="large">
-            {primaryIcon}
-          </IconButton>
-        </Grid>
-      </Grid>
-    </MainCard>
-  );
-};
-
-RoundIconCard.propTypes = {
-  primary: PropTypes.string,
-  secondary: PropTypes.string,
-  content: PropTypes.string,
-  iconPrimary: PropTypes.object,
-  color: PropTypes.string,
-  bgcolor: PropTypes.string
-};
-
-export default RoundIconCard;
diff --git a/src/ui-component/cards/UserProfileCard.js b/src/ui-component/cards/UserProfileCard.js
deleted file mode 100755
index 17379b4..0000000
--- a/src/ui-component/cards/UserProfileCard.js
+++ /dev/null
@@ -1,157 +0,0 @@
-import PropTypes from 'prop-types';
-
-// material-ui
-import { useTheme, styled } from '@mui/material/styles';
-import { Button, Card, CardContent, CardMedia, Chip, Grid, Typography } from '@mui/material';
-
-// project imports
-import Avatar from '../extended/Avatar';
-import { gridSpacing } from 'store/constant';
-
-// assets
-import FacebookIcon from '@mui/icons-material/Facebook';
-import TwitterIcon from '@mui/icons-material/Twitter';
-import LinkedInIcon from '@mui/icons-material/LinkedIn';
-import ChatBubbleTwoToneIcon from '@mui/icons-material/ChatBubbleTwoTone';
-
-const avatarImage = require.context('assets/images/profile', true);
-
-// styles
-const FacebookWrapper = styled(Button)({
-  padding: 8,
-  background: 'rgba(66, 103, 178, 0.2)',
-  '& svg': {
-    color: '#4267B2'
-  },
-  '&:hover': {
-    background: '#4267B2',
-    '& svg': {
-      color: '#fff'
-    }
-  }
-});
-
-const TwitterWrapper = styled(Button)({
-  padding: 8,
-  background: 'rgba(29, 161, 242, 0.2)',
-  '& svg': {
-    color: '#1DA1F2'
-  },
-  '&:hover': {
-    background: '#1DA1F2',
-    '& svg': {
-      color: '#fff'
-    }
-  }
-});
-
-const LinkedInWrapper = styled(Button)({
-  padding: 8,
-  background: 'rgba(14, 118, 168, 0.12)',
-  '& svg': {
-    color: '#0E76A8'
-  },
-  '&:hover': {
-    background: '#0E76A8',
-    '& svg': {
-      color: '#fff'
-    }
-  }
-});
-
-// ==============================|| USER PROFILE CARD ||============================== //
-
-const UserProfileCard = ({ avatar, name, profile, role, status }) => {
-  const theme = useTheme();
-  const avatarProfile = avatar && avatarImage(`./${avatar}`).default;
-  const imageProfile = profile && avatarImage(`./${profile}`).default;
-
-  return (
-    <Card
-      sx={{
-        background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[50],
-        border: theme.palette.mode === 'dark' ? 'none' : '1px solid',
-        borderColor: theme.palette.grey[100],
-        textAlign: 'center'
-      }}
-    >
-      <CardMedia component="img" image={imageProfile} title="Slider5 image" sx={{ height: '125px' }} />
-      <CardContent sx={{ p: 2, pb: '16px !important' }}>
-        <Grid container spacing={gridSpacing}>
-          <Grid item xs={12}>
-            <Grid container spacing={gridSpacing}>
-              <Grid item xs={12}>
-                <Avatar alt={name} src={avatarProfile} sx={{ width: 72, height: 72, m: '-50px auto 0' }} />
-              </Grid>
-            </Grid>
-          </Grid>
-          <Grid item xs={12} alignItems="center">
-            <Grid container spacing={1}>
-              <Grid item xs={12}>
-                <Typography variant="h4">{name}</Typography>
-              </Grid>
-              <Grid item xs={12}>
-                <Typography variant="body2">{role}</Typography>
-              </Grid>
-              <Grid item xs={12}>
-                {status === 'Active' ? (
-                  <Chip
-                    label="Active"
-                    size="small"
-                    sx={{
-                      bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : 'success.light',
-                      color: 'success.dark'
-                    }}
-                  />
-                ) : (
-                  <Chip
-                    label="Rejected"
-                    size="small"
-                    sx={{
-                      bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : 'error.light',
-                      color: 'error.dark'
-                    }}
-                  />
-                )}
-              </Grid>
-            </Grid>
-          </Grid>
-          <Grid item xs={12}>
-            <Grid container spacing={2}>
-              <Grid item xs={4}>
-                <FacebookWrapper fullWidth>
-                  <FacebookIcon />
-                </FacebookWrapper>
-              </Grid>
-              <Grid item xs={4}>
-                <TwitterWrapper fullWidth>
-                  <TwitterIcon />
-                </TwitterWrapper>
-              </Grid>
-              <Grid item xs={4}>
-                <LinkedInWrapper fullWidth>
-                  <LinkedInIcon />
-                </LinkedInWrapper>
-              </Grid>
-            </Grid>
-          </Grid>
-          <Grid item xs={12}>
-            <Button variant="outlined" fullWidth startIcon={<ChatBubbleTwoToneIcon />}>
-              Message
-            </Button>
-          </Grid>
-        </Grid>
-      </CardContent>
-    </Card>
-  );
-};
-
-UserProfileCard.propTypes = {
-  avatar: PropTypes.string,
-  name: PropTypes.string,
-  profile: PropTypes.string,
-  role: PropTypes.string,
-  status: PropTypes.string
-};
-
-export default UserProfileCard;
diff --git a/src/ui-component/cards/UserSimpleCard.js b/src/ui-component/cards/UserSimpleCard.js
deleted file mode 100755
index 20b03a9..0000000
--- a/src/ui-component/cards/UserSimpleCard.js
+++ /dev/null
@@ -1,185 +0,0 @@
-import PropTypes from 'prop-types';
-import { useState } from 'react';
-
-// material-ui
-import { useTheme, styled } from '@mui/material/styles';
-import { Button, Card, Chip, Grid, IconButton, Menu, MenuItem, Typography } from '@mui/material';
-
-// project imports
-import Avatar from '../extended/Avatar';
-import { gridSpacing } from 'store/constant';
-
-// assets
-import MoreHorizOutlinedIcon from '@mui/icons-material/MoreHorizOutlined';
-import FacebookIcon from '@mui/icons-material/Facebook';
-import TwitterIcon from '@mui/icons-material/Twitter';
-import LinkedInIcon from '@mui/icons-material/LinkedIn';
-
-const avatarImage = require.context('assets/images/profile', true);
-
-// styles
-const FacebookWrapper = styled(Button)({
-  padding: 8,
-  background: 'rgba(66, 103, 178, 0.2)',
-  '& svg': {
-    color: '#4267B2'
-  },
-  '&:hover': {
-    background: '#4267B2',
-    '& svg': {
-      color: '#fff'
-    }
-  }
-});
-
-const TwitterWrapper = styled(Button)({
-  padding: 8,
-  background: 'rgba(29, 161, 242, 0.2)',
-  '& svg': {
-    color: '#1DA1F2'
-  },
-  '&:hover': {
-    background: '#1DA1F2',
-    '& svg': {
-      color: '#fff'
-    }
-  }
-});
-
-const LinkedInWrapper = styled(Button)({
-  padding: 8,
-  background: 'rgba(14, 118, 168, 0.12)',
-  '& svg': {
-    color: '#0E76A8'
-  },
-  '&:hover': {
-    background: '#0E76A8',
-    '& svg': {
-      color: '#fff'
-    }
-  }
-});
-
-// ==============================|| USER SIMPLE CARD ||============================== //
-
-const UserSimpleCard = ({ avatar, name, status }) => {
-  const theme = useTheme();
-  const avatarProfile = avatar && avatarImage(`./${avatar}`).default;
-
-  const [anchorEl, setAnchorEl] = useState(null);
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    <Card
-      sx={{
-        p: 2,
-        background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[50],
-        border: '1px solid',
-        borderColor: theme.palette.mode === 'dark' ? 'transparent' : theme.palette.grey[100],
-        '&:hover': {
-          border: `1px solid${theme.palette.primary.main}`
-        }
-      }}
-    >
-      <Grid container spacing={gridSpacing}>
-        <Grid item xs={12}>
-          <Grid container spacing={gridSpacing}>
-            <Grid item xs zeroMinWidth>
-              <Avatar alt={name} src={avatarProfile} sx={{ width: 72, height: 72 }} />
-            </Grid>
-            <Grid item>
-              <IconButton size="small" sx={{ mt: -0.75, mr: -0.75 }} onClick={handleClick}>
-                <MoreHorizOutlinedIcon
-                  fontSize="small"
-                  color="inherit"
-                  aria-controls="menu-friend-card"
-                  aria-haspopup="true"
-                  sx={{ opacity: 0.6 }}
-                />
-              </IconButton>
-              <Menu
-                id="menu-simple-card"
-                anchorEl={anchorEl}
-                keepMounted
-                open={Boolean(anchorEl)}
-                onClose={handleClose}
-                variant="selectedMenu"
-                anchorOrigin={{
-                  vertical: 'bottom',
-                  horizontal: 'right'
-                }}
-                transformOrigin={{
-                  vertical: 'top',
-                  horizontal: 'right'
-                }}
-              >
-                <MenuItem onClick={handleClose}>Edit</MenuItem>
-                <MenuItem onClick={handleClose}>Delete</MenuItem>
-              </Menu>
-            </Grid>
-          </Grid>
-        </Grid>
-        <Grid item xs={12} alignItems="center">
-          <Grid container spacing={gridSpacing}>
-            <Grid item xs zeroMinWidth>
-              <Typography variant="h4">{name}</Typography>
-            </Grid>
-            <Grid item>
-              {status === 'Active' ? (
-                <Chip
-                  label="Active"
-                  size="small"
-                  sx={{
-                    bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : 'success.light',
-                    color: 'success.dark'
-                  }}
-                />
-              ) : (
-                <Chip
-                  label="Rejected"
-                  size="small"
-                  sx={{
-                    bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : 'error.light',
-                    color: 'error.dark'
-                  }}
-                />
-              )}
-            </Grid>
-          </Grid>
-        </Grid>
-        <Grid item xs={12}>
-          <Grid container spacing={2}>
-            <Grid item xs={4}>
-              <FacebookWrapper fullWidth>
-                <FacebookIcon fontSize="small" />
-              </FacebookWrapper>
-            </Grid>
-            <Grid item xs={4}>
-              <TwitterWrapper fullWidth>
-                <TwitterIcon fontSize="small" />
-              </TwitterWrapper>
-            </Grid>
-            <Grid item xs={4}>
-              <LinkedInWrapper fullWidth>
-                <LinkedInIcon fontSize="small" />
-              </LinkedInWrapper>
-            </Grid>
-          </Grid>
-        </Grid>
-      </Grid>
-    </Card>
-  );
-};
-
-UserSimpleCard.propTypes = {
-  avatar: PropTypes.string,
-  name: PropTypes.string,
-  status: PropTypes.string
-};
-
-export default UserSimpleCard;