diff --git a/packages/nextjs/app/enterpreneur/create/page.tsx b/packages/nextjs/app/enterpreneur/create/page.tsx
index 1f88877..957227f 100644
--- a/packages/nextjs/app/enterpreneur/create/page.tsx
+++ b/packages/nextjs/app/enterpreneur/create/page.tsx
@@ -2,11 +2,13 @@
 
 import { useState } from "react";
 import { useEffect } from "react";
-import { Card } from "../form/card";
 import { SelectTab } from "../form/selectTab";
 import { SwitchField } from "../form/switchField";
 import { Box, Tab, Tabs } from "@mui/material";
 import { Typography } from "@mui/material";
+import { Card } from "~~/components/Card";
+import { CardList } from "~~/components/CardList";
+import DividerWithText from "~~/components/DividerWithText";
 
 // タブの種類を表すユニオン型を定義
 type TabType = "割引券" | "引換券" | "会員券";
@@ -27,9 +29,36 @@ export default function TicketTabs() {
     setValue(tabLabels[newValue]);
   };
 
-  useEffect(() => {
-    console.log(value);
-  }, [value]);
+  const cards = [
+    {
+      title: "引換券",
+      issueDate: "2024.12.05",
+      amount: 7000,
+      expiryDate: "2025.06.30",
+      usageScope: "店舗全体",
+    },
+    {
+      title: "引換券",
+      issueDate: "2024.12.05",
+      amount: 7000,
+      expiryDate: "2025.06.30",
+      usageScope: "店舗全体",
+    },
+    {
+      title: "引換券",
+      issueDate: "2024.12.05",
+      amount: 7000,
+      expiryDate: "2025.06.30",
+      usageScope: "店舗全体",
+    },
+    {
+      title: "引換券",
+      issueDate: "2024.12.05",
+      amount: 7000,
+      expiryDate: "2025.06.30",
+      usageScope: "店舗全体",
+    },
+  ];
 
   return (
     <div>
@@ -37,10 +66,12 @@ export default function TicketTabs() {
         クーポンの登録
       </Typography>
       <SelectTab value={value} handleChange={handleChange} />
-      <Box sx={{ display: "flex", gap: 2, justifyContent: "center" }}>
+      <Box sx={{ display: "flex", gap: 4, justifyContent: "center", mb: 5, pb: 3 }}>
         <Card {...content} />
         <SwitchField value={value} />
       </Box>
+      <DividerWithText />
+      <CardList cards={cards} />
     </div>
   );
 }
