diff --git a/components/bpmn-q/modeler-component/editor/config/ConfigModal.js b/components/bpmn-q/modeler-component/editor/config/ConfigModal.js
index 3139578b..dfdc2197 100644
--- a/components/bpmn-q/modeler-component/editor/config/ConfigModal.js
+++ b/components/bpmn-q/modeler-component/editor/config/ConfigModal.js
@@ -65,7 +65,7 @@ export default function ConfigModal({ onClose, configTabs }) {
                 configTabs.map((tab, index) => (
                   <button
                     type="button"
-                    className="qwm-innerConfig qwm-btn-primary"
+                    className="qwm-innerConfig qwm-btn-config-primary"
                     onClick={() => openTab(tab.tabId, index)}
                   >
                     {tab.tabTitle}
diff --git a/components/bpmn-q/modeler-component/editor/config/GeneralTab.js b/components/bpmn-q/modeler-component/editor/config/GeneralTab.js
index ce447f48..d8a3a316 100644
--- a/components/bpmn-q/modeler-component/editor/config/GeneralTab.js
+++ b/components/bpmn-q/modeler-component/editor/config/GeneralTab.js
@@ -77,6 +77,7 @@ export default function EditorTab() {
             <td align="right">Camunda Engine Endpoint</td>
             <td align="left">
               <input
+                className="qwm-input"
                 type="string"
                 name="camundaEndpoint"
                 value={camundaEndpoint}
@@ -93,6 +94,7 @@ export default function EditorTab() {
             <td align="right">Transformed Workflow Handler</td>
             <td align="left">
               <select
+                className="qwm-select"
                 name="workflowHandler"
                 value={workflowHandler}
                 onChange={(event) => setWorkflowHandler(event.target.value)}
@@ -114,6 +116,7 @@ export default function EditorTab() {
             <td align="right">Download file name</td>
             <td align="left">
               <input
+                className="qwm-input"
                 type="string"
                 name="fileName"
                 value={fileName}
@@ -125,6 +128,7 @@ export default function EditorTab() {
             <td align="right">Download file format</td>
             <td align="left">
               <select
+                className="qwm-select"
                 name="fileFormat"
                 value={fileFormat}
                 onChange={(event) => setFileFormat(event.target.value)}
@@ -146,6 +150,7 @@ export default function EditorTab() {
             <td align="right">Auto save file option:</td>
             <td align="left">
               <select
+                className="qwm-select"
                 name="autoSaveFileOption"
                 value={autoSaveFileOption}
                 onChange={(event) => setAutoSaveFileOption(event.target.value)}
@@ -163,6 +168,7 @@ export default function EditorTab() {
               <td align="right">Auto save interval size:</td>
               <td align="left">
                 <input
+                  className="qwm-input"
                   type="number"
                   name="autoSaveIntervalSize"
                   value={autoSaveIntervalSize}
diff --git a/components/bpmn-q/modeler-component/editor/resources/styling/camunda-styles/_buttons.css b/components/bpmn-q/modeler-component/editor/resources/styling/camunda-styles/_buttons.css
index c279f452..55740600 100644
--- a/components/bpmn-q/modeler-component/editor/resources/styling/camunda-styles/_buttons.css
+++ b/components/bpmn-q/modeler-component/editor/resources/styling/camunda-styles/_buttons.css
@@ -16,6 +16,13 @@
 }
 
 .qwm-btn-primary {
+  color: #fdfdfe;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
+  border: solid 1px var(--blue-darken-62);
+  background-color: var(--blue-base-65);
+}
+
+.qwm-btn-config-primary {
   min-width: 120px;
   color: #fdfdfe;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
@@ -46,6 +53,22 @@
   color: rgba(253, 253, 254, 0.8);
 }
 
+.qwm-btn-config-primary:hover {
+  border: solid 1px var(--blue-darken-55);
+  background-color: var(--blue-darken-62);
+}
+
+.qwm-btn-config-primary:active {
+  border: solid 1px var(--blue-darken-48);
+  background-color: var(--blue-darken-55);
+}
+
+.qwm-btn-config-primary:disabled {
+  box-shadow: none;
+  border: solid 1px var(--blue-lighten-82);
+  background-color: var(--blue-lighten-75);
+  color: rgba(253, 253, 254, 0.8);
+}
 .qwm-btn-secondary {
   color: var(--grey-darken-33);
   box-shadow: 0 2px 2px 0 var(--color-000000-opacity-10);
diff --git a/components/bpmn-q/modeler-component/editor/resources/styling/modeler.css b/components/bpmn-q/modeler-component/editor/resources/styling/modeler.css
index dff25418..15fea194 100644
--- a/components/bpmn-q/modeler-component/editor/resources/styling/modeler.css
+++ b/components/bpmn-q/modeler-component/editor/resources/styling/modeler.css
@@ -148,8 +148,8 @@
   top: 10px;
 }
 
-.qwm input,
-.qwm select {
+.qwm-input,
+.qwm-select {
   width: 100%;
   box-sizing: border-box;
 }
diff --git a/components/bpmn-q/modeler-component/extensions/data-extension/transf-task-configs/TransformationTaskConfigurationsTab.js b/components/bpmn-q/modeler-component/extensions/data-extension/transf-task-configs/TransformationTaskConfigurationsTab.js
index 47e6da7c..761683cc 100644
--- a/components/bpmn-q/modeler-component/extensions/data-extension/transf-task-configs/TransformationTaskConfigurationsTab.js
+++ b/components/bpmn-q/modeler-component/extensions/data-extension/transf-task-configs/TransformationTaskConfigurationsTab.js
@@ -27,6 +27,7 @@ export default function TransformationTaskConfigurationsTab() {
             <td align="right">Configurations Endpoint</td>
             <td align="left">
               <input
+                className="qwm-input"
                 type="string"
                 name="configurationsEndpoint"
                 value={configurationsEndpoint}
diff --git a/components/bpmn-q/modeler-component/extensions/opentosca/configTabs/OpenTOSCATab.js b/components/bpmn-q/modeler-component/extensions/opentosca/configTabs/OpenTOSCATab.js
index 9b4dacab..68eb289a 100644
--- a/components/bpmn-q/modeler-component/extensions/opentosca/configTabs/OpenTOSCATab.js
+++ b/components/bpmn-q/modeler-component/extensions/opentosca/configTabs/OpenTOSCATab.js
@@ -56,6 +56,7 @@ export default function OpenTOSCATab() {
             <td align="right">OpenTOSCA Endpoint:</td>
             <td align="left">
               <input
+                className="qwm-input"
                 type="string"
                 name="opentoscaEndpoint"
                 value={opentoscaEndpoint}
@@ -67,6 +68,7 @@ export default function OpenTOSCATab() {
             <td align="right">Winery Endpoint:</td>
             <td align="left">
               <input
+                className="qwm-input"
                 type="string"
                 name="wineryEndpoint"
                 value={wineryEndpoint}
diff --git a/components/bpmn-q/modeler-component/extensions/qhana/configurations/QHAnaConfigurationsTab.js b/components/bpmn-q/modeler-component/extensions/qhana/configurations/QHAnaConfigurationsTab.js
index 1a78dd9b..1ee74ca0 100644
--- a/components/bpmn-q/modeler-component/extensions/qhana/configurations/QHAnaConfigurationsTab.js
+++ b/components/bpmn-q/modeler-component/extensions/qhana/configurations/QHAnaConfigurationsTab.js
@@ -31,6 +31,7 @@ export default function QHAnaConfigurationsTab() {
             <td align="right">List Plugins Endpoint</td>
             <td align="left">
               <input
+                className="qwm-input"
                 type="string"
                 name="listPluginsEndpoint"
                 value={listPluginsEndpoint}
@@ -42,6 +43,7 @@ export default function QHAnaConfigurationsTab() {
             <td align="right">Get Plugin Endpoint</td>
             <td align="left">
               <input
+                className="qwm-input"
                 type="string"
                 name="getPluginEndpoint"
                 value={getPluginEndpoint}
diff --git a/components/bpmn-q/modeler-component/extensions/quantme/configTabs/GitHubTab.js b/components/bpmn-q/modeler-component/extensions/quantme/configTabs/GitHubTab.js
index 1b83d8f6..24e4418b 100644
--- a/components/bpmn-q/modeler-component/extensions/quantme/configTabs/GitHubTab.js
+++ b/components/bpmn-q/modeler-component/extensions/quantme/configTabs/GitHubTab.js
@@ -134,6 +134,7 @@ export default function GitHubTab() {
             <td align="right">QRM Repository User:</td>
             <td align="left">
               <input
+                className="qwm-input"
                 type="string"
                 name="qrmUserName"
                 value={githubUsername}
@@ -145,6 +146,7 @@ export default function GitHubTab() {
             <td align="right">QRM Repository Name:</td>
             <td align="left">
               <input
+                className="qwm-input"
                 type="string"
                 name="qrmRepoName"
                 value={githubRepositoryName}
@@ -158,6 +160,7 @@ export default function GitHubTab() {
             <td align="right">QRM Repository Path:</td>
             <td align="left">
               <input
+                className="qwm-input"
                 type="string"
                 name="qrmRepoPath"
                 value={githubRepositoryPath}
@@ -183,6 +186,7 @@ export default function GitHubTab() {
             </td>
             <td align="left">
               <input
+                className="qwm-input"
                 type="string"
                 name="githubToken"
                 value={githubToken}
@@ -199,6 +203,7 @@ export default function GitHubTab() {
             <td align="right">GitHub Repository Owner:</td>
             <td align="left">
               <input
+                className="qwm-input"
                 type="string"
                 name="uploadGithubOwner"
                 value={uploadGithubOwner}
@@ -210,6 +215,7 @@ export default function GitHubTab() {
             <td align="right">GitHub Repository Name:</td>
             <td align="left">
               <input
+                className="qwm-input"
                 type="string"
                 name="uploadGithubRepositoryName"
                 value={uploadGithubRepositoryName}
@@ -223,6 +229,7 @@ export default function GitHubTab() {
             <td align="right">GitHub Repository Branch:</td>
             <td align="left">
               <input
+                className="qwm-input"
                 type="string"
                 name="uploadBranchName"
                 value={uploadBranchName}
@@ -234,6 +241,7 @@ export default function GitHubTab() {
             <td align="right">Workflow File Name:</td>
             <td align="left">
               <input
+                className="qwm-input"
                 type="string"
                 name="uploadFileName"
                 value={uploadFileName}
diff --git a/components/bpmn-q/modeler-component/extensions/quantme/configTabs/QuantMETab.js b/components/bpmn-q/modeler-component/extensions/quantme/configTabs/QuantMETab.js
index 824a6fed..5dd4f619 100644
--- a/components/bpmn-q/modeler-component/extensions/quantme/configTabs/QuantMETab.js
+++ b/components/bpmn-q/modeler-component/extensions/quantme/configTabs/QuantMETab.js
@@ -146,6 +146,7 @@ export default function QuantMETab() {
             <td align="right">Data Configurations Endpoint</td>
             <td align="left">
               <input
+                className="qwm-input"
                 type="string"
                 name="dataConfigurationsEndpoint"
                 value={dataConfigurationsEndpoint}
@@ -164,6 +165,7 @@ export default function QuantMETab() {
             <td align="right">QuantME Framework Endpoint</td>
             <td align="left">
               <input
+                className="qwm-input"
                 type="string"
                 name="transformationFrameworkEndpoint"
                 value={transformationFrameworkEndpoint}
@@ -182,6 +184,7 @@ export default function QuantMETab() {
             <td align="right">NISQ Analyzer Endpoint:</td>
             <td align="left">
               <input
+                className="qwm-input"
                 type="string"
                 name="nisqAnalyzerEndpoint"
                 value={nisqAnalyzerEndpoint}
@@ -200,6 +203,7 @@ export default function QuantMETab() {
             <td align="right">Script Splitter Endpoint</td>
             <td align="left">
               <input
+                className="qwm-input"
                 type="string"
                 name="scriptSplitterEndpoint"
                 value={scriptSplitterEndpoint}
@@ -213,6 +217,7 @@ export default function QuantMETab() {
             <td align="right">Script Splitter Threshold</td>
             <td align="left">
               <input
+                className="qwm-input"
                 type="int"
                 name="scriptSplitterThreshold"
                 value={scriptSplitterThreshold}
@@ -231,6 +236,7 @@ export default function QuantMETab() {
             <td align="right">Qiskit Runtime Handler Endpoint:</td>
             <td align="left">
               <input
+                className="qwm-input"
                 type="string"
                 name="qiskitRuntimeHandlerEndpoint"
                 value={qiskitRuntimeHandlerEndpoint}
@@ -244,6 +250,7 @@ export default function QuantMETab() {
             <td align="right">AWS Runtime Handler Endpoint:</td>
             <td align="left">
               <input
+                className="qwm-input"
                 type="string"
                 name="awsRuntimeHandlerEndpoint"
                 value={awsRuntimeHandlerEndpoint}
@@ -262,6 +269,7 @@ export default function QuantMETab() {
             <td align="right">Retrieve Intermediate Results:</td>
             <td align="left">
               <input
+                className="qwm-input"
                 type="checkbox"
                 name="hybridRuntimeProvenance"
                 checked={hybridRuntimeProvenanceBoolean}