diff --git a/Modules/CircleXO/App/Http/Controllers/CircleXOController.php b/Modules/CircleXO/App/Http/Controllers/CircleXOController.php
index f04eaee..89b5727 100644
--- a/Modules/CircleXO/App/Http/Controllers/CircleXOController.php
+++ b/Modules/CircleXO/App/Http/Controllers/CircleXOController.php
@@ -36,8 +36,6 @@ public function verify(Account $account)
         return redirect()->back();
     }
 
-
-
     public function sponsoring($username)
     {
         $account = Account::where('username', $username)->first();
@@ -70,6 +68,9 @@ public function post($username, $post)
                 ->first();
 
             if($post){
+                if(auth('accounts')->user()){
+                    auth('accounts')->user()->view($post);
+                }
                 return view('circle-xo::post', compact('account', 'post'));
             }
             else {
@@ -147,4 +148,50 @@ public function profile($username, Request $request)
             abort(404);
         }
     }
+
+    public function like($username, $post)
+    {
+        $account = Account::where('username', $username)->first();
+        if($account){
+            $post = AccountListing::where('account_id', $account->id)
+                ->where('type', 'post')
+                ->where('id', $post)
+                ->first();
+
+            if($post){
+                auth('accounts')->user()->like($post);
+
+                return back();
+            }
+            else {
+                abort(404);
+            }
+        }
+        else {
+            abort(404);
+        }
+    }
+
+    public function unlike($username, $post)
+    {
+        $account = Account::where('username', $username)->first();
+        if($account){
+            $post = AccountListing::where('account_id', $account->id)
+                ->where('type', 'post')
+                ->where('id', $post)
+                ->first();
+
+            if($post){
+                auth('accounts')->user()->unlike($post);
+
+                return back();
+            }
+            else {
+                abort(404);
+            }
+        }
+        else {
+            abort(404);
+        }
+    }
 }
diff --git a/Modules/CircleXO/App/Http/Controllers/ProfileController.php b/Modules/CircleXO/App/Http/Controllers/ProfileController.php
index 8250412..259b8a6 100644
--- a/Modules/CircleXO/App/Http/Controllers/ProfileController.php
+++ b/Modules/CircleXO/App/Http/Controllers/ProfileController.php
@@ -61,6 +61,11 @@ public function following(Request $request)
         return view('circle-xo::profile.following');
     }
 
