diff --git a/.env b/.env
index fd1e4a8..688b25d 100644
--- a/.env
+++ b/.env
@@ -3,4 +3,10 @@ MONGO_USER=adminForever
 MONGO_PASSWORD=Pass@2025@admin
 DOCKER_MONGO_URI=mongodb://mongo/
 JWT_SECRET=your_jwt_secret
-PORT=2001
\ No newline at end of file
+PORT=2000
+# LOCAL_MONGO_URI=mongodb://192.168.0.110:27017/
+# MONGO_USER=mydata
+# MONGO_PASSWORD=mongodb@hexr2002
+# # DOCKER_MONGO_URI=mongodb://mongo/
+# JWT_SECRET=your_jwt_secret
+# PORT=2000
\ No newline at end of file
diff --git a/src/API/app.ts b/src/API/app.ts
index ceb97f3..053f531 100644
--- a/src/API/app.ts
+++ b/src/API/app.ts
@@ -1,6 +1,10 @@
 import express from "express";
 import cors from "cors";
 import zoneRouter from "../API/routes/zoneRoutes.ts";
+import panelRouter from "../API/routes/panelRoutes.ts";
+import widgetRouter from "../API/routes/widgetRoute.ts";
 const app = express();
 app.use("/api/v1", zoneRouter);
+app.use("/api/v1", panelRouter);
+app.use("/api/v1", widgetRouter);
 export default app;
diff --git a/src/API/main.ts b/src/API/main.ts
index 56cfcd6..498cc10 100644
--- a/src/API/main.ts
+++ b/src/API/main.ts
@@ -5,7 +5,7 @@ const app = express();
 app.use(express.json());
 app.use(approutes);
 app.use(cors());
-const port = 2000;
+const port = process.env.PORT || 3000;
 app.listen(port, () => {
   console.log(`Server is running in the port ${port}`);
 });
diff --git a/src/API/routes/panelRoutes.ts b/src/API/routes/panelRoutes.ts
new file mode 100644
index 0000000..e847dd8
--- /dev/null
+++ b/src/API/routes/panelRoutes.ts
@@ -0,0 +1,6 @@
+import * as express from "express";
+import { panelService } from "../service/panelService.ts";
+const router = express.Router();
+router.post("/panel/save", panelService.AddPanel);
+// router.get("/zone/:sceneID", Zoneservice.allZones);
+export default router;
diff --git a/src/API/routes/widgetRoute.ts b/src/API/routes/widgetRoute.ts
new file mode 100644
index 0000000..0632cfb
--- /dev/null
+++ b/src/API/routes/widgetRoute.ts
@@ -0,0 +1,5 @@
+import * as express from "express";
+import { widgetService } from "../service/widgetService.ts";
+const router = express.Router();
+router.post("/widget/save", widgetService.addWidget);
+export default router;
diff --git a/src/API/routes/zoneRoutes.ts b/src/API/routes/zoneRoutes.ts
index eeb14ff..1516e16 100644
--- a/src/API/routes/zoneRoutes.ts
+++ b/src/API/routes/zoneRoutes.ts
@@ -3,6 +3,8 @@ import { Zoneservice } from "../service/zoneService.ts";
 const router = express.Router();
 router.post("/zone/save", Zoneservice.addandUpdateZone); //Zone create and update for the points
 router.get("/zones/:sceneID", Zoneservice.allZones);
+router.get("/ZoneVisualization/:zoneID", Zoneservice.singleZonePanelDatas);
+router.get("/A_zone/:zoneID", Zoneservice.ZoneData);
 router.patch("/zone/:zoneID", Zoneservice.deleteAZone); //delete Zone
 // router.get("/zone/:sceneID", Zoneservice.allZones);
 export default router;
