diff --git a/_includes/nav/share_and_care.html b/_includes/nav/share_and_care.html
index 74627a52..dc5c1699 100644
--- a/_includes/nav/share_and_care.html
+++ b/_includes/nav/share_and_care.html
@@ -3,6 +3,7 @@
         <td><a href="{{site.baseurl}}/chess/home">Chess Forum</a></td>
         <td><a href="{{site.baseurl}}/share_and_care/revvit">Revvit</a></td>
         <td><a href="{{site.baseurl}}/UndgdMusic/">Underground Music</a></td>
-        <td><a href="{{site.baseurl}}/dnhscafe">DNHS Cafe</a></td>    
+        <td><a href="{{site.baseurl}}/dnhscafe">DNHS Cafe</a></td>   
+        <td><a href="{{site.baseurl}}/share_and_care/hungry_games">Hungry Games</a></td>
     </tr>
 </table>
diff --git a/navigation/create_and_compete/doodle-artpost.md b/navigation/create_and_compete/doodle-artpost.md
new file mode 100644
index 00000000..2557ff5e
--- /dev/null
+++ b/navigation/create_and_compete/doodle-artpost.md
@@ -0,0 +1,128 @@
+---
+layout: post 
+title: Create and Compete - Doodle
+search_exclude: true
+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">
+    <title>Photo Posting App</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            background-color: #f0f0f0;
+        }
+        h1 {
+            margin: 20px 0;
+        }
+        form {
+            margin-bottom: 20px;
+        }
+        #gallery {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 100%;
+        }
+        .photo-container {
+            background: white;
+            margin: 10px;
+            padding: 10px;
+            border-radius: 5px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            width: 300px;
+            text-align: center;
+        }
+        img {
+            max-width: 100%;
+            border-radius: 5px;
+        }
+        .comments {
+            margin-top: 10px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Photo Posting App</h1>
+    <form id="uploadForm">
+        <input type="text" id="photoUrl" placeholder="Enter photo URL" required>
+        <input type="text" id="comment" placeholder="Enter a comment" required>
+        <button type="submit">Post</button>
+    </form>
+    <div id="gallery"></div>
+    <script>
+        const form = document.getElementById('uploadForm');
+        const gallery = document.getElementById('gallery');
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const photoUrl = document.getElementById('photoUrl').value;
+            const commentText = document.getElementById('comment').value;
+            // Create photo container
+            const photoContainer = document.createElement('div');
+            photoContainer.className = 'photo-container';
+            // Create image element
+            const img = document.createElement('img');
+            img.src = photoUrl;
+            photoContainer.appendChild(img);
+            // Create comments section
+            const commentsDiv = document.createElement('div');
+            commentsDiv.className = 'comments';
+            commentsDiv.innerHTML = `<p>${commentText}</p>`;
+            photoContainer.appendChild(commentsDiv);
+            // Append photo container to gallery
+            gallery.appendChild(photoContainer);
+            // Clear the form
+            form.reset();
+        });
+    </script>
+    <script>
+        const express = require('express');
+        const mongoose = require('mongoose');
+        const cors = require('cors');
+        const http = require('http');
+        const { parse } = require('url');
+        // Initialize app
+        const app = express();
+        app.use(cors());
+        app.use(express.json());
+        app.use(express.static('.'));
+        // MongoDB connection
+        mongoose.connect('mongodb://localhost/photo-sharing', {
+            useNewUrlParser: true,
+            useUnifiedTopology: true,
+        });
+        // Photo model
+        const photoSchema = new mongoose.Schema({
+            imageUrl: String,
+            comment: String,
+        });
+        const Photo = mongoose.model('Photo', photoSchema);
+        // Routes
+        app.post('/upload', async (req, res) => {
+            const { photoUrl, comment } = req.body;
+            const photo = new Photo({ imageUrl: photoUrl, comment });
+            await photo.save();
+            res.json(photo);
+        });
+        app.get('/photos', async (req, res) => {
+            const photos = await Photo.find();
+            res.json(photos);
+        });
+        // Start server
+        const server = http.createServer(app);
+        const PORT = process.env.PORT || 3000;
+        server.listen(PORT, () => {
+            console.log(`Server is running on http://localhost:${PORT}`);
+        });
+    </script>
+</body>
+</html>
diff --git a/navigation/create_and_compete/doodle-chat.md b/navigation/create_and_compete/doodle-chat.md
new file mode 100644
index 00000000..cae86b49
--- /dev/null
+++ b/navigation/create_and_compete/doodle-chat.md
@@ -0,0 +1,101 @@
+---
+layout: post
+title: Chat Room for Doodle
+description: Chat freely with everyone
+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 */
+    #chatContainer {
+      width: 150%;
+      max-width: 600px;
+      margin: 20px auto;
+      padding: 10px;
+      border: 1px solid #ccc;
+      border-radius: 8px;
+      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    }
+    #messages {
+      height: 300px;
+      overflow-y: scroll;
+      border: 1px solid #ddd;
+      padding: 10px;
+      border-radius: 8px;
+      margin-bottom: 10px;
+    }
+    .message {
+        margin: 5px 0;
+      padding: 5px;
+        border-radius: 5px;
+         background-color: #d0e6f5; /* Light blue background for messages */
+        color: #333; /* Darker text color for readability */
+    }
+    #inputContainer {
+      display: flex;
+    }
+    #inputMessage {
+      flex: 1;
+      padding: 8px;
+      font-size: 16px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+    }
+    #sendButton {
+      padding: 8px 12px;
+      margin-left: 5px;
+      font-size: 16px;
+      background-color: #28a745;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+  </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>
+</div>
+
+<script>
+  // Simple front-end chat function
+  const messages = document.getElementById('messages');
+  const inputMessage = document.getElementById('inputMessage');
+  const sendButton = document.getElementById('sendButton');
+
+  function addMessage(message, sender = "You") {
+    const messageDiv = document.createElement('div');
+    messageDiv.classList.add('message');
+    messageDiv.textContent = `${sender}: ${message}`;
+    messages.appendChild(messageDiv);
+    messages.scrollTop = messages.scrollHeight; // Auto-scroll
+  }
+
+  sendButton.addEventListener('click', () => {
+    const messageText = inputMessage.value.trim();
+    if (messageText) {
+      addMessage(messageText);  // Display the message
+      inputMessage.value = '';  // Clear the input field
+    }
+  });
+
+  inputMessage.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') sendButton.click(); // Send on Enter key press
+  });
+</script>
+
+</body>
+</html>
diff --git a/navigation/create_and_compete/doodle-competition.md b/navigation/create_and_compete/doodle-competition.md
new file mode 100644
index 00000000..deff95ad
--- /dev/null
+++ b/navigation/create_and_compete/doodle-competition.md
@@ -0,0 +1,79 @@
+---
+layout: post 
+title: Create and Compete - Doodle Game UI
+search_exclude: true
+permalink: /moderation/doodle_competition/
+author: Arshia, Prajna, Mirabelle, Alex
+---
+
+<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; }
+        .color-button {
+            width: 30px;
+            height: 30px;
+            border: none;
+            margin: 2px;
+            cursor: pointer;
+        }
+    </style>
+</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>
+    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;
+    }
+</script>
+
+</body>
diff --git a/navigation/create_and_compete/doodle.md b/navigation/create_and_compete/doodle.md
index 93857a1a..2c2399a9 100644
--- a/navigation/create_and_compete/doodle.md
+++ b/navigation/create_and_compete/doodle.md
@@ -15,4 +15,16 @@ author: Alex, Arshia, Prajna, and Mirabelle
 <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>
