diff --git a/index.html b/index.html
index 34fb16ae..879d5b8d 100644
--- a/index.html
+++ b/index.html
@@ -11,33 +11,67 @@
 
   <input id="file-input" type="file">
 
-  <div id="file-area">
-    <h2>Click to add your file</h2>
-    <p id="drop-hint-text">or drag and drop it here</p>
-  </div>
-  <div id="side-panel">
-    <button id="mode-button">Advanced mode</button>
-  </div>
+  <nav>
+    <span class="nav-title">Convert</span>
+    <div class="mode-switch">
+      <span class="mode-label active" id="mode-label-simple">Simple</span>
+      <button id="mode-button" class="toggle-switch" role="switch" aria-checked="false">
+        <span class="toggle-thumb"></span>
+      </button>
+      <span class="mode-label" id="mode-label-advanced">Advanced</span>
+    </div>
+  </nav>
 
-  <div id="format-containers">
+  <main>
+
+    <section id="file-area">
+      <div class="upload-icon">
+        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+          <polyline points="17 8 12 3 7 8"/>
+          <line x1="12" y1="3" x2="12" y2="15"/>
+        </svg>
+      </div>
+      <h2>Drop your file here</h2>
+      <p id="drop-hint-text">or click to browse</p>
+    </section>
 
-    <div id="from-container" class="format-container">
-      <h2>Convert from:</h2>
-      <input type="text" id="search-from" class="search" placeholder="Search">
-      <div id="from-list" class="format-list">
+    <section id="format-containers">
 
+      <div id="from-container" class="format-container">
+        <label class="format-label">From</label>
+        <div class="search-wrapper">
+          <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="11" cy="11" r="8"/>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+          </svg>
+          <input type="text" id="search-from" class="search" placeholder="Search formats...">
+        </div>
+        <div id="from-list" class="format-list"></div>
       </div>
-    </div>
 
-    <div id="to-container" class="format-container">
-      <h2>Convert to:</h2>
-      <input type="text" id="search-to" class="search" placeholder="Search">
-      <div id="to-list" class="format-list">
+      <div class="format-divider" aria-hidden="true">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="5" y1="12" x2="19" y2="12"/>
+          <polyline points="12 5 19 12 12 19"/>
+        </svg>
+      </div>
 
+      <div id="to-container" class="format-container">
+        <label class="format-label">To</label>
+        <div class="search-wrapper">
+          <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="11" cy="11" r="8"/>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+          </svg>
+          <input type="text" id="search-to" class="search" placeholder="Search formats...">
+        </div>
+        <div id="to-list" class="format-list"></div>
       </div>
-    </div>
 
-  </div>
+    </section>
+
+  </main>
 
   <button id="convert-button" class="disabled">Convert</button>
 
