diff --git a/src/components/Tables/PowerSummaryTable.js b/src/components/Tables/PowerSummaryTable.js
index a25d9cbb..160d2dcf 100644
--- a/src/components/Tables/PowerSummaryTable.js
+++ b/src/components/Tables/PowerSummaryTable.js
@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { IoMdCloseCircleOutline } from 'react-icons/io';
 import { Tooltip } from 'antd';
 import { PowerCell } from './TableCells';
 import { fixed, color } from '../../utils/common';
 import { State } from '../ComponentsLib';
-
+import { api, PATCH, GET } from '../../utils/serverAPI';
 import '../style/PowerSummaryTable.css';
 
 function PowerSummaryTableToolTip({ title, statusColor }) {
@@ -17,77 +17,257 @@ function PowerSummaryTableToolTip({ title, statusColor }) {
     </Tooltip>
   );
 }
+
+PowerSummaryTableToolTip.propTypes = {
+  title: PropTypes.string.isRequired,
+  statusColor: PropTypes.string.isRequired,
+};
+
 function PowerSummaryTable({
-  title, data, total, percent,
+  title, data = [], total = 0, percent = 0, deviceId = 'MPW1',
 }) {
-  function getErrors(messages) {
-    if (messages === undefined) return [];
-    const errors = messages.filter((item) => item.filter((inner) => inner.type === 'error').length > 0);
-    return errors;
-  }
-  function getWarning(messages) {
-    if (messages === undefined) return [];
-    const warnings = messages.filter((item) => item.filter((inner) => inner.type === 'warn').length > 0);
-    return warnings;
-  }
-  function buildMessage(messages) {
-    return messages.reduce((sum, item, currentIndex) => {
-      item.forEach((i, index) => sum.push(
-        // eslint-disable-next-line react/no-array-index-key
-        <span key={`${currentIndex}+${index}`}>
-          {i.text}
-          <br />
-        </span>,
-      ));
-      return sum;
-    }, []);
-  }
-  function message(messages) {
-    const errors = getErrors(messages);
-    if (errors.length > 0) {
-      return buildMessage(errors);
+  const [thermalData, setThermalData] = useState({
+    ambientTypical: 25,
+    ambientWorstCase: 50,
+    thetaJa: 10,
+  });
+
+  const [powerData, setPowerData] = useState({
+    powerBudget: 1.0,
+    fpgaScaling: 25,
+    pcScaling: 25,
+  });
+
+  const ambientTypicalRef = useRef(null);
+  const ambientWorstCaseRef = useRef(null);
+  const thetaJaRef = useRef(null);
+  const powerBudgetRef = useRef(null);
+  const fpgaScalingRef = useRef(null);
+  const pcScalingRef = useRef(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const result = await GET(api.consumption('consumption', deviceId));
+        if (result && result.specification) {
+          const { specification } = result;
+          setThermalData({
+            ambientTypical: specification.thermal.ambient.typical,
+            ambientWorstCase: specification.thermal.ambient.worstcase,
+            thetaJa: specification.thermal.theta_ja,
+          });
+          setPowerData({
+            powerBudget: specification.power.budget,
+            fpgaScaling: specification.power.typical_dynamic_scaling.fpga_complex * 100,
+            pcScaling: specification.power.typical_dynamic_scaling.processing_complex * 100,
+          });
+        }
+      } catch (error) {
+        // Log error for debugging purposes
+        console.error('Error fetching data:', error.message);
+      }
+    };
+
+    fetchData();
+  }, [deviceId]);
+
+  const updateBackend = async (updatedData) => {
+    try {
+      await PATCH(api.deviceInfo(deviceId), updatedData);
+    } catch (error) {
+      // Log error for debugging purposes
+      console.error('Error updating backend:', error.message);
     }
-    const warnings = getWarning(messages);
-    if (warnings.length > 0) {
-      return buildMessage(warnings);
+  };
+
+  const handleFieldUpdate = (field, value) => {
+    const updatedThermalData = { ...thermalData };
+    const updatedPowerData = { ...powerData };
+
+    if (field in thermalData) {
+      updatedThermalData[field] = value;
+    } else {
+      updatedPowerData[field] = value;
     }
-    return '';
-  }
-
-  function isError(messages) { return getErrors(messages).length > 0; }
-  function isWarning(messages) { return getWarning(messages).length > 0; }
-  function statusColor(messages) {
-    return color(isError(messages), isWarning(messages));
-  }
+
+    setThermalData(updatedThermalData);
+    setPowerData(updatedPowerData);
+
+    const updatedData = {
+      specification: {
+        thermal: updatedThermalData,
+        power: updatedPowerData,
+      },
+    };
+    updateBackend(updatedData);
+  };
+
+  const enforceNumericInput = (e) => {
+    const { value } = e.target;
+    if (!/^-?\d*\.?\d*%?$/.test(value)) {
+      e.target.value = value.slice(0, -1);
+    }
+  };
+
+  const handleKeyDown = (e, nextFieldRef) => {
+    if (e.key === 'Enter' && nextFieldRef?.current) {
+      nextFieldRef.current.focus();
+    }
+  };
+
+  const getErrors = (messages) => (
+    messages?.filter((item) => item.some((inner) => inner.type === 'error')) || []
+  );
+  const getWarnings = (messages) => (
+    messages?.filter((item) => item.some((inner) => inner.type === 'warn')) || []
+  );
+
+  const buildMessage = (messages) => messages.reduce((acc, item, currentIndex) => {
+    item.forEach((i, index) => acc.push(
+      //   <span key={`${currentIndex}-${index}`}>
+      <span key={i.id || `${currentIndex}-${index}`}>
+        {i.text}
+        <br />
+      </span>,
+    ));
+    return acc;
+  }, []);
+
+  const message = (messages) => {
+    const errors = getErrors(messages);
+    return errors.length > 0 ? buildMessage(errors) : buildMessage(getWarnings(messages));
+  };
+
+  const statusColor = (messages) => color(
+    getErrors(messages).length > 0,
+    getWarnings(messages).length > 0,
+  );
+
   return (
     <div className="pst-container main-border">
-      <div className="no-wrap bold-text-title">{title}</div>
+      {title === 'FPGA Complex and Core Power' && (
+        <div className="thermal-power-specification">
+          <div className="spec-header">Thermal Specification</div>
+          <table className="spec-table">
+            <thead>
+              <tr>
+                <th />
+                <th className="typical-header">Typical</th>
+                <th className="worst-header">Worst-Case</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr className="ambient-row">
+                <td>Ambient</td>
+                <td className="value-cell">
+                  <input
+                    type="text"
+                    value={thermalData.ambientTypical}
+                    onChange={(e) => handleFieldUpdate('ambientTypical', e.target.value)}
+                    onInput={enforceNumericInput}
+                    ref={ambientTypicalRef}
+                    onKeyDown={(e) => handleKeyDown(e, ambientWorstCaseRef)}
+                  />
+                  °C
+                </td>
+                <td className="value-cell">
+                  <input
+                    type="text"
+                    value={thermalData.ambientWorstCase}
+                    onChange={(e) => handleFieldUpdate('ambientWorstCase', e.target.value)}
+                    onInput={enforceNumericInput}
+                    ref={ambientWorstCaseRef}
+                    onKeyDown={(e) => handleKeyDown(e, thetaJaRef)}
+                  />
+                  °C
+                </td>
+              </tr>
+              <tr className="theta-row">
+                <td colSpan="3" className="value-cell">
+                  ΘJA:
+                  <input
+                    type="text"
+                    value={thermalData.thetaJa}
+                    onChange={(e) => handleFieldUpdate('thetaJa', e.target.value)}
+                    onInput={enforceNumericInput}
+                    ref={thetaJaRef}
+                    onKeyDown={(e) => handleKeyDown(e, powerBudgetRef)}
+                  />
+                  °C/W
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div className="spec-header">Power Specification</div>
+          <table className="power-spec-table">
+            <tbody>
+              <tr>
+                <td>Power Budget</td>
+                <td className="scaling-cell">
+                  <input
+                    type="text"
+                    value={powerData.powerBudget}
+                    onChange={(e) => handleFieldUpdate('powerBudget', e.target.value)}
+                    onInput={enforceNumericInput}
+                    ref={powerBudgetRef}
+                    onKeyDown={(e) => handleKeyDown(e, fpgaScalingRef)}
+                  />
+                  W
+                </td>
+              </tr>
+              <tr>
+                <td>Typical Dynamic Scaling %</td>
+                <td className="scaling-cell">
+                  FPGA:
+                  <input
+                    type="text"
+                    value={powerData.fpgaScaling}
+                    onChange={(e) => handleFieldUpdate('fpgaScaling', e.target.value)}
+                    onInput={enforceNumericInput}
+                    ref={fpgaScalingRef}
+                    onKeyDown={(e) => handleKeyDown(e, pcScalingRef)}
+                  />
+                  %
+                </td>
+                <td className="scaling-cell">
+                  PC:
+                  <input
+                    type="text"
+                    value={powerData.pcScaling}
+                    onChange={(e) => handleFieldUpdate('pcScaling', e.target.value)}
+                    onInput={enforceNumericInput}
+                    ref={pcScalingRef}
+                  />
+                  %
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      )}
+      <div className="no-wrap bold-text-title">{title || 'FPGA Complex and Core Power'}</div>
       <div>
         <table className="pst-table">
           <tbody>
-            {
-              data.map((item, index) => (
-                // eslint-disable-next-line react/no-array-index-key
-                <tr key={index}>
-                  <td className="dot-td"><State messages={item.messages} baseClass="dot" /></td>
-                  <td className="no-wrap">{item.text}</td>
-                  <PowerCell val={item.power} />
-                  <td className="no-wrap" style={{ textAlign: 'right' }}>
-                    {`${fixed(item.percent, 0)} %`}
-                  </td>
-                  <td className="fixed-col">
-                    {
-                      (isError(item.messages) || isWarning(item.messages)) && (
-                        <PowerSummaryTableToolTip
-                          title={message(item.messages)}
-                          statusColor={statusColor(item.messages)}
-                        />
-                      )
-                    }
-                  </td>
-                </tr>
-              ))
-            }
+            {data.map((item) => (
+              <tr key={item.uniqueId}>
+                <td className="dot-td"><State messages={item.messages} baseClass="dot" /></td>
+                <td className="no-wrap">{item.text || 'N/A'}</td>
+                <PowerCell val={item.power || 0} />
+                <td className="no-wrap" style={{ textAlign: 'right' }}>
+                  {`${fixed(item.percent || 0, 0)} %`}
+                </td>
+                <td className="fixed-col">
+                  {(getErrors(item.messages).length > 0
+                  || getWarnings(item.messages).length > 0) && (
+                    <PowerSummaryTableToolTip
+                      title={message(item.messages)}
+                      statusColor={statusColor(item.messages)}
+                    />
+                  )}
+                </td>
+              </tr>
+            ))}
           </tbody>
         </table>
       </div>
@@ -95,13 +275,13 @@ function PowerSummaryTable({
       <div className="pst-bottom">
         <div className="pst-bottom-progress">
           <label htmlFor="progress-bar">
-            {`${fixed(percent, 0)} %`}
+            {`${fixed(percent || 0, 0)} %`}
           </label>
-          <progress id="progress-bar" value={percent} max={100} />
+          <progress id="progress-bar" value={percent || 0} max={100} />
         </div>
         <div className="pst-bottom-total bold-text-title">
           Total
-          <span className="bold-text-title">{`  ${fixed(total)} W`}</span>
+          <span className="bold-text-title">{`  ${fixed(total || 0)} W`}</span>
         </div>
       </div>
     </div>
@@ -110,11 +290,19 @@ function PowerSummaryTable({
 
 PowerSummaryTable.propTypes = {
   title: PropTypes.string.isRequired,
-  data: PropTypes.oneOfType([
-    PropTypes.array,
-  ]).isRequired,
+  data: PropTypes.arrayOf(PropTypes.shape({
+    uniqueId: PropTypes.string.isRequired,
+    text: PropTypes.string,
+    power: PropTypes.number,
+    percent: PropTypes.number,
+    messages: PropTypes.arrayOf(PropTypes.shape({
+      type: PropTypes.string,
+      text: PropTypes.string,
+    })),
+  })).isRequired,
   total: PropTypes.number.isRequired,
   percent: PropTypes.number.isRequired,
+  deviceId: PropTypes.string.isRequired,
 };
 
 export default PowerSummaryTable;
diff --git a/src/components/style/PowerSummaryTable.css b/src/components/style/PowerSummaryTable.css
index c98c0c5e..e8e04e20 100644
--- a/src/components/style/PowerSummaryTable.css
+++ b/src/components/style/PowerSummaryTable.css
@@ -1,36 +1,179 @@
 .pst-container {
-    padding: 8px;
+    padding: 4px; 
     display: flex;
     flex-direction: column;
-    row-gap: 5px;
+    row-gap: 2px; 
     height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+/* Styling for the Thermal and Power Specification section */
+.thermal-power-specification {
+    padding: 4px; 
+    background-color: #f0f7f5;
+    border: 1px solid #d1d1d1;
+    border-radius: 6px; 
+    margin-bottom: 4px; 
+    display: flex;
+    flex-direction: column;
+    row-gap: 4px; 
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    box-sizing: border-box;
+}
+
+/* Header styling for the Thermal and Power Specification */
+.spec-header {
+    font-weight: bold;
+    font-size: 11px; 
+    text-align: center;
+    color: #333;
+    background-color: #e1e1e1;
+    padding: 4px; 
+    border: 1px solid #c0c0c0;
+    border-radius: 4px; 
+}
+
+/* Table styling for the specification sections */
+.spec-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 4px; 
+}
+
+.spec-table th, .spec-table td {
+    padding: 3px; 
+    text-align: center;
+    border: 1px solid #d1d1d1;
+    font-size: 10px; 
+}
+
+/* Styling for headers in the Typical and Worst-Case columns */
+.spec-table .typical-header, .spec-table .worst-header {
+    font-weight: bold;
+    background-color: #f0f0f0;
+    border-bottom: 1px solid #c0c0c0;
+}
+
+/* Special handling for ΘJA row that spans across two columns */
+.spec-table .theta-row td {
+    text-align: center;
+    font-weight: bold;
+    color: #444;
+    padding: 3px; 
+    border-right: 1px solid #d1d1d1;
+    border-left: 1px solid #d1d1d1;
+}
+
+/* Input field styling */
+.spec-table td input {
+    width: 45px; 
+    padding: 2px; 
+    font-size: 10px; 
+    text-align: center;
+}
+
+/* Bottom section for Power Specification */
+.power-spec-section {
+    padding: 4px; 
+    background-color: #f0f7f5;
+    border: 1px solid #d1d1d1;
+    border-radius: 6px; 
+    margin-bottom: 4px;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* Table for Power Specification */
+.power-spec-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.power-spec-table th, .power-spec-table td {
+    padding: 3px; 
+    text-align: center;
+    border: 1px solid #d1d1d1;
+    font-size: 10px; 
+}
+
+/* Styling for power budget and dynamic scaling */
+.power-spec-table .scaling-cell {
+    font-weight: bold;
+    color: #444;
 }
 
+/* Input fields in Power Specification */
+.power-spec-table td input {
+    width: 45px; 
+    padding: 2px; 
+    text-align: center;
+    font-size: 10px; 
+}
+
+/* Header styling for both Thermal and Power sections */
+.bold-text-title {
+    font-weight: bold;
+    font-size: 11px; 
+    color: #333;
+    text-align: left;
+}
+
+/* FPGA Complex and Core Power table */
 .pst-table {
     width: 100%;
     border-collapse: collapse;
+    box-sizing: border-box;
+    height: auto; /* Changed height to auto to fit content */
+    display: table;
+    table-layout: fixed; /* Ensure equal column widths */
+    margin-bottom: 0; /* Removed extra margin for symmetrical alignment */
 }
 
 .pst-table td {
-    padding-top: 0.5em;
-    padding-bottom: 0.5em;
+    padding: 0.20em 0.99em; /* Adjusted padding for consistent spacing */
+    border-bottom: 1px solid #e1e1e1;
+    text-align: left; /* Align content to the left */
+    font-size: 10px; 
+    width: 100%;
 }
 
-.pst-table td {
+/* Processing Complex (SOC) Power table */
+.pst-table-soc {
+    width: 100%;
+    border-collapse: collapse;
+    box-sizing: border-box;
+    height: auto; /* Changed height to auto to fit content */
+    display: table;
+    table-layout: fixed;
+    margin-bottom: 0; /* Ensures symmetrical gap with the FPGA table */
+}
+
+.pst-table-soc td {
+    padding: 0.80em 0.99em; /* Same padding adjustments for consistency */
     border-bottom: 1px solid #e1e1e1;
+    text-align: left;
+    font-size: 20px;
+    width: 100%;
 }
 
-.pst-table tbody>tr:last-child>td {
+.pst-table tbody>tr:last-child>td,
+.pst-table-soc tbody>tr:last-child>td {
     border-bottom: 0;
 }
 
+/* Bottom section */
 .pst-bottom {
     display: flex;
     flex-direction: row;
+    justify-content: space-between;
     border-top: 1px solid #e1e1e1;
-    margin-top: 10px;
-    padding-top: 3px;
-    padding-bottom: 3px;
+    margin-top: 0;
+    padding-top: 2px; 
+    padding-bottom: 2px;
     align-items: flex-end;
 }
 
@@ -40,23 +183,40 @@
 
 .pst-bottom-progress {
     text-align: left;
+    width: 50%;
 }
 
 .pst-bottom-total {
     text-align: right;
-    width: 100%;
+    width: 50%;
     color: #7c7c7c;
-    font-size: 17px;
+    font-size: 10px;
 }
 
+/* Styling for dot icons */
 .dot-td {
     text-align: center;
 }
 
 .dot {
-    width: 10px;
-    height: 10px;
+    width: 8px; 
+    height: 8px;
     border-radius: 50%;
     display: inline-block;
     vertical-align: middle;
 }
+
+/* Remove unnecessary bottom space */
+.pst-container,
+.pst-table,
+.pst-table-soc {
+    margin-bottom: 0;
+    height: 100%; 
+}
+
+/* Ensure table fills the entire container */
+.pst-table, .pst-table-soc {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}