diff --git a/src/features/session/components/SessionDetailsComponent.js b/src/features/session/components/SessionDetailsComponent.js
new file mode 100644
index 0000000..236fb85
--- /dev/null
+++ b/src/features/session/components/SessionDetailsComponent.js
@@ -0,0 +1,87 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { withStyles, makeStyles } from "@material-ui/core/styles";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import Paper from "@material-ui/core/Paper";
+
+const StyledTableCell = withStyles((theme) => ({
+ head: {
+ backgroundColor: theme.palette.primary.main,
+ color: theme.palette.common.white
+ },
+ body: {
+ fontSize: 14
+ }
+}))(TableCell);
+
+const StyledTableRow = withStyles((theme) => ({
+ root: {
+ "&:nth-of-type(odd)": {
+ backgroundColor: theme.palette.action.hover
+ }
+ }
+}))(TableRow);
+
+function createData(name, calories, fat, carbs, protein) {
+ return { name, calories, fat, carbs, protein };
+}
+
+const rows = [
+ createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
+ createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
+ createData("Eclair", 262, 16.0, 24, 6.0),
+ createData("Cupcake", 305, 3.7, 67, 4.3),
+ createData("Gingerbread", 356, 16.0, 49, 3.9)
+];
+
+const useStyles = makeStyles({
+ table: {
+ minWidth: 700
+ }
+});
+
+const SessionDetailsComponent = () => {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+ Dessert (100g serving)
+ Calories
+ Fat (g)
+ Carbs (g)
+ Protein (g)
+
+
+
+ {rows.map((row) => (
+
+
+ {row.name}
+
+ {row.calories}
+ {row.fat}
+ {row.carbs}
+ {row.protein}
+
+ ))}
+
+
+
+ );
+};
+
+SessionDetailsComponent.propTypes = {};
+
+export default SessionDetailsComponent;
diff --git a/src/features/session/components/SessionListComponent.js b/src/features/session/components/SessionListComponent.js
index acc23f7..ff54010 100644
--- a/src/features/session/components/SessionListComponent.js
+++ b/src/features/session/components/SessionListComponent.js
@@ -3,10 +3,10 @@ import { makeStyles } from "@material-ui/core/styles";
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
-import Typography from "@material-ui/core/Typography";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import PropTypes from "prop-types";
import SessionSummary from "./SessionSummary";
+import SessionDetailsComponent from "./SessionDetailsComponent";
import Spinner from "../../../components/common/Spinner";
import { useTranslation } from "react-i18next";
@@ -42,11 +42,7 @@ const SessionListComponent = ({ sessions }) => {
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
- eget.
-
+
);