diff --git a/apps/recorder/recorder.config.toml b/apps/recorder/recorder.config.toml
index 0a8d99f..6a72972 100644
--- a/apps/recorder/recorder.config.toml
+++ b/apps/recorder/recorder.config.toml
@@ -26,18 +26,18 @@ host = '{{ get_env(name="HOST", default="localhost") }}'
 enable = true
 
 # Generating a unique request ID and enhancing logging with additional information such as the start and completion of request processing, latency, status code, and other request details.
-[server.middleware.request_id]
+[server.middlewares.request_id]
 enable = true
 
-[server.middleware.logger]
+[server.middlewares.logger]
 enable = true
 
 # when your code is panicked, the request still returns 500 status code.
-[server.middleware.catch_panic]
+[server.middlewares.catch_panic]
 enable = true
 
 # Timeout for incoming requests middleware. requests that take more time from the configuration will cute and 408 status code will returned.
-[server.middleware.timeout_request]
+[server.middlewares.timeout_request]
 enable = false
 # Duration time in milliseconds.
 timeout = 5000
@@ -53,7 +53,10 @@ timeout = 5000
 #   - POST
 # Set the value of the [`Access-Control-Max-Age`][mdn] header in seconds
 # max_age: 3600
-[server.middleware.cors]
+[server.middlewares.cors]
+enable = true
+
+[server.middlewares.compression]
 enable = true
 
 # Database Configuration
diff --git a/apps/recorder/src/app/core.rs b/apps/recorder/src/app/core.rs
index b2e3068..bc99be9 100644
--- a/apps/recorder/src/app/core.rs
+++ b/apps/recorder/src/app/core.rs
@@ -6,6 +6,7 @@ use tracing::instrument;
 
 use super::{builder::AppBuilder, context::AppContextTrait};
 use crate::{
+    app::Environment,
     errors::{RecorderError, RecorderResult},
     web::{
         controller::{self, core::ControllerTrait},
@@ -64,8 +65,10 @@ impl App {
 
         let middlewares = default_middleware_stack(context.clone());
         for mid in middlewares {
-            router = mid.apply(router)?;
-            tracing::info!(name = mid.name(), "+middleware");
+            if mid.is_enabled() {
+                router = mid.apply(router)?;
+                tracing::info!(name = mid.name(), "+middleware");
+            }
         }
 
         let router = router
@@ -86,13 +89,17 @@ impl App {
             async {
                 {
                     let monitor = task.setup_monitor().await?;
-                    monitor
-                        .run_with_signal(async move {
-                            Self::shutdown_signal().await;
-                            tracing::info!("apalis shutting down...");
-                            Ok(())
-                        })
-                        .await?;
+                    if matches!(context.environment(), Environment::Development) {
+                        monitor.run().await?;
+                    } else {
+                        monitor
+                            .run_with_signal(async move {
+                                Self::shutdown_signal().await;
+                                tracing::info!("apalis shutting down...");
+                                Ok(())
+                            })
+                            .await?;
+                    }
                 }
 
                 Ok::<(), RecorderError>(())
diff --git a/apps/recorder/src/web/middleware/snapshots/recorder__web__middleware__request_id__tests__create_or_fetch_request_id.snap.new b/apps/recorder/src/web/middleware/snapshots/recorder__web__middleware__request_id__tests__create_or_fetch_request_id.snap.new
deleted file mode 100644
index ecbb0f4..0000000
--- a/apps/recorder/src/web/middleware/snapshots/recorder__web__middleware__request_id__tests__create_or_fetch_request_id.snap.new
+++ /dev/null
@@ -1,6 +0,0 @@
----
-source: apps/recorder/src/web/middleware/request_id.rs
-assertion_line: 126
-expression: id
----
-"foo-barbaz"
diff --git a/apps/webui/src/components/ui/img.tsx b/apps/webui/src/components/ui/img.tsx
index 0bc1ada..ff6506f 100644
--- a/apps/webui/src/components/ui/img.tsx
+++ b/apps/webui/src/components/ui/img.tsx
@@ -1,9 +1,24 @@
-import type { ComponentProps } from "react";
+import { type ComponentProps } from "react";
 
 export type ImgProps = Omit<ComponentProps<"img">, "alt"> &
-  Required<Pick<ComponentProps<"img">, "alt">>;
+  Required<Pick<ComponentProps<"img">, "alt">> & {
+    optimize?: boolean;
+  };
+
+// biome-ignore lint/correctness/noUnusedVariables: <explanation>
+const LEGACY_IMAGE_REGEX = /\.(jpg|jpeg|png|gif|svg)$/;
 
 export const Img = (props: ImgProps) => {
-  // biome-ignore lint/nursery/noImgElement: <explanation>
-  return <img {...props} alt={props.alt} />;
+  const src = props.src;
+
+  if (!src) {
+    // biome-ignore lint/nursery/noImgElement: <explanation>
+    return <img {...props} alt={props.alt} />;
+  }
+
+  return (
+    <picture {...props}>
+      <img {...props} alt={props.alt} />
+    </picture>
+  );
 };