diff --git a/package-lock.json b/package-lock.json
index 81fe3d8..26cc975 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^13.5.0",
         "daisyui": "^2.18.0",
+        "file-loader": "^6.2.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^4.4.0",
diff --git a/package.json b/package.json
index 3c498c0..71e0a28 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "daisyui": "^2.18.0",
+    "file-loader": "^6.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.4.0",
diff --git a/public/FoldAdir.png b/public/FoldAdir.png
new file mode 100644
index 0000000..2c8a10c
Binary files /dev/null and b/public/FoldAdir.png differ
diff --git a/public/FoldArrow.png b/public/FoldArrow.png
new file mode 100644
index 0000000..8dc0237
Binary files /dev/null and b/public/FoldArrow.png differ
diff --git a/public/FoldBWFRLT25.png b/public/FoldBWFRLT25.png
new file mode 100644
index 0000000..d214ec8
Binary files /dev/null and b/public/FoldBWFRLT25.png differ
diff --git a/public/FoldBWFRLT33.png b/public/FoldBWFRLT33.png
new file mode 100644
index 0000000..94da4f7
Binary files /dev/null and b/public/FoldBWFRLT33.png differ
diff --git a/public/FoldBWLT25.png b/public/FoldBWLT25.png
new file mode 100644
index 0000000..f7af571
Binary files /dev/null and b/public/FoldBWLT25.png differ
diff --git a/public/FoldBWLT33.png b/public/FoldBWLT33.png
new file mode 100644
index 0000000..bb45d18
Binary files /dev/null and b/public/FoldBWLT33.png differ
diff --git a/public/FoldBakers.png b/public/FoldBakers.png
new file mode 100644
index 0000000..82cd845
Binary files /dev/null and b/public/FoldBakers.png differ
diff --git a/public/FoldDiaPP.png b/public/FoldDiaPP.png
new file mode 100644
index 0000000..23d8616
Binary files /dev/null and b/public/FoldDiaPP.png differ
diff --git a/public/FoldFRCFly.png b/public/FoldFRCFly.png
new file mode 100644
index 0000000..71f8974
Binary files /dev/null and b/public/FoldFRCFly.png differ
diff --git a/public/FoldFRLT25.png b/public/FoldFRLT25.png
new file mode 100644
index 0000000..b6eb2ae
Binary files /dev/null and b/public/FoldFRLT25.png differ
diff --git a/public/FoldFRLT33.png b/public/FoldFRLT33.png
new file mode 100644
index 0000000..7ef4f98
Binary files /dev/null and b/public/FoldFRLT33.png differ
diff --git a/public/FoldFRLT50.png b/public/FoldFRLT50.png
new file mode 100644
index 0000000..c0a36cd
Binary files /dev/null and b/public/FoldFRLT50.png differ
diff --git a/public/FoldHexD.png b/public/FoldHexD.png
new file mode 100644
index 0000000..1069377
Binary files /dev/null and b/public/FoldHexD.png differ
diff --git a/public/FoldHolden.png b/public/FoldHolden.png
new file mode 100644
index 0000000..8b6116d
Binary files /dev/null and b/public/FoldHolden.png differ
diff --git a/public/FoldLT.png b/public/FoldLT.png
new file mode 100644
index 0000000..cca8db7
Binary files /dev/null and b/public/FoldLT.png differ
diff --git a/public/FoldMiners.png b/public/FoldMiners.png
new file mode 100644
index 0000000..1b30e95
Binary files /dev/null and b/public/FoldMiners.png differ
diff --git a/public/FoldSWAF25.png b/public/FoldSWAF25.png
new file mode 100644
index 0000000..05972f6
Binary files /dev/null and b/public/FoldSWAF25.png differ
diff --git a/public/FoldSWAF33.png b/public/FoldSWAF33.png
new file mode 100644
index 0000000..413edaa
Binary files /dev/null and b/public/FoldSWAF33.png differ
diff --git a/public/FoldSWLT.png b/public/FoldSWLT.png
new file mode 100644
index 0000000..cf590a5
Binary files /dev/null and b/public/FoldSWLT.png differ
diff --git a/src/components/ConfigLT.js b/src/components/ConfigLT.js
index 00e1014..d06804d 100644
--- a/src/components/ConfigLT.js
+++ b/src/components/ConfigLT.js
@@ -3,8 +3,11 @@ import TarpContext from "../TarpContext";
 import { FaTimes, FaCheck } from "react-icons/fa";
 
 import LEANTOImg from "../assets/images/LeanTo.png";
+import ltfold0 from "../assets/images/FoldLT.png";
 import BWLT25Img from "../assets/images/BWLT25.png";
+import ltfold5 from "../assets/images/FoldBWLT25.png";
 import BWLT33Img from "../assets/images/BWLT33.png";