diff --git a/src/API/service/panelService.ts b/src/API/service/panelService.ts
new file mode 100644
index 0000000..78c6928
--- /dev/null
+++ b/src/API/service/panelService.ts
@@ -0,0 +1,71 @@
+import { Request, Response } from "express";
+import panelSchema from "../../shared/model/vizualization/panelmodel.ts";
+import zoneSchema from "../../shared/model/builder/lines/zone-Model.ts";
+export class panelService {
+  static async AddPanel(req: Request, res: Response): Promise<any> {
+    try {
+      const organization = req.body.organization;
+      const zoneID = req.body.zoneID;
+      const panelName = req.body.panelName;
+      const panelOrder = req.body.panelOrder;
+      const findZone = await zoneSchema(organization).findOne({
+        _id: zoneID,
+        isArchive: false,
+      });
+
+      if (!findZone) {
+        return res.status(404).json({ message: "Zone not found" });
+      }
+      const updatezone = await zoneSchema(organization).findOneAndUpdate(
+        { _id: findZone._id, isArchive: false },
+        { panelOrder: panelOrder },
+        { new: true }
+      );
+      const existingPanels = await panelSchema(organization).find({
+        zoneID: zoneID,
+        isArchive: false,
+      });
+
+      const existingPanelNames = existingPanels.map(
+        (panel: any) => panel.panelName
+      );
+
+      const missingPanels = panelOrder.filter(
+        (panelName: string) => !existingPanelNames.includes(panelName)
+      );
+
+      const createdPanels = [];
+      for (const panelName of missingPanels) {
+        const newPanel = await panelSchema(organization).create({
+          zoneID: zoneID,
+          panelName: panelName,
+          widgets: [],
+          isArchive: false,
+        });
+        createdPanels.push(newPanel);
+      }
+
+      if (createdPanels.length === 0) {
+        return res.status(200).json({
+          message: "No new panels were created. All panels already exist.",
+        });
+      }
+      const IDdata = createdPanels.map((ID: any) => {
+        return ID._id;
+      });
+      console.log("IDdata: ", IDdata);
+      return res.status(201).json({
+        message: "Panels created successfully",
+        panelID: IDdata,
+      });
+    } catch (error: any) {
+      return res.status(500).send(error.message);
+    }
+  }
+  static async deletePanel(req: Request, res: Response): Promise<any> {
+    try {
+    } catch (error: any) {
+      return res.status(500).send(error.message);
+    }
+  }
+}
diff --git a/src/API/service/widgetService.ts b/src/API/service/widgetService.ts
new file mode 100644
index 0000000..cb56f8a
--- /dev/null
+++ b/src/API/service/widgetService.ts
@@ -0,0 +1,53 @@
+import { Request, Response } from "express";
+import panelSchema from "../../shared/model/vizualization/panelmodel.ts";
+import widgetSchema from "../../shared/model/vizualization/widgemodel.ts";
+export class widgetService {
+  static async addWidget(req: Request, res: Response): Promise<any> {
+    try {
+      const {
+        organization,
+        panelID,
+        widgetName,
+        widgetOrder,
+        type,
+        widgetID,
+        panel,
+      } = req.body;
+      const existingPanel = await panelSchema(organization).findOne({
+        _id: panelID,
+        isArchive: false,
+      });
+      if (!existingPanel)
+        return res.status(404).json({ message: "PanelID not found" });
+      const existingWidget = await widgetSchema(organization).findOne({
+        panelID: panelID,
+        widgetID: widgetID,
+        isArchive: false,
+        widgetOrder: widgetOrder,
+      });
+      if (existingWidget)
+        return res
+          .status(409)
+          .json({ message: "Widget already exist for the widgetID" });
+      const newWidget = await widgetSchema(organization).create({
+        widgetID: widgetID,
+        elementType: type,
+        widgetOrder: widgetOrder,
+        widgetName: widgetName,
+        panelID: panelID,
+        widgetside: panel,
+      });
+      if (newWidget) {
+        return res.status(201).json({
+          message: "Widget created successfully",
+          widgetID: newWidget._id,
+        });
+      }
+    } catch (error: any) {
+      return res.status(500).send(error.message);
+    }
+  }
+  //   static async deleteWidget(req: Request, res: Response):Promise<any>{
+  //     const findWidget = await widgetSchema(req.body.organization).findOne({_id:req.body.widget})
+  //   }
+}
diff --git a/src/API/service/zoneService.ts b/src/API/service/zoneService.ts
index c25a52c..84fafde 100644
--- a/src/API/service/zoneService.ts
+++ b/src/API/service/zoneService.ts
@@ -1,9 +1,12 @@
 import { Request, Response } from "express";
 import zoneSchema from "../../shared/model/builder/lines/zone-Model.ts";
