diff --git a/src/.DS_Store b/src/.DS_Store
index 802c317c98bb427ab59dcb891d444ce67690040e..6e1c1388e24c009eed623f6e84d9522e4e7b53f7 100644
Binary files a/src/.DS_Store and b/src/.DS_Store differ
diff --git a/src/App/mediarules.css b/src/App/mediarules.css
index 1354e811f131c4a524d4502eda38a258cfe23cf2..e6037513c648ed0b36e5b8b15daad4bd749c2e5d 100644
--- a/src/App/mediarules.css
+++ b/src/App/mediarules.css
@@ -110,7 +110,13 @@
       max-width: 100%;
       height: auto; 
     }
-
+    /***Biosafty***/
+    #safehead {
+      background-size: contain; /* Adjust the image to fit within the container */
+      background-position: center bottom; /* Push the image down for better visibility */
+      height: 300px; /* Adjust the height for mobile screens */
+      padding-top: 50px; /* Add padding to push down content and make image more visible */
+    }
     /***Description***/
     #Cystic\ Fibrosis6 h2 {
         font-size: 1.5em !important; 
@@ -122,27 +128,27 @@
         width: 300px !important; /* Make smaller for mobile */
         height: 300px !important; /* Adjust height accordingly */
       }  
-      .quiz-wrapper {
+    .quiz-wrapper {
         flex-direction: column;
         padding: 10px;
         width: 100% !important; /* Set width to 100% for mobile screens */
       }
     
-      .quiz-front, .quiz-back {
+    .quiz-front, .quiz-back {
         padding: 10px !important;
       }
     
-      .quiz-heading {
+    .quiz-heading {
         font-size: 1.2em;
       }
     
-      .quiz-text {
+    .quiz-text {
         font-size: 1em;
         margin-bottom: 10px !important;
         word-wrap: break-word; /* Keep word breaking for mobile */
       }
     
-      .quiz-button-box {
+    .quiz-button-box {
         margin-top: 5px !important;
         justify-content: space-evenly;
       }