diff --git a/components/Chat/ChatInput.tsx b/components/Chat/ChatInput.tsx
index 78bffd3..a01e6db 100644
--- a/components/Chat/ChatInput.tsx
+++ b/components/Chat/ChatInput.tsx
@@ -1,5 +1,5 @@
 import { Message, OpenAIModel, OpenAIModelID } from "@/types";
-import { IconSend, IconPlayerStop } from "@tabler/icons-react";
+import { IconPlayerStop, IconSend } from "@tabler/icons-react";
 import { FC, KeyboardEvent, MutableRefObject, useEffect, useRef, useState } from "react";
 
 interface Props {
@@ -79,11 +79,15 @@ export const ChatInput: FC<Props> = ({ onSend, messageIsStreaming, model, stopCo
     <div className="absolute bottom-0 left-0 w-full dark:border-white/20 border-transparent dark:bg-[#444654] dark:bg-gradient-to-t from-[#343541] via-[#343541] to-[#343541]/0 bg-white dark:!bg-transparent dark:bg-vert-dark-gradient pt-6 md:pt-2">
       <div className="stretch mx-2 md:mt-[52px] mt-4 flex flex-row gap-3 last:mb-2 md:mx-4 md:last:mb-6 lg:mx-auto lg:max-w-3xl">
         {messageIsStreaming && (
-          <button 
-            className="absolute -top-2 md:top-0 left-0 right-0 mx-auto dark:bg-[#343541] border w-fit border-gray-500 py-2 px-4 rounded"
+          <button
+            className="absolute -top-2 md:top-0 left-0 right-0 mx-auto dark:bg-[#343541] border w-fit border-gray-500 py-2 px-4 rounded text-black dark:text-white hover:opacity-50"
             onClick={handleStopConversation}
           >
-            <IconPlayerStop size={16} className="inline-block mb-[2px]"/> Stop Generating
+            <IconPlayerStop
+              size={16}
+              className="inline-block mb-[2px]"
+            />{" "}
+            Stop Generating
           </button>
         )}
         <div className="flex flex-col w-full py-2 flex-grow md:py-3 md:pl-4 relative border border-black/10 bg-white dark:border-gray-900/50 dark:text-white dark:bg-[#40414F] rounded-md shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]">