diff --git a/lesson_25/JBEY/package-lock.json b/lesson_25/JBEY/package-lock.json
index 3a93970a6..ad9666717 100644
--- a/lesson_25/JBEY/package-lock.json
+++ b/lesson_25/JBEY/package-lock.json
@@ -11,11 +11,12 @@
         "@tanstack/react-query": "^5.62.7",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "react-router-dom": "^7.5.3"
+        "react-router-dom": "^7.0.2"
       },
       "devDependencies": {
         "@stylistic/eslint-plugin": "^2.12.1",
         "@trivago/prettier-plugin-sort-imports": "^5.2.0",
+        "@types/node": "^22.15.17",
         "@types/react": "^19.0.1",
         "@types/react-dom": "^19.0.2",
         "@typescript-eslint/eslint-plugin": "^8.18.0",
@@ -1806,6 +1807,12 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -1820,6 +1827,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/node": {
+      "version": "22.15.17",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.17.tgz",
+      "integrity": "sha512-wIX2aSZL5FE+MR0JlvF87BNVrtFWf6AE6rxSE9X7OwnVvoyCQjpzSRJ+M87se/4QCkCiebQAqrJ0y6fwIyi7nw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
     "node_modules/@types/react": {
       "version": "19.0.1",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.1.tgz",
@@ -3353,11 +3370,12 @@
       }
     },
     "node_modules/react-router": {
-      "version": "7.5.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.5.3.tgz",
-      "integrity": "sha512-3iUDM4/fZCQ89SXlDa+Ph3MevBrozBAI655OAfWQlTm9nBR0IKlrmNwFow5lPHttbwvITZfkeeeZFP6zt3F7pw==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.0.2.tgz",
+      "integrity": "sha512-m5AcPfTRUcjwmhBzOJGEl6Y7+Crqyju0+TgTQxoS4SO+BkWbhOrcfZNq6wSWdl2BBbJbsAoBUb8ZacOFT+/JlA==",
       "license": "MIT",
       "dependencies": {
+        "@types/cookie": "^0.6.0",
         "cookie": "^1.0.1",
         "set-cookie-parser": "^2.6.0",
         "turbo-stream": "2.4.0"
@@ -3376,12 +3394,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "7.5.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.5.3.tgz",
-      "integrity": "sha512-cK0jSaTyW4jV9SRKAItMIQfWZ/D6WEZafgHuuCb9g+SjhLolY78qc+De4w/Cz9ybjvLzShAmaIMEXt8iF1Cm+A==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.0.2.tgz",
+      "integrity": "sha512-VJOQ+CDWFDGaWdrG12Nl+d7yHtLaurNgAQZVgaIy7/Xd+DojgmYLosFfZdGz1wpxmjJIAkAMVTKWcvkx1oggAw==",
       "license": "MIT",
       "dependencies": {
-        "react-router": "7.5.3"
+        "react-router": "7.0.2"
       },
       "engines": {
         "node": ">=20.0.0"
@@ -3653,6 +3671,13 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
diff --git a/lesson_25/JBEY/package.json b/lesson_25/JBEY/package.json
index b1ab5044c..ca932917e 100644
--- a/lesson_25/JBEY/package.json
+++ b/lesson_25/JBEY/package.json
@@ -14,11 +14,12 @@
     "@tanstack/react-query": "^5.62.7",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.5.3"
+    "react-router-dom": "^7.0.2"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "^2.12.1",
     "@trivago/prettier-plugin-sort-imports": "^5.2.0",
+    "@types/node": "^22.15.17",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.2",
     "@typescript-eslint/eslint-plugin": "^8.18.0",
diff --git a/lesson_25/JBEY/src/components/button/button.scss b/lesson_25/JBEY/src/components/button/button.scss
new file mode 100644
index 000000000..349a57589
--- /dev/null
+++ b/lesson_25/JBEY/src/components/button/button.scss
@@ -0,0 +1,14 @@
+.programs-section {
+  .custom-button {
+    display: block;
+    margin: 1rem auto 0;
+    padding: 10px 20px;
+    background-color: #ff8000;
+    color: white;
+    font-size: 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+  }
+}
diff --git a/lesson_25/JBEY/src/components/button/button.tsx b/lesson_25/JBEY/src/components/button/button.tsx
new file mode 100644
index 000000000..9c72327fe
--- /dev/null
+++ b/lesson_25/JBEY/src/components/button/button.tsx
@@ -0,0 +1,30 @@
+// This file defines a Button component in React with TypeScript.
+// This is simply the button that you're clicking on to get from page to page.
+import './Button.scss';
+
+type ButtonProps = {
+  label: string;
+  onClick?: () => void;
+  type?: 'button' | 'submit' | 'reset';
+  disabled?: boolean;
+};
+
+const Button: React.FC<ButtonProps> = ({
+  label,
+  onClick,
+  type = 'button',
+  disabled = false,
+}) => {
+  return (
+    <button
+      className="custom-button"
+      onClick={onClick}
+      type={type}
+      disabled={disabled}
+    >
+      {label}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/lesson_25/JBEY/src/components/header/Header.tsx b/lesson_25/JBEY/src/components/header/Header.tsx
index 2f9ee3830..df91eb006 100644
--- a/lesson_25/JBEY/src/components/header/Header.tsx
+++ b/lesson_25/JBEY/src/components/header/Header.tsx
@@ -20,9 +20,6 @@ export const Header: React.FC = () => {
         <li>
           <a href="#">Contact</a>
         </li>
-        <li>
-          <a href="/add-program">Add New Program</a>
-        </li>
       </ul>
       <div className="header-cta">
         <a className="sign-up-button" href="#">
diff --git a/lesson_25/JBEY/src/components/program/AddProgramPage.tsx b/lesson_25/JBEY/src/components/program/AddProgramPage.tsx
deleted file mode 100644
index 2ba7ae29f..000000000
--- a/lesson_25/JBEY/src/components/program/AddProgramPage.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-// AddProgramPage.tsx
-import React, {useState} from 'react';
-
-const AddProgramPage: React.FC = () => {
-  const [title, setTitle] = useState('');
-  const [description, setDescription] = useState('');
-  const [submitted, setSubmitted] = useState(false);
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    // You would usually send this data to a server or context here
-    console.log('New Program:', {title, description});
-    setSubmitted(true);
-    setTitle('');
-    setDescription('');
-  };
-
-  return (
-    <div className="add-program-page">
-      <h2>Add New Program</h2>
-      {submitted && <p style={{color: 'green'}}>Program submitted!</p>}
-      <form onSubmit={handleSubmit}>
-        <div>
-          <label htmlFor="title">Title:</label>
-          <br />
-          <input
-            id="title"
-            type="text"
-            value={title}
-            onChange={e => setTitle(e.target.value)}
-            required
-          />
-        </div>
-        <div>
-          <label htmlFor="description">Description:</label>
-          <br />
-          <textarea
-            id="description"
-            value={description}
-            onChange={e => setDescription(e.target.value)}
-            required
-          />
-        </div>
-        <button type="submit">Add Program</button>
-      </form>
-    </div>
-  );
-};
-
-export default AddProgramPage;
diff --git a/lesson_25/JBEY/src/components/program/Program.tsx b/lesson_25/JBEY/src/components/program/Program.tsx
index f96e89fcf..8b072abe6 100644
--- a/lesson_25/JBEY/src/components/program/Program.tsx
+++ b/lesson_25/JBEY/src/components/program/Program.tsx
@@ -1,16 +1,16 @@
-// Program.tsx
-import React from 'react';
+// This is an inferface for ProgramList. ProgramList will import this interface
+// and use it to define the type of the props that it will pass to Program.
 
-interface ProgramProps {
-  title: string;
-  description: string;
+interface ProgramStuff {
+  top: string;
+  bottom: string;
 }
 
-export const Program: React.FC<ProgramProps> = ({title, description}) => {
+export const Program = ({top, bottom}: ProgramStuff) => {
   return (
-    <li className="program">
-      <h3>{title}</h3>
-      <p>{description}</p>
-    </li>
+    <>
+      <h3>{top}</h3>
+      <p>{bottom}</p>
+    </>
   );
 };
diff --git a/lesson_25/JBEY/src/components/program/ProgramList.tsx b/lesson_25/JBEY/src/components/program/ProgramList.tsx
deleted file mode 100644
index 4b021d433..000000000
--- a/lesson_25/JBEY/src/components/program/ProgramList.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-// ProgramList.tsx
-import {Program} from './Program';
-import React from 'react';
-
-const programs = [
-  {
-    title: 'Swine Short Loin',
-    description:
-      'Swine short loin burgdoggen ball tip, shank ham hock bacon. Picanha strip steak pork, swine boudin ham meatball meatloaf leberkas sausage. Turkey beef andouille kielbasa rump pastrami biltong chislic alcatra buffalo prosciutto jowl. Pastrami chicken sirloin swine capicola landjaeger jowl boudin pork chop shankle bresaola turducken leberkas ham.',
-  },
-  {
-    title: 'Bacon Ipsum',
-    description:
-      'Bacon ipsum dolor amet leberkas chuck biltong pork loin sirloin bresaola rump frankfurter. Shoulder doner strip steak chuck. Short ribs venison salami chuck sirloin jowl chislic cupim swine cow. Corned beef chuck frankfurter tenderloin venison biltong andouille leberkas kielbasa sausage t-bone turducken fatback. Pork picanha buffalo bacon tail salami meatball, jowl chislic.',
-  },
-  {
-    title: 'Picanha Swine Jowl',
-    description:
-      'Picanha swine jowl meatball boudin pastrami bresaola fatback shankle pork belly cow. Frankfurter ground round shank corned beef chuck. Jerky frankfurter fatback capicola hamburger, pork prosciutto bresaola ham porchetta rump t-bone pancetta tenderloin. Fatback ham hock prosciutto, tenderloin shoulder salami tri-tip leberkas bacon turducken chislic venison sausage frankfurter.',
-  },
-  {
-    title: 'Kevin Chicken T-Bone',
-    description:
-      'Kevin chicken t-bone spare ribs shankle bacon drumstick kielbasa cow jowl doner salami chuck andouille. Rump spare ribs bresaola frankfurter shankle. Bresaola ribeye turducken, cow leberkas boudin biltong sirloin filet mignon ham pork belly shank. Tenderloin sirloin pancetta pork loin shankle venison turducken boudin. Brisket tenderloin salami ham bresaola burgdoggen.',
-  },
-];
-
-export const ProgramList: React.FC = () => {
-  return (
-    <ul className="programs">
-      {programs.map((program, index) => (
-        <Program
-          key={index}
-          title={program.title}
-          description={program.description}
-        />
-      ))}
-    </ul>
-  );
-};
diff --git a/lesson_25/JBEY/src/components/programList/ProgramList.scss b/lesson_25/JBEY/src/components/programList/ProgramList.scss
new file mode 100644
index 000000000..8c27465b7
--- /dev/null
+++ b/lesson_25/JBEY/src/components/programList/ProgramList.scss
@@ -0,0 +1,13 @@
+.programs {
+  display: flex;
+  flex-flow: row wrap;
+  list-style: none;
+  padding: 0;
+  justify-content: space-between;
+}
+
+.program {
+  display: flex;
+  flex-direction: column;
+  max-width: 48%;
+}
diff --git a/lesson_25/JBEY/src/components/programList/ProgramList.tsx b/lesson_25/JBEY/src/components/programList/ProgramList.tsx
new file mode 100644
index 000000000..f8d1fb0fa
--- /dev/null
+++ b/lesson_25/JBEY/src/components/programList/ProgramList.tsx
@@ -0,0 +1,57 @@
+// This is a simple program component that takes in two strings from Program.tsx and displays them.
+import './ProgramList.scss';
+
+import {Program} from '../program/Program';
+
+export const ProgramList = () => {
+  const programs = [
+    {
+      top: 'Swine Short Loin',
+      bottom: `Swine short loin burgdoggen ball tip, shank ham hock bacon.
+      Picanha strip steak pork, swine boudin ham meatball meatloaf
+      leberkas sausage. Turkey beef andouille kielbasa rump pastrami
+      biltong chislic alcatra buffalo prosciutto jowl. Pastrami chicken
+      sirloin swine capicola landjaeger jowl boudin pork chop shankle
+      bresaola turducken leberkas ham.`,
+    },
+    {
+      top: 'Bacon Ipsum',
+      bottom: `Bacon ipsum dolor amet leberkas chuck biltong pork loin sirloin
+      bresaola rump frankfurter. Shoulder doner strip steak chuck. Short
+      ribs venison salami chuck sirloin jowl chislic cupim swine cow.
+      Corned beef chuck frankfurter tenderloin venison biltong andouille
+      leberkas kielbasa sausage t-bone turducken fatback. Pork picanha
+      buffalo bacon tail salami meatball, jowl chislic.`,
+    },
+    {
+      top: 'Picanha Swine Jowl',
+      bottom: `Picanha swine jowl meatball boudin pastrami bresaola fatback
+      shankle pork belly cow. Frankfurter ground round shank corned beef
+      chuck. Jerky frankfurter fatback capicola hamburger, pork
+      prosciutto bresaola ham porchetta rump t-bone pancetta tenderloin.
+      Fatback ham hock prosciutto, tenderloin shoulder salami tri-tip
+      leberkas bacon turducken chislic venison sausage frankfurter.`,
+    },
+    {
+      top: 'Kevin Chicken T-Bone',
+      bottom: `Kevin chicken t-bone spare ribs shankle bacon drumstick kielbasa
+      cow jowl doner salami chuck andouille. Rump spare ribs bresaola
+      frankfurter shankle. Bresaola ribeye turducken, cow leberkas
+      boudin biltong sirloin filet mignon ham pork belly shank.
+      Tenderloin sirloin pancetta pork loin shankle venison turducken
+      boudin. Brisket tenderloin salami ham bresaola burgdoggen.`,
+    },
+  ];
+
+  return (
+    <>
+      <ul className="programs">
+        {programs.map((program, index) => (
+          <Program key={index} top={program.top} bottom={program.bottom} />
+        ))}
+      </ul>
+    </>
+  );
+};
+
+export default ProgramList;
diff --git a/lesson_25/JBEY/src/main.tsx b/lesson_25/JBEY/src/main.tsx
index 06e00a9d2..ca4742646 100644
--- a/lesson_25/JBEY/src/main.tsx
+++ b/lesson_25/JBEY/src/main.tsx
@@ -1,11 +1,13 @@
+// This file defines the router paths.
 import App from './App.tsx';
 import {Home} from './pages/Home/Home.tsx';
+import AcceptedForm from './pages/acceptedForm/acceptedForm.tsx';
+import {NewProgram} from './pages/newProgram/newProgram.tsx';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import {RouterProvider, createBrowserRouter} from 'react-router-dom';
 
-import AddProgramPage from './components/program/AddProgramPage.tsx';
 import './index.scss';
 
 const queryClient = new QueryClient();
@@ -20,8 +22,12 @@ const router = createBrowserRouter([
         element: <Home />,
       },
       {
-        path: '/add-program',
-        element: <AddProgramPage />,
+        path: '/new-program',
+        element: <NewProgram />,
+      },
+      {
+        path: '/accepted-form',
+        element: <AcceptedForm />,
       },
     ],
   },
diff --git a/lesson_25/JBEY/src/pages/Home/Home.scss b/lesson_25/JBEY/src/pages/Home/Home.scss
index 0d0f65029..b3f4eb6b6 100644
--- a/lesson_25/JBEY/src/pages/Home/Home.scss
+++ b/lesson_25/JBEY/src/pages/Home/Home.scss
@@ -59,20 +59,6 @@ article {
   flex-direction: column;
   max-width: 1280px;
   margin: auto;
-
-  .programs {
-    display: flex;
-    flex-flow: row wrap;
-    list-style: none;
-    padding: 0;
-    justify-content: space-between;
-  }
-}
-
-.program {
-  display: flex;
-  flex-direction: column;
-  max-width: 48%;
 }
 
 @media screen and (max-width: 1080px) {
diff --git a/lesson_25/JBEY/src/pages/Home/Home.tsx b/lesson_25/JBEY/src/pages/Home/Home.tsx
index b77477af8..cc582ec1a 100644
--- a/lesson_25/JBEY/src/pages/Home/Home.tsx
+++ b/lesson_25/JBEY/src/pages/Home/Home.tsx
@@ -1,13 +1,11 @@
-// Home.tsx
+// This is the home page of the application.
+// This is the very first thing you see when you open the browser.
 import './Home.scss';
 import React from 'react';
 import {Link} from 'react-router-dom';
 
-import {ProgramList} from '../../components/program/ProgramList';
-
-<Link to="/add-program">
-  <button>Add New Program</button>
-</Link>;
+import Button from '../../components/button/button';
+import {ProgramList} from '../../components/programList/ProgramList';
 
 export const Home: React.FC = () => {
   return (
@@ -32,6 +30,9 @@ export const Home: React.FC = () => {
           Our <em className="highlight">Programs</em>
         </h2>
         <ProgramList />
+        <Link to="/new-program">
+          <Button label="New Program" />
+        </Link>
       </section>
     </article>
   );
diff --git a/lesson_25/JBEY/src/pages/acceptedForm/acceptedForm.scss b/lesson_25/JBEY/src/pages/acceptedForm/acceptedForm.scss
new file mode 100644
index 000000000..868cb42d7
--- /dev/null
+++ b/lesson_25/JBEY/src/pages/acceptedForm/acceptedForm.scss
@@ -0,0 +1,25 @@
+.container {
+  min-height: 100vh;
+  justify-content: center;
+}
+
+h2 {
+  text-align: center;
+}
+
+button {
+  background-color: #ff7b00;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 14px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  text-align: center;
+}
+
+.card {
+  text-align: center;
+  flex-direction: column;
+}
diff --git a/lesson_25/JBEY/src/pages/acceptedForm/acceptedForm.tsx b/lesson_25/JBEY/src/pages/acceptedForm/acceptedForm.tsx
new file mode 100644
index 000000000..4fc74cb54
--- /dev/null
+++ b/lesson_25/JBEY/src/pages/acceptedForm/acceptedForm.tsx
@@ -0,0 +1,20 @@
+// This is the page that is displayed when the user submits a program.
+import './acceptedForm.scss';
+import {Link} from 'react-router-dom';
+
+import Button from '@/components/button/button';
+
+export const AcceptedForm = () => {
+  return (
+    <div className="container">
+      <div className="card">
+        <h2>Program Submitted!</h2>
+        <p>Your program has been submitted. Congratulations!</p>
+        <Link to="/">
+          <Button label="Home" />
+        </Link>
+      </div>
+    </div>
+  );
+};
+export default AcceptedForm;
diff --git a/lesson_25/JBEY/src/pages/newProgram/newProgram.scss b/lesson_25/JBEY/src/pages/newProgram/newProgram.scss
new file mode 100644
index 000000000..bb0bc4e7a
--- /dev/null
+++ b/lesson_25/JBEY/src/pages/newProgram/newProgram.scss
@@ -0,0 +1,65 @@
+h1 {
+  font-size: 24px;
+  text-align: center;
+  margin-bottom: 20px;
+  color: #007bff;
+}
+
+p {
+  font-size: 16px;
+  text-align: center;
+  color: #666;
+  margin-bottom: 30px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+label {
+  display: block;
+  font-size: 14px;
+  margin-bottom: 8px;
+  color: #333;
+}
+
+input[type='text'],
+input[type='email'],
+input[type='password'],
+textarea {
+  width: 100%;
+  padding: 12px;
+  font-size: 16px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  transition: border-color 0.3s;
+}
+
+input[type='text']:focus,
+input[type='email']:focus,
+input[type='password']:focus,
+textarea:focus {
+  border-color: #007bff;
+  outline: none;
+}
+
+textarea {
+  resize: vertical;
+  min-height: 100px;
+}
+
+button[type='submit'] {
+  width: 100%;
+  padding: 14px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+button[type='submit']:hover {
+  background-color: #0056b3;
+}
diff --git a/lesson_25/JBEY/src/pages/newProgram/newProgram.tsx b/lesson_25/JBEY/src/pages/newProgram/newProgram.tsx
new file mode 100644
index 000000000..8ff24a761
--- /dev/null
+++ b/lesson_25/JBEY/src/pages/newProgram/newProgram.tsx
@@ -0,0 +1,51 @@
+// This is the page that the button leads to when you click on it.
+// It is the form page.
+import './newProgram.scss';
+import {useState} from 'react';
+import {useNavigate} from 'react-router-dom';
+
+import Button from '@/components/button/button';
+
+export const NewProgram = () => {
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const navigate = useNavigate();
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    console.log('Submitted:', {title, content});
+    setTitle('');
+    setContent('');
+    navigate('/accepted-form');
+  };
+
+  return (
+    <div className="container">
+      <div className="back">
+        <h1>Add new program here:</h1>
+        <form onSubmit={handleSubmit} className="form">
+          <label>
+            Program name:
+            <input
+              id="title"
+              type="text"
+              value={title}
+              onChange={e => setTitle(e.target.value)}
+              required
+            />
+          </label>
+          <label>
+            Description:
+            <textarea
+              id="content"
+              value={content}
+              onChange={e => setContent(e.target.value)}
+              required
+            />
+          </label>
+          <Button label="Submit" type="submit" />
+        </form>
+      </div>
+    </div>
+  );
+};