@@ -49,4 +83,4 @@ <h2>Loading tools...</h2>
   <script type="module" src="src/main.ts"></script>
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/main.ts b/src/main.ts
index bd43815d..1d5af3aa 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -56,7 +56,7 @@ const searchHandler = (event: Event) => {
   const target = event.target;
   if (!(target instanceof HTMLInputElement)) return;
 
-  const targetParentList = target.parentElement?.querySelector(".format-list");
+  const targetParentList = target.closest(".format-container")?.querySelector(".format-list");
   if (!(targetParentList instanceof HTMLDivElement)) return;
 
   const string = target.value.toLowerCase();
@@ -103,10 +103,15 @@ const fileSelectHandler = (event: Event) => {
   files.sort((a, b) => a.name === b.name ? 0 : (a.name < b.name ? -1 : 1));
   selectedFiles = files;
 
-  ui.fileSelectArea.innerHTML = `<h2>
-    ${files[0].name}
-    ${files.length > 1 ? `<br>... and ${files.length - 1} more` : ""}
-  </h2>`;
+  ui.fileSelectArea.innerHTML = `
+    <div class="upload-icon">
+      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+        <polyline points="14 2 14 8 20 8"/>
+      </svg>
+    </div>
+    <h2>${files[0].name}</h2>
+    ${files.length > 1 ? `<p class="file-count">and ${files.length - 1} more</p>` : ""}`;
 
   // Common MIME type adjustments (to match "mime" library)
   let mimeType = normalizeMimeType(files[0].type);
@@ -292,13 +297,10 @@ async function buildOptionList () {
 
 ui.modeToggleButton.addEventListener("click", () => {
   simpleMode = !simpleMode;
-  if (simpleMode) {
-    ui.modeToggleButton.textContent = "Advanced mode";
-    document.body.style.setProperty("--highlight-color", "#1C77FF");
-  } else {
-    ui.modeToggleButton.textContent = "Simple mode";
-    document.body.style.setProperty("--highlight-color", "#FF6F1C");
-  }
+  ui.modeToggleButton.classList.toggle("active", !simpleMode);
+  ui.modeToggleButton.setAttribute("aria-checked", (!simpleMode).toString());
+  document.getElementById("mode-label-simple")?.classList.toggle("active", simpleMode);
+  document.getElementById("mode-label-advanced")?.classList.toggle("active", !simpleMode);
   buildOptionList();
 });
 
diff --git a/style.css b/style.css
index 6b5bac7f..fe5eda1c 100644
--- a/style.css
+++ b/style.css
@@ -1,197 +1,512 @@
-body {
+/* ========== Reset & Variables ========== */
+
+*,
+*::before,
+*::after {
   margin: 0;
-  font-family: sans-serif;
-  --highlight-color: #1C77FF;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --accent: #1D1D1F;
+  --accent-hover: #424245;
+  --bg: #F5F5F7;
+  --bg-card: #FFFFFF;
+  --text-primary: #1D1D1F;
+  --text-secondary: #86868B;
+  --text-tertiary: #AEAEB2;
+  --border: #D2D2D7;
+  --hover: rgba(0, 0, 0, 0.04);
+  --selected-bg: #1D1D1F;
+  --selected-text: #FFFFFF;
+  --radius-sm: 8px;
+  --radius: 12px;
+  --radius-lg: 16px;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  --transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text",
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo,
+    Monaco, "Cascadia Code", monospace;
+}
+
+/* ========== Base ========== */
+
+body {
+  font-family: var(--font);
+  background-color: var(--bg);
+  color: var(--text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  min-height: 100vh;
 }
 
 #file-input {
   display: none;
 }
 
-#file-area {
+/* ========== Navigation ========== */
+
+nav {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 100%;
-  height: 30vh;
-  background-color: var(--highlight-color);
-  color: white;
-  text-align: center;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 32px;
+  background: rgba(255, 255, 255, 0.72);
+  backdrop-filter: saturate(180%) blur(20px);
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+  border-bottom: 0.5px solid var(--border);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.nav-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: -0.025em;
+}
+
+/* ========== Mode Switch ========== */
+
+.mode-switch {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.mode-label {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-tertiary);
+  transition: color var(--transition);
+  user-select: none;
+  cursor: default;
+}
+
+.mode-label.active {
+  color: var(--text-primary);
+}
+
+.toggle-switch {
+  position: relative;
+  width: 44px;
+  height: 26px;
+  background: #E5E5EA;
+  border: none;
+  border-radius: 13px;
   cursor: pointer;
+  padding: 0;
+  transition: background var(--transition);
+  outline: none;
+  flex-shrink: 0;
 }
 
-#file-area h2,
-#file-area p {
-  margin: 5px;
+.toggle-switch:focus-visible {
+  box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.2);
 }
 
-#side-panel {
+.toggle-switch.active {
+  background: var(--accent);
+}
+
+.toggle-thumb {
   position: absolute;
-  top: 0;
-  right: 0;
-  width: 20em;
-  height: 30vh;
-  padding: 2em;
-  box-sizing: border-box;
+  top: 2px;
+  left: 2px;
+  width: 22px;
+  height: 22px;
+  background: white;
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.06);
+  transition: transform var(--transition);
   pointer-events: none;
 }
 
-#side-panel button {
-  font-size: 1rem;
-  width: 100%;
-  padding: 10px 20px;
-  border: 0;
-  border-radius: 10px;
-  background-color: white;
-  color: var(--highlight-color);
-  font-weight: bold;
+.toggle-switch.active .toggle-thumb {
+  transform: translateX(18px);
+}
+
+/* ========== Main Content ========== */
+
+main {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 32px 24px 120px;
+}
+
+/* ========== File Drop Area ========== */
+
+#file-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 44px 32px;
+  background: var(--bg-card);
+  border: 2px dashed var(--border);
+  border-radius: var(--radius-lg);
   cursor: pointer;
-  box-shadow: 0 5px 0 0 rgba(169, 169, 169, 0.4);
-  pointer-events: all;
+  transition:
+    border-color var(--transition),
+    background var(--transition),
+    box-shadow var(--transition),
+    transform 0.15s ease;
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+#file-area:hover {
+  border-color: var(--text-secondary);
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: var(--shadow);
+}
+
+#file-area:active {
+  transform: scale(0.995);
+}
+
+.upload-icon {
+  color: var(--text-tertiary);
+  margin-bottom: 4px;
+  transition: color var(--transition), transform var(--transition);
 }
