diff --git a/components/index.tsx b/components/index.tsx
index 7823b3c..2011977 100644
--- a/components/index.tsx
+++ b/components/index.tsx
@@ -37,7 +37,9 @@ export default function Homepage() {
     return (
         <div className="h-full fixed overflow-hidden w-full bg-black">
             <Time showSecond={settings.timeShowSecond} />
-            <EngineSelector/>
+            <EngineSelector className="absolute top-20 lg:top-44 short:top-0 translate-x-[-50%] translate-y-[-0.2rem]
+            left-1/2 w-11/12 sm:w-[700px] text:black text-right
+            dark:text-white text-3xl text-shadow-lg z-10"/>
             {colorScheme === "dark" && (
                 <Background src="rgb(23,25,29)" isFocus={isFocus} onClick={() => setFocus(false)} />
             )}
diff --git a/components/search/engineSelector.tsx b/components/search/engineSelector.tsx
index 8ab4eff..414931f 100644
--- a/components/search/engineSelector.tsx
+++ b/components/search/engineSelector.tsx
@@ -7,7 +7,9 @@ import { useRecoilValue, useSetRecoilState } from "recoil";
 import { settingsState } from "../state/settings";
 import { engineTranslation } from "./translatedEngineList";
 
-export default function () {
+export default function(
+    props: { className: string }
+) {
     const t = useTranslations("Search");
     const settings: settings = useRecoilValue(settingsState);
     const items = settings.searchEngines;
@@ -43,7 +45,7 @@ export default function () {
     }, []);
 
     return (
-        <div>
+        <div className={props.className}>
             {
             isClient &&
             (
@@ -55,7 +57,7 @@ export default function () {
                     </DropdownTrigger>
                     <DropdownMenu
                         aria-label={t("engine-aria")}
-                        variant="flat"
+                        variant="light"
                         disallowEmptySelection
                         selectionMode="single"
                         selectedKeys={selectedKeys}