diff --git a/lib/model/profile/profileInfomation.dart b/lib/model/profile/profileInfomation.dart
index d05987f..61e0155 100644
--- a/lib/model/profile/profileInfomation.dart
+++ b/lib/model/profile/profileInfomation.dart
@@ -4,6 +4,7 @@ import 'package:unit2/model/profile/educational_background.dart';
 import 'package:unit2/model/profile/eligibility.dart';
 import 'package:unit2/model/profile/learning_development.dart';
 import 'package:unit2/model/profile/references.dart';
+import 'package:unit2/model/profile/voluntary_works.dart';
 import 'package:unit2/model/profile/work_history.dart';
 
 class ProfileInformation{
@@ -13,5 +14,6 @@ class ProfileInformation{
    List<LearningDevelopement> learningsAndDevelopment;
    List<EducationalBackground> educationalBackgrounds;
    List<WorkHistory>workExperiences;
-  ProfileInformation({required this.workExperiences, required this.basicInfo,required this.eligibilities,required this.references, required this.learningsAndDevelopment,required this.educationalBackgrounds});
+   List<VoluntaryWork> voluntaryWorks;
+  ProfileInformation({required this.voluntaryWorks, required this.workExperiences, required this.basicInfo,required this.eligibilities,required this.references, required this.learningsAndDevelopment,required this.educationalBackgrounds});
 }
\ No newline at end of file
diff --git a/lib/model/profile/voluntary_works.dart b/lib/model/profile/voluntary_works.dart
new file mode 100644
index 0000000..4938116
--- /dev/null
+++ b/lib/model/profile/voluntary_works.dart
@@ -0,0 +1,313 @@
+// To parse this JSON data, do
+//
+//     final voluntaryWork = voluntaryWorkFromJson(jsonString);
+
+import 'dart:convert';
+
+VoluntaryWork voluntaryWorkFromJson(String str) => VoluntaryWork.fromJson(json.decode(str));
+
+String voluntaryWorkToJson(VoluntaryWork data) => json.encode(data.toJson());
+
+class VoluntaryWork {
+    VoluntaryWork({
+        this.agency,
+        this.address,
+        this.toDate,
+        this.position,
+        this.fromDate,
+        this.totalHours,
+    });
+
+    final Agency? agency;
+    final Address? address;
+    final DateTime? toDate;
+    final Position? position;
+    final DateTime? fromDate;
+    final int? totalHours;
+
+    factory VoluntaryWork.fromJson(Map<String, dynamic> json) => VoluntaryWork(
+        agency: json["agency"] == null ? null : Agency.fromJson(json["agency"]),
+        address: json["address"] == null ? null : Address.fromJson(json["address"]),
+        toDate: json["to_date"],
+        position: json["position"] == null ? null : Position.fromJson(json["position"]),
+        fromDate: json["from_date"] == null ? null : DateTime.parse(json["from_date"]),
+        totalHours: json["total_hours"],
+    );
+
+    Map<String, dynamic> toJson() => {
+        "agency": agency?.toJson(),
+        "address": address?.toJson(),
+        "to_date": toDate,
+        "position": position?.toJson(),
+        "from_date": "${fromDate!.year.toString().padLeft(4, '0')}-${fromDate!.month.toString().padLeft(2, '0')}-${fromDate!.day.toString().padLeft(2, '0')}",
+        "total_hours": totalHours,
+    };
+}
+
+class Address {
+    Address({
+        this.id,
+        this.addressClass,
+        this.country,
+        this.barangay,
+        this.addressCategory,
+        this.cityMunicipality,
+    });
+
+    final int? id;
+    final dynamic addressClass;
+    final Country? country;
+    final dynamic barangay;
+    final AddressCategory? addressCategory;
+    final CityMunicipality? cityMunicipality;
+
+    factory Address.fromJson(Map<String, dynamic> json) => Address(
+        id: json["id"],
+        addressClass: json["class"],
+        country: json["country"] == null ? null : Country.fromJson(json["country"]),
+        barangay: json["barangay"],
+        addressCategory: json["address_category"] == null ? null : AddressCategory.fromJson(json["address_category"]),
+        cityMunicipality: json["city_municipality"] == null ? null : CityMunicipality.fromJson(json["city_municipality"]),
+    );
+
+    Map<String, dynamic> toJson() => {
+        "id": id,
+        "class": addressClass,
+        "country": country?.toJson(),
+        "barangay": barangay,
+        "address_category": addressCategory?.toJson(),
+        "city_municipality": cityMunicipality?.toJson(),
+    };
+}
+
+class AddressCategory {
+    AddressCategory({
+        this.id,
+        this.name,
+        this.type,
+    });
+
+    final int? id;
+    final String? name;
+    final String? type;
+
+    factory AddressCategory.fromJson(Map<String, dynamic> json) => AddressCategory(
+        id: json["id"],
+        name: json["name"],
+        type: json["type"],
+    );
+
+    Map<String, dynamic> toJson() => {
+        "id": id,
+        "name": name,
+        "type": type,
+    };
+}
+
+class CityMunicipality {
+    CityMunicipality({
+        this.code,
+        this.zipcode,
+        this.province,
+        this.psgcCode,
+        this.description,
+    });
+
+    final String? code;
+    final String? zipcode;
+    final Province? province;
+    final String? psgcCode;
+    final String? description;
+
+    factory CityMunicipality.fromJson(Map<String, dynamic> json) => CityMunicipality(
+        code: json["code"],
+        zipcode: json["zipcode"],
+        province: json["province"] == null ? null : Province.fromJson(json["province"]),
+        psgcCode: json["psgc_code"],
+        description: json["description"],
+    );
+
+    Map<String, dynamic> toJson() => {
+        "code": code,
+        "zipcode": zipcode,
+        "province": province?.toJson(),
+        "psgc_code": psgcCode,
+        "description": description,
+    };
+}
+
+class Province {
+    Province({
+        this.code,
+        this.region,
+        this.psgcCode,
+        this.shortname,
+        this.description,
+    });
+
+    final String? code;
+    final Region? region;
+    final String? psgcCode;
+    final String? shortname;
+    final String? description;
+
+    factory Province.fromJson(Map<String, dynamic> json) => Province(
+        code: json["code"],
+        region: json["region"] == null ? null : Region.fromJson(json["region"]),
+        psgcCode: json["psgc_code"],
+        shortname: json["shortname"],
+        description: json["description"],
+    );
+
+    Map<String, dynamic> toJson() => {
+        "code": code,
+        "region": region?.toJson(),
+        "psgc_code": psgcCode,
+        "shortname": shortname,
+        "description": description,
+    };
+}
+
+class Region {
+    Region({
+        this.code,
+        this.psgcCode,
+        this.description,
+    });
+
+    final int? code;
+    final String? psgcCode;
+    final String? description;
+
+    factory Region.fromJson(Map<String, dynamic> json) => Region(
+        code: json["code"],
+        psgcCode: json["psgc_code"],
+        description: json["description"],
+    );
+
+    Map<String, dynamic> toJson() => {
+        "code": code,
+        "psgc_code": psgcCode,
+        "description": description,
+    };
+}
+
+class Country {
+    Country({
+        this.id,
+        this.code,
+        this.name,
+    });
+
+    final int? id;
+    final String? code;
+    final String? name;
+
+    factory Country.fromJson(Map<String, dynamic> json) => Country(
+        id: json["id"],
+        code: json["code"],
+        name: json["name"],
+    );
+
+    Map<String, dynamic> toJson() => {
+        "id": id,
+        "code": code,
+        "name": name,
+    };
+}
+
+class Agency {
+    Agency({
+        this.id,
+        this.name,
+        this.category,
+        this.privateEntity,
+    });
+
+    final int? id;
+    final String? name;
+    final Category? category;
+    final bool? privateEntity;
+
+    factory Agency.fromJson(Map<String, dynamic> json) => Agency(
+        id: json["id"],
+        name: json["name"],
+        category: json["category"] == null ? null : Category.fromJson(json["category"]),
+        privateEntity: json["private_entity"],
+    );
+
+    Map<String, dynamic> toJson() => {
+        "id": id,
+        "name": name,
+        "category": category?.toJson(),
+        "private_entity": privateEntity,
+    };
+}
+
+class Category {
+    Category({
+        this.id,
+        this.name,
+        this.industryClass,
+    });
+
+    final int? id;
+    final String? name;
+    final IndustryClass? industryClass;
+
+    factory Category.fromJson(Map<String, dynamic> json) => Category(
+        id: json["id"],
+        name: json["name"],
+        industryClass: json["industry_class"] == null ? null : IndustryClass.fromJson(json["industry_class"]),
+    );
+
+    Map<String, dynamic> toJson() => {
+        "id": id,
+        "name": name,
+        "industry_class": industryClass?.toJson(),
+    };
+}
+
+class IndustryClass {
+    IndustryClass({
+        this.id,
+        this.name,
+        this.description,
+    });
+
+    final int? id;
+    final String? name;
+    final dynamic description;
+
+    factory IndustryClass.fromJson(Map<String, dynamic> json) => IndustryClass(
+        id: json["id"],
+        name: json["name"],
+        description: json["description"],
+    );
+
+    Map<String, dynamic> toJson() => {
+        "id": id,
+        "name": name,
+        "description": description,
+    };
+}
+
+class Position {
+    Position({
+        this.id,
+        this.title,
+    });
+
+    final int? id;
+    final String? title;
+
+    factory Position.fromJson(Map<String, dynamic> json) => Position(
+        id: json["id"],
+        title: json["title"],
+    );
+
+    Map<String, dynamic> toJson() => {
+        "id": id,
+        "title": title,
+    };
+}
diff --git a/lib/screens/profile/profile.dart b/lib/screens/profile/profile.dart
index 8cea220..32c9216 100644
--- a/lib/screens/profile/profile.dart
+++ b/lib/screens/profile/profile.dart
@@ -18,6 +18,7 @@ import 'package:unit2/screens/profile/components/learning_and_development_screen
 import 'package:unit2/screens/profile/components/loading_screen.dart';
 import 'package:unit2/screens/profile/components/references_screen.dart';
 import 'package:unit2/screens/profile/components/work_history_screen.dart';
+import 'package:unit2/screens/profile/voluntary_works.dart';
 import 'package:unit2/theme-data.dart/colors.dart';
 import '../../bloc/user/user_bloc.dart';
 import 'components/main_menu.dart';
@@ -148,7 +149,11 @@ class _ProfileInfoState extends State<ProfileInfo> {
                                MainMenu(
                                 icon: FontAwesome5.walking,
                                 title: "Voluntary Work & Civic Services",
-                                onTap: (){},
+                                onTap: (){
+                                    Navigator.push(context, MaterialPageRoute(builder: (BuildContext context){
+                                    return VolunataryWorkScreen(voluntaryWorks: state.profileInformation.voluntaryWorks);
+                                  }));
+                                },
                               ),
                               const Divider(),
                                MainMenu(
diff --git a/lib/screens/profile/voluntary_works.dart b/lib/screens/profile/voluntary_works.dart
new file mode 100644
index 0000000..eb06273
--- /dev/null
+++ b/lib/screens/profile/voluntary_works.dart
@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/src/widgets/framework.dart';
+import 'package:flutter/src/widgets/placeholder.dart';
+import 'package:intl/intl.dart';
+import 'package:unit2/model/profile/voluntary_works.dart';
+import 'package:unit2/theme-data.dart/colors.dart';
+
+class VolunataryWorkScreen extends StatefulWidget {
+  final List<VoluntaryWork> voluntaryWorks;
+  const VolunataryWorkScreen({super.key, required this.voluntaryWorks});
+
+  @override
+  State<VolunataryWorkScreen> createState() => _VolunataryWorkScreenState();
+}
+
+class _VolunataryWorkScreenState extends State<VolunataryWorkScreen> {
+     DateFormat dteFormat2 = DateFormat.yMMMMd('en_US');
+  @override
+  Widget build(BuildContext context) {
+    return  Scaffold(
+      appBar: AppBar(title: const Text("Volunatary Work & Civic Services"),backgroundColor: primary,),
+      body: ListView.builder(
+        itemCount:widget.voluntaryWorks.length ,
+        itemBuilder: (BuildContext context, int index){
+          String position = widget.voluntaryWorks[index].position!.title!;
+          String agency = widget.voluntaryWorks[index].agency!.name!;
+           String from = dteFormat2.format(widget.voluntaryWorks[index].fromDate!);
+           String hours = widget.voluntaryWorks[index].totalHours.toString();
+      String? to = widget.voluntaryWorks[index].toDate == null? "Present" : dteFormat2.format(widget.voluntaryWorks[index].toDate!);
+          return Column(
+            children: [
+           Container(
+             decoration: BoxDecoration(
+                      color: Colors.grey[200],
+                      borderRadius: const BorderRadius.all(Radius.circular(12))),
+              padding: const EdgeInsets.symmetric(horizontal: 12,vertical: 8),
+            child: Row(
+              children: [
+                Expanded(
+                  child: Column(
+                     mainAxisAlignment: MainAxisAlignment.start,
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                       Text(position),
+                    Text(agency),
+                    Text("$from to $to"),
+                    Text("Worked/Involved for: $hours hours"),
+                  ]),
+                ),
+                  IconButton(onPressed: (){}, icon: const Icon(Icons.more_vert))
+              ],
+            ),
+  
+            
+           ),
+                     const SizedBox(height: 5,),
+
+            ],
+          );
+
+      }),
+    );
+  }
+}
\ No newline at end of file
diff --git a/lib/sevices/profile/profile_service.dart b/lib/sevices/profile/profile_service.dart
index 06658f9..50d098a 100644
--- a/lib/sevices/profile/profile_service.dart
+++ b/lib/sevices/profile/profile_service.dart
@@ -10,6 +10,7 @@ import 'package:unit2/model/profile/eligibility.dart';
 import 'package:unit2/model/profile/learning_development.dart';
 import 'package:unit2/model/profile/profileInfomation.dart';
 import 'package:unit2/model/profile/references.dart';
+import 'package:unit2/model/profile/voluntary_works.dart';
 import 'package:unit2/model/profile/work_history.dart';
 import 'package:unit2/utils/request.dart';
 import 'package:unit2/utils/urls.dart';
@@ -33,6 +34,7 @@ class ProfileService {
     List<Citizenship> citizenships = [];
     List<LearningDevelopement> learningsDevelopments = [];
     List<EducationalBackground> educationalBackgrounds = [];
+    List<VoluntaryWork> voluntaryWorks =[];
     Map<String, String> headers = {
       'Content-Type': 'application/json; charset=UTF-8',
       'Authorization': "Token $token"
@@ -97,6 +99,13 @@ class ProfileService {
         workExperiences.add(experience);
       });
 
+      // get all voluntary works
+    data['data']['voluntary_works'].forEach((var work){
+      VoluntaryWork vwork = VoluntaryWork.fromJson(work);
+      voluntaryWorks.add(vwork);
+    });
+
+
       BasicInfo basicInfo = BasicInfo(
           contactInformation: contactInformation,
           primaryInformation: primaryInformation,
@@ -108,7 +117,9 @@ class ProfileService {
           eligibilities: eligibilities,
           references: references,
           learningsAndDevelopment: learningsDevelopments,
-          educationalBackgrounds: educationalBackgrounds);
+          educationalBackgrounds: educationalBackgrounds,
+          voluntaryWorks: voluntaryWorks
+          );
       profileInformation0 = profileInformation;
     }
     // }catch(e){