diff --git a/src/common/component/styled/Input.js b/src/common/component/styled/Input.js
index 7317bb7b..6dbb836d 100644
--- a/src/common/component/styled/Input.js
+++ b/src/common/component/styled/Input.js
@@ -58,7 +58,7 @@ const StyledInput = styled.input`
     background-color: #f9fafb;
   }
   &::placeholder {
-    color: #78787c;
+    color: #d1d5db;
   }
   &[type="password"] {
     padding-right: 30px;
diff --git a/src/common/component/styled/Menu.js b/src/common/component/styled/Menu.js
index 06c508e5..3037bfac 100644
--- a/src/common/component/styled/Menu.js
+++ b/src/common/component/styled/Menu.js
@@ -23,7 +23,6 @@ const StyledMenu = styled.ul`
     font-size: 14px;
     line-height: 20px;
     color: #616161;
-
     .icon {
       width: 20px;
       height: 20px;
@@ -65,6 +64,14 @@ const StyledMenu = styled.ul`
         color: #fff;
       }
     }
+    &[data-disabled="true"] {
+      color: #a4a8b3;
+      .icon {
+        path {
+          fill: #a4a8b3;
+        }
+      }
+    }
   }
 `;
 
diff --git a/src/common/component/styled/Select.js b/src/common/component/styled/Select.js
new file mode 100644
index 00000000..3a599591
--- /dev/null
+++ b/src/common/component/styled/Select.js
@@ -0,0 +1,72 @@
+import { useState } from "react";
+import styled from "styled-components";
+import Tippy from "@tippyjs/react";
+import IconSelect from "../../../assets/icons/check.sign.svg";
+import IconArrow from "../../../assets/icons/arrow.down.svg";
+import Menu from "./Menu";
+const Styled = styled.div`
+  user-select: none;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  .txt {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+    color: #475467;
+    min-width: 76px;
+  }
+  > .icon {
+    width: 20px !important;
+    height: 20px !important;
+  }
+`;
+export default function Select({ options = [], updateSelect = null }) {
+  const [optionsVisible, setOptionsVisible] = useState(false);
+  const [curr, setCurr] = useState(undefined);
+  const toggleVisible = () => {
+    setOptionsVisible((prev) => !prev);
+  };
+  const handleSelect = (data) => {
+    setCurr(data);
+    toggleVisible();
+    if (updateSelect) {
+      updateSelect(data);
+    }
+  };
+  return (
+    <Tippy
+      trigger="click"
+      visible={optionsVisible}
+      placement="bottom"
+      interactive
+      content={
+        <Menu>
+          {options.map(({ title, value, selected, underline }) => {
+            return (
+              <li
+                onClick={
+                  selected ? null : handleSelect.bind(null, { title, value })
+                }
+                className={`item sb ${underline ? "underline" : ""}`}
+                data-disabled={selected}
+                key={value}
+              >
+                {title}
+                {selected && <IconSelect className="icon" />}
+              </li>
+            );
+          })}
+        </Menu>
+      }
+    >
+      <Styled onClick={toggleVisible}>
+        <span className="txt">{curr?.title || `Select`}</span>
+        <IconArrow className="icon" />
+      </Styled>
+    </Tippy>
+  );
+}
diff --git a/src/routes/setting/config/IssuerList.js b/src/routes/setting/config/IssuerList.js
deleted file mode 100644
index c241d169..00000000
--- a/src/routes/setting/config/IssuerList.js
+++ /dev/null
@@ -1,68 +0,0 @@
-// import React from 'react'
-import styled from "styled-components";
-import Input from "../../../common/component/styled/Input";
-import Toggle from "../../../common/component/styled/Toggle";
-import IconPlus from "../../../assets/icons/plus.circle.svg";
-import IconMinus from "../../../assets/icons/minus.circle.svg";
-const Styled = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  .issuers {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    .issuer {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      .left {
-        display: flex;
-        align-items: center;
-        gap: 16px;
-        justify-content: space-between;
-        .remove {
-          cursor: pointer;
-        }
-        .icon {
-          width: 32px;
-          height: 32px;
-        }
-        .url {
-          width: 342px;
-        }
-      }
-    }
-  }
-  .add {
-    cursor: pointer;
-  }
-`;
-export default function IssuerList() {
-  return (
-    <Styled>
-      <ul className="issuers">
-        <li className="issuer">
-          <div className="left">
-            <IconMinus className="remove" />
-            <img
-              src="https://static.nicegoodthings.com/project/ext/webrowse.logo.png"
-              alt="logo"
-              className="icon"
-            />
-            <Input
-              prefix="https://"
-              placeholder="Issuer Domain"
-              className="url"
-            />
-          </div>
-          <div className="right">
-            <Toggle />
-          </div>
-        </li>
-      </ul>
-      <IconPlus className="add" />
-    </Styled>
-  );
-}
diff --git a/src/routes/setting/config/IssuerList/index.js b/src/routes/setting/config/IssuerList/index.js
new file mode 100644
index 00000000..e0ebd397
--- /dev/null
+++ b/src/routes/setting/config/IssuerList/index.js
@@ -0,0 +1,66 @@
+import { useState } from "react";
+import Select from "../../../../common/component/styled/Select";
+import Button from "../../../../common/component/styled/Button";
+import Input from "../../../../common/component/styled/Input";
+import Toggle from "../../../../common/component/styled/Toggle";
+import options from "./items.json";
+import Styled from "./styled";
+// import IconPlus from "../../../../assets/icons/plus.circle.svg";
+import IconMinus from "../../../../assets/icons/minus.circle.svg";
+
+export default function IssuerList({ issuers = [] }) {
+  const [select, setSelect] = useState(undefined);
+  const [newDomain, setNewDomain] = useState("");
+  const handleNewDomain = (evt) => {
+    setNewDomain(evt.target.value);
+  };
+  const disableBtn = !(newDomain || !!select?.value);
+  return (
+    <Styled>
+      <ul className="issuers">
+        {issuers.map(({ enable, favicon, domain }) => {
+          return (
+            <li key={domain} className="issuer">
+              <div className="left">
+                <IconMinus className="remove" />
+                <div className="data">
+                  <img src={favicon} alt="logo" className="icon" />
+                  <Input
+                    readOnly
+                    value={domain}
+                    prefix="https://"
+                    placeholder="Issuer Domain"
+                    className="url"
+                  />
+                </div>
+              </div>
+              <div className="right">
+                <Toggle data-checked={enable} />
+              </div>
+            </li>
+          );
+        })}
+
+        <li className="issuer add">
+          <div className="left">
+            <Select options={options} updateSelect={setSelect} />
+            <div className="data">
+              <Input
+                onChange={handleNewDomain}
+                readOnly={!!select?.value}
+                value={select?.value || newDomain}
+                prefix="https://"
+                placeholder="domain.com"
+                className="url"
+              />
+            </div>
+          </div>
+          <div className="right">
+            <Button disabled={disableBtn}>Add</Button>
+          </div>
+        </li>
+      </ul>
+      {/* <IconPlus className="add" /> */}
+    </Styled>
+  );
+}
diff --git a/src/routes/setting/config/IssuerList/items.json b/src/routes/setting/config/IssuerList/items.json
new file mode 100644
index 00000000..27577145
--- /dev/null
+++ b/src/routes/setting/config/IssuerList/items.json
@@ -0,0 +1,18 @@
+[
+  {
+    "title": "Facebook",
+    "value": "facebook.com",
+    "icon": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMiAxNkMzMiA3LjE2NDEzIDI0LjgzNTggMCAxNiAwQzcuMTY0MTMgMCAwIDcuMTY0MTMgMCAxNkMwIDIzLjk4NTMgNS44NTAxNiAzMC42MDQ5IDEzLjUwMDIgMzEuODA2N1YyMC42MjYxSDkuNDM2NjRWMTZIMTMuNTAwMlYxMi40NzQyQzEzLjUwMDIgOC40NjQ1NiAxNS44ODk4IDYuMjQ4MjkgMTkuNTQzOCA2LjI0ODI5QzIxLjI5NDMgNi4yNDgyOSAyMy4xMjU4IDYuNTYxMDIgMjMuMTI1OCA2LjU2MTAyVjEwLjQ5ODZIMjEuMTA3NUMxOS4xMjA4IDEwLjQ5ODYgMTguNDk5OCAxMS43MzE3IDE4LjQ5OTggMTIuOTk4NFYxNS45OTk5SDIyLjkzNjdMMjIuMjI4IDIwLjYyNkgxOC40OTk2VjMxLjgwNjRDMjYuMTQ5OCAzMC42MDcxIDMxLjk5OTggMjMuOTg3NiAzMS45OTk4IDE1Ljk5OTlMMzIgMTZaIiBmaWxsPSIjMTk3N0YzIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjIuMjI4IDIwLjYyNThMMjIuOTM2OSAxNS45OTk2SDE4LjQ5OTlWMTIuOTk4MkMxOC40OTk5IDExLjczMzcgMTkuMTE4NiAxMC40OTg0IDIxLjEwNzcgMTAuNDk4NEgyMy4xMjZWNi41NjA4QzIzLjEyNiA2LjU2MDggMjEuMjk0NSA2LjI0ODA1IDE5LjU0MzkgNi4yNDgwNUMxNS44ODk5IDYuMjQ4MDUgMTMuNTAwNCA4LjQ2MjE0IDEzLjUwMDQgMTIuNDczOVYxNS45OTk4SDkuNDM2NzdWMjAuNjI1OUgxMy41MDA0VjMxLjgwNjRDMTQuMzE0OSAzMS45MzQ0IDE1LjE0OTYgMzEuOTk5OCAxNi4wMDAxIDMxLjk5OThDMTYuODUwNyAzMS45OTk4IDE3LjY4NTQgMzEuOTMyMiAxOC40OTk5IDMxLjgwNjRWMjAuNjI1OUgyMi4yMjgyTDIyLjIyOCAyMC42MjU4WiIgZmlsbD0iI0ZFRkVGRSIvPgo8L3N2Zz4K",
+    "selected": true
+  },
+  {
+    "title": "Github",
+    "value": "github.com",
+    "disabled": true,
+    "underline": true
+  },
+  {
+    "title": "Custom",
+    "value": ""
+  }
+]
diff --git a/src/routes/setting/config/IssuerList/styled.js b/src/routes/setting/config/IssuerList/styled.js
new file mode 100644
index 00000000..abb8c2d7
--- /dev/null
+++ b/src/routes/setting/config/IssuerList/styled.js
@@ -0,0 +1,52 @@
+import styled from "styled-components";
+const Styled = styled.div`
+  padding: 16px 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  .issuers {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    .issuer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 40px;
+      .left {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        justify-content: space-between;
+        .remove {
+          cursor: pointer;
+        }
+        .data {
+          display: flex;
+          align-items: flex-end;
+          gap: 16px;
+          justify-content: space-between;
+          > .icon {
+            width: 32px;
+            height: 32px;
+          }
+          > .url {
+            width: 280px;
+          }
+        }
+      }
+      .right {
+        width: 56px;
+        display: flex;
+        justify-content: flex-end;
+      }
+    }
+  }
+  .add {
+    cursor: pointer;
+  }
+`;
+
+export default Styled;
diff --git a/src/routes/setting/config/Logins.js b/src/routes/setting/config/Logins.js
index 85cb245f..97e59293 100644
--- a/src/routes/setting/config/Logins.js
+++ b/src/routes/setting/config/Logins.js
@@ -117,7 +117,7 @@ export default function Logins() {
             </div>
           </div>
           <div className="row">
-            <IssuerList />
+            <IssuerList issuers={oidc} />
           </div>
         </div>
       </div>