diff --git a/docs/app/components/server/avatar/description.md b/docs/app/components/server/avatar/description.md
deleted file mode 100644
index 347d36893e..0000000000
--- a/docs/app/components/server/avatar/description.md
+++ /dev/null
@@ -1 +0,0 @@
-The Avatar component is typically used to display images, icons, or initials representing people or other entities.
diff --git a/docs/app/components/server/avatar/examples/Active.tsx b/docs/app/components/server/avatar/examples/Active.tsx
deleted file mode 100644
index 054d532fd2..0000000000
--- a/docs/app/components/server/avatar/examples/Active.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import Avatar from '@heathmont/moon-core-tw/lib/es/avatar/Avatar';
-import { GenericUser } from '@heathmont/moon-icons-tw';
-
-export const Active = () => (
-  <>
-    <Avatar>
-      <GenericUser className="text-moon-24" />
-      <Avatar.Status />
-    </Avatar>
-    <Avatar>
-      md
-      <Avatar.Status />
-    </Avatar>
-    <Avatar imageUrl="../avatar.jpeg">
-      <Avatar.Status />
-    </Avatar>
-  </>
-);
diff --git a/docs/app/components/server/avatar/examples/Default.tsx b/docs/app/components/server/avatar/examples/Default.tsx
deleted file mode 100644
index 56062a94aa..0000000000
--- a/docs/app/components/server/avatar/examples/Default.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import Avatar from '@heathmont/moon-core-tw/lib/es/avatar/Avatar';
-import { GenericUser } from '@heathmont/moon-icons-tw';
-
-export const Default = () => {
-  return <Avatar>
-    <GenericUser className="text-moon-24" />
-  </Avatar>
-};
diff --git a/docs/app/components/server/avatar/page.tsx b/docs/app/components/server/avatar/page.tsx
deleted file mode 100644
index 9cc2938a33..0000000000
--- a/docs/app/components/server/avatar/page.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Active } from "@/app/components/server/avatar/examples/Active";
-import { Default } from "@/app/components/server/avatar/examples/Default";
-import { getExamples } from "@/app/utils/getExamples";
-import { MDX } from "@/components/MDX";
-
-
-export default async function Home() {
-  const { server } = await getExamples();
-
-  return (
-    <div className="flex flex-col gap-4 text-moon-14">
-      <h1>Avatar</h1>
-
-      <MDX markdown={server.avatar.description} />
-
-      <div className="space-y-2">
-        <h2>Default</h2>
-        <div className={'flex flex-wrap items-center justify-around p-4 gap-2 w-full bg-goku rounded-moon-s-sm'}>
-          <Default />
-        </div>
-        <pre className="bg-goku rounded-moon-s-sm p-4">{server.avatar.examples.Default}</pre>
-      </div>
-
-      <div className="space-y-2">
-        <h2>Active</h2>
-        <div className={'flex flex-wrap items-center justify-around p-4 gap-2 w-full bg-goku rounded-moon-s-sm'}>
-          <Active />
-        </div>
-        <pre className="bg-goku rounded-moon-s-sm p-4">{server.avatar.examples.Active}</pre>
-      </div>
-    </div>
-  )
-}
-
diff --git a/docs/app/components/server/checkbox/description.md b/docs/app/components/server/checkbox/description.md
new file mode 100644
index 0000000000..c376928764
--- /dev/null
+++ b/docs/app/components/server/checkbox/description.md
@@ -0,0 +1,3 @@
+The checkbox is shown as a square box that is ticked (checked) when activated.
+
+Checkboxes are used to let a user select one or more options of a limited number of choices.
diff --git a/docs/app/components/server/checkbox/examples/Default.tsx b/docs/app/components/server/checkbox/examples/Default.tsx
new file mode 100644
index 0000000000..5534f0b399
--- /dev/null
+++ b/docs/app/components/server/checkbox/examples/Default.tsx
@@ -0,0 +1,5 @@
+import Checkbox from '@heathmont/moon-base-tw/lib/checkbox/Checkbox';
+
+export const Default = () => <Checkbox />;
+
+export default Default;
diff --git a/docs/app/components/server/checkbox/page.tsx b/docs/app/components/server/checkbox/page.tsx
new file mode 100644
index 0000000000..74ea2d5e6f
--- /dev/null
+++ b/docs/app/components/server/checkbox/page.tsx
@@ -0,0 +1,22 @@
+import { Default } from '@/app/components/server/checkbox/examples/Default';
+import ExampleSection from '@/app/components/shared/ExampleSection';
+import QuickNav from '@/app/components/shared/QuickNav';
+import { getExamples } from '@/app/utils/getExamples';
+import { MDX } from '@/components/MDX';
+
+export default async function Home() {
+  const { server } = await getExamples();
+  const examplesList = Object.keys(server.checkbox.examples);
+  return (
+    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+      <h1 className="font-medium text-moon-32">Checkbox</h1>
+      <MDX markdown={server.checkbox.description} />
+      <QuickNav items={examplesList} />
+      <ExampleSection
+        title="Default"
+        component={<Default />}
+        code={server.checkbox.examples.Default}
+      />
+    </div>
+  );
+}
diff --git a/docs/app/components/types.ts b/docs/app/components/types.ts
index 05beff9403..d3a9f5e9ea 100644
--- a/docs/app/components/types.ts
+++ b/docs/app/components/types.ts
@@ -36,10 +36,9 @@ export interface Examples {
         Multiline: 'string';
       };
     };
-    avatar: {
+    checkbox: {
       description: 'string';
       examples: {
-        Active: 'string';
         Default: 'string';
       };
     };
diff --git a/workspaces/base/src/checkbox/Checkbox.tsx b/workspaces/base/src/checkbox/Checkbox.tsx
index b347c2c04c..be4d7de3db 100644
--- a/workspaces/base/src/checkbox/Checkbox.tsx
+++ b/workspaces/base/src/checkbox/Checkbox.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef } from 'react';
 import type CheckboxProps from './private/types/CheckboxProps';
 import mergeClassnames from '../mergeClassnames/mergeClassnames';
 import ControlsMinus from '../private/icons/ControlsMinus';