diff --git a/lib/src/core/common/widgets/app_bar_button.dart b/lib/src/core/common/widgets/app_bar_button.dart
index 19e3b9a..4414996 100644
--- a/lib/src/core/common/widgets/app_bar_button.dart
+++ b/lib/src/core/common/widgets/app_bar_button.dart
@@ -1,6 +1,31 @@
 import 'package:fluent_ui/fluent_ui.dart';
 import 'package:flutter_svg/svg.dart';
-
+/// ## [FluentAppBarButton] Class Documentation
+///
+/// The `FluentAppBarButton` class represents a custom button widget with an icon
+/// that is used in the AppBar. It supports hover effects and is designed to work
+/// with the `fluent_ui` and `flutter_svg` packages for a smooth UI experience.
+///
+/// ### Usage:
+///
+/// This widget creates a button with an SVG icon and provides a hover effect.
+/// The button color changes when hovered over. The button also allows you to
+/// define the action that occurs when the button is pressed via the `onPressed` callback.
+///
+/// ### Properties:
+///
+/// - **[icon]** (String):
+///   - A string representing the path to the SVG icon used in the button.
+///   - This path is passed to the `SvgPicture.asset()` constructor.
+///
+/// - **[onPressed]** (VoidCallback):
+///   - A callback function that is triggered when the button is pressed.
+///
+/// ### Methods:
+///
+/// - **[build(BuildContext context)]**:
+///   - Builds the widget's UI, including the hover button with the SVG icon and hover effect.
+///
 class FluentAppBarButton extends StatelessWidget {
   const FluentAppBarButton({
     super.key,
diff --git a/lib/src/core/common/widgets/customized_appbar.dart b/lib/src/core/common/widgets/customized_appbar.dart
index dcfa5d4..8b963bd 100644
--- a/lib/src/core/common/widgets/customized_appbar.dart
+++ b/lib/src/core/common/widgets/customized_appbar.dart
@@ -4,7 +4,33 @@ import 'package:gui/src/core/utils/gen/assets/assets.gen.dart';
 import 'package:window_manager/window_manager.dart';
 
 import 'app_bar_button.dart';
-
+/// ## [CustomAppBar] Class Documentation
+///
+/// The `CustomAppBar` class represents a custom application bar (AppBar)
+/// that provides
+/// window management controls (minimize, maximize, and close) along with
+/// an optional theme toggle.
+/// It is designed to be used with the `fluent_ui` and `flutter_svg` packages
+/// and includes custom buttons
+/// for window operations, integrated with the `window_manager` package.
+///
+/// ### Usage:
+///
+/// This widget provides a custom AppBar for an application, including:
+/// - An SVG logo on the left.
+/// - A toggle switch for changing themes (currently commented out).
+/// - Window control buttons for minimizing, maximizing, and closing the window.
+///
+/// ### Properties:
+///
+/// - **[preferredSize]**:
+///   - Returns a fixed size for the AppBar, specifically `48` pixels in height.
+///
+/// ### Methods:
+///
+/// - **[build(BuildContext context)]**:
+///   - Builds the UI of the custom AppBar, including window controls and layout
+///   management.
 class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
   const CustomAppBar({super.key});
 
@@ -38,6 +64,8 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
             ToggleSwitch(
               checked: true,
               onChanged: (bool value) {
+                /// to-do #42 : uncomment this part after resolving confilcts
+                /// between theme & Fluent UI by Pouria
                 // context.read<ThemeBloc>().add(
                 //   ThemeChanged(
                 //     theme: isLightTheme ? ThemeModes.dark : ThemeModes.light,