diff --git a/sge-frontend/src/views/DataCenterManagement.js b/sge-frontend/src/views/DataCenterManagement.js
index 5db4a64..4cbe2c1 100644
--- a/sge-frontend/src/views/DataCenterManagement.js
+++ b/sge-frontend/src/views/DataCenterManagement.js
@@ -428,6 +428,23 @@ const DataCenterManagement = () => {
     setSelectedSector(row.sector?.id);
     setSelectedSubSector(row.subSector?.id);
 
+    // If there are existing emission sources, fetch consumption units for each
+    if (
+      row.dataCenterEmissionSources &&
+      row.dataCenterEmissionSources.length > 0
+    ) {
+      row.dataCenterEmissionSources.forEach((dces) => {
+        if (dces.emissionSource && dces.emissionSource.id) {
+          dispatch(
+            getConsuptionUnits({
+              id: dces.emissionSource.id,
+              sector: row.sector?.id,
+            })
+          );
+        }
+      });
+    }
+
     // Only set map position if we have both address and valid coordinates
     setMapPosition(
       row.address && row.latitude && row.longitude
@@ -1029,189 +1046,232 @@ const DataCenterManagement = () => {
               <Col sm="12">
                 <FormGroup>
                   <Label>Emission Sources & Consumption Units</Label>
-                  <div className="border p-3 rounded bg-light">
-                    <small className="text-muted mb-2 d-block">
-                      Configure emission sources for this data center. At least
-                      one emission source with consumption unit is required.
-                    </small>
+                  <div className="border rounded p-3 bg-light">
+                    <div className="d-flex justify-content-between align-items-center mb-3">
+                      <small className="text-muted">
+                        Configure emission sources for this data center. At
+                        least one emission source with consumption unit is
+                        required.
+                      </small>
+                      <Button
+                        color="primary"
+                        size="sm"
+                        onClick={() => {
+                          setSelectedDataCenter({
+                            ...selectedDataCenter,
+                            dataCenterEmissionSources: [
+                              ...selectedDataCenter.dataCenterEmissionSources,
+                              {
+                                emissionSourceId: null,
+                                consuptionUnitId: null,
+                                isDefault: false,
+                              },
+                            ],
+                          });
+                        }}
+                        disabled={!selectedDataCenter.subSectorId}
+                        className="d-none d-sm-flex"
+                      >
+                        <Plus size={14} className="me-1" />
+                        Add Source
+                      </Button>
+                    </div>
                     {selectedDataCenter.dataCenterEmissionSources.map(
                       (source, index) => (
-                        <Row key={index} className="mb-2 align-items-end">
-                          <Col sm="5">
-                            <Label
-                              for={`emissionSource-${index}`}
-                              className="form-label"
-                            >
-                              Emission Source *
-                            </Label>
-                            <Select
-                              id={`emissionSource-${index}`}
-                              placeholder="Select emission source..."
-                              options={emissionSourcesOptions}
-                              value={emissionSourcesOptions?.find(
-                                (option) =>
-                                  option.value === source.emissionSourceId
-                              )}
-                              onChange={(option) => {
-                                const updatedSources = [
-                                  ...selectedDataCenter.dataCenterEmissionSources,
-                                ];
-                                updatedSources[index] = {
-                                  ...updatedSources[index],
-                                  emissionSourceId: option?.value,
-                                  consuptionUnitId: null, // Reset consumption unit when emission source changes
-                                };
-                                setSelectedDataCenter({
-                                  ...selectedDataCenter,
-                                  dataCenterEmissionSources: updatedSources,
-                                });
-                                // Fetch consumption units for the selected emission source
-                                if (option?.value) {
-                                  dispatch(
-                                    getConsuptionUnits({
-                                      id: option.value,
-                                      sector: selectedDataCenter?.sectorId,
-                                    })
-                                  );
-                                }
-                              }}
-                              isClearable
-                              filterOption={customFilterForSelect}
-                              isDisabled={!selectedDataCenter.subSectorId}
-                              styles={{
-                                placeholder: (provided) => ({
-                                  ...provided,
-                                  color: "#6e6b7b",
-                                }),
-                              }}
-                              menuPlacement="top"
-                            />
-                          </Col>
-                          <Col sm="4">
-                            <Label
-                              for={`consuptionUnit-${index}`}
-                              className="form-label"
-                            >
-                              Consumption Unit *
-                            </Label>
-                            <Select
-                              id={`consuptionUnit-${index}`}
-                              placeholder="Select consumption unit..."
-                              options={consuptionUnitsOptions}
-                              value={consuptionUnitsOptions?.find(
-                                (option) =>
-                                  option.value === source.consuptionUnitId
-                              )}
-                              onChange={(option) => {
-                                const updatedSources = [
-                                  ...selectedDataCenter.dataCenterEmissionSources,
-                                ];
-                                updatedSources[index] = {
-                                  ...updatedSources[index],
-                                  consuptionUnitId: option?.value,
-                                };
-                                setSelectedDataCenter({
-                                  ...selectedDataCenter,
-                                  dataCenterEmissionSources: updatedSources,
-                                });
-                              }}
-                              isClearable
-                              filterOption={customFilterForSelect}
-                              isDisabled={!source.emissionSourceId}
-                              styles={{
-                                placeholder: (provided) => ({
-                                  ...provided,
-                                  color: "#6e6b7b",
-                                }),
-                              }}
-                              menuPlacement="top"
-                            />
-                          </Col>
-                          <Col sm="3">
-                            <Label className="form-label d-block">
-                              Actions
-                            </Label>
-                            <div className="d-flex gap-2">
-                              <Button
-                                color={
-                                  source.isDefault
-                                    ? "primary"
-                                    : "outline-secondary"
-                                }
-                                size="sm"
-                                onClick={() => {
+                        <div
+                          key={index}
+                          className="border rounded p-3 mb-3 bg-white"
+                        >
+                          <Row className="g-3">
+                            <Col xs="12" md="6">
+                              <Label
+                                for={`emissionSource-${index}`}
+                                className="form-label fw-bold"
+                              >
+                                Emission Source *
+                              </Label>
+                              <Select
+                                id={`emissionSource-${index}`}
+                                placeholder="Select emission source..."
+                                options={emissionSourcesOptions}
+                                value={emissionSourcesOptions?.find(
+                                  (option) =>
+                                    option.value === source.emissionSourceId
+                                )}
+                                onChange={(option) => {
                                   const updatedSources = [
                                     ...selectedDataCenter.dataCenterEmissionSources,
                                   ];
-                                  // First, set all sources to not default
-                                  updatedSources.forEach(
-                                    (s) => (s.isDefault = false)
-                                  );
-                                  // Then set the selected one as default
-                                  updatedSources[index].isDefault = true;
+                                  updatedSources[index] = {
+                                    ...updatedSources[index],
+                                    emissionSourceId: option?.value,
+                                    consuptionUnitId: null, // Reset consumption unit when emission source changes
+                                  };
                                   setSelectedDataCenter({
                                     ...selectedDataCenter,
                                     dataCenterEmissionSources: updatedSources,
                                   });
-                                }}
-                                title="Set as default emission source"
-                              >
-                                {source.isDefault ? "★ Default" : "☆ Default"}
-                              </Button>
-                              <Button
-                                color="outline-danger"
-                                size="sm"
-                                onClick={() => {
-                                  const updatedSources =
-                                    selectedDataCenter.dataCenterEmissionSources.filter(
-                                      (_, i) => i !== index
+                                  // Fetch consumption units for the selected emission source
+                                  if (option?.value) {
+                                    dispatch(
+                                      getConsuptionUnits({
+                                        id: option.value,
+                                        sector: selectedDataCenter?.sectorId,
+                                      })
                                     );
-                                  // If we're removing the default source and there are other sources, make the first one default
-                                  if (
-                                    source.isDefault &&
-                                    updatedSources.length > 0
-                                  ) {
-                                    updatedSources[0].isDefault = true;
                                   }
+                                }}
+                                isClearable
+                                filterOption={customFilterForSelect}
+                                isDisabled={!selectedDataCenter.subSectorId}
+                                styles={{
+                                  placeholder: (provided) => ({
+                                    ...provided,
+                                    color: "#6e6b7b",
+                                  }),
+                                }}
+                                menuPlacement="auto"
+                              />
+                            </Col>
+                            <Col xs="12" md="6">
+                              <Label
+                                for={`consuptionUnit-${index}`}
+                                className="form-label fw-bold"
+                              >
+                                Consumption Unit *
+                              </Label>
+                              <Select
+                                id={`consuptionUnit-${index}`}
+                                placeholder="Select consumption unit..."
+                                options={consuptionUnitsOptions}
+                                value={consuptionUnitsOptions?.find(
+                                  (option) =>
+                                    option.value === source.consuptionUnitId
+                                )}
+                                onChange={(option) => {
+                                  const updatedSources = [
+                                    ...selectedDataCenter.dataCenterEmissionSources,
+                                  ];
+                                  updatedSources[index] = {
+                                    ...updatedSources[index],
+                                    consuptionUnitId: option?.value,
+                                  };
                                   setSelectedDataCenter({
                                     ...selectedDataCenter,
                                     dataCenterEmissionSources: updatedSources,
                                   });
                                 }}
-                                disabled={
-                                  selectedDataCenter.dataCenterEmissionSources
-                                    .length === 1
-                                }
-                                title="Remove emission source"
-                              >
-                                <Trash size={14} />
-                              </Button>
-                            </div>
-                          </Col>
-                        </Row>
+                                isClearable
+                                filterOption={customFilterForSelect}
+                                isDisabled={!source.emissionSourceId}
+                                styles={{
+                                  placeholder: (provided) => ({
+                                    ...provided,
+                                    color: "#6e6b7b",
+                                  }),
+                                }}
+                                menuPlacement="auto"
+                              />
+                            </Col>
+                          </Row>
+                          <Row className="mt-3">
+                            <Col xs="12">
+                              <div className="d-flex flex-column flex-sm-row gap-2 justify-content-between align-items-start align-items-sm-center">
+                                <div className="d-flex gap-2 flex-wrap">
+                                  <Button
+                                    color={
+                                      source.isDefault
+                                        ? "primary"
+                                        : "outline-secondary"
+                                    }
+                                    size="sm"
+                                    onClick={() => {
+                                      const updatedSources = [
+                                        ...selectedDataCenter.dataCenterEmissionSources,
+                                      ];
+                                      // First, set all sources to not default
+                                      updatedSources.forEach(
+                                        (s) => (s.isDefault = false)
+                                      );
+                                      // Then set the selected one as default
+                                      updatedSources[index].isDefault = true;
+                                      setSelectedDataCenter({
+                                        ...selectedDataCenter,
+                                        dataCenterEmissionSources:
+                                          updatedSources,
+                                      });
+                                    }}
+                                    title="Set as default emission source"
+                                  >
+                                    {source.isDefault
+                                      ? "★ Default"
+                                      : "☆ Set Default"}
+                                  </Button>
+                                  {source.isDefault && (
+                                    <span className="badge bg-success align-self-center">
+                                      Default Source
+                                    </span>
+                                  )}
+                                </div>
+                                <Button
+                                  color="outline-danger"
+                                  size="sm"
+                                  onClick={() => {
+                                    const updatedSources =
+                                      selectedDataCenter.dataCenterEmissionSources.filter(
+                                        (_, i) => i !== index
+                                      );
+                                    // If we're removing the default source and there are other sources, make the first one default
+                                    if (
+                                      source.isDefault &&
+                                      updatedSources.length > 0
+                                    ) {
+                                      updatedSources[0].isDefault = true;
+                                    }
+                                    setSelectedDataCenter({
+                                      ...selectedDataCenter,
+                                      dataCenterEmissionSources: updatedSources,
+                                    });
+                                  }}
+                                  disabled={
+                                    selectedDataCenter.dataCenterEmissionSources
+                                      .length === 1
+                                  }
+                                  title="Remove emission source"
+                                >
+                                  <Trash size={14} className="me-1" />
+                                  Remove
+                                </Button>
+                              </div>
+                            </Col>
+                          </Row>
+                        </div>
                       )
                     )}
-                    <Button
-                      color="primary"
-                      size="sm"
-                      onClick={() => {
-                        setSelectedDataCenter({
-                          ...selectedDataCenter,
-                          dataCenterEmissionSources: [
-                            ...selectedDataCenter.dataCenterEmissionSources,
-                            {
-                              emissionSourceId: null,
-                              consuptionUnitId: null,
-                              isDefault: false,
-                            },
-                          ],
-                        });
-                      }}
-                      disabled={!selectedDataCenter.subSectorId}
-                    >
-                      <Plus size={14} className="me-1" />
-                      Add Emission Source
-                    </Button>
+                    <div className="text-center mt-3">
+                      <Button
+                        color="primary"
+                        size="sm"
+                        onClick={() => {
+                          setSelectedDataCenter({
+                            ...selectedDataCenter,
+                            dataCenterEmissionSources: [
+                              ...selectedDataCenter.dataCenterEmissionSources,
+                              {
+                                emissionSourceId: null,
+                                consuptionUnitId: null,
+                                isDefault: false,
+                              },
+                            ],
+                          });
+                        }}
+                        disabled={!selectedDataCenter.subSectorId}
+                        className="w-100 d-sm-none"
+                      >
+                        <Plus size={14} className="me-1" />
+                        Add Another Emission Source
+                      </Button>
+                    </div>
                   </div>
                 </FormGroup>
               </Col>