diff --git a/src/components/create-post-form.tsx b/src/components/create-post-form.tsx
index d73312b..70af648 100644
--- a/src/components/create-post-form.tsx
+++ b/src/components/create-post-form.tsx
@@ -11,7 +11,7 @@ import { checkAiAccess, generateAiContent } from "@/functions/ai"
 import { createDestinationFromInput, getRecentDestinations } from "@/functions/posts"
 import type { PlatformInfo, PostDestination } from "@/lib/server/social-platforms/base-platform"
 import { useMutation, useQuery } from "@tanstack/react-query"
-import { CalendarClock, ChevronDown, ChevronUp, HelpCircle, Loader2, Lock, MapPin, Rocket, RotateCcw, Sparkles, X } from "lucide-react"
+import { CalendarClock, ChevronDown, ChevronUp, HelpCircle, History, Loader2, Lock, MapPin, Rocket, Sparkles, X, Zap } from "lucide-react"
 import { useState } from "react"
 import { toast } from "sonner"
 
@@ -326,9 +326,9 @@ export function CreatePostForm({
     }
 
     return (
-      <div className="space-y-4">
+      <div className="space-y-3">
         {platformInfo.requiredFields.map((field) => (
-          <div key={field.key} className="space-y-2">
+          <div key={field.key} className="space-y-1">
             <Label htmlFor={field.key} className="font-medium text-sm">
               {field.label}
               {field.required && <span className="ml-1 text-red-500">*</span>}
@@ -340,7 +340,7 @@ export function CreatePostForm({
                 onChange={(e) => handleAdditionalFieldChange(field.key, e.target.value)}
                 placeholder={field.placeholder}
                 maxLength={field.maxLength}
-                className="min-h-[80px]"
+                className="min-h-[60px]"
               />
             ) : field.type === "select" && field.options ? (
               <Select value={additionalFields[field.key] || ""} onValueChange={(value) => handleAdditionalFieldChange(field.key, value)}>
@@ -365,7 +365,7 @@ export function CreatePostForm({
                 maxLength={field.maxLength}
               />
             )}
-            {field.helpText && <p className="text-gray-600 text-sm dark:text-gray-400">{field.helpText}</p>}
+            {field.helpText && <p className="text-gray-600 text-xs dark:text-gray-400">{field.helpText}</p>}
           </div>
         ))}
       </div>
@@ -378,7 +378,6 @@ export function CreatePostForm({
 
   const renderAiButton = () => {
     if (isAiAvailable) {
-      // AI is available - show normal button
       return (
         <Button
           type="button"
@@ -392,7 +391,6 @@ export function CreatePostForm({
         </Button>
       )
     }
-    // AI is not available - show disabled button with tooltip and description
     return (
       <div className="space-y-2">
         <TooltipProvider>
@@ -416,7 +414,7 @@ export function CreatePostForm({
   }
 
   const renderAdvancedSettings = () => (
-    <div className="space-y-4 rounded-lg border bg-muted/50 p-4">
+    <div className="space-y-3 rounded-lg border bg-muted/30 p-3">
       <div className="flex items-center justify-between">
         <Label className="font-medium text-sm">AI Tuning Parameters</Label>
         <Button type="button" variant="ghost" size="sm" onClick={() => setShowAdvancedSettings(!showAdvancedSettings)}>
@@ -425,9 +423,9 @@ export function CreatePostForm({
       </div>
 
       {showAdvancedSettings && (
-        <div className="space-y-4">
-          <div className="grid grid-cols-2 gap-4">
-            <div className="space-y-2">
+        <div className="space-y-3">
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <div className="space-y-1">
               <Label htmlFor="temperature" className="text-sm">
                 Creativity ({aiParameters.temperature})
               </Label>
@@ -447,7 +445,7 @@ export function CreatePostForm({
               </div>
             </div>
 
-            <div className="space-y-2">
+            <div className="space-y-1">
               <Label htmlFor="maxTokens" className="text-sm">
                 Max Length
               </Label>
@@ -463,8 +461,8 @@ export function CreatePostForm({
             </div>
           </div>
 
-          <div className="grid grid-cols-2 gap-4">
-            <div className="space-y-2">
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <div className="space-y-1">
               <Label className="text-sm">Style Override</Label>
               <Select
                 value={aiParameters.styleOverride}
@@ -483,7 +481,7 @@ export function CreatePostForm({
               </Select>
             </div>
 
-            <div className="space-y-2">
+            <div className="space-y-1">
               <Label className="text-sm">Tone Override</Label>
               <Select
                 value={aiParameters.toneOverride}
@@ -503,7 +501,7 @@ export function CreatePostForm({
             </div>
           </div>
 
-          <div className="space-y-2">
+          <div className="space-y-1">
             <Label className="text-sm">Length Override</Label>
             <Select
               value={aiParameters.lengthOverride}
@@ -520,7 +518,7 @@ export function CreatePostForm({
             </Select>
           </div>
 
-          <div className="flex gap-4">
+          <div className="flex flex-wrap gap-3">
             <div className="flex items-center space-x-2">
               <Checkbox
                 id="useEmojisOverride"
@@ -548,7 +546,7 @@ export function CreatePostForm({
             </div>
           </div>
 
-          <div className="space-y-2">
+          <div className="space-y-1">
             <Label htmlFor="customInstructionsOverride" className="text-sm">
               Custom Instructions Override
             </Label>
@@ -566,25 +564,25 @@ export function CreatePostForm({
   )
 
   return (
-    <div className="w-full rounded-lg border p-4">
-      <h2 className="mb-4 font-semibold text-lg">Create a new post</h2>
-      <div className="grid gap-4">
-        {/* AI Generation Section - Always visible */}
-        <div className="space-y-2">
-          {!showAiInput || !isAiAvailable ? (
-            renderAiButton()
-          ) : (
-            <div className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="ai-prompt">AI Prompt</Label>
+    <div className="w-full space-y-4">
+      {/* AI Generation Section */}
+      <div className="space-y-3">
+        {!showAiInput || !isAiAvailable ? (
+          renderAiButton()
+        ) : (
+          <div className="space-y-3">
+            <div className="space-y-2">
+              <Label htmlFor="ai-prompt">AI Prompt</Label>
+              <div className="flex flex-col gap-2 sm:flex-row">
+                <Input
+                  id="ai-prompt"
+                  placeholder="e.g., Write a post about the benefits of remote work"
+                  value={aiPrompt}
+                  onChange={(e) => setAiPrompt(e.target.value)}
+                  disabled={isGenerating}
+                  className="flex-1"
+                />
                 <div className="flex gap-2">
-                  <Input
-                    id="ai-prompt"
-                    placeholder="e.g., Write a post about the benefits of remote work"
-                    value={aiPrompt}
-                    onChange={(e) => setAiPrompt(e.target.value)}
-                    disabled={isGenerating}
-                  />
                   <Button type="button" onClick={() => handleGenerateAiContent()} disabled={!aiPrompt.trim() || isGenerating} size="sm">
                     {isGenerating ? (
                       <>
@@ -612,228 +610,259 @@ export function CreatePostForm({
                   </Button>
                 </div>
               </div>
-
-              {/* Advanced AI Settings */}
-              {renderAdvancedSettings()}
-
-              {/* Quick Adjustment Buttons - only show if content exists */}
-              {
-                <div className="space-y-2">
-                  <Label className="font-medium text-sm">Quick Adjustments</Label>
-                  <div className="flex flex-wrap gap-2">
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      onClick={() => handleQuickAdjustment("shorter")}
-                      disabled={isGenerating}
-                    >
-                      <RotateCcw />
-                      Shorter
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      onClick={() => handleQuickAdjustment("longer")}
-                      disabled={isGenerating}
-                    >
-                      <RotateCcw />
-                      Longer
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      onClick={() => handleQuickAdjustment("formal")}
-                      disabled={isGenerating}
-                    >
-                      <RotateCcw />
-                      More Formal
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      onClick={() => handleQuickAdjustment("casual")}
-                      disabled={isGenerating}
-                    >
-                      <RotateCcw />
-                      More Casual
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      onClick={() => handleQuickAdjustment("humor")}
-                      disabled={isGenerating}
-                    >
-                      <RotateCcw />
-                      Add Humor
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      onClick={() => handleQuickAdjustment("engaging")}
-                      disabled={isGenerating}
-                    >
-                      <RotateCcw />
-                      More Engaging
-                    </Button>
-                  </div>
-                </div>
-              }
-
-              {/* Generation History */}
-              {generationHistory.length > 0 && (
-                <div className="space-y-2">
-                  <div className="flex items-center justify-between">
-                    <Label className="font-medium text-sm">Generation History</Label>
-                    <Button type="button" variant="ghost" size="sm" onClick={() => setShowGenerationHistory(!showGenerationHistory)}>
-                      {showGenerationHistory ? "Hide" : "Show"} History
-                    </Button>
-                  </div>
-
-                  {showGenerationHistory && (
-                    <div className="max-h-60 space-y-2 overflow-y-auto rounded-lg border bg-muted/30 p-2">
-                      {generationHistory.map((item) => (
-                        <div key={item.id} className="rounded border bg-background p-2">
-                          <div className="mb-1 flex items-start justify-between">
-                            <span className="text-muted-foreground text-xs">{item.timestamp.toLocaleTimeString()}</span>
-                            <Button
-                              type="button"
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => handleUseHistoryItem(item)}
-                              className="h-6 px-2 text-xs"
-                            >
-                              Use
-                            </Button>
-                          </div>
-                          <p className="line-clamp-2 text-sm">{item.content}</p>
-                          <p className="mt-1 text-muted-foreground text-xs">Prompt: {item.prompt}</p>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              )}
             </div>
-          )}
-        </div>
 
-        {/* Main Content Textarea */}
-        <Textarea placeholder="What's on your mind?" value={content} onChange={(e) => setContent(e.target.value)} disabled={isGenerating} />
-
-        {/* Destination Selection - Only show if platform supports destinations */}
-        {platformInfo?.supportsDestinations && (
-          <div className="space-y-2">
-            <div className="flex items-center gap-2">
-              <MapPin className="h-4 w-4" />
-              <Label className="font-medium text-sm">
-                Destination
-                {platformInfo.destinationRequired && <span className="ml-1 text-red-500">*</span>}
-              </Label>
-              {platformInfo.destinationHelpText && (
-                <TooltipProvider>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <HelpCircle className="h-4 w-4 cursor-help text-muted-foreground" />
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <p className="max-w-xs">{platformInfo.destinationHelpText}</p>
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-              )}
-            </div>
+            {/* Advanced AI Settings */}
+            {renderAdvancedSettings()}
 
-            {/* Selected Destination Display */}
-            {selectedDestination && (
-              <div className="flex items-center gap-2 rounded-lg bg-muted p-2">
-                <MapPin className="h-4 w-4 text-muted-foreground" />
-                <div className="flex-1">
-                  <div className="font-medium text-sm">{selectedDestination.name}</div>
-                  {selectedDestination.description && (
-                    <div className="text-muted-foreground text-xs">{selectedDestination.description}</div>
-                  )}
-                </div>
-                <Button type="button" variant="ghost" size="sm" onClick={() => setSelectedDestination(undefined)} className="h-6 w-6 p-0">
-                  <X className="h-4 w-4" />
-                </Button>
-              </div>
-            )}
-
-            {/* Destination Selection */}
-            {!selectedDestination && (
+            {/* Quick Adjustment Buttons */}
+            {content && (
               <div className="space-y-2">
-                {/* Recent Destinations */}
-                {recentDestinations && recentDestinations.length > 0 && (
-                  <div className="space-y-2">
-                    <Label className="text-sm">Recent Destinations</Label>
-                    <div className="flex flex-wrap gap-2">
-                      {recentDestinations.map((dest) => (
-                        <Button
-                          key={dest.id}
-                          type="button"
-                          variant="outline"
-                          size="sm"
-                          onClick={() => handleDestinationSelect(dest)}
-                          className="h-8 text-xs"
-                        >
-                          <MapPin className="mr-1 h-3 w-3" />
-                          {dest.name}
-                        </Button>
-                      ))}
-                    </div>
-                  </div>
-                )}
-
-                {/* Custom Destination Input */}
-                <div className="space-y-2">
+                <Label className="font-medium text-sm">Quick Adjustments</Label>
+                <div className="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
                   <Button
                     type="button"
                     variant="outline"
                     size="sm"
-                    onClick={() => setShowCustomDestination(!showCustomDestination)}
-                    className="w-full"
+                    onClick={() => handleQuickAdjustment("shorter")}
+                    disabled={isGenerating}
+                    className="justify-start"
                   >
-                    {showCustomDestination ? "Cancel" : "Add Custom Destination"}
+                    <Zap className="mr-1 h-3 w-3" />
+                    Shorter
                   </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleQuickAdjustment("longer")}
+                    disabled={isGenerating}
+                    className="justify-start"
+                  >
+                    <Zap className="mr-1 h-3 w-3" />
+                    Longer
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleQuickAdjustment("formal")}
+                    disabled={isGenerating}
+                    className="justify-start"
+                  >
+                    <Zap className="mr-1 h-3 w-3" />
+                    Formal
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleQuickAdjustment("casual")}
+                    disabled={isGenerating}
+                    className="justify-start"
+                  >
+                    <Zap className="mr-1 h-3 w-3" />
+                    Casual
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleQuickAdjustment("humor")}
+                    disabled={isGenerating}
+                    className="justify-start"
+                  >
+                    <Zap className="mr-1 h-3 w-3" />
+                    Humor
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleQuickAdjustment("engaging")}
+                    disabled={isGenerating}
+                    className="justify-start"
+                  >
+                    <Zap className="mr-1 h-3 w-3" />
+                    Engaging
+                  </Button>
+                </div>
+              </div>
+            )}
 
-                  {showCustomDestination && (
-                    <div className="flex gap-2">
-                      <Input
-                        placeholder={platformInfo.destinationPlaceholder || "Enter destination..."}
-                        value={customDestination}
-                        onChange={(e) => setCustomDestination(e.target.value)}
-                        className="flex-1"
-                      />
-                      <Button type="button" onClick={handleCustomDestination} disabled={!customDestination.trim()} size="sm">
-                        Add
-                      </Button>
-                    </div>
-                  )}
+            {/* Generation History */}
+            {generationHistory.length > 0 && (
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label className="font-medium text-sm">Generation History</Label>
+                  <Button type="button" variant="ghost" size="sm" onClick={() => setShowGenerationHistory(!showGenerationHistory)}>
+                    <History className="mr-1 h-3 w-3" />
+                    {showGenerationHistory ? "Hide" : "Show"} History
+                  </Button>
                 </div>
+
+                {showGenerationHistory && (
+                  <div className="max-h-48 space-y-2 overflow-y-auto rounded-lg border bg-muted/30 p-2">
+                    {generationHistory.map((item) => (
+                      <div key={item.id} className="rounded border bg-background p-2">
+                        <div className="mb-1 flex items-start justify-between">
+                          <span className="text-muted-foreground text-xs">{item.timestamp.toLocaleTimeString()}</span>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => handleUseHistoryItem(item)}
+                            className="h-6 px-2 text-xs"
+                          >
+                            Use
+                          </Button>
+                        </div>
+                        <p className="line-clamp-2 text-sm">{item.content}</p>
+                        <p className="mt-1 text-muted-foreground text-xs">Prompt: {item.prompt}</p>
+                      </div>
+                    ))}
+                  </div>
+                )}
               </div>
             )}
           </div>
         )}
+      </div>
 
-        {/* Additional Fields */}
-        {renderAdditionalFields()}
+      {/* Main Content Textarea */}
+      <div className="space-y-2">
+        <Label htmlFor="content">Post Content</Label>
+        <Textarea
+          id="content"
+          placeholder="What's on your mind?"
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          disabled={isGenerating}
+          className="min-h-[120px]"
+        />
+      </div>
 
-        {/* Action Buttons */}
-        <div className="flex justify-end gap-2">
-          <Button variant="ghost" onClick={handleClear} disabled={isPending || isGenerating}>
-            <X />
-            Clear
-          </Button>
+      {/* Destination Selection - Only show if platform supports destinations */}
+      {platformInfo?.supportsDestinations && (
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <MapPin className="h-4 w-4" />
+            <Label className="font-medium text-sm">
+              Destination
+              {platformInfo.destinationRequired && <span className="ml-1 text-red-500">*</span>}
+            </Label>
+            {platformInfo.destinationHelpText && (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <HelpCircle className="h-4 w-4 cursor-help text-muted-foreground" />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p className="max-w-xs">{platformInfo.destinationHelpText}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
+          </div>
+
+          {/* Selected Destination Display */}
+          {selectedDestination && (
+            <div className="flex items-center gap-2 rounded-lg bg-muted p-2">
+              <MapPin className="h-4 w-4 text-muted-foreground" />
+              <div className="min-w-0 flex-1">
+                <div className="truncate font-medium text-sm">{selectedDestination.name}</div>
+                {selectedDestination.description && (
+                  <div className="truncate text-muted-foreground text-xs">{selectedDestination.description}</div>
+                )}
+              </div>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => setSelectedDestination(undefined)}
+                className="h-6 w-6 flex-shrink-0 p-0"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          )}
+
+          {/* Destination Selection */}
+          {!selectedDestination && (
+            <div className="space-y-2">
+              {/* Recent Destinations */}
+              {recentDestinations && recentDestinations.length > 0 && (
+                <div className="space-y-2">
+                  <Label className="text-sm">Recent Destinations</Label>
+                  <div className="flex flex-wrap gap-2">
+                    {recentDestinations.map((dest) => (
+                      <Button
+                        key={dest.id}
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleDestinationSelect(dest)}
+                        className="h-8 text-xs"
+                      >
+                        <MapPin className="mr-1 h-3 w-3" />
+                        <span className="truncate">{dest.name}</span>
+                      </Button>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Custom Destination Input */}
+              <div className="space-y-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setShowCustomDestination(!showCustomDestination)}
+                  className="w-full"
+                >
+                  {showCustomDestination ? "Cancel" : "Add Custom Destination"}
+                </Button>
+
+                {showCustomDestination && (
+                  <div className="flex flex-col gap-2 sm:flex-row">
+                    <Input
+                      placeholder={platformInfo.destinationPlaceholder || "Enter destination..."}
+                      value={customDestination}
+                      onChange={(e) => setCustomDestination(e.target.value)}
+                      className="flex-1"
+                    />
+                    <Button
+                      type="button"
+                      onClick={handleCustomDestination}
+                      disabled={!customDestination.trim()}
+                      size="sm"
+                      className="sm:w-auto"
+                    >
+                      Add
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Additional Fields */}
+      {renderAdditionalFields()}
+
+      {/* Action Buttons */}
+      <div className="flex flex-col gap-2 pt-2 sm:flex-row sm:justify-end">
+        <Button variant="ghost" onClick={handleClear} disabled={isPending || isGenerating} className="sm:order-2">
+          <X className="mr-2 h-4 w-4" />
+          Clear
+        </Button>
+        <div className="flex gap-2 sm:order-1">
           <Popover open={isPublishPopoverOpen} onOpenChange={setIsPublishPopoverOpen}>
             <PopoverTrigger asChild>
-              <Button disabled={!canSubmit || isGenerating}>
-                <Rocket />
+              <Button disabled={!canSubmit || isGenerating} className="flex-1 sm:flex-none">
+                <Rocket className="mr-2 h-4 w-4" />
                 Post Now
               </Button>
             </PopoverTrigger>
@@ -863,8 +892,8 @@ export function CreatePostForm({
           </Popover>
           <Popover open={isSchedulePopoverOpen} onOpenChange={setIsSchedulePopoverOpen}>
             <PopoverTrigger asChild>
-              <Button variant="outline" disabled={!canSubmit || isGenerating}>
-                <CalendarClock />
+              <Button variant="outline" disabled={!canSubmit || isGenerating} className="flex-1 sm:flex-none">
+                <CalendarClock className="mr-2 h-4 w-4" />
                 Schedule
               </Button>
             </PopoverTrigger>
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 6b8138e..857c502 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -1,23 +1,41 @@
 import { GitHubIcon, XIcon } from "@daveyplate/better-auth-ui"
+import { Heart } from "lucide-react"
 
 export function Footer() {
   return (
-    <footer className="border-t">
-      <div className="container mx-auto flex h-12 items-center justify-between">
-        <p className="text-muted-foreground text-sm">
-          Built by{" "}
-          <a href="https://x.com/emadev01" target="_blank" rel="noopener noreferrer" className="font-medium hover:underline">
-            EmaDev
-          </a>
-          .
-        </p>
-        <div className="flex items-center gap-4">
-          <a href="https://x.com/emadev01" target="_blank" rel="noopener noreferrer" aria-label="Emanuele's Twitter profile">
-            <XIcon className="h-5 w-5 text-muted-foreground hover:text-foreground" />
-          </a>
-          <a href="https://github.com/epavanello/better-plan" target="_blank" rel="noopener noreferrer" aria-label="GitHub repository">
-            <GitHubIcon className="h-5 w-5 text-muted-foreground hover:text-foreground" />
-          </a>
+    <footer className="border-t bg-muted/20">
+      <div className="container mx-auto px-4 py-8">
+        <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
+          <div className="flex flex-col items-center gap-2 text-center md:flex-row md:text-left">
+            <p className="text-muted-foreground text-sm">
+              &copy; {new Date().getFullYear()} Better Plan. Built with <Heart className="inline h-4 w-4 text-red-500" /> by{" "}
+              <a href="https://x.com/emadev01" target="_blank" rel="noopener noreferrer" className="font-medium hover:underline">
+                EmaDev
+              </a>
+            </p>
+            <span className="hidden text-muted-foreground md:inline">•</span>
+            <p className="text-muted-foreground text-sm">AI-powered social media management</p>
+          </div>
+          <div className="flex items-center gap-4">
+            <a
+              href="https://x.com/emadev01"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Emanuele's Twitter profile"
+              className="text-muted-foreground transition-colors hover:text-foreground"
+            >
+              <XIcon className="h-5 w-5" />
+            </a>
+            <a
+              href="https://github.com/epavanello/better-plan"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="GitHub repository"
+              className="text-muted-foreground transition-colors hover:text-foreground"
+            >
+              <GitHubIcon className="h-5 w-5" />
+            </a>
+          </div>
         </div>
       </div>
     </footer>
diff --git a/src/components/header.tsx b/src/components/header.tsx
index e948c73..c7652b3 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -10,7 +10,8 @@ export function Header() {
     <header className="sticky top-0 z-50 border-b bg-background/60 px-4 py-3 backdrop-blur">
       <div className="container mx-auto flex items-center justify-between">
         <Link to="/" className="flex items-center gap-2">
-          <span className="font-bold">BETTER-PLAN.</span>
+          <span className="hidden font-bold md:block">BETTER-PLAN.</span>
+          <span className="block font-bold md:hidden">BP.</span>
         </Link>
 
         <div className="flex items-center gap-4">
diff --git a/src/components/integrations/integrations-list.tsx b/src/components/integrations/integrations-list.tsx
new file mode 100644
index 0000000..59427e3
--- /dev/null
+++ b/src/components/integrations/integrations-list.tsx
@@ -0,0 +1,166 @@
+import { platformIcons } from "@/components/platform-icons"
+import { Button } from "@/components/ui/button"
+import type { Platform } from "@/database/schema/integrations"
+import { deleteIntegration, deleteUserAppCredentials, type getIntegrations, getUserPlatformStatus } from "@/functions/integrations"
+import type { getAllPlatformInfo } from "@/functions/platforms"
+import { useMutation, useQuery } from "@tanstack/react-query"
+import { PlusCircle, Settings, Trash2 } from "lucide-react"
+import { toast } from "sonner"
+
+interface IntegrationsListProps {
+  integrations: Awaited<ReturnType<typeof getIntegrations>>
+  platformsInfo: Awaited<ReturnType<typeof getAllPlatformInfo>>
+  platformSetups: Record<Platform, ReturnType<typeof usePlatformSetup>>
+  authorizingPlatform: Platform | null
+  onPlatformConnect: (platform: Platform) => void
+  onSetupPlatform: (platform: Platform) => void
+  onIntegrationRemoved: () => void
+}
+
+// Hook for platform setup (moved from main component)
+function usePlatformSetup(platform: Platform) {
+  const { data: platformStatus, refetch: refetchStatus } = useQuery({
+    queryKey: ["platform-status", platform],
+    queryFn: () => getUserPlatformStatus({ data: platform }),
+    enabled: true
+  })
+
+  const { mutate: removeCredentials, isPending: isRemoving } = useMutation({
+    mutationFn: deleteUserAppCredentials,
+    onSuccess: () => {
+      toast.success("User credentials removed successfully.")
+      refetchStatus()
+    }
+  })
+
+  return {
+    requiresSetup: platformStatus?.requiresSetup || false,
+    hasCredentials: platformStatus?.hasCredentials || false,
+    canConnect: platformStatus?.canConnect ?? true,
+    redirectUrl: platformStatus?.redirectUrl,
+    credentialSource: platformStatus?.source,
+    refetchStatus,
+    removeCredentials,
+    isRemovingCredentials: isRemoving
+  }
+}
+
+export function IntegrationsList({
+  integrations,
+  platformsInfo,
+  platformSetups,
+  authorizingPlatform,
+  onPlatformConnect,
+  onSetupPlatform,
+  onIntegrationRemoved
+}: IntegrationsListProps) {
+  const { mutate: remove, isPending: isRemovePending } = useMutation({
+    mutationFn: deleteIntegration,
+    onSuccess: () => {
+      toast.success("Integration removed successfully.")
+      onIntegrationRemoved()
+    }
+  })
+
+  const connectedPlatforms = integrations.map((i) => i.platform)
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h2 className="mb-4 font-semibold text-lg">Connected</h2>
+        {integrations.length > 0 ? (
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+            {integrations.map((integration) => {
+              const platformInfo = platformsInfo.find((p) => p.name === integration.platform)
+              return (
+                <div key={integration.id} className="flex items-center justify-between rounded-lg border p-4">
+                  <div className="flex items-center gap-4">
+                    {platformIcons[integration.platform]}
+                    <div>
+                      <p className="font-semibold">{platformInfo?.displayName || integration.platform}</p>
+                      <p className="text-muted-foreground text-sm">{integration.platformAccountName}</p>
+                    </div>
+                  </div>
+                  <Button variant="destructive" size="icon" onClick={() => remove({ data: integration.id })} disabled={isRemovePending}>
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              )
+            })}
+          </div>
+        ) : (
+          <p className="text-muted-foreground">No integrations connected yet.</p>
+        )}
+      </div>
+
+      <div>
+        <h2 className="mb-4 font-semibold text-lg">Available</h2>
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {platformsInfo.map((platformInfo) => {
+            const setupInfo = platformSetups[platformInfo.name]
+            const isCurrentlyAuthenticating = authorizingPlatform === platformInfo.name
+
+            return (
+              <div key={platformInfo.name} className="flex flex-col gap-4 rounded-lg border p-4">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-4">
+                    {platformIcons[platformInfo.name]}
+                    <p className="font-semibold">{platformInfo.displayName}</p>
+                  </div>
+
+                  {platformInfo.isImplemented ? (
+                    setupInfo && platformInfo.requiresSetup && !setupInfo.hasCredentials ? (
+                      <Button variant="outline" onClick={() => onSetupPlatform(platformInfo.name)}>
+                        <Settings className="mr-2 h-4 w-4" />
+                        Setup
+                      </Button>
+                    ) : (
+                      <Button onClick={() => onPlatformConnect(platformInfo.name)} disabled={isCurrentlyAuthenticating}>
+                        <PlusCircle className="mr-2 h-4 w-4" />
+                        {isCurrentlyAuthenticating ? "Redirecting..." : "Connect"}
+                      </Button>
+                    )
+                  ) : (
+                    <p className="text-muted-foreground">Coming soon!</p>
+                  )}
+                </div>
+
+                {/* Setup information */}
+                {platformInfo.requiresSetup && setupInfo && (
+                  <div className="text-sm">
+                    {setupInfo.hasCredentials ? (
+                      <div className="flex items-center justify-between rounded bg-green-50 px-3 py-2 dark:bg-green-950/20">
+                        <span className="text-green-700 dark:text-green-300">
+                          {setupInfo.credentialSource === "system" ? "System configured ✓" : "App configured ✓"}
+                        </span>
+                        {setupInfo.credentialSource === "user" && (
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() =>
+                              setupInfo.removeCredentials?.({
+                                data: platformInfo.name
+                              })
+                            }
+                            disabled={setupInfo.isRemovingCredentials}
+                            className="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
+                          >
+                            <Trash2 className="h-3 w-3" />
+                          </Button>
+                        )}
+                      </div>
+                    ) : (
+                      <div className="rounded bg-amber-50 px-3 py-2 text-amber-700 dark:bg-amber-950/20 dark:text-amber-300">
+                        Requires app configuration
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/functions/posts.ts b/src/functions/posts.ts
index f9f230a..3be3d9f 100644
--- a/src/functions/posts.ts
+++ b/src/functions/posts.ts
@@ -1,10 +1,11 @@
 import { db } from "@/database/db"
-import { type InsertPost, type InsertPostDestination, postDestinations, posts } from "@/database/schema"
+import { type InsertPost, posts } from "@/database/schema"
 import { PLATFORM_VALUES, type Platform, integrations } from "@/database/schema/integrations"
 import { getSessionOrThrow } from "@/lib/auth"
 import { getEffectiveCredentials } from "@/lib/server/integrations"
 import { postToSocialMedia } from "@/lib/server/post-service"
-import type { PostDestination } from "@/lib/server/social-platforms/base-platform"
+import { PostDestinationService } from "@/lib/server/posts/destination-service"
+import { DestinationSchema } from "@/lib/server/social-platforms/base-platform"
 import { PlatformFactory } from "@/lib/server/social-platforms/platform-factory"
 import { createServerFn } from "@tanstack/react-start"
 import { and, desc, eq, sql } from "drizzle-orm"
@@ -14,15 +15,7 @@ const createPostSchema = z.object({
   integrationId: z.string(),
   content: z.string(),
   scheduledAt: z.date().optional(),
-  destination: z
-    .object({
-      type: z.string(),
-      id: z.string(),
-      name: z.string(),
-      metadata: z.record(z.any()).optional(),
-      description: z.string().optional()
-    })
-    .optional(),
+  destination: DestinationSchema.optional(),
   additionalFields: z.record(z.string()).optional()
 })
 
@@ -30,6 +23,7 @@ export const createPost = createServerFn({ method: "POST" })
   .validator(createPostSchema)
   .handler(async ({ data }) => {
     const session = await getSessionOrThrow()
+    const destinationService = new PostDestinationService()
 
     const integration = await db.query.integrations.findFirst({
       where: (integrations, { eq, and }) => and(eq(integrations.id, data.integrationId), eq(integrations.userId, session.user.id))
@@ -69,7 +63,7 @@ export const createPost = createServerFn({ method: "POST" })
 
     // Save destination to recent destinations if provided
     if (data.destination) {
-      await saveRecentDestination(session.user.id, integration.platform, data.destination)
+      await destinationService.saveRecentDestination(session.user.id, integration.platform, data.destination)
     }
 
     // If it's a draft, try to post immediately
@@ -105,69 +99,15 @@ export const createPost = createServerFn({ method: "POST" })
     return post
   })
 
-async function saveRecentDestination(userId: string, platform: Platform, destination: PostDestination): Promise<void> {
-  const existingDestination = await db.query.postDestinations.findFirst({
-    where: (postDestinations, { eq, and }) =>
-      and(eq(postDestinations.userId, userId), eq(postDestinations.platform, platform), eq(postDestinations.destinationId, destination.id))
-  })
-
-  if (existingDestination) {
-    // Update existing destination
-    await db
-      .update(postDestinations)
-      .set({
-        useCount: sql`${postDestinations.useCount} + 1`,
-        lastUsedAt: new Date(),
-        destinationName: destination.name,
-        destinationMetadata: destination.metadata ? JSON.stringify(destination.metadata) : undefined,
-        updatedAt: new Date()
-      })
-      .where(eq(postDestinations.id, existingDestination.id))
-  } else {
-    // Create new destination
-    const newDestination: InsertPostDestination = {
-      userId,
-      platform,
-      destinationType: destination.type,
-      destinationId: destination.id,
-      destinationName: destination.name,
-      destinationMetadata: destination.metadata ? JSON.stringify(destination.metadata) : undefined,
-      lastUsedAt: new Date(),
-      useCount: 1
-    }
-    await db.insert(postDestinations).values(newDestination)
-  }
-}
-
 export const getRecentDestinations = createServerFn({ method: "POST" })
   .validator((payload: { platform: Platform; limit?: number }) =>
     z.object({ platform: z.enum(PLATFORM_VALUES), limit: z.number().optional() }).parse(payload)
   )
   .handler(async ({ data }) => {
     const session = await getSessionOrThrow()
+    const destinationService = new PostDestinationService()
 
-    const recentDestinations = await db.query.postDestinations.findMany({
-      where: (postDestinations, { eq, and }) =>
-        and(eq(postDestinations.userId, session.user.id), eq(postDestinations.platform, data.platform)),
-      orderBy: (postDestinations, { desc }) => desc(postDestinations.lastUsedAt),
-      limit: data.limit || 10
-    })
-
-    return recentDestinations.map((dest) => {
-      let metadata: Record<string, unknown> | undefined
-      try {
-        metadata = dest.destinationMetadata ? JSON.parse(dest.destinationMetadata) : undefined
-      } catch {
-        metadata = undefined
-      }
-
-      return {
-        type: dest.destinationType,
-        id: dest.destinationId,
-        name: dest.destinationName,
-        description: metadata?.description as string | undefined
-      }
-    })
+    return await destinationService.getRecentDestinations(session.user.id, data.platform, data.limit || 10)
   })
 
 export const createDestinationFromInput = createServerFn({ method: "POST" })
diff --git a/src/lib/server/ai-service.ts b/src/lib/server/ai-service.ts
index c1920b9..7d280b3 100644
--- a/src/lib/server/ai-service.ts
+++ b/src/lib/server/ai-service.ts
@@ -1,39 +1,16 @@
-import { db } from "@/database/db"
-import { type Post, type UserContext, aiUsage, posts, subscriptions, userContext } from "@/database/schema"
-import { getAiConfig, isAiEnabled, isSaasDeployment } from "@/lib/env"
+import { getAiConfig } from "@/lib/env"
 import { openai } from "@ai-sdk/openai"
 import { generateText } from "ai"
-import { and, desc, eq, gte, lte } from "drizzle-orm"
-import { z } from "zod"
-
-export type AiGenerationOptions = {
-  prompt: string
-  userId: string
-  integrationId: string
-  maxTokens?: number
-  temperature?: number
-  // New tuning parameters
-  styleOverride?: "casual" | "formal" | "humorous" | "professional" | "conversational"
-  toneOverride?: "friendly" | "professional" | "authoritative" | "inspirational" | "educational"
-  lengthOverride?: "short" | "medium" | "long"
-  useEmojisOverride?: boolean
-  useHashtagsOverride?: boolean
-  customInstructionsOverride?: string
-  // For iterations
-  previousContent?: string
-  iterationInstruction?: string
-}
-
-export type AiGenerationResult = {
-  success: boolean
-  content?: string
-  error?: string
-  tokensUsed?: number
-  model?: string
-}
+import { AiContextService } from "./ai/context-service"
+import { AiPromptBuilder } from "./ai/prompt-builder"
+import type { AiAccessCheck, AiGenerationOptions, AiGenerationResult } from "./ai/types"
+import { AiUsageService } from "./ai/usage-service"
 
 export class AiService {
   private config = getAiConfig()
+  private contextService = new AiContextService()
+  private usageService = new AiUsageService()
+  private promptBuilder = new AiPromptBuilder()
 
   async generateContent(options: AiGenerationOptions): Promise<AiGenerationResult> {
     try {
@@ -44,20 +21,20 @@ export class AiService {
 
       // Check usage limits if SaaS deployment
       if (this.config.isSaas) {
-        const canUse = await this.checkUsageLimits(options.userId)
+        const canUse = await this.usageService.checkUsageLimits(options.userId)
         if (!canUse.allowed) {
           return { success: false, error: canUse.reason }
         }
       }
 
       // Get user context for personalization
-      const context = await this.getUserContext(options.userId)
+      const context = await this.contextService.getUserContext(options.userId)
 
       // Get recent posts for style consistency
-      const recentPosts = await this.getRecentPosts(options.userId, options.integrationId)
+      const recentPosts = await this.contextService.getRecentPosts(options.userId, options.integrationId)
 
       // Build the system prompt
-      const systemPrompt = this.buildSystemPrompt(context, recentPosts, options)
+      const systemPrompt = this.promptBuilder.buildSystemPrompt(context, recentPosts, options)
 
       // Generate content using OpenAI
       const result = await generateText({
@@ -70,7 +47,7 @@ export class AiService {
 
       // Track usage if SaaS
       if (this.config.isSaas) {
-        await this.trackUsage(options.userId, result.usage?.totalTokens || 0)
+        await this.usageService.trackUsage(options.userId, result.usage?.totalTokens || 0)
       }
 
       return {
@@ -88,261 +65,30 @@ export class AiService {
     }
   }
 
-  private async checkUsageLimits(userId: string): Promise<{ allowed: boolean; reason?: string }> {
+  async canUserAccessAi(userId: string): Promise<AiAccessCheck> {
     try {
-      // Get user's subscription
-      const subscription = await db
-        .select()
-        .from(subscriptions)
-        .where(eq(subscriptions.userId, userId))
-        .orderBy(desc(subscriptions.createdAt))
-        .limit(1)
-        .then((rows) => rows[0])
-
-      if (!subscription) {
-        return { allowed: false, reason: "Subscribe to Pro plan to access AI features" }
-      }
-
-      if (subscription.status !== "active") {
-        return {
-          allowed: false,
-          reason: "Your subscription has expired. Renew to continue using AI"
-        }
-      }
-
-      // Check if current period is still valid
-      const now = new Date()
-      if (subscription.currentPeriodEnd && subscription.currentPeriodEnd < now) {
-        return { allowed: false, reason: "Your subscription period has expired. Please renew" }
+      // Check if AI is enabled
+      if (!this.config.isEnabled) {
+        return { canAccess: false, reason: "AI service is not enabled" }
       }
 
-      // Get current usage for this period
-      const currentUsage = await db
-        .select()
-        .from(aiUsage)
-        .where(
-          and(
-            eq(aiUsage.userId, userId),
-            eq(aiUsage.subscriptionId, subscription.id),
-            gte(aiUsage.periodStart, subscription.currentPeriodStart || new Date()),
-            lte(aiUsage.periodEnd, subscription.currentPeriodEnd || new Date())
-          )
-        )
-        .limit(1)
-        .then((rows) => rows[0])
-
-      if (currentUsage) {
-        // Check generation limit
-        if (currentUsage.generationsUsed >= (subscription.aiGenerationsLimit ?? 0)) {
-          return {
-            allowed: false,
-            reason: "Monthly AI generation limit reached. Upgrade your plan"
-          }
-        }
-
-        // Check context window limit
-        if (currentUsage.contextWindowUsed >= (subscription.aiContextWindowLimit ?? 0)) {
-          return { allowed: false, reason: "Monthly AI usage limit reached. Upgrade your plan" }
-        }
+      // For self-hosted, always allow access
+      if (!this.config.isSaas) {
+        return { canAccess: true }
       }
 
-      return { allowed: true }
-    } catch (error) {
-      console.error("Error checking usage limits:", error)
-      return { allowed: false, reason: "Unable to verify subscription status" }
-    }
-  }
-
-  private async getUserContext(userId: string) {
-    try {
-      const context = await db
-        .select()
-        .from(userContext)
-        .where(eq(userContext.userId, userId))
-        .limit(1)
-        .then((rows) => rows[0])
-
-      return context
-    } catch (error) {
-      console.error("Error getting user context:", error)
-      return null
-    }
-  }
-
-  private async getRecentPosts(userId: string, integrationId: string, limit = 10) {
-    try {
-      const recentPosts = await db
-        .select()
-        .from(posts)
-        .where(and(eq(posts.userId, userId), eq(posts.integrationId, integrationId), eq(posts.status, "posted")))
-        .orderBy(desc(posts.postedAt))
-        .limit(limit)
-
-      return recentPosts
-    } catch (error) {
-      console.error("Error getting recent posts:", error)
-      return []
-    }
-  }
-
-  private buildSystemPrompt(context: UserContext | null, recentPosts: Post[], overrides: Partial<AiGenerationOptions> = {}): string {
-    let systemPrompt = "You are a social media content creator assistant. Your task is to generate engaging, authentic social media posts."
-
-    // Add user context if available, with overrides taking priority
-    if (context || Object.keys(overrides).length > 0) {
-      systemPrompt += "\n\nUser Profile:"
-      if (context?.bio) systemPrompt += `\n- Bio: ${context.bio}`
-      if (context?.profession) systemPrompt += `\n- Profession: ${context.profession}`
-      if (context?.industry) systemPrompt += `\n- Industry: ${context.industry ?? ""}`
-      if (context?.targetAudience) systemPrompt += `\n- Target Audience: ${context.targetAudience}`
-
-      // Use overrides or fall back to context
-      const writingStyle = overrides.styleOverride || context?.writingStyle
-      const toneOfVoice = overrides.toneOverride || context?.toneOfVoice
-      const customInstructions = overrides.customInstructionsOverride || context?.customInstructions
-      const postLength = overrides.lengthOverride || context?.defaultPostLength
-
-      if (writingStyle) systemPrompt += `\n- Writing Style: ${writingStyle}`
-      if (toneOfVoice) systemPrompt += `\n- Tone of Voice: ${toneOfVoice}`
-      if (postLength) {
-        const lengthMap = {
-          short: "1-2 sentences",
-          medium: "3-5 sentences",
-          long: "6+ sentences"
-        }
-        systemPrompt += `\n- Preferred Length: ${lengthMap[postLength as keyof typeof lengthMap] || postLength}`
-      }
-      if (customInstructions) systemPrompt += `\n- Custom Instructions: ${customInstructions}`
-    }
-
-    // Add recent posts for style consistency
-    if (recentPosts.length > 0) {
-      systemPrompt += "\n\nRecent Posts (for style reference):"
-      recentPosts.forEach((post, index) => {
-        systemPrompt += `\n${index + 1}. ${post.content}`
-      })
-      systemPrompt += "\n\nPlease maintain consistency with the writing style and tone shown in these recent posts."
-    }
-
-    // Handle iteration requests
-    if (overrides.previousContent && overrides.iterationInstruction) {
-      systemPrompt += "\n\nIteration Request:"
-      systemPrompt += `\nPrevious content: "${overrides.previousContent}"`
-      systemPrompt += `\nImprovement instruction: ${overrides.iterationInstruction}`
-      systemPrompt += "\nPlease generate an improved version based on the instruction while maintaining the core message and style."
-    }
-
-    // Add generation guidelines
-    systemPrompt += "\n\nGeneration Guidelines:"
-    systemPrompt += "\n- Keep the content authentic and engaging"
-    systemPrompt += "\n- Match the user's established voice and style"
-    systemPrompt += "\n- Make it appropriate for the target audience"
-    systemPrompt += "\n- Focus on value and engagement"
-
-    // Use override values or fall back to context
-    const finalUseEmojis = overrides.useEmojisOverride !== undefined ? overrides.useEmojisOverride : context?.useEmojis
-    const finalUseHashtags = overrides.useHashtagsOverride !== undefined ? overrides.useHashtagsOverride : context?.useHashtags
-
-    if (finalUseEmojis) {
-      systemPrompt += "\n- Use emojis appropriately"
-    } else {
-      systemPrompt += "\n- Do not use emojis"
-    }
-
-    if (finalUseHashtags) {
-      systemPrompt += "\n- Include relevant hashtags when appropriate"
-    } else {
-      systemPrompt += "\n- Do not include hashtags"
-    }
-
-    return systemPrompt
-  }
-
-  private async trackUsage(userId: string, tokensUsed: number) {
-    try {
-      // Get user's subscription
-      const subscription = await db
-        .select()
-        .from(subscriptions)
-        .where(eq(subscriptions.userId, userId))
-        .orderBy(desc(subscriptions.createdAt))
-        .limit(1)
-        .then((rows) => rows[0])
-
-      if (!subscription) return
-
-      // Get or create usage record for current period
-      const now = new Date()
-      const periodStart = subscription.currentPeriodStart || now
-      const periodEnd = subscription.currentPeriodEnd || new Date(now.getFullYear(), now.getMonth() + 1, 0)
-
-      const existingUsage = await db
-        .select()
-        .from(aiUsage)
-        .where(
-          and(
-            eq(aiUsage.userId, userId),
-            eq(aiUsage.subscriptionId, subscription.id),
-            gte(aiUsage.periodStart, periodStart),
-            lte(aiUsage.periodEnd, periodEnd)
-          )
-        )
-        .limit(1)
-        .then((rows) => rows[0])
-
-      if (existingUsage) {
-        // Update existing usage
-        await db
-          .update(aiUsage)
-          .set({
-            generationsUsed: existingUsage.generationsUsed + 1,
-            contextWindowUsed: existingUsage.contextWindowUsed + tokensUsed,
-            updatedAt: now
-          })
-          .where(eq(aiUsage.id, existingUsage.id))
-      } else {
-        // Create new usage record
-        await db.insert(aiUsage).values({
-          userId,
-          subscriptionId: subscription.id,
-          generationsUsed: 1,
-          contextWindowUsed: tokensUsed,
-          periodStart,
-          periodEnd
-        })
+      // For SaaS, check usage limits
+      const canUse = await this.usageService.checkUsageLimits(userId)
+      return {
+        canAccess: canUse.allowed,
+        reason: canUse.reason
       }
     } catch (error) {
-      console.error("Error tracking usage:", error)
-    }
-  }
-
-  async canUserAccessAi(userId: string): Promise<{ canAccess: boolean; reason?: string }> {
-    // Check if AI is enabled globally
-    if (!isAiEnabled()) {
-      if (isSaasDeployment()) {
-        return { canAccess: false, reason: "AI features require a Pro subscription" }
-      }
-
-      return { canAccess: false, reason: "OpenAI API key not configured" }
+      console.error("Error checking AI access:", error)
+      return { canAccess: false, reason: "Unable to verify AI access" }
     }
-
-    // For self-hosted, if AI is enabled, user has access
-    if (!isSaasDeployment()) {
-      return { canAccess: true }
-    }
-
-    // For SaaS deployment, check subscription and limits
-    const limits = await this.checkUsageLimits(userId)
-    return { canAccess: limits.allowed, reason: limits.reason }
   }
 }
 
+// Export singleton instance
 export const aiService = new AiService()
-
-// Schema for API validation
-export const generateContentSchema = z.object({
-  prompt: z.string().min(1, "Prompt is required"),
-  integrationId: z.string().min(1, "Integration ID is required"),
-  maxTokens: z.number().optional(),
-  temperature: z.number().min(0).max(1).optional()
-})
diff --git a/src/lib/server/ai/context-service.ts b/src/lib/server/ai/context-service.ts
new file mode 100644
index 0000000..e1c4619
--- /dev/null
+++ b/src/lib/server/ai/context-service.ts
@@ -0,0 +1,37 @@
+import { db } from "@/database/db"
+import { type Post, type UserContext, posts, userContext } from "@/database/schema"
+import { and, desc, eq } from "drizzle-orm"
+
+export class AiContextService {
+  async getUserContext(userId: string): Promise<UserContext | null> {
+    try {
+      const context = await db
+        .select()
+        .from(userContext)
+        .where(eq(userContext.userId, userId))
+        .limit(1)
+        .then((rows) => rows[0])
+
+      return context
+    } catch (error) {
+      console.error("Error getting user context:", error)
+      return null
+    }
+  }
+
+  async getRecentPosts(userId: string, integrationId: string, limit = 10): Promise<Post[]> {
+    try {
+      const recentPosts = await db
+        .select()
+        .from(posts)
+        .where(and(eq(posts.userId, userId), eq(posts.integrationId, integrationId), eq(posts.status, "posted")))
+        .orderBy(desc(posts.postedAt))
+        .limit(limit)
+
+      return recentPosts
+    } catch (error) {
+      console.error("Error getting recent posts:", error)
+      return []
+    }
+  }
+}
diff --git a/src/lib/server/ai/prompt-builder.ts b/src/lib/server/ai/prompt-builder.ts
new file mode 100644
index 0000000..fcc5f73
--- /dev/null
+++ b/src/lib/server/ai/prompt-builder.ts
@@ -0,0 +1,77 @@
+import type { Post, UserContext } from "@/database/schema"
+import type { AiGenerationOptions } from "./types"
+
+export class AiPromptBuilder {
+  buildSystemPrompt(context: UserContext | null, recentPosts: Post[], overrides: Partial<AiGenerationOptions> = {}): string {
+    let systemPrompt = "You are a social media content creator assistant. Your task is to generate engaging, authentic social media posts."
+
+    // Add user context if available, with overrides taking priority
+    if (context || Object.keys(overrides).length > 0) {
+      systemPrompt += "\n\nUser Profile:"
+      if (context?.bio) systemPrompt += `\n- Bio: ${context.bio}`
+      if (context?.profession) systemPrompt += `\n- Profession: ${context.profession}`
+      if (context?.industry) systemPrompt += `\n- Industry: ${context.industry ?? ""}`
+      if (context?.targetAudience) systemPrompt += `\n- Target Audience: ${context.targetAudience}`
+
+      // Use overrides or fall back to context
+      const writingStyle = overrides.styleOverride || context?.writingStyle
+      const toneOfVoice = overrides.toneOverride || context?.toneOfVoice
+      const customInstructions = overrides.customInstructionsOverride || context?.customInstructions
+      const postLength = overrides.lengthOverride || context?.defaultPostLength
+
+      if (writingStyle) systemPrompt += `\n- Writing Style: ${writingStyle}`
+      if (toneOfVoice) systemPrompt += `\n- Tone of Voice: ${toneOfVoice}`
+      if (postLength) {
+        const lengthMap = {
+          short: "1-2 sentences",
+          medium: "3-5 sentences",
+          long: "6+ sentences"
+        }
+        systemPrompt += `\n- Preferred Length: ${lengthMap[postLength as keyof typeof lengthMap] || postLength}`
+      }
+      if (customInstructions) systemPrompt += `\n- Custom Instructions: ${customInstructions}`
+    }
+
+    // Add recent posts for style consistency
+    if (recentPosts.length > 0) {
+      systemPrompt += "\n\nRecent Posts (for style reference):"
+      recentPosts.forEach((post, index) => {
+        systemPrompt += `\n${index + 1}. ${post.content}`
+      })
+      systemPrompt += "\n\nPlease maintain consistency with the writing style and tone shown in these recent posts."
+    }
+
+    // Handle iteration requests
+    if (overrides.previousContent && overrides.iterationInstruction) {
+      systemPrompt += "\n\nIteration Request:"
+      systemPrompt += `\nPrevious content: "${overrides.previousContent}"`
+      systemPrompt += `\nImprovement instruction: ${overrides.iterationInstruction}`
+      systemPrompt += "\nPlease generate an improved version based on the instruction while maintaining the core message and style."
+    }
+
+    // Add generation guidelines
+    systemPrompt += "\n\nGeneration Guidelines:"
+    systemPrompt += "\n- Keep the content authentic and engaging"
+    systemPrompt += "\n- Match the user's established voice and style"
+    systemPrompt += "\n- Make it appropriate for the target audience"
+    systemPrompt += "\n- Focus on value and engagement"
+
+    // Use override values or fall back to context
+    const finalUseEmojis = overrides.useEmojisOverride !== undefined ? overrides.useEmojisOverride : context?.useEmojis
+    const finalUseHashtags = overrides.useHashtagsOverride !== undefined ? overrides.useHashtagsOverride : context?.useHashtags
+
+    if (finalUseEmojis) {
+      systemPrompt += "\n- Use emojis appropriately"
+    } else {
+      systemPrompt += "\n- Do not use emojis"
+    }
+
+    if (finalUseHashtags) {
+      systemPrompt += "\n- Include relevant hashtags when appropriate"
+    } else {
+      systemPrompt += "\n- Do not include hashtags"
+    }
+
+    return systemPrompt
+  }
+}
diff --git a/src/lib/server/ai/types.ts b/src/lib/server/ai/types.ts
new file mode 100644
index 0000000..0662a8b
--- /dev/null
+++ b/src/lib/server/ai/types.ts
@@ -0,0 +1,35 @@
+export type AiGenerationOptions = {
+  prompt: string
+  userId: string
+  integrationId: string
+  maxTokens?: number
+  temperature?: number
+  // New tuning parameters
+  styleOverride?: "casual" | "formal" | "humorous" | "professional" | "conversational"
+  toneOverride?: "friendly" | "professional" | "authoritative" | "inspirational" | "educational"
+  lengthOverride?: "short" | "medium" | "long"
+  useEmojisOverride?: boolean
+  useHashtagsOverride?: boolean
+  customInstructionsOverride?: string
+  // For iterations
+  previousContent?: string
+  iterationInstruction?: string
+}
+
+export type AiGenerationResult = {
+  success: boolean
+  content?: string
+  error?: string
+  tokensUsed?: number
+  model?: string
+}
+
+export type UsageLimitCheck = {
+  allowed: boolean
+  reason?: string
+}
+
+export type AiAccessCheck = {
+  canAccess: boolean
+  reason?: string
+}
diff --git a/src/lib/server/ai/usage-service.ts b/src/lib/server/ai/usage-service.ts
new file mode 100644
index 0000000..2b64f5e
--- /dev/null
+++ b/src/lib/server/ai/usage-service.ts
@@ -0,0 +1,128 @@
+import { db } from "@/database/db"
+import { aiUsage, subscriptions } from "@/database/schema"
+import { and, desc, eq, gte, lte } from "drizzle-orm"
+import type { UsageLimitCheck } from "./types"
+
+export class AiUsageService {
+  async checkUsageLimits(userId: string): Promise<UsageLimitCheck> {
+    try {
+      // Get user's subscription
+      const subscription = await db
+        .select()
+        .from(subscriptions)
+        .where(eq(subscriptions.userId, userId))
+        .orderBy(desc(subscriptions.createdAt))
+        .limit(1)
+        .then((rows) => rows[0])
+
+      if (!subscription) {
+        return { allowed: false, reason: "Subscribe to Pro plan to access AI features" }
+      }
+
+      if (subscription.status !== "active") {
+        return {
+          allowed: false,
+          reason: "Your subscription has expired. Renew to continue using AI"
+        }
+      }
+
+      // Check if current period is still valid
+      const now = new Date()
+      if (subscription.currentPeriodEnd && subscription.currentPeriodEnd < now) {
+        return { allowed: false, reason: "Your subscription period has expired. Please renew" }
+      }
+
+      // Get current usage for this period
+      const currentUsage = await db
+        .select()
+        .from(aiUsage)
+        .where(
+          and(
+            eq(aiUsage.userId, userId),
+            eq(aiUsage.subscriptionId, subscription.id),
+            gte(aiUsage.periodStart, subscription.currentPeriodStart || new Date()),
+            lte(aiUsage.periodEnd, subscription.currentPeriodEnd || new Date())
+          )
+        )
+        .limit(1)
+        .then((rows) => rows[0])
+
+      if (currentUsage) {
+        // Check generation limit
+        if (currentUsage.generationsUsed >= (subscription.aiGenerationsLimit ?? 0)) {
+          return {
+            allowed: false,
+            reason: "Monthly AI generation limit reached. Upgrade your plan"
+          }
+        }
+
+        // Check context window limit
+        if (currentUsage.contextWindowUsed >= (subscription.aiContextWindowLimit ?? 0)) {
+          return { allowed: false, reason: "Monthly AI usage limit reached. Upgrade your plan" }
+        }
+      }
+
+      return { allowed: true }
+    } catch (error) {
+      console.error("Error checking usage limits:", error)
+      return { allowed: false, reason: "Unable to verify subscription status" }
+    }
+  }
+
+  async trackUsage(userId: string, tokensUsed: number): Promise<void> {
+    try {
+      // Get current subscription
+      const subscription = await db
+        .select()
+        .from(subscriptions)
+        .where(eq(subscriptions.userId, userId))
+        .orderBy(desc(subscriptions.createdAt))
+        .limit(1)
+        .then((rows) => rows[0])
+
+      if (!subscription) {
+        console.warn("No subscription found for user:", userId)
+        return
+      }
+
+      // Get or create usage record for current period
+      const currentUsage = await db
+        .select()
+        .from(aiUsage)
+        .where(
+          and(
+            eq(aiUsage.userId, userId),
+            eq(aiUsage.subscriptionId, subscription.id),
+            gte(aiUsage.periodStart, subscription.currentPeriodStart || new Date()),
+            lte(aiUsage.periodEnd, subscription.currentPeriodEnd || new Date())
+          )
+        )
+        .limit(1)
+        .then((rows) => rows[0])
+
+      if (currentUsage) {
+        // Update existing usage record
+        await db
+          .update(aiUsage)
+          .set({
+            generationsUsed: currentUsage.generationsUsed + 1,
+            contextWindowUsed: currentUsage.contextWindowUsed + tokensUsed,
+            updatedAt: new Date()
+          })
+          .where(eq(aiUsage.id, currentUsage.id))
+      } else {
+        // Create new usage record
+        await db.insert(aiUsage).values({
+          userId,
+          subscriptionId: subscription.id,
+          periodStart: subscription.currentPeriodStart || new Date(),
+          periodEnd: subscription.currentPeriodEnd || new Date(),
+          generationsUsed: 1,
+          contextWindowUsed: tokensUsed
+        })
+      }
+    } catch (error) {
+      console.error("Error tracking AI usage:", error)
+    }
+  }
+}
diff --git a/src/lib/server/posts/destination-service.ts b/src/lib/server/posts/destination-service.ts
new file mode 100644
index 0000000..e2dea0b
--- /dev/null
+++ b/src/lib/server/posts/destination-service.ts
@@ -0,0 +1,68 @@
+import { db } from "@/database/db"
+import { postDestinations } from "@/database/schema"
+import type { Platform } from "@/database/schema/integrations"
+import { eq, sql } from "drizzle-orm"
+import type { PostDestination } from "../social-platforms/base-platform"
+
+export class PostDestinationService {
+  async saveRecentDestination(userId: string, platform: Platform, destination: PostDestination): Promise<void> {
+    const existingDestination = await db.query.postDestinations.findFirst({
+      where: (postDestinations, { eq, and }) =>
+        and(
+          eq(postDestinations.userId, userId),
+          eq(postDestinations.platform, platform),
+          eq(postDestinations.destinationId, destination.id)
+        )
+    })
+
+    if (existingDestination) {
+      // Update existing destination
+      await db
+        .update(postDestinations)
+        .set({
+          useCount: sql`${postDestinations.useCount} + 1`,
+          lastUsedAt: new Date(),
+          destinationName: destination.name,
+          destinationMetadata: destination.metadata ? JSON.stringify(destination.metadata) : undefined,
+          updatedAt: new Date()
+        })
+        .where(eq(postDestinations.id, existingDestination.id))
+    } else {
+      // Create new destination
+      await db.insert(postDestinations).values({
+        userId,
+        platform,
+        destinationType: destination.type,
+        destinationId: destination.id,
+        destinationName: destination.name,
+        destinationMetadata: destination.metadata ? JSON.stringify(destination.metadata) : undefined,
+        lastUsedAt: new Date(),
+        useCount: 1
+      })
+    }
+  }
+
+  async getRecentDestinations(userId: string, platform: Platform, limit = 10) {
+    const recentDestinations = await db.query.postDestinations.findMany({
+      where: (postDestinations, { eq, and }) => and(eq(postDestinations.userId, userId), eq(postDestinations.platform, platform)),
+      orderBy: (postDestinations, { desc }) => desc(postDestinations.lastUsedAt),
+      limit
+    })
+
+    return recentDestinations.map((dest) => {
+      let metadata: Record<string, unknown> | undefined
+      try {
+        metadata = dest.destinationMetadata ? JSON.parse(dest.destinationMetadata) : undefined
+      } catch {
+        metadata = undefined
+      }
+
+      return {
+        type: dest.destinationType,
+        id: dest.destinationId,
+        name: dest.destinationName,
+        description: metadata?.description as string | undefined
+      }
+    })
+  }
+}
diff --git a/src/lib/server/social-platforms/base-platform.ts b/src/lib/server/social-platforms/base-platform.ts
index 223f55f..dbb81fa 100644
--- a/src/lib/server/social-platforms/base-platform.ts
+++ b/src/lib/server/social-platforms/base-platform.ts
@@ -1,5 +1,6 @@
 import type { InsertPost } from "@/database/schema"
 import type { Platform } from "@/database/schema"
+import { z } from "zod"
 
 export interface PostResult {
   success: boolean
@@ -7,14 +8,15 @@ export interface PostResult {
   error?: string
 }
 
-export interface PostDestination {
-  type: string // "public", "community", "subreddit", etc.
-  id: string // URL, subreddit name, etc.
-  name: string // Display name
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-  metadata?: Record<string, any> // Additional platform-specific data
-  description?: string // Optional description or help text
-}
+export const DestinationSchema = z.object({
+  type: z.string(), // "public", "community", "subreddit", etc.
+  id: z.string(), // URL, subreddit name, etc.
+  name: z.string(), // Display name
+  metadata: z.record(z.any()).optional(), // Additional platform-specific data
+  description: z.string().optional() // Optional description or help text
+})
+
+export type PostDestination = z.infer<typeof DestinationSchema>
 
 export interface PostDestinationSearchResult {
   destinations: PostDestination[]
diff --git a/src/lib/server/social-platforms/reddit-platform.ts b/src/lib/server/social-platforms/reddit-platform.ts
index 828f690..20eb453 100644
--- a/src/lib/server/social-platforms/reddit-platform.ts
+++ b/src/lib/server/social-platforms/reddit-platform.ts
@@ -12,68 +12,11 @@ import {
   type PostResult,
   type RequiredField
 } from "./base-platform"
-
-interface RedditTokenResponse {
-  access_token: string
-  refresh_token?: string
-  token_type: string
-  expires_in: number
-  scope: string
-}
-
-interface RedditUser {
-  id: string
-  name: string
-  icon_img?: string
-  total_karma: number
-  link_karma: number
-  comment_karma: number
-}
-
-interface RedditSubreddit {
-  display_name: string
-  display_name_prefixed: string
-  title: string
-  public_description?: string
-  description?: string
-  subscribers: number
-  over18: boolean
-  subreddit_type: "public" | "private" | "restricted"
-  icon_img?: string
-}
-
-interface RedditSubmission {
-  id: string
-  title: string
-  selftext?: string
-  url?: string
-  permalink: string
-  created_utc: number
-  is_self: boolean
-  subreddit_name_prefixed: string
-  score: number
-  num_comments: number
-}
-
-interface RedditSubmissionResponse {
-  json: {
-    errors: string[][]
-    data?: {
-      things: Array<{
-        data: {
-          id: string
-          url: string
-          name: string
-        }
-      }>
-    }
-  }
-}
+import { RedditApiClient } from "./reddit/reddit-api-client"
+import { buildRedditAuthUrl, normalizeSubredditName } from "./reddit/reddit-utils"
 
 export class RedditPlatform extends BaseSocialPlatform {
-  private readonly baseUrl = "https://oauth.reddit.com"
-  private readonly authUrl = "https://www.reddit.com/api/v1/authorize"
-  private readonly tokenUrl = "https://www.reddit.com/api/v1/access_token"
+  private readonly apiClient = new RedditApiClient()
 
   constructor() {
     super("reddit")
@@ -116,13 +59,14 @@ export class RedditPlatform extends BaseSocialPlatform {
       },
       {
         key: "postType",
-        label: "Post Type",
+        label: "Post type",
         type: "select",
         required: true,
         helpText: "Choose whether to create a text post or link post",
+        placeholder: "Select post type",
         options: [
-          { value: "text", label: "Text Post" },
-          { value: "link", label: "Link Post" }
+          { value: "text", label: "Text post" },
+          { value: "link", label: "Link post" }
         ]
       }
     ]
@@ -155,26 +99,6 @@ export class RedditPlatform extends BaseSocialPlatform {
     return true
   }
 
-  private async makeRedditRequest(endpoint: string, accessToken: string, options: RequestInit = {}): Promise<Response> {
-    const url = `${this.baseUrl}${endpoint}`
-
-    const response = await fetch(url, {
-      ...options,
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-        "User-Agent": "BetterPlan/1.0",
-        ...options.headers
-      }
-    })
-
-    if (!response.ok) {
-      const error = await response.text()
-      throw new Error(`Reddit API error: ${response.status} - ${error}`)
-    }
-
-    return response
-  }
-
   async startAuthorization(userId: string): Promise<{ url: string }> {
     const session = await getSessionOrThrow()
     const credentials = await getEffectiveCredentials("reddit", session.user.id)
@@ -187,13 +111,7 @@ export class RedditPlatform extends BaseSocialPlatform {
     const redirectUri = `${envConfig.APP_URL}/api/integrations/reddit/callback`
     const scope = ["submit", "read", "identity", "mysubreddits"]
 
-    const authUrl = new URL(this.authUrl)
-    authUrl.searchParams.set("client_id", credentials.clientId)
-    authUrl.searchParams.set("response_type", "code")
-    authUrl.searchParams.set("state", state)
-    authUrl.searchParams.set("redirect_uri", redirectUri)
-    authUrl.searchParams.set("duration", "permanent")
-    authUrl.searchParams.set("scope", scope.join(" "))
+    const authUrl = buildRedditAuthUrl(credentials.clientId, state, redirectUri, scope)
 
     // Store state in cookie for CSRF protection
     setCookie("reddit_oauth_state", state, {
@@ -208,9 +126,8 @@ export class RedditPlatform extends BaseSocialPlatform {
 
   async validateCredentials(accessToken: string, effectiveCredentials: { clientId: string; clientSecret: string }): Promise<boolean> {
     try {
-      const response = await this.makeRedditRequest("/api/v1/me", accessToken)
-      const user: RedditUser = await response.json()
-      return !!user.name
+      await this.apiClient.getUserInfo(accessToken)
+      return true
     } catch (error) {
       console.error("Reddit credentials validation failed:", error)
       return false
@@ -235,47 +152,22 @@ export class RedditPlatform extends BaseSocialPlatform {
         throw new Error("Post title is required for Reddit posts")
       }
 
-      const subredditName = postData.destination.id.replace(/^r\//, "")
-
-      // Prepare form data
-      const formData = new FormData()
-      formData.append("sr", subredditName)
-      formData.append("title", title)
-      formData.append("kind", postType === "link" ? "link" : "self")
-      formData.append("api_type", "json")
+      const subredditName = normalizeSubredditName(postData.destination.id)
 
+      let url: string | undefined
       if (postType === "link") {
         // For link posts, extract URL from content or use entire content as URL
         const urlMatch = postData.content.match(/(https?:\/\/[^\s]+)/i)
-        const url = urlMatch ? urlMatch[1] : postData.content.trim()
+        url = urlMatch ? urlMatch[1] : postData.content.trim()
 
         if (!url.startsWith("http://") && !url.startsWith("https://")) {
           throw new Error("Invalid URL for link post")
         }
-
-        formData.append("url", url)
-      } else {
-        // For text posts, use the content as text body
-        formData.append("text", postData.content)
       }
 
-      const response = await this.makeRedditRequest("/api/submit", accessToken, {
-        method: "POST",
-        body: formData
-      })
-
-      const result: RedditSubmissionResponse = await response.json()
+      const result = await this.apiClient.submitPost(subredditName, title, postData.content, accessToken, postType === "link", url)
 
-      if (result.json.errors.length > 0) {
-        throw new Error(`Reddit API error: ${result.json.errors[0][1]}`)
-      }
-
-      if (!result.json.data?.things?.[0]?.data?.id) {
-        throw new Error("Failed to create Reddit post: No post ID returned")
-      }
-
-      const postId = result.json.data.things[0].data.id
-      const postUrl = `https://www.reddit.com/r/${subredditName}/comments/${postId}/`
+      const postUrl = `https://www.reddit.com/r/${subredditName}/comments/${result.id}/`
 
       return {
         success: true,
@@ -297,31 +189,22 @@ export class RedditPlatform extends BaseSocialPlatform {
     cursor?: string
   ): Promise<PostDestinationSearchResult> {
     try {
-      const response = await this.makeRedditRequest(`/subreddits/search?q=${encodeURIComponent(query)}&limit=25&type=sr`, accessToken)
-
-      const data = await response.json()
-      const destinations: PostDestination[] = []
-
-      if (data.data?.children) {
-        for (const child of data.data.children) {
-          const subreddit: RedditSubreddit = child.data
-          destinations.push({
-            type: "subreddit",
-            id: subreddit.display_name,
-            name: subreddit.display_name_prefixed,
-            description: `${subreddit.public_description || subreddit.title} • ${subreddit.subscribers?.toLocaleString() || "Unknown"} members`,
-            metadata: {
-              subscribers: subreddit.subscribers || 0,
-              over18: subreddit.over18 || false,
-              subredditType: subreddit.subreddit_type || "public"
-            }
-          })
+      const result = await this.apiClient.searchSubreddits(query, accessToken, cursor)
+      const destinations: PostDestination[] = result.subreddits.map((subreddit) => ({
+        type: "subreddit",
+        id: subreddit.display_name,
+        name: subreddit.display_name_prefixed,
+        description: `${subreddit.public_description || subreddit.title} • ${subreddit.subscribers?.toLocaleString() || "Unknown"} members`,
+        metadata: {
+          subscribers: subreddit.subscribers || 0,
+          over18: subreddit.over18 || false,
+          subredditType: subreddit.subreddit_type || "public"
         }
-      }
+      }))
 
       return {
         destinations,
-        hasMore: false
+        hasMore: result.hasMore
       }
     } catch (error) {
       console.error("Failed to search Reddit destinations:", error)
@@ -338,8 +221,8 @@ export class RedditPlatform extends BaseSocialPlatform {
     effectiveCredentials: { clientId: string; clientSecret: string }
   ): Promise<boolean> {
     try {
-      const subredditName = destination.id.replace(/^r\//, "")
-      const response = await this.makeRedditRequest(`/r/${subredditName}/about`, accessToken)
+      const subredditName = normalizeSubredditName(destination.id)
+      const response = await this.apiClient.makeRequest(`/r/${subredditName}/about`, accessToken)
       const data = await response.json()
       return !!data.data?.display_name
     } catch (error) {
@@ -359,9 +242,9 @@ export class RedditPlatform extends BaseSocialPlatform {
     // If we have access token, try to get real subreddit info
     if (accessToken) {
       try {
-        const response = await this.makeRedditRequest(`/r/${cleanInput}/about`, accessToken)
+        const response = await this.apiClient.makeRequest(`/r/${cleanInput}/about`, accessToken)
         const data = await response.json()
-        const subreddit: RedditSubreddit = data.data
+        const subreddit = data.data
 
         return {
           type: "subreddit",
@@ -393,34 +276,27 @@ export class RedditPlatform extends BaseSocialPlatform {
     effectiveCredentials: { clientId: string; clientSecret: string }
   ): Promise<Omit<InsertPost, "userId" | "integrationId">[]> {
     try {
-      const response = await this.makeRedditRequest("/user/me/submitted?limit=25&sort=new", accessToken)
-      const data = await response.json()
-
-      const postsToUpsert: Omit<InsertPost, "userId" | "integrationId">[] = []
-
-      if (data.data?.children) {
-        for (const child of data.data.children) {
-          const submission: RedditSubmission = child.data
-
-          // Create content from title and text
-          let content = submission.title
-          if (submission.is_self && submission.selftext) {
-            content += `\n${submission.selftext}`
-          } else if (!submission.is_self && submission.url) {
-            content += `\n${submission.url}`
-          }
+      const submissions = await this.apiClient.getRecentPosts(accessToken, 25)
+
+      const postsToUpsert: Omit<InsertPost, "userId" | "integrationId">[] = submissions.map((submission) => {
+        // Create content from title and text
+        let content = submission.title
+        if (submission.is_self && submission.selftext) {
+          content += `\n${submission.selftext}`
+        } else if (!submission.is_self && submission.url) {
+          content += `\n${submission.url}`
+        }
 
-          postsToUpsert.push({
-            id: submission.id,
-            content,
-            status: "posted",
-            source: "imported",
-            postedAt: new Date(submission.created_utc * 1000),
-            createdAt: new Date(submission.created_utc * 1000),
-            postUrl: `https://www.reddit.com${submission.permalink}`
-          })
+        return {
+          id: submission.id,
+          content,
+          status: "posted",
+          source: "imported",
+          postedAt: new Date(submission.created_utc * 1000),
+          createdAt: new Date(submission.created_utc * 1000),
+          postUrl: `https://www.reddit.com${submission.permalink}`
         }
-      }
+      })
 
       return postsToUpsert
     } catch (error) {
@@ -435,54 +311,11 @@ export class RedditPlatform extends BaseSocialPlatform {
     redirectUri: string,
     credentials: { clientId: string; clientSecret: string }
   ): Promise<{ accessToken: string; refreshToken?: string }> {
-    try {
-      const auth = Buffer.from(`${credentials.clientId}:${credentials.clientSecret}`).toString("base64")
-
-      const formData = new URLSearchParams()
-      formData.append("grant_type", "authorization_code")
-      formData.append("code", code)
-      formData.append("redirect_uri", redirectUri)
-
-      const response = await fetch(this.tokenUrl, {
-        method: "POST",
-        headers: {
-          Authorization: `Basic ${auth}`,
-          "Content-Type": "application/x-www-form-urlencoded",
-          "User-Agent": "BetterPlan/1.0"
-        },
-        body: formData
-      })
-
-      if (!response.ok) {
-        const error = await response.text()
-        throw new Error(`Token exchange failed: ${response.status} - ${error}`)
-      }
-
-      const tokens: RedditTokenResponse = await response.json()
-
-      return {
-        accessToken: tokens.access_token,
-        refreshToken: tokens.refresh_token
-      }
-    } catch (error) {
-      console.error("Failed to exchange code for tokens:", error)
-      throw new Error("Failed to exchange authorization code for tokens")
-    }
+    return this.apiClient.exchangeCodeForTokens(code, redirectUri, credentials)
   }
 
   // Get user info
   async getUserInfo(accessToken: string): Promise<{ id: string; name: string }> {
-    try {
-      const response = await this.makeRedditRequest("/api/v1/me", accessToken)
-      const user: RedditUser = await response.json()
-
-      return {
-        id: user.id,
-        name: user.name
-      }
-    } catch (error) {
-      console.error("Failed to get user info:", error)
-      throw new Error("Failed to get user information")
-    }
+    return this.apiClient.getUserInfo(accessToken)
   }
 }
diff --git a/src/lib/server/social-platforms/reddit/reddit-api-client.ts b/src/lib/server/social-platforms/reddit/reddit-api-client.ts
new file mode 100644
index 0000000..935d433
--- /dev/null
+++ b/src/lib/server/social-platforms/reddit/reddit-api-client.ts
@@ -0,0 +1,154 @@
+import type { RedditSubmission, RedditSubmissionResponse, RedditSubreddit, RedditTokenResponse, RedditUser } from "./reddit-utils"
+
+export class RedditApiClient {
+  private readonly baseUrl = "https://oauth.reddit.com"
+  private readonly tokenUrl = "https://www.reddit.com/api/v1/access_token"
+
+  async makeRequest(endpoint: string, accessToken: string, options: RequestInit = {}): Promise<Response> {
+    const url = `${this.baseUrl}${endpoint}`
+
+    const response = await fetch(url, {
+      ...options,
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "User-Agent": "BetterPlan/1.0",
+        ...options.headers
+      }
+    })
+
+    if (!response.ok) {
+      const error = await response.text()
+      throw new Error(`Reddit API error: ${response.status} - ${error}`)
+    }
+
+    return response
+  }
+
+  async exchangeCodeForTokens(
+    code: string,
+    redirectUri: string,
+    credentials: { clientId: string; clientSecret: string }
+  ): Promise<{ accessToken: string; refreshToken?: string }> {
+    const basicAuth = btoa(`${credentials.clientId}:${credentials.clientSecret}`)
+
+    const response = await fetch(this.tokenUrl, {
+      method: "POST",
+      headers: {
+        Authorization: `Basic ${basicAuth}`,
+        "Content-Type": "application/x-www-form-urlencoded",
+        "User-Agent": "BetterPlan/1.0"
+      },
+      body: new URLSearchParams({
+        grant_type: "authorization_code",
+        code,
+        redirect_uri: redirectUri
+      })
+    })
+
+    if (!response.ok) {
+      const error = await response.text()
+      throw new Error(`Token exchange failed: ${response.status} - ${error}`)
+    }
+
+    const tokenData: RedditTokenResponse = await response.json()
+    return {
+      accessToken: tokenData.access_token,
+      refreshToken: tokenData.refresh_token
+    }
+  }
+
+  async getUserInfo(accessToken: string): Promise<{ id: string; name: string }> {
+    const response = await this.makeRequest("/api/v1/me", accessToken)
+    const userData: RedditUser = await response.json()
+
+    return {
+      id: userData.id,
+      name: userData.name
+    }
+  }
+
+  async searchSubreddits(
+    query: string,
+    accessToken: string,
+    cursor?: string
+  ): Promise<{
+    subreddits: RedditSubreddit[]
+    hasMore: boolean
+    nextCursor?: string
+  }> {
+    const params = new URLSearchParams({
+      q: query,
+      type: "sr",
+      limit: "25"
+    })
+
+    if (cursor) {
+      params.set("after", cursor)
+    }
+
+    const response = await this.makeRequest(`/subreddits/search?${params}`, accessToken)
+    const data = await response.json()
+
+    const subreddits: RedditSubreddit[] = data.data.children.map((child: { data: RedditSubreddit }) => child.data)
+    const hasMore = data.data.after !== null
+    const nextCursor = data.data.after || undefined
+
+    return {
+      subreddits,
+      hasMore,
+      nextCursor
+    }
+  }
+
+  async submitPost(
+    subreddit: string,
+    title: string,
+    content: string,
+    accessToken: string,
+    isLinkPost = false,
+    url?: string
+  ): Promise<{ id: string; permalink: string }> {
+    const formData = new URLSearchParams({
+      sr: subreddit,
+      title,
+      api_type: "json"
+    })
+
+    if (isLinkPost && url) {
+      formData.set("url", url)
+    } else {
+      formData.set("text", content)
+    }
+
+    const response = await this.makeRequest("/api/submit", accessToken, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded"
+      },
+      body: formData
+    })
+
+    const result: RedditSubmissionResponse = await response.json()
+
+    if (result.json.errors && result.json.errors.length > 0) {
+      throw new Error(`Reddit submission failed: ${result.json.errors.join(", ")}`)
+    }
+
+    if (!result.json.data) {
+      throw new Error("Reddit submission failed: No data returned")
+    }
+
+    const submission = result.json.data.things[0]
+    return {
+      id: submission.data.id,
+      permalink: submission.data.url
+    }
+  }
+
+  async getRecentPosts(accessToken: string, limit = 10): Promise<RedditSubmission[]> {
+    const response = await this.makeRequest(`/user/me/submitted?limit=${limit}`, accessToken)
+    const data = await response.json()
+
+    return data.data.children.map((child: { data: RedditSubmission }) => child.data)
+  }
+}
diff --git a/src/lib/server/social-platforms/reddit/reddit-utils.ts b/src/lib/server/social-platforms/reddit/reddit-utils.ts
new file mode 100644
index 0000000..4d114e7
--- /dev/null
+++ b/src/lib/server/social-platforms/reddit/reddit-utils.ts
@@ -0,0 +1,79 @@
+export interface RedditTokenResponse {
+  access_token: string
+  refresh_token?: string
+  token_type: string
+  expires_in: number
+  scope: string
+}
+
+export interface RedditUser {
+  id: string
+  name: string
+  icon_img?: string
+  total_karma: number
+  link_karma: number
+  comment_karma: number
+}
+
+export interface RedditSubreddit {
+  display_name: string
+  display_name_prefixed: string
+  title: string
+  public_description?: string
+  description?: string
+  subscribers: number
+  over18: boolean
+  subreddit_type: "public" | "private" | "restricted"
+  icon_img?: string
+}
+
+export interface RedditSubmission {
+  id: string
+  title: string
+  selftext?: string
+  url?: string
+  permalink: string
+  created_utc: number
+  is_self: boolean
+  subreddit_name_prefixed: string
+  score: number
+  num_comments: number
+}
+
+export interface RedditSubmissionResponse {
+  json: {
+    errors: string[][]
+    data?: {
+      things: Array<{
+        data: {
+          id: string
+          url: string
+          name: string
+        }
+      }>
+    }
+  }
+}
+
+export function normalizeSubredditName(input: string): string {
+  // Remove r/ prefix if present and normalize
+  let subredditName = input.trim()
+  if (subredditName.startsWith("r/")) {
+    subredditName = subredditName.substring(2)
+  }
+  if (subredditName.startsWith("/r/")) {
+    subredditName = subredditName.substring(3)
+  }
+  return subredditName.toLowerCase()
+}
+
+export function buildRedditAuthUrl(clientId: string, state: string, redirectUri: string, scope: string[]): string {
+  const authUrl = new URL("https://www.reddit.com/api/v1/authorize")
+  authUrl.searchParams.set("client_id", clientId)
+  authUrl.searchParams.set("response_type", "code")
+  authUrl.searchParams.set("state", state)
+  authUrl.searchParams.set("redirect_uri", redirectUri)
+  authUrl.searchParams.set("duration", "permanent")
+  authUrl.searchParams.set("scope", scope.join(" "))
+  return authUrl.toString()
+}
diff --git a/src/lib/server/social-platforms/x-platform.ts b/src/lib/server/social-platforms/x-platform.ts
index d59a21a..907d53f 100644
--- a/src/lib/server/social-platforms/x-platform.ts
+++ b/src/lib/server/social-platforms/x-platform.ts
@@ -5,6 +5,7 @@ import { setCookie } from "@tanstack/react-start/server"
 import { type SendTweetV2Params, TwitterApi } from "twitter-api-v2"
 import { getEffectiveCredentials } from "../integrations"
 import { BaseSocialPlatform, type PostData, type PostDestination, type PostResult } from "./base-platform"
+import { extractCommunityId, parseAccessToken, validateCommunityUrl } from "./x/x-utils"
 
 export class XPlatform extends BaseSocialPlatform {
   constructor() {
@@ -83,17 +84,9 @@ export class XPlatform extends BaseSocialPlatform {
     }
   }
 
-  private parseAccessToken(accessToken: string): { token: string; secret: string } {
-    const [token, secret] = accessToken.split(":")
-    if (!token || !secret) {
-      throw new Error("Invalid X access token format. Expected format: 'token:secret'")
-    }
-    return { token, secret }
-  }
-
   async validateCredentials(accessToken: string, effectiveCredentials: { clientId: string; clientSecret: string }): Promise<boolean> {
     try {
-      const { token, secret } = this.parseAccessToken(accessToken)
+      const { token, secret } = parseAccessToken(accessToken)
 
       const client = new TwitterApi({
         appKey: effectiveCredentials.clientId,
@@ -117,7 +110,7 @@ export class XPlatform extends BaseSocialPlatform {
     effectiveCredentials: { clientId: string; clientSecret: string }
   ): Promise<PostResult> {
     try {
-      const { token, secret } = this.parseAccessToken(accessToken)
+      const { token, secret } = parseAccessToken(accessToken)
 
       const twitterClient = new TwitterApi({
         appKey: effectiveCredentials.clientId,
@@ -131,7 +124,7 @@ export class XPlatform extends BaseSocialPlatform {
 
       // Add community_id if posting to a community
       if (postData.destination && postData.destination.type === "community") {
-        const communityId = this.extractCommunityId(postData.destination.id)
+        const communityId = extractCommunityId(postData.destination.id)
         if (!communityId) {
           throw new Error("Invalid community URL format")
         }
@@ -156,12 +149,6 @@ export class XPlatform extends BaseSocialPlatform {
     }
   }
 
-  private extractCommunityId(communityUrl: string): string | null {
-    // Extract community ID from URL like https://x.com/i/communities/1493446837214187523
-    const match = communityUrl.match(/\/communities\/(\d+)/)
-    return match ? match[1] : null
-  }
-
   async validateDestination(
     destination: PostDestination,
     accessToken: string,
@@ -173,7 +160,7 @@ export class XPlatform extends BaseSocialPlatform {
 
     if (destination.type === "community") {
       // Validate community URL format
-      const communityId = this.extractCommunityId(destination.id)
+      const communityId = extractCommunityId(destination.id)
       if (!communityId) {
         return false
       }
@@ -192,7 +179,7 @@ export class XPlatform extends BaseSocialPlatform {
     effectiveCredentials: { clientId: string; clientSecret: string }
   ): Promise<string | null> {
     try {
-      const { token, secret } = this.parseAccessToken(accessToken)
+      const { token, secret } = parseAccessToken(accessToken)
 
       const client = new TwitterApi({
         appKey: effectiveCredentials.clientId,
@@ -228,18 +215,19 @@ export class XPlatform extends BaseSocialPlatform {
 
   // Create a destination from user input
   async createDestinationFromInput(input: string, accessToken: string | null, userId: string): Promise<PostDestination> {
-    if (input.includes("communities")) {
-      // Extract community ID from URL
-      const communityMatch = input.match(/\/communities\/(\d+)/)
-      const communityId = communityMatch?.[1]
+    // Check if input is a community URL
+    if (validateCommunityUrl(input)) {
+      const communityId = extractCommunityId(input)
+      if (!communityId) {
+        throw new Error("Invalid community URL format")
+      }
 
-      if (communityId && accessToken) {
+      // If we have access token, try to get community info
+      if (accessToken) {
         try {
-          // Get credentials and try to lookup community name
           const credentials = await getEffectiveCredentials("x", userId)
           if (credentials) {
             const communityName = await this.lookupCommunityName(communityId, accessToken, credentials)
-
             if (communityName) {
               return {
                 type: "community",
@@ -254,8 +242,8 @@ export class XPlatform extends BaseSocialPlatform {
         }
       }
 
-      // Fallback to generated name
-      const shortId = communityId ? communityId.slice(-6) : "Unknown"
+      // Fallback to basic community destination
+      const shortId = communityId.slice(-6)
       return {
         type: "community",
         id: input,
@@ -264,11 +252,12 @@ export class XPlatform extends BaseSocialPlatform {
       }
     }
 
+    // Default to public timeline
     return {
-      type: "custom",
-      id: input,
-      name: input,
-      description: "Custom destination"
+      type: "public",
+      id: "public",
+      name: "Public Timeline",
+      description: "Post to your public timeline"
     }
   }
 
@@ -277,7 +266,7 @@ export class XPlatform extends BaseSocialPlatform {
     effectiveCredentials: { clientId: string; clientSecret: string }
   ): Promise<Omit<InsertPost, "userId" | "integrationId">[]> {
     try {
-      const { token, secret } = this.parseAccessToken(accessToken)
+      const { token, secret } = parseAccessToken(accessToken)
 
       const client = new TwitterApi({
         appKey: effectiveCredentials.clientId,
diff --git a/src/lib/server/social-platforms/x/x-utils.ts b/src/lib/server/social-platforms/x/x-utils.ts
new file mode 100644
index 0000000..be207eb
--- /dev/null
+++ b/src/lib/server/social-platforms/x/x-utils.ts
@@ -0,0 +1,17 @@
+export function parseAccessToken(accessToken: string): { token: string; secret: string } {
+  const [token, secret] = accessToken.split(":")
+  if (!token || !secret) {
+    throw new Error("Invalid X access token format. Expected format: 'token:secret'")
+  }
+  return { token, secret }
+}
+
+export function extractCommunityId(communityUrl: string): string | null {
+  // Extract community ID from URL like https://x.com/i/communities/1493446837214187523
+  const match = communityUrl.match(/\/communities\/(\d+)/)
+  return match ? match[1] : null
+}
+
+export function validateCommunityUrl(url: string): boolean {
+  return /^https:\/\/x\.com\/i\/communities\/\d+/.test(url)
+}
diff --git a/src/routes/_protected/app/index.tsx b/src/routes/_protected/app/index.tsx
index 35ff3ff..4f971e2 100644
--- a/src/routes/_protected/app/index.tsx
+++ b/src/routes/_protected/app/index.tsx
@@ -1,12 +1,10 @@
-import { platformIcons } from "@/components/platform-icons"
+import { IntegrationsList } from "@/components/integrations/integrations-list"
 import { PlatformSetup } from "@/components/platform-setup"
-import { Button } from "@/components/ui/button"
 import type { Platform } from "@/database/schema/integrations"
-import { deleteIntegration, deleteUserAppCredentials, getIntegrations, getUserPlatformStatus } from "@/functions/integrations"
+import { deleteUserAppCredentials, getIntegrations, getUserPlatformStatus } from "@/functions/integrations"
 import { getAllPlatformInfo, startPlatformAuthorization } from "@/functions/platforms"
 import { useMutation, useQuery } from "@tanstack/react-query"
 import { createFileRoute, useRouter } from "@tanstack/react-router"
-import { PlusCircle, Settings, Trash2 } from "lucide-react"
 import { useState } from "react"
 import { toast } from "sonner"
 
@@ -69,14 +67,6 @@ function IntegrationsComponent() {
     }
   })
 
-  const { mutate: remove, isPending: isRemovePending } = useMutation({
-    mutationFn: deleteIntegration,
-    onSuccess: () => {
-      toast.success("Integration removed successfully.")
-      router.invalidate()
-    }
-  })
-
   // Handler generico per connettere qualsiasi piattaforma
   const handlePlatformConnect = (platform: Platform) => {
     const platformInfo = platformsInfo.find((p) => p.name === platform)
@@ -104,9 +94,7 @@ function IntegrationsComponent() {
     setSetupPlatform(null)
   }
 
-  const connectedPlatforms = integrations.map((i) => i.platform)
-
-  // Renderizza la schermata di setup se necessario (generico per tutte le piattaforme)
+  // Render setup screen if necessary
   if (setupPlatform) {
     const platformInfo = platformsInfo.find((p) => p.name === setupPlatform)
     const setupInfo = platformSetups[setupPlatform]
@@ -131,103 +119,15 @@ function IntegrationsComponent() {
         <p className="text-muted-foreground">Connect and manage your accounts to post across different platforms.</p>
       </div>
 
-      <div className="space-y-8">
-        <div>
-          <h2 className="mb-4 font-semibold text-lg">Connected</h2>
-          {integrations.length > 0 ? (
-            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-              {integrations.map((integration) => {
-                const platformInfo = platformsInfo.find((p) => p.name === integration.platform)
-                return (
-                  <div key={integration.id} className="flex items-center justify-between rounded-lg border p-4">
-                    <div className="flex items-center gap-4">
-                      {platformIcons[integration.platform]}
-                      <div>
-                        <p className="font-semibold">{platformInfo?.displayName || integration.platform}</p>
-                        <p className="text-muted-foreground text-sm">{integration.platformAccountName}</p>
-                      </div>
-                    </div>
-                    <Button variant="destructive" size="icon" onClick={() => remove({ data: integration.id })} disabled={isRemovePending}>
-                      <Trash2 className="h-4 w-4" />
-                    </Button>
-                  </div>
-                )
-              })}
-            </div>
-          ) : (
-            <p className="text-muted-foreground">No integrations connected yet.</p>
-          )}
-        </div>
-
-        <div>
-          <h2 className="mb-4 font-semibold text-lg">Available</h2>
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-            {platformsInfo.map((platformInfo) => {
-              const setupInfo = platformSetups[platformInfo.name]
-              const isCurrentlyAuthenticating = authorizingPlatform === platformInfo.name
-
-              return (
-                <div key={platformInfo.name} className="flex flex-col gap-4 rounded-lg border p-4">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-4">
-                      {platformIcons[platformInfo.name]}
-                      <p className="font-semibold">{platformInfo.displayName}</p>
-                    </div>
-
-                    {platformInfo.isImplemented ? (
-                      setupInfo && platformInfo.requiresSetup && !setupInfo.hasCredentials ? (
-                        <Button variant="outline" onClick={() => handlePlatformConnect(platformInfo.name)}>
-                          <Settings className="mr-2 h-4 w-4" />
-                          Setup
-                        </Button>
-                      ) : (
-                        <Button onClick={() => handlePlatformConnect(platformInfo.name)} disabled={isCurrentlyAuthenticating}>
-                          <PlusCircle className="mr-2 h-4 w-4" />
-                          {isCurrentlyAuthenticating ? "Redirecting..." : "Connect"}
-                        </Button>
-                      )
-                    ) : (
-                      <p className="text-muted-foreground">Coming soon!</p>
-                    )}
-                  </div>
-
-                  {/* Informazioni di setup */}
-                  {platformInfo.requiresSetup && setupInfo && (
-                    <div className="text-sm">
-                      {setupInfo.hasCredentials ? (
-                        <div className="flex items-center justify-between rounded bg-green-50 px-3 py-2 dark:bg-green-950/20">
-                          <span className="text-green-700 dark:text-green-300">
-                            {setupInfo.credentialSource === "system" ? "System configured ✓" : "App configured ✓"}
-                          </span>
-                          {setupInfo.credentialSource === "user" && (
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() =>
-                                setupInfo.removeCredentials?.({
-                                  data: platformInfo.name
-                                })
-                              }
-                              disabled={setupInfo.isRemovingCredentials}
-                              className="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
-                            >
-                              <Trash2 className="h-3 w-3" />
-                            </Button>
-                          )}
-                        </div>
-                      ) : (
-                        <div className="rounded bg-amber-50 px-3 py-2 text-amber-700 dark:bg-amber-950/20 dark:text-amber-300">
-                          Requires app configuration
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </div>
-              )
-            })}
-          </div>
-        </div>
-      </div>
+      <IntegrationsList
+        integrations={integrations}
+        platformsInfo={platformsInfo}
+        platformSetups={platformSetups}
+        authorizingPlatform={authorizingPlatform}
+        onPlatformConnect={handlePlatformConnect}
+        onSetupPlatform={setSetupPlatform}
+        onIntegrationRemoved={() => router.invalidate()}
+      />
     </div>
   )
 }
diff --git a/src/routes/_protected/app/write.tsx b/src/routes/_protected/app/write.tsx
index 73c46a2..5f38e35 100644
--- a/src/routes/_protected/app/write.tsx
+++ b/src/routes/_protected/app/write.tsx
@@ -9,7 +9,7 @@ import { createPost, deletePost, fetchRecentSocialPosts, getPosts } from "@/func
 import type { PostDestination } from "@/lib/server/social-platforms/base-platform"
 import { useMutation, useQuery } from "@tanstack/react-query"
 import { createFileRoute } from "@tanstack/react-router"
-import { Download } from "lucide-react"
+import { Download, List, PenTool } from "lucide-react"
 import { useMemo, useState } from "react"
 import { toast } from "sonner"
 
@@ -117,71 +117,134 @@ function RouteComponent() {
   }
 
   return (
-    <div className="container mx-auto max-w-2xl flex-1 space-y-8 p-4">
-      <div className="space-y-2">
-        <h1 className="font-bold text-2xl">Dashboard</h1>
-        <p className="text-muted-foreground">Select a platform to manage your posts.</p>
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <div className="sticky top-14 z-10 h-24 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container mx-auto px-4 py-4">
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <div className="space-y-1">
+              <h1 className="font-bold text-xl sm:text-2xl">Content Creator</h1>
+              <p className="text-muted-foreground text-sm">Create and manage your social media posts</p>
+            </div>
+
+            {/* Platform Selector */}
+            <div className="w-full sm:w-64">
+              <Select onValueChange={setSelectedIntegrationId} value={selectedIntegrationId}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a platform" />
+                </SelectTrigger>
+                <SelectContent>
+                  {integrations.length > 0 ? (
+                    integrations.map((i) => (
+                      <SelectItem key={i.id} value={i.id}>
+                        <div className="flex items-center gap-2">
+                          {platformIcons[i.platform]}
+                          <span className="truncate">{i.platformAccountName}</span>
+                        </div>
+                      </SelectItem>
+                    ))
+                  ) : (
+                    <SelectItem value="no-platforms" disabled>
+                      No platforms connected
+                    </SelectItem>
+                  )}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
       </div>
-      <div className="w-full">
-        <Select onValueChange={setSelectedIntegrationId} value={selectedIntegrationId}>
-          <SelectTrigger>
-            <SelectValue placeholder="Select a platform" />
-          </SelectTrigger>
-          <SelectContent>
-            {integrations.length > 0 ? (
-              integrations.map((i) => (
-                <SelectItem key={i.id} value={i.id}>
+
+      {/* Main Content */}
+      <div className="container mx-auto px-4 py-6">
+        {!selectedIntegrationId ? (
+          // Empty State
+          <div className="flex flex-col items-center justify-center py-16 text-center sm:py-20">
+            <div className="mb-6 rounded-full bg-muted p-4">
+              <PenTool className="h-8 w-8 text-muted-foreground" />
+            </div>
+            <h2 className="mb-2 font-semibold text-xl">Ready to create content?</h2>
+            <p className="mb-6 max-w-md text-muted-foreground">
+              Select a platform from the dropdown above to start creating and managing your social media posts.
+            </p>
+            <div className="flex items-center gap-2 text-muted-foreground text-sm">
+              <List className="h-4 w-4" />
+              <span>Connect your social media accounts to get started</span>
+            </div>
+          </div>
+        ) : (
+          // Responsive layout: single column on mobile, two columns on desktop
+          <div className="space-y-6 lg:grid lg:grid-cols-3 lg:gap-6 lg:space-y-0">
+            {/* Create Post Section - Takes 2 columns on desktop */}
+            <div className="lg:col-span-2">
+              <div className="lg:sticky lg:top-44">
+                <div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-center">
                   <div className="flex items-center gap-2">
-                    {platformIcons[i.platform]}
-                    <span>{i.platformAccountName}</span>
+                    <PenTool className="h-5 w-5" />
+                    <h2 className="font-semibold text-lg">Create New Post</h2>
                   </div>
-                </SelectItem>
-              ))
-            ) : (
-              <SelectItem value="no-platforms" disabled>
-                No platforms connected
-              </SelectItem>
-            )}
-          </SelectContent>
-        </Select>
-      </div>
+                  {currentIntegration && (
+                    <div className="flex items-center gap-2 rounded-full bg-muted px-3 py-1 text-sm">
+                      {platformIcons[currentIntegration.platform]}
+                      <span className="truncate font-medium">{currentIntegration.platformAccountName}</span>
+                    </div>
+                  )}
+                </div>
 
-      {selectedIntegrationId && (
-        <>
-          <CreatePostForm
-            selectedIntegrationId={selectedIntegrationId}
-            currentIntegrationName={currentIntegration?.platformAccountName}
-            currentPlatform={currentIntegration?.platform}
-            platformInfo={platformInfo}
-            isPending={isPending}
-            onCreatePost={handleCreatePost}
-            onClear={handleClear}
-            onValidationError={handleValidationError}
-          />
-          <div className="w-full">
-            <div className="mb-4 flex items-center justify-between">
-              <h2 className="font-semibold text-lg">Your Posts</h2>
-              {platformSupportsFetching && (
-                <Button onClick={handleFetchRecent} disabled={!selectedIntegrationId || isSyncingPosts} size="sm">
-                  <Download className="mr-2 h-4 w-4" />
-                  {isSyncingPosts ? "Syncing..." : "Sync posts"}
-                </Button>
-              )}
+                <CreatePostForm
+                  selectedIntegrationId={selectedIntegrationId}
+                  currentIntegrationName={currentIntegration?.platformAccountName}
+                  currentPlatform={currentIntegration?.platform}
+                  platformInfo={platformInfo}
+                  isPending={isPending}
+                  onCreatePost={handleCreatePost}
+                  onClear={handleClear}
+                  onValidationError={handleValidationError}
+                />
+              </div>
+            </div>
+
+            {/* Posts List Section - Takes 1 column on desktop */}
+            <div className="lg:col-span-1">
+              <div className="space-y-4">
+                <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+                  <div className="flex items-center gap-2">
+                    <List className="h-5 w-5" />
+                    <h2 className="font-semibold text-lg">Your Posts</h2>
+                    {posts.length > 0 && <span className="rounded-full bg-muted px-2 py-1 font-medium text-xs">{posts.length}</span>}
+                  </div>
+                  {platformSupportsFetching && (
+                    <Button
+                      onClick={handleFetchRecent}
+                      disabled={!selectedIntegrationId || isSyncingPosts}
+                      size="sm"
+                      variant="outline"
+                      className="w-full sm:w-auto"
+                    >
+                      <Download className="mr-2 h-4 w-4" />
+                      {isSyncingPosts ? "Syncing..." : "Sync"}
+                    </Button>
+                  )}
+                </div>
+
+                <div className="rounded-lg border bg-card">
+                  <PostsList
+                    posts={posts}
+                    isPending={isPostsPending}
+                    onDeletePost={(postId) =>
+                      deleteMutate({
+                        data: {
+                          id: postId
+                        }
+                      })
+                    }
+                  />
+                </div>
+              </div>
             </div>
-            <PostsList
-              posts={posts}
-              isPending={isPostsPending}
-              onDeletePost={(postId) =>
-                deleteMutate({
-                  data: {
-                    id: postId
-                  }
-                })
-              }
-            />
           </div>
-        </>
-      )}
+        )}
+      </div>
     </div>
   )
 }
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index ee89a7c..4db38e3 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,6 +1,7 @@
 import { Button } from "@/components/ui/button"
 import { GitHubIcon } from "@daveyplate/better-auth-ui"
 import { Link, createFileRoute } from "@tanstack/react-router"
+import { BarChart3, Bot, Calendar, CheckCircle, Share2, Shield, Sparkles, Zap } from "lucide-react"
 
 export const Route = createFileRoute("/")({
   component: LandingPage
@@ -8,25 +9,219 @@ export const Route = createFileRoute("/")({
 
 function LandingPage() {
   return (
-    <section className="container mx-auto grid min-h-[calc(100vh-16rem)] flex-1 place-items-center gap-10 py-16 text-center">
-      <div className="space-y-6">
-        <h1 className="font-bold text-4xl md:text-6xl">Streamline Your Social Media Workflow</h1>
-        <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
-          Connect your accounts, create content, and schedule posts with ease. Better-Plan helps you manage your social presence
-          effectively.
-        </p>
-      </div>
-      <div className="flex flex-col gap-4 sm:flex-row">
-        <Button asChild size="lg">
-          <Link to="/app">Get Started for Free</Link>
-        </Button>
-        <Button asChild variant="outline" size="lg">
-          <a href="https://github.com/epavanello/better-plan" target="_blank" rel="noopener noreferrer">
-            <GitHubIcon className="mr-2 h-5 w-5" />
-            Star on GitHub
-          </a>
-        </Button>
-      </div>
-    </section>
+    <div className="min-h-screen bg-gradient-to-br from-background via-background to-muted/20">
+      {/* Hero Section */}
+      <section className="container mx-auto px-4 pt-20 pb-16">
+        <div className="space-y-8 text-center">
+          <div className="inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/10 px-4 py-2 text-primary">
+            <Sparkles className="h-4 w-4" />
+            <span className="font-medium text-sm">AI-Powered Social Media Management</span>
+          </div>
+
+          <h1 className="font-bold text-5xl tracking-tight md:text-7xl">
+            Streamline Your
+            <span className="block text-primary">Social Media</span>
+            Workflow
+          </h1>
+
+          <p className="mx-auto max-w-3xl text-muted-foreground text-xl leading-relaxed">
+            Create, schedule, and publish engaging content across multiple platforms with AI assistance. Better Plan helps you manage your
+            social presence effectively and grow your audience.
+          </p>
+
+          <div className="flex flex-col justify-center gap-4 sm:flex-row">
+            <Button asChild size="lg" className="px-8 py-6 text-lg">
+              <Link to="/app">Get Started for Free</Link>
+            </Button>
+            <Button asChild variant="outline" size="lg" className="px-8 py-6 text-lg">
+              <a href="https://github.com/epavanello/better-plan" target="_blank" rel="noopener noreferrer">
+                <GitHubIcon className="mr-2 h-5 w-5" />
+                Star on GitHub
+              </a>
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="container mx-auto px-4 py-20">
+        <div className="mb-16 text-center">
+          <h2 className="mb-4 font-bold text-4xl">Everything You Need to Succeed</h2>
+          <p className="mx-auto max-w-2xl text-muted-foreground text-xl">
+            Powerful features designed to make social media management effortless and effective
+          </p>
+        </div>
+
+        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+          <div className="rounded-lg border bg-card p-6 transition-all hover:shadow-lg">
+            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+              <Bot className="h-6 w-6 text-primary" />
+            </div>
+            <h3 className="mb-2 font-semibold text-xl">AI-Powered Content</h3>
+            <p className="text-muted-foreground">
+              Generate engaging posts with AI assistance. Get suggestions based on your style and audience.
+            </p>
+          </div>
+
+          <div className="rounded-lg border bg-card p-6 transition-all hover:shadow-lg">
+            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+              <Calendar className="h-6 w-6 text-primary" />
+            </div>
+            <h3 className="mb-2 font-semibold text-xl">Smart Scheduling</h3>
+            <p className="text-muted-foreground">
+              Plan and schedule posts with an intuitive calendar interface. Never miss the perfect timing.
+            </p>
+          </div>
+
+          <div className="rounded-lg border bg-card p-6 transition-all hover:shadow-lg">
+            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+              <Share2 className="h-6 w-6 text-primary" />
+            </div>
+            <h3 className="mb-2 font-semibold text-xl">Multi-Platform</h3>
+            <p className="text-muted-foreground">Connect and manage multiple social media accounts from one dashboard.</p>
+          </div>
+
+          <div className="rounded-lg border bg-card p-6 transition-all hover:shadow-lg">
+            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+              <BarChart3 className="h-6 w-6 text-primary" />
+            </div>
+            <h3 className="mb-2 font-semibold text-xl">Content Analytics</h3>
+            <p className="text-muted-foreground">Track your publishing history and maintain context for better AI suggestions.</p>
+          </div>
+
+          <div className="rounded-lg border bg-card p-6 transition-all hover:shadow-lg">
+            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+              <Zap className="h-6 w-6 text-primary" />
+            </div>
+            <h3 className="mb-2 font-semibold text-xl">Context-Aware AI</h3>
+            <p className="text-muted-foreground">AI learns from your writing style and post history for personalized suggestions.</p>
+          </div>
+
+          <div className="rounded-lg border bg-card p-6 transition-all hover:shadow-lg">
+            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+              <Shield className="h-6 w-6 text-primary" />
+            </div>
+            <h3 className="mb-2 font-semibold text-xl">Secure & Private</h3>
+            <p className="text-muted-foreground">Self-hosted option available. Your data stays private and under your control.</p>
+          </div>
+        </div>
+      </section>
+
+      {/* How It Works Section */}
+      <section className="container mx-auto px-4 py-20">
+        <div className="mb-16 text-center">
+          <h2 className="mb-4 font-bold text-4xl">How It Works</h2>
+          <p className="text-muted-foreground text-xl">Get started in minutes with our simple three-step process</p>
+        </div>
+
+        <div className="grid gap-8 md:grid-cols-3">
+          <div className="text-center">
+            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary">
+              <span className="font-bold text-2xl text-primary-foreground">1</span>
+            </div>
+            <h3 className="mb-2 font-semibold text-xl">Connect Your Accounts</h3>
+            <p className="text-muted-foreground">Link your social media platforms through secure OAuth authentication</p>
+          </div>
+
+          <div className="text-center">
+            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary">
+              <span className="font-bold text-2xl text-primary-foreground">2</span>
+            </div>
+            <h3 className="mb-2 font-semibold text-xl">Create & Enhance</h3>
+            <p className="text-muted-foreground">Write your content and use AI to improve it with smart suggestions</p>
+          </div>
+
+          <div className="text-center">
+            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary">
+              <span className="font-bold text-2xl text-primary-foreground">3</span>
+            </div>
+            <h3 className="mb-2 font-semibold text-xl">Schedule & Publish</h3>
+            <p className="text-muted-foreground">Schedule posts for optimal timing or publish immediately across platforms</p>
+          </div>
+        </div>
+      </section>
+
+      {/* Benefits Section */}
+      <section className="container mx-auto px-4 py-20">
+        <div className="grid items-center gap-16 lg:grid-cols-2">
+          <div>
+            <h2 className="mb-6 font-bold text-4xl">Why Choose Better Plan?</h2>
+            <div className="space-y-4">
+              <div className="flex items-start gap-3">
+                <CheckCircle className="mt-1 h-6 w-6 flex-shrink-0 text-primary" />
+                <div>
+                  <h3 className="font-semibold">Save Hours Every Week</h3>
+                  <p className="text-muted-foreground">Automate your social media workflow and focus on what matters most</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <CheckCircle className="mt-1 h-6 w-6 flex-shrink-0 text-primary" />
+                <div>
+                  <h3 className="font-semibold">AI That Learns Your Style</h3>
+                  <p className="text-muted-foreground">Get personalized content suggestions that match your brand voice</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <CheckCircle className="mt-1 h-6 w-6 flex-shrink-0 text-primary" />
+                <div>
+                  <h3 className="font-semibold">Multi-Platform Management</h3>
+                  <p className="text-muted-foreground">Manage all your social accounts from one powerful dashboard</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <CheckCircle className="mt-1 h-6 w-6 flex-shrink-0 text-primary" />
+                <div>
+                  <h3 className="font-semibold">Self-Hosted Option</h3>
+                  <p className="text-muted-foreground">Keep your data private with our self-hosted solution</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="relative">
+            <div className="rounded-2xl border bg-gradient-to-br from-primary/20 to-primary/5 p-8">
+              <div className="space-y-4">
+                <div className="flex items-center gap-3">
+                  <div className="h-3 w-3 rounded-full bg-red-500" />
+                  <div className="h-3 w-3 rounded-full bg-yellow-500" />
+                  <div className="h-3 w-3 rounded-full bg-green-500" />
+                </div>
+                <div className="space-y-3">
+                  <div className="h-4 w-3/4 rounded bg-muted" />
+                  <div className="h-4 w-1/2 rounded bg-muted" />
+                  <div className="h-4 w-5/6 rounded bg-muted" />
+                </div>
+                <div className="flex gap-2">
+                  <div className="h-8 w-16 rounded bg-primary/20" />
+                  <div className="h-8 w-16 rounded bg-muted" />
+                  <div className="h-8 w-16 rounded bg-muted" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="container mx-auto px-4 py-20">
+        <div className="rounded-2xl border bg-gradient-to-r from-primary/10 to-primary/5 p-12 text-center">
+          <h2 className="mb-4 font-bold text-4xl">Ready to Transform Your Social Media?</h2>
+          <p className="mx-auto mb-8 max-w-2xl text-muted-foreground text-xl">
+            Join thousands of creators and businesses who trust Better Plan to manage their social media presence
+          </p>
+          <div className="flex flex-col justify-center gap-4 sm:flex-row">
+            <Button asChild size="lg" className="px-8 py-6 text-lg">
+              <Link to="/app">Start Your Free Trial</Link>
+            </Button>
+            <Button asChild variant="outline" size="lg" className="px-8 py-6 text-lg">
+              <a href="https://github.com/epavanello/better-plan" target="_blank" rel="noopener noreferrer">
+                <GitHubIcon className="mr-2 h-5 w-5" />
+                View on GitHub
+              </a>
+            </Button>
+          </div>
+        </div>
+      </section>
+    </div>
   )
 }