diff --git a/packages/flow-core/src/components/f-form/_f-form-variables.scss b/packages/flow-core/src/components/f-form/_f-form-variables.scss
new file mode 100644
index 000000000..104673a02
--- /dev/null
+++ b/packages/flow-core/src/components/f-form/_f-form-variables.scss
@@ -0,0 +1,22 @@
+$sizes: (
+	"medium": 16px,
+	"small": 12px
+);
+/**
+$gaps map hold gap attribute related values
+**/
+
+$gaps: (
+	"large": (
+		"gap": 16px
+	),
+	"medium": (
+		"gap": 12px
+	),
+	"small": (
+		"gap": 8px
+	),
+	"x-small": (
+		"gap": 4px
+	)
+);
diff --git a/packages/flow-core/src/components/f-form/f-form-global.scss b/packages/flow-core/src/components/f-form/f-form-global.scss
new file mode 100644
index 000000000..91a47b50b
--- /dev/null
+++ b/packages/flow-core/src/components/f-form/f-form-global.scss
@@ -0,0 +1,28 @@
+@use "sass:map";
+
+@import "./../../mixins/scss/mixins";
+@import "./f-form-variables";
+
+f-form {
+	@include base();
+	display: flex;
+	overflow: auto;
+	flex: 1 0 auto;
+	@each $size, $value in $sizes {
+		&[size="#{$size}"] {
+			@include inherit-size($size);
+		}
+	}
+	&[separator] {
+		@each $gap, $value in $gaps {
+			&[gap="#{$gap}"] {
+				> f-form-group {
+					&:not(:first-child) {
+						border-top: 1px solid var(--color-border-default);
+						padding-top: map.get($value, "gap");
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/flow-core/src/components/f-form/f-form.scss b/packages/flow-core/src/components/f-form/f-form.scss
index 0070849cd..fff94f4b2 100644
--- a/packages/flow-core/src/components/f-form/f-form.scss
+++ b/packages/flow-core/src/components/f-form/f-form.scss
@@ -1,29 +1,7 @@
 @use "sass:map";
 
 @import "./../../mixins/scss/mixins";
-
-$sizes: (
-	"medium": 16px,
-	"small": 12px
-);
-/**
-$gaps map hold gap attribute related values
-**/
-
-$gaps: (
-	"large": (
-		"gap": 16px
-	),
-	"medium": (
-		"gap": 12px
-	),
-	"small": (
-		"gap": 8px
-	),
-	"x-small": (
-		"gap": 4px
-	)
-);
+@import "./f-form-variables";
 
 :host {
 	form {
@@ -37,27 +15,3 @@ $gaps: (
 		}
 	}
 }
-
-f-form {
-	@include base();
-	display: flex;
-	overflow: auto;
-	flex: 1 0 auto;
-	@each $size, $value in $sizes {
-		&[size="#{$size}"] {
-			@include inherit-size($size);
-		}
-	}
-	&[separator] {
-		@each $gap, $value in $gaps {
-			&[gap="#{$gap}"] {
-				> f-form-group {
-					&:not(:first-child) {
-						border-top: 1px solid var(--color-border-default);
-						padding-top: map.get($value, "gap");
-					}
-				}
-			}
-		}
-	}
-}
diff --git a/packages/flow-core/src/components/f-form/f-form.ts b/packages/flow-core/src/components/f-form/f-form.ts
index c8425b6ff..e0dbda896 100644
--- a/packages/flow-core/src/components/f-form/f-form.ts
+++ b/packages/flow-core/src/components/f-form/f-form.ts
@@ -3,8 +3,11 @@ import { property } from "lit/decorators.js";
 import { FRoot } from "../../mixins/components/f-root/f-root";
 import { FText } from "../f-text/f-text";
 import eleStyle from "./f-form.scss?inline";
+import globalStyle from "./f-form-global.scss?inline";
 import { FDiv } from "../f-div/f-div";
 import { flowElement } from "./../../utils";
+import { injectCss } from "@cldcvr/flow-core-config";
+injectCss("f-form", globalStyle);
 
 // import { ref, createRef } from "lit/directives/ref.js";
 
@@ -16,7 +19,7 @@ export class FForm extends FRoot {
 	/**
 	 * css loaded from scss file
 	 */
-	static styles = [unsafeCSS(eleStyle), ...FText.styles, ...FDiv.styles];
+	static styles = [unsafeCSS(eleStyle), unsafeCSS(globalStyle), ...FText.styles, ...FDiv.styles];
 
 	/**
 	 * @attribute Gap is used to define the gap between the elements