diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte
index c85ade90b..9a4b4f0bc 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte
@@ -22,12 +22,13 @@
     import AppleMacOs from './appleMacOS.svelte';
     import AppleWatchOs from './appleWatchOS.svelte';
     import AppleTvos from './appleTvOS.svelte';
+    import Android from './android.svelte';
 
     const projectId = $page.params.project;
     const platformId = $page.params.platform;
     const types: Record<string, typeof SvelteComponent> = {
         web: Web,
-        android: Web,
+        android: Android,
         'apple-ios': AppleiOs,
         'apple-macos': AppleMacOs,
         'apple-watchos': AppleWatchOs,
@@ -126,7 +127,6 @@
             <svelte:fragment slot="aside">
                 <div class="box">
                     <div class="u-flex u-gap-16">
-                        <!-- <img class="avatar" src="/icons/dark/color/android.svg" /> -->
                         <div class="u-cross-child-center u-line-height-1-5">
                             <h6 class="u-bold">{$platform.name}</h6>
                             <p>{$platform.hostname}</p>
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/android.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/android.svelte
new file mode 100644
index 000000000..24ef79fc8
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/android.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+    import { CardGrid, Heading } from '$lib/components';
+    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { project } from '../../../store';
+    import { platform } from './store';
+
+    let hostname: string = null;
+
+    onMount(() => {
+        hostname ??= $platform.hostname;
+    });
+
+    const updateHostname = async () => {
+        try {
+            await sdkForConsole.projects.updatePlatform(
+                $project.$id,
+                $platform.$id,
+                $platform.name,
+                undefined,
+                undefined,
+                hostname
+            );
+            project.load($project.$id);
+            addNotification({
+                type: 'success',
+                message: 'Platform hostname has been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={updateHostname}>
+    <CardGrid>
+        <Heading tag="h6" size="7">Update Package Name</Heading>
+        <p class="text">
+            Your package name is generally the applicationId in your app-level build.gradle file.
+        </p>
+        <svelte:fragment slot="aside">
+            <FormList>
+                <InputText
+                    id="hostname"
+                    label="Package Name"
+                    bind:value={hostname}
+                    required
+                    placeholder="com.company.appname" />
+            </FormList>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={hostname === $platform.hostname} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>