diff --git a/.gitignore b/.gitignore
index 28cde21f..3996e833 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,5 @@
 node_modules
+
 .env
-.DS_Store
\ No newline at end of file
+.DS_Store
+
diff --git a/frontend/app/src/components/ChallengeGrid/ChallengeItem.js b/frontend/app/src/components/ChallengeGrid/ChallengeItem.js
index 861e9a61..fa446ea2 100644
--- a/frontend/app/src/components/ChallengeGrid/ChallengeItem.js
+++ b/frontend/app/src/components/ChallengeGrid/ChallengeItem.js
@@ -5,129 +5,127 @@ import Markdown from '../Markdown'
 import { requirePropFactory } from '@material-ui/core'
 
 const ChallengeItem = ({ item }) => {
-  //Animation duration
-  const aDur = 0.6
-  const {
-    name,
-    company,
-    shorttext,
-    long_text,
-    thechallenge,
-    insights,
-    price,
-    judging,
-    aboutcompany,
-    insightimage,
-    tags,
-    key,
-  } = item
-  var { cardbackground, icon } = item
-  if (!cardbackground) {
-    cardbackground = { url: '' }
-  }
-  if (!icon) {
-    icon = { url: '' }
-  }
-  const [open, toggleOpen] = useState(false)
-  const [clicable, toggleClicable] = useState(true)
-
-  const flipStyle = (e, state) => {
-    e.currentTarget.classList.toggle('flip', state)
-    e.currentTarget.doneAnimating = !state
-  }
-  const flipCard = (e) => {
-    console.log('===', clicable)
-    if (!clicable) {
-      return
+    //Animation duration
+    const aDur = 0.6
+    const {
+        name,
+        company,
+        shorttext,
+        long_text,
+        thechallenge,
+        insights,
+        price,
+        judging,
+        aboutcompany,
+        insightimage,
+        tags,
+        key,
+    } = item
+    var { cardbackground, icon } = item
+    if (!cardbackground) {
+        cardbackground = { url: '' }
+    }
+    if (!icon) {
+        icon = { url: '' }
     }
-    let duration = aDur * 1000
-    flipStyle(e, true)
-    setTimeout(() => toggleOpen(!open), duration / 2)
-  }
+    const [open, toggleOpen] = useState(false)
+    const [clicable, toggleClicable] = useState(true)
+    var blurStyle = ""
+    var isFirefox = typeof InstallTrigger !== 'undefined'
 
-  if (open) {
+    const flipStyle = (e, state) => {
+        e.currentTarget.classList.toggle('flip', state)
+        e.currentTarget.doneAnimating = !state
+    }
+    const flipCard = (e) => {
+        console.log('===', clicable)
+        if (!clicable) {
+            return
+        }
+        let duration = aDur * 1000
+        flipStyle(e, true)
+        setTimeout(() => toggleOpen(!open), duration / 2)
+    }
+    if (isFirefox) {
+        blurStyle = "FirefoxBlur"
+    } else {
+        blurStyle = "Blur"
+    }
+    console.log(blurStyle)
+    if (open) {
+        return (
+            <div className={blurStyle} onClick={(e) => flipCard(e)}>
+                <div
+                    className="ChallengeItem open flip"
+                    style={{ animationDuration: aDur + 's' }}
+                    onAnimationEnd={(e) => flipStyle(e, false)}
+                    onMouseEnter={(e) => {
+                        toggleClicable(false)
+                    }}
+                    onMouseLeave={(e) => {
+                        toggleClicable(true)
+                    }}
+                >
+                    <div className="ChallengeItem--text">
+                        <img class="ChallengeIco open" src={icon.url} />
+                        <span
+                            href="#"
+                            class="close"
+                            onMouseEnter={(e) => {
+                                toggleClicable(true)
+                            }}
+                            onMouseLeave={(e) => {
+                                toggleClicable(false)
+                            }}
+                        ></span>
+                        <span className="ChallengeItem--title">{name}</span>
+                        <p className="ChallengeItem--description">{shorttext}</p>
+                        <p className="ChallengeItem--description">{long_text}</p>
+                        <div className="ChallengeItem--subsection">
+                            <p className="ChallengeItem--left">The Challenge</p>
+                            <p className="ChallengeItem--right">{thechallenge}</p>
+                        </div>
+                        <div className="ChallengeItem--subsection">
+                            <p className="ChallengeItem--left">Insights</p>
+                            <p className="ChallengeItem--right">{insights}</p>
+                        </div>
+                        {insightimage && <img class="InsightImg" src={insightimage.url} />}
+                        <div className="ChallengeItem--subsection">
+                            <p className="ChallengeItem--left">The Prize</p>
+                            <p className="ChallengeItem--right">{price}</p>
+                        </div>
+                        <div className="ChallengeItem--subsection">
+                            <p className="ChallengeItem--left">Judging Criteria</p>
+                            <p className="ChallengeItem--right">{judging}</p>
+                        </div>
+                        <div className="ChallengeItem--subsection">
+                            <p className="ChallengeItem--left">About the company</p>
+                            <p className="ChallengeItem--right">{aboutcompany}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
     return (
-      <div className="Blur" onClick={(e) => flipCard(e)}>
         <div
-          className="ChallengeItem open flip"
-          style={{ animationDuration: aDur + 's' }}
-          onAnimationEnd={(e) => flipStyle(e, false)}
-          onMouseEnter={(e) => {
-            toggleClicable(false)
-          }}
-          onMouseLeave={(e) => {
-            toggleClicable(true)
-          }}
+            className="ChallengeItem closed flip"
+            style={{
+                backgroundImage: 'url(' + cardbackground.url + ')',
+                animationDuration: aDur + 's',
+            }}
+            onAnimationEnd={(e) => flipStyle(e, false)}
+            onClick={(e) => flipCard(e)}
         >
-          <div className="ChallengeItem--text">
-            <img class="ChallengeIco open" src={icon.url} />
-            <span
-              href="#"
-              class="close"
-              onMouseEnter={(e) => {
-                toggleClicable(true)
-              }}
-              onMouseLeave={(e) => {
-                toggleClicable(false)
-              }}
-            ></span>
-            <span className="ChallengeItem--title">{name}</span>
-            <p className="ChallengeItem--description">{shorttext}</p>
-            <Markdown
-              className="ChallengeItem--description"
-              source={long_text}
-            />
-            <div className="ChallengeItem--subsection">
-              <p className="ChallengeItem--left">The Challenge</p>
-              <Markdown
-                className="ChallengeItem--right"
-                source={thechallenge}
-              />
-            </div>
-            <div className="ChallengeItem--subsection">
-              <p className="ChallengeItem--left">Insights</p>
-              <Markdown className="ChallengeItem--right" source={insights} />
-            </div>
-            {insightimage && <img class="InsightImg" src={insightimage.url} />}
-            <div className="ChallengeItem--subsection">
-              <p className="ChallengeItem--left">The Prize</p>
-              <Markdown className="ChallengeItem--right" source={price} />
-            </div>
-            <div className="ChallengeItem--subsection">
-              <p className="ChallengeItem--left">Judging Criteria</p>
-              <Markdown className="ChallengeItem--right" source={judging} />
+            <div className="ChallengeItem--logowpr">
+                <img class="ChallengeIco" src={icon.url} />
             </div>
-            <div className="ChallengeItem--subsection">
-              <p className="ChallengeItem--left">About the company</p>
-              <Markdown
-                className="ChallengeItem--right"
-                source={aboutcompany}
-              />
+            <div className="ChallengeItem--text">
+                <span className="ChallengeItem--title">{name}</span>
+                <p className="ChallengeItem--description">{shorttext}</p>
             </div>
-          </div>
         </div>
-      </div>
     )
-  }
-  return (
-    <div
-      className="ChallengeItem closed flip"
-      style={{
-        backgroundImage: 'url(' + cardbackground.url + ')',
-        animationDuration: aDur + 's',
-      }}
-      onAnimationEnd={(e) => flipStyle(e, false)}
-      onClick={(e) => flipCard(e)}
-    >
-      <div className="ChallengeItem--logowpr">
-        <img class="ChallengeIco" src={icon.url} />
-      </div>
-      <div className="ChallengeItem--text">
-        <span className="ChallengeItem--title">{name}</span>
-        <p className="ChallengeItem--description">{shorttext}</p>
-      </div>
-    </div>
-  )
 }
 
 export default ChallengeItem
diff --git a/frontend/app/src/components/ChallengeGrid/style.scss b/frontend/app/src/components/ChallengeGrid/style.scss
index 07547dd5..427f427d 100644
--- a/frontend/app/src/components/ChallengeGrid/style.scss
+++ b/frontend/app/src/components/ChallengeGrid/style.scss
@@ -13,6 +13,15 @@
   top: 0px;
   left: 0px;
 }
+.FirefoxBlur {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    background-color: rgba(105,105,105, 0.90);
+    z-index: 99;
+    top: 0px;
+    left: 0px;
+}
 
 .FilterButtons {
   width: 100%;