diff --git a/src/AppOp.js b/src/AppOp.js
index 9259621..5fce099 100644
--- a/src/AppOp.js
+++ b/src/AppOp.js
@@ -90,14 +90,14 @@ function AppOp() {
       <div className='cards-container'>
         <div className='cards-row'>
           <Card title={"Total"} counter={"726"} color={'black'} backgroundColor={'rgb(254, 240, 227)'} />
-          <Card title={"Normal"} counter={"405"} backgroundColor={'rgb(234, 240, 230)'} />
-          <Card title={"Sickle Cell Disease HbSS"} counter={"29"} backgroundColor={'rgb(234, 246, 245)'} />
+          <Card title={"Male"} counter={"406"} backgroundColor={'rgb(237, 190, 190)'} />
+          <Card title={"Female"} counter={"320"} backgroundColor={'rgb(249, 195, 195)'} />
         </div>
 
         <div className='cards-row'>
-          <Card title={"Sickle Cell Trait HbAS"} counter={"50"} backgroundColor={'rgb(192,233, 199)'} />
-          <Card title={"Males"} counter={"406"} backgroundColor={'rgb(237, 190, 190)'} />
-          <Card title={"Female"} counter={"320"} backgroundColor={'rgb(249, 195, 195)'} />
+        <Card title={"Normal"} counter={"405"} backgroundColor={'rgb(234, 240, 230)'} />
+          <Card title={"Sickle Cell Disease (HbSS)"} counter={"29"} backgroundColor={'rgb(234, 246, 245)'} />
+          <Card title={"Sickle Cell Trait (HbAS)"} counter={"50"} backgroundColor={'rgb(192,233, 199)'} />
         </div>
       </div>