diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
deleted file mode 100644
index b629f51..0000000
--- a/app/assets/stylesheets/application.css
+++ /dev/null
@@ -1,42 +0,0 @@
-@keyframes rainbow-pulse {
-  0%, 100% { opacity: 0.7; }
-  50% { opacity: 1; }
-}
-
-@keyframes rainbow { 
-  0% { background-position: 0% 82% }
-  50% { background-position: 100% 19% }
-  100% { background-position: 0% 82% }
-}
-
-@keyframes hue-rotate {
-  0% { filter: hue-rotate(0deg); }
-  100% { filter: hue-rotate(360deg); }
-}
-
-.rainbow-border::before, .rainbow2-border::before {
-  content: '';
-  position: absolute;
-  top: -4px;
-  left: -4px;
-  right: -4px;
-  bottom: -4px;
-  background: linear-gradient(
-    124deg,
-    #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840,
-    #1ddde8, #2b1de8, #dd00f3, #dd00f3
-  );
-  background-size: 1800% 1800%;
-  border-radius: 9999px;
-  animation: rainbow 18s ease infinite, rainbow-pulse 3s infinite;
-  z-index: 10;
-}
-
-.rainbow-border img, .rainbow2-border img {
-  position: relative;
-  z-index: 11;
-}
-
-.rainbow2-border img {
-  animation: hue-rotate 10s linear infinite;
-}
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
new file mode 100644
index 0000000..ee1f4e4
--- /dev/null
+++ b/app/assets/stylesheets/application.css.scss
@@ -0,0 +1,25 @@
+/* Import Font Awesome */
+@import "font-awesome/scss/font-awesome";
+
+/* Import Tailwind CSS */
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+/* Your custom animations and styles */
+@keyframes rainbow {
+  0%, 100% { border-color: red; }
+  14% { border-color: orange; }
+  28% { border-color: yellow; }
+  42% { border-color: green; }
+  56% { border-color: blue; }
+  70% { border-color: indigo; }
+  84% { border-color: violet; }
+}
+
+.animated-border {
+  border-width: 4px;
+  border-style: solid;
+  animation: rainbow 6s linear infinite;
+  border-radius: 50%; /* Ensure the avatar remains circular */
+}
\ No newline at end of file
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index cc5765d..c362315 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -5,6 +5,19 @@ def auto_link_urls(text)
     end.html_safe
   end
 
+  def avatar_border_class(border_preference)
+    case border_preference
+    when 'white'
+      'border-4 border-white'
+    when 'black'
+      'border-4 border-black'
+    when 'rainbow'
+      'animated-border'
+    else
+      ''
+    end
+  end  
+
   def format_referrer(referrer)
     return 'Direct' if referrer.blank?
 
diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js
index 2d3ab6a..9297fad 100644
--- a/app/javascript/entrypoints/application.js
+++ b/app/javascript/entrypoints/application.js
@@ -2,7 +2,7 @@ import Rails from "@rails/ujs";
 import "chartkick/chart.js";
 import "flowbite";
 
-import "../../assets/stylesheets/application.css";
+import "../../assets/stylesheets/application.css.scss";
 import "../../assets/stylesheets/application.tailwind.css";
 
 Rails.start();
diff --git a/app/models/user.rb b/app/models/user.rb
index 26edcef..4ef4ab4 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -14,7 +14,7 @@ class User < ApplicationRecord
   validates :username, uniqueness: true, allow_blank: true
   validates :full_name, presence: true
   validate :ensure_username_presence
-  validates :avatar_border, inclusion: { in: ['white', 'black', 'none', 'rainbow', 'rainbow2'] }
+  validates :avatar_border, inclusion: { in: ['white', 'black', 'none', 'rainbow'] }
 
   after_save :generate_open_graph_image, unless: -> { Rails.env.test? }
   after_save :download_and_store_avatar
diff --git a/app/views/devise/registrations/edit.html.erb b/app/views/devise/registrations/edit.html.erb
index 8256a21..946186a 100644
--- a/app/views/devise/registrations/edit.html.erb
+++ b/app/views/devise/registrations/edit.html.erb
@@ -31,7 +31,7 @@
 
     <div>
       <%= f.label :avatar_border, class: 'block text-lime-200 font-semibold mb-2' %>
