diff --git a/src/app/components/Icon.tsx b/src/app/components/Icon.tsx
index 5bc6487..e7d4658 100644
--- a/src/app/components/Icon.tsx
+++ b/src/app/components/Icon.tsx
@@ -1,4 +1,5 @@
 import { iconClassnameProps } from '@/types/component.ts';
+import Image from 'next/image';
 
 export function GpsIcon({ className }: iconClassnameProps) {
   return (
@@ -71,3 +72,14 @@ export function CameraIcon({ className }: iconClassnameProps) {
     </svg>
   );
 }
+
+export function Marker({ className }: iconClassnameProps) {
+  <figure className={`relative ${className}`}>
+    <Image
+      src="https://i.ibb.co/sCQvt3z/Group-2608599.png"
+      alt=""
+      fill
+      sizes="100vw"
+    />
+  </figure>;
+}
diff --git a/src/app/components/InfiniteScroll.tsx b/src/app/components/InfiniteScroll.tsx
deleted file mode 100644
index 01b1475..0000000
--- a/src/app/components/InfiniteScroll.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-/* eslint-disable consistent-return */
-/* eslint-disable comma-spacing */
-/* eslint-disable object-curly-newline */
-/* eslint-disable operator-linebreak */
-import React, { useEffect, useRef } from 'react';
-import { useInfiniteQuery } from '@tanstack/react-query';
-
-const InfiniteScroll = ({
-  queryKey,
-  queryFn,
-  renderItem,
-  getNextPageParam,
-  dataPath,
-}: any) => {
-  const { data, isLoading, isError, fetchNextPage, hasNextPage } =
-    useInfiniteQuery({
-      queryKey,
-      queryFn,
-      getNextPageParam,
-      initialPageParam: 0,
-    });
-
-  const loadMoreRef = useRef(null);
-
-  useEffect(() => {
-    if (!hasNextPage) return;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting) {
-          fetchNextPage();
-        }
-      },
-      {
-        root: null, // 기본적으로 브라우저 뷰포트를 root로 사용
-        rootMargin: '0px',
-        threshold: 0.1, // 타겟 요소가 10% 보이면 콜백 실행
-      },
-    );
-    if (loadMoreRef.current) observer.observe(loadMoreRef.current);
-
-    return () => {
-      if (loadMoreRef.current) observer.disconnect();
-    };
-  }, [hasNextPage, fetchNextPage]);
-
-  return (
-    <div className="w-full">
-      {isLoading && <div>Loading...</div>}
-      {isError && <div>Error loading data</div>}
-      {data?.pages.map((page, pageIndex) => (
-        <React.Fragment key={pageIndex}>
-          {dataPath(page).map((item: any) => renderItem(item))}
-        </React.Fragment>
-      ))}
-      {isLoading && <div>Loading more items...</div>}
-      <div ref={loadMoreRef} />
-    </div>
-  );
-};
-
-export default InfiniteScroll;
diff --git a/src/app/components/MannerStatBar.tsx b/src/app/components/MannerStatBar.tsx
index 1932a9e..b3546c4 100644
--- a/src/app/components/MannerStatBar.tsx
+++ b/src/app/components/MannerStatBar.tsx
@@ -4,7 +4,7 @@ function MannerStatBar({ mannerStat }: { mannerStat: number }) {
   return (
     <div className="ml-10 mt-2 flex w-full flex-col p-2">
       <div className="flex flex-row">
-        <p className="w-full pl-1 text-sm font-light">매너스탯</p>
+        <p className="w-full pl-1 text-sm text-black">매너스탯</p>
         <p className="w-full pr-2 text-right text-sm font-semibold">
           {mannerStatTranslate(mannerStat)}
         </p>
diff --git a/src/app/components/Post.tsx b/src/app/components/Post.tsx
index 0a66efd..5f753b6 100644
--- a/src/app/components/Post.tsx
+++ b/src/app/components/Post.tsx
@@ -12,11 +12,11 @@ function Post({ titleImage, title, location, meetingId, endTime }: postProps) {
       className="m-4 flex cursor-pointer flex-col justify-center"
       href={`/meeting/${meetingId}`}
     >
-      <figure className="relative flex h-32 w-32 sm:h-40 sm:w-40 md:h-48 md:w-48 lg:h-56 lg:w-56">
+      <figure className="relative flex h-32 w-32 rounded-lg shadow-xl sm:h-40 sm:w-40 md:h-48 md:w-48 lg:h-56 lg:w-56">
         <Image
           src={titleImage}
           alt={titleImage}
-          className="relative rounded-lg object-cover "
+          className="relative rounded-lg object-cover"
           fill
           sizes="100vm"
         />
diff --git a/src/app/home/Body.tsx b/src/app/home/Body.tsx
index d3779bb..5fa7030 100644
--- a/src/app/home/Body.tsx
+++ b/src/app/home/Body.tsx
@@ -213,7 +213,7 @@ function Distance() {
                   position={{ lat: marker.lat, lng: marker.lng }}
                   onClick={() => handleMain(marker)}
                   image={{
-                    src: 'https://i.ibb.co/Cnwf3x8/image.png',
+                    src: 'https://i.ibb.co/sCQvt3z/Group-2608599.png',
                     size: { width: 64, height: 70 },
                     options: { offset: { x: 27, y: 69 } },
                   }}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index a8c0aa1..fd11d16 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -31,7 +31,9 @@ export default function RootLayout({
           <Suspense fallback={<div>로딩중인데요?ㅋㅋ</div>}>
             <Header />
             <StoreProvider>
-              <div className="flex min-h-screen w-full">{children}</div>
+              <div className="flex min-h-screen min-w-full justify-center">
+                {children}
+              </div>
             </StoreProvider>
             <Footer />
           </Suspense>
diff --git a/src/app/meeting/[meetingParam]/MeetingHeader.tsx b/src/app/meeting/[meetingParam]/MeetingHeader.tsx
index c9d935a..20385a2 100644
--- a/src/app/meeting/[meetingParam]/MeetingHeader.tsx
+++ b/src/app/meeting/[meetingParam]/MeetingHeader.tsx
@@ -101,7 +101,7 @@ function MeetingHeader({
               ref={detailsRef}
               className="dropdown dropdown-end dropdown-bottom"
             >
-              <summary className="btn btn-circle mt-1">
+              <summary className="btn btn-circle mt-1 border-none bg-zinc-100 hover:bg-zinc-200">
                 {' '}
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -116,7 +116,7 @@ function MeetingHeader({
                   <circle cx="12" cy="18" r="1.5" fill="currentColor" />
                 </svg>
               </summary>
-              <ul className="menu dropdown-content z-[10] w-52 rounded-box bg-base-100 p-2 shadow">
+              <ul className="menu dropdown-content z-[10] w-52 rounded-box bg-white p-2 shadow">
                 {!endTime && (
                   <li>
                     <a
diff --git a/src/app/posts/page.tsx b/src/app/posts/page.tsx
index a7ff46f..db2b6f8 100644
--- a/src/app/posts/page.tsx
+++ b/src/app/posts/page.tsx
@@ -526,7 +526,7 @@ function page() {
                 placeholder="주소"
               />
               <button
-                className="btn h-12 w-32 bg-[#e0e0e0] text-sm text-white hover:bg-[#0a0a0a] sm:text-base"
+                className="btn h-12 w-32 border-none bg-gray-200 text-sm text-zinc-500 hover:bg-gray-300 sm:text-base"
                 onClick={() => setMeetingAddressModalOpen(true)}
               >
                 주소 검색
@@ -761,7 +761,7 @@ function page() {
         )}
         <div className="mt-12 flex w-full flex-row justify-end">
           <button
-            className="btn h-12 w-32 bg-[#dadada] text-white hover:bg-[#202020]"
+            className="btn h-12 w-32 border-none bg-gray-200 text-sm text-zinc-500 hover:bg-gray-300 sm:text-base"
             onClick={handlePostMeetings}
             type="button"
           >
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index 0e552e8..a180cfd 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+
 'use client';
 
 import { Montserrat } from 'next/font/google';
@@ -13,7 +15,7 @@ import WarningAlert from '../components/WarningAlert.tsx';
 
 const mont = Montserrat({ subsets: ['latin'], weight: ['400'] });
 
-function Page() {
+function page() {
   const today = dayjs();
   const [selectedRadio, setSelectedRadio] = useState<string>('radio-1');
   const [birthDate, setBirthDate] = useState<Dayjs | null>(today);
@@ -71,10 +73,10 @@ function Page() {
   };
 
   return (
-    <div className="flex flex-col items-center">
+    <div className="flex h-screen w-screen flex-col items-center justify-center">
       <WarningAlert errorMessage={errorMessage} showAlert={showAlert} />
       <div>
-        <h1 className="mb-14 mt-20 flex flex-row text-3xl font-light">
+        <h1 className="mb-14 flex flex-row text-3xl font-light">
           <p
             className={`text-center text-xl sm:text-xl lg:text-3xl ${mont.className}`}
           >
@@ -96,7 +98,7 @@ function Page() {
             type="radio"
             name="radio-1"
             style={{ width: '18px', height: '18px' }}
-            className="radio mr-2"
+            className="radio mr-2 text-white"
             value="radio-1"
             checked={selectedRadio === 'radio-1'}
             onChange={handleRadioChange}
@@ -129,7 +131,7 @@ function Page() {
         </div>
         <input
           type="text"
-          className="input mb-4 h-10 w-60 border border-b border-black sm:w-60 lg:w-80"
+          className="input mb-4 h-10 w-60 border border-b border-zinc-400 bg-white sm:w-60 lg:w-80"
           value={name}
           onChange={(event) => setName(event.target.value)}
         />
@@ -138,7 +140,7 @@ function Page() {
         </div>
         <input
           type="text"
-          className="input mb-4 h-10 w-60 border border-b border-black sm:w-60 lg:w-80"
+          className="border- input mb-4 h-10 w-60 border border-zinc-400 bg-white sm:w-60 lg:w-80"
           value={location}
           onChange={(event) => setLocation(event.target.value)}
         />
@@ -153,4 +155,4 @@ function Page() {
   );
 }
 
-export default Page;
+export default page;
diff --git a/src/app/styles/globals.css b/src/app/styles/globals.css
index c2e45d4..d5c232d 100644
--- a/src/app/styles/globals.css
+++ b/src/app/styles/globals.css
@@ -2,6 +2,27 @@
 @tailwind components;
 @tailwind utilities;
 
+/* 시스템이 다크 모드 설정이라도 라이트 모드 스타일을 강제 적용 */
+@media (prefers-color-scheme: dark) {
+  body,
+  button,
+  input,
+  textarea,
+  input,
+  select {
+    background-color: #ffffff; /* 백색 배경 */
+    color: #000000; /* 검정색 텍스트 */
+    border-color: #cccccc; /* 회색 테두리 */
+  }
+  .radio:checked {
+    background-color: white; /* 배경색 */
+    border: 1px solid #ccc; /* 테두리 색상 */
+  }
+  a {
+    color: #000000; /* 기본 링크 색상 */
+  }
+}
+
 /* 웹킷(Chrome, Safari 등) 브라우저의 스크롤바 */
 ::-webkit-scrollbar {
   width: 0.4rem; /* 스크롤바의 너비 */
@@ -9,7 +30,7 @@
 
 /* 스크롤바의 Track (배경) */
 ::-webkit-scrollbar-track {
-  background: transparent;
+  background: #f5f5f5;
 }
 
 /* 스크롤바의 Thumb (드래그할 수 있는 부분) */