-#side-panel button:active {
-  transform: translateY(5px);
-  box-shadow: 0 0 0 0;
+
+#file-area:hover .upload-icon {
+  color: var(--text-secondary);
+  transform: translateY(-2px);
 }
 
+#file-area h2 {
+  font-size: 1.0625rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  word-break: break-word;
+}
+
+#file-area p,
+#file-area .file-count {
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  font-weight: 400;
+}
+
+/* ========== Format Containers ========== */
+
 #format-containers {
   display: flex;
+  gap: 20px;
+  align-items: flex-start;
 }
 
 .format-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-card);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  box-shadow: var(--shadow);
+  min-width: 0;
+}
+
+.format-label {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-secondary);
+  margin-bottom: 14px;
+}
+
+.format-divider {
   display: flex;
-  flex-flow: column nowrap;
   align-items: center;
-  width: 50vw;
-  min-height: 70vh;
-  padding: 0.8em 7em;
+  justify-content: center;
+  padding-top: 56px;
+  color: var(--text-tertiary);
+  flex-shrink: 0;
 }
-.format-container h2 {
-  text-align: center;
-  margin-bottom: 20px;
+
+/* ========== Search ========== */
+
+.search-wrapper {
+  position: relative;
+  margin-bottom: 14px;
 }
 
-#from-container {
-  background-color: lightgray;
+.search-icon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-tertiary);
+  pointer-events: none;
+  transition: color var(--transition);
 }
-#to-container {
-  background-color: rgb(184, 184, 184);
+
+.search-wrapper:focus-within .search-icon {
+  color: var(--text-secondary);
 }
 
 .search {
-  text-align: center;
-  margin-bottom: 30px;
-  padding: 10px 20px;
-  border: 0;
-  border-radius: 5px;
+  width: 100%;
+  padding: 9px 12px 9px 36px;
+  font-size: 0.8125rem;
+  font-family: var(--font);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg);
+  color: var(--text-primary);
   outline: none;
-  box-shadow: 0 5px 0 0 darkgrey;
+  transition:
+    border-color var(--transition),
+    box-shadow var(--transition),
+    background var(--transition);
 }
 
+.search::placeholder {
+  color: var(--text-tertiary);
+}
+
+.search:focus {
+  border-color: var(--accent);
+  background: var(--bg-card);
+  box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.08);
+}
+
+/* ========== Format List ========== */
+
 .format-list {
   display: flex;
-  flex-flow: column nowrap;
-  width: 100%;
-  align-items: center;
-  background-color: white;
-  border-radius: 10px;
-  padding: 30px;
-  margin-bottom: 5vw;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 420px;
+  overflow-y: auto;
+  margin: 0 -4px;
+  padding: 0 4px;
+}
+
+.format-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.format-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.format-list::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 3px;
+}
+
+.format-list::-webkit-scrollbar-thumb:hover {
+  background: var(--text-tertiary);
 }
 
 .format-list button {
-  width: 80%;
-  margin: 5px 0;
-  padding: 10px;
-  color: black;
-  background-color: lightgray;
-  border: 0;
-  border-radius: 10px;
-  font-family: monospace;
-  word-break: break-word;
+  width: 100%;
+  padding: 9px 12px;
+  text-align: left;
+  font-size: 0.8125rem;
+  font-family: var(--font-mono);
+  color: var(--text-primary);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
   cursor: pointer;
+  transition:
+    background var(--transition),
+    border-color var(--transition),
+    color var(--transition),
+    box-shadow var(--transition);
+  word-break: break-word;
+  line-height: 1.4;
+}
+
+.format-list button:hover {
+  background: var(--hover);
+  border-color: var(--border);
 }
 
 button.selected {
-  background-color: var(--highlight-color);
-  color: white;
-  font-weight: bold;
+  background: var(--selected-bg);
+  color: var(--selected-text);
+  border-color: transparent;
+  font-weight: 600;
+}
+
+button.selected:hover {
+  background: var(--accent-hover);
 }
 
