diff --git a/backend/app/Http/Controllers/Api/AuthController.php b/backend/app/Http/Controllers/Api/AuthController.php
index 000d455..6f65e52 100644
--- a/backend/app/Http/Controllers/Api/AuthController.php
+++ b/backend/app/Http/Controllers/Api/AuthController.php
@@ -6,8 +6,10 @@
 use Illuminate\Http\Request;
 use App\Models\User;
 use Illuminate\Validation\ValidationException;
-use App\Http\Requests\StoreUserRequest; 
+use App\Http\Requests\{StoreUserRequest, GoogleRequest}; 
 use Illuminate\Support\Facades\Hash;
+use Laravel\Socialite\Socialite;
+
 
 class AuthController extends Controller
 {
@@ -54,4 +56,48 @@ public function logout(Request $request){
         $user->tokens()->delete();
         return response()->json(["message" => "Logged out successfully " . $user->name]);
     }
+
+
+
+
+
+    public function google(GoogleRequest $request)
+    {
+        $token = $request->validated()['token'];
+
+        try {
+            // userFromToken() works with access tokens 
+            // take access token from frontend and verify it 
+            $googleUser = Socialite::driver('google')
+                ->stateless()
+                ->userFromToken($token);
+
+        } catch (\Exception $e) {
+        return response()->json([
+            'message' => 'Invalid Google token',
+        ], 401);
+    }
+
+        $user = User::firstOrCreate(
+            ['email' => $googleUser->getEmail()],
+            [
+                'name'              => $googleUser->getName(),
+                'google_id'         => $googleUser->getId(),
+                'password'          => null,
+                'email_verified_at' => now(),
+            ]
+        );
+
+        if (!$user->google_id) {
+            $user->update([
+                'google_id' => $googleUser->getId(),
+            ]);
+            // google_id here in case the user changed their email but not their entire account 
+        }
+
+        $token = $user->createToken('api-token')->plainTextToken;
+
+        return response()->json(['token' => $token, 'user' => $user]);
+    }
+
 }
diff --git a/backend/app/Http/Controllers/Api/ChannelController.php b/backend/app/Http/Controllers/Api/ChannelController.php
new file mode 100644
index 0000000..b6c286e
--- /dev/null
+++ b/backend/app/Http/Controllers/Api/ChannelController.php
@@ -0,0 +1,75 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+use App\Models\Channel;
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use App\Http\Resources\ChannelResource;
+use App\Http\Requests\{StoreChannelRequest, UpdateChannelRequest};
+class ChannelController extends Controller
+{
+    public function __construct()
+    {
+        $this->authorizeResource(Channel::class, 'channel');
+    }
+
+
+
+
+    public function index(Request $request)
+    {
+        $type = $request->input('type'); // owned | joined
+
+        $query = match ($type) {
+            'owned'  => Channel::owned(auth()->user()),
+            'joined' => Channel::joined(auth()->user()),
+            default  => Channel::query(), 
+        };
+
+        $channels = $query
+            ->withCount('members')
+            ->latest()
+            ->paginate($this->paginate);
+
+        return ChannelResource::collection($channels);
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(StoreChannelRequest $request)
+    {
+        $channel = auth()->user()->channels()->create($request->validated());
+        return new ChannelResource($channel);
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(Channel $channel)
+    {
+        $channel->load(['members.user', 'invitations'])
+                ->loadCount('members');
+
+        return new ChannelResource($channel);
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(UpdateChannelRequest $request, Channel $channel)
+    {
+        $validated = $request->validated();
+        $channel->update($validated);
+        return new ChannelResource($channel);
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(Channel $channel)
+    {
+        $channel->delete();
+        return new ChannelResource($channel);
+    }
+}
diff --git a/backend/app/Http/Controllers/Api/CommentController.php b/backend/app/Http/Controllers/Api/CommentController.php
new file mode 100644
index 0000000..48379f9
--- /dev/null
+++ b/backend/app/Http/Controllers/Api/CommentController.php
@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Resources\CommentResource;
+use App\Http\Controllers\Controller;
+use App\Http\Requests\{StoreCommentRequest, UpdateCommentRequest};
+use App\Models\{Channel, Comment, SharedDay};
+
+class CommentController extends Controller
+{
+    public function index(SharedDay $sharedDay)
+    {
+        $this->authorize('viewAny', [Comment::class, $sharedDay->channel]);
+
+        return CommentResource::collection(
+            $sharedDay->comments()
+                ->with(['author', 'sharedDay.channel'])
+                ->latest()
+                ->paginate($this->paginate)
+        );
+    }
+
+    public function store(StoreCommentRequest $request, SharedDay $sharedDay)
+    {
+        $this->authorize('create', [Comment::class, $sharedDay->channel]);
+
+        $comment = $sharedDay->comments()->create([
+            ...$request->validated(),
+            'user_id' => auth()->id()
+        ]);
+
+        return new CommentResource($comment->load(['author', 'sharedDay.channel']));
+    }
+
+    public function update(UpdateCommentRequest $request, SharedDay $sharedDay, Comment $comment)
+    {
+        $this->authorize('update', $comment);
+
+        $comment->update($request->validated());
+
+        return new CommentResource($comment->load(['author', 'sharedDay.channel']));
+    }
+
+    public function destroy(SharedDay $sharedDay, Comment $comment)
+    {
+        $this->authorize('delete', [$comment, $sharedDay->channel]);
+
+        $comment->delete();
+
+        return new CommentResource($comment);
+    }
+
+}
diff --git a/backend/app/Http/Controllers/Api/InvitationController.php b/backend/app/Http/Controllers/Api/InvitationController.php
new file mode 100644
index 0000000..e0abc99
--- /dev/null
+++ b/backend/app/Http/Controllers/Api/InvitationController.php
@@ -0,0 +1,52 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+use Illuminate\Http\Request;
+use App\Models\{Channel, Invitation, User};
+use App\Http\Controllers\Controller;
+use App\Http\Requests\{StoreInvitationRequest, UpdateInvitationRequest};
+use App\Http\Resources\InvitationResource;
+use App\Services\{InvitationStatusService, InviteService};
+
+class InvitationController extends Controller
+{
+    public function index(Channel $channel)
+    {
+        $this->authorize('viewAny', [Invitation::class, $channel]);
+        $invitations = Invitation::query()
+            ->forChannel($channel)
+            ->pending()
+            ->with(['invitedUser', 'channel'])
+            ->latest()
+            ->paginate($this->paginate);
+
+
+        return InvitationResource::collection($invitations);
+    }
+
+
+
+    public function store(StoreInvitationRequest $request, Channel $channel, InviteService $service )
+    {
+        $validated = $request->validated();
+        $identifier = $validated['identifier'];
+        $invitation = $service->invite($identifier, $channel);
+        return new InvitationResource($invitation);
+    }
+
+    public function update(UpdateInvitationRequest $request, Channel $channel, Invitation $invitation, InvitationStatusService $service)
+    {
+        $validated = $request->validated();
+        $status = $validated['status'];
+
+        match ($status) {
+            'accepted'  => $this->authorize('accept', $invitation),
+            'declined'  => $this->authorize('decline', $invitation),
+            'cancelled' => $this->authorize('cancel', $invitation),
+        };
+
+        $service->changeStatus($invitation, $status, auth()->user());
+        return new InvitationResource($invitation);
+    }
+
+}
diff --git a/backend/app/Http/Controllers/Api/MeController.php b/backend/app/Http/Controllers/Api/MeController.php
new file mode 100644
index 0000000..5e128fa
--- /dev/null
+++ b/backend/app/Http/Controllers/Api/MeController.php
@@ -0,0 +1,43 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use Illuminate\Http\Request;
+use App\Http\Controllers\Controller;
+use App\Models\Invitation;
+use App\Http\Resources\{InvitationResource, SharedDayResource};
+
+class MeController extends Controller
+{
+    public function invitations(Request $request)
+    {
+        $invitations = Invitation::query()
+            ->received($request->user())
+            ->pending()
+            ->with(['invitedBy', 'channel'])
+            ->latest()
+            ->paginate($this->paginate);
+
+        return InvitationResource::collection($invitations);
+    }
+
+   public function sharedDays()
+    {
+        $sharedDays = auth()->user()
+            ->sharedDays()
+            ->with('channel')
+            ->get()
+            ->groupBy('date');
+
+        return $sharedDays->map(function ($days, $date) {
+            return [
+                'date'     => $date,
+                'channels' => $days->map(fn($day) => [
+                'id'         => $day->channel->id,
+                'name'       => $day->channel->name,
+                'shared_day_id' => $day->id,
+                ])
+            ];
+        })->values();
+    }
+}
\ No newline at end of file
diff --git a/backend/app/Http/Controllers/Api/ReportController.php b/backend/app/Http/Controllers/Api/ReportController.php
new file mode 100644
index 0000000..798c98c
--- /dev/null
+++ b/backend/app/Http/Controllers/Api/ReportController.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use App\Http\Requests\ReportRequest;
+use App\Services\ReportService;
+class ReportController extends Controller
+{
+public function index(ReportRequest $request, ReportService $service)
+    {
+        return $service->generate(auth()->id(),
+        $request->validated()['from'],
+        $request->validated()['to'],
+        $request->boolean('refresh'));
+    }
+
+
+}
diff --git a/backend/app/Http/Controllers/Api/SharedDayController.php b/backend/app/Http/Controllers/Api/SharedDayController.php
new file mode 100644
index 0000000..3a9925a
--- /dev/null
+++ b/backend/app/Http/Controllers/Api/SharedDayController.php
@@ -0,0 +1,68 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Models\{Channel, SharedDay};
+use App\Http\Controllers\Controller;
+use App\Http\Requests\StoreSharedDayRequest;
+use Illuminate\Support\Facades\DB;
+use App\Http\Resources\SharedDayResource;
+
+class SharedDayController extends Controller
+{
+    // GET /channels/{channel}/shared-days
+    public function index(Channel $channel)
+    {
+        $this->authorize('viewAny', $channel);
+
+        return SharedDayResource::collection(
+            $channel->sharedDays()->paginate($this->paginate)
+        );
+    }
+
+    // GET /channels/{channel}/shared-days/{shared_day}
+    public function show(Channel $channel, SharedDay $sharedDay)
+    {
+        $this->authorize('view', $channel);
+
+        return new SharedDayResource($sharedDay->load(['entries.timeEntry', 'channel']));
+    }
+
+    // POST /shared-days
+    public function store(StoreSharedDayRequest $request)
+    {
+        $sharedDays = collect();
+
+        DB::transaction(function () use ($request, &$sharedDays) {
+            foreach ($request->channel_ids as $channelId) {
+                $channel = Channel::findOrFail($channelId);
+                $this->authorize('create', [SharedDay::class, $channel]);
+
+                $sharedDay = SharedDay::firstOrCreate([
+                    'channel_id' => $channelId,
+                    'user_id'    => auth()->id(),
+                    'date'       => $request->date,
+                ]);
+
+                foreach ($request->entry_ids as $entryId) {
+                    $sharedDay->entries()->firstOrCreate([
+                        'time_entry_id' => $entryId
+                    ]);
+                }
+
+                $sharedDay->load(['entries.timeEntry', 'channel']);
+                $sharedDays->push($sharedDay);
+            }
+        });
+
+        return SharedDayResource::collection($sharedDays);
+    }
+
+    public function destroy(Channel $channel, SharedDay $sharedDay)
+    {
+        $this->authorize('delete', $sharedDay);
+
+        $sharedDay->delete();
+        return new SharedDayResource($sharedDay);
+    }
+}
diff --git a/backend/app/Http/Controllers/Api/TimeEntryController.php b/backend/app/Http/Controllers/Api/TimeEntryController.php
index 26fb53c..e07ea57 100644
--- a/backend/app/Http/Controllers/Api/TimeEntryController.php
+++ b/backend/app/Http/Controllers/Api/TimeEntryController.php
@@ -1,11 +1,10 @@
 <?php
 
-namespace App\Http\Controllers\Api; 
-use App\Http\Controllers\Controller;
-use App\Http\Requests\StoreTimeEntryRequest; 
-use App\Http\Requests\UpdateTimeEntryRequest; 
+namespace App\Http\Controllers\Api;
 use Illuminate\Http\Request;
-use App\Http\Resources\TimeEntryResource;
+use App\Http\Controllers\Controller;
+use App\Http\Requests\{StoreTimeEntryRequest, UpdateTimeEntryRequest};
+use App\Http\Resources\{DateResource, TimeEntryResource};
 use App\Models\TimeEntry;
 
 class TimeEntryController extends Controller
@@ -13,23 +12,25 @@ class TimeEntryController extends Controller
     public function index(Request $request)
     {
         $filters = $request->only(['date', 'sort', 'search', 'history']);
-        if ($request->boolean('history')) {
-            $dates = auth()->user()
-                ->time_entries()
-                ->history()
-                ->pluck('date');
 
-            return response()->json($dates);
-        }
+    if ($request->boolean('history')) {
+        $dates = auth()->user()
+            ->time_entries()
+            ->history()
+            ->paginate($this->paginate);
 
+        return DateResource::collection($dates);
+    }
+        // created an entirly new resource to handle the history to keep the pagination structure consistent throughout the app
         $time_entries = auth()->user()
             ->time_entries()
             ->search($filters)
-            ->paginate(15);
+            ->paginate($this->paginate);
 
         return TimeEntryResource::collection($time_entries);
     }
 
+
     public function store(StoreTimeEntryRequest $request)
     {
         $validated = $request->validated();
@@ -54,4 +55,4 @@ public function destroy(TimeEntry $time_entry)
         $time_entry->delete();
         return new TimeEntryResource($time_entry);
     }
-}
\ No newline at end of file
+}
diff --git a/backend/app/Http/Controllers/Api/UserController.php b/backend/app/Http/Controllers/Api/UserController.php
new file mode 100644
index 0000000..79f3a82
--- /dev/null
+++ b/backend/app/Http/Controllers/Api/UserController.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use App\Models\User;
+use App\Http\Resources\UserResource;
+class UserController extends Controller
+{
+    public function index(Request $request)
+    {
+        $identifier = $request->input("search");
+        $query = User::query();
+        $users = $query->searchByNameOrEmail($identifier)->get();
+        return UserResource::collection($users);
+
+    }
+
+
+}
diff --git a/backend/app/Http/Controllers/Controller.php b/backend/app/Http/Controllers/Controller.php
index 77ec359..2fa076b 100644
--- a/backend/app/Http/Controllers/Controller.php
+++ b/backend/app/Http/Controllers/Controller.php
@@ -9,4 +9,5 @@
 class Controller extends BaseController
 {
     use AuthorizesRequests, ValidatesRequests;
+    public int  $paginate = 10;
 }
diff --git a/backend/app/Http/Requests/GoogleRequest.php b/backend/app/Http/Requests/GoogleRequest.php
new file mode 100644
index 0000000..d6deeae
--- /dev/null
+++ b/backend/app/Http/Requests/GoogleRequest.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class GoogleRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            'token' => 'required|string'
+        ];
+    }
+}
diff --git a/backend/app/Http/Requests/ReportRequest.php b/backend/app/Http/Requests/ReportRequest.php
new file mode 100644
index 0000000..8a8701c
--- /dev/null
+++ b/backend/app/Http/Requests/ReportRequest.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class ReportRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            'from' => 'nullable|date|date_format:Y-m-d',
+            'to' => 'nullable|date|date_format:Y-m-d|after_or_equal:from'
+        ];
+    }
+}
diff --git a/backend/app/Http/Requests/StoreChannelRequest.php b/backend/app/Http/Requests/StoreChannelRequest.php
new file mode 100644
index 0000000..1ca842f
--- /dev/null
+++ b/backend/app/Http/Requests/StoreChannelRequest.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class StoreChannelRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            "name" => "required|max:255",
+        
+        ];
+    }
+}
diff --git a/backend/app/Http/Requests/StoreCommentRequest.php b/backend/app/Http/Requests/StoreCommentRequest.php
new file mode 100644
index 0000000..6d668cd
--- /dev/null
+++ b/backend/app/Http/Requests/StoreCommentRequest.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class StoreCommentRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            "body"=>"required|string|min:1|max:1000"
+        ];
+    }
+}
diff --git a/backend/app/Http/Requests/StoreInvitationRequest.php b/backend/app/Http/Requests/StoreInvitationRequest.php
new file mode 100644
index 0000000..0dbc74f
--- /dev/null
+++ b/backend/app/Http/Requests/StoreInvitationRequest.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class StoreInvitationRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            'identifier' => 'required|string',
+        ];
+    }
+}
diff --git a/backend/app/Http/Requests/StoreSharedDayRequest.php b/backend/app/Http/Requests/StoreSharedDayRequest.php
new file mode 100644
index 0000000..b58bbb4
--- /dev/null
+++ b/backend/app/Http/Requests/StoreSharedDayRequest.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Http\Requests;
+use App\Models\TimeEntry;
+use Illuminate\Foundation\Http\FormRequest;
+
+class StoreSharedDayRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    public function rules(): array
+    {
+        return [
+            'date'          => ['required', 'date'],
+            'channel_ids'   => ['required', 'array', 'min:1'],
+            'channel_ids.*' => ['required', 'exists:channels,id'],
+            'entry_ids'     => ['required', 'array', 'min:1'],
+            'entry_ids.*'   => ['required', 'exists:time_entries,id'],
+        ];
+    }
+
+    public function withValidator($validator): void
+    {
+        $validator->after(function ($validator) {
+
+            $entryIds = TimeEntry::where('user_id', auth()->id())
+                ->date($this->date)
+                ->pluck('id');
+
+            if ($entryIds->isEmpty()) {
+                $validator->errors()->add('date', 'This day has no time entries.');
+                return;
+            }
+
+            if ($this->entry_ids) {
+                $invalid = collect($this->entry_ids)->diff($entryIds);
+
+                if ($invalid->isNotEmpty()) {
+                    $validator->errors()->add(
+                        'entry_ids',
+                        'Some entries do not belong to this day or to you.'
+                    );
+                }
+            }
+        });
+    }
+}
\ No newline at end of file
diff --git a/backend/app/Http/Requests/UpdateChannelRequest.php b/backend/app/Http/Requests/UpdateChannelRequest.php
new file mode 100644
index 0000000..c66531b
--- /dev/null
+++ b/backend/app/Http/Requests/UpdateChannelRequest.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class UpdateChannelRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return false;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            "name" => "sometimes|max:255",
+        ];
+    }
+}
diff --git a/backend/app/Http/Requests/UpdateCommentRequest.php b/backend/app/Http/Requests/UpdateCommentRequest.php
new file mode 100644
index 0000000..13d2988
--- /dev/null
+++ b/backend/app/Http/Requests/UpdateCommentRequest.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class UpdateCommentRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            "body"=> "sometimes|string|min:1|max:255"
+        ];
+    }
+}
diff --git a/backend/app/Http/Requests/UpdateInvitationRequest.php b/backend/app/Http/Requests/UpdateInvitationRequest.php
new file mode 100644
index 0000000..f7de4e5
--- /dev/null
+++ b/backend/app/Http/Requests/UpdateInvitationRequest.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class UpdateInvitationRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            'status' => ['required', 'in:accepted,declined,cancelled'],
+        ];
+    }
+}
diff --git a/backend/app/Http/Requests/UpdateTimeEntryRequest.php b/backend/app/Http/Requests/UpdateTimeEntryRequest.php
index 8557441..5098744 100644
--- a/backend/app/Http/Requests/UpdateTimeEntryRequest.php
+++ b/backend/app/Http/Requests/UpdateTimeEntryRequest.php
@@ -11,7 +11,7 @@ class UpdateTimeEntryRequest extends FormRequest
      */
     public function authorize(): bool
     {
-        return false;
+        return true;
     }
 
     /**
diff --git a/backend/app/Http/Resources/ChannelResource.php b/backend/app/Http/Resources/ChannelResource.php
new file mode 100644
index 0000000..550b90a
--- /dev/null
+++ b/backend/app/Http/Resources/ChannelResource.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class ChannelResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return parent::toArray($request);
+    }
+}
diff --git a/backend/app/Http/Resources/CommentResource.php b/backend/app/Http/Resources/CommentResource.php
new file mode 100644
index 0000000..98e27c7
--- /dev/null
+++ b/backend/app/Http/Resources/CommentResource.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class CommentResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id'         => $this->id,
+            'body'       => $this->body,
+            'created_at' => $this->created_at->format('M d, Y h:i A'),
+            "shared_day_id" => $this->shared_day_id,
+            'author'     => new UserResource($this->whenLoaded('author')),
+            'can_edit'   => auth()->id() === $this->user_id,
+            'can_delete' => auth()->id() === $this->user_id ||
+                            $this->whenLoaded('sharedDay', fn() =>
+                                $this->sharedDay->channel->isOwner(auth()->user())
+                            , false)
+        ];
+    }
+}
diff --git a/backend/app/Http/Resources/DateResource.php b/backend/app/Http/Resources/DateResource.php
new file mode 100644
index 0000000..9cf8a10
--- /dev/null
+++ b/backend/app/Http/Resources/DateResource.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class DateResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return ['date'=>$this->date];
+    }
+}
diff --git a/backend/app/Http/Resources/InvitationResource.php b/backend/app/Http/Resources/InvitationResource.php
new file mode 100644
index 0000000..6d7f8b7
--- /dev/null
+++ b/backend/app/Http/Resources/InvitationResource.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class InvitationResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return parent::toArray($request);
+    }
+}
diff --git a/backend/app/Http/Resources/SharedDayEntryResource.php b/backend/app/Http/Resources/SharedDayEntryResource.php
new file mode 100644
index 0000000..496e59f
--- /dev/null
+++ b/backend/app/Http/Resources/SharedDayEntryResource.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use App\Http\Resources\TimeEntryResource;
+
+class SharedDayEntryResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @return array<string, mixed>
+     */
+    public function toArray($request): array
+    {
+        return [
+            'id'         => $this->id,
+            'time_entry' => new TimeEntryResource($this->timeEntry)
+        ];
+    }
+}
diff --git a/backend/app/Http/Resources/SharedDayResource.php b/backend/app/Http/Resources/SharedDayResource.php
new file mode 100644
index 0000000..fc16f66
--- /dev/null
+++ b/backend/app/Http/Resources/SharedDayResource.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class SharedDayResource extends JsonResource
+{
+    public function toArray($request): array
+    {
+        return [
+            'id'            => $this->id,
+            'date'          => $this->date->format('Y-m-d'),
+            'channel_id'    => $this->channel_id,
+            'total_time'    => $this->total_time,
+            'entries_count' => $this->entries_count,
+            'entries'       => SharedDayEntryResource::collection($this->whenLoaded('entries')),
+            'channel'       => new ChannelResource($this->whenLoaded('channel')),
+        ];
+    }
+}
\ No newline at end of file
diff --git a/backend/app/Http/Resources/TimeEntryResource.php b/backend/app/Http/Resources/TimeEntryResource.php
index 9d14946..96bdabd 100644
--- a/backend/app/Http/Resources/TimeEntryResource.php
+++ b/backend/app/Http/Resources/TimeEntryResource.php
@@ -22,7 +22,7 @@ public function toArray(Request $request): array
             'start_time' => $this->start_time->format('g:i a'),
             'end_time' => $this->end_time->format('g:i a'),
             'time_taken' => $this->time_taken,
-            'create_at' => $this->created_at
+            'created_at' => $this->created_at
             
               ];
     
diff --git a/backend/app/Http/Resources/UserResource.php b/backend/app/Http/Resources/UserResource.php
new file mode 100644
index 0000000..3b6b127
--- /dev/null
+++ b/backend/app/Http/Resources/UserResource.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class UserResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return parent::toArray($request);
+    }
+}
diff --git a/backend/app/Models/Channel.php b/backend/app/Models/Channel.php
new file mode 100644
index 0000000..188982c
--- /dev/null
+++ b/backend/app/Models/Channel.php
@@ -0,0 +1,70 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\{Builder, Model};
+use Illuminate\Database\Eloquent\Relations\{BelongsTo, HasMany};
+use Illuminate\Database\Eloquent\Casts\Attribute;
+class Channel extends Model
+{
+    use HasFactory;
+
+    protected $fillable = ['user_id', 'name', 'description'];
+
+    public function owner(): BelongsTo
+    {
+        return $this->belongsTo(User::class, 'user_id');
+    }
+
+    public function members(): HasMany
+    {
+        return $this->hasMany(Member::class);
+    }
+
+
+    public function invitations(): HasMany
+    {
+        return $this->hasMany(Invitation::class);
+    }
+
+    public function sharedDays(): HasMany
+    {
+        return $this->hasMany(SharedDay::class);
+    }
+
+    public function scopeOwned(Builder $query, User $user): Builder{
+        return $query->where('user_id', $user->id);
+    }
+
+    public function scopeJoined(Builder $query, User $user ): Builder{
+        return $query->whereHas('members', fn($q) => $q->where('user_id', $user->id));
+    }
+    public function isOwner(User $user): bool{
+        return $this->user_id === $user->id;
+    }
+    public function isMember(User $user): bool{
+        return $this->members()->where('user_id', $user->id)->exists();
+    }
+    public function isOwnerOrMember(User $user): bool{
+        return $this->isOwner($user) || $this->isMember($user);
+    }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    
+}
diff --git a/backend/app/Models/Comment.php b/backend/app/Models/Comment.php
new file mode 100644
index 0000000..bb31f52
--- /dev/null
+++ b/backend/app/Models/Comment.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class Comment extends Model
+{
+    use HasFactory;
+
+    protected $fillable = ['shared_day_id', 'user_id', 'body'];
+    protected $casts = [
+        'created_at' => 'datetime: M d, Y h:i A',
+    ];
+
+    public function sharedDay(): BelongsTo
+    {
+        return $this->belongsTo(SharedDay::class);
+    }
+
+    public function author(): BelongsTo
+    {
+        return $this->belongsTo(User::class, 'user_id');
+    }
+}
diff --git a/backend/app/Models/Invitation.php b/backend/app/Models/Invitation.php
new file mode 100644
index 0000000..a278702
--- /dev/null
+++ b/backend/app/Models/Invitation.php
@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Models;
+
+use App\Models\Channel;
+use App\Models\InvitationLog;
+use App\Models\User;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\HasMany;
+
+class Invitation extends Model
+{
+    use HasFactory;
+
+    protected $fillable = ['channel_id', 'invited_id', 'invited_by_id', 'status'];
+
+    public function channel(): BelongsTo
+    {
+        return $this->belongsTo(Channel::class);
+    }
+
+    public function invitedUser(): BelongsTo
+    {
+        return $this->belongsTo(User::class, 'invited_id');
+    }
+
+    public function invitedBy(): BelongsTo
+    {
+        return $this->belongsTo(User::class, 'invited_by_id');
+    }
+
+    public function logs(): HasMany
+    {
+        return $this->hasMany(InvitationLog::class);
+    }
+
+    public function scopePending(Builder $query): Builder
+    {
+        return $query->where('status', 'pending');
+    }
+
+    public function scopeReceived(Builder $query, User $user): Builder
+    {
+        return $query->where('invited_id', $user->id);
+    }
+
+    public function scopeForChannel(Builder $query, Channel $channel): Builder
+    {
+        return $query->where('channel_id', $channel->id);
+    }
+}
diff --git a/backend/app/Models/InvitationLog.php b/backend/app/Models/InvitationLog.php
new file mode 100644
index 0000000..5664126
--- /dev/null
+++ b/backend/app/Models/InvitationLog.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\HasMany;
+class InvitationLog extends Model
+{
+    protected $fillable = ['invitation_id', 'user_id', 'action'];
+    use HasFactory;
+    public function invitation(): BelongsTo{
+        return $this->belongsTo(Invitation::class);
+    }
+    public function changed_by(): BelongsTo{
+        return $this->belongsTo(User::class);
+    }
+
+}
diff --git a/backend/app/Models/Member.php b/backend/app/Models/Member.php
new file mode 100644
index 0000000..56914ad
--- /dev/null
+++ b/backend/app/Models/Member.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class Member extends Model
+{
+    use HasFactory;
+
+    protected $fillable = ['channel_id', 'user_id'];
+
+    public function channel(): BelongsTo
+    {
+        return $this->belongsTo(Channel::class);
+    }
+
+    public function user(): BelongsTo
+    {
+        return $this->belongsTo(User::class);
+    }
+}
diff --git a/backend/app/Models/SharedDay.php b/backend/app/Models/SharedDay.php
new file mode 100644
index 0000000..e2189a8
--- /dev/null
+++ b/backend/app/Models/SharedDay.php
@@ -0,0 +1,61 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Casts\Attribute;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class SharedDay extends Model
+{
+    use HasFactory;
+
+    protected $fillable = ['channel_id', 'user_id', 'date'];
+
+    protected $casts = [
+        'date' => 'date:Y-m-d',
+    ];
+    protected $appends = ['entries_count', 'total_hours'];
+
+    public function channel()
+    {
+        return $this->belongsTo(Channel::class);
+    }
+
+    public function sharedBy()
+    {
+        return $this->belongsTo(User::class, 'user_id');
+    }
+
+    public function entries()
+    {
+        return $this->hasMany(SharedDayEntry::class);
+    }
+
+    public function comments()
+    {
+        return $this->hasMany(Comment::class);
+    }
+    protected function totalTime(): Attribute
+        {
+            return Attribute::make(
+                get: function () {
+                    $totalMinutes = $this->entries->sum(function ($entry) {
+                        $timeTaken = $entry->timeEntry->time_taken;
+                        return ($timeTaken['hours'] * 60) + $timeTaken['minutes'];
+                    });
+
+                    return [
+                        'hours'   => intdiv($totalMinutes, 60),
+                        'minutes' => $totalMinutes % 60
+                    ];
+                }
+            );
+        }
+    protected function entriesCount() : Attribute
+    {
+        return Attribute::make(
+            get: fn()=> $this->entries()->count()
+        );
+    }    
+}
diff --git a/backend/app/Models/SharedDayEntry.php b/backend/app/Models/SharedDayEntry.php
new file mode 100644
index 0000000..44da113
--- /dev/null
+++ b/backend/app/Models/SharedDayEntry.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class SharedDayEntry extends Model
+{
+    use HasFactory;
+
+    protected $fillable = ['shared_day_id', 'time_entry_id'];
+
+    public function sharedDay(): BelongsTo
+    {
+        return $this->belongsTo(SharedDay::class);
+    }
+
+    public function timeEntry(): BelongsTo
+    {
+        return $this->belongsTo(TimeEntry::class);
+    }
+}
diff --git a/backend/app/Models/TimeEntry.php b/backend/app/Models/TimeEntry.php
index 77aede0..550ed21 100644
--- a/backend/app/Models/TimeEntry.php
+++ b/backend/app/Models/TimeEntry.php
@@ -3,32 +3,30 @@
 namespace App\Models;
 
 use Illuminate\Database\Eloquent\Factories\HasFactory;
-use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\{Builder, Model};
 use Illuminate\Database\Eloquent\Casts\Attribute;
 use Illuminate\Support\Carbon;
