diff --git a/app/src/onionskinwidget.cpp b/app/src/onionskinwidget.cpp
index f4872aa3d3..8b7b8cac1c 100644
--- a/app/src/onionskinwidget.cpp
+++ b/app/src/onionskinwidget.cpp
@@ -57,9 +57,23 @@ void OnionSkinWidget::initUI()
     ui->opacityGroup->setLayout(opacityLayout);
 
 #ifdef __APPLE__
+
+    ui->scrollAreaWidgetContents->layout()->setSpacing(8);
+
     // Mac only style. ToolButtons are naturally borderless on Win/Linux.
     QString stylesheet =
         "QToolButton { border: 0px; } "
+        "QGroupBox::title {"
+            "subcontrol-origin: padding;"
+            "left: 6px;"
+            "padding: 2px 2px 0px 0px;"
+            "background: transparent;"
+        "}"
+        "QGroupBox {"
+            "subcontrol-origin: margin;"
+            "margin-top: 8px;"
+            "padding-top: 16px;"
+        "}"
         "QToolButton:pressed{ border: 1px solid #FFADAD; border-radius: 2px; background-color: #D5D5D5; }"
         "QToolButton:checked{ border: 1px solid #ADADAD; border-radius: 2px; background-color: #D5D5D5; }";
     setStyleSheet(this->styleSheet().append(stylesheet));
@@ -74,8 +88,8 @@ void OnionSkinWidget::makeConnections()
     connect(ui->onionPrevFramesNumBox, spinBoxChanged, this, &OnionSkinWidget::onionPrevFramesNumChange);
     connect(ui->onionNextFramesNumBox, spinBoxChanged, this, &OnionSkinWidget::onionNextFramesNumChange);
 
-    connect(ui->onionPrevButton, &QToolButton::clicked, this, &OnionSkinWidget::onionPrevButtonClicked);
-    connect(ui->onionNextButton, &QToolButton::clicked, this, &OnionSkinWidget::onionNextButtonClicked);
+    connect(ui->prevFramesGroup, &QGroupBox::clicked, this, &OnionSkinWidget::prevFramesGroupClicked);
+    connect(ui->nextFramesGroup, &QGroupBox::clicked, this, &OnionSkinWidget::nextFramesGroupClicked);
     connect(ui->onionBlueButton, &QToolButton::clicked, this, &OnionSkinWidget::onionBlueButtonClicked);
     connect(ui->onionRedButton, &QToolButton::clicked, this, &OnionSkinWidget::onionRedButtonClicked);
 
@@ -91,18 +105,12 @@ void OnionSkinWidget::updateUI()
 {
     PreferenceManager* prefs = editor()->preference();
 
-    QSignalBlocker b1(ui->onionPrevButton);
-    ui->onionPrevButton->setChecked(prefs->isOn(SETTING::PREV_ONION));
-
-    QSignalBlocker b2(ui->onionNextButton);
-    ui->onionNextButton->setChecked(prefs->isOn(SETTING::NEXT_ONION));
+    ui->prevFramesGroup->setChecked(prefs->isOn(SETTING::PREV_ONION));
+    ui->nextFramesGroup->setChecked(prefs->isOn(SETTING::NEXT_ONION));
 
     QSignalBlocker b3(ui->onionBlueButton);
     ui->onionBlueButton->setChecked(prefs->isOn(SETTING::ONION_BLUE));
 
-    ui->onionRedButton->setEnabled(ui->onionPrevButton->isChecked());
-    ui->onionBlueButton->setEnabled(ui->onionNextButton->isChecked());
-
     QSignalBlocker b4(ui->onionRedButton);
     ui->onionRedButton->setChecked(prefs->isOn(SETTING::ONION_RED));
 
@@ -119,13 +127,13 @@ void OnionSkinWidget::updateUI()
 
 }
 
-void OnionSkinWidget::onionPrevButtonClicked(bool isOn)
+void OnionSkinWidget::prevFramesGroupClicked(bool isOn)
 {
     PreferenceManager* prefs = editor()->preference();
     prefs->set(SETTING::PREV_ONION, isOn);
 }
 
