diff --git a/js-framework/index.ts b/js-framework/index.ts
index 1397afed..99f7d6a8 100644
--- a/js-framework/index.ts
+++ b/js-framework/index.ts
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 export * from "./src/ui/view"
+export * from "./src/ui/layout"
 export * from "./src/ui/listview"
 export * from "./src/ui/panel"
 export * from "./src/ui/declarative"
diff --git a/js-framework/src/ui/declarative.ts b/js-framework/src/ui/declarative.ts
index e8f58894..cbfaccfc 100644
--- a/js-framework/src/ui/declarative.ts
+++ b/js-framework/src/ui/declarative.ts
@@ -1,4 +1,5 @@
-import { Text, Image, HLayout, VLayout, Stack, LayoutConfig, View, IText, IImage } from './view'
+import { Text, Image, LayoutConfig, View, IText, IImage } from './view'
+import { Stack, HLayout, VLayout } from './layout'
 
 export function text(config: IText) {
     const ret = new Text
diff --git a/js-framework/src/ui/layout.ts b/js-framework/src/ui/layout.ts
new file mode 100644
index 00000000..18160f25
--- /dev/null
+++ b/js-framework/src/ui/layout.ts
@@ -0,0 +1,49 @@
+import { LayoutConfig, Group, Property, IView } from "./view";
+import { Gravity } from "../util/gravity";
+
+export interface StackConfig extends LayoutConfig {
+
+}
+
+export interface LinearConfig extends LayoutConfig {
+    weight?: number
+}
+
+export interface IStack extends IView {
+    gravity?: Gravity
+}
+
+export class Stack extends Group implements IStack {
+    @Property
+    gravity?: Gravity
+}
+
+
+
+export class Root extends Stack {
+
+}
+class LinearLayout extends Group {
+    @Property
+    space?: number
+
+    @Property
+    gravity?: Gravity
+}
+
+export interface IVLayout extends IView {
+    space?: number
+    gravity?: Gravity
+}
+
+export class VLayout extends LinearLayout implements VLayout {
+}
+
+
+export interface IHLayout extends IView {
+    space?: number
+    gravity?: Gravity
+}
+
+export class HLayout extends LinearLayout implements IHLayout {
+}
diff --git a/js-framework/src/ui/listview.ts b/js-framework/src/ui/listview.ts
index ff6b9de2..ef10161a 100644
--- a/js-framework/src/ui/listview.ts
+++ b/js-framework/src/ui/listview.ts
@@ -1,6 +1,7 @@
-import { View, Stack, Property, SuperView, Group, LayoutSpec } from "./view";
+import { View, Property, SuperView, Group, LayoutSpec } from "./view";
 import { Model } from "../util/types";
 import { O_TRUNC } from "constants";
+import { Stack } from "./layout";
 
 /*
  * Copyright [2019] [Doric.Pub]
diff --git a/js-framework/src/ui/panel.ts b/js-framework/src/ui/panel.ts
index e2abef1e..0aae8d94 100644
--- a/js-framework/src/ui/panel.ts
+++ b/js-framework/src/ui/panel.ts
@@ -14,9 +14,10 @@
  * limitations under the License.
  */
 import './../runtime/global'
-import { View, Group, Root } from "./view";
+import { View, Group } from "./view";
 import { loge, log } from '../util/log';
 import { Model } from '../util/types';
+import { Root } from './layout';
 
 
 export function NativeCall(target: Panel, propertyKey: string, descriptor: PropertyDescriptor) {