diff --git a/packages/nextjs/app/enterpreneur/form/card.tsx b/packages/nextjs/app/enterpreneur/form/card.tsx
deleted file mode 100644
index e44c26e..0000000
--- a/packages/nextjs/app/enterpreneur/form/card.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-"use client";
-
-import React from "react";
-import { Box, CardContent, Divider, Card as MuiCard, Typography } from "@mui/material";
-
-type CardProps = {
-  title: string; // タイトル
-  amount: number; // 金額
-  expiryDate: string; // 有効期限
-  usageScope: string; // 使用範囲
-};
-
-export const Card = ({ title, amount, expiryDate, usageScope }: CardProps) => {
-  return (
-    <MuiCard
-      sx={{
-        width: 300,
-        borderRadius: 2,
-        boxShadow: 3,
-        backgroundColor: "#F0F0F0",
-        padding: 2,
-        position: "relative",
-        overflow: "visible",
-        pt: 5,
-      }}
-    >
-      {/* 上部の丸いアイコン */}
-      <Box
-        sx={{
-          width: 50,
-          height: 50,
-          backgroundColor: "#A9A9A9",
-          borderRadius: "50%",
-          position: "absolute",
-          top: -25,
-          left: "50%",
-          transform: "translateX(-50%)",
-          mt: 5,
-        }}
-      />
-
-      <CardContent>
-        {/* 金額 */}
-        <Typography
-          variant="h3"
-          sx={{
-            textAlign: "center",
-            fontWeight: "bold",
-            color: "#000",
-            marginBottom: 2,
-            mt: 3,
-          }}
-        >
-          {amount}円
-        </Typography>
-
-        {/* バーコード */}
-        <Box
-          sx={{
-            textAlign: "center",
-            marginBottom: 3,
-          }}
-        >
-          <img
-            src="https://barcode.tec-it.com/barcode.ashx?data=7000&type=Code128&translate-esc=true&width=500&height=200"
-            alt="バーコード"
-            style={{
-              width: "100%",
-              height: "50px",
-              objectFit: "contain",
-            }}
-          />
-        </Box>
-
-        <Divider sx={{ marginY: 2 }} />
-
-        {/* 有効期限 */}
-        <Box sx={{ display: "flex", justifyContent: "space-between", marginBottom: 1 }}>
-          <Typography variant="body2" sx={{ color: "#666" }}>
-            有効期限
-          </Typography>
-          <Typography variant="body2" sx={{ color: "#000" }}>
-            {expiryDate}
-          </Typography>
-        </Box>
-
-        {/* 使用範囲 */}
-        <Box sx={{ display: "flex", justifyContent: "space-between", marginBottom: 1 }}>
-          <Typography variant="body2" sx={{ color: "#666" }}>
-            使用範囲
-          </Typography>
-          <Typography variant="body2" sx={{ color: "#000" }}>
-            {usageScope}
-          </Typography>
-        </Box>
-
-        <Divider sx={{ marginY: 2 }} />
-
-        {/* 詳細情報 */}
-        <Box
-          sx={{
-            fontSize: "12px",
-            color: "#666",
-            textAlign: "left",
-          }}
-        >
-          <Typography variant="body2" sx={{ lineHeight: 1.5 }}>
-            1. クーポンは1回のご購入につき1枚のみご利用いただけます。
-            <br />
-            2. 他のクーポンや割引サービスの併用はできません。
-          </Typography>
-        </Box>
-      </CardContent>
-    </MuiCard>
-  );
-};
diff --git a/packages/nextjs/app/enterpreneur/form/selectTab.tsx b/packages/nextjs/app/enterpreneur/form/selectTab.tsx
index d60741f..7414c22 100644
--- a/packages/nextjs/app/enterpreneur/form/selectTab.tsx
+++ b/packages/nextjs/app/enterpreneur/form/selectTab.tsx
@@ -36,9 +36,27 @@ export const SelectTab: FC<SelectTabProps> = ({ value, handleChange }) => {
   return (
     <Box sx={{ display: "flex", justifyContent: "center", mt: 3, mb: 3 }}>
       <CustomTabs value={value} onChange={handleChange} aria-label="custom tabs">
-        <CustomTab label="割引券" />
-        <CustomTab label="引換券" />
-        <CustomTab label="会員券" />
+        <CustomTab
+          sx={{
+            color: value === "割引券" ? "white" : "black",
+            backgroundColor: value === "割引券" ? "red" : "transparent",
+          }}
+          label="割引券"
+        />
+        <CustomTab
+          sx={{
+            color: value === "引換券" ? "white" : "black",
+            backgroundColor: value === "引換券" ? "red" : "transparent",
+          }}
+          label="引換券"
+        />
+        <CustomTab
+          sx={{
+            color: value === "会員券" ? "white" : "black",
+            backgroundColor: value === "会員券" ? "red" : "transparent",
+          }}
+          label="会員券"
+        />
       </CustomTabs>
     </Box>
   );
diff --git a/packages/nextjs/components/Card.tsx b/packages/nextjs/components/Card.tsx
index c3229c0..9658db9 100644
--- a/packages/nextjs/components/Card.tsx
+++ b/packages/nextjs/components/Card.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import { Box, CardContent, Card as MuiCard, Typography } from "@mui/material";
+import { Divider } from "@mui/material";
 
 type CardProps = {
   title: string; // タイトル
@@ -18,47 +19,101 @@ export const Card = ({ title, issueDate, amount, expiryDate, usageScope }: CardP
         width: 300,
         borderRadius: 2,
         boxShadow: 3,
-        backgroundColor: "#f9f9f9",
+        backgroundColor: "#F0F0F0",
+        padding: 2,
+        position: "relative",
+        overflow: "visible",
+        pt: 5,
+        mb: 4,
       }}
     >
-      <CardContent>
-        <Typography variant="h4" sx={{ fontWeight: "bold", marginBottom: 3, textAlign: "center" }}>
-          {title}
-        </Typography>
+      {/* 上部の丸いアイコン */}
+      <Box
+        sx={{
+          width: 50,
+          height: 50,
+          borderRadius: "50%",
+          position: "absolute",
+          top: -25,
+          left: "50%",
+          transform: "translateX(-50%)",
+          mt: 5,
+        }}
+      >
+        <img src="https://s3-alpha-sig.figma.com/img/1852/3be3/3bd208d48503fe4dd2ecab76c3ced683?Expires=1734307200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Nwv7petZMCtj40Kwud6oHexi6jLRp~4js3ABJibM3vCtiBBXDIi2b0yHp6RR7AWdXIHMA5KKBOu5x0q~3G9LYyf35NFrIfLLxoi7j7M4boZK~uWIdOyYXrout8RBuUTWXKSqGWSpdPVdN8AD8ctzgt7-8qKI1QElDPMO3P9kfdLqE3bHrNNbUeYOsQBAEcHnq2~HPCgCzyULl7Kr1jVZTMvkZeWwlrEt0d-BJlvkhRVu0o-irWDLDR2aFCko7mL8MKgQVsQFC4meg3wHlISsuWy4F8AAIL6Rp5fxByfWdpgiQB1xdufQ~wGTw42fRhPS5gQbFOIel6AefnJ~PC5~Lw__"></img>
+      </Box>
 
-        <Typography variant="body2" color="text.secondary" sx={{ textAlign: "right", marginBottom: 2 }}>
-          {issueDate} 発行
+      <CardContent>
+        {/* 金額 */}
+        <Typography
+          variant="h3"
+          sx={{
+            textAlign: "center",
+            fontWeight: "bold",
+            color: "#000",
+            marginBottom: 2,
+            mt: 3,
+          }}
+        >
+          {amount}円
         </Typography>
 
+        {/* バーコード */}
         <Box
           sx={{
-            fontSize: "24px",
-            fontWeight: "bold",
             textAlign: "center",
-            color: "#000",
             marginBottom: 3,
           }}
         >
-          {amount}円
+          <img
+            src="https://barcode.tec-it.com/barcode.ashx?data=7000&type=Code128&translate-esc=true&width=500&height=200"
+            alt="バーコード"
+            style={{
+              width: "100%",
+              height: "50px",
+              objectFit: "contain",
+            }}
+          />
         </Box>
 
+        <Divider sx={{ marginY: 2 }} />
+
+        {/* 有効期限 */}
+        <Box sx={{ display: "flex", justifyContent: "space-between", marginBottom: 1 }}>
+          <Typography variant="body2" sx={{ color: "#666" }}>
+            有効期限
+          </Typography>
+          <Typography variant="body2" sx={{ color: "#000" }}>
+            {expiryDate}
+          </Typography>
+        </Box>
+
+        {/* 使用範囲 */}
+        <Box sx={{ display: "flex", justifyContent: "space-between", marginBottom: 1 }}>
+          <Typography variant="body2" sx={{ color: "#666" }}>
+            使用範囲
+          </Typography>
+          <Typography variant="body2" sx={{ color: "#000" }}>
+            {usageScope}
+          </Typography>
+        </Box>
+
+        <Divider sx={{ marginY: 2 }} />
+
+        {/* 詳細情報 */}
         <Box
           sx={{
-            display: "flex",
-            justifyContent: "space-between",
-            fontSize: "14px",
-            color: "text.secondary",
-            marginBottom: 2,
+            fontSize: "12px",
+            color: "#666",
+            textAlign: "left",
           }}
         >
-          <Typography variant="body2" color="text.secondary">
-            有効期限: {expiryDate}
+          <Typography variant="body2" sx={{ lineHeight: 1.5 }}>
+            1. クーポンは1回のご購入につき1枚のみご利用いただけます。
+            <br />
+            2. 他のクーポンや割引サービスの併用はできません。
           </Typography>
         </Box>
-
-        <Typography variant="body2" color="text.secondary">
-          使用範囲: {usageScope}
-        </Typography>
       </CardContent>
     </MuiCard>
   );
