diff --git a/frontend/src/component/Sidebar/Setting/backgroundSetting.tsx b/frontend/src/component/Sidebar/Setting/backgroundSetting.tsx
index a0c9134..a38a287 100644
--- a/frontend/src/component/Sidebar/Setting/backgroundSetting.tsx
+++ b/frontend/src/component/Sidebar/Setting/backgroundSetting.tsx
@@ -1,11 +1,12 @@
-import { useState } from 'react';
+import { useRecoilState } from 'recoil';
 import Content from '../Content';
 import { backgroundSettingWrapper } from './setting.styled';
 import Toggle from './toggle';
+import { musicState, snowState } from '../../../store/atom/backgroundSetting';
 
 const BackgroundSetting = () => {
-  const [isMusicOn, setMusic] = useState<boolean>(false);
-  const [isSnowing, setSnowing] = useState<boolean>(false);
+  const [isMusicOn, setMusic] = useRecoilState(musicState);
+  const [isSnowing, setSnowing] = useRecoilState(snowState);
 
   const handleMusicStatus = () => {
     setMusic(!isMusicOn);
diff --git a/frontend/src/component/Sidebar/Setting/deviceSetting.tsx b/frontend/src/component/Sidebar/Setting/deviceSetting.tsx
index cc773e3..f03e43a 100644
--- a/frontend/src/component/Sidebar/Setting/deviceSetting.tsx
+++ b/frontend/src/component/Sidebar/Setting/deviceSetting.tsx
@@ -1,9 +1,12 @@
 import { useEffect, useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import { devicePermissionState } from '../../../store/atom/deviceSetting';
 import Device from './device';
 import { deviceListType } from './setting';
 import { deviceWrapper } from './setting.styled';
 
-const DeviceSetting = (permission: { permission: boolean }) => {
+const DeviceSetting = () => {
+  const permission = useRecoilValue(devicePermissionState);
   const [deviceList, setDeviceList] = useState<deviceListType>();
 
   useEffect(() => {