diff --git a/.env.development b/.env.development
index 1bb4252..626c63f 100644
--- a/.env.development
+++ b/.env.development
@@ -1 +1 @@
-VITE_API_URL=http://localhost:8888
\ No newline at end of file
+VITE_API_URL=http://127.0.0.1:8888
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
index 76dd984..ccff684 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:20 AS builder
+FROM node:22 AS builder
 
 COPY ./ /app
     
diff --git a/src/components/core/Toast/Toast.module.scss b/src/components/core/Toast/Toast.module.scss
index 01e6ddf..53ac64c 100644
--- a/src/components/core/Toast/Toast.module.scss
+++ b/src/components/core/Toast/Toast.module.scss
@@ -2,8 +2,13 @@
     display: flex;
     align-items: center;
     gap: 15px;
-    background-color: var(--bg-2nd-color);
-    border: 2.75px solid var(--toast-border-color);
+    background-color: color-mix(
+        in srgb,
+        var(--toast-color) 20%,
+        transparent 80%
+    );
+    border: 2.75px dotted
+        color-mix(in srgb, var(--toast-color) 50%, transparent 50%); // darken(1.75)
     border-radius: 16px;
     padding: 10px 20px;
     min-width: 20vw;
@@ -13,7 +18,10 @@
 .icon {
     width: 2rem;
     height: 2rem;
-    color: light-dark(var(--toast-text-color), #ffffff);
+    color: light-dark(
+        color-mix(in srgb, var(--toast-color) 80%, black 20%),
+        #ffffff
+    );
     border-radius: 50%;
 }
 
@@ -27,11 +35,17 @@
 .title {
     font-size: 1rem;
     line-height: 1.5rem;
-    color: light-dark(var(--toast-text-color), #ffffff);
+    color: light-dark(
+        color-mix(in srgb, var(--toast-color) 80%, black 20%),
+        #ffffff
+    );
 }
 
 .description {
     font-size: 0.75rem;
     line-height: 1.125rem;
-    color: light-dark(var(--toast-text-color), #ffffff);
+    color: light-dark(
+        color-mix(in srgb, var(--toast-color) 80%, black 20%),
+        #ffffff
+    );
 }
diff --git a/src/components/core/Toast/Toast.tsx b/src/components/core/Toast/Toast.tsx
index 681f450..843fb99 100644
--- a/src/components/core/Toast/Toast.tsx
+++ b/src/components/core/Toast/Toast.tsx
@@ -26,12 +26,10 @@ export function Toast(props: ToastProps) {
         ...rest
     } = props;
 
-    const baseColor = useThemeColor(color);
-
     const variables = {
-        "--toast-bg-color": chroma(baseColor).alpha(0.5).hex(),
-        "--toast-text-color": chroma(baseColor).darken(1.75).hex(),
-        "--toast-border-color": baseColor,
+        // "--toast-color": chroma(baseColor).alpha(0.5).hex(),
+        // "--toast-text-color": chroma(baseColor).darken(1.75).hex(),
+        "--toast-color": `var(--color-${color})`,
     } as CSSProperties;
 
     return (
diff --git a/src/pages/_games/Default/Default.module.scss b/src/pages/_games/Default/Default.module.scss
index b808368..ea9de9c 100644
--- a/src/pages/_games/Default/Default.module.scss
+++ b/src/pages/_games/Default/Default.module.scss
@@ -23,6 +23,9 @@
     display: flex;
     justify-content: center;
     width: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 
     .info {
         position: absolute;
diff --git a/src/pages/_games/Default/Tip/Tip.module.scss b/src/pages/_games/Default/Tip/Tip.module.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/_games/Default/Tip/Tip.tsx b/src/pages/_games/Default/Tip/Tip.tsx
new file mode 100644
index 0000000..0f64b76
--- /dev/null
+++ b/src/pages/_games/Default/Tip/Tip.tsx
@@ -0,0 +1,5 @@
+import { Box } from "@/components/core";
+
+export function Tip() {
+    return <Box></Box>;
+}
diff --git a/src/pages/_games/Default/Tip/index.ts b/src/pages/_games/Default/Tip/index.ts
new file mode 100644
index 0000000..e69de29