diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 21fa3228e..1ab386a80 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -14,3 +14,4 @@ export { default as DropListItem } from './dropListItem.svelte';
 export { default as DropListLink } from './dropListLink.svelte';
 export { default as Collapsible } from './collapsible.svelte';
 export { default as Avatar } from './avatar.svelte';
+export { default as SwitchBox } from './switchBox.svelte';
diff --git a/src/lib/components/switchBox.svelte b/src/lib/components/switchBox.svelte
new file mode 100644
index 000000000..0f8d7f24e
--- /dev/null
+++ b/src/lib/components/switchBox.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+    export let label: string;
+    export let id: string;
+    export let src: string;
+    export let alt: string = '';
+    export let href: string = '';
+    export let linkText: string = 'Docs';
+    export let value = false;
+    export let required = false;
+    export let disabled = false;
+</script>
+
+<li class="card">
+    <label class="switch-box" for={id}>
+        <div class="switch-box-image">
+            <img height="50" width="50" {src} {alt} />
+        </div>
+        <span class="switch-box-title">{label}</span>
+        {#if href.length}
+            <a {href} class="link" target="_blank">
+                <span class="text">{linkText}</span>
+                <span class="icon-link-ext" aria-hidden="true" />
+            </a>
+        {/if}
+        <input
+            {id}
+            {disabled}
+            {required}
+            type="checkbox"
+            class="switch"
+            role="switch"
+            bind:checked={value} />
+    </label>
+</li>
diff --git a/src/routes/console/[project]/users/settings.svelte b/src/routes/console/[project]/users/settings.svelte
index c270642c7..275106066 100644
--- a/src/routes/console/[project]/users/settings.svelte
+++ b/src/routes/console/[project]/users/settings.svelte
@@ -1,10 +1,21 @@
 <script>
-    import { Card } from '$lib/components';
+    import { SwitchBox } from '$lib/components';
     import { Container } from '$lib/layout';
+
+    let email_password = true;
+
+    //@todo : add SwitchBox click logic
 </script>
 
 <Container>
     <h1>Settings</h1>
-
-    <Card />
+    <p>Choose auth methods you wish to use.</p>
+    <ul class="grid-box">
+        <SwitchBox
+            label="Email/Password"
+            id="notifications"
+            src="https://via.placeholder.com/50"
+            href="https://appwrite.io/docs/client/account?sdk=web-default#accountCreateSession"
+            value={email_password} />
+    </ul>
 </Container>
diff --git a/tests/unit/components/switchBox.test.ts b/tests/unit/components/switchBox.test.ts
new file mode 100644
index 000000000..83b6bdfaf
--- /dev/null
+++ b/tests/unit/components/switchBox.test.ts
@@ -0,0 +1,56 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/svelte';
+import { SwitchBox } from '../../../src/lib/components';
+const src = 'https://via.placeholder.com/50';
+
+test('shows boolean input', () => {
+    const { getByText, getByRole, getByAltText } = render(SwitchBox, {
+        id: 'input',
+        src,
+        label: 'Bool',
+        alt: 'image'
+    });
+    const checkbox = getByRole('switch');
+    const img = getByAltText('image');
+
+    expect(getByText('Bool')).toBeInTheDocument();
+    expect(img).toBeInTheDocument();
+    expect(checkbox).toBeInTheDocument();
+    expect(checkbox).toHaveAttribute('type', 'checkbox');
+});
+
+test('shows boolean input - required', () => {
+    const { getByRole } = render(SwitchBox, { id: 'input', src, label: 'Bool', required: true });
+
+    expect(getByRole('switch')).toBeRequired();
+});
+
+test('shows boolean input - disabled', () => {
+    const { getByRole } = render(SwitchBox, { id: 'input', src, label: 'Bool', disabled: true });
+
+    expect(getByRole('switch')).toBeDisabled();
+});
+
+test('state', async () => {
+    const { getByRole, component } = render(SwitchBox, { id: 'input', src, label: 'Bool' });
+    const checkbox = getByRole('switch');
+
+    expect(checkbox).not.toBeChecked();
+    expect(component.value).toStrictEqual(false);
+
+    await fireEvent.click(checkbox);
+    expect(checkbox).toBeChecked();
+    expect(component.value).toStrictEqual(true);
+
+    await fireEvent.click(checkbox);
+    expect(checkbox).not.toBeChecked();
+    expect(component.value).toStrictEqual(false);
+
+    component.value = true;
+    expect(checkbox).toBeChecked();
+    expect(component.value).toStrictEqual(true);
+
+    component.value = false;
+    expect(checkbox).not.toBeChecked();
+    expect(component.value).toStrictEqual(false);
+});