diff --git a/apps/dashboard/src/components/ServerStats/Chart.tsx b/apps/dashboard/src/components/ServerStats/Chart.tsx
index 35802724d..24dddf27a 100644
--- a/apps/dashboard/src/components/ServerStats/Chart.tsx
+++ b/apps/dashboard/src/components/ServerStats/Chart.tsx
@@ -24,7 +24,7 @@ const Chart = <T extends { timestamp: number }>({
   dataKey?: keyof T;
 }) => {
   return (
-    <div className="h-[20rem] shadow-ls-small rounded-md p-4" dir="ltr">
+    <div className="h-[20rem] shadow-ls-x-small rounded-md p-4" dir="ltr">
       <ResponsiveContainer>
         <LineChart data={data}>
           {lines.map((key) => (
diff --git a/apps/dashboard/src/components/UserDetails/Content.tsx b/apps/dashboard/src/components/UserDetails/Content.tsx
index 34ceaadaf..e591c2f3b 100644
--- a/apps/dashboard/src/components/UserDetails/Content.tsx
+++ b/apps/dashboard/src/components/UserDetails/Content.tsx
@@ -39,7 +39,7 @@ const Content: React.FC<{
   if (!user) return;
 
   return (
-    <div className="p-4 mx-auto mt-6 border border-border-strong rounded-md shadow-ls-small w-full">
+    <div className="p-4 mx-auto mt-6 border border-border-strong rounded-md shadow-ls-x-small w-full">
       <div className="flex gap-2 ">
         <div className="relative">
           {user.image ? (
diff --git a/apps/dashboard/src/pages/PlatformSettings.tsx b/apps/dashboard/src/pages/PlatformSettings.tsx
index 856a420a3..dcfcafd6b 100644
--- a/apps/dashboard/src/pages/PlatformSettings.tsx
+++ b/apps/dashboard/src/pages/PlatformSettings.tsx
@@ -2,7 +2,7 @@ import Cache from "@/components/Settings/Cache";
 
 const Settings = () => {
   return (
-    <div className="w-full flex flex-col max-w-screen-2xl mx-auto m-6 p-6 shadow-ls-small rounded-md h-fit">
+    <div className="w-full flex flex-col max-w-screen-2xl mx-auto m-6 p-6 shadow-ls-x-small rounded-md h-fit">
       <Cache />
     </div>
   );
diff --git a/apps/nova/src/components/Tutors/Content.tsx b/apps/nova/src/components/Tutors/Content.tsx
index b8d883339..ad51179b6 100644
--- a/apps/nova/src/components/Tutors/Content.tsx
+++ b/apps/nova/src/components/Tutors/Content.tsx
@@ -1,13 +1,12 @@
+import BookLesson from "@/components/Lessons/BookLesson";
+import { Route } from "@/types/routes";
 import { Loading } from "@litespace/luna/Loading";
-import { Element, ITutor, Void } from "@litespace/types";
-import React, { useCallback, useState } from "react";
 import { TutorCard } from "@litespace/luna/TutorCard";
 import { asFullAssetUrl } from "@litespace/luna/backend";
-import { Route } from "@/types/routes";
-import { useNavigate } from "react-router-dom";
+import { Element, ITutor, Void } from "@litespace/types";
 import { motion } from "framer-motion";
+import React, { useCallback, useState } from "react";
 import { InView } from "react-intersection-observer";
-import BookLesson from "@/components/Lessons/BookLesson";
 
 type Tutor = Element<ITutor.FindOnboardedTutorsApiResponse["list"]>;
 
@@ -19,8 +18,6 @@ const Content: React.FC<{
   more: Void;
   hasMore: boolean;
 }> = ({ tutors, loading, error, more, hasMore, fetching }) => {
-  const navigate = useNavigate();
-
   const [tutor, setTutor] = useState<Tutor | null>(null);
 
   const openBookingDialog = useCallback((tutor: Tutor) => setTutor(tutor), []);
@@ -53,7 +50,6 @@ const Content: React.FC<{
                 studentCount={tutor.studentCount}
                 rating={tutor.avgRating}
                 onBook={() => openBookingDialog(tutor)}
-                onOpenProfile={() => navigate(profileUrl)}
                 profileUrl={profileUrl}
                 imageUrl={tutor.image ? asFullAssetUrl(tutor.image) : null}
               />
diff --git a/packages/luna/src/components/Avatar/Avatar.tsx b/packages/luna/src/components/Avatar/Avatar.tsx
index a029fd387..911b389b7 100644
--- a/packages/luna/src/components/Avatar/Avatar.tsx
+++ b/packages/luna/src/components/Avatar/Avatar.tsx
@@ -7,7 +7,11 @@ export const Avatar: React.FC<{
   src?: string;
   alt?: string;
   seed?: string;
-}> = ({ src, alt, seed }) => {
+  /**
+   * property sets how the image should be resized to fit its container.
+   */
+  object?: "fill" | "contain" | "cover" | "none" | "scale-down";
+}> = ({ src, alt, seed, object = "contain" }) => {
   const [status, setStatus] = useState<Status>("loading");
 
   const onLoad = useCallback(() => {
@@ -24,7 +28,14 @@ export const Avatar: React.FC<{
         data-status={status}
         className={cn(
           "tw-opacity-0 tw-transition-opacity tw-duration-300 tw-ease-linear",
-          "data-[status=loaded]:tw-opacity-100 tw-absolute tw-object-contain tw-w-full tw-h-full"
+          "data-[status=loaded]:tw-opacity-100 tw-absolute tw-w-full tw-h-full",
+          {
+            "tw-object-contain": object === "contain",
+            "tw-object-fill": object === "fill",
+            "tw-object-cover": object === "cover",
+            "tw-object-none": object === "none",
+            "tw-object-scale-down": object === "scale-down",
+          }
         )}
         src={src}
         alt={alt}
@@ -40,7 +51,10 @@ export const Avatar: React.FC<{
           "tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-z-[1]"
         )}
       >
-        <JazzIcon seed={seed || alt || src || "litespace"} />
+        <JazzIcon
+          seed={seed || alt || src || "litespace"}
+          className="tw-h-full"
+        />
       </div>
     </div>
   );
diff --git a/packages/luna/src/components/Call/PreCallUserPreview.tsx b/packages/luna/src/components/Call/PreCallUserPreview.tsx
index 4e028304e..56b5df72c 100644
--- a/packages/luna/src/components/Call/PreCallUserPreview.tsx
+++ b/packages/luna/src/components/Call/PreCallUserPreview.tsx
@@ -17,7 +17,7 @@ export const PreCallUserPreview: React.FC<{
   }, [stream, camera]);
 
   return (
-    <div className="tw-aspect-video tw-w-full tw-grow tw-max-w-[700px] tw-rounded-lg tw-shadow-ls-small tw-overflow-hidden">
+    <div className="tw-aspect-video tw-w-full tw-grow tw-max-w-[700px] tw-rounded-lg tw-shadow-ls-x-small tw-overflow-hidden">
       {camera ? (
         <video ref={videoRef} autoPlay muted={false} playsInline />
       ) : (
diff --git a/packages/luna/src/components/Call/UnFocusedStream.tsx b/packages/luna/src/components/Call/UnFocusedStream.tsx
index c809510d4..caf6f401d 100644
--- a/packages/luna/src/components/Call/UnFocusedStream.tsx
+++ b/packages/luna/src/components/Call/UnFocusedStream.tsx
@@ -21,7 +21,7 @@ export const UnFocusedStream: React.FC<{
         duration: 0.3,
         ease: "easeInOut",
       }}
-      className="tw-aspect-video tw-w-[219px] tw-border tw-border-natural-500 tw-flex tw-items-center tw-justify-center tw-backdrop-blur-[15px] tw-bg-background-indicator tw-rounded-lg tw-shadow-ls-small tw-overflow-hidden"
+      className="tw-aspect-video tw-w-[219px] tw-border tw-border-natural-500 tw-flex tw-items-center tw-justify-center tw-backdrop-blur-[15px] tw-bg-background-indicator tw-rounded-lg tw-shadow-ls-x-small tw-overflow-hidden"
     >
       {stream.camera || stream.cast ? (
         // todo: should only be muted for the current user (props)
diff --git a/packages/luna/src/components/Chat/ChatSummary/ChatSummary.tsx b/packages/luna/src/components/Chat/ChatSummary/ChatSummary.tsx
index 2e0561b10..0f7b3930c 100644
--- a/packages/luna/src/components/Chat/ChatSummary/ChatSummary.tsx
+++ b/packages/luna/src/components/Chat/ChatSummary/ChatSummary.tsx
@@ -48,7 +48,7 @@ export const ChatSummary: React.FC<Props> = ({ rooms, chatsUrl }) => {
   return (
     <div
       className={cn(
-        "tw-border tw-border-transparent hover:tw-border-natural-100 tw-rounded-lg tw-p-6 tw-shadow-ls-small tw-bg-natural-50"
+        "tw-border tw-border-transparent hover:tw-border-natural-100 tw-rounded-lg tw-p-6 tw-shadow-ls-x-small tw-bg-natural-50"
       )}
     >
       <Typography
diff --git a/packages/luna/src/components/Lessons/UpcomingLessonsSummary.tsx b/packages/luna/src/components/Lessons/UpcomingLessonsSummary.tsx
index cecd72768..d3036a07b 100644
--- a/packages/luna/src/components/Lessons/UpcomingLessonsSummary.tsx
+++ b/packages/luna/src/components/Lessons/UpcomingLessonsSummary.tsx
@@ -40,7 +40,7 @@ export const UpcomingLessonsSummary: React.FC<Props> = ({
   return (
     <div
       className={cn(
-        "tw-border tw-border-transparent hover:tw-border-natural-100 tw-rounded-lg tw-p-6 tw-shadow-ls-small tw-bg-natural-50"
+        "tw-border tw-border-transparent hover:tw-border-natural-100 tw-rounded-lg tw-p-6 tw-shadow-ls-x-small tw-bg-natural-50"
       )}
     >
       <Typography
diff --git a/packages/luna/src/components/MultiSelect/MultiSelect.tsx b/packages/luna/src/components/MultiSelect/MultiSelect.tsx
index 690966489..4b61bf70b 100644
--- a/packages/luna/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/luna/src/components/MultiSelect/MultiSelect.tsx
@@ -58,10 +58,10 @@ export const MultiSelect = <T,>({
           className={cn(
             "tw-w-full tw-h-14 tw-rounded-lg tw-p-2 tw-transition-colors tw-duration-200",
             "tw-border tw-border-natural-300 hover:tw-border-brand-200 focus:tw-border-brand-500",
-            "data-[error=true]:tw-border-destructive-500 data-[error=true]:tw-shadow-ls-small data-[error=true]:tw-shadow-[rgba(204,0,0,0.25)]",
-            "focus:tw-outline-none focus:tw-shadow-ls-small focus:tw-shadow-[rgba(43,181,114,0.25)]",
+            "data-[error=true]:tw-border-destructive-500 data-[error=true]:tw-shadow-ls-x-small data-[error=true]:tw-shadow-[rgba(204,0,0,0.25)]",
+            "focus:tw-outline-none focus:tw-shadow-ls-x-small focus:tw-shadow-[rgba(43,181,114,0.25)]",
             "tw-bg-natural-50 hover:tw-bg-brand-50",
-            "data-[open=true]:tw-shadow-ls-small data-[open=true]:tw-shadow-[rgba(43,181,114,0.25)] data-[open=true]:tw-border-brand-500"
+            "data-[open=true]:tw-shadow-ls-x-small data-[open=true]:tw-shadow-[rgba(43,181,114,0.25)] data-[open=true]:tw-border-brand-500"
           )}
           onClick={() => setOpen(true)}
         >
diff --git a/packages/luna/src/components/Select/Select.tsx b/packages/luna/src/components/Select/Select.tsx
index f81236180..d1eee6eb0 100644
--- a/packages/luna/src/components/Select/Select.tsx
+++ b/packages/luna/src/components/Select/Select.tsx
@@ -64,10 +64,10 @@ export const Select = <T extends string | number>({
           "tw-flex tw-flex-row tw-justify-between tw-items-center",
           "tw-w-full tw-h-14 tw-rounded-lg tw-p-2 tw-transition-colors tw-duration-200",
           "tw-border tw-border-natural-300 hover:tw-border-brand-200 focus:tw-border-brand-500",
-          "data-[error=true]:tw-border-destructive-500 data-[error=true]:tw-shadow-ls-small data-[error=true]:tw-shadow-[rgba(204,0,0,0.25)]",
-          "focus:tw-outline-none focus:tw-shadow-ls-small focus:tw-shadow-[rgba(43,181,114,0.25)]",
+          "data-[error=true]:tw-border-destructive-500 data-[error=true]:tw-shadow-ls-x-small data-[error=true]:tw-shadow-[rgba(204,0,0,0.25)]",
+          "focus:tw-outline-none focus:tw-shadow-ls-x-small focus:tw-shadow-[rgba(43,181,114,0.25)]",
           "tw-bg-natural-50 hover:tw-bg-brand-50",
-          "data-[open=true]:tw-shadow-ls-small data-[open=true]:tw-shadow-[rgba(43,181,114,0.25)] data-[open=true]:tw-border-brand-500"
+          "data-[open=true]:tw-shadow-ls-x-small data-[open=true]:tw-shadow-[rgba(43,181,114,0.25)] data-[open=true]:tw-border-brand-500"
         )}
       >
         <Value>
diff --git a/packages/luna/src/components/StudentOverview/StudentOverview.tsx b/packages/luna/src/components/StudentOverview/StudentOverview.tsx
index 2b4e78219..3aede5a03 100644
--- a/packages/luna/src/components/StudentOverview/StudentOverview.tsx
+++ b/packages/luna/src/components/StudentOverview/StudentOverview.tsx
@@ -104,7 +104,7 @@ export const Card: React.FC<{
   return (
     <div
       className={cn(
-        "tw-p-4 tw-bg-natural-50 tw-rounded-2xl tw-shadow-ls-small",
+        "tw-p-4 tw-bg-natural-50 tw-rounded-2xl tw-shadow-ls-x-small",
         "tw-border tw-border-transparent hover:tw-border-natural-100",
         "tw-basis-full tw-flex tw-flex-col tw-gap-2"
       )}
diff --git a/packages/luna/src/components/TutorCard/TutorCard.tsx b/packages/luna/src/components/TutorCard/TutorCard.tsx
index d5654ef7e..80aa3ebdd 100644
--- a/packages/luna/src/components/TutorCard/TutorCard.tsx
+++ b/packages/luna/src/components/TutorCard/TutorCard.tsx
@@ -27,7 +27,6 @@ type Props = {
   imageUrl?: string | null;
   profileUrl: string;
   onBook: Void;
-  onOpenProfile: Void;
 };
 
 export const TutorCard: React.FC<Props> = ({
@@ -41,7 +40,6 @@ export const TutorCard: React.FC<Props> = ({
   profileUrl,
   rating,
   onBook,
-  onOpenProfile,
 }) => {
   const intl = useFormatMessage();
   return (
@@ -49,7 +47,7 @@ export const TutorCard: React.FC<Props> = ({
       className={cn(
         "tw-flex tw-flex-col",
         "tw-bg-natural-50 tw-border tw-border-natural-100",
-        "tw-p-4 tw-shadow-ls-small tw-rounded-lg"
+        "tw-p-4 tw-shadow-ls-x-small tw-rounded-lg"
       )}
     >
       <div className="tw-flex tw-flex-row tw-gap-2 tw-mb-4">
@@ -157,15 +155,22 @@ export const TutorCard: React.FC<Props> = ({
         >
           {intl("tutors.card.book-button.label")}
         </Button>
-        <Button
-          onClick={onOpenProfile}
-          className="tw-w-full"
-          type={ButtonType.Main}
-          variant={ButtonVariant.Secondary}
-          size={ButtonSize.Tiny}
+        <Link
+          to={profileUrl}
+          className={cn(
+            "tw-block tw-grow tw-basis-1/2 tw-text-center tw-px-4 tw-py-2 tw-border tw-border-brand-700 tw-rounded-lg tw-w-full",
+            "hover:tw-bg-brand-100 hover:tw-border-brand-700 focus:tw-bg-brand-200 focus:tw-ring-1 focus:tw-ring-brand-900",
+            "tw-transition-colors tw-ease-out tw-duration-200"
+          )}
         >
-          {intl("tutors.card.profile-button.label")}
-        </Button>
+          <Typography
+            element="caption"
+            weight="semibold"
+            className="tw-text-brand-700"
+          >
+            {intl("tutors.card.profile-button.label")}
+          </Typography>
+        </Link>
       </div>
     </div>
   );
diff --git a/packages/luna/src/components/TutorCard/TutorCardV1.stories.tsx b/packages/luna/src/components/TutorCard/TutorCardV1.stories.tsx
new file mode 100644
index 000000000..fa1cac025
--- /dev/null
+++ b/packages/luna/src/components/TutorCard/TutorCardV1.stories.tsx
@@ -0,0 +1,105 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { TutorCardV1 } from "@/components/TutorCard";
+import { CardProps } from "@/components/TutorCard/types";
+import { faker } from "@faker-js/faker/locale/ar";
+import React from "react";
+import { range } from "lodash";
+
+type Story = StoryObj<CardProps>;
+
+const meta: Meta<CardProps> = {
+  title: "TutorCardV1",
+  component: TutorCardV1,
+  decorators: [
+    (Story) => (
+      <div style={{ width: "568px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+const makeTopics = (count: number, wordLength?: number | null) =>
+  range(count).map(() => {
+    return faker.word.sample({ length: wordLength || { min: 5, max: 15 } });
+  });
+
+export const TutorWithoutName: Story = {
+  args: {
+    id: faker.number.int(),
+    name: null,
+    about: faker.lorem.paragraphs(3),
+    studentCount: faker.number.int({ min: 10, max: 1_000 }),
+    lessonCount: faker.number.int({ min: 10, max: 500 }),
+    rating: faker.number.int({ min: 0, max: 5 }),
+    imageUrl: faker.image.urlPicsumPhotos({ width: 1_000, height: 1_000 }),
+    topics: makeTopics(12),
+  },
+};
+
+export const TutorWithoutImage: Story = {
+  args: {
+    id: faker.number.int(),
+    name: null,
+    about: faker.lorem.paragraphs(3),
+    studentCount: faker.number.int({ min: 10, max: 1_000 }),
+    lessonCount: faker.number.int({ min: 10, max: 500 }),
+    rating: faker.number.int({ min: 0, max: 5 }),
+    imageUrl: null,
+    topics: makeTopics(12),
+  },
+};
+
+export const TutorWithStats: Story = {
+  args: {
+    id: faker.number.int(),
+    name: faker.person.fullName(),
+    about: faker.lorem.paragraphs(3),
+    studentCount: faker.number.int({ min: 10, max: 1_000 }),
+    lessonCount: faker.number.int({ min: 10, max: 500 }),
+    rating: faker.number.int({ min: 0, max: 5 }),
+    imageUrl: faker.image.urlPicsumPhotos({ width: 1_000, height: 1_000 }),
+    topics: makeTopics(12),
+  },
+};
+
+export const TutorWithHighStats: Story = {
+  args: {
+    id: faker.number.int(),
+    name: faker.person.fullName(),
+    about: faker.lorem.paragraphs(3),
+    studentCount: faker.number.int({ min: 1_000, max: 10_000 }),
+    lessonCount: faker.number.int({ min: 1_000, max: 10_000 }),
+    rating: faker.number.int({ min: 0, max: 5 }),
+    imageUrl: faker.image.urlPicsumPhotos({ width: 1_000, height: 1_000 }),
+    topics: makeTopics(12, 10),
+  },
+};
+
+export const TutorWithoutStats: Story = {
+  args: {
+    id: faker.number.int(),
+    name: faker.person.fullName(),
+    about: faker.lorem.paragraphs(3),
+    studentCount: 0,
+    lessonCount: 0,
+    rating: 0,
+    imageUrl: faker.image.urlPicsumPhotos({ width: 1_000, height: 1_000 }),
+    topics: makeTopics(12),
+  },
+};
+
+export const TutorWithoutRating: Story = {
+  args: {
+    id: faker.number.int(),
+    name: faker.person.fullName(),
+    about: faker.lorem.paragraphs(3),
+    studentCount: faker.number.int({ min: 1, max: 200 }),
+    lessonCount: faker.number.int({ min: 1, max: 200 }),
+    rating: 0,
+    imageUrl: faker.image.urlPicsumPhotos({ width: 1_000, height: 1_000 }),
+    topics: makeTopics(12),
+  },
+};
+
+export default meta;
diff --git a/packages/luna/src/components/TutorCard/TutorCardV1.tsx b/packages/luna/src/components/TutorCard/TutorCardV1.tsx
new file mode 100644
index 000000000..4cddd614c
--- /dev/null
+++ b/packages/luna/src/components/TutorCard/TutorCardV1.tsx
@@ -0,0 +1,230 @@
+import { Avatar } from "@/components/Avatar";
+import {
+  Button,
+  ButtonSize,
+  ButtonType,
+  ButtonVariant,
+} from "@/components/Button";
+import { CardProps } from "@/components/TutorCard/types";
+import { Typography } from "@/components/Typography";
+import { formatNumber } from "@/components/utils";
+import { useFormatMessage } from "@/hooks";
+import SStar from "@litespace/assets/SStar";
+import { orUndefined } from "@litespace/sol/utils";
+import cn from "classnames";
+import { isEmpty } from "lodash";
+import React, { useMemo } from "react";
+import { Link } from "react-router-dom";
+import { Tooltip } from "@/components/Tooltip";
+
+export const TutorCardV1: React.FC<CardProps> = ({
+  id,
+  name,
+  about,
+  imageUrl,
+  lessonCount,
+  studentCount,
+  profileUrl,
+  rating,
+  topics,
+  onBook,
+}) => {
+  const intl = useFormatMessage();
+  const isNewTutor = useMemo(
+    () => !studentCount && !lessonCount && !rating,
+    [lessonCount, rating, studentCount]
+  );
+
+  const remainingTopicsCount = useMemo(() => {
+    // 3 is the number of the topics presented in one line
+    // 6 is the number of the topics presented in two lines
+    const displayedCount = !isNewTutor ? 3 : 6;
+    const totalTopics = topics.length;
+
+    const remainingTopicsCount =
+      totalTopics < displayedCount ? 0 : totalTopics - displayedCount;
+
+    return remainingTopicsCount;
+  }, [isNewTutor, topics]);
+
+  return (
+    <div
+      className={cn(
+        "tw-bg-natural-50 tw-flex tw-gap-4",
+        "tw-border tw-border-transparent hover:tw-border hover:tw-border-natural-100",
+        "tw-p-4 tw-shadow-ls-small tw-rounded-lg"
+      )}
+    >
+      <div className="tw-rounded-lg tw-overflow-hidden tw-shrink-0 tw-w-[200px]">
+        <Avatar
+          src={orUndefined(imageUrl)}
+          alt={orUndefined(name)}
+          seed={id.toString()}
+          object="cover"
+        />
+      </div>
+      <div>
+        <Typography
+          element="subtitle-1"
+          weight="bold"
+          className="tw-text-brand-700 tw-mb-1 tw-line-clamp-1"
+        >
+          {name}
+        </Typography>
+
+        <Typography
+          element="caption"
+          weight="regular"
+          className="tw-ellipsis tw-line-clamp-2 tw-text-natural-800"
+        >
+          {about}
+        </Typography>
+
+        <Link to={profileUrl} className="tw-cursor-pointer">
+          <Typography
+            element="caption"
+            weight="bold"
+            className="tw-ellipsis tw-line-clamp-2 tw-text-natural-800 tw-underline"
+          >
+            {intl("tutors.card.label.read-more")}
+          </Typography>
+        </Link>
+
+        {!isNewTutor ? (
+          <div className={cn("tw-flex tw-gap-8 tw-my-4")}>
+            {studentCount ? (
+              <div className="tw-flex tw-flex-col tw-gap-1">
+                <Typography
+                  element="caption"
+                  weight="regular"
+                  className="tw-text-natural-800"
+                >
+                  {intl("tutors.card.label.students")}
+                </Typography>
+                <Typography
+                  element="body"
+                  weight="semibold"
+                  className="tw-text-natural-950"
+                >
+                  {formatNumber(studentCount)}
+                </Typography>
+              </div>
+            ) : null}
+
+            {lessonCount ? (
+              <div className="tw-flex tw-flex-col tw-gap-1">
+                <Typography
+                  element="caption"
+                  weight="regular"
+                  className="tw-text-natural-800"
+                >
+                  {intl("tutors.card.label.lessons")}
+                </Typography>
+                <Typography
+                  element="body"
+                  weight="semibold"
+                  className="tw-text-natural-950"
+                >
+                  {formatNumber(lessonCount)}
+                </Typography>
+              </div>
+            ) : null}
+
+            {rating ? (
+              <div className="tw-flex tw-flex-col tw-gap-1">
+                <Typography
+                  element="caption"
+                  weight="regular"
+                  className="tw-text-natural-800"
+                >
+                  {intl("tutors.card.label.rating")}
+                </Typography>
+                <div className="tw-flex tw-flex-row tw-items-center tw-gap-[5px] tw-h-full">
+                  <Typography
+                    element="tiny-text"
+                    weight="semibold"
+                    className="tw-inline-block tw-text-natural-950"
+                  >
+                    {rating}
+                  </Typography>
+                  <SStar
+                    width={15}
+                    height={15}
+                    className="[&>*]:tw-fill-warning-500"
+                  />
+                </div>
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
+        {!isEmpty(topics) ? (
+          <div className="tw-flex tw-mt-4 tw-gap-2 tw-flex-wrap tw-justify-start">
+            {topics.map((topic, idx) => {
+              if ((isNewTutor && idx < 6) || (!isNewTutor && idx < 3))
+                return (
+                  <Tooltip
+                    key={idx}
+                    content={<Typography element="body">{topic}</Typography>}
+                  >
+                    <div className="tw-w-1/4">
+                      <Typography
+                        element="tiny-text"
+                        weight="regular"
+                        className="tw-block tw-text-natural-50 tw-bg-brand-700 tw-px-3 tw-py-2 tw-rounded-3xl tw-text-center tw-truncate"
+                      >
+                        {topic}
+                      </Typography>
+                    </div>
+                  </Tooltip>
+                );
+            })}
+            <Typography
+              element="tiny-text"
+              weight="regular"
+              className="tw-inline-block tw-text-natural-50 tw-bg-brand-700 tw-px-3 tw-py-2 tw-rounded-3xl"
+            >
+              {remainingTopicsCount}
+              {"+"}
+            </Typography>
+          </div>
+        ) : null}
+        <div className="tw-flex tw-gap-3 tw-mt-4">
+          <Button
+            onClick={onBook}
+            className="tw-grow tw-basis-1/2 tw-w-full"
+            type={ButtonType.Main}
+            variant={ButtonVariant.Primary}
+            size={ButtonSize.Tiny}
+          >
+            <Typography
+              element="caption"
+              weight="semibold"
+              className="tw-text-natural-50"
+            >
+              {intl("tutors.card.book-button.label")}
+            </Typography>
+          </Button>
+          <Link
+            to={profileUrl}
+            className={cn(
+              "tw-block tw-grow tw-basis-1/2 tw-text-center tw-px-4 tw-py-2 tw-border tw-border-brand-700 tw-rounded-lg tw-w-full",
+              "hover:tw-bg-brand-100 hover:tw-border-brand-700 focus:tw-bg-brand-200 focus:tw-ring-1 focus:tw-ring-brand-900",
+              "tw-transition-colors tw-ease-out tw-duration-200"
+            )}
+          >
+            <Typography
+              element="caption"
+              weight="semibold"
+              className="tw-text-brand-700"
+            >
+              {intl("tutors.card.profile-button.label")}
+            </Typography>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TutorCardV1;
diff --git a/packages/luna/src/components/TutorCard/index.ts b/packages/luna/src/components/TutorCard/index.ts
index 3340132a8..0d12a744f 100644
--- a/packages/luna/src/components/TutorCard/index.ts
+++ b/packages/luna/src/components/TutorCard/index.ts
@@ -1 +1,2 @@
 export { TutorCard } from "@/components/TutorCard/TutorCard";
+export { TutorCardV1 } from "@/components/TutorCard/TutorCardV1";
diff --git a/packages/luna/src/components/TutorCard/types.ts b/packages/luna/src/components/TutorCard/types.ts
new file mode 100644
index 000000000..99671fd95
--- /dev/null
+++ b/packages/luna/src/components/TutorCard/types.ts
@@ -0,0 +1,15 @@
+import { Void } from "@litespace/types";
+
+export type CardProps = {
+  id: number;
+  name: string | null;
+  bio: string | null;
+  about: string | null;
+  studentCount: number;
+  lessonCount: number;
+  rating: number;
+  imageUrl?: string | null;
+  profileUrl: string;
+  topics: Array<string>;
+  onBook: Void;
+};
diff --git a/packages/luna/src/locales/ar-eg.json b/packages/luna/src/locales/ar-eg.json
index ef1041c63..161a46c52 100644
--- a/packages/luna/src/locales/ar-eg.json
+++ b/packages/luna/src/locales/ar-eg.json
@@ -692,4 +692,4 @@
   "error.password.short": "رقم سري قصير",
   "error.password.long": "رقم سري طويل",
   "error.password.invalid": "يجب أن يحتوي علي أرقام، حروف ، رموز"
-}
\ No newline at end of file
+}
diff --git a/packages/luna/tailwind.config.js b/packages/luna/tailwind.config.js
index d27a4b00a..3f88264e1 100644
--- a/packages/luna/tailwind.config.js
+++ b/packages/luna/tailwind.config.js
@@ -263,7 +263,8 @@ export default {
       },
     },
     boxShadow: {
-      "ls-small": "0px 6px 20px 0px rgba(0, 0, 0, 0.08)",
+      "ls-x-small": "0px 6px 20px 0px rgba(0, 0, 0, 0.08)",
+      "ls-small": "0px 6px 20px 0px rgba(0, 0, 0, 0.1)",
       "ls-medium": "0px 6px 20px 0px rgba(0, 0, 0, 0.15)",
       "ls-large": "0px 6px 20px 0px rgba(0, 0, 0, 0.2)",
       "ls-x-large": "0px 6px 20px 0px rgba(0, 0, 0, 0.25)",