diff --git a/src/components/home/Content/Admin/Communities/Communities.vue b/src/components/home/Content/Admin/Communities/Communities.vue
index aa30125..398427c 100644
--- a/src/components/home/Content/Admin/Communities/Communities.vue
+++ b/src/components/home/Content/Admin/Communities/Communities.vue
@@ -12,13 +12,17 @@ import {
 } from "naive-ui";
 import { h, ref, onMounted, type Ref, reactive } from "vue";
 import { useI18n } from "vue-i18n";
-import { listCommunities } from "@/api/v1/management/communities";
+import {
+  deleteCommunity,
+  listCommunities,
+} from "@/api/v1/management/communities";
 import { Icon } from "@vicons/utils";
 import { Edit, Trash, Refresh, Plus } from "@vicons/tabler";
 
 import CommunityEditModal from "./CommunityEditModal.vue";
 
 const { t } = useI18n();
+const dialog = useDialog();
 
 const communities: Ref<Community[]> = ref([]);
 const showEditModal = ref(false);
@@ -136,7 +140,17 @@ async function getCommunities() {
 
 function handleEdit(community: Community) {}
 
-function handleRemove(community: Community) {}
+function handleRemove(community: Community) {
+  dialog.warning({
+    title: t("message.admin.community.remove.confirm"),
+    content: t("message.admin.community.remove.confirmTip"),
+    positiveText: t("message.common.confirm"),
+    negativeText: t("message.common.cancel"),
+    onPositiveClick() {
+      deleteCommunity(community.id).then(getCommunities);
+    },
+  });
+}
 
 function handleAdd() {
   editIsNew.value = true;
diff --git a/src/components/home/Content/Devices/DeviceCard.vue b/src/components/home/Content/Devices/DeviceCard.vue
index aebeef4..283278f 100644
--- a/src/components/home/Content/Devices/DeviceCard.vue
+++ b/src/components/home/Content/Devices/DeviceCard.vue
@@ -40,14 +40,6 @@ function removeThisDevice() {
     </template>
     <template #default>
       <NSpace vertical>
-        <NText>
-          {{ $t("message.devices.createdAt") }}:
-          <NTime :time="new Date(props.device.createdAt)" />
-        </NText>
-        <NText>
-          {{ $t("message.devices.owner") }}:
-          <NText strong>{{ props.device.owner.name }}</NText>
-        </NText>
         <NText v-if="props.device.isOnline">
           {{ $t("message.devices.ip", { ip: props.device.ip }) }}
         </NText>
@@ -63,6 +55,14 @@ function removeThisDevice() {
           {{ $t("message.devices.lastSeen") }}:
           <NTime :time="new Date(props.device.lastSeen! * 1000)" />
         </NText>
+        <NText>
+          {{ $t("message.devices.createdAt") }}:
+          <NTime :time="new Date(props.device.createdAt)" />
+        </NText>
+        <NText>
+          {{ $t("message.devices.owner") }}:
+          <NText strong>{{ props.device.owner.name }}</NText>
+        </NText>
       </NSpace>
     </template>
   </NCard>
diff --git a/src/components/home/Content/Devices/Index.vue b/src/components/home/Content/Devices/Index.vue
index bd236df..b0cf17c 100644
--- a/src/components/home/Content/Devices/Index.vue
+++ b/src/components/home/Content/Devices/Index.vue
@@ -12,26 +12,31 @@ import {
   NModal,
   useLoadingBar,
 } from "naive-ui";
-import { Crown, Plus, Refresh } from "@vicons/tabler";
+import { Crown, Plus, Refresh, AccessPoint } from "@vicons/tabler";
 import { Icon } from "@vicons/utils";
 
 import DeviceCard from "./DeviceCard.vue";
 import NewDeviceModal from "./NewDeviceModal.vue";
 import NewDeviceResult from "./NewDeviceResult.vue";
+import PublicCommunityJoin from "./PublicCommunityJoin.vue";
 
 import { Community } from "@/api/v1/dtos/community";
 import { listCommunities } from "@/api/v1/business/community";
 import { NewDeviceDto } from "@/api/v1/dtos/devices";
+import { Supernode } from "@/api/v1/dtos/supernode";
+import { getServerInfo } from "@/api/v1/common/supernode";
 
 const loadingBar = useLoadingBar();
 
 const firstLoading = ref(true);
 const showNewDeviceModal = ref(false);
 const showNewDeviceResult = ref(false);
+const showPublicCommunityJoinModal = ref(false);
 
 const allCommunities: Ref<Community[]> = ref([]);
 const newDevicePresetCommunity: Ref<Community | undefined> = ref();
 const newDevice: Ref<NewDeviceDto | undefined> = ref();
+const serverInfo: Ref<Supernode | undefined> = ref();
 
 async function getCommunities() {
   let page = 1;
@@ -78,7 +83,16 @@ function addedDevice(device: NewDeviceDto) {
   getCommunities();
 }
 
-onMounted(getCommunities);
+function joinPublicCommunity(community: Community) {
+  newDevicePresetCommunity.value = community;
+  showPublicCommunityJoinModal.value = true;
+}
+
+onMounted(async () => {
+  const response = await getServerInfo();
+  serverInfo.value = response.data.data;
+  await getCommunities();
+});
 </script>
 
 <template>
@@ -109,7 +123,28 @@ onMounted(getCommunities);
         </div>
         <div
           class="flex justify-center items-center w-full my-5"
-          v-show="community.devices.length === 0"
+          v-if="!community.encryption"
+        >
+          <NEmpty :description="$t('message.devices.publicCommunity')">
+            <template #icon>
+              <Icon>
+                <AccessPoint />
+              </Icon>
+            </template>
+            <template #extra>
+              <NButton
+                size="small"
+                type="primary"
+                @click="() => joinPublicCommunity(community)"
+              >
+                {{ $t("message.devices.wantToJoin") }}
+              </NButton>
+            </template>
+          </NEmpty>
+        </div>
+        <div
+          class="flex justify-center items-center w-full my-5"
+          v-if="community.encryption && community.devices.length === 0"
         >
           <NEmpty :description="$t('message.devices.emptyTip')">
             <template #icon>
@@ -151,5 +186,11 @@ onMounted(getCommunities);
         "
       />
     </NModal>
+    <NModal v-model:show="showPublicCommunityJoinModal">
+      <PublicCommunityJoin
+        :community="newDevicePresetCommunity!"
+        @close="showPublicCommunityJoinModal = false"
+      />
+    </NModal>
   </div>
 </template>
diff --git a/src/components/home/Content/Devices/PublicCommunityJoin.vue b/src/components/home/Content/Devices/PublicCommunityJoin.vue
new file mode 100644
index 0000000..92d7d48
--- /dev/null
+++ b/src/components/home/Content/Devices/PublicCommunityJoin.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import { Supernode } from "@/api/v1/dtos/supernode";
+import { getServerInfo } from "@/api/v1/common/supernode";
+import {
+  NCard,
+  NText,
+  NButton,
+  NCode,
+  NInput,
+  NCheckbox,
+  NForm,
+  NFormItem,
+  NButtonGroup,
+  NTooltip,
+  NSpace,
+  NAlert,
+} from "naive-ui";
+import { ref, onMounted, type Ref, computed } from "vue";
+import { Icon } from "@vicons/utils";
+import { Copy } from "@vicons/tabler";
+import { useClipboard } from "@vueuse/core";
+import { Community } from "@/api/v1/dtos/community";
+
+const props = defineProps<{
+  community: Community;
+}>();
+
+const emit = defineEmits<{
+  (e: "close"): void;
+}>();
+
+const clipboard = useClipboard();
+
+const serverInfo: Ref<Supernode | undefined> = ref();
+
+const copied = ref(false);
+const runInBackend = ref(false);
+const secretKey = ref("");
+const ipAddress = ref("");
+const { hostname } = window.location;
+
+const command = computed(() => {
+  return [
+    "edge",
+    `-l ${hostname}:${serverInfo.value?.port}`,
+    `-c ${props.community.name}`,
+    !!serverInfo.value?.publicKey ? `-P ${serverInfo.value?.publicKey}` : "",
+    !!ipAddress.value ? `-a ${ipAddress.value}` : "",
+    !!secretKey.value ? `-k ${secretKey.value}` : "",
+    !!secretKey.value ? "-A4" : "",
+    !runInBackend.value ? "-f" : "",
+  ]
+    .filter((s) => s.length > 0)
+    .join(" ")
+    .trim();
+});
+
+function handleCopyCommand() {
+  clipboard.copy(command.value);
+  copied.value = true;
+  setTimeout(() => {
+    copied.value = false;
+  }, 2000);
+}
+
+onMounted(async () => {
+  const response = await getServerInfo();
+  serverInfo.value = response.data.data;
+});
+</script>
+
+<template>
+  <NCard class="w-1/2">
+    <template #header>
+      <NText>{{ $t("message.devices.joinCommunity") }}</NText>
+    </template>
+    <template #default>
+      <NAlert type="warning" class="mb-4">
+        {{ $t("message.newDevice.securityTip") }}
+      </NAlert>
+      <NForm label-placement="left" label-width="auto">
+        <NFormItem
+          :label="$t('message.newDevice.secret')"
+          :feedback="$t('message.devices.secretTip')"
+        >
+          <NInput v-model:value="secretKey" spellcheck="false" />
+        </NFormItem>
+        <NFormItem
+          :label="$t('message.newDevice.ipAddress')"
+          validation-status="success"
+          :feedback="$t('message.newDevice.ipAddressTip')"
+        >
+          <NInput v-model:value="ipAddress" spellcheck="false" />
+        </NFormItem>
+        <NFormItem :label="$t('message.newDevice.runInBackend')">
+          <NCheckbox v-model:checked="runInBackend" />
+        </NFormItem>
+        <NFormItem :label="$t('message.newDevice.shellCommand')">
+          <NButtonGroup>
+            <NCode :code="command" inline />
+            <NTooltip>
+              <template #trigger>
+                <NButton @click="handleCopyCommand">
+                  <template #icon>
+                    <Icon><Copy /></Icon>
+                  </template>
+                </NButton>
+              </template>
+              <template #default>
+                {{
+                  copied
+                    ? $t("message.common.copied")
+                    : $t("message.common.copy")
+                }}
+              </template>
+            </NTooltip>
+          </NButtonGroup>
+        </NFormItem>
+      </NForm>
+    </template>
+    <template #footer>
+      <NSpace align="center" justify="end">
+        <NButton secondary @click="emit('close')">
+          {{ $t("message.common.close") }}
+        </NButton>
+      </NSpace>
+    </template>
+  </NCard>
+</template>
diff --git a/src/i18n/locales/zh-cn.yaml b/src/i18n/locales/zh-cn.yaml
index 840f476..3353605 100644
--- a/src/i18n/locales/zh-cn.yaml
+++ b/src/i18n/locales/zh-cn.yaml
@@ -47,6 +47,10 @@ message:
     createdAt: "添加于"
     owner: "归属于"
     deleteConfirm: "删除这个设备？（无法恢复）"
+    publicCommunity: "这个社群是公开的，任何人都可以加入"
+    wantToJoin: "我想要加入"
+    joinCommunity: "加入社群"
+    secretTip: "注意：只有密钥相同的设备才能互相访问！"
   newDevice:
     addNewDevice: "添加新设备"
     selectCommunity: "选择社群"
@@ -78,4 +82,8 @@ message:
         private: 用户名密码验证
       edit:
         createNewCommunity: 创建新社群
-        editCommunity: 编辑社群
\ No newline at end of file
+        editCommunity: 编辑社群
+      remove:
+        removeCommunity: 删除社群
+        confirm: 确认删除社群？
+        confirmTip: "注意：删除社群会同时删除该社群下的所有设备，且无法恢复！"
\ No newline at end of file