diff --git a/src/app/portfolio/[slug]/(portfolio)/settings/page.tsx b/src/app/portfolio/[slug]/(portfolio)/settings/page.tsx
index 952ff3b..9d7e6bc 100644
--- a/src/app/portfolio/[slug]/(portfolio)/settings/page.tsx
+++ b/src/app/portfolio/[slug]/(portfolio)/settings/page.tsx
@@ -1,14 +1,27 @@
-export default async function PortfolioSettings({
+import { getPortfolioSettings } from "../../utils";
+import PortfolioSettings from "./PortfolioSettings";
+
+export default async function PortfolioSettingsPage({
   params,
 }: {
   params: { slug: string };
 }) {
-  console.log("in the server!");
-  console.log(params);
   const portfolioId = params.slug;
+  // fetch data securely on the server
+  // Stef's page!!!!
+  // 1) Rename
+  // 2) Delete - much harder
+
+  // fetch data in the server - name, budget, goal,
+  // pass it to a client component to render and take user input
+
+  const portfolioSettingsData = await getPortfolioSettings(portfolioId);
+
   return (
     <>
-      <div>Hello World This is my settings page!!</div>
+      <div className="flex justify-center max-w-8xl w-8xl">
+        <PortfolioSettings portfolioSettingsData={portfolioSettingsData} />
+      </div>
     </>
   );
 }
diff --git a/src/app/portfolio/[slug]/utils.ts b/src/app/portfolio/[slug]/utils.ts
index c50bcd2..3cc8dd5 100644
--- a/src/app/portfolio/[slug]/utils.ts
+++ b/src/app/portfolio/[slug]/utils.ts
@@ -1,3 +1,7 @@
+import type {
+  PortfolioStatus,
+  PortfolioGoal,
+} from "./../../db/schema/portfolio";
 import { formatNumber } from "@/app/utils";
 import { and, eq, inArray } from "drizzle-orm";
 import { db } from "@/app/db/db";
@@ -15,6 +19,38 @@ import {
   ScenarioSelect,
 } from "@/app/db/schema/recommendations";
 
+export interface PortfolioSettingsType {
+  name: string;
+  budget: number | null;
+  goal: (typeof PortfolioGoal)[number];
+  status: (typeof PortfolioStatus)[number];
+}
+
+export async function getPortfolioSettings(
+  portfolioId: string
+): Promise<PortfolioSettingsType> {
+  //name, budget, goal, status
+  const data = await db
+    .select({
+      name: portfolio.name,
+      budget: portfolio.budget,
+      goal: portfolio.goal,
+      status: portfolio.status,
+    })
+    .from(portfolio)
+    .where(eq(portfolio.id, BigInt(portfolioId)));
+
+  if (data.length === 0) {
+    throw new Error("Portfolio not found");
+  }
+
+  if (data.length > 1) {
+    throw new Error("More than one portfolio found");
+  }
+
+  return data[0];
+}
+
 export async function getPortfolio(portfolioId: string): Promise<Portfolio> {
   const data = await db
     .select()