diff --git a/src/components/Card.module.scss b/src/components/Card.module.scss
index 4f9e9fbd7b7..11ae16d9119 100644
--- a/src/components/Card.module.scss
+++ b/src/components/Card.module.scss
@@ -76,6 +76,13 @@
       opacity: 1;
     }
   }
+
+  border: 2px solid transparent;
+
+  &:focus {
+    border: 2px solid var(--focus-outline-color-light);
+    outline: none;
+  }
 }
 
 .shape {
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 26845a4d69e..96785880074 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -18,7 +18,13 @@ export type CardItem = {
   buttonIcon?: 'arrow-right' | 'external-arrow'
 }
 
-export default function Card({ title, href, description, theme, buttonIcon = "arrow-right" }: CardItem) {
+export default function Card({
+  title,
+  href,
+  description,
+  theme,
+  buttonIcon = 'arrow-right',
+}: CardItem) {
   const [isHovered, setIsHovered] = useState(false)
 
   return (
@@ -47,7 +53,7 @@ export default function Card({ title, href, description, theme, buttonIcon = "ar
 
               {href && (
                 <Button
-                  as="button"
+                  as="div"
                   label={false}
                   type={theme === 'dark' ? 'secondary' : 'primary'}
                   icon={buttonIcon}
diff --git a/src/components/Input/input.module.scss b/src/components/Input/input.module.scss
index 4e4be867042..b172d3a0e52 100644
--- a/src/components/Input/input.module.scss
+++ b/src/components/Input/input.module.scss
@@ -35,7 +35,6 @@
     overflow: hidden;
     color: var(--input-color);
     font-style: normal;
-    outline: none;
     width: 100%;
     margin-bottom: 4px;
 
diff --git a/src/components/elements/buttons/button/button.module.scss b/src/components/elements/buttons/button/button.module.scss
index 0abc1112554..1db0c91a2e9 100644
--- a/src/components/elements/buttons/button/button.module.scss
+++ b/src/components/elements/buttons/button/button.module.scss
@@ -123,6 +123,13 @@
 
   mask-image: radial-gradient(white, black);
 
+  border: 2px solid transparent;
+
+  &:focus {
+    border: 2px solid var(--focus-outline-color-light);
+    outline: none;
+  }
+
   &:before {
     content: '';
 
diff --git a/src/components/elements/buttons/button/index.tsx b/src/components/elements/buttons/button/index.tsx
index ac155904d87..7088b7aa307 100644
--- a/src/components/elements/buttons/button/index.tsx
+++ b/src/components/elements/buttons/button/index.tsx
@@ -21,7 +21,7 @@ interface ButtonProps {
   href?: string
   onClick?: () => void
   disabled?: boolean
-  as?: 'link' | 'a' | 'button'
+  as?: 'link' | 'a' | 'button' | 'div'
   external?: boolean
   rel?: string | boolean
   download?: boolean | string
@@ -115,20 +115,40 @@ const Button = forwardRef<HTMLElement, ButtonProps>(
       textTransform !== 'none' && textTransform
     )
 
+    const isLinkElement = asValue === 'link' || asValue === 'a'
+    const isButtonElement = asValue === 'button'
+
+    const elementProps: Record<string, unknown> = {
+      ref: ref as React.Ref<unknown>,
+      'aria-label': ariaLabel,
+      onClick,
+      className: buttonClassNames,
+      style,
+      ...rest,
+    }
+
+    if (isLinkElement) {
+      elementProps.href = href
+      if (external) {
+        elementProps.target = '_blank'
+        elementProps.rel = rel || 'noreferrer noopener'
+      } else if (rel) {
+        elementProps.rel = rel
+      }
+      if (download) {
+        elementProps.download = download
+      }
+    }
+
+    if (isButtonElement) {
+      elementProps.disabled = disabled
+      if (buttonType) {
+        elementProps.type = buttonType
+      }
+    }
+
     return (
-      <Component
-        ref={ref as React.Ref<any>}
-        href={asValue !== 'button' ? href : null}
-        target={asValue !== 'button' && external ? '_blank' : null}
-        rel={rel ? rel : external && asValue !== 'button' ? 'noreferrer noopener' : null}
-        aria-label={ariaLabel}
-        onClick={onClick}
-        className={buttonClassNames}
-        disabled={disabled}
-        download={as !== 'button' && download ? download : null}
-        style={style}
-        {...(asValue === 'button' && { type: buttonType })}
-        {...rest}>
+      <Component {...elementProps}>
         <span className={clsx(styles['button-holder'], labelBig && styles['label-big'])}>
           {children}
           {hasSpinner && <Spinner />}
diff --git a/src/scss/app.scss b/src/scss/app.scss
index d942f3f2c83..2ffcb41b4e9 100644
--- a/src/scss/app.scss
+++ b/src/scss/app.scss
@@ -1,4 +1,5 @@
 @import 'commons/reset';
+@import 'commons/focus';
 @import 'commons/typescale';
 @import 'commons/utils';
 @import 'commons/animations';
diff --git a/src/scss/commons/_focus.scss b/src/scss/commons/_focus.scss
new file mode 100644
index 00000000000..3d5453978a9
--- /dev/null
+++ b/src/scss/commons/_focus.scss
@@ -0,0 +1,8 @@
+:root {
+  --focus-outline-color-light: #0066cc;
+  --focus-outline-color-dark: #4da6ff;
+}
+
+[data-theme='dark'] {
+  --focus-outline-color-light: var(--focus-outline-color-dark);
+}
diff --git a/src/scss/commons/_reset.scss b/src/scss/commons/_reset.scss
index fde1001f9ff..025d918225f 100644
--- a/src/scss/commons/_reset.scss
+++ b/src/scss/commons/_reset.scss
@@ -152,12 +152,6 @@ button {
   background: none;
 }
 
-a,
-li,
-button {
-  outline-color: var(--general-white);
-}
-
 input,
 select,
 button,
@@ -168,7 +162,6 @@ textarea {
 
   appearance: none;
   border: none;
-  outline: none;
 }
 
 input[type='submit'] {