diff --git a/src/app/converter/layout.tsx b/src/app/converter/layout.tsx
new file mode 100644
index 00000000..65362a9c
--- /dev/null
+++ b/src/app/converter/layout.tsx
@@ -0,0 +1,18 @@
+export const metadata = {
+  title: 'Converter',
+  description:
+    '数値の基数の変換やカラーコードの変換など、便利な変換処理を提供します。',
+};
+
+export default function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col gap-4">
+      <h2 className="text-2xl font-bold">Converter</h2>
+      {children}
+    </div>
+  );
+}
diff --git a/src/app/converter/page.tsx b/src/app/converter/page.tsx
new file mode 100644
index 00000000..ac61ed50
--- /dev/null
+++ b/src/app/converter/page.tsx
@@ -0,0 +1,21 @@
+import { BaseConverter } from './components/base-converter';
+import { ColorConverter } from './components/color-converter';
+
+export default function Page() {
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-4">
+        <h3 className="text-l font-medium">進数</h3>
+        <div className="rounded-md bg-white p-4 shadow-md">
+          <BaseConverter />
+        </div>
+      </div>
+      <div className="flex flex-col gap-4">
+        <h3 className="text-l font-medium">カラーコード</h3>
+        <div className="rounded-md bg-white p-4 shadow-md">
+          <ColorConverter />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index bc1b9c3b..7a742baa 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,6 +10,12 @@ export default function Home() {
         title="Characters"
         description="テキストエリアに入力した文字数をカウントする機能など、文字に対する操作についての機能を提供するサービスです。"
       />
+      <AppCard
+        link="/converter"
+        emotion="🔢"
+        title="Converter"
+        description="入力した数値の進数変換など、いくつかの変換処理を提供します。"
+      />
       <AppCard
         link="/blog"
         emotion="📕"