From e99ae02693519922c5b2197bc1ecedfc27593acd Mon Sep 17 00:00:00 2001
From: Mohamed Ali Alkassas <elasasmohamed97@gmail.com>
Date: Tue, 16 Sep 2025 20:10:49 +0300
Subject: [PATCH 1/2] update(web): update student settings page design

---
 .../components/Settings/StudentPublicInfo.tsx | 165 ++++++++++++++++++
 .../components/StudentSettings/Content.tsx    |  24 +--
 .../src/components/StudentSettings/utils.ts   |   2 +-
 packages/atlas/src/api/student.ts             |   4 +
 packages/headless/src/student.ts              |  20 ++-
 packages/types/src/student.ts                 |  10 ++
 .../components/MultiSelect/MultiSelect.tsx    |   2 +-
 packages/ui/src/components/Tabs/Tabs.tsx      |   6 +-
 packages/ui/src/locales/ar-eg.json            |   4 +-
 packages/utils/src/routes/route.ts            |   4 +-
 10 files changed, 218 insertions(+), 23 deletions(-)
 create mode 100644 apps/web/src/components/Settings/StudentPublicInfo.tsx

diff --git a/apps/web/src/components/Settings/StudentPublicInfo.tsx b/apps/web/src/components/Settings/StudentPublicInfo.tsx
new file mode 100644
index 000000000..4f86747e1
--- /dev/null
+++ b/apps/web/src/components/Settings/StudentPublicInfo.tsx
@@ -0,0 +1,165 @@
+import { languageLevels } from "@/constants/student";
+import { useOnError } from "@/hooks/error";
+import { useForm } from "@litespace/headless/form";
+import {
+  useFindStudentById,
+  useUpdateStudent,
+} from "@litespace/headless/student";
+import { useInfiniteTopics } from "@litespace/headless/topic";
+import { IStudent, ITopic } from "@litespace/types";
+import { Button } from "@litespace/ui/Button";
+import { Form } from "@litespace/ui/Form";
+import { useFormatMessage } from "@litespace/ui/hooks/intl";
+import { useMakeValidators } from "@litespace/ui/hooks/validation";
+import { Input } from "@litespace/ui/Input";
+import { validateEnglishLevel } from "@litespace/ui/lib/validate";
+import { MultiSelect } from "@litespace/ui/MultiSelect";
+import { Select } from "@litespace/ui/Select";
+import { Textarea } from "@litespace/ui/Textarea";
+import { useToast } from "@litespace/ui/Toast";
+import { Typography } from "@litespace/ui/Typography";
+import React, { useCallback, useMemo } from "react";
+
+type IForm = {
+  topics: ITopic.Self["name"]["ar"][];
+  career: string;
+  level: IStudent.EnglishLevel;
+  aim: string;
+};
+
+export const StudentPublicInfo: React.FC<{ id: number }> = ({ id }) => {
+  const intl = useFormatMessage();
+  const toast = useToast();
+
+  const { data } = useFindStudentById(id);
+
+  const { list: allTopics } = useInfiniteTopics();
+
+  const onSuccess = useCallback(() => {
+    toast.success({
+      title: intl("student-settings.updated-successfully"),
+    });
+  }, [intl, toast]);
+
+  const onError = useOnError({
+    type: "mutation",
+    handler: ({ messageId }) => {
+      toast.error({
+        title: intl("complete-profile.update.error"),
+        description: intl(messageId),
+      });
+    },
+  });
+
+  const updateStudent = useUpdateStudent({ onSuccess, onError });
+
+  const validators = useMakeValidators<IForm>({
+    career: { required: false },
+    level: { required: false, validate: validateEnglishLevel },
+    aim: { required: false },
+  });
+
+  const form = useForm<IForm>({
+    defaults: {
+      topics: data?.topics.map((topic) => topic.name.ar) || [],
+      career: data?.career || intl("labels.jobs.student"),
+      level: data?.level || IStudent.EnglishLevel.Beginner,
+      aim: data?.aim || "",
+    },
+    validators,
+    onSubmit(data) {
+      updateStudent.mutate({
+        id,
+        payload: {
+          topics: data.topics,
+          career: data.career,
+          level: data.level,
+          aim: data.aim,
+        },
+      });
+    },
+  });
+
+  const levels = useMemo(
+    () =>
+      Object.entries(languageLevels).map(([key, value]) => ({
+        label: intl(value),
+        value: Number(key),
+      })),
+    [intl]
+  );
+
+  return (
+    <div className="w-full">
+      <Form onSubmit={form.onSubmit} className="flex flex-col gap-6">
+        <div className="flex flex-col gap-4">
+          <Typography tag="h5" className="text-subtitle-2 font-bold">
+            {intl("student-settings.public-info.title")}
+          </Typography>
+          <MultiSelect
+            label={intl("complete-profile.topics.label")}
+            options={
+              allTopics?.map((topic) => ({
+                label: topic.name.ar,
+                value: topic.name.ar,
+              })) || []
+            }
+            placeholder={intl("complete-profile.topics.placeholder")}
+            values={form.state.topics}
+            setValues={(values) => form.set("topics", values)}
+          />
+
+          <Input
+            id="career"
+            name="career"
+            idleDir="rtl"
+            value={form.state.career}
+            inputSize={"large"}
+            autoComplete="off"
+            onChange={(e) => form.set("career", e.target.value)}
+            label={intl("labels.job")}
+            placeholder={intl("complete-profile.job.placeholder")}
+            state={form.errors.career ? "error" : undefined}
+            helper={form.errors.career}
+          />
+
+          <Select
+            id="level"
+            value={form.state.level}
+            onChange={(value) => form.set("level", value)}
+            options={levels}
+            label={intl("complete-profile.level.label")}
+            placeholder={intl("complete-profile.level.label")}
+            helper={form.errors.level}
+          />
+
+          <Textarea
+            className="min-h-[138px]"
+            id="aim"
+            name="aim"
+            idleDir="rtl"
+            value={form.state.aim}
+            label={intl("complete-profile.aim.label")}
+            placeholder={intl("complete-profile.aim.placeholder")}
+            state={form.errors.aim ? "error" : undefined}
+            helper={form.errors.aim}
+            onChange={({ target }) => form.set("aim", target.value)}
+            disabled={updateStudent.isPending}
+            autoComplete="off"
+          />
+        </div>
+
+        <Button
+          size="large"
+          htmlType="submit"
+          loading={updateStudent.isPending}
+          disabled={updateStudent.isPending}
+        >
+          {intl("shared-settings.save")}
+        </Button>
+      </Form>
+    </div>
+  );
+};
+
+export default StudentPublicInfo;
diff --git a/apps/web/src/components/StudentSettings/Content.tsx b/apps/web/src/components/StudentSettings/Content.tsx
index 9e4d0ccff..5a435c5f2 100644
--- a/apps/web/src/components/StudentSettings/Content.tsx
+++ b/apps/web/src/components/StudentSettings/Content.tsx
@@ -5,12 +5,12 @@ import { Tabs } from "@litespace/ui/Tabs";
 import NotificationSettings from "@/components/Settings/NotificationSettings";
 import UpdatePassword from "@/components/Settings/UpdatePassword";
 import PersonalDetails from "@/components/Settings/PersonalDetails";
