diff --git a/docs/src/components/carousel.js b/docs/src/components/carousel.js
index 7932f1ee..510dff6e 100644
--- a/docs/src/components/carousel.js
+++ b/docs/src/components/carousel.js
@@ -4,65 +4,70 @@ import "react-responsive-carousel/lib/styles/carousel.min.css";
 
 const imageDescripts = {
   outline: [
-    ["/1.png", "outline of a complex part"],
-    ["/2.png", "outline of a non-flat part with inside holes"],
-    ["/3.png", "outside-only outline"],
-    ["/4.png", "inside-only outline"],
+    ["/1.png", "Outline of a complex part"],
+    ["/2.png", "Outline of a non-flat part with inside holes"],
+    ["/3.png", "Outside-only outline"],
+    ["/4.png", "Inside-only outline"],
   ],
   level: [
-    ["/1.png", "level of a large part"],
-    ["/2.png", `level of a square part's stock`],
-    ["/3.png", `level of a part with a non-uniform top surface`],
+    ["/1.png", "Level of a large part"],
+    ["/2.png", `Level of a square part's stock`],
+    ["/3.png", `Level of a part with a non-uniform top surface`],
   ],
   rough: [
-    ["/1.png", "rough cut of two parts"],
-    ["/2.png", "side-view of a rough cut"],
-    ["/3.png", "rough cut of a part with a complex top surface"],
-    ["/4.gif", "animate of complex rough cut"],
+    ["/1.png", "Rough cut of two parts"],
+    ["/2.png", "Side-view of a rough cut"],
+    ["/3.png", "Rough cut of a part with a complex top surface"],
+    ["/4.gif", "Animate of complex rough cut"],
   ],
   contour: [
-    ["/1.png", "close-up of a precise contour"],
-    ["/2.png", "contour of multiple parts at once"],
-    ["/3.png", "low precision contour"],
+    ["/1.png", "Close-up of a precise contour"],
+    ["/2.png", "Contour of multiple parts at once"],
+    ["/3.png", "Low precision contour"],
   ],
   register: [
     ["/1.png", "2-drill register"],
     ["/2.png", "3-drill register"],
-    ["/3.png", "jigsaw register"],
+    ["/3.png", "Jigsaw register"],
   ],
   drill: [
-    ["/1.png", "drills for a robot baseplate"],
-    ["/2.png", "drills for a pegboard"],
-    ["/3.png", "selecting only matching-size holes"],
+    ["/1.png", "Drills for a robot baseplate"],
+    ["/2.png", "Drills for a pegboard"],
+    ["/3.png", "Selecting only matching-size holes"],
   ],
   trace: [
-    ["/1.png", "toolpath tracing a design into a part"],
-    ["/2.png", "selecting loops to trace"],
-    ["/3.png", "tracing edges for deburring"],
-    ["/4.png", "trace to clear a pocket"],
-    ["/5.png", "arbitrary offset outline"],
+    ["/1.png", "Toolpath tracing a design into a part"],
+    ["/2.png", "Selecting loops to trace"],
+    ["/3.png", "Tracing edges for deburring"],
+    ["/4.png", "Trace to clear a pocket"],
+    ["/5.png", "Arbitrary offset outline"],
   ],
   pocket: [
-    ["/1.png", "selecting areas to pocket"],
-    ["/2.png", "toolpath for pocket"],
-    ["/3.gif", "pocket animation"],
-    ["/4.png", "toolpath for v-bit carve"],
-    ["/5.png", "many-pocketed part"],
+    ["/1.png", "Selecting areas to pocket"],
+    ["/2.png", "Toolpath for pocket"],
+    ["/3.gif", "Pocket animation"],
+    ["/4.png", "Toolpath for v-bit carve"],
+    ["/5.png", "Many-pocketed part"],
   ],
-  gcode: [["/1.png", "the gcode editor popup"]],
+  gcode: [["/1.png", "The gcode editor popup"]],
   laserOn: [],
   laserOff: [],
   index: [],
   lathe: [],
   tabs: [
-    ["/1.png", "tabs added to part"],
-    ["/2.png", "sliced part with tabs"],
+    ["/1.png", "Tabs added to part"],
+    ["/2.png", "Sliced part with tabs"],
   ],
   camInterface:[
-    ["/1.png", "empty Ops list"],
-    ["/2.png", "sample Ops list"],
+    ["/1.png", "Empty Ops list"],
+    ["/2.png", "Sample Ops list"],
     ["/3.png", "Ops list with history bar"],
-  ]
+  ],
+  prefs: [
+    ["/prefs-CAM.png", "Preferences in CAM mode"],
+    ["/prefs-FDM.png", "Preferences in FDM mode"],
+    ["/prefs-LASER.png", "Preferences in laser mode"],
+  ],
 };
 
 /**
@@ -71,9 +76,9 @@ const imageDescripts = {
  * @param {keyof typeof imageDescripts} images - The key to an array of images and descriptions.
  * @returns {ReactElement} - A carousel of the given images.
  */
-export function ImageCarousel({ base, images }) {
+export function ImageCarousel({ base, images, sml }) {
   return (
-    <div class="carouselWrapper">
+    <div className={sml ?"carouselWrapper": ""}>
 
       <Carousel showThumbs={false}>
         {imageDescripts[images].map(([image, caption], index) => (