diff --git a/bun.lockb b/bun.lockb
index 9295141..1451fc3 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/AppNavbar.vue b/components/AppNavbar.vue
index ba37fc9..b662a29 100644
--- a/components/AppNavbar.vue
+++ b/components/AppNavbar.vue
@@ -26,7 +26,7 @@
         </ul>
       </div>
       <nuxt-link to="/" class="btn btn-ghost text-xl">
-        <img src="/public/logo192.png" width="50" >
+        <NuxtImg src="/logo192.png" width="50" />
         <span style="font-family: cursive"> Chefs </span>
       </nuxt-link>
     </div>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 90ca692..baa09bd 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -2,7 +2,7 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   css: ["~/assets/css/main.css"],
-  modules: ["@nuxt/eslint"],
+  modules: ["@nuxt/eslint", "@nuxt/image"],
   postcss: {
     plugins: {
       tailwindcss: {},
diff --git a/package.json b/package.json
index 5cfe18b..3cc9f2e 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@nuxt/eslint": "^0.3.10",
+    "@nuxt/image": "^1.6.0",
     "nuxt": "^3.11.2",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
diff --git a/pages/index.vue b/pages/index.vue
index 763c81d..6ecb131 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="hero min-h-screen bg-base-200">
     <div class="hero-content flex-col lg:flex-row-reverse">
-      <img src="/public/chef.svg" class="max-w-sm rounded-lg shadow-2xl" >
+      <NuxtImg src="/chef.svg" class="max-w-sm rounded-lg shadow-2xl" />
       <div>
         <h1 class="text-5xl font-bold prose">Eat Something New</h1>
         <p class="py-6 prose">Generate a random recipe.</p>
         <NuxtLink to="/random" class="btn btn-primary">
-          >Random Recipe Now
+          Random Recipe Now
         </NuxtLink>
       </div>
     </div>