diff --git a/public/css/fonts.css b/public/css/fonts.css
index 9132c8b..f1e04cb 100644
--- a/public/css/fonts.css
+++ b/public/css/fonts.css
@@ -45,7 +45,8 @@ blockquote {
   line-height: 30px;
 }
 
-pre,span {
+pre,
+span {
   font-family: "Dejavu Sans";
   font-size: 13px;
   font-style: normal;
diff --git a/public/favicons/README.md b/public/favicons/README.md
index 995d249..46be44e 100644
--- a/public/favicons/README.md
+++ b/public/favicons/README.md
@@ -20,4 +20,4 @@ Insert the following code in the `head` section of your pages:
     <meta name="msapplication-config" content="/favicons/browserconfig.xml?v=jan27deltaburn">
     <meta name="theme-color" content="#ff0000">
 
-*Optional* - Check your favicon with the [favicon checker](https://realfavicongenerator.net/favicon_checker)
\ No newline at end of file
+_Optional_ - Check your favicon with the [favicon checker](https://realfavicongenerator.net/favicon_checker)
diff --git a/public/favicons/site.webmanifest b/public/favicons/site.webmanifest
index 59464b2..a7b7081 100644
--- a/public/favicons/site.webmanifest
+++ b/public/favicons/site.webmanifest
@@ -1,54 +1,54 @@
 {
-    "name": "Dunemask",
-    "short_name": "Dunemask",
-    "icons": [
-        {
-            "src": "/favicons/android-chrome-36x36.png?v=jan27deltaburn",
-            "sizes": "36x36",
-            "type": "image/png"
-        },
-        {
-            "src": "/favicons/android-chrome-48x48.png?v=jan27deltaburn",
-            "sizes": "48x48",
-            "type": "image/png"
-        },
-        {
-            "src": "/favicons/android-chrome-72x72.png?v=jan27deltaburn",
-            "sizes": "72x72",
-            "type": "image/png"
-        },
-        {
-            "src": "/favicons/android-chrome-96x96.png?v=jan27deltaburn",
-            "sizes": "96x96",
-            "type": "image/png"
-        },
-        {
-            "src": "/favicons/android-chrome-144x144.png?v=jan27deltaburn",
-            "sizes": "144x144",
-            "type": "image/png"
-        },
-        {
-            "src": "/favicons/android-chrome-192x192.png?v=jan27deltaburn",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/favicons/android-chrome-256x256.png?v=jan27deltaburn",
-            "sizes": "256x256",
-            "type": "image/png"
-        },
-        {
-            "src": "/favicons/android-chrome-384x384.png?v=jan27deltaburn",
-            "sizes": "384x384",
-            "type": "image/png"
-        },
-        {
-            "src": "/favicons/android-chrome-512x512.png?v=jan27deltaburn",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#ff0000",
-    "background_color": "#ff0000",
-    "display": "standalone"
+  "name": "Dunemask",
+  "short_name": "Dunemask",
+  "icons": [
+    {
+      "src": "/favicons/android-chrome-36x36.png?v=jan27deltaburn",
+      "sizes": "36x36",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicons/android-chrome-48x48.png?v=jan27deltaburn",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicons/android-chrome-72x72.png?v=jan27deltaburn",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicons/android-chrome-96x96.png?v=jan27deltaburn",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicons/android-chrome-144x144.png?v=jan27deltaburn",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicons/android-chrome-192x192.png?v=jan27deltaburn",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicons/android-chrome-256x256.png?v=jan27deltaburn",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicons/android-chrome-384x384.png?v=jan27deltaburn",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicons/android-chrome-512x512.png?v=jan27deltaburn",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ff0000",
+  "background_color": "#ff0000",
+  "display": "standalone"
 }
diff --git a/src/pages/delta/SkillPaper.jsx b/src/pages/delta/SkillPaper.jsx
index 2edf819..cce9481 100644
--- a/src/pages/delta/SkillPaper.jsx
+++ b/src/pages/delta/SkillPaper.jsx
@@ -18,14 +18,13 @@ export default function SkillPaper({
       <Card
         sx={{
           margin: "0 auto",
-          boxShadow:
-            "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
+          backgroundColor: bgColor,
         }}
       >
-        <CardMedia
-          sx={{ minHeight: 380 }}
-          image={src}
-          title="Fullstack Development Certificate"
+        <img
+          src={src}
+          style={{ width: "100%" }}
+          title={`${heading} Pluralsight Score`}
           onClick={mediaClick}
         />
         <CardContent sx={{ color: fgColor, backgroundColor: bgColor }}>
diff --git a/src/pages/delta/Skills.jsx b/src/pages/delta/Skills.jsx
index 69ad6f5..0fedd1f 100644
--- a/src/pages/delta/Skills.jsx
+++ b/src/pages/delta/Skills.jsx
@@ -1,13 +1,13 @@
-import React, { useState } from "react";
+import React, { Suspense, useState } from "react";
 import { FaReact, FaPython, FaJava, FaHtml5 } from "react-icons/fa";
 import { SiJavascript } from "react-icons/si";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
-import CardMedia from "@mui/material/CardMedia";
 import SkillPaper from "./SkillPaper.jsx";
 import PhotoHover from "./PhotoHover.jsx";
+import Skeleton from "@mui/material/Skeleton";
 
 const Carousel = React.lazy(() => import("react-material-ui-carousel"));
 export default function Skills() {
@@ -105,9 +105,9 @@ export default function Skills() {
                   "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
               }}
             >
-              <CardMedia
-                sx={{ minHeight: 320, maxWidth: 374 }}
-                image="/portfolio/bottega-cert.png"
+              <img
+                src="/portfolio/bottega-cert.png"
+                style={{ width: "100%" }}
                 title="Fullstack Development Certificate"
                 onClick={bottegaCertClick}
               />
@@ -127,18 +127,18 @@ export default function Skills() {
                 margin: "10px auto",
                 boxShadow:
                   "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
+                backgroundColor: "#c3802b",
               }}
             >
-              <CardMedia
-                sx={{ minHeight: 320, maxWidth: 374 }}
-                image="/portfolio/linux-cert.png"
-                title="Linux Client Administration Certificate"
+              <img
+                src="/portfolio/linux-cert.png"
+                style={{ width: "100%" }}
                 onClick={testoutCertClick}
+                title="Linux Client Administration Certificate"
               />
               <CardContent
                 sx={{
                   color: "white",
-                  backgroundColor: "#c3802b",
                 }}
               >
                 <Typography gutterBottom variant="h5" component="div">
@@ -166,26 +166,32 @@ export default function Skills() {
               Pluralsight Scores
             </h3>
           </div>
-          <Box sx={{ display: "block" }}>
-            <Box
-              sx={{
-                maxWidth: 374,
-                display: "block",
-                margin: "auto",
-                boxShadow:
-                  "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
-              }}
+          <Box
+            sx={{
+              maxWidth: 374,
+              display: "block",
+              margin: "auto",
+              boxShadow:
+                "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
+            }}
+          >
+            <Suspense
+              fallback={
+                <Skeleton variant="rectangular" width="374px" height="374px" />
+              }
             >
               <Carousel
                 interval={8000}
                 navButtonsAlwaysVisible
                 indicatorContainerProps={{ style: { display: "none" } }}
+                stopAutoPlayOnHover={true}
+                sx={{ minHeight: 481 }}
               >
                 {skills.map((skill, i) => (
                   <React.Fragment key={skill}>{skill}</React.Fragment>
                 ))}
               </Carousel>
-            </Box>
+            </Suspense>
           </Box>
         </Box>
       </Box>