diff --git a/src/app/components/home/AddNewCard.tsx b/src/app/components/home/AddNewCard.tsx
index 0ff664bb..6eb76ba3 100644
--- a/src/app/components/home/AddNewCard.tsx
+++ b/src/app/components/home/AddNewCard.tsx
@@ -4,13 +4,13 @@ import NewPortfolioModal from "./NewPortfolioModal";
 
 const styles = {
   wrapper:
-    "group bg-brandblue hover:bg-hoverblue shadow-xl hover:shadow-none cursor-pointer aspect-square rounded-3xl flex flex-col items-center justify-center",
-  header: "relative mt-2 mx-2",
+    "group bg-brandblue hover:bg-hoverblue shadow-xl hover:shadow-none cursor-pointer rounded-3xl flex flex-col items-center justify-center aspect-square",
+  header: "relative mt-2 mx-2 w-full",
   imageWrapper:
-    "h-56 rounded-2xl overflow-hidden flex justify-center items-center",
+    "relative rounded-2xl overflow-hidden flex justify-center items-center",
   wrapperAnime: "transition-all duration-500 ease-in-out",
   image: "object-cover w-8/12 h-8/12 mx-auto fill-white",
-  textWrapper: "w-full flex justify-center items-center",
+  textWrapper: "w-full flex justify-center items-center pt-6",
   text: "pb-6 font-medium leading-none text-base tracking-wider text-gray-400",
 };
 
@@ -24,22 +24,24 @@ const AddNewCard = () => {
 
   return (
     <a onClick={openModal}>
-      <div className={[styles.wrapper, styles.wrapperAnime].join(" ")}>
-        <div className={styles.header}>
-          <div className={styles.imageWrapper}>
-            <div className="w-1/4">
-              <PlusIcon color="white" />
-              <NewPortfolioModal
-                isOpen={isModalOpen}
-                setIsOpen={setModalIsOpen}
-              />
+      <div  className="flex justify-center">
+        <div className={[styles.wrapper, styles.wrapperAnime].join(" ")}>
+          <div className={styles.header}>
+            <div className={styles.imageWrapper}>
+              <div className="w-1/4">
+                <PlusIcon color="white" />
+                <NewPortfolioModal
+                  isOpen={isModalOpen}
+                  setIsOpen={setModalIsOpen}
+                />
+              </div>
             </div>
           </div>
+          <div className={styles.textWrapper}>
+            <h1 className={styles.text}>{`${title}`}</h1>
+          </div>
         </div>
-        <div className={styles.textWrapper}>
-          <h1 className={styles.text}>{`${title}`}</h1>
-        </div>
-      </div>
+      </div>  
     </a>
   );
 };
diff --git a/src/app/components/home/Card.tsx b/src/app/components/home/Card.tsx
index 8ea30467..be2c72c5 100644
--- a/src/app/components/home/Card.tsx
+++ b/src/app/components/home/Card.tsx
@@ -8,9 +8,9 @@ import Image from "next/image";
 
 const styles = {
   wrapper:
-    "group active:bg-brandmidblue font-medium leading-none text-base tracking-wider text-gray-400 hover:text-white-300 bg-white hover:bg-hoverblue shadow-xl hover:shadow-none cursor-pointer aspect-square rounded-3xl flex flex-col items-center justify-center",
-  header: "relative mt-2 w-full border-red",
-  budgetWrapper: "min-h-7 pt-2 pr-4 flex justify-end w-full text-right max-h-16 my-auto text-gray-700 group-hover:text-white transition-all duration-500 ease-in-out relative",
+    "group py-2 px-3 active:bg-brandmidblue font-medium leading-none text-base tracking-wider text-gray-400 hover:text-white-300 bg-white hover:bg-hoverblue shadow-2xl hover:shadow-none cursor-pointer aspect-square rounded-3xl flex flex-col items-center justify-center",
+  header: "relative mt-2 w-full border-brandblue",
+  budgetWrapper: "min-h-7 pr-4 flex justify-end w-full text-right max-h-16 my-auto text-gray-700 group-hover:text-white transition-all duration-500 ease-in-out relative",
   imageWrapper: "rounded-2xl overflow-hidden flex justify-center items-center",
   wrapperAnime: "transition-all duration-500 ease-in-out",
   image: "object-cover mx-auto",
diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index e0e191d7..2a172d30 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -22,7 +22,9 @@ const Home = async () => {
       <div className="flex justify-center">
         <h1 className="text-3xl font-bold mt-3 mb-5 text-gray-700"> Your Portfolios </h1>
       </div>
+      <div className="px-5">
       <CardTiles Portfolios={portfolios} />
+      </div>
     </>
   );
 };