diff --git a/src/components/charts/GithubContributionChart.js b/src/components/charts/GithubContributionChart.js
index 11b1af4..d6ebf70 100644
--- a/src/components/charts/GithubContributionChart.js
+++ b/src/components/charts/GithubContributionChart.js
@@ -50,7 +50,7 @@ const GithubContributionChart = ({ username }) => {
     const calendar = generateCalendar();
 
     return (
-        <div className="mx-auto py-2 px-4 max-w-[900px] bg-gray-900 rounded-lg">
+        <div className="mx-auto py-2 px-4 max-w-[900px] bg-gray-800 rounded-lg">
             {(isLoading || isFetching) && <p>Loading contribution data... ({totalCommits} commits fetched)</p>}
             {!isLoading && !isFetching && 
             <div className="flex justify-between items-center pr-1">
@@ -68,7 +68,7 @@ const GithubContributionChart = ({ username }) => {
                     ></div>
                 ))}
             </div>
-            <div className="mt-2 text-sm text-gray-500 flex items-center">
+            <div className="mt-2 text-sm text-gray-400 flex items-center">
                 <span className="mr-2">Less</span>
                 <div className="flex gap-1">
                     <div className="w-3 h-3 bg-gray-100 rounded-sm"></div>
diff --git a/src/components/profile/UserProfile.js b/src/components/profile/UserProfile.js
index b08d07d..e66f1f6 100644
--- a/src/components/profile/UserProfile.js
+++ b/src/components/profile/UserProfile.js
@@ -50,7 +50,7 @@ const UserProfile = () => {
 
     const header = (
         <div className="flex flex-wrap align-items-center justify-content-between gap-2">
-            <span className="text-xl text-900 font-bold text-[#f8f8ff]">Purchases</span>
+            <span className="text-xl text-900 font-bold text-[#f8f8ff]">Progress</span>
         </div>
     );
 
@@ -92,7 +92,7 @@ const UserProfile = () => {
                     <div className='w-full h-full flex items-center justify-center'><ProgressSpinner /></div>
                 ) : (
                     <DataTable
-                        emptyMessage="No purchases"
+                        emptyMessage="No Courses or Milestones completed"
                         value={session.user?.purchased}
                         header={header}
                         style={{ maxWidth: windowWidth < 768 ? "100%" : "90%", margin: "0 auto", borderRadius: "10px" }}
diff --git a/src/components/profile/UserSettings.js b/src/components/profile/UserSettings.js
index 117d01b..bc04d4e 100644
--- a/src/components/profile/UserSettings.js
+++ b/src/components/profile/UserSettings.js
@@ -8,6 +8,8 @@ import { ProgressSpinner } from "primereact/progressspinner";
 import { useNDKContext } from "@/context/NDKContext";
 import useWindowWidth from "@/hooks/useWindowWidth";
 import Image from "next/image";
+import PurchasedListItem from "@/components/profile/PurchasedListItem";
+import { formatDateTime } from "@/utils/time";
 import BitcoinConnectButton from "@/components/bitcoinConnect/BitcoinConnect";
 import { Panel } from "primereact/panel";
 import { nip19 } from "nostr-tools";
@@ -136,13 +138,23 @@ const UserSettings = () => {
 
     const PanelHeader = (options) => {
         return (
-            <div className="w-full flex flex-row justify-between p-4 bg-gray-800 rounded-t-lg">
-                <p className="text-[#f8f8ff] text-xl font-bold">Relays</p>
-                <GenericButton onClick={options.onTogglerClick} icon="pi pi-plus" className="p-button-rounded p-button-success p-button-text" />
+            <div className="flex flex-row justify-between px-4 py-[6px] bg-gray-800 rounded-t-lg border-b border-gray-700">
+                <p className="text-[#f8f8ff] text-900 text-xl mt-2 h-fit font-bold">Relays</p>
+                <GenericButton 
+                    onClick={options.onTogglerClick} 
+                    icon={options.collapsed ? "pi pi-plus" : "pi pi-minus"} 
+                    className="p-button-rounded p-button-success p-button-text" 
+                />
             </div>
         );
     };
 
+    const header = (
+        <div className="flex flex-wrap align-items-center justify-content-between gap-2">
+            <span className="text-xl text-900 font-bold text-[#f8f8ff]">Purchases</span>
+        </div>
+    );
+
     return (
         user && (
             <div className="p-4">
@@ -169,7 +181,7 @@ const UserSettings = () => {
                     <Tooltip target=".pubkey-tooltip" content={"this is your nostr npub"} />
                     {nip19.npubEncode(user.pubkey)} <i className="pi pi-question-circle text-xl pubkey-tooltip" />
                     </h2>
-                    <div className="flex flex-col w-1/2 mx-auto my-8 mb-12 justify-between items-center">
+                    <div className="flex flex-col w-1/2 mx-auto justify-between items-center">
                         <h2 className="text-xl my-2 max-mob:text-base max-tab:text-base">Connect Your Lightning Wallet</h2>
                         <BitcoinConnectButton />
                     </div>
@@ -180,7 +192,8 @@ const UserSettings = () => {
                 {!session || !session?.user || !ndk ? (
                     <div className='w-full h-full flex items-center justify-center'><ProgressSpinner /></div>
                 ) : (
-                    <>
+                    <div className="flex justify-between" style={{ flexDirection: windowWidth < 768 ? "column" : "row", gap: "1rem" }}>
+                        <div className="flex flex-col" style={{ width: windowWidth < 768 ? "100%" : "49%" }}>
                         <Panel
                             headerTemplate={PanelHeader}
                             toggleable
@@ -215,9 +228,35 @@ const UserSettings = () => {
                         >
                             <Column field={(url) => url} header="Relay URL"></Column>
                             <Column body={relayStatusBody} header="Status"></Column>
-                            <Column body={relayActionsBody} header="Actions"></Column>
-                        </DataTable>
-                    </>
+                                <Column body={relayActionsBody} header="Actions"></Column>
+                            </DataTable>
+                        </div>
+                    <DataTable
+                        emptyMessage="No purchases"
+                        value={session.user?.purchased}
+                        header={header}
+                        style={{ width: windowWidth < 768 ? "100%" : "49%", borderRadius: "10px" }}
+                        pt={{
+                            wrapper: {
+                                className: "rounded-lg rounded-t-none"
+                            },
+                            header: {
+                                className: "rounded-t-lg"
+                            }
+                        }}
+                    >
+                        <Column field="amountPaid" header="Cost"></Column>
+                        <Column
+                            body={(rowData) => {
+                                console.log("rowData", rowData);
+                                return <PurchasedListItem eventId={rowData?.resource?.noteId || rowData?.course?.noteId} category={rowData?.course ? "courses" : "resources"} />
+                            }}
+                            header="Name"
+                        ></Column>
+                        <Column body={session.user?.purchased?.some((item) => item.courseId) ? "course" : "resource"} header="Category"></Column>
+                        <Column body={rowData => formatDateTime(rowData?.createdAt)} header="Date"></Column>
+                    </DataTable>
+                    </div>
                 )}
             </div>
         )
diff --git a/src/components/profile/progress/UserProgress.js b/src/components/profile/progress/UserProgress.js
index 9b7bf84..4182e90 100644
--- a/src/components/profile/progress/UserProgress.js
+++ b/src/components/profile/progress/UserProgress.js
@@ -44,7 +44,7 @@ const UserProgress = () => {
     ];
 
     return (
-        <div className="bg-gray-900 rounded-3xl p-6 w-[500px] mx-auto my-8">
+        <div className="bg-gray-800 rounded-3xl p-6 w-[500px] mx-auto my-8">
             <h1 className="text-3xl font-bold text-white mb-2">Your Dev Journey</h1>
             <p className="text-gray-400 mb-4">Track your progress from Pleb to Plebdev</p>
 
@@ -78,7 +78,7 @@ const UserProgress = () => {
                                         headerIcon: { className: 'hidden' },
                                     }}
                                     header={
-                                        <div className="bg-gray-900 flex items-center justify-between w-full font-normal">
+                                        <div className="bg-gray-800 flex items-center justify-between w-full font-normal">
                                             <div className="flex items-center">
                                                 <div className="w-6 h-6 bg-gray-700 rounded-full flex items-center justify-center mr-3">
                                                     <span className="text-white text-sm">{index + 1}</span>