diff --git a/client/src/components/Conversations/Conversation.jsx b/client/src/components/Conversations/Conversation.jsx
index 47676b20ff..94c26713e8 100644
--- a/client/src/components/Conversations/Conversation.jsx
+++ b/client/src/components/Conversations/Conversation.jsx
@@ -86,7 +86,7 @@ export default function Conversation({ conversation, retainView }) {
 
   if (currentConversation?.conversationId !== conversationId) {
     aProps.className =
-      'group relative flex cursor-pointer items-center gap-3 break-all rounded-md py-3 px-3 hover:bg-[#2A2B32] hover:pr-4';
+      'group relative flex cursor-pointer items-center gap-3 break-all rounded-md py-3 px-3 hover:bg-gray-800 hover:pr-4';
   }
 
   return (
diff --git a/client/src/components/Input/SubmitButton.jsx b/client/src/components/Input/SubmitButton.jsx
index 955f9b181e..130350d81f 100644
--- a/client/src/components/Input/SubmitButton.jsx
+++ b/client/src/components/Input/SubmitButton.jsx
@@ -88,7 +88,7 @@ export default function SubmitButton({
         disabled={disabled}
         className="group absolute bottom-0 right-0 flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500"
       >
-        <div className="m-1 mr-0 rounded-md p-2 pb-[10px] pt-[10px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
+        <div className="m-1 mr-0 rounded-md pt-[11px] pb-[9px] pl-[9.5px] pr-[7px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
           <svg
             stroke="currentColor"
             fill="none"
diff --git a/client/src/components/Nav/NavLinks.jsx b/client/src/components/Nav/NavLinks.jsx
index bea98093cd..e12553c195 100644
--- a/client/src/components/Nav/NavLinks.jsx
+++ b/client/src/components/Nav/NavLinks.jsx
@@ -77,7 +77,7 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
                 <Menu.Item as="div">
                   <NavLink
                     className={cn(
-                      'flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700',
+                      'flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700 rounded-none',
                       exportable ? 'cursor-pointer text-white' : 'cursor-not-allowed text-gray-400'
                     )}
                     svg={() => <Download size={16} />}
@@ -91,7 +91,7 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
                 </Menu.Item>
                 <Menu.Item as="div">
                   <NavLink
-                    className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
+                    className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700 rounded-none"
                     svg={() => <TrashIcon />}
                     text="Clear conversations"
                     clickHandler={() => setShowClearConvos(true)}
diff --git a/client/src/components/Nav/SearchBar.jsx b/client/src/components/Nav/SearchBar.jsx
index e982b92c8a..cc11fe1880 100644
--- a/client/src/components/Nav/SearchBar.jsx
+++ b/client/src/components/Nav/SearchBar.jsx
@@ -1,11 +1,12 @@
-import { forwardRef } from 'react';
-import { Search } from 'lucide-react';
+import { forwardRef, useState, useEffect } from 'react';
+import { Search, X } from 'lucide-react';
 import { useRecoilState } from 'recoil';
 import store from '~/store';
 
 const SearchBar = forwardRef((props, ref) => {
   const { clearSearch } = props;
   const [searchQuery, setSearchQuery] = useRecoilState(store.searchQuery);
+  const [showClearIcon, setShowClearIcon] = useState(false);
 
   const handleKeyUp = (e) => {
     const { value } = e.target;
@@ -18,17 +19,27 @@ const SearchBar = forwardRef((props, ref) => {
   const onChange = (e) => {
     const { value } = e.target;
     setSearchQuery(value);
+    setShowClearIcon(value.length > 0);
   };
 
+  useEffect(() => {
+    if (searchQuery.length === 0) {
+      setShowClearIcon(false);
+    } else {
+      setShowClearIcon(true);
+    }
+  }, [searchQuery])
+  
+
   return (
     <div
       ref={ref}
-      className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
+      className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700 relative"
     >
-      {<Search className="h-4 w-4" />}
+      {<Search className="h-4 w-4 absolute left-3" />}
       <input
         type="text"
-        className="m-0 mr-0 w-full border-none bg-transparent p-0 text-sm leading-tight outline-none"
+        className="m-0 mr-0 w-full border-none bg-transparent p-0 text-sm leading-tight outline-none pl-7"
         value={searchQuery}
         onChange={onChange}
         onKeyDown={(e) => {
@@ -37,8 +48,15 @@ const SearchBar = forwardRef((props, ref) => {
         placeholder="Search messages"
         onKeyUp={handleKeyUp}
       />
+      <X
+        className={`h-5 w-5 absolute right-3 cursor-pointer ${showClearIcon ? 'opacity-100' : 'opacity-0'} transition-opacity duration-1000`}
+        onClick={() => {
+          setSearchQuery('');
+          clearSearch();
+        }}
+      />
     </div>
   );
 });
 
-export default SearchBar;
+export default SearchBar;
\ No newline at end of file