diff --git a/styles/elements/_typography.scss b/styles/elements/_typography.scss
index 1ae28d9f..48784659 100644
--- a/styles/elements/_typography.scss
+++ b/styles/elements/_typography.scss
@@ -102,3 +102,7 @@ dl {
   font-weight: $font-bold;
   color: $color-black;
 }
+
+@mixin small-copy {
+  font-size: $small-font-size;
+}
diff --git a/styles/sections/_reports.scss b/styles/sections/_reports.scss
index a53e2842..2d8708ba 100644
--- a/styles/sections/_reports.scss
+++ b/styles/sections/_reports.scss
@@ -1,264 +1,62 @@
-.funding-summary-row {
-  @include media($medium-screen) {
-    @include grid-row;
+.reporting-section-header {
+  display: flex;
+  align-items: baseline;
+  &__header {
+    margin-right: $gap;
+  }
+  &__subheader {
+    @include small-copy;
+  }
+}
 
-    flex-wrap: wrap;
+.jedi-clin-funding {
+  padding-top: $gap * 3;
+  padding-bottom: $gap * 3;
+
+  &__clin-wrapper {
+    border-bottom: 1px solid $color-gray-light;
+    margin-bottom: $gap * 3;
+    padding-bottom: $gap * 3;
+  }
+  > div:nth-last-child(2) {
+    margin-bottom: 0;
   }
 
-  &__col {
-    hr {
-      margin: (2 * $gap) 0;
-    }
+  &__header {
+    margin: 0;
+  }
 
-    @include media($medium-screen) {
-      @include grid-pad;
+  &__subheader {
+    @include small-copy;
+    margin: 0;
+  }
 
-      flex-grow: 1;
+  &__meter {
+    margin: 10px 0;
+    -moz-transform: scale(-1, 1);
+    -webkit-transform: scale(-1, 1);
+    -o-transform: scale(-1, 1);
+    -ms-transform: scale(-1, 1);
+    transform: scale(-1, 1);
+    width: 100%;
+
+    &-values {
       display: flex;
-      flex-direction: row;
-      flex-basis: 50%;
-
-      @include ie-only {
-        max-width: 50%;
-      }
-
-      &:first-child {
-        padding-left: 0;
-      }
-
-      &:last-child {
-        padding-right: 0;
-      }
-    }
-
-    align-items: stretch;
-
-    .panel {
-      padding: $gap * 2;
-      width: 100%;
-
-      @include ie-only {
-        max-width: 100%;
-      }
-
-      .subheading {
-        @include h4;
-
-        margin: 0 $gap (2 * $gap) 0;
-        -ms-flex-negative: 1;
-      }
-
-      // Spending Summary
-      // ===============================
-      &.spend-summary {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-
-        .row {
-          justify-content: space-between;
-
-          @include ie-only {
-            max-width: 100%;
-            flex-wrap: wrap;
-          }
-        }
-
-        &__budget {
-          @include ie-only {
-            margin: $gap 0 0 0;
-          }
-        }
-
-        dl {
-          text-align: left;
-          margin: 0 0 ($gap / 2) 0;
-
-          @include ie-only {
-            text-align: left;
-          }
-
-          dt {
-            text-transform: uppercase;
-            color: $color-gray-light;
-            margin-right: $gap;
-            font-weight: bold;
-            font-size: $small-font-size;
-          }
-        }
-
-        meter {
-          width: 100%;
-          height: 3rem;
-          margin: ($gap * 2) 0 0;
-        }
-
-        &__spent {
-          margin: (2 * $gap) 0;
-          display: flex;
-          flex-direction: column;
-          justify-content: flex-end;
-
-          dt {
-            letter-spacing: 0.47px;
-          }
-        }
-      }
-
-      // Task Order Summary
-      // ===============================
-      &.to-summary {
-        .icon-link {
-          font-weight: $font-normal;
-        }
-
-        .subheading {
-          margin-bottom: 0;
-        }
-
-        .to-summary__heading {
-          @include h4;
-
-          margin: 0 $gap 0 0;
-        }
-
-        .to-summary__to-number {
-          margin: 0;
-
-          dd {
-            &::before {
-              content: "#";
-              color: $color-gray;
-              margin-right: $gap;
-            }
-          }
-
-          @include media($xlarge-screen) {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: nowrap;
-
-            .to-summary__to {
-              margin: 0 $gap 0 0;
-            }
-
-            .to-summary__expiration {
-              text-align: right;
-              flex-grow: 1;
-
-              dl {
-                margin: 0 0 0 $gap;
-
-                dd,
-                dt {
-                  display: inline;
-                }
-              }
-            }
-          }
-        }
-
-        .to-summary__expiration {
-          dl {
-            text-align: right;
-            margin-top: -2 * $gap;
-
-            dd,
-            dt {
-              display: inline;
-            }
-
-            dt {
-              font-size: $small-font-size;
-              text-transform: uppercase;
-              font-weight: $font-bold;
-              color: $color-gray-light;
-            }
-
-            dd.ending-soon {
-              font-size: $h2-font-size;
-              white-space: nowrap;
-
-              .icon {
-                @include icon-size(28);
-              }
-            }
-          }
-
-          .icon-link {
-            margin: 0 (-$gap);
-          }
-        }
-
-        .to-summary__co {
-          margin: ($gap * 2) 0 0 0;
-
-          @include media($xlarge-screen) {
-            margin: 0;
-          }
-        }
-      }
-    }
-  }
-}
-
-.spend-table__month-select {
-  margin: 0;
-  flex: 1;
-}
-
-table {
-  .spend-table__portfolio {
-    th,
-    td {
-      font-weight: bold;
     }
   }
 
-  th,
-  td {
-    &.previous-month {
-      color: $color-gray;
+  &__meta {
+    &--remaining {
+      margin-left: auto;
+      text-align: right;
     }
-
-    &.meter-cell {
-      padding-left: 0;
-      position: relative;
-      min-width: 4rem;
-
-      @include media($medium-screen) {
-        min-width: 12rem;
-      }
-
-      meter {
-        width: 100%;
-        height: 3rem;
-        background: $color-white;
-        display: none;
-
-        @include media($medium-screen) {
-          display: block;
-        }
-
-        &::-webkit-meter-bar {
-          background: $color-white;
-        }
-      }
-
-      .spend-table__meter-value {
-        @include h5;
-
-        @include media($medium-screen) {
-          display: block;
-          color: $color-white;
-          background-color: rgba($color-blue, 0.65);
-          border-radius: $gap / 2;
-          position: absolute;
-          top: 2.3rem;
-          left: $gap / 2;
-          padding: 0 ($gap / 2);
-        }
-      }
+    &-header {
+      @include small-copy;
+      margin-bottom: 0;
+    }
+    &-value {
+      margin-bottom: 0;
+      line-height: 1.2;
     }
   }
 }
diff --git a/templates/portfolios/reports/obligated_funds.html b/templates/portfolios/reports/obligated_funds.html
index 04ba4883..a774c0f9 100644
--- a/templates/portfolios/reports/obligated_funds.html
+++ b/templates/portfolios/reports/obligated_funds.html
@@ -1,29 +1,42 @@
+{% from "components/icon.html" import Icon %}
 
 <section>
-  <header>
-    <h2>Current Obligated funds</h2>
-    <span>As of DATE</span>
+  <header class="reporting-section-header">
+    <h2 class="reporting-section-header__header">Current Obligated funds</h2>
+    <span class="reporting-section-header__subheader">As of {{ now | formattedDate(formatter="%B %d, %Y at %H:%M")  }}</span>
   </header>
   <div class='panel'>
-    <div class='panel__content'>
-      <div>
-        {% for JEDI_clin, funds in current_obligated_funds.items() %}
-          {{ JEDI_clin }}
-          <meter value='{{ funds["expended_funds"] }}' min='0' max='{{ funds["obligated_funds"] }}' title='{{ JEDI_clin }}'>
-            <div class='meter__fallback' style='width:{{ (funds["expended_funds"] / funds["obligated_funds"]) * 100 }}%;'></div>
+    <div class='panel__content jedi-clin-funding'>
+      {% for JEDI_clin, funds in current_obligated_funds.items() %}
+        {% set remaining_funds = (funds["obligated_funds"] - funds["expended_funds"]) %}
+        <div class="jedi-clin-funding__clin-wrapper">
+          <h3 class="h5 jedi-clin-funding__header">
+            {{ JEDI_clin }}
+          </h3>
+          <p class="jedi-clin-funding__subheader">Total obligated amount: {{ funds["obligated_funds"] | dollars }}</p>
+          <meter class="jedi-clin-funding__meter" value='{{remaining_funds}}' min='0' max='{{ funds["obligated_funds"] }}' title='{{ JEDI_clin }}'>
+            <div class='jedi-clin-funding__meter-fallback' style='width:{{ (funds["expended_funds"] / funds["obligated_funds"]) * 100 }}%;'></div>
           </meter>
-        <div>
-          <p>Remaining funds:</p>
-          <p>{{ (funds["obligated_funds"] - funds["expended_funds"]) | dollars }}</p>
+          <div class="jedi-clin-funding__meter-values">
+            <div class="jedi-clin-funding__meta">
+              <p class="jedi-clin-funding__meta-header">Funds expended:</p>
+              <p class="h3 jedi-clin-funding__meta-value">{{ funds["expended_funds"] | dollars }}</p>
+            </div>
+            <div class="jedi-clin-funding__meta jedi-clin-funding__meta--remaining">
+              <p class="jedi-clin-funding__meta-header">Remaining funds:</p>
+              <p class="h3 jedi-clin-funding__meta-value">{{ remaining_funds | dollars }}</p>
+            </div>
+          </div>
         </div>
-        <div>
-          <p>Funds expended to date:</p>
-          <p>{{ funds["expended_funds"] | dollars }}</p>
-        </div>
-        <hr>
-        {% endfor %}
+      {% endfor %}
+      <div class="jedi-clin-funding__active-task-orders">
+        <h3 class="h4">
+          Active Task Orders
+        </h3>
         {% for task_order in portfolio.active_task_orders %}
-          <a href="{{ url_for("task_orders.review_task_order", task_order_id=task_order.id) }}">{{ task_order.number }}</a>
+          <a href="{{ url_for("task_orders.review_task_order", task_order_id=task_order.id) }}">
+          {{ task_order.number }} {{ Icon("caret_right", classes="icon--tiny icon--blue" ) }}
+        </a>
         {% endfor %}
       </div>
     </div>