diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css
index c576352..5578bf9 100644
--- a/src/components/Footer/Footer.css
+++ b/src/components/Footer/Footer.css
@@ -5,6 +5,12 @@ footer {
   overflow: hidden;
 }
 
+.container {
+  width: 100%;
+  max-width: 1280px;
+  margin: auto;
+}
+
 #back-to-top-button {
   width: 140px;
   height: 140px;
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 96e6ad4..0fa7f60 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { motion, AnimatePresence } from "framer-motion";
+import React from "react";
+import { motion } from "framer-motion";
 import { Heart } from "phosphor-react";
 
 import uArrowUpLeft from "../../assets/u-arrow-up-left.svg";
@@ -18,140 +18,104 @@ const variants = {
 };
 
 const Footer: React.FC<FooterProps> = () => {
-  const [hovered, setHovered] = useState<string | false>(false);
-  const clearHover = () => setHovered(false);
-
   return (
     <footer>
-      <div className="outro">
-        <h2>
-          Phosphor is free and open source software. If you enjoy these icons,
-          please support us with a donation.
-        </h2>
-        <button
-          className="main-button"
-          onClick={() =>
-            window.open(
-              "https://paypal.me/TobiasFried",
-              "_blank",
-              "noopener noreferrer"
-            )
-          }
-        >
-          <Heart size={24} weight="fill" />
-          Buy us a coffee
-        </button>
-        <p className="fine-print">
-          Copyright © 2020 Phosphor Icons
-          <br />
-          Designed by{" "}
-          <a className="main-link" href="https://helenazhang.com">
-            Helena Zhang
-          </a>{" "}
-          + built by{" "}
-          <a className="main-link" href="https://tobiasfried.com">
-            Tobias Fried
-          </a>{" "}
-          <span
-            role="img"
-            aria-label="Emoji of woman technologist, man technologist, and cat"
-          >
-            👩🏻‍💻👨‍💻🐈
-          </span>
-          <br />
-          This website is set in{" "}
-          <a className="main-link" href="https://manropefont.com/">
-            Manrope
-          </a>{" "}
-          by{" "}
-          <a className="main-link" href="https://gent.media/">
-            Mikhail Sharanda
-          </a>
-          .
-          <br />
-          See also:{" "}
-          <a
-            className="main-link"
-            href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor"
-          >
-            Phosphor for Android
-          </a>
-        </p>
-        <div id="back-to-top">
+      <div className="container">
+        <div className="outro">
+          <h2>
+            Phosphor is free and open source software. If you enjoy these icons,
+            please support us with a donation.
+          </h2>
           <button
-            id="back-to-top-button"
-            aria-label="back-to-top button"
             className="main-button"
-            onClick={() => {
-              document
-                .getElementById("root")
-                ?.scrollIntoView({ behavior: "smooth", block: "start" });
-            }}
+            onClick={() =>
+              window.open(
+                "https://paypal.me/TobiasFried",
+                "_blank",
+                "noopener noreferrer"
+              )
+            }
           >
-            <img src={uArrowUpLeft} alt="" />
+            <Heart size={24} weight="fill" />
+            Buy us a coffee
           </button>
+          <p className="fine-print">
+            Copyright © 2020 Phosphor Icons
+            <br />
+            Designed by{" "}
+            <a className="main-link" href="https://helenazhang.com">
+              Helena Zhang
+            </a>{" "}
+            + built by{" "}
+            <a className="main-link" href="https://tobiasfried.com">
+              Tobias Fried
+            </a>{" "}
+            <span
+              role="img"
+              aria-label="Emoji of woman technologist, man technologist, and cat"
+            >
+              👩🏻‍💻👨‍💻🐈
+            </span>
+            <br />
+            This website is set in{" "}
+            <a className="main-link" href="https://manropefont.com/">
+              Manrope
+            </a>{" "}
+            by{" "}
+            <a className="main-link" href="https://gent.media/">
+              Mikhail Sharanda
+            </a>
+            .
+            <br />
+            See also:{" "}
+            <a
+              className="main-link"
+              href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor"
+            >
+              Phosphor for Android
+            </a>
+          </p>
+          <div id="back-to-top">
+            <button
+              id="back-to-top-button"
+              aria-label="back-to-top button"
+              className="main-button"
+              onClick={() => {
+                document
+                  .getElementById("root")
+                  ?.scrollIntoView({ behavior: "smooth", block: "start" });
+              }}
+            >
+              <img src={uArrowUpLeft} alt="" />
+            </button>
+          </div>
+          <img id="phone" className="inspectable" src={phoneSpec} alt="" />
+          <motion.img
+            id="phone"
+            className="inspectable"
+            variants={variants}
+            initial="visible"
+            whileHover="hidden"
+            src={phone}
+            alt=""
+          />
+          <img
+            id="command"
+            className="inspectable"
+            src={commandKeySpec}
+            alt=""
+          />
+          <motion.img
+            id="command"
+            className="inspectable"
+            variants={variants}
+            initial="visible"
+            whileHover="hidden"
+            src={commandKey}
+            alt=""
+          />
+          <img id="marker-green" src={markerGreen} alt="" />
         </div>
-        <AnimatePresence>
-          {hovered === "phone" ? (
-            <motion.img
-              id="phone"
-              key="phone-spec"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={variants}
-              // onHoverStart={() => setHovered("phone")}
-              onHoverEnd={clearHover}
-              src={phoneSpec}
-              alt=""
-            />
-          ) : (
-            <motion.img
-              id="phone"
-              key="phone"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={variants}
-              onHoverStart={() => setHovered("phone")}
-              // onHoverEnd={clearHover}
-              src={phone}
-              alt=""
-            />
-          )}
-          {hovered === "command" ? (
-            <motion.img
-              id="command"
-              key="command-spec"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={variants}
-              // onHoverStart={() => setHovered("command")}
-              onHoverEnd={clearHover}
-              src={commandKeySpec}
-              alt=""
-            />
-          ) : (
-            <motion.img
-              id="command"
-              key="command"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={variants}
-              onHoverStart={() => setHovered("command")}
-              // onHoverEnd={clearHover}
-              src={commandKey}
-              alt=""
-            />
-          )}
-        </AnimatePresence>
-        <img id="marker-green" src={markerGreen} alt="" />
       </div>
     </footer>
   );
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
index 2cff1bf..8ac0685 100644
--- a/src/components/Header/Header.css
+++ b/src/components/Header/Header.css
@@ -72,7 +72,7 @@ a.nav-link:hover:after {
 
 #calculator {
   position: absolute;
-  transform: translate(800px, 240px);
+  transform: translate(800px, 112px);
 }
 
 /* Illustrations remain at same layout up to 1024px */
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index d1959e9..58fc276 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { motion, AnimatePresence } from "framer-motion";
+import React from "react";
+import { motion } from "framer-motion";
 import { ArrowUpRightCircle, ArrowDownCircle } from "phosphor-react";
 
 import "./Header.css";
@@ -40,9 +40,6 @@ const handleScrollToIcons = () => {
 };
 
 const Header: React.FC<HeaderProps> = () => {
-  const [hovered, setHovered] = useState<string | false>(false);
-  const clearHover = () => setHovered(false);
-
   return (
     <header>
       <motion.div
@@ -89,181 +86,83 @@ const Header: React.FC<HeaderProps> = () => {
               Github
             </a>
           </div>
-          {hovered === "cutting-mat" ? (
-          <motion.img
+          <img
             id="cutting-mat"
-            key="cutting-mat-spec"
             className="inspectable"
-            initial="hidden"
-            animate="visible"
-            exit="hidden"
-            variants={illustrationVariants}
-            // onHoverStart={() => setHovered("cutting-mat")}
-            onHoverEnd={clearHover}
             src={cuttingMatSpec}
             alt=""
           />
-        ) : (
           <motion.img
             id="cutting-mat"
-            key="cutting-mat"
             className="inspectable"
-            initial="hidden"
-            animate="visible"
-            exit="hidden"
             variants={illustrationVariants}
-            onHoverStart={() => setHovered("cutting-mat")}
-            // onHoverEnd={clearHover}
+            initial="visible"
+            whileHover="hidden"
             src={cuttingMat}
             alt=""
           />
-        )}
-        {hovered === "receipt" ? (
+          <img id="receipt" className="inspectable" src={receiptSpec} alt="" />
           <motion.img
             id="receipt"
-            key="receipt-spec"
             className="inspectable"
-            initial="hidden"
-            animate="visible"
-            exit="hidden"
             variants={illustrationVariants}
-            // onHoverStart={() => setHovered("receipt")}
-            onHoverEnd={clearHover}
-            src={receiptSpec}
-            alt=""
-          />
-        ) : (
-          <motion.img
-            id="receipt"
-            key="receipt"
-            className="inspectable"
             initial="visible"
-            variants={illustrationVariants}
-            onHoverStart={() => setHovered("receipt")}
-            // onHoverEnd={clearHover}
+            whileHover="hidden"
             src={receipt}
             alt=""
           />
-        )}
-        {hovered === "calculator" ? (
-          <motion.img
+          <img
             id="calculator"
-            key="calculator-spec"
             className="inspectable"
-            initial="hidden"
-            animate="visible"
-            exit="hidden"
-            variants={illustrationVariants}
-            // onHoverStart={() => setHovered("calculator")}
-            onHoverEnd={clearHover}
             src={calculatorSpec}
             alt=""
           />
-        ) : (
           <motion.img
             id="calculator"
-            key="calculator"
             className="inspectable"
-            initial="hidden"
-            animate="visible"
-            exit="hidden"
             variants={illustrationVariants}
-            onHoverStart={() => setHovered("calculator")}
-            // onHoverEnd={clearHover}
+            initial="hidden"
+            whileHover="hidden"
             src={calculator}
             alt=""
           />
-        )}
         </div>
-        <AnimatePresence>
-          {hovered === "tablet" ? (
-            <motion.img
-              id="tablet"
-              key="tablet-spec"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={illustrationVariants}
-              // onHoverStart={() => setHovered("tablet")}
-              onHoverEnd={clearHover}
-              src={tabletSpec}
-              alt=""
-            />
-          ) : (
-            <motion.img
-              id="tablet"
-              key="tablet"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={illustrationVariants}
-              onHoverStart={() => setHovered("tablet")}
-              // onHoverEnd={clearHover}
-              src={tablet}
-              alt=""
-            />
-          )}
-          {hovered === "billiard-ball" ? (
-            <motion.img
-              id="billiard-ball"
-              key="billiard-ball-spec"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={illustrationVariants}
-              // onHoverStart={() => setHovered("billiard-ball")}
-              onHoverEnd={clearHover}
-              src={billiardBallSpec}
-              alt=""
-            />
-          ) : (
-            <motion.img
-              id="billiard-ball"
-              key="billiard-ball"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={illustrationVariants}
-              onHoverStart={() => setHovered("billiard-ball")}
-              // onHoverEnd={clearHover}
-              src={billiardBall}
-              alt=""
-            />
-          )}
-          {hovered === "warning" ? (
-            <motion.img
-              id="warning"
-              key="warning-spec"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={illustrationVariants}
-              // onHoverStart={() => setHovered("warning")}
-              onHoverEnd={clearHover}
-              src={warningSpec}
-              alt=""
-            />
-          ) : (
-            <motion.img
-              id="warning"
-              key="warning"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={illustrationVariants}
-              onHoverStart={() => setHovered("warning")}
-              // onHoverEnd={clearHover}
-              src={warning}
-              alt=""
-            />
-          )}
-        </AnimatePresence>
+        <img id="tablet" className="inspectable" src={tabletSpec} alt="" />
+        <motion.img
+          id="tablet"
+          className="inspectable"
+          variants={illustrationVariants}
+          initial="hidden"
+          whileHover="hidden"
+          src={tablet}
+          alt=""
+        />
+        <img
+          id="billiard-ball"
+          className="inspectable"
+          src={billiardBallSpec}
+          alt=""
+        />
+        <motion.img
+          id="billiard-ball"
+          className="inspectable"
+          variants={illustrationVariants}
+          initial="hidden"
+          whileHover="hidden"
+          src={billiardBall}
+          alt=""
+        />
+
+        <img id="warning" className="inspectable" src={warningSpec} alt="" />
+        <motion.img
+          id="warning"
+          className="inspectable"
+          variants={illustrationVariants}
+          initial="hidden"
+          whileHover="hidden"
+          src={warning}
+          alt=""
+        />
       </motion.div>
     </header>
   );