diff --git a/NEWS.md b/NEWS.md
index 2f523179..e0da6500 100644
--- a/NEWS.md
+++ b/NEWS.md
@@ -1,5 +1,7 @@
 Red Panda C++ Version 1.1.1
   - enhancement: adjust the appearance of problem case's input/output/expected control
+  - change: swap position of problem case's output and expected input controls
+  - enhancement: when problem case panel is positioned at right, problem case's input, output and expected controls is layouted vertically
 
 Red Panda C++ Version 1.1.0
   - enhancement: when ctrl+mouse cursor hovered an identifier or header name, use underline to highlight it
diff --git a/RedPandaIDE/mainwindow.cpp b/RedPandaIDE/mainwindow.cpp
index 2c8ff42f..e6f99df6 100644
--- a/RedPandaIDE/mainwindow.cpp
+++ b/RedPandaIDE/mainwindow.cpp
@@ -6244,7 +6244,44 @@ void MainWindow::setDockMessagesToArea(const Qt::DockWidgetArea &area)
                  Qt::DockWidgetArea::BottomDockWidgetArea |
                  Qt::DockWidgetArea::RightDockWidgetArea)
                 & ~area);
+    QGridLayout* layout=(QGridLayout*)ui->panelProblemCase->layout();
+    layout->removeWidget(ui->widgetProblemCaseInputCaption);
+    layout->removeWidget(ui->lblProblemCaseOutputCaption);
+    layout->removeWidget(ui->widgetProblemCaseExpectedCaption);
+    layout->removeWidget(ui->txtProblemCaseInput);
+    layout->removeWidget(ui->txtProblemCaseOutput);
+    layout->removeWidget(ui->txtProblemCaseExpected);
+    layout->removeWidget(ui->lblProblemCaseInput);
+    layout->removeWidget(ui->lblProblemCaseOutput);
+    layout->removeWidget(ui->lblProblemCaseExpected);
+    switch(area) {
+    case Qt::DockWidgetArea::BottomDockWidgetArea:
+    case Qt::DockWidgetArea::TopDockWidgetArea:
+        layout->addWidget(ui->widgetProblemCaseInputCaption, 0, 0, 1, 1);
+        layout->addWidget(ui->txtProblemCaseInput, 1, 0, 1, 1);
+        layout->addWidget(ui->lblProblemCaseInput, 2, 0, 1, 1);
 
+        layout->addWidget(ui->lblProblemCaseOutputCaption, 0, 2, 1, 1);
+        layout->addWidget(ui->txtProblemCaseOutput, 1, 2, 1, 1);
+        layout->addWidget(ui->lblProblemCaseOutput, 2, 2, 1, 1);
+
+        layout->addWidget(ui->widgetProblemCaseExpectedCaption, 0, 1, 1, 1);
+        layout->addWidget(ui->txtProblemCaseExpected, 1, 1, 1, 1);
+        layout->addWidget(ui->lblProblemCaseExpected, 2, 1, 1, 1);
+        break;
+    default:
+        layout->addWidget(ui->widgetProblemCaseInputCaption, 0, 0, 1, 1);
+        layout->addWidget(ui->txtProblemCaseInput, 1, 0, 1, 1);
+        layout->addWidget(ui->lblProblemCaseInput, 2, 0, 1, 1);
+
+        layout->addWidget(ui->widgetProblemCaseExpectedCaption, 3, 0, 1, 1);
+        layout->addWidget(ui->txtProblemCaseExpected, 4, 0, 1, 1);
+        layout->addWidget(ui->lblProblemCaseExpected, 5, 0, 1, 1);
+
+        layout->addWidget(ui->lblProblemCaseOutputCaption, 6, 0, 1, 1);
+        layout->addWidget(ui->txtProblemCaseOutput, 7, 0, 1, 1);
+        layout->addWidget(ui->lblProblemCaseOutput, 8, 0, 1, 1);
+    }
 }
 
 void MainWindow::updateVCSActions()
diff --git a/RedPandaIDE/mainwindow.ui b/RedPandaIDE/mainwindow.ui
index dc26e31f..968e0bb0 100644
--- a/RedPandaIDE/mainwindow.ui
+++ b/RedPandaIDE/mainwindow.ui
@@ -1508,7 +1508,7 @@
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
-        <widget class="QWidget" name="widget_4" native="true">
+        <widget class="QWidget" name="panelProblemCaseInfo" native="true">
          <layout class="QVBoxLayout" name="verticalLayout_7">
           <property name="spacing">
            <number>3</number>
