diff --git a/money-tracker-online/src/main/webapp/WEB-INF/jsp/common/style-includes.jsp b/money-tracker-online/src/main/webapp/WEB-INF/jsp/common/style-includes.jsp
index 5214a1b..31a599f 100644
--- a/money-tracker-online/src/main/webapp/WEB-INF/jsp/common/style-includes.jsp
+++ b/money-tracker-online/src/main/webapp/WEB-INF/jsp/common/style-includes.jsp
@@ -5,6 +5,7 @@
 <!-- Optional theme -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
 
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 <!-- Latest compiled and minified JavaScript -->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 
@@ -13,6 +14,18 @@
         background-color:#EEE;
     }
 
+    .push-top-soft{
+        padding-top:5px;
+    }
+
+    .push-bottom-soft{
+        padding-bottom:5px;
+    }
+
+    .push-bottom-hard{
+        padding-bottom:10px;
+    }
+
     .pageHeading{
         padding-bottom: 10px;
     }
@@ -22,6 +35,8 @@
     }
 
     .striped-list .row.listing-item:nth-child(even){
-        background-color:gray;
+        background-color:whitesmoke;
+        padding-top:5px;
+        padding-bottom:5px;
     }
 </style>
\ No newline at end of file
diff --git a/money-tracker-online/src/main/webapp/WEB-INF/jsp/money-tracker/detail.jsp b/money-tracker-online/src/main/webapp/WEB-INF/jsp/money-tracker/detail.jsp
index 6707199..d8feb41 100644
--- a/money-tracker-online/src/main/webapp/WEB-INF/jsp/money-tracker/detail.jsp
+++ b/money-tracker-online/src/main/webapp/WEB-INF/jsp/money-tracker/detail.jsp
@@ -4,45 +4,113 @@
 <head>
     <title></title>
 
-    <%@include file="../common/style-includes.jsp"%>
+    <%@include file="../common/style-includes.jsp" %>
 </head>
 <body>
-    <div class="pageWrapper container">
-        <div class="pageHeading">
-            <div class="row">
-                Tracker Breakdown
-            </div>
-        </div>
 
-        <div class="pageBody">
+<div class="pageWrapper">
+    <%--<jsp:include page="../common/nav-bar.jsp"/>--%>
 
-            <div class="row">
-                Starting Amount: ${tracker.moneyForTheMonth}
-            </div>
-            <div class="row">
-                Total spent: ${tracker.moneyForTheMonth - tracker.totalRemaining}
-            </div>
-            <div class="row">
-                Balance: ${tracker.totalRemaining}
+    <div class="pageBody">
+
+        <div class="container">
+            <div class="panel">
+                <div class="panel-body">
+                    <div class="row">
+                        <div class="col-xs-2"><a href="/money-tracker-online/money-tracker">Home</a></div>
+                        <div class="col-xs-8">
+                            <div class="text-center h4">Total Remaining:</div>
+                            <div class="text-center h3">${tracker.totalRemaining}</div>
+                        </div>
+                    </div>
+                </div>
             </div>
 
-            <div class="row">
-                <a class="button" href="<c:url value="/money-tracker/${tracker.uuid}/add-transaction"/>">Add Transaction</a>
+            <div class="panel">
+                <div class="panel-body">
+                    <div class="striped-list">
+                        <div class="listing-item row">
+                            <div class="col-xs-6">Total Spent:</div>
+                            <div class="col-xs-6">${tracker.moneyForTheMonth - tracker.totalRemaining}</div>
+                        </div>
+                        <div class="listing-item row">
+                            <div class="col-xs-6">Initial Amount:</div>
+                            <div class="col-xs-6">${tracker.moneyForTheMonth}</div>
+                        </div>
+                    </div>
+                </div>
             </div>
 
-            <div class="row">
-                Transaction Breakdown:
-                <c:forEach items="${tracker.transactionHistory}" var="transactionListing">
-                    <div>${transactionListing.key} - Total Spent: ${tracker.getMoneySpentOn(transactionListing.key)}</div>
-                    <ul>
-                        <c:forEach items="${transactionListing.value}" var="transaction">
-                            <li>${transaction.amount}</li>
+            <div class="panel">
+                <div class="panel-body">
+                    <div class="row push-bottom-hard text-center">
+                        <div class="col-xs-2">
+                            <a class="transactionTrigger" href="#">
+                                <span class="glyphicon glyphicon-chevron-down"></span>
+                            </a>
+                        </div>
+                        <div class="col-xs-8">
+                            <a class="transactionTrigger" href="#">
+                                <span class="triggerText h5">Show Transaction History</span>
+                            </a>
+                        </div>
+                        <div class="col-xs-2">
+                            <a class="transactionTrigger" href="#">
+                                <span class="glyphicon glyphicon-chevron-down"></span>
+                            </a>
+                        </div>
+                    </div>
+
+                    <div class="striped-list" id="transactionHistory" style="display:none;">
+                        <c:forEach items="${tracker.transactionHistory}" var="transactionListing">
+                            <div class="listing-item row">
+                                <div class="col-xs-12">
+                                    ${transactionListing.key} : ${tracker.getMoneySpentOn(transactionListing.key)}
+                                </div>
+                            </div>
+                            <c:forEach items="${transactionListing.value}" var="transaction">
+                                <div class="listing-item row">
+                                    <div class="col-xs-offset-2">${transaction.amount}</div>
+                                </div>
+                            </c:forEach>
                         </c:forEach>
