diff --git a/directory/src/routes/path/Home.jsx b/directory/src/routes/path/Home.jsx
index 4dbf042..2e9d4a9 100644
--- a/directory/src/routes/path/Home.jsx
+++ b/directory/src/routes/path/Home.jsx
@@ -7,6 +7,7 @@ import React, {
 import PropTypes from 'prop-types';
 import {
   NavLink,
+  Link,
 } from "react-router-dom";
 import classes from '@/scss/home/Home.module.scss'
 import { useConfig } from '@/state/config';
@@ -166,28 +167,45 @@ export default function Home() {
   return (
     <section>
       {
-        officalUpdate.length === operators.length && (
+        officalUpdate.length > operators.length && (
           <section>
             <section className={classes['offical-update']}>
               <section className={classes.info}>
                 <section className={classes.content}>
                   <section className={classes.text}>{officalUpdate.length - operators.length} {i18n("new_op_wait_to_update")}</section>
-                  {officalUpdate[officalUpdate.latest].map((entry, index) => {
-                    return (
-                      <section className={classes.container} key={index}>
-                        <section className={classes.type}>
-                          <CharIcon
-                            type={entry.type}
-                            viewBox={
-                              entry.type === 'operator' ? '0 0 88.969 71.469' : '0 0 94.563 67.437'
-                            } />
-                        </section>
-                        <section className={classes.title}>
-                          {entry.codename[language]}
-                        </section>
-                      </section>
-                    )
-                  })}
+                  <section className={`${classes['styled-selection']}`}>
+                    {officalUpdate[officalUpdate.latest].map((entry, index) => {
+                      return (
+                        <Link
+                          reloadDocument
+                          to={entry.link}
+                          target='_blank'
+                          style={{
+                            color: entry.color
+                          }}
+                          key={index}
+                          >
+                          <section className={classes.content}>
+                            <section className={classes.option}>
+                              <section className={classes.outline} />
+                              <section className={`${classes.text} ${classes.container}`}>
+                                <section className={classes.type}>
+                                  <CharIcon
+                                    type={entry.type}
+                                    viewBox={
+                                      entry.type === 'operator' ? '0 0 88.969 71.469' : '0 0 94.563 67.437'
+                                    } />
+                                </section>
+                                <section className={classes.title}>
+                                  {entry.codename[language]}
+                                </section>
+                              </section>
+                            </section>
+                          </section>
+                        </Link>
+                      )
+                    })}
+                  </section>
                 </section>
 
               </section>
diff --git a/directory/src/scss/_page_base.scss b/directory/src/scss/_page_base.scss
index 942a879..e54c7a2 100644
--- a/directory/src/scss/_page_base.scss
+++ b/directory/src/scss/_page_base.scss
@@ -151,3 +151,114 @@
     }
   }
 }
+
+.styled-selection {
+    margin-bottom: 0.8rem;
+
+    .content {
+      padding: 0.8rem 0;
+      cursor: pointer;
+      transition: transform cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+
+      .option {
+        pointer-events: none;
+        position: relative;
+        transform: translate3d(0, 0, 1px);
+        font-size: 1rem;
+        padding: 0.44rem 2.25rem 0.44rem 0.63rem;
+        background-color: var(--home-item-hover-background-color);
+        background-image: repeating-linear-gradient(
+          90deg,
+          var(--home-item-background-linear-gradient-color) 0,
+          var(--home-item-background-linear-gradient-color) 1px,
+          transparent 1px,
+          transparent 4px
+        );
+        transition: transform cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+
+        .outline {
+          width: 100%;
+          height: 100%;
+          left: -6px;
+          top: -6px;
+          border: var(--home-item-outline-color) 1px dashed;
+          padding: 6px;
+
+          &:before,
+          &:after {
+            content: "";
+            display: block;
+            position: absolute;
+            left: -2px;
+            height: 2px;
+            width: 100%;
+            border-left: var(--text-color) solid 2px;
+            border-right: var(--text-color) solid 2px;
+          }
+
+          &:before {
+            top: -2px;
+          }
+
+          &:after {
+            bottom: -2px;
+          }
+        }
+
+        &:before,
+        .outline {
+          content: "";
+          display: block;
+          position: absolute;
+          z-index: -1;
+          opacity: 0;
+          visibility: hidden;
+          transition: opacity cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s,
+            visibility cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+        }
+
+        &:before {
+          right: 0;
+          top: 0;
+          width: 60%;
+          height: 100%;
+          background-image: linear-gradient(90deg, transparent, currentColor);
+        }
+
+        .tick-icon {
+          display: inline-block;
+          position: absolute;
+          z-index: 0;
+          right: 0.31rem;
+          top: 50%;
+          width: 0.5rem;
+          height: 1rem;
+          opacity: 0;
+          visibility: hidden;
+          transition: opacity cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s,
+            visibility cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+          border-right: var(--text-color) solid 0.25rem;
+          border-bottom: var(--text-color) solid 0.25rem;
+          transform: translate(-50%, -70%) rotate(45deg);
+        }
+      }
+
+      &:hover,
+      &.active {
+        transform: translate3d(6px, 0, 1px);
+
+        .option:before,
+        .option .outline {
+          opacity: 1;
+          visibility: visible;
+        }
+      }
+
+      &.active {
+        .option .tick-icon {
+          opacity: 1;
+          visibility: visible;
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/directory/src/scss/home/Home.module.scss b/directory/src/scss/home/Home.module.scss
index 1c117b7..9829b45 100644
--- a/directory/src/scss/home/Home.module.scss
+++ b/directory/src/scss/home/Home.module.scss
@@ -14,12 +14,8 @@
     margin-top: 1.25rem;
     .content {
       font-size: 1.5rem;
-      .text {
-        padding-bottom: 1rem;
-      }
     }
     .container {
-      margin-left: 2.5rem;
       .title {
         margin-left: 0.5rem;
       }