diff --git a/.gitignore b/.gitignore
index 48219718..609ad052 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 
 # dependencies
 node_modules
+**/node_modules
 .pnp
 .pnp.js
 
@@ -10,8 +11,6 @@ coverage
 
 # next.js
 .next/
-out/
-build
 
 # misc
 .DS_Store
@@ -24,17 +23,16 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+**/.env
+**/.env.*
 
 # turbo
 .turbo
 
 .contentlayer
-tsconfig.tsbuildinfo
+**/tsconfig.tsbuildinfo
 
+# build
 **/dist
 
 **/.npmrc
\ No newline at end of file
diff --git a/.nvmrc b/.nvmrc
deleted file mode 100644
index 3f430af8..00000000
--- a/.nvmrc
+++ /dev/null
@@ -1 +0,0 @@
-v18
diff --git a/pkgs/luxdefi-ui/blocks/components/banner-block.tsx b/pkgs/luxdefi-ui/blocks/components/banner-block.tsx
deleted file mode 100644
index 869eca7a..00000000
--- a/pkgs/luxdefi-ui/blocks/components/banner-block.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-
-import React  from 'react'
-
-import type { Dimensions, TShirtSize } from '../../types'
-import type { Block, BannerBlock } from '../def'
-
-import VideoBlockComponent from './video-block'
-import CTABlockComponent from './cta-block'
-
-type BannerGrouping = 'all-separate' | 'title-media-cta' | 'titleAndMedia-cta'
-
-const BannerBlockComponent: React.FC<{
-  block: Block,
-  videoSize?: TShirtSize
-  videoConstraint?: Dimensions
-  grouping?: BannerGrouping
-  groupingClasses?: string[] // count should match number of siblings in the chosen grouping 
-  ctaItemClassName?: string
-}> = ({
-  block,
-  grouping = 'titleAndMedia-cta',
-  groupingClasses=[],
-  ctaItemClassName='',
-  videoSize='md',
-  videoConstraint
-}) => {
-
-  if (block.blockType !== 'banner') {
-    return <>banner block required</>
-  }
-  const banner = block as BannerBlock
-
-  if (grouping === 'title-media-cta') {
-    const titleClasses = (groupingClasses && groupingClasses[0]) ? groupingClasses[0] : ''
-    const mediaClasses = (groupingClasses && groupingClasses[1]) ? groupingClasses[1] : ''
-    const ctaClasses = (groupingClasses && groupingClasses[2]) ? groupingClasses[2] : ''
-    return (<>
-      <div className={titleClasses}>
-        <h1>{banner.title}</h1>
-        {banner.byline && (<h5 className='text-center'>{banner.byline}</h5>)}
-      </div>
-      <div className={'self-center flex flex-col justify-start items-center ' + mediaClasses}>
-        {banner.contentBefore && banner.contentBefore}
-        {banner.video && (
-          <VideoBlockComponent className='self-center mt-6 not-typography' block={banner.video} size={videoSize} constraint={videoConstraint}/>
-        )}
-        {banner.contentAfter && banner.contentAfter }
-      </div>
-      {banner.cta && (
-        <div className={'flex flex-row items-stretch gap-2 sm:gap-6 sm:justify-center ' + ctaClasses}>
-          <CTABlockComponent block={banner.cta} itemClassName={ctaItemClassName} itemSize='lg'/>
-        </div>  
-      )}
-    </>)
-  }
-  else if (grouping === 'titleAndMedia-cta') {
-    const titleAndMediaClasses = (groupingClasses && groupingClasses[0]) ? groupingClasses[0] : ''
-    const ctaClasses = (groupingClasses && groupingClasses[1]) ? groupingClasses[1] : ''
-    return (<>
-      <div className={'self-center flex flex-col justify-start items-center ' + titleAndMediaClasses} >
-        <h1>{banner.title}</h1>
-        {banner.byline && (<h5 className='text-center'>{banner.byline}</h5>)}
-        {banner.contentBefore && banner.contentBefore}
-        {banner.video && (
-          <VideoBlockComponent className='self-center mt-6 not-typography' block={banner.video} size={videoSize} constraint={videoConstraint}/>
-        )}
-        {banner.contentAfter && banner.contentAfter }
-      </div>
-      {banner.cta && (
-        <div className={'flex flex-row items-stretch gap-2 sm:gap-6 justify-center ' + ctaClasses}>
-          <CTABlockComponent block={banner.cta} itemClassName={'xs:w-1/2 ' + ctaItemClassName} itemSize='lg'  />
-        </div>  
-      )}
-    </>)
-  }
-  
-  const titleClasses = (groupingClasses && groupingClasses[0]) ? groupingClasses[0] : ''
-  const bylineClasses = (groupingClasses && groupingClasses[1]) ? groupingClasses[1] : ''
-  const contentBeforeClasses = (groupingClasses && groupingClasses[2]) ? groupingClasses[2] : ''
-  const mediaClasses = (groupingClasses && groupingClasses[3]) ? groupingClasses[3] : ''
-  const contentAfterClasses = (groupingClasses && groupingClasses[4]) ? groupingClasses[4] : ''
-  const ctaClasses = (groupingClasses && groupingClasses[5]) ? groupingClasses[5] : ''
-
-  return (<>
-    <h1 className={titleClasses}>{banner.title}</h1>
-    {banner.byline && (<h5 className={'text-center ' + bylineClasses}>{banner.byline}</h5>)}
-    {banner.contentBefore && (<div className={contentBeforeClasses}>banner.contentBefore</div>)}
-    {banner.video && (
-      <VideoBlockComponent className={'self-center mt-6 not-typography ' + mediaClasses} block={banner.video} size={videoSize} constraint={videoConstraint}/>
-    )}
-    {banner.contentAfter && (<div className={contentAfterClasses}>banner.contentAfter</div>)}
-    {banner.cta && (
-      <div className={'flex flex-col gap-4 items-stretch sm:flex-row sm:gap-6 sm:justify-center ' + ctaClasses}>
-        <CTABlockComponent block={banner.cta} itemClassName={ctaItemClassName} itemSize='lg' />
-      </div>  
-    )}
-  </>)
-}
-
-export {
-  BannerBlockComponent as default,
-  type BannerGrouping as AssetBannderGroupingType
-}
diff --git a/pkgs/luxdefi-ui/blocks/components/index.ts b/pkgs/luxdefi-ui/blocks/components/index.ts
index 06f1ac5a..3ccfe1e1 100644
--- a/pkgs/luxdefi-ui/blocks/components/index.ts
+++ b/pkgs/luxdefi-ui/blocks/components/index.ts
@@ -1,5 +1,4 @@
 import AccordianBlock from './accordian-block'
