diff --git a/package-lock.json b/package-lock.json
index 9a12ff8..65e8eb2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,6 +39,7 @@
         "next": "13.4.3",
         "next-auth": "^4.22.1",
         "next-axiom": "^0.17.0",
+        "next-themes": "^0.3.0",
         "pg": "^8.11.1",
         "postcss": "8.4.23",
         "react": "18.2.0",
@@ -7334,6 +7335,16 @@
         "next": "^12.1.4 || ^13"
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz",
+      "integrity": "sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18",
+        "react-dom": "^16.8 || ^17 || ^18"
+      }
+    },
     "node_modules/next-tick": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
diff --git a/package.json b/package.json
index 2bb3ce7..1e0a2c7 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "next": "13.4.3",
     "next-auth": "^4.22.1",
     "next-axiom": "^0.17.0",
+    "next-themes": "^0.3.0",
     "pg": "^8.11.1",
     "postcss": "8.4.23",
     "react": "18.2.0",
diff --git a/public/house-icon-3.svg b/public/house-icon.svg
similarity index 98%
rename from public/house-icon-3.svg
rename to public/house-icon.svg
index 3237aeb..a097d91 100644
--- a/public/house-icon-3.svg
+++ b/public/house-icon.svg
@@ -1,36 +1,36 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 viewBox="0 0 511.999 511.999" xml:space="preserve">
-<path style="fill:#DBE9FD;" d="M416.044,189.217H95.957l-40.304,40.304v22.261v232.391c0,9.223,7.473,16.696,16.696,16.696h367.304
-	c9.223,0,16.696-7.473,16.696-16.696V229.522L416.044,189.217z"/>
-<path style="fill:#C5DCFD;" d="M416.044,189.217H256v311.652h183.652c9.223,0,16.696-7.473,16.696-16.696V229.522L416.044,189.217z"
-	/>
-<polygon style="fill:#B1C6E4;" points="89.044,467.478 89.044,243.353 89.044,222.609 422.957,222.609 422.957,243.353 
-	422.957,467.478 "/>
-<polygon style="fill:#9DB0CA;" points="256,467.478 422.957,467.478 422.957,243.353 422.957,222.609 256,222.609 "/>
-<path style="fill:#d3b488;" d="M456.348,211.478L356.174,111.304V94.609c0-9.22,7.475-16.696,16.696-16.696h66.783
-	c9.22,0,16.696,7.475,16.696,16.696V211.478z"/>
-<polygon style="fill:#DBE9FD;" points="427.174,200.348 256,29.174 84.826,200.348 "/>
-<polygon style="fill:#C5DCFD;" points="427.174,200.348 256,29.174 256,200.348 "/>
-<path style="fill:#3943b7;" d="M495.305,283.826c-4.272,0-8.544-1.631-11.804-4.892L256,51.435L28.5,278.934
-	c-6.521,6.521-17.087,6.521-23.609,0c-6.521-6.516-6.521-17.092,0-23.609L244.195,16.021c6.521-6.521,17.087-6.521,23.609,0
-	l239.304,239.304c6.521,6.516,6.521,17.092,0,23.609C503.848,282.195,499.576,283.826,495.305,283.826z"/>
-<g>
-	<path style="fill:#14163d;" d="M267.804,16.022c-3.26-3.261-7.532-4.892-11.804-4.892v40.304l227.501,227.501
-		c3.261,3.261,7.533,4.892,11.804,4.892s8.544-1.631,11.804-4.892c6.521-6.516,6.521-17.092,0-23.609L267.804,16.022z"/>
-	<rect x="289.392" y="222.609" style="fill:#14163d;" width="33.391" height="111.304"/>
-	<rect x="356.174" y="222.609" style="fill:#14163d;" width="33.391" height="111.304"/>
-	<rect x="289.392" y="267.13" style="fill:#14163d;" width="100.174" height="33.391"/>
-</g>
-<rect x="155.826" y="222.609" style="fill:#ECEFF0;" width="33.391" height="111.304"/>
-<g>
-	<rect x="122.435" y="367.304" style="fill:#3943b7;" width="33.391" height="100.174"/>
-	<rect x="189.218" y="367.304" style="fill:#3943b7;" width="33.391" height="100.174"/>
-	<rect x="122.435" y="400.696" style="fill:#3943b7;" width="100.174" height="33.391"/>
-</g>
-<rect x="256" y="367.304" style="fill:#DADFE4;" width="33.391" height="100.174"/>
-<path style="fill:#3e4073;" d="M356.174,467.478h-66.783v-66.783h50.087c9.22,0,16.696,7.475,16.696,16.696V467.478z"/>
-<rect x="55.652" y="333.913" style="fill:#DBE9FD;" width="400.696" height="33.391"/>
-<rect x="256" y="333.913" style="fill:#C5DCFD;" width="200.348" height="33.391"/>
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 511.999 511.999" xml:space="preserve">
+<path style="fill:#DBE9FD;" d="M416.044,189.217H95.957l-40.304,40.304v22.261v232.391c0,9.223,7.473,16.696,16.696,16.696h367.304
+	c9.223,0,16.696-7.473,16.696-16.696V229.522L416.044,189.217z"/>
+<path style="fill:#C5DCFD;" d="M416.044,189.217H256v311.652h183.652c9.223,0,16.696-7.473,16.696-16.696V229.522L416.044,189.217z"
+	/>
+<polygon style="fill:#B1C6E4;" points="89.044,467.478 89.044,243.353 89.044,222.609 422.957,222.609 422.957,243.353 
+	422.957,467.478 "/>
+<polygon style="fill:#9DB0CA;" points="256,467.478 422.957,467.478 422.957,243.353 422.957,222.609 256,222.609 "/>
+<path style="fill:#d3b488;" d="M456.348,211.478L356.174,111.304V94.609c0-9.22,7.475-16.696,16.696-16.696h66.783
+	c9.22,0,16.696,7.475,16.696,16.696V211.478z"/>
+<polygon style="fill:#DBE9FD;" points="427.174,200.348 256,29.174 84.826,200.348 "/>
+<polygon style="fill:#C5DCFD;" points="427.174,200.348 256,29.174 256,200.348 "/>
+<path style="fill:#3943b7;" d="M495.305,283.826c-4.272,0-8.544-1.631-11.804-4.892L256,51.435L28.5,278.934
+	c-6.521,6.521-17.087,6.521-23.609,0c-6.521-6.516-6.521-17.092,0-23.609L244.195,16.021c6.521-6.521,17.087-6.521,23.609,0
+	l239.304,239.304c6.521,6.516,6.521,17.092,0,23.609C503.848,282.195,499.576,283.826,495.305,283.826z"/>
+<g>
+	<path style="fill:#14163d;" d="M267.804,16.022c-3.26-3.261-7.532-4.892-11.804-4.892v40.304l227.501,227.501
+		c3.261,3.261,7.533,4.892,11.804,4.892s8.544-1.631,11.804-4.892c6.521-6.516,6.521-17.092,0-23.609L267.804,16.022z"/>
+	<rect x="289.392" y="222.609" style="fill:#14163d;" width="33.391" height="111.304"/>
+	<rect x="356.174" y="222.609" style="fill:#14163d;" width="33.391" height="111.304"/>
+	<rect x="289.392" y="267.13" style="fill:#14163d;" width="100.174" height="33.391"/>
+</g>
+<rect x="155.826" y="222.609" style="fill:#ECEFF0;" width="33.391" height="111.304"/>
+<g>
+	<rect x="122.435" y="367.304" style="fill:#3943b7;" width="33.391" height="100.174"/>
+	<rect x="189.218" y="367.304" style="fill:#3943b7;" width="33.391" height="100.174"/>
+	<rect x="122.435" y="400.696" style="fill:#3943b7;" width="100.174" height="33.391"/>
+</g>
+<rect x="256" y="367.304" style="fill:#DADFE4;" width="33.391" height="100.174"/>
+<path style="fill:#3e4073;" d="M356.174,467.478h-66.783v-66.783h50.087c9.22,0,16.696,7.475,16.696,16.696V467.478z"/>
+<rect x="55.652" y="333.913" style="fill:#DBE9FD;" width="400.696" height="33.391"/>
+<rect x="256" y="333.913" style="fill:#C5DCFD;" width="200.348" height="33.391"/>
 </svg>
