diff --git a/app/dashboard/admin/page.tsx b/app/dashboard/admin/page.tsx
index e5133f4..2ef37bf 100644
--- a/app/dashboard/admin/page.tsx
+++ b/app/dashboard/admin/page.tsx
@@ -345,7 +345,7 @@ export default function AdminDashboard() {
               {/* Ingredient list table */}
               <>
                 <div className="flex justify-between py-8">
-                  <p className="text-5xl font-bold">Ingredients</p>
+                  <p className="text-5xl lg:text-6xl font-bold">Ingredients</p>
                   <button
                     className="px-3 lg:p-4 border-rose-600 rounded-xl bg-rose-600"
                     onClick={handleIngredientAddModal}
diff --git a/app/dashboard/user/page.tsx b/app/dashboard/user/page.tsx
index 462ea85..4c5ce80 100644
--- a/app/dashboard/user/page.tsx
+++ b/app/dashboard/user/page.tsx
@@ -134,7 +134,7 @@ export default function UserDashboard() {
               <button className="absolute inset-y-0 right-0 px-4 py-1 text-gray-300 font-medium rounded-md focus:outline-none">
                 <Search />
               </button>
-            </div>
+            </div>  
           </div>
           {/* <!-- Pantry Content --> */}
           <div className="flex flex-col md:flex-row md:flex-wrap gap-8 md:justify-center items-center p-8 overflow-y-auto">
diff --git a/app/providers.tsx b/app/providers.tsx
index dca15b1..fca1714 100644
--- a/app/providers.tsx
+++ b/app/providers.tsx
@@ -7,5 +7,14 @@ type Props = {
 };
 
 export const NextAuthProvider = ({ children }: Props) => {
-  return <SessionProvider>{children}</SessionProvider>;
+  return (
+    <SessionProvider
+      // Re-fetch session every 5 minutes
+      refetchInterval={5 * 60}
+      // Re-fetches session when window is focused
+      refetchOnWindowFocus={true}
+    >
+      {children}
+    </SessionProvider>
+  );
 };
diff --git a/components/IngredientCard.tsx b/components/IngredientCard.tsx
index d2c44db..973ebc7 100644
--- a/components/IngredientCard.tsx
+++ b/components/IngredientCard.tsx
@@ -1,15 +1,26 @@
 "use client";
-import React, { FC, useState } from "react";
-import Image, { StaticImageData } from "next/image";
+import { FC, useState } from "react";
+import Image from "next/image";
 
 interface IngredientProps {
   name: string;
 }
 
 const Ingredient: FC<IngredientProps> = ({ name }) => {
+  const [userHas, setUserHas] = useState(false);
+  const handleClick = () => {
+    setUserHas(!userHas);
+  };
   return (
     <>
-      <div className="text-white text-sm rounded-md border-x-8 border-y-4 bg-emerald-500 border-emerald-500">
+      <div
+        className={`text-white text-sm rounded-md border-x-8 border-y-4 select-none ${
+          userHas
+            ? "bg-emerald-500 border-emerald-500"
+            : "bg-gray-400 border-gray-400"
+        }`}
+        onClick={handleClick}
+      >
         {name}
       </div>
     </>
diff --git a/components/RecipeCard.tsx b/components/RecipeCard.tsx
index 45bb9d3..5f6184a 100644
--- a/components/RecipeCard.tsx
+++ b/components/RecipeCard.tsx
@@ -39,7 +39,7 @@ const RecipeCard: FC<Recipe> = ({ name, img, ingredients, step }) => {
         {/* Card Image */}
         <div>
           <Image
-            src={img ?? ""}
+            src={img ?? "https://picsum.photos/200"}
             alt={`${name} recipe`}
             width={96}
             height={96}
@@ -56,16 +56,16 @@ const RecipeCard: FC<Recipe> = ({ name, img, ingredients, step }) => {
       </div>
       {/* Modal */}
       <div className={isOpen ? "modal modal-open" : "modal"}>
-        <div className="modal-box">
+        <div className="modal-box p-0">
           <Image
-            src={img ?? ""}
+            src={img ?? "https://picsum.photos/200"}
             alt={`${name} image`}
             width={350}
             height={350}
             className="w-full h-36 object-cover"
           />
-          <div className="text-sm">
-            <h2 className="text-2xl font-bold my-4">{name}</h2>
+          <div className="text-sm p-6">
+            <h2 className="text-2xl font-bold mb-4">{name}</h2>
             <h3 className="font-semibold mb-2">Ingredients:</h3>
             <ul className="mb-4">
               {ingredients.map((e, i) => (
diff --git a/next.config.js b/next.config.js
index ea770a2..eee2b65 100644
--- a/next.config.js
+++ b/next.config.js
@@ -5,7 +5,7 @@ const nextConfig = {
   },
   swcMinify: true,
   images: {
-    domains: ["source.unsplash.com"],
+    domains: ["source.unsplash.com", "picsum.photos"],
   },
 };
 
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index ea6ab29..5ee6b97 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -11,12 +11,13 @@ datasource db {
 }
 
 model User {
-  name     String
-  email    String  @unique
-  isAdmin  Boolean @default(false)
-  password String
-  id       Int     @id @default(autoincrement())
-  orders   Order[]
+  name        String
+  email       String       @unique
+  isAdmin     Boolean      @default(false)
+  password    String
+  id          Int          @id @default(autoincrement())
+  orders      Order[]
+  ingredients Ingredient[]
 }
 
 model Category {
@@ -32,6 +33,7 @@ model Ingredient {
   categoryId Int
   category   Category               @relation(fields: [categoryId], references: [id])
   recipes    IngredientsOnRecipes[]
+  users      User[]
 }
 
 model Recipe {
@@ -71,4 +73,4 @@ model Payment {
   orderId Int     @unique
   isPaid  Boolean @default(false)
   order   Order   @relation(fields: [orderId], references: [id])
-}
+}
\ No newline at end of file