diff --git a/src/app/(frontend)/[slug]/page.tsx b/src/app/(frontend)/[slug]/page.tsx
index 9082a75..31a5789 100644
--- a/src/app/(frontend)/[slug]/page.tsx
+++ b/src/app/(frontend)/[slug]/page.tsx
@@ -50,7 +50,6 @@ export default async function Page({ params: paramsPromise }: Args) {
   }
 
   const { hero, layout } = page
-  console.log('PAGE SLUG:', decodedSlug, 'LAYOUT:', JSON.stringify(layout))
 
   // Landing page layout — canvas + hero section with border lines
   if (LANDING_PAGE_SLUGS.includes(decodedSlug)) {
diff --git a/src/blocks/Skills/Component.tsx b/src/blocks/Skills/Component.tsx
index b860876..7748623 100644
--- a/src/blocks/Skills/Component.tsx
+++ b/src/blocks/Skills/Component.tsx
@@ -1,88 +1,77 @@
-'use client'
-
 import React from 'react'
 import { cn } from '@/utilities/ui'
-import { InfiniteSlider } from '@/components/ui/infinite-slider'
 
-const LOGOS = [
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/aftereffects-plain.svg', alt: 'aftereffects' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/almalinux-original.svg', alt: 'almalinux' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/amazonwebservices-original-wordmark.svg', alt: 'amazonwebservices' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/android-plain-wordmark.svg', alt: 'android' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/angularjs-plain-wordmark.svg', alt: 'angularjs' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/apache-line-wordmark.svg', alt: 'apache' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/apple-original.svg', alt: 'apple' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/azure-original-wordmark.svg', alt: 'azure' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/blender-original.svg', alt: 'blender' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/bootstrap-plain-wordmark.svg', alt: 'bootstrap' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/cloudflare-original-wordmark.svg', alt: 'cloudflare' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/cpanel-original-wordmark.svg', alt: 'cpanel' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/docker-plain-wordmark.svg', alt: 'docker' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/drupal-plain-wordmark.svg', alt: 'drupal' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/eslint-plain-wordmark.svg', alt: 'eslint' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/expo-original-wordmark.svg', alt: 'expo' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/figma-original.svg', alt: 'figma' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/flutter-original.svg', alt: 'flutter' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/forgejo-original.svg', alt: 'forgejo' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/fusion-original.svg', alt: 'fusion' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/gimp-original.svg', alt: 'gimp' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/github-original-wordmark.svg', alt: 'github' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/gitlab-plain-wordmark.svg', alt: 'gitlab' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/googlecloud-original-wordmark.svg', alt: 'googlecloud' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/html5-original-wordmark.svg', alt: 'html5' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/illustrator-original.svg', alt: 'illustrator' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/inkscape-plain-wordmark.svg', alt: 'inkscape' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/javascript-original.svg', alt: 'javascript' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/jira-original-wordmark.svg', alt: 'jira' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/jquery-plain-wordmark.svg', alt: 'jquery' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/kalilinux-original-wordmark.svg', alt: 'kalilinux' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/linux-original.svg', alt: 'linux' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/magento-plain-wordmark.svg', alt: 'magento' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/mongodb-original-wordmark.svg', alt: 'mongodb' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/nextjs-original-wordmark.svg', alt: 'nextjs' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/nginx-original.svg', alt: 'nginx' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/nodejs-original-wordmark.svg', alt: 'nodejs' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/opencl-original.svg', alt: 'opencl' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/photoshop-original.svg', alt: 'photoshop' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/php-original.svg', alt: 'php' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/premierepro-original.svg', alt: 'premierepro' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/prometheus-plain-wordmark.svg', alt: 'prometheus' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/proxmox-original-wordmark.svg', alt: 'proxmox' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/python-original-wordmark.svg', alt: 'python' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/rails-plain-wordmark.svg', alt: 'rails' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/reactnative-original-wordmark.svg', alt: 'reactnative' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/reactnavigation-original.svg', alt: 'reactnavigation' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/slack-original-wordmark.svg', alt: 'slack' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/swift-original-wordmark.svg', alt: 'swift' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/typescript-original.svg', alt: 'typescript' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/web3js-original.svg', alt: 'web3js' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/wordpress-original.svg', alt: 'wordpress' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/xcode-original.svg', alt: 'xcode' },
-  { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/zend-original-wordmark.svg', alt: 'zend' },
-]
-
-type SkillsMarqueeBlockProps = {
-  heading?: string
+type SkillCategory = {
+  title: string
+  icon: string
+  tags: { tag: string }[]
 }
 
-export function SkillsMarqueeBlock({ heading }: SkillsMarqueeBlockProps) {
+type SkillsBlockProps = {
+  heading?: string
+  keySkills?: { skill: string }[]
+  categories?: SkillCategory[]
+}
+
+export function SkillsBlock({ heading, keySkills, categories }: SkillsBlockProps) {
   return (
-    <section className="relative border-t border-foreground/10 py-8">
-      <p className="mb-6 text-center text-xs tracking-widest uppercase px-6 text-foreground/40">
-        {heading || 'Skills'}
-      </p>
-      <div className="[mask-image:linear-gradient(to_right,transparent,black,transparent)]">
-        <InfiniteSlider gap={48} duration={120}>
-          {LOGOS.map((l) => (
-            <img
-              key={l.alt}
-              src={l.src}
-              alt={l.alt}
-              className="h-14 w-auto flex-shrink-0 pointer-events-none select-none grayscale opacity-25 dark:opacity-40 dark:invert"
-            />
+    <section className="w-full max-w-5xl mx-auto px-6 py-16">
+      {heading && (
+        <p className="text-center text-xs tracking-widest uppercase text-foreground/30 mb-6">
+          {heading}
+        </p>
+      )}
+
+      {Array.isArray(keySkills) && keySkills.length > 0 && (
+        <div className="flex justify-center gap-3 flex-wrap mb-12">
+          {keySkills.map(({ skill }, i) => (
+            <span
+              key={i}
+              className="text-xs text-foreground/70 border border-foreground/25 rounded-full px-4 py-1.5"
+            >
+              {skill}
+            </span>
           ))}
-        </InfiniteSlider>
-      </div>
+        </div>
+      )}
+
+      {Array.isArray(categories) && categories.length > 0 && (
+        <div
+          className="border border-foreground/8 rounded-xl overflow-hidden"
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(3, 1fr)',
+          }}
+        >
+          {categories.map((cat, i) => {
+            const isLastRow = i >= categories.length - (categories.length % 3 || 3)
+            const isLastCol = (i + 1) % 3 === 0
+            return (
+              <div
+                key={i}
+                className={cn(
+                  'p-6 flex flex-col gap-3',
+                  !isLastCol && 'border-r border-foreground/8',
+                  !isLastRow && 'border-b border-foreground/8',
+                )}
+              >
+                <i className={`ti ${cat.icon} text-foreground/40`} style={{ fontSize: 20 }} aria-hidden="true" />
+                <p className="text-sm font-medium text-foreground/85">{cat.title}</p>
+                <div className="flex flex-wrap gap-1.5">
+                  {Array.isArray(cat.tags) && cat.tags.map(({ tag }, j) => (
+                    <span
+                      key={j}
+                      className="text-xs text-foreground/35 border border-foreground/10 rounded-full px-2.5 py-0.5"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      )}
     </section>
   )
 }
\ No newline at end of file