diff --git a/package-lock.json b/package-lock.json
index 0993541..e791ce8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -64,6 +64,7 @@
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -951,6 +952,7 @@
       "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.14.6.tgz",
       "integrity": "sha512-4uyt8BOrBsSq6i4yiOV/gG6BnnrvTeyymlNcaN/dKvyU1GoolxAafvIvaNP1RCGPlNab3OuE4MKUQuv2lH+PLQ==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@firebase/component": "0.7.0",
         "@firebase/logger": "0.5.0",
@@ -1017,6 +1019,7 @@
       "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.5.6.tgz",
       "integrity": "sha512-YYGARbutghQY4zZUWMYia0ib0Y/rb52y72/N0z3vglRHL7ii/AaK9SA7S/dzScVOlCdnbHXz+sc5Dq+r8fwFAg==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@firebase/app": "0.14.6",
         "@firebase/component": "0.7.0",
@@ -1032,7 +1035,8 @@
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.3.tgz",
       "integrity": "sha512-kRVpIl4vVGJ4baogMDINbyrIOtOxqhkZQg4jTq3l8Lw6WSk0xfpEYzezFu+Kl4ve4fbPl79dvwRtaFqAC/ucCw==",
-      "license": "Apache-2.0"
+      "license": "Apache-2.0",
+      "peer": true
     },
     "node_modules/@firebase/auth": {
       "version": "1.11.1",
@@ -1483,6 +1487,7 @@
       "integrity": "sha512-0AZUyYUfpMNcztR5l09izHwXkZpghLgCUaAGjtMwXnCg3bj4ml5VgiwqOMOxJ+Nw4qN/zJAaOQBcJ7KGkWStqQ==",
       "hasInstallScript": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       },
@@ -2328,6 +2333,7 @@
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -2369,6 +2375,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2520,6 +2527,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.9",
         "caniuse-lite": "^1.0.30001746",
