diff --git a/imports/pages/give/home/Layout.js b/imports/pages/give/home/Layout.js
index 61daf9ae1..244bbff09 100644
--- a/imports/pages/give/home/Layout.js
+++ b/imports/pages/give/home/Layout.js
@@ -6,7 +6,7 @@ import Activity from "./Activity";
 import Schedules from "./Schedules";
 import SavedPayments from "./SavedPayments";
 
-const ACTIVITY_QUERY = gql`
+export const ACTIVITY_QUERY = gql`
   query GivingDashboard($filters: [String]!) {
     scheduledTransactions(cache: false) {
       id
diff --git a/imports/pages/give/home/RightPanel.js b/imports/pages/give/home/RightPanel.js
index 9666f2c5e..170da97ee 100644
--- a/imports/pages/give/home/RightPanel.js
+++ b/imports/pages/give/home/RightPanel.js
@@ -1,5 +1,5 @@
 
-// flow
+// @flow
 
 import moment from "moment";
 
@@ -12,16 +12,21 @@ import withData from "./givingSummaryEnhancer";
 import YTDGraph from "./YTDMetrics";
 import Progress from "./FundBreakdown";
 
-const start = moment().year();
+export const start = moment().year();
 
-const YEARS = [{ value: start, label: start }];
+export const YEARS = [{ value: start, label: start }];
 
 for (const i of Array(9).keys()) {
   YEARS.push({ value: start - (i + 1), label: start - (i + 1) });
 }
 
+type IRightPanel = {
+  loading: boolean,
+  data: Object,
+  changeYear: Function,
+};
 
-export default withData(({ loading, data, changeYear }) => (
+export const RightPanel = ({ loading, data, changeYear }: IRightPanel) => (
   <div className="scrollable locked-ends locked-sides background--primary soft-double-sides soft-double-top">
     {/* spacer */}
     <div className="push-double-top display-inline-block soft-double-ends soft-double-right one-whole">
@@ -69,5 +74,6 @@ export default withData(({ loading, data, changeYear }) => (
       )}
     </div>
   </div>
-));
+);
 
+export default withData(RightPanel);
diff --git a/imports/pages/give/home/__tests__/GivingSummary.js b/imports/pages/give/home/__tests__/GivingSummary.js
index 0c1f49dca..f2a498909 100644
--- a/imports/pages/give/home/__tests__/GivingSummary.js
+++ b/imports/pages/give/home/__tests__/GivingSummary.js
@@ -1,7 +1,7 @@
 
 import { GivingSummary, Display } from "../GivingSummary";
-import { mount } from "enzyme";
-import { mountToJson } from "enzyme-to-json";
+import { shallow, mount } from "enzyme";
+import { shallowToJson, mountToJson } from "enzyme-to-json";
 
 //mocked because already tested
 jest.mock("./../../../../components/cards/cards.YearToDate.js", () => () => <div /> );
@@ -38,8 +38,12 @@ describe("GivingSummary", () => {
     expect(mountToJson(component)).toMatchSnapshot();
   });
   it("should render nothing if the breakpoints don't match", () => {
-    const component = mount(<GivingSummary breakpoints={["lap-and-up"]} />);
-    expect(mountToJson(component)).toMatchSnapshot();
+    const component = shallow(<GivingSummary breakpoints={["lap-and-up"]} />);
+    expect(shallowToJson(component)).toMatchSnapshot();
+  });
+  it("should render if the breakpoints don't match", () => {
+    const component = shallow(<GivingSummary breakpoints={["lap"]} />);
+    expect(shallowToJson(component)).toMatchSnapshot();
   });
   it("should pass correct props to graph with data", () => {
     const component = mount(generateComponent({data: data}));
diff --git a/imports/pages/give/home/__tests__/Layout.js b/imports/pages/give/home/__tests__/Layout.js
new file mode 100644
index 000000000..e2d42be2f
--- /dev/null
+++ b/imports/pages/give/home/__tests__/Layout.js
@@ -0,0 +1,11 @@
+
+import { ACTIVITY_QUERY } from "../Layout";
+import { mount } from "enzyme";
+import { mountToJson } from "enzyme-to-json";
+
+describe("giving homepage layout", () => {
+
+  it("should have a consistent data shape", () => {
+    expect(ACTIVITY_QUERY).toMatchSnapshot();
+  });
+});
\ No newline at end of file
diff --git a/imports/pages/give/home/__tests__/RightPanel.js b/imports/pages/give/home/__tests__/RightPanel.js
new file mode 100644
index 000000000..15d9d9013
--- /dev/null
+++ b/imports/pages/give/home/__tests__/RightPanel.js
@@ -0,0 +1,67 @@
+import { mount } from "enzyme";
+import { mountToJson } from "enzyme-to-json";
+import { reset, startBuffering } from "aphrodite/lib/inject";
+
+import { RightPanel, start, YEARS } from "../RightPanel";
+
+jest.mock("../YTDMetrics", () => jest.fn(() => <div id="YTDMetrics" />));
+
+const mockData = {
+  accounts: {
+    'General Fund': 66,
+    'Christmas Offering': 0,
+    'Step Up Fund': 0
+  },
+  total: 66,
+  chartData: [
+    { month: 'January', amount: 0, tick: 'J' },
+    { month: 'February', amount: 11, tick: 'F' },
+    { month: 'March', amount: 0, tick: 'M' },
+    { month: 'April', amount: 9, tick: 'A' },
+    { month: 'May', amount: 18, tick: 'M' },
+    { month: 'June', amount: 7, tick: 'J' },
+    { month: 'July', amount: 6, tick: 'J' },
+    { month: 'August', amount: 5, tick: 'A' },
+    { month: 'September', amount: 4, tick: 'S' },
+    { month: 'October', amount: 3, tick: 'O' },
+    { month: 'November', amount: 2, tick: 'N' },
+    { month: 'December', amount: 1, tick: 'D' }
+  ]
+};
+
+describe("RightPanel Layout", () => {
+
+  beforeEach(() => {
+    reset();
+    startBuffering();
+  });
+
+  afterEach(() => {
+    reset();
+  });
+
+  const generateComponent = (additionalProps) =>
+    <RightPanel
+      {...additionalProps}
+      data={mockData}
+      changeYear={() => jest.fn()}
+    />;
+
+  it("should be the current year", () => {
+    expect(start).toBe(new Date().getFullYear())
+  });
+
+  it("should provide an array of 10 years", () => {
+    expect(YEARS.length).toBe(10);
+  });
+
+  it("should render a loading state", () => {
+    const tree = mount(generateComponent({ loading: true }));
+    expect(mountToJson(tree)).toMatchSnapshot();
+  });
+
+  it("should render with data", () => {
+    const tree = mount(generateComponent({ loading: false }));
+    expect(mountToJson(tree)).toMatchSnapshot();
+  });
+});
\ No newline at end of file
diff --git a/imports/pages/give/home/__tests__/SavedPayments.js b/imports/pages/give/home/__tests__/SavedPayments.js
index 2529ea0b2..06e7a1061 100644
--- a/imports/pages/give/home/__tests__/SavedPayments.js
+++ b/imports/pages/give/home/__tests__/SavedPayments.js
@@ -29,6 +29,22 @@ describe ("Saved Payments List", () => {
     expect(mountToJson(component)).toMatchSnapshot();
   });
 
+  it ("should render a loading state", () => {
+    const mockLoadingData = {
+      loading: true,
+    };
+
+    const component = mount(<SavedPaymentsList payments={mockLoadingData} />);
+    expect(mountToJson(component)).toMatchSnapshot();
+  });
+
+  it("should render without saved payments", () => {
+    const mockEmptyData = { };
+
+    const component = mount(<SavedPaymentsList payments={mockEmptyData} />);
+    expect(mountToJson(component)).toMatchSnapshot();
+  });
+
   it ("should render properly with data", () => {
     const component = mount(generateComponent());
     expect(mountToJson(component)).toMatchSnapshot();
diff --git a/imports/pages/give/home/__tests__/__snapshots__/GivingSummary.js.snap b/imports/pages/give/home/__tests__/__snapshots__/GivingSummary.js.snap
index 9e01fa9e5..9feec60c5 100644
--- a/imports/pages/give/home/__tests__/__snapshots__/GivingSummary.js.snap
+++ b/imports/pages/give/home/__tests__/__snapshots__/GivingSummary.js.snap
@@ -161,13 +161,8 @@ exports[`GivingSummary should pass correct props to graph with data 1`] = `
 </Display>
 `;
 
-exports[`GivingSummary should render nothing if the breakpoints don't match 1`] = `
-<GivingSummary
-  breakpoints={
-    Array [
-      "lap-and-up",
-    ]
-  } />
-`;
+exports[`GivingSummary should render if the breakpoints don't match 1`] = `<MeteorDataContainer />`;
+
+exports[`GivingSummary should render nothing if the breakpoints don't match 1`] = `null`;
 
 exports[`GivingSummary should render with minimal props 1`] = `<Display />`;
diff --git a/imports/pages/give/home/__tests__/__snapshots__/Layout.js.snap b/imports/pages/give/home/__tests__/__snapshots__/Layout.js.snap
new file mode 100644
index 000000000..fa94bdf28
--- /dev/null
+++ b/imports/pages/give/home/__tests__/__snapshots__/Layout.js.snap
@@ -0,0 +1,575 @@
+exports[`giving homepage layout should have a consistent data shape 1`] = `
+Object {
+  "definitions": Array [
+    Object {
+      "directives": Array [],
+      "kind": "OperationDefinition",
+      "name": Object {
+        "kind": "Name",
+        "value": "GivingDashboard",
+      },
+      "operation": "query",
+      "selectionSet": Object {
+        "kind": "SelectionSet",
+        "selections": Array [
+          Object {
+            "alias": null,
+            "arguments": Array [
+              Object {
+                "kind": "Argument",
+                "name": Object {
+                  "kind": "Name",
+                  "value": "cache",
+                },
+                "value": Object {
+                  "kind": "BooleanValue",
+                  "value": false,
+                },
+              },
+            ],
+            "directives": Array [],
+            "kind": "Field",
+            "name": Object {
+              "kind": "Name",
+              "value": "scheduledTransactions",
+            },
+            "selectionSet": Object {
+              "kind": "SelectionSet",
+              "selections": Array [
+                Object {
+                  "alias": null,
+                  "arguments": Array [],
+                  "directives": Array [],
+                  "kind": "Field",
+                  "name": Object {
+                    "kind": "Name",
+                    "value": "id",
+                  },
+                  "selectionSet": null,
+                },
+                Object {
+                  "alias": null,
+                  "arguments": Array [],
+                  "directives": Array [],
+                  "kind": "Field",
+                  "name": Object {
+                    "kind": "Name",
+                    "value": "start",
+                  },
+                  "selectionSet": null,
+                },
+                Object {
+                  "alias": null,
+                  "arguments": Array [],
+                  "directives": Array [],
+                  "kind": "Field",
+                  "name": Object {
+                    "kind": "Name",
+                    "value": "details",
+                  },
+                  "selectionSet": Object {
+                    "kind": "SelectionSet",
+                    "selections": Array [
+                      Object {
+                        "alias": null,
+                        "arguments": Array [],
+                        "directives": Array [],
+                        "kind": "Field",
+                        "name": Object {
+                          "kind": "Name",
+                          "value": "account",
+                        },
+                        "selectionSet": Object {
+                          "kind": "SelectionSet",
+                          "selections": Array [
+                            Object {
+                              "alias": null,
+                              "arguments": Array [],
+                              "directives": Array [],
+                              "kind": "Field",
+                              "name": Object {
+                                "kind": "Name",
+                                "value": "name",
+                              },
+                              "selectionSet": null,
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "alias": null,
+                        "arguments": Array [],
+                        "directives": Array [],
+                        "kind": "Field",
+                        "name": Object {
+                          "kind": "Name",
+                          "value": "amount",
+                        },
+                        "selectionSet": null,
+                      },
+                    ],
+                  },
+                },
+                Object {
+                  "alias": null,
+                  "arguments": Array [],
+                  "directives": Array [],
+                  "kind": "Field",
+                  "name": Object {
+                    "kind": "Name",
+                    "value": "transactions",
+                  },
+                  "selectionSet": Object {
+                    "kind": "SelectionSet",
+                    "selections": Array [
+                      Object {
+                        "alias": null,
+                        "arguments": Array [],
+                        "directives": Array [],
+                        "kind": "Field",
+                        "name": Object {
+                          "kind": "Name",
+                          "value": "date",
+                        },
+                        "selectionSet": null,
+                      },
+                    ],
+                  },
+                },
+                Object {
+                  "alias": null,
+                  "arguments": Array [],
+                  "directives": Array [],
+                  "kind": "Field",
+                  "name": Object {
+                    "kind": "Name",
+                    "value": "schedule",
+                  },
+                  "selectionSet": Object {
+                    "kind": "SelectionSet",
+                    "selections": Array [
+                      Object {
+                        "alias": null,
+                        "arguments": Array [],
+                        "directives": Array [],
+                        "kind": "Field",
+                        "name": Object {
+                          "kind": "Name",
+                          "value": "description",
+                        },
+                        "selectionSet": null,
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+          Object {
+            "alias": null,
+            "arguments": Array [
+              Object {
+                "kind": "Argument",
+                "name": Object {
+                  "kind": "Name",
+                  "value": "cache",
+                },
+                "value": Object {
+                  "kind": "BooleanValue",
+                  "value": false,
+                },
+              },
+            ],
+            "directives": Array [],
+            "kind": "Field",
+            "name": Object {
+              "kind": "Name",
+              "value": "savedPayments",
+            },
+            "selectionSet": Object {
+              "kind": "SelectionSet",
+              "selections": Array [
+                Object {
+                  "alias": Object {
+                    "kind": "Name",
+                    "value": "id",
+                  },
+                  "arguments": Array [],
+                  "directives": Array [],
+                  "kind": "Field",
+                  "name": Object {
+                    "kind": "Name",
+                    "value": "entityId",
+                  },
+                  "selectionSet": null,
+                },
+                Object {
+                  "alias": null,
+                  "arguments": Array [],
+                  "directives": Array [],
+                  "kind": "Field",
+                  "name": Object {
+                    "kind": "Name",
+                    "value": "name",
+                  },
+                  "selectionSet": null,
+                },
+                Object {
+                  "alias": null,
+                  "arguments": Array [],
+                  "directives": Array [],
+                  "kind": "Field",
+                  "name": Object {
+                    "kind": "Name",
+                    "value": "payment",
+                  },
+                  "selectionSet": Object {
+                    "kind": "SelectionSet",
+                    "selections": Array [
+                      Object {
+                        "alias": null,
+                        "arguments": Array [],
+                        "directives": Array [],
+                        "kind": "Field",
+                        "name": Object {
+                          "kind": "Name",
+                          "value": "accountNumber",
+                        },
+                        "selectionSet": null,
+                      },
+                      Object {
+                        "alias": null,
+                        "arguments": Array [],
+                        "directives": Array [],
+                        "kind": "Field",
+                        "name": Object {
+                          "kind": "Name",
+                          "value": "paymentType",
+                        },
+                        "selectionSet": null,
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+          Object {
+            "alias": null,
+            "arguments": Array [
+              Object {
+                "kind": "Argument",
+                "name": Object {
+                  "kind": "Name",
+                  "value": "filters",
+                },
+                "value": Object {
+                  "kind": "Variable",
+                  "name": Object {
+                    "kind": "Name",
+                    "value": "filters",
+                  },
+                },
+              },
+            ],
+            "directives": Array [],
+            "kind": "Field",
+            "name": Object {
+              "kind": "Name",
+              "value": "userFeed",
+            },
+            "selectionSet": Object {
+              "kind": "SelectionSet",
+              "selections": Array [
+                Object {
+                  "directives": Array [],
+                  "kind": "InlineFragment",
+                  "selectionSet": Object {
+                    "kind": "SelectionSet",
+                    "selections": Array [
+                      Object {
+                        "alias": null,
+                        "arguments": Array [],
+                        "directives": Array [],
+                        "kind": "Field",
+                        "name": Object {
+                          "kind": "Name",
+                          "value": "id",
+                        },
+                        "selectionSet": null,
+                      },
+                      Object {
+                        "alias": null,
+                        "arguments": Array [],
+                        "directives": Array [],
+                        "kind": "Field",
+                        "name": Object {
+                          "kind": "Name",
+                          "value": "date",
+                        },
+                        "selectionSet": null,
+                      },
+                      Object {
+                        "alias": null,
+                        "arguments": Array [],
+                        "directives": Array [],
+                        "kind": "Field",
+                        "name": Object {
+                          "kind": "Name",
+                          "value": "summary",
+                        },
+                        "selectionSet": null,
+                      },
+                      Object {
+                        "alias": null,
+                        "arguments": Array [],
+                        "directives": Array [],
+                        "kind": "Field",
+                        "name": Object {
+                          "kind": "Name",
+                          "value": "status",
+                        },
+                        "selectionSet": null,
+                      },
+                      Object {
+                        "alias": null,
+                        "arguments": Array [],
+                        "directives": Array [],
+                        "kind": "Field",
+                        "name": Object {
+                          "kind": "Name",
+                          "value": "statusMessage",
+                        },
+                        "selectionSet": null,
+                      },
+                      Object {
+                        "alias": null,
+                        "arguments": Array [],
+                        "directives": Array [],
+                        "kind": "Field",
+                        "name": Object {
+                          "kind": "Name",
+                          "value": "schedule",
+                        },
+                        "selectionSet": Object {
+                          "kind": "SelectionSet",
+                          "selections": Array [
+                            Object {
+                              "alias": null,
+                              "arguments": Array [],
+                              "directives": Array [],
+                              "kind": "Field",
+                              "name": Object {
+                                "kind": "Name",
+                                "value": "id",
+                              },
+                              "selectionSet": null,
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "alias": null,
+                        "arguments": Array [],
+                        "directives": Array [],
+                        "kind": "Field",
+                        "name": Object {
+                          "kind": "Name",
+                          "value": "details",
+                        },
+                        "selectionSet": Object {
+                          "kind": "SelectionSet",
+                          "selections": Array [
+                            Object {
+                              "alias": null,
+                              "arguments": Array [],
+                              "directives": Array [],
+                              "kind": "Field",
+                              "name": Object {
+                                "kind": "Name",
+                                "value": "amount",
+                              },
+                              "selectionSet": null,
+                            },
+                            Object {
+                              "alias": null,
+                              "arguments": Array [],
+                              "directives": Array [],
+                              "kind": "Field",
+                              "name": Object {
+                                "kind": "Name",
+                                "value": "account",
+                              },
+                              "selectionSet": Object {
+                                "kind": "SelectionSet",
+                                "selections": Array [
+                                  Object {
+                                    "alias": null,
+                                    "arguments": Array [],
+                                    "directives": Array [],
+                                    "kind": "Field",
+                                    "name": Object {
+                                      "kind": "Name",
+                                      "value": "name",
+                                    },
+                                    "selectionSet": null,
+                                  },
+                                ],
+                              },
+                            },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                  "typeCondition": Object {
+                    "kind": "NamedType",
+                    "name": Object {
+                      "kind": "Name",
+                      "value": "Transaction",
+                    },
+                  },
+                },
+                Object {
+                  "directives": Array [],
+                  "kind": "InlineFragment",
+                  "selectionSet": Object {
+                    "kind": "SelectionSet",
+                    "selections": Array [
+                      Object {
+                        "alias": null,
+                        "arguments": Array [],
+                        "directives": Array [],
+                        "kind": "Field",
+                        "name": Object {
+                          "kind": "Name",
+                          "value": "name",
+                        },
+                        "selectionSet": null,
+                      },
+                      Object {
+                        "alias": null,
+                        "arguments": Array [],
+                        "directives": Array [],
+                        "kind": "Field",
+                        "name": Object {
+                          "kind": "Name",
+                          "value": "expirationYear",
+                        },
+                        "selectionSet": null,
+                      },
+                      Object {
+                        "alias": null,
+                        "arguments": Array [],
+                        "directives": Array [],
+                        "kind": "Field",
+                        "name": Object {
+                          "kind": "Name",
+                          "value": "expirationMonth",
+                        },
+                        "selectionSet": null,
+                      },
+                    ],
+                  },
+                  "typeCondition": Object {
+                    "kind": "NamedType",
+                    "name": Object {
+                      "kind": "Name",
+                      "value": "SavedPayment",
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+      "variableDefinitions": Array [
+        Object {
+          "defaultValue": null,
+          "kind": "VariableDefinition",
+          "type": Object {
+            "kind": "NonNullType",
+            "type": Object {
+              "kind": "ListType",
+              "type": Object {
+                "kind": "NamedType",
+                "name": Object {
+                  "kind": "Name",
+                  "value": "String",
+                },
+              },
+            },
+          },
+          "variable": Object {
+            "kind": "Variable",
+            "name": Object {
+              "kind": "Name",
+              "value": "filters",
+            },
+          },
+        },
+      ],
+    },
+  ],
+  "kind": "Document",
+  "loc": Object {
+    "end": 809,
+    "source": Source {
+      "body": "
+  query GivingDashboard($filters: [String]!) {
+    scheduledTransactions(cache: false) {
+      id
+      start
+      details {
+        account {
+          name
+        }
+        amount
+      }
+      transactions {
+        date
+      }
+      schedule {
+        description
+      }
+    }
+    savedPayments(cache: false){
+      id: entityId
+      name
+      payment {
+        accountNumber
+        paymentType
+      }
+    }
+    userFeed(filters: $filters) {
+      ... on Transaction {
+        id
+        date
+        summary
+        status
+        statusMessage
+        schedule {
+          id
+        }
+        details {
+          amount
+          account {
+            name
+          }
+        }
+      }
+      ... on SavedPayment {
+        name
+        expirationYear
+        expirationMonth
+      }
+    }
+  }
+",
+      "name": "GraphQL",
+    },
+    "start": 3,
+  },
+}
+`;
diff --git a/imports/pages/give/home/__tests__/__snapshots__/RightPanel.js.snap b/imports/pages/give/home/__tests__/__snapshots__/RightPanel.js.snap
new file mode 100644
index 000000000..28687de70
--- /dev/null
+++ b/imports/pages/give/home/__tests__/__snapshots__/RightPanel.js.snap
@@ -0,0 +1,690 @@
+exports[`RightPanel Layout should render a loading state 1`] = `
+<RightPanel
+  changeYear={[Function]}
+  data={
+    Object {
+      "accounts": Object {
+        "Christmas Offering": 0,
+        "General Fund": 66,
+        "Step Up Fund": 0,
+      },
+      "chartData": Array [
+        Object {
+          "amount": 0,
+          "month": "January",
+          "tick": "J",
+        },
+        Object {
+          "amount": 11,
+          "month": "February",
+          "tick": "F",
+        },
+        Object {
+          "amount": 0,
+          "month": "March",
+          "tick": "M",
+        },
+        Object {
+          "amount": 9,
+          "month": "April",
+          "tick": "A",
+        },
+        Object {
+          "amount": 18,
+          "month": "May",
+          "tick": "M",
+        },
+        Object {
+          "amount": 7,
+          "month": "June",
+          "tick": "J",
+        },
+        Object {
+          "amount": 6,
+          "month": "July",
+          "tick": "J",
+        },
+        Object {
+          "amount": 5,
+          "month": "August",
+          "tick": "A",
+        },
+        Object {
+          "amount": 4,
+          "month": "September",
+          "tick": "S",
+        },
+        Object {
+          "amount": 3,
+          "month": "October",
+          "tick": "O",
+        },
+        Object {
+          "amount": 2,
+          "month": "November",
+          "tick": "N",
+        },
+        Object {
+          "amount": 1,
+          "month": "December",
+          "tick": "D",
+        },
+      ],
+      "total": 66,
+    }
+  }
+  loading={true}>
+  <div
+    className="scrollable locked-ends locked-sides background--primary soft-double-sides soft-double-top">
+    <div
+      className="push-double-top display-inline-block soft-double-ends soft-double-right one-whole">
+      <h3
+        className="text-light-primary outlined--bottom soft-half-bottom"
+        style={
+          Object {
+            "borderBottom": "1px solid",
+            "paddingTop": "15px",
+          }
+        }>
+        Year In Review
+      </h3>
+      <div
+        className="display-inline-block">
+        <p
+          className="text-light-primary display-inline-block soft-half-right">
+          <small>
+            <em>
+              See your summary from
+            </em>
+          </small>
+        </p>
+        <style>
+          .right-select select { color: #ffffff } .right-select:after {border-color: #ffffff transparent transparent}
+        </style>
+        <Select
+          classes={
+            Array [
+              "right-select",
+              "hard",
+              "flush",
+              "display-inline-block",
+            ]
+          }
+          hideLabel={true}
+          inputClasses="outlined--dotted outlined--light text-light-primary h6 hard-top flush-bottom"
+          items={
+            Array [
+              Object {
+                "label": 2016,
+                "value": 2016,
+              },
+              Object {
+                "label": 2015,
+                "value": 2015,
+              },
+              Object {
+                "label": 2014,
+                "value": 2014,
+              },
+              Object {
+                "label": 2013,
+                "value": 2013,
+              },
+              Object {
+                "label": 2012,
+                "value": 2012,
+              },
+              Object {
+                "label": 2011,
+                "value": 2011,
+              },
+              Object {
+                "label": 2010,
+                "value": 2010,
+              },
+              Object {
+                "label": 2009,
+                "value": 2009,
+              },
+              Object {
+                "label": 2008,
+                "value": 2008,
+              },
+              Object {
+                "label": 2007,
+                "value": 2007,
+              },
+            ]
+          }
+          onChange={[Function]}>
+          <div
+            className="input right-select hard flush display-inline-block select_15p0e27">
+            <select
+              className="outlined--dotted outlined--light text-light-primary h6 hard-top flush-bottom"
+              onChange={[Function]}
+              onFocus={[Function]}>
+              <option
+                value={2016}>
+                2016
+              </option>
+              <option
+                value={2015}>
+                2015
+              </option>
+              <option
+                value={2014}>
+                2014
+              </option>
+              <option
+                value={2013}>
+                2013
+              </option>
+              <option
+                value={2012}>
+                2012
+              </option>
+              <option
+                value={2011}>
+                2011
+              </option>
+              <option
+                value={2010}>
+                2010
+              </option>
+              <option
+                value={2009}>
+                2009
+              </option>
+              <option
+                value={2008}>
+                2008
+              </option>
+              <option
+                value={2007}>
+                2007
+              </option>
+            </select>
+          </div>
+        </Select>
+      </div>
+      <div
+        className="soft-double one-whole text-center">
+        <Spinner
+          styles={
+            Object {
+              "borderColor": "#fff #6BAC43 #fff #fff",
+              "borderWidth": "7px",
+            }
+          }>
+          <div
+            className="loader_9h6gj"
+            style={
+              Object {
+                "borderColor": "#fff #6BAC43 #fff #fff",
+                "borderWidth": "7px",
+              }
+            } />
+        </Spinner>
+      </div>
+    </div>
+  </div>
+</RightPanel>
+`;
+
+exports[`RightPanel Layout should render with data 1`] = `
+<RightPanel
+  changeYear={[Function]}
+  data={
+    Object {
+      "accounts": Object {
+        "Christmas Offering": 0,
+        "General Fund": 66,
+        "Step Up Fund": 0,
+      },
+      "chartData": Array [
+        Object {
+          "amount": 0,
+          "month": "January",
+          "tick": "J",
+        },
+        Object {
+          "amount": 11,
+          "month": "February",
+          "tick": "F",
+        },
+        Object {
+          "amount": 0,
+          "month": "March",
+          "tick": "M",
+        },
+        Object {
+          "amount": 9,
+          "month": "April",
+          "tick": "A",
+        },
+        Object {
+          "amount": 18,
+          "month": "May",
+          "tick": "M",
+        },
+        Object {
+          "amount": 7,
+          "month": "June",
+          "tick": "J",
+        },
+        Object {
+          "amount": 6,
+          "month": "July",
+          "tick": "J",
+        },
+        Object {
+          "amount": 5,
+          "month": "August",
+          "tick": "A",
+        },
+        Object {
+          "amount": 4,
+          "month": "September",
+          "tick": "S",
+        },
+        Object {
+          "amount": 3,
+          "month": "October",
+          "tick": "O",
+        },
+        Object {
+          "amount": 2,
+          "month": "November",
+          "tick": "N",
+        },
+        Object {
+          "amount": 1,
+          "month": "December",
+          "tick": "D",
+        },
+      ],
+      "total": 66,
+    }
+  }
+  loading={false}>
+  <div
+    className="scrollable locked-ends locked-sides background--primary soft-double-sides soft-double-top">
+    <div
+      className="push-double-top display-inline-block soft-double-ends soft-double-right one-whole">
+      <h3
+        className="text-light-primary outlined--bottom soft-half-bottom"
+        style={
+          Object {
+            "borderBottom": "1px solid",
+            "paddingTop": "15px",
+          }
+        }>
+        Year In Review
+      </h3>
+      <div
+        className="display-inline-block">
+        <p
+          className="text-light-primary display-inline-block soft-half-right">
+          <small>
+            <em>
+              See your summary from
+            </em>
+          </small>
+        </p>
+        <style>
+          .right-select select { color: #ffffff } .right-select:after {border-color: #ffffff transparent transparent}
+        </style>
+        <Select
+          classes={
+            Array [
+              "right-select",
+              "hard",
+              "flush",
+              "display-inline-block",
+            ]
+          }
+          hideLabel={true}
+          inputClasses="outlined--dotted outlined--light text-light-primary h6 hard-top flush-bottom"
+          items={
+            Array [
+              Object {
+                "label": 2016,
+                "value": 2016,
+              },
+              Object {
+                "label": 2015,
+                "value": 2015,
+              },
+              Object {
+                "label": 2014,
+                "value": 2014,
+              },
+              Object {
+                "label": 2013,
+                "value": 2013,
+              },
+              Object {
+                "label": 2012,
+                "value": 2012,
+              },
+              Object {
+                "label": 2011,
+                "value": 2011,
+              },
+              Object {
+                "label": 2010,
+                "value": 2010,
+              },
+              Object {
+                "label": 2009,
+                "value": 2009,
+              },
+              Object {
+                "label": 2008,
+                "value": 2008,
+              },
+              Object {
+                "label": 2007,
+                "value": 2007,
+              },
+            ]
+          }
+          onChange={[Function]}>
+          <div
+            className="input right-select hard flush display-inline-block select_15p0e27">
+            <select
+              className="outlined--dotted outlined--light text-light-primary h6 hard-top flush-bottom"
+              onChange={[Function]}
+              onFocus={[Function]}>
+              <option
+                value={2016}>
+                2016
+              </option>
+              <option
+                value={2015}>
+                2015
+              </option>
+              <option
+                value={2014}>
+                2014
+              </option>
+              <option
+                value={2013}>
+                2013
+              </option>
+              <option
+                value={2012}>
+                2012
+              </option>
+              <option
+                value={2011}>
+                2011
+              </option>
+              <option
+                value={2010}>
+                2010
+              </option>
+              <option
+                value={2009}>
+                2009
+              </option>
+              <option
+                value={2008}>
+                2008
+              </option>
+              <option
+                value={2007}>
+                2007
+              </option>
+            </select>
+          </div>
+        </Select>
+      </div>
+      <div>
+        <mockConstructor
+          data={
+            Object {
+              "accounts": Object {
+                "Christmas Offering": 0,
+                "General Fund": 66,
+                "Step Up Fund": 0,
+              },
+              "chartData": Array [
+                Object {
+                  "amount": 0,
+                  "month": "January",
+                  "tick": "J",
+                },
+                Object {
+                  "amount": 11,
+                  "month": "February",
+                  "tick": "F",
+                },
+                Object {
+                  "amount": 0,
+                  "month": "March",
+                  "tick": "M",
+                },
+                Object {
+                  "amount": 9,
+                  "month": "April",
+                  "tick": "A",
+                },
+                Object {
+                  "amount": 18,
+                  "month": "May",
+                  "tick": "M",
+                },
+                Object {
+                  "amount": 7,
+                  "month": "June",
+                  "tick": "J",
+                },
+                Object {
+                  "amount": 6,
+                  "month": "July",
+                  "tick": "J",
+                },
+                Object {
+                  "amount": 5,
+                  "month": "August",
+                  "tick": "A",
+                },
+                Object {
+                  "amount": 4,
+                  "month": "September",
+                  "tick": "S",
+                },
+                Object {
+                  "amount": 3,
+                  "month": "October",
+                  "tick": "O",
+                },
+                Object {
+                  "amount": 2,
+                  "month": "November",
+                  "tick": "N",
+                },
+                Object {
+                  "amount": 1,
+                  "month": "December",
+                  "tick": "D",
+                },
+              ],
+              "total": 66,
+            }
+          }
+          linkUrl="/give/history">
+          <div
+            id="YTDMetrics" />
+        </mockConstructor>
+        <div
+          className="push-ends soft-ends" />
+        <FundBreakdown
+          data={
+            Object {
+              "accounts": Object {
+                "Christmas Offering": 0,
+                "General Fund": 66,
+                "Step Up Fund": 0,
+              },
+              "chartData": Array [
+                Object {
+                  "amount": 0,
+                  "month": "January",
+                  "tick": "J",
+                },
+                Object {
+                  "amount": 11,
+                  "month": "February",
+                  "tick": "F",
+                },
+                Object {
+                  "amount": 0,
+                  "month": "March",
+                  "tick": "M",
+                },
+                Object {
+                  "amount": 9,
+                  "month": "April",
+                  "tick": "A",
+                },
+                Object {
+                  "amount": 18,
+                  "month": "May",
+                  "tick": "M",
+                },
+                Object {
+                  "amount": 7,
+                  "month": "June",
+                  "tick": "J",
+                },
+                Object {
+                  "amount": 6,
+                  "month": "July",
+                  "tick": "J",
+                },
+                Object {
+                  "amount": 5,
+                  "month": "August",
+                  "tick": "A",
+                },
+                Object {
+                  "amount": 4,
+                  "month": "September",
+                  "tick": "S",
+                },
+                Object {
+                  "amount": 3,
+                  "month": "October",
+                  "tick": "O",
+                },
+                Object {
+                  "amount": 2,
+                  "month": "November",
+                  "tick": "N",
+                },
+                Object {
+                  "amount": 1,
+                  "month": "December",
+                  "tick": "D",
+                },
+              ],
+              "total": 66,
+            }
+          }>
+          <div>
+            <h3
+              className="text-light-primary soft-half-bottom push-double-bottom"
+              style={
+                Object {
+                  "borderBottom": "1px solid",
+                }
+              }>
+              Fund Breakdown
+            </h3>
+            <div
+              className="push-bottom">
+              <ProgressBar
+                percentDone={100}
+                style={Object {}}
+                theme=""
+                title="General Fund"
+                total={66}>
+                <div
+                  style={
+                    Object {
+                      "color": "#fff",
+                    }
+                  }>
+                  <div
+                    className="floating floating--left one-half display-inline-block push-half-top"
+                    style={
+                      Object {
+                        "verticalAlign": "middle",
+                      }
+                    }>
+                    <h5
+                      className="floating__item"
+                      data-spec="title">
+                      General Fund
+                    </h5>
+                  </div>
+                  <div
+                    className="floating floating--right one-half display-inline-block"
+                    style={
+                      Object {
+                        "verticalAlign": "middle",
+                      }
+                    }>
+                    <Currency
+                      amount={66}
+                      baseHeadingSize="4"
+                      className="floating__item text-right"
+                      roundCurrency={true}
+                      theme="light">
+                      <div
+                        className="floating text-light-primary floating__item text-right">
+                        <h6
+                          className="floating__item flush"
+                          style={
+                            Object {
+                              "paddingRight": "5px",
+                            }
+                          }>
+                          $
+                        </h6>
+                        <h4
+                          className="floating__item flush">
+                          66
+                        </h4>
+                      </div>
+                    </Currency>
+                  </div>
+                  <div
+                    className="one-whole"
+                    style={
+                      Object {
+                        "backgroundColor": "#2a4930",
+                        "height": "6px",
+                      }
+                    }>
+                    <div
+                      style={
+                        Object {
+                          "backgroundColor": "white",
+                          "height": "100%",
+                          "width": "100%",
+                        }
+                      } />
+                  </div>
+                </div>
+              </ProgressBar>
+            </div>
+          </div>
+        </FundBreakdown>
+      </div>
+    </div>
+  </div>
+</RightPanel>
+`;
diff --git a/imports/pages/give/home/__tests__/__snapshots__/SavedPayments.js.snap b/imports/pages/give/home/__tests__/__snapshots__/SavedPayments.js.snap
index 09b89550a..fe80ec144 100644
--- a/imports/pages/give/home/__tests__/__snapshots__/SavedPayments.js.snap
+++ b/imports/pages/give/home/__tests__/__snapshots__/SavedPayments.js.snap
@@ -1,3 +1,32 @@
+exports[`Saved Payments List should render a loading state 1`] = `
+<SavedPaymentsList
+  payments={
+    Object {
+      "loading": true,
+    }
+  }>
+  <div
+    className="soft-half-sides soft-double-sides@lap-and-up">
+    <Component>
+      <div
+        className="card">
+        <div
+          className="card__item soft">
+          <div
+            className="soft-half-top one-fifth push-bottom background--light-tertiary" />
+          <div
+            className="soft-half-top four-fifths push-half-bottom background--light-tertiary" />
+          <div
+            className="soft-half-top one-half push-bottom background--light-tertiary" />
+          <div
+            className="soft-half-top one-quarter background--light-tertiary" />
+        </div>
+      </div>
+    </Component>
+  </div>
+</SavedPaymentsList>
+`;
+
 exports[`Saved Payments List should render properly with data 1`] = `
 <SavedPaymentsList
   payments={
@@ -92,3 +121,64 @@ exports[`Saved Payments List should render properly with data 1`] = `
 `;
 
 exports[`Saved Payments List should render with minimal props 1`] = `<SavedPaymentsList />`;
+
+exports[`Saved Payments List should render without saved payments 1`] = `
+<SavedPaymentsList
+  payments={Object {}}>
+  <div
+    className="soft-half-sides soft-double-sides@lap-and-up">
+    <SectionHeader
+      link={<Unknown />}
+      title="Saved Accounts">
+      <div
+        className="one-whole">
+        <div
+          className="one-half floating display-inline-block floating--left soft soft-half-left">
+          <h6
+            className="floating__item text-dark-tertiary flush">
+            Saved Accounts
+          </h6>
+        </div>
+        <div
+          className="one-half floating display-inline-block floating--right soft soft-half-right">
+          <Component>
+            <SmallButton
+              className="btn--dark-tertiary flush"
+              onClick={[Function]}
+              text="Add Account">
+              <button
+                className="
+                  btn btn--small@next
+                  
+                  btn--dark-tertiary flush
+                "
+                onClick={[Function]}
+                style={Object {}}>
+                Add Account
+              </button>
+            </SmallButton>
+          </Component>
+        </div>
+      </div>
+    </SectionHeader>
+    <div
+      className="card">
+      <div
+        className="card__item soft">
+        <h4
+          className="text-dark-primary">
+          Adding a saved account makes giving even easier!
+        </h4>
+        <p>
+          We can’t wait for you to take your next step in giving. After you have given your first contribution, you’ll see your activity here.
+        </p>
+        <button
+          className="btn one-whole@handheld flush-bottom"
+          onClick={[Function]}>
+          Get Started Now
+        </button>
+      </div>
+    </div>
+  </div>
+</SavedPaymentsList>
+`;
diff --git a/imports/pages/give/home/__tests__/__snapshots__/index.js.snap b/imports/pages/give/home/__tests__/__snapshots__/index.js.snap
new file mode 100644
index 000000000..be60431dd
--- /dev/null
+++ b/imports/pages/give/home/__tests__/__snapshots__/index.js.snap
@@ -0,0 +1,15 @@
+exports[`home index file has a template 1`] = `
+<Connect(Authorized)>
+  <Apollo(Component) />
+</Connect(Authorized)>
+`;
+
+exports[`home index file has routes 1`] = `
+Array [
+  Object {
+    "component": [Function],
+    "path": "home",
+    "rightComponent": <MeteorDataContainer />,
+  },
+]
+`;
diff --git a/imports/pages/give/home/__tests__/index.js b/imports/pages/give/home/__tests__/index.js
new file mode 100644
index 000000000..e012931b3
--- /dev/null
+++ b/imports/pages/give/home/__tests__/index.js
@@ -0,0 +1,15 @@
+
+import { shallow } from "enzyme";
+import { shallowToJson } from "enzyme-to-json"
+import Home from "../";
+
+describe("home index file", () => {
+  it("has a template", () => {
+    const wrapper = shallow(<Home.Home />);
+    expect(shallowToJson(wrapper)).toMatchSnapshot();
+  });
+
+  it("has routes", () => {
+    expect(Home.Routes).toMatchSnapshot();
+  });
+})
\ No newline at end of file
diff --git a/imports/pages/give/home/components/__tests__/Loading.js b/imports/pages/give/home/components/__tests__/Loading.js
new file mode 100644
index 000000000..f01c40b20
--- /dev/null
+++ b/imports/pages/give/home/components/__tests__/Loading.js
@@ -0,0 +1,27 @@
+import { shallow } from "enzyme";
+import { shallowToJson } from "enzyme-to-json";
+import Loading from "../Loading";
+
+describe("Loading", () => {
+  const defaultProps = {
+    type: "update"
+  };
+
+  const generateComponent = (additionalProps = {}) => {
+    const newProps = {
+      ...defaultProps,
+      ...additionalProps,
+    };
+    return <Loading { ...newProps }/>
+  };
+
+  it("renders with default props", () => {
+    const wrapper = shallow(generateComponent());
+    expect(shallowToJson(wrapper)).toMatchSnapshot();
+  });
+
+  it("renders with a different type", () => {
+    const wrapper = shallow(generateComponent({ type: "ohheckno" }));
+    expect(shallowToJson(wrapper)).toMatchSnapshot();
+  });
+})
\ No newline at end of file
diff --git a/imports/pages/give/home/components/__tests__/Success.js b/imports/pages/give/home/components/__tests__/Success.js
new file mode 100644
index 000000000..3779e69e3
--- /dev/null
+++ b/imports/pages/give/home/components/__tests__/Success.js
@@ -0,0 +1,61 @@
+import { shallow } from "enzyme";
+import { shallowToJson } from "enzyme-to-json";
+import Success, { ContactLink, ContactUs } from "../Success";
+
+describe("Success", () => {
+  const defaultProps = {
+    type: "update",
+    onClick: jest.fn(),
+  };
+
+  const generateComponent = (additionalProps = {}) => {
+    const newProps = {
+      ...defaultProps,
+      ...additionalProps,
+    };
+    return <Success { ...newProps }/>
+  };
+
+  it("renders with default props", () => {
+    const wrapper = shallow(generateComponent());
+    expect(shallowToJson(wrapper)).toMatchSnapshot();
+  });
+
+  it("renders with a different type", () => {
+    const wrapper = shallow(generateComponent({ type: "ohheckno" }));
+    expect(shallowToJson(wrapper)).toMatchSnapshot();
+  });
+
+  it("calls onClick when you click", () => {
+    const mockOnClick = jest.fn();
+    const wrapper = shallow(generateComponent({
+      onClick: mockOnClick,
+    }));
+
+    expect(mockOnClick).not.toHaveBeenCalled();
+    wrapper.find("button").simulate("click");
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("ContactLink", () => {
+  const generateComponent = () => (
+    <ContactLink />
+  );
+
+  it("renders", () => {
+    const wrapper = shallow(generateComponent());
+    expect(shallowToJson(wrapper)).toMatchSnapshot();
+  })
+});
+
+describe("ContactUs", () => {
+  const generateComponent = () => (
+    <ContactUs />
+  );
+
+  it("renders", () => {
+    const wrapper = shallow(generateComponent());
+    expect(shallowToJson(wrapper)).toMatchSnapshot();
+  })
+})
\ No newline at end of file
diff --git a/imports/pages/give/home/components/__tests__/__snapshots__/Loading.js.snap b/imports/pages/give/home/components/__tests__/__snapshots__/Loading.js.snap
new file mode 100644
index 000000000..9818e1cb2
--- /dev/null
+++ b/imports/pages/give/home/components/__tests__/__snapshots__/Loading.js.snap
@@ -0,0 +1,61 @@
+exports[`Loading renders with a different type 1`] = `
+<Loading
+  classes={
+    Array [
+      "background--primary",
+    ]
+  }>
+  <div
+    className="soft soft-double-ends push-double-top one-whole text-center">
+    <div
+      className="push-double-top">
+      <Spinner
+        styles={
+          Object {
+            "borderColor": "#fff #6BAC43 #fff #fff",
+            "borderWidth": "7px",
+          }
+        } />
+      <h3
+        className="text-light-primary push-top">
+        We\'re Removing Your Saved Account
+      </h3>
+      <p
+        className="text-light-primary">
+        Please don\'t close this window while we remove your account details
+      </p>
+    </div>
+  </div>
+</Loading>
+`;
+
+exports[`Loading renders with default props 1`] = `
+<Loading
+  classes={
+    Array [
+      "background--primary",
+    ]
+  }>
+  <div
+    className="soft soft-double-ends push-double-top one-whole text-center">
+    <div
+      className="push-double-top">
+      <Spinner
+        styles={
+          Object {
+            "borderColor": "#fff #6BAC43 #fff #fff",
+            "borderWidth": "7px",
+          }
+        } />
+      <h3
+        className="text-light-primary push-top">
+        We\'re Updating Your Saved Account
+      </h3>
+      <p
+        className="text-light-primary">
+        Please don\'t close this window while we update your account details
+      </p>
+    </div>
+  </div>
+</Loading>
+`;
diff --git a/imports/pages/give/home/components/__tests__/__snapshots__/Success.js.snap b/imports/pages/give/home/components/__tests__/__snapshots__/Success.js.snap
new file mode 100644
index 000000000..3112e2b31
--- /dev/null
+++ b/imports/pages/give/home/components/__tests__/__snapshots__/Success.js.snap
@@ -0,0 +1,73 @@
+exports[`ContactLink renders 1`] = `
+<a
+  href="//rock.newspring.cc/workflows/152?Topic=Stewardship"
+  rel="noopener noreferrer"
+  target="_blank">
+  contact us
+</a>
+`;
+
+exports[`ContactUs renders 1`] = `
+<p
+  className="test-dark-tertiary text-left">
+  <em>
+    If you have any questions please call our Finance Team at 864-965-9990 or
+     
+    <ContactLink />
+     
+    and someone will be happy to assist you.
+  </em>
+</p>
+`;
+
+exports[`Success renders with a different type 1`] = `
+<div
+  className="soft soft-double-ends push-double-top@anchored one-whole text-center">
+  <div
+    className="push-double-top">
+    <Success
+      fill="#6BAC43"
+      height="61px"
+      width="60px" />
+    <h3
+      className="text-primary push-ends">
+      Success!
+    </h3>
+    <p>
+      Your account has been removed!
+    </p>
+    <button
+      className="btn one-whole push-bottom"
+      onClick={[Function]}>
+      Back To Dashboard
+    </button>
+    <ContactUs />
+  </div>
+</div>
+`;
+
+exports[`Success renders with default props 1`] = `
+<div
+  className="soft soft-double-ends push-double-top@anchored one-whole text-center">
+  <div
+    className="push-double-top">
+    <Success
+      fill="#6BAC43"
+      height="61px"
+      width="60px" />
+    <h3
+      className="text-primary push-ends">
+      Success!
+    </h3>
+    <p>
+      Thank you for updating your saved account!
+    </p>
+    <button
+      className="btn one-whole push-bottom"
+      onClick={[Function]}>
+      Back To Dashboard
+    </button>
+    <ContactUs />
+  </div>
+</div>
+`;