diff --git a/engine/papyrus/src/papyrus.zig b/engine/papyrus/src/papyrus.zig
index dbd0380..be5acc1 100644
--- a/engine/papyrus/src/papyrus.zig
+++ b/engine/papyrus/src/papyrus.zig
@@ -1218,7 +1218,7 @@ pub const Context = struct {
                     .tl = .{ .x = 30 - 5, .y = yOffset - 5 },
                     .size = .{ .x = width + 5, .y = sizePerLine * @as(f32, @floatFromInt(self.debugTextCount + 2)) },
                     .borderColor = Color.fromRGBA(0x444444ee),
-                    .backgroundColor = Color.fromRGBA2(0.0, 0.0, 0.0, 0.94),
+                    .backgroundColor = Color.fromRGBA2(0.05, 0.05, 0.08, 0.88),
                 },
             },
         });
diff --git a/engine/ui/shaders/fragmentHelpers.hlsli b/engine/ui/shaders/fragmentHelpers.hlsli
index 776a37b..4a6edc0 100644
--- a/engine/ui/shaders/fragmentHelpers.hlsli
+++ b/engine/ui/shaders/fragmentHelpers.hlsli
@@ -24,8 +24,8 @@ float getSample(
 
 bool scissor(float2 position, float2 topleft, float2 size)
 {
-    if(position.x >= topleft.x && position.x <= topleft.x + size.x &&
-       position.y >= topleft.y && position.y <= topleft.y + size.y )
+    if((position.x >= topleft.x) && (position.x <= (topleft.x + size.x)) &&
+       (position.y >= topleft.y) && (position.y <= topleft.y + size.y))
     {
         return true;
     }
diff --git a/engine/ui/shaders/rect.frag.hlsl b/engine/ui/shaders/rect.frag.hlsl
index 7b7431b..4547c90 100644
--- a/engine/ui/shaders/rect.frag.hlsl
+++ b/engine/ui/shaders/rect.frag.hlsl
@@ -111,7 +111,7 @@ PSOut main(
     }
     else 
     {
-        o.Color = float4(pow(color, 2.2), alpha);
+        o.Color = float4(color, alpha); //float4(pow(color, 2.2), alpha);
     }
 
     return o;
diff --git a/engine/ui/shaders/text.frag.hlsl b/engine/ui/shaders/text.frag.hlsl
index f540a38..bfe7f82 100644
--- a/engine/ui/shaders/text.frag.hlsl
+++ b/engine/ui/shaders/text.frag.hlsl
@@ -24,8 +24,10 @@ float4 main(
     float2 size = fontBuffer[Instance].size;
 
     if(!scissor(pixelPosition, position, size))
+    //if(pixelPosition.x > (position.x + size.x))
     {
-        // discard;
+        // return float4(pixelPosition.x / 1920, 0.0, 0.0, 1.0);
+        discard;
     }
 
     float4 textColor = float4(
@@ -34,7 +36,7 @@ float4 main(
         getBlueFromUint(Color),
         getAlphaFromUint(Color));
 
-    if(isSdf == 0)
+    if(isSdf == 1)
     {
         float dist  = tex.r;
         float width = fwidth(dist);
@@ -73,17 +75,17 @@ float4 main(
 #if 0
     float4 outFragColor = 0;
 
-    //if(!rect(pixelPosition, position, size))
-    //{
-    //}
+    if(!rect(pixelPosition, position, size))
+    {
+    }
     outFragColor = float4(1.0, 0.0, 0.0, 1.0);
 
     return outFragColor + o * 0.00001;
 #else
-    float alpha = 1.0;
-    float gray = dot(textColor.xyz, float3(0.2126, 0.7152, 0.0722));
-    o = float4(textColor.xyz,  tex.x);//pow(tex.x / gray, 1/(2.2)) );//textColor.* alpha);
-    return float4(1.0, 1.0, 1.0, tex.x) + o * 0.00001;
+    //float alpha = 1.0;
+    // float gray = dot(textColor.xyz, float3(0.2126, 0.7152, 0.0722));
+    // o = float4(textColor.xyz,  tex.x);//pow(tex.x / gray, 1/(2.2)) );//textColor.* alpha);
+    return o; // float4(1.0, 1.0, 1.0, tex.x) + o * 0.00001;
 #endif
 
 }
diff --git a/engine/ui/shaders/text.frag.json b/engine/ui/shaders/text.frag.json
index efe412b..49b9cba 100644
--- a/engine/ui/shaders/text.frag.json
+++ b/engine/ui/shaders/text.frag.json
@@ -6,7 +6,7 @@
         }
     ],
     "types" : {
-        "_12" : {
+        "_13" : {
             "name" : "FontInfo",
             "members" : [
                 {
@@ -28,20 +28,15 @@
                     "name" : "pad0",
                     "type" : "uint",
                     "offset" : 20
-                },
-                {
-                    "name" : "pad2",
-                    "type" : "vec2",
-                    "offset" : 24
                 }
             ]
         },
-        "_11" : {
+        "_12" : {
             "name" : "type.StructuredBuffer.FontInfo",
             "members" : [
                 {
                     "name" : "_m0",
-                    "type" : "_12",
+                    "type" : "_13",
                     "array" : [
                         0
                     ],
@@ -49,7 +44,7 @@
                         true
                     ],
                     "offset" : 0,
-                    "array_stride" : 32
+                    "array_stride" : 24
                 }
             ]
         }
@@ -65,6 +60,11 @@
             "name" : "in.var.TEXCOORD1",
             "location" : 1
         },
+        {
+            "type" : "vec2",
+            "name" : "in.var.TEXCOORD2",
+            "location" : 2
+        },
         {
             "type" : "uint",
             "name" : "in.var.TEXCOORD3",
@@ -96,7 +96,7 @@
     ],
     "ssbos" : [
         {
-            "type" : "_11",
+            "type" : "_12",
             "name" : "fontBuffer",
             "readonly" : true,
             "block_size" : 0,
diff --git a/engine/ui/shaders/text.vert.json b/engine/ui/shaders/text.vert.json
index fb09e79..ce5e1e7 100644
--- a/engine/ui/shaders/text.vert.json
+++ b/engine/ui/shaders/text.vert.json
@@ -28,11 +28,6 @@
                     "name" : "pad0",
                     "type" : "uint",
                     "offset" : 20
-                },
-                {
-                    "name" : "pad2",
-                    "type" : "vec2",
-                    "offset" : 24
                 }
             ]
         },
@@ -49,7 +44,7 @@
                         true
                     ],
                     "offset" : 0,
-                    "array_stride" : 32
+                    "array_stride" : 24
                 }
             ]
         },
