diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte
index 9e11a546e..7fb5742c4 100644
--- a/packages/builder/src/components/userInterface/FlatButton.svelte
+++ b/packages/builder/src/components/userInterface/FlatButton.svelte
@@ -19,20 +19,20 @@
 <style>
   .flatbutton {
     cursor: pointer;
-    padding: 8px 4px;
+    padding: 8px 2px;
     text-align: center;
     background: #ffffff;
     color: var(--ink-light);
     border-radius: 5px;
     font-family: Roboto;
-    font-size: 13px;
-    font-weight: 500;
-    transition: background 0.5s, color 0.5s ease;
+    font-size: 14px;
+    font-weight: 400;
+    transition: all 0.3s;
     text-rendering: optimizeLegibility;
   }
 
   .selected {
-    background: #808192;
+    background: var(--ink-light);
     color: #ffffff;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
index 9081694c0..ffa1a9839 100644
--- a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
+++ b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
@@ -1,6 +1,5 @@
 <script>
   import { onMount } from "svelte"
-
   import FlatButton from "./FlatButton.svelte"
   export let buttonProps = []
   export let isMultiSelect = false
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 96c11bec3..26e236533 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -148,8 +148,7 @@ export const typography = [
   {
     label: "Color",
     key: "color",
-    control: OptionSelect,
-    options: ["black", "white", "red", "blue", "green"],
+    control: Input,
   },
   {
     label: "align",
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 072bc143a..ed084afbe 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -295,7 +295,7 @@ export default {
           description:
             "This component is a placeholder for the rendering of a screen within a page.",
           icon: "ri-crop-2-fill",
-          commonProps: {},
+          commonProps: { design: { ...all } },
           children: [],
         },
         {