diff --git a/frontend/src/agents/NewAgent.tsx b/frontend/src/agents/NewAgent.tsx
index b3047fa9..1e5e117a 100644
--- a/frontend/src/agents/NewAgent.tsx
+++ b/frontend/src/agents/NewAgent.tsx
@@ -20,6 +20,7 @@ import {
   setSelectedAgent,
 } from '../preferences/preferenceSlice';
 import PromptsModal from '../preferences/PromptsModal';
+import Prompts from '../settings/Prompts';
 import { UserToolType } from '../settings/types';
 import AgentPreview from './AgentPreview';
 import { Agent } from './types';
@@ -46,7 +47,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
     source: '',
     chunks: '',
     retriever: '',
-    prompt_id: '',
+    prompt_id: 'default',
     tools: [],
     agent_type: '',
     status: '',
@@ -504,32 +505,32 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
             </div>
           </div>
           <div className="rounded-[30px] bg-[#F6F6F6] px-6 py-3 dark:bg-[#383838] dark:text-[#E0E0E0]">
-            <h2 className="text-lg font-semibold">Prompt</h2>
-            <div className="mt-3 flex flex-wrap items-center gap-1">
+            <div className="flex flex-wrap items-end gap-1">
               <div className="min-w-20 grow basis-full sm:basis-0">