-use Illuminate\Database\Eloquent\Builder;
 class TimeEntry extends Model
 {
     use HasFactory;
-    
+
     protected $fillable = [
         'user_id',
         'label',
         'start_time',
         'end_time',
     ];
-    
+
     protected $casts = [
         'created_at' => 'datetime:Y-m-d',
-        'start_time' => 'datetime',
-        'end_time' => 'datetime'
+        'start_time' => 'datetime:h:i A',
+        'end_time'   => 'datetime:h:i A',
     ];
-    
     public function user()
     {
         return $this->belongsTo(User::class);
     }
-    
+
     protected function timeTaken(): Attribute
     {
         return Attribute::make(
@@ -40,55 +38,76 @@ protected function timeTaken(): Attribute
     }
 
 
-public function scopeDate(Builder $query, string $date): Builder
+public function scopeDate(Builder $query, $date): Builder
 {
-    return $query->whereDate(
-        'created_at',
-        Carbon::parse($date)
-    );
+    $date = $date instanceof Carbon ? $date : Carbon::parse($date);
+
+    return $query
+        ->where('created_at', '>=', $date->copy()->startOfDay())
+        ->where('created_at', '<', $date->copy()->addDay()->startOfDay());
+        // I added copy() because these carbon methdods actullay mutate the instance so we end up ranging the same value
 }
+        
+
 
 public function scopeToday(Builder $query): Builder
 {
-    return $query->whereDate(
-        'created_at', 
-        today()  
-    );
+    return $query->date(today());
 }
+
 public function scopeSearchByLabel(Builder $query, string $search): Builder {
     return $query->where('label', 'LIKE', '%' . $search . '%');
 }
 
 public function scopeSort(Builder $query, string $sort): Builder
 {
-     $query->when($sort ?? null, 
-        fn($q, $sort) => $q->orderBy('created_at', $sort), 
+     $query->when($sort ?? null,
+        fn($q, $sort) => $q->orderBy('created_at', $sort),
         fn($q) => $q->orderBy('created_at', 'desc')
     );
     return $query;
 
 }
 
+
 public function scopeHistory(Builder $query): Builder
 {
     return $query->selectRaw('DATE(created_at) as date')
-            ->distinct()
+            ->groupBy('date')
             ->orderBy('date', 'desc');
-
 }
-
 public function scopeSearch($query, array $filters): Builder
 {
-    $query->when($filters['date'] ?? null, 
-        fn($q, $date) => $q->date($date), 
+    $query->when($filters['date'] ?? null,
+        fn($q, $date) => $q->date($date),
         fn($q) => $q->today()
     )
-    ->when($filters['sort'] ?? null, 
+    ->when($filters['sort'] ?? null,
         fn($q, $sort) => $q->sort($sort)
     )
     ->when($filters['search']?? null,
     fn($q,$search)=> $q->searchByLabel($search))
     ;
-    
-    return $query;  
-}}
\ No newline at end of file
+
+    return $query;
+}
+
+
+public function scopeInRange($query, ?string $from, ?string $to): Builder
+{
+    $from = $from
+        ? Carbon::parse($from)->startOfDay()
+        : Carbon::parse($query->min('created_at') ?? now()->subYear())->startOfDay();
+
+    $to = $to
+        ? Carbon::parse($to)->endOfDay()
+        : now()->endOfDay();
+
+    return $query->whereBetween('created_at', [$from, $to]);
+}
+// new
+public function sharedDayEntries()
+{
+    return $this->hasMany(SharedDayEntry::class);
+}
+}
diff --git a/backend/app/Models/User.php b/backend/app/Models/User.php
index 644ad90..a209780 100644
--- a/backend/app/Models/User.php
+++ b/backend/app/Models/User.php
@@ -7,14 +7,39 @@
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
 use Laravel\Sanctum\HasApiTokens;
+use Illuminate\Database\Eloquent\Builder;
 
 class User extends Authenticatable
 {
     use HasApiTokens, HasFactory, Notifiable;
-    public function time_entries(){
 
+    public function time_entries(){
         return $this->hasMany(TimeEntry::class);
-                                }
+    }
+    public function channels()
+    {
+        return $this->hasMany(Channel::class);
+    }
+
+    public function memberships()
+    {
+        return $this->hasMany(Member::class);
+    }
+
+    public function invitations()
+    {
+        return $this->hasMany(Invitation::class);
+    }
+
+    public function sharedDays()
+    {
+        return $this->hasMany(SharedDay::class);
+    }
+
+    public function comments()
+    {
+        return $this->hasMany(Comment::class);
+    }
 
     /**
      * The attributes that are mass assignable.
@@ -24,7 +49,6 @@ public function time_entries(){
     protected $fillable = [
         'name',
         'email',
-        'password',
     ];
 
     /**
@@ -46,4 +70,10 @@ public function time_entries(){
         'email_verified_at' => 'datetime',
         'password' => 'hashed',
     ];
+
+    public function scopeSearchByNameOrEmail(Builder $query, string $search): ?Builder {
+        return $query->where('name', 'LIKE', '%' . $search . '%')
+        ->orWhere('email', 'LIKE', '%' . $search . '%')
+        ;
+    }
 }
diff --git a/backend/app/Observers/InvitationObserver.php b/backend/app/Observers/InvitationObserver.php
new file mode 100644
index 0000000..37d7d8a
--- /dev/null
+++ b/backend/app/Observers/InvitationObserver.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Observers;
+
+use App\Models\Invitation;
+use App\Models\InvitationLog;
+
+class InvitationObserver
+{
+
+    public function created(Invitation $invitation): void
+    {
+        InvitationLog::create([
+            'invitation_id' => $invitation->id,
+            'user_id'       => $invitation->invited_by_id,
+            'action'        => 'sent',
+        ]);
+    }
+
+    public function updated(Invitation $invitation): void
+        {
+            if (! $invitation->wasChanged('status')) {
+                return;
+            }
+
+            if (! in_array($invitation->status, ['accepted', 'declined', 'cancelled'], true)) {
+                return;
+            }
+
+            InvitationLog::create([
+                'invitation_id' => $invitation->id,
+                'user_id'       => in_array($invitation->status, ['accepted', 'declined'], true)
+                    ? $invitation->invited_id
+                    : $invitation->invited_by_id, 
+                'action'        => $invitation->status,
+            ]);
+        }
+}
diff --git a/backend/app/Observers/TimeEntryObserver.php b/backend/app/Observers/TimeEntryObserver.php
new file mode 100644
index 0000000..e73bc0e
--- /dev/null
+++ b/backend/app/Observers/TimeEntryObserver.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Observers;
+
+use App\Models\TimeEntry;
+
+class TimeEntryObserver
+{
+    public function creating(TimeEntry $entry): void
+    {
+        $entry->duration_minutes = $entry->start_time->diffInMinutes($entry->end_time);
+    }
+
+    public function updating(TimeEntry $entry): void
+    {
+        $entry->duration_minutes = $entry->start_time->diffInMinutes($entry->end_time);
+    }
+}
diff --git a/backend/app/Policies/ChannelPolicy.php b/backend/app/Policies/ChannelPolicy.php
new file mode 100644
index 0000000..565b170
--- /dev/null
+++ b/backend/app/Policies/ChannelPolicy.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Policies;
+use App\Models\{Channel, User};
+
+class ChannelPolicy
+{
+    public function viewAny(User $user): bool
+    {
+        return true;
+    }
+
+    public function view(User $user, Channel $channel): bool
+    {
+            return $channel->isOwnerOrMember($user);
+    }
+
+    public function create(User $user): bool
+    {
+        return true;
+    }
+
+    public function update(User $user, Channel $channel): bool
+    {
+        return $channel->isOwner($user);
+    }
+
+    public function delete(User $user, Channel $channel): bool
+    {
+        return $channel->isOwner($user);
+    }
+
+ 
+}
diff --git a/backend/app/Policies/CommentPolicy.php b/backend/app/Policies/CommentPolicy.php
new file mode 100644
index 0000000..20e4742
--- /dev/null
+++ b/backend/app/Policies/CommentPolicy.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Policies;
+
+use App\Models\{Channel, Comment, User};
+
+class CommentPolicy
+{
+    public function viewAny(User $user, Channel $channel): bool
+    {
+        return $channel->isOwnerOrMember($user);
+    }
+
+    public function create(User $user, Channel $channel): bool
+    {
+        return $channel->isOwnerOrMember($user);
+    }
+
+    public function update(User $user, Comment $comment): bool
+    {
+        return $comment->user_id === $user->id;
+    }
+
+    public function delete(User $user, Comment $comment, Channel $channel): bool
+    {
+        return $comment->user_id === $user->id || $channel->isOwner($user);
+    }
+}
\ No newline at end of file
diff --git a/backend/app/Policies/InvitationPolicy.php b/backend/app/Policies/InvitationPolicy.php
new file mode 100644
index 0000000..8f9b6e4
--- /dev/null
+++ b/backend/app/Policies/InvitationPolicy.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Policies;
+
+use Illuminate\Auth\Access\Response;
+use App\Models\{Channel, Invitation, User};
+
+class InvitationPolicy
+{
+    public function viewAny(User $user, Channel $channel): bool
+    {
+        return $channel->isOwner($user);
+    }
+    public function create(User $user, Channel $channel): bool
+    {
+        return $channel->isOwner($user);
+    }
+
+    public function accept(User $user, Invitation $invitation): Response
+    {
+        if ($invitation->status !== 'pending') {
+            return Response::deny('This invitation is no longer pending.');
+        }
+
+        return $user->id === $invitation->invited_id
+            ? Response::allow()
+            : Response::deny('You are not the invited user for this invitation.');
+    }
+
+    public function decline(User $user, Invitation $invitation): Response
+    {
+        if ($invitation->status !== 'pending') {
+            return Response::deny('This invitation is no longer pending.');
+        }
+
+        return $user->id === $invitation->invited_id
+            ? Response::allow()
+            : Response::deny('You are not the invited user for this invitation.');
+    }
+
+    public function cancel(User $user, Invitation $invitation): Response
+    {
+        if ($invitation->status !== 'pending') {
+            return Response::deny('Only pending invitations can be cancelled.');
+        }
+
+        return $user->id === $invitation->invited_by_id
+            ? Response::allow()
+            : Response::deny('You are not allowed to cancel this invitation.');
+    }
+}
diff --git a/backend/app/Policies/SharedDayPolicy.php b/backend/app/Policies/SharedDayPolicy.php
new file mode 100644
index 0000000..c209967
--- /dev/null
+++ b/backend/app/Policies/SharedDayPolicy.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Policies;
+
+
+use App\Models\{Channel, SharedDay, User};
+
+class SharedDayPolicy
+{
+
+
+    public function viewAny(User $user, Channel $channel): bool
+    {
+        return $channel->isOwnerOrMember($user);
+    }
+
+    public function view(User $user, Channel $channel): bool
+    {
+        return $channel->isOwnerOrMember($user);
+    }
+    public function create(User $user, Channel $channel): bool
+    {   
+        return $channel->isOwner($user) ;   
+    }
+
+    public function delete(User $user, SharedDay $sharedDay): bool
+    {
+        return $user->id === $sharedDay->user_id;
+    }
+
+
+}
diff --git a/backend/app/Providers/AppServiceProvider.php b/backend/app/Providers/AppServiceProvider.php
index 452e6b6..c4362b2 100644
--- a/backend/app/Providers/AppServiceProvider.php
+++ b/backend/app/Providers/AppServiceProvider.php
@@ -3,7 +3,10 @@
 namespace App\Providers;
 
 use Illuminate\Support\ServiceProvider;
-
+use App\Models\Invitation;
+use App\Models\TimeEntry;
+use App\Observers\InvitationObserver;
+use App\Observers\TimeEntryObserver;
 class AppServiceProvider extends ServiceProvider
 {
     /**
@@ -19,6 +22,7 @@ public function register(): void
      */
     public function boot(): void
     {
-        //
+        TimeEntry::observe(TimeEntryObserver::class);
+        Invitation::observe(InvitationObserver::class);
     }
 }
diff --git a/backend/app/Providers/EventServiceProvider.php b/backend/app/Providers/EventServiceProvider.php
index 2d65aac..e027396 100644
--- a/backend/app/Providers/EventServiceProvider.php
+++ b/backend/app/Providers/EventServiceProvider.php
@@ -18,6 +18,10 @@ class EventServiceProvider extends ServiceProvider
         Registered::class => [
             SendEmailVerificationNotification::class,
         ],
+        \SocialiteProviders\Manager\SocialiteWasCalled::class => [
+        // ... other providers
+        \SocialiteProviders\Google\GoogleExtendSocialite::class.'@handle',
+    ],
     ];
 
     /**
diff --git a/backend/app/Providers/TelescopeServiceProvider.php b/backend/app/Providers/TelescopeServiceProvider.php
new file mode 100644
index 0000000..4de2a6b
--- /dev/null
+++ b/backend/app/Providers/TelescopeServiceProvider.php
@@ -0,0 +1,65 @@
+<?php
+
+namespace App\Providers;
+
+use App\Models\User;
+use Illuminate\Support\Facades\Gate;
+use Laravel\Telescope\IncomingEntry;
+use Laravel\Telescope\Telescope;
+use Laravel\Telescope\TelescopeApplicationServiceProvider;
+
+class TelescopeServiceProvider extends TelescopeApplicationServiceProvider
+{
+    /**
+     * Register any application services.
+     */
+    public function register(): void
+    {
+        // Telescope::night();
+
+        $this->hideSensitiveRequestDetails();
+
+        $isLocal = $this->app->environment('local');
+
+        Telescope::filter(function (IncomingEntry $entry) use ($isLocal) {
+            return $isLocal ||
+                   $entry->isReportableException() ||
+                   $entry->isFailedRequest() ||
+                   $entry->isFailedJob() ||
+                   $entry->isScheduledTask() ||
+                   $entry->hasMonitoredTag();
+        });
+    }
+
+    /**
+     * Prevent sensitive request details from being logged by Telescope.
+     */
+    protected function hideSensitiveRequestDetails(): void
+    {
+        if ($this->app->environment('local')) {
+            return;
+        }
+
+        Telescope::hideRequestParameters(['_token']);
+
+        Telescope::hideRequestHeaders([
+            'cookie',
+            'x-csrf-token',
+            'x-xsrf-token',
+        ]);
+    }
+
+    /**
+     * Register the Telescope gate.
+     *
+     * This gate determines who can access Telescope in non-local environments.
+     */
+    protected function gate(): void
+    {
+        Gate::define('viewTelescope', function (User $user) {
+            return in_array($user->email, [
+                //
+            ]);
+        });
+    }
+}
diff --git a/backend/app/Services/InvitationStatusService.php b/backend/app/Services/InvitationStatusService.php
new file mode 100644
index 0000000..54114a2
--- /dev/null
+++ b/backend/app/Services/InvitationStatusService.php
@@ -0,0 +1,63 @@
+<?php
+
+namespace App\Services;
+
+use App\Models\Invitation;
+use App\Models\Member;
+use App\Models\User;
+use Illuminate\Support\Facades\DB;
+use InvalidArgumentException;
+use DomainException;
+
+class InvitationStatusService
+{
+    public function changeStatus(Invitation $invitation, string $status, User $actor): void
+    {
+        match ($status) {
+            'accepted'  => $this->accept($invitation, $actor),
+            'declined'  => $this->decline($invitation, $actor),
+            'cancelled' => $this->cancel($invitation, $actor),
+            default     => throw new InvalidArgumentException('Invalid status value.'),
+        };
+    }
+
+    public function accept(Invitation $invitation, User $actor): void
+    {
+        if ($invitation->status !== 'pending') {
+            throw new DomainException('Invitation is not pending.');
+        }
+
+        DB::transaction(function () use ($invitation, $actor) {
+            $invitation->update([
+                'status' => 'accepted',
+            ]);
+
+            Member::firstOrCreate([
+                'user_id'    => $actor->id,
+                'channel_id' => $invitation->channel_id,
+            ]);
+        });
+    }
+
+    public function decline(Invitation $invitation, User $actor): void
+    {
+        if ($invitation->status !== 'pending') {
+            throw new DomainException('Invitation is not pending.');
+        }
+
+        $invitation->update([
+            'status' => 'declined',
+        ]);
+    }
+
+    public function cancel(Invitation $invitation, User $actor): void
+    {
+        if ($invitation->status !== 'pending') {
+            throw new DomainException('Invitation is not pending.');
+        }
+
+        $invitation->update([
+            'status' => 'cancelled',
+        ]);
+    }
+}
diff --git a/backend/app/Services/InviteService.php b/backend/app/Services/InviteService.php
new file mode 100644
index 0000000..24912da
--- /dev/null
+++ b/backend/app/Services/InviteService.php
@@ -0,0 +1,81 @@
+<?php
+
+namespace App\Services;
+
+use App\Models\Channel;
+use App\Models\Invitation;
+use App\Models\User;
+use Illuminate\Validation\ValidationException;
+
+class InviteService
+{
+    public function invite(string $identifier, Channel $channel): Invitation
+    {
+        $user = $this->findUser($identifier);
+
+        if (! $user) {
+            throw ValidationException::withMessages([
+                'identifier' => ['User not found for the given identifier.'],
+            ]);
+        }
+
+        $this->ensureNotOwner($user, $channel);
+        $this->ensureNotMember($user, $channel);
+
+        return $this->updateOrCreate($user, $channel);
+    }
+
+    private function findUser(string $identifier): ?User
+    {
+        return User::query()
+            ->where('email', $identifier)
+            ->orWhere('name', $identifier)
+            ->first();
+    }
+
+    private function ensureNotOwner(User $user, Channel $channel): void
+    {
+        if ($channel->isOwner($user)) {
+            throw ValidationException::withMessages([
+                'identifier' => ['You cannot invite the channel owner.'],
+            ]);
+        }
+    }
+
+    private function ensureNotMember(User $user, Channel $channel): void
+    {
+        if ($channel->isMember($user)) {
+            throw ValidationException::withMessages([
+                'identifier' => ['This user is already a member of this channel.'],
+            ]);
+        }
+    }
+
+    private function updateOrCreate(User $user, Channel $channel): Invitation
+    {
+        $existing = Invitation::where('channel_id', $channel->id)
+            ->where('invited_id', $user->id)
+            ->first();
+
+        if ($existing && in_array($existing->status, ['declined', 'cancelled'], true)) {
+            $existing->update([
+                'status' => 'pending',
+            ]);
+
+            return $existing->refresh();
+        }
+
+        if ($existing) {
+            throw ValidationException::withMessages([
+                'identifier' => ['User already has a pending invitation to this channel.'],
+            ]);
+        }
+
+        return Invitation::create([
+            'channel_id'    => $channel->id,
+            'invited_id'    => $user->id,
+            'invited_by_id' => $channel->user_id,
+            'status'        => 'pending',
+        ]);
+    }
+}
diff --git a/backend/app/Services/ReportService.php b/backend/app/Services/ReportService.php
new file mode 100644
index 0000000..49a9a1b
--- /dev/null
+++ b/backend/app/Services/ReportService.php
@@ -0,0 +1,151 @@
+<?php
+namespace App\Services;
+use Illuminate\Support\Facades\{Cache, DB};
+use App\Models\TimeEntry;
+class ReportService
+{
+
+    public function generate(int $userId, ?string $from, ?string $to, ?bool $refresh = false): array
+    {
+        $cacheKey = "report_{$userId}_{$from}_{$to}";
+        if($refresh){
+            Cache::forget($cacheKey);
+        }
+        return Cache::remember($cacheKey, now()->addHours(24), function () use($userId, $from, $to) {
+            return [
+            'quick_stats'          => $this->quickStats($userId, $from, $to),
+            'total_time_by_label'  => $this->totalTimeByLabel($userId, $from, $to),
+            'most_used_labels'     => $this->mostUsedLabels($userId, $from, $to),
+            'avg_time_per_label'   => $this->avgTimePerLabel($userId, $from, $to),
+            'avg_labels_per_day'   => $this->avgLabelsPerDay($userId, $from, $to),
+        ];
+
+        });
+
+    }
+
+    private function quickStats(int $userId, ?string $from, ?string $to): array {
+    $stats = TimeEntry::where('user_id', $userId)
+        ->inRange($from, $to)
+        ->selectRaw('
+            COUNT(*) as total_entries,
+            SUM(duration_minutes) as total_minutes,
+            COUNT(DISTINCT DATE(created_at)) as total_days
+
+        ')
+        ->first();
+        // here since I added a compound index  "idx_user_created" the sum and date functions 
+        // won't do a full table scan rather it will just scan the rows that satisfy the condition .
+
+    $totalMinutes     = $stats->total_minutes ?? 0;
+    $totalDays        = $stats->total_days ?? 1;
+    $avgMinutesPerDay = $totalDays > 0 ? intdiv($totalMinutes, $totalDays) : 0;
+
+    return [
+        'total_entries'       => $stats->total_entries ?? 0,
+        'total_hours'         => intdiv($totalMinutes, 60),
+        'total_minutes'       => $totalMinutes % 60,
+        'total_days'          => $totalDays,
+        'avg_hours_per_day'   => intdiv($avgMinutesPerDay, 60),
+        'avg_minutes_per_day' => $avgMinutesPerDay % 60,
+    ];
+
+    }
+
+
+    private function totalTimeByLabel(int $userId, ?string $from, ?string $to): array
+    {
+        return TimeEntry::where('user_id', $userId)
+            ->inRange($from, $to)
+            ->selectRaw('
+                label,
+                SUM(duration_minutes) as total_minutes,
+                FLOOR(SUM(duration_minutes) / 60) as hours,
+                MOD(SUM(duration_minutes), 60) as minutes
+            ')
+            ->groupBy('label')
+            ->orderByDesc('total_minutes')
+            ->get()
+            ->toArray();
+    }
+
+
+
+
+    private function mostUsedLabels(int $userId, ?string $from, ?string $to): array
+    {
+        $totalMinutes = TimeEntry::where('user_id', $userId)
+            ->inRange($from, $to)
+            ->sum('duration_minutes');
+
+        $rows = TimeEntry::where('user_id', $userId)
+            ->inRange($from, $to)
+            ->selectRaw('label, SUM(duration_minutes) as total_minutes')
+            ->groupBy('label')
+            ->orderByDesc('total_minutes')
+            ->get();
+
+        $top5    = $rows->take(5);
+        $others  = $rows->skip(5);
+
+        $result = $top5->map(fn($row) => [
+            'label'      => $row->label,
+            'hours'      => intdiv($row->total_minutes, 60),
+            'minutes'    => $row->total_minutes % 60,
+            'percentage' => $totalMinutes > 0
+                ? round(($row->total_minutes / $totalMinutes) * 100, 1)
+                : 0
+        ])->toArray();
+
+        if ($others->isNotEmpty()) {
+            $othersMinutes = $others->sum('total_minutes');
+            $result[] = [
+                'label'      => 'Other',
+                'hours'      => intdiv($othersMinutes, 60),
+                'minutes'    => $othersMinutes % 60,
+                'percentage' => $totalMinutes > 0
+                    ? round(($othersMinutes / $totalMinutes) * 100, 1)
+                    : 0
+            ];
+        }
+
+        return $result;
+    }
+
+
+
+
+
+    private function avgTimePerLabel(int $userId, ?string $from, ?string $to): array
+    {
+        return TimeEntry::where('user_id', $userId)
+            ->inRange($from, $to)
+            ->selectRaw('
+                label,
+                AVG(duration_minutes) as avg_minutes,
+                FLOOR(AVG(duration_minutes) / 60) as hours,
+                MOD(AVG(duration_minutes), 60) as minutes
+            ')
+            ->groupBy('label')
+            ->orderByDesc('avg_minutes')
+            ->get()
+            ->toArray();
+    }
+    private function avgLabelsPerDay(int $userId, ?string $from, ?string $to): float
+    {
+        $result = DB::select("
+            SELECT ROUND(AVG(label_count), 1) as avg_labels
+            FROM (
+                SELECT COUNT(DISTINCT label) as label_count
+                FROM time_entries
+                WHERE user_id = ?
+                AND created_at BETWEEN ? AND ?
+                GROUP BY DATE(created_at)
+            ) as daily_counts
+        ", [$userId, $from, $to]);
+
+        return $result[0]->avg_labels ?? 0;
+    }
+
+
+}
diff --git a/backend/app/Services/ServiceReport.php b/backend/app/Services/ServiceReport.php
new file mode 100644
index 0000000..f9dc26f
--- /dev/null
+++ b/backend/app/Services/ServiceReport.php
@@ -0,0 +1,9 @@
+<?php
+namespace App\Services;
+
+use App\Models\TimeEntry;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Support\Facades\Cache;
+class ServiceReport{
+
+}
diff --git a/backend/composer.json b/backend/composer.json
index 8a3d72d..bcd6719 100644
--- a/backend/composer.json
+++ b/backend/composer.json
@@ -9,7 +9,10 @@
         "guzzlehttp/guzzle": "^7.2",
         "laravel/framework": "^10.10",
         "laravel/sanctum": "^3.3",
-        "laravel/tinker": "^2.8"
+        "laravel/telescope": "^5.20",
+        "laravel/tinker": "^2.8",
+        "predis/predis": "^3.4",
+        "socialiteproviders/google": "^4.1"
     },
     "require-dev": {
         "fakerphp/faker": "^1.9.1",
diff --git a/backend/composer.lock b/backend/composer.lock
index 26d65e5..e4c6f51 100644
--- a/backend/composer.lock
+++ b/backend/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "9c491b8531eec05ba41a11d9276a5749",
+    "content-hash": "664cd612c398038b3a21ebd35c58a19b",
     "packages": [
         {
             "name": "brick/math",
@@ -508,6 +508,70 @@
             ],
             "time": "2025-03-06T22:45:56+00:00"
         },
+        {
+            "name": "firebase/php-jwt",
+            "version": "v7.0.5",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/googleapis/php-jwt.git",
+                "reference": "47ad26bab5e7c70ae8a6f08ed25ff83631121380"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/googleapis/php-jwt/zipball/47ad26bab5e7c70ae8a6f08ed25ff83631121380",
+                "reference": "47ad26bab5e7c70ae8a6f08ed25ff83631121380",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^8.0"
+            },
+            "require-dev": {
+                "guzzlehttp/guzzle": "^7.4",
+                "phpfastcache/phpfastcache": "^9.2",
+                "phpspec/prophecy-phpunit": "^2.0",
+                "phpunit/phpunit": "^9.5",
+                "psr/cache": "^2.0||^3.0",
+                "psr/http-client": "^1.0",
+                "psr/http-factory": "^1.0"
+            },
+            "suggest": {
+                "ext-sodium": "Support EdDSA (Ed25519) signatures",
+                "paragonie/sodium_compat": "Support EdDSA (Ed25519) signatures when libsodium is not present"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Firebase\\JWT\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Neuman Vong",
+                    "email": "neuman+pear@twilio.com",
+                    "role": "Developer"
+                },
+                {
+                    "name": "Anant Narayanan",
+                    "email": "anant@php.net",
+                    "role": "Developer"
+                }
+            ],
+            "description": "A simple library to encode and decode JSON Web Tokens (JWT) in PHP. Should conform to the current spec.",
+            "homepage": "https://github.com/firebase/php-jwt",
+            "keywords": [
+                "jwt",
+                "php"
+            ],
+            "support": {
+                "issues": "https://github.com/googleapis/php-jwt/issues",
+                "source": "https://github.com/googleapis/php-jwt/tree/v7.0.5"
+            },
+            "time": "2026-04-01T20:38:03+00:00"
+        },
         {
             "name": "fruitcake/php-cors",
             "version": "v1.4.0",
@@ -1384,6 +1448,62 @@
             },
             "time": "2023-12-19T18:44:48+00:00"
         },
+        {
+            "name": "laravel/sentinel",
+            "version": "v1.1.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/laravel/sentinel.git",
+                "reference": "972d9885d9d14312a118e9565c4e6ecc5e751ea1"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/laravel/sentinel/zipball/972d9885d9d14312a118e9565c4e6ecc5e751ea1",
+                "reference": "972d9885d9d14312a118e9565c4e6ecc5e751ea1",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "illuminate/container": "^8.37|^9.0|^10.0|^11.0|^12.0|^13.0",
+                "php": "^8.0"
+            },
+            "require-dev": {
+                "laravel/pint": "^1.27",
+                "orchestra/testbench": "^6.47.1|^7.56|^8.37|^9.16|^10.9|^11.0",
+                "phpstan/phpstan": "^2.1.33"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Laravel\\Sentinel\\SentinelServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Laravel\\Sentinel\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Taylor Otwell",
+                    "email": "taylor@laravel.com"
+                },
+                {
+                    "name": "Mior Muhammad Zaki",
+                    "email": "mior@laravel.com"
+                }
+            ],
+            "support": {
+                "source": "https://github.com/laravel/sentinel/tree/v1.1.0"
+            },
+            "time": "2026-03-24T14:03:38+00:00"
+        },
         {
             "name": "laravel/serializable-closure",
             "version": "v1.3.7",
@@ -1445,6 +1565,147 @@
             },
             "time": "2024-11-14T18:34:49+00:00"
         },
+        {
+            "name": "laravel/socialite",
+            "version": "v5.27.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/laravel/socialite.git",
+                "reference": "40e0757a75637c7b2dff05d3286b0d8fc25e5c0e"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/laravel/socialite/zipball/40e0757a75637c7b2dff05d3286b0d8fc25e5c0e",
+                "reference": "40e0757a75637c7b2dff05d3286b0d8fc25e5c0e",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "firebase/php-jwt": "^6.4|^7.0",
+                "guzzlehttp/guzzle": "^6.0|^7.0",
+                "illuminate/contracts": "^6.0|^7.0|^8.0|^9.0|^10.0|^11.0|^12.0|^13.0",
+                "illuminate/http": "^6.0|^7.0|^8.0|^9.0|^10.0|^11.0|^12.0|^13.0",
+                "illuminate/support": "^6.0|^7.0|^8.0|^9.0|^10.0|^11.0|^12.0|^13.0",
+                "league/oauth1-client": "^1.11",
+                "php": "^7.2|^8.0",
+                "phpseclib/phpseclib": "^3.0"
+            },
+            "require-dev": {
+                "mockery/mockery": "^1.0",
+                "orchestra/testbench": "^4.18|^5.20|^6.47|^7.55|^8.36|^9.15|^10.8|^11.0",
+                "phpstan/phpstan": "^1.12.23",
+                "phpunit/phpunit": "^8.0|^9.3|^10.4|^11.5|^12.0"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "aliases": {
+                        "Socialite": "Laravel\\Socialite\\Facades\\Socialite"
+                    },
+                    "providers": [
+                        "Laravel\\Socialite\\SocialiteServiceProvider"
+                    ]
+                },
+                "branch-alias": {
+                    "dev-master": "5.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Laravel\\Socialite\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Taylor Otwell",
+                    "email": "taylor@laravel.com"
+                }
+            ],
+            "description": "Laravel wrapper around OAuth 1 & OAuth 2 libraries.",
+            "homepage": "https://laravel.com",
+            "keywords": [
+                "laravel",
+                "oauth"
+            ],
+            "support": {
+                "issues": "https://github.com/laravel/socialite/issues",
+                "source": "https://github.com/laravel/socialite"
+            },
+            "time": "2026-04-24T14:05:47+00:00"
+        },
+        {
+            "name": "laravel/telescope",
+            "version": "v5.20.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/laravel/telescope.git",
+                "reference": "38ec6e6006a67e05e0c476c5f8ef3550b72e43d8"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/laravel/telescope/zipball/38ec6e6006a67e05e0c476c5f8ef3550b72e43d8",
+                "reference": "38ec6e6006a67e05e0c476c5f8ef3550b72e43d8",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "laravel/framework": "^8.37|^9.0|^10.0|^11.0|^12.0|^13.0",
+                "laravel/sentinel": "^1.0",
+                "php": "^8.0",
+                "symfony/console": "^5.3|^6.0|^7.0|^8.0",
+                "symfony/var-dumper": "^5.0|^6.0|^7.0|^8.0"
+            },
+            "require-dev": {
+                "ext-gd": "*",
+                "guzzlehttp/guzzle": "^6.0|^7.0",
+                "laravel/octane": "^1.4|^2.0",
+                "orchestra/testbench": "^6.47.1|^7.55|^8.36|^9.15|^10.8|^11.0",
+                "phpstan/phpstan": "^1.10"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Laravel\\Telescope\\TelescopeServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Laravel\\Telescope\\": "src/",
+                    "Laravel\\Telescope\\Database\\Factories\\": "database/factories/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Taylor Otwell",
+                    "email": "taylor@laravel.com"
+                },
+                {
+                    "name": "Mohamed Said",
+                    "email": "mohamed@laravel.com"
+                }
+            ],
+            "description": "An elegant debug assistant for the Laravel framework.",
+            "keywords": [
+                "debugging",
+                "laravel",
+                "monitoring"
+            ],
+            "support": {
+                "issues": "https://github.com/laravel/telescope/issues",
+                "source": "https://github.com/laravel/telescope/tree/v5.20.0"
+            },
+            "time": "2026-04-06T12:52:26+00:00"
+        },
         {
             "name": "laravel/tinker",
             "version": "v2.10.2",
@@ -1888,6 +2149,82 @@
             ],
             "time": "2024-09-21T08:32:55+00:00"
         },
+        {
+            "name": "league/oauth1-client",
+            "version": "v1.11.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/thephpleague/oauth1-client.git",
+                "reference": "f9c94b088837eb1aae1ad7c4f23eb65cc6993055"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/thephpleague/oauth1-client/zipball/f9c94b088837eb1aae1ad7c4f23eb65cc6993055",
+                "reference": "f9c94b088837eb1aae1ad7c4f23eb65cc6993055",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "ext-openssl": "*",
+                "guzzlehttp/guzzle": "^6.0|^7.0",
+                "guzzlehttp/psr7": "^1.7|^2.0",
+                "php": ">=7.1||>=8.0"
+            },
+            "require-dev": {
+                "ext-simplexml": "*",
+                "friendsofphp/php-cs-fixer": "^2.17",
+                "mockery/mockery": "^1.3.3",
+                "phpstan/phpstan": "^0.12.42",
+                "phpunit/phpunit": "^7.5||9.5"
+            },
+            "suggest": {
+                "ext-simplexml": "For decoding XML-based responses."
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.0-dev",
+                    "dev-develop": "2.0-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "League\\OAuth1\\Client\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Ben Corlett",
+                    "email": "bencorlett@me.com",
+                    "homepage": "http://www.webcomm.com.au",
+                    "role": "Developer"
+                }
+            ],
+            "description": "OAuth 1.0 Client Library",
+            "keywords": [
+                "Authentication",
+                "SSO",
+                "authorization",
+                "bitbucket",
+                "identity",
+                "idp",
+                "oauth",
+                "oauth1",
+                "single sign on",
+                "trello",
+                "tumblr",
+                "twitter"
+            ],
+            "support": {
+                "issues": "https://github.com/thephpleague/oauth1-client/issues",
+                "source": "https://github.com/thephpleague/oauth1-client/tree/v1.11.0"
+            },
+            "time": "2024-12-10T19:59:05+00:00"
+        },
         {
             "name": "monolog/monolog",
             "version": "3.9.0",
@@ -2395,6 +2732,125 @@
             ],
             "time": "2024-11-21T10:36:35+00:00"
         },
+        {
+            "name": "paragonie/constant_time_encoding",
+            "version": "v3.1.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/paragonie/constant_time_encoding.git",
+                "reference": "d5b01a39b3415c2cd581d3bd3a3575c1ebbd8e77"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/paragonie/constant_time_encoding/zipball/d5b01a39b3415c2cd581d3bd3a3575c1ebbd8e77",
+                "reference": "d5b01a39b3415c2cd581d3bd3a3575c1ebbd8e77",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^8"
+            },
+            "require-dev": {
+                "infection/infection": "^0",
+                "nikic/php-fuzzer": "^0",
+                "phpunit/phpunit": "^9|^10|^11",
+                "vimeo/psalm": "^4|^5|^6"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "ParagonIE\\ConstantTime\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Paragon Initiative Enterprises",
+                    "email": "security@paragonie.com",
+                    "homepage": "https://paragonie.com",
+                    "role": "Maintainer"
+                },
+                {
+                    "name": "Steve 'Sc00bz' Thomas",
+                    "email": "steve@tobtu.com",
+                    "homepage": "https://www.tobtu.com",
+                    "role": "Original Developer"
+                }
+            ],
+            "description": "Constant-time Implementations of RFC 4648 Encoding (Base-64, Base-32, Base-16)",
+            "keywords": [
+                "base16",
+                "base32",
+                "base32_decode",
+                "base32_encode",
+                "base64",
+                "base64_decode",
+                "base64_encode",
+                "bin2hex",
+                "encoding",
+                "hex",
+                "hex2bin",
+                "rfc4648"
+            ],
+            "support": {
+                "email": "info@paragonie.com",
+                "issues": "https://github.com/paragonie/constant_time_encoding/issues",
+                "source": "https://github.com/paragonie/constant_time_encoding"
+            },
+            "time": "2025-09-24T15:06:41+00:00"
+        },
+        {
+            "name": "paragonie/random_compat",
+            "version": "v9.99.100",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/paragonie/random_compat.git",
+                "reference": "996434e5492cb4c3edcb9168db6fbb1359ef965a"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/paragonie/random_compat/zipball/996434e5492cb4c3edcb9168db6fbb1359ef965a",
+                "reference": "996434e5492cb4c3edcb9168db6fbb1359ef965a",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">= 7"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "4.*|5.*",
+                "vimeo/psalm": "^1"
+            },
+            "suggest": {
+                "ext-libsodium": "Provides a modern crypto API that can be used to generate random bytes."
+            },
+            "type": "library",
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Paragon Initiative Enterprises",
+                    "email": "security@paragonie.com",
+                    "homepage": "https://paragonie.com"
+                }
+            ],
+            "description": "PHP 5.x polyfill for random_bytes() and random_int() from PHP 7",
+            "keywords": [
+                "csprng",
+                "polyfill",
+                "pseudorandom",
+                "random"
+            ],
+            "support": {
+                "email": "info@paragonie.com",
+                "issues": "https://github.com/paragonie/random_compat/issues",
+                "source": "https://github.com/paragonie/random_compat"
+            },
+            "time": "2020-10-15T08:29:30+00:00"
+        },
         {
             "name": "phpoption/phpoption",
             "version": "1.9.4",
@@ -2470,6 +2926,179 @@
             ],
             "time": "2025-08-21T11:53:16+00:00"
         },
+        {
+            "name": "phpseclib/phpseclib",
+            "version": "3.0.52",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/phpseclib/phpseclib.git",
+                "reference": "2adaefc83df2ec548558307690f376dd7d4f4fce"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/phpseclib/phpseclib/zipball/2adaefc83df2ec548558307690f376dd7d4f4fce",
+                "reference": "2adaefc83df2ec548558307690f376dd7d4f4fce",
+                "shasum": ""
+            },
+            "require": {
+                "paragonie/constant_time_encoding": "^1|^2|^3",
+                "paragonie/random_compat": "^1.4|^2.0|^9.99.99",
+                "php": ">=5.6.1"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "*"
+            },
+            "suggest": {
+                "ext-dom": "Install the DOM extension to load XML formatted public keys.",
+                "ext-gmp": "Install the GMP (GNU Multiple Precision) extension in order to speed up arbitrary precision integer arithmetic operations.",
+                "ext-libsodium": "SSH2/SFTP can make use of some algorithms provided by the libsodium-php extension.",
+                "ext-mcrypt": "Install the Mcrypt extension in order to speed up a few other cryptographic operations.",
+                "ext-openssl": "Install the OpenSSL extension in order to speed up a wide variety of cryptographic operations."
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "phpseclib/bootstrap.php"
+                ],
+                "psr-4": {
+                    "phpseclib3\\": "phpseclib/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Jim Wigginton",
+                    "email": "terrafrost@php.net",
+                    "role": "Lead Developer"
+                },
+                {
+                    "name": "Patrick Monnerat",
+                    "email": "pm@datasphere.ch",
+                    "role": "Developer"
+                },
+                {
+                    "name": "Andreas Fischer",
+                    "email": "bantu@phpbb.com",
+                    "role": "Developer"
+                },
+                {
+                    "name": "Hans-Jürgen Petrich",
+                    "email": "petrich@tronic-media.com",
+                    "role": "Developer"
+                },
+                {
+                    "name": "Graham Campbell",
+                    "email": "graham@alt-three.com",
+                    "role": "Developer"
+                }
+            ],
+            "description": "PHP Secure Communications Library - Pure-PHP implementations of RSA, AES, SSH2, SFTP, X.509 etc.",
+            "homepage": "http://phpseclib.sourceforge.net",
+            "keywords": [
+                "BigInteger",
+                "aes",
+                "asn.1",
+                "asn1",
+                "blowfish",
+                "crypto",
+                "cryptography",
+                "encryption",
+                "rsa",
+                "security",
+                "sftp",
+                "signature",
+                "signing",
+                "ssh",
+                "twofish",
+                "x.509",
+                "x509"
+            ],
+            "support": {
+                "issues": "https://github.com/phpseclib/phpseclib/issues",
+                "source": "https://github.com/phpseclib/phpseclib/tree/3.0.52"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/terrafrost",
+                    "type": "github"
+                },
+                {
+                    "url": "https://www.patreon.com/phpseclib",
+                    "type": "patreon"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/phpseclib/phpseclib",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2026-04-27T07:02:15+00:00"
+        },
+        {
+            "name": "predis/predis",
+            "version": "v3.4.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/predis/predis.git",
+                "reference": "2033429520d8997a7815a2485f56abe6d2d0e075"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/predis/predis/zipball/2033429520d8997a7815a2485f56abe6d2d0e075",
+                "reference": "2033429520d8997a7815a2485f56abe6d2d0e075",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.2 || ^8.0",
+                "psr/http-message": "^1.0|^2.0"
+            },
+            "require-dev": {
+                "friendsofphp/php-cs-fixer": "^3.3",
+                "phpstan/phpstan": "^1.9",
+                "phpunit/phpcov": "^6.0 || ^8.0",
+                "phpunit/phpunit": "^8.0 || ~9.4.4"
+            },
+            "suggest": {
+                "ext-relay": "Faster connection with in-memory caching (>=0.6.2)"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Predis\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Till Krüss",
+                    "homepage": "https://till.im",
+                    "role": "Maintainer"
+                }
+            ],
+            "description": "A flexible and feature-complete Redis/Valkey client for PHP.",
+            "homepage": "http://github.com/predis/predis",
+            "keywords": [
+                "nosql",
+                "predis",
+                "redis"
+            ],
+            "support": {
+                "issues": "https://github.com/predis/predis/issues",
+                "source": "https://github.com/predis/predis/tree/v3.4.2"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sponsors/tillkruss",
+                    "type": "github"
+                }
+            ],
+            "time": "2026-03-09T20:33:04+00:00"
+        },
         {
             "name": "psr/clock",
             "version": "1.0.0",
@@ -3159,6 +3788,121 @@
             },
             "time": "2025-09-04T20:59:21+00:00"
         },
