diff --git a/.github/workflows/e2e.yaml b/.github/workflows/e2e.yaml
index 1fd9808b..09c5ac79 100644
--- a/.github/workflows/e2e.yaml
+++ b/.github/workflows/e2e.yaml
@@ -1,4 +1,4 @@
-name: playright
+name: playwright
 on:
   push:
     branches: [main, prod-preview]
diff --git a/output.txt b/output.txt
deleted file mode 100644
index d395f4cd..00000000
--- a/output.txt
+++ /dev/null
@@ -1,28 +0,0 @@
-/*@jsxRuntime automatic @jsxImportSource react*/
-const {jsxDEV: _jsxDEV} = arguments[0];
-const {useMDXComponents: _provideComponents} = arguments[0];
-function _createMdxContent(props) {
-  const _components = Object.assign({
-    p: "p"
-  }, _provideComponents(), props.components);
-  return _jsxDEV(_components.p, {
-    children: "Halo pasas"
-  }, undefined, false, {
-    fileName: "<source.js>",
-    lineNumber: 1,
-    columnNumber: 1
-  }, this);
-}
-function MDXContent(props = {}) {
-  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
-  return MDXLayout ? _jsxDEV(MDXLayout, Object.assign({}, props, {
-    children: _jsxDEV(_createMdxContent, props, undefined, false, {
-      fileName: "<source.js>"
-    }, this)
-  }), undefined, false, {
-    fileName: "<source.js>"
-  }, this) : _createMdxContent(props);
-}
-return {
-  default: MDXContent
-};
diff --git a/public/blogs/simple.mdx b/public/blogs/simple.mdx
index 418ce295..e7da366b 100644
--- a/public/blogs/simple.mdx
+++ b/public/blogs/simple.mdx
@@ -21,4 +21,67 @@ tags:
 
 To test that you've removed this entirely you can use curl:
 </C>
+<C>
+ If youd like to preserve the default values for a theme option but
+          also add new values, add your extensions under the theme.extend key in
+          your configuration file. Values under this key are merged with
+          existing theme values and automatically become available as new
+          classes that you can use. As an example, here we extend the fontFamily
+          property to add the font-display class that can change the font used
+          on an element: If youd like to preserve the default values for a theme
+          option but also add new values, add your extensions under the
+          theme.extend key in your configuration file. Values under this key are
+          merged with existing theme values and automatically become available
+          as new classes that you can use. As an example, here we extend the
+          fontFamily property to add the font-display class that can change the
+          font used on an element: If youd like to preserve the default values
+          for a theme option but also add new values, add your extensions under
+          the theme.extend key in your configuration file. 
+                    <S2/>
+          Values under this key
+          are merged with existing theme values and automatically become
+          available as new classes that you can use. As an example, here we
+          extend the fontFamily property to add the font-display class that can
+          change the font used on an element: If youd like to preserve the
+          default values for a theme option but also add new values, add your
+          extensions under the theme.extend key in your configuration file.
+          Values under this key are merged with existing theme values and
+          automatically become available as new classes that you can use. As an
+          example, here we extend the fontFamily property to add the
+          font-display class that can change the font used on an element: If
+          youd like to preserve the default values for a theme option but also
+          add new values, add your extensions under the theme.extend key in your
+          configuration file. Values under this key are merged with existing
+          theme values and automatically become available as new classes that
+          you can use. As an example, here we extend the fontFamily property to
+          add the font-display class that can change the font used on an
+          element: If youd like to preserve the default values for a theme
+          option but also add new values, add your extensions under the
+          theme.extend key in your configuration file. Values under this key are
+          merged with existing theme values and automatically become available
+          as new classes that you can use. As an example, here we extend the
+          fontFamily property to add the font-display class that can change the
+          font used on an element: If youd like to preserve the default values
+          for a theme option but also add new values, add your extensions under
+          the theme.extend key in your configuration file. 
+          <S2/>
+          
+          Values under this key
+          are merged with existing theme values and automatically become
+          available as new classes that you can use. As an example, here we
+          extend the fontFamily property to add the font-display class that can
+          change the font used on an element: If youd like to preserve the
+          default values for a theme option but also add new values, add your
+          extensions under the theme.extend key in your configuration file.
+          Values under this key are merged with existing theme values and
+          automatically become available as new classes that you can use. As an
+          example, here we extend the fontFamily property to add the
+          font-display class that can change the font used on an element: If
+          youd like to preserve the default values for a theme option but also
+          add new values, add your extensions under the theme.extend key in your
+          configuration file. Values under this key are merged with existing
+          theme values and automatically become available as new classes that
+          you can use. As an example, here we extend the fontFamily property to
+          add the font-display class that can change the font used on an
+</C>
 