+import panelSchema from "../../shared/model/vizualization/panelmodel.ts";
+import widgetSchema from "../../shared/model/vizualization/widgemodel.ts";
 export class Zoneservice {
   static async addandUpdateZone(req: Request, res: Response): Promise<any> {
     const organization = req.body.organization;
     const zoneDatas = req.body.zonesdata;
+
     try {
       const existingZone = await zoneSchema(organization).findOne({
         zoneUUID: zoneDatas.zoneId,
@@ -17,7 +20,7 @@ export class Zoneservice {
           centerPoints: zoneDatas.viewportPosition,
           createdBy: zoneDatas.userid,
           layer: zoneDatas.layer,
-          sceneID: zoneDatas.sceneID || "scene123",
+          sceneID: zoneDatas.sceneID,
         });
         if (newZone)
           return res.status(200).json({
@@ -82,47 +85,57 @@ export class Zoneservice {
     }
   }
 
-  // static async singleZone(req: Request, res: Response): Promise<any> {
-  //   const organization = req.query.organization;
-  //   console.log("organization: ", organization);
-  //   const zoneUUID = req.params.zoneUUID;
-  //   console.log("zoneUUID: ", zoneUUID);
-  //   try {
-  //     const existingZone = await zoneSchema(organization)
-  //       .findOne({
-  //         zoneUUID: req.params.zoneUUID,
-  //       })
-  //       // .select("-_id -__v -isArchive -createdAt -updatedAt");
-  //     console.log("existingZone: ", existingZone);
-  //     if (!existingZone) {
-  //       return res.send({ message: "Zone not found for the UUID" });
-  //     } else {
-  //       const panelData = await panelSchema(organization)
-  //         .find({
-  //           zoneUUID: zoneUUID,
-  //         })
-  //         .select("panelOriginalOrder panelSide lockedPanel");
+  static async singleZonePanelDatas(req: Request, res: Response): Promise<any> {
+    const organization = req.query.organization;
+    const zoneID = req.params.zoneID;
 
-  //       const zoneName = existingZone.zoneName as string;
+    try {
+      const existingZone = await zoneSchema(organization)
+        .findOne({
+          _id: req.params.zoneID,
+        })
+        .select("panelOrder zoneName zonePoints lockedPanel");
+      if (!existingZone) {
+        return res.send({ message: "Zone not found for the UUID" });
+      } else {
+        const panelData = await panelSchema(organization).find({
+          zoneID: zoneID,
+        });
+        const zoneName = existingZone.zoneName as string;
 
-  //       const objectData = {
-  //         [zoneName]: {
-  //           activeSides: panelData.flatMap((data) => data.panelSide || []),
-  //           lockedPanels: panelData.flatMap((data) => data.lockedPanel || []),
-  //           panelOrder: panelData.flatMap(
-  //             (data) => data.panelOriginalOrder || []
-  //           ),
-  //           points: existingZone.zonePoints || [],
-  //           widgets: panelData.flatMap((data) => data.widgets || []),
-  //         },
-  //       };
+        const widgets = await Promise.all(
+          panelData.map(async (data) => {
+            const widgetDataArray = await widgetSchema(organization).find({
+              panelID: data._id,
+            });
 
-  //       return res.send(objectData);
-  //     }
-  //   } catch (error: any) {
-  //     return res.status(500).send(error.message);
-  //   }
-  // }
+            return widgetDataArray.map((widgetData) => ({
+              id: widgetData.widgetID,
+              type: widgetData.elementType,
+              title: widgetData.widgetName,
+              panel: widgetData.widgetside,
+              data: widgetData.Data || [],
+            }));
+          })
+        );
+
+        const flattenedWidgets = widgets.flat();
+
+        const objectData = {
+          zoneName,
+          activeSides: existingZone.panelOrder || [],
+          panelOrder: existingZone.panelOrder || [],
+          lockedPanels: existingZone.lockedPanel || [],
+          points: existingZone.zonePoints || [],
+          widgets: flattenedWidgets,
+        };
+
+        return res.send(objectData);
+      }
+    } catch (error: any) {
+      return res.status(500).send(error.message);
+    }
+  }
 
   static async allZones(req: Request, res: Response): Promise<any> {
     const organization = req.query.organization;
@@ -141,6 +154,22 @@ export class Zoneservice {
     }
   }
 
+  static async ZoneData(req: Request, res: Response): Promise<any> {
+    try {
+      const organization = req.query.organization;
+      console.log("organization: ", organization);
+      const zoneID = req.params.zoneID;
+      console.log("zoneID: ", zoneID);
+      const findZone = await zoneSchema(organization)
+        .findOne({ _id: zoneID })
+        // .select("zoneName");
+      console.log("findZone: ", findZone);
+      if (findZone) return res.status(200).json(findZone);
+    } catch (error: any) {
+      return res.status(500).send(error.message);
+    }
+  }
+
   // static async ZoneIDgenerate(req: Request, res: Response): Promise<any> {
   //   const organization = req.query.organization;
   //   const sceneID = req.params.sceneID;
diff --git a/src/shared/model/builder/lines/zone-Model.ts b/src/shared/model/builder/lines/zone-Model.ts
index 8cfe33a..eb24763 100644
--- a/src/shared/model/builder/lines/zone-Model.ts
+++ b/src/shared/model/builder/lines/zone-Model.ts
@@ -1,3 +1,39 @@
+// import mongoose, { Schema, Document, model } from "mongoose";
+// import MainModel from "../../../connect/mongoose.ts";
+
+// export interface Zone extends Document {
+//   zoneName: string;
+//   // zoneUUID: string;
+//   zonePoints: [];
+//   centerPoints: [];
+//   isArchive: boolean;
+//   createdBy: string;
+//   sceneID: string;
+//   //   createdBy: mongoose.Types.ObjectId;
+//   //   sceneID: mongoose.Types.ObjectId;
+//   layer: number;
+// }
+// const zoneSchema: Schema = new Schema(
+//   {
+//     zoneName: { type: String },
+//     // zoneUUID: { type: String },
+//     createdBy: { type: String },
+//     sceneID: { type: String },
+//     layer: { type: Number },
+//     centerPoints: { type: Array },
+//     zonePoints: { type: Array },
+//     isArchive: { type: Boolean, default: false },
+//     // createdBy: { type: mongoose.Schema.Types.ObjectId, ref: "User" },
+//     // sceneID: { type: mongoose.Schema.Types.ObjectId, ref: "Scene" },
+//   },
+//   { timestamps: true }
+// );
+
+// const dataModel = (db: any) => {
+//   return MainModel(db, "Zones", zoneSchema, "Zones");
+// };
+// export default dataModel;
+
 import mongoose, { Schema, Document, model } from "mongoose";
 import MainModel from "../../../connect/mongoose.ts";
 
@@ -5,10 +41,13 @@ export interface Zone extends Document {
   zoneName: string;
   // zoneUUID: string;
   zonePoints: [];
-  centerPoints: [];
+  viewPortCenter: [];
+  viewPortposition: [];
   isArchive: boolean;
   createdBy: string;
   sceneID: string;
+  panelOrder: string[];
+  lockedPanel: string[];
   //   createdBy: mongoose.Types.ObjectId;
   //   sceneID: mongoose.Types.ObjectId;
   layer: number;
@@ -23,6 +62,17 @@ const zoneSchema: Schema = new Schema(
     centerPoints: { type: Array },
     zonePoints: { type: Array },
     isArchive: { type: Boolean, default: false },
+    panelOrder: {
+      type: [String],
+      enum: ["left", "right", "up", "down"],
+    },
+    viewPortCenter: { type: Array, required: true },
+    viewPortposition: { type: Array, required: true },
+    lockedPanel: {
+      type: [String],
+      default: [],
+      enum: ["left", "right", "up", "down"],
+    },
     // createdBy: { type: mongoose.Schema.Types.ObjectId, ref: "User" },
     // sceneID: { type: mongoose.Schema.Types.ObjectId, ref: "Scene" },
   },
@@ -30,6 +80,6 @@ const zoneSchema: Schema = new Schema(
 );
 
 const dataModel = (db: any) => {
-  return MainModel(db, "Zones", zoneSchema, "Zones");
+  return MainModel(db, "zones", zoneSchema, "zones");
 };
 export default dataModel;
diff --git a/src/shared/model/vizualization/panelmodel.ts b/src/shared/model/vizualization/panelmodel.ts
index 51a073a..38ad66c 100644
--- a/src/shared/model/vizualization/panelmodel.ts
+++ b/src/shared/model/vizualization/panelmodel.ts
@@ -2,37 +2,17 @@ import mongoose, { Schema, Document, model } from "mongoose";
 import MainModel from "../../connect/mongoose.ts";
 
 export interface Panel extends Document {
-  panelOriginalOrder: string[];
-  panelOrder: [
-    {
-      panelName: string;
-      isArchive: boolean;
-    }
-  ];
-  panelSide: string[];
-  lockedPanel: string[];
-  sceneID: string;
   zoneID: mongoose.Types.ObjectId;
+  panelName: string;
+  widgets: [mongoose.Types.ObjectId];
   isArchive: boolean;
-  createdBy: string;
-  //   createdBy: mongoose.Types.ObjectId;
 }
 const panelSchema: Schema = new Schema(
   {
-    panelOriginalOrder: {
-      type: [String],
-      enum: ["left", "right", "up", "down"],
-    },
-    panelOrder: [
-      { panelName: String, isArchive: { type: Boolean, default: false } },
-    ],
-    panelSide: { type: [String], enum: ["left", "right", "up", "down"] },
-    lockedPanel: { type: [String], enum: ["left", "right", "up", "down"] },
-    sceneID: { type: String },
     zoneID: { type: mongoose.Schema.Types.ObjectId, ref: "Zone" },
+    panelName: { type: String },
+    widgets: [{ type: mongoose.Schema.Types.ObjectId, ref: "Widget" }],
     isArchive: { type: Boolean, default: false },
-    createdBy: { type: String },
-    // createdBy: { type: mongoose.Schema.Types.ObjectId, ref: "User" },
   },
   { timestamps: true }
 );
diff --git a/src/shared/model/vizualization/templatemodel.ts b/src/shared/model/vizualization/templatemodel.ts
new file mode 100644
index 0000000..cae9b70
--- /dev/null
+++ b/src/shared/model/vizualization/templatemodel.ts
@@ -0,0 +1,18 @@
+import mongoose, { Schema, Document, model } from "mongoose";
+import MainModel from "../../connect/mongoose.ts";
+
+export interface Template extends Document {
+    // templateName:;
+  isArchive: boolean;
+}
+const templateSchema: Schema = new Schema(
+  {
+    isArchive: { type: Boolean, default: false },
+  },
+  { timestamps: true }
+);
+
+const dataModel = (db: any) => {
+  return MainModel(db, "template", templateSchema, "template");
+};
+export default dataModel;
diff --git a/src/shared/model/vizualization/widgemodel.ts b/src/shared/model/vizualization/widgemodel.ts
index a09447c..6d844f2 100644
--- a/src/shared/model/vizualization/widgemodel.ts
+++ b/src/shared/model/vizualization/widgemodel.ts
@@ -3,24 +3,32 @@ import MainModel from "../../connect/mongoose.ts";
 
 export interface widget extends Document {
   widgetName: string;
-  widgetType: string;
-  panelorderID: mongoose.Types.ObjectId;
+  widgetside: string;
+  widgetID: string;
+  widgetOrder: string;
+  elementType: string;
+  elementColor: string;
+  fontFamily: string;
+  fontStyle: string;
+  fontWeight: string;
   isArchive: boolean;
-  //   zoneID: string;
-  zoneID: mongoose.Types.ObjectId;
-  sceneID: string;
-  //   sceneID: mongoose.Types.ObjectId;
-  Data: string[];
+  panelID: mongoose.Types.ObjectId;
+  Data: [];
 }
 const widgetSchema: Schema = new Schema(
   {
     widgetName: { type: String },
-    widgetType: { type: String },
+    widgetside: { type: String },
+    widgetID: { type: String },
+    widgetOrder: { type: String },
+    elementType: { type: String },
+    elementColor: { type: String },
+    fontFamily: { type: String },
+    fontStyle: { type: String },
     Data: { type: Array },
+    fontWeight: { type: String },
     isArchive: { type: Boolean, default: false },
-    panelorderID: { type: mongoose.Schema.Types.ObjectId, ref: "Panel" },
-    zoneID: { type: mongoose.Schema.Types.ObjectId, ref: "Zone" },
-    sceneID: { type: String },
+    panelID: { type: mongoose.Schema.Types.ObjectId, ref: "Panel" },
   },
   { timestamps: true }
 );