\ No newline at end of file
diff --git a/src/app/components/home/CardTiles.tsx b/src/app/components/home/CardTiles.tsx
index ab26355..467045e 100644
--- a/src/app/components/home/CardTiles.tsx
+++ b/src/app/components/home/CardTiles.tsx
@@ -22,7 +22,7 @@ export default function CardTiles({
               key={portfolio.id.toString()}
               id={portfolio.id}
               title={portfolio.name}
-              image={`house-icon-${image_idx}.svg`}
+              image={`house-icon.svg`}
               budget={portfolio.budget}
               status={portfolio.status}
               
diff --git a/src/app/components/portfolio/Toolbar.tsx b/src/app/components/portfolio/Toolbar.tsx
index 42f863e..9dd8a3c 100644
--- a/src/app/components/portfolio/Toolbar.tsx
+++ b/src/app/components/portfolio/Toolbar.tsx
@@ -22,7 +22,7 @@ interface ToolbarProps {
 }
 
 const navigationMenuTriggerStyle = cva(
-  "bg-gray-50 cursor-pointer group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-gray-200 hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-gray-200"
+  "bg-gray-50 cursor-pointer group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-gray-200 hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-gray-200 "
 );
 
 export function Toolbar({ portfolioId }: ToolbarProps) {
diff --git a/src/app/shadcn_components/ui/navigation-menu.tsx b/src/app/shadcn_components/ui/navigation-menu.tsx
index 0cb661b..e503467 100644
--- a/src/app/shadcn_components/ui/navigation-menu.tsx
+++ b/src/app/shadcn_components/ui/navigation-menu.tsx
@@ -12,7 +12,7 @@ const NavigationMenu = React.forwardRef<
   <NavigationMenuPrimitive.Root
     ref={ref}
     className={cn(
-      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      "relative z-10 flex max-w-max flex-1 items-center justify-center ",
       className
     )}
     {...props}
@@ -60,7 +60,7 @@ const NavigationMenuTrigger = React.forwardRef<
   >
     {children}{" "}
     <ChevronDown
-      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180 "
       aria-hidden="true"
     />
   </NavigationMenuPrimitive.Trigger>
@@ -74,7 +74,7 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
       className
     )}
     {...props}
@@ -91,7 +91,7 @@ const NavigationMenuViewport = React.forwardRef<
   <div className={cn("absolute left-0 top-full flex justify-center")}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)] ",
         className
       )}
       ref={ref}
@@ -109,7 +109,7 @@ const NavigationMenuIndicator = React.forwardRef<
   <NavigationMenuPrimitive.Indicator
     ref={ref}
     className={cn(
-      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in ",
       className
     )}
     {...props}