diff --git a/web/src/pages/harmonie/Harmonie.tsx b/web/src/pages/harmonie/Harmonie.tsx
index a9483a1..f428660 100644
--- a/web/src/pages/harmonie/Harmonie.tsx
+++ b/web/src/pages/harmonie/Harmonie.tsx
@@ -8,6 +8,8 @@ import { fetchGribList, fetchGribListStructure } from './fetchGrib'
 
 import styles from './harmonie.module.css'
 import { SlideShow } from './SlideShow'
+import { fetchJson } from '../../helpers/fetch'
+import { apiHost } from '../../consts'
 
 export const Harmonie: Component<{}> = () => {
     const [getFileList, setFileList] = createSignal<string[]>([])
@@ -49,6 +51,11 @@ export const Harmonie: Component<{}> = () => {
         )
     }
 
+    function deleteOldGrib(): void {
+        fetchJson(`${apiHost}/api/grib/delete-old-forecasts`)
+            .finally(() => window.location.reload())
+    }
+
     return <div class={styles.container}>
         <div class={styles.column}>
             <label>
@@ -88,6 +95,13 @@ export const Harmonie: Component<{}> = () => {
                     />
                 )}
             </ul>
+            <div class={styles.deleteContainer}>
+                <input
+                    type='button'
+                    value='Delete old grib files'
+                    onClick={deleteOldGrib}
+                />
+            </div>
         </div>
         <div class={styles.column}>
             <SlideShow
diff --git a/web/src/pages/harmonie/harmonie.module.css b/web/src/pages/harmonie/harmonie.module.css
index d2a6fb4..5466520 100644
--- a/web/src/pages/harmonie/harmonie.module.css
+++ b/web/src/pages/harmonie/harmonie.module.css
@@ -70,6 +70,11 @@
     padding: 10px 3px;
 }
 
+.deleteContainer {
+    text-align: center;
+    padding: 5px 0 15px 0;
+}
+
 
 
 .slideShowControls {