diff --git a/assets/images/sample_avatar.png b/assets/images/sample_avatar.png
new file mode 100644
index 0000000..098e964
Binary files /dev/null and b/assets/images/sample_avatar.png differ
diff --git a/assets/svg/icon_location.svg b/assets/svg/icon_location.svg
new file mode 100644
index 0000000..9425b31
--- /dev/null
+++ b/assets/svg/icon_location.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.95833 7.79167C4.95833 6.22625 6.22625 4.95833 7.79167 4.95833C9.35708 4.95833 10.625 6.22625 10.625 7.79167C10.625 9.35708 9.35708 10.625 7.79167 10.625C6.22625 10.625 4.95833 9.35708 4.95833 7.79167ZM7.08333 14.1242C5.64692 13.9637 4.30776 13.3196 3.28574 12.2976C2.26373 11.2756 1.61961 9.93641 1.45917 8.5H0.708333C0.31875 8.5 0 8.18125 0 7.79167C0 7.40208 0.31875 7.08333 0.708333 7.08333H1.45917C1.61961 5.64692 2.26373 4.30776 3.28574 3.28574C4.30776 2.26373 5.64692 1.61961 7.08333 1.45917V0.708333C7.08333 0.31875 7.40208 0 7.79167 0C8.18125 0 8.5 0.31875 8.5 0.708333V1.45917C9.93641 1.61961 11.2756 2.26373 12.2976 3.28574C13.3196 4.30776 13.9637 5.64692 14.1242 7.08333H14.875C15.2646 7.08333 15.5833 7.40208 15.5833 7.79167C15.5833 8.18125 15.2646 8.5 14.875 8.5H14.1242C13.9637 9.93641 13.3196 11.2756 12.2976 12.2976C11.2756 13.3196 9.93641 13.9637 8.5 14.1242V14.875C8.5 15.2646 8.18125 15.5833 7.79167 15.5833C7.40208 15.5833 7.08333 15.2646 7.08333 14.875V14.1242ZM12.75 7.79167C12.75 5.05042 10.5329 2.83333 7.79167 2.83333C5.05042 2.83333 2.83333 5.05042 2.83333 7.79167C2.83333 10.5329 5.05042 12.75 7.79167 12.75C10.5329 12.75 12.75 10.5329 12.75 7.79167Z" fill="white"/>
+</svg>
diff --git a/assets/svg/icon_logout.svg b/assets/svg/icon_logout.svg
new file mode 100644
index 0000000..cdd0505
--- /dev/null
+++ b/assets/svg/icon_logout.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 2H16C16.7956 2 17.5587 2.31607 18.1213 2.87868C18.6839 3.44129 19 4.20435 19 5V19C19 19.2652 18.8946 19.5196 18.7071 19.7071C18.5196 19.8946 18.2652 20 18 20H15" stroke="#F6F6F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 12V14M5 2L12.588 3.518C13.268 3.65392 13.8799 4.02121 14.3197 4.55739C14.7594 5.09358 14.9998 5.76555 15 6.459V20.78C14.9999 20.9279 14.967 21.0739 14.9037 21.2076C14.8404 21.3412 14.7482 21.4592 14.6338 21.5529C14.5194 21.6466 14.3856 21.7138 14.2422 21.7496C14.0987 21.7854 13.949 21.789 13.804 21.76L6.608 20.322C6.15444 20.2313 5.74633 19.9863 5.45314 19.6286C5.15995 19.2708 4.99982 18.8225 5 18.36V2Z" stroke="#F6F6F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/lib/common_ui/resources/my_assets.dart b/lib/common_ui/resources/my_assets.dart
index 7ce0a6b..f3092c6 100644
--- a/lib/common_ui/resources/my_assets.dart
+++ b/lib/common_ui/resources/my_assets.dart
@@ -30,7 +30,8 @@ class MyAssets {
   static const String friendBattle = 'assets/svg/friend_battle.svg';
   static const String question = 'assets/svg/question.svg';
   static const String introStar = 'assets/svg/intro_star.svg';
-
+  static const String iconLocation = 'assets/svg/icon_location.svg';
+  static const String iconLogout = 'assets/svg/icon_logout.svg';
 
   /// ----- Audios -----
   static const String sampleAudio = 'assets/audios/sample.mp3';
diff --git a/lib/core/routers/my_routes.dart b/lib/core/routers/my_routes.dart
index 272cf33..dd600e2 100644
--- a/lib/core/routers/my_routes.dart
+++ b/lib/core/routers/my_routes.dart
@@ -48,25 +48,21 @@ List<GetPage> get appPages => [
         name: Routes.homePage,
         page: () => const HomePage(),
         binding: HomeBinding(),
-        transition: Transition.fadeIn,
       ),
       GetPage(
         name: Routes.shopPage,
         page: () => const ShopPage(),
         binding: ShopBinding(),
-        transition: Transition.fadeIn,
       ),
       GetPage(
         name: Routes.awardsPage,
         page: () => const AwardsPage(),
         binding: AwardsBinding(),
-        transition: Transition.fadeIn,
       ),
       GetPage(
         name: Routes.profilePage,
         page: () => const ProfilePage(),
         binding: ProfileBinding(),
-        transition: Transition.fadeIn,
       ),
     ],
   ),