-      <%= f.select :avatar_border, options_for_select([['White', 'white'], ['Black', 'black'], ['None', 'none'], ['Rainbow', 'rainbow'], ['Rainbow2', 'rainbow2']], @user.avatar_border), {}, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <%= f.select :avatar_border, options_for_select([['White', 'white'], ['Black', 'black'], ['None', 'none'], ['Rainbow', 'rainbow']], @user.avatar_border), {}, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
     </div>
 
     <div>
diff --git a/app/views/links/user_links.html.erb b/app/views/links/user_links.html.erb
index f01f47b..1a7b3be 100644
--- a/app/views/links/user_links.html.erb
+++ b/app/views/links/user_links.html.erb
@@ -7,18 +7,17 @@
     </div>
   <% end %>
   <div class="flex flex-col items-center <%= @user.banner_enabled && @user.banner.present? ? '-mt-16' : 'mt-8' %>">
-    <div class="relative w-24 h-24 <%= @user.avatar_border == 'rainbow' ? 'rainbow-border' : '' %> <%= @user.avatar_border == 'rainbow2' ? 'rainbow2-border' : '' %>">
+    <div class="relative">
       <% local_avatar_path = "/avatars/#{@user.username}_avatar#{File.extname(@user.avatar)}" %>
       <% if File.exist?(Rails.root.join('public' + local_avatar_path)) %>
-        <%= image_tag local_avatar_path, alt: @user.email, class: "rounded-full object-cover w-full h-full #{'border-4' if @user.avatar_border != 'none' && !['rainbow', 'rainbow2'].include?(@user.avatar_border)} #{@user.avatar_border == 'white' ? 'border-white' : ''} #{@user.avatar_border == 'black' ? 'border-black' : ''}" %>
+        <%= image_tag local_avatar_path, alt: @user.email, class: "rounded-full object-cover border-4 #{avatar_border_class(@user.avatar_border)}", style: "width: 8rem; height: 8rem;" %>
       <% elsif @user.avatar.present? %>
-        <%= image_tag @user.avatar, alt: @user.email, class: "rounded-full object-cover w-full h-full #{'border-4' if @user.avatar_border != 'none' && !['rainbow', 'rainbow2'].include?(@user.avatar_border)} #{@user.avatar_border == 'white' ? 'border-white' : ''} #{@user.avatar_border == 'black' ? 'border-black' : ''}" %>
+        <%= image_tag @user.avatar, alt: @user.email, class: "rounded-full object-cover border-4 #{avatar_border_class(@user.avatar_border)}", style: "width: 8rem; height: 8rem;" %>
       <% else %>
-        <%= image_tag "greg.jpg", alt: @user.email, class: "rounded-full object-cover w-full h-full #{'border-4' if @user.avatar_border != 'none' && !['rainbow', 'rainbow2'].include?(@user.avatar_border)} #{@user.avatar_border == 'white' ? 'border-white' : ''} #{@user.avatar_border == 'black' ? 'border-black' : ''}" %>
+        <%= image_tag "greg.jpg", alt: @user.email, class: "rounded-full object-cover border-4 #{avatar_border_class(@user.avatar_border)}", style: "width: 8rem; height: 8rem;" %>
       <% end %>
     </div>
   </div>
-</div>
 
   <div class="mt-4 text-center">
     <h1 class="text-2xl font-bold text-white"><%= @user.full_name %></h1>
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
index a02bd93..29a6077 100644
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
@@ -8,7 +8,7 @@ module.exports = {
     './app/javascript/**/*.js',
     './app/views/**/*.{erb,haml,html,slim}',
     './node_modules/flowbite/**/*.js',
-    './app/assets/stylesheets/**/*.css',
+    './app/assets/stylesheets/**/*.{css,scss}', // Make sure all CSS and SCSS files are included
   ],
   theme: {
     extend: {
diff --git a/package.json b/package.json
index 26831dc..739a486 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "tailwindcss": "^3.4.10"
   },
   "devDependencies": {
+    "sass": "^1.68.0",
     "vite": "^5.3.5",
     "vite-plugin-ruby": "^5.0.0"
   }