diff --git a/packages/nextjs/components/CardList.tsx b/packages/nextjs/components/CardList.tsx
index 9a4975a..fd144da 100644
--- a/packages/nextjs/components/CardList.tsx
+++ b/packages/nextjs/components/CardList.tsx
@@ -23,7 +23,7 @@ export const CardList = ({ cards }: CardListProps) => {
         justifyContent: "center",
         alignItems: "center",
         width: "70%",
-        margin: "100px auto",
+        margin: "50px auto",
       }}
     >
       {cards.map((card, index) => (
diff --git a/packages/nextjs/components/DividerWithText.tsx b/packages/nextjs/components/DividerWithText.tsx
new file mode 100644
index 0000000..65b2bf1
--- /dev/null
+++ b/packages/nextjs/components/DividerWithText.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { Box, Typography } from "@mui/material";
+
+export default function DividerWithText() {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        width: "100%",
+        marginY: 2, // 上下の余白
+      }}
+    >
+      {/* 左の線 */}
+      <Box
+        sx={{
+          flex: 1,
+          borderBottom: "1px solid #E0E0E0", // 線のスタイル
+          marginRight: 2, // テキストとの間隔
+        }}
+      ></Box>
+
+      {/* テキスト */}
+      <Typography
+        variant="body1"
+        sx={{
+          color: "#666", // テキストの色
+          whiteSpace: "nowrap", // テキストを1行で表示
+          fontWeight: "bold", // 太字
+        }}
+      >
+        過去発行されたクーポン
+      </Typography>
+
+      {/* 右の線 */}
+      <Box
+        sx={{
+          flex: 1,
+          borderBottom: "1px solid #E0E0E0", // 線のスタイル
+          marginLeft: 2, // テキストとの間隔
+        }}
+      ></Box>
+    </Box>
+  );
+}
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index 6b27ce3..39bf177 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -90,8 +90,12 @@ export const Header = () => {
           )}
         </div>
         <Link href="/" passHref className="hidden lg:flex items-center gap-2 ml-4 mr-6 shrink-0">
