diff --git a/src/components/CreateCredentialModal.svelte b/src/components/CreateCredentialModal.svelte
new file mode 100644
index 0000000..e8966ac
--- /dev/null
+++ b/src/components/CreateCredentialModal.svelte
@@ -0,0 +1,397 @@
+<script lang="ts">
+  import { credential } from "$lib/credentials";
+  import type {
+    CredentialType,
+    CredentialTypeField,
+  } from "$lib/credentialTypes";
+
+  export let isOpen = false;
+  export let companyId: string;
+  export let accessToken: string;
+  export let credentialTypes: CredentialType[] = [];
+  export let onSuccess: () => void = () => {};
+
+  let credentialName = "";
+  let selectedTypeId = "";
+  let fieldValues: Record<string, string> = {};
+  let isSubmitting = false;
+  let submitError = "";
+  let isLoadingTypes = false;
+
+  $: selectedType = credentialTypes.find((ct) => ct.id === selectedTypeId);
+  $: if (selectedType && selectedType.fields) {
+    // Initialize field values when type changes
+    fieldValues = {};
+    selectedType.fields.forEach((field: CredentialTypeField) => {
+      fieldValues[field.id] = "";
+    });
+  }
+
+  async function loadCredentialTypes() {
+    if (credentialTypes.length > 0) return;
+    isLoadingTypes = true;
+    try {
+      // This assumes credentialType.fetchMany returns data with a data property
+      const response = await fetch(
+        `${import.meta.env.VITE_API_URL || "http://localhost:3000"}/v1/credential-type`,
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+        },
+      );
+      const result = await response.json();
+      if (result.data) {
+        credentialTypes = Array.isArray(result.data)
+          ? result.data
+          : [result.data];
+      }
+    } catch (err) {
+      console.error("Failed to load credential types:", err);
+      submitError = "Failed to load credential types";
+    } finally {
+      isLoadingTypes = false;
+    }
+  }
+
+  async function handleSubmit() {
+    if (!credentialName || !selectedTypeId || !selectedType) {
+      submitError = "Please fill in all required fields";
+      return;
+    }
+
+    // Validate that all required fields are filled
+    const allFieldsFilled = selectedType.fields.every(
+      (field: CredentialTypeField) =>
+        !field.required ||
+        (fieldValues[field.id] && fieldValues[field.id].trim()),
+    );
+
+    if (!allFieldsFilled) {
+      submitError = "Please fill in all required fields";
+      return;
+    }
+
+    isSubmitting = true;
+    submitError = "";
+
+    try {
+      const fields = selectedType.fields.map((field: CredentialTypeField) => ({
+        fieldId: field.id,
+        value: fieldValues[field.id] || "",
+      }));
+
+      await credential.create(accessToken, {
+        name: credentialName,
+        typeId: selectedTypeId,
+        companyId,
+        fields,
+      });
+
+      // Reset form
+      credentialName = "";
+      selectedTypeId = "";
+      fieldValues = {};
+      isOpen = false;
+      onSuccess();
+    } catch (err) {
+      submitError =
+        err instanceof Error ? err.message : "Failed to create credential";
+      console.error("Failed to create credential:", err);
+    } finally {
+      isSubmitting = false;
+    }
+  }
+
+  function handleCancel() {
+    isOpen = false;
+    credentialName = "";
+    selectedTypeId = "";
+    fieldValues = {};
+    submitError = "";
+  }
+
+  function handleModalClick(e: Event) {
+    if ((e.target as HTMLElement).classList.contains("modal-backdrop")) {
+      handleCancel();
+    }
+  }
+
+  // Load types when modal opens
+  $: if (isOpen) {
+    loadCredentialTypes();
+  }
+</script>
+
+{#if isOpen}
+  <div class="modal-backdrop" on:click={handleModalClick}>
+    <div class="modal">
+      <div class="modal-header">
+        <h2>Create Credential</h2>
+        <button
+          class="close-button"
+          on:click={handleCancel}
+          type="button"
+          aria-label="Close modal"
+        >
+          ✕
+        </button>
+      </div>
+
+      <div class="modal-body">
+        {#if submitError}
+          <div class="error-message">{submitError}</div>
+        {/if}
+
+        <div class="form-group">
+          <label for="credential-name">Credential Name *</label>
+          <input
+            id="credential-name"
+            type="text"
+            bind:value={credentialName}
+            placeholder="e.g., Production AWS Credentials"
+            disabled={isSubmitting}
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="credential-type">Credential Type *</label>
+          {#if isLoadingTypes}
+            <p class="loading-text">Loading credential types...</p>
+          {:else}
+            <select
+              id="credential-type"
+              bind:value={selectedTypeId}
+              disabled={isSubmitting || isLoadingTypes}
+            >
+              <option value="">Select a credential type</option>
+              {#each credentialTypes as type (type.id)}
+                <option value={type.id}>{type.name}</option>
+              {/each}
+            </select>
+          {/if}
+        </div>
+
+        {#if selectedType && selectedType.fields}
+          <div class="fields-section">
+            <h3>Credential Fields</h3>
+            {#each selectedType.fields as field (field.id)}
+              <div class="form-group">
+                <label for="field-{field.id}">
+                  {field.name}
+                  {#if field.required}
+                    <span class="required">*</span>
+                  {/if}
+                </label>
+                <input
+                  id="field-{field.id}"
+                  type={field.valueType === "password" ? "password" : "text"}
+                  bind:value={fieldValues[field.id]}
+                  placeholder={field.name}
+                  disabled={isSubmitting}
+                />
+              </div>
+            {/each}
+          </div>
+        {/if}
+      </div>
+
+      <div class="modal-footer">
+        <button
+          type="button"
+          class="button-secondary"
+          on:click={handleCancel}
+          disabled={isSubmitting}
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          class="button-primary"
+          on:click={handleSubmit}
+          disabled={isSubmitting || isLoadingTypes}
+        >
+          {isSubmitting ? "Creating..." : "Create Credential"}
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+  }
+
+  .modal {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+    width: 90%;
+    max-width: 500px;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.5rem;
+    border-bottom: 1px solid #e5e7eb;
+  }
+
+  .modal-header h2 {
+    margin: 0;
+    font-size: 1.25rem;
+  }
+
+  .close-button {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: #6b7280;
+    padding: 0;
+    width: 2rem;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: background-color 0.2s;
+  }
+
+  .close-button:hover {
+    background-color: #f3f4f6;
+  }
+
+  .modal-body {
+    padding: 1.5rem;
+    overflow-y: auto;
+    flex: 1;
+  }
+
+  .modal-footer {
+    display: flex;
+    gap: 1rem;
+    justify-content: flex-end;
+    padding: 1.5rem;
+    border-top: 1px solid #e5e7eb;
+  }
+
+  .form-group {
+    margin-bottom: 1.25rem;
+  }
+
+  .form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: #374151;
+  }
+
+  .required {
+    color: #ef4444;
+  }
+
+  input,
+  select {
+    width: 100%;
+    padding: 0.625rem;
+    border: 1px solid #d1d5db;
+    border-radius: 4px;
+    font-size: 1rem;
+    box-sizing: border-box;
+  }
+
+  input:focus,
+  select:focus {
+    outline: none;
+    border-color: #0066cc;
+    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
+  }
+
+  input:disabled,
+  select:disabled {
+    background-color: #f3f4f6;
+    color: #9ca3af;
+    cursor: not-allowed;
+  }
+
+  .fields-section {
+    margin-top: 1.5rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid #e5e7eb;
+  }
+
+  .fields-section h3 {
+    margin: 0 0 1rem 0;
+    font-size: 1rem;
+    color: #374151;
+  }
+
+  .button-primary,
+  .button-secondary {
+    padding: 0.625rem 1rem;
+    border: none;
+    border-radius: 4px;
+    font-size: 0.95rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.2s;
+  }
+
+  .button-primary {
+    background-color: #0066cc;
+    color: white;
+  }
+
+  .button-primary:hover:not(:disabled) {
+    background-color: #0052a3;
+  }
+
+  .button-primary:disabled {
+    background-color: #9ca3af;
+    cursor: not-allowed;
+  }
+
+  .button-secondary {
+    background-color: #e5e7eb;
+    color: #374151;
+  }
+
+  .button-secondary:hover:not(:disabled) {
+    background-color: #d1d5db;
+  }
+
+  .button-secondary:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .error-message {
+    padding: 0.75rem;
+    margin-bottom: 1rem;
+    background-color: #fee2e2;
+    color: #991b1b;
+    border-radius: 4px;
+    border: 1px solid #fecaca;
+  }
+
+  .loading-text {
+    color: #6b7280;
+    font-style: italic;
+    margin: 0;
+  }
+</style>
diff --git a/src/lib/credentials.ts b/src/lib/credentials.ts
new file mode 100644
index 0000000..f43571d
--- /dev/null
+++ b/src/lib/credentials.ts
@@ -0,0 +1,99 @@
+import api from "./axios";
+
+export interface CredentialField {
+  id: string;
+  fieldId: string;
+  value: string;
+}
+
+export interface Credential {
+  id: string;
+  name: string;
+  typeId: string;
+  companyId: string;
+  fields: CredentialField[];
+  type?: {
+    id: string;
+    name: string;
+    fields: unknown[];
+    permissionScope: string;
+  };
+  company?: {
+    id: string;
+    name: string;
+  };
+  createdAt: string;
+  updatedAt: string;
+}
+
+export const credential = {
+  async fetchByCompany(accessToken: string, companyId: string) {
+    const response = await api.get(
+      `/v1/credential/credentials/company/${companyId}`,
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      },
+    );
+    return response.data;
+  },
+
+  async fetch(accessToken: string, id: string) {
+    const response = await api.get(`/v1/credential/credentials/${id}`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+    return response.data;
+  },
+
+  async create(
+    accessToken: string,
+    data: Omit<Credential, "id" | "createdAt" | "updatedAt">,
+  ) {
+    console.log(data);
+
+    const response = await api.post("/v1/credential/credentials", data, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+    return response.data;
+  },
+
+  async update(accessToken: string, id: string, data: { name: string }) {
+    const response = await api.patch(`/v1/credential/credentials/${id}`, data, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+    return response.data;
+  },
+
+  async updateFields(
+    accessToken: string,
+    id: string,
+    fields: CredentialField[],
+  ) {
+    const response = await api.put(
+      `/v1/credential/credentials/${id}/fields`,
+      { fields },
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      },
+    );
+    return response.data;
+  },
+
+  async delete(accessToken: string, id: string) {
+    const response = await api.delete(`/v1/credential/credentials/${id}`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+    return response.data;
+  },
+};
diff --git a/src/routes/companies/[id]/+page.server.ts b/src/routes/companies/[id]/+page.server.ts
index 0f63ed9..01e23c6 100644
--- a/src/routes/companies/[id]/+page.server.ts
+++ b/src/routes/companies/[id]/+page.server.ts
@@ -1,4 +1,5 @@
 import { company } from "$lib/companies";
+import { credential } from "$lib/credentials";
 import type { PageServerLoad } from "./$types";
 import { error } from "@sveltejs/kit";
 
@@ -31,10 +32,29 @@ export const load: PageServerLoad = async ({ params, parent }) => {
       );
     }
 
+    // attempt to load credentials but don't fail the whole page if it errors
+    let credentials = null;
+    let credentialsError = null;
+    try {
+      credentials = await credential.fetchByCompany(
+        session.accessToken,
+        params.id,
+      );
+    } catch (credErr) {
+      console.error("Failed to fetch credentials:", credErr);
+      credentialsError = String(
+        credErr instanceof Error ? credErr.message : credErr,
+      );
+    }
+
     return {
       company: companyData,
       configurations,
       configurationsError,
+      credentials,
+      credentialsError,
+      session,
+      companyId: params.id,
     };
   } catch (err) {
     console.error("Failed to fetch company:", err);
diff --git a/src/routes/companies/[id]/+page.svelte b/src/routes/companies/[id]/+page.svelte
index d8943fc..5444962 100644
--- a/src/routes/companies/[id]/+page.svelte
+++ b/src/routes/companies/[id]/+page.svelte
@@ -1,13 +1,25 @@
 <script>
   import { goto } from "$app/navigation";
   import ErrorBoundary from "$lib/../components/ErrorBoundary.svelte";
+  import CreateCredentialModal from "$lib/../components/CreateCredentialModal.svelte";
 
   export let data;
   export let error;
 
+  let showCreateModal = false;
+
   function signOut() {
     goto("/logout");
   }
+
+  function handleOpenCreateModal() {
+    showCreateModal = true;
+  }
+
+  function handleCredentialCreated() {
+    // Refresh the page to show the new credential
+    location.reload();
+  }
 </script>
 
 <svelte:head>
@@ -56,9 +68,40 @@
         <p>No configurations available for this company.</p>
       {/if}
     </section>
+    <section style="margin-top:1.5rem;">
+      <div
+        style="display: flex; justify-content: space-between; align-items: center;"
+      >
+        <h2 style="margin: 0;">Credentials</h2>
+        <button class="create-button" on:click={handleOpenCreateModal}>
+          Create Credential
+        </button>
+      </div>
+      {#if data.credentialsError}
+        <ErrorBoundary
+          title="Failed to Load Credentials"
+          message={data.credentialsError}
+          details={data.credentialsError}
+        />
+      {:else if data.credentials && data.credentials.data && data.credentials.data.length > 0}
+        <details class="json-collapse" open>
+          <summary>Show credentials JSON</summary>
+          <pre><code>{JSON.stringify(data.credentials, null, 2)}</code></pre>
+        </details>
+      {:else}
+        <p>No credentials available for this company.</p>
+      {/if}
+    </section>
   {/if}
 </main>
 
+<CreateCredentialModal
+  isOpen={showCreateModal}
+  companyId={data.companyId}
+  accessToken={data.session?.accessToken || ""}
+  onSuccess={handleCredentialCreated}
+/>
+
 <style>
   :global(body) {
     margin: 0;
@@ -148,4 +191,25 @@
   .json-collapse pre {
     margin-top: 0.5rem;
   }
+
+  .create-button {
+    padding: 0.5rem 1rem;
+    background-color: #0066cc;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.95rem;
+    font-weight: 500;
+    transition: background-color 0.2s;
+  }
+
+  .create-button:hover:not(:disabled) {
+    background-color: #0052a3;
+  }
+
+  .create-button:disabled {
+    background-color: #9ca3af;
+    cursor: not-allowed;
+  }
 </style>