diff --git a/src/assets/icons/downSquare.svg b/src/assets/icons/downSquare.svg
new file mode 100644
index 0000000..1d3b177
--- /dev/null
+++ b/src/assets/icons/downSquare.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.67969 24.5977H20.8945C23.3555 24.5977 24.5742 23.3789 24.5742 20.9648V6.65625C24.5742 4.24219 23.3555 3.02344 20.8945 3.02344H6.67969C4.23047 3.02344 3 4.23047 3 6.65625V20.9648C3 23.3906 4.23047 24.5977 6.67969 24.5977ZM6.70312 22.7109C5.53125 22.7109 4.88672 22.0898 4.88672 20.8711V6.75C4.88672 5.53125 5.53125 4.91016 6.70312 4.91016H20.8711C22.0312 4.91016 22.6875 5.53125 22.6875 6.75V20.8711C22.6875 22.0898 22.0312 22.7109 20.8711 22.7109H6.70312Z" fill="#000" fill-opacity="0.85"/>
+<path d="M14.9664 17.5664L19.5602 12.6914C19.9118 12.3164 19.9235 11.7773 19.5954 11.4492C19.2438 11.0859 18.6696 11.0742 18.3414 11.4258L13.8063 16.2305L9.27117 11.4258C8.93133 11.0742 8.35711 11.0742 8.00555 11.4492C7.70086 11.7891 7.70086 12.3164 8.0407 12.6914L12.6462 17.5664C13.3727 18.3516 14.2282 18.3516 14.9664 17.5664Z" fill="#000" fill-opacity="0.85"/>
+</svg>
diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx
index 2a5bc5b..d64d7f9 100644
--- a/src/components/VideoPlayer.tsx
+++ b/src/components/VideoPlayer.tsx
@@ -1,18 +1,25 @@
+import React from 'react';
+
 import Video from 'react-native-video';
 
 export const VideoPlayer = ({
   videoURI,
   isPaused = true,
+  snapshotURL,
 }: {
   videoURI: string;
   isPaused?: boolean;
+  snapshotURL?: string;
 }) => {
+  React.useEffect(() => {}, []);
   return (
     <Video
+      poster={snapshotURL}
+      posterResizeMode="cover"
       className="w-full h-full rounded-md"
+      resizeMode="cover"
+      ignoreSilentSwitch="ignore"
       paused={isPaused}
-      bufferConfig={{minBufferMs: 1000}}
-      fullscreen={true}
       pictureInPicture={true}
       controls
       source={{uri: videoURI}}
diff --git a/src/components/snapshotCard.tsx b/src/components/snapshotCard.tsx
index 8516560..ca043cc 100644
--- a/src/components/snapshotCard.tsx
+++ b/src/components/snapshotCard.tsx
@@ -1,5 +1,7 @@
 import {Image, ImageURISource, useWindowDimensions, View} from 'react-native';
 
+import clsx from 'clsx';
+
 import {BaseText} from './baseText';
 import {Label} from './label';
 import {FrigateEvent} from '@api';
@@ -8,23 +10,24 @@ export const SnapshotCard = ({
   imageSource,
   camEvent,
   imageOverlay,
+  addtlClasses,
 }: {
   imageSource: ImageURISource['uri'];
   camEvent?: FrigateEvent & {lastEventEnded: string};
   imageOverlay?: React.ReactNode;
+  addtlClasses?: string;
 }) => {
   const {width} = useWindowDimensions();
-  const imageWidth = width * 0.97;
+  const imageWidth = width;
   const imageHeight = imageWidth * 0.75;
 
   return (
-    <View className="self-center border border-accent dark:border-accent-dark relative rounded-lg">
+    <View className={clsx('rounded-xl', addtlClasses)}>
       <Image
         source={{uri: imageSource}}
-        resizeMode="contain"
-        // eslint-disable-next-line react-native/no-inline-styles
-        style={{height: imageHeight, width: imageWidth, borderRadius: 8}}
-        className="top-0"
+        resizeMode="cover"
+        style={{height: imageHeight, width: imageWidth}}
+        className="top-0 rounded-lg"
       />
       {!!imageOverlay && imageOverlay}
       {!!camEvent && (
diff --git a/src/screens/EventsScreen/EventsScreen.tsx b/src/screens/EventsScreen/EventsScreen.tsx
index 2c39956..c4140f4 100644
--- a/src/screens/EventsScreen/EventsScreen.tsx
+++ b/src/screens/EventsScreen/EventsScreen.tsx
@@ -1,21 +1,33 @@
-import {ActivityIndicator, FlatList, View} from 'react-native';
+import React from 'react';
+import {
+  ActivityIndicator,
+  LayoutAnimation,
+  SectionList,
+  View,
+} from 'react-native';
 
 import clsx from 'clsx';
 
 import {CameraEvent} from './components';
-import {useCameraEvents} from '@api';
+import {FrigateEvent, useCameraEvents} from '@api';
 import {BaseText, BaseView} from '@components';
 import {useAppDataStore} from '@stores';
 import {bgBackground} from '@utils';
 
-const FooterComponent = ({length}: {length: number}) => (
-  //? I don't know why but we get some layout shift and that requires adding this height value here
-  <BaseView className="h-[250]">
-    <BaseText className="text-center text-mutedForeground dark:text-mutedForeground-dark pt-2">
-      Showing {length} event{length > 1 && 's'}.
-    </BaseText>
-  </BaseView>
-);
+import {SectionDateHeader} from './components/SectionDateHeader';
+
+const FooterComponent = ({length}: {length?: number}) => {
+  return (
+    //? I don't know why but we get some layout shift and that requires adding this height value here
+    <BaseView className="">
+      {!!length && (
+        <BaseText className="text-center text-mutedForeground dark:text-mutedForeground-dark pt-2">
+          Showing {length} event{length > 1 && 's'}.
+        </BaseText>
+      )}
+    </BaseView>
+  );
+};
 
 export const EventsScreen = () => {
   const currentCamera = useAppDataStore(state => state.currentCamera);
@@ -31,6 +43,36 @@ export const EventsScreen = () => {
     {enabled: !!currentCamera},
   );
 
+  const [collapsedSections, setCollapsedSections] = React.useState(new Set());
+
+  //? PERF: I could see this getting real expensive with more events. Consider moving into a RQ Select function?
+  const groupedEvents = React.useMemo(
+    () =>
+      events?.reduce<{title: string; data: FrigateEvent[]}[]>((acc, evt) => {
+        const evtDate = new Date(evt.start_time * 1000).toLocaleDateString();
+        const prevEventsIdx = acc.findIndex(grp => grp.title === evtDate);
+        const prevEvents = acc[prevEventsIdx]?.data;
+        if (prevEventsIdx > -1 && prevEvents?.length) {
+          acc[prevEventsIdx] = {title: evtDate, data: [...prevEvents, evt]};
+        } else {
+          acc.push({title: evtDate, data: [evt]});
+        }
+        return acc;
+      }, []),
+    [events],
+  );
+
+  const handleHeaderPress = (title: string) => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    const newCollapsed = new Set(collapsedSections);
+    if (collapsedSections.has(title)) {
+      newCollapsed.delete(title);
+    } else {
+      newCollapsed.add(title);
+    }
+    setCollapsedSections(newCollapsed);
+  };
+
   if (isLoading) {
     return (
       <BaseView>
@@ -39,7 +81,7 @@ export const EventsScreen = () => {
     );
   }
 
-  if (error || !events || (!isLoading && !currentCamera)) {
+  if (error || !groupedEvents || (!isLoading && !currentCamera)) {
     return (
       <BaseView>
         <BaseText className="text-red-800 text-lg">
@@ -49,7 +91,7 @@ export const EventsScreen = () => {
     );
   }
 
-  if (!events.length) {
+  if (!groupedEvents?.length) {
     return (
       <BaseView isScrollview showsVerticalScrollIndicator={false}>
         <BaseText>No events found.</BaseText>
@@ -59,14 +101,32 @@ export const EventsScreen = () => {
 
   return (
     <View className="flex-1">
-      <FlatList
+      <SectionList
         className={clsx(bgBackground)}
-        ListFooterComponent={<FooterComponent length={events.length} />}
+        extraData={collapsedSections}
+        keyExtractor={(item, index) => item.id + index}
+        ListFooterComponent={<FooterComponent length={events?.length} />}
         showsVerticalScrollIndicator={false}
-        data={events}
-        renderItem={({item: camEvent}) => (
-          <CameraEvent camEvent={camEvent} key={camEvent.id} />
+        sections={groupedEvents}
+        renderSectionHeader={props => (
+          <SectionDateHeader
+            {...props}
+            handleHeaderPress={handleHeaderPress}
+            isCollapsed={collapsedSections.has(props.section.title)}
+          />
         )}
+        renderItem={({item: camEvent, index, section}) => {
+          if (collapsedSections.has(section.title)) {
+            return null;
+          }
+          return (
+            <CameraEvent
+              camEvent={camEvent}
+              key={camEvent.id}
+              isFirst={index === 0}
+            />
+          );
+        }}
       />
       {/* // TODO: Get total event info and group by date. Add pagination heree */}
     </View>
diff --git a/src/screens/EventsScreen/components/CameraEvent.tsx b/src/screens/EventsScreen/components/CameraEvent.tsx
index c8ec077..d2f9589 100644
--- a/src/screens/EventsScreen/components/CameraEvent.tsx
+++ b/src/screens/EventsScreen/components/CameraEvent.tsx
@@ -7,11 +7,19 @@ import {
   useWindowDimensions,
 } from 'react-native';
 
+import clsx from 'clsx';
+
 import {EventDetails} from './EventDetails';
 import {FrigateEvent} from '@api';
 import {BaseView, SnapshotCard, VideoPlayer} from '@components';
 
-export const CameraEvent = ({camEvent}: {camEvent: FrigateEvent}) => {
+export const CameraEvent = ({
+  camEvent,
+  isFirst,
+}: {
+  camEvent: FrigateEvent;
+  isFirst?: boolean;
+}) => {
   const {width} = useWindowDimensions();
   const imageWidth = width * 0.97;
   const imageHeight = imageWidth * 0.75;
@@ -44,9 +52,7 @@ export const CameraEvent = ({camEvent}: {camEvent: FrigateEvent}) => {
       if (scrollIndex === 2) {
         setVideoIsPaused(false);
       } else {
-        if (videoIsPaused === false) {
-          setVideoIsPaused(true);
-        }
+        setVideoIsPaused(true);
       }
     }
   };
@@ -64,8 +70,7 @@ export const CameraEvent = ({camEvent}: {camEvent: FrigateEvent}) => {
       contentOffset={{x: width, y: 0}}
       showsHorizontalScrollIndicator={false}
       pagingEnabled
-      style={{flex: 1}}
-      className="py-2">
+      className={clsx('py-2', isFirst && 'pt-1 rounded-t-none')}>
       {/* //? Details on left */}
       <BaseView
         style={{width, height: imageHeight}}
@@ -86,11 +91,15 @@ export const CameraEvent = ({camEvent}: {camEvent: FrigateEvent}) => {
       </BaseView>
 
       {/* //? if there's a video, show that to the right */}
-      {camEvent.has_clip && (
-        <BaseView style={{width, height: imageHeight}} className="py-2">
-          <VideoPlayer videoURI={camEvent.vodURL} isPaused={videoIsPaused} />
-        </BaseView>
-      )}
+      <BaseView style={{width, height: imageHeight}}>
+        <VideoPlayer
+          key={camEvent.id}
+          videoURI={camEvent.vodURL}
+          isPaused={videoIsPaused}
+          snapshotURL={lastEventImage || lastThumbnail}
+        />
+      </BaseView>
     </ScrollView>
   );
 };
+//
diff --git a/src/screens/EventsScreen/components/EventDetails.tsx b/src/screens/EventsScreen/components/EventDetails.tsx
index 3664d53..d79ed74 100644
--- a/src/screens/EventsScreen/components/EventDetails.tsx
+++ b/src/screens/EventsScreen/components/EventDetails.tsx
@@ -36,7 +36,9 @@ export const EventDetails = ({camEvent}: {camEvent: FrigateEvent}) => {
       </Row>
       <Row>
         <BaseText>Event Duration</BaseText>
-        <BaseText>{eventDuration} seconds</BaseText>
+        <BaseText>
+          {eventDuration > 0 ? eventDuration : 'In Progress'} seconds
+        </BaseText>
       </Row>
       <Row>
         <BaseText>Object Label</BaseText>
diff --git a/src/screens/EventsScreen/components/SectionDateHeader.tsx b/src/screens/EventsScreen/components/SectionDateHeader.tsx
new file mode 100644
index 0000000..5a4c9f3
--- /dev/null
+++ b/src/screens/EventsScreen/components/SectionDateHeader.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import {Pressable, useColorScheme, View} from 'react-native';
+
+import DownSquare from '@icons/downSquare.svg';
+import clsx from 'clsx';
+
+import {FrigateEvent} from '@api';
+import {BaseText, Label} from '@components';
+import {getFgColorHex} from '@utils';
+
+export const SectionDateHeader = ({
+  section,
+  handleHeaderPress,
+  isCollapsed,
+}: {
+  section: {
+    title: string;
+    data: FrigateEvent[];
+  };
+  handleHeaderPress: (s: string) => void;
+  isCollapsed: boolean;
+}) => {
+  const isDarkMode = useColorScheme() === 'dark';
+  return (
+    <Pressable onPress={() => handleHeaderPress(section.title)}>
+      <Label
+        className={clsx('px-4 py-2 rounded-t-none', isCollapsed && 'mb-1')}>
+        <View className="flex-row items-center justify-between">
+          <BaseText className="font-semibold">{section.title}</BaseText>
+          <DownSquare
+            fill={getFgColorHex(isDarkMode)}
+            height={28}
+            width={28}
+            style={isCollapsed && {transform: [{rotate: '180deg'}]}}
+          />
+        </View>
+      </Label>
+    </Pressable>
+  );
+};
diff --git a/src/screens/homeScreen.tsx b/src/screens/HomeScreen.tsx
similarity index 100%
rename from src/screens/homeScreen.tsx
rename to src/screens/HomeScreen.tsx
diff --git a/src/utils/colors.ts b/src/utils/colors.ts
index 5f89023..79e9609 100644
--- a/src/utils/colors.ts
+++ b/src/utils/colors.ts
@@ -1,3 +1,5 @@
+import {colors} from '../../themeColors';
+
 export const hslToHex = (HSL: string) => {
   HSL = HSL.replaceAll('%', '');
   const [_h, _s, _l]: (string | number)[] = HSL.split(' ');
@@ -19,3 +21,9 @@ export const hslToHex = (HSL: string) => {
 };
 
 export const bgBackground = 'bg-background dark:bg-background-dark';
+export const getFgColorHex = (isDarkMode: boolean) => {
+  if (isDarkMode) {
+    return hslToHex(colors.dark.foreground);
+  }
+  return hslToHex(colors.light.foreground);
+};