diff --git a/website/src/components/Feature.tsx b/website/src/components/Feature.tsx
index f2ed02c..0f6b5e4 100644
--- a/website/src/components/Feature.tsx
+++ b/website/src/components/Feature.tsx
@@ -1,32 +1,38 @@
-import styles from './Feature.module.css';
-import { CodeExample } from './CodeExample';
+'use client';
+
+import { ReactNode } from 'react';
+import styles from '../app/page.module.css';
+import dynamic from 'next/dynamic';
+
+const CodeExample = dynamic(
+    () => import('./CodeExample'),
+    { ssr: false }
+);
 
 type FeatureProps = {
-  title: string;
-  description: React.ReactNode;
-  code?: string;
-  codeHeight?: number;
-  reversed?: boolean;
-};
+    title: string;
+    description: ReactNode;
+    code: string;
+    codeHeight?: number;
+    reversed?: boolean;
+}
 
 export function Feature({ title, description, code, codeHeight, reversed = false }: FeatureProps) {
-  const content = (
-    <>
-      <div className={styles.text}>
-        <h2>{title}</h2>
-        <div className={styles.description}>{description}</div>
-      </div>
-      {code && (
-        <div className={styles.code}>
-          <CodeExample code={code} height={codeHeight} noScroll={true} />
-        </div>
-      )}
-    </>
-  );
+    const content = (
+        <>
+            <div className={styles.featureText}>
+                <h2>{title}</h2>
+                {description}
+            </div>
+            <div className={styles.featureCode}>
+                <CodeExample code={code} height={codeHeight} noScroll={true} />
+            </div>
+        </>
+    );
 
-  return (
-    <div className={`${styles.feature} ${reversed ? styles.reversed : ''}`}>
-      {content}
-    </div>
-  );
+    return (
+        <div className={styles.featureContainer}>
+            {reversed ? content : content}
+        </div>
+    );
 }
diff --git a/website/src/components/Logo.tsx b/website/src/components/Logo.tsx
index a0f0134..06e3b2b 100644
--- a/website/src/components/Logo.tsx
+++ b/website/src/components/Logo.tsx
@@ -1,15 +1,17 @@
-import styles from './Logo.module.css';
+'use client';
+
+import styles from '../app/page.module.css';
 
 type LogoProps = {
-  size?: 'small' | 'large';
-  showImage?: boolean;
-};
+    size?: 'small' | 'large';
+    showImage?: boolean;
+}
 
 export function Logo({ size = 'small', showImage = true }: LogoProps) {
-  return (
-    <div className={`${styles.logo} ${styles[size]}`}>
-      {showImage && <img src="/unicord.png" alt="Unicord logo" />}
-      <div><span className={styles.highlight}>uni</span>cord</div>
-    </div>
-  );
+    return (
+        <div className={styles.logoMark}>
+            {showImage && <img src="/unicord.png" alt="Unicord logo" />}
+            <div><span className={styles.logoMarkSpan}>uni</span>cord</div>
+        </div>
+    );
 }
diff --git a/website/src/components/PackageManager.tsx b/website/src/components/PackageManager.tsx
index 42434f5..c81c396 100644
--- a/website/src/components/PackageManager.tsx
+++ b/website/src/components/PackageManager.tsx
@@ -1,44 +1,40 @@
 'use client';
 
 import { useState } from 'react';
-import styles from './PackageManager.module.css';
+import styles from '../app/page.module.css';
 
-const PACKAGE_MANAGERS = ['npm', 'yarn', 'pnpm', 'bun'] as const;
-type PackageManager = typeof PACKAGE_MANAGERS[number];
+const PACKAGE_MANAGERS = {
+    npm: 'npm install unicord',
+    yarn: 'yarn add unicord',
+    pnpm: 'pnpm add unicord',
+    bun: 'bun add unicord'
+} as const;
+
+type PackageManagerType = keyof typeof PACKAGE_MANAGERS;
 
 export function PackageManager() {
-    const [activeTab, setActiveTab] = useState<PackageManager>('npm');
-
-    const getInstallCommand = (pm: PackageManager) => {
-        const commands = {
-            npm: 'npm install unicord',
-            yarn: 'yarn add unicord',
-            pnpm: 'pnpm add unicord',
-            bun: 'bun add unicord'
-        };
-        return commands[pm];
-    };
+    const [activeTab, setActiveTab] = useState<PackageManagerType>('npm');
 
     return (
-        <div className={styles.container}>
-            <div className={styles.tabs}>
-                {PACKAGE_MANAGERS.map(pm => (
+        <div>
+            <div className={styles.packageManagerTabs}>
+                {(Object.keys(PACKAGE_MANAGERS) as PackageManagerType[]).map(manager => (
                     <button 
-                        key={pm}
-                        className={`${styles.tab} ${activeTab === pm ? styles.active : ''}`}
-                        onClick={() => setActiveTab(pm)}
+                        key={manager}
+                        className={`${styles.tabButton} ${activeTab === manager ? styles.activeTab : ''}`}
+                        onClick={() => setActiveTab(manager)}
                     >
-                        {pm}
+                        {manager}
                     </button>
                 ))}
             </div>
-            <div className={styles.commandWrapper}>
-                <code className={styles.command}>
-                    {getInstallCommand(activeTab)}
+            <div className={styles.installCommandWrapper}>
+                <code className={styles.installCommand}>
+                    {PACKAGE_MANAGERS[activeTab]}
                 </code>
                 <button 
                     className={styles.copyButton}
-                    onClick={() => navigator.clipboard.writeText(getInstallCommand(activeTab))}
+                    onClick={() => navigator.clipboard.writeText(PACKAGE_MANAGERS[activeTab])}
                 >
                     Copy
                 </button>
diff --git a/website/src/components/Section.tsx b/website/src/components/Section.tsx
index 782b118..1131e48 100644
--- a/website/src/components/Section.tsx
+++ b/website/src/components/Section.tsx
@@ -1,15 +1,21 @@
-import styles from './Section.module.css';
+'use client';
+
+import { ReactNode } from 'react';
+import styles from '../app/page.module.css';
 
 type SectionProps = {
-  children: React.ReactNode;
-  background?: 'light' | 'dark';
-  className?: string;
-};
+    children: ReactNode;
+    background?: 'light' | 'dark';
+    className?: string;
+}
 
 export function Section({ children, background = 'light', className = '' }: SectionProps) {
-  return (
-    <section className={`${styles.section} ${styles[background]} ${className}`}>
-      {children}
-    </section>
-  );
+    return (
+        <div className={[
+            className,
+            background === 'dark' ? styles.darkSection : ''
+        ].filter(Boolean).join(' ')}>
+            {children}
+        </div>
+    );
 }