diff --git a/web/components/confirmation-button.tsx b/web/components/confirmation-button.tsx
index 98e4d7e8..87c98f0a 100644
--- a/web/components/confirmation-button.tsx
+++ b/web/components/confirmation-button.tsx
@@ -76,7 +76,7 @@ export function ConfirmationButton(props: {
       </Modal>
 
       <Button
-        className={clsx(openModalBtn.className)}
+        className={openModalBtn.className}
         onClick={() => {
           if (disabled) {
             return
diff --git a/web/components/contract/contract-overview.tsx b/web/components/contract/contract-overview.tsx
index e1f4f95d..9b1461a9 100644
--- a/web/components/contract/contract-overview.tsx
+++ b/web/components/contract/contract-overview.tsx
@@ -121,7 +121,9 @@ const BinaryOverview = (props: { contract: BinaryContract; bets: Bet[] }) => {
               contract={contract}
               large
             />
-            <ContractReportResolution contract={contract} />
+            {contract.isResolved && (
+              <ContractReportResolution contract={contract} />
+            )}
           </Row>
         </Row>
       </Col>
diff --git a/web/components/contract/contract-report-resolution.tsx b/web/components/contract/contract-report-resolution.tsx
index 4797ca5d..3ae13f93 100644
--- a/web/components/contract/contract-report-resolution.tsx
+++ b/web/components/contract/contract-report-resolution.tsx
@@ -32,8 +32,8 @@ export function ContractReportResolution(props: { contract: Contract }) {
   }
 
   const flagClass = clsx(
-    'mx-2 flex flex-col items-center gap-1  w-6 h-6 text-gray-500 rounded-md bg-gray-100 px-2 py-1 hover:bg-gray-300',
-    userReported && 'text-red-500'
+    'mx-2 flex flex-col items-center gap-1  w-6 h-6  rounded-md !bg-gray-100 px-2 py-1 hover:bg-gray-300',
+    userReported ? '!text-red-500' : '!text-gray-500'
   )
 
   return (