diff --git a/www/main/viewer/Slide/PaddingTools.jsx b/www/main/viewer/Slide/PaddingTools.jsx
new file mode 100644
index 000000000..e09cb74a2
--- /dev/null
+++ b/www/main/viewer/Slide/PaddingTools.jsx
@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const PaddingTools = (props) => {
+    const [paddingToolsOpen, setPaddingToolsOpen] = useState(false);
+    return (
+        <div className={`slide-quicktools ${!userSettings.quickTools ? 'hide-quicktools' : ''}`.trim()}>
+            <div className="quicktool-header" onClick={() => setPaddingToolsOpen(!paddingToolsOpen)}>
+                Padding Tools
+                <i className={`fa fa-caret-${quickToolsOpen ? 'up' : 'down'}`}></i>
+            </div>
+            {paddingToolsOpen && (
+                <div className={`quicktool-body quicktool-${isMiscSlide ? 'announcement' : 'gurbani'}`}>
+                {baniOrder.map((order, index) => (
+                    <div key={`item-${index}`} className="quicktool-item">
+                    {handleQuickTools(order, index)}
+                    <div className="quicktool-icons">{bakeIcons(order, index, quickToolsModifiers)}</div>
+                    </div>
+                ))}
+                </div>
+            )}
+        </div>
+    )   
+}
+
+PaddingTools.propTypes = {
+    isMiscSlide: PropTypes.bool
+}
+
+export default PaddingTools;
\ No newline at end of file
diff --git a/www/main/viewer/store/ViewerState.js b/www/main/viewer/store/ViewerState.js
index 8b2e74645..d0108db58 100644
--- a/www/main/viewer/store/ViewerState.js
+++ b/www/main/viewer/store/ViewerState.js
@@ -30,6 +30,7 @@ const ViewerState = createStore({
   },
   viewerSettings: {
     quickToolsOpen: false,
+    paddingToolsOpen: false,
     slideOrder: ['translation', 'teeka', 'transliteration'],
     setSlideOrder: action((state, slideOrder) => ({
       ...state,
@@ -37,9 +38,16 @@ const ViewerState = createStore({
     })),
     setQuickToolsOpen: action((state, payload) => {
       const newState = state;
+      newState.paddingToolsOpen = false; // explictely making sure we are closing the paddingTools when setting the quick tools.
       newState.quickToolsOpen = payload;
       return newState;
     }),
+    setPaddingToolsOpen: action((state, payload) => {
+      const newState = state;
+      newState.quickToolsOpen = false; // explictely making sure we are closing the quickTools when setting the padding tools.
+      newState.paddingToolsOpen = payload;
+      return newState;
+    }),
   },
 });