diff --git a/_includes/nav/doodle.html b/_includes/nav/doodle.html
new file mode 100644
index 00000000..afce2a5d
--- /dev/null
+++ b/_includes/nav/doodle.html
@@ -0,0 +1,8 @@
+<table>
+    <tr>
+        <td><a href="{{site.baseurl}}/create_and_compete/doodle">Drawing Pad</a></td>
+        <td><a href="{{site.baseurl}}/moderation/chat_doodle/">Chat Room</a></td>
+        <td><a href="{{site.baseurl}}/moderation/artpost_doodle/">Artpost</a></td>
+        <td><a href="{{site.baseurl}}/moderation/gallery_doodle/">Gallery</a></td>
+    </tr>
+</table>
\ No newline at end of file
diff --git a/navigation/create_and_compete/doodle-artpost.md b/navigation/create_and_compete/doodle-artpost.md
index 2557ff5e..25114a32 100644
--- a/navigation/create_and_compete/doodle-artpost.md
+++ b/navigation/create_and_compete/doodle-artpost.md
@@ -2,13 +2,11 @@
 layout: post 
 title: Create and Compete - Doodle
 search_exclude: true
+menu: nav/doodle.html
 permalink: /moderation/artpost_doodle/
 author: Alex, Arshia, Prajna, and Mirabelle 
 ---
 
-
-<!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -34,7 +32,7 @@ author: Alex, Arshia, Prajna, and Mirabelle
             width: 100%;
         }
         .photo-container {
-            background: white;
+            background: purple;
             margin: 10px;
             padding: 10px;
             border-radius: 5px;
@@ -125,4 +123,4 @@ author: Alex, Arshia, Prajna, and Mirabelle
         });
     </script>
 </body>
-</html>
+
diff --git a/navigation/create_and_compete/doodle-chat.md b/navigation/create_and_compete/doodle-chat.md
index cae86b49..e9323a78 100644
--- a/navigation/create_and_compete/doodle-chat.md
+++ b/navigation/create_and_compete/doodle-chat.md
@@ -2,100 +2,251 @@
 layout: post
 title: Chat Room for Doodle
 description: Chat freely with everyone
+menu: nav/doodle.html
 permalink: /moderation/chat_doodle/
 author: Arshia, Prajna, Mirabelle, Alex
 ---
 
+
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Chat Room</title>
   <style>
-    /* Basic styling */
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      font-family: Arial, sans-serif;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: #f3f0fa;
+      height: 100vh;
+      margin: 0;
+    }
+    #mainContainer {
+      width: 100vw;
+      height: 100vh;
+      display: flex;
+      box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
+      position: relative;
+      transition: all 0.3s;
+    }
+    #sidebar {
+      width: 30%;
+      background-color: #e6e1f7;
+      border-right: 1px solid #ccc;
+      padding: 15px;
+      overflow-y: auto;
+    }
+    .chatBox {
+      padding: 12px;
+      border-bottom: 1px solid #d1c7f0;
+      cursor: pointer;
+      border-radius: 8px;
+      transition: background-color 0.3s;
+    }
+    .chatBox:hover {
+      background-color: #d8cff6;
+    }
+    .chatBox h3 {
+      margin: 0;
+      font-size: 16px;
+      color: #5a4b91;
+    }
+    .chatBox p {
+      margin: 4px 0 0;
+      color: #836fa9;
+      font-size: 14px;
+    }
     #chatContainer {
-      width: 150%;
-      max-width: 600px;
-      margin: 20px auto;
-      padding: 10px;
-      border: 1px solid #ccc;
+      flex: 1;
+      padding: 15px;
+      background-color: #ffffff;
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      transition: all 0.3s;
+    }
+    #doodleImage {
+      width: 100%;
+      max-height: 200px;
       border-radius: 8px;
-      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+      margin-bottom: 15px;
+      object-fit: cover;
+      border: 2px solid #a38cd9;
     }
     #messages {
-      height: 300px;
-      overflow-y: scroll;
-      border: 1px solid #ddd;
-      padding: 10px;
+      flex: 1;
+      overflow-y: auto;
+      border: 1px solid #d1c7f0;
+      padding: 15px;
       border-radius: 8px;
-      margin-bottom: 10px;
+      margin-bottom: 15px;
+      background-color: #f8f6fc;
     }
     .message {
-        margin: 5px 0;
-      padding: 5px;
-        border-radius: 5px;
-         background-color: #d0e6f5; /* Light blue background for messages */
-        color: #333; /* Darker text color for readability */
+      margin: 8px 0;
+      padding: 10px;
+      border-radius: 10px;
+      background-color: #d8cff6;
+      color: #333;
+      font-size: 15px;
+      max-width: 80%;
+    }
+    .message:nth-child(odd) {
+      background-color: #a38cd9;
+      color: white;
     }
     #inputContainer {
       display: flex;
     }
     #inputMessage {
       flex: 1;
