diff --git a/web/src/components/AnalyticsDialog.tsx b/web/src/components/AnalyticsDialog.tsx
index 1a777a4..1e4c598 100644
--- a/web/src/components/AnalyticsDialog.tsx
+++ b/web/src/components/AnalyticsDialog.tsx
@@ -32,22 +32,16 @@ const AnalyticsDialog: React.FC<Props> = (props: Props) => {
           {analytics ? (
             <>
               <p className="w-full py-1 px-2">Top Sources</p>
-              <div className="mt-1 overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
-                <table className="min-w-full divide-y divide-gray-300">
-                  <thead>
-                    <tr>
-                      <th scope="col" className="py-1 px-2 text-left font-semibold text-sm text-gray-500">
-                        Source
-                      </th>
-                      <th scope="col" className="py-1 pr-2 text-right font-semibold text-sm text-gray-500">
-                        Visitors
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody className="divide-y divide-gray-200">
+              <div className="w-full mt-1 overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
+                <div className="w-full divide-y divide-gray-300">
+                  <div className="w-full flex flex-row justify-between items-center">
+                    <span className="py-1 px-2 text-left font-semibold text-sm text-gray-500">Source</span>
+                    <span className="py-1 pr-2 text-right font-semibold text-sm text-gray-500">Visitors</span>
+                  </div>
+                  <div className="w-full divide-y divide-gray-200">
                     {analytics.referenceData.map((reference) => (
-                      <tr key={reference.name}>
-                        <td className="whitespace-nowrap py-2 px-2 text-sm text-gray-900">
+                      <div key={reference.name} className="w-full flex flex-row justify-between items-center">
+                        <span className="whitespace-nowrap py-2 px-2 text-sm truncate text-gray-900">
                           {reference.name ? (
                             <a className="hover:underline hover:text-blue-600" href={reference.name} target="_blank">
                               {reference.name}
@@ -55,28 +49,17 @@ const AnalyticsDialog: React.FC<Props> = (props: Props) => {
                           ) : (
                             "Direct"
                           )}
-                        </td>
-                        <td className="whitespace-nowrap py-2 pr-2 text-sm text-gray-500 text-right">{reference.count}</td>
-                      </tr>
+                        </span>
+                        <span className="whitespace-nowrap py-2 pr-2 text-sm text-gray-500 text-right shrink-0">{reference.count}</span>
+                      </div>
                     ))}
-                  </tbody>
-                </table>
+                  </div>
+                </div>
               </div>
 
               <div className="w-full mt-4 py-1 px-2 flex flex-row justify-between items-center">
                 <span>Devices</span>
                 <div>
-                  <button
-                    className={`whitespace-nowrap border-b-2 px-1 text-sm font-medium ${
-                      selectedDeviceTab === "os"
-                        ? "border-blue-600 text-blue-600"
-                        : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
-                    }`}
-                    onClick={() => setSelectedDeviceTab("os")}
-                  >
-                    OS
-                  </button>
-                  <span className="text-gray-200 font-mono mx-1">/</span>
                   <button
                     className={`whitespace-nowrap border-b-2 px-1 text-sm font-medium ${
                       selectedDeviceTab === "browser"
@@ -87,52 +70,51 @@ const AnalyticsDialog: React.FC<Props> = (props: Props) => {
                   >
                     Browser
                   </button>
+                  <span className="text-gray-200 font-mono mx-1">/</span>
+                  <button
+                    className={`whitespace-nowrap border-b-2 px-1 text-sm font-medium ${
+                      selectedDeviceTab === "os"
+                        ? "border-blue-600 text-blue-600"
+                        : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                    }`}
+                    onClick={() => setSelectedDeviceTab("os")}
+                  >
+                    OS
+                  </button>
                 </div>
               </div>
 
-              <div className="mt-1 overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
-                {selectedDeviceTab === "os" ? (
-                  <table className="min-w-full divide-y divide-gray-300">
-                    <thead>
-                      <tr>
-                        <th scope="col" className="py-2 px-2 text-left text-sm font-semibold text-gray-500">
-                          Operating system
-                        </th>
-                        <th scope="col" className="py-2 pr-2 text-right text-sm font-semibold text-gray-500">
-                          Visitors
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody className="divide-y divide-gray-200">
-                      {analytics.deviceData.map((reference) => (
-                        <tr key={reference.name}>
-                          <td className="whitespace-nowrap py-2 px-2 text-sm text-gray-900">{reference.name || "Unknown"}</td>
-                          <td className="whitespace-nowrap py-2 pr-2 text-sm text-gray-500 text-right">{reference.count}</td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                ) : (
-                  <table className="min-w-full divide-y divide-gray-300">
-                    <thead>
-                      <tr>
-                        <th scope="col" className="py-2 px-2 text-left text-sm font-semibold text-gray-500">
-                          Browsers
-                        </th>
-                        <th scope="col" className="py-2 pr-2 text-right text-sm font-semibold text-gray-500">
-                          Visitors
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody className="divide-y divide-gray-200">
+              <div className="w-full mt-1 overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
+                {selectedDeviceTab === "browser" ? (
+                  <div className="w-full divide-y divide-gray-300">
+                    <div className="w-full flex flex-row justify-between items-center">
+                      <span className="py-2 px-2 text-left text-sm font-semibold text-gray-500">Browsers</span>
+                      <span className="py-2 pr-2 text-right text-sm font-semibold text-gray-500">Visitors</span>
+                    </div>
+                    <div className="w-full divide-y divide-gray-200">
                       {analytics.browserData.map((reference) => (
-                        <tr key={reference.name}>
-                          <td className="whitespace-nowrap py-2 px-2 text-sm text-gray-900">{reference.name || "Unknown"}</td>
-                          <td className="whitespace-nowrap py-2 pr-2 text-sm text-gray-500 text-right">{reference.count}</td>
-                        </tr>
+                        <div key={reference.name} className="w-full flex flex-row justify-between items-center">
+                          <span className="whitespace-nowrap py-2 px-2 text-sm text-gray-900 truncate">{reference.name || "Unknown"}</span>
+                          <span className="whitespace-nowrap py-2 pr-2 text-sm text-gray-500 text-right shrink-0">{reference.count}</span>
+                        </div>
                       ))}
-                    </tbody>
-                  </table>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="w-full divide-y divide-gray-300">
+                    <div className="w-full flex flex-row justify-between items-center">
+                      <span className="py-2 px-2 text-left text-sm font-semibold text-gray-500">Operating system</span>
+                      <span className="py-2 pr-2 text-right text-sm font-semibold text-gray-500">Visitors</span>
+                    </div>
+                    <div className="w-full divide-y divide-gray-200">
+                      {analytics.deviceData.map((device) => (
+                        <div key={device.name} className="w-full flex flex-row justify-between items-center">
+                          <span className="whitespace-nowrap py-2 px-2 text-sm text-gray-900 truncate">{device.name || "Unknown"}</span>
+                          <span className="whitespace-nowrap py-2 pr-2 text-sm text-gray-500 text-right shrink-0">{device.count}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
                 )}
               </div>
             </>
diff --git a/web/src/components/ShortcutView.tsx b/web/src/components/ShortcutView.tsx
index f9e9700..3b27b89 100644
--- a/web/src/components/ShortcutView.tsx
+++ b/web/src/components/ShortcutView.tsx
@@ -81,7 +81,7 @@ const ShortcutView = (props: Props) => {
             </a>
             <Tooltip title="Copy" variant="solid" placement="top" arrow>
               <button
-                className="hidden group-hover:block w-6 h-6 cursor-pointer rounded-full text-gray-500 hover:bg-gray-100 hover:shadow hover:text-blue-600"
+                className="hidden group-hover:block w-6 h-6 cursor-pointer rounded-md text-gray-500 hover:bg-gray-100 hover:shadow"
                 onClick={() => handleCopyButtonClick()}
               >
                 <Icon.Clipboard className="w-4 h-auto mx-auto" />
@@ -89,7 +89,7 @@ const ShortcutView = (props: Props) => {
             </Tooltip>
             <Tooltip title="QR Code" variant="solid" placement="top" arrow>
               <button
-                className="hidden group-hover:block ml-1 w-6 h-6 cursor-pointer rounded-full text-gray-500 hover:bg-gray-100 hover:shadow hover:text-blue-600"
+                className="hidden group-hover:block ml-1 w-6 h-6 cursor-pointer rounded-md text-gray-500 hover:bg-gray-100 hover:shadow"
                 onClick={() => setShowQRCodeDialog(true)}
               >
                 <Icon.QrCode className="w-4 h-auto mx-auto" />