diff --git a/playgrounds/app/src/components/Editor.tsx b/playgrounds/app/src/components/Editor.tsx
index 6780a18..0709f3f 100644
--- a/playgrounds/app/src/components/Editor.tsx
+++ b/playgrounds/app/src/components/Editor.tsx
@@ -264,9 +264,9 @@ export default function Editor(props: EditorProps) {
           <TabsTrigger value="output">Step 2: Output</TabsTrigger>
         </TabsList>
         <TabsContent value="snippets">
-          <div class="flex flex-row p-2 gap-2 bg-slate-500 rounded-t justify-between">
+          <div class="flex flex-row p-2 gap-2 dark:bg-[#27272a] bg-gray-100 rounded-t justify-between">
             <div class="flex flex-row gap-2 items-center">
-              <div class="rounded bg-white p-2">Enter the code snippets you would like to diff</div>
+              <div class="">Enter the code snippets you would like to diff</div>
             </div>
             <div class="flex flex-row gap-2">
               <Button
@@ -280,20 +280,23 @@ export default function Editor(props: EditorProps) {
             </div>
           </div>
 
-          <div class="bg-slate-400 p-2 rounded-b flex flex-row gap-2">
-            <TextField class="w-1/2" value={startCode} onChange={setStartCode}>
+          <div class="dark:bg-[#27272a] dark:bg-background bg-gray-100 p-2 rounded-b flex flex-row flex-wrap md:flex-nowrap gap-2">
+            <TextField class="w-full md:w-1/2" value={startCode} onChange={setStartCode}>
               <TextFieldLabel>Start Code</TextFieldLabel>
               <TextFieldTextArea class="h-[400px]" placeholder="Type your message here." />
             </TextField>
 
-            <TextField class="w-1/2" value={endCode} onChange={setEndCode}>
+            <TextField class="md:w-1/2" value={endCode} onChange={setEndCode}>
               <TextFieldLabel>End Code</TextFieldLabel>
               <TextFieldTextArea class="h-[400px]" placeholder="Type your message here." />
             </TextField>
           </div>
         </TabsContent>
         <TabsContent value="output">
-          <div class="flex flex-row p-2 gap-2 bg-slate-500 rounded-t justify-between" id="toolbar">
+          <div
+            class="flex flex-row p-2 gap-2 dark:bg-[#27272a] bg-gray-100 rounded-t justify-between"
+            id="toolbar"
+          >
             <div class="flex flex-row gap-2" id="toolbar-left">
               <Combobox
                 value={theme}
@@ -302,7 +305,9 @@ export default function Editor(props: EditorProps) {
                 placeholder="Search a theme..."
                 itemComponent={props => (
                   <ComboboxItem item={props.item}>
-                    <ComboboxItemLabel>{props.item.rawValue}</ComboboxItemLabel>
+                    <ComboboxItemLabel class="dark:text-black">
+                      {props.item.rawValue}
+                    </ComboboxItemLabel>
                     <ComboboxItemIndicator />
                   </ComboboxItem>
                 )}
@@ -530,7 +535,7 @@ export default function Editor(props: EditorProps) {
 
           <div
             id="preview-wrapper"
-            class="bg-slate-400 p-2 rounded-b"
+            class="dark:bg-[#27272a] bg-gray-100 p-2 rounded-b"
             style={{
               'min-height': `${(maxContainerDimensions()?.height || 100) + 40}px`,
             }}
diff --git a/playgrounds/app/src/components/Header.tsx b/playgrounds/app/src/components/Header.tsx
index 6a6f8e3..ef44814 100644
--- a/playgrounds/app/src/components/Header.tsx
+++ b/playgrounds/app/src/components/Header.tsx
@@ -13,8 +13,9 @@ import {
 } from '~/components/ui/dropdown-menu'
 import { user } from '~/lib/store'
 import { TbCode, TbDoorExit } from 'solid-icons/tb'
+import { linkStyles } from '~/lib/styles'
 
-export default function Nav() {
+export default function Header() {
   const [isDarkMode, toggleDarkMode] = createThemeSwitcher()
 
   const handleToggle = () => {
@@ -27,7 +28,7 @@ export default function Nav() {
         <div class="flex flex-row items-center gap-2">
           <button
             onClick={handleToggle}
-            class="flex items-center justify-center cursor-pointer w-8 h-8 bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-600 dark:hover:bg-neutral-600/80 rounded-full transition"
+            class="flex items-center justify-center cursor-pointer w-10 h-10 bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-600 dark:hover:bg-neutral-600/80 rounded transition"
             aria-label="Toggle dark mode"
           >
             {isDarkMode() ? (
@@ -80,6 +81,12 @@ export default function Nav() {
         <a href="/">
           <h1 class="text-6xl font-title text-sky-500">Giffium</h1>
         </a>
+        <p class="text-left mt-[-10px]">
+          by{' '}
+          <a href="https://cmgriffing.com" rel="dofollow" target="_blank" class={linkStyles}>
+            cmgriffing
+          </a>
+        </p>
       </div>
     </header>
   )
diff --git a/playgrounds/app/src/components/ui/combobox.tsx b/playgrounds/app/src/components/ui/combobox.tsx
index c8014ae..8f9facd 100644
--- a/playgrounds/app/src/components/ui/combobox.tsx
+++ b/playgrounds/app/src/components/ui/combobox.tsx
@@ -1,43 +1,43 @@
-import type { JSX, ValidComponent } from "solid-js"
-import { splitProps } from "solid-js"
+import type { JSX, ValidComponent } from 'solid-js'
+import { splitProps } from 'solid-js'
 
-import * as ComboboxPrimitive from "@kobalte/core/combobox"
-import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import * as ComboboxPrimitive from '@kobalte/core/combobox'
+import type { PolymorphicProps } from '@kobalte/core/polymorphic'
 
-import { cn } from "~/lib/utils"
+import { cn } from '~/lib/utils'
 
 const Combobox = ComboboxPrimitive.Root
 const ComboboxItemLabel = ComboboxPrimitive.ItemLabel
 const ComboboxHiddenSelect = ComboboxPrimitive.HiddenSelect
 
-type ComboboxItemProps<T extends ValidComponent = "li"> = ComboboxPrimitive.ComboboxItemProps<T> & {
+type ComboboxItemProps<T extends ValidComponent = 'li'> = ComboboxPrimitive.ComboboxItemProps<T> & {
   class?: string | undefined
 }
 
-const ComboboxItem = <T extends ValidComponent = "li">(
-  props: PolymorphicProps<T, ComboboxItemProps<T>>
+const ComboboxItem = <T extends ValidComponent = 'li'>(
+  props: PolymorphicProps<T, ComboboxItemProps<T>>,
 ) => {
-  const [local, others] = splitProps(props as ComboboxItemProps, ["class"])
+  const [local, others] = splitProps(props as ComboboxItemProps, ['class'])
   return (
     <ComboboxPrimitive.Item
       class={cn(
-        "relative flex cursor-default select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
-        local.class
+        'relative flex cursor-default select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
+        local.class,
       )}
       {...others}
     />
   )
 }
 
-type ComboboxItemIndicatorProps<T extends ValidComponent = "div"> =
+type ComboboxItemIndicatorProps<T extends ValidComponent = 'div'> =
   ComboboxPrimitive.ComboboxItemIndicatorProps<T> & {
     children?: JSX.Element
   }
 
-const ComboboxItemIndicator = <T extends ValidComponent = "div">(
-  props: PolymorphicProps<T, ComboboxItemIndicatorProps<T>>
+const ComboboxItemIndicator = <T extends ValidComponent = 'div'>(
+  props: PolymorphicProps<T, ComboboxItemIndicatorProps<T>>,
 ) => {
-  const [local, others] = splitProps(props as ComboboxItemIndicatorProps, ["children"])
+  const [local, others] = splitProps(props as ComboboxItemIndicatorProps, ['children'])
   return (
     <ComboboxPrimitive.ItemIndicator {...others}>
       {local.children ?? (
@@ -49,7 +49,7 @@ const ComboboxItemIndicator = <T extends ValidComponent = "div">(
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
-          class="size-4"
+          class="size-4 dark:text-black"
         >
           <path d="M5 12l5 5l10 -10" />
         </svg>
@@ -58,18 +58,18 @@ const ComboboxItemIndicator = <T extends ValidComponent = "div">(
   )
 }
 
-type ComboboxSectionProps<T extends ValidComponent = "li"> =
+type ComboboxSectionProps<T extends ValidComponent = 'li'> =
   ComboboxPrimitive.ComboboxSectionProps<T> & { class?: string | undefined }
 
-const ComboboxSection = <T extends ValidComponent = "li">(
-  props: PolymorphicProps<T, ComboboxSectionProps<T>>
+const ComboboxSection = <T extends ValidComponent = 'li'>(
+  props: PolymorphicProps<T, ComboboxSectionProps<T>>,
 ) => {
-  const [local, others] = splitProps(props as ComboboxSectionProps, ["class"])
+  const [local, others] = splitProps(props as ComboboxSectionProps, ['class'])
   return (
     <ComboboxPrimitive.Section
       class={cn(
-        "overflow-hidden p-1 px-2 py-1.5 text-xs font-medium text-muted-foreground ",
-        local.class
+        'overflow-hidden p-1 px-2 py-1.5 text-xs font-medium text-muted-foreground ',
+        local.class,
       )}
       {...others}
     />
@@ -78,53 +78,53 @@ const ComboboxSection = <T extends ValidComponent = "li">(
 
 type ComboboxControlProps<
   U,
-  T extends ValidComponent = "div"
+  T extends ValidComponent = 'div',
 > = ComboboxPrimitive.ComboboxControlProps<U, T> & {
   class?: string | undefined
 }
 
-const ComboboxControl = <T, U extends ValidComponent = "div">(
-  props: PolymorphicProps<U, ComboboxControlProps<T>>
+const ComboboxControl = <T, U extends ValidComponent = 'div'>(
+  props: PolymorphicProps<U, ComboboxControlProps<T>>,
 ) => {
-  const [local, others] = splitProps(props as ComboboxControlProps<T>, ["class"])
+  const [local, others] = splitProps(props as ComboboxControlProps<T>, ['class'])
   return (
     <ComboboxPrimitive.Control
-      class={cn("flex items-center rounded-md border px-3", local.class)}
+      class={cn('flex items-center rounded-md border px-3', local.class)}
       {...others}
     />
   )
 }
 
-type ComboboxInputProps<T extends ValidComponent = "input"> =
+type ComboboxInputProps<T extends ValidComponent = 'input'> =
   ComboboxPrimitive.ComboboxInputProps<T> & { class?: string | undefined }
 
-const ComboboxInput = <T extends ValidComponent = "input">(
-  props: PolymorphicProps<T, ComboboxInputProps<T>>
+const ComboboxInput = <T extends ValidComponent = 'input'>(
+  props: PolymorphicProps<T, ComboboxInputProps<T>>,
 ) => {
-  const [local, others] = splitProps(props as ComboboxInputProps, ["class"])
+  const [local, others] = splitProps(props as ComboboxInputProps, ['class'])
   return (
     <ComboboxPrimitive.Input
       class={cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        local.class
+        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:text-black',
+        local.class,
       )}
       {...others}
     />
   )
 }
 
-type ComboboxTriggerProps<T extends ValidComponent = "button"> =
+type ComboboxTriggerProps<T extends ValidComponent = 'button'> =
   ComboboxPrimitive.ComboboxTriggerProps<T> & {
     class?: string | undefined
     children?: JSX.Element
   }
 
-const ComboboxTrigger = <T extends ValidComponent = "button">(
-  props: PolymorphicProps<T, ComboboxTriggerProps<T>>
+const ComboboxTrigger = <T extends ValidComponent = 'button'>(
+  props: PolymorphicProps<T, ComboboxTriggerProps<T>>,
 ) => {
-  const [local, others] = splitProps(props as ComboboxTriggerProps, ["class", "children"])
+  const [local, others] = splitProps(props as ComboboxTriggerProps, ['class', 'children'])
   return (
-    <ComboboxPrimitive.Trigger class={cn("size-4 opacity-50", local.class)} {...others}>
+    <ComboboxPrimitive.Trigger class={cn('size-4 opacity-50', local.class)} {...others}>
       <ComboboxPrimitive.Icon>
         {local.children ?? (
           <svg
@@ -135,7 +135,7 @@ const ComboboxTrigger = <T extends ValidComponent = "button">(
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
-            class="size-4"
+            class="size-4 dark:text-black"
           >
             <path d="M8 9l4 -4l4 4" />
             <path d="M16 15l-4 4l-4 -4" />
@@ -146,19 +146,19 @@ const ComboboxTrigger = <T extends ValidComponent = "button">(
   )
 }
 
-type ComboboxContentProps<T extends ValidComponent = "div"> =
+type ComboboxContentProps<T extends ValidComponent = 'div'> =
   ComboboxPrimitive.ComboboxContentProps<T> & { class?: string | undefined }
 
-const ComboboxContent = <T extends ValidComponent = "div">(
-  props: PolymorphicProps<T, ComboboxContentProps<T>>
+const ComboboxContent = <T extends ValidComponent = 'div'>(
+  props: PolymorphicProps<T, ComboboxContentProps<T>>,
 ) => {
-  const [local, others] = splitProps(props as ComboboxContentProps, ["class"])
+  const [local, others] = splitProps(props as ComboboxContentProps, ['class'])
   return (
     <ComboboxPrimitive.Portal>
       <ComboboxPrimitive.Content
         class={cn(
-          "relative z-50 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80",
-          local.class
+          'relative z-50 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80',
+          local.class,
         )}
         {...others}
       >
@@ -178,5 +178,5 @@ export {
   ComboboxTrigger,
   ComboboxInput,
   ComboboxHiddenSelect,
-  ComboboxContent
+  ComboboxContent,
 }