+import ltfold6 from "../assets/images/FoldBWLT33.png";
 
 function ConfigLT() {
   const state = useContext(TarpContext);
@@ -23,13 +26,14 @@ function ConfigLT() {
   const userTarp = [state.tarpLength, state.tarpWidth];
 
   class Config_LT {
-    constructor(configName, len, width, mult1, mult2, img) {
+    constructor(configName, len, width, mult1, mult2, img, foldImg) {
       this.configName = configName;
       this.len = len;
       this.width = width;
       this.mult1 = mult1;
       this.mult2 = mult2;
       this.img = img;
+      this.foldImg = foldImg;
     }
 
     alpha = 30;
@@ -41,6 +45,7 @@ function ConfigLT() {
       const tarpSize = [this.len, this.width];
       const sleepClear = l - state.height;
       const configImg = this.img;
+      const configFoldImg = this.foldImg;
 
       for (let i = this.beta; i >= this.alpha; i--) {
         const ridgeHt = Math.round(Math.sin(i * deg2Rad) * (w * this.mult1) + w * this.mult2);
@@ -65,7 +70,7 @@ function ConfigLT() {
         const chairTarpHtClear = chairTarpHt - state.chairHeight;
         const chairCheck = ridgeHeight - chairTarpHtClear;
 
-        outputObj = tarpSize.concat({ sleepClear, cover, coverClear, ridgeHeight, sitTarpHtClear, chairTarpHtClear, angle: i, configName: this.configName, ridgeHt, sleepDiagClr, configImg, chairCheck, chairTarpHt });
+        outputObj = tarpSize.concat({ sleepClear, cover, coverClear, ridgeHeight, sitTarpHtClear, chairTarpHtClear, angle: i, configName: this.configName, ridgeHt, sleepDiagClr, configImg, chairCheck, chairTarpHt, configFoldImg });
 
         if (sitTarpHtClear < 4 || chairTarpHtClear < 1) {
           break;
@@ -75,16 +80,16 @@ function ConfigLT() {
     }
   }
 
-  const Lean_To = new Config_LT("Lean-To", userTarp[0], userTarp[1], 1, 0, LEANTOImg);
+  const Lean_To = new Config_LT("Lean-To", userTarp[0], userTarp[1], 1, 0, LEANTOImg, ltfold0);
   Lean_To.calcs();
 
-  const BWLT_25 = new Config_LT("Back-Wall LT 25", userTarp[0], userTarp[1], 0.75, 0.25, BWLT25Img);
+  const BWLT_25 = new Config_LT("Back-Wall LT 25", userTarp[0], userTarp[1], 0.75, 0.25, BWLT25Img, ltfold5);
   BWLT_25.calcs();
 
-  const BWLT_33 = new Config_LT("Back-Wall LT 33", userTarp[0], userTarp[1], 0.667, 0.333, BWLT33Img);
+  const BWLT_33 = new Config_LT("Back-Wall LT 33", userTarp[0], userTarp[1], 0.667, 0.333, BWLT33Img, ltfold6);
   BWLT_33.calcs();
 
-  // console.log(finalObj);
+  console.log(finalObj);
 
   // Old jsx at bottom of NOTES.md but this is good
   return (
diff --git a/src/components/ConfigMiners.js b/src/components/ConfigMiners.js
index 46343fd..c351472 100644
--- a/src/components/ConfigMiners.js
+++ b/src/components/ConfigMiners.js
@@ -61,7 +61,7 @@ function Config_Miners() {
     Miners_tent.calcs();
   }
 
-  console.log(finalObj);
+  // console.log(finalObj);
 
   if (finalObj.length === 0) {
     return (
diff --git a/src/data/AllConfigs.js b/src/data/AllConfigs.js
index 45fc004..d9837be 100644
--- a/src/data/AllConfigs.js
+++ b/src/data/AllConfigs.js
@@ -1,3 +1,4 @@
+// import ltfold0 from "../assets/images/FoldLT.png";
 import ltfold0 from "../assets/images/FoldLT.png";
 import ltfold1 from "../assets/images/FoldFRLT50.png";
 import ltfold2 from "../assets/images/FoldFRLT33.png";
diff --git a/src/pages/Configs.js b/src/pages/Configs.js
index 9466b03..b480462 100644
--- a/src/pages/Configs.js
+++ b/src/pages/Configs.js
@@ -2,6 +2,14 @@ import AllConfigs from "../data/AllConfigs";
 import ConfigTypes from "../data/ConfigTypes";
 import ScrollToTop from "../components/ScrollToTop";
 
+const leantoimages = ["FoldLT.png", "FoldFRLT50.png", "FoldFRLT33.png", "FoldFRLT25.png", "FoldFRCFly.png", "FoldBWLT25.png", "FoldBWLT33.png", "FoldBWFRLT25.png", "FoldBWFRLT33.png"];
+
+const aframeimages = ["FoldFRLT50.png", "FoldFRLT33.png", "FoldFRLT25.png", "FoldSWAF25.png", "FoldSWAF33.png", "FoldFRCFly.png", "FoldFRCFly.png", "FoldFRCFly.png"];
+
+const diagonalimages = ["FoldDiaPP.png", "FoldDiaPP.png", "FoldAdir.png", "FoldHexD.png", "FoldArrow.png"];
+
+const tentimages = ["FoldSWLT.png", "FoldSWLT.png", "FoldSWLT.png", "FoldHolden.png", "FoldHolden.png", "FoldHolden.png", "FoldHolden.png", "FoldHolden.png", "FoldMiners.png", "FoldBakers.png", "FoldFRCFly.png"];
+
 function Configs() {
   const categories = ["Lean-To", " A-Frame", " Diagonal", " Tent"];
 
@@ -126,8 +134,9 @@ function Configs() {
         {AllConfigs[0].map((config, i) => (
           <div key={i} className="flex flex-col justify-center items-center border border-solid border-slate-400 bg-slate-100 p-4 shadow-md shadow-slate-500 md:flex-row xl:items-start">
             <div className="w-3/4 sm:w-5/8 xl:w-1/2 self-center mb-8 xl:mb-0 xl:self-start">
-              <img src={config.imgUrl} alt={config.name} className="w-full m-0 p-0" />
+              {/* <img src={config.imgUrl} alt={config.name + ` tarp folds`} className="w-full m-0 p-0" /> */}
               {/* <img src={leantoimages[i]} alt={config.name} className="w-full m-0 p-0" /> */}
+              <img src={process.env.PUBLIC_URL + leantoimages[i]} alt={config.name} className="w-full m-0 p-0" />
             </div>
             <div className="w-full px-4 ml-4 xl:w-1/2 border-l border-gray-400">
               <h4 id="lean-to" className="text-2xl font-semibold mt-0 mb-2 text-teal-600">
@@ -185,7 +194,8 @@ function Configs() {
         {AllConfigs[1].map((config, i) => (
           <div key={i} className="flex flex-col justify-center items-center border border-solid border-slate-400 bg-slate-100 p-4 shadow-md shadow-slate-500 md:flex-row xl:items-start">
             <div className="w-3/4 sm:w-5/8 xl:w-1/2 mb-8 xl:mb-0 xl:self-start">
-              <img src={config.imgUrl} alt={config.name} className="w-full m-0 p-0" />
+              {/* <img src={config.imgUrl} alt={config.name} className="w-full m-0 p-0" /> */}
+              <img src={process.env.PUBLIC_URL + aframeimages[i]} alt={config.name} className="w-full m-0 p-0" />
             </div>
             <div className="w-full px-4 ml-4 xl:w-1/2 border-l border-gray-400">
               <h4 id="a-frame" className="text-2xl font-semibold mt-0 mb-2 text-teal-600">
@@ -236,7 +246,8 @@ function Configs() {
         {AllConfigs[2].map((config, i) => (
           <div key={i} className="flex flex-col justify-center items-center border border-solid border-slate-400 bg-slate-100 p-4 shadow-md shadow-slate-500 md:flex-row xl:items-start">
             <div className="w-3/4 sm:w-5/8 xl:w-1/2 self-center mb-8 xl:mb-0 xl:self-start">
-              <img src={config.imgUrl} alt={config.name} className="w-full m-0 p-0" />
+              {/* <img src={config.imgUrl} alt={config.name} className="w-full m-0 p-0" /> */}
+              <img src={process.env.PUBLIC_URL + diagonalimages[i]} alt={config.name} className="w-full m-0 p-0" />
             </div>
             <div className="w-full px-4 ml-4 xl:w-1/2 border-l border-gray-400">
               <h4 id="lean-to" className="text-2xl font-semibold mt-0 mb-2 text-teal-600">
@@ -284,7 +295,8 @@ function Configs() {
         {AllConfigs[3].map((config, i) => (
           <div key={i} className="flex flex-col justify-center items-center border border-solid border-slate-400 bg-slate-100 p-4 shadow-md shadow-slate-500 md:flex-row xl:items-start">
             <div className="w-3/4 sm:w-5/8 xl:w-1/2 self-center mb-8 xl:mb-0 xl:self-start">
-              <img src={config.imgUrl} alt={config.name} className="w-full m-0 p-0" />
+              {/* <img src={config.imgUrl} alt={config.name} className="w-full m-0 p-0" /> */}
+              <img src={process.env.PUBLIC_URL + tentimages[i]} alt={config.name} className="w-full m-0 p-0" />
             </div>
             <div className="w-full px-4 ml-4 xl:w-1/2 border-l border-gray-400">
               <h4 id="lean-to" className="text-2xl font-semibold mt-0 mb-2 text-teal-600">