-                <Dropdown
-                  options={prompts.map((prompt) => ({
-                    label: prompt.name,
-                    value: prompt.id,
-                  }))}
-                  selectedValue={
-                    agent.prompt_id
-                      ? prompts.filter(
-                          (prompt) => prompt.id === agent.prompt_id,
-                        )[0]?.name || null
-                      : null
+                <Prompts
+                  prompts={prompts}
+                  selectedPrompt={
+                    prompts.find((prompt) => prompt.id === agent.prompt_id) ||
+                    prompts[0]
                   }
-                  onSelect={(option: { label: string; value: string }) =>
-                    setAgent({ ...agent, prompt_id: option.value })
+                  onSelectPrompt={(name, id, type) =>
+                    setAgent({ ...agent, prompt_id: id })
                   }
-                  size="w-full"
-                  rounded="3xl"
-                  border="border"
-                  buttonClassName="bg-white dark:bg-[#222327] border-silver dark:border-[#7E7E7E]"
-                  optionsClassName="bg-white dark:bg-[#383838] border-silver dark:border-[#7E7E7E] dark:border-[#7E7E7E] dark:bg-dark-charcoal"
-                  placeholderClassName="text-gray-400 dark:text-silver"
-                  placeholder="Select a prompt"
-                  contentSize="text-sm"
+                  setPrompts={setPrompts}
+                  title="Prompt"
+                  titleClassName="text-lg font-semibold dark:text-[#E0E0E0]"
+                  showAddButton={false}
+                  dropdownProps={{
+                    size: 'w-full',
+                    rounded: '3xl',
+                    border: 'border',
+                    buttonClassName:
+                      'bg-white dark:bg-[#222327] border-silver dark:border-[#7E7E7E]',
+                    optionsClassName:
+                      'bg-white dark:bg-[#383838] border-silver dark:border-[#7E7E7E]',
+                    placeholderClassName: 'text-gray-400 dark:text-silver',
+                    contentSize: 'text-sm',
+                  }}
                 />
               </div>
               <button
diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
index d741497f..75bd6a0e 100644
--- a/frontend/src/components/Dropdown.tsx
+++ b/frontend/src/components/Dropdown.tsx
@@ -3,8 +3,9 @@ import React from 'react';
 import Arrow2 from '../assets/dropdown-arrow.svg';
 import Edit from '../assets/edit.svg';
 import Trash from '../assets/trash.svg';
+import { DropdownOption, DropdownProps } from './types/Dropdown.types';
 
-function Dropdown({
+function Dropdown<T extends DropdownOption>({
   options,
   selectedValue,
   onSelect,
@@ -20,36 +21,7 @@ function Dropdown({
   placeholder,
   placeholderClassName = 'text-gray-500 dark:text-gray-400',
   contentSize = 'text-base',
-}: {
-  options:
-    | string[]
-    | { name: string; id: string; type: string }[]
-    | { label: string; value: string }[]
-    | { value: number; description: string }[];
-  selectedValue:
-    | string
-    | { label: string; value: string }
-    | { value: number; description: string }
-    | { name: string; id: string; type: string }
-    | null;
-  onSelect:
-    | ((value: string) => void)
-    | ((value: { name: string; id: string; type: string }) => void)
-    | ((value: { label: string; value: string }) => void)
-    | ((value: { value: number; description: string }) => void);
-  size?: string;
-  rounded?: 'xl' | '3xl';
-  buttonClassName?: string;
-  optionsClassName?: string;
-  border?: 'border' | 'border-2';
-  showEdit?: boolean;
-  onEdit?: (value: { name: string; id: string; type: string }) => void;
-  showDelete?: boolean | ((option: any) => boolean);
-  onDelete?: (value: string) => void;
-  placeholder?: string;
-  placeholderClassName?: string;
-  contentSize?: string;
-}) {
+}: DropdownProps<T>) {
   const dropdownRef = React.useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = React.useState(false);
   const borderRadius = rounded === 'xl' ? 'rounded-xl' : 'rounded-3xl';
diff --git a/frontend/src/components/types/Dropdown.types.ts b/frontend/src/components/types/Dropdown.types.ts
new file mode 100644
index 00000000..f099a0cb
--- /dev/null
+++ b/frontend/src/components/types/Dropdown.types.ts
@@ -0,0 +1,45 @@
+export type DropdownOptionBase = {
+  id?: string;
+  type?: string;
+};
+
+export type StringOption = string;
+export type NameIdOption = { name: string; id: string } & DropdownOptionBase;
+export type LabelValueOption = {
+  label: string;
+  value: string;
+} & DropdownOptionBase;
+export type ValueDescriptionOption = {
+  value: number;
+  description: string;
+} & DropdownOptionBase;
+
+export type DropdownOption =
+  | StringOption
+  | NameIdOption
+  | LabelValueOption
+  | ValueDescriptionOption;
+
+export type DropdownSelectedValue = DropdownOption | null;
+
+export type OnSelectHandler<T extends DropdownOption = DropdownOption> = (
+  value: T,
+) => void;
+
+export interface DropdownProps<T extends DropdownOption = DropdownOption> {
+  options: T[];
+  selectedValue: DropdownSelectedValue;
+  onSelect: OnSelectHandler<T>;
+  size?: string;
+  rounded?: 'xl' | '3xl';
+  buttonClassName?: string;
+  optionsClassName?: string;
+  border?: 'border' | 'border-2';
+  showEdit?: boolean;
+  onEdit?: (value: NameIdOption) => void;
+  showDelete?: boolean | ((option: T) => boolean);
+  onDelete?: (id: string) => void;
+  placeholder?: string;
+  placeholderClassName?: string;
+  contentSize?: string;
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 522d0f5c..3d581276 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -133,10 +133,10 @@ layer(base);
 }
 
 @utility table-default {
-  @apply block w-full table-auto justify-center overflow-auto rounded-xl border border-silver text-center dark:border-silver/40 dark:text-bright-gray;
+  @apply border-silver dark:border-silver/40 dark:text-bright-gray block w-full table-auto justify-center overflow-auto rounded-xl border text-center;
 
   & th {
-    @apply text-nowrap p-4 font-normal text-gray-400;
+    @apply p-4 font-normal text-nowrap text-gray-400;
   }
 
   & th {
@@ -148,7 +148,7 @@ layer(base);
   }
 
   & td {
-    @apply w-full border-t border-silver px-4 py-2 dark:border-silver/40;
+    @apply border-silver dark:border-silver/40 w-full border-t px-4 py-2;
   }
 
   & td:last-child {
@@ -208,483 +208,482 @@ layer(base);
   }
 }
 
-@layer base{
+@layer base {
   /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
-/* Document
+  /* Document
    ========================================================================== */
 
-/**
+  /**
  * 1. Correct the line height in all browsers.
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
 
-html {
-  line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-  min-height: 100vh;
-  overflow-x: hidden;
-}
+  html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    min-height: 100vh;
+    overflow-x: hidden;
+  }
 
-/* Sections
+  /* Sections
    ========================================================================== */
 
-/**
+  /**
  * Remove the margin in all browsers.
  */
 
-body {
-  margin: 0;
-  min-height: var(--viewport-height);
-  overflow-x: hidden;
-  font-family: 'Inter', sans-serif;
-}
-/*
+  body {
+    margin: 0;
+    min-height: var(--viewport-height);
+    overflow-x: hidden;
+    font-family: 'Inter', sans-serif;
+  }
+  /*
 Avoid over-scrolling in mobile browsers
 */
-@media only screen and (max-width: 500px) {
-  body,
-  html {
-    min-height: var(--viewport-height);
-    position: fixed;
-    width: 100%;
+  @media only screen and (max-width: 500px) {
+    body,
+    html {
+      min-height: var(--viewport-height);
+      position: fixed;
+      width: 100%;
+    }
   }
-}
-/**
+  /**
  * Render the `main` element consistently in IE.
  */
 
-main {
-  display: block;
-}
+  main {
+    display: block;
+  }
 
-/**
+  /**
  * Correct the font size and margin on `h1` elements within `section` and
  * `article` contexts in Chrome, Firefox, and Safari.
  */
 
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
 
-/* Grouping content
+  /* Grouping content
    ========================================================================== */
 
-/**
+  /**
  * 1. Add the correct box sizing in Firefox.
  * 2. Show the overflow in Edge and IE.
  */
 
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
 
-/**
+  /**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
 
-pre {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
 
-/* Text-level semantics
+  /* Text-level semantics
    ========================================================================== */
 
-/**
+  /**
  * Remove the gray background on active links in IE 10.
  */
 
-a {
-  background-color: transparent;
-}
+  a {
+    background-color: transparent;
+  }
 
-/**
+  /**
  * 1. Remove the bottom border in Chrome 57-
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  */
 
-abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
-}
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
 
-/**
+  /**
  * Add the correct font weight in Chrome, Edge, and Safari.
  */
 
-b,
-strong {
-  font-weight: bolder;
-}
+  b,
+  strong {
+    font-weight: bolder;
+  }
 
-/**
+  /**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
 
-code,
-kbd,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
 
-/**
+  /**
  * Add the correct font size in all browsers.
  */
 
-small {
-  font-size: 80%;
-}
+  small {
+    font-size: 80%;
+  }
 
-/**
+  /**
  * Prevent `sub` and `sup` elements from affecting the line height in
  * all browsers.
  */
 
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
 
-sub {
-  bottom: -0.25em;
-}
+  sub {
+    bottom: -0.25em;
+  }
 
-sup {
-  top: -0.5em;
-}
+  sup {
+    top: -0.5em;
+  }
 
-/* Embedded content
+  /* Embedded content
    ========================================================================== */
 
-/**
+  /**
  * Remove the border on images inside links in IE 10.
  */
 
-img {
-  border-style: none;
-}
+  img {
+    border-style: none;
+  }
 
-/* Forms
+  /* Forms
    ========================================================================== */
 
-/**
+  /**
  * 1. Change the font styles in all browsers.
  * 2. Remove the margin in Firefox and Safari.
  */
 
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
-}
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
 
-/**
+  /**
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.
  */
 
-button,
-input {
-  /* 1 */
-  overflow: visible;
-}
+  button,
+  input {
+    /* 1 */
+    overflow: visible;
+  }
 
-/**
+  /**
  * Remove the inheritance of text transform in Edge, Firefox, and IE.
  * 1. Remove the inheritance of text transform in Firefox.
  */
 
-button,
-select {
-  /* 1 */
-  text-transform: none;
-}
+  button,
+  select {
+    /* 1 */
+    text-transform: none;
+  }
 
-/**
+  /**
  * Correct the inability to style clickable types in iOS and Safari.
  */
 
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-  -webkit-appearance: button;
-  cursor: pointer;
-}
+  button,
+  [type='button'],
+  [type='reset'],
+  [type='submit'] {
+    -webkit-appearance: button;
+    cursor: pointer;
+  }
 
-/**
+  /**
  * Remove the inner border and padding in Firefox.
  */
 
-button::-moz-focus-inner,
-[type='button']::-moz-focus-inner,
-[type='reset']::-moz-focus-inner,
-[type='submit']::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
+  button::-moz-focus-inner,
+  [type='button']::-moz-focus-inner,
+  [type='reset']::-moz-focus-inner,
+  [type='submit']::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
 
-/**
+  /**
  * Restore the focus styles unset by the previous rule.
  */
 
-button:-moz-focusring,
-[type='button']:-moz-focusring,
-[type='reset']:-moz-focusring,
-[type='submit']:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
+  button:-moz-focusring,
+  [type='button']:-moz-focusring,
+  [type='reset']:-moz-focusring,
+  [type='submit']:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
 
-/**
+  /**
  * Correct the padding in Firefox.
  */
 
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
 
-/**
+  /**
  * 1. Correct the text wrapping in Edge and IE.
  * 2. Correct the color inheritance from `fieldset` elements in IE.
  * 3. Remove the padding so developers are not caught out when they zero out
  *    `fieldset` elements in all browsers.
  */
 
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
-}
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
 
-/**
+  /**
  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */
 
-progress {
-  vertical-align: baseline;
-}
+  progress {
+    vertical-align: baseline;
+  }
 
-/**
+  /**
  * Remove the default vertical scrollbar in IE 10+.
  */
 
-textarea {
-  overflow: auto;
-}
+  textarea {
+    overflow: auto;
+  }
 
-/**
+  /**
  * 1. Add the correct box sizing in IE 10.
  * 2. Remove the padding in IE 10.
  */
 
-[type='checkbox'],
-[type='radio'] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
+  [type='checkbox'],
+  [type='radio'] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
 
-/**
+  /**
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
 
-[type='number']::-webkit-inner-spin-button,
-[type='number']::-webkit-outer-spin-button {
-  height: auto;
-}
+  [type='number']::-webkit-inner-spin-button,
+  [type='number']::-webkit-outer-spin-button {
+    height: auto;
+  }
 
-/**
+  /**
  * 1. Correct the odd appearance in Chrome and Safari.
  * 2. Correct the outline style in Safari.
  */
 
-[type='search'] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
+  [type='search'] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
 
-/**
+  /**
  * Remove the inner padding in Chrome and Safari on macOS.
  */
 
-[type='search']::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
+  [type='search']::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
 
-/**
+  /**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
  */
 
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
 
-/* Interactive
+  /* Interactive
    ========================================================================== */
 
-/*
+  /*
  * Add the correct display in Edge, IE 10+, and Firefox.
  */
 
-details {
-  display: block;
-}
+  details {
+    display: block;
+  }
 
-/*
+  /*
  * Add the correct display in all browsers.
  */
 
-summary {
-  display: list-item;
-}
+  summary {
+    display: list-item;
+  }
 
-/* Misc
+  /* Misc
    ========================================================================== */
 
-/**
+  /**
  * Add the correct display in IE 10+.
  */
 
-template {
-  display: none;
-}
+  template {
+    display: none;
+  }
 
-/**
+  /**
  * Add the correct display in IE 10.
  */
 
-[hidden] {
-  display: none;
-}
-
-[contentEditable]:empty:before {
-  content: attr(placeholder);
-  color: #9ca3af;
-  opacity: 1;
-}
-
-/* third container laylout for Firefox */
-@-moz-document url-prefix() {
-  .firefox {
-    padding: 32px;
+  [hidden] {
+    display: none;
   }
-}
 
-/* For screens with a maximum width of 768px (mobile) */
-@media (max-width: 768px) {
-  .firefox {
-    padding: 16px;
+  [contentEditable]:empty:before {
+    content: attr(placeholder);
+    color: #9ca3af;
+    opacity: 1;
   }
-}
 
-@font-face {
-  font-family: 'Inter';
-  font-weight: 100 200 300 400 500 600 700 800 900;
-  src: url('/fonts/Inter-Variable.ttf');
-}
+  /* third container laylout for Firefox */
+  @-moz-document url-prefix() {
+    .firefox {
+      padding: 32px;
+    }
+  }
 
-@font-face {
-  font-family: 'IBMPlexMono-Medium';
-  font-weight: 500;
-  src: url('/fonts/IBMPlexMono-Medium.ttf');
-}
+  /* For screens with a maximum width of 768px (mobile) */
+  @media (max-width: 768px) {
+    .firefox {
+      padding: 16px;
+    }
+  }
 
-::-webkit-scrollbar {
-  width: 10;
-}
-/* Light mode specific autofill styles */
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus,
-input:-webkit-autofill:active {
-  -webkit-text-fill-color: #343541 !important;
-  -webkit-box-shadow: 0 0 0 30px transparent inset !important;
-  transition: background-color 5000s ease-in-out 0s;
-  caret-color: #343541;
-}
+  @font-face {
+    font-family: 'Inter';
+    font-weight: 100 200 300 400 500 600 700 800 900;
+    src: url('/fonts/Inter-Variable.ttf');
+  }
 
-/* Dark mode specific autofill styles */
-.dark input:-webkit-autofill,
-.dark input:-webkit-autofill:hover,
-.dark input:-webkit-autofill:focus,
-.dark input:-webkit-autofill:active {
-  -webkit-text-fill-color: #e5e7eb !important;
-  -webkit-box-shadow: 0 0 0 30px transparent inset !important;
-  background-color: transparent !important;
-  caret-color: #e5e7eb;
-}
+  @font-face {
+    font-family: 'IBMPlexMono-Medium';
+    font-weight: 500;
+    src: url('/fonts/IBMPlexMono-Medium.ttf');
+  }
 
-/* Additional autocomplete dropdown styles for dark mode */
-.dark input:-webkit-autofill::first-line {
-  color: #e5e7eb;
-}
+  ::-webkit-scrollbar {
+    width: 10;
+  }
+  /* Light mode specific autofill styles */
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active {
+    -webkit-text-fill-color: #343541 !important;
+    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
+    transition: background-color 5000s ease-in-out 0s;
+    caret-color: #343541;
+  }
 
-.inputbox-style {
-  resize: none;
-  padding-left: 36px;
-  padding-right: 36px;
-}
+  /* Dark mode specific autofill styles */
+  .dark input:-webkit-autofill,
+  .dark input:-webkit-autofill:hover,
+  .dark input:-webkit-autofill:focus,
+  .dark input:-webkit-autofill:active {
+    -webkit-text-fill-color: #e5e7eb !important;
+    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
+    background-color: transparent !important;
+    caret-color: #e5e7eb;
+  }
 
-.bottom-safe {
-  bottom: env(safe-area-inset-bottom, 0);
-}
+  /* Additional autocomplete dropdown styles for dark mode */
+  .dark input:-webkit-autofill::first-line {
+    color: #e5e7eb;
+  }
 
-.ellipsis-text {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  text-overflow: ellipsis;
-}
+  .inputbox-style {
+    resize: none;
+    padding-left: 36px;
+    padding-right: 36px;
+  }
 
-.logs-table {
-  font-family: 'IBMPlexMono-Medium', system-ui;
-}
+  .bottom-safe {
+    bottom: env(safe-area-inset-bottom, 0);
+  }
 
-.fade-in {
-  animation: fadeIn 0.5s ease-in-out;
-}
+  .ellipsis-text {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+  }
 
-@keyframes fadeIn {
-  0% {
+  .logs-table {
+    font-family: 'IBMPlexMono-Medium', system-ui;
+  }
+
+  .fade-in {
+    animation: fadeIn 0.5s ease-in-out;
+  }
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .fade-in-bubble {
     opacity: 0;
+    transform: translateY(10px);
+    animation: fadeInUp 0.5s forwards;
   }
-  100% {
-    opacity: 1;
+
+  @keyframes fadeInUp {
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 }
-
-.fade-in-bubble {
-  opacity: 0;
-  transform: translateY(10px);
-  animation: fadeInUp 0.5s forwards;
-}
-
-@keyframes fadeInUp {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-}
\ No newline at end of file
diff --git a/frontend/src/settings/General.tsx b/frontend/src/settings/General.tsx
index 05ddbabf..d6c5bde0 100644
--- a/frontend/src/settings/General.tsx
+++ b/frontend/src/settings/General.tsx
@@ -88,7 +88,7 @@ export default function General() {
       {' '}
       <div className="flex flex-col gap-4">
         {' '}
-        <label className="text-base font-medium text-jet dark:text-bright-gray">
+        <label className="text-jet dark:text-bright-gray text-base font-medium">
           {t('settings.general.selectTheme')}
         </label>
         <Dropdown
@@ -106,7 +106,7 @@ export default function General() {
         />
       </div>
       <div className="flex flex-col gap-4">
-        <label className="text-base font-medium text-jet dark:text-bright-gray">
+        <label className="text-jet dark:text-bright-gray text-base font-medium">
           {t('settings.general.selectLanguage')}
         </label>
         <Dropdown
@@ -124,7 +124,7 @@ export default function General() {
         />
       </div>
       <div className="flex flex-col gap-4">
-        <label className="text-base font-medium text-jet dark:text-bright-gray">
+        <label className="text-jet dark:text-bright-gray text-base font-medium">
           {t('settings.general.chunks')}
         </label>
         <Dropdown
@@ -137,7 +137,7 @@ export default function General() {
         />
       </div>
       <div className="flex flex-col gap-4">
-        <label className="text-base font-medium text-jet dark:text-bright-gray">
+        <label className="text-jet dark:text-bright-gray text-base font-medium">
           {t('settings.general.convHistory')}
         </label>
         <Dropdown
@@ -169,13 +169,14 @@ export default function General() {
             dispatch(setPrompt({ name: name, id: id, type: type }))
           }
           setPrompts={setPrompts}
+          dropdownProps={{ size: 'w-56', rounded: '3xl', border: 'border' }}
         />
       </div>
-      <hr className="my-4 w-[calc(min(665px,100%))] border-t border-silver dark:border-silver/40" />
+      <hr className="border-silver dark:border-silver/40 my-4 w-[calc(min(665px,100%))] border-t" />
       <div className="flex flex-col gap-2">
         <button
           title={t('settings.general.deleteAllLabel')}
-          className="flex w-fit cursor-pointer items-center justify-between rounded-3xl border border-solid border-rosso-corsa bg-transparent px-5 py-3 text-sm font-medium tracking-[0.015em] text-rosso-corsa transition-colors hover:bg-rosso-corsa hover:font-bold hover:tracking-normal hover:text-white"
+          className="border-rosso-corsa text-rosso-corsa hover:bg-rosso-corsa flex w-fit cursor-pointer items-center justify-between rounded-3xl border border-solid bg-transparent px-5 py-3 text-sm font-medium tracking-[0.015em] transition-colors hover:font-bold hover:tracking-normal hover:text-white"
           onClick={() => dispatch(setModalStateDeleteConv('ACTIVE'))}
         >
           {t('settings.general.deleteAllBtn')}
diff --git a/frontend/src/settings/Prompts.tsx b/frontend/src/settings/Prompts.tsx
index 97354366..d4de6b42 100644
--- a/frontend/src/settings/Prompts.tsx
+++ b/frontend/src/settings/Prompts.tsx
@@ -4,17 +4,29 @@ import { useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
 import Dropdown from '../components/Dropdown';
+import { DropdownProps } from '../components/types/Dropdown.types';
+import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState, PromptProps } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
 import PromptsModal from '../preferences/PromptsModal';
-import ConfirmationModal from '../modals/ConfirmationModal';
+
+type ExtendedPromptProps = PromptProps & {
+  title?: string;
+  titleClassName?: string;
+  dropdownProps?: Partial<DropdownProps>;
+  showAddButton?: boolean;
+};
 
 export default function Prompts({
   prompts,
   selectedPrompt,
   onSelectPrompt,
   setPrompts,
-}: PromptProps) {
+  title,
+  titleClassName = 'dark:text-bright-gray font-medium',
+  dropdownProps = {},
+  showAddButton = true,
+}: ExtendedPromptProps) {
   const handleSelectPrompt = ({
     name,
     id,
@@ -27,6 +39,7 @@ export default function Prompts({
     setEditPromptName(name);
     onSelectPrompt(name, id, type);
   };
+
   const token = useSelector(selectToken);
   const [newPromptName, setNewPromptName] = React.useState('');
   const [newPromptContent, setNewPromptContent] = React.useState('');
@@ -164,18 +177,19 @@ export default function Prompts({
   return (
     <>
       <div>
-        <div className="flex flex-col gap-4">
-          <p className="font-medium dark:text-bright-gray">
-            {t('settings.general.prompt')}
+        <div className="flex flex-col gap-3">
+          <p className={titleClassName}>
+            {title ? title : t('settings.general.prompt')}
           </p>
-          <div className="flex flex-row items-baseline justify-start gap-6">
+          <div className="flex flex-row flex-wrap items-baseline justify-start gap-6">
             <Dropdown
-              options={prompts}
-              selectedValue={selectedPrompt.name}
+              options={prompts.map((prompt: any) =>
+                typeof prompt === 'string'
+                  ? { name: prompt, id: prompt, type: '' }
+                  : prompt,
+              )}
+              selectedValue={selectedPrompt ? selectedPrompt.name : ''}
               onSelect={handleSelectPrompt}
-              size="w-56"
-              rounded="3xl"
-              border="border"
               showEdit
               showDelete={(prompt) => prompt.type !== 'public'}
               onEdit={({
@@ -185,26 +199,29 @@ export default function Prompts({
               }: {
                 id: string;
                 name: string;
-                type: string;
+                type?: string;
               }) => {
                 setModalType('EDIT');
                 setEditPromptName(name);
                 handleFetchPromptContent(id);
-                setCurrentPromptEdit({ id: id, name: name, type: type });
+                setCurrentPromptEdit({ id: id, name: name, type: type ?? '' });
                 setModalState('ACTIVE');
               }}
               onDelete={handleDeletePrompt}
+              placeholder={'Select a prompt'}
+              {...dropdownProps}
             />
-
-            <button
-              className="h-10 w-20 rounded-3xl border border-solid border-violets-are-blue text-sm text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
-              onClick={() => {
-                setModalType('ADD');
-                setModalState('ACTIVE');
-              }}
-            >
-              {t('settings.general.add')}
-            </button>
+            {showAddButton && (
+              <button
+                className="border-violets-are-blue text-violets-are-blue hover:bg-violets-are-blue h-10 w-20 rounded-3xl border border-solid text-sm transition-colors hover:text-white"
+                onClick={() => {
+                  setModalType('ADD');
+                  setModalState('ACTIVE');
+                }}
+              >
+                {t('settings.general.add')}
+              </button>
+            )}
           </div>
         </div>
       </div>