diff --git a/src/app/components/home/NewPortfolioModal.tsx b/src/app/components/home/NewPortfolioModal.tsx
index 9869ae3..0e560d3 100644
--- a/src/app/components/home/NewPortfolioModal.tsx
+++ b/src/app/components/home/NewPortfolioModal.tsx
@@ -17,15 +17,20 @@ interface IconProps {
   className?: string;
 }
 
-const Icon: React.FC<IconProps> = ({
-  name,
-  selected,
-  onSelect,
-  className,
-}: IconProps) => (
-  <div onClick={() => onSelect(name)} style={selected ? { color: "red" } : {}}>
-    {name}
-  </div>
+const selectedIconClasses = "bg-brandblue text-white w-1/5 rounded-md";
+const deSelectedIconClases = "bg-gray-200 w-1/5 rounded-md";
+
+const Icon: React.FC<IconProps> = ({ name, selected, onSelect }: IconProps) => (
+  <>
+    <div
+      onClick={() => onSelect(name)}
+      className={selected ? selectedIconClasses : deSelectedIconClases}
+    >
+      <div>Icon</div>
+      {name}
+    </div>
+    <></>
+  </>
 );
 
 const hiddenInputArrows =
@@ -91,9 +96,10 @@ export default function NewPortfolioModal({
                     <div className="flex flex-col">
                       <label
                         htmlFor="portfolio-name"
-                        className="text-sm font-semibold text-gray-600 mb-1"
+                        className="text-sm font-semibold text-gray-600 mb-1 relative"
                       >
                         Portfolio Name:
+                        <span className="text-red-500">*</span>
                       </label>
                       <input
                         id="portfolio-name"
@@ -102,7 +108,7 @@ export default function NewPortfolioModal({
                         required
                         value={portfolioName}
                         onChange={(e) => setPortfolioName(e.target.value)}
-                        className="p-2 border border-gray-200 rounded-md focus:outline-none"
+                        className="p-2 border border-gray-200 rounded-md focus:outline-none bg-gray-100"
                       />
                     </div>
                     <div className="flex flex-col">
@@ -110,10 +116,12 @@ export default function NewPortfolioModal({
                         htmlFor="budget"
                         className="text-sm font-semibold text-gray-600 mb-1"
                       >
-                        Budget (£):
+                        Budget (£){" "}
+                        <span className="text-gray-400 text-xs">optional</span>{" "}
+                        :
                       </label>
-                      <div className="flex items-center border border-gray-200 rounded-md">
-                        <span className="px-2 text-sm text-gray-500">£</span>
+                      <div className="flex items-center border border-gray-200 rounded-md text-gray-900 bg-brandblue">
+                        <span className="px-2 text-sm text-white">£</span>
                         <input
                           id="budget"
                           type="number"
@@ -125,7 +133,7 @@ export default function NewPortfolioModal({
                             e.preventDefault()
                           }
                           className={[
-                            "flex-1 p-2 bg-transparent focus:outline-none",
+                            "flex-1 p-2 bg-gray-100 focus:outline-none",
                             hiddenInputArrows,
                           ].join(" ")}
                         />
@@ -142,11 +150,6 @@ export default function NewPortfolioModal({
                             name={outcome}
                             selected={selectedOutcome === outcome}
                             onSelect={setSelectedOutcome}
-                            className={
-                              selectedOutcome === outcome
-                                ? "bg-red-500 text-white p-2 rounded"
-                                : "p-2 rounded border border-gray-200"
-                            }
                           />
                         ))}
                       </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 9ccc2d7..ae847ee 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -30,5 +30,10 @@ module.exports = {
       },
     },
   },
+  variants: {
+    extend: {
+      visibility: ["group-hover"],
+    },
+  },
   plugins: [],
 };