diff --git a/src/client/assets/fonts/Hasklig-Regular.otf b/src/client/assets/fonts/Hasklig-Regular.otf
new file mode 100644
index 0000000..1089192
Binary files /dev/null and b/src/client/assets/fonts/Hasklig-Regular.otf differ
diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss
index f0c13bf..96f695f 100644
--- a/src/client/assets/scss/App.scss
+++ b/src/client/assets/scss/App.scss
@@ -8,4 +8,9 @@
     src: url("./src/client/assets/fonts/PPObjectSans-Regular.otf")
       format("opentype");
   }
+
+  @font-face {
+    font-family: "Hasklig Regular";
+    src: url("./src/client/assets/fonts/Hasklig-Regular.otf") format("opentype");
+  }
 }
diff --git a/src/client/components/Import/Import.tsx b/src/client/components/Import/Import.tsx
index 592ce83..4cc9bb8 100644
--- a/src/client/components/Import/Import.tsx
+++ b/src/client/components/Import/Import.tsx
@@ -154,25 +154,6 @@ export const Import = (props: IProps): ReactElement => {
             </div>
           </article>
 
-          {/* <p className="buttons">
-            <button
-              className={
-                importJobQueue.status === "drained" ||
-                importJobQueue.status === undefined
-                  ? "button is-medium"
-                  : "button is-loading is-medium"
-              }
-              onClick={() => {
-                initiateImport();
-                importJobQueue.setStatus("running");
-              }}
-            >
-              <span className="icon">
-                <i className="fas fa-file-import"></i>
-              </span>
-              <span>Start Import</span>
-            </button>
-          </p> */}
           <div className="my-4">
             {importJobQueue.status === "drained" ||
               (importJobQueue.status === undefined && (
diff --git a/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx b/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx
index e5e604e..89c6253 100644
--- a/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx
+++ b/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx
@@ -3,29 +3,38 @@ import React, { ReactElement } from "react";
 export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
   const { settings } = settingsObject;
   return (
-    <div className="mt-4 is-clearfix">
-      <div className="card">
-        <div className="card-content">
-          <span className="tag is-pulled-right is-primary">Connected</span>
-          <div className="content is-size-7">
-            <dl>
-              <dt>{settings._id}</dt>
-              <dt>Client version: {settings.system_info.client_version}</dt>
-              <dt>Hostname: {settings.system_info.hostname}</dt>
-              <dt>Platform: {settings.system_info.platform}</dt>
+    <div>
+      <span className="flex items-center mt-10 mb-4">
+        <span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
+          AirDC++ Client Information
+        </span>
+        <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
+      </span>
+      <div className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
+        <span className="inline-flex justify-center rounded-full bg-emerald-100 mb-4 px-2 py-0.5 text-emerald-700">
+          <span className="h-5 w-6">
+            <i className="icon-[solar--plug-circle-bold] h-5 w-5"></i>
+          </span>
+          <p className="whitespace-nowrap text-sm">Connected</p>
+        </span>
+        <p className="font-hasklig text-sm text-gray-700 dark:text-gray-400">
+          <dl>
+            <dt>{settings._id}</dt>
+            <dt>Client version: {settings.system_info.client_version}</dt>
+            <dt>Hostname: {settings.system_info.hostname}</dt>
+            <dt>Platform: {settings.system_info.platform}</dt>
 
-              <dt>Username: {settings.user.username}</dt>
+            <dt>Username: {settings.user.username}</dt>
 
-              <dt>Active Sessions: {settings.user.active_sessions}</dt>
-              <dt>
-                Permissions:{" "}
-                <pre>
-                  {JSON.stringify(settings.user.permissions, undefined, 2)}
-                </pre>
-              </dt>
-            </dl>
-          </div>
-        </div>
+            <dt>Active Sessions: {settings.user.active_sessions}</dt>
+            <dt>
+              Permissions:{" "}
+              <pre>
+                {JSON.stringify(settings.user.permissions, undefined, 2)}
+              </pre>
+            </dt>
+          </dl>
+        </p>
       </div>
     </div>
   );
diff --git a/src/client/components/shared/ConnectionForm/ConnectionForm.tsx b/src/client/components/shared/ConnectionForm/ConnectionForm.tsx
index 3d42d96..0c68b99 100644
--- a/src/client/components/shared/ConnectionForm/ConnectionForm.tsx
+++ b/src/client/components/shared/ConnectionForm/ConnectionForm.tsx
@@ -14,92 +14,125 @@ export const ConnectionForm = ({
         onSubmit={submitHandler}
         initialValues={initialData}
         render={({ handleSubmit }) => (
-          <form onSubmit={handleSubmit}>
+          <form onSubmit={handleSubmit} className="mt-10">
             <h2 className="text-xl">{formHeading}</h2>
+            <article
+              role="alert"
+              className="mt-4 rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
+            >
+              <div>
+                <p>Configure your AirDC++ client connection here.</p>
+                <p>
+                  Note that you need an instance of AirDC++ already running to
+                  use this form to connect to it.
+                </p>
+                <p>
+                  See{" "}
+                  <a
+                    className="underline"
+                    href="http://airdcpp.net/docs/installation/installation.html"
+                  >
+                    here
+                  </a>{" "}
+                  for AirDC++ installation instructions for various platforms.
+                </p>
+              </div>
+            </article>
 
-            <div className="relative flex flex-col">
-              <label className="block py-1">Hostname</label>
+            <span className="flex items-center mt-6">
+              <span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
+                Configure Connection
+              </span>
+              <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
+            </span>
+
+            <div className="flex flex-row mt-4">
+              <div className="relative">
+                {/* protocol */}
+                <label className="block py-1">Protocol</label>
+                <Field
+                  name="protocol"
+                  component="select"
+                  className="appearance-none dark:bg-slate-400 bg-slate-100 h-10 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                >
+                  <option>Protocol</option>
+                  <option value="http">http://</option>
+                  <option value="https">https://</option>
+                </Field>
+                <div className="absolute h-7 w-7 right-0 px-1 top-11 pointer-events-none">
+                  <i className="icon-[solar--alt-arrow-down-bold]" />
+                </div>
+              </div>
+              {/* hostname */}
               <Field name="hostname" validate={hostNameValidator}>
                 {({ input, meta }) => (
-                  <div className="flex items-center rounded-md border border-gray-300">
-                    <div className="relative">
-                      <Field
-                        name="protocol"
-                        component="select"
-                        className="appearance-none h-10 bg-transparent rounded-none border-r border-gray-300 text-gray-700 dark:text-slate-200 py-1 pr-6 pl-4 sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                      >
-                        <option>Protocol</option>
-                        <option value="http">http://</option>
-                        <option value="https">https://</option>
-                      </Field>
-                      <div className="absolute right-1 inset-y-0 flex items-center px-0 pointer-events-none">
-                        <i className="icon-[solar--alt-arrow-down-bold]" />
-                      </div>
-                    </div>
-
-                    <Field name="hostname" validate={hostNameValidator}>
-                      {({ input, meta }) => (
-                        <div>
-                          <input
-                            {...input}
-                            type="text"
-                            placeholder="Hostname"
-                            className="ml-2 bg-transparent py-2 px-2 border-r border-gray-300 w-full h-10 dark:text-slate-200 sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                          />
-                          {meta.error && meta.touched && (
-                            <span className="is-size-7 has-text-danger">
-                              {meta.error}
-                            </span>
-                          )}
-                        </div>
-                      )}
-                    </Field>
-
-                    {/* port */}
-                    <Field
-                      name="port"
-                      component="input"
-                      className="ml-2 bg-transparent py-2 px-2 block w-full rounded-md sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                      placeholder="Port"
+                  <div className="flex flex-col">
+                    <label className="block px-2 py-1">Hostname</label>
+                    <input
+                      {...input}
+                      type="text"
+                      placeholder="Hostname"
+                      className="ml-2 dark:bg-slate-400 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
                     />
-
-                    {meta.error && meta.touched && (
-                      <span className="text-red-200">{meta.error}</span>
-                    )}
+                    <div>
+                      {meta.error && meta.touched && (
+                        <span className="text-sm text-red-400 px-2">
+                          {meta.error}
+                        </span>
+                      )}
+                    </div>
                   </div>
                 )}
               </Field>
+
+              {/* port */}
+              <div className="flex flex-col">
+                <label className="block px-2 py-1">Port</label>
+                <Field
+                  name="port"
+                  component="input"
+                  className="ml-2 dark:bg-slate-400 bg-slate-100 px-2 block h-10 rounded-md sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                  placeholder="Port"
+                />
+              </div>
             </div>
 
-            <label className="block py-1">Credentials</label>
-            <div className="flex items-center rounded-md border border-gray-300">
-              <div className="relative">
-                <Field
-                  name="username"
-                  component="input"
-                  className="relative left-7 top-0 h-10 bg-transparent rounded-none border-r border-gray-300 text-gray-700 dark:text-slate-200 py-1 px-3 sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                  placeholder="Username"
-                />
-                <span className="absolute h-6 w-6 left-2 top-2 inset-y-0 flex items-center px-0 pointer-events-none">
-                  <i className="icon-[solar--user-bold-duotone] h-6 w-6 dark:text-slate-200" />
-                </span>
+            <div className="flex flex-row mt-5">
+              <div>
+                <label className="block py-1">Username</label>
+                <div className="relative">
+                  <Field
+                    name="username"
+                    component="input"
+                    className="h-10 dark:bg-slate-500 bg-slate-200 rounded-md text-gray-700 dark:text-slate-200 py-1 px-10 mr-5 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                    placeholder="Username"
+                  />
+                  <span className="absolute h-6 w-6 left-2 top-2 inset-y-0 flex items-center px-0 pointer-events-none">
+                    <i className="icon-[solar--user-bold-duotone] h-6 w-6 dark:text-slate-200" />
+                  </span>
+                </div>
               </div>
-              <div className="relative">
-                <Field
-                  name="password"
-                  component="input"
-                  type="password"
-                  className="relative left-14 top-0 h-10 bg-transparent text-gray-700 dark:text-slate-200 py-1 px-3 sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                  placeholder="Password"
-                />
-                <span className="absolute left-9 top-2 inset-y-0 flex items-center px-0 pointer-events-none h-6 w-6">
-                  <i className="icon-[solar--lock-password-bold-duotone] h-6 w-6 dark:text-slate-200" />
-                </span>
+              <div>
+                <div>
+                  <label className="block py-1">Password</label>
+                  <div className="relative">
+                    <Field
+                      name="password"
+                      component="input"
+                      type="password"
+                      className="h-10 dark:bg-slate-500 bg-slate-200 rounded-md text-gray-700 dark:text-slate-200 py-1 px-10 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                      placeholder="Password"
+                    />
+                    <span className="absolute left-2 top-2 inset-y-0 flex items-center px-0 pointer-events-none h-6 w-6">
+                      <i className="icon-[solar--lock-password-bold-duotone] h-6 w-6 dark:text-slate-200" />
+                    </span>
+                  </div>
+                </div>
               </div>
             </div>
-            <div className="field is-grouped">
+            <div className="flex flex-row gap-2">
               <button
-                className="flex space-x-1 sm:mt-5 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-5 py-3 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+                className="flex space-x-1 sm:mt-5 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-4 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
                 type="submit"
               >
                 <span className="text-md">
@@ -110,11 +143,12 @@ export const ConnectionForm = ({
                 </span>
               </button>
 
-              <p className="control">
-                <button type="submit" className="button is-danger">
-                  {!isEmpty(initialData) && "Delete"}
-                </button>
-              </p>
+              <button
+                type="submit"
+                className="flex space-x-1 sm:mt-5 sm:flex-row sm:items-center rounded-lg border border-red-400 dark:border-red-200 bg-red-200 px-4 py-2 text-gray-500 hover:bg-transparent hover:text-red-600 focus:outline-none focus:ring active:text-indigo-500"
+              >
+                {!isEmpty(initialData) && "Delete"}
+              </button>
             </div>
           </form>
         )}
diff --git a/tailwind.config.js b/tailwind.config.js
index 5206c55..2baa897 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,7 @@ module.exports = {
   theme: {
     fontFamily: {
       sans: ["PP Object Sans Regular", "sans-serif"],
+      hasklig: ["Hasklig Regular", "monospace"],
     },
     container: {
       center: true,