diff --git a/app/create-team/page.jsx b/app/create-team/page.jsx
index 4d93442..1bb210b 100644
--- a/app/create-team/page.jsx
+++ b/app/create-team/page.jsx
@@ -5,13 +5,13 @@ import { useForm } from "react-hook-form"
 
 import { Button } from "../../@/components/ui/button"
 import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
 } from "../../@/components/ui/form"
 import { Input } from "../../@/components/ui/input"
 import { useState } from 'react';
@@ -22,8 +22,8 @@ import { useToast } from '../../@/components/ui/use-toast';
 
 
 
-   
-  export default function CreateTeamForm() {
+
+export default function CreateTeamForm() {
 
     // const [image, setImage] = useState('');
     const [teamname, setTeamname] = useState('');
@@ -49,13 +49,13 @@ import { useToast } from '../../@/components/ui/use-toast';
             players: '',
             requests: ''
         },
-      });
+    });
 
-      const { reset } = form;
+    const { reset } = form;
 
     const onSubmit = async (data) => {
         try {
-            if(teamname !== '' && game !== '' && role !== '' && rank !== '' && server !== '' && language !== '' && players !== '' && requests !== '') {
+            if (teamname !== '' && game !== '' && role !== '' && rank !== '' && server !== '' && language !== '' && players !== '' && requests !== '') {
                 const response = await axios.post('/api/teams/create-team', data);
 
                 toast({
@@ -73,242 +73,226 @@ import { useToast } from '../../@/components/ui/use-toast';
                 setPlayers('');
                 setRequests('');
             }
-        //   const response = await axios.post('/api/teams/create-team', data);
-
-        //   toast({
-        //     title: 'Success',
-        //     description: response.data.message,
-        //   });
-
-        //     reset();
-        //     setTeamname('');
-        //     setGame('');
-        //     setRole('');
-        //     setRank('');
-        //     setServer('');
-        //     setLanguage('');
-        //     setPlayers('');
-        //     setRequests('');
 
         } catch (error) {
-          console.error('Error during create-team:', error);
+            console.error('Error during create-team:', error);
 
-          toast({
-            title: 'Sign Up Failed',
-            description: errorMessage,
-            variant: 'destructive',
-          });
+            toast({
+                title: 'Sign Up Failed',
+                description: errorMessage,
+                variant: 'destructive',
+            });
 
         }
-      };
+    };
 
 
 
 
     return (
         <div className="flex justify-center items-center ">
-        <div className="w-3/4 p-8 space-y-8 rounded-lg shadow-md bg-gray-800">
-            <div className="text-center">
-            <h2 className="scroll-m-20 border-b pb-2 text-3xl font-bold tracking-tight first:mt-0 text-gray-100">
-                Create Team
-            </h2>
-            <p className="mb-4 text-gray-100">Create your team and start competing</p>
-            </div>
-            <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-                <div className="grid gap-4 grid-cols-1 md:grid-cols-2">
-                <FormField
-                    control={form.control}
-                    name="image"
-                    render={({ field }) => (
-                    <FormItem>
-                        <FormLabel>Image</FormLabel>
-                        <FormControl>
-                        <Input type="file" {...field} />
-                        </FormControl>
-                        <FormMessage />
-                    </FormItem>
-                    )}
-                />
-                <FormField
-                    control={form.control}
-                    name="teamname"
-                    render={({ field }) => (
-                    <FormItem>
-                        <FormLabel>Name</FormLabel>
-                        <FormControl>
-                        <Input 
-                            placeholder="Name of your team" 
-                            {...field} 
-                            value={teamname}
-                            onChange={(e) => {
-                                field.onChange(e);
-                                setTeamname(e.target.value);
-                            }} 
+            <div className="w-3/4 p-8 space-y-8 rounded-lg shadow-md bg-gray-800">
+                <div className="text-center">
+                    <h2 className="scroll-m-20 border-b pb-2 text-3xl font-bold tracking-tight first:mt-0 text-gray-100">
+                        Create Team
+                    </h2>
+                    <p className="mb-4 text-gray-100">Create your team and start competing</p>
+                </div>
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+                        <div className="grid gap-4 grid-cols-1 md:grid-cols-2">
+                            <FormField
+                                control={form.control}
+                                name="image"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Image</FormLabel>
+                                        <FormControl>
+                                            <Input type="file" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
                             />
-                        </FormControl>
-                        <FormMessage />
-                    </FormItem>
-                    )}
-                />
-                <FormField
-                    control={form.control}
-                    name="game"
-                    render={({ field }) => (
-                    <FormItem>
-                        <FormLabel>Game</FormLabel>
-                        <FormControl>
-                        <Input 
-                            placeholder="Game you play" 
-                            {...field} 
-                            value={game}
-                            onChange={(e) => {
-                                field.onChange(e);
-                                setGame(e.target.value);
-                            }} 
+                            <FormField
+                                control={form.control}
+                                name="teamname"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Name</FormLabel>
+                                        <FormControl>
+                                            <Input
+                                                placeholder="Name of your team"
+                                                {...field}
+                                                value={teamname}
+                                                onChange={(e) => {
+                                                    field.onChange(e);
+                                                    setTeamname(e.target.value);
+                                                }}
+                                            />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
                             />
-                        </FormControl>
-                        <FormMessage />
-                    </FormItem>
-                    )}
-                />
-                <FormField
-                    control={form.control}
-                    name="role"
-                    render={({ field }) => (
-                    <FormItem>
-                        <FormLabel>Role</FormLabel>
-                        <FormControl>
-                        <Input 
-                            placeholder="Role in the game" 
-                            {...field} 
-                            value={role}
-                            onChange={(e) => {
-                                field.onChange(e);
-                                setRole(e.target.value);
-                            }} 
+                            <FormField
+                                control={form.control}
+                                name="game"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Game</FormLabel>
+                                        <FormControl>
+                                            <Input
+                                                placeholder="Game you play"
+                                                {...field}
+                                                value={game}
+                                                onChange={(e) => {
+                                                    field.onChange(e);
+                                                    setGame(e.target.value);
+                                                }}
+                                            />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
                             />
-                        </FormControl>
-                        <FormMessage />
-                    </FormItem>
-                    )}
-                />
-                <FormField
-                    control={form.control}
-                    name="rank"
-                    render={({ field }) => (
-                    <FormItem>
-                        <FormLabel>Rank</FormLabel>
-                        <FormControl>
-                        <Input 
-                        placeholder="Your rank" 
-                        {...field} 
-                        value={rank}
-                        onChange={(e) => {
-                            field.onChange(e);
-                            setRank(e.target.value);
-                        }} 
-                        />
-                        </FormControl>
-                        <FormMessage />
-                    </FormItem>
-                    )}
-                />
-                <FormField
-                    control={form.control}
-                    name="server"
-                    render={({ field }) => (
-                    <FormItem>
-                        <FormLabel>Server</FormLabel>
-                        <FormControl>
-                        <Input 
-                            placeholder="Preferred server" 
-                            {...field} 
-                            value={server}
-                            onChange={(e) => {
-                                field.onChange(e);
-                                setServer(e.target.value);
-                            }} 
+                            <FormField
+                                control={form.control}
+                                name="role"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Role</FormLabel>
+                                        <FormControl>
+                                            <Input
+                                                placeholder="Role in the game"
+                                                {...field}
+                                                value={role}
+                                                onChange={(e) => {
+                                                    field.onChange(e);
+                                                    setRole(e.target.value);
+                                                }}
+                                            />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
                             />
-                        </FormControl>
-                        <FormMessage />
-                    </FormItem>
-                    )}
-                />
-                <FormField
-                    control={form.control}
-                    name="language"
-                    render={({ field }) => (
-                    <FormItem>
-                        <FormLabel>Language</FormLabel>
-                        <FormControl>
-                        <Input 
-                            placeholder="Language you speak" 
-                            {...field} 
-                            value={language}
-                            onChange={(e) => {
-                                field.onChange(e);
-                                setLanguage(e.target.value);
-                            }} 
+                            <FormField
+                                control={form.control}
+                                name="rank"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Rank</FormLabel>
+                                        <FormControl>
+                                            <Input
+                                                placeholder="Your rank"
+                                                {...field}
+                                                value={rank}
+                                                onChange={(e) => {
+                                                    field.onChange(e);
+                                                    setRank(e.target.value);
+                                                }}
+                                            />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
                             />
-                        </FormControl>
-                        <FormMessage />
-                    </FormItem>
-                    )}
-                />
-                <FormField
-                    control={form.control}
-                    name="players"
-                    render={({ field }) => (
-                    <FormItem>
-                        <FormLabel>Players</FormLabel>
-                        <FormControl>
-                        <Input 
-                            placeholder="Players in your team" 
-                            {...field} 
-                            value={players}
-                            onChange={(e) => {
-                                field.onChange(e);
-                                setPlayers(e.target.value);
-                            }} 
+                            <FormField
+                                control={form.control}
+                                name="server"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Server</FormLabel>
+                                        <FormControl>
+                                            <Input
+                                                placeholder="Preferred server"
+                                                {...field}
+                                                value={server}
+                                                onChange={(e) => {
+                                                    field.onChange(e);
+                                                    setServer(e.target.value);
+                                                }}
+                                            />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
                             />
-                        </FormControl>
-                        <FormMessage />
-                    </FormItem>
-                    )}
-                />
-                <FormField
-                    control={form.control}
-                    name="requests"
-                    render={({ field }) => (
-                    <FormItem>
-                        <FormLabel>Requests</FormLabel>
-                        <FormControl>
-                        <Input 
-                            placeholder="Special requests" 
-                            {...field} 
-                            value={requests}
-                            onChange={(e) => {
-                                field.onChange(e);
-                                setRequests(e.target.value);
-                            }} 
+                            <FormField
+                                control={form.control}
+                                name="language"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Language</FormLabel>
+                                        <FormControl>
+                                            <Input
+                                                placeholder="Language you speak"
+                                                {...field}
+                                                value={language}
+                                                onChange={(e) => {
+                                                    field.onChange(e);
+                                                    setLanguage(e.target.value);
+                                                }}
+                                            />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
                             />
-                        </FormControl>
-                        <FormMessage />
-                    </FormItem>
-                    )}
-                />
-                </div>
-                <div className="flex justify-center">
-                <Button type="submit">Create</Button>
-                </div>
-            </form>
-            </Form>
-        </div>
+                            <FormField
+                                control={form.control}
+                                name="players"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Players</FormLabel>
+                                        <FormControl>
+                                            <Input
+                                                placeholder="Players in your team"
+                                                {...field}
+                                                value={players}
+                                                onChange={(e) => {
+                                                    field.onChange(e);
+                                                    setPlayers(e.target.value);
+                                                }}
+                                            />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="requests"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Requests</FormLabel>
+                                        <FormControl>
+                                            <Input
+                                                placeholder="Special requests"
+                                                {...field}
+                                                value={requests}
+                                                onChange={(e) => {
+                                                    field.onChange(e);
+                                                    setRequests(e.target.value);
+                                                }}
+                                            />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                        <div className="flex justify-center">
+                            <Button type="submit">Create</Button>
+                        </div>
+                    </form>
+                </Form>
+            </div>
         </div>
     );
 
 
 
 
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/app/teams/page.jsx b/app/teams/page.jsx
index a3c69c0..ec89221 100644
--- a/app/teams/page.jsx
+++ b/app/teams/page.jsx
@@ -1,4 +1,3 @@
-// components/TeamFinder.js
 import React from 'react';
 import FiltersSidebar from '../../components/FiltersSidebar';
 import TeamCard from '../../components/TeamCard';
@@ -98,19 +97,19 @@ const teams = [
 
 const TeamFinder = () => {
   return (
-    <div>
-      <p class="text-2xl ml-4 mb-4 font-semibold tracking-wide">TEAM FINDER</p>
-      <div className="grid grid-cols-5 gap-x-4 overflow-hidden mx-4">
-        <FiltersSidebar className="rounded-lg"/>
-        <div className="overflow-y-auto p-4 bg-gray-900 text-white col-span-4 rounded-lg">
-          <div className='border-b-4 mb-4'>
+    <div className="p-4">
+      <p className="text-2xl ml-4 mb-4 font-semibold tracking-wide">TEAM FINDER</p>
+      <div className="grid grid-cols-1 md:grid-cols-5 gap-x-4 overflow-hidden mx-4">
+        <FiltersSidebar className="rounded-lg mb-4 md:mb-0" />
+        <div className="overflow-y-auto p-4 bg-gray-900 text-white col-span-1 md:col-span-4 rounded-lg">
+          <div className="border-b-4 mb-4">
             <div className="flex justify-between mb-4">
               <h2 className="text-2xl">Find Team</h2>
             </div>
-            <div className="mb-4">
-              <button className="bg-indigo-400 px-4 py-2 mr-2 rounded">Request Raised</button>
-              <button className="bg-indigo-400 px-4 py-2 rounded">Request Sent</button>
-              <button className="bg-indigo-400 px-4 py-2 rounded float-right">+ New Request</button>
+            <div className="mb-4 flex flex-wrap gap-2 justify-between">
+              <button className="bg-indigo-400 px-4 py-2 rounded text-sm">Request Raised</button>
+              <button className="bg-indigo-400 px-4 py-2 rounded text-sm">Request Sent</button>
+              <button className="bg-indigo-400 px-4 py-2 rounded text-sm">+ New Request</button>
             </div>
           </div>
           {teams.map((team, index) => (
diff --git a/components/FiltersSidebar.jsx b/components/FiltersSidebar.jsx
index 6758677..c04110f 100644
--- a/components/FiltersSidebar.jsx
+++ b/components/FiltersSidebar.jsx
@@ -1,31 +1,30 @@
-// components/FiltersSidebar.js
 import React from 'react';
 
 const FiltersSidebar = () => {
-    return (
-      <div className="p-4 bg-gray-800 text-white rounded-lg">
-        <h2 className="text-xl mb-4">Filters</h2>
-        <div className="mb-4">
-          <label className="block mb-2">Game</label>
-          <select className="w-full p-2 bg-gray-700 text-white">
-            <option>Select</option>
-          </select>
-        </div>
-        <div className="mb-4">
-          <label className="block mb-2">Role</label>
-          <select className="w-full p-2 bg-gray-700 text-white">
-            <option>Select role</option>
-          </select>
-        </div>
-        <div className="mb-4">
-          <label className="block mb-2">Language</label>
-          <select className="w-full p-2 bg-gray-700 text-white">
-            <option>Select Language</option>
-          </select>
-        </div>
-        <button className="w-full mt-5 p-2 bg-indigo-400 text-white rounded-md">Apply</button>
+  return (
+    <div className="p-4 bg-gray-800 text-white rounded-lg">
+      <h2 className="text-xl mb-4">Filters</h2>
+      <div className="mb-4">
+        <label className="block mb-2">Game</label>
+        <select className="w-full p-2 bg-gray-700 text-white">
+          <option>Select</option>
+        </select>
       </div>
-    );
-  };
+      <div className="mb-4">
+        <label className="block mb-2">Role</label>
+        <select className="w-full p-2 bg-gray-700 text-white">
+          <option>Select role</option>
+        </select>
+      </div>
+      <div className="mb-4">
+        <label className="block mb-2">Language</label>
+        <select className="w-full p-2 bg-gray-700 text-white">
+          <option>Select Language</option>
+        </select>
+      </div>
+      <button className="w-full mt-5 p-2 bg-indigo-400 text-white rounded-md">Apply</button>
+    </div>
+  );
+};
 
-export default FiltersSidebar;
+export default FiltersSidebar;
\ No newline at end of file
diff --git a/components/TeamCard.jsx b/components/TeamCard.jsx
index 28c4bbf..8d526cd 100644
--- a/components/TeamCard.jsx
+++ b/components/TeamCard.jsx
@@ -1,10 +1,10 @@
-// components/TeamCard.js
 import React from 'react';
 
 const TeamCard = ({ team }) => {
-    return (
-      <div className="p-4 bg-slate-800 text-white mb-4 rounded-md">
-        <div className="flex justify-between items-center mb-2">
+  return (
+    <div className="p-4 bg-slate-800 text-white mb-4 rounded-md">
+      <div className='border-b-4 border-b-stone-600'>
+        <div className="flex justify-between items-center mb-5">
           <div className="flex items-center">
             <img 
               src={team.dp || 'https://via.placeholder.com/40'} 
@@ -13,36 +13,40 @@ const TeamCard = ({ team }) => {
             />
             <h3 className="text-xl">{team.name}</h3>
           </div>
-          <button className="bg-transparent border-2 border-blue-800 px-4 py-2 rounded">Request to join</button>
+          <button className="bg-transparent border-2 border-blue-800 px-4 py-2 rounded hidden md:block">Request to join</button>
         </div>
-        <div className="grid grid-cols-5 gap-x-4 mb-2">
-          <div>
-            <span className="text-yellow-500">Game:</span>
-            <span className="block">{team.game}</span>
-          </div>
-          <div>
-            <span className="text-yellow-500">Role:</span>
-            <span className="block">{team.role}</span>
-          </div>
-          <div>
-            <span className="text-yellow-500">Rank:</span>
-            <span className="block">{team.rank}</span>
-          </div>
-          <div>
-            <span className="text-yellow-500">Server:</span>
-            <span className="block">{team.server}</span>
-          </div>
-          <div>
-            <span className="text-yellow-500">Language:</span>
-            <span className="block">{team.language}</span>
-          </div>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-5 gap-x-4 my-5">
+        <div>
+          <span className="text-yellow-500">Game:</span>
+          <span className="block">{team.game}</span>
         </div>
-        <div className="mt-2">
-          <span className="text-yellow-500">Looking for:</span>
-          <span className="block">{team.description}</span>
+        <div>
+          <span className="text-yellow-500">Role:</span>
+          <span className="block">{team.role}</span>
         </div>
+        <div>
+          <span className="text-yellow-500">Rank:</span>
+          <span className="block">{team.rank}</span>
+        </div>
+        <div>
+          <span className="text-yellow-500">Server:</span>
+          <span className="block">{team.server}</span>
+        </div>
+        <div>
+          <span className="text-yellow-500">Language:</span>
+          <span className="block">{team.language}</span>
+        </div>
+      </div>
+      <div className="mt-2 mb-4">
+        <span className="text-yellow-500">Looking for:</span>
+        <span className="block">{team.description}</span>
+      </div>
+      <div className="flex justify-center md:hidden">
+        <button className="bg-transparent border-2 border-blue-800 px-4 py-2 rounded">Request to join</button>
       </div>
-    );
-  };
+    </div>
+  );
+};
 
-export default TeamCard;
+export default TeamCard;
\ No newline at end of file