-import BannerBlock from  './banner-block'
 import BlockFactory from './block-factory'
 import CardBlock from './card-block'
 import CTABlock from './cta-block'
@@ -11,7 +10,6 @@ import SpaceBlock from './space-block'
 
 export { 
    AccordianBlock as AccordianBlockComponent, 
-   BannerBlock as BannerBlockComponent, 
    BlockFactory,
    CardBlock as CardBlockComponent,
    CTABlock as CTABlockComponent,
diff --git a/pkgs/luxdefi-ui/blocks/def/banner-block.ts b/pkgs/luxdefi-ui/blocks/def/banner-block.ts
deleted file mode 100644
index cf5632ee..00000000
--- a/pkgs/luxdefi-ui/blocks/def/banner-block.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-import type Block from './block'
-import type VideoBlock from './video-block'
-import type CTABlock from './cta-block'
-
-interface BannerBlock extends Block {
-  blockType: 'banner'
-  title: string
-  byline?: string
-  contentBefore?: React.ReactNode
-  video?: VideoBlock
-  contentAfter?: React.ReactNode
-  cta?: CTABlock
-}
-
-export {
-  type BannerBlock as default
-}
diff --git a/pkgs/luxdefi-ui/blocks/def/index.ts b/pkgs/luxdefi-ui/blocks/def/index.ts
index 76aaaa3d..3b61cb20 100644
--- a/pkgs/luxdefi-ui/blocks/def/index.ts
+++ b/pkgs/luxdefi-ui/blocks/def/index.ts
@@ -1,5 +1,4 @@
 import type AccordianBlock from './accordian-block'
-import type BannerBlock from  './banner-block'
 import type Block from './block'
 import type CardBlock from './card-block'
 import type CTABlock from './cta-block'
@@ -13,7 +12,6 @@ import type SpecialBlock from './special-block'
 
 export { 
    type AccordianBlock, 
-   type BannerBlock, 
    type Block,
    type CardBlock,
    type CTABlock,
diff --git a/pkgs/luxdefi-ui/index.ts b/pkgs/luxdefi-ui/index.ts
index 1d30e4a1..bc34e8ae 100644
--- a/pkgs/luxdefi-ui/index.ts
+++ b/pkgs/luxdefi-ui/index.ts
@@ -18,4 +18,3 @@ export {
 } from './types'
 
 export * from './primitives'
-export * from './next'
diff --git a/pkgs/luxdefi-ui/next/README.md b/pkgs/luxdefi-ui/next/README.md
new file mode 100644
index 00000000..d0e920ec
--- /dev/null
+++ b/pkgs/luxdefi-ui/next/README.md
@@ -0,0 +1,11 @@
+# Next related Lux helpers
+
+### no `index.ts` file, and `load-and-return-lux-next-fonts-on-import.ts`
+
+Next font loading requires the fonts to be assigned to const's in module scope (ie, loaded when the module is evaluated, exactly once).
+
+If there was an `index.ts` "barrel file", and the client code imported anything from this package, it would have resulted in evaluting all the packages imported including the that loaded the fonts. Without the index, the client code knows what modules import it and thus when it happens.
+
+tl;dr: See [this article from Vercel](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js) about this issue. 
+
+(Previously, not having this safegaurd caused a serious bug becuase the fonts were loaded far too early.)
\ No newline at end of file
diff --git a/pkgs/luxdefi-ui/next/determine-device-middleware.ts b/pkgs/luxdefi-ui/next/determine-device-middleware.ts
index fb451003..f7a04574 100644
--- a/pkgs/luxdefi-ui/next/determine-device-middleware.ts
+++ b/pkgs/luxdefi-ui/next/determine-device-middleware.ts
@@ -1,7 +1,8 @@
 import { NextRequest, NextResponse, userAgent } from 'next/server'
 import { getSelectorsByUserAgent } from 'react-device-detect'
 
-export const determineDeviceMiddleware = async (request: NextRequest) => {
+  // writed this way so they can be chained :)
+const determineDeviceMiddleware = async (request: NextRequest) => {
 
   const ua = userAgent(request)
   const { isMobileOnly, isTablet, isDesktop } = getSelectorsByUserAgent(ua.ua)
@@ -11,3 +12,5 @@ export const determineDeviceMiddleware = async (request: NextRequest) => {
   url.searchParams.set('agent', agent)
   return NextResponse.rewrite(url)
 }
+
+export default determineDeviceMiddleware
diff --git a/pkgs/luxdefi-ui/next/get-app-router-font-classes.ts b/pkgs/luxdefi-ui/next/get-app-router-font-classes.ts
index c47ddd84..88494b89 100644
--- a/pkgs/luxdefi-ui/next/get-app-router-font-classes.ts
+++ b/pkgs/luxdefi-ui/next/get-app-router-font-classes.ts
@@ -1,18 +1,12 @@
-import fontDescs from './lux-next-fonts'
+import nextFonts from './load-and-return-lux-next-fonts-on-import'
 import type NextFontDesc from './next-font-desc'
 
   // These will be injected for <body> in app router app that uses our RootLayout
 
   // First is assumed to be mapped to the default font and is injected into <body>
   // as a normal tw font family class.
-export default () => {
-  let nextFonts: NextFontDesc[] = []
-  fontDescs.forEach((desc: NextFontDesc) => {
-    if (desc.nextFont) {
-      nextFonts.push(desc)
-    }
-  })
-  return nextFonts.map(
-    (desc: NextFontDesc) => (desc.nextFont!.variable)
-  ).join(' ') + ` font-${nextFonts[0].twName}`
-}
+export default () => (
+  nextFonts.map(
+      (desc: NextFontDesc) => (desc.nextFont!.variable)
+    ).join(' ') + ` font-${nextFonts[0].twName}`
+)
diff --git a/pkgs/luxdefi-ui/next/index.ts b/pkgs/luxdefi-ui/next/index.ts
deleted file mode 100644
index ddf036f7..00000000
--- a/pkgs/luxdefi-ui/next/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { determineDeviceMiddleware } from './determine-device-middleware'
-import NotFoundMDX from './not-found-content.mdx'
-import NotFound from './not-found'
-import RootLayout from './root-layout'
-import luxNextFonts from './lux-next-fonts'
-import type {default as NextFontDesc,  NextFontWithVariable,} from './next-font-desc'
-import getAppRouterBodyFontClasses from './get-app-router-font-classes'
-import PagesRouterFontVars from './pages-router-font-vars'
-
-export {
-  determineDeviceMiddleware,
-  NotFoundMDX,
-  NotFound,
-  RootLayout,
-  getAppRouterBodyFontClasses,
-  PagesRouterFontVars,
-  luxNextFonts,
-  type NextFontDesc,
-  type NextFontWithVariable,
-}
diff --git a/pkgs/luxdefi-ui/next/lux-next-fonts.ts b/pkgs/luxdefi-ui/next/load-and-return-lux-next-fonts-on-import.ts
similarity index 85%
rename from pkgs/luxdefi-ui/next/lux-next-fonts.ts
rename to pkgs/luxdefi-ui/next/load-and-return-lux-next-fonts-on-import.ts
index e9df80e9..b761bc09 100644
--- a/pkgs/luxdefi-ui/next/lux-next-fonts.ts
+++ b/pkgs/luxdefi-ui/next/load-and-return-lux-next-fonts-on-import.ts
@@ -6,6 +6,15 @@ import type TwFontDesc from '../tailwind/tw-font-desc'
 
 import twFonts from '../tailwind/lux-tw-fonts'
 
+/*
+  Creating NextFontDesc's and TwFontDesc's has to be seperated because they are needed 
+  at different times during the next compile / build.  Otherwise a nasty 
+  race condition happens! 
+
+  Also, requires that "Font loaders must be called and assigned to a const in the module scope"
+
+*/
+
 const drukTextWide = localFont({
   src: [
     {
@@ -32,14 +41,7 @@ const inter = Inter({
   subsets: ["latin"],
   variable: "--font-inter",
 })
-
-
-/*
-  NextFontDesc and TwFontDesc have to be seperate because they are needed 
-  at different times during the next compile / build.  Otherwise a nasty 
-  race condition happens! That's why they are in different files.
-*/
-
+  
 export default [
   {
     font: inter,
@@ -62,3 +64,5 @@ export default [
     })
   }
 ) as NextFontDesc[]
+
+
diff --git a/pkgs/luxdefi-ui/next/pages-router-font-vars.tsx b/pkgs/luxdefi-ui/next/pages-router-font-vars.tsx
index 5068ca09..3af66999 100644
--- a/pkgs/luxdefi-ui/next/pages-router-font-vars.tsx
+++ b/pkgs/luxdefi-ui/next/pages-router-font-vars.tsx
@@ -1,5 +1,5 @@
 
-import nextFonts from './lux-next-fonts'
+import nextFonts from './load-and-return-lux-next-fonts-on-import'
 import type NextFontDesc from './next-font-desc'
 
 const PagesRouterFontVars: React.FC = () => {
diff --git a/pkgs/luxdefi-ui/package.json b/pkgs/luxdefi-ui/package.json
index a02a2d58..e74ac06f 100644
--- a/pkgs/luxdefi-ui/package.json
+++ b/pkgs/luxdefi-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@luxdefi/ui",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Library that contains shared UI primitives, styles, and core types",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
diff --git a/pkgs/luxdefi-ui/primitives/video-player.tsx b/pkgs/luxdefi-ui/primitives/video-player.tsx
index 66e8e0aa..738a21c4 100644
--- a/pkgs/luxdefi-ui/primitives/video-player.tsx
+++ b/pkgs/luxdefi-ui/primitives/video-player.tsx
@@ -1,19 +1,15 @@
 'use client'
 import React from 'react'
 
-import type { Dimensions } from '../types'
-
 interface VideoProps extends React.ComponentPropsWithoutRef<"video"> {
   sources: string[]
   className?: string
-  constrainTo?: Dimensions
 }
 
 const VideoPlayer = React.forwardRef<HTMLVideoElement, VideoProps>(
 ({
   sources, 
   className='', 
-  constrainTo,
   ...rest
 }, ref) => {