\ No newline at end of file
+</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
+</a>
diff --git a/navigation/create_and_compete/scripted.js b/navigation/create_and_compete/scripted.js
new file mode 100644
index 00000000..195c6fc9
--- /dev/null
+++ b/navigation/create_and_compete/scripted.js
@@ -0,0 +1,91 @@
+// Array of zoomed-in image URLs
+const imageList = [
+    "zoomed-image1.jpg",
+    "zoomed-image2.jpg",
+    "zoomed-image3.jpg"
+ 
+ 
+    // Add more image URLs as needed
+ ];
+ 
+ 
+ // Wait for the DOM to load before accessing elements
+ document.addEventListener("DOMContentLoaded", function() {
+    // Elements
+    const zoomedImage = document.getElementById("zoomed-image");
+    const generateImageButton = document.getElementById("generate-image");
+    const submitGuessButton = document.getElementById("submit-guess");
+    const guessInput = document.getElementById("guess-input");
+    const reasoningInput = document.getElementById("reasoning-input");
+    const feedbackDisplay = document.getElementById("feedback-display");
+    const feedbackModal = document.getElementById("feedback-modal");
+    const closeButton = document.querySelector(".close-button");
+ 
+ 
+    // Generate Random Image
+    generateImageButton.addEventListener("click", function() {
+        const randomIndex = Math.floor(Math.random() * imageList.length);
+        const selectedImage = imageList[randomIndex];
+        zoomedImage.src = selectedImage;
+        zoomedImage.alt = "Zoomed in image for guessing";
+        feedbackDisplay.innerHTML = ""; // Clear previous feedback on new image generation
+    });
+ 
+ 
+    // Submit Guess and Reasoning
+    submitGuessButton.addEventListener("click", function() {
+        const guess = guessInput.value.trim();
+        const reasoning = reasoningInput.value.trim();
+ 
+ 
+        if (guess === "" || reasoning === "") {
+            alert("Please enter both your guess and reasoning.");
+            return;
+        }
+ 
+ 
+        // Display the guess and reasoning
+        feedbackDisplay.innerHTML = `
+            <h3>Your Guess:</h3>
+            <p><strong>Guess:</strong> ${guess}</p>
+            <p><strong>Reasoning:</strong> ${reasoning}</p>
+        `;
+ 
+ 
+        // Show modal confirmation
+        feedbackModal.style.display = "block";
+ 
+ 
+        // Reset input fields
+        guessInput.value = "";
+        reasoningInput.value = "";
+    });
+ 
+ 
+    // Close Modal
+    closeButton.addEventListener("click", function() {
+        feedbackModal.style.display = "none";
+    });
+ 
+ 
+    // Close Modal when clicking outside of it
+    window.addEventListener("click", function(event) {
+        if (event.target == feedbackModal) {
+            feedbackModal.style.display = "none";
+        }
+    });
+ 
+ 
+    // Placeholder function to update the leaderboard
+    const leaderboard = document.getElementById("leaderboard");
+    function updateLeaderboard(name) {
+        const listItem = document.createElement("li");
+        listItem.textContent = name;
+        leaderboard.appendChild(listItem);
+    }
+ 
+ 
+    // Example of adding a name to leaderboard (testing purpose)
+    // updateLeaderboard("Top Guesser #1");
+ });
+ 
\ No newline at end of file
diff --git a/navigation/create_and_compete/zoom-n-guess.md b/navigation/create_and_compete/zoom-n-guess.md
index 8da1903a..7049a0b4 100644
--- a/navigation/create_and_compete/zoom-n-guess.md
+++ b/navigation/create_and_compete/zoom-n-guess.md
@@ -1,5 +1,5 @@
 ---
