diff --git a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx
index de28e58..c8be486 100644
--- a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx
+++ b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx
@@ -6,27 +6,47 @@ import { Button } from "@/app/shadcn_components/ui/button";
 import { Input } from "@/app/shadcn_components/ui/input";
 import { useRouter } from "next/navigation";
 import { handleNumericKeyDown } from "@/app/utils";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/app/shadcn_components/ui/select"
-import { PortfolioStatus } from "@/app/db/schema/portfolio";
-import { PortfolioGoal } from "@/app/db/schema/portfolio";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/app/shadcn_components/ui/select";
+import { PortfolioStatus as PortfolioStatusOptions } from "@/app/db/schema/portfolio";
+import { PortfolioGoal as PortfolioGoalOptions } from "@/app/db/schema/portfolio";
+
+export function SettingsDropdown({
+  startingValue,
+  options,
+  setOption,
+}: {
+  startingValue: string;
+  options: string[];
+  setOption: (option: string) => void;
+}) {
+  function handleValueChange(newValue: string) {
+    setOption(newValue);
+  }
 
-export function SettingsDropdown({startingValue}:{startingValue:string;}) {
   return (
-    <Select>
+    <Select onValueChange={(newValue) => handleValueChange(newValue)}>
       <SelectTrigger className="w-[180px]">
         <SelectValue placeholder={startingValue} />
       </SelectTrigger>
       <SelectContent>
         <SelectGroup>
-          <SelectItem value="apple">Apple</SelectItem>
-          <SelectItem value="banana">Banana</SelectItem>
-          <SelectItem value="blueberry">Blueberry</SelectItem>
-          <SelectItem value="grapes">Grapes</SelectItem>
-          <SelectItem value="pineapple">Pineapple</SelectItem>
+          {options.map((option, idx) => (
+            <SelectItem value={option} key={idx}>
+              {option}
+            </SelectItem>
+          ))}
         </SelectGroup>
       </SelectContent>
     </Select>
-  )
+  );
 }
 
 export default function PortfolioSettings({
@@ -39,20 +59,14 @@ export default function PortfolioSettings({
   // Running in the client
   const router = useRouter();
 
-  //Renaming functionality
-
+  // Set up state
+  // Syntax const [variable, function whos only job is to update the value of variable] = useState(initial value)
   const [portfolioName, setPortfolioName] = useState(
     portfolioSettingsData.name
   );
-
-  const [portfolioBudget, setPortfolioBudget] = useState<number|string|null>(
-    portfolioSettingsData.budget
-  );
-
   const [portfolioGoal, setPortfolioGoal] = useState(
     portfolioSettingsData.goal
   );
-
   const [portfolioStatus, setPortfolioStatus] = useState(
     portfolioSettingsData.status
   );
@@ -69,16 +83,20 @@ export default function PortfolioSettings({
   }
 
   // Last thing we'd need to do is make that update in the db
-  
+
+  //Change budget functionality
+  const [portfolioBudget, setPortfolioBudget] = useState<
+    number | string | null
+  >(portfolioSettingsData.budget);
 
   function handleBudgetUpdate() {
     // API call to change the budget
     // apiFunction(portfolioBudget)
     // Update portfolio function with budget is equal to portfolioBudget
-    console.log(portfolioBudget)
+    console.log(portfolioBudget);
     router.refresh();
   }
-  
+
   function handlePortfolioBudgetUpdate(e: React.ChangeEvent<HTMLInputElement>) {
     setPortfolioBudget(Number(e.target.value));
   }
@@ -86,62 +104,76 @@ export default function PortfolioSettings({
   return (
     <>
       <div className="p-4 mt-5 flex justify-center max-w-8xl w-8xl pt-5 bg-gray-50 rounded-lg text-brandblue">
-        <ul className="grid grid-cols-[max-content_1fr_min-content] gap-x-[5px] gap-y-4">
+        <div className="grid grid-cols-[max-content_1fr_min-content] gap-x-[5px] gap-y-4">
           {/* Row 1: Name */}
-          <li className="flex items-center">
+          <div className="flex items-center">
             <span>Name:</span>
-          </li>
-          <li className="flex items-center">
+          </div>
+          <div className="flex items-center">
             <Input value={portfolioName} onChange={handlePortfolioNameChange} />
-          </li>
-          <li className="flex items-center">
-            <Button className="w-full" onClick={handleRename}>Rename</Button>
-          </li>
-  
+          </div>
+          <div className="flex items-center">
+            <Button className="w-full" onClick={handleRename}>
+              Rename
+            </Button>
+          </div>
+
           {/* Row 2: Budget */}
-          <li className="flex items-center">
+          <div className="flex items-center">
             <span>Budget:</span>
-          </li>
-          <li className="flex items-center max-w-8xl">
+          </div>
+          <div className="flex items-center max-w-8xl">
             <Input
               type="number"
               value={portfolioBudget ?? undefined}
               onChange={handlePortfolioBudgetUpdate}
               onKeyDown={(e) => handleNumericKeyDown(e)}
             />
-          </li>
-          <li className="flex items-center">
-            <Button className="w-full" onClick={handleBudgetUpdate}>Update</Button>
-          </li>
-  
+          </div>
+          <div className="flex items-center">
+            <Button className="w-full" onClick={handleBudgetUpdate}>
+              Update
+            </Button>
+          </div>
+
           {/* Row 3: Goal */}
-          <li className="flex items-center">
+          <div className="flex items-center">
             <span>Goal:</span>
-          </li>
-          <li className="flex items-center">
-            {portfolioSettingsData.goal}
-          </li>
-          <li className="flex items-center">
-            <SettingsDropdown startingValue={portfolioGoal}/>
-          </li>
-  
+          </div>
+
+          <div className="flex items-center">
+            <SettingsDropdown
+              startingValue={portfolioGoal}
+              options={PortfolioGoalOptions}
+              setOption={setPortfolioGoal}
+            />
+          </div>
+          <Button className="w-full">Update</Button>
+
           {/* Row 4: Status */}
-          <li className="flex items-center">
+          <div className="flex items-center">
             <span>Status:</span>
-          </li>
-          <li className="flex items-center">
-            {portfolioSettingsData.status}
-          </li>
-          <li className="flex items-center">
-            <SettingsDropdown startingValue={portfolioStatus}/>
-          </li>
+          </div>
+          <div className="flex items-center">
+            <SettingsDropdown
+              startingValue={portfolioStatus}
+              options={PortfolioStatusOptions}
+              setOption={setPortfolioStatus}
+            />
+          </div>
+          <Button className="w-full">Update</Button>
+
+          <div className="col-span-3"> Portfolio Name: {portfolioName}</div>
+          <div className="col-span-3"> Portfolio Budget: {portfolioBudget}</div>
+          <div className="col-span-3"> Goal value: {portfolioGoal}</div>
+          <div> Status value: {portfolioStatus}</div>
 
           {/* Row 5: Delete */}
-          <li className="col-span-2"></li>
-          <li className="flex items-center">
+          <div className="col-span-2"></div>
+          <div className="flex items-center">
             {/* <Button className="max-width: 100% bg-red-700" onClick={DeletePortfolio}>Delete Portfolio</Button> */}
-          </li>
-        </ul>
+          </div>
+        </div>
       </div>
     </>
   );