diff --git a/src/components/HistoryList/HistoryList.tsx b/src/components/HistoryList/HistoryList.tsx
index 5ca0bd4..81f958f 100644
--- a/src/components/HistoryList/HistoryList.tsx
+++ b/src/components/HistoryList/HistoryList.tsx
@@ -25,7 +25,7 @@ const HistoryList = () => {
   };
 
   return (
-    <Card className="h-100">
+    <Card className="h-100 p-4">
       <CardHeader title="Alert History" />
       <button
         className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition md:w-[10%] mb-2"
@@ -33,9 +33,9 @@ const HistoryList = () => {
       >
         Clear List
       </button>
-      {isLoading && <p>Loading...</p>}
-      {error && <p className="text-red-500">Error: {error.message}</p>}
-      <div className="flex flex-col gap-1">
+      {isLoading && <p className="px-2">Loading...</p>}
+      {error && <p className="text-red-500 px-2">Error: {error.message}</p>}
+      <div className="flex flex-col gap-1 px-2">
         {state?.alertList?.length > 0 ? (
           state?.alertList?.map((alertItem, index) => (
             <div key={index} className="flex flex-row space-x-2">
diff --git a/src/components/SessionForm/HitSearchCard.tsx b/src/components/SessionForm/HitSearchCard.tsx
index c2c6b85..745a182 100644
--- a/src/components/SessionForm/HitSearchCard.tsx
+++ b/src/components/SessionForm/HitSearchCard.tsx
@@ -9,9 +9,9 @@ const SessionCard = () => {
   const { dispatch } = useAlertHitContext();
 
   return (
-    <Card>
+    <Card className="p-4">
       <CardHeader title={"Hit Search"} />
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4 px-2">
         <FormGroup>
           <label
             htmlFor="VRM"
diff --git a/src/components/SessionForm/SessionCard.tsx b/src/components/SessionForm/SessionCard.tsx
index 300b41b..1394bb8 100644
--- a/src/components/SessionForm/SessionCard.tsx
+++ b/src/components/SessionForm/SessionCard.tsx
@@ -10,9 +10,9 @@ const SessionCard = () => {
   };
 
   return (
-    <Card>
+    <Card className="p-4">
       <CardHeader title="Session" />
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4 px-2">
         <button
           className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full"
           onClick={handleStartClick}
diff --git a/src/components/SettingForms/BearerType/BearerTypeCard.tsx b/src/components/SettingForms/BearerType/BearerTypeCard.tsx
index 0b0442a..2e42a60 100644
--- a/src/components/SettingForms/BearerType/BearerTypeCard.tsx
+++ b/src/components/SettingForms/BearerType/BearerTypeCard.tsx
@@ -4,7 +4,7 @@ import BearerTypeFields from "./BearerTypeFields";
 
 const BearerTypeCard = () => {
   return (
-    <Card>
+    <Card className="p-4">
       <CardHeader title="Bearer Type" />
       <BearerTypeFields />
     </Card>
diff --git a/src/components/SettingForms/BearerType/BearerTypeFields.tsx b/src/components/SettingForms/BearerType/BearerTypeFields.tsx
index 0bff67f..db276b4 100644
--- a/src/components/SettingForms/BearerType/BearerTypeFields.tsx
+++ b/src/components/SettingForms/BearerType/BearerTypeFields.tsx
@@ -9,7 +9,7 @@ const BearerTypeFields = () => {
   useFormikContext();
 
   return (
-    <div className="flex flex-col space-y-4">
+    <div className="flex flex-col space-y-4 px-2">
       <div className="flex items-center gap-3 justify-between">
         <label htmlFor="format">Format</label>
         <Field
diff --git a/src/components/SettingForms/Channel1-JSON/ChannelCard.tsx b/src/components/SettingForms/Channel1-JSON/ChannelCard.tsx
index 7df5df8..a75cb6e 100644
--- a/src/components/SettingForms/Channel1-JSON/ChannelCard.tsx
+++ b/src/components/SettingForms/Channel1-JSON/ChannelCard.tsx
@@ -4,7 +4,7 @@ import ChannelFields from "./ChannelFields";
 
 const ChannelCard = () => {
   return (
-    <Card>
+    <Card className="p-4">
       <CardHeader title="Channel 1 (JSON)" />
       <ChannelFields />
     </Card>
diff --git a/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx b/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx
index 0cffccb..7ed45a5 100644
--- a/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx
+++ b/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx
@@ -8,7 +8,7 @@ const ChannelFields = () => {
   useFormikContext();
   const [showPwd, setShowPwd] = useState(false);
   return (
-    <div className="flex flex-col space-y-2">
+    <div className="flex flex-col space-y-2 px-2">
       <FormGroup>
         <label htmlFor="backoffice" className="m-0">
           Back Office URL
diff --git a/src/components/SettingForms/NPED/NPEDCard.tsx b/src/components/SettingForms/NPED/NPEDCard.tsx
index 0cbb585..a8b2474 100644
--- a/src/components/SettingForms/NPED/NPEDCard.tsx
+++ b/src/components/SettingForms/NPED/NPEDCard.tsx
@@ -5,7 +5,7 @@ import NPEDIcon from "/NPED.svg";
 
 const NPEDCard = () => {
   return (
-    <Card>
+    <Card className="p-4">
       <CardHeader title={"NPED Config"} img={NPEDIcon} />
       <NPEDFields />
     </Card>
diff --git a/src/components/SettingForms/NPED/NPEDFields.tsx b/src/components/SettingForms/NPED/NPEDFields.tsx
index f246eee..0288916 100644
--- a/src/components/SettingForms/NPED/NPEDFields.tsx
+++ b/src/components/SettingForms/NPED/NPEDFields.tsx
@@ -56,7 +56,7 @@ const NPEDFields = () => {
       enableReinitialize
     >
       {({ errors, touched }) => (
-        <Form className="flex flex-col space-y-5">
+        <Form className="flex flex-col space-y-5 px-2">
           <FormGroup>
             <label htmlFor="username">Username</label>
             {touched.username && errors.username && (
diff --git a/src/components/SettingForms/NPED/NPEDHotlist.tsx b/src/components/SettingForms/NPED/NPEDHotlist.tsx
index a654b7c..003a398 100644
--- a/src/components/SettingForms/NPED/NPEDHotlist.tsx
+++ b/src/components/SettingForms/NPED/NPEDHotlist.tsx
@@ -26,7 +26,7 @@ const NPEDHotlist = () => {
     <Formik initialValues={initialValue} onSubmit={handleSubmit}>
       {({ setFieldValue, setErrors, errors }) => {
         return (
-          <Form className="flex flex-col space-y-2">
+          <Form className="flex flex-col space-y-2 px-2">
             <input
               type="file"
               name="file"
diff --git a/src/components/SettingForms/NPED/NPEDHotlistCard.tsx b/src/components/SettingForms/NPED/NPEDHotlistCard.tsx
index 92582e0..6677897 100644
--- a/src/components/SettingForms/NPED/NPEDHotlistCard.tsx
+++ b/src/components/SettingForms/NPED/NPEDHotlistCard.tsx
@@ -4,7 +4,7 @@ import NPEDHotlist from "./NPEDHotlist";
 
 const NPEDHotlistCard = () => {
   return (
-    <Card>
+    <Card className="p-4">
       <CardHeader title={" Hotlist file upload"} />
       <NPEDHotlist />
     </Card>
diff --git a/src/components/SettingForms/OverviewText/OverviewTextCard.tsx b/src/components/SettingForms/OverviewText/OverviewTextCard.tsx
index 7855cd8..bcc777f 100644
--- a/src/components/SettingForms/OverviewText/OverviewTextCard.tsx
+++ b/src/components/SettingForms/OverviewText/OverviewTextCard.tsx
@@ -4,7 +4,7 @@ import OverviewTextFields from "./OverviewTextFields";
 
 const OverviewTextCard = () => {
   return (
-    <Card>
+    <Card className="p-4">
       <CardHeader title={"Overview Text"} />
       <OverviewTextFields />
     </Card>
diff --git a/src/components/SettingForms/OverviewText/OverviewTextFields.tsx b/src/components/SettingForms/OverviewText/OverviewTextFields.tsx
index 23545c9..e6944bc 100644
--- a/src/components/SettingForms/OverviewText/OverviewTextFields.tsx
+++ b/src/components/SettingForms/OverviewText/OverviewTextFields.tsx
@@ -6,7 +6,7 @@ const OverviewTextFields = () => {
   useFormikContext();
 
   return (
-    <div className="flex flex-col space-y-2">
+    <div className="flex flex-col space-y-2 px-2">
       <FormGroup>
         <label htmlFor="overviewQuality">Include VRM</label>
         <FormToggle name="includeVRM" />
diff --git a/src/components/SettingForms/SightingData/SightingDataCard.tsx b/src/components/SettingForms/SightingData/SightingDataCard.tsx
index 19c4f56..7c45214 100644
--- a/src/components/SettingForms/SightingData/SightingDataCard.tsx
+++ b/src/components/SettingForms/SightingData/SightingDataCard.tsx
@@ -4,7 +4,7 @@ import SightingDataFields from "./SightingDataFields";
 
 const SightingDataCard = () => {
   return (
-    <Card>
+    <Card className="p-4">
       <CardHeader title={"Sighting Data"} />
       <SightingDataFields />
     </Card>
diff --git a/src/components/SettingForms/SightingData/SightingDataFields.tsx b/src/components/SettingForms/SightingData/SightingDataFields.tsx
index 79c8c4c..262d694 100644
--- a/src/components/SettingForms/SightingData/SightingDataFields.tsx
+++ b/src/components/SettingForms/SightingData/SightingDataFields.tsx
@@ -6,7 +6,7 @@ const SightingDataFields = () => {
   useFormikContext();
 
   return (
-    <div className="flex flex-col space-y-2">
+    <div className="flex flex-col space-y-2 px-2">
       <FormGroup>
         <label htmlFor="overviewQuality">Overview Quality</label>
         <Field
diff --git a/src/components/SettingForms/System/SystemCard.tsx b/src/components/SettingForms/System/SystemCard.tsx
index 21d6cdc..55f21e1 100644
--- a/src/components/SettingForms/System/SystemCard.tsx
+++ b/src/components/SettingForms/System/SystemCard.tsx
@@ -4,7 +4,7 @@ import SystemConfigFields from "./SystemConfigFields.tsx";
 
 const SystemCard = () => {
   return (
-    <Card>
+    <Card className="p-4">
       <CardHeader title={"System Config"} />
       <SystemConfigFields />
     </Card>
diff --git a/src/components/SettingForms/System/SystemConfigFields.tsx b/src/components/SettingForms/System/SystemConfigFields.tsx
index d4a728c..cdc3f2e 100644
--- a/src/components/SettingForms/System/SystemConfigFields.tsx
+++ b/src/components/SettingForms/System/SystemConfigFields.tsx
@@ -38,7 +38,7 @@ const SystemConfigFields = () => {
       validateOnBlur
     >
       {({ values, errors, touched }) => (
-        <Form className="flex flex-col space-y-5">
+        <Form className="flex flex-col space-y-5 px-2">
           <FormGroup>
             <label
               htmlFor="deviceName"
diff --git a/src/components/SettingForms/WiFi&Modem/ModemCard.tsx b/src/components/SettingForms/WiFi&Modem/ModemCard.tsx
index e228301..79bcc52 100644
--- a/src/components/SettingForms/WiFi&Modem/ModemCard.tsx
+++ b/src/components/SettingForms/WiFi&Modem/ModemCard.tsx
@@ -11,9 +11,9 @@ const ModemCard = () => {
 
   return (
     // TODO: Add switch for Auto vs Manual settings
-    <Card>
+    <Card className="p-4">
       <CardHeader title={"Modem"} />
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4 px-2">
         <FormGroup>
           <label
             htmlFor="apn"
diff --git a/src/components/SettingForms/WiFi&Modem/WiFiCard.tsx b/src/components/SettingForms/WiFi&Modem/WiFiCard.tsx
index 6a88def..12345f9 100644
--- a/src/components/SettingForms/WiFi&Modem/WiFiCard.tsx
+++ b/src/components/SettingForms/WiFi&Modem/WiFiCard.tsx
@@ -9,9 +9,9 @@ const WiFiCard = () => {
   const [encryption, setEncryption] = useState("WPA2");
 
   return (
-    <Card className="mb-4">
+    <Card className="p-4">
       <CardHeader title={"WiFi"} />
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4 px-2">
         <FormGroup>
           <label
             htmlFor="ssid"