diff --git a/src/app/(advice)/advice.tsx b/src/app/(advice)/advice.tsx
index 5af6c38..c6fcc9b 100644
--- a/src/app/(advice)/advice.tsx
+++ b/src/app/(advice)/advice.tsx
@@ -10,11 +10,7 @@ import { Heading, IconButton, Text } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
 import React, { useCallback } from "react";
 
-export default function Advice({
-  initialAdvice,
-}: {
-  initialAdvice: AdviceType;
-}) {
+const Advice = ({ initialAdvice }: { initialAdvice: AdviceType }) => {
   const {
     data: advice,
     isFetching,
@@ -72,4 +68,6 @@ export default function Advice({
       />
     </Section>
   );
-}
+};
+
+export default Advice;
diff --git a/src/app/(advice)/adviceBoundary.tsx b/src/app/(advice)/adviceBoundary.tsx
index b6c6e2c..c0321b7 100644
--- a/src/app/(advice)/adviceBoundary.tsx
+++ b/src/app/(advice)/adviceBoundary.tsx
@@ -9,11 +9,7 @@ import React from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { Suspense } from "react";
 
-export default function AdviceBoundary({
-  initialAdvice,
-}: {
-  initialAdvice: AdviceType;
-}) {
+const AdviceBoundary = ({ initialAdvice }: { initialAdvice: AdviceType }) => {
   const { reset } = useQueryErrorResetBoundary();
 
   return (
@@ -28,4 +24,6 @@ export default function AdviceBoundary({
       </Suspense>
     </ErrorBoundary>
   );
-}
+};
+
+export default AdviceBoundary;
diff --git a/src/app/(advice)/error.tsx b/src/app/(advice)/error.tsx
index 3525cd7..4310993 100644
--- a/src/app/(advice)/error.tsx
+++ b/src/app/(advice)/error.tsx
@@ -7,7 +7,7 @@ import MobileDividerIcon from "@/theme/icons/MobileDividerIcon";
 import { Heading, IconButton, Text } from "@chakra-ui/react";
 import React from "react";
 
-export default function Error({ onClick }: { onClick: () => void }) {
+const Error = ({ onClick }: { onClick: () => void }) => {
   return (
     <Section
       size={["sm", "sm", "md"]}
@@ -48,4 +48,6 @@ export default function Error({ onClick }: { onClick: () => void }) {
       />
     </Section>
   );
-}
+};
+
+export default Error;
diff --git a/src/app/(advice)/layout.tsx b/src/app/(advice)/layout.tsx
index 8a1d10b..6a250d2 100644
--- a/src/app/(advice)/layout.tsx
+++ b/src/app/(advice)/layout.tsx
@@ -3,10 +3,12 @@
 import { Grid } from "@chakra-ui/react";
 import React, { ReactNode } from "react";
 
-export default function AdviceLayout({ children }: { children: ReactNode }) {
+const AdviceLayout = ({ children }: { children: ReactNode }) => {
   return (
     <Grid h="100vh" placeItems="center">
       {children}
     </Grid>
   );
-}
+};
+
+export default AdviceLayout;
diff --git a/src/app/(advice)/loading.tsx b/src/app/(advice)/loading.tsx
index 9005859..6a431ac 100644
--- a/src/app/(advice)/loading.tsx
+++ b/src/app/(advice)/loading.tsx
@@ -7,7 +7,7 @@ import { Box } from "@chakra-ui/react";
 const rollAnimation = `${roll} 400ms linear infinite`;
 const pulseAnimation = `${pulse} 2s linear infinite`;
 
-export default function Loading() {
+const Loading = () => {
   return (
     <Box
       display="flex"
@@ -24,4 +24,6 @@ export default function Loading() {
       <DiceIcon animation={rollAnimation} />
     </Box>
   );
-}
+};
+
+export default Loading;
diff --git a/src/app/(advice)/page.tsx b/src/app/(advice)/page.tsx
index 2295539..e97c2e9 100644
--- a/src/app/(advice)/page.tsx
+++ b/src/app/(advice)/page.tsx
@@ -2,8 +2,10 @@ import AdviceBoundary from "@/app/(advice)/adviceBoundary";
 import { fetchAdvice } from "@/app/(fetch)/fetchAdvice";
 import React from "react";
 
-export default async function Page() {
+const Page = async () => {
   const initialAdvice = await fetchAdvice();
 
   return <AdviceBoundary initialAdvice={initialAdvice} />;
-}
+};
+
+export default Page;
diff --git a/src/app/head.tsx b/src/app/head.tsx
index 512fdd3..5b06307 100644
--- a/src/app/head.tsx
+++ b/src/app/head.tsx
@@ -1,4 +1,4 @@
-export default function Head() {
+const Head = () => {
   return (
     <>
       <title>Frontend Mentor | Advice Generator App</title>
@@ -10,4 +10,6 @@ export default function Head() {
       <link rel="icon" href="/assets/favicon.ico" />
     </>
   );
-}
+};
+
+export default Head;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8ca758b..6f079ba 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,11 +2,7 @@ import { manrope } from "@/app/fonts";
 import Providers from "@/app/providers";
 import React from "react";
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+const RootLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <html lang="en" className={manrope.variable}>
       <head />
@@ -17,4 +13,6 @@ export default function RootLayout({
       </body>
     </html>
   );
-}
+};
+
+export default RootLayout;
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
index de542e6..0e1f7c7 100644
--- a/src/app/providers.tsx
+++ b/src/app/providers.tsx
@@ -6,7 +6,7 @@ import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React, { ReactNode, useState } from "react";
 
-export default function Providers({ children }: { children: ReactNode }) {
+const Providers = ({ children }: { children: ReactNode }) => {
   const [queryClient] = useState(
     () =>
       new QueryClient({
@@ -28,4 +28,6 @@ export default function Providers({ children }: { children: ReactNode }) {
       </CacheProvider>
     </QueryClientProvider>
   );
-}
+};
+
+export default Providers;
diff --git a/src/theme/components/Button.ts b/src/theme/components/Button.ts
index 585cf72..f048906 100644
--- a/src/theme/components/Button.ts
+++ b/src/theme/components/Button.ts
@@ -33,7 +33,8 @@ const Button = defineStyleConfig({
   variants: {
     fixed: {
       position: "absolute",
-      bottom: "-8",
+      bottom: 0,
+      transform: "translateY(var(--chakra-space-8))",
     },
   },
 });