diff --git a/src/app/(feed)/feed/SidebarCategories.tsx b/src/app/(feed)/feed/SidebarCategories.tsx
index 8e0a875..5235927 100644
--- a/src/app/(feed)/feed/SidebarCategories.tsx
+++ b/src/app/(feed)/feed/SidebarCategories.tsx
@@ -67,6 +67,7 @@ export function SidebarCategories() {
     useCheckFilteredFeedItemsForCategory();
 
   const setFeedFilter = useSetAtom(feedFilterAtom);
+  const setDateFilter = useSetAtom(dateFilterAtom);
   const [categoryFilter, setCategoryFilter] = useAtom(categoryFilterAtom);
 
   const { contentCategories } = useContentCategories();
@@ -92,7 +93,10 @@ export function SidebarCategories() {
         <SidebarMenuItem>
           <SidebarMenuButton
             variant={categoryFilter === -1 ? "outline" : "default"}
-            onClick={() => updateCategoryFilter(-1)}
+            onClick={() => {
+              updateCategoryFilter(-1);
+              setDateFilter(1);
+            }}
           >
             {!hasAnyItems && (
               <CircleSmall size={16} className="text-sidebar-accent" />
diff --git a/src/app/(feed)/feed/SidebarFeeds.tsx b/src/app/(feed)/feed/SidebarFeeds.tsx
index b546ad5..c6fab83 100644
--- a/src/app/(feed)/feed/SidebarFeeds.tsx
+++ b/src/app/(feed)/feed/SidebarFeeds.tsx
@@ -65,6 +65,7 @@ function useCheckFilteredFeedItemsForFeed() {
 export function SidebarFeeds() {
   const { feeds } = useFeeds();
 
+  const setDateFilter = useSetAtom(dateFilterAtom);
   const [feedFilter, setFeedFilter] = useAtom(feedFilterAtom);
 
   const checkFilteredFeedItemsForFeed = useCheckFilteredFeedItemsForFeed();
@@ -90,7 +91,10 @@ export function SidebarFeeds() {
         <SidebarMenuItem>
           <SidebarMenuButton
             variant={feedFilter === -1 ? "outline" : "default"}
-            onClick={() => setFeedFilter(-1)}
+            onClick={() => {
+              setFeedFilter(-1);
+              setDateFilter(1);
+            }}
           >
             {!hasAnyItems && (
               <CircleSmall size={16} className="text-sidebar-accent" />
@@ -108,7 +112,10 @@ export function SidebarFeeds() {
             <SidebarMenuItem key={feed.id}>
               <SidebarMenuButton
                 variant={feed.id === feedFilter ? "outline" : "default"}
-                onClick={() => setFeedFilter(feed.id)}
+                onClick={() => {
+                  setFeedFilter(feed.id);
+                  setDateFilter(30);
+                }}
               >
                 {!feed.hasEntries && (
                   <CircleSmall size={16} className="text-sidebar-accent" />
diff --git a/src/app/(feed)/feed/UserManagementButton.tsx b/src/app/(feed)/feed/UserManagementButton.tsx
index 131d072..39c2509 100644
--- a/src/app/(feed)/feed/UserManagementButton.tsx
+++ b/src/app/(feed)/feed/UserManagementButton.tsx
@@ -11,6 +11,11 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from "~/components/ui/dropdown-menu";
+import {
+  ResponsiveDropdown,
+  ResponsiveDropdownLabel,
+  ResponsiveDropdownMenuItem,
+} from "~/components/ui/responsive-dropdown";
 import {
   SidebarMenu,
   SidebarMenuButton,
@@ -33,8 +38,9 @@ export function UserManagementNavItem() {
   return (
     <SidebarMenu>
       <SidebarMenuItem>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
+        <ResponsiveDropdown
+          side="right"
+          trigger={
             <SidebarMenuButton
               size="lg"
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
@@ -53,48 +59,42 @@ export function UserManagementNavItem() {
               )}
               <EllipsisVerticalIcon className="ml-auto size-4" />
             </SidebarMenuButton>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg p-4"
-            side={isMobile ? "bottom" : "right"}
-            align="end"
-            sideOffset={4}
-          >
-            <DropdownMenuLabel className="p-0 font-normal">
-              <div className="flex flex-col items-center justify-center pb-4">
-                <h2 className="text-sm font-semibold">
-                  {data?.user.name || "Serial User"}
-                </h2>
-                <p className="text-muted-foreground text-xs">
-                  {data?.user.email}
-                </p>
-              </div>
-            </DropdownMenuLabel>
-            <DropdownMenuItem asChild>
-              <Button
-                className="w-full"
-                onClick={async () => {
-                  await signOut({
-                    fetchOptions: {
-                      onRequest: () => {
-                        setIsSigningOut(true);
-                      },
-                      onSuccess: async () => {
-                        router.push(AUTH_SIGNED_OUT_URL);
-                      },
+          }
+        >
+          <ResponsiveDropdownLabel className="p-0 font-normal">
+            <div className="flex flex-col items-center justify-center pb-4">
+              <h2 className="text-sm font-semibold">
+                {data?.user.name || "Serial User"}
+              </h2>
+              <p className="text-muted-foreground text-xs">
+                {data?.user.email}
+              </p>
+            </div>
+          </ResponsiveDropdownLabel>
+          <ResponsiveDropdownMenuItem asChild>
+            <Button
+              className="w-full"
+              onClick={async () => {
+                await signOut({
+                  fetchOptions: {
+                    onRequest: () => {
+                      setIsSigningOut(true);
+                    },
+                    onSuccess: async () => {
+                      router.push(AUTH_SIGNED_OUT_URL);
                     },
-                  });
-                }}
-              >
-                {isSigningOut ? (
-                  <Loader2Icon className="animate-spin" size={16} />
-                ) : (
-                  "Sign Out"
-                )}
-              </Button>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+                  },
+                });
+              }}
+            >
+              {isSigningOut ? (
+                <Loader2Icon className="animate-spin" size={16} />
+              ) : (
+                "Sign Out"
+              )}
+            </Button>
+          </ResponsiveDropdownMenuItem>
+        </ResponsiveDropdown>
       </SidebarMenuItem>
     </SidebarMenu>
   );
diff --git a/src/app/(feed)/feed/edit/FeedCategoryCombobox.tsx b/src/app/(feed)/feed/edit/FeedCategoryCombobox.tsx
index 46a3ed6..8d23d60 100644
--- a/src/app/(feed)/feed/edit/FeedCategoryCombobox.tsx
+++ b/src/app/(feed)/feed/edit/FeedCategoryCombobox.tsx
@@ -1,13 +1,12 @@
 "use client";
 
+import { ListFilterPlusIcon } from "lucide-react";
 import * as React from "react";
-import { Check, ChevronsUpDown, ListFilterPlusIcon } from "lucide-react";
 
-import { cn } from "~/lib/utils";
+import { useState } from "react";
 import { Button } from "~/components/ui/button";
 import {
   Command,
-  CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
@@ -17,7 +16,6 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "~/components/ui/popover";
-import { useState } from "react";
 
 type FeedCategoryComboboxProps<T extends string> = {
   options:
diff --git a/src/app/(feed)/feed/import/opml/OPMLSubscriptionImport.tsx b/src/app/(feed)/feed/import/opml/OPMLSubscriptionImport.tsx
index fefd009..99119c1 100644
--- a/src/app/(feed)/feed/import/opml/OPMLSubscriptionImport.tsx
+++ b/src/app/(feed)/feed/import/opml/OPMLSubscriptionImport.tsx
@@ -6,6 +6,7 @@ import { type SubscriptionImportMethodProps } from "../types";
 import { parseOPMLSubscriptionInput } from "./parseOPMLSubscriptionInput";
 
 export function OPMLSubscriptionImport({
+  importedChannels,
   setImportedChannels,
 }: SubscriptionImportMethodProps) {
   const [inputElement, setInputElement] = useState<HTMLInputElement | null>(
@@ -44,7 +45,7 @@ export function OPMLSubscriptionImport({
             multiple={false}
             onChange={onSelectFiles}
           ></input>
-          {!!inputElement?.files?.length && (
+          {!!importedChannels && inputElement && (
             <Button
               className="w-full"
               variant="outline"
diff --git a/src/app/(feed)/feed/import/page.tsx b/src/app/(feed)/feed/import/page.tsx
index 39014e7..e4c7205 100644
--- a/src/app/(feed)/feed/import/page.tsx
+++ b/src/app/(feed)/feed/import/page.tsx
@@ -9,7 +9,10 @@ import { Checkbox } from "~/components/ui/checkbox";
 import { Label } from "~/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group";
 import { useFeeds } from "~/lib/data/feeds";
-import { type SubscriptionImportMethod, type SubscriptionImportChannel } from "./types";
+import {
+  type SubscriptionImportMethod,
+  type SubscriptionImportChannel,
+} from "./types";
 import { YouTubeSubscriptionImport } from "./youtube/YouTubeSubscriptionImport";
 import { OPMLSubscriptionImport } from "./opml/OPMLSubscriptionImport";
 import FeedLoading from "~/app/loading";
@@ -76,10 +79,16 @@ export default function EditFeedsPage() {
         </fieldset>
       )}
       {importMethod === "subscriptions" && (
-        <YouTubeSubscriptionImport setImportedChannels={setImportedChannels} />
+        <YouTubeSubscriptionImport
+          importedChannels={importedChannels}
+          setImportedChannels={setImportedChannels}
+        />
       )}
       {importMethod === "opml" && (
-        <OPMLSubscriptionImport setImportedChannels={setImportedChannels} />
+        <OPMLSubscriptionImport
+          importedChannels={importedChannels}
+          setImportedChannels={setImportedChannels}
+        />
       )}
       {!!importedChannels && (
         <>
@@ -180,10 +189,12 @@ export default function EditFeedsPage() {
                 className="w-full"
                 size="lg"
                 onClick={() => {
+                  const channelsToImport = importedChannels.filter(
+                    (channel) => channel.shouldImport,
+                  );
+
                   void createFeedsFromSubscriptionImportMutation({
-                    channels: importedChannels.filter(
-                      (channel) => channel.shouldImport,
-                    ),
+                    channels: channelsToImport,
                   });
                 }}
                 disabled={isPending || channelImportCount === 0}
diff --git a/src/app/(feed)/feed/import/types.ts b/src/app/(feed)/feed/import/types.ts
index af55c42..8c86849 100644
--- a/src/app/(feed)/feed/import/types.ts
+++ b/src/app/(feed)/feed/import/types.ts
@@ -15,5 +15,6 @@ export type SubscriptionImportChannel = {
 };
 
 export type SubscriptionImportMethodProps = {
+  importedChannels: SubscriptionImportChannel[] | null;
   setImportedChannels: (channels: SubscriptionImportChannel[] | null) => void;
 };
diff --git a/src/app/(feed)/feed/import/youtube/YouTubeSubscriptionImport.tsx b/src/app/(feed)/feed/import/youtube/YouTubeSubscriptionImport.tsx
index 1a29bbf..e846e1d 100644
--- a/src/app/(feed)/feed/import/youtube/YouTubeSubscriptionImport.tsx
+++ b/src/app/(feed)/feed/import/youtube/YouTubeSubscriptionImport.tsx
@@ -7,6 +7,7 @@ import { parseYouTubeSubscriptionInput } from "./parseYouTubeSubscriptionInput";
 import { YouTubeSubscriptionImportCarousel } from "./YouTubeSubscriptionImportCarousel";
 
 export function YouTubeSubscriptionImport({
+  importedChannels,
   setImportedChannels,
 }: SubscriptionImportMethodProps) {
   const [inputElement, setInputElement] = useState<HTMLInputElement | null>(
@@ -45,7 +46,7 @@ export function YouTubeSubscriptionImport({
             multiple={false}
             onChange={onSelectFiles}
           ></input>
-          {!!inputElement?.files?.length && (
+          {!!importedChannels && inputElement && (
             <Button
               className="w-full"
               variant="outline"
@@ -60,7 +61,7 @@ export function YouTubeSubscriptionImport({
           )}
         </div>
       </fieldset>
-      {!inputElement?.files?.length && (
+      {!importedChannels && (
         <div className="mt-16">
           <h3 className="mb-4 font-semibold">
             How do I find my &quot;subscriptions.csv&quot; file?
diff --git a/src/components/AddFeedDialog.tsx b/src/components/AddFeedDialog.tsx
index cda8bb6..e34d963 100644
--- a/src/components/AddFeedDialog.tsx
+++ b/src/components/AddFeedDialog.tsx
@@ -128,7 +128,7 @@ export function AddFeedDialog() {
               }}
             >
               <ImportIcon size={16} />
-              <span className="hidden pl-1.5 md:block">Bulk Import</span>
+              <span className="pl-1.5">Bulk Import</span>
             </Button>
           </Link>
         </div>
diff --git a/src/components/CustomVideoPlayer/index.tsx b/src/components/CustomVideoPlayer/index.tsx
index d97c701..f364763 100644
--- a/src/components/CustomVideoPlayer/index.tsx
+++ b/src/components/CustomVideoPlayer/index.tsx
@@ -2,16 +2,11 @@
 "use client";
 
 import clsx from "clsx";
-import {
-  FullscreenIcon,
-  PlayIcon,
-  MaximizeIcon,
-  MinimizeIcon,
-  PlusIcon,
-  MinusIcon,
-} from "lucide-react";
+import { MaximizeIcon, MinimizeIcon, PlayIcon } from "lucide-react";
 import YouTube from "react-youtube";
+import { useFlagState } from "~/lib/hooks/useFlagState";
 import { transformSecondsToFormattedTime } from "~/lib/transformSecondsToFormattedTime";
+import { ButtonWithShortcut } from "../ButtonWithShortcut";
 import { useKeyboard } from "../KeyboardProvider";
 import { Button } from "../ui/button";
 import { Slider } from "../ui/slider";
@@ -22,8 +17,6 @@ import {
 } from "./CustomVideoPlayerProvider";
 import { YOUTUBE_PLAYBACK_SPEEDS, YOUTUBE_PLAYER_STATES } from "./constants";
 import { useVideoShortcuts } from "./useYouTubeVideoShortcuts";
-import { ButtonWithShortcut } from "../ButtonWithShortcut";
-import { useFlagState } from "~/lib/hooks/useFlagState";
 
 interface IResponsiveVideoProps {
   videoID?: string;
@@ -161,12 +154,13 @@ function CustomVideoPlayerContent(props: IResponsiveVideoProps) {
                       {videoProgress >= videoDuration - 5 ? "Live" : "Go Live"}
                     </Button>
                   )}
-                  {videoType === "video" && (
-                    <div className="w-max font-mono text-sm font-bold">
-                      {transformSecondsToFormattedTime(videoProgress)} /{" "}
-                      {transformSecondsToFormattedTime(videoDuration)}
-                    </div>
-                  )}
+                  {videoType === "video" ||
+                    (videoType === "live" && videoProgress < videoDuration && (
+                      <div className="w-max font-mono text-sm font-bold">
+                        {transformSecondsToFormattedTime(videoProgress)} /{" "}
+                        {transformSecondsToFormattedTime(videoDuration)}
+                      </div>
+                    ))}
                 </div>
                 <div className="flex items-center gap-2">
                   <ButtonWithShortcut
diff --git a/src/components/LeftSidebarBottomNav.tsx b/src/components/LeftSidebarBottomNav.tsx
index 574a98d..aeffd81 100644
--- a/src/components/LeftSidebarBottomNav.tsx
+++ b/src/components/LeftSidebarBottomNav.tsx
@@ -9,7 +9,15 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
 } from "~/components/ui/sidebar";
-import { NotebookIcon, PaletteIcon } from "lucide-react";
+import {
+  CircleHelpIcon,
+  HelpingHandIcon,
+  LifeBuoyIcon,
+  LightbulbIcon,
+  MailIcon,
+  NotebookIcon,
+  PaletteIcon,
+} from "lucide-react";
 import Link from "next/link";
 import { ColorThemeDropdownSidebar } from "./color-theme/ColorThemePopoverButton";
 
@@ -34,6 +42,30 @@ export function LeftSidebarBottomNav() {
               </Link>
             </SidebarMenuButton>
           </SidebarMenuItem>
+          <SidebarMenuItem>
+            <SidebarMenuButton asChild>
+              <Link
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://github.com/hfellerhoff/serial/issues/new?template=bug-report.md"
+              >
+                <LifeBuoyIcon />
+                <span>Report Issue</span>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+          <SidebarMenuItem>
+            <SidebarMenuButton asChild>
+              <Link
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://github.com/hfellerhoff/serial/issues/new?template=feature_request.md"
+              >
+                <LightbulbIcon />
+                <span>Share Idea</span>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
         </SidebarMenu>
       </SidebarGroupContent>
     </SidebarGroup>
diff --git a/src/components/app-sidebar.tsx b/src/components/app-sidebar.tsx
index 60cfddc..92e4c99 100644
--- a/src/components/app-sidebar.tsx
+++ b/src/components/app-sidebar.tsx
@@ -62,13 +62,13 @@ export function AppLeftSidebar() {
             </SidebarMenuButton>
           </SidebarMenuItem>
         </SidebarMenu>
+        <LeftSidebarMain />
       </SidebarHeader>
       <SidebarContent>
-        <LeftSidebarMain />
         <SidebarCategories />
-        <LeftSidebarBottomNav />
       </SidebarContent>
       <SidebarFooter>
+        <LeftSidebarBottomNav />
         <UserManagementNavItem />
       </SidebarFooter>
     </Sidebar>
diff --git a/src/components/color-theme/ColorThemePopoverButton.tsx b/src/components/color-theme/ColorThemePopoverButton.tsx
index 711ebf9..dceea5f 100644
--- a/src/components/color-theme/ColorThemePopoverButton.tsx
+++ b/src/components/color-theme/ColorThemePopoverButton.tsx
@@ -19,6 +19,7 @@ import {
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
 import { useSidebar } from "../ui/sidebar";
+import { ResponsiveDropdown } from "../ui/responsive-dropdown";
 
 function getCssVariable(name: string) {
   const value = window
@@ -228,22 +229,14 @@ export function ColorThemeDropdownSidebar({
   const { isMobile } = useSidebar();
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
-      <DropdownMenuContent
-        className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg p-4"
-        side={isMobile ? "bottom" : "right"}
-        align="end"
-        sideOffset={4}
-      >
-        <ColorModeToggleGroup />
-        <div className="h-4" />
-        <EditColorsForm />
-        <div className="h-6" />
-        <EnableCustomVideoPlayerToggle />
-        <div className="h-4" />
-        <ShowShortcutsToggle />
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <ResponsiveDropdown trigger={children} side="right">
+      <ColorModeToggleGroup />
+      <div className="h-4" />
+      <EditColorsForm />
+      <div className="h-6" />
+      <EnableCustomVideoPlayerToggle />
+      <div className="h-4" />
+      <ShowShortcutsToggle />
+    </ResponsiveDropdown>
   );
 }
diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx
index 196db90..b4ae3ab 100644
--- a/src/components/ui/drawer.tsx
+++ b/src/components/ui/drawer.tsx
@@ -1,26 +1,24 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
-const Drawer = ({
-  shouldScaleBackground = true,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+export type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>;
+const Drawer = ({ shouldScaleBackground = true, ...props }: DrawerProps) => (
   <DrawerPrimitive.Root
     shouldScaleBackground={shouldScaleBackground}
     {...props}
   />
-)
-Drawer.displayName = "Drawer"
+);
+Drawer.displayName = "Drawer";
 
-const DrawerTrigger = DrawerPrimitive.Trigger
+const DrawerTrigger = DrawerPrimitive.Trigger;
 
-const DrawerPortal = DrawerPrimitive.Portal
+const DrawerPortal = DrawerPrimitive.Portal;
 
-const DrawerClose = DrawerPrimitive.Close
+const DrawerClose = DrawerPrimitive.Close;
 
 const DrawerOverlay = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Overlay>,
@@ -31,8 +29,8 @@ const DrawerOverlay = React.forwardRef<
     className={cn("fixed inset-0 z-50 bg-black/80", className)}
     {...props}
   />
-))
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
 const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
@@ -43,17 +41,17 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-        className
+        "bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
+        className,
       )}
       {...props}
     >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      <div className="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full" />
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>
-))
-DrawerContent.displayName = "DrawerContent"
+));
+DrawerContent.displayName = "DrawerContent";
 
 const DrawerHeader = ({
   className,
@@ -63,8 +61,8 @@ const DrawerHeader = ({
     className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
     {...props}
   />
-)
-DrawerHeader.displayName = "DrawerHeader"
+);
+DrawerHeader.displayName = "DrawerHeader";
 
 const DrawerFooter = ({
   className,
@@ -74,8 +72,8 @@ const DrawerFooter = ({
     className={cn("mt-auto flex flex-col gap-2 p-4", className)}
     {...props}
   />
-)
-DrawerFooter.displayName = "DrawerFooter"
+);
+DrawerFooter.displayName = "DrawerFooter";
 
 const DrawerTitle = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Title>,
@@ -84,13 +82,13 @@ const DrawerTitle = React.forwardRef<
   <DrawerPrimitive.Title
     ref={ref}
     className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
+      "text-lg leading-none font-semibold tracking-tight",
+      className,
     )}
     {...props}
   />
-))
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 
 const DrawerDescription = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Description>,
@@ -98,11 +96,11 @@ const DrawerDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground text-sm", className)}
     {...props}
   />
-))
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
 
 export {
   Drawer,
@@ -115,4 +113,4 @@ export {
   DrawerFooter,
   DrawerTitle,
   DrawerDescription,
-}
+};
diff --git a/src/components/ui/responsive-dialog.tsx b/src/components/ui/responsive-dialog.tsx
deleted file mode 100644
index de9cfa2..0000000
--- a/src/components/ui/responsive-dialog.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import * as React from "react";
-
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "~/components/ui/dialog";
-import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "~/components/ui/drawer";
-import { useMediaQuery } from "~/lib/hooks/use-media-query";
-
-interface ResponsiveDialogProps {
-  trigger: React.ReactNode;
-  children: React.ReactNode;
-  title?: string;
-  description?: string;
-}
-export function ResponsiveDialog({
-  children,
-  trigger,
-  title,
-  description,
-}: ResponsiveDialogProps) {
-  const [open, setOpen] = React.useState(false);
-  // const isDesktop = useMediaQuery("(min-width: 640px)");
-
-  if (true) {
-    return (
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogTrigger asChild>{trigger}</DialogTrigger>
-        <DialogContent className="sm:max-w-[425px]">
-          <DialogHeader>
-            <DialogTitle>{title}</DialogTitle>
-            <DialogDescription>{description}</DialogDescription>
-          </DialogHeader>
-          {children}
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  return (
-    <Drawer open={open} onOpenChange={setOpen}>
-      <DrawerTrigger asChild>{trigger}</DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader className="text-left">
-          <DrawerTitle>{title}</DrawerTitle>
-          <DrawerDescription>{description}</DrawerDescription>
-        </DrawerHeader>
-        <div className="px-4 pb-4">{children}</div>
-      </DrawerContent>
-    </Drawer>
-  );
-}
diff --git a/src/components/ui/responsive-dropdown.tsx b/src/components/ui/responsive-dropdown.tsx
new file mode 100644
index 0000000..14e9dea
--- /dev/null
+++ b/src/components/ui/responsive-dropdown.tsx
@@ -0,0 +1,101 @@
+import * as React from "react";
+
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "~/components/ui/drawer";
+import { useMediaQuery } from "~/lib/hooks/use-media-query";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+import {
+  DropdownMenuContentProps,
+  DropdownMenuItemProps,
+  DropdownMenuProps,
+} from "@radix-ui/react-dropdown-menu";
+
+export function ResponsiveDropdownMenuItem({
+  children,
+  ...rest
+}: DropdownMenuItemProps) {
+  const isDesktop = useMediaQuery("(min-width: 640px)");
+
+  if (isDesktop) {
+    return <DropdownMenuItem {...rest}>{children}</DropdownMenuItem>;
+  }
+
+  return children;
+}
+
+export function ResponsiveDropdownLabel({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  const isDesktop = useMediaQuery("(min-width: 640px)");
+
+  if (isDesktop) {
+    return (
+      <DropdownMenuLabel className={className}>{children}</DropdownMenuLabel>
+    );
+  }
+
+  return <div className={className}>{children}</div>;
+}
+
+interface ResponsiveDropdownProps {
+  trigger: React.ReactNode;
+  children: React.ReactNode;
+  title?: string;
+  description?: string;
+  side?: DropdownMenuContentProps["side"];
+}
+export function ResponsiveDropdown({
+  children,
+  trigger,
+  title,
+  description,
+  side,
+}: ResponsiveDropdownProps) {
+  const [open, setOpen] = React.useState(false);
+  const isDesktop = useMediaQuery("(min-width: 640px)");
+
+  if (isDesktop) {
+    return (
+      <DropdownMenu open={open} onOpenChange={setOpen}>
+        <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+        <DropdownMenuContent
+          className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg p-4"
+          align="end"
+          sideOffset={4}
+          side={side}
+        >
+          {children}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader className="text-left">
+          <DrawerTitle>{title}</DrawerTitle>
+          <DrawerDescription>{description}</DrawerDescription>
+        </DrawerHeader>
+        <div className="px-4 pb-4">{children}</div>
+      </DrawerContent>
+    </Drawer>
+  );
+}
diff --git a/src/content/releases/2025-04-18.md b/src/content/releases/2025-04-18.md
new file mode 100644
index 0000000..fa753ca
--- /dev/null
+++ b/src/content/releases/2025-04-18.md
@@ -0,0 +1,15 @@
+---
+title: "Quality of Life"
+description: "Serial gets a variety of UI/UX improvements and a way to send feedback both good and bad"
+publish_date: "2025-04-18"
+public: true
+---
+
+#### Improvements
+
+- UI items in left sidebar are now always visible, even when the list of categories is long
+- Adds "Report Issue" and "Share Idea" buttons to sidebar
+- More intelligently sets date filter when selecting sidebar items:
+  - When selecting "All", sets the date to "Today"
+  - When selecting a feed, sets the date to "This Month"
+- Adds nicer bottom sheet mobile UI for sidebar items with popup menus