diff --git a/engine/ui/shaders/text_shared.hlsli b/engine/ui/shaders/text_shared.hlsli
index 3ae2d39..e4f5ee9 100644
--- a/engine/ui/shaders/text_shared.hlsli
+++ b/engine/ui/shaders/text_shared.hlsli
@@ -2,8 +2,7 @@ struct FontInfo {
   float2 position; // 8 bytes alignment 0
   float2 size;     // 8 bytes alignment 8
   uint isSdf;    // 4 bytes 16
-  uint pad0;     // 4 bytes
-  float2 pad2;     // 8 bytes
+  uint pad0; // 4 bytes 20
 };
 
 float getRedFromUint(uint color)
diff --git a/engine/ui/src/sgpu/papyrusSgpu.zig b/engine/ui/src/sgpu/papyrusSgpu.zig
index 0880b65..fb9c8e9 100644
--- a/engine/ui/src/sgpu/papyrusSgpu.zig
+++ b/engine/ui/src/sgpu/papyrusSgpu.zig
@@ -241,7 +241,15 @@ pub fn createRectPipeline(self: *@This()) !void {
     pci.target_info.color_target_descriptions = &[_]gpu.GPUColorTargetDescription{
         .{
             .format = ctx.swapchainTargetFormat,
-            .blend_state = std.mem.zeroes(gpu.GPUColorTargetBlendState),
+            .blend_state = std.mem.zeroInit(gpu.GPUColorTargetBlendState, .{
+                .alpha_blend_op = .blendopAdd,
+                .color_blend_op = .blendopAdd,
+                .src_color_blendfactor = .blendfactorSrcAlpha,
+                .dst_color_blendfactor = .blendfactorOneMinusSrcAlpha,
+                .src_alpha_blendfactor = .blendfactorSrcAlpha,
+                .dst_alpha_blendfactor = .blendfactorOneMinusSrcAlpha,
+                .enable_blend = true,
+            }),
         },
     };
 
@@ -311,7 +319,7 @@ pub fn drawToTarget(self: *@This(), cmd: *gpu.GPUCommandBuffer, ctx: *papyrus.Co
                         .imageSize = .{ .x = rect.size.x, .y = rect.size.y },
                         .anchorPoint = .{ .x = -1.0, .y = -1.0 },
                         .scale = .{ .x = 1.0, .y = 1.0 },
-                        .alpha = 1.0,
+                        .alpha = rect.backgroundColor.a, // there should be background alpha and border alpha
                         .baseColor = .{
                             .x = rect.backgroundColor.r,
                             .y = rect.backgroundColor.g,
@@ -346,9 +354,11 @@ pub fn drawToTarget(self: *@This(), cmd: *gpu.GPUCommandBuffer, ctx: *papyrus.Co
                             .isSdf = if (meshBuffer.isSDF) 1 else 0,
                             .position = .{ .x = text.tl.x, .y = text.tl.y },
                             .size = .{ .x = text.size.x, .y = text.size.y },
-                            .pad0 = undefined,
-                            .pad2 = undefined,
+                            .pad0 = 0xff,
+                            // .pad0 = 0xff,
+                            // .pad2 = undefined,
                         };
+
                         // textBuffer[textIndex] = .{
                         // .. fill this shit out
                         // };
@@ -437,8 +447,8 @@ pub fn drawToTarget(self: *@This(), cmd: *gpu.GPUCommandBuffer, ctx: *papyrus.Co
                         const tmb = text.textMeshBuffer;
                         tr.bindFontBuffersAndSamplers(pass, tmb);
 
-                        pass.bindGPUVertexStorageBuffers(0, &self.screenBuffers.rect.buffer, 1);
-                        pass.bindGPUFragmentStorageBuffers(0, &self.screenBuffers.rect.buffer, 1);
+                        pass.bindGPUVertexStorageBuffers(0, &self.screenBuffers.text.buffer, 1);
+                        pass.bindGPUFragmentStorageBuffers(0, &self.screenBuffers.text.buffer, 1);
                         pass.bindGPUFragmentSamplers(0, @ptrCast(&self.getFontSampler(text.textMeshBuffer.fontHandle)), 1);
                         pass.bindGPUGraphicsPipeline(self.textPipeline);
 
diff --git a/projects/content/_shaders/dxil/rect.frag.dxil b/projects/content/_shaders/dxil/rect.frag.dxil
index 8c775ad..768208b 100644
Binary files a/projects/content/_shaders/dxil/rect.frag.dxil and b/projects/content/_shaders/dxil/rect.frag.dxil differ
diff --git a/projects/content/_shaders/dxil/text.frag.dxil b/projects/content/_shaders/dxil/text.frag.dxil
index f8d8799..a6bc6ed 100644
Binary files a/projects/content/_shaders/dxil/text.frag.dxil and b/projects/content/_shaders/dxil/text.frag.dxil differ
diff --git a/projects/content/_shaders/dxil/text.vert.dxil b/projects/content/_shaders/dxil/text.vert.dxil
index 33fa0b5..1ddba0c 100644
Binary files a/projects/content/_shaders/dxil/text.vert.dxil and b/projects/content/_shaders/dxil/text.vert.dxil differ
diff --git a/projects/content/_shaders/msl/rect.frag.msl b/projects/content/_shaders/msl/rect.frag.msl
index 15adce0..497baf5 100644
--- a/projects/content/_shaders/msl/rect.frag.msl
+++ b/projects/content/_shaders/msl/rect.frag.msl
@@ -38,222 +38,222 @@ struct main0_in
 fragment main0_out main0(main0_in in [[stage_in]], const device type_StructuredBuffer_Scene& scene [[buffer(0)]], texture2d<float> Texture0 [[texture(0)]], sampler Sampler0 [[sampler(0)]])
 {
     main0_out out = {};
-    bool _73 = in.in_var_TEXCOORD2.x < scene._m0[in.in_var_TEXCOORD3].rounding.x;
-    bool _80;
-    if (_73)
+    bool _71 = in.in_var_TEXCOORD2.x < scene._m0[in.in_var_TEXCOORD3].rounding.x;
+    bool _78;
+    if (_71)
     {
-        _80 = in.in_var_TEXCOORD2.y < scene._m0[in.in_var_TEXCOORD3].rounding.y;
+        _78 = in.in_var_TEXCOORD2.y < scene._m0[in.in_var_TEXCOORD3].rounding.y;
     }
     else
     {
-        _80 = false;
+        _78 = false;
     }
-    float _97;
-    float3 _98;
-    if (_80)
+    float _95;
+    float3 _96;
+    if (_78)
     {
-        float _84 = distance(in.in_var_TEXCOORD2, float2(scene._m0[in.in_var_TEXCOORD3].rounding.x));
-        float _95;
-        float3 _96;
-        if (_84 > scene._m0[in.in_var_TEXCOORD3].rounding.x)
+        float _82 = distance(in.in_var_TEXCOORD2, float2(scene._m0[in.in_var_TEXCOORD3].rounding.x));
+        float _93;
+        float3 _94;
+        if (_82 > scene._m0[in.in_var_TEXCOORD3].rounding.x)
         {
             discard_fragment();
         }
         else
         {
-            if (abs(_84 - scene._m0[in.in_var_TEXCOORD3].rounding.x) < 1.0)
+            if (abs(_82 - scene._m0[in.in_var_TEXCOORD3].rounding.x) < 1.0)
             {
-                _95 = scene._m0[in.in_var_TEXCOORD3].edgeColor.w;
-                _96 = scene._m0[in.in_var_TEXCOORD3].edgeColor.xyz;
+                _93 = scene._m0[in.in_var_TEXCOORD3].edgeColor.w;
+                _94 = scene._m0[in.in_var_TEXCOORD3].edgeColor.xyz;
             }
             else
             {
-                _95 = scene._m0[in.in_var_TEXCOORD3].alpha;
-                _96 = in.in_var_TEXCOORD0.xyz;
+                _93 = scene._m0[in.in_var_TEXCOORD3].alpha;
+                _94 = in.in_var_TEXCOORD0.xyz;
             }
         }
-        _97 = _95;
-        _98 = _96;
+        _95 = _93;
+        _96 = _94;
     }
     else
     {
-        _97 = scene._m0[in.in_var_TEXCOORD3].alpha;
-        _98 = in.in_var_TEXCOORD0.xyz;
+        _95 = scene._m0[in.in_var_TEXCOORD3].alpha;
+        _96 = in.in_var_TEXCOORD0.xyz;
     }
-    float _101 = scene._m0[in.in_var_TEXCOORD3]._imageSize.x - scene._m0[in.in_var_TEXCOORD3].rounding.y;
-    bool _108;
-    if (in.in_var_TEXCOORD2.x > _101)
+    float _99 = scene._m0[in.in_var_TEXCOORD3]._imageSize.x - scene._m0[in.in_var_TEXCOORD3].rounding.y;
+    bool _106;
+    if (in.in_var_TEXCOORD2.x > _99)
     {
-        _108 = in.in_var_TEXCOORD2.y < scene._m0[in.in_var_TEXCOORD3].rounding.y;
+        _106 = in.in_var_TEXCOORD2.y < scene._m0[in.in_var_TEXCOORD3].rounding.y;
     }
     else
     {
-        _108 = false;
+        _106 = false;
     }
-    float _125;
-    float3 _126;
-    if (_108)
+    float _123;
+    float3 _124;
+    if (_106)
     {
-        float _112 = distance(in.in_var_TEXCOORD2, float2(_101, scene._m0[in.in_var_TEXCOORD3].rounding.y));
-        float _123;
-        float3 _124;
-        if (_112 > scene._m0[in.in_var_TEXCOORD3].rounding.y)
+        float _110 = distance(in.in_var_TEXCOORD2, float2(_99, scene._m0[in.in_var_TEXCOORD3].rounding.y));
+        float _121;
+        float3 _122;
+        if (_110 > scene._m0[in.in_var_TEXCOORD3].rounding.y)
         {
             discard_fragment();
         }
         else
         {
-            if (abs(_112 - scene._m0[in.in_var_TEXCOORD3].rounding.y) < 1.0)
+            if (abs(_110 - scene._m0[in.in_var_TEXCOORD3].rounding.y) < 1.0)
             {
-                _123 = scene._m0[in.in_var_TEXCOORD3].edgeColor.w;
-                _124 = scene._m0[in.in_var_TEXCOORD3].edgeColor.xyz;
+                _121 = scene._m0[in.in_var_TEXCOORD3].edgeColor.w;
+                _122 = scene._m0[in.in_var_TEXCOORD3].edgeColor.xyz;
             }
             else
             {
-                _123 = _97;
-                _124 = _98;
+                _121 = _95;
+                _122 = _96;
             }
         }
-        _125 = _123;
-        _126 = _124;
+        _123 = _121;
+        _124 = _122;
     }
     else
     {
-        _125 = _97;
-        _126 = _98;
+        _123 = _95;
+        _124 = _96;
     }
-    bool _134;
-    if (_73)
+    bool _132;
+    if (_71)
     {
-        _134 = in.in_var_TEXCOORD2.y > (scene._m0[in.in_var_TEXCOORD3]._imageSize.y - scene._m0[in.in_var_TEXCOORD3].rounding.y);
+        _132 = in.in_var_TEXCOORD2.y > (scene._m0[in.in_var_TEXCOORD3]._imageSize.y - scene._m0[in.in_var_TEXCOORD3].rounding.y);
     }
     else
     {
-        _134 = false;
+        _132 = false;
     }
-    float _153;
-    float3 _154;
-    if (_134)
+    float _151;
+    float3 _152;
+    if (_132)
     {
-        float _140 = distance(in.in_var_TEXCOORD2, float2(scene._m0[in.in_var_TEXCOORD3].rounding.x, scene._m0[in.in_var_TEXCOORD3]._imageSize.y - scene._m0[in.in_var_TEXCOORD3].rounding.y));
-        float _151;
-        float3 _152;
-        if (_140 > scene._m0[in.in_var_TEXCOORD3].rounding.y)
+        float _138 = distance(in.in_var_TEXCOORD2, float2(scene._m0[in.in_var_TEXCOORD3].rounding.x, scene._m0[in.in_var_TEXCOORD3]._imageSize.y - scene._m0[in.in_var_TEXCOORD3].rounding.y));
+        float _149;
+        float3 _150;
+        if (_138 > scene._m0[in.in_var_TEXCOORD3].rounding.y)
         {
             discard_fragment();
         }
         else
         {
-            if (abs(_140 - scene._m0[in.in_var_TEXCOORD3].rounding.y) < 1.0)
+            if (abs(_138 - scene._m0[in.in_var_TEXCOORD3].rounding.y) < 1.0)
             {
-                _151 = scene._m0[in.in_var_TEXCOORD3].edgeColor.w;
-                _152 = scene._m0[in.in_var_TEXCOORD3].edgeColor.xyz;
+                _149 = scene._m0[in.in_var_TEXCOORD3].edgeColor.w;
+                _150 = scene._m0[in.in_var_TEXCOORD3].edgeColor.xyz;
             }
             else
             {
-                _151 = _125;
-                _152 = _126;
+                _149 = _123;
+                _150 = _124;
             }
         }
-        _153 = _151;
-        _154 = _152;
+        _151 = _149;
+        _152 = _150;
     }
     else
     {
-        _153 = _125;
-        _154 = _126;
+        _151 = _123;
+        _152 = _124;
     }
-    bool _165;
+    bool _163;
     if (in.in_var_TEXCOORD2.x > (scene._m0[in.in_var_TEXCOORD3]._imageSize.x - scene._m0[in.in_var_TEXCOORD3].rounding.w))
     {
-        _165 = (scene._m0[in.in_var_TEXCOORD3]._imageSize.y - in.in_var_TEXCOORD2.y) < scene._m0[in.in_var_TEXCOORD3].rounding.w;
+        _163 = (scene._m0[in.in_var_TEXCOORD3]._imageSize.y - in.in_var_TEXCOORD2.y) < scene._m0[in.in_var_TEXCOORD3].rounding.w;
     }
     else
     {
-        _165 = false;
+        _163 = false;
     }
-    float _185;
-    float3 _186;
-    if (_165)
+    float _183;
+    float3 _184;
+    if (_163)
     {
-        float _172 = distance(in.in_var_TEXCOORD2, float2(scene._m0[in.in_var_TEXCOORD3]._imageSize.x - scene._m0[in.in_var_TEXCOORD3].rounding.x, scene._m0[in.in_var_TEXCOORD3]._imageSize.y - scene._m0[in.in_var_TEXCOORD3].rounding.y));
-        float _183;
-        float3 _184;
-        if (_172 > scene._m0[in.in_var_TEXCOORD3].rounding.y)
+        float _170 = distance(in.in_var_TEXCOORD2, float2(scene._m0[in.in_var_TEXCOORD3]._imageSize.x - scene._m0[in.in_var_TEXCOORD3].rounding.x, scene._m0[in.in_var_TEXCOORD3]._imageSize.y - scene._m0[in.in_var_TEXCOORD3].rounding.y));
+        float _181;
+        float3 _182;
+        if (_170 > scene._m0[in.in_var_TEXCOORD3].rounding.y)
         {
             discard_fragment();
         }
         else
         {
-            if (abs(_172 - scene._m0[in.in_var_TEXCOORD3].rounding.y) < 1.0)
+            if (abs(_170 - scene._m0[in.in_var_TEXCOORD3].rounding.y) < 1.0)
             {
-                _183 = scene._m0[in.in_var_TEXCOORD3].edgeColor.w;
-                _184 = scene._m0[in.in_var_TEXCOORD3].edgeColor.xyz;
+                _181 = scene._m0[in.in_var_TEXCOORD3].edgeColor.w;
+                _182 = scene._m0[in.in_var_TEXCOORD3].edgeColor.xyz;
             }
             else
             {
-                _183 = _153;
-                _184 = _154;
+                _181 = _151;
+                _182 = _152;
             }
         }
-        _185 = _183;
-        _186 = _184;
+        _183 = _181;
+        _184 = _182;
     }
     else
     {
-        _185 = _153;
-        _186 = _154;
+        _183 = _151;
+        _184 = _152;
     }
-    bool _193;
+    bool _191;
     if (!(in.in_var_TEXCOORD2.x < scene._m0[in.in_var_TEXCOORD3].borderWidth))
     {
-        _193 = in.in_var_TEXCOORD2.x > (scene._m0[in.in_var_TEXCOORD3]._imageSize.x - scene._m0[in.in_var_TEXCOORD3].borderWidth);
+        _191 = in.in_var_TEXCOORD2.x > (scene._m0[in.in_var_TEXCOORD3]._imageSize.x - scene._m0[in.in_var_TEXCOORD3].borderWidth);
     }
     else
     {
-        _193 = true;
+        _191 = true;
     }
-    bool _200;
-    if (!_193)
+    bool _198;
+    if (!_191)
     {
-        _200 = in.in_var_TEXCOORD2.y < scene._m0[in.in_var_TEXCOORD3].borderWidth;
+        _198 = in.in_var_TEXCOORD2.y < scene._m0[in.in_var_TEXCOORD3].borderWidth;
     }
     else
     {
-        _200 = true;
+        _198 = true;
     }
-    bool _209;
-    if (!_200)
+    bool _207;
+    if (!_198)
     {
-        _209 = in.in_var_TEXCOORD2.y > (scene._m0[in.in_var_TEXCOORD3]._imageSize.y - scene._m0[in.in_var_TEXCOORD3].borderWidth);
+        _207 = in.in_var_TEXCOORD2.y > (scene._m0[in.in_var_TEXCOORD3]._imageSize.y - scene._m0[in.in_var_TEXCOORD3].borderWidth);
     }
     else
     {
-        _209 = true;
+        _207 = true;
     }
-    float _214;
-    float3 _215;
-    if (_209)
+    float _212;
+    float3 _213;
+    if (_207)
     {
-        _214 = scene._m0[in.in_var_TEXCOORD3].edgeColor.w;
-        _215 = scene._m0[in.in_var_TEXCOORD3].edgeColor.xyz;
+        _212 = scene._m0[in.in_var_TEXCOORD3].edgeColor.w;
+        _213 = scene._m0[in.in_var_TEXCOORD3].edgeColor.xyz;
     }
     else
     {
-        _214 = _185;
-        _215 = _186;
+        _212 = _183;
+        _213 = _184;
     }
-    float4 _241;
+    float4 _238;
     if ((scene._m0[in.in_var_TEXCOORD3].flags & 1u) > 0u)
     {
-        float4 _229 = Texture0.sample(Sampler0, float2(in.in_var_TEXCOORD1.x, 1.0 - in.in_var_TEXCOORD1.y));
-        _241 = float4(_229.xyz, _229.w * _214);
+        float4 _227 = Texture0.sample(Sampler0, float2(in.in_var_TEXCOORD1.x, 1.0 - in.in_var_TEXCOORD1.y));
+        _238 = float4(_227.xyz, _227.w * _212);
     }
     else
     {
-        _241 = float4(powr(_215, float3(2.2000000476837158203125)), _214);
+        _238 = float4(_213, _212);
     }
-    out.out_var_SV_Target0 = _241;
+    out.out_var_SV_Target0 = _238;
     return out;
 }
 
diff --git a/projects/content/_shaders/msl/text.frag.msl b/projects/content/_shaders/msl/text.frag.msl
index b3e2448..6fdccbf 100644
--- a/projects/content/_shaders/msl/text.frag.msl
+++ b/projects/content/_shaders/msl/text.frag.msl
@@ -9,7 +9,6 @@ struct FontInfo
     float2 size;
     uint isSdf;
     uint pad0;
-    float2 pad2;
 };
 
 struct type_StructuredBuffer_FontInfo
@@ -17,7 +16,7 @@ struct type_StructuredBuffer_FontInfo
     FontInfo _m0[1];
 };
 
-constant float _43 = {};
+constant float _59 = {};
 
 struct main0_out
 {
@@ -28,26 +27,77 @@ struct main0_in
 {
     uint in_var_TEXCOORD0 [[user(locn0)]];
     float2 in_var_TEXCOORD1 [[user(locn1)]];
+    float2 in_var_TEXCOORD2 [[user(locn2)]];
     uint in_var_TEXCOORD3 [[user(locn3)]];
 };
 
 fragment main0_out main0(main0_in in [[stage_in]], const device type_StructuredBuffer_FontInfo& fontBuffer [[buffer(0)]], texture2d<float> Texture0 [[texture(0)]], sampler Sampler0 [[sampler(0)]])
 {
     main0_out out = {};
-    float4 _51 = Texture0.sample(Sampler0, in.in_var_TEXCOORD1);
-    float4 _65 = float4(float(in.in_var_TEXCOORD0 & 255u) * 0.0039215688593685626983642578125, float((in.in_var_TEXCOORD0 >> 8u) & 255u) * 0.0039215688593685626983642578125, float((in.in_var_TEXCOORD0 >> 16u) & 255u) * 0.0039215688593685626983642578125, _43);
-    float4 _73;
-    if (fontBuffer._m0[in.in_var_TEXCOORD3].isSdf == 0u)
+    float4 _67 = Texture0.sample(Sampler0, in.in_var_TEXCOORD1);
+    bool _104;
+    do
     {
-        float3 _71 = powr(_65.xyz, float3(2.2000000476837158203125));
-        _73 = float4(_71.x, _71.y, _71.z, _65.w);
+        bool _85;
+        if (in.in_var_TEXCOORD2.x >= fontBuffer._m0[in.in_var_TEXCOORD3].position.x)
+        {
+            _85 = in.in_var_TEXCOORD2.x <= (fontBuffer._m0[in.in_var_TEXCOORD3].position.x + fontBuffer._m0[in.in_var_TEXCOORD3].size.x);
+        }
+        else
+        {
+            _85 = false;
+        }
+        bool _92;
+        if (_85)
+        {
+            _92 = in.in_var_TEXCOORD2.y >= fontBuffer._m0[in.in_var_TEXCOORD3].position.y;
+        }
+        else
+        {
+            _92 = false;
+        }
+        bool _101;
+        if (_92)
+        {
+            _101 = in.in_var_TEXCOORD2.y <= (fontBuffer._m0[in.in_var_TEXCOORD3].position.y + fontBuffer._m0[in.in_var_TEXCOORD3].size.y);
+        }
+        else
+        {
+            _101 = false;
+        }
+        if (_101)
+        {
+            _104 = true;
+            break;
+        }
+        _104 = false;
+        break;
+    } while(false);
+    if (!_104)
+    {
+        discard_fragment();
+    }
+    float _110 = float(in.in_var_TEXCOORD0 & 255u) * 0.0039215688593685626983642578125;
+    float _114 = float((in.in_var_TEXCOORD0 >> 8u) & 255u) * 0.0039215688593685626983642578125;
+    float _118 = float((in.in_var_TEXCOORD0 >> 16u) & 255u) * 0.0039215688593685626983642578125;
+    float4 _181;
+    if (fontBuffer._m0[in.in_var_TEXCOORD3].isSdf == 1u)
+    {
+        float _124 = _67.x;
+        float _125 = fwidth(_124);
+        float _126 = 0.529411792755126953125 - _125;
+        float _127 = 0.529411792755126953125 + _125;
+        float2 _133 = (dfdx(in.in_var_TEXCOORD1) + dfdy(in.in_var_TEXCOORD1)) * 0.3540000021457672119140625;
+        float4 _140 = float4(in.in_var_TEXCOORD1 - _133, in.in_var_TEXCOORD1 + _133);
+        float4 _171 = float4(_110, _114, _118, (fast::clamp(smoothstep(_126, _127, _124), 0.0, 1.0) + (0.5 * (((fast::clamp(smoothstep(_126, _127, Texture0.sample(Sampler0, _140.xy).x), 0.0, 1.0) + fast::clamp(smoothstep(_126, _127, Texture0.sample(Sampler0, _140.zw).x), 0.0, 1.0)) + fast::clamp(smoothstep(_126, _127, Texture0.sample(Sampler0, _140.xw).x), 0.0, 1.0)) + fast::clamp(smoothstep(_126, _127, Texture0.sample(Sampler0, _140.zy).x), 0.0, 1.0)))) * 0.3333333432674407958984375);
+        float3 _173 = powr(_171.xyz, float3(2.2000000476837158203125));
+        _181 = float4(_173.x, _173.y, _173.z, _171.w);
     }
     else
     {
-        _73 = _65;
+        _181 = float4(_110, _114, _118, powr(_67.x / dot(float4(_110, _114, _118, _59).xyz, float3(0.2125999927520751953125, 0.715200006961822509765625, 0.072200000286102294921875)), 0.4545454680919647216796875));
     }
-    float _74 = _51.x;
-    out.out_var_SV_Target0 = float4(1.0, 1.0, 1.0, _74) + (float4(_73.xyz, _74) * 9.9999997473787516355514526367188e-06);
+    out.out_var_SV_Target0 = _181;
     return out;
 }
 
diff --git a/projects/content/_shaders/msl/text.vert.msl b/projects/content/_shaders/msl/text.vert.msl
index 8f4fe39..fdb1abb 100644
--- a/projects/content/_shaders/msl/text.vert.msl
+++ b/projects/content/_shaders/msl/text.vert.msl
@@ -9,7 +9,6 @@ struct FontInfo
     float2 size;
     uint isSdf;
     uint pad0;
-    float2 pad2;
 };
 
 struct type_StructuredBuffer_FontInfo
diff --git a/projects/content/_shaders/spv/rect.frag.spv b/projects/content/_shaders/spv/rect.frag.spv
index de42cd1..f89070b 100644
Binary files a/projects/content/_shaders/spv/rect.frag.spv and b/projects/content/_shaders/spv/rect.frag.spv differ
diff --git a/projects/content/_shaders/spv/text.frag.spv b/projects/content/_shaders/spv/text.frag.spv
index 240a198..302c6ca 100644
Binary files a/projects/content/_shaders/spv/text.frag.spv and b/projects/content/_shaders/spv/text.frag.spv differ
diff --git a/projects/content/_shaders/spv/text.vert.spv b/projects/content/_shaders/spv/text.vert.spv
index c2daae7..337854b 100644
Binary files a/projects/content/_shaders/spv/text.vert.spv and b/projects/content/_shaders/spv/text.vert.spv differ
diff --git a/projects/sampleGame/externGame/externGame.zig b/projects/sampleGame/externGame/externGame.zig
index 8c1ddb7..597eb6e 100644
--- a/projects/sampleGame/externGame/externGame.zig
+++ b/projects/sampleGame/externGame/externGame.zig
@@ -93,19 +93,20 @@ pub const ExternGameObject = struct {
         {
             const ctx = ui.getScreen();
             const panel2 = try ctx.addPanel(.{});
+            ctx.drawDebug = true;
             {
                 ctx.getPanel(panel2).hasTitle = true;
                 //ctx.get(panel2).anchor = .TopRight;
                 // ctx.get(panel2).fill = .FillY; todo, this is a bug. why.
                 ctx.get(panel2).pos = .{ .x = 900, .y = 200 };
-                ctx.get(panel2).size = .{ .x = 100, .y = 100 };
+                ctx.get(panel2).size = .{ .x = 300, .y = 400 };
                 ctx.get(panel2).style.backgroundColor = ui.ModernStyle.GreyDark;
                 ctx.getPanel(panel2).titleColor = ui.ModernStyle.GreyDark;
 
                 // add some text to this panel
                 const text = try ctx.addText(panel2, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
-                ctx.get(text).pos = .{ .x = 32, .y = 32 };
-                ctx.get(text).size = .{ .x = 300, .y = 400 };
+                ctx.get(text).pos = .{ .x = 2, .y = 2 };
+                ctx.get(text).size = ctx.get(panel2).size.sub(.{ .x = 4, .y = 36 });
             }
         }