-      padding: 8px;
+      padding: 12px;
       font-size: 16px;
-      border: 1px solid #ddd;
-      border-radius: 4px;
+      border: 1px solid #d1c7f0;
+      border-radius: 8px;
+      margin-right: 8px;
     }
     #sendButton {
-      padding: 8px 12px;
-      margin-left: 5px;
+      padding: 12px 16px;
       font-size: 16px;
-      background-color: #28a745;
+      background-color: #6c51a4;
+      color: white;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: background-color 0.3s;
+    }
+    #sendButton:hover {
+      background-color: #533b8a;
+    }
+
+    /* Fullscreen button styling */
+    #fullscreenButton, #exitFullscreenButton {
+      position: absolute;
+      top: 15px;
+      right: 15px;
+      background-color: #6c51a4;
       color: white;
       border: none;
-      border-radius: 4px;
+      border-radius: 50%;
+      padding: 8px;
+      font-size: 16px;
       cursor: pointer;
+      transition: background-color 0.3s;
+      z-index: 100;
+    }
+    #fullscreenButton:hover, #exitFullscreenButton:hover {
+      background-color: #533b8a;
+    }
+    #exitFullscreenButton {
+      display: none;
+    }
+    .fullscreen #mainContainer {
+      width: 100vw;
+      height: 100vh;
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 200;
+      background-color: #ffffff;
+    }
+    .fullscreen #fullscreenButton {
+      display: none;
+    }
+    .fullscreen #exitFullscreenButton {
+      display: block;
     }
   </style>
 </head>
 <body>
 
-<div id="chatContainer">
-  <h2>Chat Room</h2>
-  <div id="messages"></div>
-  <div id="inputContainer">
-    <input type="text" id="inputMessage" placeholder="Type a message..." />
-    <button id="sendButton">Send</button>
+<div id="mainContainer">
+  <div id="sidebar">
+    <div class="chatBox" onclick="loadConversation('Alex')">
+      <h3>Alex</h3>
+      <p>"Check out this doodle!"</p>
+    </div>
+    <div class="chatBox" onclick="loadConversation('Prajna')">
+      <h3>Prajna</h3>
+      <p>"I tried a new shading technique!"</p>
+    </div>
+    <div class="chatBox" onclick="loadConversation('Arshia')">
+      <h3>Arshia</h3>
+      <p>"Let’s brainstorm more ideas!"</p>
+    </div>
+    <div class="chatBox" onclick="loadConversation('Mirabelle')">
+      <h3>Mirabelle</h3>
+      <p>"Look at the details on this one!"</p>
+    </div>
   </div>
+
+  <div id="chatContainer">
+    <img id="doodleImage" src="https://via.placeholder.com/400" alt="Doodle Image">
+    <div id="messages"></div>
+    <div id="inputContainer">
+      <input type="text" id="inputMessage" placeholder="Type a message..." />
+      <button id="sendButton">Send</button>
+    </div>
+  </div>
+  <button id="fullscreenButton" onclick="toggleFullscreen()">&#x26F6;</button>
+  <button id="exitFullscreenButton" onclick="toggleFullscreen()">X</button>
 </div>
 
 <script>
-  // Simple front-end chat function
   const messages = document.getElementById('messages');
   const inputMessage = document.getElementById('inputMessage');
   const sendButton = document.getElementById('sendButton');
+  const doodleImage = document.getElementById('doodleImage');
+  const mainContainer = document.getElementById('mainContainer');
+
+  const conversations = {
+    'Alex': ["Alex: Check out this doodle!", "You: Wow! Did you use ink?", "Alex: Yes, and some shading too."],
+    'Prajna': ["Prajna: I tried a new shading technique!", "You: Looks amazing! It adds depth.", "Prajna: Thanks! I've been practicing!"],
+    'Arshia': ["Arshia: Let’s brainstorm more ideas!", "You: How about some abstract doodles?", "Arshia: Great idea! I'll sketch something."],
+    'Mirabelle': ["Mirabelle: Look at the details on this one!", "You: That’s so intricate!", "Mirabelle: Thanks! It took ages."]
+  };
 
