diff --git a/packages/react-app/src/components/RaffleDetail.jsx b/packages/react-app/src/components/RaffleDetail.jsx
index 5c90eb2..2c8b79f 100644
--- a/packages/react-app/src/components/RaffleDetail.jsx
+++ b/packages/react-app/src/components/RaffleDetail.jsx
@@ -75,6 +75,7 @@ export default function RaffleDetail({ readProvider, writeProvider, tx, raffleAd
           <div className="action">
             <div className="right">
               <div className="ticket-image"><Image src={ticketMeta?.image} className="nft-preview" /></div>
+              <div className="extra"> Each ticket is an NFT represented above.</div>
             </div>
             <div className="action-box left">
               <div className="ticket-no">
@@ -88,8 +89,9 @@ export default function RaffleDetail({ readProvider, writeProvider, tx, raffleAd
                 />
               </div>
               <div className="price-info">
-                <div className="extra">You'll spend</div>
+                <div className="metric">You'll spend</div>
                 <div className="value">{ticketPrice ? `${(formatEther(ticketPrice) * numTicketsToBuy).toFixed(5)} Ξ` : "--"}</div>
+                <div className="extra">Odds: {((numTicketsToBuy/numInitialTickets) * 100).toFixed(2)} %</div>
               </div>
               <Button
                 disabled={!connected}
diff --git a/packages/react-app/src/index.css b/packages/react-app/src/index.css
index 1810bea..4794469 100644
--- a/packages/react-app/src/index.css
+++ b/packages/react-app/src/index.css
@@ -94,6 +94,7 @@ div.ant-input-number {
 
 .nft-preview {
   width:100%;
+  margin-bottom: 10px;
 }
 
 .section {
@@ -178,7 +179,7 @@ div.ant-input-number {
 } */
 
 .price-info {
-  margin-top:10px!important;
+  margin-top:20px!important;
   text-align: center!important;
 }