-import TopicSelection from "@/components/Settings/TopicSelection";
 import UploadPhoto from "@/components/StudentSettings/UploadPhoto";
 import { IUser } from "@litespace/types";
 import { Tab } from "@/components/StudentSettings/types";
 import { isPersonalInfoIncomplete } from "@/components/Settings/utils";
 import { StudentSettingsTabId } from "@litespace/utils/routes";
+import StudentPublicInfo from "@/components/Settings/StudentPublicInfo";
 
 const Content: React.FC<{
   tab: StudentSettingsTabId;
@@ -26,6 +26,11 @@ const Content: React.FC<{
         label: intl("shared-settings.personal.title"),
         important: isPersonalInfoIncomplete(user),
       },
+      {
+        id: "public-info",
+        label: intl("student-settings.public-info.title"),
+        important: false,
+      },
       {
         id: "password",
         label: intl("shared-settings.password.title"),
@@ -36,11 +41,6 @@ const Content: React.FC<{
         label: intl("shared-settings.notification.title"),
         important: !user.notificationMethod,
       },
-      {
-        id: "topics",
-        label: intl("student-settings.topics.title"),
-        important: false,
-      },
     ];
   }, [intl, user]);
 
@@ -70,6 +70,12 @@ const Content: React.FC<{
         />
       ) : null}
 
+      {tab === "public-info" ? (
+        <div className="max-w-[530px] grow flex">
+          <StudentPublicInfo id={user.id} />
+        </div>
+      ) : null}
+
       {tab === "password" ? <UpdatePassword id={user.id} /> : null}
 
       {tab === "notifications" ? (
@@ -81,12 +87,6 @@ const Content: React.FC<{
           notificationMethod={user.notificationMethod}
         />
       ) : null}
-
-      {tab === "topics" ? (
-        <div className="max-w-[530px] grow flex">
-          <TopicSelection />
-        </div>
-      ) : null}
     </div>
   );
 };
diff --git a/apps/web/src/components/StudentSettings/utils.ts b/apps/web/src/components/StudentSettings/utils.ts
index f75d5af84..82e4e49ab 100644
--- a/apps/web/src/components/StudentSettings/utils.ts
+++ b/apps/web/src/components/StudentSettings/utils.ts
@@ -1,5 +1,5 @@
 import { StudentSettingsTabId } from "@litespace/utils/routes";
 
 export function isValidTab(tab: string): tab is StudentSettingsTabId {
-  return ["personal", "password", "notifications", "topics"].includes(tab);
+  return ["personal", "public-info", "password", "notifications"].includes(tab);
 }
