diff --git a/.changeset/forty-bobcats-burn.md b/.changeset/forty-bobcats-burn.md
new file mode 100644
index 0000000000..79f20014c3
--- /dev/null
+++ b/.changeset/forty-bobcats-burn.md
@@ -0,0 +1,6 @@
+---
+"@appwrite.io/pink": minor
+"@appwrite.io/pink-icons": minor
+---
+
+Code Panel
diff --git a/apps/pink/src/pages/components/code-panel.mdx b/apps/pink/src/pages/components/code-panel.mdx
index 92d49a0387..35f698f01e 100644
--- a/apps/pink/src/pages/components/code-panel.mdx
+++ b/apps/pink/src/pages/components/code-panel.mdx
@@ -8,7 +8,7 @@ description: Code panels are used to create a focused view of a block of code, f
 | `code-panel` | Code Panel | A class representing a code panel |
 
 <Preview>
- <section class="code-panel u-min-width-100-percent theme-dark">
+ <section class="code-panel u-min-width-100-percent">
         <header class="code-panel-header">
             <div class="u-flex u-gap-16 u-margin-inline-start-auto">
                 <button class="button is-text">
diff --git a/packages/ui/src/7-components/_code-panel.scss b/packages/ui/src/7-components/_code-panel.scss
index 8af9e860eb..fa0e730aa1 100644
--- a/packages/ui/src/7-components/_code-panel.scss
+++ b/packages/ui/src/7-components/_code-panel.scss
@@ -1,34 +1,28 @@
 @use "../abstract" as *;
 
 .code-panel {
-  --p-code-panel-header: var(--color-neutral-85);
-  --p-code-panel-content: var(--color-neutral-90);
-  --p-code-panel-text-color: var(--color-neutral-5);
+  --p-code-panel-header:        var(--color-neutral-5);
+  --p-code-panel-border-color:  var(--color-neutral-15);
+  --p-code-panel-content:       var(--color-neutral-0);
+  //--p-code-panel-text-color:   var(--color-neutral-120);
 
-  display: flex;
-  flex-direction: column;
-  block-size: 100%;
-  flex-shrink: 0;
-  overflow: hidden;
-  border: solid 1px hsl(var(--p-code-panel-border-color));
+  display:flex; flex-direction:column; block-size:100%; flex-shrink:0; overflow:hidden;
+  border: solid pxToRem(1) hsl(var(--p-code-panel-border-color));
   border-radius: var(--border-radius-xsmall);
-  color: hsl(var(--p-code-panel-text-color));
+  //color: hsl(var(--p-code-panel-text-color));
   &-header {
-    display: flex;
-    padding: pxToRem(16);
+    display:flex; padding:pxToRem(16);
     background-color: hsl(var(--p-code-panel-header));
-    border-block-end: solid 1px hsl(var(--p-code-panel-border-color));
+    border-block-end: solid pxToRem(1) hsl(var(--p-code-panel-border-color));
   }
   &-content {
-    flex: 1;
-    padding: pxToRem(24);
-    overflow: auto;
+    flex:1; padding:pxToRem(24); overflow:auto;
     background-color: hsl(var(--p-code-panel-content));
   }
   #{$theme-dark} & {
-    --p-code-panel-header: var(--color-neutral-200);
-    --p-code-panel-border-color: var(--transparent);
-    --p-code-panel-content: var(--color-neutral-300);
+    --p-code-panel-header: var(--color-neutral-100);
+    --p-code-panel-border-color: var(--color-neutral-85);
+    --p-code-panel-content: var(--color-neutral-200);
     --p-code-panel-text-color: var(--color-neutral-5);
   }
 }