diff --git a/public/blogs/tester.mdx b/public/blogs/tester.mdx
index 0f20eb39..72776adc 100644
--- a/public/blogs/tester.mdx
+++ b/public/blogs/tester.mdx
@@ -80,7 +80,7 @@ language="python"
 showLineNumbers={true}
 
 > </Code>
-<br />
+
 <Code language="bash" showLineNumbers={true} code={`
 declare -A dotfiles=(
   [".zshrc"]="$REPO/.zshrc"
@@ -152,7 +152,7 @@ async function VideoComponent({ fileName }) {
 }`}
 language="typescript"
 showLineNumbers={true}
-
+copy={false}
 > </Code>
             <C>
                 All data is encrypted via SSL/TLS when transmitted from our servers to your browser.
diff --git a/src/app/(pages)/blog/[slug]/page.tsx b/src/app/(pages)/blog/[slug]/page.tsx
index 90d151b2..66ac34b9 100644
--- a/src/app/(pages)/blog/[slug]/page.tsx
+++ b/src/app/(pages)/blog/[slug]/page.tsx
@@ -1,5 +1,7 @@
-import StyledMDX, { Heading as H1 } from '@/app/components/mdx/styled-mdx';
+import StyledMDX from '@/app/components/mdx/styled-mdx';
+import { Heading1 as H1 } from '@/app/components/reusables/headers';
 import { formatDate, isSameMonthAndYear } from '@/lib/funcs/dates';
+import { MediumSection } from '@/app/components/reusables/sections';
 import type { Metadata, ResolvingMetadata } from 'next';
 
 import { notFound } from 'next/navigation';
@@ -12,7 +14,7 @@ export default function Blog({ params }: { params: { slug: string } }) {
   if (!post) {
     notFound();
   }
-  // TODO: use NEXT-SEO
+  // TODO: configure metadata
 
   return (
     <main>
@@ -35,7 +37,7 @@ export default function Blog({ params }: { params: { slug: string } }) {
           }),
         }}
       />
-      <section className="dimmed-5 mx-auto container sm:max-w-xl md:max-w-2xl lg:max-w-3xl xl:max-w-4xl">
+      <MediumSection>
         <H1>{post.parsedContent.attributes.title}</H1>
         <div className="flex justify-between items-center mb-8 text-sm sm:max-w-[450px]  md:max-w-[550px]  lg:max-w-[650px] xl:max-w-[750px] ">
           <p className="text-sm dimmed-0">