@@ -2797,6 +2805,7 @@
       "integrity": "sha512-XyLmROnACWqSxiGYArdef1fItQd47weqB7iwtfr9JHwRrqIXZdcFMvvEcL9xHCmL0SNsOvF0c42lWyM1U5dgig==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3858,6 +3867,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3884,6 +3894,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -3965,6 +3976,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3974,6 +3986,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -4247,7 +4260,8 @@
       "version": "4.1.14",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.14.tgz",
       "integrity": "sha512-b7pCxjGO98LnxVkKjaZSDeNuljC4ueKUddjENJOADtubtdo8llTaJy7HwBMeLNSSo2N5QIAgklslK1+Ir8r6CA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/tapable": {
       "version": "2.3.0",
@@ -4374,6 +4388,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.9.tgz",
       "integrity": "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
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..242f07c 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';
@@ -14,20 +13,31 @@ const DailySummary = ({
   onSave,
 }) => {
   const max_chars = 500;
-  const [comment, setComment] = useState(initialComment || '');
+
+  const initialCommentObject = initialComment || {};
+  const [comment, setComment] = useState(initialCommentObject.comment || '');
+
+  const [isOptedOut, setIsOptedOut] = useState(
+    initialCommentObject.optOut || false
+  );
+
   const remainingChars = max_chars - comment.length;
 
   useEffect(() => {
-    setComment(initialComment || '');
+    const updatedCommentObject = initialComment || {};
+    setComment(updatedCommentObject.comment || '');
+    setIsOptedOut(updatedCommentObject.optOut || false);
   }, [initialComment, day]);
 
   const handleSave = () => {
-    onSave(day, comment);
+    onSave(day, comment, isOptedOut);
     onClose();
   };
 
   const handleCancel = () => {
-    setComment(initialComment || '');
+    const updatedCommentObject = initialComment || {};
+    setComment(updatedCommentObject.comment || '');
+    setIsOptedOut(updatedCommentObject.optOut || false);
     onClose();
   };
 
@@ -46,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"
@@ -79,13 +90,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..bebe31f 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 (
@@ -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/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 f67b214..d8bfd82 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/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/data/questions.js b/src/data/questions.js
index aaeb2b2..973ce24 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: 'Celebrating Wins',
+    question:
+      'Name one or two things I am proud of myself for accomplishing today, no matter how small.',
+  },
+  {
+    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: 'Self-Advocacy',
+    question:
+      'How can I ask my partner or support system for help with a specific task today or tomorrow?',
+  },
+  {
+    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/firebase.js b/src/firebase.js
index 60500fc..c30109f 100644
--- a/src/firebase.js
+++ b/src/firebase.js
@@ -1,6 +1,6 @@
 // Import the functions you need from the SDKs you need
-import { initializeApp } from "firebase/app";
-import { getFirestore } from "firebase/firestore";
+import { initializeApp } from 'firebase/app';
+import { getFirestore } from 'firebase/firestore';
 
 // TODO: Add SDKs for Firebase products that you want to use
 // https://firebase.google.com/docs/web/setup#available-libraries
@@ -12,7 +12,7 @@ const firebaseConfig = {
   projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
   storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
   messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
-  appId: import.meta.env.VITE_FIREBASE_APP_ID
+  appId: import.meta.env.VITE_FIREBASE_APP_ID,
 };
 
 // Initialize Firebase
@@ -20,4 +20,4 @@ const app = initializeApp(firebaseConfig);
 
 // Initialize Cloud Firestore and get a reference to the service
 const db = getFirestore(app);
-export { db };
\ No newline at end of file
+export { db };
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 f8bd2f6..6af310d 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -14,6 +14,7 @@ import Journal from './pages/journal';
 import Logout from './pages/Logout';
 import Challenges from './pages/Challenges';
 import App from './App';
+import ForumResponses from './pages/ForumResponses';
 
 const router = createBrowserRouter([
   {
@@ -30,16 +31,14 @@ const router = createBrowserRouter([
       { path: 'journal', element: <Journal /> },
       { path: 'logout', element: <Logout /> },
       { path: 'error', element: <Error /> },
+      { path: '*', element: <Error /> },
       { path: 'challenges', element: <Challenges /> },
-     ],
-  },
-  {
-    path: '*',
-    element: <Error />,
+      { path: '/community/responses/:day', element: <ForumResponses /> },
+    ],
   },
 ]);
 createRoot(document.getElementById('root')).render(
   <StrictMode>
     <RouterProvider router={router} />
   </StrictMode>
-);
\ No newline at end of file
+);
diff --git a/src/pages/Challenges.jsx b/src/pages/Challenges.jsx
index 3ca2792..878b03e 100644
--- a/src/pages/Challenges.jsx
+++ b/src/pages/Challenges.jsx
@@ -53,4 +53,4 @@ export default function Challenges() {
             </div>
         </div>
   );
-};
\ No newline at end of file
+}
diff --git a/src/pages/Community.jsx b/src/pages/Community.jsx
index 592f72d..425b2af 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-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" aria-hidden="true" />
+                </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..b632610
--- /dev/null
+++ b/src/pages/ForumResponses.jsx
@@ -0,0 +1,133 @@
+// react
+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 } from '../data/questions';
+
+// icons
+import { FaArrowRight, FaArrowLeft } from 'react-icons/fa6';
+
+const getResponsesForDay = async (day) => {
+  if (!day) return [];
+
+  const dayKey = `day${day}`;
+  const journalRef = collection(db, 'journals');
+
+  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 from Firestore:', error);
+    return [];
+  }
+};
+
+const ForumResponses = () => {
+  const { day: dayParam } = useParams();
+  const navigate = useNavigate();
+  const day = parseInt(dayParam);
+
+  const [questionData, setQuestionData] = useState(null);
+  const [responses, setResponses] = useState([]);
+
+  const journalLink = `/journal`;
+
+  useEffect(() => {
+    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="min-h-screen p-6 font-poppins">Loading...</div>;
+  }
+
+  const { question } = questionData;
+  const backLink = `/community`;
+
+  return (
+    <main className="min-h-screen p-6 font-poppins">
+      <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: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" />
+          <span className="font-poppins text-sm">Back to Forum</span>
+        </Link>
+
+        <h1 className="text-3xl font-bold mb-4 font-playfair text-eerie">
+          Community Responses for Day {day}
+        </h1>
+        <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">
+          {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-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 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" />
+              </Link>
+            </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..e0ae244 100644
--- a/src/pages/journal.jsx
+++ b/src/pages/journal.jsx
@@ -1,5 +1,10 @@
 //react
 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';
@@ -7,48 +12,78 @@ 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 [progressData, setProgressData] = useState(getInitialData);
+  const location = useLocation();
+  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
-  const openSummaryForDay = (day) => {
+  // Open the DailySummary for a specific day
+  const openSummaryForDay = useCallback((day) => {
     setSelectedDay(day);
     setIsDaySummaryOpen(true);
-  };
-  const handleArrowClick = () => {
-    if (nextDayToComplete <= total_days) {
-      openSummaryForDay(nextDayToComplete);
+  }, []);
+
+  // from the ForumResponses
+  useEffect(() => {
+    if (location.state && location.state.openDaySummary) {
+      openSummaryForDay(location.state.openDaySummary);
     }
-  };
+  }, [location.state, openSummaryForDay]);
 
-  const handleSaveComment = useCallback((day, comment) => {
+  const handleArrowClick = useCallback(() => {
+    openSummaryForDay(nextDayToComplete);
+  }, [openSummaryForDay, nextDayToComplete]);
+
+  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,44 +94,68 @@ const Journal = () => {
         newEffectiveDays -= 1;
       }
 
+      const entryData =
+        trimmedComment.length > 0
+          ? { comment: trimmedComment, optOut: isOptedOut }
+          : null;
+
       const newEntries = {
         ...prevData.entries,
-        [dayKey]: trimmedComment,
+        [dayKey]: entryData,
+      };
+
+      const finalEffectiveDays = Math.max(
+        0,
+        Math.min(newEffectiveDays, total_days)
+      );
+
+      const dataToSave = {
+        effectiveDays: finalEffectiveDays,
+        entries: newEntries,
       };
 
-      newEffectiveDays = Math.max(0, Math.min(newEffectiveDays, total_days));
+      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 isCompleted = !!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);
+
+            // DailyTrackerBar
             const isDisabled = day > nextDayToComplete;
 
+            // DailySummary
+            const initialCommentData =
+              typeof entry === 'string'
+                ? { comment: entry, optOut: false }
+                : entry;
+
             return (
               <div key={day} className="relative w-full">
                 <DailyTrackerBar
@@ -117,8 +176,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}
                   />
                 ) : (