diff --git a/app/webapp/app/Controllers/Http/GameController.js b/app/webapp/app/Controllers/Http/GameController.js
index f24fb3e..c22dd2c 100644
--- a/app/webapp/app/Controllers/Http/GameController.js
+++ b/app/webapp/app/Controllers/Http/GameController.js
@@ -6,12 +6,13 @@ class GameController {
 
   // /games
   async index({ inertia }) {
-    const pageTitle = "Last 1000 Games"
+    const pageTitle = "Last 1000 Games";
+
     const gamesQry = await Database.table('games')
       .distinct('game_id',
                 'map',
                 'gametype',
-      //          'stats',
+                'stats',
                 'datestamp')
       .where('game_id', '<>', 0)
       .orderBy('game_id', 'desc')
@@ -27,13 +28,14 @@ class GameController {
       }
     }, []);
 
+    // move the 0 score display logic here
+
     return inertia.render('Games/Main', { pageTitle, games }, { edgeVar: 'server-variable' })
   }
 
 
   // game/:game_id
   async game({ inertia, request }) {
-
     const gameInfo = await Database.from('games')
                                      .distinct('game_id',
                                      'map',
@@ -43,9 +45,11 @@ class GameController {
                                      'stats',
                                      'datestamp')
                                      .where({ game_id: request.params.game_id })
+    const pageTitle = {
+      name: gameInfo[0]['map'],
+      gametype: gameInfo[0]['gametype']
+    }
 
-
-    const pageTitle = gameInfo[0]['map']
     return inertia.render('Games/Game', { pageTitle, gameInfo }, { edgeVar: 'server-variable' })
   }
 
diff --git a/app/webapp/resources/js/Components/FrameHeading/FrameHeading.js b/app/webapp/resources/js/Components/FrameHeading/FrameHeading.js
index 2c4e4ea..f431ca0 100644
--- a/app/webapp/resources/js/Components/FrameHeading/FrameHeading.js
+++ b/app/webapp/resources/js/Components/FrameHeading/FrameHeading.js
@@ -7,6 +7,7 @@ const FrameHeading = (props) => {
       <h1 className="text-lg leading-6 font-semibold text-gray-900">
         {props.heading}
       </h1>
+      { props.gametype ? props.gametype : ''}
     </div>
   </header>
   );
diff --git a/app/webapp/resources/js/Pages/Games/Game.js b/app/webapp/resources/js/Pages/Games/Game.js
index 82bee19..2a7a90d 100644
--- a/app/webapp/resources/js/Pages/Games/Game.js
+++ b/app/webapp/resources/js/Pages/Games/Game.js
@@ -41,7 +41,7 @@ const renderActiveShape = (props) => {
       />
       <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none"/>
       <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none"/>
-      <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#333">{`${value} points`}</text>
+      <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#333">{`${value}`}</text>
       <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={18} textAnchor={textAnchor} fill="#999">
         {`(${(percent * 100).toFixed(2)}%)`}
       </text>
@@ -63,7 +63,6 @@ export class TwoLevelPieChart extends PureComponent {
   };
 
   render() {
-    console.log(this.state.data);
     return (
       <PieChart width={400} height={400}>
         <Pie
@@ -77,6 +76,7 @@ export class TwoLevelPieChart extends PureComponent {
           fill="#ccc"
           dataKey="value"
           onMouseEnter={this.onPieEnter}
+          className="text-xs"
         />
       </PieChart>
     );
@@ -85,64 +85,86 @@ export class TwoLevelPieChart extends PureComponent {
 
 
 const PlayerRow = (player, index) => {
+  // dont show scoreless players
+  if (Number(player.stats.score) <= 0){return}
 
-  return <li key={index}>
-    <InertiaLink href={`/player/${player.player_guid}`} className="block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out">
-      <div className="flex items-center px-4 py-4 sm:px-6">
-        <div className="min-w-0 flex-1 flex items-center">
-          <div className="min-w-0 flex-1 md:grid md:grid-cols-2 md:gap-4">
-            <div>
-              <div className="text-sm leading-5 font-medium text-indigo-600 truncate">{player.player_name}</div>
-              <div className="mt-2 flex items-center text-sm leading-5 text-gray-500">
-                <span className="truncate">Last Active:</span>
-              </div>
-            </div>
-            <div className="hidden md:block">
-              <div>
-                <div className="text-sm leading-5 text-gray-900">
-                  Total Score
-                </div>
-                <div className="mt-2 flex items-center">
-                  <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium leading-4 bg-gray-100 text-gray-800">{player.stats.score}</span>
-
-                  {
-                    (player.gametype == "CTFGame" || player.gametype == "SCtFGame") ? <TwoLevelPieChart data={{
-                        oScore: Number(player.stats.offenseScore[0]),
-                        dScore: Number(player.stats.defenseScore[0])}
-                      }/>
-                    : ''
-                  }
-                </div>
-
-              </div>
-            </div>
-          </div>
+  return  <div className="flex flex-col rounded-lg shadow-lg overflow-hidden" key={index}>
+  <div className="bg-white shadow overflow-hidden sm:rounded-lg">
+    <div className="px-4 py-5 border-b border-gray-200 sm:px-6">
+      <h3 className="text-lg leading-6 font-medium">
+      <InertiaLink href={`/player/${player.player_guid}`} className="text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">{player.player_name}</InertiaLink>
+      </h3>
+    </div>
+    <div>
+      <dl>
+        <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+          <dt className="text-sm leading-5 font-medium text-gray-500">
+            Total Score
+          </dt>
+          <dd className="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+          {player.stats.score}
+          </dd>
         </div>
-        <div>
-          <svg className="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-            <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd"/>
-          </svg>
+        <div className="bg-gray-50">
+          {
+            (player.gametype == "CTFGame" || player.gametype == "SCtFGame") ? <TwoLevelPieChart data={{
+                oScore: Number(player.stats.offenseScore[0]),
+                dScore: Number(player.stats.defenseScore[0])}
+              }/>
+            : ''
+          }
         </div>
-      </div>
-    </InertiaLink>
-    </li>;
+        <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+          <dt className="text-sm leading-5 font-medium text-gray-500">
+            Kills / Assists
+          </dt>
+          <dd className="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+          {player.stats.kills} / {player.stats.assist}
+          </dd>
+        </div>
+        <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+          <dt className="text-sm leading-5 font-medium text-gray-500">
+            MAs
+          </dt>
+          <dd className="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+          {player.stats.totalMA}
+          </dd>
+        </div>
+        <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+          <dt className="text-sm leading-5 font-medium text-gray-500">
+          Flag Grabs / Caps
+          </dt>
+          <dd className="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+          {player.stats.flagGrabs} / {player.stats.flagCaps}
+          </dd>
+        </div>
+        <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+          <dt className="text-sm leading-5 font-medium text-gray-500">
+          Flag Defends / Carrier Kills / Returns
+          </dt>
+          <dd className="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+          {player.stats.flagDefends} / {player.stats.carrierKills} / {player.stats.flagReturns}
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+</div>;
 }
 
 
 
 export default function Game(props) {
   return (
-    <Layout title={props.pageTitle}>
+    <Layout title={props.pageTitle.name} gametype={props.pageTitle.gametype}>
 
-      <div className="bg-white shadow overflow-hidden sm:rounded-md">
-        <ul>
-          { props.gameInfo.map((game, index) => PlayerRow(game, index)) }
-        </ul>
+      <div className="mt-2 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
+        { props.gameInfo.map((game, index) => PlayerRow(game, index)) }
       </div>
-
+{/*
       <div className="bg-white shadow overflow-hidden sm:rounded-md">
        <div className="py-10 px-10"><code> {JSON.stringify(props.gameInfo)}</code></div>
-      </div>
+      </div> */}
     </Layout>
   )
 }
diff --git a/app/webapp/resources/js/Pages/Games/Main.js b/app/webapp/resources/js/Pages/Games/Main.js
index a339b09..ddfa4be 100644
--- a/app/webapp/resources/js/Pages/Games/Main.js
+++ b/app/webapp/resources/js/Pages/Games/Main.js
@@ -6,6 +6,9 @@ import Layout from '@/Shared/Layout'
 
 const GameRow = (game, index) => {
 
+  // TODO: move this into controller for faster render
+  if (Number(game.stats.score) === 0){return}
+
   return <li key={index}>
     <InertiaLink href={`/game/${game.game_id}`} className="block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out">
       <div className="flex items-center px-4 py-4 sm:px-6">
diff --git a/app/webapp/resources/js/Shared/Layout.js b/app/webapp/resources/js/Shared/Layout.js
index a06ae0e..51e3997 100644
--- a/app/webapp/resources/js/Shared/Layout.js
+++ b/app/webapp/resources/js/Shared/Layout.js
@@ -3,7 +3,7 @@ import React, { useEffect } from 'react'
 import TopNav from '../Components/TopNav';
 import FrameHeading from '../Components/FrameHeading'
 
-export default function Layout({ title, children }) {
+export default function Layout({ title, gametype, children }) {
   useEffect(() => {
     document.title = title;
   }, [title])
@@ -11,7 +11,7 @@ export default function Layout({ title, children }) {
   return (
   <>
     <TopNav />
-    <FrameHeading heading={title} />
+    <FrameHeading heading={title} gametype={gametype} />
     <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
       <div className="px-4 py-4 sm:px-0">
         { children }