diff --git a/Management.Web/Pages/Index.razor b/Management.Web/Pages/Index.razor
index 8db67f3..6ba5d79 100644
--- a/Management.Web/Pages/Index.razor
+++ b/Management.Web/Pages/Index.razor
@@ -42,7 +42,12 @@
 
 @if(planner.LocalCourse == null)
 {
-  <CurrentFiles RefreshKey="refreshKey" />
+  <div class="row justify-content-center">
+    <div class="col-auto">
+      <CurrentFiles RefreshKey="refreshKey" />
+    </div>
+  </div>
+  
   @if(!showNewFile)
   {
     <div class="text-center">
diff --git a/Management.Web/Shared/CurrentFiles.razor b/Management.Web/Shared/CurrentFiles.razor
index 7da9395..97fa7e4 100644
--- a/Management.Web/Shared/CurrentFiles.razor
+++ b/Management.Web/Shared/CurrentFiles.razor
@@ -3,7 +3,7 @@
 @inject YamlManager yamlManager
 @inject CoursePlanner planner
 
-@code 
+@code
 {
   [Parameter]
   public int RefreshKey { get; set; }
@@ -15,24 +15,20 @@
 
 }
 
-@if(localCourses != null)
-{
-  <h3>Stored Courses</h3>
-  @foreach (var course in localCourses)
+<div class="text-center">
+
+  @if (localCourses != null)
   {
-    void SetCourse()
+    <h3 >Stored Courses</h3>
+    @foreach (var course in localCourses)
     {
-      planner.LocalCourse = course;
-      this.StateHasChanged();
-    }
-    <div>
-      <button 
-        class="btn btn-outline-primary"
-        @onclick="@SetCourse"
+      <h4 
+        class="m-3 hover-underline-animation"  
+        @onclick="() => planner.LocalCourse = course" 
+        role='button'
       >
-        Use
-      </button>
-      @course.Name
-    </div>
+        @course.Name
+      </h4>
+    }
   }
-}
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/Management.Web/Shared/CurrentFiles.razor.css b/Management.Web/Shared/CurrentFiles.razor.css
new file mode 100644
index 0000000..bb8e7bf
--- /dev/null
+++ b/Management.Web/Shared/CurrentFiles.razor.css
@@ -0,0 +1,30 @@
+.hover-underline-animation {
+  display: inline-block;
+  position: relative;
+  color: var(--bs-primary-text-emphasis);
+  transition: all 500ms;
+}
+
+.hover-underline-animation:hover {
+  /* text-shadow: 10px 10px #092565; */
+  /* text-shadow: 10px 10px 40px #092565; */
+  transform: scale(1.05);
+}
+
+.hover-underline-animation::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: var(--bs-primary-text-emphasis);
+  transform-origin: bottom right;
+  transition: transform 500ms ease-out;
+}
+
+.hover-underline-animation:hover::after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
+}
\ No newline at end of file