diff --git a/.gitconfig b/.gitconfig
new file mode 100644
index 0000000..a38673d
--- /dev/null
+++ b/.gitconfig
@@ -0,0 +1 @@
+git config --global alias.mmerge '!f() { git merge master -m "Merge master into $(git rev-parse --abbrev-ref HEAD)"; }; f'
\ No newline at end of file
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 8686aee..6e95a09 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import Button from "./lib/Button.svelte";
   import Input from "./lib/Input.svelte";
+  import Message from "./lib/Message.svelte";
+  import Label from "./lib/Label.svelte";
 
   let under_diff = $state<string>("0");
   let over_diff = $state<string>("0");
@@ -47,6 +49,8 @@
 
 <div class="w-full h-full">
   <div class="container flex flex-col max-w-xl w-full gap-2">
+    <h1 class="text-3xl mb-8">AtCoder Random Picker</h1>
+
     {#if errors.rangeError}
       <p class="text-destructive mb-2 text-sm">最低Diffが最高Diffを超えています。</p>
     {:else if errors.isMinusOverDiff}
@@ -59,13 +63,21 @@
       <p class="text-destructive mb-2 text-sm">{errorMessage}</p>
     {/if}
 
-    {#if result !== null}
-      <p class="text-green-600 mb-2 text-sm">サーバーからの結果: {result}</p>
-    {/if}
     <div class="flex items-center gap-2">
       <Input type="number" placeholder="最低Diffを入力してください。" isErrors={errors} bind:value={under_diff} />
       <Input type="number" placeholder="最高Diffを入力してください。" isErrors={errors} bind:value={over_diff} />
       <Button onclick={sendQuery} class="shrink-0">ボタン</Button>
     </div>
+
+    {#if result !== null}
+      <div class="mt-4">
+        <Message variant="success">
+        <div class="flex flex-col">
+          <Label class="!text-base leading-tight font-medium text-3xl mb-1.5">Success</Label>
+          <p class="text-base-foreground-default mb-2 text-sm">サーバーからの結果: {result}</p>
+        </div>
+      </Message>
+      </div>
+    {/if}
   </div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/input.css b/frontend/src/input.css
index ca9952a..ac9617c 100644
--- a/frontend/src/input.css
+++ b/frontend/src/input.css
@@ -80,9 +80,18 @@
 
 * {
   box-sizing: border-box;
-  font-family: "Ubuntu Sans Mono", "Noto Sans JP";
+  font-family: "Ubuntu Sans Mono", "Noto Sans JP", "serif";
   text-decoration: none;
   list-style: none;
+  font-size: 103.5%;
+}
+
+h1 {
+  font-size: 3rem;
+}
+
+label {
+  font-size: 1.5rem;
 }
 
 .container {
diff --git a/frontend/src/lib/Label.svelte b/frontend/src/lib/Label.svelte
new file mode 100644
index 0000000..f6ecc2b
--- /dev/null
+++ b/frontend/src/lib/Label.svelte
@@ -0,0 +1,62 @@
+<!--
+@component
+## 概要
+- テキスト入力欄や選択肢などのフォーム要素に対して、その内容を明示するために使用されるコンポーネントです
+
+## 機能
+- フォーム要素と関連付けることでアクティブ化することができます
+- 任意の属性を渡せます
+
+## Props
+- disabled: 指定するとグレーアウトされ、クリック不可になります
+
+## Usage
+```svelte
+<Label for="forName">ラベル</Label>
+```
+-->
+<script module lang="ts">
+  import { cva, type VariantProps } from 'class-variance-authority';
+  import type { Snippet } from 'svelte';
+  import type { HTMLLabelAttributes } from 'svelte/elements';
+
+  export const labelVariants = cva('inline-block w-fit leading-tight text-sm text-base-foreground-default', {
+    variants: {
+      /** 操作できるかどうか */
+      disabled: {
+        true: ['opacity-50'],
+        false: [],
+      },
+    },
+    defaultVariants: {
+      disabled: false,
+    },
+  });
+
+  export type LabelVariants = VariantProps<typeof labelVariants>;
+
+  export interface LabelProps extends LabelVariants, HTMLLabelAttributes {
+    /** 必須かどうか */ 
+    required?: boolean;
+    /** クラス */
+    class?: string;
+    children?: Snippet<[]>;
+  }
+</script>
+
+<script lang="ts">
+  let { disabled = false, class: className = '', children, required = false, ...labelAttributes }: LabelProps = $props();
+
+  let labelVariantClass = $derived(labelVariants({
+    disabled,
+    class: className,
+  }));
+</script>
+
+<label class={labelVariantClass} {...labelAttributes}>
+  {@render children?.()}
+
+  {#if required}
+    <span class="inline-block bg-destructive text-white text-3xl leading-none px-1.5 py-0.5 ml-2">必須</span>
+  {/if}
+</label>
diff --git a/frontend/src/lib/Message.svelte b/frontend/src/lib/Message.svelte
new file mode 100644
index 0000000..990f49c
--- /dev/null
+++ b/frontend/src/lib/Message.svelte
@@ -0,0 +1,96 @@
+<!--
+@component
+## 概要
+- ユーザーに重要な情報や通知を伝えるためのコンポーネントです
+
+## 機能
+- 見た目を変更するためのいくつかのスタイル用Propsが追加されています(詳細はPropsセクションを参照)
+
+## Props
+- variant: 通知の意味を指定すると、それに合わせたスタイルになります
+
+## Usage
+```svelte
+  <Message variant="default">
+    <div class="flex flex-col">
+      <Label class="!text-base leading-tight font-medium mb-1.5">ラベル</Label>
+      <p class="text-base-foreground-default text-sm">ここに補足文が入ります。</p>
+    </div>
+  </Message>
+```
+-->
+
+<script module lang="ts">
+  import { cva, type VariantProps } from 'class-variance-authority';
+  import type { Snippet } from 'svelte';
+
+  export const messageVariants = cva(
+    'flex items-start gap-3 w-full p-4 border rounded-lg text-xl',
+    {
+      variants: {
+        /** 通知の使用用途 */
+        variant: {
+          error: ['bg-destructive/10 border-destructive'],
+          warning: ['bg-warning/10 border-warning'],
+          success: ['bg-success/10 border-success'],
+          default: ['bg-primary/10 border-primary'],
+        },
+      },
+      defaultVariants: {
+        variant: "default",
+      }
+    },
+  );
+
+  export const messageIconVariants = cva('', {
+    variants: {
+      variant: {
+        error: ['text-destructive'],
+        warning: ['text-warning'],
+        success: ['text-success'],
+        default: ['text-primary'],
+      },
+      defaultVariants: {
+        variant: "default",
+      }
+    },
+  });
+
+  export type MessageVariants = VariantProps<typeof messageVariants>;
+
+  export interface MessageProps extends MessageVariants {
+    /** クラス */
+    class?: string;
+    children?: Snippet<[]>;
+  }
+</script>
+
+<script lang="ts">
+  import { Info, CircleAlert, TriangleAlert, Check } from '@lucide/svelte';
+  
+  let { variant, class: className = '', children }: MessageProps = $props();
+
+  let messageVariantClass = $derived(messageVariants({
+    variant,
+    class: className,
+  }));
+
+  let messageIconVariantClass = $derived(messageIconVariants({
+    variant,
+  }));
+</script>
+
+<div class={messageVariantClass}>
+  <div class={messageIconVariantClass}>
+    {#if variant === "error"}
+      <CircleAlert size="1.5rem" />
+    {:else if variant === "warning"}
+      <TriangleAlert size="1.5rem" />
+    {:else if variant === "success"}
+      <Check size="1.5rem" />
+    {:else}
+      <Info size="1.5rem" />
+    {/if}
+  </div>
+  {@render children?.()}
+</div>
diff --git a/frontend/src/output.css b/frontend/src/output.css
index 24a7646..4bc95ea 100644
--- a/frontend/src/output.css
+++ b/frontend/src/output.css
@@ -7,40 +7,34 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
-    --color-green-600: oklch(62.7% 0.194 149.214);
+    --color-white: #fff;
     --spacing: 0.25rem;
-    --container-sm: 24rem;
-    --container-md: 28rem;
-    --container-lg: 32rem;
     --container-xl: 36rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --font-weight-medium: 500;
     --leading-tight: 1.25;
     --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
-    --color-base-container-default: #FFF;
-    --color-base-container-primary: #18181B;
-    --color-base-container-muted: #E4E4E7;
     --color-base-container-accent: #FAFAFA;
-    --color-base-container-subarea-accent: #F4F4F5;
     --color-base-foreground-default: #18181B;
-    --color-base-foreground-accent: #18181B;
     --color-base-foreground-muted: #71717A;
-    --color-base-foreground-subtle: #A1A1AA;
-    --color-base-foreground-on-fill-inverse: #FAFAFA;
-    --color-base-foreground-on-fill-bright: #FAFAFA;
-    --color-base-foreground-subarea-default: #3F3F46;
-    --color-base-foreground-subarea-accent: #18181B;
     --color-base-stroke-default: #E4E4E7;
-    --color-base-surface-default: #FFF;
-    --color-base-surface-subarea-default: #FAFAFA;
     --color-destructive: #DC2626;
     --color-destructive-on-fill: #FEF2F2;
     --color-warning: #FBBF24;
-    --color-warning-on-fill: #18181B;
     --color-success: #16A34A;
     --color-success-on-fill: #F0FDF4;
     --color-primary: #2563EB;
@@ -214,18 +208,30 @@
       max-width: 96rem;
     }
   }
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
+  .mb-8 {
+    margin-bottom: calc(var(--spacing) * 8);
+  }
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
   .flex {
     display: flex;
   }
+  .inline-block {
+    display: inline-block;
+  }
   .inline-flex {
     display: inline-flex;
   }
-  .table {
-    display: table;
-  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -241,33 +247,18 @@
   .min-h-11 {
     min-height: calc(var(--spacing) * 11);
   }
+  .w-fit {
+    width: fit-content;
+  }
   .w-full {
     width: 100%;
   }
-  .max-w-lg {
-    max-width: var(--container-lg);
-  }
-  .max-w-md {
-    max-width: var(--container-md);
-  }
-  .max-w-sm {
-    max-width: var(--container-sm);
-  }
   .max-w-xl {
     max-width: var(--container-xl);
   }
-  .flex-shrink {
-    flex-shrink: 1;
-  }
   .shrink-0 {
     flex-shrink: 0;
   }
-  .border-collapse {
-    border-collapse: collapse;
-  }
-  .transform {
-    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
-  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
@@ -277,21 +268,27 @@
   .cursor-text {
     cursor: text;
   }
-  .resize {
-    resize: both;
-  }
   .flex-col {
     flex-direction: column;
   }
   .items-center {
     align-items: center;
   }
+  .items-start {
+    align-items: flex-start;
+  }
   .justify-center {
     justify-content: center;
   }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
   .rounded-md {
     border-radius: var(--radius-md);
   }
@@ -314,15 +311,42 @@
   .border-transparent {
     border-color: transparent;
   }
+  .border-warning {
+    border-color: var(--color-warning);
+  }
   .bg-destructive {
     background-color: var(--color-destructive);
   }
+  .bg-destructive\/10 {
+    background-color: color-mix(in srgb, #DC2626 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
+    }
+  }
   .bg-primary {
     background-color: var(--color-primary);
   }
+  .bg-primary\/10 {
+    background-color: color-mix(in srgb, #2563EB 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
+    }
+  }
   .bg-success {
     background-color: var(--color-success);
   }
+  .bg-success\/10 {
+    background-color: color-mix(in srgb, #16A34A 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-success) 10%, transparent);
+    }
+  }
+  .bg-warning\/10 {
+    background-color: color-mix(in srgb, #FBBF24 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-warning) 10%, transparent);
+    }
+  }
   .\!p-2\.25 {
     padding: calc(var(--spacing) * 2.25) !important;
   }
@@ -332,8 +356,11 @@
   .\!p-3\.25 {
     padding: calc(var(--spacing) * 3.25) !important;
   }
-  .px-2 {
-    padding-inline: calc(var(--spacing) * 2);
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+  .px-1\.5 {
+    padding-inline: calc(var(--spacing) * 1.5);
   }
   .px-2\.75 {
     padding-inline: calc(var(--spacing) * 2.75);
@@ -347,8 +374,8 @@
   .px-8 {
     padding-inline: calc(var(--spacing) * 8);
   }
-  .py-1 {
-    padding-block: calc(var(--spacing) * 1);
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * 0.5);
   }
   .py-1\.75 {
     padding-block: calc(var(--spacing) * 1.75);
@@ -362,14 +389,38 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
+  .\!text-base {
+    font-size: var(--text-base) !important;
+    line-height: var(--tw-leading, var(--text-base--line-height)) !important;
+  }
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
   .leading-tight {
     --tw-leading: var(--leading-tight);
     line-height: var(--leading-tight);
   }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
   .text-base-foreground-default {
     color: var(--color-base-foreground-default);
   }
@@ -382,9 +433,6 @@
   .text-destructive-on-fill {
     color: var(--color-destructive-on-fill);
   }
-  .text-green-600 {
-    color: var(--color-green-600);
-  }
   .text-primary {
     color: var(--color-primary);
   }
@@ -397,16 +445,15 @@
   .text-success-on-fill {
     color: var(--color-success-on-fill);
   }
-  .underline {
-    text-decoration-line: underline;
+  .text-warning {
+    color: var(--color-warning);
+  }
+  .text-white {
+    color: var(--color-white);
   }
   .opacity-50 {
     opacity: 50%;
   }
-  .outline {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
   .outline-primary {
     outline-color: var(--color-primary);
   }
@@ -631,9 +678,16 @@
 }
 * {
   box-sizing: border-box;
-  font-family: "Ubuntu Sans Mono", "Noto Sans JP";
+  font-family: "Ubuntu Sans Mono", "Noto Sans JP", "serif";
   text-decoration: none;
   list-style: none;
+  font-size: 103.5%;
+}
+h1 {
+  font-size: 3rem;
+}
+label {
+  font-size: 1.5rem;
 }
 .container {
   position: absolute;
@@ -642,26 +696,6 @@
   transform: translate(-50%, -50%);
   width: 70vw;
 }
-@property --tw-rotate-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-y {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-z {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-y {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -671,6 +705,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-outline-style {
   syntax: "*";
   inherits: false;
@@ -679,13 +717,9 @@
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
-      --tw-rotate-x: initial;
-      --tw-rotate-y: initial;
-      --tw-rotate-z: initial;
-      --tw-skew-x: initial;
-      --tw-skew-y: initial;
       --tw-border-style: solid;
       --tw-leading: initial;
+      --tw-font-weight: initial;
       --tw-outline-style: solid;
     }
   }
diff --git a/package.json b/package.json
index 814cfd5..a212be0 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "be": "cd backend && cargo run",
     "fe": "cd frontend && bun run dev",
     "tw": "cd frontend && npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch",
-    "dev": "npm-run-all --parallel be fe tw"
+    "dev": "npm-run-all --parallel be fe tw",
+    "log": "git log --all --graph --oneline"
   }
 }
\ No newline at end of file