@@ -43,7 +45,10 @@ export default function Blog({ params }: { params: { slug: string } }) {
           </p>
           <div>
             {isSameMonthAndYear(post.parsedContent.attributes.firstModDate) ? (
-              <Badge variant={'outlineSuccess'}>New</Badge>
+              // TODO: replace with views
+              <Badge variant={'outlineSuccess'} className="opacity-0">
+                New
+              </Badge>
             ) : (
               <Badge variant={'outlineSuccess'} className="opacity-0">
                 New
@@ -54,7 +59,7 @@ export default function Blog({ params }: { params: { slug: string } }) {
         <article className="text-wrap">
           <StyledMDX source={post.parsedContent.body}></StyledMDX>
         </article>
-      </section>
+      </MediumSection>
     </main>
   );
 }
diff --git a/src/app/(pages)/blog/layout.tsx b/src/app/(pages)/blog/layout.tsx
index 829e45c4..a5abd100 100644
--- a/src/app/(pages)/blog/layout.tsx
+++ b/src/app/(pages)/blog/layout.tsx
@@ -1,5 +1,5 @@
 import { Navbar } from '@/app/components/reusables/nav';
-
+import Nav from '@/app/components/nav/nav';
 export default async function BlogsLayout({
   children,
 }: {
@@ -7,7 +7,7 @@ export default async function BlogsLayout({
 }) {
   return (
     <>
-      <Navbar></Navbar>
+      <Nav></Nav>
       <main>{children}</main>
     </>
   );
diff --git a/src/app/(pages)/blog/page.tsx b/src/app/(pages)/blog/page.tsx
index 7018d5fa..8dd4e7dc 100644
--- a/src/app/(pages)/blog/page.tsx
+++ b/src/app/(pages)/blog/page.tsx
@@ -11,7 +11,7 @@ export default function BlogPage() {
   let allBlogs = getBlogPosts();
   return (
     <section className="mx-auto container sm:max-w-xl md:max-w-3xl lg:max-w-3xl xl:max-w-3xl">
-      <h1 className="font-medium text-2xl mb-8 tracking-tighter">
+      <h1 className="font-medium text-2xl mb-8 tracking-tighter hidden">
         Unclassified, raw
       </h1>
       {allBlogs
diff --git a/src/app/(pages)/x/page.tsx b/src/app/(pages)/x/page.tsx
new file mode 100644
index 00000000..4499b639
--- /dev/null
+++ b/src/app/(pages)/x/page.tsx
@@ -0,0 +1,10 @@
+import LoadingScreen from '@/app/loading';
+import Nav from '@/app/components/nav/nav';
+export default function Fun() {
+  return (
+    <>
+      <Nav></Nav>
+      <LoadingScreen></LoadingScreen>
+    </>
+  );
+}
diff --git a/src/app/components/mdx/styled-mdx.tsx b/src/app/components/mdx/styled-mdx.tsx
index f6054372..9e6e2520 100644
--- a/src/app/components/mdx/styled-mdx.tsx
+++ b/src/app/components/mdx/styled-mdx.tsx
@@ -1,12 +1,16 @@
-import { ArrowUpRightSquare } from 'lucide-react';
 import { MDXRemote, MDXRemoteProps } from 'next-mdx-remote/rsc';
-import { Image as _Image, Skeleton } from '@nextui-org/react';
-import { Navbar } from '@/app/components/reusables/nav';
+import { Link } from '@/app/components/reusables/link';
+import { Image, Skeleton } from '@nextui-org/react';
 import { cn } from '@/lib/utils';
-import NextLink from 'next/link';
 import NextImage from 'next/image';
 import CodeBlock from '@/app/components/reusables/code-block';
-import React from 'react';
+import {
+  Heading2,
+  Heading3,
+  Heading1,
+} from '@/app/components/reusables/headers';
+import { Spacer1, Spacer2, Spacer3 } from '@/app/components/reusables/spacers';
+import { TextContent } from '@/app/components/reusables/content';
 
 export default function StyledMDX({ source }: { source: string }) {
   return (
@@ -14,34 +18,34 @@ export default function StyledMDX({ source }: { source: string }) {
       source={source}
       components={{
         Code: CodeBlock,
-        Nav: Navbar,
-        Image: BlogImage,
-        H: Heading,
+        Image: MDXImage,
+        H: Heading1,
         H2: Heading2,
         H3: Heading3,
-        S: Spacer,
+        S: Spacer1,
         S2: Spacer2,
         S3: Spacer3,
-        C: Content,
+        C: TextContent,
         L: Link,
       }}
     ></_StyledMDX>
   );
 }
+function _StyledMDX({ components, ...props }: MDXRemoteProps) {
+  return <MDXRemote {...props} components={{ ...components }} />;
+}
 
-type BlogImageProps = {
+type MDXImageProps = {
   alt: string;
   width: string;
   height: string;
   src: string;
   className?: string;
 };
-export function BlogImage(props: BlogImageProps) {
+export function MDXImage(props: MDXImageProps) {
   return (
     <Skeleton className="flex items-center justify-center">
-      <_Image
-        isLoading
-        isBlurred
+      <Image
         as={NextImage}
         className={cn('rounded-lg', props.className || '')}
         src={props.src}
@@ -52,87 +56,3 @@ export function BlogImage(props: BlogImageProps) {
     </Skeleton>
   );
 }
-
-export function Link({
-  href,
-  ...props
-}: {
-  href: string;
-  children: React.ReactNode;
-}) {
-  if (href.startsWith('#') || href.startsWith('/')) {
-    return (
-      <NextLink
-        href={href}
-        className="average-transition  font-bold text-fuchsia-400 hover:text-fuchsia-700"
-        {...props}
-      >
-        {props.children}
-      </NextLink>
-    );
-  }
-
-  return (
-    <NextLink
-      href={href}
-      className="average-transition font-bold text-pink-700 hover:text-pink-800 "
-      target="_blank"
-      rel="noopener noreferrer"
-      {...props}
-    >
-      {props.children}
-      <ArrowUpRightSquare
-        strokeWidth={'1.5px'}
-        size={'20px'}
-        style={{
-          display: 'inline-block',
-          marginLeft: '2px',
-          marginBottom: '3px',
-        }}
-      />
-    </NextLink>
-  );
-}
-
-type HeaderProps = {
-  children: React.ReactNode;
-  id?: string;
-};
-export function Heading({ children, id }: HeaderProps) {
-  return (
-    <h1 id={id} className="font-bold my-2 text-[3.0rem]">
-      {children}
-    </h1>
-  );
-}
-export function Heading2({ children, id }: HeaderProps) {
-  return (
-    <h2 id={id} className="text-3xl font-extrabold dimmed-5">
-      {children}
-    </h2>
-  );
-}
-export function Heading3({ children, id }: HeaderProps) {
-  return (
-    <h3 id={id} className="text-2xl font-extrabold dimmed-4">
-      {children}
-    </h3>
-  );
-}
-
-export function Content({ children }: { children: React.ReactNode }) {
-  return <p className="p-2 mx-2 font-normal dimmed-3">{children}</p>;
-}
-export function Spacer({ children }: { children: React.ReactNode }) {
-  return <div className="my-1">{children}</div>;
-}
-export function Spacer2({ children }: { children: React.ReactNode }) {
-  return <div className="my-2">{children}</div>;
-}
-export function Spacer3({ children }: { children: React.ReactNode }) {
-  return <div className="my-4">{children}</div>;
-}
-
-function _StyledMDX({ components, ...props }: MDXRemoteProps) {
-  return <MDXRemote {...props} components={{ ...components }} />;
-}
diff --git a/src/app/components/nav/buttons.tsx b/src/app/components/nav/buttons.tsx
new file mode 100644
index 00000000..179e1b0c
--- /dev/null
+++ b/src/app/components/nav/buttons.tsx
@@ -0,0 +1,34 @@
+import { GitBranch } from 'lucide-react';
+import { Image as _Image } from '@nextui-org/react';
+import NextLink from 'next/link';
+import { Button } from '../ui/button';
+
+export function OutLineButton({
+  href,
+  ...props
+}: {
+  href: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Button variant={'outline'}>
+      <NextLink
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        {...props}
+      >
+        {props.children}
+        <GitBranch
+          strokeWidth={'1.5px'}
+          size={'20px'}
+          style={{
+            display: 'inline-block',
+            marginLeft: '5px',
+            marginBottom: '3px',
+          }}
+        />
+      </NextLink>{' '}
+    </Button>
+  );
+}
diff --git a/src/app/components/nav/nav.tsx b/src/app/components/nav/nav.tsx
new file mode 100644
index 00000000..2d0c74c1
--- /dev/null
+++ b/src/app/components/nav/nav.tsx
@@ -0,0 +1,49 @@
+import { Button } from '../ui/button';
+import { OutLineButton } from './buttons';
+import Link from 'next/link';
+import clsx from 'clsx';
+
+const Nav = () => {
+  return (
+    <nav className="mx-auto flex h-[5.5rem] w-full max-w-[1344px] items-center px-5 sm:px-10">
+      <div
+        className={clsx(
+          'relative left-0 top-[4.375rem] z-20 h-[calc(100vh-4.375rem)] w-full overflow-y-auto  p-5  sm:px-10 xl:static xl:ml-10 xl:flex xl:h-auto xl:items-center xl:overflow-y-visible xl:bg-transparent xl:p-0 xl:dark:bg-transparent'
+        )}
+      >
+        <div className="flex flex-col gap-4 md:flex-row md:gap-8">
+          <Link className="nav-link-shadow dimmed-4 hover:text-white" href="/">
+            Home
+          </Link>
+          <Link
+            className="nav-link-shadow dimmed-4  hover:text-white"
+            href="/blog"
+          >
+            Blog
+          </Link>
+
+          <Link
+            className="nav-link-shadow  dimmed-4 hover:text-white"
+            href="/About"
+          >
+            About
+          </Link>
+        </div>
+        <div className="mt-10 xl:ml-auto xl:mt-0 xl:flex xl:items-center xl:gap-5">
+          <div className="mt-10 flex flex-wrap items-center gap-5 xl:mt-0">
+            <OutLineButton href={'https://github.com/ashgw/mysite'}>
+              {' '}
+            </OutLineButton>
+            <div>
+              <Button>Contact</Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <button className="ml-auto dark:text-[#D8D8D8] xl:hidden"></button>
+    </nav>
+  );
+};
+
+export default Nav;
diff --git a/src/app/components/reusables/blog-frame.tsx b/src/app/components/reusables/blog-frame.tsx
deleted file mode 100644
index 8994d29a..00000000
--- a/src/app/components/reusables/blog-frame.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { ReactNode } from 'react';
-
-const BlogFrameContainer: React.FC<{ children?: ReactNode }> = ({
-  children,
-}) => {
-  return (
-    <div className="mx-auto container sm:max-w-xl md:max-w-3xl lg:max-w-3xl xl:max-w-3xl">
-      {children}
-    </div>
-  );
-};
-
-export default BlogFrameContainer;
diff --git a/src/app/components/reusables/code-block.tsx b/src/app/components/reusables/code-block.tsx
index 5933437b..44d67e7e 100644
--- a/src/app/components/reusables/code-block.tsx
+++ b/src/app/components/reusables/code-block.tsx
@@ -8,6 +8,7 @@ import typescript from 'react-syntax-highlighter/dist/cjs/languages/prism/typesc
 import go from 'react-syntax-highlighter/dist/cjs/languages/prism/go';
 import bash from 'react-syntax-highlighter/dist/cjs/languages/prism/bash';
 import oneDark from 'react-syntax-highlighter/dist/cjs/styles/prism/one-dark';
+import CopyButton from './copy-code';
 
 SyntaxHighlighter.registerLanguage('rust', rust);
 SyntaxHighlighter.registerLanguage('python', python);
@@ -20,6 +21,7 @@ type Props = {
   code: string;
   showLineNumbers?: boolean;
   className?: string;
+  copy?: boolean;
 };
 
 export default function CodeBlock({
@@ -27,6 +29,7 @@ export default function CodeBlock({
   language,
   showLineNumbers,
   className,
+  copy = true,
 }: Props) {
   return (
     <div
@@ -35,6 +38,12 @@ export default function CodeBlock({
         className
       )}
     >
+      {copy && (
+        <CopyButton
+          code={code}
+          className="absolute right-2 top-2 inline-flex items-center"
+        />
+      )}
       <SyntaxHighlighter
         className="!m-0 overflow-auto !p-0 text-sm dark:!bg-black dark:[&>*]:!bg-black"
         language={language}
diff --git a/src/app/components/reusables/content.tsx b/src/app/components/reusables/content.tsx
new file mode 100644
index 00000000..d0ecf30d
--- /dev/null
+++ b/src/app/components/reusables/content.tsx
@@ -0,0 +1,3 @@
+export function TextContent({ children }: { children: React.ReactNode }) {
+  return <p className="p-2 mx-2 font-normal dimmed-3">{children}</p>;
+}
diff --git a/src/app/components/reusables/copy-code.tsx b/src/app/components/reusables/copy-code.tsx
new file mode 100644
index 00000000..3904f925
--- /dev/null
+++ b/src/app/components/reusables/copy-code.tsx
@@ -0,0 +1,29 @@
+'use client';
+import { FC } from 'react';
+import { Copy } from 'lucide-react';
+import clsx from 'clsx';
+import { useCopyToClipboard } from 'react-use';
+
+interface CopyButtonProps {
+  code: string;
+  className?: string;
+}
+
+const CopyButton: FC<CopyButtonProps> = ({ code, className }) => {
+  const [_, copyToClipboard] = useCopyToClipboard();
+  return (
+    <button
+      className={clsx(
+        'rounded-xl border-2 border-[#191919] p-2 px-3 py-2 transition hover:border-[#340929]   active:bg-[#340929]',
+        className
+      )}
+      onClick={() => {
+        copyToClipboard(code);
+      }}
+    >
+      <Copy size={'24px'} strokeWidth={'2px'} />
+    </button>
+  );
+};
+
+export default CopyButton;
diff --git a/src/app/components/reusables/headers.tsx b/src/app/components/reusables/headers.tsx
new file mode 100644
index 00000000..aa3f96df
--- /dev/null
+++ b/src/app/components/reusables/headers.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+type HeaderProps = {
+  children: React.ReactNode;
+  id?: string;
+};
+export function Heading1({ children, id }: HeaderProps) {
+  return (
+    <h1 id={id} className="font-bold my-2 text-[2.5rem]">
+      {children}
+    </h1>
+  );
+}
+export function Heading2({ children, id }: HeaderProps) {
+  return (
+    <h2 id={id} className="text-3xl font-extrabold dimmed-5">
+      {children}
+    </h2>
+  );
+}
+export function Heading3({ children, id }: HeaderProps) {
+  return (
+    <h3 id={id} className="text-2xl font-extrabold dimmed-4">
+      {children}
+    </h3>
+  );
+}
diff --git a/src/app/components/reusables/link.tsx b/src/app/components/reusables/link.tsx
new file mode 100644
index 00000000..25919f54
--- /dev/null
+++ b/src/app/components/reusables/link.tsx
@@ -0,0 +1,44 @@
+import { ArrowUpRightSquare } from 'lucide-react';
+import { Image as _Image } from '@nextui-org/react';
+import NextLink from 'next/link';
+
+export function Link({
+  href,
+  ...props
+}: {
+  href: string;
+  children: React.ReactNode;
+}) {
+  if (href.startsWith('#') || href.startsWith('/')) {
+    return (
+      <NextLink
+        href={href}
+        className="average-transition  font-bold text-fuchsia-400 hover:text-fuchsia-700"
+        {...props}
+      >
+        {props.children}
+      </NextLink>
+    );
+  }
+
+  return (
+    <NextLink
+      href={href}
+      className="average-transition font-bold text-pink-700 hover:text-pink-800 "
+      target="_blank"
+      rel="noopener noreferrer"
+      {...props}
+    >
+      {props.children}
+      <ArrowUpRightSquare
+        strokeWidth={'1.5px'}
+        size={'20px'}
+        style={{
+          display: 'inline-block',
+          marginLeft: '2px',
+          marginBottom: '3px',
+        }}
+      />
+    </NextLink>
+  );
+}
diff --git a/src/app/components/reusables/nav.tsx b/src/app/components/reusables/nav.tsx
deleted file mode 100644
index 7a787ca7..00000000
--- a/src/app/components/reusables/nav.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import Link from 'next/link';
-
-import React from 'react';
-import { Button } from '../ui/button';
-const navItems = {
-  '/': {
-    name: 'Home',
-  },
-  '/contact': {
-    name: 'Contact',
-  },
-  '/blog': {
-    name: 'Blog',
-  },
-  '/about': {
-    name: 'About',
-  },
-};
-
-export function Navbar() {
-  return (
-    <nav className="p-4">
-      <div className="container mx-auto flex items-center justify-between">
-        <div className="font-bold text-xl">A S H G W</div>
-        <div className="space-x-4">
-          {Object.entries(navItems).map(([path, { name }]) => (
-            <Button key={path}>
-              <Link key={path} href={path}>
-                {name}
-              </Link>
-            </Button>
-          ))}
-        </div>
-      </div>
-    </nav>
-  );
-}
diff --git a/src/app/components/reusables/sections.tsx b/src/app/components/reusables/sections.tsx
new file mode 100644
index 00000000..c06be2f6
--- /dev/null
+++ b/src/app/components/reusables/sections.tsx
@@ -0,0 +1,7 @@
+export function MediumSection({ children }: { children: React.ReactNode }) {
+  return (
+    <section className="dimmed-5 mx-auto container sm:max-w-xl md:max-w-2xl lg:max-w-3xl xl:max-w-4xl">
+      {children}
+    </section>
+  );
+}
diff --git a/src/app/components/reusables/spacers.tsx b/src/app/components/reusables/spacers.tsx
new file mode 100644
index 00000000..f9e455c3
--- /dev/null
+++ b/src/app/components/reusables/spacers.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export function Spacer1({ children }: { children: React.ReactNode }) {
+  return <div className="my-1">{children}</div>;
+}
+export function Spacer2({ children }: { children: React.ReactNode }) {
+  return <div className="my-2">{children}</div>;
+}
+export function Spacer3({ children }: { children: React.ReactNode }) {
+  return <div className="my-4">{children}</div>;
+}
diff --git a/src/app/components/reusables/styles/loader.scss b/src/app/components/reusables/styles/loader.scss
index 190eb819..987d2a66 100644
--- a/src/app/components/reusables/styles/loader.scss
+++ b/src/app/components/reusables/styles/loader.scss
@@ -18,11 +18,11 @@ $animation-duration: 1.5s;
       background-color: #0ddcf8;
     }
     42% {
-      background-color: hwb(251 30% 34%);
+      background-color: hwb(277 0% 0%);
     }
     50% {
       transform: scale(1);
-      background-color: #42b58fb8;
+      background-color: #4fb9ffed;
     }
   }
 
diff --git a/src/app/components/ui/button.tsx b/src/app/components/ui/button.tsx
index 81e2e6ee..e6dd1fc0 100644
--- a/src/app/components/ui/button.tsx
+++ b/src/app/components/ui/button.tsx
@@ -5,15 +5,16 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center  justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default:
+          'rounded-[1.1rem] bg-primary/95 opacity-95 text-primary-foreground hover:bg-primary hover:opacity-100 transition-all duration-300 ease-in-out',
         destructive:
           'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:
-          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+          'rounded-[1.1rem] border border-input bg-transparent hover:text-accent-foreground nav-link-shadow',
         secondary:
           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
diff --git a/src/app/globals.css b/src/app/globals.css
index 440046c8..d2587e96 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -99,6 +99,40 @@
     opacity: 1;
   }
 }
+.nav-link-shadow {
+  position: relative;
+}
+
+@media (min-width: 1024px) {
+  .nav-link-shadow::before {
+    content: '';
+    position: absolute;
+    height: 33px;
+    width: 70px;
+    z-index: -1;
+    background: linear-gradient(
+      86.87deg,
+      rgba(255, 0, 255, 0.3),
+      rgba(150, 255, 30, 0.2)
+    );
+    filter: blur(25px);
+    opacity: 0;
+    transition: opacity 0.3s ease-out;
+  }
+
+  .nav-link-shadow:hover::before {
+    opacity: 0.8;
+  }
+}
+
+@keyframes nav-link-shadow {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0.8;
+  }
+}
 
 @layer base {
   * {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1e158c23..f26126e9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,30 +3,78 @@
 import ThemeModeToggler from '@/app/components/reusables/theme-toggler';
 import CopyRight from '@/app/components/footer/copyright';
 import { Button } from '@/app/components/ui/button';
-import { Navbar } from '@/app/components/reusables/nav';
+import Nav from '@/app/components/nav/nav';
 import { Badge } from '@/app/components/ui/badge';
+import { TextContent } from './components/reusables/content';
+import { MediumSection } from './components/reusables/sections';
 
 export default function Home() {
   return (
     <>
-      <Navbar></Navbar>
-      <div className="mx-auto container sm:max-w-xl md:max-w-3xl lg:max-w-3xl xl:max-w-3xl">
-        <div className="flex items-center justify-center h-screen">
-          <Button
-            onClick={() => {
-              window.location.href = '/blog';
-            }}
-          >
-            Secret sauce
-          </Button>
-          <div className="px-5">
-            <ThemeModeToggler></ThemeModeToggler>
-          </div>
-          <br></br>
-          <Badge variant="success">New</Badge>
-        </div>
-      </div>
-      <CopyRight></CopyRight>
+      <Nav></Nav>
+      <MediumSection>
+        <TextContent>
+          If youd like to preserve the default values for a theme option but
+          also add new values, add your extensions under the theme.extend key in
+          your configuration file. Values under this key are merged with
+          existing theme values and automatically become available as new
+          classes that you can use. As an example, here we extend the fontFamily
+          property to add the font-display class that can change the font used
+          on an element: If youd like to preserve the default values for a theme
+          option but also add new values, add your extensions under the
+          theme.extend key in your configuration file. Values under this key are
+          merged with existing theme values and automatically become available
+          as new classes that you can use. As an example, here we extend the
+          fontFamily property to add the font-display class that can change the
+          font used on an element: If youd like to preserve the default values
+          for a theme option but also add new values, add your extensions under
+          the theme.extend key in your configuration file. Values under this key
+          are merged with existing theme values and automatically become
+          available as new classes that you can use. As an example, here we
+          extend the fontFamily property to add the font-display class that can
+          change the font used on an element: If youd like to preserve the
+          default values for a theme option but also add new values, add your
+          extensions under the theme.extend key in your configuration file.
+          Values under this key are merged with existing theme values and
+          automatically become available as new classes that you can use. As an
+          example, here we extend the fontFamily property to add the
+          font-display class that can change the font used on an element: If
+          youd like to preserve the default values for a theme option but also
+          add new values, add your extensions under the theme.extend key in your
+          configuration file. Values under this key are merged with existing
+          theme values and automatically become available as new classes that
+          you can use. As an example, here we extend the fontFamily property to
+          add the font-display class that can change the font used on an
+          element: If youd like to preserve the default values for a theme
+          option but also add new values, add your extensions under the
+          theme.extend key in your configuration file. Values under this key are
+          merged with existing theme values and automatically become available
+          as new classes that you can use. As an example, here we extend the
+          fontFamily property to add the font-display class that can change the
+          font used on an element: If youd like to preserve the default values
+          for a theme option but also add new values, add your extensions under
+          the theme.extend key in your configuration file. Values under this key
+          are merged with existing theme values and automatically become
+          available as new classes that you can use. As an example, here we
+          extend the fontFamily property to add the font-display class that can
+          change the font used on an element: If youd like to preserve the
+          default values for a theme option but also add new values, add your
+          extensions under the theme.extend key in your configuration file.
+          Values under this key are merged with existing theme values and
+          automatically become available as new classes that you can use. As an
+          example, here we extend the fontFamily property to add the
+          font-display class that can change the font used on an element: If
+          youd like to preserve the default values for a theme option but also
+          add new values, add your extensions under the theme.extend key in your
+          configuration file. Values under this key are merged with existing
+          theme values and automatically become available as new classes that
+          you can use. As an example, here we extend the fontFamily property to
+          add the font-display class that can change the font used on an
+          element:
+        </TextContent>
+
+        <CopyRight></CopyRight>
+      </MediumSection>
     </>
   );
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 8deeaa70..86202740 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,4 +1,5 @@
 import type { Config } from 'tailwindcss';
+import { nextui } from '@nextui-org/react';
 
 const config = {
   darkMode: ['class'],
@@ -74,7 +75,24 @@ const config = {
       },
     },
   },
-  plugins: [require('tailwindcss-animate')],
+  plugins: [
+    require('tailwindcss-animate'),
+    nextui({
+      layout: {
+        disabledOpacity: '0.3',
+        radius: {
+          small: '2px',
+          medium: '4px',
+          large: '6px',
+        },
+        borderWidth: {
+          small: '1px',
+          medium: '1px',
+          large: '2px',
+        },
+      },
+    }),
+  ],
 } satisfies Config;
 
 export default config;