diff --git a/front-end/src/App.css b/front-end/src/App.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/front-end/src/App.js b/front-end/src/App.js
index bac06d19..8d7c2616 100644
--- a/front-end/src/App.js
+++ b/front-end/src/App.js
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import './App.css';
 import Login from './pages/Login';
 import Home from './pages/Home';
 import Profile from './pages/Profile';
@@ -202,13 +201,13 @@ export default function App() {
           <Navbar employees={uidEmployees} uid={data.uid} isAdmin={isAdmin} logout={logout.bind(this)} getKudos={getKudos.bind(this)}/>
             <div className={classes.content}>
               <Route exact path="/home" render={(props) => (
-                <Home {...props} data={data} uri={uri} employees={uidEmployees} kudos={kudos} getKudos={getKudos.bind(this)} reactions={reactions}/>
+                <Home {...props} data={data} uri={uri} employees={uidEmployees} kudos={kudos} isAdmin={isAdmin} getKudos={getKudos.bind(this)} reactions={reactions}/>
               )}/>
               <Route exact path="/profile" render={(props) => (
-                <Profile {...props} data={data} uri={uri} employees={uidEmployees} uid={data.uid} reactions={reactions} reloadEmp={reloadEmployees.bind(this)}/>
+                <Profile {...props} data={data} uri={uri} employees={uidEmployees} uid={data.uid} reactions={reactions} isAdmin={isAdmin} reloadEmp={reloadEmployees.bind(this)}/>
               )}/>
               {isAdmin ? <Route exact path="/admin" render={(props) => (
-                <Admin data={data} uri={uri} employees={uidEmployees} kudos={kudos} getKudos={getKudos.bind(this)}/>
+                <Admin data={data} uri={uri} employees={uidEmployees} kudos={kudos} isAdmin={isAdmin} reactions={reactions} getKudos={getKudos.bind(this)}/>
               )}/> : null}
             </div>
         </div>
diff --git a/front-end/src/components/AddKudo.js b/front-end/src/components/AddKudo.js
index beec6288..5ed7566c 100644
--- a/front-end/src/components/AddKudo.js
+++ b/front-end/src/components/AddKudo.js
@@ -1,6 +1,17 @@
-import { Button, Card, CardContent, Chip, TextField, Grid } from '@material-ui/core';
+import { Button, Card, CardContent, Chip, TextField, Grid, Modal, Fade } from '@material-ui/core';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import React, { useState, useEffect } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+    modalCenter: {
+      position: 'absolute',
+      top: '30%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      outline: '0',
+    },
+});
 
 // props: getKudos, optional: toggleShowAddKudos
 export default function AddKudo(props) {
@@ -11,7 +22,15 @@ export default function AddKudo(props) {
     const [uid, setUid] = useState('');
     const [nameMapUid, setNameMapUid] = useState('');
     const [coreValues, setCoreValues] = useState(['loading']);
+    const [showAddSuccess, toggleShowAddSuccess] = useState(false);
     const [tags, updateTags] = useState('');
+    const classes = useStyles();
+    
+    useEffect(() => {
+        if(showAddSuccess) {
+          setTimeout(() => toggleShowAddSuccess(false), 1500)
+        }
+    }, [showAddSuccess])
 
     useEffect(() => {
         const uri = localStorage.getItem('uri');
@@ -78,6 +97,11 @@ export default function AddKudo(props) {
             if (props.toggleShowAddKudo) {
                 props.toggleShowAddKudo(false);
             }
+            if (props.toggleShowAddSuccess) {
+                props.toggleShowAddSuccess(true);
+            } else {
+                toggleShowAddSuccess(true)
+            }
         });
         setName('');
         updateKudo('');
@@ -85,75 +109,91 @@ export default function AddKudo(props) {
     }
 
     return (
-        <Card style={{width: '600px', margin: '10px'}} elevation={0}>
-            <CardContent>
-                <form onSubmit={(e) => {e.preventDefault(); handleSumbit();}}>
-                    <Grid
-                     container
-                     direction="column"
-                     justify="space-evenly"
-                     alignItems="stretch"
-                     spacing={1}
-                     >
-                        <Grid item>
-                            <Autocomplete
-                                id='toField'
-                                value={name !== '' ? name : null}
-                                options={Object.keys(nameMapUid)}
-                                getOptionLabel={(option) => option}
-                                onChange={(event, newValue) => {
-                                    setName(newValue);
-                                }}
-                                renderInput={(params) => <TextField {...params} required label="Send To..." variant="outlined"/>}
-                            />
-                        </Grid>
-                        <Grid item>
-                            <TextField
-                                required
-                                label='Message'
-                                variant='outlined'
-                                multiline
-                                rows={4}
-                                value={kudo}
-                                fullWidth
-                                onChange={(e) => updateKudo(e.target.value)}
-                            />
-                        </Grid>
-                        <Grid item>
-                            <Autocomplete
-                                multiple
-                                id="tags-outlined"
-                                options={coreValues}
-                                getOptionLabel={(option) => option.value}
-                                renderTags={() => (
-                                    tags.map((option, index) => (
-                                        <Chip
-                                        style={{backgroundColor: option.color}}
-                                        label={option.value}
-                                        key={index}
-                                       />
-                                    ))
-                                )}
-                                onChange={(event, newValue) => {
-                                    updateTags(newValue)
-                                }}
-                                renderInput={(params) => (
-                                    <TextField
-                                        {...params}
-                                        required={tags.length === 0}
-                                        variant="outlined"
-                                        label="Core Values"
-                                        placeholder="Core Values"
-                                    />
-                                )}
-                            />
-                        </Grid>
-                        <Grid item container justify='flex-end'>
-                            <Button type="submit" variant="contained" color="primary">Submit Kudo</Button>
+        <div>
+            <Modal
+            open={showAddSuccess}
+            onClose={() => toggleShowAddSuccess(false)}
+            aria-labelledby="report-confirmed"
+            aria-describedby="report-kudo"
+            >
+                <Fade in={showAddSuccess}>
+                    <div className={classes.modalCenter}>
+                        <Card style={{width: '600px', margin: '10px', backgroundColor: '#00FF00', textAlign: 'center'}} elevation={0}>
+                        <h1>Kudo Submitted Succesfully</h1>
+                        </Card>
+                    </div>
+                </Fade>
+            </Modal>
+            <Card style={{width: '600px', margin: '10px'}} elevation={0}>
+                <CardContent>
+                    <form onSubmit={(e) => {e.preventDefault(); handleSumbit();}}>
+                        <Grid
+                        container
+                        direction="column"
+                        justify="space-evenly"
+                        alignItems="stretch"
+                        spacing={1}
+                        >
+                            <Grid item>
+                                <Autocomplete
+                                    id='toField'
+                                    value={name !== '' ? name : null}
+                                    options={Object.keys(nameMapUid)}
+                                    getOptionLabel={(option) => option}
+                                    onChange={(event, newValue) => {
+                                        setName(newValue);
+                                    }}
+                                    renderInput={(params) => <TextField {...params} required label="Send To..." variant="outlined"/>}
+                                />
+                            </Grid>
+                            <Grid item>
+                                <TextField
+                                    required
+                                    label='Message'
+                                    variant='outlined'
+                                    multiline
+                                    rows={4}
+                                    value={kudo}
+                                    fullWidth
+                                    onChange={(e) => updateKudo(e.target.value)}
+                                />
+                            </Grid>
+                            <Grid item>
+                                <Autocomplete
+                                    multiple
+                                    id="tags-outlined"
+                                    options={coreValues}
+                                    getOptionLabel={(option) => option.value}
+                                    renderTags={() => (
+                                        tags.map((option, index) => (
+                                            <Chip
+                                            style={{backgroundColor: option.color}}
+                                            label={option.value}
+                                            key={index}
+                                        />
+                                        ))
+                                    )}
+                                    onChange={(event, newValue) => {
+                                        updateTags(newValue)
+                                    }}
+                                    renderInput={(params) => (
+                                        <TextField
+                                            {...params}
+                                            required={tags.length === 0}
+                                            variant="outlined"
+                                            label="Core Values"
+                                            placeholder="Core Values"
+                                        />
+                                    )}
+                                />
+                            </Grid>
+                            <Grid item container justify='flex-end'>
+                                <Button type="submit" variant="contained" color="primary">Submit Kudo</Button>
+                            </Grid>
                         </Grid>
-                    </Grid>
-                </form>
-            </CardContent>
-        </Card>
+                    </form>
+                </CardContent>
+            </Card>
+        </div>
     );
 }
diff --git a/front-end/src/components/Kudo.js b/front-end/src/components/Kudo.js
index 067a56a8..56773d28 100644
--- a/front-end/src/components/Kudo.js
+++ b/front-end/src/components/Kudo.js
@@ -1,31 +1,31 @@
-import React from 'react'
-import {Grid, Card, CardContent, Typography, CardActions, Chip, Avatar} from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles';
-import { withStyles } from '@material-ui/core/styles';
+import React, { useEffect } from 'react'
+import {Grid, Card, CardContent, Typography, CardActions, Chip, Avatar, Modal, Menu, MenuItem, Fade} from '@material-ui/core'
+import { makeStyles, withStyles } from '@material-ui/core/styles';
 import MuiAccordion from '@material-ui/core/Accordion';
 import MuiAccordionSummary from '@material-ui/core/AccordionSummary';
 import MuiAccordionDetails from '@material-ui/core/AccordionDetails';
 import Reactions from './Reactions';
+import ReportModal from './ReportModal';
+import { useState } from 'react'
+import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
 
 const useStyles = makeStyles({
     root: {
       display: 'flex',
     },
     recv: {
-// <<<<<<< reactions
-//       display:'inline',
-//       color:'#a1a1a1',
-//       marginRight:'5px',
-//       paddingLeft: '2px',
-//       paddingRight: '2px',
-// =======
-        display:'inline',
-        backgroundColor:'#F2F2F2',
-        color:'#616161',
-        marginRight:'5px',
-        paddingLeft: '2px',
-        paddingRight: '2px',
-// >>>>>>> main
+      display:'inline',
+      color:'#A1A1A1',
+      marginRight:'5px', 
+      paddingLeft: '2px',
+      paddingRight: '2px',
+    }, 
+    modalCenter: {
+      position: 'absolute',
+      top: '30%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      outline: '0',
     },
 });
 
@@ -73,14 +73,120 @@ const Accordion = withStyles({
 //to, from, message, tags, kudoID, kudoReactions, compReactions
 export default function Kudo(props) {
     const classes = useStyles();
-    const [expanded, setExpanded] = React.useState(false);
+    const [expanded, setExpanded] = useState(false);
+    const [showReport, toggleShowReport] = useState(false);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [showSuccessReport, toggleShowSuccessReport] = useState(false);
+    const [showSuccessDelete, toggleShowSuccessDelete] = useState(false);
+
+    useEffect(() => {
+      if(showSuccessReport) {
+        setTimeout(() => toggleShowSuccessReport(false), 1500)
+      }
+    }, [showSuccessReport])
+
+    useEffect(() => {
+      if(showSuccessDelete) {
+        setTimeout(() => {
+          props.getKudos();
+          toggleShowSuccessDelete(false);
+          if(props.getReportedKudos) {
+            props.getReportedKudos()
+          }
+        }, 1500)
+      }
+    }, [showSuccessDelete])
+
+    const handleClick = event => {
+      setAnchorEl(event.currentTarget);
+    };
+  
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
+
     const handleChange = (panel) => (event, isExpanded) => {
         setExpanded(isExpanded ? panel : false);
     };
 
+    function deleteSelf() {
+      const kid = props.kudoID
+      const uri = localStorage.getItem('uri')
+      fetch('http://localhost:5000/api/data/delete_kudo',
+      {
+        method: 'POST',
+        headers: {
+          "Accept": "application/json",
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({uri, kid})
+      })
+      .then(response => response.json()).then(data => {
+        if(data) {
+          handleClose();
+          toggleShowSuccessDelete(true)
+        }
+      });
+    }
+
     return(
+      <div>
+        <Modal
+          open={showReport}
+          onClose={() => toggleShowReport(false)}
+          aria-labelledby="report-modal"
+          aria-describedby="report-kudo"
+        >
+          <Fade in={showReport}>
+            <div className={classes.modalCenter}>
+              <ReportModal kid={props.kudoID} toggleShowReport={toggleShowReport} toggleShowSuccess={toggleShowSuccessReport}/>
+            </div>
+          </Fade>
+        </Modal>
+        <Modal
+          open={showSuccessReport}
+          onClose={() => toggleShowSuccessReport(false)}
+          aria-labelledby="report-confirmed"
+          aria-describedby="report-kudo"
+        >
+          <Fade in={showSuccessReport}>
+            <div className={classes.modalCenter}>
+              <Card style={{width: '600px', margin: '10px', backgroundColor: '#FF0000', textAlign: 'center'}} elevation={0}>
+                <h1>Kudo Reported Successfully</h1>
+              </Card>
+            </div>
+          </Fade>
+        </Modal>
+        <Modal
+          open={showSuccessDelete}
+          onClose={() => toggleShowSuccessDelete(false)}
+          aria-labelledby="delete-confirmed"
+          aria-describedby="delete-kudo"
+        >
+          <Fade in={showSuccessDelete}>
+            <div className={classes.modalCenter}>
+              <Card style={{width: '600px', margin: '10px', backgroundColor: '#FF0000', textAlign: 'center'}} elevation={0}>
+                <h1>Kudo Deleted Successfully</h1>
+              </Card>
+            </div>
+          </Fade>
+        </Modal>
+        <Menu
+          id="report-delete-menu"
+          anchorEl={anchorEl}
+          keepMounted
+          open={Boolean(anchorEl)}
+          onClose={handleClose}
+        >
+          <MenuItem onClick={() => { handleClose(); toggleShowReport(true)}}>Report</MenuItem>
+          {props.isAdmin ? <MenuItem onClick={() => deleteSelf()}>Delete</MenuItem>
+          : null}
+        </Menu>
         <Card className={classes.root} style={{width: '600px', margin: '10px'}}>
             <CardContent style={{padding:'5px', width: '100%'}}>
+                <div style={{width: '100%'}}>
+                  <MoreHorizIcon onClick={handleClick} style={{display: 'block', marginLeft: 'auto', marginRight: '0'}}/>
+                </div>
                 <Accordion square expanded={expanded === 'panel'} onChange={handleChange('panel')}>
                     <AccordionSummary
                     aria-controls="panelbh-content"
@@ -125,5 +231,6 @@ export default function Kudo(props) {
                 <Reactions kudoID={props.kudoID} kudoReactions={props.kudoReactions} compReactions={props.compReactions}/>
             </CardContent>
         </Card>
+      </div>
     )
 }
diff --git a/front-end/src/components/Navbar.js b/front-end/src/components/Navbar.js
index 7cc6b728..9fa5f8bf 100644
--- a/front-end/src/components/Navbar.js
+++ b/front-end/src/components/Navbar.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { makeStyles } from '@material-ui/core/styles';
-import {Drawer, CssBaseline, List, MenuList, MenuItem , Button, Avatar, Box, Grid, Typography, Modal} from '@material-ui/core'
+import {Drawer, CssBaseline, List, MenuList, MenuItem , Button, Avatar, Box, Grid, Typography, Modal, Card, Fade} from '@material-ui/core'
 import Emoji from '../components/Emoji';
 import AddKudo from "./AddKudo";
 import { useHistory } from "react-router-dom";
@@ -16,6 +16,7 @@ const useStyles = makeStyles((theme) => ({
     width: drawerWidth,
     backgroundColor: theme.palette.background.default,
     paddingLeft: '80px',
+    overflowX: 'hidden',
   },
   menuItem: {
     marginLeft: '0px',
@@ -54,6 +55,7 @@ export default function Navbar(props) {
   const [position, setEmployeePosition] = useState('');
   const [avatar, setAvatar] = useState('');
   const [showAddKudo, toggleShowAddKudo] = useState(false);
+  const [showAddSuccess, toggleShowAddSuccess] = useState(false);
   let history = useHistory();
 
   useEffect(() => {
@@ -64,6 +66,12 @@ export default function Navbar(props) {
     }
   }, [props.employees]);
 
+  useEffect(() => {
+    if(showAddSuccess) {
+      setTimeout(() => toggleShowAddSuccess(false), 1500)
+    }
+  }, [showAddSuccess])
+
   return (
     <div>
       <CssBaseline/>
@@ -73,9 +81,25 @@ export default function Navbar(props) {
         aria-labelledby="add-kudo-modal"
         aria-describedby="add-kudo"
       >
-        <div className={classes.modalCenter}>
-          <AddKudo getKudos={props.getKudos} toggleShowAddKudo={toggleShowAddKudo}/>
-        </div>
+        <Fade in={showAddKudo}>
+          <div className={classes.modalCenter}>
+            <AddKudo getKudos={props.getKudos} toggleShowAddKudo={toggleShowAddKudo} toggleShowAddSuccess={toggleShowAddSuccess}/>
+          </div>
+        </Fade>
+      </Modal>
+      <Modal
+        open={showAddSuccess}
+        onClose={() => toggleShowAddSuccess(false)}
+        aria-labelledby="report-confirmed"
+        aria-describedby="report-kudo"
+      >
+        <Fade in={showAddSuccess}>
+          <div className={classes.modalCenter}>
+            <Card style={{width: '600px', margin: '10px', backgroundColor: '#00FF00', textAlign: 'center'}} elevation={0}>
+              <h1>Kudo Submitted Succesfully</h1>
+            </Card>
+          </div>
+        </Fade>
       </Modal>
       <Drawer
         className={classes.drawer}
diff --git a/front-end/src/components/ReportModal.js b/front-end/src/components/ReportModal.js
new file mode 100644
index 00000000..2f5390cf
--- /dev/null
+++ b/front-end/src/components/ReportModal.js
@@ -0,0 +1,85 @@
+import { Button, Card, CardContent, TextField, Grid, withStyles } from '@material-ui/core';
+import React, { useState, useEffect } from 'react';
+import red from "@material-ui/core/colors/red"
+import PropTypes from 'prop-types'
+
+const styles = theme => ({
+    contained: {
+        color: theme.palette.getContrastText(red[500]),
+        backgroundColor: red[500],
+        "&:hover": {
+            backgroundColor: red[700],
+            "@media (hover: none)": {
+                backgroundColor: red[500]
+            }
+        }
+    }
+})
+
+// props: classes, kid={props.kudoID}, toggleShowReport={toggleShowReport}
+function ReportModal(props) {
+    const { classes, kid, toggleShowReport, toggleShowSuccess } = props;
+    const [reason, updateReason] = useState('')
+    
+    function handleSumbit() {
+        const uri = localStorage.getItem('uri');
+        const uid = JSON.parse(localStorage.getItem('data')).uid
+        fetch('http://localhost:5000/api/data/report_kudo',
+        {
+            method: 'POST',
+            headers: {
+              "Accept": "application/json",
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify({uri, uid, kid, reason})
+        })
+        .then(response => {
+            if (toggleShowReport) {
+                toggleShowReport(false);
+                toggleShowSuccess(true);
+            }
+        });
+        updateReason('');
+    }
+
+    return (
+        <Card style={{width: '600px', margin: '10px'}} elevation={0}>
+            <CardContent>
+                <form onSubmit={(e) => {e.preventDefault(); handleSumbit();}}>
+                    <Grid
+                     container
+                     direction="column"
+                     justify="space-evenly"
+                     alignItems="stretch"
+                     spacing={1}
+                     >
+                        <Grid item>
+                            <TextField
+                                required
+                                label='Report Reason'
+                                variant='outlined'
+                                multiline
+                                rows={4}
+                                value={reason}
+                                fullWidth
+                                onChange={(e) => updateReason(e.target.value)}
+                            />
+                        </Grid>
+                        <Grid item container justify='flex-end'>
+                            <Button type="submit" className={classes.contained}>Submit Report</Button>
+                        </Grid>
+                    </Grid>
+                </form>
+            </CardContent>
+        </Card>
+    );
+}
+
+ReportModal.propTypes = {
+    classes: PropTypes.object.isRequired,
+    kid: PropTypes.string.isRequired,
+    toggleShowReport: PropTypes.func.isRequired,
+    toggleShowSuccess: PropTypes.func.isRequired,
+};
+
+export default withStyles(styles)(ReportModal)
\ No newline at end of file
diff --git a/front-end/src/pages/Admin.js b/front-end/src/pages/Admin.js
index c3393355..4fbfedec 100644
--- a/front-end/src/pages/Admin.js
+++ b/front-end/src/pages/Admin.js
@@ -1,43 +1,46 @@
 import React, { useState, useEffect } from "react";
 import {
   AppBar,
+  Card,
   Divider,
   Grid,
+  Paper,
   Toolbar,
   Typography,
 } from "@material-ui/core";
 import { makeStyles } from '@material-ui/core/styles';
-import Navbar from '../components/Navbar';
-import Rockstar from '../components/Rockstar';
-import Kudo from '../components/Kudo';
 import Values from "../components/Values";
 import Emojis from "../components/Emojis";
 import ExportData from "../components/ExportData";
+import Kudo from "../components/Kudo"
 
 const useStyles = makeStyles(theme => ({
-  kudos: {
-    paddingTop: theme.spacing(3),
-    paddingLeft: theme.spacing(6),
-  },
   appBar: {
     backgroundColor: theme.palette.background.default,
     color: theme.palette.text.primary,
   },
   stop: {
     backgroundColor: theme.palette.background.default,
+  },
+  reported: {
+   padding: theme.spacing(2),
+  },
+  reports: {
+    border: '1px solid rgba(255, 255, 255, 0.12)'
+  },
+  reasons: {
+    margin: theme.spacing(1),
+    padding: theme.spacing(1),
   }
 }));
 
 export default function Home(props) {
   const [company, setCompany] = useState('');
+  const [reportedKudos, setReportedKudos] = useState('')
   const classes = useStyles();
 
-  // runs on reload/first visit, calls getKudos() and
-  // sets company name from uri
   useEffect(() => {
-    console.log(props.data);
-    console.log(props.uri);
-    props.getKudos();
+    getReportedKudos();
     const companies = {
       'starship-entertainment': 'Starship Entertainment',
       'outback-tech': 'Outback Technology',
@@ -46,6 +49,24 @@ export default function Home(props) {
     setCompany(companies[props.uri]);
   }, []);
 
+  function getReportedKudos() {
+    const uri = props.uri
+    fetch('http://localhost:5000/api/data/reported_kudo',
+    {
+      method: 'POST',
+      headers: {
+        "Accept": "application/json",
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({uri})
+    })
+    .then(response => response.json()).then(data => {
+      if(data) {
+        setReportedKudos(data)
+      }
+    });
+  }
+
   return (
     <div className={classes.stop}>
       <AppBar position="sticky" elevation={0} className={classes.appBar}>
@@ -54,28 +75,65 @@ export default function Home(props) {
         </Toolbar>
         <Divider variant="middle"/>
       </AppBar>
-      <Grid container justify="space-between">
+      <Grid container direction="column" justify="flex-start" alignItems="center">
         <Grid
-        item xs={16}
+        item xs={12}
         container
-        
         direction="row"
-        justify="space-evenly"
-        alignItems="center"
-        className={classes.kudos}>
+        justify="center" alignItems="center"
+        >
           <Values getKudos={props.getKudos}/>
           <Emojis getKudos={props.getKudos}/>
         </Grid>
-        <Grid
-        item xl={32}
-        container
-        direction="row"
-        alignItems="center"
-        justify="space-around"
-        className={classes.kudos}
-        >
+        <Grid item xs={12}>
           <ExportData getKudos={props.getKudos}/>
         </Grid>
+        <Grid item xs={12}>
+          <Paper style={{minWidth:"650px", minHeight:"50px"}}>
+            {props.employees && reportedKudos && reportedKudos.length !== 0 ? reportedKudos.map((kudo, index) => {
+              return (
+                <div className={classes.reported}>
+                  <div className={classes.reports}>
+                    <Kudo
+                      to={props.employees[kudo.to].name}
+                      avatar={props.employees[kudo.to].avatar}
+                      from={props.employees[kudo.from].name}
+                      message={kudo.kudo}
+                      tags={kudo.tags}
+                      kudoID={kudo._id}
+                      kudoReactions={kudo.reactions}
+                      compReactions={props.reactions}
+                      key={kudo._id}
+                      timestamp={kudo.time}
+                      getKudos={props.getKudos}
+                      isAdmin={props.isAdmin}
+                      getReportedKudos={getReportedKudos}
+                    />
+                    {kudo.report.map((value, index) => {
+                      return (
+                        <div>
+                          <Divider variant="middle"/>
+                          <Grid container direction="column" className={classes.reasons} >
+                            <Grid item xs={12}>
+                              <Typography variant="h6">Reported by: {props.employees[value.by].name}</Typography>
+                            </Grid>
+                            <Grid item xs={12}>
+                              <Typography variant="h6">Reason: {value.reason}</Typography>
+                            </Grid>
+                          </Grid>
+                        </div>
+                      )
+                    })}
+                  </div>
+                </div>
+              )
+            }) 
+            : <div style={{textAlign: 'center', paddingTop: '8px'}}>
+                <Typography variant="h6">No Reported Kudos</Typography>
+              </div>
+            }
+          </Paper>
+        </Grid>
       </Grid>
     </div>
   );
diff --git a/front-end/src/pages/Home.js b/front-end/src/pages/Home.js
index 899e4a74..b08edf7d 100644
--- a/front-end/src/pages/Home.js
+++ b/front-end/src/pages/Home.js
@@ -40,7 +40,6 @@ export default function Home(props) {
       'greenlife-consulting': 'Greenlife Consulting'
     }
     setCompany(companies[props.uri]);
-    // console.log(props.employees);
   }, []);
 
   return (
@@ -72,6 +71,8 @@ export default function Home(props) {
                       compReactions={props.reactions}
                       key={kudo._id}
                       timestamp={kudo.time}
+                      getKudos={props.getKudos}
+                      isAdmin={props.isAdmin}
                       />
           }) :
           <div style={{margin:'auto', marginTop: '50px'}}><CircularProgress/></div> }
diff --git a/front-end/src/pages/Profile.js b/front-end/src/pages/Profile.js
index 70fbd05e..e9269be4 100644
--- a/front-end/src/pages/Profile.js
+++ b/front-end/src/pages/Profile.js
@@ -282,7 +282,9 @@ export default function Profile(props) {
                       kudoReactions={kudo.reactions}
                       compReactions={props.reactions}
                       timestamp={kudo.time}
-                      avatar={employees[kudo.to].avatar} 
+                      avatar={employees[kudo.to].avatar}
+                      getKudos={props.getKudos} 
+                      isAdmin={props.isAdmin}
                       />
           }) : 'loading'  }</TabPanel>
           <TabPanel value="2">{outgoing && employees ? outgoing.map((kudo, index) => {
@@ -297,6 +299,8 @@ export default function Profile(props) {
                         key={kudo._id} 
                         timestamp={kudo.time}
                         avatar={employees[kudo.to].avatar}
+                        getKudos={props.getKudos}
+                        isAdmin={props.isAdmin}
                         />
             }) : 'loading'  }</TabPanel>
         </TabContext>