diff --git a/server.py b/server.py
index fce5178..19c3d56 100644
--- a/server.py
+++ b/server.py
@@ -927,6 +927,11 @@ def get(self, region, id):
         return_dict['matches'] = match_list
         return_dict['wins'] = 0
         return_dict['losses'] = 0
+        
+        # current ranking period
+        return_dict['qualifying_matches'] = 0
+        return_dict['qualifying_wins'] = 0
+        return_dict['qualifying_losses'] = 0
 
         if player.merged:
             # no need to look up tournaments for merged players
@@ -958,17 +963,24 @@ def get(self, region, id):
                     except:
                         err('Invalid ObjectID')
 
-                    if tournament.date >= (now - timedelta(day_limit)):
+                    qualifying = tournament.date >= (now - timedelta(day_limit))
+                    
+                    if qualifying:
                         qualifying_tournaments.add(tournament.id)
+                        return_dict['qualifying_matches'] += 1
 
                     if match.excluded is True:
                         match_dict['result'] = 'excluded'
                     elif match.did_player_win(player.id):
                         match_dict['result'] = 'win'
                         return_dict['wins'] += 1
+                        if qualifying:
+                            return_dict['qualifying_wins'] += 1
                     else:
                         match_dict['result'] = 'lose'
                         return_dict['losses'] += 1
+                        if qualifying:
+                            return_dict['qualifying_losses'] += 1
 
                     match_list.append(match_dict)
 
diff --git a/webapp/app/head_to_head/controllers/headToHead.controller.js b/webapp/app/head_to_head/controllers/headToHead.controller.js
index faabf18..48ccbde 100644
--- a/webapp/app/head_to_head/controllers/headToHead.controller.js
+++ b/webapp/app/head_to_head/controllers/headToHead.controller.js
@@ -6,6 +6,9 @@ angular.module('app.headToHead').controller("HeadToHeadController", function($sc
     $scope.player2 = null;
     $scope.wins = 0;
     $scope.losses = 0;
+    $scope.curMatches = 0;
+    $scope.curWins = 0;
+    $scope.curLosses = 0;
 
     // get fresh "player" from the change listener, since the model updates after the change listener is fired...
     $scope.onPlayer1Change = function(player) {
@@ -28,6 +31,9 @@ angular.module('app.headToHead').controller("HeadToHeadController", function($sc
                     $scope.matches = data.matches.reverse();
                     $scope.wins = data.wins;
                     $scope.losses = data.losses;
+                    $scope.curMatches = data.qualifying_matches;
+                    $scope.curWins = data.qualifying_wins;
+                    $scope.curLosses = data.qualifying_losses;
                 });
         }
     };
diff --git a/webapp/app/head_to_head/views/headtohead.html b/webapp/app/head_to_head/views/headtohead.html
index 15b49ad..33162f9 100644
--- a/webapp/app/head_to_head/views/headtohead.html
+++ b/webapp/app/head_to_head/views/headtohead.html
@@ -5,37 +5,73 @@
 </style>
 
 <div class="container">
-    <div class="form-group row shadow-container">
-        <div class="col-md-3 col-md-offset-2 col-xs-5" player-typeahead-directive
-            typeahead-class="form-control input-lg h2h player_input mobile"
-            player="player1"
-            placeholder="Player Name"
-            on-player-select="onPlayer1Change(item)">
+    <div class="form-group shadow-container">
+        <div class="row">
+            <div class="col-md-3 col-md-offset-2 col-xs-5" player-typeahead-directive
+                typeahead-class="form-control input-lg h2h player_input mobile"
+                player="player1"
+                placeholder="Player Name"
+                on-player-select="onPlayer1Change(item)">
+            </div>
+            
+            <div class="col-md-3 col-md-offset-2 col-xs-5 col-xs-offset-2" player-typeahead-directive
+                typeahead-class="form-control input-lg h2h player_input mobile"
+                player="player2"
+                placeholder="Player Name"
+                on-player-select="onPlayer2Change(item)">
+            </div>
         </div>
-
-        <div class="col-md-2 col-xs-2">
-            <h1><p class="text-center"><label>{{wins}}-{{losses}}</label></p></h1>
-        </div>
-
-        <div class="col-md-3 col-xs-5" player-typeahead-directive
-            typeahead-class="form-control input-lg h2h player_input mobile"
-            player="player2"
-            placeholder="Player Name"
-            on-player-select="onPlayer2Change(item)">
+        
+        <div class="row" style="margin-top: 0px;">
+            <div class="col-md-2 col-md-offset-4 col-xs-6">
+                <p class="text-center" style="margin-top: 0px; margin-bottom: 0px;">
+                Total
+                </p>
+                <h1 class="text-center" style="margin-top: 0px;">
+                    <label>{{wins}}-{{losses}}</label>
+                </h1>
+            </div>
+            <div class="col-md-2 col-xs-6">
+                <p class="text-center" style="margin-top: 0px; margin-bottom: 0px;">
+                This Period
+                </p>
+                <h1 class="text-center" style="margin-top: 0px;">
+                    <label>{{curWins}}-{{curLosses}}</label>
+                </h1>
+            </div>
         </div>
     </div>
+    
     <table class="table table-condensed">
         <tr class="player-line">
             <th>Date</th>
             <th>Tournament</th>
             <th>Winner</th>
         </tr>
-        <tr ng-class="{success: match.result == 'win', danger: match.result == 'lose',
-                       excluded: match.result == 'excluded'}" ng-repeat="match in matches"
-                        class="player_line">
-            <td>{{match.tournament_date}}</td>
-            <td><a href="#/{{regionService.region.id}}/tournaments/{{match.tournament_id}}">{{match.tournament_name}}</a></td>
-            <td>{{ determineMatchStatus(match,playerName,opponentName) }}</td>
+        
+        <tr ng-class="{success: match.result == 'win',
+                       danger: match.result == 'lose',
+                       excluded: match.result == 'excluded'}"
+            ng-repeat="match in matches"
+            class="player_line">
+            
+            <!-- draw a black dotted line above the first match
+                 that's not in the current ranking period -->
+            <td ng-if="$index == curMatches" style="border-top: 1px dashed black">
+                {{match.tournament_date}}</td>
+            <td ng-if="$index == curMatches" style="border-top: 1px dashed black">
+                <a href="#/{{regionService.region.id}}/tournaments/{{match.tournament_id}}">{{match.tournament_name}}</a></td>
+            <td ng-if="$index == curMatches" style="border-top: 1px dashed black">
+                {{ determineMatchStatus(match,playerName,opponentName) }}</td>
+            
+            <!-- else don't draw the dotted line -->
+            <td ng-if="$index != curMatches">
+                {{match.tournament_date}}</td>
+            <td ng-if="$index != curMatches">
+                <a href="#/{{regionService.region.id}}/tournaments/{{match.tournament_id}}">{{match.tournament_name}}</a></td>
+            <td ng-if="$index != curMatches">
+                {{ determineMatchStatus(match,playerName,opponentName) }}</td>
+            
         </tr>
     </table>
 </div>