diff --git a/packages/atlas/src/api/student.ts b/packages/atlas/src/api/student.ts
index 4d6a47198..deca450a6 100644
--- a/packages/atlas/src/api/student.ts
+++ b/packages/atlas/src/api/student.ts
@@ -13,4 +13,8 @@ export class Student extends Base {
   ): Promise<IStudent.UpdateApiResponse> {
     return this.patch({ route: `/api/v1/student/`, payload });
   }
+
+  async findById(id: number): Promise<IStudent.FindStudentMetaApiResponse> {
+    return this.get({ route: `api/v1/student/${id}` });
+  }
 }
diff --git a/packages/headless/src/student.ts b/packages/headless/src/student.ts
index e76f75478..6f8d96416 100644
--- a/packages/headless/src/student.ts
+++ b/packages/headless/src/student.ts
@@ -1,9 +1,9 @@
 import { useApi } from "@/api";
-import { useMutation, useQuery, UseQueryResult } from "@tanstack/react-query";
-import { useCallback, useMemo } from "react";
 import { MutationKey, QueryKey } from "@/constants";
-import { IStudent, IUser } from "@litespace/types";
 import { OnError, OnSuccess } from "@/types/query";
+import { IStudent, IUser } from "@litespace/types";
+import { useMutation, useQuery, UseQueryResult } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
 
 export function useFindStudentStats(
   id?: number
@@ -84,3 +84,17 @@ export function useUpdateStudent({
     onError,
   });
 }
+
+export function useFindStudentById(
+  id: number
+): UseQueryResult<IStudent.FindStudentMetaApiResponse> {
+  const api = useApi();
+  const find = useCallback(async () => {
+    return api.student.findById(id);
+  }, [api.student, id]);
+
+  return useQuery({
+    queryFn: find,
+    queryKey: ["find-student-by-id"],
+  });
+}
diff --git a/packages/types/src/student.ts b/packages/types/src/student.ts
index 2f1357c46..267bdbd00 100644
--- a/packages/types/src/student.ts
+++ b/packages/types/src/student.ts
@@ -1,4 +1,8 @@
+<<<<<<< HEAD
 import { IFilter, IUser, Paginated } from "@/index";
