diff --git a/src/App.jsx b/src/App.jsx
index 8a15e89b..86429ec4 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,14 +4,17 @@ import Header from "./components/Header";
 import { AuthProvider } from "./contexts/auth.context";
 import { ProjectProvider } from "./contexts/project.context";
 import Router from "./Router";
+import { BuildProvider } from "./contexts/build.context";
 
 function App() {
   return (
     <div className="App">
       <AuthProvider>
         <ProjectProvider>
-          <Header />
-          <Router />
+          <BuildProvider>
+            <Header />
+            <Router />
+          </BuildProvider>
         </ProjectProvider>
       </AuthProvider>
     </div>
diff --git a/src/components/BuildList.tsx b/src/components/BuildList.tsx
index 6328a41b..0586a0b5 100644
--- a/src/components/BuildList.tsx
+++ b/src/components/BuildList.tsx
@@ -9,17 +9,18 @@ import {
   Theme,
   createStyles,
   Chip,
+  Typography,
+  Grid,
 } from "@material-ui/core";
 import { Delete } from "@material-ui/icons";
-import { Build } from "../types";
-import { buildsService } from "../services";
 import { useHistory } from "react-router-dom";
-
-interface IBuildList {
-  builds: Build[];
-  setBuilds: React.Dispatch<React.SetStateAction<Build[]>>;
-  selectedBuildId: string | undefined;
-}
+import {
+  useBuildState,
+  useBuildDispatch,
+  deleteBuild,
+  selectBuild,
+} from "../contexts/build.context";
+import { BuildStatusChip } from "./BuildStatusChip";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -34,22 +35,21 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 );
 
-const BuildList: FunctionComponent<IBuildList> = ({
-  builds,
-  setBuilds,
-  selectedBuildId,
-}) => {
+const BuildList: FunctionComponent = () => {
   const classes = useStyles();
   const history = useHistory();
+  const { buildList, selectedBuildId } = useBuildState();
+  const buildDispatch = useBuildDispatch();
 
   return (
     <List>
-      {builds.map((build) => (
+      {buildList.map((build) => (
         <ListItem
           key={build.id}
           selected={selectedBuildId === build.id}
           button
           onClick={() => {
+            selectBuild(buildDispatch, build.id);
             history.push({
               search: "buildId=" + build.id,
             });
@@ -59,18 +59,39 @@ const BuildList: FunctionComponent<IBuildList> = ({
           }}
         >
           <ListItemText
-            primary={`#${build.id}`}
-            secondary={`Date: ${build.createdAt}`}
+            disableTypography
+            primary={
+              <Grid container>
+                <Grid item>
+                  <Typography variant="subtitle2">{`#${build.id}`}</Typography>
+                </Grid>
+              </Grid>
+            }
+            secondary={
+              <Grid container direction="column">
+                <Grid item>
+                  <Typography variant="caption" color="textPrimary">
+                    {build.createdAt}
+                  </Typography>
+                </Grid>
+                <Grid item>
+                  <Grid container justify="space-between">
+                    <Grid item>
+                      <Chip size="small" label={build.branchName} />
+                    </Grid>
+                    <Grid item>
+                      <BuildStatusChip status={build.status} />
+                    </Grid>
+                  </Grid>
+                </Grid>
+              </Grid>
+            }
           />
-          <Chip size="small" label={build.branchName} />
+
           <ListItemSecondaryAction className={classes.listItemSecondaryAction}>
             <IconButton
               onClick={() => {
-                buildsService.remove(build.id).then((isRemoved) => {
-                  if (isRemoved) {
-                    setBuilds(builds.filter((item) => item.id !== build.id));
-                  }
-                });
+                deleteBuild(buildDispatch, build.id);
               }}
             >
               <Delete />
diff --git a/src/components/BuildStatusChip.tsx b/src/components/BuildStatusChip.tsx
new file mode 100644
index 00000000..d276d3e4
--- /dev/null
+++ b/src/components/BuildStatusChip.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { Chip } from "@material-ui/core";
+import { BuildStatus } from "../types/buildStatus";
+
+export const BuildStatusChip: React.FunctionComponent<{
+  status: BuildStatus;
+}> = ({ status }) => {
+  let color: "inherit" | "primary" | "secondary" | "default" | undefined;
+  let variant: "default" | "outlined" | undefined;
+  switch (status) {
+    case BuildStatus.passed:
+      color = "primary";
+      variant = "outlined";
+      break;
+    case BuildStatus.unresolved:
+      color = "secondary";
+      break;
+    case BuildStatus.failed:
+      color = "secondary";
+      variant = "outlined";
+      break;
+    default:
+      color = undefined;
+      variant = undefined;
+  }
+  return <Chip variant={variant} color={color} label={status} size="small" />;
+};
diff --git a/src/components/TestDetailsModal.tsx b/src/components/TestDetailsModal.tsx
index 19c81d9b..fe759a82 100644
--- a/src/components/TestDetailsModal.tsx
+++ b/src/components/TestDetailsModal.tsx
@@ -37,6 +37,7 @@ import { TestRunDetails } from "./TestRunDetails";
 import useImage from "use-image";
 import { routes } from "../constants";
 import { NoImagePlaceholder } from "./NoImageAvailable";
+import { useBuildDispatch, updateBuild } from "../contexts/build.context";
 
 const useStyles = makeStyles((theme) => ({
   imageContainer: {
@@ -65,6 +66,7 @@ const TestDetailsModal: React.FunctionComponent<{
 }> = ({ testRun, updateTestRun }) => {
   const classes = useStyles();
   const history = useHistory();
+  const buildDispatch = useBuildDispatch();
 
   const stageWidth = (window.innerWidth / 2) * 0.9;
   const stageHeigth = window.innerHeight;
@@ -172,6 +174,7 @@ const TestDetailsModal: React.FunctionComponent<{
                   onClick={() =>
                     testRunService.approve(testRun.id).then((testRun) => {
                       updateTestRun(testRun);
+                      updateBuild(buildDispatch, testRun);
                     })
                   }
                 >
@@ -180,9 +183,10 @@ const TestDetailsModal: React.FunctionComponent<{
                 <Button
                   color="secondary"
                   onClick={() =>
-                    testRunService
-                      .reject(testRun.id)
-                      .then((testRun) => updateTestRun(testRun))
+                    testRunService.reject(testRun.id).then((testRun) => {
+                      updateTestRun(testRun);
+                      updateBuild(buildDispatch, testRun);
+                    })
                   }
                 >
                   Reject
diff --git a/src/contexts/build.context.tsx b/src/contexts/build.context.tsx
new file mode 100644
index 00000000..f87b6f94
--- /dev/null
+++ b/src/contexts/build.context.tsx
@@ -0,0 +1,218 @@
+import React from "react";
+import { Build, TestRun } from "../types";
+import { buildsService } from "../services";
+import { TestStatus } from "../types/testStatus";
+import { BuildStatus } from "../types/buildStatus";
+
+interface IRequestAction {
+  type: "request";
+  payload?: undefined;
+}
+
+interface IGetAction {
+  type: "get";
+  payload: Build[];
+}
+
+interface ISelectAction {
+  type: "select";
+  payload: string;
+}
+
+interface IDeleteAction {
+  type: "delete";
+  payload: string;
+}
+
+interface IUpdateAction {
+  type: "update";
+  payload: TestRun;
+}
+
+interface IStatsAction {
+  type: "stats";
+  payload: string;
+}
+
+type IAction =
+  | IRequestAction
+  | IGetAction
+  | IDeleteAction
+  | ISelectAction
+  | IStatsAction
+  | IUpdateAction;
+
+type Dispatch = (action: IAction) => void;
+type State = {
+  selectedBuildId: string | undefined;
+  buildList: Build[];
+};
+
+type BuildProviderProps = { children: React.ReactNode };
+
+const BuildStateContext = React.createContext<State | undefined>(undefined);
+const BuildDispatchContext = React.createContext<Dispatch | undefined>(
+  undefined
+);
+
+const initialState: State = {
+  selectedBuildId: undefined,
+  buildList: [],
+};
+
+function buildReducer(state: State, action: IAction): State {
+  switch (action.type) {
+    case "select":
+      return {
+        ...state,
+        selectedBuildId: action.payload,
+      };
+    case "stats":
+      return {
+        ...state,
+        buildList: state.buildList.map((build) => {
+          if (build.id === action.payload) {
+            // reset stats
+            build.status = BuildStatus.passed;
+            build.passedCount = 0;
+            build.unresolvedCount = 0;
+            build.failedCount = 0;
+
+            // calculate stats
+            build.testRuns.forEach((testRun) => {
+              switch (testRun.status) {
+                case TestStatus.approved:
+                case TestStatus.ok: {
+                  build.passedCount += 1;
+                  break;
+                }
+                case TestStatus.unresolved:
+                case TestStatus.new: {
+                  build.unresolvedCount += 1;
+                  break;
+                }
+                case TestStatus.failed: {
+                  build.failedCount += 1;
+                  break;
+                }
+              }
+            });
+
+            if (build.failedCount > 0) {
+              build.status = BuildStatus.failed;
+            }
+            if (build.unresolvedCount > 0) {
+              build.status = BuildStatus.unresolved;
+            }
+          }
+          return build;
+        }),
+      };
+    case "update":
+      return {
+        ...state,
+        buildList: state.buildList.map((build) => {
+          if (build.id === action.payload.buildId) {
+            return {
+              ...build,
+              testRuns: build.testRuns.map((testRun) => {
+                if (testRun.id === action.payload.id) {
+                  return action.payload;
+                }
+                return testRun;
+              }),
+            };
+          }
+          return build;
+        }),
+      };
+    case "get":
+      return {
+        ...state,
+        buildList: action.payload,
+      };
+    case "delete":
+      return {
+        ...state,
+        buildList: state.buildList.filter((p) => p.id !== action.payload),
+      };
+    default:
+      return state;
+  }
+}
+
+function BuildProvider({ children }: BuildProviderProps) {
+  const [state, dispatch] = React.useReducer(buildReducer, initialState);
+
+  return (
+    <BuildStateContext.Provider value={state}>
+      <BuildDispatchContext.Provider value={dispatch}>
+        {children}
+      </BuildDispatchContext.Provider>
+    </BuildStateContext.Provider>
+  );
+}
+
+function useBuildState() {
+  const context = React.useContext(BuildStateContext);
+  if (context === undefined) {
+    throw new Error("must be used within a BuildProvider");
+  }
+  return context;
+}
+
+function useBuildDispatch() {
+  const context = React.useContext(BuildDispatchContext);
+  if (context === undefined) {
+    throw new Error("must be used within a BuildProvider");
+  }
+  return context;
+}
+
+async function getBuildList(dispatch: Dispatch, id: string) {
+  dispatch({ type: "request" });
+
+  buildsService
+    .getList(id)
+    .then((items) => {
+      dispatch({ type: "get", payload: items });
+      items.forEach((build) => dispatch({ type: "stats", payload: build.id }));
+    })
+    .catch((error) => {
+      console.log(error.toString());
+    });
+}
+
+async function deleteBuild(dispatch: Dispatch, id: string) {
+  dispatch({ type: "request" });
+
+  buildsService
+    .remove(id)
+    .then((isDeleted) => {
+      if (isDeleted) {
+        dispatch({ type: "delete", payload: id });
+      }
+    })
+    .catch((error) => {
+      console.log(error.toString());
+    });
+}
+
+async function selectBuild(dispatch: Dispatch, id: string) {
+  dispatch({ type: "select", payload: id });
+}
+
+async function updateBuild(dispatch: Dispatch, testRun: TestRun) {
+  dispatch({ type: "update", payload: testRun });
+  dispatch({ type: "stats", payload: testRun.buildId });
+}
+
+export {
+  BuildProvider,
+  useBuildState,
+  useBuildDispatch,
+  getBuildList,
+  deleteBuild,
+  selectBuild,
+  updateBuild,
+};
diff --git a/src/pages/ProjectPage.tsx b/src/pages/ProjectPage.tsx
index 4ee1f05f..5c246397 100644
--- a/src/pages/ProjectPage.tsx
+++ b/src/pages/ProjectPage.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { Grid, Dialog, IconButton, Box, Typography } from "@material-ui/core";
 import { useParams, useLocation, useHistory } from "react-router-dom";
-import { Build, TestRun } from "../types";
-import { buildsService, testRunService } from "../services";
+import { TestRun } from "../types";
+import { testRunService } from "../services";
 import BuildList from "../components/BuildList";
 import ProjectSelect from "../components/ProjectSelect";
 import qs from "qs";
@@ -11,6 +11,12 @@ import TestDetailsModal from "../components/TestDetailsModal";
 import { NavigateBefore, NavigateNext } from "@material-ui/icons";
 import Filters from "../components/Filters";
 import { buildTestRunLocation } from "../_helpers/route.helpers";
+import {
+  useBuildState,
+  useBuildDispatch,
+  getBuildList,
+  selectBuild,
+} from "../contexts/build.context";
 
 const getQueryParams = (guery: string) => {
   const queryParams = qs.parse(guery, { ignoreQueryPrefix: true });
@@ -46,9 +52,9 @@ const ProjectPage = () => {
   const { projectId } = useParams();
   const location = useLocation();
   const history = useHistory();
-  const [builds, setBuilds] = useState<Build[]>([]);
+  const { buildList, selectedBuildId } = useBuildState();
+  const buildDispatch = useBuildDispatch();
   const [testRuns, setTestRuns] = useState<TestRun[]>([]);
-  const [selectedBuildId, setSelectedBuildId] = useState<string>();
   const [selectedTestdId, setSelectedTestId] = useState<string>();
   const [selectedTestRunIndex, setSelectedTestRunIndex] = useState<number>();
 
@@ -63,11 +69,18 @@ const ProjectPage = () => {
 
   useEffect(() => {
     const queryParams = getQueryParams(location.search);
-    if (queryParams.buildId) {
-      setSelectedBuildId(queryParams.buildId);
-    } else if (builds.length > 0) {
-      setSelectedBuildId(builds[0].id);
+    if (!selectedBuildId) {
+      if (queryParams.buildId) {
+        selectBuild(buildDispatch, queryParams.buildId);
+      } else if (buildList.length > 0) {
+        selectBuild(buildDispatch, buildList[0].id);
+      }
     }
+    // eslint-disable-next-line
+  }, []);
+
+  useEffect(() => {
+    const queryParams = getQueryParams(location.search);
     if (queryParams.testId) {
       setSelectedTestId(queryParams.testId);
       const index = testRuns.findIndex((t) => t.id === queryParams.testId);
@@ -76,13 +89,13 @@ const ProjectPage = () => {
       setSelectedTestId(undefined);
       setSelectedTestRunIndex(undefined);
     }
-  }, [location.search, builds, testRuns, selectedTestRunIndex]);
+  }, [location.search, testRuns]);
 
   useEffect(() => {
     if (projectId) {
-      buildsService.getList(projectId).then((builds) => setBuilds(builds));
+      getBuildList(buildDispatch, projectId);
     }
-  }, [projectId]);
+  }, [projectId, buildDispatch]);
 
   useEffect(() => {
     if (selectedBuildId) {
@@ -126,11 +139,7 @@ const ProjectPage = () => {
           </Grid>
         </Grid>
         <Grid item>
-          <BuildList
-            builds={builds}
-            setBuilds={setBuilds}
-            selectedBuildId={selectedBuildId}
-          />
+          <BuildList />
         </Grid>
       </Grid>
       <Grid item xs={9}>
diff --git a/src/pages/TestVariationDetailsPage.tsx b/src/pages/TestVariationDetailsPage.tsx
index f2f81a6f..76aab31c 100644
--- a/src/pages/TestVariationDetailsPage.tsx
+++ b/src/pages/TestVariationDetailsPage.tsx
@@ -14,6 +14,7 @@ import {
 } from "@material-ui/core";
 import { buildTestRunUrl } from "../_helpers/route.helpers";
 import { TestVariationDetails } from "../components/TestVariationDetails";
+import { selectBuild, useBuildDispatch } from "../contexts/build.context";
 
 const useStyles = makeStyles({
   media: {
@@ -24,6 +25,7 @@ const useStyles = makeStyles({
 
 const TestVariationDetailsPage: React.FunctionComponent = () => {
   const classes = useStyles();
+  const buildDispatch = useBuildDispatch();
   const { testVariationId } = useParams();
   const [testVariation, setTestVariation] = React.useState<TestVariation>();
 
@@ -52,9 +54,14 @@ const TestVariationDetailsPage: React.FunctionComponent = () => {
                         color="primary"
                         component={Link}
                         disabled={!baseline.testRun}
-                        to={
+                        onClick={() =>
                           baseline.testRun &&
-                          buildTestRunUrl(testVariation, baseline.testRun)
+                          selectBuild(buildDispatch, baseline.testRun.buildId)
+                        }
+                        to={
+                          baseline.testRun
+                            ? buildTestRunUrl(testVariation, baseline.testRun)
+                            : ""
                         }
                       >
                         {baseline.createdAt}
diff --git a/src/types/build.ts b/src/types/build.ts
index 1f2ee5ac..ca065860 100644
--- a/src/types/build.ts
+++ b/src/types/build.ts
@@ -1,11 +1,17 @@
 import { TestRun } from "./testRun";
+import { BuildStatus } from "./buildStatus";
 
 export interface Build {
-    id: string,
-    projectName: string,
-    branchName: string,
-    status: string,
-    createdAt: Date,
-    createdBy: string,
-    testRuns: TestRun[]
-}
\ No newline at end of file
+  id: string;
+  projectName: string;
+  branchName: string;
+  status: BuildStatus;
+  createdAt: Date;
+  createdBy: string;
+  testRuns: TestRun[];
+
+  // stats
+  unresolvedCount: number;
+  passedCount: number;
+  failedCount: number;
+}
diff --git a/src/types/buildStatus.ts b/src/types/buildStatus.ts
new file mode 100644
index 00000000..68c9d431
--- /dev/null
+++ b/src/types/buildStatus.ts
@@ -0,0 +1,5 @@
+export enum BuildStatus {
+  passed = "passed",
+  unresolved = "unresolved",
+  failed = "failed",
+}
diff --git a/src/types/testRun.ts b/src/types/testRun.ts
index 7030c111..0164bc55 100644
--- a/src/types/testRun.ts
+++ b/src/types/testRun.ts
@@ -2,7 +2,7 @@ import { TestStatus } from "./testStatus";
 
 export interface TestRun {
   id: string;
-  buildId: number;
+  buildId: string;
   imageName: string;
   diffName: string;
   diffPercent: number;