@@ -1710,7 +1710,7 @@
           </item>
          </layout>
         </widget>
-        <widget class="QWidget" name="widget_5" native="true">
+        <widget class="QWidget" name="panelProblemCase" native="true">
          <layout class="QGridLayout" name="gridLayout_3">
           <property name="leftMargin">
            <number>0</number>
@@ -1724,18 +1724,29 @@
           <property name="bottomMargin">
            <number>0</number>
           </property>
-          <item row="2" column="1">
-           <widget class="LineNumberTextEditor" name="txtProblemCaseOutput">
+          <item row="3" column="2">
+           <widget class="QLabel" name="lblProblemCaseExpected">
+            <property name="text">
+             <string/>
+            </property>
+           </widget>
+          </item>
+          <item row="3" column="0">
+           <widget class="QLabel" name="lblProblemCaseInput">
+            <property name="text">
+             <string/>
+            </property>
+           </widget>
+          </item>
+          <item row="2" column="2">
+           <widget class="LineNumberTextEditor" name="txtProblemCaseExpected">
             <property name="lineWrapMode">
              <enum>QPlainTextEdit::NoWrap</enum>
             </property>
-            <property name="readOnly">
-             <bool>true</bool>
-            </property>
            </widget>
           </item>
           <item row="0" column="0">
-           <widget class="QWidget" name="widget_7" native="true">
+           <widget class="QWidget" name="widgetProblemCaseInputCaption" native="true">
             <layout class="QGridLayout" name="gridLayout_4">
              <property name="leftMargin">
               <number>0</number>
@@ -1759,13 +1770,6 @@
                </property>
               </widget>
              </item>
-             <item row="0" column="0">
-              <widget class="QLabel" name="label_4">
-               <property name="text">
-                <string>Input</string>
-               </property>
-              </widget>
-             </item>
              <item row="0" column="3">
               <widget class="QToolButton" name="btnProblemCaseInputFileName">
                <property name="toolTip">
@@ -1791,18 +1795,18 @@
                </property>
               </widget>
              </item>
+             <item row="0" column="0">
+              <widget class="QLabel" name="label_4">
+               <property name="text">
+                <string>Input</string>
+               </property>
+              </widget>
+             </item>
             </layout>
            </widget>
           </item>
-          <item row="0" column="1">
-           <widget class="QLabel" name="label_6">
-            <property name="text">
-             <string>Output</string>
-            </property>
-           </widget>
-          </item>
           <item row="0" column="2">
-           <widget class="QWidget" name="widget_8" native="true">
+           <widget class="QWidget" name="widgetProblemCaseExpectedCaption" native="true">
             <layout class="QHBoxLayout" name="horizontalLayout_18">
              <property name="leftMargin">
               <number>0</number>
@@ -1861,13 +1865,6 @@
             </layout>
            </widget>
           </item>
-          <item row="2" column="2">
-           <widget class="LineNumberTextEditor" name="txtProblemCaseExpected">
-            <property name="lineWrapMode">
-             <enum>QPlainTextEdit::NoWrap</enum>
-            </property>
-           </widget>
-          </item>
           <item row="2" column="0">
            <widget class="LineNumberTextEditor" name="txtProblemCaseInput">
             <property name="lineWrapMode">
@@ -1875,27 +1872,30 @@
             </property>
            </widget>
           </item>
-          <item row="3" column="2">
-           <widget class="QLabel" name="lblProblemCaseExpected">
-            <property name="text">
-             <string/>
+          <item row="2" column="3">
+           <widget class="LineNumberTextEditor" name="txtProblemCaseOutput">
+            <property name="lineWrapMode">
+             <enum>QPlainTextEdit::NoWrap</enum>
+            </property>
+            <property name="readOnly">
+             <bool>true</bool>
             </property>
            </widget>
           </item>
-          <item row="3" column="1">
+          <item row="0" column="3">
+           <widget class="QLabel" name="lblProblemCaseOutputCaption">
+            <property name="text">
+             <string>Output</string>
+            </property>
+           </widget>
+          </item>
+          <item row="3" column="3">
            <widget class="QLabel" name="lblProblemCaseOutput">
             <property name="text">
              <string/>
             </property>
            </widget>
           </item>
-          <item row="3" column="0">
-           <widget class="QLabel" name="lblProblemCaseInput">
-            <property name="text">
-             <string/>
-            </property>
-           </widget>
-          </item>
          </layout>
         </widget>
        </widget>