diff --git a/src/components/Bio/Bio.astro b/src/components/Bio/Bio.astro
index 4ddd2da..62c000a 100644
--- a/src/components/Bio/Bio.astro
+++ b/src/components/Bio/Bio.astro
@@ -8,15 +8,15 @@ export type Props = {
   description: string;
   icon: string;
 };
-const props = Astro.props;
+const { name, description, icon } = Astro.props;
 ---
 
 <div id="bio">
   <div id="profile">
-    <Image src={props.icon} alt={`${props.name}'s avatar`} inferSize={true} />
-    <h1>{props.name}</h1>
+    <Image src={icon} alt={`${name}'s avatar`} inferSize={true} />
+    <h1>{name}</h1>
   </div>
-  <p>{props.description}</p>
+  <p>{description}</p>
 </div>
 
 <style>
diff --git a/src/components/Contact/Contact.astro b/src/components/Contact/Contact.astro
index f28c5e4..3bad623 100644
--- a/src/components/Contact/Contact.astro
+++ b/src/components/Contact/Contact.astro
@@ -1,27 +1,27 @@
 ---
 import { Icon } from "astro-icon/components";
 
-import { getContact } from "../../libs/contact.ts";
-import type { service } from "../../types/services.ts";
+import { type contact, getContact } from "../../libs/contact.ts";
+import type { serviceName } from "../../types/services.ts";
 import "../../styles/global.css";
 
-export type Props = { service: service; id: string };
-const props = Astro.props;
+export type Props = { service: serviceName; id: string };
+const { service, id } = Astro.props;
 
-const contact = getContact(props.service, props.id);
+const { url, icon, color }: contact = getContact(service, id);
 ---
 
 <a
-  href={contact.url}
+  href={url}
   target="_blank"
   rel="noopener noreferrer"
-  aria-label={`Go to ${props.id}'s profile on ${props.service}`}
+  aria-label={`Go to ${id}'s profile on ${service}`}
 >
-  <Icon id="icon" name={contact.icon} />
-  <span>{props.id}</span>
+  <Icon id="icon" name={icon} />
+  <span>{id}</span>
 </a>
 
-<style define:vars={{ "accent-color": contact.color }}>
+<style define:vars={{ "accent-color": color }}>
   a {
     display: inline-flex;
     align-items: center;
@@ -33,6 +33,7 @@ const contact = getContact(props.service, props.id);
     transition:
       color 0.3s ease-in-out,
       border-color 0.3s ease-in-out;
+
     &:hover,
     &:focus-visible {
       color: color-mix(in srgb, var(--accent-color) 20%, var(--foreground));
diff --git a/src/components/Homepage/Homepage.astro b/src/components/Homepage/Homepage.astro
index 9a76e59..e422424 100644
--- a/src/components/Homepage/Homepage.astro
+++ b/src/components/Homepage/Homepage.astro
@@ -5,8 +5,8 @@ import { Icon } from "astro-icon/components";
 import "../../styles/global.css";
 import { generateQRCode } from "../../libs/qrcode.ts";
 
-export type Props = { url: string };
-const props = Astro.props;
+export type Props = Readonly<{ url: string }>;
+const props: Props = Astro.props;
 
 const url = new URL(props.url);
 const qrCode: string = await generateQRCode(props.url);
@@ -35,6 +35,7 @@ const qrCode: string = await generateQRCode(props.url);
     align-items: center;
     gap: 0.3rem;
     text-decoration: none;
+
     &:hover div,
     &:focus-visible div {
       border-color: color-mix(in srgb, var(--foreground) 60%, transparent);
diff --git a/src/libs/contact.ts b/src/libs/contact.ts
index a6d3d74..018c65f 100644
--- a/src/libs/contact.ts
+++ b/src/libs/contact.ts
@@ -1,12 +1,12 @@
-import { type service, services } from "../types/services";
+import { type serviceName, services } from "../types/services";
 
-const isFediverse = (service: service): boolean => {
+const isFediverse = (service: serviceName): boolean => {
   return service === "Mastodon" || service === "Misskey";
 };
 
-type contact = { url: string; icon: string; color: string };
+export type contact = Readonly<{ url: string; icon: string; color: string }>;
 
-export const getContact = (service: service, id: string): contact => {
+export const getContact = (service: serviceName, id: string): contact => {
   const specified: contact = services[service];
 
   if (!specified) throw new Error(`Unsupported service: ${service}`);
diff --git a/src/types/meta.ts b/src/types/meta.ts
index f8de286..36aaef1 100644
--- a/src/types/meta.ts
+++ b/src/types/meta.ts
@@ -1,9 +1,9 @@
-import type { service } from "./services.ts";
+import type { serviceName } from "./services.ts";
 
-export type meta = {
+export type meta = Readonly<{
   name: string;
   description: string;
   icon: string;
-  contacts: { service: service; id: string }[];
+  contacts: Readonly<{ service: serviceName; id: string }>[];
   homepage: string;
-};
+}>;
diff --git a/src/types/services.ts b/src/types/services.ts
index 6bbd45e..fd0640e 100644
--- a/src/types/services.ts
+++ b/src/types/services.ts
@@ -1,3 +1,9 @@
+type info = {
+  url: string;
+  icon: string;
+  color: string;
+};
+
 export const services = {
   Bluesky: {
     url: "https://bsky.app/profile/",
@@ -44,6 +50,6 @@ export const services = {
     icon: "mingcute:mail-line",
     color: "",
   },
-};
+} as const satisfies Record<string, info>;
 
-export type service = keyof typeof services;
+export type serviceName = keyof typeof services;