diff --git a/Parts/Layout.js b/Parts/Layout.js
deleted file mode 100644
index 3d46be1..0000000
--- a/Parts/Layout.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react"
-import tw, {styled} from "twin.macro"
- 
-
-const Full = styled.div(tw`w-full lg:px-2 py-2`)
-export {Full}
-
-const Half = styled.div(tw`w-full lg:w-8/12 xl:w-6/12 lg:px-2 py-2`)
-export {Half}
-
-const Quarter = styled.div(tw`w-full lg:w-6/12 xl:w-3/12 lg:px-2 py-2 `)
-export {Quarter}
-
-const Sixth = styled.div(tw`w-full lg:w-1/5 xl:w-1/6 lg:px-2 py-2 `)
-export {Sixth}
-
-const Third = styled.div(tw`w-full lg:w-8/12 xl:w-4/12 lg:px-2 py-2 `)
-export {Third}
-
-const TwoThird = styled.div(tw`w-full lg:w-8/12 lg:px-2 py-2 `)
-export {TwoThird}
diff --git a/Parts/Layout.jsx b/Parts/Layout.jsx
new file mode 100644
index 0000000..80dbf4a
--- /dev/null
+++ b/Parts/Layout.jsx
@@ -0,0 +1,11 @@
+export function Full({ className, ...props }) { return <div className={"w-full lg:px-2 py-2" + className} {...props} /> }
+
+export function Half({ className, ...props }) { return <div className={"w-full lg:w-8/12 xl:w-6/12 lg:px-2 py-2" + className} {...props} /> }
+
+export function Quarter({ className, ...props }) { return <div className={"w-full lg:w-6/12 xl:w-3/12 lg:px-2 py-2" + className} {...props} />; }
+
+export function Sixth({ className, ...props }) { return <div className={"w-full lg:w-1/5 xl:w-1/6 lg:px-2 py-2" + className} {...props} />; }
+
+export function Third({ className, ...props }) { return <div className={"w-full lg:w-8/12 xl:w-4/12 lg:px-2 py-2" + className}  {...props} />; }
+
+export function classNameoThird({ className, ...props }) { return <div className={"w-full lg:w-8/12 lg:px-2 py-2" + className}  {...props} />; }
\ No newline at end of file