+        {
+            "name": "socialiteproviders/google",
+            "version": "4.1.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/SocialiteProviders/Google-Plus.git",
+                "reference": "1cb8f6fb2c0dd0fc8b34e95f69865663fdf0b401"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/SocialiteProviders/Google-Plus/zipball/1cb8f6fb2c0dd0fc8b34e95f69865663fdf0b401",
+                "reference": "1cb8f6fb2c0dd0fc8b34e95f69865663fdf0b401",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "php": "^7.2 || ^8.0",
+                "socialiteproviders/manager": "~4.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "SocialiteProviders\\Google\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "xstoop",
+                    "email": "myenglishnameisx@gmail.com"
+                }
+            ],
+            "description": "Google OAuth2 Provider for Laravel Socialite",
+            "support": {
+                "source": "https://github.com/SocialiteProviders/Google-Plus/tree/4.1.0"
+            },
+            "time": "2020-12-01T23:10:59+00:00"
+        },
+        {
+            "name": "socialiteproviders/manager",
+            "version": "v4.8.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/SocialiteProviders/Manager.git",
+                "reference": "8180ec14bef230ec2351cff993d5d2d7ca470ef4"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/SocialiteProviders/Manager/zipball/8180ec14bef230ec2351cff993d5d2d7ca470ef4",
+                "reference": "8180ec14bef230ec2351cff993d5d2d7ca470ef4",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/support": "^8.0 || ^9.0 || ^10.0 || ^11.0 || ^12.0",
+                "laravel/socialite": "^5.5",
+                "php": "^8.1"
+            },
+            "require-dev": {
+                "mockery/mockery": "^1.2",
+                "phpunit/phpunit": "^9.0"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "SocialiteProviders\\Manager\\ServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "SocialiteProviders\\Manager\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Andy Wendt",
+                    "email": "andy@awendt.com"
+                },
+                {
+                    "name": "Anton Komarev",
+                    "email": "a.komarev@cybercog.su"
+                },
+                {
+                    "name": "Miguel Piedrafita",
+                    "email": "soy@miguelpiedrafita.com"
+                },
+                {
+                    "name": "atymic",
+                    "email": "atymicq@gmail.com",
+                    "homepage": "https://atymic.dev"
+                }
+            ],
+            "description": "Easily add new or override built-in providers in Laravel Socialite.",
+            "homepage": "https://socialiteproviders.com",
+            "keywords": [
+                "laravel",
+                "manager",
+                "oauth",
+                "providers",
+                "socialite"
+            ],
+            "support": {
+                "issues": "https://github.com/socialiteproviders/manager/issues",
+                "source": "https://github.com/socialiteproviders/manager"
+            },
+            "time": "2025-02-24T19:33:30+00:00"
+        },
         {
             "name": "symfony/console",
             "version": "v6.4.30",
diff --git a/backend/config/app.php b/backend/config/app.php
index 9207160..15ed6ea 100644
--- a/backend/config/app.php
+++ b/backend/config/app.php
@@ -168,6 +168,8 @@
         // App\Providers\BroadcastServiceProvider::class,
         App\Providers\EventServiceProvider::class,
         App\Providers\RouteServiceProvider::class,
+        App\Providers\TelescopeServiceProvider::class,
+        \SocialiteProviders\Manager\ServiceProvider::class
     ])->toArray(),
 
     /*
diff --git a/backend/config/services.php b/backend/config/services.php
index 0ace530..e34a877 100644
--- a/backend/config/services.php
+++ b/backend/config/services.php
@@ -31,4 +31,9 @@
         'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
     ],
 
-];
+    'google' => [    
+    'client_id' => env('CLIENT_ID'),  
+    'client_secret' => env('CLIENT_SECRET'),  
+    'redirect' => env('REDIRECT_URIS')
+    ],
+];
\ No newline at end of file
diff --git a/backend/config/telescope.php b/backend/config/telescope.php
new file mode 100644
index 0000000..6250e78
--- /dev/null
+++ b/backend/config/telescope.php
@@ -0,0 +1,212 @@
+<?php
+
+use Laravel\Telescope\Http\Middleware\Authorize;
+use Laravel\Telescope\Watchers;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Telescope Master Switch
+    |--------------------------------------------------------------------------
+    |
+    | This option may be used to disable all Telescope watchers regardless
+    | of their individual configuration, which simply provides a single
+    | and convenient way to enable or disable Telescope data storage.
+    |
+    */
+
+    'enabled' => env('TELESCOPE_ENABLED', true),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Telescope Domain
+    |--------------------------------------------------------------------------
+    |
+    | This is the subdomain where Telescope will be accessible from. If the
+    | setting is null, Telescope will reside under the same domain as the
+    | application. Otherwise, this value will be used as the subdomain.
+    |
+    */
+
+    'domain' => env('TELESCOPE_DOMAIN'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Telescope Path
+    |--------------------------------------------------------------------------
+    |
+    | This is the URI path where Telescope will be accessible from. Feel free
+    | to change this path to anything you like. Note that the URI will not
+    | affect the paths of its internal API that aren't exposed to users.
+    |
+    */
+
+    'path' => env('TELESCOPE_PATH', 'telescope'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Telescope Storage Driver
+    |--------------------------------------------------------------------------
+    |
+    | This configuration options determines the storage driver that will
+    | be used to store Telescope's data. In addition, you may set any
+    | custom options as needed by the particular driver you choose.
+    |
+    */
+
+    'driver' => env('TELESCOPE_DRIVER', 'database'),
+
+    'storage' => [
+        'database' => [
+            'connection' => env('DB_CONNECTION', 'mysql'),
+            'chunk' => 1000,
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Telescope Queue
+    |--------------------------------------------------------------------------
+    |
+    | This configuration options determines the queue connection and queue
+    | which will be used to process ProcessPendingUpdate jobs. This can
+    | be changed if you would prefer to use a non-default connection.
+    |
+    */
+
+    'queue' => [
+        'connection' => env('TELESCOPE_QUEUE_CONNECTION'),
+        'queue' => env('TELESCOPE_QUEUE'),
+        'delay' => env('TELESCOPE_QUEUE_DELAY', 10),
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Telescope Route Middleware
+    |--------------------------------------------------------------------------
+    |
+    | These middleware will be assigned to every Telescope route, giving you
+    | the chance to add your own middleware to this list or change any of
+    | the existing middleware. Or, you can simply stick with this list.
+    |
+    */
+
+    'middleware' => [
+        'web',
+        Authorize::class,
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Allowed / Ignored Paths & Commands
+    |--------------------------------------------------------------------------
+    |
+    | The following array lists the URI paths and Artisan commands that will
+    | not be watched by Telescope. In addition to this list, some Laravel
+    | commands, like migrations and queue commands, are always ignored.
+    |
+    */
+
+    'only_paths' => [
+        // 'api/*'
+    ],
+
+    'ignore_paths' => [
+        'livewire*',
+        'nova-api*',
+        'pulse*',
+        '_boost*',
+        '.well-known*',
+    ],
+
+    'ignore_commands' => [
+        //
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Telescope Watchers
+    |--------------------------------------------------------------------------
+    |
+    | The following array lists the "watchers" that will be registered with
+    | Telescope. The watchers gather the application's profile data when
+    | a request or task is executed. Feel free to customize this list.
+    |
+    */
+
+    'watchers' => [
+        Watchers\BatchWatcher::class => env('TELESCOPE_BATCH_WATCHER', true),
+
+        Watchers\CacheWatcher::class => [
+            'enabled' => env('TELESCOPE_CACHE_WATCHER', true),
+            'hidden' => [],
+            'ignore' => [],
+        ],
+
+        Watchers\ClientRequestWatcher::class => [
+            'enabled' => env('TELESCOPE_CLIENT_REQUEST_WATCHER', true),
+            'ignore_hosts' => [],
+        ],
+
+        Watchers\CommandWatcher::class => [
+            'enabled' => env('TELESCOPE_COMMAND_WATCHER', true),
+            'ignore' => [],
+        ],
+
+        Watchers\DumpWatcher::class => [
+            'enabled' => env('TELESCOPE_DUMP_WATCHER', true),
+            'always' => env('TELESCOPE_DUMP_WATCHER_ALWAYS', false),
+        ],
+
+        Watchers\EventWatcher::class => [
+            'enabled' => env('TELESCOPE_EVENT_WATCHER', true),
+            'ignore' => [],
+        ],
+
+        Watchers\ExceptionWatcher::class => env('TELESCOPE_EXCEPTION_WATCHER', true),
+
+        Watchers\GateWatcher::class => [
+            'enabled' => env('TELESCOPE_GATE_WATCHER', true),
+            'ignore_abilities' => [],
+            'ignore_packages' => true,
+            'ignore_paths' => [],
+        ],
+
+        Watchers\JobWatcher::class => env('TELESCOPE_JOB_WATCHER', true),
+
+        Watchers\LogWatcher::class => [
+            'enabled' => env('TELESCOPE_LOG_WATCHER', true),
+            'level' => 'error',
+        ],
+
+        Watchers\MailWatcher::class => env('TELESCOPE_MAIL_WATCHER', true),
+
+        Watchers\ModelWatcher::class => [
+            'enabled' => env('TELESCOPE_MODEL_WATCHER', true),
+            'events' => ['eloquent.*'],
+            'hydrations' => true,
+        ],
+
+        Watchers\NotificationWatcher::class => env('TELESCOPE_NOTIFICATION_WATCHER', true),
+
+        Watchers\QueryWatcher::class => [
+            'enabled' => env('TELESCOPE_QUERY_WATCHER', true),
+            'ignore_packages' => true,
+            'ignore_paths' => [],
+            'slow' => 100,
+        ],
+
+        Watchers\RedisWatcher::class => env('TELESCOPE_REDIS_WATCHER', true),
+
+        Watchers\RequestWatcher::class => [
+            'enabled' => env('TELESCOPE_REQUEST_WATCHER', true),
+            'size_limit' => env('TELESCOPE_RESPONSE_SIZE_LIMIT', 64),
+            'ignore_http_methods' => [],
+            'ignore_status_codes' => [],
+        ],
+
+        Watchers\ScheduleWatcher::class => env('TELESCOPE_SCHEDULE_WATCHER', true),
+        Watchers\ViewWatcher::class => env('TELESCOPE_VIEW_WATCHER', true),
+    ],
+];
diff --git a/backend/database/factories/ChannelFactory.php b/backend/database/factories/ChannelFactory.php
new file mode 100644
index 0000000..a96176c
--- /dev/null
+++ b/backend/database/factories/ChannelFactory.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+/**
+ * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Channel>
+ */
+class ChannelFactory extends Factory
+{
+    /**
+     * Define the model's default state.
+     *
+     * @return array<string, mixed>
+     */
+    public function definition(): array
+    {
+        return [
+            "name" => fake()->name,
+            "description" => fake()->sentence,
+        ];
+    }
+}
diff --git a/backend/database/factories/TimeEntryFactory.php b/backend/database/factories/TimeEntryFactory.php
index f9cc77a..258eaa6 100644
--- a/backend/database/factories/TimeEntryFactory.php
+++ b/backend/database/factories/TimeEntryFactory.php
@@ -21,6 +21,7 @@ public function definition(): array
             "start_time" => fake()->time(),
             "end_time" => fake()->time(),
             'created_at' => fake()->dateTimeBetween('-5 days'),
+            
             //
         ];
     }
diff --git a/backend/database/migrations/2018_08_08_100000_create_telescope_entries_table.php b/backend/database/migrations/2018_08_08_100000_create_telescope_entries_table.php
new file mode 100644
index 0000000..031b6f4
--- /dev/null
+++ b/backend/database/migrations/2018_08_08_100000_create_telescope_entries_table.php
@@ -0,0 +1,70 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Get the migration connection name.
+     */
+    public function getConnection(): ?string
+    {
+        return config('telescope.storage.database.connection');
+    }
+
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        $schema = Schema::connection($this->getConnection());
+
+        $schema->create('telescope_entries', function (Blueprint $table) {
+            $table->bigIncrements('sequence');
+            $table->uuid('uuid');
+            $table->uuid('batch_id');
+            $table->string('family_hash')->nullable();
+            $table->boolean('should_display_on_index')->default(true);
+            $table->string('type', 20);
+            $table->longText('content');
+            $table->dateTime('created_at')->nullable();
+
+            $table->unique('uuid');
+            $table->index('batch_id');
+            $table->index('family_hash');
+            $table->index('created_at');
+            $table->index(['type', 'should_display_on_index']);
+        });
+
+        $schema->create('telescope_entries_tags', function (Blueprint $table) {
+            $table->uuid('entry_uuid');
+            $table->string('tag');
+
+            $table->primary(['entry_uuid', 'tag']);
+            $table->index('tag');
+
+            $table->foreign('entry_uuid')
+                ->references('uuid')
+                ->on('telescope_entries')
+                ->cascadeOnDelete();
+        });
+
+        $schema->create('telescope_monitoring', function (Blueprint $table) {
+            $table->string('tag')->primary();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        $schema = Schema::connection($this->getConnection());
+
+        $schema->dropIfExists('telescope_entries_tags');
+        $schema->dropIfExists('telescope_entries');
+        $schema->dropIfExists('telescope_monitoring');
+    }
+};
diff --git a/backend/database/migrations/2026_02_27_201248_create_channels_table.php b/backend/database/migrations/2026_02_27_201248_create_channels_table.php
new file mode 100644
index 0000000..6a907db
--- /dev/null
+++ b/backend/database/migrations/2026_02_27_201248_create_channels_table.php
@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+use \App\Models\User ;
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('channels', function (Blueprint $table) {
+            $table->id();
+            $table->foreignIdFor(User::class);
+            $table->string('name');
+            $table->text('description')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('channels');
+    }
+};
diff --git a/backend/database/migrations/2026_02_27_201308_create_members_table.php b/backend/database/migrations/2026_02_27_201308_create_members_table.php
new file mode 100644
index 0000000..87b4927
--- /dev/null
+++ b/backend/database/migrations/2026_02_27_201308_create_members_table.php
@@ -0,0 +1,29 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+use \App\Models\{Channel, User};
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('members', function (Blueprint $table) {
+            $table->id();
+            $table->foreignIdFor(User::class)->constrained()->cascadeOnDelete();
+            $table->foreignIdFor(Channel::class)->constrained()->cascadeOnDelete();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('members');
+    }
+};
diff --git a/backend/database/migrations/2026_02_27_201329_create_invitations_table.php b/backend/database/migrations/2026_02_27_201329_create_invitations_table.php
new file mode 100644
index 0000000..db83faa
--- /dev/null
+++ b/backend/database/migrations/2026_02_27_201329_create_invitations_table.php
@@ -0,0 +1,27 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+use App\Models\Channel;
+use App\Models\User;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('invitations', function (Blueprint $table) {
+            $table->id();
+            $table->foreignIdFor(Channel::class)->constrained()->cascadeOnDelete();
+            $table->foreignIdFor(User::class, 'invited_id')->constrained('users')->cascadeOnDelete();
+            $table->foreignIdFor(User::class, 'invited_by_id')->constrained('users')->cascadeOnDelete();
+            $table->enum('status', ['pending', 'accepted', 'declined', 'cancelled'])->default('pending');
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('invitations');
+    }
+};
diff --git a/backend/database/migrations/2026_02_27_201625_create_shared_days_table.php b/backend/database/migrations/2026_02_27_201625_create_shared_days_table.php
new file mode 100644
index 0000000..6861ff5
--- /dev/null
+++ b/backend/database/migrations/2026_02_27_201625_create_shared_days_table.php
@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+use App\Models\{Channel, User};
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('shared_days', function (Blueprint $table) {
+            $table->id();
+            $table->foreignIdFor(Channel::class)->constrained()->cascadeOnDelete();
+            $table->foreignIdFor(User::class);
+            $table->date('date');
+            
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('shared_days');
+    }
+};
diff --git a/backend/database/migrations/2026_02_27_201637_create_shared_day_entries_table.php b/backend/database/migrations/2026_02_27_201637_create_shared_day_entries_table.php
new file mode 100644
index 0000000..5256543
--- /dev/null
+++ b/backend/database/migrations/2026_02_27_201637_create_shared_day_entries_table.php
@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+use \App\Models\{SharedDay, TimeEntry};
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('shared_day_entries', function (Blueprint $table) {
+            $table->id();
+            $table->foreignIdFor(SharedDay::class)->constrained()->cascadeOnDelete();
+            $table->foreignIdFor(TimeEntry::class)->constrained()->cascadeOnDelete();
+            $table->unique(['shared_day_id', 'time_entry_id']);
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('shared_day_entries');
+    }
+};
diff --git a/backend/database/migrations/2026_02_27_201648_create_comments_table.php b/backend/database/migrations/2026_02_27_201648_create_comments_table.php
new file mode 100644
index 0000000..6af3dd6
--- /dev/null
+++ b/backend/database/migrations/2026_02_27_201648_create_comments_table.php
@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+use \App\Models\SharedDay;
+use \App\Models\User;
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('comments', function (Blueprint $table) {
+            $table->id();
+            $table->foreignIdFor(SharedDay::class)->constrained()->cascadeOnDelete();
+            $table->foreignIdFor(User::class);
+            $table->text('body');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('comments');
+    }
+};
diff --git a/backend/database/migrations/2026_03_01_232740_create_invitation_logs_table.php b/backend/database/migrations/2026_03_01_232740_create_invitation_logs_table.php
new file mode 100644
index 0000000..79d81a0
--- /dev/null
+++ b/backend/database/migrations/2026_03_01_232740_create_invitation_logs_table.php
@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+use \App\Models\Invitation;
+use \App\Models\User;
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('invitation_logs', function (Blueprint $table) {
+            $table->id();
+            $table->foreignIdFor(Invitation::class);
+            $table->foreignIdFor(User::class)->constrained()->cascadeOnDelete();
+            $table->enum('action', ['sent', 'accepted', 'declined', 'cancelled'])->default('sent');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('invitation_logs');
+    }
+};
diff --git a/backend/database/migrations/2026_03_11_212218_add_unique_constraint_to_shared_days_table.php b/backend/database/migrations/2026_03_11_212218_add_unique_constraint_to_shared_days_table.php
new file mode 100644
index 0000000..3bbdcff
--- /dev/null
+++ b/backend/database/migrations/2026_03_11_212218_add_unique_constraint_to_shared_days_table.php
@@ -0,0 +1,27 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('shared_days', function (Blueprint $table) {
+            $table->unique(['channel_id', 'user_id', 'date'], 'unique_channel_user_date');
+            $table->index('user_id', 'idx_user_id');
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('shared_days', function (Blueprint $table) {
+            $table->dropUnique('unique_channel_user_date');
+            $table->dropIndex('idx_user_id');
+        });
+}
+};
diff --git a/backend/database/migrations/2026_03_20_200524_add_duration_minutes_to_time_entries_table.php b/backend/database/migrations/2026_03_20_200524_add_duration_minutes_to_time_entries_table.php
new file mode 100644
index 0000000..813affb
--- /dev/null
+++ b/backend/database/migrations/2026_03_20_200524_add_duration_minutes_to_time_entries_table.php
@@ -0,0 +1,25 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+   public function up(): void
+    {
+        Schema::table('time_entries', function (Blueprint $table) {
+            $table->unsignedInteger('duration_minutes')->default(0);
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('time_entries', function (Blueprint $table) {
+            $table->dropColumn('duration_minutes');
+        });
+    }
+};
diff --git a/backend/database/migrations/2026_04_21_184309_add_index_to_time_entries.php b/backend/database/migrations/2026_04_21_184309_add_index_to_time_entries.php
new file mode 100644
index 0000000..e2ffe4f
--- /dev/null
+++ b/backend/database/migrations/2026_04_21_184309_add_index_to_time_entries.php
@@ -0,0 +1,25 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::table('time_entries', function (Blueprint $table) {
+            $table->index('created_at', 'idx_created_at');
+            $table->index(['user_id', 'created_at'],'idx_user_created' );
+            $table->index(['label', 'user_id'], 'idx_user_label');
+        });
+    }
+    public function down(): void
+    {
+        Schema::table('time_entries', function (Blueprint $table) {
+            $table->dropIndex('idx_created_at');
+            $table->dropIndex('idx_user_created');
+            $table->dropIndex('idx_user_label');
+        });
+    }
+};
\ No newline at end of file
diff --git a/backend/database/migrations/2026_04_22_205944_add_index_to_channels.php b/backend/database/migrations/2026_04_22_205944_add_index_to_channels.php
new file mode 100644
index 0000000..735485b
--- /dev/null
+++ b/backend/database/migrations/2026_04_22_205944_add_index_to_channels.php
@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('channels', function (Blueprint $table) {
+            $table->index('user_id', 'idx_user_id');
+            $table->index('created_at', 'idx_created_at');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('channels', function (Blueprint $table) {
+            $table->dropIndex('idx_user_id');
+            $table->dropIndex('idx_created_at');
+        });
+    }
+};
diff --git a/backend/database/migrations/2026_04_23_183815_add_compound_indices.php b/backend/database/migrations/2026_04_23_183815_add_compound_indices.php
new file mode 100644
index 0000000..02e661b
--- /dev/null
+++ b/backend/database/migrations/2026_04_23_183815_add_compound_indices.php
@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('members', function (Blueprint $table) {
+            $table->unique(['user_id', 'channel_id'], 'unique_user_channel');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('members', function (Blueprint $table) {
+            $table->dropForeign(['user_id']);
+            $table->dropUnique('unique_user_channel');
+            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
+        });
+    }
+};
\ No newline at end of file
diff --git a/backend/database/migrations/2026_05_04_163525_add_google_fields_to_users_table.php b/backend/database/migrations/2026_05_04_163525_add_google_fields_to_users_table.php
new file mode 100644
index 0000000..67c9056
--- /dev/null
+++ b/backend/database/migrations/2026_05_04_163525_add_google_fields_to_users_table.php
@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->string('google_id')->nullable()->unique()->after('id');
+            $table->string('avatar')->nullable()->after('google_id');
+            $table->string('password')->nullable()->change(); // ← make nullable
+            //
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn(['google_id', 'avatar']);
+            $table->string('password')->nullable(false)->change();
+            //
+        });
+    }
+};
diff --git a/backend/database/seeders/ChannelSeeder.php b/backend/database/seeders/ChannelSeeder.php
new file mode 100644
index 0000000..0f4d900
--- /dev/null
+++ b/backend/database/seeders/ChannelSeeder.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace Database\Seeders;
+use App\Models\User;
+use App\Models\Channel;
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+
+class ChannelSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        $users = User::all();
+        Channel::factory(20)->create([
+            'user_id' => fn() => $users->random()->id
+        ]);
+}
+}
diff --git a/backend/database/seeders/DatabaseSeeder.php b/backend/database/seeders/DatabaseSeeder.php
index dc4eb0d..144a15b 100644
--- a/backend/database/seeders/DatabaseSeeder.php
+++ b/backend/database/seeders/DatabaseSeeder.php
@@ -3,8 +3,7 @@
 namespace Database\Seeders;
 
 use Illuminate\Database\Seeder;
-use App\Models\User;
-use App\Models\TimeEntry;
+use App\Models\{TimeEntry, User};
 
 class DatabaseSeeder extends Seeder
 {
@@ -15,5 +14,9 @@ public function run(): void
     {
         $this->call(UserSeeder::class);
         $this->call(TimeEntrySeeder::class);
+        $this->call(ChannelSeeder::class);
+        $this->call(MemberSeeder::class);
+        $this->call(InvitationSeeder::class);
+    
     }
-}
\ No newline at end of file
+}
diff --git a/backend/database/seeders/InvitationSeeder.php b/backend/database/seeders/InvitationSeeder.php
new file mode 100644
index 0000000..7d8ad43
--- /dev/null
+++ b/backend/database/seeders/InvitationSeeder.php
@@ -0,0 +1,58 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Channel;
+use App\Models\Invitation;
+use App\Models\User;
+use Illuminate\Database\Seeder;
+
+class InvitationSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        $channels = Channel::all();
+
+        $channels->each(function (Channel $channel) {
+            // Pick some users that are not the channel owner
+            $users = User::where('id', '!=', $channel->user_id)
+                ->inRandomOrder()
+                ->take(3)
+                ->get();
+
+            $users->each(function (User $user) use ($channel) {
+                $invitation = Invitation::where('channel_id', $channel->id)
+                    ->where('invited_id', $user->id)
+                    ->first();
+
+                if ($invitation) {
+                    // If already a member (accepted), do nothing
+                    if ($invitation->status === 'accepted') {
+                        return;
+                    }
+
+                    // If declined or cancelled (or any non-pending, non-accepted future state),
+                    // reset back to pending instead of creating a new row.
+                    if ($invitation->status !== 'pending') {
+                        $invitation->update([
+                            'status' => 'pending',
+                        ]);
+                    }
+
+                    return;
+                }
+
+                // No existing invitation: create a new pending one
+                Invitation::create([
+                    'channel_id'    => $channel->id,
+                    'invited_id'    => $user->id,
+                    'invited_by_id' => $channel->user_id,
+                    'status'        => 'pending',
+                ]);
+            });
+        });
+    }
+}
diff --git a/backend/database/seeders/MemberSeeder.php b/backend/database/seeders/MemberSeeder.php
new file mode 100644
index 0000000..cc14149
--- /dev/null
+++ b/backend/database/seeders/MemberSeeder.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace Database\Seeders;
+use App\Models\User;
+use App\Models\Channel;
+use App\Models\Member;
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+
+class MemberSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+   public function run(): void
+{
+    $channels = Channel::all();
+    $channels->each(function($channel) {
+        $users = User::where('id', '!=', $channel->user_id)
+                     ->inRandomOrder()
+                     ->take(3)
+                     ->get();
+
+        $users->each(function($user) use ($channel) {
+            Member::firstOrCreate([
+                'user_id' => $user->id,
+                'channel_id' => $channel->id
+            ]);
+        });
+    });
+}
+}
diff --git a/backend/routes/api.php b/backend/routes/api.php
index 304d0cb..fec87cc 100644
--- a/backend/routes/api.php
+++ b/backend/routes/api.php
@@ -1,40 +1,56 @@
 <?php
-namespace App\Http\Middleware;
+
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
-use \App\Http\Controllers\Api\TimeEntryController;
-use \App\Http\Controllers\Api\AuthController;
-
-/*
-|--------------------------------------------------------------------------
-| API Routes
-|--------------------------------------------------------------------------
-|
-| Here is where you can register API routes for your application. These
-| routes are loaded by the RouteServiceProvider and all of them will
-| be assigned to the "api" middleware group. Make something great!
-|
-*/
+use App\Http\Controllers\Api\{
+    AuthController,
+    ChannelController,
+    InvitationController,
+    TimeEntryController,
+    SharedDayController,
+    UserController,
+    CommentController,
+    MeController,
+    ReportController
+};
+
+Route::controller(AuthController::class)->group(function () {
+    Route::post('/register', 'store');
+    Route::post('/login', 'login');
+    Route::post('/auth/google', 'google');
+});
 
 Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
     return $request->user();
 });
 
+Route::middleware('auth:sanctum')->group(function () {
+    Route::post('/logout', [AuthController::class, 'logout']);
 
-Route::middleware('guest')->controller(AuthController::class)->group(function () {
-    Route::post('/register', 'store');  
-    Route::post('/login', 'login');
-});
+    Route::apiResource('users', UserController::class)
+        ->only(['index']);
 
+    Route::apiResource('channels', ChannelController::class);
 
-Route::middleware('auth:sanctum')->group(function () {
-    Route::post('/logout', [AuthController::class, 'logout']);
     Route::apiResource('time-entries', TimeEntryController::class);
-});
 
+    Route::apiResource('channels.invitations', InvitationController::class)
+        ->scoped();
+
+    Route::post('shared-days', [SharedDayController::class, 'store']);
 
+    Route::apiResource('channels.shared-days', SharedDayController::class)
+        ->only(['index', 'show', 'destroy']);
 
+    Route::apiResource('shared-days.comments', CommentController::class)
+        ->only(['index', 'store', 'update', 'destroy']);
 
- 
+    Route::get('reports', [ReportController::class, 'index']);
 
- 
+    Route::prefix('me')->group(function () {
+        Route::get('shared-days', [MeController::class, 'sharedDays']);
+        Route::get('invitations', [MeController::class, 'invitations']);
+        Route::get('channels', [MeController::class, 'channels']);
+        Route::get('memberships', [MeController::class, 'memberships']);
+    });
+});
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ab6a57a..39920ac 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,11 +9,15 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.13.4",
+        "chart.js": "^4.5.1",
+        "laravel-vue-pagination": "^4.1.3",
         "pinia": "^3.0.4",
         "vue": "^3.5.27",
+        "vue-chartjs": "^5.3.3",
         "vue-i18n": "^11.2.8",
         "vue-router": "^4.6.4",
-        "vue-toastification": "^2.0.0-rc.5"
+        "vue-toastification": "^2.0.0-rc.5",
+        "vue3-google-login": "^2.1.3"
       },
       "devDependencies": {
         "@tailwindcss/vite": "^4.2.0",
@@ -1016,6 +1020,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.29",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -2062,6 +2072,18 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/chart.js": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
+      "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2644,6 +2666,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/laravel-vue-pagination": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/laravel-vue-pagination/-/laravel-vue-pagination-4.1.3.tgz",
+      "integrity": "sha512-KHz3L19ovlcMfRREFgqip+2m+fnYwONHvK3kOkuglfHhI6SkRk5w90DVHfVzms00o3wyMqdS6xo49c2+kcW5gg==",
+      "license": "MIT",
+      "dependencies": {
+        "vue": "^3.2.47"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.31.1",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.31.1.tgz",
@@ -3570,6 +3601,16 @@
         }
       }
     },
+    "node_modules/vue-chartjs": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.3.tgz",
+      "integrity": "sha512-jqxtL8KZ6YJ5NTv6XzrzLS7osyegOi28UGNZW0h9OkDL7Sh1396ht4Dorh04aKrl2LiSalQ84WtqiG0RIJb0tA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "vue": "^3.0.0-0 || ^2.7.0"
+      }
+    },
     "node_modules/vue-i18n": {
       "version": "11.2.8",
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.2.8.tgz",
@@ -3626,6 +3667,15 @@
         "vue": "^3.0.2"
       }
     },
