diff --git a/frontend/src/components/PolicyModal.jsx b/frontend/src/components/PolicyModal.jsx
index ec8c37d..16ba311 100644
--- a/frontend/src/components/PolicyModal.jsx
+++ b/frontend/src/components/PolicyModal.jsx
@@ -16,7 +16,7 @@ export default function PolicyModal({ setPolicyModal }) {
   }
 
   return <>
-    <Modal backgroundColor={`bg-greywhite w-3/4 h-[70vh]`} blurOnClick={() => setPolicyModal(false)}>
+    <Modal backgroundColor={`bg-greywhite w-3/4 h-[70vh] overflow-x-clip`} blurOnClick={() => setPolicyModal(false)}>
       <div className='flex flex-col'>
         <h1 className='font-bold text-2xl text-center'>Portland Indigenous Marketplace Vendor Policy Handbook</h1>
         <h2 className='font-bold text-md text-center text-slate-400'>Updated Aug 2024</h2>
diff --git a/frontend/src/components/violationmodal.jsx b/frontend/src/components/violationmodal.jsx
index 7558c0c..ba529de 100644
--- a/frontend/src/components/violationmodal.jsx
+++ b/frontend/src/components/violationmodal.jsx
@@ -1,82 +1,25 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-function ViolationModal({closeModal, vendorId, vendorName, handleSubmit}) { // added vendor object so we can send message to vendor
-  const [activeButtons, setButtons] = useState([]);
-  const [violationData, setViolationData] = useState({type: '', description: '', vendor_id: vendorId});
+import Modal from './Modal';
+import Violation from '../objects/Violation';
 
+export default function ViolationModal({ closeModal, vendorId, vendorName, handleSubmit }) { // added vendor object so we can send message to vendor
+  const [violationData, setViolationData] = useState(new Violation(-1, -1, '', vendorId));
 
-  // ask if theres a way to disable the header button when the modal opens
-
-  // const handleSubmit = () => {
-  //   console.log(`Posting message(${message}) to ${vendor.name}`);
-  //   console.log('... As long as someone finishes my code');
-  //   if (activeButtons.length == 0) {
-  //     alert('Must select a violated policy to submit!');
-  //     return;
-  //   }
-  //   setViolations();
-  //   closeModal(false);
-  // };
-
-  const handleButtonClick = (content) => {
-    // idea:
-    // search through active button list
-    // if button already present, set the buttons to be all those except that button
-    // otherwise, add button to list
-    if (activeButtons.includes(content)) { // to remove button that was added
-      setButtons(activeButtons.filter((value) => value !== content));
-      return;
-    } else if (activeButtons.length == 1) { // only add one button at a time
-      return;
-    }
-    setButtons([...activeButtons, content]); // add button
-    setViolationData({...violationData, type: content});
-  };
   // changed the code a little bit, easier to use react state and functions than form
-  return (
-    <form action="" className="absolute inset-y-12 inset-x-1/6 mt-auto bg-white drop-shadow-xl rounded-md w-4/6 h-max overflow-y-auto" onSubmit={() => handleSubmit(violationData)}>
-      <h2 className="w-full text-center bg-blue rounded-md h-8 mb-4 text-white">Add Violations To: {vendorName}</h2>
-      <textarea type='text' id="description" name="description" value={violationData.description} className="w-11/12 min-h-[1/5] px-2 pt-1 ml-3 mb-0 rounded-lg border border-2 border-blue placeholder:text-blue placeholder:italic" onChange={(e) => setViolationData({...violationData, description: e.target.value})} placeholder="Enter Message Here ..."></textarea>
-      <h2 className="text-center text-blue">Select Violated Policies</h2>
-      <div className="grid grid-cols-3 gap-x-0 gap-y-1 mb-1">
-        <PolicyButton onClick={() => handleButtonClick(1)} content={1} activebuttons={activeButtons}/>
-        <PolicyButton onClick={() => handleButtonClick(2)} content={2} activebuttons={activeButtons}/>
-        <PolicyButton onClick={() => handleButtonClick(3)} content={3} activebuttons={activeButtons}/>
-        <PolicyButton onClick={() => handleButtonClick(4)} content={4} activebuttons={activeButtons}/>
-        <PolicyButton onClick={() => handleButtonClick(5)} content={5} activebuttons={activeButtons}/>
-        <PolicyButton onClick={() => handleButtonClick(6)} content={6} activebuttons={activeButtons}/>
-        <PolicyButton onClick={() => handleButtonClick(7)} content={7} activebuttons={activeButtons}/>
-        <PolicyButton onClick={() => handleButtonClick(8)} content={8} activebuttons={activeButtons}/>
-        <PolicyButton onClick={() => handleButtonClick(9)} content={9} activebuttons={activeButtons}/>
-        <PolicyButton onClick={() => handleButtonClick(10)} content={10} activebuttons={activeButtons}/>
-        <PolicyButton onClick={() => handleButtonClick(11)} content={11} activebuttons={activeButtons}/>
-      </div>
+  return <Modal blurOnClick={() => closeModal(false)} backgroundColor={`bg-greywhite w-4/5 h-[65vh] overflow-x-clip`}>
+    <form action="" className="flex flex-col gap-4 h-full w-full items-center" onSubmit={() => handleSubmit(violationData)}>
+      <h2 className="text-2xl text-center text-black font-bold">{vendorName}</h2>
+      <h2 className="text-center text-sm text-slate-400">Fill out the form once for each violation - do not try to submit multiple violations in one form.</h2>
+      <p>Policy Number</p>
+      <input id='policynum' className={`drop-shadow-xl rounded-lg border-2 border-blue text-center`} placeholder={1} type='number' max={11} min={1} onChange={e => setViolationData({...violationData, type: e.target.value})}/>
+      <p>Violation Description</p>
+      <textarea type='text' id="description" name="description" value={violationData.description} className="w-5/6 h-40 px-2 py-2 pt-1 rounded-lg border-2 border-blue placeholder:italic" onChange={(e) => setViolationData({ ...violationData, description: e.target.value })} placeholder="Violation description..."></textarea>
       <footer className='flex flex-row justify-center mt-6 pb-2'>
-        <button type="submit" className={`py-2 px-3 mb-1 mr-2 text-white drop-shadow-xl rounded-lg ${activeButtons.length == 0 ? 'hidden' : 'bg-blue'}`}>Submit</button>
+        <button type="submit" className={`py-2 px-3 mb-1 mr-2 text-white drop-shadow-xl rounded-lg bg-blue`}>Submit</button>
         <button className="bg-red py-2 px-3 mb-1 text-white drop-shadow-xl rounded-lg" onClick={() => closeModal(false)}>Cancel</button>
       </footer>
     </form>
-  );
-}
-
-function PolicyButton({activebuttons, content, onClick}) {
-  return (
-    <button type='button' value={content} name="policy" id="policy" className={`${activebuttons.includes(content) ? 'bg-red' : 'bg-blue'} text-white m-1 p-2 rounded-lg drop-shadow_xl`} onClick={onClick}> {content}</button> // used Harley's VendorButtons as inspo
-  );
-}
-
-export default ViolationModal;
-
-ViolationModal.propTypes = {
-  closeModal: PropTypes.func.isRequired,
-  vendorId: PropTypes.number.isRequired,
-  vendorName: PropTypes.string.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
-};
-
-PolicyButton.propTypes = {
-  content: PropTypes.number.isRequired,
-  onClick: PropTypes.func.isRequired,
-  activebuttons: PropTypes.array.isRequired,
-};
+  </Modal>
+}
\ No newline at end of file
diff --git a/frontend/src/objects/Violation.js b/frontend/src/objects/Violation.js
index 1441b77..16c35f3 100644
--- a/frontend/src/objects/Violation.js
+++ b/frontend/src/objects/Violation.js
@@ -1,9 +1,9 @@
 export default class Violation {
-  constructor(id, type, description, vendorId) {
+  constructor(id, type, description, vendor_id) {
     this.id = id;
     this.type = type;
     this.description = description;
-    this.vendorId = vendorId;
+    this.vendor_id = vendor_id;
   }
 
   get json() {
diff --git a/frontend/src/routes/profile.jsx b/frontend/src/routes/profile.jsx
index b67d609..b22ca1c 100644
--- a/frontend/src/routes/profile.jsx
+++ b/frontend/src/routes/profile.jsx
@@ -129,6 +129,12 @@ export default function Profile({ vendorService, violationService }) {
     {
       showUploadModal ? <UploadPhotoModal vendorId={vendorId} vendorService={vendorService} showUploadModal={showUploadModal} setShowUploadModal={setShowUploadModal}></UploadPhotoModal> : <></>
     }
+    {
+      openViolation && <ViolationModal closeModal={setOpenViolation} vendorId={vendorId} vendorName={vendor.name} handleSubmit={handleViolationSubmit} />
+    }
+    {
+      policyModal && (<PolicyModal setPolicyModal={setPolicyModal}></PolicyModal>)
+    }
     <div className='items-center w-screen mt-12 flex flex-col z-1 space-y-4 items-center gap-3'>
       <div className='flex flex-col gap-2 bg-greywhite p-2 px-5 w-10/12 rounded-lg drop-shadow-xl'>
         <div className='flex flex-row items-center'>
@@ -204,15 +210,6 @@ export default function Profile({ vendorService, violationService }) {
             <h1 className='text-xl w-auto font-bold'>Policy Handbook</h1>
           </div>
         </div>}
-      <>
-        {openViolation && (
-          <ViolationModal closeModal={setOpenViolation} vendorId={vendorId} vendorName={vendor.name} handleSubmit={handleViolationSubmit} />
-        )}
-        <div className={`${openViolation ? 'blur' : ''} w-full h-full mx-auto pb-16`}></div>
-      </>
-      {
-        policyModal && (<PolicyModal setPolicyModal={setPolicyModal}></PolicyModal>)
-      }
       <FooterPad />
     </div>
   </>