diff --git a/src/app/(dashboard)/dashboard/change-password/page.tsx b/src/app/(dashboard)/dashboard/change-password/page.tsx
index 9c32b58..d0ffa86 100644
--- a/src/app/(dashboard)/dashboard/change-password/page.tsx
+++ b/src/app/(dashboard)/dashboard/change-password/page.tsx
@@ -3,14 +3,14 @@ import { Separator } from "@/components/ui/separator";
 
 export default function SettingsProfilePage() {
   return (
-    <div className="flex-1 space-y-4  p-4 md:p-8 pt-6 max-w-[800px]">
-      <div>
+    <div className="flex-1 space-y-4  p-4 md:p-8 pt-6 h-full w-full flex justify-center items-center">
+      {/* <div>
         <h3 className="text-lg font-medium">Change Password</h3>
         <p className="text-sm text-muted-foreground">
           Change your password carefully.
         </p>
       </div>
-      <Separator />
+      <Separator /> */}
       <ChangePasswordForm />
     </div>
   );
diff --git a/src/app/(dashboard)/dashboard/preferences/page.tsx b/src/app/(dashboard)/dashboard/preferences/page.tsx
index e32cc48..5adb41a 100644
--- a/src/app/(dashboard)/dashboard/preferences/page.tsx
+++ b/src/app/(dashboard)/dashboard/preferences/page.tsx
@@ -77,11 +77,22 @@ const dummyPreferences = [
 ];
 
 const Page = () => {
-  const [value, setValue] = useState([50]);
+  const [preference, setPreference] = useState({
+    readability: [50],
+    refinement: [50],
+    modularity: [50],
+    optimization: [50],
+    portability: [50],
+    robustness: [50],
+    maintainability: [50],
+    conformity: [50],
+    security: [50],
+    functionality: [50],
+  });
 
   return (
-    <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
-      <Card className="max-w-[600px]">
+    <div className="flex-1 space-y-4  p-4 md:p-8 pt-6 w-full h-full flex justify-center items-center">
+      <Card className="max-w-[600px] w-full">
         <CardHeader>
           <CardTitle className="mb-4 font-bold text-xl">
             Code Evaluation Criteria
@@ -90,37 +101,39 @@ const Page = () => {
         </CardHeader>
 
         <CardContent>
-          <div className="grid grid-cols-2 gap-y-8 gap-x-16">
-            {dummyPreferences.map((item) => (
-              <div key={item.id} className="space-y-6">
-                <div className="flex items-center gap-2">
-                  <h4 className="capitalize font-semibold">{item.name}</h4>
-                  <Tooltip>
-                    <TooltipTrigger>
-                      <CircleHelp className="size-4" />
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <p>{item.description}</p>
-                    </TooltipContent>
-                  </Tooltip>
+          <div className="grid grid-cols-2 gap-y-4 md:gap-y-8 gap-x-8 md:gap-x-16">
+            {dummyPreferences.map(
+              (item: { id: number; name: string; description: string }) => (
+                <div key={item.id} className="space-y-6">
+                  <div className="flex items-center gap-2">
+                    <h4 className="capitalize font-semibold">{item.name}</h4>
+                    <Tooltip>
+                      <TooltipTrigger>
+                        <CircleHelp className="size-4" />
+                      </TooltipTrigger>
+                      <TooltipContent className="max-w-52">
+                        <p>{item.description}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
+                  <Slider
+                    defaultValue={[50]}
+                    // @ts-ignore
+                    value={preference[item.name] as number[]}
+                    onValueChange={(v) => {
+                      setPreference((p) => ({ ...p, [item.name]: v }));
+                    }}
+                    min={0}
+                    max={100}
+                    step={1}
+                  />
                 </div>
-                <Slider
-                  defaultValue={[50]}
-                  value={value}
-                  onValueChange={(v) => {
-                    console.log(v);
-                    setValue(v);
-                  }}
-                  min={0}
-                  max={100}
-                  step={1}
-                />
-              </div>
-            ))}
+              )
+            )}
           </div>
         </CardContent>
         <CardFooter>
-          <Button>Submit</Button>
+          <Button className="w-full" size="lg">Submit</Button>
         </CardFooter>
       </Card>
     </div>
diff --git a/src/components/change-password-form.tsx b/src/components/change-password-form.tsx
index 953c973..576edc5 100644
--- a/src/components/change-password-form.tsx
+++ b/src/components/change-password-form.tsx
@@ -15,6 +15,8 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/use-toast";
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
+import { Separator } from "./ui/separator";
 
 const profileFormSchema = z.object({
   currentPassword: z.string().trim().min(6, {
@@ -66,52 +68,69 @@ export default function ChangePasswordForm() {
   }
 
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <FormField
-          control={form.control}
-          name="currentPassword"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Current Password</FormLabel>
-              <FormControl>
-                <Input
-                  placeholder="Enter your current password..."
-                  {...field}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="newPassword"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>New Password</FormLabel>
-              <FormControl>
-                <Input placeholder="Enter your new password..." {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="confirmPassword"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Confirm New Password</FormLabel>
-              <FormControl>
-                <Input placeholder="Confirm the new password..." {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Reset Password</Button>
-      </form>
-    </Form>
+    <Card className="max-w-[600px] w-full">
+      <CardHeader>
+        <CardTitle className="mb-4 font-bold text-xl">
+          Change Password
+        </CardTitle>
+        <Separator />
+      </CardHeader>
+
+      <CardContent>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <FormField
+              control={form.control}
+              name="currentPassword"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Current Password</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="Enter your current password..."
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="newPassword"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>New Password</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="Enter your new password..."
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="confirmPassword"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Confirm New Password</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="Confirm the new password..."
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button type="submit" className="w-full" size="lg">Reset Password</Button>
+          </form>
+        </Form>
+      </CardContent>
+    </Card>
   );
 }
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
index c5fd6c8..2a49e04 100644
--- a/src/components/ui/slider.tsx
+++ b/src/components/ui/slider.tsx
@@ -12,12 +12,12 @@ const Slider = React.forwardRef<
   <SliderPrimitive.Root
     ref={ref}
     className={cn(
-      "relative flex w-full touch-none select-none items-center border",
+      "relative flex w-full touch-none select-none items-center",
       className
     )}
     {...props}
   >
-    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-primary/20">
       <SliderPrimitive.Range className="absolute h-full bg-primary" />
     </SliderPrimitive.Track>