diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 00000000..f9e7a94c
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/favicon.svg b/public/favicon.svg
deleted file mode 100644
index 0f390629..00000000
--- a/public/favicon.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
-  <path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a2 2 0 0 0 1.38-1.4l3.22-11.66a.5.5 0 0 1 .96 0l3.22 11.67a2 2 0 0 0 1.38 1.39l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
-  <path fill="url(#gradient)" d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/>
-  <defs>
-    <linearGradient id="gradient" x1="16" x2="16" y1="32" y2="24" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#000"/>
-      <stop offset="1" stop-color="#000" stop-opacity="0"/>
-    </linearGradient>
-  </defs>
-	<style>
-    @media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
-  </style>
-</svg>
diff --git a/src/components/Card.astro b/src/components/Card.astro
index e36b8f09..859412c8 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -8,9 +8,9 @@ export interface Props {
 const { href, title, body } = Astro.props
 ---
 
-<li class="link-card">
+<li class="border-2 p-4">
   <a href={href}>
-    <h2>
+    <h2 class="text-xl font-semibold pb-2">
       {title}
       <span>&rarr;</span>
     </h2>
@@ -19,45 +19,3 @@ const { href, title, body } = Astro.props
     </p>
   </a>
 </li>
-<style>
-  .link-card {
-    list-style: none;
-    display: flex;
-    padding: 0.15rem;
-    background-color: white;
-    background-image: var(--accent-gradient);
-    background-size: 400%;
-    border-radius: 0.5rem;
-    background-position: 100%;
-    transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-      0 2px 4px -2px rgba(0, 0, 0, 0.1);
-  }
-
-  .link-card > a {
-    width: 100%;
-    text-decoration: none;
-    line-height: 1.4;
-    padding: 1rem 1.3rem;
-    border-radius: 0.35rem;
-    color: #111;
-    background-color: white;
-    opacity: 0.8;
-  }
-  h2 {
-    margin: 0;
-    font-size: 1.25rem;
-    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-  }
-  p {
-    margin-top: 0.5rem;
-    margin-bottom: 0;
-    color: #444;
-  }
-  .link-card:is(:hover, :focus-within) {
-    background-position: 0;
-  }
-  .link-card:is(:hover, :focus-within) h2 {
-    color: rgb(var(--accent));
-  }
-</style>
diff --git a/src/components/SEOMeta.astro b/src/components/SEOMeta.astro
index 5a7e882c..3fd181b2 100644
--- a/src/components/SEOMeta.astro
+++ b/src/components/SEOMeta.astro
@@ -1,12 +1,12 @@
 ---
 interface Props {
   title: string
-  description: string | undefined
-  favicon: string | undefined
-  faviconMimeType: string | undefined
-  keywords: string | undefined
-  author: string | undefined
-  robots: string | undefined
+  description?: string
+  favicon?: string
+  faviconMimeType?: string
+  keywords?: string
+  author?: string
+  robots?: string
 }
 
 const {
diff --git a/src/configs/site.ts b/src/configs/site.ts
new file mode 100644
index 00000000..81f02f80
--- /dev/null
+++ b/src/configs/site.ts
@@ -0,0 +1,7 @@
+export default {
+  title: 'LeetCode Blog',
+  description: 'Solutions for LeetCode problems - Written by ansidev',
+  author: 'ansidev',
+  favicon: '/favicon.ico',
+  faviconMimeType: 'image/ico',
+}
diff --git a/src/layouts/AppLayout.astro b/src/layouts/AppLayout.astro
new file mode 100644
index 00000000..32ee3a28
--- /dev/null
+++ b/src/layouts/AppLayout.astro
@@ -0,0 +1,28 @@
+---
+import SEOMeta from '@/components/SEOMeta.astro'
+import siteConfig from '@/configs/site'
+
+export interface Props {
+  title: string
+  description: string
+  author: string
+}
+
+const { title, author } = Astro.props
+const { favicon, faviconMimeType } = siteConfig
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <SEOMeta
+      title={title}
+      favicon={favicon}
+      faviconMimeType={faviconMimeType}
+      author={author}
+    />
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
deleted file mode 100644
index 575e9caa..00000000
--- a/src/layouts/Layout.astro
+++ /dev/null
@@ -1,40 +0,0 @@
----
-export interface Props {
-  title: string
-}
-
-const { title } = Astro.props
----
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="generator" content={Astro.generator} />
-    <title>{title}</title>
-  </head>
-  <body>
-    <slot />
-  </body>
-</html>
-<style is:global>
-  :root {
-    --accent: 124, 58, 237;
-    --accent-gradient: linear-gradient(
-      45deg,
-      rgb(var(--accent)),
-      #da62c4 30%,
-      white 60%
-    );
-  }
-  html {
-    font-family: system-ui, sans-serif;
-    background-color: #f6f6f6;
-  }
-  code {
-    font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
-      DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
-  }
-</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c66ff95b..b1fc4987 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,17 +1,16 @@
 ---
 import Card from '@/components/Card.astro'
-import Layout from '@/layouts/Layout.astro'
+import siteConfig from '@/configs/site'
+import AppLayout from '@/layouts/AppLayout.astro'
+
+const { title, description, author } = siteConfig
 ---
 
-<Layout title="Welcome to Astro.">
-  <main>
-    <h1>Welcome to <span class="text-gradient">Astro</span></h1>
-    <p class="instructions">
-      To get started, open the directory <code>src/pages</code> in your project.
-      <br />
-      <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
-    </p>
-    <ul role="list" class="link-card-grid">
+<AppLayout title={title} description={description} author={author}>
+  <main class="mx-auto p-4 max-w-2xl">
+    <h1 class="text-4xl font-semibold text-center">{title}</h1>
+    <p class="text-center p-4">{description}</p>
+    <ul role="list" class="grid grid-cols-1 md:grid-cols-2 gap-4">
       <Card
         href="https://docs.astro.build/"
         title="Documentation"
@@ -34,49 +33,4 @@ import Layout from '@/layouts/Layout.astro'
       />
     </ul>
   </main>
-</Layout>
-
-<style>
-  main {
-    margin: auto;
-    padding: 1.5rem;
-    max-width: 60ch;
-  }
-  h1 {
-    font-size: 3rem;
-    font-weight: 800;
-    margin: 0;
-  }
-  .text-gradient {
-    background-image: var(--accent-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-size: 400%;
-    background-position: 0%;
-  }
-  .instructions {
-    line-height: 1.6;
-    margin: 1rem 0;
-    border: 1px solid rgba(var(--accent), 25%);
-    background-color: white;
-    padding: 1rem;
-    border-radius: 0.4rem;
-  }
-  .instructions code {
-    font-size: 0.875em;
-    font-weight: bold;
-    background: rgba(var(--accent), 12%);
-    color: rgb(var(--accent));
-    border-radius: 4px;
-    padding: 0.3em 0.45em;
-  }
-  .instructions strong {
-    color: rgb(var(--accent));
-  }
-  .link-card-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-    gap: 1rem;
-    padding: 0;
-  }
-</style>
+</AppLayout>