+/* ========== Convert Button ========== */
+
 #convert-button {
   position: fixed;
   left: 50%;
-  bottom: 5%;
+  bottom: 28px;
   transform: translateX(-50%);
-  font-size: 1.5rem;
-  padding: 10px 20px;
-  border: 0;
-  border-radius: 10px;
-  background-color: var(--highlight-color);
+  padding: 13px 48px;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  font-family: var(--font);
+  letter-spacing: -0.01em;
   color: white;
+  background: var(--accent);
+  border: none;
+  border-radius: 980px;
   cursor: pointer;
+  box-shadow: var(--shadow-lg);
+  transition:
+    background var(--transition),
+    transform 0.15s ease,
+    opacity var(--transition),
+    box-shadow var(--transition);
+  z-index: 50;
 }
 
-.disabled {
-  filter: grayscale(1);
+#convert-button:hover {
+  background: var(--accent-hover);
+  box-shadow:
+    0 8px 28px rgba(0, 0, 0, 0.12),
+    0 4px 10px rgba(0, 0, 0, 0.06);
+}
+
+#convert-button:active {
+  transform: translateX(-50%) scale(0.97);
+}
+
+#convert-button.disabled {
+  opacity: 0.3;
   pointer-events: none;
 }
 
+/* ========== Popup ========== */
+
 #popup-bg {
   position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  z-index: 200;
+  animation: bgFadeIn 0.25s ease;
 }
+
 #popup {
   position: fixed;
   left: 50%;
   top: 50%;
-  width: 20vw;
   transform: translate(-50%, -50%);
-  background-color: white;
-  padding: 15px;
-  border-radius: 10px;
+  width: min(420px, 88vw);
+  background: var(--bg-card);
+  padding: 32px;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
   text-align: center;
+  z-index: 201;
+  animation: popupIn 0.25s ease;
+}
+
+#popup h2 {
+  font-size: 1.0625rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  margin-bottom: 8px;
+}
+
+#popup p {
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin-bottom: 4px;
 }
 
 #popup button {
-  font-size: 1rem;
-  padding: 7px 20px;
-  border: 0;
-  border-radius: 10px;
-  background-color: lightgray;
-  color: black;
+  margin-top: 16px;
+  padding: 9px 28px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  font-family: var(--font);
+  color: white;
+  background: var(--accent);
+  border: none;
+  border-radius: 980px;
   cursor: pointer;
+  transition: background var(--transition);
 }
 
-@media only screen and (max-width: 800px) {
-  #drop-hint-text {
-    display: none;
+#popup button:hover {
+  background: var(--accent-hover);
+}
+
+/* ========== Animations ========== */
+
+@keyframes bgFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes popupIn {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.96);
   }
-  .format-container {
-    width: 100%;
-    box-sizing: border-box;
-    padding: 0.8em 4em;
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+/* ========== Responsive ========== */
+
+@media only screen and (max-width: 768px) {
+  nav {
+    padding: 12px 16px;
   }
-  .format-list button {
-    width: 100%;
+
+  .nav-title {
+    font-size: 1.0625rem;
+  }
+
+  main {
+    padding: 20px 16px 120px;
+  }
+
+  #file-area {
+    padding: 36px 20px;
+  }
+
+  #drop-hint-text {
+    display: none;
   }
+
   #format-containers {
-    flex-flow: column nowrap;
+    flex-direction: column;
+    gap: 16px;
   }
-  #popup {
-    width: 80vw;
+
+  .format-divider {
+    padding-top: 0;
+    transform: rotate(90deg);
   }
-  #side-panel {
-    width: 50%;
-    padding: 0.8em;
-    text-align: right;
+
+  .format-container {
+    padding: 20px;
   }
-  #side-panel button {
-    font-size: 0.8rem;
-    padding: 10px;
+
+  .format-list {
+    max-height: 320px;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .mode-label {
+    display: none;
   }
 }