diff --git a/src/app/(routegroups)/(projectroutes)/projects/[projectSlug]/[environmentSlug]/deployments/(deployments-page)/loading.tsx b/src/app/(routegroups)/(projectroutes)/projects/[projectSlug]/[environmentSlug]/deployments/(deployments-page)/loading.tsx
index 1a5e005b..b09bef2c 100644
--- a/src/app/(routegroups)/(projectroutes)/projects/[projectSlug]/[environmentSlug]/deployments/(deployments-page)/loading.tsx
+++ b/src/app/(routegroups)/(projectroutes)/projects/[projectSlug]/[environmentSlug]/deployments/(deployments-page)/loading.tsx
@@ -3,11 +3,58 @@
 import { usePathname } from 'next/navigation';
 
 import SectionWrapper from '@/components/SectionWrapper/SectionWrapper';
-import DeployLatest from '@/components/pages/deployments/_components/DeployLatest';
 import getDeploymentTableColumns from '@/components/pages/deployments/_components/TableColumns';
 import { deploymentResultOptions, statusOptions } from '@/components/pages/deployments/_components/filterValues';
-import { DataTable, DateRangePicker, SelectWithOptions } from '@uselagoon/ui-library';
+import {Button, DataTable, DateRangePicker, SelectWithOptions} from '@uselagoon/ui-library';
 import { useQueryStates } from 'nuqs';
