diff --git a/client/src/components/CollectionItemUpdated.tsx b/client/src/components/CollectionItemUpdated.tsx
index e455479..3fcbc6d 100644
--- a/client/src/components/CollectionItemUpdated.tsx
+++ b/client/src/components/CollectionItemUpdated.tsx
@@ -24,7 +24,7 @@ function CollectionItem({ name }: CollectionItemProps) {
     <div>
       <div style={circleStyle}>
       </div>
-      <h2 className="text-sm text-black text-center">{name}</h2>
+      <h2 className="text-sm text-black text-center" style={{marginBottom: "15px"}}>{name}</h2>
     </div>
   );
 }
diff --git a/client/src/components/GiftSortNavBar.tsx b/client/src/components/GiftSortNavBar.tsx
index 772d1b3..234a5da 100644
--- a/client/src/components/GiftSortNavBar.tsx
+++ b/client/src/components/GiftSortNavBar.tsx
@@ -25,7 +25,7 @@ const GiftSortNavbar = () => {
   return (
     <div className="bg-gray-100 p-2">
     <div className="flex" style={{ maxWidth: "1440px" }}>
-      <div className="flex space-x-2">
+      <div className="flex space-x-2 "  style={{ marginRight: "680px" }}>
           <button
             className={`${buttonStyle} ${
               activeButton === "Shop" ? activeButtonStyle : ""
diff --git a/client/src/components/SearchBar.tsx b/client/src/components/SearchBar.tsx
index 476a31b..608a5a4 100644
--- a/client/src/components/SearchBar.tsx
+++ b/client/src/components/SearchBar.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 const SearchBar = () => {
   const [searchText, setSearchText] = useState('');
diff --git a/client/src/components/UpdatedGiftItem.tsx b/client/src/components/UpdatedGiftItem.tsx
index 64ea29f..f07fea0 100644
--- a/client/src/components/UpdatedGiftItem.tsx
+++ b/client/src/components/UpdatedGiftItem.tsx
@@ -1,5 +1,3 @@
-import { Gift } from "../types.tsx";
-
 type GiftItemProps = {
   name: string;
   price: number;
@@ -7,7 +5,7 @@ type GiftItemProps = {
 
 function UpdatedGiftItem({ name, price }: GiftItemProps) {
   return (
-    <div className="relative flex flex-col items-center">
+    <div className="relative flex flex-col flex-start">
       <div className="bg-gray-200 w-40 h-40 mx-auto mb-2 relative">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -24,7 +22,7 @@ function UpdatedGiftItem({ name, price }: GiftItemProps) {
           />
         </svg>
       </div>
-      <div className="text-left">
+      <div className="text-left" style={{marginLeft: "40px", marginBottom: "5px"}}>
         <h2 className="text-sm text-black font-bold">{name}</h2>
         <h2 className="text-xs text-black">${price}</h2>
       </div>
diff --git a/client/src/pages/HomePage.tsx b/client/src/pages/HomePage.tsx
index e3c60f5..fa2362d 100644
--- a/client/src/pages/HomePage.tsx
+++ b/client/src/pages/HomePage.tsx
@@ -52,12 +52,10 @@ const HomePage = () => {
             ))}
           </div>
         </div>
-        <div className="flex " style={{maxWidth: '1000px' }}>
+        <div className=" w-1000">
           <GiftSortNavBar />
         </div>
-       
-    
-<div className="overflow-y-auto" style={{ maxHeight: '305px', maxWidth: '1000px' }}>
+  <div className="overflow-y-auto" style={{ maxHeight: '290px', maxWidth: '1000px' }}>
   <div className="flex flex-wrap -mx-2">
     {gifts.map((gift, index) => (
       <div key={index} className="w-1/4 px-2">
@@ -66,8 +64,6 @@ const HomePage = () => {
     ))}
   </div>
 </div>
-
-
       </div>
     </div>
   );