diff --git a/src/app/globals.css b/src/app/globals.css
index 045b707..c05fbd3 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -9,3 +9,59 @@
   font-weight: normal;
   font-style: normal;
 }
+
+:root {
+  --scrollbar-width: 16px;
+  --scrollbar-track-color: #e8f5e9;
+  --scrollbar-thumb-color: #4caf50;
+  --scrollbar-thumb-hover-color: #45a049;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+/* Webkit-based browsers (Chrome, Safari, etc.) */
+::-webkit-scrollbar {
+  width: var(--scrollbar-width);
+}
+
+::-webkit-scrollbar-track {
+  background: var(--scrollbar-track-color);
+  border-radius: var(--scrollbar-width);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb-color);
+  border-radius: var(--scrollbar-width);
+  border: 4px solid var(--scrollbar-track-color);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover-color);
+}
+
+/* For Internet Explorer and Edge */
+body {
+  -ms-overflow-style: none;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+/* Dark mode styles */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --scrollbar-track-color: #1c2a1c;
+    --scrollbar-thumb-color: #2e7d32;
+    --scrollbar-thumb-hover-color: #388e3c;
+  }
+}
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
new file mode 100644
index 0000000..5989692
--- /dev/null
+++ b/src/app/loading.tsx
@@ -0,0 +1,5 @@
+import { FullPageLoader } from '@/components/Loader';
+
+export default function Loading() {
+  return <FullPageLoader />;
+}
diff --git a/src/components/Provider.tsx b/src/components/Provider.tsx
index 02dab3a..c433288 100644
--- a/src/components/Provider.tsx
+++ b/src/components/Provider.tsx
@@ -37,7 +37,7 @@ export const NextProvider = ({ children }: Props) => {
 };
 export const NextLayout = ({ children }: Props) => {
   return (
-    <div className="box-border max-h-screen min-h-screen w-full">
+    <div className="box-border max-h-screen min-h-screen w-full scroll-smooth">
       <div className="px-16 flex flex-1 flex-col sm:px-24 md:px-32 lg:px-40 xl:px-48">
         <Header />
         <main className="mt-20 flex flex-1 flex-col ">{children}</main>
diff --git a/src/utils/next-auth.ts b/src/utils/next-auth.ts
index 51740ff..7c81fad 100644
--- a/src/utils/next-auth.ts
+++ b/src/utils/next-auth.ts
@@ -84,10 +84,14 @@ export const authOptions: NextAuthOptions = {
 
   callbacks: {
     async signIn({ user, account, profile, credentials, email }) {
+      const baseURL =
+        process.env.NODE_ENV === 'development'
+          ? process.env.SERVER_URL
+          : process.env.CLOUD_FRONT_URL;
       const cookieStore = cookies();
       if (account?.provider === 'google') {
         const res = await fetch(
-          `${process.env.SERVER_URL}/members/google-login?token=${account.access_token}`,
+          `${baseURL}/members/google-login?token=${account.access_token}`,
           {
             method: 'GET'
           }
@@ -112,9 +116,10 @@ export const authOptions: NextAuthOptions = {
         user.refreshToken = refreshToken!;
         return true;
       }
+
       if (account?.provider === 'kakao') {
         const res = await fetch(
-          `${process.env.SERVER_URL}/members/kakao-login?token=${account.access_token}`,
+          `${baseURL}/members/kakao-login?token=${account.access_token}`,
           {
             method: 'GET'
           }