From dca51a239bea913cb00934a624de07d9443ae3a5 Mon Sep 17 00:00:00 2001
From: Catherine Molina Betancourt <cathemolinab@gmail.com>
Date: Tue, 18 Nov 2025 14:49:40 -0800
Subject: [PATCH 1/6] feat/communityForum

---
 src/App.css                                |   2 +-
 src/components/Button.jsx                  | 101 ++++++-----
 src/components/DailySummary.jsx            |  46 +++--
 src/components/DailyTrackerBar.jsx         |   2 +-
 src/components/Dashboard/DashboardTile.jsx |  91 +++++-----
 src/components/Dashboard/TaskModal.jsx     | 159 ++++++++++-------
 src/components/MobileMenu.jsx              |  16 +-
 src/components/Navbar.jsx                  |   4 +-
 src/data/questions.js                      | 191 ++++++++++++++++++++-
 src/index.css                              |   2 +-
 src/main.jsx                               |   6 +-
 src/pages/Community.jsx                    |  53 +++++-
 src/pages/Dashboard.jsx                    | 125 +++++++-------
 src/pages/ForumResponses.jsx               | 100 +++++++++++
 src/pages/Home.jsx                         |  15 +-
 src/pages/Login.jsx                        |   2 +-
 src/pages/Onboarding.jsx                   |  66 +++----
 src/pages/journal.jsx                      |  32 +++-
 18 files changed, 720 insertions(+), 293 deletions(-)
 create mode 100644 src/pages/ForumResponses.jsx

