diff --git a/lib/Utils/api_urls.dart b/lib/Utils/api_urls.dart
index c73a34b..102c602 100644
--- a/lib/Utils/api_urls.dart
+++ b/lib/Utils/api_urls.dart
@@ -4,7 +4,7 @@ class ApiUrls {
   static const String pieBase = "https://app.piadvisors.in/";
 
   //Base URL
-  static const base = "http://192.168.50.82/Trader_circuit/api/";
+  static const base = "http://192.168.50.112/Trader_circuit/api/";
 
   //send otp
   static String sendOtp = "${base}sendOTP";
@@ -30,4 +30,9 @@ class ApiUrls {
   //RISK PROFILE API
   static String getRiskProfileQuestionAnswerApi = "${base}riskProfileQueAns";
   static String addRiskProfileQuestionAnswerApi = "${base}addUserRiskProfile";
+
+  //CONTENT BYTES API
+  static String getContentBytesCategoriesApi =
+      "${base}getContentByteCategories";
+  static String getContentBytesApi = "${base}getContentBytes";
 }
diff --git a/lib/controller/content_bytes_controller.dart b/lib/controller/content_bytes_controller.dart
new file mode 100644
index 0000000..7fa544c
--- /dev/null
+++ b/lib/controller/content_bytes_controller.dart
@@ -0,0 +1,11 @@
+import 'package:get/get.dart';
+import 'package:traderscircuit/model/ContentBytesModel/content_bytes_categories_model.dart';
+import 'package:traderscircuit/model/ContentBytesModel/content_bytes_model.dart';
+
+class ContentBytesController extends GetxController {
+  ContentBytesCategoriesModel contentBytesCategoriesModel =
+      ContentBytesCategoriesModel();
+  ContentBytesModel contentBytesModel = ContentBytesModel();
+  int filterId = 0;
+  RxBool isApiCalling = true.obs;
+}
diff --git a/lib/model/ContentBytesModel/content_bytes_categories_model.dart b/lib/model/ContentBytesModel/content_bytes_categories_model.dart
new file mode 100644
index 0000000..885faef
--- /dev/null
+++ b/lib/model/ContentBytesModel/content_bytes_categories_model.dart
@@ -0,0 +1,83 @@
+class ContentBytesCategoriesModel {
+  String? status;
+  int? statusCode;
+  String? message;
+  List<Data>? data;
+
+  ContentBytesCategoriesModel(
+      {this.status, this.statusCode, this.message, this.data});
+
+  ContentBytesCategoriesModel.fromJson(Map<String, dynamic> json) {
+    status = json['status'];
+    statusCode = json['status_code'];
+    message = json['message'];
+    if (json['data'] != null) {
+      data = <Data>[];
+      json['data'].forEach((v) {
+        data!.add(Data.fromJson(v));
+      });
+    }
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = <String, dynamic>{};
+    data['status'] = status;
+    data['status_code'] = statusCode;
+    data['message'] = message;
+    if (this.data != null) {
+      data['data'] = this.data!.map((v) => v.toJson()).toList();
+    }
+    return data;
+  }
+}
+
+class Data {
+  int? id;
+  String? contentType;
+  String? title;
+  String? description;
+  String? tags;
+  String? file;
+  int? categoryId;
+  String? image;
+  String? isActive;
+
+  Data({
+    this.id,
+    this.contentType,
+    this.title,
+    this.description,
+    this.tags,
+    this.file,
+    this.categoryId,
+    this.image,
+    this.isActive,
+  });
+
+  Data.fromJson(Map<String, dynamic> json) {
+    id = json['id'];
+    contentType = json['content_type'];
+    title = json['title'];
+    description = json['description'];
+    tags = json['tags'];
+    file = json['file'];
+    categoryId = json['category_id'];
+    image = json['image'];
+    isActive = json['is_active'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = <String, dynamic>{};
+    data['id'] = id;
+    data['content_type'] = contentType;
+    data['title'] = title;
+    data['description'] = description;
+    data['tags'] = tags;
+    data['file'] = file;
+    data['category_id'] = categoryId;
+    data['image'] = image;
+    data['is_active'] = isActive;
+
+    return data;
+  }
+}
diff --git a/lib/model/ContentBytesModel/content_bytes_model.dart b/lib/model/ContentBytesModel/content_bytes_model.dart
new file mode 100644
index 0000000..22a9d20
--- /dev/null
+++ b/lib/model/ContentBytesModel/content_bytes_model.dart
@@ -0,0 +1,222 @@
+class ContentBytesModel {
+  String? status;
+  int? statusCode;
+  String? message;
+  Data? data;
+
+  ContentBytesModel({this.status, this.statusCode, this.message, this.data});
+
+  ContentBytesModel.fromJson(Map<String, dynamic> json) {
+    status = json['status'];
+    statusCode = json['status_code'];
+    message = json['message'];
+    data = json['data'] != null ? Data.fromJson(json['data']) : null;
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = <String, dynamic>{};
+    data['status'] = status;
+    data['status_code'] = statusCode;
+    data['message'] = message;
+    if (this.data != null) {
+      data['data'] = this.data!.toJson();
+    }
+    return data;
+  }
+}
+
+class Data {
+  List<Video>? video;
+  List<Audio>? audio;
+  List<Read>? read;
+
+  Data({this.video, this.audio, this.read});
+
+  Data.fromJson(Map<String, dynamic> json) {
+    if (json['video'] != null) {
+      video = <Video>[];
+      json['video'].forEach((v) {
+        video!.add(Video.fromJson(v));
+      });
+    }
+    if (json['audio'] != null) {
+      audio = <Audio>[];
+      json['audio'].forEach((v) {
+        audio!.add(Audio.fromJson(v));
+      });
+    }
+    if (json['read'] != null) {
+      read = <Read>[];
+      json['read'].forEach((v) {
+        read!.add(Read.fromJson(v));
+      });
+    }
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = <String, dynamic>{};
+    if (video != null) {
+      data['video'] = video!.map((v) => v.toJson()).toList();
+    }
+    if (audio != null) {
+      data['audio'] = audio!.map((v) => v.toJson()).toList();
+    }
+    if (read != null) {
+      data['read'] = read!.map((v) => v.toJson()).toList();
+    }
+    return data;
+  }
+}
+
+class Video {
+  int? id;
+  String? contentType;
+  String? title;
+  String? description;
+  String? tags;
+  String? file;
+  int? categoryId;
+  String? image;
+  String? isActive;
+
+  Video({
+    this.id,
+    this.contentType,
+    this.title,
+    this.description,
+    this.tags,
+    this.file,
+    this.categoryId,
+    this.image,
+    this.isActive,
+  });
+
+  Video.fromJson(Map<String, dynamic> json) {
+    id = json['id'];
+    contentType = json['content_type'];
+    title = json['title'];
+    description = json['description'];
+    tags = json['tags'];
+    file = json['file'];
+    categoryId = json['category_id'];
+    image = json['image'];
+    isActive = json['is_active'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = <String, dynamic>{};
+    data['id'] = id;
+    data['content_type'] = contentType;
+    data['title'] = title;
+    data['description'] = description;
+    data['tags'] = tags;
+    data['file'] = file;
+    data['category_id'] = categoryId;
+    data['image'] = image;
+    data['is_active'] = isActive;
+
+    return data;
+  }
+}
+
+class Audio {
+  int? id;
+  String? contentType;
+  String? title;
+  String? description;
+  String? tags;
+  String? file;
+  int? categoryId;
+  String? image;
+  String? isActive;
+
+  Audio({
+    this.id,
+    this.contentType,
+    this.title,
+    this.description,
+    this.tags,
+    this.file,
+    this.categoryId,
+    this.image,
+    this.isActive,
+  });
+
+  Audio.fromJson(Map<String, dynamic> json) {
+    id = json['id'];
+    contentType = json['content_type'];
+    title = json['title'];
+    description = json['description'];
+    tags = json['tags'];
+    file = json['file'];
+    categoryId = json['category_id'];
+    image = json['image'];
+    isActive = json['is_active'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = <String, dynamic>{};
+    data['id'] = id;
+    data['content_type'] = contentType;
+    data['title'] = title;
+    data['description'] = description;
+    data['tags'] = tags;
+    data['file'] = file;
+    data['category_id'] = categoryId;
+    data['image'] = image;
+    data['is_active'] = isActive;
+
+    return data;
+  }
+}
+
+class Read {
+  int? id;
+  String? contentType;
+  String? title;
+  String? description;
+  String? tags;
+  String? file;
+  int? categoryId;
+  String? image;
+  String? isActive;
+
+  Read({
+    this.id,
+    this.contentType,
+    this.title,
+    this.description,
+    this.tags,
+    this.file,
+    this.categoryId,
+    this.image,
+    this.isActive,
+  });
+
+  Read.fromJson(Map<String, dynamic> json) {
+    id = json['id'];
+    contentType = json['content_type'];
+    title = json['title'];
+    description = json['description'];
+    tags = json['tags'];
+    file = json['file'];
+    categoryId = json['category_id'];
+    image = json['image'];
+    isActive = json['is_active'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = <String, dynamic>{};
+    data['id'] = id;
+    data['content_type'] = contentType;
+    data['title'] = title;
+    data['description'] = description;
+    data['tags'] = tags;
+    data['file'] = file;
+    data['category_id'] = categoryId;
+    data['image'] = image;
+    data['is_active'] = isActive;
+
+    return data;
+  }
+}
diff --git a/lib/view/Sidemenu/ContentByte/ContentBytes.dart b/lib/view/Sidemenu/ContentByte/ContentBytes.dart
index 21185a9..32bcf70 100644
--- a/lib/view/Sidemenu/ContentByte/ContentBytes.dart
+++ b/lib/view/Sidemenu/ContentByte/ContentBytes.dart
@@ -1,16 +1,23 @@
+import 'dart:developer';
+
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:gap/gap.dart';
 import 'package:get/get.dart';
 import 'package:traderscircuit/Utils/Common/CommonAppbar.dart';
 import 'package:traderscircuit/Utils/Common/CustomTextFormField.dart';
 import 'package:traderscircuit/Utils/Common/comonGlassmorphicContainer.dart';
 import 'package:traderscircuit/Utils/Common/sized_box.dart';
 import 'package:traderscircuit/Utils/text.dart';
+import 'package:traderscircuit/controller/content_bytes_controller.dart';
+import 'package:traderscircuit/model/ContentBytesModel/content_bytes_categories_model.dart';
+import 'package:traderscircuit/model/ContentBytesModel/content_bytes_model.dart';
 import 'package:traderscircuit/view/Sidemenu/ContentByte/PlayerWidget.dart';
 import 'package:traderscircuit/view/Sidemenu/ContentByte/Reels.dart';
-import 'package:traderscircuit/view/Sidemenu/Sidemenu.dart';
 import 'package:traderscircuit/view/onBoarding/splashScreen1.dart';
+import 'package:traderscircuit/view_model/ContentBytesApi/content_bytes_api.dart';
 
 class ContentBytes extends StatefulWidget {
   const ContentBytes({super.key});
@@ -65,24 +72,42 @@ class _ContentBytesState extends State<ContentBytes> {
     "Week of 21st March 2024",
     "Week of 21st March 2024",
   ];
+
+  ContentBytesController contentBytesController =
+      Get.put(ContentBytesController());
+  @override
+  void initState() {
+    ContentBytesApi().getContentBytesCategoriesData().then((value) {
+      contentBytesController.contentBytesCategoriesModel =
+          ContentBytesCategoriesModel.fromJson(value.data);
+    });
+    ContentBytesApi().getContentBytesData("").then((value) {
+      contentBytesController.contentBytesModel =
+          ContentBytesModel.fromJson(value.data);
+      contentBytesController.isApiCalling.value = false;
+    });
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       key: _scaffoldKey1,
       backgroundColor: Colors.black,
       extendBody: true,
-      appBar: CommonAppbar(titleTxt: "Content Bytes"),
+      appBar: const CommonAppbar(titleTxt: "Content Bytes"),
       body: Stack(
         children: [
-          CommonBlurLeft(),
-          CommonBlurRight(),
+          const CommonBlurLeft(),
+          const CommonBlurRight(),
           Stack(
             children: [
               Padding(
-                padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
+                padding:
+                    const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
                 child: ListView(
                   children: [
-                    SizedBox(
+                    const SizedBox(
                       height: 10,
                     ),
                     DefaultTabController(
@@ -139,7 +164,7 @@ class Reads extends StatelessWidget {
         children: [
           Row(
             children: [
-              SizedBox(
+              const SizedBox(
                 width: 300,
                 child: CustomTextFormField(
                   leadingIcon: Icon(Icons.search),
@@ -168,13 +193,13 @@ class Reads extends StatelessWidget {
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               crossAxisAlignment: CrossAxisAlignment.end,
               children: [
-                SizedBox(
+                const SizedBox(
                   width: 10,
                 ),
                 Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
-                    Spacer(),
+                    const Spacer(),
                     SizedBox(
                       width: 235.w,
                       child: text20W400('"Stock Market Essentials"'),
@@ -185,10 +210,10 @@ class Reads extends StatelessWidget {
                       child: text16W400(
                           'A Comprehensive Guide to Understanding the Market'),
                     ),
-                    Spacer()
+                    const Spacer()
                   ],
                 ),
-                SizedBox(
+                const SizedBox(
                   width: 20,
                 ),
                 Column(
@@ -213,13 +238,13 @@ class Reads extends StatelessWidget {
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               crossAxisAlignment: CrossAxisAlignment.end,
               children: [
-                SizedBox(
+                const SizedBox(
                   width: 10,
                 ),
                 Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
-                    Spacer(),
+                    const Spacer(),
                     SizedBox(
                       width: 235.w,
                       child: text20W400('"Stock Market Essentials"'),
@@ -230,10 +255,10 @@ class Reads extends StatelessWidget {
                       child: text16W400(
                           'A Comprehensive Guide to Understanding the Market'),
                     ),
-                    Spacer()
+                    const Spacer()
                   ],
                 ),
-                SizedBox(
+                const SizedBox(
                   width: 20,
                 ),
                 Column(
@@ -275,7 +300,7 @@ class Reads extends StatelessWidget {
                           end: Alignment.bottomRight,
                           colors: [
                             Colors.white.withOpacity(0.1),
-                            Color(0xFFFFFFFF).withOpacity(0.05),
+                            const Color(0xFFFFFFFF).withOpacity(0.05),
                           ],
                           stops: [
                             0.1,
@@ -317,7 +342,7 @@ class Reads extends StatelessWidget {
                           end: Alignment.bottomRight,
                           colors: [
                             Colors.white.withOpacity(0.1),
-                            Color(0xFFFFFFFF).withOpacity(0.05),
+                            const Color(0xFFFFFFFF).withOpacity(0.05),
                           ],
                           stops: [
                             0.1,
@@ -330,7 +355,7 @@ class Reads extends StatelessWidget {
                         // mainAxisAlignment:
                         //     MainAxisAlignment.start,
                         children: [
-                          SizedBox(
+                          const SizedBox(
                             width: 10,
                           ),
                           Image.asset(mostread[index]),
@@ -388,7 +413,7 @@ class Audios extends StatelessWidget {
         children: [
           Row(
             children: [
-              SizedBox(
+              const SizedBox(
                 width: 300,
                 child: CustomTextFormField(
                   leadingIcon: Icon(Icons.search),
@@ -414,8 +439,8 @@ class Audios extends StatelessWidget {
           Container(
             height: 550,
             child: GridView.builder(
-              physics: NeverScrollableScrollPhysics(),
-              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+              physics: const NeverScrollableScrollPhysics(),
+              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                 mainAxisExtent: 172,
                 crossAxisCount: 2, // number of items in each row
                 mainAxisSpacing: 8.0, // spacing between rows
@@ -431,7 +456,7 @@ class Audios extends StatelessWidget {
                       end: Alignment.bottomRight,
                       colors: [
                         Colors.white.withOpacity(0.1),
-                        Color(0xFFFFFFFF).withOpacity(0.05),
+                        const Color(0xFFFFFFFF).withOpacity(0.05),
                       ],
                       stops: [
                         0.1,
@@ -452,7 +477,7 @@ class Audios extends StatelessWidget {
                           children: [
                             CircleAvatar(
                               radius: 18.sp,
-                              child: Icon(Icons.headphones),
+                              child: const Icon(Icons.headphones),
                             ),
                             SizedBox(
                               width: 5.w,
@@ -481,7 +506,7 @@ class Audios extends StatelessWidget {
             height: 250.h,
             child: ListView.separated(
               separatorBuilder: (context, index) {
-                return SizedBox(
+                return const SizedBox(
                   width: 10,
                 );
               },
@@ -500,7 +525,7 @@ class Audios extends StatelessWidget {
                           end: Alignment.bottomRight,
                           colors: [
                             Colors.white.withOpacity(0.1),
-                            Color(0xFFFFFFFF).withOpacity(0.05),
+                            const Color(0xFFFFFFFF).withOpacity(0.05),
                           ],
                           stops: [
                             0.1,
@@ -512,7 +537,7 @@ class Audios extends StatelessWidget {
                       child: Stack(
                         children: [
                           Image.asset(audionewimage[index]),
-                          Positioned(
+                          const Positioned(
                             right: 5,
                             top: 5,
                             child: CircleAvatar(
@@ -526,7 +551,7 @@ class Audios extends StatelessWidget {
                         ],
                       ),
                     ),
-                    SizedBox(
+                    const SizedBox(
                       height: 10,
                     ),
                     Row(
@@ -549,7 +574,7 @@ class Audios extends StatelessWidget {
   }
 }
 
-class Videos extends StatelessWidget {
+class Videos extends StatefulWidget {
   const Videos({
     super.key,
     required this.images,
@@ -558,243 +583,301 @@ class Videos extends StatelessWidget {
   final List<String> images;
 
   @override
-  Widget build(BuildContext context) {
-    return SingleChildScrollView(
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Row(
+  State<Videos> createState() => _VideosState();
+}
+
+class _VideosState extends State<Videos> {
+  ContentBytesController contentBytesController =
+      Get.put(ContentBytesController());
+
+  Widget itemFilter(int index) {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        const Gap(8),
+        text18W400(
+          contentBytesController
+              .contentBytesCategoriesModel.data![index].title!,
+          texAl: TextAlign.center,
+        ),
+        index ==
+                contentBytesController
+                        .contentBytesCategoriesModel.data!.length -
+                    1
+            ? const SizedBox()
+            : const Divider(
+                color: Color(0xFF2C2C2C),
+                thickness: 0.6,
+                endIndent: 0,
+              ),
+      ],
+    );
+  }
+
+  Widget filter() {
+    return PopupMenuButton(
+      icon: Image.asset(
+        "assets/images/png/filter.png",
+        height: 30.h,
+        width: 30.w,
+      ),
+      color: const Color(0xFF191919),
+      itemBuilder: (context) {
+        return [
+          PopupMenuItem(
+              child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.center,
             children: [
               SizedBox(
-                width: 300,
-                child: CustomTextFormField(
-                  leadingIcon: Icon(Icons.search),
-                ),
-              ),
-              SizedBox(
-                width: 15.w,
-              ),
-              Image.asset(
-                "assets/images/png/filter.png",
-                height: 30.h,
-                width: 30.w,
-              ),
-            ],
-          ),
-          SizedBox(
-            height: 10.h,
-          ),
-          text22W600('Content Bytes'),
-          sizedBoxHeight(8.w),
-          text16W400_DADADA('The Beauty and Power of Video'),
-          sizedBoxHeight(20.h),
-          InkWell(
-            onTap: () {
-              Get.to(() => PlayerWidget());
-            },
-            child: commonGlassContainer(
-                borderradius: 8,
-                width: double.infinity,
-                height: 300.h,
-                customWidget: Padding(
-                  padding:
-                      EdgeInsets.symmetric(vertical: 10.h, horizontal: 10.w),
-                  child: Column(
-                    children: [
-                      Container(
-                        height: 200.h,
-                        width: double.infinity,
-                        decoration: BoxDecoration(
-                            borderRadius: BorderRadius.circular(8.r),
-                            image: DecorationImage(
-                                image: AssetImage(
-                                    'assets/images/png/Rectangle 17934.png'))),
-                        child: Center(
-                          child: SvgPicture.asset(
-                            'assets/images/svg/gridicons_play.svg',
-                            height: 56.h,
-                            width: 56.w,
-                          ),
-                        ),
-                      ),
-                      sizedBoxHeight(20.h),
-                      Row(
-                        children: [
-                          CircleAvatar(
-                            radius: 23.r,
-                            backgroundImage: AssetImage(
-                                'assets/images/png/Ellipse 1494.png'),
-                          ),
-                          sizedBoxWidth(10.w),
-                          Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              text18W500('Week of 21st February 2024'),
-                              // sizedBoxHeight(10.h),
-                              text12W400_979797('20k views . 2 days ago'),
-                            ],
-                          )
-                        ],
-                      )
-                    ],
-                  ),
-                )),
-          ),
-          sizedBoxHeight(20.h),
-          InkWell(
-            onTap: () {
-              Get.to(() {
-                PlayerWidget();
-              });
-            },
-            child: commonGlassContainer(
-                borderradius: 8,
-                width: double.infinity,
-                height: 300.h,
-                customWidget: Padding(
-                  padding:
-                      EdgeInsets.symmetric(vertical: 10.h, horizontal: 10.w),
-                  child: Column(
-                    children: [
-                      Container(
-                        height: 200.h,
-                        width: double.infinity,
-                        decoration: BoxDecoration(
-                            borderRadius: BorderRadius.circular(8.r),
-                            image: DecorationImage(
-                                image: AssetImage(
-                                    'assets/images/png/Rectangle 17934.png'))),
-                        child: Center(
-                          child: SvgPicture.asset(
-                            'assets/images/svg/gridicons_play.svg',
-                            height: 56.h,
-                            width: 56.w,
-                          ),
-                        ),
-                      ),
-                      sizedBoxHeight(20.h),
-                      Row(
-                        children: [
-                          CircleAvatar(
-                            radius: 23.r,
-                            backgroundImage: AssetImage(
-                                'assets/images/png/Ellipse 1494.png'),
-                          ),
-                          sizedBoxWidth(10.w),
-                          Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              text18W500('Week of 21st February 2024'),
-                              // sizedBoxHeight(10.h),
-                              text12W400_979797('20k views . 2 days ago'),
-                            ],
-                          )
-                        ],
-                      )
-                    ],
-                  ),
-                )),
-          ),
-          sizedBoxHeight(15.h),
-          text22W600("Reels"),
-          sizedBoxHeight(25.h),
-          Container(
-            height: 500,
-            child: GridView.builder(
-              physics: NeverScrollableScrollPhysics(),
-              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-                mainAxisExtent: 215,
-                crossAxisCount: 2, // number of items in each row
-                mainAxisSpacing: 8.0, // spacing between rows
-                crossAxisSpacing: 8.0, // spacing between columns
-              ),
+                height: (Get.height *
+                        contentBytesController
+                            .contentBytesCategoriesModel.data!.length) /
+                    17,
+                width: 150,
+                child: ListView.builder(
+                    padding: EdgeInsets.zero,
+                    shrinkWrap: true,
+                    itemCount: contentBytesController
+                        .contentBytesCategoriesModel.data!.length,
+                    itemBuilder: (ctx, index) {
+                      return InkWell(
+                          onTap: () {
+                            //     contentBytesController.isApiCalling.value = true;
+                            Get.back();
+                            contentBytesController.filterId =
+                                contentBytesController
+                                    .contentBytesCategoriesModel
+                                    .data![index]
+                                    .categoryId!;
 
-              itemCount: 4, // total number of items
-              itemBuilder: (context, index) {
-                return InkWell(
-                  onTap: () {
-                    Get.to(
-                      () => Reels(),
-                    );
-                  },
-                  child: Container(
-                    decoration: BoxDecoration(
-                      gradient: LinearGradient(
-                        begin: Alignment.topLeft,
-                        end: Alignment.bottomRight,
-                        colors: [
-                          Colors.white.withOpacity(0.1),
-                          Color(0xFFFFFFFF).withOpacity(0.05),
-                        ],
-                        stops: [
-                          0.1,
-                          1,
-                        ],
-                      ),
-                      borderRadius: BorderRadius.circular(8),
+                            log(contentBytesController.filterId.toString());
+                          },
+                          child: itemFilter(index));
+                    }),
+              ),
+              // GestureDetector(
+              //     onTap: () async {
+              //       //  contentBytesController.isApiCalling.value = true;
+              //       Get.back();
+              //       // await InventoriesApi()
+              //       //     .getInventoriesData(
+              //       //         searchController.text,
+              //       //         filterList,
+              //       //         inventoriesController.fromWarehouse
+              //       //             ? inventoriesController.wareHouseId
+              //       //             : 0)
+              //       //     .then((value) async {
+              //       //   inventoriesController.inventoriesDataModel.value =
+              //       //       InventoriesDataModel.fromJson(value.data);
+
+              //       //   inventoriesController.isApiCalling.value = false;
+              //       // });
+              //     },
+              //     child: Container(
+              //       padding:
+              //           EdgeInsets.symmetric(horizontal: 30.w, vertical: 10.h),
+              //       margin:
+              //           EdgeInsets.symmetric(horizontal: 30.w, vertical: 25.h),
+              //       decoration: BoxDecoration(
+              //           color: AppColors.buttoncolour,
+              //           borderRadius: BorderRadius.circular(20)),
+              //       child: Center(child: textWhite16('Apply Now')),
+              //     ))
+            ],
+          ))
+        ];
+      },
+    );
+  }
+
+  Widget videoCard(Video video) {
+    return InkWell(
+      onTap: () {
+        Get.to(() => PlayerWidget(), arguments: {
+          "video_url": video.file,
+        });
+      },
+      child: commonGlassContainer(
+          borderradius: 8,
+          width: double.infinity,
+          height: 300.h,
+          customWidget: Padding(
+            padding: EdgeInsets.symmetric(vertical: 10.h, horizontal: 10.w),
+            child: Column(
+              children: [
+                Container(
+                  height: 200.h,
+                  width: double.infinity,
+                  decoration: BoxDecoration(
+                      borderRadius: BorderRadius.circular(8.r),
+                      image: DecorationImage(
+                          image: NetworkImage(
+                        video.image!,
+                      ))),
+                  child: Center(
+                    child: SvgPicture.asset(
+                      'assets/images/svg/gridicons_play.svg',
+                      height: 56.h,
+                      width: 56.w,
                     ),
-                    child: Image.asset(images[index]),
                   ),
-                );
-              },
+                ),
+                sizedBoxHeight(20.h),
+                Row(
+                  children: [
+                    CircleAvatar(
+                      radius: 23.r,
+                      backgroundImage: const AssetImage(
+                          'assets/images/png/Ellipse 1494.png'),
+                    ),
+                    sizedBoxWidth(10.w),
+                    Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        text18W500(video.title!),
+                        // sizedBoxHeight(10.h),
+                        text12W400_979797('20k views . 2 days ago'),
+                      ],
+                    )
+                  ],
+                )
+              ],
             ),
-          ),
-          sizedBoxHeight(20.h),
-          InkWell(
-            onTap: () {
-              Get.to(() {
-                PlayerWidget();
-              });
-            },
-            child: commonGlassContainer(
-                borderradius: 8,
-                width: double.infinity,
-                height: 300.h,
-                customWidget: Padding(
-                  padding:
-                      EdgeInsets.symmetric(vertical: 10.h, horizontal: 10.w),
-                  child: Column(
+          )),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Obx(
+      () => SingleChildScrollView(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              children: [
+                const SizedBox(
+                  width: 295,
+                  child: CustomTextFormField(
+                    leadingIcon: Icon(Icons.search),
+                  ),
+                ),
+                SizedBox(
+                  width: 15.w,
+                ),
+                filter(),
+              ],
+            ),
+            SizedBox(
+              height: 10.h,
+            ),
+            text22W600('Content Bytes'),
+            sizedBoxHeight(8.w),
+            text16W400_DADADA('The Beauty and Power of Video'),
+            sizedBoxHeight(20.h),
+            contentBytesController.isApiCalling.value
+                ? const Column(
                     children: [
-                      Container(
-                        height: 200.h,
-                        width: double.infinity,
-                        decoration: BoxDecoration(
-                            borderRadius: BorderRadius.circular(8.r),
-                            image: DecorationImage(
-                                image: AssetImage(
-                                    'assets/images/png/Rectangle 17934.png'))),
-                        child: Center(
-                          child: SvgPicture.asset(
-                            'assets/images/svg/gridicons_play.svg',
-                            height: 56.h,
-                            width: 56.w,
-                          ),
+                      Gap(50),
+                      Center(
+                        child: CircularProgressIndicator(
+                          color: Color(0xFF9A0000),
                         ),
                       ),
-                      sizedBoxHeight(20.h),
-                      Row(
-                        children: [
-                          CircleAvatar(
-                            radius: 23.r,
-                            backgroundImage: AssetImage(
-                                'assets/images/png/Ellipse 1494.png'),
+                    ],
+                  )
+                : Column(
+                    children: [
+                      contentBytesController
+                                  .contentBytesModel.data!.video!.length <
+                              1
+                          ? const SizedBox()
+                          : videoCard(contentBytesController
+                              .contentBytesModel.data!.video![0]),
+                      contentBytesController
+                                  .contentBytesModel.data!.video!.length <=
+                              1
+                          ? const SizedBox()
+                          : sizedBoxHeight(20.h),
+                      contentBytesController
+                                  .contentBytesModel.data!.video!.length <
+                              2
+                          ? const SizedBox()
+                          : videoCard(contentBytesController
+                              .contentBytesModel.data!.video![1]),
+                      sizedBoxHeight(15.h),
+                      text22W600("Reels"),
+                      sizedBoxHeight(25.h),
+                      Container(
+                        height: 500,
+                        child: GridView.builder(
+                          physics: const NeverScrollableScrollPhysics(),
+                          gridDelegate:
+                              const SliverGridDelegateWithFixedCrossAxisCount(
+                            mainAxisExtent: 215,
+                            crossAxisCount: 2, // number of items in each row
+                            mainAxisSpacing: 8.0, // spacing between rows
+                            crossAxisSpacing: 8.0, // spacing between columns
                           ),
-                          sizedBoxWidth(10.w),
-                          Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              text18W500('Week of 21st February 2024'),
-                              // sizedBoxHeight(10.h),
-                              text12W400_979797('20k views . 2 days ago'),
-                            ],
-                          )
-                        ],
-                      )
+
+                          itemCount: 4, // total number of items
+                          itemBuilder: (context, index) {
+                            return InkWell(
+                              onTap: () {
+                                Get.to(
+                                  () => const Reels(),
+                                );
+                              },
+                              child: Container(
+                                decoration: BoxDecoration(
+                                  gradient: LinearGradient(
+                                    begin: Alignment.topLeft,
+                                    end: Alignment.bottomRight,
+                                    colors: [
+                                      Colors.white.withOpacity(0.1),
+                                      const Color(0xFFFFFFFF).withOpacity(0.05),
+                                    ],
+                                    stops: [
+                                      0.1,
+                                      1,
+                                    ],
+                                  ),
+                                  borderRadius: BorderRadius.circular(8),
+                                ),
+                                child: Image.asset(widget.images[index]),
+                              ),
+                            );
+                          },
+                        ),
+                      ),
+                      //  sizedBoxHeight(10.h),
+                      contentBytesController
+                                  .contentBytesModel.data!.video!.length <
+                              3
+                          ? const SizedBox()
+                          : ListView.builder(
+                              physics: NeverScrollableScrollPhysics(),
+                              itemCount: contentBytesController
+                                      .contentBytesModel.data!.video!.length -
+                                  2,
+                              shrinkWrap: true,
+                              itemBuilder: (ctx, index) {
+                                return Container(
+                                  margin: EdgeInsets.only(
+                                    bottom: 20,
+                                  ),
+                                  child: videoCard(contentBytesController
+                                      .contentBytesModel
+                                      .data!
+                                      .video![index + 2]),
+                                );
+                              })
                     ],
                   ),
-                )),
-          ),
-        ],
+          ],
+        ),
       ),
     );
   }
diff --git a/lib/view/Sidemenu/ContentByte/PlayerWidget.dart b/lib/view/Sidemenu/ContentByte/PlayerWidget.dart
index f5d8d59..6ff9eda 100644
--- a/lib/view/Sidemenu/ContentByte/PlayerWidget.dart
+++ b/lib/view/Sidemenu/ContentByte/PlayerWidget.dart
@@ -13,30 +13,22 @@ class PlayerWidget extends StatefulWidget {
 class _PlayerWidgetState extends State<PlayerWidget> {
   late VideoPlayerController videoPlayerController;
   late ChewieController chewieController;
-
+  var videoUrl = Get.arguments["video_url"];
   @override
   void initState() {
-    // TODO: implement initState
-    super.initState();
     _initializePlayer();
+    super.initState();
   }
 
-  // _initializePlayer() async {
-  //   videoPlayerController = VideoPlayerController.networkUrl(Uri.parse(
-  //       "https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4"));
-
-  //   await videoPlayerController.initialize();
-  //   initChewie();
-  // }
-
   _initializePlayer() async {
     try {
-      videoPlayerController = VideoPlayerController.network(
-        "https://assets.mixkit.co/videos/preview/mixkit-spinning-around-the-earth-29351-large.mp4",
+      videoPlayerController = VideoPlayerController.networkUrl(
+        Uri.parse(videoUrl),
       );
 
       await videoPlayerController.initialize();
       initChewie();
+      setState(() {});
     } catch (e) {
       print("Error initializing video player: $e");
     }
diff --git a/lib/view/login/VerifyOtp.dart b/lib/view/login/VerifyOtp.dart
index b697264..a07e3ba 100644
--- a/lib/view/login/VerifyOtp.dart
+++ b/lib/view/login/VerifyOtp.dart
@@ -41,10 +41,12 @@ class _VerifyOTPState extends State<VerifyOTP> {
   _verifycheck() async {
     final isValid = _otpform.currentState?.validate();
     if (isValid!) {
+      SharedPreferences prefs = await SharedPreferences.getInstance();
       Utils.loader();
       Map<String, String> updata = {
         "mobile_number": phonenumber.toString(),
         "otp": pincode.text,
+        "playerId": prefs.getString("playerId")!,
       };
       final resp = await VerifyNumberAPI(updata).verifynumberApi();
       if (resp.status == ResponseStatus.SUCCESS) {
diff --git a/lib/view_model/ContentBytesApi/content_bytes_api.dart b/lib/view_model/ContentBytesApi/content_bytes_api.dart
new file mode 100644
index 0000000..333a611
--- /dev/null
+++ b/lib/view_model/ContentBytesApi/content_bytes_api.dart
@@ -0,0 +1,45 @@
+import 'dart:developer';
+
+import 'package:dio/dio.dart';
+
+import '../../Utils/api_urls.dart';
+import '../../Utils/base_manager.dart';
+import '../../data/network/network_api_services.dart';
+
+class ContentBytesApi {
+  Future<ResponseData<dynamic>> getContentBytesCategoriesData() async {
+    final response = await NetworkApiServices()
+        .getApi(ApiUrls.getContentBytesCategoriesApi, isAuth: true);
+    log(response.data.toString());
+    if (response.status == ResponseStatus.SUCCESS) {
+      Map<String, dynamic> responseData =
+          Map<String, dynamic>.from(response.data);
+      if (responseData['status'] == "success") {
+        return response;
+      } else {
+        return ResponseData<dynamic>(
+            responseData['message'], ResponseStatus.FAILED);
+      }
+    }
+    return response;
+  }
+
+  Future<ResponseData<dynamic>> getContentBytesData(dynamic data) async {
+    final response = await NetworkApiServices().postApi(
+      data,
+      ApiUrls.getContentBytesApi,
+    );
+    log(response.data.toString());
+    if (response.status == ResponseStatus.SUCCESS) {
+      Map<String, dynamic> responseData =
+          Map<String, dynamic>.from(response.data);
+      if (responseData['status'] == "success") {
+        return response;
+      } else {
+        return ResponseData<dynamic>(
+            responseData['message'], ResponseStatus.FAILED);
+      }
+    }
+    return response;
+  }
+}