-          <div className="flex relative w-20 h-10">
-            <Image alt="SE2 logo" className="cursor-pointer" fill src="/logo.svg" />
+          <div className="flex relative w-10 h-10">
+            <img
+              alt="SE2 logo"
+              className="cursor-pointer"
+              src="https://s3-alpha-sig.figma.com/img/5b61/3f01/546695202d90d816459b0f7bd2d7e6f0?Expires=1734307200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=FnKG9LqP91kdX0YzT2qMAyK-0vBU-i5ZlFm2Bg8h644mP6RxX6JzXj3AOtF0Z3elA97eWfJm0ze~pHW5~JKUjTdkIB4IXtVEc5~NJnnrfzZLgoBm3DN8w7z5aB59Wna1EpFoyy6f2cpzdizt8WRhvuPBiV~YAZNpAxQTYH5IPE-an7MZg3IrDqKOQLtNb5ir9CI4CdIEEqEOdSVl4fiJoGDCKWA2SHrg-aptB5FaH7KVW0j3DdftH8VDwE1FHOmJYSFx3nBz~YF1p6g30FpUn7oQ3Qy5-xGpipuWRrnsF4s9k~dh41X1v7Qr1CzTS8r7N8ng4z90uQsyd1kw4BYjOA__"
+            />
           </div>
         </Link>
       </div>