diff --git a/src/components/OnlineList/index.js b/src/components/OnlineList/index.js
index d0389be..7854523 100644
--- a/src/components/OnlineList/index.js
+++ b/src/components/OnlineList/index.js
@@ -1,5 +1,5 @@
 import React, { useState, useCallback, memo, useMemo, useRef, useEffect } from 'react'
-import { StyleSheet, FlatList, View } from 'react-native'
+import { StyleSheet, FlatList, View, RefreshControl } from 'react-native'
 import { useGetter, useDispatch } from '@/store'
 import Menu from '@/components/common/Menu'
 import MusicAddModal from '@/components/MusicAddModal'
@@ -45,6 +45,7 @@ export default memo(({
   const selectModeRef = useRef('single')
   const prevSelectIndexRef = useRef(-1)
   const addMultiMusicToList = useDispatch('list', 'listAddMultiple')
+  const theme = useGetter('common', 'theme')
 
   useEffect(() => {
     defaultListRef.current = defaultList
@@ -230,6 +231,14 @@ export default memo(({
       handleLongPress={handleLongPress} />
   ), [handleLongPress, handlePress, selectedList, showMenu])
 
+  const refreshControl = useMemo(() => (
+    <RefreshControl
+      colors={[theme.secondary]}
+      progressBackgroundColor={theme.primary}
+      refreshing={isListRefreshing}
+      onRefresh={onRefresh} />
+  ), [isListRefreshing, onRefresh, theme])
+
   return (
     <View style={{ flex: 1 }}>
       <FlatList
@@ -249,6 +258,7 @@ export default memo(({
         onEndReached={onLoadMore}
         progressViewOffset={progressViewOffset}
         ListHeaderComponent={ListHeaderComponent}
+        refreshControl={refreshControl}
         ListFooterComponent={<View style={{ paddingBottom: isMultiSelectMode ? 40 : 0 }}>{isLoading ? <FooterLoading /> : isEnd ? <FooterEnd /> : null}</View>}
       />
       { exitMultipleModeBtn }
diff --git a/src/components/common/Input.js b/src/components/common/Input.js
index a3d527a..9a44c98 100644
--- a/src/components/common/Input.js
+++ b/src/components/common/Input.js
@@ -57,7 +57,14 @@ const Input = ({ onChangeText, onClearText, clearBtn, ...props }, ref) => {
 
   return (
     <View style={styles.content}>
-      <TextInput autoCapitalize="none" onChangeText={changeText} autoCompleteType="off" style={{ ...styles.input, color: theme.normal }} placeholderTextColor={theme.normal50} ref={inputRef} {...props} />
+      <TextInput
+        autoCapitalize="none"
+        onChangeText={changeText}
+        autoCompleteType="off"
+        style={{ ...styles.input, color: theme.normal }}
+        placeholderTextColor={theme.normal50}
+        selectionColor={theme.secondary10}
+        ref={inputRef} {...props} />
       {/* <View style={styles.clearBtnContent}>
       <Animated.View style={{ ...styles.clearBtnContent, transform: [{ scale: scaleClearBtn }] }}> */}
         {clearBtn
diff --git a/src/screens/Home/SongList/List.js b/src/screens/Home/SongList/List.js
index f12ead9..b4af852 100644
--- a/src/screens/Home/SongList/List.js
+++ b/src/screens/Home/SongList/List.js
@@ -1,5 +1,5 @@
 import React, { useRef, useState, useEffect, useMemo, useCallback } from 'react'
-import { Text, StyleSheet, FlatList, View } from 'react-native'
+import { Text, StyleSheet, FlatList, View, RefreshControl } from 'react-native'
 
 import ListItem from './ListItem'
 import LoadingMask from '@/components/common/LoadingMask'
@@ -81,6 +81,14 @@ export default ({ width }) => {
     <ListItem data={data} width={itemWidth} onPress={handleListPress} />
   ), [handleListPress, itemWidth])
 
+  const refreshControl = useMemo(() => (
+    <RefreshControl
+      colors={[theme.secondary]}
+      progressBackgroundColor={theme.primary}
+      refreshing={isListRefreshing}
+      onRefresh={handleListRefresh} />
+  ), [isListRefreshing, handleListRefresh, theme])
+
   const ListComponent = useMemo(() => <FlatList
     style={styles.list}
     columnWrapperStyle={{ justifyContent: 'space-evenly' }}
@@ -89,9 +97,8 @@ export default ({ width }) => {
     renderItem={renderItem}
     keyExtractor={item => String(item.id)}
     key={rowNum}
-    onRefresh={handleListRefresh}
-    refreshing={isListRefreshing}
     onEndReached={handleListLoadMore}
+    refreshControl={refreshControl}
     // onEndReachedThreshold={0.5}
     ListFooterComponent={
       listInfo.isEnd
@@ -99,7 +106,7 @@ export default ({ width }) => {
         : <View style={{ alignItems: 'center', padding: 10 }}><Text style={{ color: theme.normal30 }}>{t('loading')}</Text></View>
     }
     removeClippedSubviews={true}
-  />, [rowNum, list, renderItem, handleListRefresh, isListRefreshing, handleListLoadMore, listInfo, theme, t])
+  />, [rowNum, list, renderItem, handleListLoadMore, refreshControl, listInfo.isEnd, theme, t])
 
   const visibleLoadingMask = useMemo(() => page == 1 && listInfo.isLoading, [listInfo.isLoading, page])