+    public function followers(Request $request)
+    {
+        return view('circle-xo::profile.followers');
+    }
+
     public function messages(Request $request)
     {
         return view('circle-xo::profile.messages', [
diff --git a/Modules/CircleXO/App/Models/AccountListing.php b/Modules/CircleXO/App/Models/AccountListing.php
index ee80543..a1f33af 100644
--- a/Modules/CircleXO/App/Models/AccountListing.php
+++ b/Modules/CircleXO/App/Models/AccountListing.php
@@ -6,6 +6,7 @@
 use Illuminate\Database\Eloquent\Model;
 use Multicaret\Acquaintances\Traits\CanBeLiked;
 use Multicaret\Acquaintances\Traits\CanBeRated;
+use Multicaret\Acquaintances\Traits\CanBeViewed;
 use Multicaret\Acquaintances\Traits\CanLike;
 use Multicaret\Acquaintances\Traits\CanRate;
 use Spatie\MediaLibrary\HasMedia;
@@ -14,8 +15,8 @@
 class AccountListing extends Model implements HasMedia
 {
     use InteractsWithMedia;
-    use CanLike, CanBeLiked;
-    use CanRate, CanBeRated;
+    use CanBeLiked;
+    use CanBeViewed;
 
     /**
      * The attributes that are mass assignable.
diff --git a/Modules/CircleXO/App/Providers/CircleXOServiceProvider.php b/Modules/CircleXO/App/Providers/CircleXOServiceProvider.php
index 1c28fe1..db337a2 100644
--- a/Modules/CircleXO/App/Providers/CircleXOServiceProvider.php
+++ b/Modules/CircleXO/App/Providers/CircleXOServiceProvider.php
@@ -2,6 +2,7 @@
 
 namespace Modules\CircleXO\App\Providers;
 
+use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\ServiceProvider;
 
@@ -56,6 +57,8 @@ public function registerComponents(): void
             \Modules\CircleXO\App\View\Components\ProfileButtons::class,
             \Modules\CircleXO\App\View\Components\ProfileInfo::class,
             \Modules\CircleXO\App\View\Components\ListingType::class,
+            \Modules\CircleXO\App\View\Components\Recap::class,
+            \Modules\CircleXO\App\View\Components\Share::class,
         ]);
     }
 
diff --git a/Modules/CircleXO/App/View/Components/Recap.php b/Modules/CircleXO/App/View/Components/Recap.php
new file mode 100644
index 0000000..a9badd8
--- /dev/null
+++ b/Modules/CircleXO/App/View/Components/Recap.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace Modules\CircleXO\App\View\Components;
+
+use Illuminate\View\Component;
+use Illuminate\View\View;
+use ProtoneMedia\Splade\Components\Form;
+use ProtoneMedia\Splade\Components\Form\InteractsWithFormElement;
+
+class Recap extends Component
+{
+    use InteractsWithFormElement;
+
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct(
+        public string $name = '',
+        public string $vModel = '',
+        public string $type = 'text',
+        public string $label = '',
+        public string $validationKey = '',
+        public bool $showErrors = true,
+        public string $prepend = '',
+        public string $append = '',
+        public string $help = '',
+        public bool $alwaysEnablePrepend = false,
+        public bool $alwaysEnableAppend = false,
+        public bool $disabled = false,
+    )
+    {
+        Form::allowAttribute($name);
+    }
+
+    public function isHidden(): bool
+    {
+        return $this->type === 'hidden';
+    }
+
+
+
+    /**
+     * Get the view/contents that represent the component.
+     */
+    public function render(): View|string
+    {
+        return view('circle-xo::components.recap');
+    }
+}
diff --git a/Modules/CircleXO/App/View/Components/Share.php b/Modules/CircleXO/App/View/Components/Share.php
new file mode 100644
index 0000000..9f65dcc
--- /dev/null
+++ b/Modules/CircleXO/App/View/Components/Share.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace Modules\CircleXO\App\View\Components;
+
+use Illuminate\View\Component;
+use Illuminate\View\View;
+use Modules\CircleXO\App\Models\AccountListing;
+
+class Share extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(
+        public string $title,
+        public ?string $description=null,
+        public ?string $url=null,
+    )
+    {
+        //
+    }
+
+    /**
+     * Get the view/contents that represent the component.
+     */
+    public function render(): View|string
+    {
+        return view('circle-xo::components.share');
+    }
+}
diff --git a/Modules/CircleXO/resources/views/components/profile-buttons.blade.php b/Modules/CircleXO/resources/views/components/profile-buttons.blade.php
index d00414b..2c8bc3b 100644
--- a/Modules/CircleXO/resources/views/components/profile-buttons.blade.php
+++ b/Modules/CircleXO/resources/views/components/profile-buttons.blade.php
@@ -43,5 +43,12 @@
             </x-tomato-admin-tooltip>
         @endif
     @endif
+    <x-circle-xo-share :title="$account->username" :description="$account->bio">
+        <x-tomato-admin-tooltip :text="__('Share')">
+            <span class="bg-success-600 flex flex-col justify-center items-center text-white rounded-md shadow-md font-bold text-sm px-4 py-2 -mt-1">
+                <i class="bx bxs-share text-lg text-white"></i>
+            </span>
+        </x-tomato-admin-tooltip>
+    </x-circle-xo-share>
 </div>
 
diff --git a/Modules/CircleXO/resources/views/components/profile-card.blade.php b/Modules/CircleXO/resources/views/components/profile-card.blade.php
index ce19737..ca2fcb4 100644
--- a/Modules/CircleXO/resources/views/components/profile-card.blade.php
+++ b/Modules/CircleXO/resources/views/components/profile-card.blade.php
@@ -38,6 +38,12 @@
                 @endif
             @endif
         </div>
-        <h6 class="my-2 text-sm text-zinc-300">Joined {{ $account->created_at->diffForHumans() }}</h6>
+        <h6 class="mt-2 text-sm text-zinc-300">
+            <span>{{  $account->followers()->count() .' ' . __('Followers')}}</span> .
+            <span>{{  $account->followings()->count() .' ' . __('Following') }}</span>
+        </h6>
+        <h6 class="my-2 text-sm text-zinc-300">
+            {{__('Joined')}} {{ $account->created_at->diffForHumans() }}
+        </h6>
     </div>
 </div>
diff --git a/Modules/CircleXO/resources/views/components/profile-info.blade.php b/Modules/CircleXO/resources/views/components/profile-info.blade.php
index 1cd1fc1..605742c 100644
--- a/Modules/CircleXO/resources/views/components/profile-info.blade.php
+++ b/Modules/CircleXO/resources/views/components/profile-info.blade.php
@@ -40,5 +40,14 @@
             </h1>
         </div>
     @endif
-    <h6 class="my-2 text-sm text-zinc-300">{{__('Joined')}} {{ $account->created_at->diffForHumans() }}</h6>
+    <h6 class="my-2 text-sm text-zinc-300">
+        @if($edit)
+            <x-splade-link :href="route('profile.followers')">{{  $account->followers()->count() .' ' . __('Followers')}}</x-splade-link> .
+            <x-splade-link :href="route('profile.following')">{{  $account->followings()->count() .' ' . __('Following') }}</x-splade-link> .
+        @else
+            <span>{{  $account->followers()->count() .' ' . __('Followers')}}</span> .
+            <span>{{  $account->followings()->count() .' ' . __('Following') }}</span> .
+        @endif
+        {{__('Joined')}} {{ $account->created_at->diffForHumans() }}
+    </h6>
 </div>
diff --git a/Modules/CircleXO/resources/views/components/recap.blade.php b/Modules/CircleXO/resources/views/components/recap.blade.php
new file mode 100644
index 0000000..7dd5e73
--- /dev/null
+++ b/Modules/CircleXO/resources/views/components/recap.blade.php
@@ -0,0 +1,6 @@
+<Recap
+    {{ $attributes->only(['v-if', 'v-show', 'class', 'v-model', 'v-bind:hasError'])->class(['hidden' => $isHidden()]) }}
+    v-model="{{ $vueModel() }}"
+    siteKey="6LfudzMnAAAAAPyF1Z1wXFBEve9KqZE8ykJEZNsR"
+>
+</Recap>
diff --git a/Modules/CircleXO/resources/views/components/share.blade.php b/Modules/CircleXO/resources/views/components/share.blade.php
new file mode 100644
index 0000000..1a8dc93
--- /dev/null
+++ b/Modules/CircleXO/resources/views/components/share.blade.php
@@ -0,0 +1,96 @@
+<x-tomato-admin-dropdown>
+    <x-slot:button>
+        {{ $slot }}
+    </x-slot:button>
+
+    <ShareNetwork
+        network="facebook"
+        url="{{$url ?? url()->current()}}"
+        title="{{$title}}"
+        description="{{$description}}"
+        quote="{{$description}}"
+    >
+        <div class="whitespace-nowrap block w-full px-4 py-2  text-sm leading-5 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 focus:outline-none focus:bg-zinc-100 dark:focus:bg-zinc-800 transition duration-150 ease-in-out">
+            <div class="flex justify-start gap-2 ">
+                <div class="flex flex-col items-center justify-center">
+                    <i class="bx bxl-facebook text-sm"></i>
+                </div>
+                <div class="text-sm ">
+                    {{__('Share On Facebook')}}
+                </div>
+            </div>
+        </div>
+    </ShareNetwork>
+    <ShareNetwork
+        network="twitter"
+        url="{{$url ?? url()->current()}}"
+        title="{{$title}}"
+        description="{{$description}}"
+        quote="{{$description}}"
+    >
+        <div class="whitespace-nowrap block w-full px-4 py-2  text-sm leading-5 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 focus:outline-none focus:bg-zinc-100 dark:focus:bg-zinc-800 transition duration-150 ease-in-out">
+            <div class="flex justify-start gap-2 ">
+                <div class="flex flex-col items-center justify-center">
+                    <i class="bx bxl-twitter text-sm"></i>
+                </div>
+                <div class="text-sm ">
+                    {{__('Share On Twitter')}}
+                </div>
+            </div>
+        </div>
+    </ShareNetwork>
+    <ShareNetwork
+        network="linkedin"
+        url="{{$url ?? url()->current()}}"
+        title="{{$title}}"
+        description="{{$description}}"
+        quote="{{$description}}"
+    >
+        <div class="whitespace-nowrap block w-full px-4 py-2  text-sm leading-5 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 focus:outline-none focus:bg-zinc-100 dark:focus:bg-zinc-800 transition duration-150 ease-in-out">
+            <div class="flex justify-start gap-2 ">
+                <div class="flex flex-col items-center justify-center">
+                    <i class="bx bxl-linkedin text-sm"></i>
+                </div>
+                <div class="text-sm ">
+                    {{__('Share On Linkedin')}}
+                </div>
+            </div>
+        </div>
+    </ShareNetwork>
+    <ShareNetwork
+        network="whatsapp"
+        url="{{$url ?? url()->current()}}"
+        title="{{$title}}"
+        description="{{$description}}"
+        quote="{{$description}}"
+    >
+        <div class="whitespace-nowrap block w-full px-4 py-2  text-sm leading-5 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 focus:outline-none focus:bg-zinc-100 dark:focus:bg-zinc-800 transition duration-150 ease-in-out">
+            <div class="flex justify-start gap-2 ">
+                <div class="flex flex-col items-center justify-center">
+                    <i class="bx bxl-whatsapp text-sm"></i>
+                </div>
+                <div class="text-sm ">
+                    {{__('Share On Whatsapp')}}
+                </div>
+            </div>
+        </div>
+    </ShareNetwork>
+    <ShareNetwork
+        network="telegram"
+        url="{{$url ?? url()->current()}}"
+        title="{{$title}}"
+        description="{{$description}}"
+        quote="{{$description}}"
+    >
+        <div class="whitespace-nowrap block w-full px-4 py-2  text-sm leading-5 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 focus:outline-none focus:bg-zinc-100 dark:focus:bg-zinc-800 transition duration-150 ease-in-out">
+            <div class="flex justify-start gap-2 ">
+                <div class="flex flex-col items-center justify-center">
+                    <i class="bx bxl-telegram text-sm"></i>
+                </div>
+                <div class="text-sm ">
+                    {{__('Share On Telegram')}}
+                </div>
+            </div>
+        </div>
+    </ShareNetwork>
+</x-tomato-admin-dropdown>
diff --git a/Modules/CircleXO/resources/views/post.blade.php b/Modules/CircleXO/resources/views/post.blade.php
index 3c8d764..4793b40 100644
--- a/Modules/CircleXO/resources/views/post.blade.php
+++ b/Modules/CircleXO/resources/views/post.blade.php
@@ -24,4 +24,49 @@
     <div class="mt-8 mx-8 lg:mx-16">
         <x-tomato-markdown-viewer style="background-color: rgb(39 39 42 / var(--tw-bg-opacity)) !important;" :content="$post->body" />
     </div>
+    @if(auth('accounts')->user())
+    <div class="flex justify-between mx-8 lg:mx-16 border border-zinc-700 bg-zinc-900 shadow-sm rounded-lg my-4 px-6 py-4">
+       <div class="flex flex-col justify-center items-center">
+           @if(!auth('accounts')->user()->hasLiked($post))
+               <x-tomato-admin-tooltip :text="__('Like')">
+                   <x-splade-link :href="route('home.posts.like', ['username' => $account->username, 'post' => $post])" method="POST" class="w-full">
+                       <div class="flex justify-start gap-2">
+                           <div class="bg-zinc-700 p-3 rounded-lg text-white flex flex-col justify-center items-center">
+                               <i class="bx bxs-like text-lg"></i>
+                           </div>
+                           <div class="flex flex-col justify-center items-center">
+                               <div>
+                                   <p>{{ $post->likers()->count() }}</p>
+                               </div>
+                           </div>
+                       </div>
+                   </x-splade-link>
+               </x-tomato-admin-tooltip>
+           @else
+               <x-tomato-admin-tooltip :text="__('Dislike')">
+                   <x-splade-link :href="route('home.posts.unlike', ['username' => $account->username, 'post' => $post])" method="POST" class="w-full flex justify-start gap-2">
+                       <div class="flex justify-start gap-2">
+                           <div class=" bg-primary-600 p-3 rounded-lg text-white flex flex-col justify-center items-center">
+                               <i class="bx bxs-like text-lg"></i>
+                           </div>
+                           <div class="flex flex-col justify-center items-center">
+                               <p>{{ $post->likers()->count() }}</p>
+                           </div>
+                       </div>
+                   </x-splade-link>
+               </x-tomato-admin-tooltip>
+           @endif
+       </div>
+
+        <div class="flex flex-col justify-center items-center">
+            <x-circle-xo-share :title="$post->title" :description="$post->description" >
+                <x-tomato-admin-tooltip :text="__('Share')">
+                    <span class="bg-success-600 flex flex-col justify-center items-center text-white rounded-md shadow-md font-bold text-sm p-3">
+                        <i class="bx bxs-share text-lg text-white"></i>
+                    </span>
+                </x-tomato-admin-tooltip>
+            </x-circle-xo-share>
+        </div>
+    </div>
+    @endif
 </x-circle-xo-public-profile-layout>
diff --git a/Modules/CircleXO/resources/views/profile/edit/social-edit.blade.php b/Modules/CircleXO/resources/views/profile/edit/social-edit.blade.php
index af75354..cd507af 100644
--- a/Modules/CircleXO/resources/views/profile/edit/social-edit.blade.php
+++ b/Modules/CircleXO/resources/views/profile/edit/social-edit.blade.php
@@ -20,6 +20,7 @@
             <x-circle-xo-social-item network="dribbble" :label="__('Dribbble')" />
             <x-circle-xo-social-item network="github" :label="__('GitHub')" />
             <x-circle-xo-social-item network="linkedin" :label="__('LinkedIn')" />
+            <x-circle-xo-social-item network="telegram" :label="__('Telegram')" />
             <x-circle-xo-social-item network="twitch" :label="__('Twitch')" />
             <x-circle-xo-social-item network="discord" :label="__('Discord')" />
             <x-circle-xo-social-item network="figma" :label="__('Figma')" />
diff --git a/Modules/CircleXO/resources/views/profile/edit/social.blade.php b/Modules/CircleXO/resources/views/profile/edit/social.blade.php
index 11d39b1..402603d 100644
--- a/Modules/CircleXO/resources/views/profile/edit/social.blade.php
+++ b/Modules/CircleXO/resources/views/profile/edit/social.blade.php
@@ -20,6 +20,7 @@
             <x-circle-xo-social-item network="dribbble" :label="__('Dribbble')" />
             <x-circle-xo-social-item network="github" :label="__('GitHub')" />
             <x-circle-xo-social-item network="linkedin" :label="__('LinkedIn')" />
+            <x-circle-xo-social-item network="telegram" :label="__('Telegram')" />
             <x-circle-xo-social-item network="twitch" :label="__('Twitch')" />
             <x-circle-xo-social-item network="discord" :label="__('Discord')" />
             <x-circle-xo-social-item network="figma" :label="__('Figma')" />
diff --git a/Modules/CircleXO/resources/views/profile/followers.blade.php b/Modules/CircleXO/resources/views/profile/followers.blade.php
new file mode 100644
index 0000000..6b1e98c
--- /dev/null
+++ b/Modules/CircleXO/resources/views/profile/followers.blade.php
@@ -0,0 +1,27 @@
+<x-circle-xo-profile-layout>
+    <div class="my-12 mx-8 lg:mx-16">
+        @if(!auth('accounts')->user()->followers()->get()->count())
+            <div class="bg-zinc-800 border border-zinc-700 mx-16 my-4 rounded-lg shadow-sm flex justify-center">
+                <div class="p-8 md:p-16 text-center">
+                    <i class="bx bx-x-circle bx-lg text-danger-500"></i>
+                    <h1>{{__("You still don't follow any user!")}}</h1>
+                </div>
+            </div>
+        @else
+            @php
+                $followers = auth('accounts')->user()->followers()->paginate(8);
+            @endphp
+
+            <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 mx-16 ">
+                @foreach($followers as $follower)
+                    <x-circle-xo-profile-card :account="$follower" />
+                @endforeach
+            </div>
+
+            <div class="mx-16 my-4">
+                {!! $followers->links('tomato-admin::components.pagination') !!}
+            </div>
+
+        @endif
+    </div>
+</x-circle-xo-profile-layout>
diff --git a/Modules/CircleXO/routes/web.php b/Modules/CircleXO/routes/web.php
index 43126bd..359f01f 100644
--- a/Modules/CircleXO/routes/web.php
+++ b/Modules/CircleXO/routes/web.php
@@ -52,6 +52,7 @@
     Route::get('/qr', [ProfileController::class, 'qr'])->name('qr');
     Route::post('/qr', [ProfileController::class, 'qrUpdate'])->name('qr.update');
     Route::get('/following', [ProfileController::class, 'following'])->name('following');
+    Route::get('/followers', [ProfileController::class, 'followers'])->name('followers');
     Route::get('/messages', [ProfileController::class, 'messages'])->name('messages');
     Route::get('/messages/{message}', [ProfileController::class, 'message'])->name('messages.show');
     Route::get('/edit/social-accounts', [ProfileController::class, 'socialAccounts'])->name('social-accounts.show');
@@ -104,3 +105,9 @@
     Route::post('/{username}/contact', [CircleXOController::class, 'send'])->name('home.contact.send');
     Route::get('/{username}/posts/{post}', [CircleXOController::class, 'post'])->name('home.posts');
 });