+=======
+import { IFilter, ITopic, IUser } from "@/index";
+>>>>>>> 9805f504 (update(web): update student settings page design)
 
 export enum EnglishLevel {
   Beginner = 1,
@@ -75,3 +79,9 @@ export type UpdateApiResponse = unknown;
 export type FindApiQuery = FindModelQuery;
 
 export type FindApiResponse = Paginated<Self>;
+export type FindStudentMetaApiResponse = Self & {
+  career: string;
+  level: EnglishLevel;
+  aim: string;
+  topics: ITopic.Self[];
+};
diff --git a/packages/ui/src/components/MultiSelect/MultiSelect.tsx b/packages/ui/src/components/MultiSelect/MultiSelect.tsx
index 0a8aac38d..b0148dd55 100644
--- a/packages/ui/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/ui/src/components/MultiSelect/MultiSelect.tsx
@@ -85,7 +85,7 @@ export const MultiSelect = ({
               {isEmpty(selectedOptions) ? (
                 <Typography
                   tag="span"
-                  className="flex-1 text-natural-400 text-start"
+                  className="flex-1 text-natural-600 text-start text-caption font-medium"
                 >
                   {placeholder}
                 </Typography>
diff --git a/packages/ui/src/components/Tabs/Tabs.tsx b/packages/ui/src/components/Tabs/Tabs.tsx
index abc728b00..326ab4df4 100644
--- a/packages/ui/src/components/Tabs/Tabs.tsx
+++ b/packages/ui/src/components/Tabs/Tabs.tsx
@@ -21,7 +21,7 @@ export const Tabs = <T extends string>({
   setTab: (id: T) => void;
 }) => {
   return (
-    <div className="border border-natural-200 rounded-xl flex items-center justify-between w-full">
+    <div className="border border-natural-200 rounded-xl flex items-center justify-between w-full max-w-[530px]">
       {tabs.map(({ id, label, important, disabled }) => (
         <Tab
           key={id}
@@ -47,7 +47,7 @@ const Tab: React.FC<{
     <button
       type="button"
       className={cn(
-        "relative px-4 py-[10px] group rounded-xl w-full",
+        "relative px-auto md:px-4 py-[10px] group rounded-xl w-full",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-offset-0 focus-visible:ring-brand-500",
         "flex items-center justify-center"
       )}
@@ -57,7 +57,7 @@ const Tab: React.FC<{
       <Typography
         tag="h6"
         className={cn(
-          "relative font-medium text-tiny md:text-body whitespace-nowrap w-fit",
+          "relative font-normal md:font-medium text-tiny md:text-body whitespace-nowrap w-fit",
           active
             ? "text-brand-700"
             : "text-natural-500 group-hover:text-brand-500 group-active:text-brand-700"
diff --git a/packages/ui/src/locales/ar-eg.json b/packages/ui/src/locales/ar-eg.json
index 8f8d15b6b..286cd9619 100644
--- a/packages/ui/src/locales/ar-eg.json
+++ b/packages/ui/src/locales/ar-eg.json
@@ -678,7 +678,7 @@
   "discourage-dialog-title": "التواصل المرئي يعزز جودة الحصة",
   "discourage-dialog-description": "لا ننصحك باغلاق الكاميرا اثناء الحصة لأن هذا يؤثر علي التجربة العامة للحصة",
   "student-settings.password.title": "كلمة المرور",
-  "student-settings.topics.title": "ادارة المفضلات",
+  "student-settings.public-info.title": "المعلومات العامة",
   "student-settings.profile.title": "الإعدادات",
   "student-settings.upload.image.change": "تغيير الصورة",
   "student-settings.upload.image.clear": "حذف الصورة",
@@ -702,6 +702,7 @@
   "tutor-settings.topics.selection-dialog.description": "حدد المجالات التي تبرع فيها أو تهتم بها، مثل الرياضة أو التكنولوجيا أو علم النفس، لنساعدك في تخصيص تجربة تدريسية تناسب اهتمامات طلابك وتزيد من تفاعلهم وحماسهم للتعلم.",
   "student-settings.add-topics-button.label": "قم بإضافة الموضوعات المفضلة الخاصة بك",
   "tutor-settings.add-topics-button.label": "قم بإضافة مجالات الخبرة الخاصة بك",
+  "student-settings.updated-successfully": "تم تحديث بياناتك بنجاح.",
   "shared-settings.topics.selection-dialog.loading": "برجاء الانتظار... جاري تحميل المفضلات!",
   "shared-settings.topics.selection-dialog.loading-error": " عذرًا، حدث خطأ أثناء تحميل المفضلات. برجاء المحاولة مرة أخرى",
   "shared-settings.topics.selection-dialog.update-error": " عذرًا، حدث خطأ أثناء تحديث المفضلات. برجاء المحاولة مرة أخرى",
@@ -924,6 +925,7 @@
   "payment.methods.wallet": "المحافظ الإلكترونة",
   "payment.methods.cards": "البطاقات",
   "payment.methods.fawry": "الدفع عن طريق فوري",
+  "labels.jobs.student": "طالب",
   "labels.contact-us": "تواصل معنا",
   "labels.leave": "المغادرة",
   "labels.enable-notifications": "تفعيل الإشعارات",
diff --git a/packages/utils/src/routes/route.ts b/packages/utils/src/routes/route.ts
index b2cdf2203..94bff4789 100644
--- a/packages/utils/src/routes/route.ts
+++ b/packages/utils/src/routes/route.ts
@@ -68,6 +68,6 @@ export enum Dashboard {
 
 export type StudentSettingsTabId =
   | "personal"
+  | "public-info"
   | "password"
-  | "notifications"
-  | "topics";
+  | "notifications";

From dbaff00f7b062ec26e2c39c88f4c030d7652e9fe Mon Sep 17 00:00:00 2001
From: Mohamed Ali Alkassas <elasasmohamed97@gmail.com>
Date: Tue, 16 Sep 2025 20:10:49 +0300
Subject: [PATCH 2/2] update(web): update student settings page design

---
 .../components/Settings/StudentPublicInfo.tsx | 82 ++++++++++++++-----
 package.json                                  |  2 +-
 packages/atlas/src/api/student.ts             |  6 +-
 packages/headless/src/constants/mutation.ts   |  1 +
 packages/headless/src/constants/query.ts      |  1 +
 packages/headless/src/student.ts              |  8 +-
 packages/headless/src/topic.ts                | 24 ++++++
 packages/models/scripts/seed.ts               | 11 ++-
 packages/models/src/students.ts               | 23 +++++-
 packages/models/tests/students.test.ts        |  8 +-
 packages/types/src/student.ts                 | 14 +---
 packages/ui/src/components/Tabs/Tabs.tsx      |  4 +-
 packages/ui/src/locales/ar-eg.json            |  1 -
 services/server/src/handlers/student.ts       | 22 ++++-
 services/server/src/routes/student.ts         |  3 +-
 15 files changed, 156 insertions(+), 54 deletions(-)

diff --git a/apps/web/src/components/Settings/StudentPublicInfo.tsx b/apps/web/src/components/Settings/StudentPublicInfo.tsx
index 4f86747e1..f57b28b8a 100644
--- a/apps/web/src/components/Settings/StudentPublicInfo.tsx
+++ b/apps/web/src/components/Settings/StudentPublicInfo.tsx
@@ -5,7 +5,8 @@ import {
   useFindStudentById,
   useUpdateStudent,
 } from "@litespace/headless/student";
-import { useInfiniteTopics } from "@litespace/headless/topic";
+import { useInfiniteTopics, useUserTopics } from "@litespace/headless/topic";
+import { useUpdateUserTopics } from "@litespace/headless/user";
 import { IStudent, ITopic } from "@litespace/types";
 import { Button } from "@litespace/ui/Button";
 import { Form } from "@litespace/ui/Form";
@@ -21,7 +22,7 @@ import { Typography } from "@litespace/ui/Typography";
 import React, { useCallback, useMemo } from "react";
 
 type IForm = {
-  topics: ITopic.Self["name"]["ar"][];
+  topics: ITopic.Self[];
   career: string;
   level: IStudent.EnglishLevel;
   aim: string;
@@ -31,9 +32,10 @@ export const StudentPublicInfo: React.FC<{ id: number }> = ({ id }) => {
   const intl = useFormatMessage();
   const toast = useToast();
 
-  const { data } = useFindStudentById(id);
+  const { data: studentData } = useFindStudentById(id);
 
   const { list: allTopics } = useInfiniteTopics();
+  const { query: studentTopics } = useUserTopics();
 
   const onSuccess = useCallback(() => {
     toast.success({
@@ -41,7 +43,7 @@ export const StudentPublicInfo: React.FC<{ id: number }> = ({ id }) => {
     });
   }, [intl, toast]);
 
-  const onError = useOnError({
+  const studentOnError = useOnError({
     type: "mutation",
     handler: ({ messageId }) => {
       toast.error({
@@ -51,7 +53,24 @@ export const StudentPublicInfo: React.FC<{ id: number }> = ({ id }) => {
     },
   });
 
-  const updateStudent = useUpdateStudent({ onSuccess, onError });
+  const topicOnError = useOnError({
+    type: "mutation",
+    handler: ({ messageId }) => {
+      toast.error({
+        title: intl("complete-profile.update.error"),
+        description: intl(messageId),
+      });
+    },
+  });
+
+  const updateStudentTopics = useUpdateUserTopics({
+    onError: topicOnError,
+  });
+
+  const updateStudent = useUpdateStudent({
+    onSuccess,
+    onError: studentOnError,
+  });
 
   const validators = useMakeValidators<IForm>({
     career: { required: false },
@@ -59,24 +78,40 @@ export const StudentPublicInfo: React.FC<{ id: number }> = ({ id }) => {
     aim: { required: false },
   });
 
+  const studentTopicsIds = useMemo(
+    () => studentTopics.data?.map((topic) => topic.id),
+    [studentTopics.data]
+  );
+
   const form = useForm<IForm>({
     defaults: {
-      topics: data?.topics.map((topic) => topic.name.ar) || [],
-      career: data?.career || intl("labels.jobs.student"),
-      level: data?.level || IStudent.EnglishLevel.Beginner,
-      aim: data?.aim || "",
+      topics: studentTopics.data || [],
+      career: studentData?.jobTitle || "",
+      level: studentData?.englishLevel || IStudent.EnglishLevel.Beginner,
+      aim: studentData?.learningObjective || "",
     },
     validators,
     onSubmit(data) {
-      updateStudent.mutate({
-        id,
-        payload: {
-          topics: data.topics,
-          career: data.career,
-          level: data.level,
-          aim: data.aim,
-        },
-      });
+      updateStudentTopics
+        .mutateAsync({
+          addTopics: data.topics
+            .filter((topic) => !studentTopicsIds?.includes(topic.id))
+            .map((topic) => topic.id),
+          removeTopics:
+            studentTopicsIds?.filter(
+              (topic) => !data.topics.map((tp) => tp.id).includes(topic)
+            ) || [],
+        })
+        .then(() =>
+          updateStudent.mutate({
+            payload: {
+              id,
+              englishLevel: data.level,
+              jobTitle: data.career,
+              learningObjective: data.aim,
+            },
+          })
+        );
     },
   });
 
@@ -101,12 +136,17 @@ export const StudentPublicInfo: React.FC<{ id: number }> = ({ id }) => {
             options={
               allTopics?.map((topic) => ({
                 label: topic.name.ar,
-                value: topic.name.ar,
+                value: topic.id,
               })) || []
             }
             placeholder={intl("complete-profile.topics.placeholder")}
-            values={form.state.topics}
-            setValues={(values) => form.set("topics", values)}
+            values={form.state.topics.map((topic) => topic.id)}
+            setValues={(values) =>
+              form.set(
+                "topics",
+                allTopics?.filter((topic) => values.includes(topic.id)) || []
+              )
+            }
           />
 
           <Input
diff --git a/package.json b/package.json
index 30703edd6..7ad669bc7 100644
--- a/package.json
+++ b/package.json
@@ -118,5 +118,5 @@
       "sharp"
     ]
   },
-  "packageManager": "pnpm@10.16.1+sha512.0e155aa2629db8672b49e8475da6226aa4bdea85fdcdfdc15350874946d4f3c91faaf64cbdc4a5d1ab8002f473d5c3fcedcd197989cf0390f9badd3c04678706"
+  "packageManager": "pnpm@10.17.1+sha512.17c560fca4867ae9473a3899ad84a88334914f379be46d455cbf92e5cf4b39d34985d452d2583baf19967fa76cb5c17bc9e245529d0b98745721aa7200ecaf7a"
 }
diff --git a/packages/atlas/src/api/student.ts b/packages/atlas/src/api/student.ts
index deca450a6..1204ba1ac 100644
--- a/packages/atlas/src/api/student.ts
+++ b/packages/atlas/src/api/student.ts
@@ -14,7 +14,9 @@ export class Student extends Base {
     return this.patch({ route: `/api/v1/student/`, payload });
   }
 
-  async findById(id: number): Promise<IStudent.FindStudentMetaApiResponse> {
-    return this.get({ route: `api/v1/student/${id}` });
+  async findById(
+    query: IStudent.FindByIdApiQuery
+  ): Promise<IStudent.FindByIdApiResponse> {
+    return this.get({ route: `api/v1/student/${query.id}` });
   }
 }
diff --git a/packages/headless/src/constants/mutation.ts b/packages/headless/src/constants/mutation.ts
index 37b614e83..4fcd95046 100644
--- a/packages/headless/src/constants/mutation.ts
+++ b/packages/headless/src/constants/mutation.ts
@@ -23,6 +23,7 @@ export enum MutationKey {
   DeleteSlot = "delete-slot",
   UpdateUser = "update-user",
   UpdateUserPersonalInfo = "update-user-personal-info",
+  UdpateUsertopics = "update-user-topics",
   UpdateStudent = "update-student",
   UpdateTutorTopics = "update-tutor-topics",
   CreateRoom = "create-room",
diff --git a/packages/headless/src/constants/query.ts b/packages/headless/src/constants/query.ts
index 00fe44137..df30498cf 100644
--- a/packages/headless/src/constants/query.ts
+++ b/packages/headless/src/constants/query.ts
@@ -24,6 +24,7 @@ export enum QueryKey {
   FindUserById = "find-user-by-id",
   FindStudentStats = "find-student-stats",
   FindStudents = "find-students",
+  FindStudentById = "find-student-by-id",
   FindPersonalizedStudentStats = "find-personalized-student-stats",
   FindPersonalizedTutorStats = "find-personalized-tutor-stats",
   FindTopic = "find-topic",
diff --git a/packages/headless/src/student.ts b/packages/headless/src/student.ts
index 6f8d96416..d693c4e79 100644
--- a/packages/headless/src/student.ts
+++ b/packages/headless/src/student.ts
@@ -85,16 +85,14 @@ export function useUpdateStudent({
   });
 }
 
-export function useFindStudentById(
-  id: number
-): UseQueryResult<IStudent.FindStudentMetaApiResponse> {
+export function useFindStudentById(id: number): UseQueryResult<IStudent.Self> {
   const api = useApi();
   const find = useCallback(async () => {
-    return api.student.findById(id);
+    return api.student.findById({ id });
   }, [api.student, id]);
 
   return useQuery({
     queryFn: find,
-    queryKey: ["find-student-by-id"],
+    queryKey: [QueryKey.FindStudentById],
   });
 }
diff --git a/packages/headless/src/topic.ts b/packages/headless/src/topic.ts
index 8e6ef1721..0d27e724f 100644
--- a/packages/headless/src/topic.ts
+++ b/packages/headless/src/topic.ts
@@ -131,3 +131,27 @@ export function useDeleteTopic({
     onError,
   });
 }
+
+export function useUpdateUserTopics({
+  onSuccess,
+  onError,
+}: {
+  onSuccess: OnSuccess;
+  onError: OnError;
+}) {
+  const api = useApi();
+
+  const update = useCallback(
+    async (payload: ITopic.ReplaceUserTopicsApiPayload) => {
+      return await api.topic.replaceUserTopics(payload);
+    },
+    [api.topic]
+  );
+
+  return useMutation({
+    mutationFn: update,
+    mutationKey: [MutationKey.UdpateUsertopics],
+    onSuccess,
+    onError,
+  });
+}
diff --git a/packages/models/scripts/seed.ts b/packages/models/scripts/seed.ts
index d8e086b52..5432a0761 100644
--- a/packages/models/scripts/seed.ts
+++ b/packages/models/scripts/seed.ts
@@ -1,6 +1,7 @@
 import {
   knex,
   users,
+  students,
   tutors,
   ratings,
   plans,
@@ -113,11 +114,13 @@ async function main(): Promise<void> {
     );
 
     await users.update(student.id, { gender: IUser.Gender.Male }, tx);
+    await students.create({ tx, userId: student.id });
+
     return student;
   });
 
   // Creating full students with subscriptions
-  const students = await Promise.all(
+  const seededStudents = await Promise.all(
     range(20).map(
       async (idx) =>
         await knex.transaction(async (tx) => {
@@ -147,12 +150,14 @@ async function main(): Promise<void> {
             tx
           );
 
+          await students.create({ tx, userId: student.id });
+
           return student;
         })
     )
   );
 
-  students.forEach(async (student, idx) => {
+  seededStudents.forEach(async (student, idx) => {
     const transaction = await transactions.create({
       amount: 1200,
       paymentMethod: ITransaction.PaymentMethod.EWallet,
@@ -373,7 +378,7 @@ async function main(): Promise<void> {
   // seeding ratings data
   await knex.transaction(async () => {
     return await Promise.all(
-      students.map(async (student) => {
+      seededStudents.map(async (student) => {
         stdout.info(`Student ${student.id} is rating all available tutors.`);
 
         const allTutors = [...addedTutors, ...addedTutorManagers];
diff --git a/packages/models/src/students.ts b/packages/models/src/students.ts
index bf6bd4a51..3c581b0bc 100644
--- a/packages/models/src/students.ts
+++ b/packages/models/src/students.ts
@@ -69,7 +69,28 @@ export class Students extends Model<
       .where(this.column("id"), id);
   }
 
-  async findMany({
+  async findOneBy<T extends keyof IStudent.Row>(
+    key: T,
+    value: IStudent.Row[T]
+  ): Promise<IStudent.Self | null> {
+    const rows = await this.findManyBy(key, value);
+    return first(rows) || null;
+  }
+
+  async findById(id: number): Promise<IStudent.Self | null> {
+    return await this.findOneBy("id", id);
+  }
+
+  async findManyBy<T extends keyof IStudent.Row>(
+    key: T,
+    value: IStudent.Row[T]
+  ): Promise<IStudent.Self[]> {
+    const rows = await this.builder().select("*").where(key, value);
+
+    return rows.map((row) => this.from(row));
+  }
+
+  async find({
     tx,
     ids,
     jobTitle,
diff --git a/packages/models/tests/students.test.ts b/packages/models/tests/students.test.ts
index 8e564b633..eef46b7b8 100644
--- a/packages/models/tests/students.test.ts
+++ b/packages/models/tests/students.test.ts
@@ -40,7 +40,7 @@ describe("Students", () => {
       });
       await students.update({ id: student.userId });
 
-      const { list: updatedList } = await students.findMany({
+      const { list: updatedList } = await students.find({
         ids: [student.userId],
       });
       const updated = updatedList[0];
@@ -53,7 +53,7 @@ describe("Students", () => {
     });
   });
 
-  describe(nameof(students.findMany), () => {
+  describe(nameof(students.find), () => {
     it("should filter and select fields", async () => {
       const s1 = await fixtures.nativeStudent({
         jobTitle: "Junior Engineer",
@@ -64,11 +64,11 @@ describe("Students", () => {
         englishLevel: IStudent.EnglishLevel.Advanced,
       });
 
-      const byTitle = await students.findMany({ jobTitle: "Engineer" });
+      const byTitle = await students.find({ jobTitle: "Engineer" });
       expect(byTitle.total).to.eq(1);
       expect(byTitle.list[0].userId).to.eq(s1.userId);
 
-      const { list } = await students.findMany({});
+      const { list } = await students.find({});
       expect(list.map((s) => s.userId)).to.deep.eq([s2.userId, s1.userId]);
       expect(list[0].userId).to.eq(s2.userId);
       expect(list[1].userId).to.eq(s1.userId);
diff --git a/packages/types/src/student.ts b/packages/types/src/student.ts
index 267bdbd00..ee67eddf9 100644
--- a/packages/types/src/student.ts
+++ b/packages/types/src/student.ts
@@ -1,8 +1,4 @@
-<<<<<<< HEAD
 import { IFilter, IUser, Paginated } from "@/index";
-=======
-import { IFilter, ITopic, IUser } from "@/index";
->>>>>>> 9805f504 (update(web): update student settings page design)
 
 export enum EnglishLevel {
   Beginner = 1,
@@ -79,9 +75,7 @@ export type UpdateApiResponse = unknown;
 export type FindApiQuery = FindModelQuery;
 
 export type FindApiResponse = Paginated<Self>;
-export type FindStudentMetaApiResponse = Self & {
-  career: string;
-  level: EnglishLevel;
-  aim: string;
-  topics: ITopic.Self[];
-};
+
+export type FindByIdApiQuery = { id: number };
+
+export type FindByIdApiResponse = Self;
diff --git a/packages/ui/src/components/Tabs/Tabs.tsx b/packages/ui/src/components/Tabs/Tabs.tsx
index 326ab4df4..735a1735e 100644
--- a/packages/ui/src/components/Tabs/Tabs.tsx
+++ b/packages/ui/src/components/Tabs/Tabs.tsx
@@ -21,7 +21,7 @@ export const Tabs = <T extends string>({
   setTab: (id: T) => void;
 }) => {
   return (
-    <div className="border border-natural-200 rounded-xl flex items-center justify-between w-full max-w-[530px]">
+    <div className="px-1 border border-natural-200 rounded-xl flex items-center justify-between w-full max-w-[530px]">
       {tabs.map(({ id, label, important, disabled }) => (
         <Tab
           key={id}
@@ -57,7 +57,7 @@ const Tab: React.FC<{
       <Typography
         tag="h6"
         className={cn(
-          "relative font-normal md:font-medium text-tiny md:text-body whitespace-nowrap w-fit",
+          "relative font-normal md:font-medium text-tiny md:text-body md:whitespace-nowrap w-fit",
           active
             ? "text-brand-700"
             : "text-natural-500 group-hover:text-brand-500 group-active:text-brand-700"
diff --git a/packages/ui/src/locales/ar-eg.json b/packages/ui/src/locales/ar-eg.json
index 286cd9619..f920c53fa 100644
--- a/packages/ui/src/locales/ar-eg.json
+++ b/packages/ui/src/locales/ar-eg.json
@@ -925,7 +925,6 @@
   "payment.methods.wallet": "المحافظ الإلكترونة",
   "payment.methods.cards": "البطاقات",
   "payment.methods.fawry": "الدفع عن طريق فوري",
-  "labels.jobs.student": "طالب",
   "labels.contact-us": "تواصل معنا",
   "labels.leave": "المغادرة",
   "labels.enable-notifications": "تفعيل الإشعارات",
diff --git a/services/server/src/handlers/student.ts b/services/server/src/handlers/student.ts
index 315b85b1b..89bb6c83d 100644
--- a/services/server/src/handlers/student.ts
+++ b/services/server/src/handlers/student.ts
@@ -14,6 +14,7 @@ import {
   pageNumber,
   pageSize,
   studentEnglishLevel,
+  withNamedId,
 } from "@/validation/utils";
 import { encodeAuthJwt } from "@litespace/auth";
 import { generateConfirmationCode } from "@/lib/confirmationCodes";
@@ -21,7 +22,7 @@ import { CONFIRMATION_CODE_VALIDITY_MINUTES } from "@litespace/utils";
 import { environment, jwtSecret } from "@/constants";
 import dayjs from "@/lib/dayjs";
 import { sendBackgroundMessage } from "@/workers";
-import { isAdmin, isStudent } from "@litespace/utils/user";
+import { isAdmin, isStudent, isTutor } from "@litespace/utils/user";
 
 const createStudentPayload: ZodSchema<IStudent.CreateApiPayload> = zod.object({
   email,
@@ -125,11 +126,25 @@ async function update(req: Request, res: Response, next: NextFunction) {
 
 export async function find(req: Request, res: Response, next: NextFunction) {
   const user = req.user;
-  const allowed = isAdmin(user);
+  const allowed = isAdmin(user) || isStudent(user) || isTutor(user);
   if (!allowed) return next(forbidden());
 
   const query: IStudent.FindApiQuery = findStudentsQuery.parse(req.query);
-  const result = await students.findMany(query);
+  const result = await students.find(query);
+  res.status(200).json(result);
+}
+
+export async function findById(
+  req: Request,
+  res: Response,
+  next: NextFunction
+) {
+  const user = req.user;
+  const allowed = isAdmin(user) || isStudent(user) || isTutor(user);
+  if (!allowed) return next(forbidden());
+
+  const { id }: IStudent.FindByIdApiQuery = withNamedId("id").parse(req.params);
+  const result = await students.findById(id);
   res.status(200).json(result);
 }
 
@@ -137,4 +152,5 @@ export default {
   create: safeRequest(create),
   update: safeRequest(update),
   find: safeRequest(find),
+  findById: safeRequest(findById),
 };
diff --git a/services/server/src/routes/student.ts b/services/server/src/routes/student.ts
index 6eceaeeca..be51adfa0 100644
--- a/services/server/src/routes/student.ts
+++ b/services/server/src/routes/student.ts
@@ -3,8 +3,9 @@ import { Router } from "express";
 
 const router = Router();
 
+router.get("/:id", student.findById);
+router.get("/list", student.find);
 router.post("/", student.create);
 router.patch("/", student.update);
-router.get("/list", student.find);
 
 export default router;