diff --git a/lib/core/widgets/background/my_background.dart b/lib/core/widgets/background/my_background.dart
new file mode 100644
index 0000000..7252a15
--- /dev/null
+++ b/lib/core/widgets/background/my_background.dart
@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
+
+class MyBackground extends StatelessWidget {
+  const MyBackground({super.key, required this.child});
+
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        gradient: RadialGradient(
+          radius: 0.6,
+          colors: [const Color(0xFF321A6D), context.backgroundColor],
+        ),
+      ),
+      child: SingleChildScrollView(
+        padding: EdgeInsets.symmetric(horizontal: MySpaces.s30),
+        child: child,
+      ),
+    );
+  }
+}
diff --git a/lib/core/widgets/button/my_gradient_button.dart b/lib/core/widgets/button/my_gradient_button.dart
new file mode 100644
index 0000000..133fee4
--- /dev/null
+++ b/lib/core/widgets/button/my_gradient_button.dart
@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
+import 'package:shia_game_flutter/core/widgets/container/gradient_container.dart';
+
+class MyGradientButton extends StatelessWidget {
+  const MyGradientButton({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return GradientContainer(
+      height: 32,
+      width: 116,
+      onTap: () {},
+      borderColor: Color(0XFF6D2ADA),
+      borderRadius: BorderRadius.all(Radius.circular(5)),
+      gradient: LinearGradient(
+        begin: AlignmentDirectional.topStart,
+        end: AlignmentDirectional.bottomEnd,
+        colors: [Color(0XFF823FEB), Color(0XFF4F09BF)],
+      ),
+      child: ShaderMask(
+        blendMode: BlendMode.modulate,
+        shaderCallback: (bounds) => LinearGradient(
+          begin: Alignment.topCenter,
+          end: Alignment.bottomCenter,
+          colors: [Color(0XFFFFFFFF), Color(0XFFFFFFFF), Color(0XFF9C8CC2)],
+        ).createShader(bounds),
+        child: Text(
+          'Change Profile',
+          style: Lexend.extraBold.copyWith(
+            fontSize: 12,
+            shadows: [
+              BoxShadow(
+                color: Color(0xFF1B0D31),
+                blurRadius: 0,
+                offset: Offset(0, 1.69),
+                spreadRadius: 0,
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/core/widgets/container/gradient_container.dart b/lib/core/widgets/container/gradient_container.dart
index f7a41d8..ab1cacf 100644
--- a/lib/core/widgets/container/gradient_container.dart
+++ b/lib/core/widgets/container/gradient_container.dart
@@ -1,11 +1,11 @@
 import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
 
 class GradientContainer extends StatelessWidget {
   const GradientContainer({
     super.key,
     this.width,
     this.height,
-    this.margin,
     this.padding,
     this.shapeBorder,
     this.boxShape,
@@ -17,11 +17,11 @@ class GradientContainer extends StatelessWidget {
     this.image,
     this.gradient,
     this.borderColor,
+    this.onTap,
   });
 
   final double? width;
   final double? height;
-  final EdgeInsetsGeometry? margin;
   final EdgeInsetsGeometry? padding;
   final ShapeBorder? shapeBorder;
   final BoxShape? boxShape;
@@ -33,45 +33,56 @@ class GradientContainer extends StatelessWidget {
   final Color? borderColor;
   final Widget? child;
   final DecorationImage? image;
+  final VoidCallback? onTap;
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      padding: EdgeInsets.all(1),
-      width: width,
-      height: height,
-      margin: margin,
-      decoration: shapeBorder == null
-          ? BoxDecoration(
-              shape: boxShape ?? BoxShape.rectangle,
-              gradient: borderGradient,
-              borderRadius: borderRadius,
-              boxShadow: boxShadow,
-              color: borderColor,
-            )
-          : ShapeDecoration(
-              shape: shapeBorder!,
-              gradient: borderGradient,
-              shadows: boxShadow,
-              color: borderColor,
-            ),
-      child: Container(
-        padding: padding,
-        decoration: shapeBorder == null
-            ? BoxDecoration(
-                shape: boxShape ?? BoxShape.rectangle,
-                gradient: gradient,
-                borderRadius: borderRadius,
-                color: color,
-                image: image,
-              )
-            : ShapeDecoration(
-                shape: shapeBorder!,
-                gradient: gradient,
-                color: color,
-                image: image,
-              ),
-        child: child,
+    return Material(
+      color: context.noColor,
+      borderRadius: borderRadius,
+      shadowColor: boxShadow?.first.color,
+      elevation: boxShadow?.first.blurRadius ?? 0,
+      shape: shapeBorder,
+      child: InkWell(
+        onTap: onTap,
+        customBorder: RoundedRectangleBorder(
+          borderRadius: borderRadius ?? BorderRadius.zero,
+        ),
+        child: Ink(
+          padding: EdgeInsets.all(1),
+          width: width,
+          height: height,
+          decoration: shapeBorder == null
+              ? BoxDecoration(
+                  shape: boxShape ?? BoxShape.rectangle,
+                  gradient: borderGradient,
+                  borderRadius: borderRadius,
+                  color: borderColor,
+                )
+              : ShapeDecoration(
+                  shape: shapeBorder!,
+                  gradient: borderGradient,
+                  color: borderColor,
+                ),
+          child: Ink(
+            padding: padding,
+            decoration: shapeBorder == null
+                ? BoxDecoration(
+                    shape: boxShape ?? BoxShape.rectangle,
+                    gradient: gradient,
+                    borderRadius: borderRadius,
+                    color: color,
+                    image: image,
+                  )
+                : ShapeDecoration(
+                    shape: shapeBorder!,
+                    gradient: gradient,
+                    color: color,
+                    image: image,
+                  ),
+            child: Center(child: child),
+          ),
+        ),
       ),
     );
   }
diff --git a/lib/core/widgets/input/my_input.dart b/lib/core/widgets/input/my_input.dart
new file mode 100644
index 0000000..5e649f0
--- /dev/null
+++ b/lib/core/widgets/input/my_input.dart
@@ -0,0 +1,91 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
+import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
+
+class MyInput extends StatelessWidget {
+  const MyInput({
+    super.key,
+    this.labelText,
+    this.hintText,
+    this.controller,
+    this.obscureText,
+    this.keyboardType,
+    this.action,
+    this.validator,
+    this.onChanged,
+    this.onTap,
+    this.onEditingComplete,
+    this.onTapOutside,
+    this.enabled,
+    this.readOnly,
+    this.maxLines,
+    this.minLines,
+  });
+
+  final String? labelText;
+  final String? hintText;
+  final TextEditingController? controller;
+  final bool? obscureText;
+  final TextInputType? keyboardType;
+  final TextInputAction? action;
+  final String? Function(String?)? validator;
+  final void Function(String)? onChanged;
+  final void Function()? onTap;
+  final void Function()? onEditingComplete;
+  final void Function(PointerDownEvent)? onTapOutside;
+  final bool? enabled;
+  final bool? readOnly;
+  final int? maxLines;
+  final int? minLines;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      spacing: MySpaces.s8,
+      children: [
+        if (labelText != null && labelText!.isNotEmpty)
+          Text(
+            labelText ?? '',
+            style: Lexend.bold.copyWith(fontSize: 12),
+          ),
+        TextFormField(
+          controller: controller,
+          obscureText: obscureText ?? false,
+          keyboardType: keyboardType,
+          textInputAction: action,
+          validator: validator,
+          onChanged: onChanged,
+          onTap: onTap,
+          onEditingComplete: onEditingComplete,
+          enabled: enabled,
+          readOnly: readOnly ?? false,
+          maxLines: maxLines,
+          minLines: minLines,
+          style: Lexend.extraBold.copyWith(fontSize: 12),
+          cursorColor: context.primaryColor,
+          decoration: InputDecoration(
+            contentPadding: EdgeInsets.all(MySpaces.s14),
+            enabledBorder: OutlineInputBorder(
+              borderRadius: BorderRadius.all(Radius.circular(12)),
+              borderSide: BorderSide(color: Color(0XFF5715BF), width: 1),
+            ),
+            focusedBorder: OutlineInputBorder(
+              borderRadius: BorderRadius.all(Radius.circular(12)),
+              borderSide: BorderSide(color: Color(0XFF5715BF), width: 1),
+            ),
+            fillColor: Color(0XFF000000).withValues(alpha: 0.2),
+            filled: true,
+            hintText: hintText,
+            hintStyle: Lexend.extraBold.copyWith(fontSize: 12),
+          ),
+          onTapOutside: (event) {
+            FocusManager.instance.primaryFocus?.unfocus();
+            onTapOutside?.call(event);
+          },
+        ),
+      ],
+    );
+  }
+}
diff --git a/lib/features/home/presentation/pages/home_page.dart b/lib/features/home/presentation/pages/home_page.dart
index fc404e1..878a860 100644
--- a/lib/features/home/presentation/pages/home_page.dart
+++ b/lib/features/home/presentation/pages/home_page.dart
@@ -1,8 +1,9 @@
-import 'package:flutter/material.dart' hide BoxShadow, BoxDecoration;
+import 'package:flutter/material.dart' ;
 import 'package:get/get.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/core/utils/gap.dart';
+import 'package:shia_game_flutter/core/widgets/background/my_background.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
 import 'package:shia_game_flutter/features/home/presentation/controller/home_controller.dart';
 import 'package:shia_game_flutter/features/home/presentation/pages/widgets/home_battle_cast.dart';
@@ -15,8 +16,7 @@ class HomePage extends GetView<HomeController> {
 
   @override
   Widget build(BuildContext context) {
-    return SingleChildScrollView(
-      padding: EdgeInsets.symmetric(horizontal: MySpaces.s32),
+    return MyBackground(
       child: Column(
         children: [
           MySpaces.s28.gapHeight,
diff --git a/lib/features/home/presentation/pages/widgets/home_battle_cast.dart b/lib/features/home/presentation/pages/widgets/home_battle_cast.dart
index 2cd7d8f..e3ea720 100644
--- a/lib/features/home/presentation/pages/widgets/home_battle_cast.dart
+++ b/lib/features/home/presentation/pages/widgets/home_battle_cast.dart
@@ -20,7 +20,7 @@ class HomeBattleCast extends StatelessWidget {
       children: [
         GradientContainer(
           height: 120,
-          borderRadius: BorderRadiusDirectional.all(Radius.circular(MySpaces.s20)),
+          borderRadius: BorderRadius.all(Radius.circular(MySpaces.s20)),
           borderGradient: LinearGradient(
             begin: AlignmentDirectional.topCenter,
             end: AlignmentDirectional.bottomCenter,
diff --git a/lib/features/home/presentation/pages/widgets/home_battle_league.dart b/lib/features/home/presentation/pages/widgets/home_battle_league.dart
index aac63c7..54eeaea 100644
--- a/lib/features/home/presentation/pages/widgets/home_battle_league.dart
+++ b/lib/features/home/presentation/pages/widgets/home_battle_league.dart
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
+import 'package:shia_game_flutter/core/utils/gap.dart';
 import 'package:shia_game_flutter/core/utils/screen_size.dart';
 import 'package:shia_game_flutter/core/widgets/container/gradient_container.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
@@ -36,6 +37,7 @@ class HomeBattleLeague extends StatelessWidget {
             mainAxisAlignment: MainAxisAlignment.end,
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
+              context.widthScreen.gapWidth,
               ShaderMask(
                 blendMode: BlendMode.modulate,
                 shaderCallback: (bounds) => LinearGradient(
diff --git a/lib/features/home/presentation/pages/widgets/home_membership.dart b/lib/features/home/presentation/pages/widgets/home_membership.dart
index a575d0a..a505bbd 100644
--- a/lib/features/home/presentation/pages/widgets/home_membership.dart
+++ b/lib/features/home/presentation/pages/widgets/home_membership.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_colors.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
 import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
@@ -28,7 +29,7 @@ class HomeMembership extends StatelessWidget {
       borderRadius: BorderRadius.all(Radius.circular(MySpaces.s20)),
       boxShadow: [
         BoxShadow(
-          color: Color(0x3F000000),
+          color: MyColors.black,
           blurRadius: 17,
           offset: Offset(0, 4),
           spreadRadius: 20,
diff --git a/lib/features/intro/presentation/ui/intro_page.dart b/lib/features/intro/presentation/ui/intro_page.dart
index 7593bb3..1facbae 100644
--- a/lib/features/intro/presentation/ui/intro_page.dart
+++ b/lib/features/intro/presentation/ui/intro_page.dart
@@ -24,7 +24,7 @@ class IntroPage extends GetView<IntroController> {
           decoration: BoxDecoration(
             gradient: RadialGradient(
               radius: 0.7,
-              colors: [const Color(0xFF321A6D), const Color(0x00160C30)],
+              colors: [const Color(0xFF321A6D), context.backgroundColor],
             ),
           ),
           child: Stack(
diff --git a/lib/features/master/presentation/ui/master_page.dart b/lib/features/master/presentation/ui/master_page.dart
index 4866d68..064d78f 100644
--- a/lib/features/master/presentation/ui/master_page.dart
+++ b/lib/features/master/presentation/ui/master_page.dart
@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
 import 'package:shia_game_flutter/core/routers/my_routes.dart';
 import 'package:shia_game_flutter/core/widgets/app_bar/master_app_bar.dart';
 import 'package:shia_game_flutter/core/widgets/bottom_nav_bar/bottom_nav_bar.dart';
@@ -12,7 +11,7 @@ class MasterPage extends GetView<MasterController> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: context.backgroundColor,
+      resizeToAvoidBottomInset: false,
       appBar: MasterAppBar(),
       bottomNavigationBar: BottomNavBar(),
       body: GetRouterOutlet(
diff --git a/lib/features/profile/presentation/ui/profile_page.dart b/lib/features/profile/presentation/ui/profile_page.dart
index 8a4a3a3..210589e 100644
--- a/lib/features/profile/presentation/ui/profile_page.dart
+++ b/lib/features/profile/presentation/ui/profile_page.dart
@@ -1,14 +1,64 @@
 import 'package:flutter/material.dart';
-import 'package:shia_game_flutter/features/profile/presentation/controller/profile_controller.dart';
 import 'package:get/get.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/core/utils/gap.dart';
+import 'package:shia_game_flutter/core/widgets/background/my_background.dart';
+import 'package:shia_game_flutter/core/widgets/button/my_gradient_button.dart';
+import 'package:shia_game_flutter/core/widgets/input/my_input.dart';
+import 'package:shia_game_flutter/features/profile/presentation/controller/profile_controller.dart';
+import 'package:shia_game_flutter/features/profile/presentation/ui/widgets/profile_avatar.dart';
+import 'package:shia_game_flutter/features/profile/presentation/ui/widgets/profile_delete_account.dart';
+import 'package:shia_game_flutter/features/profile/presentation/ui/widgets/profile_location.dart';
+import 'package:shia_game_flutter/features/profile/presentation/ui/widgets/profile_logout.dart';
 
 class ProfilePage extends GetView<ProfileController> {
   const ProfilePage({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return const Center(
-      child: Text('Profile Page'),
+    return MyBackground(
+      child: Column(
+        children: [
+          60.0.gapHeight,
+          ProfileAvatar(),
+          MyGradientButton(),
+          MySpaces.s40.gapHeight,
+          MyInput(
+            labelText: 'User Name',
+            hintText: 'Unknown123456',
+          ),
+          MySpaces.s28.gapHeight,
+          _locationInput(),
+          200.0.gapHeight,
+          _bottomButtons(),
+        ],
+      ),
+    );
+  }
+
+  Row _locationInput() {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.end,
+      spacing: MySpaces.s10,
+      children: [
+        Expanded(
+          child: MyInput(
+            labelText: 'Your Region',
+            hintText: 'Iran - Tehran',
+          ),
+        ),
+        ProfileLocation(),
+      ],
+    );
+  }
+
+  Row _bottomButtons() {
+    return Row(
+      spacing: MySpaces.s20,
+      children: [
+        Expanded(child: ProfileDeleteAccount()),
+        Expanded(child: ProfileLogout()),
+      ],
     );
   }
 }
diff --git a/lib/features/profile/presentation/ui/widgets/profile_avatar.dart b/lib/features/profile/presentation/ui/widgets/profile_avatar.dart
new file mode 100644
index 0000000..9b3c167
--- /dev/null
+++ b/lib/features/profile/presentation/ui/widgets/profile_avatar.dart
@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
+import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
+import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+
+class ProfileAvatar extends StatelessWidget {
+  const ProfileAvatar({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 106,
+      width: 106,
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        border: Border.all(width: 2.5, color: context.primaryColor),
+      ),
+      child: MyImage(asset: MyAssets.sampleAvatar),
+    );
+  }
+}
diff --git a/lib/features/profile/presentation/ui/widgets/profile_delete_account.dart b/lib/features/profile/presentation/ui/widgets/profile_delete_account.dart
new file mode 100644
index 0000000..f44437e
--- /dev/null
+++ b/lib/features/profile/presentation/ui/widgets/profile_delete_account.dart
@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
+import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
+import 'package:shia_game_flutter/core/utils/my_localization.dart';
+import 'package:shia_game_flutter/core/widgets/container/gradient_container.dart';
+
+class ProfileDeleteAccount extends StatelessWidget {
+  const ProfileDeleteAccount({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return GradientContainer(
+      height: 58,
+      onTap: () {},
+      borderRadius: BorderRadius.all(Radius.circular(MySpaces.s12)),
+      color: context.backgroundColor,
+      borderGradient: LinearGradient(
+        begin: AlignmentDirectional.centerStart,
+        end: AlignmentDirectional.centerEnd,
+        colors: [
+          Color(0XFF7E94B4).withValues(alpha: 0.3),
+          Color(0XFF304053).withValues(alpha: 0),
+        ],
+      ),
+      padding: EdgeInsets.symmetric(
+        vertical: MySpaces.s16,
+        horizontal: MySpaces.s28,
+      ),
+      child: FittedBox(
+        child: Text(
+          context.translate.delete_account,
+          maxLines: 1,
+          style: Lexend.semiBold.copyWith(fontSize: 14, color: Color(0XFF5F5F88)),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/features/profile/presentation/ui/widgets/profile_location.dart b/lib/features/profile/presentation/ui/widgets/profile_location.dart
new file mode 100644
index 0000000..233eb43
--- /dev/null
+++ b/lib/features/profile/presentation/ui/widgets/profile_location.dart
@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
+import 'package:shia_game_flutter/core/widgets/container/gradient_container.dart';
+import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+
+class ProfileLocation extends StatelessWidget {
+  const ProfileLocation({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return GradientContainer(
+      onTap: () {},
+      width: 48,
+      height: 48,
+      color: Color(0XFF5715BF),
+      borderRadius: BorderRadius.all(Radius.circular(12)),
+      child: MyImage(asset: MyAssets.iconLocation),
+    );
+  }
+}
diff --git a/lib/features/profile/presentation/ui/widgets/profile_logout.dart b/lib/features/profile/presentation/ui/widgets/profile_logout.dart
new file mode 100644
index 0000000..d1999cf
--- /dev/null
+++ b/lib/features/profile/presentation/ui/widgets/profile_logout.dart
@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
+import 'package:shia_game_flutter/core/utils/my_localization.dart';
+import 'package:shia_game_flutter/core/widgets/container/gradient_container.dart';
+import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+
+class ProfileLogout extends StatelessWidget {
+  const ProfileLogout({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return GradientContainer(
+      height: 58,
+      onTap: () {},
+      borderRadius: BorderRadius.all(Radius.circular(MySpaces.s12)),
+      color: Color(0XFF270A59),
+      padding: EdgeInsets.symmetric(
+        vertical: MySpaces.s16,
+        horizontal: MySpaces.s28,
+      ),
+      child: Row(
+        spacing: MySpaces.s10,
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          MyImage(asset: MyAssets.iconLogout),
+          FittedBox(
+            child: Text(
+              context.translate.logout,
+              style: Lexend.semiBold.copyWith(fontSize: 14),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/l10n/app_en.arb b/lib/l10n/app_en.arb
index 886f871..ec1386d 100644
--- a/lib/l10n/app_en.arb
+++ b/lib/l10n/app_en.arb
@@ -7,5 +7,7 @@
   "profile": "Profile",
   "pro_membership": "Pro Membership",
   "custom_league": "Custom League",
-  "friends_battle": "Friends Battle"
+  "friends_battle": "Friends Battle",
+  "logout": "Log out",
+  "delete_account": "Delete Account"
 }
\ No newline at end of file
diff --git a/lib/l10n/app_localizations.dart b/lib/l10n/app_localizations.dart
index c19bb98..3297b55 100644
--- a/lib/l10n/app_localizations.dart
+++ b/lib/l10n/app_localizations.dart
@@ -141,6 +141,18 @@ abstract class AppLocalizations {
   /// In en, this message translates to:
   /// **'Friends Battle'**
   String get friends_battle;
+
+  /// No description provided for @logout.
+  ///
+  /// In en, this message translates to:
+  /// **'Log out'**
+  String get logout;
+
+  /// No description provided for @delete_account.
+  ///
+  /// In en, this message translates to:
+  /// **'Delete Account'**
+  String get delete_account;
 }
 
 class _AppLocalizationsDelegate
diff --git a/lib/l10n/app_localizations_en.dart b/lib/l10n/app_localizations_en.dart
index ba4430c..0436ab4 100644
--- a/lib/l10n/app_localizations_en.dart
+++ b/lib/l10n/app_localizations_en.dart
@@ -31,4 +31,10 @@ class AppLocalizationsEn extends AppLocalizations {
 
   @override
   String get friends_battle => 'Friends Battle';
+
+  @override
+  String get logout => 'Log out';
+
+  @override
+  String get delete_account => 'Delete Account';
 }