-layout: post 
+layout: post
 title: Create and Compete - Zoom n guess
 search_exclude: true
 permalink: /create_and_compete/zoominguess
@@ -8,35 +8,46 @@ author: Arhaan, Mihir, Keerthan, and Akshaj
 ---
 
 
+<a href="{{site.baseurl}}/create_and_compete/zoominguess/ui">Zoominguess UI</a>
+
+
 <details>
 
+
 <br>
-  <summary>Room Details</summary>
-  
+ <summary>Room Details</summary>
   <a href="{{site.baseurl}}/moderation/rules_zoominguess/">Moderation Rules</a>
 
 
 
 
+
+
+
+
 <p>The main purpose of our Zoom-In Guess room is to have people think critically and collaborate with other members of the channel to identify the image as fast as possible.</p>
 
+
 <p>Room will consist of:</p>
 <ul>
-  <li>**Daily zoomed-in image** that can be optionally pinned to the top of the channel</li>
-  <li>**Guessing opportunity throughout the day** with the image slowly zooming out if too hard</li>
-  <li>**Chat box** where channel members can discuss and collaborate on their guesses</li>
-  <li>**AI assistance** that posts hints if needed and reveals the answer at the end of the day</li>
-  <li>**Profanity filter** to keep the conversation friendly and inclusive</li>
+ <li>**Daily zoomed-in image** that can be optionally pinned to the top of the channel</li>
+ <li>**Guessing opportunity throughout the day** with the image slowly zooming out if too hard</li>
+ <li>**Chat box** where channel members can discuss and collaborate on their guesses</li>
+ <li>**AI assistance** that posts hints if needed and reveals the answer at the end of the day</li>
+ <li>**Profanity filter** to keep the conversation friendly and inclusive</li>
 </ul>
 