diff --git a/src/App.css b/src/App.css
index c829a2b..c03681c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -17,4 +17,4 @@ button.active {
 }
 button.active:hover {
   background-color: var(--color-persianblue);
-}
\ No newline at end of file
+}
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index fdda22f..c077c74 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -2,53 +2,68 @@ import { useNavigate } from 'react-router-dom';
 import { tv } from 'tailwind-variants/lite';
 
 const buttonVariants = tv({
-    // base styles for all buttons
-    base: 'font-poppins flex items-center justify-center drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]',
-    // all button variants
-    variants: {
-        size: {
-            sm: 'h-12 w-[162px] text-base font-semibold rounded-lg lg:h-14 lg:w-[220px] lg:text-xl',
-            md: 'h-11 w-[218px] text-base font-semibold rounded-lg lg:h-14 lg:w-[286px] lg:text-xl xl:h-16 xl:w-[327px] xl:text-2xl',
-            lg: 'h-11 w-[345px] text-base font-medium rounded-md lg:w-[501px]',
-            circ: 'h-11 w-11 text-2xl rounded-full'
-        },
-        color: {
-            primary: 'bg-eerie text-white border-1 border-eerie',
-            secondary: 'bg-white text-eerie border-1 border-eerie',
-            gradient: 'bg-gradient-to-b from-electricgreen to-persianblue text-white'
-        }
+  // base styles for all buttons
+  base: 'font-poppins flex items-center justify-center drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]',
+  // all button variants
+  variants: {
+    size: {
+      sm: 'h-12 w-[162px] text-base font-semibold rounded-lg lg:h-14 lg:w-[220px] lg:text-xl',
+      md: 'h-11 w-[218px] text-base font-semibold rounded-lg lg:h-14 lg:w-[286px] lg:text-xl xl:h-16 xl:w-[327px] xl:text-2xl',
+      lg: 'h-11 w-[345px] text-base font-medium rounded-md lg:w-[501px]',
+      circ: 'h-11 w-11 text-2xl rounded-full',
     },
-    // default button styles if no specified props
-    defaultVariants: {
-        size: 'sm',
-        color: 'primary'
+    color: {
+      primary: 'bg-eerie text-white border-1 border-eerie',
+      secondary: 'bg-white text-eerie border-1 border-eerie',
+      gradient: 'bg-gradient-to-b from-electricgreen to-persianblue text-white',
     },
-    // conditional style cases for specific prop combinations
-    compoundVariants: [
-        // remove drop shadow and lower font weight for user selection button
-        {
-            color: 'secondary',
-            size: 'md',
-            className: 'drop-shadow-none !font-normal'
-        }
-    ]
+  },
+  // default button styles if no specified props
+  defaultVariants: {
+    size: 'sm',
+    color: 'primary',
+  },
+  // conditional style cases for specific prop combinations
+  compoundVariants: [
+    // remove drop shadow and lower font weight for user selection button
+    {
+      color: 'secondary',
+      size: 'md',
+      className: 'drop-shadow-none !font-normal',
+    },
+  ],
 });
 
-export default function Button({ size, color, label, onClick, isActive, to, ...props }) {
-    let navigate = useNavigate();
+export default function Button({
+  size,
+  color,
+  label,
+  onClick,
+  isActive,
+  to,
+  ...props
+}) {
+  let navigate = useNavigate();
 
-    function handleClick(){
-        if (to){
-            navigate(to);
-        } else {
-            onClick();
-        }
+  function handleClick() {
+    if (to) {
+      navigate(to);
+    } else {
+      onClick();
     }
+  }
 
-    return (
-        <button onClick={handleClick} className={isActive ? `${buttonVariants({ size, color })} active` : buttonVariants({ size, color })}
-        {...props}
-        >{label}
-        </button>
-    );
-}
\ No newline at end of file
+  return (
+    <button
+      onClick={handleClick}
+      className={
+        isActive
+          ? `${buttonVariants({ size, color })} active`
+          : buttonVariants({ size, color })
+      }
+      {...props}
+    >
+      {label}
+    </button>
+  );
+}
diff --git a/src/components/DailySummary.jsx b/src/components/DailySummary.jsx
index 11229f1..e545f9c 100644
--- a/src/components/DailySummary.jsx
+++ b/src/components/DailySummary.jsx
@@ -10,24 +10,40 @@ const DailySummary = ({
   onClose,
   day,
   question,
-  initialComment,
+  initialComment, // Ahora puede ser un objeto: { comment: '...', optOut: false }
   onSave,
 }) => {
   const max_chars = 500;
-  const [comment, setComment] = useState(initialComment || '');
+
+  // Si initialComment existe, usa sus propiedades. Si no, usa valores por defecto.
+  const initialCommentObject = initialComment || {};
+  const [comment, setComment] = useState(initialCommentObject.comment || '');
+
+  // AJUSTE CLAVE: Nuevo estado para Opt-out
+  const [isOptedOut, setIsOptedOut] = useState(
+    initialCommentObject.optOut || false
+  );
+
   const remainingChars = max_chars - comment.length;
 
   useEffect(() => {
-    setComment(initialComment || '');
+    // Actualiza el estado cuando cambian las props
+    const updatedCommentObject = initialComment || {};
+    setComment(updatedCommentObject.comment || '');
+    setIsOptedOut(updatedCommentObject.optOut || false);
   }, [initialComment, day]);
 
   const handleSave = () => {
-    onSave(day, comment);
+    // AJUSTE CLAVE: Pasar el estado de isOptedOut a onSave
+    onSave(day, comment, isOptedOut);
     onClose();
   };
 
   const handleCancel = () => {
-    setComment(initialComment || '');
+    // Restablecer al estado inicial
+    const updatedCommentObject = initialComment || {};
+    setComment(updatedCommentObject.comment || '');
+    setIsOptedOut(updatedCommentObject.optOut || false);
     onClose();
   };
 
@@ -79,13 +95,21 @@ const DailySummary = ({
           </div>
         </div>
 
-        <div className="text-center mt-4">
-          <Link
-            to="/community" 
-            className="text-blue-700 text-sm font-semibold focus:outline-none focus-visible:ring-2 focus:p-2 focus-visible:ring-persianblue rounded-[5px]"
+        {/*Checkbox for Opt-out */}
+        <div className="flex items-center mt-5 mb-3 ml-6">
+          <input
+            id={`opt-out-${day}`}
+            type="checkbox"
+            checked={isOptedOut}
+            onChange={(e) => setIsOptedOut(e.target.checked)}
+            className="h-4 w-4 text-green border-eerie rounded focus:ring-persianblue"
+          />
+          <label
+            htmlFor={`opt-out-${day}`}
+            className="ml-2 text-sm text-eerie font-poppins"
           >
-            Visit Community Forum
-          </Link>
+            Opt out of sharing in the Community Forum
+          </label>
         </div>
       </div>
     </div>
diff --git a/src/components/DailyTrackerBar.jsx b/src/components/DailyTrackerBar.jsx
index 7c112e7..3c7e91d 100644
--- a/src/components/DailyTrackerBar.jsx
+++ b/src/components/DailyTrackerBar.jsx
@@ -9,7 +9,7 @@ const DailyTrackerBar = ({ day, isCompleted, onClick, isDisabled, isOpen }) => {
       aria-hidden="true"
     />
   ) : (
-    <FaCirclePlus className="w-8 h-8 stroke-2"  aria-hidden="true"/>
+    <FaCirclePlus className="w-8 h-8 stroke-2" aria-hidden="true" />
   );
 
   return (
diff --git a/src/components/Dashboard/DashboardTile.jsx b/src/components/Dashboard/DashboardTile.jsx
index 8f1a0e3..0ad4b79 100644
--- a/src/components/Dashboard/DashboardTile.jsx
+++ b/src/components/Dashboard/DashboardTile.jsx
@@ -1,51 +1,64 @@
-import { tv } from "tailwind-variants/lite";
+import { tv } from 'tailwind-variants/lite';
 
 const tileVariants = tv({
-    base: 'font-poppins flex flex-col justify-start py-6 px-4 rounded-lg shadow-[0_4px_15px_rgba(0,0,0,0.25)]',
+  base: 'font-poppins flex flex-col justify-start py-6 px-4 rounded-lg shadow-[0_4px_15px_rgba(0,0,0,0.25)]',
 
-    variants: {
-        size: {
-            sm: 'h-[222px]',
-            lg: 'h-[340px]'
-        },
-        span: {
-            2: 'col-span-1 md:col-span-2',
-            3: 'col-span-1 md:col-span-3'
-        },
-        type: {
-            regular: '',
-            data: '',
-        },
+  variants: {
+    size: {
+      sm: 'h-[222px]',
+      lg: 'h-[340px]',
     },
+    span: {
+      2: 'col-span-1 md:col-span-2',
+      3: 'col-span-1 md:col-span-3',
+    },
+    type: {
+      regular: '',
+      data: '',
+    },
+  },
 });
 
 const imgVariants = tv({
-    base: 'place-self-center',
+  base: 'place-self-center',
 
-    variants: {
-        size: {
-            sm: 'w-25',
-            lg: 'w-50'
-        },
+  variants: {
+    size: {
+      sm: 'w-25',
+      lg: 'w-50',
     },
+  },
 });
 
-export default function DashboardTile({ type, size, span, title, subtitle, imgSource, altText, dataSentence }){
-    return (
-        <div className={tileVariants({ type, size, span })}>
-            {type == "data" ? (
-                <div className="h-full flex flex-col gap-8 text-left">
-                    <h2 className="text-lg md:text-[20px] font-medium">{title}</h2>
-                    <p className="text-3xl md:text-4xl">{dataSentence}</p>
-                    <p className="text-base">{subtitle}</p>
-                </div>
-            ) : (
-                <div className="flex flex-col gap-2 text-center">
-                    <h2 className="text-[20px] font-medium">{title}</h2>
-                    <p className="text-base font-normal">{subtitle}</p>
-                    <img src={imgSource} alt={altText} className={imgVariants({ size })}/>
-                </div>
-            )}
+export default function DashboardTile({
+  type,
+  size,
+  span,
+  title,
+  subtitle,
+  imgSource,
+  altText,
+  dataSentence,
+}) {
+  return (
+    <div className={tileVariants({ type, size, span })}>
+      {type == 'data' ? (
+        <div className="h-full flex flex-col gap-8 text-left">
+          <h2 className="text-lg md:text-[20px] font-medium">{title}</h2>
+          <p className="text-3xl md:text-4xl">{dataSentence}</p>
+          <p className="text-base">{subtitle}</p>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-2 text-center">
+          <h2 className="text-[20px] font-medium">{title}</h2>
+          <p className="text-base font-normal">{subtitle}</p>
+          <img
+            src={imgSource}
+            alt={altText}
+            className={imgVariants({ size })}
+          />
         </div>
-    );
-}
\ No newline at end of file
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Dashboard/TaskModal.jsx b/src/components/Dashboard/TaskModal.jsx
index 1e96f06..4913e05 100644
--- a/src/components/Dashboard/TaskModal.jsx
+++ b/src/components/Dashboard/TaskModal.jsx
@@ -1,16 +1,16 @@
 import { useEffect, useState } from 'react';
-import Button from "../Button";
-import { IoClose } from "react-icons/io5";
+import Button from '../Button';
+import { IoClose } from 'react-icons/io5';
 
-export default function TaskModal({ isOpen, onClose}) {
-    const [selectedTask, setSelectedTask] = useState([]);
-      
-      // log the selectedTask after the array changes to update automatically
-      useEffect(() => {
-        console.log('Updated Tasks:', selectedTask);
-    }, [selectedTask]);
-    
-    function toggleTask(challenge) {
+export default function TaskModal({ isOpen, onClose }) {
+  const [selectedTask, setSelectedTask] = useState([]);
+
+  // log the selectedTask after the array changes to update automatically
+  useEffect(() => {
+    console.log('Updated Tasks:', selectedTask);
+  }, [selectedTask]);
+
+  function toggleTask(challenge) {
     // if the clicked challenge is not selectedTask, setSelectedTask
     if (!selectedTask.includes(challenge)) {
       // log the selection
@@ -20,57 +20,94 @@ export default function TaskModal({ isOpen, onClose}) {
     } else {
       // log the deselection
       console.log(`${challenge} button deselected!`);
-      setSelectedTask(selectedTask.filter(item => item !== challenge));
+      setSelectedTask(selectedTask.filter((item) => item !== challenge));
     }
   }
-    
-    if (!isOpen) return null;
 
-    return (
-        <div className="fixed inset-0 flex justify-center items-center bg-gray-400/30 z-20">
-            <div className="flex flex-col justify-center items-center gap-10 p-8 h-fit rounded-[20px] bg-gradient-to-b from-nyanza to-celeste opacity-100">
-                <button onClick={onClose} className='toggle-btn place-self-start active:outline-4 active:outline-persianblue focus-visible:outline-4 focus-visible:outline-persianblue'><IoClose className='text-2xl'/></button>
-                <h2 className="font-poppins text-2xl font-bold">Detox Challenge Options</h2>
-                {/* buttons */}
-                <div className="flex flex-col gap-4 text-left">
-                    <Button 
-                        size="lg" 
-                        color="secondary"
-                        label="Practice Saying No: This task helps you set boundaries in & outside the office."
-                        onClick={() => toggleTask('Practice Saying No: This task helps you set boundaries in & outside the office.')}
-                        isActive={selectedTask.includes('Practice Saying No: This task helps you set boundaries in & outside the office.')}
-                    />
-                    <Button 
-                        size="lg" 
-                        color="secondary"
-                        label="Read Positive Affirmations: Are you struggling with impostor syndrome, anxiety, & self-doubt? Then this task is for you."
-                        onClick={() => toggleTask('Read Positive Affirmations: Are you struggling with impostor syndrome, anxiety, & self-doubt? Then this task is for you.')}
-                        isActive={selectedTask.includes('Read Positive Affirmations: Are you struggling with impostor syndrome, anxiety, & self-doubt? Then this task is for you.')}
-                    />
-                    <Button 
-                        size="lg" 
-                        color="secondary"
-                        label="Read a Book: When is the last time you sat down and read a good book?"
-                        onClick={() => toggleTask('Read a Book: When is the last time you sat down and read a good book?')}
-                        isActive={selectedTask.includes('Read a Book: When is the last time you sat down and read a good book?')}
-                    />
-                    <Button 
-                        size="lg" 
-                        color="secondary"
-                        label="Sleep 7 to 9 Hours: Your quality of sleep greatly affects your emotions and ability to process information."
-                        onClick={() => toggleTask('Sleep 7 to 9 Hours: Your quality of sleep greatly affects your emotions and ability to process information.')}
-                        isActive={selectedTask.includes('Sleep 7 to 9 Hours: Your quality of sleep greatly affects your emotions and ability to process information.')}
-                    />
-                    <Button 
-                        size="lg" 
-                        color="secondary"
-                        label="Journal Entry: Respond to journal prompts or share your thoughts and feelings each day."
-                        onClick={() => toggleTask('Journal Entry: Respond to journal prompts or share your thoughts and feelings each day.')}
-                        isActive={selectedTask.includes('Journal Entry: Respond to journal prompts or share your thoughts and feelings each day.')}
-                    />
-                </div>
-                <Button size="sm" to="/journal" label="Save" />
-            </div>
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 flex justify-center items-center bg-gray-400/30 z-20">
+      <div className="flex flex-col justify-center items-center gap-10 p-8 h-fit rounded-[20px] bg-gradient-to-b from-nyanza to-celeste opacity-100">
+        <button
+          onClick={onClose}
+          className="toggle-btn place-self-start active:outline-4 active:outline-persianblue focus-visible:outline-4 focus-visible:outline-persianblue"
+        >
+          <IoClose className="text-2xl" />
+        </button>
+        <h2 className="font-poppins text-2xl font-bold">
+          Detox Challenge Options
+        </h2>
+        {/* buttons */}
+        <div className="flex flex-col gap-4 text-left">
+          <Button
+            size="lg"
+            color="secondary"
+            label="Practice Saying No: This task helps you set boundaries in & outside the office."
+            onClick={() =>
+              toggleTask(
+                'Practice Saying No: This task helps you set boundaries in & outside the office.'
+              )
+            }
+            isActive={selectedTask.includes(
+              'Practice Saying No: This task helps you set boundaries in & outside the office.'
+            )}
+          />
+          <Button
+            size="lg"
+            color="secondary"
+            label="Read Positive Affirmations: Are you struggling with impostor syndrome, anxiety, & self-doubt? Then this task is for you."
+            onClick={() =>
+              toggleTask(
+                'Read Positive Affirmations: Are you struggling with impostor syndrome, anxiety, & self-doubt? Then this task is for you.'
+              )
+            }
+            isActive={selectedTask.includes(
+              'Read Positive Affirmations: Are you struggling with impostor syndrome, anxiety, & self-doubt? Then this task is for you.'
+            )}
+          />
+          <Button
+            size="lg"
+            color="secondary"
+            label="Read a Book: When is the last time you sat down and read a good book?"
+            onClick={() =>
+              toggleTask(
+                'Read a Book: When is the last time you sat down and read a good book?'
+              )
+            }
+            isActive={selectedTask.includes(
+              'Read a Book: When is the last time you sat down and read a good book?'
+            )}
+          />
+          <Button
+            size="lg"
+            color="secondary"
+            label="Sleep 7 to 9 Hours: Your quality of sleep greatly affects your emotions and ability to process information."
+            onClick={() =>
+              toggleTask(
+                'Sleep 7 to 9 Hours: Your quality of sleep greatly affects your emotions and ability to process information.'
+              )
+            }
+            isActive={selectedTask.includes(
+              'Sleep 7 to 9 Hours: Your quality of sleep greatly affects your emotions and ability to process information.'
+            )}
+          />
+          <Button
+            size="lg"
+            color="secondary"
+            label="Journal Entry: Respond to journal prompts or share your thoughts and feelings each day."
+            onClick={() =>
+              toggleTask(
+                'Journal Entry: Respond to journal prompts or share your thoughts and feelings each day.'
+              )
+            }
+            isActive={selectedTask.includes(
+              'Journal Entry: Respond to journal prompts or share your thoughts and feelings each day.'
+            )}
+          />
         </div>
-    );
-}
\ No newline at end of file
+        <Button size="sm" to="/journal" label="Save" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/MobileMenu.jsx b/src/components/MobileMenu.jsx
index 28775cf..1279e07 100644
--- a/src/components/MobileMenu.jsx
+++ b/src/components/MobileMenu.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { AiOutlineClose } from 'react-icons/ai';
 import { RiLayoutHorizontalFill, RiUser3Fill } from 'react-icons/ri';
-import { MdForum } from "react-icons/md";
+import { MdForum } from 'react-icons/md';
 import { PiListBulletsFill } from 'react-icons/pi';
 
 const MobileMenu = ({ isOpen, toggleMenu }) => {
@@ -17,9 +17,9 @@ const MobileMenu = ({ isOpen, toggleMenu }) => {
     {
       name: 'Community Forum',
       href: '/community',
-      icon: MdForum ,
+      icon: MdForum,
     },
-    
+
     { name: 'Profile', href: '/profile', icon: RiUser3Fill },
   ];
 
@@ -47,17 +47,17 @@ const MobileMenu = ({ isOpen, toggleMenu }) => {
           <ul className="flex flex-col space-y-3 ml-10 ">
             {navLinks.map((link) => (
               <li key={link.name} className="mb-4">
-                <Link 
-                  to={link.href} 
+                <Link
+                  to={link.href}
                   className="flex items-center text-stone-900 text-lg font-poppins font-semibold transition-colors hover:font-bold focus:outline-none focus:ring-2focus:outline-none  focus-visible:ring-2 focus-visible:ring-persianblue rounded-[5px]"
-                  onClick={toggleMenu} 
+                  onClick={toggleMenu}
                 >
                   <link.icon
                     className="mr-2 text-2xl text-black w-5 h-6 "
                     aria-hidden="true"
                   />
                   {link.name}
-                </Link> 
+                </Link>
               </li>
             ))}
           </ul>
@@ -67,4 +67,4 @@ const MobileMenu = ({ isOpen, toggleMenu }) => {
   );
 };
 
-export default MobileMenu;
\ No newline at end of file
+export default MobileMenu;
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index afee376..d5b0f54 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -123,7 +123,7 @@ function Navbar() {
                   Detox Challenge
                 </Link>
               </li>
-               <li>
+              <li>
                 <Link
                   to="community"
                   className="text-stone-900 text-base font-normal font-playfair hover:font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-persianblue focus-visible:p-2 rounded-[5px]"
@@ -131,7 +131,7 @@ function Navbar() {
                   Community Forum
                 </Link>
               </li>
-              
+
               <li>
                 <Link
                   to="/profile"
diff --git a/src/data/questions.js b/src/data/questions.js
index aaeb2b2..0da21c7 100644
--- a/src/data/questions.js
+++ b/src/data/questions.js
@@ -1,13 +1,186 @@
-// src/data/questions.js
-
 export const questions = [
-  "Write down three realistic, small acts of self-care I can commit to this week.",
-  "What feelings or thoughts am I having about my professional identity right now?",
-  "How can I ask my partner or support system for help with a specific task today or tomorrow?",
-  // ... (27 more questions)
-  "How has my definition of success changed since becoming a mother?",
-  "Describe one or two small, loving moments you shared with your child(ren) today.",
+  {
+    day: 1,
+    theme: 'Setting Boundaries',
+    question:
+      'Define what a truly successful, balanced week looks like for me, including personal time.',
+  },
+
+  {
+    day: 2,
+    theme: 'Self-Introspection',
+    question:
+      'What feelings or thoughts am I having about my professional identity right now?',
+  },
+  {
+    day: 3,
+    theme: 'Self-Advocacy',
+    question:
+      'How can I ask my partner or support system for help with a specific task today or tomorrow?',
+  },
+  {
+    day: 4,
+    theme: 'Self-Introspection',
+    question:
+      'Describe how my energy level feels right now, without judgment. What would I tell a friend who was feeling exactly the way I feel today?',
+  },
+  {
+    day: 5,
+    theme: 'Celebrating Wins',
+    question:
+      'Name three things I am proud of myself for accomplishing today, no matter how small.',
+  },
+  {
+    day: 6,
+    theme: 'Self-Introspection',
+    question:
+      "Write a 'thank you' note to your body for everything it has done.",
+  },
+  {
+    day: 7,
+    theme: 'Celebrating Wins',
+    question:
+      'What is a small way I can reconnect with my partner or a loved one this weekend?',
+  },
+  {
+    day: 8,
+    theme: 'Self-Introspection',
+    question:
+      'What is one thing I deeply miss from my life before the baby, and how can I integrate a tiny piece of it now?',
+  },
+  {
+    day: 9,
+    theme: 'Self-Introspection',
+    question:
+      'List all my current work-related tasks and mark which ones bring me energy versus draining it. If I could delegate one task right now, which one would it be and why?',
+  },
+  {
+    day: 10,
+    theme: 'Setting Boundaries',
+    question:
+      'Write a script for a conversation where I clearly and respectfully decline a new commitment.',
+  },
+  {
+    day: 11,
+    theme: 'Setting Boundaries',
+    question:
+      'Write down three realistic, small acts of self-care I can commit to this week.',
+  },
+  {
+    day: 12,
+    theme: 'Self-Introspection',
+    question:
+      'How am I currently using my lunch breaks and how could I use them to truly disconnect?',
+  },
+  {
+    day: 13,
+    theme: 'Setting Boundaries',
+    question:
+      'What boundary do I need to establish with my work device (e.g., no email after 7 PM)?',
+  },
+  {
+    day: 14,
+    theme: 'Setting Boundaries',
+    question:
+      "What is the 'good enough' standard for my current projects, and where am I over-delivering unnecessarily?",
+  },
+  {
+    day: 15,
+    theme: 'Self-Advocacy',
+    question:
+      'Name one specific way my company or manager could better support my well-being.',
+  },
+  {
+    day: 16,
+    theme: 'Self-Introspection',
+    question:
+      'How does my body feel right now? Am I holding tension anywhere (shoulders, jaw, etc.)?',
+  },
+  {
+    day: 17,
+    theme: 'Self-Introspection',
+    question:
+      'Write a letter to my future self outlining the signs of burnout to watch for.',
+  },
+  {
+    day: 18,
+    theme: 'Setting Boundaries',
+    question:
+      'What are two things I could let go of or automate that would save me an hour of time weekly?',
+  },
+  {
+    day: 19,
+    theme: 'Self-Introspection',
+    question:
+      'If I took a mental health day tomorrow, what three activities would I do?',
+  },
+  {
+    day: 20,
+    theme: 'Self-Introspection',
+    question:
+      'What is my current definition of leadership, and how am I embodying it daily?',
+  },
+  {
+    day: 21,
+    theme: 'Self-Introspection',
+    question:
+      'Describe a recent situation where I had to make a difficult decision; what was the guiding principle?',
+  },
+  {
+    day: 22,
+    theme: 'Self-Advocacy',
+    question:
+      'What is one skill I need to delegate or train my team on so I can focus on strategy?',
+  },
+  {
+    day: 23,
+    theme: 'Self-Introspection',
+    question:
+      'Who in my network or industry do I admire as a leader, and what specific traits do they possess?',
+  },
+  {
+    day: 24,
+    theme: 'Self-Introspection',
+    question:
+      'What is the most significant legacy I want to build in my current role?',
+  },
+  {
+    day: 25,
+    theme: 'Gender Bias',
+    question:
+      'How am I actively creating a more inclusive and equitable environment for my junior colleagues?',
+  },
+  {
+    day: 26,
+    theme: 'Self-Advocacy',
+    question:
+      'What is one area of my company or industry where I feel my expertise is untapped?',
+  },
+  {
+    day: 27,
+    theme: 'Self-Introspection',
+    question:
+      'How am I actively seeking and implementing critical feedback on my leadership style?',
+  },
+  {
+    day: 28,
+    theme: 'Self-Advocacy',
+    question:
+      'How does my current compensation reflect my value and impact? What are three ways I can advocate for myself and my team more effectively in the next quarter?',
+  },
+  {
+    day: 29,
+    theme: 'Self-Advocacy',
+    question:
+      'What is the single most important lesson I want to teach my mentees this year? Why?',
+  },
+  {
+    day: 30,
+    theme: 'Celebrating Wins',
+    question:
+      "If I was starting a new company today, what is the first cultural value I would establish? How am I intentionally celebrating successes—both mine and my team's—this week?",
+  },
 ];
 
 export const total_days = 30;
-export const local_storage_key = 'journalProgress';
\ No newline at end of file
+export const local_storage_key = 'journalProgress';
diff --git a/src/index.css b/src/index.css
index 53136d1..ac4c011 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,7 +10,7 @@
   --color-celeste: #bbfdff;
   --color-zinc: #888888;
   --color-olivegreen: #38791f;
-  --color-green: #00AD00;
+  --color-green: #00ad00;
 
   --font-playfair: 'Playfair Display', serif;
   --font-poppins: 'Poppins', sans-serif;
diff --git a/src/main.jsx b/src/main.jsx
index 1eadd95..e55e0fa 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -13,6 +13,7 @@ import Signup from './pages/Signup';
 import Journal from './pages/journal';
 import Logout from './pages/Logout';
 import App from './App';
+import ForumResponses from './pages/ForumResponses';
 
 const router = createBrowserRouter([
   {
@@ -29,7 +30,8 @@ const router = createBrowserRouter([
       { path: 'journal', element: <Journal /> },
       { path: 'logout', element: <Logout /> },
       { path: 'error', element: <Error /> },
-     ],
+      { path: '/community/responses/:day', element: <ForumResponses /> },
+    ],
   },
   {
     path: '*',
@@ -40,4 +42,4 @@ createRoot(document.getElementById('root')).render(
   <StrictMode>
     <RouterProvider router={router} />
   </StrictMode>
-);
\ No newline at end of file
+);
diff --git a/src/pages/Community.jsx b/src/pages/Community.jsx
index 592f72d..9de7703 100644
--- a/src/pages/Community.jsx
+++ b/src/pages/Community.jsx
@@ -1,9 +1,52 @@
-function Community() {
+// react
+import { Link } from 'react-router-dom';
+
+// data
+import { questions } from '../data/questions';
+
+//icon
+import { FaArrowRight } from 'react-icons/fa6';
+
+const Community = () => {
   return (
-    <div className="min-h-screen bg-emerald-100 flex items-center justify-center">
-      <h1 className="text-4xl font-bold text-lime-500">Community Page! 🎉</h1>
-    </div>
+    <main className="min-h-screen p-6 font-poppins">
+      <div className="max-w-[1000px] mx-auto">
+        <h1 className="text-3xl font-bold mb-2 font-playfair">
+          Community Forum
+        </h1>
+        <p className="text-eerie mb-8">
+          View how other women in tech responded to journal prompts.
+        </p>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {questions.map((q) => (
+            <div
+              key={q.day}
+              className="bg-white p-6 rounded-lg border border-eerie flex flex-col justify-between"
+            >
+              <div>
+                <h2 className="text-m font-semibold text-eerie font-playfair mb-2">
+                  Theme: {q.theme}
+                </h2>
+                <p className="text-m text-eerie font-poppins mb-4">
+                  {q.question}
+                </p>
+              </div>
+              <div className="text-right">
+                <Link
+                  to={`/community/responses/${q.day}`}
+                  className="bg-eerie text-white p-2 inline-flex items-center justify-center rounded-full cursor-pointer transition hover:bg-black"
+                  aria-label={`View responses for day ${q.day}`}
+                >
+                  <FaArrowRight className="w-5 h-5" />
+                </Link>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </main>
   );
-}
+};
 
 export default Community;
diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
index 4b10d49..f361266 100644
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@@ -1,7 +1,7 @@
-import { useState } from "react";
-import Button from "../components/Button";
-import DashboardTile from "../components/Dashboard/DashboardTile";
-import TaskModal from "../components/Dashboard/TaskModal";
+import { useState } from 'react';
+import Button from '../components/Button';
+import DashboardTile from '../components/Dashboard/DashboardTile';
+import TaskModal from '../components/Dashboard/TaskModal';
 
 let daysCompleted = 0;
 let daysLeft = 30 - daysCompleted;
@@ -11,66 +11,71 @@ export default function Dashboard() {
   const [taskModalOpen, setTaskModalOpen] = useState(false);
 
   return (
-      <div className="bg-white">
+    <div className="bg-white">
       {/* title and button */}
-        <div className="flex flex-col gap-4 mx-8 sm:mx-15 md:mx-10 lg:mx-20 xl:mx-40 2xl:mx-80">
-          <h1 className="text-3xl font-playfair font-semibold text-eerie place-self-center lg:place-self-start mt-4">Welcome Back!</h1>
-          <div className="w-full place-items-center">
-            <Button 
-              size='md'
-              color='primary'
-              label='Start a Task' 
-              onClick={() => setTaskModalOpen(true)}
-            />
-          </div>
+      <div className="flex flex-col gap-4 mx-8 sm:mx-15 md:mx-10 lg:mx-20 xl:mx-40 2xl:mx-80">
+        <h1 className="text-3xl font-playfair font-semibold text-eerie place-self-center lg:place-self-start mt-4">
+          Welcome Back!
+        </h1>
+        <div className="w-full place-items-center">
+          <Button
+            size="md"
+            color="primary"
+            label="Start a Task"
+            onClick={() => setTaskModalOpen(true)}
+          />
         </div>
-        <TaskModal isOpen={taskModalOpen} onClose={() => setTaskModalOpen(false)} />
+      </div>
+      <TaskModal
+        isOpen={taskModalOpen}
+        onClose={() => setTaskModalOpen(false)}
+      />
       {/* card grid */}
-        <div className="grid grid-cols-1 md:grid-cols-6 gap-8 auto-rows-min my-14 mx-8 sm:mx-15 md:mx-10 lg:mx-20 xl:mx-40 2xl:mx-80">
-            {/* row 1 */}
-            <DashboardTile 
-              type="data"
-              size="sm" 
-              span="2"
-              title="Detox Summary" 
-              dataSentence={`${daysCompleted} Day${daysCompleted == 1 ? '' : 's'}`}
-              subtitle={`${daysLeft} day${daysLeft == 1 ? '' : 's'} to go!`}
-              />
-            <DashboardTile 
-              type="data"
-              size="sm" 
-              span="2"
-              title="Login History"
-              dataSentence={`${loginStreak} Day Streak`}
-              subtitle='Keep it up!'
-              />
-            <DashboardTile 
-              size="sm" 
-              span="2"
-              title="Achievements" 
-              subtitle="Review badges earned"
-              imgSource="/badge.svg"
-              altText="badge illustration"          
-            />
+      <div className="grid grid-cols-1 md:grid-cols-6 gap-8 auto-rows-min my-14 mx-8 sm:mx-15 md:mx-10 lg:mx-20 xl:mx-40 2xl:mx-80">
+        {/* row 1 */}
+        <DashboardTile
+          type="data"
+          size="sm"
+          span="2"
+          title="Detox Summary"
+          dataSentence={`${daysCompleted} Day${daysCompleted == 1 ? '' : 's'}`}
+          subtitle={`${daysLeft} day${daysLeft == 1 ? '' : 's'} to go!`}
+        />
+        <DashboardTile
+          type="data"
+          size="sm"
+          span="2"
+          title="Login History"
+          dataSentence={`${loginStreak} Day Streak`}
+          subtitle="Keep it up!"
+        />
+        <DashboardTile
+          size="sm"
+          span="2"
+          title="Achievements"
+          subtitle="Review badges earned"
+          imgSource="/badge.svg"
+          altText="badge illustration"
+        />
 
-            {/* row 2 */}
-            <DashboardTile 
-              size="lg" 
-              span="3"
-              title="Progress Overview"
-              subtitle="Your progress for the past 7 days" 
-              imgSource="/pietrs.png"
-              altText="pie chart illustration" 
-            />  
-            <DashboardTile 
-              size="lg" 
-              span="3"
-              title="Community Forum"
-              subtitle="Review answers to prompts from other women in tech"
-              imgSource="/people.svg"
-              altText="illustration of four diverse women" 
-            />  
+        {/* row 2 */}
+        <DashboardTile
+          size="lg"
+          span="3"
+          title="Progress Overview"
+          subtitle="Your progress for the past 7 days"
+          imgSource="/pietrs.png"
+          altText="pie chart illustration"
+        />
+        <DashboardTile
+          size="lg"
+          span="3"
+          title="Community Forum"
+          subtitle="Review answers to prompts from other women in tech"
+          imgSource="/people.svg"
+          altText="illustration of four diverse women"
+        />
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/ForumResponses.jsx b/src/pages/ForumResponses.jsx
new file mode 100644
index 0000000..71f81d4
--- /dev/null
+++ b/src/pages/ForumResponses.jsx
@@ -0,0 +1,100 @@
+// react
+import { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+
+// data
+import { questions, local_storage_key } from '../data/questions';
+
+// icon
+import { FaArrowLeft } from 'react-icons/fa6';
+
+const getResponsesForDay = (day) => {
+  try {
+    const storedData = localStorage.getItem(local_storage_key);
+    if (!storedData) return [];
+
+    const allEntries = JSON.parse(storedData).entries;
+    const entry = allEntries[`day${day}`];
+
+    if (entry && typeof entry === 'object' && entry.comment && !entry.optOut) {
+      return [entry.comment];
+    }
+
+    return [];
+  } catch (error) {
+    console.error('Error retrieving community data:', error);
+    return [];
+  }
+};
+
+const ForumResponses = () => {
+  const { day: dayParam } = useParams();
+  const navigate = useNavigate();
+  const day = parseInt(dayParam);
+
+  const [questionData, setQuestionData] = useState(null);
+  const [responses, setResponses] = useState([]);
+
+  useEffect(() => {
+    if (day && day >= 1 && day <= questions.length) {
+      const qData = questions[day - 1];
+      setQuestionData(qData);
+      setResponses(getResponsesForDay(day));
+    } else {
+      navigate('/community');
+    }
+  }, [day, navigate]);
+
+  if (!questionData) {
+    return <div className="p-6 text-center font-poppins">Loading...</div>;
+  }
+
+  return (
+    <main className="min-h-screen p-6 font-poppins">
+      <div className="max-w-[1000px] mx-auto">
+        <button
+          onClick={() => navigate('/community')}
+          className="flex items-center mb-6 font-playfair"
+          size="sm"
+          color="primary"
+          aria-label="Back to Community Forum"
+        >
+          <FaArrowLeft className="w-4 h-4 mr-2" />
+          Back to Forum
+        </button>
+
+        <h1 className="text-3xl font-bold mb-2 font-playfair">
+          Community Forum
+        </h1>
+        <p className="text-eerie mb-8">
+          View how other women in tech answered, {questionData.question}
+        </p>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {responses.length > 0 ? (
+            responses.map((response, index) => (
+              <div
+                key={index}
+                className="border border-eerie p-6 rounded-lg bg-white shadow-sm"
+              >
+                <p className="font-medium text-m text-eerie mb-2 font-playfair">
+                  Anonymous
+                </p>
+
+                <p className="text-base text-eerie font-poppins whitespace-pre-wrap">
+                  {response}
+                </p>
+              </div>
+            ))
+          ) : (
+            <div className="text-zinc p-4 border rounded-lg">
+              Be the first to share your response from your journal.
+            </div>
+          )}
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default ForumResponses;
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 55aa1ae..7dab55e 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -14,8 +14,9 @@ const Home = () => {
         <div className="w-full h-[350px] sm:h-[350px] bg-gradient-to-b from-nyanza to-celeste rounded-bl-[40px] rounded-br-[40px] relative mt-[-22px]">
           <section className="w-full h-full flex flex-col items-center justify-center px-4 relative z-10">
             <h1 className="w-[745px] max-w-full mx-auto h-auto mb- text-center text-stone-900 text-4xl sm:text-5xl lg:text-5xl font-bold font-playfair capitalize leading-snug">
-              Helping Women In Tech<br/>
-               Fight Burnout
+              Helping Women In Tech
+              <br />
+              Fight Burnout
             </h1>
 
             <p className="w-[829px] max-w-full mx-auto h-auto mb-6 sm:mb-8 font-poppins font-normal text-eerie text-lg sm:text-2xl lg:text-xl text-center tracking-normal leading-normal px-2">
@@ -23,13 +24,7 @@ const Home = () => {
               strategies women can use to prevent and fight burnout
             </p>
 
-            <Button
-              size="sm"
-              color="primary"
-              label="Sign Up"
-              to="/signup"
-              
-            />
+            <Button size="sm" color="primary" label="Sign Up" to="/signup" />
           </section>
         </div>
 
@@ -47,4 +42,4 @@ const Home = () => {
   );
 };
 
-export default Home;
\ No newline at end of file
+export default Home;
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index 3861d2e..1a7b19f 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -100,4 +100,4 @@ function Login() {
   );
 }
 
-export default Login;
\ No newline at end of file
+export default Login;
diff --git a/src/pages/Onboarding.jsx b/src/pages/Onboarding.jsx
index dc68c7c..ad06401 100644
--- a/src/pages/Onboarding.jsx
+++ b/src/pages/Onboarding.jsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 
 export default function Onboarding() {
   const [selectedConcerns, setSelectedConcerns] = useState([]);
-  
+
   // log the selectedConcerns after the array changes to update automatically
   useEffect(() => {
     console.log('Updated Concerns:', selectedConcerns);
@@ -20,7 +20,7 @@ export default function Onboarding() {
     } else {
       // log the deselection
       console.log(`${concern} button deselected!`);
-      setSelectedConcerns(selectedConcerns.filter(item => item !== concern));
+      setSelectedConcerns(selectedConcerns.filter((item) => item !== concern));
     }
   }
 
@@ -39,53 +39,53 @@ export default function Onboarding() {
         </div>
         {/* button quiz grid */}
         <div className="grid grid-cols-1 gap-4 sm:gap-5 sm:grid-cols-2 md:grid-rows-3 md:gap-y-10 md:gap-x-14">
-          <Button 
-            size="md" 
-            color="secondary" 
-            label="Sleep" 
+          <Button
+            size="md"
+            color="secondary"
+            label="Sleep"
             onClick={() => toggleConcern('Sleep')}
-            isActive={selectedConcerns.includes('Sleep')} 
+            isActive={selectedConcerns.includes('Sleep')}
           />
-          <Button 
-            size="md" 
-            color="secondary" 
+          <Button
+            size="md"
+            color="secondary"
             label="Postpartum Anxiety"
-            onClick={() => toggleConcern('Postpartum Anxiety')} 
-            isActive={selectedConcerns.includes('Postpartum Anxiety')} 
+            onClick={() => toggleConcern('Postpartum Anxiety')}
+            isActive={selectedConcerns.includes('Postpartum Anxiety')}
           />
-          <Button 
-            size="md" 
-            color="secondary" 
-            label="Self-Doubt" 
+          <Button
+            size="md"
+            color="secondary"
+            label="Self-Doubt"
             onClick={() => toggleConcern('Self-Doubt')}
-            isActive={selectedConcerns.includes('Self-Doubt')}  
+            isActive={selectedConcerns.includes('Self-Doubt')}
           />
-          <Button 
-            size="md" 
-            color="secondary" 
-            label="Stress" 
+          <Button
+            size="md"
+            color="secondary"
+            label="Stress"
             onClick={() => toggleConcern('Stress')}
-            isActive={selectedConcerns.includes('Stress')}  
+            isActive={selectedConcerns.includes('Stress')}
           />
-          <Button 
-            size="md" 
-            color="secondary" 
-            label="Saying No" 
+          <Button
+            size="md"
+            color="secondary"
+            label="Saying No"
             onClick={() => toggleConcern('Saying No')}
-            isActive={selectedConcerns.includes('Saying No')}  
+            isActive={selectedConcerns.includes('Saying No')}
           />
-          <Button 
-            size="md" 
-            color="secondary" 
+          <Button
+            size="md"
+            color="secondary"
             label="Gender Bias"
             onClick={() => toggleConcern('Gender Bias')}
-            isActive={selectedConcerns.includes('Gender Bias')}  
+            isActive={selectedConcerns.includes('Gender Bias')}
           />
         </div>
         {/* next and skip buttons */}
         <div className="flex flex-col-reverse gap-4 sm:gap-5 sm:flex-row md:gap-8">
-          <Button size="sm" color="secondary" label="Skip" to="/dashboard"/>
-          <Button size="sm" color="primary" label="Next" to="/dashboard"/>
+          <Button size="sm" color="secondary" label="Skip" to="/dashboard" />
+          <Button size="sm" color="primary" label="Next" to="/dashboard" />
         </div>
       </div>
     </div>
diff --git a/src/pages/journal.jsx b/src/pages/journal.jsx
index 0806b2d..b90c9a6 100644
--- a/src/pages/journal.jsx
+++ b/src/pages/journal.jsx
@@ -44,11 +44,16 @@ const Journal = () => {
     }
   };
 
-  const handleSaveComment = useCallback((day, comment) => {
+  const handleSaveComment = useCallback((day, comment, isOptedOut) => {
     setProgressData((prevData) => {
       const dayKey = `day${day}`;
       const trimmedComment = comment.trim();
-      const hasPreviousComment = !!prevData.entries[dayKey];
+
+      const previousEntry = prevData.entries[dayKey];
+      const hasPreviousComment = !!(
+        previousEntry &&
+        (previousEntry.comment || typeof previousEntry === 'string')
+      );
       const hasNewComment = trimmedComment.length > 0;
 
       let newEffectiveDays = prevData.effectiveDays;
@@ -59,9 +64,14 @@ const Journal = () => {
         newEffectiveDays -= 1;
       }
 
+      const entryData =
+        trimmedComment.length > 0
+          ? { comment: trimmedComment, optOut: isOptedOut }
+          : null;
+
       const newEntries = {
         ...prevData.entries,
-        [dayKey]: trimmedComment,
+        [dayKey]: entryData,
       };
 
       newEffectiveDays = Math.max(0, Math.min(newEffectiveDays, total_days));
@@ -94,9 +104,19 @@ const Journal = () => {
         <section>
           {daysArray.map((day) => {
             const dayKey = `day${day}`;
-            const isCompleted = !!progressData.entries[dayKey];
+            const entry = progressData.entries[dayKey];
+
+            const isCompleted = !!(
+              entry &&
+              (entry.comment || typeof entry === 'string')
+            );
             const isDisabled = day > nextDayToComplete;
 
+            const initialCommentData =
+              typeof entry === 'string'
+                ? { comment: entry, optOut: false }
+                : entry;
+
             return (
               <div key={day} className="relative w-full">
                 <DailyTrackerBar
@@ -117,8 +137,8 @@ const Journal = () => {
                     isOpen={isDaySummaryOpen}
                     onClose={() => setIsDaySummaryOpen(false)}
                     day={selectedDay}
-                    question={questions[selectedDay - 1]}
-                    initialComment={progressData.entries[`day${selectedDay}`]}
+                    question={questions[selectedDay - 1].question}
+                    initialComment={initialCommentData}
                     onSave={handleSaveComment}
                   />
                 ) : (

From 7d32bfa4a1ae9144d2178dfd0a57e7cb98211899 Mon Sep 17 00:00:00 2001
From: Catherine Molina Betancourt <cathemolinab@gmail.com>
Date: Sat, 22 Nov 2025 06:53:48 -0800
Subject: [PATCH 2/6] fix/ forumResponses flow

---
 src/main.jsx                 |  2 +-
 src/pages/ForumResponses.jsx | 23 +++++++++++++++++++----
 src/pages/journal.jsx        | 18 +++++++++++++++---
 3 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/main.jsx b/src/main.jsx
index e55e0fa..5fd3907 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -10,7 +10,7 @@ import Dashboard from './pages/Dashboard';
 import Error from './pages/Error';
 import Login from './pages/Login';
 import Signup from './pages/Signup';
-import Journal from './pages/journal';
+import Journal from './pages/Journal';
 import Logout from './pages/Logout';
 import App from './App';
 import ForumResponses from './pages/ForumResponses';
diff --git a/src/pages/ForumResponses.jsx b/src/pages/ForumResponses.jsx
index 71f81d4..c17cafe 100644
--- a/src/pages/ForumResponses.jsx
+++ b/src/pages/ForumResponses.jsx
@@ -1,12 +1,13 @@
 // react
 import { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 // data
 import { questions, local_storage_key } from '../data/questions';
 
-// icon
-import { FaArrowLeft } from 'react-icons/fa6';
+// icons
+import { FaArrowRight, FaArrowLeft } from 'react-icons/fa6';
 
 const getResponsesForDay = (day) => {
   try {
@@ -49,6 +50,8 @@ const ForumResponses = () => {
     return <div className="p-6 text-center font-poppins">Loading...</div>;
   }
 
+  const journalLink = `/journal`; 
+
   return (
     <main className="min-h-screen p-6 font-poppins">
       <div className="max-w-[1000px] mx-auto">
@@ -87,8 +90,20 @@ const ForumResponses = () => {
               </div>
             ))
           ) : (
-            <div className="text-zinc p-4 border rounded-lg">
+            <div className="text-zinc p-4 border rounded-lg flex items-center justify-between">
               Be the first to share your response from your journal.
+              
+              <Link
+                  to={journalLink}
+                  state={{ openDaySummary: day }} 
+                  className="bg-eerie text-white p-2 inline-flex items-center justify-center rounded-full cursor-pointer transition 
+                  hover:bg-zinc hover:text-eerie active:bg-persianblue active:text-white 
+                  flex-shrink-0"
+                  aria-label="Be the first to share your response from your journal."
+                >
+                  <FaArrowRight className="w-4 h-4" /> 
+                </Link>
+              
             </div>
           )}
         </div>
@@ -97,4 +112,4 @@ const ForumResponses = () => {
   );
 };
 
-export default ForumResponses;
+export default ForumResponses;
\ No newline at end of file
diff --git a/src/pages/journal.jsx b/src/pages/journal.jsx
index b90c9a6..26d16a5 100644
--- a/src/pages/journal.jsx
+++ b/src/pages/journal.jsx
@@ -1,5 +1,6 @@
 //react
 import { useState, useEffect, useCallback } from 'react';
+import { useLocation } from 'react-router-dom'; 
 
 //components
 import ProgressBar from '../components/ProgressBar';
@@ -22,6 +23,7 @@ const getInitialData = () => {
 };
 
 const Journal = () => {
+  const location = useLocation(); 
   const [progressData, setProgressData] = useState(getInitialData);
   const [isDaySummaryOpen, setIsDaySummaryOpen] = useState(false);
   const [selectedDay, setSelectedDay] = useState(null);
@@ -34,10 +36,20 @@ const Journal = () => {
   }, [progressData]);
 
   // Open the Day Summary for a specific day
-  const openSummaryForDay = (day) => {
+  const openSummaryForDay = useCallback((day) => {
     setSelectedDay(day);
     setIsDaySummaryOpen(true);
-  };
+  }, []);
+
+  // from the ForumResponses
+  useEffect(() => {
+    if (location.state && location.state.openDaySummary) {
+      openSummaryForDay(location.state.openDaySummary);
+      
+      window.history.replaceState({}, document.title)
+    }
+  }, [location, openSummaryForDay]);
+
   const handleArrowClick = () => {
     if (nextDayToComplete <= total_days) {
       openSummaryForDay(nextDayToComplete);
@@ -154,4 +166,4 @@ const Journal = () => {
   );
 };
 
-export default Journal;
+export default Journal;
\ No newline at end of file

From 40cfde7bb990a2f8727fac38d34f5292c08dee78 Mon Sep 17 00:00:00 2001
From: Catherine Molina Betancourt <cathemolinab@gmail.com>
Date: Thu, 27 Nov 2025 10:39:15 -0800
Subject: [PATCH 3/6] fix accessibility isssues

---
 src/components/DailySummary.jsx    |  8 +-------
 src/components/DailyTrackerBar.jsx |  2 +-
 src/components/ProgressBar.jsx     |  2 +-
 src/main.jsx                       |  5 +----
 src/pages/Community.jsx            |  4 ++--
 src/pages/ForumResponses.jsx       | 13 ++++++-------
 6 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/src/components/DailySummary.jsx b/src/components/DailySummary.jsx
index e545f9c..7e840da 100644
--- a/src/components/DailySummary.jsx
+++ b/src/components/DailySummary.jsx
@@ -1,6 +1,5 @@
 //react
 import { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
 
 // component
 import Button from './Button';
@@ -10,16 +9,14 @@ const DailySummary = ({
   onClose,
   day,
   question,
-  initialComment, // Ahora puede ser un objeto: { comment: '...', optOut: false }
+  initialComment,
   onSave,
 }) => {
   const max_chars = 500;
 
-  // Si initialComment existe, usa sus propiedades. Si no, usa valores por defecto.
   const initialCommentObject = initialComment || {};
   const [comment, setComment] = useState(initialCommentObject.comment || '');
 
-  // AJUSTE CLAVE: Nuevo estado para Opt-out
   const [isOptedOut, setIsOptedOut] = useState(
     initialCommentObject.optOut || false
   );
@@ -27,20 +24,17 @@ const DailySummary = ({
   const remainingChars = max_chars - comment.length;
 
   useEffect(() => {
-    // Actualiza el estado cuando cambian las props
     const updatedCommentObject = initialComment || {};
     setComment(updatedCommentObject.comment || '');
     setIsOptedOut(updatedCommentObject.optOut || false);
   }, [initialComment, day]);
 
   const handleSave = () => {
-    // AJUSTE CLAVE: Pasar el estado de isOptedOut a onSave
     onSave(day, comment, isOptedOut);
     onClose();
   };
 
   const handleCancel = () => {
-    // Restablecer al estado inicial
     const updatedCommentObject = initialComment || {};
     setComment(updatedCommentObject.comment || '');
     setIsOptedOut(updatedCommentObject.optOut || false);
diff --git a/src/components/DailyTrackerBar.jsx b/src/components/DailyTrackerBar.jsx
index 3c7e91d..bebe31f 100644
--- a/src/components/DailyTrackerBar.jsx
+++ b/src/components/DailyTrackerBar.jsx
@@ -20,7 +20,7 @@ const DailyTrackerBar = ({ day, isCompleted, onClick, isDisabled, isOpen }) => {
       aria-expanded={isOpen}
       aria-controls={`summary-day${day}`}
       onClick={!isDisabled ? onClick : undefined}
-      className={`bg-white max-w-[1000px] p-4 rounded-lg border border-errie flex justify-between items-center mb-3 mt-8 transition font-poppins 
+      className={`bg-white max-w-[1000px] p-4 rounded-lg border border-errie flex justify-between items-center mb-3 mt-8 transition font-poppins focus:outline-none focus-visible:ring-4 focus-visible:ring-persianblue focus-visible:ring-offset-4
         ${isDisabled ? 'opacity-70 cursor-not-allowed' : 'cursor-pointer hover:shadow-md'}`}
       onKeyDown={(e) => {
         if (!isDisabled && (e.key === 'Enter' || e.key === ' ')) {
diff --git a/src/components/ProgressBar.jsx b/src/components/ProgressBar.jsx
index 6388a57..b38090b 100644
--- a/src/components/ProgressBar.jsx
+++ b/src/components/ProgressBar.jsx
@@ -37,7 +37,7 @@ const ProgressBar = ({ effectiveDays, onArrowClick }) => {
         </span>
 
         <button
-          className="bg-eerie text-white p-2 rounded-full cursor-pointer transition"
+          className="bg-eerie text-white p-2 rounded-full cursor-pointer transition hover:bg-zinc active:bg-persianblue !outline-none focus-visible:ring-3 focus-visible:ring-persianblue focus-visible:ring-offset-4"
           onClick={onArrowClick}
           aria-label="Go to the next day for a new journal entry"
         >
diff --git a/src/main.jsx b/src/main.jsx
index 5917d4d..f8ffde6 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -31,14 +31,11 @@ const router = createBrowserRouter([
       { path: 'journal', element: <Journal /> },
       { path: 'logout', element: <Logout /> },
       { path: 'error', element: <Error /> },
+      { path: '*', element: <Error /> },
       { path: 'challenges', element: <Challenges /> },
       { path: '/community/responses/:day', element: <ForumResponses /> },
     ],
   },
-  {
-    path: '*',
-    element: <Error />,
-  },
 ]);
 createRoot(document.getElementById('root')).render(
   <StrictMode>
diff --git a/src/pages/Community.jsx b/src/pages/Community.jsx
index 9de7703..425b2af 100644
--- a/src/pages/Community.jsx
+++ b/src/pages/Community.jsx
@@ -35,10 +35,10 @@ const Community = () => {
               <div className="text-right">
                 <Link
                   to={`/community/responses/${q.day}`}
-                  className="bg-eerie text-white p-2 inline-flex items-center justify-center rounded-full cursor-pointer transition hover:bg-black"
+                  className="bg-eerie text-white p-2 inline-flex items-center justify-center rounded-full cursor-pointer transition hover:bg-zinc active:bg-persianblue active:text-white active:p-2 flex-shrink-0 focus:outline-none focus-visible:ring-3 focus-visible:ring-persianblue focus-visible:ring-offset-2"
                   aria-label={`View responses for day ${q.day}`}
                 >
-                  <FaArrowRight className="w-5 h-5" />
+                  <FaArrowRight className="w-5 h-5" aria-hidden="true" />
                 </Link>
               </div>
             </div>
diff --git a/src/pages/ForumResponses.jsx b/src/pages/ForumResponses.jsx
index b14c853..91e1984 100644
--- a/src/pages/ForumResponses.jsx
+++ b/src/pages/ForumResponses.jsx
@@ -57,12 +57,11 @@ const ForumResponses = () => {
       <div className="max-w-[1000px] mx-auto">
         <button
           onClick={() => navigate('/community')}
-          className="flex items-center mb-6 font-playfair"
+          className="flex items-center mb-6 font-playfair focus:outline-none focus:shadow-none focus-visible:ring-persianblue rounded px-2 py-1 "
           size="sm"
           color="primary"
-          aria-label="Back to Community Forum"
         >
-          <FaArrowLeft className="w-4 h-4 mr-2" />
+          <FaArrowLeft className="w-4 h-4 mr-2" aria-hidden="true" />
           Back to Forum
         </button>
 
@@ -90,17 +89,17 @@ const ForumResponses = () => {
               </div>
             ))
           ) : (
-            <div className="text-zinc p-4 border rounded-lg flex items-center justify-between">
+            <div className="text-zinc-400 p-4 border rounded-lg flex items-center justify-between">
               Be the first to share your response from your journal.
               <Link
                 to={journalLink}
                 state={{ openDaySummary: day }}
                 className="bg-eerie text-white p-2 inline-flex items-center justify-center rounded-full cursor-pointer transition 
-                  hover:bg-zinc hover:text-eerie active:bg-persianblue active:text-white 
-                  flex-shrink-0"
+    hover:bg-zinc active:bg-persianblue active:text-white 
+    flex-shrink-0 focus:outline-none focus-visible:ring-3 focus-visible:ring-persianblue focus-visible:ring-offset-2"
                 aria-label="Be the first to share your response from your journal."
               >
-                <FaArrowRight className="w-4 h-4" />
+                <FaArrowRight className="w-4 h-4" aria-hidden="true" />
               </Link>
             </div>
           )}

From 1e570f153aeaeae2935af273f4acd9b524976da5 Mon Sep 17 00:00:00 2001
From: Catherine Molina Betancourt <cathemolinab@gmail.com>
Date: Sat, 29 Nov 2025 09:30:32 -0800
Subject: [PATCH 4/6] update community forum and journal with firebase

---
 src/pages/ForumResponses.jsx |  89 ++++++++++++++++----------
 src/pages/journal.jsx        | 117 +++++++++++++++++++++--------------
 2 files changed, 128 insertions(+), 78 deletions(-)

diff --git a/src/pages/ForumResponses.jsx b/src/pages/ForumResponses.jsx
index 91e1984..8eabc8b 100644
--- a/src/pages/ForumResponses.jsx
+++ b/src/pages/ForumResponses.jsx
@@ -3,27 +3,42 @@ import { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { Link } from 'react-router-dom';
 
+// firebase
+import { db } from '../firebase';
+import { collection, getDocs } from 'firebase/firestore';
+
 // data
-import { questions, local_storage_key } from '../data/questions';
+import { questions } from '../data/questions';
 
 // icons
 import { FaArrowRight, FaArrowLeft } from 'react-icons/fa6';
 
-const getResponsesForDay = (day) => {
-  try {
-    const storedData = localStorage.getItem(local_storage_key);
-    if (!storedData) return [];
-
-    const allEntries = JSON.parse(storedData).entries;
-    const entry = allEntries[`day${day}`];
+const getResponsesForDay = async (day) => {
+  if (!day) return [];
 
-    if (entry && typeof entry === 'object' && entry.comment && !entry.optOut) {
-      return [entry.comment];
-    }
+  const dayKey = `day${day}`;
+  const journalRef = collection(db, 'journals');
 
-    return [];
+  try {
+    const querySnapshot = await getDocs(journalRef);
+    const responses = [];
+
+    querySnapshot.forEach((doc) => {
+      const entry = doc.data().entries?.[dayKey];
+
+      if (
+        entry &&
+        typeof entry === 'object' &&
+        entry.comment &&
+        !entry.optOut
+      ) {
+        responses.push(entry.comment);
+      }
+    });
+
+    return responses;
   } catch (error) {
-    console.error('Error retrieving community data:', error);
+    console.error('Error retrieving community data from Firestore:', error);
     return [];
   }
 };
@@ -36,40 +51,48 @@ const ForumResponses = () => {
   const [questionData, setQuestionData] = useState(null);
   const [responses, setResponses] = useState([]);
 
+  const journalLink = `/journal`;
+
   useEffect(() => {
-    if (day && day >= 1 && day <= questions.length) {
-      const qData = questions[day - 1];
-      setQuestionData(qData);
-      setResponses(getResponsesForDay(day));
-    } else {
-      navigate('/community');
-    }
+    const fetchResponses = async () => {
+      if (day && day >= 1 && day <= questions.length) {
+        const qData = questions[day - 1];
+        setQuestionData(qData);
+
+        const communityResponses = await getResponsesForDay(day);
+        setResponses(communityResponses);
+      } else {
+        navigate('/community');
+      }
+    };
+
+    fetchResponses();
   }, [day, navigate]);
 
   if (!questionData) {
-    return <div className="p-6 text-center font-poppins">Loading...</div>;
+    return <div className="min-h-screen p-6 font-poppins">Loading...</div>;
   }
 
-  const journalLink = `/journal`;
+  const { question } = questionData;
+  const backLink = `/community`;
 
   return (
     <main className="min-h-screen p-6 font-poppins">
       <div className="max-w-[1000px] mx-auto">
-        <button
-          onClick={() => navigate('/community')}
-          className="flex items-center mb-6 font-playfair focus:outline-none focus:shadow-none focus-visible:ring-persianblue rounded px-2 py-1 "
-          size="sm"
-          color="primary"
+        <Link
+          to={backLink}
+          className="inline-flex items-center text-eerie hover:text-persianblue transition mb-8 focus:outline-none focus-visible:ring-3 focus-visible:ring-persianblue focus-visible:ring-offset-2 rounded-full p-1 -ml-1"
+          aria-label="Back to Community Forum"
         >
           <FaArrowLeft className="w-4 h-4 mr-2" aria-hidden="true" />
-          Back to Forum
-        </button>
+          <span className="font-poppins text-sm">Back to Forum</span>
+        </Link>
 
-        <h1 className="text-3xl font-bold mb-2 font-playfair">
-          Community Forum
+        <h1 className="text-3xl font-bold mb-4 font-playfair text-eerie">
+          Community Responses for Day {day}
         </h1>
-        <p className="text-eerie mb-8">
-          View how other women in tech answered, {questionData.question}
+        <p className="text-eerie mb-8 border-l-4 border-persianblue pl-4 py-2 bg-gray-50 rounded-r-md">
+          <span className="font-semibold">Prompt:</span> {question}
         </p>
 
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
diff --git a/src/pages/journal.jsx b/src/pages/journal.jsx
index 17d441b..e0ae244 100644
--- a/src/pages/journal.jsx
+++ b/src/pages/journal.jsx
@@ -2,40 +2,61 @@
 import { useState, useEffect, useCallback } from 'react';
 import { useLocation } from 'react-router-dom';
 
+// firebase
+import { db } from '../firebase';
+import { doc, setDoc, onSnapshot } from 'firebase/firestore';
+
 //components
 import ProgressBar from '../components/ProgressBar';
 import DailyTrackerBar from '../components/DailyTrackerBar';
 import DailySummary from '../components/DailySummary';
 
 //data
-import { questions, total_days, local_storage_key } from '../data/questions';
-
-const getInitialData = () => {
-  try {
-    const storedData = localStorage.getItem(local_storage_key);
-    return storedData
-      ? JSON.parse(storedData)
-      : { effectiveDays: 0, entries: {} };
-  } catch (error) {
-    console.error('Error retrieving data from localStorage:', error);
-    return { effectiveDays: 0, entries: {} };
-  }
-};
+import { questions, total_days } from '../data/questions';
+
+const USER_ID = 'user-id';
+const JOURNAL_DOC_REF = doc(db, 'journals', USER_ID);
 
 const Journal = () => {
   const location = useLocation();
-  const [progressData, setProgressData] = useState(getInitialData);
+  const [progressData, setProgressData] = useState({
+    effectiveDays: 0,
+    entries: {},
+  });
   const [isDaySummaryOpen, setIsDaySummaryOpen] = useState(false);
   const [selectedDay, setSelectedDay] = useState(null);
 
   const nextDayToComplete = progressData.effectiveDays + 1;
 
-  // Update localStorage
   useEffect(() => {
-    localStorage.setItem(local_storage_key, JSON.stringify(progressData));
-  }, [progressData]);
+    const unsubscribe = onSnapshot(
+      JOURNAL_DOC_REF,
+      (docSnap) => {
+        if (docSnap.exists()) {
+          const data = docSnap.data();
+          setProgressData({
+            effectiveDays: data.effectiveDays || 0,
+            entries: data.entries || {},
+          });
+        } else {
+          setDoc(
+            JOURNAL_DOC_REF,
+            { effectiveDays: 0, entries: {} },
+            { merge: true }
+          ).catch((error) =>
+            console.error('Error creating initial document:', error)
+          );
+        }
+      },
+      (error) => {
+        console.error('Error listening to journal data:', error);
+      }
+    );
+
+    return () => unsubscribe();
+  }, []);
 
-  // Open the Day Summary for a specific day
+  // Open the DailySummary for a specific day
   const openSummaryForDay = useCallback((day) => {
     setSelectedDay(day);
     setIsDaySummaryOpen(true);
@@ -45,16 +66,12 @@ const Journal = () => {
   useEffect(() => {
     if (location.state && location.state.openDaySummary) {
       openSummaryForDay(location.state.openDaySummary);
-
-      window.history.replaceState({}, document.title);
     }
-  }, [location, openSummaryForDay]);
+  }, [location.state, openSummaryForDay]);
 
-  const handleArrowClick = () => {
-    if (nextDayToComplete <= total_days) {
-      openSummaryForDay(nextDayToComplete);
-    }
-  };
+  const handleArrowClick = useCallback(() => {
+    openSummaryForDay(nextDayToComplete);
+  }, [openSummaryForDay, nextDayToComplete]);
 
   const handleSaveComment = useCallback((day, comment, isOptedOut) => {
     setProgressData((prevData) => {
@@ -62,6 +79,7 @@ const Journal = () => {
       const trimmedComment = comment.trim();
 
       const previousEntry = prevData.entries[dayKey];
+
       const hasPreviousComment = !!(
         previousEntry &&
         (previousEntry.comment || typeof previousEntry === 'string')
@@ -86,44 +104,53 @@ const Journal = () => {
         [dayKey]: entryData,
       };
 
-      newEffectiveDays = Math.max(0, Math.min(newEffectiveDays, total_days));
+      const finalEffectiveDays = Math.max(
+        0,
+        Math.min(newEffectiveDays, total_days)
+      );
+
+      const dataToSave = {
+        effectiveDays: finalEffectiveDays,
+        entries: newEntries,
+      };
+
+      setDoc(JOURNAL_DOC_REF, dataToSave, { merge: true }).catch((error) =>
+        console.error('Error saving journal entry:', error)
+      );
 
       return {
-        effectiveDays: newEffectiveDays,
+        effectiveDays: finalEffectiveDays,
         entries: newEntries,
       };
     });
   }, []);
 
-  const daysArray = Array.from({ length: total_days }, (_, i) => i + 1);
-
   return (
-    <main className="min-h-screen bg-gray-50 p-4 font-poppins">
+    <main className="min-h-screen p-6 font-poppins">
       <div className="max-w-[1000px] mx-auto">
-        <h1 className="text-2xl font-semibold mb-4 mt-6 text-eerie font-playfair">
-          Journal Entry
+        <h1 className="text-3xl font-bold mb-2 font-playfair">
+          30 Day Journal
         </h1>
+        <p className="text-eerie mb-8">
+          A space for reflection and self-advocacy.
+        </p>
 
         <ProgressBar
           effectiveDays={progressData.effectiveDays}
           onArrowClick={handleArrowClick}
         />
-        <p className="self-stretch justify-start text-black text-sd font-normal font-poppins">
-          View saved journal entries or start a new journal entry.
-        </p>
 
-        {/* Daily Bars */}
-        <section>
-          {daysArray.map((day) => {
-            const dayKey = `day${day}`;
-            const entry = progressData.entries[dayKey];
+        <section aria-labelledby="journal-entries-heading">
+          {questions.map((q) => {
+            const day = q.day;
+            const entry = progressData.entries[`day${day}`];
 
-            const isCompleted = !!(
-              entry &&
-              (entry.comment || typeof entry === 'string')
-            );
+            const isCompleted = !!(entry && entry.comment);
+
+            // DailyTrackerBar
             const isDisabled = day > nextDayToComplete;
 
+            // DailySummary
             const initialCommentData =
               typeof entry === 'string'
                 ? { comment: entry, optOut: false }

From c041ff6a6c6a7bf73ee787d62bf72b74123ff783 Mon Sep 17 00:00:00 2001
From: Catherine Molina Betancourt <cathemolinab@gmail.com>
Date: Sat, 29 Nov 2025 10:41:29 -0800
Subject: [PATCH 5/6] fix forum responses

---
 src/components/DailySummary.jsx | 5 +++--
 src/data/questions.js           | 8 ++++----
 src/pages/ForumResponses.jsx    | 6 ++----
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/DailySummary.jsx b/src/components/DailySummary.jsx
index 7e840da..242f07c 100644
--- a/src/components/DailySummary.jsx
+++ b/src/components/DailySummary.jsx
@@ -56,8 +56,9 @@ const DailySummary = ({
           Day {day} Summary
         </h2>
 
-        <p className="text-sm mb-4 text-eerie">{question}</p>
-
+       
+        <p className="text-sm mb-4 text-eerie text-justify">{question}</p>
+       
         <textarea
           className="w-full p-4 border border-eerie bg-white rounded-sm resize-none focus:ring-3 focus:ring-persianblue text-eerie"
           rows="6"
diff --git a/src/data/questions.js b/src/data/questions.js
index 0da21c7..973ce24 100644
--- a/src/data/questions.js
+++ b/src/data/questions.js
@@ -14,9 +14,9 @@ export const questions = [
   },
   {
     day: 3,
-    theme: 'Self-Advocacy',
+    theme: 'Celebrating Wins',
     question:
-      'How can I ask my partner or support system for help with a specific task today or tomorrow?',
+      'Name one or two things I am proud of myself for accomplishing today, no matter how small.',
   },
   {
     day: 4,
@@ -26,9 +26,9 @@ export const questions = [
   },
   {
     day: 5,
-    theme: 'Celebrating Wins',
+    theme: 'Self-Advocacy',
     question:
-      'Name three things I am proud of myself for accomplishing today, no matter how small.',
+      'How can I ask my partner or support system for help with a specific task today or tomorrow?',
   },
   {
     day: 6,
diff --git a/src/pages/ForumResponses.jsx b/src/pages/ForumResponses.jsx
index 8eabc8b..b632610 100644
--- a/src/pages/ForumResponses.jsx
+++ b/src/pages/ForumResponses.jsx
@@ -81,7 +81,7 @@ const ForumResponses = () => {
       <div className="max-w-[1000px] mx-auto">
         <Link
           to={backLink}
-          className="inline-flex items-center text-eerie hover:text-persianblue transition mb-8 focus:outline-none focus-visible:ring-3 focus-visible:ring-persianblue focus-visible:ring-offset-2 rounded-full p-1 -ml-1"
+          className="inline-flex items-center text-eerie hover:text-persianblue transition mb-8 focus:outline-none focus-visible:ring-3 focus-visible:ring-persianblue focus:font-bold focus-visible:ring-offset-2 rounded p-1 -ml-1"
           aria-label="Back to Community Forum"
         >
           <FaArrowLeft className="w-4 h-4 mr-2" aria-hidden="true" />
@@ -117,9 +117,7 @@ const ForumResponses = () => {
               <Link
                 to={journalLink}
                 state={{ openDaySummary: day }}
-                className="bg-eerie text-white p-2 inline-flex items-center justify-center rounded-full cursor-pointer transition 
-    hover:bg-zinc active:bg-persianblue active:text-white 
-    flex-shrink-0 focus:outline-none focus-visible:ring-3 focus-visible:ring-persianblue focus-visible:ring-offset-2"
+                className="bg-eerie text-white p-2 inline-flex items-center justify-center rounded-full cursor-pointer transition hover:bg-zinc active:bg-persianblue active:text-white flex-shrink-0 focus:outline-none focus-visible:ring-3 focus-visible:ring-persianblue focus-visible:ring-offset-2"
                 aria-label="Be the first to share your response from your journal."
               >
                 <FaArrowRight className="w-4 h-4" aria-hidden="true" />

From 766b63e6f6746e171d1ad00946c91418ec9f577e Mon Sep 17 00:00:00 2001
From: Catherine Molina Betancourt <cathemolinab@gmail.com>
Date: Sat, 29 Nov 2025 11:26:57 -0800
Subject: [PATCH 6/6] fix deploy problem

---
 src/main.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main.jsx b/src/main.jsx
index f8ffde6..6af310d 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -10,7 +10,7 @@ import Dashboard from './pages/Dashboard';
 import Error from './pages/Error';
 import Login from './pages/Login';
 import Signup from './pages/Signup';
-import Journal from './pages/Journal';
+import Journal from './pages/journal';
 import Logout from './pages/Logout';
 import Challenges from './pages/Challenges';
 import App from './App';