diff --git a/index.html b/index.html
index 424b715..fc87284 100644
--- a/index.html
+++ b/index.html
@@ -17,3 +17,4 @@
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
+
diff --git a/package-lock.json b/package-lock.json
index fc37715..32980b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3007,4 +3007,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/students/chaya-sprung/Card.tsx b/src/students/chaya-sprung/Card.tsx
new file mode 100644
index 0000000..1585fae
--- /dev/null
+++ b/src/students/chaya-sprung/Card.tsx
@@ -0,0 +1,11 @@
+import styles from "./styles.module.css";
+import { CardProps } from "../../types";
+
+export default function ChayaSprungCard({ student, onClick }: CardProps) {
+  return (
+    <div onClick={onClick} className={`joke-card ${styles.card}`}>
+      <h2 className={styles.title}>{student.jokeTitle}</h2>
+      <p className={styles.name}>{student.name}</p>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/students/chaya-sprung/JokePage.tsx b/src/students/chaya-sprung/JokePage.tsx
new file mode 100644
index 0000000..1128892
--- /dev/null
+++ b/src/students/chaya-sprung/JokePage.tsx
@@ -0,0 +1,13 @@
+import styles from "./styles.module.css";
+import { PageProps } from "../../types";
+
+export default function ChayaSprungJokePage({ onBack }: PageProps) {
+  return (
+    <div className={`joke-page ${styles.jokePage}`}>
+      <h1>בדיקת ראיה</h1 >
+      <p> חולה אומר לרופא: "דוקטור, אני חושב שאני צריך משקפיים."
+עונה לו הרופא: "אתה בהחלט צריך... זה בנק, לא מרפאה."</p>
+      <button onClick={onBack}>← חזרה</button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/students/chaya-sprung/styles.module.css b/src/students/chaya-sprung/styles.module.css
new file mode 100644
index 0000000..7fc78d2
--- /dev/null
+++ b/src/students/chaya-sprung/styles.module.css
@@ -0,0 +1,92 @@
+/* ==========================================================================
+   1. עיצוב הכרטיסייה הראשית (ChayaSprungCard)
+   ========================================================================== */
+.card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 24px;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  background: transparent; /* הרקע הסגול מגיע מאפליקציית האם */
+}
+
+/* אפקט ריחוף עדין מעל הכרטיסייה */
+.card:hover {
+  transform: translateY(-4px);
+}
+
+/* עיצוב כותרת הבדיחה "בדיקת ראיה" בסגנון מחשב/פיקסלים */
+.title {
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 2rem;
+  font-weight: 900;
+  color: #000000;
+  margin: 0 0 8px 0;
+  letter-spacing: -0.5px;
+}
+
+/* עיצוב שם התלמידה */
+.name {
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 1.1rem;
+  color: #333333;
+  margin: 0;
+}
+
+/* ==========================================================================
+   2. עיצוב עמוד הבדיחה המלא (ChayaSprungJokePage)
+   ========================================================================== */
+.jokePage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  min-height: 50vh;
+  padding: 40px 20px;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+/* כותרת עמוד הבדיחה */
+.jokePage h1 {
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 3rem;
+  color: #000000;
+  margin-bottom: 24px;
+}
+
+/* תוכן הבדיחה */
+.jokePage p {
+  font-size: 1.4rem;
+  line-height: 1.6;
+  max-width: 600px;
+  color: #111111;
+  margin-bottom: 40px;
+  white-space: pre-line; /* שומר על ירידת השורה בין הדוקטור לחולה */
+}
+
+/* כפתור החזרה */
+.jokePage button {
+  background-color: #fca311; /* צבע כתום התואם לכפתורים האחרים בעיצוב */
+  color: #ffffff;
+  border: none;
+  padding: 12px 28px;
+  font-size: 1.1rem;
+  font-weight: bold;
+  border-radius: 25px;
+  cursor: pointer;
+  transition: background-color 0.2s ease, transform 0.1s ease;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.jokePage button:hover {
+  background-color: #e5920a;
+  transform: scale(1.03);
+}
+
+.jokePage button:active {
+  transform: scale(0.98);
+}
\ No newline at end of file
diff --git a/src/students/efrat-mittelman/Card.tsx b/src/students/efrat-mittelman/Card.tsx
new file mode 100644
index 0000000..d76ec30
--- /dev/null
+++ b/src/students/efrat-mittelman/Card.tsx
@@ -0,0 +1,11 @@
+import styles from "./styles.module.css";
+import { CardProps } from "../../types";
+
+export default function EfratMittelmanCard({ student, onClick }: CardProps) {
+  return (
+    <div onClick={onClick} className={`joke-card ${styles.card}`}>
+      <h2 className={styles.title}>{student.jokeTitle}</h2>
+      <p className={styles.author}>מאת: {student.name}</p>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/students/efrat-mittelman/JokePage.tsx b/src/students/efrat-mittelman/JokePage.tsx
new file mode 100644
index 0000000..ff2ba5b
--- /dev/null
+++ b/src/students/efrat-mittelman/JokePage.tsx
@@ -0,0 +1,15 @@
+import styles from "./styles.module.css";
+import { PageProps } from "../../types";
+
+export default function EfratMittelmanJokePage({ onBack }: PageProps) {
+  return (
+    <div className={`joke-page ${styles.jokePage}`}>
+      <h1 className={styles.jokeTitle}>למה המחשב הלך לרופא?</h1>
+      <p className={styles.jokeAnswer}>כי היה לו וירוס 😄</p>
+      
+      <button className={styles.backButton} onClick={onBack}>
+        ← חזרה למסך הראשי
+      </button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/students/efrat-mittelman/styles.module.css b/src/students/efrat-mittelman/styles.module.css
new file mode 100644
index 0000000..5070e18
--- /dev/null
+++ b/src/students/efrat-mittelman/styles.module.css
@@ -0,0 +1,145 @@
+.jokePage {
+  background: rgba(255, 255, 255, 0.75);
+  backdrop-filter: blur(20px); 
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 32px;
+  padding: 60px 40px;
+  max-width: 520px;
+  width: 92%;
+  margin: 60px auto;
+  text-align: center;
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  box-shadow: 
+    0 30px 60px rgba(0, 0, 0, 0.04),
+    0 0 0 1px rgba(0, 0, 0, 0.01),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.jokePage:hover {
+  transform: translateY(-10px) scale(1.01);
+  box-shadow: 
+    0 50px 70px rgba(0, 0, 0, 0.09),
+    0 0 30px rgba(79, 70, 229, 0.15); 
+  background: rgba(255, 255, 255, 0.85);
+}
+
+.jokeTitle {
+  color: #111827;
+  font-size: 2.2rem;
+  font-weight: 900;
+  letter-spacing: -0.03em;
+  margin-bottom: 35px;
+  background: linear-gradient(135deg, #0f172a 0%, #475569 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.jokeAnswer {
+  color: #4f46e5; 
+  font-size: 1.6rem;
+  font-weight: 700;
+  padding: 18px 32px;
+  background: linear-gradient(135deg, rgba(79, 70, 229, 0.08) 0%, rgba(6, 182, 212, 0.03) 100%);
+  border-radius: 20px;
+  display: inline-block;
+  margin-bottom: 45px;
+  border: 1px solid rgba(79, 70, 229, 0.1);
+  box-shadow: inset 0 1px 2px rgba(79, 70, 229, 0.05);
+}
+
+.backButton {
+  background: #0f172a;
+  color: #ffffff;
+  border: none;
+  padding: 16px 40px;
+  font-size: 1rem;
+  font-weight: 600;
+  border-radius: 100px; 
+  cursor: pointer;
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.2);
+}
+
+.backButton:hover {
+  background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%); 
+  transform: translateY(-2px) scale(1.04);
+  box-shadow: 0 15px 30px rgba(79, 70, 229, 0.3);
+}
+
+.backButton:active {
+  transform: translateY(1px) scale(0.97);
+}
+
+.card {
+  background: #ffffff; 
+  border-radius: 24px; 
+  padding: 35px 28px;
+  width: 290px;
+  min-height: 220px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  
+  border: 2px solid transparent;
+  background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #e5e7eb, #cbd5e1);
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+  
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); 
+  cursor: pointer;
+  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.card:hover {
+  transform: translateY(-12px) scale(1.03);
+  background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #4f46e5, #06b6d4);
+  box-shadow: 
+    0 30px 50px rgba(79, 70, 229, 0.18),
+    0 0 20px rgba(6, 182, 212, 0.1);
+}
+
+.title {
+  color: #0f172a;
+  font-size: 1.45rem;
+  font-weight: 800;
+  margin-bottom: 10px;
+  letter-spacing: -0.01em;
+  transition: color 0.3s ease;
+}
+
+.card:hover .title {
+  background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.author {
+  color: #64748b;
+  font-size: 0.95rem;
+  font-weight: 600;
+}
+
+.card::after {
+  content: '⚡';
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  font-size: 1.2rem;
+  opacity: 0.15;
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.card:hover::after {
+  transform: rotate(25deg) scale(1.3);
+  opacity: 1;
+  filter: drop-shadow(0 0 4px rgba(79, 70, 229, 0.6));
+}
\ No newline at end of file
diff --git a/src/students/index.ts b/src/students/index.ts
index 5be78e7..e53fabf 100644
--- a/src/students/index.ts
+++ b/src/students/index.ts
@@ -1,15 +1,43 @@
 import { Student } from "../types";
 
+import YaelOrdmanCard from "./yael-ordman/Card";
+import YaelOrdmanJokePage from "./yael-ordman/JokePage";
+
+import  efratMittelmanCard from "./efrat-mittelman/Card";
+import efratMittelmanJokePage from "./efrat-mittelman/JokePage";
+
+import SheviShapiraCard from "./shevi-shapira/Card";
+import SheviShapiraJokePage from "./shevi-shapira/JokePage";
+
+import ChayaSprungJokePage from "./chaya-sprung/JokePage";
+import ChayaSprungCard from "./chaya-sprung/Card";
+
+
 import DanaDuviCard from "./dana-duvi/Card";
 import DanaDuviJokePage from "./dana-duvi/JokePage";
 
 import ChaniChanzinCard from "./chani-chanzin/Card";
 import ChaniChanzinJokePage from "./chani-chanzin/JokePage";
+import YaelShitritCard from "./yael-shitrit/Card";
+import YaelShitritJokePage from "./yael-shitrit/JokePage";
+
+
+
+import NechamiJokePage from "./nechami_brim/JokePage";
+import NechamiCard from "./nechami_brim/Card";
 
 // ⚠️ סדר הרשימה חייב להיות לפי סדר האלף-בית העברי לפי שם המשפחה.
 // כל תלמידה מוסיפה את עצמה במקום הנכון ידנית.
 // אסור להשתמש בפונקציית-sort! 
 const students: Student[] = [
+
+  {
+    id: "yael-ordman",
+    name: "יעל אורדמן",
+    jokeTitle: "רקורסיה",//מה ההגדרה המילונית של רקורסיה? עיין ערך רקורסיה... חחח
+    CardComponent: YaelOrdmanCard,
+    JokePageComponent: YaelOrdmanJokePage,
+  },
   {
     id: "dana-duvi",
     name: "דנה דובי",
@@ -17,6 +45,13 @@ const students: Student[] = [
     CardComponent: DanaDuviCard,
     JokePageComponent: DanaDuviJokePage,
   },
+  {
+  id: "chaya-sprung",
+  name: "חיה שפרונג",
+  jokeTitle: "בדיקת ראיה",
+  CardComponent: ChayaSprungCard,
+  JokePageComponent: ChayaSprungJokePage,
+},
   {
     id: "chani-chanzin",
     name: "חני חנזין",
@@ -24,6 +59,36 @@ const students: Student[] = [
     CardComponent: ChaniChanzinCard,
     JokePageComponent: ChaniChanzinJokePage,
   },
+ 
+    {
+    id: "efrat-mittelman",
+    name: "אפרת מיטלמן",
+    jokeTitle: "וירוס במחשב ",
+    CardComponent: efratMittelmanCard,
+    JokePageComponent: efratMittelmanJokePage,
+  },
+  {
+    id: "Yael-Shitrit",
+    name: "יעל שטרית",
+    jokeTitle: "הדוב הפחדן",
+    CardComponent: YaelShitritCard,
+    JokePageComponent: YaelShitritJokePage,
+  },
+    {
+  id: "nechami-brim",
+  name: "נחמי ברים",
+  jokeTitle: "חוקי הפיזיקה של ההייטק",
+  CardComponent: NechamiCard,
+  JokePageComponent: NechamiJokePage,
+},
+  {
+  id: "shevi-shapira",
+  name: "שבי שפירא",
+  jokeTitle: "אלגוריתם בסופרמרקט 🛒", // הכותרת החדשה והמתאימה
+  CardComponent: SheviShapiraCard,
+  JokePageComponent: SheviShapiraJokePage,
+},
+
 ];
 
-export default students;
+export default students;
\ No newline at end of file
diff --git a/src/students/nechami_brim/Card.tsx b/src/students/nechami_brim/Card.tsx
new file mode 100644
index 0000000..9cb5d18
--- /dev/null
+++ b/src/students/nechami_brim/Card.tsx
@@ -0,0 +1,11 @@
+import styles from "./styles.module.css";
+import { CardProps } from "../../types";
+
+export default function NechamiCard({ student, onClick }: CardProps) {
+  return (
+    <div onClick={onClick} className={`joke-card ${styles.card}`}>
+      <h2 className={styles.title}>{student.jokeTitle}</h2>
+      <p className={styles.name}>{student.name}</p>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/students/nechami_brim/JokePage.tsx b/src/students/nechami_brim/JokePage.tsx
new file mode 100644
index 0000000..a7d9d8e
--- /dev/null
+++ b/src/students/nechami_brim/JokePage.tsx
@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import styles from "./styles.module.css";
+import { PageProps } from "../../types";
+
+export default function NechamiJokePage({ onBack }: PageProps) {
+  // ניהול הסטייט להצגת הפאנץ' ליין
+  const [showPunchline, setShowPunchline] = useState<boolean>(false);
+
+  return (
+    <div className={styles.page}>
+      <div className={styles.card}>
+        
+        {/* כפתור חזרה (אופציונלי - משתמש ב-onBack שהגיע מה-Props) */}
+        {onBack && (
+          <button onClick={onBack} className={styles.backButton} style={{ float: 'left', cursor: 'pointer' }}>
+            🔙 חזרה
+          </button>
+        )}
+
+        <h3 className={styles.heading}>
+          סיפור אמיתי בצוות פיתוח 💻
+        </h3>
+
+        {/* הודעת הסטאז'ר */}
+        <div className={styles.messageBox}>
+          <strong className={styles.messageTitle}>
+            👶 סטאז'ר בפרקטיקום:
+          </strong>
+          <p className={styles.messageText}>
+            "איך זה הגיוני שהקוד שכתבתי אתמול עבד מעולה, והיום בבוקר בלי שנגעתי בו הוא פתאום לא עובד?"
+          </p>
+        </div>
+
+        {/* כפתור לחשיפת התשובה */}
+        {!showPunchline && (
+          <button onClick={() => setShowPunchline(true)} className={styles.button}>
+            מה המפתח הבכיר ענה? 🤔
+          </button>
+        )}
+
+        {/* תגובת המפתח הבכיר */}
+        {showPunchline && (
+          <div className={styles.punchlineBox}>
+            <strong className={styles.punchlineTitle}>
+              👴 מפתח בכיר (מחייך):
+            </strong>
+            <p className={styles.punchlineText}>
+              "ברוך הבא להייטק. חוק שימור הבאגים אומר: קוד אף פעם לא באמת 'עובד', הוא פשוט לוקח הפסקת קפה לפעמים." ☕
+            </p>
+          </div>
+        )}
+        
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/students/nechami_brim/styles.module.css b/src/students/nechami_brim/styles.module.css
new file mode 100644
index 0000000..90de9ac
--- /dev/null
+++ b/src/students/nechami_brim/styles.module.css
@@ -0,0 +1,210 @@
+ /* ==========================================
+   1. עיצוב עמוד הרקע והכרטיס המלא (DevHumorComponent)
+   ========================================== */
+
+.page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+  padding: 20px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  font-family: system-ui, -apple-system, sans-serif;
+  direction: rtl;
+}
+
+.card {
+  background-color: #ffffff;
+  border-radius: 20px;
+  padding: 30px;
+  width: 100%;
+  max-width: 480px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(0, 0, 0, 0.03);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
+}
+
+.heading {
+  color: #1a202c;
+  font-size: 1.4rem;
+  font-weight: 700;
+  text-align: center;
+  margin-top: 0;
+  margin-bottom: 25px;
+}
+
+.messageBox {
+  background-color: #f7fafc;
+  border-right: 4px solid #3182ce;
+  border-radius: 4px 12px 12px 4px;
+  padding: 16px;
+  margin-bottom: 20px;
+}
+
+.messageTitle {
+  color: #2b6cb0;
+  font-size: 0.95rem;
+  display: block;
+  margin-bottom: 6px;
+}
+
+.messageText {
+  margin: 0;
+  color: #4a5568;
+  font-size: 1.05rem;
+  line-height: 1.6;
+}
+
+.button {
+  width: 100%;
+  padding: 14px;
+  background: linear-gradient(135deg, #3182ce 0%, #2b6cb0 100%);
+  color: #ffffff;
+  border: none;
+  border-radius: 12px;
+  font-size: 1.05rem;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(49, 130, 206, 0.3);
+  transition: all 0.2s ease;
+}
+
+.button:hover {
+  background: linear-gradient(135deg, #2b6cb0 0%, #2c5282 100%);
+  transform: scale(1.01);
+  box-shadow: 0 6px 16px rgba(49, 130, 206, 0.4);
+}
+
+.button:active {
+  transform: scale(0.99);
+}
+
+.punchlineBox {
+  background-color: #f0fff4;
+  border-right: 4px solid #38a169;
+  border-radius: 4px 12px 12px 4px;
+  padding: 16px;
+  margin-top: 20px;
+  animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.punchlineTitle {
+  color: #276749;
+  font-size: 0.95rem;
+  display: block;
+  margin-bottom: 6px;
+}
+
+.punchlineText {
+  margin: 0;
+  color: #2f855a;
+  font-size: 1.05rem;
+  line-height: 1.6;
+  font-style: italic;
+}
+
+/* ==========================================
+   עיצוב משודרג ומניע לפעולה לכרטיס תצוגה מקדימה (NechamiCard)
+   ========================================== */
+
+:global(.joke-card).card {
+  cursor: pointer;
+  padding: 24px;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 20px; /* פינות מעוגלות ומודרניות יותר */
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 140px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+  
+  /* מעבר חלק לכל השינויים (צבע, צל, מיקום) */
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* אפקט ריחוף (Hover) עוצמתי שיוצר תחושה שהכרטיס "קופץ" לקראת המשתמש */
+:global(.joke-card).card:hover {
+  transform: translateY(-6px); /* הכרטיס עולה מעט למעלה */
+  border-color: #3182ce; /* המסגרת הופכת לכחול הייטק */
+  box-shadow: 0 20px 25px -5px rgba(49, 130, 206, 0.1), 0 10px 10px -5px rgba(49, 130, 206, 0.04);
+}
+
+/* הוספת פס צבע דקורטיבי עדין בצד הכרטיס שמשתנה בריחוף */
+:global(.joke-card).card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 5px;
+  background-color: #e2e8f0;
+  transition: background-color 0.3s ease;
+}
+
+:global(.joke-card).card:hover::before {
+  background-color: #3182ce; /* הפס נצבע בכחול בריחוף */
+}
+
+/* עיצוב כותרת הבדיחה */
+.title {
+  color: #1a202c;
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin: 0 0 12px 0;
+  line-height: 1.5;
+  transition: color 0.3s ease;
+}
+
+/* בריחוף על הכרטיס, הכותרת נצבעת בכחול */
+:global(.joke-card).card:hover .title {
+  color: #2b6cb0;
+}
+
+/* עיצוב שורת שם הסטודנט */
+.name {
+  color: #718096;
+  font-size: 0.85rem;
+  font-weight: 600;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between; /* דוחף את השם לימין ואת הרמז לשמאל */
+}
+
+/* הוספת רמז ויזואלי דינמי (חץ קטן) שמופיע רק כשהמשתמש מרחף על הכרטיס */
+.name::after {
+  content: 'קרא עוד ←';
+  font-size: 0.8rem;
+  color: #3182ce;
+  opacity: 0;
+  transform: translateX(10px);
+  transition: all 0.3s ease;
+}
+
+:global(.joke-card).card:hover .name::after {
+  opacity: 1;
+  transform: translateX(0); /* החץ מחליק פנימה בצורה יפה */
+}
+
+/* ==========================================
+   3. אנימציות
+   ========================================== */
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
\ No newline at end of file
diff --git a/src/students/shevi-shapira/Card.tsx b/src/students/shevi-shapira/Card.tsx
new file mode 100644
index 0000000..d3b0995
--- /dev/null
+++ b/src/students/shevi-shapira/Card.tsx
@@ -0,0 +1,14 @@
+import styles from "./styles.module.css";
+import { CardProps } from "../../types";
+
+export default function SheviShapiraCard({ onClick }: CardProps) {
+  return (
+    <div onClick={onClick} className={styles.card}>
+      <div className={styles.cardTitleWithIcon}>
+        <span>🛒</span>
+        <span>אלגוריתם בסופרמרקט</span>
+      </div>
+      <div className={styles.name}>שבי שפירא</div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/students/shevi-shapira/JokePage.tsx b/src/students/shevi-shapira/JokePage.tsx
new file mode 100644
index 0000000..11e4cc5
--- /dev/null
+++ b/src/students/shevi-shapira/JokePage.tsx
@@ -0,0 +1,38 @@
+import styles from "./styles.module.css";
+import { PageProps } from "../../types";
+
+export default function SheviShapiraJokePage({ onBack }: PageProps) {
+  return (
+    <div className={`joke-page ${styles.jokePage}`}>
+      <div className={styles.terminalContainer}>
+        <div className={styles.terminalHeader}>
+          <span className={styles.dot}></span>
+          <span className={styles.dot}></span>
+          <span className={styles.dot}></span>
+          <span className={styles.title}>מערכת הבדיקות - הרצת לוגיקה</span>
+        </div>
+        
+        <div className={styles.terminalBody}>
+          <div className={styles.output}>
+            <p className={styles.setup}>
+              אשתו של מתכנת שולחת אותו לסופר: <br />
+              "תקנה כיכר לחם אחת. ואם יש ביצים — תקנה עשרה".
+            </p>
+          </div>
+
+          <div className={styles.output}>
+            <p className={styles.punchline}>
+              המתכנת חוזר הביתה עם 10 כיכרות לחם. <br />
+              אשתו המומה: "למה קנית עשרה כיכרות לחם?!" <br />
+              המתכנת: "כי היו ביצים". 🥚🫥
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <button onClick={onBack} className={styles.cyberButton}>
+        חזרה לדף הבית
+      </button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/students/shevi-shapira/styles.module.css b/src/students/shevi-shapira/styles.module.css
new file mode 100644
index 0000000..e2be96e
--- /dev/null
+++ b/src/students/shevi-shapira/styles.module.css
@@ -0,0 +1,156 @@
+/* כרטיס תצוגה משודרג בדף הבית - מראה בוגר, נקי והייטקיסטי */
+.card {
+  padding: 30px 24px;
+  background: rgba(255, 255, 255, 0.04); /* רקע שקוף למחצה */
+  backdrop-filter: blur(12px); /* אפקט טשטוש זכוכית */
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.08); /* גבול סמי-שקוף עדין */
+  border-radius: 20px; /* פינות מעוגלות מקצועיות */
+  cursor: pointer;
+  text-align: center;
+  position: relative;
+  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+/* אפקט משיכה יוקרתי בעת מעבר עכבר (Hover) */
+.card:hover {
+  transform: translateY(-6px);
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(168, 85, 247, 0.4); /* נגיעה עדינה של סגול בגבול */
+  box-shadow: 0 12px 30px rgba(168, 85, 247, 0.2); /* הילה סגולה מתוחכמת למטה */
+}
+
+/* כותרת הכרטיס (האייקון והטקסט) */
+.cardTitleWithIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: #ffffff;
+  font-size: 1.4rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin-bottom: 8px;
+}
+
+/* האייקון של העגלה - תנועה קלה ב-Hover */
+.cardTitleWithIcon span:first-child {
+  font-size: 1.5rem;
+  transition: transform 0.3s ease;
+}
+
+.card:hover .cardTitleWithIcon span:first-child {
+  transform: scale(1.1) rotate(-5deg);
+}
+
+/* תת כותרת - שם המפתח */
+.name {
+  color: #94a3b8; /* צבע אפור-כחול אלגנטי */
+  font-size: 1rem;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  transition: color 0.3s ease;
+}
+
+.card:hover .name {
+  color: #c084fc; /* השם נצבע בסגול בהיר מעודן */
+}
+
+/* עמוד הבדיחה - טרמינל נקי */
+.jokePage {
+  background-color: #0b0f19;
+  min-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-family: system-ui, -apple-system, sans-serif;
+  padding: 20px;
+}
+
+.terminalContainer {
+  width: 100%;
+  max-width: 600px;
+  background-color: #020617;
+  border: 1px solid #334155;
+  border-radius: 12px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
+  margin-bottom: 35px;
+  overflow: hidden;
+}
+
+.terminalHeader {
+  background-color: #1e293b;
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.dot:nth-child(1) { background-color: #ef4444; }
+.dot:nth-child(2) { background-color: #eab308; }
+.dot:nth-child(3) { background-color: #22c55e; }
+
+.title {
+  color: #94a3b8;
+  font-size: 0.9rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.terminalBody {
+  padding: 30px;
+  text-align: right;
+  direction: rtl;
+}
+
+.output {
+  margin-bottom: 30px;
+  padding-right: 20px;
+  border-right: 3px solid #475569;
+}
+
+.setup {
+  color: #f8fafc;
+  font-size: 1.3rem;
+  line-height: 1.6;
+}
+
+.punchline {
+  color: #22c55e;
+  font-size: 1.3rem;
+  line-height: 1.6;
+  font-weight: bold;
+}
+
+/* כפתור חזרה מעוצב ומזמין */
+.cyberButton {
+  background: linear-gradient(90deg, #ec4899 0%, #8b5cf6 100%);
+  color: #ffffff;
+  border: none;
+  padding: 14px 32px;
+  font-size: 1.1rem;
+  font-weight: bold;
+  cursor: pointer;
+  border-radius: 50px;
+  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
+  transition: all 0.2s ease;
+}
+
+.cyberButton:hover {
+  transform: scale(1.05);
+  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.5);
+}
\ No newline at end of file
diff --git a/src/students/yael-ordman/Card.tsx b/src/students/yael-ordman/Card.tsx
new file mode 100644
index 0000000..83ad7e7
--- /dev/null
+++ b/src/students/yael-ordman/Card.tsx
@@ -0,0 +1,11 @@
+import styles from "./styles.module.css";
+import { CardProps } from "../../types";
+
+export default function YaelOrdmanCard({ student, onClick }: CardProps) {
+  return (
+    <div onClick={onClick} className={`joke-card ${styles.card}`}>
+      <h2 className={styles.title}>{student.jokeTitle}</h2>
+      <p className={styles.name}>{student.name}</p>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/students/yael-ordman/JokePage.tsx b/src/students/yael-ordman/JokePage.tsx
new file mode 100644
index 0000000..88b1b00
--- /dev/null
+++ b/src/students/yael-ordman/JokePage.tsx
@@ -0,0 +1,12 @@
+import styles from "./styles.module.css";
+import { PageProps } from "../../types";
+
+export default function YaelOrdmanJokePage({ onBack }: PageProps) {
+  return (
+    <div className={`joke-page ${styles.jokePage}`}>
+      <p>מה ההגדרה המילונית של רקורסיה?</p>
+      <p>עיין ערך רקורסיה...</p>
+      <button onClick={onBack}>← חזרה</button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/students/yael-ordman/styles.module.css b/src/students/yael-ordman/styles.module.css
new file mode 100644
index 0000000..2dc35ac
--- /dev/null
+++ b/src/students/yael-ordman/styles.module.css
@@ -0,0 +1,156 @@
+
+.dinoWrapper {
+  position: relative;
+  width: 64px;
+  height: 64px;
+  overflow: visible;
+}
+
+.dinoPixel {
+  position: absolute;
+  left: 32px;
+  top: 0;
+  width: 8px;
+  height: 8px;
+  background: #db2020;
+  box-shadow: 8px 0, 16px 0, -8px 8px, 0 8px, 8px 8px, 16px 8px, 24px 8px,
+    -8px 16px, 8px 16px, 16px 16px, 24px 16px, -8px 24px, 0 24px, 8px 24px,
+    16px 24px, -16px 32px, -8px 32px, 0 32px, 8px 32px, 16px 32px, 24px 32px,
+    -32px 40px, -24px 40px, -16px 40px, -8px 40px, 0 40px, 8px 40px, 16px 40px,
+    24px 40px, -16px 48px, 8px 48px, -16px 56px, -8px 56px, 8px 56px, 16px 56px;
+}
+
+.dinoEye {
+  position: absolute;
+  left: 32px;
+  top: 16px;
+  width: 8px;
+  height: 8px;
+  background: rgb(208, 24, 24);
+}
+
+.dinoDead .dinoEye {
+  background: transparent;
+}
+
+.dinoX {
+  position: absolute;
+  left: 26px;
+  top: 10px;
+  font-family: "Press Start 2P", monospace;
+  font-size: 10px;
+  color: #da1313;
+  line-height: 1;
+}
+
+.scene {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0 1rem;
+  width: 100%;
+  max-width: 340px;
+}
+
+.ground {
+  width: 100%;
+  height: 2px;
+  background: #ffffff;
+  margin-top: 4px;
+}
+
+/* ── Card ── */
+.card {
+  background: #0dcaca;
+  border: 2px solid #0008fb;
+  box-shadow: 4px 4px 0 #0008fb8b;
+  color: #0008fb;
+  font-family: "Press Start 2P", monospace;
+  image-rendering: pixelated;
+  padding-top: 1rem;
+}
+
+.scoreBar {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.55rem;
+  letter-spacing: 1px;
+  margin-bottom: 0.8rem;
+  padding: 0 0.2rem;
+}
+
+.name {
+  font-size: 0.65rem;
+  line-height: 1.6;
+  margin-bottom: 0.8rem;
+}
+
+.title {
+  line-height: 1.8;
+  font-size: 1.2rem;
+  letter-spacing: 3px;
+  margin: 0.4rem;
+}
+
+.press {
+  font-size: 0.45rem;
+  letter-spacing: 1px;
+  color: #0dcaca;
+  animation: blink 1.2s step-start infinite;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+/* ── Joke page ── */
+.jokePage {
+  background: #0dcaca;
+  color: #535353;
+  font-family: "Press Start 2P", monospace;
+}
+
+.sceneDead {
+  margin: 0.5rem 0;
+}
+
+.jokeBox {
+  background: #0db6cc;
+  border: 5px solid #535353;
+  box-shadow: 4px 4px 0 #535353;
+  padding: 1.5rem 2rem;
+  max-width: 480px;
+  width: 90%;
+  text-align: center;
+}
+
+.jokeSetup {
+  font-size: 2rem;
+  line-height: 2;
+  margin-bottom: 1rem;
+}
+
+.jokePunchline {
+  font-size: 1.8rem;
+  line-height: 2;
+  border-top: 2px solid #535353;
+  padding-top: 0.8rem;
+}
+
+.backBtn {
+  background: #535353;
+  color: #f7f7f7;
+  border: none;
+  padding: 0.8rem 1.8rem;
+  font-family: "Press Start 2P", monospace;
+  font-size: 0.65rem;
+  letter-spacing: 2px;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.backBtn:hover {
+  background: #333;
+}
diff --git a/src/students/yael-shitrit/Card.tsx b/src/students/yael-shitrit/Card.tsx
new file mode 100644
index 0000000..cab7d55
--- /dev/null
+++ b/src/students/yael-shitrit/Card.tsx
@@ -0,0 +1,13 @@
+import styles from "./styles.module.css";
+import { CardProps } from "../../types";
+
+export default function YaelShitritCard({ student, onClick }: CardProps) {
+  return (
+    <div onClick={onClick} className={`joke-card ${styles.card}`}>
+      <div className={styles.avatar}>🐻</div>
+      <h2 className={styles.title}>{student.jokeTitle}</h2>
+      <p className={styles.name}>{student.name}</p>
+      <span className={styles.badge}>לחצי לצחוק</span>
+    </div>
+  );
+}
diff --git a/src/students/yael-shitrit/JokePage.tsx b/src/students/yael-shitrit/JokePage.tsx
new file mode 100644
index 0000000..1bed970
--- /dev/null
+++ b/src/students/yael-shitrit/JokePage.tsx
@@ -0,0 +1,19 @@
+import styles from "./styles.module.css";
+import { PageProps } from "../../types";
+
+export default function YaelShitritJokePage({ onBack }: PageProps) {
+  return (
+    <div className={`joke-page ${styles.jokePage}`}>
+      <div className={styles.jokeHeader}>
+        <span className={styles.bigEmoji}>🐻</span>
+      </div>
+      <div className={styles.jokeCard}>
+        <h2>למה הדוב לא משתמש במחשב?</h2>
+        <p>כי הוא מפחד מהעכבר! 🐭</p>
+      </div>
+      <button className={styles.backBtn} onClick={onBack}>
+        → חזרה
+      </button>
+    </div>
+  );
+}
diff --git a/src/students/yael-shitrit/styles.module.css b/src/students/yael-shitrit/styles.module.css
new file mode 100644
index 0000000..d70b8b2
--- /dev/null
+++ b/src/students/yael-shitrit/styles.module.css
@@ -0,0 +1,85 @@
+.card {
+  background: linear-gradient(160deg, #fff8e7 0%, #ffe0a3 100%);
+  border: 3px solid #f5a623;
+  box-shadow: 0 6px 20px rgba(245, 166, 35, 0.35);
+}
+
+.avatar {
+  font-size: 3rem;
+  margin-bottom: 0.5rem;
+}
+
+.title {
+  font-size: 1.4rem;
+  color: #7a4800;
+  margin-bottom: 0.4rem;
+}
+
+.name {
+  font-size: 1rem;
+  color: #5a3400;
+  margin-bottom: 1rem;
+}
+
+.badge {
+  display: inline-block;
+  background: #f5a623;
+  color: #fff;
+  border-radius: 20px;
+  padding: 0.3rem 1rem;
+  font-size: 0.85rem;
+  font-weight: bold;
+}
+
+.jokePage {
+  background: linear-gradient(135deg, #fff3cd, #ffd77a);
+}
+
+.jokeHeader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.bigEmoji {
+  font-size: 5rem;
+}
+
+.jokeCard {
+  background: #fff;
+  border-radius: 20px;
+  padding: 2rem 2.5rem;
+  max-width: 500px;
+  width: 100%;
+  text-align: center;
+  box-shadow: 0 8px 24px rgba(245, 166, 35, 0.3);
+  color: #5a3400;
+}
+
+.jokeCard h2 {
+  font-size: 1.3rem;
+  margin-bottom: 0.6rem;
+}
+
+.jokeCard p {
+  font-size: 1.4rem;
+  line-height: 1.6;
+  margin-top: 0.8rem;
+}
+
+.backBtn {
+  background: #f5a623;
+  color: #fff;
+  border: none;
+  border-radius: 30px;
+  padding: 0.7rem 2rem;
+  font-size: 1rem;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.backBtn:hover {
+  background: #d4891a;
+}