diff --git a/src/frontend/src/components/content/PlanPanelRight.tsx b/src/frontend/src/components/content/PlanPanelRight.tsx
index a253355c4..bf05d5f00 100644
--- a/src/frontend/src/components/content/PlanPanelRight.tsx
+++ b/src/frontend/src/components/content/PlanPanelRight.tsx
@@ -6,8 +6,9 @@ import {
   ArrowTurnDownRightRegular,
 } from "@fluentui/react-icons";
 import { MPlanData, PlanDetailsProps } from "../../models";
-import { getAgentIcon, getAgentDisplayNameWithSuffix } from '../../utils/agentIconUtils'; 
+import { getAgentIcon, getAgentDisplayNameWithSuffix } from '../../utils/agentIconUtils';
 import ContentNotFound from "../NotFound/ContentNotFound";
+import "../../styles/planpanelright.css";
 
 
 const PlanPanelRight: React.FC<PlanDetailsProps> = ({
@@ -22,18 +23,7 @@ const PlanPanelRight: React.FC<PlanDetailsProps> = ({
 
   if (!planApprovalRequest) {
     return (
-      <div style={{
-        width: '280px',
-        height: '100vh',
-        padding: '20px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderLeft: '1px solid var(--colorNeutralStroke1)',
-        color: 'var(--colorNeutralForeground3)',
-        fontSize: '14px',
-        fontStyle: 'italic'
-      }}>
+      <div className="plan-panel-right__no-data">
         No plan available
       </div>
     );
@@ -48,7 +38,7 @@ const PlanPanelRight: React.FC<PlanDetailsProps> = ({
     return planApprovalRequest.steps.map((step, index) => {
       const action = step.action || step.cleanAction || '';
       const isHeading = action.trim().endsWith(':');
-      
+
       return {
         text: action.trim(),
         isHeading,
@@ -62,63 +52,29 @@ const PlanPanelRight: React.FC<PlanDetailsProps> = ({
     const planSteps = extractPlanSteps();
 
     return (
-      <div style={{
-        marginBottom: '24px',
-        paddingBottom: '20px',
-        borderBottom: '1px solid var(--colorNeutralStroke1)'
-      }}>
-        <Body1 style={{
-          marginBottom: '16px',
-          fontSize: '14px',
-          fontWeight: 600,
-          color: 'var(--colorNeutralForeground1)'
-        }}>
+      <div className="plan-section">
+        <Body1 className="plan-section__title">
           Plan Overview
         </Body1>
 
         {planSteps.length === 0 ? (
-          <div style={{
-            textAlign: 'center',
-            color: 'var(--colorNeutralForeground3)',
-            fontSize: '14px',
-            fontStyle: 'italic',
-            padding: '20px'
-          }}>
+          <div className="plan-section__empty">
             Plan is being generated...
           </div>
         ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <div className="plan-steps">
             {planSteps.map((step, index) => (
-              <div key={step.key} style={{ display: 'flex', flexDirection: 'column' }}>
+              <div key={step.key} className="plan-step">
                 {step.isHeading ? (
                   // Heading - larger text, bold
-                  <Body1 style={{
-                    fontSize: '14px',
-                    fontWeight: 600,
-                    color: 'var(--colorNeutralForeground1)',
-                    marginBottom: '4px'
-                  }}>
+                  <Body1 className="plan-step__heading">
                     {step.text}
                   </Body1>
                 ) : (
                   // Sub-step - with arrow
-                  <div style={{
-                    display: 'flex',
-                    alignItems: 'flex-start',
-                    gap: '8px',
-                    marginBottom: '4px'
-                  }}>
-                    <ArrowTurnDownRightRegular style={{
-                      fontSize: '16px',
-                      color: 'var(--colorNeutralForeground2)',
-                      marginTop: '2px',
-                      flexShrink: 0
-                    }} />
-                    <Body1 style={{
-                      fontSize: '14px',
-                      color: 'var(--colorNeutralForeground1)',
-                      lineHeight: 1.4
-                    }}>
+                  <div className="plan-step__content">
+                    <ArrowTurnDownRightRegular className="plan-step__arrow" />
+                    <Body1 className="plan-step__text">
                       {step.text}
                     </Body1>
                   </div>
@@ -136,59 +92,27 @@ const PlanPanelRight: React.FC<PlanDetailsProps> = ({
     const agents = planApprovalRequest?.team || [];
 
     return (
-      <div style={{
-        flex: 1,
-        overflow: 'auto'
-      }}>
-        <Body1 style={{
-          marginBottom: '16px',
-          fontSize: '14px',
-          fontWeight: 600,
-          color: 'var(--colorNeutralForeground1)'
-        }}>
+      <div className="agents-section">
+        <Body1 className="agents-section__title">
           Agent Team
         </Body1>
 
         {agents.length === 0 ? (
-          <div style={{
-            textAlign: 'center',
-            color: 'var(--colorNeutralForeground3)',
-            fontSize: '14px',
-            fontStyle: 'italic',
-            padding: '20px'
-          }}>
+          <div className="agents-section__empty">
             No agents assigned yet...
           </div>
         ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+          <div className="agents-list">
             {agents.map((agentName, index) => (
-              <div key={`${agentName}-${index}`} style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: '12px',
-                padding: '8px 0'
-              }}>
+              <div key={`${agentName}-${index}`} className="agent-item">
                 {/* Agent Icon */}
-                <div style={{
-                  width: '32px',
-                  height: '32px',
-                  borderRadius: '50%',
-                  backgroundColor: 'var(--colorNeutralBackground3)',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  flexShrink: 0
-                }}>
+                <div className="agent-item__icon">
                   {getAgentIcon(agentName, planData, planApprovalRequest)}
                 </div>
 
                 {/* Agent Info - just name */}
-                <div style={{ flex: 1 }}>
-                  <Body1 style={{
-                    fontWeight: 600,
-                    fontSize: '14px',
-                    color: 'var(--colorNeutralForeground1)'
-                  }}>
+                <div className="agent-item__info">
+                  <Body1 className="agent-item__name">
                     {getAgentDisplayNameWithSuffix(agentName)}
                   </Body1>
                 </div>
@@ -202,16 +126,7 @@ const PlanPanelRight: React.FC<PlanDetailsProps> = ({
 
   // Main render
   return (
-    <div style={{
-      width: '280px',
-      height: '100vh',
-      padding: '20px',
-      display: 'flex',
-      flexDirection: 'column',
-      overflow: 'hidden',
-      borderLeft: '1px solid var(--colorNeutralStroke1)',
-      // backgroundColor: 'var(--colorNeutralBackground1)'
-    }}>
+    <div className="plan-panel-right">
       {/* Plan section on top */}
       {renderPlanSection()}
 
diff --git a/src/frontend/src/styles/planpanelright.css b/src/frontend/src/styles/planpanelright.css
new file mode 100644
index 000000000..821e39226
--- /dev/null
+++ b/src/frontend/src/styles/planpanelright.css
@@ -0,0 +1,272 @@
+/* PlanPanelRight styles */
+.plan-panel-right {
+  width: 280px;
+  height: 100vh;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-left: 1px solid var(--colorNeutralStroke1);
+  /* backgroundColor: var(--colorNeutralBackground1); */
+}
+
+.plan-panel-right__no-data {
+  width: 280px;
+  height: 100vh;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-left: 1px solid var(--colorNeutralStroke1);
+  color: var(--colorNeutralForeground3);
+  font-size: 14px;
+  font-style: italic;
+}
+
+.plan-section {
+  margin-bottom: 24px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--colorNeutralStroke1);
+}
+
+.plan-section__title {
+  margin-bottom: 16px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--colorNeutralForeground1);
+}
+
+.plan-section__empty {
+  text-align: center;
+  color: var(--colorNeutralForeground3);
+  font-size: 14px;
+  font-style: italic;
+  padding: 20px;
+}
+
+.plan-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.plan-step {
+  display: flex;
+  flex-direction: column;
+}
+
+.plan-step__heading {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--colorNeutralForeground1);
+  margin-bottom: 4px;
+}
+
+.plan-step__content {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.plan-step__arrow {
+  font-size: 16px;
+  color: var(--colorNeutralForeground2);
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+
+.plan-step__text {
+  font-size: 14px;
+  color: var(--colorNeutralForeground1);
+  line-height: 1.4;
+}
+
+.agents-section {
+  flex: 1;
+  overflow: auto;
+}
+
+.agents-section__title {
+  margin-bottom: 16px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--colorNeutralForeground1);
+}
+
+.agents-section__empty {
+  text-align: center;
+  color: var(--colorNeutralForeground3);
+  font-size: 14px;
+  font-style: italic;
+  padding: 20px;
+}
+
+.agents-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.agent-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 0;
+}
+
+.agent-item__icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: var(--colorNeutralBackground3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.agent-item__info {
+  flex: 1;
+}
+
+.agent-item__name {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--colorNeutralForeground1);
+}
+
+/* Media query for 1920x1080 and smaller screens */
+@media screen and (max-width: 1920px) and (max-height: 1080px) {
+  .plan-section {
+    /* Reduce bottom margin and padding to make it more compact */
+    margin-bottom: 20px;
+    padding-bottom: 16px;
+    /* Increase the height limit for better readability */
+    max-height: 550px;
+    overflow-y: auto;
+  }
+
+  .plan-section__title {
+    /* Keep title spacing reasonable */
+    margin-bottom: 14px;
+    font-size: 14px;
+  }
+
+  .plan-steps {
+    /* Keep reasonable gap between steps */
+    gap: 7px;
+  }
+
+  .plan-step__heading {
+    /* Keep headings readable */
+    font-size: 14px;
+    margin-bottom: 3px;
+  }
+
+  .plan-step__text {
+    /* Keep text readable */
+    font-size: 14px;
+    line-height: 1.35;
+  }
+
+  .plan-step__content {
+    /* Keep reasonable spacing in step content */
+    gap: 7px;
+    margin-bottom: 3px;
+  }
+
+  .plan-section__empty {
+    /* Keep empty state readable */
+    padding: 16px;
+    font-size: 14px;
+  }
+
+  .agents-section {
+    /* Give more space to agents section but not too much */
+    flex: 1.3;
+    /* Ensure it can scroll if needed */
+    overflow-y: auto;
+    /* Add some top spacing */
+    padding-top: 4px;
+  }
+
+  .agents-section__title {
+    /* Keep title spacing */
+    margin-bottom: 15px;
+    font-size: 14px;
+  }
+
+  .agents-list {
+    /* Keep reasonable gap between agents */
+    gap: 11px;
+  }
+
+  .agent-item {
+    /* Keep agent items readable */
+    padding: 7px 0;
+    gap: 11px;
+  }
+
+  .agent-item__icon {
+    /* Keep icons at good size */
+    width: 30px;
+    height: 30px;
+  }
+
+  .agent-item__name {
+    /* Keep font readable */
+    font-size: 14px;
+  }
+}
+
+/* Additional breakpoint for even smaller screens (laptops) */
+@media screen and (max-width: 1366px) and (max-height: 768px) {
+  .plan-section {
+    /* More compact for smaller screens but still readable */
+    max-height: 350px;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+  }
+
+  .plan-section__title {
+    margin-bottom: 12px;
+    font-size: 13px;
+  }
+
+  .plan-steps {
+    gap: 6px;
+  }
+
+  .plan-step__heading {
+    font-size: 13px;
+  }
+
+  .plan-step__text {
+    font-size: 13px;
+    line-height: 1.3;
+  }
+
+  .agents-section {
+    flex: 1.5;
+  }
+
+  .agents-section__title {
+    margin-bottom: 13px;
+    font-size: 13px;
+  }
+
+  .agent-item {
+    padding: 6px 0;
+    gap: 9px;
+  }
+
+  .agent-item__icon {
+    width: 26px;
+    height: 26px;
+  }
+
+  .agent-item__name {
+    font-size: 13px;
+  }
+}
\ No newline at end of file