diff --git a/Parts/Button.js b/Parts/Button.js
index b2c7633..111ef91 100644
--- a/Parts/Button.js
+++ b/Parts/Button.js
@@ -1,6 +1,6 @@
 import React from "react"
 import tw, { styled } from "twin.macro"
-import "styled-components/macro"
+ 
 import { colors, colorsDisabled, colorsHover } from "./Colors"
 
 const BtnCreator = function ({ children, type, ...props }) {
diff --git a/Parts/Card.js b/Parts/Card.js
index 62bc23f..9e18c07 100644
--- a/Parts/Card.js
+++ b/Parts/Card.js
@@ -1,6 +1,6 @@
 import React from "react";
 import tw, {styled} from "twin.macro"
-import "styled-components/macro"
+ 
 
 let Card = styled.div(tw`relative flex flex-col min-w-0 break-words bg-primary w-full shadow-xl rounded-2xl`)
 
diff --git a/Parts/Colors.js b/Parts/Colors.js
index 92039b5..fc970d8 100644
--- a/Parts/Colors.js
+++ b/Parts/Colors.js
@@ -1,6 +1,6 @@
 
 import tw, {styled} from "twin.macro"
-import "styled-components/macro"
+ 
 
 
 export let colors = {
diff --git a/Parts/DropDown.js b/Parts/DropDown.js
index e109d23..6371e00 100644
--- a/Parts/DropDown.js
+++ b/Parts/DropDown.js
@@ -3,7 +3,7 @@ import { createPopper } from "@popperjs/core";
 import { usePopper } from 'react-popper';
 
 import tw, { styled } from "twin.macro"
-import "styled-components/macro"
+ 
 
 import { colors, colorsDisabled, colorsHover, textColors, textColorsHover } from "./Colors";
 
diff --git a/Parts/Input.js b/Parts/Input.js
index 83589bd..8740572 100644
--- a/Parts/Input.js
+++ b/Parts/Input.js
@@ -1,7 +1,7 @@
 import React from "react";
 
 import tw, { styled } from "twin.macro";
-import "styled-components/macro";
+ ;
 //import { useField as useFormikField, useFormikContext } from "formik";
 const useFormikField = null;
 const useFormikContext = ()=>{};
diff --git a/Parts/Layout.js b/Parts/Layout.js
index 9afc4a8..3d46be1 100644
--- a/Parts/Layout.js
+++ b/Parts/Layout.js
@@ -1,11 +1,11 @@
 import React from "react"
 import tw, {styled} from "twin.macro"
-import "styled-components/macro"
+ 
 
 const Full = styled.div(tw`w-full lg:px-2 py-2`)
 export {Full}
 
-const Half = styled.div(tw`w-full lg:w-6/12 lg:px-2 py-2`)
+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 `)
@@ -14,7 +14,7 @@ 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-4/12 lg:px-2 py-2 `)
+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 `)
diff --git a/Parts/Modal.js b/Parts/Modal.js
index 8cd60dd..96a922d 100644
--- a/Parts/Modal.js
+++ b/Parts/Modal.js
@@ -2,7 +2,7 @@ import React from "react"
 import { Half, Third } from "./Layout"
 
 import tw, { styled } from "twin.macro"
-import "styled-components/macro"
+ 
 
 function Modal({ isOpen, onBackdropClick, ...props }) {
   if (isOpen) {
diff --git a/Parts/Pagination.js b/Parts/Pagination.js
index 43ac140..4cefca2 100644
--- a/Parts/Pagination.js
+++ b/Parts/Pagination.js
@@ -1,6 +1,6 @@
 import Button from "./Button";
 import tw, { styled } from "twin.macro";
-import "styled-components/macro";
+ ;
 
 const Btn = styled(Button)(({ active }) => [tw`rounded-none mx-0`, active && tw`bg-accent`]);
 
diff --git a/Parts/RangeSlider.js b/Parts/RangeSlider.js
index 0e922d8..9e38998 100644
--- a/Parts/RangeSlider.js
+++ b/Parts/RangeSlider.js
@@ -3,7 +3,7 @@ import React, { useState, useEffect, useRef } from "react";
 import styles from "./RangeSlider.scss"
 
 import tw from "twin.macro"
-import "styled-components/macro"
+ 
 
 
 export function RangeSlider({ value=0, rangeType="", onChange, min=0, max=10, right = true, ...props }) {
diff --git a/Parts/Table.js b/Parts/Table.js
index 7364e4f..8493997 100644
--- a/Parts/Table.js
+++ b/Parts/Table.js
@@ -1,6 +1,6 @@
 import React from "react";
 import tw, {styled} from "twin.macro"
-import "styled-components/macro"
+ 
 
 export function Table(props) {
   return <div tw="block w-full overflow-x-auto text-secondary">
diff --git a/Parts/Text.js b/Parts/Text.js
index 52da39d..faef462 100644
--- a/Parts/Text.js
+++ b/Parts/Text.js
@@ -1,6 +1,6 @@
 import React from "react"
 import tw, {styled} from "twin.macro"
-import "styled-components/macro"
+ 
 import { textColors, textColorsHover } from "./Colors"
 
 
diff --git a/globalStyle.js b/globalStyle.js
index 3d65f85..a94613e 100644
--- a/globalStyle.js
+++ b/globalStyle.js
@@ -1,4 +1,3 @@
-import React, { useState } from "react"
 import { createGlobalStyle } from "styled-components"
 import tw, { theme, GlobalStyles as BaseStyles } from "twin.macro"
 
diff --git a/styledRegistry.js b/styledRegistry.js
new file mode 100644
index 0000000..10da128
--- /dev/null
+++ b/styledRegistry.js
@@ -0,0 +1,25 @@
+'use client'
+
+import React, { useState } from 'react'
+import { useServerInsertedHTML } from 'next/navigation'
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
+
+export default function StyledComponentsRegistry({ children }) {
+  // Only create stylesheet once with lazy initial state
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement()
+    styledComponentsStyleSheet.instance.clearTag()
+    return <>{styles}</>
+  })
+
+  if (typeof window !== 'undefined') return <>{children}</>
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  )
+}
\ No newline at end of file