diff --git a/apps/nextjs/app/dashboard/userVariables/[variableId]/charts/page.tsx b/apps/nextjs/app/dashboard/userVariables/[variableId]/charts/page.tsx
index f7f414093..b9ce75254 100644
--- a/apps/nextjs/app/dashboard/userVariables/[variableId]/charts/page.tsx
+++ b/apps/nextjs/app/dashboard/userVariables/[variableId]/charts/page.tsx
@@ -21,25 +21,12 @@ export default async function UserVariableChart({ params }: UserVariableEditProp
   if (!user) {
     redirect(authOptions?.pages?.signIn || "/signin")
   }
-
-  const response = await fetch(
-    `/api/dfda/userVariables?variableId=${params.variableId}&includeCharts=true`)
-  const userVariables = await response.json()
-  const userVariable = userVariables[0]
-
-  if (!userVariable) {
-    notFound()
-  }
-
+  const variableId = parseInt(params.variableId)
   return (
     <Shell>
-      <DashboardHeader
-        heading="UserVariable Settings"
-        text="Modify userVariable details."
-      />
       <div className="grid grid-cols-1 gap-10">
         <UserVariableCharts
-          userVariable={userVariable}
+          variableId={variableId}
         />
       </div>
     </Shell>
diff --git a/apps/nextjs/components/icons.tsx b/apps/nextjs/components/icons.tsx
index 0da676b1c..19885660c 100644
--- a/apps/nextjs/components/icons.tsx
+++ b/apps/nextjs/components/icons.tsx
@@ -18,7 +18,7 @@ import {
   BsMoonStars,
   BsSun,
 } from "react-icons/bs"
-import {FaBell, FaRegStar, FaSort, FaUserAlt} from "react-icons/fa"
+import {FaBell, FaChartBar, FaRegStar, FaSort, FaUserAlt} from "react-icons/fa"
 import { ImSpinner8, ImStatsBars } from "react-icons/im"
 import { LuSettings } from "react-icons/lu"
 import { MdDeleteForever, MdOutlineLogout } from "react-icons/md"
@@ -61,6 +61,7 @@ const icons = {
   add: AiOutlinePlus,
   reminder: FaBell,
   history: BiHistory,
+  charts: FaChartBar,
   signout: MdOutlineLogout,
   calendar: BiCalendar,
   sort: FaSort,
diff --git a/apps/nextjs/components/userVariable/user-variable-charts.tsx b/apps/nextjs/components/userVariable/user-variable-charts.tsx
index fe99c6932..30e6aa7e8 100644
--- a/apps/nextjs/components/userVariable/user-variable-charts.tsx
+++ b/apps/nextjs/components/userVariable/user-variable-charts.tsx
@@ -1,8 +1,14 @@
 "use client"
 
 import * as React from "react"
+import { FC } from 'react';
 import HighchartsReact from 'highcharts-react-official';
 import Highcharts from 'highcharts';
+// TODO: Fix highcharts accessibility
+// import highchartsAccessibility from "highcharts/modules/accessibility";
+// if (typeof window !== undefined) {
+//   highchartsAccessibility(Highcharts);
+// }
 
 import {
   Card,
@@ -12,40 +18,71 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card"
-import { toast } from "@/components/ui/use-toast"
-import { Icons } from "@/components/icons"
 import { UserVariable } from "@/types/models/UserVariable";
+import { useEffect, useState } from 'react';
+import { Icons } from "../icons";
 
 interface UserVariableChartsProps extends React.HTMLAttributes<HTMLFormElement> {
-  userVariable: UserVariable
+  variableId: number
 }
 
-export function UserVariableCharts({
-  userVariable,
-  className,
-  ...props
-}: UserVariableChartsProps) {
+export const UserVariableCharts: FC<UserVariableChartsProps> = ({ variableId }) => {
+  const [userVariable, setUserVariable] = useState<UserVariable>();
+  const [isLoading, setIsLoading] = useState(true); // Add a loading state
 
+  useEffect(() => {
+    const url = `/api/dfda/userVariables?variableId=${variableId}&includeCharts=1`;
 
-  return (
+    setIsLoading(true); // Set loading to true when the fetch starts
+    fetch(url)
+      .then(response => response.json())
+      .then(userVariables => {
+        const userVariable = userVariables[0];
+        delete userVariable.charts.lineChartWithSmoothing.highchartConfig.tooltip.formatter;
+        delete userVariable.charts.weekdayColumnChart.highchartConfig.tooltip.formatter;
+        delete userVariable.charts.monthlyColumnChart.highchartConfig.tooltip.formatter;
+        setUserVariable(userVariable);
+        setIsLoading(false); // Set loading to false when the fetch completes
+      })
+      .catch(error => {
+        console.error('Error fetching user variables:', error);
+        setIsLoading(false); // Ensure loading is set to false on error as well
+      });
+
+  }, [variableId]);
 
-      <Card>
-        <CardHeader>
-          <CardTitle>{userVariable.name}</CardTitle>
-          {userVariable.description && (
-            <CardDescription>{userVariable.description}</CardDescription>
-          )}
-        </CardHeader>
-        <CardContent className="space-y-4">
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{userVariable?.name}</CardTitle>
+        {userVariable?.description && (
+          <CardDescription>{userVariable.description}</CardDescription>
+        )}
+      </CardHeader>
+      {isLoading ? (
+        <div className="flex justify-center items-center">
+          <Icons.spinner className="animate-spin text-4xl" />
+        </div>
+      ) : (
+        <CardContent id="chart-card" className="space-y-4">
           <div className="card transparent-bg highcharts-container">
             <HighchartsReact
               highcharts={Highcharts}
-              options={userVariable.charts?.lineChartWithoutSmoothing?.highchartConfig}
+              options={userVariable?.charts?.lineChartWithSmoothing?.highchartConfig}
+            />
+            <HighchartsReact
+              highcharts={Highcharts}
+              options={userVariable?.charts?.monthlyColumnChart?.highchartConfig}
+            />
+            <HighchartsReact
+              highcharts={Highcharts}
+              options={userVariable?.charts?.weekdayColumnChart?.highchartConfig}
             />
           </div>
         </CardContent>
-        <CardFooter>
-        </CardFooter>
-      </Card>
+      )}
+      <CardFooter>
+      </CardFooter>
+    </Card>
   )
 }
diff --git a/apps/nextjs/components/userVariable/user-variable-item.tsx b/apps/nextjs/components/userVariable/user-variable-item.tsx
index 8a52305e8..6afb6bae7 100644
--- a/apps/nextjs/components/userVariable/user-variable-item.tsx
+++ b/apps/nextjs/components/userVariable/user-variable-item.tsx
@@ -7,6 +7,7 @@ import { UserVariableOperationsButton } from "@/components/userVariable/user-var
 import { QuickMeasurementButton } from '@/components/userVariable/measurements/quick-measurement-button';
 import { MeasurementButton } from '@/components/userVariable/measurement-button';
 import { UserVariable } from "@/types/models/UserVariable";
+import { Icons } from "../icons";
 
 interface UserVariableItemProps {
   userVariable: UserVariable;
@@ -27,7 +28,7 @@ export function UserVariableItem({ userVariable }: UserVariableItemProps) {
           ></div>*/}
           <div>
             <Link
-              href={`/dashboard/userVariables/${userVariable.id}`}
+              href={`/dashboard/userVariables/${userVariable.variableId}`}
               className="font-semibold hover:underline"
             >
               {userVariable.name}
@@ -45,19 +46,31 @@ export function UserVariableItem({ userVariable }: UserVariableItemProps) {
           </div>
         ) : null}*/}
       </div>
-      <div className="flex flex-row gap-2">
+      <div id="variable-buttons" className="flex flex-row gap-2">
         <MeasurementButton
           userVariable={userVariable}
           className="flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-muted"
           variant="outline"
           size="icon"
         />
-        <QuickMeasurementButton
+{/*        <QuickMeasurementButton
           userVariable={userVariable}
           className="flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-muted"
           variant="outline"
           size="icon"
-        />
+        />*/}
+        <Link
+          href={`/dashboard/userVariables/${userVariable.variableId}`}
+          className="flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-muted"
+        >
+          <Icons.history className="h-4 w-4" />
+        </Link>
+        <Link
+          href={`/dashboard/userVariables/${userVariable.variableId}/charts`}
+          className="flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-muted"
+        >
+          <Icons.charts className="h-4 w-4" />
+        </Link>
         <UserVariableOperationsButton
           userVariable={userVariable}
         />
diff --git a/apps/nextjs/components/userVariable/user-variable-list.tsx b/apps/nextjs/components/userVariable/user-variable-list.tsx
index b1ab7c817..930f00793 100644
--- a/apps/nextjs/components/userVariable/user-variable-list.tsx
+++ b/apps/nextjs/components/userVariable/user-variable-list.tsx
@@ -23,8 +23,10 @@ type UserVariableListProps = {
 export const UserVariableList: FC<UserVariableListProps> = ({ user, searchParams }) => {
 
   const [userVariables, setUserVariables] = useState<UserVariable[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
+    setIsLoading(true);
     // Ensure searchParams is an object
     const safeSearchParams = searchParams ?? {};
 
@@ -43,13 +45,19 @@ export const UserVariableList: FC<UserVariableListProps> = ({ user, searchParams
       .then(response => response.json())
       .then(userVariables => {
         setUserVariables(userVariables);
+        setIsLoading(false);
       })
-      .catch(error => console.error('Error fetching user variables:', error));
+      .catch(error => {
+        console.error('Error fetching user variables:', error);
+        setIsLoading(false); // Ensure loading is set to false even if there's an error
+      });
 
   }, [user, searchParams]);
 
   return (
     <>
+    {isLoading ? ( <div className="flex justify-center items-center"> 
+    <Icons.spinner className="animate-spin text-4xl" /> </div>) : "" }
       {userVariables?.length ? (
         <div className="flex flex-col"> {/* Add Tailwind classes here */}
           {userVariables.map((userVariable) => (