diff --git a/Luxe/shaders/pixel_text.emsl b/Luxe/shaders/pixel_text.emsl
index 5c2eaf0..16375d4 100644
--- a/Luxe/shaders/pixel_text.emsl
+++ b/Luxe/shaders/pixel_text.emsl
@@ -12,7 +12,14 @@ input View {
 }
 
 input Font {
-  image2D pages[8]
+	image2D page0,
+	image2D page1,
+	image2D page2,
+	image2D page3,
+	image2D page4,
+	image2D page5,
+	image2D page6,
+	image2D page7
 }
 
 stage vertex vert(
@@ -31,20 +38,20 @@ stage fragment frag(
     fragment in { float4 color, float2 uv, float page })
 {
   int page = int(in.page);
-  float4 msdf_sample = texture(input.font.pages[0], in.uv.xy);
-  if(page == 1) { msdf_sample = texture(input.font.pages[1], in.uv.xy); }
-  if(page == 2) { msdf_sample = texture(input.font.pages[2], in.uv.xy); }
-  if(page == 3) { msdf_sample = texture(input.font.pages[3], in.uv.xy); }
-  if(page == 4) { msdf_sample = texture(input.font.pages[4], in.uv.xy); }
-  if(page == 5) { msdf_sample = texture(input.font.pages[5], in.uv.xy); }
-  if(page == 6) { msdf_sample = texture(input.font.pages[6], in.uv.xy); }
-  if(page == 7) { msdf_sample = texture(input.font.pages[7], in.uv.xy); }
+	float4 msdf_sample = texture(input.font.page0, in.uv.xy);
+	if(page == 1) { msdf_sample = texture(input.font.page1, in.uv.xy); }
+	if(page == 2) { msdf_sample = texture(input.font.page2, in.uv.xy); }
+	if(page == 3) { msdf_sample = texture(input.font.page3, in.uv.xy); }
+	if(page == 4) { msdf_sample = texture(input.font.page4, in.uv.xy); }
+	if(page == 5) { msdf_sample = texture(input.font.page5, in.uv.xy); }
+	if(page == 6) { msdf_sample = texture(input.font.page6, in.uv.xy); }
+	if(page == 7) { msdf_sample = texture(input.font.page7, in.uv.xy); }
 
-  float r = msdf_sample.r;
-  float g = msdf_sample.g;
-  float b = msdf_sample.b;
-  float median = max(min(r, g), min(max(r, g), b));
-  float opacity = float(median > 0.5);
+	float r = msdf_sample.r;
+	float g = msdf_sample.g;
+	float b = msdf_sample.b;
+	float median = max(min(r, g), min(max(r, g), b));
+	float opacity = step(0.5, median);
 
-  stage.color[0] = float4(in.color.rgb, in.color.a * opacity);
+	stage.color[0] = float4(in.color.rgb, in.color.a * opacity);
 }
\ No newline at end of file
diff --git a/Luxe/shaders/pixel_text.material_basis.lx b/Luxe/shaders/pixel_text.material_basis.lx
index 2e548c7..a7520c0 100644
--- a/Luxe/shaders/pixel_text.material_basis.lx
+++ b/Luxe/shaders/pixel_text.material_basis.lx
@@ -21,43 +21,107 @@ material_basis = {
     winding = "counter_clockwise"
     layers = ["default"]
     inputs = {
-      font.pages = {
+      font.page0 = {
         type = "image"
-        count = 8
-        value = [
-          {
-            type = "image2D"
-            sampler_state = "linear_repeat"
-          }
-          {
-            type = "image2D"
-            sampler_state = "linear_repeat"
-          }
-          {
-            type = "image2D"
-            sampler_state = "linear_repeat"
-          }
-          {
-            type = "image2D"
-            sampler_state = "linear_repeat"
-          }
-          {
-            type = "image2D"
-            sampler_state = "linear_repeat"
-          }
-          {
-            type = "image2D"
-            sampler_state = "linear_repeat"
-          }
-          {
-            type = "image2D"
-            sampler_state = "linear_repeat"
-          }
-          {
-            type = "image2D"
-            sampler_state = "linear_repeat"
-          }
-        ]
+        value = {
+          type = "image2D"
+          sampler_state = "linear_repeat"
+        }
       }
+      font.page1 = {
+        type = "image"
+        value = {
+          type = "image2D"
+          sampler_state = "linear_repeat"
+        }
+      }
+      font.page2 = {
+        type = "image"
+        value = {
+          type = "image2D"
+          sampler_state = "linear_repeat"
+        }
+      }
+      font.page3 = {
+        type = "image"
+        value = {
+          type = "image2D"
+          sampler_state = "linear_repeat"
+        }
+      }
+      font.page4 = {
+        type = "image"
+        value = {
+          type = "image2D"
+          sampler_state = "linear_repeat"
+        }
+      }
+      font.page5 = {
+        type = "image"
+        value = {
+          type = "image2D"
+          sampler_state = "linear_repeat"
+        }
+      }
+      font.page6 = {
+        type = "image"
+        value = {
+          type = "image2D"
+          sampler_state = "linear_repeat"
+        }
+      }
+      font.page7 = {
+        type = "image"
+        value = {
+          type = "image2D"
+          sampler_state = "linear_repeat"
+        }
+      }
+      // font.pages = {
+      //   type = "image"
+      //   count = 8
+      //   value = [
+      //     {
+      //       type = "image2D"
+      //       sampler_state = "linear_repeat"
+      //       image = "luxe: image/empty"
+      //     }
+      //     {
+      //       type = "image2D"
+      //       sampler_state = "linear_repeat"
+      //       image = "luxe: image/empty"
+      //     }
+      //     {
+      //       type = "image2D"
+      //       sampler_state = "linear_repeat"
+      //       image = "luxe: image/empty"
+      //     }
+      //     {
+      //       type = "image2D"
+      //       sampler_state = "linear_repeat"
+      //       image = "luxe: image/empty"
+      //     }
+      //     {
+      //       type = "image2D"
+      //       sampler_state = "linear_repeat"
+      //       image = "luxe: image/empty"
+      //     }
+      //     {
+      //       type = "image2D"
+      //       sampler_state = "linear_repeat"
+      //       image = "luxe: image/empty"
+      //     }
+      //     {
+      //       type = "image2D"
+      //       sampler_state = "linear_repeat"
+      //       image = "luxe: image/empty"
+      //     }
+      //     {
+      //       type = "image2D"
+      //       sampler_state = "linear_repeat"
+      //       image = "luxe: image/empty"
+      //     }
+      //   ]
+      // }
     }
 }
\ No newline at end of file
diff --git a/Luxe/shaders/pixel_text_ui.emsl b/Luxe/shaders/pixel_text_ui.emsl
index a4f33fb..5740566 100644
--- a/Luxe/shaders/pixel_text_ui.emsl
+++ b/Luxe/shaders/pixel_text_ui.emsl
@@ -12,7 +12,14 @@ input View {
 }
 
 input Font {
-    image2D pages[8]
+	image2D page0,
+	image2D page1,
+	image2D page2,
+	image2D page3,
+	image2D page4,
+	image2D page5,
+	image2D page6,
+	image2D page7
 }
 
 input UI {
@@ -29,116 +36,115 @@ input FUI {
     #0 image2D tex_mask
 }
 
- stage vertex vert(
-    input { View view, UI ui },
-    vertex in {
-        #0 float4 pos,
-        #1 float4 color,
-        #2 float2 uv,
-        #3 float4 data,
-        #4 float2 bounds
-    },
-    fragment out {
-        float4 color,
-        float2 uv,
-        float2 mask_uv,
-        float clip,
-        float page
-    })
+stage vertex vert(
+		input { View view, UI ui },
+		vertex in {
+				#0 float4 pos,
+				#1 float4 color,
+				#2 float2 uv,
+				#3 float4 data,
+				#4 float2 bounds
+		},
+		fragment out {
+				float4 color,
+				float2 uv,
+				float2 mask_uv,
+				float clip,
+				float page
+		})
 {
-    out.uv = in.uv;
-    out.color = in.color;
-    out.clip = in.data.x;
-    out.page = in.pos.w;
+		out.uv = in.uv;
+		out.color = in.color;
+		out.clip = in.data.x;
+		out.page = in.pos.w;
 
-        //for fonts the text pos is text local and needs to be converted to canvas space.
-        //we pass the bounds of the text item in via the vertices (I know) so we can calculate bounds-local space.
-        //Then we convert that to canvas space, by * (bounds_w/canvas_w)
-        //Then finally we add to the canvas local u/v from the data.z/w in
+				//for fonts the text pos is text local and needs to be converted to canvas space.
+				//we pass the bounds of the text item in via the vertices (I know) so we can calculate bounds-local space.
+				//Then we convert that to canvas space, by * (bounds_w/canvas_w)
+				//Then finally we add to the canvas local u/v from the data.z/w in
 
-    float bounds_u = 0.0;
-    float bounds_v = 0.0;
-    if(in.bounds.x != 0.0) { bounds_u = (in.pos.x / in.bounds.x); }
-    if(in.bounds.y != 0.0) { bounds_v = 1.0 - (in.pos.y / in.bounds.y); }
+		float bounds_u = 0.0;
+		float bounds_v = 0.0;
+		if(in.bounds.x != 0.0) { bounds_u = (in.pos.x / in.bounds.x); }
+		if(in.bounds.y != 0.0) { bounds_v = 1.0 - (in.pos.y / in.bounds.y); }
 
-    //bounds_u/v is the 0...1 value for where this vert is in the text item itself
-    //Note we flip the bounds_v because the text is in world space, bottom left origin, y+ up,
-    //canvas space is top left, y+ down so it has to be reversed to be bounds local in canvas space
+		//bounds_u/v is the 0...1 value for where this vert is in the text item itself
+		//Note we flip the bounds_v because the text is in world space, bottom left origin, y+ up,
+		//canvas space is top left, y+ down so it has to be reversed to be bounds local in canvas space
 
-    float to_canvas_u = in.bounds.x / input.ui.canvas_size.x;
-    float to_canvas_v = in.bounds.y / input.ui.canvas_size.y;
+		float to_canvas_u = in.bounds.x / input.ui.canvas_size.x;
+		float to_canvas_v = in.bounds.y / input.ui.canvas_size.y;
 
-    //to_canvas_u is the text item width and height in 0...1 relative to the canvas
-    //e.g if the text item width is 100 and the canvas is 200, the value is 0.5
+		//to_canvas_u is the text item width and height in 0...1 relative to the canvas
+		//e.g if the text item width is 100 and the canvas is 200, the value is 0.5
 
-    //then what we do is add in.data.y/z which is the text x/y position,
-    //but relative to the canvas space. we add this to shift the x/y into place.
+		//then what we do is add in.data.y/z which is the text x/y position,
+		//but relative to the canvas space. we add this to shift the x/y into place.
 
-    bounds_u = (bounds_u * to_canvas_u) + in.data.y;
-    bounds_v = (bounds_v * to_canvas_v) + in.data.z;
+		bounds_u = (bounds_u * to_canvas_u) + in.data.y;
+		bounds_v = (bounds_v * to_canvas_v) + in.data.z;
 
-    out.mask_uv = float2(bounds_u, bounds_v);
+		out.mask_uv = float2(bounds_u, bounds_v);
 
-    stage.pos = input.view.mvp * float4(in.pos.xyz, 1.0);
+		stage.pos = input.view.mvp * float4(in.pos.xyz, 1.0);
 }
 
 stage fragment frag(
-        input { FUI ui, Font font },
-        fragment in {
-            float4 color,
-            float2 uv,
-            float2 mask_uv,
-            float clip,
-            float page
-        })
-    {
+	input { FUI ui, Font font },
+	fragment in {
+		float4 color,
+		float2 uv,
+		float2 mask_uv,
+		float clip,
+		float page
+	})
+{
 
-        //outside mask uvs?
-        bool outside_mask = in.mask_uv.x < 0.0 || 
-                            in.mask_uv.x > 1.0 ||
-                            in.mask_uv.y < 0.0 ||
-                            in.mask_uv.y > 1.0;
-                            
-        if(outside_mask) {
-            discard;
-            // stage.color[0] = float4(1,0.2,0.3,1);
-            return;
-        }
+	//outside mask uvs?
+	bool outside_mask = in.mask_uv.x < 0.0 || 
+											in.mask_uv.x > 1.0 ||
+											in.mask_uv.y < 0.0 ||
+											in.mask_uv.y > 1.0;
+											
+	if(outside_mask) {
+		discard;
+		// stage.color[0] = float4(1,0.2,0.3,1);
+		return;
+	}
 
-        float4 mask = texture(input.ui.tex_mask, in.mask_uv);
+	float4 mask = texture(input.ui.tex_mask, in.mask_uv);
 
-        //16 bit mask
-            // float mask_clip = round(mask.r * 65535.0);
-        //8 bit mask
-            int lsb = int(round(mask.r * 255.0));
-            int msb = int(round(mask.g * 255.0)) * 256; //<< 8;
-            int mask_clip = lsb | msb;
-            // int mask_clip = lsb + msb; //webgl1
+	//16 bit mask
+	// float mask_clip = round(mask.r * 65535.0);
+	//8 bit mask
+	int lsb = int(round(mask.r * 255.0));
+	int msb = int(round(mask.g * 255.0)) * 256; //<< 8;
+	int mask_clip = lsb | msb;
+	// int mask_clip = lsb + msb; //webgl1
 
-            //outside our clipping bounds?
-        int my_clip = int(in.clip);
-        if(my_clip != 0 && mask_clip < my_clip) {
-            discard;
-            // stage.color[0] = float4(0,1,1,0.2);
-            return;
-        }
+	//outside our clipping bounds?
+	int my_clip = int(in.clip);
+	if(my_clip != 0 && mask_clip < my_clip) {
+		discard;
+		// stage.color[0] = float4(0,1,1,0.2);
+		return;
+	}
 
-        int page = int(in.page);
-        float4 msdf_sample = texture(input.font.pages[0], in.uv.xy);
-        if(page == 1) { msdf_sample = texture(input.font.pages[1], in.uv.xy); }
-        if(page == 2) { msdf_sample = texture(input.font.pages[2], in.uv.xy); }
-        if(page == 3) { msdf_sample = texture(input.font.pages[3], in.uv.xy); }
-        if(page == 4) { msdf_sample = texture(input.font.pages[4], in.uv.xy); }
-        if(page == 5) { msdf_sample = texture(input.font.pages[5], in.uv.xy); }
-        if(page == 6) { msdf_sample = texture(input.font.pages[6], in.uv.xy); }
-        if(page == 7) { msdf_sample = texture(input.font.pages[7], in.uv.xy); }
+	int page = int(in.page);
+	float4 msdf_sample = texture(input.font.page0, in.uv.xy);
+	if(page == 1) { msdf_sample = texture(input.font.page1, in.uv.xy); }
+	if(page == 2) { msdf_sample = texture(input.font.page2, in.uv.xy); }
+	if(page == 3) { msdf_sample = texture(input.font.page3, in.uv.xy); }
+	if(page == 4) { msdf_sample = texture(input.font.page4, in.uv.xy); }
+	if(page == 5) { msdf_sample = texture(input.font.page5, in.uv.xy); }
+	if(page == 6) { msdf_sample = texture(input.font.page6, in.uv.xy); }
+	if(page == 7) { msdf_sample = texture(input.font.page7, in.uv.xy); }
 
-        float r = msdf_sample.r;
-        float g = msdf_sample.g;
-        float b = msdf_sample.b;
-        float median = max(min(r, g), min(max(r, g), b));
-        float opacity = float(median > 0.5);
+	float r = msdf_sample.r;
+	float g = msdf_sample.g;
+	float b = msdf_sample.b;
+	float median = max(min(r, g), min(max(r, g), b));
+	float opacity = step(0.5, median);
 
-        stage.color[0] = float4(in.color.rgb, in.color.a * opacity * mask.a);
-
-    }
\ No newline at end of file
+	stage.color[0] = float4(in.color.rgb, in.color.a * opacity * mask.a);
+}
\ No newline at end of file
diff --git a/Luxe/shaders/pixel_text_ui.material_basis.lx b/Luxe/shaders/pixel_text_ui.material_basis.lx
index 31381f6..0b1bfee 100644
--- a/Luxe/shaders/pixel_text_ui.material_basis.lx
+++ b/Luxe/shaders/pixel_text_ui.material_basis.lx
@@ -28,44 +28,100 @@ material_basis = {
           sampler_state = "nearest_clamp"
         }
       }
-      font.pages = {
+      font.page0 = {
         type = "image"
-        count = 8
-        value = [
-          {
-            type = "image2D"
-            sampler_state = "linear_repeat"
-          }
-          {
-            type = "image2D"
-            sampler_state = "linear_repeat"
-          }
-          {
-            type = "image2D"
-            sampler_state = "linear_repeat"
-          }
-          {
-            type = "image2D"
-            sampler_state = "linear_repeat"
-          }
-          {
-            type = "image2D"
-            sampler_state = "linear_repeat"
-          }
-          {
-            type = "image2D"
-            sampler_state = "linear_repeat"
-          }
-          {
-            type = "image2D"
-            sampler_state = "linear_repeat"
-          }
-          {
-            type = "image2D"
-            sampler_state = "linear_repeat"
-          }
-        ]
+        value = {
+          type = "image2D"
+          sampler_state = "linear_repeat"
+        }
       }
+      font.page1 = {
+        type = "image"
+        value = {
+          type = "image2D"
+          sampler_state = "linear_repeat"
+        }
+      }
+      font.page2 = {
+        type = "image"
+        value = {
+          type = "image2D"
+          sampler_state = "linear_repeat"
+        }
+      }
+      font.page3 = {
+        type = "image"
+        value = {
+          type = "image2D"
+          sampler_state = "linear_repeat"
+        }
+      }
+      font.page4 = {
+        type = "image"
+        value = {
+          type = "image2D"
+          sampler_state = "linear_repeat"
+        }
+      }
+      font.page5 = {
+        type = "image"
+        value = {
+          type = "image2D"
+          sampler_state = "linear_repeat"
+        }
+      }
+      font.page6 = {
+        type = "image"
+        value = {
+          type = "image2D"
+          sampler_state = "linear_repeat"
+        }
+      }
+      font.page7 = {
+        type = "image"
+        value = {
+          type = "image2D"
+          sampler_state = "linear_repeat"
+        }
+      }
+      // font.pages = {
+      //   type = "image"
+      //   count = 8
+      //   value = [
+      //     {
+      //       type = "image2D"
+      //       sampler_state = "linear_repeat"
+      //     }
+      //     {
+      //       type = "image2D"
+      //       sampler_state = "linear_repeat"
+      //     }
+      //     {
+      //       type = "image2D"
+      //       sampler_state = "linear_repeat"
+      //     }
+      //     {
+      //       type = "image2D"
+      //       sampler_state = "linear_repeat"
+      //     }
+      //     {
+      //       type = "image2D"
+      //       sampler_state = "linear_repeat"
+      //     }
+      //     {
+      //       type = "image2D"
+      //       sampler_state = "linear_repeat"
+      //     }
+      //     {
+      //       type = "image2D"
+      //       sampler_state = "linear_repeat"
+      //     }
+      //     {
+      //       type = "image2D"
+      //       sampler_state = "linear_repeat"
+      //     }
+      //   ]
+      // }
       ui.canvas_size = {
         type = "float2"
         value = [1 1]