+import {GitBranch, Zap} from "lucide-react";
+
+const deploymentOptions = [
+  {
+    type: 'full' as const,
+    icon: <GitBranch size={20} className="size-5" />,
+    title: 'Full Deployment',
+    description: 'Builds new images and applies all pending changes including variables, routes, and services.',
+  },
+  {
+    type: 'variables' as const,
+    icon: <Zap size={20} className="size-5" />,
+    title: 'Variables Only Deployment',
+    description: 'Faster deployment that updates runtime variables and restarts pods. Does not rebuild images.',
+  },
+];
+
+const DeployLatestSkeleton = () => (
+  <section className="py-4 px-[18px] rounded-lg border mb-6">
+    <div className="mb-4">
+      <h3 className="text-base font-medium">Deployment Type</h3>
+      <p className="text-sm text-gray-500 dark:text-gray-400">Choose how you want to deploy these changes</p>
+    </div>
+
+    <div className="flex gap-4">
+      {deploymentOptions.map(option => (
+        <Button
+          key={option.type}
+          variant={'full' === option.type ? 'default' : 'secondary'}
+          className={`flex-1 flex h-auto items-start gap-3 p-4 rounded-lg border text-left transition-all`}
+        >
+          <div className="flex gap-3">
+            <div className={`mt-0.5 flex-shrink-0 ${'full' === option.type ? 'text-blue-500' : 'text-gray-400'}`}>{option.icon}</div>
+            <div className="flex flex-col gap-1">
+              <span className="font-medium text-sm">{option.title}</span>
+              <span className="text-xs opacity-70 font-normal">{option.description}</span>
+            </div>
+          </div>
+        </Button>
+      ))}
+    </div>
+    <div className="flex justify-end mt-6">
+      <Button data-cy="deploy-button" disabled={false} onClick={() => {}}>
+        Deploy
+      </Button>
+    </div>
+  </section>
+);
 
 export default function Loading() {
   const [{ results }, setQuery] = useQueryStates({
@@ -25,7 +72,7 @@ export default function Loading() {
       <span className="text-[#737373] inline-block font-sans font-normal not-italic text-sm leading-normal tracking-normal mb-6">
         View previous deployments or trigger a new one
       </span>
-      <DeployLatest skeleton />
+      <DeployLatestSkeleton />
 
       <DataTable
         loading
diff --git a/src/components/pages/deployments/_components/DeployLatest.tsx b/src/components/pages/deployments/_components/DeployLatest.tsx
index b1ef2590..554178f9 100644
--- a/src/components/pages/deployments/_components/DeployLatest.tsx
+++ b/src/components/pages/deployments/_components/DeployLatest.tsx
@@ -3,8 +3,9 @@ import deployEnvironmentLatest from '@/lib/mutation/deployEnvironmentLatest';
 import { useMutation } from '@apollo/client';
 import { RefetchFunction } from '@apollo/client/react/hooks/useSuspenseQuery';
 import { Button, Skeleton } from '@uselagoon/ui-library';
-import { Loader2 } from 'lucide-react';
+import { AlertCircle, GitBranch, Loader2, Zap } from 'lucide-react';
 import { toast } from 'sonner';
+import { useState } from 'react';
 
 interface Props {
   environment: DeploymentsData['environment'];
@@ -22,19 +23,29 @@ interface PropsWithSkeleton {
   skeleton: true;
 }
 
-const DeployLatestSkeleton = () => (
-  <section className="flex items-center gap-[1rem] mb-6 py-1.5">
-    <div className="description flex gap-2 items-center">
-      Start a new deployment of <Skeleton className="w-[60px] h-8" />
-    </div>
-    <Button disabled>Deploy</Button>
-  </section>
-);
+type DeploymentType = 'full' | 'variables';
+
+
+const deploymentOptions = [
+  {
+    type: 'full' as const,
+    icon: <GitBranch size={20} className="size-5" />,
+    title: 'Full Deployment',
+    description: 'Builds new images and applies all pending changes including variables, routes, and services.',
+  },
+  {
+    type: 'variables' as const,
+    icon: <Zap size={20} className="size-5" />,
+    title: 'Variables Only Deployment',
+    description: 'Faster deployment that updates runtime variables and restarts pods. Does not rebuild images.',
+  },
+];
 
 const DeployLatestData: React.FC<Props> = ({ environment }) => {
   const { id, deployType, deployBaseRef, deployHeadRef, deployTitle } = environment;
+  const [selectedType, setSelectedType] = useState<DeploymentType>('full');
 
-  const [deployEnvironmentLatestMutation, { loading, error }] = useMutation(deployEnvironmentLatest, {
+  const [deployEnvironmentLatestMutation, { loading }] = useMutation(deployEnvironmentLatest, {
     onError: err => {
       console.error(err);
       toast.error('Deployment error', {
@@ -44,9 +55,11 @@ const DeployLatestData: React.FC<Props> = ({ environment }) => {
     },
     variables: {
       environmentId: id,
+      envVarOnly: selectedType === 'variables' ? "true" : "false",
     },
     onCompleted: () => {
-      toast.success('Deployment triggered');
+      const message = selectedType === 'variables' ? 'Variable-only deployment triggered' : 'Deployment triggered';
+      toast.success(message);
     },
     refetchQueries: ['getEnvironment'],
   });
@@ -65,38 +78,70 @@ const DeployLatestData: React.FC<Props> = ({ environment }) => {
     deploymentsEnabled = false;
   }
 
+  if (!deploymentsEnabled) {
+    return (
+      <section className="flex items-center gap-[1rem] mb-6 w-max py-1.5">
+        <div className="description text-sm leading-[1.375rem]">
+          Manual deployments are not available for this environment.
+        </div>
+        <Button data-cy="deploy-button" disabled>
+          Deploy
+        </Button>
+      </section>
+    );
+  }
+
   return (
-    <section className="flex items-center gap-[1rem] mb-6 w-max py-1.5">
-      {!deploymentsEnabled ? (
-        <>
-          <div className="description text-sm leading-[1.375rem]">
-            Manual deployments are not available for this environment.
-          </div>
-          <Button data-cy="deploy-button" disabled>
-            Deploy
+    <section className="py-4 px-[18px] rounded-lg border mb-6">
+      <div className="mb-4">
+        <h3 className="text-base font-medium">Deployment Type</h3>
+        <p className="text-sm text-gray-500 dark:text-gray-400">Choose how you want to deploy these changes</p>
+      </div>
+
+      <div className="flex gap-4">
+        {deploymentOptions.map(option => (
+          <Button
+            key={option.type}
+            variant={selectedType === option.type ? 'default' : 'secondary'}
+            onClick={() => setSelectedType(option.type)}
+            disabled={loading}
+            className={`flex-1 flex h-auto items-start gap-3 p-4 rounded-lg border text-left transition-all`}
+          >
+            <div className="flex gap-3">
+              <div className={`mt-0.5 flex-shrink-0 ${selectedType === option.type ? 'text-blue-500' : 'text-gray-400'}`}>{option.icon}</div>
+              <div className="flex flex-col gap-1">
+                <span className="font-medium text-sm">{option.title}</span>
+                <span className="text-xs opacity-70 font-normal">{option.description}</span>
+              </div>
+            </div>
           </Button>
-        </>
-      ) : (
-        <>
-          <div className="description text-sm leading-[1.375rem] flex gap-1 items-center">
-            {deployType === 'branch' && `Start a new deployment of branch ${deployBaseRef}.`}
-            {deployType === 'pullrequest' && `Start a new deployment of pull request ${deployTitle}.`}
-            {deployType === 'promote' &&
-              `Start a new deployment from environment ${environment.project.name}-${deployBaseRef}.`}
+        ))}
+      </div>
+
+      {selectedType === 'variables' && (
+        <div 
+          className="mt-6 p-4 rounded-lg flex gap-3 mt-6 p-4 rounded-lg flex gap-3 bg-amber-50 border border-amber-200 text-amber-900"
+        >
+          <AlertCircle className="w-5 h-5 flex-shrink-0 mt-0.5" />
+          <div>
+            <h4 className="font-medium">Partial Deployment Warning</h4>
+            <p className="text-sm mt-1">
+              Some changes will not fully apply with a variables only deployment. Runtime variables will update now. Build scoped behaviour and other changes will only take effect after a full deployment.
+            </p>
           </div>
-          <Button data-cy="deploy-button" disabled={loading} onClick={() => deployEnvironmentLatestMutation()}>
-            {loading && <Loader2 className="animate-spin" />} Deploy
-          </Button>
-        </>
+        </div>
       )}
+
+      <div className="flex justify-end mt-6">
+        <Button data-cy="deploy-button" disabled={loading} onClick={() => deployEnvironmentLatestMutation()}>
+          {loading && <Loader2 className="animate-spin" />} Deploy
+        </Button>
+      </div>
     </section>
   );
 };
 
 const DeployLatest = (props: Props | PropsWithSkeleton) => {
-  if ('skeleton' in props && props.skeleton) {
-    return <DeployLatestSkeleton />;
-  }
   return <DeployLatestData {...(props as Props)} />;
 };
 
diff --git a/src/lib/mutation/deployEnvironmentLatest.ts b/src/lib/mutation/deployEnvironmentLatest.ts
index b854fe6d..deb0d6df 100644
--- a/src/lib/mutation/deployEnvironmentLatest.ts
+++ b/src/lib/mutation/deployEnvironmentLatest.ts
@@ -1,7 +1,14 @@
 import { gql } from '@apollo/client';
 
 export default gql`
-  mutation deployEnvironmentLatest($environmentId: Int!) {
-    deployEnvironmentLatest(input: { environment: { id: $environmentId } })
+  mutation deployEnvironmentLatest($environmentId: Int!, $envVarOnly: String = "false") {
+    deployEnvironmentLatest(input: { environment: { id: $environmentId },
+      buildVariables: [
+        {
+          name: "LAGOON_VARIABLES_ONLY",
+          value: $envVarOnly
+        }
+      ]
+    })
   }
 `;