-  function addMessage(message, sender = "You") {
+  function loadConversation(chatName) {
+    messages.innerHTML = '';
+    const chatMessages = conversations[chatName] || [];
+    doodleImage.src = "https://via.placeholder.com/400"; // Replace with specific images per chat if available
+
+    chatMessages.forEach((msg) => {
+      addMessage(msg);
+    });
+  }
+
+  function addMessage(message) {
     const messageDiv = document.createElement('div');
     messageDiv.classList.add('message');
-    messageDiv.textContent = `${sender}: ${message}`;
+    messageDiv.textContent = message;
     messages.appendChild(messageDiv);
-    messages.scrollTop = messages.scrollHeight; // Auto-scroll
+    messages.scrollTop = messages.scrollHeight;
   }
 
   sendButton.addEventListener('click', () => {
     const messageText = inputMessage.value.trim();
     if (messageText) {
-      addMessage(messageText);  // Display the message
-      inputMessage.value = '';  // Clear the input field
+      addMessage(`You: ${messageText}`);
+      inputMessage.value = '';
     }
   });
 
   inputMessage.addEventListener('keypress', (e) => {
-    if (e.key === 'Enter') sendButton.click(); // Send on Enter key press
+    if (e.key === 'Enter') sendButton.click();
   });
+
+  function toggleFullscreen() {
+    document.body.classList.toggle('fullscreen');
+  }
+
+  loadConversation('Alex');
 </script>
 
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/navigation/create_and_compete/doodle-competition.md b/navigation/create_and_compete/doodle-drawpad.md
similarity index 57%
rename from navigation/create_and_compete/doodle-competition.md
rename to navigation/create_and_compete/doodle-drawpad.md
index deff95ad..9723f571 100644
--- a/navigation/create_and_compete/doodle-competition.md
+++ b/navigation/create_and_compete/doodle-drawpad.md
@@ -1,18 +1,23 @@
 ---
-layout: post 
-title: Create and Compete - Doodle Game UI
-search_exclude: true
-permalink: /moderation/doodle_competition/
+layout: post
+title: Gallery for Doodle
+description: Showcase a gallery of all your doodles
+menu: nav/doodle.html
+permalink: /moderation/drawpad_doodle/
 author: Arshia, Prajna, Mirabelle, Alex
 ---
 
+
+
+</details>
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Drawing Canvas</title>
     <style>
         body { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; margin: 0; }
-        canvas { border: 2px solid #444; cursor: crosshair; margin-top: 10px; }
+        canvas { border: 2px solid #7573e6; cursor: crosshair; margin-top: 10px; }
         .color-button {
             width: 30px;
             height: 30px;
@@ -24,17 +29,6 @@ author: Arshia, Prajna, Mirabelle, Alex
 </head>
 <body>
 
-<div>
-    <button onclick="clearCanvas()" style="font-size: 18px; background-color: #ad3636; padding: 10px 20px; color: white;">Clear Drawing</button>
-    <div style="margin-top: 10px;">
-        <button class="color-button" style="background-color: #333;" onclick="changeColor('#333')"></button>
-        <button class="color-button" style="background-color: #ff0000;" onclick="changeColor('#ff0000')"></button>
-        <button class="color-button" style="background-color: #008000;" onclick="changeColor('#008000')"></button>
-        <button class="color-button" style="background-color: #0000ff;" onclick="changeColor('#0000ff')"></button>
-        <button class="color-button" style="background-color: #ffa500;" onclick="changeColor('#ffa500')"></button>
-    </div>
-</div>
-
 <canvas id="drawingCanvas" width="600" height="400"></canvas>
 
 <script>
@@ -74,6 +68,32 @@ author: Arshia, Prajna, Mirabelle, Alex
     function changeColor(color) {
         currentColor = color;
     }
+        function downloadDrawing() {
+        const link = document.createElement('a');
+        link.download = 'my_drawing.png'; 
+        link.href = canvas.toDataURL();  
+        link.click();
+    }
+    
 </script>
 
+<div>
+    <button onclick="clearCanvas()" style="font-size: 18px; background-color: #ad3636; padding: 10px 20px; color: white;">Clear Drawing</button>
+</div>
+
+<div style="margin-top: 10px;">
+        <button style="background-color: #524e4e!important;  display:inline-block" onclick="changeColor('#524e4e')">Black</button>
+        <button style="background-color: #3a63e8!important;  display:inline-block" onclick="changeColor('#3a63e8')">Blue</button>
+        <button style="background-color: #3c7d2c!important;  display:inline-block" onclick="changeColor('#3c7d2c')">Green</button>
+        <button style="background-color: #992222!important;  display:inline-block" onclick="changeColor('#992222')">Red</button>
+        <button style="background-color: #db74db!important;  display:inline-block" onclick="changeColor('#db74db')">Pink</button>
+</div>
+
 </body>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Doodle Animation</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
diff --git a/navigation/create_and_compete/doodle-gallery.md b/navigation/create_and_compete/doodle-gallery.md
new file mode 100644
index 00000000..f29a9eb1
--- /dev/null
+++ b/navigation/create_and_compete/doodle-gallery.md
@@ -0,0 +1,89 @@
+---
+layout: post
+title: Voting for Doodles 
+description: Vote for your favorite doodles 
+menu: nav/doodle.html
+permalink: /moderation/gallery_doodle/
+author: Arshia, Prajna, Mirabelle, Alex
+---
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Voting Page</title>
+    <style>
+        /* Styling for the page background and layout */
+        body {
+            background-color: #f2e6ff;
+            font-family: Arial, sans-serif;
+            color: #4d004d;
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+            align-items: center;
+            margin: 0;
+            padding: 20px;
+        }
+        /* Container for each image */
+        .image-container {
+            border: 2px solid #a64dff;
+            border-radius: 10px;
+            padding: 15px;
+            margin: 20px;
+            background-color: #e0b3ff;
+            text-align: center;
+            width: 250px;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+        }
+        /* Styling for images */
+        .image-container img {
+            max-width: 100%;
+            border-radius: 10px;
+        }
+        /* Vote button styling */
+        .vote-button {
+            background-color: #d966ff;
+            color: #fff;
+            border: none;
+            padding: 10px 15px;
+            border-radius: 8px;
+            margin-top: 10px;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        /* Vote button hover effect */
+        .vote-button:hover {
+            background-color: #9900cc;
+        }
+        /* Vote count styling */
+        .vote-count {
+            margin-top: 10px;
+            font-weight: bold;
+            font-size: 1.2rem;
+        }
+    </style>
+</head>
+<body>
+    <h1>Vote for Your Favorite Image!</h1>
+    <!-- Example of an image container -->
+    <div class="image-container">
+        <img src="data:image/jpeg;base64,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" alt="Sample Image 1">
+        <div class="vote-count">Votes: <span id="voteCount1">0</span></div>
+        <button class="vote-button" onclick="addVote('voteCount1')">Vote</button>
+    </div>
+    <!-- Add more images like the one above, with unique IDs -->
+    <div class="image-container">
+        <img src="data:image/jpeg;base64,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" alt="Sample Image 2">
+        <div class="vote-count">Votes: <span id="voteCount2">0</span></div>
+        <button class="vote-button" onclick="addVote('voteCount2')">Vote</button>
+    </div>
+    <!-- JavaScript to handle vote counting -->
+    <script>
+        function addVote(voteId) {
+            const voteElement = document.getElementById(voteId);
+            let currentVotes = parseInt(voteElement.innerText);
+            voteElement.innerText = currentVotes + 1;
+        }
+    </script>
+</body>
diff --git a/navigation/create_and_compete/doodle.md b/navigation/create_and_compete/doodle.md
index 2c2399a9..d33bf007 100644
--- a/navigation/create_and_compete/doodle.md
+++ b/navigation/create_and_compete/doodle.md
@@ -3,7 +3,7 @@ layout: post
 title: Create and Compete - Doodle
 search_exclude: true
 permalink: /create_and_compete/doodle
-menu: nav/create_and_compete.html
+menu: nav/doodle.html
 author: Alex, Arshia, Prajna, and Mirabelle 
 ---
 
@@ -12,19 +12,109 @@ author: Alex, Arshia, Prajna, and Mirabelle
 
 <a href="{{site.baseurl}}/moderation/rules_doodle/">Moderation Rules</a>
 
-<p> 
-The page is a place where people can explore themselves creatively and compete to see who has the best doodle. This allows for players to collaborate over their artistic abilities. Our room includes a chat room where players can converse about their creations, a doodle compete area, a place where people can post their art, and winners get crowned every week. This will help add to our classes page by making a fun artistic environment where everyone can collaborate. </p>
+<p> The page is a place where people can explore themselves creatively and compete to see who has the best doodle. This allows for players to collaborate over their artistic abilities. Our room includes a chat room where players can converse about their creations, a doodle compete area, a place where people can post their art, and winners get crowned every week. This will help add to our classes page by making a fun artistic environment where everyone can collaborate. </p>
 
-</details>
 
 <a href="{{site.baseurl}}/moderation/chat_doodle/" style="padding: 10px 20px; font-size: 16px; background-color: #7573e6; color: white; border: none; border-radius: 5px; text-decoration: none; display: inline-block;">
   Chat Room
 </a>
 
-<a href="{{site.baseurl}}/moderation/doodle_competition/" style="padding: 10px 20px; font-size: 16px; background-color: #7573e6; color: white; border: none; border-radius: 5px; text-decoration: none; display: inline-block;">
-  Competition Room
-</a>
-
 <a href="{{site.baseurl}}/moderation/artpost_doodle/" style="padding: 10px 20px; font-size: 16px; background-color: #7573e6; color: white; border: none; border-radius: 5px; text-decoration: none; display: inline-block;">
-  Competition
+  Art Post
 </a>
+
+
+</details>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Drawing Canvas</title>
+    <style>
+        body { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; margin: 0; }
+        canvas { border: 2px solid #7573e6; cursor: crosshair; margin-top: 10px; }
+        .color-button {
+            width: 30px;
+            height: 30px;
+            border: none;
+            margin: 2px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+
+<canvas id="drawingCanvas" width="600" height="400"></canvas>
+
+<script>
+    const canvas = document.getElementById('drawingCanvas');
+    const ctx = canvas.getContext('2d');
+    let drawing = false;
+    let currentColor = '#ad3636';
+
+    canvas.addEventListener('mousedown', startDrawing);
+    canvas.addEventListener('mouseup', stopDrawing);
+    canvas.addEventListener('mousemove', draw);
+
+    function startDrawing(event) {
+        drawing = true;
+        ctx.beginPath();
+        ctx.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
+    }
+
+    function stopDrawing() {
+        drawing = false;
+        ctx.closePath();
+    }
+
+    function draw(event) {
+        if (!drawing) return;
+        ctx.lineWidth = 5;
+        ctx.lineCap = 'round';
+        ctx.strokeStyle = currentColor;
+        ctx.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
+        ctx.stroke();
+    }
+
+    function clearCanvas() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+    }
+
+    function changeColor(color) {
+        currentColor = color;
+    }
+
+    function downloadDrawing() {
+    const link = document.createElement('a');
+    link.download = 'my_drawing.png'; 
+    link.href = canvas.toDataURL();  
+    link.click();
+    }
+    
+</script>
+
+<div style="margin-top: 10px;">
+        <button style="background-color: #524e4e!important;  display:inline-block" onclick="changeColor('#524e4e')">Black</button>
+        <button style="background-color: #3a63e8!important;  display:inline-block" onclick="changeColor('#3a63e8')">Blue</button>
+        <button style="background-color: #3c7d2c!important;  display:inline-block" onclick="changeColor('#3c7d2c')">Green</button>
+        <button style="background-color: #452b2b!important;  display:inline-block" onclick="changeColor('#452b2b')">Brown</button>
+        <button style="background-color: #db74db!important;  display:inline-block" onclick="changeColor('#db74db')">Pink</button>
+</div>
+
+<div>
+    <button onclick="clearCanvas()" style="font-size: 18px; background-color: #ad3636; padding: 10px 20px; color: white;">Clear Drawing</button>
+</div>
+
+<div>
+    <button onclick="downloadDrawing()" style="font-size: 18px; background-color: #ad3636; padding: 10px 20px; color: white;">Save Your Work!</button>
+</div>
+
+
+</body>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Doodle Animation</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
diff --git a/navigation/create_and_compete/home.md b/navigation/create_and_compete/home.md
index c3424f29..60522972 100644
--- a/navigation/create_and_compete/home.md
+++ b/navigation/create_and_compete/home.md
@@ -57,3 +57,9 @@ menu: nav/create_and_compete.html
     The **Zoom in Guess** is all about testing your attention to detail and having fun with friends. In this game, you look at a super close-up photo and try to guess who or what it is based on the small details you can see. Players can make their guesses, explain why they think they’re right, and submit their answers. You can also share your own zoomed-in images for others to guess and rate how tricky each image is. With the "guess and explain" theme, players can see what others guessed, react to answers, and share their thoughts, making it a fun space for friendly competition and conversation. <a href="{{site.baseurl}}/create_and_compete/zoominguess">Our page!</a> Presented to you by Arhaan, Mihir, Akshaj, and Keerthan
 </div>
 
+<div class="group-theme">
+    **Doodle Game!** 
+    The **Doodle Game** is a place where people can explore themselves creatively and compete to see who has the best doodle. This allows for players to collaborate over their artistic abilities. Our room includes a chat room where players can converse about their creations, a doodle compete area, a place where people can post their art, and winners get crowned every week. This will help add to our classes page by making a fun artistic environment where everyone can collaborate. <a href="{{site.baseurl}}/create_and_compete/doodle">Our page!</a> Coded by Arshia Deb Roy, Prajna Raj, Mirabelle Anderson, Alex Rubio
+</div>
+
+
