diff --git a/.env.example b/.env.example
index 3283ce2..380a2ef 100644
--- a/.env.example
+++ b/.env.example
@@ -2,7 +2,7 @@
 TWITTER_CLIENT_ID=your_oauth2_client_id
 TWITTER_CLIENT_SECRET=your_oauth2_client_secret
 
-# Twitter OAuth 1.0a credentials (for user context endpoints)
+# Twitter OAuth 1.0a credentials (for user context endpoints and media uploads)
 TWITTER_API_KEY=your_oauth1_api_key
 TWITTER_API_SECRET=your_oauth1_api_secret
 TWITTER_ACCESS_TOKEN=your_oauth1_access_token
diff --git a/.github/workflows/near-rewards.yml b/.github/workflows/near-rewards.yml
new file mode 100644
index 0000000..16ed2b3
--- /dev/null
+++ b/.github/workflows/near-rewards.yml
@@ -0,0 +1,28 @@
+name: NEAR Protocol Rewards Tracking
+on:
+  schedule:
+    - cron: '0 */12 * * *'  # Every 12 hours
+  workflow_dispatch:        # Manual trigger
+  push:
+    branches: [ main ]     # Start on main branch updates
+
+jobs:
+  calculate-rewards:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      issues: read
+      pull-requests: read
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Calculate Rewards
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_REPO: ${{ github.repository }}
+        run: |
+          npm install -g near-protocol-rewards@latest
+          near-protocol-rewards calculate
\ No newline at end of file
diff --git a/bun.lockb b/bun.lockb
index ee4e116..e2b3109 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/next.config.js b/next.config.js
index aaf5862..db86e1f 100644
--- a/next.config.js
+++ b/next.config.js
@@ -7,6 +7,10 @@ const nextConfig = {
         protocol: "https",
         hostname: "builders.mypinata.cloud",
       },
+      {
+        protocol: "https",
+        hostname: "ipfs.near.social",
+      },
     ],
   },
 };
diff --git a/package.json b/package.json
index ec60a64..43c3550 100644
--- a/package.json
+++ b/package.json
@@ -39,24 +39,33 @@
     "@near-wallet-selector/modal-ui": "^8.9.13",
     "@near-wallet-selector/my-near-wallet": "^8.9.13",
     "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-toast": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.1.6",
+    "@radix-ui/react-visually-hidden": "^1.1.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cookie": "^1.0.2",
     "date-fns": "^4.1.0",
+    "formidable": "^3.5.2",
     "framer-motion": "^11.16.1",
+    "lodash": "^4.17.21",
     "lucide-react": "^0.469.0",
     "near-api-js": "^4.0.3",
     "next": "14.2.13",
     "react": "^18",
     "react-beautiful-dnd": "^13.1.1",
+    "react-confetti": "^6.2.2",
     "react-dom": "^18",
+    "react-markdown": "^9.0.3",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "twitter-api-v2": "^1.19.0"
   },
   "devDependencies": {
     "@builddao/near-social-js": "1.1.0-beta.6",
+    "@tailwindcss/typography": "^0.5.16",
     "autoprefixer": "^10.4.20",
     "encoding": "^0.1.13",
     "eslint": "^8",
diff --git a/public/og-image.png b/public/og-image.png
new file mode 100644
index 0000000..90ff9ed
Binary files /dev/null and b/public/og-image.png differ
diff --git a/public/og-image.svg b/public/og-image.svg
deleted file mode 100644
index 9caf851..0000000
--- a/public/og-image.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="1200" height="630" viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg">
-  <rect width="1200" height="630" fill="#0F172A"/>
-  
-  <!-- Background Grid Pattern -->
-  <pattern id="grid" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
-    <rect width="40" height="40" fill="none" stroke="#1E293B" stroke-width="1"/>
-  </pattern>
-  <rect width="1200" height="630" fill="url(#grid)" opacity="0.3"/>
-  
-  <!-- Main Title -->
-  <text x="600" y="200" font-family="Arial, sans-serif" font-size="72" font-weight="bold" fill="white" text-anchor="middle">
-    crosspost
-  </text>
-  
-  <!-- Subtitle -->
-  <text x="600" y="280" font-family="Arial, sans-serif" font-size="32" fill="#94A3B8" text-anchor="middle">
-    your content, everywhere
-  </text>
-</svg>
diff --git a/src/components/compose-post.js b/src/components/compose-post.js
index e9506d3..6660fa6 100644
--- a/src/components/compose-post.js
+++ b/src/components/compose-post.js
@@ -1,10 +1,6 @@
-import { useState, useEffect } from "react";
-import { useDraftsStore } from "../store/drafts-store";
-import { DraftsModal } from "./drafts-modal";
-import { Button } from "./ui/button";
 import {
-  DndContext,
   closestCenter,
+  DndContext,
   KeyboardSensor,
   PointerSensor,
   useSensor,
@@ -14,88 +10,31 @@ import {
   arrayMove,
   SortableContext,
   sortableKeyboardCoordinates,
-  useSortable,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-
-function SortablePost({ post, index, onTextChange, onRemove }) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: `post-${index}` });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.5 : 1,
-  };
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className="flex gap-2 sm:px-4 -mx-4 sm:mx-0"
-    >
-      <div className="flex-none w-8">
-        <div
-          {...attributes}
-          {...listeners}
-          className="sticky top-0 h-[150px] w-8 flex items-center justify-center cursor-grab bg-gray-50 rounded-lg border-2 border-gray-800 shadow-[2px_2px_0_rgba(0,0,0,1)]"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <circle cx="9" cy="5" r="1" />
-            <circle cx="9" cy="12" r="1" />
-            <circle cx="9" cy="19" r="1" />
-            <circle cx="15" cy="5" r="1" />
-            <circle cx="15" cy="12" r="1" />
-            <circle cx="15" cy="19" r="1" />
-          </svg>
-        </div>
-      </div>
-      <div className="flex-1">
-        <textarea
-          value={post.text}
-          onChange={(e) => onTextChange(index, e.target.value)}
-          placeholder={`Thread part ${index + 1}`}
-          maxLength={280}
-          className="w-full min-h-[150px] px-4 py-4 border-2 border-gray-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none shadow-[2px_2px_0_rgba(0,0,0,1)]"
-        />
-        <div className="flex justify-between items-center mt-1">
-          <span className="text-sm text-gray-500">
-            {post.text.length}/280 characters
-          </span>
-          <Button
-            onClick={() => onRemove(index)}
-            variant="destructive"
-            size="sm"
-          >
-            Remove
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
+import { useCallback, useEffect, useState } from "react";
+import { usePostManagement } from "../hooks/use-post-management";
+import { usePostMedia } from "../hooks/use-post-media";
+import { useDraftsStore } from "../store/drafts-store";
+import { DraftsModal } from "./drafts-modal";
+import { SortablePost } from "./sortable-post";
+import { Button } from "./ui/button";
+import { Textarea } from "./ui/textarea";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipProvider,
+} from "./ui/tooltip";
+import { useTwitterConnection } from "@/store/twitter-store";
+import { useToast } from "@/hooks/use-toast";
+import { RequestFeatureButton } from "./feature-request-modal";
 
 // This "widget" handles all of the editing for post content
 // Calls "onSubmit" with an array of post objects
 
 export function ComposePost({ onSubmit }) {
+  const { toast } = useToast();
   const sensors = useSensors(
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
@@ -103,101 +42,178 @@ export function ComposePost({ onSubmit }) {
     }),
   );
 
-  const [isThreadMode, setIsThreadMode] = useState(false);
-  const [posts, setPosts] = useState([{ text: "", image: null }]);
-  const [error, setError] = useState("");
-  const { setModalOpen, saveDraft, saveAutoSave, clearAutoSave, autosave } =
-    useDraftsStore();
+  const [posts, setPosts] = useState([
+    { text: "", mediaId: null, mediaPreview: null },
+  ]);
+  const {
+    setModalOpen,
+    saveDraft,
+    saveAutoSave,
+    clearAutoSave,
+    autosave,
+    isThreadMode,
+    setThreadMode,
+    isModalOpen,
+  } = useDraftsStore();
+
+  // Memoized draft save handler
+  const handleSaveDraft = useCallback(() => {
+    saveDraft(posts);
+    toast({
+      title: "Draft Saved",
+      description: "Your draft has been saved successfully.",
+    });
+    clearAutoSave();
+    setPosts([{ text: "", mediaId: null, mediaPreview: null }]);
+  }, [saveDraft, posts, toast, setPosts, clearAutoSave]);
+
+  // Custom hooks
+  const { handleMediaUpload, removeMedia } = usePostMedia(
+    setPosts,
+    toast,
+    saveAutoSave,
+  );
+  const {
+    handleTextChange,
+    addThread,
+    removeThread,
+    cleanup,
+    convertToThread,
+    convertToSingle,
+  } = usePostManagement(posts, setPosts, saveAutoSave);
+
+  const { isConnected } = useTwitterConnection();
 
-  // Load auto-saved content on mount
+  // Load auto-saved content on mount and handle cleanup
   useEffect(() => {
     if (autosave?.posts?.length > 0) {
       setPosts(autosave.posts);
-      setIsThreadMode(autosave.posts.length > 1);
     }
-  }, []);
-
-  // Auto-save every 5 seconds if content has changed
-  useEffect(() => {
-    const timer = setInterval(() => {
-      saveAutoSave(posts);
-    }, 5000);
 
     return () => {
-      clearInterval(timer);
-      saveAutoSave(posts);
+      if (cleanup) cleanup();
     };
-  }, [posts, saveAutoSave]);
+  }, [autosave, cleanup]);
 
-  const handleTextChange = (index, value) => {
-    const newPosts = [...posts];
-    newPosts[index] = { ...newPosts[index], text: value };
-    setPosts(newPosts);
-  };
+  // Memoized handlers
+  const handleModalOpen = useCallback(() => {
+    setModalOpen(true);
+  }, [setModalOpen]);
 
-  const addThread = () => {
-    setPosts([...posts, { text: "", image: null }]);
-  };
+  const hasMultipleImages = useCallback(() => {
+    return posts.filter((post) => post.mediaId !== null).length > 1;
+  }, [posts]);
 
-  const removeThread = (index) => {
-    if (posts.length > 1) {
-      const newPosts = posts.filter((_, i) => i !== index);
-      setPosts(newPosts);
+  const handleModeToggle = useCallback(() => {
+    if (isThreadMode && hasMultipleImages()) {
+      return; // Prevent switching to single post mode with multiple images
     }
-  };
 
-  const toggleMode = () => {
-    setIsThreadMode(!isThreadMode);
-    if (!isThreadMode) {
-      // Converting single post to multiple
-      const text = posts[0].text;
-      // Only split if there's actual content and it contains ---
-      if (text.trim() && text.includes("---")) {
-        const threads = text
-          .split("---")
-          .map((t) => t.trim())
-          .filter((t) => t)
-          .map((text) => ({ text, image: null }));
-        setPosts(threads.length > 0 ? threads : [{ text: "", image: null }]);
-      }
+    if (isThreadMode) {
+      convertToSingle();
+      setThreadMode(false);
     } else {
-      // Converting multiple posts to single
-      const combinedText = posts
-        .map((p) => p.text)
-        .filter((t) => t.trim())
-        .join("\n---\n");
-      setPosts([{ text: combinedText, image: null }]);
+      convertToThread(posts[0].text);
+      setThreadMode(true);
+    }
+    // Recreate previews and save after mode switch
+    setTimeout(() => {
+      // Use latest posts state when saving
+      setPosts((currentPosts) => {
+        saveAutoSave(currentPosts);
+        return currentPosts;
+      });
+    }, 0);
+  }, [
+    isThreadMode,
+    hasMultipleImages,
+    convertToSingle,
+    convertToThread,
+    posts,
+    setThreadMode,
+    saveAutoSave,
+  ]);
+
+  const handleDragEnd = useCallback((event) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = parseInt(active.id.split("-")[1]);
+      const newIndex = parseInt(over.id.split("-")[1]);
+      setPosts((posts) => arrayMove(posts, oldIndex, newIndex));
     }
-  };
+  }, []);
+
+  const handleMediaInputClick = useCallback(() => {
+    document.getElementById("media-upload-single").click();
+  }, []);
+
+  const handleSingleMediaUpload = useCallback(
+    (e) => {
+      handleMediaUpload(0, e.target.files[0]);
+    },
+    [handleMediaUpload],
+  );
 