-                    </ul>
+                    </div>
+                </div>
+            </div>
 
-                </c:forEach>
+            <div class="panel">
+                <div class="panel-body">
+                    <div class="row">
+                        <div class="col-xs-12">
+                            <a class="btn btn-default" style="width:100%" href="<c:url value="/money-tracker/${tracker.uuid}/add-transaction"/>">Add Transaction</a>
+                        </div>
+                    </div>
+                </div>
             </div>
+
         </div>
+
+
     </div>
+
+</div>
+<script type="text/javascript">
+    $(document).ready(function(){
+        $('a.transactionTrigger').on('click', function(){
+            if(!$(this).hasClass('toggled')){
+                $('#transactionHistory').slideDown();
+                $(this).addClass('toggled');
+                $('.transactionTrigger .glyphicon').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
+                $('.transactionTrigger .triggerText').html('Hide Transaction History');
+            }else{
+                $('#transactionHistory').slideUp();
+                $(this).removeClass('toggled');
+                $('.transactionTrigger .glyphicon').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
+                $('.transactionTrigger .triggerText').html('Show Transaction History');
+            }
+        })
+    })
+</script>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/money-tracker-online/src/main/webapp/WEB-INF/jsp/money-tracker/list.jsp b/money-tracker-online/src/main/webapp/WEB-INF/jsp/money-tracker/list.jsp
index d770cdb..c70c0c0 100644
--- a/money-tracker-online/src/main/webapp/WEB-INF/jsp/money-tracker/list.jsp
+++ b/money-tracker-online/src/main/webapp/WEB-INF/jsp/money-tracker/list.jsp
@@ -5,59 +5,67 @@
     <title></title>
 
     <%@include file="../common/style-includes.jsp" %>
+    <style>
+        .row.listing-item:nth-of-type(odd) {
+            background: #e0e0e0;
+        }
+    </style>
 
 </head>
 <body>
 
-    <div class="pageWrapper">
-        <jsp:include page="../common/nav-bar.jsp"/>
+<div class="pageWrapper">
+    <jsp:include page="../common/nav-bar.jsp"/>
 
-        <div class="pageBody">
+    <div class="pageBody">
 
-            <div class="container panel">
-                <div class="panel-body">
-                    <h2>Your Money Trackers</h2>
-                    <div class="striped-list">
-                        <div class="row listing-item">
-                            <div class="col-xs-4">
-                                Date Created
-                            </div>
-                            <div class="col-xs-4">
-                                Starting Amount
-                            </div>
-                            <div class="col-xs-4">
-                                Total Remaining
-                            </div>
+        <div class="container panel">
+            <div class="panel-body">
+                <h2>Your Money Trackers</h2>
+
+                <div class="striped-list">
+                    <div class="row listing-item">
+                        <div class="col-xs-4">
+                            Date Created
+                        </div>
+                        <div class="col-xs-4">
+                            Starting Amount
+                        </div>
+                        <div class="col-xs-4">
+                            Total Remaining
                         </div>
-                        <c:forEach items="${user.moneyTrackers}" var="tracker">
+                    </div>
+                    <c:forEach items="${user.moneyTrackers}" var="tracker">
+                        <div class="row listing-item">
                             <a href="/money-tracker-online/money-tracker/${tracker.uuid}">
-                                <div class="row listing-item">
-                                    <div class="col-xs-4">
-                                            ${tracker.dateTimeCreated}
-                                    </div>
-                                    <div class="col-xs-4">
-                                            ${tracker.moneyForTheMonth}
-                                    </div>
-                                    <div class="col-xs-4">
-                                            ${tracker.totalRemaining}
-                                    </div>
+
+                                <div class="col-xs-4">
+                                        ${tracker.dateTimeCreated}
+                                </div>
+                                <div class="col-xs-4">
+                                        ${tracker.moneyForTheMonth}
+                                </div>
+                                <div class="col-xs-4">
+                                        ${tracker.totalRemaining}
                                 </div>
                             </a>
-                        </c:forEach>
-                    </div>
 
-
-                    <div class="row">
-                        <div class="col-md-2 push-top-hard">
-                            <a class="btn btn-default" href="<c:url value='/money-tracker/create'/>">New Tracker</a>
                         </div>
+                    </c:forEach>
+                </div>
+
+
+                <div class="row">
+                    <div class="col-md-2 push-top-hard">
+                        <a class="btn btn-default" href="<c:url value='/money-tracker/create'/>">New Tracker</a>
                     </div>
                 </div>
             </div>
-
         </div>
 
     </div>
 
+</div>
+
 </body>
 </html>
\ No newline at end of file