-void OnionSkinWidget::onionNextButtonClicked(bool isOn)
+void OnionSkinWidget::nextFramesGroupClicked(bool isOn)
 {
     PreferenceManager* prefs = editor()->preference();
     prefs->set(SETTING::NEXT_ONION, isOn);
diff --git a/app/src/onionskinwidget.h b/app/src/onionskinwidget.h
index 0bfcf64ef7..711f249702 100644
--- a/app/src/onionskinwidget.h
+++ b/app/src/onionskinwidget.h
@@ -41,8 +41,8 @@ class OnionSkinWidget : public BaseDockWidget
 
 private slots:
     void playbackStateChanged(int);
-    void onionPrevButtonClicked(bool);
-    void onionNextButtonClicked(bool);
+    void prevFramesGroupClicked(bool);
+    void nextFramesGroupClicked(bool);
     void onionBlueButtonClicked(bool);
     void onionRedButtonClicked(bool);
     void onionMaxOpacityChange(int);
diff --git a/app/ui/onionskin.ui b/app/ui/onionskin.ui
index bc9b8967c7..9623c2cd59 100644
--- a/app/ui/onionskin.ui
+++ b/app/ui/onionskin.ui
@@ -104,6 +104,9 @@
           <property name="title">
            <string>Previous Frames</string>
           </property>
+          <property name="checkable">
+           <bool>true</bool>
+          </property>
           <layout class="QHBoxLayout" name="onionPrevLayout">
            <property name="sizeConstraint">
             <enum>QLayout::SetDefaultConstraint</enum>
@@ -120,38 +123,6 @@
            <property name="bottomMargin">
             <number>6</number>
            </property>
-           <item>
-            <widget class="QToolButton" name="onionPrevButton">
-             <property name="toolTip">
-              <string>Onion skin previous frame</string>
-             </property>
-             <property name="statusTip">
-              <string>Onion skin previous frame</string>
-             </property>
-             <property name="autoFillBackground">
-              <bool>false</bool>
-             </property>
-             <property name="text">
-              <string>...</string>
-             </property>
-             <property name="icon">
-              <iconset resource="../data/app.qrc">
-               <normaloff>:/app/icons/onionPrev.png</normaloff>:/app/icons/onionPrev.png</iconset>
-             </property>
-             <property name="iconSize">
-              <size>
-               <width>24</width>
-               <height>24</height>
-              </size>
-             </property>
-             <property name="checkable">
-              <bool>true</bool>
-             </property>
-             <property name="autoRaise">
-              <bool>true</bool>
-             </property>
-            </widget>
-           </item>
            <item>
             <widget class="QSpinBox" name="onionPrevFramesNumBox">
              <property name="sizePolicy">
@@ -214,6 +185,9 @@
           <property name="title">
            <string>Next Frames</string>
           </property>
+          <property name="checkable">
+           <bool>true</bool>
+          </property>
           <layout class="QHBoxLayout" name="onionNextlLayout">
            <property name="sizeConstraint">
             <enum>QLayout::SetDefaultConstraint</enum>
@@ -230,35 +204,6 @@
            <property name="bottomMargin">
             <number>6</number>
            </property>
-           <item>
-            <widget class="QToolButton" name="onionNextButton">
-             <property name="toolTip">
-              <string>Onion skin next frame</string>
-             </property>
-             <property name="statusTip">
-              <string>Onion skin next frame</string>
-             </property>
-             <property name="text">
-              <string>...</string>
-             </property>
-             <property name="icon">
-              <iconset resource="../data/app.qrc">
-               <normaloff>:/app/icons/onionNext.png</normaloff>:/app/icons/onionNext.png</iconset>
-             </property>
-             <property name="iconSize">
-              <size>
-               <width>24</width>
-               <height>24</height>
-              </size>
-             </property>
-             <property name="checkable">
-              <bool>true</bool>
-             </property>
-             <property name="autoRaise">
-              <bool>true</bool>
-             </property>
-            </widget>
-           </item>
            <item>
             <widget class="QSpinBox" name="onionNextFramesNumBox">
              <property name="sizePolicy">