-  const handleSubmit = async () => {
+  const handleSingleMediaRemove = useCallback(() => {
+    removeMedia(0);
+  }, [removeMedia]);
+
+  const handleSubmit = useCallback(async () => {
     const nonEmptyPosts = posts.filter((p) => p.text.trim());
     if (nonEmptyPosts.length === 0) {
-      setError("Please enter your post text");
+      toast({
+        title: "Empty Post",
+        description: "Please enter your post text",
+        variant: "destructive",
+      });
       return;
     }
     try {
-      setError("");
-      // If not in thread mode, just submit the first post's content
-      const finalPosts = isThreadMode ? nonEmptyPosts : [posts[0]];
-      await onSubmit(finalPosts);
-      setPosts([{ text: "", image: null }]);
+      await onSubmit(nonEmptyPosts);
+      setPosts([{ text: "", mediaId: null, mediaPreview: null }]);
       clearAutoSave();
     } catch (err) {
-      setError("Failed to send post");
       console.error("Post error:", err);
     }
-  };
+  }, [clearAutoSave, onSubmit, posts, toast, setPosts]);
 
   return (
     <div className="space-y-3">
-      <div className="flex justify-end gap-2 mb-2">
-        <Button onClick={() => setModalOpen(true)} size="sm">
-          Drafts
-        </Button>
-        <Button onClick={toggleMode} size="sm">
-          {isThreadMode ? "Single Post Mode" : "Thread Mode"}
-        </Button>
+      <div className="flex justify-between items-center mb-2">
+        <div>{isConnected && <RequestFeatureButton post={onSubmit} />}</div>
+        <div className="flex gap-2">
+          <Button onClick={handleModalOpen} size="sm">
+            Drafts
+          </Button>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div>
+                  <Button
+                    onClick={handleModeToggle}
+                    size="sm"
+                    disabled={
+                      (isThreadMode && hasMultipleImages()) ||
+                      (!isThreadMode && !isConnected)
+                    }
+                  >
+                    {isThreadMode ? "Single Post Mode" : "Thread Mode"}
+                  </Button>
+                </div>
+              </TooltipTrigger>
+              {isThreadMode && hasMultipleImages() && (
+                <TooltipContent>
+                  <p>Cannot switch while multiple images exist</p>
+                </TooltipContent>
+              )}
+              {!isThreadMode && !isConnected && (
+                <TooltipContent>
+                  <p>Thread mode not available for Near Social</p>
+                </TooltipContent>
+              )}
+            </Tooltip>
+          </TooltipProvider>
+        </div>
       </div>
 
       {isThreadMode ? (
@@ -205,14 +221,7 @@ export function ComposePost({ onSubmit }) {
           <DndContext
             sensors={sensors}
             collisionDetection={closestCenter}
-            onDragEnd={(event) => {
-              const { active, over } = event;
-              if (over && active.id !== over.id) {
-                const oldIndex = parseInt(active.id.split("-")[1]);
-                const newIndex = parseInt(over.id.split("-")[1]);
-                setPosts((posts) => arrayMove(posts, oldIndex, newIndex));
-              }
-            }}
+            onDragEnd={handleDragEnd}
           >
             <SortableContext
               items={posts.map((_, i) => `post-${i}`)}
@@ -224,52 +233,101 @@ export function ComposePost({ onSubmit }) {
                   post={post}
                   index={index}
                   onTextChange={handleTextChange}
+                  onMediaUpload={handleMediaUpload}
+                  onMediaRemove={removeMedia}
                   onRemove={posts.length > 1 ? removeThread : undefined}
                 />
               ))}
             </SortableContext>
           </DndContext>
           <Button onClick={addThread} className="w-full" size="sm">
-            + Add Thread
+            + Add Post
           </Button>
         </div>
       ) : (
         <div className="sm:px-4 -mx-4 sm:mx-0">
-          <textarea
+          <Textarea
             value={posts[0].text}
             onChange={(e) => handleTextChange(0, e.target.value)}
             placeholder="What's happening?"
-            maxLength={280 * 10} // Allow for multiple tweets worth in single mode
-            className="w-full min-h-[150px] px-4 py-4 border-2 border-gray-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none shadow-[2px_2px_0_rgba(0,0,0,1)]"
+            className={`min-h-[320px] rounded-lg focus:ring-2 focus:ring-blue-500 ${
+              isConnected && posts[0].text.length > 280
+                ? "border-destructive"
+                : ""
+            }`}
           />
-          {/* Future image upload UI would go here */}
+          <div>
+            <div className="mt-2 flex justify-start">
+              <input
+                type="file"
+                accept="image/*,video/*"
+                onChange={handleSingleMediaUpload}
+                className="hidden"
+                id="media-upload-single"
+              />
+              <div className="flex items-center gap-2">
+                <Button
+                  onClick={handleMediaInputClick}
+                  size="sm"
+                  disabled={posts[0].mediaId !== null}
+                >
+                  Add Media
+                </Button>
+                {posts[0].mediaPreview && (
+                  <div className="relative">
+                    <img
+                      src={posts[0].mediaPreview}
+                      alt="Preview"
+                      className="h-10 w-10 object-cover rounded"
+                    />
+                    <Button
+                      onClick={handleSingleMediaRemove}
+                      size="sm"
+                      variant="destructive"
+                      className="absolute -top-2 -right-2 h-5 w-5 p-0 rounded-full"
+                    >
+                      ×
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
         </div>
       )}
 
       <div className="flex justify-between items-center gap-2">
-        <span className="text-sm text-gray-500">
+        <span
+          className={`text-sm ${
+            isConnected && !isThreadMode && posts[0].text.length > 280
+              ? "text-destructive"
+              : "text-gray-500"
+          }`}
+        >
           {isThreadMode
             ? `${posts.length} parts`
             : `${posts[0].text.length} characters`}
         </span>
         <div className="flex gap-2">
           <Button
-            onClick={() => saveDraft(posts)}
+            onClick={handleSaveDraft}
             disabled={posts.every((p) => !p.text.trim())}
           >
             Save Draft
           </Button>
           <Button
             onClick={handleSubmit}
-            disabled={posts.every((p) => !p.text.trim())}
+            disabled={
+              posts.every((p) => !p.text.trim()) ||
+              (isThreadMode && posts.some((p) => p.text.length > 280))
+            }
           >
             Post
           </Button>
         </div>
       </div>
 
-      {error && <p className="text-red-500 text-sm mt-2">{error}</p>}
-      <DraftsModal onSelect={setPosts} />
+      {isModalOpen && <DraftsModal onSelect={setPosts} />}
     </div>
   );
 }
diff --git a/src/components/connect-to-near.js b/src/components/connect-to-near.js
index b0063e0..3ddd511 100644
--- a/src/components/connect-to-near.js
+++ b/src/components/connect-to-near.js
@@ -32,7 +32,7 @@ export function ConnectToNearButton() {
   return (
     <Button onClick={signedAccountId ? handleSignOut : handleSignIn}>
       <Wallet size={18} />
-      {signedAccountId ? "Disconnect NEAR" : "Connect NEAR"}
+      {signedAccountId ? `Disconnect @${signedAccountId}` : "Connect NEAR"}
     </Button>
   );
 }
diff --git a/src/components/connect-to-twitter.js b/src/components/connect-to-twitter.js
index a8cd111..c4fe161 100644
--- a/src/components/connect-to-twitter.js
+++ b/src/components/connect-to-twitter.js
@@ -1,15 +1,28 @@
+import { Twitter } from "lucide-react";
 import { useCallback, useEffect } from "react";
 import { useTwitterConnection } from "../store/twitter-store";
-import { Twitter } from "lucide-react";
 import { Button } from "./ui/button";
