diff --git a/src/frontend/src/components/ExtraSidebarComponent/index.tsx b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
index 7efef4ec0..318971dd5 100644
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
@@ -18,13 +18,13 @@ export default function ExtraSidebar() {
       <aside
         className={` ${
           isStackedOpen ? "w-52" : "w-0 "
-        } flex flex-shrink-0 flex-col overflow-hidden border-r  transition-all duration-500`}
+        } unused-side-bar-aside`}
       >
-        <div className="flex h-full  w-52 flex-col items-start overflow-y-auto border bg-background scrollbar-hide">
-          <div className="flex w-full flex-grow flex-col">
+        <div className="unused-side-bar-arrangement">
+          <div className="unused-side-bar-division">
             {extraNavigation.options ? (
               <div className="p-4">
-                <nav className="flex-1 space-y-1">
+                <nav className="unused-side-bar-nav">
                   {extraNavigation.options.map((item) =>
                     !item.children ? (
                       <div key={item.name}>
@@ -32,17 +32,17 @@ export default function ExtraSidebar() {
                           to={item.href}
                           className={classNames(
                             item.href.split("/")[2] === current[4]
-                              ? "bg-muted text-foreground"
-                              : "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
-                            "group flex w-full items-center rounded-md py-2 pl-2 text-sm font-medium"
+                              ? "unused-side-bar-link-colors-true"
+                              : "unused-side-bar-link-colors-false",
+                            "unused-side-bar-link"
                           )}
                         >
                           <item.icon
                             className={classNames(
                               item.href.split("/")[2] === current[4]
                                 ? "text-ring"
-                                : "text-ring group-hover:text-accent-foreground",
-                              "mr-3 flex-shrink-0 h-6 w-6"
+                                : "unused-side-bar-icon-false",
+                              "unused-side-bar-icon"
                             )}
                           />
                           {item.name}
@@ -59,20 +59,20 @@ export default function ExtraSidebar() {
                             <Disclosure.Button
                               className={classNames(
                                 item.href.split("/")[2] === current[4]
-                                  ? "bg-muted text-foreground"
-                                  : "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
-                                "group flex w-full items-center rounded-md py-2 pl-2 pr-1 text-left text-sm font-medium focus:outline-none focus:ring-1 focus:ring-ring"
+                                  ? "unused-side-bar-link-colors-true"
+                                  : "unused-side-bar-link-colors-false",
+                                "unused-side-bar-disclosure"
                               )}
                             >
                               <item.icon
-                                className="mr-3 h-6 w-6 flex-shrink-0 text-ring group-hover:text-accent-foreground"
+                                className="unused-side-bar-disclosure-icon"
                                 aria-hidden="true"
                               />
                               <span className="flex-1">{item.name}</span>
                               <svg
                                 className={classNames(
-                                  open ? "text-ring rotate-90" : "text-ring",
-                                  "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-accent-foreground"
+                                  open ? "unused-side-bar-svg-true" : "text-ring",
+                                  "unused-side-bar-svg"
                                 )}
                                 viewBox="0 0 20 20"
                                 aria-hidden="true"
@@ -90,9 +90,9 @@ export default function ExtraSidebar() {
                                   to={subItem.href}
                                   className={classNames(
                                     subItem.href.split("/")[3] === current[5]
-                                      ? "bg-muted text-foreground"
-                                      : "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
-                                    "group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"
+                                      ? "unused-side-bar-link-colors-true"
+                                      : "unused-side-bar-link-colors-false",
+                                    "unused-side-bar-disclosure-panel"
                                   )}
                                 >
                                   {subItem.name}
diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 307568413..112744ab1 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -28,24 +28,24 @@ export const CardComponent = ({
   return (
     <Card className="group">
       <CardHeader>
-        <CardTitle className="flex w-full items-center gap-4">
+        <CardTitle className="card-component-title-display">
           <span
             className={
-              "flex h-7 w-7 items-center justify-center rounded-full text-2xl " +
+              "card-component-image " +
               gradients[parseInt(flow.id.slice(0, 12), 16) % gradients.length]
             }
           ></span>
-          <span className="inline-block w-full flex-1 break-words truncate-doubleline">
+          <span className="card-component-title-size">
             {flow.name}
           </span>
           {onDelete && (
-            <button className="flex self-start" onClick={onDelete}>
-              <Trash2 className="h-4 w-4 text-primary opacity-0 transition-all group-hover:opacity-100" />
+            <button className="card-component-delete-button" onClick={onDelete}>
+              <Trash2 className="card-component-delete-icon" />
             </button>
           )}
         </CardTitle>
-        <CardDescription className="pb-2 pt-2">
-          <div className="truncate-doubleline">
+        <CardDescription className="card-component-desc">
+          <div className="card-component-desc-text">
             {flow.description}
             {/* {flow.description} */}
           </div>
@@ -53,8 +53,8 @@ export const CardComponent = ({
       </CardHeader>
 
       <CardFooter>
-        <div className="flex w-full items-end justify-between gap-2">
-          <div className="flex flex-wrap gap-2">
+        <div className="card-component-footer-arrangement">
+          <div className="card-component-footer">
             {/* <Badge variant="secondary">Agent</Badge>
             <Badge variant="secondary">
               <div className="w-3">
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 37b26ab1c..00b31bd37 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -354,7 +354,7 @@ The cursor: default; property value restores the browser's default cursor style
 
   .alert-icon {
     @apply h-5 w-5
-  } /*error-build-message-circle*/
+  }
   .alert-font-size {
     @apply text-sm font-medium
   }
@@ -387,4 +387,78 @@ The cursor: default; property value restores the browser's default cursor style
   .success-alert-message {
     @apply alert-font-size text-success-foreground
   }
+
+  .card-component-title-display {
+    @apply round-button-div flex-max-width
+  }
+  .card-component-image {
+    @apply flex h-7 w-7 items-center justify-center rounded-full text-2xl
+  }
+  .card-component-title-size {
+    @apply inline-block w-full flex-1 break-words truncate-doubleline
+  }
+  .card-component-delete-button {
+    @apply flex self-start
+  }
+  .card-component-delete-icon {
+    @apply h-4 w-4 text-primary opacity-0 transition-all group-hover:opacity-100
+  }
+  .card-component-desc {
+    @apply pb-2 pt-2
+  }
+  .card-component-desc-text {
+    @apply truncate-doubleline
+  }
+  .card-component-footer-arrangement {
+    @apply flex-max-width items-end justify-between gap-2
+  }
+  .card-component-footer {
+    @apply flex flex-wrap gap-2
+  }
+
+  .unused-side-bar-aside {
+    @apply flex flex-shrink-0 flex-col overflow-hidden border-r  transition-all duration-500
+  }
+  .unused-side-bar-arrangement {
+    @apply flex h-full  w-52 flex-col items-start overflow-y-auto border bg-background scrollbar-hide
+  }
+  .unused-side-bar-division {
+    @apply flex-max-width flex-grow flex-col
+  }
+  .unused-side-bar-nav {
+    @apply flex-1 space-y-1
+  }
+  .unused-side-bar-link {
+    @apply flex-max-width items-center rounded-md py-2 pl-2 text-sm font-medium
+  }
+  .unused-side-bar-link-colors-true {
+    @apply bg-muted text-foreground
+  }
+  .unused-side-bar-link-colors-false {
+    @apply bg-background text-muted-foreground hover:bg-muted hover:text-foreground
+  }
+  .unused-side-bar-icon {
+    @apply mr-3 flex-shrink-0 h-6 w-6
+  }
+  .unused-side-bar-icon-false {
+    @apply text-ring group-hover:text-accent-foreground
+  }
+  .unused-side-bar-disclosure {
+    @apply unused-side-bar-link pr-1 text-left
+  }
+  .unused-side-bar-disclosure:focus {
+    @apply focus:outline-none focus:ring-1 focus:ring-ring
+  }
+  .unused-side-bar-disclosure-icon {
+    @apply unused-side-bar-icon text-ring group-hover:text-accent-foreground
+  }
+  .unused-side-bar-svg-true {
+    @apply text-ring rotate-90
+  }
+  .unused-side-bar-svg {
+    @apply ml-3 h-5 w-5 flex-shrink-0 duration-150 ease-in-out group-hover:text-accent-foreground
+  }
+  .unused-side-bar-disclosure-panel {
+    @apply flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium
+  }
 }
\ No newline at end of file