diff --git a/.vscode/settings.json b/.vscode/settings.json
index 486e447..cf15bfd 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +1,8 @@
 {
+  "css.lint.unknownAtRules": "ignore",
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   }
-}
\ No newline at end of file
+}
diff --git a/app/page.tsx b/app/page.tsx
index 6c6242c..ad7e384 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,9 +2,10 @@
 
 import Link from "next/link";
 import { motion } from "framer-motion";
-import { Globe, Smartphone, Server, Gamepad2, Activity } from "lucide-react";
+import { Globe, Smartphone, Server, Gamepad2 } from "lucide-react";
 import { useState } from "react";
 import MonitorCard from "@/components/MonitorCard";
+import Image from "next/image";
 
 export default function Home() {
   const [isHoveringMonitors, setIsHoveringMonitors] = useState(false);
@@ -225,7 +226,7 @@ export default function Home() {
           <div className="flex items-center gap-6">
             <div className="flex items-center gap-2">
               <p>Pipeline Status</p>
-              <img
+              <Image
                 src="https://ci.georgew.dev/api/badges/11/status.svg"
                 alt="Build Status"
                 className="h-3 grayscale opacity-50 hover:opacity-100 hover:grayscale-0 transition-all"
diff --git a/components/MonitorCard.tsx b/components/MonitorCard.tsx
index a2b495f..357188d 100644
--- a/components/MonitorCard.tsx
+++ b/components/MonitorCard.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Activity } from "lucide-react";
+import Image from "next/image";
 
 const MONITORS = [
   { id: 2, name: "Datasaur" },
@@ -113,12 +114,12 @@ export default function MonitorRegistry({ isHovered }: { isHovered: boolean }) {
                     {m.name}
                   </span>
                   <div className="flex gap-1 shrink-0 scale-90 origin-right">
-                    <img
+                    <Image
                       src={`https://status.georgew.dev/api/badge/${m.id}/status`}
                       className="h-5"
                       alt="up"
                     />
-                    <img
+                    <Image
                       src={`https://status.georgew.dev/api/badge/${m.id}/avg-response/24`}
                       className="h-5 opacity-60"
                       alt="ms"
diff --git a/components/ProjectShowcase.tsx b/components/ProjectShowcase.tsx
index 56e893f..d3fd5fc 100644
--- a/components/ProjectShowcase.tsx
+++ b/components/ProjectShowcase.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
+import Image from "next/image";
 
 export default function ProjectShowcase({ images }: { images: string[] }) {
   const [index, setIndex] = useState(0);
@@ -42,7 +43,7 @@ export default function ProjectShowcase({ images }: { images: string[] }) {
                 : "border-neutral-800 opacity-40 hover:opacity-100"
             }`}
           >
-            <img
+            <Image
               src={img}
               className="h-full w-full object-cover"
               alt={`Thumb ${i}`}