+
 <details>
-  <summary>Additional Interactive Features</summary>
-  
+ <summary>Additional Interactive Features</summary>
   <ul>
-    <li>**Mini Game - "Guess the Zoom":** Players try to guess the object or person from a zoomed-in image, with clues if needed.</li>
-    <li>**Posts and Comments:** Members can post their own zoomed-in pictures for others to guess and discuss in the comments.</li>
-    <li>**Rate and Relate Theme:** After guessing, players rate the difficulty of the image, and connect with others on their similar or differing guesses.</li>
-  </ul>
+   <li>**Mini Game - "Guess the Zoom":** Players try to guess the object or person from a zoomed-in image, with clues if needed.</li>
+   <li>**Posts and Comments:** Members can post their own zoomed-in pictures for others to guess and discuss in the comments.</li>
+   <li>**Rate and Relate Theme:** After guessing, players rate the difficulty of the image, and connect with others on their similar or differing guesses.</li>
+ </ul>
 
-  <p>This interactive setup makes the game fun, challenging, and a great way to start conversations about perception and recognition!</p>
+
+ <p>This interactive setup makes the game fun, challenging, and a great way to start conversations about perception and recognition!</p>
 </details>
+
+
diff --git a/navigation/create_and_compete/zoominguess-ui.md b/navigation/create_and_compete/zoominguess-ui.md
new file mode 100644
index 00000000..4e7f5070
--- /dev/null
+++ b/navigation/create_and_compete/zoominguess-ui.md
@@ -0,0 +1,172 @@
+---
+layout: post
+title: Create and Compete - Zoominguess UI
+search_exclude: true
+permalink: /create_and_compete/zoominguess/ui
+author: Arhaan, Akshaj, Mihir, Keerthan
+---
+
+
+<link rel="stylesheet" href="{{site.baseurl}}/navigation/create_and_compete/zoominguess.css">
+<script src="{{site.baseurl}}/navigation/create_and_compete/scripted.js"></script>
+
+
+<div class="zoomnguess-container">
+   <h1>Zoom N Guess</h1>
+   <p>Look at the closely zoomed-in image below and guess who it is. Explain why you think it's that person!</p>
+
+
+<!-- Random Image Section -->
+<div class="zoom-image-section">
+   <button id="generate-image" class="submit-button">Generate Zoomed Image</button>
+   <div id="image-display" class="zoom-image-box">
+       <!-- Random zoomed-in image will be displayed here -->
+       <img id="zoomed-image" src="default-image.jpg" alt="Zoomed Image" class="zoom-image">
+   </div>
+</div>
+
+
+<!-- Guess Input Section -->
+<div class="guess-box">
+   <label for="guess-input">Your Guess:</label>
+   <input type="text" id="guess-input" placeholder="Enter the name of the person">
+</div>
+
+
+<!-- Reasoning Input Section -->
+<div class="explanation-box">
+   <label for="reasoning-input">Explain Your Reasoning:</label>
+   <textarea id="reasoning-input" placeholder="Why do you think it's that person?"></textarea>
+</div>
+
+
+<!-- Submit Button -->
+<button id="submit-guess" class="submit-button">Submit Guess</button>
+
+
+<!-- Guess Feedback Section -->
+<div id="feedback-section">
+   <h2>Your Feedback</h2>
+   <div id="feedback-display" class="info-box">Your guess and explanation will appear here after submission.</div>
+</div>
+
+
+<!-- Leaderboard Section -->
+<section id="leaderboard-section">
+   <h2>Top Guessers</h2>
+   <ul id="leaderboard" class="leaderboard-box">
+       <!-- Leaderboard will show the top contributors -->
+   </ul>
+</section>
+
+
+<!-- Feedback Modal -->
+<div id="feedback-modal" class="modal">
+   <div class="modal-content">
+       <span class="close-button">&times;</span>
+       <h2>Feedback Submitted!</h2>
+       <p>Your feedback has been submitted successfully.</p>
+   </div>
+</div>
+</div>
+
+
+<style>
+   .zoomnguess-container {
+       font-family: Arial, sans-serif;
+       margin: 0 auto;
+       padding: 20px;
+       max-width: 800px;
+       text-align: center;
+       box-shadow: 0 4px 8px rgba(0, 0, 255, 0.2); /* Blue shadow for main container */
+       border-radius: 10px;
+   }
+
+
+   h1 {
+       font-size: 2em;
+       color: #333;
+       text-shadow: 1px 1px 5px rgba(0, 0, 255, 0.4); /* Blue shadow for heading */
+   }
+
+
+   .zoom-image-section,
+   .guess-box,
+   .explanation-box,
+   #feedback-section,
+   #leaderboard-section {
+       margin-top: 20px;
+       padding: 15px;
+       background-color: #fff;
+       border-radius: 8px;
+       box-shadow: 0 4px 6px rgba(0, 0, 255, 0.2); /* Blue shadow for sections */
+   }
+
+
+   .zoom-image-box {
+       display: inline-block;
+       box-shadow: 0 4px 8px rgba(0, 0, 255, 0.3); /* Blue shadow for image box */
+   }
+
+
+   .zoom-image {
+       max-width: 100%;
+       border-radius: 8px;
+   }
+
+
+   .submit-button {
+       background-color: #007bff;
+       color: #fff;
+       padding: 10px 20px;
+       border: none;
+       border-radius: 8px;
+       cursor: pointer;
+       box-shadow: 0 4px 6px rgba(0, 0, 255, 0.3); /* Blue shadow for buttons */
+       transition: box-shadow 0.3s ease;
+   }
+
+
+   .submit-button:hover {
+       box-shadow: 0 6px 12px rgba(0, 0, 255, 0.4); /* Stronger shadow on hover */
+   }
+
+
+   .modal {
+       display: none;
+       position: fixed;
+       z-index: 1;
+       padding-top: 60px;
+       left: 0;
+       top: 0;
+       width: 100%;
+       height: 100%;
+       background-color: rgba(0, 0, 0, 0.5);
+   }
+
+
+   .modal-content {
+       background-color: #fefefe;
+       margin: auto;
+       padding: 20px;
+       border-radius: 10px;
+       box-shadow: 0 4px 8px rgba(0, 0, 255, 0.3); /* Blue shadow for modal */
+       width: 80%;
+       max-width: 500px;
+       text-align: center;
+   }
+
+
+   .close-button {
+       color: #aaa;
+       float: right;
+       font-size: 28px;
+       font-weight: bold;
+       cursor: pointer;
+   }
+
+
+   .close-button:hover {
+       color: #000;
+   }
+</style>
diff --git a/navigation/create_and_compete/zoominguess.css b/navigation/create_and_compete/zoominguess.css
new file mode 100644
index 00000000..4da57739
--- /dev/null
+++ b/navigation/create_and_compete/zoominguess.css
@@ -0,0 +1,188 @@
+/* General container for Zoom N Guess game */
+.zoomnguess-container {
+    width: 80%;
+    max-width: 600px;
+    background-color: #ffffff;
+    border: 2px solid #ccc;
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+    margin: 20px auto;
+    text-align: center;
+    color: #333; /* Dark text color */
+ }
+ 
+ 
+ h1, h2 {
+    color: #333; /* Dark color for headings */
+ }
+ 
+ 
+ p, label, .info-box, .leaderboard-box li {
+    color: #333; /* Dark color for main text content */
+ }
+ 
+ 
+ /* Zoom Image Display Section */
+ .zoom-image-section {
+    margin-bottom: 15px;
+ }
+ 
+ 
+ .zoom-image-box {
+    border: 2px solid #007BFF;
+    border-radius: 8px;
+    padding: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 200px;
+    background-color: #f9f9f9;
+    color: #333; /* Dark color for text inside the box */
+ }
+ 
+ 
+ .zoom-image {
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: 5px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
+ }
+ 
+ 
+ /* Guess Input Box */
+ .guess-box {
+    width: 100%;
+    padding: 10px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+ }
+ 
+ 
+ .guess-box input {
+    width: 100%;
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #007BFF;
+    border-radius: 5px;
+    color: #333; /* Dark text color inside input fields */
+ }
+ 
+ 
+ /* Explanation Box */
+ .explanation-box {
+    width: 100%;
+    margin-top: 10px;
+    margin-bottom: 10px;
+ }
+ 
+ 
+ .explanation-box textarea {
+    width: 100%;
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #28A745;
+    border-radius: 5px;
+    resize: vertical;
+    height: 80px;
+    color: #333; /* Dark text color for textarea */
+ }
+ 
+ 
+ /* Submit Button */
+ .submit-button {
+    width: 100%;
+    background-color: #007BFF;
+    color: #ffffff;
+    font-size: 18px;
+    padding: 12px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    margin-top: 10px;
+ }
+ 
+ 
+ .submit-button:hover {
+    background-color: #0056b3;
+ }
+ 
+ 
+ /* Feedback Section */
+ #feedback-section {
+    margin-top: 20px;
+ }
+ 
+ 
+ .info-box {
+    width: 100%;
+    padding: 15px;
+    margin-top: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #f9f9f9;
+    color: #333; /* Ensures text inside info-box is dark */
+ }
+ 
+ 
+ /* Leaderboard Styling */
+ .leaderboard-box {
+    list-style-type: none;
+    padding: 0;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #f9f9f9;
+    padding: 10px;
+    margin-top: 10px;
+ }
+ 
+ 
+ .leaderboard-box li {
+    padding: 5px 0;
+    border-bottom: 1px solid #e0e0e0;
+    color: #333; /* Dark text for leaderboard items */
+ }
+ 
+ 
+ /* Modal Styling */
+ .modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.4);
+    padding-top: 60px;
+ }
+ 
+ 
+ .modal-content {
+    background-color: #fefefe;
+    margin: 5% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 500px;
+    border-radius: 10px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+    text-align: center;
+    color: #333; /* Dark text color for modal content */
+ }
+ 
+ 
+ .close-button {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+ }
+ 
+ 
+ .close-button:hover {
+    color: #000;
+ }
+ 
\ No newline at end of file
diff --git a/navigation/share_and_care/recipes/home.md b/navigation/share_and_care/recipes/home.md
new file mode 100644
index 00000000..3996e2d7
--- /dev/null
+++ b/navigation/share_and_care/recipes/home.md
@@ -0,0 +1,171 @@
+---
+layout: post
+title: The Hungry Games (Home and Chat)
+description: Have fun talking about food, resturants, and more! Favorite people's chat messages to store them! 
+permalink: share_and_care/hungry_games
+comments: true
+---
+
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        body {
+            font-family: 'Calibri', sans-serif; 
+            background-color: #f8f9fa;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+            margin: 0;
+        }
+        .image-row {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 20px;
+            padding: 20px;
+            border: 10px solid #FFD700;
+            border-radius: 25px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+            background-color: #fff7e6;
+            max-width: 90%;
+            margin: 20px 0;
+        }
+        .image-row img {
+            width: 300px;
+            height: 300px;
+            border-radius: 20px;
+            transition: transform 0.3s ease-in-out;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+            object-fit: cover;
+        }
+        .image-row img:hover {
+            transform: scale(1.1);
+        }
+        .chat-container {
+            width: 400px;  
+            height: 500px; 
+            display: flex;
+            flex-direction: column;
+            border: 2px solid #ff8c00;
+            border-radius: 12px;
+            padding: 10px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+            background-color: #fff3e0;
+            margin-top: 20px;
+            text-align: center; 
+        }
+        .chat-box {
+            flex: 1;
+            overflow-y: auto;
+            padding: 10px;
+            border: 1px solid #ffe0b2;
+            border-radius: 10px;
+            margin-bottom: 10px;
+            background-color: #ffffff;
+        }
+        .chat-message {
+            padding: 10px;
+            margin: 5px 0;
+            border-radius: 10px;
+            background-color: #ffcc80;
+            word-wrap: break-word;
+            max-width: 80%;
+            position: relative; 
+        }
+        .chat-label {
+            color: #333;
+            margin-bottom: 10px;
+            font-weight: bold;
+        }
+        .input-box {
+            display: flex;
+        }
+        .input-box input {
+            flex: 1;
+            padding: 10px;
+            border: 1px solid #ffcc80;
+            border-radius: 10px;
+            outline: none;
+            font-size: 14px;
+        }
+        .input-box button {
+            padding: 10px 15px;
+            margin-left: 5px;
+            background-color: #ff8c00;
+            border: none;
+            color: #fff;
+            border-radius: 10px;
+            cursor: pointer;
+            font-size: 14px;
+        }
+        .input-box button:hover {
+            background-color: #e67e22;
+        }
+    </style>
+</head>
+<body>
+
+    <div class="image-row">
+        <img src="https://cdn.prod.website-files.com/56f03b1536442f6b27f0f08c/5f03324cbb2506842953d137_worlds-best-foods-pizza.jpg" alt="Pizza">
+        <img src="https://www.eatingwell.com/thmb/iCdLRBC1BMcDYKRYMTyyToQ8mRs=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/8401873-ad2429ae1858464a92229875c91c093d.jpg" alt="Pasta">
+        <img src="https://thatdeliciousdish.com/wp-content/uploads/2020/07/Garlic-Mushroom-Noodles-Recipe-web1-1-800x840.jpg" alt="Ramen">
+    </div>
+
+    <div class="chat-container">
+        <div class="chat-label">Chat Box</div>
+        <div class="chat-box" id="chatBox">
+            <!-- Messages will appear here -->
+        </div>
+        <div class="input-box">
+            <input type="text" id="userInput" placeholder="Share a recipe or restaurant...">
+            <button onclick="sendMessage()">Send</button>
+        </div>
+    </div>
+    
+    <script>
+        async function fetchMessages() {
+            const response = await fetch('http://localhost:5000/messages');
+            const messages = await response.json();
+            messages.forEach(message => {
+                displayMessage(message);
+            });
+        }
+
+        async function sendMessage() {
+            const inputText = document.getElementById("userInput").value;
+            if (inputText.trim() !== "") {
+                const response = await fetch('http://localhost:5000/messages', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ text: inputText }),
+                });
+                const message = await response.json();
+                displayMessage(message);
+                document.getElementById("userInput").value = ''; // Clear input box
+            }
+        }
+
+        function displayMessage(message) {
+            const messageDiv = document.createElement("div");
+            messageDiv.classList.add("chat-message");
+            messageDiv.textContent = message.text;
+
+            document.getElementById("chatBox").appendChild(messageDiv);
+            document.getElementById("chatBox").scrollTop = document.getElementById("chatBox").scrollHeight; // Scroll to the bottom
+        }
+
+        // Fetch existing messages when the page loads
+        window.onload = fetchMessages;
+
+    </script>
+
+</body>
+</html>
+
diff --git a/navigation/share_and_care/recipes/recipes.md b/navigation/share_and_care/recipes/recipes.md
new file mode 100644
index 00000000..622d0bbd
--- /dev/null
+++ b/navigation/share_and_care/recipes/recipes.md
@@ -0,0 +1,61 @@
+---
+layout: post
+title: The Hungry Games
+description: Dive into the world of scrumptious foods and get to cooking today!
+hide: true
+menu: nav/home.html
+---
+
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Beautiful Food Layout</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f8f9fa; /* Light background for the whole page */
+        }
+
+
+        .image-row {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 20px; /* Adds spacing between images */
+            padding: 20px;
+            border: 10px solid #FFD700; /* Larger gold border around the row */
+            border-radius: 25px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Adds a more pronounced shadow */
+            background-color: #fff7e6; /* Soft background color */
+            max-width: 90%;
+            margin: auto;
+        }
+       
+        .image-row img {
+            width: 300px; /* All images are the same width */
+            height: 300px; /* All images are the same height */
+            border-radius: 20px;
+            transition: transform 0.3s ease-in-out;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Individual image shadow */
+            object-fit: cover; /* Ensures images fill their box without distortion */
+        }
+
+
+        .image-row img:hover {
+            transform: scale(1.1); /* Slight zoom effect on hover */
+        }
+    </style>
+</head>
+<body>
+
+
+    <div class="image-row">
+        <img src="https://cdn.prod.website-files.com/56f03b1536442f6b27f0f08c/5f03324cbb2506842953d137_worlds-best-foods-pizza.jpg" alt="Pizza">
+        <img src="https://www.eatingwell.com/thmb/iCdLRBC1BMcDYKRYMTyyToQ8mRs=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/8401873-ad2429ae1858464a92229875c91c093d.jpg" alt="Pasta">
+        <img src="https://thatdeliciousdish.com/wp-content/uploads/2020/07/Garlic-Mushroom-Noodles-Recipe-web1-1-800x840.jpg" alt="Ramen">
+    </div>
+
+
+</body>
+</html>
\ No newline at end of file
