diff --git a/apps/frontend/src/components/Card.tsx b/apps/frontend/src/components/Card.tsx
index 7967bd4c..c309c6fc 100644
--- a/apps/frontend/src/components/Card.tsx
+++ b/apps/frontend/src/components/Card.tsx
@@ -1,11 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import chessIcon from '../../public/chess.png';
 import computerIcon from '../../public/computer.png';
 import lightningIcon from '../../public/lightning-bolt.png';
@@ -88,11 +82,10 @@ export function PlayCard() {
         <CardTitle className="font-semibold tracking-wide flex flex-col items-center justify-center">
           <p>
             Play
-            <span className="text-green-700 font-bold pt-1"> Chess</span>
+            <span className="text-green-700 font-bold "> Chess</span>
           </p>
           <img className="pl-1 w-1/2 mt-4" src={chessIcon} alt="chess" />
         </CardTitle>
-        <CardDescription></CardDescription>
       </CardHeader>
       <CardContent className="grid gap-2 cursor-pointer shadow-md mt-1">
         {gameModeData.map((data) => {
diff --git a/apps/frontend/src/screens/Landing.tsx b/apps/frontend/src/screens/Landing.tsx
index 6fec6f08..824f4257 100644
--- a/apps/frontend/src/screens/Landing.tsx
+++ b/apps/frontend/src/screens/Landing.tsx
@@ -3,7 +3,7 @@ import { PlayCard } from '@/components/Card';
 export const Landing = () => {
   return (
     <div className="max-w-full h-screen chess-board mt-0">
-      <div className="flex flex-col md:flex-row w-full md:w-3/4 max-w-screen-lg mx-auto gap-x-4 p-4">
+      <div className="flex flex-col md:flex-row md:w-full max-w-screen-lg mx-auto gap-x-4 p-1 pb-4">
         <img
           className="rounded-md w-full md:h-3/4  hidden md:block"
           src="https://res.cloudinary.com/dcugqfvvg/image/upload/v1713647295/standardboard.1d6f9426_asqzum.png"