diff --git a/src/assets/icons/oidc/icon.svg b/src/assets/icons/oidc/icon.svg
new file mode 100644
index 00000000..9331d11f
--- /dev/null
+++ b/src/assets/icons/oidc/icon.svg
@@ -0,0 +1,11 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <rect width="20" height="20" fill="url(#pattern0)" />
+    <defs>
+        <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+            <use xlink:href="#image0_18654_73275" transform="scale(0.0078125)" />
+        </pattern>
+        <image id="image0_18654_73275" width="128" height="128"
+            xlink:href="data:image/png;base64,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" />
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/src/components/GithubLoginButton.tsx b/src/components/GithubLoginButton.tsx
index 0c91084d..43a31827 100644
--- a/src/components/GithubLoginButton.tsx
+++ b/src/components/GithubLoginButton.tsx
@@ -51,8 +51,8 @@ const GithubLoginButton: FC<Props> = ({ type = "login", source = "webapp", clien
   };
 
   return (
-    <Button className="flex-center gap-3 ghost" onClick={handleGithubLogin}>
-      <IconGithub className="w-6 h-6" />
+    <Button className="flex-center gap-3 ghost relative" onClick={handleGithubLogin}>
+      <IconGithub className="w-6 h-6 absolute left-4" />
       {` ${type === "login" ? t("login.github") : t("reg.github")}`}
     </Button>
   );
diff --git a/src/components/GoogleLoginButton.tsx b/src/components/GoogleLoginButton.tsx
index 005eff75..d97ebafe 100644
--- a/src/components/GoogleLoginButton.tsx
+++ b/src/components/GoogleLoginButton.tsx
@@ -48,7 +48,7 @@ const GoogleLoginInner: FC<Props> = ({ type = "login", loaded, loadError }) => {
       disabled={!loaded || isLoading}
     >
       <div className="absolute left-0 top-0 w-full h-full flex-center gap-3 z-[998] bg-inherit">
-        <IconGoogle className="w-6 h-6" />
+        <IconGoogle className="w-6 h-6 absolute left-4" />
         {loadError
           ? "Script Load Error!"
           : loaded
diff --git a/src/components/styled/Button.tsx b/src/components/styled/Button.tsx
index cbf2940f..e11eb464 100644
--- a/src/components/styled/Button.tsx
+++ b/src/components/styled/Button.tsx
@@ -16,7 +16,7 @@ const StyledButton = ({ children, className = "", ...rest }: Props) => {
         `text-sm text-white bg-primary-400 break-keep shadow-sm rounded-lg px-3.5 h-11 md:hover:bg-primary-500 active:bg-primary-500 disabled:bg-gray-300 disabled:hover:bg-gray-300 disabled:hover:cursor-not-allowed`,
         isFull && "w-full text-center justify-center",
         isGhost &&
-          " !text-gray-600 dark:!text-gray-100  !border !border-solid !border-gray-300 dark:!border-gray-500 !bg-transparent",
+          " !text-gray-700 dark:!text-gray-100  !border !border-solid !border-gray-300 dark:!border-gray-500 !bg-transparent",
         isCancel &&
           "!bg-transparent !text-black dark:!text-gray-50 !border !border-solid !border-gray-200",
         isSmall && "!h-auto !py-2",
diff --git a/src/routes/login/MetamaskLoginButton.tsx b/src/routes/login/MetamaskLoginButton.tsx
index a8f835d1..1437d3f5 100644
--- a/src/routes/login/MetamaskLoginButton.tsx
+++ b/src/routes/login/MetamaskLoginButton.tsx
@@ -96,11 +96,11 @@ export default function MetamaskLoginButton({
   };
   return (
     <Button
-      className="flex ghost flex-center gap-2"
+      className="flex ghost flex-center gap-2 relative"
       disabled={requesting}
       onClick={handleMetamaskLogin}
     >
-      <img className="w-6 h-6" src={metamaskSvg} alt="meta mask icon" />
+      <img className="w-6 h-6 absolute left-4" src={metamaskSvg} alt="meta mask icon" />
       {type == "login" ? t("login.metamask") : t("reg.metamask")}
     </Button>
   );
diff --git a/src/routes/login/OidcLoginButton.tsx b/src/routes/login/OidcLoginButton.tsx
index 0ebc163a..9c7dd7c3 100644
--- a/src/routes/login/OidcLoginButton.tsx
+++ b/src/routes/login/OidcLoginButton.tsx
@@ -8,6 +8,7 @@ import Modal from "@/components/Modal";
 import StyledButton from "@/components/styled/Button";
 import Button from "@/components/styled/Button";
 import StyledModal from "@/components/styled/Modal";
+import IconIODC from "@/assets/icons/oidc/icon.svg";
 import OidcLoginEntry from "./OidcLoginEntry";
 
 interface IProps {
@@ -22,11 +23,12 @@ const OidcLoginButton: FC<IProps> = ({ issuers, type = "login" }) => {
   return (
     <>
       <Button
-        className="flex ghost flex-center gap-2"
+        className="flex ghost flex-center gap-2 relative"
         onClick={() => {
           setModal(true);
         }}
       >
+        <IconIODC className="w-6 h-6 absolute left-4" />
         {type == "login" ? t("login.oidc") : t("reg.oidc")}
       </Button>
       {modal && (