-      
{commitChanges}
+    
+      
{commitChanges}
       
     
   );
diff --git a/components/loader.tsx b/components/loader.tsx
index e0cf5f7..98ee9a5 100644
--- a/components/loader.tsx
+++ b/components/loader.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 const Loader = () => {
-  return 
;
+  return 
;
 };
 
 export default Loader;
diff --git a/components/md-components.tsx b/components/md-components.tsx
index f21a3ef..d3739fb 100644
--- a/components/md-components.tsx
+++ b/components/md-components.tsx
@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils";
 import { NpmCommands } from "@/types/unist";
 import { Style } from "@/components/md/styles";
 import { Event } from "@/lib/events";
-import { CopyButton, CopyNpmCommandButton } from "@/components/md/copy-button";
+import { CopyButton } from "@/components/md/copy-button";
 import { CodeBlockWrapper } from "@/components/md/code-block-wrapper";
 import Image from "next/image";
 import { StyleWrapper } from "@/components/md/style-wrapper";
@@ -17,16 +17,12 @@ import { coldarkDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { remark } from "remark";
 import rehypeKatex from "rehype-katex";
 
-const customStyle = {
-  backgroundColor: "#18181b",
-};
-
 const components = {
   h1: ({ className, ...props }: React.HTMLAttributes
) => (
     
@@ -35,7 +31,7 @@ const components = {
     
@@ -44,7 +40,7 @@ const components = {
     
@@ -53,7 +49,7 @@ const components = {
     
@@ -62,7 +58,7 @@ const components = {
     
@@ -71,7 +67,7 @@ const components = {
     
@@ -129,7 +125,7 @@ const components = {
     @@ -138,7 +134,7 @@ const components = { | @@ -166,8 +162,8 @@ const components = {
       
         
@@ -180,21 +176,6 @@ const components = {
             className={cn("absolute right-4 top-4", __withMeta__ && "top-16")}
           />
         )}
-
-        {__npmCommand__ &&
-          __yarnCommand__ &&
-          __pnpmCommand__ &&
-          __bunCommand__ && (
-            
-          )}
       
     );
   },
@@ -203,24 +184,22 @@ const components = {
     const match = /language-(\w+)/.exec(className || "");
 
     const language = match ? match[1] : null;
-    const modifier = match ? match[2] : null;
     const value = String(children).replace(/\n$/, "");
 
+    const customStyle = {
+      backgroundColor: "var(--primary-foreground) / 0.05",
+    };
+
     return match ? ( | 
-        
+        
           
             {value}
           
@@ -230,8 +209,8 @@ const components = {
     ) : (
       
+      {showNotification && (
+        
+      )}
+    
+  );
+};
+
+export default NotificationBanner;
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
new file mode 100644
index 0000000..88adf87
--- /dev/null
+++ b/components/ui/dialog.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef,
+  React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+  
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef,
+  React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+  
+    
+    
+      {children}
+    
+  
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes) => (
+  
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes) => (
+  
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef,
+  React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+  
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef,
+  React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+  
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/components/ui/spinner.tsx b/components/ui/spinner.tsx
new file mode 100644
index 0000000..e7ce46e
--- /dev/null
+++ b/components/ui/spinner.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Spinner = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => {
+  const computeDelay = (i: number) => `${-1.2 + i * 0.1}s`;
+  const computeRotation = (i: number) => `${i * 30}deg`;
+  return (
+    
+      
+        {[...Array(12)].map((_, i) => (
+          
+        ))}
+      
+