diff --git a/client/src/components/card/closed-debate-card.css b/client/src/components/card/closed-debate-card.css
index c2de679..e59938d 100644
--- a/client/src/components/card/closed-debate-card.css
+++ b/client/src/components/card/closed-debate-card.css
@@ -25,6 +25,7 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+    overflow: hidden;
 }
 
 #closed-card .divider {
@@ -43,6 +44,10 @@
 }
 
 #closed-card .left p {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
     padding-top: 10px;
     font-size: 16px;
     color: var(--card_color_secondary);
@@ -138,6 +143,7 @@
     }
 
     #closed-card .left p {
+        -webkit-line-clamp: 2;
         font-size: 15px;
     }
 
diff --git a/client/src/components/card/closed-debate-card.tsx b/client/src/components/card/closed-debate-card.tsx
index c2723b7..7d8c901 100644
--- a/client/src/components/card/closed-debate-card.tsx
+++ b/client/src/components/card/closed-debate-card.tsx
@@ -9,7 +9,9 @@ const ClosedDebateCard = () => {
             <div className='left'>
                 <h2>Sony is the best camera of all time.</h2>
                 <p>
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Non labore necessitatibus reiciendis rem ad perferendis.
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Non labore necessitatibus reiciendis rem ad perferendis, id officia omnis voluptas eius veritatis explicabo harum! Vero porro labore quo ab aut. Nesciunt!
+                    Fugiat repellat architecto pariatur fugit perspiciatis voluptas quidem autem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non labore necessitatibus reiciendis rem ad perferendis, id officia omnis voluptas eius veritatis explicabo harum! Vero porro labore quo ab aut. Nesciunt!
+                    Fugiat repellat architecto pariatur fugit perspiciatis voluptas quidem autem.
                 </p>
                 <Link to='/'>View</Link>
             </div>
@@ -26,10 +28,10 @@ const ClosedDebateCard = () => {
                     </div>
                 </div>
                 <div className='debate-bar__container'>
-                    <DebateBar debateFrom={4000000} debateBy={6000000} />
+                    <DebateBar debateFrom={423} debateBy={516} />
                 </div>
                 <div className='debate-info'>
-                    <p>{useFormatNumber(2100)} comments</p>
+                    <p>{useFormatNumber(210)} comments</p>
                     <p>5 days ago</p>
                 </div>
             </div>
diff --git a/client/src/components/card/open-debate-card.css b/client/src/components/card/open-debate-card.css
index c3d555b..bf45a4b 100644
--- a/client/src/components/card/open-debate-card.css
+++ b/client/src/components/card/open-debate-card.css
@@ -30,6 +30,10 @@
 }
 
 #open-card .debate-body {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 5;
+    -webkit-box-orient: vertical;
     padding-top: 10px;
     font-size: 16px;
     color: var(--card_color_secondary);
@@ -42,12 +46,8 @@
     justify-content: space-between;
 }
 
-#open-card .debate-footer p {
-    font-size: 14px;
-    color: var(--card_color_secondary);
-}
-
 #open-card .user-info {
+    width: 70%;
     display: flex;
     gap: 10px;
     align-items: center;
@@ -62,6 +62,19 @@
     cursor: pointer;
 }
 
+#open-card .user-info .user-detail {
+    overflow: hidden;
+}
+
+#open-card .user-info p {
+    max-width: 100%;
+    width: fit-content;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    color: var(--card_color_secondary);
+}
+
 #open-card .user-info p:nth-child(1) {
     font-size: 15px;
     font-weight: 600;
@@ -71,10 +84,20 @@
     font-size: 14px;
 }
 
+#open-card .debate-footer .created-date {
+    width: auto;
+    font-size: 14px;
+    color: var(--card_color_secondary);
+}
+
 @media screen and (max-width: 1536px) {
     #open-card .debate-body {
         font-size: 15px;
     }
+
+    #open-card .debate-body {
+        -webkit-line-clamp: 6;
+    }
 }
 
 @media screen and (max-width: 480px) {
@@ -93,4 +116,8 @@
     #open-card .debate-header a {
         padding-top: 0;
     }
+
+    #open-card .debate-body {
+        -webkit-line-clamp: 7;
+    }
 }
\ No newline at end of file
diff --git a/client/src/components/card/open-debate-card.tsx b/client/src/components/card/open-debate-card.tsx
index 3d778df..e071f63 100644
--- a/client/src/components/card/open-debate-card.tsx
+++ b/client/src/components/card/open-debate-card.tsx
@@ -14,17 +14,18 @@ const OpenDebateCard = () => {
             </div>
             <p className='debate-body'>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Non labore necessitatibus reiciendis rem ad perferendis, id officia omnis voluptas eius veritatis explicabo harum! Vero porro labore quo ab aut. Nesciunt!
+                Fugiat repellat architecto pariatur fugit perspiciatis voluptas quidem autem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non labore necessitatibus reiciendis rem ad perferendis, id officia omnis voluptas eius veritatis explicabo harum! Vero porro labore quo ab aut. Nesciunt!
                 Fugiat repellat architecto pariatur fugit perspiciatis voluptas quidem autem.
             </p>
             <div className='debate-footer'>
                 <div className='user-info'>
                     <img src="/user.jpg" alt="" />
-                    <div>
+                    <div className='user-detail'>
                         <p>Julie Roberts</p>
                         <p>julieroberts</p>
                     </div>
                 </div>
-                <p>15 mins ago</p>
+                <p className='created-date'>15 mins ago</p>
             </div>
         </div>
     )
diff --git a/client/src/hooks/useFileHandler.ts b/client/src/hooks/useFileHandler.ts
deleted file mode 100644
index 890f189..0000000
--- a/client/src/hooks/useFileHandler.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useCallback } from "react";
-
-type HandleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => Promise<string | null>;
-
-const useFileHandler = (maxSize: number): HandleFileChange => {
-    const handleFileChange = useCallback(async (e: React.ChangeEvent<HTMLInputElement>): Promise<string | null> => {
-        const file = e.target.files?.[0];
-        if (file) {
-            if (file.type.startsWith('image/')) {
-                if (file.size <= maxSize * 1024 * 1024) {
-                    return new Promise((resolve, reject) => {
-                        const reader = new FileReader();
-                        reader.onloadend = () => {
-                            if (typeof reader.result === 'string') {
-                                resolve(reader.result);
-                            } else {
-                                reject(new Error('Failed to read file as data URL'));
-                            }
-                        };
-                        reader.onerror = reject;
-                        reader.readAsDataURL(file);
-                    });
-                } else {
-                    alert("File size should not exceed " + maxSize + "MB");
-                    return null;
-                }
-            } else {
-                alert("Please select an image file.");
-                return null;
-            }
-        }
-        return null;
-    }, [maxSize]);
-
-    return handleFileChange;
-};
-
-export default useFileHandler;
\ No newline at end of file