+    "node_modules/vue3-google-login": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/vue3-google-login/-/vue3-google-login-2.1.3.tgz",
+      "integrity": "sha512-K5pw/AhsKGaixsZ2ulOI4ERVFl0r0vSzMjsjVd2zitzWPVjr80X1Dt1lT33AaPzOFXdWFpnkM5QWmOR9REHq0w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.0.3"
+      }
+    },
     "node_modules/wsl-utils": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.1.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index a6b0ad1..f61e749 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,11 +10,15 @@
   },
   "dependencies": {
     "axios": "^1.13.4",
+    "chart.js": "^4.5.1",
+    "laravel-vue-pagination": "^4.1.3",
     "pinia": "^3.0.4",
     "vue": "^3.5.27",
+    "vue-chartjs": "^5.3.3",
     "vue-i18n": "^11.2.8",
     "vue-router": "^4.6.4",
-    "vue-toastification": "^2.0.0-rc.5"
+    "vue-toastification": "^2.0.0-rc.5",
+    "vue3-google-login": "^2.1.3"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.2.0",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 2002f15..fde9cb9 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,39 +1,93 @@
-```vue
 <script setup>
 import NavBar from './components/NavBar.vue';
 import { useI18n } from 'vue-i18n';
 import { useAuthStore } from '@/stores/auth';
 import { onMounted, watch, computed } from 'vue';
+
 const { t, locale } = useI18n({ useScope: 'global' })
 const authStore = useAuthStore();
+
 const dir = computed(() => locale.value === 'ar' ? 'rtl' : 'ltr')
+
 onMounted(() => {
   authStore.checkAuth();
   document.documentElement.setAttribute('dir', dir.value);
 });
+
 watch(locale, (newLocale) => {
   document.documentElement.setAttribute('dir', newLocale === 'ar' ? 'rtl' : 'ltr');
 });
 </script>
 
 <template>
-  <div 
-    class="fixed top-2.5 z-[2000] transition-all duration-300"
-    :class="locale === 'ar' ? 'left-2.5' : 'right-2.5'"
-  >
-    <select 
-      v-model="$i18n.locale"
-      class="py-2 px-4 border border-[#ddd] rounded bg-white cursor-pointer text-[0.9rem] shadow-sm hover:border-[#007bff] focus:outline-none focus:border-[#007bff]"
+  <div class="min-h-screen bg-[#F9F7F2] font-sans antialiased text-[#333]">
+    <div 
+      class="fixed bottom-8 z-[2000] transition-all duration-500"
+      :class="locale === 'ar' ? 'left-8' : 'right-8'"
     >
-      <option v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">
-        {{ locale }}
-      </option>
-    </select>
-  </div>
+      <div class="group relative flex items-center bg-white p-2 rounded-[2rem] shadow-xl border border-white hover:pr-6 transition-all duration-300">
+        <div class="h-10 w-10 bg-[#5A7D5A] rounded-full flex items-center justify-center text-white font-black text-xs uppercase">
+          {{ locale }}
+        </div>
+        <select 
+          v-model="$i18n.locale"
+          class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
+        >
+          <option v-for="l in $i18n.availableLocales" :key="`locale-${l}`" :value="l">
+            {{ l.toUpperCase() }}
+          </option>
+        </select>
+        <span class="max-w-0 overflow-hidden group-hover:max-w-xs transition-all duration-500 pl-3 text-xs font-black text-[#5A7D5A] uppercase tracking-widest whitespace-nowrap">
+          Change Language
+        </span>
+      </div>
+    </div>
 
-  <NavBar v-if="authStore.isAuthenticated" />
+    <NavBar v-if="authStore.isAuthenticated" />
 
-  <div :class="{ 'mt-[60px]': authStore.isAuthenticated }">
-    <router-view />
+    <main :class="{ 'pt-32 px-4 pb-12': authStore.isAuthenticated }">
+      <div class="max-w-7xl mx-auto">
+        <router-view v-slot="{ Component }">
+          <transition 
+            name="fade" 
+            mode="out-in"
+          >
+            <component :is="Component" />
+          </transition>
+        </router-view>
+      </div>
+    </main>
   </div>
 </template>
+
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.fade-enter-from {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  background: #F9F7F2;
+}
+::-webkit-scrollbar-thumb {
+  background: #D4E2D4;
+  border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #5A7D5A;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/AppPagination.vue b/frontend/src/components/AppPagination.vue
new file mode 100644
index 0000000..2adabee
--- /dev/null
+++ b/frontend/src/components/AppPagination.vue
@@ -0,0 +1,18 @@
+<script setup>
+import { TailwindPagination } from 'laravel-vue-pagination'
+
+defineProps({
+    data: { type: Object, required: true },
+})
+
+const emit = defineEmits(['page-change'])
+</script>
+
+<template>
+    <TailwindPagination
+        :data="data"
+        @pagination-change-page="emit('page-change', $event)"
+        :item-classes="['bg-white','text-gray-500','border-gray-300', 'hover:bg-gray-50']"
+        :active-classes="['bg-blue-50', 'border-blue-500', 'text-blue-600']"
+    />
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/BarChart.vue b/frontend/src/components/BarChart.vue
deleted file mode 100644
index 32a16b9..0000000
--- a/frontend/src/components/BarChart.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <div class="h-[250px] max-w-[900px] mt-8">
-    <Bar
-      id="my-chart-id"
-      :options="chartOptions"
-      :data="chartData"
-    />
-  </div>
-</template>
-
-<script setup>
-import { Bar } from 'vue-chartjs'
-import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
-
-ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
-
-const props = defineProps(['chartData'])
-
-const chartOptions = {
-  responsive: true,
-  maintainAspectRatio: false,
-  plugins: {
-    legend: { display: false },
-    tooltip: { enabled: false }
-  },
-  scales: {
-    x: {
-      grid: { display: false },
-      ticks: { font: { size: 10 } },
-      border: { display: false }
-    },
-    y: {
-      beginAtZero: true,
-      grid: { display: true },
-      ticks: { font: { size: 9 }, padding: 2 },
-      border: { display: true }
-    }
-  },
-  datasets: {
-    bar: {
-      barPercentage: 0.5,
-      categoryPercentage: 0.7
-    }
-  },
-  elements: {
-    bar: {
-      backgroundColor: 'rgba(59, 130, 246, 0.85)',
-      borderRadius: 2,
-      borderSkipped: 'bottom',
-    }
-  }
-}
-</script>
\ No newline at end of file
diff --git a/frontend/src/components/GoogleLogin.vue b/frontend/src/components/GoogleLogin.vue
new file mode 100644
index 0000000..c2ef20a
--- /dev/null
+++ b/frontend/src/components/GoogleLogin.vue
@@ -0,0 +1,52 @@
+<script setup>
+import { googleTokenLogin } from 'vue3-google-login'
+import { useAuthStore } from '@/stores/auth'
+
+const authStore = useAuthStore()
+
+// So we can authnticate with google using 3 methods and each one returns a specific thing
+// with specific options according to google developer docs  : 
+// 1 googleLogin -> returns JWT which we can decode on the backend 
+// and get user data (then we won't use socialite but a rather manual acess to google) like this to verify the JWT: Http::get('https://oauth2.googleapis
+// 2 googleTokenLogin -> returns access token 
+// [we can get use of socialite here because it accepts a token and can return a user from it without an extra route (redirect)]
+// 3 googleAuthCodeLogin()  this one for advanced cases where we want to be able to access the user drive for example 
+// there are options like auto login, propmt ... that google allows for us in case we used the JWT method (first one)
+// https://devbaji.github.io/vue3-google-login/guide/custom-button.html#googleauthcodelogin-function
+// https://developers.google.com/identity/oauth2/web/guides/use-token-model
+const handleGoogleLogin = async () => {
+    const response = await googleTokenLogin()
+    await authStore.googleLogin(response.access_token)
+}
+</script>
+
+<template>
+  <div class="mt-6">
+
+    <div class="relative flex items-center justify-center mb-6">
+      <div class="absolute inset-0 flex items-center">
+        <div class="w-full border-t border-[#E8E4DC]"></div>
+      </div>
+      <span class="relative bg-[#FDFCFB] px-4 text-[11px] font-black text-[#A0A0A0] uppercase tracking-[0.2em]">
+        or continue with
+      </span>
+    </div>
+
+    <button
+      @click="handleGoogleLogin"
+      type="button"
+      class="w-full flex items-center justify-center gap-3 py-3.5 px-5 bg-[#F9F7F2] border-2 border-transparent rounded-[1.5rem] text-[12px] font-black uppercase tracking-[0.2em] text-[#4A4A4A] transition-all hover:border-[#5A7D5A] hover:bg-white active:scale-[0.98]"
+    >
+      <!-- Google SVG icon -->
+      <svg width="18" height="18" viewBox="0 0 48 48">
+        <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
+        <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
+        <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
+        <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.18 1.48-4.97 2.31-8.16 2.31-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
+        <path fill="none" d="M0 0h48v48H0z"/>
+      </svg>
+      Sign in with Google
+    </button>
+
+  </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/ListView.vue b/frontend/src/components/ListView.vue
deleted file mode 100644
index 8c0a167..0000000
--- a/frontend/src/components/ListView.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup>
-import SingleEntry from '@/views/SingleEntry.vue';
-import {ref, onMounted} from 'vue';
-import BarChart from './BarChart.vue';
-const props = defineProps(['entries']);
-</script>
-
-<template>
-  <div class="flex gap-8 w-full">
-    <div class="flex-1 max-w-[600px]">
-      <div v-for="entry in entries" :key="entry.id">
-        <SingleEntry :entry="entry"/>
-      </div>
-    </div>
-    
-    <div class="flex-none w-[350px] min-w-0">
-      <BarChart :chart-data="{
-        labels: entries.map(row => row.label),
-        datasets: [{
-          backgroundColor: '#20c997',
-          label: 'Entries by label', 
-          data: entries.map(row => row.time_taken.hours*60+row.time_taken.minutes)
-        }] 
-      }" />
-    </div>
-  </div>
-</template>
\ No newline at end of file
diff --git a/frontend/src/components/NavBar.vue b/frontend/src/components/NavBar.vue
index cac8647..0972f15 100644
--- a/frontend/src/components/NavBar.vue
+++ b/frontend/src/components/NavBar.vue
@@ -1,40 +1,71 @@
-<template>
-  <nav class="fixed top-0 left-0 right-0 bg-[#333] px-8 py-4 z-[1000] shadow-md">
-    <ol class="flex gap-2 list-none m-0 p-0">
-      <li>
-        <router-link 
-          :to="{ name: 'Home' }"
-          class="block text-white no-underline px-4 py-2 rounded bg-transparent text-[0.95rem] transition-colors duration-200 hover:bg-[#555] [&.router-link-active]:bg-[#007bff]"
-        >{{ $t("nav.home") }}</router-link>
-      </li>
-      <li>
-        <router-link 
-          :to="{ name: 'Add' }"
-          class="block text-white no-underline px-4 py-2 rounded bg-transparent text-[0.95rem] transition-colors duration-200 hover:bg-[#555] [&.router-link-active]:bg-[#007bff]"
-        >{{ $t("nav.add") }}</router-link>
-      </li>      
-      <li>
-        <router-link 
-          :to="{ name: 'About' }"
-          class="block text-white no-underline px-4 py-2 rounded bg-transparent text-[0.95rem] transition-colors duration-200 hover:bg-[#555] [&.router-link-active]:bg-[#007bff]"
-        >{{ $t("nav.about") }}</router-link>
-      </li>     
-      <li>
-        <button 
-          @click="handleLogout"
-          class="block text-white px-4 py-2 rounded bg-transparent border-none cursor-pointer text-[0.95rem] transition-colors duration-200 hover:bg-[#555]"
-        >{{ $t("nav.sign_out") }}</button>
-      </li>
-    </ol>
-  </nav>
-</template>
-
 <script setup>
-import { useAuthStore } from '@/stores/auth';
+import { useAuthStore } from '@/stores/auth'
+import { useI18n } from 'vue-i18n'
+import invitationService from '@/services/invitationService'
+import useApi from '@/composables/useApi'
+
+const { t } = useI18n()
+const authStore = useAuthStore()
 
-const authStore = useAuthStore();
+const { data: invitations } = useApi(
+    () => invitationService.getMyInvitations(), true
+)
 
 const handleLogout = async () => {
-  await authStore.logout();
-};
-</script>
\ No newline at end of file
+    await authStore.logout()
+}
+</script>
+
+<template>
+    <nav class="fixed top-4 left-4 right-4 h-20 bg-white/80 backdrop-blur-xl rounded-[2rem] px-8 z-[1000] shadow-[0_10px_40px_rgba(0,0,0,0.03)] border border-white flex items-center justify-between">
+        
+        <div class="flex items-center gap-2">
+            <router-link
+                :to="{ name: 'Home' }"
+                class="px-5 py-2.5 rounded-2xl text-[0.9rem] font-bold tracking-tight transition-all duration-300 hover:bg-[#F0F4F8] text-[#8E9AAF] [&.router-link-active]:bg-[#5A7D5A] [&.router-link-active]:text-white [&.router-link-active]:shadow-lg [&.router-link-active]:shadow-[#5A7D5A]/20">
+                {{ t('nav.home') }}
+            </router-link>
+            
+            <router-link
+                :to="{ name: 'Channels' }"
+                class="px-5 py-2.5 rounded-2xl text-[0.9rem] font-bold tracking-tight transition-all duration-300 hover:bg-[#F0F4F8] text-[#8E9AAF] [&.router-link-active]:bg-[#5A7D5A] [&.router-link-active]:text-white">
+                {{ t('nav.channels') }}
+            </router-link>
+
+            <router-link
+                :to="{ name: 'MySharedDays' }"
+                class="px-5 py-2.5 rounded-2xl text-[0.9rem] font-bold tracking-tight transition-all duration-300 hover:bg-[#F0F4F8] text-[#8E9AAF] [&.router-link-active]:bg-[#5A7D5A] [&.router-link-active]:text-white">
+                {{ t('nav.shared_days') }}
+            </router-link>
+
+            <router-link
+                :to="{ name: 'Reports' }"
+                class="px-5 py-2.5 rounded-2xl text-[0.9rem] font-bold tracking-tight transition-all duration-300 hover:bg-[#F0F4F8] text-[#8E9AAF] [&.router-link-active]:bg-[#5A7D5A] [&.router-link-active]:text-white">
+                {{ t('nav.reports') }}
+            </router-link>
+        </div>
+
+        <div class="flex items-center gap-3">
+            <router-link
+                :to="{ name: 'MyInvitations' }"
+                class="relative p-2.5 rounded-2xl bg-[#F0F4F8] text-[#8E9AAF] hover:bg-[#E2E8F0] transition-all duration-300 [&.router-link-active]:bg-[#FEF6E4] [&.router-link-active]:text-[#D4A373]">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+                </svg>
+                <span
+                    v-if="invitations?.length > 0"
+                    class="absolute -top-1 -right-1 h-5 w-5 bg-[#AF4E4E] text-white text-[10px] font-black rounded-full flex items-center justify-center ring-4 ring-white">
+                    {{ invitations.length > 9 ? '9+' : invitations.length }}
+                </span>
+            </router-link>
+
+            <div class="w-[1px] h-6 bg-gray-100 mx-2"></div>
+
+            <button
+                @click="handleLogout"
+                class="px-6 py-2.5 rounded-2xl bg-[#FFF2F2] text-[#AF4E4E] font-bold text-[0.85rem] transition-all duration-300 hover:bg-[#FFDADA] active:scale-95">
+                {{ t('nav.sign_out') }}
+            </button>
+        </div>
+    </nav>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/channel/ChannelCard.vue b/frontend/src/components/channel/ChannelCard.vue
new file mode 100644
index 0000000..9beb9bc
--- /dev/null
+++ b/frontend/src/components/channel/ChannelCard.vue
@@ -0,0 +1,48 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+const props = defineProps({
+    channel: { type: Object, required: true }
+})
+</script>
+
+<template>
+    <div class="group relative bg-white rounded-[2.5rem] p-8 border-2 border-[#F9F7F2] transition-all duration-500 flex flex-col h-full cursor-pointer hover:shadow-[0_20px_50px_rgba(90,125,90,0.1)] hover:border-[#D4E2D4]">
+
+        <div class="absolute top-6 right-8 h-2.5 w-2.5 rounded-full bg-[#5A7D5A] opacity-40 group-hover:opacity-100 group-hover:animate-pulse"></div>
+
+        <div class="flex items-center gap-5 mb-6">
+            <div class="h-16 w-16 rounded-[1.8rem] bg-[#5A7D5A] flex items-center justify-center text-white font-black text-2xl shadow-lg shadow-[#5A7D5A]/20 transition-all duration-500 group-hover:rounded-[1.2rem] group-hover:rotate-3">
+                {{ channel.name.charAt(0) }}
+            </div>
+            
+            <div class="flex-1 min-w-0">
+                <h3 class="font-black text-[#4A4A4A] text-xl leading-tight truncate transition-colors group-hover:text-[#5A7D5A]">
+                    {{ channel.name }}
+                </h3>
+                <span class="text-[10px] font-bold text-[#A0A0A0] uppercase tracking-widest">Workspace</span>
+            </div>
+        </div>
+
+        <p class="text-[#6B6B6B] text-sm line-clamp-2 leading-relaxed flex-grow font-medium italic">
+            "{{ channel.description || t('channel_card.no_description') }}"
+        </p>
+
+        <div class="mt-8 pt-6 border-t border-[#F9F7F2] flex items-center justify-between">
+            <div class="flex items-center gap-2 px-4 py-1.5 bg-[#F9F7F2] rounded-full text-[#5A7D5A]">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+                </svg>
+                <span class="text-xs font-black">{{ channel.members_count }}</span>
+            </div>
+
+            <div class="opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center text-[#D4A373] font-black text-xs uppercase tracking-[0.2em] gap-2">
+                {{ t('channel_card.enter') }}
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                </svg>
+            </div>
+        </div>
+
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/channel/ChannelOverview.vue b/frontend/src/components/channel/ChannelOverview.vue
new file mode 100644
index 0000000..9a4470d
--- /dev/null
+++ b/frontend/src/components/channel/ChannelOverview.vue
@@ -0,0 +1,65 @@
+<script setup>
+import { computed, inject } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t, locale } = useI18n()
+const channel = inject('channel')
+
+const formattedCreatedAt = computed(() => {
+    // Using locale-aware formatting to match your AR/EN toggle
+    return new Date(channel.value.created_at).toLocaleDateString(locale.value, {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+    })
+})
+</script>
+
+<template>
+    <div class="max-w-3xl bg-white rounded-[3.5rem] p-10 shadow-[0_20px_60px_rgba(90,125,90,0.05)] border border-white">
+        
+        <div class="flex flex-col md:flex-row items-center md:items-start gap-8">
+            <div class="h-24 w-24 rounded-[2.2rem] bg-[#5A7D5A] flex-shrink-0 flex items-center justify-center text-white font-black text-4xl shadow-2xl shadow-[#5A7D5A]/20 uppercase">
+                {{ channel.name.charAt(0) }}
+            </div>
+
+            <div class="flex-1 text-center md:text-left">
+                <div class="mb-4">
+                    <h1 class="text-4xl font-black text-[#4A4A4A] tracking-tight leading-none mb-2">
+                        {{ channel.name }}
+                    </h1>
+                    <div class="inline-flex items-center gap-2 px-4 py-1.5 bg-[#F9F7F2] rounded-full">
+                        <span class="w-1.5 h-1.5 rounded-full bg-[#5A7D5A]"></span>
+                        <p class="text-[11px] font-black text-[#A0A0A0] uppercase tracking-widest">
+                            {{ t('channel_overview.created') }} {{ formattedCreatedAt }}
+                        </p>
+                    </div>
+                </div>
+
+                <div class="relative">
+                    <p v-if="channel.description" class="text-[#6B6B6B] text-lg leading-relaxed italic font-medium">
+                        "{{ channel.description }}"
+                    </p>
+                    <p v-else class="text-[#A0A0A0] text-sm italic">
+                        {{ t('channel_overview.no_description') }}
+                    </p>
+                </div>
+
+                <div class="mt-8 pt-8 border-t border-[#F9F7F2] flex items-center justify-center md:justify-start gap-12">
+                    <div class="group cursor-default">
+                        <div class="flex items-baseline gap-1">
+                            <span class="text-3xl font-black text-[#4A4A4A] group-hover:text-[#5A7D5A] transition-colors">
+                                {{ channel.members_count }}
+                            </span>
+                            <span class="text-xs font-black text-[#D4A373] uppercase tracking-widest">
+                                {{ t('channel_overview.members') }}
+                            </span>
+                        </div>
+                        <div class="h-1 w-6 bg-[#D4E2D4] rounded-full mt-1 transition-all group-hover:w-full"></div>
+                    </div>
+                    
+                    </div>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/channel/ChannelSettings.vue b/frontend/src/components/channel/ChannelSettings.vue
new file mode 100644
index 0000000..9c1fa7f
--- /dev/null
+++ b/frontend/src/components/channel/ChannelSettings.vue
@@ -0,0 +1,57 @@
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import channelService from '@/services/channelService'
+import useApi from '@/composables/useApi'
+
+import { inject } from 'vue'
+
+const isOwner = inject('isOwner')
+const channel = inject('channel')
+const router = useRouter()
+const { t } = useI18n()
+
+const confirmDelete = ref(false)
+const { loading, error: deleteError, request: deleteRequest } = useApi(
+  () => channelService.deleteChannel(channel.value.id)
+)
+
+const remove = async () => {
+  await deleteRequest()
+  if (!deleteError.value) router.push({ name: 'Channels' })
+}
+</script>
+
+<template>
+  <div class="bg-white border border-red-100 rounded-2xl p-6">
+    <h3 class="text-lg font-semibold text-gray-800 mb-1">{{ t('channel.delete_channel') }}</h3>
+    <p class="text-gray-500 text-sm mb-4">{{ t('channel.delete_warning') }}</p>
+
+    <template v-if="!confirmDelete">
+      <button
+        @click="confirmDelete = true"
+        class="px-4 py-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-colors text-sm font-medium">
+        {{ t('channel.delete_channel') }}
+      </button>
+    </template>
+
+    <template v-else>
+      <p class="text-gray-700 text-sm mb-3">{{ t('channel.delete_confirm') }}</p>
+      <div class="flex gap-2">
+        <button
+          @click="remove"
+          :disabled="loading"
+          class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50 transition-colors text-sm font-medium">
+          {{ loading ? '...' : t('channel.yes') }}
+        </button>
+        <button
+          @click="confirmDelete = false"
+          :disabled="loading"
+          class="px-4 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-50 transition-colors text-sm font-medium">
+          {{ t('channel.no') }}
+        </button>
+      </div>
+    </template>
+  </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/channel/members/ChannelMembers.vue b/frontend/src/components/channel/members/ChannelMembers.vue
new file mode 100644
index 0000000..87c718a
--- /dev/null
+++ b/frontend/src/components/channel/members/ChannelMembers.vue
@@ -0,0 +1,99 @@
+<script setup>
+import { onMounted, ref, inject } from 'vue'
+import { useI18n } from 'vue-i18n'
+import InviteMemberModal from './InviteMemberModal.vue'
+import PendingInvitationsList from './PendingInvitationsList.vue'
+import invitationService from '@/services/invitationService'
+import useApi from '@/composables/useApi'
+
+const { t } = useI18n()
+const isOwner = inject('isOwner')
+const channel = inject('channel')
+const showInviteModal = ref(false)
+
+const { data: invitations, request: refreshInvitations } = useApi(
+    () => invitationService.getChanelInvitations(channel.value.id)
+)
+
+onMounted(() => {
+    if (isOwner.value) refreshInvitations()
+})
+</script>
+
+<template>
+    <div class="max-w-6xl mx-auto p-2">
+        <div class="flex flex-col md:flex-row items-start md:items-center justify-between mb-12 gap-6">
+            <div>
+                <h2 class="text-3xl font-black text-[#4A4A4A] tracking-tight">
+                    {{ t('channel_members.community') }}
+                </h2>
+                <p class="text-[#8E9AAF] font-medium mt-1 italic">{{ t('channel_members.manage_members') }}</p>
+            </div>
+            
+            <button
+                v-if="isOwner"
+                @click="showInviteModal = true"
+                class="px-8 py-4 bg-[#E07A5F] hover:bg-[#D6684D] text-white text-sm font-black rounded-[1.5rem] transition-all shadow-xl shadow-[#E07A5F]/20 active:scale-95 flex items-center gap-2">
+                <span class="text-xl leading-none">+</span>
+                {{ t('channel_members.invite_member') }}
+            </button>
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
+
+            <section class="space-y-6">
+                <div class="flex items-center gap-3 mb-2 px-2">
+                    <h3 class="text-xs font-black text-[#A0A0A0] uppercase tracking-[0.2em]">
+                        {{ t('channel_members.active_members') }}
+                    </h3>
+                    <span class="px-3 py-1 bg-[#F9F7F2] text-[#D4A373] text-xs font-black rounded-full border border-[#F2E9E4]">
+                        {{ channel.members?.length || 0 }}
+                    </span>
+                </div>
+
+                <div class="grid gap-4">
+                    <div
+                        v-for="member in channel.members"
+                        :key="member.id"
+                        class="flex items-center p-5 bg-white border-2 border-[#F9F7F2] rounded-[2rem] hover:border-[#D4A373]/30 hover:shadow-lg hover:shadow-[#D4A373]/5 transition-all group">
+                        
+                        <div class="h-12 w-12 rounded-[1.2rem] bg-[#F2E9E4] flex items-center justify-center text-[#D4A373] font-black text-lg mr-5 border border-[#F2E9E4] transition-transform group-hover:rotate-6">
+                            {{ member.user.name.charAt(0) }}
+                        </div>
+                        
+                        <div>
+                            <h3 class="font-black text-[#4A4A4A] leading-none group-hover:text-[#D4A373] transition-colors">
+                                {{ member.user.name }}
+                            </h3>
+                            <p class="text-xs text-[#A0A0A0] font-bold mt-2 uppercase tracking-tighter">{{ member.user.email }}</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section v-if="isOwner" class="space-y-6">
+                <div class="flex items-center gap-3 mb-2 px-2">
+                    <h3 class="text-xs font-black text-[#A0A0A0] uppercase tracking-[0.2em]">
+                        {{ t('channel_members.pending_invitations') }}
+                    </h3>
+                    <span v-if="invitations?.length"
+                        class="px-3 py-1 bg-[#FFF2F0] text-[#E07A5F] text-xs font-black rounded-full border border-[#FFE5E0]">
+                        {{ invitations.length }}
+                    </span>
+                </div>
+                
+                <div class="bg-[#FDFCFB] border-2 border-[#F9F7F2] rounded-[2.5rem] p-4">
+                    <PendingInvitationsList
+                        :invitations="invitations"
+                        @cancelled="refreshInvitations" />
+                </div>
+            </section>
+
+        </div>
+
+        <InviteMemberModal
+            v-if="showInviteModal && isOwner"
+            @close="showInviteModal = false"
+            @invited="refreshInvitations" />
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/channel/members/InviteMemberModal.vue b/frontend/src/components/channel/members/InviteMemberModal.vue
new file mode 100644
index 0000000..eaaf3ef
--- /dev/null
+++ b/frontend/src/components/channel/members/InviteMemberModal.vue
@@ -0,0 +1,117 @@
+<script setup>
+import { ref, watch, inject } from 'vue'
+import { useI18n } from 'vue-i18n'
+import invitationService from '@/services/invitationService'
+import useApi from '@/composables/useApi'
+
+const { t } = useI18n()
+const channel = inject('channel')
+const emit = defineEmits(['close', 'invited'])
+
+const search = ref('')
+const identifier = ref('')
+
+const { data: users, request: usersRequest } = useApi(
+    () => invitationService.getUsers({ search: search.value })
+)
+
+watch(search, (val) => {
+    if (val.trim()) usersRequest()
+    else users.value = null
+})
+
+const selectUser = (user) => {
+    search.value = user.name
+    identifier.value = user.name
+    users.value = null
+}
+
+const { loading, error, request } = useApi(
+    () => invitationService.createInvitation({ identifier: identifier.value }, channel.value.id)
+)
+
+const submit = async () => {
+    await request()
+    if (!error.value) {
+        emit('close')
+        emit('invited')
+    }
+}
+</script>
+
+<template>
+    <div class="fixed inset-0 z-50 flex items-center justify-center p-6 bg-[#2D3436]/40 backdrop-blur-md">
+        <div class="bg-white w-full max-w-md rounded-[3rem] shadow-[0_30px_70px_rgba(0,0,0,0.15)] p-10 border border-white">
+
+            <div class="flex justify-between items-center mb-8">
+                <h2 class="text-2xl font-black text-[#4A4A4A] tracking-tight">
+                    {{ t('invite_modal.title') }}
+                </h2>
+                <button 
+                    @click="emit('close')" 
+                    class="h-10 w-10 flex items-center justify-center rounded-full bg-[#F9F7F2] text-[#A0A0A0] hover:text-[#E07A5F] hover:bg-[#FFF2F0] transition-all text-2xl leading-none">
+                    &times;
+                </button>
+            </div>
+
+            <form @submit.prevent="submit" class="relative">
+                <div class="relative">
+                    <label class="block mb-3 text-xs font-black text-[#A0A0A0] uppercase tracking-[0.2em] px-2">
+                        {{ t('invite_modal.search_label') || 'Find Member' }}
+                    </label>
+                    <input
+                        type="text"
+                        v-model="search"
+                        :placeholder="t('invite_modal.search_placeholder')"
+                        class="w-full px-6 py-4 bg-[#F9F7F2] border-2 border-transparent rounded-[1.5rem] text-lg font-medium transition-all focus:outline-none focus:border-[#E07A5F] focus:bg-white focus:shadow-inner" />
+
+                    <Transition name="fade">
+                        <div v-if="users && users.length > 0"
+                            class="absolute z-10 w-full mt-3 bg-white border-2 border-[#F9F7F2] rounded-[2rem] shadow-2xl max-h-56 overflow-hidden">
+                            <div class="overflow-y-auto max-h-56 p-2">
+                                <button
+                                    v-for="user in users"
+                                    :key="user.id"
+                                    type="button"
+                                    @click="selectUser(user)"
+                                    class="w-full text-left px-5 py-4 hover:bg-[#FFF2F0] rounded-[1.2rem] transition group flex items-center gap-4">
+                                    <div class="h-10 w-10 rounded-xl bg-[#F2E9E4] flex items-center justify-center text-[#D4A373] font-black">
+                                        {{ user.name.charAt(0) }}
+                                    </div>
+                                    <div>
+                                        <span class="font-black block text-[#4A4A4A] group-hover:text-[#E07A5F]">{{ user.name }}</span>
+                                        <span class="text-xs font-bold text-[#A0A0A0] uppercase tracking-tighter">{{ user.email }}</span>
+                                    </div>
+                                </button>
+                            </div>
+                        </div>
+                    </Transition>
+                </div>
+
+                <p v-if="error?.identifier" class="mt-3 px-4 text-sm text-[#AF4E4E] font-bold">
+                    {{ error.identifier[0] }}
+                </p>
+
+                <div class="flex flex-col sm:flex-row gap-4 mt-10">
+                    <button
+                        type="button"
+                        @click="emit('close')"
+                        class="flex-1 px-6 py-4 text-[#A0A0A0] font-black text-sm hover:text-[#4A4A4A] transition-colors order-2 sm:order-1">
+                        {{ t('invite_modal.cancel') }}
+                    </button>
+                    <button
+                        :disabled="loading"
+                        class="flex-[2] px-6 py-4 bg-[#E07A5F] hover:bg-[#D6684D] disabled:opacity-50 text-white font-black rounded-[1.5rem] transition-all shadow-xl shadow-[#E07A5F]/20 active:scale-95 order-1 sm:order-2">
+                        {{ loading ? t('invite_modal.sending') : t('invite_modal.send') }}
+                    </button>
+                </div>
+            </form>
+
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.fade-enter-active, .fade-leave-active { transition: opacity 0.2s, transform 0.2s; }
+.fade-enter-from, .fade-leave-to { opacity: 0; transform: translateY(-10px); }
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/channel/members/PendingInvitationsList.vue b/frontend/src/components/channel/members/PendingInvitationsList.vue
new file mode 100644
index 0000000..022530e
--- /dev/null
+++ b/frontend/src/components/channel/members/PendingInvitationsList.vue
@@ -0,0 +1,28 @@
+<script setup>
+import InvitationCard from '../../invitations/InvitationCard.vue'
+
+const props = defineProps(['invitations'])
+const emit = defineEmits(['cancelled'])
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div v-if="props.invitations?.length > 0" class="flex flex-col gap-3">
+      <InvitationCard 
+        v-for="invitation in props.invitations" 
+        :key="invitation.id"
+        :invitation="invitation" 
+        :mode="'sent'"
+        @cancelled="emit('cancelled', $event)" 
+        class="border-2 border-transparent hover:border-[#FFE5E0] transition-colors rounded-[1.8rem]"
+      />
+    </div>
+
+    <div v-else class="flex flex-col items-center justify-center py-10 px-6 bg-[#F9F7F2]/50 rounded-[2.5rem] border-2 border-dashed border-[#F2E9E4]">
+      <div class="bg-white p-3 rounded-full shadow-sm mb-3 text-xl">✉️</div>
+      <p class="text-sm text-[#D4A373] font-black uppercase tracking-[0.15em] italic">
+        No pending invitations.
+      </p>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/channel/shared-days/AddComment.vue b/frontend/src/components/channel/shared-days/AddComment.vue
new file mode 100644
index 0000000..e6d3343
--- /dev/null
+++ b/frontend/src/components/channel/shared-days/AddComment.vue
@@ -0,0 +1,48 @@
+<script setup>
+import { ref, inject } from 'vue'
+import { useI18n } from 'vue-i18n'
+import useApi from '@/composables/useApi'
+import commentService from '@/services/commentService'
+import { useCommentStore } from '@/stores/commentStore'
+
+const { t } = useI18n()
+const sharedDay = inject('sharedDay')
+const commentStore = useCommentStore()
+
+const formData = ref({ body: '' })
+
+const { data, error, loading, request } = useApi(
+    () => commentService.createComment(
+        sharedDay.value.id,
+        formData.value
+    )
+)
+
+const submit = async () => {
+    await request()
+    if (!error.value) {
+        commentStore.add(data.value)
+        formData.value.body = ''
+    }
+}
+</script>
+<template>
+    <form @submit.prevent="submit" class="flex flex-col gap-4 p-4">
+        <textarea
+            v-model="formData.body"
+            :placeholder="t('comments.placeholder')"
+            rows="3"
+            class="w-full px-5 py-4 text-[14px] font-medium text-[#4A4A4A] bg-white border-2 border-[#F9F7F2] rounded-[1.5rem] placeholder-[#A0A0A0] focus:outline-none focus:border-[#5A7D5A] focus:bg-white resize-none transition-all duration-300 shadow-sm" />
+
+        <p v-if="error?.body" class="px-2 text-[11px] font-bold text-[#E07A5F] italic tracking-wide">
+            {{ error.body[0] }}
+        </p>
+
+        <button
+            type="submit"
+            :disabled="loading || !formData.body.trim()"
+            class="self-end px-8 py-2.5 bg-[#5A7D5A] hover:bg-[#4A6D4A] text-white text-[11px] font-black uppercase tracking-[0.2em] rounded-xl disabled:opacity-40 disabled:grayscale transition-all shadow-lg shadow-[#5A7D5A]/10 active:scale-95">
+            {{ loading ? t('comments.submitting') : t('comments.submit') }}
+        </button>
+    </form>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/channel/shared-days/ChannelSharedDays.vue b/frontend/src/components/channel/shared-days/ChannelSharedDays.vue
new file mode 100644
index 0000000..cd1de84
--- /dev/null
+++ b/frontend/src/components/channel/shared-days/ChannelSharedDays.vue
@@ -0,0 +1,59 @@
+<script setup>
+import { inject } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useToast } from 'vue-toastification'
+import { usePagination } from '@/composables/usePagination'
+import AppPagination from '@/components/AppPagination.vue'
+import sharedDayService from '@/services/sharedDayService'
+import SharedDayCard from './SharedDayCard.vue'
+
+const { t } = useI18n()
+const toast = useToast()
+const channel = inject('channel')
+
+
+const { items: data, paginatorData, loading, error, goToPage, refresh } = usePagination(
+    (page) => sharedDayService.getChannelSharedDays(channel.value.id,{ page }),
+    { immediate: true }
+)
+
+const refreshPage = () => {
+    toast.success(t('channel_shared_days.removed'))
+    refresh()
+}
+</script>
+
+<template>
+    <div class="max-w-3xl mx-auto py-6">
+
+        <div v-if="error" class="flex items-center gap-3 p-4 bg-red-50 text-red-700 rounded-2xl border border-red-100 shadow-sm">
+            <span class="text-xl">⚠️</span>
+            <p class="font-medium text-sm">{{ error }}</p>
+        </div>
+
+        <div v-else-if="data" class="space-y-4">
+            <div v-if="data.length > 0" class="grid gap-4">
+                <SharedDayCard
+                    v-for="sharedDay in data"
+                    :key="sharedDay.id"
+                    :day="sharedDay"
+                    @deleted="refreshPage" />
+            </div>
+            <AppPagination 
+                v-if="paginatorData?.meta" 
+                :data="paginatorData" 
+                @page-change="goToPage" />
+
+            <div v-else class="flex flex-col items-center justify-center py-20 bg-gray-50/50 border-2 border-dashed border-gray-200 rounded-3xl">
+                <div class="w-16 h-16 bg-white rounded-2xl shadow-sm flex items-center justify-center text-2xl mb-4">📅</div>
+                <h3 class="text-gray-900 font-bold">{{ t('channel_shared_days.empty_title') }}</h3>
+                <p class="text-gray-400 text-sm mt-1">{{ t('channel_shared_days.empty_message') }}</p>
+            </div>
+        </div>
+
+        <div v-else class="space-y-4">
+            <div v-for="i in 3" :key="i" class="h-20 bg-gray-100 rounded-2xl animate-pulse"></div>
+        </div>
+
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/channel/shared-days/CommentItem.vue b/frontend/src/components/channel/shared-days/CommentItem.vue
new file mode 100644
index 0000000..56c1c06
--- /dev/null
+++ b/frontend/src/components/channel/shared-days/CommentItem.vue
@@ -0,0 +1,135 @@
+<script setup>
+import { ref, inject } from 'vue'
+import { useI18n } from 'vue-i18n'
+import useApi from '@/composables/useApi'
+import commentService from '@/services/commentService'
+import { useCommentStore } from '@/stores/commentStore'
+const { t } = useI18n()
+const props = defineProps(['comment'])
+
+const sharedDay = inject('sharedDay')
+const editing = ref(false)
+const confirmDelete = ref(false)
+const editBody = ref(props.comment.body)
+const commentStore = useCommentStore();
+const { data: updatedComment, loading: updateLoading, error: updateError, request: updateRequest } = useApi(
+    () => commentService.updateComment(
+        sharedDay.value.id,
+        props.comment.id,
+        { body: editBody.value }
+    )
+    
+)
+
+const { loading: deleteLoading, error: deleteError, request: deleteRequest } = useApi(
+    () => commentService.deleteComment(
+        sharedDay.value.id,
+        props.comment.id
+    )
+)
+
+const update = async () => {
+    await updateRequest()
+    if (!updateError.value) {
+        editing.value = false
+        commentStore.update(updatedComment)
+    }
+}
+
+const remove = async () => {
+    await deleteRequest()
+    if (!deleteError.value){
+        commentStore.remove(props.comment.id)
+    } 
+}
+
+const cancelEdit = () => {
+    editBody.value = props.comment.body
+    editing.value = false
+}
+</script>
+
+<template>
+    <div class="group p-5 bg-white border-2 border-[#F9F7F2] rounded-[1.8rem] hover:border-[#5A7D5A]/20 transition-all">
+
+        <div class="flex items-center justify-between mb-3">
+            <div class="flex items-center gap-3">
+                <div class="h-8 w-8 rounded-xl bg-[#F1F5F1] flex items-center justify-center text-[#5A7D5A] font-black text-xs uppercase tracking-wider">
+                    {{ comment.author.name.charAt(0) }}
+                </div>
+                <div class="flex flex-col">
+                    <span class="font-black text-[14px] text-[#4A4A4A] leading-none">{{ comment.author.name }}</span>
+                    <span class="text-[11px] text-[#A0A0A0] font-medium mt-1 italic opacity-80">{{ comment.created_at }}</span>
+                </div>
+            </div>
+
+            <div class="flex items-center gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
+                <button
+                    v-if="comment.can_edit && !editing"
+                    @click="editing = true"
+                    class="p-2 text-[#A0A0A0] hover:text-[#5A7D5A] hover:bg-[#F1F5F1] rounded-xl transition-all">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536M9 13l6.586-6.586a2 2 0 112.828 2.828L11.828 15.828A2 2 0 0110 16H8v-2a2 2 0 01.586-1.414z"/>
+                    </svg>
+                </button>
+
+                <template v-if="comment.can_delete">
+                    <template v-if="!confirmDelete">
+                        <button
+                            @click="confirmDelete = true"
+                            class="p-2 text-[#A0A0A0] hover:text-[#E07A5F] hover:bg-[#FFF2F0] rounded-xl transition-all">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                            </svg>
+                        </button>
+                    </template>
+                    <template v-else>
+                        <div class="flex items-center gap-1 bg-[#FFF2F0] p-1 rounded-lg border border-[#FFE5E0]">
+                            <button
+                                @click="remove"
+                                :disabled="deleteLoading"
+                                class="px-3 py-1 text-[10px] font-black uppercase tracking-widest bg-[#E07A5F] text-white rounded-md disabled:opacity-50 transition-all">
+                                {{ deleteLoading ? '...' : $t('single_entry.yes') }}
+                            </button>
+                            <button
+                                @click="confirmDelete = false"
+                                :disabled="deleteLoading"
+                                class="px-3 py-1 text-[10px] font-black uppercase tracking-widest text-[#A0A0A0] hover:text-[#4A4A4A] transition-all">
+                                {{ $t('single_entry.no') }}
+                            </button>
+                        </div>
+                    </template>
+                </template>
+            </div>
+        </div>
+
+        <div v-if="!editing" class="px-1">
+            <p class="text-[14px] text-[#4A4A4A] font-medium leading-[1.6]">{{ comment.body }}</p>
+            <p v-if="deleteError" class="mt-2 text-[11px] font-bold text-[#E07A5F] italic">{{ deleteError }}</p>
+        </div>
+
+        <div v-else class="mt-3">
+            <textarea
+                v-model="editBody"
+                rows="3"
+                class="w-full px-4 py-3 text-[14px] font-medium text-[#4A4A4A] bg-[#FDFCFB] border-2 border-[#F2E9E4] rounded-2xl focus:outline-none focus:border-[#5A7D5A] resize-none transition-all">
+            </textarea>
+            <p v-if="updateError" class="mt-1 text-[11px] font-bold text-[#E07A5F] italic">{{ updateError }}</p>
+            <div class="flex items-center gap-2 mt-3">
+                <button
+                    @click="update"
+                    :disabled="updateLoading || !editBody.trim()"
+                    class="px-5 py-2 text-[11px] font-black uppercase tracking-widest bg-[#5A7D5A] hover:bg-[#4A6D4A] text-white rounded-xl disabled:opacity-50 transition-all">
+                    {{ updateLoading ? '...' : t('comments.save') }}
+                </button>
+                <button
+                    @click="cancelEdit"
+                    :disabled="updateLoading"
+                    class="px-5 py-2 text-[11px] font-black uppercase tracking-widest text-[#A0A0A0] hover:text-[#4A4A4A] transition-all">
+                    {{ t('comments.cancel') }}
+                </button>
+            </div>
+        </div>
+
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/channel/shared-days/CommentsSection.vue b/frontend/src/components/channel/shared-days/CommentsSection.vue
new file mode 100644
index 0000000..ca6d7c5
--- /dev/null
+++ b/frontend/src/components/channel/shared-days/CommentsSection.vue
@@ -0,0 +1,73 @@
+<script setup>
+import { ref, inject, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import CommentItem from './CommentItem.vue'
+import AddComment from './AddComment.vue'
+import { useCommentStore } from '@/stores/commentStore'
+
+const { t } = useI18n()
+const sharedDay = inject('sharedDay')
+const commentStore = useCommentStore()
+const showComments = ref(false)
+
+const toggleComments = () => {
+    showComments.value = !showComments.value
+    if (showComments.value && commentStore.comments.length === 0) {
+        commentStore.fetch(sharedDay.value.id)
+    }
+}
+
+onUnmounted(() => commentStore.reset())
+</script>
+
+<template>
+    <div class="mt-8">
+
+        <button
+            @click="toggleComments"
+            class="flex items-center gap-2 px-4 py-2 text-[11px] font-black uppercase tracking-[0.2em] text-[#5A7D5A] hover:bg-[#F1F5F1] rounded-xl transition-all active:scale-95">
+            <span class="text-lg">{{ showComments ? '💬' : '🗨️' }}</span>
+            {{ showComments ? t('comments.hide') : t('comments.show') }}
+        </button>
+
+        <div v-if="showComments" class="mt-6 space-y-6 animate-in fade-in slide-in-from-top-4 duration-300">
+
+            <div class="bg-[#FDFCFB] p-2 rounded-[2rem] border border-[#F2E9E4]">
+                <AddComment />
+            </div>
+
+            <div v-if="commentStore.error"
+                class="p-4 bg-[#FFF2F0] text-[#E07A5F] rounded-2xl border border-[#FFE5E0] text-[13px] font-bold">
+                ⚠️ {{ commentStore.error }}
+            </div>
+
+            <div v-else-if="commentStore.comments.length > 0" class="space-y-4">
+                <CommentItem
+                    v-for="comment in commentStore.comments"
+                    :key="comment.id"
+                    :comment="comment" />
+
+                <button
+                    v-if="commentStore.hasMore"
+                    @click="commentStore.loadMore(sharedDay.value.id)"
+                    :disabled="commentStore.loading"
+                    class="w-full py-4 text-[11px] font-black uppercase tracking-[0.2em] text-[#A0A0A0] hover:text-[#5A7D5A] disabled:opacity-50 transition-colors bg-[#F9F7F2] rounded-2xl">
+                    {{ commentStore.loading ? '...' : t('comments.load_more') }}
+                </button>
+            </div>
+
+            <div v-else-if="!commentStore.loading"
+                class="text-center py-12 bg-[#FDFCFB] rounded-[2.5rem] border-2 border-dashed border-[#F2E9E4]">
+                <div class="text-3xl mb-3 opacity-50">🍃</div>
+                <p class="text-[13px] font-bold text-[#A0A0A0] italic">
+                    {{ t('comments.empty') }}
+                </p>
+            </div>
+
+            <div v-if="commentStore.loading && commentStore.comments.length === 0" class="space-y-4">
+                <div v-for="i in 3" :key="i" class="h-20 bg-[#F9F7F2] rounded-[2rem] animate-pulse"></div>
+            </div>
+
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/channel/shared-days/SharedDayCard.vue b/frontend/src/components/channel/shared-days/SharedDayCard.vue
new file mode 100644
index 0000000..ead198c
--- /dev/null
+++ b/frontend/src/components/channel/shared-days/SharedDayCard.vue
@@ -0,0 +1,103 @@
+<script setup>
+import { ref } from 'vue'
+import { inject } from 'vue'
+import { useRouter, RouterLink } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import useApi from '@/composables/useApi'
+import sharedDayService from '@/services/sharedDayService'
+
+const { t } = useI18n()
+const router = useRouter()
+const props = defineProps(['day'])
+const emit = defineEmits(['deleted'])
+const isOwner = inject('isOwner')
+const confirmDelete = ref(false)
+
+const { loading, error, request } = useApi(
+    () => sharedDayService.removeSharedDay(props.day.channel_id, props.day.id)
+)
+
+const remove = async () => {
+    await request()
+    if (!error.value) emit('deleted', props.day.id)
+}
+</script>
+
+<template>
+    <div class="group flex flex-col gap-2">
+        <div
+            @click="router.push(`/channels/${day.channel_id}/shared-days/${day.id}`)"
+            class="flex items-center justify-between p-6 bg-white border-2 border-[#F9F7F2] rounded-[2rem] hover:border-[#5A7D5A]/30 hover:shadow-xl hover:shadow-[#5A7D5A]/5 transition-all cursor-pointer">
+
+            <div class="flex items-center gap-6">
+                <div class="h-14 w-14 bg-[#F9F7F2] rounded-2xl flex flex-col items-center justify-center text-[#D4A373] group-hover:bg-[#5A7D5A] group-hover:text-white transition-all duration-300">
+                    <span class="text-[9px] font-black uppercase tracking-tighter leading-none opacity-80">{{ t('shared_day_card.day') }}</span>
+                    <span class="text-xl font-black leading-none mt-1">
+                        {{ new Date(day.date).getDate() }}
+                    </span>
+                </div>
+
+                <div class="flex flex-col">
+                    <span class="text-[17px] font-black text-[#4A4A4A] group-hover:text-[#5A7D5A] transition-colors leading-tight">
+                        {{ new Date(day.date).toLocaleDateString('en-US', { month: 'long', year: 'numeric' }) }}
+                    </span>
+                    <div class="flex items-center gap-3 mt-1.5">
+                        <span class="text-[11px] font-black text-[#5A7D5A] bg-[#F1F5F1] px-3 py-1 rounded-full uppercase tracking-wider">
+                            {{ day.total_time.hours }}h {{ day.total_time.minutes }}m
+                        </span>
+                        <span class="text-[12px] text-[#A0A0A0] font-medium italic">
+                            · {{ day.entries_count }} {{ t('shared_day_card.entries') }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex items-center gap-3" v-if="isOwner">
+                <template v-if="!confirmDelete">
+                    <button
+                        @click.stop="confirmDelete = true"
+                        class="opacity-0 group-hover:opacity-100 transition-all duration-200 p-2 rounded-xl text-[#A0A0A0] hover:text-[#E07A5F] hover:bg-[#FFF2F0]">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                            <polyline points="3 6 5 6 21 6"/>
+                            <path d="M19 6l-1 14H6L5 6"/>
+                            <path d="M9 6V4h6v2"/>
+                        </svg>
+                    </button>
+                </template>
+
+                <template v-else>
+                    <div class="flex items-center gap-2 bg-[#FFF2F0] p-1.5 rounded-2xl border border-[#FFE5E0]">
+                        <button
+                            @click.stop="remove"
+                            :disabled="loading"
+                            class="px-4 py-1.5 text-[11px] font-black uppercase tracking-widest bg-[#E07A5F] text-white rounded-xl hover:bg-[#D6684D] disabled:opacity-50 transition-all">
+                            {{ loading ? '...' : $t('single_entry.yes') }}
+                        </button>
+                        <button
+                            @click.stop="confirmDelete = false"
+                            :disabled="loading"
+                            class="px-4 py-1.5 text-[11px] font-black uppercase tracking-widest text-[#A0A0A0] hover:text-[#4A4A4A] transition-all">
+                            {{ $t('single_entry.no') }}
+                        </button>
+                    </div>
+                </template>
+
+                <div class="h-10 w-10 rounded-full flex items-center justify-center bg-[#F9F7F2] group-hover:bg-[#5A7D5A]/10 transition-colors">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#D4A373] group-hover:text-[#5A7D5A] transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 5l7 7-7 7" />
+                    </svg>
+                </div>
+            </div>
+        </div>
+
+        <div class="px-4">
+            <RouterLink
+                :to="`/channels/${day.channel_id}`"
+                @click.stop
+                class="text-[12px] text-[#A0A0A0] hover:text-[#5A7D5A] font-black uppercase tracking-[0.1em] transition-colors flex items-center gap-2">
+                <span class="w-1 h-1 bg-[#D4A373] rounded-full"></span>
+                {{ day.channel?.name }}
+            </RouterLink>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/channel/shared-days/SharedDayDetails.vue b/frontend/src/components/channel/shared-days/SharedDayDetails.vue
new file mode 100644
index 0000000..eead234
--- /dev/null
+++ b/frontend/src/components/channel/shared-days/SharedDayDetails.vue
@@ -0,0 +1,90 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+import { provide, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import useApi from '@/composables/useApi'
+import sharedDayService from '@/services/sharedDayService'
+import CommentsSection from './CommentsSection.vue'
+
+const { t } = useI18n()
+const route = useRoute()
+
+const { data: sharedDay, error, loading } = useApi(
+    () => sharedDayService.getSharedDay(route.params.channel_id, route.params.id), true
+)
+provide('sharedDay', sharedDay)
+</script>
+
+<template>
+    <div class="max-w-3xl mx-auto py-12 px-6">
+
+        <div v-if="error" class="p-6 bg-[#FFF2F0] text-[#E07A5F] rounded-3xl border border-[#FFE5E0] text-[14px] font-black uppercase tracking-widest flex items-center gap-3">
+            <span>⚠️</span> {{ error }}
+        </div>
+
+        <div v-else-if="sharedDay" class="space-y-10">
+
+            <header class="flex items-end justify-between border-b-2 border-[#F9F7F2] pb-8">
+                <div>
+                    <h2 class="text-3xl font-black text-[#4A4A4A] tracking-tight">{{ sharedDay.date }}</h2>
+                    <p class="text-[15px] text-[#8E9AAF] font-medium mt-1 italic">{{ t('shared_day_view.summary') }}</p>
+                </div>
+                <div class="text-right">
+                    <span class="text-[11px] font-black text-[#A0A0A0] uppercase tracking-[0.2em] block mb-2">
+                        {{ t('shared_day_view.total_time') }}
+                    </span>
+                    <span class="text-2xl font-black text-[#5A7D5A]">
+                        {{ sharedDay.total_time.hours }}<span class="text-sm opacity-60 ml-0.5">h</span> 
+                        {{ sharedDay.total_time.minutes }}<span class="text-sm opacity-60 ml-0.5">m</span>
+                    </span>
+                </div>
+            </header>
+
+            <div class="space-y-4">
+                <div
+                    v-for="entry in sharedDay.entries"
+                    :key="entry.id"
+                    class="flex items-center justify-between p-6 bg-white border-2 border-[#F9F7F2] rounded-[2rem] hover:shadow-xl hover:shadow-[#F9F7F2]/50 transition-all group">
+                    
+                    <div class="flex items-center gap-5">
+                        <div class="w-1.5 h-10 bg-[#D4A373] rounded-full group-hover:bg-[#5A7D5A] transition-colors"></div>
+                        
+                        <div class="flex flex-col">
+                            <span class="font-black text-[#4A4A4A] text-lg leading-tight group-hover:text-[#5A7D5A] transition-colors">
+                                {{ entry.time_entry.label }}
+                            </span>
+                            <span class="text-[13px] font-bold text-[#A0A0A0] mt-1">
+                                {{ entry.time_entry.start_time }} — {{ entry.time_entry.end_time }}
+                            </span>
+                        </div>
+                    </div>
+
+                    <div class="bg-[#FDFCFB] px-5 py-2.5 rounded-2xl border border-[#F2E9E4]">
+                        <span class="text-[14px] font-black text-[#D4A373]">
+                            {{ entry.time_entry.time_taken.hours }}<span class="text-[10px] opacity-60 ml-0.5">h</span> 
+                            {{ entry.time_entry.time_taken.minutes }}<span class="text-[10px] opacity-60 ml-0.5">m</span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="pt-10 border-t-2 border-[#F9F7F2]">
+                <div class="mb-6 px-2">
+                    <h3 class="text-[11px] font-black text-[#A0A0A0] uppercase tracking-[0.2em]">
+                        {{ t('shared_day_view.discussion') || 'Discussion' }}
+                    </h3>
+                </div>
+                <CommentsSection />
+            </div>
+
+        </div>
+
+        <div v-else class="flex flex-col items-center py-24 space-y-8 animate-pulse">
+            <div class="h-10 w-64 bg-[#F9F7F2] rounded-2xl"></div>
+            <div class="w-full space-y-4">
+                <div v-for="i in 3" :key="i" class="h-24 bg-[#FDFCFB] rounded-[2rem] border border-[#F2E9E4]"></div>
+            </div>
+        </div>
+
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/charts/BarChart.vue b/frontend/src/components/charts/BarChart.vue
new file mode 100644
index 0000000..e0de931
--- /dev/null
+++ b/frontend/src/components/charts/BarChart.vue
@@ -0,0 +1,23 @@
+<script setup>
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+const props = defineProps({
+    chartData: { type: Object, required: true },
+    chartOptions: {
+        type: Object,
+        default: () => ({
+            responsive: true,
+            plugins: {
+                legend: { display: false }
+            }
+        })
+    }
+})
+</script>
+
+<template>
+    <Bar :data="props.chartData" :options="props.chartOptions" />
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/charts/DoughnutChart.vue b/frontend/src/components/charts/DoughnutChart.vue
new file mode 100644
index 0000000..2d98938
--- /dev/null
+++ b/frontend/src/components/charts/DoughnutChart.vue
@@ -0,0 +1,23 @@
+<script setup>
+import { Doughnut } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, ArcElement)
+
+const props = defineProps({
+    chartData: { type: Object, required: true },
+    chartOptions: {
+        type: Object,
+        default: () => ({
+            responsive: true,
+            plugins: {
+                legend: { display: false }
+            }
+        })
+    }
+})
+</script>
+
+<template>
+    <Doughnut :data="props.chartData" :options="props.chartOptions" />
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/charts/HorizontalBarChart.vue b/frontend/src/components/charts/HorizontalBarChart.vue
new file mode 100644
index 0000000..fcd3d53
--- /dev/null
+++ b/frontend/src/components/charts/HorizontalBarChart.vue
@@ -0,0 +1,24 @@
+<script setup>
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+const props = defineProps({
+    chartData: { type: Object, required: true },
+    chartOptions: {
+        type: Object,
+        default: () => ({
+            indexAxis: 'y',  
+            responsive: true,
+            plugins: {
+                legend: { display: false }
+            }
+        })
+    }
+})
+</script>
+
+<template>
+    <Bar :data="props.chartData" :options="props.chartOptions" />
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/history/HistoryDateItem.vue b/frontend/src/components/history/HistoryDateItem.vue
new file mode 100644
index 0000000..c28a075
--- /dev/null
+++ b/frontend/src/components/history/HistoryDateItem.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+defineProps(['date'])
+const emit = defineEmits(['click', 'share'])
+</script>
+
+<template>
+    <div
+        @click="emit('click')"
+        class="flex items-center justify-between p-4 bg-white/50 rounded-2xl cursor-pointer transition-all duration-300 text-[0.95rem] text-[#4A4A4A] hover:bg-[#E8F0E8] hover:shadow-sm hover:-translate-y-0.5 active:scale-95 group border border-transparent hover:border-white">
+        
+        <span class="font-medium tracking-tight">{{ date }}</span>
+        
+        <button
+            @click.stop="emit('share')"
+            class="text-[0.7rem] font-bold uppercase tracking-wider px-3 py-1.5 bg-[#F0F4F8] text-[#8E9AAF] rounded-xl hover:bg-white hover:text-[#5A7D5A] transition-all duration-300 opacity-0 group-hover:opacity-100 shadow-sm">
+            {{ t('history_date_item.share') }}
+        </button>
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/history/HistorySidebar.vue b/frontend/src/components/history/HistorySidebar.vue
new file mode 100644
index 0000000..8ddf52e
--- /dev/null
+++ b/frontend/src/components/history/HistorySidebar.vue
@@ -0,0 +1,55 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+import { usePagination } from '@/composables/usePagination'
+import timeEntryService from '@/services/timeEntryService'
+import HistoryDateItem from './HistoryDateItem.vue'
+import AppPagination from '@/components/AppPagination.vue'
+const { t } = useI18n()
+defineProps(['show'])
+const emit = defineEmits(['selectDate', 'shareDate'])
+
+
+const { items: dates, paginatorData, loading, error, goToPage, refresh } = usePagination(
+    (page) => timeEntryService.getTimeEntries({ history: true, page }),
+    { immediate: true }
+)
+
+</script>
+
+<template>
+    <div
+        class="fixed right-0 top-[60px] w-[280px] h-[calc(100vh-60px)] bg-white border-l border-[#ddd] p-6 overflow-y-auto shadow-[-2px_0_8px_rgba(0,0,0,0.1)] transition-transform duration-300"
+        :class="show ? 'translate-x-0' : 'translate-x-full'">
+
+        <h3 class="mt-0 mb-4 text-[#333] text-[1.2rem]">{{ t('home.history') }}</h3>
+
+        <div v-if="error" class="p-4 bg-[#ffeeee] text-[#cc3333] rounded border border-[#ffcccc]">
+            {{ t('home.error_loading_dates') }}: {{ error }}
+        </div>
+
+        <template v-else>
+            <div v-if="loading && !dates.length" class="space-y-2">
+                <div v-for="i in 5" :key="i" class="h-10 bg-gray-100 rounded animate-pulse" />
+            </div>
+
+            <div v-else-if="!dates.length" class="p-4 text-[#999] text-center">
+                {{ t('home.no_dates') }}
+            </div>
+
+            <div v-else class="flex flex-col gap-2">
+                <HistoryDateItem
+                    v-for="date in dates"
+                    :key="date.date"
+                    :date="date.date"
+                    @click="emit('selectDate', date.date)"
+                    @share="emit('shareDate', date.date)" />
+
+                    <AppPagination 
+                    v-if="paginatorData.meta" 
+                    :data="paginatorData" 
+                    @page-change="goToPage" />
+            </div>
+        </template>
+
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/invitations/InvitationCard.vue b/frontend/src/components/invitations/InvitationCard.vue
new file mode 100644
index 0000000..95fee2b
--- /dev/null
+++ b/frontend/src/components/invitations/InvitationCard.vue
@@ -0,0 +1,87 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+import invitationService from '@/services/invitationService'
+import useApi from '@/composables/useApi'
+
+const { t } = useI18n()
+
+const props = defineProps({
+    invitation: { type: Object, required: true },
+    mode: { type: String, required: true }
+})
+
+const emit = defineEmits(['cancelled', 'accepted', 'declined'])
+
+const { error: cancelError, loading: cancelLoading, request: cancelRequest } = useApi(
+    () => invitationService.cancelInvitation(props.invitation.channel_id, props.invitation.id)
+)
+const { error: acceptError, loading: acceptLoading, request: acceptRequest } = useApi(
+    () => invitationService.acceptInvitation(props.invitation.channel_id, props.invitation.id)
+)
+const { error: declineError, loading: declineLoading, request: declineRequest } = useApi(
+    () => invitationService.declineInvitation(props.invitation.channel_id, props.invitation.id)
+)
+
+const cancel = async () => {
+    await cancelRequest()
+    if (!cancelError.value) emit('cancelled', props.invitation.id)
+}
+const accept = async () => {
+    await acceptRequest()
+    if (!acceptError.value) emit('accepted', props.invitation.id)
+}
+const decline = async () => {
+    await declineRequest()
+    if (!declineError.value) emit('declined', props.invitation.id)
+}
+
+const displayUser = props.mode === 'received'
+    ? props.invitation.invited_by
+    : props.invitation.invited_user
+</script>
+
+<template>
+    <div class="flex items-center justify-between p-6 bg-white border-2 border-[#F9F7F2] border-dashed rounded-[2rem] transition-all hover:bg-[#FDFCFB]">
+
+        <div class="flex items-center gap-4">
+            <div class="h-10 w-10 rounded-xl bg-[#F2E9E4] flex items-center justify-center text-[#D4A373] font-black text-sm uppercase">
+                {{ displayUser.name.charAt(0) }}
+            </div>
+
+            <div class="flex flex-col gap-0.5">
+                <span class="font-black text-[#4A4A4A] tracking-tight leading-none">{{ displayUser.name }}</span>
+                <span class="text-[10px] font-black text-[#A0A0A0] uppercase tracking-widest mt-1">{{ displayUser.email }}</span>
+                <div class="flex items-center gap-1.5 mt-2">
+                    <span class="w-1 h-1 rounded-full bg-[#5A7D5A]"></span>
+                    <span class="text-[10px] font-bold text-[#5A7D5A] uppercase tracking-tighter">{{ invitation.channel.name }}</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="flex items-center gap-3">
+            <button
+                v-if="mode === 'sent'"
+                @click="cancel"
+                :disabled="cancelLoading"
+                class="px-4 py-2 text-[10px] font-black text-[#E07A5F] hover:bg-[#FFF2F0] rounded-full uppercase tracking-widest disabled:opacity-50 transition-all border border-transparent hover:border-[#FFE5E0]">
+                {{ cancelLoading ? '...' : t('invitation_card.cancel') }}
+            </button>
+
+            <template v-else-if="mode === 'received'">
+                <button
+                    @click="accept"
+                    :disabled="acceptLoading"
+                    class="px-5 py-2 text-[10px] font-black text-white bg-[#5A7D5A] hover:bg-[#4a6b4a] rounded-full uppercase tracking-widest shadow-lg shadow-[#5A7D5A]/20 transition-all active:scale-95 disabled:opacity-50">
+                    {{ acceptLoading ? '...' : t('invitation_card.accept') }}
+                </button>
+                <button
+                    @click="decline"
+                    :disabled="declineLoading"
+                    class="px-4 py-2 text-[10px] font-black text-[#E07A5F] hover:bg-[#FFF2F0] rounded-full uppercase tracking-widest disabled:opacity-50 transition-all border border-transparent hover:border-[#FFE5E0]">
+                    {{ declineLoading ? '...' : t('invitation_card.decline') }}
+                </button>
+            </template>
+        </div>
+
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/time-entries/ShareDayModal.vue b/frontend/src/components/time-entries/ShareDayModal.vue
new file mode 100644
index 0000000..d5d525f
--- /dev/null
+++ b/frontend/src/components/time-entries/ShareDayModal.vue
@@ -0,0 +1,201 @@
+<script setup>
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import timeEntryService from '@/services/timeEntryService'
+import channelService from '@/services/channelService'
+import sharedDayService from '@/services/sharedDayService'
+import useApi from '@/composables/useApi'
+
+const { t } = useI18n()
+const props = defineProps(['date'])
+const emit = defineEmits(['close', 'shared'])
+
+const selectedEntries = ref([])
+const selectedChannels = ref([])
+
+const { data: timeEntries, error: entriesError, loading: entriesLoading } = useApi(
+    () => timeEntryService.getTimeEntries({ date: props.date }), true
+)
+
+const { data: channels, error: channelsError, loading: channelsLoading } = useApi(
+    () => channelService.getChannels({ type: 'owned' }), true
+)
+
+const { error, loading, request } = useApi(
+    () => sharedDayService.createSharedDay({
+        channel_ids: selectedChannels.value,
+        entry_ids: selectedEntries.value,
+        date: props.date
+    })
+)
+
+const handleSubmit = async () => {
+    await request()
+    if (!error.value) {
+        emit('close')
+        emit('shared')
+    }
+}
+</script>
+
+<template>
+    <div class="fixed inset-0 bg-[#F9F7F2] z-[60] flex flex-col font-sans">
+
+        <header class="flex items-center justify-between px-8 py-6 bg-white/70 backdrop-blur-xl sticky top-0 z-10 border-b border-white/50 shadow-sm">
+            <div class="flex items-center gap-6">
+                <button
+                    @click="emit('close')"
+                    class="p-3 hover:bg-[#F0F4F8] rounded-2xl transition-all text-[#8E9AAF] active:scale-95">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+                <h2 class="text-2xl font-black text-[#333] tracking-tight">{{ t('share_day.title') }}</h2>
+            </div>
+            <div class="px-5 py-2 bg-[#FEF6E4] rounded-xl">
+                <span class="text-xs font-bold text-[#D4A373] uppercase tracking-widest">{{ date }}</span>
+            </div>
+        </header>
+
+        <form @submit.prevent="handleSubmit" class="flex-1 overflow-y-auto">
+            <div class="max-w-4xl mx-auto p-8 md:p-12 space-y-16">
+
+                <!-- Entries -->
+                <section>
+                    <div class="flex items-center justify-between mb-8">
+                        <h3 class="text-[0.7rem] font-black text-[#A0A0A0] uppercase tracking-[0.2em]">
+                            {{ t('share_day.entries_title') }}
+                        </h3>
+                        <div v-if="timeEntries?.length"
+                            class="text-xs font-bold px-4 py-1.5 bg-[#E8F0E8] text-[#5A7D5A] rounded-full shadow-sm">
+                            {{ selectedEntries.length }} {{ t('share_day.selected') }}
+                        </div>
+                    </div>
+
+                    <div v-if="entriesLoading" class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div v-for="i in 4" :key="i" class="h-28 bg-white/50 animate-pulse rounded-[2rem]"></div>
+                    </div>
+
+                    <div v-else-if="entriesError"
+                        class="p-6 bg-[#FFF2F2] text-[#AF4E4E] rounded-[2rem] border border-[#FFDADA] text-sm font-medium">
+                        {{ t('share_day.error_entries') }}
+                    </div>
+
+                    <div v-else-if="!timeEntries?.length"
+                        class="text-center py-24 bg-white/40 rounded-[3rem] border-4 border-dashed border-white/60">
+                        <p class="text-[#BCBCBC] font-bold">{{ t('share_day.no_entries') }}</p>
+                    </div>
+
+                    <div v-else class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <label
+                            v-for="entry in timeEntries"
+                            :key="entry.id"
+                            class="group relative flex items-start gap-5 p-6 rounded-[2rem] border-2 transition-all cursor-pointer"
+                            :class="selectedEntries.includes(entry.id)
+                                ? 'border-[#5A7D5A] bg-white shadow-xl shadow-[#5A7D5A]/5 scale-[1.02]'
+                                : 'border-transparent bg-white/60 hover:bg-white hover:shadow-md'">
+                            <div class="relative flex items-center justify-center h-6 w-6 mt-1">
+                                <input
+                                    type="checkbox"
+                                    :value="entry.id"
+                                    v-model="selectedEntries"
+                                    class="peer h-6 w-6 rounded-xl border-2 border-[#D4E2D4] text-[#5A7D5A] focus:ring-0 transition-all cursor-pointer appearance-none bg-white checked:bg-[#5A7D5A] checked:border-[#5A7D5A]" />
+                                <svg class="absolute w-4 h-4 text-white pointer-events-none hidden peer-checked:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                            </div>
+                            <div class="flex-1 min-w-0">
+                                <p class="font-bold text-[#333] text-lg truncate tracking-tight">{{ entry.label }}</p>
+                                <p class="text-xs font-bold text-[#A0A0A0] mt-1.5 uppercase tracking-wider">
+                                    {{ entry.start_time }} — {{ entry.end_time }}
+                                </p>
+                            </div>
+                        </label>
+                    </div>
+                </section>
+
+                <!-- Channels -->
+                <section>
+                    <div class="mb-8">
+                        <h3 class="text-[0.7rem] font-black text-[#A0A0A0] uppercase tracking-[0.2em]">
+                            {{ t('share_day.channels_title') }}
+                        </h3>
+                    </div>
+
+                    <div v-if="channelsLoading" class="space-y-4">
+                        <div v-for="i in 2" :key="i" class="h-24 bg-white/50 animate-pulse rounded-[2rem]"></div>
+                    </div>
+
+                    <div v-else-if="channelsError"
+                        class="p-6 bg-[#FFF2F2] text-[#AF4E4E] rounded-[2rem] border border-[#FFDADA] text-sm font-medium">
+                        {{ t('share_day.error_channels') }}
+                    </div>
+
+                    <div v-else-if="!channels?.length"
+                        class="text-center py-20 bg-white/40 rounded-[3rem] border-4 border-dashed border-white/60">
+                        <p class="text-[#BCBCBC] font-bold">{{ t('share_day.no_channels') }}</p>
+                    </div>
+
+                    <div v-else class="grid grid-cols-1 gap-4">
+                        <label
+                            v-for="channel in channels"
+                            :key="channel.id"
+                            class="group flex items-center gap-6 p-6 rounded-[2.5rem] border-2 transition-all cursor-pointer"
+                            :class="selectedChannels.includes(channel.id)
+                                ? 'border-[#8E9AAF] bg-white shadow-xl shadow-[#8E9AAF]/5 scale-[1.01]'
+                                : 'border-transparent bg-white/60 hover:bg-white hover:shadow-md'">
+                            <div class="relative flex items-center justify-center h-6 w-6">
+                                <input
+                                    type="checkbox"
+                                    :value="channel.id"
+                                    v-model="selectedChannels"
+                                    class="peer h-6 w-6 rounded-xl border-2 border-[#D4E2D4] text-[#8E9AAF] focus:ring-0 transition-all cursor-pointer appearance-none bg-white checked:bg-[#8E9AAF] checked:border-[#8E9AAF]" />
+                                <svg class="absolute w-4 h-4 text-white pointer-events-none hidden peer-checked:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                            </div>
+                            <div class="flex-1">
+                                <p class="font-bold text-[#333] text-lg tracking-tight">{{ channel.name }}</p>
+                                <p class="text-sm text-[#A0A0A0] font-medium truncate mt-0.5">{{ channel.description }}</p>
+                            </div>
+                            <div class="bg-[#F0F4F8] px-4 py-2 rounded-2xl">
+                                <span class="text-[10px] font-black text-[#8E9AAF] uppercase tracking-widest whitespace-nowrap">
+                                    {{ channel.members_count }} {{ t('share_day.members') }}
+                                </span>
+                            </div>
+                        </label>
+                    </div>
+                </section>
+
+                <div class="h-32"></div>
+            </div>
+        </form>
+
+        <footer class="p-8 bg-white/80 backdrop-blur-2xl border-t border-white shadow-[0_-10px_40px_rgba(0,0,0,0.02)] sticky bottom-0">
+            <div class="max-w-4xl mx-auto flex flex-col md:flex-row items-center gap-6">
+
+                <div v-if="error"
+                    class="flex-1 text-sm text-[#AF4E4E] font-bold bg-[#FFF2F2] px-6 py-4 rounded-2xl border border-[#FFDADA]">
+                    {{ error }}
+                </div>
+
+                <div v-else class="flex-1 hidden md:block">
+                    <p class="text-[0.7rem] font-black text-[#BCBCBC] uppercase tracking-[0.2em] mb-1">
+                        {{ t('share_day.ready') }}
+                    </p>
+                    <p class="text-[#333] font-bold" v-if="selectedEntries.length && selectedChannels.length">
+                        <span class="text-[#5A7D5A]">{{ selectedEntries.length }} entries</span>
+                        <span class="mx-2 text-[#D4E2D4]">/</span>
+                        <span class="text-[#8E9AAF]">{{ selectedChannels.length }} channels</span>
+                    </p>
+                </div>
+
+                <button
+                    @click="handleSubmit"
+                    :disabled="loading || !selectedEntries.length || !selectedChannels.length"
+                    class="w-full md:w-auto px-12 py-5 bg-[#5A7D5A] hover:bg-[#4a6b4a] disabled:bg-[#E8F0E8] disabled:text-[#A0A0A0] text-white font-black rounded-[2rem] transition-all shadow-2xl shadow-[#5A7D5A]/20 flex items-center justify-center gap-4 active:scale-95">
+                    <div v-if="loading" class="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
+                    <span class="tracking-tight">{{ loading ? t('share_day.sharing') : t('share_day.submit') }}</span>
+                </button>
+
+            </div>
+        </footer>
+
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/time-entries/SingleEntry.vue b/frontend/src/components/time-entries/SingleEntry.vue
new file mode 100644
index 0000000..761fc1b
--- /dev/null
+++ b/frontend/src/components/time-entries/SingleEntry.vue
@@ -0,0 +1,129 @@
+<script setup>
+import { ref, inject } from 'vue'
+import useApi from '@/composables/useApi'
+import timeEntryService from '@/services/timeEntryService'
+
+const props = defineProps(['entry'])
+const refreshEntries = inject('refreshEntries')
+
+const formatTime = (timeStr) => {
+    const [time, period] = timeStr.split(' ')
+    let [hours, minutes] = time.split(':').map(Number)
+
+    if (period === 'PM' && hours !== 12) hours += 12
+    if (period === 'AM' && hours === 12) hours = 0
+
+    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`
+}
+
+const formData = ref({
+    label:     props.entry.label,
+    startTime: formatTime(props.entry.start_time),
+    endTime:   formatTime(props.entry.end_time),
+})
+
+const confirmDelete = ref(false)
+const editing = ref(false)
+
+const { loading, error, request } = useApi(
+  () => timeEntryService.deleteTimeEntry(props.entry.id)
+)
+const { loading: updatingLoading, error: updatingError, request: updatingRequest } = useApi(
+  () => timeEntryService.updateTimeEntry(formData.value, props.entry.id)
+)
+
+const remove = async () => {
+    await request()
+    if (!error.value) refreshEntries()
+}
+
+const update = async () => {
+    await updatingRequest()
+    if (!updatingError.value) {
+        refreshEntries()
+        editing.value = false
+    }
+}
+</script>
+
+<template>
+  <div class="p-6 bg-white rounded-[2rem] mb-4 transition-all duration-300 shadow-[0_4px_20px_rgba(0,0,0,0.03)] border border-white hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] group relative">
+    
+    <div v-if="!editing" class="flex items-center justify-between w-full">
+      <div class="flex flex-col gap-1 flex-1">
+        <span class="font-bold text-[#333] text-lg tracking-tight">{{ entry.label }}</span>
+        <span class="text-[#A0A0A0] text-sm font-medium">{{ entry.start_time }} — {{ entry.end_time }}</span>
+      </div>
+
+      <div class="flex items-center gap-4">
+        <span class="text-[#5A7D5A] font-bold text-xs py-2 px-4 bg-[#E8F0E8] rounded-xl whitespace-nowrap">
+          {{ $t('single_entry.hour', entry.time_taken.hours) }} 
+          <span class="opacity-40 mx-1">/</span>
+          {{ $t('single_entry.minute', entry.time_taken.minutes) }}
+        </span>
+
+        <button 
+          @click="editing = true"
+          class="p-2 text-[#BCBCBC] hover:text-[#5A7D5A] transition-colors">
+          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <div v-else class="w-full">
+      <form @submit.prevent="update" class="space-y-4">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div>
+            <label class="block mb-2 text-xs font-bold text-[#A0A0A0] uppercase tracking-wider">{{ $t("update.label") }}</label>
+            <input type="text" v-model="formData.label" required class="w-full px-4 py-3 bg-[#F9F7F2] border-none rounded-xl focus:ring-2 focus:ring-[#D4E2D4] outline-none transition-all">
+          </div>
+          <div>
+            <label class="block mb-2 text-xs font-bold text-[#A0A0A0] uppercase tracking-wider">{{ $t("update.start_time") }}</label>
+            <input type="time" v-model="formData.startTime" required class="w-full px-4 py-3 bg-[#F9F7F2] border-none rounded-xl focus:ring-2 focus:ring-[#D4E2D4] outline-none transition-all">
+          </div>
+          <div>
+            <label class="block mb-2 text-xs font-bold text-[#A0A0A0] uppercase tracking-wider">{{ $t("update.end_time") }}</label>
+            <input type="time" v-model="formData.endTime" required class="w-full px-4 py-3 bg-[#F9F7F2] border-none rounded-xl focus:ring-2 focus:ring-[#D4E2D4] outline-none transition-all">
+          </div>
+        </div>
+
+        <div class="flex gap-3 pt-2">
+          <button type="submit" :disabled="updatingLoading" class="flex-1 py-3 bg-[#5A7D5A] text-white rounded-xl font-bold text-sm shadow-sm hover:bg-[#4a6b4a] transition-all">
+            {{ updatingLoading ? $t("update.loading") : $t("update.update") || $t("update.save_changes") }}
+          </button>
+          <button type="button" @click="editing = false" class="px-6 py-3 bg-[#F0F4F8] text-[#8E9AAF] rounded-xl font-bold text-sm hover:bg-gray-200 transition-all">
+            Cancel
+          </button>
+        </div>
+      </form>
+    </div>
+
+    <div class="absolute -top-2 -right-2 flex gap-2">
+      <template v-if="!confirmDelete">
+        <button
+          @click="confirmDelete = true"
+          class="opacity-0 group-hover:opacity-100 transition-all duration-300 p-2 bg-white shadow-md rounded-full text-[#BCBCBC] hover:text-[#AF4E4E]"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/>
+          </svg>
+        </button>
+      </template>
+
+      <template v-else>
+        <div class="flex items-center gap-2 bg-white p-2 rounded-2xl shadow-xl border border-[#FFDADA] animate-in fade-in zoom-in duration-200">
+          <span class="text-[0.7rem] font-bold px-2 text-[#AF4E4E]">{{ $t('single_entry.confirm_delete') }}</span>
+          <button @click="remove" :disabled="loading" class="px-3 py-1.5 bg-[#AF4E4E] text-white text-[0.7rem] font-bold rounded-lg hover:bg-[#903d3d]">
+            {{ loading ? '...' : $t('single_entry.yes') }}
+          </button>
+          <button @click="confirmDelete = false" :disabled="loading" class="px-3 py-1.5 bg-[#F0F4F8] text-[#8E9AAF] text-[0.7rem] font-bold rounded-lg">
+            {{ $t('single_entry.no') }}
+          </button>
+        </div>
+      </template>
+    </div>
+
+  </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/time-entries/TimeEntryList.vue b/frontend/src/components/time-entries/TimeEntryList.vue
new file mode 100644
index 0000000..9d272b1
--- /dev/null
+++ b/frontend/src/components/time-entries/TimeEntryList.vue
@@ -0,0 +1,29 @@
+<script setup>
+import SingleEntry from './SingleEntry.vue';
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+const props = defineProps(['entries']);
+</script>
+
+<template>
+  <div class="flex flex-col gap-8 w-full">
+    <div>
+      <router-link :to="{ name: 'AddEntry' }"
+        class="inline-flex items-center justify-center bg-[#5A7D5A] hover:bg-[#4a6b4a] text-white px-8 py-4 rounded-[1.5rem] transition-all duration-300 shadow-sm hover:shadow-lg active:scale-95 text-sm font-bold tracking-tight">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+        </svg>
+        {{ t('home.add_new_entry') }}
+      </router-link>
+    </div>
+
+    <div class="flex gap-8 w-full">
+      <div class="flex-1 max-w-[800px] space-y-4">
+        <div v-for="entry in entries" :key="entry.id" 
+          class="transition-all duration-300 hover:translate-x-1">
+          <SingleEntry :entry="entry"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/composables/usePagination.js b/frontend/src/composables/usePagination.js
new file mode 100644
index 0000000..0c85d9e
--- /dev/null
+++ b/frontend/src/composables/usePagination.js
@@ -0,0 +1,32 @@
+import { ref, computed } from 'vue'
+import useApi from './useApi'
+
+export function usePagination(apiFunc, options = {}) {
+    const { filters = {}, initialPage = 1, immediate = true } = options
+
+    function resolveFilters() {
+        return filters?.value ?? filters
+        // filters could be a ref or a plain object this is way we handle it this way
+    }
+
+    const paginatorData = ref(null)
+    //this is the full raw Laravel response object.
+
+    const { loading, error, request } = useApi(
+        (page) => apiFunc(page, resolveFilters()).then(response => {
+            paginatorData.value = response.data
+            return response  // ← useApi does result.data on this, so it takes out the pagination attributes which we needs 
+        }),
+        false
+    )
+
+    const items   = computed(() => paginatorData.value?.data ?? []) // array of actual data from the res
+    const isEmpty = computed(() => !loading.value && items.value.length === 0)
+
+    const goToPage = (page) => request(page)
+    const refresh  = () => request(1)
+
+    if (immediate) request(initialPage)
+
+    return { items, paginatorData, loading, error, isEmpty, goToPage, refresh }
+}
\ No newline at end of file
diff --git a/frontend/src/locales/ar.json b/frontend/src/locales/ar.json
new file mode 100644
index 0000000..3f6a7d8
--- /dev/null
+++ b/frontend/src/locales/ar.json
@@ -0,0 +1,227 @@
+{
+    "message": {
+        "hello": "مرحبا",
+        "hide_history": "اخفاء",
+        "add_entry": "أضف نشاط جديد"
+    },
+    "login": {
+        "welcome_back": "أهلا بعودتك",
+        "email": "الايميل",
+        "password": "كلمة المرور",
+        "login": "تسجيل الدخول",
+        "dont_have_account": "لا تملك حساب ؟",
+        "sign_up_here": "أنشئ حساب هنا"
+    },
+    "register": {
+        "create_account": "أنشئ حساب",
+        "name": "الاسم",
+        "email": "الايميل",
+        "password": "كلمة المرور",
+        "confirm_password": "تأكيد كلمة المرور",
+        "sign_up": "أنشئ حساب",
+        "you_already_have_account": "لديك حساب؟",
+        "login": "سجل الدخول"
+    },
+    "about": {
+        "title": "عن الموقع",
+        "p1": "تايم تراكر هو أداة إنتاجية شخصية تساعدك على تسجيل وفهم كيفية قضاء وقتك كل يوم. فقط أضف نشاطاً بعنوان ووقت بداية ونهاية — وسيتولى التطبيق الباقي.",
+        "p2": "يمكنك مشاركة سجلات نشاطك اليومية مع القنوات — وهي مجموعات من الأشخاص الذين تتعاون معهم. يمكن لأعضاء القناة عرض أيامك المشتركة ونشاطاتك وترك تعليقات. إنها طريقة بسيطة للبقاء شفافاً مع فريقك.",
+        "p3": "تمنحك ميزة التقارير صورة واضحة عن أين يذهب وقتك. اختر أي نطاق زمني وشاهد فوراً تحليلاً مفصلاً حسب النشاط ومتوسطات يومية — كل ذلك مرئي بمخططات بيانية لتسهيل اكتشاف الأنماط."
+    },
+    "nav": {
+        "home": "الصفحة الرئيسية",
+        "about": "عن الموقع",
+        "add": "أضف نشاط",
+        "sign_out": "تسجيل الخروج",
+        "channels": "القنوات",
+        "shared_days": "الأيام المشتركة",
+        "reports": "التقارير",
+        "invitations": "الدعوات"
+    },
+    "addForm": {
+        "label": "العنوان",
+        "start_time": "وقت البدء",
+        "end_time": "وقت الانتهاء",
+        "add_entry": "أضف النشاط"
+    },
+    "home": {
+        "history": "السجل",
+        "hide": "إخفاء",
+        "add_new_entry": "أضف نشاط جديد",
+        "today_entries": "نشاطات اليوم",
+        "entries_of": "نشاطات",
+        "error": "عذراً! حدث خطأ",
+         "total_time": "إجمالي الوقت",
+        "total_entries": "النشاطات",
+        "avg_per_entry": "المتوسط لكل نشاط",
+        "load_more": "تحميل المزيد",
+        "loading": "جاري التحميل...",
+        "error_loading_dates": "خطأ في تحميل التواريخ",
+        "no_dates": "لا توجد تواريخ متاحة",
+        "search_placeholder": "بحث...",
+        "sort_default": "افتراضي",
+        "sort_oldest": "الأقدم",
+        "sort_latest": "الأحدث"
+    },
+    "single_entry": {
+        "hour": "صفر ساعات | {n} ساعة | {n} ساعات",
+        "minute": "صفر دقائق | {n} دقيقة | {n} دقائق",
+        "confirm_delete": "هل أنت متأكد؟",
+        "yes": "نعم",
+        "no": "لا"
+    },
+"update": {
+    "label": "العنوان",
+    "start_time": "وقت البدء",
+    "end_time": "وقت الانتهاء",
+    "loading": "جاري التحديث...",
+    "update": "تحديث",
+    "save_changes": "حفظ التغييرات",
+    "cancel": "إلغاء"
+  },
+    "channel_list": {
+        "title": "القنوات",
+        "new_channel": "قناة جديدة",
+        "my_channels": "قنواتي",
+        "member_of": "عضو في",
+        "no_owned": "ليس لديك أي قنوات بعد.",
+        "no_joined": "لست عضواً في أي قناة بعد.",
+        "loading": "جاري التحميل...",
+        "error": "حدث خطأ ما",
+        "delete_confirm": "هل أنت متأكد أنك تريد حذف هذه القناة؟",
+        "create_first": "أنشئ قناتك الأولى"
+    },
+    "create_channel": {
+        "title": "إنشاء قناة",
+        "name": "الاسم",
+        "description": "الوصف",
+        "submit": "إنشاء القناة",
+        "loading": "جاري التحميل..."
+    },
+    "channel": {
+        "overview": "نظرة عامة",
+        "members": "الأعضاء",
+        "shared_days": "الأيام المشتركة",
+        "settings": "الإعدادات",
+        "coming_soon": "قريباً...",
+        "delete_channel": "حذف القناة",
+        "delete_warning": "هذا الإجراء دائم ولا يمكن التراجع عنه.",
+        "delete_confirm": "هل أنت متأكد أنك تريد حذف هذه القناة؟",
+        "yes": "نعم، احذف",
+        "no": "إلغاء",
+        "loading": "جاري التحميل...",
+        "error": "حدث خطأ ما"
+    },
+    "channel_members": {
+        "community": "المجتمع",
+        "manage_members": "إدارة أعضاء القناة والدعوات الصادرة.",
+        "active_members": "الأعضاء النشطون",
+        "pending_invitations": "الدعوات المعلقة",
+        "invite_member": "دعوة عضو",
+        "no_pending": "لا توجد دعوات معلقة."
+    },
+    "invite_modal": {
+        "title": "دعوة إلى القناة",
+        "search_placeholder": "ابحث بالاسم أو البريد الإلكتروني",
+        "cancel": "إلغاء",
+        "send": "إرسال الدعوة",
+        "sending": "جاري الإرسال..."
+    },
+    "channel_overview": {
+        "created": "تم الإنشاء",
+        "members": "الأعضاء",
+        "no_description": "لا يوجد وصف لهذه القناة."
+    },
+    "channel_card": {
+        "no_description": "لا يوجد وصف لهذه القناة.",
+        "members": "أعضاء",
+        "enter": "دخول"
+    },
+    "invitation_card": {
+        "cancel": "إلغاء",
+        "accept": "قبول",
+        "decline": "رفض"
+    },
+    "invitations_view": {
+        "title": "دعواتي",
+        "empty": "لم تتلقَ أي دعوات بعد.",
+        "loading": "جاري التحميل...",
+        "error": "حدث خطأ ما"
+    },
+    "share_day": {
+        "title": "مشاركة النشاط",
+        "entries_title": "اختر النشاطات التي تريد مشاركتها",
+        "channels_title": "شارك إلى القنوات",
+        "loading_entries": "جاري تحميل النشاطات...",
+        "loading_channels": "جاري تحميل القنوات...",
+        "error_entries": "فشل تحميل النشاطات. يرجى المحاولة مجدداً.",
+        "error_channels": "فشل تحميل القنوات. يرجى المحاولة مجدداً.",
+        "no_entries": "لا توجد نشاطات لهذا اليوم.",
+        "no_channels": "لا تمتلك أي قنوات بعد.",
+        "members": "أعضاء",
+        "sharing": "جاري المشاركة...",
+        "submit": "شارك اليوم",
+        "selected": "محدد",
+        "ready": "جاهز للمشاركة؟",
+        "summary": "{entries} نشاط إلى {channels} قنوات"
+    },
+    "shared_day_card": {
+        "day": "يوم",
+        "entries": "نشاطات"
+    },
+    "my_shared_days": {
+        "title": "أيامي المشتركة",
+        "shared_to": "تمت المشاركة مع {count} قناة | تمت المشاركة مع {count} قنوات",
+        "empty_title": "لا توجد أيام مشتركة بعد",
+        "empty_message": "اذهب إلى سجلك وشارك يوماً مع قناة."
+    },
+    "channel_shared_days": {
+        "removed": "تمت إزالة اليوم بنجاح!",
+        "empty_title": "لا توجد أيام مشتركة بعد",
+        "empty_message": "ستظهر السجلات المشتركة هنا بمجرد نشرها."
+    },
+    "shared_day_view": {
+        "summary": "ملخص سجل النشاط",
+        "total_time": "إجمالي الوقت"
+    },
+    "history_date_item": {
+        "share": "مشاركة"
+    },
+    
+    "comments": {
+        "save": "حفظ",
+        "cancel": "إلغاء",
+        "placeholder": "اكتب تعليقاً...",
+        "submit": "نشر",
+        "submitting": "جاري النشر...",
+        "title": "التعليقات",
+        "empty": "لا توجد تعليقات بعد. كن أول من يعلق!",
+        "load_more": "تحميل المزيد",
+        "show": "إظهار التعليقات",
+        "hide": "إخفاء التعليقات"
+    
+},
+"reports": {
+    "title": "إحصائيات القناة",
+    "subtitle": "نظرة مفصلة على نشاط مساحة العمل الخاصة بك.",
+    "refresh": "تحديث",
+    "generate": "إنشاء التقرير",
+    "generating": "جاري الإنشاء...",
+    "from": "من",
+    "to": "إلى",
+    "empty_state": "لم يتم العثور على مدخلات",
+    "empty_hint": "جرّب اختيار نطاق زمني مختلف.",
+    "quick_stats": {
+      "title": "إحصائيات سريعة",
+      "total_entries": "إجمالي المدخلات",
+      "total_time": "إجمالي الوقت",
+      "daily_avg": "المعدل اليومي",
+      "labels_per_day": "تصنيفات يومياً"
+    },
+    "charts": {
+      "time_distribution": "توزيع الوقت",
+      "most_used": "التصنيفات الأكثر استخداماً",
+      "avg_per_label": "متوسط الوقت لكل تصنيف"
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
new file mode 100644
index 0000000..1411d86
--- /dev/null
+++ b/frontend/src/locales/en.json
@@ -0,0 +1,226 @@
+{
+    "message": {
+        "hello": "hello"
+    },
+    "login": {
+        "welcome_back": "Welcome Back",
+        "email": "Email",
+        "password": "Password",
+        "login": "Login",
+        "dont_have_account": "Don't have an account?",
+        "sign_up_here": "Sign Up Here"
+    },
+    "register": {
+        "create_account": "Create Account",
+        "name": "Name",
+        "email": "Email",
+        "password": "Password",
+        "confirm_password": "Confirm Password",
+        "sign_up": "Sign Up",
+        "you_already_have_account": "You already have an account? ",
+        "login": "Login"
+    },
+    "about": {
+        "title": "About",
+        "p1": "TimeTracker is a personal productivity tool that helps you log and understand how you spend your time every day. Simply add time entries with a label, start time, and end time — and the app takes care of the rest.",
+        "p2": "You can share your daily activity logs with channels — groups of people you collaborate with. Channel members can view your shared days, see your time entries, and leave comments. It's a simple way to stay transparent with your team without the overhead of complex project management tools.",
+        "p3": "The reports feature gives you a clear picture of where your time goes. Select any date range and instantly see breakdowns by label, your most used activity types, and daily averages — all visualized with charts to make patterns easy to spot."
+    },
+
+    "nav": {
+        "home": "Home",
+        "about": "About",
+        "add": "Add Entry",
+        "sign_out": "Sign Out",
+        "channels": "Channels",
+        "shared_days": "Shared Days",
+        "reports": "Reports",
+        "invitations": "Invitations"
+    },
+    "addForm": {
+        "label": "Label",
+        "start_time": "Start Time",
+        "end_time": "End Time",
+        "add_entry": "Add Entry"
+    },
+    "home": {
+        "history": "History",
+        "hide": "Hide",
+        "total_time": "Total Time",
+        "total_entries": "Entries",
+        "avg_per_entry": "Avg per Entry",
+        "load_more": "Load more",
+        "add_new_entry": "Add New Entry",
+        "today_entries": "Today's Entries",
+        "entries_of": "Time Entries of",
+        "error": "Oops! Error encountered",
+        "loading": "Loading entries...",
+        "error_loading_dates": "Error loading dates",
+        "no_dates": "No dates available",
+        "search_placeholder": "Search...",
+        "sort_default": "Default",
+        "sort_oldest": "Oldest",
+        "sort_latest": "Latest"
+    },
+    "single_entry": {
+        "hour": "0 hours | {n} hour | {n} hours",
+        "minute": "0 minutes | {n} minute | {n} minutes",
+        "confirm_delete": "Are you sure?",
+        "yes": "Yes",
+        "no": "No"
+    },
+    "update": {
+    "label": "Label",
+    "start_time": "Start Time",
+    "end_time": "End Time",
+    "loading": "Updating...",
+    "update": "Update",
+    "save_changes": "Save Changes",
+    "cancel": "Cancel"
+  },
+    "channel_list": {
+        "title": "Channels",
+        "new_channel": "New Channel",
+        "my_channels": "My Channels",
+        "member_of": "Member Of",
+        "no_owned": "You have no channels yet.",
+        "no_joined": "You are not a member of any channel yet.",
+        "loading": "Loading...",
+        "error": "Something went wrong",
+        "delete_confirm": "Are you sure you want to delete this channel?",
+        "create_first": "Create your first channel"
+    },
+    "create_channel": {
+        "title": "Create Channel",
+        "name": "Name",
+        "description": "Description",
+        "submit": "Create Channel",
+        "loading": "Loading..."
+    },
+    "channel": {
+        "overview": "Overview",
+        "members": "Members",
+        "shared_days": "Shared Days",
+        "settings": "Settings",
+        "coming_soon": "Coming soon...",
+        "delete_channel": "Delete Channel",
+        "delete_warning": "This action is permanent and cannot be undone.",
+        "delete_confirm": "Are you sure you want to delete this channel?",
+        "yes": "Yes, delete",
+        "no": "Cancel",
+        "loading": "Loading...",
+        "error": "Something went wrong"
+    },
+    "channel_members": {
+        "community": "Community",
+        "manage_members": "Manage your channel members and outgoing invites.",
+        "active_members": "Active Members",
+        "pending_invitations": "Pending Invitations",
+        "invite_member": "Invite Member",
+        "no_pending": "No pending invitations."
+    },
+    "invite_modal": {
+        "title": "Invite to Channel",
+        "search_placeholder": "Search by name or email",
+        "cancel": "Cancel",
+        "send": "Send Invitation",
+        "sending": "Sending..."
+    },
+    "channel_overview": {
+        "created": "Created",
+        "members": "Members",
+        "no_description": "No description provided for this channel."
+    },
+    "channel_card": {
+        "no_description": "No description provided for this channel.",
+        "members": "members",
+        "enter": "Enter"
+    },
+    "invitation_card": {
+        "cancel": "Cancel",
+        "accept": "Accept",
+        "decline": "Decline"
+    },
+    "invitations_view": {
+        "title": "My Invitations",
+        "empty": "You haven't received any invitations yet.",
+        "loading": "Loading...",
+        "error": "Something went wrong"
+    },
+    "share_day": {
+        "title": "Share Activity",
+        "entries_title": "Select Time Entries to Share",
+        "channels_title": "Share To Channels",
+        "loading_entries": "Loading entries...",
+        "loading_channels": "Loading channels...",
+        "error_entries": "Failed to load time entries. Please try again.",
+        "error_channels": "Failed to load channels. Please try again.",
+        "no_entries": "No time entries found for this day.",
+        "no_channels": "You don't own any channels yet.",
+        "members": "members",
+        "sharing": "Sharing...",
+        "submit": "Share Day",
+        "selected": "selected",
+        "ready": "Ready to share?",
+        "summary": "{entries} logs to {channels} channels"
+    },
+    "shared_day_card": {
+        "day": "Day",
+        "entries": "entries"
+    },
+    "my_shared_days": {
+        "title": "My Shared Days",
+        "shared_to": "Shared to {count} channel | Shared to {count} channels",
+        "empty_title": "No shared days yet",
+        "empty_message": "Go to your history and share a day to a channel."
+    },
+    "channel_shared_days": {
+        "removed": "Day removed successfully!",
+        "empty_title": "No shared days yet",
+        "empty_message": "Shared logs will appear here once members post them."
+    },
+    "shared_day_view": {
+        "summary": "Activity Log Summary",
+        "total_time": "Total Time"
+    },
+    "history_date_item": {
+        "share": "Share"
+    },
+    
+    "comments": {
+        "save": "Save",
+        "cancel": "Cancel",
+        "placeholder": "Write a comment...",
+        "submit": "Post",
+        "submitting": "Posting...",
+        "title": "Comments",
+        "empty": "No comments yet. Be the first to comment!",
+        "load_more": "Load more",
+        "show": "Show Comments",
+        "hide": "Hide Comments"
+    
+},
+"reports": {
+    "title": "Channel Insights",
+    "subtitle": "Detailed overview of your workspace activity.",
+    "refresh": "Refresh",
+    "generate": "Generate Report",
+    "generating": "Generating...",
+    "from": "From",
+    "to": "To",
+    "empty_state": "No entries found",
+    "empty_hint": "Try selecting a different date range.",
+    "quick_stats": {
+      "title": "Quick Stats",
+      "total_entries": "Total Entries",
+      "total_time": "Total Time",
+      "daily_avg": "Daily Average",
+      "labels_per_day": "labels per day"
+    },
+    "charts": {
+      "time_distribution": "Time Distribution",
+      "most_used": "Most Used Labels",
+      "avg_per_label": "Average Time per Label"
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 5262432..d710170 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -6,129 +6,24 @@ import router from './router'
 import './assets/main.css'
 import Toast from 'vue-toastification'
 import 'vue-toastification/dist/index.css'
+import en from './locales/en.json'
+import ar from './locales/ar.json'
+import vue3GoogleLogin from 'vue3-google-login'
+
 const app = createApp(App)
 
+const i18n = createI18n({
+    legacy: false,
+    locale: 'ar',
+    fallbackLocale: 'en',
+    messages: { en, ar }
+})
+
 app.use(createPinia())
 app.use(router)
 app.use(Toast)
-
-const i18n = createI18n({
-legacy: false,
-  locale: 'ar',
-  fallbackLocale: 'en',
-  messages: {
-    en: {
-      mesasge: {
-        hello: 'hello',
-      },
-      login: {
-        welcome_back: 'Welcome Back',
-        email: 'Email',
-        password: 'Password',
-        login: 'Login',
-        dont_have_account: "Don't have an account?",
-        sign_up_here: "Sign Up Here"
-      },
-      register:{
-        create_account: "Create Account",
-        name: "Name",
-        email: "Email",
-        password: "Password",
-        confirm_password: "Confirm Password",
-        sign_up: "Sign Up",
-        you_already_have_account: "You already have an account? ",
-        login: "Login"
-      },
-      nav: {
-        home: "Home",
-        about: "About",
-        add: "Add a new Time Entry",
-        sign_out: "Sign Out",
-
-      },
-      addForm: {
-        label:"Label",
-        start_time: "Start Time",
-        end_time: "End Time",
-        add_entry: "Add Entry"
-      },
-      home: {
-        history: "History",
-        hide: "Hide",
-        add_new_entry: "Add New Entry",
-        today_entries: "Today's Entries",
-        entries_of: "Time Entries of",
-        error: "Oops! Error encountered",
-        loading: "Loading entries...",
-        error_loading_dates: "Error loading dates",
-        no_dates: "No dates available"
-      },
-      single_entry: {
-        hour: '0 hours | {n} hour | {n} hours',
-          "confirm_delete": "Are you sure?",
-          "yes": "Yes",
-           "no": "No",
-        minute: '0 minutes | {n} minute | {n} minutes'
-      }
-
-    },
-    ar: {
-      message: {
-        hello: "مرحبا",
-        hide_history: 'اخفاء',
-        add_entry: 'أضف نشاط جديد'
-      },
-      login: {
-        welcome_back: 'أهلا بعودتك',
-        email: 'الايميل',
-        password: 'كلمة المرور',
-        login:'تسجيل الدخول',
-        dont_have_account: "لا تملك حساب ؟",
-        sign_up_here: "أنشئ حساب هنا"
-      },
-      register:{
-        create_account: "أنشئ حساب",
-        name: "الاسم",
-        email: "الايميل",
-        password: "كلمة المرور",
-        confirm_password: "تأكيد كلمة المرور",
-        sign_up: "أنشئ حساب",
-        you_already_have_account: "لديك حساب؟",
-        login: "سجل الدخول"
-      },
-      nav: {
-        home: "الصفحة الرئيسية",
-        about: "عن الموقع",
-        add: 'أضف نشاط جديد',
-        sign_out: "تسجيل الخروج",
-        
-      },
-      addForm: {
-        label:"العنوان",
-        start_time: "وقت البدء",
-        end_time: "وقت الانتهاء",
-        add_entry: "أضف النشاط"
-      },
-      home: {
-        history: "السجل",
-        hide: "إخفاء",
-        add_new_entry: "أضف نشاط جديد",
-        today_entries: "نشاطات اليوم",
-        entries_of: "نشاطات",
-        error: "عذراً! حدث خطأ",
-        loading: "جاري التحميل...",
-        error_loading_dates: "خطأ في تحميل التواريخ",
-        no_dates: "لا توجد تواريخ متاحة"
-      },
-      single_entry: {
-        hour: 'صفر  ساعات | {n} ساعة | {n} ساعات',
-        minute: 'صفر دقائق | {n} دقيقة | {n} دقائق',
-          "confirm_delete": "هل أنت متأكد؟",
-          "yes": "نعم",
-          "no": "لا"
-      }      
-    },
-  },
-});
 app.use(i18n)
-app.mount('#app')
+app.use(vue3GoogleLogin, {
+  clientId: '790034353136-fdm5vgcqgmjsh6lcp4igrc4khenihdes.apps.googleusercontent.com'
+})
+app.mount('#app')
\ No newline at end of file
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index ec7b1d9..a5d6e1d 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,10 +1,17 @@
 import About from '@/views/About.vue'
-import Home from '@/views/Home.vue'
+import HomeView from '@/views/HomeView.vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import Login from '@/views/Login.vue'
 import Register from '@/views/Register.vue'
 import AddForm from '@/views/AddForm.vue'
 import { authGaurd } from '@/middleware/auth'
+import CreateChannelForm from '@/views/CreateChannelForm.vue'
+import ChannelDashboard from '@/views/ChannelDashboard.vue'
+import ChannelList from '@/views/ChannelList.vue'
+import InvitationsView from '@/views/InvitationsView.vue'
+import SharedDayDetails from '@/components/channel/shared-days/SharedDayDetails.vue'
+import MySharedDays from '@/views/MySharedDays.vue'
+import ReportsView from '@/views/ReportsView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -12,7 +19,7 @@ const router = createRouter({
     {
       path: "/",
       name: "Home",
-      component: Home,
+      component: HomeView,
       meta: { requiresAuth: true }
     },
     {
@@ -22,11 +29,54 @@ const router = createRouter({
       meta: { requiresAuth: true }
     },
     {
-      path: "/add",
-      name: "Add",
+      path: "/add-entry",
+      name: "AddEntry",
       component: AddForm,
       meta: {requiresAuth: true}
     },
+    {
+      path: "/channels",
+      name: "Channels",
+      component: ChannelList,
+      meta: {requiresAuth: true}
+    },
+    {
+      path: "/add-channel",
+      name: "AddChannel",
+      component: CreateChannelForm,
+      meta: {requiresAuth: true}
+    },
+      {
+    path: '/channels/:id',
+    name: 'Channel',
+    component: ChannelDashboard,
+    meta: {requiresAuth: true}
+     },
+     {
+      path: '/my-shared-days',
+      name: 'MySharedDays',
+      component: MySharedDays,
+      meta: {requiresAuth: true}
+
+     },
+     {
+      path: '/channels/:channel_id/shared-days/:id',
+      name: 'SharedDay',
+      component: SharedDayDetails,
+      meta: {requiresAuth: true}
+     },
+     {
+      path: '/my-invitations',
+      name: 'MyInvitations',
+      component: InvitationsView,
+      meta: {requiresAuth: true}
+     },
+    {
+      path: '/reports',
+      name: 'Reports',
+      component: ReportsView,
+      meta: {requiresAuth: true}
+    },
     {
       path: "/login",
       name: "Login",
diff --git a/frontend/src/services/api.js b/frontend/src/services/api.js
index a6a200c..24287a4 100644
--- a/frontend/src/services/api.js
+++ b/frontend/src/services/api.js
@@ -24,27 +24,32 @@ apiClient.interceptors.request.use(
 );
 
 apiClient.interceptors.response.use(
-  (response) => response,
-  (error) => {
-    let message = ERROR_MESSAGES.GENERIC_ERROR;
-    if (error.response) {
-      const { status, data } = error.response;
-
-      if (data && data.message) {
-        message = data.message;
-      } else {
-        message = ERROR_MESSAGES[status] || ERROR_MESSAGES.GENERIC_ERROR;
-      }
-      if (status === 401) {
-    } else {
-      message = ERROR_MESSAGES.NETWORK_ERROR;
-    }
+    (response) => response,
+    (error) => {
+        let message = ERROR_MESSAGES.GENERIC_ERROR;
+
+        if (error.response) {
+            const { status, data } = error.response;
 
-    toast.error(message); 
-    return Promise.reject(new Error(message));
-  }}
+            if (data && data.message) {
+                message = data.message;
+            } else {
+                message = ERROR_MESSAGES[status] || ERROR_MESSAGES.GENERIC_ERROR;
+            }
+
+            if (status === 401) {
+                // handle 401 here e.g. redirect to login
+            }
+        } else {
+            // only set NETWORK_ERROR if there's no response at all
+            message = ERROR_MESSAGES.NETWORK_ERROR;
+        }
+
+        toast.error(message);
+        return Promise.reject(new Error(message));
+    }
 );
 
 
 
-export default apiClient;
\ No newline at end of file
+export default apiClient;
diff --git a/frontend/src/services/channelService.js b/frontend/src/services/channelService.js
new file mode 100644
index 0000000..1607039
--- /dev/null
+++ b/frontend/src/services/channelService.js
@@ -0,0 +1,15 @@
+import apiClient from "./api";
+
+const getChannels = (params) => apiClient.get('/api/channels', {params})
+const createChannel = (params) => apiClient.post('/api/channels', params)
+const getChannel = (channelId) => apiClient.get(`/api/channels/${channelId}`)
+const deleteChannel = (channelId) => apiClient.delete(`/api/channels/${channelId}`)
+
+export default {
+
+  getChannels,
+  createChannel,
+  getChannel,
+  deleteChannel
+
+};
diff --git a/frontend/src/services/commentService.js b/frontend/src/services/commentService.js
new file mode 100644
index 0000000..38ed2af
--- /dev/null
+++ b/frontend/src/services/commentService.js
@@ -0,0 +1,16 @@
+// commentService.js
+import apiClient from './api'
+
+const getComments = (sharedDayId, page = 1) =>
+    apiClient.get(`/api/shared-days/${sharedDayId}/comments?page=${page}`)
+
+const createComment = (sharedDayId, data) =>
+    apiClient.post(`/api/shared-days/${sharedDayId}/comments`, data)
+
+const updateComment = (sharedDayId, commentId, data) =>
+    apiClient.put(`/api/shared-days/${sharedDayId}/comments/${commentId}`, data)
+
+const deleteComment = (sharedDayId, commentId) =>
+    apiClient.delete(`/api/shared-days/${sharedDayId}/comments/${commentId}`)
+
+export default { getComments, createComment, updateComment, deleteComment }
\ No newline at end of file
diff --git a/frontend/src/services/invitationService.js b/frontend/src/services/invitationService.js
new file mode 100644
index 0000000..123d8d8
--- /dev/null
+++ b/frontend/src/services/invitationService.js
@@ -0,0 +1,29 @@
+import apiClient from "./api";
+const createInvitation = (params, channel) => apiClient.post(`/api/channels/${channel}/invitations`, params)
+const getUsers = (params) => apiClient.get('/api/users', {params})
+const getChanelInvitations = (channel) => apiClient.get(`/api/channels/${channel}/invitations`)
+const getMyInvitations = (params)=> apiClient.get('api/me/invitations', {params});
+const cancelInvitation = (channel,invitation) =>apiClient.put(`/api/channels/${channel}/invitations/${invitation}`, 
+    {
+        status : "cancelled"
+    }
+)
+const acceptInvitation = (channel,invitation) =>apiClient.put(`/api/channels/${channel}/invitations/${invitation}`, 
+    {
+        status : "accepted"
+    }
+)
+const declineInvitation = (channel,invitation) =>apiClient.put(`/api/channels/${channel}/invitations/${invitation}`, 
+    {
+        status : "declined"
+    }
+)
+export default{
+    createInvitation,
+    getChanelInvitations,
+    getUsers,
+    getMyInvitations,
+    cancelInvitation,
+    acceptInvitation,
+    declineInvitation
+}
\ No newline at end of file
diff --git a/frontend/src/services/reportService.js b/frontend/src/services/reportService.js
new file mode 100644
index 0000000..676e6be
--- /dev/null
+++ b/frontend/src/services/reportService.js
@@ -0,0 +1,3 @@
+import apiClient from "./api";
+const generateReport = (params) => apiClient.get('/api/reports', {params})
+export default { generateReport }
\ No newline at end of file
diff --git a/frontend/src/services/sharedDayService.js b/frontend/src/services/sharedDayService.js
new file mode 100644
index 0000000..46cd9e8
--- /dev/null
+++ b/frontend/src/services/sharedDayService.js
@@ -0,0 +1,18 @@
+import apiClient from "./api";
+
+
+const createSharedDay = (params) => apiClient.post('/api/shared-days', params)
+const getChannelSharedDays = (channel, params) => apiClient.get(`/api/channels/${channel}/shared-days`, {params})
+const getMySharedDays = ()=> apiClient.get('api/me/shared-days')
+const getSharedDay = (channel, sharedDay) => apiClient.get(`/api/channels/${channel}/shared-days/${sharedDay}`)
+const removeSharedDay = (channel, sharedDay) => apiClient.delete(`/api/channels/${channel}/shared-days/${sharedDay}`)
+
+
+export default {
+
+createSharedDay,
+getChannelSharedDays,
+getMySharedDays,
+getSharedDay,
+removeSharedDay
+};
diff --git a/frontend/src/services/timeEntryService.js b/frontend/src/services/timeEntryService.js
index 874e93f..10af3c7 100644
--- a/frontend/src/services/timeEntryService.js
+++ b/frontend/src/services/timeEntryService.js
@@ -2,11 +2,13 @@ import apiClient from "./api";
 
 const getTimeEntries = (params) => apiClient.get('/api/time-entries', {params})
 const createTimeEntry = (params) => apiClient.post('/api/time-entries', params)
+const updateTimeEntry = (params,id) => apiClient.put(`/api/time-entries/${id}`, params)
 const deleteTimeEntry = (id) => apiClient.delete(`/api/time-entries/${id}`)
 
 export default {
 
   getTimeEntries,
   createTimeEntry,
+  updateTimeEntry,
   deleteTimeEntry
 };
diff --git a/frontend/src/stores/auth.js b/frontend/src/stores/auth.js
index b6a46ba..4622a1d 100644
--- a/frontend/src/stores/auth.js
+++ b/frontend/src/stores/auth.js
@@ -25,6 +25,19 @@ export const useAuthStore = defineStore('authStore', {
   } catch (error) { 
       return {success: false}
   }
+},
+async googleLogin(googleToken) {
+    const { data } = await apiClient.post('/api/auth/google', {
+        token: googleToken  // now an access token instead of ID token
+    })
+
+    this.token = data.token
+    this.user = data.user
+    this.isAuthenticated = true
+    localStorage.setItem('token', data.token)
+
+    router.push({ name: 'Home' })
+    return { success: true }
 }
 ,
     
diff --git a/frontend/src/stores/commentStore.js b/frontend/src/stores/commentStore.js
new file mode 100644
index 0000000..50690a1
--- /dev/null
+++ b/frontend/src/stores/commentStore.js
@@ -0,0 +1,46 @@
+import { defineStore } from 'pinia'
+import commentService from '@/services/commentService'
+
+export const useCommentStore = defineStore('commentStore', {
+    state: () => ({
+        comments: [],
+        meta: { current_page: 1, last_page: 1 },
+        loading: false,
+        error: null,
+    }),
+
+    getters: {
+        hasMore: (state) => state.meta.current_page < state.meta.last_page
+    },
+
+    actions: {
+        async fetch(sharedDayId, page = 1) {
+            this.loading = true
+            this.error = null
+            try {
+                const response = await commentService.getComments(sharedDayId, { page })
+                this.comments = page === 1
+                    ? response.data.data
+                    : [...this.comments, ...response.data.data]
+                this.meta = response.data.meta
+            } catch (err) {
+                this.error = err.response?.data?.errors ?? err.message
+            } finally {
+                this.loading = false
+            }
+        },
+
+        loadMore(sharedDayId) {
+            if (!this.hasMore || this.loading) return
+            this.fetch(sharedDayId, this.meta.current_page + 1)
+        },
+
+        add(comment)    { this.comments.unshift(comment) },
+        remove(id)      { this.comments = this.comments.filter(c => c.id !== id) },
+        update(updated) {
+            const i = this.comments.findIndex(c => c.id === updated.id)
+            if (i !== -1) this.comments[i] = updated
+        },
+        reset()         { this.$reset() }
+    }
+})
\ No newline at end of file
diff --git a/frontend/src/views/About.vue b/frontend/src/views/About.vue
index ed7114c..8b286e1 100644
--- a/frontend/src/views/About.vue
+++ b/frontend/src/views/About.vue
@@ -1,3 +1,18 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+</script>
+
 <template>
-    About us 
+    <div class="max-w-2xl mx-auto px-6 py-16">
+
+        <h1 class="text-3xl font-black text-gray-900 mb-8">{{ t('about.title') }}</h1>
+
+        <div class="space-y-6 text-gray-600 leading-relaxed">
+            <p>{{ t('about.p1') }}</p>
+            <p>{{ t('about.p2') }}</p>
+            <p>{{ t('about.p3') }}</p>
+        </div>
+
+    </div>
 </template>
\ No newline at end of file
diff --git a/frontend/src/views/AddForm.vue b/frontend/src/views/AddForm.vue
index f63ef8c..d808447 100644
--- a/frontend/src/views/AddForm.vue
+++ b/frontend/src/views/AddForm.vue
@@ -1,9 +1,11 @@
 <script setup>
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import useApi from '@/composables/useApi';
 import timeEntryService from '@/services/timeEntryService';
 
+const { t } = useI18n()
 const router = useRouter()
 const formData = ref({
   label: '',
@@ -26,56 +28,78 @@ const submit = async () => {
 </script>
 
 <template>
-  <div class="min-h-screen flex items-center justify-center bg-[#f5f5f5] p-8">
-    <div class="bg-white rounded-lg shadow-md p-8 w-full max-w-[500px]">
+  <div class="min-h-[80vh] flex items-center justify-center p-6">
+    <div class="bg-white rounded-[3rem] shadow-[0_20px_50px_rgba(0,0,0,0.04)] p-10 w-full max-w-[500px] border border-white">
       
-      <div class="mb-6">
-        <h2 class="m-0 text-[#333] text-2xl font-semibold">{{ $t('addForm.add_entry') }}</h2>
+      <div class="mb-10 text-center">
+        <h2 class="text-3xl font-black text-[#333] tracking-tight">{{ t('addForm.add_entry') }}</h2>
+        <p class="text-[#A0A0A0] text-sm mt-2 font-medium">Log your activity for today</p>
       </div>
 
-      <form @submit.prevent="submit" class="max-w-[500px]">
-        <div class="mb-5">
-          <label class="block mb-1.5 text-[#555] text-[0.9rem] font-medium">{{ $t("addForm.label") }}</label>
+      <form @submit.prevent="submit" class="space-y-6">
+        <div>
+          <label class="block mb-2 text-xs font-bold text-[#A0A0A0] uppercase tracking-widest px-1">
+            {{ t("addForm.label") }}
+          </label>
           <input 
             type="text" 
             v-model="formData.label" 
             required
-            class="w-full px-2.5 py-2 border border-[#ddd] rounded text-[0.95rem] transition-colors duration-200 box-border focus:outline-none focus:border-[#007bff]"
+            placeholder="What are you working on?"
+            class="w-full px-6 py-4 bg-[#F9F7F2] border-2 border-transparent rounded-[1.5rem] text-[1rem] transition-all focus:outline-none focus:border-[#D4E2D4] focus:bg-white"
           >
-          <span v-if="error?.label" class="block mt-1 text-[#cc3333] text-[0.85rem]">{{ error.label[0] }}</span>
+          <span v-if="error?.label" class="block mt-2 px-4 text-[#AF4E4E] text-xs font-bold">{{ error.label[0] }}</span>
         </div>
 
-        <div class="mb-5">
-          <label class="block mb-1.5 text-[#555] text-[0.9rem] font-medium">{{ $t("addForm.start_time") }}</label>
-          <input 
-            type="time" 
-            v-model="formData.startTime" 
-            required
-            class="w-full px-2.5 py-2 border border-[#ddd] rounded text-[0.95rem] transition-colors duration-200 box-border focus:outline-none focus:border-[#007bff]"
-          >
-          <span v-if="error?.start_time" class="block mt-1 text-[#cc3333] text-[0.85rem]">{{ error.start_time[0] }}</span>
-        </div>
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label class="block mb-2 text-xs font-bold text-[#A0A0A0] uppercase tracking-widest px-1">
+              {{ t("addForm.start_time") }}
+            </label>
+            <input 
+              type="time" 
+              v-model="formData.startTime" 
+              required
+              class="w-full px-6 py-4 bg-[#F9F7F2] border-2 border-transparent rounded-[1.5rem] text-[1rem] transition-all focus:outline-none focus:border-[#D4E2D4] focus:bg-white"
+            >
+            <span v-if="error?.start_time" class="block mt-2 px-4 text-[#AF4E4E] text-xs font-bold">{{ error.start_time[0] }}</span>
+          </div>
 
-        <div class="mb-5">
-          <label class="block mb-1.5 text-[#555] text-[0.9rem] font-medium">{{ $t("addForm.end_time") }}</label>
-          <input 
-            type="time" 
-            v-model="formData.endTime" 
-            required
-            class="w-full px-2.5 py-2 border border-[#ddd] rounded text-[0.95rem] transition-colors duration-200 box-border focus:outline-none focus:border-[#007bff]"
-          >
-          <span v-if="error?.end_time" class="block mt-1 text-[#cc3333] text-[0.85rem]">{{ error.end_time[0] }}</span>
+          <div>
+            <label class="block mb-2 text-xs font-bold text-[#A0A0A0] uppercase tracking-widest px-1">
+              {{ t("addForm.end_time") }}
+            </label>
+            <input 
+              type="time" 
+              v-model="formData.endTime" 
+              required
+              class="w-full px-6 py-4 bg-[#F9F7F2] border-2 border-transparent rounded-[1.5rem] text-[1rem] transition-all focus:outline-none focus:border-[#D4E2D4] focus:bg-white"
+            >
+            <span v-if="error?.end_time" class="block mt-2 px-4 text-[#AF4E4E] text-xs font-bold">{{ error.end_time[0] }}</span>
+          </div>
         </div>
 
-        <div v-if="error?.message" class="mb-4 px-2.5 py-2 text-[#cc3333] text-[0.85rem] bg-[#ffeeee] border border-[#ffcccc] rounded">
+        <div v-if="error?.message" class="p-4 bg-[#FFF2F2] text-[#AF4E4E] text-xs font-bold rounded-2xl border border-[#FFDADA]">
           {{ error.message }}
         </div>
 
-        <button 
-          type="submit"
-          :disabled="loading"
-          class="w-full py-3 px-6 bg-[#28a745] text-white border-none rounded cursor-pointer text-base transition-colors duration-200 mt-2 hover:bg-[#218838] disabled:opacity-50 disabled:cursor-not-allowed"
-        >{{ loading ? $t("addForm.loading") : $t("addForm.add_entry") }}</button>
+        <div class="pt-4 flex flex-col gap-3">
+          <button 
+            type="submit"
+            :disabled="loading"
+            class="w-full py-5 bg-[#5A7D5A] text-white rounded-[1.5rem] font-black text-lg shadow-xl shadow-[#5A7D5A]/20 transition-all hover:bg-[#4a6b4a] hover:-translate-y-1 active:scale-95 disabled:opacity-50 disabled:transform-none"
+          >
+            {{ loading ? t("addForm.loading") : t("addForm.add_entry") }}
+          </button>
+          
+          <button 
+            type="button"
+            @click="router.back()"
+            class="w-full py-4 text-[#8E9AAF] font-bold text-sm hover:text-[#333] transition-colors"
+          >
+            {{ t("update.cancel") || 'Go Back' }}
+          </button>
+        </div>
       </form>
     </div>
   </div>
diff --git a/frontend/src/views/ChannelDashboard.vue b/frontend/src/views/ChannelDashboard.vue
new file mode 100644
index 0000000..ee82a21
--- /dev/null
+++ b/frontend/src/views/ChannelDashboard.vue
@@ -0,0 +1,97 @@
+<script setup>
+import { useRoute, useRouter } from 'vue-router'
+import { ref, watch, inject, provide, computed } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+import { useI18n } from 'vue-i18n'
+import channelService from '@/services/channelService'
+import useApi from '@/composables/useApi'
+import ChannelOverview from '@/components/channel/ChannelOverview.vue'
+import ChannelMembers from '@/components/channel/members/ChannelMembers.vue'
+import ChannelSettings from '@/components/channel/ChannelSettings.vue'
+import ChannelSharedDays from '@/components/channel/shared-days/ChannelSharedDays.vue'
+const auth = useAuthStore();
+const route = useRoute()
+const { t } = useI18n()
+const router = useRouter()
+const activeTab = ref('overview')
+
+const { data: channel, error, request } = useApi(
+  () => channelService.getChannel(route.params.id), true
+)
+watch(error, (val) => {
+    if (val?.status === 403) {
+        router.push({ name: 'Channels' })
+    }
+})
+watch(() => route.params.id, () => {
+  request()
+})
+const isOwner = computed(() => channel.value?.user_id === auth.user?.id)
+provide('isOwner', isOwner)
+provide('channel', channel)
+
+const visibleTabs = computed(() => {
+    const tabs = ['overview', 'members', 'sharedDays']
+    if (isOwner.value) tabs.push('settings')
+    return tabs
+})
+</script>
+
+<template>
+  <div class="max-w-4xl mx-auto px-6 py-12">
+
+    <div class="flex flex-wrap justify-center p-2 bg-[#F9F7F2] rounded-[2.2rem] mb-12 w-full md:w-fit mx-auto border-2 border-[#F2E9E4] shadow-sm">
+      <button
+        v-for="tab in visibleTabs"
+        :key="tab"
+        @click="activeTab = tab"
+        :class="activeTab === tab
+          ? 'bg-[#5A7D5A] text-white shadow-lg shadow-[#5A7D5A]/15'
+          : 'text-[#8E9AAF] hover:text-[#4A4A4A] hover:bg-[#F1F5F1]'"
+        class="px-8 py-3.5 rounded-[1.8rem] text-[15px] font-black tracking-tight transition-all duration-300 active:scale-95 whitespace-nowrap">
+        {{ t(`channel.${tab === 'sharedDays' ? 'shared_days' : tab}`) }}
+      </button>
+    </div>
+
+    <div v-if="error"
+      class="p-6 bg-[#FFF2F0] text-[#E07A5F] rounded-[2.5rem] border-2 border-[#FFE5E0] flex items-center gap-4 shadow-sm">
+      <div class="h-12 w-12 bg-white rounded-2xl flex items-center justify-center text-2xl shadow-sm shrink-0">⚠️</div>
+      <div class="flex flex-col">
+        <span class="text-[12px] uppercase font-black tracking-widest opacity-60">System Alert</span>
+        <span class="font-bold text-[16px] leading-tight">{{ t('channel.error') }}: {{ error }}</span>
+      </div>
+    </div>
+
+    <template v-else-if="channel">
+      <div class="transition-all duration-500 ease-out">
+        <ChannelOverview
+          v-if="activeTab === 'overview'"
+          class="border-2 border-[#F9F7F2] bg-white rounded-[3rem] p-2 hover:border-[#5A7D5A]/10 transition-all shadow-sm" />
+
+        <ChannelMembers
+          v-else-if="activeTab === 'members'" 
+          class="animate-in fade-in slide-in-from-bottom-2 duration-400" />
+
+        <div v-else-if="activeTab === 'sharedDays'"
+             class="animate-in fade-in slide-in-from-bottom-2 duration-400">
+          <ChannelSharedDays />
+        </div>
+
+        <ChannelSettings
+          v-else-if="activeTab === 'settings'"
+          class="animate-in fade-in slide-in-from-bottom-2 duration-400" />
+      </div>
+    </template>
+
+    <div v-else class="flex flex-col items-center justify-center py-32 bg-[#FDFCFB] rounded-[3rem] border-2 border-[#F2E9E4]">
+      <div class="relative flex items-center justify-center mb-8">
+        <div class="absolute animate-ping h-16 w-16 rounded-full bg-[#D4A373]/10"></div>
+        <div class="h-12 w-12 border-[5px] border-[#F9F7F2] border-t-[#D4A373] rounded-full animate-spin"></div>
+      </div>
+      <p class="text-[14px] font-black text-[#A0A0A0] tracking-widest animate-pulse uppercase">
+        {{ t('channel.loading') }}
+      </p>
+    </div>
+
+  </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/views/ChannelList.vue b/frontend/src/views/ChannelList.vue
new file mode 100644
index 0000000..5f74c27
--- /dev/null
+++ b/frontend/src/views/ChannelList.vue
@@ -0,0 +1,206 @@
+<script setup>
+import { ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import ChannelCard from '@/components/channel/ChannelCard.vue';
+import channelService from '@/services/channelService';
+import { usePagination } from '@/composables/usePagination';
+import AppPagination from '@/components/AppPagination.vue';
+
+const router = useRouter();
+const { t } = useI18n();
+
+/**
+ * Reactive filters object (better architecture)
+ */
+const filters = ref({
+  type: 'owned'
+});
+
+const activeTab = ref('owned');
+
+const {
+  items: channels,
+  paginatorData,
+  loading,
+  error,
+  goToPage,
+  refresh
+} = usePagination(
+  (page) =>
+    channelService.getChannels({
+      page,
+      ...filters.value
+    }),
+  { immediate: true }
+);
+
+/**
+ * Smooth reactive refresh
+ */
+watch(
+  filters,
+  () => {
+    refresh();
+  },
+  { deep: true }
+);
+
+/**
+ * Handle tab switching
+ */
+const changeTab = (type) => {
+  activeTab.value = type;
+  filters.value.type = type;
+};
+</script>
+
+<template>
+  <div class="max-w-7xl mx-auto px-6 py-12 min-h-screen">
+
+    <!-- Header -->
+    <div class="flex flex-col md:flex-row justify-between items-end gap-6 mb-12">
+      <div>
+        <h1 class="text-4xl font-black text-[#2D3436] tracking-tight">
+          {{ t('channel_list.title') }}
+        </h1>
+        <p class="text-[#7F8C8D] mt-2 font-medium">
+          Manage your communication hubs and workspaces.
+        </p>
+      </div>
+
+      <router-link
+        :to="{ name: 'AddChannel' }"
+        class="group flex items-center bg-[#5A7D5A] hover:bg-[#4a6b4a] text-white px-8 py-4 rounded-[1.5rem] transition-all shadow-xl shadow-[#5A7D5A]/20 active:scale-95 font-bold"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-5 w-5 mr-2 transition-transform group-hover:rotate-90"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="3"
+            d="M12 4v16m8-8H4"
+          />
+        </svg>
+        {{ t('channel_list.new_channel') }}
+      </router-link>
+    </div>
+
+    <!-- Tabs -->
+    <div class="inline-flex p-2 bg-[#E2E8F0] rounded-[2rem] mb-10 shadow-inner">
+      <button
+        @click="changeTab('owned')"
+        :class="
+          activeTab === 'owned'
+            ? 'bg-white text-[#2D3436] shadow-md'
+            : 'text-[#64748B] hover:text-[#2D3436]'
+        "
+        class="px-8 py-3 rounded-[1.5rem] text-sm font-black transition-all duration-300"
+      >
+        {{ t('channel_list.my_channels') }}
+      </button>
+
+      <button
+        @click="changeTab('joined')"
+        :class="
+          activeTab === 'joined'
+            ? 'bg-white text-[#2D3436] shadow-md'
+            : 'text-[#64748B] hover:text-[#2D3436]'
+        "
+        class="px-8 py-3 rounded-[1.5rem] text-sm font-black transition-all duration-300"
+      >
+        {{ t('channel_list.member_of') }}
+      </button>
+    </div>
+
+    <!-- Error -->
+    <div
+      v-if="error"
+      class="p-6 bg-[#FFF2F2] text-[#AF4E4E] rounded-[2.5rem] border-2 border-[#FFDADA] flex items-center gap-4"
+    >
+      <span class="text-2xl">⚠️</span>
+      <span class="font-bold">
+        {{ t('channel_list.error') }}: {{ error }}
+      </span>
+    </div>
+
+    <!-- Loading -->
+    <div
+      v-else-if="loading && !channels.length"
+      class="grid grid-cols-1 md:grid-cols-3 gap-8"
+    >
+      <div
+        v-for="i in 3"
+        :key="i"
+        class="h-64 bg-white/50 animate-pulse rounded-[3rem] border-2 border-dashed border-gray-200"
+      ></div>
+    </div>
+
+    <!-- Content -->
+    <div v-else>
+
+      <!-- Channels -->
+      <div
+        v-if="channels.length > 0"
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+      >
+        <div
+          v-for="channel in channels"
+          :key="channel.id"
+          @click="router.push(`/channels/${channel.id}`)"
+          class="group cursor-pointer"
+        >
+          <ChannelCard
+            :channel="channel"
+            :class="[
+              'h-full border-2 bg-white rounded-[2.5rem] transition-all duration-500',
+              activeTab === 'owned'
+                ? 'border-[#D1D5DB] group-hover:border-[#5A7D5A] group-hover:shadow-2xl group-hover:shadow-[#5A7D5A]/10'
+                : 'border-[#D1D5DB] group-hover:border-[#8E9AAF] group-hover:shadow-2xl group-hover:shadow-[#8E9AAF]/10'
+            ]"
+          />
+        </div>
+      </div>
+
+      <!-- Empty State -->
+      <div
+        v-else
+        class="flex flex-col items-center justify-center py-24 bg-white/40 rounded-[3.5rem] border-4 border-dashed border-[#D1D5DB]"
+      >
+        <div class="bg-white p-6 rounded-full shadow-lg mb-6 text-4xl">
+          {{ activeTab === 'owned' ? '🪴' : '🤝' }}
+        </div>
+
+        <p class="text-[#64748B] font-bold text-lg mb-4">
+          {{
+            activeTab === 'owned'
+              ? t('channel_list.no_owned')
+              : t('channel_list.no_joined')
+          }}
+        </p>
+
+        <router-link
+          v-if="activeTab === 'owned'"
+          :to="{ name: 'AddChannel' }"
+          class="text-[#5A7D5A] font-black hover:text-[#4a6b4a] underline decoration-4 underline-offset-8 transition-all"
+        >
+          {{ t('channel_list.create_first') }}
+        </router-link>
+      </div>
+
+      <!-- Pagination -->
+      <AppPagination
+        v-if="paginatorData.meta"
+        :data="paginatorData"
+        @page-change="goToPage"
+        class="mt-10"
+      />
+
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/views/CreateChannelForm.vue b/frontend/src/views/CreateChannelForm.vue
new file mode 100644
index 0000000..a03fb54
--- /dev/null
+++ b/frontend/src/views/CreateChannelForm.vue
@@ -0,0 +1,92 @@
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import useApi from '@/composables/useApi'
+import channelService from '@/services/channelService'
+
+const router = useRouter()
+const { t } = useI18n()
+
+const formData = ref({
+    name: '',
+    description: '',
+})
+
+const { loading, error, request } = useApi(() =>
+    channelService.createChannel({
+        name: formData.value.name,
+        description: formData.value.description,
+    })
+)
+
+const submit = async () => {
+    await request()
+    if (!error.value) router.push({ name: 'Channels' })
+}
+</script>
+
+<template>
+    <div class="min-h-[80vh] flex items-center justify-center p-6">
+        <div class="bg-white rounded-[3.5rem] shadow-[0_30px_60px_rgba(0,0,0,0.04)] p-12 w-full max-w-[550px] border border-white">
+
+            <div class="mb-10 text-center">
+                <h2 class="text-3xl font-black text-[#2D3436] tracking-tight">{{ t('create_channel.title') }}</h2>
+                <p class="text-[#A0A0A0] text-sm mt-2 font-medium">Set up a new space for your projects</p>
+            </div>
+
+            <form @submit.prevent="submit" class="space-y-8">
+                <div>
+                    <label class="block mb-3 text-xs font-black text-[#A0A0A0] uppercase tracking-[0.2em] px-2">
+                        {{ t('create_channel.name') }}
+                    </label>
+                    <input
+                        type="text"
+                        v-model="formData.name"
+                        required
+                        placeholder="e.g. Design Team"
+                        class="w-full px-8 py-5 bg-[#F9F7F2] border-2 border-transparent rounded-[2rem] text-lg transition-all focus:outline-none focus:border-[#5A7D5A] focus:bg-white focus:shadow-inner" />
+                    <span v-if="error?.name" class="block mt-2 px-4 text-[#AF4E4E] text-xs font-bold">
+                        {{ error.name[0] }}
+                    </span>
+                </div>
+
+                <div>
+                    <label class="block mb-3 text-xs font-black text-[#A0A0A0] uppercase tracking-[0.2em] px-2">
+                        {{ t('create_channel.description') }}
+                    </label>
+                    <textarea
+                        v-model="formData.description"
+                        required
+                        placeholder="What's this channel's purpose?"
+                        rows="4"
+                        class="w-full px-8 py-5 bg-[#F9F7F2] border-2 border-transparent rounded-[2rem] text-lg transition-all focus:outline-none focus:border-[#5A7D5A] focus:bg-white focus:shadow-inner resize-none"></textarea>
+                    <span v-if="error?.description" class="block mt-2 px-4 text-[#AF4E4E] text-xs font-bold">
+                        {{ error.description[0] }}
+                    </span>
+                </div>
+
+                <div v-if="error?.message"
+                    class="p-5 bg-[#FFF2F2] text-[#AF4E4E] text-sm font-bold rounded-[2rem] border-2 border-[#FFDADA]">
+                    {{ error.message }}
+                </div>
+
+                <div class="pt-4 flex flex-col gap-4">
+                    <button
+                        type="submit"
+                        :disabled="loading"
+                        class="w-full py-5 bg-[#5A7D5A] text-white rounded-[2rem] font-black text-xl shadow-xl shadow-[#5A7D5A]/20 transition-all hover:bg-[#4a6b4a] hover:-translate-y-1 active:scale-95 disabled:opacity-50">
+                        {{ loading ? t('create_channel.loading') : t('create_channel.submit') }}
+                    </button>
+                    
+                    <button 
+                        type="button"
+                        @click="router.back()"
+                        class="w-full py-4 text-[#8E9AAF] font-bold text-sm hover:text-[#2D3436] transition-colors">
+                        {{ t('update.cancel') }}
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/views/History.vue b/frontend/src/views/History.vue
deleted file mode 100644
index d1756d5..0000000
--- a/frontend/src/views/History.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup>
-const props = defineProps(['dates'])
-const emit = defineEmits(['clickDate'])
-
-function dateClick(date) {
-  emit('clickDate', date)
-}
-</script>
-
-<template>
-  <div class="flex flex-col gap-2">
-    <div
-      v-for="date in dates"
-      :key="date"
-      @click="dateClick(date)"
-      class="p-3 bg-[#f8f9fa] border border-[#e0e0e0] rounded cursor-pointer transition-all duration-200 text-[0.9rem] text-[#333] hover:bg-[#007bff] hover:text-white hover:border-[#007bff] hover:-translate-x-0.5 active:-translate-x-1"
-    >
-      {{ date }}
-    </div>
-  </div>
-</template>
\ No newline at end of file
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
deleted file mode 100644
index 475c7c7..0000000
--- a/frontend/src/views/Home.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<script setup>
-import useApi from '@/composables/useApi'
-import { ref, computed, watchEffect } from 'vue'
-import { useI18n } from 'vue-i18n'
-import History from './History.vue'
-import ListView from '@/components/ListView.vue'
-import timeEntryService from '@/services/timeEntryService'
-
-const { t } = useI18n()
-const filters = ref({
-  search: '',
-  date: null,
-  sort: ''
-})
-
-// re-fetches automatically when filters change
-const { data: entries, error , request} = useApi(()=>timeEntryService.getTimeEntries(filters.value), true)
-
-watchEffect(() => {
-    request()
-  })
-// static — params never change, fires once
-const { data: dates, error: datesError } = useApi(()=>timeEntryService.getTimeEntries({history: true}),true)
-const title = ref(`${t('home.today_entries')}`)
-const showHistory = ref(false)
-const historyButtonText = computed(() =>
-  showHistory.value ? `← ${t('home.hide')}` : `${t('home.history')} →`
-)
-
-
-const toggleHistory = () => {
-  showHistory.value = !showHistory.value
-}
-
-const goToDate = (date) => {
-  filters.value.date = date
-  title.value = `${t('home.entries_of')} ${date}`
-}
-
-const todayEntries = () => {
-  filters.value.date = null
-  filters.value.search = ''
-  filters.value.sort = ''
-  title.value = t('home.today_entries')
-}
-</script>
-
-<template>
-  <div class="flex min-h-screen relative">
-
-    <div class="flex-1 p-8" :class="{ 'mr-[280px]': showHistory }">
-      
-      <div class="flex gap-2 mb-6 flex-wrap items-center">
-
-        <input 
-          type="text" 
-          v-model="filters.search"
-          placeholder="Search..."
-          class="px-3 py-2 border border-[#ddd] rounded text-[0.9rem] focus:outline-none focus:border-[#007bff] transition-colors duration-200"
-        >
-
-
-        <select 
-          v-model="filters.sort"
-          class="px-3 py-2 border border-[#ddd] rounded text-[0.9rem] bg-white cursor-pointer focus:outline-none focus:border-[#007bff] transition-colors duration-200"
-        >
-          <option value="">Default</option>
-          <option value="desc">Oldest</option>
-          <option value="asc">Latest</option>
-        </select>
-
-        <button 
-          @click="todayEntries"
-          class="px-5 py-2 border border-[#ddd] bg-white rounded cursor-pointer text-[0.9rem] transition-all duration-200 hover:bg-[#f5f5f5] hover:border-[#999]"
-        >{{ $t('home.today_entries') }}</button>
-
-        <button 
-          @click="toggleHistory"
-          class="ml-auto px-5 py-2 border border-[#ddd] bg-white rounded cursor-pointer text-[0.9rem] transition-all duration-200 hover:bg-[#f5f5f5] hover:border-[#999]"
-        >{{ historyButtonText }}</button>
-      </div>
-
-      <div v-if="error" class="p-4 bg-[#ffeeee] text-[#cc3333] rounded border border-[#ffcccc]">
-        {{ $t('home.error') }}: {{ error }}
-      </div>
-      <div v-else-if="entries">
-        <h1 class="mt-0 mb-6 text-[#333] text-[1.8rem] font-semibold">{{ title }}</h1>
-        <div class="flex gap-8 items-start">
-          <ListView :entries="entries" />
-        </div>
-      </div>
-      <div v-else class="text-center py-8 text-[#666]">{{ $t('home.loading') }}</div>
-    </div>
-
-    <div 
-      class="fixed right-0 top-[60px] w-[280px] h-[calc(100vh-60px)] bg-white border-l border-[#ddd] p-6 overflow-y-auto shadow-[-2px_0_8px_rgba(0,0,0,0.1)] transition-transform duration-300"
-      :class="showHistory ? 'translate-x-0' : 'translate-x-full'"
-    >
-      <h3 class="mt-0 mb-4 text-[#333] text-[1.2rem]">{{ $t('home.history') }}</h3>
-      <div v-if="datesError" class="p-4 bg-[#ffeeee] text-[#cc3333] rounded border border-[#ffcccc]">
-        {{ $t('home.error_loading_dates') }}: {{ datesError }}
-      </div>
-      <div v-else-if="!dates || dates.length === 0" class="p-4 text-[#999] text-center">
-        {{ $t('home.no_dates') }}
-      </div>
-      <History v-else :dates="dates" @click-date="goToDate" />
-    </div>
-  </div>
-</template>
\ No newline at end of file
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
new file mode 100644
index 0000000..87efcff
--- /dev/null
+++ b/frontend/src/views/HomeView.vue
@@ -0,0 +1,182 @@
+<script setup>
+import { ref, computed, watch, provide } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { useToast } from 'vue-toastification'
+import { usePagination } from '@/composables/usePagination'
+import timeEntryService from '@/services/timeEntryService'
+import HistorySidebar from '@/components/history/HistorySidebar.vue'
+import ShareDayModal from '@/components/time-entries/ShareDayModal.vue'
+import TimeEntryList from '@/components/time-entries/TimeEntryList.vue'
+import AppPagination from '@/components/AppPagination.vue'
+
+const { t } = useI18n()
+const router = useRouter()
+const toast = useToast()
+
+const filters = ref({ search: '', date: null, sort: '' })
+
+const { items: entries, paginatorData, loading, error, goToPage, refresh } = usePagination(
+    (page) => timeEntryService.getTimeEntries({ page, ...filters.value }),
+    { immediate: true }
+)
+
+watch(filters, () => refresh(), { deep: true })
+
+provide('refreshEntries', refresh)
+
+const title = ref(t('home.today_entries'))
+const showHistory = ref(false)
+const showShareModal = ref(false)
+const selectedShareDate = ref(null)
+
+const historyButtonText = computed(() =>
+    showHistory.value ? `← ${t('home.hide')}` : `${t('home.history')} →`
+)
+
+const totalMinutes = computed(() => {
+    if (!entries.value?.length) return 0
+    return entries.value.reduce((acc, entry) =>
+        acc + (entry.time_taken.hours * 60 + entry.time_taken.minutes), 0
+    )
+})
+
+const goToDate = (date) => {
+    filters.value.date = date
+    title.value = `${t('home.entries_of')} ${date}`
+}
+
+const todayEntries = () => {
+    filters.value = { search: '', date: null, sort: '' }
+    title.value = t('home.today_entries')
+}
+
+const toggleHistory = () => showHistory.value = !showHistory.value
+
+const handleShareDate = (date) => {
+    selectedShareDate.value = date
+    showShareModal.value = true
+}
+
+const handleShared = () => {
+    showShareModal.value = false
+    toast.success('Day shared successfully!')
+    router.push({ name: 'MySharedDays' })
+}
+</script>
+
+<template>
+    <div class="flex min-h-screen bg-[#F9F7F2] relative font-sans text-[#4A4A4A]">
+
+        <div class="flex-1 p-10 transition-all duration-500" :class="{ 'mr-[320px]': showHistory }">
+
+            <div class="flex gap-4 mb-10 flex-wrap items-center">
+                <input
+                    v-model="filters.search"
+                    type="text"
+                    :placeholder="t('home.search_placeholder')"
+                    class="px-5 py-3 bg-white border-none rounded-2xl shadow-sm text-[0.95rem] focus:ring-2 focus:ring-[#D4E2D4] outline-none w-64 transition-all" />
+
+                <select
+                    v-model="filters.sort"
+                    class="px-5 py-3 bg-white border-none rounded-2xl shadow-sm text-[0.95rem] cursor-pointer focus:ring-2 focus:ring-[#D4E2D4] outline-none transition-all">
+                    <option value="">{{ t('home.sort_default') }}</option>
+                    <option value="desc">{{ t('home.sort_oldest') }}</option>
+                    <option value="asc">{{ t('home.sort_latest') }}</option>
+                </select>
+
+                <button
+                    @click="todayEntries"
+                    class="px-6 py-3 bg-[#E8F0E8] text-[#5A7D5A] font-semibold rounded-2xl hover:bg-[#D4E2D4] transition-all duration-300 shadow-sm">
+                    {{ t('home.today_entries') }}
+                </button>
+
+                <button
+                    @click="toggleHistory"
+                    class="ml-auto px-6 py-3 bg-white text-[#8A8A8A] font-medium rounded-2xl shadow-sm hover:shadow-md transition-all duration-300">
+                    {{ historyButtonText }}
+                </button>
+            </div>
+
+            <!-- Error -->
+            <div v-if="error" class="p-6 bg-[#FFF2F2] text-[#AF4E4E] rounded-[2rem] border border-[#FFDADA]">
+                {{ t('home.error') }}: {{ error }}
+            </div>
+
+            <template v-else>
+
+                <!-- Loading (only on first load, not on page change) -->
+                <div v-if="loading && !entries.length" class="flex flex-col items-center justify-center py-20 text-[#BCBCBC]">
+                    <div class="w-12 h-12 border-4 border-[#E8F0E8] border-t-[#5A7D5A] rounded-full animate-spin mb-4"></div>
+                    <p class="font-medium">{{ t('home.loading') }}</p>
+                </div>
+
+                <div v-else class="space-y-8">
+
+                    <h2 class="text-3xl font-bold text-[#333] tracking-tight">{{ title }}</h2>
+
+                    <!-- Stats -->
+                    <div v-if="entries.length > 0" class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                        <div class="p-6 bg-white rounded-[2rem] shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-white/50 hover:translate-y-[-4px] transition-transform duration-300">
+                            <p class="text-[0.7rem] font-bold text-[#A0A0A0] uppercase tracking-[0.1em] mb-2">
+                                {{ t('home.total_time') }}
+                            </p>
+                            <p class="text-3xl font-bold text-[#333]">
+                                {{ Math.floor(totalMinutes / 60) }}<span class="text-lg font-medium text-[#A0A0A0]">h</span>
+                                {{ totalMinutes % 60 }}<span class="text-lg font-medium text-[#A0A0A0]">m</span>
+                            </p>
+                        </div>
+
+                        <div class="p-6 bg-[#F0F4F8] rounded-[2rem] shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-white/50 hover:translate-y-[-4px] transition-transform duration-300">
+                            <p class="text-[0.7rem] font-bold text-[#8E9AAF] uppercase tracking-[0.1em] mb-2">
+                                {{ t('home.total_entries') }}
+                            </p>
+                            <p class="text-3xl font-bold text-[#333]">{{ entries.length }}</p>
+                        </div>
+
+                        <div class="p-6 bg-[#FEF6E4] rounded-[2rem] shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-white/50 hover:translate-y-[-4px] transition-transform duration-300">
+                            <p class="text-[0.7rem] font-bold text-[#D4A373] uppercase tracking-[0.1em] mb-2">
+                                {{ t('home.avg_per_entry') }}
+                            </p>
+                            <p class="text-3xl font-bold text-[#333]">
+                                {{ Math.floor(totalMinutes / entries.length / 60) }}<span class="text-lg font-medium text-[#A0A0A0]">h</span>
+                                {{ Math.floor(totalMinutes / entries.length) % 60 }}<span class="text-lg font-medium text-[#A0A0A0]">m</span>
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- Empty -->
+                    <div v-else class="p-4 text-[#999] text-center">
+                        {{ t('home.no_entries') }}
+                    </div>
+
+                    <!-- List -->
+                    <div class="bg-white/40 p-2 rounded-[2.5rem]">
+                        <TimeEntryList :entries="entries" />
+                    </div>
+
+                    <!-- Pagination -->
+                    <AppPagination 
+                    v-if="paginatorData.meta" 
+                    :data="paginatorData" 
+                    @page-change="goToPage" />
+
+                </div>
+
+            </template>
+
+        </div>
+
+        <HistorySidebar
+            :show="showHistory"
+            @select-date="goToDate"
+            @share-date="handleShareDate" />
+
+        <ShareDayModal
+            v-if="showShareModal"
+            :date="selectedShareDate"
+            @close="showShareModal = false"
+            @shared="handleShared" />
+
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/views/InvitationsView.vue b/frontend/src/views/InvitationsView.vue
new file mode 100644
index 0000000..01bf0b9
--- /dev/null
+++ b/frontend/src/views/InvitationsView.vue
@@ -0,0 +1,50 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+import invitationService from '@/services/invitationService'
+import { usePagination } from '@/composables/usePagination'
+import AppPagination from '@/components/AppPagination.vue'
+import InvitationCard from '@/components/invitations/InvitationCard.vue'
+
+const { t } = useI18n()
+const { items: invitations, paginatorData, loading, error, goToPage, refresh } = usePagination(
+    (page) => invitationService.getMyInvitations({page}),
+    { immediate: true }
+)
+
+</script>
+
+<template>
+    <div class="max-w-2xl mx-auto px-6 py-8">
+
+        <h1 class="text-2xl font-bold text-gray-800 mb-6">{{ t('invitations_view.title') }}</h1>
+
+        <div v-if="error" class="p-4 bg-red-50 text-red-600 rounded-lg border border-red-200">
+            {{ t('invitations_view.error') }}
+        </div>
+
+        <div v-else-if="invitations">
+            <div v-if="invitations.length > 0" class="space-y-3">
+                <InvitationCard
+                    v-for="invitation in invitations"
+                    :key="invitation.id"
+                    :invitation="invitation"
+                    mode="received"
+                    @accepted="refresh"
+                    @declined="refresh" />
+            </div>
+
+            <AppPagination 
+                v-if="paginatorData?.meta" 
+                :data="paginatorData" 
+                @page-change="goToPage" />
+            <div v-else class="text-center py-16 text-gray-400">
+                {{ t('invitations_view.empty') }}
+            </div>
+        </div>
+
+        <div v-else class="text-center py-16 text-gray-400">
+            {{ t('invitations_view.loading') }}
+        </div>
+
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
index 2b41a45..f2674fb 100644
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -1,6 +1,7 @@
 <script setup>
-import {ref} from 'vue';
+import { ref } from 'vue';
 import { useAuthStore } from '@/stores/auth';
+import GoogleLogin from '@/components/GoogleLogin.vue';
 const loginForm = ref({
   email: '',
   password: ''
@@ -9,72 +10,104 @@ const loginForm = ref({
 const errors = ref(null)
 const authStore = useAuthStore();
 
-const handleSubmit = async ()=>{
-    errors.value = null
-    const result = await authStore.login({
+const handleSubmit = async () => {
+  errors.value = null
+  const result = await authStore.login({
     email: loginForm.value.email,
     password: loginForm.value.password
   })
 
-    if(!result.success && result.errors){
-        errors.value = result.errors
-    }
+  if (!result.success && result.errors) {
+    errors.value = result.errors
+  }
 }
 </script>
 
 <template>
-  <div class="min-h-screen flex items-center justify-center bg-[#f5f5f5] p-8">
-    <form 
-      @submit.prevent="handleSubmit"
-      class="max-w-[420px] w-full bg-white p-10 rounded-xl shadow-md"
-    >
-      <h2 class="mt-0 mb-8 text-[#333] text-[1.8rem] font-semibold text-center">
-        {{ $t("login.welcome_back") }}
-      </h2>
-
-      <div v-if="errors?.message" class="p-3 mb-6 bg-[#ffeeee] text-[#cc3333] rounded-md border border-[#ffcccc] text-[0.9rem]">
-        {{ errors.message }}
+  <div class="min-h-screen flex bg-[#FDFCFB]">
+    
+    <div class="hidden lg:flex lg:w-1/2 relative overflow-hidden bg-[#5A7D5A]">
+      <div class="absolute inset-0 bg-black/10 z-10"></div>
+      <img 
+        src="https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?auto=format&fit=crop&q=80&w=2067" 
+        alt="Cozy workspace" 
+        class="absolute inset-0 w-full h-full object-cover opacity-80"
+      />
+      <div class="relative z-20 m-auto text-center p-12">
+          <h1 class="text-white text-4xl font-black tracking-tighter mb-4 italic">Organize with intent.</h1>
+          <p class="text-white/80 font-medium text-lg">Your shared journey continues here.</p>
       </div>
+    </div>
 
-      <div class="mb-6">
-        <label class="block mb-2 text-[#888] text-[0.75rem] uppercase tracking-widest font-semibold">
-          {{ $t('login.email') }}
-        </label>
-        <input 
-          type="email" 
-          v-model="loginForm.email" 
-          required
-          class="block w-full py-3 px-2 border-0 border-b-2 border-[#e0e0e0] text-[#555] text-base transition-colors duration-300 bg-transparent focus:outline-none focus:border-b-[#007bff]"
-        >
-        <span v-if="errors?.errors?.email" class="block mt-2 text-[#dc3545] text-[0.85rem]">
-          {{ errors.errors.email[0] }}
-        </span>
-      </div>
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-8 sm:p-12">
+      <div class="max-w-[400px] w-full">
+        
+        <header class="mb-10">
+          <h2 class="text-3xl font-black text-[#4A4A4A] tracking-tight">
+            {{ $t("login.welcome_back") }}
+          </h2>
+          <p class="text-[15px] text-[#8E9AAF] font-medium mt-2 italic">
+            Ready to log your progress?
+          </p>
+        </header>
 
-      <div class="mb-6">
-        <label class="block mb-2 text-[#888] text-[0.75rem] uppercase tracking-widest font-semibold">
-          {{ $t('login.password') }}
-        </label>
-        <input 
-          type="password" 
-          v-model="loginForm.password" 
-          required
-          class="block w-full py-3 px-2 border-0 border-b-2 border-[#e0e0e0] text-[#555] text-base transition-colors duration-300 bg-transparent focus:outline-none focus:border-b-[#007bff]"
-        >
-      </div>
+        <form @submit.prevent="handleSubmit" class="space-y-6">
+          
+          <div v-if="errors?.message" 
+               class="p-4 bg-[#FFF2F0] text-[#E07A5F] rounded-2xl border border-[#FFE5E0] text-[13px] font-bold">
+            ⚠️ {{ errors.message }}
+          </div>
 
-      <button 
-        type="submit"
-        class="w-full py-3.5 mt-4 bg-[#007bff] text-white border-none rounded-md text-base font-medium cursor-pointer transition-colors duration-200 uppercase tracking-wide hover:bg-[#0056b3] active:translate-y-px"
-      >{{ $t('login.login') }}</button>
+          <div class="space-y-2">
+            <label class="block px-1 text-[11px] font-black text-[#A0A0A0] uppercase tracking-[0.2em]">
+              {{ $t('login.email') }}
+            </label>
+            <input 
+              type="email" 
+              v-model="loginForm.email" 
+              required
+              class="block w-full py-3.5 px-5 bg-[#F9F7F2] border-2 border-transparent rounded-[1.5rem] text-[14px] font-bold text-[#4A4A4A] transition-all focus:outline-none focus:border-[#5A7D5A] focus:bg-white focus:shadow-xl focus:shadow-[#5A7D5A]/5"
+              placeholder="name@example.com"
+            >
+            <span v-if="errors?.errors?.email" class="block px-2 mt-1 text-[#E07A5F] text-[11px] font-bold italic">
+              {{ errors.errors.email[0] }}
+            </span>
+          </div>
 
-      <p class="mt-6 text-center text-[#666] text-[0.9rem]">
-        {{ $t('login.dont_have_account') }}
-        <router-link 
-          :to="{name: 'Register'}"
-          class="text-[#007bff] no-underline font-medium hover:underline"
-        >{{$t('login.sign_up_here')}}</router-link>
-      </p>
-    </form>
+          <div class="space-y-2">
+            <label class="block px-1 text-[11px] font-black text-[#A0A0A0] uppercase tracking-[0.2em]">
+              {{ $t('login.password') }}
+            </label>
+            <input 
+              type="password" 
+              v-model="loginForm.password" 
+              required
+              class="block w-full py-3.5 px-5 bg-[#F9F7F2] border-2 border-transparent rounded-[1.5rem] text-[14px] font-bold text-[#4A4A4A] transition-all focus:outline-none focus:border-[#5A7D5A] focus:bg-white focus:shadow-xl focus:shadow-[#5A7D5A]/5"
+              placeholder="••••••••"
+            >
+          </div>
+
+          <div class="pt-4">
+            <button 
+              type="submit"
+              class="w-full py-4 bg-[#5A7D5A] hover:bg-[#4A6D4A] text-white rounded-[1.5rem] text-[12px] font-black uppercase tracking-[0.2em] shadow-xl shadow-[#5A7D5A]/20 transition-all active:scale-[0.98]"
+            >
+              {{ $t('login.login') }}
+            </button>
+          </div>
+
+          <p class="mt-8 text-center text-[13px] font-bold text-[#A0A0A0]">
+            {{ $t('login.dont_have_account') }}
+            <router-link 
+              :to="{name: 'Register'}"
+              class="text-[#D4A373] hover:text-[#5A7D5A] transition-colors ml-1 underline decoration-2 underline-offset-4"
+            >
+              {{$t('login.sign_up_here')}}
+            </router-link>
+          </p>
+        </form>
+        <GoogleLogin />
+      </div>
+    </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/frontend/src/views/MySharedDays.vue b/frontend/src/views/MySharedDays.vue
new file mode 100644
index 0000000..7890c4e
--- /dev/null
+++ b/frontend/src/views/MySharedDays.vue
@@ -0,0 +1,85 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import useApi from '@/composables/useApi'
+import sharedDayService from '@/services/sharedDayService'
+
+const { t } = useI18n()
+const router = useRouter()
+
+const { data, error, loading } = useApi(
+    () => sharedDayService.getMySharedDays(), true
+)
+</script>
+
+<template>
+    <div class="max-w-3xl mx-auto px-6 py-12">
+
+        <h1 class="text-[28px] font-black text-[#4A4A4A] mb-10 tracking-tighter">
+            {{ t('my_shared_days.title') }}
+        </h1>
+
+        <div v-if="error" class="flex items-center gap-4 p-5 bg-[#FFF2F0] text-[#E07A5F] rounded-3xl border border-[#FFE5E0] shadow-sm">
+            <span class="text-2xl">⚠️</span>
+            <p class="font-bold text-[14px] italic">{{ error }}</p>
+        </div>
+
+        <div v-else-if="data" class="space-y-6">
+            <div v-if="data.length > 0" class="space-y-4">
+                <div
+                    v-for="item in data"
+                    :key="item.date"
+                    class="bg-white border-2 border-[#F9F7F2] rounded-[2.5rem] p-6 hover:border-[#5A7D5A]/20 hover:shadow-xl hover:shadow-[#5A7D5A]/5 transition-all duration-300">
+
+                    <div class="flex items-center gap-5 mb-5">
+                        <div class="h-14 w-14 bg-[#F9F7F2] rounded-2xl flex flex-col items-center justify-center text-[#D4A373] shrink-0">
+                            <span class="text-[10px] font-black uppercase leading-none opacity-80">
+                                {{ new Date(item.date).toLocaleDateString('en-US', { month: 'short' }) }}
+                            </span>
+                            <span class="text-xl font-black leading-none mt-1">
+                                {{ new Date(item.date).getDate() }}
+                            </span>
+                        </div>
+
+                        <div>
+                            <p class="font-black text-[17px] text-[#4A4A4A] leading-tight">
+                                {{ new Date(item.date).toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }) }}
+                            </p>
+                            <p class="text-[12px] text-[#A0A0A0] font-bold italic mt-1.5 flex items-center gap-1.5">
+                                <span class="w-1.5 h-1.5 bg-[#D4A373] rounded-full"></span>
+                                {{ t('my_shared_days.shared_to', item.channels.length) }}
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="flex flex-wrap gap-2.5">
+                        <button
+                            v-for="channel in item.channels"
+                            :key="channel.id"
+                            @click="router.push(`/channels/${channel.id}`)"
+                            class="flex items-center gap-2 px-4 py-2 bg-[#F1F5F1] hover:bg-[#5A7D5A] hover:text-white text-[#5A7D5A] font-black text-[11px] uppercase tracking-widest rounded-xl transition-all active:scale-95 group">
+                            <span class="h-5 w-5 bg-white/50 group-hover:bg-white/20 rounded-lg flex items-center justify-center text-[10px] font-black">
+                                {{ channel.name.charAt(0) }}
+                            </span>
+                            {{ channel.name }}
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 opacity-40 group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 5l7 7-7 7" />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div v-else class="flex flex-col items-center justify-center py-24 bg-[#FDFCFB] border-2 border-dashed border-[#F2E9E4] rounded-[3rem]">
+                <div class="w-20 h-20 bg-white rounded-[2rem] shadow-xl shadow-[#D4A373]/5 flex items-center justify-center text-4xl mb-6">📜</div>
+                <h3 class="text-[#4A4A4A] text-lg font-black tracking-tight">{{ t('my_shared_days.empty_title') }}</h3>
+                <p class="text-[#A0A0A0] text-[14px] font-medium italic mt-2">{{ t('my_shared_days.empty_message') }}</p>
+            </div>
+        </div>
+
+        <div v-else class="space-y-6">
+            <div v-for="i in 3" :key="i" class="h-32 bg-[#F9F7F2] rounded-[2.5rem] animate-pulse"></div>
+        </div>
+
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/views/Register.vue b/frontend/src/views/Register.vue
index 939f009..d976f62 100644
--- a/frontend/src/views/Register.vue
+++ b/frontend/src/views/Register.vue
@@ -1,7 +1,7 @@
 <script setup>
-import {ref} from 'vue';
+import { ref } from 'vue';
 import { useAuthStore } from '@/stores/auth';
-import router from '@/router'
+import GoogleLogin from '@/components/GoogleLogin.vue';
 const registerForm = ref({
   email: '',
   name: '',
@@ -11,100 +11,135 @@ const registerForm = ref({
 const errors = ref(null)
 const authStore = useAuthStore();
 
-const handleSubmit = async ()=>{
-    errors.value = null
-    const result = await authStore.register({
-    name: registerForm.value.name,   
+const handleSubmit = async () => {
+  errors.value = null
+  const result = await authStore.register({
+    name: registerForm.value.name,
     email: registerForm.value.email,
     password: registerForm.value.password,
     password_confirmation: registerForm.value.password_confirmation
   })
 
-    if(!result.success && result.errors){
-        errors.value = result.errors
-    }
+  if (!result.success && result.errors) {
+    errors.value = result.errors
+  }
 }
 </script>
 
 <template>
-  <div class="min-h-screen flex items-center justify-center bg-[#f5f5f5] p-8">
-    <form 
-      @submit.prevent="handleSubmit"
-      class="max-w-[420px] w-full bg-white p-10 rounded-xl shadow-md"
-    >
-      <h2 class="mt-0 mb-8 text-[#333] text-[1.8rem] font-semibold text-center">
-        {{ $t("register.create_account") }}
-      </h2>
-
-      <div class="mb-6">
-        <label class="block mb-2 text-[#888] text-[0.75rem] uppercase tracking-widest font-semibold">
-          {{ $t("register.name") }}
-        </label>
-        <input 
-          type="text" 
-          v-model="registerForm.name" 
-          required
-          class="block w-full py-3 px-2 border-0 border-b-2 border-[#e0e0e0] text-[#555] text-base transition-colors duration-300 bg-transparent focus:outline-none focus:border-b-[#007bff]"
-        >
-        <span v-if="errors?.errors?.name" class="block mt-2 text-[#dc3545] text-[0.85rem]">
-          {{ errors.errors.name[0] }}
-        </span>
+  <div class="min-h-screen flex bg-[#FDFCFB]">
+    
+    <div class="hidden lg:flex lg:w-1/2 relative overflow-hidden bg-[#D4A373]">
+      <div class="absolute inset-0 bg-black/5 z-10"></div>
+      <img 
+        src="https://images.unsplash.com/photo-1490623970972-ae8bb3da443e?auto=format&fit=crop&q=80&w=2070" 
+        alt="Fresh start aesthetic" 
+        class="absolute inset-0 w-full h-full object-cover opacity-90"
+      />
+      <div class="relative z-20 m-auto text-center p-12">
+          <h1 class="text-white text-4xl font-black tracking-tighter mb-4 italic">Start something beautiful.</h1>
+          <p class="text-white/90 font-medium text-lg">Join a community focused on clarity and growth.</p>
       </div>
+    </div>
 
-      <div class="mb-6">
-        <label class="block mb-2 text-[#888] text-[0.75rem] uppercase tracking-widest font-semibold">
-          {{ $t("register.email") }}
-        </label>
-        <input 
-          type="email" 
-          v-model="registerForm.email" 
-          required
-          class="block w-full py-3 px-2 border-0 border-b-2 border-[#e0e0e0] text-[#555] text-base transition-colors duration-300 bg-transparent focus:outline-none focus:border-b-[#007bff]"
-        >
-        <span v-if="errors?.errors?.email" class="block mt-2 text-[#dc3545] text-[0.85rem]">
-          {{ errors.errors.email[0] }}
-        </span>
-      </div>
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-8 sm:p-12">
+      <div class="max-w-[440px] w-full">
+        
+        <header class="mb-8">
+          <h2 class="text-3xl font-black text-[#4A4A4A] tracking-tight">
+            {{ $t("register.create_account") }}
+          </h2>
+          <p class="text-[15px] text-[#8E9AAF] font-medium mt-2 italic">
+            Begin your journey with us today.
+          </p>
+        </header>
 
-      <div class="mb-6">
-        <label class="block mb-2 text-[#888] text-[0.75rem] uppercase tracking-widest font-semibold">
-          {{ $t("register.password") }}
-        </label>
-        <input 
-          type="password" 
-          v-model="registerForm.password" 
-          required
-          class="block w-full py-3 px-2 border-0 border-b-2 border-[#e0e0e0] text-[#555] text-base transition-colors duration-300 bg-transparent focus:outline-none focus:border-b-[#007bff]"
-        >
-        <span v-if="errors?.errors?.password" class="block mt-2 text-[#dc3545] text-[0.85rem]">
-          {{ errors.errors.password[0] }}
-        </span>
-      </div>
+        <form @submit.prevent="handleSubmit" class="space-y-5">
+          
+          <div class="space-y-1.5">
+            <label class="block px-1 text-[11px] font-black text-[#A0A0A0] uppercase tracking-[0.2em]">
+              {{ $t("register.name") }}
+            </label>
+            <input 
+              type="text" 
+              v-model="registerForm.name" 
+              required
+              class="block w-full py-3 px-5 bg-[#F9F7F2] border-2 border-transparent rounded-[1.5rem] text-[14px] font-bold text-[#4A4A4A] transition-all focus:outline-none focus:border-[#5A7D5A] focus:bg-white focus:shadow-xl focus:shadow-[#5A7D5A]/5"
+              placeholder="Your Name"
+            >
+            <span v-if="errors?.errors?.name" class="block px-2 text-[#E07A5F] text-[11px] font-bold italic">
+              {{ errors.errors.name[0] }}
+            </span>
+          </div>
 
-      <div class="mb-6">
-        <label class="block mb-2 text-[#888] text-[0.75rem] uppercase tracking-widest font-semibold">
-          {{ $t("register.confirm_password") }}
-        </label>
-        <input 
-          type="password" 
-          v-model="registerForm.password_confirmation" 
-          required
-          class="block w-full py-3 px-2 border-0 border-b-2 border-[#e0e0e0] text-[#555] text-base transition-colors duration-300 bg-transparent focus:outline-none focus:border-b-[#007bff]"
-        >
-      </div>
+          <div class="space-y-1.5">
+            <label class="block px-1 text-[11px] font-black text-[#A0A0A0] uppercase tracking-[0.2em]">
+              {{ $t('register.email') }}
+            </label>
+            <input 
+              type="email" 
+              v-model="registerForm.email" 
+              required
+              class="block w-full py-3 px-5 bg-[#F9F7F2] border-2 border-transparent rounded-[1.5rem] text-[14px] font-bold text-[#4A4A4A] transition-all focus:outline-none focus:border-[#5A7D5A] focus:bg-white focus:shadow-xl focus:shadow-[#5A7D5A]/5"
+              placeholder="email@example.com"
+            >
+            <span v-if="errors?.errors?.email" class="block px-2 text-[#E07A5F] text-[11px] font-bold italic">
+              {{ errors.errors.email[0] }}
+            </span>
+          </div>
 
-      <button 
-        type="submit"
-        class="w-full py-3.5 mt-4 bg-[#007bff] text-white border-none rounded-md text-base font-medium cursor-pointer transition-colors duration-200 uppercase tracking-wide hover:bg-[#0056b3] active:translate-y-px"
-      >{{ $t("register.sign_up") }}</button>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="space-y-1.5">
+              <label class="block px-1 text-[11px] font-black text-[#A0A0A0] uppercase tracking-[0.2em]">
+                {{ $t('register.password') }}
+              </label>
+              <input 
+                type="password" 
+                v-model="registerForm.password" 
+                required
+                class="block w-full py-3 px-5 bg-[#F9F7F2] border-2 border-transparent rounded-[1.5rem] text-[14px] font-bold text-[#4A4A4A] transition-all focus:outline-none focus:border-[#5A7D5A] focus:bg-white focus:shadow-xl focus:shadow-[#5A7D5A]/5"
+                placeholder="••••••••"
+              >
+            </div>
 
-      <p class="mt-6 text-center text-[#666] text-[0.9rem]">
-        {{ $t("register.you_already_have_account") }}
-        <router-link 
-          :to="{name: 'Login'}"
-          class="text-[#007bff] no-underline font-medium hover:underline"
-        >{{ $t("register.login") }}</router-link>
-      </p>
-    </form>
+            <div class="space-y-1.5">
+              <label class="block px-1 text-[11px] font-black text-[#A0A0A0] uppercase tracking-[0.2em]">
+                {{ $t("register.confirm_password") }}
+              </label>
+              <input 
+                type="password" 
+                v-model="registerForm.password_confirmation" 
+                required
+                class="block w-full py-3 px-5 bg-[#F9F7F2] border-2 border-transparent rounded-[1.5rem] text-[14px] font-bold text-[#4A4A4A] transition-all focus:outline-none focus:border-[#5A7D5A] focus:bg-white focus:shadow-xl focus:shadow-[#5A7D5A]/5"
+                placeholder="••••••••"
+              >
+            </div>
+          </div>
+          <span v-if="errors?.errors?.password" class="block px-2 text-[#E07A5F] text-[11px] font-bold italic">
+            {{ errors.errors.password[0] }}
+          </span>
+
+          <div class="pt-4">
+            <button 
+              type="submit"
+              class="w-full py-4 bg-[#5A7D5A] hover:bg-[#4A6D4A] text-white rounded-[1.5rem] text-[12px] font-black uppercase tracking-[0.2em] shadow-xl shadow-[#5A7D5A]/20 transition-all active:scale-[0.98]"
+            >
+              {{ $t("register.sign_up") }}
+            </button>
+          </div>
+
+          <p class="mt-6 text-center text-[13px] font-bold text-[#A0A0A0]">
+            {{ $t("register.you_already_have_account") }}
+            <router-link 
+              :to="{name: 'Login'}"
+              class="text-[#D4A373] hover:text-[#5A7D5A] transition-colors ml-1 underline decoration-2 underline-offset-4"
+            >
+              {{ $t("register.login") }}
+            </router-link>
+          </p>
+        </form>
+        <GoogleLogin />
+      </div>
+    </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/frontend/src/views/ReportsView.vue b/frontend/src/views/ReportsView.vue
new file mode 100644
index 0000000..fd28133
--- /dev/null
+++ b/frontend/src/views/ReportsView.vue
@@ -0,0 +1,207 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import useApi from '@/composables/useApi'
+import reportService from '@/services/reportService'
+import BarChart from '@/components/charts/BarChart.vue'
+import HorizontalBarChart from '@/components/charts/HorizontalBarChart.vue'
+import DoughnutChart from '@/components/charts/DoughnutChart.vue'
+
+const { t } = useI18n()
+
+const to = ref(new Date().toISOString().split('T')[0])
+const from = ref(new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0])
+const isRefresh = ref(false)
+
+const { data, error, loading, request } = useApi(
+    () => reportService.generateReport({
+        from: from.value,
+        to: to.value,
+        refresh: isRefresh.value
+    }), true
+)
+
+const handleGenerate = async () => {
+    isRefresh.value = false
+    await request()
+}
+
+const handleRefresh = async () => {
+    isRefresh.value = true
+    await request()
+    isRefresh.value = false
+}
+
+// THE NEW COLOR PALETTE
+const COLORS = [
+    '#5A7D5A', // Sage
+    '#D4A373', // Soft Brown
+    '#E07A5F', // Coral
+    '#8E9AAF', // Muted Blue/Grey
+    '#D4E2D4', // Light Sage
+    '#F2E9E4'  // Rose Cream
+]
+
+const totalTimeChartData = computed(() => ({
+    labels: data.value.total_time_by_label.map(row => row.label),
+    datasets: [{
+        data: data.value.total_time_by_label.map(row => row.hours * 60 + row.minutes),
+        backgroundColor: '#D4A373', // Soft Brown
+        borderRadius: 12,
+    }]
+}))
+
+const mostUsedLabelsChartData = computed(() => ({
+    labels: data.value.most_used_labels.map(row => row.label),
+    datasets: [{
+        data: data.value.most_used_labels.map(row => row.percentage),
+        backgroundColor: data.value.most_used_labels.map((_, i) => COLORS[i % COLORS.length]),
+        borderWidth: 0,
+        hoverOffset: 20
+    }]
+}))
+
+const avgTimeChartData = computed(() => ({
+    labels: data.value.avg_time_per_label.map(row => row.label),
+    datasets: [{
+        data: data.value.avg_time_per_label.map(row => row.hours * 60 + row.minutes),
+        backgroundColor: '#5A7D5A', // Sage
+        borderRadius: 12,
+    }]
+}))
+
+const tooltipMinutesPlugin = {
+    plugins: {
+        tooltip: {
+            backgroundColor: '#4A4A4A',
+            padding: 12,
+            cornerRadius: 12,
+            titleFont: { weight: 'bold' },
+            callbacks: {
+                label: (context) => {
+                    const minutes = context.raw
+                    const h = Math.floor(minutes / 60)
+                    const m = minutes % 60
+                    return ` ${h}h ${m}m`
+                }
+            }
+        }
+    }
+}
+</script>
+
+<template>
+    <div class="max-w-5xl mx-auto px-8 py-12">
+
+        <div class="mb-10">
+            <h1 class="text-3xl font-black text-[#4A4A4A] tracking-tight">
+                {{ t('reports.title') }}
+            </h1>
+            <p class="text-[15px] text-[#8E9AAF] font-medium mt-1 italic">
+                {{ t('reports.subtitle') }}
+            </p>
+        </div>
+
+        <form @submit.prevent="handleGenerate"
+            class="flex flex-wrap items-end gap-6 p-8 bg-white border-2 border-[#F9F7F2] rounded-[2rem] shadow-sm mb-12">
+
+            <div class="flex flex-col gap-2">
+                <label class="text-[11px] font-black text-[#A0A0A0] uppercase tracking-[0.15em] px-1">
+                    {{ t('reports.from') }}
+                </label>
+                <input
+                    type="date"
+                    v-model="from"
+                    class="px-5 py-3 bg-[#F9F7F2] border-2 border-transparent rounded-2xl text-[14px] font-bold text-[#4A4A4A] focus:outline-none focus:border-[#5A7D5A] focus:bg-white transition" />
+            </div>
+
+            <div class="flex flex-col gap-2">
+                <label class="text-[11px] font-black text-[#A0A0A0] uppercase tracking-[0.15em] px-1">
+                    {{ t('reports.to') }}
+                </label>
+                <input
+                    type="date"
+                    v-model="to"
+                    class="px-5 py-3 bg-[#F9F7F2] border-2 border-transparent rounded-2xl text-[14px] font-bold text-[#4A4A4A] focus:outline-none focus:border-[#5A7D5A] focus:bg-white transition" />
+            </div>
+
+            <div class="flex items-center gap-4 ml-auto">
+                <button
+                    type="button"
+                    @click="handleRefresh"
+                    :disabled="loading"
+                    class="px-4 py-3 text-[#A0A0A0] hover:text-[#4A4A4A] text-[13px] font-black uppercase tracking-widest transition disabled:opacity-50">
+                    🔄 {{ t('reports.refresh') }}
+                </button>
+                <button
+                    type="submit"
+                    :disabled="loading"
+                    class="px-8 py-3 bg-[#E07A5F] hover:bg-[#D6684D] text-white text-[13px] font-black uppercase tracking-widest rounded-2xl disabled:opacity-50 transition shadow-xl shadow-[#E07A5F]/20 active:scale-95">
+                    {{ loading ? '...' : t('reports.generate') }}
+                </button>
+            </div>
+        </form>
+
+        <div v-if="data" class="space-y-12">
+
+            <section>
+                <h2 class="text-[11px] font-black text-[#A0A0A0] uppercase tracking-[0.15em] mb-6 px-2">
+                    {{ t('reports.quick_stats.title') }}
+                </h2>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div class="p-8 bg-white border-2 border-[#F9F7F2] rounded-[2.5rem] hover:shadow-md transition-shadow">
+                        <p class="text-[11px] font-black text-[#A0A0A0] uppercase tracking-[0.1em] mb-3">
+                            {{ t('reports.quick_stats.total_entries') }}
+                        </p>
+                        <p class="text-3xl font-black text-[#4A4A4A]">{{ data.quick_stats.total_entries }}</p>
+                    </div>
+                    
+                    <div class="p-8 bg-white border-2 border-[#F9F7F2] rounded-[2.5rem] hover:shadow-md transition-shadow">
+                        <p class="text-[11px] font-black text-[#A0A0A0] uppercase tracking-[0.1em] mb-3">
+                            {{ t('reports.quick_stats.total_time') }}
+                        </p>
+                        <p class="text-3xl font-black text-[#4A4A4A]">
+                            {{ data.quick_stats.total_hours }}<span class="text-xl text-[#A0A0A0] ml-1">h</span> 
+                            {{ data.quick_stats.total_minutes }}<span class="text-xl text-[#A0A0A0] ml-1">m</span>
+                        </p>
+                    </div>
+
+                    <div class="p-8 bg-[#5A7D5A] rounded-[2.5rem] shadow-2xl shadow-[#5A7D5A]/20">
+                        <p class="text-[11px] font-black text-white/70 uppercase tracking-[0.1em] mb-3">
+                            {{ t('reports.quick_stats.daily_avg') }}
+                        </p>
+                        <p class="text-3xl font-black text-white">
+                            {{ data.quick_stats.avg_hours_per_day }}<span class="text-xl opacity-60 ml-1">h</span> 
+                            {{ data.quick_stats.avg_minutes_per_day }}<span class="text-xl opacity-60 ml-1">m</span>
+                        </p>
+                    </div>
+                </div>
+            </section>
+
+            <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
+                <section class="lg:col-span-3 p-10 bg-white border-2 border-[#F9F7F2] rounded-[3rem]">
+                    <h2 class="text-[11px] font-black text-[#A0A0A0] uppercase tracking-[0.2em] mb-8">
+                        {{ t('reports.charts.time_distribution') }}
+                    </h2>
+                    <HorizontalBarChart :chart-data="totalTimeChartData" :chart-options="chartOptions" />
+                </section>
+
+                <section class="lg:col-span-2 p-10 bg-white border-2 border-[#F9F7F2] rounded-[3rem]">
+                    <h2 class="text-[11px] font-black text-[#A0A0A0] uppercase tracking-[0.2em] mb-8">
+                        {{ t('reports.charts.most_used') }}
+                    </h2>
+                    <div class="w-full max-w-[220px] mx-auto mb-10">
+                        <DoughnutChart :chart-data="mostUsedLabelsChartData" />
+                    </div>
+                    <div class="space-y-4">
+                        <div v-for="(row, i) in data.most_used_labels.slice(0, 4)" :key="i" class="flex items-center justify-between">
+                            <span class="text-[14px] font-bold text-[#4A4A4A]">{{ row.label }}</span>
+                            <span class="text-[13px] font-black text-[#E07A5F] bg-[#FFF2F0] px-3 py-1 rounded-full">{{ row.percentage }}%</span>
+                        </div>
+                    </div>
+                </section>
+            </div>
+
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/views/SingleEntry.vue b/frontend/src/views/SingleEntry.vue
deleted file mode 100644
index 34316d2..0000000
--- a/frontend/src/views/SingleEntry.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-import useApi from '@/composables/useApi'
-import router from '@/router'
-import timeEntryService from '@/services/timeEntryService'
-
-const props = defineProps(['entry'])
-const confirmDelete = ref(false)
-
-const { loading, error, request } = useApi(
-  () => timeEntryService.deleteTimeEntry(props.entry.id)
-)
-
-const remove = async () => {
-  await request()
-  if (!error.value) router.go(0)
-}
-</script>
-
-<template>
-  <div class="flex items-center gap-4 p-4 bg-white border border-[#e0e0e0] rounded-md mb-3 transition-all duration-200 hover:shadow-md hover:border-[#ccc] group">
-    <span class="font-medium text-[#333] flex-1">{{ entry.label }}</span>
-    <span class="text-[#666] text-[0.9rem]">{{ entry.start_time }} - {{ entry.end_time }}</span>
-    <span class="text-[#007bff] font-semibold text-[0.9rem] py-1 px-2.5 bg-[#e7f3ff] rounded">
-      {{ $t('single_entry.hour', entry.time_taken.hours) }} 
-      ,
-      {{ $t('single_entry.minute', entry.time_taken.minutes) }}
-    </span>
-
-    <template v-if="!confirmDelete">
-      <button
-        @click="confirmDelete = true"
-        class="opacity-0 group-hover:opacity-100 transition-opacity duration-200 p-1.5 rounded text-[#999] hover:text-[#cc3333] hover:bg-[#ffeeee]"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <polyline points="3 6 5 6 21 6"/>
-          <path d="M19 6l-1 14H6L5 6"/>
-          <path d="M10 11v6M14 11v6"/>
-          <path d="M9 6V4h6v2"/>
-        </svg>
-      </button>
-    </template>
-
-    <template v-else>
-      <span class="text-[#555] text-[0.85rem]">{{ $t('single_entry.confirm_delete') }}</span>
-      <button
-        @click="remove"
-        :disabled="loading"
-        class="px-2.5 py-1 text-[0.85rem] bg-[#cc3333] text-white rounded hover:bg-[#aa2222] disabled:opacity-50 transition-colors duration-150"
-      >{{ loading ? '...' : $t('single_entry.yes') }}</button>
-      <button
-        @click="confirmDelete = false"
-        :disabled="loading"
-        class="px-2.5 py-1 text-[0.85rem] border border-[#ddd] rounded hover:bg-[#f5f5f5] disabled:opacity-50 transition-colors duration-150"
-      >{{ $t('single_entry.no') }}</button>
-    </template>
-
-  </div>
-</template>