diff --git a/lib/screens/rain_radar.dart b/lib/screens/rain_radar.dart
index 2a96632..10730cf 100644
--- a/lib/screens/rain_radar.dart
+++ b/lib/screens/rain_radar.dart
@@ -28,7 +28,6 @@ class _RainRadarState extends State<RainRadar>
         controllerValue = controller.value;
       });
     });
-    controller.stop();
   }
 
   @override
@@ -46,7 +45,6 @@ class _RainRadarState extends State<RainRadar>
         _gifBytes = gif.readAsBytesSync();
         _gifLoaded = true;
       });
-      // controller.animateTo(24, duration: const Duration(seconds: 15));
     });
   }
 
@@ -54,17 +52,16 @@ class _RainRadarState extends State<RainRadar>
     return Column(children: [
       Padding(
           padding: const EdgeInsets.all(10),
-          child: _gifLoaded
-              ? VisibilityDetector(
-                  key: const Key('gif-key'),
-                  onVisibilityChanged: (visibilityInfo) {
-                    controller.animateTo(24,
-                        duration: const Duration(seconds: 15));
-                  },
-                  child: GifImage(
-                      controller: controller, image: MemoryImage(_gifBytes)),
-                )
-              : const CircularProgressIndicator()),
+          child: VisibilityDetector(
+            key: const Key('gif-key'),
+            onVisibilityChanged: (visibilityInfo) {
+              if (visibilityInfo.visibleFraction > 0) {
+                controller.animateTo(24, duration: const Duration(seconds: 15));
+              }
+            },
+            child:
+                GifImage(controller: controller, image: MemoryImage(_gifBytes)),
+          )),
       Row(mainAxisAlignment: MainAxisAlignment.center, children: [
         ElevatedButton(
             onPressed: () {
@@ -97,16 +94,27 @@ class _RainRadarState extends State<RainRadar>
         appBar: AppBar(
           title: const Text('Rain Radar'),
         ),
-        body: _gifLoaded
-            ? _showGif()
-            : Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                crossAxisAlignment: CrossAxisAlignment.center,
-                children: const [
-                    SizedBox(
-                      height: 50,
-                    ),
-                    Center(child: CircularProgressIndicator())
-                  ]));
+        body: RefreshIndicator(
+            onRefresh: (() {
+              return Future(() {
+                setState(() {
+                  _gifLoaded = false;
+                });
+                loadGif();
+              });
+            }),
+            child: SingleChildScrollView(
+                physics: const AlwaysScrollableScrollPhysics(),
+                child: _gifLoaded
+                    ? _showGif()
+                    : Column(
+                        mainAxisAlignment: MainAxisAlignment.start,
+                        crossAxisAlignment: CrossAxisAlignment.center,
+                        children: const [
+                            SizedBox(
+                              height: 50,
+                            ),
+                            Center(child: CircularProgressIndicator())
+                          ]))));
   }
 }