diff --git a/src/components/ArticleCard.astro b/src/components/ArticleCard.astro
index 356628f..b9e6bbf 100644
--- a/src/components/ArticleCard.astro
+++ b/src/components/ArticleCard.astro
@@ -13,11 +13,11 @@ const {title, image, createdAt, url, tags, isFirst} = Astro.props;
 <div class="item">
   <div class="px-sm pt-md pb-sm">
     <a href={url}>
-      <h2 class="bold text-wrap-pretty text-white">{title}</h2>
+      <h2 class="bold text-wrap-pretty text-[#d2d6d7]">{title}</h2>
     </a>
   </div>
   <div class="flex flex-row justify-between px-sm">
-    <p class="text-sm text-right">
+    <p class="text-sm text-right text-text">
       {createdAt.slice(0, 10).replaceAll("-", "/")}
     </p>
   </div>
@@ -63,11 +63,6 @@ const {title, image, createdAt, url, tags, isFirst} = Astro.props;
     overflow: clip;
     border-radius: 0.5rem;
   }
-
-  h2:hover {
-    color: #67b7b2;
-  }
-
   .tag {
     color: #585a63;
   }
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 50544ee..a18387a 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,10 +1,12 @@
-<header class="flex justify-between h-12 px-2 items-center">
-    <a class="text-xl text-sky-400" href="/">blog.0maru.dev</a>
-  <nav>
-    <ul class="flex">
+<header class="flex justify-between h-12 px-2 items-center bg-[#0c1417]">
+  <div class="flex items-center max-w-screen-md mx-auto">
+    <a class="text-xl text-[#d2d6d7]" href="/">blog.0maru.dev</a>
+    <nav>
+      <ul class="flex">
       <li class="px-2 text-white"><a href="/">Home</a></li>
       <li class="px-2 text-white"><a href="/tags">Tags</a></li>
       <li class="px-2 text-white"><a href="/about">About</a></li>
     </ul>
   </nav>
+  </div>
 </header>
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
index 34c6028..bae5344 100644
--- a/src/layouts/Default.astro
+++ b/src/layouts/Default.astro
@@ -39,7 +39,7 @@ const {title, description} = Astro.props;
   <meta property="og:locale" content="ja_JP"/>
   <meta data-hid="og:type" property="og:type" content="website"/>
 </head>
-<body class="bg-blueBlack">
+<body class="bg-background">
 <Header />
 <slot />
 <Footer />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d409e6e..e2c5641 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -8,18 +8,18 @@ const allBlogsCollection = await getCollection('blog');
 ---
 
 <DefaultLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
-  <main class="flex flex-col min-h-svh">
-    <section class="card-container container py-md">
-      {allBlogsCollection.map((blog) => (
-        <ArticleCard
+  <main class="max-w-screen-md mx-auto flex flex-col min-h-svh">
+    {allBlogsCollection.map((blog) => (
+        <div class="mt-8">
+          <ArticleCard
           title={blog.data.title}
           image={blog.data.image}
           createdAt={blog.data.createdAt}
           url=`/posts/${blog.data.slug}`
           tags={blog.data.tags}
         />
+        </div>
       ))}
-    </section>
   </main>
 </DefaultLayout>
 
@@ -27,17 +27,4 @@ const allBlogsCollection = await getCollection('blog');
   body {
     background-color: #f9f8f7;
   }
-
-  .card-container {
-    display: grid;
-    gap: 2rem;
-    grid-auto-flow: row;
-    grid-template-columns: repeat(2, 1fr);
-    max-width: 1000px;
-
-    @media screen and (max-width: 768px) {
-      gap: 0;
-      grid-template-columns: 1fr;
-    }
-  }
 </style>
