diff --git a/src/components/Plan/index.jsx b/src/components/Plan/index.jsx
index 4749fbb..e4a633c 100644
--- a/src/components/Plan/index.jsx
+++ b/src/components/Plan/index.jsx
@@ -1,17 +1,26 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-function Plan({ plan }) {
+function Plan({ initial_plan }) {
+
+	const onChangeDescription = (e) => {
+		const p = {
+			...plan,
+			plan_description: e.currentTarget.value
+		};
+		savePlan(p);
+ 	}
+
 	return (
 		<div className="plan-wrapper">
 			<p>{plan.plan_id}: </p>
-			<p>Description: {plan.plan_description}</p>
+			<input type="text" onChange={onChangeDescription} value={plan.plan_description}/>
 		</div>
 	);
 }
 
 Plan.propTypes = {
-	plan: PropTypes.object,
+	plan: PropTypes.object
 };
 
 export default Plan;
diff --git a/src/components/PlanList/index.jsx b/src/components/PlanList/index.jsx
index 8079356..c1ae9ec 100644
--- a/src/components/PlanList/index.jsx
+++ b/src/components/PlanList/index.jsx
@@ -2,13 +2,13 @@ import React from "react";
 import PropTypes from "prop-types";
 import Plan from "../Plan";
 
-function PlanList({ plans }) {
+function PlanList({ plans, savePlan }) {
 	return (
 		<ul className="plan-list-wrapper">
 			{plans.map((plan) => {
 				return (
 					<li key={plan.plan_id}>
-						<Plan plan={plan} />
+						<Plan plan={plan} savePlan={savePlan}/>
 					</li>
 				);
 			})}
@@ -18,6 +18,7 @@ function PlanList({ plans }) {
 
 PlanList.propTypes = {
 	plans: PropTypes.arrayOf(PropTypes.object),
+	savePlan: PropTypes.func
 };
 
 export default PlanList;
diff --git a/src/screens/AuthenticatedApp.jsx b/src/screens/AuthenticatedApp.jsx
index 7179302..81c1030 100644
--- a/src/screens/AuthenticatedApp.jsx
+++ b/src/screens/AuthenticatedApp.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useCallback } from "react";
 import { useAuth, useClient } from "../context/AuthContext";
 import "./AuthenticatedApp.scss";
 import PlanList from "../components/PlanList";
-import { getPlansFunc } from "../services/plans-service";
+import { getPlansFunc, savePlanFunc } from "../services/plans-service";
 
 function AuthenticatedApp() {
 	const { logout, user } = useAuth();
@@ -14,6 +14,31 @@ function AuthenticatedApp() {
 	// const getPlans = getPlansFunc(client);
 
 	const getPlans = useCallback(() => getPlansFunc(client)(), [client]);
+	const savePlan = useCallback(
+		(plan) => {
+			console.log("in the callback saveplan func");
+			console.log(plan);
+			return savePlanFunc(client)(plan)
+		}, [client]);
+
+	const updatePlan = (plan) => {
+		savePlan(plan)
+			.then((data) => {
+				console.log("returning from save plan");
+				console.log(data);
+				setError(null);
+			})
+			.catch((error) => {
+				setError(error);
+			})
+		const newPlans = plans.map(currentPlan => {
+			if (currentPlan.plan_id === plan.plan_id) {
+				return plan;
+			}
+			return currentPlan;
+		});
+		setPlans(newPlans);
+	}
 
 	useEffect(() => {
 		setLoading(true);
@@ -40,7 +65,7 @@ function AuthenticatedApp() {
 				</p>
 				<p>Error: {error || "No errors"}</p>
 				<p>Loading: {isLoading ? "Loading" : "Not loading"}</p>
-				<PlanList plans={plans} />
+				<PlanList plans={plans} savePlan={updatePlan} />
 			</div>
 		</div>
 	);