Addressed reviewer feedback for issue 475

components/Scroll-button/ScrollToTop.js

@@ -29,11 +29,25 @@ const ScrollToTop = () => {
     isVisible && (
       <button
         onClick={scrollToTop}
-        className="fixed bottom-8 right-8 p-3 bg-gradient-to-r from-teal-500 to-blue-600 text-white rounded-full shadow-xl hover:from-teal-600 hover:to-blue-700 focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-teal-500 z-50"
-        style={{ fontSize: '1.5rem', lineHeight: '1.5rem' }} // Adjusted font size
+        className="fixed bottom-8 right-4 sm:right-8 flex items-center gap-2 px-3 sm:px-4 py-2 bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-full shadow-lg hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 z-50"
+        style={{ fontSize: '0.875rem', lineHeight: '1.25rem' }}
         aria-label="Scroll to top"
       >
-        ↑
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={2}
+          stroke="currentColor"
+          className="w-5 h-5"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M5 15l7-7 7 7"
+          />
+        </svg>
+        <span className="text-sm font-medium">Back to top</span>
       </button>
     )
   );