diff --git a/src/components/AdminPanel/AddMemberToGroupDialog.tsx b/src/components/AdminPanel/AddMemberToGroupDialog.tsx
index 405f0b14..8f8519fa 100644
--- a/src/components/AdminPanel/AddMemberToGroupDialog.tsx
+++ b/src/components/AdminPanel/AddMemberToGroupDialog.tsx
@@ -1,14 +1,11 @@
 import React, { useState } from "react";
 
 import { 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";
-import Avatar from "@material-ui/core/Avatar";
 import Button from "@material-ui/core/Button";
 import TextField from "@material-ui/core/TextField";
 import Switch from "@material-ui/core/Switch";
@@ -23,6 +20,9 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 
+import Table from "../mui/Table";
+import TableRow from "../mui/TableRow";
+import PictureAndNameCell from "./PictureAndNameCell";
 import { dialogStyles } from "../../styles";
 import { CloseIcon } from "../DescriptionTable";
 import { not, getAttribute } from "./helpers";
@@ -202,9 +202,8 @@ const User = ({ user, selected, setSelectedUser }: any) => {
                 onClick={() => setSelectedUser(user)}
             >
                 <TableCell>
-                    <Avatar alt={name} src={picture} />
+                    <PictureAndNameCell name={name} picture={picture} />
                 </TableCell>
-                <TableCell>{name}</TableCell>
                 <TableCell>
                     {groupLeaderName || "Mangler gruppeleder"}
                 </TableCell>
@@ -218,12 +217,11 @@ const UsersTable = ({ users, selectedUsers, setSelectedUser }: any) => {
         selectedUsers.some((u: any) => u.Username === user.Username);
 
     return (
-        <TableContainer component={Paper}>
-            <Table>
+        <TableContainer component={Paper} style={{ height: "100%" }}>
+            <Table stickyHeader style={{ maxHeight: "100%" }}>
                 <TableHead>
                     <TableRow>
-                        <TableCell />
-                        <TableCell>Navn</TableCell>
+                        <TableCell>Ansatt</TableCell>
                         <TableCell>Gruppeleder</TableCell>
                     </TableRow>
                 </TableHead>
diff --git a/src/components/AdminPanel/EditAdmins.tsx b/src/components/AdminPanel/EditAdmins.tsx
index 7534d3f8..5212f456 100644
--- a/src/components/AdminPanel/EditAdmins.tsx
+++ b/src/components/AdminPanel/EditAdmins.tsx
@@ -3,16 +3,13 @@ import React, { useState } from "react";
 import Container from "@material-ui/core/Container";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import IconButton from "@material-ui/core/IconButton";
-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";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import Avatar from "@material-ui/core/Avatar";
 import DeleteIcon from "@material-ui/icons/Delete";
 import PersonAddIcon from "@material-ui/icons/PersonAdd";
 import Typography from "@material-ui/core/Typography";
@@ -23,7 +20,9 @@ import DeleteUserFromGroupDialog from "./DeleteUserFromGroupDialog";
 import useApiGet from "./useApiGet";
 import { listAllUsers, listAdmins, removeAdmin, addAdmin } from "./adminApi";
 import { getAttribute } from "./helpers";
-import Button from "../Button";
+import Button from "../mui/Button";
+import Table from "../mui/Table";
+import PictureAndNameCell from "./PictureAndNameCell";
 
 const Admin = (props: any) => {
     const { admin, deleteAdmin } = props;
@@ -36,9 +35,8 @@ const Admin = (props: any) => {
         <>
             <TableRow>
                 <TableCell>
-                    <Avatar alt={name} src={picture} />
+                    <PictureAndNameCell name={name} picture={picture} />
                 </TableCell>
-                <TableCell>{name}</TableCell>
                 <TableCell>{email}</TableCell>
                 <TableCell>{username}</TableCell>
                 <TableCell>
@@ -53,15 +51,11 @@ const Admin = (props: any) => {
 
 const AdminTable = ({ admins, deleteAdmin }: any) => {
     return (
-        <TableContainer
-            component={Paper}
-            className={commonStyles.tableContainer}
-        >
+        <TableContainer className={commonStyles.tableContainer}>
             <Table stickyHeader>
                 <TableHead>
                     <TableRow>
-                        <TableCell />
-                        <TableCell>Navn</TableCell>
+                        <TableCell>Ansatt</TableCell>
                         <TableCell>Email</TableCell>
                         <TableCell>Brukernavn</TableCell>
                         <TableCell />
diff --git a/src/components/AdminPanel/EditGroupLeaders.tsx b/src/components/AdminPanel/EditGroupLeaders.tsx
index 15827c80..b5258b8a 100644
--- a/src/components/AdminPanel/EditGroupLeaders.tsx
+++ b/src/components/AdminPanel/EditGroupLeaders.tsx
@@ -3,16 +3,13 @@ import React, { useState } from "react";
 import Container from "@material-ui/core/Container";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import IconButton from "@material-ui/core/IconButton";
-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";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import Avatar from "@material-ui/core/Avatar";
 import DeleteIcon from "@material-ui/icons/Delete";
 import PersonAddIcon from "@material-ui/icons/PersonAdd";
 import Typography from "@material-ui/core/Typography";
@@ -26,9 +23,11 @@ import {
     addGroupLeader,
 } from "./adminApi";
 import { getAttribute } from "./helpers";
+import PictureAndNameCell from "./PictureAndNameCell";
 import AddUserToGroupDialog from "./AddUserToGroupDialog";
 import DeleteUserFromGroupDialog from "./DeleteUserFromGroupDialog";
-import Button from "../Button";
+import Button from "../mui/Button";
+import Table from "../mui/Table";
 
 const GroupLeader = (props: any) => {
     const { groupLeader, deleteGroupLeader } = props;
@@ -41,9 +40,8 @@ const GroupLeader = (props: any) => {
         <>
             <TableRow>
                 <TableCell>
-                    <Avatar alt={name} src={picture} />
+                    <PictureAndNameCell name={name} picture={picture} />
                 </TableCell>
-                <TableCell>{name}</TableCell>
                 <TableCell>{email}</TableCell>
                 <TableCell>{username}</TableCell>
                 <TableCell>
@@ -61,15 +59,11 @@ const GroupLeader = (props: any) => {
 
 const GroupLeaderTable = ({ groupLeaders, deleteGroupLeader }: any) => {
     return (
-        <TableContainer
-            component={Paper}
-            className={commonStyles.tableContainer}
-        >
+        <TableContainer className={commonStyles.tableContainer}>
             <Table stickyHeader>
                 <TableHead>
                     <TableRow>
-                        <TableCell />
-                        <TableCell>Navn</TableCell>
+                        <TableCell>Ansatt</TableCell>
                         <TableCell>Email</TableCell>
                         <TableCell>Brukernavn</TableCell>
                         <TableCell />
diff --git a/src/components/AdminPanel/EditGroups.tsx b/src/components/AdminPanel/EditGroups.tsx
index 6b259218..ce7202de 100644
--- a/src/components/AdminPanel/EditGroups.tsx
+++ b/src/components/AdminPanel/EditGroups.tsx
@@ -1,21 +1,15 @@
 import React, { useState } from "react";
 
-import { withStyles } from "@material-ui/core/styles";
 import { makeStyles } from "@material-ui/core/styles";
 import Container from "@material-ui/core/Container";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import IconButton from "@material-ui/core/IconButton";
-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";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import Avatar from "@material-ui/core/Avatar";
-import Badge from "@material-ui/core/Badge";
 import DeleteIcon from "@material-ui/icons/Delete";
 import AddIcon from "@material-ui/icons/Add";
 import Typography from "@material-ui/core/Typography";
@@ -23,7 +17,6 @@ import Box from "@material-ui/core/Box";
 import Collapse from "@material-ui/core/Collapse";
 import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
-import EditIcon from "@material-ui/icons/Edit";
 
 import commonStyles from "./common.module.css";
 import DeleteUserFromGroupDialog from "./DeleteUserFromGroupDialog";
@@ -44,9 +37,12 @@ import {
     updateGroupLeader,
 } from "./groupsApi";
 import { getAttribute, compareByName } from "./helpers";
+import PictureAndNameEditCell from "./PictureAndNameEditCell";
 import GroupMembers from "./GroupMembers";
 import AddUserToGroupDialog from "./AddUserToGroupDialog";
-import Button from "../Button"
+import Button from "../mui/Button";
+import Table from "../mui/Table";
+import TableRow from "../mui/TableRow";
 
 const useRowStyles = makeStyles({
     root: {
@@ -57,38 +53,6 @@ const useRowStyles = makeStyles({
     editIcon: {},
 });
 
-const StyledEditIcon = withStyles(() => ({
-    root: {
-        fontSize: "15px",
-    },
-}))(EditIcon);
-
-const StyledBadge = withStyles((theme) => ({
-    badge: {
-        border: `2px solid ${theme.palette.background.default}`,
-        padding: "0 0px",
-        backgroundColor: `${theme.palette.background.paper}`,
-    },
-}))(Badge);
-
-const GroupAvatar = ({ showBadge, onClick, name, picture }: any) => (
-    <StyledBadge
-        badgeContent={
-            showBadge ? (
-                <IconButton size="small" onClick={onClick}>
-                    <StyledEditIcon />
-                </IconButton>
-            ) : null
-        }
-        anchorOrigin={{
-            vertical: "bottom",
-            horizontal: "right",
-        }}
-    >
-        <Avatar alt={name} src={picture} />
-    </StyledBadge>
-);
-
 const Group = ({
     addMembersToGroup,
     deleteMember,
@@ -124,14 +88,12 @@ const Group = ({
                     </IconButton>
                 </TableCell>
                 <TableCell align="right">
-                    <GroupAvatar
-                        onClick={() => editGroup(group)}
+                    <PictureAndNameEditCell
                         name={name}
                         picture={picture}
-                        showBadge={true}
+                        onEdit={() => editGroup(group)}
                     />
                 </TableCell>
-                <TableCell>{name}</TableCell>
                 <TableCell>{group.members.length}</TableCell>
                 <TableCell align="right">
                     <Button
@@ -220,14 +182,13 @@ const GroupsTable = ({
 
     return (
         <TableContainer
-            component={Paper}
             className={commonStyles.tableContainer}
+            style={{ overflowX: "hidden" }}
         >
             <Table>
                 <TableHead>
                     <TableRow>
                         <TableCell>Detaljer</TableCell>
-                        <TableCell />
                         <TableCell>Gruppeleder</TableCell>
                         <TableCell>Antall gruppemedlemmer</TableCell>
                         <TableCell />
diff --git a/src/components/AdminPanel/GroupMembers.tsx b/src/components/AdminPanel/GroupMembers.tsx
index c7258d9d..75133682 100644
--- a/src/components/AdminPanel/GroupMembers.tsx
+++ b/src/components/AdminPanel/GroupMembers.tsx
@@ -1,20 +1,17 @@
 import React, { useState } from "react";
 
-import IconButton from "@material-ui/core/IconButton";
 import PersonAddIcon from "@material-ui/icons/PersonAdd";
-import DeleteIcon from "@material-ui/icons/Delete";
-import Table from "@material-ui/core/Table";
-import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
+import TableBody from "@material-ui/core/TableBody";
 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";
-import Avatar from "@material-ui/core/Avatar";
 
 import { getAttribute } from "./helpers";
+import PictureAndNameCell from "./PictureAndNameCell";
 import AddMemberToGroupDialog from "./AddMemberToGroupDialog";
-import Button from "../Button";
+import Button from "../mui/Button";
+import Table from "../mui/Table";
+import TableRow from "../mui/TableRow";
 
 const User = ({ user, deleteMember }: any) => {
     const name = getAttribute(user, "name");
@@ -25,14 +22,16 @@ const User = ({ user, deleteMember }: any) => {
         <>
             <TableRow>
                 <TableCell>
-                    <Avatar alt={name} src={picture} />
+                    <PictureAndNameCell name={name} picture={picture} />
                 </TableCell>
-                <TableCell>{name}</TableCell>
                 <TableCell>{email}</TableCell>
                 <TableCell>
-                    <IconButton edge="end" onClick={() => deleteMember(user)}>
-                        <DeleteIcon />
-                    </IconButton>
+                    <Button
+                        onClick={() => deleteMember(user)}
+                        style={{ fontStyle: "italic" }}
+                    >
+                        Fjern fra gruppe
+                    </Button>
                 </TableCell>
             </TableRow>
         </>
@@ -53,12 +52,11 @@ const GroupMembers = ({
 
     return (
         <>
-            <TableContainer component={Paper}>
+            <TableContainer>
                 <Table>
                     <TableHead>
                         <TableRow>
-                            <TableCell />
-                            <TableCell>Navn</TableCell>
+                            <TableCell>Ansatt</TableCell>
                             <TableCell>Email</TableCell>
                             <TableCell />
                         </TableRow>
diff --git a/src/components/AdminPanel/PictureAndNameCell.tsx b/src/components/AdminPanel/PictureAndNameCell.tsx
new file mode 100644
index 00000000..a7f24530
--- /dev/null
+++ b/src/components/AdminPanel/PictureAndNameCell.tsx
@@ -0,0 +1,24 @@
+import React from "react"
+import Avatar from "@material-ui/core/Avatar";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles({
+    root: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+    },
+});
+
+const PictureAndNameCell = ({ name, picture }: any) => {
+    const classes = useStyles();
+
+    return (
+        <span className={classes.root}>
+            <Avatar alt={name} src={picture} />
+            {name}
+        </span>
+    );
+};
+
+export default PictureAndNameCell
diff --git a/src/components/AdminPanel/PictureAndNameEditCell.tsx b/src/components/AdminPanel/PictureAndNameEditCell.tsx
new file mode 100644
index 00000000..ead165ea
--- /dev/null
+++ b/src/components/AdminPanel/PictureAndNameEditCell.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+
+import Avatar from "@material-ui/core/Avatar";
+import Badge from "@material-ui/core/Badge";
+import EditIcon from "@material-ui/icons/Edit";
+import IconButton from "@material-ui/core/IconButton";
+import { makeStyles, withStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles({
+    root: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+    },
+});
+
+
+const StyledEditIcon = withStyles(() => ({
+    root: {
+        fontSize: "15px",
+    },
+}))(EditIcon);
+
+const StyledBadge = withStyles((theme) => ({
+    badge: {
+        border: `2px solid ${theme.palette.background.default}`,
+        padding: "0 0px",
+        backgroundColor: `${theme.palette.background.paper}`,
+    },
+}))(Badge);
+
+const GroupAvatar = ({ showBadge, onClick, name, picture }: any) => (
+    <StyledBadge
+        badgeContent={
+            showBadge ? (
+                <IconButton size="small" onClick={onClick}>
+                    <StyledEditIcon />
+                </IconButton>
+            ) : null
+        }
+        anchorOrigin={{
+            vertical: "bottom",
+            horizontal: "right",
+        }}
+    >
+        <Avatar alt={name} src={picture} />
+    </StyledBadge>
+);
+
+
+const PictureAndNameEditCell = ({ name, picture, onEdit }: any) => {
+    const classes = useStyles();
+
+    return (
+        <span className={classes.root}>
+            <GroupAvatar
+                onClick={onEdit}
+                name={name}
+                picture={picture}
+                showBadge={true}
+            />
+            {name}
+        </span>
+    );
+};
+
+export default PictureAndNameEditCell;
diff --git a/src/components/AdminPanel/UsersTable.tsx b/src/components/AdminPanel/UsersTable.tsx
index ec48dc75..9d999c92 100644
--- a/src/components/AdminPanel/UsersTable.tsx
+++ b/src/components/AdminPanel/UsersTable.tsx
@@ -1,16 +1,16 @@
 import React from "react";
 
 import commonStyles from "./common.module.css";
-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";
-import Avatar from "@material-ui/core/Avatar";
 
 import { getAttribute } from "./helpers";
+import Table from "../mui/Table";
+import TableRow from "../mui/TableRow"
+import PictureAndNameCell from "./PictureAndNameCell";
 
 const User = ({ user, selected, setSelectedUser }: any) => {
     const name = getAttribute(user, "name");
@@ -25,9 +25,8 @@ const User = ({ user, selected, setSelectedUser }: any) => {
                 onClick={() => setSelectedUser(user)}
             >
                 <TableCell>
-                    <Avatar alt={name} src={picture} />
+                    <PictureAndNameCell name={name} picture={picture} />
                 </TableCell>
-                <TableCell>{name}</TableCell>
                 <TableCell>{email}</TableCell>
             </TableRow>
         </>
@@ -46,8 +45,7 @@ const UsersTable = ({ users, selectedUser, setSelectedUser }: any) => {
             <Table stickyHeader>
                 <TableHead>
                     <TableRow>
-                        <TableCell />
-                        <TableCell>Navn</TableCell>
+                        <TableCell>Ansatt</TableCell>
                         <TableCell>Email</TableCell>
                     </TableRow>
                 </TableHead>
diff --git a/src/components/GroupLeaderPanel/Main.tsx b/src/components/GroupLeaderPanel/Main.tsx
index e8d7e09c..c6634741 100644
--- a/src/components/GroupLeaderPanel/Main.tsx
+++ b/src/components/GroupLeaderPanel/Main.tsx
@@ -2,13 +2,12 @@ import React from "react";
 
 import Container from "@material-ui/core/Container";
 import CircularProgress from "@material-ui/core/CircularProgress";
-import Card from "@material-ui/core/Card";
-import CardContent from "@material-ui/core/CardContent";
+import Box from "@material-ui/core/Box";
 import Typography from "@material-ui/core/Typography";
 
 import DeleteUserFromGroupDialog from "../AdminPanel/DeleteUserFromGroupDialog";
 import GroupMembers from "../AdminPanel/GroupMembers";
-import commonStyles from "../AdminPanel/common.module.css"
+import commonStyles from "../AdminPanel/common.module.css";
 
 const Main = ({
     allAvailableUsersAnnotated,
@@ -30,16 +29,11 @@ const Main = ({
             {isLoading && <CircularProgress />}
             {!isError && !isLoading && allAvailableUsersAnnotated && (
                 <>
-                    <Card style={{ marginBottom: "24px" }} variant="outlined">
-                        <CardContent>
-                            <Typography color="textSecondary" gutterBottom>
-                                Rediger din gruppe
-                            </Typography>
-                            En gruppe består av en gruppeleder og flere
-                            gruppebarn. På denne siden kan legge til og fjerne
-                            ansatte til og fra gruppen din.
-                        </CardContent>
-                    </Card>
+                    <Box margin={3} marginLeft={2}>
+                    <Typography variant="h5" component="h2" color="textPrimary">
+                            Min gruppe
+                        </Typography>
+                    </Box>
                     <GroupMembers
                         allUsers={allAvailableUsersAnnotated}
                         members={members}
diff --git a/src/components/GroupLeaderPanel/Nav.tsx b/src/components/GroupLeaderPanel/Nav.tsx
index 7efaca3b..3d1de1cc 100644
--- a/src/components/GroupLeaderPanel/Nav.tsx
+++ b/src/components/GroupLeaderPanel/Nav.tsx
@@ -59,7 +59,7 @@ const useNavStyles = makeStyles((theme) => ({
         marginLeft: "30px",
         marginBottom: "20px",
         display: "flex",
-        justifyContent: "space-between",
+        justifyContent: "start",
         alignItems: "center",
         maxWidth: "1200px",
     },
@@ -76,6 +76,7 @@ const useNavStyles = makeStyles((theme) => ({
         fontWeight: "bold",
         fontSize: "20px",
         lineHeight: "23px",
+        marginRight: "23px",
     },
 }));
 
@@ -84,6 +85,7 @@ const Nav = ({ categories, category, setCategory, name }: any) => {
 
     return (
         <div className={classes.container}>
+            <h3 className={classes.name}>{name}</h3>
             <FormControl className={classes.formControl}>
                 <Select
                     value={category}
@@ -98,7 +100,6 @@ const Nav = ({ categories, category, setCategory, name }: any) => {
                     ))}
                 </Select>
             </FormControl>
-            <h3 className={classes.name}>{name}</h3>
         </div>
     );
 };
diff --git a/src/components/Button.tsx b/src/components/mui/Button.tsx
similarity index 85%
rename from src/components/Button.tsx
rename to src/components/mui/Button.tsx
index 4ae4b9ed..b9ea78e5 100644
--- a/src/components/Button.tsx
+++ b/src/components/mui/Button.tsx
@@ -2,11 +2,16 @@ import { createStyles, withStyles } from "@material-ui/core/styles";
 import Button, {
     ButtonProps as MuiButtonProps,
 } from "@material-ui/core/Button";
-import { KnowitColors } from "../styles";
+import { KnowitColors } from "../../styles";
 
 const StyledButton = withStyles(() =>
     createStyles({
         root: {
+            fontWeight: (props: MuiButtonProps) =>
+                props.color === "primary" || props.color === "secondary"
+                    ? "bold"
+                    : "normal",
+            textTransform: "none",
             margin: (props: MuiButtonProps) => {
                 switch (props.color) {
                     case "primary":
diff --git a/src/components/mui/Table.tsx b/src/components/mui/Table.tsx
new file mode 100644
index 00000000..bb8077a4
--- /dev/null
+++ b/src/components/mui/Table.tsx
@@ -0,0 +1,24 @@
+import { createStyles, withStyles, Theme } from "@material-ui/core/styles";
+import Table from "@material-ui/core/Table";
+
+const StyledTable = withStyles((theme: Theme) =>
+    createStyles({
+        root: {
+            borderCollapse: "collapse",
+            borderStyle: "hidden",
+            "& th": {
+                fontWeight: "bold",
+            },
+            "& td, & th": {
+                border: `1px solid ${theme.palette.divider}`,
+            },
+        },
+        stickyHeader: {
+            "& th": {
+                backgroundClip: "padding-box",
+            },
+        },
+    })
+)(Table);
+
+export default StyledTable;
diff --git a/src/components/mui/TableRow.tsx b/src/components/mui/TableRow.tsx
new file mode 100644
index 00000000..94d024bc
--- /dev/null
+++ b/src/components/mui/TableRow.tsx
@@ -0,0 +1,16 @@
+import { createStyles, withStyles, Theme } from "@material-ui/core/styles";
+import TableRow from "@material-ui/core/TableRow";
+import {KnowitColors} from "../../styles"
+
+const StyledTableRow = withStyles((theme: Theme) =>
+    createStyles({
+        root: {
+            transition: "100ms",
+        },
+        selected: {
+            backgroundColor: `${KnowitColors.beige} !important`,
+        }
+    })
+)(TableRow);
+
+export default StyledTableRow;