diff --git a/src/app/components/Navbar.tsx b/src/app/components/Navbar.tsx
index 1f3403f..6652044 100644
--- a/src/app/components/Navbar.tsx
+++ b/src/app/components/Navbar.tsx
@@ -20,7 +20,7 @@ function Nav({ pageName }: { pageName: string }) {
   const [isOpen, setIsOpen] = useState(false);
   return (
     <div>
-      <nav className="bg-gray-800">
+      <nav className="bg-brandblue">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex items-center justify-between h-16">
             <div className="flex items-center">
diff --git a/src/app/components/home/Card.tsx b/src/app/components/home/Card.tsx
index 9e3672b..a6b948f 100644
--- a/src/app/components/home/Card.tsx
+++ b/src/app/components/home/Card.tsx
@@ -1,13 +1,9 @@
 import Link from "next/link";
 import React from "react";
-// import { AiFillHeart } from "react-icons/ai";
-// import { BsChatSquareFill } from "react-icons/bs";
-
-// import styles from "./Card.module.css";
 
 const styles = {
   wrapper:
-    "bg-white hover:bg-gray-800 shadow-xl hover:shadow-none cursor-pointer w-60 rounded-3xl flex flex-col items-center justify-center",
+    "bg-white hover:bg-brandblue shadow-xl hover:shadow-none cursor-pointer w-60 rounded-3xl flex flex-col items-center justify-center",
   header: "relative mt-2 mx-2",
   imageWrapper: "h-56 rounded-2xl overflow-hidden",
   wrapperAnime: "transition-all duration-500 ease-in-out",
diff --git a/src/app/components/home/CardTiles.tsx b/src/app/components/home/CardTiles.tsx
index 7724497..74c7109 100644
--- a/src/app/components/home/CardTiles.tsx
+++ b/src/app/components/home/CardTiles.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import Card from "./Card";
+import AddNewCard from "./AddNewCard";
 
 type PortfoliosType = Array<{
   id: string;
@@ -17,6 +18,8 @@ export default function CardTiles({
     <div className="flex justify-center">
       <div className="grid grid-cols-1 gap-4 max-w-7xl sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
         {Portfolios.map((portfolio, index) => {
+          if (index === 0) return <AddNewCard key={portfolio.id} />;
+
           const image_idx = index % 3;
           return (
             <Card
diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index a17142f..25b436b 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -1,16 +1,7 @@
-import { getServerSession } from "next-auth";
-import { AuthOptions } from "../api/auth/[...nextauth]/route";
-import { redirect } from "next/navigation";
 import Nav from "../components/Navbar";
 import CardTiles from "../components/home/CardTiles";
 
 const Home = async () => {
-  // const session = await getServerSession(AuthOptions);
-
-  // if (!session) {
-  //   redirect("/?callbackUrl=/home");
-  // }
-
   const Portfolios = [
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0851",
diff --git a/tailwind.config.js b/tailwind.config.js
index 7980350..323d7d1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,6 +12,10 @@ module.exports = {
         "gradient-conic":
           "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
+      colors: {
+        brandblue: "#14163d",
+        hoverblue: "#3e4073",
+      },
     },
   },
   plugins: [],