diff --git a/client/src/apps/score_calculator/ScoreCalculator.tsx b/client/src/apps/score_calculator/ScoreCalculator.tsx
index c153f0c..57db14b 100644
--- a/client/src/apps/score_calculator/ScoreCalculator.tsx
+++ b/client/src/apps/score_calculator/ScoreCalculator.tsx
@@ -3,6 +3,7 @@ import React, { Dispatch, SetStateAction, useState } from 'react';
 
 import LinkButton from '../../components/LinkButton';
 import { MaterialSymbol } from 'react-material-symbols';
+import NumberInput from '../../components/NumberInput';
 
 function Counter({
     value,
@@ -42,6 +43,14 @@ function ScoreCalculator() {
     const [trap, setTrap] = useState(0);
     const [harmony, setHarmony] = useState(0);
 
+    const [foulPoints, setFoulPoints] = useState<number | undefined>(0);
+
+    const autoPoints = autoLeave * 2;
+    const speakerPoints = autoSpeaker * 5 + teleSpeaker * 2 + ampedTeleSpeaker * 5;
+    const ampPoints = autoAmp * 2 + teleAmp * 1;
+    const stagePoints = park * 1 + climb * 3 + climbSpot * 4 + trap * 5 + harmony * 2;
+    const totalPoints = autoPoints + speakerPoints + ampPoints + stagePoints + (foulPoints ?? 0);
+
     const handleReset = () => {
         setAutoLeave(0);
         setAutoSpeaker(0);
@@ -54,6 +63,7 @@ function ScoreCalculator() {
         setClimbSpot(0);
         setTrap(0);
         setHarmony(0);
+        setFoulPoints(0);
     };
 
     return (
@@ -81,7 +91,7 @@ function ScoreCalculator() {
             <div className='flex flex-grow flex-col'>
                 <button
                     onClick={handleReset}
-                    className='text-md col-span-2 mx-2 rounded-md  bg-blue-400/70 px-3 py-2 text-black'>
+                    className='text-md col-span-2 mx-2 rounded-md  bg-blue-400/70 px-3 py-2 text-black active:brightness-75'>
                     Reset All
                 </button>
                 <div className='flex flex-grow snap-x snap-mandatory flex-row overflow-x-auto *:flex-shrink-0 gap-2 p-2'>
@@ -137,7 +147,7 @@ function ScoreCalculator() {
                     <p className='text-black-100 text-md rounded-md border-green-800 bg-green-400/70 px-3 py-2 text-center'>
                         Leave:{' '}
                         <span className='rounded-lg bg-black/15 p-2 py-1'>
-                            {autoLeave * 2}
+                            {autoPoints}
                         </span>
                     </p>
 
@@ -145,27 +155,33 @@ function ScoreCalculator() {
                         className={` text-black-100 text-md rounded-md border-green-800 bg-green-400/70 px-3 py-2 text-center`}>
                         Speaker:{' '}
                         <span className='rounded-lg bg-black/15 p-2 py-1'>
-                            {autoSpeaker * 5 +
-                                teleSpeaker * 2 +
-                                ampedTeleSpeaker * 5}
+                            {speakerPoints}
                         </span>
                     </p>
 
                     <p className='text-black-100 text-md rounded-md border-green-800 bg-green-400/70 px-3 py-2 text-center'>
                         Amp:{' '}
                         <span className='rounded-lg bg-black/15 p-2 py-1'>
-                            {autoAmp * 2 + teleAmp * 1}
+                            {ampPoints}
                         </span>
                     </p>
 
                     <p className='text-black-100 text-md rounded-md border-green-800 bg-green-400/70 px-3 py-2 text-center'>
                         Stage:{' '}
                         <span className='rounded-lg bg-black/15 p-2 py-1'>
-                            {park * 1 +
-                                climb * 3 +
-                                climbSpot * 4 +
-                                trap * 5 +
-                                harmony * 2}
+                            {stagePoints}
+                        </span>
+                    </p>
+
+                    <p className='text-black-100 text-md rounded-md border-green-800 bg-green-400/70 px-3 py-2 text-center'>
+                        Foul Points:{' '}
+                        <NumberInput className='rounded-lg bg-black/15 p-2 py-1 w-16 text-center' value={foulPoints} onChange={setFoulPoints} />
+                    </p>
+
+                    <p className='text-black-100 text-md rounded-md border-green-800 bg-green-400/70 px-3 py-2 text-center font-black'>
+                        Total:{' '}
+                        <span className='rounded-lg bg-black/15 p-2 py-1'>
+                            {totalPoints}
                         </span>
                     </p>
                 </div>