diff --git a/src/components/clerk/Topbar.tsx b/src/components/clerk/Topbar.tsx
index 5e081d0..3616615 100644
--- a/src/components/clerk/Topbar.tsx
+++ b/src/components/clerk/Topbar.tsx
@@ -48,7 +48,7 @@ export default function TopBar({ inter }: { inter: string }) {
   return (
     <>
       <SignedOut>
-        <div className="mt-1 gap-1 grid grid-cols-5">
+        <div className="mt-1 gap-1 grid grid-cols-6">
           <SignInPopoverButton className="col-span-2" variant="outline" />
           <Button
             size="icon"
@@ -91,7 +91,7 @@ export default function TopBar({ inter }: { inter: string }) {
         </div>
       </SignedOut>
       <SignedIn>
-        <div className="mt-1 grid grid-cols-4 gap-1">
+        <div className="mt-1 grid grid-cols-5 gap-1">
           <Popover>
             <PopoverTrigger>
               <Button size="icon" variant="ghost" className="mb-1">
diff --git a/src/components/misc/SnowfallController.tsx b/src/components/misc/SnowfallController.tsx
index 02f77f0..31b1e29 100644
--- a/src/components/misc/SnowfallController.tsx
+++ b/src/components/misc/SnowfallController.tsx
@@ -29,19 +29,19 @@
  */
 
 "use client";
-
 import { CommandEvents } from "@/lib/commandEvent";
-import { useEffectOnce } from "@/lib/useEffectOnce";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Snowfall from "react-snowfall";
 
 export const snowfallEvents = new CommandEvents();
 export default function SnowfallController() {
   const [visible, setVisible] = useState(true);
 
-  useEffectOnce(() => {
-    snowfallEvents.on("toggle", () => setVisible(!visible));
-  });
+  useEffect(() => {
+    snowfallEvents.on("toggle", () => {
+      setVisible(!visible);
+    });
+  }, [visible]);
 
   return (
     <>