diff --git a/web/src/components/dynamic/CameraFeatureToggle.tsx b/web/src/components/dynamic/CameraFeatureToggle.tsx
index 3a7af29c3..aa33a019d 100644
--- a/web/src/components/dynamic/CameraFeatureToggle.tsx
+++ b/web/src/components/dynamic/CameraFeatureToggle.tsx
@@ -42,7 +42,9 @@ export default function CameraFeatureToggle({
         variants[variant][isActive ? "active" : "inactive"]
       }`}
     >
-      <Icon className="size-5 md:m-[6px]" />
+      <Icon
+        className={`size-5 md:m-[6px] ${isActive ? "text-white" : "text-secondary-foreground"}`}
+      />
     </div>
   );
 
diff --git a/web/src/pages/Events.tsx b/web/src/pages/Events.tsx
index bbd59e49b..91b8f1839 100644
--- a/web/src/pages/Events.tsx
+++ b/web/src/pages/Events.tsx
@@ -329,20 +329,22 @@ export default function Events() {
     return <ActivityIndicator />;
   }
 
-  if (selectedReviewData) {
-    return (
-      <RecordingView
-        startCamera={selectedReviewData.camera}
-        startTime={selectedReviewData.start_time}
-        allCameras={selectedReviewData.allCameras}
-        reviewItems={reviews}
-        reviewSummary={reviewSummary}
-        allPreviews={allPreviews}
-        timeRange={selectedTimeRange}
-        filter={reviewFilter}
-        updateFilter={onUpdateFilter}
-      />
-    );
+  if (recording) {
+    if (selectedReviewData) {
+      return (
+        <RecordingView
+          startCamera={selectedReviewData.camera}
+          startTime={selectedReviewData.start_time}
+          allCameras={selectedReviewData.allCameras}
+          reviewItems={reviews}
+          reviewSummary={reviewSummary}
+          allPreviews={allPreviews}
+          timeRange={selectedTimeRange}
+          filter={reviewFilter}
+          updateFilter={onUpdateFilter}
+        />
+      );
+    }
   } else {
     return (
       <EventView
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index 722e241f4..c6cc866e9 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -251,6 +251,7 @@ export function RecordingView({
         <Button
           className="flex items-center gap-2 rounded-lg"
           size="sm"
+          variant="secondary"
           onClick={() => navigate(-1)}
         >
           <IoMdArrowRoundBack className="size-5" size="small" />
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index 42a30f55f..9480da644 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -22,6 +22,7 @@ import { useResizeObserver } from "@/hooks/resize-observer";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { CameraConfig } from "@/types/frigateConfig";
 import { CameraPtzInfo } from "@/types/ptz";
+import { RecordingStartingPoint } from "@/types/record";
 import React, {
   useCallback,
   useEffect,
@@ -50,10 +51,11 @@ import {
 } from "react-icons/fa";
 import { GiSpeaker, GiSpeakerOff } from "react-icons/gi";
 import { HiViewfinderCircle } from "react-icons/hi2";
-import { IoMdArrowBack } from "react-icons/io";
+import { IoMdArrowRoundBack } from "react-icons/io";
 import {
   LuEar,
   LuEarOff,
+  LuHistory,
   LuPictureInPicture,
   LuVideo,
   LuVideoOff,
@@ -218,14 +220,37 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
           }
         >
           {!fullscreen ? (
-            <Button
-              className={`rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
-              size={isMobile ? "icon" : "sm"}
-              onClick={() => navigate(-1)}
-            >
-              <IoMdArrowBack className="size-5 lg:mr-[10px]" />
-              {isDesktop && "Back"}
-            </Button>
+            <div className="flex items-center gap-2">
+              <Button
+                className={`flex items-center gap-2.5 rounded-lg`}
+                size="sm"
+                variant="secondary"
+                onClick={() => navigate(-1)}
+              >
+                <IoMdArrowRoundBack className="size-5" />
+                {isDesktop && "Back"}
+              </Button>
+              <Button
+                className="flex items-center gap-2.5 rounded-lg"
+                size="sm"
+                variant="secondary"
+                onClick={() => {
+                  navigate("events", {
+                    state: {
+                      severity: "alert",
+                      recording: {
+                        camera: camera.name,
+                        startTime: Date.now() / 1000 - 30,
+                        severity: "alert",
+                      } as RecordingStartingPoint,
+                    },
+                  });
+                }}
+              >
+                <LuHistory className="size-5" />
+                {isDesktop && "History"}
+              </Button>
+            </div>
           ) : (
             <div />
           )}
diff --git a/web/themes/theme-default.css b/web/themes/theme-default.css
index b2a0126ba..08e75a184 100644
--- a/web/themes/theme-default.css
+++ b/web/themes/theme-default.css
@@ -27,8 +27,8 @@
     --secondary: hsl(0, 0%, 96%);
     --secondary: 0 0% 96%;
 
-    --secondary-foreground: hsl(0, 0%, 45%);
-    --secondary-foreground: 0 0% 45%;
+    --secondary-foreground: hsl(0, 0%, 32%);
+    --secondary-foreground: 0 0% 32%;
 
     --secondary-highlight: hsl(0, 0%, 94%);
     --secondary-highlight: 0 0% 94%;