diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx
index b4daf39..6cc50bb 100644
--- a/src/components/AppLayout.tsx
+++ b/src/components/AppLayout.tsx
@@ -113,7 +113,9 @@ export function AppLayout({ children }: AppLayoutProps) {
               )}
               <span>{brandName}</span>
             </Link>
-            <nav className="flex items-center gap-4">
+
+            {/* Desktop Navigation */}
+            <nav className="hidden md:flex items-center gap-4">
               <Link to="/products" className="hover:underline font-medium">Produk</Link>
               <Link to="/calendar" className="hover:underline font-medium">Kalender</Link>
               <Link to="/auth">
@@ -133,6 +135,43 @@ export function AppLayout({ children }: AppLayoutProps) {
                 </Button>
               </Link>
             </nav>
+
+            {/* Mobile Menu Trigger */}
+            <div className="md:hidden flex items-center gap-2">
+              <Link to="/checkout">
+                <Button variant="outline" size="sm" className="relative border-2">
+                  <ShoppingCart className="w-4 h-4" />
+                  {items.length > 0 && (
+                    <span className="absolute -top-2 -right-2 bg-primary text-primary-foreground text-xs w-5 h-5 flex items-center justify-center">
+                      {items.length}
+                    </span>
+                  )}
+                </Button>
+              </Link>
+              <Sheet>
+                <SheetTrigger asChild>
+                  <Button variant="ghost" size="sm">
+                    <Menu className="w-6 h-6" />
+                  </Button>
+                </SheetTrigger>
+                <SheetContent side="right" className="border-l-2 border-border">
+                  <nav className="flex flex-col space-y-4 mt-8">
+                    <Link to="/products" className="flex items-center gap-3 text-lg font-medium">
+                      <Package className="w-5 h-5" />
+                      Produk
+                    </Link>
+                    <Link to="/calendar" className="flex items-center gap-3 text-lg font-medium">
+                      <Calendar className="w-5 h-5" />
+                      Kalender
+                    </Link>
+                    <Link to="/auth" className="flex items-center gap-3 text-lg font-medium">
+                      <User className="w-5 h-5" />
+                      Login
+                    </Link>
+                  </nav>
+                </SheetContent>
+              </Sheet>
+            </div>
           </div>
         </header>
         <main className="flex-1">{children}</main>
diff --git a/src/components/RichTextEditor.tsx b/src/components/RichTextEditor.tsx
index ab99d3b..57a504c 100644
--- a/src/components/RichTextEditor.tsx
+++ b/src/components/RichTextEditor.tsx
@@ -628,7 +628,7 @@ export function RichTextEditor({ content, onChange, placeholder = 'Tulis konten.
       <div onPaste={handlePaste}>
         <EditorContent
           editor={editor}
-          className="prose prose-sm max-w-none p-4 min-h-[200px] focus:outline-none [&_.ProseMirror]:outline-none [&_.ProseMirror]:min-h-[180px] [&_img]:cursor-pointer [&_img.ProseMirror-selectednode]:ring-2 [&_img.ProseMirror-selectednode]:ring-primary [&_h1]:font-bold [&_h1]:text-2xl [&_h1]:mb-4 [&_h1]:mt-6 [&_h2]:font-bold [&_h2]:text-xl [&_h2]:mb-3 [&_h2]:mt-5 [&_blockquote]:border-l-4 [&_blockquote]:border-primary [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-muted-foreground [&_blockquote]:my-4"
+          className="prose prose-sm max-w-none p-4 min-h-[200px] focus:outline-none [&_.ProseMirror]:outline-none [&_.ProseMirror]:min-h-[180px] [&_img]:cursor-pointer [&_img.ProseMirror-selectednode]:ring-2 [&_img.ProseMirror-selectednode]:ring-primary [&_h1]:font-bold [&_h1]:text-2xl [&_h1]:mb-4 [&_h1]:mt-6 [&_h2]:font-bold [&_h2]:text-xl [&_h2]:mb-3 [&_h2]:mt-5 [&_blockquote]:border-l-4 [&_blockquote]:border-primary [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-muted-foreground [&_blockquote]:my-4 [&_ul]:list-disc [&_ul]:pl-6 [&_ul]:space-y-1 [&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:space-y-1 [&_li]:marker:text-primary"
         />
       </div>
       {uploading && (
diff --git a/src/index.css b/src/index.css
index ec9aa63..8c1557f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -165,4 +165,60 @@ All colors MUST be HSL.
   .bg-brand-accent {
     background-color: var(--brand-accent, hsl(var(--accent)));
   }
+}
+
+/* Enhanced prose styling for better content formatting */
+@layer base {
+  /* Headings */
+  .prose h1 {
+    @apply text-2xl font-bold mt-6 mb-4;
+  }
+  .prose h2 {
+    @apply text-xl font-bold mt-5 mb-3;
+  }
+  .prose h3 {
+    @apply text-lg font-bold mt-4 mb-2;
+  }
+
+  /* Lists */
+  .prose ul {
+    @apply list-disc pl-6 space-y-1 my-4;
+  }
+  .prose ol {
+    @apply list-decimal pl-6 space-y-1 my-4;
+  }
+  .prose li {
+    @apply marker:text-primary;
+  }
+
+  /* Blockquotes */
+  .prose blockquote {
+    @apply border-l-4 border-primary pl-4 italic text-muted-foreground my-4;
+  }
+
+  /* Links */
+  .prose a {
+    @apply text-primary underline;
+  }
+
+  /* Strong/Bold */
+  .prose strong, .prose b {
+    @apply font-bold;
+  }
+
+  /* Emphasis/Italic */
+  .prose em, .prose i {
+    @apply italic;
+  }
+
+  /* Code */
+  .prose code {
+    @apply bg-muted px-1.5 py-0.5 rounded text-sm font-mono;
+  }
+  .prose pre {
+    @apply bg-muted p-4 rounded-lg overflow-x-auto my-4;
+  }
+  .prose pre code {
+    @apply bg-transparent p-0;
+  }
 }
\ No newline at end of file