diff --git a/client/src/components/HorizontalCard.tsx b/client/src/components/HorizontalCard.tsx
index 4ee8664..62a71ea 100644
--- a/client/src/components/HorizontalCard.tsx
+++ b/client/src/components/HorizontalCard.tsx
@@ -1,5 +1,11 @@
 import React, { FC, MouseEvent } from "react";
 import { Link } from "react-router-dom";
+import { makeStyles } from "@material-ui/core/styles";
+import Card from "@material-ui/core/Card";
+import CardActions from "@material-ui/core/CardActions";
+import CardContent from "@material-ui/core/CardContent";
+import Button from "@material-ui/core/Button";
+import Typography from "@material-ui/core/Typography";
 import { getRemainingdays } from "../utils/methods";
 
 interface IProps {
@@ -9,47 +15,60 @@ interface IProps {
   link?: string;
 }
 
+const useStyles = makeStyles({
+  root: {
+    minWidth: 275
+  },
+  bullet: {
+    display: "inline-block",
+    margin: "0 2px",
+    transform: "scale(0.8)"
+  },
+  title: {
+    fontSize: 14
+  },
+  pos: {
+    marginBottom: 12
+  }
+});
+
 export const HorizontalCard: FC<IProps> = ({
   title,
   remainingDays,
   link = "#",
   validateTicket
 }) => {
+  const classes = useStyles();
+  const bull = <span className={classes.bullet}>•</span>;
+
   return (
-    <li>
-      <div className="card horizontal">
-        <div className="card-stacked">
-          <div className="card-content">
-            <div className="row">
-              <div className="card-title">
-                <h6>
-                  <Link to={link}>
-                    <b>{title ?? "Nothing to do"}</b>
-                  </Link>
-                </h6>
-              </div>
+    <Card className={classes.root}>
+      <CardContent>
+        <Typography variant="h5" component="h2">
+          <Link to={link}>
+            <b>{title ?? "Nothing to do"}</b>
+          </Link>
+        </Typography>
+
+        <Typography variant="body2" component="p">
+          <span>
+            Due{" "}
+            {remainingDays ? (
+              getRemainingdays(remainingDays)
+            ) : (
               <span>
-                Due{" "}
-                {remainingDays ? (
-                  getRemainingdays(remainingDays)
-                ) : (
-                  <span>
-                    <del>Too much</del> 0
-                  </span>
-                )}{" "}
-                days
+                <del>Too much</del> 0
               </span>
-              <div className="right">
-                <Link to="#">
-                  <i className="material-icons" onClick={validateTicket}>
-                    check
-                  </i>
-                </Link>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </li>
+            )}{" "}
+            days
+          </span>
+        </Typography>
+      </CardContent>
+      <CardActions>
+        <Button size="small" onClick={validateTicket}>
+          Mark as done
+        </Button>
+      </CardActions>
+    </Card>
   );
 };
diff --git a/client/src/components/ProjectList.tsx b/client/src/components/ProjectList.tsx
index da5671e..2c5c406 100644
--- a/client/src/components/ProjectList.tsx
+++ b/client/src/components/ProjectList.tsx
@@ -44,27 +44,25 @@ export const ProjectList: FC<IProps> = ({ projects }) => {
         </Grid>
       </Grid>
       <div className="col s12 grey lighten-1">
-        <ul>
-          {filteredTickets.length === 0 ? (
-            <HorizontalCard />
-          ) : (
-            filteredTickets.map((t: Project) => (
-              <HorizontalCard
-                key={t.id}
-                title={t.title}
-                remainingDays={t.endingDate}
-                link={`/projects/${t.id}`}
-                validateTicket={async (e: MouseEvent) => {
-                  e.preventDefault();
-                  await put<HttpResponse<Ticket>>(
-                    `${Constants.ticketsURI}/${t.id}/closed`,
-                    {}
-                  );
-                }}
-              />
-            ))
-          )}
-        </ul>
+        {filteredTickets.length === 0 ? (
+          <HorizontalCard />
+        ) : (
+          filteredTickets.map((t: Project) => (
+            <HorizontalCard
+              key={t.id}
+              title={t.title}
+              remainingDays={t.endingDate}
+              link={`/projects/${t.id}`}
+              validateTicket={async (e: MouseEvent) => {
+                e.preventDefault();
+                await put<HttpResponse<Ticket>>(
+                  `${Constants.ticketsURI}/${t.id}/closed`,
+                  {}
+                );
+              }}
+            />
+          ))
+        )}
       </div>
     </>
   );