+
+Route::middleware(['splade', 'auth:accounts'])->group(function (){
+    Route::post('/{username}/posts/{post}/like', [CircleXOController::class, 'like'])->name('home.posts.like');
+    Route::post('/{username}/posts/{post}/unlike', [CircleXOController::class, 'unlike'])->name('home.posts.unlike');
+    Route::post('/{username}/posts/{post}/rate', [CircleXOController::class, 'rate'])->name('home.posts.rate');
+});
diff --git a/app/Models/Account.php b/app/Models/Account.php
index c748bef..97f3699 100644
--- a/app/Models/Account.php
+++ b/app/Models/Account.php
@@ -9,6 +9,11 @@
 use Laravel\Sanctum\HasApiTokens;
 use Laravel\Scout\Searchable;
 use Modules\TomatoNotifications\App\Traits\InteractWithNotifications;
+use Multicaret\Acquaintances\Traits\CanBeLiked;
+use Multicaret\Acquaintances\Traits\CanBeRated;
+use Multicaret\Acquaintances\Traits\CanLike;
+use Multicaret\Acquaintances\Traits\CanRate;
+use Multicaret\Acquaintances\Traits\CanView;
 use Spatie\MediaLibrary\HasMedia;
 use Spatie\MediaLibrary\InteractsWithMedia;
 use Spatie\Permission\Traits\HasRoles;
