diff --git a/src/app/needs/next-actions/components/NextActionsDisplay.tsx b/src/app/needs/next-actions/components/NextActionsDisplay.tsx
index 9c9bbfe3..3a18b571 100644
--- a/src/app/needs/next-actions/components/NextActionsDisplay.tsx
+++ b/src/app/needs/next-actions/components/NextActionsDisplay.tsx
@@ -32,17 +32,20 @@ export interface NextActionDocument {
 export default function NextActionsDisplay() {
   const database = useDatabase();
   const [highlightedNeeds, setHighlightedNeeds] = useState<NeedDocument[]>([]);
-  const [relatedNextActions, setRelatedNextActions] = useState<NextActionDocument[]>([]);
+  const [relatedNextActions, setRelatedNextActions] = useState<
+    NextActionDocument[]
+  >([]);
   const [chainEnd, setChainEnd] = useState(0);
   const [actionState, setActionState] = useState(0);
 
-  useEffect(() => { /* Fetch Data */
+  useEffect(() => {
+    /* Fetch Data */
     async function fetchData() {
       const needsDocs = await database.getFromDb("needs");
-      const allNeeds = needsDocs.map(doc => doc.toJSON() as NeedDocument);
+      const allNeeds = needsDocs.map((doc) => doc.toJSON() as NeedDocument);
       const now = new Date();
 
-      const filteredNeeds = allNeeds.filter(need => {
+      const filteredNeeds = allNeeds.filter((need) => {
         const expiry = new Date(need.selectedExpiry);
         return expiry > now && need.priority && need.priority.order > 0;
       });
@@ -52,15 +55,13 @@ export default function NextActionsDisplay() {
       const nextActionsDocs = await database.getFromDb("next_actions");
 
       const allNextActions = nextActionsDocs.map(
-        doc => doc.toJSON() as NextActionDocument
+        (doc) => doc.toJSON() as NextActionDocument
       );
 
-      const highlightedNeedIds = new Set(filteredNeeds.map(
-        need => need.id
-      ));
+      const highlightedNeedIds = new Set(filteredNeeds.map((need) => need.id));
 
-      const filteredNextActions = allNextActions.filter(
-        action => highlightedNeedIds.has(action.need)
+      const filteredNextActions = allNextActions.filter((action) =>
+        highlightedNeedIds.has(action.need)
       );
 
       setRelatedNextActions(filteredNextActions);
@@ -73,20 +74,23 @@ export default function NextActionsDisplay() {
     if (highlightedNeeds.length === 0) return [];
 
     const needsWithPriority = highlightedNeeds.filter(
-      need => need.priority && need.priority.order
+      (need) => need.priority && need.priority.order
     );
 
-    const sortedNeeds = needsWithPriority.sort((a, b) =>
-      a.priority!.order - b.priority!.order
+    const sortedNeeds = needsWithPriority.sort(
+      (a, b) => a.priority!.order - b.priority!.order
     );
 
-    const groupsMap: Record<number, { 
-      priority: { 
-        order: number;
-        name: string;
-      };
-      needs: NeedDocument[]
-    }> = {};
+    const groupsMap: Record<
+      number,
+      {
+        priority: {
+          order: number;
+          name: string;
+        };
+        needs: NeedDocument[];
+      }
+    > = {};
 
     for (const need of sortedNeeds) {
       const order = need.priority!.order;
@@ -94,7 +98,7 @@ export default function NextActionsDisplay() {
       if (!groupsMap[order]) {
         groupsMap[order] = {
           priority: need.priority!,
-          needs: []
+          needs: [],
         };
       }
 
@@ -105,7 +109,7 @@ export default function NextActionsDisplay() {
   }, [highlightedNeeds]);
 
   const getActionsForNeed = (needId: string) => {
-    return relatedNextActions.filter(action => action.need === needId);
+    return relatedNextActions.filter((action) => action.need === needId);
   };
 
   const onToggleAction = async (action: NextActionDocument) => {
@@ -115,7 +119,7 @@ export default function NextActionsDisplay() {
     if (highlighted) {
       const updatedTimestamps = [...action.selectedTimestamps];
       updatedTimestamps.pop();
-      
+
       await database.updateDocument(
         collectionName,
         action.id,
@@ -132,10 +136,15 @@ export default function NextActionsDisplay() {
     } else {
       // Highlight action:
       // Add new selectedTimestamp
-      const updatedTimestamps = [...action.selectedTimestamps, new Date().toISOString()];
+      const updatedTimestamps = [
+        ...action.selectedTimestamps,
+        new Date().toISOString(),
+      ];
 
       // Find the parent need to copy its selectedExpiry
-      const parentNeed = highlightedNeeds.find((need) => need.id === action.need);
+      const parentNeed = highlightedNeeds.find(
+        (need) => need.id === action.need
+      );
       if (!parentNeed) {
         console.error("Parent need not found for action:", action);
         return;
@@ -156,7 +165,7 @@ export default function NextActionsDisplay() {
       );
     }
 
-    setChainEnd(prev => prev + 1);
+    setChainEnd((prev) => prev + 1);
   };
 
   const handleAddAction = async (newAction: string, need: NeedDocument) => {
@@ -168,48 +177,51 @@ export default function NextActionsDisplay() {
         selectedTimestamps: [],
         selectedExpiry: new Date().toISOString(),
         timestamp: new Date().toISOString(),
-      }
+      };
       try {
         await database.addToDb("next_actions", newActionDocument);
         console.log(`Action Created: ${newActionDocument.name}`);
       } catch (error) {
         console.error("Error creating Action:", error);
       }
-      
-      setActionState(prev => prev + 1);
+
+      setActionState((prev) => prev + 1);
     }
   };
- 
+
   return (
     <div className="w-11/12 m-auto">
-      { priorityGroups.length === 0 ?
-        (<p className="mb-5">
-          You have no unmet needs selected. Review which needs might be unmet before we can recommend next actions to meet them.
-        </p>) :
-        (priorityGroups.map((group, i) => (
+      {priorityGroups.length === 0 ? (
+        <p className="mb-5">
+          You have no unmet needs selected. Review which needs might be unmet
+          before we can recommend next actions to meet them.
+        </p>
+      ) : (
+        priorityGroups.map((group, i) => (
           <div key={i} className="mb-6">
             <h3
               className={clsx(
                 "text-xl font-bold mb-2",
-                {"text-twd-cube-red" : group.priority.order === 1 },
-                {"text-twd-cube-yellow" : group.priority.order === 2},
-                {"text-twd-cube-blue" : group.priority.order === 3},
-                {"text-twd-cube-green" : group.priority.order === 4}
+                { "text-twd-cube-red": group.priority.order === 1 },
+                { "text-twd-cube-yellow": group.priority.order === 2 },
+                { "text-twd-cube-blue": group.priority.order === 3 },
+                { "text-twd-cube-green": group.priority.order === 4 }
               )}
             >
               {changeCase(group.priority.name, "sentence")}
             </h3>
-            
+
             {group.needs.map((need) => {
               const actions = getActionsForNeed(need.id);
 
               return (
-                <div key={need.id} className="ml-4 mb-4">
-                  <h4 className="font-semibold">
-                    To meet a need for {changeCase(need.name, "lower")}, which actions can you take next?
+                <div key={need.id}>
+                  <h4 className="font-normal mb-4">
+                    To meet a need for {changeCase(need.name, "lower")}, which
+                    actions can you take next?
                   </h4>
 
-                  { actions.length > 0 ? (
+                  {actions.length > 0 ? (
                     <NextActionsSection
                       need={need}
                       actions={actions}
@@ -220,14 +232,13 @@ export default function NextActionsDisplay() {
                     <p className="text-sm text-gray-500 ml-6">
                       No next actions available for this need.
                     </p>
-                  )
-                  }
-                  </div>
+                  )}
+                </div>
               );
             })}
           </div>
-        )))
-      }
+        ))
+      )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/needs/next-actions/components/NextActionsSection.tsx b/src/app/needs/next-actions/components/NextActionsSection.tsx
index ad6d2958..8f7cacca 100644
--- a/src/app/needs/next-actions/components/NextActionsSection.tsx
+++ b/src/app/needs/next-actions/components/NextActionsSection.tsx
@@ -24,51 +24,58 @@ export default function NextActionsSection({
   const [newAction, setNewAction] = useState<string>("");
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setNewAction(e.target.value)
+    setNewAction(e.target.value);
   };
 
   const handleSubmitAction = async () => {
     await handleAddAction(newAction, need);
     setModalOpen(false);
-  }
+  };
 
-  return ( <>
-    <div className="ml-4 mb-6">
-      {actions.map((action) => {
-        const highlighted = new Date(action.selectedExpiry) > new Date();
+  return (
+    <>
+      <div className="mb-6 flex gap-5 flex-wrap">
+        {actions.map((action) => {
+          const highlighted = new Date(action.selectedExpiry) > new Date();
 
-        return (<Button key={action.id}
-          label={action.name}
-          className={ highlighted ? 
-            "bg-twd-primary-purple text-black" :
-            "bg-gray-600 text-white"
-          }
-          onClick={() => onToggleAction(action)}
-        />);
-      })}
+          return (
+            <Button
+              key={action.id}
+              label={action.name}
+              className={
+                highlighted
+                  ? "bg-twd-primary-purple text-black font-normal"
+                  : "bg-gray-600 text-white font-normal"
+              }
+              onClick={() => onToggleAction(action)}
+            />
+          );
+        })}
 
-      <button onClick={() => setModalOpen(true)}
-        className="flex justify-center items-center"
-        aria-label="Add Action"
-      >
-        <PlusCircleIcon className="w-7 m-auto" />
-      </button>
-    </div>
+        <button
+          onClick={() => setModalOpen(true)}
+          className="flex justify-center items-center"
+          aria-label="Add Action"
+        >
+          <PlusCircleIcon className="w-7 m-auto" />
+        </button>
+      </div>
 
-    <Modal title="Add a New Action"
-      inputModal={true}
-      modalOpen={modalOpen}
-      placeholder="What action might help meet this need?"
-      handleInputChange={handleInputChange}
-      forwardButton={{ label: "Add",
-        action: handleSubmitAction,
-      }}
-      backButton={{ label: "Cancel",
-        action: () => {
-          setNewAction("");
-          setModalOpen(false);
-        },
-      }}
-    />
-  </> );
-}
\ No newline at end of file
+      <Modal
+        title="Add a New Action"
+        inputModal={true}
+        modalOpen={modalOpen}
+        placeholder="What action might help meet this need?"
+        handleInputChange={handleInputChange}
+        forwardButton={{ label: "Add", action: handleSubmitAction }}
+        backButton={{
+          label: "Cancel",
+          action: () => {
+            setNewAction("");
+            setModalOpen(false);
+          },
+        }}
+      />
+    </>
+  );
+}