diff --git a/src/components/EmptyChat.tsx b/src/components/EmptyChat.tsx
index e40a338..d9b6686 100644
--- a/src/components/EmptyChat.tsx
+++ b/src/components/EmptyChat.tsx
@@ -4,14 +4,13 @@ import { File } from './ChatWindow';
 import Link from 'next/link';
 import WeatherWidget from './WeatherWidget';
 import NewsArticleWidget from './NewsArticleWidget';
+import SettingsButtonMobile from '@/components/Settings/SettingsButtonMobile';
 
 const EmptyChat = () => {
   return (
     <div className="relative">
       <div className="absolute w-full flex flex-row items-center justify-end mr-5 mt-5">
-        <Link href="/settings">
-          <Settings className="cursor-pointer lg:hidden" />
-        </Link>
+        <SettingsButtonMobile />
       </div>
       <div className="flex flex-col items-center justify-center min-h-screen max-w-screen-sm mx-auto p-2 space-y-4">
         <div className="flex flex-col items-center justify-center w-full space-y-8">
diff --git a/src/components/Settings/SettingsButtonMobile.tsx b/src/components/Settings/SettingsButtonMobile.tsx
new file mode 100644
index 0000000..fec3e4d
--- /dev/null
+++ b/src/components/Settings/SettingsButtonMobile.tsx
@@ -0,0 +1,21 @@
+import { Settings } from 'lucide-react';
+import { useState } from 'react';
+import SettingsDialogue from './SettingsDialogue';
+import { AnimatePresence } from 'framer-motion';
+
+const SettingsButtonMobile = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      <button className="lg:hidden" onClick={() => setIsOpen(true)}>
+        <Settings />
+      </button>
+      <AnimatePresence>
+        {isOpen && <SettingsDialogue isOpen={isOpen} setIsOpen={setIsOpen} />}
+      </AnimatePresence>
+    </>
+  );
+};
+
+export default SettingsButtonMobile;