diff --git a/pages/art.jsx b/pages/art.jsx
index 9e80e1a..19b62f9 100644
--- a/pages/art.jsx
+++ b/pages/art.jsx
@@ -1,5 +1,6 @@
 import artSections from '../utils/art.json'
 import Image from 'next/image'
+
 function Section({ section }) {
   const { title, list } = section;
 
@@ -19,14 +20,12 @@ function Section({ section }) {
           <p>[<span dangerouslySetInnerHTML={{ __html: autolink(art.title) }} />]</p>
           <div className="flex w-full justify-between gap-2">
             {art.images.map((image, imgIndex) => (
-              <img
+              <Image
                 key={imgIndex}
                 src={image}
                 alt={art.title}
-                style={{
-                  width: `calc(100% / ${art.images.length})`,
-                  height: 'auto'
-                }}
+                width={art.width}
+                height={art.height}
               />
             ))}
           </div>
diff --git a/public/images/fred.gif b/public/images/fred.gif
new file mode 100644
index 0000000..a4ae86c
Binary files /dev/null and b/public/images/fred.gif differ
diff --git a/utils/art.json b/utils/art.json
index b087881..b7de5d8 100644
--- a/utils/art.json
+++ b/utils/art.json
@@ -1,50 +1,74 @@
 [
   {
-    "title": "3d art (blender)",
+    "title": "2d art (procreate)",
     "list": [
       {
-        "title": "my ass!!!",
-        "images": ["/images/cat.gif"]
+        "title": "me on a bike",
+        "images": ["/images/bike.png"],
+        "width": 400,
+        "height": 400
       },
       {
-        "title": "digital upload",
-        "images": ["/images/digitalupload.gif"]
+        "title": "illustrations for https://www.kernelmag.io/",
+        "images": [
+          "/images/irena.png",
+          "/images/zora.png"
+        ],
+        "width": 400,
+        "height": 100
       },
       {
-        "title": "cat cafe",
-        "images": ["/images/catcafe.gif"]
+        "title": "summer",
+        "images": ["/images/summer.png"],
+        "width": 600,
+        "height": 400
       },
       {
-        "title": "peppermint",
-        "images": ["/images/peppermint.gif"]
+        "title": "meditation study",
+        "images": ["/images/meditation.png"],
+        "width": 500,
+        "height": 400
+      },
+      {
+        "title": "me but online",
+        "images": ["/images/online.png"],
+        "width": 500,
+        "height": 400
       }
     ]
   },
   {
-    "title": "2d art (procreate)",
+    "title": "3d art (blender)",
     "list": [
       {
-        "title": "me on a bike",
-        "images": ["/images/bike.png"]
+        "title": "fred",
+        "images": ["/images/fred.gif"],
+        "width": 300,
+        "height": 400
       },
       {
-        "title": "illustrations for https://www.kernelmag.io/",
-        "images": [
-          "/images/irena.png",
-          "/images/zora.png"
-        ]
+        "title": "my ass!!!",
+        "images": ["/images/cat.gif"],
+        "width": 500,
+        "height": 400
       },
       {
-        "title": "summer",
-        "images": ["/images/summer.png"]
+        "title": "digital upload",
+        "images": ["/images/digitalupload.gif"],
+        "width": 500,
+        "height": 400
       },
       {
-        "title": "meditation study",
-        "images": ["/images/meditation.png"]
+        "title": "cat cafe",
+        "images": ["/images/catcafe.gif"],
+        "width": 500,
+        "height": 400
       },
       {
-        "title": "me but online",
-        "images": ["/images/online.png"]
+        "title": "peppermint",
+        "images": ["/images/peppermint.gif"],
+        "width": 500,
+        "height": 400
       }
     ]
   }