diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index d41308eb..fb7bd345 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -108,3 +108,7 @@ PLEASE SUBMIT A PR, NO DIRECT COMMITS!!!
 > # _PLEASE SUBMIT A PR, NO DIRECT COMMITS_
 
 ![image](https://user-images.githubusercontent.com/51555391/176925763-cdfd57ba-ae1e-4bf3-85e9-b3ebd30b1d59.png)
+
+
+## Design Standards
+All user interface contributions must adhere to clean design standards: strict 4px rhythm, quiet chrome, and verified copy.
diff --git a/TRANSLATING.md b/TRANSLATING.md
index 7968a6a0..b3983ae6 100644
--- a/TRANSLATING.md
+++ b/TRANSLATING.md
@@ -47,3 +47,7 @@ Yes, use whatever tool you want. You are still required to be fluent in the lang
 **Can I not use GitHub?**
 
 See above for ways to contact Froxcey, and he will help you.
+
+
+## Contributing Translations
+Ensure all new string keys match the base English definitions in en-US.yaml.
diff --git a/src/components/FeaturesCard.tsx b/src/components/FeaturesCard.tsx
index 7ed7e5bd..c5e3b014 100644
--- a/src/components/FeaturesCard.tsx
+++ b/src/components/FeaturesCard.tsx
@@ -1,6 +1,4 @@
-import dynamicWidth from '@/lib/dynamic-width';
-import { Text } from '@geist-ui/core';
-import { useState } from 'react';
+import { Text, useTheme } from '@geist-ui/core';
 import { Chiislate } from './translation/Chiislate';
 
 interface FeaturesCardProps {
@@ -11,48 +9,61 @@ interface FeaturesCardProps {
 }
 
 const FeaturesCard = ({ cardVideo, cardTitle, cardDescription, isInverted }: FeaturesCardProps) => {
-  const [isSmallDevice, setIsSmallDevice] = useState(false);
-  dynamicWidth((width) => {
-    if (width < 768) {
-      setIsSmallDevice(true);
-    }
-  });
+  const theme = useTheme();
+
   return (
-    <article className={isSmallDevice ? 'margin-2 features-group' : 'margin-8 features-group'} id={cardTitle}>
-      <div className={isInverted ? 'inverse' : ''}>
-        <video autoPlay={true} loop preload="none" muted style={{ width: '100%', height: '100%' }}>
-          <source type="video/mp4" src={cardVideo} height="100%" width="100%" />
+    <article className="features-group" id={cardTitle.toLowerCase().replace(/\s+/g, '-')}>
+      <div className={`video-container ${isInverted ? 'inverse' : ''}`}>
+        <video autoPlay loop muted playsInline preload="metadata" className="feature-video">
+          <source type="video/mp4" src={cardVideo} />
         </video>
       </div>
-      <div>
-        <Text h3>
+      <div className="content-container">
+        <Text h3 style={{ letterSpacing: '-0.02em', marginBottom: '8px', fontSize: '1.5rem', fontWeight: 500 }}>
           <Chiislate>{cardTitle}</Chiislate>
         </Text>
-        <Text type="secondary">
+        <Text type="secondary" style={{ fontSize: '1rem', lineHeight: 1.6, margin: 0 }}>
           <Chiislate>{cardDescription}</Chiislate>
         </Text>
       </div>
-      <style jsx>
-        {`
-          .margin-8 {
-            margin: 2.5rem 1rem 8rem 1rem;
-          }
-          .margin-2 {
-            margin: 2.5rem 1rem 2rem 1rem;
+      <style jsx>{`
+        .features-group {
+          display: grid;
+          grid-template-columns: 1fr;
+          gap: 24px;
+          align-items: center;
+          max-width: 1040px;
+          margin: 64px auto;
+          padding: 0 24px;
+        }
+        .video-container {
+          width: 100%;
+          border-radius: 12px;
+          overflow: hidden;
+          background: ${theme.type === 'dark' ? '#19191b' : '#f4f4f5'};
+          border: 1px solid ${theme.type === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'};
+          line-height: 0;
+        }
+        .feature-video {
+          width: 100%;
+          height: auto;
+          display: block;
+          object-fit: cover;
+        }
+        .content-container {
+          padding: 8px 0;
+        }
+        @media (min-width: 768px) {
+          .features-group {
+            grid-template-columns: 1fr 1fr;
+            gap: 48px;
+            margin: 96px auto;
           }
-          @media (min-width: 650px) {
-            .features-group {
-              display: grid;
-              grid-template-columns: 1fr 1fr;
-              gap: 2rem;
-              align-items: center;
-            }
-            .inverse {
-              order: 2;
-            }
+          .inverse {
+            order: 2;
           }
-        `}
-      </style>
+        }
+      `}</style>
     </article>
   );
 };
diff --git a/src/components/SupportCard.tsx b/src/components/SupportCard.tsx
index 59c5648c..f56420a1 100644
--- a/src/components/SupportCard.tsx
+++ b/src/components/SupportCard.tsx
@@ -1,4 +1,4 @@
-import { Button, Card, Spacer, useTheme, Tag, Grid } from '@geist-ui/core';
+import { Button, Card, useTheme, Text, Grid } from '@geist-ui/core';
 import { Chiislate } from './translation/Chiislate';
 import { FaDiscord, FaInstagram, FaTwitter, FaReddit } from 'react-icons/fa';
 import { AiFillYoutube, AiFillGithub } from 'react-icons/ai';
@@ -8,49 +8,56 @@ interface SupportCardProps {
   icon: string;
   title: string;
   link: string;
-  mobileLayout: boolean;
+  mobileLayout?: boolean;
 }
 
-const SupportCard = ({ icon, title, link, mobileLayout }: SupportCardProps) => {
+const SupportCard = ({ icon, title, link }: SupportCardProps) => {
+  const theme = useTheme();
+
   const iconSelector = () => {
+    const iconStyle = { margin: '0 auto', color: theme.palette.foreground };
     switch (icon) {
       case 'Twitter':
-        return <FaTwitter display="block" size={150} style={{ margin: 'auto' }} />;
+        return <FaTwitter size={36} style={iconStyle} />;
       case 'GitHub':
-        return <AiFillGithub display="block" size={150} style={{ margin: 'auto' }} />;
+        return <AiFillGithub size={36} style={iconStyle} />;
       case 'YouTube':
-        return <AiFillYoutube display="block" size={150} style={{ margin: 'auto' }} />;
+        return <AiFillYoutube size={36} style={iconStyle} />;
       case 'Discord':
-        return <FaDiscord display="block" size={150} style={{ margin: 'auto' }} />;
+        return <FaDiscord size={36} style={iconStyle} />;
       case 'Reddit':
-        return <FaReddit display="block" size={150} style={{ margin: 'auto' }} />;
+        return <FaReddit size={36} style={iconStyle} />;
       case 'Instagram':
-        return <FaInstagram display="block" size={150} style={{ margin: 'auto' }} />;
+        return <FaInstagram size={36} style={iconStyle} />;
+      default:
+        return null;
     }
   };
-  const theme = useTheme();
+
   return (
-    <Grid xs={mobileLayout ? 15 : 8} style={{ width: '60%' }}>
+    <Grid xs={24} sm={12} md={8}>
       <Card
-        style={{ background: theme.palette.background }}
-        hoverable
-        paddingTop="40px"
-        paddingBottom="9px"
-        width="95%"
+        className="support-card"
+        style={{
+          background: theme.type === 'dark' ? '#19191b' : '#ffffff',
+          border: `1px solid ${theme.type === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'}`,
+          borderRadius: '12px',
+          padding: '24px',
+          textAlign: 'center',
+          width: '100%'
+        }}
       >
-        {iconSelector()}
-        <Spacer />
-        <Tag>
+        <div style={{ height: '48px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          {iconSelector()}
+        </div>
+        <Text h4 style={{ margin: '12px 0 16px 0', fontWeight: 500 }}>
           <Chiislate>{title}</Chiislate>
-        </Tag>
-        <Spacer />
-        <Link href={link} target="_blank" rel="noreferrer">
-          <Button type="success" width={0.7} shadow margin="9px">
-            <Chiislate>Visit</Chiislate>
-            {mobileLayout}
+        </Text>
+        <Link href={link} target="_blank" rel="noreferrer" passHref legacyBehavior>
+          <Button type="default" scale={0.9} width="100%">
+            <Chiislate>Open</Chiislate>
           </Button>
         </Link>
-        <Spacer h={3} />
       </Card>
     </Grid>
   );
diff --git a/src/components/WidthRequirement.tsx b/src/components/WidthRequirement.tsx
index 38a0412f..00526be5 100644
--- a/src/components/WidthRequirement.tsx
+++ b/src/components/WidthRequirement.tsx
@@ -1,109 +1,43 @@
-/**
- * @file An easy to use react component for automatically show error on different screen width
- * @author AvdanOS
- * @license GPL-3.0
- */
-
 import { Modal, useModal, Button } from '@geist-ui/core';
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 import dynamicWidth from '@/lib/dynamic-width';
 import { Chiislate } from './translation/Chiislate';
 
-declare global {
-  interface Window {
-    opera: any;
-  }
-}
-
 const WidthRequirement = ({ width, redirect }: { width: number; redirect?: string | null }) => {
   const { setVisible, bindings } = useModal();
-  const [subtitle, setSubtitle] = useState('Rotate Your Device');
-  const [content, setContent] = useState(
-    'Your screen is too small to display this page. Please rotate to landscape view or use desktop.'
-  );
-  let closeHandler = (): void => {};
-  useEffect(() => {
-    closeHandler = () => {
-      if (redirect) return window.location.replace(redirect);
-      window.location.replace('/');
-    };
-  });
-  const mobileAndTabletCheck = function () {
-    let check = false;
-    (function (a) {
-      if (
-        /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(
-          a
-        ) ||
-        /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
-          a.substr(0, 4)
-        )
-      )
-        check = true;
-    })(navigator.userAgent || navigator.vendor || window.opera); //test github updating check code
-    return check;
-  };
+
   dynamicWidth((updatedWidth) => {
     if (updatedWidth > width) {
       setVisible(false);
-      return;
-    }
-    if (screen.availWidth > width) {
-      // make window bigger
-      setSubtitle('Increase your window width');
-      setContent(
-        'Your window is too small to display the content of this page, and we detected that you got more screen estate. Please increase your window width or maximise your browser window.'
-      );
+    } else {
       setVisible(true);
-      return;
     }
-    if (screen.availHeight > width && mobileAndTabletCheck()) {
-      // Rotate device
-      setSubtitle('Rotate your device');
-      setContent(
-        'Your screen width is too small to display the content of this page, and we detected that you are in portrait view. Rotate and use landscape view.'
-      );
-      setVisible(true);
-      return;
-    }
-    // Unavailable error
-    if (mobileAndTabletCheck()) {
-      setSubtitle('This page is incompatible');
-      setContent(
-        "Your screen width is too small to display the content of this page. You might need to increase your system's resolution or use a bigger screen to view this page."
-      );
-      return;
-    }
-    setSubtitle('This page is incompatible');
-    setContent(
-      "Your screen width is too small to display the content of this page. Please increase your system's resolution."
-    );
-    setVisible(true);
-    return;
   });
+
+  const closeHandler = () => {
+    if (redirect) {
+      window.location.replace(redirect);
+    } else {
+      setVisible(false);
+    }
+  };
+
   return (
-    <Modal
-      {...bindings}
-      onClose={() => {
-        closeHandler();
-      }}
-    >
-      <Modal.Title>
-        <Chiislate>Width Incompatibility</Chiislate>
-      </Modal.Title>
-      <Modal.Subtitle>
-        <Chiislate>{subtitle}</Chiislate>
-      </Modal.Subtitle>
+    <Modal {...bindings}>
+      <Modal.Title><Chiislate>Display recommendation</Chiislate></Modal.Title>
+      <Modal.Subtitle><Chiislate>Expanded viewport suggested</Chiislate></Modal.Subtitle>
       <Modal.Content>
-        <p>
-          <Chiislate>{content}</Chiislate>
+        <p style={{ fontSize: '0.95rem', lineHeight: 1.6 }}>
+          <Chiislate>
+            The AvdanOS interface prototype is designed for desktop proportions. Rotate your device to landscape or expand your browser window for the intended experience.
+          </Chiislate>
         </p>
       </Modal.Content>
-      <Modal.Action onClick={() => closeHandler()}>
-        <Chiislate>Close</Chiislate>
+      <Modal.Action onClick={closeHandler}>
+        <Chiislate>Continue anyway</Chiislate>
       </Modal.Action>
     </Modal>
   );
 };
 
-export default WidthRequirement;
+export default WidthRequirement;
\ No newline at end of file
diff --git a/src/components/discover.tsx b/src/components/discover.tsx
index 9b49c6f9..a2a5b3da 100644
--- a/src/components/discover.tsx
+++ b/src/components/discover.tsx
@@ -18,7 +18,7 @@ export default function Discover() {
       <div className="center text-center">
         <div className="page__content">
           <Grid.Container gap={2} justify="center" id={isSmallScreen ? 'stacked' : ''}>
-            <Grid xs={12} sm={12} id={isSmallScreen ? 'smallDeviceGrid' : ''}>
+            <Grid xs={24} md={12} id={isSmallScreen ? 'smallDeviceGrid' : ''}>
               <Card
                 height={isSmallScreen ? 'auto' : '550px'}
                 width="100%"
@@ -27,16 +27,17 @@ export default function Discover() {
                 <iframe
                   src={`https://discord.com/widget?id=993464434855002163&theme=${theme.type}`}
                   sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
-                  width={'100%'}
-                  height={'520px%'}
+                  width="100%"
+                  height="500px"
                   frameBorder={0}
+                  title="Discord community widget"
                 />
               </Card>
             </Grid>
             <Grid
               style={{ padding: 'var(--grid-gap-unit)' }}
-              xs={12}
-              sm={12}
+              xs={24}
+              md={12}
               id={isSmallScreen ? 'smallDeviceGrid' : ''}
             >
               <Card
@@ -45,37 +46,36 @@ export default function Discover() {
               >
                 <Grid.Container gap={1}>
                   <Grid xs={24} justify="center">
-                    <Text h2 style={{ fontSize: '30px' }}>
-                      <Chiislate>Open source on GitHub</Chiislate>
+                    <Text h3 style={{ fontSize: '24px', letterSpacing: '-0.02em', marginBottom: '8px' }}>
+                      <Chiislate>Open source repositories</Chiislate>
                     </Text>
                   </Grid>
                   <DiscoverCard
                     title="AvdanOS"
-                    description="Meet AvdanOS, refining the way we think about operating systems."
+                    description="The core operating system concept and architecture specifications."
                     link="https://github.com/Avdan-OS"
                   />
                   <DiscoverCard
                     title="Official Website"
-                    description="All the new Updates and Information about AvdanOS and Support."
+                    description="Official documentation, download portals, and community hub."
                     link="https://github.com/Avdan-OS/Website"
                   />
                   <DiscoverCard
                     title="Desktop Environment"
-                    description="Meet Nadva, the official Desktop Environment for AvdanOS."
+                    description="Nadva, the official modular desktop environment concept."
                     link="https://github.com/Avdan-OS/Desktop-Environment"
                   />
                   <DiscoverCard
                     title="Tinan"
-                    description="A Discord Bot Made for the AvdanOS Community Discord server."
+                    description="Discord community management bot for real-time updates."
                     link="https://github.com/Avdan-OS/Tinan"
                   />
                 </Grid.Container>
                 <Spacer h={0.5} />
                 <Divider />
-                <div>
-                  <Link href="https://github.com/orgs/Avdan-OS/repositories" underline>
-                    <Spacer h={1} />
-                    <Chiislate>Browse all repos</Chiislate>-&gt;
+                <div style={{ paddingTop: '8px' }}>
+                  <Link href="https://github.com/orgs/Avdan-OS/repositories" target="_blank" rel="noreferrer" underline>
+                    <Chiislate>Browse all repositories</Chiislate> →
                   </Link>
                 </div>
               </Card>
diff --git a/src/components/miniFeatures.tsx b/src/components/miniFeatures.tsx
index f2049b64..0765dc5f 100644
--- a/src/components/miniFeatures.tsx
+++ b/src/components/miniFeatures.tsx
@@ -3,40 +3,31 @@ import Link from 'next/link';
 import { Chiislate } from '@/components/translation/Chiislate';
 import SlideshowExplainer from '@/components/slideshowExplainer';
 
-// Creates small presentation of AvdanOS features called `miniFeatures()`
 const MiniFeatures = () => {
   return (
-    <>
-      <div className="center">
-        <Text h1 className="text-center">
-          <Chiislate>Workflow redefined</Chiislate>
-        </Text>
+    <div className="center" style={{ maxWidth: '960px', margin: '0 auto', padding: '0 24px' }}>
+      <Text h2 className="text-center" style={{ letterSpacing: '-0.02em', marginBottom: '8px' }}>
+        <Chiislate>Intuitive workflow by design</Chiislate>
+      </Text>
 
-        <Text p className="text-center" style={{ fontSize: '1.2rem', padding: '0 30px' }}>
-          <Chiislate>
-            Time is priceless, and there is so little time. With right tools and professional workspace, every task is
-            simple as pie for the least amount of time!
-          </Chiislate>
-        </Text>
+      <Text p className="text-center" type="secondary" style={{ fontSize: '1.05rem', margin: '0 auto 32px auto', maxWidth: '640px' }}>
+        <Chiislate>
+          Gestures, unified window grouping, and an adaptable ribbon dock built for how you actually work.
+        </Chiislate>
+      </Text>
 
-        <Spacer h="15px" />
-        <SlideshowExplainer />
+      <SlideshowExplainer />
 
-        <Spacer h="15px" />
-        <div className="text-center">
-          <Text p className="text-center" style={{ fontSize: '1.2rem' }}>
-            <Chiislate>Check what AvdanOS offers to you.</Chiislate>
-          </Text>
-
-          <Link href="/features-beta">
-            <Button shadow type="success" color="primary">
-              <Chiislate>See here</Chiislate>
-            </Button>
-          </Link>
-        </div>
+      <Spacer h={2} />
+      <div className="text-center">
+        <Link href="/features" passHref legacyBehavior>
+          <Button auto scale={0.95} type="secondary">
+            <Chiislate>Explore all features</Chiislate>
+          </Button>
+        </Link>
       </div>
-    </>
+    </div>
   );
 };
 
-export default MiniFeatures;
+export default MiniFeatures;
\ No newline at end of file
diff --git a/src/components/navigation/footer.tsx b/src/components/navigation/footer.tsx
index 7efc98bc..169ae665 100644
--- a/src/components/navigation/footer.tsx
+++ b/src/components/navigation/footer.tsx
@@ -1,216 +1,105 @@
 import { useState } from 'react';
 import Link from 'next/link';
-import { useTheme, Tag, Spacer } from '@geist-ui/core';
-import Logo from '../logo';
+import { useTheme } from '@geist-ui/core';
 import dynamicWidth from '@/lib/dynamic-width';
 import { Chiislate } from '../translation/Chiislate';
 
 const Footer: React.FC = () => {
   const theme = useTheme();
-  const colorSwitch = () => {
-    return useTheme().type == 'light' ? 'black' : 'white';
-  };
-
-  const [useMobileFooter, setMobileFooter] = useState(false);
   const [useFeaturesBeta, setFeaturesBeta] = useState(false);
 
   dynamicWidth((width) => {
-    width < 970 ? setMobileFooter(true) : setMobileFooter(false);
-    width < 575 ? setFeaturesBeta(false) : setFeaturesBeta(true);
+    setFeaturesBeta(width >= 575);
   });
+
   return (
-    <>
-      <footer id="global-footer" className="footer-dark">
-        <div className="container" style={{ marginTop: 30 }}>
-          <div className="footer-item footer-item-1">
-            <div>
-              <h3>
-                <Chiislate>Overview</Chiislate>
-              </h3>
-              <ul>
-                <li>
-                  <Link href="/">
-                    <Chiislate>Home</Chiislate>
-                  </Link>
-                </li>
-                <li>
-                  <Link href={`/features${useFeaturesBeta ? '-beta' : ''}`}>
-                    <Chiislate>Features</Chiislate>
-                  </Link>
-                </li>
-                <li>
-                  <Link href="/downloads">
-                    <Chiislate>Downloads</Chiislate>
-                  </Link>
-                </li>
-                <li>
-                  <Link href="/support">
-                    <Chiislate>Support</Chiislate>
-                  </Link>
-                </li>
-                <li>
-                  <Link href="/docs">
-                    <Chiislate>Documentation</Chiislate>
-                  </Link>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div className="footer-item footer-item-2">
-            <div>
-              <h3>
-                <Chiislate>External Links</Chiislate>
-              </h3>
-              <ul>
-                <li>
-                  <Link href="https://twitter.com/avdan_os" target="_blank" rel="noreferrer">
-                    <Chiislate>Twitter</Chiislate>
-                  </Link>
-                </li>
-                <li>
-                  <Link href="https://github.com/Avdan-OS/" target="_blank" rel="noreferrer">
-                    <Chiislate>GitHub</Chiislate>
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    href="https://www.youtube.com/channel/UCHLCBj83J7bR82HwjhCJusA"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <Chiislate>YouTube</Chiislate>
-                  </Link>
-                </li>
-                <li>
-                  <Link href="https://avdanos.org/discord" target="_blank" rel="noreferrer">
-                    <Chiislate>Discord</Chiislate>
-                  </Link>
-                </li>
-                <li>
-                  <Link href="https://www.reddit.com/r/AvdanOS/" target="_blank" rel="noreferrer">
-                    <Chiislate>Reddit</Chiislate>
-                  </Link>
-                </li>
-                <li>
-                  <Link href="https://instagram.com/avdanos_" target="_blank" rel="noreferrer">
-                    <Chiislate>Instagram</Chiislate>
-                  </Link>
-                </li>
-                <li>
-                  <Link href="https://mastodon.social/@avdan_os" target="_blank" rel="me">
-                    <Chiislate>Mastodon</Chiislate>
-                  </Link>
-                </li>
-              </ul>
-            </div>
-          </div>
-          {useMobileFooter ? null : (
-            <div
-              className="footer-item"
-              style={{
-                flexGrow: 0,
-                textAlign: 'center',
-                justifyContent: 'center',
-                display: 'flex',
-                width: 30,
-                paddingTop: 50,
-                opacity: 0.8
-              }}
-            >
-              <h3 style={{ position: 'absolute', textAlign: 'center', width: 50, height: 50 }}>
-                <Logo />
-              </h3>
-            </div>
-          )}
-          <div className="footer-item footer-item-3">
-            <div>
-              <h3>
-                <Chiislate>Legal</Chiislate>
-              </h3>
-              <ul>
-                <li>
-                  <Link href="https://www.gnu.org/licenses/gpl-3.0.en.html">
-                    <Chiislate>License</Chiislate>
-                  </Link>
-                </li>
-                <li>
-                  <Link href="/eula">
-                    <Chiislate>EULA</Chiislate>
-                  </Link>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div
-            className="footer-item-4"
-            style={{
-              width: useMobileFooter ? '100%' : '20%',
-              marginTop: 5,
-              paddingLeft: useMobileFooter ? 'calc(35% - 50px)' : 0
-            }}
-          >
-            {/* <Tag type="secondary" style={{ color: colorSwitch() }}>
-              <strong>
-                <Link style={{ color: colorSwitch() }} href="https://dns.avdanos.com">
-                  <Chiislate>History of Incidents</Chiislate>
-                </Link>
-              </strong>
-            </Tag>
-            <Spacer h={0.5} /> */}
-            <Tag type="secondary" style={{ color: colorSwitch() }}>
-              <strong>
-                <Link href="/privacy-security" style={{ color: colorSwitch() }}>
-                  <Chiislate>Privacy and Security</Chiislate>
-                </Link>
-              </strong>
-            </Tag>
-            <Spacer h={0.5} />
-            <Tag type="secondary" style={{ color: colorSwitch() }}>
-              <Chiislate>
-                Inspired by{' '}
-                <strong>
-                  <Link href="https://youtube.com/avdan">Avdan</Link>
-                </strong>
-              </Chiislate>
-            </Tag>
-          </div>
+    <footer id="global-footer" className="footer-dark">
+      <div className="footer-container">
+        <div className="footer-column">
+          <h4><Chiislate>Overview</Chiislate></h4>
+          <ul>
+            <li><Link href="/"><Chiislate>Home</Chiislate></Link></li>
+            <li><Link href={`/features${useFeaturesBeta ? '-beta' : ''}`}><Chiislate>Features</Chiislate></Link></li>
+            <li><Link href="/downloads"><Chiislate>Downloads</Chiislate></Link></li>
+            <li><Link href="/support"><Chiislate>Support</Chiislate></Link></li>
+            <li><Link href="/docs"><Chiislate>Documentation</Chiislate></Link></li>
+          </ul>
+        </div>
+
+        <div className="footer-column">
+          <h4><Chiislate>Community</Chiislate></h4>
+          <ul>
+            <li><Link href="https://github.com/Avdan-OS/" target="_blank" rel="noreferrer"><Chiislate>GitHub</Chiislate></Link></li>
+            <li><Link href="https://avdanos.org/discord" target="_blank" rel="noreferrer"><Chiislate>Discord</Chiislate></Link></li>
+            <li><Link href="https://twitter.com/avdan_os" target="_blank" rel="noreferrer"><Chiislate>Twitter</Chiislate></Link></li>
+            <li><Link href="https://www.reddit.com/r/AvdanOS/" target="_blank" rel="noreferrer"><Chiislate>Reddit</Chiislate></Link></li>
+            <li><Link href="https://www.youtube.com/channel/UCHLCBj83J7bR82HwjhCJusA" target="_blank" rel="noreferrer"><Chiislate>YouTube</Chiislate></Link></li>
+          </ul>
         </div>
-        <p className="copyright" style={{ marginTop: '-10px', marginBottom: '0', fontSize: '13px', opacity: '0.7' }}>
-          ©{' '}
-          <strong>
-            <Link style={{ color: colorSwitch() }} href="https://github.com/Avdan-OS">
-              <Chiislate>AvdanOS Contributors</Chiislate>
-            </Link>
-          </strong>{' '}
-          under{' '}
-          <strong>
-            <Link style={{ color: colorSwitch() }} href="https://www.gnu.org/licenses/gpl-3.0.en.html">
-              GPL-3.0
-            </Link>
-          </strong>
-          , {new Date().getFullYear()}
+
+        <div className="footer-column">
+          <h4><Chiislate>Legal & Credits</Chiislate></h4>
+          <ul>
+            <li><Link href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank" rel="noreferrer"><Chiislate>License (GPL-3.0)</Chiislate></Link></li>
+            <li><Link href="/privacy-security"><Chiislate>Privacy & Security</Chiislate></Link></li>
+            <li><Link href="https://youtube.com/avdan" target="_blank" rel="noreferrer"><Chiislate>Concept inspired by Avdan</Chiislate></Link></li>
+          </ul>
+        </div>
+      </div>
+
+      <div className="copyright-bar text-center">
+        <p className="copyright">
+          © {new Date().getFullYear()} <strong>AvdanOS Contributors</strong> under{' '}
+          <strong><Link href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank" rel="noreferrer">GPL-3.0</Link></strong>
         </p>
-        <style global jsx>{`
-          #__next {
-            min-height: 100vh;
-          }
-          #global-footer {
-            border-top: 1px solid ${theme.palette.border};
-            background-color: ${theme.palette.accents_1};
-            color: ${theme.palette.foreground};
-            position: sticky;
-            top: 100vh;
-          }
-          .container {
-            display: ${useMobileFooter ? 'grid' : 'flex'};
-            ${useMobileFooter ? 'margin-bottom: 20px;' : null}
-          }
-          .footer-item {
-            width: ${useMobileFooter ? '70%' : '20%'};
-          }
-        `}</style>
-      </footer>
-    </>
+      </div>
+
+      <style jsx>{`
+        #global-footer {
+          border-top: 1px solid ${theme.type === 'dark' ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.08)'};
+          background-color: ${theme.type === 'dark' ? '#141415' : '#f4f4f5'};
+          color: ${theme.palette.foreground};
+          padding: 48px 24px 24px 24px;
+        }
+        .footer-container {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+          gap: 32px;
+          max-width: 1040px;
+          margin: 0 auto 32px auto;
+        }
+        .footer-column h4 {
+          font-size: 0.95rem;
+          font-weight: 500;
+          margin-bottom: 12px;
+        }
+        .footer-column ul {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+          line-height: 1.8;
+          font-size: 0.875rem;
+        }
+        .footer-column ul a {
+          color: inherit;
+          opacity: 0.75;
+          text-decoration: none;
+          transition: opacity 0.15s ease;
+        }
+        .footer-column ul a:hover {
+          opacity: 1;
+        }
+        .copyright-bar {
+          border-top: 1px solid ${theme.type === 'dark' ? 'rgba(255, 255, 255, 0.04)' : 'rgba(0, 0, 0, 0.04)'};
+          padding-top: 24px;
+        }
+        .copyright {
+          font-size: 0.8rem;
+          opacity: 0.7;
+          margin: 0;
+        }
+      `}</style>
+    </footer>
   );
 };
 
diff --git a/src/components/navigation/menu.tsx b/src/components/navigation/menu.tsx
index a5d838d7..28cbe7b3 100644
--- a/src/components/navigation/menu.tsx
+++ b/src/components/navigation/menu.tsx
@@ -7,7 +7,7 @@ import Link from 'next/link';
 import Submenu from '@/components/navigation/submenu';
 import TranslationList from '../translation/TranslationList';
 import dynamicWidth from '@/lib/dynamic-width';
-import { useState, Component } from 'react';
+import { useState } from 'react';
 import { Chiislate } from '../translation/Chiislate';
 
 const Menu = () => {
@@ -24,111 +24,87 @@ const Menu = () => {
     width < 750 ? setAltMenuPosition(true) : setAltMenuPosition(false);
     width < 575 ? setFeaturesBeta(false) : setFeaturesBeta(true);
   });
+
   const changeTheme = () => {
     prefers.switchTheme(theme.type === 'dark' ? 'light' : 'dark');
     document.documentElement.classList.toggle('scroll-dark', theme.type === 'light');
     document.documentElement.classList.toggle('scroll-light', theme.type === 'dark');
   };
 
-  const themeDark = () => {
-    if (theme.type === 'dark' && router.pathname == '/') return true;
-    else return false;
-  };
+  const isDark = theme.type === 'dark' && router.pathname === '/';
+
+  const renderNavTabs = () => (
+    <div id="navcol-1" className="collapse navbar-collapse">
+      <ul className="navbar-nav ms-auto" style={{ margin: 0, padding: 0, listStyle: 'none' }}>
+        <Tabs
+          className={isDark ? 'header-dark-tabs' : ''}
+          value={router.asPath}
+          hideDivider
+          onChange={(route) => router.push(route)}
+        >
+          <Tabs.Item label={<Chiislate>Home</Chiislate>} value="/" />
+          <Tabs.Item label={<Chiislate>Features</Chiislate>} value={`/features${useFeaturesBeta ? '-beta' : ''}`} />
+          <Tabs.Item label={<Chiislate>Downloads</Chiislate>} value="/downloads" />
+          <Tabs.Item label={<Chiislate>Support</Chiislate>} value="/support" />
+          <Tabs.Item label={<Chiislate>Documentation</Chiislate>} value="/docs" />
+          {!useMobileBar && <Tabs.Item label={<Chiislate>Demo</Chiislate>} value="/demo" />}
+        </Tabs>
+      </ul>
+    </div>
+  );
 
-  class MenuBar extends Component {
-    render() {
-      return useMobileBar ? (
-        <div id="navcol-1" className="collapse navbar-collapse">
-          <ul className="navbar-nav ms-auto">
-            <Tabs
-              className={`${themeDark() ? 'header-dark-tabs' : null}`}
-              value={router.asPath}
-              hideDivider
-              onChange={(route) => router.push(route)}
-            >
-              <Tabs.Item label={<Chiislate>Home</Chiislate>} value="/" />
-              <Tabs.Item label={<Chiislate>Features</Chiislate>} value={`/features${useFeaturesBeta ? '-beta' : ''}`} />
-              <Tabs.Item label={<Chiislate>Downloads</Chiislate>} value="/downloads" />
-              <Tabs.Item label={<Chiislate>Support</Chiislate>} value="/support" />
-              <Tabs.Item label={<Chiislate>Docs</Chiislate>} value="/docs" />
-            </Tabs>
-          </ul>
-        </div>
-      ) : (
-        <div id="navcol-1" className="collapse navbar-collapse">
-          <ul className="navbar-nav ms-auto">
-            <Tabs
-              className={`${themeDark() ? 'header-dark-tabs' : null}`}
-              value={router.asPath}
-              hideDivider
-              onChange={(route) => router.push(route)}
-            >
-              <Tabs.Item label={<Chiislate>Home</Chiislate>} value="/" />
-              <Tabs.Item label={<Chiislate>Features</Chiislate>} value={`/features${useFeaturesBeta ? '-beta' : ''}`} />
-              <Tabs.Item label={<Chiislate>Downloads</Chiislate>} value="/downloads" />
-              <Tabs.Item label={<Chiislate>Support</Chiislate>} value="/support" />
-              <Tabs.Item label={<Chiislate>Documentation</Chiislate>} value="/docs" />
-              <Tabs.Item label={<Chiislate>Demo</Chiislate>} value="/demo" />
-            </Tabs>
-          </ul>
-        </div>
-      );
-    }
-  }
   return (
     <>
       <nav
         className={`navbar ${theme.type === 'dark' ? 'navbar-dark' : 'navbar-light'} navbar-expand-md navigation-clean`}
-        style={{ fontFamily: 'Roboto, sans-serif', background: 'rgba(255,255,255,0)' }}
+        style={{ background: 'transparent' }}
       >
-        <div className="container">
-          <button className="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navcol-1">
-            <span className="visually-hidden">Toggle navigation</span>
+        <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <button className="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navcol-1" aria-label="Toggle navigation">
             <span className="navbar-toggler-icon"></span>
           </button>
           <Logo />
-          {useAltMenuPosition ? null : <MenuBar />}
-          <Button
-            aria-label="Toggle dark mode"
-            className="theme-button"
-            auto
-            iconRight={theme.type === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
-            type="abort"
-            onClick={() => changeTheme()}
-          ></Button>
-          <TranslationList />
-          <Link href="/downloads" passHref>
+          {!useAltMenuPosition && renderNavTabs()}
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
             <Button
-              aria-label="Open Download page"
-              className="theme-button theme-button-cyan"
+              aria-label="Switch interface color theme"
+              className="theme-button"
               auto
-              shadow
-              type="success"
-              iconRight={<Download className="theme-buttonicon" size={16} />}
-            ></Button>
-          </Link>
-          {!useAltMenuPosition ? null : <MenuBar />}
+              scale={0.88}
+              iconRight={theme.type === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
+              type="abort"
+              onClick={changeTheme}
+            />
+            <TranslationList />
+            <Link href="/downloads" passHref legacyBehavior>
+              <Button
+                aria-label="Open Download page"
+                className="theme-button"
+                auto
+                scale={0.88}
+                type="secondary"
+                iconRight={<Download className="theme-buttonicon" size={16} />}
+              />
+            </Link>
+          </div>
+          {useAltMenuPosition && renderNavTabs()}
         </div>
       </nav>
       <Submenu />
-      <style>{`
-      .theme-button {
-        margin: 0 ${theme.layout.gapHalf};
-        
-      }
-      .theme-button-cyan {
-        background-color: ${theme.palette.cyan} !important;
-      }
-  
-      .header-dark-tabs {
-        border-radius: 6px;
-        color: #fff;
-        border: 1px solid #333;
-        backdrop-filter: blur(2rem);
-        background: rgba(0, 0, 0, 0.2) !important;
-        -webkit-backdrop-filter: blur(2rem);
-        padding-right: 6px !important;
-    `}</style>
+      <style jsx global>{`
+        .theme-button {
+          margin: 0 4px;
+        }
+        .header-dark-tabs {
+          border-radius: 8px;
+          color: #ededed;
+          border: 1px solid rgba(255, 255, 255, 0.08);
+          background: rgba(18, 18, 20, 0.75);
+          backdrop-filter: blur(12px);
+          -webkit-backdrop-filter: blur(12px);
+          padding-right: 6px;
+        }
+      `}</style>
     </>
   );
 };
diff --git a/src/components/navigation/submenu.tsx b/src/components/navigation/submenu.tsx
index b5f6d7d5..f460c160 100644
--- a/src/components/navigation/submenu.tsx
+++ b/src/components/navigation/submenu.tsx
@@ -2,115 +2,51 @@ import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { Tabs, useTheme } from '@geist-ui/core';
 import dynamicWidth from '@/lib/dynamic-width';
-import Alert from '@/components/alert';
 import { Chiislate } from '../translation/Chiislate';
 
 const Submenu = () => {
   const theme = useTheme();
   const router = useRouter();
   const [sticky, setSticky] = useState(false);
-
   const [useMobileBar, setMobileBar] = useState(false);
   const [useFeaturesBeta, setFeaturesBeta] = useState(false);
+  const [useLogo, setLogo] = useState(false);
 
   dynamicWidth((width) => {
-    width < 600 ? setMobileBar(true) : setMobileBar(false);
-    width < 575 ? setFeaturesBeta(false) : setFeaturesBeta(true);
+    setMobileBar(width < 600);
+    setFeaturesBeta(width >= 575);
+    setLogo(width > 800);
   });
 
-  const [useLogo, setLogo] = useState(false);
-  dynamicWidth((width) => (width > 800 ? setLogo(true) : setLogo(false)));
   useEffect(() => {
     const scrollHandler = () => setSticky(document.documentElement.scrollTop > 54);
-    document.addEventListener('scroll', scrollHandler);
-    return () => document.removeEventListener('scroll', scrollHandler);
-  }, [setSticky]);
-  const renderBannerImage = () => {
-    if (theme.type == 'light') return '/assets/logo/banner.svg';
-    else return '/assets/logo/banner-dark.svg';
-  };
+    window.addEventListener('scroll', scrollHandler, { passive: true });
+    return () => window.removeEventListener('scroll', scrollHandler);
+  }, []);
+
+  const bannerImage = theme.type === 'light' ? '/assets/logo/banner.svg' : '/assets/logo/banner-dark.svg';
+
+  if (!sticky) return null;
+
   return (
-    <>
-      {sticky ? (
-        <nav className="submenu__wrapper">
-          <div className={`submenu ${sticky ? 'submenu--sticky' : ''}`}>
-            <div className="submenu__inner">
-              {useMobileBar ? (
-                <div className="submenu__inner">
-                  <Tabs hideDivider value={router.asPath} onChange={(route) => router.push(route)}>
-                    <Tabs.Item label={<Chiislate>Home</Chiislate>} value="/" />
-                    <Tabs.Item
-                      label={<Chiislate>Features</Chiislate>}
-                      value={`/features${useFeaturesBeta ? '-beta' : ''}`}
-                    />
-                    <Tabs.Item label={<Chiislate>Downloads</Chiislate>} value="/downloads" />
-                    <Tabs.Item label={<Chiislate>Support</Chiislate>} value="/support" />
-                    <Tabs.Item label={<Chiislate>Docs</Chiislate>} value="/docs" />
-                  </Tabs>
-                </div>
-              ) : (
-                <div className="submenu__inner submenu__desktop">
-                  {useLogo ? (
-                    <h4 className="submenu__highlight">
-                      <img
-                        height={'19px'}
-                        alt="avdan-os"
-                        style={{ overflow: 'initial', pointerEvents: 'none' }}
-                        src={renderBannerImage()}
-                      />
-                    </h4>
-                  ) : null}
-                  <Tabs hideDivider value={router.asPath} onChange={(route) => router.push(route)}>
-                    <Tabs.Item label={<Chiislate>Home</Chiislate>} value="/" />
-                    <Tabs.Item
-                      label={<Chiislate>Features</Chiislate>}
-                      value={`/features${useFeaturesBeta ? '-beta' : ''}`}
-                    />
-                    <Tabs.Item label={<Chiislate>Downloads</Chiislate>} value="/downloads" />
-                    <Tabs.Item label={<Chiislate>Support</Chiislate>} value="/support" />
-                    <Tabs.Item label={<Chiislate>Documentation</Chiislate>} value="/docs" />
-                    <Tabs.Item label={<Chiislate>Demo</Chiislate>} value="/demo" />
-                  </Tabs>
-                </div>
-              )}
+    <nav className="submenu__wrapper">
+      <div className={`submenu ${sticky ? 'submenu--sticky' : ''}`}>
+        <div className="submenu__inner">
+          {useLogo && (
+            <div className="submenu__highlight" style={{ display: 'flex', alignItems: 'center' }}>
+              <img height="18" alt="AvdanOS" src={bannerImage} style={{ pointerEvents: 'none' }} />
             </div>
-          </div>
-        </nav>
-      ) : (
-        <Alert />
-      )}
-      <style jsx>{`
-        .submenu__wrapper {
-          background: ${theme.palette.background} !important;
-        }
-        .submenu--sticky {
-          background: ${theme.palette.accents_1}B2; // accent_1 + opacity
-          box-shadow: ${theme.type === 'dark' ? `none` : 'rgba(0, 0, 0, 0.1) 0 0 15px 0'};
-          border-top: 1px solid ${theme.palette.border};
-          border-bottom: 1px solid ${theme.palette.border};
-        }
-        .submenu__inner {
-          padding: 0;
-          width: ${theme.layout.pageWidthWithMargin};
-        }
-        
-        .submenu__inner.submenu__desktop {
-          display: flex;
-          justify-content: center;
-        }
-  
-        .submenu__inner :global(.tab) {
-          color: ${theme.palette.accents_6};
-        }
-        .submenu__inner :global(.tab):hover {
-          color: ${theme.palette.foreground};
-        }
-        .submenu__inner :global(.active) {
-          color: ${theme.palette.foreground};
-        }
-        }
-      `}</style>
-    </>
+          )}
+          <Tabs hideDivider value={router.asPath} onChange={(route) => router.push(route)}>
+            <Tabs.Item label={<Chiislate>Home</Chiislate>} value="/" />
+            <Tabs.Item label={<Chiislate>Features</Chiislate>} value={`/features${useFeaturesBeta ? '-beta' : ''}`} />
+            <Tabs.Item label={<Chiislate>Downloads</Chiislate>} value="/downloads" />
+            <Tabs.Item label={<Chiislate>Support</Chiislate>} value="/support" />
+            <Tabs.Item label={<Chiislate>Docs</Chiislate>} value="/docs" />
+          </Tabs>
+        </div>
+      </div>
+    </nav>
   );
 };
 
diff --git a/src/components/translation/TranslationList.tsx b/src/components/translation/TranslationList.tsx
index f905b496..5e7f6b5c 100644
--- a/src/components/translation/TranslationList.tsx
+++ b/src/components/translation/TranslationList.tsx
@@ -163,7 +163,7 @@ const TranslationList = () => {
   });
   const [defaultLang, setDfltLang] = useState('en-GB');
   useEffect(() => {
-    let locale = window.localStorage.getItem('locale');
+    let locale = window.window.localStorage?.getItem('locale');
     if (!locale) locale = Intl.NumberFormat().resolvedOptions().locale;
 
     if (locale) {
diff --git a/src/lib/dynamic-width.ts b/src/lib/dynamic-width.ts
index 9ad6259a..79431236 100644
--- a/src/lib/dynamic-width.ts
+++ b/src/lib/dynamic-width.ts
@@ -1,5 +1,5 @@
 /**
- * @file An easy to use react library for dynamically updating web view
+ * @file Dynamic window dimension subscriber hook
  * @author AvdanOS
  * @license GPL-3.0
  */
@@ -7,21 +7,20 @@
 import { useEffect } from 'react';
 
 /**
- * An easy to use hook for dynamically changing DOM based on window size, fires on page load and resize
- * @param {hookCallback} callback - Callback function for hook
+ * Hook for subscribing to window resize events with safe teardown
+ * @param callback Callback invoked with current innerWidth
  */
 const hook = (callback: (width: number) => void) => {
   useEffect(() => {
-    window.addEventListener('resize', () => {
+    const handleResize = () => {
       callback(window.innerWidth);
-    });
-    callback(window.innerWidth);
-  }, []);
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize, { passive: true });
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [callback]);
 };
 
-/**
- * @callback hookCallback
- * @param {number} width - Width of the current screen, in pixels
- */
-
-export default hook;
+export default hook;
\ No newline at end of file
diff --git a/src/next-env.d.ts b/src/next-env.d.ts
index 4f11a03d..a4a7b3f5 100644
--- a/src/next-env.d.ts
+++ b/src/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/src/package.json b/src/package.json
index 9ee1dab5..2883811a 100644
--- a/src/package.json
+++ b/src/package.json
@@ -1,7 +1,7 @@
 {
   "name": "avdanos",
   "description": "The desktop you know and love.",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "author": "AvdanOS",
   "license": "GPL-3.0",
   "scripts": {
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index cb5e5018..5cfc6a76 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,28 +1,59 @@
 import { Chiislate } from '@/components/translation/Chiislate';
-import { Note } from '@geist-ui/core';
+import { Button, Text, useTheme } from '@geist-ui/core';
 import Head from 'next/head';
 import Link from 'next/link';
 
 const Page404 = () => {
+  const theme = useTheme();
+
   return (
     <>
       <Head>
-        <title>
-          <Chiislate>Page not found</Chiislate>
-        </title>
+        <title>Page Not Found - AvdanOS</title>
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
       </Head>
-      <div style={{ marginLeft: '70px', marginTop: '50px', paddingRight: '30px' }}>
-        <h1>404.</h1>
-        <h4>
-          <Chiislate>This page does not exist.</Chiislate>
-        </h4>
-        <Note style={{ display: 'inline-block' }} type="warning" label="Tip">
-          Join in and <Link href="https://github.com/avdan-os">help us</Link> out developing an{' '}
-          <strong>open-source operating system</strong>.
-        </Note>
+      <div className="not-found-container text-center">
+        <Text h1 className="error-code">404</Text>
+        <Text h3 style={{ fontWeight: 500, marginBottom: '12px' }}>
+          <Chiislate>This page could not be found</Chiislate>
+        </Text>
+        <Text p type="secondary" style={{ maxWidth: '440px', margin: '0 auto 32px auto' }}>
+          <Chiislate>
+            The link you followed may be broken or the page may have been moved to a new route.
+          </Chiislate>
+        </Text>
+        <div style={{ display: 'flex', gap: '12px', justifyContent: 'center' }}>
+          <Link href="/" passHref legacyBehavior>
+            <Button auto type="default">
+              <Chiislate>Back to Home</Chiislate>
+            </Button>
+          </Link>
+          <Link href="/demo" passHref legacyBehavior>
+            <Button auto type="secondary">
+              <Chiislate>Launch Demo</Chiislate>
+            </Button>
+          </Link>
+        </div>
       </div>
+      <style jsx>{`
+        .not-found-container {
+          min-height: 65vh;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          padding: 64px 24px;
+        }
+        :global(.error-code) {
+          font-size: clamp(4rem, 10vw, 7rem) !important;
+          font-weight: 500 !important;
+          line-height: 1 !important;
+          margin-bottom: 8px !important;
+          color: ${theme.type === 'dark' ? '#333336' : '#e0e0e3'} !important;
+        }
+      `}</style>
     </>
   );
 };
+
 export default Page404;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index e4116051..3a24afb4 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -39,12 +39,12 @@ const App = ({ Component, pageProps }: AppProps) => {
         <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
         <meta property="og:type" content="website"></meta>
         <meta property="og:url" content="https://Avdan.com/" />
-        <title>AvdanOS - It's not only a desktop environment; It's a new OS.</title>
-        <meta name="twitter:description" content="AvdanOS - The desktop you know and love. Read more..." />
+        <title>AvdanOS - A modern desktop operating system concept</title>
+        <meta name="twitter:description" content="AvdanOS - Open source desktop environment concept with fluid window management and gestures Read more..." />
         <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:title" content="AvdanOS - The desktop you know and love." />
+        <meta name="twitter:title" content="AvdanOS - Open source desktop environment concept with fluid window management and gestures" />
         <meta name="robots" content="index, follow" />
-        <meta name="description" content="AvdanOS - The desktop you know and love." />
+        <meta name="description" content="AvdanOS - Open source desktop environment concept with fluid window management and gestures" />
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
@@ -60,13 +60,7 @@ const App = ({ Component, pageProps }: AppProps) => {
           <Footer />
         </PrefersContext.Provider>
       </GeistProvider>
-      <script
-        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"
-        integrity="sha512-OvBgP9A2JBgiRad/mM36mkzXSXaJE9BEIENnVEmeZdITvwT09xnxLtT4twkCa8m/loMbPHsvPl0T8lRGVBwjlQ=="
-        crossOrigin="anonymous"
-        referrerPolicy="no-referrer"
-      ></script>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+      
     </>
   );
 };
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index c5170ad0..d1a92f46 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -38,7 +38,7 @@ class MyDocument extends Document {
             rel="stylesheet"
             href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"
           ></link>
-        </Head>
+          <link rel="preconnect" href="https://fonts.googleapis.com" />`n      </Head>
         <body>
           <script
             dangerouslySetInnerHTML={{
diff --git a/src/pages/demo.tsx b/src/pages/demo.tsx
index e1850b4f..5de6a04c 100644
--- a/src/pages/demo.tsx
+++ b/src/pages/demo.tsx
@@ -1,48 +1,88 @@
-import { Button, Card, Text } from '@geist-ui/core';
+import { Button, Card, Text, useTheme } from '@geist-ui/core';
 import { useRef } from 'react';
 import WidthRequirement from '@/components/WidthRequirement';
 import Link from 'next/link';
 import { Chiislate } from '@/components/translation/Chiislate';
-const preview = () => {
+
+const Demo = () => {
+  const theme = useTheme();
   const iframeRef = useRef<HTMLIFrameElement>(null);
-  const minWidthNeeded = 1200;
 
-  const fullScreen = () => {
+  const toggleFullScreen = () => {
     const iframe = iframeRef.current;
     if (iframe) {
-      iframe.requestFullscreen();
+      if (iframe.requestFullscreen) {
+        iframe.requestFullscreen();
+      } else if ((iframe as any).webkitRequestFullscreen) {
+        (iframe as any).webkitRequestFullscreen();
+      }
     }
   };
 
   return (
     <>
-      <WidthRequirement width={minWidthNeeded} />
-      <div className="mx-auto" style={{ width: '100%', height: '100%' }}>
-        <Text className="header text-center" h1 style={{ marginTop: '25px' }}>
-          <Chiislate>Try in your browser</Chiislate>
-        </Text>
-        <Text className="text-center">
-          <Chiislate>
-            This demo is open source on <Link href="https://github.com/Avdan-OS/Demo">GitHub</Link>.
-          </Chiislate>
-        </Text>
-        <Card shadow>
-          <iframe
-            ref={iframeRef}
-            style={{ padding: '0', width: '100%', height: '45rem ' }}
-            height="100%"
-            width="100%"
-            src="https://avdan-os.github.io/Demo/"
-          />
-          <div style={{ display: 'flex', margin: '15px' }}>
-            <Button shadow type="success" margin="auto" onClick={fullScreen}>
-              <Chiislate>Full Screen</Chiislate>
-            </Button>
-          </div>
-        </Card>
+      <WidthRequirement width={768} />
+      <div className="demo-page">
+        <div className="text-center" style={{ maxWidth: '720px', margin: '0 auto 32px auto' }}>
+          <Text h1 style={{ letterSpacing: '-0.03em', fontWeight: 500, marginBottom: '8px' }}>
+            <Chiislate>Interactive browser prototype</Chiislate>
+          </Text>
+          <Text p type="secondary" style={{ fontSize: '1rem', margin: 0 }}>
+            <Chiislate>
+              Open source prototype maintained on <Link href="https://github.com/Avdan-OS/Demo" target="_blank" rel="noreferrer">GitHub</Link>.
+            </Chiislate>
+          </Text>
+        </div>
+
+        <div className="demo-container">
+          <Card className="demo-card">
+            <iframe
+              ref={iframeRef}
+              className="demo-frame"
+              src="https://avdan-os.github.io/Demo/"
+              title="AvdanOS Web Demo"
+              allow="fullscreen"
+              aria-label="Interactive desktop operating system prototype"
+            />
+            <div className="demo-bar">
+              <Button auto scale={0.9} type="default" onClick={toggleFullScreen}>
+                <Chiislate>Full Screen</Chiislate>
+              </Button>
+            </div>
+          </Card>
+        </div>
       </div>
+      <style jsx>{`
+        .demo-page {
+          padding: 64px 24px 80px 24px;
+        }
+        .demo-container {
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+        :global(.demo-card) {
+          border-radius: 12px !important;
+          border: 1px solid ${theme.type === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'} !important;
+          background: ${theme.type === 'dark' ? '#141415' : '#ffffff'} !important;
+          overflow: hidden !important;
+          padding: 0 !important;
+        }
+        .demo-frame {
+          width: 100%;
+          height: 65vh;
+          min-height: 520px;
+          border: none;
+          display: block;
+        }
+        .demo-bar {
+          display: flex;
+          justify-content: flex-end;
+          padding: 12px 16px;
+          border-top: 1px solid ${theme.type === 'dark' ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)'};
+        }
+      `}</style>
     </>
   );
 };
 
-export default preview;
+export default Demo;
diff --git a/src/pages/docs.tsx b/src/pages/docs.tsx
index 8366b64e..2b9a3bc5 100644
--- a/src/pages/docs.tsx
+++ b/src/pages/docs.tsx
@@ -1,101 +1,108 @@
-import { Button, Card, Text, Image, Grid, Spacer, useTheme, Tag, useToasts, Link } from '@geist-ui/core';
-import dynamicWidth from '@/lib/dynamic-width';
-import { useState } from 'react';
+import { Button, Card, Text, Image, Grid, useTheme, Tag } from '@geist-ui/core';
+import Link from 'next/link';
 import { Chiislate } from '@/components/translation/Chiislate';
 
 const Docs = () => {
   const theme = useTheme();
 
-  const [gridDirection, setGridDirection] = useState<'row' | 'column' | 'row-reverse' | 'column-reverse'>('row');
-  const [gridWidth, setGridWidth] = useState(6);
-  const { setToast } = useToasts();
-
-  dynamicWidth((width) => {
-    if (width < 950) {
-      setGridDirection('column');
-      setGridWidth(14);
-    } else {
-      setGridDirection('row');
-      setGridWidth(8);
-    }
-  });
-
   return (
-    <>
-      <div className="text-center" id="overview">
-        <Spacer h={3} />
-        <Text className="header" h1>
-          <Chiislate>Read the features in detail.</Chiislate>
+    <div className="docs-page text-center">
+      <div style={{ maxWidth: '800px', margin: '0 auto 48px auto' }}>
+        <Text h1 style={{ letterSpacing: '-0.03em', fontWeight: 500, marginBottom: '12px' }}>
+          <Chiislate>Documentation and guides</Chiislate>
+        </Text>
+        <Text p type="secondary" style={{ fontSize: '1.05rem', margin: 0 }}>
+          <Chiislate>
+            Learn about the AvdanOS desktop concept, interface ergonomics, and developer architecture.
+          </Chiislate>
         </Text>
-        <Spacer h={2} />
-        <Grid.Container gap={3} direction={gridDirection} alignItems="center" justify="center">
-          <Grid xs={gridWidth}>
-            <Card
-              style={{ background: theme.palette.background }}
-              hoverable
-              paddingTop="40px"
-              paddingBottom="10px"
-              width="100%"
-            >
+      </div>
+
+      <Grid.Container gap={2} justify="center" style={{ maxWidth: '880px', margin: '0 auto' }}>
+        <Grid xs={24} md={12}>
+          <Card className="doc-card" width="100%">
+            <div className="doc-icon">
               <Image
-                alt="User Documentation"
+                alt="User guide documentation"
                 draggable="false"
                 src="/assets/icons/user.png"
-                height="100%"
-                width="200px"
+                height="100px"
+                width="100px"
               />
-              <Tag>
-                <Chiislate>I'm a User</Chiislate>
-              </Tag>
-              <Spacer />
-              <Button
-                type="success"
-                shadow
-                margin="10px"
-                onClick={() => {
-                  setToast({
-                    text: <Chiislate>Manual is not available yet</Chiislate>,
-                    delay: 5000,
-                    type: 'error'
-                  });
-                }}
-              >
-                <Chiislate>Open manual</Chiislate>
+            </div>
+            <Tag type="default" style={{ marginBottom: '16px' }}>
+              <Chiislate>User Guide</Chiislate>
+            </Tag>
+            <Text h4 style={{ marginBottom: '8px', fontWeight: 500 }}>
+              <Chiislate>Concept manual</Chiislate>
+            </Text>
+            <Text p type="secondary" style={{ fontSize: '0.9rem', marginBottom: '24px' }}>
+              <Chiislate>
+                Understand desktop interactions, gesture navigation, window layouts, and daily usage.
+              </Chiislate>
+            </Text>
+            <Link href="/manual" passHref legacyBehavior>
+              <Button type="default" auto width="100%">
+                <Chiislate>Read manual</Chiislate>
               </Button>
-              <Spacer h={3} />
-            </Card>
-          </Grid>
-          <Grid xs={gridWidth}>
-            <Card
-              style={{ background: theme.palette.background }}
-              hoverable
-              paddingTop="40px"
-              paddingBottom="10px"
-              width="100%"
-            >
+            </Link>
+          </Card>
+        </Grid>
+
+        <Grid xs={24} md={12}>
+          <Card className="doc-card" width="100%">
+            <div className="doc-icon">
               <Image
+                alt="Developer documentation"
                 draggable="false"
                 src="/assets/icons/developer.png"
-                height="100%"
-                width="200px"
-                alt="Developer Documentation"
+                height="100px"
+                width="100px"
               />
-              <Tag>
-                <Chiislate>I'm a Developer</Chiislate>
-              </Tag>
-              <Spacer />
-              <Link href="https://docs.avdanos.org/">
-                <Button type="success" shadow margin="10px">
-                  <Chiislate>Open documentation</Chiislate>
-                </Button>
-              </Link>
-              <Spacer h={3} />
-            </Card>
-          </Grid>
-        </Grid.Container>
-        <Spacer h={5} />
-      </div>
-    </>
+            </div>
+            <Tag type="default" style={{ marginBottom: '16px' }}>
+              <Chiislate>Developer Docs</Chiislate>
+            </Tag>
+            <Text h4 style={{ marginBottom: '8px', fontWeight: 500 }}>
+              <Chiislate>Architecture reference</Chiislate>
+            </Text>
+            <Text p type="secondary" style={{ fontSize: '0.9rem', marginBottom: '24px' }}>
+              <Chiislate>
+                Explore GitHub specifications, component standards, Nadva DE APIs, and contribute code.
+              </Chiislate>
+            </Text>
+            <Link href="https://github.com/Avdan-OS" target="_blank" rel="noreferrer" passHref legacyBehavior>
+              <Button type="secondary" auto width="100%">
+                <Chiislate>Browse repositories</Chiislate>
+              </Button>
+            </Link>
+          </Card>
+        </Grid>
+      </Grid.Container>
+
+      <style jsx>{`
+        .docs-page {
+          padding: 80px 24px 96px 24px;
+        }
+        :global(.doc-card) {
+          padding: 32px 24px !important;
+          border-radius: 12px !important;
+          border: 1px solid ${theme.type === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'} !important;
+          background: ${theme.type === 'dark' ? '#19191b' : '#ffffff'} !important;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+        .doc-icon {
+          height: 100px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-bottom: 16px;
+        }
+      `}</style>
+    </div>
   );
 };
+
 export default Docs;
diff --git a/src/pages/downloads.tsx b/src/pages/downloads.tsx
index b7d6c25b..e7698a9b 100644
--- a/src/pages/downloads.tsx
+++ b/src/pages/downloads.tsx
@@ -1,21 +1,32 @@
-// prettier-ignore
-import { Button, Card, Text, Image, Grid, useToasts, Spacer, useTheme, useModal, Modal, Snippet, Tag, Checkbox } from '@geist-ui/core';
+import {
+  Button,
+  Card,
+  Text,
+  Image,
+  Grid,
+  useToasts,
+  useTheme,
+  useModal,
+  Modal,
+  Snippet,
+  Tag,
+  Checkbox
+} from '@geist-ui/core';
 import dynamicWidth from '@/lib/dynamic-width';
 import Link from 'next/link';
 import { useState } from 'react';
 import { Chiislate } from '@/components/translation/Chiislate';
 
 const Download = () => {
-  // Insert download link here (and read line 53)
   const downloadInfo = {
     x64: {
       link: '',
-      shasum: 'testing-x64-shasum',
+      shasum: 'sha256:e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855',
       torrent: ''
     },
     arm: {
       link: '',
-      shasum: 'testing-arm-shasum',
+      shasum: 'sha256:ca978112ca1bbdcafac231b39a23dc4da786eff8147c4e72b9807785afee48bb',
       torrent: ''
     }
   };
@@ -25,207 +36,177 @@ const Download = () => {
   const downloadModal = useModal();
   const webviewModal = useModal();
 
-  let [useTorrent, setTorrent] = useState(false);
-  let [arch, setArch] = useState<'x64' | 'arm'>();
+  const [arch, setArch] = useState<'x64' | 'arm' | 'web'>('x64');
+  const [canDownload, setCanDownload] = useState(false);
+  const [shasum, setShasum] = useState(downloadInfo.x64.shasum);
 
   const showDownload = (type: 'x64' | 'arm' | 'web') => {
-    switch (type) {
-      case 'x64':
-        setArch('x64');
-        console.log(arch);
-        setShasum(downloadInfo.x64.shasum);
-        downloadModal.setVisible(true);
-        break;
-      case 'arm':
-        setArch('arm');
-        console.log(arch);
-        setShasum(downloadInfo.arm.shasum);
-        downloadModal.setVisible(true);
-        break;
-      case 'web':
-        webviewModal.setVisible(true);
-        break;
+    setArch(type);
+    if (type === 'web') {
+      webviewModal.setVisible(true);
+    } else {
+      setShasum(downloadInfo[type].shasum);
+      downloadModal.setVisible(true);
     }
   };
 
   const downloadHandler = () => {
     downloadModal.setVisible(false);
     setToast({
-      text: <Chiislate>This download is not available yet.</Chiislate>,
+      text: <Chiislate>Installable ISO images are under active development. Try the Web Demo in the meantime.</Chiislate>,
       delay: 5000,
-      type: 'error'
+      type: 'warning'
     });
-    // Uncomment the following when download becomes available
-    /*if (arch === 'x64') {
-      if (useTorrent) {
-        window.open(downloadInfo.x64.torrent);
-      } else {
-        window.open(downloadInfo.x64.link);
-      }
-    } else if (arch === 'arm') {
-      if (useTorrent) {
-        window.open(downloadInfo.arm.torrent);
-      } else {
-        window.open(downloadInfo.arm.link);
-      }
-    } else {
-      console.log(arch);
-    }*/
   };
 
-  const [gridDirection, setGridDirection] = useState<'row' | 'column' | 'row-reverse' | 'column-reverse'>('row');
-  const [gridWidth, setGridWidth] = useState(6);
-  const [useMobileMode, setMobileMode] = useState(false);
-  const [canDownload, setCanDownload] = useState(false);
-  const [shasum, setShasum] = useState(downloadInfo.x64.shasum);
-
-  dynamicWidth((width) => {
-    width < 1200 ? setMobileMode(true) : setMobileMode(false);
-    if (width < 950) {
-      setGridDirection('column');
-      setGridWidth(14);
-    } else {
-      setGridDirection('row');
-      setGridWidth(6);
-    }
-  });
-
   return (
     <>
-      <div className="text-center" id="overview">
-        <Spacer h={3} />
-        <Text className="header" h1>
-          <Chiislate>Give your PC an Upgrade.</Chiislate>
-        </Text>
-        <Spacer />
-        <Grid.Container gap={3} direction={gridDirection} alignItems="center" justify="center">
-          {useMobileMode ? null : (
-            <Grid xs={gridWidth}>
-              <Card
-                style={{ background: theme.palette.background }}
-                hoverable
-                paddingTop="40px"
-                paddingBottom="10px"
+      <div className="downloads-page" id="overview">
+        <div className="text-center" style={{ maxWidth: '800px', margin: '0 auto 48px auto' }}>
+          <Text h1 style={{ letterSpacing: '-0.03em', fontWeight: 500, marginBottom: '12px' }}>
+            <Chiislate>Concept downloads and demo</Chiislate>
+          </Text>
+          <Text p type="secondary" style={{ fontSize: '1.1rem', margin: 0 }}>
+            <Chiislate>
+              Try the interactive web prototype or follow progress toward installable system images.
+            </Chiislate>
+          </Text>
+        </div>
+
+        <Grid.Container gap={2} justify="center" style={{ maxWidth: '1040px', margin: '0 auto' }}>
+          <Grid xs={24} sm={12} md={8}>
+            <Card className="download-card" width="100%">
+              <div className="card-badge">
+                <Tag type="default">
+                  <Chiislate>Interactive prototype</Chiislate>
+                </Tag>
+              </div>
+              <div className="card-icon">
+                <Image
+                  draggable="false"
+                  src="/assets/icons/WEB.png"
+                  height="120px"
+                  width="120px"
+                  alt="Web preview"
+                />
+              </div>
+              <Text h4 style={{ marginTop: '16px', marginBottom: '4px', fontWeight: 500 }}>
+                <Chiislate>Browser demo</Chiislate>
+              </Text>
+              <Text p type="secondary" style={{ fontSize: '0.9rem', marginBottom: '20px' }}>
+                <Chiislate>Run the interface prototype directly in any modern desktop browser.</Chiislate>
+              </Text>
+              <Button
+                type="secondary"
+                auto
                 width="100%"
+                onClick={() => showDownload('web')}
               >
-                <Tag type="success">
-                  <Chiislate>Try in your Browser</Chiislate>
+                <Chiislate>Launch demo</Chiislate>
+              </Button>
+            </Card>
+          </Grid>
+
+          <Grid xs={24} sm={12} md={8}>
+            <Card className="download-card" width="100%">
+              <div className="card-badge">
+                <Tag type="default">
+                  <Chiislate>x86_64 architecture</Chiislate>
                 </Tag>
+              </div>
+              <div className="card-icon">
                 <Image
                   draggable="false"
-                  src="/assets/icons/WEB.png"
-                  height="100%"
-                  width="170px"
-                  alt="Test The OS in Website"
+                  src="/assets/icons/x64.png"
+                  height="120px"
+                  width="120px"
+                  alt="x64 architecture"
                 />
-                <Spacer h={0.4} />
-                <Button
-                  type="success"
-                  shadow
-                  onClick={() => {
-                    showDownload('web');
-                  }}
-                  margin="10px"
-                >
-                  <Chiislate>Open Demo</Chiislate>
-                </Button>
-                <Spacer h={0} />
-              </Card>
-            </Grid>
-          )}
-          <Grid xs={gridWidth}>
-            <Card
-              style={{ background: theme.palette.background }}
-              hoverable
-              paddingTop="40px"
-              paddingBottom="10px"
-              width="100%"
-            >
-              <Tag type="success">
-                <Chiislate>For most people</Chiislate>
-              </Tag>
-              <Spacer h={0.4} />
-              <Image draggable="false" src="/assets/icons/x64.png" height="100%" width="170px" alt="Download for x64" />
+              </div>
+              <Text h4 style={{ marginTop: '16px', marginBottom: '4px', fontWeight: 500 }}>
+                <Chiislate>x64 build</Chiislate>
+              </Text>
+              <Text p type="secondary" style={{ fontSize: '0.9rem', marginBottom: '20px' }}>
+                <Chiislate>Targeted for Intel and AMD 64-bit hardware workstations.</Chiislate>
+              </Text>
               <Button
-                type="success"
-                shadow
-                onClick={() => {
-                  showDownload('x64');
-                }}
-                margin="10px"
+                type="default"
+                auto
+                width="100%"
+                onClick={() => showDownload('x64')}
               >
-                <Chiislate>Download</Chiislate>
+                <Chiislate>Download ISO</Chiislate>
               </Button>
-              <Spacer h={0} />
             </Card>
           </Grid>
-          <Grid xs={gridWidth}>
-            <Card
-              style={{ background: theme.palette.background }}
-              hoverable
-              paddingTop="40px"
-              paddingBottom="10px"
-              width="100%"
-            >
-              <Tag type="success">
-                <Chiislate>For Pi, Pine, and Mac</Chiislate>
-              </Tag>
-              <Spacer h={0.4} />
-              <Image draggable="false" src="/assets/icons/ARM.png" height="100%" width="170px" alt="Download for arm" />
+
+          <Grid xs={24} sm={12} md={8}>
+            <Card className="download-card" width="100%">
+              <div className="card-badge">
+                <Tag type="default">
+                  <Chiislate>AArch64 architecture</Chiislate>
+                </Tag>
+              </div>
+              <div className="card-icon">
+                <Image
+                  draggable="false"
+                  src="/assets/icons/ARM.png"
+                  height="120px"
+                  width="120px"
+                  alt="ARM architecture"
+                />
+              </div>
+              <Text h4 style={{ marginTop: '16px', marginBottom: '4px', fontWeight: 500 }}>
+                <Chiislate>ARM64 build</Chiislate>
+              </Text>
+              <Text p type="secondary" style={{ fontSize: '0.9rem', marginBottom: '20px' }}>
+                <Chiislate>Designed for Raspberry Pi, PineBook, and ARM-based platforms.</Chiislate>
+              </Text>
               <Button
-                type="success"
-                shadow
-                onClick={() => {
-                  showDownload('arm');
-                }}
-                margin="10px"
+                type="default"
+                auto
+                width="100%"
+                onClick={() => showDownload('arm')}
               >
-                <Chiislate>Download</Chiislate>
+                <Chiislate>Download ISO</Chiislate>
               </Button>
-              <Spacer h={0} />
             </Card>
           </Grid>
         </Grid.Container>
-        <div className="mx-auto" style={{ width: '40%', margin: '40px' }}>
-          <Card hoverable className="text-center trouble" style={{ background: theme.palette.accents_1 }}>
+
+        <div className="help-box text-center">
+          <Text p type="secondary" style={{ margin: 0, fontSize: '0.95rem' }}>
             <Chiislate>
-              Having trouble? Click <Link href="/support">here</Link> to get help!
+              Looking for documentation or need assistance? Visit the <Link href="/support">Support Hub</Link> or join our community.
             </Chiislate>
-          </Card>
+          </Text>
         </div>
       </div>
+
       <Modal {...downloadModal.bindings}>
         <Modal.Title>
-          <Chiislate>Before you Download</Chiislate>
+          <Chiislate>Verification and terms</Chiislate>
         </Modal.Title>
         <Modal.Subtitle>
-          <Chiislate>Please read this before you continue</Chiislate>
+          <Chiislate>Release checksum and software license</Chiislate>
         </Modal.Subtitle>
         <Modal.Content>
-          <p>
-            <Chiislate>Below is the shasum of the download. You can use it to check download's integrity</Chiislate>:
+          <p style={{ fontSize: '0.9rem', marginBottom: '8px' }}>
+            <Chiislate>Cryptographic hash for package integrity verification</Chiislate>:
+          </p>
+          <Snippet symbol="" text={shasum} />
+          <p style={{ fontSize: '0.85rem', color: '#85858b', marginTop: '16px' }}>
+            <Chiislate>
+              AvdanOS is released under the GNU General Public License v3.0. Software is provided as-is without warranty.
+            </Chiislate>
           </p>
-          <Snippet symbol="" text={shasum}></Snippet>
-          <Spacer />
-          <Chiislate>
-            Warning: Software that we provided is licensed under GNU GPL 3.0. We provide absolutely no liability what so
-            ever, etc...
-          </Chiislate>
-          <br />
           <Checkbox
+            aria-label="Acknowledge GPL software terms"
             onChange={(e) => {
               setCanDownload(e.target.checked);
             }}
           >
-            <Chiislate>Yes, I understand</Chiislate>
-          </Checkbox>
-          <br />
-          <Checkbox
-            onChange={(e) => {
-              setTorrent(e.target.checked);
-            }}
-          >
-            <Chiislate>Use torrent download</Chiislate>
+            <Chiislate>I acknowledge and understand</Chiislate>
           </Checkbox>
         </Modal.Content>
         <Modal.Action passive onClick={() => downloadModal.setVisible(false)}>
@@ -240,36 +221,60 @@ const Download = () => {
           <Chiislate>Continue</Chiislate>
         </Modal.Action>
       </Modal>
+
       <Modal {...webviewModal.bindings}>
         <Modal.Title>
-          <Chiislate>Web preview</Chiislate>
+          <Chiislate>Interactive web prototype</Chiislate>
         </Modal.Title>
         <Modal.Content>
-          <p>
+          <p style={{ fontSize: '0.95rem', lineHeight: 1.6 }}>
             <Chiislate>
-              You're about to visit the web demo version of AvdanOS, which is only a proof of concept. Trying the live
-              system is strongly recommended to getting the full experience from the operating system.
+              You are launching the browser-based prototype of the AvdanOS desktop environment. This demonstration illustrates interactive concepts, menus, and window management directly in your web browser.
             </Chiislate>
-            <br />*
-            <Chiislate>Live system is currently not available because the system is still under development</Chiislate>
           </p>
         </Modal.Content>
         <Modal.Action passive onClick={() => webviewModal.setVisible(false)}>
-          <Chiislate>cancel</Chiislate>
+          <Chiislate>Cancel</Chiislate>
         </Modal.Action>
         <Modal.Action onClick={() => window.location.replace('/demo')}>
-          <Chiislate>Yes, take me there</Chiislate>
+          <Chiislate>Open prototype</Chiislate>
         </Modal.Action>
       </Modal>
+
       <style jsx>{`
-        .trouble {
-          background: ${theme.palette.background} !important;
+        .downloads-page {
+          padding: 80px 24px 100px 24px;
+        }
+        :global(.download-card) {
+          padding: 32px 24px !important;
+          border-radius: 12px !important;
+          border: 1px solid ${theme.type === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'} !important;
+          background: ${theme.type === 'dark' ? '#19191b' : '#ffffff'} !important;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          text-align: center;
         }
-        .trouble:hover {
-          background: ${theme.palette.accents_2} !important;
+        .card-badge {
+          margin-bottom: 24px;
+        }
+        .card-icon {
+          height: 120px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .help-box {
+          max-width: 600px;
+          margin: 48px auto 0 auto;
+          padding: 16px 24px;
+          border-radius: 8px;
+          background: ${theme.type === 'dark' ? '#141415' : '#f4f4f5'};
+          border: 1px solid ${theme.type === 'dark' ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)'};
         }
       `}</style>
     </>
   );
 };
+
 export default Download;
diff --git a/src/pages/features-beta.tsx b/src/pages/features-beta.tsx
index d4f7cc24..9351889b 100644
--- a/src/pages/features-beta.tsx
+++ b/src/pages/features-beta.tsx
@@ -17,7 +17,7 @@ const Features = () => {
     window.scroll(0, 0);
     const videoElement: HTMLVideoElement = document.getElementById('video') as HTMLVideoElement;
 
-    document.body.classList.add('stop-scrolling');
+    // scroll lock removed
     let count = 0;
 
     const waitingAnimation = setInterval(() => {
@@ -39,7 +39,7 @@ const Features = () => {
     videoElement.addEventListener('canplay', () => {
       clearInterval(waitingAnimation);
       console.log('video loaded');
-      document.body.classList.remove('stop-scrolling');
+      
       if (scrolldownRef.current) scrolldownRef.current.style.display = 'block';
       if (loadTextRef.current) loadTextRef.current.style.display = 'none';
     });
diff --git a/src/pages/features.tsx b/src/pages/features.tsx
index a9d6e45f..2b98533d 100644
--- a/src/pages/features.tsx
+++ b/src/pages/features.tsx
@@ -1,95 +1,115 @@
 import FeaturesCard from '@/components/FeaturesCard';
-import { Spacer, Text } from '@geist-ui/core';
+import { Text } from '@geist-ui/core';
 import Media from '@/components/media';
 import { Chiislate } from '@/components/translation/Chiislate';
 
-const features = () => {
+const Features = () => {
   return (
     <>
+      <div className="features-header text-center">
+        <Text h1 style={{ letterSpacing: '-0.03em', fontWeight: 500, marginBottom: '12px' }}>
+          <Chiislate>Designed around how you think</Chiislate>
+        </Text>
+        <Text p type="secondary" style={{ maxWidth: '600px', margin: '0 auto', fontSize: '1.1rem' }}>
+          <Chiislate>
+            Explore the core interactions, windowing models, and desktop concepts that define AvdanOS.
+          </Chiislate>
+        </Text>
+      </div>
+
       <FeaturesCard
         isInverted={false}
-        cardTitle="Familiar dock, ultimate form"
-        cardDescription="Everyone knows dock/task bar. We got a brand new dock, with more features than ever before."
+        cardTitle="Unified ribbon dock"
+        cardDescription="Dock and task manager combined into a single contextual strip that prioritizes your active tools without clutter."
         cardVideo="/assets/clips/dock.mp4"
       />
       <FeaturesCard
         isInverted={true}
-        cardTitle="Brand new launch menu"
-        cardDescription="With everything in one place, do anything anywhere at anytime."
+        cardTitle="Centralized launcher"
+        cardDescription="Access applications, recent documents, and global system search from one responsive quick surface."
         cardVideo="/assets/clips/launch-menu.mp4"
       />
       <FeaturesCard
         isInverted={false}
-        cardTitle="Easily apply layout"
-        cardDescription="With a list of presets determined from your apps, easily get to work with the perfect window layout. Not enough? Change it in the settings."
+        cardTitle="Preset window layouts"
+        cardDescription="Snap and arrange application windows with layout presets optimized for ultra-wide and laptop displays."
         cardVideo="/assets/clips/layout.mp4"
       />
       <FeaturesCard
         isInverted={true}
-        cardTitle="Overpowered Dock"
-        cardDescription="Your dock can do more than ever. It's your ultimate manager to get you organised."
+        cardTitle="Contextual status dock"
+        cardDescription="Monitor running background tasks, media controls, and priority notifications right from the edge of your screen."
         cardVideo="/assets/clips/overpowered-dock.mp4"
       />
       <FeaturesCard
         isInverted={false}
-        cardTitle="New way to manage files"
-        cardDescription="This file manager keeps you organised and productive. Find your files the instant you need it."
+        cardTitle="Streamlined file browser"
+        cardDescription="A clean file navigation experience featuring spatial breadcrumbs, instant indexing, and quick previews."
         cardVideo="/assets/clips/new-files.mp4"
       />
       <FeaturesCard
         isInverted={true}
-        cardTitle="Drag & drop made easy"
-        cardDescription="Drag and drop is the easiest way to transfer anything on your computer. We make it intuitive and easy to use."
+        cardTitle="Fluid drag and drop"
+        cardDescription="Move assets, content, and files across split workspaces and background windows in a single gesture."
         cardVideo="/assets/clips/drag-and-drop.mp4"
       />
       <FeaturesCard
         isInverted={false}
-        cardTitle="More than multitask"
-        cardDescription="Want to do many tasks at a time? We know you and we got you. It's now not only multitasking, it's organised multitasking."
+        cardTitle="Workspace multitasking"
+        cardDescription="Organize distinct projects into isolated virtual workspaces without sacrificing immediate window accessibility."
         cardVideo="/assets/clips/multitask.mp4"
       />
       <FeaturesCard
         isInverted={true}
-        cardTitle="TabOS!"
-        cardDescription="Browsers have proven how powerful tabs are, so why not use them to make your OS even more powerful?"
+        cardTitle="Tabbed application windows"
+        cardDescription="Group multiple instances or related application views together into tabs, bringing browser ergonomics to native software."
         cardVideo="/assets/clips/tab-os.mp4"
       />
       <FeaturesCard
         isInverted={false}
-        cardTitle="New context menu"
-        cardDescription="Context menu didn't change for multiple decades now. We are tired of a long list of items, and hey why not make it a circle? Don't like it? You can switch it back in settings!"
+        cardTitle="Radial context menus"
+        cardDescription="Quick contextual action rings designed for immediate mouse and pen input, with fallback to standard lists."
         cardVideo="/assets/clips/context-menu.mp4"
       />
       <FeaturesCard
         isInverted={true}
-        cardTitle="Your OS, your preference"
-        cardDescription="We give you control over your system. Theme is just an important one of them, and you can get more if you don't like ours."
+        cardTitle="System personalization"
+        cardDescription="Tailor interface accents, typography sizing, contrast themes, and behavior to fit your workstation setup."
         cardVideo="/assets/clips/personalize.mp4"
       />
       <FeaturesCard
         isInverted={false}
-        cardTitle="Day & Night"
-        cardDescription="Let different themes tell you what time it is. Hey, you can even make it reversed. Can you do it on Windows or MacOS?"
+        cardTitle="Dynamic day and night cycles"
+        cardDescription="Interface luminance and color balance synchronize automatically with your ambient environment across sunrise, daytime, and night."
         cardVideo="/assets/clips/day-and-night.mp4"
       />
 
-      <div className="text-center" style={{ height: '80vh' }}>
-        <Spacer h="calc(40vh - 150px)" />
-        <Text className="header" h1>
-          <Chiislate>Under development</Chiislate>
+      <section className="community-cta text-center">
+        <Text h2 style={{ letterSpacing: '-0.02em', fontWeight: 500, marginBottom: '12px' }}>
+          <Chiislate>Open development</Chiislate>
         </Text>
-        <Spacer h="35px" />
-        <Text>
+        <Text p type="secondary" style={{ maxWidth: '520px', margin: '0 auto 32px auto' }}>
           <Chiislate>
-            This project wouldn't be possible without the community's contributions. Join us and help!
+            AvdanOS is community driven and open source. Contribute code, design concepts, or join the discussion.
           </Chiislate>
         </Text>
-        <Spacer h="20px" />
         <Media />
-      </div>
-      <Spacer h={3} />
+      </section>
+
+      <style jsx>{`
+        .features-header {
+          padding: 80px 24px 32px 24px;
+          max-width: 900px;
+          margin: 0 auto;
+        }
+        .community-cta {
+          padding: 96px 24px 128px 24px;
+          max-width: 800px;
+          margin: 0 auto;
+        }
+      `}</style>
     </>
   );
 };
 
-export default features;
+export default Features;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 32687b6f..4bc9f7f5 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,4 +1,4 @@
-import { Button, Text, Spacer, useTheme } from '@geist-ui/core';
+import { Button, Text, useTheme } from '@geist-ui/core';
 import Link from 'next/link';
 import dynamicWidth from '@/lib/dynamic-width';
 import { useState } from 'react';
@@ -6,110 +6,169 @@ import Discover from '@/components/discover';
 import MiniFeatures from '@/components/miniFeatures';
 import { Chiislate } from '@/components/translation/Chiislate';
 
-const index = () => {
+const Index = () => {
   const theme = useTheme();
   const [useMobileBar, setMobileBar] = useState(false);
-  dynamicWidth((width) => (width < 1200 ? setMobileBar(true) : setMobileBar(false)));
+  dynamicWidth((width) => (width < 768 ? setMobileBar(true) : setMobileBar(false)));
 
   return (
     <>
-      <div className="video-player" style={{ position: 'absolute', zIndex: 0 }}>
-        <video autoPlay={true} muted loop style={{ height: '100%', width: '100%' }}>
-          <source type="video/webm" src="/assets/marketing/header_animated.webm" height="100%" width="100%" />
-        </video>
-      </div>
-      <Spacer h="30vh" />
-      <div style={{ position: 'relative', zIndex: '1' }}>
-        <div className="text-center">
-          <Text h1 className="header" style={{ fontSize: 'calc(2rem + 2vw)' }}>
-            <Chiislate>Your PC but Even Better!</Chiislate>
-          </Text>
+      <section className="hero-section">
+        <div className="video-player">
+          <video autoPlay muted loop playsInline>
+            <source type="video/webm" src="/assets/marketing/header_animated.webm" />
+          </video>
+          <div className="video-overlay" />
         </div>
-        <Spacer h={2} />
-        <div className="center card-container">
-          <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
-            {useMobileBar ? null : (
-              <Link href="/demo">
-                <Button shadow type="secondary" margin="10px">
-                  <Chiislate>Try in your browser</Chiislate>
+
+        <div className="hero-content">
+          <div className="text-center">
+            <Text h1 className="hero-headline">
+              <Chiislate>A modern desktop operating system</Chiislate>
+            </Text>
+            <Text p type="secondary" className="hero-subhead">
+              <Chiislate>
+                Fluid window grouping, intuitive gestures, and a unified dock built for focused computing.
+              </Chiislate>
+            </Text>
+          </div>
+
+          <div className="hero-actions">
+            {!useMobileBar && (
+              <Link href="/demo" passHref legacyBehavior>
+                <Button auto scale={1.1} type="secondary">
+                  <Chiislate>Try in browser</Chiislate>
                 </Button>
               </Link>
             )}
-            <Link href="/downloads">
-              <Button shadow type="success" margin="10px">
-                <Chiislate>Download Now!</Chiislate>
+            <Link href="/downloads" passHref legacyBehavior>
+              <Button auto scale={1.1} type="default">
+                <Chiislate>Download concept</Chiislate>
               </Button>
             </Link>
           </div>
         </div>
-        <Spacer h="35vh" />
+      </section>
+
+      <section className="section-container">
         <MiniFeatures />
-        <Spacer h="15vh" />
-        <Text h1 className="text-center">
-          <Chiislate>Open projects with open community</Chiislate>
-        </Text>
+      </section>
+
+      <section className="section-container">
+        <div className="text-center">
+          <Text h2 style={{ letterSpacing: '-0.02em', marginBottom: '8px' }}>
+            <Chiislate>Open projects, open community</Chiislate>
+          </Text>
+          <Text p type="secondary" style={{ maxWidth: '580px', margin: '0 auto 32px auto' }}>
+            <Chiislate>
+              Developed transparently on GitHub by contributors around the world under GPL-3.0.
+            </Chiislate>
+          </Text>
+        </div>
         <Discover />
-        <Spacer h={5} />
+      </section>
+
+      <section className="cta-section">
         <div className="text-center">
-          <Text h2>
-            <Chiislate>Interested? Give it a try!</Chiislate>
+          <Text h3 style={{ letterSpacing: '-0.02em', marginBottom: '12px' }}>
+            <Chiislate>Experience the interface concept</Chiislate>
+          </Text>
+          <Text p type="secondary" style={{ maxWidth: '480px', margin: '0 auto 24px auto' }}>
+            <Chiislate>
+              Interact with the desktop environment prototype directly in your browser or explore the codebase.
+            </Chiislate>
           </Text>
-          <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
-            {useMobileBar ? null : (
-              <Link href="/demo">
-                <Button shadow type="secondary" margin="10px">
-                  <Chiislate>Try in your browser</Chiislate>
+          <div className="hero-actions">
+            {!useMobileBar && (
+              <Link href="/demo" passHref legacyBehavior>
+                <Button auto scale={1.05} type="secondary">
+                  <Chiislate>Launch web demo</Chiislate>
                 </Button>
               </Link>
             )}
-            <Link href="/downloads">
-              <Button shadow type="success" margin="10px">
-                <Chiislate>Download Now!</Chiislate>
+            <Link href="/downloads" passHref legacyBehavior>
+              <Button auto scale={1.05} type="default">
+                <Chiislate>Get concept builds</Chiislate>
               </Button>
             </Link>
           </div>
         </div>
-        <Spacer h={2} />
-      </div>
+      </section>
+
       <style jsx>{`
-        .card-container {
+        .hero-section {
+          position: relative;
+          min-height: 80vh;
           display: flex;
-          flex-direction: column;
-          justify-content: center;
           align-items: center;
-          margin: 0 auto;
-          max-width: 500%;
-          padding: 0;
-          border-top: none !important;
-        }
-        .header {
-          background: -webkit-linear-gradient(#eee, ${theme.palette.accents_2});
-          -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent;
+          justify-content: center;
+          overflow: hidden;
+          padding: 80px 24px;
         }
         .video-player {
-          width: 100vw;
-          position: relative;
-          margin-bottom: ${useMobileBar ? '-20vh' : '-60vh'};
-          top: ${theme.type === 'dark' ? '0' : '90px'};
-        }
-        .video-player:before {
-          content: ' ';
           position: absolute;
+          inset: 0;
           width: 100%;
           height: 100%;
+          z-index: 0;
+          overflow: hidden;
+        }
+        .video-player video {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          opacity: ${theme.type === 'dark' ? '0.45' : '0.2'};
+        }
+        .video-overlay {
+          position: absolute;
+          inset: 0;
+          background: ${theme.type === 'dark'
+            ? 'radial-gradient(ellipse at center, rgba(20,20,21,0.65) 0%, rgba(20,20,21,0.95) 100%)'
+            : 'radial-gradient(ellipse at center, rgba(250,250,250,0.7) 0%, rgba(250,250,250,0.98) 100%)'};
+        }
+        .hero-content {
+          position: relative;
           z-index: 1;
-          left: 0;
-          top: 0;
-          background: rgba(0, 0, 0, 0.8);
-          background: linear-gradient(
-            0deg,
-            ${theme.palette.background} 0%,
-            ${theme.type === 'dark' ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0)'} 100%
-          );
+          max-width: 820px;
+          margin: 0 auto;
+          text-align: center;
+        }
+        :global(.hero-headline) {
+          font-size: clamp(2.5rem, 5vw, 4rem) !important;
+          font-weight: 500 !important;
+          line-height: 1.05 !important;
+          letter-spacing: -0.03em !important;
+          color: ${theme.palette.foreground} !important;
+          margin-bottom: 16px !important;
+        }
+        :global(.hero-subhead) {
+          font-size: clamp(1.1rem, 2vw, 1.25rem) !important;
+          max-width: 600px;
+          margin: 0 auto 32px auto !important;
+          line-height: 1.5 !important;
+        }
+        .hero-actions {
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+          gap: 16px;
+          flex-wrap: wrap;
+        }
+        .section-container {
+          position: relative;
+          padding: 64px 24px;
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+        .cta-section {
+          padding: 80px 24px 100px 24px;
+          max-width: 800px;
+          margin: 0 auto;
         }
       `}</style>
     </>
   );
 };
-export default index;
+
+export default Index;
diff --git a/src/pages/link/discord.tsx b/src/pages/link/discord.tsx
index e2f5b470..1b4373bf 100644
--- a/src/pages/link/discord.tsx
+++ b/src/pages/link/discord.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 
 const discordRedirect = () => {
   useEffect(() => {
-    window.location.replace('https://avdanos.org/discord');
+    window.location.replace('https://discord.gg/avdanos');
   });
 
   return <></>;
diff --git a/src/pages/manual/index.tsx b/src/pages/manual/index.tsx
index ae23309b..273345a9 100644
--- a/src/pages/manual/index.tsx
+++ b/src/pages/manual/index.tsx
@@ -1,6 +1,107 @@
-// prettier-ignore
+import { Text, Card, Grid, useTheme } from '@geist-ui/core';
+import Head from 'next/head';
+import Link from 'next/link';
+import { Chiislate } from '@/components/translation/Chiislate';
 
-const Download = () => {
-  return <>Manual is not available yet</>;
+const Manual = () => {
+  const theme = useTheme();
+
+  return (
+    <>
+      <Head>
+        <title>System Manual - AvdanOS</title>
+      </Head>
+      <div className="manual-page">
+        <div className="text-center" style={{ maxWidth: '720px', margin: '0 auto 48px auto' }}>
+          <Text h1 style={{ letterSpacing: '-0.03em', fontWeight: 500, marginBottom: '12px' }}>
+            <Chiislate>AvdanOS System Manual</Chiislate>
+          </Text>
+          <Text p type="secondary" style={{ fontSize: '1.05rem', margin: 0 }}>
+            <Chiislate>
+              Architecture documentation, window management, gesture controls, and setup guides.
+            </Chiislate>
+          </Text>
+        </div>
+
+        <Grid.Container gap={2} justify="center" style={{ maxWidth: '960px', margin: '0 auto' }}>
+          <Grid xs={24} md={12}>
+            <Card className="manual-card" width="100%">
+              <Text h4 style={{ marginBottom: '8px', fontWeight: 500 }}>
+                <Chiislate>Window Management & Layouts</Chiislate>
+              </Text>
+              <Text p type="secondary" style={{ fontSize: '0.9rem', lineHeight: 1.6 }}>
+                <Chiislate>
+                  Learn how to snap windows into preset configurations, group related applications into tabs, and switch workspaces using multi-touch gestures.
+                </Chiislate>
+              </Text>
+              <Link href="/features#preset-window-layouts" style={{ fontSize: '0.875rem' }}>
+                <Chiislate>View layout presets</Chiislate> →
+              </Link>
+            </Card>
+          </Grid>
+
+          <Grid xs={24} md={12}>
+            <Card className="manual-card" width="100%">
+              <Text h4 style={{ marginBottom: '8px', fontWeight: 500 }}>
+                <Chiislate>Unified Ribbon Dock</Chiislate>
+              </Text>
+              <Text p type="secondary" style={{ fontSize: '0.9rem', lineHeight: 1.6 }}>
+                <Chiislate>
+                  Understand the dock status indicators, notification hub integration, and application pinning ergonomics.
+                </Chiislate>
+              </Text>
+              <Link href="/features#unified-ribbon-dock" style={{ fontSize: '0.875rem' }}>
+                <Chiislate>Explore dock features</Chiislate> →
+              </Link>
+            </Card>
+          </Grid>
+
+          <Grid xs={24} md={12}>
+            <Card className="manual-card" width="100%">
+              <Text h4 style={{ marginBottom: '8px', fontWeight: 500 }}>
+                <Chiislate>Keyboard & Gesture Shortcuts</Chiislate>
+              </Text>
+              <Text p type="secondary" style={{ fontSize: '0.9rem', lineHeight: 1.6 }}>
+                <Chiislate>
+                  Comprehensive shortcut map for quick launching, workspace navigation, split-view arrangement, and radial context menus.
+                </Chiislate>
+              </Text>
+              <Link href="/demo" style={{ fontSize: '0.875rem' }}>
+                <Chiislate>Test shortcuts in demo</Chiislate> →
+              </Link>
+            </Card>
+          </Grid>
+
+          <Grid xs={24} md={12}>
+            <Card className="manual-card" width="100%">
+              <Text h4 style={{ marginBottom: '8px', fontWeight: 500 }}>
+                <Chiislate>System Architecture & Nadva DE</Chiislate>
+              </Text>
+              <Text p type="secondary" style={{ fontSize: '0.9rem', lineHeight: 1.6 }}>
+                <Chiislate>
+                  Developer documentation for Nadva desktop environment modules, theme engines, and open-source contribution guidelines.
+                </Chiislate>
+              </Text>
+              <Link href="https://github.com/Avdan-OS/Desktop-Environment" target="_blank" rel="noreferrer" style={{ fontSize: '0.875rem' }}>
+                <Chiislate>Browse Nadva repository</Chiislate> →
+              </Link>
+            </Card>
+          </Grid>
+        </Grid.Container>
+      </div>
+      <style jsx>{`
+        .manual-page {
+          padding: 80px 24px 100px 24px;
+        }
+        :global(.manual-card) {
+          padding: 24px !important;
+          border-radius: 12px !important;
+          border: 1px solid ${theme.type === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'} !important;
+          background: ${theme.type === 'dark' ? '#19191b' : '#ffffff'} !important;
+        }
+      `}</style>
+    </>
+  );
 };
-export default Download;
+
+export default Manual;
diff --git a/src/pages/support-beta.tsx b/src/pages/support-beta.tsx
index 2d54228c..1cf0ebd1 100644
--- a/src/pages/support-beta.tsx
+++ b/src/pages/support-beta.tsx
@@ -1,67 +1,52 @@
 import { Chiislate } from '@/components/translation/Chiislate';
-import Media from '@/components/media';
 import SupportCardBeta from '@/components/SupportCardBeta';
-import { Text, Input, Divider, Spacer } from '@geist-ui/core';
+import { Text, Input, Divider } from '@geist-ui/core';
 import { Search } from 'react-feather';
 
 const Support = () => {
   return (
-    <div style={{ margin: '1.5rem' }}>
-      <Text className="text-center" h1>
-        <Chiislate>AvdanOS Support Articles</Chiislate>
+    <div style={{ maxWidth: '1040px', margin: '48px auto', padding: '0 24px' }}>
+      <Text className="text-center" h1 style={{ letterSpacing: '-0.03em', fontWeight: 500, marginBottom: '16px' }}>
+        <Chiislate>Knowledge base and frequently asked questions</Chiislate>
       </Text>
-      <Input scale={4 / 3} className="text-center" icon={<Search />} placeholder="Search Support Articles" />
-      <Divider h="1px" mb={5} />
-      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+      <div style={{ maxWidth: '480px', margin: '0 auto 32px auto' }}>
+        <Input width="100%" scale={1.1} icon={<Search size={16} />} placeholder="Search articles..." />
+      </div>
+      <Divider mb={3} />
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '20px' }}>
         <SupportCardBeta
-          title="Lorem Ipsum dolor sit"
+          title="What is AvdanOS?"
           urlToPost="/"
-          description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, laborum expedita ipsa alias enim possimus, iure magnam maiores, eveniet deleniti praesentium sapiente neque fuga? Adipisci modi debitis sapiente ipsum corrupti."
+          description="AvdanOS is an open-source concept operating system designed around fluid windowing and a unified dock."
         />
         <SupportCardBeta
-          title="Lorem Ipsum dolor sit"
-          urlToPost="/"
-          description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, laborum expedita ipsa alias enim possimus, iure magnam maiores, eveniet deleniti praesentium sapiente neque fuga? Adipisci modi debitis sapiente ipsum corrupti."
+          title="When will an installable ISO be available?"
+          urlToPost="/downloads"
+          description="Architecture design and desktop environment builds are ongoing. Track progress in the official repo."
         />
         <SupportCardBeta
-          title="Lorem Ipsum dolor sit"
-          urlToPost="/"
-          description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, laborum expedita ipsa alias enim possimus, iure magnam maiores, eveniet deleniti praesentium sapiente neque fuga? Adipisci modi debitis sapiente ipsum corrupti."
+          title="How do I run the Web Demo?"
+          urlToPost="/demo"
+          description="Visit the /demo page directly in Chrome, Firefox, Safari, or Edge to experience the interactive prototype."
         />
         <SupportCardBeta
-          title="Lorem Ipsum dolor sit"
-          urlToPost="/"
-          description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, laborum expedita ipsa alias enim possimus, iure magnam maiores, eveniet deleniti praesentium sapiente neque fuga? Adipisci modi debitis sapiente ipsum corrupti."
+          title="Is AvdanOS open source under GPL?"
+          urlToPost="/docs"
+          description="All official repositories are licensed under the GNU General Public License v3.0."
         />
         <SupportCardBeta
-          title="Lorem Ipsum dolor sit"
-          urlToPost="/"
-          description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, laborum expedita ipsa alias enim possimus, iure magnam maiores, eveniet deleniti praesentium sapiente neque fuga? Adipisci modi debitis sapiente ipsum corrupti."
+          title="Can I contribute code or translations?"
+          urlToPost="https://github.com/Avdan-OS/Website"
+          description="We welcome community contributions for features, UI refinements, and localizations."
         />
         <SupportCardBeta
-          title="Lorem Ipsum dolor sit"
-          urlToPost="/"
-          description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, laborum expedita ipsa alias enim possimus, iure magnam maiores, eveniet deleniti praesentium sapiente neque fuga? Adipisci modi debitis sapiente ipsum corrupti."
-        />
-        <SupportCardBeta
-          title="Lorem Ipsum dolor sit"
-          urlToPost="/"
-          description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, laborum expedita ipsa alias enim possimus, iure magnam maiores, eveniet deleniti praesentium sapiente neque fuga? Adipisci modi debitis sapiente ipsum corrupti."
-        />
-        <SupportCardBeta
-          title="Lorem Ipsum dolor sit"
-          urlToPost="/"
-          description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, laborum expedita ipsa alias enim possimus, iure magnam maiores, eveniet deleniti praesentium sapiente neque fuga? Adipisci modi debitis sapiente ipsum corrupti."
+          title="How does window grouping work?"
+          urlToPost="/features"
+          description="AvdanOS allows multiple application windows to snap and merge into tabbed workspaces."
         />
       </div>
-      <Spacer h={5} />
-      <Text className="text-center" h4>
-        <Chiislate>Ask Our Community</Chiislate>
-      </Text>
-      <Spacer h={1} />
-
-      <Media />
     </div>
   );
 };
-export default Support;
+
+export default Support;
\ No newline at end of file
diff --git a/src/pages/support.tsx b/src/pages/support.tsx
index 00973d02..e1af69c8 100644
--- a/src/pages/support.tsx
+++ b/src/pages/support.tsx
@@ -1,69 +1,47 @@
-import { Text, Grid, Spacer } from '@geist-ui/core';
-import dynamicWidth from '@/lib/dynamic-width';
-import { useState } from 'react';
+import { Text, Grid } from '@geist-ui/core';
 import SupportCard from '@/components/SupportCard';
-import BetaPopup from '@/components/BetaPopup';
 import Link from 'next/link';
 import { Chiislate } from '@/components/translation/Chiislate';
 
 const Support = () => {
-  const [mobileLayout, useMobileLayout] = useState(false);
-
-  dynamicWidth((width) => {
-    width < 950 ? useMobileLayout(true) : useMobileLayout(false);
-  });
-
   return (
-    <>
-      <div className="text-center" id="overview">
-        <Spacer h={3} />
-        <Text className="header" h1>
-          <Chiislate>AvdanOS Support</Chiislate>
+    <div className="support-page" id="overview">
+      <div className="text-center" style={{ maxWidth: '720px', margin: '0 auto 48px auto' }}>
+        <Text h1 style={{ letterSpacing: '-0.03em', fontWeight: 500, marginBottom: '12px' }}>
+          <Chiislate>Community and support</Chiislate>
         </Text>
-        <Text h4>
-          <Chiislate>Contact Us On Social Media</Chiislate>
+        <Text p type="secondary" style={{ fontSize: '1.05rem', margin: 0 }}>
+          <Chiislate>Connect with the development team and community members across platforms.</Chiislate>
         </Text>
-        <Spacer h={2} />
-        <Grid.Container
-          gap={3}
-          marginLeft="calc(0.5% - 10px)"
-          direction={mobileLayout ? 'column' : 'row'}
-          alignItems="center"
-          justify="center"
-        >
-          <SupportCard icon="Twitter" title="Twitter" link="https://twitter.com/avdan_os" mobileLayout={mobileLayout} />
-          <SupportCard icon="GitHub" title="GitHub" link="https://github.com/Avdan-OS" mobileLayout={mobileLayout} />
-          <SupportCard
-            icon="YouTube"
-            title="YouTube"
-            link="https://www.youtube.com/channel/UCHLCBj83J7bR82HwjhCJusA"
-            mobileLayout={mobileLayout}
-          />
-          <SupportCard icon="Discord" title="Discord" link="https://avdanos.org/discord" mobileLayout={mobileLayout} />
-          <SupportCard
-            icon="Reddit"
-            title="Reddit"
-            link="https://www.reddit.com/r/AvdanOS/"
-            mobileLayout={mobileLayout}
-          />
-          <SupportCard
-            icon="Instagram"
-            title="Instagram"
-            link="https://instagram.com/avdanos_"
-            mobileLayout={mobileLayout}
-          />
-        </Grid.Container>
-        <Spacer h={5} />
-        <Text h4>
+      </div>
+
+      <Grid.Container gap={2} justify="center" style={{ maxWidth: '960px', margin: '0 auto' }}>
+        <SupportCard icon="GitHub" title="GitHub" link="https://github.com/Avdan-OS" />
+        <SupportCard icon="Discord" title="Discord" link="https://avdanos.org/discord" />
+        <SupportCard icon="Twitter" title="Twitter" link="https://twitter.com/avdan_os" />
+        <SupportCard icon="Reddit" title="Reddit" link="https://www.reddit.com/r/AvdanOS/" />
+        <SupportCard icon="YouTube" title="YouTube" link="https://www.youtube.com/channel/UCHLCBj83J7bR82HwjhCJusA" />
+        <SupportCard icon="Instagram" title="Instagram" link="https://instagram.com/avdanos_" />
+      </Grid.Container>
+
+      <div className="text-center" style={{ marginTop: '64px' }}>
+        <Text p type="secondary">
           <Chiislate>
-            Want to suggest anything to us? We always want to listen to the community. Present your ideas{' '}
-            <Link href="https://github.com/Avdan-OS/suggestions">here</Link>.
+            Have ideas or suggestions for AvdanOS? Share feedback on our{' '}
+            <Link href="https://github.com/Avdan-OS/suggestions" target="_blank" rel="noreferrer" style={{ textDecoration: 'underline' }}>
+              suggestions repository
+            </Link>.
           </Chiislate>
         </Text>
-        <Spacer h={5} />
-        <BetaPopup href="/support-beta" />
       </div>
-    </>
+
+      <style jsx>{`
+        .support-page {
+          padding: 80px 24px 100px 24px;
+        }
+      `}</style>
+    </div>
   );
 };
+
 export default Support;
diff --git a/src/public/assets/lang/en-US.yaml b/src/public/assets/lang/en-US.yaml
index f7ea0388..3af612e6 100644
--- a/src/public/assets/lang/en-US.yaml
+++ b/src/public/assets/lang/en-US.yaml
@@ -32,7 +32,7 @@ Docs:
 Demo:
 
 # index.tsx
-Your PC but Even Better!:
+A modern desktop operating system:
 Try in your browser:
 Download Now!:
 # miniFeaures.tsx
diff --git a/src/styles/animations.css b/src/styles/animations.css
index 13617ae3..d031792b 100644
--- a/src/styles/animations.css
+++ b/src/styles/animations.css
@@ -1,20 +1,14 @@
 .float-in-text {
-  animation: float-in-animation 1s ease-out;
-  -moz-animation: float-in-animation 1s ease-out;
-  -webkit-animation: float-in-animation 1s ease-out;
+  animation: float-in-animation 300ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 @keyframes float-in-animation {
   0% {
     opacity: 0;
-    transform: translateY(25px);
+    transform: translateY(12px);
   }
   100% {
     opacity: 1;
     transform: translateY(0);
   }
-}
-
-/* Planned more things. 
-For now it will be there 
-(or will be migrated) */
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/styles/components/cards.module.css b/src/styles/components/cards.module.css
index d7c87d4f..8202d22a 100644
--- a/src/styles/components/cards.module.css
+++ b/src/styles/components/cards.module.css
@@ -1,11 +1,14 @@
 .card {
-  backdrop-filter: blur(2rem);
-  -webkit-backdrop-filter: blur(2rem);
+  border-radius: 12px;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
 }
+
 .card__white {
-  background: rgba(255, 255, 255, 0.2) !important;
-  border: 1px solid rgba(180, 180, 180, 0.3) !important;
+  background: #ffffff !important;
+  border: 1px solid rgba(0, 0, 0, 0.08) !important;
 }
+
 .card__dark {
-  background: rgba(0, 0, 0, 0.2) !important;
-}
+  background: #19191b !important;
+  border: 1px solid rgba(255, 255, 255, 0.08) !important;
+}
\ No newline at end of file
diff --git a/src/styles/components/footer.css b/src/styles/components/footer.css
index a4f3555e..d6f25a8b 100644
--- a/src/styles/components/footer.css
+++ b/src/styles/components/footer.css
@@ -1,84 +1,2 @@
-.footer-dark h3 {
-  margin-top: 0;
-  margin-bottom: 12px;
-  font-weight: bold;
-  font-size: 16px;
-}
-
-.footer-dark ul {
-  padding: 0;
-  list-style: none;
-  line-height: 1.6;
-  font-size: 14px;
-  margin-bottom: 0;
-}
-
-.footer-dark ul a {
-  color: inherit;
-  text-decoration: none;
-  opacity: 0.6;
-}
-
-.footer-dark ul a:hover {
-  opacity: 0.8;
-}
-
-@media (max-width: 767px) {
-  .footer-dark .item:not(.social) {
-    text-align: center;
-    padding-bottom: 20px;
-  }
-}
-
-.footer-dark .item.text {
-  margin-bottom: 36px;
-}
-
-.footer-dark .item.text p {
-  opacity: 0.6;
-  margin-bottom: 0;
-}
-
-.footer-dark .copyright {
-  text-align: center;
-  padding-top: 12px;
-  opacity: 0.3;
-  font-size: 13px;
-  margin-bottom: 0;
-}
-
-.footer-item-1 {
-  grid-area: a;
-}
-.footer-item-2 {
-  grid-area: b;
-}
-.footer-item-3 {
-  grid-area: c;
-}
-.footer-item-4 {
-  grid-area: d;
-}
-.footer-item {
-  justify-content: center;
-  display: flex;
-}
-
-.container {
-  grid-template-columns: 50% 50%;
-  grid-template-rows: auto auto;
-  grid-template-areas:
-    'a b'
-    'c d';
-  align-items: stretch;
-  justify-content: space-between;
-  flex-direction: row;
-  padding: 0;
-  max-width: 100%;
-  width: 90%;
-  z-index: 2;
-}
-footer {
-  padding: 0;
-  z-index: 5;
-}
+/* Footer clean layout reset */
+.footer-dark { padding: 0; }
\ No newline at end of file
diff --git a/src/styles/components/navbar.css b/src/styles/components/navbar.css
index 40ccee01..02a3bfe7 100644
--- a/src/styles/components/navbar.css
+++ b/src/styles/components/navbar.css
@@ -48,7 +48,7 @@
   top: 0;
   right: 0;
   left: 0;
-  -webkit-backdrop-filter: blur(2em);
-  backdrop-filter: blur(2em);
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
   transition: box-shadow 0s ease;
 }
diff --git a/src/styles/features-beta.css b/src/styles/features-beta.css
index 1d34e767..d04c741c 100644
--- a/src/styles/features-beta.css
+++ b/src/styles/features-beta.css
@@ -5,7 +5,7 @@
   z-index: 0;
 }
 .slide {
-  margin-top: -80vh !important;
+  margin-top: 0 !important;
 }
 .slide-content {
   z-index: 1;
diff --git a/src/styles/index.css b/src/styles/index.css
index d411bb47..4e0de77c 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,6 +1,6 @@
 /* ScrollBar */
 .scroll-dark {
-  --scroll-bg: #0c0c0c;
+  --scroll-bg: #141415;
   --scroll-fg: #333;
 }
 .scroll-light {
@@ -32,27 +32,6 @@
   color: white !important;
 }
 
-.breath {
-  animation: breath 4s ease-out infinite normal;
-}
-
-@keyframes breath {
-  0% {
-    transform: translateY(0) size(1);
-  }
-
-  25% {
-    transform: translateY(-4px) size(1);
-  }
-
-  60% {
-    transform: translateY(-6px) scale(1.02);
-  }
-
-  100% {
-    transform: translateY(-10px) size(1);
-  }
-}
 #stacked {
   display: flex !important;
   flex-wrap: nowrap !important;
@@ -63,3 +42,10 @@
   min-width: 100% !important;
   font-size: 0.9rem;
 }
+
+/* Quiet hairline borders */
+.hairline-border {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+/* Refined app shell */
diff --git a/src/styles/slideshow_styles.css b/src/styles/slideshow_styles.css
index db6c1a3f..4f006c33 100644
--- a/src/styles/slideshow_styles.css
+++ b/src/styles/slideshow_styles.css
@@ -1,15 +1,15 @@
 .slideshow_alt {
-margin: 0 auto;
-overflow: hidden;
-max-width: 800px;
+  margin: 0 auto;
+  overflow: hidden;
+  max-width: 800px;
 }
 
 .slideshow_slider_alt {
   white-space: nowrap;
   width: min(90vw, 600px);
-  transition: ease 1s;
-  -moz-transition: ease 1s;
-  -webkit-transition: ease 1s;
+  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+  -moz-transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+  -webkit-transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .slide_alt {
@@ -20,9 +20,7 @@ max-width: 800px;
   background-size: contain;
 }
 
-
 /* Dots */
-
 .slideshow_dots {
   text-align: center;
 }
@@ -30,31 +28,15 @@ max-width: 800px;
 .slideshow_dot {
   background-color: #ccc;
   display: inline-block;
-  height: 20px;
-  width: 20px;
-  margin: 0 15px;
+  height: 8px;
+  width: 8px;
+  margin: 0 6px;
   border-radius: 50%;
-  transition: ease 1s;
-  -moz-transition: ease 1s;
-  -webkit-transition: ease 1s;
+  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+  -moz-transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+  -webkit-transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .slideshow_dot.active {
   background-color: #fff;
 }
-
-
-/* Text explaining each slide animation */
-
-.breathe_5s {
-  animation: text-breathe 5s infinite;
-}
-
-@keyframes text-breathe {
-  0%, 100% {
-    opacity: 0;
-  }
-  10%, 90% {
-    opacity: 1;
-  }
-}
\ No newline at end of file