diff --git a/frontend/src/main-page/grants/grant-details/CostBenefitAnalysis.tsx b/frontend/src/main-page/grants/grant-details/CostBenefitAnalysis.tsx
index d6569b3..180d193 100644
--- a/frontend/src/main-page/grants/grant-details/CostBenefitAnalysis.tsx
+++ b/frontend/src/main-page/grants/grant-details/CostBenefitAnalysis.tsx
@@ -56,10 +56,7 @@ export const CostBenefitAnalysis: React.FC<CostBenefitAnalysisProps> = ({ grant
       </label>
       
       <div 
-        className="cost-benefit-container p-1 rounded-lg h-full flex flex-col"
-        style={{
-          backgroundColor: 'white'
-        }}
+        className="cost-benefit-container p-1 rounded-lg h-full flex flex-col bg-white"
       >
         {/* Hourly Rate Input */}
         <div className="mb-3">
@@ -71,8 +68,7 @@ export const CostBenefitAnalysis: React.FC<CostBenefitAnalysisProps> = ({ grant
             placeholder="Enter rate"
             value={hourlyRate}
             onChange={(e) => setHourlyRate(e.target.value)}
-            className="w-full h-[42px]  px-3 py-4 border border-gray-400 rounded-md"
-            style={{ backgroundColor: '#F2EBE4' }}
+            className="w-full h-[42px]  px-3 py-4 border border-gray-400 rounded-md bg-[#F2EBE4]"
           />
         </div>
 
@@ -89,22 +85,14 @@ export const CostBenefitAnalysis: React.FC<CostBenefitAnalysisProps> = ({ grant
                 console.log('Time per report changed to:', e.target.value);
                 setTimePerReport(e.target.value);
             }}
-            className="w-full h-[42px] px-3 py-4 border border-gray-400 rounded-md"
-            style={{ backgroundColor: '#F2EBE4' }}
+            className="w-full h-[42px] px-3 py-4 border border-gray-400 rounded-md bg-[#F2EBE4]"
           />
         </div>
 
         {/* Calculate Button */}
         <button
           onClick={calculateNetBenefit}
-          className="w-full py-1 px-4 rounded-md mb-7"
-          style={{
-            backgroundColor: '#F58D5C',
-            color: 'black',
-            borderStyle: 'solid',
-            borderColor: 'black',
-            borderWidth: '1px'
-          }}
+          className="w-full py-1 px-4 rounded-md mb-7 bg-[#F58D5C] text-black border border-black"
         >
           calculate
         </button>
@@ -114,19 +102,9 @@ export const CostBenefitAnalysis: React.FC<CostBenefitAnalysisProps> = ({ grant
             <span className="text-sm font-semibold"> Net Benefit:</span>
         <div
           onClick={calculateNetBenefit}
-          className="w-1/2 py-2 px-4 rounded-md"
-          style={{
-            backgroundColor: '#F2EBE4',
-            color: netBenefit !== null ? 'black' : 'gray',
-            borderStyle: 'solid',
-            borderColor: 'black',
-            borderWidth: '1px',
-            overflow: 'auto',
-            textAlign: 'center',
-            whiteSpace: 'nowrap',
-            scrollbarWidth: 'none',
-            msOverflowStyle: 'none'
-          }}
+          className={`w-1/2 py-2 px-4 rounded-md bg-[#F2EBE4] border border-black overflow-auto text-center whitespace-nowrap [scrollbar-width:none] [-ms-overflow-style:none] ${
+            netBenefit !== null ? 'text-black' : 'text-gray-500'
+          }`}
         >
           {netBenefit !== null ? formatCurrency(netBenefit) : 'Analysis'}
         </div>
diff --git a/frontend/src/main-page/grants/grant-list/GrantItem.tsx b/frontend/src/main-page/grants/grant-list/GrantItem.tsx
index 36694c2..e7b766b 100644
--- a/frontend/src/main-page/grants/grant-list/GrantItem.tsx
+++ b/frontend/src/main-page/grants/grant-list/GrantItem.tsx
@@ -177,7 +177,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
               : "No date"}
           </li>
           <li className="amount">{formatCurrency(curGrant.amount)}</li>
-          <li className="does-bcan-qualify px-8" style={{ width: "100%" }}>
+          <li className="does-bcan-qualify px-8 w-full" >
             {curGrant.does_bcan_qualify ? (
               <RingButton
                 text={DoesBcanQualifyText.Yes}
@@ -227,11 +227,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                               Application Date
                             </label>
                             <div
-                              style={{
-                                color: "black",
-                                backgroundColor: "#D3D3D3",
-                              }}
-                              className="h-9  flex items-center justify-center w-full rounded-full px-4"
+                              className="bg-[#D3D3D3] text-black h-9 flex items-center justify-center w-full rounded-full px-4"
                             >
                               {formatDate(curGrant.application_deadline)}
                             </div>
@@ -245,14 +241,9 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                               Grant Start Date
                             </label>
                             <div
-                              style={{
-                                color: "black",
-                                backgroundColor: "#D3D3D3",
-                                fontStyle: curGrant.grant_start_date
-                                  ? "normal"
-                                  : "italic",
-                              }}
-                              className="h-9 flex items-center justify-center w-full rounded-full px-4"
+                              className={`bg-[#D3D3D3] text-black h-9 flex items-center justify-center w-full rounded-full px-4 ${
+                                curGrant.grant_start_date ? "normal" : "italic"
+                              }`}
                             >
                               {curGrant.grant_start_date
                                 ? formatDate(curGrant.grant_start_date)
@@ -272,13 +263,9 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                             Estimated Completion Time
                           </label>
                           <div
-                            style={{
-                              color: "black",
-                              fontStyle: curGrant.estimated_completion_time
-                                ? "normal"
-                                : "italic",
-                            }}
-                            className="text-left  sm:text-sm lg:text-base h-10 flex w-2/3  "
+                            className={`text-left sm:text-sm lg:text-base h-10 flex w-2/3 text-black ${
+                              curGrant.estimated_completion_time ? "normal" : "italic"
+                            }`}
                           >
                             {curGrant.estimated_completion_time
                               ? curGrant.estimated_completion_time + " hours"
@@ -296,13 +283,9 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                               Timeline
                             </label>
                             <div
-                              style={{
-                                color: "black",
-                                fontStyle: curGrant.timeline
-                                  ? "normal"
-                                  : "italic",
-                              }}
-                              className="text-left  sm:text-sm lg:text-base h-10 w-full"
+                              className={`text-left sm:text-sm lg:text-base h-10 w-full text-black ${
+                                curGrant.timeline ? "" : "italic"
+                              }`}
                             >
                               {curGrant.timeline
                                 ? curGrant.timeline + " years"
@@ -318,8 +301,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                               Amount
                             </label>
                             <div
-                              style={{ color: "black" }}
-                              className="text-left  sm:text-sm lg:text-base h-10 w-full"
+                              className="text-left sm:text-sm lg:text-base h-10 w-full text-black"
                             >
                               {formatCurrency(curGrant.amount)}
                             </div>
@@ -336,13 +318,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                           Report Deadlines
                         </label>
                         <div
-                          className="p-2 rounded-md h-[13.5rem] w-4/5  overflow-auto grip "
-                          style={{
-                            backgroundColor: "#F58D5C",
-                            borderStyle: "solid",
-                            borderColor: "black",
-                            borderWidth: "1px",
-                          }}
+                          className="p-2 rounded-md h-[13.5rem] w-4/5 overflow-auto grip bg-[#F58D5C] border border-black"
                         >
                           {/*Map each available report deadline to a div label
                     If no deadlines, add "No deadlines" text */}
@@ -352,11 +328,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                               (deadline: string, index: number) => (
                                 <div
                                   key={index}
-                                  style={{
-                                    color: "black",
-                                    backgroundColor: "#D3D3D3",
-                                  }}
-                                  className="h-10 flex items-center justify-center w-full rounded-full mb-2 px-4"
+                                  className="h-10 flex items-center justify-center w-full rounded-full mb-2 px-4 bg-[#D3D3D3] text-black"
                                 >
                                   {formatDate(deadline)}
                                 </div>
@@ -435,16 +407,10 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                         </label>
                         {/*Box div*/}
                         <div
-                          className="items-center flex rounded-md"
-                          style={{
-                            backgroundColor: "#F58D5C",
-                            borderColor: "black",
-                            borderWidth: "1px",
-                          }}
+                          className="items-center flex rounded-md bg-[#F58D5C] border border-black"
                         >
                           <MdOutlinePerson2 className="w-1/5 h-full p-1" />
                           <div
-                            style={{ backgroundColor: "#F2EBE4" }}
                             className="w-4/5 border-l border-black bg-[#FFCEB6] rounded-r-md"
                           >
                             <h2
@@ -485,13 +451,11 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                             Does BCAN qualify?
                           </label>
                           <div
-                            style={{
-                              color: "black",
-                              backgroundColor: curGrant.does_bcan_qualify
+                            className={`w-3/5 h-9 flex items-center justify-center rounded-full px-4 text-black ${
+                              curGrant.does_bcan_qualify
                                 ? ButtonColorOption.GREEN
-                                : ButtonColorOption.GRAY,
-                            }}
-                            className="w-3/5 h-9 flex items-center justify-center rounded-full  px-4"
+                                : ButtonColorOption.GRAY
+                            }`}
                           >
                             {curGrant.does_bcan_qualify ? "Yes" : "No"}
                           </div>
@@ -506,16 +470,13 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                             Status
                           </label>
                           <div
-                            style={{
-                              color: "black",
-                              backgroundColor:
-                                curGrant.status === "Active"
-                                  ? ButtonColorOption.GREEN
-                                  : curGrant.status === "Potential"
-                                  ? ButtonColorOption.ORANGE
-                                  : ButtonColorOption.GRAY,
-                            }}
-                            className="w-3/5 h-9 flex items-center justify-center rounded-full  px-4"
+                            className={`w-3/5 h-9 flex items-center justify-center rounded-full px-4 text-black ${
+                              curGrant.status === "Active"
+                                ? ButtonColorOption.GREEN
+                                : curGrant.status === "Potential"
+                                ? ButtonColorOption.ORANGE
+                                : ButtonColorOption.GRAY
+                            }`}
                           >
                             {curGrant.status}
                           </div>
@@ -530,13 +491,9 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                             Is BCAN Restricted?
                           </label>
                           <div
-                            style={{
-                              color: "black",
-                              backgroundColor: curGrant.isRestricted
-                                ? "indianred"
-                                : ButtonColorOption.GRAY,
-                            }}
-                            className="w-3/5 h-9 flex items-center justify-center rounded-full  px-4"
+                            className={`w-3/5 h-9 flex items-center justify-center rounded-full px-4 text-black ${
+                              curGrant.isRestricted ? "bg-[#CD5C5C]" : ButtonColorOption.GRAY
+                            }`}
                           >
                             {curGrant.isRestricted
                               ? "Restricted"
@@ -552,13 +509,9 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                           Scope Documents
                         </label>
                         <div
-                          className="p-2 rounded-md h-[11.5rem] overflow-auto grip grid-cols-1 gap-4"
-                          style={{
-                            backgroundColor: ButtonColorOption.GRAY,
-                            borderStyle: "solid",
-                            borderColor: "black",
-                            borderWidth: "1px",
-                          }}
+                          className={`p-2 rounded-md h-[11.5rem] overflow-auto grip grid-cols-1 gap-4 border border-black ${
+                            ButtonColorOption.GRAY
+                          }`}
                         >
                           {/*Map each available report deadline to a div label
                       If no deadlines, add "No deadlines" text */}
@@ -570,14 +523,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                                   {attachment.url && (
                                     <div
                                       key={index}
-                                      style={{
-                                        color: "black",
-                                        borderStyle: "solid",
-                                        borderColor: "black",
-                                        borderWidth: "1px",
-                                        height: "42px",
-                                      }}
-                                      className="items-center truncate overflow-x-scroll overflow-hidden text-left justify-center w-full rounded-md p-2 mb-2 bg-tan"
+                                      className="items-center truncate overflow-x-scroll overflow-hidden text-left justify-center w-full rounded-md p-2 mb-2 bg-tan h-[42px] border border-black text-black"
                                     >
                                       <a
                                         href={attachment.url}
@@ -625,13 +571,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                 Description
               </label>
               <div
-                style={{
-                  color: "black",
-                  borderStyle: "solid",
-                  borderColor: "black",
-                  borderWidth: "1px",
-                }}
-                className="h-64 bg-tan flex  w-full rounded-md  p-5 overflow-auto"
+                className="h-64 bg-tan flex w-full rounded-md p-5 overflow-auto border border-black text-black"
               >
                 {curGrant.description}
                 </div>
@@ -642,14 +582,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                 <div className="flex justify-between items-center w-full mt-6">
                   <>
                     <button
-                      style={{
-                        backgroundColor: "indianred",
-                        color: "white",
-                        borderStyle: "solid",
-                        borderColor: "#8B0000",
-                        borderWidth: "1px",
-                      }}
-                      className="py-2 px-4 rounded-md hover:bg-red-600 transition-colors"
+                      className="py-2 px-4 rounded-md hover:bg-red-600 transition-colors bg-[#CD5C5C] text-white border border-[#8B0000]"
                       onClick={() => setShowDeleteModal(true)}
                     >
                       Delete
@@ -670,28 +603,16 @@ const GrantItem: React.FC<GrantItemProps> = observer(
 
                   <div className="space-x-4">
                     <button
-                      style={{
-                        backgroundColor: "white",
-                        color: "black",
-                        borderStyle: "solid",
-                        borderColor: "black",
-                        borderWidth: "1px",
-                      }}
-                      className="py-2 px-4 rounded-md"
+                      className="py-2 px-4 rounded-md bg-white text-black border border-black"
                       onClick={() => setIsExpanded(false)}
                     >
                       {"Close"}
                     </button>
 
                     <button
-                      style={{
-                        backgroundColor: ButtonColorOption.ORANGE,
-                        color: "black",
-                        borderStyle: "solid",
-                        borderColor: "black",
-                        borderWidth: "1px",
-                      }}
-                      className="py-2 px-4 rounded-md"
+                      className={`py-2 px-4 rounded-md text-black border border-black ${
+                        ButtonColorOption.ORANGE
+                      }`}
                       onClick={() => setShowNewGrantModal(true)}
                     >
                       {"Edit"}
diff --git a/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx b/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx
index 285a6e4..a3eaa67 100644
--- a/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx
+++ b/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx
@@ -470,14 +470,7 @@ const NewGrantModal: React.FC<{
                 Organization Name *
               </label>
               <input
-                style={{
-                  height: "42px",
-                  backgroundColor: "#F2EBE4",
-                  borderStyle: "solid",
-                  borderColor: "black",
-                  borderWidth: "1px",
-                }}
-                className=" font-family-helvetica block w-full text-black placeholder:text-gray-400 border rounded py-3 px-4 mb-3 leading-tight"
+                className="font-family-helvetica block w-full h-[42px] bg-[#F2EBE4] text-black placeholder:text-gray-400 border border-black rounded py-3 px-4 mb-3 leading-tight"
                 id="grid-first-name"
                 type="text"
                 placeholder="Type Here"
@@ -501,15 +494,9 @@ const NewGrantModal: React.FC<{
                       Application Date *
                     </label>
                     <input
-                      style={{
-                        height: "42px",
-                        backgroundColor: "#F2EBE4",
-                        borderStyle: "solid",
-                        borderColor: "black",
-                        borderWidth: "1px",
-                        color: applicationDate ? "black" : "gray",
-                      }}
-                      className="font-family-helvetica appearance-none block w-full border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+                      className={`font-family-helvetica appearance-none block w-full h-[42px] bg-[#F2EBE4] border border-black rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500 ${
+                        applicationDate ? "text-black" : "text-gray-500"
+                      }`}
                       id="grid-city"
                       type="date"
                       value={
@@ -529,15 +516,9 @@ const NewGrantModal: React.FC<{
                       Grant Start Date *
                     </label>
                     <input
-                      style={{
-                        height: "42px",
-                        backgroundColor: "#F2EBE4",
-                        borderStyle: "solid",
-                        borderColor: "black",
-                        borderWidth: "1px",
-                        color: grantStartDate ? "black" : "gray",
-                      }}
-                      className="font-family-helvetica w-full appearance-none block w-full bg-gray-200 text-black placeholder:text-gray-400 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+                      className={`font-family-helvetica w-full appearance-none block w-full h-[42px] bg-[#F2EBE4] placeholder:text-gray-400 border border-black rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500 ${
+                        grantStartDate ? "text-black" : "text-gray-500"
+                      }`}
                       id="grid-city"
                       type="date"
                       value={grantStartDate ? grantStartDate.split("T")[0] : ""}
@@ -559,14 +540,7 @@ const NewGrantModal: React.FC<{
                   <input
                     type="number"
                     min="0"
-                    style={{
-                      height: "42px",
-                      backgroundColor: "#F2EBE4",
-                      borderStyle: "solid",
-                      borderColor: "black",
-                      borderWidth: "1px",
-                    }}
-                    className="font-family-helvetica appearance-none block w-full bg-gray-200 text-black placeholder:text-gray-400 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+                    className="font-family-helvetica appearance-none block w-full h-[42px] bg-[#F2EBE4] text-black placeholder:text-gray-400 border border-black rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                     id="grid-city"
                     value={estimatedCompletionTimeInHours}
                     onChange={(e) =>
@@ -587,25 +561,10 @@ const NewGrantModal: React.FC<{
                     Report Deadlines
                   </label>
                   <div
-                    className="p-2 rounded sm:h-52 xl:h-40 overflow-y-auto overflow-x-hidden"
-                    style={{
-                      backgroundColor: "#D3D3D3",
-                      borderStyle: "solid",
-                      borderColor: "black",
-                      borderWidth: "1px",
-                      borderRadius: "1.2rem",
-                    }}
+                    className="p-2 rounded-[1.2rem] sm:h-52 xl:h-40 overflow-y-auto overflow-x-hidden bg-[#D3D3D3] border border-black"
                   >
                     <button
-                      style={{
-                        height: "42px",
-                        color: "black",
-                        backgroundColor: "#F58D5C",
-                        borderStyle: "solid",
-                        borderColor: "black",
-                        borderWidth: "1px",
-                      }}
-                      className="font-family-helvetica w-full text-xs mb-2 flex items-center justify-center "
+                      className="font-family-helvetica w-full h-[42px] text-xs mb-2 flex items-center justify-center bg-[#F58D5C] text-black border border-black"
                       onClick={_addReportDate}
                     >
                       Add Deadline +
@@ -614,14 +573,7 @@ const NewGrantModal: React.FC<{
                       <div key={index} className="flex gap-2 mb-2 w-full">
                         <input
                           key={index}
-                          style={{
-                            height: "42px",
-                            backgroundColor: "#F2EBE4",
-                            borderStyle: "solid",
-                            borderColor: "black",
-                            borderWidth: "1px",
-                          }}
-                          className="font-family-helvetica flex-1 min-w-0 text-black rounded"
+                          className="font-family-helvetica flex-1 min-w-0 h-[42px] bg-[#F2EBE4] text-black rounded border border-black"
                           type="date"
                           value={
                             date
@@ -638,14 +590,7 @@ const NewGrantModal: React.FC<{
                         />
                         {reportDates.length > 0 && (
                           <button
-                            style={{
-                              height: "42px",
-                              backgroundColor: "#FF6B6B",
-                              borderStyle: "solid",
-                              borderColor: "black",
-                              borderWidth: "1px",
-                            }}
-                            className="font-family-helvetica w-5 flex-shrink-0 rounded text-white font-bold flex items-center justify-center"
+                            className="font-family-helvetica w-5 h-[42px] flex-shrink-0 rounded text-white font-bold flex items-center justify-center bg-[#FF6B6B] border border-black"
                             onClick={() => _removeReportDate(index)}
                           >
                             ✕
@@ -668,14 +613,7 @@ const NewGrantModal: React.FC<{
                   Timeline (in years) *
                 </label>
                 <input
-                  style={{
-                    height: "42px",
-                    backgroundColor: "#F2EBE4",
-                    borderStyle: "solid",
-                    borderColor: "black",
-                    borderWidth: "1px",
-                  }}
-                  className="font-family-helvetica appearance-none block w-full bg-gray-200 text-black placeholder:text-gray-400 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
+                  className="font-family-helvetica appearance-none block w-full h-[42px] bg-[#F2EBE4] text-black placeholder:text-gray-400 border border-black rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
                   type="number"
                   min="0"
                   placeholder="Type Here"
@@ -693,15 +631,7 @@ const NewGrantModal: React.FC<{
                   Amount (in $) *
                 </label>
                 <CurrencyInput
-                  style={{
-                    height: "42px",
-                    backgroundColor: "#F2EBE4",
-                    borderStyle: "solid",
-                    borderColor: "black",
-                    borderWidth: "1px",
-                    marginBottom: "2px",
-                  }}
-                  className="font-family-helvetica appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded px-4  leading-tight focus:outline-none focus:bg-white"
+                  className="font-family-helvetica appearance-none block w-full h-[42px] mb-[2px] bg-[#F2EBE4] text-gray-700 border border-black rounded px-4 leading-tight focus:outline-none focus:bg-white"
                   min={0}
                   decimalsLimit={2}
                   placeholder="Type Here"
@@ -721,7 +651,7 @@ const NewGrantModal: React.FC<{
                       BCAN POC *
                   </label>
                   {/*Box div*/} 
-                  <div className="items-center flex p-3 rounded h-full" style={{backgroundColor: "#F58D5C", borderColor: 'black', borderWidth: '1px', borderRadius:"1.2rem"}}>
+                  <div className="items-center flex p-3 rounded-[1.2rem] h-full bg-[#F58D5C] border border-black">
                       <MdOutlinePerson2 className="w-1/4 h-full p-1"/>
                       <div className="w-3/4">
                       <UserDropdown
@@ -732,8 +662,7 @@ const NewGrantModal: React.FC<{
                       }}
                       placeholder="Name"
                       />
-                        <input style={{height: "48px",backgroundColor: '#F2EBE4', borderStyle: 'solid', borderColor: 'black', borderWidth: '1px'}}
-                        className="font-family-helvetica w-full text-gray-700 rounded"
+                        <input className="font-family-helvetica w-full h-[48px] bg-[#F2EBE4] text-gray-700 rounded border border-black"
                          placeholder="e-mail" 
                          value={bcanPocEmail}
                          readOnly
@@ -752,39 +681,19 @@ const NewGrantModal: React.FC<{
                 </label>
                 {/*Box div*/}
                 <div
-                  className="flex p-3 rounded  items-center h-full"
-                  style={{
-                    backgroundColor: "#F58D5C",
-                    borderColor: "black",
-                    borderWidth: "1px",
-                    borderRadius: "1.2rem",
-                  }}
+                  className="flex p-3 rounded-[1.2rem] items-center h-full bg-[#F58D5C] border border-black"
                 >
                   <MdOutlinePerson2 className="sm:p-1 lg:p-2 w-1/4 h-full" />
                   <div className="w-3/4">
                     <input
-                      style={{
-                        height: "42px",
-                        backgroundColor: "#F2EBE4",
-                        borderStyle: "solid",
-                        borderColor: "black",
-                        borderWidth: "1px",
-                      }}
-                      className="font-family-helvetica w-full text-gray-700 rounded"
+                      className="font-family-helvetica w-full h-[42px] bg-[#F2EBE4] text-gray-700 rounded border border-black"
                       id="grid-city"
                       placeholder="Name"
                       value={grantProviderPocName}
                       onChange={(e) => setGrantProviderPocName(e.target.value)}
                     />
                     <input
-                      style={{
-                        height: "42px",
-                        backgroundColor: "#F2EBE4",
-                        borderStyle: "solid",
-                        borderColor: "black",
-                        borderWidth: "1px",
-                      }}
-                      className="font-family-helvetica w-full text-gray-700 rounded"
+                      className="font-family-helvetica w-full h-[42px] bg-[#F2EBE4] text-gray-700 rounded border border-black"
                       id="grid-city"
                       placeholder="e-mail"
                       value={grantProviderPocEmail}
@@ -808,15 +717,9 @@ const NewGrantModal: React.FC<{
                     Does BCAN qualify? *
                   </label>
                   <select
-                    style={{
-                      height: "42px",
-                      backgroundColor: "#F2EBE4",
-                      borderStyle: "solid",
-                      borderColor: "black",
-                      borderWidth: "1px",
-                      color: doesBcanQualify == "" ? "gray" : "black",
-                    }}
-                    className="font-family-helvetica appearance-none block w-full bg-gray-200 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
+                    className={`font-family-helvetica appearance-none block w-full h-[42px] bg-[#F2EBE4] border border-black rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white ${
+                      doesBcanQualify == "" ? "text-gray-500" : "text-black"
+                    }`}
                     id="grid-first-name"
                     value={doesBcanQualify}
                     onChange={(e) => _setDoesBcanQualify(e.target.value)}
@@ -836,15 +739,9 @@ const NewGrantModal: React.FC<{
                     Status
                   </label>
                   <select
-                    style={{
-                      height: "42px",
-                      backgroundColor: "#F2EBE4",
-                      borderStyle: "solid",
-                      borderColor: "black",
-                      borderWidth: "1px",
-                      color: status == null ? "gray" : "black",
-                    }}
-                    className="font-family-helvetica appearance-none block w-full bg-gray-200 text-black placeholder:text-gray-400 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
+                    className={`font-family-helvetica appearance-none block w-full h-[42px] bg-[#F2EBE4] placeholder:text-gray-400 border border-black rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white ${
+                      status == null ? "text-gray-500" : "text-black"
+                    }`}
                     id="grid-first-name"
                     value={status}
                     onChange={(e) => _setStatus(e.target.value as Status)}
@@ -867,16 +764,9 @@ const NewGrantModal: React.FC<{
                     Restriction type *
                   </label>
                   <select
-                    style={{
-                      marginBottom: "0px",
-                      height: "42px",
-                      backgroundColor: "#F2EBE4",
-                      borderStyle: "solid",
-                      borderColor: "black",
-                      borderWidth: "1px",
-                      color: isRestricted == "" ? "gray" : "black",
-                    }}
-                    className="font-family-helvetica appearance-none block w-full bg-gray-200 border border-red-500 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white"
+                    className={`font-family-helvetica appearance-none block w-full h-[42px] bg-[#F2EBE4] border border-black rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white ${
+                      isRestricted == "" ? "text-gray-500" : "text-black"
+                    }`}
                     id="grid-first-name"
                     value={isRestricted}
                     onChange={(e) => _setIsRestricted(e.target.value)}
@@ -903,15 +793,7 @@ const NewGrantModal: React.FC<{
                   <button
                     type="button"
                     onClick={_addAttachment}
-                    style={{
-                      height: "42px",
-                      color: "black",
-                      backgroundColor: "gray",
-                      borderStyle: "solid",
-                      borderColor: "black",
-                      borderWidth: "1px",
-                    }}
-                    className="items-center flex font-family-helvetica w-full mt-1 mb-2 justify-center "
+                    className="items-center flex font-family-helvetica w-full h-[42px] mt-1 mb-2 justify-center bg-gray-500 text-black border border-black"
                   >
                     <FiUpload className="mr-2" />
                     <span>Upload Documents</span>
@@ -925,8 +807,7 @@ const NewGrantModal: React.FC<{
                       <input
                         type="text"
                         placeholder="Name"
-                        className="flex-1 px-2 border border-black rounded-md"
-                        style={{ backgroundColor: "#F2EBE4", height: "42px" }}
+                        className="flex-1 px-2 h-[42px] bg-[#F2EBE4] border border-black rounded-md"
                         value={currentAttachment.attachment_name}
                         onChange={(e) =>
                           setCurrentAttachment({
@@ -938,8 +819,7 @@ const NewGrantModal: React.FC<{
                       <input
                         type="text"
                         placeholder="URL"
-                        className="h-12 flex-1 px-2 border border-black rounded-md"
-                        style={{ backgroundColor: "#F2EBE4", height: "42px" }}
+                        className="flex-1 px-2 h-[42px] bg-[#F2EBE4] border border-black rounded-md"
                         value={currentAttachment.url}
                         onChange={(e) =>
                           setCurrentAttachment({
@@ -949,8 +829,7 @@ const NewGrantModal: React.FC<{
                         }
                       />
                       <select
-                        className="h-12 border border-black rounded-md px-2 items-center justify-center"
-                        style={{ backgroundColor: "#F2EBE4", height: "42px" }}
+                        className="h-[42px] bg-[#F2EBE4] border border-black rounded-md px-2 items-center justify-center"
                         value={currentAttachment.type}
                         onChange={(e) =>
                           setCurrentAttachment({
@@ -970,12 +849,7 @@ const NewGrantModal: React.FC<{
                       <div className="flex justify-end">
                         <button
                           type="button"
-                          style={{
-                            backgroundColor: "#D3D3D3",
-                            color: "black",
-                            height: "21px",
-                          }}
-                          className="mr-2 border border-black rounded-md  flex items-center justify-center"
+                          className="mr-2 h-[21px] bg-[#D3D3D3] text-black border border-black rounded-md flex items-center justify-center"
                           onClick={() => setIsAddingAttachment(false)}
                         >
                           Close
@@ -984,12 +858,7 @@ const NewGrantModal: React.FC<{
                         <button
                           type="button"
                           onClick={_addAttachment}
-                          style={{
-                            backgroundColor: "#F58D5C",
-                            color: "black",
-                            height: "21px",
-                          }}
-                          className="border border-black rounded-md flex items-center justify-center"
+                          className="h-[21px] bg-[#F58D5C] text-black border border-black rounded-md flex items-center justify-center"
                         >
                           Add +
                         </button>
@@ -1000,14 +869,9 @@ const NewGrantModal: React.FC<{
 
                 {/* Gray box showing added links */}
                 <div
-                  className=" p-2 rounded-md overflow-y-auto overflow-x-hidden"
-                  style={{
-                    backgroundColor: "#D3D3D3",
-                    borderStyle: "solid",
-                    borderColor: "black",
-                    borderWidth: "1px",
-                    height: isAddingAttachment ? "77px" : "168px",
-                  }}
+                  className={`p-2 rounded-md overflow-y-auto overflow-x-hidden bg-[#D3D3D3] border border-black ${
+                    isAddingAttachment ? "h-[77px]" : "h-[168px]"
+                  }`}
                 >
                   {attachments
                     .filter((a) => a.url) // show only filled ones
@@ -1017,14 +881,7 @@ const NewGrantModal: React.FC<{
                         className="flex gap-2 mb-2 w-full items-center"
                       >
                         <div
-                          style={{
-                            height: "42px",
-                            backgroundColor: "#F2EBE4",
-                            borderStyle: "solid",
-                            borderColor: "black",
-                            borderWidth: "1px",
-                          }}
-                          className="overflow-hidden rounded-md font-family-helvetica flex-1 min-w-0 text-gray-700 rounded flex items-center px-3 justify-between"
+                          className="overflow-hidden rounded-md font-family-helvetica flex-1 min-w-0 h-[42px] bg-[#F2EBE4] text-gray-700 border border-black flex items-center px-3 justify-between"
                         >
                           <a
                             href={attachment.url}
@@ -1043,14 +900,7 @@ const NewGrantModal: React.FC<{
                           </span>
                         </div>
                         <button
-                          style={{
-                            height: "42px",
-                            backgroundColor: "#FF6B6B",
-                            borderStyle: "solid",
-                            borderColor: "black",
-                            borderWidth: "1px",
-                          }}
-                          className="font-family-helvetica w-5 flex-shrink-0 rounded text-white font-bold flex items-center justify-center"
+                          className="font-family-helvetica w-5 h-[42px] flex-shrink-0 rounded text-white font-bold flex items-center justify-center bg-[#FF6B6B] border border-black"
                           onClick={() => _removeAttachment(index)}
                         >
                           ✕
@@ -1074,13 +924,7 @@ const NewGrantModal: React.FC<{
             Description
           </label>
           <textarea
-            style={{
-              backgroundColor: "#F2EBE4",
-              borderStyle: "solid",
-              borderColor: "black",
-              borderWidth: "1px",
-            }}
-            className="font-family-helvetica h-48 block w-full text-gray-700 border rounded py-3 px-4 mb-3 leading-tight"
+            className="font-family-helvetica h-48 block w-full bg-[#F2EBE4] text-gray-700 border border-black rounded py-3 px-4 mb-3 leading-tight"
             id="grid-first-name"
             value={description}
             onChange={(e) => _setDescription(e.target.value)}
@@ -1088,35 +932,13 @@ const NewGrantModal: React.FC<{
         </div>
         <div className="button-row">
           <button
-            style={{
-              fontFamily: "helvetica",
-              color: "black",
-              backgroundColor: "white",
-              borderStyle: "solid",
-              borderColor: "black",
-              borderWidth: "1px",
-              height: "42px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
+            className="font-family-helvetica h-[42px] flex items-center justify-center text-black bg-white border border-black"
             onClick={onClose}
           >
             Close
           </button>
           <button
-            style={{
-              fontFamily: "helvetica",
-              color: "black",
-              backgroundColor: "#F58D5C",
-              borderStyle: "solid",
-              borderColor: "black",
-              borderWidth: "1px",
-              height: "42px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
+            className="font-family-helvetica h-[42px] flex items-center justify-center text-black bg-[#F58D5C] border border-black"
             onClick={handleSubmit}
           >
             Save
@@ -1128,12 +950,7 @@ const NewGrantModal: React.FC<{
       {showErrorPopup && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
           <div
-            className="bg-white rounded-lg p-6 max-w-md mx-4"
-            style={{
-              borderStyle: "solid",
-              borderColor: "black",
-              borderWidth: "2px",
-            }}
+            className="bg-white rounded-lg p-6 max-w-md mx-4 border-2 border-black"
           >
             <h3 className="font-family-helvetica text-xl font-bold mb-2">
               Error
@@ -1141,14 +958,7 @@ const NewGrantModal: React.FC<{
             <p className="font-family-helvetica mb-4">{_errorMessage}</p>
             <button
               onClick={() => setShowErrorPopup(false)}
-              style={{
-                backgroundColor: "#F58D5C",
-                color: "black",
-                borderStyle: "solid",
-                borderColor: "black",
-                borderWidth: "1px",
-              }}
-              className="font-family-helvetica px-4 py-2 rounded hover:opacity-80"
+              className="font-family-helvetica px-4 py-2 rounded hover:opacity-80 bg-[#F58D5C] text-black border border-black"
             >
               Close
             </button>