diff --git a/election-ui-javascript/src/components/PartyLinks/PartyLinks.css b/election-ui-javascript/src/components/PartyLinks/PartyLinks.css
index 8be8eb8..3bd20c6 100644
--- a/election-ui-javascript/src/components/PartyLinks/PartyLinks.css
+++ b/election-ui-javascript/src/components/PartyLinks/PartyLinks.css
@@ -1,3 +1,23 @@
 .Party-links {
   color: red;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  list-style: none;
+  gap: 10px;
+  grid-template-rows: repeat(2, 1fr);
+  padding-inline-start: 0px;
 }
+
+.Party-links li {
+  padding: 1rem;
+  border: 3px solid #bb1919;
+  margin-top: 1rem;
+}
+.Party-links li a {
+  color: black;
+  display: inline-block;
+  transition: all 500ms;
+}
+.Party-links li a:hover {
+  transform: scale(1.1);
+}
\ No newline at end of file
diff --git a/election-ui-javascript/src/components/Scoreboard.js b/election-ui-javascript/src/components/Scoreboard.js
index 3b39b82..5d382c6 100644
--- a/election-ui-javascript/src/components/Scoreboard.js
+++ b/election-ui-javascript/src/components/Scoreboard.js
@@ -9,12 +9,15 @@ function Scoreboard() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
   const [results, setResults] = useState([]);
+  const [isComplete, setIsComplete] = useState([]);
+
 
   async function getData() {
     try {
       setLoading(true);
-      const resultData = await fetchData();
-      setResults(resultData.results);
+      const theData  = await fetchData();
+      setResults(theData.results);
+      setIsComplete(theData.isComplete);
       setLoading(false);
     } catch (e) {
       setLoading(false);
@@ -37,9 +40,10 @@ function Scoreboard() {
           error ? <h1>Error</h1> :
           <>
             <h1>Results</h1>
-            <Scorecard results={results} />
-            <a className="Scoreboard-refresh">Refresh</a>
+            <Scorecard results={results} isComplete={isComplete} />
+            <button className="Scoreboard-refresh" onClick={() => getData()}>Refresh</button>
             <h1>Learn more about the parties...</h1>
+            
             <PartyLinks />
           </>
         }
diff --git a/election-ui-javascript/src/components/Scorecard/Scorecard.css b/election-ui-javascript/src/components/Scorecard/Scorecard.css
index aa5707b..02f5e3d 100644
--- a/election-ui-javascript/src/components/Scorecard/Scorecard.css
+++ b/election-ui-javascript/src/components/Scorecard/Scorecard.css
@@ -18,4 +18,17 @@
 
 .Scorecard-table tbody tr:nth-of-type(2n + 1) {
   background-color: white;
-}
\ No newline at end of file
+}
+
+.winner{
+  background-color: yellow;
+}
+
+
+.badge {
+    background-color: red;
+    color: white;
+    padding: 4px 8px;
+    text-align: center;
+    border-radius: 5px;
+  }
diff --git a/election-ui-javascript/src/components/Scorecard/index.js b/election-ui-javascript/src/components/Scorecard/index.js
index 481678b..f3b44a2 100644
--- a/election-ui-javascript/src/components/Scorecard/index.js
+++ b/election-ui-javascript/src/components/Scorecard/index.js
@@ -1,17 +1,29 @@
 import './Scorecard.css';
 
-function Scorecard({ results }) {
+function Scorecard({ results, isComplete }) {
   if (!results || results.length === 0) {
     return <div>No results</div>;
   }
 
   let scores = [];
+
+
+//gets the winner
+//const winner = results.reduce((max, { votes }) => Math.max(max, votes), 0);
+const votesArr = results.map(({votes}) => votes);
+const winner = Math.max(...votesArr); 
+
+const isWinner =  (votes ,comp, winner ) => comp && votes === winner ;
+
+
+
   for (let i=0; i < results.length; i++) {
+    const theWinner = isWinner(results[i].votes, isComplete, winner);
     scores.push(
       <tr key={i}>
         <td>{results[i].party}</td>
-        <td>{results[i].candidateId}</td>
-        <td>{results[i].votes}</td>
+        <td>{results[i].name}  </td>
+        <td className={theWinner && 'winner'}>{results[i].votes} {theWinner && <span className={'badge'}>The winner</span>}</td>
       </tr>
     )
   }
diff --git a/election-ui-javascript/src/dataFetcher/index.js b/election-ui-javascript/src/dataFetcher/index.js
index e6e00f6..3e0772b 100644
--- a/election-ui-javascript/src/dataFetcher/index.js
+++ b/election-ui-javascript/src/dataFetcher/index.js
@@ -1,10 +1,16 @@
 import { fetchResultData, fetchCandidateData } from '../fakeAPI'; // Let's imagine this is an external service that we are calling via https
 
 async function fetchResults() {
-  const results = await fetchResultData();
-  const candidateData = fetchCandidateData();
+  const {results, isComplete} = await fetchResultData();
+  const candidateData =  fetchCandidateData();
+  
+  const newResults = results.map((item, index) => {
+    return {...item, name: candidateData?.[index]?.name}
+  })
 
-  return results;
+  const theResults = {isComplete, results:  newResults};
+
+  return theResults
 }
 
 export default fetchResults;