@@ -47,7 +52,10 @@ class Account extends Authenticatable implements HasMedia
     use InteractsWithMedia;
     use HasApiTokens, HasFactory, Notifiable;
     use InteractWithNotifications;
-    use CanFollow, CanBeFollowed;
+    use CanFollow;
+    use CanBeFollowed;
+    use CanLike;
+    use CanView;
     use Searchable;
     /**
      * @var array
diff --git a/package.json b/package.json
index 82a1549..0103921 100644
--- a/package.json
+++ b/package.json
@@ -40,8 +40,11 @@
         "tippy.js": "^6.3.7",
         "vue-draggable-next": "^2.2.1",
         "vue-instantsearch": "^4.14.0",
+        "vue-social-sharing": "^4.0.0-alpha4",
         "vue3-carousel": "^0.3.1",
         "vue3-editor": "^0.1.1",
+        "vue3-recaptcha2": "^1.8.0",
+        "vue3-star-ratings": "^3.0.5",
         "vue3-swatches": "^1.2.3",
         "vue3-tel-input": "^1.0.4"
     }
diff --git a/resources/js/app.js b/resources/js/app.js
index 9f81a76..f955877 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -33,7 +33,10 @@ import InstantSearch from 'vue-instantsearch/vue3/es';
 import { MdEditor, MdPreview } from 'md-editor-v3';
 import 'md-editor-v3/lib/style.css';
 import Search from "./components/Search.vue";
+import vue3StarRatings from "vue3-star-ratings";
 
+import VueSocialSharing from 'vue-social-sharing';
+import Recap from "./components/Recap.vue";
 
 createApp({
     render: renderSpladeApp({ el })
@@ -45,6 +48,9 @@ createApp({
         view_transitions: false
     })
     .use(InstantSearch)
+    .use(VueSocialSharing)
+    .component("Recap", Recap)
+    .component("Rating", vue3StarRatings)
     .component("Search", Search)
     .component("Swiper", Swiper)
     .component("SwiperSlide", SwiperSlide)
diff --git a/resources/js/components/Recap.vue b/resources/js/components/Recap.vue
new file mode 100644
index 0000000..70882b0
--- /dev/null
+++ b/resources/js/components/Recap.vue
@@ -0,0 +1,64 @@
+<template>
+    <div>
+        <vue-recaptcha v-show="showRecaptcha" :sitekey="siteKey"
+                       size="normal"
+                       @verify="recaptchaVerified"
+                       @expire="recaptchaExpired"
+                       @fail="recaptchaFailed"
+                       ref="vueRecaptcha">
+        </vue-recaptcha>
+    </div>
+</template>
+
+<script>
+import vueRecaptcha from 'vue3-recaptcha2';
+
+export default {
+    components: {
+        vueRecaptcha
+    },
+
+    props: {
+        siteKey: {
+            type: String,
+            required: true,
+        },
+        modelValue: {
+            type: String
+        },
+        hasError: {
+            type: Boolean,
+        }
+    },
+
+    data() {
+        return {
+            value: "",
+            showRecaptcha: true
+        }
+    },
+
+    methods: {
+        verifyCallback() {
+        },
+        recaptchaVerified(response) {
+            this.value = response;
+        },
+        recaptchaExpired() {
+            this.$refs.vueRecaptcha.reset();
+        },
+        recaptchaFailed() {
+        }
+    },
+    watch: {
+        value: function (val) {
+            if (val) {
+                this.$emit('update:modelValue', val)
+            }
+        },
+        hasError: function () {
+            this.$refs.vueRecaptcha.reset();
+        }
+    },
+}
+</script>
diff --git a/yarn.lock b/yarn.lock
index 5309581..1e5cf53 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2556,6 +2556,11 @@ vue-instantsearch@^4.14.0:
     instantsearch.js "4.66.0"
     mitt "^2.1.0"
 
+vue-social-sharing@^4.0.0-alpha4:
+  version "4.0.0-alpha4"
+  resolved "https://registry.yarnpkg.com/vue-social-sharing/-/vue-social-sharing-4.0.0-alpha4.tgz#48d17f4ff2828c60689f2a065df86588af2bd1fb"
+  integrity sha512-hMbgpZkY5aRAiznSB/sgzdMVgdSbkmIHEaELX7pUbuUd6KS1Z/GAi7a/q0Qn+GFn0+6qMMvwyp3ZOE0+WYPQ1w==
+
 vue3-carousel@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/vue3-carousel/-/vue3-carousel-0.3.1.tgz#d001be7dea416dc2f4e66afc4d56af66696dc117"
@@ -2569,6 +2574,18 @@ vue3-editor@^0.1.1:
     core-js "^3.6.5"
     quill "^1.3.7"
 
+vue3-recaptcha2@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/vue3-recaptcha2/-/vue3-recaptcha2-1.8.0.tgz#4a50b0dbfa052568de347dc64d1839d02bdc3384"
+  integrity sha512-lICGpLGv9wsdVjgWZ0usbZ+Ki52YX5kOzjt8l/ADun9GxdjJ5/AkGpxE7dZ+mG3VcE4ASZG2B/nYWB4wWFadvQ==
+
+vue3-star-ratings@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/vue3-star-ratings/-/vue3-star-ratings-3.0.5.tgz#43f88467b9498208e6ba45baa213caadb76aeafe"
+  integrity sha512-V5k/T/7JoEq1VxhtJr1bVdDT181PqbSYMqhyj4myuMFBYXZ2f7bzAcmwFGEkoMmcIg3IVEhroBPUVtPQ4anQDQ==
+  dependencies:
+    vue "^3.3.4"
+
 vue3-swatches@^1.2.3:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/vue3-swatches/-/vue3-swatches-1.2.4.tgz#24821fd3af99c96ced47a15dbceea72299a8f5c5"
@@ -2584,7 +2601,7 @@ vue3-tel-input@^1.0.4:
     user "^0.0.0"
     vue "^3.0.0-beta.1"
 
-vue@^3.0.0-beta.1, vue@^3.2.41:
+vue@^3.0.0-beta.1, vue@^3.2.41, vue@^3.3.4:
   version "3.4.21"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.21.tgz#69ec30e267d358ee3a0ce16612ba89e00aaeb731"
   integrity sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==