diff --git a/src/rendered/components/AppNavbar/AppNavbar.styles.ts b/src/rendered/components/AppNavbar/AppNavbar.styles.ts
index 04aff5f..2eef675 100644
--- a/src/rendered/components/AppNavbar/AppNavbar.styles.ts
+++ b/src/rendered/components/AppNavbar/AppNavbar.styles.ts
@@ -24,7 +24,7 @@ export const LeftGroup = styled(Navbar.Group)`
 export const Title = styled.div`
   -webkit-app-region: drag;
   margin-left: 5px;
-  font-size: 20px;
+  font-size: 18px;
   user-select: none;
   pointer-events: none;
 
diff --git a/src/rendered/components/AppNavbar/AppNavbar.tsx b/src/rendered/components/AppNavbar/AppNavbar.tsx
index e9e197e..21a388c 100644
--- a/src/rendered/components/AppNavbar/AppNavbar.tsx
+++ b/src/rendered/components/AppNavbar/AppNavbar.tsx
@@ -8,6 +8,7 @@ import { useProjects } from 'rendered/hooks/useProjects';
 
 import { LeftGroup, Logo, RightGroup, StyledNavbar, Shadow, ShadowContainer, Title } from './AppNavbar.styles';
 import { useModal } from 'rendered/hooks/useModal';
+import { ShinyText } from '../ShinyText';
 
 export const AppNavbar = () => {
   const { themeSource, toggleDarkMode } = useDarkMode();
@@ -39,7 +40,9 @@ export const AppNavbar = () => {
           <Shadow />
         </ShadowContainer>
 
-        <Title>Devkitty</Title>
+        <Title>
+          <ShinyText text="devkitty" />
+        </Title>
       </LeftGroup>
 
       <RightGroup align="right">
diff --git a/src/rendered/components/ShinyText/ShinyText.styles.ts b/src/rendered/components/ShinyText/ShinyText.styles.ts
new file mode 100644
index 0000000..f7cb3d4
--- /dev/null
+++ b/src/rendered/components/ShinyText/ShinyText.styles.ts
@@ -0,0 +1,30 @@
+import styled, { keyframes } from 'styled-components';
+
+const shine = keyframes`
+  0% {
+    background-position: 100%;
+  }
+  100% {
+    background-position: -100%;
+  }
+`;
+
+export const Root = styled.span<{ speed: number }>`
+  color: #b5b5b5a4;
+  display: inline-block;
+  background: linear-gradient(
+    120deg,
+    rgba(255, 255, 255, 0) 40%,
+    rgba(255, 255, 255, 0.8) 50%,
+    rgba(255, 255, 255, 0) 60%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  animation: ${shine} 5s linear infinite;
+  animation-duration: ${({ speed }) => `${speed}s`};
+
+  @media (prefers-color-scheme: light) {
+    display: none;
+  }
+`;
diff --git a/src/rendered/components/ShinyText/ShinyText.tsx b/src/rendered/components/ShinyText/ShinyText.tsx
new file mode 100644
index 0000000..f21e097
--- /dev/null
+++ b/src/rendered/components/ShinyText/ShinyText.tsx
@@ -0,0 +1,17 @@
+import type { FC } from 'react';
+import { Root } from './ShinyText.styles';
+
+type Props = {
+  text: string;
+  speed?: number;
+  className?: string;
+};
+
+export const ShinyText: FC<Props> = ({ text, speed = 5, className }) => (
+  <Root
+    speed={speed}
+    className={className}
+  >
+    {text}
+  </Root>
+);
diff --git a/src/rendered/components/ShinyText/index.ts b/src/rendered/components/ShinyText/index.ts
new file mode 100644
index 0000000..3799190
--- /dev/null
+++ b/src/rendered/components/ShinyText/index.ts
@@ -0,0 +1 @@
+export { ShinyText } from './ShinyText';