diff --git a/apps/web/src/pages/SocialPage.tsx b/apps/web/src/pages/SocialPage.tsx
index da3e39deb..9c2256dcd 100644
--- a/apps/web/src/pages/SocialPage.tsx
+++ b/apps/web/src/pages/SocialPage.tsx
@@ -2,10 +2,14 @@ import { useState } from 'react';
 import { Users, Heart, MessageCircle, Share2, TrendingUp } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { useToast } from '@/hooks/useToast';
+import { CreatePostModal } from '@/components/social/CreatePostModal';
+import { socialService } from '@/services/socialService';
+import { logger } from '@/utils/logger';
 
 export function SocialPage() {
   const { toast } = useToast();
-  const [posts] = useState([
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [posts, setPosts] = useState([
     {
       id: 1,
       author: 'DJ Nova',
@@ -47,9 +51,7 @@ export function SocialPage() {
           </div>
           <Button
             className="bg-kodo-cyan hover:bg-kodo-cyan/80 text-black"
-            onClick={() =>
-              toast({ message: 'Post creation coming soon!', type: 'info' })
-            }
+            onClick={() => setShowCreateModal(true)}
           >
             Create Post
           </Button>
@@ -160,6 +162,31 @@ export function SocialPage() {
           Discover Artists
         </Button>
       </div>
+
+      {/* Create Post Modal */}
+      {showCreateModal && (
+        <CreatePostModal
+          onClose={() => setShowCreateModal(false)}
+          onCreate={async (postData) => {
+            try {
+              // FIX: socialService.createPost attend { content, attachments? }
+              const res = await socialService.createPost({
+                content: postData.content,
+                attachments: postData.type !== 'text' ? { type: postData.type } : undefined,
+              });
+              setPosts([res.post, ...posts]);
+              toast.success('Post published successfully');
+              setShowCreateModal(false);
+            } catch (error) {
+              logger.error('Failed to create post', {
+                error: error instanceof Error ? error.message : String(error),
+                stack: error instanceof Error ? error.stack : undefined,
+              });
+              toast.error('Failed to create post. Please try again.');
+            }
+          }}
+        />
+      )}
     </div>
   );
 }