diff --git a/client/src/components/layout/Footer.tsx b/client/src/components/layout/Footer.tsx
index 8cefc0f..3c4aeb9 100644
--- a/client/src/components/layout/Footer.tsx
+++ b/client/src/components/layout/Footer.tsx
@@ -32,7 +32,7 @@ const Footer = ({ dark, toggleDarkMode }: ComponentProps) => {
 
   return (
     <FullLayout>
-      <footer className={`w-full z-30 flex justify-between items-center pr-3 pl-3 `}>
+      <footer className={`absolute bottom-10 w-full flex justify-between items-center pr-3 pl-3 `}>
           <div>
             © WAG!
           </div>
diff --git a/client/src/components/layout/Header.tsx b/client/src/components/layout/Header.tsx
index 8673ff7..ccf6885 100644
--- a/client/src/components/layout/Header.tsx
+++ b/client/src/components/layout/Header.tsx
@@ -19,7 +19,6 @@ type ComponentProps = Props & PropsFromRedux;
 const Header = ({ dark, toggleDarkMode }: ComponentProps) => {
 
   const [play, setPlay] = useState(false);
-  const [soundEffectStatusValue, ] = useState(soundEffectStatus);
   const [isClicked, setIsClicked] = useState(false)
   const audioRef = useRef<HTMLAudioElement>(null);
 
@@ -72,7 +71,7 @@ const Header = ({ dark, toggleDarkMode }: ComponentProps) => {
       audio.play(); // 소리를 재생합니다.
     };
     
-    if (soundEffectStatusValue){
+    if (playSoundEffect){
       playSound();
     }
     
@@ -85,7 +84,7 @@ const Header = ({ dark, toggleDarkMode }: ComponentProps) => {
       audio.play(); // 소리를 재생합니다.
     };
     
-    if (soundEffectStatusValue){
+    if (playSoundEffect){
       playSound();
     }
     
@@ -93,8 +92,8 @@ const Header = ({ dark, toggleDarkMode }: ComponentProps) => {
 
   return (
     <header className="m-5 z-50">
-      <div className="flex justify-end z-50">
-        <div className="absolute left-10 top-7">
+      <div className="flex justify-between z-50">
+        <div className="relative top-2">
       {dark ? (
 
 <img className={`w-20 h-16 ${isClicked ? 'clicked' : ''}`} src="images/WAG_dark.2.png" 
@@ -119,6 +118,7 @@ const Header = ({ dark, toggleDarkMode }: ComponentProps) => {
       </img>
     )}
     </div>
+    <div className="flex justify-between z-50">
         <audio ref={audioRef} src='audio/main_theme.mp3' loop />
         {isChrome() ? (
           <>
@@ -207,6 +207,7 @@ const Header = ({ dark, toggleDarkMode }: ComponentProps) => {
             </RulesModal>
           </>
         ) : null}
+        </div>
       </div>
     </header>
   );
diff --git a/client/src/index.css b/client/src/index.css
index af23cf8..abe975b 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -35,7 +35,11 @@ body {
   -moz-osx-font-smoothing: grayscale;
   @apply transition-colors duration-200 bg-light-bg dark:bg-dark-bg;
   max-width: 1024px;
-  padding-bottom: 7vh;
+  /* padding-bottom: 7vh; */
+}
+
+footer {
+  max-width: 1024px;
 }
 
 code {
diff --git a/client/src/index.tsx b/client/src/index.tsx
index f32da67..0637067 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -6,7 +6,6 @@ import reportWebVitals from "./reportWebVitals";
 import { Provider } from "react-redux";
 import store from "./modules";
 import Header from "./components/layout/Header";
-import Footer from "./components/layout/Footer";
 import { BrowserRouter } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { RecoilRoot } from "recoil";
@@ -14,6 +13,7 @@ import ReactModal from "react-modal";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import SquareBubble from "./components/layout/SquareBubble";
+import Footer from "./components/layout/Footer";
 
 const queryClient = new QueryClient();
 const rootElement = document.getElementById("root") as HTMLElement; // id가 'root'인 엘리먼트를 찾는 코드를 변수에 할당
@@ -28,9 +28,9 @@ root.render(
             <SquareBubble>
             <Header />
             <App />
+            <Footer/>
             <ToastContainer />
             </SquareBubble>
-            <Footer />
           </BrowserRouter>
         </RecoilRoot>
       </Provider>