diff --git a/src/lib/components/icons/label-input.stories.ts b/src/lib/components/forms/label-input.stories.ts
similarity index 94%
rename from src/lib/components/icons/label-input.stories.ts
rename to src/lib/components/forms/label-input.stories.ts
index 95339d6..fbd2df5 100644
--- a/src/lib/components/icons/label-input.stories.ts
+++ b/src/lib/components/forms/label-input.stories.ts
@@ -1,7 +1,7 @@
 import LabelInput from './label-input.svelte';
 
 export default {
-  title: 'Atoms/LabelInput',
+  title: 'Atoms/Forms/Label Input',
   component: LabelInput,
   argTypes: {
     label: { control: 'text' },
diff --git a/src/lib/components/icons/label-input.svelte b/src/lib/components/forms/label-input.svelte
similarity index 100%
rename from src/lib/components/icons/label-input.svelte
rename to src/lib/components/forms/label-input.svelte
diff --git a/src/lib/components/forms/picture-input.stories.ts b/src/lib/components/forms/picture-input.stories.ts
new file mode 100644
index 0000000..75db55f
--- /dev/null
+++ b/src/lib/components/forms/picture-input.stories.ts
@@ -0,0 +1,18 @@
+import PictureInput from './picture-input.svelte';
+
+export default {
+  title: 'Atoms/Forms',
+  component: PictureInput,
+  argTypes: {
+    text: { control: 'text' }
+  },
+  parameters: {
+    layout: 'centered'
+  }
+};
+
+export const Picture_Input = {
+  args: {
+    text: 'Adicionar logo'
+  }
+};
diff --git a/src/lib/components/forms/picture-input.svelte b/src/lib/components/forms/picture-input.svelte
new file mode 100644
index 0000000..ccc7a06
--- /dev/null
+++ b/src/lib/components/forms/picture-input.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import Icon from '$lib/components/icons/icon.svelte';
+  import Icons from '$lib/components/icons/icons';
+  import { createNotification } from '@/routes/(app)/_components/layout/notifications';
+  import notificationMessages from '@/routes/(app)/_components/layout/notifications/notification-messages';
+
+  export let text: string;
+  export let name: string = 'profilePicture';
+  let image: string;
+  let fileInput: HTMLInputElement;
+
+  const onFileSelected = (e) => {
+    const file = e.target.files[0];
+
+    // ensure the file is an image
+    if (file?.type?.split('/')[0] !== 'image') {
+      createNotification(notificationMessages.INVALID_IMAGE);
+      return;
+    }
+
+    // update the image
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = (e) => {
+      image = e.target?.result?.toString() ?? image;
+    };
+  };
+</script>
+
+<div class="flex flex-col items-center justify-center gap-y-2">
+  <input
+    style="display:none"
+    type="file"
+    {name}
+    accept="image/*"
+    on:change={(e) => onFileSelected(e)}
+    bind:this={fileInput}
+  />
+  <button
+    type="button"
+    aria-label="Upload image"
+    class="relative flex h-[200px] w-[200px] items-center justify-center rounded-md bg-muted-red-400 text-center"
+    on:click={() => {
+      fileInput.click();
+    }}
+  >
+    {#if image}
+      <img class="h-[200px] w-[200px] rounded-md object-cover" src={image} alt="Avatar" />
+    {:else}
+      <p class="font-medium text-white">{text}<span class="text-2xl">*</span></p>
+    {/if}
+    <div
+      class="absolute bottom-0 right-0 m-2 flex h-[15%] w-[15%] cursor-pointer items-center justify-center rounded-md bg-rose-950"
+    >
+      <Icon src={Icons.Edit} color="white" size="60%" />
+    </div>
+  </button>
+  <button
+    type="button"
+    aria-label="Remove image"
+    class="{image ? 'visible' : 'invisible'} text-sm font-bold text-white hover:underline"
+    on:click={() => {
+      fileInput.value = image = '';
+    }}
+  >
+    Remover imagem
+  </button>
+</div>
diff --git a/src/lib/components/forms/radio-buttons.stories.ts b/src/lib/components/forms/radio-buttons.stories.ts
new file mode 100644
index 0000000..526a8bf
--- /dev/null
+++ b/src/lib/components/forms/radio-buttons.stories.ts
@@ -0,0 +1,19 @@
+import RadioButtons from './radio-buttons.svelte';
+
+export default {
+  title: 'Atoms/Forms',
+  component: RadioButtons,
+  argTypes: {
+    options: { control: 'array' }
+  },
+  parameters: {
+    layout: 'centered'
+  }
+};
+
+export const Radio_Button = {
+  args: {
+    label: 'Language',
+    options: ['English', 'Spanish']
+  }
+};
diff --git a/src/lib/components/forms/radio-buttons.svelte b/src/lib/components/forms/radio-buttons.svelte
new file mode 100644
index 0000000..41f0a90
--- /dev/null
+++ b/src/lib/components/forms/radio-buttons.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  export let label: string;
+  export let options: string[];
+  export let horizontal: boolean = false;
+</script>
+
+<fieldset class="flex flex-row align-middle">
+  <legend
+    class="m-1 font-source_code font-bold text-white {horizontal ? 'float-left self-center' : ''}"
+    >{label}</legend
+  >
+  {#each options as option}
+    <input
+      id="radio-{label.toLowerCase()}-{option.toLowerCase()}"
+      class="hidden text-center"
+      type="radio"
+      name={label}
+      value={option}
+    />
+    <label
+      class="m-1 justify-self-start rounded-lg bg-taupe-200 px-5 py-1 font-bold text-rose-950"
+      for="radio-{label.toLowerCase()}-{option.toLowerCase()}"
+    >
+      {option}
+    </label>
+  {/each}
+</fieldset>
+
+<style>
+  input:checked + label {
+    background-color: theme('colors.muted-red.400');
+    color: theme('colors.taupe.100');
+  }
+</style>
diff --git a/src/lib/components/icons/icons.ts b/src/lib/components/icons/icons.ts
index 13f3c11..9e5908e 100644
--- a/src/lib/components/icons/icons.ts
+++ b/src/lib/components/icons/icons.ts
@@ -10,6 +10,7 @@ import {
 } from 'svelte-icons-pack/fa';
 import { BiMap } from 'svelte-icons-pack/bi';
 import { IoMail, IoClose, IoEye, IoEyeOff } from 'svelte-icons-pack/io';
+import { FiEdit2 } from 'svelte-icons-pack/fi';
 
 const Icons = {
   Instagram: FaBrandsInstagram,
@@ -24,7 +25,8 @@ const Icons = {
   Globe: FaSolidGlobe,
   Pin: BiMap,
   Visible: IoEye,
-  Hidden: IoEyeOff
+  Hidden: IoEyeOff,
+  Edit: FiEdit2
 };
 
 export default Icons;
diff --git a/src/routes/(app)/_components/layout/notifications/notification-messages.ts b/src/routes/(app)/_components/layout/notifications/notification-messages.ts
index 6f93c8e..0ab3dca 100644
--- a/src/routes/(app)/_components/layout/notifications/notification-messages.ts
+++ b/src/routes/(app)/_components/layout/notifications/notification-messages.ts
@@ -1,5 +1,6 @@
 export default Object.freeze<{
   [key: string]: string;
 }>({
-  COPY_EMAIL: 'O email foi copiado para o teu clipboard :)'
+  COPY_EMAIL: 'O email foi copiado para o teu clipboard :)',
+  INVALID_IMAGE: 'Imagem inválida! Por favor, seleciona outra.'
 });
diff --git a/src/routes/(app)/contacts/+page.svelte b/src/routes/(app)/contacts/+page.svelte
index e98d94c..0fe5458 100644
--- a/src/routes/(app)/contacts/+page.svelte
+++ b/src/routes/(app)/contacts/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Icon } from 'svelte-icons-pack';
   import Graph from './_components/graph.svelte';
-  import LabelInput from '@/lib/components/icons/label-input.svelte';
+  import LabelInput from '@/lib/components/forms/label-input.svelte';
   import Icons from '$lib/components/icons/icons';
 </script>