diff --git a/packages/website/public/assets/images/tankopedia/visualizers/reload/shell.png b/packages/website/public/assets/images/tankopedia/visualizers/reload/shell.png
new file mode 100644
index 000000000..57a555a2f
Binary files /dev/null and b/packages/website/public/assets/images/tankopedia/visualizers/reload/shell.png differ
diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/Shell.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/Shell.tsx
index e345c3f89..512cdd5df 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/Shell.tsx
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/Shell.tsx
@@ -4,6 +4,7 @@ import { useEffect, useRef } from 'react';
 import { reloadUpdate, type ReloadUpdateData } from '..';
 import { Var } from '../../../../../../../../core/radix/var';
 import type { StatsAcceptorProps } from '../../HullTraverseVisualizer';
+import { ShellBorder } from './ShellBorder';
 
 interface ShellProps {
   index: number;
@@ -33,29 +34,58 @@ export function Shell({ index, stats }: ShellProps & StatsAcceptorProps) {
         position: 'absolute',
         top: '50%',
         left: '50%',
-        transform: `translate(-50%, -50%) rotate(${(index - Math.floor(stats.shells / 2)) * 10}deg)`,
+        transform: `translate(-50%, -50%) rotate(${7 * (index - (stats.shells - 1) / 2) + 135}deg)`,
       }}
     >
-      <Flex
-        justify="end"
+      <Box
+        left="50%"
+        position="absolute"
+        ml="calc(25% + 2.5rem)"
+        width="1.25rem"
+        height="1.25rem"
         style={{
-          position: 'absolute',
-          left: '50%',
-          marginLeft: 'calc(25% + 2rem)',
-          width: '1.25rem',
-          height: '0.5rem',
-          borderRadius: '0.25rem',
-          overflow: 'hidden',
-          outline: `1px solid ${Var('jade-6')}`,
+          transform: 'translate(-50%, -50%)',
         }}
       >
-        <Box
-          ref={bar}
+        <ShellBorder
+          width="100%"
+          height="100%"
           style={{
-            background: Var('jade-9'),
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            color: Var('jade-8'),
           }}
         />
-      </Flex>
+
+        <Flex
+          position="absolute"
+          top="0"
+          left="0"
+          width="100%"
+          height="100%"
+          justify="end"
+          style={{
+            borderRadius: '0.25rem',
+            overflow: 'hidden',
+            maskImage:
+              'url(/assets/images/tankopedia/visualizers/reload/shell.png)',
+            // maskComposite: 'exclude',
+            maskSize: 'contain',
+            maskRepeat: 'no-repeat',
+            maskPosition: 'center',
+            // background: 'red',
+          }}
+        >
+          <Box
+            ref={bar}
+            style={{
+              width: '100%',
+              background: Var('jade-9'),
+            }}
+          />
+        </Flex>
+      </Box>
     </Box>
   );
 }
diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/ShellBorder.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/ShellBorder.tsx
new file mode 100644
index 000000000..6d0f6b621
--- /dev/null
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/ShellBorder.tsx
@@ -0,0 +1,21 @@
+import type { ComponentProps } from 'react';
+
+export function ShellBorder(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="159"
+      height="60"
+      viewBox="0 0 159 60"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M149.917 7.5L151.5 9.91406V50.085L149.917 52.5H134.674C133.504 51.6657 132.116 51.1813 130.673 51.1133L130.319 51.1045H93.085C91.8919 51.1046 90.7173 51.3895 89.6582 51.9336L89.4482 52.0459L88.6494 52.4883C48.806 52.0806 22.9344 39.046 11.1416 30C22.9344 20.954 48.806 7.91846 88.6494 7.51074L89.4482 7.9541C90.5611 8.57122 91.8125 8.89543 93.085 8.89551H130.319C131.888 8.89551 133.409 8.40216 134.674 7.5H149.917Z"
+        stroke="currentColor"
+        stroke-width="15"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/Target.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/Target.tsx
new file mode 100644
index 000000000..8e3b76920
--- /dev/null
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/Target.tsx
@@ -0,0 +1,22 @@
+import { Box } from '@radix-ui/themes';
+
+export function Target() {
+  return (
+    <Box
+      style={{
+        background:
+          'url(/assets/images/tankopedia/visualizers/reload/background.jpg)',
+        backgroundSize: '25rem',
+        backgroundPosition: 'center',
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+        filter: 'blur(0.2rem) contrast(1.2) brightness(0.5) saturate(0.8)',
+      }}
+    />
+  );
+}
diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/index.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/index.tsx
index fb104c7d9..ec1e73b54 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/index.tsx
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/index.tsx
@@ -5,6 +5,7 @@ import { useEffect, useRef } from 'react';
 import { Var } from '../../../../../../../core/radix/var';
 import type { StatsAcceptorProps } from '../HullTraverseVisualizer';
 import { Shell } from './components/Shell';
+import { Target } from './components/Target';
 
 export interface ReloadUpdateData {
   reload: number;
@@ -15,8 +16,8 @@ export const reloadUpdate = new Quicklime<ReloadUpdateData>();
 
 export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
   const reloadCircle = useRef<HTMLDivElement>(null);
-
-  const size = `${stats.shells === 1 ? 66 : 58}%`;
+  const reloadCore = useRef<HTMLDivElement>(null);
+  const reloadGlow = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     let cancel = false;
@@ -46,11 +47,14 @@ export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
     const handleReloadUpdate: QuicklimeCallback<ReloadUpdateData> = ({
       data,
     }) => {
-      if (!reloadCircle.current) return;
+      if (!reloadCircle.current || !reloadCore.current || !reloadGlow.current)
+        return;
 
       const reloadAngle = data.reload * 2 * Math.PI;
 
-      reloadCircle.current.style.background = `conic-gradient(${Var('amber-9')} 0 ${reloadAngle}rad, ${Var('red-7')} ${reloadAngle}rad)`;
+      reloadCircle.current.style.background = `conic-gradient(${Var('amber-9')} 0 ${reloadAngle}rad, ${Var('orange-7')} ${reloadAngle}rad)`;
+      reloadCore.current.style.background = `conic-gradient(${Var('amber-4')} 0 ${reloadAngle}rad, ${Var('orange-3')} ${reloadAngle}rad)`;
+      reloadGlow.current.style.background = `conic-gradient(${Var('amber-9')} 0 ${reloadAngle}rad, transparent ${reloadAngle}rad)`;
     };
 
     reloadUpdate.on(handleReloadUpdate);
@@ -63,19 +67,7 @@ export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
   return (
     <Card variant="classic" mb="6" style={{ aspectRatio: '1 / 1' }}>
       <Box position="absolute" top="0" left="0" width="100%" height="100%">
-        <img
-          src="/assets/images/tankopedia/visualizers/reload/background.jpg"
-          style={{
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            width: '100%',
-            height: '100%',
-            objectFit: 'cover',
-            filter: 'blur(0.2rem) contrast(1.2) brightness(0.5) saturate(0.8)',
-          }}
-        />
+        <Target />
 
         <Box
           position="absolute"
@@ -94,17 +86,59 @@ export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
         position="absolute"
         top="50%"
         left="50%"
-        width={size}
-        height={size}
+        width="12rem"
+        height="12rem"
+        className="reload"
+        ref={reloadGlow}
+        style={{
+          transform: 'translate(-50%, -50%)',
+          borderRadius: '50%',
+          background: Var('red-7'),
+          filter: 'blur(0.5rem)',
+        }}
+      />
+
+      <Box
+        p="1"
+        position="absolute"
+        top="50%"
+        left="50%"
+        width="12rem"
+        height="12rem"
         className="reload"
         ref={reloadCircle}
         style={{
           transform: 'translate(-50%, -50%)',
           borderRadius: '50%',
           background: Var('red-7'),
-          maskImage: `radial-gradient(transparent 65%, black 68%)`,
         }}
-      />
+      >
+        <Box
+          width="100%"
+          height="100%"
+          style={{
+            borderRadius: '50%',
+            background: 'black',
+            overflow: 'hidden',
+          }}
+          position="relative"
+        >
+          <Target />
+
+          <Box
+            ref={reloadCore}
+            width="100%"
+            height="100%"
+            position="absolute"
+            top="0"
+            left="0"
+            style={{
+              borderRadius: '50%',
+              maskImage: 'radial-gradient(transparent 25%, black 100%)',
+            }}
+          />
+        </Box>
+      </Box>
 
       <img
         src="/assets/images/tankopedia/visualizers/reload/caret.png"