+import { useToast } from "../hooks/use-toast";
 
 export function ConnectToTwitterButton() {
-  const { isConnected, isConnecting, connect, disconnect, checkConnection } =
+  const { isConnected, isConnecting, connect, disconnect, handle, error } =
     useTwitterConnection();
+  const { toast } = useToast();
+
+  // // Check connection status on mount
+  // useEffect(() => {
+  //   checkConnection();
+  // }, [checkConnection]);
 
   useEffect(() => {
-    checkConnection();
-  }, []); // Check connection when button loads
+    if (error) {
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: error,
+      });
+    }
+  }, [error, toast]);
 
   const handleClick = useCallback(() => {
     if (isConnected) {
@@ -20,12 +33,12 @@ export function ConnectToTwitterButton() {
   }, [isConnected, connect, disconnect]);
 
   return (
-    <Button onClick={handleClick} disabled={false}>
+    <Button onClick={handleClick}>
       <Twitter size={18} />
       {isConnecting
         ? "Connecting..."
         : isConnected
-          ? "Disconnect Twitter"
+          ? `Disconnect @${handle}`
           : "Connect Twitter"}
     </Button>
   );
diff --git a/src/components/drafts-modal.js b/src/components/drafts-modal.js
index d265f2a..a1c7b09 100644
--- a/src/components/drafts-modal.js
+++ b/src/components/drafts-modal.js
@@ -1,84 +1,98 @@
-import { motion, AnimatePresence } from "framer-motion";
+import { motion } from "framer-motion";
 import { useDraftsStore } from "../store/drafts-store";
 import { formatDistanceToNow } from "date-fns";
 import { Button } from "./ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "./ui/dialog";
+import { ModalWindowControls } from "./modal-window-controls";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 
 export function DraftsModal({ onSelect }) {
   const { drafts, isModalOpen, setModalOpen, deleteDraft } = useDraftsStore();
 
-  if (!isModalOpen) return null;
-
   return (
-    <AnimatePresence>
-      <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+    <Dialog open={isModalOpen} onOpenChange={setModalOpen}>
+      <DialogContent className="border-none bg-transparent p-0 shadow-none">
         <motion.div
-          initial={{ scale: 0.95, opacity: 0 }}
-          animate={{ scale: 1, opacity: 1 }}
-          exit={{ scale: 0.95, opacity: 0 }}
-          className="w-full max-w-2xl border-2 border-gray-800 bg-white shadow-[4px_4px_0_rgba(0,0,0,1)] p-6"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.2 }}
+          className="relative w-full max-w-2xl border-2 border-gray-800 bg-white shadow-[4px_4px_0_rgba(0,0,0,1)]"
         >
-          <div className="flex justify-between items-center mb-6">
-            <h2 className="text-2xl font-bold">Drafts</h2>
-            <Button
-              onClick={() => setModalOpen(false)}
-              variant="ghost"
-              size="sm"
-              className="text-gray-600 hover:text-gray-800"
-            >
-              ✕
-            </Button>
-          </div>
+          <ModalWindowControls onClose={() => setModalOpen(false)} />
+          <div className="p-6">
+            <DialogHeader>
+              <VisuallyHidden.Root>
+                <DialogTitle className="font-mono text-2xl font-bold">
+                  Drafts
+                </DialogTitle>
+                <DialogDescription className="text-gray-600">
+                  View and manage your saved draft posts
+                </DialogDescription>
+              </VisuallyHidden.Root>
+            </DialogHeader>
 
-          {drafts.length === 0 ? (
-            <p className="text-gray-600 text-center py-8">
-              No drafts saved yet
-            </p>
-          ) : (
-            <div className="space-y-4 max-h-[60vh] overflow-y-auto">
-              {drafts.map((draft) => (
-                <div
-                  key={draft.id}
-                  className="border-2 border-gray-800 p-4 shadow-[2px_2px_0_rgba(0,0,0,1)] hover:bg-gray-50"
-                >
-                  <div className="flex justify-between items-start mb-2">
-                    <span className="text-sm text-gray-600">
-                      {formatDistanceToNow(new Date(draft.createdAt), {
-                        addSuffix: true,
-                      })}
-                    </span>
-                    <div className="flex gap-2">
-                      <Button
-                        onClick={() => {
-                          onSelect(draft.posts);
-                          setModalOpen(false);
-                        }}
-                        size="sm"
-                      >
-                        Load
-                      </Button>
-                      <Button
-                        onClick={() => deleteDraft(draft.id)}
-                        variant="destructive"
-                        size="sm"
-                      >
-                        Delete
-                      </Button>
-                    </div>
-                  </div>
-                  <div className="text-sm text-gray-800">
-                    {draft.posts.map((post, i) => (
-                      <div key={i} className="mb-2">
-                        {post.text.substring(0, 100)}
-                        {post.text.length > 100 ? "..." : ""}
+            {drafts.length === 0 ? (
+              <p className="text-gray-600 text-center py-8">
+                No drafts saved yet
+              </p>
+            ) : (
+              <>
+                <p className="text-gray-600 mb-2">
+                  View and manage your saved draft posts
+                </p>
+                <div className="space-y-4 max-h-[60vh] overflow-y-auto">
+                  {drafts.map((draft) => (
+                    <div
+                      key={draft.id}
+                      className="border-2 border-gray-800 p-4 shadow-[2px_2px_0_rgba(0,0,0,1)] hover:bg-gray-50"
+                    >
+                      <div className="flex justify-between items-start mb-2">
+                        <span className="text-sm text-gray-600">
+                          {formatDistanceToNow(new Date(draft.createdAt), {
+                            addSuffix: true,
+                          })}
+                        </span>
+                        <div className="flex gap-2">
+                          <Button
+                            onClick={() => {
+                              onSelect(draft.posts);
+                              setModalOpen(false);
+                            }}
+                            size="sm"
+                          >
+                            Load
+                          </Button>
+                          <Button
+                            onClick={() => deleteDraft(draft.id)}
+                            variant="destructive"
+                            size="sm"
+                          >
+                            Delete
+                          </Button>
+                        </div>
                       </div>
-                    ))}
-                  </div>
+                      <div className="text-sm text-gray-800">
+                        {draft.posts.map((post, i) => (
+                          <div key={i} className="mb-2">
+                            {post.text.substring(0, 100)}
+                            {post.text.length > 100 ? "..." : ""}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
                 </div>
-              ))}
-            </div>
-          )}
+              </>
+            )}
+          </div>
         </motion.div>
-      </div>
-    </AnimatePresence>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/src/components/feature-request-modal.js b/src/components/feature-request-modal.js
new file mode 100644
index 0000000..a70d47b
--- /dev/null
+++ b/src/components/feature-request-modal.js
@@ -0,0 +1,234 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useToast } from "@/hooks/use-toast";
+import { motion } from "framer-motion";
+import { useState } from "react";
+import { usePostMedia } from "../hooks/use-post-media";
+import { ModalWindowControls } from "./modal-window-controls";
+import { Button } from "./ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
+import { Textarea } from "./ui/textarea";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+
+const PREPEND_TEXT = "@open_crosspost !submit";
+
+export function RequestFeatureButton({ post }) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleSubmit = async ({ text, mediaId }) => {
+    try {
+      await post([{ text, mediaId }]);
+      setIsModalOpen(false);
+    } catch (err) {
+      console.error("Failed to post feature request:", err);
+      throw err; // Let the modal handle the error
+    }
+  };
+
+  return (
+    <>
+      <Button onClick={() => setIsModalOpen(true)} size="sm">
+        Request Feature
+      </Button>
+
+      <FeatureRequestModal
+        isOpen={isModalOpen}
+        onOpenChange={setIsModalOpen}
+        onSubmit={handleSubmit}
+      />
+    </>
+  );
+}
+
+export function FeatureRequestModal({ isOpen, onOpenChange, onSubmit }) {
+  const { toast } = useToast();
+  const [type, setType] = useState("feature");
+  const [text, setText] = useState("");
+  const [posts, setPosts] = useState([
+    { text: "", mediaId: null, mediaPreview: null },
+  ]);
+
+  const { handleMediaUpload, removeMedia } = usePostMedia(
+    setPosts,
+    toast,
+    () => {}, // no-op for saveAutoSave since we don't need it
+  );
+
+  const getPrefix = (type) => `${PREPEND_TEXT} #${type} `;
+
+  const handleTextChange = (value) => {
+    setText(value);
+  };
+
+  const getFullText = () => {
+    return getPrefix(type) + text;
+  };
+
+  const getRemainingChars = () => {
+    const prefixLength = getPrefix(type).length;
+    return 280 - prefixLength - text.length;
+  };
+
+  const handleSubmit = async () => {
+    if (!text.trim()) {
+      toast({
+        title: "Empty Request",
+        description: "Please enter your request details",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    try {
+      await onSubmit({
+        text: getFullText().trim(),
+        mediaId: posts[0]?.mediaId,
+      });
+      setText("");
+      setPosts([{ text: "", mediaId: null, mediaPreview: null }]);
+      onOpenChange(false);
+      toast({
+        title: "Request Submitted",
+        description: "Your feature request has been posted.",
+      });
+    } catch (err) {
+      console.error("Submit error:", err);
+      toast({
+        title: "Error",
+        description: "Failed to submit feature request",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleMediaInputClick = () => {
+    document.getElementById("feature-request-media").click();
+  };
+
+  const handleMediaUploadChange = (e) => {
+    handleMediaUpload(0, e.target.files[0]);
+  };
+
+  const handleMediaRemove = () => {
+    removeMedia(0);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="border-none bg-transparent p-0 shadow-none">
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.2 }}
+          className="relative w-full max-w-2xl border-2 border-gray-800 bg-white shadow-[4px_4px_0_rgba(0,0,0,1)]"
+        >
+          <ModalWindowControls onClose={() => onOpenChange(false)} />
+          <div className="p-6">
+            <DialogHeader className="mb-4">
+              <VisuallyHidden.Root>
+                <DialogTitle className="font-mono text-2xl font-bold">
+                  Request Feature
+                </DialogTitle>
+              </VisuallyHidden.Root>
+              <DialogDescription className="text-gray-600">
+                Submit a feature request or report a bug
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-4">
+              <Select value={type} onValueChange={setType}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="feature">Feature Request</SelectItem>
+                  <SelectItem value="bug">Bug Report</SelectItem>
+                </SelectContent>
+              </Select>
+
+              <div className="space-y-2">
+                <div className="text-sm text-gray-500">
+                  Will be posted as:{" "}
+                  <span className="font-mono">{getPrefix(type)}</span>
+                </div>
+                <Textarea
+                  value={text}
+                  onChange={(e) => handleTextChange(e.target.value)}
+                  placeholder="Describe your feature request or bug report..."
+                  className={`min-h-[200px] rounded-lg focus:ring-2 focus:ring-blue-500 ${
+                    getRemainingChars() < 0 ? "border-destructive" : ""
+                  }`}
+                />
+              </div>
+
+              <div>
+                <input
+                  type="file"
+                  accept="image/*,video/*"
+                  onChange={handleMediaUploadChange}
+                  className="hidden"
+                  id="feature-request-media"
+                />
+                <div className="flex items-center gap-2">
+                  <Button
+                    onClick={handleMediaInputClick}
+                    size="sm"
+                    disabled={posts[0].mediaId !== null}
+                  >
+                    Add Media
+                  </Button>
+                  {posts[0].mediaPreview && (
+                    <div className="relative">
+                      <img
+                        src={posts[0].mediaPreview}
+                        alt="Preview"
+                        className="h-10 w-10 object-cover rounded"
+                      />
+                      <Button
+                        onClick={handleMediaRemove}
+                        size="sm"
+                        variant="destructive"
+                        className="absolute -top-2 -right-2 h-5 w-5 p-0 rounded-full"
+                      >
+                        ×
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <div className="flex justify-between items-center">
+                <span
+                  className={`text-sm ${
+                    getRemainingChars() < 0
+                      ? "text-destructive"
+                      : "text-gray-500"
+                  }`}
+                >
+                  {getRemainingChars()} characters remaining
+                </span>
+                <Button
+                  onClick={handleSubmit}
+                  disabled={!text.trim() || getRemainingChars() < 0}
+                >
+                  Submit
+                </Button>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/footer.js b/src/components/footer.js
index 2af782a..72823f1 100644
--- a/src/components/footer.js
+++ b/src/components/footer.js
@@ -1,9 +1,22 @@
 import Image from "next/image";
+import { Button } from "./ui/button";
 
 export function Footer() {
   return (
-    <footer className="flex justify-end m-2 sm:m-4 font-mono text-gray-500 text-xs sm:text-sm">
-      <div className="flex flex-wrap items-center gap-1 sm:gap-2">
+    <footer className="flex justify-between m-2 sm:m-4 font-mono text-gray-500 text-xs sm:text-sm">
+      <div className="flex gap-2">
+        <Button asChild>
+          <a
+            href="https://app.potlock.org/?tab=project&projectId=crosspost.near"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            donate ❤️
+          </a>
+        </Button>
+        <Button disabled>buy $XPOST</Button>
+      </div>
+      <div className="flex flex-wrap items-center justify-end gap-1 sm:gap-2">
         <div className="flex items-center gap-1 sm:gap-2">
           <span>a part of</span>
           <a
diff --git a/src/components/helper-buddy.js b/src/components/helper-buddy.js
new file mode 100644
index 0000000..bfbedb4
--- /dev/null
+++ b/src/components/helper-buddy.js
@@ -0,0 +1,68 @@
+import { useEffect, useState } from "react";
+import { DndContext, useDraggable } from "@dnd-kit/core";
+import { ProfileHighlight } from "./social/profile-highlight";
+
+function DraggableProfileHighlight({ position }) {
+  const { attributes, listeners, setNodeRef, transform } = useDraggable({
+    id: "profile-highlight",
+  });
+
+  const helperAccount = "davidmo.near";
+  const helperContent = '"NEAR is the blockchain for AI!"';
+
+  const style = transform
+    ? {
+        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+      }
+    : undefined;
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        position: "fixed",
+        left: `${position.x}px`,
+        top: `${position.y}px`,
+        zIndex: 50,
+        cursor: "grab",
+        touchAction: "none",
+        ...style,
+      }}
+      {...listeners}
+      {...attributes}
+    >
+      <ProfileHighlight
+        accountId={helperAccount}
+        tooltipContent={helperContent}
+        size={64}
+      />
+    </div>
+  );
+}
+
+export function HelperBuddy() {
+  const [position, setPosition] = useState({ x: 16, y: 16 });
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setPosition({
+        x: 16,
+        y: window.innerHeight - 48 - 48,
+      });
+    }
+  }, []);
+
+  const handleDragEnd = (event) => {
+    const { delta } = event;
+    setPosition((prev) => ({
+      x: prev.x + delta.x,
+      y: prev.y + delta.y,
+    }));
+  };
+
+  return (
+    <DndContext onDragEnd={handleDragEnd}>
+      <DraggableProfileHighlight position={position} />
+    </DndContext>
+  );
+}
diff --git a/src/components/social/avatar.js b/src/components/social/avatar.js
new file mode 100644
index 0000000..e66e765
--- /dev/null
+++ b/src/components/social/avatar.js
@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import { getProfile, getImageUrl } from "@/lib/near-social";
+
+const fallbackUrl =
+  "https://ipfs.near.social/ipfs/bafkreibmiy4ozblcgv3fm3gc6q62s55em33vconbavfd2ekkuliznaq3zm";
+
+export const Avatar = ({ url, accountId, size = 48 }) => {
+  const [profileUrl, setProfileUrl] = useState(url);
+  const [profileName, setProfileName] = useState(accountId);
+
+  useEffect(() => {
+    if (!url && accountId) {
+      getProfile(accountId)
+        .then((profile) => {
+          const imageUrl = getImageUrl(profile?.image);
+          if (imageUrl) {
+            setProfileUrl(imageUrl);
+          }
+          if (profile?.name) {
+            setProfileName(profile.name);
+          }
+        })
+        .catch((error) => {
+          console.error("Error fetching profile:", error);
+        });
+    }
+  }, [url, accountId]);
+
+  return (
+    <Image
+      src={profileUrl ?? fallbackUrl}
+      alt={profileName}
+      width={size}
+      height={size}
+      className="rounded-full object-cover base-component"
+    />
+  );
+};
diff --git a/src/components/social/profile-highlight.js b/src/components/social/profile-highlight.js
new file mode 100644
index 0000000..a5cac10
--- /dev/null
+++ b/src/components/social/profile-highlight.js
@@ -0,0 +1,60 @@
+import { getImageUrl, getProfile } from "@/lib/near-social";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip";
+import { Avatar } from "./avatar";
+
+export function ProfileHighlight({ accountId, tooltipContent, size = 64 }) {
+  const router = useRouter();
+  const [profileUrl, setProfileUrl] = useState(null);
+
+  // Preload profile data
+  useEffect(() => {
+    if (accountId) {
+      getProfile(accountId)
+        .then((profile) => {
+          const imageUrl = getImageUrl(profile?.image);
+          if (imageUrl) {
+            setProfileUrl(imageUrl);
+          }
+        })
+        .catch((error) => {
+          console.error("Error fetching profile:", error);
+        });
+    }
+  }, [accountId]);
+
+  return (
+    <div className={"relative"}>
+      <TooltipProvider>
+        <Tooltip open>
+          <TooltipTrigger asChild>
+            <div
+              className="cursor-pointer flex-shrink-0"
+              onClick={() => router.push(`/profile/${accountId}`)}
+            >
+              <Avatar
+                accountId={accountId}
+                size={size}
+                url={profileUrl}
+                className="hover:opacity-80 transition-opacity"
+              />
+            </div>
+          </TooltipTrigger>
+          <TooltipContent
+            side="top"
+            align="start"
+            className="font-bold px-3 py-2 rounded-xl base-component animate-bounce"
+          >
+            {tooltipContent}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+  );
+}
diff --git a/src/components/social/profile.js b/src/components/social/profile.js
new file mode 100644
index 0000000..1ee3b31
--- /dev/null
+++ b/src/components/social/profile.js
@@ -0,0 +1,31 @@
+import { Avatar } from "./avatar";
+import ReactMarkdown from "react-markdown";
+import { getImageUrl } from "../../lib/near-social";
+
+export const ProfileView = ({ profile }) => (
+  <div className="mb-4 bg-white p-4">
+    <div
+      className="h-40 rounded-t-lg bg-cover bg-center"
+      style={{
+        backgroundImage: profile.backgroundImage
+          ? `url(${getImageUrl(profile.backgroundImage)})`
+          : undefined,
+      }}
+    ></div>
+    <div className="-mt-12 ml-4 flex items-center">
+      <Avatar
+        url={getImageUrl(profile.image)}
+        alt={profile.name || "Profile"}
+        size={128}
+      />
+    </div>
+    <div className="mt-4">
+      <h2 className="text-purple text-2xl font-bold">
+        {profile.name || "Anonymous"}
+      </h2>
+      <div className="mt-2 text-gray-600 prose prose-sm max-w-none">
+        <ReactMarkdown>{profile.description || ""}</ReactMarkdown>
+      </div>
+    </div>
+  </div>
+);
diff --git a/src/components/sortable-post.js b/src/components/sortable-post.js
new file mode 100644
index 0000000..c8c9e35
--- /dev/null
+++ b/src/components/sortable-post.js
@@ -0,0 +1,140 @@
+import { memo } from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Button } from "./ui/button";
+import { Textarea } from "./ui/textarea";
+
+function SortablePostComponent({
+  post,
+  index,
+  onTextChange,
+  onRemove,
+  onMediaUpload,
+  onMediaRemove,
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: `post-${index}` });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="flex gap-2 sm:px-4 -mx-4 sm:mx-0"
+    >
+      <div className="flex-none w-8">
+        <div
+          {...attributes}
+          {...listeners}
+          className="sticky top-0 h-[150px] w-8 flex items-center justify-center cursor-grab bg-gray-50 rounded-lg base-component"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <circle cx="9" cy="5" r="1" />
+            <circle cx="9" cy="12" r="1" />
+            <circle cx="9" cy="19" r="1" />
+            <circle cx="15" cy="5" r="1" />
+            <circle cx="15" cy="12" r="1" />
+            <circle cx="15" cy="19" r="1" />
+          </svg>
+        </div>
+      </div>
+      <div className="flex-1">
+        <Textarea
+          value={post.text}
+          onChange={(e) => onTextChange(index, e.target.value)}
+          placeholder={`Thread part ${index + 1}`}
+          className={`min-h-[150px] rounded-lg resize-none focus:ring-2 focus:ring-blue-500 ${
+            post.text.length > 280 ? "border-destructive" : ""
+          }`}
+        />
+        <div className="flex flex-col gap-2 mt-2">
+          <div className="flex justify-between items-center">
+            <div className="flex flex-row gap-2">
+              <input
+                type="file"
+                accept="image/*,video/*"
+                onChange={(e) => onMediaUpload(index, e.target.files[0])}
+                className="hidden"
+                id={`media-upload-${index}`}
+              />
+              <Button
+                onClick={() =>
+                  document.getElementById(`media-upload-${index}`).click()
+                }
+                size="sm"
+                disabled={post.mediaId !== null}
+              >
+                Add Media
+              </Button>
+              {post.mediaPreview && (
+                <>
+                  <div className="relative">
+                    <img
+                      src={post.mediaPreview}
+                      alt="Preview"
+                      className="h-10 w-10 object-cover rounded"
+                    />
+                    <Button
+                      onClick={() => onMediaRemove(index)}
+                      size="sm"
+                      variant="destructive"
+                      className="absolute -top-2 -right-2 h-5 w-5 p-0 rounded-full"
+                    >
+                      ×
+                    </Button>
+                  </div>
+                </>
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              <span
+                className={`text-sm ${post.text.length > 280 ? "text-destructive" : "text-gray-500"}`}
+              >
+                {post.text.length}/280 characters
+              </span>
+              <Button
+                onClick={() => onTextChange(index, "")}
+                // variant="destructive"
+                size="sm"
+              >
+                Clear
+              </Button>
+              {onRemove && (
+                <Button
+                  onClick={() => onRemove(index)}
+                  variant="destructive"
+                  size="sm"
+                >
+                  Remove
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const SortablePost = memo(SortablePostComponent);
diff --git a/src/components/twitter-api-notice.js b/src/components/twitter-api-notice.js
index 458d05b..388bff0 100644
--- a/src/components/twitter-api-notice.js
+++ b/src/components/twitter-api-notice.js
@@ -1,70 +1,107 @@
-import { useEffect, useState } from "react";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import { motion } from "framer-motion";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} from "./ui/dialog";
-import { Button } from "./ui/button";
+import { useEffect, useState } from "react";
+import ReactConfetti from "react-confetti";
+import { useTwitterConnection } from "../store/twitter-store";
 import { ModalWindowControls } from "./modal-window-controls";
-import { format } from "date-fns";
+import { ProfileHighlight } from "./social/profile-highlight";
+import { Button } from "./ui/button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";
 
-export function TwitterApiNotice() {
+export function TwitterApiNotice({ post }) {
+  const NOTICE_SHOWN_KEY = "twitter_api_notice_shown";
   const [open, setOpen] = useState(false);
+  const [showConfetti, setShowConfetti] = useState(true);
+  const { isConnected } = useTwitterConnection();
 
   useEffect(() => {
-    const timer = setTimeout(() => {
-      setOpen(true);
-    }, 800);
+    if (typeof window === "undefined") return;
+
+    const hasShown = localStorage.getItem(NOTICE_SHOWN_KEY) === "true";
+    if (isConnected && !hasShown) {
+      const timer = setTimeout(() => {
+        setOpen(true);
+        localStorage.setItem(NOTICE_SHOWN_KEY, "true");
+      }, 800);
 
-    return () => clearTimeout(timer);
-  }, []);
+      return () => clearTimeout(timer);
+    }
+  }, [isConnected]);
+
+  const handleThanks = () => {
+    post([
+      {
+        text: "thanks @David___Mo! we love you for saving @open_crosspost 🚀✨💖🎉",
+      },
+    ]);
+    setOpen(false);
+  };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogContent className="border-none bg-transparent p-0 shadow-none">
-        <motion.div
-          initial={{ opacity: 0, x: 0 }}
-          animate={{
-            opacity: 1,
-            x: [0, -10, 10, -5, 5, 0],
-            transition: {
-              opacity: { duration: 0.1 },
-              x: { duration: 0.5, times: [0, 0.2, 0.4, 0.6, 0.8, 1] },
-            },
-          }}
-          className="relative border-2 border-gray-800 bg-white shadow-[4px_4px_0_rgba(0,0,0,1)]"
-        >
-          <ModalWindowControls onClose={() => setOpen(false)} />
-          <div className="p-6">
-            <DialogHeader className="text-left">
-              <DialogTitle className="font-mono text-xl font-semibold">
-                We&apos;ve been ratelimited.
-              </DialogTitle>
-              <DialogDescription className="text-gray-600">
-                We exceeded our ration of 17 tweets per 24 hours... so while we
-                wait until{" "}
-                {format(new Date(1736524953 * 1000), "h:mm a 'on' MMM d, yyyy")}
-                , we&apos;re raising funds to pay the absurd $200/month API fee.
-              </DialogDescription>
-              <div className="pt-2 flex gap-4">
-                <Button asChild>
-                  <a
-                    href="https://app.potlock.org/?tab=project&projectId=crosspost.near"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    please donate
-                  </a>
-                </Button>
-                <Button disabled>buy $XPOST</Button>
+    <>
+      {showConfetti && open && (
+        <div className="fixed inset-0 z-50 pointer-events-none">
+          <ReactConfetti
+            width={window.innerWidth}
+            height={window.innerHeight}
+            recycle={false}
+            numberOfPieces={200}
+            onConfettiComplete={() => setShowConfetti(false)}
+          />
+        </div>
+      )}
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="border-none bg-transparent p-0 shadow-none">
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{
+              opacity: 1,
+              x: [0, -10, 10, -5, 5, 0],
+              transition: {
+                opacity: { duration: 0.1 },
+                x: { duration: 0.5, times: [0, 0.2, 0.4, 0.6, 0.8, 1] },
+              },
+            }}
+            className="relative w-full max-w-2xl base-component"
+          >
+            <ModalWindowControls onClose={() => setOpen(false)} />
+            <div className="p-6 relative">
+              <div className="flex gap-6">
+                <div className="mt-4">
+                  <ProfileHighlight
+                    accountId="davidmo.near"
+                    tooltipContent='"NEAR is the blockchain for AI!"'
+                    size={128}
+                  />
+                </div>
+
+                <div className="flex-grow space-y-4">
+                  <DialogHeader>
+                    <VisuallyHidden.Root>
+                      <DialogTitle className="font-mono text-2xl font-bold">
+                        We&apos;re back in business!
+                      </DialogTitle>
+                    </VisuallyHidden.Root>
+                  </DialogHeader>
+
+                  <DialogTitle className="text-2xl font-bold">
+                    We&apos;re back in business!
+                  </DialogTitle>
+
+                  <p className="text-gray-600">
+                    The incredible David Morrison (davidmo.near) donated 40N to
+                    pay the month of January&apos;s API fee! 🎉
+                  </p>
+
+                  <div className="flex justify-end">
+                    <Button onClick={handleThanks}>say thanks!</Button>
+                  </div>
+                </div>
               </div>
-            </DialogHeader>
-          </div>
-        </motion.div>
-      </DialogContent>
-    </Dialog>
+            </div>
+          </motion.div>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }
diff --git a/src/components/ui/button.jsx b/src/components/ui/button.jsx
index 2929f62..9a05cb3 100644
--- a/src/components/ui/button.jsx
+++ b/src/components/ui/button.jsx
@@ -5,18 +5,20 @@ import { cva } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-2 border-gray-800 hover:bg-gray-100 shadow-[2px_2px_0_rgba(0,0,0,1)]",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 base-component hover:shadow-[1px_1px_0_rgba(0,0,0,1)] hover:translate-y-0.5 ",
   {
     variants: {
       variant: {
-        default: "bg-white",
+        default:
+          "bg-white text-primary border-2 border-primary hover:bg-secondary/90",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "bg-white",
-        secondary: "bg-white",
-        ghost:
-          "border-0 shadow-none hover:bg-accent hover:text-accent-foreground",
-        link: "border-0 shadow-none text-primary underline-offset-4 hover:underline",
+        outline:
+          "border-2 border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
         default: "h-9 px-4 py-2",
diff --git a/src/components/ui/dialog.jsx b/src/components/ui/dialog.jsx
index eb2fb2a..78d253d 100644
--- a/src/components/ui/dialog.jsx
+++ b/src/components/ui/dialog.jsx
@@ -31,7 +31,7 @@ const DialogContent = React.forwardRef(
       <DialogPrimitive.Content
         ref={ref}
         className={cn(
-          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border-2 border-gray-800 bg-white p-6 shadow-[4px_4px_0_rgba(0,0,0,1)] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 p-6 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg base-component",
           className,
         )}
         {...props}
diff --git a/src/components/ui/select.jsx b/src/components/ui/select.jsx
new file mode 100644
index 0000000..8634aff
--- /dev/null
+++ b/src/components/ui/select.jsx
@@ -0,0 +1,146 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef(
+  ({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md base-component bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDown className="h-4 w-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  ),
+);
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef(
+  ({ className, ...props }, ref) => (
+    <SelectPrimitive.ScrollUpButton
+      ref={ref}
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUp className="h-4 w-4" />
+    </SelectPrimitive.ScrollUpButton>
+  ),
+);
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef(
+  ({ className, ...props }, ref) => (
+    <SelectPrimitive.ScrollDownButton
+      ref={ref}
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDown className="h-4 w-4" />
+    </SelectPrimitive.ScrollDownButton>
+  ),
+);
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef(
+  ({ className, children, position = "popper", ...props }, ref) => (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={ref}
+        className={cn(
+          "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md base-component bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className,
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  ),
+);
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef(
+  ({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Item
+      ref={ref}
+      className={cn(
+        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <Check className="h-4 w-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  ),
+);
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};
diff --git a/src/components/ui/textarea.jsx b/src/components/ui/textarea.jsx
new file mode 100644
index 0000000..893294d
--- /dev/null
+++ b/src/components/ui/textarea.jsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Textarea = React.forwardRef(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[60px] w-full rounded-md px-4 py-4 text-base placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm base-component",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };
diff --git a/src/components/ui/toast.jsx b/src/components/ui/toast.jsx
new file mode 100644
index 0000000..41e9d9b
--- /dev/null
+++ b/src/components/ui/toast.jsx
@@ -0,0 +1,102 @@
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 gap-2 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className,
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full flex-col overflow-hidden rounded-md p-4 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full base-component",
+  {
+    variants: {
+      variant: {
+        default: "bg-white text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Toast = React.forwardRef(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center px-3 text-sm font-medium transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:bg-destructive group-[.destructive]:text-destructive-foreground base-component base-component-hover",
+      className,
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-1 top-1 inline-flex h-6 w-6 items-center justify-center rounded-md text-black transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50 base-component base-component-hover",
+      className,
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold mb-1", className)}
+    {...props}
+  />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90 break-words", className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+export {
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};
diff --git a/src/components/ui/toaster.jsx b/src/components/ui/toaster.jsx
new file mode 100644
index 0000000..5887f08
--- /dev/null
+++ b/src/components/ui/toaster.jsx
@@ -0,0 +1,33 @@
+import { useToast } from "@/hooks/use-toast";
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast";
+
+export function Toaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}
diff --git a/src/components/ui/tooltip.jsx b/src/components/ui/tooltip.jsx
new file mode 100644
index 0000000..e926fef
--- /dev/null
+++ b/src/components/ui/tooltip.jsx
@@ -0,0 +1,30 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef(
+  ({ className, sideOffset = 4, ...props }, ref) => (
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      delayduration={100}
+      className={cn(
+        "z-50 overflow-hidden rounded-lg border-2 border-gray-800 bg-white px-3 py-1.5 text-sm text-gray-800 shadow-[2px_2px_0_rgba(0,0,0,1)]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
diff --git a/src/components/window-container.js b/src/components/window-container.js
index 845d687..1deb3db 100644
--- a/src/components/window-container.js
+++ b/src/components/window-container.js
@@ -5,13 +5,13 @@ import { PenSquare } from "lucide-react";
 import { useContext } from "react";
 import { ConnectToNearButton } from "./connect-to-near";
 import { ConnectToTwitterButton } from "./connect-to-twitter";
+import Link from "next/link";
 
 export const WindowControls = () => {
   // const [isOpen, setIsOpen] = useState(false);
   // const router = useRouter();
   // const { accountId, signOut } = useNearSocialStore();
   const { signedAccountId } = useContext(NearContext);
-  const { isConnected, handle } = useTwitterConnection();
 
   // const menuItems = [
   //   { label: "Home", path: "/" },
@@ -20,23 +20,17 @@ export const WindowControls = () => {
   return (
     <div className="relative border-b-2 border-gray-800 p-6">
       <div className="flex flex-col items-center space-y-4 sm:flex-row sm:justify-between sm:space-y-0">
-        <div className="flex items-center gap-2">
-          <PenSquare size={24} />
-          <h1 className="text-3xl font-bold">crosspost</h1>
-        </div>
+        <Link href="/">
+          <div className="flex items-center gap-2">
+            <PenSquare size={24} />
+            <h1 className="text-3xl font-bold">crosspost</h1>
+          </div>
+        </Link>
         <div className="flex flex-col items-center gap-4 sm:flex-row">
           <ConnectToNearButton />
           {signedAccountId && <ConnectToTwitterButton />}
         </div>
       </div>
-      {signedAccountId && (
-        <div className="mt-4 space-y-1 text-center sm:text-left">
-          <p className="text-sm text-gray-600">NEAR: {signedAccountId}</p>
-          {isConnected && handle && (
-            <p className="text-sm text-gray-600">Twitter: @{handle}</p>
-          )}
-        </div>
-      )}
       {/* <div className="flex items-center justify-end">
         <div
           className="mx-4 my-3 h-4 w-4 cursor-pointer rounded-full bg-black transition-opacity hover:opacity-80"
@@ -92,7 +86,7 @@ export function WindowContainer({ children }) {
         className="mx-1 sm:mx-auto min-h-[790px] max-w-4xl border-2 border-gray-800 bg-white shadow-[4px_4px_0_rgba(0,0,0,1)]"
       >
         <WindowControls />
-        <div className="sm:p-8 p-2">{children}</div>
+        <div className="md:p-8 p-2">{children}</div>
       </motion.div>
     </div>
   );
diff --git a/src/hooks/use-post-management.js b/src/hooks/use-post-management.js
new file mode 100644
index 0000000..8711d1c
--- /dev/null
+++ b/src/hooks/use-post-management.js
@@ -0,0 +1,170 @@
+import { useCallback, useMemo } from "react";
+import { debounce } from "lodash";
+
+const IMAGE_PLACEHOLDER = "[IMAGE]";
+
+export function usePostManagement(posts, setPosts, saveAutoSave) {
+  // Memoized function to get combined text for single post mode
+  const getCombinedText = useMemo(() => {
+    return posts
+      .map((p, i) => {
+        let text = p.text;
+        // Only add [IMAGE] placeholder if post has media and it's not already there
+        if (p.mediaId && i > 0 && !text.includes(IMAGE_PLACEHOLDER)) {
+          text = `${IMAGE_PLACEHOLDER}\n${text}`;
+        }
+        return text;
+      })
+      .filter((t) => t !== null && t !== undefined && t !== "")
+      .join("\n---\n")
+      .trim(); // Used when converting from thread mode to single mode
+  }, [posts]);
+
+  // Split text into posts while properly handling [IMAGE] placeholders
+  const splitTextIntoPosts = useCallback(
+    (combinedText) => {
+      // Split on "---" when it's on its own line
+      const parts = combinedText
+        .split(/\n---\n/)
+        .map((t) => t.trim()) // Trim each part to remove extra newlines
+        .filter((t) => t);
+
+      // Create new posts array
+      const newPosts = parts.map((text, index) => {
+        // Check if text contains [IMAGE] placeholder exactly
+        const hasImagePlaceholder = text.includes(IMAGE_PLACEHOLDER);
+
+        // Clean the text by removing the exact [IMAGE] placeholder and any following newline
+        const cleanText = hasImagePlaceholder
+          ? text
+              .replace(`${IMAGE_PLACEHOLDER}\n`, "")
+              .replace(IMAGE_PLACEHOLDER, "")
+              .trim()
+          : text;
+
+        // Always preserve media from original posts if available
+        if (index < posts.length) {
+          return {
+            text: cleanText,
+            mediaId: posts[index].mediaId,
+            mediaPreview: posts[index].mediaPreview,
+          };
+        }
+
+        return { text: cleanText, mediaId: null, mediaPreview: null };
+      });
+
+      // If we have fewer parts than original posts, preserve remaining posts' media
+      if (parts.length < posts.length) {
+        for (let i = parts.length; i < posts.length; i++) {
+          if (posts[i].mediaId) {
+            newPosts.push({
+              text: "",
+              mediaId: posts[i].mediaId,
+              mediaPreview: posts[i].mediaPreview,
+            });
+          }
+        }
+      }
+
+      return newPosts.length > 0
+        ? newPosts
+        : [{ text: "", mediaId: null, mediaPreview: null }];
+    },
+    [posts],
+  );
+
+  // Debounced autosave function
+  const debouncedAutoSave = useMemo(
+    () =>
+      debounce((posts) => {
+        saveAutoSave(posts);
+      }, 1000),
+    [saveAutoSave],
+  );
+
+  // Handle text changes
+  const handleTextChange = useCallback(
+    (index, value) => {
+      setPosts((currentPosts) => {
+        const newPosts = [...currentPosts];
+        newPosts[index] = { ...newPosts[index], text: value };
+        debouncedAutoSave(newPosts);
+        return newPosts;
+      });
+    },
+    [setPosts, debouncedAutoSave],
+  );
+
+  // Convert between modes
+  const convertToThread = useCallback(
+    (singleText) => {
+      // Only split if there's a "---" surrounded by newlines
+      if (singleText.includes("\n---\n")) {
+        const newPosts = splitTextIntoPosts(singleText);
+        setPosts(newPosts);
+      } else {
+        // If no splits, preserve the current post with its media preview and ID
+        setPosts([
+          {
+            ...posts[0],
+            mediaPreview: posts[0].mediaPreview,
+            mediaId: posts[0].mediaId,
+          },
+        ]);
+      }
+    },
+    [splitTextIntoPosts, setPosts, posts],
+  );
+
+  const convertToSingle = useCallback(() => {
+    // Preserve media preview and ID from the first post
+    const firstPost = posts[0];
+    const newPost = {
+      text: getCombinedText,
+      mediaId: firstPost.mediaId,
+      mediaPreview: firstPost.mediaPreview,
+    };
+    setPosts([newPost]);
+    debouncedAutoSave([newPost]);
+  }, [getCombinedText, posts, setPosts, debouncedAutoSave]);
+
+  // Thread management functions
+  const addThread = useCallback(() => {
+    setPosts((currentPosts) => {
+      const newPosts = [
+        ...currentPosts,
+        { text: "", mediaId: null, mediaPreview: null },
+      ];
+      debouncedAutoSave(newPosts);
+      return newPosts;
+    });
+  }, [setPosts, debouncedAutoSave]);
+
+  const removeThread = useCallback(
+    (index) => {
+      setPosts((currentPosts) => {
+        if (currentPosts.length <= 1) return currentPosts;
+        const newPosts = currentPosts.filter((_, i) => i !== index);
+        debouncedAutoSave(newPosts);
+        return newPosts;
+      });
+    },
+    [setPosts, debouncedAutoSave],
+  );
+
+  // Cleanup function
+  const cleanup = useCallback(() => {
+    debouncedAutoSave.cancel();
+  }, [debouncedAutoSave]);
+
+  return {
+    handleTextChange,
+    addThread,
+    removeThread,
+    cleanup,
+    convertToThread,
+    convertToSingle,
+    getCombinedText,
+  };
+}
diff --git a/src/hooks/use-post-media.js b/src/hooks/use-post-media.js
new file mode 100644
index 0000000..8526c49
--- /dev/null
+++ b/src/hooks/use-post-media.js
@@ -0,0 +1,86 @@
+import { useCallback } from "react";
+
+export function usePostMedia(setPosts, setError, saveAutoSave) {
+  const handleMediaUpload = useCallback(
+    async (index, file) => {
+      if (!file) return;
+
+      // Create preview URL
+      const previewUrl = URL.createObjectURL(file);
+
+      setPosts((posts) => {
+        const newPosts = [...posts];
+        newPosts[index] = {
+          ...newPosts[index],
+          mediaPreview: previewUrl,
+        };
+        return newPosts;
+      });
+
+      // Upload to Twitter
+      try {
+        const formData = new FormData();
+        formData.append("media", file);
+
+        const response = await fetch("/api/twitter/upload", {
+          method: "POST",
+          body: formData,
+        });
+
+        const data = await response.json();
+        if (!response.ok) {
+          throw new Error(data.error || "Upload failed");
+        }
+
+        const { mediaId } = data;
+
+        setPosts((posts) => {
+          const newPosts = [...posts];
+          newPosts[index] = {
+            ...newPosts[index],
+            mediaId,
+          };
+          saveAutoSave(newPosts);
+          return newPosts;
+        });
+      } catch (error) {
+        console.error("Media upload error:", error);
+        setError({
+          title: "Media Upload Failed",
+          description: error.message || "Failed to upload media",
+          variant: "destructive",
+        });
+
+        // Remove preview on error
+        setPosts((posts) => {
+          const newPosts = [...posts];
+          newPosts[index] = {
+            ...newPosts[index],
+            mediaPreview: null,
+            mediaId: null,
+          };
+          return newPosts;
+        });
+      }
+    },
+    [setPosts, setError, saveAutoSave],
+  );
+
+  const removeMedia = useCallback(
+    (index) => {
+      setPosts((posts) => {
+        const newPosts = [...posts];
+        newPosts[index] = {
+          ...newPosts[index],
+          mediaId: null,
+          mediaPreview: null,
+        };
+        saveAutoSave(newPosts);
+        return newPosts;
+      });
+    },
+    [setPosts, saveAutoSave],
+  );
+
+  return { handleMediaUpload, removeMedia };
+}
diff --git a/src/hooks/use-toast.js b/src/hooks/use-toast.js
new file mode 100644
index 0000000..e5c8f5f
--- /dev/null
+++ b/src/hooks/use-toast.js
@@ -0,0 +1,155 @@
+"use client";
+// Inspired by react-hot-toast library
+import * as React from "react";
+
+const TOAST_LIMIT = 3;
+const TOAST_REMOVE_DELAY = 15000;
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+};
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+const toastTimeouts = new Map();
+
+const addToRemoveQueue = (toastId) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state, action) => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      };
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners = [];
+
+let memoryState = { toasts: [] };
+
+function dispatch(action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+function toast({ ...props }) {
+  const id = genId();
+
+  const update = (props) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  };
+}
+
+export { useToast, toast };
diff --git a/src/lib/near-social.js b/src/lib/near-social.js
index 6d1d0df..6a514f2 100644
--- a/src/lib/near-social.js
+++ b/src/lib/near-social.js
@@ -1,4 +1,31 @@
+import { NETWORK_ID } from "@/config";
+import { Social } from "@builddao/near-social-js";
+
 export const SOCIAL_CONTRACT = {
   mainnet: "social.near",
   testnet: "v1.social08.testnet",
 };
+
+export const NearSocialClient = new Social({
+  contractId: SOCIAL_CONTRACT[NETWORK_ID],
+  network: NETWORK_ID,
+});
+
+export const getImageUrl = (image) => {
+  if (!image) return "";
+  if (image.url) return image.url;
+  if (image.ipfs_cid) return `https://ipfs.near.social/ipfs/${image.ipfs_cid}`;
+  return "";
+};
+
+export async function getProfile(accountId) {
+  const response = await NearSocialClient.get({
+    keys: [`${accountId}/profile/**`],
+  });
+  if (!response) {
+    throw new Error("Failed to fetch profile");
+  }
+  const { profile } = response[accountId];
+
+  return profile;
+}
diff --git a/src/pages/_app.js b/src/pages/_app.js
index bc61848..7a2f4e6 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -5,10 +5,12 @@ import "../styles/globals.css";
 
 import { Footer } from "@/components/footer";
 import { GithubForkRibbon } from "@/components/github-fork-ribbon";
+import { Toaster } from "@/components/ui/toaster";
 import { SOCIAL_CONTRACT } from "@/lib/near-social";
 import { NETWORK_ID } from "../config";
 import { NearContext, Wallet } from "../wallets/near";
 import { WindowContainer } from "@/components/window-container";
+import { HelperBuddy } from "@/components/helper-buddy";
 
 const wallet = new Wallet({
   networkId: NETWORK_ID,
@@ -17,7 +19,6 @@ const wallet = new Wallet({
 
 export default function App({ Component, pageProps }) {
   const [signedAccountId, setSignedAccountId] = useState("");
-
   useEffect(() => {
     // Start up NEAR wallet
     wallet.startUp(setSignedAccountId);
@@ -47,7 +48,7 @@ export default function App({ Component, pageProps }) {
           property="og:description"
           content="Open source user interface to crosspost across Twitter (X) and Near Social platforms."
         />
-        <meta property="og:image" content="/og-image.svg" />
+        <meta property="og:image" content="/og-image.png" />
         <meta property="og:image:width" content="1200" />
         <meta property="og:image:height" content="630" />
 
@@ -65,7 +66,7 @@ export default function App({ Component, pageProps }) {
           property="twitter:description"
           content="Open source user interface to crosspost across Twitter (X) and Near Social platforms."
         />
-        <meta property="twitter:image" content="/og-image.svg" />
+        <meta property="twitter:image" content="/og-image.png" />
       </Head>
       <GithubForkRibbon />
       <NearContext.Provider value={{ wallet, signedAccountId }}>
@@ -74,6 +75,8 @@ export default function App({ Component, pageProps }) {
         </WindowContainer>
       </NearContext.Provider>
       <Footer />
+      <Toaster />
+      <HelperBuddy />
     </>
   );
 }
diff --git a/src/pages/api/twitter/callback.js b/src/pages/api/twitter/callback.js
index f4467ec..4319a64 100644
--- a/src/pages/api/twitter/callback.js
+++ b/src/pages/api/twitter/callback.js
@@ -6,17 +6,36 @@ export default async function handler(req, res) {
     return res.status(405).json({ error: "Method not allowed" });
   }
 
-  const { code, state } = req.query;
+  const { code, state, error, error_description } = req.query;
   const cookies = parse(req.headers.cookie || "");
   const { code_verifier, oauth_state } = cookies;
 
-  if (!code || !state || !code_verifier || !oauth_state) {
-    return res.status(400).json({ error: "Missing OAuth parameters" });
+  // Handle OAuth errors (e.g., user denied access)
+  if (error) {
+    console.log("OAuth error:", error, error_description);
+    return res.redirect(
+      `/?twitter_error=${"Twitter access was denied: " + encodeURIComponent(error)}`,
+    );
+  }
+
+  // Validate OAuth parameters
+  if (!code || !state) {
+    return res.redirect(
+      `/?twitter_error=${encodeURIComponent("Missing authorization code")}`,
+    );
+  }
+
+  if (!code_verifier || !oauth_state) {
+    return res.redirect(
+      `/?twitter_error=${encodeURIComponent("Invalid session state")}`,
+    );
   }
 
   // Verify the state parameter to prevent CSRF attacks
   if (state !== oauth_state) {
-    return res.status(400).json({ error: "Invalid OAuth state" });
+    return res.redirect(
+      `/?twitter_error=${encodeURIComponent("Invalid OAuth state")}`,
+    );
   }
 
   try {
@@ -27,6 +46,9 @@ export default async function handler(req, res) {
       state,
     );
 
+    // Get user info using the new access token
+    const userInfo = await twitterService.getUserInfo(accessToken);
+
     // Store tokens in HttpOnly cookies
     res.setHeader("Set-Cookie", [
       `twitter_access_token=${accessToken}; Path=/; HttpOnly; SameSite=Lax`,
@@ -35,12 +57,12 @@ export default async function handler(req, res) {
       "oauth_state=; Path=/; HttpOnly; SameSite=Lax; Max-Age=0",
     ]);
 
-    // Clean redirect since we're using Zustand store
-    res.redirect("/");
+    // Redirect with user info
+    res.redirect(`/?twitter_connected=true&handle=${userInfo.username}`);
   } catch (error) {
     console.error("Twitter callback error:", error);
-    res
-      .status(500)
-      .json({ error: "Failed to complete Twitter authentication" });
+    return res.redirect(
+      `/?twitter_error=${encodeURIComponent("Failed to complete Twitter authentication")}`,
+    );
   }
 }
diff --git a/src/pages/api/twitter/upload.js b/src/pages/api/twitter/upload.js
new file mode 100644
index 0000000..360d9f1
--- /dev/null
+++ b/src/pages/api/twitter/upload.js
@@ -0,0 +1,79 @@
+import { TwitterService } from "../../../services/twitter";
+import { parse } from "cookie";
+import formidable from "formidable";
+import fs from "fs";
+
+export const config = {
+  api: {
+    bodyParser: false,
+  },
+};
+
+export default async function handler(req, res) {
+  if (req.method !== "POST") {
+    return res.status(405).json({ error: "Method not allowed" });
+  }
+
+  const cookies = parse(req.headers.cookie || "");
+  const accessToken = cookies.twitter_access_token;
+  if (!accessToken) {
+    return res.status(401).json({ error: "Not authenticated with Twitter" });
+  }
+
+  try {
+    const form = formidable({});
+    const [_, files] = await form.parse(req);
+
+    if (!files.media?.[0]) {
+      return res.status(400).json({ error: "No media file provided" });
+    }
+
+    const file = files.media[0];
+    const twitterService = await TwitterService.initialize();
+
+    if (!twitterService.oauth1Client) {
+      console.error("OAuth 1.0a client not initialized - check credentials");
+      return res.status(500).json({
+        error:
+          "Server is not configured for media uploads. OAuth 1.0a credentials are missing.",
+      });
+    }
+
+    try {
+      const mediaId = await twitterService.uploadMedia(
+        file.filepath,
+        file.mimetype,
+      );
+      return res.status(200).json({
+        success: true,
+        mediaId,
+      });
+    } catch (error) {
+      console.error("Upload failed:", error);
+      return res.status(500).json({
+        error: "Failed to upload media: " + (error.message || "Unknown error"),
+      });
+    } finally {
+      // Clean up the temporary file
+      try {
+        fs.unlinkSync(file.filepath);
+      } catch (error) {
+        console.error("Failed to clean up temp file:", error);
+      }
+    }
+  } catch (error) {
+    console.error("Media upload error:", error);
+    if (
+      error.message === "OAuth 1.0a credentials are required for media uploads"
+    ) {
+      res.status(500).json({
+        error:
+          "Server is not configured for media uploads. Please ensure OAuth 1.0a credentials are set.",
+      });
+    } else {
+      res
+        .status(500)
+        .json({ error: "Failed to upload media: " + error.message });
+    }
+  }
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index 8918333..7adb48c 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,37 +1,48 @@
-import { useTwitterConnection } from "@/store/twitter-store";
+import { TwitterApiNotice } from "@/components/twitter-api-notice";
+import { NEAR_SOCIAL_ENABLED, TWITTER_ENABLED } from "@/config";
+import { tweet } from "@/lib/twitter";
+import { useNearSocialPost } from "@/store/near-social-store";
 import { useContext } from "react";
 import { ComposePost } from "../components/compose-post";
 import { NearContext } from "../wallets/near";
-import { NEAR_SOCIAL_ENABLED, TWITTER_ENABLED } from "@/config";
-import { useNearSocialPost } from "@/store/near-social-store";
-import { tweet } from "@/lib/twitter";
-import { TwitterApiNotice } from "@/components/twitter-api-notice";
+import { toast } from "@/hooks/use-toast";
 
 export default function Home() {
   const { signedAccountId } = useContext(NearContext);
-  const { isConnected } = useTwitterConnection();
+
   const { post: postToNearSocial } = useNearSocialPost(); // currently needed, so we can "hydrate" client with wallet
 
   // posts to all the enabled target platforms
-  // errors are handled in ComposePost
   const post = async (posts) => {
-    // TODO: generic interface for external plugins
-    const promises = [];
+    try {
+      // TODO: generic interface for external plugins
+      const promises = [];
 
-    if (NEAR_SOCIAL_ENABLED) {
-      promises.push(postToNearSocial(posts));
-    }
+      if (NEAR_SOCIAL_ENABLED) {
+        promises.push(postToNearSocial(posts));
+      }
 
-    if (TWITTER_ENABLED) {
-      promises.push(tweet(posts));
-    }
+      if (TWITTER_ENABLED) {
+        promises.push(tweet(posts));
+      }
 
-    await Promise.all(promises); // execute all postings
+      await Promise.all(promises); // execute all postings
+      toast({
+        title: "Post Successful",
+        description: "Your post has been published",
+      });
+    } catch (e) {
+      toast({
+        title: "Post Failed",
+        description: e.message || "An unexpected error occurred",
+        variant: "destructive",
+      });
+    }
   };
 
   return (
     <main className="p-6">
-      {/* <TwitterApiNotice /> */}
+      <TwitterApiNotice post={post} />
       {/* MAIN CONTENT */}
 
       {!signedAccountId ? (
@@ -48,8 +59,9 @@ export default function Home() {
         //     </p>
         //   </div>
         // )
-
-        <ComposePost onSubmit={post} />
+        <>
+          <ComposePost onSubmit={post} />
+        </>
       )}
     </main>
   );
diff --git a/src/pages/profile/[accountId].js b/src/pages/profile/[accountId].js
new file mode 100644
index 0000000..91647c5
--- /dev/null
+++ b/src/pages/profile/[accountId].js
@@ -0,0 +1,50 @@
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { getProfile } from "../../lib/near-social";
+import { ProfileView } from "../../components/social/profile";
+
+export default function ProfilePage() {
+  const router = useRouter();
+  const { accountId } = router.query;
+  const [profile, setProfile] = useState(null);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!accountId) return;
+
+    const fetchProfile = async () => {
+      try {
+        const data = await getProfile(accountId);
+        setProfile(data);
+      } catch (err) {
+        setError(err.message);
+        // Don't redirect on error, just show the error message
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProfile();
+  }, [accountId]);
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center min-h-[200px]">
+        <div className="animate-pulse">Loading...</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return <div className="text-red-500 p-4 text-center">{error}</div>;
+  }
+
+  if (!profile) {
+    return (
+      <div className="text-gray-500 p-4 text-center">No profile found</div>
+    );
+  }
+
+  return <ProfileView profile={profile} />;
+}
diff --git a/src/services/near-social.js b/src/services/near-social.js
index b0f62ba..7da89af 100644
--- a/src/services/near-social.js
+++ b/src/services/near-social.js
@@ -1,15 +1,6 @@
 import { Social, transformActions } from "@builddao/near-social-js";
 import { NETWORK_ID } from "../config";
-
-const SOCIAL_CONTRACT = {
-  mainnet: "social.near",
-  testnet: "v1.social08.testnet",
-};
-
-const NearSocialClient = new Social({
-  contractId: SOCIAL_CONTRACT[NETWORK_ID],
-  network: NETWORK_ID,
-});
+import { NearSocialClient, SOCIAL_CONTRACT } from "@/lib/near-social";
 
 // This service is used in the client context,
 // Uses wallet connection to sign public transactions
diff --git a/src/services/twitter.js b/src/services/twitter.js
index 0c4f904..3f4759a 100644
--- a/src/services/twitter.js
+++ b/src/services/twitter.js
@@ -1,4 +1,5 @@
 import { TwitterApi } from "twitter-api-v2";
+import fs from "fs";
 
 // This service is used in the Next.js server context,
 // which manages API credentials and handles OAuth communciation with Twitter
@@ -15,19 +16,29 @@ export class TwitterService {
       clientSecret: credentials.clientSecret,
     });
 
-    // OAuth 1.0a client for user operations if credentials are provided
+    // OAuth 1.0a client for user operations and media uploads if credentials are provided
     if (
       credentials.apiKey &&
       credentials.apiSecret &&
       credentials.accessToken &&
       credentials.accessSecret
     ) {
-      this.oauth1Client = new TwitterApi({
-        appKey: credentials.apiKey,
-        appSecret: credentials.apiSecret,
-        accessToken: credentials.accessToken,
-        accessSecret: credentials.accessSecret,
-      });
+      try {
+        this.oauth1Client = new TwitterApi({
+          appKey: credentials.apiKey,
+          appSecret: credentials.apiSecret,
+          accessToken: credentials.accessToken,
+          accessSecret: credentials.accessSecret,
+        });
+        console.log("OAuth 1.0a client initialized successfully");
+      } catch (error) {
+        console.error("Failed to initialize OAuth 1.0a client:", error);
+        this.oauth1Client = null;
+      }
+    } else {
+      console.warn(
+        "Missing OAuth 1.0a credentials - media uploads will not work",
+      );
     }
   }
 
@@ -61,34 +72,81 @@ export class TwitterService {
     });
   }
 
+  async uploadMedia(mediaPath, mimeType) {
+    if (!this.oauth1Client) {
+      throw new Error("OAuth 1.0a credentials are required for media uploads");
+    }
+
+    try {
+      // Read the file into a buffer
+      const buffer = await fs.promises.readFile(mediaPath);
+
+      // For media uploads, we use the app-only OAuth 1.0a client
+      // The user's OAuth 2.0 access token is not used for media uploads
+      const mediaId = await this.oauth1Client.v1.uploadMedia(buffer, {
+        mimeType,
+      });
+      console.log("Media upload successful, mediaId:", mediaId);
+      return mediaId;
+    } catch (error) {
+      console.error("Media upload error details:", error);
+      throw error;
+    }
+  }
+
   async tweet(accessToken, posts) {
-    // Create OAuth 2.0 client with user access token for tweet operations
-    const userClient = new TwitterApi(accessToken);
+    // If no access token is provided, user is not connected
+    if (!accessToken) {
+      throw new Error(
+        "Authentication required: Please connect your Twitter account",
+      );
+    }
 
     // Handle array of post objects
     if (!Array.isArray(posts)) {
       throw new Error("Posts must be an array");
     }
 
-    if (posts.length === 1) {
-      // Single tweet
-      return userClient.v2.tweet(posts[0].text);
-    } else {
-      // Thread implementation
-      let lastTweetId = null;
-      const responses = [];
-
-      for (const post of posts) {
-        const tweetData = lastTweetId
-          ? { text: post.text, reply: { in_reply_to_tweet_id: lastTweetId } }
-          : { text: post.text };
-
-        const response = await userClient.v2.tweet(tweetData);
-        responses.push(response);
-        lastTweetId = response.data.id;
+    try {
+      // Create OAuth 2.0 client with user access token for tweet operations
+      const userClient = new TwitterApi(accessToken);
+
+      if (posts.length === 1) {
+        const post = posts[0];
+        const tweetData = { text: post.text };
+
+        // Add media if present
+        if (post.mediaId) {
+          tweetData.media = { media_ids: [post.mediaId] };
+        }
+
+        return userClient.v2.tweet(tweetData);
+      } else {
+        // Thread implementation
+        let lastTweetId = null;
+        const responses = [];
+
+        for (const post of posts) {
+          const tweetData = {
+            text: post.text,
+            ...(lastTweetId && {
+              reply: { in_reply_to_tweet_id: lastTweetId },
+            }),
+            ...(post.mediaId && { media: { media_ids: [post.mediaId] } }),
+          };
+
+          const response = await userClient.v2.tweet(tweetData);
+          responses.push(response);
+          lastTweetId = response.data.id;
+        }
+
+        return responses;
       }
-
-      return responses;
+    } catch (error) {
+      console.error("Failed to post tweet:", error);
+      throw new Error(
+        "Failed to post tweet: " + (error.message || "Please try again"),
+      );
     }
   }
 
@@ -100,11 +158,15 @@ export class TwitterService {
     }
 
     try {
-      const me = await this.oauth1Client.v2.me();
+      // Create OAuth 2.0 client with user access token for user operations
+      const userClient = new TwitterApi(accessToken);
+      const me = await userClient.v2.me();
       return me.data;
     } catch (error) {
       console.error("Failed to fetch user info:", error);
-      throw error;
+      // Return null instead of throwing error when token is invalid
+      // This indicates user is not connected
+      return null;
     }
   }
 }
diff --git a/src/store/drafts-store.js b/src/store/drafts-store.js
index 3796be1..ab96de8 100644
--- a/src/store/drafts-store.js
+++ b/src/store/drafts-store.js
@@ -2,73 +2,152 @@ import { create } from "zustand";
 
 const STORAGE_KEY = "crosspost_drafts";
 const AUTOSAVE_KEY = "crosspost_autosave";
+const MODE_KEY = "crosspost_mode";
 
-const loadDrafts = (key = STORAGE_KEY) => {
-  if (typeof window === "undefined") return [];
+const loadFromStorage = (key) => {
+  if (typeof window === "undefined") return null;
   try {
     const saved = localStorage.getItem(key);
-    return saved ? JSON.parse(saved) : [];
+    return saved ? JSON.parse(saved) : null;
   } catch (err) {
-    console.error("Failed to load drafts:", err);
-    return [];
+    console.error(`Failed to load from ${key}:`, err);
+    return null;
   }
 };
 
-const saveDrafts = (drafts, key = STORAGE_KEY) => {
+const saveToStorage = (key, data) => {
   if (typeof window === "undefined") return;
   try {
-    localStorage.setItem(key, JSON.stringify(drafts));
+    localStorage.setItem(key, JSON.stringify(data));
   } catch (err) {
-    console.error("Failed to save drafts:", err);
+    console.error(`Failed to save to ${key}:`, err);
   }
 };
 
+const getInitialState = () => {
+  if (typeof window === "undefined") {
+    return {
+      drafts: [],
+      autosave: null,
+      isThreadMode: false,
+      isModalOpen: false,
+    };
+  }
+
+  return {
+    drafts: loadFromStorage(STORAGE_KEY) || [],
+    autosave: loadFromStorage(AUTOSAVE_KEY),
+    isThreadMode: loadFromStorage(MODE_KEY) || false,
+    isModalOpen: false,
+  };
+};
+
 export const useDraftsStore = create((set, get) => ({
-  drafts: loadDrafts(),
-  autosave: loadDrafts(AUTOSAVE_KEY),
-  isModalOpen: false,
+  ...getInitialState(),
 
   setModalOpen: (isOpen) => set({ isModalOpen: isOpen }),
 
+  setThreadMode: (isThreadMode) => {
+    try {
+      saveToStorage(MODE_KEY, isThreadMode);
+      set({ isThreadMode });
+    } catch (err) {
+      console.error("Failed to save thread mode:", err);
+      // Still update state even if storage fails
+      set({ isThreadMode });
+    }
+  },
+
   saveDraft: (posts) => {
-    const draft = {
-      id: Date.now(),
-      posts,
-      createdAt: new Date().toISOString(),
-    };
-    set((state) => {
-      const newDrafts = [draft, ...state.drafts];
-      saveDrafts(newDrafts);
-      return { drafts: newDrafts };
-    });
+    try {
+      // Validate posts
+      if (
+        !Array.isArray(posts) ||
+        posts.length === 0 ||
+        posts.every((p) => !p?.text?.trim())
+      ) {
+        return;
+      }
+
+      // Clean posts data before saving
+      const cleanPosts = posts.map((post) => ({
+        text: post.text || "",
+        mediaId: post.mediaId || null,
+        mediaPreview: post.mediaPreview || null,
+      }));
+
+      const draft = {
+        id: Date.now(),
+        posts: cleanPosts,
+        createdAt: new Date().toISOString(),
+      };
+
+      set((state) => {
+        const newDrafts = [draft, ...state.drafts];
+        saveToStorage(STORAGE_KEY, newDrafts);
+        return { drafts: newDrafts };
+      });
+    } catch (err) {
+      console.error("Failed to save draft:", err);
+    }
   },
 
   deleteDraft: (id) => {
-    set((state) => {
-      const newDrafts = state.drafts.filter((d) => d.id !== id);
-      saveDrafts(newDrafts);
-      return { drafts: newDrafts };
-    });
+    try {
+      set((state) => {
+        const newDrafts = state.drafts.filter((d) => d.id !== id);
+        saveToStorage(STORAGE_KEY, newDrafts);
+        return { drafts: newDrafts };
+      });
+    } catch (err) {
+      console.error("Failed to delete draft:", err);
+    }
   },
 
   saveAutoSave: (posts) => {
-    if (posts.every((p) => !p.text.trim())) {
-      // If all posts are empty, clear autosave
-      localStorage.removeItem(AUTOSAVE_KEY);
-      set({ autosave: null });
-      return;
-    }
+    try {
+      // Validate posts
+      if (
+        !Array.isArray(posts) ||
+        posts.length === 0 ||
+        posts.every((p) => !p?.text?.trim())
+      ) {
+        localStorage.removeItem(AUTOSAVE_KEY);
+        set({ autosave: null });
+        return;
+      }
 
-    const autosave = {
-      posts,
-      updatedAt: new Date().toISOString(),
-    };
-    saveDrafts(autosave, AUTOSAVE_KEY);
-    set({ autosave });
+      // Clean posts data before saving
+      const cleanPosts = posts.map((post) => ({
+        text: post.text || "",
+        mediaId: post.mediaId || null,
+        mediaPreview: post.mediaPreview || null,
+      }));
+
+      const autosave = {
+        posts: cleanPosts,
+        updatedAt: new Date().toISOString(),
+      };
+      saveToStorage(AUTOSAVE_KEY, autosave);
+      set({ autosave });
+    } catch (err) {
+      console.error("Failed to save autosave:", err);
+      // Attempt to clear autosave on error
+      try {
+        localStorage.removeItem(AUTOSAVE_KEY);
+        set({ autosave: null });
+      } catch {} // Ignore any errors during cleanup
+    }
   },
 
   clearAutoSave: () => {
-    localStorage.removeItem(AUTOSAVE_KEY);
-    set({ autosave: null });
+    try {
+      localStorage.removeItem(AUTOSAVE_KEY);
+      set({ autosave: null });
+    } catch (err) {
+      console.error("Failed to clear autosave:", err);
+      // Still clear state even if storage fails
+      set({ autosave: null });
+    }
   },
 }));
diff --git a/src/store/near-social-store.js b/src/store/near-social-store.js
index f34c911..eed90c1 100644
--- a/src/store/near-social-store.js
+++ b/src/store/near-social-store.js
@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { NearSocialService } from "../services/near-social";
+import { toast } from "@/hooks/use-toast";
 
 const store = (set, get) => ({
   wallet: null,
@@ -10,31 +11,36 @@ const store = (set, get) => ({
     set({ wallet, service });
   },
   // TODO: posting plugin's standard interface
-  post: async (content) => {
+  post: async (posts) => {
     const { service } = get();
     if (!service) {
       throw new Error("Near Social service not initialized");
     }
 
     try {
-      const transaction = await service.createPost(content);
+      const transaction = await service.createPost(posts);
 
       if (!transaction) {
         throw new Error("Failed to create post transaction");
       }
 
-      await get().wallet.signAndSendTransactions({
-        // we're in application state
-        // plugin is using it as middleware for signing transactions
-        transactions: [
-          {
-            receiverId: transaction.contractId,
-            actions: transaction.actions,
-          },
-        ],
-      });
+      try {
+        await get().wallet.signAndSendTransactions({
+          // we're in application state
+          // plugin is using it as middleware for signing transactions
+          transactions: [
+            {
+              receiverId: transaction.contractId,
+              actions: transaction.actions,
+            },
+          ],
+        });
 
-      return true;
+        return true;
+      } catch (error) {
+        console.error("Near Social post error:", error);
+        throw error;
+      }
     } catch (error) {
       console.error("Near Social post error:", error);
       throw error;
diff --git a/src/store/twitter-store.js b/src/store/twitter-store.js
index a1c20e9..ac35b5a 100644
--- a/src/store/twitter-store.js
+++ b/src/store/twitter-store.js
@@ -6,15 +6,71 @@ import {
   tweet,
 } from "../lib/twitter";
 
+const STORAGE_KEY = "twitter_connection";
+
 const store = (set, get) => ({
   isConnected: false,
   isConnecting: false,
   handle: null,
   error: null,
   post: tweet,
+  init: () => {
+    if (typeof window === "undefined") return;
+
+    // First try to restore from URL params (OAuth callback)
+    const params = new URLSearchParams(window.location.search);
+    const isConnected = params.get("twitter_connected") === "true";
+    const handle = params.get("handle");
+    const error = params.get("twitter_error");
+
+    if (isConnected && handle) {
+      // Save to localStorage and state
+      const connectionState = { isConnected: true, handle };
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(connectionState));
+      set({ isConnected: true, handle, isConnecting: false, error: null });
+    } else if (error) {
+      // Handle OAuth errors (e.g., user denied access)
+      const decodedError = decodeURIComponent(error);
+      localStorage.removeItem(STORAGE_KEY);
+      set({
+        isConnected: false,
+        isConnecting: false,
+        handle: null,
+        error: decodedError,
+      });
+    } else {
+      // Try to restore from localStorage
+      try {
+        const saved = localStorage.getItem(STORAGE_KEY);
+        if (saved) {
+          const { isConnected, handle } = JSON.parse(saved);
+          set({ isConnected, handle, isConnecting: false, error: null });
+        }
+      } catch (e) {
+        console.error("Failed to restore Twitter connection state:", e);
+      }
+    }
+    // clean url
+    window.history.replaceState({}, "", "/");
+  },
   checkConnection: async () => {
-    const { isConnected, handle } = await status();
-    set({ isConnected, handle });
+    try {
+      const { isConnected, handle } = await status();
+      // Update localStorage with verified state
+      if (isConnected && handle) {
+        localStorage.setItem(
+          STORAGE_KEY,
+          JSON.stringify({ isConnected, handle }),
+        );
+      } else {
+        localStorage.removeItem(STORAGE_KEY);
+      }
+      set({ isConnected, handle });
+    } catch (error) {
+      console.error("Failed to check Twitter connection:", error);
+      localStorage.removeItem(STORAGE_KEY);
+      set({ isConnected: false, handle: null });
+    }
   },
   connect: async () => {
     if (get().isConnecting) return;
@@ -22,12 +78,14 @@ const store = (set, get) => ({
       set({ isConnecting: true, error: null });
       await connectTwitter();
     } catch (err) {
-      set({ isConnecting: false, error: "Failed to connect to Twitter" });
+      const errorMessage = "Failed to connect to Twitter";
+      set({ isConnecting: false, error: errorMessage });
       console.error("Twitter connection error:", err);
     }
   },
   disconnect: async () => {
     await disconnectTwitter();
+    localStorage.removeItem(STORAGE_KEY);
     set({ isConnected: false, isConnecting: false, handle: null, error: null });
     await get().checkConnection();
   },
@@ -35,11 +93,17 @@ const store = (set, get) => ({
 
 export const useTwitterStore = create(store);
 
+// Initialize store
+if (typeof window !== "undefined") {
+  useTwitterStore.getState().init();
+}
+
 // Focused hooks
 export const useTwitterConnection = () => {
   const isConnected = useTwitterStore((state) => state.isConnected);
   const isConnecting = useTwitterStore((state) => state.isConnecting);
   const handle = useTwitterStore((state) => state.handle);
+  const error = useTwitterStore((state) => state.error);
   const connect = useTwitterStore((state) => state.connect);
   const disconnect = useTwitterStore((state) => state.disconnect);
   const checkConnection = useTwitterStore((state) => state.checkConnection);
@@ -48,6 +112,7 @@ export const useTwitterConnection = () => {
     isConnected,
     isConnecting,
     handle,
+    error,
     connect,
     disconnect,
     checkConnection,
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 6df1892..fd84ca4 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -2,34 +2,17 @@
 @tailwind components;
 @tailwind utilities;
 
-.blob {
-  position: fixed;
-  width: 500px;
-  height: 500px;
-  background: linear-gradient(
-    to right,
-    rgba(67, 56, 202, 0.4),
-    rgba(168, 85, 247, 0.4),
-    rgba(236, 72, 153, 0.4)
-  );
-  border-radius: 50%;
-  filter: blur(100px);
-  transition: all 0.3s ease;
-  pointer-events: none;
-  opacity: 0.7;
-  mix-blend-mode: screen;
-  animation: pulse 8s infinite;
-}
-
-@keyframes pulse {
-  0% {
-    transform: scale(1);
+@layer components {
+  .base-component {
+    @apply border-2 border-gray-800 bg-white shadow-custom;
   }
-  50% {
-    transform: scale(1.1);
+  
+  .base-component-hover {
+    @apply hover:bg-gray-100;
   }
-  100% {
-    transform: scale(1);
+
+  .base-component-ghost {
+    @apply border-0 shadow-none hover:bg-accent hover:text-accent-foreground;
   }
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 3d8b473..45b1abd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,9 @@ module.exports = {
   ],
   theme: {
     extend: {
+      boxShadow: {
+        custom: "2px 2px 0 rgba(0,0,0,1)",
+      },
       borderRadius: {
         lg: "var(--radius)",
         md: "calc(var(--radius) - 2px)",
@@ -56,5 +59,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
 };