diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 17ce289..e5022cf 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import ChangeAPI from "./ChangeAPI";
 import ChangePreferences from "./ChangePreferences";
+import { myToast } from "../utils/toastify";
 import { useState } from "react";
 import Cookies from "js-cookie";
 import logo from "../assets/cloud-sun-fill.png";
@@ -21,15 +22,15 @@ const Header: React.FC = () => {
             className="w-10 h-10 drop-shadow-lg"
           />
           <h1 className="text-4xl font-extrabold tracking-wide drop-shadow-lg">
-            Weather App - <strong>Local hosted</strong>
+            Weather App - <strong>Web</strong>
           </h1>
         </div>
         <div className="flex items-center gap-4">
           {" "}
           {/* Added container for buttons */}
           <button
-            className="cursor-pointer bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2"
-            onClick={() => setApiCard(true)}
+            className="bg-gray-200 text-gray-400 font-bold px-6 py-3 rounded-xl shadow-lg border border-gray-300 flex items-center gap-2 cursor-not-allowed opacity-60"
+            onClick={() => myToast("You don't need to set an API Key!", "info")}
           >
             <span className="flex items-center gap-2">
               <KeyRound />