diff --git a/src/components/building/BuildingDescription.tsx b/src/components/building/BuildingDescription.tsx
index 8616eb6..77616d3 100644
--- a/src/components/building/BuildingDescription.tsx
+++ b/src/components/building/BuildingDescription.tsx
@@ -1,5 +1,6 @@
 import './css/BuildingDescription.css';
 import buildingboxBackground from '../../assets/images/building-description-background.png';
+import ReusableButton from '../buttons/ReusableButton';
 
 interface Props {
   onSwitch: () => void;
@@ -7,7 +8,10 @@ interface Props {
 
 const BuildingDescription: React.FC<Props> = ({ onSwitch }) => {
   return (
-    <div className="building-description" style={{ backgroundImage: `url(${buildingboxBackground})` }}>
+    <div
+      className="building-description"
+      style={{ backgroundImage: `url(${buildingboxBackground})` }}
+    >
       <div className="building-description-text-group">
         <h1>건물용</h1>
         <p>
@@ -17,7 +21,9 @@ const BuildingDescription: React.FC<Props> = ({ onSwitch }) => {
         <p className="warning">※ 서비스를 이용하려면 로그인 후 시작해 주세요.</p>
       </div>
 
-      <button onClick={onSwitch}>구역 모드로 이동</button>
+      <ReusableButton onClick={onSwitch} className="building-description-button">
+        구역 모드로 이동
+      </ReusableButton>
     </div>
   );
 };
diff --git a/src/components/building/BuildingLoginCard.tsx b/src/components/building/BuildingLoginCard.tsx
index b156a64..c59ad43 100644
--- a/src/components/building/BuildingLoginCard.tsx
+++ b/src/components/building/BuildingLoginCard.tsx
@@ -2,6 +2,8 @@ import './css/BuildingLoginCard.css';
 import { useState } from 'react';
 import { useNavigate } from "react-router-dom";
 import { adminLogin } from '../../apis/loginApi';
+import ReusableInput from '../input/ReusableInput';
+import ReusableButton from '../buttons/ReusableButton';
 
 interface Props {
   onSwitch: () => void;
@@ -22,7 +24,7 @@ const BuildingLoginCard: React.FC<Props> = ({ onSwitch: _, isExiting, direction,
         username: adminId,
         password: password,
       });
-    const token = response.accessToken;
+      const token = response.accessToken;
       if (token) {
         localStorage.setItem("accessToken", token);
         onLogin();
@@ -31,7 +33,7 @@ const BuildingLoginCard: React.FC<Props> = ({ onSwitch: _, isExiting, direction,
         setError("로그인 실패: 엑세스 토큰이 없음");
       }
     } catch (error: any) {
-      setError(error.message); 
+      setError(error.message);
     }
   };
 
@@ -48,27 +50,31 @@ const BuildingLoginCard: React.FC<Props> = ({ onSwitch: _, isExiting, direction,
     >
       <div
         className={`building-card-content ${
-          isExiting
-            ? 'building-fade-out-up' : 'building-fade-in-down'
+          isExiting ? 'building-fade-out-up' : 'building-fade-in-down'
         }`}
       >
         <h2>건물용 로그인</h2>
         <p className="description">건물 관리자 계정으로 로그인하세요.</p>
         <form onSubmit={handleSubmit}>
-          <input
+          <ReusableInput
             type="text"
             placeholder="관리자 ID"
             value={adminId}
             onChange={(e) => setAdminId(e.target.value)}
+            className="building-login-input"
           />
-          <input
+          <ReusableInput
             type="password"
             placeholder="비밀번호"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
+            showToggle
+            className="building-login-input"
           />
           {error && <p className="error-message">{error}</p>}
-          <button type="submit">로그인</button>
+          <ReusableButton type="submit" className="building-login-button">
+            로그인
+          </ReusableButton>
         </form>
       </div>
     </div>
diff --git a/src/components/building/css/BuildingLoginCard.css b/src/components/building/css/BuildingLoginCard.css
index fa3584f..2019bbf 100644
--- a/src/components/building/css/BuildingLoginCard.css
+++ b/src/components/building/css/BuildingLoginCard.css
@@ -42,12 +42,11 @@
 }
 
 .building-login-card input {
-  width:100%;
+  width:  300px;
   padding: 10px 14px;
   font-size: 1rem;
   border: 1px solid #b0ccb0;
   border-radius: 8px;
-  margin-bottom: 10px
 }
 
 .building-login-card button {
diff --git a/src/components/input/css/ReusableInput.css b/src/components/input/css/ReusableInput.css
index b8d217a..009acd8 100644
--- a/src/components/input/css/ReusableInput.css
+++ b/src/components/input/css/ReusableInput.css
@@ -41,3 +41,11 @@
 .reusable-input-field::placeholder {
   color: #aaa;
 }
+
+.reusable-input-icon {
+  position: absolute;
+  right: 12px;
+  top: 30%;
+  cursor: pointer;
+  color: #888;
+}
diff --git a/src/components/zone/ZoneDescription.tsx b/src/components/zone/ZoneDescription.tsx
index 8574d66..71fd622 100644
--- a/src/components/zone/ZoneDescription.tsx
+++ b/src/components/zone/ZoneDescription.tsx
@@ -1,5 +1,6 @@
 import './css/ZoneDescription.css';
 import zoneboxBackground from '../../assets/images/zone-description-background.png';
+import ReusableButton from '../buttons/ReusableButton';
 
 interface Props {
   onSwitch: () => void;
@@ -20,7 +21,9 @@ const ZoneDescription: React.FC<Props> = ({ onSwitch }) => {
         <p className="warning">※ 서비스를 이용하려면 로그인 후 시작해 주세요.</p>
       </div>
 
-      <button onClick={onSwitch}>건물 모드로 이동</button>
+      <ReusableButton onClick={onSwitch} className="zone-description-button">
+        건물 모드로 이동
+      </ReusableButton>
     </div>
   );
 };
diff --git a/src/components/zone/ZoneLoginCard.tsx b/src/components/zone/ZoneLoginCard.tsx
index c35cd81..d4b4eb6 100644
--- a/src/components/zone/ZoneLoginCard.tsx
+++ b/src/components/zone/ZoneLoginCard.tsx
@@ -2,6 +2,8 @@ import './css/ZoneLoginCard.css';
 import { useState } from 'react';
 import { useNavigate } from "react-router-dom";
 import { adminLogin } from '../../apis/loginApi';
+import ReusableInput from '../input/ReusableInput';
+import ReusableButton from '../buttons/ReusableButton';
 
 interface Props {
   onSwitch: () => void;
@@ -22,7 +24,7 @@ const ZoneLoginCard: React.FC<Props> = ({ onSwitch: _, isExiting, direction, onL
         username: adminId,
         password: password,
       });
-    const token = response.accessToken;
+      const token = response.accessToken;
       if (token) {
         localStorage.setItem("accessToken", token);
         onLogin();
@@ -31,7 +33,7 @@ const ZoneLoginCard: React.FC<Props> = ({ onSwitch: _, isExiting, direction, onL
         setError("로그인 실패: 엑세스 토큰이 없음");
       }
     } catch (error: any) {
-      setError(error.message); 
+      setError(error.message);
     }
   };
 
@@ -54,20 +56,25 @@ const ZoneLoginCard: React.FC<Props> = ({ onSwitch: _, isExiting, direction, onL
         <h2>구역용 로그인</h2>
         <p className="description">구역 관리자 계정으로 로그인하세요.</p>
         <form onSubmit={handleSubmit}>
-          <input
+          <ReusableInput
             type="text"
             placeholder="관리자 ID"
             value={adminId}
             onChange={(e) => setAdminId(e.target.value)}
+            className="zone-login-input"
           />
-          <input
+          <ReusableInput
             type="password"
             placeholder="비밀번호"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
+            showToggle
+            className="zone-login-input"
           />
           {error && <p className="error-message">{error}</p>}
-          <button type="submit">로그인</button>
+          <ReusableButton type="submit" className="zone-login-button">
+            로그인
+          </ReusableButton>
         </form>
       </div>
     </div>
diff --git a/src/components/zone/css/ZoneLoginCard.css b/src/components/zone/css/ZoneLoginCard.css
index 44d40a5..7dba690 100644
--- a/src/components/zone/css/ZoneLoginCard.css
+++ b/src/components/zone/css/ZoneLoginCard.css
@@ -41,12 +41,11 @@
 }
 
 .zone-login-card input {
-  width: 100%;
+  width:  300px;
   padding: 10px 14px;
   font-size: 1rem;
   border: 1px solid #b0ccb0;
   border-radius: 8px;
-  margin-bottom: 10px;
 }
 
 .zone-login-card button {