diff --git a/package-lock.json b/package-lock.json
index 937a9a1..3ffe3a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3658,6 +3658,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.2.tgz",
diff --git a/package.json b/package.json
index f955154..60091c9 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^7.2.1",
+    "classnames": "^2.2.6",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
diff --git a/src/App.js b/src/App.js
index a01bbce..74899dd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -160,14 +160,29 @@ const App = () => {
         { id: 'B', name: 'Find Length' },
         { id: 'C', name: "Let's use Getline" },
         { id: 'D', name: 'Compare' },
-        { id: 'E', name: 'Strings' }
+        { id: 'E', name: 'Strings Strings Strings' }
       ]
     }
   ];
 
+  const submissions = {
+    'ahmed.7oskaa': {
+      // '219158-A': {
+      //   verdict: 'AC',
+      //   list: [{ id: '' }]
+      // },
+      // '219158-B': {
+      //   verdict: 'WA',
+      //   list: [
+      //     // { id:  }
+      //   ]
+      // }
+    }
+  };
+
   return (
     <div className="App">
-      <Board sheets={sheets} trainees={trainees} />
+      <Board sheets={sheets} trainees={trainees} submissions={submissions} />
     </div>
   );
 };
diff --git a/src/Components/Board/Board.js b/src/Components/Board/Board.js
index bc4bea2..f9c9d49 100644
--- a/src/Components/Board/Board.js
+++ b/src/Components/Board/Board.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cn from 'classnames';
 import { blockSize, paddingBetweenRows } from '../common';
 import { TraineeList } from '../TraineeList';
 import Sheet from '../Sheet';
@@ -7,7 +8,7 @@ import styles from './styles';
 
 class Board extends React.Component {
   render() {
-    const { sheets, trainees } = this.props;
+    const { sheets, trainees, submissions } = this.props;
 
     return (
       <>
@@ -30,7 +31,7 @@ class Board extends React.Component {
                 paddingBottom: paddingBetweenRows
               }}
             >
-              {trainees.map((_, index) => (
+              {trainees.map(({ handle }, index) => (
                 <div
                   key={index}
                   className="trainee-problems-row"
@@ -39,16 +40,35 @@ class Board extends React.Component {
                     paddingBottom: paddingBetweenRows
                   }}
                 >
-                  {sheets.map(({ problems }) =>
-                    problems.map(({ id }) => (
-                      <div
-                        key={id}
-                        className="trainee-problems-cell ac"
-                        style={{ width: blockSize, height: blockSize }}
-                      >
-                        AC
-                      </div>
-                    ))
+                  {sheets.map(({ id: sheetId, problems }) =>
+                    problems.map(({ id: problemId }) => {
+                      const submission =
+                        (submissions[handle] &&
+                          submissions[handle][`${sheetId}-${problemId}`]) ||
+                        {};
+
+                      return (
+                        <div
+                          key={`${sheetId}-${problemId}`}
+                          className={cn('trainee-problems-cell', {
+                            ac: submission.verdict === 'AC',
+                            'not-ac': submission.verdict !== 'AC',
+                            'not-solved': submission.verdict === undefined
+                          })}
+                          style={{ width: blockSize, height: blockSize }}
+                        >
+                          {submission.verdict ? (
+                            <>
+                              <div>{submission.verdict}</div>
+                              <div>+10</div>
+                              {/* <div className="list"></div> */}
+                            </>
+                          ) : (
+                            <div>?</div>
+                          )}
+                        </div>
+                      );
+                    })
                   )}
                 </div>
               ))}
@@ -63,7 +83,8 @@ class Board extends React.Component {
 
 Board.propTypes = {
   sheets: PropTypes.array.isRequired,
-  trainees: PropTypes.array.isRequired
+  trainees: PropTypes.array.isRequired,
+  submissions: PropTypes.object.isRequired
 };
 
 export default Board;
diff --git a/src/Components/Board/styles.js b/src/Components/Board/styles.js
index d2c450d..2d6739a 100644
--- a/src/Components/Board/styles.js
+++ b/src/Components/Board/styles.js
@@ -37,6 +37,7 @@ export default css`
 
   .board .sheets-section .trainee-problems-status .trainee-problems-cell {
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     border-top: 1px solid;
@@ -56,4 +57,20 @@ export default css`
     background-color: lightgreen;
     border-color: green;
   }
+
+  .board
+    .sheets-section
+    .trainee-problems-status
+    .trainee-problems-cell.not-ac {
+    background-color: orangered;
+    border-color: blue;
+  }
+
+  .board
+    .sheets-section
+    .trainee-problems-status
+    .trainee-problems-cell.not-solved {
+    background-color: lightgrey;
+    border-color: grey;
+  }
 `;
diff --git a/src/Components/Sheet/Sheet.js b/src/Components/Sheet/Sheet.js
index f7609bd..b07f579 100644
--- a/src/Components/Sheet/Sheet.js
+++ b/src/Components/Sheet/Sheet.js
@@ -35,7 +35,7 @@ class Sheet extends React.Component {
                   className="details"
                   style={{ top: sheetProblemIdHeight - 5 }}
                 >
-                  {problem.name}
+                  {`${problem.id}. ${problem.name}`}
                 </div>
               </a>
             ))}
diff --git a/src/Components/Sheet/styles.js b/src/Components/Sheet/styles.js
index 4ee399b..071ef9d 100644
--- a/src/Components/Sheet/styles.js
+++ b/src/Components/Sheet/styles.js
@@ -48,6 +48,14 @@ export default css`
     visibility: hidden;
   }
 
+  .sheet .problems .problem:first-child .details {
+    left: 0;
+  }
+
+  .sheet .problems .problem:last-child .details {
+    right: 0;
+  }
+
   .sheet .problems .problem:hover .details {
     opacity: 1;
     visibility: visible;